npm - @fremtind/jokul - Versions diffs - 0.37.13 → 0.37.15 - Mend

@fremtind/jokul 0.37.13 → 0.37.15

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 (342) hide show

package/build/cjs/components/radio-button/BaseRadioButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseRadioButton.cjs","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ChangeEventHandler, forwardRef } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { RadioButtonProps } from \"./RadioButton.js\";\n\nexport interface BaseRadioButtonProps extends RadioButtonProps {\n inline?: boolean;\n density?: Density;\n invalid?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const BaseRadioButton = forwardRef<\n HTMLInputElement,\n BaseRadioButtonProps\n>((props, ref) => {\n const {\n id,\n className,\n checked,\n children,\n label,\n density,\n inline,\n invalid,\n name,\n value,\n onChange,\n ...rest\n } = props;\n\n const inputId = useId(id \|\| \"jkl-radio-button\", { generateSuffix: !id });\n\n return (\n <div\n className={clsx(\"jkl-radio-button\", className, {\n \"jkl-radio-button--inline\": inline,\n \"jkl-radio-button--error\": invalid,\n })}\n data-density={density}\n >\n <input\n name={name}\n ref={ref}\n {...rest}\n id={inputId}\n className=\"jkl-radio-button__input\"\n type=\"radio\"\n onChange={onChange}\n value={value}\n checked={checked}\n />\n <label\n data-testid=\"jkl-radio-button__label-tag\"\n htmlFor={inputId}\n className=\"jkl-radio-button__label\"\n >\n <span aria-hidden className=\"jkl-radio-button__dot\" />\n <span className=\"jkl-radio-button__text\">\n {label \|\| children}\n </span>\n </label>\n </div>\n );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","density","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"yNAaaA,EAAkBC,EAAAA,YAG7B,CAACC,EAAOC,KACA,MACFC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHb,EAEEc,EAAUC,~~QAAMb~~,GAAM,mBAAoB,CAAEc,gBAAiBd,IAG/D,OAAAe,EAAAA,KAAC,MAAA,CACGd,UAAWe,EAAAA,KAAK,mBAAoBf,EAAW,CAC3C,2BAA4BK,EAC5B,0BAA2BC,IAE/B,eAAcF,EAEdF,SAAA,CAAAc,EAAAA,IAAC,QAAA,CACGT,KAAAA,EACAT,IAAAA,KACIY,EACJX,GAAIY,EACJX,UAAU,0BACViB,KAAK,QACLR,SAAAA,EACAD,MAAAA,EACAP,QAAAA,IAEJa,EAAAA,KAAC,QAAA,CACG,cAAY,8BACZI,QAASP,EACTX,UAAU,0BAEVE,SAAA,CAAAc,EAAAA,IAAC,OAAK,CAAA,eAAW,EAAChB,UAAU,0BAC3BgB,EAAAA,IAAA,OAAA,CAAKhB,UAAU,yBACXE,YAASA,~~SAElB~~,~~IAKZP~~,EAAgBwB,YAAc"}
1	+ {"version":3,"file":"BaseRadioButton.cjs","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ChangeEventHandler, forwardRef } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { RadioButtonProps } from \"./RadioButton.js\";\n\nexport interface BaseRadioButtonProps extends RadioButtonProps {\n inline?: boolean;\n density?: Density;\n invalid?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const BaseRadioButton = forwardRef<\n HTMLInputElement,\n BaseRadioButtonProps\n>((props, ref) => {\n const {\n id,\n className,\n checked,\n children,\n label,\n density,\n inline,\n invalid,\n name,\n value,\n onChange,\n ...rest\n } = props;\n\n const inputId = useId(id \|\| \"jkl-radio-button\", { generateSuffix: !id });\n\n return (\n <div\n className={clsx(\"jkl-radio-button\", className, {\n \"jkl-radio-button--inline\": inline,\n \"jkl-radio-button--error\": invalid,\n })}\n data-density={density}\n >\n <input\n name={name}\n ref={ref}\n {...rest}\n id={inputId}\n className=\"jkl-radio-button__input\"\n type=\"radio\"\n onChange={onChange}\n value={value}\n checked={checked}\n />\n <label\n data-testid=\"jkl-radio-button__label-tag\"\n htmlFor={inputId}\n className=\"jkl-radio-button__label\"\n >\n <span aria-hidden className=\"jkl-radio-button__dot\" />\n <span className=\"jkl-radio-button__text\">\n {label \|\| children}\n </span>\n </label>\n </div>\n );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","density","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"yNAaaA,EAAkBC,EAAAA,YAG7B,CAACC,EAAOC,KACA,MACFC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHb,EAEEc,EAAUC,EAAAA,MAAMb,GAAM,mBAAoB,CAAEc,gBAAiBd,IAG/D,OAAAe,EAAAA,KAAC,MAAA,CACGd,UAAWe,EAAAA,KAAK,mBAAoBf,EAAW,CAC3C,2BAA4BK,EAC5B,0BAA2BC,IAE/B,eAAcF,EAEdF,SAAA,CAAAc,EAAAA,IAAC,QAAA,CACGT,KAAAA,EACAT,IAAAA,KACIY,EACJX,GAAIY,EACJX,UAAU,0BACViB,KAAK,QACLR,SAAAA,EACAD,MAAAA,EACAP,QAAAA,IAEJa,EAAAA,KAAC,QAAA,CACG,cAAY,8BACZI,QAASP,EACTX,UAAU,0BAEVE,SAAA,CAAAc,EAAAA,IAAC,OAAK,CAAA,eAAW,EAAChB,UAAU,0BAC3BgB,EAAAA,IAAA,OAAA,CAAKhB,UAAU,yBACXE,YAASA,SAGtB,IAIRP,EAAgBwB,YAAc"}

package/build/cjs/components/radio-button/RadioButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.cjs","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, {\n forwardRef,\n InputHTMLAttributes,\n ChangeEventHandler,\n ReactNode,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\n SupportLabel,\n SupportLabelProps,\n} from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\n\nexport interface RadioButtonProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n children?: ReactNode;\n value: string;\n /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form /\n name?: string;\n /* Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /* @deprecated Bruk children */\n label?: ReactNode;\n helpLabel?: ReactNode;\n supportLabelProps?: Omit<\n SupportLabelProps,\n \"id\" \| \"errorLabel\" \| \"helpLabel\" \| \"density\"\n >;\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n (props, ref) => {\n const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n const {\n value: selectedValue,\n density,\n ...context\n } = useRadioGroupContext();\n const supportId = useId(\"jkl-support-label\");\n\n return (\n <>\n <BaseRadioButton\n {...context}\n {...rest}\n ref={ref}\n checked={\n typeof checked !== \"undefined\"\n ? checked\n : typeof selectedValue !== \"undefined\"\n ? value === selectedValue\n : undefined\n }\n value={value}\n aria-describedby={helpLabel ? supportId : undefined}\n />\n <SupportLabel\n {...supportLabelProps}\n label={helpLabel}\n labelType={\"help\"}\n id={supportId}\n density={density}\n />\n </>\n );\n },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","density","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"sSA+BaA,EAAcC,EAAAA,YACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAE9DG,MAAOI,EACPC,QAAAA,KACGC,GACHC,~~EAAqBA~~,~~uBACnBC,~~EAAYC,QAAM,qBAExB,OAEQC,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,IACOR,KACAH,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACzBJ,IAAUI,OACV,EAEVJ,MAAAA,EACA,mBAAkBE,EAAYM,OAAY,IAE9CK,EAAAA,IAACE,EAAAA,aAAA,IACOd,EACJe,MAAOd,EACPe,UAAW,OACXC,GAAIV,EACJH,QAAAA,MAER,IAKZV,EAAYwB,YAAc"}
1	+ {"version":3,"file":"RadioButton.cjs","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, {\n forwardRef,\n InputHTMLAttributes,\n ChangeEventHandler,\n ReactNode,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\n SupportLabel,\n SupportLabelProps,\n} from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\n\nexport interface RadioButtonProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n children?: ReactNode;\n value: string;\n /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form /\n name?: string;\n /* Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /* @deprecated Bruk children */\n label?: ReactNode;\n helpLabel?: ReactNode;\n supportLabelProps?: Omit<\n SupportLabelProps,\n \"id\" \| \"errorLabel\" \| \"helpLabel\" \| \"density\"\n >;\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n (props, ref) => {\n const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n const {\n value: selectedValue,\n density,\n ...context\n } = useRadioGroupContext();\n const supportId = useId(\"jkl-support-label\");\n\n return (\n <>\n <BaseRadioButton\n {...context}\n {...rest}\n ref={ref}\n checked={\n typeof checked !== \"undefined\"\n ? checked\n : typeof selectedValue !== \"undefined\"\n ? value === selectedValue\n : undefined\n }\n value={value}\n aria-describedby={helpLabel ? supportId : undefined}\n />\n <SupportLabel\n {...supportLabelProps}\n label={helpLabel}\n labelType={\"help\"}\n id={supportId}\n density={density}\n />\n </>\n );\n },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","density","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"sSA+BaA,EAAcC,EAAAA,YACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAE9DG,MAAOI,EACPC,QAAAA,KACGC,GACHC,yBACEC,EAAYC,QAAM,qBAExB,OAEQC,EAAAA,KAAAC,WAAA,CAAAC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,IACOR,KACAH,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACzBJ,IAAUI,OACV,EAEVJ,MAAAA,EACA,mBAAkBE,EAAYM,OAAY,IAE9CK,EAAAA,IAACE,EAAAA,aAAA,IACOd,EACJe,MAAOd,EACPe,UAAW,OACXC,GAAIV,EACJH,QAAAA,MAER,IAKZV,EAAYwB,YAAc"}

package/build/cjs/components/radio-button/RadioButtonGroup.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.cjs","sources":["../../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { FieldGroup, type FieldGroupProps } from \"../input-group/FieldGroup.js\";\nimport { RadioGroupContextProvider } from \"./radioGroupContext.js\";\n\nexport interface RadioButtonGroupProps\n extends Omit<FieldGroupProps, \"onChange\"> {\n legend: string;\n /** Alle RadioButton i gruppen får dette som name. /\n name?: string;\n /* Om gruppen skal være controlled setter du den valgte verdien her. /\n value?: string;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n helpLabel?: string;\n /\n Erstatter hjelpeteksten (hvis noen) med en feilmelding.\n * Merker samtidig alle RadioButton i gruppen som ugyldige.\n /\n errorLabel?: string;\n /\n Setter inline-modifieren på alle RadioButton i gruppen.\n * @default false\n */\n inline?: boolean;\n density?: Density;\n}\n\nexport const RadioButtonGroup: FC<RadioButtonGroupProps> = (props) => {\n const {\n name,\n value,\n onChange,\n errorLabel,\n inline = false,\n density,\n labelProps = { variant: \"medium\" },\n ...rest\n } = props;\n\n return (\n <RadioGroupContextProvider\n state={{\n onChange,\n value,\n name,\n invalid: Boolean(errorLabel),\n inline,\n density,\n }}\n >\n <FieldGroup\n errorLabel={errorLabel}\n labelProps={labelProps}\n data-testid=\"jkl-radio-button-group\"\n density={density}\n {...rest}\n role=\"radiogroup\"\n aria-invalid={Boolean(errorLabel)}\n />\n </RadioGroupContextProvider>\n );\n};\n"],"names":["props","name","value","onChange","errorLabel","inline","density","labelProps","variant","rest","jsx","RadioGroupContextProvider","state","invalid","children","FieldGroup","role"],"mappings":"8NA2B4DA,IAClD,MACFC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,OAAAA,GAAS,EACTC,QAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAS,aACrBC,GACHT,EAGA,OAAAU,EAAAA,IAACC,EAAAA,0BAAA,CACGC,MAAO,CACHT,SAAAA,EACAD,MAAAA,EACAD,KAAAA,EACAY,UAAiBT,EACjBC,OAAAA,EACAC,QAAAA,GAGJQ,SAAAJ,EAAAA,IAACK,EAAAA,WAAA,CACGX,WAAAA,EACAG,WAAAA,EACA,cAAY,yBACZD,QAAAA,KACIG,EACJO,KAAK,aACL,iBAAsBZ,~~KAC1B~~"}
1	+ {"version":3,"file":"RadioButtonGroup.cjs","sources":["../../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { FieldGroup, type FieldGroupProps } from \"../input-group/FieldGroup.js\";\nimport { RadioGroupContextProvider } from \"./radioGroupContext.js\";\n\nexport interface RadioButtonGroupProps\n extends Omit<FieldGroupProps, \"onChange\"> {\n legend: string;\n /** Alle RadioButton i gruppen får dette som name. /\n name?: string;\n /* Om gruppen skal være controlled setter du den valgte verdien her. /\n value?: string;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n helpLabel?: string;\n /\n Erstatter hjelpeteksten (hvis noen) med en feilmelding.\n * Merker samtidig alle RadioButton i gruppen som ugyldige.\n /\n errorLabel?: string;\n /\n Setter inline-modifieren på alle RadioButton i gruppen.\n * @default false\n */\n inline?: boolean;\n density?: Density;\n}\n\nexport const RadioButtonGroup: FC<RadioButtonGroupProps> = (props) => {\n const {\n name,\n value,\n onChange,\n errorLabel,\n inline = false,\n density,\n labelProps = { variant: \"medium\" },\n ...rest\n } = props;\n\n return (\n <RadioGroupContextProvider\n state={{\n onChange,\n value,\n name,\n invalid: Boolean(errorLabel),\n inline,\n density,\n }}\n >\n <FieldGroup\n errorLabel={errorLabel}\n labelProps={labelProps}\n data-testid=\"jkl-radio-button-group\"\n density={density}\n {...rest}\n role=\"radiogroup\"\n aria-invalid={Boolean(errorLabel)}\n />\n </RadioGroupContextProvider>\n );\n};\n"],"names":["props","name","value","onChange","errorLabel","inline","density","labelProps","variant","rest","jsx","RadioGroupContextProvider","state","invalid","children","FieldGroup","role"],"mappings":"8NA2B4DA,IAClD,MACFC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,OAAAA,GAAS,EACTC,QAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAS,aACrBC,GACHT,EAGA,OAAAU,EAAAA,IAACC,EAAAA,0BAAA,CACGC,MAAO,CACHT,SAAAA,EACAD,MAAAA,EACAD,KAAAA,EACAY,UAAiBT,EACjBC,OAAAA,EACAC,QAAAA,GAGJQ,SAAAJ,EAAAA,IAACK,EAAAA,WAAA,CACGX,WAAAA,EACAG,WAAAA,EACA,cAAY,yBACZD,QAAAA,KACIG,EACJO,KAAK,aACL,iBAAsBZ,KAE9B"}

