@helsenorge/designsystem-react 4.2.1 → 4.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/Checkbox.js +1 -1
- package/Checkbox.js.map +1 -1
- package/FormGroup.js +1 -1
- package/FormGroup.js.map +1 -1
- package/RadioButton.js +1 -1
- package/RadioButton.js.map +1 -1
- package/components/Checkbox/Checkbox.d.ts.map +1 -1
- package/components/Checkbox/index.js +1 -1
- package/components/Dropdown/index.js.map +1 -1
- package/components/FormExample/index.js +2 -2
- package/components/FormExample/index.js.map +1 -1
- package/components/FormGroup/FormGroup.d.ts.map +1 -1
- package/components/FormGroup/index.js +1 -1
- package/components/RadioButton/RadioButton.d.ts.map +1 -1
- package/components/RadioButton/index.js +1 -1
- package/components/Validation/index.js +1 -1
- package/hooks/usePseudoClasses.d.ts +3 -3
- package/hooks/usePseudoClasses.d.ts.map +1 -1
- package/hooks/usePseudoClasses.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [4.2.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.0&targetVersion=GTv4.2.1) (2023-06-26)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
- skjul ekstra ekspander i block-visning av table på mobil
|
|
6
|
+
([550bd65](https://github.com/helsenorge/designsystem/commit/550bd65ca2264900a2a4939a033a48f59aa8df8e)), closes
|
|
7
|
+
[#305303](https://github.com/helsenorge/designsystem/issues/305303)
|
|
8
|
+
|
|
1
9
|
## [4.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.1.1&targetVersion=GTv4.2.0) (2023-06-22)
|
|
2
10
|
|
|
3
11
|
### Features
|
package/Checkbox.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import b,{useState as
|
|
1
|
+
import b,{useState as H,useEffect as V}from"react";import n from"classnames";import{FormMode as l,FormVariant as X,AnalyticsId as $,IconSize as J}from"./constants.js";import{usePseudoClasses as K}from"./hooks/usePseudoClasses.js";import{getColor as h}from"./theme/currys/color.js";import{isMutableRefObject as Q,mergeRefs as U}from"./utils/refs.js";import{a as Y}from"./uuid.js";import{Icon as Z}from"./components/Icons/Icon.js";import ee from"./components/Icons/Check.js";import{g as ce,r as oe}from"./Label.js";import e from"./components/Checkbox/styles.module.scss";const v=b.forwardRef((p,k)=>{const{className:I,checked:d=!1,disabled:r,label:x,inputId:m=Y(),mode:i=l.onwhite,name:N=m,variant:E,errorText:s,error:f=!!s,value:R=ce(x),testId:S,required:F,onChange:g,...L}=p,[o,w]=H(d),u=i===l.onwhite,C=i===l.ongrey,y=i===l.onblueberry,a=f||i===l.oninvalid,t=i===l.ondark,c=E===X.bigform,{refObject:T,isFocused:W}=K(Q(k)?k:null),j=U([k,T]),z=n(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:s,[e["checkbox-wrapper--bigform"]]:c}),A=n(e["checkbox-label"],{[e["checkbox-label--disabled"]]:r,[e["checkbox-label--on-dark"]]:t,[e["checkbox-label--bigform"]]:c,[e["checkbox-label__big-form--checked"]]:c&&o,[e["checkbox-label__big-form--focus"]]:c&&W,[e["checkbox-label__big-form--on-white"]]:c&&u,[e["checkbox-label__big-form--on-grey"]]:c&&C,[e["checkbox-label__big-form--on-blueberry"]]:c&&y,[e["checkbox-label__big-form--on-invalid"]]:c&&a,[e["checkbox-label__big-form--disabled"]]:c&&r}),M=n(e.checkbox,I),O=n(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--on-white"]]:u,[e["checkbox__icon-wrapper--on-grey"]]:C,[e["checkbox__icon-wrapper--on-invalid"]]:a,[e["checkbox__icon-wrapper--disabled"]]:r,[e["checkbox__icon-wrapper__regular--checked"]]:!c&&o,[e["checkbox__icon-wrapper__regular--invalid"]]:!c&&o&&a,[e["checkbox__icon-wrapper__regular--on-dark"]]:!c&&o&&t,[e["checkbox__icon-wrapper__big-form--checked"]]:c&&o,[e["checkbox__icon-wrapper__big-form--invalid"]]:c&&a,[e["checkbox__icon-wrapper--on-dark"]]:t,[e["checkbox__icon-wrapper--on-blueberry"]]:y,[e["checkbox__icon-wrapper--invalid"]]:a,[e["checkbox__icon-wrapper__big-form--invalid"]]:c&&o&&a,[e["checkbox__icon-wrapper__big-form--disabled"]]:r&&c&&o,[e["checkbox__icon-wrapper__big-form--checked--invalid"]]:c&&o&&a,[e["checkbox__icon-wrapper__big-form--checked--disabled"]]:r&&c&&o}),P=n(e["checkbox-label__text"],{[e["checkbox-label__text__big-form--checked"]]:c&&o,[e["checkbox-label__text__big-form--invalid"]]:c&&o&&a,[e["checkbox-label__text--on-dark"]]:t,[e["checkbox-label__text--disabled"]]:r}),q=n(e["checkbox-errors"]);let _=h("white");(t||c&&o)&&(_=h("blueberry",900)),a&&c&&o&&(_=h("white")),r&&(_=h("neutral",400)),V(()=>{w(d)},[d]);const B=G=>{g&&g(G),w(!o)},D=()=>b.createElement(b.Fragment,null,b.createElement("input",{id:m,name:N,className:M,type:"checkbox",checked:o,disabled:r,value:R,ref:j,"aria-describedby":p["aria-describedby"]??void 0,"aria-invalid":f,required:F,onChange:B,...L}),b.createElement("span",{className:O},o&&b.createElement(Z,{color:_,className:e.checkbox__icon,svgIcon:ee,size:J.XSmall})));return b.createElement("div",{"data-testid":S,"data-analyticsid":$.Checkbox,className:z},s&&b.createElement("p",{className:q},s),oe(x,D(),m,i,r,A,P,e["checkbox-sublabel-wrapper"],c))});v.displayName="Checkbox";const de=v;export{de as C,v as a};
|
|
2
2
|
//# sourceMappingURL=Checkbox.js.map
|
package/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { uuid } from '../../utils/uuid';\nimport Icon from '../Icons';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med bigform variant */\n label: React.ReactNode;\n /** input id of the checkbox */\n inputId?: string;\n /** Changes the visuals of the checkbox */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the checkbox */\n variant?: keyof typeof FormVariant;\n /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n checked = false,\n disabled,\n label,\n inputId = uuid(),\n mode = FormMode.onwhite,\n name = inputId,\n variant,\n errorText,\n error = !!errorText,\n value = getLabelText(label),\n testId,\n required,\n onChange,\n ...rest\n } = props;\n const [isChecked, setIsChecked] = useState(checked);\n const onWhite = mode === FormMode.onwhite;\n const onGrey = mode === FormMode.ongrey;\n const onBlueberry = mode === FormMode.onblueberry;\n const onInvalid = error || mode === FormMode.oninvalid;\n const onDark = mode === FormMode.ondark;\n const bigform = variant === FormVariant.bigform;\n const { refObject, isFocused } = usePseudoClasses(ref as React.RefObject<HTMLInputElement>);\n const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n [checkboxStyles['checkbox-wrapper--bigform']]: bigform,\n });\n const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n [checkboxStyles['checkbox-label--disabled']]: disabled,\n [checkboxStyles['checkbox-label--on-dark']]: onDark,\n [checkboxStyles['checkbox-label--bigform']]: bigform,\n [checkboxStyles['checkbox-label__big-form--checked']]: bigform && isChecked,\n [checkboxStyles['checkbox-label__big-form--focus']]: bigform && isFocused,\n [checkboxStyles['checkbox-label__big-form--on-white']]: bigform && onWhite,\n [checkboxStyles['checkbox-label__big-form--on-grey']]: bigform && onGrey,\n [checkboxStyles['checkbox-label__big-form--on-blueberry']]: bigform && onBlueberry,\n [checkboxStyles['checkbox-label__big-form--on-invalid']]: bigform && onInvalid,\n [checkboxStyles['checkbox-label__big-form--disabled']]: bigform && disabled,\n });\n const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !bigform && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !bigform && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !bigform && isChecked && onDark,\n [checkboxStyles['checkbox__icon-wrapper__big-form--checked']]: bigform && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__big-form--invalid']]: bigform && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__big-form--invalid']]: bigform && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__big-form--disabled']]: disabled && bigform && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__big-form--checked--invalid']]: bigform && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__big-form--checked--disabled']]: disabled && bigform && isChecked,\n });\n const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n [checkboxStyles['checkbox-label__text__big-form--checked']]: bigform && isChecked,\n [checkboxStyles['checkbox-label__text__big-form--invalid']]: bigform && isChecked && onInvalid,\n [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n });\n const errorStyles = classNames(checkboxStyles['checkbox-errors']);\n\n let iconColor = getColor('white');\n if (onDark || (bigform && isChecked)) iconColor = getColor('blueberry', 900);\n if (onInvalid && bigform && isChecked) iconColor = getColor('white');\n if (disabled) iconColor = getColor('neutral', 400);\n\n useEffect(() => {\n setIsChecked(checked);\n }, [checked]);\n\n const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n if (onChange) {\n onChange(e);\n }\n\n setIsChecked(!isChecked);\n };\n\n const getLabelContent = (): React.ReactNode => {\n return (\n <>\n <input\n id={inputId}\n name={name}\n className={checkboxClasses}\n type=\"checkbox\"\n checked={isChecked}\n disabled={disabled}\n value={value}\n ref={refObject}\n aria-describedby={props['aria-describedby'] ?? undefined}\n aria-invalid={error}\n required={required}\n onChange={onChangeHandler}\n {...rest}\n />\n <span className={checkboxIconWrapperClasses}>\n {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n </span>\n </>\n );\n };\n\n return (\n <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n {errorText && <p className={errorStyles}>{errorText}</p>}\n {renderLabelAsParent(\n label,\n getLabelContent(),\n inputId,\n mode as FormMode,\n disabled,\n checkboxLabelClasses,\n labelTextClasses,\n checkboxStyles['checkbox-sublabel-wrapper'],\n bigform\n )}\n </div>\n );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","onWhite","onGrey","onBlueberry","onInvalid","onDark","bigform","FormVariant","refObject","isFocused","usePseudoClasses","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","Icon","Check","IconSize","AnalyticsId","renderLabelAsParent","Checkbox$1"],"mappings":"kfAqCO,MAAMA,EAAWC,EAAM,WAAW,CAACC,EAAsBC,IAAqC,CAC7F,KAAA,CACJ,UAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,MAAAC,EACA,QAAAC,EAAUC,EAAK,EACf,KAAAC,EAAOC,EAAS,QAChB,KAAAC,EAAOJ,EACP,QAAAK,EACA,UAAAC,EACA,MAAAC,EAAQ,CAAC,CAACD,EACV,MAAAE,EAAQC,EAAaV,CAAK,EAC1B,OAAAW,EACA,SAAAC,EACA,SAAAC,EACA,GAAGC,CACD,EAAAnB,EACE,CAACoB,EAAWC,CAAY,EAAIC,EAASnB,CAAO,EAC5CoB,EAAUf,IAASC,EAAS,QAC5Be,EAAShB,IAASC,EAAS,OAC3BgB,EAAcjB,IAASC,EAAS,YAChCiB,EAAYb,GAASL,IAASC,EAAS,UACvCkB,EAASnB,IAASC,EAAS,OAC3BmB,EAAUjB,IAAYkB,EAAY,QAClC,CAAE,UAAAC,EAAW,UAAAC,CAAU,EAAIC,EAAiB/B,CAAwC,EACpFgC,EAAyBC,EAAWC,EAAe,kBAAkB,EAAG,CAC5E,CAACA,EAAe,8BAA8B,CAAC,EAAGvB,EAClD,CAACuB,EAAe,2BAA2B,CAAC,EAAGP,CAAA,CAChD,EACKQ,EAAuBF,EAAWC,EAAe,gBAAgB,EAAG,CACxE,CAACA,EAAe,0BAA0B,CAAC,EAAG/B,EAC9C,CAAC+B,EAAe,yBAAyB,CAAC,EAAGR,EAC7C,CAACQ,EAAe,yBAAyB,CAAC,EAAGP,EAC7C,CAACO,EAAe,mCAAmC,CAAC,EAAGP,GAAWR,EAClE,CAACe,EAAe,iCAAiC,CAAC,EAAGP,GAAWG,EAChE,CAACI,EAAe,oCAAoC,CAAC,EAAGP,GAAWL,EACnE,CAACY,EAAe,mCAAmC,CAAC,EAAGP,GAAWJ,EAClE,CAACW,EAAe,wCAAwC,CAAC,EAAGP,GAAWH,EACvE,CAACU,EAAe,sCAAsC,CAAC,EAAGP,GAAWF,EACrE,CAACS,EAAe,oCAAoC,CAAC,EAAGP,GAAWxB,CAAA,CACpE,EACKiC,EAAkBH,EAAWC,EAAe,SAAUjC,CAAS,EAC/DoC,EAA6BJ,EAAWC,EAAe,wBAAwB,EAAG,CACtF,CAACA,EAAe,kCAAkC,CAAC,EAAGZ,EACtD,CAACY,EAAe,iCAAiC,CAAC,EAAGX,EACrD,CAACW,EAAe,oCAAoC,CAAC,EAAGT,EACxD,CAACS,EAAe,kCAAkC,CAAC,EAAG/B,EACtD,CAAC+B,EAAe,0CAA0C,CAAC,EAAG,CAACP,GAAWR,EAC1E,CAACe,EAAe,0CAA0C,CAAC,EAAG,CAACP,GAAWR,GAAaM,EACvF,CAACS,EAAe,0CAA0C,CAAC,EAAG,CAACP,GAAWR,GAAaO,EACvF,CAACQ,EAAe,2CAA2C,CAAC,EAAGP,GAAWR,EAC1E,CAACe,EAAe,2CAA2C,CAAC,EAAGP,GAAWF,EAC1E,CAACS,EAAe,iCAAiC,CAAC,EAAGR,EACrD,CAACQ,EAAe,sCAAsC,CAAC,EAAGV,EAC1D,CAACU,EAAe,iCAAiC,CAAC,EAAGT,EACrD,CAACS,EAAe,2CAA2C,CAAC,EAAGP,GAAWR,GAAaM,EACvF,CAACS,EAAe,4CAA4C,CAAC,EAAG/B,GAAYwB,GAAWR,EACvF,CAACe,EAAe,oDAAoD,CAAC,EAAGP,GAAWR,GAAaM,EAChG,CAACS,EAAe,qDAAqD,CAAC,EAAG/B,GAAYwB,GAAWR,CAAA,CACjG,EACKmB,EAAmBL,EAAWC,EAAe,sBAAsB,EAAG,CAC1E,CAACA,EAAe,yCAAyC,CAAC,EAAGP,GAAWR,EACxE,CAACe,EAAe,yCAAyC,CAAC,EAAGP,GAAWR,GAAaM,EACrF,CAACS,EAAe,+BAA+B,CAAC,EAAGR,EACnD,CAACQ,EAAe,gCAAgC,CAAC,EAAG/B,CAAA,CACrD,EACKoC,EAAcN,EAAWC,EAAe,iBAAiB,CAAC,EAE5D,IAAAM,EAAYC,EAAS,OAAO,GAC5Bf,GAAWC,GAAWR,KAAwBqB,EAAAC,EAAS,YAAa,GAAG,GACvEhB,GAAaE,GAAWR,IAAWqB,EAAYC,EAAS,OAAO,GAC/DtC,IAAsBqC,EAAAC,EAAS,UAAW,GAAG,GAEjDC,EAAU,IAAM,CACdtB,EAAalB,CAAO,CAAA,EACnB,CAACA,CAAO,CAAC,EAEN,MAAAyC,EAAmBC,GAAiD,CACpE3B,GACFA,EAAS2B,CAAC,EAGZxB,EAAa,CAACD,CAAS,CAAA,EAGnB0B,EAAkB,IAGlB/C,EAAA,cAAAA,EAAA,SAAA,KAAAA,EAAA,cAAC,QAAA,CACC,GAAIO,EACJ,KAAAI,EACA,UAAW2B,EACX,KAAK,WACL,QAASjB,EACT,SAAAhB,EACA,MAAAU,EACA,IAAKgB,EACL,mBAAkB9B,EAAM,kBAAkB,GAAK,OAC/C,eAAca,EACd,SAAAI,EACA,SAAU2B,EACT,GAAGzB,CAAA,CACN,kBACC,OAAK,CAAA,UAAWmB,GACdlB,GAAarB,EAAA,cAACgD,GAAK,MAAON,EAAW,UAAWN,EAAe,eAAmB,QAASa,EAAO,KAAMC,EAAS,MAAQ,CAAA,CAC5H,CACF,EAIJ,OACGlD,EAAA,cAAA,MAAA,CAAI,cAAaiB,EAAQ,mBAAkBkC,EAAY,SAAU,UAAWjB,CAAA,EAC1ErB,GAAcb,EAAA,cAAA,IAAA,CAAE,UAAWyC,CAAA,EAAc5B,CAAU,EACnDuC,EACC9C,EACAyC,EAAgB,EAChBxC,EACAE,EACAJ,EACAgC,EACAG,EACAJ,EAAe,2BAA2B,EAC1CP,CAAA,CAEJ,CAEJ,CAAC,EAED9B,EAAS,YAAc,WAEvB,MAAAsD,GAAetD"}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant, IconSize } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys/color';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport Icon from '../Icons';\nimport Check from '../Icons/Check';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport checkboxStyles from './styles.module.scss';\n\nexport interface CheckboxProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | 'required' | 'onChange'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** The <Label/> next to the checkbox - sublabels kan ikke kombineres med bigform variant */\n label: React.ReactNode;\n /** input id of the checkbox */\n inputId?: string;\n /** Changes the visuals of the checkbox */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the checkbox */\n variant?: keyof typeof FormVariant;\n /** Activates Error style for the checkbox - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const Checkbox = React.forwardRef((props: CheckboxProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n checked = false,\n disabled,\n label,\n inputId = uuid(),\n mode = FormMode.onwhite,\n name = inputId,\n variant,\n errorText,\n error = !!errorText,\n value = getLabelText(label),\n testId,\n required,\n onChange,\n ...rest\n } = props;\n const [isChecked, setIsChecked] = useState(checked);\n const onWhite = mode === FormMode.onwhite;\n const onGrey = mode === FormMode.ongrey;\n const onBlueberry = mode === FormMode.onblueberry;\n const onInvalid = error || mode === FormMode.oninvalid;\n const onDark = mode === FormMode.ondark;\n const bigform = variant === FormVariant.bigform;\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n\n const checkboxWrapperClasses = classNames(checkboxStyles['checkbox-wrapper'], {\n [checkboxStyles['checkbox-wrapper--with-error']]: errorText,\n [checkboxStyles['checkbox-wrapper--bigform']]: bigform,\n });\n const checkboxLabelClasses = classNames(checkboxStyles['checkbox-label'], {\n [checkboxStyles['checkbox-label--disabled']]: disabled,\n [checkboxStyles['checkbox-label--on-dark']]: onDark,\n [checkboxStyles['checkbox-label--bigform']]: bigform,\n [checkboxStyles['checkbox-label__big-form--checked']]: bigform && isChecked,\n [checkboxStyles['checkbox-label__big-form--focus']]: bigform && isFocused,\n [checkboxStyles['checkbox-label__big-form--on-white']]: bigform && onWhite,\n [checkboxStyles['checkbox-label__big-form--on-grey']]: bigform && onGrey,\n [checkboxStyles['checkbox-label__big-form--on-blueberry']]: bigform && onBlueberry,\n [checkboxStyles['checkbox-label__big-form--on-invalid']]: bigform && onInvalid,\n [checkboxStyles['checkbox-label__big-form--disabled']]: bigform && disabled,\n });\n const checkboxClasses = classNames(checkboxStyles.checkbox, className);\n const checkboxIconWrapperClasses = classNames(checkboxStyles['checkbox__icon-wrapper'], {\n [checkboxStyles['checkbox__icon-wrapper--on-white']]: onWhite,\n [checkboxStyles['checkbox__icon-wrapper--on-grey']]: onGrey,\n [checkboxStyles['checkbox__icon-wrapper--on-invalid']]: onInvalid,\n [checkboxStyles['checkbox__icon-wrapper--disabled']]: disabled,\n [checkboxStyles['checkbox__icon-wrapper__regular--checked']]: !bigform && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__regular--invalid']]: !bigform && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__regular--on-dark']]: !bigform && isChecked && onDark,\n [checkboxStyles['checkbox__icon-wrapper__big-form--checked']]: bigform && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__big-form--invalid']]: bigform && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper--on-dark']]: onDark,\n [checkboxStyles['checkbox__icon-wrapper--on-blueberry']]: onBlueberry,\n [checkboxStyles['checkbox__icon-wrapper--invalid']]: onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__big-form--invalid']]: bigform && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__big-form--disabled']]: disabled && bigform && isChecked,\n [checkboxStyles['checkbox__icon-wrapper__big-form--checked--invalid']]: bigform && isChecked && onInvalid,\n [checkboxStyles['checkbox__icon-wrapper__big-form--checked--disabled']]: disabled && bigform && isChecked,\n });\n const labelTextClasses = classNames(checkboxStyles['checkbox-label__text'], {\n [checkboxStyles['checkbox-label__text__big-form--checked']]: bigform && isChecked,\n [checkboxStyles['checkbox-label__text__big-form--invalid']]: bigform && isChecked && onInvalid,\n [checkboxStyles['checkbox-label__text--on-dark']]: onDark,\n [checkboxStyles['checkbox-label__text--disabled']]: disabled,\n });\n const errorStyles = classNames(checkboxStyles['checkbox-errors']);\n\n let iconColor = getColor('white');\n if (onDark || (bigform && isChecked)) iconColor = getColor('blueberry', 900);\n if (onInvalid && bigform && isChecked) iconColor = getColor('white');\n if (disabled) iconColor = getColor('neutral', 400);\n\n useEffect(() => {\n setIsChecked(checked);\n }, [checked]);\n\n const onChangeHandler = (e: React.ChangeEvent<HTMLInputElement>): void => {\n if (onChange) {\n onChange(e);\n }\n\n setIsChecked(!isChecked);\n };\n\n const getLabelContent = (): React.ReactNode => {\n return (\n <>\n <input\n id={inputId}\n name={name}\n className={checkboxClasses}\n type=\"checkbox\"\n checked={isChecked}\n disabled={disabled}\n value={value}\n ref={mergedRefs}\n aria-describedby={props['aria-describedby'] ?? undefined}\n aria-invalid={error}\n required={required}\n onChange={onChangeHandler}\n {...rest}\n />\n <span className={checkboxIconWrapperClasses}>\n {isChecked && <Icon color={iconColor} className={checkboxStyles['checkbox__icon']} svgIcon={Check} size={IconSize.XSmall} />}\n </span>\n </>\n );\n };\n\n return (\n <div data-testid={testId} data-analyticsid={AnalyticsId.Checkbox} className={checkboxWrapperClasses}>\n {errorText && <p className={errorStyles}>{errorText}</p>}\n {renderLabelAsParent(\n label,\n getLabelContent(),\n inputId,\n mode as FormMode,\n disabled,\n checkboxLabelClasses,\n labelTextClasses,\n checkboxStyles['checkbox-sublabel-wrapper'],\n bigform\n )}\n </div>\n );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","className","checked","disabled","label","inputId","uuid","mode","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","onChange","rest","isChecked","setIsChecked","useState","onWhite","onGrey","onBlueberry","onInvalid","onDark","bigform","FormVariant","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","checkboxWrapperClasses","classNames","checkboxStyles","checkboxLabelClasses","checkboxClasses","checkboxIconWrapperClasses","labelTextClasses","errorStyles","iconColor","getColor","useEffect","onChangeHandler","e","getLabelContent","Icon","Check","IconSize","AnalyticsId","renderLabelAsParent","Checkbox$1"],"mappings":"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"}
|
package/FormGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import r from"react";import l from"classnames";import{FormMode as
|
|
1
|
+
import r from"react";import l from"classnames";import{FormMode as N,FormVariant as _,AnalyticsId as x}from"./constants.js";import{isComponent as s}from"./utils/component.js";import{C as R}from"./Checkbox.js";import{E as W}from"./ErrorWrapper.js";import{F as M}from"./FormLayout.js";import{I as S}from"./Input.js";import{R as B}from"./RadioButton.js";import{S as A}from"./Select.js";import{T as D}from"./Title.js";import o from"./components/FormGroup/styles.module.scss";const d=r.forwardRef((t,F)=>{const{className:k,fieldsetClassName:w,mode:m=N.onwhite,variant:n=_.normal,error:a,name:i,htmlMarkup:u="fieldset",renderError:G=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,p=m===N.ondark,c=n===_.bigform,v=l(o["form-group-wrapper"],{[o["form-group-wrapper--on-dark"]]:p,[o["form-group-wrapper--invalid"]]:a},k),y=l(o["form-group-wrapper__title"],{[o["form-group-wrapper__title--on-dark"]]:p&&!a,[o["form-group-wrapper__title--bigform"]]:c}),T=l(o["form-group"]),g=l(o["field-set__legend"],{[o["field-set__legend--on-dark"]]:p&&!a,[o["field-set__legend--bigform"]]:c}),E=l(o["field-set"],w),f=e=>s(e,M)?r.cloneElement(e,{variant:n,mapHelper:f}):s(e,d)?r.cloneElement(e,{mode:m,variant:n,error:a,renderError:!1}):s(e,R)?r.cloneElement(e,{name:i??e.props.name,mode:m,variant:n,error:!!a}):s(e,B)?r.cloneElement(e,{name:i??e.props.name,mode:m,variant:n,error:!!a}):s(e,S)?r.cloneElement(e,{name:i??e.props.name,mode:m,variant:n,error:!!a}):s(e,A)?r.cloneElement(e,{name:i??e.props.name,mode:m,error:!!a}):e,C=()=>r.createElement("div",{className:T},u==="div"&&r.createElement("div",{id:t.title,className:E},t.legend&&r.createElement("h5",{className:g},t.legend),r.Children.map(t.children,f)),u==="fieldset"&&r.createElement("fieldset",{name:t.title,className:E},t.legend&&r.createElement("legend",{className:g},t.legend),r.Children.map(t.children,f)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":x.FormGroup,className:v,ref:F,tabIndex:-1},t.title&&r.createElement(D,{className:y,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:a?1:2}},t.title),G?r.createElement(W,{className:I,errorText:a,testId:b},C()):C())});d.displayName="FormGroup";const U=d;export{U as F,d as a};
|
|
2
2
|
//# sourceMappingURL=FormGroup.js.map
|
package/FormGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n /** title for the the fieldset */\n title?: string;\n /** text placed in the legend tag of the fieldset */\n legend?: string;\n /** Items in the FormGroup component */\n children?: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds custom classes to the errorWrapper. */\n errorWrapperClassName?: string;\n /** Adds custom classes to the fieldset element. */\n fieldsetClassName?: string;\n /** Changes the visuals of the formgroup */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the formgroup */\n variant?: keyof typeof FormVariant;\n /** Error message */\n error?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets the data-testid attribute for the error-wrapper. */\n errorWrapperTestId?: string;\n /** Unique identifyer for the child input tags */\n name?: string;\n /** Sets div instead of fieldset tag */\n htmlMarkup?: FormGroupTags;\n /** Renders the error component (Default: true) */\n renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n const {\n className,\n fieldsetClassName,\n mode = FormMode.onwhite,\n variant = FormVariant.normal,\n error,\n name,\n htmlMarkup = 'fieldset',\n renderError = true,\n errorWrapperClassName,\n errorWrapperTestId,\n } = props;\n const onDark = mode === FormMode.ondark;\n const bigform = variant === FormVariant.bigform;\n const formGroupWrapperClasses = classNames(\n formGroupStyles['form-group-wrapper'],\n {\n [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n [formGroupStyles['form-group-wrapper--invalid']]: error,\n },\n className\n );\n const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n });\n const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n [formGroupStyles['field-set__legend--bigform']]: bigform,\n });\n\n const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n if (isComponent<FormGroupProps>(child, FormLayout)) {\n return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n variant,\n mapHelper: mapFormComponent,\n });\n } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n return React.cloneElement(child, {\n mode,\n variant,\n error,\n renderError: false,\n });\n } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n name: name ?? child.props.name,\n mode,\n variant,\n error: !!error,\n });\n } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n name: name ?? child.props.name,\n mode,\n variant,\n error: !!error,\n });\n } else if (isComponent<InputProps>(child, Input)) {\n return React.cloneElement(child as React.ReactElement<InputProps>, {\n name: name ?? child.props.name,\n mode,\n variant,\n error: !!error,\n });\n } else if (isComponent<SelectProps>(child, Select)) {\n return React.cloneElement(child as React.ReactElement<SelectProps>, {\n name: name ?? child.props.name,\n mode,\n error: !!error,\n });\n }\n return child;\n };\n\n const formGroupContent = () => {\n return (\n <div className={formGroupClasses}>\n {htmlMarkup === 'div' && (\n <div id={props.title} className={fieldsetClasses}>\n {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n {React.Children.map(props.children, mapFormComponent)}\n </div>\n )}\n {htmlMarkup === 'fieldset' && (\n <fieldset name={props.title} className={fieldsetClasses}>\n {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n {React.Children.map(props.children, mapFormComponent)}\n </fieldset>\n )}\n </div>\n );\n };\n\n return (\n <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n {props.title && (\n <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n {props.title}\n </Title>\n )}\n {renderError ? (\n <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId}>\n {formGroupContent()}\n </ErrorWrapper>\n ) : (\n formGroupContent()\n )}\n </div>\n );\n});\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","isComponent","FormLayout","Checkbox","RadioButton","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper","FormGroup$1"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"FormGroup.js","sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n /** title for the the fieldset */\n title?: string;\n /** text placed in the legend tag of the fieldset */\n legend?: string;\n /** Items in the FormGroup component */\n children?: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds custom classes to the errorWrapper. */\n errorWrapperClassName?: string;\n /** Adds custom classes to the fieldset element. */\n fieldsetClassName?: string;\n /** Changes the visuals of the formgroup */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the formgroup */\n variant?: keyof typeof FormVariant;\n /** Error message */\n error?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets the data-testid attribute for the error-wrapper. */\n errorWrapperTestId?: string;\n /** Unique identifyer for the child input tags */\n name?: string;\n /** Sets div instead of fieldset tag */\n htmlMarkup?: FormGroupTags;\n /** Renders the error component (Default: true) */\n renderError?: boolean;\n}\n\nexport const FormGroup = React.forwardRef((props: FormGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n const {\n className,\n fieldsetClassName,\n mode = FormMode.onwhite,\n variant = FormVariant.normal,\n error,\n name,\n htmlMarkup = 'fieldset',\n renderError = true,\n errorWrapperClassName,\n errorWrapperTestId,\n } = props;\n const onDark = mode === FormMode.ondark;\n const bigform = variant === FormVariant.bigform;\n const formGroupWrapperClasses = classNames(\n formGroupStyles['form-group-wrapper'],\n {\n [formGroupStyles['form-group-wrapper--on-dark']]: onDark,\n [formGroupStyles['form-group-wrapper--invalid']]: error,\n },\n className\n );\n const titleClasses = classNames(formGroupStyles['form-group-wrapper__title'], {\n [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n [formGroupStyles['form-group-wrapper__title--bigform']]: bigform,\n });\n const formGroupClasses = classNames(formGroupStyles['form-group']);\n\n const legendClasses = classNames(formGroupStyles['field-set__legend'], {\n [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n [formGroupStyles['field-set__legend--bigform']]: bigform,\n });\n\n const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n const mapFormComponent = (child: React.ReactNode): React.ReactNode => {\n if (isComponent<FormGroupProps>(child, FormLayout)) {\n return React.cloneElement(child as React.ReactElement<FormLayoutProps>, {\n variant,\n mapHelper: mapFormComponent,\n });\n } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n return React.cloneElement(child, {\n mode,\n variant,\n error,\n renderError: false,\n });\n } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n return React.cloneElement(child as React.ReactElement<CheckboxProps>, {\n name: name ?? child.props.name,\n mode,\n variant,\n error: !!error,\n });\n } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n return React.cloneElement(child as React.ReactElement<RadioButtonProps>, {\n name: name ?? child.props.name,\n mode,\n variant,\n error: !!error,\n });\n } else if (isComponent<InputProps>(child, Input)) {\n return React.cloneElement(child as React.ReactElement<InputProps>, {\n name: name ?? child.props.name,\n mode,\n variant,\n error: !!error,\n });\n } else if (isComponent<SelectProps>(child, Select)) {\n return React.cloneElement(child as React.ReactElement<SelectProps>, {\n name: name ?? child.props.name,\n mode,\n error: !!error,\n });\n }\n return child;\n };\n\n const formGroupContent = () => {\n return (\n <div className={formGroupClasses}>\n {htmlMarkup === 'div' && (\n <div id={props.title} className={fieldsetClasses}>\n {props.legend && <h5 className={legendClasses}>{props.legend}</h5>}\n {React.Children.map(props.children, mapFormComponent)}\n </div>\n )}\n {htmlMarkup === 'fieldset' && (\n <fieldset name={props.title} className={fieldsetClasses}>\n {props.legend && <legend className={legendClasses}>{props.legend}</legend>}\n {React.Children.map(props.children, mapFormComponent)}\n </fieldset>\n )}\n </div>\n );\n };\n\n return (\n <div data-testid={props.testId} data-analyticsid={AnalyticsId.FormGroup} className={formGroupWrapperClasses} ref={ref} tabIndex={-1}>\n {props.title && (\n <Title className={titleClasses} htmlMarkup={'h4'} appearance={'title4'} margin={{ marginTop: 0, marginBottom: error ? 1 : 2 }}>\n {props.title}\n </Title>\n )}\n {renderError ? (\n <ErrorWrapper className={errorWrapperClassName} errorText={error} testId={errorWrapperTestId}>\n {formGroupContent()}\n </ErrorWrapper>\n ) : (\n formGroupContent()\n )}\n </div>\n );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"names":["FormGroup","React","props","ref","className","fieldsetClassName","mode","FormMode","variant","FormVariant","error","name","htmlMarkup","renderError","errorWrapperClassName","errorWrapperTestId","onDark","bigform","formGroupWrapperClasses","classNames","formGroupStyles","titleClasses","formGroupClasses","legendClasses","fieldsetClasses","mapFormComponent","child","isComponent","FormLayout","Checkbox","RadioButton","Input","Select","formGroupContent","AnalyticsId","Title","ErrorWrapper","FormGroup$1"],"mappings":"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"}
|
package/RadioButton.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import s,{useState as D}from"react";import l from"classnames";import{FormMode as a,FormVariant as G,AnalyticsId as V}from"./constants.js";import{usePseudoClasses as W}from"./hooks/usePseudoClasses.js";import{isMutableRefObject as $,mergeRefs as z}from"./utils/refs.js";import{a as H}from"./uuid.js";import{g as J,r as K}from"./Label.js";import o from"./components/RadioButton/styles.module.scss";const w=s.forwardRef((g,u)=>{const{className:C,defaultChecked:_=!1,onChange:y,disabled:t,label:v,inputId:m=H(),mode:e=a.onwhite,name:R=m,variant:B,errorText:n,error:k=!!n,value:N=J(v),testId:L,required:x,...E}=g,c=k||e===a.oninvalid,h=e===a.ondark,f=e===a.onblueberry,F=e===a.ongrey,p=e===a.oninvalid,r=B===G.bigform,[i,I]=D(_),{refObject:S,isFocused:d}=W($(u)?u:null),j=z([u,S]),A=l(o["radio-button-wrapper"],{[o["radio-button-wrapper--with-error"]]:n,[o["radio-button-wrapper__bigform"]]:r,[o["radio-button-wrapper__bigform--focused"]]:r&&d,[o["radio-button-wrapper__bigform--selected"]]:r&&i&&d,[o["radio-button-wrapper__bigform--invalid"]]:r&&p&&d,[o["radio-button-wrapper__bigform--on-blueberry"]]:r&&f&&d}),M=l(o["radio-button-label"],{[o["radio-button-label--disabled"]]:t,[o["radio-button-label--on-dark"]]:h,[o["radio-button-label--invalid"]]:c,[o["radio-button-label__bigform"]]:r,[o["radio-button-label__bigform--on-grey"]]:r&&F&&!i,[o["radio-button-label__bigform--on-blueberry"]]:f&&!i&&r,[o["radio-button-label__bigform--selected"]]:r&&i&&!p,[o["radio-button-label__bigform--disabled"]]:r&&t,[o["radio-button-label__bigform--selected-invalid"]]:r&&i&&p}),O=l(o["radio-button"],{[o["radio-button--on-dark"]]:h,[o["radio-button--disabled"]]:t,[o["radio-button--on-blueberry"]]:f,[o["radio-button--invalid"]]:c,[o["radio-button__bigform"]]:r,[o["radio-button__bigform--disabled"]]:r&&t,[o["radio-button__bigform--invalid"]]:r&&c},C),P=l(o["radio-button-errors"]),T=b=>{I(b.target.checked),y&&y(b)},q=()=>s.createElement("input",{id:m,name:R,className:O,type:"radio",disabled:t,value:N,ref:j,defaultChecked:_,"aria-describedby":g["aria-describedby"]??void 0,required:x,...E,onChange:b=>T(b)});return s.createElement("div",{"data-testid":L,"data-analyticsid":V.RadioButton,className:A},n&&s.createElement("p",{className:P},n),K(v,q(),m,e,t,M,void 0,o["radiobutton-sublabel-wrapper"],r))});w.displayName="RadioButton";const eo=w;export{eo as R,w as a};
|
|
2
2
|
//# sourceMappingURL=RadioButton.js.map
|
package/RadioButton.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */\n label: React.ReactNode;\n /** input id of the radioButton */\n inputId?: string;\n /** Changes the visuals of the radioButton */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the radioButton */\n variant?: keyof typeof FormVariant;\n /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultChecked = false,\n onChange,\n disabled,\n label,\n inputId = uuid(),\n mode = FormMode.onwhite,\n name = inputId,\n variant,\n errorText,\n error = !!errorText,\n value = getLabelText(label),\n testId,\n required,\n ...rest\n } = props;\n const invalid = error || mode === FormMode.oninvalid;\n const onDark = mode === FormMode.ondark;\n const onBlueberry = mode === FormMode.onblueberry;\n const onGrey = mode === FormMode.ongrey;\n const onCherry = mode === FormMode.oninvalid;\n const bigform = variant === FormVariant.bigform;\n const [checked, changeChecked] = useState<boolean>(defaultChecked);\n const { refObject, isFocused } = usePseudoClasses(ref
|
|
1
|
+
{"version":3,"file":"RadioButton.js","sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormMode, FormVariant } from '../../constants';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n extends Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' | 'name' | 'value' | 'disabled' | 'defaultChecked' | 'required' | 'onChange'\n > {\n /** Adds custom classes to the element. */\n className?: string;\n /** The <Label/> next to the radioButton - sublabels kan ikke kombineres med bigform variant */\n label: React.ReactNode;\n /** input id of the radioButton */\n inputId?: string;\n /** Changes the visuals of the radioButton */\n mode?: keyof typeof FormMode;\n /** Changes the visuals of the radioButton */\n variant?: keyof typeof FormVariant;\n /** Activates Error style for the radioButton - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultChecked = false,\n onChange,\n disabled,\n label,\n inputId = uuid(),\n mode = FormMode.onwhite,\n name = inputId,\n variant,\n errorText,\n error = !!errorText,\n value = getLabelText(label),\n testId,\n required,\n ...rest\n } = props;\n const invalid = error || mode === FormMode.oninvalid;\n const onDark = mode === FormMode.ondark;\n const onBlueberry = mode === FormMode.onblueberry;\n const onGrey = mode === FormMode.ongrey;\n const onCherry = mode === FormMode.oninvalid;\n const bigform = variant === FormVariant.bigform;\n const [checked, changeChecked] = useState<boolean>(defaultChecked);\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n\n const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n [radioButtonStyles['radio-button-wrapper--with-error']]: errorText,\n [radioButtonStyles['radio-button-wrapper__bigform']]: bigform,\n [radioButtonStyles['radio-button-wrapper__bigform--focused']]: bigform && isFocused,\n [radioButtonStyles['radio-button-wrapper__bigform--selected']]: bigform && checked && isFocused,\n [radioButtonStyles['radio-button-wrapper__bigform--invalid']]: bigform && onCherry && isFocused,\n [radioButtonStyles['radio-button-wrapper__bigform--on-blueberry']]: bigform && onBlueberry && isFocused,\n });\n const radioButtonLabelClasses = classNames(radioButtonStyles['radio-button-label'], {\n [radioButtonStyles['radio-button-label--disabled']]: disabled,\n [radioButtonStyles['radio-button-label--on-dark']]: onDark,\n [radioButtonStyles['radio-button-label--invalid']]: invalid,\n [radioButtonStyles['radio-button-label__bigform']]: bigform,\n [radioButtonStyles['radio-button-label__bigform--on-grey']]: bigform && onGrey && !checked,\n [radioButtonStyles['radio-button-label__bigform--on-blueberry']]: onBlueberry && !checked && bigform,\n [radioButtonStyles['radio-button-label__bigform--selected']]: bigform && checked && !onCherry,\n [radioButtonStyles['radio-button-label__bigform--disabled']]: bigform && disabled,\n [radioButtonStyles['radio-button-label__bigform--selected-invalid']]: bigform && checked && onCherry,\n });\n const radioButtonClasses = classNames(\n radioButtonStyles['radio-button'],\n {\n [radioButtonStyles['radio-button--on-dark']]: onDark,\n [radioButtonStyles['radio-button--disabled']]: disabled,\n [radioButtonStyles['radio-button--on-blueberry']]: onBlueberry,\n [radioButtonStyles['radio-button--invalid']]: invalid,\n [radioButtonStyles['radio-button__bigform']]: bigform,\n [radioButtonStyles['radio-button__bigform--disabled']]: bigform && disabled,\n [radioButtonStyles['radio-button__bigform--invalid']]: bigform && invalid,\n },\n className\n );\n const errorStyles = classNames(radioButtonStyles['radio-button-errors']);\n\n const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n changeChecked(e.target.checked);\n onChange && onChange(e);\n };\n\n const getLabelContent = (): React.ReactNode => (\n <input\n id={inputId}\n name={name}\n className={radioButtonClasses}\n type=\"radio\"\n disabled={disabled}\n value={value}\n ref={mergedRefs}\n defaultChecked={defaultChecked}\n aria-describedby={props['aria-describedby'] ?? undefined}\n required={required}\n {...rest}\n onChange={(e): void => change(e)}\n />\n );\n\n return (\n <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n {errorText && <p className={errorStyles}>{errorText}</p>}\n {renderLabelAsParent(\n label,\n getLabelContent(),\n inputId,\n mode as FormMode,\n disabled,\n radioButtonLabelClasses,\n undefined,\n radioButtonStyles['radiobutton-sublabel-wrapper'],\n bigform\n )}\n </div>\n );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"names":["RadioButton","React","props","ref","className","defaultChecked","onChange","disabled","label","inputId","uuid","mode","FormMode","name","variant","errorText","error","value","getLabelText","testId","required","rest","invalid","onDark","onBlueberry","onGrey","onCherry","bigform","FormVariant","checked","changeChecked","useState","refObject","isFocused","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAY,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAe,QAAQ,EAAE,WAAW,EAAY,MAAM,iBAAiB,CAAC;AAW/E,MAAM,WAAW,aACf,SAAQ,IAAI,CACV,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CACzF;IACD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IACnC,iHAAiH;IACjH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,wFAiInB,CAAC;AAIH,eAAe,QAAQ,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{C as r}from"../../Checkbox.js";import{a as
|
|
1
|
+
import{C as r}from"../../Checkbox.js";import{a as G}from"../../Checkbox.js";import"react";import"classnames";import"../../constants.js";import"../../hooks/usePseudoClasses.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/grid.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../../utils/refs.js";import"../../uuid.js";import"../../utils/environment.js";import"../Icons/Icon.js";import"../../hooks/useUuid.js";import"../Icons/Check.js";import"../../Label.js";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../utils/component.js";import"../../StatusDot.js";import"../../hooks/useBreakpoint.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"./styles.module.scss";export{G as Checkbox,r as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n AnalyticsId,\n IconSize,\n KeyboardEventKey,\n theme,\n useHover,\n useKeyboardEvent,\n useOutsideEvent,\n useSize,\n useToggle,\n useUuid,\n} from '../..';\nimport Button from '../Button';\nimport Icon from '../Icons';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n onwhite = 'onwhite',\n ongrey = 'ongrey',\n onblueberry = 'onblueberry',\n oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n /** Label for dropdown. Synlig for skjermlesere. */\n label: string;\n /** Tekst på knappen som åpner dropdownen */\n placeholder: string;\n /** Sets the dropdown content */\n children: React.ReactNode;\n /** Close button text */\n closeText?: string;\n /** No close button */\n noCloseButton?: boolean;\n /** Called when dropdown is open/closed. */\n onToggle?: (isOpen: boolean) => void;\n /** Om dropdown er åpen */\n open?: boolean;\n /** Changes the visuals of the dropdown */\n mode?: keyof typeof DropdownMode;\n /** Makes the background transparent */\n transparent?: boolean;\n /** Makes the background transparent */\n fluid?: boolean;\n /** Makes the dropdown disabled */\n disabled?: boolean;\n /** Sets the data-testid attribute on the dropdown button. */\n testId?: string;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n const {\n label,\n placeholder,\n closeText = 'Lukk',\n noCloseButton = false,\n onToggle,\n open = false,\n children,\n mode = DropdownMode.onwhite,\n transparent = false,\n fluid = false,\n testId,\n disabled,\n } = props;\n const dropdownRef = useRef<HTMLDivElement>(null);\n const optionsRef = useRef<HTMLUListElement>(null);\n const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n const [currentIndex, setCurrentIndex] = useState<number>();\n const { width: buttonWidth } = useSize(buttonRef) || {};\n const labelId = useUuid();\n const toggleLabelId = useUuid();\n const optionIdPrefix = useUuid();\n\n const handleOpen = () => {\n toggleIsOpen();\n optionsRef.current?.focus();\n };\n\n const handleClose = () => {\n toggleIsOpen();\n buttonRef.current?.focus();\n };\n\n const handleKeyboardNavigation = (event: KeyboardEvent) => {\n event.preventDefault();\n\n if (!inputRefList.current) {\n return;\n }\n\n if (!isOpen) {\n handleOpen();\n return;\n } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n handleClose();\n return;\n }\n\n const index = inputRefList.current.findIndex(x => x.current === event.target);\n let nextIndex = index;\n\n if (event.key === KeyboardEventKey.Home) {\n nextIndex = 0;\n } else if (event.key === KeyboardEventKey.End) {\n nextIndex = inputRefList.current.length - 1;\n } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n nextIndex = index + 1;\n } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n nextIndex = index - 1;\n } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n nextIndex = index;\n }\n if (nextIndex !== -1) {\n inputRefList.current[nextIndex].current?.focus();\n setCurrentIndex(nextIndex);\n }\n };\n\n useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n KeyboardEventKey.ArrowDown,\n KeyboardEventKey.ArrowUp,\n KeyboardEventKey.End,\n KeyboardEventKey.Enter,\n KeyboardEventKey.Escape,\n KeyboardEventKey.Home,\n ]);\n\n useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n const toggleClasses = classNames(\n styles.dropdown__toggle,\n !disabled && {\n [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n [styles['dropdown__toggle--transparent']]: transparent,\n [styles['dropdown__toggle--fluid']]: fluid,\n [styles['dropdown__toggle--open']]: isOpen,\n }\n );\n\n const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n return (\n <div className={styles.dropdown} ref={dropdownRef}>\n <span id={labelId} className={styles.dropdown__label}>\n {label}\n </span>\n <button\n type=\"button\"\n onClick={() => !isOpen && handleOpen()}\n className={toggleClasses}\n ref={buttonRef}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Dropdown}\n disabled={disabled}\n aria-labelledby={toggleLabelId}\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n >\n <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n {placeholder}\n </span>\n <Icon\n color={disabled ? theme.palette.neutral500 : theme.palette.blueberry600}\n svgIcon={PlusSmall}\n className={styles.dropdown__icon}\n isHovered={isHovered}\n size={IconSize.XSmall}\n />\n </button>\n <div className={contentClasses} style={{ width: fluid ? '100%' : `${buttonWidth}px` }}>\n <ul\n className={styles.dropdown__options}\n role=\"listbox\"\n aria-labelledby={labelId}\n tabIndex={-1}\n aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n ref={optionsRef}\n >\n {React.Children.map(children, (child, index) => (\n <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n </li>\n ))}\n </ul>\n {!noCloseButton && (\n <div className={styles.dropdown__close}>\n <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n {closeText}\n </Button>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button","Dropdown$1"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport {\n AnalyticsId,\n IconSize,\n KeyboardEventKey,\n theme,\n useHover,\n useKeyboardEvent,\n useOutsideEvent,\n useSize,\n useToggle,\n useUuid,\n} from '../..';\nimport Button from '../Button';\nimport Icon from '../Icons';\nimport PlusSmall from '../Icons/PlusSmall';\n\nimport styles from './styles.module.scss';\n\nexport enum DropdownMode {\n onwhite = 'onwhite',\n ongrey = 'ongrey',\n onblueberry = 'onblueberry',\n oncherry = 'oncherry',\n}\n\nexport interface DropdownProps {\n /** Label for dropdown. Synlig for skjermlesere. */\n label: string;\n /** Tekst på knappen som åpner dropdownen */\n placeholder: string;\n /** Sets the dropdown content */\n children: React.ReactNode;\n /** Close button text */\n closeText?: string;\n /** No close button */\n noCloseButton?: boolean;\n /** Called when dropdown is open/closed. */\n onToggle?: (isOpen: boolean) => void;\n /** Om dropdown er åpen */\n open?: boolean;\n /** Changes the visuals of the dropdown */\n mode?: keyof typeof DropdownMode;\n /** Makes the background transparent */\n transparent?: boolean;\n /** Makes the background transparent */\n fluid?: boolean;\n /** Makes the dropdown disabled */\n disabled?: boolean;\n /** Sets the data-testid attribute on the dropdown button. */\n testId?: string;\n}\n\nconst Dropdown: React.FC<DropdownProps> = props => {\n const {\n label,\n placeholder,\n closeText = 'Lukk',\n noCloseButton = false,\n onToggle,\n open = false,\n children,\n mode = DropdownMode.onwhite,\n transparent = false,\n fluid = false,\n testId,\n disabled,\n } = props;\n const dropdownRef = useRef<HTMLDivElement>(null);\n const optionsRef = useRef<HTMLUListElement>(null);\n const { hoverRef: buttonRef, isHovered } = useHover<HTMLButtonElement>();\n const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n const inputRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n const [currentIndex, setCurrentIndex] = useState<number>();\n const { width: buttonWidth } = useSize(buttonRef) || {};\n const labelId = useUuid();\n const toggleLabelId = useUuid();\n const optionIdPrefix = useUuid();\n\n const handleOpen = (): void => {\n toggleIsOpen();\n optionsRef.current?.focus();\n };\n\n const handleClose = (): void => {\n toggleIsOpen();\n buttonRef.current?.focus();\n };\n\n const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n event.preventDefault();\n\n if (!inputRefList.current) {\n return;\n }\n\n if (!isOpen) {\n handleOpen();\n return;\n } else if (event.key === KeyboardEventKey.Escape && isOpen) {\n handleClose();\n return;\n }\n\n const index = inputRefList.current.findIndex(x => x.current === event.target);\n let nextIndex = index;\n\n if (event.key === KeyboardEventKey.Home) {\n nextIndex = 0;\n } else if (event.key === KeyboardEventKey.End) {\n nextIndex = inputRefList.current.length - 1;\n } else if (event.key === KeyboardEventKey.ArrowDown && index < inputRefList.current.length - 1) {\n nextIndex = index + 1;\n } else if (event.key === KeyboardEventKey.ArrowUp && index > 0) {\n nextIndex = index - 1;\n } else if (event.key === KeyboardEventKey.Enter && index !== -1) {\n nextIndex = index;\n }\n if (nextIndex !== -1) {\n inputRefList.current[nextIndex].current?.focus();\n setCurrentIndex(nextIndex);\n }\n };\n\n useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n KeyboardEventKey.ArrowDown,\n KeyboardEventKey.ArrowUp,\n KeyboardEventKey.End,\n KeyboardEventKey.Enter,\n KeyboardEventKey.Escape,\n KeyboardEventKey.Home,\n ]);\n\n useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n const toggleClasses = classNames(\n styles.dropdown__toggle,\n !disabled && {\n [styles['dropdown__toggle--on-white']]: mode === DropdownMode.onwhite,\n [styles['dropdown__toggle--on-grey']]: mode === DropdownMode.ongrey,\n [styles['dropdown__toggle--on-blueberry']]: mode === DropdownMode.onblueberry,\n [styles['dropdown__toggle--on-cherry']]: mode === DropdownMode.oncherry,\n [styles['dropdown__toggle--transparent']]: transparent,\n [styles['dropdown__toggle--fluid']]: fluid,\n [styles['dropdown__toggle--open']]: isOpen,\n }\n );\n\n const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n\n return (\n <div className={styles.dropdown} ref={dropdownRef}>\n <span id={labelId} className={styles.dropdown__label}>\n {label}\n </span>\n <button\n type=\"button\"\n onClick={() => !isOpen && handleOpen()}\n className={toggleClasses}\n ref={buttonRef}\n data-testid={testId}\n data-analyticsid={AnalyticsId.Dropdown}\n disabled={disabled}\n aria-labelledby={toggleLabelId}\n aria-haspopup=\"listbox\"\n aria-expanded={isOpen}\n >\n <span id={toggleLabelId} className={styles.dropdown__toggle__label}>\n {placeholder}\n </span>\n <Icon\n color={disabled ? theme.palette.neutral500 : theme.palette.blueberry600}\n svgIcon={PlusSmall}\n className={styles.dropdown__icon}\n isHovered={isHovered}\n size={IconSize.XSmall}\n />\n </button>\n <div className={contentClasses} style={{ width: fluid ? '100%' : `${buttonWidth}px` }}>\n <ul\n className={styles.dropdown__options}\n role=\"listbox\"\n aria-labelledby={labelId}\n tabIndex={-1}\n aria-activedescendant={typeof currentIndex !== 'undefined' ? `${optionIdPrefix}-${currentIndex}` : undefined}\n ref={optionsRef}\n >\n {React.Children.map(children, (child, index) => (\n <li className={styles.dropdown__input} role=\"option\" id={`${optionIdPrefix}-${index}`} aria-selected={index === currentIndex}>\n {React.cloneElement(child as React.ReactElement, { ref: inputRefList.current?.[index] })}\n </li>\n ))}\n </ul>\n {!noCloseButton && (\n <div className={styles.dropdown__close}>\n <Button onClick={handleClose} fluid aria-expanded={isOpen}>\n {closeText}\n </Button>\n </div>\n )}\n </div>\n </div>\n );\n};\n\nexport default Dropdown;\n"],"names":["DropdownMode","Dropdown","props","label","placeholder","closeText","noCloseButton","onToggle","open","children","mode","transparent","fluid","testId","disabled","dropdownRef","useRef","optionsRef","buttonRef","isHovered","useHover","isOpen","toggleIsOpen","useToggle","inputRefList","React","currentIndex","setCurrentIndex","useState","buttonWidth","useSize","labelId","useUuid","toggleLabelId","optionIdPrefix","handleOpen","_a","handleClose","useKeyboardEvent","event","KeyboardEventKey","index","x","nextIndex","useOutsideEvent","toggleClasses","classNames","styles","contentClasses","AnalyticsId","Icon","theme","PlusSmall","IconSize","child","Button","Dropdown$1"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import f from"react";import{isTest as xt}from"../../utils/environment.js";import{B as pt}from"../../Button.js";import{C as te}from"../../Checkbox.js";import{F as X}from"../../FormGroup.js";import{F as kt,a as Et}from"../../FormLayout.js";import Ge from"../Icons/Hospital.js";import{I as me}from"../../Input.js";import{L}from"../../Label.js";import{R as he}from"../../RadioButton.js";import{S as Ke}from"../../Select.js";import{T as je}from"../../Textarea.js";import{V as Vt}from"../../Validation.js";import be from"./styles.module.scss";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../Icons/Check.js";import"../Checkbox/styles.module.scss";import"../../utils/component.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../FormGroup/styles.module.scss";import"../FormLayout/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../RadioButton/styles.module.scss";import"../Icons/ChevronDown.js";import"../Select/styles.module.scss";import"../Textarea/styles.module.scss";import"../Validation/styles.module.scss";var ge=e=>e.type==="checkbox",ne=e=>e instanceof Date,I=e=>e==null;const it=e=>typeof e=="object";var O=e=>!I(e)&&!Array.isArray(e)&&it(e)&&!ne(e),_t=e=>O(e)&&e.target?ge(e.target)?e.target.checked:e.target.value:e,At=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,Dt=(e,l)=>e.has(At(l)),St=e=>{const l=e.constructor&&e.constructor.prototype;return O(l)&&l.hasOwnProperty("isPrototypeOf")},Me=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function re(e){let l;const i=Array.isArray(e);if(e instanceof Date)l=new Date(e);else if(e instanceof Set)l=new Set(e);else if(!(Me&&(e instanceof Blob||e instanceof FileList))&&(i||O(e)))if(l=i?[]:{},!Array.isArray(e)&&!St(e))l=e;else for(const r in e)l[r]=re(e[r]);else return e;return l}var ve=e=>Array.isArray(e)?e.filter(Boolean):[],F=e=>e===void 0,y=(e,l,i)=>{if(!l||!O(e))return i;const r=ve(l.split(/[,[\].]+?/)).reduce((s,o)=>I(s)?s:s[o],e);return F(r)||r===e?F(e[l])?i:e[l]:r};const ze={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},G={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},Q={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};f.createContext(null);var wt=(e,l,i,r=!0)=>{const s={defaultValues:l._defaultValues};for(const o in e)Object.defineProperty(s,o,{get:()=>{const c=o;return l._proxyFormState[c]!==G.all&&(l._proxyFormState[c]=!r||G.all),i&&(i[c]=!0),e[c]}});return s},P=e=>O(e)&&!Object.keys(e).length,Tt=(e,l,i,r)=>{i(e);const{name:s,...o}=e;return P(o)||Object.keys(o).length>=Object.keys(l).length||Object.keys(o).find(c=>l[c]===(!r||G.all))},we=e=>Array.isArray(e)?e:[e];function Ft(e){const l=f.useRef(e);l.current=e,f.useEffect(()=>{const i=!e.disabled&&l.current.subject&&l.current.subject.subscribe({next:l.current.next});return()=>{i&&i.unsubscribe()}},[e.disabled])}var j=e=>typeof e=="string",Lt=(e,l,i,r,s)=>j(e)?(r&&l.watch.add(e),y(i,e,s)):Array.isArray(e)?e.map(o=>(r&&l.watch.add(o),y(i,o))):(r&&(l.watchAll=!0),i),Re=e=>/^\w*$/.test(e),st=e=>ve(e.replace(/["|']|\]/g,"").split(/\.|\[/));function _(e,l,i){let r=-1;const s=Re(l)?[l]:st(l),o=s.length,c=o-1;for(;++r<o;){const b=s[r];let k=i;if(r!==c){const M=e[b];k=O(M)||Array.isArray(M)?M:isNaN(+s[r+1])?{}:[]}e[b]=k,e=e[b]}return e}var Ot=(e,l,i,r,s)=>l?{...i[e],types:{...i[e]&&i[e].types?i[e].types:{},[r]:s||!0}}:{};const Ce=(e,l,i)=>{for(const r of i||Object.keys(e)){const s=y(e,r);if(s){const{_f:o,...c}=s;if(o&&l(o.name)){if(o.ref.focus){o.ref.focus();break}else if(o.refs&&o.refs[0].focus){o.refs[0].focus();break}}else O(c)&&Ce(c,l)}}};var Je=e=>({isOnSubmit:!e||e===G.onSubmit,isOnBlur:e===G.onBlur,isOnChange:e===G.onChange,isOnAll:e===G.all,isOnTouch:e===G.onTouched}),Qe=(e,l,i)=>!i&&(l.watchAll||l.watch.has(e)||[...l.watch].some(r=>e.startsWith(r)&&/^\.\w+/.test(e.slice(r.length)))),Ct=(e,l,i)=>{const r=ve(y(e,i));return _(r,"root",l[i]),_(e,i,r),e},oe=e=>typeof e=="boolean",Ie=e=>e.type==="file",Y=e=>typeof e=="function",pe=e=>{if(!Me)return!1;const l=e?e.ownerDocument:0;return e instanceof(l&&l.defaultView?l.defaultView.HTMLElement:HTMLElement)},xe=e=>j(e),Ne=e=>e.type==="radio",ke=e=>e instanceof RegExp;const Xe={value:!1,isValid:!1},Ye={value:!0,isValid:!0};var lt=e=>{if(Array.isArray(e)){if(e.length>1){const l=e.filter(i=>i&&i.checked&&!i.disabled).map(i=>i.value);return{value:l,isValid:!!l.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!F(e[0].attributes.value)?F(e[0].value)||e[0].value===""?Ye:{value:e[0].value,isValid:!0}:Ye:Xe}return Xe};const Ze={isValid:!1,value:null};var at=e=>Array.isArray(e)?e.reduce((l,i)=>i&&i.checked&&!i.disabled?{isValid:!0,value:i.value}:l,Ze):Ze;function et(e,l,i="validate"){if(xe(e)||Array.isArray(e)&&e.every(xe)||oe(e)&&!e)return{type:i,message:xe(e)?e:"",ref:l}}var ae=e=>O(e)&&!ke(e)?e:{value:e,message:""},tt=async(e,l,i,r,s)=>{const{ref:o,refs:c,required:b,maxLength:k,minLength:M,min:H,max:A,pattern:p,validate:$,name:N,valueAsNumber:ue,mount:se,disabled:ce}=e._f,v=y(l,N);if(!se||ce)return{};const q=c?c[0]:o,B=E=>{r&&q.reportValidity&&(q.setCustomValidity(oe(E)?"":E||""),q.reportValidity())},S={},Z=Ne(o),ee=ge(o),de=Z||ee,U=(ue||Ie(o))&&F(o.value)&&F(v)||pe(o)&&o.value===""||v===""||Array.isArray(v)&&!v.length,K=Ot.bind(null,N,i,S),W=(E,x,h,V=Q.maxLength,T=Q.minLength)=>{const R=E?x:h;S[N]={type:E?V:T,message:R,ref:o,...K(E?V:T,R)}};if(s?!Array.isArray(v)||!v.length:b&&(!de&&(U||I(v))||oe(v)&&!v||ee&&!lt(c).isValid||Z&&!at(c).isValid)){const{value:E,message:x}=xe(b)?{value:!!b,message:b}:ae(b);if(E&&(S[N]={type:Q.required,message:x,ref:q,...K(Q.required,x)},!i))return B(x),S}if(!U&&(!I(H)||!I(A))){let E,x;const h=ae(A),V=ae(H);if(!I(v)&&!isNaN(v)){const T=o.valueAsNumber||v&&+v;I(h.value)||(E=T>h.value),I(V.value)||(x=T<V.value)}else{const T=o.valueAsDate||new Date(v),R=fe=>new Date(new Date().toDateString()+" "+fe),z=o.type=="time",J=o.type=="week";j(h.value)&&v&&(E=z?R(v)>R(h.value):J?v>h.value:T>new Date(h.value)),j(V.value)&&v&&(x=z?R(v)<R(V.value):J?v<V.value:T<new Date(V.value))}if((E||x)&&(W(!!E,h.message,V.message,Q.max,Q.min),!i))return B(S[N].message),S}if((k||M)&&!U&&(j(v)||s&&Array.isArray(v))){const E=ae(k),x=ae(M),h=!I(E.value)&&v.length>+E.value,V=!I(x.value)&&v.length<+x.value;if((h||V)&&(W(h,E.message,x.message),!i))return B(S[N].message),S}if(p&&!U&&j(v)){const{value:E,message:x}=ae(p);if(ke(E)&&!v.match(E)&&(S[N]={type:Q.pattern,message:x,ref:o,...K(Q.pattern,x)},!i))return B(x),S}if($){if(Y($)){const E=await $(v,l),x=et(E,q);if(x&&(S[N]={...x,...K(Q.validate,x.message)},!i))return B(x.message),S}else if(O($)){let E={};for(const x in $){if(!P(E)&&!i)break;const h=et(await $[x](v,l),q,x);h&&(E={...h,...K(x,h.message)},B(h.message),i&&(S[N]=E))}if(!P(E)&&(S[N]={ref:q,...E},!i))return S}}return B(!0),S};function Mt(e,l){const i=l.slice(0,-1).length;let r=0;for(;r<i;)e=F(e)?r++:e[l[r++]];return e}function Rt(e){for(const l in e)if(!F(e[l]))return!1;return!0}function C(e,l){const i=Array.isArray(l)?l:Re(l)?[l]:st(l),r=i.length===1?e:Mt(e,i),s=i.length-1,o=i[s];return r&&delete r[o],s!==0&&(O(r)&&P(r)||Array.isArray(r)&&Rt(r))&&C(e,i.slice(0,-1)),e}function Te(){let e=[];return{get observers(){return e},next:s=>{for(const o of e)o.next&&o.next(s)},subscribe:s=>(e.push(s),{unsubscribe:()=>{e=e.filter(o=>o!==s)}}),unsubscribe:()=>{e=[]}}}var Ee=e=>I(e)||!it(e);function ie(e,l){if(Ee(e)||Ee(l))return e===l;if(ne(e)&&ne(l))return e.getTime()===l.getTime();const i=Object.keys(e),r=Object.keys(l);if(i.length!==r.length)return!1;for(const s of i){const o=e[s];if(!r.includes(s))return!1;if(s!=="ref"){const c=l[s];if(ne(o)&&ne(c)||O(o)&&O(c)||Array.isArray(o)&&Array.isArray(c)?!ie(o,c):o!==c)return!1}}return!0}var nt=e=>e.type==="select-multiple",It=e=>Ne(e)||ge(e),Fe=e=>pe(e)&&e.isConnected,ot=e=>{for(const l in e)if(Y(e[l]))return!0;return!1};function Ve(e,l={}){const i=Array.isArray(e);if(O(e)||i)for(const r in e)Array.isArray(e[r])||O(e[r])&&!ot(e[r])?(l[r]=Array.isArray(e[r])?[]:{},Ve(e[r],l[r])):I(e[r])||(l[r]=!0);return l}function ut(e,l,i){const r=Array.isArray(e);if(O(e)||r)for(const s in e)Array.isArray(e[s])||O(e[s])&&!ot(e[s])?F(l)||Ee(i[s])?i[s]=Array.isArray(e[s])?Ve(e[s],[]):{...Ve(e[s])}:ut(e[s],I(l)?{}:l[s],i[s]):i[s]=!ie(e[s],l[s]);return i}var Le=(e,l)=>ut(e,l,Ve(l)),ct=(e,{valueAsNumber:l,valueAsDate:i,setValueAs:r})=>F(e)?e:l?e===""?NaN:e&&+e:i&&j(e)?new Date(e):r?r(e):e;function Oe(e){const l=e.ref;if(!(e.refs?e.refs.every(i=>i.disabled):l.disabled))return Ie(l)?l.files:Ne(l)?at(e.refs).value:nt(l)?[...l.selectedOptions].map(({value:i})=>i):ge(l)?lt(e.refs).value:ct(F(l.value)?e.ref.value:l.value,e)}var Nt=(e,l,i,r)=>{const s={};for(const o of e){const c=y(l,o);c&&_(s,o,c._f)}return{criteriaMode:i,names:[...e],fields:s,shouldUseNativeValidation:r}},ye=e=>F(e)?e:ke(e)?e.source:O(e)?ke(e.value)?e.value.source:e.value:e,Ut=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function rt(e,l,i){const r=y(e,i);if(r||Re(i))return{error:r,name:i};const s=i.split(".");for(;s.length;){const o=s.join("."),c=y(l,o),b=y(e,o);if(c&&!Array.isArray(c)&&i!==o)return{name:i};if(b&&b.type)return{name:o,error:b};s.pop()}return{name:i}}var qt=(e,l,i,r,s)=>s.isOnAll?!1:!i&&s.isOnTouch?!(l||e):(i?r.isOnBlur:s.isOnBlur)?!e:(i?r.isOnChange:s.isOnChange)?e:!0,Bt=(e,l)=>!ve(y(e,l)).length&&C(e,l);const Pt={mode:G.onSubmit,reValidateMode:G.onChange,shouldFocusError:!0};function Ht(e={},l){let i={...Pt,...e},r={submitCount:0,isDirty:!1,isLoading:Y(i.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},errors:{}},s={},o=O(i.defaultValues)||O(i.values)?re(i.defaultValues||i.values)||{}:{},c=i.shouldUnregister?{}:re(o),b={action:!1,mount:!1,watch:!1},k={mount:new Set,unMount:new Set,array:new Set,watch:new Set},M,H=0;const A={isDirty:!1,dirtyFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},p={values:Te(),array:Te(),state:Te()},$=e.resetOptions&&e.resetOptions.keepDirtyValues,N=Je(i.mode),ue=Je(i.reValidateMode),se=i.criteriaMode===G.all,ce=t=>a=>{clearTimeout(H),H=setTimeout(t,a)},v=async t=>{if(A.isValid||t){const a=i.resolver?P((await U()).errors):await W(s,!0);a!==r.isValid&&p.state.next({isValid:a})}},q=t=>A.isValidating&&p.state.next({isValidating:t}),B=(t,a=[],n,m,d=!0,u=!0)=>{if(m&&n){if(b.action=!0,u&&Array.isArray(y(s,t))){const g=n(y(s,t),m.argA,m.argB);d&&_(s,t,g)}if(u&&Array.isArray(y(r.errors,t))){const g=n(y(r.errors,t),m.argA,m.argB);d&&_(r.errors,t,g),Bt(r.errors,t)}if(A.touchedFields&&u&&Array.isArray(y(r.touchedFields,t))){const g=n(y(r.touchedFields,t),m.argA,m.argB);d&&_(r.touchedFields,t,g)}A.dirtyFields&&(r.dirtyFields=Le(o,c)),p.state.next({name:t,isDirty:x(t,a),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else _(c,t,a)},S=(t,a)=>{_(r.errors,t,a),p.state.next({errors:r.errors})},Z=(t,a,n,m)=>{const d=y(s,t);if(d){const u=y(c,t,F(n)?y(o,t):n);F(u)||m&&m.defaultChecked||a?_(c,t,a?u:Oe(d._f)):T(t,u),b.mount&&v()}},ee=(t,a,n,m,d)=>{let u=!1,g=!1;const D={name:t};if(!n||m){A.isDirty&&(g=r.isDirty,r.isDirty=D.isDirty=x(),u=g!==D.isDirty);const w=ie(y(o,t),a);g=y(r.dirtyFields,t),w?C(r.dirtyFields,t):_(r.dirtyFields,t,!0),D.dirtyFields=r.dirtyFields,u=u||A.dirtyFields&&g!==!w}if(n){const w=y(r.touchedFields,t);w||(_(r.touchedFields,t,n),D.touchedFields=r.touchedFields,u=u||A.touchedFields&&w!==n)}return u&&d&&p.state.next(D),u?D:{}},de=(t,a,n,m)=>{const d=y(r.errors,t),u=A.isValid&&oe(a)&&r.isValid!==a;if(e.delayError&&n?(M=ce(()=>S(t,n)),M(e.delayError)):(clearTimeout(H),M=null,n?_(r.errors,t,n):C(r.errors,t)),(n?!ie(d,n):d)||!P(m)||u){const g={...m,...u&&oe(a)?{isValid:a}:{},errors:r.errors,name:t};r={...r,...g},p.state.next(g)}q(!1)},U=async t=>i.resolver(c,i.context,Nt(t||k.mount,s,i.criteriaMode,i.shouldUseNativeValidation)),K=async t=>{const{errors:a}=await U();if(t)for(const n of t){const m=y(a,n);m?_(r.errors,n,m):C(r.errors,n)}else r.errors=a;return a},W=async(t,a,n={valid:!0})=>{for(const m in t){const d=t[m];if(d){const{_f:u,...g}=d;if(u){const D=k.array.has(u.name),w=await tt(d,c,se,i.shouldUseNativeValidation&&!a,D);if(w[u.name]&&(n.valid=!1,a))break;!a&&(y(w,u.name)?D?Ct(r.errors,w,u.name):_(r.errors,u.name,w[u.name]):C(r.errors,u.name))}g&&await W(g,a,n)}}return n.valid},E=()=>{for(const t of k.unMount){const a=y(s,t);a&&(a._f.refs?a._f.refs.every(n=>!Fe(n)):!Fe(a._f.ref))&&_e(t)}k.unMount=new Set},x=(t,a)=>(t&&a&&_(c,t,a),!ie(Ue(),o)),h=(t,a,n)=>Lt(t,k,{...b.mount?c:F(a)?o:j(t)?{[t]:a}:a},n,a),V=t=>ve(y(b.mount?c:o,t,e.shouldUnregister?y(o,t,[]):[])),T=(t,a,n={})=>{const m=y(s,t);let d=a;if(m){const u=m._f;u&&(!u.disabled&&_(c,t,ct(a,u)),d=pe(u.ref)&&I(a)?"":a,nt(u.ref)?[...u.ref.options].forEach(g=>g.selected=d.includes(g.value)):u.refs?ge(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(d)?!!d.find(D=>D===g.value):d===g.value)):u.refs[0]&&(u.refs[0].checked=!!d):u.refs.forEach(g=>g.checked=g.value===d):Ie(u.ref)?u.ref.value="":(u.ref.value=d,u.ref.type||p.values.next({name:t,values:{...c}})))}(n.shouldDirty||n.shouldTouch)&&ee(t,d,n.shouldTouch,n.shouldDirty,!0),n.shouldValidate&&fe(t)},R=(t,a,n)=>{for(const m in a){const d=a[m],u=`${t}.${m}`,g=y(s,u);(k.array.has(t)||!Ee(d)||g&&!g._f)&&!ne(d)?R(u,d,n):T(u,d,n)}},z=(t,a,n={})=>{const m=y(s,t),d=k.array.has(t),u=re(a);_(c,t,u),d?(p.array.next({name:t,values:{...c}}),(A.isDirty||A.dirtyFields)&&n.shouldDirty&&p.state.next({name:t,dirtyFields:Le(o,c),isDirty:x(t,u)})):m&&!m._f&&!I(u)?R(t,u,n):T(t,u,n),Qe(t,k)&&p.state.next({...r}),p.values.next({name:t,values:{...c}}),!b.mount&&l()},J=async t=>{const a=t.target;let n=a.name,m=!0;const d=y(s,n),u=()=>a.type?Oe(d._f):_t(t);if(d){let g,D;const w=u(),le=t.type===ze.BLUR||t.type===ze.FOCUS_OUT,vt=!Ut(d._f)&&!i.resolver&&!y(r.errors,n)&&!d._f.deps||qt(le,y(r.touchedFields,n),r.isSubmitted,ue,N),De=Qe(n,k,le);_(c,n,w),le?(d._f.onBlur&&d._f.onBlur(t),M&&M(0)):d._f.onChange&&d._f.onChange(t);const Se=ee(n,w,le,!1),ht=!P(Se)||De;if(!le&&p.values.next({name:n,type:t.type,values:{...c}}),vt)return A.isValid&&v(),ht&&p.state.next({name:n,...De?{}:Se});if(!le&&De&&p.state.next({...r}),q(!0),i.resolver){const{errors:$e}=await U([n]),bt=rt(r.errors,s,n),We=rt($e,s,bt.name||n);g=We.error,n=We.name,D=P($e)}else g=(await tt(d,c,se,i.shouldUseNativeValidation))[n],m=isNaN(w)||w===y(c,n,w),m&&(g?D=!1:A.isValid&&(D=await W(s,!0)));m&&(d._f.deps&&fe(d._f.deps),de(n,D,g,Se))}},fe=async(t,a={})=>{let n,m;const d=we(t);if(q(!0),i.resolver){const u=await K(F(t)?t:d);n=P(u),m=t?!d.some(g=>y(u,g)):n}else t?(m=(await Promise.all(d.map(async u=>{const g=y(s,u);return await W(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!m&&!r.isValid)&&v()):m=n=await W(s);return p.state.next({...!j(t)||A.isValid&&n!==r.isValid?{}:{name:t},...i.resolver||!t?{isValid:n}:{},errors:r.errors,isValidating:!1}),a.shouldFocus&&!m&&Ce(s,u=>u&&y(r.errors,u),t?d:k.mount),m},Ue=t=>{const a={...o,...b.mount?c:{}};return F(t)?a:j(t)?y(a,t):t.map(n=>y(a,n))},qe=(t,a)=>({invalid:!!y((a||r).errors,t),isDirty:!!y((a||r).dirtyFields,t),isTouched:!!y((a||r).touchedFields,t),error:y((a||r).errors,t)}),dt=t=>{t&&we(t).forEach(a=>C(r.errors,a)),p.state.next({errors:t?r.errors:{}})},ft=(t,a,n)=>{const m=(y(s,t,{_f:{}})._f||{}).ref;_(r.errors,t,{...a,ref:m}),p.state.next({name:t,errors:r.errors,isValid:!1}),n&&n.shouldFocus&&m&&m.focus&&m.focus()},mt=(t,a)=>Y(t)?p.values.subscribe({next:n=>t(h(void 0,a),n)}):h(t,a,!0),_e=(t,a={})=>{for(const n of t?we(t):k.mount)k.mount.delete(n),k.array.delete(n),a.keepValue||(C(s,n),C(c,n)),!a.keepError&&C(r.errors,n),!a.keepDirty&&C(r.dirtyFields,n),!a.keepTouched&&C(r.touchedFields,n),!i.shouldUnregister&&!a.keepDefaultValue&&C(o,n);p.values.next({values:{...c}}),p.state.next({...r,...a.keepDirty?{isDirty:x()}:{}}),!a.keepIsValid&&v()},Ae=(t,a={})=>{let n=y(s,t);const m=oe(a.disabled);return _(s,t,{...n||{},_f:{...n&&n._f?n._f:{ref:{name:t}},name:t,mount:!0,...a}}),k.mount.add(t),n?m&&_(c,t,a.disabled?void 0:y(c,t,Oe(n._f))):Z(t,!0,a.value),{...m?{disabled:a.disabled}:{},...i.shouldUseNativeValidation?{required:!!a.required,min:ye(a.min),max:ye(a.max),minLength:ye(a.minLength),maxLength:ye(a.maxLength),pattern:ye(a.pattern)}:{},name:t,onChange:J,onBlur:J,ref:d=>{if(d){Ae(t,a),n=y(s,t);const u=F(d.value)&&d.querySelectorAll&&d.querySelectorAll("input,select,textarea")[0]||d,g=It(u),D=n._f.refs||[];if(g?D.find(w=>w===u):u===n._f.ref)return;_(s,t,{_f:{...n._f,...g?{refs:[...D.filter(Fe),u,...Array.isArray(y(o,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),Z(t,!1,void 0,u)}else n=y(s,t,{}),n._f&&(n._f.mount=!1),(i.shouldUnregister||a.shouldUnregister)&&!(Dt(k.array,t)&&b.action)&&k.unMount.add(t)}}},Be=()=>i.shouldFocusError&&Ce(s,t=>t&&y(r.errors,t),k.mount),yt=(t,a)=>async n=>{n&&(n.preventDefault&&n.preventDefault(),n.persist&&n.persist());let m=re(c);if(p.state.next({isSubmitting:!0}),i.resolver){const{errors:d,values:u}=await U();r.errors=d,m=u}else await W(s);C(r.errors,"root"),P(r.errors)?(p.state.next({errors:{}}),await t(m,n)):(a&&await a({...r.errors},n),Be(),setTimeout(Be)),p.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:P(r.errors),submitCount:r.submitCount+1,errors:r.errors})},gt=(t,a={})=>{y(s,t)&&(F(a.defaultValue)?z(t,y(o,t)):(z(t,a.defaultValue),_(o,t,a.defaultValue)),a.keepTouched||C(r.touchedFields,t),a.keepDirty||(C(r.dirtyFields,t),r.isDirty=a.defaultValue?x(t,y(o,t)):x()),a.keepError||(C(r.errors,t),A.isValid&&v()),p.state.next({...r}))},Pe=(t,a={})=>{const n=t||o,m=re(n),d=t&&!P(t)?m:o;if(a.keepDefaultValues||(o=n),!a.keepValues){if(a.keepDirtyValues||$)for(const u of k.mount)y(r.dirtyFields,u)?_(d,u,y(c,u)):z(u,y(d,u));else{if(Me&&F(t))for(const u of k.mount){const g=y(s,u);if(g&&g._f){const D=Array.isArray(g._f.refs)?g._f.refs[0]:g._f.ref;if(pe(D)){const w=D.closest("form");if(w){w.reset();break}}}}s={}}c=e.shouldUnregister?a.keepDefaultValues?re(o):{}:m,p.array.next({values:{...d}}),p.values.next({values:{...d}})}k={mount:new Set,unMount:new Set,array:new Set,watch:new Set,watchAll:!1,focus:""},!b.mount&&l(),b.mount=!A.isValid||!!a.keepIsValid,b.watch=!!e.shouldUnregister,p.state.next({submitCount:a.keepSubmitCount?r.submitCount:0,isDirty:a.keepDirty?r.isDirty:!!(a.keepDefaultValues&&!ie(t,o)),isSubmitted:a.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:a.keepDirtyValues?r.dirtyFields:a.keepDefaultValues&&t?Le(o,t):{},touchedFields:a.keepTouched?r.touchedFields:{},errors:a.keepErrors?r.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},He=(t,a)=>Pe(Y(t)?t(c):t,a);return{control:{register:Ae,unregister:_e,getFieldState:qe,_executeSchema:U,_getWatch:h,_getDirty:x,_updateValid:v,_removeUnmounted:E,_updateFieldArray:B,_getFieldArray:V,_reset:Pe,_resetDefaultValues:()=>Y(i.defaultValues)&&i.defaultValues().then(t=>{He(t,i.resetOptions),p.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_subjects:p,_proxyFormState:A,get _fields(){return s},get _formValues(){return c},get _state(){return b},set _state(t){b=t},get _defaultValues(){return o},get _names(){return k},set _names(t){k=t},get _formState(){return r},set _formState(t){r=t},get _options(){return i},set _options(t){i={...i,...t}}},trigger:fe,register:Ae,handleSubmit:yt,watch:mt,setValue:z,getValues:Ue,reset:He,resetField:gt,clearErrors:dt,unregister:_e,setError:ft,setFocus:(t,a={})=>{const n=y(s,t),m=n&&n._f;if(m){const d=m.refs?m.refs[0]:m.ref;d.focus&&(d.focus(),a.shouldSelect&&d.select())}},getFieldState:qe}}function $t(e={}){const l=f.useRef(),[i,r]=f.useState({isDirty:!1,isValidating:!1,isLoading:Y(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},errors:{},defaultValues:Y(e.defaultValues)?void 0:e.defaultValues});l.current||(l.current={...Ht(e,()=>r(o=>({...o}))),formState:i});const s=l.current.control;return s._options=e,Ft({subject:s._subjects.state,next:o=>{Tt(o,s._proxyFormState,s._updateFormState,!0)&&r({...s._formState})}}),f.useEffect(()=>{e.values&&!ie(e.values,s._defaultValues)?s._reset(e.values,s._options.resetOptions):s._resetDefaultValues()},[e.values,s]),f.useEffect(()=>{s._state.mount||(s._updateValid(),s._state.mount=!0),s._state.watch&&(s._state.watch=!1,s._subjects.state.next({...s._formState})),s._removeUnmounted()}),l.current.formState=wt(i,s),l.current}var Wt=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e.select="select",e.date="date",e))(Wt||{});const Gt=e=>{const{exampleType:l="formgroup"}=e,{register:i,handleSubmit:r,formState:{errors:s}}=$t(),o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0);const c=new Date;c.setDate(o.getDate()-5),c.setHours(6),c.setMinutes(10),c.setSeconds(0);const b=new Date;b.setDate(o.getDate()+5),b.setHours(22),b.setMinutes(0),b.setSeconds(0);const k="field1",M="field2",H="field3",A="field4",p="field5",$="field6",N="field7",ue="field8",se="field9",ce=s.field1||s.field2||s.field3||s.field4||s.field5||s.field6||s.field7||s.field8||s.field9,v="Du må velge et alternativ",q="Du må velge to alternativ",B="Det kan ikke legges inn mer enn 40 tegn",S="Du må skrive noe her",Z='Du må velge "Option 2"',ee=`Du må velge dato mellom ${c.toLocaleDateString("nb")} og ${b.toLocaleDateString("nb")}`,de=`Du må skrive inn tidspunkt mellom ${c.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})} og ${b.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}`,U=h=>h.length>=2||q,K=h=>h.toString()==="Option 2"||Z,W=(h,V,T)=>{const R=new Date(h);return!!h&&R.getTime()>=V.getTime()&&R.getTime()<=T.getTime()||ee},E=(h,V)=>{const T=new Date;T.setHours(h),T.setMinutes(V),T.setSeconds(0);const R=c.toLocaleTimeString("nb"),z=b.toLocaleTimeString("nb"),J=T.toLocaleTimeString("nb");return console.log("value",J),!!T&&J>=R&&J<=z||de},x=()=>{if(l==="formgroup"){const h=[f.createElement(te,{key:0,inputId:"checkbox1",label:f.createElement(L,{labelTexts:[{text:"Checkbox 1"}]}),...i(k,{required:v})}),f.createElement(te,{key:1,inputId:"checkbox2",label:f.createElement(L,{labelTexts:[{text:"Checkbox 2"}]}),...i(k,{required:v})}),f.createElement(te,{key:2,inputId:"checkbox3",label:f.createElement(L,{labelTexts:[{text:"Checkbox 3"}]}),...i(k,{required:v})})];return[f.createElement(X,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:s.field1?s.field1.message:void 0,variant:e.variant},f.createElement(kt,{maxColumns:Et.two},h.map(V=>V))),f.createElement(X,{key:1,legend:"Velg minst to",error:s.field2?s.field2.message:void 0,variant:e.variant},f.createElement(te,{inputId:"checkbox4",label:f.createElement(L,{labelTexts:[{text:"Checkbox 4"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox5",label:f.createElement(L,{labelTexts:[{text:"Checkbox 5"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox6",label:f.createElement(L,{labelTexts:[{text:"Checkbox 6"}]}),...i(M,{validate:U})})),f.createElement(X,{key:2,legend:"Velg en",error:s.field3?s.field3.message:void 0,variant:e.variant},f.createElement(he,{inputId:"radiobutton1",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 1"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton2",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 2"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton3",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 3"}]}),...i(H,{required:v})})),f.createElement(X,{key:3,error:s.field4?s.field4.message:void 0},f.createElement(je,{defaultValue:`Dette er en test
|
|
1
|
+
import f from"react";import{isTest as xt}from"../../utils/environment.js";import{B as pt}from"../../Button.js";import{C as te}from"../../Checkbox.js";import{F as X}from"../../FormGroup.js";import{F as kt,a as Et}from"../../FormLayout.js";import Ge from"../Icons/Hospital.js";import{I as me}from"../../Input.js";import{L}from"../../Label.js";import{R as he}from"../../RadioButton.js";import{S as Ke}from"../../Select.js";import{T as je}from"../../Textarea.js";import{V as Vt}from"../../Validation.js";import be from"./styles.module.scss";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../hooks/usePseudoClasses.js";import"../../utils/refs.js";import"../Icons/Check.js";import"../Checkbox/styles.module.scss";import"../../utils/component.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../FormGroup/styles.module.scss";import"../FormLayout/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../RadioButton/styles.module.scss";import"../Icons/ChevronDown.js";import"../Select/styles.module.scss";import"../Textarea/styles.module.scss";import"../Validation/styles.module.scss";var ge=e=>e.type==="checkbox",ne=e=>e instanceof Date,I=e=>e==null;const it=e=>typeof e=="object";var O=e=>!I(e)&&!Array.isArray(e)&&it(e)&&!ne(e),_t=e=>O(e)&&e.target?ge(e.target)?e.target.checked:e.target.value:e,At=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,Dt=(e,l)=>e.has(At(l)),St=e=>{const l=e.constructor&&e.constructor.prototype;return O(l)&&l.hasOwnProperty("isPrototypeOf")},Me=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function re(e){let l;const i=Array.isArray(e);if(e instanceof Date)l=new Date(e);else if(e instanceof Set)l=new Set(e);else if(!(Me&&(e instanceof Blob||e instanceof FileList))&&(i||O(e)))if(l=i?[]:{},!Array.isArray(e)&&!St(e))l=e;else for(const r in e)l[r]=re(e[r]);else return e;return l}var ve=e=>Array.isArray(e)?e.filter(Boolean):[],F=e=>e===void 0,y=(e,l,i)=>{if(!l||!O(e))return i;const r=ve(l.split(/[,[\].]+?/)).reduce((s,o)=>I(s)?s:s[o],e);return F(r)||r===e?F(e[l])?i:e[l]:r};const ze={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},G={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},Q={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};f.createContext(null);var wt=(e,l,i,r=!0)=>{const s={defaultValues:l._defaultValues};for(const o in e)Object.defineProperty(s,o,{get:()=>{const c=o;return l._proxyFormState[c]!==G.all&&(l._proxyFormState[c]=!r||G.all),i&&(i[c]=!0),e[c]}});return s},P=e=>O(e)&&!Object.keys(e).length,Tt=(e,l,i,r)=>{i(e);const{name:s,...o}=e;return P(o)||Object.keys(o).length>=Object.keys(l).length||Object.keys(o).find(c=>l[c]===(!r||G.all))},we=e=>Array.isArray(e)?e:[e];function Ft(e){const l=f.useRef(e);l.current=e,f.useEffect(()=>{const i=!e.disabled&&l.current.subject&&l.current.subject.subscribe({next:l.current.next});return()=>{i&&i.unsubscribe()}},[e.disabled])}var j=e=>typeof e=="string",Lt=(e,l,i,r,s)=>j(e)?(r&&l.watch.add(e),y(i,e,s)):Array.isArray(e)?e.map(o=>(r&&l.watch.add(o),y(i,o))):(r&&(l.watchAll=!0),i),Re=e=>/^\w*$/.test(e),st=e=>ve(e.replace(/["|']|\]/g,"").split(/\.|\[/));function _(e,l,i){let r=-1;const s=Re(l)?[l]:st(l),o=s.length,c=o-1;for(;++r<o;){const b=s[r];let k=i;if(r!==c){const M=e[b];k=O(M)||Array.isArray(M)?M:isNaN(+s[r+1])?{}:[]}e[b]=k,e=e[b]}return e}var Ot=(e,l,i,r,s)=>l?{...i[e],types:{...i[e]&&i[e].types?i[e].types:{},[r]:s||!0}}:{};const Ce=(e,l,i)=>{for(const r of i||Object.keys(e)){const s=y(e,r);if(s){const{_f:o,...c}=s;if(o&&l(o.name)){if(o.ref.focus){o.ref.focus();break}else if(o.refs&&o.refs[0].focus){o.refs[0].focus();break}}else O(c)&&Ce(c,l)}}};var Je=e=>({isOnSubmit:!e||e===G.onSubmit,isOnBlur:e===G.onBlur,isOnChange:e===G.onChange,isOnAll:e===G.all,isOnTouch:e===G.onTouched}),Qe=(e,l,i)=>!i&&(l.watchAll||l.watch.has(e)||[...l.watch].some(r=>e.startsWith(r)&&/^\.\w+/.test(e.slice(r.length)))),Ct=(e,l,i)=>{const r=ve(y(e,i));return _(r,"root",l[i]),_(e,i,r),e},oe=e=>typeof e=="boolean",Ie=e=>e.type==="file",Y=e=>typeof e=="function",pe=e=>{if(!Me)return!1;const l=e?e.ownerDocument:0;return e instanceof(l&&l.defaultView?l.defaultView.HTMLElement:HTMLElement)},xe=e=>j(e),Ne=e=>e.type==="radio",ke=e=>e instanceof RegExp;const Xe={value:!1,isValid:!1},Ye={value:!0,isValid:!0};var lt=e=>{if(Array.isArray(e)){if(e.length>1){const l=e.filter(i=>i&&i.checked&&!i.disabled).map(i=>i.value);return{value:l,isValid:!!l.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!F(e[0].attributes.value)?F(e[0].value)||e[0].value===""?Ye:{value:e[0].value,isValid:!0}:Ye:Xe}return Xe};const Ze={isValid:!1,value:null};var at=e=>Array.isArray(e)?e.reduce((l,i)=>i&&i.checked&&!i.disabled?{isValid:!0,value:i.value}:l,Ze):Ze;function et(e,l,i="validate"){if(xe(e)||Array.isArray(e)&&e.every(xe)||oe(e)&&!e)return{type:i,message:xe(e)?e:"",ref:l}}var ae=e=>O(e)&&!ke(e)?e:{value:e,message:""},tt=async(e,l,i,r,s)=>{const{ref:o,refs:c,required:b,maxLength:k,minLength:M,min:H,max:A,pattern:p,validate:$,name:N,valueAsNumber:ue,mount:se,disabled:ce}=e._f,v=y(l,N);if(!se||ce)return{};const q=c?c[0]:o,B=E=>{r&&q.reportValidity&&(q.setCustomValidity(oe(E)?"":E||""),q.reportValidity())},S={},Z=Ne(o),ee=ge(o),de=Z||ee,U=(ue||Ie(o))&&F(o.value)&&F(v)||pe(o)&&o.value===""||v===""||Array.isArray(v)&&!v.length,K=Ot.bind(null,N,i,S),W=(E,x,h,V=Q.maxLength,T=Q.minLength)=>{const R=E?x:h;S[N]={type:E?V:T,message:R,ref:o,...K(E?V:T,R)}};if(s?!Array.isArray(v)||!v.length:b&&(!de&&(U||I(v))||oe(v)&&!v||ee&&!lt(c).isValid||Z&&!at(c).isValid)){const{value:E,message:x}=xe(b)?{value:!!b,message:b}:ae(b);if(E&&(S[N]={type:Q.required,message:x,ref:q,...K(Q.required,x)},!i))return B(x),S}if(!U&&(!I(H)||!I(A))){let E,x;const h=ae(A),V=ae(H);if(!I(v)&&!isNaN(v)){const T=o.valueAsNumber||v&&+v;I(h.value)||(E=T>h.value),I(V.value)||(x=T<V.value)}else{const T=o.valueAsDate||new Date(v),R=fe=>new Date(new Date().toDateString()+" "+fe),z=o.type=="time",J=o.type=="week";j(h.value)&&v&&(E=z?R(v)>R(h.value):J?v>h.value:T>new Date(h.value)),j(V.value)&&v&&(x=z?R(v)<R(V.value):J?v<V.value:T<new Date(V.value))}if((E||x)&&(W(!!E,h.message,V.message,Q.max,Q.min),!i))return B(S[N].message),S}if((k||M)&&!U&&(j(v)||s&&Array.isArray(v))){const E=ae(k),x=ae(M),h=!I(E.value)&&v.length>+E.value,V=!I(x.value)&&v.length<+x.value;if((h||V)&&(W(h,E.message,x.message),!i))return B(S[N].message),S}if(p&&!U&&j(v)){const{value:E,message:x}=ae(p);if(ke(E)&&!v.match(E)&&(S[N]={type:Q.pattern,message:x,ref:o,...K(Q.pattern,x)},!i))return B(x),S}if($){if(Y($)){const E=await $(v,l),x=et(E,q);if(x&&(S[N]={...x,...K(Q.validate,x.message)},!i))return B(x.message),S}else if(O($)){let E={};for(const x in $){if(!P(E)&&!i)break;const h=et(await $[x](v,l),q,x);h&&(E={...h,...K(x,h.message)},B(h.message),i&&(S[N]=E))}if(!P(E)&&(S[N]={ref:q,...E},!i))return S}}return B(!0),S};function Mt(e,l){const i=l.slice(0,-1).length;let r=0;for(;r<i;)e=F(e)?r++:e[l[r++]];return e}function Rt(e){for(const l in e)if(!F(e[l]))return!1;return!0}function C(e,l){const i=Array.isArray(l)?l:Re(l)?[l]:st(l),r=i.length===1?e:Mt(e,i),s=i.length-1,o=i[s];return r&&delete r[o],s!==0&&(O(r)&&P(r)||Array.isArray(r)&&Rt(r))&&C(e,i.slice(0,-1)),e}function Te(){let e=[];return{get observers(){return e},next:s=>{for(const o of e)o.next&&o.next(s)},subscribe:s=>(e.push(s),{unsubscribe:()=>{e=e.filter(o=>o!==s)}}),unsubscribe:()=>{e=[]}}}var Ee=e=>I(e)||!it(e);function ie(e,l){if(Ee(e)||Ee(l))return e===l;if(ne(e)&&ne(l))return e.getTime()===l.getTime();const i=Object.keys(e),r=Object.keys(l);if(i.length!==r.length)return!1;for(const s of i){const o=e[s];if(!r.includes(s))return!1;if(s!=="ref"){const c=l[s];if(ne(o)&&ne(c)||O(o)&&O(c)||Array.isArray(o)&&Array.isArray(c)?!ie(o,c):o!==c)return!1}}return!0}var nt=e=>e.type==="select-multiple",It=e=>Ne(e)||ge(e),Fe=e=>pe(e)&&e.isConnected,ot=e=>{for(const l in e)if(Y(e[l]))return!0;return!1};function Ve(e,l={}){const i=Array.isArray(e);if(O(e)||i)for(const r in e)Array.isArray(e[r])||O(e[r])&&!ot(e[r])?(l[r]=Array.isArray(e[r])?[]:{},Ve(e[r],l[r])):I(e[r])||(l[r]=!0);return l}function ut(e,l,i){const r=Array.isArray(e);if(O(e)||r)for(const s in e)Array.isArray(e[s])||O(e[s])&&!ot(e[s])?F(l)||Ee(i[s])?i[s]=Array.isArray(e[s])?Ve(e[s],[]):{...Ve(e[s])}:ut(e[s],I(l)?{}:l[s],i[s]):i[s]=!ie(e[s],l[s]);return i}var Le=(e,l)=>ut(e,l,Ve(l)),ct=(e,{valueAsNumber:l,valueAsDate:i,setValueAs:r})=>F(e)?e:l?e===""?NaN:e&&+e:i&&j(e)?new Date(e):r?r(e):e;function Oe(e){const l=e.ref;if(!(e.refs?e.refs.every(i=>i.disabled):l.disabled))return Ie(l)?l.files:Ne(l)?at(e.refs).value:nt(l)?[...l.selectedOptions].map(({value:i})=>i):ge(l)?lt(e.refs).value:ct(F(l.value)?e.ref.value:l.value,e)}var Nt=(e,l,i,r)=>{const s={};for(const o of e){const c=y(l,o);c&&_(s,o,c._f)}return{criteriaMode:i,names:[...e],fields:s,shouldUseNativeValidation:r}},ye=e=>F(e)?e:ke(e)?e.source:O(e)?ke(e.value)?e.value.source:e.value:e,Ut=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function rt(e,l,i){const r=y(e,i);if(r||Re(i))return{error:r,name:i};const s=i.split(".");for(;s.length;){const o=s.join("."),c=y(l,o),b=y(e,o);if(c&&!Array.isArray(c)&&i!==o)return{name:i};if(b&&b.type)return{name:o,error:b};s.pop()}return{name:i}}var qt=(e,l,i,r,s)=>s.isOnAll?!1:!i&&s.isOnTouch?!(l||e):(i?r.isOnBlur:s.isOnBlur)?!e:(i?r.isOnChange:s.isOnChange)?e:!0,Bt=(e,l)=>!ve(y(e,l)).length&&C(e,l);const Pt={mode:G.onSubmit,reValidateMode:G.onChange,shouldFocusError:!0};function Ht(e={},l){let i={...Pt,...e},r={submitCount:0,isDirty:!1,isLoading:Y(i.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},errors:{}},s={},o=O(i.defaultValues)||O(i.values)?re(i.defaultValues||i.values)||{}:{},c=i.shouldUnregister?{}:re(o),b={action:!1,mount:!1,watch:!1},k={mount:new Set,unMount:new Set,array:new Set,watch:new Set},M,H=0;const A={isDirty:!1,dirtyFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},p={values:Te(),array:Te(),state:Te()},$=e.resetOptions&&e.resetOptions.keepDirtyValues,N=Je(i.mode),ue=Je(i.reValidateMode),se=i.criteriaMode===G.all,ce=t=>a=>{clearTimeout(H),H=setTimeout(t,a)},v=async t=>{if(A.isValid||t){const a=i.resolver?P((await U()).errors):await W(s,!0);a!==r.isValid&&p.state.next({isValid:a})}},q=t=>A.isValidating&&p.state.next({isValidating:t}),B=(t,a=[],n,m,d=!0,u=!0)=>{if(m&&n){if(b.action=!0,u&&Array.isArray(y(s,t))){const g=n(y(s,t),m.argA,m.argB);d&&_(s,t,g)}if(u&&Array.isArray(y(r.errors,t))){const g=n(y(r.errors,t),m.argA,m.argB);d&&_(r.errors,t,g),Bt(r.errors,t)}if(A.touchedFields&&u&&Array.isArray(y(r.touchedFields,t))){const g=n(y(r.touchedFields,t),m.argA,m.argB);d&&_(r.touchedFields,t,g)}A.dirtyFields&&(r.dirtyFields=Le(o,c)),p.state.next({name:t,isDirty:x(t,a),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else _(c,t,a)},S=(t,a)=>{_(r.errors,t,a),p.state.next({errors:r.errors})},Z=(t,a,n,m)=>{const d=y(s,t);if(d){const u=y(c,t,F(n)?y(o,t):n);F(u)||m&&m.defaultChecked||a?_(c,t,a?u:Oe(d._f)):T(t,u),b.mount&&v()}},ee=(t,a,n,m,d)=>{let u=!1,g=!1;const D={name:t};if(!n||m){A.isDirty&&(g=r.isDirty,r.isDirty=D.isDirty=x(),u=g!==D.isDirty);const w=ie(y(o,t),a);g=y(r.dirtyFields,t),w?C(r.dirtyFields,t):_(r.dirtyFields,t,!0),D.dirtyFields=r.dirtyFields,u=u||A.dirtyFields&&g!==!w}if(n){const w=y(r.touchedFields,t);w||(_(r.touchedFields,t,n),D.touchedFields=r.touchedFields,u=u||A.touchedFields&&w!==n)}return u&&d&&p.state.next(D),u?D:{}},de=(t,a,n,m)=>{const d=y(r.errors,t),u=A.isValid&&oe(a)&&r.isValid!==a;if(e.delayError&&n?(M=ce(()=>S(t,n)),M(e.delayError)):(clearTimeout(H),M=null,n?_(r.errors,t,n):C(r.errors,t)),(n?!ie(d,n):d)||!P(m)||u){const g={...m,...u&&oe(a)?{isValid:a}:{},errors:r.errors,name:t};r={...r,...g},p.state.next(g)}q(!1)},U=async t=>i.resolver(c,i.context,Nt(t||k.mount,s,i.criteriaMode,i.shouldUseNativeValidation)),K=async t=>{const{errors:a}=await U();if(t)for(const n of t){const m=y(a,n);m?_(r.errors,n,m):C(r.errors,n)}else r.errors=a;return a},W=async(t,a,n={valid:!0})=>{for(const m in t){const d=t[m];if(d){const{_f:u,...g}=d;if(u){const D=k.array.has(u.name),w=await tt(d,c,se,i.shouldUseNativeValidation&&!a,D);if(w[u.name]&&(n.valid=!1,a))break;!a&&(y(w,u.name)?D?Ct(r.errors,w,u.name):_(r.errors,u.name,w[u.name]):C(r.errors,u.name))}g&&await W(g,a,n)}}return n.valid},E=()=>{for(const t of k.unMount){const a=y(s,t);a&&(a._f.refs?a._f.refs.every(n=>!Fe(n)):!Fe(a._f.ref))&&_e(t)}k.unMount=new Set},x=(t,a)=>(t&&a&&_(c,t,a),!ie(Ue(),o)),h=(t,a,n)=>Lt(t,k,{...b.mount?c:F(a)?o:j(t)?{[t]:a}:a},n,a),V=t=>ve(y(b.mount?c:o,t,e.shouldUnregister?y(o,t,[]):[])),T=(t,a,n={})=>{const m=y(s,t);let d=a;if(m){const u=m._f;u&&(!u.disabled&&_(c,t,ct(a,u)),d=pe(u.ref)&&I(a)?"":a,nt(u.ref)?[...u.ref.options].forEach(g=>g.selected=d.includes(g.value)):u.refs?ge(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(d)?!!d.find(D=>D===g.value):d===g.value)):u.refs[0]&&(u.refs[0].checked=!!d):u.refs.forEach(g=>g.checked=g.value===d):Ie(u.ref)?u.ref.value="":(u.ref.value=d,u.ref.type||p.values.next({name:t,values:{...c}})))}(n.shouldDirty||n.shouldTouch)&&ee(t,d,n.shouldTouch,n.shouldDirty,!0),n.shouldValidate&&fe(t)},R=(t,a,n)=>{for(const m in a){const d=a[m],u=`${t}.${m}`,g=y(s,u);(k.array.has(t)||!Ee(d)||g&&!g._f)&&!ne(d)?R(u,d,n):T(u,d,n)}},z=(t,a,n={})=>{const m=y(s,t),d=k.array.has(t),u=re(a);_(c,t,u),d?(p.array.next({name:t,values:{...c}}),(A.isDirty||A.dirtyFields)&&n.shouldDirty&&p.state.next({name:t,dirtyFields:Le(o,c),isDirty:x(t,u)})):m&&!m._f&&!I(u)?R(t,u,n):T(t,u,n),Qe(t,k)&&p.state.next({...r}),p.values.next({name:t,values:{...c}}),!b.mount&&l()},J=async t=>{const a=t.target;let n=a.name,m=!0;const d=y(s,n),u=()=>a.type?Oe(d._f):_t(t);if(d){let g,D;const w=u(),le=t.type===ze.BLUR||t.type===ze.FOCUS_OUT,vt=!Ut(d._f)&&!i.resolver&&!y(r.errors,n)&&!d._f.deps||qt(le,y(r.touchedFields,n),r.isSubmitted,ue,N),De=Qe(n,k,le);_(c,n,w),le?(d._f.onBlur&&d._f.onBlur(t),M&&M(0)):d._f.onChange&&d._f.onChange(t);const Se=ee(n,w,le,!1),ht=!P(Se)||De;if(!le&&p.values.next({name:n,type:t.type,values:{...c}}),vt)return A.isValid&&v(),ht&&p.state.next({name:n,...De?{}:Se});if(!le&&De&&p.state.next({...r}),q(!0),i.resolver){const{errors:$e}=await U([n]),bt=rt(r.errors,s,n),We=rt($e,s,bt.name||n);g=We.error,n=We.name,D=P($e)}else g=(await tt(d,c,se,i.shouldUseNativeValidation))[n],m=isNaN(w)||w===y(c,n,w),m&&(g?D=!1:A.isValid&&(D=await W(s,!0)));m&&(d._f.deps&&fe(d._f.deps),de(n,D,g,Se))}},fe=async(t,a={})=>{let n,m;const d=we(t);if(q(!0),i.resolver){const u=await K(F(t)?t:d);n=P(u),m=t?!d.some(g=>y(u,g)):n}else t?(m=(await Promise.all(d.map(async u=>{const g=y(s,u);return await W(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!m&&!r.isValid)&&v()):m=n=await W(s);return p.state.next({...!j(t)||A.isValid&&n!==r.isValid?{}:{name:t},...i.resolver||!t?{isValid:n}:{},errors:r.errors,isValidating:!1}),a.shouldFocus&&!m&&Ce(s,u=>u&&y(r.errors,u),t?d:k.mount),m},Ue=t=>{const a={...o,...b.mount?c:{}};return F(t)?a:j(t)?y(a,t):t.map(n=>y(a,n))},qe=(t,a)=>({invalid:!!y((a||r).errors,t),isDirty:!!y((a||r).dirtyFields,t),isTouched:!!y((a||r).touchedFields,t),error:y((a||r).errors,t)}),dt=t=>{t&&we(t).forEach(a=>C(r.errors,a)),p.state.next({errors:t?r.errors:{}})},ft=(t,a,n)=>{const m=(y(s,t,{_f:{}})._f||{}).ref;_(r.errors,t,{...a,ref:m}),p.state.next({name:t,errors:r.errors,isValid:!1}),n&&n.shouldFocus&&m&&m.focus&&m.focus()},mt=(t,a)=>Y(t)?p.values.subscribe({next:n=>t(h(void 0,a),n)}):h(t,a,!0),_e=(t,a={})=>{for(const n of t?we(t):k.mount)k.mount.delete(n),k.array.delete(n),a.keepValue||(C(s,n),C(c,n)),!a.keepError&&C(r.errors,n),!a.keepDirty&&C(r.dirtyFields,n),!a.keepTouched&&C(r.touchedFields,n),!i.shouldUnregister&&!a.keepDefaultValue&&C(o,n);p.values.next({values:{...c}}),p.state.next({...r,...a.keepDirty?{isDirty:x()}:{}}),!a.keepIsValid&&v()},Ae=(t,a={})=>{let n=y(s,t);const m=oe(a.disabled);return _(s,t,{...n||{},_f:{...n&&n._f?n._f:{ref:{name:t}},name:t,mount:!0,...a}}),k.mount.add(t),n?m&&_(c,t,a.disabled?void 0:y(c,t,Oe(n._f))):Z(t,!0,a.value),{...m?{disabled:a.disabled}:{},...i.shouldUseNativeValidation?{required:!!a.required,min:ye(a.min),max:ye(a.max),minLength:ye(a.minLength),maxLength:ye(a.maxLength),pattern:ye(a.pattern)}:{},name:t,onChange:J,onBlur:J,ref:d=>{if(d){Ae(t,a),n=y(s,t);const u=F(d.value)&&d.querySelectorAll&&d.querySelectorAll("input,select,textarea")[0]||d,g=It(u),D=n._f.refs||[];if(g?D.find(w=>w===u):u===n._f.ref)return;_(s,t,{_f:{...n._f,...g?{refs:[...D.filter(Fe),u,...Array.isArray(y(o,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),Z(t,!1,void 0,u)}else n=y(s,t,{}),n._f&&(n._f.mount=!1),(i.shouldUnregister||a.shouldUnregister)&&!(Dt(k.array,t)&&b.action)&&k.unMount.add(t)}}},Be=()=>i.shouldFocusError&&Ce(s,t=>t&&y(r.errors,t),k.mount),yt=(t,a)=>async n=>{n&&(n.preventDefault&&n.preventDefault(),n.persist&&n.persist());let m=re(c);if(p.state.next({isSubmitting:!0}),i.resolver){const{errors:d,values:u}=await U();r.errors=d,m=u}else await W(s);C(r.errors,"root"),P(r.errors)?(p.state.next({errors:{}}),await t(m,n)):(a&&await a({...r.errors},n),Be(),setTimeout(Be)),p.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:P(r.errors),submitCount:r.submitCount+1,errors:r.errors})},gt=(t,a={})=>{y(s,t)&&(F(a.defaultValue)?z(t,y(o,t)):(z(t,a.defaultValue),_(o,t,a.defaultValue)),a.keepTouched||C(r.touchedFields,t),a.keepDirty||(C(r.dirtyFields,t),r.isDirty=a.defaultValue?x(t,y(o,t)):x()),a.keepError||(C(r.errors,t),A.isValid&&v()),p.state.next({...r}))},Pe=(t,a={})=>{const n=t||o,m=re(n),d=t&&!P(t)?m:o;if(a.keepDefaultValues||(o=n),!a.keepValues){if(a.keepDirtyValues||$)for(const u of k.mount)y(r.dirtyFields,u)?_(d,u,y(c,u)):z(u,y(d,u));else{if(Me&&F(t))for(const u of k.mount){const g=y(s,u);if(g&&g._f){const D=Array.isArray(g._f.refs)?g._f.refs[0]:g._f.ref;if(pe(D)){const w=D.closest("form");if(w){w.reset();break}}}}s={}}c=e.shouldUnregister?a.keepDefaultValues?re(o):{}:m,p.array.next({values:{...d}}),p.values.next({values:{...d}})}k={mount:new Set,unMount:new Set,array:new Set,watch:new Set,watchAll:!1,focus:""},!b.mount&&l(),b.mount=!A.isValid||!!a.keepIsValid,b.watch=!!e.shouldUnregister,p.state.next({submitCount:a.keepSubmitCount?r.submitCount:0,isDirty:a.keepDirty?r.isDirty:!!(a.keepDefaultValues&&!ie(t,o)),isSubmitted:a.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:a.keepDirtyValues?r.dirtyFields:a.keepDefaultValues&&t?Le(o,t):{},touchedFields:a.keepTouched?r.touchedFields:{},errors:a.keepErrors?r.errors:{},isSubmitting:!1,isSubmitSuccessful:!1})},He=(t,a)=>Pe(Y(t)?t(c):t,a);return{control:{register:Ae,unregister:_e,getFieldState:qe,_executeSchema:U,_getWatch:h,_getDirty:x,_updateValid:v,_removeUnmounted:E,_updateFieldArray:B,_getFieldArray:V,_reset:Pe,_resetDefaultValues:()=>Y(i.defaultValues)&&i.defaultValues().then(t=>{He(t,i.resetOptions),p.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_subjects:p,_proxyFormState:A,get _fields(){return s},get _formValues(){return c},get _state(){return b},set _state(t){b=t},get _defaultValues(){return o},get _names(){return k},set _names(t){k=t},get _formState(){return r},set _formState(t){r=t},get _options(){return i},set _options(t){i={...i,...t}}},trigger:fe,register:Ae,handleSubmit:yt,watch:mt,setValue:z,getValues:Ue,reset:He,resetField:gt,clearErrors:dt,unregister:_e,setError:ft,setFocus:(t,a={})=>{const n=y(s,t),m=n&&n._f;if(m){const d=m.refs?m.refs[0]:m.ref;d.focus&&(d.focus(),a.shouldSelect&&d.select())}},getFieldState:qe}}function $t(e={}){const l=f.useRef(),[i,r]=f.useState({isDirty:!1,isValidating:!1,isLoading:Y(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},errors:{},defaultValues:Y(e.defaultValues)?void 0:e.defaultValues});l.current||(l.current={...Ht(e,()=>r(o=>({...o}))),formState:i});const s=l.current.control;return s._options=e,Ft({subject:s._subjects.state,next:o=>{Tt(o,s._proxyFormState,s._updateFormState,!0)&&r({...s._formState})}}),f.useEffect(()=>{e.values&&!ie(e.values,s._defaultValues)?s._reset(e.values,s._options.resetOptions):s._resetDefaultValues()},[e.values,s]),f.useEffect(()=>{s._state.mount||(s._updateValid(),s._state.mount=!0),s._state.watch&&(s._state.watch=!1,s._subjects.state.next({...s._formState})),s._removeUnmounted()}),l.current.formState=wt(i,s),l.current}var Wt=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e.select="select",e.date="date",e))(Wt||{});const Gt=e=>{const{exampleType:l="formgroup"}=e,{register:i,handleSubmit:r,formState:{errors:s}}=$t(),o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0);const c=new Date;c.setDate(o.getDate()-5),c.setHours(6),c.setMinutes(10),c.setSeconds(0);const b=new Date;b.setDate(o.getDate()+5),b.setHours(22),b.setMinutes(0),b.setSeconds(0);const k="field1",M="field2",H="field3",A="field4",p="field5",$="field6",N="field7",ue="field8",se="field9",ce=s.field1||s.field2||s.field3||s.field4||s.field5||s.field6||s.field7||s.field8||s.field9,v="Du må velge et alternativ",q="Du må velge to alternativ",B="Det kan ikke legges inn mer enn 40 tegn",S="Du må skrive noe her",Z='Du må velge "Option 2"',ee=`Du må velge dato mellom ${c.toLocaleDateString("nb")} og ${b.toLocaleDateString("nb")}`,de=`Du må skrive inn tidspunkt mellom ${c.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})} og ${b.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}`,U=h=>h.length>=2||q,K=h=>h.toString()==="Option 2"||Z,W=(h,V,T)=>{const R=new Date(h);return!!h&&R.getTime()>=V.getTime()&&R.getTime()<=T.getTime()||ee},E=(h,V)=>{const T=new Date;T.setHours(h),T.setMinutes(V),T.setSeconds(0);const R=c.toLocaleTimeString("nb"),z=b.toLocaleTimeString("nb"),J=T.toLocaleTimeString("nb");return console.log("value",J),!!T&&J>=R&&J<=z||de},x=()=>{if(l==="formgroup"){const h=[f.createElement(te,{key:0,inputId:"checkbox1",label:f.createElement(L,{labelTexts:[{text:"Checkbox 1"}]}),...i(k,{required:v})}),f.createElement(te,{key:1,inputId:"checkbox2",label:f.createElement(L,{labelTexts:[{text:"Checkbox 2"}]}),...i(k,{required:v})}),f.createElement(te,{key:2,inputId:"checkbox3",label:f.createElement(L,{labelTexts:[{text:"Checkbox 3"}]}),...i(k,{required:v})})];return[f.createElement(X,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:s.field1?s.field1.message:void 0,variant:e.variant},f.createElement(kt,{maxColumns:Et.two},h.map(V=>V))),f.createElement(X,{key:1,legend:"Velg minst to",error:s.field2?s.field2.message:void 0,variant:e.variant},f.createElement(te,{inputId:"checkbox4",label:f.createElement(L,{labelTexts:[{text:"Checkbox 4"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox5",label:f.createElement(L,{labelTexts:[{text:"Checkbox 5"}]}),...i(M,{validate:U})}),f.createElement(te,{inputId:"checkbox6",label:f.createElement(L,{labelTexts:[{text:"Checkbox 6"}]}),...i(M,{validate:U})})),f.createElement(X,{key:2,legend:"Velg en",error:s.field3?s.field3.message:void 0,variant:e.variant},f.createElement(he,{inputId:"radiobutton1",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 1"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton2",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 2"}]}),...i(H,{required:v})}),f.createElement(he,{inputId:"radiobutton3",label:f.createElement(L,{labelTexts:[{text:"Radiobutton 3"}]}),...i(H,{required:v})})),f.createElement(X,{key:3,error:s.field4?s.field4.message:void 0},f.createElement(je,{defaultValue:`Dette er en test
|
|
2
2
|
|
|
3
3
|
Hello
|
|
4
4
|
|
|
@@ -8,5 +8,5 @@ import f from"react";import{isTest as xt}from"../../utils/environment.js";import
|
|
|
8
8
|
|
|
9
9
|
Hello
|
|
10
10
|
|
|
11
|
-
test`,grow:!0,maxCharacters:40,minRows:5,errorText:s.field4?s.field4.message:void 0,label:f.createElement(L,{labelTexts:[{text:"Skriv din historie her",type:"semibold"}]}),textareaId:"textarea1",...i(A,{maxLength:{value:40,message:B}})});if(l==="input")return f.createElement(me,{inputId:"input1",label:f.createElement(L,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),placeholder:"Skriv noe!",errorText:s.field5?s.field5.message:void 0,icon:Ge,...i(p,{required:S})});if(l==="select")return f.createElement(Ke,{errorText:s.field6?s.field6.message:void 0,label:f.createElement(L,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),...i($,{validate:K})},f.createElement("option",{value:"Option 1"},"Option 1"),f.createElement("option",{value:"Option 2"},"Option 2"),f.createElement("option",{value:"Option 3"},"Option 3"));if(l==="date"){const h=s.field7||s.field8||s.field9;return f.createElement(f.Fragment,null,f.createElement(X,{legend:"Velg en dato og et klokkeslett",fieldsetClassName:be["date-time"],error:h?h.message:void 0},f.createElement(me,{className:be["date-time__date-picker"],label:f.createElement(L,{labelTexts:[{text:"dato",type:"semibold"}]}),width:20,type:"date",defaultValue:o.toLocaleDateString("en-CA"),min:c.toLocaleDateString("en-CA"),max:b.toLocaleDateString("en-CA"),...i(N,{validate:V=>W(V,c,b)})}),f.createElement(X,{htmlMarkup:"div",fieldsetClassName:be["date-time__time-wrapper"]},f.createElement(me,{label:f.createElement(L,{labelId:"time-label-id",labelTexts:[{text:"klokke",type:"semibold"}]}),width:4,type:"number",defaultValue:o.toLocaleTimeString("nb",{hour:"2-digit"}),max:23,min:0,...i(ue,{validate:V=>E(V,V)})}),f.createElement("span",{className:be["date-time__time-separator"]},":"),f.createElement(me,{"aria-labelledby":"time-label-id",width:4,type:"number",defaultValue:o.toLocaleTimeString("nb",{minute:"2-digit"}),max:59,min:0,...i(se,{validate:V=>E(7,V)})}))))}}};return f.createElement("form",{noValidate:!0,onSubmit:r(h=>{!xt()&&console.log(h)})},f.createElement(Vt,{variant:e.variant,errorSummary:ce?"Sjekk at alt er riktig utfylt":void 0},x()),f.createElement(pt,{type:"submit"},"Send inn"))},
|
|
11
|
+
test`,grow:!0,maxCharacters:40,minRows:5,errorText:s.field4?s.field4.message:void 0,label:f.createElement(L,{labelTexts:[{text:"Skriv din historie her",type:"semibold"}]}),textareaId:"textarea1",...i(A,{maxLength:{value:40,message:B}})});if(l==="input")return f.createElement(me,{inputId:"input1",label:f.createElement(L,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),placeholder:"Skriv noe!",errorText:s.field5?s.field5.message:void 0,icon:Ge,...i(p,{required:S})});if(l==="select")return f.createElement(Ke,{errorText:s.field6?s.field6.message:void 0,label:f.createElement(L,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),...i($,{validate:K})},f.createElement("option",{value:"Option 1"},"Option 1"),f.createElement("option",{value:"Option 2"},"Option 2"),f.createElement("option",{value:"Option 3"},"Option 3"));if(l==="date"){const h=s.field7||s.field8||s.field9;return f.createElement(f.Fragment,null,f.createElement(X,{legend:"Velg en dato og et klokkeslett",fieldsetClassName:be["date-time"],error:h?h.message:void 0},f.createElement(me,{className:be["date-time__date-picker"],label:f.createElement(L,{labelTexts:[{text:"dato",type:"semibold"}]}),width:20,type:"date",defaultValue:o.toLocaleDateString("en-CA"),min:c.toLocaleDateString("en-CA"),max:b.toLocaleDateString("en-CA"),...i(N,{validate:V=>W(V,c,b)})}),f.createElement(X,{htmlMarkup:"div",fieldsetClassName:be["date-time__time-wrapper"]},f.createElement(me,{label:f.createElement(L,{labelId:"time-label-id",labelTexts:[{text:"klokke",type:"semibold"}]}),width:4,type:"number",defaultValue:o.toLocaleTimeString("nb",{hour:"2-digit"}),max:23,min:0,...i(ue,{validate:V=>E(V,V)})}),f.createElement("span",{className:be["date-time__time-separator"]},":"),f.createElement(me,{"aria-labelledby":"time-label-id",width:4,type:"number",defaultValue:o.toLocaleTimeString("nb",{minute:"2-digit"}),max:59,min:0,...i(se,{validate:V=>E(7,V)})}))))}}};return f.createElement("form",{noValidate:!0,onSubmit:r(h=>{!xt()&&console.log(h)})},f.createElement(Vt,{variant:e.variant,errorSummary:ce?"Sjekk at alt er riktig utfylt":void 0},x()),f.createElement(pt,{type:"submit"},"Send inn"))},ei=Gt;export{Gt as FormExample,Wt as FormExampleVariants,ei as default};
|
|
12
12
|
//# sourceMappingURL=index.js.map
|