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

package/dist-es/mega-menu/useMegaMenuKeyboard.js

@@ -0,0 +1,205 @@
+import { useMemo } from 'react';
+
+const COLUMN_SELECTOR = "[data-mega-menu-column]";
+const ITEM_SELECTOR = "[data-mega-menu-item]";
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function getColumnItems(column) {
+  const marked = Array.from(
+    column.querySelectorAll(ITEM_SELECTOR)
+  );
+  if (marked.length > 0) return marked;
+  return Array.from(column.querySelectorAll(FOCUSABLE_SELECTOR));
+}
+function buildGrid(panel) {
+  const columns = new Set(panel.querySelectorAll(COLUMN_SELECTOR));
+  const grid = [];
+  const processedColumns = /* @__PURE__ */ new Set();
+  const all = panel.querySelectorAll(
+    `${COLUMN_SELECTOR}, ${ITEM_SELECTOR}`
+  );
+  for (const el of all) {
+    if (columns.has(el) && !processedColumns.has(el)) {
+      processedColumns.add(el);
+      const items = getColumnItems(el);
+      if (items.length > 0) grid.push(items);
+    } else if (el.matches(ITEM_SELECTOR)) {
+      const parentCol = el.closest(COLUMN_SELECTOR);
+      if (!parentCol || !columns.has(parentCol)) {
+        grid.push([el]);
+      }
+    }
+  }
+  return grid;
+}
+function findPosition(grid, el) {
+  for (let col = 0; col < grid.length; col++) {
+    const row = grid[col].indexOf(el);
+    if (row !== -1) return { col, row };
+  }
+  return null;
+}
+function focusTrigger(context) {
+  const reference = context.elements.reference;
+  const focusable = (reference == null ? void 0 : reference.querySelector(FOCUSABLE_SELECTOR)) ?? reference;
+  focusable == null ? void 0 : focusable.focus();
+}
+function focusNextAfterPanel(context, panel) {
+  var _a, _b;
+  const reference = context.elements.reference;
+  const refFocusable = (reference == null ? void 0 : reference.querySelector(FOCUSABLE_SELECTOR)) ?? reference;
+  const nextSibling = (_b = (_a = refFocusable == null ? void 0 : refFocusable.closest("li")) == null ? void 0 : _a.nextElementSibling) == null ? void 0 : _b.querySelector(FOCUSABLE_SELECTOR);
+  const nextOutside = nextSibling || (() => {
+    const allFocusable = Array.from(
+      panel.ownerDocument.querySelectorAll(FOCUSABLE_SELECTOR)
+    ).filter((el) => !panel.contains(el));
+    const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;
+    return idx >= 0 ? allFocusable[idx + 1] : void 0;
+  })();
+  if (nextOutside) {
+    const view = panel.ownerDocument.defaultView;
+    view == null ? void 0 : view.requestAnimationFrame(() => {
+      view == null ? void 0 : view.requestAnimationFrame(() => {
+        nextOutside.focus();
+      });
+    });
+  }
+}
+function useMegaMenuKeyboard(context, props = {}) {
+  const { enabled = true } = props;
+  const { open, onOpenChange } = context;
+  return useMemo(() => {
+    if (!enabled) {
+      return {};
+    }
+    return {
+      reference: {
+        onKeyDown(event) {
+          if (event.key === "ArrowDown" && open) {
+            event.preventDefault();
+            const floating = context.elements.floating;
+            if (floating instanceof HTMLElement) {
+              focusFirstItem(floating);
+            }
+          }
+        }
+      },
+      floating: {
+        onKeyDown(event) {
+          var _a, _b, _c, _d;
+          if (!open) return;
+          const panel = event.currentTarget;
+          const target = event.target;
+          const focusedItem = target.closest(ITEM_SELECTOR) ?? target.closest(FOCUSABLE_SELECTOR);
+          if (!focusedItem) return;
+          const grid = buildGrid(panel);
+          const pos = findPosition(grid, focusedItem);
+          if (!pos) return;
+          const allItems = grid.flat();
+          const linearIndex = allItems.indexOf(focusedItem);
+          switch (event.key) {
+            case "ArrowDown": {
+              event.preventDefault();
+              const next = pos.row + 1;
+              if (next < grid[pos.col].length) {
+                grid[pos.col][next].focus();
+              } else {
+                const nextCol = pos.col + 1;
+                if (nextCol < grid.length) {
+                  grid[nextCol][0].focus();
+                }
+              }
+              break;
+            }
+            case "ArrowUp": {
+              event.preventDefault();
+              if (pos.row > 0) {
+                grid[pos.col][pos.row - 1].focus();
+              } else {
+                const prevCol = pos.col - 1;
+                if (prevCol >= 0) {
+                  grid[prevCol][grid[prevCol].length - 1].focus();
+                } else {
+                  focusTrigger(context);
+                }
+              }
+              break;
+            }
+            case "ArrowRight": {
+              event.preventDefault();
+              const nextCol = pos.col + 1;
+              if (nextCol < grid.length) {
+                grid[nextCol][0].focus();
+              } else {
+                const reference = context.elements.reference;
+                const trigger = (reference == null ? void 0 : reference.querySelector(FOCUSABLE_SELECTOR)) ?? reference;
+                const li = trigger == null ? void 0 : trigger.closest("li");
+                const nextSibling = (li == null ? void 0 : li.nextElementSibling) instanceof HTMLElement ? li.nextElementSibling.querySelector(
+                  FOCUSABLE_SELECTOR
+                ) : null;
+                if (nextSibling) {
+                  onOpenChange(false);
+                  nextSibling.focus();
+                }
+              }
+              break;
+            }
+            case "ArrowLeft": {
+              event.preventDefault();
+              const prevCol = pos.col - 1;
+              if (prevCol >= 0) {
+                grid[prevCol][0].focus();
+              } else {
+                focusTrigger(context);
+              }
+              break;
+            }
+            case "Tab": {
+              event.preventDefault();
+              if (event.shiftKey) {
+                if (linearIndex === 0) {
+                  focusTrigger(context);
+                } else {
+                  (_a = allItems[linearIndex - 1]) == null ? void 0 : _a.focus();
+                }
+              } else {
+                if (linearIndex === allItems.length - 1) {
+                  onOpenChange(false);
+                  focusNextAfterPanel(context, panel);
+                } else {
+                  (_b = allItems[linearIndex + 1]) == null ? void 0 : _b.focus();
+                }
+              }
+              break;
+            }
+            case "Home": {
+              event.preventDefault();
+              (_c = grid[pos.col][0]) == null ? void 0 : _c.focus();
+              break;
+            }
+            case "End": {
+              event.preventDefault();
+              (_d = grid[pos.col][grid[pos.col].length - 1]) == null ? void 0 : _d.focus();
+              break;
+            }
+          }
+        }
+      }
+    };
+  }, [enabled, open, context, onOpenChange]);
+}
+function focusFirstItem(panel, attempt = 0) {
+  var _a;
+  const grid = buildGrid(panel);
+  const firstItem = (_a = grid[0]) == null ? void 0 : _a[0];
+  if (firstItem) {
+    firstItem.focus();
+    return;
+  }
+  const view = panel.ownerDocument.defaultView;
+  if (attempt < 3 && view) {
+    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));
+  }
+}
+
+export { FOCUSABLE_SELECTOR, focusFirstItem, useMegaMenuKeyboard };
+//# sourceMappingURL=useMegaMenuKeyboard.js.map

