@fremtind/jokul 0.24.0 → 0.25.0

package/build/es/components/radio-button/RadioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","sources":["../../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC } from \"react\";\nimport { Density } from \"../..\";\nimport { FieldGroup, type FieldGroupProps } from \"../input-group\";\nimport { RadioGroupContextProvider } from \"./radioGroupContext\";\n\nexport interface RadioButtonGroupProps 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":["RadioButtonGroup","props","name","value","onChange","errorLabel","inline","density","labelProps","variant","rest","jsx","RadioGroupContextProvider","state","invalid","children","FieldGroup","role"],"mappings":"6gDA0Ba,MAAAA,EAA+CC,IAClD,MACFC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,OAAAA,GAAS,EACTC,QAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAS,aACrBC,GACHT,EAGA,OAAAU,EAACC,EAAA,CACGC,MAAO,CACHT,SAAAA,EACAD,MAAAA,EACAD,KAAAA,EACAY,UAAiBT,EACjBC,OAAAA,EACAC,QAAAA,GAGJQ,SAAAJ,EAACK,EAAA,CACGX,WAAAA,EACAG,WAAAA,EACA,cAAY,yBACZD,QAAAA,KACIG,EACJO,KAAK,aACL,iBAAsBZ,KAC1B"}
+{"version":3,"file":"RadioButtonGroup.js","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 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":["RadioButtonGroup","props","name","value","onChange","errorLabel","inline","density","labelProps","variant","rest","jsx","RadioGroupContextProvider","state","invalid","children","FieldGroup","role"],"mappings":"qKA0Ba,MAAAA,EAA+CC,IAClD,MACFC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,OAAAA,GAAS,EACTC,QAAAA,EACAC,WAAAA,EAAa,CAAEC,QAAS,aACrBC,GACHT,EAGA,OAAAU,EAACC,EAAA,CACGC,MAAO,CACHT,SAAAA,EACAD,MAAAA,EACAD,KAAAA,EACAY,UAAiBT,EACjBC,OAAAA,EACAC,QAAAA,GAGJQ,SAAAJ,EAACK,EAAA,CACGX,WAAAA,EACAG,WAAAA,EACA,cAAY,yBACZD,QAAAA,KACIG,EACJO,KAAK,aACL,iBAAsBZ,KAC1B"}

package/build/es/components/radio-button/index.d.ts

@@ -0,0 +1,6 @@
+export type { RadioButtonProps } from './RadioButton.js';
+export { RadioButton } from './RadioButton.js';
+export type { RadioButtonGroupProps } from './RadioButtonGroup.js';
+export { RadioButtonGroup } from './RadioButtonGroup.js';
+export type { BaseRadioButtonProps } from './BaseRadioButton.js';
+export { BaseRadioButton } from './BaseRadioButton.js';

package/build/es/components/radio-button/radioGroupContext.d.ts

@@ -0,0 +1,16 @@
+import { default as React, ChangeEventHandler } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+type RadioGroupContext = {
+    name: string | undefined;
+    value: string | undefined;
+    inline: boolean;
+    density?: Density;
+    invalid: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement> | undefined;
+};
+export declare const useRadioGroupContext: () => RadioGroupContext;
+interface Props extends WithChildren {
+    state: RadioGroupContext;
+}
+export declare const RadioGroupContextProvider: React.FC<Props>;
+export {};

package/build/es/components/radio-button/radioGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioGroupContext.js","sources":["../../../../src/components/radio-button/radioGroupContext.tsx"],"sourcesContent":["import React, { createContext, useContext, ChangeEventHandler } from \"react\";\nimport { Density, WithChildren } from \"../..\";\n\ntype RadioGroupContext = {\n    name: string | undefined;\n    value: string | undefined;\n    inline: boolean;\n    density?: Density;\n    invalid: boolean;\n    onChange: ChangeEventHandler<HTMLInputElement> | undefined;\n};\n\nconst radioGroupContext = createContext<RadioGroupContext>({\n    name: undefined,\n    value: undefined,\n    onChange: () => {\n        return;\n    },\n    inline: false,\n    density: undefined,\n    invalid: false,\n});\n\nexport const useRadioGroupContext = (): RadioGroupContext => useContext(radioGroupContext);\n\ninterface Props extends WithChildren {\n    state: RadioGroupContext;\n}\n\nexport const RadioGroupContextProvider: React.FC<Props> = ({ state, children }) => (\n    <radioGroupContext.Provider value={state}>{children}</radioGroupContext.Provider>\n);\n"],"names":["radioGroupContext","createContext","name","value","onChange","inline","density","invalid","useRadioGroupContext","useContext","RadioGroupContextProvider","state","children","jsx","Provider"],"mappings":"8FAYA,MAAMA,EAAoBC,EAAiC,CACvDC,UAAM,EACNC,WAAO,EACPC,SAAU,OAGVC,QAAQ,EACRC,aAAS,EACTC,SAAS,IAGAC,EAAuB,IAAyBC,EAAWT,GAM3DU,EAA6C,EAAGC,MAAAA,EAAOC,SAAAA,KAC/DC,EAAAb,EAAkBc,SAAlB,CAA2BX,MAAOQ,EAAQC,SAAAA"}
+{"version":3,"file":"radioGroupContext.js","sources":["../../../../src/components/radio-button/radioGroupContext.tsx"],"sourcesContent":["import React, { createContext, useContext, ChangeEventHandler } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\n\ntype RadioGroupContext = {\n    name: string | undefined;\n    value: string | undefined;\n    inline: boolean;\n    density?: Density;\n    invalid: boolean;\n    onChange: ChangeEventHandler<HTMLInputElement> | undefined;\n};\n\nconst radioGroupContext = createContext<RadioGroupContext>({\n    name: undefined,\n    value: undefined,\n    onChange: () => {\n        return;\n    },\n    inline: false,\n    density: undefined,\n    invalid: false,\n});\n\nexport const useRadioGroupContext = (): RadioGroupContext => useContext(radioGroupContext);\n\ninterface Props extends WithChildren {\n    state: RadioGroupContext;\n}\n\nexport const RadioGroupContextProvider: React.FC<Props> = ({ state, children }) => (\n    <radioGroupContext.Provider value={state}>{children}</radioGroupContext.Provider>\n);\n"],"names":["radioGroupContext","createContext","name","value","onChange","inline","density","invalid","useRadioGroupContext","useContext","RadioGroupContextProvider","state","children","jsx","Provider"],"mappings":"8FAYA,MAAMA,EAAoBC,EAAiC,CACvDC,UAAM,EACNC,WAAO,EACPC,SAAU,OAGVC,QAAQ,EACRC,aAAS,EACTC,SAAS,IAGAC,EAAuB,IAAyBC,EAAWT,GAM3DU,EAA6C,EAAGC,MAAAA,EAAOC,SAAAA,KAC/DC,EAAAb,EAAkBc,SAAlB,CAA2BX,MAAOQ,EAAQC,SAAAA"}

package/build/es/components/select/NativeSelect.d.ts

@@ -0,0 +1,19 @@
+import { default as React, SelectHTMLAttributes } from 'react';
+import { ValuePair } from '../../utilities/valuePair.js';
+import { InputGroupProps } from '../input-group/InputGroup.js';
+export interface NativeSelectProps extends Omit<InputGroupProps, "children">, SelectHTMLAttributes<HTMLSelectElement> {
+    /**
+     * Merk som ugyldig uten å sende inn en errorLabel.
+     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.
+     */
+    invalid?: boolean;
+    /**
+     * Setter inn et placeholderelement som vises når ingenting er valgt i nedtrekkslisten.
+     * @default "Velg"
+     */
+    placeholder?: string;
+    items: Array<string | ValuePair>;
+    selectClassName?: string;
+    width?: string;
+}
+export declare const NativeSelect: React.ForwardRefExoticComponent<NativeSelectProps & React.RefAttributes<HTMLSelectElement>>;

package/build/es/components/select/NativeSelect.js

