@helsenorge/designsystem-react 4.3.1 → 4.4.0

package/components/Dropdown/index.js

@@ -1,2 +1,2 @@
-import t,{useRef as g,useState as V}from"react";import v from"classnames";import{theme as C}from"../../theme/index.js";import"../../hooks/useBreakpoint.js";import{useHover as W}from"../../hooks/useHover.js";import{useSize as X}from"../../hooks/useSize.js";import{useToggle as j}from"../../hooks/useToggle.js";import{useKeyboardEvent as q}from"../../hooks/useKeyboardEvent.js";import{useOutsideEvent as F}from"../../hooks/useOutsideEvent.js";import{useUuid as _}from"../../hooks/useUuid.js";import{KeyboardEventKey as r,AnalyticsId as G,IconSize as J}from"../../constants.js";import{B as Q}from"../../Button.js";import{Icon as Y}from"../Icons/Icon.js";import Z from"../Icons/PlusSmall.js";import e from"./styles.module.scss";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/debounce.js";import"../../hooks/usePrevious.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useIcons.js";import"../../theme/currys/color.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";var M=(s=>(s.onwhite="onwhite",s.ongrey="ongrey",s.onblueberry="onblueberry",s.oncherry="oncherry",s))(M||{});const ee=s=>{const{label:R,placeholder:$,closeText:A="Lukk",noCloseButton:K=!1,onToggle:S,open:H=!1,children:y,mode:d="onwhite",transparent:O=!1,fluid:b=!1,testId:z,disabled:c}=s,p=g(null),w=g(null),{hoverRef:m,isHovered:B}=W(),{value:a,toggleValue:h}=j(!c&&H,S),i=g(t.Children.map(y,()=>t.createRef())),[u,D]=V(),{width:L}=X(m)||{},E=_(),I=_(),x=_(),N=()=>{var o;h(),(o=w.current)==null||o.focus()},f=()=>{var o;h(),(o=m.current)==null||o.focus()};q(p,o=>{var k;if(o.preventDefault(),!i.current)return;if(a){if(o.key===r.Escape&&a){f();return}}else{N();return}const n=i.current.findIndex(P=>P.current===o.target);let l=n;o.key===r.Home?l=0:o.key===r.End?l=i.current.length-1:o.key===r.ArrowDown&&n<i.current.length-1?l=n+1:o.key===r.ArrowUp&&n>0?l=n-1:o.key===r.Enter&&n!==-1&&(l=n),l!==-1&&((k=i.current[l].current)==null||k.focus(),D(l))},[r.ArrowDown,r.ArrowUp,r.End,r.Enter,r.Escape,r.Home]),F(p,()=>a&&f());const T=v(e.dropdown__toggle,!c&&{[e["dropdown__toggle--on-white"]]:d==="onwhite",[e["dropdown__toggle--on-grey"]]:d==="ongrey",[e["dropdown__toggle--on-blueberry"]]:d==="onblueberry",[e["dropdown__toggle--on-cherry"]]:d==="oncherry",[e["dropdown__toggle--transparent"]]:O,[e["dropdown__toggle--fluid"]]:b,[e["dropdown__toggle--open"]]:a}),U=v(e.dropdown__content,a&&e["dropdown__content--open"]);return t.createElement("div",{className:e.dropdown,ref:p},t.createElement("span",{id:E,className:e.dropdown__label},R),t.createElement("button",{type:"button",onClick:()=>!a&&N(),className:T,ref:m,"data-testid":z,"data-analyticsid":G.Dropdown,disabled:c,"aria-labelledby":I,"aria-haspopup":"listbox","aria-expanded":a},t.createElement("span",{id:I,className:e.dropdown__toggle__label},$),t.createElement(Y,{color:c?C.palette.neutral500:C.palette.blueberry600,svgIcon:Z,className:e.dropdown__icon,isHovered:B,size:J.XSmall})),t.createElement("div",{className:U,style:{width:b?"100%":`${L}px`}},t.createElement("ul",{className:e.dropdown__options,role:"listbox","aria-labelledby":E,tabIndex:-1,"aria-activedescendant":typeof u<"u"?`${x}-${u}`:void 0,ref:w},t.Children.map(y,(o,n)=>{var l;return t.createElement("li",{className:e.dropdown__input,role:"option",id:`${x}-${n}`,"aria-selected":n===u},t.cloneElement(o,{ref:(l=i.current)==null?void 0:l[n]}))})),!K&&t.createElement("div",{className:e.dropdown__close},t.createElement(Q,{onClick:f,fluid:!0,"aria-expanded":a},A))))},Re=ee;export{M as DropdownMode,Re as default};
+import t,{useRef as g,useState as V}from"react";import v from"classnames";import{theme as C}from"../../theme/index.js";import"../../hooks/useBreakpoint.js";import{useHover as W}from"../../hooks/useHover.js";import{useSize as X}from"../../hooks/useSize.js";import{useToggle as j}from"../../hooks/useToggle.js";import{useKeyboardEvent as q}from"../../hooks/useKeyboardEvent.js";import{useOutsideEvent as F}from"../../hooks/useOutsideEvent.js";import{useUuid as _}from"../../hooks/useUuid.js";import{KeyboardEventKey as r,AnalyticsId as G,IconSize as J}from"../../constants.js";import{B as Q}from"../../Button.js";import{Icon as Y}from"../Icons/Icon.js";import Z from"../Icons/PlusSmall.js";import e from"./styles.module.scss";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../hooks/usePseudoClasses.js";import"../../utils/debounce.js";import"../../hooks/usePrevious.js";import"../../uuid.js";import"../../utils/environment.js";import"../../hooks/useIcons.js";import"../../theme/currys/color.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";var M=(s=>(s.onwhite="onwhite",s.ongrey="ongrey",s.onblueberry="onblueberry",s.oncherry="oncherry",s))(M||{});const ee=s=>{const{label:R,placeholder:$,closeText:A="Lukk",noCloseButton:K=!1,onToggle:S,open:H=!1,children:y,mode:d="onwhite",transparent:O=!1,fluid:b=!1,testId:z,disabled:c}=s,p=g(null),w=g(null),{hoverRef:m,isHovered:B}=W(),{value:a,toggleValue:h}=j(!c&&H,S),i=g(t.Children.map(y,()=>t.createRef())),[u,D]=V(),{width:L}=X(m)||{},E=_(),I=_(),x=_(),N=()=>{var o;h(),(o=w.current)==null||o.focus()},f=()=>{var o;h(),(o=m.current)==null||o.focus()};q(p,o=>{var k;if(o.preventDefault(),!i.current)return;if(a){if(o.key===r.Escape&&a){f();return}}else{N();return}const n=i.current.findIndex(P=>P.current===o.target);let l=n;o.key===r.Home?l=0:o.key===r.End?l=i.current.length-1:o.key===r.ArrowDown&&n<i.current.length-1?l=n+1:o.key===r.ArrowUp&&n>0?l=n-1:o.key===r.Enter&&n!==-1&&(l=n),l!==-1&&((k=i.current[l].current)==null||k.focus(),D(l))},[r.ArrowDown,r.ArrowUp,r.End,r.Enter,r.Escape,r.Home]),F(p,()=>a&&f());const T=v(e.dropdown__toggle,!c&&{[e["dropdown__toggle--on-white"]]:d==="onwhite",[e["dropdown__toggle--on-grey"]]:d==="ongrey",[e["dropdown__toggle--on-blueberry"]]:d==="onblueberry",[e["dropdown__toggle--on-cherry"]]:d==="oncherry",[e["dropdown__toggle--transparent"]]:O,[e["dropdown__toggle--fluid"]]:b,[e["dropdown__toggle--open"]]:a}),U=v(e.dropdown__content,a&&e["dropdown__content--open"]);return t.createElement("div",{className:e.dropdown,ref:p},t.createElement("span",{id:E,className:e.dropdown__label},R),t.createElement("button",{type:"button",onClick:()=>!a&&N(),className:T,ref:m,"data-testid":z,"data-analyticsid":G.Dropdown,disabled:c,"aria-labelledby":I,"aria-haspopup":"listbox","aria-expanded":a},t.createElement("span",{id:I,className:e.dropdown__toggle__label},$),t.createElement(Y,{color:c?C.palette.neutral500:C.palette.blueberry600,svgIcon:Z,className:e.dropdown__icon,isHovered:B,size:J.XSmall})),t.createElement("div",{className:U,style:{width:b?"100%":`${L}px`}},t.createElement("ul",{className:e.dropdown__options,role:"listbox","aria-labelledby":E,tabIndex:-1,"aria-activedescendant":typeof u<"u"?`${x}-${u}`:void 0,ref:w},t.Children.map(y,(o,n)=>{var l;return t.createElement("li",{className:e.dropdown__input,role:"option",id:`${x}-${n}`,"aria-selected":n===u},t.cloneElement(o,{ref:(l=i.current)==null?void 0:l[n]}))})),!K&&t.createElement("div",{className:e.dropdown__close},t.createElement(Q,{onClick:f,fluid:!0,"aria-expanded":a},A))))},$e=ee;export{M as DropdownMode,$e 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  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\n  useToggle,\n  useUuid,\n} from '../..';\nimport Button from '../Button';\nimport Icon from '../Icons';\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  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.neutral500 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={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          {React.Children.map(children, (child, index) => (\n            <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n              {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n            </li>\n          ))}\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","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button","Dropdown$1"],"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  theme,\n  useHover,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useSize,\n  useToggle,\n  useUuid,\n} from '../..';\nimport Button from '../Button';\nimport Icon from '../Icons';\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  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.neutral500 : theme.palette.blueberry600}\n          svgIcon={PlusSmall}\n          className={styles.dropdown__icon}\n          isHovered={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          {React.Children.map(children, (child, index) => (\n            <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n              {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n            </li>\n          ))}\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","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button","Dropdown$1"],"mappings":"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"}

package/components/Dropdown/styles.module.scss

@@ -180,6 +180,7 @@
     background-color: $white;
     margin-top: getSpacer(2xs);
     box-shadow: 0 0 0 2px $blueberry500;
