@danske/sapphire-react-lab 0.105.2 → 0.106.2

package/build/esm/Alert/src/Alert.js

@@ -3,49 +3,14 @@ import { useThemeCheck, useSapphireStyleProps, Icon, Typography } from '@danske/
 import { Information, Error, CheckmarkOutline, Warning } from '@danske/sapphire-icons/react';
 import alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';
 import { clsx } from 'clsx';
-import { filterDOMProps } from '@react-aria/utils';
+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));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function Alert(_a) {
-  var _b = _a, {
-    children,
-    title,
-    variant = "info"
-  } = _b, props = __objRest(_b, [
-    "children",
-    "title",
-    "variant"
-  ]);
+function Alert({
+  children,
+  title,
+  variant = "info",
+  ...props
+}) {
   useThemeCheck();
   const {
     styleProps: { style, className }
@@ -62,29 +27,26 @@ function Alert(_a) {
         return /* @__PURE__ */ React.createElement(Information, null);
     }
   };
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, filterDOMProps(props, { global: true })), {
-    className: clsx(alertStyles["sapphire-alert"], {
-      [alertStyles["sapphire-alert--positive"]]: variant === "positive",
-      [alertStyles["sapphire-alert--negative"]]: variant === "negative",
-      [alertStyles["sapphire-alert--warning"]]: variant === "warning"
-    }, className),
-    style,
-    role: "alert"
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: alertStyles["sapphire-alert__icon"]
-  }, /* @__PURE__ */ React.createElement(Icon, {
-    size: "sm"
-  }, getIcon(variant))), /* @__PURE__ */ React.createElement("div", {
-    className: alertStyles["sapphire-alert__title"]
-  }, /* @__PURE__ */ React.createElement(Typography.Body, {
-    size: "sm",
-    isSemibold: true
-  }, title)), /* @__PURE__ */ React.createElement("div", {
-    className: alertStyles["sapphire-alert__content"]
-  }, /* @__PURE__ */ React.createElement(Typography.Body, {
-    elementType: "section",
-    size: "md"
-  }, children)));
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...filterDOMProps(props, { global: true }),
+      className: clsx(
+        alertStyles["sapphire-alert"],
+        {
+          [alertStyles["sapphire-alert--positive"]]: variant === "positive",
+          [alertStyles["sapphire-alert--negative"]]: variant === "negative",
+          [alertStyles["sapphire-alert--warning"]]: variant === "warning"
+        },
+        className
+      ),
+      style,
+      role: "alert"
+    },
+    /* @__PURE__ */ React.createElement("span", { className: alertStyles["sapphire-alert__icon"] }, /* @__PURE__ */ React.createElement(Icon, { size: "sm" }, getIcon(variant))),
+    /* @__PURE__ */ React.createElement("div", { className: alertStyles["sapphire-alert__title"] }, /* @__PURE__ */ React.createElement(Typography.Body, { size: "sm", isSemibold: true }, title)),
+    /* @__PURE__ */ React.createElement("div", { className: alertStyles["sapphire-alert__content"] }, /* @__PURE__ */ React.createElement(Typography.Body, { elementType: "section", size: "md" }, children))
+  );
 }
 
 export { Alert };

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/Alert/src/Alert.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  Typography,\n  Icon,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n  CheckmarkOutline,\n  Information,\n  Warning,\n  Error,\n} from '@danske/sapphire-icons/react';\nimport alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';\nimport { clsx } from 'clsx';\nimport { filterDOMProps } from '@react-aria/utils';\n\nexport interface SapphireAlertProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps {\n  /**\n   * The content of the alert.\n   */\n  children?: ReactNode;\n\n  /**\n   * The title of the alert.\n   */\n  title?: ReactNode;\n\n  /**\n   * @default 'info'\n   */\n  variant?: 'info' | 'positive' | 'negative' | 'warning';\n}\n\nexport function Alert({\n  children,\n  title,\n  variant = 'info',\n  ...props\n}: SapphireAlertProps): React.JSX.Element {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const getIcon = (variant: string) => {\n    switch (variant) {\n      case 'warning':\n        return <Warning />;\n      case 'positive':\n        return <CheckmarkOutline />;\n      case 'negative':\n        return <Error />;\n      default:\n        return <Information />;\n    }\n  };\n\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(\n        alertStyles['sapphire-alert'],\n        {\n          [alertStyles['sapphire-alert--positive']]: variant === 'positive',\n          [alertStyles['sapphire-alert--negative']]: variant === 'negative',\n          [alertStyles['sapphire-alert--warning']]: variant === 'warning',\n        },\n        className\n      )}\n      style={style}\n      role=\"alert\"\n    >\n      <span className={alertStyles['sapphire-alert__icon']}>\n        <Icon size=\"sm\">{getIcon(variant)}</Icon>\n      </span>\n      <div className={alertStyles['sapphire-alert__title']}>\n        <Typography.Body size=\"sm\" isSemibold>\n          {title}\n        </Typography.Body>\n      </div>\n      <div className={alertStyles['sapphire-alert__content']}>\n        <Typography.Body elementType=\"section\" size=\"md\">\n          {children}\n        </Typography.Body>\n      </div>\n    </div>\n  );\n}\n"],"names":["Error2"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,SAAA,KAAA,CAAe,EAKoB,EAAA;AALpB,EACpB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,GAHU,GAAA,EAAA,EAIjB,kBAJiB,EAIjB,EAAA;AAAA,IAHH,UAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE1B,EAAM,MAAA,OAAA,GAAU,CAAC,QAAoB,KAAA;AACnC,IAAQ,QAAA,QAAA;AAAA,MACD,KAAA,SAAA;AACH,QAAA,2CAAQ,OAAD,EAAA,IAAA,CAAA,CAAA;AAAA,MACJ,KAAA,UAAA;AACH,QAAA,2CAAQ,gBAAD,EAAA,IAAA,CAAA,CAAA;AAAA,MACJ,KAAA,UAAA;AACH,QAAA,2CAAQA,KAAD,EAAA,IAAA,CAAA,CAAA;AAAA,MAAA;AAEP,QAAA,2CAAQ,WAAD,EAAA,IAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA;AAIb,EAAA,2CACG,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,eAAe,KAAO,EAAA,EAAE,QAAQ,IADtC,EAAA,CAAA,CAAA,EAAA;AAAA,IAEE,SAAA,EAAW,IACT,CAAA,WAAA,CAAY,gBACZ,CAAA,EAAA;AAAA,MACG,CAAA,WAAA,CAAY,8BAA8B,OAAY,KAAA,UAAA;AAAA,MACtD,CAAA,WAAA,CAAY,8BAA8B,OAAY,KAAA,UAAA;AAAA,MACtD,CAAA,WAAA,CAAY,6BAA6B,OAAY,KAAA,SAAA;AAAA,KAExD,EAAA,SAAA,CAAA;AAAA,IAEF,KAAA;AAAA,IACA,IAAK,EAAA,OAAA;AAAA,GAAA,CAAA,sCAEJ,MAAD,EAAA;AAAA,IAAM,WAAW,WAAY,CAAA,sBAAA,CAAA;AAAA,GAAA,sCAC1B,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,IAAA;AAAA,GAAM,EAAA,OAAA,CAAQ,OAE3B,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,WAAY,CAAA,uBAAA,CAAA;AAAA,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IAAiB,IAAK,EAAA,IAAA;AAAA,IAAK,UAAU,EAAA,IAAA;AAAA,GAClC,EAAA,KAAA,CAAA,CAAA,sCAGJ,KAAD,EAAA;AAAA,IAAK,WAAW,WAAY,CAAA,yBAAA,CAAA;AAAA,GAC1B,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IAAiB,WAAY,EAAA,SAAA;AAAA,IAAU,IAAK,EAAA,IAAA;AAAA,GACzC,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/Alert/src/Alert.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  useSapphireStyleProps,\n  Typography,\n  Icon,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport {\n  CheckmarkOutline,\n  Information,\n  Warning,\n  Error,\n} from '@danske/sapphire-icons/react';\nimport alertStyles from '@danske/sapphire-css/components/alert/alert.module.css';\nimport { clsx } from 'clsx';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport interface SapphireAlertProps\n  extends GlobalDomAttributes,\n    SapphireStyleProps {\n  /**\n   * The content of the alert.\n   */\n  children?: ReactNode;\n\n  /**\n   * The title of the alert.\n   */\n  title?: ReactNode;\n\n  /**\n   * @default 'info'\n   */\n  variant?: 'info' | 'positive' | 'negative' | 'warning';\n}\n\nexport function Alert({\n  children,\n  title,\n  variant = 'info',\n  ...props\n}: SapphireAlertProps): React.JSX.Element {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const getIcon = (variant: string) => {\n    switch (variant) {\n      case 'warning':\n        return <Warning />;\n      case 'positive':\n        return <CheckmarkOutline />;\n      case 'negative':\n        return <Error />;\n      default:\n        return <Information />;\n    }\n  };\n\n  return (\n    <div\n      {...filterDOMProps(props, { global: true })}\n      className={clsx(\n        alertStyles['sapphire-alert'],\n        {\n          [alertStyles['sapphire-alert--positive']]: variant === 'positive',\n          [alertStyles['sapphire-alert--negative']]: variant === 'negative',\n          [alertStyles['sapphire-alert--warning']]: variant === 'warning',\n        },\n        className\n      )}\n      style={style}\n      role=\"alert\"\n    >\n      <span className={alertStyles['sapphire-alert__icon']}>\n        <Icon size=\"sm\">{getIcon(variant)}</Icon>\n      </span>\n      <div className={alertStyles['sapphire-alert__title']}>\n        <Typography.Body size=\"sm\" isSemibold>\n          {title}\n        </Typography.Body>\n      </div>\n      <div className={alertStyles['sapphire-alert__content']}>\n        <Typography.Body elementType=\"section\" size=\"md\">\n          {children}\n        </Typography.Body>\n      </div>\n    </div>\n  );\n}\n"],"names":["variant"],"mappings":";;;;;;;AAsCO,SAAS,KAAA,CAAM;AAAA,EACpB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,GAAG;AACL,CAAA,EAA0C;AACxC,EAAA,aAAA,EAAc;AACd,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,EAAE,KAAA,EAAO,SAAA;AAAU,GACjC,GAAI,sBAAsB,KAAK,CAAA;AAE/B,EAAA,MAAM,OAAA,GAAU,CAACA,QAAAA,KAAoB;AACnC,IAAA,QAAQA,QAAAA;AAAS,MACf,KAAK,SAAA;AACH,QAAA,2CAAQ,OAAA,EAAA,IAAQ,CAAA;AAAA,MAClB,KAAK,UAAA;AACH,QAAA,2CAAQ,gBAAA,EAAA,IAAiB,CAAA;AAAA,MAC3B,KAAK,UAAA;AACH,QAAA,2CAAQ,KAAA,EAAA,IAAM,CAAA;AAAA,MAChB;AACE,QAAA,2CAAQ,WAAA,EAAA,IAAY,CAAA;AAAA;AACxB,EACF,CAAA;AAEA,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;AAAA,QACT,YAAY,gBAAgB,CAAA;AAAA,QAC5B;AAAA,UACE,CAAC,WAAA,CAAY,0BAA0B,CAAC,GAAG,OAAA,KAAY,UAAA;AAAA,UACvD,CAAC,WAAA,CAAY,0BAA0B,CAAC,GAAG,OAAA,KAAY,UAAA;AAAA,UACvD,CAAC,WAAA,CAAY,yBAAyB,CAAC,GAAG,OAAA,KAAY;AAAA,SACxD;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,IAAA,EAAK;AAAA,KAAA;AAAA,oBAEL,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,WAAA,CAAY,sBAAsB,CAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,IAAA,EAAA,EAAM,OAAA,CAAQ,OAAO,CAAE,CACpC,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,uBAAuB,CAAA,EAAA,kBACjD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,IAAA,EAAK,IAAA,EAAK,UAAA,EAAU,IAAA,EAAA,EAClC,KACH,CACF,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAA,CAAY,yBAAyB,CAAA,EAAA,kBACnD,KAAA,CAAA,aAAA,CAAC,UAAA,CAAW,IAAA,EAAX,EAAgB,WAAA,EAAY,SAAA,EAAU,IAAA,EAAK,IAAA,EAAA,EACzC,QACH,CACF;AAAA,GACF;AAEJ;;;;"}

