@danske/sapphire-react-lab 0.105.2 → 0.106.2

package/build/esm/Sidebar/src/Panel.js

@@ -1,52 +1,20 @@
 import React, { useEffect } from 'react';
-import { Panel, ModalLayout, IconButton, tokens, View } from '@danske/sapphire-react';
+import { Panel, ModalLayout, tokens, View, IconButton } from '@danske/sapphire-react';
 import { ChevronLeft } from '@danske/sapphire-icons/react';
 import { useSecondarySidebarContext } from './SecondarySidebarContext.js';
 import { useResponsiveSidebarContext, useIsSidebarCollapsed } from './ResponsiveSidebarContext.js';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarPanel = (_a) => {
-  var _b = _a, {
-    children,
-    header
-  } = _b, props = __objRest(_b, [
-    "children",
-    "header"
-  ]);
+const SidebarPanel = ({
+  children,
+  header,
+  ...props
+}) => {
   const { openedId, setOpenedId, content } = useSecondarySidebarContext();
   const responsiveContext = useResponsiveSidebarContext();
   if (!responsiveContext) {
-    throw new Error("<SidebarPanel> must be rendered inside a <Sidebar.ResponsiveProvider>");
+    throw new Error(
+      "<SidebarPanel> must be rendered inside a <Sidebar.ResponsiveProvider>"
+    );
   }
   const { isPanelOpen, setPanelOpen } = responsiveContext;
   const isCollapsed = useIsSidebarCollapsed();
@@ -55,41 +23,60 @@ const SidebarPanel = (_a) => {
       setPanelOpen(false);
     }
   }, [isCollapsed]);
