@helsenorge/designsystem-react 7.0.0-beta.2 → 7.0.0-beta.5

package/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const onWhite = mode === FormMode.onwhite;\n  const onGrey = mode === FormMode.ongrey;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onInvalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors']);\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 400);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={props['aria-describedby'] ?? undefined}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && <p className={errorStyles}>{errorText}</p>}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        checkboxLabelClasses,\n        labelTextClasses,\n        checkboxStyles['checkbox-sublabel-wrapper'],\n        large\n      )}\n    </div>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","size","errorText","error","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","onWhite","onGrey","onBlueberry","onInvalid","onDark","large","FormSize","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","Icon","Check","IconSize","AnalyticsId","renderLabelAsParent","Checkbox$1"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormSize, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys/color';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport Icon from '../Icon';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n  > {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med large variant */\n  label: React.ReactNode;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Changes the visuals of the checkbox */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the checkbox */\n  size?: keyof typeof FormSize;\n  /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    checked = false,\n    disabled,\n    label,\n    inputId = uuid(),\n    mode = FormMode.onwhite,\n    name = inputId,\n    size,\n    errorText,\n    error = !!errorText,\n    errorTextId,\n    value = getLabelText(label),\n    testId,\n    required,\n    onChange,\n    ...rest\n  } = props;\n  const [isChecked, setIsChecked] = useState(checked);\n  const errorTextUuid = useUuid(errorTextId);\n  const onWhite = mode === FormMode.onwhite;\n  const onGrey = mode === FormMode.ongrey;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const onInvalid = error || mode === FormMode.oninvalid;\n  const onDark = mode === FormMode.ondark;\n  const large = size === FormSize.large;\n  const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n    [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n    [checkboxStyles['checkbox-wrapper--large']]: large,\n  });\n  const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n    [checkboxStyles['checkbox-label--disabled']]: disabled,\n    [checkboxStyles['checkbox-label--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label--large']]: large,\n    [checkboxStyles['checkbox-label__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__large--focus']]: large && isFocused,\n    [checkboxStyles['checkbox-label__large--on-white']]: large && onWhite,\n    [checkboxStyles['checkbox-label__large--on-grey']]: large && onGrey,\n    [checkboxStyles['checkbox-label__large--on-blueberry']]: large && onBlueberry,\n    [checkboxStyles['checkbox-label__large--on-invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox-label__large--disabled']]: large && disabled,\n  });\n  const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n  const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n    [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n    [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n    [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n    [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !large && isChecked && onDark,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n    [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n    [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--disabled']]: disabled && large && isChecked,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox__icon-wrapper__large--checked--disabled']]: disabled && large && isChecked,\n  });\n  const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n    [checkboxStyles['checkbox-label__text__large--checked']]: large && isChecked,\n    [checkboxStyles['checkbox-label__text__large--invalid']]: large && isChecked && onInvalid,\n    [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n    [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n  });\n  const errorStyles = classNames(checkboxStyles['checkbox-errors']);\n\n  let iconColor = getColor('white');\n  if (onDark || (large && isChecked)) iconColor = getColor('blueberry', 900);\n  if (onInvalid && large && isChecked) iconColor = getColor('white');\n  if (disabled) iconColor = getColor('neutral', 400);\n\n  useEffect(() => {\n    setIsChecked(checked);\n  }, [checked]);\n\n  const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    if (onChange) {\n      onChange(e);\n    }\n\n    setIsChecked(!isChecked);\n  };\n\n  const getLabelContent = (): React.ReactNode => {\n    return (\n      <>\n        <input\n          id={inputId}\n          name={name}\n          className={checkboxClasses}\n          type=\"checkbox\"\n          checked={isChecked}\n          disabled={disabled}\n          value={value}\n          ref={mergedRefs}\n          aria-describedby={[props['aria-describedby'] || '', errorTextUuid].join(' ')}\n          aria-invalid={error}\n          required={required}\n          onChange={onChangeHandler}\n          {...rest}\n        />\n        <span className={checkboxIconWrapperClasses}>\n          {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n        </span>\n      </>\n    );\n  };\n\n  return (\n    <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n      {errorText && (\n        <p className={errorStyles} id={errorTextUuid}>\n          {errorText}\n        </p>\n      )}\n      {renderLabelAsParent(\n        label,\n        getLabelContent(),\n        inputId,\n        mode as FormMode,\n        checkboxLabelClasses,\n        labelTextClasses,\n        checkboxStyles['checkbox-sublabel-wrapper'],\n        large\n      )}\n    </div>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","size","errorText","error","errorTextId","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","errorTextUuid","useUuid","onWhite","onGrey","onBlueberry","onInvalid","onDark","large","FormSize","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","Icon","Check","IconSize","AnalyticsId","renderLabelAsParent","Checkbox$1"],"mappings":"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"}

package/components/Dropdown/Dropdown.d.ts

@@ -30,6 +30,8 @@ export interface DropdownProps {
     disabled?: boolean;
     /** Sets the data-testid attribute on the dropdown button. */
     testId?: string;
+    /** Overrides the default z-index of the DropDownContent */
+    zIndex?: number;
 }
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/components/Dropdown/Dropdown.js

@@ -1,35 +1,36 @@
-import r, { useRef as g, useState as W } from "react";
+import r, { useRef as g, useState as X } from "react";
 import k from "classnames";
 import { theme as C } from "../../theme/index.js";
 import "../../hooks/useBreakpoint.js";
-import { useHover as X } from "../../hooks/useHover.js";
+import { useHover as Z } from "../../hooks/useHover.js";
 import { useSize as j } from "../../hooks/useSize.js";
 import { useToggle as q } from "../../hooks/useToggle.js";
 import { useKeyboardEvent as F } from "../../hooks/useKeyboardEvent.js";
 import { useOutsideEvent as G } from "../../hooks/useOutsideEvent.js";
 import { useUuid as _ } from "../../hooks/useUuid.js";
-import { KeyboardEventKey as n, AnalyticsId as J, IconSize as Q } from "../../constants.js";
-import { mergeRefs as Y } from "../../utils/refs.js";
-import Z from "../Button/Button.js";
-import { Icon as M } from "../Icon/Icon.js";
-import ee from "../Icons/PlusSmall.js";
+import { ZIndex as J, KeyboardEventKey as n, AnalyticsId as Q, IconSize as Y } from "../../constants.js";
+import { mergeRefs as M } from "../../utils/refs.js";
+import ee from "../Button/Button.js";
+import { Icon as oe } from "../Icon/Icon.js";
+import re from "../Icons/PlusSmall.js";
 import o from "./styles.module.scss";
-var oe = /* @__PURE__ */ ((d) => (d.onwhite = "onwhite", d.ongrey = "ongrey", d.onblueberry = "onblueberry", d.oncherry = "oncherry", d))(oe || {});
-const re = (d) => {
+var te = /* @__PURE__ */ ((d) => (d.onwhite = "onwhite", d.ongrey = "ongrey", d.onblueberry = "onblueberry", d.oncherry = "oncherry", d))(te || {});
+const ne = (d) => {
   const {
     label: R,
     placeholder: $,
     closeText: A = "Lukk",
     noCloseButton: H = !1,
     onToggle: K,
-    open: S = !1,
+    open: O = !1,
     children: y,
     mode: c = "onwhite",
-    transparent: O = !1,
+    transparent: S = !1,
     fluid: b = !1,
     testId: z,
-    disabled: i
-  } = d, p = g(null), w = g(null), { hoverRef: m, isHovered: D } = X(), { value: l, toggleValue: h } = q(!i && S, K), a = g(r.Children.map(y, () => r.createRef())), [u, L] = W(), { width: T } = j(m) || {}, E = _(), I = _(), x = _(), N = () => {
+    disabled: i,
+    zIndex: D = J.PopOver
+  } = d, p = g(null), w = g(null), { hoverRef: m, isHovered: L } = Z(), { value: l, toggleValue: h } = q(!i && O, K), a = g(r.Children.map(y, () => r.createRef())), [u, P] = X(), { width: T } = j(m) || {}, E = _(), I = _(), x = _(), v = () => {
     var e;
     h(), (e = w.current) == null || e.focus();
   }, f = () => {
@@ -37,7 +38,7 @@ const re = (d) => {
     h(), (e = m.current) == null || e.focus();
   };
   F(p, (e) => {
-    var v;
+    var N;
     if (e.preventDefault(), !a.current)
       return;
     if (l) {
@@ -46,12 +47,12 @@ const re = (d) => {
         return;
       }
     } else {
-      N();
+      v();
       return;
     }
-    const t = a.current.findIndex((V) => V.current === e.target);
+    const t = a.current.findIndex((W) => W.current === e.target);
     let s = t;
-    e.key === n.Home ? s = 0 : e.key === n.End ? s = a.current.length - 1 : e.key === n.ArrowDown && t < a.current.length - 1 ? s = t + 1 : e.key === n.ArrowUp && t > 0 ? s = t - 1 : e.key === n.Enter && t !== -1 && (s = t), s !== -1 && ((v = a.current[s].current) == null || v.focus(), L(s));
+    e.key === n.Home ? s = 0 : e.key === n.End ? s = a.current.length - 1 : e.key === n.ArrowDown && t < a.current.length - 1 ? s = t + 1 : e.key === n.ArrowUp && t > 0 ? s = t - 1 : e.key === n.Enter && t !== -1 && (s = t), s !== -1 && ((N = a.current[s].current) == null || N.focus(), P(s));
   }, [
     n.ArrowDown,
     n.ArrowUp,
@@ -67,20 +68,20 @@ const re = (d) => {
       [o["dropdown__toggle--on-grey"]]: c === "ongrey",
       [o["dropdown__toggle--on-blueberry"]]: c === "onblueberry",
       [o["dropdown__toggle--on-cherry"]]: c === "oncherry",
-      [o["dropdown__toggle--transparent"]]: O,
+      [o["dropdown__toggle--transparent"]]: S,
       [o["dropdown__toggle--fluid"]]: b,
       [o["dropdown__toggle--open"]]: l
     }
-  ), B = k(o.dropdown__content, l && o["dropdown__content--open"]), P = r.Children.map(y, (e, t) => /* @__PURE__ */ r.createElement("li", { className: o.dropdown__input, role: "option", id: `${x}-${t}`, "aria-selected": t === u }, r.isValidElement(e) && a.current && a.current[t] ? r.cloneElement(e, { ref: Y([e.props.ref, a.current[t]]) }) : e));
+  ), B = k(o.dropdown__content, l && o["dropdown__content--open"]), V = r.Children.map(y, (e, t) => /* @__PURE__ */ r.createElement("li", { className: o.dropdown__input, role: "option", id: `${x}-${t}`, "aria-selected": t === u }, r.isValidElement(e) && a.current && a.current[t] ? r.cloneElement(e, { ref: M([e.props.ref, a.current[t]]) }) : e));
   return /* @__PURE__ */ r.createElement("div", { className: o.dropdown, ref: p }, /* @__PURE__ */ r.createElement("span", { id: E, className: o.dropdown__label }, R), /* @__PURE__ */ r.createElement(
     "button",
     {
       type: "button",
-      onClick: () => !l && N(),
+      onClick: () => !l && v(),
       className: U,
       ref: m,
       "data-testid": z,
-      "data-analyticsid": J.Dropdown,
+      "data-analyticsid": Q.Dropdown,
       disabled: i,
       "aria-labelledby": I,
       "aria-haspopup": "listbox",
@@ -88,16 +89,16 @@ const re = (d) => {
     },
     /* @__PURE__ */ r.createElement("span", { id: I, className: o.dropdown__toggle__label }, $),
     /* @__PURE__ */ r.createElement(
-      M,
+      oe,
       {
         color: i ? C.palette.neutral700 : C.palette.blueberry600,
-        svgIcon: ee,
+        svgIcon: re,
         className: o.dropdown__icon,
-        isHovered: !i && D,
-        size: Q.XSmall
+        isHovered: !i && L,
+        size: Y.XSmall
       }
     )
-  ), /* @__PURE__ */ r.createElement("div", { className: B, style: { width: b ? "100%" : `${T}px` } }, /* @__PURE__ */ r.createElement(
+  ), /* @__PURE__ */ r.createElement("div", { className: B, style: { width: b ? "100%" : `${T}px`, zIndex: D } }, /* @__PURE__ */ r.createElement(
     "ul",
     {
       className: o.dropdown__options,
@@ -107,11 +108,11 @@ const re = (d) => {
       "aria-activedescendant": typeof u < "u" ? `${x}-${u}` : void 0,
       ref: w
     },
-    P
-  ), !H && /* @__PURE__ */ r.createElement("div", { className: o.dropdown__close }, /* @__PURE__ */ r.createElement(Z, { onClick: f, fluid: !0, "aria-expanded": l }, A))));
-}, he = re;
+    V
+  ), !H && /* @__PURE__ */ r.createElement("div", { className: o.dropdown__close }, /* @__PURE__ */ r.createElement(ee, { onClick: f, fluid: !0, "aria-expanded": l }, A))));
+}, Ie = ne;
 export {
-  oe as DropdownMode,
-  he as default
+  te as DropdownMode,
+  Ie as default
 };
 //# sourceMappingURL=Dropdown.js.map

package/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.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  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\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 DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\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  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\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}\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    mode = DropdownMode.onwhite,\n    transparent = false,\n    fluid = false,\n    testId,\n    disabled,\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 { width: buttonWidth } = useSize(buttonRef) || {};\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']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.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={() => !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%' : `${buttonWidth}px` }}>\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} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","mergeRefs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button","Dropdown$1"],"mappings":"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"}
+{"version":3,"file":"Dropdown.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  useSize,\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 DropdownMode {\n  onwhite = 'onwhite',\n  ongrey = 'ongrey',\n  onblueberry = 'onblueberry',\n  oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n  /** Label for dropdown. Synlig for skjermlesere.  */\n  label: string;\n  /** Tekst på knappen som åpner dropdownen */\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  /** Om dropdown er åpen */\n  open?: boolean;\n  /** Changes the visuals of the dropdown */\n  mode?: keyof typeof DropdownMode;\n  /** Makes the background transparent */\n  transparent?: boolean;\n  /** Makes the background transparent */\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    mode = DropdownMode.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 { width: buttonWidth } = useSize(buttonRef) || {};\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']]: mode === DropdownMode.onwhite,\n      [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n      [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n      [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.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%' : `${buttonWidth}px`, 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} fluid aria-expanded={isOpen}>\n              {closeText}\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","zIndex","ZIndex","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","renderChildren","child","mergeRefs","AnalyticsId","Icon","theme","PlusSmall","IconSize","Button","Dropdown$1"],"mappings":"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"}

