npm - @fremtind/jokul - Versions diffs - 0.64.2 → 0.66.0 - Mend

@fremtind/jokul 0.64.2 → 0.66.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (738) hide show

package/build/es/components/popover/Popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n offset,\n ReferenceElement,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useMergeRefs,\n useRole,\n VirtualElement,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { PopoverOptions } from \"./types.js\";\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(\n \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n );\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 (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\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<\n HTMLElement,\n 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\n ref={ref}\n onClick={() => onOpenChange?.(!open)}\n aria-expanded={open}\n {...getReferenceProps(props)}\n >\n {children}\n </button>\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 = (\n referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n if (!referenceElement) return false;\n\n return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n {\n style,\n className,\n padding = 0,\n initialFocus = 0,\n returnFocus = true,\n ...props\n },\n propRef,\n) {\n const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n 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 const floatingPortalRef = React.useRef<HTMLElement \| null>(null);\n\n // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n React.useEffect(() => {\n floatingPortalRef.current =\n context.elements.domReference?.closest<HTMLElement>(\n \"[data-portal]\",\n ) \|\| document.body;\n }, [context.elements.domReference]);\n\n if (!open) return null;\n\n return (\n <FloatingPortal root={floatingPortalRef.current}>\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\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","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
1	+ {"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n FloatingPortal,\n type ReferenceElement,\n type VirtualElement,\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useMergeRefs,\n useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport type { PopoverOptions } from \"./types.js\";\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(\n \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n );\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 (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\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<\n HTMLElement,\n 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\n ref={ref}\n onClick={() => onOpenChange?.(!open)}\n aria-expanded={open}\n {...getReferenceProps(props)}\n >\n {children}\n </button>\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 = (\n referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n if (!referenceElement) return false;\n\n return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n {\n style,\n className,\n padding = 0,\n initialFocus = 0,\n returnFocus = true,\n ...props\n },\n propRef,\n) {\n const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n 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 const floatingPortalRef = React.useRef<HTMLElement \| null>(null);\n\n // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n React.useEffect(() => {\n floatingPortalRef.current =\n context.elements.domReference?.closest<HTMLElement>(\n \"[data-portal]\",\n ) \|\| document.body;\n }, [context.elements.domReference]);\n\n if (!open) return null;\n\n return (\n <FloatingPortal root={floatingPortalRef.current}>\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\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","floatingPortalRef","useRef","useEffect","_a","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}

package/build/es/components/popover/stories/PopoverControlled.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverControlled.stories.js","sources":["../../../../../src/components/popover/stories/PopoverControlled.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\nimport { Button } from \"../../button/Button.js\";\nimport { Popover as PopoverComponent } from \"../Popover.js\";\nimport \"../../button/styles/_index.scss\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Popover/PopoverControlled\",\n component: PopoverComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof PopoverComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof PopoverComponent>;\n\ntype PopoverProps = React.ComponentProps<typeof PopoverComponent>;\n\nconst PopoverControlledComponent = (args: PopoverProps) => {\n const [open, setOpen] = useState(false);\n\n return (\n <PopoverComponent {...args} open={open} onOpenChange={setOpen}>\n <PopoverComponent.Trigger\n onClick={() => setOpen(!open)}\n aria-expanded={open}\n asChild\n >\n <Button variant=\"primary\">Åpne popover</Button>\n </PopoverComponent.Trigger>\n <PopoverComponent.Content padding={24}>\n Dette er innholdet i Popover\n </PopoverComponent.Content>\n </PopoverComponent>\n );\n};\n\nexport const PopoverControlled: Story = {\n args: {\n open: false,\n onOpenChange: () => {},\n roleOptions: { role: \"menu\" },\n },\n render: (args) => <PopoverControlledComponent {...args} />,\n};\n"],"names":["meta","title","component","PopoverComponent","parameters","layout","tags","PopoverControlledComponent","args","open","setOpen","useState","onOpenChange","children","jsx","Trigger","onClick","asChild","Button","variant","Content","padding","PopoverControlled","roleOptions","role","render"],"mappings":"yPAOA,MAAMA,EAAa,CACfC,MAAO,wCACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aASLC,EAA8BC,IAChC,MAAOC,EAAMC,GAAWC,GAAS,YAG5BR,EAAkB,IAAGK,EAAMC,KAAAA,EAAYG,aAAcF,EAClDG,SAAA,CAAAC,EAACX,EAAiBY,QAAjB,CACGC,QAAS,IAAMN,GAASD,GACxB,gBAAeA,EACfQ,SAAO,EAEPJ,SAACC,EAAAI,EAAA,CAAOC,QAAQ,UAAUN,SAAY,qBAEzCV,EAAiBiB,QAAjB,CAAyBC,QAAS,GAAIR,SAEvC,mCACJ,EAIKS,EAA2B,CACpCd,KAAM,CACFC,MAAM,EACNG,aAAc,OACdW,YAAa,CAAEC,KAAM,SAEzBC,OAASjB,GAAUM,EAAAP,EAAA,IAA+BC"}
1	+ {"version":3,"file":"PopoverControlled.stories.js","sources":["../../../../../src/components/popover/stories/PopoverControlled.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\nimport { Button } from \"../../button/Button.js\";\nimport { Popover as PopoverComponent } from \"../Popover.js\";\nimport \"../../button/styles/_index.scss\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Popover/PopoverControlled\",\n component: PopoverComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof PopoverComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof PopoverComponent>;\n\ntype PopoverProps = React.ComponentProps<typeof PopoverComponent>;\n\nconst PopoverControlledComponent = (args: PopoverProps) => {\n const [open, setOpen] = useState(false);\n\n return (\n <PopoverComponent {...args} open={open} onOpenChange={setOpen}>\n <PopoverComponent.Trigger\n onClick={() => setOpen(!open)}\n aria-expanded={open}\n asChild\n >\n <Button variant=\"primary\">Åpne popover</Button>\n </PopoverComponent.Trigger>\n <PopoverComponent.Content padding={24}>\n Dette er innholdet i Popover\n </PopoverComponent.Content>\n </PopoverComponent>\n );\n};\n\nexport const PopoverControlled: Story = {\n args: {\n open: false,\n onOpenChange: () => {},\n roleOptions: { role: \"menu\" },\n },\n render: (args) => <PopoverControlledComponent {...args} />,\n};\n"],"names":["meta","title","component","PopoverComponent","parameters","layout","tags","PopoverControlledComponent","args","open","setOpen","useState","onOpenChange","children","jsx","Trigger","onClick","asChild","Button","variant","Content","padding","PopoverControlled","roleOptions","role","render"],"mappings":"yPAOA,MAAMA,EAAa,CACfC,MAAO,wCACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aASLC,EAA8BC,IAChC,MAAOC,EAAMC,GAAWC,GAAS,YAG5BR,EAAkB,IAAGK,EAAMC,KAAAA,EAAYG,aAAcF,EAClDG,SAAA,CAAAC,EAACX,EAAiBY,QAAjB,CACGC,QAAS,IAAMN,GAASD,GACxB,gBAAeA,EACfQ,SAAO,EAEPJ,SAACC,EAAAI,EAAA,CAAOC,QAAQ,UAAUN,SAAY,qBAEzCV,EAAiBiB,QAAjB,CAAyBC,QAAS,GAAIR,SAEvC,mCACJ,EAIKS,EAA2B,CACpCd,KAAM,CACFC,MAAM,EACNG,aAAc,OACdW,YAAa,CAAEC,KAAM,SAEzBC,OAASjB,GAAUM,EAAAP,EAAA,IAA+BC"}

