@danske/sapphire-react-lab 0.105.2 → 0.106.2

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

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/Sidebar/src/Sidebar.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  SapphireStyleProps,\n  ThemeRoot,\n  ThemeVariant,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { DOMProps } from '@react-types/shared';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport { FocusWithinProps, useFocusWithin } from '@react-aria/interactions';\nimport { SidebarPanel } from './Panel';\nimport { useSidebar } from './useSidebar';\nimport { SecondarySidebarProvider } from './SecondarySidebarContext';\nimport {\n  useIsSidebarCollapsed,\n  useResponsiveSidebarContext,\n} from './ResponsiveSidebarContext';\n\nexport type SidebarProps = DOMProps &\n  SapphireStyleProps & {\n    /**\n     * Shorthand to wrap the sidebar in a ThemeRoot with a different theme variant\n     */\n    themeVariant?: ThemeVariant;\n\n    /**\n     * The theme variant for the overflow sidebar\n     */\n    secondarySidebarThemeVariant?: ThemeVariant;\n\n    /**\n     * Callback for when the sidebar's elements lose focus.\n     * Useful to know when to close the overflow sidebar.\n     */\n    onBlurWithin?: FocusWithinProps['onBlurWithin'];\n\n    /**\n     * Callback for when one of the sidebar's elements first gains focus.\n     */\n    onFocusWithin?: FocusWithinProps['onFocusWithin'];\n\n    /**\n     * Callback for when one of the sidebar's elements loses or gains focus\n     */\n    onFocusWithinChange?: FocusWithinProps['onFocusWithinChange'];\n\n    /**\n     * Whether the overflow sidebar should close when all sidebar's elements\n     * lost focus\n     * @default true\n     */\n    closeOnBlurWithin?: boolean;\n\n    /**\n     * The header of the sidebar\n     */\n    header: ReactNode;\n\n    /**\n     * The header of the sidebar for small screens, when the sidebar is\n     * rendered as a panel\n     */\n    panelHeader?: ReactNode;\n\n    /**\n     * The id of the opened secondary sidebar (controlled)\n     */\n    openedSecondarySidebar?: string | null;\n\n    /**\n     * The id of the secondary sidebar opened by default (uncontrolled)\n     */\n    defaultOpenedSecondarySidebar?: string | null;\n\n    /**\n     * Callback for when the secondary sidebar opens or closes\n     */\n    onSecondarySidebarChange?: (id: string | null) => void;\n\n    children?: ReactNode;\n  };\n\n/**\n * Sidebar component for the site's main navigation.\n * Takes the height of the container.\n *\n * The default recommended way to use it is in the example below. But each part\n * can be replaced with a custom implementation.\n *\n * **Example:**\n * ```tsx\n * <Sidebar\n *  header={\n *    <Sidebar.Header>\n *      header\n *    </Sidebar.Header>\n *  }\n * >\n *   <Sidebar.Body>\n *     <Sidebar.List>\n *       ...\n *     </Sidebar.List>\n *   </Sidebar.Body>\n * </Sidebar>\n * ```\n */\nexport const Sidebar = ({\n  themeVariant,\n  openedSecondarySidebar,\n  defaultOpenedSecondarySidebar,\n  onSecondarySidebarChange,\n  secondarySidebarThemeVariant,\n  children,\n  ...props\n}: SidebarProps) => {\n  useThemeCheck();\n\n  return (\n    <SecondarySidebarProvider\n      openedId={openedSecondarySidebar}\n      defaultOpenedId={defaultOpenedSecondarySidebar}\n      onOpenedIdChange={onSecondarySidebarChange}\n      themeVariant={secondarySidebarThemeVariant}\n    >\n      <WithThemeRoot themeVariant={themeVariant}>\n        <SidebarContent {...props}>{children}</SidebarContent>\n      </WithThemeRoot>\n    </SecondarySidebarProvider>\n  );\n};\n\nconst SidebarContent = ({\n  onBlurWithin,\n  onFocusWithin,\n  onFocusWithinChange,\n  closeOnBlurWithin = true,\n  header,\n  panelHeader,\n  children,\n  ...props\n}: SidebarProps) => {\n  const { styleProps } = useSapphireStyleProps(props);\n  const { sidebarProps } = useSidebar();\n\n  const { focusWithinProps } = useFocusWithin(\n    mergeProps(\n      {\n        onBlurWithin,\n        onFocusWithin,\n        onFocusWithinChange,\n      },\n      closeOnBlurWithin ? sidebarProps : {}\n    )\n  );\n\n  const responsiveSidebarContext = useResponsiveSidebarContext();\n  const isCollapsed = useIsSidebarCollapsed();\n\n  return (\n    <>\n      {!isCollapsed && (\n        <div\n          {...styleProps}\n          {...filterDOMProps(props, { global: true })}\n          {...focusWithinProps}\n          className={clsx(styles['sapphire-sidebar'])}\n          tabIndex={-1 /* sidebar must be focusable but not tabbable */}\n        >\n          {header}\n          {children}\n        </div>\n      )}\n      {responsiveSidebarContext && (\n        <SidebarPanel header={panelHeader}>{children}</SidebarPanel>\n      )}\n    </>\n  );\n};\n\nconst WithThemeRoot = ({\n  children,\n  themeVariant,\n}: {\n  themeVariant?: ThemeVariant;\n  children: ReactNode;\n}) =>\n  themeVariant ? (\n    <ThemeRoot\n      variant={themeVariant}\n      noSurface\n      height=\"100%\"\n      width=\"min-content\"\n    >\n      {children}\n    </ThemeRoot>\n  ) : (\n    <>{children}</>\n  );\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/Sidebar/src/Sidebar.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  SapphireStyleProps,\n  ThemeRoot,\n  ThemeVariant,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { DOMProps } from '@react-types/shared';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { FocusWithinProps, useFocusWithin } from 'react-aria/useFocusWithin';\nimport { SidebarPanel } from './Panel';\nimport { useSidebar } from './useSidebar';\nimport { SecondarySidebarProvider } from './SecondarySidebarContext';\nimport {\n  useIsSidebarCollapsed,\n  useResponsiveSidebarContext,\n} from './ResponsiveSidebarContext';\n\nexport type SidebarProps = DOMProps &\n  SapphireStyleProps & {\n    /**\n     * Shorthand to wrap the sidebar in a ThemeRoot with a different theme variant\n     */\n    themeVariant?: ThemeVariant;\n\n    /**\n     * The theme variant for the overflow sidebar\n     */\n    secondarySidebarThemeVariant?: ThemeVariant;\n\n    /**\n     * Callback for when the sidebar's elements lose focus.\n     * Useful to know when to close the overflow sidebar.\n     */\n    onBlurWithin?: FocusWithinProps['onBlurWithin'];\n\n    /**\n     * Callback for when one of the sidebar's elements first gains focus.\n     */\n    onFocusWithin?: FocusWithinProps['onFocusWithin'];\n\n    /**\n     * Callback for when one of the sidebar's elements loses or gains focus\n     */\n    onFocusWithinChange?: FocusWithinProps['onFocusWithinChange'];\n\n    /**\n     * Whether the overflow sidebar should close when all sidebar's elements\n     * lost focus\n     * @default true\n     */\n    closeOnBlurWithin?: boolean;\n\n    /**\n     * The header of the sidebar\n     */\n    header: ReactNode;\n\n    /**\n     * The header of the sidebar for small screens, when the sidebar is\n     * rendered as a panel\n     */\n    panelHeader?: ReactNode;\n\n    /**\n     * The id of the opened secondary sidebar (controlled)\n     */\n    openedSecondarySidebar?: string | null;\n\n    /**\n     * The id of the secondary sidebar opened by default (uncontrolled)\n     */\n    defaultOpenedSecondarySidebar?: string | null;\n\n    /**\n     * Callback for when the secondary sidebar opens or closes\n     */\n    onSecondarySidebarChange?: (id: string | null) => void;\n\n    children?: ReactNode;\n  };\n\n/**\n * Sidebar component for the site's main navigation.\n * Takes the height of the container.\n *\n * The default recommended way to use it is in the example below. But each part\n * can be replaced with a custom implementation.\n *\n * **Example:**\n * ```tsx\n * <Sidebar\n *  header={\n *    <Sidebar.Header>\n *      header\n *    </Sidebar.Header>\n *  }\n * >\n *   <Sidebar.Body>\n *     <Sidebar.List>\n *       ...\n *     </Sidebar.List>\n *   </Sidebar.Body>\n * </Sidebar>\n * ```\n */\nexport const Sidebar = ({\n  themeVariant,\n  openedSecondarySidebar,\n  defaultOpenedSecondarySidebar,\n  onSecondarySidebarChange,\n  secondarySidebarThemeVariant,\n  children,\n  ...props\n}: SidebarProps) => {\n  useThemeCheck();\n\n  return (\n    <SecondarySidebarProvider\n      openedId={openedSecondarySidebar}\n      defaultOpenedId={defaultOpenedSecondarySidebar}\n      onOpenedIdChange={onSecondarySidebarChange}\n      themeVariant={secondarySidebarThemeVariant}\n    >\n      <WithThemeRoot themeVariant={themeVariant}>\n        <SidebarContent {...props}>{children}</SidebarContent>\n      </WithThemeRoot>\n    </SecondarySidebarProvider>\n  );\n};\n\nconst SidebarContent = ({\n  onBlurWithin,\n  onFocusWithin,\n  onFocusWithinChange,\n  closeOnBlurWithin = true,\n  header,\n  panelHeader,\n  children,\n  ...props\n}: SidebarProps) => {\n  const { styleProps } = useSapphireStyleProps(props);\n  const { sidebarProps } = useSidebar();\n\n  const { focusWithinProps } = useFocusWithin(\n    mergeProps(\n      {\n        onBlurWithin,\n        onFocusWithin,\n        onFocusWithinChange,\n      },\n      closeOnBlurWithin ? sidebarProps : {}\n    )\n  );\n\n  const responsiveSidebarContext = useResponsiveSidebarContext();\n  const isCollapsed = useIsSidebarCollapsed();\n\n  return (\n    <>\n      {!isCollapsed && (\n        <div\n          {...styleProps}\n          {...filterDOMProps(props, { global: true })}\n          {...focusWithinProps}\n          className={clsx(styles['sapphire-sidebar'])}\n          tabIndex={-1 /* sidebar must be focusable but not tabbable */}\n        >\n          {header}\n          {children}\n        </div>\n      )}\n      {responsiveSidebarContext && (\n        <SidebarPanel header={panelHeader}>{children}</SidebarPanel>\n      )}\n    </>\n  );\n};\n\nconst WithThemeRoot = ({\n  children,\n  themeVariant,\n}: {\n  themeVariant?: ThemeVariant;\n  children: ReactNode;\n}) =>\n  themeVariant ? (\n    <ThemeRoot\n      variant={themeVariant}\n      noSurface\n      height=\"100%\"\n      width=\"min-content\"\n    >\n      {children}\n    </ThemeRoot>\n  ) : (\n    <>{children}</>\n  );\n"],"names":[],"mappings":";;;;;;;;;;;;AA+GO,MAAM,UAAU,CAAC;AAAA,EACtB,YAAA;AAAA,EACA,sBAAA;AAAA,EACA,6BAAA;AAAA,EACA,wBAAA;AAAA,EACA,4BAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAoB;AAClB,EAAA,aAAA,EAAc;AAEd,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,wBAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAU,sBAAA;AAAA,MACV,eAAA,EAAiB,6BAAA;AAAA,MACjB,gBAAA,EAAkB,wBAAA;AAAA,MAClB,YAAA,EAAc;AAAA,KAAA;AAAA,oBAEd,KAAA,CAAA,aAAA,CAAC,iBAAc,YAAA,EAAA,kBACb,KAAA,CAAA,aAAA,CAAC,kBAAgB,GAAG,KAAA,EAAA,EAAQ,QAAS,CACvC;AAAA,GACF;AAEJ;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB,YAAA;AAAA,EACA,aAAA;AAAA,EACA,mBAAA;AAAA,EACA,iBAAA,GAAoB,IAAA;AAAA,EACpB,MAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAoB;AAClB,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,UAAA,EAAW;AAEpC,EAAA,MAAM,EAAE,kBAAiB,GAAI,cAAA;AAAA,IAC3B,UAAA;AAAA,MACE;AAAA,QACE,YAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,iBAAA,GAAoB,eAAe;AAAC;AACtC,GACF;AAEA,EAAA,MAAM,2BAA2B,2BAAA,EAA4B;AAC7D,EAAA,MAAM,cAAc,qBAAA,EAAsB;AAE1C,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,CAAC,WAAA,oBACA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACH,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MACzC,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,kBAAkB,CAAC,CAAA;AAAA,MAC1C,QAAA,EAAU;AAAA,KAAA;AAAA,IAET,MAAA;AAAA,IACA;AAAA,KAGJ,wBAAA,oBACC,KAAA,CAAA,aAAA,CAAC,gBAAa,MAAA,EAAQ,WAAA,EAAA,EAAc,QAAS,CAEjD,CAAA;AAEJ,CAAA;AAEA,MAAM,gBAAgB,CAAC;AAAA,EACrB,QAAA;AAAA,EACA;AACF,CAAA,KAIE,YAAA,mBACE,KAAA,CAAA,aAAA;AAAA,EAAC,SAAA;AAAA,EAAA;AAAA,IACC,OAAA,EAAS,YAAA;AAAA,IACT,SAAA,EAAS,IAAA;AAAA,IACT,MAAA,EAAO,MAAA;AAAA,IACP,KAAA,EAAM;AAAA,GAAA;AAAA,EAEL;AACH,CAAA,6DAEG,QAAS,CAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useSidebar.js","sources":["../../../../src/Sidebar/src/useSidebar.ts"],"sourcesContent":["import { useResponsiveSidebarContext } from './ResponsiveSidebarContext';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\n\n/**\n * Returns props to be spread on different components that make the Sidebar.\n */\nexport const useSidebar = () => {\n  const { openedId, setOpenedId } = useSecondarySidebarContext();\n  const responsiveContext = useResponsiveSidebarContext();\n  const { isPanelOpen, setPanelOpen } = responsiveContext\n    ? responsiveContext\n    : { isPanelOpen: false, setPanelOpen: () => {} };\n\n  return {\n    sidebarProps: { onBlurWithin: () => setOpenedId(null) },\n    itemProps: {\n      onPress: () => {\n        setPanelOpen(false);\n        if (!isPanelOpen) {\n          /* If panel is open, let the secondary sidebar get closed\n           * when the closing transition is done. See `panelProps`\n           */\n          setOpenedId(null);\n        }\n      },\n    },\n    getExpandableItemProps: (id: string) => ({\n      onPress: () => setOpenedId(openedId === id ? null : id),\n    }),\n    secondarySidebarProps: {\n      onClose: () => setOpenedId(null),\n    },\n  };\n};\n"],"names":[],"mappings":";;;AAMO,MAAM,aAAa,MAAM;AAC9B,EAAM,MAAA,EAAE,UAAU,WAAgB,EAAA,GAAA,0BAAA,EAAA,CAAA;AAClC,EAAA,MAAM,iBAAoB,GAAA,2BAAA,EAAA,CAAA;AAC1B,EAAM,MAAA,EAAE,aAAa,YAAiB,EAAA,GAAA,iBAAA,GAClC,oBACA,EAAE,WAAA,EAAa,KAAO,EAAA,YAAA,EAAc,MAAM;AAAA,GAAA,EAAA,CAAA;AAE9C,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,EAAE,YAAc,EAAA,MAAM,WAAY,CAAA,IAAA,CAAA,EAAA;AAAA,IAChD,SAAW,EAAA;AAAA,MACT,SAAS,MAAM;AACb,QAAa,YAAA,CAAA,KAAA,CAAA,CAAA;AACb,QAAA,IAAI,CAAC,WAAa,EAAA;AAIhB,UAAY,WAAA,CAAA,IAAA,CAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KAAA;AAAA,IAIlB,sBAAA,EAAwB,CAAC,EAAgB,MAAA;AAAA,MACvC,OAAS,EAAA,MAAM,WAAY,CAAA,QAAA,KAAa,KAAK,IAAO,GAAA,EAAA,CAAA;AAAA,KAAA,CAAA;AAAA,IAEtD,qBAAuB,EAAA;AAAA,MACrB,OAAA,EAAS,MAAM,WAAY,CAAA,IAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"useSidebar.js","sources":["../../../../src/Sidebar/src/useSidebar.ts"],"sourcesContent":["import { useResponsiveSidebarContext } from './ResponsiveSidebarContext';\nimport { useSecondarySidebarContext } from './SecondarySidebarContext';\n\n/**\n * Returns props to be spread on different components that make the Sidebar.\n */\nexport const useSidebar = () => {\n  const { openedId, setOpenedId } = useSecondarySidebarContext();\n  const responsiveContext = useResponsiveSidebarContext();\n  const { isPanelOpen, setPanelOpen } = responsiveContext\n    ? responsiveContext\n    : { isPanelOpen: false, setPanelOpen: () => {} };\n\n  return {\n    sidebarProps: { onBlurWithin: () => setOpenedId(null) },\n    itemProps: {\n      onPress: () => {\n        setPanelOpen(false);\n        if (!isPanelOpen) {\n          /* If panel is open, let the secondary sidebar get closed\n           * when the closing transition is done. See `panelProps`\n           */\n          setOpenedId(null);\n        }\n      },\n    },\n    getExpandableItemProps: (id: string) => ({\n      onPress: () => setOpenedId(openedId === id ? null : id),\n    }),\n    secondarySidebarProps: {\n      onClose: () => setOpenedId(null),\n    },\n  };\n};\n"],"names":[],"mappings":";;;AAMO,MAAM,aAAa,MAAM;AAC9B,EAAA,MAAM,EAAE,QAAA,EAAU,WAAA,EAAY,GAAI,0BAAA,EAA2B;AAC7D,EAAA,MAAM,oBAAoB,2BAAA,EAA4B;AACtD,EAAA,MAAM,EAAE,WAAA,EAAa,YAAA,EAAa,GAAI,iBAAA,GAClC,oBACA,EAAE,WAAA,EAAa,KAAA,EAAO,YAAA,EAAc,MAAM;AAAA,EAAC,CAAA,EAAE;AAEjD,EAAA,OAAO;AAAA,IACL,cAAc,EAAE,YAAA,EAAc,MAAM,WAAA,CAAY,IAAI,CAAA,EAAE;AAAA,IACtD,SAAA,EAAW;AAAA,MACT,SAAS,MAAM;AACb,QAAA,YAAA,CAAa,KAAK,CAAA;AAClB,QAAA,IAAI,CAAC,WAAA,EAAa;AAIhB,UAAA,WAAA,CAAY,IAAI,CAAA;AAAA,QAClB;AAAA,MACF;AAAA,KACF;AAAA,IACA,sBAAA,EAAwB,CAAC,EAAA,MAAgB;AAAA,MACvC,SAAS,MAAM,WAAA,CAAY,QAAA,KAAa,EAAA,GAAK,OAAO,EAAE;AAAA,KACxD,CAAA;AAAA,IACA,qBAAA,EAAuB;AAAA,MACrB,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI;AAAA;AACjC,GACF;AACF;;;;"}