@@ -1,2 +1,2 @@
-import"react/jsx-runtime";import"../../../clsx-BeLtu-UY.js";import"react";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import"../button/Button.js";import"../card/Card.js";import"../card/CardImage.js";import"../card/NavCard.js";import"../checkbox/Checkbox.js";import"../combobox/Combobox.js";import"../cookie-consent/CookieConsentContext.js";import"react-dom";import"../modal/Modal.js";import"react-a11y-dialog";import"../list/List.js";import"../list/ListItem.js";import"../datepicker/DatePicker.js";import"../feedback/feedbackContext.js";import"../message/Message.js";import"../message/FormErrorMessage.js";import"../tooltip/Tooltip.js";import"../tooltip/TooltipContent.js";import"../tooltip/TooltipTrigger.js";import"../input-group/InputGroup.js";import"../feedback/followup/followupContext.js";import"../feedback/main-question/mainQuestionContext.js";import"../radio-button/RadioButton.js";import"../radio-button/radioGroupContext.js";import"../radio-button/BaseRadioButton.js";import"../text-input/BaseTextArea.js";import"../text-input/BaseTextInput.js";import"../text-input/TextArea.js";import"../text-input/TextInput.js";import"../../utilities/polymorphism/SlotComponent.js";import"../../utilities/valuePair.js";import"../flex/Flex.js";import{N as o}from"../../../ExpandableTableRow-8_2Qs86T.js";import"../icon-button/IconButton.js";import"../link/Link.js";import"../link/NavLink.js";import"../link-list/LinkList.js";import"../logo/text-paths/ForsikringLevertAvFremtind.js";import"../logo/text-paths/FraSB1ogDNB.js";import"../logo/text-paths/InnovasjonFraFremtind.js";import"../logo/text-paths/TeknologiFraFremtind.js";import"../logo/text-paths/VartEgetForsikringsselskap.js";import"../logo/text-paths/VartForsikringsselskap.js";import"../menu/MenuItem.js";import"../menu/MenuItemCheckbox.js";import"../pagination/Pagination.js";import"../popover/Popover.js";import"../system-message/SystemMessage.js";import"../table/DataTable.js";import"../table/Table.js";import"../table/TableBody.js";import"../table/TableCaption.js";import"../table/TableCell.js";import"../table/TableColumn.js";import"../table/TableColumnGroup.js";import"../table/tableContext.js";import"../table/tableSectionContext.js";import"../table/TableFooter.js";import"../table/TableHead.js";import"../table/TableHeader.js";import"../table/TableRow.js";import"../tabs/NavTab.js";import"../tabs/tabsContext.js";import"../tabs/Tab.js";import"../tag/Tag.js";import"../toast/toastContext.js";import"../toggle-switch/ToggleSwitch.js";export{o as NativeSelect};
+import{jsx as o,jsxs as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{forwardRef as s}from"react";import{getValuePair as c}from"../../utilities/valuePair.js";import"../icon/Icon.js";import{ArrowVerticalAnimated as e}from"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{InputGroup as r}from"../input-group/InputGroup.js";const t=s(((s,t)=>{const{label:a,className:l,density:p,errorLabel:m,helpLabel:j,inline:I,invalid:u,items:d,labelProps:h,placeholder:v="Velg",selectClassName:b,supportLabelProps:w,tooltipProps:f,value:k,width:A,...C}=s;return o(r,{label:a,density:p,errorLabel:m,helpLabel:j,labelProps:h,inline:I,supportLabelProps:w,tooltipProps:f,"data-testid":"jkl-select",className:n("jkl-select",l,{"jkl-select--inline":I,"jkl-select--invalid":!!m||u}),render:s=>i("div",{className:"jkl-select__outer-wrapper",style:{width:A},children:[i("select",{ref:t,className:n("jkl-select__button",b,{"jkl-select__button--active-value":!!k}),defaultValue:k?void 0:"",value:k,...s,...C,children:[v&&!k&&o("option",{disabled:!0,value:"",children:v}),d.map(c).map((i=>o("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:i.value,children:i.label},i.value)))]}),o(e,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));t.displayName="NativeSelect";export{t as NativeSelect};
 //# sourceMappingURL=NativeSelect.js.map

package/build/es/components/select/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NativeSelect.js","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/index.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\n\nexport interface NativeSelectProps extends Omit<InputGroupProps, \"children\">, 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>((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        tooltipProps,\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        tooltipProps,\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 className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                    <select\n                        ref={ref}\n                        className={clsx(\"jkl-select__button\", selectClassName, {\n                            \"jkl-select__button--active-value\": !!value,\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 variant=\"medium\" pointingDown className=\"jkl-select__arrow\" />\n                </div>\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","tooltipProps","value","width","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"4lDAsBO,MAAMA,EAAeC,GAAiD,CAACC,EAAOC,KAC3E,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,aAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHjB,EAcA,OAAAkB,EAACC,EAAA,CAXDjB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,aAAAA,EAMI,cAAY,aACZX,UAAWiB,EAAK,aAAcjB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Ca,OAASC,GACJC,EAAA,MAAA,CAAIpB,UAAU,4BAA4BqB,MAAO,CAAER,MAAAA,GAChDS,SAAA,CAAAF,EAAC,SAAA,CACGtB,IAAAA,EACAE,UAAWiB,EAAK,qBAAsBR,EAAiB,CACnD,qCAAsCG,IAE1CW,aAAcX,OAAQ,EAAY,GAClCA,MAAAA,KACIO,KACAL,EAEHQ,SAAA,CAAed,IAACI,GACZG,EAAA,SAAA,CAAOS,UAAQ,EAACZ,MAAM,GAClBU,SACLd,IAEHF,EAAMmB,IAAIC,GAAcD,KAAKE,GAC1BZ,EAAC,SAAA,CACG,cAAY,qBACZf,UAAU,qBAEVY,MAAOe,EAAKf,MAEXU,SAAKK,EAAA5B,OAHD4B,EAAKf,cAOrBgB,EAAsB,CAAAC,QAAQ,SAASC,cAAY,EAAC9B,UAAU,0BACnE,IAMhBL,EAAaoC,YAAc"}

package/build/es/components/select/Select.d.ts