package/build/cjs/components/select/NativeSelect.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NativeSelect.cjs","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\n\nexport interface NativeSelectProps\n extends Omit<InputGroupProps, \"children\">,\n SelectHTMLAttributes<HTMLSelectElement> {\n /*\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Setter inn et placeholderelement som vises når ingenting er valgt i nedtrekkslisten.\n * @default \"Velg\"\n */\n placeholder?: string;\n items: Array<string \| ValuePair>;\n selectClassName?: string;\n width?: string;\n}\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n invalid,\n items,\n labelProps,\n placeholder = \"Velg\",\n selectClassName,\n supportLabelProps,\n tooltip,\n value,\n width,\n ...rest\n } = props;\n\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n\n return (\n <InputGroup\n {...inputGroupProps}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n <select\n ref={ref}\n className={clsx(\n \"jkl-select__button\",\n selectClassName,\n {\n \"jkl-select__button--active-value\": !!value,\n },\n )}\n defaultValue={value ? undefined : \"\"}\n value={value}\n {...inputProps}\n {...rest}\n >\n {placeholder && !value && (\n <option disabled value=\"\">\n {placeholder}\n </option>\n )}\n {items.map(getValuePair).map((item) => (\n <option\n data-testid=\"jkl-select__option\"\n className=\"jkl-select__option\"\n key={item.value}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltip","value","width","rest","inputGroupProps","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"oUAwBaA,EAAeC,EAAAA,YACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHjB,EAEEkB,EAAkB,CACpBhB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,QAAAA,GAIA,OAAAK,EAAAA,IAACC,EAAAA,WAAA,IACOF,EACJ,cAAY,aACZf,UAAWkB,EAAAA,KAAK,aAAclB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Cc,OAASC,GACLC,EAAAA,KAAC,MAAA,CACGrB,UAAU,4BACVsB,MAAO,CAAET,MAAAA,GAETU,SAAA,CAAAF,EAAAA,KAAC,SAAA,CACGvB,IAAAA,EACAE,UAAWkB,EAAAA,KACP,qBACAT,EACA,CACI,qCAAsCG,IAG9CY,aAAcZ,OAAQ,EAAY,GAClCA,MAAAA,KACIQ,KACAN,EAEHS,SAAA,CAAef,IAACI,GACZI,EAAAA,IAAA,SAAA,CAAOS,UAAQ,EAACb,MAAM,GAClBW,SACLf,IAEHF,EAAMoB,IAAIC,EAAYA,cAAED,KAAKE,GAC1BZ,EAAAA,IAAC,SAAA,CACG,cAAY,qBACZhB,UAAU,qBAEVY,MAAOgB,EAAKhB,MAEXW,SAAKK,EAAA7B,OAHD6B,EAAKhB,YAOtBI,EAAAA,IAACa,EAAAA,sBAAA,CACGC,QAAQ,SACRC,cAAY,EACZ/B,UAAU,~~0BAElB~~,~~IAOpBL~~,EAAaqC,YAAc"}
1	+ {"version":3,"file":"NativeSelect.cjs","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\n\nexport interface NativeSelectProps\n extends Omit<InputGroupProps, \"children\">,\n SelectHTMLAttributes<HTMLSelectElement> {\n /*\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Setter inn et placeholderelement som vises når ingenting er valgt i nedtrekkslisten.\n * @default \"Velg\"\n */\n placeholder?: string;\n items: Array<string \| ValuePair>;\n selectClassName?: string;\n width?: string;\n}\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n invalid,\n items,\n labelProps,\n placeholder = \"Velg\",\n selectClassName,\n supportLabelProps,\n tooltip,\n value,\n width,\n ...rest\n } = props;\n\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n\n return (\n <InputGroup\n {...inputGroupProps}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n <select\n ref={ref}\n className={clsx(\n \"jkl-select__button\",\n selectClassName,\n {\n \"jkl-select__button--active-value\": !!value,\n },\n )}\n defaultValue={value ? undefined : \"\"}\n value={value}\n {...inputProps}\n {...rest}\n >\n {placeholder && !value && (\n <option disabled value=\"\">\n {placeholder}\n </option>\n )}\n {items.map(getValuePair).map((item) => (\n <option\n data-testid=\"jkl-select__option\"\n className=\"jkl-select__option\"\n key={item.value}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltip","value","width","rest","inputGroupProps","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"oUAwBaA,EAAeC,EAAAA,YACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHjB,EAEEkB,EAAkB,CACpBhB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,QAAAA,GAIA,OAAAK,EAAAA,IAACC,EAAAA,WAAA,IACOF,EACJ,cAAY,aACZf,UAAWkB,EAAAA,KAAK,aAAclB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Cc,OAASC,GACLC,EAAAA,KAAC,MAAA,CACGrB,UAAU,4BACVsB,MAAO,CAAET,MAAAA,GAETU,SAAA,CAAAF,EAAAA,KAAC,SAAA,CACGvB,IAAAA,EACAE,UAAWkB,EAAAA,KACP,qBACAT,EACA,CACI,qCAAsCG,IAG9CY,aAAcZ,OAAQ,EAAY,GAClCA,MAAAA,KACIQ,KACAN,EAEHS,SAAA,CAAef,IAACI,GACZI,EAAAA,IAAA,SAAA,CAAOS,UAAQ,EAACb,MAAM,GAClBW,SACLf,IAEHF,EAAMoB,IAAIC,EAAYA,cAAED,KAAKE,GAC1BZ,EAAAA,IAAC,SAAA,CACG,cAAY,qBACZhB,UAAU,qBAEVY,MAAOgB,EAAKhB,MAEXW,SAAKK,EAAA7B,OAHD6B,EAAKhB,YAOtBI,EAAAA,IAACa,EAAAA,sBAAA,CACGC,QAAQ,SACRC,cAAY,EACZ/B,UAAU,0BAI1B,IAKZL,EAAaqC,YAAc"}

package/build/cjs/components/select/Select.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n CSSProperties,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport type { PopupTipProps } from \"../tooltip/PopupTip.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\n\nexport interface SelectPartialChangeEvent\n extends Partial<Omit<ChangeEvent<HTMLSelectElement>, \"target\">> {\n /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change /\n type: \"change\" \| \"blur\";\n target: {\n /* Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret /\n name: string;\n value: string;\n };\n}\n\nexport type SelectChangeEventHandler = (\n event: SelectPartialChangeEvent,\n) => void;\n\ninterface Option extends ValuePair {\n visible: boolean;\n}\n\nexport interface SelectProps\n extends Omit<InputGroupProps, \"children\">,\n DataTestAutoId {\n id?: string;\n name: string;\n label: string;\n labelProps?: Omit<\n LabelProps,\n \"children\" \| \"density\" \| \"htmlFor\" \| \"standAlone\"\n >;\n items: Array<string \| ValuePair>;\n /\n @default false\n /\n inline?: boolean;\n /\n @default \"Velg\"\n /\n defaultPrompt?: string;\n className?: string;\n value?: string;\n helpLabel?: string;\n errorLabel?: string;\n /\n @default false\n /\n searchable?:\n \| boolean\n \| ((searchValue: string, searchItem: string \| ValuePair) => boolean);\n density?: Density;\n width?: string;\n onChange?: SelectChangeEventHandler;\n onBlur?: SelectChangeEventHandler;\n onFocus?: SelectChangeEventHandler;\n /\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Hvor mange valg skal vises i listen før den begynner å scrolle.\n * @default 5\n /\n maxShownOptions?: number;\n}\n\nconst noop = () => {\n return;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedSelectRef) => {\n const {\n id,\n name,\n items,\n value,\n label,\n labelProps,\n onChange,\n onBlur,\n onFocus,\n className,\n helpLabel,\n errorLabel,\n invalid,\n searchable = false,\n inline = false,\n defaultPrompt = \"Velg\",\n density,\n width,\n maxShownOptions = 5,\n style,\n tooltip,\n ...rest\n } = props;\n\n const listId = useId(id \|\| \"jkl-select\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const searchInputId = `${listId}_search-input`;\n\n const [dropdownIsShown, setShown] = useState(false);\n const toggleListVisibility = useCallback(() => {\n setShown((previousValue) => !previousValue);\n }, []);\n\n /// Søk\n\n const isSearchable = Boolean(searchable);\n const showSearchInputField = isSearchable && dropdownIsShown;\n const [searchValue, setSearchValue] = useState(\"\");\n const searchFn = useCallback(\n (item: ValuePair) => {\n if (\n item.label.toLowerCase().includes(searchValue.toLowerCase())\n ) {\n return true;\n }\n\n if (typeof searchable === \"function\") {\n return searchable(searchValue, item);\n }\n\n return false;\n },\n [searchable, searchValue],\n );\n const visibleItems: Option[] = useMemo(\n () =>\n items.map(getValuePair).map((item) => {\n const visible =\n !isSearchable \|\| searchValue === \"\" \|\| searchFn(item);\n return { ...item, visible };\n }),\n [items, isSearchable, searchValue, searchFn],\n );\n const valueIsInItems: boolean = useMemo(() => {\n if (typeof value === \"undefined\") {\n return false;\n }\n return items.some((item) =>\n typeof item === \"string\"\n ? item === value\n : item.value === value,\n );\n }, [value, items]);\n\n /// Valg av <option>\n\n const [selectedValue, setSelectedValue] = useState<string>(\n valueIsInItems && value !== undefined ? value : \"\",\n );\n const hasSelectedValue = selectedValue !== \"\";\n const selectedValueLabel = useMemo(\n () =>\n visibleItems.find((item) => item.value === selectedValue)\n ?.label \|\| defaultPrompt,\n [visibleItems, selectedValue, defaultPrompt],\n );\n\n const selectRef = useRef<HTMLSelectElement \| null>(null);\n // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n const unifiedSelectRef = useCallback(\n (instance: HTMLSelectElement \| null) => {\n selectRef.current = instance;\n if (forwardedSelectRef) {\n if (typeof forwardedSelectRef === \"function\") {\n forwardedSelectRef(instance);\n } else {\n forwardedSelectRef.current = instance;\n }\n }\n if (instance) {\n setSelectedValue(instance.value);\n }\n },\n [selectRef, forwardedSelectRef],\n );\n\n const previousValue = usePreviousValue(value);\n useEffect(() => {\n if (value === previousValue) {\n return;\n }\n if (typeof value === \"undefined\" \|\| !valueIsInItems) {\n setSelectedValue(\"\");\n } else {\n setSelectedValue(value);\n }\n }, [setSelectedValue, value, previousValue, valueIsInItems]);\n\n const selectOption = useCallback(\n (item: Option) => {\n const nextValue = item.value;\n setSearchValue(\"\");\n setSelectedValue(nextValue);\n toggleListVisibility();\n buttonRef.current?.focus();\n },\n [setSearchValue, setSelectedValue, toggleListVisibility],\n );\n\n // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n const previousSelectedValue = usePreviousValue(selectedValue);\n useEffect(() => {\n // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n if (\n typeof previousSelectedValue === \"undefined\" \|\|\n previousSelectedValue === selectedValue \|\|\n selectedValue === value\n ) {\n return;\n }\n if (onChange) {\n onChange({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n if (selectRef.current) {\n selectRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n /// Fokushåndtering\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n const searchFieldRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleFocusPlacement = useCallback(\n (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n if (isOpen && !isSearchable) {\n const listElement = ref.current;\n if (listElement) {\n focusSelected(listElement, selectedValue);\n }\n } else if (isOpen) {\n if (searchFieldRef.current) {\n searchFieldRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && buttonRef.current) {\n buttonRef.current.focus();\n }\n }\n },\n [isSearchable, selectedValue],\n );\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n dropdownIsShown,\n {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n },\n );\n\n useListNavigation({ ref: dropdownRef });\n\n const close = useCallback(() => {\n if (isSearchable) {\n setSearchValue(\"\");\n }\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: { name, value: selectedValue },\n });\n selectRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShown(false);\n }, [\n onBlur,\n setSearchValue,\n setShown,\n isSearchable,\n name,\n selectedValue,\n ]);\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLButtonElement \| HTMLInputElement>) => {\n const componentRootElement = componentRootElementRef.current;\n // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n // https://github.com/facebook/react/issues/2011\n // This might be fixed in react 17. Se issue above.\n const nextFocusIsInsideComponent =\n componentRootElement &&\n componentRootElement.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n close();\n }\n },\n [close],\n );\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n focusInsideRef.current = true;\n }\n }, [onFocus, selectedValue, name]);\n\n const handleMouseOver = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n },\n [],\n );\n\n // Handle focus and blur of hidden select element\n useEffect(() => {\n const select = selectRef.current;\n const searchField = searchFieldRef.current;\n const button = buttonRef.current;\n const componentRootElement = componentRootElementRef.current;\n\n select?.addEventListener(\"focus\", () => {\n showSearchInputField ? searchField?.focus() : button?.focus();\n });\n select?.addEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n\n return () => {\n select?.removeEventListener(\"focus\", () => {\n showSearchInputField\n ? searchField?.focus()\n : button?.focus();\n });\n select?.removeEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(\n ev.relatedTarget as Node,\n ) &&\n ev.preventDefault();\n });\n };\n }, [showSearchInputField]);\n\n /// Tastaturnavigasjon\n\n // Add support for opening dropdown with arrowkey down as expected from native select\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (\n (e.key === \"ArrowDown\" \|\| e.key === \" \") &&\n !dropdownIsShown\n ) {\n e.preventDefault();\n e.stopPropagation();\n setShown(true);\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n }\n },\n [setShown, dropdownIsShown],\n );\n\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n\n const listElement = dropdownRef.current;\n if (listElement) {\n if (isSearchable) {\n // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n // den valgte verdien.\n focusSelected(listElement, undefined);\n } else {\n focusSelected(listElement, selectedValue);\n }\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n } else if (e.key === \"Tab\" && !e.shiftKey) {\n const listElement = dropdownRef.current;\n if (listElement) {\n e.preventDefault();\n e.stopPropagation();\n focusSelected(listElement, selectedValue);\n }\n } else if (e.key === \"Enter\" && dropdownIsShown) {\n // Should not propagate Enter keyevent because form might submit\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [\n setShown,\n dropdownRef,\n selectedValue,\n isSearchable,\n dropdownIsShown,\n ],\n );\n\n // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey && searchFieldRef.current) {\n searchFieldRef.current.focus();\n } else if (buttonRef.current) {\n // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n setSelectedValue(e.currentTarget.value);\n setShown(false);\n buttonRef.current.focus();\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchFieldRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchFieldRef.current\n ) {\n searchFieldRef.current.focus();\n }\n }\n }\n },\n [setShown, dropdownRef],\n );\n\n // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && dropdownIsShown) {\n setShown(false);\n }\n };\n if (typeof window !== \"undefined\" && dropdownIsShown) {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\") {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [setShown, dropdownIsShown]);\n\n return (\n <>\n <select\n name={name}\n tabIndex={-1}\n data-testid=\"jkl-native-select\"\n className=\"jkl-sr-only\"\n aria-hidden\n ref={unifiedSelectRef}\n value={selectedValue}\n onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n >\n <option value=\"\"></option>{\" \"}\n {/ Tom option må være et valg, ellers vil <select> alltid ha en value /}\n {visibleItems.map((item) => (\n <option\n key={`${listId}-opt-${item.value}`}\n hidden={!item.visible}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <InputGroup\n ref={componentRootElementRef}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--open\":\n dropdownIsShown &&\n visibleItems.some((item) => item.visible),\n \"jkl-select--no-value\": !hasSelectedValue,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n tooltip={\n tooltip && React.isValidElement<PopupTipProps>(tooltip)\n ? React.cloneElement(tooltip, {\n triggerProps: {\n ...tooltip.props.triggerProps,\n onFocus: (\n e: FocusEvent<HTMLButtonElement>,\n ) => {\n tooltip.props.triggerProps?.onFocus?.(\n e,\n );\n close();\n },\n },\n })\n : null\n }\n {...rest}\n id={isSearchable ? searchInputId : buttonId}\n style={\n {\n [\"--jkl-select-max-shown-options\"]: maxShownOptions,\n ...style,\n } as CSSProperties\n }\n density={density}\n label={label}\n labelProps={{\n id: labelId,\n srOnly: inline,\n ...labelProps,\n htmlFor: isSearchable ? searchInputId : buttonId,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n render={({\n \"aria-invalid\": ariaInvalid,\n ...inputProps\n }) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n {isSearchable && (\n <input\n {...inputProps}\n aria-invalid={ariaInvalid}\n id={searchInputId}\n hidden={!showSearchInputField}\n ref={searchFieldRef}\n placeholder=\"Søk\"\n value={searchValue}\n onChange={(e) =>\n setSearchValue(e.target.value)\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={listId}\n aria-expanded={dropdownIsShown}\n role=\"combobox\"\n onKeyDown={handleSearchOnKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onClick={(e) => {\n e.stopPropagation();\n }}\n />\n )}\n {/ eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n <button\n // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n aria-invalid={ariaInvalid}\n {...inputProps}\n id={buttonId}\n ref={buttonRef}\n hidden={showSearchInputField}\n type=\"button\"\n name={`${name}-btn`}\n className={clsx(\"jkl-select__button\", {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n })}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel \|\| \"Velg\"\n },${label}`}\n aria-expanded={dropdownIsShown}\n aria-controls={listId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOnKeyDown}\n onClick={toggleListVisibility}\n onMouseDown={(e) => {\n // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n // https://twitter.com/MilesSorce/status/1278762360669265925\n e.preventDefault();\n buttonRef.current?.focus();\n }}\n >\n {selectedValueLabel}\n </button>\n <div\n id={listId}\n ref={dropdownRef}\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n hidden={\n !dropdownIsShown \|\|\n visibleItems.every((item) => !item.visible)\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n >\n {visibleItems.map((item, i) =>\n // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n item.visible ? (\n <button\n key={`${listId}-${item.value}`}\n hidden={!item.visible}\n type=\"button\"\n id={`${listId}__${toLower(\n item.value,\n )}`}\n className=\"jkl-select__option\"\n data-testid=\"jkl-select__option\"\n aria-selected={\n item.value === selectedValue\n }\n role=\"option\"\n value={item.value}\n data-testautoid={`jkl-select__option-${i}`}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={handleMouseOver}\n >\n {item.label}\n {item.description ? (\n <span className=\"jkl-select__option-description\">\n {item.description}\n </span>\n ) : null}\n </button>\n ) : null,\n )}\n </div>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!dropdownIsShown}\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n </>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","_b","call","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n CSSProperties,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport type { PopupTipProps } from \"../tooltip/PopupTip.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\n\nexport interface SelectPartialChangeEvent\n extends Partial<Omit<ChangeEvent<HTMLSelectElement>, \"target\">> {\n /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change /\n type: \"change\" \| \"blur\";\n target: {\n /* Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret /\n name: string;\n value: string;\n };\n}\n\nexport type SelectChangeEventHandler = (\n event: SelectPartialChangeEvent,\n) => void;\n\ninterface Option extends ValuePair {\n visible: boolean;\n}\n\nexport interface SelectProps\n extends Omit<InputGroupProps, \"children\">,\n DataTestAutoId {\n id?: string;\n name: string;\n label: string;\n labelProps?: Omit<\n LabelProps,\n \"children\" \| \"density\" \| \"htmlFor\" \| \"standAlone\"\n >;\n items: Array<string \| ValuePair>;\n /\n @default false\n /\n inline?: boolean;\n /\n @default \"Velg\"\n /\n defaultPrompt?: string;\n className?: string;\n value?: string;\n helpLabel?: string;\n errorLabel?: string;\n /\n @default false\n /\n searchable?:\n \| boolean\n \| ((searchValue: string, searchItem: string \| ValuePair) => boolean);\n density?: Density;\n width?: string;\n onChange?: SelectChangeEventHandler;\n onBlur?: SelectChangeEventHandler;\n onFocus?: SelectChangeEventHandler;\n /\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Hvor mange valg skal vises i listen før den begynner å scrolle.\n * @default 5\n /\n maxShownOptions?: number;\n}\n\nconst noop = () => {\n return;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedSelectRef) => {\n const {\n id,\n name,\n items,\n value,\n label,\n labelProps,\n onChange,\n onBlur,\n onFocus,\n className,\n helpLabel,\n errorLabel,\n invalid,\n searchable = false,\n inline = false,\n defaultPrompt = \"Velg\",\n density,\n width,\n maxShownOptions = 5,\n style,\n tooltip,\n ...rest\n } = props;\n\n const listId = useId(id \|\| \"jkl-select\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const searchInputId = `${listId}_search-input`;\n\n const [dropdownIsShown, setShown] = useState(false);\n const toggleListVisibility = useCallback(() => {\n setShown((previousValue) => !previousValue);\n }, []);\n\n /// Søk\n\n const isSearchable = Boolean(searchable);\n const showSearchInputField = isSearchable && dropdownIsShown;\n const [searchValue, setSearchValue] = useState(\"\");\n const searchFn = useCallback(\n (item: ValuePair) => {\n if (\n item.label.toLowerCase().includes(searchValue.toLowerCase())\n ) {\n return true;\n }\n\n if (typeof searchable === \"function\") {\n return searchable(searchValue, item);\n }\n\n return false;\n },\n [searchable, searchValue],\n );\n const visibleItems: Option[] = useMemo(\n () =>\n items.map(getValuePair).map((item) => {\n const visible =\n !isSearchable \|\| searchValue === \"\" \|\| searchFn(item);\n return { ...item, visible };\n }),\n [items, isSearchable, searchValue, searchFn],\n );\n const valueIsInItems: boolean = useMemo(() => {\n if (typeof value === \"undefined\") {\n return false;\n }\n return items.some((item) =>\n typeof item === \"string\"\n ? item === value\n : item.value === value,\n );\n }, [value, items]);\n\n /// Valg av <option>\n\n const [selectedValue, setSelectedValue] = useState<string>(\n valueIsInItems && value !== undefined ? value : \"\",\n );\n const hasSelectedValue = selectedValue !== \"\";\n const selectedValueLabel = useMemo(\n () =>\n visibleItems.find((item) => item.value === selectedValue)\n ?.label \|\| defaultPrompt,\n [visibleItems, selectedValue, defaultPrompt],\n );\n\n const selectRef = useRef<HTMLSelectElement \| null>(null);\n // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n const unifiedSelectRef = useCallback(\n (instance: HTMLSelectElement \| null) => {\n selectRef.current = instance;\n if (forwardedSelectRef) {\n if (typeof forwardedSelectRef === \"function\") {\n forwardedSelectRef(instance);\n } else {\n forwardedSelectRef.current = instance;\n }\n }\n if (instance) {\n setSelectedValue(instance.value);\n }\n },\n [selectRef, forwardedSelectRef],\n );\n\n const previousValue = usePreviousValue(value);\n useEffect(() => {\n if (value === previousValue) {\n return;\n }\n if (typeof value === \"undefined\" \|\| !valueIsInItems) {\n setSelectedValue(\"\");\n } else {\n setSelectedValue(value);\n }\n }, [setSelectedValue, value, previousValue, valueIsInItems]);\n\n const selectOption = useCallback(\n (item: Option) => {\n const nextValue = item.value;\n setSearchValue(\"\");\n setSelectedValue(nextValue);\n toggleListVisibility();\n buttonRef.current?.focus();\n },\n [setSearchValue, setSelectedValue, toggleListVisibility],\n );\n\n // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n const previousSelectedValue = usePreviousValue(selectedValue);\n useEffect(() => {\n // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n if (\n typeof previousSelectedValue === \"undefined\" \|\|\n previousSelectedValue === selectedValue \|\|\n selectedValue === value\n ) {\n return;\n }\n if (onChange) {\n onChange({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n if (selectRef.current) {\n selectRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n /// Fokushåndtering\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n const searchFieldRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleFocusPlacement = useCallback(\n (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n if (isOpen && !isSearchable) {\n const listElement = ref.current;\n if (listElement) {\n focusSelected(listElement, selectedValue);\n }\n } else if (isOpen) {\n if (searchFieldRef.current) {\n searchFieldRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && buttonRef.current) {\n buttonRef.current.focus();\n }\n }\n },\n [isSearchable, selectedValue],\n );\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n dropdownIsShown,\n {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n },\n );\n\n useListNavigation({ ref: dropdownRef });\n\n const close = useCallback(() => {\n if (isSearchable) {\n setSearchValue(\"\");\n }\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: { name, value: selectedValue },\n });\n selectRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShown(false);\n }, [\n onBlur,\n setSearchValue,\n setShown,\n isSearchable,\n name,\n selectedValue,\n ]);\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLButtonElement \| HTMLInputElement>) => {\n const componentRootElement = componentRootElementRef.current;\n // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n // https://github.com/facebook/react/issues/2011\n // This might be fixed in react 17. Se issue above.\n const nextFocusIsInsideComponent =\n componentRootElement &&\n componentRootElement.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n close();\n }\n },\n [close],\n );\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n focusInsideRef.current = true;\n }\n }, [onFocus, selectedValue, name]);\n\n const handleMouseOver = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n },\n [],\n );\n\n // Handle focus and blur of hidden select element\n useEffect(() => {\n const select = selectRef.current;\n const searchField = searchFieldRef.current;\n const button = buttonRef.current;\n const componentRootElement = componentRootElementRef.current;\n\n select?.addEventListener(\"focus\", () => {\n showSearchInputField ? searchField?.focus() : button?.focus();\n });\n select?.addEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n\n return () => {\n select?.removeEventListener(\"focus\", () => {\n showSearchInputField\n ? searchField?.focus()\n : button?.focus();\n });\n select?.removeEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(\n ev.relatedTarget as Node,\n ) &&\n ev.preventDefault();\n });\n };\n }, [showSearchInputField]);\n\n /// Tastaturnavigasjon\n\n // Add support for opening dropdown with arrowkey down as expected from native select\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (\n (e.key === \"ArrowDown\" \|\| e.key === \" \") &&\n !dropdownIsShown\n ) {\n e.preventDefault();\n e.stopPropagation();\n setShown(true);\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n }\n },\n [setShown, dropdownIsShown],\n );\n\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n\n const listElement = dropdownRef.current;\n if (listElement) {\n if (isSearchable) {\n // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n // den valgte verdien.\n focusSelected(listElement, undefined);\n } else {\n focusSelected(listElement, selectedValue);\n }\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n } else if (e.key === \"Tab\" && !e.shiftKey) {\n const listElement = dropdownRef.current;\n if (listElement) {\n e.preventDefault();\n e.stopPropagation();\n focusSelected(listElement, selectedValue);\n }\n } else if (e.key === \"Enter\" && dropdownIsShown) {\n // Should not propagate Enter keyevent because form might submit\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [\n setShown,\n dropdownRef,\n selectedValue,\n isSearchable,\n dropdownIsShown,\n ],\n );\n\n // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey && searchFieldRef.current) {\n searchFieldRef.current.focus();\n } else if (buttonRef.current) {\n // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n setSelectedValue(e.currentTarget.value);\n setShown(false);\n buttonRef.current.focus();\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchFieldRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchFieldRef.current\n ) {\n searchFieldRef.current.focus();\n }\n }\n }\n },\n [setShown, dropdownRef],\n );\n\n // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && dropdownIsShown) {\n setShown(false);\n }\n };\n if (typeof window !== \"undefined\" && dropdownIsShown) {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\") {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [setShown, dropdownIsShown]);\n\n return (\n <>\n <select\n name={name}\n tabIndex={-1}\n data-testid=\"jkl-native-select\"\n className=\"jkl-sr-only\"\n aria-hidden\n ref={unifiedSelectRef}\n value={selectedValue}\n onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n >\n <option value=\"\"></option>{\" \"}\n {/ Tom option må være et valg, ellers vil <select> alltid ha en value /}\n {visibleItems.map((item) => (\n <option\n key={`${listId}-opt-${item.value}`}\n hidden={!item.visible}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <InputGroup\n ref={componentRootElementRef}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--open\":\n dropdownIsShown &&\n visibleItems.some((item) => item.visible),\n \"jkl-select--no-value\": !hasSelectedValue,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n tooltip={\n tooltip && React.isValidElement<PopupTipProps>(tooltip)\n ? React.cloneElement(tooltip, {\n triggerProps: {\n ...tooltip.props.triggerProps,\n onFocus: (\n e: FocusEvent<HTMLButtonElement>,\n ) => {\n tooltip.props.triggerProps?.onFocus?.(\n e,\n );\n close();\n },\n },\n })\n : null\n }\n {...rest}\n id={isSearchable ? searchInputId : buttonId}\n style={\n {\n [\"--jkl-select-max-shown-options\"]: maxShownOptions,\n ...style,\n } as CSSProperties\n }\n density={density}\n label={label}\n labelProps={{\n id: labelId,\n srOnly: inline,\n ...labelProps,\n htmlFor: isSearchable ? searchInputId : buttonId,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n render={({\n \"aria-invalid\": ariaInvalid,\n ...inputProps\n }) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n {isSearchable && (\n <input\n {...inputProps}\n aria-invalid={ariaInvalid}\n id={searchInputId}\n hidden={!showSearchInputField}\n ref={searchFieldRef}\n placeholder=\"Søk\"\n value={searchValue}\n onChange={(e) =>\n setSearchValue(e.target.value)\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={listId}\n aria-expanded={dropdownIsShown}\n role=\"combobox\"\n onKeyDown={handleSearchOnKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onClick={(e) => {\n e.stopPropagation();\n }}\n />\n )}\n {/ eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n <button\n // Nei dette er ikke i henhold til speccen, men VoiceOver leser den likevel og det er oppførselen vi ønsker\n aria-invalid={ariaInvalid}\n {...inputProps}\n id={buttonId}\n ref={buttonRef}\n hidden={showSearchInputField}\n type=\"button\"\n name={`${name}-btn`}\n className={clsx(\"jkl-select__button\", {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n })}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel \|\| \"Velg\"\n },${label}`}\n aria-expanded={dropdownIsShown}\n aria-controls={listId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOnKeyDown}\n onClick={toggleListVisibility}\n onMouseDown={(e) => {\n // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n // https://twitter.com/MilesSorce/status/1278762360669265925\n e.preventDefault();\n buttonRef.current?.focus();\n }}\n >\n {selectedValueLabel}\n </button>\n <div\n id={listId}\n ref={dropdownRef}\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n hidden={\n !dropdownIsShown \|\|\n visibleItems.every((item) => !item.visible)\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n >\n {visibleItems.map((item, i) =>\n // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n item.visible ? (\n <button\n key={`${listId}-${item.value}`}\n hidden={!item.visible}\n type=\"button\"\n id={`${listId}__${toLower(\n item.value,\n )}`}\n className=\"jkl-select__option\"\n data-testid=\"jkl-select__option\"\n aria-selected={\n item.value === selectedValue\n }\n role=\"option\"\n value={item.value}\n data-testautoid={`jkl-select__option-${i}`}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={handleMouseOver}\n >\n {item.label}\n {item.description ? (\n <span className=\"jkl-select__option-description\">\n {item.description}\n </span>\n ) : null}\n </button>\n ) : null,\n )}\n </div>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!dropdownIsShown}\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n </>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","_b","call","srOnly","htmlFor","render","ariaInvalid","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}

package/build/cjs/components/system-message/SystemMessage.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\n\ntype messageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\nexport interface SystemMessageProps extends WithChildren {\n id?: string;\n className?: string;\n density?: Density;\n maxContentWidth?: string;\n paddingLeft?: string;\n /** Overstyr standardrollen til meldingen. Om du ønsker å \"skru av\" rollen kan du bruke verdien `none presentation`. */\n role?: string;\n dismissed?: boolean;\n dismissAction?: {\n handleDismiss: () => void;\n buttonTitle?: string;\n };\n}\n\nfunction systemFactory(\n messageType: messageTypes,\n): React.FC<SystemMessageProps> {\n const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n density,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id \|\| \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n \"jkl-system-message--\" + messageType,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n data-density={density}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n data-theme=\"light\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon messageType={messageType} />\n <span className=\"jkl-system-message__message\">\n {children}\n </span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n data-theme=\"light\"\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n };\n return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"sRAwBA,SAASA,EACLC,GA2DO,MAzD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEG,MAAAC,EAAWC,EAAAA,MAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAAA,KACP,qBACA,uBAAyBf,EACzBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAAA,KAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYnB,YAAAA,IACZc,EAAAA,IAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,KAEJ,MAAAD,OAAAA,EAAAA,EAAeY,gBACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,aAAW,QACX,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,~~oBAGnC~~,~~CAKhB~~,CAEa,MAAAK,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBACnB,MAAAC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBACpB,MAAAE,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBACtB,MAAAG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}
1	+ {"version":3,"file":"SystemMessage.cjs","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { DismissButton } from \"../message/DismissButton.js\";\nimport { MessageIcon } from \"./common/MessageIcon.js\";\n\ntype messageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\nexport interface SystemMessageProps extends WithChildren {\n id?: string;\n className?: string;\n density?: Density;\n maxContentWidth?: string;\n paddingLeft?: string;\n /** Overstyr standardrollen til meldingen. Om du ønsker å \"skru av\" rollen kan du bruke verdien `none presentation`. */\n role?: string;\n dismissed?: boolean;\n dismissAction?: {\n handleDismiss: () => void;\n buttonTitle?: string;\n };\n}\n\nfunction systemFactory(\n messageType: messageTypes,\n): React.FC<SystemMessageProps> {\n const SystemMessage: React.FC<SystemMessageProps> = ({\n id,\n className,\n density,\n maxContentWidth,\n paddingLeft,\n role = \"status\",\n dismissed,\n dismissAction,\n children,\n ...rest\n }) => {\n const systemId = useId(id \|\| \"jkl-system-message\", {\n generateSuffix: !id,\n });\n\n return (\n <div\n role={role}\n {...rest}\n id={systemId}\n className={clsx(\n \"jkl-system-message\",\n \"jkl-system-message--\" + messageType,\n className,\n {\n \"jkl-system-message--dismissed\": dismissed,\n },\n )}\n data-density={density}\n >\n <div\n className=\"jkl-system-message__content\"\n data-testid=\"system-message-content\"\n data-theme=\"light\"\n style={{\n maxWidth: maxContentWidth,\n paddingLeft,\n }}\n >\n <MessageIcon messageType={messageType} />\n <span className=\"jkl-system-message__message\">\n {children}\n </span>\n {dismissAction?.handleDismiss && (\n <DismissButton\n data-theme=\"light\"\n aria-controls={systemId}\n className=\"jkl-system-message__dismiss-button\"\n label={dismissAction.buttonTitle \|\| \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n </div>\n );\n };\n return SystemMessage;\n}\n\nexport const InfoSystemMessage = systemFactory(\"info\");\nInfoSystemMessage.displayName = \"InfoSystemMessage\";\nexport const ErrorSystemMessage = systemFactory(\"error\");\nErrorSystemMessage.displayName = \"ErrorSystemMessage\";\nexport const WarningSystemMessage = systemFactory(\"warning\");\nWarningSystemMessage.displayName = \"WarningSystemMessage\";\nexport const SuccessSystemMessage = systemFactory(\"success\");\nSuccessSystemMessage.displayName = \"SuccessSystemMessage\";\n"],"names":["systemFactory","messageType","id","className","density","maxContentWidth","paddingLeft","role","dismissed","dismissAction","children","rest","systemId","useId","generateSuffix","jsx","clsx","jsxs","style","maxWidth","MessageIcon","handleDismiss","DismissButton","label","buttonTitle","onClick","InfoSystemMessage","displayName","ErrorSystemMessage","WarningSystemMessage","SuccessSystemMessage"],"mappings":"sRAwBA,SAASA,EACLC,GA2DO,MAzD6C,EAChDC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEG,MAAAC,EAAWC,EAAAA,MAAMX,GAAM,qBAAsB,CAC/CY,gBAAiBZ,IAIjB,OAAAa,EAAAA,IAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAAA,KACP,qBACA,uBAAyBf,EACzBE,EACA,CACI,gCAAiCK,IAGzC,eAAcJ,EAEdM,SAAAO,EAAAA,KAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,MAACK,EAAAA,aAAYnB,YAAAA,IACZc,EAAAA,IAAA,OAAA,CAAKZ,UAAU,8BACXO,SAAAA,KAEJ,MAAAD,OAAAA,EAAAA,EAAeY,gBACZN,EAAAA,IAACO,EAAAA,cAAA,CACG,aAAW,QACX,gBAAeV,EACfT,UAAU,qCACVoB,MAAOd,EAAce,aAAe,OACpCC,QAAShB,EAAcY,oBAIvC,CAIZ,CAEa,MAAAK,EAAoB1B,EAAc,QAC/C0B,EAAkBC,YAAc,oBACnB,MAAAC,EAAqB5B,EAAc,SAChD4B,EAAmBD,YAAc,qBACpB,MAAAE,EAAuB7B,EAAc,WAClD6B,EAAqBF,YAAc,uBACtB,MAAAG,EAAuB9B,EAAc,WAClD8B,EAAqBH,YAAc"}

