@fremtind/jokul 0.24.0 → 0.25.0

package/build/cjs/components/popover/Popover.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.cjs","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    useFloating,\n    useFocus,\n    useHover,\n    useClick,\n    useDismiss,\n    autoUpdate,\n    useRole,\n    useMergeRefs,\n    offset,\n    flip,\n    shift,\n    useInteractions,\n    FloatingPortal,\n    FloatingFocusManager,\n    UseFloatingOptions,\n    VirtualElement,\n    ReferenceElement,\n    ReferenceType,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\n\ntype ClickOptions = Parameters<typeof useClick>[1];\ntype DismissOptions = Parameters<typeof useDismiss>[1];\ntype FocusOptions = Parameters<typeof useFocus>[1];\ntype HoverOptions = Parameters<typeof useHover>[1];\ntype RoleOptions = Parameters<typeof useRole>[1];\n\ninterface PopoverOptions {\n    /**\n     * Angir om popoveren er åpen eller lukket.\n     *\n     * @see https://floating-ui.com/docs/usefloating#open\n     */\n    open?: boolean;\n    /**\n     * Callback som trigges når popoveren åpnes eller lukkes.\n     *\n     * @see https://floating-ui.com/docs/usefloating#onopenchange\n     */\n    onOpenChange?: UseFloatingOptions[\"onOpenChange\"];\n    /**\n     * Bestemmer plasseringen av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#placement\n     *\n     * @default \"bottom-start\"\n     */\n    placement?: UseFloatingOptions[\"placement\"];\n    /**\n     * Definerer strategien for posisjonering av popoveren.\n     *\n     * @see https://floating-ui.com/docs/usefloating#strategy\n     *\n     * @default \"absolute\"\n     */\n    strategy?: UseFloatingOptions[\"strategy\"];\n    /**\n     * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet\n     * og innhold utenfor ikke kan interageres med.\n     *\n     * @see https://floating-ui.com/docs/usefloating#modal\n     *\n     * @default true\n     */\n    modal?: boolean;\n    /**\n     * Justerer avstanden mellom referanse-elementet og popoveren.\n     *\n     * @see https://floating-ui.com/docs/offset\n     *\n     * @default 4\n     */\n    offset?: number;\n    /**\n     * Referanse til elementet som popoveren skal posisjoneres i forhold til.\n     *\n     * @see https://floating-ui.com/docs/usefloating#setpositionreference\n     *\n     * @default Popover.Trigger\n     */\n    positionReference?: React.RefObject<ReferenceType>;\n    /**\n     * Options for hover-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usehover\n     *\n     * @default { enabled: false }\n     */\n    hoverOptions?: HoverOptions;\n    /**\n     * Options for fokus-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/usefocus\n     *\n     * @default { enabled: false }\n     */\n    focusOptions?: FocusOptions;\n    /**\n     * Options for klikk-interaksjoner.\n     *\n     * @see https://floating-ui.com/docs/useclick\n     *\n     * @default { enabled: false }\n     */\n    clickOptions?: ClickOptions;\n    /**\n     * Konfigurerer rollen for popoveren.\n     *\n     * @see https://floating-ui.com/docs/userole\n     *\n     * @default { enabled: true, role: \"dialog\" }\n     */\n    roleOptions?: RoleOptions;\n    /**\n     * Options for å lukke popoveren når en dismissal skjer,\n     * som ved å klikke utenfor eller trykke på \"Escape\"-tasten.\n     *\n     * @see https://floating-ui.com/docs/usedismiss\n     *\n     * @default { enabled: true }\n     */\n    dismissOptions?: DismissOptions;\n}\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\"Popover komponenter må brukes innenfor en <Popover /> komponent\");\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return <PopoverContext.Provider value={popover}>{children}</PopoverContext.Provider>;\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & PopoverTriggerProps>(\n    function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n        const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n        const childrenRef = (children as any).ref;\n        const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n        if (asChild && React.isValidElement(children)) {\n            return React.cloneElement(\n                children,\n                getReferenceProps({\n                    ref,\n                    ...props,\n                    ...children.props,\n                }),\n            );\n        }\n\n        return (\n            <button ref={ref} onClick={() => onOpenChange?.(!open)} aria-expanded={open} {...getReferenceProps(props)}>\n                {children}\n            </button>\n        );\n    },\n);\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (referenceElement: ReferenceElement): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & PopoverContentProps>(\n    function PopoverContent(\n        { style, className, padding = 0, initialFocus = 0, returnFocus = true, ...props },\n        propRef,\n    ) {\n        const { context, modal, refs, open, floatingStyles, getFloatingProps } = usePopoverContext();\n        const ref = useMergeRefs([refs.setFloating, propRef]);\n\n        const referenceElement = refs.reference.current as ReferenceElement;\n\n        const { theme, density } = isCustomPositioned(referenceElement)\n            ? getThemeAndDensity(referenceElement.contextElement)\n            : getThemeAndDensity(referenceElement);\n\n        if (!open) return null;\n\n        return (\n            <FloatingPortal>\n                <FloatingFocusManager\n                    context={context}\n                    modal={modal}\n                    initialFocus={initialFocus}\n                    returnFocus={returnFocus}\n                >\n                    <div\n                        data-theme={theme}\n                        data-layout-density={density}\n                        className={clsx(\"jkl jkl-popover\", className)}\n                        ref={ref}\n                        style={\n                            {\n                                ...style,\n                                ...floatingStyles,\n                                \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                            } as React.CSSProperties\n                        }\n                        {...getFloatingProps(props)}\n                    >\n                        {props.children}\n                    </div>\n                </FloatingFocusManager>\n            </FloatingPortal>\n        );\n    },\n);\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","FloatingPortal","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}

package/build/cjs/components/popover/Popover.d.cts

@@ -0,0 +1,154 @@
+import { useFocus, useHover, useClick, useDismiss, useRole, UseFloatingOptions, ReferenceType } from '@floating-ui/react';
+import * as React from "react";
+type ClickOptions = Parameters<typeof useClick>[1];
+type DismissOptions = Parameters<typeof useDismiss>[1];
+type FocusOptions = Parameters<typeof useFocus>[1];
+type HoverOptions = Parameters<typeof useHover>[1];
+type RoleOptions = Parameters<typeof useRole>[1];
+interface PopoverOptions {
+    /**
+     * Angir om popoveren er åpen eller lukket.
+     *
+     * @see https://floating-ui.com/docs/usefloating#open
+     */
+    open?: boolean;
+    /**
+     * Callback som trigges når popoveren åpnes eller lukkes.
+     *
+     * @see https://floating-ui.com/docs/usefloating#onopenchange
+     */
+    onOpenChange?: UseFloatingOptions["onOpenChange"];
+    /**
+     * Bestemmer plasseringen av popoveren.
+     *
+     * @see https://floating-ui.com/docs/usefloating#placement
+     *
+     * @default "bottom-start"
+     */
+    placement?: UseFloatingOptions["placement"];
+    /**
+     * Definerer strategien for posisjonering av popoveren.
+     *
+     * @see https://floating-ui.com/docs/usefloating#strategy
+     *
+     * @default "absolute"
+     */
+    strategy?: UseFloatingOptions["strategy"];
+    /**
+     * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet
+     * og innhold utenfor ikke kan interageres med.
+     *
+     * @see https://floating-ui.com/docs/usefloating#modal
+     *
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Justerer avstanden mellom referanse-elementet og popoveren.
+     *
+     * @see https://floating-ui.com/docs/offset
+     *
+     * @default 4
+     */
+    offset?: number;
+    /**
+     * Referanse til elementet som popoveren skal posisjoneres i forhold til.
+     *
+     * @see https://floating-ui.com/docs/usefloating#setpositionreference
+     *
+     * @default Popover.Trigger
+     */
+    positionReference?: React.RefObject<ReferenceType>;
+    /**
+     * Options for hover-interaksjoner.
+     *
+     * @see https://floating-ui.com/docs/usehover
+     *
+     * @default { enabled: false }
+     */
+    hoverOptions?: HoverOptions;
+    /**
+     * Options for fokus-interaksjoner.
+     *
+     * @see https://floating-ui.com/docs/usefocus
+     *
+     * @default { enabled: false }
+     */
+    focusOptions?: FocusOptions;
+    /**
+     * Options for klikk-interaksjoner.
+     *
+     * @see https://floating-ui.com/docs/useclick
+     *
+     * @default { enabled: false }
+     */
+    clickOptions?: ClickOptions;
+    /**
+     * Konfigurerer rollen for popoveren.
+     *
+     * @see https://floating-ui.com/docs/userole
+     *
+     * @default { enabled: true, role: "dialog" }
+     */
+    roleOptions?: RoleOptions;
+    /**
+     * Options for å lukke popoveren når en dismissal skjer,
+     * som ved å klikke utenfor eller trykke på "Escape"-tasten.
+     *
+     * @see https://floating-ui.com/docs/usedismiss
+     *
+     * @default { enabled: true }
+     */
+    dismissOptions?: DismissOptions;
+}
+export declare const Popover: {
+    ({ children, ...restOptions }: {
+        children: React.ReactNode;
+    } & PopoverOptions): React.JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement> & PopoverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+interface PopoverTriggerProps {
+    children: React.ReactNode;
+    /**
+     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.
+     *
+     * Default er `false`.
+     *
+     * @example
+     * ```tsx
+     * <Component asChild foo="bar">
+     *    <Child baz="qux" />
+     * </Component>
+     *
+     * // Rendrer følgende:
+     * <Child foo="bar" baz="qux" />
+     * ```
+     */
+    asChild?: boolean;
+}
+interface PopoverContentProps {
+    /**
+     * Padding rundt innholdet i popoveren.
+     *
+     * Default er `0`.
+     */
+    padding?: 0 | 8 | 16 | 24;
+    /**
+     *
+     * Angir hvilket element som skal motta fokus ved åpning.
+     * Kan være en tabbar index eller en referanse til et element."
+     *
+     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.
+     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus
+     */
+    initialFocus?: number | React.RefObject<HTMLElement>;
+    /**
+     * Angir om fokus skal returneres til triggeren når popoveren lukkes.
+     *
+     * Default er `true`.
+     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus
+     */
+    returnFocus?: boolean;
+}
+export default Popover;

package/build/cjs/components/popover/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Popover.cjs");exports.Popover=e.Popover;
+//# sourceMappingURL=index.cjs.map

package/build/cjs/components/popover/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/cjs/components/popover/index.d.cts

@@ -0,0 +1 @@
+export { default as Popover } from './Popover.cjs;'

package/build/cjs/components/progress-bar/Countdown.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react");exports.Countdown=({className:s,from:r,isPaused:a,...n})=>{const[o,l]=t.useState(Math.floor(r/1e3));return t.useEffect((()=>{o<=0||setTimeout((()=>{a||l((e=>e-1))}),1e3)}),[a,r,o,l]),e.jsxs("div",{className:`jkl-countdown ${s??""}`,role:"timer","data-testid":"jkl-countdown",...n,children:[e.jsx("span",{className:"jkl-countdown__tracker",role:"presentation",style:{"--duration":`${r}ms`,"--play-state":a?"paused":"running"},"data-testid":"jkl-countdown__tracker"}),e.jsx("span",{className:"jkl-sr-only",children:o})]})};
+//# sourceMappingURL=Countdown.cjs.map

package/build/cjs/components/progress-bar/Countdown.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown.cjs","sources":["../../../../src/components/progress-bar/Countdown.tsx"],"sourcesContent":["import React, { useState, type CSSProperties, type FC, useEffect } from \"react\";\n\nexport interface CountdownProps\n    extends Pick<React.HTMLAttributes<HTMLDivElement>, \"onAnimationEnd\" | \"onAnimationStart\"> {\n    id?: string;\n    className?: string;\n    /**\n     * Millisekunder å telle ned fra\n     */\n    from: number;\n    isPaused?: boolean;\n    style?: CSSProperties;\n}\n\nexport const Countdown: FC<CountdownProps> = ({ className, from, isPaused, ...rest }) => {\n    const [remainingSeconds, setRemainingSeconds] = useState(Math.floor(from / 1000));\n\n    useEffect(() => {\n        if (remainingSeconds <= 0) {\n            return;\n        }\n\n        setTimeout(() => {\n            if (!isPaused) {\n                setRemainingSeconds((sec) => sec - 1);\n            }\n        }, 1000);\n    }, [isPaused, from, remainingSeconds, setRemainingSeconds]);\n\n    return (\n        <div className={`jkl-countdown ${className ?? \"\"}`} role=\"timer\" data-testid=\"jkl-countdown\" {...rest}>\n            <span\n                className=\"jkl-countdown__tracker\"\n                role=\"presentation\"\n                style={\n                    {\n                        \"--duration\": `${from}ms`,\n                        \"--play-state\": isPaused ? \"paused\" : \"running\",\n                    } as CSSProperties\n                }\n                data-testid=\"jkl-countdown__tracker\"\n            />\n            <span className=\"jkl-sr-only\">{remainingSeconds}</span>\n        </div>\n    );\n};\n"],"names":["className","from","isPaused","rest","remainingSeconds","setRemainingSeconds","useState","Math","floor","useEffect","setTimeout","sec","jsxs","role","children","jsx","style"],"mappings":"0JAc6C,EAAGA,UAAAA,EAAWC,KAAAA,EAAMC,SAAAA,KAAaC,MACpE,MAACC,EAAkBC,GAAuBC,WAASC,KAAKC,MAAMP,EAAO,MAE3EQ,OAAAA,EAAAA,WAAU,KACFL,GAAoB,GAIxBM,YAAW,KACFR,GACmBG,GAACM,GAAQA,EAAM,GAAC,GAEzC,IAAI,GACR,CAACT,EAAUD,EAAMG,EAAkBC,IAGjCO,EAAAA,KAAA,MAAA,CAAIZ,UAAW,iBAAiBA,GAAa,KAAMa,KAAK,QAAQ,cAAY,mBAAoBV,EAC7FW,SAAA,CAAAC,EAAAA,IAAC,OAAA,CACGf,UAAU,yBACVa,KAAK,eACLG,MACI,CACI,aAAc,GAAGf,MACjB,eAAgBC,EAAW,SAAW,WAG9C,cAAY,2BAEfa,EAAAA,IAAA,OAAA,CAAKf,UAAU,cAAec,SAAiBV,MACpD"}

package/build/cjs/components/progress-bar/ProgressBar.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),a=(r,a)=>0===a?0:100*r/a;exports.ProgressBar=({"aria-valuenow":e,"aria-valuemin":s=0,"aria-valuemax":t=100,title:l="Fremdrift",className:i,...o})=>{const c=`${a(e,t)}%`;return r.jsx("div",{className:`jkl-progress-bar ${i??""}`,role:"progressbar",title:l,"aria-valuenow":e,"aria-valuemin":s,"aria-valuemax":t,"data-testid":"jkl-progress-bar",...o,children:r.jsx("span",{className:"jkl-progress-bar__tracker",style:{width:c},"data-testid":"jkl-progress-bar__tracker"})})},exports.calculatePercentage=a;
+//# sourceMappingURL=ProgressBar.cjs.map