@@ -0,0 +1,55 @@
+import { default as React, ChangeEvent } from 'react';
+import { DataTestAutoId, Density } from '../../core/types.js';
+import { ValuePair } from '../../utilities/valuePair.js';
+import { InputGroupProps } from '../input-group/InputGroup.js';
+import { LabelProps } from '../input-group/Label.js';
+interface PartialChangeEvent extends Partial<Omit<ChangeEvent<HTMLSelectElement>, "target">> {
+    /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change */
+    type: "change" | "blur";
+    target: {
+        /** Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret */
+        name: string;
+        value: string;
+    };
+}
+type ChangeEventHandler = (event: PartialChangeEvent) => void;
+export interface SelectProps extends Omit<InputGroupProps, "children">, DataTestAutoId {
+    id?: string;
+    name: string;
+    label: string;
+    labelProps?: Omit<LabelProps, "children" | "density" | "htmlFor" | "standAlone">;
+    items: Array<string | ValuePair>;
+    /**
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * @default "Velg"
+     */
+    defaultPrompt?: string;
+    className?: string;
+    value?: string;
+    helpLabel?: string;
+    errorLabel?: string;
+    /**
+     * @default false
+     */
+    searchable?: boolean | ((searchValue: string, searchItem: string | ValuePair) => boolean);
+    density?: Density;
+    width?: string;
+    onChange?: ChangeEventHandler;
+    onBlur?: ChangeEventHandler;
+    onFocus?: ChangeEventHandler;
+    /**
+     * Merk som ugyldig uten å sende inn en errorLabel.
+     * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.
+     */
+    invalid?: boolean;
+    /**
+     * Hvor mange valg skal vises i listen før den begynner å scrolle.
+     * @default 5
+     */
+    maxShownOptions?: number;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+export {};

package/build/es/components/select/Select.js

@@ -1,2 +1,2 @@
-import"react/jsx-runtime";import"../../../clsx-BeLtu-UY.js";import"react";import"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import"../../hooks/usePreviousValue/usePreviousValue.js";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import"../../hooks/useListNavigation/useListNavigation.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import"../button/Button.js";import"../card/Card.js";import"../card/CardImage.js";import"../card/NavCard.js";import"../checkbox/Checkbox.js";import"../combobox/Combobox.js";import"../cookie-consent/CookieConsentContext.js";import"react-dom";import"../modal/Modal.js";import"react-a11y-dialog";import"../list/List.js";import"../list/ListItem.js";import"../datepicker/DatePicker.js";import"../feedback/feedbackContext.js";import"../message/Message.js";import"../message/FormErrorMessage.js";import"../tooltip/Tooltip.js";import"../tooltip/TooltipContent.js";import"../tooltip/TooltipTrigger.js";import"../input-group/InputGroup.js";import"../feedback/followup/followupContext.js";import"../feedback/main-question/mainQuestionContext.js";import"../radio-button/RadioButton.js";import"../radio-button/radioGroupContext.js";import"../radio-button/BaseRadioButton.js";import"../text-input/BaseTextArea.js";import"../text-input/BaseTextInput.js";import"../text-input/TextArea.js";import"../text-input/TextInput.js";import"../../utilities/polymorphism/SlotComponent.js";import"../../utilities/valuePair.js";import"../flex/Flex.js";import{S as o}from"../../../ExpandableTableRow-8_2Qs86T.js";import"../icon-button/IconButton.js";import"../link/Link.js";import"../link/NavLink.js";import"../link-list/LinkList.js";import"../logo/text-paths/ForsikringLevertAvFremtind.js";import"../logo/text-paths/FraSB1ogDNB.js";import"../logo/text-paths/InnovasjonFraFremtind.js";import"../logo/text-paths/TeknologiFraFremtind.js";import"../logo/text-paths/VartEgetForsikringsselskap.js";import"../logo/text-paths/VartForsikringsselskap.js";import"../menu/MenuItem.js";import"../menu/MenuItemCheckbox.js";import"../pagination/Pagination.js";import"../popover/Popover.js";import"../system-message/SystemMessage.js";import"../table/DataTable.js";import"../table/Table.js";import"../table/TableBody.js";import"../table/TableCaption.js";import"../table/TableCell.js";import"../table/TableColumn.js";import"../table/TableColumnGroup.js";import"../table/tableContext.js";import"../table/tableSectionContext.js";import"../table/TableFooter.js";import"../table/TableHead.js";import"../table/TableHeader.js";import"../table/TableRow.js";import"../tabs/NavTab.js";import"../tabs/tabsContext.js";import"../tabs/Tab.js";import"../tag/Tag.js";import"../toast/toastContext.js";import"../toggle-switch/ToggleSwitch.js";import"./select-utils.js";export{o as Select};
+import{jsxs as e,Fragment as o,jsx as n}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r,useState as i,useCallback as s,useMemo as c,useRef as a,useEffect as l}from"react";import{useAnimatedHeight as u}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import{useId as p}from"../../hooks/useId/useId.js";import{useListNavigation as d}from"../../hooks/useListNavigation/useListNavigation.js";import{usePreviousValue as m}from"../../hooks/usePreviousValue/usePreviousValue.js";import{getValuePair as v}from"../../utilities/valuePair.js";import"../icon/Icon.js";import{ArrowVerticalAnimated as f}from"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{InputGroup as j}from"../input-group/InputGroup.js";import{focusSelected as h,toLower as b}from"./select-utils.js";const g=()=>{},k=r(((r,k)=>{const{id:w,name:y,items:I,value:_,label:P,labelProps:D,onChange:C,onBlur:L,onFocus:A,className:E,helpLabel:N,errorLabel:$,invalid:x,searchable:S=!1,inline:T=!1,defaultPrompt:F="Velg",density:V,width:R,maxShownOptions:H=5,style:K,tooltipProps:B,...M}=r,U=p(w||"jkl-select",{generateSuffix:!w}),G=`${U}_label`,O=`${U}_button`,q=`${U}_search-input`,[z,Q]=i(!1),W=s((()=>{Q((e=>!e))}),[]),J=!!S,X=J&&z,[Y,Z]=i(""),ee=s((e=>!!e.label.toLowerCase().includes(Y.toLowerCase())||"function"==typeof S&&S(Y,e)),[S,Y]),oe=c((()=>I.map(v).map((e=>{const o=!J||""===Y||ee(e);return{...e,visible:o}}))),[I,J,Y,ee]),ne=c((()=>!(typeof _>"u")&&I.some((e=>"string"==typeof e?e===_:e.value===_))),[_,I]),[te,re]=i(ne&&void 0!==_?_:""),ie=""!==te,se=c((()=>{var e;return(null==(e=oe.find((e=>e.value===te)))?void 0:e.label)||F}),[oe,te,F]),ce=a(null),ae=s((e=>{ce.current=e,k&&("function"==typeof k?k(e):k.current=e),e&&re(e.value)}),[ce,k]),le=m(_);l((()=>{_!==le&&re(typeof _>"u"||!ne?"":_)}),[re,_,le,ne]);const ue=s((e=>{const o=e.value;Z(""),re(o),W()}),[Z,re,W]),pe=m(te);l((()=>{typeof pe>"u"||pe===te||te===_||(C&&C({type:"change",target:{name:y,value:te}}),ce.current&&ce.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[C,y,_,te,pe]);const de=a(null),me=a(!1),ve=a(null),fe=a(null),je=s(((e,o)=>{if(e&&!J){const e=o.current;e&&h(e,te)}else e?ve.current&&ve.current.focus():me.current&&fe.current&&fe.current.focus()}),[J,te]),[he]=u(z,{onFirstVisible:je,onTransitionEnd:je});d({ref:he});const be=s((()=>{var e;J&&Z(""),L&&(L({type:"blur",target:{name:y,value:te}}),null==(e=ce.current)||e.dispatchEvent(new Event("focusout",{bubbles:!0}))),me.current=!1,Q(!1)}),[L,Z,Q,J,y,te]),ge=s((e=>{const o=de.current;o&&o.contains(e.relatedTarget)||be()}),[be]),ke=s((()=>{me.current||(A&&A({type:"change",target:{name:y,value:te}}),me.current=!0)}),[A,te,y]),we=s((e=>{e.target.focus({preventScroll:!0})}),[]);l((()=>{const e=ce.current,o=ve.current,n=fe.current,t=de.current;return null==e||e.addEventListener("focus",(()=>{X?null==o||o.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{X?null==o||o.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()}))}}),[X]);const ye=s((e=>{"ArrowDown"!==e.key&&" "!==e.key||z?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),Q(!1)):(e.preventDefault(),e.stopPropagation(),Q(!0))}),[Q,z]),Ie=s((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=he.current;o&&h(o,J?void 0:te)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),Q(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&z&&(e.preventDefault(),e.stopPropagation());else{const o=he.current;o&&(e.preventDefault(),e.stopPropagation(),h(o,te))}}),[Q,he,te,J,z]),_e=s((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&ve.current?ve.current.focus():fe.current&&(re(e.currentTarget.value),Q(!1),fe.current.focus());else if("ArrowUp"===e.key&&he.current&&ve.current){const o=he.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==o?void 0:o.id)&&ve.current&&ve.current.focus()}}),[Q,he]);return l((()=>{const e=e=>{"Escape"===e.key&&z&&Q(!1)};return typeof window<"u"&&z&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[Q,z]),e(o,{children:[e("select",{name:y,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ae,value:te,onChange:g,children:[n("option",{value:""})," ",oe.map((e=>n("option",{hidden:!e.visible,value:e.value,children:e.label},`${U}-opt-${e.value}`)))]}),n(j,{ref:de,"data-testid":"jkl-select",className:t("jkl-select",E,{"jkl-select--inline":T,"jkl-select--open":z&&oe.some((e=>e.visible)),"jkl-select--no-value":!ie,"jkl-select--invalid":!!$||x}),tooltipProps:B&&{...B,triggerProps:{...B.triggerProps,onFocus:e=>{var o,n;null==(n=null==(o=B.triggerProps)?void 0:o.onFocus)||n.call(o,e),be()}}},...M,id:J?q:O,style:{"--jkl-select-max-shown-options":H,...K},density:V,label:P,labelProps:{id:G,srOnly:T,...D,htmlFor:J?q:O},helpLabel:N,errorLabel:$,render:o=>e("div",{className:"jkl-select__outer-wrapper",style:{width:R},children:[J&&n("input",{...o,id:q,hidden:!X,ref:ve,placeholder:"Søk",value:Y,onChange:e=>Z(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":ie?`${U}__${b(te)}`:void 0,"aria-controls":U,"aria-expanded":z,role:"combobox",onKeyDown:Ie,onBlur:ge,onFocus:ke,onClick:e=>{e.stopPropagation()}}),n("button",{...o,id:O,ref:fe,hidden:X,type:"button",name:`${y}-btn`,className:t("jkl-select__button",{"jkl-select__button--active-value":!!te}),"data-testid":"jkl-select__button","aria-label":`${se||"Velg"},${P}`,"aria-expanded":z,"aria-controls":U,onBlur:ge,onFocus:ke,onKeyDown:ye,onClick:W,onMouseDown:e=>{var o;e.preventDefault(),null==(o=fe.current)||o.focus()},children:se}),n("div",{id:U,ref:he,role:"listbox",className:"jkl-select__options-menu",hidden:!z||oe.every((e=>!e.visible)),"aria-labelledby":G,tabIndex:-1,"data-focus":"controlled",children:oe.map(((o,t)=>o.visible?e("button",{hidden:!o.visible,type:"button",id:`${U}__${b(o.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":o.value===te,role:"option",value:o.value,"data-testautoid":`jkl-select__option-${t}`,onBlur:ge,onFocus:ke,onKeyDown:_e,onClick:e=>{e.preventDefault(),ue(o)},onMouseOver:we,children:[o.label,o.description?n("span",{className:"jkl-select__option-description",children:o.description}):null]},`${U}-${o.value}`):null))}),n(f,{variant:"medium",pointingDown:!z,className:"jkl-select__arrow"})]})})]})}));k.displayName="Select";export{k as Select};
 //# sourceMappingURL=Select.js.map

package/build/es/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Select.js","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/index.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\n\ninterface PartialChangeEvent 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\ntype ChangeEventHandler = (event: PartialChangeEvent) => void;\n\ninterface Option extends ValuePair {\n    visible: boolean;\n}\n\nexport interface SelectProps extends Omit<InputGroupProps, \"children\">, DataTestAutoId {\n    id?: string;\n    name: string;\n    label: string;\n    labelProps?: Omit<LabelProps, \"children\" | \"density\" | \"htmlFor\" | \"standAlone\">;\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?: boolean | ((searchValue: string, searchItem: string | ValuePair) => boolean);\n    density?: Density;\n    width?: string;\n    onChange?: ChangeEventHandler;\n    onBlur?: ChangeEventHandler;\n    onFocus?: ChangeEventHandler;\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>((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        tooltipProps,\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 (item.label.toLowerCase().includes(searchValue.toLowerCase())) {\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 = !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) => (typeof item === \"string\" ? item === value : item.value === value));\n    }, [value, items]);\n\n    /// Valg av <option>\n\n    const [selectedValue, setSelectedValue] = useState<string>(valueIsInItems && value !== undefined ? value : \"\");\n    const hasSelectedValue = selectedValue !== \"\";\n    const selectedValueLabel = useMemo(\n        () => visibleItems.find((item) => item.value === selectedValue)?.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        },\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({ type: \"change\", target: { name, value: selectedValue } });\n        }\n        if (selectRef.current) {\n            selectRef.current.dispatchEvent(new Event(\"change\", { bubbles: true }));\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>(dropdownIsShown, {\n        onFirstVisible: handleFocusPlacement,\n        onTransitionEnd: handleFocusPlacement,\n    });\n\n    useListNavigation({ ref: dropdownRef });\n\n    const close = useCallback(() => {\n        if (isSearchable) {\n            setSearchValue(\"\");\n        }\n        if (onBlur) {\n            onBlur({ type: \"blur\", target: { name, value: selectedValue } });\n            selectRef.current?.dispatchEvent(new Event(\"focusout\", { bubbles: true }));\n        }\n        focusInsideRef.current = false;\n        setShown(false);\n    }, [onBlur, setSearchValue, setShown, isSearchable, name, selectedValue]);\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 && 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({ type: \"change\", target: { name, value: selectedValue } });\n            }\n            focusInsideRef.current = true;\n        }\n    }, [onFocus, selectedValue, name]);\n\n    const handleMouseOver = useCallback((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    // 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 && componentRootElement.contains(ev.relatedTarget as Node) && ev.preventDefault();\n        });\n\n        return () => {\n            select?.removeEventListener(\"focus\", () => {\n                showSearchInputField ? searchField?.focus() : button?.focus();\n            });\n            select?.removeEventListener(\"blur\", function (this, ev) {\n                componentRootElement && componentRootElement.contains(ev.relatedTarget as Node) && 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 ((e.key === \"ArrowDown\" || e.key === \" \") && !dropdownIsShown) {\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        [setShown, dropdownRef, selectedValue, isSearchable, dropdownIsShown],\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('[role=\"option\"]:not([hidden])');\n                    if (e.currentTarget.id === firstVisible?.id && searchFieldRef.current) {\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> {/* Tom option må være et valg, ellers vil <select> alltid ha en value */}\n                {visibleItems.map((item) => (\n                    <option key={`${listId}-opt-${item.value}`} hidden={!item.visible} value={item.value}>\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\": dropdownIsShown && visibleItems.some((item) => item.visible),\n                    \"jkl-select--no-value\": !hasSelectedValue,\n                    \"jkl-select--invalid\": !!errorLabel || invalid,\n                })}\n                tooltipProps={\n                    tooltipProps && {\n                        ...tooltipProps,\n                        triggerProps: {\n                            ...tooltipProps.triggerProps,\n                            onFocus: (e) => {\n                                tooltipProps.triggerProps?.onFocus?.(e);\n                                close();\n                            },\n                        },\n                    }\n                }\n                {...rest}\n                id={isSearchable ? searchInputId : buttonId}\n                style={{ [\"--jkl-select-max-shown-options\"]: maxShownOptions, ...style } as CSSProperties}\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={(inputProps) => (\n                    <div className=\"jkl-select__outer-wrapper\" style={{ width }}>\n                        {isSearchable && (\n                            <input\n                                {...inputProps}\n                                id={searchInputId}\n                                hidden={!showSearchInputField}\n                                ref={searchFieldRef}\n                                placeholder=\"Søk\"\n                                value={searchValue}\n                                onChange={(e) => setSearchValue(e.target.value)}\n                                data-testid=\"jkl-select__search-input\"\n                                className=\"jkl-select__search-input\"\n                                aria-autocomplete=\"list\"\n                                aria-activedescendant={\n                                    hasSelectedValue ? `${listId}__${toLower(selectedValue)}` : 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                        <button\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\": !!selectedValue,\n                            })}\n                            data-testid=\"jkl-select__button\"\n                            aria-label={`${selectedValueLabel || \"Velg\"},${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={!dropdownIsShown || visibleItems.every((item) => !item.visible)}\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(item.value)}`}\n                                        className=\"jkl-select__option\"\n                                        data-testid=\"jkl-select__option\"\n                                        aria-selected={item.value === selectedValue}\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\">{item.description}</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\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","tooltipProps","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","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","buttonRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","focus","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","triggerProps","_b","call","srOnly","htmlFor","render","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}

package/build/es/components/select/index.d.ts

@@ -0,0 +1,4 @@
+export type { SelectProps } from './Select.js';
+export { Select } from './Select.js';
+export type { NativeSelectProps } from './NativeSelect.js';
+export { NativeSelect } from './NativeSelect.js';

package/build/es/components/select/index.js

@@ -1,2 +1,2 @@
-import{N as e,S as a}from"../../../ExpandableTableRow-8_2Qs86T.js";export{e as NativeSelect,a as Select};
+import{Select as e}from"./Select.js";import{NativeSelect as t}from"./NativeSelect.js";export{t as NativeSelect,e as Select};
 //# sourceMappingURL=index.js.map

package/build/es/components/summary-table/index.d.ts

@@ -0,0 +1,2 @@
+export { SummaryTable } from './SummaryTable.js';
+export { SummaryTableRow } from './SummaryTableRow.js';

package/build/es/components/summary-table/mocks.js

@@ -0,0 +1,2 @@
+import{jsxs as e,Fragment as r,jsx as a}from"react/jsx-runtime";import{SummaryTableRow as o}from"./SummaryTableRow.js";const n="­",t=["Product","Price"],s=e(r,{children:[a(o,{header:`Uføre${n}pensjon`,content:"340,00 kr/mnd"}),a(o,{className:"summary-table-example__custom-row",header:`Livs${n}forsikring`,content:"Tatt ut av tilbudet"}),a(o,{header:`Innbo${n}forsikring`,content:"122,00 kr/mnd"}),a(o,{header:`Reise${n}forsikring`,content:"249,00 kr/mnd"}),a(o,{className:"summary-table-example__custom-row",header:"Rabatt",content:"- 17,50 kr/mnd"})]}),m=e(r,{children:[a(o,{header:"Total sum",content:"693,50 kr/mnd"}),a(o,{header:a("span",{className:"jkl-sr-only",children:"Total sum per år"}),content:"8322,50 kr/mnd"})]}),c={header:t,body:s,footer:m,caption:"Informasjon om produkter og pris i handlekurven"};export{s as mockBody,m as mockFooter,t as mockHeader,c as mockProps};
+//# sourceMappingURL=mocks.js.map

package/build/es/components/summary-table/mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mocks.js","sources":["../../../../src/components/summary-table/mocks.tsx"],"sourcesContent":["import React from \"react\";\nimport { SummaryTableRow } from \"./SummaryTableRow.js\";\n\nconst SOFT_HYPHEN = \"\\u00AD\";\n\nexport const mockHeader = [\"Product\", \"Price\"] as [string, string];\nexport const mockBody = (\n    <>\n        <SummaryTableRow header={`Uføre${SOFT_HYPHEN}pensjon`} content=\"340,00 kr/mnd\" />\n        <SummaryTableRow\n            className=\"summary-table-example__custom-row\"\n            header={`Livs${SOFT_HYPHEN}forsikring`}\n            content=\"Tatt ut av tilbudet\"\n        />\n        <SummaryTableRow header={`Innbo${SOFT_HYPHEN}forsikring`} content=\"122,00 kr/mnd\" />\n        <SummaryTableRow header={`Reise${SOFT_HYPHEN}forsikring`} content=\"249,00 kr/mnd\" />\n        <SummaryTableRow className=\"summary-table-example__custom-row\" header=\"Rabatt\" content=\"- 17,50 kr/mnd\" />\n    </>\n);\nexport const mockFooter = (\n    <>\n        <SummaryTableRow header=\"Total sum\" content=\"693,50 kr/mnd\" />\n        <SummaryTableRow header={<span className=\"jkl-sr-only\">Total sum per år</span>} content=\"8322,50 kr/mnd\" />\n    </>\n);\n\nexport const mockProps = {\n    header: mockHeader,\n    body: mockBody,\n    footer: mockFooter,\n    caption: \"Informasjon om produkter og pris i handlekurven\",\n};\n"],"names":["SOFT_HYPHEN","mockHeader","mockBody","jsxs","Fragment","children","jsx","SummaryTableRow","header","content","className","mockFooter","mockProps","body","footer","caption"],"mappings":"uHAGA,MAAMA,EAAc,IAEPC,EAAa,CAAC,UAAW,SACzBC,EAELC,EAAAC,EAAA,CAAAC,SAAA,CAAAC,EAACC,GAAgBC,OAAQ,QAAQR,WAAsBS,QAAQ,kBAC/DH,EAACC,EAAA,CACGG,UAAU,oCACVF,OAAQ,OAAOR,cACfS,QAAQ,0BAEXF,EAAgB,CAAAC,OAAQ,QAAQR,cAAyBS,QAAQ,oBACjEF,EAAgB,CAAAC,OAAQ,QAAQR,cAAyBS,QAAQ,oBACjEF,EAAgB,CAAAG,UAAU,oCAAoCF,OAAO,SAASC,QAAQ,sBAGlFE,EAELR,EAAAC,EAAA,CAAAC,SAAA,CAAAC,EAACC,EAAgB,CAAAC,OAAO,YAAYC,QAAQ,kBAC5CH,EAACC,EAAgB,CAAAC,OAASF,EAAA,OAAA,CAAKI,UAAU,cAAcL,SAAA,qBAAyBI,QAAQ,sBAInFG,EAAY,CACrBJ,OAAQP,EACRY,KAAMX,EACNY,OAAQH,EACRI,QAAS"}

package/build/es/components/system-message/SystemMessage.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+interface Props extends WithChildren {
+    id?: string;
+    className?: string;
+    density?: Density;
+    maxContentWidth?: string;
+    paddingLeft?: string;
+    /** Overstyr standardrollen til meldingen. Om du ønsker å "skru av" rollen kan du bruke verdien `none presentation`. */
+    role?: string;
+    dismissed?: boolean;
+    dismissAction?: {
+        handleDismiss: () => void;
+        buttonTitle?: string;
+    };
+}
+export declare const InfoSystemMessage: React.FC<Props>;
+export declare const ErrorSystemMessage: React.FC<Props>;
+export declare const WarningSystemMessage: React.FC<Props>;
+export declare const SuccessSystemMessage: React.FC<Props>;
+export {};

package/build/es/components/system-message/SystemMessage.js

@@ -1,2 +1,2 @@
-import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import"react";import"../../hooks/useScreen/useScreen.js";import{useId as t}from"../../hooks/useId/useId.js";import{DismissButton as m}from"./common/DismissButton.js";import{MessageIcon as i}from"./common/MessageIcon.js";function n(n){return({id:o,className:r,density:c,maxContentWidth:d,paddingLeft:l,role:g="status",dismissed:y,dismissAction:u,children:p,...j})=>{const f=t(o||"jkl-system-message",{generateSuffix:!o});return s("div",{role:g,...j,id:f,className:a("jkl-system-message","jkl-system-message--"+n,r,{"jkl-system-message--dismissed":y}),"data-density":c,children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:d,paddingLeft:l},children:[s(i,{messageType:n}),s("span",{className:"jkl-system-message__message",children:p}),(null==u?void 0:u.handleDismiss)&&s(m,{"aria-controls":f,className:"jkl-system-message__dismiss-button",label:u.buttonTitle||"Lukk",onClick:u.handleDismiss})]})})}}const o=n("info");o.displayName="InfoSystemMessage";const r=n("error");r.displayName="ErrorSystemMessage";const c=n("warning");c.displayName="WarningSystemMessage";const d=n("success");d.displayName="SuccessSystemMessage";export{r as ErrorSystemMessage,o as InfoSystemMessage,d as SuccessSystemMessage,c as WarningSystemMessage};
+import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useId as t}from"../../hooks/useId/useId.js";import{DismissButton as m}from"../message/DismissButton.js";import{MessageIcon as i}from"./common/MessageIcon.js";function n(n){return({id:o,className:r,density:d,maxContentWidth:l,paddingLeft:c,role:g="status",dismissed:y,dismissAction:u,children:j,...p})=>{const f=t(o||"jkl-system-message",{generateSuffix:!o});return s("div",{role:g,...p,id:f,className:a("jkl-system-message","jkl-system-message--"+n,r,{"jkl-system-message--dismissed":y}),"data-density":d,children:e("div",{className:"jkl-system-message__content","data-testid":"system-message-content","data-theme":"light",style:{maxWidth:l,paddingLeft:c},children:[s(i,{messageType:n}),s("span",{className:"jkl-system-message__message",children:j}),(null==u?void 0:u.handleDismiss)&&s(m,{"aria-controls":f,className:"jkl-system-message__dismiss-button",label:u.buttonTitle||"Lukk",onClick:u.handleDismiss})]})})}}const o=n("info");o.displayName="InfoSystemMessage";const r=n("error");r.displayName="ErrorSystemMessage";const d=n("warning");d.displayName="WarningSystemMessage";const l=n("success");l.displayName="SuccessSystemMessage";export{r as ErrorSystemMessage,o as InfoSystemMessage,l as SuccessSystemMessage,d as WarningSystemMessage};
 //# sourceMappingURL=SystemMessage.js.map

package/build/es/components/system-message/SystemMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SystemMessage.js","sources":["../../../../src/components/system-message/SystemMessage.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { Density, WithChildren } from \"../..\";\nimport { useId } from \"../../hooks\";\nimport { DismissButton } from \"./common/DismissButton\";\nimport { MessageIcon } from \"./common/MessageIcon\";\n\ntype messageTypes = \"info\" | \"error\" | \"success\" | \"warning\";\n\ninterface Props 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(messageType: messageTypes): React.FC<Props> {\n    const SystemMessage: React.FC<Props> = ({\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\", { generateSuffix: !id });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\"jkl-system-message\", \"jkl-system-message--\" + messageType, className, {\n                    \"jkl-system-message--dismissed\": dismissed,\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\">{children}</span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\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":"4TAwBA,SAASA,EAAcC,GAgDZ,MA/CgC,EACnCC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEGC,MAAAA,EAAWC,EAAMX,GAAM,qBAAsB,CAAEY,gBAAiBZ,IAGlE,OAAAa,EAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAK,qBAAsB,uBAAyBf,EAAaE,EAAW,CACnF,gCAAiCK,IAErC,eAAcJ,EAEdM,SAAAO,EAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,GAAYnB,YAAAA,IACZc,EAAA,OAAA,CAAKZ,UAAU,8BAA+BO,SAAAA,KAC9C,MAAAD,OAAA,EAAAA,EAAeY,gBACZN,EAACO,EAAA,CACG,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"}
+{"version":3,"file":"SystemMessage.js","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\ninterface Props 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(messageType: messageTypes): React.FC<Props> {\n    const SystemMessage: React.FC<Props> = ({\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\", { generateSuffix: !id });\n\n        return (\n            <div\n                role={role}\n                {...rest}\n                id={systemId}\n                className={clsx(\"jkl-system-message\", \"jkl-system-message--\" + messageType, className, {\n                    \"jkl-system-message--dismissed\": dismissed,\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\">{children}</span>\n                    {dismissAction?.handleDismiss && (\n                        <DismissButton\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":"qQAwBA,SAASA,EAAcC,GAgDZ,MA/CgC,EACnCC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,MAEGC,MAAAA,EAAWC,EAAMX,GAAM,qBAAsB,CAAEY,gBAAiBZ,IAGlE,OAAAa,EAAC,MAAA,CACGR,KAAAA,KACII,EACJT,GAAIU,EACJT,UAAWa,EAAK,qBAAsB,uBAAyBf,EAAaE,EAAW,CACnF,gCAAiCK,IAErC,eAAcJ,EAEdM,SAAAO,EAAC,MAAA,CACGd,UAAU,8BACV,cAAY,yBACZ,aAAW,QACXe,MAAO,CACHC,SAAUd,EACVC,YAAAA,GAGJI,SAAA,CAAAK,EAACK,GAAYnB,YAAAA,IACZc,EAAA,OAAA,CAAKZ,UAAU,8BAA+BO,SAAAA,KAC9C,MAAAD,OAAA,EAAAA,EAAeY,gBACZN,EAACO,EAAA,CACG,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"}