package/build/es/components/popover/stories/PopoverUncontrolled.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverUncontrolled.stories.js","sources":["../../../../../src/components/popover/stories/PopoverUncontrolled.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\nimport { Popover as PopoverComponent } from \"../Popover.js\";\nimport \"../../button/styles/_index.scss\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Popover/PopoverUncontrolled\",\n component: PopoverComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof PopoverComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof PopoverComponent>;\n\ntype PopoverProps = React.ComponentProps<typeof PopoverComponent>;\n\nconst PopoverUncontrolledComponent = (args: PopoverProps) => {\n const [open, setOpen] = useState(false);\n\n return (\n <PopoverComponent {...args} open={open} onOpenChange={setOpen}>\n <PopoverComponent.Trigger\n onClick={() => setOpen(!open)}\n aria-expanded={open}\n asChild\n >\n Åpne popover\n </PopoverComponent.Trigger>\n <PopoverComponent.Content padding={24}>\n Dette er innholdet i Popover\n </PopoverComponent.Content>\n </PopoverComponent>\n );\n};\n\nexport const PopoverUncontrolled: Story = {\n args: {\n open: false,\n onOpenChange: () => {},\n roleOptions: { role: \"menu\" },\n },\n render: (args) => <PopoverUncontrolledComponent {...args} />,\n};\n"],"names":["meta","title","component","PopoverComponent","parameters","layout","tags","PopoverUncontrolledComponent","args","open","setOpen","useState","onOpenChange","children","jsx","Trigger","onClick","asChild","Content","padding","PopoverUncontrolled","roleOptions","role","render"],"mappings":"yMAMA,MAAMA,EAAa,CACfC,MAAO,0CACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aASLC,EAAgCC,IAClC,MAAOC,EAAMC,GAAWC,GAAS,YAG5BR,EAAkB,IAAGK,EAAMC,KAAAA,EAAYG,aAAcF,EAClDG,SAAA,CAAAC,EAACX,EAAiBY,QAAjB,CACGC,QAAS,IAAMN,GAASD,GACxB,gBAAeA,EACfQ,SAAO,EACVJ,SAAA,mBAGAV,EAAiBe,QAAjB,CAAyBC,QAAS,GAAIN,SAEvC,mCACJ,EAIKO,EAA6B,CACtCZ,KAAM,CACFC,MAAM,EACNG,aAAc,OACdS,YAAa,CAAEC,KAAM,SAEzBC,OAASf,GAAUM,EAAAP,EAAA,IAAiCC"}
1	+ {"version":3,"file":"PopoverUncontrolled.stories.js","sources":["../../../../../src/components/popover/stories/PopoverUncontrolled.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\nimport { Popover as PopoverComponent } from \"../Popover.js\";\nimport \"../../button/styles/_index.scss\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Popover/PopoverUncontrolled\",\n component: PopoverComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof PopoverComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof PopoverComponent>;\n\ntype PopoverProps = React.ComponentProps<typeof PopoverComponent>;\n\nconst PopoverUncontrolledComponent = (args: PopoverProps) => {\n const [open, setOpen] = useState(false);\n\n return (\n <PopoverComponent {...args} open={open} onOpenChange={setOpen}>\n <PopoverComponent.Trigger\n onClick={() => setOpen(!open)}\n aria-expanded={open}\n asChild\n >\n Åpne popover\n </PopoverComponent.Trigger>\n <PopoverComponent.Content padding={24}>\n Dette er innholdet i Popover\n </PopoverComponent.Content>\n </PopoverComponent>\n );\n};\n\nexport const PopoverUncontrolled: Story = {\n args: {\n open: false,\n onOpenChange: () => {},\n roleOptions: { role: \"menu\" },\n },\n render: (args) => <PopoverUncontrolledComponent {...args} />,\n};\n"],"names":["meta","title","component","PopoverComponent","parameters","layout","tags","PopoverUncontrolledComponent","args","open","setOpen","useState","onOpenChange","children","jsx","Trigger","onClick","asChild","Content","padding","PopoverUncontrolled","roleOptions","role","render"],"mappings":"yMAMA,MAAMA,EAAa,CACfC,MAAO,0CACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aASLC,EAAgCC,IAClC,MAAOC,EAAMC,GAAWC,GAAS,YAG5BR,EAAkB,IAAGK,EAAMC,KAAAA,EAAYG,aAAcF,EAClDG,SAAA,CAAAC,EAACX,EAAiBY,QAAjB,CACGC,QAAS,IAAMN,GAASD,GACxB,gBAAeA,EACfQ,SAAO,EACVJ,SAAA,mBAGAV,EAAiBe,QAAjB,CAAyBC,QAAS,GAAIN,SAEvC,mCACJ,EAIKO,EAA6B,CACtCZ,KAAM,CACFC,MAAM,EACNG,aAAc,OACdS,YAAa,CAAEC,KAAM,SAEzBC,OAASf,GAAUM,EAAAP,EAAA,IAAiCC"}

package/build/es/components/popover/types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ReferenceType, useClick, useDismiss, UseFloatingOptions, useFocus, useHover, useRole } from '@floating-ui/react';
+import { ReferenceType, UseFloatingOptions, useClick, useDismiss, useFocus, useHover, useRole } from '@floating-ui/react';
 export type ClickOptions = Parameters<typeof useClick>[1];
 export type DismissOptions = Parameters<typeof useDismiss>[1];
 export type FocusOptions = Parameters<typeof useFocus>[1];

