@helsenorge/designsystem-react 9.4.0 → 9.4.3

package/components/Badge/index.js

@@ -1,5 +1,5 @@
-import { B as e } from "../../Badge.js";
+import { B as Badge } from "../../Badge.js";
 export {
-  e as default
+  Badge as default
 };
 //# sourceMappingURL=index.js.map

package/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import React, { AriaAttributes } from 'react';
+import { default as React, AriaAttributes } from 'react';
 import { HTMLButtonProps, HTMLAnchorProps } from '../../constants';
 export type ButtonConcept = 'normal' | 'destructive';
 export type ButtonVariant = 'fill' | 'outline' | 'borderless';

package/components/Button/index.d.ts

@@ -1,3 +1,3 @@
-import Button from './Button';
+import { default as Button } from './Button';
 export * from './Button';
 export default Button;

package/components/Button/index.js

@@ -1,5 +1,5 @@
-import { B as o } from "../../Button.js";
+import { B as Button } from "../../Button.js";
 export {
-  o as default
+  Button as default
 };
 //# sourceMappingURL=index.js.map

package/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { FormOnColor, FormSize } from '../../constants';
 import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
 export interface CheckboxProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'> {

package/components/Checkbox/index.d.ts

@@ -1,3 +1,3 @@
-import Checkbox from './Checkbox';
+import { default as Checkbox } from './Checkbox';
 export * from './Checkbox';
 export default Checkbox;

package/components/Checkbox/index.js

@@ -1,6 +1,6 @@
-import { C as a } from "../../Checkbox.js";
+import { C as Checkbox } from "../../Checkbox.js";
 export {
-  a as Checkbox,
-  a as default
+  Checkbox,
+  Checkbox as default
 };
 //# sourceMappingURL=index.js.map