package/build/esm/Amount/src/Amount.js

@@ -1,75 +1,53 @@
 import React, { useMemo } from 'react';
 import { useThemeCheck, useSapphireStyleProps, Typography } from '@danske/sapphire-react';
-import { useLocale } from '@react-aria/i18n';
+import { useLocale } from 'react-aria/I18nProvider';
 import { useGroupAmount } from './useGroupAmount.js';
 import styles from '@danske/sapphire-css/components/amount/amount.module.css';
 
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const Amount = (_a) => {
-  var _b = _a, {
-    emphasis = "regular",
-    variant,
-    formatOptions,
-    value,
-    size
-  } = _b, props = __objRest(_b, [
-    "emphasis",
-    "variant",
-    "formatOptions",
-    "value",
-    "size"
-  ]);
+const Amount = ({
+  emphasis = "regular",
+  variant,
+  formatOptions,
+  value,
+  size,
+  ...props
+}) => {
   useThemeCheck();
   const { styleProps, filteredProps } = useSapphireStyleProps(props);
   const { locale } = useLocale();
-  const formatter = useMemo(() => new Intl.NumberFormat(locale, __spreadValues({
-    style: (formatOptions == null ? void 0 : formatOptions.currency) ? "currency" : void 0,
-    signDisplay: (formatOptions == null ? void 0 : formatOptions.signDisplay) || String(value).startsWith("+") ? "always" : "auto",
-    minimumFractionDigits: 2
-  }, formatOptions)), [locale, formatOptions, value]);
+  const formatter = useMemo(
+    () => new Intl.NumberFormat(locale, {
+      style: formatOptions?.currency ? "currency" : void 0,
+      /**
+       * Always show the sign if the value starts with '+' or '-'.
+       */
+      signDisplay: formatOptions?.signDisplay || String(value).startsWith("+") ? "always" : "auto",
+      minimumFractionDigits: 2,
+      ...formatOptions
+    }),
+    [locale, formatOptions, value]
+  );
   const { formattedValue, groupedParts } = useGroupAmount(value, formatter);
-  return /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({
-    style: styleProps.style,
-    className: styles["sapphire-amount"]
-  }, filteredProps), {
-    "aria-label": formattedValue
-  }), groupedParts.map((part, index) => /* @__PURE__ */ React.createElement(Typography.Body, {
-    elementType: "span",
-    key: index,
-    color: variant === "positive" ? "positive" : "primary",
-    isSemibold: emphasis === "primary" ? true : false,
-    size
-  }, part.value)));
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      style: styleProps.style,
+      className: styles["sapphire-amount"],
+      ...filteredProps,
+      "aria-label": formattedValue
+    },
+    groupedParts.map((part, index) => /* @__PURE__ */ React.createElement(
+      Typography.Body,
+      {
+        elementType: "span",
+        key: index,
+        color: variant === "positive" ? "positive" : "primary",
+        isSemibold: emphasis === "primary" ? true : false,
+        size
+      },
+      part.value
+    ))
+  );
 };
 
 export { Amount };

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

