@danske/sapphire-react-lab 0.106.2 → 0.107.0

package/build/esm/core/src/View/src/View.js

@@ -0,0 +1,60 @@
+import React, { forwardRef } from 'react';
+import { flexStylePropsHandler } from '../../Flex/src/Flex.js';
+import { gridStylePropsHandler } from '../../Grid/src/Grid.js';
+import { useSapphireStyleProps } from '../../utils/useSapphireStyleProps.js';
+import '../../utils/useSapphireTextStyleProps.js';
+import { commonStyleHandlers } from '../../utils/SapphireStyleProps.js';
+import '../../ListBox/src/StatelessListBox.js';
+import '../../Popover/src/Popover.js';
+import { useThemeCheck } from '../../utils/useThemeCheck.js';
+import 'react-aria/mergeProps';
+import 'react-aria/useButton';
+
+const viewStylePropHandlers = {
+  ...commonStyleHandlers,
+  ...flexStylePropsHandler,
+  ...gridStylePropsHandler,
+  display: "display",
+  color: "color",
+  backgroundColor: "backgroundColor",
+  border: "border",
+  borderWidth: "borderWidth",
+  borderColor: "borderColor",
+  borderStyle: "borderStyle",
+  borderLeft: "borderLeft",
+  borderLeftWidth: "borderLeftWidth",
+  borderLeftColor: "borderLeftColor",
+  borderLeftStyle: "borderLeftStyle",
+  borderRight: "borderRight",
+  borderRightWidth: "borderRightWidth",
+  borderRightColor: "borderRightColor",
+  borderRightStyle: "borderRightStyle",
+  borderTop: "borderTop",
+  borderTopWidth: "borderTopWidth",
+  borderTopColor: "borderTopColor",
+  borderTopStyle: "borderTopStyle",
+  borderBottom: "borderBottom",
+  borderBottomWidth: "borderBottomWidth",
+  borderBottomColor: "borderBottomColor",
+  borderBottomStyle: "borderBottomStyle",
+  borderRadius: "borderRadius",
+  borderTopLeftRadius: "borderTopLeftRadius",
+  borderTopRightRadius: "borderTopRightRadius",
+  borderBottomLeftRadius: "borderBottomLeftRadius",
+  borderBottomRightRadius: "borderBottomRightRadius",
+  boxShadow: "boxShadow",
+  container: "container",
+  containerType: "containerType",
+  containerName: "containerName",
+  overflow: "overflow",
+  overflowX: "overflowX",
+  overflowY: "overflowY"
+};
+forwardRef(function View2({ elementType: ElementType = "div", children, ...otherProps }, ref) {
+  useThemeCheck();
+  const { styleProps, filteredProps } = useSapphireStyleProps(otherProps, viewStylePropHandlers);
+  return /* @__PURE__ */ React.createElement(ElementType, { ...filteredProps, ...styleProps, ref }, children);
+});
+
+export { viewStylePropHandlers };
+//# sourceMappingURL=View.js.map

package/build/esm/core/src/View/src/View.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"View.js","sources":["../../../../../../../core/src/View/src/View.tsx"],"sourcesContent":["import React, {\n  ForwardedRef,\n  forwardRef,\n  JSXElementConstructor,\n  ReactNode,\n} from 'react';\nimport { DOMProps, DOMAttributes } from '@react-types/shared';\n\nimport { FlexStyleProps, flexStylePropsHandler } from '../../Flex/src/Flex';\nimport { GridStyleProps, gridStylePropsHandler } from '../../Grid/src/Grid';\nimport {\n  commonStyleHandlers,\n  ResponsiveCssProp,\n  SapphireCommonStyleProps,\n  SapphireStyleProps,\n  StyleHandlers,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '../../utils';\nimport { GlobalDomAttributes } from '../../utils/types';\n\nexport interface ViewProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps,\n    SapphireViewStyleProps,\n    DOMProps,\n    Omit<\n      DOMAttributes,\n      'children' | 'style' | 'className' | 'dangerouslySetInnerHTML'\n    > {\n  /**\n   * The element to render as the node.\n   * @default: 'div'\n   */\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  elementType?: string | JSXElementConstructor<any>;\n  /**\n   * Children to be displayed in the View.\n   */\n  children?: ReactNode;\n}\n\nexport interface SapphireViewStyleProps\n  extends SapphireCommonStyleProps,\n    FlexStyleProps,\n    GridStyleProps {\n  display?: ResponsiveCssProp<'display'>;\n\n  backgroundColor?: ResponsiveCssProp<'backgroundColor', 'color'>;\n  color?: ResponsiveCssProp<'color', 'color'>;\n\n  border?: ResponsiveCssProp<'border'>;\n  borderWidth?: ResponsiveCssProp<'borderWidth', 'size'>;\n  borderColor?: ResponsiveCssProp<'borderColor', 'color'>;\n  borderStyle?: ResponsiveCssProp<'borderColor'>;\n  borderLeft?: ResponsiveCssProp<'borderLeft'>;\n  borderLeftColor?: ResponsiveCssProp<'borderLeftColor', 'color'>;\n  borderLeftWidth?: ResponsiveCssProp<'borderLeftWidth', 'size'>;\n  borderLeftStyle?: ResponsiveCssProp<'borderLeftStyle'>;\n  borderRight?: ResponsiveCssProp<'borderRight'>;\n  borderRightColor?: ResponsiveCssProp<'borderRightColor', 'color'>;\n  borderRightWidth?: ResponsiveCssProp<'borderRightWidth', 'size'>;\n  borderRightStyle?: ResponsiveCssProp<'borderRightStyle'>;\n  borderTop?: ResponsiveCssProp<'borderTop'>;\n  borderTopColor?: ResponsiveCssProp<'borderTopColor', 'color'>;\n  borderTopWidth?: ResponsiveCssProp<'borderTopWidth', 'size'>;\n  borderTopStyle?: ResponsiveCssProp<'borderTopStyle'>;\n  borderBottom?: ResponsiveCssProp<'borderBottom'>;\n  borderBottomColor?: ResponsiveCssProp<'borderBottomColor', 'color'>;\n  borderBottomWidth?: ResponsiveCssProp<'borderBottomWidth', 'size'>;\n  borderBottomStyle?: ResponsiveCssProp<'borderBottomStyle'>;\n  borderRadius?: ResponsiveCssProp<'borderRadius', 'size'>;\n  borderTopLeftRadius?: ResponsiveCssProp<'borderTopLeftRadius', 'size'>;\n  borderTopRightRadius?: ResponsiveCssProp<'borderTopRightRadius', 'size'>;\n  borderBottomLeftRadius?: ResponsiveCssProp<'borderBottomLeftRadius', 'size'>;\n  borderBottomRightRadius?: ResponsiveCssProp<\n    'borderBottomRightRadius',\n    'size'\n  >;\n\n  boxShadow?: ResponsiveCssProp<'boxShadow', 'shadow'>;\n\n  container?: ResponsiveCssProp<'container'>;\n  containerType?: ResponsiveCssProp<'containerType'>;\n  containerName?: ResponsiveCssProp<'containerName'>;\n\n  overflow?: ResponsiveCssProp<'overflow'>;\n  overflowX?: ResponsiveCssProp<'overflowX'>;\n  overflowY?: ResponsiveCssProp<'overflowY'>;\n}\nexport const viewStylePropHandlers: StyleHandlers<SapphireViewStyleProps> = {\n  ...commonStyleHandlers,\n  ...flexStylePropsHandler,\n  ...gridStylePropsHandler,\n  display: 'display',\n  color: 'color',\n  backgroundColor: 'backgroundColor',\n  border: 'border',\n  borderWidth: 'borderWidth',\n  borderColor: 'borderColor',\n  borderStyle: 'borderStyle',\n  borderLeft: 'borderLeft',\n  borderLeftWidth: 'borderLeftWidth',\n  borderLeftColor: 'borderLeftColor',\n  borderLeftStyle: 'borderLeftStyle',\n  borderRight: 'borderRight',\n  borderRightWidth: 'borderRightWidth',\n  borderRightColor: 'borderRightColor',\n  borderRightStyle: 'borderRightStyle',\n  borderTop: 'borderTop',\n  borderTopWidth: 'borderTopWidth',\n  borderTopColor: 'borderTopColor',\n  borderTopStyle: 'borderTopStyle',\n  borderBottom: 'borderBottom',\n  borderBottomWidth: 'borderBottomWidth',\n  borderBottomColor: 'borderBottomColor',\n  borderBottomStyle: 'borderBottomStyle',\n  borderRadius: 'borderRadius',\n  borderTopLeftRadius: 'borderTopLeftRadius',\n  borderTopRightRadius: 'borderTopRightRadius',\n  borderBottomLeftRadius: 'borderBottomLeftRadius',\n  borderBottomRightRadius: 'borderBottomRightRadius',\n  boxShadow: 'boxShadow',\n  container: 'container',\n  containerType: 'containerType',\n  containerName: 'containerName',\n  overflow: 'overflow',\n  overflowX: 'overflowX',\n  overflowY: 'overflowY',\n};\n\nexport const View = forwardRef(function View(\n  { elementType: ElementType = 'div', children, ...otherProps }: ViewProps,\n  ref: ForwardedRef<HTMLElement>\n) {\n  useThemeCheck();\n\n  const { styleProps, filteredProps } = useSapphireStyleProps<\n    ViewProps,\n    SapphireViewStyleProps\n  >(otherProps, viewStylePropHandlers);\n\n  return (\n    <ElementType {...filteredProps} {...styleProps} ref={ref}>\n      {children}\n    </ElementType>\n  );\n});\n"],"names":["View"],"mappings":";;;;;;;;;;;;AA0FO,MAAM,qBAAA,GAA+D;AAAA,EAC1E,GAAG,mBAAA;AAAA,EACH,GAAG,qBAAA;AAAA,EACH,GAAG,qBAAA;AAAA,EACH,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,OAAA;AAAA,EACP,eAAA,EAAiB,iBAAA;AAAA,EACjB,MAAA,EAAQ,QAAA;AAAA,EACR,WAAA,EAAa,aAAA;AAAA,EACb,WAAA,EAAa,aAAA;AAAA,EACb,WAAA,EAAa,aAAA;AAAA,EACb,UAAA,EAAY,YAAA;AAAA,EACZ,eAAA,EAAiB,iBAAA;AAAA,EACjB,eAAA,EAAiB,iBAAA;AAAA,EACjB,eAAA,EAAiB,iBAAA;AAAA,EACjB,WAAA,EAAa,aAAA;AAAA,EACb,gBAAA,EAAkB,kBAAA;AAAA,EAClB,gBAAA,EAAkB,kBAAA;AAAA,EAClB,gBAAA,EAAkB,kBAAA;AAAA,EAClB,SAAA,EAAW,WAAA;AAAA,EACX,cAAA,EAAgB,gBAAA;AAAA,EAChB,cAAA,EAAgB,gBAAA;AAAA,EAChB,cAAA,EAAgB,gBAAA;AAAA,EAChB,YAAA,EAAc,cAAA;AAAA,EACd,iBAAA,EAAmB,mBAAA;AAAA,EACnB,iBAAA,EAAmB,mBAAA;AAAA,EACnB,iBAAA,EAAmB,mBAAA;AAAA,EACnB,YAAA,EAAc,cAAA;AAAA,EACd,mBAAA,EAAqB,qBAAA;AAAA,EACrB,oBAAA,EAAsB,sBAAA;AAAA,EACtB,sBAAA,EAAwB,wBAAA;AAAA,EACxB,uBAAA,EAAyB,yBAAA;AAAA,EACzB,SAAA,EAAW,WAAA;AAAA,EACX,SAAA,EAAW,WAAA;AAAA,EACX,aAAA,EAAe,eAAA;AAAA,EACf,aAAA,EAAe,eAAA;AAAA,EACf,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,WAAA;AAAA,EACX,SAAA,EAAW;AACb;AAEoB,UAAA,CAAW,SAASA,KAAAA,CACtC,EAAE,WAAA,EAAa,WAAA,GAAc,KAAA,EAAO,QAAA,EAAU,GAAG,UAAA,EAAW,EAC5D,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,qBAAA,CAGpC,YAAY,qBAAqB,CAAA;AAEnC,EAAA,2CACG,WAAA,EAAA,EAAa,GAAG,eAAgB,GAAG,UAAA,EAAY,OAC7C,QACH,CAAA;AAEJ,CAAC;;;;"}