package/build/es/components/system-message/common/DismissButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DismissButton.js","sources":["../../../../../src/components/system-message/common/DismissButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\nimport { CloseIcon } from \"../../icon\";\n\nexport interface DismissButtonProps extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n    label?: string;\n}\n\nexport const DismissButton = forwardRef<HTMLButtonElement, DismissButtonProps>(({ label = \"Lukk\", ...rest }, ref) => {\n    return (\n        <button ref={ref} type=\"button\" title={label} {...rest}>\n            <CloseIcon variant=\"small\" bold />\n            <span className=\"jkl-sr-only\">{label}</span>\n        </button>\n    );\n});\n\nDismissButton.displayName = \"DismissButton\";\n"],"names":["DismissButton","forwardRef","label","rest","ref","jsxs","type","title","children","jsx","CloseIcon","variant","bold","className","displayName"],"mappings":"qhDAOa,MAAAA,EAAgBC,GAAkD,EAAGC,MAAAA,EAAQ,UAAWC,GAAQC,IAErGC,EAAC,UAAOD,IAAAA,EAAUE,KAAK,SAASC,MAAOL,KAAWC,EAC9CK,SAAA,CAAAC,EAACC,EAAU,CAAAC,QAAQ,QAAQC,MAAI,IAC9BH,EAAA,OAAA,CAAKI,UAAU,cAAeL,SAAMN,SAKjDF,EAAcc,YAAc"}
+{"version":3,"file":"DismissButton.js","sources":["../../../../../src/components/system-message/common/DismissButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\nimport { CloseIcon } from \"../../icon/index.js\";\n\nexport interface DismissButtonProps extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n    label?: string;\n}\n\nexport const DismissButton = forwardRef<HTMLButtonElement, DismissButtonProps>(({ label = \"Lukk\", ...rest }, ref) => {\n    return (\n        <button ref={ref} type=\"button\" title={label} {...rest}>\n            <CloseIcon variant=\"small\" bold />\n            <span className=\"jkl-sr-only\">{label}</span>\n        </button>\n    );\n});\n\nDismissButton.displayName = \"DismissButton\";\n"],"names":["DismissButton","forwardRef","label","rest","ref","jsxs","type","title","children","jsx","CloseIcon","variant","bold","className","displayName"],"mappings":"qhDAOa,MAAAA,EAAgBC,GAAkD,EAAGC,MAAAA,EAAQ,UAAWC,GAAQC,IAErGC,EAAC,UAAOD,IAAAA,EAAUE,KAAK,SAASC,MAAOL,KAAWC,EAC9CK,SAAA,CAAAC,EAACC,EAAU,CAAAC,QAAQ,QAAQC,MAAI,IAC9BH,EAAA,OAAA,CAAKI,UAAU,cAAeL,SAAMN,SAKjDF,EAAcc,YAAc"}