package/build/cjs/components/system-message/common/MessageIcon.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageIcon.cjs","sources":["../../../../../src/components/system-message/common/MessageIcon.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { ErrorIcon } from \"../../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../../icon/icons/WarningIcon.js\";\n\ntype MessageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\ntype Props = {\n messageType: MessageTypes;\n};\n\nexport const MessageIcon: FC<Props> = ({ messageType }) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-system-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-system-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-system-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-system-message__icon\" />;\n\n default:\n return null;\n }\n};\n"],"names":["messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon"],"mappings":"4TAYsC,EAAGA,YAAAA,MACrC,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,6BAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,6BAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,6BAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,6BAElC,QACW,OAAA,~~KACf~~"}
1	+ {"version":3,"file":"MessageIcon.cjs","sources":["../../../../../src/components/system-message/common/MessageIcon.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { ErrorIcon } from \"../../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../../icon/icons/WarningIcon.js\";\n\ntype MessageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\ntype Props = {\n messageType: MessageTypes;\n};\n\nexport const MessageIcon: FC<Props> = ({ messageType }) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-system-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-system-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-system-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-system-message__icon\" />;\n\n default:\n return null;\n }\n};\n"],"names":["messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon"],"mappings":"4TAYsC,EAAGA,YAAAA,MACrC,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,6BAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,6BAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,6BAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,6BAElC,QACW,OAAA,KAAA"}