package/components/ErrorWrapper/ErrorWrapper.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 export interface ErrorWrapperProps {
-    /** Error message */
-    errorText?: string;
     /** Form component */
     children?: React.ReactNode;
+    /** Error message */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
     /** Adds custom classes to the element. */
     className?: string;
     /** Sets the data-testid attribute. */

package/components/ErrorWrapper/ErrorWrapper.js

@@ -1,12 +1,12 @@
-import a from "react";
+import t from "react";
 import o from "classnames";
 import e from "./styles.module.scss";
-const m = (t) => {
-  const { errorText: r, className: s, testId: p } = t, l = o(e["error-wrapper"], s, { [e["error-wrapper--with-error"]]: r }), c = o(e["error-wrapper__errors"]);
-  return /* @__PURE__ */ a.createElement("div", { className: l, "data-testid": p || "error-wrapper-testid" }, r && /* @__PURE__ */ a.createElement("p", { role: "alert", className: c }, r), t.children);
-}, w = m;
+const s = (r) => {
+  const a = o(e["error-wrapper"], r.errorText && e["error-wrapper--with-error"], r.className);
+  return /* @__PURE__ */ t.createElement("div", { className: a, "data-testid": r.testId }, r.errorText && /* @__PURE__ */ t.createElement("p", { className: e["error-wrapper__errors"], id: r.errorTextId }, r.errorText), r.children);
+}, d = s;
 export {
-  m as ErrorWrapper,
-  w as default
+  s as ErrorWrapper,
+  d as default
 };
 //# sourceMappingURL=ErrorWrapper.js.map

package/components/ErrorWrapper/ErrorWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorWrapper.js","sources":["../../../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Error message */\n  errorText?: string;\n  /** Form component */\n  children?: React.ReactNode;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const { errorText, className, testId } = props;\n\n  const withErrorStyle = cn(styles['error-wrapper'], className, { [styles[`error-wrapper--with-error`]]: errorText });\n\n  const errorStyles = cn(styles['error-wrapper__errors']);\n\n  return (\n    <div className={withErrorStyle} data-testid={testId || 'error-wrapper-testid'}>\n      {errorText && (\n        <p role=\"alert\" className={errorStyles}>\n          {errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorText","className","testId","withErrorStyle","cn","styles","errorStyles","React","ErrorWrapper$1"],"mappings":";;;AAiBO,MAAMA,IAA4C,CAASC,MAAA;AAChE,QAAM,EAAE,WAAAC,GAAW,WAAAC,GAAW,QAAAC,EAAA,IAAWH,GAEnCI,IAAiBC,EAAGC,EAAO,eAAe,GAAGJ,GAAW,EAAE,CAACI,EAAO,2BAA2B,CAAC,GAAGL,EAAW,CAAA,GAE5GM,IAAcF,EAAGC,EAAO,uBAAuB,CAAC;AAEtD,yCACG,OAAI,EAAA,WAAWF,GAAgB,eAAaD,KAAU,uBACpD,GAAAF,KACEO,gBAAAA,EAAA,cAAA,KAAA,EAAE,MAAK,SAAQ,WAAWD,KACxBN,CACH,GAEDD,EAAM,QACT;AAEJ,GAEAS,IAAeV;"}
+{"version":3,"file":"ErrorWrapper.js","sources":["../../../src/components/ErrorWrapper/ErrorWrapper.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport styles from './styles.module.scss';\n\nexport interface ErrorWrapperProps {\n  /** Form component */\n  children?: React.ReactNode;\n  /** Error message */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const ErrorWrapper: React.FC<ErrorWrapperProps> = props => {\n  const errorWrapperClasses = cn(styles['error-wrapper'], props.errorText && styles[`error-wrapper--with-error`], props.className);\n\n  return (\n    <div className={errorWrapperClasses} data-testid={props.testId}>\n      {props.errorText && (\n        <p className={styles['error-wrapper__errors']} id={props.errorTextId}>\n          {props.errorText}\n        </p>\n      )}\n      {props.children}\n    </div>\n  );\n};\n\nexport default ErrorWrapper;\n"],"names":["ErrorWrapper","props","errorWrapperClasses","cn","styles","React","ErrorWrapper$1"],"mappings":";;;AAmBO,MAAMA,IAA4C,CAASC,MAAA;AAC1D,QAAAC,IAAsBC,EAAGC,EAAO,eAAe,GAAGH,EAAM,aAAaG,EAAO,2BAA2B,GAAGH,EAAM,SAAS;AAG7H,SAAAI,gBAAAA,EAAA,cAAC,SAAI,WAAWH,GAAqB,eAAaD,EAAM,OAAA,GACrDA,EAAM,aACJI,gBAAAA,EAAA,cAAA,KAAA,EAAE,WAAWD,EAAO,uBAAuB,GAAG,IAAIH,EAAM,eACtDA,EAAM,SACT,GAEDA,EAAM,QACT;AAEJ,GAEAK,IAAeN;"}

package/components/Expander/Expander.d.ts

@@ -30,6 +30,8 @@ export interface ExpanderProps {
     renderChildrenWhenClosed?: boolean;
     /** Sets the data-testid attribute on the expander button. */
     testId?: string;
+    /** Overrides the default z-index of the expander header */
+    zIndex?: number;
 }
 declare const Expander: React.FC<ExpanderProps>;
 export default Expander;

package/components/Expander/Expander.js

@@ -1,30 +1,31 @@
 import r, { useRef as N } from "react";
 import d from "classnames";
-import { ZIndex as A, AnalyticsId as C, IconSize as p } from "../../constants.js";
-import { useExpand as D } from "../../hooks/useExpand.js";
-import { useHover as O } from "../../hooks/useHover.js";
-import { useSticky as U } from "../../hooks/useSticky.js";
-import Z from "../Button/Button.js";
+import { ZIndex as D, AnalyticsId as C, IconSize as p } from "../../constants.js";
+import { useExpand as O } from "../../hooks/useExpand.js";
+import { useHover as U } from "../../hooks/useHover.js";
+import { useSticky as Z } from "../../hooks/useSticky.js";
+import j from "../Button/Button.js";
 import { Icon as _ } from "../Icon/Icon.js";
 import b from "../Icons/ChevronDown.js";
 import h from "../Icons/ChevronUp.js";
-import j from "../LazyIcon/LazyIcon.js";
+import q from "../LazyIcon/LazyIcon.js";
 import e from "./styles.module.scss";
-var q = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(q || {});
-const F = (s) => {
+var F = /* @__PURE__ */ ((s) => (s.small = "small", s.large = "large", s))(F || {});
+const G = (s) => {
   const {
     title: x,
-    children: $,
+    children: z,
     size: n = "small",
     color: g,
     svgIcon: o,
-    expanded: k = !1,
-    noNestedLine: z = !1,
+    expanded: $ = !1,
+    noNestedLine: k = !1,
     sticky: S = !1,
     testId: f,
     onExpand: w,
-    renderChildrenWhenClosed: R = !1
-  } = s, [t, u] = D(k, w), E = N(null), l = N(null), { isHovered: i } = O(l), { isOutsideWindow: W, isLeavingWindow: c, offsetHeight: v, contentWidth: y } = U(E, l), a = S && t && W, I = (m) => /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e[`expander__icon--${m}`]) }, /* @__PURE__ */ r.createElement(_, { svgIcon: t ? h : b, size: p.XSmall, isHovered: i })), X = d(
+    renderChildrenWhenClosed: R = !1,
+    zIndex: W = D.ExpanderTrigger
+  } = s, [t, u] = O($, w), E = N(null), l = N(null), { isHovered: i } = U(l), { isOutsideWindow: X, isLeavingWindow: c, offsetHeight: v, contentWidth: y } = Z(E, l), a = S && t && X, I = (m) => /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e[`expander__icon--${m}`]) }, /* @__PURE__ */ r.createElement(_, { svgIcon: t ? h : b, size: p.XSmall, isHovered: i })), H = d(
     e.expander__trigger,
     n === "large" && e[`expander__trigger--${n}`],
     n === "large" && e[`expander__trigger--${g || "neutral"}`],
@@ -32,13 +33,13 @@ const F = (s) => {
     t && e["expander__trigger--expanded"],
     a && !c && e["expander__trigger--sticky"],
     a && c && e["expander__trigger--absolute"]
-  ), H = () => /* @__PURE__ */ r.createElement(
+  ), L = () => /* @__PURE__ */ r.createElement(
     "button",
     {
       type: "button",
-      className: X,
+      className: H,
       style: {
-        zIndex: i || a ? A.ExpanderTrigger : void 0,
+        zIndex: i || a ? W : void 0,
         width: a && y ? `${y}px` : void 0
       },
       "aria-expanded": t,
@@ -48,19 +49,19 @@ const F = (s) => {
       "data-analyticsid": C.Expander
     },
     n === "small" && I("left"),
-    o && /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e["expander__icon--left"]) }, typeof o == "string" ? /* @__PURE__ */ r.createElement(j, { iconName: o, size: p.XSmall, isHovered: i }) : /* @__PURE__ */ r.createElement(_, { svgIcon: o, size: p.XSmall, isHovered: i })),
+    o && /* @__PURE__ */ r.createElement("span", { className: d(e.expander__icon, e["expander__icon--left"]) }, typeof o == "string" ? /* @__PURE__ */ r.createElement(q, { iconName: o, size: p.XSmall, isHovered: i }) : /* @__PURE__ */ r.createElement(_, { svgIcon: o, size: p.XSmall, isHovered: i })),
     x,
     n === "large" && I("right")