package/build/es/components/system-message/common/MessageIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageIcon.js","sources":["../../../../../src/components/system-message/common/MessageIcon.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { ErrorIcon, InfoIcon, WarningIcon, SuccessIcon } from \"../../icon\";\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":["MessageIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon"],"mappings":"uiDASO,MAAMA,EAAyB,EAAGC,YAAAA,MACrC,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,6BAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,6BAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,6BAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,6BAElC,QACW,OAAA,KACf"}
+{"version":3,"file":"MessageIcon.js","sources":["../../../../../src/components/system-message/common/MessageIcon.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { ErrorIcon, InfoIcon, WarningIcon, SuccessIcon } from \"../../icon/index.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":["MessageIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon"],"mappings":"uiDASO,MAAMA,EAAyB,EAAGC,YAAAA,MACrC,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,6BAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,6BAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,6BAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,6BAElC,QACW,OAAA,KACf"}

package/build/es/components/system-message/index.d.ts

@@ -0,0 +1 @@
+export { InfoSystemMessage, WarningSystemMessage, ErrorSystemMessage, SuccessSystemMessage } from './SystemMessage.js';

package/build/es/components/table/DataTable.d.ts

@@ -0,0 +1,18 @@
+import { default as React, TableHTMLAttributes } from 'react';
+import { Density } from '../../core/types.js';
+export interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Beskrivelse av tabellen for skjermlesere */
+    caption?: string;
+    density?: Density;
+    collapseToList?: boolean;
+    rows: React.ReactNode[][];
+    columns: string[];
+    emptyTableText?: string;
+    /**
+     * Velg mellom vertikal sentrering av innholdet eller toppjustering. Typisk skal innholdet være toppjustert, men dersom raden har knapper kan midtstilling fungere bedre.
+     * @default "top"
+     */
+    verticalAlign?: "center" | "top";
+}
+declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>>;
+export { DataTable };

