From b2d5cc7169cc590a08bdc3ee5bfe3f550f73a433 Mon Sep 17 00:00:00 2001 From: Austin Turner Date: Wed, 19 Feb 2025 19:30:23 -0700 Subject: [PATCH 1/2] Fix popover text selection Remove focus trap as this was causing text selection issues in popover - could not figure out the reason why this was the case. Changed the filter icon to filterList icon --- apps/landing/components/Modal.tsx | 80 +++++------- apps/landing/pages/pricing/index.tsx | 10 +- .../src/lib/data-table/DataTableEditors.tsx | 6 +- .../src/lib/data-table/DataTableRenderers.tsx | 2 +- .../src/lib/form/context-menu/ContextMenu.tsx | 6 +- libs/ui/src/lib/popover/Popover.tsx | 111 ++++++++-------- .../SobjectFieldListFilter.tsx | 12 +- .../lib/sobject-list/SobjectListFilter.tsx | 8 +- package.json | 2 +- yarn.lock | 122 ++++++++++++++++-- 10 files changed, 223 insertions(+), 136 deletions(-) diff --git a/apps/landing/components/Modal.tsx b/apps/landing/components/Modal.tsx index 06f7ab7be..b16b3033c 100644 --- a/apps/landing/components/Modal.tsx +++ b/apps/landing/components/Modal.tsx @@ -1,4 +1,4 @@ -import { Dialog, Transition } from '@headlessui/react'; +import { Dialog, DialogBackdrop, TransitionChild } from '@headlessui/react'; import { Bars3Icon } from '@heroicons/react/24/outline'; import { Fragment } from 'react'; @@ -18,51 +18,41 @@ export const Modal = ({ onClose, }: ModalProps) => { return ( - - onClose()}> -
- - - - - {/* This element is to trick the browser into centering the modal contents. */} - - -
-
- -
- {children} + onClose()}> + +
+ {/* This element is to trick the browser into centering the modal contents. */} + + +
+
+
- -
-
- + {children} +
+ +
+ ); }; diff --git a/apps/landing/pages/pricing/index.tsx b/apps/landing/pages/pricing/index.tsx index b8460a3ed..b337ffc3e 100644 --- a/apps/landing/pages/pricing/index.tsx +++ b/apps/landing/pages/pricing/index.tsx @@ -1,4 +1,4 @@ -import { RadioGroup } from '@headlessui/react'; +import { Radio, RadioGroup } from '@headlessui/react'; import { CheckIcon } from '@heroicons/react/20/solid'; import classNames from 'classnames'; import Link from 'next/link'; @@ -91,13 +91,9 @@ export default function Page() { className="grid grid-cols-2 gap-x-1 rounded-full bg-white/5 p-1 text-center text-xs/5 font-semibold text-white" > {frequencies.map((option) => ( - + {option.label} - + ))} diff --git a/libs/ui/src/lib/data-table/DataTableEditors.tsx b/libs/ui/src/lib/data-table/DataTableEditors.tsx index 40f186ffb..b5b2c5192 100644 --- a/libs/ui/src/lib/data-table/DataTableEditors.tsx +++ b/libs/ui/src/lib/data-table/DataTableEditors.tsx @@ -1,9 +1,9 @@ -import { FocusTrap } from '@headlessui/react'; import { logger } from '@jetstream/shared/client-logger'; import { SFDC_BLANK_PICKLIST_VALUE } from '@jetstream/shared/constants'; import { describeSObject, query } from '@jetstream/shared/data'; import { isEnterKey, isEscapeKey } from '@jetstream/shared/ui-utils'; import { ListItem, SalesforceOrgUi } from '@jetstream/types'; +import { FocusScope } from '@react-aria/focus'; import { formatISO } from 'date-fns/formatISO'; import { parseISO } from 'date-fns/parseISO'; import isNil from 'lodash/isNil'; @@ -71,9 +71,9 @@ function DataTableEditorPopover({ }} > {referenceElement && ( - +
{children}
- + )} diff --git a/libs/ui/src/lib/data-table/DataTableRenderers.tsx b/libs/ui/src/lib/data-table/DataTableRenderers.tsx index 12a5fc01e..73bf9edd7 100644 --- a/libs/ui/src/lib/data-table/DataTableRenderers.tsx +++ b/libs/ui/src/lib/data-table/DataTableRenderers.tsx @@ -223,7 +223,7 @@ export const HeaderFilter = memo(({ columnKey, filters, filterSetValues, portalR > = ({ parentElement return ( onClose()}> - +
= ({ parentElement ))}
- + ); }; diff --git a/libs/ui/src/lib/popover/Popover.tsx b/libs/ui/src/lib/popover/Popover.tsx index 92c8f13c9..feac97655 100644 --- a/libs/ui/src/lib/popover/Popover.tsx +++ b/libs/ui/src/lib/popover/Popover.tsx @@ -1,5 +1,5 @@ import { css, SerializedStyles } from '@emotion/react'; -import { FocusTrap, Popover as HeadlessPopover } from '@headlessui/react'; +import { Popover as HeadlessPopover, PopoverButton, PopoverPanel } from '@headlessui/react'; import { FullWidth, sizeXLarge, SmallMediumLarge } from '@jetstream/types'; import classNames from 'classnames'; import { CSSProperties, forwardRef, Fragment, MouseEvent, ReactNode, useCallback, useImperativeHandle, useRef, useState } from 'react'; @@ -128,7 +128,7 @@ export const Popover = forwardRef( {open && ( - ( `} {...panelProps} > - - {/* CLOSE BUTTON */} - - - Close dialog - - {/* CONTENT */} - {header} -
- {content} -
- {footer} - {/* ARROW */} -
*/} + {/* CLOSE BUTTON */} + + + Close dialog + + {/* CONTENT */} + {header} +
+ {content} +
+ {footer} + {/* ARROW */} +
- - + } + &::after { + visibility: visible; + content: ''; + transform: rotate(45deg); + position: absolute; + width: 1rem; + height: 1rem; + /* background-color: inherit; */ + } + `} + className="popover-arrow" + ref={setArrowElement} + style={styles.arrow} + >
+ {/* */} + )} - + {children} - + ); }} diff --git a/libs/ui/src/lib/sobject-field-list/SobjectFieldListFilter.tsx b/libs/ui/src/lib/sobject-field-list/SobjectFieldListFilter.tsx index ebcdae900..6f51f138f 100644 --- a/libs/ui/src/lib/sobject-field-list/SobjectFieldListFilter.tsx +++ b/libs/ui/src/lib/sobject-field-list/SobjectFieldListFilter.tsx @@ -166,13 +166,7 @@ export const SobjectFieldListFilter: FunctionComponent - + {!!filterSelectedCount && (
{!!hasFiltersApplied && ( @@ -233,8 +233,8 @@ export const SobjectFieldListFilter: FunctionComponent Date: Wed, 19 Feb 2025 20:03:24 -0700 Subject: [PATCH 2/2] Fix landing page modal --- apps/landing/components/Modal.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/landing/components/Modal.tsx b/apps/landing/components/Modal.tsx index b16b3033c..054d5ddad 100644 --- a/apps/landing/components/Modal.tsx +++ b/apps/landing/components/Modal.tsx @@ -1,5 +1,5 @@ import { Dialog, DialogBackdrop, TransitionChild } from '@headlessui/react'; -import { Bars3Icon } from '@heroicons/react/24/outline'; +import { XMarkIcon } from '@heroicons/react/24/outline'; import { Fragment } from 'react'; export interface ModalProps { @@ -18,10 +18,11 @@ export const Modal = ({ onClose, }: ModalProps) => { return ( - onClose()}> + onClose()}> onClose()} />
{/* This element is to trick the browser into centering the modal contents. */} @@ -45,7 +46,7 @@ export const Modal = ({ onClick={() => onClose()} > Close -
{children}