package/build/es/components/progress-bar/ProgressBar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";const r=(a,r)=>0===r?0:100*a/r,e=({"aria-valuenow":e,"aria-valuemin":s=0,"aria-valuemax":t=100,title:l="Fremdrift",className:i,...o})=>{const c=`${r(e,t)}%`;return a("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:a("span",{className:"jkl-progress-bar__tracker",style:{width:c},"data-testid":"jkl-progress-bar__tracker"})})};export{e as ProgressBar,r as calculatePercentage};
+import{jsx as a}from"react/jsx-runtime";const r=(a,r)=>0===r?0:100*a/r,e=({"aria-valuenow":e,"aria-valuemin":s=0,"aria-valuemax":t=100,title:l="Fremdrift",className:i,...o})=>{const c=`${r(e,t)}%`;return a("div",{tabIndex:0,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:a("span",{className:"jkl-progress-bar__tracker",style:{width:c},"data-testid":"jkl-progress-bar__tracker"})})};export{e as ProgressBar,r as calculatePercentage};
 //# sourceMappingURL=ProgressBar.js.map

package/build/es/components/progress-bar/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { ProgressBarProps } from \"./types.js\";\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","ProgressBar","value","min","max","title","className","rest","trackerWidth","jsx","role","children","style","width"],"mappings":"wCAGa,MAAAA,EAAsB,CAACC,EAAiBC,IACvC,IAAVA,EAAc,EAAe,IAAVD,EAAiBC,EAE3BC,EAAoC,EAC7C,gBAAiBC,EACjB,gBAAiBC,EAAM,EACvB,gBAAiBC,EAAM,IACvBC,MAAAA,EAAQ,YACRC,UAAAA,KACGC,MAEH,MAAMC,EAAe,GAAGV,EAAoBI,EAAOE,MAG/C,OAAAK,EAAC,MAAA,~~CACGH~~,UAAW,oBAAoBA,GAAa,~~KAC5CI~~,KAAK,~~cACLL~~,MAAAA,EACA,gBAAeH,EACf,gBAAeC,EACf,gBAAeC,EACf,cAAY,sBACRG,~~EAEJI~~,~~SAAAF~~,EAAC,OAAA,CACGH,UAAU,~~4BACVM~~,MAAO,CAAEC,~~MAAOL~~,GAChB,cAAY,+BAChB"}
1	+ {"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport type { ProgressBarProps } from \"./types.js\";\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 tabIndex={0}\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","ProgressBar","value","min","max","title","className","rest","trackerWidth","jsx","tabIndex","role","children","style","width"],"mappings":"wCAGa,MAAAA,EAAsB,CAACC,EAAiBC,IACvC,IAAVA,EAAc,EAAe,IAAVD,EAAiBC,EAE3BC,EAAoC,EAC7C,gBAAiBC,EACjB,gBAAiBC,EAAM,EACvB,gBAAiBC,EAAM,IACvBC,MAAAA,EAAQ,YACRC,UAAAA,KACGC,MAEH,MAAMC,EAAe,GAAGV,EAAoBI,EAAOE,MAG/C,OAAAK,EAAC,MAAA,CACGC,SAAU,EACVJ,UAAW,oBAAoBA,GAAa,KAC5CK,KAAK,cACLN,MAAAA,EACA,gBAAeH,EACf,gBAAeC,EACf,gBAAeC,EACf,cAAY,sBACRG,EAEJK,SAAAH,EAAC,OAAA,CACGH,UAAU,4BACVO,MAAO,CAAEC,MAAON,GAChB,cAAY,+BAChB"}