package/build/es/components/table/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../../src/components/table/DataTable.tsx"],"sourcesContent":["import React, { forwardRef, TableHTMLAttributes } from \"react\";\nimport { Density } from \"../..\";\nimport { Table } from \"./Table\";\nimport { TableBody } from \"./TableBody\";\nimport { TableCaption } from \"./TableCaption\";\nimport { TableCell } from \"./TableCell\";\nimport { TableHead } from \"./TableHead\";\nimport { TableHeader } from \"./TableHeader\";\nimport { TableRow } from \"./TableRow\";\n\nexport interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {\n    /** Beskrivelse av tabellen for skjermlesere */\n    caption?: string;\n    density?: Density;\n    collapseToList?: boolean;\n    rows: React.ReactNode[][];\n    columns: string[];\n    emptyTableText?: string;\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 DataTable = forwardRef<HTMLTableElement, DataTableProps>(\n    ({ caption, columns, emptyTableText, rows, verticalAlign, ...rest }, ref) => {\n        return (\n            <Table fullWidth={true} {...rest} ref={ref}>\n                {caption && <TableCaption srOnly>{caption}</TableCaption>}\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} density=\"compact\" bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.length === 0 && emptyTableText && (\n                        <TableRow>\n                            <TableCell colSpan={columns.length}>{emptyTableText}</TableCell>\n                        </TableRow>\n                    )}\n                    {rows.map((row, rowIndex) => (\n                        <TableRow key={rowIndex}>\n                            {row.map((cell, cellIndex) => (\n                                <TableCell key={cellIndex} data-th={columns[cellIndex]} verticalAlign={verticalAlign}>\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        );\n    },\n);\n\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\n"],"names":["DataTable","forwardRef","caption","columns","emptyTableText","rows","verticalAlign","rest","ref","Table","fullWidth","children","jsx","TableCaption","srOnly","TableHead","TableRow","map","column","index","TableHeader","density","bold","TableBody","length","TableCell","colSpan","row","rowIndex","cell","cellIndex","displayName"],"mappings":"kYAyBA,MAAMA,EAAYC,GACd,EAAGC,QAAAA,EAASC,QAAAA,EAASC,eAAAA,EAAgBC,KAAAA,EAAMC,cAAAA,KAAkBC,GAAQC,MAE5DC,EAAM,CAAAC,WAAW,KAAUH,EAAMC,IAAAA,EAC7BG,SAAA,CAAAT,GAAYU,EAAAC,EAAA,CAAaC,QAAM,EAAEH,SAAQT,MACzCa,EACG,CAAAJ,SAAAC,EAACI,GACIL,SAAQR,EAAAc,KAAI,CAACC,EAAQC,MACjBC,EAAwB,CAAAC,QAAQ,UAAUC,MAAI,EAC1CX,YADaQ,WAM7BI,EACI,CAAAZ,SAAA,CAAgB,IAAXN,EAAAmB,QAAgBpB,GACjBQ,EAAAI,EAAA,CACGL,SAACC,EAAAa,EAAA,CAAUC,QAASvB,EAAQqB,OAASb,SAAAP,MAG5CC,EAAKY,KAAI,CAACU,EAAKC,MACXZ,EACI,CAAAL,SAAAgB,EAAIV,KAAI,CAACY,EAAMC,MACXL,EAA0B,CAAA,UAAStB,EAAQ2B,GAAYxB,cAAAA,EACnDK,YADWmB,MAFTF,aAcvC5B,EAAU+B,YAAc"}
+{"version":3,"file":"DataTable.js","sources":["../../../../src/components/table/DataTable.tsx"],"sourcesContent":["import React, { forwardRef, TableHTMLAttributes } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { Table } from \"./Table.js\";\nimport { TableBody } from \"./TableBody.js\";\nimport { TableCaption } from \"./TableCaption.js\";\nimport { TableCell } from \"./TableCell.js\";\nimport { TableHead } from \"./TableHead.js\";\nimport { TableHeader } from \"./TableHeader.js\";\nimport { TableRow } from \"./TableRow.js\";\n\nexport interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {\n    /** Beskrivelse av tabellen for skjermlesere */\n    caption?: string;\n    density?: Density;\n    collapseToList?: boolean;\n    rows: React.ReactNode[][];\n    columns: string[];\n    emptyTableText?: string;\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 DataTable = forwardRef<HTMLTableElement, DataTableProps>(\n    ({ caption, columns, emptyTableText, rows, verticalAlign, ...rest }, ref) => {\n        return (\n            <Table fullWidth={true} {...rest} ref={ref}>\n                {caption && <TableCaption srOnly>{caption}</TableCaption>}\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} density=\"compact\" bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.length === 0 && emptyTableText && (\n                        <TableRow>\n                            <TableCell colSpan={columns.length}>{emptyTableText}</TableCell>\n                        </TableRow>\n                    )}\n                    {rows.map((row, rowIndex) => (\n                        <TableRow key={rowIndex}>\n                            {row.map((cell, cellIndex) => (\n                                <TableCell key={cellIndex} data-th={columns[cellIndex]} verticalAlign={verticalAlign}>\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        );\n    },\n);\n\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\n"],"names":["DataTable","forwardRef","caption","columns","emptyTableText","rows","verticalAlign","rest","ref","Table","fullWidth","children","jsx","TableCaption","srOnly","TableHead","TableRow","map","column","index","TableHeader","density","bold","TableBody","length","TableCell","colSpan","row","rowIndex","cell","cellIndex","displayName"],"mappings":"kYAyBA,MAAMA,EAAYC,GACd,EAAGC,QAAAA,EAASC,QAAAA,EAASC,eAAAA,EAAgBC,KAAAA,EAAMC,cAAAA,KAAkBC,GAAQC,MAE5DC,EAAM,CAAAC,WAAW,KAAUH,EAAMC,IAAAA,EAC7BG,SAAA,CAAAT,GAAYU,EAAAC,EAAA,CAAaC,QAAM,EAAEH,SAAQT,MACzCa,EACG,CAAAJ,SAAAC,EAACI,GACIL,SAAQR,EAAAc,KAAI,CAACC,EAAQC,MACjBC,EAAwB,CAAAC,QAAQ,UAAUC,MAAI,EAC1CX,YADaQ,WAM7BI,EACI,CAAAZ,SAAA,CAAgB,IAAXN,EAAAmB,QAAgBpB,GACjBQ,EAAAI,EAAA,CACGL,SAACC,EAAAa,EAAA,CAAUC,QAASvB,EAAQqB,OAASb,SAAAP,MAG5CC,EAAKY,KAAI,CAACU,EAAKC,MACXZ,EACI,CAAAL,SAAAgB,EAAIV,KAAI,CAACY,EAAMC,MACXL,EAA0B,CAAA,UAAStB,EAAQ2B,GAAYxB,cAAAA,EACnDK,YADWmB,MAFTF,aAcvC5B,EAAU+B,YAAc"}