-  return /* @__PURE__ */ React.createElement(Panel, __spreadProps(__spreadValues({}, props), {
-    isOpen: isPanelOpen,
-    onClose: () => setPanelOpen(false),
-    onCloseTransitionDone: () => setOpenedId(null),
-    alignLeft: true,
-    isDismissable: true,
-    width: 320
-  }), /* @__PURE__ */ React.createElement(ModalLayout, {
-    header: /* @__PURE__ */ React.createElement(ModalLayout.Header, {
-      heading: openedId === null ? header : content == null ? void 0 : content.header,
-      backButton: openedId !== null && /* @__PURE__ */ React.createElement(IconButton, {
-        size: "md",
-        "aria-label": "Back",
-        variant: "tertiary",
-        marginLeft: `calc(-1 * ${tokens.size.spacingSm})`,
-        onPress: () => setOpenedId(null)
-      }, /* @__PURE__ */ React.createElement(ChevronLeft, null))
-    }),
-    body: /* @__PURE__ */ React.createElement(ModalLayout.Body, {
-      noPadding: true,
-      UNSAFE_style: {
-        paddingLeft: tokens.size.spacingMd.value,
-        paddingRight: tokens.size.spacingMd.value
+  return /* @__PURE__ */ React.createElement(
+    Panel,
+    {
+      ...props,
+      isOpen: isPanelOpen,
+      onClose: () => setPanelOpen(false),
+      onCloseTransitionDone: () => setOpenedId(null),
+      alignLeft: true,
+      isDismissable: true,
+      width: 320
+    },
+    /* @__PURE__ */ React.createElement(
+      ModalLayout,
+      {
+        header: /* @__PURE__ */ React.createElement(
+          ModalLayout.Header,
+          {
+            heading: openedId === null ? header : content?.header,
+            backButton: openedId !== null && /* @__PURE__ */ React.createElement(
+              IconButton,
+              {
+                size: "md",
+                "aria-label": "Back",
+                variant: "tertiary",
+                marginLeft: `calc(-1 * ${tokens.size.spacingSm})`,
+                onPress: () => setOpenedId(null)
+              },
+              /* @__PURE__ */ React.createElement(ChevronLeft, null)
+            )
+          }
+        ),
+        body: /* @__PURE__ */ React.createElement(
+          ModalLayout.Body,
+          {
+            noPadding: true,
+            UNSAFE_style: {
+              paddingLeft: tokens.size.spacingMd.value,
+              paddingRight: tokens.size.spacingMd.value
+            }
+          },
+          /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, { isHidden: openedId !== null }, children), openedId && content?.body)
+        )
       }
-    }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
-      isHidden: openedId !== null
-    }, children), openedId && (content == null ? void 0 : content.body)))
-  }));
+    )
+  );
 };
 const SidebarPanelTrigger = ({
   children
 }) => {
   const context = useResponsiveSidebarContext();
   if (!context) {
-    throw new Error("<Sidebar.PanelTrigger> should be rendered inside a <Sidebar.ResponsiveProvider>");
+    throw new Error(
+      "<Sidebar.PanelTrigger> should be rendered inside a <Sidebar.ResponsiveProvider>"
+    );
   }
   const isCollapsed = useIsSidebarCollapsed();
   const panelTriggerProps = {

package/build/esm/Sidebar/src/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../../../../src/Sidebar/src/Panel.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from 'react';\nimport {\n  IconButton,\n  ModalLayout,\n  Panel,\n  PanelProps,\n  tokens,\n  View,\n} from '@danske/sapphire-react';\nimport { ChevronLeft } from '@danske/sapphire-icons/react';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\nimport {\n  useIsSidebarCollapsed,\n  useResponsiveSidebarContext,\n} from './ResponsiveSidebarContext';\n\nexport type SidebarPanelProps = Omit<\n  PanelProps,\n  'isOpen' | 'size' | 'direction'\n> & { header: ReactNode };\n\nexport const SidebarPanel = ({\n  children,\n  header,\n  ...props\n}: SidebarPanelProps) => {\n  const { openedId, setOpenedId, content } = useSecondarySidebarContext();\n  const responsiveContext = useResponsiveSidebarContext();\n\n  if (!responsiveContext) {\n    throw new Error(\n      '<SidebarPanel> must be rendered inside a <Sidebar.ResponsiveProvider>'\n    );\n  }\n\n  const { isPanelOpen, setPanelOpen } = responsiveContext;\n  const isCollapsed = useIsSidebarCollapsed();\n\n  useEffect(() => {\n    if (!isCollapsed) {\n      // if breakpoint changes, we want to close the panel until opened manually again\n      setPanelOpen(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <Panel\n      {...props}\n      isOpen={isPanelOpen}\n      onClose={() => setPanelOpen(false)}\n      onCloseTransitionDone={() => setOpenedId(null)}\n      alignLeft\n      isDismissable\n      width={320}\n    >\n      <ModalLayout\n        header={\n          <ModalLayout.Header\n            heading={openedId === null ? header : content?.header}\n            backButton={\n              openedId !== null && (\n                <IconButton\n                  size=\"md\"\n                  aria-label=\"Back\"\n                  variant=\"tertiary\"\n                  marginLeft={`calc(-1 * ${tokens.size.spacingSm})`}\n                  onPress={() => setOpenedId(null)}\n                >\n                  <ChevronLeft />\n                </IconButton>\n              )\n            }\n          />\n        }\n        body={\n          <ModalLayout.Body\n            noPadding\n            UNSAFE_style={{\n              paddingLeft: tokens.size.spacingMd.value,\n              paddingRight: tokens.size.spacingMd.value,\n            }}\n          >\n            <>\n              <View isHidden={openedId !== null}>{children}</View>\n              {openedId && content?.body}\n            </>\n          </ModalLayout.Body>\n        }\n      />\n    </Panel>\n  );\n};\n\nexport const SidebarPanelTrigger = ({\n  children,\n}: {\n  children: (triggerProps: any) => JSX.Element;\n}) => {\n  const context = useResponsiveSidebarContext();\n  if (!context) {\n    throw new Error(\n      '<Sidebar.PanelTrigger> should be rendered inside a <Sidebar.ResponsiveProvider>'\n    );\n  }\n  const isCollapsed = useIsSidebarCollapsed();\n  const panelTriggerProps = {\n    onPress: () => {\n      context.setPanelOpen(true);\n    },\n  };\n\n  return isCollapsed ? children(panelTriggerProps) : null;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../../../../src/Sidebar/src/Panel.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from 'react';\nimport {\n  IconButton,\n  ModalLayout,\n  Panel,\n  PanelProps,\n  tokens,\n  View,\n} from '@danske/sapphire-react';\nimport { ChevronLeft } from '@danske/sapphire-icons/react';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\nimport {\n  useIsSidebarCollapsed,\n  useResponsiveSidebarContext,\n} from './ResponsiveSidebarContext';\n\nexport type SidebarPanelProps = Omit<\n  PanelProps,\n  'isOpen' | 'size' | 'direction'\n> & { header: ReactNode };\n\nexport const SidebarPanel = ({\n  children,\n  header,\n  ...props\n}: SidebarPanelProps) => {\n  const { openedId, setOpenedId, content } = useSecondarySidebarContext();\n  const responsiveContext = useResponsiveSidebarContext();\n\n  if (!responsiveContext) {\n    throw new Error(\n      '<SidebarPanel> must be rendered inside a <Sidebar.ResponsiveProvider>'\n    );\n  }\n\n  const { isPanelOpen, setPanelOpen } = responsiveContext;\n  const isCollapsed = useIsSidebarCollapsed();\n\n  useEffect(() => {\n    if (!isCollapsed) {\n      // if breakpoint changes, we want to close the panel until opened manually again\n      setPanelOpen(false);\n    }\n  }, [isCollapsed]);\n\n  return (\n    <Panel\n      {...props}\n      isOpen={isPanelOpen}\n      onClose={() => setPanelOpen(false)}\n      onCloseTransitionDone={() => setOpenedId(null)}\n      alignLeft\n      isDismissable\n      width={320}\n    >\n      <ModalLayout\n        header={\n          <ModalLayout.Header\n            heading={openedId === null ? header : content?.header}\n            backButton={\n              openedId !== null && (\n                <IconButton\n                  size=\"md\"\n                  aria-label=\"Back\"\n                  variant=\"tertiary\"\n                  marginLeft={`calc(-1 * ${tokens.size.spacingSm})`}\n                  onPress={() => setOpenedId(null)}\n                >\n                  <ChevronLeft />\n                </IconButton>\n              )\n            }\n          />\n        }\n        body={\n          <ModalLayout.Body\n            noPadding\n            UNSAFE_style={{\n              paddingLeft: tokens.size.spacingMd.value,\n              paddingRight: tokens.size.spacingMd.value,\n            }}\n          >\n            <>\n              <View isHidden={openedId !== null}>{children}</View>\n              {openedId && content?.body}\n            </>\n          </ModalLayout.Body>\n        }\n      />\n    </Panel>\n  );\n};\n\nexport const SidebarPanelTrigger = ({\n  children,\n}: {\n  children: (triggerProps: any) => JSX.Element;\n}) => {\n  const context = useResponsiveSidebarContext();\n  if (!context) {\n    throw new Error(\n      '<Sidebar.PanelTrigger> should be rendered inside a <Sidebar.ResponsiveProvider>'\n    );\n  }\n  const isCollapsed = useIsSidebarCollapsed();\n  const panelTriggerProps = {\n    onPress: () => {\n      context.setPanelOpen(true);\n    },\n  };\n\n  return isCollapsed ? children(panelTriggerProps) : null;\n};\n"],"names":[],"mappings":"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"}

package/build/esm/Sidebar/src/ResponsiveSidebarContext.js

@@ -1,4 +1,4 @@
-import { useControlledState } from '@react-stately/utils';
+import { useControlledState } from 'react-stately/useControlledState';
 import { useMatchedBreakpoints } from '@danske/sapphire-react';
 import React, { useContext } from 'react';
 
@@ -28,14 +28,22 @@ const ResponsiveSidebarProvider = ({
   onPanelOpenChange,
   children
 }) => {
-  const [isOpen, setOpen] = useControlledState(isPanelOpen, defaultIsPanelOpen != null ? defaultIsPanelOpen : false, onPanelOpenChange);
-  return /* @__PURE__ */ React.createElement(ResponsiveSidebarContext.Provider, {
-    value: {
-      isPanelOpen: isOpen,
-      setPanelOpen: setOpen,
-      collapsed
-    }
-  }, children);
+  const [isOpen, setOpen] = useControlledState(
+    isPanelOpen,
+    defaultIsPanelOpen ?? false,
+    onPanelOpenChange
+  );
+  return /* @__PURE__ */ React.createElement(
+    ResponsiveSidebarContext.Provider,
+    {
+      value: {
+        isPanelOpen: isOpen,
+        setPanelOpen: setOpen,
+        collapsed
+      }
+    },
+    children
+  );
 };
 
 export { ResponsiveSidebarContext, ResponsiveSidebarProvider, useIsSidebarCollapsed, useResponsiveSidebarContext };

package/build/esm/Sidebar/src/ResponsiveSidebarContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveSidebarContext.js","sources":["../../../../src/Sidebar/src/ResponsiveSidebarContext.tsx"],"sourcesContent":["import { useControlledState } from '@react-stately/utils';\nimport { BreakpointKey, useMatchedBreakpoints } from '@danske/sapphire-react';\nimport React, { ReactNode, useContext } from 'react';\n\nexport interface ResponsiveSidebarContextValue {\n  isPanelOpen: boolean;\n  setPanelOpen: (open: boolean) => void;\n  collapsed: boolean | BreakpointKey | undefined;\n}\n\nexport const ResponsiveSidebarContext =\n  React.createContext<ResponsiveSidebarContextValue | null>(null);\n\nexport function useResponsiveSidebarContext() {\n  return useContext(ResponsiveSidebarContext);\n}\n\n/**\n * Hook to determine if the sidebar should be collapsed.\n * Returns true if collapsed, false if expanded, or null if not in responsive mode.\n */\nexport function useIsSidebarCollapsed(): boolean | null {\n  const context = useContext(ResponsiveSidebarContext);\n  const matchedBreakpoints: string[] = useMatchedBreakpoints();\n\n  if (!context) {\n    return null;\n  }\n\n  const { collapsed } = context;\n\n  // If collapsed is a boolean, use it directly\n  if (typeof collapsed === 'boolean') {\n    return collapsed;\n  }\n\n  // If collapsed is a breakpoint string, check if we're below that breakpoint\n  if (typeof collapsed === 'string') {\n    return !matchedBreakpoints.includes(collapsed);\n  }\n\n  // If collapsed is undefined, default to 'md' breakpoint behavior\n  return !matchedBreakpoints.includes('md');\n}\n\nexport const ResponsiveSidebarProvider = ({\n  collapsed,\n  isPanelOpen,\n  defaultIsPanelOpen,\n  onPanelOpenChange,\n  children,\n}: {\n  /**\n   * Controls whether the sidebar is collapsed.\n   * - When `true`: sidebar is always collapsed (shows as panel)\n   * - When `false`: sidebar is always expanded (shows as sidebar)\n   * - When a breakpoint string (e.g., 'md', 'lg'): automatically collapses below that breakpoint\n   * - When `undefined`: defaults to 'md' breakpoint behavior (collapses below medium screens)\n   * @default undefined (equivalent to 'md')\n   */\n  collapsed?: boolean | BreakpointKey;\n\n  /**\n   * If the sidebar panel is open (controlled)\n   */\n  isPanelOpen?: boolean;\n\n  /**\n   * The default state of the panel (uncontrolled)\n   */\n  defaultIsPanelOpen?: boolean;\n\n  /**\n   * Callback for when the state of the panel changes\n   */\n  onPanelOpenChange?: (open: boolean) => void;\n  children: ReactNode;\n}) => {\n  const [isOpen, setOpen] = useControlledState<boolean>(\n    isPanelOpen,\n    defaultIsPanelOpen ?? false,\n    onPanelOpenChange\n  );\n\n  return (\n    <ResponsiveSidebarContext.Provider\n      value={{\n        isPanelOpen: isOpen,\n        setPanelOpen: setOpen,\n        collapsed,\n      }}\n    >\n      {children}\n    </ResponsiveSidebarContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;AAUa,MAAA,wBAAA,GACX,MAAM,aAAoD,CAAA,IAAA,EAAA;AAEd,SAAA,2BAAA,GAAA;AAC5C,EAAA,OAAO,UAAW,CAAA,wBAAA,CAAA,CAAA;AAAA,CAAA;AAOoC,SAAA,qBAAA,GAAA;AACtD,EAAA,MAAM,UAAU,UAAW,CAAA,wBAAA,CAAA,CAAA;AAC3B,EAAA,MAAM,kBAA+B,GAAA,qBAAA,EAAA,CAAA;AAErC,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAGT,EAAA,MAAM,EAAE,SAAc,EAAA,GAAA,OAAA,CAAA;AAGtB,EAAI,IAAA,OAAO,cAAc,SAAW,EAAA;AAClC,IAAO,OAAA,SAAA,CAAA;AAAA,GAAA;AAIT,EAAI,IAAA,OAAO,cAAc,QAAU,EAAA;AACjC,IAAO,OAAA,CAAC,mBAAmB,QAAS,CAAA,SAAA,CAAA,CAAA;AAAA,GAAA;AAItC,EAAO,OAAA,CAAC,mBAAmB,QAAS,CAAA,IAAA,CAAA,CAAA;AAAA,CAAA;AAG/B,MAAM,4BAA4B,CAAC;AAAA,EACxC,SAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,CA2BI,KAAA;AACJ,EAAA,MAAM,CAAC,MAAQ,EAAA,OAAA,CAAA,GAAW,kBACxB,CAAA,WAAA,EACA,kDAAsB,KACtB,EAAA,iBAAA,CAAA,CAAA;AAGF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,yBAAyB,QAA1B,EAAA;AAAA,IACE,KAAO,EAAA;AAAA,MACL,WAAa,EAAA,MAAA;AAAA,MACb,YAAc,EAAA,OAAA;AAAA,MACd,SAAA;AAAA,KAAA;AAAA,GAGD,EAAA,QAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"ResponsiveSidebarContext.js","sources":["../../../../src/Sidebar/src/ResponsiveSidebarContext.tsx"],"sourcesContent":["import { useControlledState } from 'react-stately/useControlledState';\nimport { BreakpointKey, useMatchedBreakpoints } from '@danske/sapphire-react';\nimport React, { ReactNode, useContext } from 'react';\n\nexport interface ResponsiveSidebarContextValue {\n  isPanelOpen: boolean;\n  setPanelOpen: (open: boolean) => void;\n  collapsed: boolean | BreakpointKey | undefined;\n}\n\nexport const ResponsiveSidebarContext =\n  React.createContext<ResponsiveSidebarContextValue | null>(null);\n\nexport function useResponsiveSidebarContext() {\n  return useContext(ResponsiveSidebarContext);\n}\n\n/**\n * Hook to determine if the sidebar should be collapsed.\n * Returns true if collapsed, false if expanded, or null if not in responsive mode.\n */\nexport function useIsSidebarCollapsed(): boolean | null {\n  const context = useContext(ResponsiveSidebarContext);\n  const matchedBreakpoints: string[] = useMatchedBreakpoints();\n\n  if (!context) {\n    return null;\n  }\n\n  const { collapsed } = context;\n\n  // If collapsed is a boolean, use it directly\n  if (typeof collapsed === 'boolean') {\n    return collapsed;\n  }\n\n  // If collapsed is a breakpoint string, check if we're below that breakpoint\n  if (typeof collapsed === 'string') {\n    return !matchedBreakpoints.includes(collapsed);\n  }\n\n  // If collapsed is undefined, default to 'md' breakpoint behavior\n  return !matchedBreakpoints.includes('md');\n}\n\nexport const ResponsiveSidebarProvider = ({\n  collapsed,\n  isPanelOpen,\n  defaultIsPanelOpen,\n  onPanelOpenChange,\n  children,\n}: {\n  /**\n   * Controls whether the sidebar is collapsed.\n   * - When `true`: sidebar is always collapsed (shows as panel)\n   * - When `false`: sidebar is always expanded (shows as sidebar)\n   * - When a breakpoint string (e.g., 'md', 'lg'): automatically collapses below that breakpoint\n   * - When `undefined`: defaults to 'md' breakpoint behavior (collapses below medium screens)\n   * @default undefined (equivalent to 'md')\n   */\n  collapsed?: boolean | BreakpointKey;\n\n  /**\n   * If the sidebar panel is open (controlled)\n   */\n  isPanelOpen?: boolean;\n\n  /**\n   * The default state of the panel (uncontrolled)\n   */\n  defaultIsPanelOpen?: boolean;\n\n  /**\n   * Callback for when the state of the panel changes\n   */\n  onPanelOpenChange?: (open: boolean) => void;\n  children: ReactNode;\n}) => {\n  const [isOpen, setOpen] = useControlledState<boolean>(\n    isPanelOpen,\n    defaultIsPanelOpen ?? false,\n    onPanelOpenChange\n  );\n\n  return (\n    <ResponsiveSidebarContext.Provider\n      value={{\n        isPanelOpen: isOpen,\n        setPanelOpen: setOpen,\n        collapsed,\n      }}\n    >\n      {children}\n    </ResponsiveSidebarContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;AAUO,MAAM,wBAAA,GACX,KAAA,CAAM,aAAA,CAAoD,IAAI;AAEzD,SAAS,2BAAA,GAA8B;AAC5C,EAAA,OAAO,WAAW,wBAAwB,CAAA;AAC5C;AAMO,SAAS,qBAAA,GAAwC;AACtD,EAAA,MAAM,OAAA,GAAU,WAAW,wBAAwB,CAAA;AACnD,EAAA,MAAM,qBAA+B,qBAAA,EAAsB;AAE3D,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,WAAU,GAAI,OAAA;AAGtB,EAAA,IAAI,OAAO,cAAc,SAAA,EAAW;AAClC,IAAA,OAAO,SAAA;AAAA,EACT;AAGA,EAAA,IAAI,OAAO,cAAc,QAAA,EAAU;AACjC,IAAA,OAAO,CAAC,kBAAA,CAAmB,QAAA,CAAS,SAAS,CAAA;AAAA,EAC/C;AAGA,EAAA,OAAO,CAAC,kBAAA,CAAmB,QAAA,CAAS,IAAI,CAAA;AAC1C;AAEO,MAAM,4BAA4B,CAAC;AAAA,EACxC,SAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAA,KA0BM;AACJ,EAAA,MAAM,CAAC,MAAA,EAAQ,OAAO,CAAA,GAAI,kBAAA;AAAA,IACxB,WAAA;AAAA,IACA,kBAAA,IAAsB,KAAA;AAAA,IACtB;AAAA,GACF;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,wBAAA,CAAyB,QAAA;AAAA,IAAzB;AAAA,MACC,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,MAAA;AAAA,QACb,YAAA,EAAc,OAAA;AAAA,QACd;AAAA;AACF,KAAA;AAAA,IAEC;AAAA,GACH;AAEJ;;;;"}

package/build/esm/Sidebar/src/SecondarySidebarContext.js

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { useControlledState } from '@react-stately/utils';
+import { useControlledState } from 'react-stately/useControlledState';
 
 const SecondarySidebarContext = React.createContext(null);
 const useSecondarySidebarContext = () => {
@@ -16,19 +16,22 @@ const SecondarySidebarProvider = ({
   themeVariant,
   children
 }) => {
-  var _a, _b, _c, _d;
   const context = useContext(SecondarySidebarContext);
-  const [secondarySidebarId, setSecondarySidebarId] = useControlledState(openedId, defaultOpenedId != null ? defaultOpenedId : null, onOpenedIdChange);
+  const [secondarySidebarId, setSecondarySidebarId] = useControlledState(openedId, defaultOpenedId ?? null, onOpenedIdChange);
   const [content, setContent] = useState(null);
-  return /* @__PURE__ */ React.createElement(SecondarySidebarContext.Provider, {
-    value: {
-      openedId: (_a = context == null ? void 0 : context.openedId) != null ? _a : secondarySidebarId,
-      setOpenedId: (_b = context == null ? void 0 : context.setOpenedId) != null ? _b : setSecondarySidebarId,
-      content: (_c = context == null ? void 0 : context.content) != null ? _c : content,
-      setContent: (_d = context == null ? void 0 : context.setContent) != null ? _d : setContent,
-      themeVariant: themeVariant != null ? themeVariant : context == null ? void 0 : context.themeVariant
-    }
-  }, children);
+  return /* @__PURE__ */ React.createElement(
+    SecondarySidebarContext.Provider,
+    {
+      value: {
+        openedId: context?.openedId ?? secondarySidebarId,
+        setOpenedId: context?.setOpenedId ?? setSecondarySidebarId,
+        content: context?.content ?? content,
+        setContent: context?.setContent ?? setContent,
+        themeVariant: themeVariant ?? context?.themeVariant
+      }
+    },
+    children
+  );
 };
 
 export { SecondarySidebarContext, SecondarySidebarProvider, useSecondarySidebarContext };

package/build/esm/Sidebar/src/SecondarySidebarContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecondarySidebarContext.js","sources":["../../../../src/Sidebar/src/SecondarySidebarContext.tsx"],"sourcesContent":["import React, { ReactNode, useContext, useState } from 'react';\nimport { ThemeVariant } from '@danske/sapphire-react';\nimport { useControlledState } from '@react-stately/utils';\n\nexport type SecondarySidebarContent = {\n  header: ReactNode;\n  body: ReactNode;\n} | null;\n\nexport interface SecondarySidebarContextValue {\n  content: SecondarySidebarContent;\n  setContent: (content: SecondarySidebarContent) => void;\n  openedId: string | null;\n  setOpenedId: (id: string | null) => void;\n  themeVariant: ThemeVariant | undefined;\n}\n\nexport const SecondarySidebarContext =\n  React.createContext<SecondarySidebarContextValue | null>(null);\n\nexport const useSecondarySidebarContext = (): SecondarySidebarContextValue => {\n  const context = useContext(SecondarySidebarContext);\n  if (context) {\n    return context;\n  }\n  throw new Error('This should be rendered inside a <Sidebar />.');\n};\n\nexport const SecondarySidebarProvider = ({\n  openedId,\n  defaultOpenedId,\n  onOpenedIdChange,\n  themeVariant,\n  children,\n}: {\n  openedId?: string | null;\n  defaultOpenedId?: string | null;\n  onOpenedIdChange?: (id: string | null) => void;\n  themeVariant?: ThemeVariant;\n  children: ReactNode;\n}) => {\n  const context = useContext(SecondarySidebarContext);\n\n  const [secondarySidebarId, setSecondarySidebarId] = useControlledState<\n    string | null\n  >(openedId, defaultOpenedId ?? null, onOpenedIdChange);\n\n  const [content, setContent] = useState<SecondarySidebarContent>(null);\n\n  return (\n    <SecondarySidebarContext.Provider\n      value={{\n        openedId: context?.openedId ?? secondarySidebarId,\n        setOpenedId: context?.setOpenedId ?? setSecondarySidebarId,\n        content: context?.content ?? content,\n        setContent: context?.setContent ?? setContent,\n        themeVariant: themeVariant ?? context?.themeVariant,\n      }}\n    >\n      {children}\n    </SecondarySidebarContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;AAiBa,MAAA,uBAAA,GACX,MAAM,aAAmD,CAAA,IAAA,EAAA;AAEpD,MAAM,6BAA6B,MAAoC;AAC5E,EAAA,MAAM,UAAU,UAAW,CAAA,uBAAA,CAAA,CAAA;AAC3B,EAAA,IAAI,OAAS,EAAA;AACX,IAAO,OAAA,OAAA,CAAA;AAAA,GAAA;AAET,EAAA,MAAM,IAAI,KAAM,CAAA,+CAAA,CAAA,CAAA;AAAA,EAAA;AAGX,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,CAOI,KAAA;AAxCN,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAyCE,EAAA,MAAM,UAAU,UAAW,CAAA,uBAAA,CAAA,CAAA;AAE3B,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAA,CAAA,GAAyB,kBAElD,CAAA,QAAA,EAAU,4CAAmB,IAAM,EAAA,gBAAA,CAAA,CAAA;AAErC,EAAM,MAAA,CAAC,OAAS,EAAA,UAAA,CAAA,GAAc,QAAkC,CAAA,IAAA,CAAA,CAAA;AAEhE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,wBAAwB,QAAzB,EAAA;AAAA,IACE,KAAO,EAAA;AAAA,MACL,QAAA,EAAU,CAAS,EAAA,GAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,QAAA,KAAT,IAAqB,GAAA,EAAA,GAAA,kBAAA;AAAA,MAC/B,WAAA,EAAa,CAAS,EAAA,GAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,WAAA,KAAT,IAAwB,GAAA,EAAA,GAAA,qBAAA;AAAA,MACrC,OAAA,EAAS,CAAS,EAAA,GAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,OAAA,KAAT,IAAoB,GAAA,EAAA,GAAA,OAAA;AAAA,MAC7B,UAAA,EAAY,CAAS,EAAA,GAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,UAAA,KAAT,IAAuB,GAAA,EAAA,GAAA,UAAA;AAAA,MACnC,YAAA,EAAc,sCAAgB,OAAS,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,YAAA;AAAA,KAAA;AAAA,GAGxC,EAAA,QAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"SecondarySidebarContext.js","sources":["../../../../src/Sidebar/src/SecondarySidebarContext.tsx"],"sourcesContent":["import React, { ReactNode, useContext, useState } from 'react';\nimport { ThemeVariant } from '@danske/sapphire-react';\nimport { useControlledState } from 'react-stately/useControlledState';\n\nexport type SecondarySidebarContent = {\n  header: ReactNode;\n  body: ReactNode;\n} | null;\n\nexport interface SecondarySidebarContextValue {\n  content: SecondarySidebarContent;\n  setContent: (content: SecondarySidebarContent) => void;\n  openedId: string | null;\n  setOpenedId: (id: string | null) => void;\n  themeVariant: ThemeVariant | undefined;\n}\n\nexport const SecondarySidebarContext =\n  React.createContext<SecondarySidebarContextValue | null>(null);\n\nexport const useSecondarySidebarContext = (): SecondarySidebarContextValue => {\n  const context = useContext(SecondarySidebarContext);\n  if (context) {\n    return context;\n  }\n  throw new Error('This should be rendered inside a <Sidebar />.');\n};\n\nexport const SecondarySidebarProvider = ({\n  openedId,\n  defaultOpenedId,\n  onOpenedIdChange,\n  themeVariant,\n  children,\n}: {\n  openedId?: string | null;\n  defaultOpenedId?: string | null;\n  onOpenedIdChange?: (id: string | null) => void;\n  themeVariant?: ThemeVariant;\n  children: ReactNode;\n}) => {\n  const context = useContext(SecondarySidebarContext);\n\n  const [secondarySidebarId, setSecondarySidebarId] = useControlledState<\n    string | null\n  >(openedId, defaultOpenedId ?? null, onOpenedIdChange);\n\n  const [content, setContent] = useState<SecondarySidebarContent>(null);\n\n  return (\n    <SecondarySidebarContext.Provider\n      value={{\n        openedId: context?.openedId ?? secondarySidebarId,\n        setOpenedId: context?.setOpenedId ?? setSecondarySidebarId,\n        content: context?.content ?? content,\n        setContent: context?.setContent ?? setContent,\n        themeVariant: themeVariant ?? context?.themeVariant,\n      }}\n    >\n      {children}\n    </SecondarySidebarContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;AAiBO,MAAM,uBAAA,GACX,KAAA,CAAM,aAAA,CAAmD,IAAI;AAExD,MAAM,6BAA6B,MAAoC;AAC5E,EAAA,MAAM,OAAA,GAAU,WAAW,uBAAuB,CAAA;AAClD,EAAA,IAAI,OAAA,EAAS;AACX,IAAA,OAAO,OAAA;AAAA,EACT;AACA,EAAA,MAAM,IAAI,MAAM,+CAA+C,CAAA;AACjE;AAEO,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAMM;AACJ,EAAA,MAAM,OAAA,GAAU,WAAW,uBAAuB,CAAA;AAElD,EAAA,MAAM,CAAC,oBAAoB,qBAAqB,CAAA,GAAI,mBAElD,QAAA,EAAU,eAAA,IAAmB,MAAM,gBAAgB,CAAA;AAErD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkC,IAAI,CAAA;AAEpE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA,CAAwB,QAAA;AAAA,IAAxB;AAAA,MACC,KAAA,EAAO;AAAA,QACL,QAAA,EAAU,SAAS,QAAA,IAAY,kBAAA;AAAA,QAC/B,WAAA,EAAa,SAAS,WAAA,IAAe,qBAAA;AAAA,QACrC,OAAA,EAAS,SAAS,OAAA,IAAW,OAAA;AAAA,QAC7B,UAAA,EAAY,SAAS,UAAA,IAAc,UAAA;AAAA,QACnC,YAAA,EAAc,gBAAgB,OAAA,EAAS;AAAA;AACzC,KAAA;AAAA,IAEC;AAAA,GACH;AAEJ;;;;"}

package/build/esm/Sidebar/src/Section.js

@@ -2,64 +2,51 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
 import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
-import { useListBoxSection } from '@react-aria/listbox';
-import { filterDOMProps } from '@react-aria/utils';
+import { useListBoxSection } from 'react-aria/useListBox';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarSection = (_a) => {
-  var _b = _a, {
-    title,
-    "aria-label": label,
-    children
-  } = _b, props = __objRest(_b, [
-    "title",
-    "aria-label",
-    "children"
-  ]);
+const SidebarSection = ({
+  title,
+  "aria-label": label,
+  children,
+  ...props
+}) => {
   useThemeCheck();
   const { styleProps } = useSapphireStyleProps(props);
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: title,
     "aria-label": label
   });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("li", {
-    role: "separator",
-    className: clsx(styles["sapphire-sidebar__separator"])
-  }), /* @__PURE__ */ React.createElement("li", __spreadValues(__spreadValues(__spreadValues({}, itemProps), styleProps), filterDOMProps(props, { global: true })), title && /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, headingProps), {
-    className: clsx(styles["sapphire-sidebar__section-header"])
-  }), title), /* @__PURE__ */ React.createElement("ul", __spreadProps(__spreadValues({}, groupProps), {
-    className: clsx(styles["sapphire-sidebar__section"])
-  }), children)));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      role: "separator",
+      className: clsx(styles["sapphire-sidebar__separator"])
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      ...itemProps,
+      ...styleProps,
+      ...filterDOMProps(props, { global: true })
+    },
+    title && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...headingProps,
+        className: clsx(styles["sapphire-sidebar__section-header"])
+      },
+      title
+    ),
+    /* @__PURE__ */ React.createElement(
+      "ul",
+      {
+        ...groupProps,
+        className: clsx(styles["sapphire-sidebar__section"])
+      },
+      children
+    )
+  ));
 };
 
 export { SidebarSection };

