@helsenorge/designsystem-react 2.3.0 → 2.5.0

package/components/Expander/index.js

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

package/components/ExpanderList/index.js

@@ -1,2 +1,2 @@
-import r,{useState as T,useRef as V,useEffect as y}from"react";import{Icon as Z}from"../Icons/Icon.js";import{AnalyticsId as P,ZIndex as q,IconSize as z}from"../../constants.js";import F from"../Icons/ChevronUp.js";import G from"../Icons/ChevronDown.js";import{useHover as K}from"../../hooks/useHover.js";import{usePrevious as M}from"../../hooks/usePrevious.js";import{useBreakpoint as Q,Breakpoint as Y}from"../../hooks/useBreakpoint.js";import u from"classnames";import t from"./styles.module.scss";import{useUuid as v}from"../../hooks/useUuid.js";import{useSticky as S}from"../../hooks/useSticky.js";import"../../uuid.js";import"../../theme/grid.js";import"../../hooks/useLayoutEvent.js";import"../../debounce.js";const ee=l=>{var{top:d,left:o,bottom:f,right:E}=l.getBoundingClientRect();return d>=0&&o>=0&&f<=(window.innerHeight||document.documentElement.clientHeight)&&E<=(window.innerWidth||document.documentElement.clientWidth)},ne=l=>d=>{l.forEach(o=>{typeof o=="function"?o(d):o!=null&&(o.current=d)})},A=r.forwardRef((l,d)=>{const{id:o,children:f,padding:E=!0,color:k="neutral",className:b="",icon:I,large:L=!1,title:m,expanded:x=!1,sticky:R,testId:W,handleExpanderClick:$,onExpand:c,renderChildrenWhenClosed:g}=l,[i,B]=T(x),w=M(i),N=V(null),C=V(null),{isHovered:_}=K(C),H=Q(),{isOutsideWindow:h,isLeavingWindow:n,offsetHeight:e,contentWidth:s}=S(N,C),a=R&&i&&h,p=typeof m=="object",j=u(b,{[t["expander-list__item--jsx"]]:p}),U=u(t["expander-list-link"],t[`expander-list-link--${k}`],{[t["expander-list-link--closed"]]:!i,[t["expander-list-link--large"]]:L,[t["expander-list-link--jsx"]]:p,[t["expander-list-link--sticky"]]:a&&!n,[t["expander-list-link--absolute"]]:a&&n}),X=u(t["expander-list-link__title"],{[t["expander-list-link__title--string"]]:!p,[t["expander-list-link__title--jsx"]]:p});y(()=>{x!==i&&B(x)},[x]),y(()=>{c&&i!==!!w&&c(i)},[i,c]);const D=()=>{if(!g&&!i)return null;const J=u(t["expander-list-link__main-content"],i&&t["expander-list-link__main-content--expanded"],E?t["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},f)};return r.createElement("li",{className:j,ref:ne([d,N]),style:{paddingTop:a&&e?`${e}px`:void 0}},r.createElement("button",{type:"button",id:o,onClick:$,"data-testid":W,"data-analyticsid":P.ExpanderListExpander,className:U,ref:C,"aria-expanded":i,style:{zIndex:_||a?q.ExpanderTrigger:void 0,width:a&&s?`${s}px`:void 0}},I&&r.createElement("span",{className:t["expander-list-link__icon"]},r.cloneElement(I,{size:H===Y.xs?z.XSmall:z.Small,isHovered:_})),r.createElement("span",{className:X},m),r.createElement("span",{className:t["expander-list-link__chevron"]},r.createElement(Z,{size:z.XSmall,svgIcon:i?F:G,isHovered:_}))),D())}),O=l=>r.isValidElement(l)&&l.type===A,te=r.forwardRef((l,d)=>{const{children:o,childPadding:f=!0,large:E,isOpen:k=!1,renderChildrenWhenClosed:b=!1,color:I,className:L="",accordion:m=!1,topBorder:x=!0,bottomBorder:R=!0,sticky:W=!1,testId:$}=l,[c,g]=T(),[i,B]=T(),w=v(),N=r.Children.count(o),C=u(t["expander-list"],L);function _(n,e){g(s=>m?{[e]:!(s!=null&&s[e])}:{...s,[e]:!(s!=null&&s[e])}),B(n.currentTarget)}const H=n=>u(t["expander-list__item"],{[t["expander-list__item--top"]]:n===0&&x,[t["expander-list__item--no-bottom"]]:n===N-1&&!R}),h=n=>`${w}-${n}`;return y(()=>{m&&i&&!ee(i)&&i.scrollIntoView()},[m,i]),y(()=>{if(k){const n=h(0);g(e=>m?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[k]),y(()=>{var n;if(!k){const e=(n=r.Children.map(o,s=>{if(O(s))return s}))==null?void 0:n.reduce((s,a,p)=>(typeof a.props.expanded<"u"&&(s[h(p)]=a.props.expanded),s),{});g({...c,...e})}},[o]),r.createElement("ul",{className:C,ref:d,"data-testid":$,"data-analyticsid":P.ExpanderList},r.Children.map(o,(n,e)=>{if(O(n)){const s=h(e),a=c==null?void 0:c[s],p=H(e);return r.cloneElement(n,{id:s,key:e,expanded:a,padding:f,color:I,large:E,sticky:W,"aria-expanded":a,className:p,handleExpanderClick:j=>_(j,`${w}-${e}`),renderChildrenWhenClosed:b})}return n}))});te.Expander=A;A.displayName="ExpanderList.Expander";export{te as ExpanderList,te as default};
+import r,{useState as A,useRef as V,useEffect as _}from"react";import{Icon as Z}from"../Icons/Icon.js";import{AnalyticsId as P,ZIndex as q,IconSize as T}from"../../constants.js";import F from"../Icons/ChevronUp.js";import G from"../Icons/ChevronDown.js";import{useHover as K}from"../../hooks/useHover.js";import{usePrevious as M}from"../../hooks/usePrevious.js";import{useBreakpoint as Q,Breakpoint as Y}from"../../hooks/useBreakpoint.js";import{isElementInViewport as v}from"../../utils/viewport.js";import x from"classnames";import t from"./styles.module.scss";import{useUuid as S}from"../../hooks/useUuid.js";import{useSticky as ee}from"../../hooks/useSticky.js";import{mergeRefs as ne}from"../../utils/refs.js";import"../../uuid.js";import"../../utils/environment.js";import"../../theme/grid.js";import"../../hooks/useLayoutEvent.js";import"../../utils/debounce.js";const H=r.forwardRef((c,I)=>{const{id:p,children:N,padding:w=!0,color:f="neutral",className:L="",icon:g,large:b=!1,title:d,expanded:m=!1,sticky:R,testId:$,handleExpanderClick:W,onExpand:o,renderChildrenWhenClosed:u}=c,[i,j]=A(m),y=M(i),h=V(null),E=V(null),{isHovered:k}=K(E),z=Q(),{isOutsideWindow:C,isLeavingWindow:n,offsetHeight:e,contentWidth:s}=ee(h,E),a=R&&i&&C,l=typeof d=="object",B=x(L,{[t["expander-list__item--jsx"]]:l}),U=x(t["expander-list-link"],t[`expander-list-link--${f}`],{[t["expander-list-link--closed"]]:!i,[t["expander-list-link--large"]]:b,[t["expander-list-link--jsx"]]:l,[t["expander-list-link--sticky"]]:a&&!n,[t["expander-list-link--absolute"]]:a&&n}),X=x(t["expander-list-link__title"],{[t["expander-list-link__title--string"]]:!l,[t["expander-list-link__title--jsx"]]:l});_(()=>{m!==i&&j(m)},[m]),_(()=>{o&&i!==!!y&&o(i)},[i,o]);const D=()=>{if(!u&&!i)return null;const J=x(t["expander-list-link__main-content"],i&&t["expander-list-link__main-content--expanded"],w?t["expander-list-link__main-content--padding"]:"");return r.createElement("div",{className:J},N)};return r.createElement("li",{className:B,ref:ne([I,h]),style:{paddingTop:a&&e?`${e}px`:void 0}},r.createElement("button",{type:"button",id:p,onClick:W,"data-testid":$,"data-analyticsid":P.ExpanderListExpander,className:U,ref:E,"aria-expanded":i,style:{zIndex:k||a?q.ExpanderTrigger:void 0,width:a&&s?`${s}px`:void 0}},g&&r.createElement("span",{className:t["expander-list-link__icon"]},r.cloneElement(g,{size:z===Y.xs?T.XSmall:T.Small,isHovered:k})),r.createElement("span",{className:X},d),r.createElement("span",{className:t["expander-list-link__chevron"]},r.createElement(Z,{size:T.XSmall,svgIcon:i?F:G,isHovered:k}))),D())}),O=c=>r.isValidElement(c)&&c.type===H,te=r.forwardRef((c,I)=>{const{children:p,childPadding:N=!0,large:w,isOpen:f=!1,renderChildrenWhenClosed:L=!1,color:g,className:b="",accordion:d=!1,topBorder:m=!0,bottomBorder:R=!0,sticky:$=!1,testId:W}=c,[o,u]=A(),[i,j]=A(),y=S(),h=r.Children.count(p),E=x(t["expander-list"],b);function k(n,e){u(s=>d?{[e]:!(s!=null&&s[e])}:{...s,[e]:!(s!=null&&s[e])}),j(n.currentTarget)}const z=n=>x(t["expander-list__item"],{[t["expander-list__item--top"]]:n===0&&m,[t["expander-list__item--no-bottom"]]:n===h-1&&!R}),C=n=>`${y}-${n}`;return _(()=>{d&&i&&!v(i)&&i.scrollIntoView()},[d,i]),_(()=>{if(f){const n=C(0);u(e=>d?{[n]:!(e!=null&&e[n])}:{...e,[n]:!(e!=null&&e[n])})}},[f]),_(()=>{var n;if(!f){const e=(n=r.Children.map(p,s=>{if(O(s))return s}))==null?void 0:n.reduce((s,a,l)=>(typeof a.props.expanded<"u"&&(s[C(l)]=a.props.expanded),s),{});u({...o,...e})}},[p]),r.createElement("ul",{className:E,ref:I,"data-testid":W,"data-analyticsid":P.ExpanderList},r.Children.map(p,(n,e)=>{if(O(n)){const s=C(e),a=o==null?void 0:o[s],l=z(e);return r.cloneElement(n,{id:s,key:e,expanded:a,padding:N,color:g,large:w,sticky:$,"aria-expanded":a,className:l,handleExpanderClick:B=>k(B,`${y}-${e}`),renderChildrenWhenClosed:L})}return n}))});te.Expander=H;H.displayName="ExpanderList.Expander";export{te as ExpanderList,te as default};
 //# sourceMappingURL=index.js.map

package/components/ExpanderList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/utils/viewport.ts","../../../src/utils/refs.ts","../../../src/components/ExpanderList/ExpanderList.tsx"],"sourcesContent":["export const isElementInViewport = (el: HTMLElement): boolean => {\n  var { top, left, bottom, right } = el.getBoundingClientRect();\n\n  return (\n    top >= 0 &&\n    left >= 0 &&\n    bottom <= (window.innerHeight || document.documentElement.clientHeight) &&\n    right <= (window.innerWidth || document.documentElement.clientWidth)\n  );\n};\n","/**\n * Slår sammen refs fra forwardRef og useRef slik at begge deler kan brukes\n * Fra https://github.com/gregberge/react-merge-refs\n * @param refs array med refs som skal slås sammen\n * @returns refcallback som kan brukes på komponent\n */\nexport const mergeRefs = <T>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T> => {\n  return value => {\n    refs.forEach(ref => {\n      if (typeof ref === 'function') {\n        ref(value);\n      } else if (ref != null) {\n        (ref as React.MutableRefObject<T | null>).current = value;\n      }\n    });\n  };\n};\n\n/**\n * Sjekker om ref er et objekt (og ikke en funksjon)\n * @param ref\n * @returns type predicate\n */\nexport const isMutableRefObject = <T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T> => {\n  return typeof ref !== 'function' && ref !== null;\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport { PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { useHover } from '../../hooks/useHover';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isElementInViewport } from '../../utils/viewport';\n\nimport classNames from 'classnames';\n\nimport expanderListStyles from './styles.module.scss';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { useSticky } from '../../hooks/useSticky';\n\nimport { mergeRefs } from '../../utils/refs';\n\nexport type ExpanderListColors = PaletteNames;\nexport type ExpanderType = React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Toggles the bottom border of the last child element. */\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  /** Toggles the top border of the first child element. */\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}\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    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'>;\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    expanded = false,\n    sticky,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n  } = props;\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const breakpoint = useBreakpoint();\n\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const isJsxTitle = typeof title === 'object';\n\n  const itemClasses = classNames(className, { [expanderListStyles['expander-list__item--jsx']]: isJsxTitle });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\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 titleClasses = classNames(expanderListStyles['expander-list-link__title'], {\n    [expanderListStyles['expander-list-link__title--string']]: !isJsxTitle,\n    [expanderListStyles['expander-list-link__title--jsx']]: isJsxTitle,\n  });\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\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        {icon && (\n          <span className={expanderListStyles['expander-list-link__icon']}>\n            {React.cloneElement(icon, {\n              size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n              isHovered,\n            })}\n          </span>\n        )}\n        <span className={titleClasses}>{title}</span>\n        <span className={expanderListStyles['expander-list-link__chevron']}>\n          <Icon size={IconSize.XSmall} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />\n        </span>\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  } = 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          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n"],"names":["isElementInViewport","el","top","left","bottom","right","mergeRefs","refs","value","ref","Expander","React","props","id","children","padding","color","className","icon","large","title","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","expanderRef","useRef","triggerRef","isHovered","useHover","breakpoint","useBreakpoint","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","titleClasses","useEffect","renderContent","mainContentClasses","AnalyticsId","ZIndex","Breakpoint","IconSize","Icon","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","newActiveExpander","_a","child","acc","expanderItemClass"],"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 { PaletteNames } from '../../theme/palette';\nimport Icon, { IconSize } from '../Icons';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { useHover } from '../../hooks/useHover';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { isElementInViewport } from '../../utils/viewport';\n\nimport classNames from 'classnames';\n\nimport expanderListStyles from './styles.module.scss';\nimport { AnalyticsId, ZIndex } from '../../constants';\nimport { useUuid } from '../../hooks/useUuid';\nimport { useSticky } from '../../hooks/useSticky';\n\nimport { mergeRefs } from '../../utils/refs';\n\nexport type ExpanderListColors = PaletteNames;\nexport type ExpanderType = React.ForwardRefExoticComponent<ExpanderProps & React.RefAttributes<HTMLLIElement>>;\n\nexport interface ExpanderListCompound extends React.ForwardRefExoticComponent<ExpanderListProps & React.RefAttributes<HTMLUListElement>> {\n  Expander: ExpanderType;\n}\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Toggles the bottom border of the last child element. */\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  /** Toggles the top border of the first child element. */\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}\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    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'>;\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    expanded = false,\n    sticky,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n  } = props;\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered } = useHover(triggerRef);\n  const breakpoint = useBreakpoint();\n\n  const { isOutsideWindow, isLeavingWindow, offsetHeight, contentWidth } = useSticky(expanderRef, triggerRef);\n\n  const isSticky = sticky && isExpanded && isOutsideWindow;\n\n  const isJsxTitle = typeof title === 'object';\n\n  const itemClasses = classNames(className, { [expanderListStyles['expander-list__item--jsx']]: isJsxTitle });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\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 titleClasses = classNames(expanderListStyles['expander-list-link__title'], {\n    [expanderListStyles['expander-list-link__title--string']]: !isJsxTitle,\n    [expanderListStyles['expander-list-link__title--jsx']]: isJsxTitle,\n  });\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\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        {icon && (\n          <span className={expanderListStyles['expander-list-link__icon']}>\n            {React.cloneElement(icon, {\n              size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n              isHovered,\n            })}\n          </span>\n        )}\n        <span className={titleClasses}>{title}</span>\n        <span className={expanderListStyles['expander-list-link__chevron']}>\n          <Icon size={IconSize.XSmall} svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} />\n        </span>\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  } = 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          });\n        }\n        return child;\n      })}\n    </ul>\n  );\n}) as ExpanderListCompound;\n\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","expanded","sticky","testId","handleExpanderClick","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","expanderRef","useRef","triggerRef","isHovered","useHover","breakpoint","useBreakpoint","isOutsideWindow","isLeavingWindow","offsetHeight","contentWidth","useSticky","isSticky","isJsxTitle","itemClasses","classNames","expanderListStyles","expanderClasses","titleClasses","useEffect","renderContent","mainContentClasses","mergeRefs","AnalyticsId","ZIndex","Breakpoint","IconSize","Icon","ChevronUp","ChevronDown","isExpanderComponent","element","ExpanderList","childPadding","isOpen","accordion","topBorder","bottomBorder","activeExpander","setActiveExpander","latestExpander","setLatestExpander","uuid","useUuid","childCount","expanderListClasses","event","prevState","getExpanderItemClass","index","getExpanderId","isElementInViewport","newActiveExpander","_a","child","acc","expanderItemClass"],"mappings":"s2BA6EA,MAAMA,EAAyBC,EAAM,WAAyC,CAACC,EAAOC,IAAQ,CACtF,KAAA,CACJ,GAAAC,EACA,SAAAC,EACA,QAAAC,EAAU,GACV,MAAAC,EAAQ,UACR,UAAAC,EAAY,GACZ,KAAAC,EACA,MAAAC,EAAQ,GACR,MAAAC,EACA,SAAAC,EAAW,GACX,OAAAC,EACA,OAAAC,EACA,oBAAAC,EACA,SAAAC,EACA,yBAAAC,CACE,EAAAf,EACE,CAACgB,EAAYC,CAAa,EAAIC,EAAkBR,CAAQ,EACxDS,EAAqBC,EAAYJ,CAAU,EAC3CK,EAAcC,EAAsB,IAAI,EACxCC,EAAaD,EAA0B,IAAI,EAC3C,CAAE,UAAAE,CAAA,EAAcC,EAASF,CAAU,EACnCG,EAAaC,IAEb,CAAE,gBAAAC,EAAiB,gBAAAC,EAAiB,aAAAC,EAAc,aAAAC,GAAiBC,GAAUX,EAAaE,CAAU,EAEpGU,EAAWtB,GAAUK,GAAcY,EAEnCM,EAAa,OAAOzB,GAAU,SAE9B0B,EAAcC,EAAW9B,EAAW,CAAE,CAAC+B,EAAmB,6BAA8BH,EAAY,EAEpGI,EAAkBF,EAAWC,EAAmB,sBAAuBA,EAAmB,uBAAuBhC,KAAU,CAC/H,CAACgC,EAAmB,+BAAgC,CAACrB,EACrD,CAACqB,EAAmB,8BAA+B7B,EACnD,CAAC6B,EAAmB,4BAA6BH,EACjD,CAACG,EAAmB,+BAAgCJ,GAAY,CAACJ,EACjE,CAACQ,EAAmB,iCAAkCJ,GAAYJ,CAAA,CACnE,EAEKU,EAAeH,EAAWC,EAAmB,6BAA8B,CAC/E,CAACA,EAAmB,sCAAuC,CAACH,EAC5D,CAACG,EAAmB,mCAAoCH,CAAA,CACzD,EAEDM,EAAU,IAAM,CACV9B,IAAaM,GACfC,EAAcP,CAAQ,CACxB,EACC,CAACA,CAAQ,CAAC,EAEb8B,EAAU,IAAM,CACV1B,GAAYE,IAAe,CAAC,CAACG,GAC/BL,EAASE,CAAU,CACrB,EACC,CAACA,EAAYF,CAAQ,CAAC,EAEzB,MAAM2B,EAAgB,IAAM,CACtB,GAAA,CAAC1B,GAA4B,CAACC,EACzB,OAAA,KAGT,MAAM0B,EAAqBN,EACzBC,EAAmB,oCACnBrB,GAAcqB,EAAmB,8CACjCjC,EAAUiC,EAAmB,6CAA+C,EAAA,EAG9E,OAAQtC,EAAA,cAAA,MAAA,CAAI,UAAW2C,CAAA,EAAqBvC,CAAS,CAAA,EAGvD,OACGJ,EAAA,cAAA,KAAA,CACC,UAAWoC,EACX,IAAKQ,GAAU,CAAC1C,EAAKoB,CAAW,CAAC,EACjC,MAAO,CAAE,WAAYY,GAAYH,EAAe,GAAGA,MAAmB,MAAU,CAAA,EAE/E/B,EAAA,cAAA,SAAA,CACC,KAAK,SACL,GAAAG,EACA,QAASW,EACT,cAAaD,EACb,mBAAkBgC,EAAY,qBAC9B,UAAWN,EACX,IAAKf,EACL,gBAAeP,EACf,MAAO,CACL,OAAQQ,GAAaS,EAAWY,EAAO,gBAAkB,OACzD,MAAOZ,GAAYF,EAAe,GAAGA,MAAmB,MAC1D,CAAA,EAECxB,GACER,EAAA,cAAA,OAAA,CAAK,UAAWsC,EAAmB,2BAAA,EACjCtC,EAAM,aAAaQ,EAAM,CACxB,KAAMmB,IAAeoB,EAAW,GAAKC,EAAS,OAASA,EAAS,MAChE,UAAAvB,CACD,CAAA,CACH,EAEDzB,EAAA,cAAA,OAAA,CAAK,UAAWwC,CAAe,EAAA9B,CAAM,EACrCV,EAAA,cAAA,OAAA,CAAK,UAAWsC,EAAmB,8BAAA,EACjCtC,EAAA,cAAAiD,EAAA,CAAK,KAAMD,EAAS,OAAQ,QAAS/B,EAAaiC,EAAYC,EAAa,UAAA1B,CAAA,CAAsB,CACpG,CACF,EACCiB,EAAA,CACH,CAEJ,CAAC,EAIKU,EAAuBC,GAC3BrD,EAAM,eAA8BqD,CAAO,GAAMA,EAA+B,OAAStD,EAE9EuD,GAAetD,EAAM,WAAW,CAACC,EAA0BC,IAAqC,CACrG,KAAA,CACJ,SAAAE,EACA,aAAAmD,EAAe,GACf,MAAA9C,EACA,OAAA+C,EAAS,GACT,yBAAAxC,EAA2B,GAC3B,MAAAV,EACA,UAAAC,EAAY,GACZ,UAAAkD,EAAY,GACZ,UAAAC,EAAY,GACZ,aAAAC,EAAe,GACf,OAAA/C,EAAS,GACT,OAAAC,CACE,EAAAZ,EACE,CAAC2D,EAAgBC,CAAiB,EAAI1C,EAAyB,EAC/D,CAAC2C,EAAgBC,CAAiB,EAAI5C,EAAsB,EAC5D6C,EAAOC,IACPC,EAAalE,EAAM,SAAS,MAAMI,CAAQ,EAC1C+D,EAAsB9B,EAAWC,EAAmB,iBAAkB/B,CAAS,EAE5E,SAAAO,EAAoBsD,EAAkDjE,EAAkB,CAC/F0D,KAAgCJ,EAAY,CAAE,CAACtD,GAAK,EAACkE,GAAA,MAAAA,EAAYlE,GAAQ,EAAA,CAAE,GAAGkE,EAAW,CAAClE,GAAK,EAACkE,GAAA,MAAAA,EAAYlE,IAAM,EAClH4D,EAAkBK,EAAM,aAAa,CACvC,CAGM,MAAAE,EAAwBC,GACrBlC,EAAWC,EAAmB,uBAAwB,CAC3D,CAACA,EAAmB,6BAA8BiC,IAAU,GAAKb,EACjE,CAACpB,EAAmB,mCAAoCiC,IAAUL,EAAa,GAAK,CAACP,CAAA,CACtF,EAGGa,EAAiBD,GAAkB,GAAGP,KAAQO,IAEpD,OAAA9B,EAAU,IAAM,CACVgB,GAAaK,GAAkB,CAACW,EAAoBX,CAAc,GACpEA,EAAe,eAAe,CAChC,EACC,CAACL,EAAWK,CAAc,CAAC,EAE9BrB,EAAU,IAAM,CACd,GAAIe,EAAQ,CACJ,MAAArD,EAAKqE,EAAc,CAAC,EAC1BX,KAAgCJ,EAAY,CAAE,CAACtD,GAAK,EAACkE,GAAA,MAAAA,EAAYlE,GAAQ,EAAA,CAAE,GAAGkE,EAAW,CAAClE,GAAK,EAACkE,GAAA,MAAAA,EAAYlE,IAAM,CACpH,CAAA,EACC,CAACqD,CAAM,CAAC,EAEXf,EAAU,IAAM,OACd,GAAI,CAACe,EAAQ,CACX,MAAMkB,GAAoBC,EAAA3E,EAAM,SAAS,IAAII,EAAmBwE,GAAA,CAC1D,GAAAxB,EAAoBwB,CAAK,EACpB,OAAAA,CAEV,CAAA,IAJyB,YAAAD,EAItB,OAAO,CAACE,EAAKD,EAAOL,KAElB,OAAOK,EAAM,MAAM,SAAa,MAClCC,EAAIL,EAAcD,CAAK,GAAKK,EAAM,MAAM,UAEnCC,GACN,CAAoB,GAEvBhB,EAAkB,CAAE,GAAGD,EAAgB,GAAGc,CAAmB,CAAA,CAC/D,CAAA,EACC,CAACtE,CAAQ,CAAC,EAGVJ,EAAA,cAAA,KAAA,CAAG,UAAWmE,EAAqB,IAAAjE,EAAU,cAAaW,EAAQ,mBAAkBgC,EAAY,YAAA,EAC9F7C,EAAM,SAAS,IAAII,EAAU,CAACwE,EAAOL,IAAU,CAC1C,GAAAnB,EAAoBwB,CAAK,EAAG,CACxB,MAAAzE,EAAKqE,EAAcD,CAAK,EACxB5D,EAAWiD,GAAA,YAAAA,EAAiBzD,GAC5B2E,EAAoBR,EAAqBC,CAAK,EAE7C,OAAAvE,EAAM,aAAa4E,EAA4C,CACpE,GAAAzE,EACA,IAAKoE,EACL,SAAA5D,EACA,QAAS4C,EACT,MAAAjD,EACA,MAAAG,EACA,OAAAG,EACA,gBAAiBD,EACjB,UAAWmE,EACX,oBAAsBV,GAAyCtD,EAAoBsD,EAAO,GAAGJ,KAAQO,GAAO,EAC5G,yBAAAvD,CAAA,CACD,CACH,CACO,OAAA4D,CACR,CAAA,CACH,CAEJ,CAAC,EAEDtB,GAAa,SAAWvD,EACxBA,EAAS,YAAc"}