package/components/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { PaletteNames } from '../../theme/palette';
 export declare enum ChipSize {
     medium = "medium",

package/components/Chip/index.d.ts

@@ -1,3 +1,3 @@
-import Chip from './Chip';
+import { default as Chip } from './Chip';
 export * from './Chip';
 export default Chip;

package/components/Chip/index.js

@@ -1,33 +1,51 @@
-import { jsxs as p, jsx as f } from "react/jsx-runtime";
-import v from "classnames";
-import { AnalyticsId as h, IconSize as I } from "../../constants.js";
-import { useHover as g } from "../../hooks/useHover.js";
-import { palette as y } from "../../theme/palette.js";
-import { I as b } from "../../Icon.js";
-import $ from "../Icons/Undo.js";
-import x from "../Icons/X.js";
-import r from "./styles.module.scss";
-var X = /* @__PURE__ */ ((o) => (o.medium = "medium", o.large = "large", o))(X || {}), j = /* @__PURE__ */ ((o) => (o.remove = "remove", o.undo = "undo", o))(j || {}), z = /* @__PURE__ */ ((o) => (o.normal = "normal", o.oncolor = "oncolor", o.emphasised = "emphasised", o))(z || {});
-const q = (o) => {
-  const { children: s, size: m = "medium", color: e = "blueberry", variant: n = "normal", action: t, onClick: c, testId: a } = o, { hoverRef: i, isHovered: l } = g(), d = v(r.chip, r[`chip--${m}`], r[`chip--${e}`], r[`chip--${n}`], {
-    [r["chip--undo"]]: t === "undo"
-  }), u = () => {
-    switch (t) {
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { AnalyticsId, IconSize } from "../../constants.js";
+import { useHover } from "../../hooks/useHover.js";
+import { palette } from "../../theme/palette.js";
+import { I as Icon } from "../../Icon.js";
+import Undo from "../Icons/Undo.js";
+import X from "../Icons/X.js";
+import styles from "./styles.module.scss";
+var ChipSize = /* @__PURE__ */ ((ChipSize2) => {
+  ChipSize2["medium"] = "medium";
+  ChipSize2["large"] = "large";
+  return ChipSize2;
+})(ChipSize || {});
+var ChipAction = /* @__PURE__ */ ((ChipAction2) => {
+  ChipAction2["remove"] = "remove";
+  ChipAction2["undo"] = "undo";
+  return ChipAction2;
+})(ChipAction || {});
+var ChipVariant = /* @__PURE__ */ ((ChipVariant2) => {
+  ChipVariant2["normal"] = "normal";
+  ChipVariant2["oncolor"] = "oncolor";
+  ChipVariant2["emphasised"] = "emphasised";
+  return ChipVariant2;
+})(ChipVariant || {});
+const Chip = (props) => {
+  const { children, size = "medium", color = "blueberry", variant = "normal", action, onClick, testId } = props;
+  const { hoverRef, isHovered } = useHover();
+  const chipClasses = classNames(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {
+    [styles[`chip--undo`]]: action === "undo"
+  });
+  const getActionIcon = () => {
+    switch (action) {
       case "undo":
-        return $;
+        return Undo;
       case "remove":
-        return x;
+        return X;
     }
   };
-  return /* @__PURE__ */ p("button", { className: d, onClick: c, ref: i, type: "button", "data-testid": a, "data-analyticsid": h.Tag, children: [
-    s,
-    /* @__PURE__ */ f(b, { svgIcon: u(), size: I.XXSmall, color: y[`${e}800`], isHovered: l })
+  return /* @__PURE__ */ jsxs("button", { className: chipClasses, onClick, ref: hoverRef, type: "button", "data-testid": testId, "data-analyticsid": AnalyticsId.Tag, children: [
+    children,
+    /* @__PURE__ */ jsx(Icon, { svgIcon: getActionIcon(), size: IconSize.XXSmall, color: palette[`${color}800`], isHovered })
   ] });
 };
 export {
-  j as ChipAction,
-  X as ChipSize,
-  z as ChipVariant,
-  q as default
+  ChipAction,
+  ChipSize,
+  ChipVariant,
+  Chip as default
 };
 //# sourceMappingURL=index.js.map

package/components/Chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n"],"names":["ChipSize","ChipAction","ChipVariant","Chip","props","children","size","color","variant","action","onClick","testId","hoverRef","isHovered","useHover","chipClasses","cn","styles","getActionIcon","Undo","X","jsxs","AnalyticsId","jsx","Icon","IconSize","palette"],"mappings":";;;;;;;;;AAaY,IAAAA,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,QAAQ,SAFEA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA,GAKAC,sBAAAA,OACVA,EAAA,SAAS,UACTA,EAAA,UAAU,WACVA,EAAA,aAAa,cAHHA,IAAAA,KAAA,CAAA,CAAA;AAyBZ,MAAMC,IAA4B,CAASC,MAAA;AACnC,QAAA,EAAE,UAAAC,GAAU,MAAAC,IAAO,UAAiB,OAAAC,IAAQ,aAAa,SAAAC,IAAU,UAAU,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWP,GAEzG,EAAE,UAAAQ,GAAU,WAAAC,EAAU,IAAIC,EAA4B,GAEtDC,IAAcC,EAAGC,EAAO,MAAMA,EAAO,SAASX,CAAI,EAAE,GAAGW,EAAO,SAASV,CAAK,EAAE,GAAGU,EAAO,SAAST,CAAO,EAAE,GAAG;AAAA,IACjH,CAACS,EAAO,YAAY,CAAC,GAAGR,MAAW;AAAA,EAAA,CACpC,GAEKS,IAAgB,MAAe;AACnC,YAAQT,GAAQ;AAAA,MACd,KAAK;AACI,eAAAU;AAAA,MACT,KAAK;AACI,eAAAC;AAAA,IACX;AAAA,EAAA;AAGF,SACG,gBAAAC,EAAA,UAAA,EAAO,WAAWN,GAAa,SAAAL,GAAkB,KAAKE,GAAU,MAAK,UAAS,eAAaD,GAAQ,oBAAkBW,EAAY,KAC/H,UAAA;AAAA,IAAAjB;AAAA,IACA,gBAAAkB,EAAAC,GAAA,EAAK,SAASN,KAAiB,MAAMO,EAAS,SAAS,OAAOC,EAAQ,GAAGnB,CAAK,KAAK,GAAG,WAAAM,GAAsB;AAAA,EAC/G,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useHover } from '../../hooks/useHover';\nimport { palette, PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport Undo from '../Icons/Undo';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport enum ChipSize {\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ChipAction {\n  remove = 'remove',\n  undo = 'undo',\n}\n\nexport enum ChipVariant {\n  normal = 'normal',\n  oncolor = 'oncolor',\n  emphasised = 'emphasised',\n}\n\nexport type ChipColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'cherry' | 'banana' | 'kiwi' | 'plum'>;\n\nexport interface ChipProps {\n  /** Sets the text of the chip */\n  children: string;\n  /** Sets the size of the chip. Default: medium */\n  size?: keyof typeof ChipSize;\n  /** Sets the background of the chip. Not used if action is \"undo\". Default: blueberry */\n  color?: ChipColors;\n  /* Changes the appearance of the chip. Not used if action is \"undo\". Default: normal */\n  variant?: keyof typeof ChipVariant;\n  /* Makes the chip a clickable button that performs an action. onClick must also be set. */\n  action: keyof typeof ChipAction;\n  /* Called when action is set and the chip is clicked on. action must also be set. */\n  onClick: () => void;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Chip: React.FC<ChipProps> = props => {\n  const { children, size = ChipSize.medium, color = 'blueberry', variant = 'normal', action, onClick, testId } = props;\n\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n\n  const chipClasses = cn(styles.chip, styles[`chip--${size}`], styles[`chip--${color}`], styles[`chip--${variant}`], {\n    [styles[`chip--undo`]]: action === 'undo',\n  });\n\n  const getActionIcon = (): SvgIcon => {\n    switch (action) {\n      case 'undo':\n        return Undo;\n      case 'remove':\n        return X;\n    }\n  };\n\n  return (\n    <button className={chipClasses} onClick={onClick} ref={hoverRef} type=\"button\" data-testid={testId} data-analyticsid={AnalyticsId.Tag}>\n      {children}\n      <Icon svgIcon={getActionIcon()} size={IconSize.XXSmall} color={palette[`${color}800`]} isHovered={isHovered} />\n    </button>\n  );\n};\n\nexport default Chip;\n"],"names":["ChipSize","ChipAction","ChipVariant","cn"],"mappings":";;;;;;;;;AAaY,IAAA,6BAAAA,cAAL;AACLA,YAAA,QAAS,IAAA;AACTA,YAAA,OAAQ,IAAA;AAFEA,SAAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAKA,IAAA,+BAAAC,gBAAL;AACLA,cAAA,QAAS,IAAA;AACTA,cAAA,MAAO,IAAA;AAFGA,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKA,IAAA,gCAAAC,iBAAL;AACLA,eAAA,QAAS,IAAA;AACTA,eAAA,SAAU,IAAA;AACVA,eAAA,YAAa,IAAA;AAHHA,SAAAA;AAAA,GAAA,eAAA,CAAA,CAAA;AAyBZ,MAAM,OAA4B,CAAS,UAAA;AACnC,QAAA,EAAE,UAAU,OAAO,UAAiB,QAAQ,aAAa,UAAU,UAAU,QAAQ,SAAS,OAAW,IAAA;AAE/G,QAAM,EAAE,UAAU,UAAU,IAAI,SAA4B;AAE5D,QAAM,cAAcC,WAAG,OAAO,MAAM,OAAO,SAAS,IAAI,EAAE,GAAG,OAAO,SAAS,KAAK,EAAE,GAAG,OAAO,SAAS,OAAO,EAAE,GAAG;AAAA,IACjH,CAAC,OAAO,YAAY,CAAC,GAAG,WAAW;AAAA,EAAA,CACpC;AAED,QAAM,gBAAgB,MAAe;AACnC,YAAQ,QAAQ;AAAA,MACd,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IAAA;AAAA,EAEb;AAEA,SACG,qBAAA,UAAA,EAAO,WAAW,aAAa,SAAkB,KAAK,UAAU,MAAK,UAAS,eAAa,QAAQ,oBAAkB,YAAY,KAC/H,UAAA;AAAA,IAAA;AAAA,IACA,oBAAA,MAAA,EAAK,SAAS,iBAAiB,MAAM,SAAS,SAAS,OAAO,QAAQ,GAAG,KAAK,KAAK,GAAG,UAAsB,CAAA;AAAA,EAAA,GAC/G;AAEJ;"}

package/components/Close/Close.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface CloseProps {
     /** Keeps the icon small for all screen sizes */
     small?: boolean;

package/components/Close/index.d.ts

@@ -1,3 +1,3 @@
-import Close from './Close';
+import { default as Close } from './Close';
 export * from './Close';
 export default Close;

package/components/Close/index.js

@@ -1,5 +1,5 @@
-import { C as a } from "../../Close.js";
+import { C as Close } from "../../Close.js";
 export {
-  a as default
+  Close as default
 };
 //# sourceMappingURL=index.js.map

package/components/DictionaryTrigger/DictionaryTrigger.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {
     /**
      * Sets the content of the trigger.

package/components/DictionaryTrigger/index.d.ts

@@ -1,3 +1,3 @@
-import DictionaryTrigger from './DictionaryTrigger';
+import { default as DictionaryTrigger } from './DictionaryTrigger';
 export * from './DictionaryTrigger';
 export default DictionaryTrigger;

package/components/DictionaryTrigger/index.js

@@ -1,28 +1,28 @@
-import { jsx as m } from "react/jsx-runtime";
-import n from "react";
-import c from "classnames";
-import { AnalyticsId as d } from "../../constants.js";
-import g from "./styles.module.scss";
-const f = n.forwardRef(
-  ({ children: r, selected: t = !1, className: a, testId: i, ...e }, o) => {
-    const s = c(g.dictionarytrigger, a);
-    return /* @__PURE__ */ m(
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import classNames from "classnames";
+import { AnalyticsId } from "../../constants.js";
+import styles from "./styles.module.scss";
+const DictionaryTrigger = React.forwardRef(
+  ({ children, selected = false, className, testId, ...rest }, ref) => {
+    const triggerClasses = classNames(styles.dictionarytrigger, className);
+    return /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        "data-testid": i,
-        "data-analyticsid": d.DictionaryTrigger,
-        className: s,
-        "aria-expanded": t,
-        ref: o,
-        ...e,
-        children: r
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.DictionaryTrigger,
+        className: triggerClasses,
+        "aria-expanded": selected,
+        ref,
+        ...rest,
+        children
       }
     );
   }
 );
-f.displayName = "DictionaryTrigger";
+DictionaryTrigger.displayName = "DictionaryTrigger";
 export {
-  f as default
+  DictionaryTrigger as default
 };
 //# sourceMappingURL=index.js.map

package/components/DictionaryTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/DictionaryTrigger/DictionaryTrigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n"],"names":["DictionaryTrigger","React","children","selected","className","testId","rest","ref","triggerClasses","classNames","styles","jsx","AnalyticsId"],"mappings":";;;;;AA2BA,MAAMA,IAAoBC,EAAM;AAAA,EAC9B,CAAC,EAAE,UAAAC,GAAU,UAAAC,IAAW,IAAO,WAAAC,GAAW,QAAAC,GAAQ,GAAGC,EAAK,GAAGC,MAAQ;AACnE,UAAMC,IAAiBC,EAAWC,EAAO,mBAAmBN,CAAS;AAGnE,WAAA,gBAAAO;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAaN;AAAA,QACb,oBAAkBO,EAAY;AAAA,QAC9B,WAAWJ;AAAA,QACX,iBAAeL;AAAA,QACf,KAAAI;AAAA,QACC,GAAGD;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAF,EAAkB,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/DictionaryTrigger/DictionaryTrigger.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n}\n\nconst DictionaryTrigger = React.forwardRef<HTMLButtonElement, DictionaryTriggerProps>(\n  ({ children, selected = false, className, testId, ...rest }, ref) => {\n    const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n    return (\n      <button\n        type=\"button\"\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.DictionaryTrigger}\n        className={triggerClasses}\n        aria-expanded={selected}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n"],"names":[],"mappings":";;;;;AA2BA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,GAAG,KAAK,GAAG,QAAQ;AACnE,UAAM,iBAAiB,WAAW,OAAO,mBAAmB,SAAS;AAGnE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,eAAa;AAAA,QACb,oBAAkB,YAAY;AAAA,QAC9B,WAAW;AAAA,QACX,iBAAe;AAAA,QACf;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;AAEA,kBAAkB,cAAc;"}

package/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export declare enum DropdownOnColor {
     onwhite = "onwhite",
     ongrey = "ongrey",

package/components/Dropdown/Dropdown.test.d.ts

@@ -1 +0,0 @@
-import '../../__mocks__/uuid';

package/components/Dropdown/index.d.ts

@@ -1,3 +1,3 @@
-import Dropdown from './Dropdown';
+import { default as Dropdown } from './Dropdown';
 export * from './Dropdown';
 export default Dropdown;

package/components/Dropdown/index.js

@@ -1,127 +1,164 @@
-import { jsx as d, jsxs as g } from "react/jsx-runtime";
-import c, { useRef as _, useState as Z } from "react";
-import C from "classnames";
-import { theme as A } from "../../theme/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef, useState } from "react";
+import classNames from "classnames";
+import { theme } from "../../theme/index.js";
 import "../../hooks/useBreakpoint.js";
-import { useHover as q } from "../../hooks/useHover.js";
-import { useToggle as F } from "../../hooks/useToggle.js";
-import { useKeyboardEvent as G } from "../../hooks/useKeyboardEvent.js";
-import { useOutsideEvent as J } from "../../hooks/useOutsideEvent.js";
-import { useUuid as y } from "../../hooks/useUuid.js";
-import { ZIndex as M, KeyboardEventKey as n, AnalyticsId as Q, IconSize as W } from "../../constants.js";
-import { mergeRefs as Y } from "../../utils/refs.js";
-import { B as ee } from "../../Button.js";
-import { I as oe } from "../../Icon.js";
-import re from "../Icons/PlusSmall.js";
-import o from "./styles.module.scss";
-var ne = /* @__PURE__ */ ((a) => (a.onwhite = "onwhite", a.ongrey = "ongrey", a.onblueberry = "onblueberry", a.oncherry = "oncherry", a))(ne || {});
-const Ie = (a) => {
+import { useHover } from "../../hooks/useHover.js";
+import { useToggle } from "../../hooks/useToggle.js";
+import { useKeyboardEvent } from "../../hooks/useKeyboardEvent.js";
+import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { ZIndex, KeyboardEventKey, AnalyticsId, IconSize } from "../../constants.js";
+import { mergeRefs } from "../../utils/refs.js";
+import { B as Button } from "../../Button.js";
+import { I as Icon } from "../../Icon.js";
+import PlusSmall from "../Icons/PlusSmall.js";
+import styles from "./styles.module.scss";
+var DropdownOnColor = /* @__PURE__ */ ((DropdownOnColor2) => {
+  DropdownOnColor2["onwhite"] = "onwhite";
+  DropdownOnColor2["ongrey"] = "ongrey";
+  DropdownOnColor2["onblueberry"] = "onblueberry";
+  DropdownOnColor2["oncherry"] = "oncherry";
+  return DropdownOnColor2;
+})(DropdownOnColor || {});
+const Dropdown = (props) => {
   const {
-    label: H,
-    placeholder: K,
-    closeText: S = "Lukk",
-    noCloseButton: $ = !1,
-    onToggle: z,
-    open: B = !1,
-    children: b,
-    onColor: p = "onwhite",
-    transparent: L = !1,
-    fluid: h = !1,
-    testId: P,
-    disabled: i,
-    zIndex: T = M.PopOver
-  } = a, u = _(null), w = _(null), { hoverRef: I, isHovered: U } = q(), { value: t, toggleValue: x } = F(!i && B, z), l = _(c.Children.map(b, () => c.createRef())), [f, j] = Z(), v = y(), N = y(), E = y(), k = () => {
-    var e;
-    x(), (e = w.current) == null || e.focus();
-  }, m = () => {
-    var e;
-    x(), (e = I.current) == null || e.focus();
+    label,
+    placeholder,
+    closeText = "Lukk",
+    noCloseButton = false,
+    onToggle,
+    open = false,
+    children,
+    onColor = "onwhite",
+    transparent = false,
+    fluid = false,
+    testId,
+    disabled,
+    zIndex = ZIndex.PopOver
+  } = props;
+  const dropdownRef = useRef(null);
+  const optionsRef = useRef(null);
+  const { hoverRef: buttonRef, isHovered } = useHover();
+  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);
+  const inputRefList = useRef(React.Children.map(children, () => React.createRef()));
+  const [currentIndex, setCurrentIndex] = useState();
+  const labelId = useUuid();
+  const toggleLabelId = useUuid();
+  const optionIdPrefix = useUuid();
+  const handleOpen = () => {
+    var _a;
+    toggleIsOpen();
+    (_a = optionsRef.current) == null ? void 0 : _a.focus();
   };
-  G(u, (e) => {
-    var R;
-    if (e.preventDefault(), !l.current)
+  const handleClose = () => {
+    var _a;
+    toggleIsOpen();
+    (_a = buttonRef.current) == null ? void 0 : _a.focus();
+  };
+  const handleKeyboardNavigation = (event) => {
+    var _a;
+    event.preventDefault();
+    if (!inputRefList.current) {
       return;
-    if (t) {
-      if (e.key === n.Escape && t) {
-        m();
-        return;
-      }
-    } else {
-      k();
+    }
+    if (!isOpen) {
+      handleOpen();
+      return;
+    } else if (event.key === KeyboardEventKey.Escape && isOpen) {
+      handleClose();
       return;
     }
-    const r = l.current.findIndex((X) => X.current === e.target);
-    let s = r;
-    e.key === n.Home ? s = 0 : e.key === n.End ? s = l.current.length - 1 : e.key === n.ArrowDown && r < l.current.length - 1 ? s = r + 1 : e.key === n.ArrowUp && r > 0 ? s = r - 1 : e.key === n.Enter && r !== -1 && (s = r), s !== -1 && ((R = l.current[s].current) == null || R.focus(), j(s));
-  }, [
-    n.ArrowDown,
-    n.ArrowUp,
-    n.End,
-    n.Enter,
-    n.Escape,
-    n.Home
-  ]), J(u, () => t && m());
-  const D = C(
-    o.dropdown__toggle,
-    !i && {
-      [o["dropdown__toggle--on-white"]]: p === "onwhite",
-      [o["dropdown__toggle--on-grey"]]: p === "ongrey",
-      [o["dropdown__toggle--on-blueberry"]]: p === "onblueberry",
-      [o["dropdown__toggle--on-cherry"]]: p === "oncherry",
-      [o["dropdown__toggle--transparent"]]: L,
-      [o["dropdown__toggle--fluid"]]: h,
-      [o["dropdown__toggle--open"]]: t
+    const index = inputRefList.current.findIndex((x) => x.current === event.target);
+    let nextIndex = index;
+    if (event.key === KeyboardEventKey.Home) {
+      nextIndex = 0;
+    } else if (event.key === KeyboardEventKey.End) {
+      nextIndex = inputRefList.current.length - 1;
+    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {
+      nextIndex = index + 1;
+    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {
+      nextIndex = index - 1;
+    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {
+      nextIndex = index;
+    }
+    if (nextIndex !== -1) {
+      (_a = inputRefList.current[nextIndex].current) == null ? void 0 : _a.focus();
+      setCurrentIndex(nextIndex);
+    }
+  };
+  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [
+    KeyboardEventKey.ArrowDown,
+    KeyboardEventKey.ArrowUp,
+    KeyboardEventKey.End,
+    KeyboardEventKey.Enter,
+    KeyboardEventKey.Escape,
+    KeyboardEventKey.Home
+  ]);
+  useOutsideEvent(dropdownRef, () => isOpen && handleClose());
+  const toggleClasses = classNames(
+    styles.dropdown__toggle,
+    !disabled && {
+      [styles["dropdown__toggle--on-white"]]: onColor === "onwhite",
+      [styles["dropdown__toggle--on-grey"]]: onColor === "ongrey",
+      [styles["dropdown__toggle--on-blueberry"]]: onColor === "onblueberry",
+      [styles["dropdown__toggle--on-cherry"]]: onColor === "oncherry",
+      [styles["dropdown__toggle--transparent"]]: transparent,
+      [styles["dropdown__toggle--fluid"]]: fluid,
+      [styles["dropdown__toggle--open"]]: isOpen
     }
-  ), O = C(o.dropdown__content, t && o["dropdown__content--open"]), V = c.Children.map(b, (e, r) => /* @__PURE__ */ d("li", { className: o.dropdown__input, role: "option", id: `${E}-${r}`, "aria-selected": r === f, children: c.isValidElement(e) && l.current && l.current[r] ? c.cloneElement(e, { ref: Y([e.props.ref, l.current[r]]) }) : e }));
-  return /* @__PURE__ */ g("div", { className: o.dropdown, ref: u, children: [
-    /* @__PURE__ */ d("span", { id: v, className: o.dropdown__label, children: H }),
-    /* @__PURE__ */ g(
+  );
+  const contentClasses = classNames(styles.dropdown__content, isOpen && styles["dropdown__content--open"]);
+  const renderChildren = React.Children.map(children, (child, index) => /* @__PURE__ */ jsx("li", { className: styles.dropdown__input, role: "option", id: `${optionIdPrefix}-${index}`, "aria-selected": index === currentIndex, children: React.isValidElement(child) && inputRefList.current && inputRefList.current[index] ? React.cloneElement(child, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) }) : child }));
+  return /* @__PURE__ */ jsxs("div", { className: styles.dropdown, ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx("span", { id: labelId, className: styles.dropdown__label, children: label }),
+    /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
-        onClick: () => !t && k(),
-        className: D,
-        ref: I,
-        "data-testid": P,
-        "data-analyticsid": Q.Dropdown,
-        disabled: i,
-        "aria-labelledby": N,
+        onClick: () => !isOpen && handleOpen(),
+        className: toggleClasses,
+        ref: buttonRef,
+        "data-testid": testId,
+        "data-analyticsid": AnalyticsId.Dropdown,
+        disabled,
+        "aria-labelledby": toggleLabelId,
         "aria-haspopup": "listbox",
-        "aria-expanded": t,
+        "aria-expanded": isOpen,
         children: [
-          /* @__PURE__ */ d("span", { id: N, className: o.dropdown__toggle__label, children: K }),
-          /* @__PURE__ */ d(
-            oe,
+          /* @__PURE__ */ jsx("span", { id: toggleLabelId, className: styles.dropdown__toggle__label, children: placeholder }),
+          /* @__PURE__ */ jsx(
+            Icon,
             {
-              color: i ? A.palette.neutral700 : A.palette.blueberry600,
-              svgIcon: re,
-              className: o.dropdown__icon,
-              isHovered: !i && U,
-              size: W.XSmall
+              color: disabled ? theme.palette.neutral700 : theme.palette.blueberry600,
+              svgIcon: PlusSmall,
+              className: styles.dropdown__icon,
+              isHovered: !disabled && isHovered,
+              size: IconSize.XSmall
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ g("div", { className: O, style: { width: h ? "100%" : "auto", zIndex: T }, children: [
-      /* @__PURE__ */ d(
+    /* @__PURE__ */ jsxs("div", { className: contentClasses, style: { width: fluid ? "100%" : `auto`, zIndex }, children: [
+      /* @__PURE__ */ jsx(
         "ul",
         {
-          className: o.dropdown__options,
+          className: styles.dropdown__options,
           role: "listbox",
-          "aria-labelledby": v,
+          "aria-labelledby": labelId,
           tabIndex: -1,
-          "aria-activedescendant": typeof f < "u" ? `${E}-${f}` : void 0,
-          ref: w,
-          children: V
+          "aria-activedescendant": typeof currentIndex !== "undefined" ? `${optionIdPrefix}-${currentIndex}` : void 0,
+          ref: optionsRef,
+          children: renderChildren
         }
       ),
-      !$ && /* @__PURE__ */ d("div", { className: o.dropdown__close, children: /* @__PURE__ */ d(ee, { onClick: m, "aria-expanded": t, children: S }) })
+      !noCloseButton && /* @__PURE__ */ jsx("div", { className: styles.dropdown__close, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, "aria-expanded": isOpen, children: closeText }) })
     ] })
   ] });
 };
 export {
-  ne as DropdownOnColor,
-  Ie as default
+  DropdownOnColor,
+  Dropdown as default
 };
 //# sourceMappingURL=index.js.map

package/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => (\n    <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n      {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n        ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n        : child}\n    </li>\n  ));\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","onColor","transparent","fluid","testId","disabled","zIndex","ZIndex","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","jsx","mergeRefs","jsxs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  ZIndex,\n  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n  useUuid,\n} from '../..';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownOnColor {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Visible for screen readers  */\n  label: string;\n  /** Text on the trigger button that opens the dropdown */\n  placeholder: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Close button text */\n  closeText?: string;\n  /** No close button */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  onColor?: keyof typeof DropdownOnColor;\n  /** Makes the background of the trigger transparent */\n  transparent?: boolean;\n  /** Makes the width of the full component adjust to its parent */\n  fluid?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n  const {\n    label,\n    placeholder,\n    closeText = 'Lukk',\n    noCloseButton = false,\n    onToggle,\n    open = false,\n    children,\n    onColor = DropdownOnColor.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n  } = props;\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const [currentIndex, setCurrentIndex] = useState<number>();\n  const labelId = useUuid();\n  const toggleLabelId = useUuid();\n  const optionIdPrefix = useUuid();\n\n  const handleOpen = (): void => {\n    toggleIsOpen();\n    optionsRef.current?.focus();\n  };\n\n  const handleClose = (): void => {\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    event.preventDefault();\n\n    if (!inputRefList.current) {\n      return;\n    }\n\n    if (!isOpen) {\n      handleOpen();\n      return;\n    } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n      handleClose();\n      return;\n    }\n\n    const index = inputRefList.current.findIndex(x => x.current === event.target);\n    let nextIndex = index;\n\n    if (event.key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (event.key === KeyboardEventKey.End) {\n      nextIndex = inputRefList.current.length - 1;\n    } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n      nextIndex = index;\n    }\n    if (nextIndex !== -1) {\n      inputRefList.current[nextIndex].current?.focus();\n      setCurrentIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const toggleClasses = classNames(\n    styles.dropdown__toggle,\n    !disabled && {\n      [styles['dropdown__toggle--on-white']]: onColor === DropdownOnColor.onwhite,\n      [styles['dropdown__toggle--on-grey']]: onColor === DropdownOnColor.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: onColor === DropdownOnColor.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: onColor === DropdownOnColor.oncherry,\n      [styles['dropdown__toggle--transparent']]: transparent,\n      [styles['dropdown__toggle--fluid']]: fluid,\n      [styles['dropdown__toggle--open']]: isOpen,\n    }\n  );\n\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n  const renderChildren = React.Children.map(children, (child, index) => (\n    <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n      {React.isValidElement(child) && inputRefList.current && inputRefList.current[index]\n        ? React.cloneElement(child as React.ReactElement, { ref: mergeRefs([child.props.ref, inputRefList.current[index]]) })\n        : child}\n    </li>\n  ));\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <span id={labelId} className={styles.dropdown__label}>\n        {label}\n      </span>\n      <button\n        type=\"button\"\n        onClick={(): false | void => !isOpen && handleOpen()}\n        className={toggleClasses}\n        ref={buttonRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleLabelId}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n          {placeholder}\n        </span>\n        <Icon\n          color={disabled ? theme.palette.neutral700 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div className={contentClasses} style={{ width: fluid ? '100%' : `auto`, zIndex: zIndex }}>\n        <ul\n          className={styles.dropdown__options}\n          role=\"listbox\"\n          aria-labelledby={labelId}\n          tabIndex={-1}\n          aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n          ref={optionsRef}\n        >\n          {renderChildren}\n        </ul>\n        {!noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose} aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownOnColor"],"mappings":"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"}

package/components/Duolist/Duolist.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { Breakpoint } from '../../hooks/useBreakpoint';
 import { TitleProps } from '../Title';
 export type DuolistVariants = 'normal' | 'line';