package/build/esm/Sidebar/src/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../../../src/Sidebar/src/Section.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport { useListBoxSection } from '@react-aria/listbox';\nimport { filterDOMProps } from '@react-aria/utils';\nimport { DOMProps } from '@react-types/shared';\n\nexport type SidebarSectionProps = DOMProps &\n  SapphireStyleProps & {\n    /**\n     * Section title\n     * If not provided, please pass the `aria-label`\n     */\n    title?: string;\n\n    /**\n     * Section aria title\n     */\n    'aria-label'?: string;\n\n    children?: ReactNode;\n  };\n\nexport const SidebarSection = ({\n  title,\n  'aria-label': label,\n  children,\n  ...props\n}: SidebarSectionProps) => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const { itemProps, headingProps, groupProps } = useListBoxSection({\n    heading: title,\n    'aria-label': label,\n  });\n\n  return (\n    <>\n      <li\n        role=\"separator\"\n        className={clsx(styles['sapphire-sidebar__separator'])}\n      ></li>\n      <li\n        {...itemProps}\n        {...styleProps}\n        {...filterDOMProps(props, { global: true })}\n      >\n        {title && (\n          <div\n            {...headingProps}\n            className={clsx(styles['sapphire-sidebar__section-header'])}\n          >\n            {title}\n          </div>\n        )}\n        <ul\n          {...groupProps}\n          className={clsx(styles['sapphire-sidebar__section'])}\n        >\n          {children}\n        </ul>\n      </li>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4Ba,MAAA,cAAA,GAAiB,CAAC,EAKJ,KAAA;AALI,EAC7B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,YAAc,EAAA,KAAA;AAAA,IACd,QAAA;AAAA,GAH6B,GAAA,EAAA,EAI1B,kBAJ0B,EAI1B,EAAA;AAAA,IAHH,OAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,YAAc,EAAA,UAAA,EAAA,GAAe,iBAAkB,CAAA;AAAA,IAChE,OAAS,EAAA,KAAA;AAAA,IACT,YAAc,EAAA,KAAA;AAAA,GAAA,CAAA,CAAA;AAGhB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,IAAD,EAAA;AAAA,IACE,IAAK,EAAA,WAAA;AAAA,IACL,SAAA,EAAW,KAAK,MAAO,CAAA,6BAAA,CAAA,CAAA;AAAA,GAAA,CAAA,kBAExB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAD,cACM,CAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EAAA,SAAA,CAAA,EACA,aACA,cAAe,CAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,IAEnC,EAAA,CAAA,CAAA,EAAA,KAAA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCACM,YADN,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,KAAK,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAAA,CAAA,EAEtB,KAGL,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,KAAK,MAAO,CAAA,2BAAA,CAAA,CAAA;AAAA,GAEtB,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Section.js","sources":["../../../../src/Sidebar/src/Section.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport { useListBoxSection } from 'react-aria/useListBox';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { DOMProps } from '@react-types/shared';\n\nexport type SidebarSectionProps = DOMProps &\n  SapphireStyleProps & {\n    /**\n     * Section title\n     * If not provided, please pass the `aria-label`\n     */\n    title?: string;\n\n    /**\n     * Section aria title\n     */\n    'aria-label'?: string;\n\n    children?: ReactNode;\n  };\n\nexport const SidebarSection = ({\n  title,\n  'aria-label': label,\n  children,\n  ...props\n}: SidebarSectionProps) => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const { itemProps, headingProps, groupProps } = useListBoxSection({\n    heading: title,\n    'aria-label': label,\n  });\n\n  return (\n    <>\n      <li\n        role=\"separator\"\n        className={clsx(styles['sapphire-sidebar__separator'])}\n      ></li>\n      <li\n        {...itemProps}\n        {...styleProps}\n        {...filterDOMProps(props, { global: true })}\n      >\n        {title && (\n          <div\n            {...headingProps}\n            className={clsx(styles['sapphire-sidebar__section-header'])}\n          >\n            {title}\n          </div>\n        )}\n        <ul\n          {...groupProps}\n          className={clsx(styles['sapphire-sidebar__section'])}\n        >\n          {children}\n        </ul>\n      </li>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA4BO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,KAAA;AAAA,EACA,YAAA,EAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,SAAA,EAAW,YAAA,EAAc,UAAA,KAAe,iBAAA,CAAkB;AAAA,IAChE,OAAA,EAAS,KAAA;AAAA,IACT,YAAA,EAAc;AAAA,GACf,CAAA;AAED,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,WAAA;AAAA,MACL,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,6BAA6B,CAAC;AAAA;AAAA,GACtD,kBACD,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACH,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM;AAAA,KAAA;AAAA,IAEzC,KAAA,oBACC,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACJ,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,kCAAkC,CAAC;AAAA,OAAA;AAAA,MAEzD;AAAA,KACH;AAAA,oBAEF,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,2BAA2B,CAAC;AAAA,OAAA;AAAA,MAElD;AAAA;AACH,GAEJ,CAAA;AAEJ;;;;"}

package/build/esm/Sidebar/src/Sidebar.js

@@ -1,114 +1,86 @@
 import clsx from 'clsx';
 import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
-import { useThemeCheck, useSapphireStyleProps, ThemeRoot } from '@danske/sapphire-react';
+import { useThemeCheck, ThemeRoot, useSapphireStyleProps } from '@danske/sapphire-react';
 import React from 'react';
-import { mergeProps, filterDOMProps } from '@react-aria/utils';
-import { useFocusWithin } from '@react-aria/interactions';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import { mergeProps } from 'react-aria/mergeProps';
+import { useFocusWithin } from 'react-aria/useFocusWithin';
 import { SidebarPanel } from './Panel.js';
 import { useSidebar } from './useSidebar.js';
 import { SecondarySidebarProvider } from './SecondarySidebarContext.js';
 import { useResponsiveSidebarContext, useIsSidebarCollapsed } from './ResponsiveSidebarContext.js';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Sidebar = (_a) => {
-  var _b = _a, {
-    themeVariant,
-    openedSecondarySidebar,
-    defaultOpenedSecondarySidebar,
-    onSecondarySidebarChange,
-    secondarySidebarThemeVariant,
-    children
-  } = _b, props = __objRest(_b, [
-    "themeVariant",
-    "openedSecondarySidebar",
-    "defaultOpenedSecondarySidebar",
-    "onSecondarySidebarChange",
-    "secondarySidebarThemeVariant",
-    "children"
-  ]);
+const Sidebar = ({
+  themeVariant,
+  openedSecondarySidebar,
+  defaultOpenedSecondarySidebar,
+  onSecondarySidebarChange,
+  secondarySidebarThemeVariant,
+  children,
+  ...props
+}) => {
   useThemeCheck();
-  return /* @__PURE__ */ React.createElement(SecondarySidebarProvider, {
-    openedId: openedSecondarySidebar,
-    defaultOpenedId: defaultOpenedSecondarySidebar,
-    onOpenedIdChange: onSecondarySidebarChange,
-    themeVariant: secondarySidebarThemeVariant
-  }, /* @__PURE__ */ React.createElement(WithThemeRoot, {
-    themeVariant
-  }, /* @__PURE__ */ React.createElement(SidebarContent, __spreadValues({}, props), children)));
+  return /* @__PURE__ */ React.createElement(
+    SecondarySidebarProvider,
+    {
+      openedId: openedSecondarySidebar,
+      defaultOpenedId: defaultOpenedSecondarySidebar,
+      onOpenedIdChange: onSecondarySidebarChange,
+      themeVariant: secondarySidebarThemeVariant
+    },
+    /* @__PURE__ */ React.createElement(WithThemeRoot, { themeVariant }, /* @__PURE__ */ React.createElement(SidebarContent, { ...props }, children))
+  );
 };
-const SidebarContent = (_c) => {
-  var _d = _c, {
-    onBlurWithin,
-    onFocusWithin,
-    onFocusWithinChange,
-    closeOnBlurWithin = true,
-    header,
-    panelHeader,
-    children
-  } = _d, props = __objRest(_d, [
-    "onBlurWithin",
-    "onFocusWithin",
-    "onFocusWithinChange",
-    "closeOnBlurWithin",
-    "header",
-    "panelHeader",
-    "children"
-  ]);
+const SidebarContent = ({
+  onBlurWithin,
+  onFocusWithin,
+  onFocusWithinChange,
+  closeOnBlurWithin = true,
+  header,
+  panelHeader,
+  children,
+  ...props
+}) => {
   const { styleProps } = useSapphireStyleProps(props);
   const { sidebarProps } = useSidebar();
-  const { focusWithinProps } = useFocusWithin(mergeProps({
-    onBlurWithin,
-    onFocusWithin,
-    onFocusWithinChange
-  }, closeOnBlurWithin ? sidebarProps : {}));
+  const { focusWithinProps } = useFocusWithin(
+    mergeProps(
+      {
+        onBlurWithin,
+        onFocusWithin,
+        onFocusWithinChange
+      },
+      closeOnBlurWithin ? sidebarProps : {}
+    )
+  );
   const responsiveSidebarContext = useResponsiveSidebarContext();
   const isCollapsed = useIsSidebarCollapsed();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isCollapsed && /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, styleProps), filterDOMProps(props, { global: true })), focusWithinProps), {
-    className: clsx(styles["sapphire-sidebar"]),
-    tabIndex: -1
-  }), header, children), responsiveSidebarContext && /* @__PURE__ */ React.createElement(SidebarPanel, {
-    header: panelHeader
-  }, children));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !isCollapsed && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...styleProps,
+      ...filterDOMProps(props, { global: true }),
+      ...focusWithinProps,
+      className: clsx(styles["sapphire-sidebar"]),
+      tabIndex: -1
+    },
+    header,
+    children
+  ), responsiveSidebarContext && /* @__PURE__ */ React.createElement(SidebarPanel, { header: panelHeader }, children));
 };
 const WithThemeRoot = ({
   children,
   themeVariant
-}) => themeVariant ? /* @__PURE__ */ React.createElement(ThemeRoot, {
-  variant: themeVariant,
-  noSurface: true,
-  height: "100%",
-  width: "min-content"
-}, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+}) => themeVariant ? /* @__PURE__ */ React.createElement(
+  ThemeRoot,
+  {
+    variant: themeVariant,
+    noSurface: true,
+    height: "100%",
+    width: "min-content"
+  },
+  children
+) : /* @__PURE__ */ React.createElement(React.Fragment, null, children);
 
 export { Sidebar };
 //# sourceMappingURL=Sidebar.js.map