package/build/esm/core/src/utils/SapphireStyleProps.js

@@ -0,0 +1,48 @@
+const isHiddenHandler = {
+  styleProp: "display",
+  convertValue: (value) => value ? "none" : void 0
+};
+const commonStyleHandlers = {
+  margin: "margin",
+  marginLeft: "marginLeft",
+  marginRight: "marginRight",
+  marginTop: "marginTop",
+  marginBottom: "marginBottom",
+  marginX: {
+    styleProps: ["marginLeft", "marginRight"]
+  },
+  marginY: {
+    styleProps: ["marginTop", "marginBottom"]
+  },
+  width: "width",
+  height: "height",
+  minWidth: "minWidth",
+  minHeight: "minHeight",
+  maxWidth: "maxWidth",
+  maxHeight: "maxHeight",
+  flex: "flex",
+  flexGrow: "flexGrow",
+  flexShrink: "flexShrink",
+  flexBasis: "flexBasis",
+  justifySelf: "justifySelf",
+  alignSelf: "alignSelf",
+  order: "order",
+  gridArea: "gridArea",
+  gridColumn: "gridColumn",
+  gridColumnEnd: "gridColumnEnd",
+  gridColumnStart: "gridColumnStart",
+  gridRow: "gridRow",
+  gridRowEnd: "gridRowEnd",
+  gridRowStart: "gridRowStart",
+  position: "position",
+  zIndex: "zIndex",
+  top: "top",
+  bottom: "bottom",
+  left: "left",
+  right: "right",
+  inset: "inset",
+  isHidden: isHiddenHandler
+};
+
+export { commonStyleHandlers };
+//# sourceMappingURL=SapphireStyleProps.js.map