-  ), L = d(
+  ), T = d(
     e.expander__button,
     t && e["expander__button--expanded"],
     a && !c && e["expander__button--sticky"],
     a && c && e["expander__button--absolute"]
-  ), T = () => /* @__PURE__ */ r.createElement(
-    Z,
+  ), B = () => /* @__PURE__ */ r.createElement(
+    j,
     {
       variant: "borderless",
-      className: L,
+      className: T,
       "aria-expanded": t,
       ref: l,
       onClick: () => u(!t),
@@ -69,7 +70,7 @@ const F = (s) => {
     },
     /* @__PURE__ */ r.createElement(_, { svgIcon: t ? h : b, size: p.XSmall }),
     x
-  ), B = () => {
+  ), A = () => {
     if (!R && !t)
       return null;
     const m = d(
@@ -78,9 +79,9 @@ const F = (s) => {
       n === "large" && e[`expander__content--${g || "neutral"}`],
       n === "large" && o && e["expander__content--icon"],
       t && e["expander__content--expanded"],
-      n === "small" && !z && e["expander__content--nested-line"]
+      n === "small" && !k && e["expander__content--nested-line"]
     );
-    return /* @__PURE__ */ r.createElement("div", { className: m }, $);
+    return /* @__PURE__ */ r.createElement("div", { className: m }, z);
   };
   return /* @__PURE__ */ r.createElement(
     "div",
@@ -89,12 +90,12 @@ const F = (s) => {
       ref: E,
       style: { paddingTop: a && v ? `${v}px` : void 0 }
     },
-    n === "large" ? H() : T(),
-    B()
+    n === "large" ? L() : B(),
+    A()
   );
-}, ae = F;
+}, oe = G;
 export {
-  q as ExpanderSize,
-  ae as default
+  F as ExpanderSize,
+  oe as default
 };
 //# sourceMappingURL=Expander.js.map