package/build/cjs/components/table/ExpandableTableRowController.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpandableTableRowController.cjs","sources":["../../../../src/components/table/ExpandableTableRowController.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { Expander } from \"../expander/Expander.js\";\nimport { TableCellProps, TableCell } from \"./TableCell.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface ExpandableTableRowControllerProps extends TableCellProps {\n /** Settes automatisk av ExpandableTableRow /\n isOpen?: boolean;\n /* Settes automatisk av ExpandableTableRow /\n onClick?: () => void;\n}\n\nconst ExpandableTableRowController = forwardRef<\n HTMLTableCellElement,\n ExpandableTableRowControllerProps\n>(\n (\n {\n isOpen,\n onClick,\n children,\n className,\n id,\n \"aria-controls\": ariaControls,\n ...rest\n },\n ref,\n ) => {\n if (isOpen === undefined \|\| typeof onClick !== \"function\") {\n throw new Error(\n \"ExpandableTableRowController must have ExpandableTableRow as parent\",\n );\n }\n\n const { collapseToList } = useTableContext();\n\n const dataTh = (rest as Record<string, string>)[\"data-th\"];\n\n // pick text from data-th if possible, but only if it's a list\n const showTextFromTh: string \| undefined = collapseToList\n ? dataTh\n : undefined;\n\n return (\n <TableCell\n className={clsx(\n \"jkl-table-cell--expand\",\n { [\"jkl-table-cell--expand-without-text\"]: !children },\n className,\n )}\n {...rest}\n ref={ref}\n >\n <Expander\n as=\"button\"\n className={clsx(\"jkl-table-row-expand-button\", {\n [\"jkl-table-row-expand-button--expanded\"]: isOpen,\n })}\n id={id}\n open={isOpen}\n aria-controls={ariaControls}\n aria-label={\n children ? undefined : dataTh \|\| \"Ekspander rad\"\n }\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClick();\n }}\n onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.stopPropagation();\n e.preventDefault();\n onClick();\n }\n }}\n >\n {/ show children. or try to use data-th if children is undefined */}\n {children ?? showTextFromTh}\n </Expander>\n </TableCell>\n );\n },\n);\n\nExpandableTableRowController.displayName = \"ExpandableTableRowController\";\n\nexport { ExpandableTableRowController };\n"],"names":["ExpandableTableRowController","forwardRef","isOpen","onClick","children","className","id","ariaControls","rest","ref","Error","collapseToList","useTableContext","dataTh","showTextFromTh","jsx","TableCell","clsx","Expander","as","open","e","stopPropagation","onKeyDown","key","preventDefault","displayName"],"mappings":"mRAaMA,EAA+BC,EAAAA,YAIjC,EAEQC,OAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,GAAAA,EACA,gBAAiBC,KACdC,GAEPC,KAEA,QAAe,IAAXP,GAA2C,mBAAZC,EAC/B,MAAM,IAAIO,MACN,uEAIF,MAAEC,eAAAA,GAAmBC,~~EAAAA~~,~~kBAErBC,~~EAAUL,EAAgC,WAG1CM,EAAqCH,EACrCE,OACA,EAGF,OAAAE,EAAAA,IAACC,EAAAA,UAAA,CACGX,UAAWY,EAAAA,KACP,yBACA,CAAG,uCAAyCb,GAC5CC,MAEAG,EACJC,IAAAA,EAEAL,SAAAW,EAAAA,IAACG,EAAAA,SAAA,CACGC,GAAG,SACHd,UAAWY,OAAK,8BAA+B,CAC1C,wCAA0Cf,IAE/CI,GAAAA,EACAc,KAAMlB,EACN,gBAAeK,EACf,aACIH,OAAW,EAAYS,GAAU,gBAErCV,QAAUkB,IACNA,EAAEC,kBACMnB,~~KAEZoB~~,UAAYF,KACM,UAAVA,EAAEG,KAA6B,MAAVH,EAAEG,OACvBH,EAAEC,kBACFD,EAAEI,iBACMtB,MAKfC,SAAYA,GAAAU,~~KACjB~~,~~IAMhBd~~,EAA6B0B,YAAc"}
1	+ {"version":3,"file":"ExpandableTableRowController.cjs","sources":["../../../../src/components/table/ExpandableTableRowController.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { Expander } from \"../expander/Expander.js\";\nimport { TableCellProps, TableCell } from \"./TableCell.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface ExpandableTableRowControllerProps extends TableCellProps {\n /** Settes automatisk av ExpandableTableRow /\n isOpen?: boolean;\n /* Settes automatisk av ExpandableTableRow /\n onClick?: () => void;\n}\n\nconst ExpandableTableRowController = forwardRef<\n HTMLTableCellElement,\n ExpandableTableRowControllerProps\n>(\n (\n {\n isOpen,\n onClick,\n children,\n className,\n id,\n \"aria-controls\": ariaControls,\n ...rest\n },\n ref,\n ) => {\n if (isOpen === undefined \|\| typeof onClick !== \"function\") {\n throw new Error(\n \"ExpandableTableRowController must have ExpandableTableRow as parent\",\n );\n }\n\n const { collapseToList } = useTableContext();\n\n const dataTh = (rest as Record<string, string>)[\"data-th\"];\n\n // pick text from data-th if possible, but only if it's a list\n const showTextFromTh: string \| undefined = collapseToList\n ? dataTh\n : undefined;\n\n return (\n <TableCell\n className={clsx(\n \"jkl-table-cell--expand\",\n { [\"jkl-table-cell--expand-without-text\"]: !children },\n className,\n )}\n {...rest}\n ref={ref}\n >\n <Expander\n as=\"button\"\n className={clsx(\"jkl-table-row-expand-button\", {\n [\"jkl-table-row-expand-button--expanded\"]: isOpen,\n })}\n id={id}\n open={isOpen}\n aria-controls={ariaControls}\n aria-label={\n children ? undefined : dataTh \|\| \"Ekspander rad\"\n }\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n onClick();\n }}\n onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.stopPropagation();\n e.preventDefault();\n onClick();\n }\n }}\n >\n {/ show children. or try to use data-th if children is undefined */}\n {children ?? showTextFromTh}\n </Expander>\n </TableCell>\n );\n },\n);\n\nExpandableTableRowController.displayName = \"ExpandableTableRowController\";\n\nexport { ExpandableTableRowController };\n"],"names":["ExpandableTableRowController","forwardRef","isOpen","onClick","children","className","id","ariaControls","rest","ref","Error","collapseToList","useTableContext","dataTh","showTextFromTh","jsx","TableCell","clsx","Expander","as","open","e","stopPropagation","onKeyDown","key","preventDefault","displayName"],"mappings":"mRAaMA,EAA+BC,EAAAA,YAIjC,EAEQC,OAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,GAAAA,EACA,gBAAiBC,KACdC,GAEPC,KAEA,QAAe,IAAXP,GAA2C,mBAAZC,EAC/B,MAAM,IAAIO,MACN,uEAIF,MAAEC,eAAAA,GAAmBC,oBAErBC,EAAUL,EAAgC,WAG1CM,EAAqCH,EACrCE,OACA,EAGF,OAAAE,EAAAA,IAACC,EAAAA,UAAA,CACGX,UAAWY,EAAAA,KACP,yBACA,CAAG,uCAAyCb,GAC5CC,MAEAG,EACJC,IAAAA,EAEAL,SAAAW,EAAAA,IAACG,EAAAA,SAAA,CACGC,GAAG,SACHd,UAAWY,OAAK,8BAA+B,CAC1C,wCAA0Cf,IAE/CI,GAAAA,EACAc,KAAMlB,EACN,gBAAeK,EACf,aACIH,OAAW,EAAYS,GAAU,gBAErCV,QAAUkB,IACNA,EAAEC,kBACMnB,GAAA,EAEZoB,UAAYF,KACM,UAAVA,EAAEG,KAA6B,MAAVH,EAAEG,OACvBH,EAAEC,kBACFD,EAAEI,iBACMtB,MAKfC,SAAYA,GAAAU,KAErB,IAKZd,EAA6B0B,YAAc"}

