diff --git a/.yarn/cache/@ariakit-core-npm-0.1.1-af1bc2d80a-b4db09f0f0.zip b/.yarn/cache/@ariakit-core-npm-0.1.1-af1bc2d80a-b4db09f0f0.zip deleted file mode 100644 index e5ef7d127..000000000 Binary files a/.yarn/cache/@ariakit-core-npm-0.1.1-af1bc2d80a-b4db09f0f0.zip and /dev/null differ diff --git a/.yarn/cache/@ariakit-core-npm-0.2.0-ce89b84e1e-f95e3db9eb.zip b/.yarn/cache/@ariakit-core-npm-0.2.0-ce89b84e1e-f95e3db9eb.zip new file mode 100644 index 000000000..5a2f89842 Binary files /dev/null and b/.yarn/cache/@ariakit-core-npm-0.2.0-ce89b84e1e-f95e3db9eb.zip differ diff --git a/.yarn/cache/@ariakit-react-core-npm-0.1.2-97b6e8fa7d-c42738d48e.zip b/.yarn/cache/@ariakit-react-core-npm-0.1.2-97b6e8fa7d-c42738d48e.zip deleted file mode 100644 index e73cd63a7..000000000 Binary files a/.yarn/cache/@ariakit-react-core-npm-0.1.2-97b6e8fa7d-c42738d48e.zip and /dev/null differ diff --git a/.yarn/cache/@ariakit-react-core-npm-0.2.1-181b948e55-c10ba749af.zip b/.yarn/cache/@ariakit-react-core-npm-0.2.1-181b948e55-c10ba749af.zip new file mode 100644 index 000000000..ec9564dd9 Binary files /dev/null and b/.yarn/cache/@ariakit-react-core-npm-0.2.1-181b948e55-c10ba749af.zip differ diff --git a/.yarn/cache/@ariakit-react-npm-0.1.2-f728e3fe9e-5f6687b59a.zip b/.yarn/cache/@ariakit-react-npm-0.1.2-f728e3fe9e-5f6687b59a.zip deleted file mode 100644 index 699cac0e2..000000000 Binary files a/.yarn/cache/@ariakit-react-npm-0.1.2-f728e3fe9e-5f6687b59a.zip and /dev/null differ diff --git a/.yarn/cache/@ariakit-react-npm-0.2.1-0c8c192054-55de2d395f.zip b/.yarn/cache/@ariakit-react-npm-0.2.1-0c8c192054-55de2d395f.zip new file mode 100644 index 000000000..ee13f7492 Binary files /dev/null and b/.yarn/cache/@ariakit-react-npm-0.2.1-0c8c192054-55de2d395f.zip differ diff --git a/packages/web/package.json b/packages/web/package.json index 78fa5534d..3cf56dd2b 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -107,7 +107,7 @@ "app/**/*.{js,ts,jsx,tsx,css,md}": "prettier --write" }, "dependencies": { - "@ariakit/react": "^0.1.2", + "@ariakit/react": "^0.2.1", "@lexical/headless": "0.10.0", "@radix-ui/react-slot": "^1.0.1" } diff --git a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx b/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx index 15d4699c2..7c4a9f8e6 100644 --- a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx +++ b/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx @@ -1,4 +1,3 @@ -import { useEffect } from 'react' import Icon from '@/Components/Icon/Icon' import { DropdownItem } from './DropdownItem' import { classNames } from '@standardnotes/snjs' @@ -17,7 +16,7 @@ type DropdownProps = { label: string items: DropdownItem[] value: string - onChange: (value: string, item: DropdownItem) => void + onChange: (value: string) => void disabled?: boolean classNameOverride?: { wrapper?: string @@ -39,36 +38,14 @@ const Dropdown = ({ popoverPlacement, }: DropdownProps) => { const select = useSelectStore({ - defaultValue: value, - renderCallback(props) { - const { popoverElement, defaultRenderCallback } = props - defaultRenderCallback() - if (popoverElement) { - popoverElement.style.zIndex = 'var(--z-index-dropdown-menu)' - } - }, - placement: popoverPlacement, + value, + setValue: onChange, + placement: popoverPlacement || 'top', }) - const selectedValue = select.useState('value') const isExpanded = select.useState('open') - const currentItem = items.find((item) => item.value === selectedValue) - - useEffect(() => { - select.setValue(value) - }, [select, value]) - - useEffect(() => { - return select.subscribe( - (state) => { - if (state.value !== value) { - onChange(state.value, items.find((item) => item.value === state.value) as DropdownItem) - } - }, - ['value'], - ) - }, [items, onChange, select, value]) + const currentItem = items.find((item) => item.value === value) return (
{ + const { updatePosition } = props + const { popoverElement } = select.getState() + updatePosition() + if (popoverElement) { + popoverElement.style.zIndex = 'var(--z-index-dropdown-menu)' + } + }} > {items.map((item) => ( ) => { - const [isMounted, setElement] = useModalAnimation(isOpen) - const dialog = useDialogStore({ - open: isMounted, - }) +const ModalOverlay = forwardRef(({ isOpen, children, ...props }: Props, ref: ForwardedRef) => { + const [isMounted, setElement] = useModalAnimation(isOpen) + const dialog = useDialogStore({ + open: isMounted, + }) - if (!isMounted) { - return null - } + if (!isMounted) { + return null + } - return ( - - {children} - - ) - }, -) + return ( + + {children} + + ) +}) export default ModalOverlay diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx index b0f0e844c..f2cd90294 100644 --- a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx +++ b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx @@ -90,22 +90,24 @@ const Appearance: FunctionComponent = ({ application }) => { setUseDeviceSettings(!useDeviceSettings) } - const changeAutoLightTheme = (value: string, item: DropdownItem) => { - if (item.icon === PremiumFeatureIconName) { + const changeAutoLightTheme = (value: string) => { + const item = themeItems.find((item) => item.value === value) + if (item && item.icon === PremiumFeatureIconName) { premiumModal.activate(`${item.label} theme`) - } else { - application.setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier).catch(console.error) - setAutoLightTheme(value) + return } + application.setPreference(PrefKey.AutoLightThemeIdentifier, value as FeatureIdentifier).catch(console.error) + setAutoLightTheme(value) } - const changeAutoDarkTheme = (value: string, item: DropdownItem) => { - if (item.icon === PremiumFeatureIconName) { + const changeAutoDarkTheme = (value: string) => { + const item = themeItems.find((item) => item.value === value) + if (item && item.icon === PremiumFeatureIconName) { premiumModal.activate(`${item.label} theme`) - } else { - application.setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier).catch(console.error) - setAutoDarkTheme(value) + return } + application.setPreference(PrefKey.AutoDarkThemeIdentifier, value as FeatureIdentifier).catch(console.error) + setAutoDarkTheme(value) } return ( diff --git a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx index 6e6bf1ffb..b28103c4f 100644 --- a/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx +++ b/packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx @@ -1,6 +1,6 @@ import { classNames } from '@standardnotes/snjs' import { ReactNode } from 'react' -import { Tooltip, TooltipAnchor, TooltipStoreProps, useTooltipStore } from '@ariakit/react' +import { Tooltip, TooltipAnchor, TooltipOptions, useTooltipStore } from '@ariakit/react' import { Slot } from '@radix-ui/react-slot' import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery' import { getPositionedPopoverStyles } from '../Popover/GetPositionedPopoverStyles' @@ -14,35 +14,9 @@ const StyledTooltip = ({ children: ReactNode className?: string label: string -} & Partial) => { +} & Partial) => { const tooltip = useTooltipStore({ timeout: 350, - renderCallback(props) { - const { popoverElement, anchorElement } = props - - const documentElement = document.querySelector('.main-ui-view') - - if (!popoverElement || !anchorElement || !documentElement) { - return - } - - const anchorRect = anchorElement.getBoundingClientRect() - const popoverRect = popoverElement.getBoundingClientRect() - const documentRect = documentElement.getBoundingClientRect() - - const styles = getPositionedPopoverStyles({ - align: 'center', - side: 'bottom', - anchorRect, - popoverRect, - documentRect, - disableMobileFullscreenTakeover: true, - offset: 6, - }) - - Object.assign(popoverElement.style, styles) - }, - ...props, }) const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm) @@ -61,6 +35,32 @@ const StyledTooltip = ({ 'z-tooltip max-w-max rounded border border-border bg-contrast py-1.5 px-3 text-sm text-foreground shadow', className, )} + updatePosition={() => { + const { popoverElement, anchorElement } = tooltip.getState() + + const documentElement = document.querySelector('.main-ui-view') + + if (!popoverElement || !anchorElement || !documentElement) { + return + } + + const anchorRect = anchorElement.getBoundingClientRect() + const popoverRect = popoverElement.getBoundingClientRect() + const documentRect = documentElement.getBoundingClientRect() + + const styles = getPositionedPopoverStyles({ + align: 'center', + side: 'bottom', + anchorRect, + popoverRect, + documentRect, + disableMobileFullscreenTakeover: true, + offset: 6, + }) + + Object.assign(popoverElement.style, styles) + }} + {...props} > {label} diff --git a/yarn.lock b/yarn.lock index 30ae87a4e..8ab47c72f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -22,37 +22,36 @@ __metadata: languageName: node linkType: hard -"@ariakit/core@npm:0.1.1": - version: 0.1.1 - resolution: "@ariakit/core@npm:0.1.1" - checksum: b4db09f0f0fd5787ad5b76dad33ea01cfc5ba4cbdbfd19fe790bd8663b92beb379fd9f0f5c1bfee8448564b15250c5e1fa571e4fa515b60178faa29e5db5930c +"@ariakit/core@npm:0.2.0": + version: 0.2.0 + resolution: "@ariakit/core@npm:0.2.0" + checksum: f95e3db9ebb3a1b34ed8127f279c8d1a820ad04d42e59cb74b210df1bfb82bc7b5a3a2e965aeb089413015f2c7c573729230eb2e30494669c0a478a721aada3b languageName: node linkType: hard -"@ariakit/react-core@npm:0.1.2": - version: 0.1.2 - resolution: "@ariakit/react-core@npm:0.1.2" +"@ariakit/react-core@npm:0.2.1": + version: 0.2.1 + resolution: "@ariakit/react-core@npm:0.2.1" dependencies: - "@ariakit/core": 0.1.1 + "@ariakit/core": 0.2.0 + "@floating-ui/dom": ^1.0.0 use-sync-external-store: ^1.2.0 peerDependencies: react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 - checksum: c42738d48ed4cfc1b6afb6cdcc9399970e2f90d7ff5d1d3fab99e9c7383e10ecffd11d0d6faeeb4dcada13bf4eb9268543930675a572fcca58aee88dfb695c7a + checksum: c10ba749afd48f16372bbed161587043dd1f97641b782f159031d4dafce71119b555403f99d71584e121b77b83d1f323578867119b08d779c49c34a22bab92f6 languageName: node linkType: hard -"@ariakit/react@npm:^0.1.2": - version: 0.1.2 - resolution: "@ariakit/react@npm:0.1.2" +"@ariakit/react@npm:^0.2.1": + version: 0.2.1 + resolution: "@ariakit/react@npm:0.2.1" dependencies: - "@ariakit/core": 0.1.1 - "@ariakit/react-core": 0.1.2 - "@floating-ui/dom": ^1.0.0 + "@ariakit/react-core": 0.2.1 peerDependencies: react: ^17.0.0 || ^18.0.0 react-dom: ^17.0.0 || ^18.0.0 - checksum: 5f6687b59ae04c14e90d22d486fe0d9a97df5e2b31d88f248d084fa95ea3f16333231f9f92dff025f21c712975904b3f6e0f9747896f5920583d4bc43c96b11d + checksum: 55de2d395fa6a2ae3ef3b383f7559af155e177b9065fe07b8baf8984689bc2ad0bb8531aac1c97ad2ca388c5cf3199b3407ffe3f292533d076bfd0613405d3d3 languageName: node linkType: hard @@ -4761,7 +4760,7 @@ __metadata: version: 0.0.0-use.local resolution: "@standardnotes/web@workspace:packages/web" dependencies: - "@ariakit/react": ^0.1.2 + "@ariakit/react": ^0.2.1 "@babel/core": "*" "@babel/plugin-proposal-class-properties": ^7.18.6 "@babel/plugin-transform-react-jsx": ^7.19.0