@salt-ds/lab 1.0.0-alpha.90 → 1.0.0-alpha.91

package/dist-cjs/side-panel/SidePanelContent.js

@@ -7,6 +7,8 @@ var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
 var SidePanelContext = require('./internal/SidePanelContext.js');
+var useIsScrollable = require('./internal/useIsScrollable.js');
+require('tabbable');
 var SidePanelContent$1 = require('./SidePanelContent.css.js');
 
 const withBaseName = core.makePrefixer("saltSidePanelContent");
@@ -22,29 +24,7 @@ const SidePanelContent = react.forwardRef(function SidePanelContent2(props, ref)
   const targetWindow = window.useWindow();
   const contentSuffixId = core.useId();
   const bodyRef = react.useRef(null);
-  const [isScrollable, setIsScrollable] = react.useState(false);
-  react.useEffect(() => {
-    const bodyElement = bodyRef.current;
-    if (!bodyElement) {
-      return;
-    }
-    const checkScrollable = () => {
-      setIsScrollable(
-        bodyElement.scrollHeight > bodyElement.clientHeight || bodyElement.scrollWidth > bodyElement.clientWidth
-      );
-    };
-    checkScrollable();
-    const resizeObserver = new ResizeObserver(() => {
-      checkScrollable();
-    });
-    resizeObserver.observe(bodyElement);
-    const mutationObserver = new MutationObserver(checkScrollable);
-    mutationObserver.observe(bodyElement, { childList: true, subtree: true });
-    return () => {
-      resizeObserver.disconnect();
-      mutationObserver.disconnect();
-    };
-  }, []);
+  const isScrollable = useIsScrollable.useIsScrollable(bodyRef);
   styles.useComponentCssInjection({
     testId: "salt-side-panel-content",
     css: SidePanelContent$1,

package/dist-cjs/side-panel/SidePanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelContent.js","sources":["../src/side-panel/SidePanelContent.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useSidePanelContext } from \"./internal\";\nimport sidePanelContentCss from \"./SidePanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelContent\");\n\nexport interface SidePanelContentProps extends ComponentPropsWithRef<\"div\"> {}\n\nexport const SidePanelContent = forwardRef<\n  HTMLDivElement,\n  SidePanelContentProps\n>(function SidePanelContent(props, ref) {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n\n  const { titleId } = useSidePanelContext();\n  const targetWindow = useWindow();\n  const contentSuffixId = useId();\n  const bodyRef = useRef<HTMLDivElement | null>(null);\n  const [isScrollable, setIsScrollable] = useState(false);\n\n  // Monitor scrollability of the body element\n  useEffect(() => {\n    const bodyElement = bodyRef.current;\n    if (!bodyElement) {\n      return;\n    }\n\n    const checkScrollable = () => {\n      // Element is scrollable if scrollHeight > clientHeight\n      setIsScrollable(\n        bodyElement.scrollHeight > bodyElement.clientHeight ||\n          bodyElement.scrollWidth > bodyElement.clientWidth,\n      );\n    };\n\n    // Check immediately\n    checkScrollable();\n\n    // Use ResizeObserver to detect when the panel resizes\n    const resizeObserver = new ResizeObserver(() => {\n      checkScrollable();\n    });\n\n    resizeObserver.observe(bodyElement);\n\n    // Use MutationObserver to detect when dynamic content is added/removed,\n    // since child size changes don't trigger ResizeObserver on the parent.\n    const mutationObserver = new MutationObserver(checkScrollable);\n    mutationObserver.observe(bodyElement, { childList: true, subtree: true });\n\n    return () => {\n      resizeObserver.disconnect();\n      mutationObserver.disconnect();\n    };\n  }, []);\n\n  useComponentCssInjection({\n    testId: \"salt-side-panel-content\",\n    css: sidePanelContentCss,\n    window: targetWindow,\n  });\n\n  const explicitLabelledBy = ariaLabelledBy;\n  const explicitLabel = ariaLabel;\n\n  let bodyAriaLabelledBy: string | undefined;\n  let bodyAriaLabel: string | undefined;\n\n  if (isScrollable) {\n    if (explicitLabelledBy) {\n      bodyAriaLabelledBy = explicitLabelledBy;\n    } else if (titleId) {\n      bodyAriaLabelledBy = clsx(titleId, contentSuffixId) || undefined;\n    } else {\n      bodyAriaLabel = explicitLabel ?? \"Content\";\n    }\n  }\n\n  return (\n    <div ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n      {isScrollable ? (\n        <span id={contentSuffixId} hidden>\n          content\n        </span>\n      ) : null}\n      <div\n        ref={bodyRef}\n        className={withBaseName(\"body\")}\n        {...(isScrollable && {\n          role: \"region\",\n          tabIndex: 0,\n          \"aria-labelledby\": bodyAriaLabelledBy,\n          \"aria-label\": bodyAriaLabel,\n        })}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","SidePanelContent","useSidePanelContext","useWindow","useId","useRef","useState","useEffect","useComponentCssInjection","sidePanelContentCss","clsx","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"SidePanelContent.js","sources":["../src/side-panel/SidePanelContent.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef, useRef } from \"react\";\nimport { useIsScrollable, useSidePanelContext } from \"./internal\";\nimport sidePanelContentCss from \"./SidePanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelContent\");\n\nexport interface SidePanelContentProps extends ComponentPropsWithRef<\"div\"> {}\n\nexport const SidePanelContent = forwardRef<\n  HTMLDivElement,\n  SidePanelContentProps\n>(function SidePanelContent(props, ref) {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n\n  const { titleId } = useSidePanelContext();\n  const targetWindow = useWindow();\n  const contentSuffixId = useId();\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const isScrollable = useIsScrollable(bodyRef);\n\n  useComponentCssInjection({\n    testId: \"salt-side-panel-content\",\n    css: sidePanelContentCss,\n    window: targetWindow,\n  });\n\n  const explicitLabelledBy = ariaLabelledBy;\n  const explicitLabel = ariaLabel;\n\n  let bodyAriaLabelledBy: string | undefined;\n  let bodyAriaLabel: string | undefined;\n\n  if (isScrollable) {\n    if (explicitLabelledBy) {\n      bodyAriaLabelledBy = explicitLabelledBy;\n    } else if (titleId) {\n      bodyAriaLabelledBy = clsx(titleId, contentSuffixId) || undefined;\n    } else {\n      bodyAriaLabel = explicitLabel ?? \"Content\";\n    }\n  }\n\n  return (\n    <div ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n      {isScrollable ? (\n        <span id={contentSuffixId} hidden>\n          content\n        </span>\n      ) : null}\n      <div\n        ref={bodyRef}\n        className={withBaseName(\"body\")}\n        {...(isScrollable && {\n          role: \"region\",\n          tabIndex: 0,\n          \"aria-labelledby\": bodyAriaLabelledBy,\n          \"aria-label\": bodyAriaLabel,\n        })}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","SidePanelContent","useSidePanelContext","useWindow","useId","useRef","useIsScrollable","useComponentCssInjection","sidePanelContentCss","clsx","jsxs","jsx"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA;AAIjD,MAAM,gBAAA,GAAmBC,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,iBAAA,EAAmB,cAAA;AAAA,IACnB,YAAA,EAAc,SAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,OAAA,EAAQ,GAAIC,oCAAA,EAAoB;AACxC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAA,MAAM,kBAAkBC,UAAA,EAAM;AAC9B,EAAA,MAAM,OAAA,GAAUC,aAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,YAAA,GAAeC,gCAAgB,OAAO,CAAA;AAE5C,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,yBAAA;AAAA,IACR,GAAA,EAAKC,kBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,kBAAA,GAAqB,cAAA;AAC3B,EAAA,MAAM,aAAA,GAAgB,SAAA;AAEtB,EAAA,IAAI,kBAAA;AACJ,EAAA,IAAI,aAAA;AAEJ,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,IAAI,kBAAA,EAAoB;AACtB,MAAA,kBAAA,GAAqB,kBAAA;AAAA,IACvB,WAAW,OAAA,EAAS;AAClB,MAAA,kBAAA,GAAqBC,SAAA,CAAK,OAAA,EAAS,eAAe,CAAA,IAAK,MAAA;AAAA,IACzD,CAAA,MAAO;AACL,MAAA,aAAA,GAAgB,aAAA,IAAiB,SAAA;AAAA,IACnC;AAAA,EACF;AAEA,EAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAWD,SAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5D,QAAA,EAAA;AAAA,IAAA,YAAA,kCACE,MAAA,EAAA,EAAK,EAAA,EAAI,iBAAiB,MAAA,EAAM,IAAA,EAAC,qBAElC,CAAA,GACE,IAAA;AAAA,oBACJE,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAC7B,GAAI,YAAA,IAAgB;AAAA,UACnB,IAAA,EAAM,QAAA;AAAA,UACN,QAAA,EAAU,CAAA;AAAA,UACV,iBAAA,EAAmB,kBAAA;AAAA,UACnB,YAAA,EAAc;AAAA,SAChB;AAAA,QAEC;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/side-panel/SidePanelHeader.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSidePanelHeader {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: var(--salt-spacing-100);\n  padding: 0 0 var(--salt-spacing-300);\n}\n";
+var css_248z = ".saltSidePanelHeader {\n  display: flex;\n  align-items: flex-start;\n  flex-shrink: 0;\n  gap: var(--salt-spacing-100);\n  padding: 0 0 var(--salt-spacing-300);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=SidePanelHeader.css.js.map

package/dist-cjs/side-panel/SidePanelProvider.js

@@ -5,6 +5,7 @@ var react$1 = require('@floating-ui/react');
 var core = require('@salt-ds/core');
 var react = require('react');
 var SidePanelContext = require('./internal/SidePanelContext.js');
+var useSidePanelTabOrder = require('./internal/useSidePanelTabOrder.js');
 
 function SidePanelProvider(props) {
   const { children, open: openProp, defaultOpen, onOpenChange } = props;
@@ -25,6 +26,9 @@ function SidePanelProvider(props) {
   const [floating, setFloating] = react.useState(null);
   const [panelId, setPanelId] = react.useState(void 0);
   const [titleId, setTitleId] = react.useState(void 0);
+  const [position, setPosition] = react.useState(
+    void 0
+  );
   const floatingRootContext = react$1.useFloatingRootContext({
     open: openState,
     onOpenChange: handleOpenChange,
@@ -50,6 +54,11 @@ function SidePanelProvider(props) {
       floating.removeEventListener("keydown", onKeyDown);
     };
   }, [floating, openState, handleOpenChange]);
+  useSidePanelTabOrder.useSidePanelTabOrder({
+    floating,
+    open: openState,
+    reference
+  });
   const context = react.useMemo(
     () => ({
       openState,
@@ -60,9 +69,18 @@ function SidePanelProvider(props) {
       panelId,
       setPanelId,
       titleId,
-      setTitleId
+      setTitleId,
+      position,
+      setPosition
     }),
-    [openState, floatingRootContext, handleOpenChange, panelId, titleId]
+    [
+      openState,
+      floatingRootContext,
+      handleOpenChange,
+      panelId,
+      titleId,
+      position
+    ]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(SidePanelContext.SidePanelContext.Provider, { value: context, children });
 }

package/dist-cjs/side-panel/SidePanelProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelProvider.js","sources":["../src/side-panel/SidePanelProvider.tsx"],"sourcesContent":["import { useFloatingRootContext } from \"@floating-ui/react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { SidePanelContext } from \"./internal\";\n\nexport interface SidePanelProviderProps {\n  /**\n   * Whether the panel is open.\n   */\n  open?: boolean;\n  /**\n   * Default open state when initially rendered.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * SidePanelProvider children, should include SidePanel and SidePanelTrigger.\n   */\n  children: ReactNode;\n}\n\nexport function SidePanelProvider(props: SidePanelProviderProps) {\n  const { children, open: openProp, defaultOpen, onOpenChange } = props;\n\n  const [openState, setOpenState] = useControlled({\n    default: Boolean(defaultOpen),\n    controlled: openProp,\n    name: \"SidePanelProvider\",\n    state: \"open\",\n  });\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      setOpenState(newOpen);\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange],\n  );\n\n  const [reference, setReference] = useState<HTMLElement | null>(null);\n  const [floating, setFloating] = useState<HTMLDivElement | null>(null);\n  const [panelId, setPanelId] = useState<string | undefined>(undefined);\n  const [titleId, setTitleId] = useState<string | undefined>(undefined);\n\n  const floatingRootContext = useFloatingRootContext({\n    open: openState,\n    onOpenChange: handleOpenChange,\n    elements: {\n      reference,\n      floating,\n    },\n  });\n\n  useEffect(() => {\n    if (!openState || !floating) {\n      return;\n    }\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n      handleOpenChange(false);\n    };\n\n    floating.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      floating.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [floating, openState, handleOpenChange]);\n\n  const context = useMemo(\n    () => ({\n      openState,\n      floatingRootContext,\n      setFloating,\n      setReference,\n      setOpen: handleOpenChange,\n      panelId,\n      setPanelId,\n      titleId,\n      setTitleId,\n    }),\n    [openState, floatingRootContext, handleOpenChange, panelId, titleId],\n  );\n\n  return (\n    <SidePanelContext.Provider value={context}>\n      {children}\n    </SidePanelContext.Provider>\n  );\n}\n"],"names":["useControlled","useCallback","useState","useFloatingRootContext","useEffect","useMemo","SidePanelContext"],"mappings":";;;;;;;;AA8BO,SAAS,kBAAkB,KAAA,EAA+B;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,IAAA,EAAM,QAAA,EAAU,WAAA,EAAa,cAAa,GAAI,KAAA;AAEhE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,kBAAA,CAAc;AAAA,IAC9C,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,IAC5B,UAAA,EAAY,QAAA;AAAA,IACZ,IAAA,EAAM,mBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmBC,iBAAA;AAAA,IACvB,CAAC,OAAA,KAAqB;AACpB,MAAA,YAAA,CAAa,OAAO,CAAA;AACpB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,OAAA,CAAA;AAAA,IACjB,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAgC,IAAI,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAA6B,MAAS,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAA6B,MAAS,CAAA;AAEpE,EAAA,MAAM,sBAAsBC,8BAAA,CAAuB;AAAA,IACjD,IAAA,EAAM,SAAA;AAAA,IACN,YAAA,EAAc,gBAAA;AAAA,IACd,QAAA,EAAU;AAAA,MACR,SAAA;AAAA,MACA;AAAA;AACF,GACD,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,QAAA,EAAU;AAC3B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA;AAAA,MACF;AAEA,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,IACxB,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC9C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,IACnD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,SAAA,EAAW,gBAAgB,CAAC,CAAA;AAE1C,EAAA,MAAM,OAAA,GAAUC,aAAA;AAAA,IACd,OAAO;AAAA,MACL,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA,EAAS,gBAAA;AAAA,MACT,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,mBAAA,EAAqB,gBAAA,EAAkB,SAAS,OAAO;AAAA,GACrE;AAEA,EAAA,sCACGC,iCAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,SAC/B,QAAA,EACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SidePanelProvider.js","sources":["../src/side-panel/SidePanelProvider.tsx"],"sourcesContent":["import { useFloatingRootContext } from \"@floating-ui/react\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { SidePanelContext, useSidePanelTabOrder } from \"./internal\";\n\nexport interface SidePanelProviderProps {\n  /**\n   * Whether the panel is open.\n   */\n  open?: boolean;\n  /**\n   * Default open state when initially rendered.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * SidePanelProvider children, should include SidePanel and SidePanelTrigger.\n   */\n  children: ReactNode;\n}\n\nexport function SidePanelProvider(props: SidePanelProviderProps) {\n  const { children, open: openProp, defaultOpen, onOpenChange } = props;\n\n  const [openState, setOpenState] = useControlled({\n    default: Boolean(defaultOpen),\n    controlled: openProp,\n    name: \"SidePanelProvider\",\n    state: \"open\",\n  });\n\n  const handleOpenChange = useCallback(\n    (newOpen: boolean) => {\n      setOpenState(newOpen);\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange],\n  );\n\n  const [reference, setReference] = useState<HTMLElement | null>(null);\n  const [floating, setFloating] = useState<HTMLDivElement | null>(null);\n  const [panelId, setPanelId] = useState<string | undefined>(undefined);\n  const [titleId, setTitleId] = useState<string | undefined>(undefined);\n  const [position, setPosition] = useState<\"right\" | \"left\" | undefined>(\n    undefined,\n  );\n\n  const floatingRootContext = useFloatingRootContext({\n    open: openState,\n    onOpenChange: handleOpenChange,\n    elements: {\n      reference,\n      floating,\n    },\n  });\n\n  useEffect(() => {\n    if (!openState || !floating) {\n      return;\n    }\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") {\n        return;\n      }\n\n      event.preventDefault();\n      event.stopPropagation();\n      handleOpenChange(false);\n    };\n\n    floating.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      floating.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [floating, openState, handleOpenChange]);\n\n  useSidePanelTabOrder({\n    floating,\n    open: openState,\n    reference,\n  });\n\n  const context = useMemo(\n    () => ({\n      openState,\n      floatingRootContext,\n      setFloating,\n      setReference,\n      setOpen: handleOpenChange,\n      panelId,\n      setPanelId,\n      titleId,\n      setTitleId,\n      position,\n      setPosition,\n    }),\n    [\n      openState,\n      floatingRootContext,\n      handleOpenChange,\n      panelId,\n      titleId,\n      position,\n    ],\n  );\n\n  return (\n    <SidePanelContext.Provider value={context}>\n      {children}\n    </SidePanelContext.Provider>\n  );\n}\n"],"names":["useControlled","useCallback","useState","useFloatingRootContext","useEffect","useSidePanelTabOrder","useMemo","SidePanelContext"],"mappings":";;;;;;;;;AA8BO,SAAS,kBAAkB,KAAA,EAA+B;AAC/D,EAAA,MAAM,EAAE,QAAA,EAAU,IAAA,EAAM,QAAA,EAAU,WAAA,EAAa,cAAa,GAAI,KAAA;AAEhE,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,kBAAA,CAAc;AAAA,IAC9C,OAAA,EAAS,QAAQ,WAAW,CAAA;AAAA,IAC5B,UAAA,EAAY,QAAA;AAAA,IACZ,IAAA,EAAM,mBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmBC,iBAAA;AAAA,IACvB,CAAC,OAAA,KAAqB;AACpB,MAAA,YAAA,CAAa,OAAO,CAAA;AACpB,MAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAe,OAAA,CAAA;AAAA,IACjB,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAA6B,IAAI,CAAA;AACnE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAgC,IAAI,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAA6B,MAAS,CAAA;AACpE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAA6B,MAAS,CAAA;AACpE,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,cAAA;AAAA,IAC9B;AAAA,GACF;AAEA,EAAA,MAAM,sBAAsBC,8BAAA,CAAuB;AAAA,IACjD,IAAA,EAAM,SAAA;AAAA,IACN,YAAA,EAAc,gBAAA;AAAA,IACd,QAAA,EAAU;AAAA,MACR,SAAA;AAAA,MACA;AAAA;AACF,GACD,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,QAAA,EAAU;AAC3B,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA;AAAA,MACF;AAEA,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,MAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,IACxB,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC9C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,IACnD,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,QAAA,EAAU,SAAA,EAAW,gBAAgB,CAAC,CAAA;AAE1C,EAAAC,yCAAA,CAAqB;AAAA,IACnB,QAAA;AAAA,IACA,IAAA,EAAM,SAAA;AAAA,IACN;AAAA,GACD,CAAA;AAED,EAAA,MAAM,OAAA,GAAUC,aAAA;AAAA,IACd,OAAO;AAAA,MACL,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA,EAAS,gBAAA;AAAA,MACT,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,SAAA;AAAA,MACA,mBAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,sCACGC,iCAAA,CAAiB,QAAA,EAAjB,EAA0B,KAAA,EAAO,SAC/B,QAAA,EACH,CAAA;AAEJ;;;;"}