package/build/esm/Slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/Slider/index.ts"],"sourcesContent":["import { Field } from '@danske/sapphire-react';\nimport { Slider } from './src/Slider';\n\nconst _Slider = Object.assign(Slider, {\n  Note: Field.Note,\n});\n\nexport { _Slider as Slider };\nexport { type SliderProps } from './src/Slider';\n"],"names":[],"mappings":";;;AAGM,MAAA,OAAA,GAAU,MAAO,CAAA,MAAA,CAAO,MAAQ,EAAA;AAAA,EACpC,MAAM,KAAM,CAAA,IAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/Slider/index.ts"],"sourcesContent":["import { Field } from '@danske/sapphire-react';\nimport { Slider } from './src/Slider';\n\nconst _Slider = Object.assign(Slider, {\n  Note: Field.Note,\n});\n\nexport { _Slider as Slider };\nexport { type SliderProps } from './src/Slider';\n"],"names":[],"mappings":";;;AAGA,MAAM,OAAA,GAAU,MAAA,CAAO,MAAA,CAAO,MAAA,EAAQ;AAAA,EACpC,MAAM,KAAA,CAAM;AACd,CAAC;;;;"}

package/build/esm/Slider/src/Slider.js

@@ -4,79 +4,54 @@ import { useThemeCheck, useSapphireStyleProps, Field, Label } from '@danske/sapp
 import { Slider as Slider$1, SliderTrack, SliderThumb } from 'react-aria-components';
 import React from '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 Slider = (_a) => {