package/build/es/components/progress-bar/stories/ProgressBar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.stories.js","sources":["../../../../../src/components/progress-bar/stories/ProgressBar.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { ProgressBar as ProgressBarComponent } from \"../ProgressBar.js\";\nimport \"../styles/_index.scss\";\nimport React from \"react\";\n\nconst meta: Meta = {\n title: \"Komponenter/ProgressBar\",\n component: ProgressBarComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof ProgressBarComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof ProgressBarComponent>;\n\nexport const ProgressBar: Story = {\n args: {\n \"aria-valuenow\": 0,\n \"aria-valuemin\": 0,\n \"aria-valuemax\": 100,\n },\n render: (args) => (\n <div {...args} style={{ width: \"100%\", minWidth: \"240px\" }}>\n <ProgressBarComponent {...args} />\n </div>\n ),\n};\n"],"names":["meta","title","component","ProgressBarComponent","parameters","layout","tags","ProgressBar","args","render","style","width","minWidth","children"],"mappings":"wFAKA,MAAMA,EAAa,CACfC,MAAO,0BACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAqB,CAC9BC,KAAM,CACF,gBAAiB,EACjB,gBAAiB,EACjB,gBAAiB,KAErBC,OAASD,KACJ,MAAK,IAAGA,EAAME,MAAO,CAAEC,MAAO,OAAQC,SAAU,SAC7CC,WAACV,EAAsB,IAAGK"}
1	+ {"version":3,"file":"ProgressBar.stories.js","sources":["../../../../../src/components/progress-bar/stories/ProgressBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { ProgressBar as ProgressBarComponent } from \"../ProgressBar.js\";\nimport \"../styles/_index.scss\";\nimport React from \"react\";\n\nconst meta: Meta = {\n title: \"Komponenter/ProgressBar\",\n component: ProgressBarComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof ProgressBarComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof ProgressBarComponent>;\n\nexport const ProgressBar: Story = {\n args: {\n \"aria-valuenow\": 0,\n \"aria-valuemin\": 0,\n \"aria-valuemax\": 100,\n },\n render: (args) => (\n <div {...args} style={{ width: \"100%\", minWidth: \"240px\" }}>\n <ProgressBarComponent {...args} />\n </div>\n ),\n};\n"],"names":["meta","title","component","ProgressBarComponent","parameters","layout","tags","ProgressBar","args","render","style","width","minWidth","children"],"mappings":"wFAKA,MAAMA,EAAa,CACfC,MAAO,0BACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAqB,CAC9BC,KAAM,CACF,gBAAiB,EACjB,gBAAiB,EACjB,gBAAiB,KAErBC,OAASD,KACJ,MAAK,IAAGA,EAAME,MAAO,CAAEC,MAAO,OAAQC,SAAU,SAC7CC,WAACV,EAAsB,IAAGK"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { SupportLabel } from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\nimport { RadioButtonProps } from \"./types.js\";\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n (props, ref) => {\n const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n const {\n value: selectedValue,\n density,\n ...context\n } = useRadioGroupContext();\n const supportId = useId(\"jkl-support-label\");\n\n return (\n <>\n <BaseRadioButton\n {...context}\n {...rest}\n ref={ref}\n checked={\n typeof checked !== \"undefined\"\n ? checked\n : typeof selectedValue !== \"undefined\"\n ? value === selectedValue\n : undefined\n }\n value={value}\n aria-describedby={helpLabel ? supportId : undefined}\n />\n <SupportLabel\n {...supportLabelProps}\n label={helpLabel}\n labelType={\"help\"}\n id={supportId}\n density={density}\n />\n </>\n );\n },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","density","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"yUAOO,MAAMA,EAAcC,GACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAE9DG,MAAOI,EACPC,QAAAA,KACGC,GACHC,IACEC,EAAYC,EAAM,qBAExB,OAEQC,EAAAC,EAAA,CAAAC,SAAA,CAAAC,EAACC,EAAA,IACOR,KACAH,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,~~IACzBJ~~,IAAUI,OACV,~~EAEVJ~~,MAAAA,EACA,mBAAkBE,EAAYM,OAAY,IAE9CK,EAACE,EAAA,IACOd,EACJe,MAAOd,EACPe,UAAW,OACXC,GAAIV,EACJH,QAAAA,MAER,IAKZV,EAAYwB,YAAc"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { SupportLabel } from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\nimport type { RadioButtonProps } from \"./types.js\";\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(\n (props, ref) => {\n const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n const {\n value: selectedValue,\n density,\n ...context\n } = useRadioGroupContext();\n const supportId = useId(\"jkl-support-label\");\n\n return (\n <>\n <BaseRadioButton\n {...context}\n {...rest}\n ref={ref}\n checked={\n typeof checked !== \"undefined\"\n ? checked\n : typeof selectedValue !== \"undefined\"\n ? value === selectedValue\n : undefined\n }\n value={value}\n aria-describedby={helpLabel ? supportId : undefined}\n />\n <SupportLabel\n {...supportLabelProps}\n label={helpLabel}\n labelType={\"help\"}\n id={supportId}\n density={density}\n />\n </>\n );\n },\n);\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","density","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"yUAOO,MAAMA,EAAcC,GACvB,CAACC,EAAOC,KACJ,MAAQC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAE9DG,MAAOI,EACPC,QAAAA,KACGC,GACHC,IACEC,EAAYC,EAAM,qBAExB,OAEQC,EAAAC,EAAA,CAAAC,SAAA,CAAAC,EAACC,EAAA,IACOR,KACAH,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACvBJ,IAAUI,OACV,EAEZJ,MAAAA,EACA,mBAAkBE,EAAYM,OAAY,IAE9CK,EAACE,EAAA,IACOd,EACJe,MAAOd,EACPe,UAAW,OACXC,GAAIV,EACJH,QAAAA,MAER,IAKZV,EAAYwB,YAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.js","sources":["../../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { FieldGroup } from \"../input-group/FieldGroup.js\";\nimport { RadioGroupContextProvider } from \"./radioGroupContext.js\";\nimport { RadioButtonGroupProps } from \"./types.js\";\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":"qKAKa,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"}
1	+ {"version":3,"file":"RadioButtonGroup.js","sources":["../../../../src/components/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { FieldGroup } from \"../input-group/FieldGroup.js\";\nimport { RadioGroupContextProvider } from \"./radioGroupContext.js\";\nimport type { RadioButtonGroupProps } from \"./types.js\";\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":"qKAKa,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/radioGroupContext.js.map CHANGED Viewed

	@@ -1 +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 \"../../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 =>\n useContext(radioGroupContext);\n\ninterface Props extends WithChildren {\n state: RadioGroupContext;\n}\n\nexport const RadioGroupContextProvider: React.FC<Props> = ({\n state,\n children,\n}) => (\n <radioGroupContext.Provider value={state}>\n {children}\n </radioGroupContext.Provider>\n);\n"],"names":["radioGroupContext","createContext","name","value","onChange","inline","density","invalid","useRadioGroupContext","useContext","RadioGroupContextProvider","state","children","Provider"],"mappings":"~~8FAYA~~,MAAMA,EAAoBC,EAAiC,CACvDC,UAAM,EACNC,WAAO,EACPC,SAAU,OAGVC,QAAQ,EACRC,aAAS,EACTC,SAAS,IAGAC,EAAuB,IAChCC,EAAWT,GAMFU,EAA6C,EACtDC,MAAAA,EACAC,SAAAA,OAECZ,EAAkBa,SAAlB,CAA2BV,MAAOQ,EAC9BC,SAAAA"}
1	+ {"version":3,"file":"radioGroupContext.js","sources":["../../../../src/components/radio-button/radioGroupContext.tsx"],"sourcesContent":["import React, {\n createContext,\n useContext,\n type ChangeEventHandler,\n} from \"react\";\nimport type { 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 =>\n useContext(radioGroupContext);\n\ninterface Props extends WithChildren {\n state: RadioGroupContext;\n}\n\nexport const RadioGroupContextProvider: React.FC<Props> = ({\n state,\n children,\n}) => (\n <radioGroupContext.Provider value={state}>\n {children}\n </radioGroupContext.Provider>\n);\n"],"names":["radioGroupContext","createContext","name","value","onChange","inline","density","invalid","useRadioGroupContext","useContext","RadioGroupContextProvider","state","children","Provider"],"mappings":"8FAgBA,MAAMA,EAAoBC,EAAiC,CACvDC,UAAM,EACNC,WAAO,EACPC,SAAU,OAGVC,QAAQ,EACRC,aAAS,EACTC,SAAS,IAGAC,EAAuB,IAChCC,EAAWT,GAMFU,EAA6C,EACtDC,MAAAA,EACAC,SAAAA,OAECZ,EAAkBa,SAAlB,CAA2BV,MAAOQ,EAC9BC,SAAAA"}

package/build/es/components/radio-button/stories/BaseRadioButton.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseRadioButton.stories.js","sources":["../../../../../src/components/radio-button/stories/BaseRadioButton.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { BaseRadioButton as BaseRadioButtonComponent } from \"../BaseRadioButton.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/RadioButton/BaseRadioButton\",\n component: BaseRadioButtonComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof BaseRadioButtonComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof BaseRadioButtonComponent>;\n\nexport const BaseRadioButton: Story = {\n args: {\n value: \"BaseRadioButton\",\n },\n};\n"],"names":["meta","title","component","BaseRadioButtonComponent","parameters","layout","tags","BaseRadioButton","args","value"],"mappings":"+FAIA,MAAMA,EAAa,CACfC,MAAO,0CACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAyB,CAClCC,KAAM,CACFC,MAAO"}
1	+ {"version":3,"file":"BaseRadioButton.stories.js","sources":["../../../../../src/components/radio-button/stories/BaseRadioButton.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { BaseRadioButton as BaseRadioButtonComponent } from \"../BaseRadioButton.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/RadioButton/BaseRadioButton\",\n component: BaseRadioButtonComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof BaseRadioButtonComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof BaseRadioButtonComponent>;\n\nexport const BaseRadioButton: Story = {\n args: {\n value: \"BaseRadioButton\",\n },\n};\n"],"names":["meta","title","component","BaseRadioButtonComponent","parameters","layout","tags","BaseRadioButton","args","value"],"mappings":"+FAIA,MAAMA,EAAa,CACfC,MAAO,0CACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAyB,CAClCC,KAAM,CACFC,MAAO"}

