npm - @helsenorge/designsystem-react - Versions diffs - 13.0.0-beta.4 → 13.0.0-workspaces-beta.0 - Mend

@helsenorge/designsystem-react 13.0.0-beta.4 → 13.0.0-workspaces-beta.0

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.

Files changed (2225) hide show

package/Checkbox.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/FormFieldTag.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"FormFieldTag.js","names":["FormFieldTag: React.FC<FormFieldTagProps>","mergedResources: HNDesignsystemFormFieldTag"],"sources":["../src/resources/HN.Designsystem.FormFieldTag.nb-NO.json","../src/components/FormFieldTag/resourceHelper.ts","../src/components/FormFieldTag/FormFieldTag.tsx","../src/components/FormFieldTag/index.ts"],"sourcesContent":["{\n \"allRequired\": \"Alle felt må fylles ut\",\n \"requiredField\": \"Må fylles ut\",\n \"optional\": \"Valgfritt\",\n \"allOptional\": \"Alle felt er valgfrie\",\n \"requiredRadiobuttonList\": \"Velg én\",\n \"requiredCheckboxList\": \"Velg en eller flere\",\n \"requiredSingleCheckbox\": \"Må velges\"\n}\n","import { LanguageLocales } from '../../constants';\nimport nbNO from '../../resources/HN.Designsystem.FormFieldTag.nb-NO.json';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemFormFieldTag => {\n switch (language) {\n case LanguageLocales.NORWEGIAN:\n default:\n return nbNO;\n }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { getResources } from './resourceHelper';\nimport { AnalyticsId, LanguageLocales } from '../../constants';\nimport { HNDesignsystemFormFieldTag } from '../../resources/Resources';\nimport { useLanguage } from '../../utils/language';\n\nimport styles from './styles.module.scss';\n\nexport type FormFieldTagLevel =\n | 'all-required'\n | 'required-field'\n | 'optional'\n | 'all-optional'\n | 'required-radiobutton-list'\n | 'required-checkbox-list'\n | 'required-single-checkbox';\n\nexport interface FormFieldTagProps {\n /** Id that is placed on the component */\n id?: string;\n /** What level is the required tag, sets the styling and the text. */\n level: FormFieldTagLevel;\n /** Texts if overriding SOT */\n resources?: HNDesignsystemFormFieldTag;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nconst FormFieldTag: React.FC<FormFieldTagProps> = props => {\n const { id, level, resources, testId } = props;\n const isOptional = level === 'optional' || level === 'all-optional';\n\n const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n const defaultResources = getResources(language);\n\n const mergedResources: HNDesignsystemFormFieldTag = {\n ...defaultResources,\n ...resources,\n };\n\n const textMap = {\n 'all-required': mergedResources.allRequired,\n 'required-field': mergedResources.requiredField,\n optional: mergedResources.optional,\n 'all-optional': mergedResources.allOptional,\n 'required-radiobutton-list': mergedResources.requiredRadiobuttonList,\n 'required-checkbox-list': mergedResources.requiredCheckboxList,\n 'required-single-checkbox': mergedResources.requiredSingleCheckbox,\n };\n\n return (\n <span\n id={id}\n data-testid={testId}\n data-analyticsid={AnalyticsId.FormFieldTag}\n className={classNames(styles['form-field-tag'], { [styles['form-field-tag--optional']]: isOptional })}\n >\n {textMap[level]}\n </span>\n );\n};\n\nexport default FormFieldTag;\n","import FormFieldTag from './FormFieldTag';\nexport * from './FormFieldTag';\nexport default FormFieldTag;\n"],"mappings":";;;;;;;;;;;;;;;ACIA,MAAa,gBAAgB,aAA0D;AACrF,SAAQ,UAAR;EACE,KAAK,gBAAgB;EACrB,QACE,QAAO;;;ACuBb,IAAMA,gBAA4C,UAAS;CACzD,MAAM,EAAE,IAAI,OAAO,WAAW,WAAW;CACzC,MAAM,aAAa,UAAU,cAAc,UAAU;CAErD,MAAM,EAAE,aAAa,YAA6B,gBAAgB,UAAU;CAG5E,MAAMC,kBAA8C;EAClD,GAHuB,aAAa,SAAS;EAI7C,GAAG;EACJ;CAED,MAAM,UAAU;EACd,gBAAgB,gBAAgB;EAChC,kBAAkB,gBAAgB;EAClC,UAAU,gBAAgB;EAC1B,gBAAgB,gBAAgB;EAChC,6BAA6B,gBAAgB;EAC7C,0BAA0B,gBAAgB;EAC1C,4BAA4B,gBAAgB;EAC7C;AAED,QACE,oBAAC,QAAA;EACK;EACJ,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW,GAAW,OAAO,mBAAmB,GAAG,OAAO,8BAA8B,YAAY,CAAC;YAEpG,QAAQ;GACJ;;AC3DX,IAAA,yBD+De"}

package/FormGroup.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"FormGroup.js","names":[],"sources":["../src/components/FormGroup/FormGroup.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { isComponent } from '../../utils/component';\nimport Checkbox, { CheckboxProps } from '../Checkbox/Checkbox';\nimport ErrorWrapper from '../ErrorWrapper';\nimport FormFieldTag, { FormFieldTagProps } from '../FormFieldTag';\nimport FormLayout, { FormLayoutProps } from '../FormLayout';\nimport Input, { InputProps } from '../Input/Input';\nimport RadioButton, { RadioButtonProps, getRadioLabelClasses } from '../RadioButton/RadioButton';\nimport Select, { SelectProps } from '../Select';\nimport Slider, { SliderProps } from '../Slider';\nimport Textarea, { TextareaProps } from '../Textarea';\nimport Title from '../Title';\n\nimport formGroupStyles from './styles.module.scss';\n\nexport type FormGroupTags = 'fieldset' | 'div';\n\nexport interface FormGroupProps {\n /** Can be used as a replacement text for legend in cases where the group title already exists externally */\n ariaLabelledBy?: string;\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 /** Sets a tag that describes whether the form group is required or optional */\n formFieldTag?: React.ReactNode;\n /** Adds custom classes to the legend element. */\n legendClassName?: string;\n /** Changes the visuals of the formgroup */\n onColor?: keyof typeof FormOnColor;\n /** Changes the visuals of the formgroup */\n size?: keyof typeof FormSize;\n /** Error message */\n error?: string;\n /** Error text id */\n errorTextId?: 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 name for the child input element */\n name?: string;\n /** Unique name for the fieldset */\n fieldsetName?: 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 ariaLabelledBy,\n className,\n fieldsetClassName,\n formFieldTag,\n legendClassName,\n onColor = FormOnColor.onwhite,\n size = FormSize.medium,\n error,\n name,\n htmlMarkup = 'fieldset',\n renderError = true,\n errorWrapperClassName,\n errorWrapperTestId,\n } = props;\n const [checkedRadioId, setCheckedRadioId] = useState<string>();\n const radioGroupId = useId();\n const errorTextId = useIdWithFallback(props.errorTextId);\n const onDark = onColor === FormOnColor.ondark;\n const isLarge = size === FormSize.large;\n const formGroupWrapperClasses = classNames(formGroupStyles['form-group-wrapper'], className);\n const titleClasses = classNames({\n [formGroupStyles['form-group-wrapper__title--on-dark']]: onDark && !error,\n });\n\n const legendClasses = classNames(\n formGroupStyles['field-set__legend'],\n {\n [formGroupStyles['field-set__legend--on-dark']]: onDark && !error,\n },\n legendClassName\n );\n\n const fieldsetClasses = classNames(formGroupStyles['field-set'], fieldsetClassName);\n\n const mapFormComponent = (child: React.ReactNode, index: number): React.ReactNode => {\n if (isComponent<FormLayoutProps>(child, FormLayout)) {\n return React.cloneElement(child, {\n size,\n mapHelper: mapFormComponent,\n });\n } else if (isComponent<FormGroupProps>(child, FormGroup)) {\n return React.cloneElement(child, {\n onColor,\n size,\n error,\n renderError: false,\n errorTextId: errorTextId,\n });\n } else if (isComponent<CheckboxProps>(child, Checkbox)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<RadioButtonProps>(child, RadioButton)) {\n const radioId = typeof child.props.inputId === 'undefined' ? radioGroupId + index : child.props.inputId;\n return React.cloneElement(child, {\n inputId: radioId,\n name: name ?? child.props.name,\n onColor,\n size,\n onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n setCheckedRadioId(event.target.id);\n if (child.props.onChange) child.props.onChange(event);\n },\n error: !!error,\n errorTextId: errorTextId,\n labelClassNames: getRadioLabelClasses(radioId, onColor as FormOnColor, isLarge, checkedRadioId),\n });\n } else if (isComponent<InputProps>(child, Input)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n size,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<TextareaProps>(child, Textarea)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SelectProps>(child, Select)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n onColor,\n error: !!error,\n errorTextId: errorTextId,\n });\n } else if (isComponent<SliderProps>(child, Slider)) {\n return React.cloneElement(child, {\n name: name ?? child.props.name,\n error: !!error,\n errorTextId: errorTextId,\n });\n }\n return child;\n };\n\n const formGroupContent = (): React.ReactNode => {\n return (\n <div>\n {htmlMarkup === 'div' && (\n <div className={fieldsetClasses}>\n {props.legend && (\n <>\n <h5 className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </h5>\n </>\n )}\n {React.Children.map(props.children, mapFormComponent)}\n </div>\n )}\n {htmlMarkup === 'fieldset' && (\n <fieldset aria-labelledby={ariaLabelledBy} name={props.fieldsetName} className={fieldsetClasses}>\n {props.legend && (\n <>\n <legend className={legendClasses}>\n {props.legend}\n {formFieldTag && isComponent<FormFieldTagProps>(formFieldTag, FormFieldTag) && React.cloneElement(formFieldTag)}\n </legend>\n </>\n )}\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}>\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 <ErrorWrapper\n className={errorWrapperClassName}\n errorText={error}\n testId={errorWrapperTestId}\n errorTextId={errorTextId}\n errorMessageRef={ref}\n renderError={renderError}\n >\n {formGroupContent()}\n </ErrorWrapper>\n </div>\n );\n});\n\nFormGroup.displayName = 'FormGroup';\n\nexport default FormGroup;\n"],"mappings":"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"}

