@helsenorge/designsystem-react 4.2.1 → 4.2.3

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 CHANGED
@@ -1,3 +1,19 @@
1
+ ## [4.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.1&targetVersion=GTv4.2.2) (2023-06-28)
2
+
3
+ ### Bug Fixes
4
+
5
+ - checkbox og radiobutton sine refs merges riktig
6
+ ([7fe16a6](https://github.com/helsenorge/designsystem/commit/7fe16a632e9a5f905474cdaa62316d2acb350ebe)), closes
7
+ [#304617](https://github.com/helsenorge/designsystem/issues/304617) [#305272](https://github.com/helsenorge/designsystem/issues/305272)
8
+
9
+ ## [4.2.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.2.0&targetVersion=GTv4.2.1) (2023-06-26)
10
+
11
+ ### Bug Fixes
12
+
13
+ - skjul ekstra ekspander i block-visning av table på mobil
14
+ ([550bd65](https://github.com/helsenorge/designsystem/commit/550bd65ca2264900a2a4939a033a48f59aa8df8e)), closes
15
+ [#305303](https://github.com/helsenorge/designsystem/issues/305303)
16
+
1
17
  ## [4.2.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv4.1.1&targetVersion=GTv4.2.0) (2023-06-22)
2
18
 
3
19
  ### Features
@@ -765,12 +781,12 @@
765
781
 
766
782
  ### Bug Fixes
767
783
 
768
- - panel har avstand fra tittel til badge
769
- ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
770
- [#282359](https://github.com/helsenorge/designsystem/issues/282359)
771
784
  - økt kontrast på understreking av lenker
772
785
  ([50b7fa4](https://github.com/helsenorge/designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes
773
786
  [#229049](https://github.com/helsenorge/designsystem/issues/229049)
787
+ - panel har avstand fra tittel til badge
788
+ ([09034c4](https://github.com/helsenorge/designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes
789
+ [#282359](https://github.com/helsenorge/designsystem/issues/282359)
774
790
 
775
791
  ## [1.2.2](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
776
792
 
package/Checkbox.js CHANGED
@@ -1,2 +1,2 @@
1
- import b,{useState as M,useEffect as O}from"react";import n from"classnames";import{FormMode as l,FormVariant as V,AnalyticsId as X,IconSize as $}from"./constants.js";import{usePseudoClasses as J}from"./hooks/usePseudoClasses.js";import{getColor as h}from"./theme/currys/color.js";import{a as K}from"./uuid.js";import{Icon as Q}from"./components/Icons/Icon.js";import U from"./components/Icons/Check.js";import{g as Y,r as Z}from"./Label.js";import e from"./components/Checkbox/styles.module.scss";const y=b.forwardRef((p,v)=>{const{className:I,checked:k=!1,disabled:r,label:m,inputId:d=K(),mode:i=l.onwhite,name:N=d,variant:E,errorText:s,error:x=!!s,value:S=Y(m),testId:F,required:L,onChange:f,...T}=p,[o,g]=M(k),w=i===l.onwhite,u=i===l.ongrey,C=i===l.onblueberry,a=x||i===l.oninvalid,t=i===l.ondark,c=E===V.bigform,{refObject:W,isFocused:z}=J(v),A=n(e["checkbox-wrapper"],{[e["checkbox-wrapper--with-error"]]:s,[e["checkbox-wrapper--bigform"]]:c}),P=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&&z,[e["checkbox-label__big-form--on-white"]]:c&&w,[e["checkbox-label__big-form--on-grey"]]:c&&u,[e["checkbox-label__big-form--on-blueberry"]]:c&&C,[e["checkbox-label__big-form--on-invalid"]]:c&&a,[e["checkbox-label__big-form--disabled"]]:c&&r}),R=n(e.checkbox,I),j=n(e["checkbox__icon-wrapper"],{[e["checkbox__icon-wrapper--on-white"]]:w,[e["checkbox__icon-wrapper--on-grey"]]:u,[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"]]:C,[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}),q=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}),B=n(e["checkbox-errors"]);let _=h("white");(t||c&&o)&&(_=h("blueberry",900)),a&&c&&o&&(_=h("white")),r&&(_=h("neutral",400)),O(()=>{g(k)},[k]);const D=H=>{f&&f(H),g(!o)},G=()=>b.createElement(b.Fragment,null,b.createElement("input",{id:d,name:N,className:R,type:"checkbox",checked:o,disabled:r,value:S,ref:W,"aria-describedby":p["aria-describedby"]??void 0,"aria-invalid":x,required:L,onChange:D,...T}),b.createElement("span",{className:j},o&&b.createElement(Q,{color:_,className:e.checkbox__icon,svgIcon:U,size:$.XSmall})));return b.createElement("div",{"data-testid":F,"data-analyticsid":X.Checkbox,className:A},s&&b.createElement("p",{className:B},s),Z(m,G(),d,i,r,P,q,e["checkbox-sublabel-wrapper"],c))});y.displayName="Checkbox";const se=y;export{se as C,y as a};
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":"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"}
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 C,FormVariant as N,AnalyticsId as y}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 _=r.forwardRef((t,F)=>{const{className:k,fieldsetClassName:w,mode:m=C.onwhite,variant:n=N.normal,error:a,name:i,htmlMarkup:d="fieldset",renderError:G=!0,errorWrapperClassName:I,errorWrapperTestId:b}=t,p=m===C.ondark,u=n===N.bigform,v=l(o["form-group-wrapper"],{[o["form-group-wrapper--on-dark"]]:p,[o["form-group-wrapper--invalid"]]:a},k),T=l(o["form-group-wrapper__title"],{[o["form-group-wrapper__title--on-dark"]]:p&&!a,[o["form-group-wrapper__title--bigform"]]:u}),x=l(o["form-group"]),c=l(o["field-set__legend"],{[o["field-set__legend--on-dark"]]:p&&!a,[o["field-set__legend--bigform"]]:u}),g=l(o["field-set"],w),f=e=>s(e,M)?r.cloneElement(e,{variant:n,mapHelper:f}):s(e,_)?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,E=()=>r.createElement("div",{className:x},d==="div"&&r.createElement("div",{id:t.title,className:g},t.legend&&r.createElement("h5",{className:c},t.legend),r.Children.map(t.children,f)),d==="fieldset"&&r.createElement("fieldset",{name:t.title,className:g},t.legend&&r.createElement("legend",{className:c},t.legend),r.Children.map(t.children,f)));return r.createElement("div",{"data-testid":t.testId,"data-analyticsid":y.FormGroup,className:v,ref:F,tabIndex:-1},t.title&&r.createElement(D,{className:T,htmlMarkup:"h4",appearance:"title4",margin:{marginTop:0,marginBottom:a?1:2}},t.title),G?r.createElement(W,{className:I,errorText:a,testId:b},E()):E())}),U=_;export{U as F,_ as a};
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/Label.js CHANGED
@@ -1,2 +1,2 @@
1
- import e from"react";import F from"classnames";import{AnalyticsId as S,FormMode as f}from"./constants.js";import{S as h}from"./Spacer.js";import r from"./components/Label/styles.module.scss";import{isComponent as u}from"./utils/component.js";import{S as R}from"./StatusDot.js";const z=({className:t,id:a,mode:n,sublabelTexts:l,testId:s})=>{const o=p=>l&&l.map((i,E)=>{const b=F(r.label,r["label--sublabel"],{[r["label--semibold"]]:i.type==="semibold",[r["label--on-dark"]]:n===f.ondark});return p===i.hideFromScreenReader&&e.createElement("span",{className:b,key:E},i.text)}),m=o(),c=o(!0);return e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),m&&e.createElement("div",{className:t,id:a,"data-testid":s,"data-analyticsid":S.Sublabel},m),c&&e.createElement("div",{className:t,"data-testid":s},c))},j=t=>{let a="";return u(t,d)&&t.props.labelTexts.forEach(n=>{a+=n.hideFromScreenReader?"":n.text}),a},q=(t,a,n,l)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:a,mode:n,disabled:l}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t,type:"semibold"}],htmlFor:a,mode:n,disabled:l})),B=(t,a,n,l,s,o,m,c,p)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:n,mode:l,children:a,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c,sublabel:p?void 0:t.props.sublabel,statusDot:p?void 0:t.props.statusDot}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t}],htmlFor:n,mode:l,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c},a)),d=({afterLabelChildren:t,children:a,className:n,disabled:l,htmlFor:s,labelClassName:o,labelTextClassName:m,labelId:c,labelTexts:p,mode:i=f.onwhite,statusDot:E,sublabel:b,sublabelWrapperClassName:g,testId:k})=>{const v=a&&typeof a<"u",L=F(r["label-wrapper"],{[r["label-wrapper--no-bottom-margin"]]:v,[r["label-wrapper--after-label-children"]]:t},n),w=()=>p.map((y,x)=>{const N=F(r.label,{[r["label--semibold"]]:y.type==="semibold",[r["label--on-dark"]]:i===f.ondark,[r["label--disabled"]]:l},m);return e.createElement("span",{"aria-hidden":y.hideFromScreenReader,className:N,key:x},y.text)});return e.createElement("div",{className:L},e.createElement("div",{className:r["label-wrapper__inner"]},e.createElement("label",{className:o,id:c,htmlFor:s,"data-testid":k,"data-analyticsid":S.Label},e.createElement("span",{className:r["label-content-wrapper"]},a,e.createElement("span",null,w()))),e.createElement("div",{className:g},b&&u(b,z)&&e.cloneElement(b,{mode:i}),E&&u(E,R)&&e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),e.cloneElement(E,{mode:i===f.ondark?"ondark":"onwhite"})))),t&&e.createElement("div",{className:r["after-label-children"]},t))},C=d;export{C as L,z as S,q as a,j as g,B as r};
1
+ import e from"react";import y from"classnames";import{AnalyticsId as S,FormMode as f}from"./constants.js";import{S as h}from"./Spacer.js";import r from"./components/Label/styles.module.scss";import{isComponent as u}from"./utils/component.js";import{S as R}from"./StatusDot.js";const z=({className:t,id:a,mode:n,sublabelTexts:l,testId:s})=>{const o=p=>l&&l.map((i,E)=>{const b=y(r.label,r["label--sublabel"],{[r["label--semibold"]]:i.type==="semibold",[r["label--on-dark"]]:n===f.ondark});return p===i.hideFromScreenReader&&e.createElement("span",{className:b,key:E},i.text)}),m=o(),c=o(!0);return e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),m&&e.createElement("div",{className:t,id:a,"data-testid":s,"data-analyticsid":S.Sublabel},m),c&&e.createElement("div",{className:t,"data-testid":s},c))},$=t=>{let a="";return u(t,d)&&t.props.labelTexts.forEach(n=>{a+=n.hideFromScreenReader?"":n.text}),a},j=(t,a,n,l)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:a,mode:n,disabled:l}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t,type:"semibold"}],htmlFor:a,mode:n,disabled:l})),q=(t,a,n,l,s,o,m,c,p)=>e.createElement(e.Fragment,null,t&&u(t,d)?e.cloneElement(t,{htmlFor:n,mode:l,children:a,disabled:s,labelClassName:y(o,t.props.labelClassName),labelTextClassName:m,sublabelWrapperClassName:c,sublabel:p?void 0:t.props.sublabel,statusDot:p?void 0:t.props.statusDot}):typeof t=="string"&&e.createElement(d,{labelTexts:[{text:t}],htmlFor:n,mode:l,disabled:s,labelClassName:o,labelTextClassName:m,sublabelWrapperClassName:c},a)),d=({afterLabelChildren:t,children:a,className:n,disabled:l,htmlFor:s,labelClassName:o,labelTextClassName:m,labelId:c,labelTexts:p,mode:i=f.onwhite,statusDot:E,sublabel:b,sublabelWrapperClassName:g,testId:k})=>{const v=a&&typeof a<"u",L=y(r["label-wrapper"],{[r["label-wrapper--no-bottom-margin"]]:v,[r["label-wrapper--after-label-children"]]:t},n),w=()=>p.map((F,N)=>{const x=y(r.label,{[r["label--semibold"]]:F.type==="semibold",[r["label--on-dark"]]:i===f.ondark,[r["label--disabled"]]:l},m);return e.createElement("span",{"aria-hidden":F.hideFromScreenReader,className:x,key:N},F.text)});return e.createElement("div",{className:L},e.createElement("div",{className:r["label-wrapper__inner"]},e.createElement("label",{className:o,id:c,htmlFor:s,"data-testid":k,"data-analyticsid":S.Label},e.createElement("span",{className:r["label-content-wrapper"]},a,e.createElement("span",null,w()))),e.createElement("div",{className:g},b&&u(b,z)&&e.cloneElement(b,{mode:i}),E&&u(E,R)&&e.createElement(e.Fragment,null,e.createElement(h,{size:"3xs"}),e.cloneElement(E,{mode:i===f.ondark?"ondark":"onwhite"})))),t&&e.createElement("div",{className:r["after-label-children"]},t))},B=d;export{B as L,z as S,j as a,$ as g,q as r};
2
2
  //# sourceMappingURL=Label.js.map