package/build/es/components/radio-button/stories/RadioButton.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.stories.js","sources":["../../../../../src/components/radio-button/stories/RadioButton.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioButton as RadioButtonComponent } from \"../RadioButton.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/RadioButton/RadioButton\",\n component: RadioButtonComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof RadioButtonComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof RadioButtonComponent>;\n\nexport const RadioButton: Story = {\n args: {\n value: \"RadioButton\",\n },\n};\n"],"names":["meta","title","component","RadioButtonComponent","parameters","layout","tags","RadioButton","args","value"],"mappings":"uFAIA,MAAMA,EAAa,CACfC,MAAO,sCACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAqB,CAC9BC,KAAM,CACFC,MAAO"}
1	+ {"version":3,"file":"RadioButton.stories.js","sources":["../../../../../src/components/radio-button/stories/RadioButton.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioButton as RadioButtonComponent } from \"../RadioButton.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/RadioButton/RadioButton\",\n component: RadioButtonComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof RadioButtonComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof RadioButtonComponent>;\n\nexport const RadioButton: Story = {\n args: {\n value: \"RadioButton\",\n },\n};\n"],"names":["meta","title","component","RadioButtonComponent","parameters","layout","tags","RadioButton","args","value"],"mappings":"uFAIA,MAAMA,EAAa,CACfC,MAAO,sCACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAqB,CAC9BC,KAAM,CACFC,MAAO"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.stories.js","sources":["../../../../../src/components/radio-button/stories/RadioButtonGroup.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioButton } from \"../RadioButton.js\";\nimport { RadioButtonGroup as RadioButtonGroupComponent } from \"../RadioButtonGroup.js\";\nimport \"../styles/_index.scss\";\nimport React from \"react\";\n\nconst meta: Meta = {\n title: \"Komponenter/RadioButton/RadioButtonGroup\",\n component: RadioButtonGroupComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof RadioButtonGroupComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof RadioButtonGroupComponent>;\n\nconst choices = [\n \"Send en e-post\",\n \"Ring meg\",\n \"Send et brev til folkeregistrert adresse\",\n];\n\nexport const RadioButtonGroup: Story = {\n args: {\n legend: \"Dette er en RadioButtonGroup\",\n },\n render: (args) => (\n <RadioButtonGroupComponent {...args}>\n {choices.map((value) => (\n <RadioButton key={value} value={value}>\n {value}\n </RadioButton>\n ))}\n </RadioButtonGroupComponent>\n ),\n};\n"],"names":["meta","title","component","RadioButtonGroupComponent","parameters","layout","tags","choices","RadioButtonGroup","args","legend","render","jsx","children","map","value","RadioButton"],"mappings":"yLAMA,MAAMA,EAAa,CACfC,MAAO,2CACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOLC,EAAU,CACZ,iBACA,WACA,4CAGSC,EAA0B,CACnCC,KAAM,CACFC,OAAQ,gCAEZC,OAASF,GACJG,EAAAT,EAAA,IAA8BM,EAC1BI,SAAAN,EAAQO,KAAKC,GACTH,EAAAI,EAAA,CAAwBD,MAAAA,EACpBF,SADaE,GAAAA"}
1	+ {"version":3,"file":"RadioButtonGroup.stories.js","sources":["../../../../../src/components/radio-button/stories/RadioButtonGroup.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { RadioButton } from \"../RadioButton.js\";\nimport { RadioButtonGroup as RadioButtonGroupComponent } from \"../RadioButtonGroup.js\";\nimport \"../styles/_index.scss\";\nimport React from \"react\";\n\nconst meta: Meta = {\n title: \"Komponenter/RadioButton/RadioButtonGroup\",\n component: RadioButtonGroupComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof RadioButtonGroupComponent>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof RadioButtonGroupComponent>;\n\nconst choices = [\n \"Send en e-post\",\n \"Ring meg\",\n \"Send et brev til folkeregistrert adresse\",\n];\n\nexport const RadioButtonGroup: Story = {\n args: {\n legend: \"Dette er en RadioButtonGroup\",\n },\n render: (args) => (\n <RadioButtonGroupComponent {...args}>\n {choices.map((value) => (\n <RadioButton key={value} value={value}>\n {value}\n </RadioButton>\n ))}\n </RadioButtonGroupComponent>\n ),\n};\n"],"names":["meta","title","component","RadioButtonGroupComponent","parameters","layout","tags","choices","RadioButtonGroup","args","legend","render","jsx","children","map","value","RadioButton"],"mappings":"yLAMA,MAAMA,EAAa,CACfC,MAAO,2CACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOLC,EAAU,CACZ,iBACA,WACA,4CAGSC,EAA0B,CACnCC,KAAM,CACFC,OAAQ,gCAEZC,OAASF,GACJG,EAAAT,EAAA,IAA8BM,EAC1BI,SAAAN,EAAQO,KAAKC,GACTH,EAAAI,EAAA,CAAwBD,MAAAA,EACpBF,SADaE,GAAAA"}