package/build/es/components/table/ExpandableTableRow.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { TableRowProps } from './TableRow.js';
+export interface ExpandableTableRowProps extends TableRowProps {
+    expandedChildren: React.ReactNode;
+    /**
+     * Setter bredden på raden som blir åpnet
+     * @default 100
+     */
+    colSpan?: number;
+    /**
+     * Om du ønsker en controlled komponent. Hvis du ikke setter denne vil komponenten håndtere state selv.
+     */
+    isOpen?: boolean;
+    onToggle?: (isOpen: boolean) => void;
+}
+declare const ExpandableTableRow: React.ForwardRefExoticComponent<ExpandableTableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export { ExpandableTableRow };

package/build/es/components/table/ExpandableTableRow.js

@@ -1,2 +1,2 @@
-import"react/jsx-runtime";import"../../../clsx-BeLtu-UY.js";import"react";import"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import{a as e}from"../../../ExpandableTableRow-8_2Qs86T.js";import"./TableRow.js";export{e as ExpandableTableRow};
+import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import r,{forwardRef as n,useState as s,useEffect as d}from"react";import{useAnimatedHeight as t}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import"../../hooks/useScreen/useScreen.js";import{useId as i}from"../../hooks/useId/useId.js";import{ExpandableTableRowController as p}from"./ExpandableTableRowController.js";import{TableRow as c}from"./TableRow.js";const b=n(((n,b)=>{const{className:m,clickable:x,children:h,expandedChildren:j,onToggle:w,colSpan:k=100,isOpen:f,...u}=n,[g,E]=s(f??!1);d((()=>{typeof f>"u"||E(f)}),[f]);const[R]=t(g,{timing:"expressive"}),T=()=>{const e=!g;w&&w(e),E(e)},C=o("jkl-table-row--expandable",m,{"jkl-table-row--expanded":g,"jkl-expandable-table-row--clickable-external":x}),S=o("jkl-expandable-table-row__expanded-row",{"jkl-expandable-table-row__expanded-row--expanded":g}),y=i("jkl-expandable-table-row"),N=i("jkl-expandable-table-row-controller");return e(a,{children:[l(c,{className:C,clickable:x??{onClick:()=>T()},...u,ref:b,children:r.Children.map(h,(e=>r.isValidElement(e)&&e.type==p?r.cloneElement(e,{isOpen:g,onClick:()=>T(),"aria-controls":y,id:N}):e))}),l("tr",{"aria-hidden":!g,children:l("td",{colSpan:k,children:l("div",{ref:R,className:S,id:y,"aria-labelledby":N,hidden:!g,role:"group",children:j})})})]})}));b.displayName="ExpandableTableRow";export{b as ExpandableTableRow};
 //# sourceMappingURL=ExpandableTableRow.js.map

package/build/es/components/table/ExpandableTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTableRow.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"ExpandableTableRow.js","sources":["../../../../src/components/table/ExpandableTableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useAnimatedHeight } from \"../../hooks/index.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ExpandableTableRowController, ExpandableTableRowControllerProps } from \"./ExpandableTableRowController.js\";\nimport { TableRow, TableRowProps } from \"./TableRow.js\";\n\nexport interface ExpandableTableRowProps extends TableRowProps {\n    expandedChildren: React.ReactNode;\n    /**\n     * Setter bredden på raden som blir åpnet\n     * @default 100\n     */\n    colSpan?: number;\n    /**\n     * Om du ønsker en controlled komponent. Hvis du ikke setter denne vil komponenten håndtere state selv.\n     */\n    isOpen?: boolean;\n    onToggle?: (isOpen: boolean) => void;\n}\n\nconst ExpandableTableRow = forwardRef<HTMLTableRowElement, ExpandableTableRowProps>((props, ref) => {\n    const {\n        className,\n        clickable,\n        children,\n        expandedChildren,\n        onToggle,\n        colSpan = 100,\n        isOpen: isOpenProp,\n        ...rest\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(isOpenProp ?? false);\n    useEffect(() => {\n        if (typeof isOpenProp === \"undefined\") {\n            return;\n        }\n        setIsOpen(isOpenProp);\n    }, [isOpenProp]);\n\n    const [animationRef] = useAnimatedHeight<HTMLDivElement>(isOpen, { timing: \"expressive\" });\n\n    const toggleOpen = () => {\n        const newIsOpen = !isOpen;\n\n        if (onToggle) {\n            onToggle(newIsOpen);\n        }\n\n        setIsOpen(newIsOpen);\n    };\n\n    const tableRowClassName = clsx(\"jkl-table-row--expandable\", className, {\n        [\"jkl-table-row--expanded\"]: isOpen,\n        [\"jkl-expandable-table-row--clickable-external\"]: clickable,\n    });\n    const childWrapperClassName = clsx(\"jkl-expandable-table-row__expanded-row\", {\n        [\"jkl-expandable-table-row__expanded-row--expanded\"]: isOpen,\n    });\n\n    const tableRowId = useId(\"jkl-expandable-table-row\");\n    const expandableTableRowControllerId = useId(\"jkl-expandable-table-row-controller\");\n\n    return (\n        <>\n            <TableRow\n                className={tableRowClassName}\n                clickable={\n                    clickable ?? {\n                        onClick: () => toggleOpen(),\n                    }\n                }\n                {...rest}\n                ref={ref}\n            >\n                {React.Children.map(children, (child) => {\n                    if (\n                        React.isValidElement<ExpandableTableRowControllerProps>(child) &&\n                        child.type == ExpandableTableRowController\n                    ) {\n                        return React.cloneElement<ExpandableTableRowControllerProps>(child, {\n                            isOpen,\n                            onClick: () => toggleOpen(),\n                            \"aria-controls\": tableRowId,\n                            id: expandableTableRowControllerId,\n                        });\n                    } else {\n                        return child;\n                    }\n                })}\n            </TableRow>\n            {/*\n                Use a table row with a single as wide as possible cell to contain content. This allows\n                using useAnimatedHeight to animate the row height.\n            */}\n            <tr aria-hidden={!isOpen}>\n                <td colSpan={colSpan}>\n                    <div\n                        ref={animationRef}\n                        className={childWrapperClassName}\n                        id={tableRowId}\n                        aria-labelledby={expandableTableRowControllerId}\n                        hidden={!isOpen}\n                        role=\"group\"\n                    >\n                        {expandedChildren}\n                    </div>\n                </td>\n            </tr>\n        </>\n    );\n});\n\nExpandableTableRow.displayName = \"ExpandableTableRow\";\n\nexport { ExpandableTableRow };\n"],"names":["ExpandableTableRow","forwardRef","props","ref","className","clickable","children","expandedChildren","onToggle","colSpan","isOpen","isOpenProp","rest","setIsOpen","useState","useEffect","animationRef","useAnimatedHeight","timing","toggleOpen","newIsOpen","tableRowClassName","clsx","childWrapperClassName","tableRowId","useId","expandableTableRowControllerId","jsxs","Fragment","jsx","TableRow","onClick","React","Children","map","child","isValidElement","type","ExpandableTableRowController","cloneElement","id","hidden","role","displayName"],"mappings":"geAqBA,MAAMA,EAAqBC,GAAyD,CAACC,EAAOC,KAClF,MACFC,UAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,iBAAAA,EACAC,SAAAA,EACAC,QAAAA,EAAU,IACVC,OAAQC,KACLC,GACHV,GAEGQ,EAAQG,GAAaC,EAASH,IAAc,GACnDI,GAAU,YACKJ,EAAe,KAG1BE,EAAUF,EAAU,GACrB,CAACA,IAEE,MAACK,GAAgBC,EAAkCP,EAAQ,CAAEQ,OAAQ,eAErEC,EAAa,KACf,MAAMC,GAAaV,EAEfF,GACAA,EAASY,GAGbP,EAAUO,EAAS,EAGjBC,EAAoBC,EAAK,4BAA6BlB,EAAW,CAClE,0BAA4BM,EAC5B,+CAAiDL,IAEhDkB,EAAwBD,EAAK,yCAA0C,CACxE,mDAAqDZ,IAGpDc,EAAaC,EAAM,4BACnBC,EAAiCD,EAAM,uCAE7C,OAEQE,EAAAC,EAAA,CAAAtB,SAAA,CAAAuB,EAACC,EAAA,CACG1B,UAAWiB,EACXhB,UACIA,GAAa,CACT0B,QAAS,IAAMZ,QAGnBP,EACJT,IAAAA,EAECG,SAAM0B,EAAAC,SAASC,IAAI5B,GAAW6B,GAEvBH,EAAMI,eAAkDD,IACxDA,EAAME,MAAQC,EAEPN,EAAMO,aAAgDJ,EAAO,CAChEzB,OAAAA,EACAqB,QAAS,IAAMZ,IACf,gBAAiBK,EACjBgB,GAAId,IAGDS,QAQlB,KAAG,CAAA,eAAczB,EACdJ,SAAAuB,EAAC,MAAGpB,QAAAA,EACAH,SAAAuB,EAAC,MAAA,CACG1B,IAAKa,EACLZ,UAAWmB,EACXiB,GAAIhB,EACJ,kBAAiBE,EACjBe,QAAS/B,EACTgC,KAAK,QAEJpC,SAAAC,UAIjB,IAIRP,EAAmB2C,YAAc"}