package/components/FormExample/FormExample.d.ts

@@ -9,7 +9,8 @@ export declare enum FormExampleVariants {
     checkbox = "checkbox",
     radiobutton = "radiobutton",
     textarea = "textarea",
-    input = "input"
+    input = "input",
+    select = "select"
 }
 export declare const FormExample: (props: FormExampleProps) => JSX.Element;
 export default FormExample;

package/components/FormExample/FormExample.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAM9C,UAAU,gBAAgB;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;CACpC;AAED,oBAAY,mBAAmB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WAgJrD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FormExample.d.ts","sourceRoot":"","sources":["../../../src/components/FormExample/FormExample.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAO9C,UAAU,gBAAgB;IACxB,WAAW,EAAE,mBAAmB,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;CACpC;AAED,oBAAY,mBAAmB;IAC7B,SAAS,cAAc;IACvB,QAAQ,aAAa;IACrB,WAAW,gBAAgB;IAC3B,QAAQ,aAAa;IACrB,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,WA6KrD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/components/FormExample/componentdata.json

@@ -1 +1 @@
-{"props":{"exampleType":{"defaultValue":null,"description":"","name":"exampleType","parent":{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"},"declarations":[{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"}],"required":true,"type":{"name":"enum","raw":"FormExampleVariants","value":[{"value":"\"formgroup\"","description":"","fullComment":"","tags":{}},{"value":"\"checkbox\"","description":"","fullComment":"","tags":{}},{"value":"\"radiobutton\"","description":"","fullComment":"","tags":{}},{"value":"\"textarea\"","description":"","fullComment":"","tags":{}},{"value":"\"input\"","description":"","fullComment":"","tags":{}}]}},"variant":{"defaultValue":null,"description":"","name":"variant","parent":{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"},"declarations":[{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}}}}
+{"props":{"exampleType":{"defaultValue":null,"description":"","name":"exampleType","parent":{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"},"declarations":[{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"}],"required":true,"type":{"name":"enum","raw":"FormExampleVariants","value":[{"value":"\"formgroup\"","description":"","fullComment":"","tags":{}},{"value":"\"checkbox\"","description":"","fullComment":"","tags":{}},{"value":"\"radiobutton\"","description":"","fullComment":"","tags":{}},{"value":"\"textarea\"","description":"","fullComment":"","tags":{}},{"value":"\"input\"","description":"","fullComment":"","tags":{}},{"value":"\"select\"","description":"","fullComment":"","tags":{}}]}},"variant":{"defaultValue":null,"description":"","name":"variant","parent":{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"},"declarations":[{"fileName":"src/components/FormExample/FormExample.tsx","name":"FormExampleProps"}],"required":false,"type":{"name":"enum","raw":"\"normal\" | \"bigform\"","value":[{"value":"\"normal\""},{"value":"\"bigform\""}]}}}}

package/components/FormExample/index.js

@@ -1,12 +1,12 @@
-import R,{createContext as Pr,useRef as F,useState as qr,useCallback as w,useEffect as ir,useMemo as Wr,isValidElement as pr}from"react";import{V as Hr}from"../../Validation.js";import{F as Se}from"../../FormGroup.js";import{C as ce}from"../../Checkbox.js";import{B as Gr}from"../../Button.js";import{R as Ce}from"../../RadioButton.js";import{T as sr}from"../../Textarea.js";import{I as cr}from"../../Input.js";import or from"../Icons/Hospital.js";import{F as _r,a as $r}from"../../FormLayout.js";import{i as zr}from"../../uuid.js";import"classnames";import"../Validation/styles.module.scss";import"../../constants.js";import"../FormGroup/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../debounce.js";import"../RadioButton/styles.module.scss";import"../Textarea/styles.module.scss";import"../Input/styles.module.scss";import"../FormLayout/styles.module.scss";var pe=e=>e instanceof HTMLElement;const ae={BLUR:"blur",CHANGE:"change",INPUT:"input"},ee={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},vr="select",Me="undefined",X={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};function Kr({ref:e},n,t){pe(e)&&t&&(e.addEventListener(n?ae.CHANGE:ae.INPUT,t),e.addEventListener(ae.BLUR,t))}var K=e=>e==null;const hr=e=>typeof e=="object";var G=e=>!K(e)&&!Array.isArray(e)&&hr(e)&&!(e instanceof Date),Re=e=>/^\w*$/.test(e),le=e=>e.filter(Boolean),Er=e=>le(e.replace(/["|']/g,"").replace(/\[/g,".").replace(/\]/g,"").split("."));function j(e,n,t){let c=-1;const o=Re(n)?[n]:Er(n),u=o.length,a=u-1;for(;++c<u;){const y=o[c];let l=t;if(c!==a){const p=e[y];l=G(p)||Array.isArray(p)?p:isNaN(+o[c+1])?{}:[]}e[y]=l,e=e[y]}return e}var Ge=(e,n={})=>{for(const t in e)Re(t)?n[t]=e[t]:j(n,t,e[t]);return n},M=e=>e===void 0,h=(e={},n,t)=>{const c=le(n.split(/[,[\].]+?/)).reduce((o,u)=>K(o)?o:o[u],e);return M(c)||c===e?M(e[n])?t:e[n]:c},Jr=(e,n)=>{for(const t in e)if(h(n,t)){const c=e[t];if(c){if(c.ref.focus&&M(c.ref.focus()))break;if(c.options){c.options[0].ref.focus();break}}}},ur=(e,n)=>{pe(e)&&e.removeEventListener&&(e.removeEventListener(ae.INPUT,n),e.removeEventListener(ae.CHANGE,n),e.removeEventListener(ae.BLUR,n))};const ar={isValid:!1,value:null};var Or=e=>Array.isArray(e)?e.reduce((n,t)=>t&&t.ref.checked?{isValid:!0,value:t.ref.value}:n,ar):ar,Qr=e=>[...e].filter(({selected:n})=>n).map(({value:n})=>n),we=e=>e.type==="radio",kr=e=>e.type==="file",fe=e=>e.type==="checkbox",Vr=e=>e.type===`${vr}-multiple`;const lr={value:!1,isValid:!1},fr={value:!0,isValid:!0};var xr=e=>{if(Array.isArray(e)){if(e.length>1){const o=e.filter(u=>u&&u.ref.checked).map(({ref:{value:u}})=>u);return{value:o,isValid:!!o.length}}const{checked:n,value:t,attributes:c}=e[0].ref;return n?c&&!M(c.value)?M(t)||t===""?fr:{value:t,isValid:!0}:fr:lr}return lr};function ue(e,n,t,c,o){const u=e.current[n];if(u){const{ref:{value:a,disabled:y},ref:l,valueAsNumber:p,valueAsDate:W,setValueAs:E}=u;return y&&c?void 0:kr(l)?l.files:we(l)?Or(u.options).value:Vr(l)?Qr(l.options):fe(l)?xr(u.options).value:o?a:p?a===""?NaN:+a:W?l.valueAsDate:E?E(a):a}if(t)return h(t.current,n)}function De(e){return e?!(e instanceof HTMLElement)||e.nodeType===Node.DOCUMENT_NODE?!1:De(e.parentNode):!0}var x=e=>G(e)&&!Object.keys(e).length,ze=e=>typeof e=="boolean";function Xr(e,n){const t=n.slice(0,-1).length;let c=0;for(;c<t;)e=M(e)?c++:e[n[c++]];return e}function H(e,n){const t=Re(n)?[n]:Er(n),c=t.length==1?e:Xr(e,t),o=t[t.length-1];let u;c&&delete c[o];for(let a=0;a<t.slice(0,-1).length;a++){let y=-1,l;const p=t.slice(0,-(a+1)),W=p.length-1;for(a>0&&(u=e);++y<p.length;){const E=p[y];l=l?l[E]:e[E],W===y&&(G(l)&&x(l)||Array.isArray(l)&&!l.filter(N=>G(N)&&!x(N)||ze(N)).length)&&(u?delete u[E]:delete e[E]),u=l}}return e}const dr=(e,n)=>e&&e.ref===n;function Yr(e,n,t,c,o,u){const{ref:a,ref:{name:y}}=t,l=e.current[y];if(!o){const p=ue(e,y,c);!M(p)&&j(c.current,y,p)}if(!a.type||!l){delete e.current[y];return}we(a)||fe(a)?Array.isArray(l.options)&&l.options.length?(le(l.options).forEach((p={},W)=>{(De(p.ref)&&dr(p,p.ref)||u)&&(ur(p.ref,n),H(l.options,`[${W}]`))}),l.options&&!le(l.options).length&&delete e.current[y]):delete e.current[y]:(De(a)&&dr(l,a)||u)&&(ur(a,n),delete e.current[y])}var te=e=>K(e)||!hr(e);function Ke(e,n){if(te(e)||te(n))return n;for(const t in n){const c=e[t],o=n[t];try{e[t]=G(c)&&G(o)||Array.isArray(c)&&Array.isArray(o)?Ke(c,o):o}catch{}}return e}function re(e,n,t){if(te(e)||te(n)||e instanceof Date||n instanceof Date)return e===n;if(!pr(e)){const c=Object.keys(e),o=Object.keys(n);if(c.length!==o.length)return!1;for(const u of c){const a=e[u];if(!(t&&u==="ref")){const y=n[u];if((G(a)||Array.isArray(a))&&(G(y)||Array.isArray(y))?!re(a,y,t):a!==y)return!1}}}return!0}function _e(e,n,t,c,o){let u=-1;for(;++u<e.length;){for(const a in e[u])Array.isArray(e[u][a])?(!t[u]&&(t[u]={}),t[u][a]=[],_e(e[u][a],h(n[u]||{},a,[]),t[u][a],t[u],a)):re(h(n[u]||{},a),e[u][a])?j(t[u]||{},a):t[u]=Object.assign(Object.assign({},t[u]),{[a]:!0});c&&!t.length&&delete c[o]}return t}var Zr=(e,n,t)=>Ke(_e(e,n,t.slice(0,e.length)),_e(n,e,t.slice(0,e.length))),Q=e=>typeof e=="string",He=(e,n,t,c,o)=>{const u={};for(const a in e.current)(M(o)||(Q(o)?a.startsWith(o):Array.isArray(o)&&o.find(y=>a.startsWith(y))))&&(u[a]=ue(e,a,void 0,c));return t?Ge(u):Ke(n,Ge(u))},Ur=({errors:e,name:n,error:t,validFields:c,fieldsWithValidation:o})=>{const u=M(t),a=h(e,n);return u&&!!a||!u&&!re(a,t,!0)||u&&h(o,n)&&!h(c,n)},Ar=e=>e instanceof RegExp,ye=e=>G(e)&&!Ar(e)?e:{value:e,message:""},Sr=e=>typeof e=="function",$e=e=>Q(e)||pr(e);function mr(e,n,t="validate"){if($e(e)||ze(e)&&!e)return{type:t,message:$e(e)?e:"",ref:n}}var et=(e,n,t,c,o)=>n?Object.assign(Object.assign({},t[e]),{types:Object.assign(Object.assign({},t[e]&&t[e].types?t[e].types:{}),{[c]:o||!0})}):{},Le=async(e,n,{ref:t,ref:{value:c},options:o,required:u,maxLength:a,minLength:y,min:l,max:p,pattern:W,validate:E},N)=>{const B=t.name,O={},L=we(t),k=fe(t),ne=L||k,P=c==="",_=et.bind(null,B,n,O),A=(S,V,v,D=X.maxLength,q=X.minLength)=>{const Y=S?V:v;O[B]=Object.assign({type:S?D:q,message:Y,ref:t},_(S?D:q,Y))};if(u&&(!L&&!k&&(P||K(c))||ze(c)&&!c||k&&!xr(o).isValid||L&&!Or(o).isValid)){const{value:S,message:V}=$e(u)?{value:!!u,message:u}:ye(u);if(S&&(O[B]=Object.assign({type:X.required,message:V,ref:ne?((e.current[B].options||[])[0]||{}).ref:t},_(X.required,V)),!n))return O}if((!K(l)||!K(p))&&c!==""){let S,V;const v=ye(p),D=ye(l);if(isNaN(c)){const q=t.valueAsDate||new Date(c);Q(v.value)&&(S=q>new Date(v.value)),Q(D.value)&&(V=q<new Date(D.value))}else{const q=t.valueAsNumber||parseFloat(c);K(v.value)||(S=q>v.value),K(D.value)||(V=q<D.value)}if((S||V)&&(A(!!S,v.message,D.message,X.max,X.min),!n))return O}if(Q(c)&&!P&&(a||y)){const S=ye(a),V=ye(y),v=!K(S.value)&&c.length>S.value,D=!K(V.value)&&c.length<V.value;if((v||D)&&(A(v,S.message,V.message),!n))return O}if(Q(c)&&W&&!P){const{value:S,message:V}=ye(W);if(Ar(S)&&!S.test(c)&&(O[B]=Object.assign({type:X.pattern,message:V,ref:t},_(X.pattern,V)),!n))return O}if(E){const S=ue(e,B,N,!1,!0),V=ne&&o?o[0].ref:t;if(Sr(E)){const v=await E(S),D=mr(v,V);if(D&&(O[B]=Object.assign(Object.assign({},D),_(X.validate,D.message)),!n))return O}else if(G(E)){let v={};for(const[D,q]of Object.entries(E)){if(!x(v)&&!n)break;const Y=await q(S),ve=mr(Y,V,D);ve&&(v=Object.assign(Object.assign({},ve),_(D,ve.message)),n&&(O[B]=v))}if(!x(v)&&(O[B]=Object.assign({ref:V},v),!n))return O}}return O};const Je=(e,n,t=[])=>{for(const c in n){const o=e+(G(n)?`.${c}`:`[${c}]`);te(n[c])?t.push(o):Je(o,n[c],t)}return t};var gr=(e,n,t,c,o)=>{let u;return t.add(n),x(e)||(u=h(e,n),(G(u)||Array.isArray(u))&&Je(n,u).forEach(a=>t.add(a))),M(u)?o?c:h(c,n):u},rt=({isOnBlur:e,isOnChange:n,isOnTouch:t,isTouched:c,isReValidateOnBlur:o,isReValidateOnChange:u,isBlurEvent:a,isSubmitted:y,isOnAll:l})=>l?!1:!y&&t?!(c||a):(y?o:e)?!a:(y?u:n)?a:!0,Te=e=>e.substring(0,e.indexOf("["));const tt=(e,n)=>RegExp(`^${n}([|.)\\d+`.replace(/\[/g,"\\[").replace(/\]/g,"\\]")).test(e);var nt=(e,n)=>[...e].some(t=>tt(n,t)),it=e=>e.type===`${vr}-one`;function st(e,n){const t=new MutationObserver(()=>{for(const c of Object.values(e.current))if(c&&c.options)for(const o of c.options)o&&o.ref&&De(o.ref)&&n(c);else c&&De(c.ref)&&n(c)});return t.observe(window.document,{childList:!0,subtree:!0}),t}var be=typeof window!==Me&&typeof document!==Me;function U(e){var n;let t;if(te(e)||be&&(e instanceof File||pe(e))||!["Set","Map","Object","Date","Array"].includes((n=e.constructor)===null||n===void 0?void 0:n.name))return e;if(e instanceof Date)return t=new Date(e.getTime()),t;if(e instanceof Set){t=new Set;for(const c of e)t.add(c);return t}if(e instanceof Map){t=new Map;for(const c of e.keys())t.set(c,U(e.get(c)));return t}t=Array.isArray(e)?[]:{};for(const c in e)t[c]=U(e[c]);return t}var yr=e=>({isOnSubmit:!e||e===ee.onSubmit,isOnBlur:e===ee.onBlur,isOnChange:e===ee.onChange,isOnAll:e===ee.all,isOnTouch:e===ee.onTouched}),br=e=>we(e)||fe(e);const ct=typeof window===Me,oe=be?"Proxy"in window:typeof Proxy!==Me;function ot({mode:e=ee.onSubmit,reValidateMode:n=ee.onChange,resolver:t,context:c,defaultValues:o={},shouldFocusError:u=!0,shouldUnregister:a=!0,criteriaMode:y}={}){const l=F({}),p=F({}),W=F({}),E=F(new Set),N=F({}),B=F({}),O=F({}),L=F({}),k=F(o),ne=F(!1),P=F(!1),_=F(),A=F({}),S=F({}),V=F(c),v=F(t),D=F(new Set),q=F(yr(e)),{isOnSubmit:Y,isOnTouch:ve}=q.current,$=y===ee.all,[de,Rr]=qr({isDirty:!1,isValidating:!1,dirtyFields:{},isSubmitted:!1,submitCount:0,touched:{},isSubmitting:!1,isSubmitSuccessful:!1,isValid:!Y,errors:{}}),T=F({isDirty:!oe,dirtyFields:!oe,touched:!oe||ve,isValidating:!oe,isSubmitting:!oe,isValid:!oe}),f=F(de),he=F(),{isOnBlur:Qe,isOnChange:Xe}=F(yr(n)).current;V.current=c,v.current=t,f.current=de,A.current=a?{}:x(A.current)?U(o):A.current;const I=w((r={})=>{ne.current||(f.current=Object.assign(Object.assign({},f.current),r),Rr(f.current))},[]),Ye=()=>T.current.isValidating&&I({isValidating:!0}),Ee=w((r,s,i=!1,m={},g)=>{let d=i||Ur({errors:f.current.errors,error:s,name:r,validFields:L.current,fieldsWithValidation:O.current});const b=h(f.current.errors,r);s?(H(L.current,r),d=d||!b||!re(b,s,!0),j(f.current.errors,r,s)):((h(O.current,r)||v.current)&&(j(L.current,r,!0),d=d||b),H(f.current.errors,r)),(d&&!K(i)||!x(m)||T.current.isValidating)&&I(Object.assign(Object.assign(Object.assign({},m),v.current?{isValid:!!g}:{}),{isValidating:!1}))},[]),Oe=w((r,s)=>{const{ref:i,options:m}=l.current[r],g=be&&pe(i)&&K(s)?"":s;we(i)?(m||[]).forEach(({ref:d})=>d.checked=d.value===g):kr(i)&&!Q(g)?i.files=g:Vr(i)?[...i.options].forEach(d=>d.selected=g.includes(d.value)):fe(i)&&m?m.length>1?m.forEach(({ref:d})=>d.checked=Array.isArray(g)?!!g.find(b=>b===d.value):g===d.value):m[0].ref.checked=!!g:i.value=g},[]),Ne=w((r,s)=>{if(T.current.isDirty){const i=me();return r&&s&&j(i,r,s),!re(i,k.current)}return!1},[]),ke=w((r,s=!0)=>{if(T.current.isDirty||T.current.dirtyFields){const i=!re(h(k.current,r),ue(l,r,A)),m=h(f.current.dirtyFields,r),g=f.current.isDirty;i?j(f.current.dirtyFields,r,!0):H(f.current.dirtyFields,r);const d={isDirty:Ne(),dirtyFields:f.current.dirtyFields},b=T.current.isDirty&&g!==d.isDirty||T.current.dirtyFields&&m!==h(f.current.dirtyFields,r);return b&&s&&I(d),b?d:{}}return{}},[]),Be=w(async(r,s)=>{const i=(await Le(l,$,l.current[r],A))[r];return Ee(r,i,s),M(i)},[Ee,$]),Ze=w(async r=>{const{errors:s}=await v.current(me(),V.current,$),i=f.current.isValid;if(Array.isArray(r)){const m=r.map(g=>{const d=h(s,g);return d?j(f.current.errors,g,d):H(f.current.errors,g),!d}).every(Boolean);return I({isValid:x(s),isValidating:!1}),m}else{const m=h(s,r);return Ee(r,m,i!==x(s),{},x(s)),!m}},[Ee,$]),Ve=w(async r=>{const s=r||Object.keys(l.current);if(Ye(),v.current)return Ze(s);if(Array.isArray(s)){!r&&(f.current.errors={});const i=await Promise.all(s.map(async m=>await Be(m,null)));return I({isValidating:!1}),i.every(Boolean)}return await Be(s)},[Ze,Be]),Ue=w((r,s,{shouldDirty:i,shouldValidate:m})=>{const g={};j(g,r,s);for(const d of Je(r,s))l.current[d]&&(Oe(d,h(g,d)),i&&ke(d),m&&Ve(d))},[Ve,Oe,ke]),er=w((r,s,i)=>{if(!a&&!te(s)&&j(A.current,r,Array.isArray(s)?[...s]:Object.assign({},s)),l.current[r])Oe(r,s),i.shouldDirty&&ke(r),i.shouldValidate&&Ve(r);else if(!te(s)&&(Ue(r,s,i),D.current.has(r))){const m=Te(r)||r;j(p.current,r,s),S.current[m]({[m]:h(p.current,m)}),(T.current.isDirty||T.current.dirtyFields)&&i.shouldDirty&&(j(f.current.dirtyFields,r,Zr(s,h(k.current,r,[]),h(f.current.dirtyFields,r,[]))),I({isDirty:!re(Object.assign(Object.assign({},me()),{[r]:s}),k.current)}))}!a&&j(A.current,r,s)},[ke,Oe,Ue]),rr=r=>P.current||E.current.has(r)||E.current.has((r.match(/\w+/)||[])[0]),xe=r=>{let s=!0;if(!x(N.current))for(const i in N.current)(!r||!N.current[i].size||N.current[i].has(r)||N.current[i].has(Te(r)))&&(B.current[i](),s=!1);return s};function Dr(r,s,i){er(r,s,i||{}),rr(r)&&I(),xe(r)}_.current=_.current?_.current:async({type:r,target:s})=>{let i=s.name;const m=l.current[i];let g,d;if(m){const b=r===ae.BLUR,z=rt(Object.assign({isBlurEvent:b,isReValidateOnChange:Xe,isReValidateOnBlur:Qe,isTouched:!!h(f.current.touched,i),isSubmitted:f.current.isSubmitted},q.current));let J=ke(i,!1),ge=!x(J)||!b&&rr(i);if(b&&!h(f.current.touched,i)&&T.current.touched&&(j(f.current.touched,i,!0),J=Object.assign(Object.assign({},J),{touched:f.current.touched})),!a&&fe(s)&&j(A.current,i,ue(l,i)),z)return!b&&xe(i),(!x(J)||ge&&x(J))&&I(J);if(Ye(),v.current){const{errors:C}=await v.current(me(),V.current,$),Ae=f.current.isValid;if(g=h(C,i),fe(s)&&!g&&v.current){const Z=Te(i),ie=h(C,Z,{});ie.type&&ie.message&&(g=ie),Z&&(ie||h(f.current.errors,Z))&&(i=Z)}d=x(C),Ae!==d&&(ge=!0)}else g=(await Le(l,$,m,A))[i];!b&&xe(i),Ee(i,g,ge,J,d)}};function tr(r){if(!a){let s=U(r);for(const i of D.current)Re(i)&&!s[i]&&(s=Object.assign(Object.assign({},s),{[i]:[]}));return s}return r}function me(r){if(Q(r))return ue(l,r,A);if(Array.isArray(r)){const s={};for(const i of r)j(s,i,ue(l,i,A));return s}return tr(He(l,U(A.current),a))}const Fe=w(async(r={})=>{const s=x(l.current)?k.current:{},{errors:i}=await v.current(Object.assign(Object.assign(Object.assign({},s),me()),r),V.current,$)||{},m=x(i);f.current.isValid!==m&&I({isValid:m})},[$]),je=w((r,s)=>{Yr(l,_.current,r,A,a,s),a&&(H(L.current,r.ref.name),H(O.current,r.ref.name))},[a]),Pe=w(r=>{if(P.current)I();else{for(const s of E.current)if(s.startsWith(r)){I();break}xe(r)}},[]),Ie=w((r,s)=>{r&&(je(r,s),a&&!le(r.options||[]).length&&(H(f.current.errors,r.ref.name),j(f.current.dirtyFields,r.ref.name,!0),I({isDirty:Ne()}),T.current.isValid&&v.current&&Fe(),Pe(r.ref.name)))},[Fe,je]);function wr(r){r&&(Array.isArray(r)?r:[r]).forEach(s=>l.current[s]&&Re(s)?delete f.current.errors[s]:H(f.current.errors,s)),I({errors:r?f.current.errors:{}})}function Fr(r,s){const i=(l.current[r]||{}).ref;j(f.current.errors,r,Object.assign(Object.assign({},s),{ref:i})),I({isValid:!1}),s.shouldFocus&&i&&i.focus&&i.focus()}const qe=w((r,s,i)=>{const m=i?N.current[i]:E.current;let g=He(l,U(A.current),a,!1,r);if(Q(r)){const b=Te(r)||r;return D.current.has(b)&&(g=Object.assign(Object.assign({},W.current),g)),gr(g,r,m,M(h(k.current,r))?s:h(k.current,r),!0)}const d=M(s)?k.current:s;return Array.isArray(r)?r.reduce((b,z)=>Object.assign(Object.assign({},b),{[z]:gr(g,z,m,d)}),{}):(P.current=M(i),Ge(!x(g)&&g||d))},[]);function jr(r,s){return qe(r,s)}function Ir(r){for(const s of Array.isArray(r)?r:[r])Ie(l.current[s],!0)}function We(r,s={}){const{name:i,type:m,value:g}=r,d=Object.assign({ref:r},s),b=l.current,z=br(r),J=nt(D.current,i),ge=se=>be&&(!pe(r)||se===r);let C=b[i],Ae=!0,Z;if(C&&(z?Array.isArray(C.options)&&le(C.options).find(se=>g===se.ref.value&&ge(se.ref)):ge(C.ref))){b[i]=Object.assign(Object.assign({},C),s);return}m?C=z?Object.assign({options:[...le(C&&C.options||[]),{ref:r}],ref:{type:m,name:i}},s):Object.assign({},d):C=d,b[i]=C;const ie=M(h(A.current,i));(!x(k.current)||!ie)&&(Z=h(ie?k.current:A.current,i),Ae=M(Z),!Ae&&!J&&Oe(i,Z)),x(s)||(j(O.current,i,!0),!Y&&T.current.isValid&&Le(l,$,C,A).then(se=>{const Br=f.current.isValid;x(se)?j(L.current,i,!0):H(L.current,i),Br!==x(se)&&I()})),a&&!(J&&Ae)&&!J&&H(f.current.dirtyFields,i),m&&Kr(z&&C.options?C.options[C.options.length-1]:C,z||it(r),_.current)}function Cr(r,s){if(!ct)if(Q(r))We({name:r},s);else if(G(r)&&"name"in r)We(r,s);else return i=>i&&We(i,r)}const Lr=w((r,s)=>async i=>{i&&i.preventDefault&&(i.preventDefault(),i.persist());let m={},g=tr(He(l,U(A.current),a,!0));T.current.isSubmitting&&I({isSubmitting:!0});try{if(v.current){const{errors:d,values:b}=await v.current(g,V.current,$);f.current.errors=m=d,g=b}else for(const d of Object.values(l.current))if(d){const{name:b}=d.ref,z=await Le(l,$,d,A);z[b]?(j(m,b,z[b]),H(L.current,b)):h(O.current,b)&&(H(f.current.errors,b),j(L.current,b,!0))}x(m)&&Object.keys(f.current.errors).every(d=>d in l.current)?(I({errors:{},isSubmitting:!0}),await r(g,i)):(f.current.errors=Object.assign(Object.assign({},f.current.errors),m),s&&await s(f.current.errors,i),u&&Jr(l.current,f.current.errors))}finally{f.current.isSubmitting=!1,I({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:x(f.current.errors),submitCount:f.current.submitCount+1})}},[u,$]),Tr=({errors:r,isDirty:s,isSubmitted:i,touched:m,isValid:g,submitCount:d,dirtyFields:b})=>{g||(L.current={},O.current={}),p.current={},E.current=new Set,P.current=!1,I({submitCount:d?f.current.submitCount:0,isDirty:s?f.current.isDirty:!1,isSubmitted:i?f.current.isSubmitted:!1,isValid:g?f.current.isValid:!1,dirtyFields:b?f.current.dirtyFields:{},touched:m?f.current.touched:{},errors:r?f.current.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},Mr=(r,s={})=>{if(be){for(const i of Object.values(l.current))if(i){const{ref:m,options:g}=i,d=br(m)&&Array.isArray(g)?g[0].ref:m;if(pe(d))try{d.closest("form").reset();break}catch{}}}l.current={},k.current=Object.assign({},r||k.current),r&&xe(""),Object.values(S.current).forEach(i=>Sr(i)&&i()),A.current=a?{}:U(r||k.current),Tr(s)};ir(()=>{t&&T.current.isValid&&Fe(),he.current=he.current||!be?he.current:st(l,Ie)},[Ie,k.current]),ir(()=>()=>{he.current&&he.current.disconnect(),ne.current=!0,Object.values(l.current).forEach(r=>Ie(r,!0))},[]),!t&&T.current.isValid&&(de.isValid=re(L.current,O.current)&&x(f.current.errors));const nr={trigger:Ve,setValue:w(Dr,[er,Ve]),getValues:w(me,[]),register:w(Cr,[k.current]),unregister:w(Ir,[]),formState:oe?new Proxy(de,{get:(r,s)=>{if(s in r)return T.current[s]=!0,r[s]}}):de},Nr=Wr(()=>Object.assign({isFormDirty:Ne,updateWatchedValue:Pe,shouldUnregister:a,updateFormState:I,removeFieldEventListener:je,watchInternal:qe,mode:q.current,reValidateMode:{isReValidateOnBlur:Qe,isReValidateOnChange:Xe},validateResolver:t?Fe:void 0,fieldsRef:l,resetFieldArrayFunctionRef:S,useWatchFieldsRef:N,useWatchRenderFunctionsRef:B,fieldArrayDefaultValuesRef:p,validFieldsRef:L,fieldsWithValidationRef:O,fieldArrayNamesRef:D,readFormStateRef:T,formStateRef:f,defaultValuesRef:k,shallowFieldsStateRef:A,fieldArrayValuesRef:W},nr),[k.current,Pe,a,je,qe]);return Object.assign({watch:jr,control:Nr,handleSubmit:Lr,reset:w(Mr,[]),clearErrors:w(wr,[]),setError:w(Fr,[]),errors:de.errors},nr)}const ut=Pr(null);ut.displayName="RHFContext";var at=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e))(at||{});const Qt=e=>{const{exampleType:n="formgroup"}=e,{register:t,handleSubmit:c,errors:o}=ot(),u="field1",a="field2",y="field3",l="field4",p="field5",W=o[u]||o[a]||o[y]||o[l]||o[p],E="Du m\xE5 velge et alternativ",N="Du m\xE5 velge to alternativ",B="Det kan ikke legges inn mer enn 40 tegn",O="Du m\xE5 skrive noe her",L=[R.createElement(ce,{key:0,inputId:"checkbox1",label:"Checkbox 1",ref:t({required:E})}),R.createElement(ce,{key:1,inputId:"checkbox2",label:"Checkbox 2",ref:t({required:E})}),R.createElement(ce,{key:2,inputId:"checkbox3",label:"Checkbox 3",ref:t({required:E})})],k=P=>P.length>=2||N,ne=()=>{if(n==="formgroup")return[R.createElement(Se,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:o[u]?o[u].message:void 0,variant:e.variant,name:u},R.createElement(_r,{maxColumns:$r.two},L.map(P=>P))),R.createElement(Se,{key:1,legend:"Velg minst to",error:o[a]?o[a].message:void 0,variant:e.variant,name:a},R.createElement(ce,{inputId:"checkbox4",label:"Checkbox 4",ref:t({validate:k})}),R.createElement(ce,{inputId:"checkbox5",label:"Checkbox 5",ref:t({validate:k})}),R.createElement(ce,{inputId:"checkbox6",label:"Checkbox 6",ref:t({validate:k})})),R.createElement(Se,{key:2,legend:"Velg en",error:o[y]?o[y].message:void 0,variant:e.variant,name:y},R.createElement(Ce,{inputId:"radiobutton1",label:"Radiobutton 1",ref:t({required:E})}),R.createElement(Ce,{inputId:"radiobutton2",label:"Radiobutton 2",ref:t({required:E})}),R.createElement(Ce,{inputId:"radiobutton3",label:"Radiobutton 3",ref:t({required:E})})),R.createElement(Se,{key:3,error:o[l]?o[l].message:void 0},R.createElement(sr,{defaultValue:`Dette er en test 
+import v,{createContext as qr,useRef as F,useState as Wr,useCallback as R,useEffect as ir,useMemo as Hr,isValidElement as vr}from"react";import{V as Gr}from"../../Validation.js";import{F as ye}from"../../FormGroup.js";import{C as ce}from"../../Checkbox.js";import{B as _r}from"../../Button.js";import{R as Ce}from"../../RadioButton.js";import{T as sr}from"../../Textarea.js";import{I as cr}from"../../Input.js";import or from"../Icons/Hospital.js";import{F as $r,a as zr}from"../../FormLayout.js";import{isTest as Kr}from"../../utils/environment.js";import{S as ur}from"../../Select.js";import"classnames";import"../Validation/styles.module.scss";import"../../constants.js";import"../FormGroup/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../uuid.js";import"../Icons/Check.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../theme/grid.js";import"../Checkbox/styles.module.scss";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useBreakpoint.js";import"../Button/styles.module.scss";import"../Icons/ArrowRight.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../RadioButton/styles.module.scss";import"../Textarea/styles.module.scss";import"../Input/styles.module.scss";import"../FormLayout/styles.module.scss";import"../Select/styles.module.scss";import"../Icons/ChevronDown.js";var ve=e=>e instanceof HTMLElement;const ae={BLUR:"blur",CHANGE:"change",INPUT:"input"},ee={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},hr="select",Me="undefined",X={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};function Jr({ref:e},n,t){ve(e)&&t&&(e.addEventListener(n?ae.CHANGE:ae.INPUT,t),e.addEventListener(ae.BLUR,t))}var K=e=>e==null;const Or=e=>typeof e=="object";var G=e=>!K(e)&&!Array.isArray(e)&&Or(e)&&!(e instanceof Date),De=e=>/^\w*$/.test(e),le=e=>e.filter(Boolean),Er=e=>le(e.replace(/["|']/g,"").replace(/\[/g,".").replace(/\]/g,"").split("."));function j(e,n,t){let c=-1;const o=De(n)?[n]:Er(n),u=o.length,a=u-1;for(;++c<u;){const y=o[c];let l=t;if(c!==a){const b=e[y];l=G(b)||Array.isArray(b)?b:isNaN(+o[c+1])?{}:[]}e[y]=l,e=e[y]}return e}var Ge=(e,n={})=>{for(const t in e)De(t)?n[t]=e[t]:j(n,t,e[t]);return n},B=e=>e===void 0,E=(e={},n,t)=>{const c=le(n.split(/[,[\].]+?/)).reduce((o,u)=>K(o)?o:o[u],e);return B(c)||c===e?B(e[n])?t:e[n]:c},Qr=(e,n)=>{for(const t in e)if(E(n,t)){const c=e[t];if(c){if(c.ref.focus&&B(c.ref.focus()))break;if(c.options){c.options[0].ref.focus();break}}}},ar=(e,n)=>{ve(e)&&e.removeEventListener&&(e.removeEventListener(ae.INPUT,n),e.removeEventListener(ae.CHANGE,n),e.removeEventListener(ae.BLUR,n))};const lr={isValid:!1,value:null};var kr=e=>Array.isArray(e)?e.reduce((n,t)=>t&&t.ref.checked?{isValid:!0,value:t.ref.value}:n,lr):lr,Xr=e=>[...e].filter(({selected:n})=>n).map(({value:n})=>n),we=e=>e.type==="radio",Vr=e=>e.type==="file",fe=e=>e.type==="checkbox",xr=e=>e.type===`${hr}-multiple`;const fr={value:!1,isValid:!1},dr={value:!0,isValid:!0};var Ar=e=>{if(Array.isArray(e)){if(e.length>1){const o=e.filter(u=>u&&u.ref.checked).map(({ref:{value:u}})=>u);return{value:o,isValid:!!o.length}}const{checked:n,value:t,attributes:c}=e[0].ref;return n?c&&!B(c.value)?B(t)||t===""?dr:{value:t,isValid:!0}:dr:fr}return fr};function ue(e,n,t,c,o){const u=e.current[n];if(u){const{ref:{value:a,disabled:y},ref:l,valueAsNumber:b,valueAsDate:L,setValueAs:I}=u;return y&&c?void 0:Vr(l)?l.files:we(l)?kr(u.options).value:xr(l)?Xr(l.options):fe(l)?Ar(u.options).value:o?a:b?a===""?NaN:+a:L?l.valueAsDate:I?I(a):a}if(t)return E(t.current,n)}function Re(e){return e?!(e instanceof HTMLElement)||e.nodeType===Node.DOCUMENT_NODE?!1:Re(e.parentNode):!0}var A=e=>G(e)&&!Object.keys(e).length,ze=e=>typeof e=="boolean";function Yr(e,n){const t=n.slice(0,-1).length;let c=0;for(;c<t;)e=B(e)?c++:e[n[c++]];return e}function H(e,n){const t=De(n)?[n]:Er(n),c=t.length==1?e:Yr(e,t),o=t[t.length-1];let u;c&&delete c[o];for(let a=0;a<t.slice(0,-1).length;a++){let y=-1,l;const b=t.slice(0,-(a+1)),L=b.length-1;for(a>0&&(u=e);++y<b.length;){const I=b[y];l=l?l[I]:e[I],L===y&&(G(l)&&A(l)||Array.isArray(l)&&!l.filter(w=>G(w)&&!A(w)||ze(w)).length)&&(u?delete u[I]:delete e[I]),u=l}}return e}const mr=(e,n)=>e&&e.ref===n;function Zr(e,n,t,c,o,u){const{ref:a,ref:{name:y}}=t,l=e.current[y];if(!o){const b=ue(e,y,c);!B(b)&&j(c.current,y,b)}if(!a.type||!l){delete e.current[y];return}we(a)||fe(a)?Array.isArray(l.options)&&l.options.length?(le(l.options).forEach((b={},L)=>{(Re(b.ref)&&mr(b,b.ref)||u)&&(ar(b.ref,n),H(l.options,`[${L}]`))}),l.options&&!le(l.options).length&&delete e.current[y]):delete e.current[y]:(Re(a)&&mr(l,a)||u)&&(ar(a,n),delete e.current[y])}var te=e=>K(e)||!Or(e);function Ke(e,n){if(te(e)||te(n))return n;for(const t in n){const c=e[t],o=n[t];try{e[t]=G(c)&&G(o)||Array.isArray(c)&&Array.isArray(o)?Ke(c,o):o}catch{}}return e}function re(e,n,t){if(te(e)||te(n)||e instanceof Date||n instanceof Date)return e===n;if(!vr(e)){const c=Object.keys(e),o=Object.keys(n);if(c.length!==o.length)return!1;for(const u of c){const a=e[u];if(!(t&&u==="ref")){const y=n[u];if((G(a)||Array.isArray(a))&&(G(y)||Array.isArray(y))?!re(a,y,t):a!==y)return!1}}}return!0}function _e(e,n,t,c,o){let u=-1;for(;++u<e.length;){for(const a in e[u])Array.isArray(e[u][a])?(!t[u]&&(t[u]={}),t[u][a]=[],_e(e[u][a],E(n[u]||{},a,[]),t[u][a],t[u],a)):re(E(n[u]||{},a),e[u][a])?j(t[u]||{},a):t[u]=Object.assign(Object.assign({},t[u]),{[a]:!0});c&&!t.length&&delete c[o]}return t}var Ur=(e,n,t)=>Ke(_e(e,n,t.slice(0,e.length)),_e(n,e,t.slice(0,e.length))),Q=e=>typeof e=="string",He=(e,n,t,c,o)=>{const u={};for(const a in e.current)(B(o)||(Q(o)?a.startsWith(o):Array.isArray(o)&&o.find(y=>a.startsWith(y))))&&(u[a]=ue(e,a,void 0,c));return t?Ge(u):Ke(n,Ge(u))},et=({errors:e,name:n,error:t,validFields:c,fieldsWithValidation:o})=>{const u=B(t),a=E(e,n);return u&&!!a||!u&&!re(a,t,!0)||u&&E(o,n)&&!E(c,n)},Sr=e=>e instanceof RegExp,pe=e=>G(e)&&!Sr(e)?e:{value:e,message:""},Dr=e=>typeof e=="function",$e=e=>Q(e)||vr(e);function gr(e,n,t="validate"){if($e(e)||ze(e)&&!e)return{type:t,message:$e(e)?e:"",ref:n}}var rt=(e,n,t,c,o)=>n?Object.assign(Object.assign({},t[e]),{types:Object.assign(Object.assign({},t[e]&&t[e].types?t[e].types:{}),{[c]:o||!0})}):{},Le=async(e,n,{ref:t,ref:{value:c},options:o,required:u,maxLength:a,minLength:y,min:l,max:b,pattern:L,validate:I},w)=>{const q=t.name,k={},M=we(t),S=fe(t),ne=M||S,_=c==="",P=rt.bind(null,q,n,k),V=(h,x,O,D=X.maxLength,W=X.minLength)=>{const Y=h?x:O;k[q]=Object.assign({type:h?D:W,message:Y,ref:t},P(h?D:W,Y))};if(u&&(!M&&!S&&(_||K(c))||ze(c)&&!c||S&&!Ar(o).isValid||M&&!kr(o).isValid)){const{value:h,message:x}=$e(u)?{value:!!u,message:u}:pe(u);if(h&&(k[q]=Object.assign({type:X.required,message:x,ref:ne?((e.current[q].options||[])[0]||{}).ref:t},P(X.required,x)),!n))return k}if((!K(l)||!K(b))&&c!==""){let h,x;const O=pe(b),D=pe(l);if(isNaN(c)){const W=t.valueAsDate||new Date(c);Q(O.value)&&(h=W>new Date(O.value)),Q(D.value)&&(x=W<new Date(D.value))}else{const W=t.valueAsNumber||parseFloat(c);K(O.value)||(h=W>O.value),K(D.value)||(x=W<D.value)}if((h||x)&&(V(!!h,O.message,D.message,X.max,X.min),!n))return k}if(Q(c)&&!_&&(a||y)){const h=pe(a),x=pe(y),O=!K(h.value)&&c.length>h.value,D=!K(x.value)&&c.length<x.value;if((O||D)&&(V(O,h.message,x.message),!n))return k}if(Q(c)&&L&&!_){const{value:h,message:x}=pe(L);if(Sr(h)&&!h.test(c)&&(k[q]=Object.assign({type:X.pattern,message:x,ref:t},P(X.pattern,x)),!n))return k}if(I){const h=ue(e,q,w,!1,!0),x=ne&&o?o[0].ref:t;if(Dr(I)){const O=await I(h),D=gr(O,x);if(D&&(k[q]=Object.assign(Object.assign({},D),P(X.validate,D.message)),!n))return k}else if(G(I)){let O={};for(const[D,W]of Object.entries(I)){if(!A(O)&&!n)break;const Y=await W(h),he=gr(Y,x,D);he&&(O=Object.assign(Object.assign({},he),P(D,he.message)),n&&(k[q]=O))}if(!A(O)&&(k[q]=Object.assign({ref:x},O),!n))return k}}return k};const Je=(e,n,t=[])=>{for(const c in n){const o=e+(G(n)?`.${c}`:`[${c}]`);te(n[c])?t.push(o):Je(o,n[c],t)}return t};var yr=(e,n,t,c,o)=>{let u;return t.add(n),A(e)||(u=E(e,n),(G(u)||Array.isArray(u))&&Je(n,u).forEach(a=>t.add(a))),B(u)?o?c:E(c,n):u},tt=({isOnBlur:e,isOnChange:n,isOnTouch:t,isTouched:c,isReValidateOnBlur:o,isReValidateOnChange:u,isBlurEvent:a,isSubmitted:y,isOnAll:l})=>l?!1:!y&&t?!(c||a):(y?o:e)?!a:(y?u:n)?a:!0,Te=e=>e.substring(0,e.indexOf("["));const nt=(e,n)=>RegExp(`^${n}([|.)\\d+`.replace(/\[/g,"\\[").replace(/\]/g,"\\]")).test(e);var it=(e,n)=>[...e].some(t=>nt(n,t)),st=e=>e.type===`${hr}-one`;function ct(e,n){const t=new MutationObserver(()=>{for(const c of Object.values(e.current))if(c&&c.options)for(const o of c.options)o&&o.ref&&Re(o.ref)&&n(c);else c&&Re(c.ref)&&n(c)});return t.observe(window.document,{childList:!0,subtree:!0}),t}var be=typeof window!==Me&&typeof document!==Me;function U(e){var n;let t;if(te(e)||be&&(e instanceof File||ve(e))||!["Set","Map","Object","Date","Array"].includes((n=e.constructor)===null||n===void 0?void 0:n.name))return e;if(e instanceof Date)return t=new Date(e.getTime()),t;if(e instanceof Set){t=new Set;for(const c of e)t.add(c);return t}if(e instanceof Map){t=new Map;for(const c of e.keys())t.set(c,U(e.get(c)));return t}t=Array.isArray(e)?[]:{};for(const c in e)t[c]=U(e[c]);return t}var pr=e=>({isOnSubmit:!e||e===ee.onSubmit,isOnBlur:e===ee.onBlur,isOnChange:e===ee.onChange,isOnAll:e===ee.all,isOnTouch:e===ee.onTouched}),br=e=>we(e)||fe(e);const ot=typeof window===Me,oe=be?"Proxy"in window:typeof Proxy!==Me;function ut({mode:e=ee.onSubmit,reValidateMode:n=ee.onChange,resolver:t,context:c,defaultValues:o={},shouldFocusError:u=!0,shouldUnregister:a=!0,criteriaMode:y}={}){const l=F({}),b=F({}),L=F({}),I=F(new Set),w=F({}),q=F({}),k=F({}),M=F({}),S=F(o),ne=F(!1),_=F(!1),P=F(),V=F({}),h=F({}),x=F(c),O=F(t),D=F(new Set),W=F(pr(e)),{isOnSubmit:Y,isOnTouch:he}=W.current,$=y===ee.all,[de,Rr]=Wr({isDirty:!1,isValidating:!1,dirtyFields:{},isSubmitted:!1,submitCount:0,touched:{},isSubmitting:!1,isSubmitSuccessful:!1,isValid:!Y,errors:{}}),N=F({isDirty:!oe,dirtyFields:!oe,touched:!oe||he,isValidating:!oe,isSubmitting:!oe,isValid:!oe}),f=F(de),Oe=F(),{isOnBlur:Qe,isOnChange:Xe}=F(pr(n)).current;x.current=c,O.current=t,f.current=de,V.current=a?{}:A(V.current)?U(o):V.current;const C=R((r={})=>{ne.current||(f.current=Object.assign(Object.assign({},f.current),r),Rr(f.current))},[]),Ye=()=>N.current.isValidating&&C({isValidating:!0}),Ee=R((r,s,i=!1,m={},g)=>{let d=i||et({errors:f.current.errors,error:s,name:r,validFields:M.current,fieldsWithValidation:k.current});const p=E(f.current.errors,r);s?(H(M.current,r),d=d||!p||!re(p,s,!0),j(f.current.errors,r,s)):((E(k.current,r)||O.current)&&(j(M.current,r,!0),d=d||p),H(f.current.errors,r)),(d&&!K(i)||!A(m)||N.current.isValidating)&&C(Object.assign(Object.assign(Object.assign({},m),O.current?{isValid:!!g}:{}),{isValidating:!1}))},[]),ke=R((r,s)=>{const{ref:i,options:m}=l.current[r],g=be&&ve(i)&&K(s)?"":s;we(i)?(m||[]).forEach(({ref:d})=>d.checked=d.value===g):Vr(i)&&!Q(g)?i.files=g:xr(i)?[...i.options].forEach(d=>d.selected=g.includes(d.value)):fe(i)&&m?m.length>1?m.forEach(({ref:d})=>d.checked=Array.isArray(g)?!!g.find(p=>p===d.value):g===d.value):m[0].ref.checked=!!g:i.value=g},[]),Ne=R((r,s)=>{if(N.current.isDirty){const i=me();return r&&s&&j(i,r,s),!re(i,S.current)}return!1},[]),Ve=R((r,s=!0)=>{if(N.current.isDirty||N.current.dirtyFields){const i=!re(E(S.current,r),ue(l,r,V)),m=E(f.current.dirtyFields,r),g=f.current.isDirty;i?j(f.current.dirtyFields,r,!0):H(f.current.dirtyFields,r);const d={isDirty:Ne(),dirtyFields:f.current.dirtyFields},p=N.current.isDirty&&g!==d.isDirty||N.current.dirtyFields&&m!==E(f.current.dirtyFields,r);return p&&s&&C(d),p?d:{}}return{}},[]),Be=R(async(r,s)=>{const i=(await Le(l,$,l.current[r],V))[r];return Ee(r,i,s),B(i)},[Ee,$]),Ze=R(async r=>{const{errors:s}=await O.current(me(),x.current,$),i=f.current.isValid;if(Array.isArray(r)){const m=r.map(g=>{const d=E(s,g);return d?j(f.current.errors,g,d):H(f.current.errors,g),!d}).every(Boolean);return C({isValid:A(s),isValidating:!1}),m}else{const m=E(s,r);return Ee(r,m,i!==A(s),{},A(s)),!m}},[Ee,$]),xe=R(async r=>{const s=r||Object.keys(l.current);if(Ye(),O.current)return Ze(s);if(Array.isArray(s)){!r&&(f.current.errors={});const i=await Promise.all(s.map(async m=>await Be(m,null)));return C({isValidating:!1}),i.every(Boolean)}return await Be(s)},[Ze,Be]),Ue=R((r,s,{shouldDirty:i,shouldValidate:m})=>{const g={};j(g,r,s);for(const d of Je(r,s))l.current[d]&&(ke(d,E(g,d)),i&&Ve(d),m&&xe(d))},[xe,ke,Ve]),er=R((r,s,i)=>{if(!a&&!te(s)&&j(V.current,r,Array.isArray(s)?[...s]:Object.assign({},s)),l.current[r])ke(r,s),i.shouldDirty&&Ve(r),i.shouldValidate&&xe(r);else if(!te(s)&&(Ue(r,s,i),D.current.has(r))){const m=Te(r)||r;j(b.current,r,s),h.current[m]({[m]:E(b.current,m)}),(N.current.isDirty||N.current.dirtyFields)&&i.shouldDirty&&(j(f.current.dirtyFields,r,Ur(s,E(S.current,r,[]),E(f.current.dirtyFields,r,[]))),C({isDirty:!re(Object.assign(Object.assign({},me()),{[r]:s}),S.current)}))}!a&&j(V.current,r,s)},[Ve,ke,Ue]),rr=r=>_.current||I.current.has(r)||I.current.has((r.match(/\w+/)||[])[0]),Ae=r=>{let s=!0;if(!A(w.current))for(const i in w.current)(!r||!w.current[i].size||w.current[i].has(r)||w.current[i].has(Te(r)))&&(q.current[i](),s=!1);return s};function wr(r,s,i){er(r,s,i||{}),rr(r)&&C(),Ae(r)}P.current=P.current?P.current:async({type:r,target:s})=>{let i=s.name;const m=l.current[i];let g,d;if(m){const p=r===ae.BLUR,z=tt(Object.assign({isBlurEvent:p,isReValidateOnChange:Xe,isReValidateOnBlur:Qe,isTouched:!!E(f.current.touched,i),isSubmitted:f.current.isSubmitted},W.current));let J=Ve(i,!1),ge=!A(J)||!p&&rr(i);if(p&&!E(f.current.touched,i)&&N.current.touched&&(j(f.current.touched,i,!0),J=Object.assign(Object.assign({},J),{touched:f.current.touched})),!a&&fe(s)&&j(V.current,i,ue(l,i)),z)return!p&&Ae(i),(!A(J)||ge&&A(J))&&C(J);if(Ye(),O.current){const{errors:T}=await O.current(me(),x.current,$),Se=f.current.isValid;if(g=E(T,i),fe(s)&&!g&&O.current){const Z=Te(i),ie=E(T,Z,{});ie.type&&ie.message&&(g=ie),Z&&(ie||E(f.current.errors,Z))&&(i=Z)}d=A(T),Se!==d&&(ge=!0)}else g=(await Le(l,$,m,V))[i];!p&&Ae(i),Ee(i,g,ge,J,d)}};function tr(r){if(!a){let s=U(r);for(const i of D.current)De(i)&&!s[i]&&(s=Object.assign(Object.assign({},s),{[i]:[]}));return s}return r}function me(r){if(Q(r))return ue(l,r,V);if(Array.isArray(r)){const s={};for(const i of r)j(s,i,ue(l,i,V));return s}return tr(He(l,U(V.current),a))}const Fe=R(async(r={})=>{const s=A(l.current)?S.current:{},{errors:i}=await O.current(Object.assign(Object.assign(Object.assign({},s),me()),r),x.current,$)||{},m=A(i);f.current.isValid!==m&&C({isValid:m})},[$]),je=R((r,s)=>{Zr(l,P.current,r,V,a,s),a&&(H(M.current,r.ref.name),H(k.current,r.ref.name))},[a]),Pe=R(r=>{if(_.current)C();else{for(const s of I.current)if(s.startsWith(r)){C();break}Ae(r)}},[]),Ie=R((r,s)=>{r&&(je(r,s),a&&!le(r.options||[]).length&&(H(f.current.errors,r.ref.name),j(f.current.dirtyFields,r.ref.name,!0),C({isDirty:Ne()}),N.current.isValid&&O.current&&Fe(),Pe(r.ref.name)))},[Fe,je]);function Fr(r){r&&(Array.isArray(r)?r:[r]).forEach(s=>l.current[s]&&De(s)?delete f.current.errors[s]:H(f.current.errors,s)),C({errors:r?f.current.errors:{}})}function jr(r,s){const i=(l.current[r]||{}).ref;j(f.current.errors,r,Object.assign(Object.assign({},s),{ref:i})),C({isValid:!1}),s.shouldFocus&&i&&i.focus&&i.focus()}const qe=R((r,s,i)=>{const m=i?w.current[i]:I.current;let g=He(l,U(V.current),a,!1,r);if(Q(r)){const p=Te(r)||r;return D.current.has(p)&&(g=Object.assign(Object.assign({},L.current),g)),yr(g,r,m,B(E(S.current,r))?s:E(S.current,r),!0)}const d=B(s)?S.current:s;return Array.isArray(r)?r.reduce((p,z)=>Object.assign(Object.assign({},p),{[z]:yr(g,z,m,d)}),{}):(_.current=B(i),Ge(!A(g)&&g||d))},[]);function Ir(r,s){return qe(r,s)}function Cr(r){for(const s of Array.isArray(r)?r:[r])Ie(l.current[s],!0)}function We(r,s={}){const{name:i,type:m,value:g}=r,d=Object.assign({ref:r},s),p=l.current,z=br(r),J=it(D.current,i),ge=se=>be&&(!ve(r)||se===r);let T=p[i],Se=!0,Z;if(T&&(z?Array.isArray(T.options)&&le(T.options).find(se=>g===se.ref.value&&ge(se.ref)):ge(T.ref))){p[i]=Object.assign(Object.assign({},T),s);return}m?T=z?Object.assign({options:[...le(T&&T.options||[]),{ref:r}],ref:{type:m,name:i}},s):Object.assign({},d):T=d,p[i]=T;const ie=B(E(V.current,i));(!A(S.current)||!ie)&&(Z=E(ie?S.current:V.current,i),Se=B(Z),!Se&&!J&&ke(i,Z)),A(s)||(j(k.current,i,!0),!Y&&N.current.isValid&&Le(l,$,T,V).then(se=>{const Pr=f.current.isValid;A(se)?j(M.current,i,!0):H(M.current,i),Pr!==A(se)&&C()})),a&&!(J&&Se)&&!J&&H(f.current.dirtyFields,i),m&&Jr(z&&T.options?T.options[T.options.length-1]:T,z||st(r),P.current)}function Lr(r,s){if(!ot)if(Q(r))We({name:r},s);else if(G(r)&&"name"in r)We(r,s);else return i=>i&&We(i,r)}const Tr=R((r,s)=>async i=>{i&&i.preventDefault&&(i.preventDefault(),i.persist());let m={},g=tr(He(l,U(V.current),a,!0));N.current.isSubmitting&&C({isSubmitting:!0});try{if(O.current){const{errors:d,values:p}=await O.current(g,x.current,$);f.current.errors=m=d,g=p}else for(const d of Object.values(l.current))if(d){const{name:p}=d.ref,z=await Le(l,$,d,V);z[p]?(j(m,p,z[p]),H(M.current,p)):E(k.current,p)&&(H(f.current.errors,p),j(M.current,p,!0))}A(m)&&Object.keys(f.current.errors).every(d=>d in l.current)?(C({errors:{},isSubmitting:!0}),await r(g,i)):(f.current.errors=Object.assign(Object.assign({},f.current.errors),m),s&&await s(f.current.errors,i),u&&Qr(l.current,f.current.errors))}finally{f.current.isSubmitting=!1,C({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:A(f.current.errors),submitCount:f.current.submitCount+1})}},[u,$]),Mr=({errors:r,isDirty:s,isSubmitted:i,touched:m,isValid:g,submitCount:d,dirtyFields:p})=>{g||(M.current={},k.current={}),b.current={},I.current=new Set,_.current=!1,C({submitCount:d?f.current.submitCount:0,isDirty:s?f.current.isDirty:!1,isSubmitted:i?f.current.isSubmitted:!1,isValid:g?f.current.isValid:!1,dirtyFields:p?f.current.dirtyFields:{},touched:m?f.current.touched:{},errors:r?f.current.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},Nr=(r,s={})=>{if(be){for(const i of Object.values(l.current))if(i){const{ref:m,options:g}=i,d=br(m)&&Array.isArray(g)?g[0].ref:m;if(ve(d))try{d.closest("form").reset();break}catch{}}}l.current={},S.current=Object.assign({},r||S.current),r&&Ae(""),Object.values(h.current).forEach(i=>Dr(i)&&i()),V.current=a?{}:U(r||S.current),Mr(s)};ir(()=>{t&&N.current.isValid&&Fe(),Oe.current=Oe.current||!be?Oe.current:ct(l,Ie)},[Ie,S.current]),ir(()=>()=>{Oe.current&&Oe.current.disconnect(),ne.current=!0,Object.values(l.current).forEach(r=>Ie(r,!0))},[]),!t&&N.current.isValid&&(de.isValid=re(M.current,k.current)&&A(f.current.errors));const nr={trigger:xe,setValue:R(wr,[er,xe]),getValues:R(me,[]),register:R(Lr,[S.current]),unregister:R(Cr,[]),formState:oe?new Proxy(de,{get:(r,s)=>{if(s in r)return N.current[s]=!0,r[s]}}):de},Br=Hr(()=>Object.assign({isFormDirty:Ne,updateWatchedValue:Pe,shouldUnregister:a,updateFormState:C,removeFieldEventListener:je,watchInternal:qe,mode:W.current,reValidateMode:{isReValidateOnBlur:Qe,isReValidateOnChange:Xe},validateResolver:t?Fe:void 0,fieldsRef:l,resetFieldArrayFunctionRef:h,useWatchFieldsRef:w,useWatchRenderFunctionsRef:q,fieldArrayDefaultValuesRef:b,validFieldsRef:M,fieldsWithValidationRef:k,fieldArrayNamesRef:D,readFormStateRef:N,formStateRef:f,defaultValuesRef:S,shallowFieldsStateRef:V,fieldArrayValuesRef:L},nr),[S.current,Pe,a,je,qe]);return Object.assign({watch:Ir,control:Br,handleSubmit:Tr,reset:R(Nr,[]),clearErrors:R(Fr,[]),setError:R(jr,[]),errors:de.errors},nr)}const at=qr(null);at.displayName="RHFContext";var lt=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e.select="select",e))(lt||{});const en=e=>{const{exampleType:n="formgroup"}=e,{register:t,handleSubmit:c,formState:{errors:o}}=ut(),u="field1",a="field2",y="field3",l="field4",b="field5",L="field6",I=o[u]||o[a]||o[y]||o[l]||o[b]||o[L],w="Du m\xE5 velge et alternativ",q="Du m\xE5 velge to alternativ",k="Det kan ikke legges inn mer enn 40 tegn",M="Du m\xE5 skrive noe her",S='Du m\xE5 velge "Option 2"',ne=[v.createElement(ce,{key:0,inputId:"checkbox1",label:"Checkbox 1",ref:t({required:w})}),v.createElement(ce,{key:1,inputId:"checkbox2",label:"Checkbox 2",ref:t({required:w})}),v.createElement(ce,{key:2,inputId:"checkbox3",label:"Checkbox 3",ref:t({required:w})})],_=h=>h.length>=2||q,P=h=>h.toString()==="Option 2"||S,V=()=>{if(n==="formgroup")return[v.createElement(ye,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:o[u]?o[u].message:void 0,variant:e.variant,name:u},v.createElement($r,{maxColumns:zr.two},ne.map(h=>h))),v.createElement(ye,{key:1,legend:"Velg minst to",error:o[a]?o[a].message:void 0,variant:e.variant,name:a},v.createElement(ce,{inputId:"checkbox4",label:"Checkbox 4",ref:t({validate:_})}),v.createElement(ce,{inputId:"checkbox5",label:"Checkbox 5",ref:t({validate:_})}),v.createElement(ce,{inputId:"checkbox6",label:"Checkbox 6",ref:t({validate:_})})),v.createElement(ye,{key:2,legend:"Velg en",error:o[y]?o[y].message:void 0,variant:e.variant,name:y},v.createElement(Ce,{inputId:"radiobutton1",label:"Radiobutton 1",ref:t({required:w})}),v.createElement(Ce,{inputId:"radiobutton2",label:"Radiobutton 2",ref:t({required:w})}),v.createElement(Ce,{inputId:"radiobutton3",label:"Radiobutton 3",ref:t({required:w})})),v.createElement(ye,{key:3,error:o[l]?o[l].message:void 0},v.createElement(sr,{defaultValue:`Dette er en test 
 
  Hello 
 
  test 
 
- test test`,grow:!0,maxCharacters:40,minRows:5,label:"Skriv din historie her",textareaId:"textarea1",name:l,ref:t({maxLength:{value:40,message:B}})})),R.createElement(Se,{name:p,key:4,variant:e.variant,error:o[p]?o[p].message:void 0},R.createElement(cr,{label:"Skriv inn din tekst",placeholder:"Skriv noe!",icon:or,ref:t({required:O})}))];if(n==="checkbox")return R.createElement(ce,{name:u,inputId:"checkbox1",label:"Checkbox 1",errorText:o[u]?o[u].message:void 0,variant:e.variant,ref:t({required:E})});if(n==="radiobutton")return R.createElement(Ce,{name:y,inputId:"radiobutton1",label:"Radiobutton 1",error:o[y]?o[y].message:void 0,errorText:o[y]?o[y].message:void 0,variant:e.variant,ref:t({required:E})});if(n==="textarea")return R.createElement(sr,{defaultValue:`Dette er min historie 
+ test test`,grow:!0,maxCharacters:40,minRows:5,label:"Skriv din historie her",textareaId:"textarea1",name:l,ref:t({maxLength:{value:40,message:k}})})),v.createElement(ye,{name:b,key:4,variant:e.variant,error:o[b]?o[b].message:void 0},v.createElement(cr,{label:"Skriv inn din tekst",placeholder:"Skriv noe!",icon:or,ref:t({required:M})})),v.createElement(ye,{name:L,key:5,variant:e.variant,error:o[L]?o[L].message:void 0},v.createElement(ur,{label:"Skriv inn din tekst",ref:t({validate:P})},v.createElement("option",{value:"Option 1"},"Option 1"),v.createElement("option",{value:"Option 2"},"Option 2"),v.createElement("option",{value:"Option 3"},"Option 3")))];if(n==="checkbox")return v.createElement(ce,{name:u,inputId:"checkbox1",label:"Checkbox 1",errorText:o[u]?o[u].message:void 0,variant:e.variant,ref:t({required:w})});if(n==="radiobutton")return v.createElement(Ce,{name:y,inputId:"radiobutton1",label:"Radiobutton 1",error:o[y]?o[y].message:void 0,errorText:o[y]?o[y].message:void 0,variant:e.variant,ref:t({required:w})});if(n==="textarea")return v.createElement(sr,{defaultValue:`Dette er min historie 
 
  Hello 
 
- test`,grow:!0,maxCharacters:40,minRows:5,errorText:o[l]?o[l].message:void 0,label:"Skriv din historie her",textareaId:"textarea1",name:l,ref:t({maxLength:{value:40,message:B}})});if(n==="input")return R.createElement(cr,{inputId:"input1",label:"Skriv inn din tekst",placeholder:"Skriv noe!",name:p,errorText:o[p]?o[p].message:void 0,icon:or,ref:t({required:O})})};return R.createElement("form",{onSubmit:c(P=>{!zr()&&console.log(P)})},R.createElement(Hr,{variant:e.variant,errorSummary:W?"Sjekk at alt er riktig utfylt":void 0},ne()),R.createElement(Gr,{type:"submit"},"Send inn"))};export{Qt as FormExample,at as FormExampleVariants,Qt as default};
+ test`,grow:!0,maxCharacters:40,minRows:5,errorText:o[l]?o[l].message:void 0,label:"Skriv din historie her",textareaId:"textarea1",name:l,ref:t({maxLength:{value:40,message:k}})});if(n==="input")return v.createElement(cr,{inputId:"input1",label:"Skriv inn din tekst",placeholder:"Skriv noe!",name:b,errorText:o[b]?o[b].message:void 0,icon:or,ref:t({required:M})});if(n==="select")return v.createElement(ur,{name:L,errorText:o[L]?o[L].message:void 0,label:"Skriv inn din tekst",ref:t({validate:P})},v.createElement("option",{value:"Option 1"},"Option 1"),v.createElement("option",{value:"Option 2"},"Option 2"),v.createElement("option",{value:"Option 3"},"Option 3"))};return v.createElement("form",{onSubmit:c(h=>{!Kr()&&console.log(h)})},v.createElement(Gr,{variant:e.variant,errorSummary:I?"Sjekk at alt er riktig utfylt":void 0},V()),v.createElement(_r,{type:"submit"},"Send inn"))};export{en as FormExample,lt as FormExampleVariants,en as default};
 //# sourceMappingURL=index.js.map