@danske/sapphire-react-lab 0.87.4 → 0.87.6

package/build/esm/AlertDialog/src/AlertDialog.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useThemeCheck, Dialog } from '@danske/sapphire-react';
+import { useThemeCheck, Dialog, tokens, DialogTitle, Heading, ButtonGroup } from '@danske/sapphire-react';
 import { FeedbackMessage } from '../../FeedbackMessage/src/FeedbackMessage.js';
 
 var __defProp = Object.defineProperty;
@@ -52,20 +52,22 @@ const AlertDialog = React.forwardRef(function AlertDialog2(props, ref) {
     role: "alertdialog",
     type: "active",
     size: "extra-small",
-    header: /* @__PURE__ */ React.createElement(React.Fragment, null),
+    header: null,
+    footer: null,
     content: /* @__PURE__ */ React.createElement(Dialog.Content, null, /* @__PURE__ */ React.createElement(FeedbackMessage, {
-      heading: /* @__PURE__ */ React.createElement(Dialog.Header, {
-        level: 6,
-        heading
-      }),
+      marginTop: tokens.size.spacing60,
+      heading: /* @__PURE__ */ React.createElement(DialogTitle, null, (titleProps) => /* @__PURE__ */ React.createElement(Heading, __spreadValues({
+        level: 6
+      }, titleProps), heading)),
       variant,
       icon,
-      body
-    })),
-    footer: /* @__PURE__ */ React.createElement(Dialog.Footer, {
-      stretch: "autoVertical",
-      orientation: actionsOrientation
-    }, actions)
+      body,
+      actions: /* @__PURE__ */ React.createElement(ButtonGroup, {
+        width: "100%",
+        stretch: "autoVertical",
+        orientation: actionsOrientation
+      }, actions)
+    }))
   }, rest));
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.js","sources":["../../../../src/AlertDialog/src/AlertDialog.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  Dialog,\n  DialogProps,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport {\n  FeedbackMessage,\n  SapphireFeedbackMessageProps,\n} from '../../FeedbackMessage';\nimport { AriaModalOverlayProps } from '@react-aria/overlays';\nimport { DOMRef } from '@react-types/shared';\n\nexport type SapphireAlertDialogProps = AriaModalOverlayProps &\n  SapphireStyleProps &\n  Pick<DialogProps, 'isOpen' | 'onClose'> &\n  Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {\n    /**\n     *\n     * @default \"horizontal\"\n     */\n    actionsOrientation?: 'vertical' | 'horizontal';\n    /**\n     * The elements that will be rendered in the footer of the dialog.\n     */\n    actions: ReactNode;\n    /**\n     * The title of the dialog.\n     */\n    heading: string;\n  };\n\n/**\n * `AlertDialog` is a wrapper component around `Dialog` and allows you to interrupt the user's\n * experience to prompt them for important confirmations. (e.g. deleting something, confirming\n * an important or irreversible choice etc.).\n * Don't use them for less relevant of unnecessary confirmations.\n *\n * The title should be similar to the action that prompted the user to open it.\n */\nexport const AlertDialog = React.forwardRef(function AlertDialog(\n  props: SapphireAlertDialogProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const {\n    variant = 'neutral',\n    icon,\n    body,\n    actionsOrientation = 'horizontal',\n    actions,\n    heading,\n    ...rest\n  } = props;\n\n  return (\n    <Dialog\n      ref={ref}\n      role=\"alertdialog\"\n      type=\"active\"\n      size=\"extra-small\"\n      header={<></>}\n      content={\n        <Dialog.Content>\n          <FeedbackMessage\n            heading={<Dialog.Header level={6} heading={heading} />}\n            variant={variant}\n            icon={icon}\n            body={body}\n          />\n        </Dialog.Content>\n      }\n      footer={\n        <Dialog.Footer stretch=\"autoVertical\" orientation={actionsOrientation}>\n          {actions}\n        </Dialog.Footer>\n      }\n      {...rest}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCO,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAQI,EAPF,GAAA,KAAA,EAAA;AAAA,IAAU,OAAA,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,IACA,IAAA;AAAA,IACA,kBAAqB,GAAA,YAAA;AAAA,IACrB,OAAA;AAAA,IACA,OAAA;AAAA,GAEE,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IANH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,2CACG,MAAD,EAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,IACA,IAAK,EAAA,aAAA;AAAA,IACL,IAAK,EAAA,QAAA;AAAA,IACL,IAAK,EAAA,aAAA;AAAA,IACL,MAAQ,kBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA;AAAA,IACR,yBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,OAAR,EAAA,IAAA,sCACG,eAAD,EAAA;AAAA,MACE,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,MAAR,EAAA;AAAA,QAAe,KAAO,EAAA,CAAA;AAAA,QAAG,OAAA;AAAA,OAAA,CAAA;AAAA,MAClC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAIN,MAAA,kBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,MAAR,EAAA;AAAA,MAAe,OAAQ,EAAA,cAAA;AAAA,MAAe,WAAa,EAAA,kBAAA;AAAA,KAChD,EAAA,OAAA,CAAA;AAAA,GAGD,EAAA,IAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"AlertDialog.js","sources":["../../../../src/AlertDialog/src/AlertDialog.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n  ButtonGroup,\n  Dialog,\n  DialogProps,\n  Heading,\n  SapphireStyleProps,\n  tokens,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport {\n  FeedbackMessage,\n  SapphireFeedbackMessageProps,\n} from '../../FeedbackMessage';\nimport { AriaModalOverlayProps } from '@react-aria/overlays';\nimport { DOMRef } from '@react-types/shared';\nimport { DialogTitle } from '@danske/sapphire-react';\n\nexport type SapphireAlertDialogProps = AriaModalOverlayProps &\n  SapphireStyleProps &\n  Pick<DialogProps, 'isOpen' | 'onClose'> &\n  Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {\n    /**\n     *\n     * @default \"horizontal\"\n     */\n    actionsOrientation?: 'vertical' | 'horizontal';\n    /**\n     * The elements that will be rendered in the footer of the dialog.\n     */\n    actions: ReactNode;\n    /**\n     * The title of the dialog.\n     */\n    heading: string;\n  };\n\n/**\n * `AlertDialog` is a wrapper component around `Dialog` and allows you to interrupt the user's\n * experience to prompt them for important confirmations. (e.g. deleting something, confirming\n * an important or irreversible choice etc.).\n * Don't use them for less relevant of unnecessary confirmations.\n *\n * The title should be similar to the action that prompted the user to open it.\n */\nexport const AlertDialog = React.forwardRef(function AlertDialog(\n  props: SapphireAlertDialogProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const {\n    variant = 'neutral',\n    icon,\n    body,\n    actionsOrientation = 'horizontal',\n    actions,\n    heading,\n    ...rest\n  } = props;\n\n  return (\n    <Dialog\n      ref={ref}\n      role=\"alertdialog\"\n      type=\"active\"\n      size=\"extra-small\"\n      header={null}\n      footer={null}\n      content={\n        <Dialog.Content>\n          <FeedbackMessage\n            // FIXME: change to `margin` when Dialog is refactored in UC-3020\n            marginTop={tokens.size.spacing60}\n            heading={\n              <DialogTitle>\n                {(titleProps) => (\n                  <Heading level={6} {...titleProps}>\n                    {heading}\n                  </Heading>\n                )}\n              </DialogTitle>\n            }\n            variant={variant}\n            icon={icon}\n            body={body}\n            actions={\n              <ButtonGroup\n                width=\"100%\"\n                stretch=\"autoVertical\"\n                orientation={actionsOrientation}\n              >\n                {actions}\n              </ButtonGroup>\n            }\n          />\n        </Dialog.Content>\n      }\n      {...rest}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CO,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAQI,EAPF,GAAA,KAAA,EAAA;AAAA,IAAU,OAAA,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,IACA,IAAA;AAAA,IACA,kBAAqB,GAAA,YAAA;AAAA,IACrB,OAAA;AAAA,IACA,OAAA;AAAA,GAEE,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IANH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,2CACG,MAAD,EAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,IACA,IAAK,EAAA,aAAA;AAAA,IACL,IAAK,EAAA,QAAA;AAAA,IACL,IAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA,IAAA;AAAA,IACR,MAAQ,EAAA,IAAA;AAAA,IACR,yBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,OAAR,EAAA,IAAA,sCACG,eAAD,EAAA;AAAA,MAEE,SAAA,EAAW,OAAO,IAAK,CAAA,SAAA;AAAA,MACvB,yBACG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,MACG,CAAC,UAAA,yCACC,OAAD,EAAA,cAAA,CAAA;AAAA,QAAS,KAAO,EAAA,CAAA;AAAA,OAAA,EAAO,UACpB,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA,MAKT,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA,sCACG,WAAD,EAAA;AAAA,QACE,KAAM,EAAA,MAAA;AAAA,QACN,OAAQ,EAAA,cAAA;AAAA,QACR,WAAa,EAAA,kBAAA;AAAA,OAEZ,EAAA,OAAA,CAAA;AAAA,KAAA,CAAA,CAAA;AAAA,GAMP,EAAA,IAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

package/build/esm/FeedbackMessage/src/FeedbackMessage.js

@@ -77,7 +77,7 @@ const FeedbackMessage = (_a) => {
   }), /* @__PURE__ */ React.createElement("div", {
     className: styles["sapphire-feedback-message__content"]
   }, typeof heading === "string" ? /* @__PURE__ */ React.createElement(Heading, {
-    level: 3
+    level: 6
   }, heading) : heading, /* @__PURE__ */ React.createElement("section", {
     className: styles["sapphire-feedback-message__body"]
   }, body)), actions);

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackMessage.js","sources":["../../../../src/FeedbackMessage/src/FeedbackMessage.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n  AlertCircle,\n  AlertTriangle,\n  Bell,\n  CheckMarkCircle,\n} from '@danske/sapphire-icons/react';\nimport {\n  Heading,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';\nimport { Avatar } from '../../Avatar';\n\nexport type FeedbackMessageVariant =\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'informative'\n  | 'neutral';\n\nexport interface SapphireFeedbackMessageProps extends SapphireStyleProps {\n  /**\n   * Heading content, rendered in a sapphire Heading component.\n   */\n  heading: React.ReactNode | string;\n  /**\n   * The type of message.\n   * The 'error' and 'success' are meant to attract more attention.\n   *\n   * @default 'neutral'\n   */\n  variant?: FeedbackMessageVariant;\n  /**\n   * Optional icon to override the default icon for the message type.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Optional description, rendered as a section below heading.\n   */\n  body?: React.ReactNode;\n  /**\n   *  Optional actions, rendered at the bottom. Use {@link ButtonGroup}\n   *  for the content.\n   */\n  actions?: React.ReactNode;\n}\n\nconst getColor = (variant: FeedbackMessageVariant) => {\n  switch (variant) {\n    case 'success':\n      return 'positive';\n    case 'error':\n      return 'negative';\n    case 'neutral':\n      return 'passive';\n    default:\n      return variant;\n  }\n};\n\nconst getIcon = (variant: FeedbackMessageVariant, icon?: React.ReactNode) => {\n  if (icon) {\n    return icon;\n  }\n\n  switch (variant) {\n    case 'success':\n      return <CheckMarkCircle />;\n    case 'error':\n      return <AlertCircle />;\n    case 'warning':\n      return <AlertTriangle />;\n    case 'informative':\n      return <Bell />;\n    default:\n      return null;\n  }\n};\n\n/**\n * Implements layout and style of a feedback message.\n */\nexport const FeedbackMessage = ({\n  heading,\n  body,\n  actions,\n  variant = 'neutral',\n  icon,\n  ...otherProps\n}: SapphireFeedbackMessageProps): JSX.Element => {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(otherProps);\n\n  return (\n    <div\n      className={clsx(styles['sapphire-feedback-message'], className)}\n      style={style}\n    >\n      {variant !== 'neutral' && (\n        <Avatar\n          color={getColor(variant)}\n          size=\"extraLarge\"\n          icon={getIcon(variant, icon)}\n        />\n      )}\n      <div className={styles['sapphire-feedback-message__content']}>\n        {typeof heading === 'string' ? (\n          <Heading level={3}>{heading}</Heading>\n        ) : (\n          heading\n        )}\n        <section className={styles['sapphire-feedback-message__body']}>\n          {body}\n        </section>\n      </div>\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,QAAA,GAAW,CAAC,OAAoC,KAAA;AACpD,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAO,OAAA,SAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,OAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAIb,MAAM,OAAA,GAAU,CAAC,OAAA,EAAiC,IAA2B,KAAA;AAC3E,EAAA,IAAI,IAAM,EAAA;AACR,IAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAGT,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAA,2CAAQ,eAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAA,2CAAQ,WAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAA,2CAAQ,aAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,aAAA;AACH,MAAA,2CAAQ,IAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAOA,MAAA,eAAA,GAAkB,CAAC,EAOiB,KAAA;AAPjB,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,GAL8B,GAAA,EAAA,EAM3B,uBAN2B,EAM3B,EAAA;AAAA,IALH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;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,UAAA,CAAA,CAAA;AAE1B,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA,SAAA,CAAA;AAAA,IACrD,KAAA;AAAA,GAEC,EAAA,OAAA,KAAY,SACX,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IACE,OAAO,QAAS,CAAA,OAAA,CAAA;AAAA,IAChB,IAAK,EAAA,YAAA;AAAA,IACL,IAAA,EAAM,QAAQ,OAAS,EAAA,IAAA,CAAA;AAAA,GAAA,CAAA,sCAG1B,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,GAAA,EACpB,OAAO,OAAA,KAAY,QAClB,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA;AAAA,IAAS,KAAO,EAAA,CAAA;AAAA,GAAI,EAAA,OAAA,CAAA,GAEpB,OAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAS,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GAAA,EACxB,IAGJ,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"FeedbackMessage.js","sources":["../../../../src/FeedbackMessage/src/FeedbackMessage.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport {\n  AlertCircle,\n  AlertTriangle,\n  Bell,\n  CheckMarkCircle,\n} from '@danske/sapphire-icons/react';\nimport {\n  Heading,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';\nimport { Avatar } from '../../Avatar';\n\nexport type FeedbackMessageVariant =\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'informative'\n  | 'neutral';\n\nexport interface SapphireFeedbackMessageProps extends SapphireStyleProps {\n  /**\n   * Heading content, rendered in a sapphire Heading component.\n   */\n  heading: React.ReactNode | string;\n  /**\n   * The type of message.\n   * The 'error' and 'success' are meant to attract more attention.\n   *\n   * @default 'neutral'\n   */\n  variant?: FeedbackMessageVariant;\n  /**\n   * Optional icon to override the default icon for the message type.\n   */\n  icon?: React.ReactNode;\n  /**\n   * Optional description, rendered as a section below heading.\n   */\n  body?: React.ReactNode;\n  /**\n   *  Optional actions, rendered at the bottom. Use {@link ButtonGroup}\n   *  for the content.\n   */\n  actions?: React.ReactNode;\n}\n\nconst getColor = (variant: FeedbackMessageVariant) => {\n  switch (variant) {\n    case 'success':\n      return 'positive';\n    case 'error':\n      return 'negative';\n    case 'neutral':\n      return 'passive';\n    default:\n      return variant;\n  }\n};\n\nconst getIcon = (variant: FeedbackMessageVariant, icon?: React.ReactNode) => {\n  if (icon) {\n    return icon;\n  }\n\n  switch (variant) {\n    case 'success':\n      return <CheckMarkCircle />;\n    case 'error':\n      return <AlertCircle />;\n    case 'warning':\n      return <AlertTriangle />;\n    case 'informative':\n      return <Bell />;\n    default:\n      return null;\n  }\n};\n\n/**\n * Implements layout and style of a feedback message.\n */\nexport const FeedbackMessage = ({\n  heading,\n  body,\n  actions,\n  variant = 'neutral',\n  icon,\n  ...otherProps\n}: SapphireFeedbackMessageProps): JSX.Element => {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(otherProps);\n\n  return (\n    <div\n      className={clsx(styles['sapphire-feedback-message'], className)}\n      style={style}\n    >\n      {variant !== 'neutral' && (\n        <Avatar\n          color={getColor(variant)}\n          size=\"extraLarge\"\n          icon={getIcon(variant, icon)}\n        />\n      )}\n      <div className={styles['sapphire-feedback-message__content']}>\n        {typeof heading === 'string' ? (\n          <Heading level={6}>{heading}</Heading>\n        ) : (\n          heading\n        )}\n        <section className={styles['sapphire-feedback-message__body']}>\n          {body}\n        </section>\n      </div>\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAM,QAAA,GAAW,CAAC,OAAoC,KAAA;AACpD,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAO,OAAA,UAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAO,OAAA,SAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,OAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAIb,MAAM,OAAA,GAAU,CAAC,OAAA,EAAiC,IAA2B,KAAA;AAC3E,EAAA,IAAI,IAAM,EAAA;AACR,IAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAGT,EAAQ,QAAA,OAAA;AAAA,IACD,KAAA,SAAA;AACH,MAAA,2CAAQ,eAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,OAAA;AACH,MAAA,2CAAQ,WAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,SAAA;AACH,MAAA,2CAAQ,aAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACJ,KAAA,aAAA;AACH,MAAA,2CAAQ,IAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,IAAA,CAAA;AAAA,GAAA;AAAA,CAAA,CAAA;AAOA,MAAA,eAAA,GAAkB,CAAC,EAOiB,KAAA;AAPjB,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,GAL8B,GAAA,EAAA,EAM3B,uBAN2B,EAM3B,EAAA;AAAA,IALH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;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,UAAA,CAAA,CAAA;AAE1B,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA,SAAA,CAAA;AAAA,IACrD,KAAA;AAAA,GAEC,EAAA,OAAA,KAAY,SACX,oBAAA,KAAA,CAAA,aAAA,CAAC,MAAD,EAAA;AAAA,IACE,OAAO,QAAS,CAAA,OAAA,CAAA;AAAA,IAChB,IAAK,EAAA,YAAA;AAAA,IACL,IAAA,EAAM,QAAQ,OAAS,EAAA,IAAA,CAAA;AAAA,GAAA,CAAA,sCAG1B,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,GAAA,EACpB,OAAO,OAAA,KAAY,QAClB,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA;AAAA,IAAS,KAAO,EAAA,CAAA;AAAA,GAAI,EAAA,OAAA,CAAA,GAEpB,OAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAS,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GAAA,EACxB,IAGJ,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/FileDropzone/src/FileTrigger.js

@@ -34,7 +34,13 @@ var __objRest = (source, exclude) => {
   return target;
 };
 const HiddenFileInput = React.forwardRef(function InputWrapper(props, ref) {
+  const { onChange } = props;
+  const onFileInputChange = (inputElement) => {
+    onChange == null ? void 0 : onChange(inputElement);
+    inputElement.target.value = "";
+  };
   return /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, props), {
+    onChange: onFileInputChange,
     ref,
     type: "file",
     style: { display: "none" }

package/build/esm/FileDropzone/src/FileTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileTrigger.js","sources":["../../../../src/FileDropzone/src/FileTrigger.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport { filterDOMProps, useObjectRef } from '@react-aria/utils';\nimport { PressResponder } from '@react-aria/interactions';\n\nexport interface FileSelectProps {\n  /**\n   * List of file types that are allowed to be selected using the file select.\n   * When no list is passed, all file types will be allowed to be selected.\n   * @default \"\"\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * Whether multiple files are allowed to be selected using the file select.\n   * @default \"false\"\n   */\n  allowsMultiple?: boolean;\n}\n\nexport interface FileTriggerProps extends FileSelectProps {\n  /**\n   * Callback for file selection.\n   * @param files - the list of selected files\n   * @default \"() => null\"\n   */\n  onSelect?: (files: FileList | null) => void;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n}\n\nconst HiddenFileInput = React.forwardRef(function InputWrapper(\n  props: React.HTMLProps<HTMLInputElement>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  return <input {...props} ref={ref} type=\"file\" style={{ display: 'none' }} />;\n});\n\nexport const FileTrigger = React.forwardRef(function FileTriggerWrapper(\n  props: FileTriggerProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const {\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onSelect = () => null,\n    children,\n    isDisabled = false,\n    ...rest\n  } = props;\n  const inputRef = useObjectRef(ref);\n  const domProps = filterDOMProps(rest);\n\n  return (\n    <>\n      <PressResponder\n        onPress={() => {\n          inputRef.current?.click();\n        }}\n      >\n        {children}\n      </PressResponder>\n      <HiddenFileInput\n        {...domProps}\n        disabled={isDisabled}\n        ref={inputRef}\n        accept={acceptedFileTypes?.toString()}\n        onChange={(e) => onSelect?.((e.target as HTMLInputElement).files)}\n        multiple={allowsMultiple}\n      />\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,eAAkB,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CACvC,OACA,GACA,EAAA;AACA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,GAAA;AAAA,IAAU,IAAK,EAAA,MAAA;AAAA,IAAO,KAAA,EAAO,EAAE,OAAS,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA;AAG5D,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,kBAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,iBAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,WAAW,MAAM,IAAA;AAAA,IACjB,QAAA;AAAA,IACA,UAAa,GAAA,KAAA;AAAA,GAEX,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IALH,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,WAAW,YAAa,CAAA,GAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,WAAW,cAAe,CAAA,IAAA,CAAA,CAAA;AAEhC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,cAAD,EAAA;AAAA,IACE,SAAS,MAAM;AAtDvB,MAAA,IAAA,GAAA,CAAA;AAuDU,MAAA,CAAA,GAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAGnB,QAEH,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,eAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,QADN,CAAA,EAAA;AAAA,IAEE,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,QAAA;AAAA,IACL,QAAQ,iBAAmB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,QAAA,EAAA;AAAA,IAC3B,QAAU,EAAA,CAAC,CAAM,KAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAY,EAAE,MAA4B,CAAA,KAAA,CAAA;AAAA,IAC3D,QAAU,EAAA,cAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
+{"version":3,"file":"FileTrigger.js","sources":["../../../../src/FileDropzone/src/FileTrigger.tsx"],"sourcesContent":["import React, { ChangeEvent, ForwardedRef } from 'react';\nimport { filterDOMProps, useObjectRef } from '@react-aria/utils';\nimport { PressResponder } from '@react-aria/interactions';\n\nexport interface FileSelectProps {\n  /**\n   * List of file types that are allowed to be selected using the file select.\n   * When no list is passed, all file types will be allowed to be selected.\n   * @default \"\"\n   */\n  acceptedFileTypes?: string[];\n  /**\n   * Whether multiple files are allowed to be selected using the file select.\n   * @default \"false\"\n   */\n  allowsMultiple?: boolean;\n}\n\nexport interface FileTriggerProps extends FileSelectProps {\n  /**\n   * Callback for file selection.\n   * @param files - the list of selected files\n   * @default \"() => null\"\n   */\n  onSelect?: (files: FileList | null) => void;\n  isDisabled?: boolean;\n  children?: React.ReactNode;\n}\n\nconst HiddenFileInput = React.forwardRef(function InputWrapper(\n  props: React.HTMLProps<HTMLInputElement>,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const { onChange } = props;\n\n  /**\n   * This is a \"hacky\" fix for the native input, because it does not trigger a change if the same content is selected in the file picker.\n   */\n  const onFileInputChange = (inputElement: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(inputElement);\n    inputElement.target.value = '';\n  };\n\n  return (\n    <input\n      {...props}\n      onChange={onFileInputChange}\n      ref={ref}\n      type=\"file\"\n      style={{ display: 'none' }}\n    />\n  );\n});\n\nexport const FileTrigger = React.forwardRef(function FileTriggerWrapper(\n  props: FileTriggerProps,\n  ref: ForwardedRef<HTMLInputElement>\n) {\n  const {\n    acceptedFileTypes,\n    allowsMultiple = false,\n    onSelect = () => null,\n    children,\n    isDisabled = false,\n    ...rest\n  } = props;\n  const inputRef = useObjectRef(ref);\n  const domProps = filterDOMProps(rest);\n\n  return (\n    <>\n      <PressResponder\n        onPress={() => {\n          inputRef.current?.click();\n        }}\n      >\n        {children}\n      </PressResponder>\n      <HiddenFileInput\n        {...domProps}\n        disabled={isDisabled}\n        ref={inputRef}\n        accept={acceptedFileTypes?.toString()}\n        onChange={(e) => onSelect?.((e.target as HTMLInputElement).files)}\n        multiple={allowsMultiple}\n      />\n    </>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,eAAkB,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CACvC,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAa,EAAA,GAAA,KAAA,CAAA;AAKrB,EAAM,MAAA,iBAAA,GAAoB,CAAC,YAAgD,KAAA;AACzE,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,YAAA,CAAA,CAAA;AACX,IAAA,YAAA,CAAa,OAAO,KAAQ,GAAA,EAAA,CAAA;AAAA,GAAA,CAAA;AAG9B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,KADN,CAAA,EAAA;AAAA,IAEE,QAAU,EAAA,iBAAA;AAAA,IACV,GAAA;AAAA,IACA,IAAK,EAAA,MAAA;AAAA,IACL,KAAA,EAAO,EAAE,OAAS,EAAA,MAAA,EAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA,CAAA;AAKjB,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,kBAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,MAOI,EANF,GAAA,KAAA,EAAA;AAAA,IAAA,iBAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,WAAW,MAAM,IAAA;AAAA,IACjB,QAAA;AAAA,IACA,UAAa,GAAA,KAAA;AAAA,GAEX,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IALH,mBAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,MAAM,WAAW,YAAa,CAAA,GAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,WAAW,cAAe,CAAA,IAAA,CAAA,CAAA;AAEhC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,sCACG,cAAD,EAAA;AAAA,IACE,SAAS,MAAM;AAxEvB,MAAA,IAAA,GAAA,CAAA;AAyEU,MAAA,CAAA,GAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,GAAA,CAAA,KAAA,EAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAGnB,QAEH,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,eAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,QADN,CAAA,EAAA;AAAA,IAEE,QAAU,EAAA,UAAA;AAAA,IACV,GAAK,EAAA,QAAA;AAAA,IACL,QAAQ,iBAAmB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,QAAA,EAAA;AAAA,IAC3B,QAAU,EAAA,CAAC,CAAM,KAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAY,EAAE,MAA4B,CAAA,KAAA,CAAA;AAAA,IAC3D,QAAU,EAAA,cAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.87.4",
+  "version": "0.87.6",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,18 +25,18 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.39.2",
+    "@danske/sapphire-react": "^3.42.1",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.39.2",
+    "@danske/sapphire-react": "^3.42.1",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^31.2.2",
+    "@danske/sapphire-css": "^32.0.0",
     "@internationalized/date": "^3.5.5",
     "@internationalized/string": "^3.2.3",
     "@react-aria/accordion": "^3.0.0-alpha.31",
@@ -74,5 +74,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "e25b4232146128fc907e0602d8a9d4a6fbe5f402"
+  "gitHead": "bb1beabd5c10b8c2bfc4cfc769cdc27c93df9712"
 }