+    z-index: 1;
 
     &--open {
       display: block;

package/components/Expander/index.js

@@ -1,2 +1,2 @@
-import n,{useRef as I}from"react";import i from"classnames";import{ZIndex as A,AnalyticsId as N,IconSize as m}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{B as Z}from"../../Button.js";import{Icon as x}from"../Icons/Icon.js";import b from"../Icons/ChevronDown.js";import h from"../Icons/ChevronUp.js";import e from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/environment.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";var j=(o=>(o.small="small",o.large="large",o))(j||{});const q=o=>{const{title:_,children:$,size:r="small",color:g,svgIcon:s,expanded:k=!1,noNestedLine:z=!1,sticky:S=!1,testId:f,onExpand:w,renderChildrenWhenClosed:R=!1}=o,[t,u]=D(k,w),v=I(null),d=I(null),{isHovered:p}=O(d),{isOutsideWindow:W,isLeavingWindow:l,offsetHeight:E,contentWidth:y}=U(v,d),a=S&&t&&W,C=c=>n.createElement("span",{className:i(e.expander__icon,e[`expander__icon--${c}`])},n.createElement(x,{svgIcon:t?h:b,size:m.XSmall,isHovered:p})),B=i(e.expander__trigger,e[`expander__trigger--${r}`],r==="large"&&e[`expander__trigger--${g||"neutral"}`],r==="large"&&s&&e["expander__trigger--icon"],t&&e["expander__trigger--expanded"],a&&!l&&e["expander__trigger--sticky"],a&&l&&e["expander__trigger--absolute"]),H=()=>n.createElement("button",{type:"button",className:B,style:{zIndex:p||a?A.ExpanderTrigger:void 0,width:a&&y?`${y}px`:void 0},"aria-expanded":t,ref:d,onClick:()=>u(!t),"data-testid":f,"data-analyticsid":N.Expander},r==="small"&&C("left"),s&&n.createElement("span",{className:i(e.expander__icon,e["expander__icon--left"])},n.createElement(x,{svgIcon:s,size:m.XSmall,isHovered:p})),_,r==="large"&&C("right")),T=i(e.expander__button,t&&e["expander__button--expanded"],a&&!l&&e["expander__button--sticky"],a&&l&&e["expander__button--absolute"]),X=()=>n.createElement(Z,{variant:"borderless",className:T,"aria-expanded":t,ref:d,onClick:()=>u(!t),testId:f,"data-analyticsid":N.Expander},n.createElement(x,{svgIcon:t?h:b,size:m.XSmall}),_),L=()=>{if(!R&&!t)return null;const c=i(e.expander__content,e[`expander__content--${r}`],r==="large"&&e[`expander__content--${g||"neutral"}`],r==="large"&&s&&e["expander__content--icon"],t&&e["expander__content--expanded"],r==="small"&&!z&&e["expander__content--nested-line"]);return n.createElement("div",{className:c},$)};return n.createElement("div",{className:e.expander,ref:v,style:{paddingTop:a&&E?`${E}px`:void 0}},r==="large"?H():X(),L())},ve=q;export{j as ExpanderSize,ve as default};
+import n,{useRef as I}from"react";import i from"classnames";import{ZIndex as A,AnalyticsId as N,IconSize as m}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{B as Z}from"../../Button.js";import{Icon as x}from"../Icons/Icon.js";import b from"../Icons/ChevronDown.js";import h from"../Icons/ChevronUp.js";import e from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/environment.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/useUuid.js";import"../../uuid.js";var j=(o=>(o.small="small",o.large="large",o))(j||{});const q=o=>{const{title:_,children:$,size:r="small",color:g,svgIcon:s,expanded:k=!1,noNestedLine:z=!1,sticky:S=!1,testId:f,onExpand:w,renderChildrenWhenClosed:R=!1}=o,[t,u]=D(k,w),v=I(null),d=I(null),{isHovered:p}=O(d),{isOutsideWindow:W,isLeavingWindow:l,offsetHeight:E,contentWidth:y}=U(v,d),a=S&&t&&W,C=c=>n.createElement("span",{className:i(e.expander__icon,e[`expander__icon--${c}`])},n.createElement(x,{svgIcon:t?h:b,size:m.XSmall,isHovered:p})),B=i(e.expander__trigger,e[`expander__trigger--${r}`],r==="large"&&e[`expander__trigger--${g||"neutral"}`],r==="large"&&s&&e["expander__trigger--icon"],t&&e["expander__trigger--expanded"],a&&!l&&e["expander__trigger--sticky"],a&&l&&e["expander__trigger--absolute"]),H=()=>n.createElement("button",{type:"button",className:B,style:{zIndex:p||a?A.ExpanderTrigger:void 0,width:a&&y?`${y}px`:void 0},"aria-expanded":t,ref:d,onClick:()=>u(!t),"data-testid":f,"data-analyticsid":N.Expander},r==="small"&&C("left"),s&&n.createElement("span",{className:i(e.expander__icon,e["expander__icon--left"])},n.createElement(x,{svgIcon:s,size:m.XSmall,isHovered:p})),_,r==="large"&&C("right")),T=i(e.expander__button,t&&e["expander__button--expanded"],a&&!l&&e["expander__button--sticky"],a&&l&&e["expander__button--absolute"]),X=()=>n.createElement(Z,{variant:"borderless",className:T,"aria-expanded":t,ref:d,onClick:()=>u(!t),testId:f,"data-analyticsid":N.Expander},n.createElement(x,{svgIcon:t?h:b,size:m.XSmall}),_),L=()=>{if(!R&&!t)return null;const c=i(e.expander__content,e[`expander__content--${r}`],r==="large"&&e[`expander__content--${g||"neutral"}`],r==="large"&&s&&e["expander__content--icon"],t&&e["expander__content--expanded"],r==="small"&&!z&&e["expander__content--nested-line"]);return n.createElement("div",{className:c},$)};return n.createElement("div",{className:e.expander,ref:v,style:{paddingTop:a&&E?`${E}px`:void 0}},r==="large"?H():X(),L())},Ee=q;export{j as ExpanderSize,Ee as default};
 //# sourceMappingURL=index.js.map

package/components/Expander/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.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 '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\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\ninterface 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;\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    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          <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\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","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"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"}
+{"version":3,"file":"index.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 '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\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\ninterface 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;\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    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          <Icon svgIcon={icon} size={IconSize.XSmall} isHovered={isHovered} />\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","buttonClassName","renderButton","Button","renderContent","contentClassName","Expander$1"],"mappings":"4gCAgBY,IAAAA,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAFEA,IAAAA,GAAA,CAAA,CAAA,EAgCZ,MAAMC,EAA6CC,GAAA,CAC3C,KAAA,CACJ,MAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,QACP,MAAAC,EACA,QAASC,EACT,SAAAC,EAAW,GACX,aAAAC,EAAe,GACf,OAAAC,EAAS,GACT,OAAAC,EACA,SAAAC,EACA,yBAAAC,EAA2B,EACzB,EAAAX,EACE,CAACY,EAAYC,CAAa,EAAIC,EAAUR,EAAUI,CAAQ,EAC1DK,EAAcC,EAAuB,IAAI,EACzCC,EAAaD,EAA0B,IAAI,EAC3C,CAAE,UAAAE,CAAA,EAAcC,EAASF,CAAU,EACnC,CAAE,gBAAAG,EAAiB,gBAAAC,EAAiB,aAAAC,EAAc,aAAAC,GAAiBC,EAAUT,EAAaE,CAAU,EAEpGQ,EAAWjB,GAAUI,GAAcQ,EAEnCM,EAAiBC,GACpBC,EAAA,cAAA,OAAA,CAAK,UAAWC,EAAWC,EAAO,eAAmBA,EAAO,mBAAmBH,GAAO,CAAC,CAAA,EACrFC,EAAA,cAAAG,EAAA,CAAK,QAASnB,EAAaoB,EAAYC,EAAa,KAAMC,EAAS,OAAQ,UAAAhB,CAAA,CAAsB,CACpG,EAGIiB,EAAmBN,EACvBC,EAAO,kBACPA,EAAO,sBAAsB3B,GAAM,EACnCA,IAAS,SAAsB2B,EAAO,sBAAsB1B,GAAS,WAAW,EAChFD,IAAS,SAAsBE,GAAQyB,EAAO,yBAAyB,EACvElB,GAAckB,EAAO,6BAA6B,EAClDL,GAAY,CAACJ,GAAmBS,EAAO,2BAA2B,EAClEL,GAAYJ,GAAmBS,EAAO,6BAA6B,CAAA,EAG/DM,EAAgB,IACpBR,EAAA,cAAC,SAAA,CACC,KAAK,SACL,UAAWO,EACX,MAAO,CACL,OAAQjB,GAAaO,EAAWY,EAAO,gBAAkB,OACzD,MAAOZ,GAAYF,EAAe,GAAGA,MAAmB,MAC1D,EACA,gBAAeX,EACf,IAAKK,EACL,QAAS,IAAMJ,EAAc,CAACD,CAAU,EACxC,cAAaH,EACb,mBAAkB6B,EAAY,QAAA,EAE7BnC,IAAS,SAAsBuB,EAAc,MAAM,EACnDrB,mBACE,OAAK,CAAA,UAAWwB,EAAWC,EAAO,eAAmBA,EAAO,sBAAsB,CAAC,CAClF,EAAAF,EAAA,cAACG,GAAK,QAAS1B,EAAM,KAAM6B,EAAS,OAAQ,UAAAhB,CAAsB,CAAA,CACpE,EAEDjB,EACAE,IAAS,SAAsBuB,EAAc,OAAO,CAAA,EAInDa,EAAkBV,EACtBC,EAAO,iBACPlB,GAAckB,EAAO,4BAA4B,EACjDL,GAAY,CAACJ,GAAmBS,EAAO,0BAA0B,EACjEL,GAAYJ,GAAmBS,EAAO,4BAA4B,CAAA,EAG9DU,EAAe,IACnBZ,EAAA,cAACa,EAAA,CACC,QAAQ,aACR,UAAWF,EACX,gBAAe3B,EACf,IAAKK,EACL,QAAS,IAAMJ,EAAc,CAACD,CAAU,EACxC,OAAAH,EACA,mBAAkB6B,EAAY,QAAA,EAE9BV,EAAA,cAACG,GAAK,QAASnB,EAAaoB,EAAYC,EAAa,KAAMC,EAAS,MAAQ,CAAA,EAC3EjC,CAAA,EAICyC,EAAgB,IAAM,CACtB,GAAA,CAAC/B,GAA4B,CAACC,EACzB,OAAA,KAGT,MAAM+B,EAAmBd,EACvBC,EAAO,kBACPA,EAAO,sBAAsB3B,GAAM,EACnCA,IAAS,SAAsB2B,EAAO,sBAAsB1B,GAAS,WAAW,EAChFD,IAAS,SAAsBE,GAAQyB,EAAO,yBAAyB,EACvElB,GAAckB,EAAO,6BAA6B,EAClD3B,IAAS,SAAsB,CAACI,GAAgBuB,EAAO,gCAAgC,CAAA,EAGzF,OAAQF,EAAA,cAAA,MAAA,CAAI,UAAWe,CAAA,EAAmBzC,CAAS,CAAA,EAInD,OAAA0B,EAAA,cAAC,MAAA,CACC,UAAWE,EAAO,SAClB,IAAKf,EACL,MAAO,CAAE,WAAYU,GAAYH,EAAe,GAAGA,MAAmB,MAAU,CAAA,EAE/EnB,IAAS,QAAqBiC,EAAc,EAAII,EAAa,EAC7DE,EAAc,CAAA,CAGrB,EAEAE,GAAe7C"}

package/components/ExpanderHierarchy/ExpanderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderButton.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,UAAU,mBAAoB,SAAQ,4BAA4B;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0CjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"ExpanderButton.d.ts","sourceRoot":"","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAOpE,UAAU,mBAAoB,SAAQ,4BAA4B;IAChE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8CjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/components/ExpanderHierarchy/expander.module.scss

@@ -46,18 +46,11 @@
     &[aria-expanded='true'] {
       background-color: $neutral100;
       border-bottom: none;
-
-      + #{$item}__content {
-        display: block;
-      }
     }
 
     @media print {
       &--print {
         background-color: $neutral100;
-        + #{$item}__content {
-          display: block;
-        }
       }
     }
 
@@ -88,6 +81,20 @@
     &--4-and-lower {
       @include title5;
     }