package/dist-es/mega-menu/useMegaMenuKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMegaMenuKeyboard.js","sources":["../src/mega-menu/useMegaMenuKeyboard.ts"],"sourcesContent":["import type { ElementProps, FloatingRootContext } from \"@floating-ui/react\";\nimport { useMemo } from \"react\";\n\nconst COLUMN_SELECTOR = \"[data-mega-menu-column]\";\nconst ITEM_SELECTOR = \"[data-mega-menu-item]\";\nexport const FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Get navigable items within a column.\n * Prefers explicitly marked items (`data-mega-menu-item`), falling back\n * to all focusable elements when no marked items are found.\n */\nfunction getColumnItems(column: HTMLElement): HTMLElement[] {\n  const marked = Array.from(\n    column.querySelectorAll<HTMLElement>(ITEM_SELECTOR),\n  );\n  if (marked.length > 0) return marked;\n  return Array.from(column.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\n/**\n * Build a 2D grid of navigable items from the panel DOM.\n * Each column is a `[data-mega-menu-column]` wrapper; items within each\n * column are discovered via `getColumnItems`.\n * Items not inside any column (orphans) are inserted at their DOM position\n * as single-item columns so keyboard navigation follows visual order.\n */\nfunction buildGrid(panel: HTMLElement): HTMLElement[][] {\n  const columns = new Set(panel.querySelectorAll<HTMLElement>(COLUMN_SELECTOR));\n  const grid: HTMLElement[][] = [];\n  const processedColumns = new Set<HTMLElement>();\n\n  // Walk columns and items in DOM order so orphans are interleaved correctly.\n  const all = panel.querySelectorAll<HTMLElement>(\n    `${COLUMN_SELECTOR}, ${ITEM_SELECTOR}`,\n  );\n\n  for (const el of all) {\n    if (columns.has(el) && !processedColumns.has(el)) {\n      processedColumns.add(el);\n      const items = getColumnItems(el);\n      if (items.length > 0) grid.push(items);\n    } else if (el.matches(ITEM_SELECTOR)) {\n      const parentCol = el.closest(COLUMN_SELECTOR);\n      if (!parentCol || !columns.has(parentCol as HTMLElement)) {\n        grid.push([el]);\n      }\n    }\n  }\n\n  return grid;\n}\n\nfunction findPosition(\n  grid: HTMLElement[][],\n  el: HTMLElement,\n): { col: number; row: number } | null {\n  for (let col = 0; col < grid.length; col++) {\n    const row = grid[col].indexOf(el);\n    if (row !== -1) return { col, row };\n  }\n  return null;\n}\n\nfunction focusTrigger(context: FloatingRootContext) {\n  const reference = context.elements.reference as HTMLElement | null;\n  const focusable =\n    reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n  focusable?.focus();\n}\n\nfunction focusNextAfterPanel(context: FloatingRootContext, panel: HTMLElement) {\n  const reference = context.elements.reference as HTMLElement | null;\n  const refFocusable =\n    reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ?? reference;\n\n  const nextSibling = refFocusable\n    ?.closest(\"li\")\n    ?.nextElementSibling?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);\n\n  const nextOutside =\n    nextSibling ||\n    (() => {\n      const allFocusable = Array.from(\n        panel.ownerDocument.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n      ).filter((el) => !panel.contains(el));\n      const idx = refFocusable ? allFocusable.indexOf(refFocusable) : -1;\n      return idx >= 0 ? allFocusable[idx + 1] : undefined;\n    })();\n\n  if (nextOutside) {\n    const view = panel.ownerDocument.defaultView;\n    view?.requestAnimationFrame(() => {\n      view?.requestAnimationFrame(() => {\n        nextOutside.focus();\n      });\n    });\n  }\n}\n\nexport interface UseMegaMenuKeyboardProps {\n  /**\n   * Whether the interaction is enabled.\n   * @default true\n   */\n  enabled?: boolean;\n}\n\n/**\n * Floating-ui custom interaction hook for mega menu grid keyboard navigation.\n *\n * Returns `ElementProps` that get merged via `useInteractions`, handling\n * keyboard events on both the reference (trigger) and floating (panel) elements.\n *\n * - **↑ / ↓** move within the current column.\n * - **← / →** jump to the top of the previous / next column.\n * - **Tab / Shift+Tab** move linearly through every item.\n * - **Home / End** jump to the first / last item in the column.\n * - **↑ from the first item** or **← from the first column** returns\n *   focus to the trigger.\n * - **→ from the last column** closes the panel and moves focus to the\n *   next sibling trigger.\n */\nexport function useMegaMenuKeyboard(\n  context: FloatingRootContext,\n  props: UseMegaMenuKeyboardProps = {},\n): ElementProps {\n  const { enabled = true } = props;\n  const { open, onOpenChange } = context;\n\n  return useMemo(() => {\n    if (!enabled) {\n      return {};\n    }\n\n    return {\n      reference: {\n        onKeyDown(event: React.KeyboardEvent) {\n          if (event.key === \"ArrowDown\" && open) {\n            event.preventDefault();\n            const floating = context.elements.floating;\n            if (floating instanceof HTMLElement) {\n              focusFirstItem(floating);\n            }\n          }\n        },\n      },\n      floating: {\n        onKeyDown(event: React.KeyboardEvent) {\n          if (!open) return;\n\n          const panel = event.currentTarget as HTMLElement;\n          const target = event.target as HTMLElement;\n\n          const focusedItem =\n            target.closest<HTMLElement>(ITEM_SELECTOR) ??\n            target.closest<HTMLElement>(FOCUSABLE_SELECTOR);\n          if (!focusedItem) return;\n\n          const grid = buildGrid(panel);\n          const pos = findPosition(grid, focusedItem);\n          if (!pos) return;\n\n          const allItems = grid.flat();\n          const linearIndex = allItems.indexOf(focusedItem);\n\n          switch (event.key) {\n            case \"ArrowDown\": {\n              event.preventDefault();\n              const next = pos.row + 1;\n              if (next < grid[pos.col].length) {\n                grid[pos.col][next].focus();\n              } else {\n                const nextCol = pos.col + 1;\n                if (nextCol < grid.length) {\n                  grid[nextCol][0].focus();\n                }\n              }\n              break;\n            }\n\n            case \"ArrowUp\": {\n              event.preventDefault();\n              if (pos.row > 0) {\n                grid[pos.col][pos.row - 1].focus();\n              } else {\n                const prevCol = pos.col - 1;\n                if (prevCol >= 0) {\n                  grid[prevCol][grid[prevCol].length - 1].focus();\n                } else {\n                  focusTrigger(context);\n                }\n              }\n              break;\n            }\n\n            case \"ArrowRight\": {\n              event.preventDefault();\n              const nextCol = pos.col + 1;\n              if (nextCol < grid.length) {\n                grid[nextCol][0].focus();\n              } else {\n                // On the last column — close panel and move to next trigger\n                const reference = context.elements\n                  .reference as HTMLElement | null;\n                const trigger =\n                  reference?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR) ??\n                  reference;\n                const li = trigger?.closest(\"li\");\n                const nextSibling =\n                  li?.nextElementSibling instanceof HTMLElement\n                    ? li.nextElementSibling.querySelector<HTMLElement>(\n                        FOCUSABLE_SELECTOR,\n                      )\n                    : null;\n                if (nextSibling) {\n                  onOpenChange(false);\n                  nextSibling.focus();\n                }\n              }\n              break;\n            }\n\n            case \"ArrowLeft\": {\n              event.preventDefault();\n              const prevCol = pos.col - 1;\n              if (prevCol >= 0) {\n                grid[prevCol][0].focus();\n              } else {\n                focusTrigger(context);\n              }\n              break;\n            }\n\n            case \"Tab\": {\n              event.preventDefault();\n              if (event.shiftKey) {\n                if (linearIndex === 0) {\n                  focusTrigger(context);\n                } else {\n                  allItems[linearIndex - 1]?.focus();\n                }\n              } else {\n                if (linearIndex === allItems.length - 1) {\n                  onOpenChange(false);\n                  focusNextAfterPanel(context, panel);\n                } else {\n                  allItems[linearIndex + 1]?.focus();\n                }\n              }\n              break;\n            }\n\n            case \"Home\": {\n              event.preventDefault();\n              grid[pos.col][0]?.focus();\n              break;\n            }\n\n            case \"End\": {\n              event.preventDefault();\n              grid[pos.col][grid[pos.col].length - 1]?.focus();\n              break;\n            }\n\n            default:\n              break;\n          }\n        },\n      },\n    };\n  }, [enabled, open, context, onOpenChange]);\n}\n\n/**\n * Focus the first navigable item inside a mega menu panel.\n * Retries with `requestAnimationFrame` if content has not yet rendered.\n */\nexport function focusFirstItem(panel: HTMLElement, attempt = 0): void {\n  const grid = buildGrid(panel);\n  const firstItem = grid[0]?.[0];\n\n  if (firstItem) {\n    firstItem.focus();\n    return;\n  }\n\n  const view = panel.ownerDocument.defaultView;\n  if (attempt < 3 && view) {\n    view.requestAnimationFrame(() => focusFirstItem(panel, attempt + 1));\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist-es/side-panel/SidePanel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltSidePanel {\n  background-color: var(--sidePanel-background, var(--salt-container-primary-background));\n  --saltSidePanel-width: 300px;\n  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n.saltSidePanel-primary {\n  --sidePanel-background: var(--salt-container-primary-background);\n  --sidePanel-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltSidePanel-secondary {\n  --sidePanel-background: var(--salt-container-secondary-background);\n  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltSidePanel-tertiary {\n  --sidePanel-background: var(--salt-container-tertiary-background);\n  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltSidePanel-left {\n  border-right: var(--sidePanel-border);\n}\n.saltSidePanel-right {\n  border-left: var(--sidePanel-border);\n}\n\n.saltSidePanel-none {\n  --sidePanel-background: none;\n  border: none;\n}\n\n.saltSidePanel-none .saltSidePanel-inner {\n  padding: 0;\n}\n\n.saltSidePanel-left,\n.saltSidePanel-right {\n  width: var(--saltSidePanel-width);\n  height: 100%;\n  min-height: 0;\n  align-self: stretch;\n}\n\n.saltSidePanel-enterAnimation,\n.saltSidePanel-exitAnimation {\n  overflow: hidden;\n}\n\n.saltSidePanel-left.saltSidePanel-enterAnimation,\n.saltSidePanel-right.saltSidePanel-enterAnimation {\n  animation: saltSidePanel-expandWidth var(--salt-duration-perceptible) var(--salt-animation-timing-function);\n}\n\n.saltSidePanel-left.saltSidePanel-exitAnimation,\n.saltSidePanel-right.saltSidePanel-exitAnimation {\n  animation: saltSidePanel-collapseWidth var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;\n}\n\n.saltSidePanel-exitAnimation {\n  pointer-events: none;\n}\n\n.saltSidePanel-inner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: var(--salt-spacing-300);\n}\n\n.saltSidePanel-left .saltSidePanel-inner,\n.saltSidePanel-right .saltSidePanel-inner {\n  width: var(--saltSidePanel-width);\n  height: 100%;\n}\n\n@keyframes saltSidePanel-expandWidth {\n  from {\n    width: 0;\n  }\n}\n@keyframes saltSidePanel-collapseWidth {\n  to {\n    width: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltSidePanel-left.saltSidePanel-enterAnimation,\n  .saltSidePanel-right.saltSidePanel-enterAnimation,\n  .saltSidePanel-left.saltSidePanel-exitAnimation,\n  .saltSidePanel-right.saltSidePanel-exitAnimation {\n    animation: none;\n  }\n}\n";
+var css_248z = ".saltSidePanel {\n  background-color: var(--sidePanel-background, var(--salt-container-primary-background));\n  --saltSidePanel-width: 300px;\n  --sidePanel-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--sidePanel-borderColor, var(--salt-container-primary-borderColor));\n  --saltSidePanel-padding: var(--salt-spacing-300);\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\n.saltSidePanel-primary {\n  --sidePanel-background: var(--salt-container-primary-background);\n  --sidePanel-borderColor: var(--salt-container-primary-borderColor);\n}\n\n.saltSidePanel-secondary {\n  --sidePanel-background: var(--salt-container-secondary-background);\n  --sidePanel-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltSidePanel-tertiary {\n  --sidePanel-background: var(--salt-container-tertiary-background);\n  --sidePanel-borderColor: var(--salt-container-tertiary-borderColor);\n}\n\n.saltSidePanel-left {\n  border-right: var(--sidePanel-border);\n}\n.saltSidePanel-right {\n  border-left: var(--sidePanel-border);\n}\n\n.saltSidePanel-none {\n  --sidePanel-background: none;\n  border: none;\n}\n\n.saltSidePanel-none {\n  --saltSidePanel-padding: var(--salt-spacing-200);\n}\n\n.saltSidePanel-left,\n.saltSidePanel-right {\n  width: var(--saltSidePanel-width);\n  height: 100%;\n  min-height: 0;\n  align-self: stretch;\n}\n\n.saltSidePanel-enterAnimation,\n.saltSidePanel-exitAnimation {\n  overflow: hidden;\n}\n\n.saltSidePanel-left.saltSidePanel-enterAnimation,\n.saltSidePanel-right.saltSidePanel-enterAnimation {\n  animation: saltSidePanel-expandWidth var(--salt-duration-perceptible) var(--salt-animation-timing-function);\n}\n\n.saltSidePanel-left.saltSidePanel-exitAnimation,\n.saltSidePanel-right.saltSidePanel-exitAnimation {\n  animation: saltSidePanel-collapseWidth var(--salt-duration-perceptible) var(--salt-animation-timing-function) both;\n}\n\n.saltSidePanel-exitAnimation {\n  pointer-events: none;\n}\n\n.saltSidePanel-inner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  padding: var(--saltSidePanel-padding);\n}\n\n.saltSidePanel-left .saltSidePanel-inner,\n.saltSidePanel-right .saltSidePanel-inner {\n  width: var(--saltSidePanel-width);\n  height: 100%;\n}\n\n@keyframes saltSidePanel-expandWidth {\n  from {\n    width: 0;\n  }\n}\n@keyframes saltSidePanel-collapseWidth {\n  to {\n    width: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .saltSidePanel-left.saltSidePanel-enterAnimation,\n  .saltSidePanel-right.saltSidePanel-enterAnimation,\n  .saltSidePanel-left.saltSidePanel-exitAnimation,\n  .saltSidePanel-right.saltSidePanel-exitAnimation {\n    animation: none;\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=SidePanel.css.js.map