@@ -1 +1 @@
-{"version":3,"file":"Amount.js","sources":["../../../../src/Amount/src/Amount.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  useThemeCheck,\n  SapphireStyleProps,\n  GlobalDomAttributes,\n  Typography,\n  TypographyBodyProps,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { useLocale } from '@react-aria/i18n';\nimport { useGroupAmount } from './useGroupAmount';\nimport styles from '@danske/sapphire-css/components/amount/amount.module.css';\n\n/**\n * Format options for currency amounts.\n * The style is always 'currency', so only currency-related options are exposed.\n */\nexport type CurrencyFormatOptions = Pick<\n  Intl.NumberFormatOptions,\n  | 'currency'\n  | 'currencyDisplay'\n  | 'currencySign'\n  | 'signDisplay'\n  | 'minimumFractionDigits'\n  | 'maximumFractionDigits'\n  | 'minimumSignificantDigits'\n  | 'maximumSignificantDigits'\n  | 'useGrouping'\n  | 'notation'\n>;\n\nexport type AmountProps = {\n  /**\n   * When displaying amounts, readability and visual hierarchy are key. Use medium weight for primary emphasis to highlight amounts or regular weight for secondary emphasis.\n   *\n   * @default 'regular'\n   */\n  emphasis?: 'primary' | 'regular';\n  /**\n   * The variant of the Amount component. `positive` shows a green color, and should be used for amounts greater than zero.\n   *\n   * @default 'neutal'\n   */\n  variant?: 'neutal' | 'positive';\n  /**\n   * The amount value to be formatted and displayed.\n   *\n   * If displaying the sign is a requirement, ensure the value is a string that starts with '+' or '-'.\n   * Alternatively, you can use the `signDisplay` option in `formatOptions` to control the display of the sign for numeric values.\n   */\n  value: string | number;\n  /** Currency formatting options */\n  formatOptions?: CurrencyFormatOptions;\n} & Pick<TypographyBodyProps, 'size'> &\n  SapphireStyleProps &\n  GlobalDomAttributes;\n\nexport const Amount = ({\n  emphasis = 'regular',\n  variant,\n  formatOptions,\n  value,\n  size,\n  ...props\n}: AmountProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps, filteredProps } = useSapphireStyleProps(props);\n  const { locale } = useLocale();\n\n  const formatter = useMemo(\n    () =>\n      new Intl.NumberFormat(locale, {\n        style: formatOptions?.currency ? 'currency' : undefined,\n        /**\n         * Always show the sign if the value starts with '+' or '-'.\n         */\n        signDisplay:\n          formatOptions?.signDisplay || String(value).startsWith('+')\n            ? 'always'\n            : 'auto',\n        minimumFractionDigits: 2,\n        ...formatOptions,\n      }),\n    [locale, formatOptions, value]\n  );\n\n  const { formattedValue, groupedParts } = useGroupAmount(value, formatter);\n\n  return (\n    <span\n      style={styleProps.style}\n      className={styles['sapphire-amount']}\n      {...filteredProps}\n      aria-label={formattedValue}\n    >\n      {groupedParts.map((part, index) => (\n        <Typography.Body\n          elementType=\"span\"\n          key={index}\n          color={variant === 'positive' ? 'positive' : 'primary'}\n          isSemibold={emphasis === 'primary' ? true : false}\n          size={size}\n        >\n          {part.value}\n        </Typography.Body>\n      ))}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Da,MAAA,MAAA,GAAS,CAAC,EAOS,KAAA;AAPT,EACrB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAW,QAAA,GAAA,SAAA;AAAA,IACX,OAAA;AAAA,IACA,aAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA;AAAA,GALqB,GAAA,EAAA,EAMlB,kBANkB,EAMlB,EAAA;AAAA,IALH,UAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,UAAY,EAAA,aAAA,EAAA,GAAkB,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC5D,EAAA,MAAM,EAAE,MAAW,EAAA,GAAA,SAAA,EAAA,CAAA;AAEnB,EAAA,MAAM,YAAY,OAChB,CAAA,MACE,IAAI,IAAA,CAAK,aAAa,MAAQ,EAAA,cAAA,CAAA;AAAA,IAC5B,KAAA,EAAO,CAAe,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,QAAA,IAAW,UAAa,GAAA,KAAA,CAAA;AAAA,IAI9C,aACE,CAAe,aAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,WAAA,KAAe,OAAO,KAAO,CAAA,CAAA,UAAA,CAAW,OACnD,QACA,GAAA,MAAA;AAAA,IACN,qBAAuB,EAAA,CAAA;AAAA,GACpB,EAAA,aAAA,CAAA,CAAA,EAEP,CAAC,MAAA,EAAQ,aAAe,EAAA,KAAA,CAAA,CAAA,CAAA;AAG1B,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAiB,EAAA,GAAA,cAAA,CAAe,KAAO,EAAA,SAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,MAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,OAAO,UAAW,CAAA,KAAA;AAAA,IAClB,WAAW,MAAO,CAAA,iBAAA,CAAA;AAAA,GAAA,EACd,aAHN,CAAA,EAAA;AAAA,IAIE,YAAY,EAAA,cAAA;AAAA,GAAA,CAAA,EAEX,aAAa,GAAI,CAAA,CAAC,MAAM,KACvB,qBAAA,KAAA,CAAA,aAAA,CAAC,WAAW,IAAZ,EAAA;AAAA,IACE,WAAY,EAAA,MAAA;AAAA,IACZ,GAAK,EAAA,KAAA;AAAA,IACL,KAAA,EAAO,OAAY,KAAA,UAAA,GAAa,UAAa,GAAA,SAAA;AAAA,IAC7C,UAAA,EAAY,QAAa,KAAA,SAAA,GAAY,IAAO,GAAA,KAAA;AAAA,IAC5C,IAAA;AAAA,GAAA,EAEC,IAAK,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Amount.js","sources":["../../../../src/Amount/src/Amount.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport {\n  useThemeCheck,\n  SapphireStyleProps,\n  GlobalDomAttributes,\n  Typography,\n  TypographyBodyProps,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport React from 'react';\nimport { useLocale } from 'react-aria/I18nProvider';\nimport { useGroupAmount } from './useGroupAmount';\nimport styles from '@danske/sapphire-css/components/amount/amount.module.css';\n\n/**\n * Format options for currency amounts.\n * The style is always 'currency', so only currency-related options are exposed.\n */\nexport type CurrencyFormatOptions = Pick<\n  Intl.NumberFormatOptions,\n  | 'currency'\n  | 'currencyDisplay'\n  | 'currencySign'\n  | 'signDisplay'\n  | 'minimumFractionDigits'\n  | 'maximumFractionDigits'\n  | 'minimumSignificantDigits'\n  | 'maximumSignificantDigits'\n  | 'useGrouping'\n  | 'notation'\n>;\n\nexport type AmountProps = {\n  /**\n   * When displaying amounts, readability and visual hierarchy are key. Use medium weight for primary emphasis to highlight amounts or regular weight for secondary emphasis.\n   *\n   * @default 'regular'\n   */\n  emphasis?: 'primary' | 'regular';\n  /**\n   * The variant of the Amount component. `positive` shows a green color, and should be used for amounts greater than zero.\n   *\n   * @default 'neutal'\n   */\n  variant?: 'neutal' | 'positive';\n  /**\n   * The amount value to be formatted and displayed.\n   *\n   * If displaying the sign is a requirement, ensure the value is a string that starts with '+' or '-'.\n   * Alternatively, you can use the `signDisplay` option in `formatOptions` to control the display of the sign for numeric values.\n   */\n  value: string | number;\n  /** Currency formatting options */\n  formatOptions?: CurrencyFormatOptions;\n} & Pick<TypographyBodyProps, 'size'> &\n  SapphireStyleProps &\n  GlobalDomAttributes;\n\nexport const Amount = ({\n  emphasis = 'regular',\n  variant,\n  formatOptions,\n  value,\n  size,\n  ...props\n}: AmountProps): JSX.Element => {\n  useThemeCheck();\n  const { styleProps, filteredProps } = useSapphireStyleProps(props);\n  const { locale } = useLocale();\n\n  const formatter = useMemo(\n    () =>\n      new Intl.NumberFormat(locale, {\n        style: formatOptions?.currency ? 'currency' : undefined,\n        /**\n         * Always show the sign if the value starts with '+' or '-'.\n         */\n        signDisplay:\n          formatOptions?.signDisplay || String(value).startsWith('+')\n            ? 'always'\n            : 'auto',\n        minimumFractionDigits: 2,\n        ...formatOptions,\n      }),\n    [locale, formatOptions, value]\n  );\n\n  const { formattedValue, groupedParts } = useGroupAmount(value, formatter);\n\n  return (\n    <span\n      style={styleProps.style}\n      className={styles['sapphire-amount']}\n      {...filteredProps}\n      aria-label={formattedValue}\n    >\n      {groupedParts.map((part, index) => (\n        <Typography.Body\n          elementType=\"span\"\n          key={index}\n          color={variant === 'positive' ? 'positive' : 'primary'}\n          isSemibold={emphasis === 'primary' ? true : false}\n          size={size}\n        >\n          {part.value}\n        </Typography.Body>\n      ))}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA0DO,MAAM,SAAS,CAAC;AAAA,EACrB,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAgC;AAC9B,EAAA,aAAA,EAAc;AACd,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,sBAAsB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAE7B,EAAA,MAAM,SAAA,GAAY,OAAA;AAAA,IAChB,MACE,IAAI,IAAA,CAAK,YAAA,CAAa,MAAA,EAAQ;AAAA,MAC5B,KAAA,EAAO,aAAA,EAAe,QAAA,GAAW,UAAA,GAAa,MAAA;AAAA;AAAA;AAAA;AAAA,MAI9C,WAAA,EACE,eAAe,WAAA,IAAe,MAAA,CAAO,KAAK,CAAA,CAAE,UAAA,CAAW,GAAG,CAAA,GACtD,QAAA,GACA,MAAA;AAAA,MACN,qBAAA,EAAuB,CAAA;AAAA,MACvB,GAAG;AAAA,KACJ,CAAA;AAAA,IACH,CAAC,MAAA,EAAQ,aAAA,EAAe,KAAK;AAAA,GAC/B;AAEA,EAAA,MAAM,EAAE,cAAA,EAAgB,YAAA,EAAa,GAAI,cAAA,CAAe,OAAO,SAAS,CAAA;AAExE,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAO,UAAA,CAAW,KAAA;AAAA,MAClB,SAAA,EAAW,OAAO,iBAAiB,CAAA;AAAA,MAClC,GAAG,aAAA;AAAA,MACJ,YAAA,EAAY;AAAA,KAAA;AAAA,IAEX,YAAA,CAAa,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,qBACvB,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA,CAAW,IAAA;AAAA,MAAX;AAAA,QACC,WAAA,EAAY,MAAA;AAAA,QACZ,GAAA,EAAK,KAAA;AAAA,QACL,KAAA,EAAO,OAAA,KAAY,UAAA,GAAa,UAAA,GAAa,SAAA;AAAA,QAC7C,UAAA,EAAY,QAAA,KAAa,SAAA,GAAY,IAAA,GAAO,KAAA;AAAA,QAC5C;AAAA,OAAA;AAAA,MAEC,IAAA,CAAK;AAAA,KAET;AAAA,GACH;AAEJ;;;;"}

package/build/esm/Amount/src/useGroupAmount.js

@@ -27,7 +27,10 @@ const useGroupAmount = (value, formatter) => {
     }
     return result;
   }, [numberValue, formatter]);
