@danske/sapphire-react-lab 0.106.1 → 0.106.3

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

@@ -2,8 +2,9 @@ import clsx from 'clsx';
 import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
 import { useThemeCheck, ThemeRoot, useSapphireStyleProps } from '@danske/sapphire-react';
 import React from 'react';
-import { mergeProps, filterDOMProps } from '@react-aria/utils';
-import { useFocusWithin } from '@react-aria/interactions';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
+import { mergeProps } from 'react-aria/mergeProps';
+import { useFocusWithin } from 'react-aria/useFocusWithin';
 import { SidebarPanel } from './Panel.js';
 import { useSidebar } from './useSidebar.js';
 import { SecondarySidebarProvider } from './SecondarySidebarContext.js';

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":";;;;;;;;;;;AA8GO,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;;;;"}
+{"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/TagGroup/src/Tag.js

@@ -1,13 +1,14 @@
 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 { mergeProps, mergeRefs } 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 { 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';
 
 function Tag(props) {
   useThemeCheck();

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":[],"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,6 +1,6 @@
 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';

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","sources":["../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\nimport { TagItemProps } from './TagItem';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\n    // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n    Pick<\n      AriaLabelingProps,\n      'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n    >,\n    SapphireStyleProps,\n    GlobalDomAttributes {\n  /**\n   * A HelpButton element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   *\n   * @deprecated Use `onRemove` prop on the `TagItem` component instead.\n   * This prop will be removed when this component is moved to \"@danske/sapphire-react\".\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(\n  props: TagGroupProps<T>\n): React.JSX.Element {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    onRemove: originalOnRemove,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n\n  // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n  // If an external onRemove handler is provided, use it directly.\n  // Otherwise, call individual onRemove handlers on each tag item.\n  const onRemove = originalOnRemove\n    ? (keys: Set<Key>) => {\n        // eslint-disable-next-line no-console -- It's good to warn about the deprecation, but this needs to be removed alongside `onRemove`\n        console.warn(\n          'The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead.'\n        );\n        originalOnRemove(keys);\n      }\n    : (keys: Set<Key>) => {\n        // Iterate through the keys and call each item's onRemove handler\n        Array.from(keys).forEach((key) => {\n          const item = state.collection.getItem(key);\n          if (item) {\n            (item.props as TagItemProps<T>).onRemove?.();\n          }\n        });\n      };\n\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup({ ...props, onRemove }, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n      noDefaultWidth\n    >\n      <Field.Context\n        descriptionProps={errorMessage ? errorMessageProps : descriptionProps}\n      >\n        {(labelText || contextualHelp) && (\n          <Field.Label>\n            <Label {...labelProps} contextualHelp={contextualHelp}>\n              {labelText}\n            </Label>\n          </Field.Label>\n        )}\n        <Field.Control>\n          <div\n            {...gridProps}\n            ref={ref}\n            className={styles['sapphire-tag-group']}\n          >\n            {Array.from(state.collection).map((item) => (\n              <Tag\n                key={item.key}\n                item={item}\n                state={state}\n                hasError={item.props.hasError}\n                // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n                // Always allow removing if `onRemove` was provided, for backwards compatibility\n                // Allow removal of the tag item if a removal handler is provided\n                allowsRemoving={!!originalOnRemove || !!item.props.onRemove}\n              />\n            ))}\n          </div>\n        </Field.Control>\n        {(note || errorMessage) &&\n          (errorMessage ? (\n            <Field.Footer>\n              <Field.Note variant=\"error\">{errorMessage}</Field.Note>\n            </Field.Footer>\n          ) : (\n            <Field.Footer>{note}</Field.Footer>\n          ))}\n      </Field.Context>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAgEO,SAAS,SACd,KAAA,EACmB;AACnB,EAAA,aAAA,EAAc;AACd,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA,EAAO,SAAA;AAAA,IACP,cAAA,GAAiB,OAAA;AAAA,IACjB,IAAA;AAAA,IACA,QAAA,EAAU,gBAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,GAAA,GAAM,OAAO,IAAI,CAAA;AACvB,EAAA,MAAM,KAAA,GAAQ,aAAa,KAAK,CAAA;AAKhC,EAAA,MAAM,QAAA,GAAW,gBAAA,GACb,CAAC,IAAA,KAAmB;AAElB,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AACA,IAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA,EACvB,CAAA,GACA,CAAC,IAAA,KAAmB;AAElB,IAAA,KAAA,CAAM,IAAA,CAAK,IAAI,CAAA,CAAE,OAAA,CAAQ,CAAC,GAAA,KAAQ;AAChC,MAAA,MAAM,IAAA,GAAO,KAAA,CAAM,UAAA,CAAW,OAAA,CAAQ,GAAG,CAAA;AACzC,MAAA,IAAI,IAAA,EAAM;AACR,QAAC,IAAA,CAAK,MAA0B,QAAA,IAAW;AAAA,MAC7C;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAA;AAEJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,SAAA,EAAW,UAAA,EAAY,iBAAA,EAAkB,GACjE,WAAA,CAAY,EAAE,GAAG,KAAA,EAAO,QAAA,EAAS,EAAG,OAAO,GAAG,CAAA;AAEhD,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,cAAA;AAAA,MACA,sBAAA,EAAuB,KAAA;AAAA,MACvB,cAAA,EAAc;AAAA,KAAA;AAAA,oBAEd,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA,CAAM,OAAA;AAAA,MAAN;AAAA,QACC,gBAAA,EAAkB,eAAe,iBAAA,GAAoB;AAAA,OAAA;AAAA,MAAA,CAEnD,SAAA,IAAa,cAAA,qBACb,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,KAAA,EAAN,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAO,GAAG,UAAA,EAAY,cAAA,EAAA,EACpB,SACH,CACF,CAAA;AAAA,sBAEF,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,OAAA,EAAN,IAAA,kBACC,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACE,GAAG,SAAA;AAAA,UACJ,GAAA;AAAA,UACA,SAAA,EAAW,OAAO,oBAAoB;AAAA,SAAA;AAAA,QAErC,MAAM,IAAA,CAAK,KAAA,CAAM,UAAU,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,qBACjC,KAAA,CAAA,aAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,KAAK,IAAA,CAAK,GAAA;AAAA,YACV,IAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAA,EAAU,KAAK,KAAA,CAAM,QAAA;AAAA,YAIrB,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC,KAAK,KAAA,CAAM;AAAA;AAAA,SAEtD;AAAA,OAEL,CAAA;AAAA,MAAA,CACE,IAAA,IAAQ,kBACP,YAAA,mBACC,KAAA,CAAA,aAAA,CAAC,MAAM,MAAA,EAAN,IAAA,sCACE,KAAA,CAAM,IAAA,EAAN,EAAW,OAAA,EAAQ,OAAA,EAAA,EAAS,YAAa,CAC5C,CAAA,uCAEC,KAAA,CAAM,MAAA,EAAN,MAAc,IAAK,CAAA;AAAA;AAE1B,GACF;AAEJ;;;;"}
+{"version":3,"file":"TagGroup.js","sources":["../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from 'react-aria/useTagGroup';\nimport { useListState } from 'react-stately/useListState';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\nimport { TagItemProps } from './TagItem';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\n    // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n    Pick<\n      AriaLabelingProps,\n      'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n    >,\n    SapphireStyleProps,\n    GlobalDomAttributes {\n  /**\n   * A HelpButton element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   *\n   * @deprecated Use `onRemove` prop on the `TagItem` component instead.\n   * This prop will be removed when this component is moved to \"@danske/sapphire-react\".\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(\n  props: TagGroupProps<T>\n): React.JSX.Element {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    onRemove: originalOnRemove,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n\n  // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n  // If an external onRemove handler is provided, use it directly.\n  // Otherwise, call individual onRemove handlers on each tag item.\n  const onRemove = originalOnRemove\n    ? (keys: Set<Key>) => {\n        // eslint-disable-next-line no-console -- It's good to warn about the deprecation, but this needs to be removed alongside `onRemove`\n        console.warn(\n          'The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead.'\n        );\n        originalOnRemove(keys);\n      }\n    : (keys: Set<Key>) => {\n        // Iterate through the keys and call each item's onRemove handler\n        Array.from(keys).forEach((key) => {\n          const item = state.collection.getItem(key);\n          if (item) {\n            (item.props as TagItemProps<T>).onRemove?.();\n          }\n        });\n      };\n\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup({ ...props, onRemove }, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n      noDefaultWidth\n    >\n      <Field.Context\n        descriptionProps={errorMessage ? errorMessageProps : descriptionProps}\n      >\n        {(labelText || contextualHelp) && (\n          <Field.Label>\n            <Label {...labelProps} contextualHelp={contextualHelp}>\n              {labelText}\n            </Label>\n          </Field.Label>\n        )}\n        <Field.Control>\n          <div\n            {...gridProps}\n            ref={ref}\n            className={styles['sapphire-tag-group']}\n          >\n            {Array.from(state.collection).map((item) => (\n              <Tag\n                key={item.key}\n                item={item}\n                state={state}\n                hasError={item.props.hasError}\n                // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n                // Always allow removing if `onRemove` was provided, for backwards compatibility\n                // Allow removal of the tag item if a removal handler is provided\n                allowsRemoving={!!originalOnRemove || !!item.props.onRemove}\n              />\n            ))}\n          </div>\n        </Field.Control>\n        {(note || errorMessage) &&\n          (errorMessage ? (\n            <Field.Footer>\n              <Field.Note variant=\"error\">{errorMessage}</Field.Note>\n            </Field.Footer>\n          ) : (\n            <Field.Footer>{note}</Field.Footer>\n          ))}\n      </Field.Context>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAgEO,SAAS,SACd,KAAA,EACmB;AACnB,EAAA,aAAA,EAAc;AACd,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA,EAAO,SAAA;AAAA,IACP,cAAA,GAAiB,OAAA;AAAA,IACjB,IAAA;AAAA,IACA,QAAA,EAAU,gBAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,GAAA,GAAM,OAAO,IAAI,CAAA;AACvB,EAAA,MAAM,KAAA,GAAQ,aAAa,KAAK,CAAA;AAKhC,EAAA,MAAM,QAAA,GAAW,gBAAA,GACb,CAAC,IAAA,KAAmB;AAElB,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AACA,IAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA,EACvB,CAAA,GACA,CAAC,IAAA,KAAmB;AAElB,IAAA,KAAA,CAAM,IAAA,CAAK,IAAI,CAAA,CAAE,OAAA,CAAQ,CAAC,GAAA,KAAQ;AAChC,MAAA,MAAM,IAAA,GAAO,KAAA,CAAM,UAAA,CAAW,OAAA,CAAQ,GAAG,CAAA;AACzC,MAAA,IAAI,IAAA,EAAM;AACR,QAAC,IAAA,CAAK,MAA0B,QAAA,IAAW;AAAA,MAC7C;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAA;AAEJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,SAAA,EAAW,UAAA,EAAY,iBAAA,EAAkB,GACjE,WAAA,CAAY,EAAE,GAAG,KAAA,EAAO,QAAA,EAAS,EAAG,OAAO,GAAG,CAAA;AAEhD,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,cAAA;AAAA,MACA,sBAAA,EAAuB,KAAA;AAAA,MACvB,cAAA,EAAc;AAAA,KAAA;AAAA,oBAEd,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA,CAAM,OAAA;AAAA,MAAN;AAAA,QACC,gBAAA,EAAkB,eAAe,iBAAA,GAAoB;AAAA,OAAA;AAAA,MAAA,CAEnD,SAAA,IAAa,cAAA,qBACb,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,KAAA,EAAN,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAO,GAAG,UAAA,EAAY,cAAA,EAAA,EACpB,SACH,CACF,CAAA;AAAA,sBAEF,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,OAAA,EAAN,IAAA,kBACC,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACE,GAAG,SAAA;AAAA,UACJ,GAAA;AAAA,UACA,SAAA,EAAW,OAAO,oBAAoB;AAAA,SAAA;AAAA,QAErC,MAAM,IAAA,CAAK,KAAA,CAAM,UAAU,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,qBACjC,KAAA,CAAA,aAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,KAAK,IAAA,CAAK,GAAA;AAAA,YACV,IAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAA,EAAU,KAAK,KAAA,CAAM,QAAA;AAAA,YAIrB,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC,KAAK,KAAA,CAAM;AAAA;AAAA,SAEtD;AAAA,OAEL,CAAA;AAAA,MAAA,CACE,IAAA,IAAQ,kBACP,YAAA,mBACC,KAAA,CAAA,aAAA,CAAC,MAAM,MAAA,EAAN,IAAA,sCACE,KAAA,CAAM,IAAA,EAAN,EAAW,OAAA,EAAQ,OAAA,EAAA,EAAS,YAAa,CAC5C,CAAA,uCAEC,KAAA,CAAM,MAAA,EAAN,MAAc,IAAK,CAAA;AAAA;AAE1B,GACF;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-import { Item } from '@react-stately/collections';
+import { Item } from 'react-stately/Item';
 
 const TagItem = Item;
 

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

@@ -1 +1 @@
-{"version":3,"file":"TagItem.js","sources":["../../../../src/TagGroup/src/TagItem.tsx"],"sourcesContent":["import { Item } from '@react-stately/collections';\nimport { ItemProps } from '@react-types/shared';\n\nexport interface TagItemProps<T> extends ItemProps<T> {\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n\n  /**\n   * This function is called when the tag is being removed, either through\n   * clicking the \"X\" button or by any supported key combination.\n   *\n   * @default false\n   *\n   * @note If the `TagGroup` has `onRemove` prop, that implementation will take\n   * precedence over this function.\n   *\n   * @note If the `TagItem` is disabled, this function will not be called.\n   */\n  onRemove?: () => void;\n}\n\nconst TagItem = Item as <T>(props: TagItemProps<T>) => JSX.Element;\n\nexport { TagItem };\n"],"names":[],"mappings":";;AAwBA,MAAM,OAAA,GAAU;;;;"}
+{"version":3,"file":"TagItem.js","sources":["../../../../src/TagGroup/src/TagItem.tsx"],"sourcesContent":["import { Item } from 'react-stately/Item';\nimport { ItemProps } from '@react-types/shared';\n\nexport interface TagItemProps<T> extends ItemProps<T> {\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n\n  /**\n   * This function is called when the tag is being removed, either through\n   * clicking the \"X\" button or by any supported key combination.\n   *\n   * @default false\n   *\n   * @note If the `TagGroup` has `onRemove` prop, that implementation will take\n   * precedence over this function.\n   *\n   * @note If the `TagItem` is disabled, this function will not be called.\n   */\n  onRemove?: () => void;\n}\n\nconst TagItem = Item as <T>(props: TagItemProps<T>) => JSX.Element;\n\nexport { TagItem };\n"],"names":[],"mappings":";;AAwBA,MAAM,OAAA,GAAU;;;;"}

package/build/esm/TimeField/src/TimeField.js

@@ -2,12 +2,13 @@ import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import styles from '@danske/sapphire-css/components/dateField/dateField.module.css';
 import { useThemeCheck, Field, Label, IconButton, Icon } from '@danske/sapphire-react';
-import { useTimeField } from '@react-aria/datepicker';
-import { useTimeFieldState } from '@react-stately/datepicker';
-import { useLocale, useMessageFormatter } from '@react-aria/i18n';
+import { useTimeField } from 'react-aria/useTimeField';
+import { useTimeFieldState } from 'react-stately/useTimeFieldState';
+import { useLocale } from 'react-aria/I18nProvider';
+import { useMessageFormatter } from '@react-aria/i18n';
 import { TimeSegment } from './TimeFieldSegment.js';
 import { CloseOutline } from '@danske/sapphire-icons/react';
-import { useObjectRef } from '@react-aria/utils';
+import { useObjectRef } from 'react-aria/useObjectRef';
 import intlMessages from '../i18n/index.js';
 
 const isAnySegmentModified = (segments) => segments.map(({ type, isPlaceholder }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"TimeField.js","sources":["../../../../src/TimeField/src/TimeField.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  Field,\n  Label,\n  Icon,\n  IconButton,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { AriaTimeFieldProps, useTimeField } from '@react-aria/datepicker';\nimport { ForwardedRef, forwardRef, RefObject, ReactNode } from 'react';\nimport { TimeValue } from 'react-aria-components';\nimport {\n  useTimeFieldState,\n  DateSegment as DateSegmentType,\n} from '@react-stately/datepicker';\nimport { useLocale, useMessageFormatter } from '@react-aria/i18n';\nimport { TimeSegment } from './TimeFieldSegment';\nimport { CloseOutline } from '@danske/sapphire-icons/react';\nimport { useObjectRef } from '@react-aria/utils';\nimport intlMessages from '../i18n';\n\nconst isAnySegmentModified = (segments: DateSegmentType[]) =>\n  segments\n    .map(({ type, isPlaceholder }) => {\n      // type \"literal\" refers to the segment containing the non-editable separator\n      return type !== 'literal' && !isPlaceholder;\n    })\n    .some((isModified) => isModified);\n\nexport type TimeFieldProps<T extends TimeValue> = Pick<\n  AriaTimeFieldProps<T>,\n  // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n  | 'isDisabled'\n  | 'isRequired'\n  | 'isReadOnly'\n  | 'label'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'shouldForceLeadingZeros'\n> &\n  SapphireStyleProps &\n  GlobalDomAttributes & {\n    /**\n     * @default 'lg'\n     */\n    size?: 'lg' | 'md';\n    /**\n     * To visually indicate if this field is required or optional.\n     * @default false\n     */\n    necessityIndicator?: boolean;\n    /**\n     * Places the label either above (default) or on the side of the control.\n     * @default 'above'\n     */\n    labelPlacement?: 'side' | 'above';\n    /**\n     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: boolean;\n    /**\n     * Whether the input should render as having an error and an error message.\n     * This also sets the appropriate `aria` attributes on the input.\n     *\n     * A `boolean` sets the error state. Can be paired with the \"note\" prop with Field.Note variant=\"error\"\n     * A `ReactNode` sets the error state with an additional error message.\n     *\n     * **An error message is strongly recommended because an error should\n     * always have an explanation about how to fix it.**\n     */\n    error?: boolean | ReactNode;\n    /**\n     * A note to show below the input.\n     * If the input has an error message, this note will be replaced by that.\n     * Use {@Link Field.Note} to render the note.\n     */\n    note?: ReactNode;\n    /**\n     * A HelpButton to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n  };\n\nfunction _TimeField<T extends TimeValue>(\n  {\n    // TODO many other props\n    size = 'lg',\n    noClearButton = false,\n    error,\n    note,\n    contextualHelp,\n    necessityIndicator = false,\n    ...otherProps\n  }: TimeFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const timeFieldRef = useObjectRef(ref);\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const state = useTimeFieldState({\n    ...otherProps,\n    locale,\n    isInvalid: error ? true : undefined,\n  });\n\n  const { fieldProps, labelProps } = useTimeField(\n    { ...otherProps },\n    state,\n    timeFieldRef\n  );\n\n  return (\n    <Field {...otherProps} ref={ref} size={size} noShrink>\n      <Field.Context>\n        {otherProps.label && (\n          <Field.Label>\n            <Label\n              {...labelProps}\n              size={size}\n              necessityIndicator={\n                otherProps.isRequired && necessityIndicator\n                  ? 'required'\n                  : !otherProps.isRequired && necessityIndicator\n                  ? 'optional'\n                  : undefined\n              }\n              contextualHelp={contextualHelp}\n            >\n              {otherProps.label}\n            </Label>\n          </Field.Label>\n        )}\n      </Field.Context>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-date-field'], {\n            [styles['sapphire-date-field--error']]: state.isInvalid,\n            [styles['sapphire-date-field--no-clear-button']]: noClearButton,\n            [styles['sapphire-date-field--no-calendar']]: true,\n            [styles['sapphire-date-field--md']]: size === 'md',\n          })}\n        >\n          <div\n            {...fieldProps}\n            className={styles['sapphire-date-field__input']}\n            ref={timeFieldRef}\n          >\n            {state.segments.map((segment, i) => (\n              <TimeSegment key={i} segment={segment} state={state} />\n            ))}\n          </div>\n          {!noClearButton &&\n            !otherProps.isReadOnly &&\n            !otherProps.isDisabled &&\n            isAnySegmentModified(state.segments) && (\n              <IconButton\n                aria-label={formatMessage('clear')}\n                onPress={() =>\n                  state.segments.forEach((segment) =>\n                    state.clearSegment(segment.type)\n                  )\n                }\n                size={size === 'md' ? 'sm' : 'md'}\n                UNSAFE_className={clsx(\n                  styles['sapphire-date-field__button'],\n                  styles['sapphire-date-field__button--clear']\n                )}\n              >\n                <Icon>\n                  <CloseOutline />\n                </Icon>\n              </IconButton>\n            )}\n        </div>\n      </Field.Control>\n      {(!!error && typeof error !== 'boolean') || note ? (\n        <Field.Footer>\n          {!!error && typeof error !== 'boolean' ? (\n            <Field.Note variant=\"error\">{error}</Field.Note>\n          ) : note ? (\n            note\n          ) : null}\n        </Field.Footer>\n      ) : null}\n    </Field>\n  );\n}\n\nexport const TimeField = forwardRef(_TimeField) as <T extends TimeValue>(\n  props: TimeFieldProps<T> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":";;;;;;;;;;;;AAyBA,MAAM,oBAAA,GAAuB,CAAC,QAAA,KAC5B,QAAA,CACG,IAAI,CAAC,EAAE,IAAA,EAAM,aAAA,EAAc,KAAM;AAEhC,EAAA,OAAO,IAAA,KAAS,aAAa,CAAC,aAAA;AAChC,CAAC,CAAA,CACA,IAAA,CAAK,CAAC,UAAA,KAAe,UAAU,CAAA;AA6DpC,SAAS,UAAA,CACP;AAAA;AAAA,EAEE,IAAA,GAAO,IAAA;AAAA,EACP,aAAA,GAAgB,KAAA;AAAA,EAChB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA,GAAqB,KAAA;AAAA,EACrB,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM,YAAA,GAAe,aAAa,GAAG,CAAA;AACrC,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,aAAA,GAAgB,oBAAoB,YAAY,CAAA;AAEtD,EAAA,MAAM,QAAQ,iBAAA,CAAkB;AAAA,IAC9B,GAAG,UAAA;AAAA,IACH,MAAA;AAAA,IACA,SAAA,EAAW,QAAQ,IAAA,GAAO;AAAA,GAC3B,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,UAAA,EAAW,GAAI,YAAA;AAAA,IACjC,EAAE,GAAG,UAAA,EAAW;AAAA,IAChB,KAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,2CACG,KAAA,EAAA,EAAO,GAAG,UAAA,EAAY,GAAA,EAAU,MAAY,QAAA,EAAQ,IAAA,EAAA,kBACnD,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,SAAN,IAAA,EACE,UAAA,CAAW,yBACV,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,OAAN,IAAA,kBACC,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,IAAA;AAAA,MACA,kBAAA,EACE,WAAW,UAAA,IAAc,kBAAA,GACrB,aACA,CAAC,UAAA,CAAW,UAAA,IAAc,kBAAA,GAC1B,UAAA,GACA,MAAA;AAAA,MAEN;AAAA,KAAA;AAAA,IAEC,UAAA,CAAW;AAAA,GAEhB,CAEJ,CAAA,kBACA,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,SAAN,IAAA,kBACC,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,qBAAqB,CAAA,EAAG;AAAA,QAC7C,CAAC,MAAA,CAAO,4BAA4B,CAAC,GAAG,KAAA,CAAM,SAAA;AAAA,QAC9C,CAAC,MAAA,CAAO,sCAAsC,CAAC,GAAG,aAAA;AAAA,QAClD,CAAC,MAAA,CAAO,kCAAkC,CAAC,GAAG,IAAA;AAAA,QAC9C,CAAC,MAAA,CAAO,yBAAyB,CAAC,GAAG,IAAA,KAAS;AAAA,OAC/C;AAAA,KAAA;AAAA,oBAED,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,OAAO,4BAA4B,CAAA;AAAA,QAC9C,GAAA,EAAK;AAAA,OAAA;AAAA,MAEJ,KAAA,CAAM,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,EAAS,CAAA,qBAC5B,KAAA,CAAA,aAAA,CAAC,WAAA,EAAA,EAAY,GAAA,EAAK,CAAA,EAAG,OAAA,EAAkB,KAAA,EAAc,CACtD;AAAA,KACH;AAAA,IACC,CAAC,aAAA,IACA,CAAC,UAAA,CAAW,UAAA,IACZ,CAAC,UAAA,CAAW,UAAA,IACZ,oBAAA,CAAqB,KAAA,CAAM,QAAQ,CAAA,oBACjC,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,cAAc,OAAO,CAAA;AAAA,QACjC,OAAA,EAAS,MACP,KAAA,CAAM,QAAA,CAAS,OAAA;AAAA,UAAQ,CAAC,OAAA,KACtB,KAAA,CAAM,YAAA,CAAa,QAAQ,IAAI;AAAA,SACjC;AAAA,QAEF,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,QAC7B,gBAAA,EAAkB,IAAA;AAAA,UAChB,OAAO,6BAA6B,CAAA;AAAA,UACpC,OAAO,oCAAoC;AAAA;AAC7C,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,YAAA,EAAA,IAAa,CAChB;AAAA;AACF,GAGR,CAAA,EACE,CAAC,CAAC,KAAA,IAAS,OAAO,KAAA,KAAU,SAAA,IAAc,IAAA,mBAC1C,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,MAAA,EAAN,MACE,CAAC,CAAC,KAAA,IAAS,OAAO,KAAA,KAAU,SAAA,mBAC3B,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,MAAN,EAAW,OAAA,EAAQ,OAAA,EAAA,EAAS,KAAM,CAAA,GACjC,IAAA,GACF,IAAA,GACE,IACN,IACE,IACN,CAAA;AAEJ;AAEO,MAAM,SAAA,GAAY,WAAW,UAAU;;;;"}
+{"version":3,"file":"TimeField.js","sources":["../../../../src/TimeField/src/TimeField.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  Field,\n  Label,\n  Icon,\n  IconButton,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { AriaTimeFieldProps, useTimeField } from 'react-aria/useTimeField';\nimport { ForwardedRef, forwardRef, RefObject, ReactNode } from 'react';\nimport { TimeValue } from 'react-aria-components';\nimport { DateSegment as DateSegmentType } from 'react-stately/useDateFieldState';\nimport { useTimeFieldState } from 'react-stately/useTimeFieldState';\nimport { useLocale } from 'react-aria/I18nProvider';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport { TimeSegment } from './TimeFieldSegment';\nimport { CloseOutline } from '@danske/sapphire-icons/react';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport intlMessages from '../i18n';\n\nconst isAnySegmentModified = (segments: DateSegmentType[]) =>\n  segments\n    .map(({ type, isPlaceholder }) => {\n      // type \"literal\" refers to the segment containing the non-editable separator\n      return type !== 'literal' && !isPlaceholder;\n    })\n    .some((isModified) => isModified);\n\nexport type TimeFieldProps<T extends TimeValue> = Pick<\n  AriaTimeFieldProps<T>,\n  // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n  | 'isDisabled'\n  | 'isRequired'\n  | 'isReadOnly'\n  | 'label'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'shouldForceLeadingZeros'\n> &\n  SapphireStyleProps &\n  GlobalDomAttributes & {\n    /**\n     * @default 'lg'\n     */\n    size?: 'lg' | 'md';\n    /**\n     * To visually indicate if this field is required or optional.\n     * @default false\n     */\n    necessityIndicator?: boolean;\n    /**\n     * Places the label either above (default) or on the side of the control.\n     * @default 'above'\n     */\n    labelPlacement?: 'side' | 'above';\n    /**\n     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: boolean;\n    /**\n     * Whether the input should render as having an error and an error message.\n     * This also sets the appropriate `aria` attributes on the input.\n     *\n     * A `boolean` sets the error state. Can be paired with the \"note\" prop with Field.Note variant=\"error\"\n     * A `ReactNode` sets the error state with an additional error message.\n     *\n     * **An error message is strongly recommended because an error should\n     * always have an explanation about how to fix it.**\n     */\n    error?: boolean | ReactNode;\n    /**\n     * A note to show below the input.\n     * If the input has an error message, this note will be replaced by that.\n     * Use {@Link Field.Note} to render the note.\n     */\n    note?: ReactNode;\n    /**\n     * A HelpButton to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n  };\n\nfunction _TimeField<T extends TimeValue>(\n  {\n    // TODO many other props\n    size = 'lg',\n    noClearButton = false,\n    error,\n    note,\n    contextualHelp,\n    necessityIndicator = false,\n    ...otherProps\n  }: TimeFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const timeFieldRef = useObjectRef(ref);\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const state = useTimeFieldState({\n    ...otherProps,\n    locale,\n    isInvalid: error ? true : undefined,\n  });\n\n  const { fieldProps, labelProps } = useTimeField(\n    { ...otherProps },\n    state,\n    timeFieldRef\n  );\n\n  return (\n    <Field {...otherProps} ref={ref} size={size} noShrink>\n      <Field.Context>\n        {otherProps.label && (\n          <Field.Label>\n            <Label\n              {...labelProps}\n              size={size}\n              necessityIndicator={\n                otherProps.isRequired && necessityIndicator\n                  ? 'required'\n                  : !otherProps.isRequired && necessityIndicator\n                  ? 'optional'\n                  : undefined\n              }\n              contextualHelp={contextualHelp}\n            >\n              {otherProps.label}\n            </Label>\n          </Field.Label>\n        )}\n      </Field.Context>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-date-field'], {\n            [styles['sapphire-date-field--error']]: state.isInvalid,\n            [styles['sapphire-date-field--no-clear-button']]: noClearButton,\n            [styles['sapphire-date-field--no-calendar']]: true,\n            [styles['sapphire-date-field--md']]: size === 'md',\n          })}\n        >\n          <div\n            {...fieldProps}\n            className={styles['sapphire-date-field__input']}\n            ref={timeFieldRef}\n          >\n            {state.segments.map((segment, i) => (\n              <TimeSegment key={i} segment={segment} state={state} />\n            ))}\n          </div>\n          {!noClearButton &&\n            !otherProps.isReadOnly &&\n            !otherProps.isDisabled &&\n            isAnySegmentModified(state.segments) && (\n              <IconButton\n                aria-label={formatMessage('clear')}\n                onPress={() =>\n                  state.segments.forEach((segment) =>\n                    state.clearSegment(segment.type)\n                  )\n                }\n                size={size === 'md' ? 'sm' : 'md'}\n                UNSAFE_className={clsx(\n                  styles['sapphire-date-field__button'],\n                  styles['sapphire-date-field__button--clear']\n                )}\n              >\n                <Icon>\n                  <CloseOutline />\n                </Icon>\n              </IconButton>\n            )}\n        </div>\n      </Field.Control>\n      {(!!error && typeof error !== 'boolean') || note ? (\n        <Field.Footer>\n          {!!error && typeof error !== 'boolean' ? (\n            <Field.Note variant=\"error\">{error}</Field.Note>\n          ) : note ? (\n            note\n          ) : null}\n        </Field.Footer>\n      ) : null}\n    </Field>\n  );\n}\n\nexport const TimeField = forwardRef(_TimeField) as <T extends TimeValue>(\n  props: TimeFieldProps<T> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":"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"}

package/build/esm/TimeField/src/TimeFieldSegment.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { useDateSegment } from '@react-aria/datepicker';
+import { useDateSegment } from 'react-aria/useDateField';
 import styles from '@danske/sapphire-css/components/dateField/dateField.module.css';
 import clsx from 'clsx';
 

package/build/esm/TimeField/src/TimeFieldSegment.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimeFieldSegment.js","sources":["../../../../src/TimeField/src/TimeFieldSegment.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useDateSegment } from '@react-aria/datepicker';\nimport { DateSegment as DateSegmentType } from '@react-stately/datepicker';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport clsx from 'clsx';\nimport { DateSegmentProps } from '@danske/sapphire-react';\n\nexport const TimeSegment = ({ segment, state }: DateSegmentProps) =>\n  segment.type === 'hour' ||\n  segment.type === 'minute' ||\n  segment.type === 'dayPeriod' ? (\n    <EditableSegment segment={segment} state={state}></EditableSegment>\n  ) : (\n    <SeparatorSegment segment={segment} />\n  );\nconst SeparatorSegment = ({ segment }: { segment: DateSegmentType }) => (\n  <span\n    aria-hidden=\"true\"\n    className={clsx(\n      styles['sapphire-date-field__segment'],\n      styles['sapphire-date-field__segment--separator']\n    )}\n  >\n    {segment.text}\n  </span>\n);\n\nconst EditableSegment = ({ segment, state }: DateSegmentProps) => {\n  const ref = useRef(null);\n  const { segmentProps } = useDateSegment(segment, state, ref);\n\n  return (\n    <div\n      {...segmentProps}\n      style={segmentProps.style}\n      ref={ref}\n      className={clsx(styles['sapphire-date-field__segment'], {\n        [styles['sapphire-date-field__segment--filled']]:\n          !segment.isPlaceholder,\n      })}\n    >\n      {segment.text}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,WAAA,GAAc,CAAC,EAAE,OAAA,EAAS,OAAM,KAC3C,OAAA,CAAQ,IAAA,KAAS,MAAA,IACjB,OAAA,CAAQ,IAAA,KAAS,YACjB,OAAA,CAAQ,IAAA,KAAS,8BACf,KAAA,CAAA,aAAA,CAAC,eAAA,EAAA,EAAgB,SAAkB,KAAA,EAAc,CAAA,mBAEjD,KAAA,CAAA,aAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAkB;AAExC,MAAM,gBAAA,GAAmB,CAAC,EAAE,OAAA,EAAQ,qBAClC,KAAA,CAAA,aAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,aAAA,EAAY,MAAA;AAAA,IACZ,SAAA,EAAW,IAAA;AAAA,MACT,OAAO,8BAA8B,CAAA;AAAA,MACrC,OAAO,yCAAyC;AAAA;AAClD,GAAA;AAAA,EAEC,OAAA,CAAQ;AACX,CAAA;AAGF,MAAM,eAAA,GAAkB,CAAC,EAAE,OAAA,EAAS,OAAM,KAAwB;AAChE,EAAA,MAAM,GAAA,GAAM,OAAO,IAAI,CAAA;AACvB,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,cAAA,CAAe,OAAA,EAAS,OAAO,GAAG,CAAA;AAE3D,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,OAAO,YAAA,CAAa,KAAA;AAAA,MACpB,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,8BAA8B,CAAA,EAAG;AAAA,QACtD,CAAC,MAAA,CAAO,sCAAsC,CAAC,GAC7C,CAAC,OAAA,CAAQ;AAAA,OACZ;AAAA,KAAA;AAAA,IAEA,OAAA,CAAQ;AAAA,GACX;AAEJ,CAAA;;;;"}
+{"version":3,"file":"TimeFieldSegment.js","sources":["../../../../src/TimeField/src/TimeFieldSegment.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useDateSegment } from 'react-aria/useDateField';\nimport { DateSegment as DateSegmentType } from 'react-stately/useDateFieldState';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport clsx from 'clsx';\nimport { DateSegmentProps } from '@danske/sapphire-react';\n\nexport const TimeSegment = ({ segment, state }: DateSegmentProps) =>\n  segment.type === 'hour' ||\n  segment.type === 'minute' ||\n  segment.type === 'dayPeriod' ? (\n    <EditableSegment segment={segment} state={state}></EditableSegment>\n  ) : (\n    <SeparatorSegment segment={segment} />\n  );\nconst SeparatorSegment = ({ segment }: { segment: DateSegmentType }) => (\n  <span\n    aria-hidden=\"true\"\n    className={clsx(\n      styles['sapphire-date-field__segment'],\n      styles['sapphire-date-field__segment--separator']\n    )}\n  >\n    {segment.text}\n  </span>\n);\n\nconst EditableSegment = ({ segment, state }: DateSegmentProps) => {\n  const ref = useRef(null);\n  const { segmentProps } = useDateSegment(segment, state, ref);\n\n  return (\n    <div\n      {...segmentProps}\n      style={segmentProps.style}\n      ref={ref}\n      className={clsx(styles['sapphire-date-field__segment'], {\n        [styles['sapphire-date-field__segment--filled']]:\n          !segment.isPlaceholder,\n      })}\n    >\n      {segment.text}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,WAAA,GAAc,CAAC,EAAE,OAAA,EAAS,OAAM,KAC3C,OAAA,CAAQ,IAAA,KAAS,MAAA,IACjB,OAAA,CAAQ,IAAA,KAAS,YACjB,OAAA,CAAQ,IAAA,KAAS,8BACf,KAAA,CAAA,aAAA,CAAC,eAAA,EAAA,EAAgB,SAAkB,KAAA,EAAc,CAAA,mBAEjD,KAAA,CAAA,aAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAkB;AAExC,MAAM,gBAAA,GAAmB,CAAC,EAAE,OAAA,EAAQ,qBAClC,KAAA,CAAA,aAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,aAAA,EAAY,MAAA;AAAA,IACZ,SAAA,EAAW,IAAA;AAAA,MACT,OAAO,8BAA8B,CAAA;AAAA,MACrC,OAAO,yCAAyC;AAAA;AAClD,GAAA;AAAA,EAEC,OAAA,CAAQ;AACX,CAAA;AAGF,MAAM,eAAA,GAAkB,CAAC,EAAE,OAAA,EAAS,OAAM,KAAwB;AAChE,EAAA,MAAM,GAAA,GAAM,OAAO,IAAI,CAAA;AACvB,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,cAAA,CAAe,OAAA,EAAS,OAAO,GAAG,CAAA;AAE3D,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,OAAO,YAAA,CAAa,KAAA;AAAA,MACpB,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,8BAA8B,CAAA,EAAG;AAAA,QACtD,CAAC,MAAA,CAAO,sCAAsC,CAAC,GAC7C,CAAC,OAAA,CAAQ;AAAA,OACZ;AAAA,KAAA;AAAA,IAEA,OAAA,CAAQ;AAAA,GACX;AAEJ,CAAA;;;;"}

package/build/esm/index.js

@@ -17,6 +17,6 @@ export { Slider } from './Slider/index.js';
 export { TagGroup } from './TagGroup/src/TagGroup.js';
 export { TagItem } from './TagGroup/src/TagItem.js';
 export { TimeField } from './TimeField/src/TimeField.js';
-export { useLocale } from '@react-aria/i18n';
+export { useLocale } from 'react-aria/I18nProvider';
 export { AccordionContext } from './Accordion/src/AccordionContext.js';
 //# sourceMappingURL=index.js.map

package/build/index.d.ts

@@ -5,12 +5,13 @@ import { DOMProps, AriaLabelingProps, PressEvents, FocusableRefValue, Collection
 import * as _danske_sapphire_react from '@danske/sapphire-react';
 import { GlobalDomAttributes, SapphireStyleProps, TypographyHeadingProps, TypographyBodyProps, ListBoxProps, ButtonProps, PopoverTriggerProps, SearchFieldPropsWithRef, IconButtonProps, ThemeVariant, FieldProps } from '@danske/sapphire-react';
 import { DisclosureGroupProps, DisclosureProps, DisclosurePanelProps, BreadcrumbsProps as BreadcrumbsProps$1, BreadcrumbProps, SliderProps as SliderProps$1, SliderThumbProps, TimeValue } from 'react-aria-components';
-import { ComboBoxProps } from '@react-types/combobox';
-import { HoverProps, FocusWithinProps } from '@react-aria/interactions';
-import { DropOptions } from '@react-aria/dnd';
-import { AriaNumberFieldProps } from '@react-aria/numberfield';
-import { AriaTimeFieldProps } from '@react-aria/datepicker';
-export { useLocale } from '@react-aria/i18n';
+import { ComboBoxProps } from 'react-stately/useComboBoxState';
+import { HoverProps } from 'react-aria/useHover';
+import { DropOptions } from 'react-aria/useDrop';
+import { AriaNumberFieldProps } from 'react-aria/useNumberField';
+import { FocusWithinProps } from 'react-aria/useFocusWithin';
+import { AriaTimeFieldProps } from 'react-aria/useTimeField';
+export { useLocale } from 'react-aria/I18nProvider';
 
 interface AccordionProps extends GlobalDomAttributes, SapphireStyleProps, DOMProps, Pick<DisclosureGroupProps, 'allowsMultipleExpanded' | 'expandedKeys' | 'defaultExpandedKeys' | 'onExpandedChange' | 'children' | 'isDisabled'> {
     /** Set aria-level attribute for item's header. Accessibility requirement.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.106.1",
+  "version": "0.106.3",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,53 +25,28 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.12.0",
+    "@danske/sapphire-react": "^5.16.2",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@danske/sapphire-icons": "^3.1.0",
-    "@danske/sapphire-react": "^5.16.0",
+    "@danske/sapphire-icons": "^3.2.0",
+    "@danske/sapphire-react": "^5.17.0",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
     "@danske/sapphire-css": "^50.2.0",
-    "@internationalized/date": "^3.11.0",
-    "@internationalized/string": "^3.2.7",
-    "@react-aria/breadcrumbs": "^3.5.31",
-    "@react-aria/button": "^3.14.4",
-    "@react-aria/collections": "^3.0.2",
-    "@react-aria/combobox": "^3.14.2",
-    "@react-aria/datepicker": "^3.16.0",
-    "@react-aria/dialog": "^3.5.33",
-    "@react-aria/dnd": "^3.11.5",
-    "@react-aria/focus": "^3.21.4",
-    "@react-aria/i18n": "^3.12.15",
-    "@react-aria/interactions": "^3.27.0",
-    "@react-aria/label": "^3.7.24",
-    "@react-aria/listbox": "^3.15.2",
-    "@react-aria/numberfield": "^3.12.4",
-    "@react-aria/overlays": "^3.31.1",
-    "@react-aria/progress": "^3.4.29",
-    "@react-aria/tag": "^3.8.0",
-    "@react-aria/utils": "^3.33.0",
-    "@react-aria/visually-hidden": "^3.8.30",
-    "@react-spectrum/utils": "^3.12.5",
-    "@react-stately/collections": "^3.12.9",
-    "@react-stately/combobox": "^3.12.2",
-    "@react-stately/datepicker": "^3.16.0",
-    "@react-stately/list": "^3.13.3",
-    "@react-stately/numberfield": "^3.10.4",
-    "@react-stately/overlays": "^3.6.22",
-    "@react-stately/toggle": "^3.9.4",
-    "@react-stately/tree": "^3.9.5",
-    "@react-stately/utils": "^3.11.0",
-    "@react-types/dialog": "^3.5.23",
-    "@react-types/shared": "^3.33.0",
+    "@internationalized/date": "3.12.1",
+    "@internationalized/string": "3.2.8",
+    "@react-aria/i18n": "3.13.0",
+    "@react-spectrum/utils": "3.13.0",
+    "@react-types/shared": "3.34.0",
     "clsx": "^1.1.1",
-    "react-aria-components": "^1.15.1",
+    "react-aria": "3.48.0",
+    "react-aria-components": "1.17.0",
+    "react-stately": "3.46.0",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "468518f32524d0aa811f5d273a5c4d4a6b1dcf62"
+  "gitHead": "9a184dd3280a44a99d35cf7a954ba4ea2d905a92"
 }