package/dist-es/side-panel/SidePanel.js

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { FloatingFocusManager } from '@floating-ui/react';
-import { makePrefixer, useId, useFloatingUI, useForkRef } from '@salt-ds/core';
+import { makePrefixer, useId, useFloatingUI, useForkRef, useIsomorphicLayoutEffect } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useState, useRef, useEffect } from 'react';
-import { useSidePanelContext } from './internal/SidePanelContext.js';
+import { forwardRef, useMemo, useState, useRef, useEffect } from 'react';
+import { useSidePanelContext, SidePanelContext } from './internal/SidePanelContext.js';
+import 'tabbable';
 import css_248z from './SidePanel.css.js';
 
 const withBaseName = makePrefixer("saltSidePanel");
@@ -20,19 +21,19 @@ const SidePanel = forwardRef(
       id: idProp,
       className,
       "aria-labelledby": ariaLabelledBy,
+      onAnimationEnd,
       ...rest
     } = props;
-    const { openState, floatingRootContext, setFloating, setPanelId, titleId } = useSidePanelContext();
+    const sidePanelContext = useSidePanelContext();
+    const { openState, floatingRootContext, setFloating, setPanelId, titleId } = sidePanelContext;
+    const positionedContext = useMemo(
+      () => ({ ...sidePanelContext, position }),
+      [sidePanelContext, position]
+    );
     const id = useId(idProp);
     const [showComponent, setShowComponent] = useState(openState);