package/build/cjs/components/table/Table.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.cjs","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, TableHTMLAttributes, useState } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { TableContextProvider } from \"./tableContext.js\";\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n density?: Density;\n /** Bryt ned til en stablet listevisning på små skjermer. NB: husk å sette `data-th` på hver celle! /\n collapseToList?: boolean;\n /* Setter width: 100% */\n fullWidth?: boolean;\n}\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n density,\n collapseToList = false,\n fullWidth = false,\n tabIndex,\n ...rest\n },\n ref,\n ) => {\n const [hasStickyHead, setHasStickyHead] = useState<boolean \| undefined>(\n false,\n );\n\n return (\n <TableContextProvider\n state={{ density, collapseToList, setHasStickyHead }}\n >\n <table\n className={clsx(\"jkl-table\", className, {\n [\"jkl-table--full-width\"]: fullWidth,\n [\"jkl-table--collapse-to-list\"]: collapseToList,\n })}\n {...rest}\n // For content in a scrollable table to be accessible with keyboard\n // navigation we need to set tabIndex\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={hasStickyHead ? 0 : tabIndex}\n ref={ref}\n />\n </TableContextProvider>\n );\n },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","density","collapseToList","fullWidth","tabIndex","rest","ref","hasStickyHead","setHasStickyHead","useState","jsx","TableContextProvider","state","children","clsx","displayName"],"mappings":"gNAaMA,EAAQC,EAAAA,YACV,EAEQC,UAAAA,EACAC,QAAAA,EACAC,eAAAA,GAAiB,EACjBC,UAAAA,GAAY,EACZC,SAAAA,KACGC,GAEPC,KAEM,MAACC,EAAeC,GAAoBC,EAAAA,UACtC,GAIA,OAAAC,EAAAA,IAACC,EAAAA,qBAAA,CACGC,MAAO,CAAEX,QAAAA,EAASC,eAAAA,EAAgBM,iBAAAA,GAElCK,SAAAH,EAAAA,IAAC,QAAA,CACGV,UAAWc,EAAAA,KAAK,YAAad,EAAW,CACnC,wBAA0BG,EAC1B,8BAAgCD,OAEjCG,EAIJD,SAAUG,EAAgB,EAAIH,EAC9BE,IAAAA,~~KACJ~~,~~IAMhBR~~,EAAMiB,YAAc"}
1	+ {"version":3,"file":"Table.cjs","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, TableHTMLAttributes, useState } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { TableContextProvider } from \"./tableContext.js\";\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n density?: Density;\n /** Bryt ned til en stablet listevisning på små skjermer. NB: husk å sette `data-th` på hver celle! /\n collapseToList?: boolean;\n /* Setter width: 100% */\n fullWidth?: boolean;\n}\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n (\n {\n className,\n density,\n collapseToList = false,\n fullWidth = false,\n tabIndex,\n ...rest\n },\n ref,\n ) => {\n const [hasStickyHead, setHasStickyHead] = useState<boolean \| undefined>(\n false,\n );\n\n return (\n <TableContextProvider\n state={{ density, collapseToList, setHasStickyHead }}\n >\n <table\n className={clsx(\"jkl-table\", className, {\n [\"jkl-table--full-width\"]: fullWidth,\n [\"jkl-table--collapse-to-list\"]: collapseToList,\n })}\n {...rest}\n // For content in a scrollable table to be accessible with keyboard\n // navigation we need to set tabIndex\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={hasStickyHead ? 0 : tabIndex}\n ref={ref}\n />\n </TableContextProvider>\n );\n },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","density","collapseToList","fullWidth","tabIndex","rest","ref","hasStickyHead","setHasStickyHead","useState","jsx","TableContextProvider","state","children","clsx","displayName"],"mappings":"gNAaMA,EAAQC,EAAAA,YACV,EAEQC,UAAAA,EACAC,QAAAA,EACAC,eAAAA,GAAiB,EACjBC,UAAAA,GAAY,EACZC,SAAAA,KACGC,GAEPC,KAEM,MAACC,EAAeC,GAAoBC,EAAAA,UACtC,GAIA,OAAAC,EAAAA,IAACC,EAAAA,qBAAA,CACGC,MAAO,CAAEX,QAAAA,EAASC,eAAAA,EAAgBM,iBAAAA,GAElCK,SAAAH,EAAAA,IAAC,QAAA,CACGV,UAAWc,EAAAA,KAAK,YAAad,EAAW,CACnC,wBAA0BG,EAC1B,8BAAgCD,OAEjCG,EAIJD,SAAUG,EAAgB,EAAIH,EAC9BE,IAAAA,KAER,IAKZR,EAAMiB,YAAc"}