package/Input.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Input.js","names":[],"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormOnColor, FormSize, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport { renderLabel } from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n extends ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'disabled'\n | 'readOnly'\n | 'autoComplete'\n | 'name'\n | 'placeholder'\n | 'defaultValue'\n | 'required'\n | 'value'\n | 'min'\n | 'max'\n | 'aria-describedby'\n | 'aria-labelledby'\n | 'onBlur'\n | 'onClick'\n | 'onChange'\n | 'onFocus'\n | 'onKeyDown'\n | 'autoFocus'\n | 'inputMode'\n > {\n /** The number at which the input field starts when you increment or decrement it */\n baseIncrementValue?: number;\n /** Adds custom classes to the element. */\n className?: string;\n /** HMTL Input type */\n type?: keyof typeof InputTypes;\n /** input id */\n inputId?: string;\n /** Width of input field in characters (approximate) */\n width?: number;\n /** If true, the component will be transparent. */\n transparent?: boolean;\n /** Icon to be displayed next to the input field */\n icon?: SvgIcon | IconName;\n /** Places the icon to the right */\n iconRight?: boolean;\n /** Ref that is placed on the inputContainerRef */\n inputContainerRef?: React.RefObject<HTMLDivElement>;\n /** Ref that is placed on the inputWrapper */\n inputWrapperRef?: React.RefObject<HTMLDivElement>;\n /** Changes the color profile of the input */\n onColor?: keyof typeof FormOnColor;\n /** Changes the visuals of the input */\n size?: keyof typeof FormSize;\n /** Label of the input */\n label?: React.ReactNode;\n /** Activates Error style for the input */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Component shown after input */\n afterInputChildren?: React.ReactNode;\n /** Component shown to the right of input */\n rightOfInput?: React.ReactNode;\n /** max character limit in input */\n maxCharacters?: number;\n /** The text is displayed in the end of the text-counter */\n maxText?: string;\n}\n\nexport enum InputTypes {\n text = 'text',\n number = 'number',\n email = 'email',\n password = 'password',\n search = 'search',\n tel = 'tel',\n url = 'url',\n date = 'date',\n time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n const borderWidth = '4px';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultValue,\n placeholder,\n type = InputTypes.text,\n name,\n transparent = false,\n icon,\n iconRight,\n inputWrapperRef,\n onColor = FormOnColor.onwhite,\n size,\n baseIncrementValue,\n label,\n error,\n errorText,\n errorWrapperClassName,\n testId,\n disabled,\n readOnly,\n autoComplete = 'off',\n afterInputChildren,\n rightOfInput,\n width,\n required,\n onChange,\n onKeyDown,\n autoFocus,\n maxCharacters,\n maxText,\n inputContainerRef,\n ...rest\n } = props;\n const breakpoint = useBreakpoint();\n const inputContainerRefLocal = useRef<HTMLDivElement>(null);\n const inputId = useIdWithFallback(props.inputId);\n const [input, setInput] = useState(defaultValue || '');\n const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n const numKeyPressed = useRef<boolean>(false);\n const errorTextId = useIdWithFallback(props.errorTextId);\n const numRegex = /^[0-9]$/;\n\n useEffect(() => {\n setInput(defaultValue || '');\n }, [defaultValue]);\n\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n const isLarge = size === FormSize.large;\n const isTransparent = transparent && onColor !== FormOnColor.ondark && !onError;\n\n const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n const inputContainer = cn(styles['input-container'], {\n [styles['input-container--transparent']]: isTransparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--large']]: isLarge,\n [styles['input-container--disabled']]: disabled,\n [styles['input-container--with-icon']]: icon,\n [styles['input-container--with-icon--right']]: icon && iconRight,\n });\n\n const inputClass = cn(styles['input-container__input'], {\n [styles['input-container__input--large']]: isLarge,\n [styles['input-container__input--disabled']]: disabled,\n });\n\n const iconColor = disabled ? getColor('neutral', 700) : getColor('black');\n const iconSize = breakpoint === Breakpoint.xs || !isLarge ? IconSize.XSmall : IconSize.Small;\n\n const renderIcon = (): React.ReactNode => {\n if (!icon) {\n return;\n }\n\n if (typeof icon === 'string') {\n return <LazyIcon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} iconName={icon} />;\n }\n\n return <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />;\n };\n\n // eslint-disable-next-line\n const handleClick = (e: React.MouseEvent<any>): void => {\n if (inputContainerRefLocal && inputContainerRefLocal.current && icon) {\n const selectedChild = iconRight ? 0 : 1;\n const input = inputContainerRefLocal.current.children[selectedChild] as HTMLInputElement;\n input.focus();\n\n if (props.onClick) props.onClick(e);\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n const newValue = getIncrementValue(e);\n\n if (onChange) {\n onChange(e);\n }\n\n setInput(newValue);\n setPrevValue(newValue);\n };\n\n // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n const valueAsNumber = Number(e.target.value);\n\n if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n e.target.value = baseIncrementValue + '';\n }\n\n return e.target.value;\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = true;\n }\n if (onKeyDown) onKeyDown(e);\n };\n\n const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n if (numRegex.test(e.key)) {\n numKeyPressed.current = false;\n }\n };\n\n const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n {renderLabel(label, inputId, onColor as FormOnColor)}\n {/* input-elementet tillater keyboard-interaksjon */}\n <div className={styles['content-wrapper']}>\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n onClick={handleClick}\n ref={mergeRefs([inputContainerRefLocal, inputContainerRef])}\n className={inputContainer}\n style={{ maxWidth }}\n >\n {!iconRight && renderIcon()}\n <input\n {...rest}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n onKeyUp={handleKeyUp}\n name={name}\n type={type}\n defaultValue={defaultValue}\n id={inputId}\n className={inputClass}\n ref={ref}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n aria-invalid={!!onError}\n disabled={disabled}\n placeholder={placeholder}\n readOnly={readOnly}\n autoComplete={autoComplete || 'off'}\n required={required}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n />\n {iconRight && renderIcon()}\n </div>\n <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n </div>\n {maxCharacters && (\n <MaxCharacters\n maxCharacters={maxCharacters}\n length={input.toString().length}\n maxText={maxText}\n onColor={onColor}\n maxWidth={maxWidth}\n />\n )}\n {afterInputChildren}\n </div>\n </ErrorWrapper>\n );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/RadioButton.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"RadioButton.js","names":[],"sources":["../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, FormOnColor, FormSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { getLabelText, renderLabelAsParent } from '../Label';\n\nimport radioButtonStyles from './styles.module.scss';\n\nexport interface RadioButtonProps\n extends ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'aria-describedby' | 'name' | 'value' | 'disabled' | 'checked' | '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 large variant */\n label: React.ReactNode;\n /** Adds custom classes to the label element. */\n labelClassNames?: string;\n /** input id of the radioButton */\n inputId?: string;\n /** Changes the visuals of the radioButton */\n onColor?: keyof typeof FormOnColor;\n /** Changes the visuals of the radioButton. Large version only works when used inside a FormGroup wrapper. */\n size?: keyof typeof FormSize;\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 /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\nexport const getRadioLabelClasses = (\n radioId: string,\n onColor: FormOnColor,\n large: boolean,\n checkedRadioId?: string\n): string | undefined => {\n const onCherry = onColor === 'oninvalid';\n const checked = radioId === checkedRadioId;\n\n return classNames({\n [radioButtonStyles['radio-button-label__large--on-grey']]: large && onColor === 'ongrey' && !checked,\n [radioButtonStyles['radio-button-label__large--on-blueberry']]: onColor === 'onblueberry' && !checked && large,\n [radioButtonStyles['radio-button-label__large--selected']]: large && checked && !onCherry,\n [radioButtonStyles['radio-button-label__large--selected-invalid']]: large && checked && onCherry,\n });\n};\n\nexport const RadioButton = React.forwardRef((props: RadioButtonProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n className,\n defaultChecked,\n onChange,\n disabled,\n label,\n inputId = uuid(),\n onColor = FormOnColor.onwhite,\n name = inputId,\n size,\n errorText,\n error = !!errorText,\n errorWrapperClassName,\n value = getLabelText(label),\n testId,\n required,\n labelClassNames,\n ...rest\n } = props;\n const invalid = error || onColor === FormOnColor.oninvalid;\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const onCherry = onColor === FormOnColor.oninvalid;\n const isLarge = size === FormSize.large;\n const [checked, changeChecked] = useState<boolean>();\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n const errorTextId = useIdWithFallback(props.errorTextId);\n\n const radioButtonWrapperClasses = classNames(radioButtonStyles['radio-button-wrapper'], {\n [radioButtonStyles['radio-button-wrapper__large']]: isLarge,\n [radioButtonStyles['radio-button-wrapper__large--focused']]: isLarge && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--selected']]: isLarge && checked && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--invalid']]: isLarge && onCherry && isFocused,\n [radioButtonStyles['radio-button-wrapper__large--on-blueberry']]: isLarge && onBlueberry && isFocused,\n });\n const radioButtonLabelClasses = classNames(\n radioButtonStyles['radio-button-label'],\n {\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__large']]: isLarge,\n [radioButtonStyles['radio-button-label__large--focused']]: isFocused && isLarge,\n [radioButtonStyles['radio-button-label__large--disabled']]: isLarge && disabled,\n },\n labelClassNames\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__large']]: isLarge,\n [radioButtonStyles['radio-button__large--disabled']]: isLarge && disabled,\n [radioButtonStyles['radio-button__large--invalid']]: isLarge && invalid,\n },\n className\n );\n\n const change = (e: React.ChangeEvent<HTMLInputElement>): void => {\n changeChecked(e.target.checked);\n if (onChange) onChange(e);\n };\n\n const getLabelContent = (): React.ReactNode => (\n <input\n {...rest}\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={getAriaDescribedBy(props, errorTextId)}\n required={required}\n onChange={(e): void => change(e)}\n />\n );\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.RadioButton} className={radioButtonWrapperClasses}>\n {renderLabelAsParent(\n label,\n getLabelContent(),\n inputId,\n onColor as FormOnColor,\n radioButtonLabelClasses,\n undefined,\n radioButtonStyles['radiobutton-sublabel-wrapper'],\n isLarge\n )}\n </div>\n </ErrorWrapper>\n );\n});\n\nRadioButton.displayName = 'RadioButton';\n\nexport default RadioButton;\n"],"mappings":";;;;;;;;;;;;AA2CA,MAAa,wBACX,SACA,SACA,OACA,mBACuB;CACvB,MAAM,WAAW,YAAY;CAC7B,MAAM,UAAU,YAAY;AAE5B,QAAO,GAAW;GACf,kBAAkB,wCAAwC,SAAS,YAAY,YAAY,CAAC;GAC5F,kBAAkB,6CAA6C,YAAY,iBAAiB,CAAC,WAAW;GACxG,kBAAkB,yCAAyC,SAAS,WAAW,CAAC;GAChF,kBAAkB,iDAAiD,SAAS,WAAW;EACzF,CAAC;;AAGJ,MAAa,cAAc,MAAM,YAAY,OAAyB,QAAqC;CACzG,MAAM,EACJ,WACA,gBACA,UACA,UACA,OACA,UAAU,MAAM,EAChB,UAAU,YAAY,SACtB,OAAO,SACP,MACA,WACA,QAAQ,CAAC,CAAC,WACV,uBACA,QAAQ,aAAa,MAAM,EAC3B,QACA,UACA,gBACA,GAAG,SACD;CACJ,MAAM,UAAU,SAAS,YAAY,YAAY;CACjD,MAAM,SAAS,YAAY,YAAY;CACvC,MAAM,cAAc,YAAY,YAAY;CAC5C,MAAM,WAAW,YAAY,YAAY;CACzC,MAAM,UAAU,SAAS,SAAS;CAClC,MAAM,CAAC,SAAS,iBAAiB,UAAmB;CACpD,MAAM,EAAE,WAAW,cAAc,iBAAmC,mBAAmB,IAAI,GAAG,MAAM,KAAK;CACzG,MAAM,aAAa,UAAU,CAAC,KAAK,UAAU,CAAC;CAC9C,MAAM,cAAc,kBAAkB,MAAM,YAAY;CAExD,MAAM,4BAA4B,GAAW,kBAAkB,yBAAyB;GACrF,kBAAkB,iCAAiC;GACnD,kBAAkB,0CAA0C,WAAW;GACvE,kBAAkB,2CAA2C,WAAW,WAAW;GACnF,kBAAkB,0CAA0C,WAAW,YAAY;GACnF,kBAAkB,+CAA+C,WAAW,eAAe;EAC7F,CAAC;CACF,MAAM,0BAA0B,GAC9B,kBAAkB,uBAClB;GACG,kBAAkB,kCAAkC;GACpD,kBAAkB,iCAAiC;GACnD,kBAAkB,iCAAiC;GACnD,kBAAkB,+BAA+B;GACjD,kBAAkB,wCAAwC,aAAa;GACvE,kBAAkB,yCAAyC,WAAW;EACxE,EACD,gBACD;CACD,MAAM,qBAAqB,GACzB,kBAAkB,iBAClB;GACG,kBAAkB,2BAA2B;GAC7C,kBAAkB,4BAA4B;GAC9C,kBAAkB,gCAAgC;GAClD,kBAAkB,2BAA2B;GAC7C,kBAAkB,yBAAyB;GAC3C,kBAAkB,mCAAmC,WAAW;GAChE,kBAAkB,kCAAkC,WAAW;EACjE,EACD,UACD;CAED,MAAM,UAAU,MAAiD;AAC/D,gBAAc,EAAE,OAAO,QAAQ;AAC/B,MAAI,SAAU,UAAS,EAAE;;CAG3B,MAAM,wBACJ,oBAAC,SAAA;EACC,GAAI;EACJ,IAAI;EACE;EACN,WAAW;EACX,MAAK;EACK;EACH;EACP,KAAK;EACW;EAChB,oBAAkB,mBAAmB,OAAO,YAAY;EAC9C;EACV,WAAW,MAAY,OAAO,EAAE;GAChC;AAGJ,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,oBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAa,WAAW;aAC7E,oBACC,OACA,iBAAiB,EACjB,SACA,SACA,yBACA,KAAA,GACA,kBAAkB,iCAClB,QACD;IACG;GACO;EAEjB;AAEF,YAAY,cAAc;AAE1B,IAAA,sBAAe"}