-    const [animating, setAnimating] = useState(() => {
-      var _a;
-      if (!openState || disableAnimation) return false;
-      const reference = floatingRootContext.elements.reference;
-      if (!(reference instanceof Element)) return false;
-      const activeElement = (_a = reference.ownerDocument) == null ? void 0 : _a.activeElement;
-      return !!activeElement && reference.contains(activeElement);
-    });
+    const [animating, setAnimating] = useState(false);
+    const shouldAnimateOpen = useRef(!openState);
     const [skipInitialFocus, setSkipInitialFocus] = useState(() => {
       var _a;
       if (!openState) return false;
@@ -41,7 +42,6 @@ const SidePanel = forwardRef(
       const activeElement = (_a = reference.ownerDocument) == null ? void 0 : _a.activeElement;
       return !activeElement || !reference.contains(activeElement);
     });
-    const initialRender = useRef(true);
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-side-panel",
@@ -53,7 +53,8 @@ const SidePanel = forwardRef(
     });
     const handleRef = useForkRef(setFloating, ref);
     const handleAnimationEnd = (event) => {
-      if (event.currentTarget !== event.target) return;
+      onAnimationEnd == null ? void 0 : onAnimationEnd(event);
+      if (event.currentTarget !== event.target || disableAnimation) return;
       setAnimating(false);
       if (!openState) {
         setShowComponent(false);
@@ -70,22 +71,21 @@ const SidePanel = forwardRef(
         setSkipInitialFocus(false);
       }
     }, [openState]);