package/components/Expander/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const renderChevron = (align: 'left' | 'right') => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n    isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n  );\n\n  const renderTrigger = () => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n    isSticky && isLeavingWindow && styles['expander__button--absolute']\n  );\n\n  const renderButton = () => (\n    <Button\n      variant=\"borderless\"\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={() => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line']\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","ZIndex","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"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"}
+{"version":3,"file":"Expander.js","sources":["../../../src/components/Expander/Expander.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { useSticky } from '../../hooks/useSticky';\nimport { PaletteNames } from '../../theme/palette';\nimport Button from '../Button';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { IconName } from '../Icons/IconNames';\nimport LazyIcon from '../LazyIcon';\n\nimport styles from './styles.module.scss';\n\nexport enum ExpanderSize {\n  small = 'small',\n  large = 'large',\n}\n\nexport type ExpanderColors = Extract<PaletteNames, 'banana' | 'blueberry' | 'cherry' | 'kiwi' | 'neutral' | 'plum' | 'white'>;\n\nexport interface ExpanderProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the size of the expander. Default: ExpanderSize.small */\n  size?: ExpanderSize;\n  /** Sets the background of the expander. Requires size=ExpanderSize.large. */\n  color?: ExpanderColors;\n  /** Adds an icon to the expander trigger. Requires size=ExpanderSize.large. */\n  svgIcon?: SvgIcon | IconName;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Removes border to the left of the content. Requires size=ExpanderSize.small. */\n  noNestedLine?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n}\n\nconst Expander: React.FC<ExpanderProps> = props => {\n  const {\n    title,\n    children,\n    size = ExpanderSize.small,\n    color,\n    svgIcon: icon,\n    expanded = false,\n    noNestedLine = false,\n    sticky = false,\n    testId,\n    onExpand,\n    renderChildrenWhenClosed = false,\n    zIndex = ZIndex.ExpanderTrigger,\n  } = props;\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const renderChevron = (align: 'left' | 'right'): React.ReactNode => (\n    <span className={classNames(styles['expander__icon'], styles[`expander__icon--${align}`])}>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} isHovered={isHovered} />\n    </span>\n  );\n\n  const triggerClassName = classNames(\n    styles['expander__trigger'],\n    size === ExpanderSize.large && styles[`expander__trigger--${size}`],\n    size === ExpanderSize.large && styles[`expander__trigger--${color || 'neutral'}`],\n    size === ExpanderSize.large && icon && styles['expander__trigger--icon'],\n    isExpanded && styles['expander__trigger--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__trigger--sticky'],\n    isSticky && isLeavingWindow && styles['expander__trigger--absolute']\n  );\n\n  const renderTrigger = (): React.ReactNode => (\n    <button\n      type=\"button\"\n      className={triggerClassName}\n      style={{\n        zIndex: isHovered || isSticky ? zIndex : undefined,\n        width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n      }}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      {size === ExpanderSize.small && renderChevron('left')}\n      {icon && (\n        <span className={classNames(styles['expander__icon'], styles['expander__icon--left'])}>\n          {typeof icon === 'string' ? (\n            <LazyIcon iconName={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          ) : (\n            <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\n          )}\n        </span>\n      )}\n      {title}\n      {size === ExpanderSize.large && renderChevron('right')}\n    </button>\n  );\n\n  const buttonClassName = classNames(\n    styles['expander__button'],\n    isExpanded && styles['expander__button--expanded'],\n    isSticky && !isLeavingWindow && styles['expander__button--sticky'],\n    isSticky && isLeavingWindow && styles['expander__button--absolute']\n  );\n\n  const renderButton = (): React.ReactNode => (\n    <Button\n      variant=\"borderless\"\n      className={buttonClassName}\n      aria-expanded={isExpanded}\n      ref={triggerRef}\n      onClick={(): void => setIsExpanded(!isExpanded)}\n      testId={testId}\n      data-analyticsid={AnalyticsId.Expander}\n    >\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} size={IconSize.XSmall} />\n      {title}\n    </Button>\n  );\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const contentClassName = classNames(\n      styles['expander__content'],\n      styles[`expander__content--${size}`],\n      size === ExpanderSize.large && styles[`expander__content--${color || 'neutral'}`],\n      size === ExpanderSize.large && icon && styles['expander__content--icon'],\n      isExpanded && styles['expander__content--expanded'],\n      size === ExpanderSize.small && !noNestedLine && styles['expander__content--nested-line']\n    );\n\n    return <div className={contentClassName}>{children}</div>;\n  };\n\n  return (\n    <div\n      className={styles['expander']}\n      ref={expanderRef}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      {size === ExpanderSize.large ? renderTrigger() : renderButton()}\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Expander;\n"],"names":["ExpanderSize","Expander","props","title","children","size","color","icon","expanded","noNestedLine","sticky","testId","onExpand","renderChildrenWhenClosed","zIndex","ZIndex","isExpanded","setIsExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","renderChevron","align","React","classNames","styles","Icon","ChevronUp","ChevronDown","IconSize","triggerClassName","renderTrigger","AnalyticsId","LazyIcon","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"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"}

package/components/ExpanderHierarchy/expander.module.scss

@@ -7,10 +7,6 @@
 .expander {
   $item: &;
 
-  @media (prefers-reduced-motion: no-preference) {
-    animation: fade-in 150ms linear forwards;
-  }
-
   &:first-of-type {
     border-top: 1px solid $neutral500;
   }
@@ -141,19 +137,3 @@
     }
   }
 }
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-    max-height: 0;
-  }
-
-  99% {
-    max-height: 24rem;
-  }
-
-  100% {
-    opacity: 1;
-    max-height: none;
-  }
-}

package/components/ExpanderHierarchy/expander.module.scss.d.ts

@@ -17,7 +17,6 @@ export type Styles = {
   'expander__title--4-and-lower': string;
   'expander__title--expanded': string;
   'expander__title--print': string;
-  'fade-in': string;
 };
 
 export type ClassNames = keyof Styles;

package/components/ExpanderList/ExpanderList.d.ts

@@ -31,6 +31,8 @@ interface ExpanderListProps {
     testId?: string;
     /** Sets visual priority */
     variant?: ExpanderListVariant;
+    /** Overrides the default z-index of the expander header */
+    zIndex?: number;
 }
 type Modify<T, R> = Omit<T, keyof R> & R;
 type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
@@ -49,6 +51,8 @@ type ExpanderProps = Modify<React.HTMLAttributes<HTMLButtonElement>, {
     handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     /** Called when expander is open/closed. */
     onExpand?: (isExpanded: boolean) => void;
+    /** Overrides the default z-index of the expander header */
+    zIndex?: number;
 }> & Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;
 export declare const ExpanderList: ExpanderListCompound;
 export default ExpanderList;