package/dist-cjs/side-panel/SidePanelTitle.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSidePanelTitle {\n  flex: 1;\n  min-width: 0;\n}\n";
+var css_248z = ".saltSidePanelTitle {\n  flex: 1;\n  min-width: 0;\n  min-height: var(--salt-size-base);\n  display: flex;\n  align-items: center;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=SidePanelTitle.css.js.map

package/dist-cjs/side-panel/SidePanelTitle.js

@@ -7,6 +7,7 @@ var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var react = require('react');
 var SidePanelContext = require('./internal/SidePanelContext.js');
+require('tabbable');
 var SidePanelTitle$1 = require('./SidePanelTitle.css.js');
 
 const withBaseName = core.makePrefixer("saltSidePanelTitle");

package/dist-cjs/side-panel/SidePanelTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelTitle.js","sources":["../src/side-panel/SidePanelTitle.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  Text,\n  type TextProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useSidePanelContext } from \"./internal\";\nimport sidePanelTitleCss from \"./SidePanelTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelTitle\");\n\nexport interface SidePanelTitleProps extends TextProps<\"div\"> {}\n\nexport const SidePanelTitle = forwardRef<HTMLDivElement, SidePanelTitleProps>(\n  function SidePanelTitle(props, ref) {\n    const { children, className, id, styleAs = \"h2\", ...rest } = props;\n\n    const { setTitleId } = useSidePanelContext();\n    const targetWindow = useWindow();\n\n    useComponentCssInjection({\n      testId: \"salt-side-panel-title\",\n      css: sidePanelTitleCss,\n      window: targetWindow,\n    });\n\n    const titleId = useId(id);\n\n    useIsomorphicLayoutEffect(() => {\n      if (titleId) {\n        setTitleId(titleId);\n      }\n\n      return () => {\n        setTitleId(undefined);\n      };\n    }, [titleId, setTitleId]);\n\n    return (\n      <Text\n        ref={ref}\n        id={titleId}\n        styleAs={styleAs}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","SidePanelTitle","useSidePanelContext","useWindow","useComponentCssInjection","sidePanelTitleCss","useId","useIsomorphicLayoutEffect","jsx","Text","clsx"],"mappings":";;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAI/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,KAAA;AAE7D,IAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,oCAAA,EAAoB;AAC3C,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAA,GAAUC,WAAM,EAAE,CAAA;AAExB,IAAAC,8BAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,UAAA,CAAW,OAAO,CAAA;AAAA,MACpB;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,UAAA,CAAW,MAAS,CAAA;AAAA,MACtB,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAExB,IAAA,uBACEC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"SidePanelTitle.js","sources":["../src/side-panel/SidePanelTitle.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  Text,\n  type TextProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useSidePanelContext } from \"./internal\";\nimport sidePanelTitleCss from \"./SidePanelTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelTitle\");\n\nexport interface SidePanelTitleProps extends TextProps<\"div\"> {}\n\nexport const SidePanelTitle = forwardRef<HTMLDivElement, SidePanelTitleProps>(\n  function SidePanelTitle(props, ref) {\n    const { children, className, id, styleAs = \"h2\", ...rest } = props;\n\n    const { setTitleId } = useSidePanelContext();\n    const targetWindow = useWindow();\n\n    useComponentCssInjection({\n      testId: \"salt-side-panel-title\",\n      css: sidePanelTitleCss,\n      window: targetWindow,\n    });\n\n    const titleId = useId(id);\n\n    useIsomorphicLayoutEffect(() => {\n      if (titleId) {\n        setTitleId(titleId);\n      }\n\n      return () => {\n        setTitleId(undefined);\n      };\n    }, [titleId, setTitleId]);\n\n    return (\n      <Text\n        ref={ref}\n        id={titleId}\n        styleAs={styleAs}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","SidePanelTitle","useSidePanelContext","useWindow","useComponentCssInjection","sidePanelTitleCss","useId","useIsomorphicLayoutEffect","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAI/C,MAAM,cAAA,GAAiBC,gBAAA;AAAA,EAC5B,SAASC,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,KAAA;AAE7D,IAAA,MAAM,EAAE,UAAA,EAAW,GAAIC,oCAAA,EAAoB;AAC3C,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAE/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,gBAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAA,GAAUC,WAAM,EAAE,CAAA;AAExB,IAAAC,8BAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,UAAA,CAAW,OAAO,CAAA;AAAA,MACpB;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,UAAA,CAAW,MAAS,CAAA;AAAA,MACtB,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAExB,IAAA,uBACEC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA;AAAA,QACA,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/side-panel/SidePanelTrigger.js