-    useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       var _a, _b;
       if (disableAnimation) {
         setShowComponent(openState);
         setAnimating(false);
-        initialRender.current = false;
+        if (!openState) shouldAnimateOpen.current = true;
         return;
       }
-      if (initialRender.current && openState) {
-        const reference = floatingRootContext.elements.reference;
-        if (!(reference instanceof Element)) {
-          setShowComponent(true);
-          setAnimating(false);
-          initialRender.current = false;
-          return;
-        }
+      if (!openState) {
+        shouldAnimateOpen.current = true;
+      }
+      if (openState && !shouldAnimateOpen.current) {
+        setShowComponent(true);
+        setAnimating(false);
+        return;
       }
       const prefersReducedMotion = (_b = (_a = targetWindow == null ? void 0 : targetWindow.matchMedia) == null ? void 0 : _a.call(
         targetWindow,
@@ -102,13 +102,7 @@ const SidePanel = forwardRef(
       } else {
         setAnimating(true);
       }
-      initialRender.current = false;
-    }, [
-      openState,
-      targetWindow,
-      disableAnimation,
-      floatingRootContext.elements.reference
-    ]);
+    }, [openState, targetWindow, disableAnimation]);
     if (!showComponent) return null;
     const resolvedInitialFocus = skipInitialFocus ? -1 : initialFocus ?? 0;
     const panelDiv = /* @__PURE__ */ jsx(
@@ -127,10 +121,11 @@ const SidePanel = forwardRef(
           },
           className
         ),
-        onAnimationEnd: disableAnimation ? void 0 : handleAnimationEnd,
+        onAnimationEnd: handleAnimationEnd,
+        tabIndex: -1,
         ...rest,
         id,