package/build/es/components/radio-panel/RadioPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioPanel.js","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n} from \"react\";\nimport { BasePanel } from \"../../shared/input-panel/BasePanel.js\";\nimport { context } from \"./radioPanelContext.js\";\nimport { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n {\n alwaysOpen = false,\n label,\n extraLabel,\n checked,\n onChange,\n value,\n defaultChecked,\n ...rest\n }: RadioPanelProps,\n ref: ForwardedRef<HTMLInputElement>,\n) {\n const { onValueChange, checkedValue } = useContext(context);\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n if (!onValueChange) {\n throw new Error(\n \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n );\n }\n onValueChange(value);\n },\n [onChange, onValueChange, value],\n );\n\n useEffect(() => {\n if (defaultChecked) {\n if (!onValueChange) {\n throw new Error(\n \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n );\n }\n onValueChange(value);\n }\n ~~// We never want to rerun this effect. Changing the default value after the\n // input control is first mounted should not cause any updates\n~~ /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, []);\n\n const isControlled = typeof checked !== \"undefined\";\n const isChecked = isControlled ? checked : checkedValue === value;\n\n return (\n <BasePanel\n ref={ref}\n type=\"radio\"\n value={value}\n isChecked={isChecked}\n defaultChecked={defaultChecked}\n checked={isControlled ? checked : undefined}\n onChange={handleChange}\n alwaysOpen={alwaysOpen}\n label={label}\n extraLabel={extraLabel}\n {...rest}\n />\n );\n});\n"],"names":["RadioPanel","forwardRef","alwaysOpen","label","extraLabel","checked","onChange","value","defaultChecked","rest","ref","onValueChange","checkedValue","useContext","context","handleChange","useCallback","e","Error","useEffect","isControlled","jsx","BasePanel","type","isChecked"],"mappings":"8OAYa,MAAAA,EAAaC,GAAW,UAE7BC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,eAAAA,KACGC,GAEPC,GAEM,MAAEC,cAAAA,EAAeC,aAAAA,GAAiBC,EAAWC,GAE7CC,EAAeC,GAChBC,IAEG,GADA,MAAAX,GAAAA,EAAWW,IACNN,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAAK,GAEvB,CAACD,EAAUK,EAAeJ,~~IAG9BY~~,GAAU,KACN,GAAIX,EAAgB,CAChB,IAAKG,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAClB,~~IAID~~,IAEGa,MAAAA,SAAsBf,EAAY,IAIpC,OAAAgB,EAACC,EAAA,CACGZ,IAAAA,EACAa,KAAK,QACLhB,MAAAA,EACAiB,UAPUJ,EAAef,EAAUO,IAAiBL,EAQpDC,eAAAA,EACAH,QAASe,EAAef,OAAU,EAClCC,SAAUS,EACVb,WAAAA,EACAC,MAAAA,EACAC,WAAAA,KACIK,GAGhB"}
1	+ {"version":3,"file":"RadioPanel.js","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n type ForwardedRef,\n forwardRef,\n useCallback,\n useContext,\n useEffect,\n} from \"react\";\nimport { BasePanel } from \"../../shared/input-panel/BasePanel.js\";\nimport { context } from \"./radioPanelContext.js\";\nimport type { RadioPanelProps } from \"./types.js\";\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n {\n alwaysOpen = false,\n label,\n extraLabel,\n checked,\n onChange,\n value,\n defaultChecked,\n ...rest\n }: RadioPanelProps,\n ref: ForwardedRef<HTMLInputElement>,\n) {\n const { onValueChange, checkedValue } = useContext(context);\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n if (!onValueChange) {\n throw new Error(\n \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n );\n }\n onValueChange(value);\n },\n [onChange, onValueChange, value],\n );\n\n // We never want to rerun this effect. Changing the default value after the\n // input control is first mounted should not cause any updates\n // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n useEffect(() => {\n if (defaultChecked) {\n if (!onValueChange) {\n throw new Error(\n \"RadioPanel will not work properly when used outside a RadioPanelGroup\",\n );\n }\n onValueChange(value);\n }\n /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, []);\n\n const isControlled = typeof checked !== \"undefined\";\n const isChecked = isControlled ? checked : checkedValue === value;\n\n return (\n <BasePanel\n ref={ref}\n type=\"radio\"\n value={value}\n isChecked={isChecked}\n defaultChecked={defaultChecked}\n checked={isControlled ? checked : undefined}\n onChange={handleChange}\n alwaysOpen={alwaysOpen}\n label={label}\n extraLabel={extraLabel}\n {...rest}\n />\n );\n});\n"],"names":["RadioPanel","forwardRef","alwaysOpen","label","extraLabel","checked","onChange","value","defaultChecked","rest","ref","onValueChange","checkedValue","useContext","context","handleChange","useCallback","e","Error","useEffect","isControlled","jsx","BasePanel","type","isChecked"],"mappings":"8OAYa,MAAAA,EAAaC,GAAW,UAE7BC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,eAAAA,KACGC,GAEPC,GAEM,MAAEC,cAAAA,EAAeC,aAAAA,GAAiBC,EAAWC,GAE7CC,EAAeC,GAChBC,IAEG,GADA,MAAAX,GAAAA,EAAWW,IACNN,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAAK,GAEvB,CAACD,EAAUK,EAAeJ,IAM9BY,GAAU,KACN,GAAIX,EAAgB,CAChB,IAAKG,EACD,MAAM,IAAIO,MACN,yEAGRP,EAAcJ,EAClB,IAED,IAEGa,MAAAA,SAAsBf,EAAY,IAIpC,OAAAgB,EAACC,EAAA,CACGZ,IAAAA,EACAa,KAAK,QACLhB,MAAAA,EACAiB,UAPUJ,EAAef,EAAUO,IAAiBL,EAQpDC,eAAAA,EACAH,QAASe,EAAef,OAAU,EAClCC,SAAUS,EACVb,WAAAA,EACAC,MAAAA,EACAC,WAAAA,KACIK,GAGhB"}