@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var react = require('react');
 var SidePanelContext = require('./internal/SidePanelContext.js');
+require('tabbable');
 
 const SidePanelTrigger = react.forwardRef(function SidePanelTrigger2(props, ref) {
   const { children, onClick, ...rest } = props;
   const { setReference, openState, setOpen, panelId } = SidePanelContext.useSidePanelContext();
-  const childRef = children == null ? void 0 : children.ref;
   const combinedRef = core.useForkRef(setReference, ref);
-  const handleRef = core.useForkRef(combinedRef, childRef);
+  const handleRef = core.useForkRef(combinedRef, core.getRefFromChildren(children));
   const handleClick = (event) => {
     onClick == null ? void 0 : onClick(event);
     setOpen(!openState);
@@ -22,8 +22,8 @@ const SidePanelTrigger = react.forwardRef(function SidePanelTrigger2(props, ref)
     {
       "aria-expanded": openState,
       "aria-controls": openState ? panelId : void 0,
-      ...rest,
-      onClick: handleClick
+      onClick: handleClick,
+      ...rest
     },
     children.props
   );

package/dist-cjs/side-panel/SidePanelTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelTrigger.js","sources":["../src/side-panel/SidePanelTrigger.tsx"],"sourcesContent":["import { mergeProps, useForkRef } from \"@salt-ds/core\";\nimport {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  type ReactNode,\n} from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelTriggerProps\n  extends ComponentPropsWithoutRef<\"button\"> {\n  children?: ReactNode;\n}\n\nexport const SidePanelTrigger = forwardRef<\n  HTMLButtonElement,\n  SidePanelTriggerProps\n>(function SidePanelTrigger(props, ref) {\n  const { children, onClick, ...rest } = props;\n  const { setReference, openState, setOpen, panelId } = useSidePanelContext();\n\n  const childRef = (children as { ref?: React.Ref<HTMLButtonElement> })?.ref;\n  const combinedRef = useForkRef(setReference, ref);\n  const handleRef = useForkRef(combinedRef, childRef);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    setOpen(!openState);\n  };\n\n  if (!children || !isValidElement(children)) {\n    return <>{children}</>;\n  }\n\n  const mergedProps = mergeProps(\n    {\n      \"aria-expanded\": openState,\n      \"aria-controls\": openState ? panelId : undefined,\n      ...rest,\n      onClick: handleClick,\n    },\n    children.props,\n  );\n\n  return cloneElement(children, {\n    ...mergedProps,\n    ref: handleRef,\n  });\n});\n"],"names":["forwardRef","SidePanelTrigger","useSidePanelContext","useForkRef","isValidElement","mergeProps","cloneElement"],"mappings":";;;;;;;AAgBO,MAAM,gBAAA,GAAmBA,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AACvC,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAW,OAAA,EAAS,OAAA,KAAYC,oCAAA,EAAoB;AAE1E,EAAA,MAAM,WAAY,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAqD,GAAA;AACvE,EAAA,MAAM,WAAA,GAAcC,eAAA,CAAW,YAAA,EAAc,GAAG,CAAA;AAChD,EAAA,MAAM,SAAA,GAAYA,eAAA,CAAW,WAAA,EAAa,QAAQ,CAAA;AAElD,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACC,oBAAA,CAAe,QAAQ,CAAA,EAAG;AAC1C,IAAA,6DAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,MAAM,WAAA,GAAcC,eAAA;AAAA,IAClB;AAAA,MACE,eAAA,EAAiB,SAAA;AAAA,MACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,MACvC,GAAG,IAAA;AAAA,MACH,OAAA,EAAS;AAAA,KACX;AAAA,IACA,QAAA,CAAS;AAAA,GACX;AAEA,EAAA,OAAOC,mBAAa,QAAA,EAAU;AAAA,IAC5B,GAAG,WAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACN,CAAA;AACH,CAAC;;;;"}
+{"version":3,"file":"SidePanelTrigger.js","sources":["../src/side-panel/SidePanelTrigger.tsx"],"sourcesContent":["import { getRefFromChildren, mergeProps, useForkRef } from \"@salt-ds/core\";\nimport {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n} from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelTriggerProps\n  extends ComponentPropsWithoutRef<\"button\"> {}\n\nexport const SidePanelTrigger = forwardRef<\n  HTMLButtonElement,\n  SidePanelTriggerProps\n>(function SidePanelTrigger(props, ref) {\n  const { children, onClick, ...rest } = props;\n  const { setReference, openState, setOpen, panelId } = useSidePanelContext();\n\n  const combinedRef = useForkRef(setReference, ref);\n  const handleRef = useForkRef(combinedRef, getRefFromChildren(children));\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    setOpen(!openState);\n  };\n\n  if (!children || !isValidElement(children)) {\n    return <>{children}</>;\n  }\n\n  const mergedProps = mergeProps(\n    {\n      \"aria-expanded\": openState,\n      \"aria-controls\": openState ? panelId : undefined,\n      onClick: handleClick,\n      ...rest,\n    },\n    children.props,\n  );\n\n  return cloneElement(children, {\n    ...mergedProps,\n    ref: handleRef,\n  });\n});\n"],"names":["forwardRef","SidePanelTrigger","useSidePanelContext","useForkRef","getRefFromChildren","isValidElement","mergeProps","cloneElement"],"mappings":";;;;;;;;AAaO,MAAM,gBAAA,GAAmBA,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AACvC,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAW,OAAA,EAAS,OAAA,KAAYC,oCAAA,EAAoB;AAE1E,EAAA,MAAM,WAAA,GAAcC,eAAA,CAAW,YAAA,EAAc,GAAG,CAAA;AAChD,EAAA,MAAM,SAAA,GAAYA,eAAA,CAAW,WAAA,EAAaC,uBAAA,CAAmB,QAAQ,CAAC,CAAA;AAEtE,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAACC,oBAAA,CAAe,QAAQ,CAAA,EAAG;AAC1C,IAAA,6DAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,MAAM,WAAA,GAAcC,eAAA;AAAA,IAClB;AAAA,MACE,eAAA,EAAiB,SAAA;AAAA,MACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,MACvC,OAAA,EAAS,WAAA;AAAA,MACT,GAAG;AAAA,KACL;AAAA,IACA,QAAA,CAAS;AAAA,GACX;AAEA,EAAA,OAAOC,mBAAa,QAAA,EAAU;AAAA,IAC5B,GAAG,WAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACN,CAAA;AACH,CAAC;;;;"}

package/dist-cjs/side-panel/internal/SidePanelContext.js

@@ -19,6 +19,9 @@ const SidePanelContext = core.createContext(
     },
     titleId: void 0,
     setTitleId: () => {
+    },
+    position: void 0,
+    setPosition: () => {
     }
   }
 );