package/build/esm/core/src/utils/SapphireStyleProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SapphireStyleProps.js","sources":["../../../../../../core/src/utils/SapphireStyleProps.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { tokens } from '../SapphireProvider';\nimport { type BreakpointKey } from './useBreakpointTokens';\n\nexport type BaseResponsiveProp<T> =\n  /**\n   * Support design-token breakpoint values for both media queries and container queries.\n   */\n  { [key in BreakpointKey]?: T } & {\n    /**\n     * Used when the resolved width is less than all breakpoints. Or if breakpoint\n     * detection is not possible for any reason (like being run in SSR),\n     */\n    base: T;\n  };\n\nexport type ViewportResponsiveProp<T> = BaseResponsiveProp<T> & {\n  container?: never;\n  [key: number]: never;\n};\n\nexport type ContainerResponsiveProp<T> = BaseResponsiveProp<T> & {\n  /**\n   * Provide a container name to target a specific container.\n   * If set to `true`, the element will target the closest container.\n   *\n   * When a container name is provided, the string is used as a container query selector, as per\n   * the documentation:\n   * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries#naming_containment_contexts.\n   * This functionality requires that a layout element has `containerName` property set to the same\n   * value.\n   */\n  container: true | string;\n  /**\n   * Container queries support passing a number value as a breakpoint, since some components may\n   * not take up the space required to hit the design-tokens breakpoints.\n   */\n  [key: number]: T;\n};\n\nexport type ResponsiveProp<T> =\n  | ViewportResponsiveProp<T>\n  | ContainerResponsiveProp<T>;\n\nexport type Responsive<T> = ResponsiveProp<T> | T;\n\n/**\n * Represents either a single value or a set of different values for each breakpoint.\n * In both cases, the type of the value itself comes from a CSS property specified\n * by K and also a design token (a value from `theme`) of type T, if provided.\n * By default, it doesn't allow any theme value.\n */\nexport type ResponsiveCssProp<\n  K extends keyof CSSProperties,\n  T extends keyof typeof tokens | '' = ''\n> = Responsive<\n  | CSSProperties[K]\n  | (T extends keyof typeof tokens ? ValueOf<(typeof tokens)[T]> : never)\n>;\n\ntype ValueOf<T> = T[keyof T];\n\nexport interface SapphireCommonStyleProps {\n  // Spacing\n  margin?: ResponsiveCssProp<'margin', 'size'>;\n  marginLeft?: ResponsiveCssProp<'marginLeft', 'size'>;\n  marginRight?: ResponsiveCssProp<'marginRight', 'size'>;\n  marginTop?: ResponsiveCssProp<'marginTop', 'size'>;\n  marginBottom?: ResponsiveCssProp<'marginBottom', 'size'>;\n  /**\n   * Shorthand for marginLeft and marginRight\n   */\n  marginX?: ResponsiveCssProp<'marginBottom', 'size'>;\n  /**\n   * Shorthand for marginTop and marginBottom\n   */\n  marginY?: ResponsiveCssProp<'marginBottom', 'size'>;\n  width?: ResponsiveCssProp<'width', 'size'>;\n  height?: ResponsiveCssProp<'height', 'size'>;\n  minWidth?: ResponsiveCssProp<'minWidth', 'size'>;\n  minHeight?: ResponsiveCssProp<'minHeight', 'size'>;\n  maxWidth?: ResponsiveCssProp<'maxWidth', 'size'>;\n  maxHeight?: ResponsiveCssProp<'maxHeight', 'size'>;\n\n  // Layout\n  flex?: ResponsiveCssProp<'flex'>;\n  flexGrow?: ResponsiveCssProp<'flexGrow'>;\n  flexShrink?: ResponsiveCssProp<'flexShrink'>;\n  flexBasis?: ResponsiveCssProp<'flexBasis'>;\n  justifySelf?: ResponsiveCssProp<'justifySelf'>;\n  alignSelf?: ResponsiveCssProp<'alignSelf'>;\n  order?: ResponsiveCssProp<'order'>;\n  gridArea?: ResponsiveCssProp<'gridArea'>;\n  gridColumn?: ResponsiveCssProp<'gridColumn'>;\n  gridRow?: ResponsiveCssProp<'gridRow'>;\n  gridColumnStart?: ResponsiveCssProp<'gridColumnStart'>;\n  gridColumnEnd?: ResponsiveCssProp<'gridColumnEnd'>;\n  gridRowStart?: ResponsiveCssProp<'gridRowStart'>;\n  gridRowEnd?: ResponsiveCssProp<'gridRowEnd'>;\n\n  // Positioning\n  position?: ResponsiveCssProp<'position'>;\n  zIndex?: ResponsiveCssProp<'zIndex'>;\n  top?: ResponsiveCssProp<'top', 'size'>;\n  bottom?: ResponsiveCssProp<'bottom', 'size'>;\n  left?: ResponsiveCssProp<'left', 'size'>;\n  right?: ResponsiveCssProp<'right', 'size'>;\n  inset?: ResponsiveCssProp<'marginBottom', 'size'>;\n\n  isHidden?: Responsive<boolean>;\n}\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport type StyleHandler<T extends keyof CSSProperties> =\n  | keyof CSSProperties\n  | {\n      styleProp: T;\n      convertValue: (value: any) => CSSProperties[T] | undefined;\n    }\n  | {\n      styleProps: T[];\n    };\n\nexport type StyleHandlers<\n  T extends {\n    [key: string]: ResponsiveCssProp<any, any> | Responsive<any>;\n  } = SapphireCommonStyleProps\n> = {\n  [key in keyof T]-?: StyleHandler<any>;\n};\n\nconst isHiddenHandler: StyleHandler<'display'> = {\n  styleProp: 'display',\n  convertValue: (value: boolean) => (value ? 'none' : undefined),\n};\n\nexport const commonStyleHandlers: StyleHandlers = {\n  margin: 'margin',\n  marginLeft: 'marginLeft',\n  marginRight: 'marginRight',\n  marginTop: 'marginTop',\n  marginBottom: 'marginBottom',\n  marginX: {\n    styleProps: ['marginLeft', 'marginRight'] as Array<keyof CSSProperties>,\n  },\n  marginY: {\n    styleProps: ['marginTop', 'marginBottom'] as Array<keyof CSSProperties>,\n  },\n  width: 'width',\n  height: 'height',\n  minWidth: 'minWidth',\n  minHeight: 'minHeight',\n  maxWidth: 'maxWidth',\n  maxHeight: 'maxHeight',\n  flex: 'flex',\n  flexGrow: 'flexGrow',\n  flexShrink: 'flexShrink',\n  flexBasis: 'flexBasis',\n  justifySelf: 'justifySelf',\n  alignSelf: 'alignSelf',\n  order: 'order',\n  gridArea: 'gridArea',\n  gridColumn: 'gridColumn',\n  gridColumnEnd: 'gridColumnEnd',\n  gridColumnStart: 'gridColumnStart',\n  gridRow: 'gridRow',\n  gridRowEnd: 'gridRowEnd',\n  gridRowStart: 'gridRowStart',\n  position: 'position',\n  zIndex: 'zIndex',\n  top: 'top',\n  bottom: 'bottom',\n  left: 'left',\n  right: 'right',\n  inset: 'inset',\n\n  isHidden: isHiddenHandler,\n};\n"],"names":[],"mappings":"AAmIA,MAAM,eAAA,GAA2C;AAAA,EAC/C,SAAA,EAAW,SAAA;AAAA,EACX,YAAA,EAAc,CAAC,KAAA,KAAoB,KAAA,GAAQ,MAAA,GAAS;AACtD,CAAA;AAEO,MAAM,mBAAA,GAAqC;AAAA,EAChD,MAAA,EAAQ,QAAA;AAAA,EACR,UAAA,EAAY,YAAA;AAAA,EACZ,WAAA,EAAa,aAAA;AAAA,EACb,SAAA,EAAW,WAAA;AAAA,EACX,YAAA,EAAc,cAAA;AAAA,EACd,OAAA,EAAS;AAAA,IACP,UAAA,EAAY,CAAC,YAAA,EAAc,aAAa;AAAA,GAC1C;AAAA,EACA,OAAA,EAAS;AAAA,IACP,UAAA,EAAY,CAAC,WAAA,EAAa,cAAc;AAAA,GAC1C;AAAA,EACA,KAAA,EAAO,OAAA;AAAA,EACP,MAAA,EAAQ,QAAA;AAAA,EACR,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,WAAA;AAAA,EACX,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,WAAA;AAAA,EACX,IAAA,EAAM,MAAA;AAAA,EACN,QAAA,EAAU,UAAA;AAAA,EACV,UAAA,EAAY,YAAA;AAAA,EACZ,SAAA,EAAW,WAAA;AAAA,EACX,WAAA,EAAa,aAAA;AAAA,EACb,SAAA,EAAW,WAAA;AAAA,EACX,KAAA,EAAO,OAAA;AAAA,EACP,QAAA,EAAU,UAAA;AAAA,EACV,UAAA,EAAY,YAAA;AAAA,EACZ,aAAA,EAAe,eAAA;AAAA,EACf,eAAA,EAAiB,iBAAA;AAAA,EACjB,OAAA,EAAS,SAAA;AAAA,EACT,UAAA,EAAY,YAAA;AAAA,EACZ,YAAA,EAAc,cAAA;AAAA,EACd,QAAA,EAAU,UAAA;AAAA,EACV,MAAA,EAAQ,QAAA;AAAA,EACR,GAAA,EAAK,KAAA;AAAA,EACL,MAAA,EAAQ,QAAA;AAAA,EACR,IAAA,EAAM,MAAA;AAAA,EACN,KAAA,EAAO,OAAA;AAAA,EACP,KAAA,EAAO,OAAA;AAAA,EAEP,QAAA,EAAU;AACZ;;;;"}

package/build/esm/core/src/utils/useCollectionFocusProxy.js

@@ -0,0 +1,53 @@
+import { useEffect } from 'react';
+
+const useCollectionFocusProxy = ({
+  state,
+  focusProxyRef,
+  collectionRef
+}) => {
+  useEffect(
+    () => {
+      const proxy = focusProxyRef?.current;
+      if (proxy) {
+        const onKeyDown = (event) => {
+          if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.preventDefault();
+            event.stopPropagation();
+            state.selectionManager.setFocused(true);
+            collectionRef.current?.dispatchEvent(
+              new KeyboardEvent(event.type, event)
+            );
+          } else if (event.key === "Enter" && state.selectionManager?.focusedKey != null) {
+            forwardEventToFocusedItem(event);
+            event.preventDefault();
+            event.currentTarget?.addEventListener(
+              "keyup",
+              (event2) => {
+                if (event2.key === "Enter" && state.selectionManager.focusedKey != null) {
+                  forwardEventToFocusedItem(event2);
+                }
+              },
+              { once: true, capture: true }
+            );
+          }
+          function forwardEventToFocusedItem(event2) {
+            if (state.selectionManager.focusedKey != null) {
+              collectionRef.current?.querySelector(
+                `[data-key="${state.selectionManager.focusedKey}"]`
+              )?.dispatchEvent(new KeyboardEvent(event2.type, event2));
+            }
+          }
+        };
+        proxy.addEventListener("keydown", onKeyDown);
+        return () => {
+          proxy.removeEventListener("keydown", onKeyDown);
+        };
+      }
+    }
+    /* with no dependency here, event listeners are reattached on each render, but that's the case when unmemoized
+    event handlers are passed to elements too (e.g., when using any react-aria hook) */
+  );
+};
+
+export { useCollectionFocusProxy };
+//# sourceMappingURL=useCollectionFocusProxy.js.map