package/Select.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Select.js","names":[],"sources":["../src/components/Select/Select.tsx","../src/components/Select/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getColor } from '../../theme/currys';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport { renderLabel } from '../Label';\n\nimport selectStyles from './styles.module.scss';\n\ntype SelectConcept = 'normal' | 'transparent';\n\nexport interface SelectProps\n extends ErrorWrapperClassNameProps,\n Pick<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n 'aria-describedby' | 'name' | 'disabled' | 'required' | 'value' | 'onChange' | 'autoComplete'\n > {\n /** Sets the content of the select element. */\n children: React.ReactNode;\n /** Adds custom classes to the element. */\n className?: string;\n /** Changes the visuals of the component */\n concept?: SelectConcept;\n /** The label text above the select */\n label?: React.ReactNode;\n /** Changes the visuals of the component */\n onColor?: keyof typeof FormOnColor;\n /** Activates Error style for the select component - This is can be true while errorText is empty, when in a FormGroup */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** select id of the select element */\n selectId?: string;\n /** Width of select in characters (approximate) */\n width?: number;\n /** Gives defaultvalue to the comp. Preferred over selected prop on option by react */\n defaultValue?: string | number;\n /** Adds custom classes to the wrapper tag */\n wrapperClassName?: string;\n}\n\nconst getSelectMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth})`;\n};\n\nconst getIconColor = (invalid: boolean, disabled: boolean): string => {\n const iconColor = invalid ? 'cherry' : 'blueberry';\n return disabled ? getColor('neutral', 500) : getColor(iconColor, 600);\n};\n\nexport const Select = React.forwardRef(function SelectForwardedRef(props: SelectProps, ref: React.Ref<HTMLSelectElement>) {\n const {\n className,\n children,\n concept = 'normal',\n disabled,\n error,\n errorText,\n errorWrapperClassName,\n label,\n name = props.selectId,\n onColor = FormOnColor.onwhite,\n testId,\n width,\n required,\n value,\n defaultValue,\n autoComplete = 'off',\n wrapperClassName,\n ...rest\n } = props;\n\n const selectId = useIdWithFallback(props.selectId);\n const errorTextId = useIdWithFallback(props.errorTextId);\n const onBlueberry = onColor === 'onblueberry';\n const invalid = onColor === 'oninvalid' || !!errorText || !!error;\n const iconColor = getIconColor(invalid, !!disabled);\n const maxWidth = width ? getSelectMaxWidth(width) : undefined;\n\n const selectInnerWrapperClasses = classNames(\n selectStyles['select-inner-wrapper'],\n {\n [selectStyles['select-inner-wrapper--transparent']]: concept === 'transparent',\n [selectStyles['select-inner-wrapper--on-blueberry']]: onBlueberry,\n [selectStyles['select-inner-wrapper--invalid']]: invalid,\n [selectStyles['select-inner-wrapper--disabled']]: disabled,\n },\n className\n );\n\n const selectClasses = classNames(selectStyles.select, {\n [selectStyles['select--on-blueberry']]: onBlueberry,\n [selectStyles['select--invalid']]: invalid,\n });\n\n const selectWrapperClasses = classNames(selectStyles['select-wrapper'], wrapperClassName);\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Select} className={selectWrapperClasses} style={{ maxWidth }}>\n {renderLabel(label, selectId, onColor as FormOnColor)}\n <div className={selectInnerWrapperClasses} data-testid={testId + '-inner-wrapper'}>\n <Icon\n className={selectStyles['select-arrow']}\n svgIcon={ChevronDown}\n color={iconColor}\n size={IconSize.XSmall}\n testId={testId + '-icon'}\n />\n <select\n {...rest}\n aria-invalid={!!invalid}\n id={selectId}\n name={name}\n className={selectClasses}\n disabled={disabled}\n ref={ref}\n required={required}\n aria-describedby={getAriaDescribedBy(props, errorTextId)}\n aria-required={!!required}\n value={value}\n defaultValue={defaultValue}\n autoComplete={autoComplete ? autoComplete : undefined}\n >\n {children}\n </select>\n </div>\n </div>\n </ErrorWrapper>\n );\n});\n\nexport default Select;\n","import Select from './Select';\nexport * from './Select';\nexport default Select;\n"],"mappings":";;;;;;;;;;;;AAmDA,IAAM,qBAAqB,eAA+B;AAGxD,QAAO,QAAQ,aAAA,GAAwC;;AAGzD,IAAM,gBAAgB,SAAkB,aAA8B;AAEpE,QAAO,WAAW,SAAS,WAAW,IAAI,GAAG,SAD3B,UAAU,WAAW,aAC0B,IAAI;;AAGvE,MAAa,SAAS,MAAM,WAAW,SAAS,mBAAmB,OAAoB,KAAmC;CACxH,MAAM,EACJ,WACA,UACA,UAAU,UACV,UACA,OACA,WACA,uBACA,OACA,OAAO,MAAM,UACb,UAAU,YAAY,SACtB,QACA,OACA,UACA,OACA,cACA,eAAe,OACf,iBACA,GAAG,SACD;CAEJ,MAAM,WAAW,kBAAkB,MAAM,SAAS;CAClD,MAAM,cAAc,kBAAkB,MAAM,YAAY;CACxD,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,YAAY,eAAe,CAAC,CAAC,aAAa,CAAC,CAAC;CAC5D,MAAM,YAAY,aAAa,SAAS,CAAC,CAAC,SAAS;CACnD,MAAM,WAAW,QAAQ,kBAAkB,MAAM,GAAG,KAAA;CAEpD,MAAM,4BAA4B,GAChC,aAAa,yBACb;GACG,aAAa,uCAAuC,YAAY;GAChE,aAAa,wCAAwC;GACrD,aAAa,mCAAmC;GAChD,aAAa,oCAAoC;EACnD,EACD,UACD;CAED,MAAM,gBAAgB,GAAW,aAAa,QAAQ;GACnD,aAAa,0BAA0B;GACvC,aAAa,qBAAqB;EACpC,CAAC;CAEF,MAAM,uBAAuB,GAAW,aAAa,mBAAmB,iBAAiB;AAEzF,QACE,oBAAC,sBAAA;EAAa,WAAW;EAAkC;EAAwB;YACjF,qBAAC,OAAA;GAAI,eAAa;GAAQ,oBAAkB,YAAY;GAAQ,WAAW;GAAsB,OAAO,EAAE,UAAU;cACjH,YAAY,OAAO,UAAU,QAAuB,EACrD,qBAAC,OAAA;IAAI,WAAW;IAA2B,eAAa,SAAS;eAC/D,oBAAC,cAAA;KACC,WAAW,aAAa;KACxB,SAAS;KACT,OAAO;KACP,MAAM,SAAS;KACf,QAAQ,SAAS;MACjB,EACF,oBAAC,UAAA;KACC,GAAI;KACJ,gBAAc,CAAC,CAAC;KAChB,IAAI;KACE;KACN,WAAW;KACD;KACL;KACK;KACV,oBAAkB,mBAAmB,OAAO,YAAY;KACxD,iBAAe,CAAC,CAAC;KACV;KACO;KACd,cAAc,eAAe,eAAe,KAAA;KAE3C;MACM,CAAA;KACL,CAAA;IACF;GACO;EAEjB;AC5IF,IAAA,mBD8Ie"}

package/Slider.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Slider.js","names":["handleKeyDown: React.KeyboardEventHandler<HTMLDivElement>","handleTrackClick: React.MouseEventHandler<HTMLDivElement>","handlePointerDown: React.PointerEventHandler<HTMLDivElement>"],"sources":["../src/components/Slider/Slider.tsx","../src/components/Slider/index.ts"],"sourcesContent":["import React, { useEffect, useState, useRef, useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { useSize } from '../../hooks/useSize';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport { isMutableRefObject, mergeRefs } from '../../utils/refs';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport Title from '../Title';\n\nimport styles from './styles.module.scss';\n\nconst useSafeNumberValue = (initial: number, min: number, max: number): [number, (value: number) => void] => {\n const [value, setValue] = useState(initial);\n\n const setSafeValue = (newValue: number): void => {\n if (newValue > max) {\n setValue(max);\n } else if (newValue < min) {\n setValue(min);\n } else {\n setValue(newValue);\n }\n };\n\n useEffect(() => {\n setSafeValue(initial);\n }, [min, max]);\n\n return [value, setSafeValue];\n};\n\nexport type SliderStep = {\n label?: number | string;\n emojiUniCode?: string;\n};\n\nexport interface SliderProps\n extends ErrorWrapperClassNameProps,\n Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'onChange' | 'onBlur'> {\n /** Activates Error style for the input */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n /**\tSets the title of the slider. */\n title?: string;\n /** Adds the left hand label to the element. */\n labelLeft?: string;\n /** Adds the right hand label to the element. */\n labelRight?: string;\n /**\tSets aria-label of the slider. */\n ariaLabel?: string;\n /** Disables the slider element. */\n disabled?: boolean;\n /** Sets the minimum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n minValue?: number;\n /** Sets the maximum allowed value on the slider - this overrides the use of steps prop for minValue/maxValue. */\n maxValue?: number;\n /** If set to false will only trigger onChange once a user interaction has been made, updates to this prop will be taken into account - true by default */\n selected?: boolean;\n /** Sets the steps data for the slider */\n steps?: SliderStep[];\n /** Sets the step to move per point in the slider */\n step?: number;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** Sets the value of the slider */\n value?: number;\n}\n\nexport const Slider = React.forwardRef((props: SliderProps, ref: React.Ref<HTMLInputElement>) => {\n const {\n title,\n ariaLabel,\n error,\n errorText,\n errorWrapperClassName,\n labelLeft,\n labelRight,\n disabled = false,\n onChange,\n steps,\n step = 1,\n minValue = 0,\n maxValue = steps ? steps.length - 1 : 100,\n selected = true,\n testId,\n value,\n ...rest\n } = props;\n\n const [isMoving, setIsMoving] = useState(false);\n const [selectedState, setSelectedState] = useState(typeof value === 'undefined' ? selected : true);\n const [valueState, setValueState] = useSafeNumberValue(\n typeof value === 'undefined' ? (maxValue - minValue) / 2 + minValue : value,\n minValue,\n maxValue\n );\n\n const errorTextId = useIdWithFallback(props.errorTextId);\n const baseId = useId();\n const titleId = 'title-' + baseId;\n const labelLeftId = 'label-' + baseId;\n const labelRightId = 'label-right-' + baseId;\n const trackRef = useRef<HTMLDivElement>(null);\n const { refObject, isFocused } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n const mergedRefs = mergeRefs([ref, refObject]);\n\n const { width: trackWidth } = useSize(trackRef) || { width: 0 };\n const largeStep = maxValue / 10;\n const invalid = !!errorText || !!error;\n\n useEffect(() => {\n const handlePointerUp = (): void => {\n setIsMoving(false);\n };\n\n document.addEventListener('pointerup', handlePointerUp);\n\n return (): void => {\n document.removeEventListener('pointerup', handlePointerUp);\n };\n }, []);\n\n const getValueBasedOnMarkerPosition = (markerPosition: number): number => {\n const trackPosition = trackRef.current?.getBoundingClientRect().x ?? 0;\n\n // Calculate the normalized position (0 to 1) of the marker along the track\n const normalizedPosition = (markerPosition - trackPosition) / trackWidth;\n const valueRange = maxValue - minValue;\n // Calculate the value without considering the step\n let value = normalizedPosition * valueRange + minValue;\n // Adjust the value to account for the step increment\n const stepCount = Math.round(value / step);\n value = stepCount * step;\n value = Math.max(minValue, Math.min(maxValue, value));\n\n return value;\n };\n\n useEffect(() => {\n const handlePointerMove = (e: PointerEvent): void => {\n if (!disabled && isMoving) {\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValueState(newValue);\n }\n };\n\n document.addEventListener('pointermove', handlePointerMove);\n\n return (): void => {\n document.removeEventListener('pointermove', handlePointerMove);\n };\n }, [isMoving]);\n\n useEffect(() => {\n if (value !== valueState && typeof value !== 'undefined') {\n handleSelected();\n setValueState(value);\n }\n }, [value]);\n\n useEffect(() => {\n if (typeof value === 'undefined' && selected !== selectedState) {\n setSelectedState(selected);\n }\n }, [selected]);\n\n const handleSelected = (): void => {\n if (selectedState === false) {\n setSelectedState(true);\n }\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n let flag = false;\n\n switch (e.key) {\n case 'ArrowLeft':\n case 'ArrowDown':\n setValueState(valueState - step);\n flag = true;\n break;\n case 'PageDown':\n setValueState(valueState - largeStep);\n flag = true;\n break;\n case 'ArrowRight':\n case 'ArrowUp':\n setValueState(valueState + step);\n flag = true;\n break;\n case 'PageUp':\n setValueState(valueState + largeStep);\n flag = true;\n break;\n case 'Home':\n setValueState(minValue);\n flag = true;\n break;\n case 'End':\n setValueState(maxValue);\n flag = true;\n break;\n default:\n break;\n }\n\n if (flag) {\n handleSelected();\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const handleTrackClick: React.MouseEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n const newValue = getValueBasedOnMarkerPosition(e.clientX);\n setValueState(newValue);\n refObject.current?.focus();\n };\n\n const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = e => {\n if (disabled) return;\n\n setIsMoving(true);\n handleSelected();\n\n e.preventDefault();\n e.stopPropagation();\n\n refObject.current?.focus();\n };\n\n const markerXPos = maxValue !== minValue ? (trackWidth / (maxValue - minValue)) * (valueState - minValue) : 0;\n\n const getAriaValueText = (): string | undefined => {\n const stepIndex = steps ? Math.round((valueState - minValue) / step) : null;\n\n if (steps && stepIndex !== null && stepIndex >= 0 && stepIndex < steps.length) {\n const step = steps[stepIndex];\n const emojiCode = step.emojiUniCode;\n const label = typeof step.label !== 'undefined' ? step.label.toString() : undefined;\n\n return emojiCode && label ? `${emojiCode} ${label}` : emojiCode || label;\n }\n\n return undefined;\n };\n\n const getAriaLabeledById = (): string | undefined => {\n if (title && labelLeft && labelRight) {\n return [titleId, labelLeftId, labelRightId].join(' ');\n }\n if (title && labelLeft) {\n return [titleId, labelLeftId].join(' ');\n }\n if (title && labelRight) {\n return [titleId, labelRightId].join(' ');\n }\n if (title) {\n return titleId;\n }\n };\n\n const ariaLabelAttributes = getAriaLabelAttributes({\n label: ariaLabel,\n id: getAriaLabeledById(),\n prefer: 'label',\n });\n\n const getXPositionStyling = (index: number, stepsLength: number): { left: string } => {\n return { left: `${(index / (stepsLength - 1)) * 100}%` };\n };\n\n useEffect(() => {\n if (selectedState && onChange) {\n onChange({\n target: {\n name: props.name,\n value: valueState,\n },\n } as unknown as React.ChangeEvent<HTMLInputElement>);\n }\n }, [valueState, selectedState]);\n\n const renderEmojies = (): React.ReactNode => {\n return (\n <div className={styles['slider__emoji-container']}>\n {steps?.map((step, index) => {\n return (\n step.emojiUniCode && (\n <div\n aria-hidden={true}\n key={'emoji' + index}\n className={styles['slider__emoji']}\n style={getXPositionStyling(index, steps.length)}\n >\n {step.emojiUniCode}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n const renderSteps = (): React.ReactNode => {\n return steps?.map((_step, index) => {\n return <div key={'step' + index} className={styles['slider__track__step']} style={getXPositionStyling(index, steps.length)} />;\n });\n };\n\n const renderStepLabels = (): React.ReactNode => {\n return (\n <div className={styles['slider__value-container']}>\n {steps?.map((step, index) => {\n return (\n typeof step.label !== 'undefined' && (\n <div\n aria-hidden={true}\n key={'label' + index}\n className={styles['slider__value']}\n style={getXPositionStyling(index, steps.length)}\n >\n {step.label}\n </div>\n )\n );\n })}\n </div>\n );\n };\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n <input\n aria-valuetext={getAriaValueText()}\n className={styles['sr-only-slider']}\n disabled={disabled}\n min={minValue}\n max={maxValue}\n onChange={onChange}\n onKeyDown={handleKeyDown}\n value={valueState}\n ref={mergedRefs}\n type=\"range\"\n {...rest}\n {...ariaLabelAttributes}\n />\n <div className={styles.slider} data-testid={testId} data-analyticsid={AnalyticsId.Slider}>\n {title && (\n <Title className={styles['slider__title']} htmlMarkup={'h3'} margin={0} appearance={'title3'} id={titleId}>\n {title}\n </Title>\n )}\n <div className={styles['slider__content-container']}>\n {renderEmojies()}\n {/* Slider streken er klikkbar med mus/touch */}\n {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n <div\n ref={trackRef}\n className={classNames(styles['slider__track-wrapper'], disabled && styles['slider__track-wrapper--disabled'])}\n onClick={handleTrackClick}\n onPointerDown={handlePointerDown}\n >\n <div className={classNames(styles.slider__track, disabled && styles['slider__track--disabled'])}>{renderSteps()}</div>\n <div\n className={classNames(styles.slider__marker, {\n [styles['slider__marker--disabled']]: disabled,\n [styles['slider__marker--selected']]: selectedState,\n [styles['slider__marker--invalid']]: invalid,\n [styles['slider__marker--focused']]: !disabled && isFocused,\n })}\n style={{\n left: `${markerXPos}px`,\n }}\n />\n </div>\n {renderStepLabels()}\n </div>\n {(labelLeft || labelRight) && (\n <span className={styles.slider__options}>\n <span id={labelLeftId}>{labelLeft}</span>\n <span id={labelRightId}>{labelRight}</span>\n </span>\n )}\n </div>\n </ErrorWrapper>\n );\n});\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n","import Slider from './Slider';\nexport * from './Slider';\nexport default Slider;\n"],"mappings":"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"}

package/Textarea.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Textarea.js","names":[],"sources":["../src/components/Textarea/Textarea.tsx","../src/components/Textarea/index.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\n\nimport cn from 'classnames';\n\nimport { AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX, FormOnColor } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport { uuid } from '../../utils/uuid';\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '../ErrorWrapper';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface TextareaProps\n extends ErrorWrapperClassNameProps,\n Pick<\n React.InputHTMLAttributes<HTMLTextAreaElement>,\n | 'aria-describedby'\n | 'autoFocus'\n | 'disabled'\n | 'name'\n | 'autoComplete'\n | 'placeholder'\n | 'readOnly'\n | 'required'\n | 'defaultValue'\n | 'onChange'\n | 'value'\n > {\n /** max character limit in textarea */\n maxCharacters?: number;\n /** The text is displayed in the end of the text-counter */\n maxText?: string;\n /** Width of textarea in characters (approximate) */\n width?: number;\n /** Sets the data-testid attribute. */\n testId?: string;\n /** If true, the component will have a bottom margin. */\n marginBottom?: boolean;\n /** If true, the component will be transparent. */\n transparent?: boolean;\n /** Changes the visuals of the textarea */\n onColor?: keyof typeof FormOnColor;\n /** Label of the input */\n label?: React.ReactNode;\n /** id of the textarea */\n textareaId?: string;\n /** max rows */\n maxRows?: number;\n /** min rows */\n minRows?: number;\n /** auto-grows until maxRows */\n grow?: boolean;\n /** Activates Error style for the input */\n error?: boolean;\n /** Error text to show above the component */\n errorText?: string;\n /** Error text id */\n errorTextId?: string;\n}\n\nconst getTextareaMaxWidth = (characters: number): string => {\n const paddingWidth = '2rem';\n const scrollbarWidth = '16px';\n const borderWidth = '4px';\n\n return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${scrollbarWidth} + ${borderWidth})`;\n};\n\nconst Textarea = React.forwardRef((props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) => {\n const {\n maxCharacters,\n maxText,\n width,\n testId,\n defaultValue,\n marginBottom: gutterBottom,\n transparent,\n onColor = FormOnColor.onwhite,\n label,\n textareaId = uuid(),\n minRows = 3,\n maxRows = 10,\n grow,\n error,\n errorText,\n errorWrapperClassName,\n autoFocus,\n disabled,\n name,\n autoComplete = 'off',\n placeholder,\n readOnly,\n required,\n onChange,\n value,\n ...rest\n } = props;\n\n const [rows, setRows] = useState(minRows);\n const [textareaInput, setTextareaInput] = useState(value || defaultValue || '');\n const referanse = useRef<HTMLDivElement>(null);\n const errorTextUuid = useIdWithFallback(props.errorTextId);\n\n useEffect(() => {\n setTextareaInput(defaultValue || '');\n }, [defaultValue]);\n\n const resizeHeight = (target: HTMLTextAreaElement): void => {\n const textareaLineHeight = 28;\n\n const previousRows = target.rows;\n target.rows = minRows; // reset number of rows in textarea\n\n const currentRows = Math.floor((target.scrollHeight - 16) / textareaLineHeight); // scrollHeight - 16px of padding to calculate the rows\n\n if (currentRows === previousRows) {\n target.rows = currentRows;\n }\n\n if (currentRows >= maxRows) {\n target.rows = maxRows;\n target.scrollTop = target.scrollHeight;\n }\n\n if (currentRows < maxRows) {\n setRows(currentRows);\n } else {\n setRows(maxRows);\n }\n };\n\n const onDark = onColor === FormOnColor.ondark;\n const onBlueberry = onColor === FormOnColor.onblueberry;\n const maxCharactersExceeded = !!maxCharacters && textareaInput.toString().length > maxCharacters;\n const onError = onColor === FormOnColor.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n\n const textareaWrapperClass = cn(styles.textarea, {\n [styles['textarea--gutterBottom']]: gutterBottom,\n });\n\n const contentWrapperClass = cn(styles['input-container'], {\n [styles['input-container--transparent']]: transparent,\n [styles['input-container--on-blueberry']]: onBlueberry,\n [styles['input-container--on-dark']]: onDark,\n [styles['input-container--invalid']]: onError,\n [styles['input-container--disabled']]: props.disabled,\n });\n\n const textareaClass = cn(styles['input-container__input'], {\n [styles[`input-container__input--disabled`]]: props.disabled,\n });\n\n useEffect(() => {\n if (value) setTextareaInput(value);\n\n if (grow && referanse.current?.children && referanse.current?.children[0]) {\n const textarea = referanse.current?.children[0] as HTMLTextAreaElement;\n resizeHeight(textarea);\n }\n }, [value]);\n\n const onChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n setTextareaInput(e.target.value);\n\n if (onChange) {\n onChange(e);\n }\n\n if (grow) {\n resizeHeight(e.target);\n }\n };\n\n const maxWidth = width ? getTextareaMaxWidth(width) : undefined;\n\n return (\n <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextUuid}>\n <div data-testid={testId} data-analyticsid={AnalyticsId.Textarea} className={textareaWrapperClass}>\n {renderLabel(label, textareaId, onColor as FormOnColor)}\n <div className={contentWrapperClass} ref={referanse} style={{ maxWidth }}>\n <textarea\n {...rest}\n rows={rows}\n defaultValue={defaultValue}\n id={textareaId}\n className={textareaClass}\n ref={ref}\n aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n aria-invalid={!!onError}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={autoFocus}\n disabled={disabled}\n name={name}\n autoComplete={autoComplete ? autoComplete : undefined}\n placeholder={placeholder}\n readOnly={readOnly}\n required={required}\n onChange={onChangeHandler}\n value={value}\n />\n </div>\n {maxCharacters && (\n <MaxCharacters\n maxCharacters={maxCharacters}\n length={textareaInput.toString().length}\n maxText={maxText}\n onColor={onColor}\n maxWidth={maxWidth}\n />\n )}\n </div>\n </ErrorWrapper>\n );\n});\n\nTextarea.displayName = 'Textarea';\n\nexport default Textarea;\n","import Textarea from './Textarea';\nexport * from './Textarea';\nexport default Textarea;\n"],"mappings":"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"}

package/components/NotificationPanel/index.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.js","names":["FluidWrapper: React.FC<WrapFluidProps>"],"sources":["../../../src/components/NotificationPanel/NotificationPanel.tsx","../../../src/components/NotificationPanel/index.ts"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIdWithFallback } from '../../hooks/useIdWithFallback';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport NotificationBadge from '../Badge/NotificationBadge';\nimport Close from '../Close';\nimport Expander from '../Expander';\n\nimport styles from './styles.module.scss';\n\nexport type NotificationPanelVariants = 'info' | 'warn' | 'error' | 'success';\nexport type NotificationCompactVariants = 'basic' | 'outline';\nexport type NotificationPanelSizes = 'small' | 'medium' | 'large';\nexport type LabelTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'span';\n\nexport interface NotificationPanelProps {\n /** Adds custom classes to the element. */\n className?: string;\n /** Adds inner child elements. */\n children?: React.ReactNode;\n /** Adds inner expander elements. */\n expanderChildren?: React.ReactNode;\n /** Text for expanderButton. */\n expanderButtonText?: string;\n /** Text for expanderButton when closed. */\n expanderButtonClosedText?: string;\n /** Makes expander be open from start. */\n expanderOpenFromStart?: boolean;\n /** Changes the visual representation of the notification panel. */\n variant?: NotificationPanelVariants;\n /** Makes the panel more compact. Available in basic and outline. */\n compactVariant?: NotificationCompactVariants;\n /** Sets a fixed size for the content container. */\n size?: NotificationPanelSizes;\n /** Used in combination with dismissiable property to close the notification panel. */\n onClick?: (e?: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n /** Toggles the close button in the top right corner. */\n dismissable?: boolean;\n /** Enables a fluid outer container that spans the entire width of parent. */\n fluid?: boolean;\n /** Sets a label for the notification panel. */\n label?: string;\n /** Changes the underlying element of the label. */\n labelHtmlMarkup?: LabelTags;\n /** Close button aria-label */\n ariaLabelCloseBtn?: string;\n /** Custom id for the label */\n labelId?: string;\n /** Custom role for the panel. Default is no role. If variant is alert or crisis, the aria role will be set to \"alert\" unless the role-prop is also set. */\n role?: 'region' | 'alert' | 'status';\n /** Sets the data-testid attribute. */\n testId?: string;\n}\n\ntype WrapFluidProps = Pick<NotificationPanelProps, 'fluid'> & {\n children: React.ReactElement;\n};\n\nconst FluidWrapper: React.FC<WrapFluidProps> = ({ fluid, children }) => {\n if (fluid) {\n const fluidClasses = classNames(styles['fluid-wrapper']);\n\n return <div className={fluidClasses}>{children}</div>;\n }\n return children;\n};\n\nconst NotificationPanel = React.forwardRef<HTMLDivElement, NotificationPanelProps>((props, ref) => {\n const {\n children,\n variant = 'info',\n dismissable = false,\n onClick,\n expanderChildren,\n expanderButtonText,\n expanderButtonClosedText,\n expanderOpenFromStart = false,\n compactVariant,\n label,\n labelHtmlMarkup = 'h1',\n fluid = false,\n size,\n className,\n role,\n testId,\n } = props;\n const labelId = useIdWithFallback(props.labelId);\n const [expanderOpen, setExpanderOpen] = React.useState(expanderOpenFromStart);\n const isMobile = useIsMobileBreakpoint();\n\n const renderContent = (): JSX.Element => {\n const outlineVariant = compactVariant === 'outline';\n const contentClasses = classNames(styles['notification-panel__content']);\n const labelClasses = classNames(styles['notification-panel__label'], {\n [styles['notification-panel__label--no-content']]: !children && !expanderChildren,\n [styles['notification-panel__label--compact']]: !!compactVariant,\n [styles['notification-panel__label--outline']]: outlineVariant,\n });\n const childrenClasses = classNames(styles['notification-panel__children'], {\n [styles['notification-panel__children--with-label']]: label,\n [styles['notification-panel__children--expander-no-label']]: expanderChildren && !label,\n [styles['notification-panel__children--outline']]: outlineVariant,\n });\n const CustomTag = labelHtmlMarkup;\n\n return (\n <div className={contentClasses} id={!label ? labelId : undefined}>\n {label && (\n <CustomTag className={labelClasses} id={labelId}>\n {label}\n </CustomTag>\n )}\n {children && <div className={childrenClasses}>{children}</div>}\n {expanderChildren && expanderButtonText && expanderButtonClosedText && !compactVariant && (\n <Expander\n title={expanderOpen ? expanderButtonText : expanderButtonClosedText}\n onExpand={setExpanderOpen}\n expanded={expanderOpen}\n testId=\"expand\"\n >\n {expanderChildren}\n </Expander>\n )}\n </div>\n );\n };\n\n const notificationPanelClasses = classNames(\n styles['notification-panel'],\n styles[`notification-panel--${variant}`],\n size && styles[`notification-panel--${size}`],\n {\n [styles['notification-panel--compact']]: !!compactVariant,\n [styles['notification-panel--compact--basic']]: compactVariant === 'basic',\n [styles['notification-panel--compact--outline']]: compactVariant === 'outline',\n [styles['notification-panel--with-content']]: expanderChildren || (label && children),\n [styles['notification-panel--dismissable']]: dismissable,\n },\n className\n );\n\n const ariaRole = role || (variant === 'error' && 'alert') || undefined;\n const ariaLabelAttributes = ariaRole ? getAriaLabelAttributes({ label, id: labelId }) : undefined;\n\n return (\n <FluidWrapper fluid={fluid}>\n <div\n ref={ref}\n role={ariaRole}\n data-testid={testId}\n data-analyticsid={AnalyticsId.NotificationPanel}\n className={notificationPanelClasses}\n {...ariaLabelAttributes}\n >\n <NotificationBadge\n variant={variant}\n size={compactVariant || isMobile ? IconSize.XSmall : IconSize.Small}\n className={styles['notification-panel__icon']}\n />\n {dismissable && (\n <span className={styles['notification-panel__close']}>\n <Close ariaLabel={props.ariaLabelCloseBtn} onClick={onClick} color=\"black\" />\n </span>\n )}\n {renderContent()}\n </div>\n </FluidWrapper>\n );\n});\n\nexport default NotificationPanel;\n","import NotificationPanel from './NotificationPanel';\nexport * from './NotificationPanel';\nexport default NotificationPanel;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAMA,gBAA0C,EAAE,OAAO,eAAe;AACtE,KAAI,MAGF,QAAO,oBAAC,OAAA;EAAI,WAFS,GAAW,OAAO,iBAAiB;EAElB;GAAe;AAEvD,QAAO;;AClET,IAAA,4BDqE0B,MAAM,YAAoD,OAAO,QAAQ;CACjG,MAAM,EACJ,UACA,UAAU,QACV,cAAc,OACd,SACA,kBACA,oBACA,0BACA,wBAAwB,OACxB,gBACA,OACA,kBAAkB,MAClB,QAAQ,OACR,MACA,WACA,MACA,WACE;CACJ,MAAM,UAAU,kBAAkB,MAAM,QAAQ;CAChD,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,sBAAsB;CAC7E,MAAM,WAAW,uBAAuB;CAExC,MAAM,sBAAmC;EACvC,MAAM,iBAAiB,mBAAmB;EAC1C,MAAM,iBAAiB,GAAW,OAAO,+BAA+B;EACxE,MAAM,eAAe,GAAW,OAAO,8BAA8B;IAClE,OAAO,2CAA2C,CAAC,YAAY,CAAC;IAChE,OAAO,wCAAwC,CAAC,CAAC;IACjD,OAAO,wCAAwC;GACjD,CAAC;EACF,MAAM,kBAAkB,GAAW,OAAO,iCAAiC;IACxE,OAAO,8CAA8C;IACrD,OAAO,qDAAqD,oBAAoB,CAAC;IACjF,OAAO,2CAA2C;GACpD,CAAC;AAGF,SACE,qBAAC,OAAA;GAAI,WAAW;GAAgB,IAAI,CAAC,QAAQ,UAAU,KAAA;;IACpD,SACC,oBALY,iBAKX;KAAU,WAAW;KAAc,IAAI;eACrC;MACS;IAEb,YAAY,oBAAC,OAAA;KAAI,WAAW;KAAkB;MAAe;IAC7D,oBAAoB,sBAAsB,4BAA4B,CAAC,kBACtE,oBAAC,kBAAA;KACC,OAAO,eAAe,qBAAqB;KAC3C,UAAU;KACV,UAAU;KACV,QAAO;eAEN;MACQ;;IAET;;CAIV,MAAM,2BAA2B,GAC/B,OAAO,uBACP,OAAO,uBAAuB,YAC9B,QAAQ,OAAO,uBAAuB,SACtC;GACG,OAAO,iCAAiC,CAAC,CAAC;GAC1C,OAAO,wCAAwC,mBAAmB;GAClE,OAAO,0CAA0C,mBAAmB;GACpE,OAAO,sCAAsC,oBAAqB,SAAS;GAC3E,OAAO,qCAAqC;EAC9C,EACD,UACD;CAED,MAAM,WAAW,QAAS,YAAY,WAAW,WAAY,KAAA;CAC7D,MAAM,sBAAsB,WAAW,uBAAuB;EAAE;EAAO,IAAI;EAAS,CAAC,GAAG,KAAA;AAExF,QACE,oBAAC,cAAA;EAAoB;YACnB,qBAAC,OAAA;GACM;GACL,MAAM;GACN,eAAa;GACb,oBAAkB,YAAY;GAC9B,WAAW;GACX,GAAI;;IAEJ,oBAAC,2BAAA;KACU;KACT,MAAM,kBAAkB,WAAW,SAAS,SAAS,SAAS;KAC9D,WAAW,OAAO;MAClB;IACD,eACC,oBAAC,QAAA;KAAK,WAAW,OAAO;eACtB,oBAAC,eAAA;MAAM,WAAW,MAAM;MAA4B;MAAS,OAAM;OAAU;MACxE;IAER,eAAe;;IACZ;GACO;EAEjB"}

package/components/PopMenu/index.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.js","names":["PopMenu: React.FC<PopMenuProps>"],"sources":["../../../src/components/PopMenu/PopMenu.tsx","../../../src/components/PopMenu/index.ts"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AnalyticsId, IconSize } from '../../constants';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useOutsideEvent } from '../../hooks/useOutsideEvent';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { getColor } from '../../theme/currys';\nimport { isComponent } from '../../utils/component';\nimport Icon, { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\nimport VerticalDots from '../Icons/VerticalDots';\nimport X from '../Icons/X';\nimport LazyIcon from '../LazyIcon';\nimport LinkList, { LinkListProps, LinkProps } from '../LinkList';\nimport PopOver from '../PopOver';\n\nimport styles from './styles.module.scss';\n\nexport enum PopMenuVariant {\n onWhite = 'on-white',\n onGray = 'on-gray',\n onBlueberry = 'on-blueberry',\n}\n\nexport enum PopMenuLabelPosition {\n right = 'right',\n left = 'left',\n}\n\nexport interface PopMenuProps {\n /** Content shown inside PopOver. Can only be a LinkList */\n children: React.ReactElement<LinkListProps>;\n /** Adds custom classes to the popover element. */\n popOverClassName?: string;\n /** Adds custom classes to the element. */\n popMenuClassName?: string;\n /** Changes responsive design for the trigger buttons. */\n popMenuVariant?: PopMenuVariant;\n /** Sets the data-testid attribute for the button that opens. */\n openButtonTestId?: string;\n /** Sets the data-testid attribute for the button that closes. */\n closeButtonTestId?: string;\n /** Sets the data-testid attribute for the popover. */\n popOverTestId?: string;\n /** Sets the arial-label attribute for the openButton. */\n openButtonAriaLabel?: string;\n /** Sets the arial-label attribute for the closeButton. */\n closeButtonAriaLabel?: string;\n /** Sets the icon on the trigger button. */\n svgIcon?: SvgIcon | IconName;\n /** Optional text next to the trigger button. */\n labelText?: string;\n /** Placement of the label text relative to the trigger button. */\n labelTextPosition?: PopMenuLabelPosition;\n}\n\nexport const PopMenu: React.FC<PopMenuProps> = (props: PopMenuProps) => {\n const triggerButtonRef = useRef<HTMLButtonElement>(null);\n const iconRef = useRef<HTMLDivElement>(null);\n const outerRef = useRef<HTMLDivElement>(null);\n const [isOpen, setIsOpen] = useState(false);\n const {\n children,\n popOverClassName,\n popMenuClassName,\n openButtonTestId,\n closeButtonTestId,\n popOverTestId,\n popMenuVariant = PopMenuVariant.onWhite,\n openButtonAriaLabel,\n closeButtonAriaLabel,\n svgIcon,\n labelText,\n labelTextPosition = PopMenuLabelPosition.right,\n } = props;\n const buttonClasses = classNames(styles['pop-menu-button'], {\n [styles[`pop-menu-button--${popMenuVariant}`]]: popMenuVariant,\n });\n const isMobile = useIsMobileBreakpoint();\n\n useOutsideEvent(outerRef, () => {\n setIsOpen(false);\n });\n\n const { isHovered: triggerButtonIsHovered } = usePseudoClasses(triggerButtonRef);\n const mobileIconSize = isMobile ? IconSize.XSmall : IconSize.Small;\n\n const handleClick = (cb?: () => void): void => {\n setIsOpen(false);\n if (cb) cb();\n };\n\n const renderChildren = (): React.ReactElement | undefined => {\n if (isComponent<LinkListProps>(children, LinkList)) {\n return (\n <PopOver\n testId={popOverTestId}\n className={classNames(styles['pop-menu__pop-over'], popOverClassName)}\n controllerRef={iconRef}\n role=\"dialog\"\n show={isOpen}\n >\n {React.Children.map(children, child =>\n React.cloneElement(child, {\n children: React.Children.map(child.props.children, child =>\n isComponent<LinkProps>(child, LinkList.Link)\n ? React.cloneElement(child, {\n onClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) =>\n handleClick(() => child.props.onClick && child.props.onClick(event)),\n })\n : child\n ),\n })\n )}\n </PopOver>\n );\n }\n };\n\n const toggleOpenOnClick = (e?: React.MouseEvent<HTMLElement, MouseEvent>): void => {\n if (e) e.stopPropagation();\n setIsOpen(!isOpen);\n };\n\n const iconComponent =\n svgIcon && typeof svgIcon === 'string' ? (\n <LazyIcon iconName={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n ) : (\n svgIcon && <Icon svgIcon={svgIcon} size={IconSize.XSmall} isHovered={triggerButtonIsHovered} />\n );\n\n const openIcon = svgIcon ? (\n iconComponent\n ) : (\n <Icon svgIcon={svgIcon ?? VerticalDots} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />\n );\n\n const closeIcon = <Icon svgIcon={X} color={getColor('black')} size={mobileIconSize} isHovered={triggerButtonIsHovered} />;\n\n const triggerButton = (\n <button\n ref={triggerButtonRef}\n data-testid={isOpen ? closeButtonTestId : openButtonTestId}\n className={buttonClasses}\n aria-label={isOpen ? closeButtonAriaLabel : openButtonAriaLabel}\n aria-expanded={isOpen}\n onClick={toggleOpenOnClick}\n type=\"button\"\n >\n {labelText && labelTextPosition == PopMenuLabelPosition.left && <span>{labelText}</span>}\n {\n <div className={styles['pop-menu-button__icon-wrapper']} ref={iconRef}>\n {isOpen ? closeIcon : openIcon}\n </div>\n }\n {labelText && labelTextPosition == PopMenuLabelPosition.right && <span>{labelText}</span>}\n </button>\n );\n\n return (\n <div ref={outerRef} className={classNames(styles['pop-menu-button'], popMenuClassName)} data-analyticsid={AnalyticsId.PopMenu}>\n {triggerButton}\n {isOpen && renderChildren()}\n </div>\n );\n};\n\nexport default PopMenu;\n","import PopMenu from './PopMenu';\nexport * from './PopMenu';\nexport default PopMenu;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,IAAY,iBAAA,yBAAA,kBAAL;AACL,kBAAA,aAAA;AACA,kBAAA,YAAA;AACA,kBAAA,iBAAA;;;AAGF,IAAY,uBAAA,yBAAA,wBAAL;AACL,wBAAA,WAAA;AACA,wBAAA,UAAA;;;AA8BF,MAAaA,WAAmC,UAAwB;CACtE,MAAM,mBAAmB,OAA0B,KAAK;CACxD,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,EACJ,UACA,kBACA,kBACA,kBACA,mBACA,eACA,iBAAiB,eAAe,SAChC,qBACA,sBACA,SACA,WACA,oBAAoB,qBAAqB,UACvC;CACJ,MAAM,gBAAgB,GAAW,OAAO,oBAAoB,GACzD,OAAO,oBAAoB,oBAAoB,gBACjD,CAAC;CACF,MAAM,WAAW,uBAAuB;AAExC,iBAAgB,gBAAgB;AAC9B,YAAU,MAAM;GAChB;CAEF,MAAM,EAAE,WAAW,2BAA2B,iBAAiB,iBAAiB;CAChF,MAAM,iBAAiB,WAAW,SAAS,SAAS,SAAS;CAE7D,MAAM,eAAe,OAA0B;AAC7C,YAAU,MAAM;AAChB,MAAI,GAAI,KAAI;;CAGd,MAAM,uBAAuD;AAC3D,MAAI,YAA2B,UAAU,iBAAS,CAChD,QACE,oBAAC,iBAAA;GACC,QAAQ;GACR,WAAW,GAAW,OAAO,uBAAuB,iBAAiB;GACrE,eAAe;GACf,MAAK;GACL,MAAM;aAEL,MAAM,SAAS,IAAI,WAAU,UAC5B,MAAM,aAAa,OAAO,EACxB,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,WAAU,YACjD,YAAuB,SAAO,iBAAS,KAAK,GACxC,MAAM,aAAa,SAAO,EACxB,UAAU,UACR,kBAAkB,QAAM,MAAM,WAAW,QAAM,MAAM,QAAQ,MAAM,CAAC,EACvE,CAAC,GACF,QACL,EACF,CAAC,CACH;IACO;;CAKhB,MAAM,qBAAqB,MAAwD;AACjF,MAAI,EAAG,GAAE,iBAAiB;AAC1B,YAAU,CAAC,OAAO;;CAGpB,MAAM,gBACJ,WAAW,OAAO,YAAY,WAC5B,oBAAC,kBAAA;EAAS,UAAU;EAAS,MAAM,SAAS;EAAQ,WAAW;GAA0B,GAEzF,WAAW,oBAAC,cAAA;EAAc;EAAS,MAAM,SAAS;EAAQ,WAAW;GAA0B;CAGnG,MAAM,WAAW,UACf,gBAEA,oBAAC,cAAA;EAAK,SAAS,WAAW;EAAc,OAAO,SAAS,QAAQ;EAAE,MAAM;EAAgB,WAAW;GAA0B;CAG/H,MAAM,YAAY,oBAAC,cAAA;EAAK,SAAS;EAAG,OAAO,SAAS,QAAQ;EAAE,MAAM;EAAgB,WAAW;GAA0B;CAEzH,MAAM,gBACJ,qBAAC,UAAA;EACC,KAAK;EACL,eAAa,SAAS,oBAAoB;EAC1C,WAAW;EACX,cAAY,SAAS,uBAAuB;EAC5C,iBAAe;EACf,SAAS;EACT,MAAK;;GAEJ,aAAa,qBAAqB,qBAAqB,QAAQ,oBAAC,QAAA,EAAA,UAAM,WAAA,CAAiB;GAEtF,oBAAC,OAAA;IAAI,WAAW,OAAO;IAAkC,KAAK;cAC3D,SAAS,YAAY;KAClB;GAEP,aAAa,qBAAqB,qBAAqB,SAAS,oBAAC,QAAA,EAAA,UAAM,WAAA,CAAiB;;GAClF;AAGX,QACE,qBAAC,OAAA;EAAI,KAAK;EAAU,WAAW,GAAW,OAAO,oBAAoB,iBAAiB;EAAE,oBAAkB,YAAY;aACnH,eACA,UAAU,gBAAgB,CAAA;GACvB;;ACnKV,IAAA,kBDuKe"}

package/components/PopMenu/styles.module.scss DELETED Viewed

@@ -1,145 +0,0 @@
-@use 'sass:map';
-@use '../../scss/palette' as palette;
-@use '../../scss/breakpoints' as breakpoints;
-.pop-menu-button {
-  padding: 0;
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 3rem;
-  min-width: 3rem;
-  &:focus {
-    border: 0.1875rem solid palette.$black;
-    box-shadow: none;
-    outline: none;
-  }
-  &__icon-wrapper {
-    display: flex;
-  }
-}
-html :focus > .pop-menu-button {
-  box-shadow: none;
-  border: solid;
-}
-.pop-menu-button :focus > .pop-menu-button {
-  box-shadow: none;
-}
-// overrides
-:focus > .pop-menu-button:hover {
-  box-shadow: none;
-}
-.pop-menu-button--on-white {
-  &:focus {
-    background-color: transparent;
-  }
-  &:active {
-    background-color: palette.$neutral50;
-    border: none;
-  }
-  &:hover {
-    background-color: palette.$neutral50;
-  }
-  &:active:hover {
-    background-color: transparent;
-  }
-  &:active:focus {
-    background-color: palette.$neutral50;
-    border: 0.1875rem solid palette.$black;
-  }
-}
-.pop-menu-button--on-gray {
-  &:focus {
-    background-color: transparent;
-  }
-  &:active {
-    background-color: palette.$neutral100;
-    border: none;
-  }
-  &:hover {
-    background-color: palette.$neutral100;
-  }
-  &:active:hover {
-    background-color: transparent;
-  }
-  &:active:focus {
-    background-color: palette.$neutral100;
-    border: 0.1875rem solid palette.$black;
-  }
-}
-.pop-menu-button--on-blueberry {
-  &:focus {
-    background-color: transparent;
-  }
-  &:active {
-    background-color: palette.$blueberry100;
-    border: none;
-  }
-  &:hover {
-    background-color: palette.$blueberry100;
-  }
-  &:active:hover {
-    background-color: transparent;
-  }
-  &:active:focus {
-    background-color: palette.$blueberry100;
-    border: 0.1875rem solid palette.$black;
-  }
-}
-.pop-menu__pop-over {
-  width: 20.875rem;
-  padding: 0;
-  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-    width: 26.125rem;
-    max-width: 27rem;
-  }
-  ul {
-    width: calc(100% - 0.5px);
-  }
-  li:first-of-type {
-    border-top: none;
-    a,
-    button {
-      border-top-left-radius: 9px;
-      border-top-right-radius: 9px;
-    }
-  }
-  li:last-of-type {
-    border-bottom: none;
-    a,
-    button {
-      border-bottom-left-radius: 9px;
-      border-bottom-right-radius: 9px;
-    }
-  }
-}

package/components/PopMenu/styles.module.scss.d.ts DELETED Viewed

@@ -1,14 +0,0 @@
-export type Styles = {
-  'pop-menu__pop-over': string;
-  'pop-menu-button': string;
-  'pop-menu-button__icon-wrapper': string;
-  'pop-menu-button--on-blueberry': string;
-  'pop-menu-button--on-gray': string;
-  'pop-menu-button--on-white': string;
-};
-export type ClassNames = keyof Styles;
-declare const styles: Styles;
-export default styles;