package/build/cjs/components/progress-bar/ProgressBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.cjs","sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { type CSSProperties, type FC } from \"react\";\n\nexport interface ProgressBarProps {\n    id?: string;\n    className?: string;\n    /**\n     * @default \"Fremdrift\"\n     */\n    title?: string;\n    \"aria-valuetext\"?: string;\n    /**\n     * @default 0\n     */\n    \"aria-valuemin\"?: number;\n    \"aria-valuenow\": number;\n    /**\n     * @default 100\n     */\n    \"aria-valuemax\"?: number;\n    style?: CSSProperties;\n}\n\nexport const calculatePercentage = (current: number, total: number): number =>\n    total === 0 ? 0 : (current * 100) / total;\n\nexport const ProgressBar: FC<ProgressBarProps> = ({\n    \"aria-valuenow\": value,\n    \"aria-valuemin\": min = 0,\n    \"aria-valuemax\": max = 100,\n    title = \"Fremdrift\",\n    className,\n    ...rest\n}) => {\n    const trackerWidth = `${calculatePercentage(value, max)}%`;\n\n    return (\n        <div\n            className={`jkl-progress-bar ${className ?? \"\"}`}\n            role=\"progressbar\"\n            title={title}\n            aria-valuenow={value}\n            aria-valuemin={min}\n            aria-valuemax={max}\n            data-testid=\"jkl-progress-bar\"\n            {...rest}\n        >\n            <span\n                className=\"jkl-progress-bar__tracker\"\n                style={{ width: trackerWidth }}\n                data-testid=\"jkl-progress-bar__tracker\"\n            />\n        </div>\n    );\n};\n"],"names":["calculatePercentage","current","total","value","min","max","title","className","rest","trackerWidth","jsx","role","children","style","width"],"mappings":"qHAsBaA,EAAsB,CAACC,EAAiBC,IACvC,IAAVA,EAAc,EAAe,IAAVD,EAAiBC,sBAES,EAC7C,gBAAiBC,EACjB,gBAAiBC,EAAM,EACvB,gBAAiBC,EAAM,IACvBC,MAAAA,EAAQ,YACRC,UAAAA,KACGC,MAEH,MAAMC,EAAe,GAAGT,EAAoBG,EAAOE,MAG/C,OAAAK,EAAAA,IAAC,MAAA,CACGH,UAAW,oBAAoBA,GAAa,KAC5CI,KAAK,cACLL,MAAAA,EACA,gBAAeH,EACf,gBAAeC,EACf,gBAAeC,EACf,cAAY,sBACRG,EAEJI,SAAAF,EAAAA,IAAC,OAAA,CACGH,UAAU,4BACVM,MAAO,CAAEC,MAAOL,GAChB,cAAY,+BAChB"}