-        children: /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children })
+        children: /* @__PURE__ */ jsx(SidePanelContext.Provider, { value: positionedContext, children: /* @__PURE__ */ jsx("div", { className: withBaseName("inner"), children }) })
       }
     );
     if (openState || animating) {

package/dist-es/side-panel/SidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.js","sources":["../src/side-panel/SidePanel.tsx"],"sourcesContent":["import { FloatingFocusManager } from \"@floating-ui/react\";\nimport { makePrefixer, useFloatingUI, useForkRef, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type AnimationEvent,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useSidePanelContext } from \"./internal\";\nimport sidePanelCss from \"./SidePanel.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanel\");\n\nexport interface SidePanelProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Disable the panel's own open/close animation.\n   * Set to `true` when the parent controls sizing and animation (e.g. inside a splitter).\n   * @default false\n   */\n  disableAnimation?: boolean;\n  /**\n   * Edge the panel is anchored to; controls animation direction and divider side.\n   * @default \"right\"\n   */\n  position?: \"right\" | \"left\";\n  /**\n   * Which element receives focus when the panel opens.\n   * Pass a number for the tabbable element index (0 = first), or a ref to a specific element.\n   * Defaults to the side panel close button.\n   */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * The background color palette. Options are 'primary', 'secondary', 'tertiary' and 'none'.\n   * @default \"primary\"\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"none\";\n}\n\nexport const SidePanel = forwardRef<HTMLDivElement, SidePanelProps>(\n  function SidePanel(props, ref) {\n    const {\n      disableAnimation = false,\n      position = \"right\",\n      initialFocus,\n      variant = \"primary\",\n      children,\n      id: idProp,\n      className,\n      \"aria-labelledby\": ariaLabelledBy,\n      ...rest\n    } = props;\n\n    const { openState, floatingRootContext, setFloating, setPanelId, titleId } =\n      useSidePanelContext();\n\n    const id = useId(idProp);\n\n    const [showComponent, setShowComponent] = useState(openState);\n    const [animating, setAnimating] = useState(() => {\n      if (!openState || disableAnimation) return false;\n      // Animate on first mount only when the trigger has focus, indicating a\n      // user-initiated open.\n      const reference = floatingRootContext.elements.reference;\n      if (!(reference instanceof Element)) return false;\n      const activeElement = reference.ownerDocument?.activeElement;\n      return !!activeElement && reference.contains(activeElement);\n    });\n    // On first mount while open, skip moving focus when focus did not come from the trigger.\n    const [skipInitialFocus, setSkipInitialFocus] = useState(() => {\n      if (!openState) return false;\n      const reference = floatingRootContext.elements.reference;\n      if (!(reference instanceof Element)) return true;\n      const activeElement = reference.ownerDocument?.activeElement;\n      return !activeElement || !reference.contains(activeElement);\n    });\n    // Track whether this is the initial render to skip the open animation.\n    const initialRender = useRef(true);\n    const targetWindow = useWindow();\n\n    useComponentCssInjection({\n      testId: \"salt-side-panel\",\n      css: sidePanelCss,\n      window: targetWindow,\n    });\n\n    const { context } = useFloatingUI({\n      rootContext: floatingRootContext,\n    });\n\n    const handleRef = useForkRef<HTMLDivElement>(setFloating, ref);\n\n    const handleAnimationEnd = (event: AnimationEvent<HTMLDivElement>) => {\n      if (event.currentTarget !== event.target) return;\n      setAnimating(false);\n      if (!openState) {\n        setShowComponent(false);\n      }\n    };\n\n    useEffect(() => {\n      // Keep this as state (not ref): setPanelId causes a context re-render and\n      // this value is consumed as a prop for initial focus behavior.\n      setPanelId(id);\n\n      return () => {\n        setPanelId(undefined);\n      };\n    }, [id, setPanelId]);\n\n    useEffect(() => {\n      if (!openState) {\n        setSkipInitialFocus(false);\n      }\n    }, [openState]);\n\n    useEffect(() => {\n      if (disableAnimation) {\n        // When animation is disabled, show/hide immediately since there is\n        // no exit animation to wait for before unmounting.\n        setShowComponent(openState);\n        setAnimating(false);\n        initialRender.current = false;\n        return;\n      }\n\n      // Skip animation on initial render when panel is already open\n      // without a trigger interaction (i.e. defaultOpen scenario).\n      if (initialRender.current && openState) {\n        const reference = floatingRootContext.elements.reference;\n        if (!(reference instanceof Element)) {\n          setShowComponent(true);\n          setAnimating(false);\n          initialRender.current = false;\n          return;\n        }\n      }\n\n      const prefersReducedMotion = targetWindow?.matchMedia?.(\n        \"(prefers-reduced-motion: reduce)\",\n      )?.matches;\n\n      if (openState) {\n        setShowComponent(true);\n      }\n\n      if (prefersReducedMotion) {\n        setAnimating(false);\n        if (!openState) {\n          setShowComponent(false);\n        }\n      } else {\n        setAnimating(true);\n      }\n\n      initialRender.current = false;\n    }, [\n      openState,\n      targetWindow,\n      disableAnimation,\n      floatingRootContext.elements.reference,\n    ]);\n\n    if (!showComponent) return null;\n\n    // `-1` skips initial focus movement but preserves focus guards/return focus handling.\n    const resolvedInitialFocus = skipInitialFocus ? -1 : (initialFocus ?? 0);\n\n    const panelDiv = (\n      <div\n        role=\"region\"\n        aria-labelledby={clsx(ariaLabelledBy, titleId) || undefined}\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(position)]: position,\n            [withBaseName(variant)]: variant,\n            [withBaseName(\"enterAnimation\")]:\n              !disableAnimation && openState && animating,\n            [withBaseName(\"exitAnimation\")]:\n              !disableAnimation && !openState && animating,\n          },\n          className,\n        )}\n        onAnimationEnd={disableAnimation ? undefined : handleAnimationEnd}\n        {...rest}\n        id={id}\n      >\n        <div className={withBaseName(\"inner\")}>{children}</div>\n      </div>\n    );\n\n    if (openState || animating) {\n      return (\n        <FloatingFocusManager\n          context={context}\n          modal={false}\n          initialFocus={resolvedInitialFocus}\n          closeOnFocusOut={false}\n          guards={false}\n        >\n          {panelDiv}\n        </FloatingFocusManager>\n      );\n    }\n\n    return panelDiv;\n  },\n);\n"],"names":["SidePanel","sidePanelCss"],"mappings":"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"}
+{"version":3,"file":"SidePanel.js","sources":["../src/side-panel/SidePanel.tsx"],"sourcesContent":["import { FloatingFocusManager } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\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 {\n  type AnimationEvent,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { SidePanelContext, useSidePanelContext } from \"./internal\";\nimport sidePanelCss from \"./SidePanel.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanel\");\n\nexport interface SidePanelProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Disable the panel's own open/close animation.\n   * Set to `true` when the parent controls sizing and animation (e.g. inside a splitter).\n   * @default false\n   */\n  disableAnimation?: boolean;\n  /**\n   * Edge the panel is anchored to; controls animation direction and divider side.\n   * @default \"right\"\n   */\n  position?: \"right\" | \"left\";\n  /**\n   * Which element receives focus when the panel opens.\n   * Pass a number for the tabbable element index (0 = first), or a ref to a specific element.\n   * Defaults to the side panel close button.\n   */\n  initialFocus?: ComponentProps<typeof FloatingFocusManager>[\"initialFocus\"];\n  /**\n   * The background color palette. Options are 'primary', 'secondary', 'tertiary' and 'none'.\n   * @default \"primary\"\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\" | \"none\";\n}\n\nexport const SidePanel = forwardRef<HTMLDivElement, SidePanelProps>(\n  function SidePanel(props, ref) {\n    const {\n      disableAnimation = false,\n      position = \"right\",\n      initialFocus,\n      variant = \"primary\",\n      children,\n      id: idProp,\n      className,\n      \"aria-labelledby\": ariaLabelledBy,\n      onAnimationEnd,\n      ...rest\n    } = props;\n\n    const sidePanelContext = useSidePanelContext();\n    const { openState, floatingRootContext, setFloating, setPanelId, titleId } =\n      sidePanelContext;\n    const positionedContext = useMemo(\n      () => ({ ...sidePanelContext, position }),\n      [sidePanelContext, position],\n    );\n\n    const id = useId(idProp);\n\n    const [showComponent, setShowComponent] = useState(openState);\n    const [animating, setAnimating] = useState(false);\n    const shouldAnimateOpen = useRef(!openState);\n    // On first mount while open, skip moving focus when focus did not come from the trigger.\n    const [skipInitialFocus, setSkipInitialFocus] = useState(() => {\n      if (!openState) return false;\n      const reference = floatingRootContext.elements.reference;\n      if (!(reference instanceof Element)) return true;\n      const activeElement = reference.ownerDocument?.activeElement;\n      return !activeElement || !reference.contains(activeElement);\n    });\n    const targetWindow = useWindow();\n\n    useComponentCssInjection({\n      testId: \"salt-side-panel\",\n      css: sidePanelCss,\n      window: targetWindow,\n    });\n\n    const { context } = useFloatingUI({\n      rootContext: floatingRootContext,\n    });\n\n    const handleRef = useForkRef<HTMLDivElement>(setFloating, ref);\n\n    const handleAnimationEnd = (event: AnimationEvent<HTMLDivElement>) => {\n      onAnimationEnd?.(event);\n\n      if (event.currentTarget !== event.target || disableAnimation) return;\n      setAnimating(false);\n      if (!openState) {\n        setShowComponent(false);\n      }\n    };\n\n    useEffect(() => {\n      setPanelId(id);\n      return () => {\n        setPanelId(undefined);\n      };\n    }, [id, setPanelId]);\n\n    useEffect(() => {\n      if (!openState) {\n        setSkipInitialFocus(false);\n      }\n    }, [openState]);\n\n    useIsomorphicLayoutEffect(() => {\n      if (disableAnimation) {\n        setShowComponent(openState);\n        setAnimating(false);\n        if (!openState) shouldAnimateOpen.current = true;\n        return;\n      }\n\n      if (!openState) {\n        shouldAnimateOpen.current = true;\n      }\n\n      // Don't animate if the panel has never been closed (defaultOpen scenario).\n      if (openState && !shouldAnimateOpen.current) {\n        setShowComponent(true);\n        setAnimating(false);\n        return;\n      }\n\n      const prefersReducedMotion = targetWindow?.matchMedia?.(\n        \"(prefers-reduced-motion: reduce)\",\n      )?.matches;\n\n      if (openState) {\n        setShowComponent(true);\n      }\n\n      if (prefersReducedMotion) {\n        setAnimating(false);\n        if (!openState) {\n          setShowComponent(false);\n        }\n      } else {\n        setAnimating(true);\n      }\n    }, [openState, targetWindow, disableAnimation]);\n\n    if (!showComponent) return null;\n\n    const resolvedInitialFocus = skipInitialFocus ? -1 : (initialFocus ?? 0);\n\n    const panelDiv = (\n      <div\n        role=\"region\"\n        aria-labelledby={clsx(ariaLabelledBy, titleId) || undefined}\n        ref={handleRef}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(position)]: position,\n            [withBaseName(variant)]: variant,\n            [withBaseName(\"enterAnimation\")]:\n              !disableAnimation && openState && animating,\n            [withBaseName(\"exitAnimation\")]:\n              !disableAnimation && !openState && animating,\n          },\n          className,\n        )}\n        onAnimationEnd={handleAnimationEnd}\n        tabIndex={-1}\n        {...rest}\n        id={id}\n      >\n        <SidePanelContext.Provider value={positionedContext}>\n          <div className={withBaseName(\"inner\")}>{children}</div>\n        </SidePanelContext.Provider>\n      </div>\n    );\n\n    if (openState || animating) {\n      return (\n        <FloatingFocusManager\n          context={context}\n          modal={false}\n          initialFocus={resolvedInitialFocus}\n          closeOnFocusOut={false}\n          guards={false}\n        >\n          {panelDiv}\n        </FloatingFocusManager>\n      );\n    }\n\n    return panelDiv;\n  },\n);\n"],"names":["SidePanel","sidePanelCss"],"mappings":"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"}