package/dist-cjs/side-panel/internal/SidePanelContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelContext.js","sources":["../src/side-panel/internal/SidePanelContext.ts"],"sourcesContent":["import type { FloatingRootContext } from \"@floating-ui/react\";\nimport { createContext } from \"@salt-ds/core\";\nimport { type Dispatch, type SetStateAction, useContext } from \"react\";\n\nexport interface SidePanelContextValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * The floating-ui root context shared between the trigger and the panel.\n   * Coordinates interactions (click, dismiss, role) across both elements.\n   */\n  floatingRootContext: FloatingRootContext;\n  /**\n   * Ref setter for the panel element.\n   * Registers the panel DOM node with floating-ui.\n   */\n  setFloating: Dispatch<SetStateAction<HTMLDivElement | null>>;\n  /**\n   * Ref setter for the reference (trigger) element.\n   * Registers the trigger DOM node with floating-ui for focus return.\n   */\n  setReference: Dispatch<SetStateAction<HTMLElement | null>>;\n  /**\n   * Sets the open state of the panel.\n   * Called by the close button in SidePanelHeader, or any consumer that needs to close the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Side panel id used for aria-controls on the trigger.\n   */\n  panelId?: string;\n  /**\n   * Registers or clears the side panel id used for aria-controls/id linkage.\n   */\n  setPanelId: Dispatch<SetStateAction<string | undefined>>;\n  /**\n   * The auto-generated id placed on SidePanelTitle.\n   * Used for aria-labelledby on the panel region and the scrollable body.\n   */\n  titleId?: string;\n  /**\n   * Registers the title id from SidePanelTitle back to the context\n   * so that SidePanel and SidePanelContent can use it for aria-labelledby.\n   */\n  setTitleId: Dispatch<SetStateAction<string | undefined>>;\n}\n\nexport const SidePanelContext = createContext<SidePanelContextValue>(\n  \"SidePanelContext\",\n  {\n    openState: false,\n    floatingRootContext: {} as FloatingRootContext,\n    setFloating: () => {},\n    setReference: () => {},\n    setOpen: () => {},\n    panelId: undefined,\n    setPanelId: () => {},\n    titleId: undefined,\n    setTitleId: () => {},\n  },\n);\n\nexport function useSidePanelContext() {\n  return useContext(SidePanelContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAiDO,MAAM,gBAAA,GAAmBA,kBAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,qBAAqB,EAAC;AAAA,IACtB,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,cAAc,MAAM;AAAA,IAAC,CAAA;AAAA,IACrB,SAAS,MAAM;AAAA,IAAC,CAAA;AAAA,IAChB,OAAA,EAAS,MAAA;AAAA,IACT,YAAY,MAAM;AAAA,IAAC,CAAA;AAAA,IACnB,OAAA,EAAS,MAAA;AAAA,IACT,YAAY,MAAM;AAAA,IAAC;AAAA;AAEvB;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;;;;;"}
+{"version":3,"file":"SidePanelContext.js","sources":["../src/side-panel/internal/SidePanelContext.ts"],"sourcesContent":["import type { FloatingRootContext } from \"@floating-ui/react\";\nimport { createContext } from \"@salt-ds/core\";\nimport { type Dispatch, type SetStateAction, useContext } from \"react\";\n\nexport interface SidePanelContextValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * The floating-ui root context shared between the trigger and the panel.\n   * Coordinates interactions (click, dismiss, role) across both elements.\n   */\n  floatingRootContext: FloatingRootContext;\n  /**\n   * Ref setter for the panel element.\n   * Registers the panel DOM node with floating-ui.\n   */\n  setFloating: Dispatch<SetStateAction<HTMLDivElement | null>>;\n  /**\n   * Ref setter for the reference (trigger) element.\n   * Registers the trigger DOM node with floating-ui for focus return.\n   */\n  setReference: Dispatch<SetStateAction<HTMLElement | null>>;\n  /**\n   * Sets the open state of the panel.\n   * Called by the close button in SidePanelHeader, or any consumer that needs to close the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Side panel id used for aria-controls on the trigger.\n   */\n  panelId?: string;\n  /**\n   * Registers or clears the side panel id used for aria-controls/id linkage.\n   */\n  setPanelId: Dispatch<SetStateAction<string | undefined>>;\n  /**\n   * The auto-generated id placed on SidePanelTitle.\n   * Used for aria-labelledby on the panel region and the scrollable body.\n   */\n  titleId?: string;\n  /**\n   * Registers the title id from SidePanelTitle back to the context\n   * so that SidePanel and SidePanelContent can use it for aria-labelledby.\n   */\n  setTitleId: Dispatch<SetStateAction<string | undefined>>;\n  /**\n   * Edge the panel is anchored to.\n   */\n  position?: \"right\" | \"left\";\n  /**\n   * Registers the position from SidePanel back to the context.\n   */\n  setPosition: Dispatch<SetStateAction<\"right\" | \"left\" | undefined>>;\n}\n\nexport const SidePanelContext = createContext<SidePanelContextValue>(\n  \"SidePanelContext\",\n  {\n    openState: false,\n    floatingRootContext: {} as FloatingRootContext,\n    setFloating: () => {},\n    setReference: () => {},\n    setOpen: () => {},\n    panelId: undefined,\n    setPanelId: () => {},\n    titleId: undefined,\n    setTitleId: () => {},\n    position: undefined,\n    setPosition: () => {},\n  },\n);\n\nexport function useSidePanelContext() {\n  return useContext(SidePanelContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAyDO,MAAM,gBAAA,GAAmBA,kBAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,SAAA,EAAW,KAAA;AAAA,IACX,qBAAqB,EAAC;AAAA,IACtB,aAAa,MAAM;AAAA,IAAC,CAAA;AAAA,IACpB,cAAc,MAAM;AAAA,IAAC,CAAA;AAAA,IACrB,SAAS,MAAM;AAAA,IAAC,CAAA;AAAA,IAChB,OAAA,EAAS,MAAA;AAAA,IACT,YAAY,MAAM;AAAA,IAAC,CAAA;AAAA,IACnB,OAAA,EAAS,MAAA;AAAA,IACT,YAAY,MAAM;AAAA,IAAC,CAAA;AAAA,IACnB,QAAA,EAAU,MAAA;AAAA,IACV,aAAa,MAAM;AAAA,IAAC;AAAA;AAExB;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAOC,iBAAW,gBAAgB,CAAA;AACpC;;;;;"}

package/dist-cjs/side-panel/internal/useIsScrollable.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var react = require('react');
+
+const observedAttributes = ["class", "hidden", "style"];
+function useIsScrollable(ref) {
+  const [isScrollable, setIsScrollable] = react.useState(false);
+  react.useEffect(() => {
+    const element = ref.current;
+    const win = element == null ? void 0 : element.ownerDocument.defaultView;
+    if (!element || !win) {
+      return;
+    }
+    let animationFrame;
+    const checkScrollable = () => {
+      animationFrame = void 0;
+      const nextIsScrollable = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+      setIsScrollable(
+        (currentIsScrollable) => currentIsScrollable === nextIsScrollable ? currentIsScrollable : nextIsScrollable
+      );
+    };
+    const scheduleCheck = () => {
+      if (animationFrame === void 0) {
+        animationFrame = win.requestAnimationFrame(checkScrollable);
+      }
+    };
+    scheduleCheck();
+    const resizeObserver = win.ResizeObserver ? new win.ResizeObserver(scheduleCheck) : void 0;
+    resizeObserver == null ? void 0 : resizeObserver.observe(element);
+    const mutationObserver = win.MutationObserver ? new win.MutationObserver(scheduleCheck) : void 0;
+    mutationObserver == null ? void 0 : mutationObserver.observe(element, {
+      attributeFilter: observedAttributes,
+      attributes: true,
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      if (animationFrame !== void 0) {
+        win.cancelAnimationFrame(animationFrame);
+      }
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      mutationObserver == null ? void 0 : mutationObserver.disconnect();
+    };
+  }, [ref]);
+  return isScrollable;
+}
+
+exports.useIsScrollable = useIsScrollable;
+//# sourceMappingURL=useIsScrollable.js.map

package/dist-cjs/side-panel/internal/useIsScrollable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsScrollable.js","sources":["../src/side-panel/internal/useIsScrollable.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nconst observedAttributes = [\"class\", \"hidden\", \"style\"];\n\nexport function useIsScrollable(ref: RefObject<HTMLElement>) {\n  const [isScrollable, setIsScrollable] = useState(false);\n\n  useEffect(() => {\n    const element = ref.current;\n    const win = element?.ownerDocument.defaultView;\n    if (!element || !win) {\n      return;\n    }\n\n    let animationFrame: number | undefined;\n\n    const checkScrollable = () => {\n      animationFrame = undefined;\n      const nextIsScrollable =\n        element.scrollHeight > element.clientHeight ||\n        element.scrollWidth > element.clientWidth;\n\n      setIsScrollable((currentIsScrollable) =>\n        currentIsScrollable === nextIsScrollable\n          ? currentIsScrollable\n          : nextIsScrollable,\n      );\n    };\n\n    const scheduleCheck = () => {\n      if (animationFrame === undefined) {\n        animationFrame = win.requestAnimationFrame(checkScrollable);\n      }\n    };\n\n    scheduleCheck();\n\n    const resizeObserver = win.ResizeObserver\n      ? new win.ResizeObserver(scheduleCheck)\n      : undefined;\n    resizeObserver?.observe(element);\n\n    const mutationObserver = win.MutationObserver\n      ? new win.MutationObserver(scheduleCheck)\n      : undefined;\n    mutationObserver?.observe(element, {\n      attributeFilter: observedAttributes,\n      attributes: true,\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      if (animationFrame !== undefined) {\n        win.cancelAnimationFrame(animationFrame);\n      }\n      resizeObserver?.disconnect();\n      mutationObserver?.disconnect();\n    };\n  }, [ref]);\n\n  return isScrollable;\n}\n"],"names":["useState","useEffect"],"mappings":";;;;AAEA,MAAM,kBAAA,GAAqB,CAAC,OAAA,EAAS,QAAA,EAAU,OAAO,CAAA;AAE/C,SAAS,gBAAgB,GAAA,EAA6B;AAC3D,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,eAAS,KAAK,CAAA;AAEtD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AACpB,IAAA,MAAM,GAAA,GAAM,mCAAS,aAAA,CAAc,WAAA;AACnC,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,GAAA,EAAK;AACpB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,cAAA;AAEJ,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,cAAA,GAAiB,MAAA;AACjB,MAAA,MAAM,mBACJ,OAAA,CAAQ,YAAA,GAAe,QAAQ,YAAA,IAC/B,OAAA,CAAQ,cAAc,OAAA,CAAQ,WAAA;AAEhC,MAAA,eAAA;AAAA,QAAgB,CAAC,mBAAA,KACf,mBAAA,KAAwB,gBAAA,GACpB,mBAAA,GACA;AAAA,OACN;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,QAAA,cAAA,GAAiB,GAAA,CAAI,sBAAsB,eAAe,CAAA;AAAA,MAC5D;AAAA,IACF,CAAA;AAEA,IAAA,aAAA,EAAc;AAEd,IAAA,MAAM,iBAAiB,GAAA,CAAI,cAAA,GACvB,IAAI,GAAA,CAAI,cAAA,CAAe,aAAa,CAAA,GACpC,MAAA;AACJ,IAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAgB,OAAA,CAAQ,OAAA,CAAA;AAExB,IAAA,MAAM,mBAAmB,GAAA,CAAI,gBAAA,GACzB,IAAI,GAAA,CAAI,gBAAA,CAAiB,aAAa,CAAA,GACtC,MAAA;AACJ,IAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,QAAQ,OAAA,EAAS;AAAA,MACjC,eAAA,EAAiB,kBAAA;AAAA,MACjB,UAAA,EAAY,IAAA;AAAA,MACZ,aAAA,EAAe,IAAA;AAAA,MACf,SAAA,EAAW,IAAA;AAAA,MACX,OAAA,EAAS;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,QAAA,GAAA,CAAI,qBAAqB,cAAc,CAAA;AAAA,MACzC;AACA,MAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAgB,UAAA,EAAA;AAChB,MAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,UAAA,EAAA;AAAA,IACpB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,OAAO,YAAA;AACT;;;;"}

package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var react = require('react');
+var tabbable = require('tabbable');
+
+function isPlainTabKey(event) {
+  return event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
+}
+function getPanelTabbableElements(panel) {
+  return tabbable.tabbable(panel);
+}
+function focusFirstPanelElement(panel) {
+  const [firstTabbableElement] = getPanelTabbableElements(panel);
+  (firstTabbableElement ?? panel).focus();
+}
+function focusLastPanelElement(panel) {
+  const tabbableElements = getPanelTabbableElements(panel);
+  (tabbableElements[tabbableElements.length - 1] ?? panel).focus();
+}
+function containsTarget(container, target) {
+  const targetWindow = container.ownerDocument.defaultView;
+  return Boolean(
+    (targetWindow == null ? void 0 : targetWindow.Node) && target instanceof targetWindow.Node && container.contains(target)
+  );
+}
+function getNextTabbableAfterReference(reference, panel) {
+  const { body } = reference.ownerDocument;
+  const tabbableElements = tabbable.tabbable(body).filter(
+    (element) => !panel.contains(element)
+  );
+  const referenceIndex = tabbableElements.findIndex(
+    (element) => element === reference || reference.contains(element)
+  );
+  if (referenceIndex === -1) {
+    return void 0;
+  }
+  return tabbableElements[referenceIndex + 1];
+}
+function useSidePanelTabOrder(props) {
+  const { floating, open, reference } = props;
+  const followsReferenceOrder = react.useRef(false);
+  react.useEffect(() => {
+    if (!open || !reference || !floating) {
+      followsReferenceOrder.current = false;
+      return;
+    }
+    const { ownerDocument } = reference;
+    const onReferenceKeyDown = (event) => {
+      if (event.defaultPrevented || !isPlainTabKey(event) || event.shiftKey) {
+        return;
+      }
+      event.preventDefault();
+      followsReferenceOrder.current = true;
+      focusFirstPanelElement(floating);
+    };
+    const onFloatingKeyDown = (event) => {
+      if (event.defaultPrevented || !isPlainTabKey(event)) {
+        return;
+      }
+      const panelTabbableElements = getPanelTabbableElements(floating);
+      const activeElement = floating.ownerDocument.activeElement;
+      if (event.shiftKey) {
+        const firstPanelElement = panelTabbableElements[0] ?? floating;
+        if (activeElement === firstPanelElement && followsReferenceOrder.current) {
+          event.preventDefault();
+          followsReferenceOrder.current = false;
+          reference.focus();
+        }
+        return;
+      }
+      const lastPanelElement = panelTabbableElements[panelTabbableElements.length - 1] ?? floating;
+      if (activeElement === lastPanelElement && followsReferenceOrder.current) {
+        const nextElement = getNextTabbableAfterReference(reference, floating);
+        if (nextElement) {
+          event.preventDefault();
+          followsReferenceOrder.current = false;
+          nextElement.focus();
+        }
+      }
+    };
+    const onDocumentKeyDown = (event) => {
+      if (event.defaultPrevented || !isPlainTabKey(event) || !event.shiftKey) {
+        return;
+      }
+      const nextElement = getNextTabbableAfterReference(reference, floating);
+      if (!nextElement || !containsTarget(nextElement, event.target)) {
+        return;
+      }
+      event.preventDefault();
+      followsReferenceOrder.current = true;
+      focusLastPanelElement(floating);
+    };
+    const onFloatingFocusIn = (event) => {
+      if (containsTarget(reference, event.relatedTarget)) {
+        followsReferenceOrder.current = true;
+        return;
+      }
+      const nextElement = getNextTabbableAfterReference(reference, floating);
+      if (nextElement && containsTarget(nextElement, event.relatedTarget)) {
+        followsReferenceOrder.current = true;
+        return;
+      }
+      if (!containsTarget(floating, event.relatedTarget)) {
+        followsReferenceOrder.current = false;
+      }
+    };
+    reference.addEventListener("keydown", onReferenceKeyDown);
+    floating.addEventListener("keydown", onFloatingKeyDown);
+    floating.addEventListener("focusin", onFloatingFocusIn);
+    ownerDocument.addEventListener("keydown", onDocumentKeyDown);
+    return () => {
+      reference.removeEventListener("keydown", onReferenceKeyDown);
+      floating.removeEventListener("keydown", onFloatingKeyDown);
+      floating.removeEventListener("focusin", onFloatingFocusIn);
+      ownerDocument.removeEventListener("keydown", onDocumentKeyDown);
+    };
+  }, [floating, open, reference]);
+}
+
+exports.useSidePanelTabOrder = useSidePanelTabOrder;
+//# sourceMappingURL=useSidePanelTabOrder.js.map

package/dist-cjs/side-panel/internal/useSidePanelTabOrder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidePanelTabOrder.js","sources":["../src/side-panel/internal/useSidePanelTabOrder.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { tabbable } from \"tabbable\";\n\ninterface UseSidePanelTabOrderProps {\n  floating: HTMLElement | null;\n  open: boolean;\n  reference: HTMLElement | null;\n}\n\nfunction isPlainTabKey(event: KeyboardEvent) {\n  return (\n    event.key === \"Tab\" && !event.altKey && !event.ctrlKey && !event.metaKey\n  );\n}\n\nfunction getPanelTabbableElements(panel: HTMLElement) {\n  return tabbable(panel);\n}\n\nfunction focusFirstPanelElement(panel: HTMLElement) {\n  const [firstTabbableElement] = getPanelTabbableElements(panel);\n  (firstTabbableElement ?? panel).focus();\n}\n\nfunction focusLastPanelElement(panel: HTMLElement) {\n  const tabbableElements = getPanelTabbableElements(panel);\n  (tabbableElements[tabbableElements.length - 1] ?? panel).focus();\n}\n\nfunction containsTarget(container: Element, target: EventTarget | null) {\n  const targetWindow = container.ownerDocument.defaultView;\n\n  return Boolean(\n    targetWindow?.Node &&\n      target instanceof targetWindow.Node &&\n      container.contains(target),\n  );\n}\n\nfunction getNextTabbableAfterReference(\n  reference: HTMLElement,\n  panel: HTMLElement,\n) {\n  const { body } = reference.ownerDocument;\n  const tabbableElements = tabbable(body).filter(\n    (element) => !panel.contains(element),\n  );\n  const referenceIndex = tabbableElements.findIndex(\n    (element) => element === reference || reference.contains(element),\n  );\n\n  if (referenceIndex === -1) {\n    return undefined;\n  }\n\n  return tabbableElements[referenceIndex + 1];\n}\n\nexport function useSidePanelTabOrder(props: UseSidePanelTabOrderProps) {\n  const { floating, open, reference } = props;\n  const followsReferenceOrder = useRef(false);\n\n  useEffect(() => {\n    if (!open || !reference || !floating) {\n      followsReferenceOrder.current = false;\n      return;\n    }\n\n    const { ownerDocument } = reference;\n\n    const onReferenceKeyDown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || !isPlainTabKey(event) || event.shiftKey) {\n        return;\n      }\n\n      event.preventDefault();\n      followsReferenceOrder.current = true;\n      focusFirstPanelElement(floating);\n    };\n\n    const onFloatingKeyDown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || !isPlainTabKey(event)) {\n        return;\n      }\n\n      const panelTabbableElements = getPanelTabbableElements(floating);\n      const activeElement = floating.ownerDocument.activeElement;\n\n      if (event.shiftKey) {\n        const firstPanelElement = panelTabbableElements[0] ?? floating;\n\n        if (\n          activeElement === firstPanelElement &&\n          followsReferenceOrder.current\n        ) {\n          event.preventDefault();\n          followsReferenceOrder.current = false;\n          reference.focus();\n        }\n        return;\n      }\n\n      const lastPanelElement =\n        panelTabbableElements[panelTabbableElements.length - 1] ?? floating;\n\n      if (activeElement === lastPanelElement && followsReferenceOrder.current) {\n        const nextElement = getNextTabbableAfterReference(reference, floating);\n\n        if (nextElement) {\n          event.preventDefault();\n          followsReferenceOrder.current = false;\n          nextElement.focus();\n        }\n      }\n    };\n\n    const onDocumentKeyDown = (event: KeyboardEvent) => {\n      if (event.defaultPrevented || !isPlainTabKey(event) || !event.shiftKey) {\n        return;\n      }\n\n      const nextElement = getNextTabbableAfterReference(reference, floating);\n      if (!nextElement || !containsTarget(nextElement, event.target)) {\n        return;\n      }\n\n      event.preventDefault();\n      followsReferenceOrder.current = true;\n      focusLastPanelElement(floating);\n    };\n\n    const onFloatingFocusIn = (event: FocusEvent) => {\n      if (containsTarget(reference, event.relatedTarget)) {\n        followsReferenceOrder.current = true;\n        return;\n      }\n\n      const nextElement = getNextTabbableAfterReference(reference, floating);\n      if (nextElement && containsTarget(nextElement, event.relatedTarget)) {\n        followsReferenceOrder.current = true;\n        return;\n      }\n\n      if (!containsTarget(floating, event.relatedTarget)) {\n        followsReferenceOrder.current = false;\n      }\n    };\n\n    reference.addEventListener(\"keydown\", onReferenceKeyDown);\n    floating.addEventListener(\"keydown\", onFloatingKeyDown);\n    floating.addEventListener(\"focusin\", onFloatingFocusIn);\n    ownerDocument.addEventListener(\"keydown\", onDocumentKeyDown);\n\n    return () => {\n      reference.removeEventListener(\"keydown\", onReferenceKeyDown);\n      floating.removeEventListener(\"keydown\", onFloatingKeyDown);\n      floating.removeEventListener(\"focusin\", onFloatingFocusIn);\n      ownerDocument.removeEventListener(\"keydown\", onDocumentKeyDown);\n    };\n  }, [floating, open, reference]);\n}\n"],"names":["tabbable","useRef","useEffect"],"mappings":"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"}