package/build/es/components/radio-panel/RadioPanelGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioPanelGroup.js","sources":["../../../../src/components/radio-panel/RadioPanelGroup.tsx"],"sourcesContent":["import React, { FC, useState } from \"react\";\nimport { FieldGroup } from \"../input-group/FieldGroup.js\";\nimport { context } from \"./radioPanelContext.js\";\nimport { RadioPanelGroupProps } from \"./types.js\";\n\nexport const RadioPanelGroup: FC<RadioPanelGroupProps> = ({\n className,\n ...rest\n}) => {\n const [checkedValue, setCheckedValue] = useState<string>();\n\n const onChange = (value: string) => {\n setCheckedValue(value);\n };\n\n return (\n <context.Provider value={{ checkedValue, onValueChange: onChange }}>\n <FieldGroup\n className={className}\n role=\"radiogroup\"\n aria-invalid={!!rest.errorLabel}\n {...rest}\n />\n </context.Provider>\n );\n};\n"],"names":["RadioPanelGroup","className","rest","checkedValue","setCheckedValue","useState","jsx","context","Provider","value","onValueChange","children","FieldGroup","role","errorLabel"],"mappings":"oLAKO,MAAMA,EAA4C,EACrDC,UAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,IAOpC,OAAAC,EAACC,EAAQC,SAAR,CAAiBC,MAAO,CAAEN,aAAAA,EAAcO,cAL3BD,IACdL,EAAgBK,EAAK,GAKjBE,SAAAL,EAACM,EAAA,CACGX,UAAAA,EACAY,KAAK,aACL,iBAAgBX,EAAKY,cACjBZ,KAEZ"}
1	+ {"version":3,"file":"RadioPanelGroup.js","sources":["../../../../src/components/radio-panel/RadioPanelGroup.tsx"],"sourcesContent":["import React, { type FC, useState } from \"react\";\nimport { FieldGroup } from \"../input-group/FieldGroup.js\";\nimport { context } from \"./radioPanelContext.js\";\nimport type { RadioPanelGroupProps } from \"./types.js\";\n\nexport const RadioPanelGroup: FC<RadioPanelGroupProps> = ({\n className,\n ...rest\n}) => {\n const [checkedValue, setCheckedValue] = useState<string>();\n\n const onChange = (value: string) => {\n setCheckedValue(value);\n };\n\n return (\n <context.Provider value={{ checkedValue, onValueChange: onChange }}>\n <FieldGroup\n className={className}\n role=\"radiogroup\"\n aria-invalid={!!rest.errorLabel}\n {...rest}\n />\n </context.Provider>\n );\n};\n"],"names":["RadioPanelGroup","className","rest","checkedValue","setCheckedValue","useState","jsx","context","Provider","value","onValueChange","children","FieldGroup","role","errorLabel"],"mappings":"oLAKO,MAAMA,EAA4C,EACrDC,UAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,IAOpC,OAAAC,EAACC,EAAQC,SAAR,CAAiBC,MAAO,CAAEN,aAAAA,EAAcO,cAL3BD,IACdL,EAAgBK,EAAK,GAKjBE,SAAAL,EAACM,EAAA,CACGX,UAAAA,EACAY,KAAK,aACL,iBAAgBX,EAAKY,cACjBZ,KAEZ"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NativeSelect.js","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { NativeSelectProps } from \"./types.js\";\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n invalid,\n items,\n labelProps,\n placeholder = \"Velg\",\n selectClassName,\n supportLabelProps,\n tooltip,\n value,\n width,\n ...rest\n } = props;\n\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n\n return (\n <InputGroup\n {...inputGroupProps}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n <select\n ref={ref}\n className={clsx(\n \"jkl-select__button\",\n selectClassName,\n {\n \"jkl-select__button--active-value\": !!value,\n },\n )}\n defaultValue={value ? undefined : \"\"}\n value={value}\n {...inputProps}\n {...rest}\n >\n {placeholder && !value && (\n <option disabled value=\"\">\n {placeholder}\n </option>\n )}\n {items.map(getValuePair).map((item) => (\n <option\n data-testid=\"jkl-select__option\"\n className=\"jkl-select__option\"\n key={item.value}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltip","value","width","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"iVAOO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHjB,EAcA,OAAAkB,EAACC,EAAA,CAXDjB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,QAAAA,EAMI,cAAY,aACZX,UAAWiB,EAAK,aAAcjB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Ca,OAASC,GACLC,EAAC,MAAA,CACGpB,UAAU,4BACVqB,MAAO,CAAER,MAAAA,GAETS,SAAA,CAAAF,EAAC,SAAA,CACGtB,IAAAA,EACAE,UAAWiB,EACP,qBACAR,EACA,CACI,qCAAsCG,IAG9CW,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,YAOtBG,EAACa,EAAA,CACGC,QAAQ,SACRC,cAAY,EACZ9B,UAAU,0BAElB,IAOpBL,EAAaoC,YAAc"}
1	+ {"version":3,"file":"NativeSelect.js","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { getValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport type { NativeSelectProps } from \"./types.js\";\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n invalid,\n items,\n labelProps,\n placeholder = \"Velg\",\n selectClassName,\n supportLabelProps,\n tooltip,\n value,\n width,\n ...rest\n } = props;\n\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n\n return (\n <InputGroup\n {...inputGroupProps}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n <select\n ref={ref}\n className={clsx(\n \"jkl-select__button\",\n selectClassName,\n {\n \"jkl-select__button--active-value\": !!value,\n },\n )}\n defaultValue={value ? undefined : \"\"}\n value={value}\n {...inputProps}\n {...rest}\n >\n {placeholder && !value && (\n <option disabled value=\"\">\n {placeholder}\n </option>\n )}\n {items.map(getValuePair).map((item) => (\n <option\n data-testid=\"jkl-select__option\"\n className=\"jkl-select__option\"\n key={item.value}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltip","value","width","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"iVAOO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHjB,EAcA,OAAAkB,EAACC,EAAA,CAXDjB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,QAAAA,EAMI,cAAY,aACZX,UAAWiB,EAAK,aAAcjB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Ca,OAASC,GACLC,EAAC,MAAA,CACGpB,UAAU,4BACVqB,MAAO,CAAER,MAAAA,GAETS,SAAA,CAAAF,EAAC,SAAA,CACGtB,IAAAA,EACAE,UAAWiB,EACP,qBACAR,EACA,CACI,qCAAsCG,IAG9CW,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,YAOtBG,EAACa,EAAA,CACGC,QAAQ,SACRC,cAAY,EACZ9B,UAAU,0BAElB,IAOpBL,EAAaoC,YAAc"}

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

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

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

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

package/build/es/components/select/stories/select.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.stories.js","sources":["../../../../../src/components/select/stories/select.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Select } from \"../Select.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Select\",\n component: Select,\n parameters: {\n layout: \"padded\",\n },\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Select>;\n\nconst baseArgs = {\n name: \"Select\",\n label: \"Hvilket merke er telefonen?\",\n items: [\n { value: \"Apple\", label: \"Apple\" },\n { value: \"Samsung\", label: \"Samsung\" },\n { value: \"Google\", label: \"Google\" },\n { value: \"OnePlus\", label: \"OnePlus\" },\n { value: \"Nokia\", label: \"Nokia\" },\n ],\n};\n\nexport const SelectStory: Story = {\n args: baseArgs,\n render: ({ ...props }) => <Select {...props} />,\n};\n"],"names":["meta","title","component","Select","parameters","layout","tags","SelectStory","args","name","label","items","value","render","props","jsx"],"mappings":"8EAKA,MAAMA,EAAa,CACfC,MAAO,qBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,aAmBEC,EAAqB,CAC9BC,KAba,CACbC,KAAM,SACNC,MAAO,8BACPC,MAAO,CACH,CAAEC,MAAO,QAASF,MAAO,SACzB,CAAEE,MAAO,UAAWF,MAAO,WAC3B,CAAEE,MAAO,SAAUF,MAAO,UAC1B,CAAEE,MAAO,UAAWF,MAAO,WAC3B,CAAEE,MAAO,QAASF,MAAO,WAM7BG,OAAQ,KAAMC,KAAYC,EAACZ,EAAQ,IAAGW"}
1	+ {"version":3,"file":"select.stories.js","sources":["../../../../../src/components/select/stories/select.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Select } from \"../Select.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Select\",\n component: Select,\n parameters: {\n layout: \"padded\",\n },\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Select>;\n\nconst baseArgs = {\n name: \"Select\",\n label: \"Hvilket merke er telefonen?\",\n items: [\n { value: \"Apple\", label: \"Apple\" },\n { value: \"Samsung\", label: \"Samsung\" },\n { value: \"Google\", label: \"Google\" },\n { value: \"OnePlus\", label: \"OnePlus\" },\n { value: \"Nokia\", label: \"Nokia\" },\n ],\n};\n\nexport const SelectStory: Story = {\n args: baseArgs,\n render: ({ ...props }) => <Select {...props} />,\n};\n"],"names":["meta","title","component","Select","parameters","layout","tags","SelectStory","args","name","label","items","value","render","props","jsx"],"mappings":"8EAKA,MAAMA,EAAa,CACfC,MAAO,qBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,aAmBEC,EAAqB,CAC9BC,KAba,CACbC,KAAM,SACNC,MAAO,8BACPC,MAAO,CACH,CAAEC,MAAO,QAASF,MAAO,SACzB,CAAEE,MAAO,UAAWF,MAAO,WAC3B,CAAEE,MAAO,SAAUF,MAAO,UAC1B,CAAEE,MAAO,UAAWF,MAAO,WAC3B,CAAEE,MAAO,QAASF,MAAO,WAM7BG,OAAQ,KAAMC,KAAYC,EAACZ,EAAQ,IAAGW"}

