@danske/sapphire-react-lab 0.105.2 → 0.106.2

package/build/esm/NumberField/src/useNumberFieldFormatting.js

@@ -13,19 +13,28 @@ function useNumberFieldFormatting({
   onChange,
   autoFormat
 }) {
-  const { groupSeparator, decimalSeparator } = useMemo(() => getSeparators(formatter), [formatter]);
+  const { groupSeparator, decimalSeparator } = useMemo(
+    () => getSeparators(formatter),
+    [formatter]
+  );
   const [formattedValue, setFormattedValue] = useState("");
-  const symbolInfo = useMemo(() => extractSymbol(formatter, prefix, postfix), [formatter, prefix, postfix]);
+  const symbolInfo = useMemo(
+    () => extractSymbol(formatter, prefix, postfix),
+    [formatter, prefix, postfix]
+  );
   const { extractedPrefix, extractedPostfix, symbol } = symbolInfo;
   const cursorPositionRef = useRef(null);
   const displayValue = useMemo(() => {
-    const numericValue = parseNumericValue(inputValue, decimalSeparator, formatter);
-    if (numericValue === null)
-      return inputValue;
+    const numericValue = parseNumericValue(
+      inputValue,
+      decimalSeparator,
+      formatter
+    );
+    if (numericValue === null) return inputValue;
     try {
       const trimmedValue = trimSymbol(inputValue, symbol) || inputValue;
       return autoFormat ? formattedValue || trimmedValue : trimmedValue;
-    } catch (e) {
+    } catch {
       return inputValue;
     }
   }, [
@@ -38,49 +47,74 @@ function useNumberFieldFormatting({
   ]);
   useLayoutEffect(() => {
     if (cursorPositionRef.current !== null && inputRef.current) {
-      inputRef.current.setSelectionRange(cursorPositionRef.current, cursorPositionRef.current);
+      inputRef.current.setSelectionRange(
+        cursorPositionRef.current,
+        cursorPositionRef.current
+      );
       cursorPositionRef.current = null;
     }
   }, [displayValue, inputRef]);
-  const handleInput = useCallback((e) => {
-    if (!autoFormat)
-      return;
-    const input = e.currentTarget;
-    const { value, selectionStart } = input;
-    const inputType = e.nativeEvent.inputType || "";
-    const shouldStrip = !!symbol;
-    const maxFractionDigits = formatter.resolvedOptions().maximumFractionDigits || 0;
-    const decimalIndex = value.indexOf(decimalSeparator);
-    if (decimalIndex !== -1 && selectionStart !== null) {
-      const decimalPart = value.slice(decimalIndex + 1).replace(new RegExp(`[^0-9]`, "g"), "");
-      const prevDecimalIndex = displayValue.indexOf(decimalSeparator);
-      const prevDecimalLength = prevDecimalIndex !== -1 ? displayValue.slice(prevDecimalIndex + 1).length : 0;
-      if (decimalPart.length > maxFractionDigits && selectionStart > decimalIndex + 1 + prevDecimalLength) {
-        e.preventDefault();
-        cursorPositionRef.current = decimalIndex + 1 + prevDecimalLength;
-        return;
+  const handleInput = useCallback(
+    (e) => {
+      if (!autoFormat) return;
+      const input = e.currentTarget;
+      const { value, selectionStart } = input;
+      const inputType = e.nativeEvent.inputType || "";
+      const shouldStrip = !!symbol;
+      const maxFractionDigits = formatter.resolvedOptions().maximumFractionDigits || 0;
+      const decimalIndex = value.indexOf(decimalSeparator);
+      if (decimalIndex !== -1 && selectionStart !== null) {
+        const decimalPart = value.slice(decimalIndex + 1).replace(new RegExp(`[^0-9]`, "g"), "");
+        const prevDecimalIndex = displayValue.indexOf(decimalSeparator);
+        const prevDecimalLength = prevDecimalIndex !== -1 ? displayValue.slice(prevDecimalIndex + 1).length : 0;
+        if (decimalPart.length > maxFractionDigits && selectionStart > decimalIndex + 1 + prevDecimalLength) {
+          e.preventDefault();
+          cursorPositionRef.current = decimalIndex + 1 + prevDecimalLength;
+          return;
+        }
       }
-    }
-    const formattedValue2 = formatNumberString(value, formatter, decimalSeparator, shouldStrip, symbol);
-    setFormattedValue(formattedValue2);
-    const numericValue = parseNumericValue(formattedValue2, decimalSeparator, formatter);
-    if (formattedValue2 !== value && formattedValue2 !== "" && selectionStart !== null) {
-      const newCursorPosition = calculateCursorPosition(value, formattedValue2, selectionStart, inputType, decimalSeparator, numericValue);
-      cursorPositionRef.current = newCursorPosition;
-    }
-    if (numericValue !== null) {
-      onChange == null ? void 0 : onChange(numericValue);
-    }
-  }, [formatter, decimalSeparator, symbol, autoFormat, displayValue, onChange]);
-  const handleKeyDown = useCallback((e) => {
-    handleNumberFieldKeyDown({
-      event: e,
-      inputRef,
-      groupSeparator,
-      decimalSeparator,
-      onOriginalKeyDown
-    });
-  }, [groupSeparator, decimalSeparator, inputRef, onOriginalKeyDown]);
+      const formattedValue2 = formatNumberString(
+        value,
+        formatter,
+        decimalSeparator,
+        shouldStrip,
+        symbol
+      );
+      setFormattedValue(formattedValue2);
+      const numericValue = parseNumericValue(
+        formattedValue2,
+        decimalSeparator,
+        formatter
+      );
+      if (formattedValue2 !== value && formattedValue2 !== "" && selectionStart !== null) {
+        const newCursorPosition = calculateCursorPosition(
+          value,
+          formattedValue2,
+          selectionStart,
+          inputType,
+          decimalSeparator,
+          numericValue
+        );
+        cursorPositionRef.current = newCursorPosition;
+      }
+      if (numericValue !== null) {
+        onChange?.(numericValue);
+      }
+    },
+    [formatter, decimalSeparator, symbol, autoFormat, displayValue, onChange]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      handleNumberFieldKeyDown({
+        event: e,
+        inputRef,
+        groupSeparator,
+        decimalSeparator,
+        onOriginalKeyDown
+      });
+    },
+    [groupSeparator, decimalSeparator, inputRef, onOriginalKeyDown]
+  );
   return {
     displayValue,
     extractedPrefix,

package/build/esm/NumberField/src/useNumberFieldFormatting.js.map

@@ -1 +1 @@
-{"version":3,"file":"useNumberFieldFormatting.js","sources":["../../../../src/NumberField/src/useNumberFieldFormatting.ts"],"sourcesContent":["import {\n  useMemo,\n  useCallback,\n  RefObject,\n  ReactNode,\n  useRef,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport {\n  getSeparators,\n  parseNumericValue,\n  formatNumberString,\n  trimSymbol,\n  extractSymbol,\n} from './formatHelpers';\nimport { calculateCursorPosition } from './cursorHelpers';\nimport { handleNumberFieldKeyDown } from './keyboardHelpers';\n\ninterface UseNumberFieldFormattingParams {\n  inputRef: RefObject<HTMLInputElement>;\n  formatter: Intl.NumberFormat;\n  inputValue: string;\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  onOriginalKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  onChange?: (value: number) => void;\n  autoFormat: boolean;\n}\n\ninterface UseNumberFieldFormattingReturn {\n  displayValue: string;\n  extractedPrefix: ReactNode;\n  extractedPostfix: ReactNode;\n  handleInput: (e: React.FormEvent<HTMLInputElement>) => void;\n  handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\n/**\n * Hook for number field formatting with locale-aware separators and cursor management.\n * Handles currency/unit extraction, number formatting, and maintains correct cursor position.\n * When autoFormat is false, returns original values without any computation.\n */\nexport function useNumberFieldFormatting({\n  inputRef,\n  formatter,\n  inputValue,\n  prefix,\n  postfix,\n  onOriginalKeyDown,\n  onChange,\n  autoFormat,\n}: UseNumberFieldFormattingParams): UseNumberFieldFormattingReturn {\n  const { groupSeparator, decimalSeparator } = useMemo(\n    () => getSeparators(formatter),\n    [formatter]\n  );\n\n  const [formattedValue, setFormattedValue] = useState<string>('');\n\n  // Extract and position currency/unit symbols\n  const symbolInfo = useMemo(\n    () => extractSymbol(formatter, prefix, postfix),\n    [formatter, prefix, postfix]\n  );\n\n  const { extractedPrefix, extractedPostfix, symbol } = symbolInfo;\n\n  // Track cursor position to restore after React updates the value\n  const cursorPositionRef = useRef<number | null>(null);\n\n  // Format the input value for display\n  const displayValue = useMemo(() => {\n    const numericValue = parseNumericValue(\n      inputValue,\n      decimalSeparator,\n      formatter\n    );\n    if (numericValue === null) return inputValue;\n\n    try {\n      const trimmedValue = trimSymbol(inputValue, symbol) || inputValue;\n      return autoFormat ? formattedValue || trimmedValue : trimmedValue;\n    } catch {\n      return inputValue;\n    }\n  }, [\n    inputValue,\n    symbol,\n    formatter,\n    decimalSeparator,\n    autoFormat,\n    formattedValue,\n  ]);\n\n  // Restore cursor position after value changes\n  useLayoutEffect(() => {\n    if (cursorPositionRef.current !== null && inputRef.current) {\n      inputRef.current.setSelectionRange(\n        cursorPositionRef.current,\n        cursorPositionRef.current\n      );\n      cursorPositionRef.current = null;\n    }\n  }, [displayValue, inputRef]);\n\n  // Handle input with formatting and cursor management\n  const handleInput = useCallback(\n    (e: React.FormEvent<HTMLInputElement>): void => {\n      if (!autoFormat) return;\n\n      const input = e.currentTarget;\n      const { value, selectionStart } = input;\n      const inputType = (e.nativeEvent as InputEvent).inputType || '';\n      const shouldStrip = !!symbol;\n\n      /**\n       * Check if we're exceeding maximum decimal places when typing at the end.\n       * For example, with max 2 decimals, having \"12,34|\" and typing \"5\" should be prevented.\n       */\n      //#region Prevent excess decimals\n      const maxFractionDigits =\n        formatter.resolvedOptions().maximumFractionDigits || 0;\n      const decimalIndex = value.indexOf(decimalSeparator);\n\n      if (decimalIndex !== -1 && selectionStart !== null) {\n        // Count decimal digits in the new value\n        const decimalPart = value\n          .slice(decimalIndex + 1)\n          .replace(new RegExp(`[^0-9]`, 'g'), '');\n        const prevDecimalIndex = displayValue.indexOf(decimalSeparator);\n        const prevDecimalLength =\n          prevDecimalIndex !== -1\n            ? displayValue.slice(prevDecimalIndex + 1).length\n            : 0;\n\n        // If we have more decimals than allowed and cursor was at the end of decimals, prevent and restore\n        if (\n          decimalPart.length > maxFractionDigits &&\n          selectionStart > decimalIndex + 1 + prevDecimalLength\n        ) {\n          e.preventDefault();\n          // Store cursor position to restore after React's update\n          cursorPositionRef.current = decimalIndex + 1 + prevDecimalLength;\n          return;\n        }\n      }\n      //#endregion Prevent excess decimals\n\n      const formattedValue = formatNumberString(\n        value,\n        formatter,\n        decimalSeparator,\n        shouldStrip,\n        symbol\n      );\n\n      setFormattedValue(formattedValue);\n\n      const numericValue = parseNumericValue(\n        formattedValue,\n        decimalSeparator,\n        formatter\n      );\n\n      // Calculate and store cursor position for restoration after React's update\n      if (\n        formattedValue !== value &&\n        formattedValue !== '' &&\n        selectionStart !== null\n      ) {\n        const newCursorPosition = calculateCursorPosition(\n          value,\n          formattedValue,\n          selectionStart,\n          inputType,\n          decimalSeparator,\n          numericValue\n        );\n\n        cursorPositionRef.current = newCursorPosition;\n      }\n\n      if (numericValue !== null) {\n        onChange?.(numericValue);\n      }\n    },\n    [formatter, decimalSeparator, symbol, autoFormat, displayValue, onChange]\n  );\n\n  // Handle keydown for special key behaviors\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>): void => {\n      handleNumberFieldKeyDown({\n        event: e,\n        inputRef,\n        groupSeparator,\n        decimalSeparator,\n        onOriginalKeyDown,\n      });\n    },\n    [groupSeparator, decimalSeparator, inputRef, onOriginalKeyDown]\n  );\n\n  return {\n    displayValue,\n    extractedPrefix,\n    extractedPostfix,\n    handleInput,\n    handleKeyDown,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useNumberFieldFormatting.js","sources":["../../../../src/NumberField/src/useNumberFieldFormatting.ts"],"sourcesContent":["import {\n  useMemo,\n  useCallback,\n  RefObject,\n  ReactNode,\n  useRef,\n  useLayoutEffect,\n  useState,\n} from 'react';\nimport {\n  getSeparators,\n  parseNumericValue,\n  formatNumberString,\n  trimSymbol,\n  extractSymbol,\n} from './formatHelpers';\nimport { calculateCursorPosition } from './cursorHelpers';\nimport { handleNumberFieldKeyDown } from './keyboardHelpers';\n\ninterface UseNumberFieldFormattingParams {\n  inputRef: RefObject<HTMLInputElement>;\n  formatter: Intl.NumberFormat;\n  inputValue: string;\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  onOriginalKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n  onChange?: (value: number) => void;\n  autoFormat: boolean;\n}\n\ninterface UseNumberFieldFormattingReturn {\n  displayValue: string;\n  extractedPrefix: ReactNode;\n  extractedPostfix: ReactNode;\n  handleInput: (e: React.FormEvent<HTMLInputElement>) => void;\n  handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\n/**\n * Hook for number field formatting with locale-aware separators and cursor management.\n * Handles currency/unit extraction, number formatting, and maintains correct cursor position.\n * When autoFormat is false, returns original values without any computation.\n */\nexport function useNumberFieldFormatting({\n  inputRef,\n  formatter,\n  inputValue,\n  prefix,\n  postfix,\n  onOriginalKeyDown,\n  onChange,\n  autoFormat,\n}: UseNumberFieldFormattingParams): UseNumberFieldFormattingReturn {\n  const { groupSeparator, decimalSeparator } = useMemo(\n    () => getSeparators(formatter),\n    [formatter]\n  );\n\n  const [formattedValue, setFormattedValue] = useState<string>('');\n\n  // Extract and position currency/unit symbols\n  const symbolInfo = useMemo(\n    () => extractSymbol(formatter, prefix, postfix),\n    [formatter, prefix, postfix]\n  );\n\n  const { extractedPrefix, extractedPostfix, symbol } = symbolInfo;\n\n  // Track cursor position to restore after React updates the value\n  const cursorPositionRef = useRef<number | null>(null);\n\n  // Format the input value for display\n  const displayValue = useMemo(() => {\n    const numericValue = parseNumericValue(\n      inputValue,\n      decimalSeparator,\n      formatter\n    );\n    if (numericValue === null) return inputValue;\n\n    try {\n      const trimmedValue = trimSymbol(inputValue, symbol) || inputValue;\n      return autoFormat ? formattedValue || trimmedValue : trimmedValue;\n    } catch {\n      return inputValue;\n    }\n  }, [\n    inputValue,\n    symbol,\n    formatter,\n    decimalSeparator,\n    autoFormat,\n    formattedValue,\n  ]);\n\n  // Restore cursor position after value changes\n  useLayoutEffect(() => {\n    if (cursorPositionRef.current !== null && inputRef.current) {\n      inputRef.current.setSelectionRange(\n        cursorPositionRef.current,\n        cursorPositionRef.current\n      );\n      cursorPositionRef.current = null;\n    }\n  }, [displayValue, inputRef]);\n\n  // Handle input with formatting and cursor management\n  const handleInput = useCallback(\n    (e: React.FormEvent<HTMLInputElement>): void => {\n      if (!autoFormat) return;\n\n      const input = e.currentTarget;\n      const { value, selectionStart } = input;\n      const inputType = (e.nativeEvent as InputEvent).inputType || '';\n      const shouldStrip = !!symbol;\n\n      /**\n       * Check if we're exceeding maximum decimal places when typing at the end.\n       * For example, with max 2 decimals, having \"12,34|\" and typing \"5\" should be prevented.\n       */\n      //#region Prevent excess decimals\n      const maxFractionDigits =\n        formatter.resolvedOptions().maximumFractionDigits || 0;\n      const decimalIndex = value.indexOf(decimalSeparator);\n\n      if (decimalIndex !== -1 && selectionStart !== null) {\n        // Count decimal digits in the new value\n        const decimalPart = value\n          .slice(decimalIndex + 1)\n          .replace(new RegExp(`[^0-9]`, 'g'), '');\n        const prevDecimalIndex = displayValue.indexOf(decimalSeparator);\n        const prevDecimalLength =\n          prevDecimalIndex !== -1\n            ? displayValue.slice(prevDecimalIndex + 1).length\n            : 0;\n\n        // If we have more decimals than allowed and cursor was at the end of decimals, prevent and restore\n        if (\n          decimalPart.length > maxFractionDigits &&\n          selectionStart > decimalIndex + 1 + prevDecimalLength\n        ) {\n          e.preventDefault();\n          // Store cursor position to restore after React's update\n          cursorPositionRef.current = decimalIndex + 1 + prevDecimalLength;\n          return;\n        }\n      }\n      //#endregion Prevent excess decimals\n\n      const formattedValue = formatNumberString(\n        value,\n        formatter,\n        decimalSeparator,\n        shouldStrip,\n        symbol\n      );\n\n      setFormattedValue(formattedValue);\n\n      const numericValue = parseNumericValue(\n        formattedValue,\n        decimalSeparator,\n        formatter\n      );\n\n      // Calculate and store cursor position for restoration after React's update\n      if (\n        formattedValue !== value &&\n        formattedValue !== '' &&\n        selectionStart !== null\n      ) {\n        const newCursorPosition = calculateCursorPosition(\n          value,\n          formattedValue,\n          selectionStart,\n          inputType,\n          decimalSeparator,\n          numericValue\n        );\n\n        cursorPositionRef.current = newCursorPosition;\n      }\n\n      if (numericValue !== null) {\n        onChange?.(numericValue);\n      }\n    },\n    [formatter, decimalSeparator, symbol, autoFormat, displayValue, onChange]\n  );\n\n  // Handle keydown for special key behaviors\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>): void => {\n      handleNumberFieldKeyDown({\n        event: e,\n        inputRef,\n        groupSeparator,\n        decimalSeparator,\n        onOriginalKeyDown,\n      });\n    },\n    [groupSeparator, decimalSeparator, inputRef, onOriginalKeyDown]\n  );\n\n  return {\n    displayValue,\n    extractedPrefix,\n    extractedPostfix,\n    handleInput,\n    handleKeyDown,\n  };\n}\n"],"names":["formattedValue"],"mappings":"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"}

package/build/esm/NumberField/src/useSapphireNumberField.js

@@ -1,48 +1,22 @@
-import { useNumberField } from '@react-aria/numberfield';
-import { useNumberFieldState } from '@react-stately/numberfield';
-import { useLocale } from '@react-aria/i18n';
+import { useNumberField } from 'react-aria/useNumberField';
+import { useNumberFieldState } from 'react-stately/useNumberFieldState';
+import { useLocale } from 'react-aria/I18nProvider';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const useSapphireNumberField = (_a, ref) => {
-  var _b = _a, { error } = _b, numberFieldProps = __objRest(_b, ["error"]);
+const useSapphireNumberField = ({ error, ...numberFieldProps }, ref) => {
   const { locale } = useLocale();
-  const numberFieldState = useNumberFieldState(__spreadProps(__spreadValues({}, numberFieldProps), {
+  const numberFieldState = useNumberFieldState({
+    ...numberFieldProps,
     locale
-  }));
-  const numberFieldAria = useNumberField(__spreadProps(__spreadValues({}, numberFieldProps), {
-    validationState: error === false || error === void 0 ? void 0 : "invalid"
-  }), numberFieldState, ref);
-  return __spreadProps(__spreadValues({}, numberFieldAria), { state: numberFieldState });
+  });
+  const numberFieldAria = useNumberField(
+    {
+      ...numberFieldProps,
+      validationState: error === false || error === void 0 ? void 0 : "invalid"
+    },
+    numberFieldState,
+    ref
+  );
+  return { ...numberFieldAria, state: numberFieldState };
 };
 
 export { useSapphireNumberField };

package/build/esm/NumberField/src/useSapphireNumberField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSapphireNumberField.js","sources":["../../../../src/NumberField/src/useSapphireNumberField.ts"],"sourcesContent":["import React, { RefObject } from 'react';\nimport {\n  AriaNumberFieldProps,\n  NumberFieldAria,\n  useNumberField,\n} from '@react-aria/numberfield';\nimport { useNumberFieldState } from '@react-stately/numberfield';\nimport { useLocale } from '@react-aria/i18n';\n\nexport interface SapphireNumberFieldProps\n  // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n  extends Pick<\n    AriaNumberFieldProps,\n    | 'label'\n    | 'isDisabled'\n    | 'isRequired'\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'incrementAriaLabel'\n    | 'decrementAriaLabel'\n    | 'onFocus'\n    | 'onBlur'\n    | 'formatOptions'\n    | 'step'\n    | 'minValue'\n    | 'maxValue'\n    | 'placeholder'\n    | 'isReadOnly'\n    | 'autoFocus'\n    | 'onFocusChange'\n    | 'onKeyUp'\n    | 'onKeyDown'\n  > {\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.\n   * A `ReactNode` sets the error state with an additional error message.\n   *\n   * **An error message is strongly recommended because an error should always have an explanation about how to fix it.**\n   */\n  error?: boolean | React.ReactNode;\n}\n\nexport const useSapphireNumberField = (\n  { error, ...numberFieldProps }: SapphireNumberFieldProps,\n  ref: RefObject<HTMLInputElement>\n): NumberFieldAria & { state: ReturnType<typeof useNumberFieldState> } => {\n  const { locale } = useLocale();\n  const numberFieldState = useNumberFieldState({\n    ...numberFieldProps,\n    locale,\n  });\n  const numberFieldAria = useNumberField(\n    {\n      ...numberFieldProps,\n      validationState:\n        error === false || error === undefined ? undefined : 'invalid',\n    },\n    numberFieldState,\n    ref\n  );\n\n  return { ...numberFieldAria, state: numberFieldState };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ca,MAAA,sBAAA,GAAyB,CACpC,EAAA,EACA,GACwE,KAAA;AAFxE,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,KAAA,EAAA,GAAA,EAAA,EAAY,gBAAZ,GAAA,SAAA,CAAA,EAAA,EAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAGF,EAAA,MAAM,EAAE,MAAW,EAAA,GAAA,SAAA,EAAA,CAAA;AACnB,EAAM,MAAA,gBAAA,GAAmB,mBAAoB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACxC,gBADwC,CAAA,EAAA;AAAA,IAE3C,MAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAEF,EAAM,MAAA,eAAA,GAAkB,cACtB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACK,gBADL,CAAA,EAAA;AAAA,IAEE,eACE,EAAA,KAAA,KAAU,KAAS,IAAA,KAAA,KAAU,SAAY,KAAY,CAAA,GAAA,SAAA;AAAA,GAAA,CAAA,EAEzD,gBACA,EAAA,GAAA,CAAA,CAAA;AAGF,EAAO,OAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAK,eAAL,CAAA,EAAA,EAAsB,KAAO,EAAA,gBAAA,EAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"useSapphireNumberField.js","sources":["../../../../src/NumberField/src/useSapphireNumberField.ts"],"sourcesContent":["import React, { RefObject } from 'react';\nimport {\n  AriaNumberFieldProps,\n  NumberFieldAria,\n  useNumberField,\n} from 'react-aria/useNumberField';\nimport { useNumberFieldState } from 'react-stately/useNumberFieldState';\nimport { useLocale } from 'react-aria/I18nProvider';\n\nexport interface SapphireNumberFieldProps\n  // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n  extends Pick<\n    AriaNumberFieldProps,\n    | 'label'\n    | 'isDisabled'\n    | 'isRequired'\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'incrementAriaLabel'\n    | 'decrementAriaLabel'\n    | 'onFocus'\n    | 'onBlur'\n    | 'formatOptions'\n    | 'step'\n    | 'minValue'\n    | 'maxValue'\n    | 'placeholder'\n    | 'isReadOnly'\n    | 'autoFocus'\n    | 'onFocusChange'\n    | 'onKeyUp'\n    | 'onKeyDown'\n  > {\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.\n   * A `ReactNode` sets the error state with an additional error message.\n   *\n   * **An error message is strongly recommended because an error should always have an explanation about how to fix it.**\n   */\n  error?: boolean | React.ReactNode;\n}\n\nexport const useSapphireNumberField = (\n  { error, ...numberFieldProps }: SapphireNumberFieldProps,\n  ref: RefObject<HTMLInputElement>\n): NumberFieldAria & { state: ReturnType<typeof useNumberFieldState> } => {\n  const { locale } = useLocale();\n  const numberFieldState = useNumberFieldState({\n    ...numberFieldProps,\n    locale,\n  });\n  const numberFieldAria = useNumberField(\n    {\n      ...numberFieldProps,\n      validationState:\n        error === false || error === undefined ? undefined : 'invalid',\n    },\n    numberFieldState,\n    ref\n  );\n\n  return { ...numberFieldAria, state: numberFieldState };\n};\n"],"names":[],"mappings":";;;;AA8CO,MAAM,yBAAyB,CACpC,EAAE,OAAO,GAAG,gBAAA,IACZ,GAAA,KACwE;AACxE,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,mBAAmB,mBAAA,CAAoB;AAAA,IAC3C,GAAG,gBAAA;AAAA,IACH;AAAA,GACD,CAAA;AACD,EAAA,MAAM,eAAA,GAAkB,cAAA;AAAA,IACtB;AAAA,MACE,GAAG,gBAAA;AAAA,MACH,eAAA,EACE,KAAA,KAAU,KAAA,IAAS,KAAA,KAAU,SAAY,MAAA,GAAY;AAAA,KACzD;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,OAAO,EAAE,GAAG,eAAA,EAAiB,KAAA,EAAO,gBAAA,EAAiB;AACvD;;;;"}

package/build/esm/ProgressIndicator/src/ProgressIndicator.js

@@ -2,28 +2,9 @@ import React from 'react';
 import clsx from 'clsx';
 import styles from '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';
 import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
-import { useProgressBar } from '@react-aria/progress';
-import { filterDOMProps } from '@react-aria/utils';
+import { useProgressBar } from 'react-aria/useProgressBar';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const ProgressIndicator = (props) => {
   const {
     maxValue = 100,
@@ -33,25 +14,32 @@ const ProgressIndicator = (props) => {
   } = props;
   useThemeCheck();
   const { styleProps } = useSapphireStyleProps(props);
-  const { progressBarProps } = useProgressBar(__spreadProps(__spreadValues({}, props), {
+  const { progressBarProps } = useProgressBar({
+    ...props,
     minValue: 0,
     valueLabel: ariaValueText
-  }));
+  });
   const minValue = 0;
   const value = Math.min(Math.max(realValue, minValue), maxValue);
   const widthPercentage = value / maxValue * 100;
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, filterDOMProps(props, { global: true })), {
-    className: clsx(styles["sapphire-progress"])
-  }), /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, progressBarProps), {
-    className: styles["sapphire-progress--indicator"],
-    style: __spreadProps(__spreadValues({}, styleProps), { width: `${widthPercentage}%` }),
-    "aria-label": "aria-label" in props ? props["aria-label"] : void 0,
-    "aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0
-  })), segments > 1 && /* @__PURE__ */ React.createElement("div", {
-    className: styles["sapphire-progress--segments"]
-  }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React.createElement("span", {
-    key: index
-  }))));
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...filterDOMProps(props, { global: true }),
+      className: clsx(styles["sapphire-progress"])
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ...progressBarProps,
+        className: styles["sapphire-progress--indicator"],
+        style: { ...styleProps, width: `${widthPercentage}%` },
+        "aria-label": "aria-label" in props ? props["aria-label"] : void 0,
+        "aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0
+      }
+    ),
+    segments > 1 && /* @__PURE__ */ React.createElement("div", { className: styles["sapphire-progress--segments"] }, Array.from({ length: segments }, (_, index) => /* @__PURE__ */ React.createElement("span", { key: index })))
+  );
 };
 
 export { ProgressIndicator };

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressIndicator.js","sources":["../../../../src/ProgressIndicator/src/ProgressIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useProgressBar } from '@react-aria/progress';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport type ProgressIndicatorProps = {\n  /**\n   * The maximum value for the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuemax\n   *\n   * @default 100\n   */\n  maxValue?: number;\n\n  /**\n   * The current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuenow\n   */\n  value: number;\n\n  /**\n   * Defines how many segments the progress bar will have.\n   *\n   * @default 1\n   */\n  segments?: number;\n\n  /**\n   * Human-readable text alternative for the current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext\n   */\n  'aria-valuetext'?: string;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  ({ 'aria-labelledby': string } | { 'aria-label': string });\n\nexport const ProgressIndicator = (\n  props: ProgressIndicatorProps\n): JSX.Element => {\n  const {\n    maxValue = 100,\n    value: realValue,\n    segments = 1,\n    'aria-valuetext': ariaValueText,\n  } = props;\n\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const { progressBarProps } = useProgressBar({\n    ...props,\n    minValue: 0,\n    valueLabel: ariaValueText,\n  });\n\n  const minValue = 0;\n\n  const value = Math.min(Math.max(realValue, minValue), maxValue);\n  const widthPercentage = (value / maxValue) * 100;\n\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-progress'])}\n    >\n      <div\n        {...progressBarProps}\n        className={styles['sapphire-progress--indicator']}\n        style={{ ...styleProps, width: `${widthPercentage}%` }}\n        aria-label={'aria-label' in props ? props['aria-label'] : undefined}\n        aria-labelledby={\n          'aria-labelledby' in props ? props['aria-labelledby'] : undefined\n        }\n      />\n      {segments > 1 && (\n        <div className={styles['sapphire-progress--segments']}>\n          {Array.from({ length: segments }, (_, index) => (\n            <span key={index}></span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA2Ca,MAAA,iBAAA,GAAoB,CAC/B,KACgB,KAAA;AAChB,EAAM,MAAA;AAAA,IACJ,QAAW,GAAA,GAAA;AAAA,IACX,KAAO,EAAA,SAAA;AAAA,IACP,QAAW,GAAA,CAAA;AAAA,IACX,gBAAkB,EAAA,aAAA;AAAA,GAChB,GAAA,KAAA,CAAA;AAEJ,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,EAAE,gBAAA,EAAA,GAAqB,cAAe,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACvC,KADuC,CAAA,EAAA;AAAA,IAE1C,QAAU,EAAA,CAAA;AAAA,IACV,UAAY,EAAA,aAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAGd,EAAA,MAAM,QAAW,GAAA,CAAA,CAAA;AAEjB,EAAA,MAAM,QAAQ,IAAK,CAAA,GAAA,CAAI,IAAK,CAAA,GAAA,CAAI,WAAW,QAAW,CAAA,EAAA,QAAA,CAAA,CAAA;AACtD,EAAM,MAAA,eAAA,GAAmB,QAAQ,QAAY,GAAA,GAAA,CAAA;AAE7C,EAAA,2CACG,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eAAe,KAAO,EAAA,EAAE,QAAQ,IADtC,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,KAAK,MAAO,CAAA,mBAAA,CAAA,CAAA;AAAA,GAEvB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,gBADN,CAAA,EAAA;AAAA,IAEE,WAAW,MAAO,CAAA,8BAAA,CAAA;AAAA,IAClB,KAAO,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAK,UAAL,CAAA,EAAA,EAAiB,OAAO,CAAG,EAAA,eAAA,CAAA,CAAA,CAAA,EAAA,CAAA;AAAA,IAClC,YAAY,EAAA,YAAA,IAAgB,KAAQ,GAAA,KAAA,CAAM,YAAgB,CAAA,GAAA,KAAA,CAAA;AAAA,IAC1D,iBACE,EAAA,iBAAA,IAAqB,KAAQ,GAAA,KAAA,CAAM,iBAAqB,CAAA,GAAA,KAAA,CAAA;AAAA,GAG3D,CAAA,CAAA,EAAA,QAAA,GAAW,CACV,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,6BAAA,CAAA;AAAA,GACpB,EAAA,KAAA,CAAM,KAAK,EAAE,MAAA,EAAQ,YAAY,CAAC,CAAA,EAAG,KACpC,qBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IAAM,GAAK,EAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"ProgressIndicator.js","sources":["../../../../src/ProgressIndicator/src/ProgressIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/progressIndicator/progressIndicator.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useProgressBar } from 'react-aria/useProgressBar';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport type ProgressIndicatorProps = {\n  /**\n   * The maximum value for the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuemax\n   *\n   * @default 100\n   */\n  maxValue?: number;\n\n  /**\n   * The current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuenow\n   */\n  value: number;\n\n  /**\n   * Defines how many segments the progress bar will have.\n   *\n   * @default 1\n   */\n  segments?: number;\n\n  /**\n   * Human-readable text alternative for the current value of the progress bar. Will be used as:\n   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext\n   */\n  'aria-valuetext'?: string;\n} & SapphireStyleProps &\n  GlobalDomAttributes &\n  ({ 'aria-labelledby': string } | { 'aria-label': string });\n\nexport const ProgressIndicator = (\n  props: ProgressIndicatorProps\n): JSX.Element => {\n  const {\n    maxValue = 100,\n    value: realValue,\n    segments = 1,\n    'aria-valuetext': ariaValueText,\n  } = props;\n\n  useThemeCheck();\n  const { styleProps } = useSapphireStyleProps(props);\n  const { progressBarProps } = useProgressBar({\n    ...props,\n    minValue: 0,\n    valueLabel: ariaValueText,\n  });\n\n  const minValue = 0;\n\n  const value = Math.min(Math.max(realValue, minValue), maxValue);\n  const widthPercentage = (value / maxValue) * 100;\n\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(styles['sapphire-progress'])}\n    >\n      <div\n        {...progressBarProps}\n        className={styles['sapphire-progress--indicator']}\n        style={{ ...styleProps, width: `${widthPercentage}%` }}\n        aria-label={'aria-label' in props ? props['aria-label'] : undefined}\n        aria-labelledby={\n          'aria-labelledby' in props ? props['aria-labelledby'] : undefined\n        }\n      />\n      {segments > 1 && (\n        <div className={styles['sapphire-progress--segments']}>\n          {Array.from({ length: segments }, (_, index) => (\n            <span key={index}></span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA2CO,MAAM,iBAAA,GAAoB,CAC/B,KAAA,KACgB;AAChB,EAAA,MAAM;AAAA,IACJ,QAAA,GAAW,GAAA;AAAA,IACX,KAAA,EAAO,SAAA;AAAA,IACP,QAAA,GAAW,CAAA;AAAA,IACX,gBAAA,EAAkB;AAAA,GACpB,GAAI,KAAA;AAEJ,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,qBAAA,CAAsB,KAAK,CAAA;AAClD,EAAA,MAAM,EAAE,gBAAA,EAAiB,GAAI,cAAA,CAAe;AAAA,IAC1C,GAAG,KAAA;AAAA,IACH,QAAA,EAAU,CAAA;AAAA,IACV,UAAA,EAAY;AAAA,GACb,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,CAAA;AAEjB,EAAA,MAAM,KAAA,GAAQ,KAAK,GAAA,CAAI,IAAA,CAAK,IAAI,SAAA,EAAW,QAAQ,GAAG,QAAQ,CAAA;AAC9D,EAAA,MAAM,eAAA,GAAmB,QAAQ,QAAA,GAAY,GAAA;AAE7C,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MAC1C,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,mBAAmB,CAAC;AAAA,KAAA;AAAA,oBAE3C,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,gBAAA;AAAA,QACJ,SAAA,EAAW,OAAO,8BAA8B,CAAA;AAAA,QAChD,OAAO,EAAE,GAAG,YAAY,KAAA,EAAO,CAAA,EAAG,eAAe,CAAA,CAAA,CAAA,EAAI;AAAA,QACrD,YAAA,EAAY,YAAA,IAAgB,KAAA,GAAQ,KAAA,CAAM,YAAY,CAAA,GAAI,MAAA;AAAA,QAC1D,iBAAA,EACE,iBAAA,IAAqB,KAAA,GAAQ,KAAA,CAAM,iBAAiB,CAAA,GAAI;AAAA;AAAA,KAE5D;AAAA,IACC,QAAA,GAAW,qBACV,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,WAAW,MAAA,CAAO,6BAA6B,CAAA,EAAA,EACjD,KAAA,CAAM,IAAA,CAAK,EAAE,QAAQ,QAAA,EAAS,EAAG,CAAC,CAAA,EAAG,KAAA,yCACnC,MAAA,EAAA,EAAK,GAAA,EAAK,KAAA,EAAO,CACnB,CACH;AAAA,GAEJ;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/Sidebar/index.ts"],"sourcesContent":["import { Sidebar } from './src/Sidebar';\nimport { SidebarHeader } from './src/Header';\nimport { SidebarItem } from './src/Item';\nimport { SidebarExpandableItem } from './src/ExpandableItem';\nimport { SidebarSection } from './src/Section';\nimport { SidebarBody } from './src/Body';\nimport { SidebarList } from './src/List';\nimport { ResponsiveSidebarProvider } from './src/ResponsiveSidebarContext';\nimport { SidebarPanelTrigger } from './src/Panel';\n\nconst _Sidebar = Object.assign(Sidebar, {\n  ResponsiveProvider: ResponsiveSidebarProvider,\n  Header: SidebarHeader,\n  Body: SidebarBody,\n  List: SidebarList,\n  Item: SidebarItem,\n  ExpandableItem: SidebarExpandableItem,\n  Section: SidebarSection,\n  PanelTrigger: SidebarPanelTrigger,\n});\n\nexport { _Sidebar as Sidebar };\nexport { type SidebarProps } from './src/Sidebar';\nexport { type SidebarItemProps } from './src/Item';\nexport { type SidebarExpandableItemProps } from './src/ExpandableItem';\nexport { type SidebarSectionProps } from './src/Section';\nexport { type SidebarBodyProps } from './src/Body';\nexport { type SidebarListProps } from './src/List';\nexport { type SidebarHeaderProps } from './src/Header';\n"],"names":[],"mappings":";;;;;;;;;;AAUM,MAAA,QAAA,GAAW,MAAO,CAAA,MAAA,CAAO,OAAS,EAAA;AAAA,EACtC,kBAAoB,EAAA,yBAAA;AAAA,EACpB,MAAQ,EAAA,aAAA;AAAA,EACR,IAAM,EAAA,WAAA;AAAA,EACN,IAAM,EAAA,WAAA;AAAA,EACN,IAAM,EAAA,WAAA;AAAA,EACN,cAAgB,EAAA,qBAAA;AAAA,EAChB,OAAS,EAAA,cAAA;AAAA,EACT,YAAc,EAAA,mBAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/Sidebar/index.ts"],"sourcesContent":["import { Sidebar } from './src/Sidebar';\nimport { SidebarHeader } from './src/Header';\nimport { SidebarItem } from './src/Item';\nimport { SidebarExpandableItem } from './src/ExpandableItem';\nimport { SidebarSection } from './src/Section';\nimport { SidebarBody } from './src/Body';\nimport { SidebarList } from './src/List';\nimport { ResponsiveSidebarProvider } from './src/ResponsiveSidebarContext';\nimport { SidebarPanelTrigger } from './src/Panel';\n\nconst _Sidebar = Object.assign(Sidebar, {\n  ResponsiveProvider: ResponsiveSidebarProvider,\n  Header: SidebarHeader,\n  Body: SidebarBody,\n  List: SidebarList,\n  Item: SidebarItem,\n  ExpandableItem: SidebarExpandableItem,\n  Section: SidebarSection,\n  PanelTrigger: SidebarPanelTrigger,\n});\n\nexport { _Sidebar as Sidebar };\nexport { type SidebarProps } from './src/Sidebar';\nexport { type SidebarItemProps } from './src/Item';\nexport { type SidebarExpandableItemProps } from './src/ExpandableItem';\nexport { type SidebarSectionProps } from './src/Section';\nexport { type SidebarBodyProps } from './src/Body';\nexport { type SidebarListProps } from './src/List';\nexport { type SidebarHeaderProps } from './src/Header';\n"],"names":[],"mappings":";;;;;;;;;;AAUA,MAAM,QAAA,GAAW,MAAA,CAAO,MAAA,CAAO,OAAA,EAAS;AAAA,EACtC,kBAAA,EAAoB,yBAAA;AAAA,EACpB,MAAA,EAAQ,aAAA;AAAA,EACR,IAAA,EAAM,WAAA;AAAA,EACN,IAAA,EAAM,WAAA;AAAA,EACN,IAAA,EAAM,WAAA;AAAA,EACN,cAAA,EAAgB,qBAAA;AAAA,EAChB,OAAA,EAAS,cAAA;AAAA,EACT,YAAA,EAAc;AAChB,CAAC;;;;"}

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

@@ -1,55 +1,30 @@
 import React, { useRef } from 'react';
 import clsx from 'clsx';
-import { filterDOMProps } from '@react-aria/utils';
+import { filterDOMProps } from 'react-aria/filterDOMProps';
 import styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';
 import { useScrollCheck } from '@danske/sapphire-react';
 
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const SidebarBody = (_a) => {
-  var _b = _a, {
-    elementType = "nav",
-    children
-  } = _b, props = __objRest(_b, [
-    "elementType",
-    "children"
-  ]);
+const SidebarBody = ({
+  elementType = "nav",
+  children,
+  ...props
+}) => {
   const RootNode = elementType;
   const sidebarBody = useRef(null);
   const { isScrolled, scrollCheckProps } = useScrollCheck(sidebarBody);
-  return /* @__PURE__ */ React.createElement(RootNode, __spreadValues(__spreadValues({
-    ref: sidebarBody,
-    tabIndex: -1,
-    className: clsx(styles["sapphire-sidebar__body"], {
-      [styles["sapphire-sidebar__body--scrolled"]]: isScrolled
-    })
-  }, filterDOMProps(props, { global: true })), scrollCheckProps), children);
+  return /* @__PURE__ */ React.createElement(
+    RootNode,
+    {
+      ref: sidebarBody,
+      tabIndex: -1,
+      className: clsx(styles["sapphire-sidebar__body"], {
+        [styles["sapphire-sidebar__body--scrolled"]]: isScrolled
+      }),
+      ...filterDOMProps(props, { global: true }),
+      ...scrollCheckProps
+    },
+    children
+  );
 };
 
 export { SidebarBody };

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

@@ -1 +1 @@
-{"version":3,"file":"Body.js","sources":["../../../../src/Sidebar/src/Body.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from '@react-aria/utils';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport { useScrollCheck } from '@danske/sapphire-react';\n\nexport interface SidebarBodyProps extends DOMProps {\n  /**\n   * Wrapping element type.\n   * @default 'nav'\n   */\n  elementType?: string;\n  children?: ReactNode;\n}\n\nexport const SidebarBody = ({\n  elementType = 'nav',\n  children,\n  ...props\n}: SidebarBodyProps): React.JSX.Element => {\n  const RootNode = elementType as any;\n  const sidebarBody = useRef<HTMLElement>(null);\n  const { isScrolled, scrollCheckProps } = useScrollCheck(sidebarBody);\n\n  return (\n    <RootNode\n      ref={sidebarBody}\n      tabIndex={\n        -1 /* Some browsers will make this focusable because it overflows */\n      }\n      className={clsx(styles['sapphire-sidebar__body'], {\n        [styles['sapphire-sidebar__body--scrolled']]: isScrolled,\n      })}\n      {...filterDOMProps(props, { global: true })}\n      {...scrollCheckProps}\n    >\n      {children}\n    </RootNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBa,MAAA,WAAA,GAAc,CAAC,EAIe,KAAA;AAJf,EAC1B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAc,WAAA,GAAA,KAAA;AAAA,IACd,QAAA;AAAA,GAF0B,GAAA,EAAA,EAGvB,kBAHuB,EAGvB,EAAA;AAAA,IAFH,aAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,QAAW,GAAA,WAAA,CAAA;AACjB,EAAA,MAAM,cAAc,MAAoB,CAAA,IAAA,CAAA,CAAA;AACxC,EAAM,MAAA,EAAE,UAAY,EAAA,gBAAA,EAAA,GAAqB,cAAe,CAAA,WAAA,CAAA,CAAA;AAExD,EAAA,2CACG,QAAD,EAAA,cAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAK,EAAA,WAAA;AAAA,IACL,QACE,EAAA,CAAA,CAAA;AAAA,IAEF,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,wBAA2B,CAAA,EAAA;AAAA,MAAA,CAC/C,OAAO,kCAAsC,CAAA,GAAA,UAAA;AAAA,KAAA,CAAA;AAAA,GAAA,EAE5C,cAAe,CAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,UAChC,gBAEH,CAAA,EAAA,QAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Body.js","sources":["../../../../src/Sidebar/src/Body.tsx"],"sourcesContent":["import React, { ReactNode, useRef } from 'react';\nimport clsx from 'clsx';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\nimport { DOMProps } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/sidebar/sidebar.module.css';\nimport { useScrollCheck } from '@danske/sapphire-react';\n\nexport interface SidebarBodyProps extends DOMProps {\n  /**\n   * Wrapping element type.\n   * @default 'nav'\n   */\n  elementType?: string;\n  children?: ReactNode;\n}\n\nexport const SidebarBody = ({\n  elementType = 'nav',\n  children,\n  ...props\n}: SidebarBodyProps): React.JSX.Element => {\n  const RootNode = elementType as any;\n  const sidebarBody = useRef<HTMLElement>(null);\n  const { isScrolled, scrollCheckProps } = useScrollCheck(sidebarBody);\n\n  return (\n    <RootNode\n      ref={sidebarBody}\n      tabIndex={\n        -1 /* Some browsers will make this focusable because it overflows */\n      }\n      className={clsx(styles['sapphire-sidebar__body'], {\n        [styles['sapphire-sidebar__body--scrolled']]: isScrolled,\n      })}\n      {...filterDOMProps(props, { global: true })}\n      {...scrollCheckProps}\n    >\n      {children}\n    </RootNode>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,cAAc,CAAC;AAAA,EAC1B,WAAA,GAAc,KAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2C;AACzC,EAAA,MAAM,QAAA,GAAW,WAAA;AACjB,EAAA,MAAM,WAAA,GAAc,OAAoB,IAAI,CAAA;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,gBAAA,EAAiB,GAAI,eAAe,WAAW,CAAA;AAEnE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,WAAA;AAAA,MACL,QAAA,EACE,EAAA;AAAA,MAEF,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,wBAAwB,CAAA,EAAG;AAAA,QAChD,CAAC,MAAA,CAAO,kCAAkC,CAAC,GAAG;AAAA,OAC/C,CAAA;AAAA,MACA,GAAG,cAAA,CAAe,KAAA,EAAO,EAAE,MAAA,EAAQ,MAAM,CAAA;AAAA,MACzC,GAAG;AAAA,KAAA;AAAA,IAEH;AAAA,GACH;AAEJ;;;;"}