package/build/cjs/components/progress-bar/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./Countdown.cjs"),e=require("./ProgressBar.cjs");exports.Countdown=r.Countdown,exports.ProgressBar=e.ProgressBar;
+//# sourceMappingURL=index.cjs.map

package/build/cjs/components/progress-bar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/cjs/components/progress-bar/index.d.cts

@@ -0,0 +1,4 @@
+export type { CountdownProps } from './Countdown.cjs;'
+export { Countdown } from './Countdown.cjs;'
+export type { ProgressBarProps } from './ProgressBar.cjs;'
+export { ProgressBar } from './ProgressBar.cjs;'

package/build/cjs/components/radio-button/BaseRadioButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),i=require("../../hooks/useId/useId.cjs"),r=t.forwardRef(((t,r)=>{const{id:s,className:n,checked:l,children:o,label:d,density:u,inline:c,invalid:j,name:b,value:k,onChange:m,...x}=t,h=i.useId(s||"jkl-radio-button",{generateSuffix:!s});return e.jsxs("div",{className:a.clsx("jkl-radio-button",n,{"jkl-radio-button--inline":c,"jkl-radio-button--error":j}),"data-density":u,children:[e.jsx("input",{name:b,ref:r,...x,id:h,className:"jkl-radio-button__input",type:"radio",onChange:m,value:k,checked:l}),e.jsxs("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:h,className:"jkl-radio-button__label",children:[e.jsx("span",{"aria-hidden":!0,className:"jkl-radio-button__dot"}),e.jsx("span",{className:"jkl-radio-button__text",children:d||o})]})]})}));r.displayName="BaseRadioButton",exports.BaseRadioButton=r;
+//# sourceMappingURL=BaseRadioButton.cjs.map

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

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

package/build/cjs/components/radio-button/BaseRadioButton.d.cts

@@ -0,0 +1,10 @@
+import { default as React, ChangeEventHandler } from 'react';
+import { Density } from '../../core/types.cjs;'
+import { RadioButtonProps } from './RadioButton.cjs;'
+export interface BaseRadioButtonProps extends RadioButtonProps {
+    inline?: boolean;
+    density?: Density;
+    invalid?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const BaseRadioButton: React.ForwardRefExoticComponent<BaseRadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/radio-button/RadioButton.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../../hooks/useId/useId.cjs"),o=require("../input-group/SupportLabel.cjs"),u=require("./BaseRadioButton.cjs"),s=require("./radioGroupContext.cjs"),a=r.forwardRef(((r,a)=>{const{checked:i,value:d,supportLabelProps:p,helpLabel:l,...n}=r,{value:c,density:b,...j}=s.useRadioGroupContext(),y=t.useId("jkl-support-label");return e.jsxs(e.Fragment,{children:[e.jsx(u.BaseRadioButton,{...j,...n,ref:a,checked:typeof i<"u"?i:typeof c<"u"?d===c:void 0,value:d,"aria-describedby":l?y:void 0}),e.jsx(o.SupportLabel,{...p,label:l,labelType:"help",id:y,density:b})]})}));a.displayName="RadioButton",exports.RadioButton=a;
+//# sourceMappingURL=RadioButton.cjs.map

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

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

package/build/cjs/components/radio-button/RadioButton.d.cts

@@ -0,0 +1,15 @@
+import { default as React, InputHTMLAttributes, ChangeEventHandler, ReactNode } from 'react';
+import { SupportLabelProps } from '../input-group/SupportLabel.cjs;'
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+    children?: ReactNode;
+    value: string;
+    /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form */
+    name?: string;
+    /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** @deprecated Bruk children */
+    label?: ReactNode;
+    helpLabel?: ReactNode;
+    supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel" | "density">;
+}
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/build/cjs/components/radio-button/RadioButtonGroup.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../input-group/FieldGroup.cjs"),o=require("./radioGroupContext.cjs");exports.RadioButtonGroup=i=>{const{name:t,value:n,onChange:a,errorLabel:u,inline:l=!1,density:d,labelProps:s={variant:"medium"},...p}=i;return e.jsx(o.RadioGroupContextProvider,{state:{onChange:a,value:n,name:t,invalid:!!u,inline:l,density:d},children:e.jsx(r.FieldGroup,{errorLabel:u,labelProps:s,"data-testid":"jkl-radio-button-group",density:d,...p,role:"radiogroup","aria-invalid":!!u})})};
+//# sourceMappingURL=RadioButtonGroup.cjs.map

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

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

package/build/cjs/components/radio-button/RadioButtonGroup.d.cts

@@ -0,0 +1,24 @@
+import { ChangeEventHandler, FC } from 'react';
+import { Density } from '../../core/types.cjs;'
+import { FieldGroupProps } from '../input-group/FieldGroup.cjs;'
+export interface RadioButtonGroupProps extends Omit<FieldGroupProps, "onChange"> {
+    legend: string;
+    /** Alle RadioButton i gruppen får dette som name. */
+    name?: string;
+    /** Om gruppen skal være controlled setter du den valgte verdien her. */
+    value?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    helpLabel?: string;
+    /**
+     * Erstatter hjelpeteksten (hvis noen) med en feilmelding.
+     * Merker samtidig alle RadioButton i gruppen som ugyldige.
+     */
+    errorLabel?: string;
+    /**
+     * Setter inline-modifieren på alle RadioButton i gruppen.
+     * @default false
+     */
+    inline?: boolean;
+    density?: Density;
+}
+export declare const RadioButtonGroup: FC<RadioButtonGroupProps>;

package/build/cjs/components/radio-button/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./RadioButton.cjs"),t=require("./RadioButtonGroup.cjs"),e=require("./BaseRadioButton.cjs");exports.RadioButton=o.RadioButton,exports.RadioButtonGroup=t.RadioButtonGroup,exports.BaseRadioButton=e.BaseRadioButton;
+//# sourceMappingURL=index.cjs.map

package/build/cjs/components/radio-button/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/cjs/components/radio-button/index.d.cts

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

package/build/cjs/components/radio-button/radioGroupContext.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=t.createContext({name:void 0,value:void 0,onChange:()=>{},inline:!1,density:void 0,invalid:!1});exports.RadioGroupContextProvider=({state:t,children:o})=>e.jsx(r.Provider,{value:t,children:o}),exports.useRadioGroupContext=()=>t.useContext(r);
+//# sourceMappingURL=radioGroupContext.cjs.map

package/build/cjs/components/radio-button/radioGroupContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radioGroupContext.cjs","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","state","children","jsx","Provider","useContext"],"mappings":"wIAYMA,EAAoBC,EAAAA,cAAiC,CACvDC,UAAM,EACNC,WAAO,EACPC,SAAU,OAGVC,QAAQ,EACRC,aAAS,EACTC,SAAS,sCAS6C,EAAGC,MAAAA,EAAOC,SAAAA,KAC/DC,EAAAA,IAAAV,EAAkBW,SAAlB,CAA2BR,MAAOK,EAAQC,SAAAA,iCAPX,IAAyBG,EAAAA,WAAWZ"}

package/build/cjs/components/radio-button/radioGroupContext.d.cts

@@ -0,0 +1,16 @@
+import { default as React, ChangeEventHandler } from 'react';
+import { Density, WithChildren } from '../../core/types.cjs;'
+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/cjs/components/select/NativeSelect.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),o=require("../../utilities/valuePair.cjs");require("../icon/Icon.cjs");const n=require("../icon/icons/animated/ArrowVerticalAnimated.cjs");require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const r=require("../input-group/InputGroup.cjs"),s=i.forwardRef(((i,s)=>{const{label:l,className:t,density:a,errorLabel:u,helpLabel:j,inline:q,invalid:p,items:d,labelProps:I,placeholder:m="Velg",selectClassName:h,supportLabelProps:v,tooltipProps:b,value:w,width:k,...x}=i,A={label:l,density:a,errorLabel:u,helpLabel:j,labelProps:I,inline:q,supportLabelProps:v,tooltipProps:b};return e.jsx(r.InputGroup,{...A,"data-testid":"jkl-select",className:c.clsx("jkl-select",t,{"jkl-select--inline":q,"jkl-select--invalid":!!u||p}),render:i=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:k},children:[e.jsxs("select",{ref:s,className:c.clsx("jkl-select__button",h,{"jkl-select__button--active-value":!!w}),defaultValue:w?void 0:"",value:w,...i,...x,children:[m&&!w&&e.jsx("option",{disabled:!0,value:"",children:m}),d.map(o.getValuePair).map((c=>e.jsx("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:c.value,children:c.label},c.value)))]}),e.jsx(n.ArrowVerticalAnimated,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));s.displayName="NativeSelect",exports.NativeSelect=s;
+//# sourceMappingURL=NativeSelect.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeSelect.cjs","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/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","inputGroupProps","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"muDAsBaA,EAAeC,EAAAA,YAAiD,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,EAEEkB,EAAkB,CACpBhB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,aAAAA,GAIA,OAAAK,EAAAA,IAACC,EAAAA,WAAA,IACOF,EACJ,cAAY,aACZf,UAAWkB,EAAAA,KAAK,aAAclB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Cc,OAASC,GACJC,EAAAA,KAAA,MAAA,CAAIrB,UAAU,4BAA4BsB,MAAO,CAAET,MAAAA,GAChDU,SAAA,CAAAF,EAAAA,KAAC,SAAA,CACGvB,IAAAA,EACAE,UAAWkB,EAAAA,KAAK,qBAAsBT,EAAiB,CACnD,qCAAsCG,IAE1CY,aAAcZ,OAAQ,EAAY,GAClCA,MAAAA,KACIQ,KACAN,EAEHS,SAAA,CAAef,IAACI,GACZI,EAAAA,IAAA,SAAA,CAAOS,UAAQ,EAACb,MAAM,GAClBW,SACLf,IAEHF,EAAMoB,IAAIC,EAAYA,cAAED,KAAKE,GAC1BZ,EAAAA,IAAC,SAAA,CACG,cAAY,qBACZhB,UAAU,qBAEVY,MAAOgB,EAAKhB,MAEXW,SAAKK,EAAA7B,OAHD6B,EAAKhB,kBAOrBiB,EAAAA,sBAAsB,CAAAC,QAAQ,SAASC,cAAY,EAAC/B,UAAU,0BACnE,IAMhBL,EAAaqC,YAAc"}

package/build/cjs/components/select/NativeSelect.d.cts

@@ -0,0 +1,19 @@
+import { default as React, SelectHTMLAttributes } from 'react';
+import { ValuePair } from '../../utilities/valuePair.cjs;'
+import { InputGroupProps } from '../input-group/InputGroup.cjs;'
+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/cjs/components/select/Select.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../hooks/useAnimatedHeight/useAnimatedHeight.cjs"),t=require("../../hooks/useId/useId.cjs"),s=require("../../hooks/useListNavigation/useListNavigation.cjs"),c=require("../../hooks/usePreviousValue/usePreviousValue.cjs"),i=require("../../utilities/valuePair.cjs");require("../icon/Icon.cjs");const l=require("../icon/icons/animated/ArrowVerticalAnimated.cjs");require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs"),require("../icon/icons/CalendarIcon.cjs"),require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/PenIcon.cjs");const u=require("../input-group/InputGroup.cjs"),a=require("./select-utils.cjs"),d=()=>{},p=o.forwardRef(((p,v)=>{const{id:f,name:j,items:b,value:h,label:k,labelProps:m,onChange:g,onBlur:q,onFocus:w,className:y,helpLabel:I,errorLabel:C,invalid:_,searchable:x=!1,inline:P=!1,defaultPrompt:D="Velg",density:E,width:L,maxShownOptions:A=5,style:S,tooltipProps:N,...$}=p,T=t.useId(f||"jkl-select",{generateSuffix:!f}),R=`${T}_label`,V=`${T}_button`,F=`${T}_search-input`,[M,H]=o.useState(!1),K=o.useCallback((()=>{H((e=>!e))}),[]),B=!!x,O=B&&M,[U,G]=o.useState(""),z=o.useCallback((e=>!!e.label.toLowerCase().includes(U.toLowerCase())||"function"==typeof x&&x(U,e)),[x,U]),Q=o.useMemo((()=>b.map(i.getValuePair).map((e=>{const n=!B||""===U||z(e);return{...e,visible:n}}))),[b,B,U,z]),W=o.useMemo((()=>!(typeof h>"u")&&b.some((e=>"string"==typeof e?e===h:e.value===h))),[h,b]),[J,X]=o.useState(W&&void 0!==h?h:""),Y=""!==J,Z=o.useMemo((()=>{var e;return(null==(e=Q.find((e=>e.value===J)))?void 0:e.label)||D}),[Q,J,D]),ee=o.useRef(null),ne=o.useCallback((e=>{ee.current=e,v&&("function"==typeof v?v(e):v.current=e),e&&X(e.value)}),[ee,v]),oe=c.usePreviousValue(h);o.useEffect((()=>{h!==oe&&X(typeof h>"u"||!W?"":h)}),[X,h,oe,W]);const re=o.useCallback((e=>{const n=e.value;G(""),X(n),K()}),[G,X,K]),te=c.usePreviousValue(J);o.useEffect((()=>{typeof te>"u"||te===J||J===h||(g&&g({type:"change",target:{name:j,value:J}}),ee.current&&ee.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[g,j,h,J,te]);const se=o.useRef(null),ce=o.useRef(!1),ie=o.useRef(null),le=o.useRef(null),ue=o.useCallback(((e,n)=>{if(e&&!B){const e=n.current;e&&a.focusSelected(e,J)}else e?ie.current&&ie.current.focus():ce.current&&le.current&&le.current.focus()}),[B,J]),[ae]=r.useAnimatedHeight(M,{onFirstVisible:ue,onTransitionEnd:ue});s.useListNavigation({ref:ae});const de=o.useCallback((()=>{var e;B&&G(""),q&&(q({type:"blur",target:{name:j,value:J}}),null==(e=ee.current)||e.dispatchEvent(new Event("focusout",{bubbles:!0}))),ce.current=!1,H(!1)}),[q,G,H,B,j,J]),pe=o.useCallback((e=>{const n=se.current;n&&n.contains(e.relatedTarget)||de()}),[de]),ve=o.useCallback((()=>{ce.current||(w&&w({type:"change",target:{name:j,value:J}}),ce.current=!0)}),[w,J,j]),fe=o.useCallback((e=>{e.target.focus({preventScroll:!0})}),[]);o.useEffect((()=>{const e=ee.current,n=ie.current,o=le.current,r=se.current;return null==e||e.addEventListener("focus",(()=>{O?null==n||n.focus():null==o||o.focus()})),null==e||e.addEventListener("blur",(function(e){r&&r.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{O?null==n||n.focus():null==o||o.focus()})),null==e||e.removeEventListener("blur",(function(e){r&&r.contains(e.relatedTarget)&&e.preventDefault()}))}}),[O]);const je=o.useCallback((e=>{"ArrowDown"!==e.key&&" "!==e.key||M?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),H(!1)):(e.preventDefault(),e.stopPropagation(),H(!0))}),[H,M]),be=o.useCallback((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const n=ae.current;n&&(B?a.focusSelected(n,void 0):a.focusSelected(n,J))}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),H(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&M&&(e.preventDefault(),e.stopPropagation());else{const n=ae.current;n&&(e.preventDefault(),e.stopPropagation(),a.focusSelected(n,J))}}),[H,ae,J,B,M]),he=o.useCallback((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&ie.current?ie.current.focus():le.current&&(X(e.currentTarget.value),H(!1),le.current.focus());else if("ArrowUp"===e.key&&ae.current&&ie.current){const n=ae.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==n?void 0:n.id)&&ie.current&&ie.current.focus()}}),[H,ae]);return o.useEffect((()=>{const e=e=>{"Escape"===e.key&&M&&H(!1)};return typeof window<"u"&&M&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[H,M]),e.jsxs(e.Fragment,{children:[e.jsxs("select",{name:j,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ne,value:J,onChange:d,children:[e.jsx("option",{value:""})," ",Q.map((n=>e.jsx("option",{hidden:!n.visible,value:n.value,children:n.label},`${T}-opt-${n.value}`)))]}),e.jsx(u.InputGroup,{ref:se,"data-testid":"jkl-select",className:n.clsx("jkl-select",y,{"jkl-select--inline":P,"jkl-select--open":M&&Q.some((e=>e.visible)),"jkl-select--no-value":!Y,"jkl-select--invalid":!!C||_}),tooltipProps:N&&{...N,triggerProps:{...N.triggerProps,onFocus:e=>{var n,o;null==(o=null==(n=N.triggerProps)?void 0:n.onFocus)||o.call(n,e),de()}}},...$,id:B?F:V,style:{"--jkl-select-max-shown-options":A,...S},density:E,label:k,labelProps:{id:R,srOnly:P,...m,htmlFor:B?F:V},helpLabel:I,errorLabel:C,render:o=>e.jsxs("div",{className:"jkl-select__outer-wrapper",style:{width:L},children:[B&&e.jsx("input",{...o,id:F,hidden:!O,ref:ie,placeholder:"Søk",value:U,onChange:e=>G(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":Y?`${T}__${a.toLower(J)}`:void 0,"aria-controls":T,"aria-expanded":M,role:"combobox",onKeyDown:be,onBlur:pe,onFocus:ve,onClick:e=>{e.stopPropagation()}}),e.jsx("button",{...o,id:V,ref:le,hidden:O,type:"button",name:`${j}-btn`,className:n.clsx("jkl-select__button",{"jkl-select__button--active-value":!!J}),"data-testid":"jkl-select__button","aria-label":`${Z||"Velg"},${k}`,"aria-expanded":M,"aria-controls":T,onBlur:pe,onFocus:ve,onKeyDown:je,onClick:K,onMouseDown:e=>{var n;e.preventDefault(),null==(n=le.current)||n.focus()},children:Z}),e.jsx("div",{id:T,ref:ae,role:"listbox",className:"jkl-select__options-menu",hidden:!M||Q.every((e=>!e.visible)),"aria-labelledby":R,tabIndex:-1,"data-focus":"controlled",children:Q.map(((n,o)=>n.visible?e.jsxs("button",{hidden:!n.visible,type:"button",id:`${T}__${a.toLower(n.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":n.value===J,role:"option",value:n.value,"data-testautoid":`jkl-select__option-${o}`,onBlur:pe,onFocus:ve,onKeyDown:he,onClick:e=>{e.preventDefault(),re(n)},onMouseOver:fe,children:[n.label,n.description?e.jsx("span",{className:"jkl-select__option-description",children:n.description}):null]},`${T}-${n.value}`):null))}),e.jsx(l.ArrowVerticalAnimated,{variant:"medium",pointingDown:!M,className:"jkl-select__arrow"})]})})]})}));p.displayName="Select",exports.Select=p;
+//# sourceMappingURL=Select.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    ChangeEvent,\n    CSSProperties,\n    FocusEvent,\n    forwardRef,\n    KeyboardEvent,\n    MouseEvent,\n    RefObject,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/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/cjs/components/select/Select.d.cts

@@ -0,0 +1,55 @@
+import { default as React, ChangeEvent } from 'react';
+import { DataTestAutoId, Density } from '../../core/types.cjs;'
+import { ValuePair } from '../../utilities/valuePair.cjs;'
+import { InputGroupProps } from '../input-group/InputGroup.cjs;'
+import { LabelProps } from '../input-group/Label.cjs;'
+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 {};