package/build/es/components/table/ExpandableTableRowController.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { TableCellProps } from './TableCell.js';
+export interface ExpandableTableRowControllerProps extends TableCellProps {
+    /** Settes automatisk av ExpandableTableRow */
+    isOpen?: boolean;
+    /** Settes automatisk av ExpandableTableRow */
+    onClick?: () => void;
+}
+declare const ExpandableTableRowController: React.ForwardRefExoticComponent<ExpandableTableRowControllerProps & React.RefAttributes<HTMLTableCellElement>>;
+export { ExpandableTableRowController };

package/build/es/components/table/ExpandableTableRowController.js

@@ -1,2 +1,2 @@
-import"react/jsx-runtime";import"../../../clsx-BeLtu-UY.js";import"react";import{b as e}from"../../../ExpandableTableRow-8_2Qs86T.js";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import"./TableCell.js";import"./tableContext.js";export{e as ExpandableTableRowController};
+import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as o}from"react";import{Expander as t}from"../expander/Expander.js";import{TableCell as l}from"./TableCell.js";import{useTableContext as r}from"./tableContext.js";const n=o((({isOpen:o,onClick:n,children:s,className:i,id:p,"aria-controls":d,...c},x)=>{if(void 0===o||"function"!=typeof n)throw new Error("ExpandableTableRowController must have ExpandableTableRow as parent");const{density:b,collapseToList:m}=r(),f=c["data-th"],w=m?f:void 0;return e(l,{className:a("jkl-table-cell--expand",{"jkl-table-cell--expand-without-text":!s},i),...c,ref:x,children:e(t,{className:a("jkl-table-row-expand-button",{"jkl-table-row-expand-button--expanded":o}),id:p,density:b,isExpanded:o,"aria-controls":d,"aria-label":s?void 0:f||"Ekspander rad",onClick:e=>{e.stopPropagation(),n()},onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&(e.stopPropagation(),e.preventDefault(),n())},children:s??w})})}));n.displayName="ExpandableTableRowController";export{n as ExpandableTableRowController};
 //# sourceMappingURL=ExpandableTableRowController.js.map

package/build/es/components/table/ExpandableTableRowController.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableTableRowController.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"ExpandableTableRowController.js","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<HTMLTableCellElement, ExpandableTableRowControllerProps>(\n    ({ isOpen, onClick, children, className, id, \"aria-controls\": ariaControls, ...rest }, ref) => {\n        if (isOpen === undefined || typeof onClick !== \"function\") {\n            throw new Error(\"ExpandableTableRowController must have ExpandableTableRow as parent\");\n        }\n\n        const { density, 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 ? dataTh : 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                    className={clsx(\"jkl-table-row-expand-button\", {\n                        [\"jkl-table-row-expand-button--expanded\"]: isOpen,\n                    })}\n                    id={id}\n                    density={density}\n                    isExpanded={isOpen}\n                    aria-controls={ariaControls}\n                    aria-label={children ? undefined : dataTh || \"Ekspander rad\"}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        onClick();\n                    }}\n                    onKeyDown={(e) => {\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","density","collapseToList","useTableContext","dataTh","showTextFromTh","jsx","TableCell","clsx","Expander","isExpanded","e","stopPropagation","onKeyDown","key","preventDefault","displayName"],"mappings":"2QAaA,MAAMA,EAA+BC,GACjC,EAAGC,OAAAA,EAAQC,QAAAA,EAASC,SAAAA,EAAUC,UAAAA,EAAWC,GAAAA,EAAI,gBAAiBC,KAAiBC,GAAQC,KAC/EP,QAAW,IAAXA,GAA2C,mBAAZC,EACzB,MAAA,IAAIO,MAAM,uEAGpB,MAAQC,QAAAA,EAASC,eAAAA,GAAmBC,IAE9BC,EAAUN,EAAgC,WAG1CO,EAAqCH,EAAiBE,OAAS,EAGjE,OAAAE,EAACC,EAAA,CACGZ,UAAWa,EACP,yBACA,CAAG,uCAAyCd,GAC5CC,MAEAG,EACJC,IAAAA,EAEAL,SAAAY,EAACG,EAAA,CACGd,UAAWa,EAAK,8BAA+B,CAC1C,wCAA0ChB,IAE/CI,GAAAA,EACAK,QAAAA,EACAS,WAAYlB,EACZ,gBAAeK,EACf,aAAYH,OAAW,EAAYU,GAAU,gBAC7CX,QAAUkB,IACNA,EAAEC,kBACMnB,KAEZoB,UAAYF,KACM,UAAVA,EAAEG,KAA6B,MAAVH,EAAEG,OACvBH,EAAEC,kBACFD,EAAEI,iBACMtB,MAKfC,SAAYA,GAAAW,KACjB,IAMhBf,EAA6B0B,YAAc"}

package/build/es/components/table/Table.d.ts

@@ -0,0 +1,11 @@
+import { default as React, TableHTMLAttributes } from 'react';
+import { Density } from '../../core/types.js';
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    density?: Density;
+    /** Bryt ned til en stablet listevisning på små skjermer. NB: husk å sette `data-th` på hver celle! */
+    collapseToList?: boolean;
+    /** Setter width: 100% */
+    fullWidth?: boolean;
+}
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
+export { Table };

package/build/es/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, TableHTMLAttributes } from \"react\";\nimport { Density } from \"../..\";\nimport { TableContextProvider } from \"./tableContext\";\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    ({ className, density, collapseToList = false, fullWidth = false, ...rest }, ref) => {\n        return (\n            <TableContextProvider state={{ density, collapseToList }}>\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                    ref={ref}\n                />\n            </TableContextProvider>\n        );\n    },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","density","collapseToList","fullWidth","rest","ref","TableContextProvider","state","children","jsx","clsx","displayName"],"mappings":"kLAaA,MAAMA,EAAQC,GACV,EAAGC,UAAAA,EAAWC,QAAAA,EAASC,eAAAA,GAAiB,EAAOC,UAAAA,GAAY,KAAUC,GAAQC,MAEpEC,EAAqB,CAAAC,MAAO,CAAEN,QAAAA,EAASC,eAAAA,GACpCM,SAAAC,EAAC,QAAA,CACGT,UAAWU,EAAK,YAAaV,EAAW,CACnC,wBAA0BG,EAC1B,8BAAgCD,OAEjCE,EACJC,IAAAA,QAOpBP,EAAMa,YAAc"}
+{"version":3,"file":"Table.js","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, TableHTMLAttributes } 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    ({ className, density, collapseToList = false, fullWidth = false, ...rest }, ref) => {\n        return (\n            <TableContextProvider state={{ density, collapseToList }}>\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                    ref={ref}\n                />\n            </TableContextProvider>\n        );\n    },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","density","collapseToList","fullWidth","rest","ref","TableContextProvider","state","children","jsx","clsx","displayName"],"mappings":"kLAaA,MAAMA,EAAQC,GACV,EAAGC,UAAAA,EAAWC,QAAAA,EAASC,eAAAA,GAAiB,EAAOC,UAAAA,GAAY,KAAUC,GAAQC,MAEpEC,EAAqB,CAAAC,MAAO,CAAEN,QAAAA,EAASC,eAAAA,GACpCM,SAAAC,EAAC,QAAA,CACGT,UAAWU,EAAK,YAAaV,EAAW,CACnC,wBAA0BG,EAC1B,8BAAgCD,OAEjCE,EACJC,IAAAA,QAOpBP,EAAMa,YAAc"}