-  var _b = _a, {
-    label,
-    labelPlacement = "above",
-    note,
-    name
-  } = _b, props = __objRest(_b, [
-    "label",
-    "labelPlacement",
-    "note",
-    "name"
-  ]);
+const Slider = ({
+  label,
+  labelPlacement = "above",
+  note,
+  name,
+  ...props
+}) => {
   useThemeCheck();
   const { styleProps } = useSapphireStyleProps(props);
-  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, styleProps), {
-    labelPlacement
-  }), /* @__PURE__ */ React.createElement(Field.Context, null, label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, null, label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement(Slider$1, __spreadProps(__spreadValues({}, props), {
-    style: { height: "100%" }
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-slider"]),
-    role: "slider"
-  }, /* @__PURE__ */ React.createElement(SliderTrack, {
-    className: ({ isDisabled }) => clsx(styles["sapphire-slider__track"], {
-      [styles["is-disabled"]]: isDisabled
-    })
-  }, ({ state }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-slider__track-remaining"])
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: clsx(styles["sapphire-slider__track-fill"]),
-    style: { width: state.getThumbPercent(0) * 100 + "%" }
-  }), /* @__PURE__ */ React.createElement(SliderThumb, {
-    name,
-    className: (state2) => clsx(styles["sapphire-slider__thumb"], {
-      [styles["is-focus"]]: state2.isFocusVisible
-    }),
-    style: ({ state: state2 }) => {
-      const percent = Math.min(3 + state2.getThumbPercent(0) * 94, 100);
-      return {
-        left: `${percent}%`
-      };
-    }
-  })))))), note && /* @__PURE__ */ React.createElement(Field.Footer, null, note)));
+  return /* @__PURE__ */ React.createElement(Field, { ...styleProps, labelPlacement }, /* @__PURE__ */ React.createElement(Field.Context, null, label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, null, label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement(Slider$1, { ...props, style: { height: "100%" } }, /* @__PURE__ */ React.createElement("div", { className: clsx(styles["sapphire-slider"]), role: "slider" }, /* @__PURE__ */ React.createElement(
+    SliderTrack,
+    {
+      className: ({ isDisabled }) => clsx(styles["sapphire-slider__track"], {
+        [styles["is-disabled"]]: isDisabled
+      })
+    },
+    ({ state }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(
+          styles["sapphire-slider__track-remaining"]
+        )
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(styles["sapphire-slider__track-fill"]),
+        style: { width: state.getThumbPercent(0) * 100 + "%" }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      SliderThumb,
+      {
+        name,
+        className: (state2) => clsx(styles["sapphire-slider__thumb"], {
+          [styles["is-focus"]]: state2.isFocusVisible
+        }),
+        style: ({ state: state2 }) => {
+          const percent = Math.min(
+            3 + state2.getThumbPercent(0) * 94,
+            100
+          );
+          return {
+            left: `${percent}%`
+          };
+        }
+      }
+    ))
+  )))), note && /* @__PURE__ */ React.createElement(Field.Footer, null, note)));
 };
 
 export { Slider };