package/dist-es/side-panel/SidePanelCloseButton.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIcon, useId, Button } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useSidePanelContext } from './internal/SidePanelContext.js';
+import 'tabbable';
+
+const withBaseName = makePrefixer("saltSidePanelCloseButton");
+const SidePanelCloseButton = forwardRef(
+  function SidePanelCloseButton2({ className, onClick, id: idProp, ...rest }, ref) {
+    const { CollapseLeftIcon, CollapseRightIcon } = useIcon();
+    const { setOpen, titleId, position } = useSidePanelContext();
+    const closeButtonId = useId(idProp);
+    const handleClick = (event) => {
+      onClick == null ? void 0 : onClick(event);
+      setOpen(false);
+    };
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        ref,
+        id: closeButtonId,
+        "aria-label": "Close",
+        "aria-labelledby": titleId ? clsx(closeButtonId, titleId) : void 0,
+        appearance: "transparent",
+        className: clsx(withBaseName(), className),
+        onClick: handleClick,
+        ...rest,
+        children: position === "left" ? /* @__PURE__ */ jsx(CollapseLeftIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsx(CollapseRightIcon, { "aria-hidden": true })
+      }
+    );
+  }
+);
+
+export { SidePanelCloseButton };
+//# sourceMappingURL=SidePanelCloseButton.js.map