package/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** id that is placed on the wrapper */\n id: string;\n /** Array of sublabel strings. Can be of type semibold or normal */\n mode?: FormMode;\n /** Array of sublabel strings. Can be of type semibold or normal */\n sublabelTexts?: LabelText[];\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, mode, sublabelTexts, testId }) => {\n const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n return (\n sublabelTexts &&\n sublabelTexts.map((sublabelText, index) => {\n const labelClasses = cn(styles.label, styles['label--sublabel'], {\n [styles['label--semibold']]: sublabelText.type === 'semibold',\n [styles['label--on-dark']]: mode === FormMode.ondark,\n });\n return (\n hideFromScreenReader === sublabelText.hideFromScreenReader && (\n <span className={labelClasses} key={index}>\n {sublabelText.text}\n </span>\n )\n );\n })\n );\n };\n\n const subLabels = mapSublabels();\n const ariaHiddenSublabels = mapSublabels(true);\n\n return (\n <>\n <Spacer size={'3xs'} />\n {subLabels && (\n <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n {subLabels}\n </div>\n )}\n {ariaHiddenSublabels && (\n <div className={className} data-testid={testId}>\n {ariaHiddenSublabels}\n </div>\n )}\n </>\n );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n hideFromScreenReader?: boolean;\n text: string;\n type?: 'semibold' | 'normal';\n};\n\nexport interface LabelProps extends Pick<React.InputHTMLAttributes<HTMLLabelElement>, 'disabled'> {\n /** Component shown after label - discourage use of this */\n afterLabelChildren?: React.ReactNode;\n /** Adds custom classes to the element. */\n children?: React.ReactNode;\n /** Adds custom classes to the label tag. */\n labelClassName?: string;\n /** Adds custom classes to the label text. */\n labelTextClassName?: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** Id that is put on the \"for\" attribute of the label */\n htmlFor?: string;\n /** Id som plasseres på <label/> */\n labelId?: string;\n /** Array of main label strings. Can be of type semibold or normal */\n labelTexts: LabelText[];\n /** Array of sublabel strings. Can be of type semibold or normal */\n mode?: keyof typeof FormMode;\n /** StatusDot placed underneath the last sublabel */\n statusDot?: React.ReactNode;\n /** Sublabel component */\n sublabel?: React.ReactNode;\n /** Adds custom classes to the div wrapping the sublabels. */\n sublabelWrapperClassName?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n let allLabelText = '';\n\n if (isComponent<LabelProps>(label, Label)) {\n label.props.labelTexts.forEach(labelText => {\n allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n });\n }\n\n return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, mode: FormMode, disabled?: boolean): React.ReactNode => {\n return (\n <>\n {label && isComponent<LabelProps>(label, Label)\n ? React.cloneElement(label, {\n htmlFor: inputId,\n mode: mode,\n disabled,\n })\n : typeof label === 'string' && (\n <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} mode={mode} disabled={disabled} />\n )}\n </>\n );\n};\n\nexport const renderLabelAsParent = (\n label: React.ReactNode,\n children: React.ReactNode,\n inputId: string,\n mode: FormMode,\n disabled?: boolean,\n labelClassName?: string,\n labelTextClassName?: string,\n sublabelWrapperClassName?: string,\n bigform?: boolean\n): React.ReactNode => {\n return (\n <>\n {label && isComponent<LabelProps>(label, Label)\n ? React.cloneElement(label, {\n htmlFor: inputId,\n mode: mode,\n children: children,\n disabled,\n labelClassName: labelClassName,\n labelTextClassName: labelTextClassName,\n sublabelWrapperClassName: sublabelWrapperClassName,\n sublabel: bigform ? undefined : label.props.sublabel,\n statusDot: bigform ? undefined : label.props.statusDot,\n })\n : typeof label === 'string' && (\n <Label\n labelTexts={[{ text: label }]}\n htmlFor={inputId}\n mode={mode}\n disabled={disabled}\n labelClassName={labelClassName}\n labelTextClassName={labelTextClassName}\n sublabelWrapperClassName={sublabelWrapperClassName}\n >\n {children}\n </Label>\n )}\n </>\n );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n afterLabelChildren,\n children,\n className,\n disabled,\n htmlFor,\n labelClassName,\n labelTextClassName,\n labelId,\n labelTexts,\n mode = FormMode.onwhite,\n statusDot,\n sublabel,\n sublabelWrapperClassName,\n testId,\n}) => {\n const hasChildren = children && typeof children !== 'undefined';\n const labelWrapperClasses = cn(\n styles['label-wrapper'],\n { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n className\n );\n\n const mapLabels = (): React.ReactNode => {\n return labelTexts.map((labelText, index) => {\n const labelClasses = cn(\n styles.label,\n {\n [styles['label--semibold']]: labelText.type === 'semibold',\n [styles['label--on-dark']]: mode === FormMode.ondark,\n [styles['label--disabled']]: disabled,\n },\n labelTextClassName\n );\n return (\n <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n {labelText.text}\n </span>\n );\n });\n };\n\n return (\n <div className={labelWrapperClasses}>\n <div className={styles['label-wrapper__inner']}>\n <label className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n <span className={styles['label-content-wrapper']}>\n {children}\n <span>{mapLabels()}</span>\n </span>\n </label>\n <div className={sublabelWrapperClassName}>\n {sublabel &&\n isComponent<SublabelProps>(sublabel, Sublabel) &&\n React.cloneElement(sublabel, {\n mode: mode as FormMode,\n })}\n {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n <>\n <Spacer size={'3xs'} />\n {React.cloneElement(statusDot, {\n mode: mode === FormMode.ondark ? 'ondark' : 'onwhite',\n })}\n </>\n )}\n </div>\n </div>\n {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n </div>\n );\n};\n\nexport default Label;\n"],"names":["Sublabel","className","id","mode","sublabelTexts","testId","mapSublabels","hideFromScreenReader","sublabelText","index","labelClasses","cn","styles","FormMode","React","subLabels","ariaHiddenSublabels","Spacer","AnalyticsId","getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","disabled","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","bigform","afterLabelChildren","htmlFor","labelId","labelTexts","statusDot","sublabel","hasChildren","labelWrapperClasses","mapLabels","StatusDot","Label$1"],"mappings":"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"}
1
+ {"version":3,"file":"Label.js","sources":["../src/components/Label/SubLabel.tsx","../src/components/Label/Label.tsx"],"sourcesContent":["import React from 'react';\n\nimport cn from 'classnames';\n\nimport { LabelText } from './Label';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport Spacer from '../Spacer';\n\nimport styles from './styles.module.scss';\n\nexport interface SublabelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** id that is placed on the wrapper */\n id: string;\n /** Array of sublabel strings. Can be of type semibold or normal */\n mode?: FormMode;\n /** Array of sublabel strings. Can be of type semibold or normal */\n sublabelTexts?: LabelText[];\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const Sublabel: React.FC<SublabelProps> = ({ className, id, mode, sublabelTexts, testId }) => {\n const mapSublabels = (hideFromScreenReader?: boolean): React.ReactNode => {\n return (\n sublabelTexts &&\n sublabelTexts.map((sublabelText, index) => {\n const labelClasses = cn(styles.label, styles['label--sublabel'], {\n [styles['label--semibold']]: sublabelText.type === 'semibold',\n [styles['label--on-dark']]: mode === FormMode.ondark,\n });\n return (\n hideFromScreenReader === sublabelText.hideFromScreenReader && (\n <span className={labelClasses} key={index}>\n {sublabelText.text}\n </span>\n )\n );\n })\n );\n };\n\n const subLabels = mapSublabels();\n const ariaHiddenSublabels = mapSublabels(true);\n\n return (\n <>\n <Spacer size={'3xs'} />\n {subLabels && (\n <div className={className} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Sublabel}>\n {subLabels}\n </div>\n )}\n {ariaHiddenSublabels && (\n <div className={className} data-testid={testId}>\n {ariaHiddenSublabels}\n </div>\n )}\n </>\n );\n};\n","import React, { FunctionComponent } from 'react';\n\nimport cn from 'classnames';\n\nimport { Sublabel, SublabelProps } from './SubLabel';\nimport { AnalyticsId, FormMode } from '../../constants';\nimport { isComponent } from '../../utils/component';\nimport Spacer from '../Spacer';\nimport StatusDot, { StatusDotProps } from '../StatusDot';\n\nimport styles from './styles.module.scss';\n\nexport type LabelText = {\n hideFromScreenReader?: boolean;\n text: string;\n type?: 'semibold' | 'normal';\n};\n\nexport interface LabelProps extends Pick<React.InputHTMLAttributes<HTMLLabelElement>, 'disabled'> {\n /** Component shown after label - discourage use of this */\n afterLabelChildren?: React.ReactNode;\n /** Adds custom classes to the element. */\n children?: React.ReactNode;\n /** Adds custom classes to the label tag. */\n labelClassName?: string;\n /** Adds custom classes to the label text. */\n labelTextClassName?: string;\n /** Adds custom classes to the element. */\n className?: string;\n /** Id that is put on the \"for\" attribute of the label */\n htmlFor?: string;\n /** Id som plasseres på <label/> */\n labelId?: string;\n /** Array of main label strings. Can be of type semibold or normal */\n labelTexts: LabelText[];\n /** Array of sublabel strings. Can be of type semibold or normal */\n mode?: keyof typeof FormMode;\n /** StatusDot placed underneath the last sublabel */\n statusDot?: React.ReactNode;\n /** Sublabel component */\n sublabel?: React.ReactNode;\n /** Adds custom classes to the div wrapping the sublabels. */\n sublabelWrapperClassName?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const getLabelText = (label: React.ReactNode): string => {\n let allLabelText = '';\n\n if (isComponent<LabelProps>(label, Label)) {\n label.props.labelTexts.forEach(labelText => {\n allLabelText += !labelText.hideFromScreenReader ? labelText.text : '';\n });\n }\n\n return allLabelText;\n};\n\nexport const renderLabel = (label: React.ReactNode, inputId: string, mode: FormMode, disabled?: boolean): React.ReactNode => {\n return (\n <>\n {label && isComponent<LabelProps>(label, Label)\n ? React.cloneElement(label, {\n htmlFor: inputId,\n mode: mode,\n disabled,\n })\n : typeof label === 'string' && (\n <Label labelTexts={[{ text: label, type: 'semibold' }]} htmlFor={inputId} mode={mode} disabled={disabled} />\n )}\n </>\n );\n};\n\nexport const renderLabelAsParent = (\n label: React.ReactNode,\n children: React.ReactNode,\n inputId: string,\n mode: FormMode,\n disabled?: boolean,\n labelClassName?: string,\n labelTextClassName?: string,\n sublabelWrapperClassName?: string,\n bigform?: boolean\n): React.ReactNode => {\n return (\n <>\n {label && isComponent<LabelProps>(label, Label)\n ? React.cloneElement(label, {\n htmlFor: inputId,\n mode: mode,\n children: children,\n disabled,\n labelClassName: cn(labelClassName, label.props.labelClassName),\n labelTextClassName: labelTextClassName,\n sublabelWrapperClassName: sublabelWrapperClassName,\n sublabel: bigform ? undefined : label.props.sublabel,\n statusDot: bigform ? undefined : label.props.statusDot,\n })\n : typeof label === 'string' && (\n <Label\n labelTexts={[{ text: label }]}\n htmlFor={inputId}\n mode={mode}\n disabled={disabled}\n labelClassName={labelClassName}\n labelTextClassName={labelTextClassName}\n sublabelWrapperClassName={sublabelWrapperClassName}\n >\n {children}\n </Label>\n )}\n </>\n );\n};\n\nconst Label: FunctionComponent<LabelProps> = ({\n afterLabelChildren,\n children,\n className,\n disabled,\n htmlFor,\n labelClassName,\n labelTextClassName,\n labelId,\n labelTexts,\n mode = FormMode.onwhite,\n statusDot,\n sublabel,\n sublabelWrapperClassName,\n testId,\n}) => {\n const hasChildren = children && typeof children !== 'undefined';\n const labelWrapperClasses = cn(\n styles['label-wrapper'],\n { [styles['label-wrapper--no-bottom-margin']]: hasChildren, [styles['label-wrapper--after-label-children']]: afterLabelChildren },\n className\n );\n\n const mapLabels = (): React.ReactNode => {\n return labelTexts.map((labelText, index) => {\n const labelClasses = cn(\n styles.label,\n {\n [styles['label--semibold']]: labelText.type === 'semibold',\n [styles['label--on-dark']]: mode === FormMode.ondark,\n [styles['label--disabled']]: disabled,\n },\n labelTextClassName\n );\n return (\n <span aria-hidden={labelText.hideFromScreenReader} className={labelClasses} key={index}>\n {labelText.text}\n </span>\n );\n });\n };\n\n return (\n <div className={labelWrapperClasses}>\n <div className={styles['label-wrapper__inner']}>\n <label className={labelClassName} id={labelId} htmlFor={htmlFor} data-testid={testId} data-analyticsid={AnalyticsId.Label}>\n <span className={styles['label-content-wrapper']}>\n {children}\n <span>{mapLabels()}</span>\n </span>\n </label>\n <div className={sublabelWrapperClassName}>\n {sublabel &&\n isComponent<SublabelProps>(sublabel, Sublabel) &&\n React.cloneElement(sublabel, {\n mode: mode as FormMode,\n })}\n {statusDot && isComponent<StatusDotProps>(statusDot, StatusDot) && (\n <>\n <Spacer size={'3xs'} />\n {React.cloneElement(statusDot, {\n mode: mode === FormMode.ondark ? 'ondark' : 'onwhite',\n })}\n </>\n )}\n </div>\n </div>\n {afterLabelChildren && <div className={styles['after-label-children']}>{afterLabelChildren}</div>}\n </div>\n );\n};\n\nexport default Label;\n"],"names":["Sublabel","className","id","mode","sublabelTexts","testId","mapSublabels","hideFromScreenReader","sublabelText","index","labelClasses","cn","styles","FormMode","React","subLabels","ariaHiddenSublabels","Spacer","AnalyticsId","getLabelText","label","allLabelText","isComponent","Label","labelText","renderLabel","inputId","disabled","renderLabelAsParent","children","labelClassName","labelTextClassName","sublabelWrapperClassName","bigform","afterLabelChildren","htmlFor","labelId","labelTexts","statusDot","sublabel","hasChildren","labelWrapperClasses","mapLabels","StatusDot","Label$1"],"mappings":"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"}
package/RadioButton.js CHANGED
@@ -1,2 +1,2 @@
1
- import b,{useState as G}from"react";import s from"classnames";import{FormMode as e,FormVariant as M,AnalyticsId as O}from"./constants.js";import{usePseudoClasses as V}from"./hooks/usePseudoClasses.js";import{a as W}from"./uuid.js";import{g as $,r as z}from"./Label.js";import o from"./components/RadioButton/styles.module.scss";const w=b.forwardRef((p,h)=>{const{className:C,defaultChecked:_=!1,onChange:g,disabled:t,label:y,inputId:l=W(),mode:a=e.onwhite,name:B=l,variant:k,errorText:n,error:R=!!n,value:N=$(y),testId:L,required:x,...E}=p,u=R||a===e.oninvalid,v=a===e.ondark,m=a===e.onblueberry,F=a===e.ongrey,c=a===e.oninvalid,r=k===M.bigform,[i,I]=G(_),{refObject:S,isFocused:d}=V(h),A=s(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&&c&&d,[o["radio-button-wrapper__bigform--on-blueberry"]]:r&&m&&d}),P=s(o["radio-button-label"],{[o["radio-button-label--disabled"]]:t,[o["radio-button-label--on-dark"]]:v,[o["radio-button-label--invalid"]]:u,[o["radio-button-label__bigform"]]:r,[o["radio-button-label__bigform--on-grey"]]:r&&F&&!i,[o["radio-button-label__bigform--on-blueberry"]]:m&&!i&&r,[o["radio-button-label__bigform--selected"]]:r&&i&&!c,[o["radio-button-label__bigform--disabled"]]:r&&t,[o["radio-button-label__bigform--selected-invalid"]]:r&&i&&c}),T=s(o["radio-button"],{[o["radio-button--on-dark"]]:v,[o["radio-button--disabled"]]:t,[o["radio-button--on-blueberry"]]:m,[o["radio-button--invalid"]]:u,[o["radio-button__bigform"]]:r,[o["radio-button__bigform--disabled"]]:r&&t,[o["radio-button__bigform--invalid"]]:r&&u},C),j=s(o["radio-button-errors"]),q=f=>{I(!0),g&&g(f)},D=()=>b.createElement("input",{id:l,name:B,className:T,type:"radio",disabled:t,value:N,ref:S,defaultChecked:_,"aria-describedby":p["aria-describedby"]??void 0,required:x,...E,onChange:f=>q(f)});return b.createElement("div",{"data-testid":L,"data-analyticsid":O.RadioButton,className:A},n&&b.createElement("p",{className:j},n),z(y,D(),l,a,t,P,void 0,o["radiobutton-sublabel-wrapper"],r))});w.displayName="RadioButton";const Z=w;export{Z as R,w as a};
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
@@ -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 as React.RefObject<HTMLInputElement>);\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(true);\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={refObject}\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","radioButtonWrapperClasses","classNames","radioButtonStyles","radioButtonLabelClasses","radioButtonClasses","errorStyles","change","e","getLabelContent","AnalyticsId","renderLabelAsParent","RadioButton$1"],"mappings":"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"}
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;AAU/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,wFA+HnB,CAAC;AAIH,eAAe,QAAQ,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 F}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"../../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{F as Checkbox,r as default};
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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"}