package/build/cjs/components/table/TableCell.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableCell.cjs","sources":["../../../../src/components/table/TableCell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, TdHTMLAttributes } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n density?: Density;\n /*\n Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal innholdet være venstrejustert, men for eksempel summer er høyrejustert.\n * @default \"left\"\n /\n align?: \"left\" \| \"center\" \| \"right\";\n /\n Velg mellom vertikal sentrering av innholdet eller toppjustering. Typisk skal innholdet være toppjustert, men dersom raden har knapper kan midtstilling fungere bedre.\n * @default \"top\"\n */\n verticalAlign?: \"center\" \| \"top\";\n}\n\nconst TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n (\n { align = \"left\", verticalAlign = \"top\", className, density, ...rest },\n ref,\n ) => {\n const { density: contextDensity } = useTableContext();\n return (\n <td\n className={clsx(\"jkl-table-cell\", className, {\n [\"jkl-table-cell--align-right\"]: align === \"right\",\n [\"jkl-table-cell--align-center\"]: align === \"center\",\n [\"jkl-table-cell--vertical-align-center\"]:\n verticalAlign === \"center\",\n })}\n {...rest}\n data-density={density \|\| contextDensity}\n ref={ref}\n />\n );\n },\n);\n\nTableCell.displayName = \"TableCell\";\n\nexport { TableCell };\n"],"names":["TableCell","forwardRef","align","verticalAlign","className","density","rest","ref","contextDensity","useTableContext","jsx","clsx","displayName"],"mappings":"gNAmBMA,EAAYC,EAAAA,YACd,EACMC,MAAAA,EAAQ,OAAQC,cAAAA,EAAgB,MAAOC,UAAAA,EAAWC,QAAAA,KAAYC,GAChEC,KAEA,MAAQF,QAASG,GAAmBC,~~EAAgBA~~,~~kBAEhD,~~OAAAC,EAAAA,IAAC,KAAA,CACGN,UAAWO,EAAAA,KAAK,iBAAkBP,EAAW,CACxC,8BAA0C,UAAVF,EAChC,+BAA2C,WAAVA,EACjC,wCACqB,WAAlBC,OAEJG,EACJ,eAAcD,GAAWG,EACzBD,IAAAA,~~GAAA~~,~~IAMhBP~~,EAAUY,YAAc"}
1	+ {"version":3,"file":"TableCell.cjs","sources":["../../../../src/components/table/TableCell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, TdHTMLAttributes } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n density?: Density;\n /*\n Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal innholdet være venstrejustert, men for eksempel summer er høyrejustert.\n * @default \"left\"\n /\n align?: \"left\" \| \"center\" \| \"right\";\n /\n Velg mellom vertikal sentrering av innholdet eller toppjustering. Typisk skal innholdet være toppjustert, men dersom raden har knapper kan midtstilling fungere bedre.\n * @default \"top\"\n */\n verticalAlign?: \"center\" \| \"top\";\n}\n\nconst TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n (\n { align = \"left\", verticalAlign = \"top\", className, density, ...rest },\n ref,\n ) => {\n const { density: contextDensity } = useTableContext();\n return (\n <td\n className={clsx(\"jkl-table-cell\", className, {\n [\"jkl-table-cell--align-right\"]: align === \"right\",\n [\"jkl-table-cell--align-center\"]: align === \"center\",\n [\"jkl-table-cell--vertical-align-center\"]:\n verticalAlign === \"center\",\n })}\n {...rest}\n data-density={density \|\| contextDensity}\n ref={ref}\n />\n );\n },\n);\n\nTableCell.displayName = \"TableCell\";\n\nexport { TableCell };\n"],"names":["TableCell","forwardRef","align","verticalAlign","className","density","rest","ref","contextDensity","useTableContext","jsx","clsx","displayName"],"mappings":"gNAmBMA,EAAYC,EAAAA,YACd,EACMC,MAAAA,EAAQ,OAAQC,cAAAA,EAAgB,MAAOC,UAAAA,EAAWC,QAAAA,KAAYC,GAChEC,KAEA,MAAQF,QAASG,GAAmBC,oBAEhC,OAAAC,EAAAA,IAAC,KAAA,CACGN,UAAWO,EAAAA,KAAK,iBAAkBP,EAAW,CACxC,8BAA0C,UAAVF,EAChC,+BAA2C,WAAVA,EACjC,wCACqB,WAAlBC,OAEJG,EACJ,eAAcD,GAAWG,EACzBD,IAAAA,GACJ,IAKZP,EAAUY,YAAc"}