package/build/esm/Slider/src/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../../src/Slider/src/Slider.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/slider/slider.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  Label,\n  SapphireStyleProps,\n  Field,\n  FieldProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n  Slider as RACSlider,\n  SliderProps as RACSliderProps,\n  SliderThumb as RACSliderThumb,\n  SliderThumbProps as RACSliderThumbProps,\n  SliderTrack as RACSliderTrack,\n} from 'react-aria-components';\nimport React from 'react';\n\nexport type SliderProps = {\n  label?: ReactNode;\n  /**\n   * A note to show below the slider.\n   * Use {@Link Slider.Note} to render the note.\n   */\n  note?: ReactNode;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  Pick<FieldProps, 'labelPlacement'> &\n  Pick<\n    RACSliderProps<number>, // We're only supporting sliders with one end\n    | 'isDisabled'\n    | 'minValue'\n    | 'maxValue'\n    | 'step'\n    | 'value'\n    | 'defaultValue'\n    | 'aria-label'\n    | 'onChange'\n    | 'onChangeEnd'\n  > &\n  Pick<RACSliderThumbProps, 'name'>;\n\nexport const Slider = ({\n  label,\n  labelPlacement = 'above',\n  note,\n  name,\n  ...props\n}: SliderProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <Field {...styleProps} labelPlacement={labelPlacement}>\n      <Field.Context>\n        {label && (\n          <Field.Label>\n            <Label>{label}</Label>\n          </Field.Label>\n        )}\n\n        <Field.Control>\n          <RACSlider {...props} style={{ height: '100%' }}>\n            <div className={clsx(styles['sapphire-slider'])} role=\"slider\">\n              <RACSliderTrack\n                className={({ isDisabled }) =>\n                  clsx(styles['sapphire-slider__track'], {\n                    [styles['is-disabled']]: isDisabled,\n                  })\n                }\n              >\n                {({ state }) => (\n                  <>\n                    <div\n                      className={clsx(\n                        styles['sapphire-slider__track-remaining']\n                      )}\n                    />\n                    <div\n                      className={clsx(styles['sapphire-slider__track-fill'])}\n                      style={{ width: state.getThumbPercent(0) * 100 + '%' }}\n                    />\n                    <RACSliderThumb\n                      name={name}\n                      className={(state) =>\n                        clsx(styles['sapphire-slider__thumb'], {\n                          [styles['is-focus']]: state.isFocusVisible,\n                        })\n                      }\n                      style={({ state }) => {\n                        // Pad the thumb position, so it doesn't go over the track\n                        const percent = Math.min(\n                          3 + state.getThumbPercent(0) * 94,\n                          100\n                        );\n                        return {\n                          left: `${percent}%`,\n                        };\n                      }}\n                    />\n                  </>\n                )}\n              </RACSliderTrack>\n            </div>\n          </RACSlider>\n        </Field.Control>\n\n        {note && <Field.Footer>{note}</Field.Footer>}\n      </Field.Context>\n    </Field>\n  );\n};\n"],"names":["RACSlider","RACSliderTrack","RACSliderThumb"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6Ca,MAAA,MAAA,GAAS,CAAC,EAMS,KAAA;AANT,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAA;AAAA,IACA,IAAA;AAAA,GAJqB,GAAA,EAAA,EAKlB,kBALkB,EAKlB,EAAA;AAAA,IAJH,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,GACrB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,OAAP,EAAA,IAAA,EACG,yBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,IAAQ,EAAA,KAAA,CAAA,CAAA,sCAIX,KAAM,CAAA,OAAA,EAAP,sBACG,KAAA,CAAA,aAAA,CAAAA,QAAA,EAAD,iCAAe,KAAf,CAAA,EAAA;AAAA,IAAsB,KAAA,EAAO,EAAE,MAAQ,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,sCACpC,KAAD,EAAA;AAAA,IAAK,SAAA,EAAW,KAAK,MAAO,CAAA,iBAAA,CAAA,CAAA;AAAA,IAAqB,IAAK,EAAA,QAAA;AAAA,GAAA,sCACnDC,WAAD,EAAA;AAAA,IACE,WAAW,CAAC,EAAE,UACZ,EAAA,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MAAA,CACpC,OAAO,aAAiB,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAAA,EAI5B,CAAC,EAAE,KACF,EAAA,qBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KACT,MAAO,CAAA,kCAAA,CAAA,CAAA;AAAA,GAAA,CAAA,sCAGV,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,KAAK,MAAO,CAAA,6BAAA,CAAA,CAAA;AAAA,IACvB,OAAO,EAAE,KAAA,EAAO,KAAM,CAAA,eAAA,CAAgB,KAAK,GAAM,GAAA,GAAA,EAAA;AAAA,GAAA,CAAA,sCAElDC,WAAD,EAAA;AAAA,IACE,IAAA;AAAA,IACA,SAAW,EAAA,CAAC,MACV,KAAA,IAAA,CAAK,OAAO,wBAA2B,CAAA,EAAA;AAAA,MACpC,CAAA,MAAA,CAAO,cAAc,MAAM,CAAA,cAAA;AAAA,KAAA,CAAA;AAAA,IAGhC,KAAA,EAAO,CAAC,EAAE,KAAY,EAAA,MAAA,EAAA,KAAA;AAEpB,MAAA,MAAM,UAAU,IAAK,CAAA,GAAA,CACnB,IAAI,MAAM,CAAA,eAAA,CAAgB,KAAK,EAC/B,EAAA,GAAA,CAAA,CAAA;AAEF,MAAO,OAAA;AAAA,QACL,MAAM,CAAG,EAAA,OAAA,CAAA,CAAA,CAAA;AAAA,OAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAW1B,IAAQ,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,MAAA,EAAP,IAAe,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Slider.js","sources":["../../../../src/Slider/src/Slider.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/slider/slider.module.css';\nimport {\n  useThemeCheck,\n  useSapphireStyleProps,\n  Label,\n  SapphireStyleProps,\n  Field,\n  FieldProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n  Slider as RACSlider,\n  SliderProps as RACSliderProps,\n  SliderThumb as RACSliderThumb,\n  SliderThumbProps as RACSliderThumbProps,\n  SliderTrack as RACSliderTrack,\n} from 'react-aria-components';\nimport React from 'react';\n\nexport type SliderProps = {\n  label?: ReactNode;\n  /**\n   * A note to show below the slider.\n   * Use {@Link Slider.Note} to render the note.\n   */\n  note?: ReactNode;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  Pick<FieldProps, 'labelPlacement'> &\n  Pick<\n    RACSliderProps<number>, // We're only supporting sliders with one end\n    | 'isDisabled'\n    | 'minValue'\n    | 'maxValue'\n    | 'step'\n    | 'value'\n    | 'defaultValue'\n    | 'aria-label'\n    | 'onChange'\n    | 'onChangeEnd'\n  > &\n  Pick<RACSliderThumbProps, 'name'>;\n\nexport const Slider = ({\n  label,\n  labelPlacement = 'above',\n  note,\n  name,\n  ...props\n}: SliderProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n\n  return (\n    <Field {...styleProps} labelPlacement={labelPlacement}>\n      <Field.Context>\n        {label && (\n          <Field.Label>\n            <Label>{label}</Label>\n          </Field.Label>\n        )}\n\n        <Field.Control>\n          <RACSlider {...props} style={{ height: '100%' }}>\n            <div className={clsx(styles['sapphire-slider'])} role=\"slider\">\n              <RACSliderTrack\n                className={({ isDisabled }) =>\n                  clsx(styles['sapphire-slider__track'], {\n                    [styles['is-disabled']]: isDisabled,\n                  })\n                }\n              >\n                {({ state }) => (\n                  <>\n                    <div\n                      className={clsx(\n                        styles['sapphire-slider__track-remaining']\n                      )}\n                    />\n                    <div\n                      className={clsx(styles['sapphire-slider__track-fill'])}\n                      style={{ width: state.getThumbPercent(0) * 100 + '%' }}\n                    />\n                    <RACSliderThumb\n                      name={name}\n                      className={(state) =>\n                        clsx(styles['sapphire-slider__thumb'], {\n                          [styles['is-focus']]: state.isFocusVisible,\n                        })\n                      }\n                      style={({ state }) => {\n                        // Pad the thumb position, so it doesn't go over the track\n                        const percent = Math.min(\n                          3 + state.getThumbPercent(0) * 94,\n                          100\n                        );\n                        return {\n                          left: `${percent}%`,\n                        };\n                      }}\n                    />\n                  </>\n                )}\n              </RACSliderTrack>\n            </div>\n          </RACSlider>\n        </Field.Control>\n\n        {note && <Field.Footer>{note}</Field.Footer>}\n      </Field.Context>\n    </Field>\n  );\n};\n"],"names":["RACSlider","RACSliderTrack","RACSliderThumb","state"],"mappings":";;;;;;AA6CO,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,cAAA,GAAiB,OAAA;AAAA,EACjB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAElD,EAAA,2CACG,KAAA,EAAA,EAAO,GAAG,YAAY,cAAA,EAAA,kBACrB,KAAA,CAAA,aAAA,CAAC,MAAM,OAAA,EAAN,IAAA,EACE,KAAA,oBACC,KAAA,CAAA,aAAA,CAAC,MAAM,KAAA,EAAN,IAAA,sCACE,KAAA,EAAA,IAAA,EAAO,KAAM,CAChB,CAAA,kBAGF,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,OAAA,EAAN,sBACC,KAAA,CAAA,aAAA,CAACA,QAAA,EAAA,EAAW,GAAG,KAAA,EAAO,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAA,sBACrC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,MAAA,CAAO,iBAAiB,CAAC,CAAA,EAAG,MAAK,QAAA,EAAA,kBACpD,KAAA,CAAA,aAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAC,EAAE,UAAA,OACZ,IAAA,CAAK,MAAA,CAAO,wBAAwB,CAAA,EAAG;AAAA,QACrC,CAAC,MAAA,CAAO,aAAa,CAAC,GAAG;AAAA,OAC1B;AAAA,KAAA;AAAA,IAGF,CAAC,EAAE,KAAA,EAAM,qBACR,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,OAAO,kCAAkC;AAAA;AAC3C;AAAA,KACF,kBACA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,6BAA6B,CAAC,CAAA;AAAA,QACrD,KAAA,EAAO,EAAE,KAAA,EAAO,KAAA,CAAM,gBAAgB,CAAC,CAAA,GAAI,MAAM,GAAA;AAAI;AAAA,KACvD,kBACA,KAAA,CAAA,aAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,WAAW,CAACC,MAAAA,KACV,IAAA,CAAK,MAAA,CAAO,wBAAwB,CAAA,EAAG;AAAA,UACrC,CAAC,MAAA,CAAO,UAAU,CAAC,GAAGA,MAAAA,CAAM;AAAA,SAC7B,CAAA;AAAA,QAEH,KAAA,EAAO,CAAC,EAAE,KAAA,EAAAA,QAAM,KAAM;AAEpB,UAAA,MAAM,UAAU,IAAA,CAAK,GAAA;AAAA,YACnB,CAAA,GAAIA,MAAAA,CAAM,eAAA,CAAgB,CAAC,CAAA,GAAI,EAAA;AAAA,YAC/B;AAAA,WACF;AACA,UAAA,OAAO;AAAA,YACL,IAAA,EAAM,GAAG,OAAO,CAAA,CAAA;AAAA,WAClB;AAAA,QACF;AAAA;AAAA,KAEJ;AAAA,GAGN,CACF,CACF,CAAA,EAEC,IAAA,oBAAQ,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,MAAA,EAAN,IAAA,EAAc,IAAK,CAC/B,CACF,CAAA;AAEJ;;;;"}

package/build/esm/TagGroup/src/Tag.js

@@ -1,112 +1,97 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
-import { useButton } from '@react-aria/button';
-import { useHover } from '@react-aria/interactions';
-import { useTag } from '@react-aria/tag';
-import { mergeRefs, mergeProps } from '@react-aria/utils';
+import { useButton } from 'react-aria/useButton';
+import { useHover } from 'react-aria/useHover';
+import { useTag } from 'react-aria/useTagGroup';
+import { mergeProps } from 'react-aria/mergeProps';
+import { mergeRefs } from 'react-aria/mergeRefs';
 import { useThemeCheck, TooltipIfNeeded, Icon } from '@danske/sapphire-react';
-import { Close, Error } from '@danske/sapphire-icons/react';
+import { Error, Close } from '@danske/sapphire-icons/react';
 import styles from '@danske/sapphire-css/components/tag/tag.module.css';
-import { FocusRing } from '@react-aria/focus';
+import { FocusRing } from 'react-aria/FocusRing';
 
-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;
-};
 function Tag(props) {
   useThemeCheck();
   const { hasError = false, item, state } = props;
   const ref = useRef(null);
-  const _a = useTag(props, state, ref), {
+  const {
     gridCellProps,
     isDisabled,
     isFocused,
     isPressed,
     removeButtonProps,
-    rowProps: _b
-  } = _a, _c = _b, { onKeyDown } = _c, rowProps = __objRest(_c, ["onKeyDown"]), otherProps = __objRest(_a, [
-    "gridCellProps",
-    "isDisabled",
-    "isFocused",
-    "isPressed",
-    "removeButtonProps",
-    "rowProps"
-  ]);
+    rowProps: { onKeyDown, ...rowProps },
+    ...otherProps
+  } = useTag(props, state, ref);
   const { hoverProps, isHovered } = useHover({ isDisabled });
   const hasAction = otherProps.hasAction;
-  return /* @__PURE__ */ React.createElement(TooltipIfNeeded, {
-    title: item.rendered
-  }, (tooltipRef, tooltipProps) => {
-    const _a2 = tooltipProps || {}, { ref: tooltipTargetRef } = _a2, restTooltipProps = __objRest(_a2, ["ref"]);
-    return /* @__PURE__ */ React.createElement(FocusRing, {
-      focusRingClass: styles["is-focus"]
-    }, /* @__PURE__ */ React.createElement("div", __spreadValues(__spreadProps(__spreadValues({
-      ref: mergeRefs(ref, tooltipTargetRef)
-    }, mergeProps({
-      onKeyDown: (e) => {
-        if (e.key !== " ") {
-          onKeyDown == null ? void 0 : onKeyDown(e);
-        } else {
-          e.preventDefault();
-        }
-      }
-    }, rowProps, hoverProps, restTooltipProps)), {
-      className: clsx(styles["sapphire-tag"], styles["js-focus"], styles["js-hover"], {
-        [styles["sapphire-tag--actionable"]]: hasAction,
-        [styles["is-active"]]: hasAction && isPressed,
-        [styles["is-hover"]]: hasAction && isHovered,
-        [styles["is-disabled"]]: isDisabled
-      })
-    }), hasError ? { "aria-invalid": true } : {}), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, gridCellProps), {
-      className: styles["sapphire-tag__content"]
-    }), hasError && !isDisabled && /* @__PURE__ */ React.createElement(IconError, null), /* @__PURE__ */ React.createElement("span", {
-      ref: tooltipRef,
-      className: styles["sapphire-tag__label"]
-    }, item.rendered), !isDisabled && props.allowsRemoving && /* @__PURE__ */ React.createElement(RemoveButton, __spreadValues({}, removeButtonProps)))));
+  return /* @__PURE__ */ React.createElement(TooltipIfNeeded, { title: item.rendered }, (tooltipRef, tooltipProps) => {
+    const { ref: tooltipTargetRef, ...restTooltipProps } = tooltipProps || {};
+    return /* @__PURE__ */ React.createElement(FocusRing, { focusRingClass: styles["is-focus"] }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: mergeRefs(ref, tooltipTargetRef),
+        ...mergeProps(
+          {
+            onKeyDown: (e) => {
+              if (e.key !== " ") {
+                onKeyDown?.(e);
+              } else {
+                e.preventDefault();
+              }
+            }
+          },
+          rowProps,
+          hoverProps,
+          restTooltipProps
+        ),
+        className: clsx(
+          styles["sapphire-tag"],
+          styles["js-focus"],
+          styles["js-hover"],
+          {
+            [styles["sapphire-tag--actionable"]]: hasAction,
+            [styles["is-active"]]: hasAction && isPressed,
+            [styles["is-hover"]]: hasAction && isHovered,
+            [styles["is-disabled"]]: isDisabled
+          }
+        ),
+        ...hasError ? { "aria-invalid": true } : {}
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ...gridCellProps,
+          className: styles["sapphire-tag__content"]
+        },
+        hasError && !isDisabled && /* @__PURE__ */ React.createElement(IconError, null),
+        /* @__PURE__ */ React.createElement(
+          "span",
+          {
+            ref: tooltipRef,
+            className: styles["sapphire-tag__label"]
+          },
+          item.rendered
+        ),
+        !isDisabled && props.allowsRemoving && /* @__PURE__ */ React.createElement(RemoveButton, { ...removeButtonProps })
+      )
+    ));
   });
 }
 function RemoveButton(removeButtonProps) {
   const buttonRef = useRef(null);
   const { buttonProps } = useButton(removeButtonProps, buttonRef);
-  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, buttonProps), {
-    className: clsx(styles["sapphire-tag__button"], styles["js-focus"])
-  }), /* @__PURE__ */ React.createElement(Icon, {
-    size: "sm"
-  }, /* @__PURE__ */ React.createElement(Close, null)));
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      ...buttonProps,
+      className: clsx(styles["sapphire-tag__button"], styles["js-focus"])
+    },
+    /* @__PURE__ */ React.createElement(Icon, { size: "sm" }, /* @__PURE__ */ React.createElement(Close, null))
+  );
 }
 const IconError = () => {
-  return /* @__PURE__ */ React.createElement("span", {
-    className: clsx(styles["sapphire-tag__error-icon"])
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    size: "sm"
-  }, /* @__PURE__ */ React.createElement(Error, null)));
+  return /* @__PURE__ */ React.createElement("span", { className: clsx(styles["sapphire-tag__error-icon"]) }, /* @__PURE__ */ React.createElement(Icon, { size: "sm" }, /* @__PURE__ */ React.createElement(Error, null)));
 };
 
 export { Tag };