-  const formattedValue = useMemo(() => groupedParts.map((part) => part.value).join(""), [groupedParts]);
+  const formattedValue = useMemo(
+    () => groupedParts.map((part) => part.value).join(""),
+    [groupedParts]
+  );
   return { formattedValue, groupedParts };
 };
 

package/build/esm/Amount/src/useGroupAmount.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGroupAmount.js","sources":["../../../../src/Amount/src/useGroupAmount.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport interface GroupedPart {\n  type: 'sign' | 'number' | 'currency';\n  value: string;\n}\n\n/**\n * Process the value that is being provided and format it using the provided formatter.\n * It returns both the formatted value as a string and the grouped parts for further processing.\n * It's useful for keeping track of diffrent parts of the formatted amount and where currency symbols are located.\n *\n * Example: value = \"+30000\", formatter for DKK currency\n * formattedValue = \"+DKK 30,000.00\"\n * groupedParts = [\n *   { type: 'sign', value: '+' },\n *   { type: 'currency', value: 'DKK' },\n *   { type: 'number', value: '30,000.00' }\n * ]\n */\nexport const useGroupAmount = (\n  value: string | number,\n  formatter: Intl.NumberFormat\n) => {\n  const numberValue = useMemo(() => {\n    const parsed = Number(value);\n    return isNaN(parsed) ? 0 : parsed;\n  }, [value]);\n\n  const groupedParts = useMemo(() => {\n    const parts = formatter.formatToParts(numberValue);\n    const result: GroupedPart[] = [];\n    let currentNumber = '';\n\n    parts.forEach((part) => {\n      if (part.type === 'plusSign' || part.type === 'minusSign') {\n        result.push({ type: 'sign', value: part.value });\n      } else if (part.type === 'currency') {\n        if (currentNumber) {\n          result.push({ type: 'number', value: currentNumber });\n          currentNumber = '';\n        }\n        result.push({ type: 'currency', value: part.value });\n      } else if (part.type !== 'literal') {\n        currentNumber += part.value;\n      }\n    });\n\n    if (currentNumber) {\n      result.push({ type: 'number', value: currentNumber });\n    }\n\n    return result;\n  }, [numberValue, formatter]);\n\n  const formattedValue = useMemo(\n    () => groupedParts.map((part) => part.value).join(''),\n    [groupedParts]\n  );\n\n  return { formattedValue, groupedParts };\n};\n"],"names":[],"mappings":";;AAoBa,MAAA,cAAA,GAAiB,CAC5B,KAAA,EACA,SACG,KAAA;AACH,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,MAAM,SAAS,MAAO,CAAA,KAAA,CAAA,CAAA;AACtB,IAAO,OAAA,KAAA,CAAM,UAAU,CAAI,GAAA,MAAA,CAAA;AAAA,GAAA,EAC1B,CAAC,KAAA,CAAA,CAAA,CAAA;AAEJ,EAAM,MAAA,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAM,MAAA,KAAA,GAAQ,UAAU,aAAc,CAAA,WAAA,CAAA,CAAA;AACtC,IAAA,MAAM,MAAwB,GAAA,EAAA,CAAA;AAC9B,IAAA,IAAI,aAAgB,GAAA,EAAA,CAAA;AAEpB,IAAM,KAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AACtB,MAAA,IAAI,IAAK,CAAA,IAAA,KAAS,UAAc,IAAA,IAAA,CAAK,SAAS,WAAa,EAAA;AACzD,QAAA,MAAA,CAAO,IAAK,CAAA,EAAE,IAAM,EAAA,MAAA,EAAQ,OAAO,IAAK,CAAA,KAAA,EAAA,CAAA,CAAA;AAAA,OAC/B,MAAA,IAAA,IAAA,CAAK,SAAS,UAAY,EAAA;AACnC,QAAA,IAAI,aAAe,EAAA;AACjB,UAAA,MAAA,CAAO,IAAK,CAAA,EAAE,IAAM,EAAA,QAAA,EAAU,KAAO,EAAA,aAAA,EAAA,CAAA,CAAA;AACrC,UAAgB,aAAA,GAAA,EAAA,CAAA;AAAA,SAAA;AAElB,QAAA,MAAA,CAAO,IAAK,CAAA,EAAE,IAAM,EAAA,UAAA,EAAY,OAAO,IAAK,CAAA,KAAA,EAAA,CAAA,CAAA;AAAA,OACnC,MAAA,IAAA,IAAA,CAAK,SAAS,SAAW,EAAA;AAClC,QAAA,aAAA,IAAiB,IAAK,CAAA,KAAA,CAAA;AAAA,OAAA;AAAA,KAAA,CAAA,CAAA;AAI1B,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,MAAA,CAAO,IAAK,CAAA,EAAE,IAAM,EAAA,QAAA,EAAU,KAAO,EAAA,aAAA,EAAA,CAAA,CAAA;AAAA,KAAA;AAGvC,IAAO,OAAA,MAAA,CAAA;AAAA,GAAA,EACN,CAAC,WAAa,EAAA,SAAA,CAAA,CAAA,CAAA;AAEjB,EAAM,MAAA,cAAA,GAAiB,OACrB,CAAA,MAAM,YAAa,CAAA,GAAA,CAAI,CAAC,IAAA,KAAS,IAAK,CAAA,KAAA,CAAA,CAAO,IAAK,CAAA,EAAA,CAAA,EAClD,CAAC,YAAA,CAAA,CAAA,CAAA;AAGH,EAAA,OAAO,EAAE,cAAgB,EAAA,YAAA,EAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"useGroupAmount.js","sources":["../../../../src/Amount/src/useGroupAmount.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nexport interface GroupedPart {\n  type: 'sign' | 'number' | 'currency';\n  value: string;\n}\n\n/**\n * Process the value that is being provided and format it using the provided formatter.\n * It returns both the formatted value as a string and the grouped parts for further processing.\n * It's useful for keeping track of diffrent parts of the formatted amount and where currency symbols are located.\n *\n * Example: value = \"+30000\", formatter for DKK currency\n * formattedValue = \"+DKK 30,000.00\"\n * groupedParts = [\n *   { type: 'sign', value: '+' },\n *   { type: 'currency', value: 'DKK' },\n *   { type: 'number', value: '30,000.00' }\n * ]\n */\nexport const useGroupAmount = (\n  value: string | number,\n  formatter: Intl.NumberFormat\n) => {\n  const numberValue = useMemo(() => {\n    const parsed = Number(value);\n    return isNaN(parsed) ? 0 : parsed;\n  }, [value]);\n\n  const groupedParts = useMemo(() => {\n    const parts = formatter.formatToParts(numberValue);\n    const result: GroupedPart[] = [];\n    let currentNumber = '';\n\n    parts.forEach((part) => {\n      if (part.type === 'plusSign' || part.type === 'minusSign') {\n        result.push({ type: 'sign', value: part.value });\n      } else if (part.type === 'currency') {\n        if (currentNumber) {\n          result.push({ type: 'number', value: currentNumber });\n          currentNumber = '';\n        }\n        result.push({ type: 'currency', value: part.value });\n      } else if (part.type !== 'literal') {\n        currentNumber += part.value;\n      }\n    });\n\n    if (currentNumber) {\n      result.push({ type: 'number', value: currentNumber });\n    }\n\n    return result;\n  }, [numberValue, formatter]);\n\n  const formattedValue = useMemo(\n    () => groupedParts.map((part) => part.value).join(''),\n    [groupedParts]\n  );\n\n  return { formattedValue, groupedParts };\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,cAAA,GAAiB,CAC5B,KAAA,EACA,SAAA,KACG;AACH,EAAA,MAAM,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,MAAM,MAAA,GAAS,OAAO,KAAK,CAAA;AAC3B,IAAA,OAAO,KAAA,CAAM,MAAM,CAAA,GAAI,CAAA,GAAI,MAAA;AAAA,EAC7B,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,aAAA,CAAc,WAAW,CAAA;AACjD,IAAA,MAAM,SAAwB,EAAC;AAC/B,IAAA,IAAI,aAAA,GAAgB,EAAA;AAEpB,IAAA,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAA,KAAS;AACtB,MAAA,IAAI,IAAA,CAAK,IAAA,KAAS,UAAA,IAAc,IAAA,CAAK,SAAS,WAAA,EAAa;AACzD,QAAA,MAAA,CAAO,KAAK,EAAE,IAAA,EAAM,QAAQ,KAAA,EAAO,IAAA,CAAK,OAAO,CAAA;AAAA,MACjD,CAAA,MAAA,IAAW,IAAA,CAAK,IAAA,KAAS,UAAA,EAAY;AACnC,QAAA,IAAI,aAAA,EAAe;AACjB,UAAA,MAAA,CAAO,KAAK,EAAE,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,eAAe,CAAA;AACpD,UAAA,aAAA,GAAgB,EAAA;AAAA,QAClB;AACA,QAAA,MAAA,CAAO,KAAK,EAAE,IAAA,EAAM,YAAY,KAAA,EAAO,IAAA,CAAK,OAAO,CAAA;AAAA,MACrD,CAAA,MAAA,IAAW,IAAA,CAAK,IAAA,KAAS,SAAA,EAAW;AAClC,QAAA,aAAA,IAAiB,IAAA,CAAK,KAAA;AAAA,MACxB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,IAAI,aAAA,EAAe;AACjB,MAAA,MAAA,CAAO,KAAK,EAAE,IAAA,EAAM,QAAA,EAAU,KAAA,EAAO,eAAe,CAAA;AAAA,IACtD;AAEA,IAAA,OAAO,MAAA;AAAA,EACT,CAAA,EAAG,CAAC,WAAA,EAAa,SAAS,CAAC,CAAA;AAE3B,EAAA,MAAM,cAAA,GAAiB,OAAA;AAAA,IACrB,MAAM,aAAa,GAAA,CAAI,CAAC,SAAS,IAAA,CAAK,KAAK,CAAA,CAAE,IAAA,CAAK,EAAE,CAAA;AAAA,IACpD,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,OAAO,EAAE,gBAAgB,YAAA,EAAa;AACxC;;;;"}