package/dist-cjs/side-panel/useSidePanel.js

@@ -2,6 +2,7 @@
 
 var react = require('react');
 var SidePanelContext = require('./internal/SidePanelContext.js');
+require('tabbable');
 
 function useSidePanel() {
   const { openState, setOpen, setReference, panelId } = SidePanelContext.useSidePanelContext();
@@ -14,6 +15,7 @@ function useSidePanel() {
         ...userProps,
         onClick: (e) => {
           userOnClick == null ? void 0 : userOnClick(e);
+          setOpen(!openState);
         },
         ref: (node) => {
           setReference(node);
@@ -26,7 +28,7 @@ function useSidePanel() {
         }
       };
     },
-    [openState, panelId, setReference]
+    [openState, panelId, setReference, setOpen]
   );
   return {
     openState,

package/dist-cjs/side-panel/useSidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * Sets the open state of the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Props getter for a single trigger element.\n   * Merges `aria-expanded`, `aria-controls`, a `ref` callback (to register\n   * the trigger for focus-return), and user-provided props.\n   * Best for the common case where one button toggles one panel.\n   *\n   * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and\n   * manage ARIA attributes yourself instead.\n   */\n  getTriggerProps: (\n    userProps?: Record<string, unknown>,\n  ) => Record<string, unknown>;\n  /**\n   * Registers the element that should receive focus when the panel closes.\n   * Use this in multi-trigger scenarios (e.g. table rows) where each trigger\n   * needs explicit control over which element is the reference.\n   */\n  setTriggerRef: (element: HTMLElement | null) => void;\n  /**\n   * The panel's DOM id. Use this for `aria-controls` in multi-trigger\n   * scenarios where you manage ARIA attributes yourself.\n   */\n  panelId: string | undefined;\n}\n\nexport function useSidePanel(): SidePanelValue {\n  const { openState, setOpen, setReference, panelId } = useSidePanelContext();\n\n  const getTriggerProps = useCallback(\n    (userProps?: Record<string, unknown>) => {\n      const userOnClick = userProps?.onClick as\n        | ((e: React.MouseEvent<HTMLElement>) => void)\n        | undefined;\n\n      return {\n        \"aria-expanded\": openState,\n        \"aria-controls\": openState ? panelId : undefined,\n        ...userProps,\n        onClick: (e: React.MouseEvent<HTMLElement>) => {\n          userOnClick?.(e);\n        },\n        ref: (node: HTMLElement | null) => {\n          // Register this element as the trigger for focus return\n          setReference(node);\n          // Forward the consumer's ref if provided\n          const userRef = userProps?.ref;\n          if (typeof userRef === \"function\") {\n            userRef(node);\n          } else if (\n            userRef &&\n            typeof userRef === \"object\" &&\n            \"current\" in userRef\n          ) {\n            (userRef as React.MutableRefObject<HTMLElement | null>).current =\n              node;\n          }\n        },\n      };\n    },\n    [openState, panelId, setReference],\n  );\n\n  return {\n    openState,\n    setOpen,\n    getTriggerProps,\n    setTriggerRef: setReference,\n    panelId,\n  };\n}\n"],"names":["useSidePanelContext","useCallback"],"mappings":";;;;;AAqCO,SAAS,YAAA,GAA+B;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAA,KAAYA,oCAAA,EAAoB;AAE1E,EAAA,MAAM,eAAA,GAAkBC,iBAAA;AAAA,IACtB,CAAC,SAAA,KAAwC;AACvC,MAAA,MAAM,cAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAI/B,MAAA,OAAO;AAAA,QACL,eAAA,EAAiB,SAAA;AAAA,QACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,QACvC,GAAG,SAAA;AAAA,QACH,OAAA,EAAS,CAAC,CAAA,KAAqC;AAC7C,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,CAAA,CAAA;AAAA,QAChB,CAAA;AAAA,QACA,GAAA,EAAK,CAAC,IAAA,KAA6B;AAEjC,UAAA,YAAA,CAAa,IAAI,CAAA;AAEjB,UAAA,MAAM,UAAU,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAA;AAC3B,UAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,YAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,UACd,WACE,OAAA,IACA,OAAO,OAAA,KAAY,QAAA,IACnB,aAAa,OAAA,EACb;AACA,YAAC,QAAuD,OAAA,GACtD,IAAA;AAAA,UACJ;AAAA,QACF;AAAA,OACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,OAAA,EAAS,YAAY;AAAA,GACnC;AAEA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import {\n  type MouseEvent,\n  type MutableRefObject,\n  type RefCallback,\n  useCallback,\n} from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * Sets the open state of the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Props getter for a trigger element outside of `SidePanelTrigger`.\n   * Returns `aria-expanded`, `aria-controls`, a `ref` (for focus-return),\n   * and an `onClick` that toggles the panel.\n   *\n   * Spread the result onto a Button to get full trigger behavior:\n   * ```tsx\n   * <Button {...getTriggerProps()}>Toggle panel</Button>\n   * ```\n   *\n   * You can pass additional props which are merged in. If you provide your\n   * own `onClick`, it runs before the built-in toggle.\n   *\n   * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and\n   * manage ARIA attributes yourself instead.\n   */\n  getTriggerProps: (\n    userProps?: Record<string, unknown>,\n  ) => Record<string, unknown>;\n  /**\n   * Registers the element that should receive focus when the panel closes.\n   * Use this in multi-trigger scenarios (e.g. table rows) where each trigger\n   * needs explicit control over which element is the reference.\n   */\n  setTriggerRef: (element: HTMLElement | null) => void;\n  /**\n   * The panel's DOM id. Use this for `aria-controls` in multi-trigger\n   * scenarios where you manage ARIA attributes yourself.\n   */\n  panelId: string | undefined;\n}\n\nexport function useSidePanel(): SidePanelValue {\n  const { openState, setOpen, setReference, panelId } = useSidePanelContext();\n\n  const getTriggerProps = useCallback(\n    (userProps?: Record<string, unknown>) => {\n      const userOnClick = userProps?.onClick as\n        | ((e: MouseEvent<HTMLElement>) => void)\n        | undefined;\n\n      return {\n        \"aria-expanded\": openState,\n        \"aria-controls\": openState ? panelId : undefined,\n        ...userProps,\n        onClick: (e: MouseEvent<HTMLElement>) => {\n          userOnClick?.(e);\n          setOpen(!openState);\n        },\n        ref: (node: HTMLElement | null) => {\n          // Register this element as the trigger for focus return\n          setReference(node);\n          // Forward the consumer's ref if provided\n          const userRef = userProps?.ref as\n            | RefCallback<HTMLElement | null>\n            | MutableRefObject<HTMLElement | null>;\n          if (typeof userRef === \"function\") {\n            userRef(node);\n          } else if (\n            userRef &&\n            typeof userRef === \"object\" &&\n            \"current\" in userRef\n          ) {\n            userRef.current = node;\n          }\n        },\n      };\n    },\n    [openState, panelId, setReference, setOpen],\n  );\n\n  return {\n    openState,\n    setOpen,\n    getTriggerProps,\n    setTriggerRef: setReference,\n    panelId,\n  };\n}\n"],"names":["useSidePanelContext","useCallback"],"mappings":";;;;;;AAiDO,SAAS,YAAA,GAA+B;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAA,KAAYA,oCAAA,EAAoB;AAE1E,EAAA,MAAM,eAAA,GAAkBC,iBAAA;AAAA,IACtB,CAAC,SAAA,KAAwC;AACvC,MAAA,MAAM,cAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAI/B,MAAA,OAAO;AAAA,QACL,eAAA,EAAiB,SAAA;AAAA,QACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,QACvC,GAAG,SAAA;AAAA,QACH,OAAA,EAAS,CAAC,CAAA,KAA+B;AACvC,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,CAAA,CAAA;AACd,UAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,QACpB,CAAA;AAAA,QACA,GAAA,EAAK,CAAC,IAAA,KAA6B;AAEjC,UAAA,YAAA,CAAa,IAAI,CAAA;AAEjB,UAAA,MAAM,UAAU,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAA;AAG3B,UAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,YAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,UACd,WACE,OAAA,IACA,OAAO,OAAA,KAAY,QAAA,IACnB,aAAa,OAAA,EACb;AACA,YAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,UACpB;AAAA,QACF;AAAA,OACF;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAO;AAAA,GAC5C;AAEA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf;AAAA,GACF;AACF;;;;"}

package/dist-cjs/tree/Tree.js

@@ -54,7 +54,7 @@ const Tree = react.forwardRef(
       toggleExpanded,
       select,
       selectedSet,
-      setSelectedState,
+      setVisibleSelectionState,
       visibleNodes,
       getNodeMeta,
       getElement,
@@ -126,8 +126,10 @@ const Tree = react.forwardRef(
           if (activeNode) {
             const nodeMeta = getNodeMeta(activeNode);
             const isDisabled = disabledIdsSet.has(activeNode);
-            if (!isDisabled && (nodeMeta == null ? void 0 : nodeMeta.hasChildren)) {
-              if (!expandedState.has(activeNode)) {
+            const hasChildren = Boolean(nodeMeta == null ? void 0 : nodeMeta.hasChildren);
+            const isExpanded = expandedState.has(activeNode);
+            if (!isDisabled && hasChildren) {
+              if (!isExpanded) {
                 toggleExpanded(event, activeNode);
               } else {
                 const firstChild = visibleNodes.find(
@@ -146,7 +148,8 @@ const Tree = react.forwardRef(
           if (activeNode) {
             const isDisabled = disabledIdsSet.has(activeNode);
             if (!isDisabled) {
-              if (expandedState.has(activeNode)) {
+              const isExpanded = expandedState.has(activeNode);
+              if (isExpanded) {
                 toggleExpanded(event, activeNode);
               } else {
                 const parent = getParent(activeNode);
@@ -243,7 +246,7 @@ const Tree = react.forwardRef(
           (visible) => selectedSet.has(visible)
         );
         const newSelected = allSelected ? [] : allVisibleValues;
-        setSelectedState(newSelected);
+        setVisibleSelectionState(newSelected);
         onSelectionChange == null ? void 0 : onSelectionChange(event, newSelected);
         return;
       }