@danske/sapphire-react-lab 0.103.0 → 0.105.1

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

@@ -0,0 +1,133 @@
+import React, { useLayoutEffect, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
+import buttonStyles from '@danske/sapphire-css/components/button/button.module.css';
+import { Button } from '@danske/sapphire-react';
+import { FocusScope } from '@react-aria/focus';
+import { Transition } from 'react-transition-group';
+import { Sidebar as _Sidebar } from '../index.js';
+import { useId, mergeProps } from '@react-aria/utils';
+import { useSidebar } from './useSidebar.js';
+import { useSecondarySidebarContext } from './SecondarySidebarContext.js';
+import { 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 SidebarExpandableItem = React.forwardRef(function SidebarExpandableItem2(_a, ref) {
+  var _b = _a, {
+    id,
+    isActive,
+    body,
+    header,
+    children
+  } = _b, props = __objRest(_b, [
+    "id",
+    "isActive",
+    "body",
+    "header",
+    "children"
+  ]);
+  const { openedId, setContent, themeVariant } = useSecondarySidebarContext();
+  const isCollapsed = useIsSidebarCollapsed();
+  const { getExpandableItemProps, secondarySidebarProps } = useSidebar();
+  const itemId = useId(id);
+  const isOpen = openedId === itemId;
+  useLayoutEffect(() => {
+    if (isOpen) {
+      setContent({ header, body });
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ React.createElement("li", {
+    className: clsx(styles["sapphire-sidebar__nav-item"])
+  }, /* @__PURE__ */ React.createElement(Button, __spreadProps(__spreadValues({
+    variant: "tertiary",
+    "aria-current": isActive || void 0,
+    ref
+  }, mergeProps(getExpandableItemProps(itemId), props)), {
+    UNSAFE_className: clsx(buttonStyles["sapphire-button--stretch-left-align"], {
+      [buttonStyles["sapphire-button--selected"]]: isActive && !isOpen,
+      [buttonStyles["is-active"]]: isOpen
+    })
+  }), children), /* @__PURE__ */ React.createElement(SecondarySidebar, __spreadValues({
+    isOpen: isOpen && !isCollapsed,
+    header,
+    themeVariant
+  }, secondarySidebarProps), body));
+});
+const SecondarySidebar = ({
+  isOpen,
+  onClose,
+  onCloseTransitionDone,
+  themeVariant,
+  header,
+  children
+}) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose == null ? void 0 : onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ React.createElement(Transition, {
+    in: isOpen,
+    mountOnEnter: true,
+    nodeRef: ref,
+    unmountOnExit: true,
+    onExited: onCloseTransitionDone,
+    timeout: 200
+  }, (transitionState) => /* @__PURE__ */ React.createElement("div", {
+    ref,
+    className: clsx(styles["sapphire-sidebar__secondary-container"], {
+      [styles["sapphire-sidebar--slide-in"]]: true,
+      [styles["sapphire-sidebar--slide-out"]]: transitionState === "exiting"
+    })
+  }, /* @__PURE__ */ React.createElement(FocusScope, {
+    restoreFocus: true,
+    autoFocus: true
+  }, /* @__PURE__ */ React.createElement(_Sidebar, {
+    themeVariant,
+    closeOnBlurWithin: false,
+    header: /* @__PURE__ */ React.createElement(_Sidebar.Header, {
+      closeButtonProps: {
+        onPress: () => onClose == null ? void 0 : onClose()
+      }
+    }, header),
+    panelHeader: null
+  }, children))));
+};
+
+export { SidebarExpandableItem };
+//# sourceMappingURL=ExpandableItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableItem.js","sources":["../../../../src/Sidebar/src/ExpandableItem.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useLayoutEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport buttonStyles from '@danske/sapphire-css/components/button/button.module.css';\nimport { Button, ButtonProps, ThemeVariant } from '@danske/sapphire-react';\nimport { FocusScope } from '@react-aria/focus';\nimport { FocusableRef } from '@react-types/shared';\nimport { Transition } from 'react-transition-group';\nimport { Sidebar } from '..';\nimport { mergeProps, useId } from '@react-aria/utils';\nimport { useSidebar } from './useSidebar';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\nimport { useIsSidebarCollapsed } from './ResponsiveSidebarContext';\n\nexport type SidebarExpandableItemProps = Omit<\n  ButtonProps<'button'>,\n  'variant' | 'size' | 'elementType'\n> & {\n  /**\n   * If the link is currently active\n   */\n  isActive?: boolean;\n\n  /**\n   * The id of the group.\n   * Used in `onSecondarySidebarChange` or when the sidebar is controlled\n   */\n  id?: string;\n\n  /**\n   * Heading used for secondary sidebar\n   */\n  header: ReactNode;\n\n  /**\n   * Subitems (secondary sidebar)\n   */\n  body: ReactNode;\n  children?: ReactNode;\n};\n\nexport const SidebarExpandableItem = React.forwardRef(\n  function SidebarExpandableItem(\n    {\n      id,\n      isActive,\n      body,\n      header,\n      children,\n      ...props\n    }: SidebarExpandableItemProps,\n    ref: FocusableRef<HTMLAnchorElement>\n  ): React.JSX.Element {\n    const { openedId, setContent, themeVariant } = useSecondarySidebarContext();\n    const isCollapsed = useIsSidebarCollapsed();\n    const { getExpandableItemProps, secondarySidebarProps } = useSidebar();\n    const itemId = useId(id);\n    const isOpen = openedId === itemId;\n\n    useLayoutEffect(() => {\n      if (isOpen) {\n        setContent({ header, body });\n      }\n    }, [isOpen]);\n\n    return (\n      <li className={clsx(styles['sapphire-sidebar__nav-item'])}>\n        <Button\n          variant=\"tertiary\"\n          aria-current={isActive || undefined}\n          ref={ref}\n          {...mergeProps(\n            getExpandableItemProps(itemId),\n            props as ButtonProps<'button'>\n          )}\n          UNSAFE_className={clsx(\n            buttonStyles['sapphire-button--stretch-left-align'],\n            {\n              [buttonStyles['sapphire-button--selected']]: isActive && !isOpen,\n              [buttonStyles['is-active']]: isOpen,\n            }\n          )}\n        >\n          {children}\n        </Button>\n        <SecondarySidebar\n          isOpen={isOpen && !isCollapsed}\n          header={header}\n          themeVariant={themeVariant}\n          {...secondarySidebarProps}\n        >\n          {body}\n        </SecondarySidebar>\n      </li>\n    );\n  }\n);\n\nconst SecondarySidebar = ({\n  isOpen,\n  onClose,\n  onCloseTransitionDone,\n  themeVariant,\n  header,\n  children,\n}: {\n  isOpen: boolean;\n  onClose?: () => void;\n  onCloseTransitionDone?: () => void;\n  themeVariant?: ThemeVariant;\n  header: ReactNode;\n  children: ReactNode;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        onClose?.();\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [onClose]);\n\n  return (\n    <Transition\n      in={isOpen}\n      mountOnEnter\n      nodeRef={ref}\n      unmountOnExit\n      onExited={onCloseTransitionDone}\n      timeout={200}\n    >\n      {(transitionState) => (\n        <div\n          ref={ref}\n          className={clsx(styles['sapphire-sidebar__secondary-container'], {\n            [styles['sapphire-sidebar--slide-in']]: true,\n            [styles['sapphire-sidebar--slide-out']]:\n              transitionState === 'exiting',\n          })}\n        >\n          <FocusScope restoreFocus autoFocus>\n            <Sidebar\n              themeVariant={themeVariant}\n              closeOnBlurWithin={\n                false /* no focus management on nested sidebars */\n              }\n              header={\n                <Sidebar.Header\n                  closeButtonProps={{\n                    onPress: () => onClose?.(),\n                  }}\n                >\n                  {header}\n                </Sidebar.Header>\n              }\n              panelHeader={null}\n            >\n              {children}\n            </Sidebar>\n          </FocusScope>\n        </div>\n      )}\n    </Transition>\n  );\n};\n"],"names":["Sidebar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCO,MAAM,qBAAwB,GAAA,KAAA,CAAM,UACzC,CAAA,SAAA,sBAAA,CACE,IAQA,GACmB,EAAA;AATnB,EACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,EAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,GALF,GAAA,EAAA,EAMK,kBANL,EAMK,EAAA;AAAA,IALH,IAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAKF,EAAM,MAAA,EAAE,QAAU,EAAA,UAAA,EAAY,YAAiB,EAAA,GAAA,0BAAA,EAAA,CAAA;AAC/C,EAAA,MAAM,WAAc,GAAA,qBAAA,EAAA,CAAA;AACpB,EAAM,MAAA,EAAE,wBAAwB,qBAA0B,EAAA,GAAA,UAAA,EAAA,CAAA;AAC1D,EAAA,MAAM,SAAS,KAAM,CAAA,EAAA,CAAA,CAAA;AACrB,EAAA,MAAM,SAAS,QAAa,KAAA,MAAA,CAAA;AAE5B,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,MAAQ,EAAA;AACV,MAAA,UAAA,CAAW,EAAE,MAAQ,EAAA,IAAA,EAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAEtB,CAAC,MAAA,CAAA,CAAA,CAAA;AAEJ,EAAA,2CACG,IAAD,EAAA;AAAA,IAAI,SAAA,EAAW,KAAK,MAAO,CAAA,4BAAA,CAAA,CAAA;AAAA,GAAA,sCACxB,MAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,OAAQ,EAAA,UAAA;AAAA,IACR,gBAAc,QAAY,IAAA,KAAA,CAAA;AAAA,IAC1B,GAAA;AAAA,GACI,EAAA,UAAA,CACF,sBAAuB,CAAA,MAAA,CAAA,EACvB,KANJ,CAAA,CAAA,EAAA;AAAA,IAQE,gBAAA,EAAkB,IAChB,CAAA,YAAA,CAAa,qCACb,CAAA,EAAA;AAAA,MACG,CAAA,YAAA,CAAa,2BAA+B,CAAA,GAAA,QAAA,IAAY,CAAC,MAAA;AAAA,MAAA,CACzD,aAAa,WAAe,CAAA,GAAA,MAAA;AAAA,KAAA,CAAA;AAAA,GAIhC,CAAA,EAAA,QAAA,CAAA,sCAEF,gBAAD,EAAA,cAAA,CAAA;AAAA,IACE,MAAA,EAAQ,UAAU,CAAC,WAAA;AAAA,IACnB,MAAA;AAAA,IACA,YAAA;AAAA,GAAA,EACI,qBAEH,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA;AAAA,CAAA,EAAA;AAOX,MAAM,mBAAmB,CAAC;AAAA,EACxB,MAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAA;AAAA,EACA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,CAQI,KAAA;AACJ,EAAA,MAAM,MAAM,MAAuB,CAAA,IAAA,CAAA,CAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,aAAA,GAAgB,CAAC,CAAqB,KAAA;AAC1C,MAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,QAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA,CAAA;AAIJ,IAAA,QAAA,CAAS,iBAAiB,SAAW,EAAA,aAAA,CAAA,CAAA;AACrC,IAAO,OAAA,MAAM,QAAS,CAAA,mBAAA,CAAoB,SAAW,EAAA,aAAA,CAAA,CAAA;AAAA,GAAA,EACpD,CAAC,OAAA,CAAA,CAAA,CAAA;AAEJ,EAAA,2CACG,UAAD,EAAA;AAAA,IACE,EAAI,EAAA,MAAA;AAAA,IACJ,YAAY,EAAA,IAAA;AAAA,IACZ,OAAS,EAAA,GAAA;AAAA,IACT,aAAa,EAAA,IAAA;AAAA,IACb,QAAU,EAAA,qBAAA;AAAA,IACV,OAAS,EAAA,GAAA;AAAA,GAER,EAAA,CAAC,eACA,qBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IACE,GAAA;AAAA,IACA,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,uCAA0C,CAAA,EAAA;AAAA,MAAA,CAC9D,OAAO,4BAAgC,CAAA,GAAA,IAAA;AAAA,MACvC,CAAA,MAAA,CAAO,iCACN,eAAoB,KAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,sCAGvB,UAAD,EAAA;AAAA,IAAY,YAAY,EAAA,IAAA;AAAA,IAAC,SAAS,EAAA,IAAA;AAAA,GAAA,sCAC/BA,QAAD,EAAA;AAAA,IACE,YAAA;AAAA,IACA,iBACE,EAAA,KAAA;AAAA,IAEF,MAAA,kBACG,KAAA,CAAA,aAAA,CAAAA,QAAA,CAAQ,MAAT,EAAA;AAAA,MACE,gBAAkB,EAAA;AAAA,QAChB,SAAS,MAAM,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA;AAAA,OAAA;AAAA,KAGhB,EAAA,MAAA,CAAA;AAAA,IAGL,WAAa,EAAA,IAAA;AAAA,GAEZ,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import clsx from 'clsx';
+import { filterDOMProps } from '@react-aria/utils';
+import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
+import { IconButton } from '@danske/sapphire-react';
+import { CloseLarge } from '@danske/sapphire-icons/react';
+
+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 SidebarHeader = (_a) => {
+  var _b = _a, {
+    children,
+    closeButtonProps
+  } = _b, props = __objRest(_b, [
+    "children",
+    "closeButtonProps"
+  ]);
+  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, filterDOMProps(props)), {
+    className: clsx(styles["sapphire-sidebar__header"])
+  }), children, closeButtonProps && /* @__PURE__ */ React.createElement(IconButton, __spreadProps(__spreadValues({}, closeButtonProps), {
+    "aria-label": "Close"
+  }), /* @__PURE__ */ React.createElement(CloseLarge, null)));
+};
+
+export { SidebarHeader };
+//# sourceMappingURL=Header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../../../../src/Sidebar/src/Header.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from '@react-aria/utils';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport { IconButton, IconButtonProps } from '@danske/sapphire-react';\nimport { CloseLarge } from '@danske/sapphire-icons/react';\n\nexport interface SidebarHeaderProps extends DOMProps {\n  children: ReactNode;\n  /**\n   * Props for the close button\n   * If none provided, close button won't show\n   */\n  closeButtonProps?: Omit<\n    IconButtonProps<'button'>,\n    'children' | 'aria-label' | 'aria-hidden'\n  >;\n}\n\nexport const SidebarHeader = ({\n  children,\n  closeButtonProps,\n  ...props\n}: SidebarHeaderProps): React.JSX.Element => {\n  return (\n    <div\n      {...filterDOMProps(props)}\n      className={clsx(styles['sapphire-sidebar__header'])}\n    >\n      {children}\n      {closeButtonProps && (\n        <IconButton {...closeButtonProps} aria-label=\"Close\">\n          <CloseLarge />\n        </IconButton>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBa,MAAA,aAAA,GAAgB,CAAC,EAIe,KAAA;AAJf,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,gBAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,UAAA;AAAA,IACA,kBAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,cAAA,CAAe,KADrB,CAAA,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,KAAK,MAAO,CAAA,0BAAA,CAAA,CAAA;AAAA,GAAA,CAAA,EAEtB,QACA,EAAA,gBAAA,oBACE,KAAA,CAAA,aAAA,CAAA,UAAA,EAAD,iCAAgB,gBAAhB,CAAA,EAAA;AAAA,IAAkC,YAAW,EAAA,OAAA;AAAA,GAAA,CAAA,sCAC1C,UAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
+import buttonStyles from '@danske/sapphire-css/components/button/button.module.css';
+import { Button } from '@danske/sapphire-react';
+import { mergeProps } from '@react-aria/utils';
+import { useSidebar } from './useSidebar.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 SidebarItem = React.forwardRef(function SidebarItem2(_a, ref) {
+  var _b = _a, { isActive, children } = _b, props = __objRest(_b, ["isActive", "children"]);
+  const { itemProps } = useSidebar();
+  return /* @__PURE__ */ React.createElement("li", {
+    className: clsx(styles["sapphire-sidebar__nav-item"])
+  }, /* @__PURE__ */ React.createElement(Button, __spreadProps(__spreadValues({
+    ref,
+    variant: "tertiary",
+    elementType: "a",
+    "aria-current": isActive ? "page" : void 0
+  }, mergeProps(props, itemProps)), {
+    UNSAFE_className: clsx(buttonStyles["sapphire-button--stretch-left-align"], { [buttonStyles["sapphire-button--selected"]]: isActive })
+  }), children));
+});
+
+export { SidebarItem };
+//# sourceMappingURL=Item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../../../../src/Sidebar/src/Item.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport buttonStyles from '@danske/sapphire-css/components/button/button.module.css';\nimport { Button, ButtonProps } from '@danske/sapphire-react';\nimport { FocusableRef } from '@react-types/shared';\nimport { mergeProps } from '@react-aria/utils';\nimport { useSidebar } from './useSidebar';\n\nexport type SidebarItemProps = Omit<\n  ButtonProps<'a'>,\n  'variant' | 'size' | 'elementType'\n> & {\n  /**\n   * If the link is currently active\n   */\n  isActive?: boolean;\n  children?: ReactNode;\n};\n\nexport const SidebarItem = React.forwardRef(function SidebarItem(\n  { isActive, children, ...props }: SidebarItemProps,\n  ref: FocusableRef<HTMLAnchorElement>\n): React.JSX.Element {\n  const { itemProps } = useSidebar();\n\n  return (\n    <li className={clsx(styles['sapphire-sidebar__nav-item'])}>\n      <Button\n        ref={ref}\n        variant=\"tertiary\"\n        elementType=\"a\"\n        aria-current={isActive ? 'page' : undefined}\n        {...mergeProps(props as ButtonProps<'a'>, itemProps)}\n        UNSAFE_className={clsx(\n          buttonStyles['sapphire-button--stretch-left-align'],\n          { [buttonStyles['sapphire-button--selected']]: isActive }\n        )}\n      >\n        {children}\n      </Button>\n    </li>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CAC1C,IACA,GACmB,EAAA;AAFnB,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,YAAU,QAAZ,EAAA,GAAA,EAAA,EAAyB,KAAzB,GAAA,SAAA,CAAA,EAAA,EAAyB,CAAvB,UAAU,EAAA,UAAA,CAAA,CAAA,CAAA;AAGZ,EAAA,MAAM,EAAE,SAAc,EAAA,GAAA,UAAA,EAAA,CAAA;AAEtB,EAAA,2CACG,IAAD,EAAA;AAAA,IAAI,SAAA,EAAW,KAAK,MAAO,CAAA,4BAAA,CAAA,CAAA;AAAA,GAAA,sCACxB,MAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,IACA,OAAQ,EAAA,UAAA;AAAA,IACR,WAAY,EAAA,GAAA;AAAA,IACZ,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,GAC9B,EAAA,UAAA,CAAW,OAA2B,SAL5C,CAAA,CAAA,EAAA;AAAA,IAME,kBAAkB,IAChB,CAAA,YAAA,CAAa,qCACb,CAAA,EAAA,EAAA,CAAG,aAAa,2BAA+B,CAAA,GAAA,QAAA,EAAA,CAAA;AAAA,GAGhD,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import clsx from 'clsx';
+import { filterDOMProps } from '@react-aria/utils';
+import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
+
+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 SidebarList = (_a) => {
+  var _b = _a, {
+    elementType = "ul",
+    children
+  } = _b, props = __objRest(_b, [
+    "elementType",
+    "children"
+  ]);
+  const RootNode = elementType;
+  return /* @__PURE__ */ React.createElement(RootNode, __spreadProps(__spreadValues({}, filterDOMProps(props, { global: true })), {
+    className: clsx(styles["sapphire-sidebar__nav-list"])
+  }), children);
+};
+
+export { SidebarList };
+//# sourceMappingURL=List.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../../../src/Sidebar/src/List.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from '@react-aria/utils';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\n\nexport interface SidebarListProps extends DOMProps {\n  /**\n   * Wrapping element type.\n   * @default 'ul'\n   */\n  elementType?: 'ul' | 'ol';\n  children?: ReactNode;\n}\n\nexport const SidebarList = ({\n  elementType = 'ul',\n  children,\n  ...props\n}: SidebarListProps): React.JSX.Element => {\n  const RootNode = elementType as any;\n\n  return (\n    <RootNode\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-sidebar__nav-list'])}\n    >\n      {children}\n    </RootNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAea,MAAA,WAAA,GAAc,CAAC,EAIe,KAAA;AAJf,EAC1B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAc,WAAA,GAAA,IAAA;AAAA,IACd,QAAA;AAAA,GAF0B,GAAA,EAAA,EAGvB,kBAHuB,EAGvB,EAAA;AAAA,IAFH,aAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,QAAW,GAAA,WAAA,CAAA;AAEjB,EAAA,2CACG,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eAAe,KAAO,EAAA,EAAE,QAAQ,IADtC,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,KAAK,MAAO,CAAA,4BAAA,CAAA,CAAA;AAAA,GAEtB,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -0,0 +1,104 @@
+import React, { useEffect } from 'react';
+import { Panel, ModalLayout, IconButton, tokens, View } 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 { openedId, setOpenedId, content } = useSecondarySidebarContext();
+  const responsiveContext = useResponsiveSidebarContext();
+  if (!responsiveContext) {
+    throw new Error("<SidebarPanel> must be rendered inside a <Sidebar.ResponsiveProvider>");
+  }
+  const { isPanelOpen, setPanelOpen } = responsiveContext;
+  const isCollapsed = useIsSidebarCollapsed();
+  useEffect(() => {
+    if (!isCollapsed) {
+      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
+      }
+    }, /* @__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>");
+  }
+  const isCollapsed = useIsSidebarCollapsed();
+  const panelTriggerProps = {
+    onPress: () => {
+      context.setPanelOpen(true);
+    }
+  };
+  return isCollapsed ? children(panelTriggerProps) : null;
+};
+
+export { SidebarPanel, SidebarPanelTrigger };
+//# sourceMappingURL=Panel.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,42 @@
+import { useControlledState } from '@react-stately/utils';
+import { useMatchedBreakpoints } from '@danske/sapphire-react';
+import React, { useContext } from 'react';
+
+const ResponsiveSidebarContext = React.createContext(null);
+function useResponsiveSidebarContext() {
+  return useContext(ResponsiveSidebarContext);
+}
+function useIsSidebarCollapsed() {
+  const context = useContext(ResponsiveSidebarContext);
+  const matchedBreakpoints = useMatchedBreakpoints();
+  if (!context) {
+    return null;
+  }
+  const { collapsed } = context;
+  if (typeof collapsed === "boolean") {
+    return collapsed;
+  }
+  if (typeof collapsed === "string") {
+    return !matchedBreakpoints.includes(collapsed);
+  }
+  return !matchedBreakpoints.includes("md");
+}
+const ResponsiveSidebarProvider = ({
+  collapsed,
+  isPanelOpen,
+  defaultIsPanelOpen,
+  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);
+};
+
+export { ResponsiveSidebarContext, ResponsiveSidebarProvider, useIsSidebarCollapsed, useResponsiveSidebarContext };
+//# sourceMappingURL=ResponsiveSidebarContext.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,35 @@
+import React, { useContext, useState } from 'react';
+import { useControlledState } from '@react-stately/utils';
+
+const SecondarySidebarContext = React.createContext(null);
+const useSecondarySidebarContext = () => {
+  const context = useContext(SecondarySidebarContext);
+  if (context) {
+    return context;
+  }
+  throw new Error("This should be rendered inside a <Sidebar />.");
+};
+const SecondarySidebarProvider = ({
+  openedId,
+  defaultOpenedId,
+  onOpenedIdChange,
+  themeVariant,
+  children
+}) => {
+  var _a, _b, _c, _d;
+  const context = useContext(SecondarySidebarContext);
+  const [secondarySidebarId, setSecondarySidebarId] = useControlledState(openedId, defaultOpenedId != null ? 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);
+};
+
+export { SecondarySidebarContext, SecondarySidebarProvider, useSecondarySidebarContext };
+//# sourceMappingURL=SecondarySidebarContext.js.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,66 @@
+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';
+
+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"
+  ]);
+  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)));
+};
+
+export { SidebarSection };
+//# sourceMappingURL=Section.js.map

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

@@ -0,0 +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;;;;"}