package/build/cjs/components/table/TableHead.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHead.cjs","sources":["../../../../src/components/table/TableHead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\n\nexport interface TableHeadProps\n extends HTMLAttributes<HTMLTableSectionElement> {\n srOnly?: boolean;\n sticky?: boolean;\n}\n\nconst TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(\n ({ className, srOnly, sticky, ...rest }, ref) => {\n const { setHasStickyHead } = useTableContext();\n setHasStickyHead(sticky);\n\n return (\n <TableSectionContextProvider\n state={{\n isTableHead: true,\n isTableBody: false,\n isTableFooter: false,\n }}\n >\n <thead\n className={clsx(\"jkl-table-head\", className, {\n [\"jkl-table-head--sr-only\"]: srOnly,\n [\"jkl-table-head--sticky\"]: sticky,\n })}\n {...rest}\n ref={ref}\n />\n </TableSectionContextProvider>\n );\n },\n);\n\nTableHead.displayName = \"TableHead\";\n\nexport { TableHead };\n"],"names":["TableHead","forwardRef","className","srOnly","sticky","rest","ref","setHasStickyHead","useTableContext","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"uPAWMA,EAAYC,EAAAA,YACd,EAAGC,UAAAA,EAAWC,OAAAA,EAAQC,OAAAA,KAAWC,GAAQC,KAC/B,MAAEC,iBAAAA,GAAqBC,~~EAAAA~~,~~kBAC7B,~~OAAAD,EAAiBH,GAGbK,EAAAA,IAACC,EAAAA,4BAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAAAN,EAAAA,IAAC,QAAA,CACGP,UAAWc,EAAAA,KAAK,iBAAkBd,EAAW,CACxC,0BAA4BC,EAC5B,yBAA2BC,OAE5BC,EACJC,IAAAA,~~KACJ~~,~~IAMhBN~~,EAAUiB,YAAc"}
1	+ {"version":3,"file":"TableHead.cjs","sources":["../../../../src/components/table/TableHead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\n\nexport interface TableHeadProps\n extends HTMLAttributes<HTMLTableSectionElement> {\n srOnly?: boolean;\n sticky?: boolean;\n}\n\nconst TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(\n ({ className, srOnly, sticky, ...rest }, ref) => {\n const { setHasStickyHead } = useTableContext();\n setHasStickyHead(sticky);\n\n return (\n <TableSectionContextProvider\n state={{\n isTableHead: true,\n isTableBody: false,\n isTableFooter: false,\n }}\n >\n <thead\n className={clsx(\"jkl-table-head\", className, {\n [\"jkl-table-head--sr-only\"]: srOnly,\n [\"jkl-table-head--sticky\"]: sticky,\n })}\n {...rest}\n ref={ref}\n />\n </TableSectionContextProvider>\n );\n },\n);\n\nTableHead.displayName = \"TableHead\";\n\nexport { TableHead };\n"],"names":["TableHead","forwardRef","className","srOnly","sticky","rest","ref","setHasStickyHead","useTableContext","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"uPAWMA,EAAYC,EAAAA,YACd,EAAGC,UAAAA,EAAWC,OAAAA,EAAQC,OAAAA,KAAWC,GAAQC,KAC/B,MAAEC,iBAAAA,GAAqBC,oBAC7B,OAAAD,EAAiBH,GAGbK,EAAAA,IAACC,EAAAA,4BAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAAAN,EAAAA,IAAC,QAAA,CACGP,UAAWc,EAAAA,KAAK,iBAAkBd,EAAW,CACxC,0BAA4BC,EAC5B,yBAA2BC,OAE5BC,EACJC,IAAAA,KAER,IAKZN,EAAUiB,YAAc"}

package/build/cjs/components/table/TableHeader.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHeader.cjs","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, MouseEventHandler, ThHTMLAttributes } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSortProps } from \"./utils.js\";\n\nexport type TableSortDirection = \"asc\" \| \"desc\";\n\nexport interface TableHeaderProps\n extends ThHTMLAttributes<HTMLTableCellElement> {\n bold?: boolean;\n density?: Density;\n /*\n Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal header følge innholdet i radene.\n * @default \"left\"\n /\n align?: \"left\" \| \"center\" \| \"right\";\n /\n Si om headeren gjelder for en kolonne eller en rad\n * @default \"col\"\n */\n scope?: \"col\" \| \"row\";\n srOnly?: boolean;\n sortable?: TableSortProps;\n}\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n (props, ref) => {\n const {\n bold = true,\n density,\n sortable,\n className,\n scope = \"col\",\n srOnly,\n align = \"left\",\n children,\n onClick,\n ...rest\n } = props;\n const { density: contextDensity } = useTableContext();\n\n const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n onClick?.(e);\n sortable?.onClick();\n };\n\n return (\n <th\n className={clsx(\"jkl-table-header\", className, {\n [\"jkl-table-header--bold\"]: bold,\n [\"jkl-table-header--align-right\"]: align === \"right\",\n [\"jkl-table-header--align-center\"]: align === \"center\",\n [\"jkl-table-header--sr-only\"]: srOnly,\n [\"jkl-table-header--sortable\"]:\n typeof sortable !== \"undefined\",\n })}\n scope={scope}\n onClick={handleClick}\n {...rest}\n data-density={density \|\| contextDensity}\n ref={ref}\n >\n {children}\n {sortable && (\n <div\n className={clsx(\"jkl-table-header__arrows\", {\n \"jkl-table-header__arrows--active\": Boolean(\n sortable.direction,\n ),\n })}\n >\n {sortable.direction && (\n <ArrowVerticalAnimated\n pointingDown={sortable.direction === \"desc\"}\n bold\n />\n )}\n </div>\n )}\n </th>\n );\n },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"8QA2BMA,EAAcC,EAAAA,YAChB,CAACC,EAAOC,KACE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,~~EAAgBA~~,~~kBAQhD,~~OAAAC,EAAAA,KAAC,KAAA,CACGT,UAAWU,EAAAA,KAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1D,MAAAN,GAAAA,EAAUM,GACV,MAAAZ,GAAAA,EAAUM,~~SAAQ~~,~~KAeVC~~,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAAA,IAAC,MAAA,CACGZ,UAAWU,OAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAAAA,IAACE,EAAAA,sBAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,~~QAGhB~~,~~IAOpBJ~~,EAAYuB,YAAc"}
1	+ {"version":3,"file":"TableHeader.cjs","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, MouseEventHandler, ThHTMLAttributes } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSortProps } from \"./utils.js\";\n\nexport type TableSortDirection = \"asc\" \| \"desc\";\n\nexport interface TableHeaderProps\n extends ThHTMLAttributes<HTMLTableCellElement> {\n bold?: boolean;\n density?: Density;\n /*\n Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal header følge innholdet i radene.\n * @default \"left\"\n /\n align?: \"left\" \| \"center\" \| \"right\";\n /\n Si om headeren gjelder for en kolonne eller en rad\n * @default \"col\"\n */\n scope?: \"col\" \| \"row\";\n srOnly?: boolean;\n sortable?: TableSortProps;\n}\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n (props, ref) => {\n const {\n bold = true,\n density,\n sortable,\n className,\n scope = \"col\",\n srOnly,\n align = \"left\",\n children,\n onClick,\n ...rest\n } = props;\n const { density: contextDensity } = useTableContext();\n\n const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n onClick?.(e);\n sortable?.onClick();\n };\n\n return (\n <th\n className={clsx(\"jkl-table-header\", className, {\n [\"jkl-table-header--bold\"]: bold,\n [\"jkl-table-header--align-right\"]: align === \"right\",\n [\"jkl-table-header--align-center\"]: align === \"center\",\n [\"jkl-table-header--sr-only\"]: srOnly,\n [\"jkl-table-header--sortable\"]:\n typeof sortable !== \"undefined\",\n })}\n scope={scope}\n onClick={handleClick}\n {...rest}\n data-density={density \|\| contextDensity}\n ref={ref}\n >\n {children}\n {sortable && (\n <div\n className={clsx(\"jkl-table-header__arrows\", {\n \"jkl-table-header__arrows--active\": Boolean(\n sortable.direction,\n ),\n })}\n >\n {sortable.direction && (\n <ArrowVerticalAnimated\n pointingDown={sortable.direction === \"desc\"}\n bold\n />\n )}\n </div>\n )}\n </th>\n );\n },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"8QA2BMA,EAAcC,EAAAA,YAChB,CAACC,EAAOC,KACE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,oBAQhC,OAAAC,EAAAA,KAAC,KAAA,CACGT,UAAWU,EAAAA,KAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1D,MAAAN,GAAAA,EAAUM,GACV,MAAAZ,GAAAA,EAAUM,SACd,KAcYC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAAA,IAAC,MAAA,CACGZ,UAAWU,OAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAAAA,IAACE,EAAAA,sBAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,QAKxB,IAKZJ,EAAYuB,YAAc"}

package/build/cjs/components/table/TablePagination.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TablePagination.cjs","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n forwardRef,\n useCallback,\n useState,\n type ChangeEventHandler,\n type FC,\n type MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TablePaginationProps {\n className?: string;\n id?: string;\n density?: Density;\n /*\n @default 0\n /\n activePage?: number;\n /\n Null eller negativt tall tolkes som \"vis alle\".\n /\n rowsPerPage: number;\n rowsPerPageItems: Array<number \| { label: string; value: number }>;\n totalNumberOfRows: number;\n /\n Viser et valgfritt inputfelt for å hoppe raskt til en spesifik side.\n * Du kan også sende inn en custom label hvis du ønsker det, ellers bruke\n * true for default label\n * @default false\n /\n withGoToPage?: boolean \| { gotoLabel: string };\n onChange: (\n e: React.SyntheticEvent,\n toPage: number,\n fromPage: number,\n ) => void;\n onChangeRowsPerPage: ChangeEventHandler<HTMLSelectElement>;\n /\n Dersom du ønsker å ha custom labels kan du sende inn disse. \"rowsPerPage\"\n * vises alltid på skjerm mens \"next\" og \"previous\" brukes som hint til\n * skjermlesere for ikon-knappene til Neste/Forrige side\n * @default { rowsPerPage: \"Rader per side\", previous: \"Forrige\", next: \"Neste\" }\n /\n labels?: {\n rowsPerPage: string;\n previous: string;\n next: string;\n };\n}\n\nfunction clamp(min: number, num: number, max: number): number {\n if (num < min) {\n return min;\n } else if (num > max) {\n return max;\n }\n return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(\n (props, ref) => {\n const {\n activePage = 0,\n totalNumberOfRows,\n rowsPerPage,\n rowsPerPageItems,\n className,\n density,\n id: idProp,\n withGoToPage = false,\n onChange,\n onChangeRowsPerPage,\n labels = {\n rowsPerPage: \"Rader per side\",\n previous: \"Forrige\",\n next: \"Neste\",\n },\n ...rest\n } = props;\n\n const id = useId(idProp \|\| \"jkl-table-pagination\", {\n generateSuffix: !idProp,\n });\n const { density: contextDensity } = useTableContext();\n\n const showAll = rowsPerPage <= 0;\n const numberOfPages = showAll\n ? 1\n : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n const [currentPage, setCurrentPage] = useState(\n clamp(0, activePage, numberOfPages - 1),\n );\n\n const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n const toPage = Number.parseInt(\n e.currentTarget.dataset[\"number\"] as string,\n );\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, currentPage],\n );\n\n const [pagePickerValue, setPagePickerValue] = useState(\n String(currentPage + 1),\n );\n const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n setPagePickerValue(e.target.value);\n try {\n const toPage = Number.parseInt(e.target.value) - 1;\n if (Number.isNaN(toPage)) {\n return;\n }\n\n if (toPage >= 0 && toPage < numberOfPages) {\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n }\n } catch {\n return;\n }\n },\n [\n onChange,\n setPagePickerValue,\n setCurrentPage,\n currentPage,\n numberOfPages,\n ],\n );\n\n const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (currentPage === 0) {\n // TODO: skal dette være en no-op i stedet?\n onChange(e, currentPage, currentPage);\n return;\n }\n const toPage = currentPage - 1;\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, currentPage],\n );\n\n const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (currentPage === numberOfPages - 1) {\n // TODO: skal dette være en no-op i stedet?\n onChange(e, currentPage, currentPage);\n return;\n }\n const toPage = currentPage + 1;\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, numberOfPages, currentPage],\n );\n\n return (\n <div\n className={clsx(\"jkl-table-pagination\", className)}\n {...rest}\n id={id}\n data-density={density \|\| contextDensity}\n ref={ref}\n >\n <div className=\"jkl-table-pagination__left\">\n <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n <span\n className=\"jkl-table-pagination__picker-label\"\n aria-hidden=\"true\"\n >\n {labels.rowsPerPage}:\n </span>\n <NativeSelect\n className=\"jkl-table-pagination__picker-input\"\n label={labels.rowsPerPage}\n labelProps={{ srOnly: true }}\n name={`${id}-rows-per-page`}\n items={rowsPerPageItems.map((i) =>\n typeof i === \"number\"\n ? String(i)\n : {\n label: i.label,\n value: String(i.value),\n },\n )}\n value={String(rowsPerPage)}\n onChange={onChangeRowsPerPage}\n width=\"min(8rem, 100%)\"\n inline\n />\n </div>\n </div>\n <div className=\"jkl-table-pagination__right\">\n {numberOfPages !== 1 && (\n <nav className=\"jkl-table-pagination__nav\">\n {withGoToPage && (\n <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n <span\n className=\"jkl-table-pagination__picker-label\"\n aria-hidden=\"true\"\n >\n {typeof withGoToPage === \"object\"\n ? withGoToPage.gotoLabel\n : \"Gå til side\"}\n :\n </span>\n {/ onChange først ved enter/submit */}\n <TextInput\n className=\"jkl-table-pagination__picker-input\"\n label={\n typeof withGoToPage === \"object\"\n ? withGoToPage.gotoLabel\n : \"Gå til side\"\n }\n labelProps={{ srOnly: true }}\n name={`${id}-go-to-page`}\n value={pagePickerValue}\n width=\"min(4rem, 100%)\"\n onChange={onPageChange}\n aria-invalid={\n pagePickerValue &&\n pagePickerValue !==\n String(currentPage + 1)\n ? \"true\"\n : undefined\n }\n />\n </div>\n )}\n <ul>\n <li>\n <IconButton\n className=\"jkl-table-pagination__previous\"\n title={labels.previous}\n onClick={onPrevious}\n >\n <ChevronLeftIcon />\n </IconButton>\n </li>\n <PaginationPages\n id={id}\n activePage={activePage}\n numberOfPages={numberOfPages}\n onPageClick={onPageClick}\n />\n <li>\n <IconButton\n className=\"jkl-table-pagination__next\"\n title={labels.next}\n onClick={onNext}\n >\n <ChevronRightIcon />\n </IconButton>\n </li>\n </ul>\n </nav>\n )}\n </div>\n </div>\n );\n },\n);\n\nconst PaginationPages: FC<{\n id: string;\n activePage: number;\n numberOfPages: number;\n onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n if (numberOfPages <= 7) {\n return (\n <>\n {Array.from({ length: numberOfPages }).map((_, i) => (\n <li key={`${id}-page-${i}`}>\n <button\n className={clsx(\"jkl-table-pagination__page\", {\n \"jkl-table-pagination__page--active\":\n activePage === i,\n })}\n type=\"button\"\n data-number={i}\n onClick={onPageClick}\n >\n {i + 1}\n </button>\n </li>\n ))}\n </>\n );\n }\n\n const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n const startEllipsis = Math.min(\n Math.max(activePage - 2, 1),\n numberOfPages - 6,\n );\n const centerPageNumberStart = Math.min(\n startEllipsis + 1,\n numberOfPages - 5,\n );\n const centerPageNumber = Math.min(\n centerPageNumberStart + 1,\n numberOfPages - 4,\n );\n const centerPageNumberEnd = Math.min(\n centerPageNumberStart + 2,\n numberOfPages - 3,\n );\n const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n return (\n <>\n <li>\n <PaginationPageButton\n isActive={activePage === 0}\n number={0}\n onClick={onPageClick}\n />\n </li>\n <li>\n {showStartEllipsis ? (\n <span\n className=\"jkl-table-pagination__ellipsis\"\n aria-hidden\n >\n {\"...\"}\n </span>\n ) : (\n <PaginationPageButton\n isActive={activePage === startEllipsis}\n number={startEllipsis}\n onClick={onPageClick}\n />\n )}\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumberStart}\n number={centerPageNumberStart}\n onClick={onPageClick}\n />\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumber}\n number={centerPageNumber}\n onClick={onPageClick}\n />\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumberEnd}\n number={centerPageNumberEnd}\n onClick={onPageClick}\n />\n </li>\n <li>\n {showEndEllipsis ? (\n <span\n className=\"jkl-table-pagination__ellipsis\"\n aria-hidden\n >\n {\"...\"}\n </span>\n ) : (\n <PaginationPageButton\n isActive={activePage === endEllipsis}\n number={endEllipsis}\n onClick={onPageClick}\n />\n )}\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === numberOfPages - 1}\n number={numberOfPages - 1}\n onClick={onPageClick}\n />\n </li>\n </>\n );\n};\n\nconst PaginationPageButton: FC<{\n isActive: boolean;\n number: number;\n onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n <button\n className={clsx(\"jkl-table-pagination__page\", {\n \"jkl-table-pagination__page--active\": isActive,\n })}\n type=\"button\"\n data-number={number}\n onClick={onClick}\n {...rest}\n >\n {number + 1}\n </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","density","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","contextDensity","useTableContext","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"TablePagination.cjs","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n forwardRef,\n useCallback,\n useState,\n type ChangeEventHandler,\n type FC,\n type MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TablePaginationProps {\n className?: string;\n id?: string;\n density?: Density;\n /*\n @default 0\n /\n activePage?: number;\n /\n Null eller negativt tall tolkes som \"vis alle\".\n /\n rowsPerPage: number;\n rowsPerPageItems: Array<number \| { label: string; value: number }>;\n totalNumberOfRows: number;\n /\n Viser et valgfritt inputfelt for å hoppe raskt til en spesifik side.\n * Du kan også sende inn en custom label hvis du ønsker det, ellers bruke\n * true for default label\n * @default false\n /\n withGoToPage?: boolean \| { gotoLabel: string };\n onChange: (\n e: React.SyntheticEvent,\n toPage: number,\n fromPage: number,\n ) => void;\n onChangeRowsPerPage: ChangeEventHandler<HTMLSelectElement>;\n /\n Dersom du ønsker å ha custom labels kan du sende inn disse. \"rowsPerPage\"\n * vises alltid på skjerm mens \"next\" og \"previous\" brukes som hint til\n * skjermlesere for ikon-knappene til Neste/Forrige side\n * @default { rowsPerPage: \"Rader per side\", previous: \"Forrige\", next: \"Neste\" }\n /\n labels?: {\n rowsPerPage: string;\n previous: string;\n next: string;\n };\n}\n\nfunction clamp(min: number, num: number, max: number): number {\n if (num < min) {\n return min;\n } else if (num > max) {\n return max;\n }\n return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(\n (props, ref) => {\n const {\n activePage = 0,\n totalNumberOfRows,\n rowsPerPage,\n rowsPerPageItems,\n className,\n density,\n id: idProp,\n withGoToPage = false,\n onChange,\n onChangeRowsPerPage,\n labels = {\n rowsPerPage: \"Rader per side\",\n previous: \"Forrige\",\n next: \"Neste\",\n },\n ...rest\n } = props;\n\n const id = useId(idProp \|\| \"jkl-table-pagination\", {\n generateSuffix: !idProp,\n });\n const { density: contextDensity } = useTableContext();\n\n const showAll = rowsPerPage <= 0;\n const numberOfPages = showAll\n ? 1\n : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n const [currentPage, setCurrentPage] = useState(\n clamp(0, activePage, numberOfPages - 1),\n );\n\n const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n const toPage = Number.parseInt(\n e.currentTarget.dataset[\"number\"] as string,\n );\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, currentPage],\n );\n\n const [pagePickerValue, setPagePickerValue] = useState(\n String(currentPage + 1),\n );\n const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n setPagePickerValue(e.target.value);\n try {\n const toPage = Number.parseInt(e.target.value) - 1;\n if (Number.isNaN(toPage)) {\n return;\n }\n\n if (toPage >= 0 && toPage < numberOfPages) {\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n }\n } catch {\n return;\n }\n },\n [\n onChange,\n setPagePickerValue,\n setCurrentPage,\n currentPage,\n numberOfPages,\n ],\n );\n\n const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (currentPage === 0) {\n // TODO: skal dette være en no-op i stedet?\n onChange(e, currentPage, currentPage);\n return;\n }\n const toPage = currentPage - 1;\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, currentPage],\n );\n\n const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (currentPage === numberOfPages - 1) {\n // TODO: skal dette være en no-op i stedet?\n onChange(e, currentPage, currentPage);\n return;\n }\n const toPage = currentPage + 1;\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, numberOfPages, currentPage],\n );\n\n return (\n <div\n className={clsx(\"jkl-table-pagination\", className)}\n {...rest}\n id={id}\n data-density={density \|\| contextDensity}\n ref={ref}\n >\n <div className=\"jkl-table-pagination__left\">\n <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n <span\n className=\"jkl-table-pagination__picker-label\"\n aria-hidden=\"true\"\n >\n {labels.rowsPerPage}:\n </span>\n <NativeSelect\n className=\"jkl-table-pagination__picker-input\"\n label={labels.rowsPerPage}\n labelProps={{ srOnly: true }}\n name={`${id}-rows-per-page`}\n items={rowsPerPageItems.map((i) =>\n typeof i === \"number\"\n ? String(i)\n : {\n label: i.label,\n value: String(i.value),\n },\n )}\n value={String(rowsPerPage)}\n onChange={onChangeRowsPerPage}\n width=\"min(8rem, 100%)\"\n inline\n />\n </div>\n </div>\n <div className=\"jkl-table-pagination__right\">\n {numberOfPages !== 1 && (\n <nav className=\"jkl-table-pagination__nav\">\n {withGoToPage && (\n <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n <span\n className=\"jkl-table-pagination__picker-label\"\n aria-hidden=\"true\"\n >\n {typeof withGoToPage === \"object\"\n ? withGoToPage.gotoLabel\n : \"Gå til side\"}\n :\n </span>\n {/ onChange først ved enter/submit */}\n <TextInput\n className=\"jkl-table-pagination__picker-input\"\n label={\n typeof withGoToPage === \"object\"\n ? withGoToPage.gotoLabel\n : \"Gå til side\"\n }\n labelProps={{ srOnly: true }}\n name={`${id}-go-to-page`}\n value={pagePickerValue}\n width=\"min(4rem, 100%)\"\n onChange={onPageChange}\n aria-invalid={\n pagePickerValue &&\n pagePickerValue !==\n String(currentPage + 1)\n ? \"true\"\n : undefined\n }\n />\n </div>\n )}\n <ul>\n <li>\n <IconButton\n className=\"jkl-table-pagination__previous\"\n title={labels.previous}\n onClick={onPrevious}\n >\n <ChevronLeftIcon />\n </IconButton>\n </li>\n <PaginationPages\n id={id}\n activePage={activePage}\n numberOfPages={numberOfPages}\n onPageClick={onPageClick}\n />\n <li>\n <IconButton\n className=\"jkl-table-pagination__next\"\n title={labels.next}\n onClick={onNext}\n >\n <ChevronRightIcon />\n </IconButton>\n </li>\n </ul>\n </nav>\n )}\n </div>\n </div>\n );\n },\n);\n\nconst PaginationPages: FC<{\n id: string;\n activePage: number;\n numberOfPages: number;\n onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n if (numberOfPages <= 7) {\n return (\n <>\n {Array.from({ length: numberOfPages }).map((_, i) => (\n <li key={`${id}-page-${i}`}>\n <button\n className={clsx(\"jkl-table-pagination__page\", {\n \"jkl-table-pagination__page--active\":\n activePage === i,\n })}\n type=\"button\"\n data-number={i}\n onClick={onPageClick}\n >\n {i + 1}\n </button>\n </li>\n ))}\n </>\n );\n }\n\n const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n const startEllipsis = Math.min(\n Math.max(activePage - 2, 1),\n numberOfPages - 6,\n );\n const centerPageNumberStart = Math.min(\n startEllipsis + 1,\n numberOfPages - 5,\n );\n const centerPageNumber = Math.min(\n centerPageNumberStart + 1,\n numberOfPages - 4,\n );\n const centerPageNumberEnd = Math.min(\n centerPageNumberStart + 2,\n numberOfPages - 3,\n );\n const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n return (\n <>\n <li>\n <PaginationPageButton\n isActive={activePage === 0}\n number={0}\n onClick={onPageClick}\n />\n </li>\n <li>\n {showStartEllipsis ? (\n <span\n className=\"jkl-table-pagination__ellipsis\"\n aria-hidden\n >\n {\"...\"}\n </span>\n ) : (\n <PaginationPageButton\n isActive={activePage === startEllipsis}\n number={startEllipsis}\n onClick={onPageClick}\n />\n )}\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumberStart}\n number={centerPageNumberStart}\n onClick={onPageClick}\n />\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumber}\n number={centerPageNumber}\n onClick={onPageClick}\n />\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumberEnd}\n number={centerPageNumberEnd}\n onClick={onPageClick}\n />\n </li>\n <li>\n {showEndEllipsis ? (\n <span\n className=\"jkl-table-pagination__ellipsis\"\n aria-hidden\n >\n {\"...\"}\n </span>\n ) : (\n <PaginationPageButton\n isActive={activePage === endEllipsis}\n number={endEllipsis}\n onClick={onPageClick}\n />\n )}\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === numberOfPages - 1}\n number={numberOfPages - 1}\n onClick={onPageClick}\n />\n </li>\n </>\n );\n};\n\nconst PaginationPageButton: FC<{\n isActive: boolean;\n number: number;\n onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n <button\n className={clsx(\"jkl-table-pagination__page\", {\n \"jkl-table-pagination__page--active\": isActive,\n })}\n type=\"button\"\n data-number={number}\n onClick={onClick}\n {...rest}\n >\n {number + 1}\n </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","density","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","contextDensity","useTableContext","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"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"}

package/build/cjs/components/table/TableRow.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableRow.cjs","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\n\nexport interface ClickableRowProps {\n markClickedRows?: boolean;\n /** Lar deg kontrollere radens tilstand untenfra /\n isClicked?: boolean;\n onClick: (\n e:\n \| React.MouseEvent<HTMLTableRowElement, MouseEvent>\n \| React.KeyboardEvent<HTMLTableRowElement>,\n ) => void;\n}\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n /\n Gir raden interaktivitet og en click-handler.\n */\n clickable?: ClickableRowProps;\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, clickable, children, ...rest }, ref) => {\n const { density } = useTableContext();\n const { isTableBody } = useTableSectionContext();\n\n const [clicked, setClicked] = useState(clickable?.isClicked \|\| false);\n\n useEffect(() => {\n setClicked((prev) =>\n clickable?.isClicked !== undefined ? clickable.isClicked : prev,\n );\n }, [clickable?.isClicked]);\n\n if (isTableBody && clickable) {\n return (\n <tr\n onClick={function handleOnClick(e) {\n setClicked(!clicked);\n clickable.onClick(e);\n }}\n onKeyPress={function handleKeyPress(e) {\n if (e.key === \" \" \|\| e.key === \"Enter\") {\n e.preventDefault();\n setClicked(!clicked);\n clickable.onClick(e);\n }\n }}\n data-testid=\"jkl-clickable-table-row\"\n className={clsx(\n \"jkl-table-row\",\n \"jkl-table-row--clickable\",\n className,\n {\n [\"jkl-table-row--clicked\"]:\n clickable?.markClickedRows && clicked,\n },\n )}\n aria-label=\"Klikkbar rad\"\n aria-pressed={\n clickable?.markClickedRows\n ? clicked\n ? \"true\"\n : \"false\"\n : undefined\n }\n tabIndex={0}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children}\n </tr>\n );\n }\n\n return (\n <tr\n className={clsx(\"jkl-table-row\", className)}\n {...rest}\n ref={ref}\n data-density={density}\n >\n {children}\n </tr>\n );\n },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"uPAuBMA,EAAWC,EAAAA,YACb,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpC,MAAEC,QAAAA,GAAYC,~~EAAAA~~,~~mBACZC,~~YAAAA,GAAgBC,~~EAAAA~~,~~0BAEjBC,~~EAASC,GAAcC,EAASA,UAAA,MAAAV,OAAA,EAAAA,EAAWW,aAAa,GAQ/D,OANAC,EAAAA,WAAU,KACNH,GAAYI,QACiB,KAAzB,MAAAb,OAAA,EAAAA,EAAWW,WAA0BX,EAAUW,UAAYE,~~GAAA~~,~~GAEhE~~,CAAC,MAAAb,SAAAA,EAAWW,YAEXL,GAAeN,EAEXc,EAAAA,IAAC,KAAA,CACGC,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EAAAA,KACP,gBACA,2BACArB,EACA,CACK,0BACG,MAAAC,OAAA,EAAAA,EAAWqB,kBAAmBb,IAG1C,aAAW,eACX,eACI,MAAAR,GAAAA,EAAWqB,gBACLb,EACI,OACA,aACJ,EAEVc,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,IAMTa,EAAAA,IAAC,KAAA,CACGf,UAAWqB,EAAAA,KAAK,gBAAiBrB,MAC7BG,EACJC,IAAAA,EACA,eAAcC,EAEbH,SAAAA,~~GAAA~~,~~IAMjBJ~~,EAAS0B,YAAc"}
1	+ {"version":3,"file":"TableRow.cjs","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\n\nexport interface ClickableRowProps {\n markClickedRows?: boolean;\n /** Lar deg kontrollere radens tilstand untenfra /\n isClicked?: boolean;\n onClick: (\n e:\n \| React.MouseEvent<HTMLTableRowElement, MouseEvent>\n \| React.KeyboardEvent<HTMLTableRowElement>,\n ) => void;\n}\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n /\n Gir raden interaktivitet og en click-handler.\n */\n clickable?: ClickableRowProps;\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, clickable, children, ...rest }, ref) => {\n const { density } = useTableContext();\n const { isTableBody } = useTableSectionContext();\n\n const [clicked, setClicked] = useState(clickable?.isClicked \|\| false);\n\n useEffect(() => {\n setClicked((prev) =>\n clickable?.isClicked !== undefined ? clickable.isClicked : prev,\n );\n }, [clickable?.isClicked]);\n\n if (isTableBody && clickable) {\n return (\n <tr\n onClick={function handleOnClick(e) {\n setClicked(!clicked);\n clickable.onClick(e);\n }}\n onKeyPress={function handleKeyPress(e) {\n if (e.key === \" \" \|\| e.key === \"Enter\") {\n e.preventDefault();\n setClicked(!clicked);\n clickable.onClick(e);\n }\n }}\n data-testid=\"jkl-clickable-table-row\"\n className={clsx(\n \"jkl-table-row\",\n \"jkl-table-row--clickable\",\n className,\n {\n [\"jkl-table-row--clicked\"]:\n clickable?.markClickedRows && clicked,\n },\n )}\n aria-label=\"Klikkbar rad\"\n aria-pressed={\n clickable?.markClickedRows\n ? clicked\n ? \"true\"\n : \"false\"\n : undefined\n }\n tabIndex={0}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children}\n </tr>\n );\n }\n\n return (\n <tr\n className={clsx(\"jkl-table-row\", className)}\n {...rest}\n ref={ref}\n data-density={density}\n >\n {children}\n </tr>\n );\n },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"uPAuBMA,EAAWC,EAAAA,YACb,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpC,MAAEC,QAAAA,GAAYC,qBACZC,YAAAA,GAAgBC,4BAEjBC,EAASC,GAAcC,EAASA,UAAA,MAAAV,OAAA,EAAAA,EAAWW,aAAa,GAQ/D,OANAC,EAAAA,WAAU,KACNH,GAAYI,QACiB,KAAzB,MAAAb,OAAA,EAAAA,EAAWW,WAA0BX,EAAUW,UAAYE,GAC/D,GACD,CAAC,MAAAb,SAAAA,EAAWW,YAEXL,GAAeN,EAEXc,EAAAA,IAAC,KAAA,CACGC,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EAAAA,KACP,gBACA,2BACArB,EACA,CACK,0BACG,MAAAC,OAAA,EAAAA,EAAWqB,kBAAmBb,IAG1C,aAAW,eACX,eACI,MAAAR,GAAAA,EAAWqB,gBACLb,EACI,OACA,aACJ,EAEVc,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,IAMTa,EAAAA,IAAC,KAAA,CACGf,UAAWqB,EAAAA,KAAK,gBAAiBrB,MAC7BG,EACJC,IAAAA,EACA,eAAcC,EAEbH,SAAAA,GACL,IAKZJ,EAAS0B,YAAc"}