package/build/es/components/summary-table/SummaryTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryTable.js","sources":["../../../../src/components/summary-table/SummaryTable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { FC } from \"react\";\nimport { SummaryTableProps } from \"./types.js\";\n\nexport const SummaryTable: FC<SummaryTableProps> = ({\n className,\n caption,\n header,\n body,\n footer,\n ...rest\n}) => {\n return (\n <table {...rest} className={clsx(\"jkl-summary-table\", className)}>\n {caption && <caption className=\"jkl-sr-only\">{caption}</caption>}\n\n <thead className=\"jkl-sr-only\">\n <tr>\n {header.map((description, index) => (\n <th scope=\"col\" key={index}>\n {description}\n </th>\n ))}\n </tr>\n </thead>\n\n <tbody>{body}</tbody>\n\n <tfoot>{footer}</tfoot>\n </table>\n );\n};\n"],"names":["SummaryTable","className","caption","header","body","footer","rest","jsxs","clsx","children","jsx","map","description","index","scope"],"mappings":"gGAIO,MAAMA,EAAsC,EAC/CC,UAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,OAAAA,KACGC,KAGCC,EAAC,YAAUD,EAAML,UAAWO,EAAK,oBAAqBP,GACjDQ,SAAA,CAAAP,GAAYQ,EAAA,UAAA,CAAQT,UAAU,cAAeQ,SAAQP,MAErD,QAAM,CAAAD,UAAU,cACbQ,SAACC,EAAA,KAAA,CACID,WAAOE,KAAI,CAACC,EAAaC,IACtBH,EAAC,MAAGI,MAAM,MACLL,YADgBI,SAOjCH,EAAC,SAAOD,SAAKL,IAEbM,EAAC,SAAOD,SAAOJ"}
1	+ {"version":3,"file":"SummaryTable.js","sources":["../../../../src/components/summary-table/SummaryTable.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { SummaryTableProps } from \"./types.js\";\n\nexport const SummaryTable: FC<SummaryTableProps> = ({\n className,\n caption,\n header,\n body,\n footer,\n ...rest\n}) => {\n return (\n <table {...rest} className={clsx(\"jkl-summary-table\", className)}>\n {caption && <caption className=\"jkl-sr-only\">{caption}</caption>}\n\n <thead className=\"jkl-sr-only\">\n <tr>\n {header.map((description, index) => (\n <th scope=\"col\" key={index}>\n {description}\n </th>\n ))}\n </tr>\n </thead>\n\n <tbody>{body}</tbody>\n\n <tfoot>{footer}</tfoot>\n </table>\n );\n};\n"],"names":["SummaryTable","className","caption","header","body","footer","rest","jsxs","clsx","children","jsx","map","description","index","scope"],"mappings":"gGAIO,MAAMA,EAAsC,EAC/CC,UAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,OAAAA,KACGC,KAGCC,EAAC,YAAUD,EAAML,UAAWO,EAAK,oBAAqBP,GACjDQ,SAAA,CAAAP,GAAYQ,EAAA,UAAA,CAAQT,UAAU,cAAeQ,SAAQP,MAErD,QAAM,CAAAD,UAAU,cACbQ,SAACC,EAAA,KAAA,CACID,WAAOE,KAAI,CAACC,EAAaC,IACtBH,EAAC,MAAGI,MAAM,MACLL,YADgBI,SAOjCH,EAAC,SAAOD,SAAKL,IAEbM,EAAC,SAAOD,SAAOJ"}

package/build/es/components/summary-table/SummaryTableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SummaryTableRow.js","sources":["../../../../src/components/summary-table/SummaryTableRow.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { SummaryTableRowProps } from \"./types.js\";\n\nexport const SummaryTableRow: FC<SummaryTableRowProps> = ({\n className,\n header,\n content,\n ...rest\n}) => {\n return (\n <tr {...rest} className={className}>\n <th scope=\"row\">{header}</th>\n <td>{content}</td>\n </tr>\n );\n};\n"],"names":["SummaryTableRow","className","header","content","rest","jsxs","children","jsx","scope"],"mappings":"kDAGO,MAAMA,EAA4C,EACrDC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,KAGEC,EAAA,KAAA,IAAOD,EAAMH,UAAAA,EACVK,SAAA,CAACC,EAAA,KAAA,CAAGC,MAAM,MAAOF,SAAOJ,IACxBK,EAAC,MAAID,SAAQH"}
1	+ {"version":3,"file":"SummaryTableRow.js","sources":["../../../../src/components/summary-table/SummaryTableRow.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport type { SummaryTableRowProps } from \"./types.js\";\n\nexport const SummaryTableRow: FC<SummaryTableRowProps> = ({\n className,\n header,\n content,\n ...rest\n}) => {\n return (\n <tr {...rest} className={className}>\n <th scope=\"row\">{header}</th>\n <td>{content}</td>\n </tr>\n );\n};\n"],"names":["SummaryTableRow","className","header","content","rest","jsxs","children","jsx","scope"],"mappings":"kDAGO,MAAMA,EAA4C,EACrDC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,KACGC,KAGEC,EAAA,KAAA,IAAOD,EAAMH,UAAAA,EACVK,SAAA,CAACC,EAAA,KAAA,CAAGC,MAAM,MAAOF,SAAOJ,IACxBK,EAAC,MAAID,SAAQH"}