+
+    &--expanded {
+      + #{$item}__content {
+        display: block;
+      }
+    }
+
+    @media print {
+      &--print {
+        + #{$item}__content {
+          display: block;
+        }
+      }
+    }
   }
 
   &__content {

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

@@ -15,6 +15,8 @@ export type Styles = {
   'expander__title--2': string;
   'expander__title--3': string;
   'expander__title--4-and-lower': string;
+  'expander__title--expanded': string;
+  'expander__title--print': string;
   'fade-in': string;
 };
 

package/components/ExpanderHierarchy/index.js

@@ -1,2 +1,2 @@
-import n from"react";import i from"classnames";import{AnalyticsId as l,IconSize as $}from"../../constants.js";import{useExpand as b}from"../../hooks/useExpand.js";import{useHover as g}from"../../hooks/useHover.js";import{Icon as I}from"../Icons/Icon.js";import k from"../Icons/ChevronDown.js";import z from"../Icons/ChevronUp.js";import t from"./expander.module.scss";import{isComponent as _}from"../../utils/component.js";import h from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const B=({htmlMarkup:a="h2",level:e=1,print:r,expanded:c,onExpand:d,children:p,testId:o})=>{const{hoverRef:m,isHovered:x}=g(),[s,f]=b(c,d),y=()=>{f(!s)},C=a,w=i(t.expander__button,e>1&&t["expander__button--2-and-lower"],r&&t["expander__button--print"]),H=i(t.expander__title,e<=3&&t[`expander__title--${e}`],e>3&&t["expander__title--4-and-lower"]),N=i(t.expander__icon,e>1&&t["expander__icon--2-and-lower"],e>2&&t["expander__icon--3-and-lower"]);return n.createElement("button",{type:"button",onClick:y,className:w,"aria-expanded":s,ref:m,"data-testid":o,"data-analyticsid":l.ExpanderHierarchyExpander},n.createElement(C,{className:H},p),n.createElement(I,{svgIcon:s?z:k,isHovered:x,className:N,size:$.XSmall}))},R=B,S=a=>{switch(a){case"h2":return"h3";case"h3":return"h4";case"h4":return"h5";case"h5":return"h6";case"h6":return"h6";default:return"h2"}},T=({title:a,htmlMarkup:e="h2",level:r=1,print:c,expanded:d=!1,onExpand:p,children:o,testId:m})=>{const x=i(t.expander__content,r<=2&&t[`expander__content--${r}`],r>2&&t["expander__content--3-and-lower"]);return n.createElement("li",{className:t.expander},n.createElement(R,{htmlMarkup:e,level:r,print:c,expanded:d,onExpand:p,testId:m},a),n.createElement("div",{className:x},n.Children.map(o,s=>_(s,A)?n.cloneElement(s,{htmlMarkup:S(e),level:r+1,print:c}):s)))},u=T,E=({htmlMarkup:a="h2",level:e=1,print:r,children:c,testId:d})=>{const p=i(h.expanderhierarchy,h[`expanderhierarchy--${e}`],e>2&&h["expanderhierarchy--3-and-lower"]);return n.createElement("ul",{className:p,"data-testid":d,"data-analyticsid":l.ExpanderHierarchy},n.Children.map(c,o=>_(o,u)?n.cloneElement(o,{htmlMarkup:a,level:e,print:r}):o))};E.Expander=u;const A=E;export{A as default};
+import n from"react";import i from"classnames";import{AnalyticsId as _,IconSize as $}from"../../constants.js";import{useExpand as b}from"../../hooks/useExpand.js";import{useHover as g}from"../../hooks/useHover.js";import{Icon as I}from"../Icons/Icon.js";import k from"../Icons/ChevronDown.js";import z from"../Icons/ChevronUp.js";import e from"./expander.module.scss";import{isComponent as h}from"../../utils/component.js";import l from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";const B=({htmlMarkup:o="h2",level:t=1,print:r,expanded:c,onExpand:d,children:p,testId:s})=>{const{hoverRef:m,isHovered:x}=g(),[a,f]=b(c,d),y=()=>{f(!a)},C=o,w=i(e.expander__button,t>1&&e["expander__button--2-and-lower"],r&&e["expander__button--print"]),H=i(e.expander__title,t<=3&&e[`expander__title--${t}`],t>3&&e["expander__title--4-and-lower"],a&&e["expander__title--expanded"],r&&e["expander__title--print"]),N=i(e.expander__icon,t>1&&e["expander__icon--2-and-lower"],t>2&&e["expander__icon--3-and-lower"]);return n.createElement(C,{className:H},n.createElement("button",{type:"button",onClick:y,className:w,"aria-expanded":a,ref:m,"data-testid":s,"data-analyticsid":_.ExpanderHierarchyExpander},p,n.createElement(I,{svgIcon:a?z:k,isHovered:x,className:N,size:$.XSmall})))},R=B,S=o=>{switch(o){case"h2":return"h3";case"h3":return"h4";case"h4":return"h5";case"h5":return"h6";case"h6":return"h6";default:return"h2"}},T=({title:o,htmlMarkup:t="h2",level:r=1,print:c,expanded:d=!1,onExpand:p,children:s,testId:m})=>{const x=i(e.expander__content,r<=2&&e[`expander__content--${r}`],r>2&&e["expander__content--3-and-lower"]);return n.createElement("li",{className:e.expander},n.createElement(R,{htmlMarkup:t,level:r,print:c,expanded:d,onExpand:p,testId:m},o),n.createElement("div",{className:x},n.Children.map(s,a=>h(a,A)?n.cloneElement(a,{htmlMarkup:S(t),level:r+1,print:c}):a)))},u=T,E=({htmlMarkup:o="h2",level:t=1,print:r,children:c,testId:d})=>{const p=i(l.expanderhierarchy,l[`expanderhierarchy--${t}`],t>2&&l["expanderhierarchy--3-and-lower"]);return n.createElement("ul",{className:p,"data-testid":d,"data-analyticsid":_.ExpanderHierarchy},n.Children.map(c,s=>h(s,u)?n.cloneElement(s,{htmlMarkup:o,level:t,print:r}):s))};E.Expander=u;const A=E;export{A as default};
 //# sourceMappingURL=index.js.map

package/components/ExpanderHierarchy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    level <= 3 && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`]\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      className={buttonClasses}\n      aria-expanded={isExpanded}\n      ref={hoverRef}\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n    >\n      <CustomTag className={titleClasses}>{children}</CustomTag>\n      <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n    </button>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy, { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nexport type ExpanderType = React.FC<ExpanderProps>;\n\nconst Expander: ExpanderType = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    level <= 2 && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={styles.expander}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Expander, { ExpanderProps, ExpanderType } from './Expander';\nimport { HeadingTags } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n"],"names":["ExpanderButton","htmlMarkup","level","print","expanded","onExpand","children","testId","hoverRef","isHovered","useHover","isExpanded","setIsExpanded","useExpand","handleClick","CustomTag","buttonClasses","classNames","styles","titleClasses","iconClasses","React","AnalyticsId","Icon","ChevronUp","ChevronDown","IconSize","ExpanderButton$1","getHeadingTag","Expander","title","contentClasses","isComponent","child","ExpanderHierarchy","Expander$1","listClasses","ExpanderHierarchy$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { useHover } from '../../hooks/useHover';\nimport { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { hoverRef, isHovered } = useHover<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    level <= 3 && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={hoverRef}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy, { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n}\n\nexport type ExpanderType = React.FC<ExpanderProps>;\n\nconst Expander: ExpanderType = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    level <= 2 && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={styles.expander}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Expander, { ExpanderProps, ExpanderType } from './Expander';\nimport { HeadingTags } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n"],"names":["ExpanderButton","htmlMarkup","level","print","expanded","onExpand","children","testId","hoverRef","isHovered","useHover","isExpanded","setIsExpanded","useExpand","handleClick","CustomTag","buttonClasses","classNames","styles","titleClasses","iconClasses","React","AnalyticsId","Icon","ChevronUp","ChevronDown","IconSize","ExpanderButton$1","getHeadingTag","Expander","title","contentClasses","isComponent","child","ExpanderHierarchy","Expander$1","listClasses","ExpanderHierarchy$1"],"mappings":"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"}

package/components/ExpanderList/index.js

@@ -1,2 +1,2 @@
-import r,{useRef as O,useState as U,useEffect as A}from"react";import k from"classnames";import{AnalyticsId as D,ZIndex as M}from"../../constants.js";import{useExpand as P}from"../../hooks/useExpand.js";import{useHover as Z}from"../../hooks/useHover.js";import{useSticky as q}from"../../hooks/useSticky.js";import{useUuid as F}from"../../hooks/useUuid.js";import{mergeRefs as G}from"../../utils/refs.js";import{isElementInViewport as K}from"../../utils/viewport.js";import Q from"../Icons/ChevronDown.js";import X from"../Icons/ChevronUp.js";import{r as Y}from"../../ListHeader.js";import i from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Icon.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";const V=r.forwardRef((l,h)=>{const{id:p,children:L,padding:I=!0,color:x="neutral",className:N="",icon:w,large:g=!1,title:a,titleHtmlMarkup:$="span",expanded:R=!1,sticky:b,testId:H,handleExpanderClick:W,onExpand:m,renderChildrenWhenClosed:f,variant:s="line"}=l,[o]=P(R,m),u=O(null),E=O(null),{isHovered:y}=Z(E),{isOutsideWindow:T,isLeavingWindow:_,offsetHeight:c,contentWidth:n}=q(u,E),e=b&&o&&T,t=typeof a=="object",d=k(N,{[i["expander-list__item--"+s]]:s,[i["expander-list__item--jsx"]]:t}),C=k(i["expander-list-link"],i[`expander-list-link--${x}`],{[i["expander-list-link--fill"]]:s==="fill",[i["expander-list-link--closed"]]:!o,[i["expander-list-link--large"]]:g,[i["expander-list-link--jsx"]]:t,[i["expander-list-link--sticky"]]:e&&!_,[i["expander-list-link--absolute"]]:e&&_}),j=()=>{if(!f&&!o)return null;const J=k(i["expander-list-link__main-content"],o&&i["expander-list-link__main-content--expanded"],I?i["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},L)};return r.createElement("li",{className:d,ref:G([h,u]),style:{paddingTop:e&&c?`${c}px`:void 0}},r.createElement("button",{type:"button",id:p,onClick:W,"data-testid":H,"data-analyticsid":D.ExpanderListExpander,className:C,ref:E,"aria-expanded":o,style:{zIndex:y||e?M.ExpanderTrigger:void 0,width:e&&n?`${n}px`:void 0}},Y(a,$,y,g?"large":"medium",o?X:Q,w)),j())}),z=l=>r.isValidElement(l)&&l.type===V,B=r.forwardRef((l,h)=>{const{children:p,childPadding:L=!0,large:I,isOpen:x=!1,renderChildrenWhenClosed:N=!1,color:w,className:g="",accordion:a=!1,topBorder:$=!0,bottomBorder:R=!0,sticky:b=!1,testId:H,variant:W}=l,[m,f]=U(),[s,o]=U(),u=F(),E=r.Children.count(p),y=k(i["expander-list"],g);function T(n,e){f(t=>a?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),o(n.currentTarget)}const _=n=>k(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&$,[i["expander-list__item--no-bottom"]]:n===E-1&&!R}),c=n=>`${u}-${n}`;return A(()=>{a&&s&&!K(s)&&s.scrollIntoView()},[a,s]),A(()=>{if(x){const n=c(0);f(e=>a?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[x]),A(()=>{var n;if(!x){const e=(n=r.Children.map(p,t=>{if(z(t))return t}))==null?void 0:n.reduce((t,d,C)=>(typeof d.props.expanded<"u"&&(t[c(C)]=d.props.expanded),t),{});f({...m,...e})}},[p]),r.createElement("ul",{className:y,ref:h,"data-testid":H,"data-analyticsid":D.ExpanderList},r.Children.map(p,(n,e)=>{if(z(n)){const t=c(e),d=m==null?void 0:m[t],C=_(e);return r.cloneElement(n,{id:t,key:e,expanded:d,padding:L,color:w,large:I,sticky:b,"aria-expanded":d,className:C,handleExpanderClick:j=>T(j,`${u}-${e}`),renderChildrenWhenClosed:N,variant:W})}return n}))});B.displayName="ExpanderList";B.Expander=V;V.displayName="ExpanderList.Expander";const Oe=B;export{B as ExpanderList,Oe as default};
+import r,{useRef as O,useState as U,useEffect as A}from"react";import k from"classnames";import{AnalyticsId as D,ZIndex as M}from"../../constants.js";import{useExpand as P}from"../../hooks/useExpand.js";import{useHover as Z}from"../../hooks/useHover.js";import{useSticky as q}from"../../hooks/useSticky.js";import{useUuid as F}from"../../hooks/useUuid.js";import{mergeRefs as G}from"../../utils/refs.js";import{isElementInViewport as K}from"../../utils/viewport.js";import Q from"../Icons/ChevronDown.js";import X from"../Icons/ChevronUp.js";import{r as Y}from"../../ListHeader.js";import i from"./styles.module.scss";import"../../hooks/usePrevious.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Icon.js";import"../../ListHeaderText.js";import"../../StatusDot.js";import"../../theme/grid.js";import"../../hooks/useBreakpoint.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../ListHeader/styles.module.scss";import"../../utils/component.js";import"../../Avatar.js";import"../Icons/Check.js";import"../Avatar/styles.module.scss";import"../../Badge.js";import"../Badge/styles.module.scss";const V=r.forwardRef((l,h)=>{const{id:p,children:L,padding:I=!0,color:x="neutral",className:N="",icon:w,large:g=!1,title:a,titleHtmlMarkup:$="span",expanded:R=!1,sticky:b,testId:H,handleExpanderClick:W,onExpand:m,renderChildrenWhenClosed:f,variant:s="line"}=l,[o]=P(R,m),u=O(null),E=O(null),{isHovered:y}=Z(E),{isOutsideWindow:T,isLeavingWindow:_,offsetHeight:c,contentWidth:n}=q(u,E),e=b&&o&&T,t=typeof a=="object",d=k(N,{[i["expander-list__item--"+s]]:s,[i["expander-list__item--jsx"]]:t}),C=k(i["expander-list-link"],i[`expander-list-link--${x}`],{[i["expander-list-link--fill"]]:s==="fill",[i["expander-list-link--closed"]]:!o,[i["expander-list-link--large"]]:g,[i["expander-list-link--jsx"]]:t,[i["expander-list-link--sticky"]]:e&&!_,[i["expander-list-link--absolute"]]:e&&_}),j=()=>{if(!f&&!o)return null;const J=k(i["expander-list-link__main-content"],o&&i["expander-list-link__main-content--expanded"],I?i["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},L)};return r.createElement("li",{className:d,ref:G([h,u]),style:{paddingTop:e&&c?`${c}px`:void 0}},r.createElement("button",{type:"button",id:p,onClick:W,"data-testid":H,"data-analyticsid":D.ExpanderListExpander,className:C,ref:E,"aria-expanded":o,style:{zIndex:y||e?M.ExpanderTrigger:void 0,width:e&&n?`${n}px`:void 0}},Y(a,$,y,g?"large":"medium",o?X:Q,w)),j())}),z=l=>r.isValidElement(l)&&l.type===V,B=r.forwardRef((l,h)=>{const{children:p,childPadding:L=!0,large:I,isOpen:x=!1,renderChildrenWhenClosed:N=!1,color:w,className:g="",accordion:a=!1,topBorder:$=!0,bottomBorder:R=!0,sticky:b=!1,testId:H,variant:W}=l,[m,f]=U(),[s,o]=U(),u=F(),E=r.Children.count(p),y=k(i["expander-list"],g);function T(n,e){f(t=>a?{[e]:!(t!=null&&t[e])}:{...t,[e]:!(t!=null&&t[e])}),o(n.currentTarget)}const _=n=>k(i["expander-list__item"],{[i["expander-list__item--top"]]:n===0&&$,[i["expander-list__item--no-bottom"]]:n===E-1&&!R}),c=n=>`${u}-${n}`;return A(()=>{a&&s&&!K(s)&&s.scrollIntoView()},[a,s]),A(()=>{if(x){const n=c(0);f(e=>a?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[x]),A(()=>{var n;if(!x){const e=(n=r.Children.map(p,t=>{if(z(t))return t}))==null?void 0:n.reduce((t,d,C)=>(typeof d.props.expanded<"u"&&(t[c(C)]=d.props.expanded),t),{});f({...m,...e})}},[p]),r.createElement("ul",{className:y,ref:h,"data-testid":H,"data-analyticsid":D.ExpanderList},r.Children.map(p,(n,e)=>{if(z(n)){const t=c(e),d=m==null?void 0:m[t],C=_(e);return r.cloneElement(n,{id:t,key:e,expanded:d,padding:L,color:w,large:I,sticky:b,"aria-expanded":d,className:C,handleExpanderClick:j=>T(j,`${u}-${e}`),renderChildrenWhenClosed:N,variant:W})}return n}))});B.displayName="ExpanderList";B.Expander=V;V.displayName="ExpanderList.Expander";const Ue=B;export{B as ExpanderList,Ue as default};
 //# sourceMappingURL=index.js.map

package/components/ExpanderList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } 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 { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = PaletteNames;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  bottomBorder?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Opens the first item in the list. */\n  /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */\n  isOpen?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  topBorder?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    sticky,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n  const isJsxTitle = typeof title === 'object';\n\n  const itemClasses = classNames(className, {\n    [expanderListStyles['expander-list__item--' + variant]]: variant,\n    [expanderListStyles['expander-list__item--jsx']]: isJsxTitle,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles['expander-list-link--fill']]: variant === 'fill',\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles['expander-list-link--jsx']]: isJsxTitle,\n    [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n    [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\n  });\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li\n      className={itemClasses}\n      ref={mergeRefs([ref, expanderRef])}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n          width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n        }}\n      >\n        {renderListHeader(title, titleHtmlMarkup, isHovered, large ? 'large' : 'medium', isExpanded ? ChevronUp : ChevronDown, icon)}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    isOpen = false,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    topBorder = true,\n    bottomBorder = true,\n    sticky = false,\n    testId,\n    variant,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const childCount = React.Children.count(children);\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  /** Returns the class modifier top when we want to show the top border and no-bottom when we don't want to show the bottom border */\n  const getExpanderItemClass = (index: number) => {\n    return classNames(expanderListStyles['expander-list__item'], {\n      [expanderListStyles['expander-list__item--top']]: index === 0 && topBorder,\n      [expanderListStyles['expander-list__item--no-bottom']]: index === childCount - 1 && !bottomBorder,\n    });\n  };\n\n  const getExpanderId = (index: number) => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    if (isOpen) {\n      const id = getExpanderId(0);\n      setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      const newActiveExpander = React.Children.map(children, child => {\n        if (isExpanderComponent(child)) {\n          return child;\n        }\n      })?.reduce((acc, child, index) => {\n        // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n        if (typeof child.props.expanded !== 'undefined') {\n          acc[getExpanderId(index)] = child.props.expanded;\n        }\n        return acc;\n      }, {} as ActiveExpander);\n\n      setActiveExpander({ ...activeExpander, ...newActiveExpander });\n    }\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n          const expanderItemClass = getExpanderItemClass(index);\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            sticky,\n            'aria-expanded': expanded,\n            className: expanderItemClass,\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","titleHtmlMarkup","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","useEffect","isElementInViewport","newActiveExpander","_a","child","acc","expanderItemClass","ExpanderList$1"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } 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 { useUuid } from '../../hooks/useUuid';\nimport { PaletteNames } from '../../theme/palette';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport { ListHeaderType, renderListHeader } from '../ListHeader/ListHeader';\nimport { TitleTags } from '../Title';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = PaletteNames;\nexport interface ExpanderType extends React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>> {\n  ListHeader?: ListHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  bottomBorder?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the link list background color on hover. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Opens the first item in the list. */\n  /** @deprecated Skal fases ut til fordel for å bruke expanded-prop på første ExpanderList.Expander */\n  isOpen?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** @deprecated Skal fases ut - Brukes ikke lenger. */\n  topBorder?: boolean;\n  /** Stick expander trigger to top of screen while scrolling down */\n  sticky?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: JSX.Element | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'sticky' | 'variant'>;\n\nconst Expander: ExpanderType = React.forwardRef<HTMLLIElement, ExpanderProps>((props, ref) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    sticky,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n  const isJsxTitle = typeof title === 'object';\n\n  const itemClasses = classNames(className, {\n    [expanderListStyles['expander-list__item--' + variant]]: variant,\n    [expanderListStyles['expander-list__item--jsx']]: isJsxTitle,\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles['expander-list-link--fill']]: variant === 'fill',\n    [expanderListStyles['expander-list-link--closed']]: !isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles['expander-list-link--jsx']]: isJsxTitle,\n    [expanderListStyles['expander-list-link--sticky']]: isSticky && !isLeavingWindow,\n    [expanderListStyles['expander-list-link--absolute']]: isSticky && isLeavingWindow,\n  });\n\n  const renderContent = () => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(\n      expanderListStyles['expander-list-link__main-content'],\n      isExpanded && expanderListStyles['expander-list-link__main-content--expanded'],\n      padding ? expanderListStyles['expander-list-link__main-content--padding'] : ''\n    );\n\n    return <div className={mainContentClasses}>{children}</div>;\n  };\n\n  return (\n    <li\n      className={itemClasses}\n      ref={mergeRefs([ref, expanderRef])}\n      style={{ paddingTop: isSticky && offsetHeight ? `${offsetHeight}px` : undefined }}\n    >\n      <button\n        type=\"button\"\n        id={id}\n        onClick={handleExpanderClick}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderListExpander}\n        className={expanderClasses}\n        ref={triggerRef}\n        aria-expanded={isExpanded}\n        style={{\n          zIndex: isHovered || isSticky ? ZIndex.ExpanderTrigger : undefined,\n          width: isSticky && contentWidth ? `${contentWidth}px` : undefined,\n        }}\n      >\n        {renderListHeader(title, titleHtmlMarkup, isHovered, large ? 'large' : 'medium', isExpanded ? ChevronUp : ChevronDown, icon)}\n      </button>\n      {renderContent()}\n    </li>\n  );\n});\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: {} | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nexport const ExpanderList = React.forwardRef((props: ExpanderListProps, ref: React.Ref<HTMLUListElement>) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    isOpen = false,\n    renderChildrenWhenClosed = false,\n    color,\n    className = '',\n    accordion = false,\n    topBorder = true,\n    bottomBorder = true,\n    sticky = false,\n    testId,\n    variant,\n  } = props;\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const uuid = useUuid();\n  const childCount = React.Children.count(children);\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className);\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  /** Returns the class modifier top when we want to show the top border and no-bottom when we don't want to show the bottom border */\n  const getExpanderItemClass = (index: number) => {\n    return classNames(expanderListStyles['expander-list__item'], {\n      [expanderListStyles['expander-list__item--top']]: index === 0 && topBorder,\n      [expanderListStyles['expander-list__item--no-bottom']]: index === childCount - 1 && !bottomBorder,\n    });\n  };\n\n  const getExpanderId = (index: number) => `${uuid}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  useEffect(() => {\n    if (isOpen) {\n      const id = getExpanderId(0);\n      setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      const newActiveExpander = React.Children.map(children, child => {\n        if (isExpanderComponent(child)) {\n          return child;\n        }\n      })?.reduce((acc, child, index) => {\n        // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n        if (typeof child.props.expanded !== 'undefined') {\n          acc[getExpanderId(index)] = child.props.expanded;\n        }\n        return acc;\n      }, {} as ActiveExpander);\n\n      setActiveExpander({ ...activeExpander, ...newActiveExpander });\n    }\n  }, [children]);\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n          const expanderItemClass = getExpanderItemClass(index);\n\n          return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n            id,\n            key: index,\n            expanded,\n            padding: childPadding,\n            color,\n            large,\n            sticky,\n            'aria-expanded': expanded,\n            className: expanderItemClass,\n            handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => handleExpanderClick(event, `${uuid}-${index}`),\n            renderChildrenWhenClosed,\n            variant,\n          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["Expander","React","props","ref","id","children","padding","color","className","icon","large","title","titleHtmlMarkup","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","variant","isExpanded","useExpand","expanderRef","useRef","triggerRef","isHovered","useHover","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","renderListHeader","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","useState","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","useEffect","isElementInViewport","newActiveExpander","_a","child","acc","expanderItemClass","ExpanderList$1"],"mappings":"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"}

package/components/FormExample/index.js

@@ -1,4 +1,4 @@
-import f from"react";import{isTest as xt}from"../../utils/environment.js";import{B as pt}from"../../Button.js";import{C as te}from"../../Checkbox.js";import{F as X}from"../../FormGroup.js";import{F as kt,a as Et}from"../../FormLayout.js";import Ge from"../Icons/Hospital.js";import{I as me}from"../../Input.js";import{L}from"../../Label.js";import{R as he}from"../../RadioButton.js";import{S as Ke}from"../../Select.js";import{T as je}from"../../Textarea.js";import{V as Vt}from"../../Validation.js";import be from"./styles.module.scss";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../utils/refs.js";import"../Icons/Check.js";import"../Checkbox/styles.module.scss";import"../../utils/component.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../FormGroup/styles.module.scss";import"../FormLayout/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../RadioButton/styles.module.scss";import"../Icons/ChevronDown.js";import"../Select/styles.module.scss";import"../Textarea/styles.module.scss";import"../Validation/styles.module.scss";var ge=e=>e.type==="checkbox",ne=e=>e instanceof Date,I=e=>e==null;const it=e=>typeof e=="object";var O=e=>!I(e)&&!Array.isArray(e)&&it(e)&&!ne(e),_t=e=>O(e)&&e.target?ge(e.target)?e.target.checked:e.target.value:e,At=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,Dt=(e,l)=>e.has(At(l)),St=e=>{const l=e.constructor&&e.constructor.prototype;return O(l)&&l.hasOwnProperty("isPrototypeOf")},Me=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function re(e){let l;const i=Array.isArray(e);if(e instanceof Date)l=new Date(e);else if(e instanceof Set)l=new Set(e);else if(!(Me&&(e instanceof Blob||e instanceof FileList))&&(i||O(e)))if(l=i?[]:{},!Array.isArray(e)&&!St(e))l=e;else for(const r in e)l[r]=re(e[r]);else return e;return l}var ve=e=>Array.isArray(e)?e.filter(Boolean):[],F=e=>e===void 0,y=(e,l,i)=>{if(!l||!O(e))return i;const r=ve(l.split(/[,[\].]+?/)).reduce((s,o)=>I(s)?s:s[o],e);return F(r)||r===e?F(e[l])?i:e[l]:r};const ze={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},G={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},Q={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};f.createContext(null);var wt=(e,l,i,r=!0)=>{const s={defaultValues:l._defaultValues};for(const o in e)Object.defineProperty(s,o,{get:()=>{const c=o;return l._proxyFormState[c]!==G.all&&(l._proxyFormState[c]=!r||G.all),i&&(i[c]=!0),e[c]}});return s},P=e=>O(e)&&!Object.keys(e).length,Tt=(e,l,i,r)=>{i(e);const{name:s,...o}=e;return P(o)||Object.keys(o).length>=Object.keys(l).length||Object.keys(o).find(c=>l[c]===(!r||G.all))},we=e=>Array.isArray(e)?e:[e];function Ft(e){const l=f.useRef(e);l.current=e,f.useEffect(()=>{const i=!e.disabled&&l.current.subject&&l.current.subject.subscribe({next:l.current.next});return()=>{i&&i.unsubscribe()}},[e.disabled])}var j=e=>typeof e=="string",Lt=(e,l,i,r,s)=>j(e)?(r&&l.watch.add(e),y(i,e,s)):Array.isArray(e)?e.map(o=>(r&&l.watch.add(o),y(i,o))):(r&&(l.watchAll=!0),i),Re=e=>/^\w*$/.test(e),st=e=>ve(e.replace(/["|']|\]/g,"").split(/\.|\[/));function _(e,l,i){let r=-1;const s=Re(l)?[l]:st(l),o=s.length,c=o-1;for(;++r<o;){const b=s[r];let k=i;if(r!==c){const M=e[b];k=O(M)||Array.isArray(M)?M:isNaN(+s[r+1])?{}:[]}e[b]=k,e=e[b]}return e}var Ot=(e,l,i,r,s)=>l?{...i[e],types:{...i[e]&&i[e].types?i[e].types:{},[r]:s||!0}}:{};const Ce=(e,l,i)=>{for(const r of i||Object.keys(e)){const s=y(e,r);if(s){const{_f:o,...c}=s;if(o&&l(o.name)){if(o.ref.focus){o.ref.focus();break}else if(o.refs&&o.refs[0].focus){o.refs[0].focus();break}}else O(c)&&Ce(c,l)}}};var Je=e=>({isOnSubmit:!e||e===G.onSubmit,isOnBlur:e===G.onBlur,isOnChange:e===G.onChange,isOnAll:e===G.all,isOnTouch:e===G.onTouched}),Qe=(e,l,i)=>!i&&(l.watchAll||l.watch.has(e)||[...l.watch].some(r=>e.startsWith(r)&&/^\.\w+/.test(e.slice(r.length)))),Ct=(e,l,i)=>{const r=ve(y(e,i));return _(r,"root",l[i]),_(e,i,r),e},oe=e=>typeof e=="boolean",Ie=e=>e.type==="file",Y=e=>typeof e=="function",pe=e=>{if(!Me)return!1;const l=e?e.ownerDocument:0;return e instanceof(l&&l.defaultView?l.defaultView.HTMLElement:HTMLElement)},xe=e=>j(e),Ne=e=>e.type==="radio",ke=e=>e instanceof RegExp;const Xe={value:!1,isValid:!1},Ye={value:!0,isValid:!0};var lt=e=>{if(Array.isArray(e)){if(e.length>1){const l=e.filter(i=>i&&i.checked&&!i.disabled).map(i=>i.value);return{value:l,isValid:!!l.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!F(e[0].attributes.value)?F(e[0].value)||e[0].value===""?Ye:{value:e[0].value,isValid:!0}:Ye:Xe}return Xe};const Ze={isValid:!1,value:null};var at=e=>Array.isArray(e)?e.reduce((l,i)=>i&&i.checked&&!i.disabled?{isValid:!0,value:i.value}:l,Ze):Ze;function et(e,l,i="validate"){if(xe(e)||Array.isArray(e)&&e.every(xe)||oe(e)&&!e)return{type:i,message:xe(e)?e:"",ref:l}}var ae=e=>O(e)&&!ke(e)?e:{value:e,message:""},tt=async(e,l,i,r,s)=>{const{ref:o,refs:c,required:b,maxLength:k,minLength:M,min:H,max:A,pattern:p,validate:$,name:N,valueAsNumber:ue,mount:se,disabled:ce}=e._f,v=y(l,N);if(!se||ce)return{};const q=c?c[0]:o,B=E=>{r&&q.reportValidity&&(q.setCustomValidity(oe(E)?"":E||""),q.reportValidity())},S={},Z=Ne(o),ee=ge(o),de=Z||ee,U=(ue||Ie(o))&&F(o.value)&&F(v)||pe(o)&&o.value===""||v===""||Array.isArray(v)&&!v.length,K=Ot.bind(null,N,i,S),W=(E,x,h,V=Q.maxLength,T=Q.minLength)=>{const R=E?x:h;S[N]={type:E?V:T,message:R,ref:o,...K(E?V:T,R)}};if(s?!Array.isArray(v)||!v.length:b&&(!de&&(U||I(v))||oe(v)&&!v||ee&&!lt(c).isValid||Z&&!at(c).isValid)){const{value:E,message:x}=xe(b)?{value:!!b,message:b}:ae(b);if(E&&(S[N]={type:Q.required,message:x,ref:q,...K(Q.required,x)},!i))return B(x),S}if(!U&&(!I(H)||!I(A))){let E,x;const h=ae(A),V=ae(H);if(!I(v)&&!isNaN(v)){const T=o.valueAsNumber||v&&+v;I(h.value)||(E=T>h.value),I(V.value)||(x=T<V.value)}else{const T=o.valueAsDate||new Date(v),R=fe=>new Date(new Date().toDateString()+" "+fe),z=o.type=="time",J=o.type=="week";j(h.value)&&v&&(E=z?R(v)>R(h.value):J?v>h.value:T>new Date(h.value)),j(V.value)&&v&&(x=z?R(v)<R(V.value):J?v<V.value:T<new Date(V.value))}if((E||x)&&(W(!!E,h.message,V.message,Q.max,Q.min),!i))return B(S[N].message),S}if((k||M)&&!U&&(j(v)||s&&Array.isArray(v))){const E=ae(k),x=ae(M),h=!I(E.value)&&v.length>+E.value,V=!I(x.value)&&v.length<+x.value;if((h||V)&&(W(h,E.message,x.message),!i))return B(S[N].message),S}if(p&&!U&&j(v)){const{value:E,message:x}=ae(p);if(ke(E)&&!v.match(E)&&(S[N]={type:Q.pattern,message:x,ref:o,...K(Q.pattern,x)},!i))return B(x),S}if($){if(Y($)){const E=await $(v,l),x=et(E,q);if(x&&(S[N]={...x,...K(Q.validate,x.message)},!i))return B(x.message),S}else if(O($)){let E={};for(const x in $){if(!P(E)&&!i)break;const h=et(await $[x](v,l),q,x);h&&(E={...h,...K(x,h.message)},B(h.message),i&&(S[N]=E))}if(!P(E)&&(S[N]={ref:q,...E},!i))return S}}return B(!0),S};function Mt(e,l){const i=l.slice(0,-1).length;let r=0;for(;r<i;)e=F(e)?r++:e[l[r++]];return e}function Rt(e){for(const l in e)if(!F(e[l]))return!1;return!0}function C(e,l){const i=Array.isArray(l)?l:Re(l)?[l]:st(l),r=i.length===1?e:Mt(e,i),s=i.length-1,o=i[s];return r&&delete r[o],s!==0&&(O(r)&&P(r)||Array.isArray(r)&&Rt(r))&&C(e,i.slice(0,-1)),e}function Te(){let e=[];return{get observers(){return e},next:s=>{for(const o of e)o.next&&o.next(s)},subscribe:s=>(e.push(s),{unsubscribe:()=>{e=e.filter(o=>o!==s)}}),unsubscribe:()=>{e=[]}}}var Ee=e=>I(e)||!it(e);function ie(e,l){if(Ee(e)||Ee(l))return e===l;if(ne(e)&&ne(l))return e.getTime()===l.getTime();const i=Object.keys(e),r=Object.keys(l);if(i.length!==r.length)return!1;for(const s of i){const o=e[s];if(!r.includes(s))return!1;if(s!=="ref"){const c=l[s];if(ne(o)&&ne(c)||O(o)&&O(c)||Array.isArray(o)&&Array.isArray(c)?!ie(o,c):o!==c)return!1}}return!0}var nt=e=>e.type==="select-multiple",It=e=>Ne(e)||ge(e),Fe=e=>pe(e)&&e.isConnected,ot=e=>{for(const l in e)if(Y(e[l]))return!0;return!1};function Ve(e,l={}){const i=Array.isArray(e);if(O(e)||i)for(const r in e)Array.isArray(e[r])||O(e[r])&&!ot(e[r])?(l[r]=Array.isArray(e[r])?[]:{},Ve(e[r],l[r])):I(e[r])||(l[r]=!0);return l}function ut(e,l,i){const r=Array.isArray(e);if(O(e)||r)for(const s in e)Array.isArray(e[s])||O(e[s])&&!ot(e[s])?F(l)||Ee(i[s])?i[s]=Array.isArray(e[s])?Ve(e[s],[]):{...Ve(e[s])}:ut(e[s],I(l)?{}:l[s],i[s]):i[s]=!ie(e[s],l[s]);return i}var Le=(e,l)=>ut(e,l,Ve(l)),ct=(e,{valueAsNumber:l,valueAsDate:i,setValueAs:r})=>F(e)?e:l?e===""?NaN:e&&+e:i&&j(e)?new Date(e):r?r(e):e;function Oe(e){const l=e.ref;if(!(e.refs?e.refs.every(i=>i.disabled):l.disabled))return Ie(l)?l.files:Ne(l)?at(e.refs).value:nt(l)?[...l.selectedOptions].map(({value:i})=>i):ge(l)?lt(e.refs).value:ct(F(l.value)?e.ref.value:l.value,e)}var Nt=(e,l,i,r)=>{const s={};for(const o of e){const c=y(l,o);c&&_(s,o,c._f)}return{criteriaMode:i,names:[...e],fields:s,shouldUseNativeValidation:r}},ye=e=>F(e)?e:ke(e)?e.source:O(e)?ke(e.value)?e.value.source:e.value:e,Ut=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function rt(e,l,i){const r=y(e,i);if(r||Re(i))return{error:r,name:i};const s=i.split(".");for(;s.length;){const o=s.join("."),c=y(l,o),b=y(e,o);if(c&&!Array.isArray(c)&&i!==o)return{name:i};if(b&&b.type)return{name:o,error:b};s.pop()}return{name:i}}var qt=(e,l,i,r,s)=>s.isOnAll?!1:!i&&s.isOnTouch?!(l||e):(i?r.isOnBlur:s.isOnBlur)?!e:(i?r.isOnChange:s.isOnChange)?e:!0,Bt=(e,l)=>!ve(y(e,l)).length&&C(e,l);const Pt={mode:G.onSubmit,reValidateMode:G.onChange,shouldFocusError:!0};function Ht(e={},l){let i={...Pt,...e},r={submitCount:0,isDirty:!1,isLoading:Y(i.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},errors:{}},s={},o=O(i.defaultValues)||O(i.values)?re(i.defaultValues||i.values)||{}:{},c=i.shouldUnregister?{}:re(o),b={action:!1,mount:!1,watch:!1},k={mount:new Set,unMount:new Set,array:new Set,watch:new Set},M,H=0;const A={isDirty:!1,dirtyFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},p={values:Te(),array:Te(),state:Te()},$=e.resetOptions&&e.resetOptions.keepDirtyValues,N=Je(i.mode),ue=Je(i.reValidateMode),se=i.criteriaMode===G.all,ce=t=>a=>{clearTimeout(H),H=setTimeout(t,a)},v=async t=>{if(A.isValid||t){const a=i.resolver?P((await U()).errors):await W(s,!0);a!==r.isValid&&p.state.next({isValid:a})}},q=t=>A.isValidating&&p.state.next({isValidating:t}),B=(t,a=[],n,m,d=!0,u=!0)=>{if(m&&n){if(b.action=!0,u&&Array.isArray(y(s,t))){const g=n(y(s,t),m.argA,m.argB);d&&_(s,t,g)}if(u&&Array.isArray(y(r.errors,t))){const g=n(y(r.errors,t),m.argA,m.argB);d&&_(r.errors,t,g),Bt(r.errors,t)}if(A.touchedFields&&u&&Array.isArray(y(r.touchedFields,t))){const g=n(y(r.touchedFields,t),m.argA,m.argB);d&&_(r.touchedFields,t,g)}A.dirtyFields&&(r.dirtyFields=Le(o,c)),p.state.next({name:t,isDirty:x(t,a),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else _(c,t,a)},S=(t,a)=>{_(r.errors,t,a),p.state.next({errors:r.errors})},Z=(t,a,n,m)=>{const d=y(s,t);if(d){const u=y(c,t,F(n)?y(o,t):n);F(u)||m&&m.defaultChecked||a?_(c,t,a?u:Oe(d._f)):T(t,u),b.mount&&v()}},ee=(t,a,n,m,d)=>{let u=!1,g=!1;const D={name:t};if(!n||m){A.isDirty&&(g=r.isDirty,r.isDirty=D.isDirty=x(),u=g!==D.isDirty);const w=ie(y(o,t),a);g=y(r.dirtyFields,t),w?C(r.dirtyFields,t):_(r.dirtyFields,t,!0),D.dirtyFields=r.dirtyFields,u=u||A.dirtyFields&&g!==!w}if(n){const w=y(r.touchedFields,t);w||(_(r.touchedFields,t,n),D.touchedFields=r.touchedFields,u=u||A.touchedFields&&w!==n)}return u&&d&&p.state.next(D),u?D:{}},de=(t,a,n,m)=>{const d=y(r.errors,t),u=A.isValid&&oe(a)&&r.isValid!==a;if(e.delayError&&n?(M=ce(()=>S(t,n)),M(e.delayError)):(clearTimeout(H),M=null,n?_(r.errors,t,n):C(r.errors,t)),(n?!ie(d,n):d)||!P(m)||u){const g={...m,...u&&oe(a)?{isValid:a}:{},errors:r.errors,name:t};r={...r,...g},p.state.next(g)}q(!1)},U=async t=>i.resolver(c,i.context,Nt(t||k.mount,s,i.criteriaMode,i.shouldUseNativeValidation)),K=async t=>{const{errors:a}=await U();if(t)for(const n of t){const m=y(a,n);m?_(r.errors,n,m):C(r.errors,n)}else r.errors=a;return a},W=async(t,a,n={valid:!0})=>{for(const m in t){const d=t[m];if(d){const{_f:u,...g}=d;if(u){const D=k.array.has(u.name),w=await tt(d,c,se,i.shouldUseNativeValidation&&!a,D);if(w[u.name]&&(n.valid=!1,a))break;!a&&(y(w,u.name)?D?Ct(r.errors,w,u.name):_(r.errors,u.name,w[u.name]):C(r.errors,u.name))}g&&await W(g,a,n)}}return n.valid},E=()=>{for(const t of k.unMount){const a=y(s,t);a&&(a._f.refs?a._f.refs.every(n=>!Fe(n)):!Fe(a._f.ref))&&_e(t)}k.unMount=new Set},x=(t,a)=>(t&&a&&_(c,t,a),!ie(Ue(),o)),h=(t,a,n)=>Lt(t,k,{...b.mount?c:F(a)?o:j(t)?{[t]:a}:a},n,a),V=t=>ve(y(b.mount?c:o,t,e.shouldUnregister?y(o,t,[]):[])),T=(t,a,n={})=>{const m=y(s,t);let d=a;if(m){const u=m._f;u&&(!u.disabled&&_(c,t,ct(a,u)),d=pe(u.ref)&&I(a)?"":a,nt(u.ref)?[...u.ref.options].forEach(g=>g.selected=d.includes(g.value)):u.refs?ge(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(d)?!!d.find(D=>D===g.value):d===g.value)):u.refs[0]&&(u.refs[0].checked=!!d):u.refs.forEach(g=>g.checked=g.value===d):Ie(u.ref)?u.ref.value="":(u.ref.value=d,u.ref.type||p.values.next({name:t,values:{...c}})))}(n.shouldDirty||n.shouldTouch)&&ee(t,d,n.shouldTouch,n.shouldDirty,!0),n.shouldValidate&&fe(t)},R=(t,a,n)=>{for(const m in a){const d=a[m],u=`${t}.${m}`,g=y(s,u);(k.array.has(t)||!Ee(d)||g&&!g._f)&&!ne(d)?R(u,d,n):T(u,d,n)}},z=(t,a,n={})=>{const m=y(s,t),d=k.array.has(t),u=re(a);_(c,t,u),d?(p.array.next({name:t,values:{...c}}),(A.isDirty||A.dirtyFields)&&n.shouldDirty&&p.state.next({name:t,dirtyFields:Le(o,c),isDirty:x(t,u)})):m&&!m._f&&!I(u)?R(t,u,n):T(t,u,n),Qe(t,k)&&p.state.next({...r}),p.values.next({name:t,values:{...c}}),!b.mount&&l()},J=async t=>{const a=t.target;let n=a.name,m=!0;const d=y(s,n),u=()=>a.type?Oe(d._f):_t(t);if(d){let g,D;const w=u(),le=t.type===ze.BLUR||t.type===ze.FOCUS_OUT,vt=!Ut(d._f)&&!i.resolver&&!y(r.errors,n)&&!d._f.deps||qt(le,y(r.touchedFields,n),r.isSubmitted,ue,N),De=Qe(n,k,le);_(c,n,w),le?(d._f.onBlur&&d._f.onBlur(t),M&&M(0)):d._f.onChange&&d._f.onChange(t);const Se=ee(n,w,le,!1),ht=!P(Se)||De;if(!le&&p.values.next({name:n,type:t.type,values:{...c}}),vt)return A.isValid&&v(),ht&&p.state.next({name:n,...De?{}:Se});if(!le&&De&&p.state.next({...r}),q(!0),i.resolver){const{errors:$e}=await U([n]),bt=rt(r.errors,s,n),We=rt($e,s,bt.name||n);g=We.error,n=We.name,D=P($e)}else g=(await tt(d,c,se,i.shouldUseNativeValidation))[n],m=isNaN(w)||w===y(c,n,w),m&&(g?D=!1:A.isValid&&(D=await W(s,!0)));m&&(d._f.deps&&fe(d._f.deps),de(n,D,g,Se))}},fe=async(t,a={})=>{let n,m;const d=we(t);if(q(!0),i.resolver){const u=await K(F(t)?t:d);n=P(u),m=t?!d.some(g=>y(u,g)):n}else t?(m=(await Promise.all(d.map(async u=>{const g=y(s,u);return await W(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!m&&!r.isValid)&&v()):m=n=await W(s);return p.state.next({...!j(t)||A.isValid&&n!==r.isValid?{}:{name:t},...i.resolver||!t?{isValid:n}:{},errors:r.errors,isValidating:!1}),a.shouldFocus&&!m&&Ce(s,u=>u&&y(r.errors,u),t?d:k.mount),m},Ue=t=>{const a={...o,...b.mount?c:{}};return F(t)?a:j(t)?y(a,t):t.map(n=>y(a,n))},qe=(t,a)=>({invalid:!!y((a||r).errors,t),isDirty:!!y((a||r).dirtyFields,t),isTouched:!!y((a||r).touchedFields,t),error:y((a||r).errors,t)}),dt=t=>{t&&we(t).forEach(a=>C(r.errors,a)),p.state.next({errors:t?r.errors:{}})},ft=(t,a,n)=>{const m=(y(s,t,{_f:{}})._f||{}).ref;_(r.errors,t,{...a,ref:m}),p.state.next({name:t,errors:r.errors,isValid:!1}),n&&n.shouldFocus&&m&&m.focus&&m.focus()},mt=(t,a)=>Y(t)?p.values.subscribe({next:n=>t(h(void 0,a),n)}):h(t,a,!0),_e=(t,a={})=>{for(const n of t?we(t):k.mount)k.mount.delete(n),k.array.delete(n),a.keepValue||(C(s,n),C(c,n)),!a.keepError&&C(r.errors,n),!a.keepDirty&&C(r.dirtyFields,n),!a.keepTouched&&C(r.touchedFields,n),!i.shouldUnregister&&!a.keepDefaultValue&&C(o,n);p.values.next({values:{...c}}),p.state.next({...r,...a.keepDirty?{isDirty:x()}:{}}),!a.keepIsValid&&v()},Ae=(t,a={})=>{let n=y(s,t);const m=oe(a.disabled);return _(s,t,{...n||{},_f:{...n&&n._f?n._f:{ref:{name:t}},name:t,mount:!0,...a}}),k.mount.add(t),n?m&&_(c,t,a.disabled?void 0:y(c,t,Oe(n._f))):Z(t,!0,a.value),{...m?{disabled:a.disabled}:{},...i.shouldUseNativeValidation?{required:!!a.required,min:ye(a.min),max:ye(a.max),minLength:ye(a.minLength),maxLength:ye(a.maxLength),pattern:ye(a.pattern)}:{},name:t,onChange:J,onBlur:J,ref:d=>{if(d){Ae(t,a),n=y(s,t);const u=F(d.value)&&d.querySelectorAll&&d.querySelectorAll("input,select,textarea")[0]||d,g=It(u),D=n._f.refs||[];if(g?D.find(w=>w===u):u===n._f.ref)return;_(s,t,{_f:{...n._f,...g?{refs:[...D.filter(Fe),u,...Array.isArray(y(o,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),Z(t,!1,void 0,u)}else n=y(s,t,{}),n._f&&(n._f.mount=!1),(i.shouldUnregister||a.shouldUnregister)&&!(Dt(k.array,t)&&b.action)&&k.unMount.add(t)}}},Be=()=>i.shouldFocusError&&Ce(s,t=>t&&y(r.errors,t),k.mount),yt=(t,a)=>async n=>{n&&(n.preventDefault&&n.preventDefault(),n.persist&&n.persist());let m=re(c);if(p.state.next({isSubmitting:!0}),i.resolver){const{errors:d,values:u}=await U();r.errors=d,m=u}else await W(s);C(r.errors,"root"),P(r.errors)?(p.state.next({errors:{}}),await t(m,n)):(a&&await a({...r.errors},n),Be(),setTimeout(Be)),p.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:P(r.errors),submitCount:r.submitCount+1,errors:r.errors})},gt=(t,a={})=>{y(s,t)&&(F(a.defaultValue)?z(t,y(o,t)):(z(t,a.defaultValue),_(o,t,a.defaultValue)),a.keepTouched||C(r.touchedFields,t),a.keepDirty||(C(r.dirtyFields,t),r.isDirty=a.defaultValue?x(t,y(o,t)):x()),a.keepError||(C(r.errors,t),A.isValid&&v()),p.state.next({...r}))},Pe=(t,a={})=>{const n=t||o,m=re(n),d=t&&!P(t)?m:o;if(a.keepDefaultValues||(o=n),!a.keepValues){if(a.keepDirtyValues||$)for(const u of k.mount)y(r.dirtyFields,u)?_(d,u,y(c,u)):z(u,y(d,u));else{if(Me&&F(t))for(const u of k.mount){const g=y(s,u);if(g&&g._f){const D=Array.isArray(g._f.refs)?g._f.refs[0]:g._f.ref;if(pe(D)){const w=D.closest("form");if(w){w.reset();break}}}}s={}}c=e.shouldUnregister?a.keepDefaultValues?re(o):{}:m,p.array.next({values:{...d}}),p.values.next({values:{...d}})}k={mount:new Set,unMount:new Set,array:new Set,watch:new Set,watchAll:!1,focus:""},!b.mount&&l(),b.mount=!A.isValid||!!a.keepIsValid,b.watch=!!e.shouldUnregister,p.state.next({submitCount:a.keepSubmitCount?r.submitCount:0,isDirty:a.keepDirty?r.isDirty:!!(a.keepDefaultValues&&!ie(t,o)),isSubmitted:a.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:a.keepDirtyValues?r.dirtyFields:a.keepDefaultValues&&t?Le(o,t):{},touchedFields:a.keepTouched?r.touchedFields:{},errors:a.keepErrors?r.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},He=(t,a)=>Pe(Y(t)?t(c):t,a);return{control:{register:Ae,unregister:_e,getFieldState:qe,_executeSchema:U,_getWatch:h,_getDirty:x,_updateValid:v,_removeUnmounted:E,_updateFieldArray:B,_getFieldArray:V,_reset:Pe,_resetDefaultValues:()=>Y(i.defaultValues)&&i.defaultValues().then(t=>{He(t,i.resetOptions),p.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_subjects:p,_proxyFormState:A,get _fields(){return s},get _formValues(){return c},get _state(){return b},set _state(t){b=t},get _defaultValues(){return o},get _names(){return k},set _names(t){k=t},get _formState(){return r},set _formState(t){r=t},get _options(){return i},set _options(t){i={...i,...t}}},trigger:fe,register:Ae,handleSubmit:yt,watch:mt,setValue:z,getValues:Ue,reset:He,resetField:gt,clearErrors:dt,unregister:_e,setError:ft,setFocus:(t,a={})=>{const n=y(s,t),m=n&&n._f;if(m){const d=m.refs?m.refs[0]:m.ref;d.focus&&(d.focus(),a.shouldSelect&&d.select())}},getFieldState:qe}}function $t(e={}){const l=f.useRef(),[i,r]=f.useState({isDirty:!1,isValidating:!1,isLoading:Y(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},errors:{},defaultValues:Y(e.defaultValues)?void 0:e.defaultValues});l.current||(l.current={...Ht(e,()=>r(o=>({...o}))),formState:i});const s=l.current.control;return s._options=e,Ft({subject:s._subjects.state,next:o=>{Tt(o,s._proxyFormState,s._updateFormState,!0)&&r({...s._formState})}}),f.useEffect(()=>{e.values&&!ie(e.values,s._defaultValues)?s._reset(e.values,s._options.resetOptions):s._resetDefaultValues()},[e.values,s]),f.useEffect(()=>{s._state.mount||(s._updateValid(),s._state.mount=!0),s._state.watch&&(s._state.watch=!1,s._subjects.state.next({...s._formState})),s._removeUnmounted()}),l.current.formState=wt(i,s),l.current}var Wt=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e.select="select",e.date="date",e))(Wt||{});const Gt=e=>{const{exampleType:l="formgroup"}=e,{register:i,handleSubmit:r,formState:{errors:s}}=$t(),o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0);const c=new Date;c.setDate(o.getDate()-5),c.setHours(6),c.setMinutes(10),c.setSeconds(0);const b=new Date;b.setDate(o.getDate()+5),b.setHours(22),b.setMinutes(0),b.setSeconds(0);const k="field1",M="field2",H="field3",A="field4",p="field5",$="field6",N="field7",ue="field8",se="field9",ce=s.field1||s.field2||s.field3||s.field4||s.field5||s.field6||s.field7||s.field8||s.field9,v="Du må velge et alternativ",q="Du må velge to alternativ",B="Det kan ikke legges inn mer enn 40 tegn",S="Du må skrive noe her",Z='Du må velge "Option 2"',ee=`Du må velge dato mellom ${c.toLocaleDateString("nb")} og ${b.toLocaleDateString("nb")}`,de=`Du må skrive inn tidspunkt mellom ${c.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})} og ${b.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}`,U=h=>h.length>=2||q,K=h=>h.toString()==="Option 2"||Z,W=(h,V,T)=>{const R=new Date(h);return!!h&&R.getTime()>=V.getTime()&&R.getTime()<=T.getTime()||ee},E=(h,V)=>{const T=new Date;T.setHours(h),T.setMinutes(V),T.setSeconds(0);const R=c.toLocaleTimeString("nb"),z=b.toLocaleTimeString("nb"),J=T.toLocaleTimeString("nb");return console.log("value",J),!!T&&J>=R&&J<=z||de},x=()=>{if(l==="formgroup"){const h=[f.createElement(te,{key:0,inputId:"checkbox1",label:f.createElement(L,{labelTexts:[{text:"Checkbox 1"}]}),...i(k,{required:v})}),f.createElement(te,{key:1,inputId:"checkbox2",label:f.createElement(L,{labelTexts:[{text:"Checkbox 2"}]}),...i(k,{required:v})}),f.createElement(te,{key:2,inputId:"checkbox3",label:f.createElement(L,{labelTexts:[{text:"Checkbox 3"}]}),...i(k,{required:v})})];return[f.createElement(X,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:s.field1?s.field1.message:void 0,variant:e.variant},f.createElement(kt,{maxColumns:Et.two},h.map(V=>V))),f.createElement(X,{key:1,legend:"Velg minst to",error:s.field2?s.field2.message:void 0,variant:e.variant},f.createElement(te,{inputId:"checkbox4",label:f.createElement(L,{labelTexts:[{text:"Checkbox 4"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox5",label:f.createElement(L,{labelTexts:[{text:"Checkbox 5"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox6",label:f.createElement(L,{labelTexts:[{text:"Checkbox 6"}]}),...i(M,{validate:U})})),f.createElement(X,{key:2,legend:"Velg en",error:s.field3?s.field3.message:void 0,variant:e.variant},f.createElement(he,{inputId:"radiobutton1",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 1"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton2",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 2"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton3",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 3"}]}),...i(H,{required:v})})),f.createElement(X,{key:3,error:s.field4?s.field4.message:void 0},f.createElement(je,{defaultValue:`Dette er en test 
+import f from"react";import{isTest as xt}from"../../utils/environment.js";import{B as pt}from"../../Button.js";import{C as te}from"../../Checkbox.js";import{F as X}from"../../FormGroup.js";import{F as kt,a as Et}from"../../FormLayout.js";import Ge from"../Icons/Hospital.js";import{I as me}from"../../Input.js";import{L}from"../../Label.js";import{R as he}from"../../RadioButton.js";import{S as Ke}from"../../Select.js";import{T as je}from"../../Textarea.js";import{V as Vt}from"../../Validation.js";import be from"./styles.module.scss";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../utils/refs.js";import"../Icons/Check.js";import"../Checkbox/styles.module.scss";import"../../utils/component.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../FormGroup/styles.module.scss";import"../FormLayout/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../RadioButton/styles.module.scss";import"../Icons/ChevronDown.js";import"../Select/styles.module.scss";import"../Textarea/styles.module.scss";import"../Validation/styles.module.scss";var ge=e=>e.type==="checkbox",ne=e=>e instanceof Date,I=e=>e==null;const it=e=>typeof e=="object";var O=e=>!I(e)&&!Array.isArray(e)&&it(e)&&!ne(e),_t=e=>O(e)&&e.target?ge(e.target)?e.target.checked:e.target.value:e,At=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,Dt=(e,l)=>e.has(At(l)),St=e=>{const l=e.constructor&&e.constructor.prototype;return O(l)&&l.hasOwnProperty("isPrototypeOf")},Me=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function re(e){let l;const i=Array.isArray(e);if(e instanceof Date)l=new Date(e);else if(e instanceof Set)l=new Set(e);else if(!(Me&&(e instanceof Blob||e instanceof FileList))&&(i||O(e)))if(l=i?[]:{},!Array.isArray(e)&&!St(e))l=e;else for(const r in e)l[r]=re(e[r]);else return e;return l}var ve=e=>Array.isArray(e)?e.filter(Boolean):[],F=e=>e===void 0,y=(e,l,i)=>{if(!l||!O(e))return i;const r=ve(l.split(/[,[\].]+?/)).reduce((s,o)=>I(s)?s:s[o],e);return F(r)||r===e?F(e[l])?i:e[l]:r};const ze={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},G={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},Q={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};f.createContext(null);var wt=(e,l,i,r=!0)=>{const s={defaultValues:l._defaultValues};for(const o in e)Object.defineProperty(s,o,{get:()=>{const c=o;return l._proxyFormState[c]!==G.all&&(l._proxyFormState[c]=!r||G.all),i&&(i[c]=!0),e[c]}});return s},P=e=>O(e)&&!Object.keys(e).length,Tt=(e,l,i,r)=>{i(e);const{name:s,...o}=e;return P(o)||Object.keys(o).length>=Object.keys(l).length||Object.keys(o).find(c=>l[c]===(!r||G.all))},we=e=>Array.isArray(e)?e:[e];function Ft(e){const l=f.useRef(e);l.current=e,f.useEffect(()=>{const i=!e.disabled&&l.current.subject&&l.current.subject.subscribe({next:l.current.next});return()=>{i&&i.unsubscribe()}},[e.disabled])}var j=e=>typeof e=="string",Lt=(e,l,i,r,s)=>j(e)?(r&&l.watch.add(e),y(i,e,s)):Array.isArray(e)?e.map(o=>(r&&l.watch.add(o),y(i,o))):(r&&(l.watchAll=!0),i),Re=e=>/^\w*$/.test(e),st=e=>ve(e.replace(/["|']|\]/g,"").split(/\.|\[/));function _(e,l,i){let r=-1;const s=Re(l)?[l]:st(l),o=s.length,c=o-1;for(;++r<o;){const b=s[r];let k=i;if(r!==c){const M=e[b];k=O(M)||Array.isArray(M)?M:isNaN(+s[r+1])?{}:[]}e[b]=k,e=e[b]}return e}var Ot=(e,l,i,r,s)=>l?{...i[e],types:{...i[e]&&i[e].types?i[e].types:{},[r]:s||!0}}:{};const Ce=(e,l,i)=>{for(const r of i||Object.keys(e)){const s=y(e,r);if(s){const{_f:o,...c}=s;if(o&&l(o.name)){if(o.ref.focus){o.ref.focus();break}else if(o.refs&&o.refs[0].focus){o.refs[0].focus();break}}else O(c)&&Ce(c,l)}}};var Je=e=>({isOnSubmit:!e||e===G.onSubmit,isOnBlur:e===G.onBlur,isOnChange:e===G.onChange,isOnAll:e===G.all,isOnTouch:e===G.onTouched}),Qe=(e,l,i)=>!i&&(l.watchAll||l.watch.has(e)||[...l.watch].some(r=>e.startsWith(r)&&/^\.\w+/.test(e.slice(r.length)))),Ct=(e,l,i)=>{const r=ve(y(e,i));return _(r,"root",l[i]),_(e,i,r),e},oe=e=>typeof e=="boolean",Ie=e=>e.type==="file",Y=e=>typeof e=="function",pe=e=>{if(!Me)return!1;const l=e?e.ownerDocument:0;return e instanceof(l&&l.defaultView?l.defaultView.HTMLElement:HTMLElement)},xe=e=>j(e),Ne=e=>e.type==="radio",ke=e=>e instanceof RegExp;const Xe={value:!1,isValid:!1},Ye={value:!0,isValid:!0};var lt=e=>{if(Array.isArray(e)){if(e.length>1){const l=e.filter(i=>i&&i.checked&&!i.disabled).map(i=>i.value);return{value:l,isValid:!!l.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!F(e[0].attributes.value)?F(e[0].value)||e[0].value===""?Ye:{value:e[0].value,isValid:!0}:Ye:Xe}return Xe};const Ze={isValid:!1,value:null};var at=e=>Array.isArray(e)?e.reduce((l,i)=>i&&i.checked&&!i.disabled?{isValid:!0,value:i.value}:l,Ze):Ze;function et(e,l,i="validate"){if(xe(e)||Array.isArray(e)&&e.every(xe)||oe(e)&&!e)return{type:i,message:xe(e)?e:"",ref:l}}var ae=e=>O(e)&&!ke(e)?e:{value:e,message:""},tt=async(e,l,i,r,s)=>{const{ref:o,refs:c,required:b,maxLength:k,minLength:M,min:H,max:A,pattern:p,validate:$,name:N,valueAsNumber:ue,mount:se,disabled:ce}=e._f,v=y(l,N);if(!se||ce)return{};const q=c?c[0]:o,B=E=>{r&&q.reportValidity&&(q.setCustomValidity(oe(E)?"":E||""),q.reportValidity())},S={},Z=Ne(o),ee=ge(o),de=Z||ee,U=(ue||Ie(o))&&F(o.value)&&F(v)||pe(o)&&o.value===""||v===""||Array.isArray(v)&&!v.length,K=Ot.bind(null,N,i,S),W=(E,x,h,V=Q.maxLength,T=Q.minLength)=>{const R=E?x:h;S[N]={type:E?V:T,message:R,ref:o,...K(E?V:T,R)}};if(s?!Array.isArray(v)||!v.length:b&&(!de&&(U||I(v))||oe(v)&&!v||ee&&!lt(c).isValid||Z&&!at(c).isValid)){const{value:E,message:x}=xe(b)?{value:!!b,message:b}:ae(b);if(E&&(S[N]={type:Q.required,message:x,ref:q,...K(Q.required,x)},!i))return B(x),S}if(!U&&(!I(H)||!I(A))){let E,x;const h=ae(A),V=ae(H);if(!I(v)&&!isNaN(v)){const T=o.valueAsNumber||v&&+v;I(h.value)||(E=T>h.value),I(V.value)||(x=T<V.value)}else{const T=o.valueAsDate||new Date(v),R=fe=>new Date(new Date().toDateString()+" "+fe),z=o.type=="time",J=o.type=="week";j(h.value)&&v&&(E=z?R(v)>R(h.value):J?v>h.value:T>new Date(h.value)),j(V.value)&&v&&(x=z?R(v)<R(V.value):J?v<V.value:T<new Date(V.value))}if((E||x)&&(W(!!E,h.message,V.message,Q.max,Q.min),!i))return B(S[N].message),S}if((k||M)&&!U&&(j(v)||s&&Array.isArray(v))){const E=ae(k),x=ae(M),h=!I(E.value)&&v.length>+E.value,V=!I(x.value)&&v.length<+x.value;if((h||V)&&(W(h,E.message,x.message),!i))return B(S[N].message),S}if(p&&!U&&j(v)){const{value:E,message:x}=ae(p);if(ke(E)&&!v.match(E)&&(S[N]={type:Q.pattern,message:x,ref:o,...K(Q.pattern,x)},!i))return B(x),S}if($){if(Y($)){const E=await $(v,l),x=et(E,q);if(x&&(S[N]={...x,...K(Q.validate,x.message)},!i))return B(x.message),S}else if(O($)){let E={};for(const x in $){if(!P(E)&&!i)break;const h=et(await $[x](v,l),q,x);h&&(E={...h,...K(x,h.message)},B(h.message),i&&(S[N]=E))}if(!P(E)&&(S[N]={ref:q,...E},!i))return S}}return B(!0),S};function Mt(e,l){const i=l.slice(0,-1).length;let r=0;for(;r<i;)e=F(e)?r++:e[l[r++]];return e}function Rt(e){for(const l in e)if(!F(e[l]))return!1;return!0}function C(e,l){const i=Array.isArray(l)?l:Re(l)?[l]:st(l),r=i.length===1?e:Mt(e,i),s=i.length-1,o=i[s];return r&&delete r[o],s!==0&&(O(r)&&P(r)||Array.isArray(r)&&Rt(r))&&C(e,i.slice(0,-1)),e}function Te(){let e=[];return{get observers(){return e},next:s=>{for(const o of e)o.next&&o.next(s)},subscribe:s=>(e.push(s),{unsubscribe:()=>{e=e.filter(o=>o!==s)}}),unsubscribe:()=>{e=[]}}}var Ee=e=>I(e)||!it(e);function ie(e,l){if(Ee(e)||Ee(l))return e===l;if(ne(e)&&ne(l))return e.getTime()===l.getTime();const i=Object.keys(e),r=Object.keys(l);if(i.length!==r.length)return!1;for(const s of i){const o=e[s];if(!r.includes(s))return!1;if(s!=="ref"){const c=l[s];if(ne(o)&&ne(c)||O(o)&&O(c)||Array.isArray(o)&&Array.isArray(c)?!ie(o,c):o!==c)return!1}}return!0}var nt=e=>e.type==="select-multiple",It=e=>Ne(e)||ge(e),Fe=e=>pe(e)&&e.isConnected,ot=e=>{for(const l in e)if(Y(e[l]))return!0;return!1};function Ve(e,l={}){const i=Array.isArray(e);if(O(e)||i)for(const r in e)Array.isArray(e[r])||O(e[r])&&!ot(e[r])?(l[r]=Array.isArray(e[r])?[]:{},Ve(e[r],l[r])):I(e[r])||(l[r]=!0);return l}function ut(e,l,i){const r=Array.isArray(e);if(O(e)||r)for(const s in e)Array.isArray(e[s])||O(e[s])&&!ot(e[s])?F(l)||Ee(i[s])?i[s]=Array.isArray(e[s])?Ve(e[s],[]):{...Ve(e[s])}:ut(e[s],I(l)?{}:l[s],i[s]):i[s]=!ie(e[s],l[s]);return i}var Le=(e,l)=>ut(e,l,Ve(l)),ct=(e,{valueAsNumber:l,valueAsDate:i,setValueAs:r})=>F(e)?e:l?e===""?NaN:e&&+e:i&&j(e)?new Date(e):r?r(e):e;function Oe(e){const l=e.ref;if(!(e.refs?e.refs.every(i=>i.disabled):l.disabled))return Ie(l)?l.files:Ne(l)?at(e.refs).value:nt(l)?[...l.selectedOptions].map(({value:i})=>i):ge(l)?lt(e.refs).value:ct(F(l.value)?e.ref.value:l.value,e)}var Nt=(e,l,i,r)=>{const s={};for(const o of e){const c=y(l,o);c&&_(s,o,c._f)}return{criteriaMode:i,names:[...e],fields:s,shouldUseNativeValidation:r}},ye=e=>F(e)?e:ke(e)?e.source:O(e)?ke(e.value)?e.value.source:e.value:e,Ut=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function rt(e,l,i){const r=y(e,i);if(r||Re(i))return{error:r,name:i};const s=i.split(".");for(;s.length;){const o=s.join("."),c=y(l,o),b=y(e,o);if(c&&!Array.isArray(c)&&i!==o)return{name:i};if(b&&b.type)return{name:o,error:b};s.pop()}return{name:i}}var qt=(e,l,i,r,s)=>s.isOnAll?!1:!i&&s.isOnTouch?!(l||e):(i?r.isOnBlur:s.isOnBlur)?!e:(i?r.isOnChange:s.isOnChange)?e:!0,Bt=(e,l)=>!ve(y(e,l)).length&&C(e,l);const Pt={mode:G.onSubmit,reValidateMode:G.onChange,shouldFocusError:!0};function Ht(e={},l){let i={...Pt,...e},r={submitCount:0,isDirty:!1,isLoading:Y(i.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},errors:{}},s={},o=O(i.defaultValues)||O(i.values)?re(i.defaultValues||i.values)||{}:{},c=i.shouldUnregister?{}:re(o),b={action:!1,mount:!1,watch:!1},k={mount:new Set,unMount:new Set,array:new Set,watch:new Set},M,H=0;const A={isDirty:!1,dirtyFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},p={values:Te(),array:Te(),state:Te()},$=e.resetOptions&&e.resetOptions.keepDirtyValues,N=Je(i.mode),ue=Je(i.reValidateMode),se=i.criteriaMode===G.all,ce=t=>a=>{clearTimeout(H),H=setTimeout(t,a)},v=async t=>{if(A.isValid||t){const a=i.resolver?P((await U()).errors):await W(s,!0);a!==r.isValid&&p.state.next({isValid:a})}},q=t=>A.isValidating&&p.state.next({isValidating:t}),B=(t,a=[],n,m,d=!0,u=!0)=>{if(m&&n){if(b.action=!0,u&&Array.isArray(y(s,t))){const g=n(y(s,t),m.argA,m.argB);d&&_(s,t,g)}if(u&&Array.isArray(y(r.errors,t))){const g=n(y(r.errors,t),m.argA,m.argB);d&&_(r.errors,t,g),Bt(r.errors,t)}if(A.touchedFields&&u&&Array.isArray(y(r.touchedFields,t))){const g=n(y(r.touchedFields,t),m.argA,m.argB);d&&_(r.touchedFields,t,g)}A.dirtyFields&&(r.dirtyFields=Le(o,c)),p.state.next({name:t,isDirty:x(t,a),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else _(c,t,a)},S=(t,a)=>{_(r.errors,t,a),p.state.next({errors:r.errors})},Z=(t,a,n,m)=>{const d=y(s,t);if(d){const u=y(c,t,F(n)?y(o,t):n);F(u)||m&&m.defaultChecked||a?_(c,t,a?u:Oe(d._f)):T(t,u),b.mount&&v()}},ee=(t,a,n,m,d)=>{let u=!1,g=!1;const D={name:t};if(!n||m){A.isDirty&&(g=r.isDirty,r.isDirty=D.isDirty=x(),u=g!==D.isDirty);const w=ie(y(o,t),a);g=y(r.dirtyFields,t),w?C(r.dirtyFields,t):_(r.dirtyFields,t,!0),D.dirtyFields=r.dirtyFields,u=u||A.dirtyFields&&g!==!w}if(n){const w=y(r.touchedFields,t);w||(_(r.touchedFields,t,n),D.touchedFields=r.touchedFields,u=u||A.touchedFields&&w!==n)}return u&&d&&p.state.next(D),u?D:{}},de=(t,a,n,m)=>{const d=y(r.errors,t),u=A.isValid&&oe(a)&&r.isValid!==a;if(e.delayError&&n?(M=ce(()=>S(t,n)),M(e.delayError)):(clearTimeout(H),M=null,n?_(r.errors,t,n):C(r.errors,t)),(n?!ie(d,n):d)||!P(m)||u){const g={...m,...u&&oe(a)?{isValid:a}:{},errors:r.errors,name:t};r={...r,...g},p.state.next(g)}q(!1)},U=async t=>i.resolver(c,i.context,Nt(t||k.mount,s,i.criteriaMode,i.shouldUseNativeValidation)),K=async t=>{const{errors:a}=await U();if(t)for(const n of t){const m=y(a,n);m?_(r.errors,n,m):C(r.errors,n)}else r.errors=a;return a},W=async(t,a,n={valid:!0})=>{for(const m in t){const d=t[m];if(d){const{_f:u,...g}=d;if(u){const D=k.array.has(u.name),w=await tt(d,c,se,i.shouldUseNativeValidation&&!a,D);if(w[u.name]&&(n.valid=!1,a))break;!a&&(y(w,u.name)?D?Ct(r.errors,w,u.name):_(r.errors,u.name,w[u.name]):C(r.errors,u.name))}g&&await W(g,a,n)}}return n.valid},E=()=>{for(const t of k.unMount){const a=y(s,t);a&&(a._f.refs?a._f.refs.every(n=>!Fe(n)):!Fe(a._f.ref))&&_e(t)}k.unMount=new Set},x=(t,a)=>(t&&a&&_(c,t,a),!ie(Ue(),o)),h=(t,a,n)=>Lt(t,k,{...b.mount?c:F(a)?o:j(t)?{[t]:a}:a},n,a),V=t=>ve(y(b.mount?c:o,t,e.shouldUnregister?y(o,t,[]):[])),T=(t,a,n={})=>{const m=y(s,t);let d=a;if(m){const u=m._f;u&&(!u.disabled&&_(c,t,ct(a,u)),d=pe(u.ref)&&I(a)?"":a,nt(u.ref)?[...u.ref.options].forEach(g=>g.selected=d.includes(g.value)):u.refs?ge(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(d)?!!d.find(D=>D===g.value):d===g.value)):u.refs[0]&&(u.refs[0].checked=!!d):u.refs.forEach(g=>g.checked=g.value===d):Ie(u.ref)?u.ref.value="":(u.ref.value=d,u.ref.type||p.values.next({name:t,values:{...c}})))}(n.shouldDirty||n.shouldTouch)&&ee(t,d,n.shouldTouch,n.shouldDirty,!0),n.shouldValidate&&fe(t)},R=(t,a,n)=>{for(const m in a){const d=a[m],u=`${t}.${m}`,g=y(s,u);(k.array.has(t)||!Ee(d)||g&&!g._f)&&!ne(d)?R(u,d,n):T(u,d,n)}},z=(t,a,n={})=>{const m=y(s,t),d=k.array.has(t),u=re(a);_(c,t,u),d?(p.array.next({name:t,values:{...c}}),(A.isDirty||A.dirtyFields)&&n.shouldDirty&&p.state.next({name:t,dirtyFields:Le(o,c),isDirty:x(t,u)})):m&&!m._f&&!I(u)?R(t,u,n):T(t,u,n),Qe(t,k)&&p.state.next({...r}),p.values.next({name:t,values:{...c}}),!b.mount&&l()},J=async t=>{const a=t.target;let n=a.name,m=!0;const d=y(s,n),u=()=>a.type?Oe(d._f):_t(t);if(d){let g,D;const w=u(),le=t.type===ze.BLUR||t.type===ze.FOCUS_OUT,vt=!Ut(d._f)&&!i.resolver&&!y(r.errors,n)&&!d._f.deps||qt(le,y(r.touchedFields,n),r.isSubmitted,ue,N),De=Qe(n,k,le);_(c,n,w),le?(d._f.onBlur&&d._f.onBlur(t),M&&M(0)):d._f.onChange&&d._f.onChange(t);const Se=ee(n,w,le,!1),ht=!P(Se)||De;if(!le&&p.values.next({name:n,type:t.type,values:{...c}}),vt)return A.isValid&&v(),ht&&p.state.next({name:n,...De?{}:Se});if(!le&&De&&p.state.next({...r}),q(!0),i.resolver){const{errors:$e}=await U([n]),bt=rt(r.errors,s,n),We=rt($e,s,bt.name||n);g=We.error,n=We.name,D=P($e)}else g=(await tt(d,c,se,i.shouldUseNativeValidation))[n],m=isNaN(w)||w===y(c,n,w),m&&(g?D=!1:A.isValid&&(D=await W(s,!0)));m&&(d._f.deps&&fe(d._f.deps),de(n,D,g,Se))}},fe=async(t,a={})=>{let n,m;const d=we(t);if(q(!0),i.resolver){const u=await K(F(t)?t:d);n=P(u),m=t?!d.some(g=>y(u,g)):n}else t?(m=(await Promise.all(d.map(async u=>{const g=y(s,u);return await W(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!m&&!r.isValid)&&v()):m=n=await W(s);return p.state.next({...!j(t)||A.isValid&&n!==r.isValid?{}:{name:t},...i.resolver||!t?{isValid:n}:{},errors:r.errors,isValidating:!1}),a.shouldFocus&&!m&&Ce(s,u=>u&&y(r.errors,u),t?d:k.mount),m},Ue=t=>{const a={...o,...b.mount?c:{}};return F(t)?a:j(t)?y(a,t):t.map(n=>y(a,n))},qe=(t,a)=>({invalid:!!y((a||r).errors,t),isDirty:!!y((a||r).dirtyFields,t),isTouched:!!y((a||r).touchedFields,t),error:y((a||r).errors,t)}),dt=t=>{t&&we(t).forEach(a=>C(r.errors,a)),p.state.next({errors:t?r.errors:{}})},ft=(t,a,n)=>{const m=(y(s,t,{_f:{}})._f||{}).ref;_(r.errors,t,{...a,ref:m}),p.state.next({name:t,errors:r.errors,isValid:!1}),n&&n.shouldFocus&&m&&m.focus&&m.focus()},mt=(t,a)=>Y(t)?p.values.subscribe({next:n=>t(h(void 0,a),n)}):h(t,a,!0),_e=(t,a={})=>{for(const n of t?we(t):k.mount)k.mount.delete(n),k.array.delete(n),a.keepValue||(C(s,n),C(c,n)),!a.keepError&&C(r.errors,n),!a.keepDirty&&C(r.dirtyFields,n),!a.keepTouched&&C(r.touchedFields,n),!i.shouldUnregister&&!a.keepDefaultValue&&C(o,n);p.values.next({values:{...c}}),p.state.next({...r,...a.keepDirty?{isDirty:x()}:{}}),!a.keepIsValid&&v()},Ae=(t,a={})=>{let n=y(s,t);const m=oe(a.disabled);return _(s,t,{...n||{},_f:{...n&&n._f?n._f:{ref:{name:t}},name:t,mount:!0,...a}}),k.mount.add(t),n?m&&_(c,t,a.disabled?void 0:y(c,t,Oe(n._f))):Z(t,!0,a.value),{...m?{disabled:a.disabled}:{},...i.shouldUseNativeValidation?{required:!!a.required,min:ye(a.min),max:ye(a.max),minLength:ye(a.minLength),maxLength:ye(a.maxLength),pattern:ye(a.pattern)}:{},name:t,onChange:J,onBlur:J,ref:d=>{if(d){Ae(t,a),n=y(s,t);const u=F(d.value)&&d.querySelectorAll&&d.querySelectorAll("input,select,textarea")[0]||d,g=It(u),D=n._f.refs||[];if(g?D.find(w=>w===u):u===n._f.ref)return;_(s,t,{_f:{...n._f,...g?{refs:[...D.filter(Fe),u,...Array.isArray(y(o,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),Z(t,!1,void 0,u)}else n=y(s,t,{}),n._f&&(n._f.mount=!1),(i.shouldUnregister||a.shouldUnregister)&&!(Dt(k.array,t)&&b.action)&&k.unMount.add(t)}}},Be=()=>i.shouldFocusError&&Ce(s,t=>t&&y(r.errors,t),k.mount),yt=(t,a)=>async n=>{n&&(n.preventDefault&&n.preventDefault(),n.persist&&n.persist());let m=re(c);if(p.state.next({isSubmitting:!0}),i.resolver){const{errors:d,values:u}=await U();r.errors=d,m=u}else await W(s);C(r.errors,"root"),P(r.errors)?(p.state.next({errors:{}}),await t(m,n)):(a&&await a({...r.errors},n),Be(),setTimeout(Be)),p.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:P(r.errors),submitCount:r.submitCount+1,errors:r.errors})},gt=(t,a={})=>{y(s,t)&&(F(a.defaultValue)?z(t,y(o,t)):(z(t,a.defaultValue),_(o,t,a.defaultValue)),a.keepTouched||C(r.touchedFields,t),a.keepDirty||(C(r.dirtyFields,t),r.isDirty=a.defaultValue?x(t,y(o,t)):x()),a.keepError||(C(r.errors,t),A.isValid&&v()),p.state.next({...r}))},Pe=(t,a={})=>{const n=t||o,m=re(n),d=t&&!P(t)?m:o;if(a.keepDefaultValues||(o=n),!a.keepValues){if(a.keepDirtyValues||$)for(const u of k.mount)y(r.dirtyFields,u)?_(d,u,y(c,u)):z(u,y(d,u));else{if(Me&&F(t))for(const u of k.mount){const g=y(s,u);if(g&&g._f){const D=Array.isArray(g._f.refs)?g._f.refs[0]:g._f.ref;if(pe(D)){const w=D.closest("form");if(w){w.reset();break}}}}s={}}c=e.shouldUnregister?a.keepDefaultValues?re(o):{}:m,p.array.next({values:{...d}}),p.values.next({values:{...d}})}k={mount:new Set,unMount:new Set,array:new Set,watch:new Set,watchAll:!1,focus:""},!b.mount&&l(),b.mount=!A.isValid||!!a.keepIsValid,b.watch=!!e.shouldUnregister,p.state.next({submitCount:a.keepSubmitCount?r.submitCount:0,isDirty:a.keepDirty?r.isDirty:!!(a.keepDefaultValues&&!ie(t,o)),isSubmitted:a.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:a.keepDirtyValues?r.dirtyFields:a.keepDefaultValues&&t?Le(o,t):{},touchedFields:a.keepTouched?r.touchedFields:{},errors:a.keepErrors?r.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},He=(t,a)=>Pe(Y(t)?t(c):t,a);return{control:{register:Ae,unregister:_e,getFieldState:qe,_executeSchema:U,_getWatch:h,_getDirty:x,_updateValid:v,_removeUnmounted:E,_updateFieldArray:B,_getFieldArray:V,_reset:Pe,_resetDefaultValues:()=>Y(i.defaultValues)&&i.defaultValues().then(t=>{He(t,i.resetOptions),p.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_subjects:p,_proxyFormState:A,get _fields(){return s},get _formValues(){return c},get _state(){return b},set _state(t){b=t},get _defaultValues(){return o},get _names(){return k},set _names(t){k=t},get _formState(){return r},set _formState(t){r=t},get _options(){return i},set _options(t){i={...i,...t}}},trigger:fe,register:Ae,handleSubmit:yt,watch:mt,setValue:z,getValues:Ue,reset:He,resetField:gt,clearErrors:dt,unregister:_e,setError:ft,setFocus:(t,a={})=>{const n=y(s,t),m=n&&n._f;if(m){const d=m.refs?m.refs[0]:m.ref;d.focus&&(d.focus(),a.shouldSelect&&d.select())}},getFieldState:qe}}function $t(e={}){const l=f.useRef(),[i,r]=f.useState({isDirty:!1,isValidating:!1,isLoading:Y(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},errors:{},defaultValues:Y(e.defaultValues)?void 0:e.defaultValues});l.current||(l.current={...Ht(e,()=>r(o=>({...o}))),formState:i});const s=l.current.control;return s._options=e,Ft({subject:s._subjects.state,next:o=>{Tt(o,s._proxyFormState,s._updateFormState,!0)&&r({...s._formState})}}),f.useEffect(()=>{e.values&&!ie(e.values,s._defaultValues)?s._reset(e.values,s._options.resetOptions):s._resetDefaultValues()},[e.values,s]),f.useEffect(()=>{s._state.mount||(s._updateValid(),s._state.mount=!0),s._state.watch&&(s._state.watch=!1,s._subjects.state.next({...s._formState})),s._removeUnmounted()}),l.current.formState=wt(i,s),l.current}var Wt=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e.select="select",e.date="date",e))(Wt||{});const Gt=e=>{const{exampleType:l="formgroup"}=e,{register:i,handleSubmit:r,formState:{errors:s}}=$t(),o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0);const c=new Date;c.setDate(o.getDate()-5),c.setHours(6),c.setMinutes(10),c.setSeconds(0);const b=new Date;b.setDate(o.getDate()+5),b.setHours(22),b.setMinutes(0),b.setSeconds(0);const k="field1",M="field2",H="field3",A="field4",p="field5",$="field6",N="field7",ue="field8",se="field9",ce=s.field1||s.field2||s.field3||s.field4||s.field5||s.field6||s.field7||s.field8||s.field9,v="Du må velge et alternativ",q="Du må velge to alternativ",B="Det kan ikke legges inn mer enn 40 tegn",S="Du må skrive noe her",Z='Du må velge "Option 2"',ee=`Du må velge dato mellom ${c.toLocaleDateString("nb")} og ${b.toLocaleDateString("nb")}`,de=`Du må skrive inn tidspunkt mellom ${c.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})} og ${b.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}`,U=h=>h.length>=2||q,K=h=>h.toString()==="Option 2"||Z,W=(h,V,T)=>{const R=new Date(h);return!!h&&R.getTime()>=V.getTime()&&R.getTime()<=T.getTime()||ee},E=(h,V)=>{const T=new Date;T.setHours(h),T.setMinutes(V),T.setSeconds(0);const R=c.toLocaleTimeString("nb"),z=b.toLocaleTimeString("nb"),J=T.toLocaleTimeString("nb");return console.log("value",J),!!T&&J>=R&&J<=z||de},x=()=>{if(l==="formgroup"){const h=[f.createElement(te,{key:0,inputId:"checkbox1",label:f.createElement(L,{labelTexts:[{text:"Checkbox 1"}]}),...i(k,{required:v})}),f.createElement(te,{key:1,inputId:"checkbox2",label:f.createElement(L,{labelTexts:[{text:"Checkbox 2"}]}),...i(k,{required:v})}),f.createElement(te,{key:2,inputId:"checkbox3",label:f.createElement(L,{labelTexts:[{text:"Checkbox 3"}]}),...i(k,{required:v})})];return[f.createElement(X,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:s.field1?s.field1.message:void 0,variant:e.variant},f.createElement(kt,{maxColumns:Et.two},h.map(V=>V))),f.createElement(X,{key:1,legend:"Velg minst to",error:s.field2?s.field2.message:void 0,variant:e.variant},f.createElement(te,{inputId:"checkbox4",label:f.createElement(L,{labelTexts:[{text:"Checkbox 4"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox5",label:f.createElement(L,{labelTexts:[{text:"Checkbox 5"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox6",label:f.createElement(L,{labelTexts:[{text:"Checkbox 6"}]}),...i(M,{validate:U})})),f.createElement(X,{key:2,legend:"Velg en",error:s.field3?s.field3.message:void 0,variant:e.variant},f.createElement(he,{inputId:"radiobutton1",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 1"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton2",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 2"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton3",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 3"}]}),...i(H,{required:v})})),f.createElement(X,{key:3,error:s.field4?s.field4.message:void 0},f.createElement(je,{defaultValue:`Dette er en test 
 
  Hello 
 

package/components/HelpBubble/index.js

@@ -1,2 +1,2 @@
-import{H as o}from"../../HelpBubble.js";import{a as G}from"../../HelpBubble.js";import"react";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"./styles.module.scss";export{G as HelpBubbleVariant,o as default};
+import{H as o}from"../../HelpBubble.js";import{a as I}from"../../HelpBubble.js";import"react";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"./styles.module.scss";export{I as HelpBubbleVariant,o as default};
 //# sourceMappingURL=index.js.map

package/components/HelpBubbleExample/index.js

@@ -1,2 +1,2 @@
-import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../../utils/refs.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const a=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))},w=a;export{w as default};
+import i,{useRef as o}from"react";import{H as r}from"../../HelpBubble.js";import"classnames";import"../../constants.js";import"../../AnchorLink.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/ArrowUpRight.js";import"../AnchorLink/styles.module.scss";import"../../Close.js";import"../../hooks/useBreakpoint.js";import"../../utils/refs.js";import"../Icons/X.js";import"../Close/styles.module.scss";import"../../PopOver.js";import"../../hooks/useInterval.js";import"../../hooks/useIsVisible.js";import"../../hooks/useIntersectionObserver.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";import"../../hooks/useSize.js";import"../PopOver/styles.module.scss";import"../HelpBubble/styles.module.scss";const a=e=>{const t=o(null);return i.createElement("div",null,i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."),i.createElement("div",{style:{position:"relative",display:"inline"}},i.createElement("span",{ref:t,style:{display:"inline-block",color:"red"}},"Jeg er en tooltip tekst."),i.createElement(r,{...e,onClose:()=>{alert("Bubble closed")},controllerRef:t},e.children)),i.createElement("span",null,"Consequat adipisicing nostrud non in labore sunt consequat mollit dolore quis voluptate eu veniam adipisicing. Dolor ipsum excepteur anim id ea dolore esse. Sint exercitation duis pariatur in qui ea reprehenderit consectetur sunt minim in ut cupidatat dolore. Eiusmod ut Lorem nostrud id adipisicing ullamco enim. Velit officia mollit laboris amet reprehenderit ad. Nisi cupidatat dolor voluptate officia mollit eu nostrud ipsum. Dolor labore ullamco nostrud consectetur dolor duis qui magna reprehenderit. Esse reprehenderit dolor fugiat sunt adipisicing est. Aliquip duis pariatur labore amet sit occaecat ea eiusmod cillum. Adipisicing magna aute officia cillum non."))},z=a;export{z as default};
 //# sourceMappingURL=index.js.map