package/build/esm/core/src/utils/useCollectionFocusProxy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollectionFocusProxy.js","sources":["../../../../../../core/src/utils/useCollectionFocusProxy.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\nimport { SelectionManager } from 'react-stately/private/selection/SelectionManager';\nimport { Collection, Node } from '@react-types/shared';\n\n/**\n * A solution for connecting a collection to a search input so that the collection can still be navigated by keyboard\n * while the input is focused. It works by replaying certain keyboard events on the collection container and focused\n * item. An alternative approach (which is used in react-aria's useCombobox) is to use useSelectableCollection\n * separately for the input, but the biggest issue with that approach is that it's limiting in the following ways:\n * - Rendering input should be a part of the same component that renders the collection. Having specific components\n *   for use cases that require a search input is not flexible enough.\n *   Also, the input and the collection may need to be in different layouts in some use cases.\n *   Decoupling the rendering of the input and collection is a more flexible solution.\n * - The same options used for collection should be passed to the input field for behavior consistency,\n *   and that is prone to error.\n *   Some of these options, like `keyboardDelegate` can even have a default value in hooks like\n *   `useSelectableList`.\n *   It means making sure the same value is passed to the useSelectableCollection for input\n *   would require not using the default value, since the same value can't be accessed.\n *\n * With this event-forwarding approach, it's an arrow up or down event would behave exactly like it was triggered on\n * the collection itself, leaving no room for behavior discrepancies. But it has a few drawbacks:\n * - Although small, there is still some coupling between this code and implementation of the collection component.\n *   More specifically, this implementation assumes the following things:\n *   - \"Enter\" keys (selection or action) are handled on items, but arrow keys are handled on the collection element.\n *   - \"[data-key] attribute is set on items. That is used to find the element for the focused item (which, of course,\n *     is not actually focused while the input is).\n *\n * Note: there has been some addition to react-aria useSelectableCollection and useSelectableItem hooks\n * based on CustomEvent and a similar event reply mechanism in useAutocomplete.\n * It may be possible to replace this hook with built-in functionality in react-aria at some point.\n * But at the moment, it seems like that implementation is too coupled with the autocompletion use case, while\n * what is supported here is more generic and allows for the connected search input use case too.\n */\n\nexport const useCollectionFocusProxy = <T>({\n  state,\n  focusProxyRef,\n  collectionRef,\n}: {\n  focusProxyRef: RefObject<HTMLElement> | undefined;\n  collectionRef: RefObject<HTMLElement>;\n  state: {\n    /** A collection of items in the list. */\n    collection: Collection<Node<T>>;\n    /** A selection manager to read and update multiple selection state. */\n    selectionManager: SelectionManager;\n  };\n}): void => {\n  useEffect(\n    () => {\n      const proxy = focusProxyRef?.current;\n      if (proxy) {\n        const onKeyDown = (event: KeyboardEvent) => {\n          if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            event.preventDefault();\n            event.stopPropagation();\n\n            state.selectionManager.setFocused(true);\n            collectionRef.current?.dispatchEvent(\n              new KeyboardEvent(event.type, event)\n            );\n          } else if (\n            event.key === 'Enter' &&\n            state.selectionManager?.focusedKey != null\n          ) {\n            forwardEventToFocusedItem(event);\n            event.preventDefault(); // in forms, pressing Enter on input submits the form\n            (event.currentTarget as HTMLElement)?.addEventListener(\n              'keyup',\n              (event: KeyboardEvent) => {\n                if (\n                  event.key === 'Enter' &&\n                  state.selectionManager.focusedKey != null\n                ) {\n                  // onEnter?.(state.selectionManager.focusedKey);\n                  forwardEventToFocusedItem(event);\n                }\n              },\n              { once: true, capture: true }\n            );\n          }\n          function forwardEventToFocusedItem(event: KeyboardEvent) {\n            if (state.selectionManager.focusedKey != null) {\n              collectionRef.current\n                ?.querySelector(\n                  `[data-key=\"${state.selectionManager.focusedKey}\"]`\n                )\n                ?.dispatchEvent(new KeyboardEvent(event.type, event));\n            }\n          }\n        };\n        proxy.addEventListener('keydown', onKeyDown);\n        return () => {\n          proxy.removeEventListener('keydown', onKeyDown);\n        };\n      }\n    } /* with no dependency here, event listeners are reattached on each render, but that's the case when unmemoized\n    event handlers are passed to elements too (e.g., when using any react-aria hook) */\n  );\n};\n"],"names":["event"],"mappings":";;AAmCO,MAAM,0BAA0B,CAAI;AAAA,EACzC,KAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,KASY;AACV,EAAA,SAAA;AAAA,IACE,MAAM;AACJ,MAAA,MAAM,QAAQ,aAAA,EAAe,OAAA;AAC7B,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,MAAM,SAAA,GAAY,CAAC,KAAA,KAAyB;AAC1C,UAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,SAAA,IAAa,KAAA,CAAM,QAAQ,WAAA,EAAa;AACxD,YAAA,KAAA,CAAM,cAAA,EAAe;AACrB,YAAA,KAAA,CAAM,eAAA,EAAgB;AAEtB,YAAA,KAAA,CAAM,gBAAA,CAAiB,WAAW,IAAI,CAAA;AACtC,YAAA,aAAA,CAAc,OAAA,EAAS,aAAA;AAAA,cACrB,IAAI,aAAA,CAAc,KAAA,CAAM,IAAA,EAAM,KAAK;AAAA,aACrC;AAAA,UACF,WACE,KAAA,CAAM,GAAA,KAAQ,WACd,KAAA,CAAM,gBAAA,EAAkB,cAAc,IAAA,EACtC;AACA,YAAA,yBAAA,CAA0B,KAAK,CAAA;AAC/B,YAAA,KAAA,CAAM,cAAA,EAAe;AACrB,YAAC,MAAM,aAAA,EAA+B,gBAAA;AAAA,cACpC,OAAA;AAAA,cACA,CAACA,MAAAA,KAAyB;AACxB,gBAAA,IACEA,OAAM,GAAA,KAAQ,OAAA,IACd,KAAA,CAAM,gBAAA,CAAiB,cAAc,IAAA,EACrC;AAEA,kBAAA,yBAAA,CAA0BA,MAAK,CAAA;AAAA,gBACjC;AAAA,cACF,CAAA;AAAA,cACA,EAAE,IAAA,EAAM,IAAA,EAAM,OAAA,EAAS,IAAA;AAAK,aAC9B;AAAA,UACF;AACA,UAAA,SAAS,0BAA0BA,MAAAA,EAAsB;AACvD,YAAA,IAAI,KAAA,CAAM,gBAAA,CAAiB,UAAA,IAAc,IAAA,EAAM;AAC7C,cAAA,aAAA,CAAc,OAAA,EACV,aAAA;AAAA,gBACA,CAAA,WAAA,EAAc,KAAA,CAAM,gBAAA,CAAiB,UAAU,CAAA,EAAA;AAAA,iBAE/C,aAAA,CAAc,IAAI,cAAcA,MAAAA,CAAM,IAAA,EAAMA,MAAK,CAAC,CAAA;AAAA,YACxD;AAAA,UACF;AAAA,QACF,CAAA;AACA,QAAA,KAAA,CAAM,gBAAA,CAAiB,WAAW,SAAS,CAAA;AAC3C,QAAA,OAAO,MAAM;AACX,UAAA,KAAA,CAAM,mBAAA,CAAoB,WAAW,SAAS,CAAA;AAAA,QAChD,CAAA;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA,GAEF;AACF;;;;"}

package/build/esm/core/src/utils/usePreventTouchEnd.js

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+const usePreventTouchEnd = (ref) => useEffect(() => {
+  ref.current?.addEventListener(
+    "touchend",
+    (e) => {
+      if (e.currentTarget?.getAttribute("type") !== "submit" && typeof e.currentTarget?.getAttribute("href") !== "string") {
+        e.preventDefault();
+      }
+    },
+    { passive: false }
+  );
+}, []);
+
+export { usePreventTouchEnd };
+//# sourceMappingURL=usePreventTouchEnd.js.map

package/build/esm/core/src/utils/usePreventTouchEnd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePreventTouchEnd.js","sources":["../../../../../../core/src/utils/usePreventTouchEnd.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\n/**\n * Used to fix a react-aria issue on touch devices.\n * https://github.com/adobe/react-spectrum/issues/1513\n */\nexport const usePreventTouchEnd = (ref: RefObject<Element | null>): void =>\n  useEffect(() => {\n    ref.current?.addEventListener(\n      'touchend',\n      (e) => {\n        /**\n         * The first condition is necessary to avoid the issue that a button with\n         * type=\"submit\" inside a <form> would not trigger the form submit\n         * event on a device with touch input.\n         *\n         * The second condition is needed for thse buttons that are links\n         * underneath and will have a href. If \"touchend\" is prevented, links\n         * won't open by touch.\n         *\n         * Admittedly, this is an ugly patch, but given the react-spectrum\n         * issue it seems necessary. If this hook grows any larger after\n         * further bug reports and edge cases, we may want to reconsider\n         * this approach.\n         */\n        if (\n          (e.currentTarget as HTMLElement)?.getAttribute('type') !== 'submit' &&\n          typeof (e.currentTarget as HTMLElement)?.getAttribute('href') !==\n            'string'\n        ) {\n          e.preventDefault();\n        }\n      },\n      { passive: false }\n    );\n  }, []);\n"],"names":[],"mappings":";;AAMO,MAAM,kBAAA,GAAqB,CAAC,GAAA,KACjC,SAAA,CAAU,MAAM;AACd,EAAA,GAAA,CAAI,OAAA,EAAS,gBAAA;AAAA,IACX,UAAA;AAAA,IACA,CAAC,CAAA,KAAM;AAeL,MAAA,IACG,CAAA,CAAE,aAAA,EAA+B,YAAA,CAAa,MAAM,CAAA,KAAM,QAAA,IAC3D,OAAQ,CAAA,CAAE,aAAA,EAA+B,YAAA,CAAa,MAAM,CAAA,KAC1D,QAAA,EACF;AACA,QAAA,CAAA,CAAE,cAAA,EAAe;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,EAAE,SAAS,KAAA;AAAM,GACnB;AACF,CAAA,EAAG,EAAE;;;;"}

package/build/esm/core/src/utils/useSapphireStyleProps.js

@@ -0,0 +1,179 @@
+import { useCallback, useEffect } from 'react';
+import { commonStyleHandlers } from './SapphireStyleProps.js';
+import '@danske/sapphire-react-context';
+import { useBreakpointContext } from '../BreakpointProvider/useBreakpointContext.js';
+import { useId } from 'react-aria/useId';
+import clsx from 'clsx';
+
+const isSapphireToken = (obj) => "value" in obj;
+const resolveResponsiveValue = (matchedBreakpoints, value) => {
+  if (value && typeof value === "object") {
+    if (isSapphireToken(value)) {
+      return value.value;
+    }
+    for (const breakpoint of matchedBreakpoints) {
+      if (breakpoint === "base") {
+        continue;
+      }
+      const breakpointValue = value[breakpoint];
+      if (breakpointValue != null) {
+        if (typeof breakpointValue === "object" && isSapphireToken(breakpointValue)) {
+          return breakpointValue.value;
+        }
+        return breakpointValue;
+      }
+    }
+    const baseValue = value.base;
+    if (baseValue != null) {
+      if (typeof baseValue === "object" && isSapphireToken(baseValue)) {
+        return baseValue.value;
+      }
+      return baseValue;
+    }
+  }
+  return value;
+};
+const useResolveResponsiveValue = () => {
+  const breakpointContext = useBreakpointContext();
+  const matchedBreakpoints = breakpointContext?.matchedBreakpoints || ["base"];
+  return (value) => resolveResponsiveValue(matchedBreakpoints, value);
+};
+const generateRulePart = (containerBreakpointValue, className, key, breakpointResponsiveValue, container) => {
+  const kebabCaseKey = key.replace(
+    /[A-Z]/g,
+    (match) => `-${match.toLowerCase()}`
+  );
+  const value = breakpointResponsiveValue && typeof breakpointResponsiveValue === "object" && isSapphireToken(breakpointResponsiveValue) ? breakpointResponsiveValue.value : breakpointResponsiveValue;
+  return `
+    @container ${typeof container === "string" ? container : ""} (min-width: ${containerBreakpointValue}px) {
+      .${className} {
+        ${kebabCaseKey}: ${value};
+      }
+    }`;
+};
+const useContainerStyleProps = (props, handlers) => {
+  const uniqueId = useId().replace(/:/g, "_");
+  const elementClassName = `container-query-${uniqueId}`;
+  const breakpointContext = useBreakpointContext();
+  let stylesString = "";
+  Object.keys(props).forEach((_key) => {
+    const key = _key;
+    const responsiveValue = props[key];
+    if (!responsiveValue || !isContainerResponsiveProp(responsiveValue)) {
+      return;
+    }
+    const breakpoints = [
+      0,
+      // `value.base` should be mapped to min-width: 0px and should always be first in the stylesheet.
+      ...Object.keys(responsiveValue).filter(
+        (breakpointKey) => !["base", "container"].includes(breakpointKey)
+      )
+    ];
+    breakpoints.forEach((breakpointKey) => {
+      const isDesignTokenBreakpoint = isNaN(Number(breakpointKey));
+      const containerBreakpointValue = isDesignTokenBreakpoint ? (
+        // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain -- we are confident it's a BreakpointKey
+        breakpointContext?.breakpoints?.[breakpointKey]
+      ) : Number(breakpointKey);
+      const value = isDesignTokenBreakpoint ? responsiveValue[breakpointKey] : breakpointKey === 0 ? responsiveValue.base : responsiveValue[containerBreakpointValue];
+      Object.entries(
+        normalizeHandler(handlers[key], value ?? void 0)
+      ).forEach(([styleProp, styleValue]) => {
+        stylesString += generateRulePart(
+          containerBreakpointValue,
+          elementClassName,
+          styleProp,
+          styleValue,
+          responsiveValue.container
+        );
+      });
+    });
+  });
+  const getOrCreateStylesheet = useCallback(() => {
+    const stylesheetElementId = "container-query-stylesheet-" + uniqueId;
+    let containerQueryStylesheetElement = document.getElementById(stylesheetElementId);
+    if (!containerQueryStylesheetElement) {
+      containerQueryStylesheetElement = document.createElement("style");
+      containerQueryStylesheetElement.id = stylesheetElementId;
+      document.head.appendChild(containerQueryStylesheetElement);
+    }
+    return containerQueryStylesheetElement;
+  }, [uniqueId]);
+  useEffect(() => {
+    if (!stylesString) {
+      return;
+    }
+    const styleSheet = getOrCreateStylesheet();
+    const cssRuleNode = document.createTextNode(stylesString);
+    styleSheet.appendChild(cssRuleNode);
+    return () => {
+      styleSheet.remove();
+    };
+  }, [stylesString, getOrCreateStylesheet]);
+  return {
+    containerStylesClassName: stylesString ? elementClassName : ""
+  };
+};
+function isContainerResponsiveProp(prop) {
+  return prop && typeof prop === "object" && "container" in prop;
+}
+const useSapphireStyleProps = ({ UNSAFE_className, UNSAFE_style, ...props }, handlers = commonStyleHandlers) => {
+  const resolveResponsiveValue2 = useResolveResponsiveValue();
+  const { containerStylesClassName } = useContainerStyleProps(
+    props,
+    handlers
+  );
+  const derivedStyle = {};
+  const filteredProps = {};
+  Object.keys(props).forEach((key) => {
+    if (["style", "className"].includes(key) && typeof process !== "undefined" && process.env?.NODE_ENV === "development") {
+      return console.warn(
+        "Passing 'style' or 'className' props will have no effect. Please use supported style props directly or use UNSAFE_style or UNSAFE_className if you have no other options than applying style directly to the component."
+      );
+    }
+    const currentProp = props[key];
+    const handler = handlers[key];
+    if (handler !== void 0 && currentProp !== null) {
+      if (!isContainerResponsiveProp(currentProp)) {
+        const resolvedResponsiveValue = resolveResponsiveValue2(
+          // @ts-expect-error: TS2590: Expression produces a union type that is too complex to represent.
+          currentProp
+        );
+        Object.assign(
+          derivedStyle,
+          normalizeHandler(handler, resolvedResponsiveValue)
+        );
+      }
+    } else {
+      filteredProps[key] = currentProp;
+    }
+  });
+  return {
+    styleProps: {
+      style: { ...UNSAFE_style, ...derivedStyle },
+      className: clsx(UNSAFE_className, containerStylesClassName)
+    },
+    filteredProps
+  };
+};
+function normalizeHandler(handler, value) {
+  const result = {};
+  if (value == void 0) {
+    return result;
+  }
+  if (typeof handler === "object") {
+    if ("convertValue" in handler) {
+      value = handler.convertValue(value);
+    }
+    const styleProps = "styleProps" in handler ? handler.styleProps : [handler.styleProp];
+    styleProps.forEach((styleProp) => {
+      result[styleProp] = value;
+    });
+  } else {
+    result[handler] = value;
+  }
+  return result;
+}
+
+export { resolveResponsiveValue, useContainerStyleProps, useResolveResponsiveValue, useSapphireStyleProps };
+//# sourceMappingURL=useSapphireStyleProps.js.map

package/build/esm/core/src/utils/useSapphireStyleProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSapphireStyleProps.js","sources":["../../../../../../core/src/utils/useSapphireStyleProps.ts"],"sourcesContent":["import { CSSProperties, useCallback, useEffect } from 'react';\nimport {\n  commonStyleHandlers,\n  ContainerResponsiveProp,\n  Responsive,\n  SapphireCommonStyleProps,\n  StyleHandler,\n  StyleHandlers,\n} from './SapphireStyleProps';\nimport { type BreakpointKey } from './useBreakpointTokens';\nimport { useBreakpointContext } from '../BreakpointProvider';\nimport { useId } from 'react-aria/useId';\nimport clsx from 'clsx';\n\nconst isSapphireToken = (obj: Record<string, unknown>): obj is SapphireToken =>\n  'value' in obj;\n\nexport const resolveResponsiveValue = <\n  T extends string | number | undefined | SapphireToken\n>(\n  matchedBreakpoints: BreakpointKey[],\n  value?: Responsive<T | SapphireToken>\n): T | string => {\n  if (value && typeof value === 'object') {\n    // Handle SapphireToken case like `{ value: 'var(--sapphire-semantic-size-width-panel-sm)' }`\n    if (isSapphireToken(value)) {\n      return (value as SapphireToken).value;\n    }\n    // `base` is the fallback breakpoint and must not shadow matched breakpoints.\n    for (const breakpoint of matchedBreakpoints as Array<\n      BreakpointKey | 'base'\n    >) {\n      if (breakpoint === 'base') {\n        continue;\n      }\n\n      const breakpointValue = value[breakpoint];\n      if (breakpointValue != null) {\n        // Handle case where a breakpoint has a SapphireToken like `{ sm: { value: 'var(--sapphire-semantic-size-width-panel-sm)' } }`\n        if (\n          typeof breakpointValue === 'object' &&\n          isSapphireToken(breakpointValue)\n        ) {\n          return breakpointValue.value;\n        }\n\n        // Handle case where a breakpoint has a 'string' | 'number' | 'undefined' value like `{ sm: '11px' }`\n        return breakpointValue as T;\n      }\n    }\n\n    const baseValue = value.base;\n    if (baseValue != null) {\n      if (typeof baseValue === 'object' && isSapphireToken(baseValue)) {\n        return baseValue.value;\n      }\n      return baseValue as T;\n    }\n  }\n\n  // Handle 'string' | 'number' | 'undefined' case\n  return value as T;\n};\n\n// Unsure why an interface makes the typeguard fail - perhaps something that is fixed in later TS versions than 4.9?\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\ntype SapphireToken = {\n  value: string;\n};\n\nexport const useResolveResponsiveValue = (): (<\n  T extends string | number | undefined\n>(\n  value?: Responsive<T | SapphireToken>\n) => T | string) => {\n  const breakpointContext = useBreakpointContext();\n  const matchedBreakpoints =\n    (breakpointContext?.matchedBreakpoints as BreakpointKey[]) || ['base'];\n  return (value) => resolveResponsiveValue(matchedBreakpoints, value);\n};\n\nconst generateRulePart = <T extends string | number | undefined>(\n  containerBreakpointValue: number,\n  className: string,\n  key: string,\n  breakpointResponsiveValue: T | SapphireToken,\n  container: true | string\n) => {\n  const kebabCaseKey = key.replace(\n    /[A-Z]/g,\n    (match) => `-${match.toLowerCase()}`\n  );\n\n  const value =\n    breakpointResponsiveValue &&\n    typeof breakpointResponsiveValue === 'object' &&\n    isSapphireToken(breakpointResponsiveValue)\n      ? breakpointResponsiveValue.value\n      : breakpointResponsiveValue;\n\n  return `\n    @container ${\n      typeof container === 'string' ? container : ''\n    } (min-width: ${containerBreakpointValue}px) {\n      .${className} {\n        ${kebabCaseKey}: ${value};\n      }\n    }`;\n};\n\n/**\n * The `useResolveContainerQuery` hook leverages the power of CSS container queries to dynamically\n * generate and apply styles based on the provided responsive values in relation to the specified\n * container.\n *\n * This hook allows collecting the key-value pairs necessary for generating a new stylesheet that\n * will provide the necessary container queries based on the passed values and appends it to the\n * document's head.\n *\n * By using CSS container queries, we avoid emulating the behavior in JavaScript.\n */\nexport const useContainerStyleProps = <T extends SapphireCommonStyleProps>(\n  props: Omit<T & SapphireStyleProps, 'UNSAFE_style' | 'UNSAFE_className'>,\n  handlers: StyleHandlers<T>\n): {\n  containerStylesClassName: string;\n} => {\n  const uniqueId = useId().replace(/:/g, '_');\n  // There should only be one classname per element\n  const elementClassName = `container-query-${uniqueId}`;\n  const breakpointContext = useBreakpointContext();\n\n  let stylesString = '';\n  Object.keys(props).forEach((_key) => {\n    const key = _key as Exclude<keyof T, 'UNSAFE_style' | 'UNSAFE_className'>;\n    const responsiveValue = props[key];\n    if (!responsiveValue || !isContainerResponsiveProp(responsiveValue)) {\n      return;\n    }\n\n    const breakpoints = [\n      0, // `value.base` should be mapped to min-width: 0px and should always be first in the stylesheet.\n      ...Object.keys(responsiveValue).filter(\n        (breakpointKey) => !['base', 'container'].includes(breakpointKey)\n      ),\n    ];\n\n    breakpoints.forEach((breakpointKey) => {\n      // Try resolving the current breakpoint as a number. If it doesn't work, it's for sure a design-token breakpoint.\n      const isDesignTokenBreakpoint = isNaN(Number(breakpointKey));\n      const containerBreakpointValue = isDesignTokenBreakpoint\n        ? // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain -- we are confident it's a BreakpointKey\n          breakpointContext?.breakpoints?.[breakpointKey as BreakpointKey]!\n        : Number(breakpointKey);\n\n      const value = (\n        isDesignTokenBreakpoint\n          ? responsiveValue[breakpointKey as BreakpointKey]\n          : breakpointKey === 0\n          ? responsiveValue.base\n          : responsiveValue[containerBreakpointValue]\n      ) as string | number | undefined | null;\n      Object.entries(\n        normalizeHandler(handlers[key], value ?? undefined)\n      ).forEach(([styleProp, styleValue]) => {\n        stylesString += generateRulePart(\n          containerBreakpointValue,\n          elementClassName,\n          styleProp,\n          styleValue,\n          responsiveValue.container\n        );\n      });\n    });\n  });\n\n  const getOrCreateStylesheet = useCallback(() => {\n    const stylesheetElementId = 'container-query-stylesheet-' + uniqueId;\n    let containerQueryStylesheetElement =\n      document.getElementById(stylesheetElementId);\n    if (!containerQueryStylesheetElement) {\n      containerQueryStylesheetElement = document.createElement('style');\n      containerQueryStylesheetElement.id = stylesheetElementId;\n      document.head.appendChild(containerQueryStylesheetElement);\n    }\n    return containerQueryStylesheetElement as HTMLStyleElement;\n  }, [uniqueId]);\n\n  /**\n   * Create or update the stylesheet with the generated container query styles.\n   *\n   * The stylesheet is only created if styles are provided.\n   * The stylesheet is removed when the component using the hook is unmounted.\n   */\n  useEffect(() => {\n    if (!stylesString) {\n      return;\n    }\n\n    const styleSheet = getOrCreateStylesheet();\n    const cssRuleNode = document.createTextNode(stylesString);\n    styleSheet.appendChild(cssRuleNode);\n    return () => {\n      styleSheet.remove();\n    };\n  }, [stylesString, getOrCreateStylesheet]);\n\n  return {\n    containerStylesClassName: stylesString ? elementClassName : '',\n  };\n};\n\ninterface RegularStyleProps {\n  style?: CSSProperties;\n  className?: string;\n}\n\ninterface UnsafeStyleProps {\n  UNSAFE_className?: string;\n  UNSAFE_style?: CSSProperties;\n}\n\nexport interface SapphireStyleProps\n  extends SapphireCommonStyleProps,\n    UnsafeStyleProps {}\n\nexport type FilteredProps<P, T> = Omit<\n  P,\n  keyof (T & RegularStyleProps & UnsafeStyleProps)\n>;\n\nfunction isContainerResponsiveProp<T>(\n  prop: any\n): prop is ContainerResponsiveProp<T> {\n  return prop && typeof prop === 'object' && 'container' in prop;\n}\n\nexport const useSapphireStyleProps = <\n  P extends T,\n  T extends SapphireCommonStyleProps = SapphireCommonStyleProps\n>(\n  { UNSAFE_className, UNSAFE_style, ...props }: P & SapphireStyleProps,\n  handlers: StyleHandlers<T> = commonStyleHandlers as StyleHandlers<T>\n): {\n  styleProps: { style: CSSProperties; className?: string };\n  filteredProps: FilteredProps<P, T>;\n} => {\n  const resolveResponsiveValue = useResolveResponsiveValue();\n  const { containerStylesClassName } = useContainerStyleProps<T>(\n    props,\n    handlers\n  );\n  const derivedStyle: CSSProperties = {};\n\n  const filteredProps = {} as FilteredProps<P, T>;\n\n  (Object.keys(props) as Array<keyof typeof props>).forEach((key) => {\n    if (\n      ['style', 'className'].includes(key as string) &&\n      typeof process !== 'undefined' &&\n      process.env?.NODE_ENV === 'development'\n    ) {\n      // eslint-disable-next-line no-console\n      return console.warn(\n        \"Passing 'style' or 'className' props will have no effect. Please use supported style props directly or use UNSAFE_style or UNSAFE_className if you have no other options than applying style directly to the component.\"\n      );\n    }\n\n    const currentProp = props[key];\n    const handler = handlers[key as keyof T];\n    if (handler !== undefined && currentProp !== null) {\n      if (!isContainerResponsiveProp<T>(currentProp)) {\n        /**\n         * If no context is provided, we treat it as a viewport query.\n         */\n        const resolvedResponsiveValue = resolveResponsiveValue(\n          // @ts-expect-error: TS2590: Expression produces a union type that is too complex to represent.\n          currentProp as Responsive<SapphireToken | string | number | undefined>\n        );\n        Object.assign(\n          derivedStyle,\n          normalizeHandler(handler, resolvedResponsiveValue)\n        );\n      }\n    } else {\n      // @ts-expect-error: TS2536: Cannot be used to index type 'Omit<P, keyof T>'.\n      // TS is not convinced that we're not working with T at this point. We are.\n      filteredProps[key] = currentProp;\n    }\n  });\n\n  return {\n    styleProps: {\n      style: { ...UNSAFE_style, ...derivedStyle },\n      className: clsx(UNSAFE_className, containerStylesClassName),\n    },\n    filteredProps,\n  };\n};\n\nfunction normalizeHandler<T extends keyof CSSProperties>(\n  handler: StyleHandler<T>,\n  value: string | number | undefined\n): CSSProperties {\n  const result: CSSProperties = {};\n  if (value == undefined) {\n    return result;\n  }\n  if (typeof handler === 'object') {\n    if ('convertValue' in handler) {\n      value = handler.convertValue(value);\n    }\n    const styleProps =\n      'styleProps' in handler ? handler.styleProps : [handler.styleProp];\n    styleProps.forEach((styleProp) => {\n      (result as Record<string, string | number | undefined>)[\n        styleProp as keyof CSSProperties\n      ] = value;\n    });\n  } else {\n    (result as Record<string, string | number | undefined>)[\n      handler as keyof CSSProperties\n    ] = value;\n  }\n\n  return result;\n}\n"],"names":["resolveResponsiveValue"],"mappings":"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"}

package/build/esm/core/src/utils/useSapphireTextStyleProps.js

@@ -0,0 +1,9 @@
+import { commonStyleHandlers } from './SapphireStyleProps.js';
+import 'react';
+import '@danske/sapphire-react-context';
+import 'react-aria/useId';
+import 'clsx';
+
+({
+  ...commonStyleHandlers});
+//# sourceMappingURL=useSapphireTextStyleProps.js.map

package/build/esm/core/src/utils/useSapphireTextStyleProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSapphireTextStyleProps.js","sources":["../../../../../../core/src/utils/useSapphireTextStyleProps.ts"],"sourcesContent":["import {\n  commonStyleHandlers,\n  Responsive,\n  ResponsiveCssProp,\n  SapphireCommonStyleProps,\n  StyleHandlers,\n} from './SapphireStyleProps';\nimport { FilteredProps, useSapphireStyleProps } from './useSapphireStyleProps';\n\n/**\n * There are some css properties related to text layout which\n * seem like they should be allowed to be customized, but only\n * in those components which are mean to render text.\n *\n * All the usual text-related properties (eg. font-size,\n * line-height, color etc.) are not allowed because those\n * belong to Sapphire itself.\n *\n * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#other_properties_worth_looking_at\n */\n\nexport type SapphireTextStyleProps = SapphireCommonStyleProps & {\n  textAlign?: ResponsiveCssProp<'textAlign'>;\n  textIndent?: ResponsiveCssProp<'textIndent'>;\n  textOverflow?: ResponsiveCssProp<'textOverflow'>;\n  textAlignLast?: ResponsiveCssProp<'textAlignLast'>;\n  textJustify?: ResponsiveCssProp<'textJustify'>;\n  overflowWrap?: ResponsiveCssProp<'overflowWrap'>;\n  hyphens?: ResponsiveCssProp<'hyphens'>;\n  whiteSpace?: ResponsiveCssProp<'whiteSpace'>;\n  wordBreak?: ResponsiveCssProp<'wordBreak'>;\n  overflow?: ResponsiveCssProp<'overflow'>;\n  fontStyle?: Responsive<'normal' | 'italic'>;\n\n  /* NOTE:\n   *\n   * These are the text-layout properties we do not want to support:\n   *\n   * - line-break: relevant only for asian languages\n   * - text-orientation: relevant only for vertical scripts\n   * - direction: not relevant. But also it should be defined for the html document itself.\n   * - writing-mode: not relevant. But also it should be defined for the html document itself.\n   */\n};\n\nexport const sapphireTextStyleHandlers: StyleHandlers<SapphireTextStyleProps> =\n  {\n    ...commonStyleHandlers,\n    textAlign: 'textAlign',\n    textIndent: 'textIndent',\n    textOverflow: 'textOverflow',\n    textAlignLast: 'textAlignLast',\n    textJustify: 'textJustify',\n    overflowWrap: 'overflowWrap',\n    hyphens: 'hyphens',\n    whiteSpace: 'whiteSpace',\n    wordBreak: 'wordBreak',\n    overflow: 'overflow',\n    fontStyle: 'fontStyle',\n  };\n\nexport const useSapphireTextStyleProps = (\n  props: SapphireTextStyleProps\n): {\n  styleProps: {\n    style: React.CSSProperties;\n    className?: string;\n  };\n  filteredProps: FilteredProps<\n    SapphireTextStyleProps,\n    SapphireCommonStyleProps\n  >;\n} =>\n  useSapphireStyleProps<SapphireTextStyleProps>(\n    props,\n    sapphireTextStyleHandlers\n  );\n"],"names":[],"mappings":";;;;;;CA8CE;AAAA,EACE,GAAG,mBAYL"}

package/build/esm/core/src/utils/useScrollCheck.js

@@ -0,0 +1,38 @@
+import { useState, useLayoutEffect, useEffect } from 'react';
+
+const useScrollCheck = (ref) => {
+  const [isScrollable, setScrollable] = useState(false);
+  const [isScrolled, setScrolled] = useState(false);
+  const onScroll = () => {
+    if (ref.current?.scrollTop === 0) {
+      setScrolled(false);
+    } else {
+      setScrolled(true);
+    }
+  };
+  useLayoutEffect(() => {
+    const bodyElement = ref.current;
+    const resizeObserver = new ResizeObserver(() => {
+      if (bodyElement) {
+        setScrollable(bodyElement?.scrollHeight > bodyElement.offsetHeight);
+      }
+    });
+    if (bodyElement) {
+      resizeObserver.observe(bodyElement);
+    }
+    return () => {
+      if (bodyElement) {
+        resizeObserver.unobserve(bodyElement);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (ref.current) {
+      setScrollable(ref.current?.scrollHeight > ref.current.offsetHeight);
+    }
+  });
+  return { isScrollable, isScrolled, scrollCheckProps: { onScroll } };
+};
+
+export { useScrollCheck };
+//# sourceMappingURL=useScrollCheck.js.map

package/build/esm/core/src/utils/useScrollCheck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollCheck.js","sources":["../../../../../../core/src/utils/useScrollCheck.ts"],"sourcesContent":["import React, { useLayoutEffect, useEffect, useState } from 'react';\n\nexport const useScrollCheck = (\n  ref: React.RefObject<HTMLElement>\n): {\n  isScrolled: boolean;\n  isScrollable: boolean;\n  scrollCheckProps: { onScroll: () => void };\n} => {\n  const [isScrollable, setScrollable] = useState(false);\n  const [isScrolled, setScrolled] = useState(false);\n\n  const onScroll = () => {\n    if (ref.current?.scrollTop === 0) {\n      setScrolled(false);\n    } else {\n      setScrolled(true);\n    }\n  };\n\n  useLayoutEffect(() => {\n    const bodyElement = ref.current;\n    /**\n     * ResizeObserver is not supported by IE but there is a polyfill for it\n     * https://www.npmjs.com/package/resize-observer-polyfill\n     * https://github.com/que-etc/resize-observer-polyfill\n     * so it is safe to use it, in case we need to support IE as well.\n     */\n    const resizeObserver = new ResizeObserver(() => {\n      if (bodyElement) {\n        setScrollable(bodyElement?.scrollHeight > bodyElement.offsetHeight);\n      }\n    });\n    if (bodyElement) {\n      resizeObserver.observe(bodyElement);\n    }\n    return () => {\n      if (bodyElement) {\n        resizeObserver.unobserve(bodyElement);\n      }\n    };\n  }, []);\n\n  useEffect(() => {\n    if (ref.current) {\n      setScrollable(ref.current?.scrollHeight > ref.current.offsetHeight);\n    }\n  });\n\n  return { isScrollable, isScrolled, scrollCheckProps: { onScroll } };\n};\n"],"names":[],"mappings":";;AAEO,MAAM,cAAA,GAAiB,CAC5B,GAAA,KAKG;AACH,EAAA,MAAM,CAAC,YAAA,EAAc,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,GAAA,CAAI,OAAA,EAAS,SAAA,KAAc,CAAA,EAAG;AAChC,MAAA,WAAA,CAAY,KAAK,CAAA;AAAA,IACnB,CAAA,MAAO;AACL,MAAA,WAAA,CAAY,IAAI,CAAA;AAAA,IAClB;AAAA,EACF,CAAA;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,MAAM,cAAc,GAAA,CAAI,OAAA;AAOxB,IAAA,MAAM,cAAA,GAAiB,IAAI,cAAA,CAAe,MAAM;AAC9C,MAAA,IAAI,WAAA,EAAa;AACf,QAAA,aAAA,CAAc,WAAA,EAAa,YAAA,GAAe,WAAA,CAAY,YAAY,CAAA;AAAA,MACpE;AAAA,IACF,CAAC,CAAA;AACD,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,cAAA,CAAe,QAAQ,WAAW,CAAA;AAAA,IACpC;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,WAAA,EAAa;AACf,QAAA,cAAA,CAAe,UAAU,WAAW,CAAA;AAAA,MACtC;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAI,OAAA,EAAS;AACf,MAAA,aAAA,CAAc,GAAA,CAAI,OAAA,EAAS,YAAA,GAAe,GAAA,CAAI,QAAQ,YAAY,CAAA;AAAA,IACpE;AAAA,EACF,CAAC,CAAA;AAED,EAAA,OAAO,EAAE,YAAA,EAAc,UAAA,EAAY,gBAAA,EAAkB,EAAE,UAAS,EAAE;AACpE;;;;"}

package/build/esm/core/src/utils/useThemeCheck.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { ThemeContext } from '@danske/sapphire-react-context';
+
+const useThemeCheck = () => {
+  const themeContext = useContext(ThemeContext);
+  if (typeof themeContext.theme === void 0) {
+    throw new Error(
+      "A Sapphire component must be rendered inside a <SapphireProvider>."
+    );
+  }
+};
+
+export { useThemeCheck };
+//# sourceMappingURL=useThemeCheck.js.map

package/build/esm/core/src/utils/useThemeCheck.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeCheck.js","sources":["../../../../../../core/src/utils/useThemeCheck.ts"],"sourcesContent":["import { useContext } from 'react';\nimport { ThemeContext } from '@danske/sapphire-react-context';\n\n/**\n * Checks if Sapphire theme context is provided. Meant to be used only inside Sapphire components.\n * @private\n */\nexport const useThemeCheck = (): void => {\n  const themeContext = useContext(ThemeContext);\n  if (typeof themeContext.theme === undefined) {\n    throw new Error(\n      'A Sapphire component must be rendered inside a <SapphireProvider>.'\n    );\n  }\n};\n"],"names":[],"mappings":";;;AAOO,MAAM,gBAAgB,MAAY;AACvC,EAAA,MAAM,YAAA,GAAe,WAAW,YAAY,CAAA;AAC5C,EAAA,IAAI,OAAO,YAAA,CAAa,KAAA,KAAU,MAAA,EAAW;AAC3C,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACF;;;;"}