package/dist-es/side-panel/SidePanelCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelCloseButton.js","sources":["../src/side-panel/SidePanelCloseButton.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  makePrefixer,\n  useIcon,\n  useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type MouseEvent } from \"react\";\nimport { useSidePanelContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelCloseButton\");\n\nexport const SidePanelCloseButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  function SidePanelCloseButton(\n    { className, onClick, id: idProp, ...rest },\n    ref,\n  ) {\n    const { CollapseLeftIcon, CollapseRightIcon } = useIcon();\n    const { setOpen, titleId, position } = useSidePanelContext();\n    const closeButtonId = useId(idProp);\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event);\n      setOpen(false);\n    };\n\n    return (\n      <Button\n        ref={ref}\n        id={closeButtonId}\n        aria-label=\"Close\"\n        aria-labelledby={titleId ? clsx(closeButtonId, titleId) : undefined}\n        appearance=\"transparent\"\n        className={clsx(withBaseName(), className)}\n        onClick={handleClick}\n        {...rest}\n      >\n        {position === \"left\" ? (\n          <CollapseLeftIcon aria-hidden />\n        ) : (\n          <CollapseRightIcon aria-hidden />\n        )}\n      </Button>\n    );\n  },\n);\n"],"names":["SidePanelCloseButton"],"mappings":";;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA;AAErD,MAAM,oBAAA,GAAuB,UAAA;AAAA,EAClC,SAASA,qBAAAA,CACP,EAAE,SAAA,EAAW,OAAA,EAAS,IAAI,MAAA,EAAQ,GAAG,IAAA,EAAK,EAC1C,GAAA,EACA;AACA,IAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAA,EAAkB,GAAI,OAAA,EAAQ;AACxD,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAS,QAAA,KAAa,mBAAA,EAAoB;AAC3D,IAAA,MAAM,aAAA,GAAgB,MAAM,MAAM,CAAA;AAElC,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf,CAAA;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,aAAA;AAAA,QACJ,YAAA,EAAW,OAAA;AAAA,QACX,iBAAA,EAAiB,OAAA,GAAU,IAAA,CAAK,aAAA,EAAe,OAAO,CAAA,GAAI,MAAA;AAAA,QAC1D,UAAA,EAAW,aAAA;AAAA,QACX,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,OAAA,EAAS,WAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,QAAA,KAAa,MAAA,mBACZ,GAAA,CAAC,gBAAA,EAAA,EAAiB,aAAA,EAAW,MAAC,CAAA,mBAE9B,GAAA,CAAC,iBAAA,EAAA,EAAkB,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAEnC;AAAA,EAEJ;AACF;;;;"}

package/dist-es/side-panel/SidePanelContent.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltSidePanelContent {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.saltSidePanelContent-body {\n  flex: 1;\n  overflow: auto;\n}\n";
+var css_248z = ".saltSidePanelContent {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n\n.saltSidePanelContent-body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=SidePanelContent.css.js.map

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

@@ -3,8 +3,10 @@ import { makePrefixer, useId } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { forwardRef, useRef } from 'react';
 import { useSidePanelContext } from './internal/SidePanelContext.js';
+import { useIsScrollable } from './internal/useIsScrollable.js';
+import 'tabbable';
 import css_248z from './SidePanelContent.css.js';
 
 const withBaseName = makePrefixer("saltSidePanelContent");
@@ -20,29 +22,7 @@ const SidePanelContent = forwardRef(function SidePanelContent2(props, ref) {
   const targetWindow = useWindow();
   const contentSuffixId = useId();
   const bodyRef = useRef(null);
-  const [isScrollable, setIsScrollable] = useState(false);
-  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(bodyRef);
   useComponentCssInjection({
     testId: "salt-side-panel-content",
     css: css_248z,

package/dist-es/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":["SidePanelContent","sidePanelContentCss"],"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":["SidePanelContent","sidePanelContentCss"],"mappings":";;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAIjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,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,GAAI,mBAAA,EAAoB;AACxC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,MAAM,kBAAkB,KAAA,EAAM;AAC9B,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,YAAA,GAAe,gBAAgB,OAAO,CAAA;AAE5C,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,yBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;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,GAAqB,IAAA,CAAK,OAAA,EAAS,eAAe,CAAA,IAAK,MAAA;AAAA,IACzD,CAAA,MAAO;AACL,MAAA,aAAA,GAAgB,aAAA,IAAiB,SAAA;AAAA,IACnC;AAAA,EACF;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,SAAA,EAAW,IAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAC5D,QAAA,EAAA;AAAA,IAAA,YAAA,uBACE,MAAA,EAAA,EAAK,EAAA,EAAI,iBAAiB,MAAA,EAAM,IAAA,EAAC,qBAElC,CAAA,GACE,IAAA;AAAA,oBACJ,GAAA;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-es/side-panel/SidePanelHeader.css.js

@@ -1,4 +1,4 @@
-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";
 
 export { css_248z as default };
 //# sourceMappingURL=SidePanelHeader.css.js.map

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

@@ -3,6 +3,7 @@ import { useFloatingRootContext } from '@floating-ui/react';
 import { useControlled } from '@salt-ds/core';
 import { useCallback, useState, useEffect, useMemo } from 'react';
 import { SidePanelContext } from './internal/SidePanelContext.js';
+import { useSidePanelTabOrder } from './internal/useSidePanelTabOrder.js';
 
 function SidePanelProvider(props) {
   const { children, open: openProp, defaultOpen, onOpenChange } = props;
@@ -23,6 +24,9 @@ function SidePanelProvider(props) {
   const [floating, setFloating] = useState(null);
   const [panelId, setPanelId] = useState(void 0);
   const [titleId, setTitleId] = useState(void 0);
+  const [position, setPosition] = useState(
+    void 0
+  );
   const floatingRootContext = useFloatingRootContext({
     open: openState,
     onOpenChange: handleOpenChange,
@@ -48,6 +52,11 @@ function SidePanelProvider(props) {
       floating.removeEventListener("keydown", onKeyDown);
     };
   }, [floating, openState, handleOpenChange]);
+  useSidePanelTabOrder({
+    floating,
+    open: openState,
+    reference
+  });
   const context = useMemo(
     () => ({
       openState,
@@ -58,9 +67,18 @@ function SidePanelProvider(props) {
       panelId,
       setPanelId,
       titleId,
-      setTitleId
+      setTitleId,
+      position,
+      setPosition
     }),
-    [openState, floatingRootContext, handleOpenChange, panelId, titleId]
+    [
+      openState,
+      floatingRootContext,
+      handleOpenChange,
+      panelId,
+      titleId,
+      position
+    ]
   );
   return /* @__PURE__ */ jsx(SidePanelContext.Provider, { value: context, children });
 }