diff --git a/packages/core/package.json b/packages/core/package.json index 236fd898..f10a9d4c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -76,7 +76,7 @@ "@kobalte/utils": "^0.9.1", "@solid-primitives/props": "^3.1.8", "@solid-primitives/resize-observer": "^2.0.26", - "solid-presence": "^0.1.6", + "solid-presence": "^0.1.8", "solid-prevent-scroll": "^0.1.4" }, "devDependencies": { diff --git a/packages/core/src/accordion/accordion-root.tsx b/packages/core/src/accordion/accordion-root.tsx index 86482dad..17b84461 100644 --- a/packages/core/src/accordion/accordion-root.tsx +++ b/packages/core/src/accordion/accordion-root.tsx @@ -61,7 +61,7 @@ export interface AccordionRootCommonProps { ref: T | ((el: T) => void); onKeyDown: JSX.EventHandlerUnion; onMouseDown: JSX.EventHandlerUnion; - onFocusIn: JSX.EventHandlerUnion; + onFocusIn: JSX.EventHandlerUnion; // TODO: remove next breaking onFocusOut: JSX.EventHandlerUnion; } @@ -102,7 +102,7 @@ export function AccordionRoot( "shouldFocusWrap", "onKeyDown", "onMouseDown", - "onFocusIn", + "onFocusIn", // TODO: remove next breaking "onFocusOut", ]); @@ -122,6 +122,8 @@ export function AccordionRoot( dataSource: items, }); + listState.selectionManager().setFocusedKey("item-1"); + const selectableList = createSelectableList( { selectionManager: () => listState.selectionManager(), @@ -156,8 +158,7 @@ export function AccordionRoot( selectableList.onMouseDown, ])} onFocusIn={composeEventHandlers([ - local.onFocusIn, - selectableList.onFocusIn, + local.onFocusIn, // TODO: remove next breaking ])} onFocusOut={composeEventHandlers([ local.onFocusOut, diff --git a/packages/core/src/collapsible/collapsible-content.tsx b/packages/core/src/collapsible/collapsible-content.tsx index acb73265..d74cffc3 100644 --- a/packages/core/src/collapsible/collapsible-content.tsx +++ b/packages/core/src/collapsible/collapsible-content.tsx @@ -78,9 +78,7 @@ export function CollapsibleContent( // When opening we want it to immediately open to retrieve dimensions. // When closing we delay `present` to retrieve dimensions before closing. const isOpen = () => context.isOpen() || present(); - let isMountAnimationPrevented = isOpen(); - let originalStyles: Record | undefined; onMount(() => { const raf = requestAnimationFrame(() => { @@ -105,11 +103,6 @@ export function CollapsibleContent( return; } - originalStyles = originalStyles || { - transitionDuration: ref()!.style.transitionDuration, - animationName: ref()!.style.animationName, - }; - // block any animations/transitions so the element renders at its full dimensions ref()!.style.transitionDuration = "0s"; ref()!.style.animationName = "none"; @@ -121,10 +114,23 @@ export function CollapsibleContent( // kick off any animations/transitions that were originally set up if it isn't the initial mount if (!isMountAnimationPrevented) { - ref()!.style.transitionDuration = originalStyles.transitionDuration; - ref()!.style.animationName = originalStyles.animationName; + ref()!.style.transitionDuration = ""; + ref()!.style.animationName = ""; + } + }, + ), + ); + + createEffect( + on( + context.isOpen, + (open) => { + if (!open && ref()) { + ref()!.style.transitionDuration = ""; + ref()!.style.animationName = ""; } }, + { defer: true }, ), ); diff --git a/packages/core/src/combobox/combobox-base.tsx b/packages/core/src/combobox/combobox-base.tsx index ae36f2bc..8841ee24 100644 --- a/packages/core/src/combobox/combobox-base.tsx +++ b/packages/core/src/combobox/combobox-base.tsx @@ -589,7 +589,7 @@ export function ComboboxBase< const { present: contentPresent } = createPresence({ show: () => local.forceMount || disclosureState.isOpen(), - element: contentRef, + element: () => contentRef() ?? null, }); const open = ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2f824b12..783a3c0b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -223,8 +223,8 @@ importers: specifier: ^1.8.15 version: 1.8.15 solid-presence: - specifier: ^0.1.6 - version: 0.1.6(solid-js@1.8.15) + specifier: ^0.1.8 + version: 0.1.8(solid-js@1.8.15) solid-prevent-scroll: specifier: ^0.1.4 version: 0.1.7(solid-js@1.8.15) @@ -2287,6 +2287,15 @@ packages: solid-js: 1.8.15 dev: false + /@corvu/utils@0.4.1(solid-js@1.8.15): + resolution: {integrity: sha512-swd/2DUJiXTo9PM5GVbBv3jNlEOwmKWvVOJG2l8Cwu1cokoXknKrDkBSZRz+yf0rFXdbhWhRQMWDPMPwuBnWNg==} + peerDependencies: + solid-js: ^1.8 + dependencies: + '@floating-ui/dom': 1.6.10 + solid-js: 1.8.15 + dev: false + /@cspotcode/source-map-support@0.8.1: resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==} engines: {node: '>=12'} @@ -3353,6 +3362,13 @@ packages: '@floating-ui/utils': 0.2.2 dev: false + /@floating-ui/dom@1.6.10: + resolution: {integrity: sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==} + dependencies: + '@floating-ui/core': 1.6.2 + '@floating-ui/utils': 0.2.7 + dev: false + /@floating-ui/dom@1.6.5: resolution: {integrity: sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==} dependencies: @@ -3364,6 +3380,10 @@ packages: resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==} dev: false + /@floating-ui/utils@0.2.7: + resolution: {integrity: sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==} + dev: false + /@iarna/toml@2.2.5: resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==} dev: true @@ -11213,12 +11233,12 @@ packages: vite: 5.1.4(@types/node@20.5.4) dev: true - /solid-presence@0.1.6(solid-js@1.8.15): - resolution: {integrity: sha512-J0SLoXIkqJ9q1reaCJfcaUFz3XmKxhcKp7iUi8QvrWHHeWbVVy/IIAEd/yaZHRzWs0x61SPUdP5YrparwqmWeA==} + /solid-presence@0.1.8(solid-js@1.8.15): + resolution: {integrity: sha512-pWGtXUFWYYUZNbg5YpG5vkQJyOtzn2KXhxYaMx/4I+lylTLYkITOLevaCwMRN+liCVk0pqB6EayLWojNqBFECA==} peerDependencies: solid-js: ^1.8 dependencies: - '@corvu/utils': 0.2.0(solid-js@1.8.15) + '@corvu/utils': 0.4.1(solid-js@1.8.15) solid-js: 1.8.15 dev: false