package/build/esm/TagGroup/src/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/TagGroup/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { useTag } from '@react-aria/tag';\nimport { mergeProps, mergeRefs } from '@react-aria/utils';\nimport type { ListState } from '@react-stately/list';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { Icon, useThemeCheck, TooltipIfNeeded } from '@danske/sapphire-react';\nimport { Close, Error } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\nimport { FocusRing } from '@react-aria/focus';\n\nexport interface TagProps<T> {\n  /**\n   * Object representing the tag. Contains relevant information about the tag.\n   */\n  item: Node<T>;\n  /**\n   * State for TagGroup, returned by `useListState`\n   */\n  state: ListState<T>;\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n  /**\n   * Control whether the tag is removable or not.\n   * This behavior is overridden to `false` if the tag is disabled.\n   *\n   * @default false\n   */\n  allowsRemoving?: boolean;\n}\n\nexport function Tag<T>(props: TagProps<T>): React.JSX.Element {\n  useThemeCheck();\n  const { hasError = false, item, state } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    gridCellProps,\n    isDisabled,\n    isFocused,\n    isPressed,\n    removeButtonProps,\n    rowProps: { onKeyDown, ...rowProps },\n    ...otherProps\n  } = useTag(props, state, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  /* hasAction prop is passed when onAction is present, we are using it to set the hover and action classes.\n  The workaround below is made because AriaTagProps Omit's hasAction to avoid typecheck error */\n  const hasAction = (otherProps as any).hasAction;\n\n  return (\n    <TooltipIfNeeded<HTMLDivElement> title={item.rendered}>\n      {(tooltipRef, tooltipProps) => {\n        const { ref: tooltipTargetRef, ...restTooltipProps } =\n          tooltipProps || {};\n        return (\n          <FocusRing focusRingClass={styles['is-focus']}>\n            <div\n              ref={mergeRefs(ref, tooltipTargetRef)}\n              {...mergeProps(\n                {\n                  onKeyDown: (e: React.KeyboardEvent<FocusableElement>) => {\n                    /* We are removing Space key interaction and prevent default behavior to avoid isPressed prop being set\n                  as we do not want to apply is-active class on \"Space\" interaction when having actionable tags with onAction or link */\n                    if (e.key !== ' ') {\n                      onKeyDown?.(e);\n                    } else {\n                      e.preventDefault();\n                    }\n                  },\n                },\n                rowProps,\n                hoverProps,\n                restTooltipProps\n              )}\n              className={clsx(\n                styles['sapphire-tag'],\n                styles['js-focus'],\n                styles['js-hover'],\n                {\n                  [styles['sapphire-tag--actionable']]: hasAction,\n                  [styles['is-active']]: hasAction && isPressed,\n                  [styles['is-hover']]: hasAction && isHovered,\n                  [styles['is-disabled']]: isDisabled,\n                }\n              )}\n              {...(hasError ? { 'aria-invalid': true } : {})}\n            >\n              <div\n                {...gridCellProps}\n                className={styles['sapphire-tag__content']}\n              >\n                {hasError && !isDisabled && <IconError />}\n                <span\n                  ref={tooltipRef as React.Ref<HTMLSpanElement>}\n                  className={styles['sapphire-tag__label']}\n                >\n                  {item.rendered}\n                </span>\n                {!isDisabled && props.allowsRemoving && (\n                  <RemoveButton {...(removeButtonProps as AriaButtonProps)} />\n                )}\n              </div>\n            </div>\n          </FocusRing>\n        );\n      }}\n    </TooltipIfNeeded>\n  );\n}\n\nfunction RemoveButton(removeButtonProps: AriaButtonProps) {\n  const buttonRef = useRef(null);\n  const { buttonProps } = useButton(removeButtonProps, buttonRef);\n  return (\n    <button\n      {...buttonProps}\n      className={clsx(styles['sapphire-tag__button'], styles['js-focus'])}\n    >\n      <Icon size=\"sm\">\n        <Close />\n      </Icon>\n    </button>\n  );\n}\n\nconst IconError = () => {\n  return (\n    <span className={clsx(styles['sapphire-tag__error-icon'])}>\n      <Icon size=\"sm\">\n        <Error />\n      </Icon>\n    </span>\n  );\n};\n"],"names":["Error2"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/TagGroup/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from 'react-aria/useButton';\nimport { useHover } from 'react-aria/useHover';\nimport { useTag } from 'react-aria/useTagGroup';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { mergeRefs } from 'react-aria/mergeRefs';\nimport type { ListState } from 'react-stately/useListState';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { Icon, useThemeCheck, TooltipIfNeeded } from '@danske/sapphire-react';\nimport { Close, Error } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\nimport { FocusRing } from 'react-aria/FocusRing';\n\nexport interface TagProps<T> {\n  /**\n   * Object representing the tag. Contains relevant information about the tag.\n   */\n  item: Node<T>;\n  /**\n   * State for TagGroup, returned by `useListState`\n   */\n  state: ListState<T>;\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n  /**\n   * Control whether the tag is removable or not.\n   * This behavior is overridden to `false` if the tag is disabled.\n   *\n   * @default false\n   */\n  allowsRemoving?: boolean;\n}\n\nexport function Tag<T>(props: TagProps<T>): React.JSX.Element {\n  useThemeCheck();\n  const { hasError = false, item, state } = props;\n  const ref = useRef<HTMLDivElement>(null);\n  const {\n    gridCellProps,\n    isDisabled,\n    isFocused,\n    isPressed,\n    removeButtonProps,\n    rowProps: { onKeyDown, ...rowProps },\n    ...otherProps\n  } = useTag(props, state, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled });\n  /* hasAction prop is passed when onAction is present, we are using it to set the hover and action classes.\n  The workaround below is made because AriaTagProps Omit's hasAction to avoid typecheck error */\n  const hasAction = (otherProps as any).hasAction;\n\n  return (\n    <TooltipIfNeeded<HTMLDivElement> title={item.rendered}>\n      {(tooltipRef, tooltipProps) => {\n        const { ref: tooltipTargetRef, ...restTooltipProps } =\n          tooltipProps || {};\n        return (\n          <FocusRing focusRingClass={styles['is-focus']}>\n            <div\n              ref={mergeRefs(ref, tooltipTargetRef)}\n              {...mergeProps(\n                {\n                  onKeyDown: (e: React.KeyboardEvent<FocusableElement>) => {\n                    /* We are removing Space key interaction and prevent default behavior to avoid isPressed prop being set\n                  as we do not want to apply is-active class on \"Space\" interaction when having actionable tags with onAction or link */\n                    if (e.key !== ' ') {\n                      onKeyDown?.(e);\n                    } else {\n                      e.preventDefault();\n                    }\n                  },\n                },\n                rowProps,\n                hoverProps,\n                restTooltipProps\n              )}\n              className={clsx(\n                styles['sapphire-tag'],\n                styles['js-focus'],\n                styles['js-hover'],\n                {\n                  [styles['sapphire-tag--actionable']]: hasAction,\n                  [styles['is-active']]: hasAction && isPressed,\n                  [styles['is-hover']]: hasAction && isHovered,\n                  [styles['is-disabled']]: isDisabled,\n                }\n              )}\n              {...(hasError ? { 'aria-invalid': true } : {})}\n            >\n              <div\n                {...gridCellProps}\n                className={styles['sapphire-tag__content']}\n              >\n                {hasError && !isDisabled && <IconError />}\n                <span\n                  ref={tooltipRef as React.Ref<HTMLSpanElement>}\n                  className={styles['sapphire-tag__label']}\n                >\n                  {item.rendered}\n                </span>\n                {!isDisabled && props.allowsRemoving && (\n                  <RemoveButton {...(removeButtonProps as AriaButtonProps)} />\n                )}\n              </div>\n            </div>\n          </FocusRing>\n        );\n      }}\n    </TooltipIfNeeded>\n  );\n}\n\nfunction RemoveButton(removeButtonProps: AriaButtonProps) {\n  const buttonRef = useRef(null);\n  const { buttonProps } = useButton(removeButtonProps, buttonRef);\n  return (\n    <button\n      {...buttonProps}\n      className={clsx(styles['sapphire-tag__button'], styles['js-focus'])}\n    >\n      <Icon size=\"sm\">\n        <Close />\n      </Icon>\n    </button>\n  );\n}\n\nconst IconError = () => {\n  return (\n    <span className={clsx(styles['sapphire-tag__error-icon'])}>\n      <Icon size=\"sm\">\n        <Error />\n      </Icon>\n    </span>\n  );\n};\n"],"names":[],"mappings":"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"}

package/build/esm/TagGroup/src/TagGroup.js

@@ -1,93 +1,72 @@
 import React, { useRef } from 'react';
-import { useTagGroup } from '@react-aria/tag';
-import { useListState } from '@react-stately/list';
+import { useTagGroup } from 'react-aria/useTagGroup';
+import { useListState } from 'react-stately/useListState';
 import { useThemeCheck, Field, Label } from '@danske/sapphire-react';
 import styles from '@danske/sapphire-css/components/tag/tag.module.css';
 import { Tag } from './Tag.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;
-};
 function TagGroup(props) {
   useThemeCheck();
-  const _a = props, {
+  const {
     contextualHelp,
     errorMessage,
     label: labelText,
     labelPlacement = "above",
     note,
-    onRemove: originalOnRemove
-  } = _a, otherProps = __objRest(_a, [
-    "contextualHelp",
-    "errorMessage",
-    "label",
-    "labelPlacement",
-    "note",
-    "onRemove"
-  ]);
+    onRemove: originalOnRemove,
+    ...otherProps
+  } = props;
   const ref = useRef(null);
   const state = useListState(props);
   const onRemove = originalOnRemove ? (keys) => {
-    console.warn("The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead.");
+    console.warn(
+      "The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead."
+    );
     originalOnRemove(keys);
   } : (keys) => {
     Array.from(keys).forEach((key) => {
-      var _a2, _b;
       const item = state.collection.getItem(key);
       if (item) {
-        (_b = (_a2 = item.props).onRemove) == null ? void 0 : _b.call(_a2);
+        item.props.onRemove?.();
       }
     });
   };
-  const { descriptionProps, gridProps, labelProps, errorMessageProps } = useTagGroup(__spreadProps(__spreadValues({}, props), { onRemove }), state, ref);
-  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, otherProps), {
-    labelPlacement,
-    labelVerticalAlignment: "top",
-    noDefaultWidth: true
-  }), /* @__PURE__ */ React.createElement(Field.Context, {
-    descriptionProps: errorMessage ? errorMessageProps : descriptionProps
-  }, (labelText || contextualHelp) && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
-    contextualHelp
-  }), labelText)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, gridProps), {
-    ref,
-    className: styles["sapphire-tag-group"]
-  }), Array.from(state.collection).map((item) => /* @__PURE__ */ React.createElement(Tag, {
-    key: item.key,
-    item,
-    state,
-    hasError: item.props.hasError,
-    allowsRemoving: !!originalOnRemove || !!item.props.onRemove
-  })))), (note || errorMessage) && (errorMessage ? /* @__PURE__ */ React.createElement(Field.Footer, null, /* @__PURE__ */ React.createElement(Field.Note, {
-    variant: "error"
-  }, errorMessage)) : /* @__PURE__ */ React.createElement(Field.Footer, null, note))));
+  const { descriptionProps, gridProps, labelProps, errorMessageProps } = useTagGroup({ ...props, onRemove }, state, ref);
+  return /* @__PURE__ */ React.createElement(
+    Field,
+    {
+      ...otherProps,
+      labelPlacement,
+      labelVerticalAlignment: "top",
+      noDefaultWidth: true
+    },
+    /* @__PURE__ */ React.createElement(
+      Field.Context,
+      {
+        descriptionProps: errorMessage ? errorMessageProps : descriptionProps
+      },
+      (labelText || contextualHelp) && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, { ...labelProps, contextualHelp }, labelText)),
+      /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          ...gridProps,
+          ref,
+          className: styles["sapphire-tag-group"]
+        },
+        Array.from(state.collection).map((item) => /* @__PURE__ */ React.createElement(
+          Tag,
+          {
+            key: item.key,
+            item,
+            state,
+            hasError: item.props.hasError,
+            allowsRemoving: !!originalOnRemove || !!item.props.onRemove
+          }
+        ))
+      )),
+      (note || errorMessage) && (errorMessage ? /* @__PURE__ */ React.createElement(Field.Footer, null, /* @__PURE__ */ React.createElement(Field.Note, { variant: "error" }, errorMessage)) : /* @__PURE__ */ React.createElement(Field.Footer, null, note))
+    )
+  );
 }
 
 export { TagGroup };