package/build/esm/Autocomplete/i18n/da-DK.json.js

@@ -0,0 +1,6 @@
+var da$3 = {
+	"listbox-suggestions": "Forslag"
+};
+
+export { da$3 as default };
+//# sourceMappingURL=da-DK.json.js.map

package/build/esm/Autocomplete/i18n/da-DK.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"da-DK.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/build/esm/Autocomplete/i18n/de-DE.json.js

@@ -0,0 +1,6 @@
+var de$3 = {
+	"listbox-suggestions": "Vorschläge"
+};
+
+export { de$3 as default };
+//# sourceMappingURL=de-DE.json.js.map

package/build/esm/Autocomplete/i18n/de-DE.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"de-DE.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/build/esm/Autocomplete/i18n/en-US.json.js

@@ -0,0 +1,6 @@
+var en$3 = {
+	"listbox-suggestions": "Suggestions"
+};
+
+export { en$3 as default };
+//# sourceMappingURL=en-US.json.js.map

package/build/esm/Autocomplete/i18n/en-US.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"en-US.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/build/esm/Autocomplete/i18n/fi-FI.json.js

@@ -0,0 +1,6 @@
+var fi$3 = {
+	"listbox-suggestions": "Ehdotukset"
+};
+
+export { fi$3 as default };
+//# sourceMappingURL=fi-FI.json.js.map

package/build/esm/Autocomplete/i18n/fi-FI.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fi-FI.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/build/esm/Autocomplete/i18n/index.js

@@ -1,12 +1,12 @@
-import da from './da-DK.js';
-import en from './en-US.js';
-import de from './de-DE.js';
-import fi from './fi-FI.js';
-import no from './nb-NO.js';
-import pl from './pl-PL.js';
-import se from './sv-SE.js';
+import da from './da-DK.json.js';
+import en from './en-US.json.js';
+import de from './de-DE.json.js';
+import fi from './fi-FI.json.js';
+import no from './nb-NO.json.js';
+import pl from './pl-PL.json.js';
+import se from './sv-SE.json.js';
 
-var intlMessages = {
+var intlMessages$3 = {
   "da-DK": da,
   "en-US": en,
   "de-DE": de,
@@ -16,5 +16,5 @@ var intlMessages = {
   "sv-SE": se
 };
 
-export { intlMessages as default };
+export { intlMessages$3 as default };
 //# sourceMappingURL=index.js.map

package/build/esm/Autocomplete/i18n/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/Autocomplete/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n  'da-DK': da,\n  'en-US': en,\n  'de-DE': de,\n  'fi-FI': fi,\n  'nb-NO': no,\n  'pl-PL': pl,\n  'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,mBAAe;AAAA,EACb,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/Autocomplete/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n  'da-DK': da,\n  'en-US': en,\n  'de-DE': de,\n  'fi-FI': fi,\n  'nb-NO': no,\n  'pl-PL': pl,\n  'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,qBAAe;AAAA,EACb,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;;;;"}

package/build/esm/Autocomplete/i18n/nb-NO.json.js

@@ -0,0 +1,6 @@
+var no$3 = {
+	"listbox-suggestions": "Forslag"
+};
+
+export { no$3 as default };
+//# sourceMappingURL=nb-NO.json.js.map

package/build/esm/Autocomplete/i18n/nb-NO.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nb-NO.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/build/esm/Autocomplete/i18n/pl-PL.json.js

@@ -0,0 +1,6 @@
+var pl$3 = {
+	"listbox-suggestions": "Sugestie"
+};
+
+export { pl$3 as default };
+//# sourceMappingURL=pl-PL.json.js.map

package/build/esm/Autocomplete/i18n/pl-PL.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pl-PL.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/build/esm/Autocomplete/i18n/sv-SE.json.js

@@ -0,0 +1,6 @@
+var se$3 = {
+	"listbox-suggestions": "Förslag"
+};
+
+export { se$3 as default };
+//# sourceMappingURL=sv-SE.json.js.map

package/build/esm/Autocomplete/i18n/sv-SE.json.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-SE.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/build/esm/Autocomplete/src/Autocomplete.js

@@ -1,63 +1,24 @@
 import React, { useRef } from 'react';
 import { useThemeCheck, useSapphireStyleProps, useComboBoxState, ListBoxPopover } from '@danske/sapphire-react';
-import { useComboBox } from '@react-aria/combobox';
+import { useComboBox } from 'react-aria/useComboBox';
 import { useMessageFormatter } from '@react-aria/i18n';
 import intlMessages from '../i18n/index.js';
 import { useFocusableRef } from '@react-spectrum/utils';
-import { filterDOMProps } from '@react-aria/utils';
+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));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 function Autocomplete(props) {
-  var _b;
   useThemeCheck();
   const formatMessage = useMessageFormatter(intlMessages);
-  const _a = props, {
+  const {
     inputValue,
     renderInput,
     loadingState,
     loadingSkeletonRowsCount,
     listboxAriaLabel,
     onSuggestionSelected,
-    onSelectionChange
-  } = _a, otherProps = __objRest(_a, [
-    "inputValue",
-    "renderInput",
-    "loadingState",
-    "loadingSkeletonRowsCount",
-    "listboxAriaLabel",
-    "onSuggestionSelected",
-    "onSelectionChange"
-  ]);
+    onSelectionChange,
+    ...otherProps
+  } = props;
   const {
     styleProps: { style, className }
   } = useSapphireStyleProps(props);
@@ -65,54 +26,74 @@ function Autocomplete(props) {
   const listBoxRef = useFocusableRef(null);
   const popoverRef = useRef(null);
   const triggerRef = useFocusableRef(null);
-  const state = useComboBoxState(__spreadProps(__spreadValues({}, props), {
+  const collectionRef = useRef(null);
+  const state = useComboBoxState({
+    ...props,
     inputValue,
     allowsEmptyCollection: loadingState === "loading",
     allowsCustomValue: true,
     shouldCloseOnBlur: true,
     onSelectionChange: (key) => {
       if (key !== null) {
-        onSelectionChange == null ? void 0 : onSelectionChange(key);
-        onSuggestionSelected == null ? void 0 : onSuggestionSelected(key);
+        onSelectionChange?.(key);
+        onSuggestionSelected?.(key);
+        const itemText = collectionRef.current?.getItem(key)?.textValue ?? "";
+        if (itemText) {
+          props.onInputChange?.(itemText);
+        }
       }
     }
-  }));
-  const { inputProps, listBoxProps } = useComboBox(__spreadProps(__spreadValues({}, props), {
-    "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
-    inputRef,
-    listBoxRef,
-    popoverRef
-  }), state);
-  const inputElement = renderInput(__spreadProps(__spreadValues({}, inputProps), {
+  });
+  collectionRef.current = state.collection;
+  const { inputProps, listBoxProps } = useComboBox(
+    {
+      ...props,
+      "aria-label": listboxAriaLabel || formatMessage("listbox-suggestions"),
+      inputRef,
+      listBoxRef,
+      popoverRef
+    },
+    state
+  );
+  const inputElement = renderInput({
+    ...inputProps,
     isDisabled: props.isDisabled,
     inputRef,
     "aria-haspopup": "listbox",
     "aria-expanded": state.isOpen,
     onChange: (value) => {
-      var _a2;
-      (_a2 = inputProps.onChange) == null ? void 0 : _a2.call(inputProps, {
+      inputProps.onChange?.({
         target: { value },
         currentTarget: { value }
       });
     }
-  }));
-  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({
-    ref: triggerRef
-  }, filterDOMProps(otherProps, { global: true })), {
-    style: __spreadValues({ display: "inline-flex" }, style),
-    className
-  }), inputElement, state.isOpen && /* @__PURE__ */ React.createElement(ListBoxPopover, {
-    state,
-    triggerRef,
-    popoverRef,
-    listBoxRef,
-    listBoxProps,
-    loadingState,
-    loadingSkeletonRowsCount,
-    selectWidth: (_b = triggerRef.current) == null ? void 0 : _b.offsetWidth,
-    disableSelectedStyles: true,
-    isNonModal: true
-  }, props.children || []));
+  });
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: triggerRef,
+      ...filterDOMProps(otherProps, { global: true }),
+      style: { display: "inline-flex", ...style },
+      className
+    },
+    inputElement,
+    state.isOpen && /* @__PURE__ */ React.createElement(
+      ListBoxPopover,
+      {
+        state,
+        triggerRef,
+        popoverRef,
+        listBoxRef,
+        listBoxProps,
+        loadingState,
+        loadingSkeletonRowsCount,
+        selectWidth: triggerRef.current?.offsetWidth,
+        disableSelectedStyles: true,
+        isNonModal: true
+      },
+      props.children || []
+    )
+  );
 }
 
 export { Autocomplete };