@fremtind/jokul 4.7.3 → 4.7.5
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.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/input-panel/InputPanel.cjs +1 -1
- package/build/cjs/components/input-panel/InputPanel.cjs.map +1 -1
- package/build/cjs/components/popover/Popover.cjs +1 -1
- package/build/cjs/components/popover/Popover.cjs.map +1 -1
- package/build/cjs/components/popover/types.d.cts +10 -0
- package/build/cjs/components/select/Select.cjs +1 -1
- package/build/cjs/components/select/Select.cjs.map +1 -1
- package/build/cjs/hooks/index.cjs +1 -1
- package/build/cjs/hooks/index.d.cts +1 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs +2 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs.map +1 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.d.cts +8 -0
- package/build/cjs/index.cjs +1 -1
- package/build/cjs/utilities/index.cjs +1 -1
- package/build/cjs/utilities/index.d.cts +1 -0
- package/build/cjs/utilities/mergeRefs.cjs +1 -1
- package/build/cjs/utilities/mergeRefs.cjs.map +1 -1
- package/build/cjs/utilities/mergeRefs.d.cts +0 -8
- package/build/es/components/input-panel/InputPanel.js +1 -1
- package/build/es/components/input-panel/InputPanel.js.map +1 -1
- package/build/es/components/popover/Popover.js +1 -1
- package/build/es/components/popover/Popover.js.map +1 -1
- package/build/es/components/popover/types.d.ts +10 -0
- package/build/es/components/select/Select.js +1 -1
- package/build/es/components/select/Select.js.map +1 -1
- package/build/es/hooks/index.d.ts +1 -0
- package/build/es/hooks/index.js +1 -1
- package/build/es/hooks/useMergeRefs/useMergeRefs.d.ts +8 -0
- package/build/es/hooks/useMergeRefs/useMergeRefs.js +2 -0
- package/build/es/hooks/useMergeRefs/useMergeRefs.js.map +1 -0
- package/build/es/index.js +1 -1
- package/build/es/utilities/index.d.ts +1 -0
- package/build/es/utilities/index.js +1 -1
- package/build/es/utilities/mergeRefs.d.ts +0 -8
- package/build/es/utilities/mergeRefs.js +1 -1
- package/build/es/utilities/mergeRefs.js.map +1 -1
- package/package.json +1 -1
- package/styles/components/card/card.css +4 -12
- package/styles/components/card/card.min.css +1 -1
- package/styles/components/card/card.scss +4 -11
- package/styles/components/checkbox-panel/checkbox-panel.css +2 -11
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/file-input.css +9 -9
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/input-panel/input-panel.css +2 -11
- package/styles/components/input-panel/input-panel.min.css +1 -1
- package/styles/components/input-panel/input-panel.scss +2 -13
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -3
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-panel/radio-panel.css +2 -11
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +13 -13
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.scss +2 -2
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/tag/tag.css +1 -0
- package/styles/components/tag/tag.min.css +1 -1
- package/styles/components/tag/tag.scss +1 -0
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/styles.css +42 -58
- package/styles/styles.min.css +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),i=require("../checkbox/Checkbox.cjs"),a=require("../radio-button/RadioButton.cjs");require("../../hooks/useId/useId.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../radio-button/radioGroupContext.cjs"),require("../radio-button/BaseRadioButton.cjs");const c=n.forwardRef(function({className:n,description:c,type:s,label:o,amount:t,value:l=o,name:u="Panelvalg",children:d,extraLabel:j,alwaysOpen:p,...x},h){return e.jsxs("div",{className:r.clsx("jkl-input-panel",`jkl-${s}-panel`,n),ref:h,children:[e.jsxs("div",{className:"jkl-input-panel__header",children:["checkbox"===s&&e.jsx(i.Checkbox,{value:l?.toString(),name:u,...x,children:o}),"radio"===s&&e.jsx(a.RadioButton,{value:l?.toString(),name:u,...x,children:o}),(t||j)&&e.jsx("span",{className:"jkl-input-panel__header__amount",children:t||j})]}),(c||d)&&e.jsx("div",{className:"jkl-input-panel__description",children:c||d})]})});exports.InputPanel=c;
|
|
2
2
|
//# sourceMappingURL=InputPanel.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputPanel.cjs","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n {\n className,\n description,\n type,\n label,\n amount,\n value = label,\n name = \"Panelvalg\",\n children,\n extraLabel,\n alwaysOpen
|
|
1
|
+
{"version":3,"file":"InputPanel.cjs","sources":["../../../../src/components/input-panel/InputPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef, forwardRef } from \"react\";\nimport { Checkbox } from \"../checkbox/index.js\";\nimport { RadioButton } from \"../radio-button/index.js\";\nimport type { InputPanelProps } from \"./types.js\";\n\nexport const InputPanel = forwardRef(function BasePanel(\n {\n className,\n description,\n type,\n label,\n amount,\n value = label,\n name = \"Panelvalg\",\n children,\n extraLabel,\n alwaysOpen: _alwaysOpen,\n ...rest\n }: InputPanelProps,\n ref: ForwardedRef<HTMLInputElement>,\n) {\n return (\n <div\n className={clsx(\"jkl-input-panel\", `jkl-${type}-panel`, className)}\n ref={ref}\n >\n <div className=\"jkl-input-panel__header\">\n {type === \"checkbox\" && (\n <Checkbox value={value?.toString()} name={name} {...rest}>\n {label}\n </Checkbox>\n )}\n {type === \"radio\" && (\n <RadioButton\n value={value?.toString()}\n name={name}\n {...rest}\n >\n {label}\n </RadioButton>\n )}\n {(amount || extraLabel) && (\n <span className=\"jkl-input-panel__header__amount\">\n {amount || extraLabel}\n </span>\n )}\n </div>\n {(description || children) && (\n <div className=\"jkl-input-panel__description\">\n {description || children}\n </div>\n )}\n </div>\n );\n});\n"],"names":["InputPanel","forwardRef","className","description","type","label","amount","value","name","children","extraLabel","alwaysOpen","_alwaysOpen","rest","ref","jsxs","clsx","jsx","Checkbox","toString","RadioButton"],"mappings":"mgBAMO,MAAMA,EAAaC,EAAAA,WAAW,UAE7BC,UAAAA,EACAC,YAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQF,EACRG,KAAAA,EAAO,YACPC,SAAAA,EACAC,WAAAA,EACAC,WAAYC,KACTC,GAEPC,GAEA,OACIC,EAAAA,KAAC,MAAA,CACGb,UAAWc,EAAAA,KAAK,kBAAmB,OAAOZ,UAAcF,GACxDY,IAAAA,EAEAL,SAAA,CAAAM,EAAAA,KAAC,MAAA,CAAIb,UAAU,0BACVO,SAAA,CAAS,aAATL,GACGa,EAAAA,IAACC,EAAAA,SAAA,CAASX,MAAOA,GAAOY,WAAYX,KAAAA,KAAgBK,EAC/CJ,SAAAJ,IAGC,UAATD,GACGa,EAAAA,IAACG,EAAAA,YAAA,CACGb,MAAOA,GAAOY,WACdX,KAAAA,KACIK,EAEHJ,SAAAJ,KAGPC,GAAUI,IACRO,EAAAA,IAAC,QAAKf,UAAU,kCACXO,YAAUC,QAIrBP,GAAeM,IACbQ,EAAAA,IAAC,OAAIf,UAAU,+BACVO,YAAeA,MAKpC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndSize.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),i=s.createContext(null),l=()=>{const e=s.useContext(i);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:i=!0,offset:l=4,positionReference:a,onPlacementChange:c,
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("@floating-ui/react"),n=require("../../../clsx-E3yX_9sL.cjs"),o=require("react"),r=require("../../utilities/getThemeAndSize.cjs");const s=function(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const n in e)if("default"!==n){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}return t.default=e,Object.freeze(t)}(o),i=s.createContext(null),l=()=>{const e=s.useContext(i);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},a=({children:n,...o})=>{const r=(({open:e,onOpenChange:n,placement:o="bottom-start",strategy:r="absolute",modal:i=!0,offset:l=4,positionReference:a,onPlacementChange:c,matchReferenceWidth:u=!1,hoverOptions:d,focusOptions:f,clickOptions:p,roleOptions:m,dismissOptions:g})=>{const[h,x]=s.useState(e),b=e??h,v=n??x,j=t.useFloating({open:b,onOpenChange:v,placement:o,strategy:r,middleware:[t.offset(l),t.flip({padding:5,fallbackPlacements:["bottom","top"]}),t.shift({padding:12}),...u?[t.size({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})]:[]],whileElementsMounted:t.autoUpdate}),y=j.context,O=t.useClick(y,{enabled:!1,...p}),P=t.useHover(y,{enabled:!1,...d}),R=t.useFocus(y,{enabled:!1,...f}),k=t.useDismiss(y,g),C=t.useRole(y,m),F=t.useInteractions([O,k,R,P,C]);return s.useLayoutEffect(()=>{a&&j.refs.setPositionReference(a?.current)},[a,j.refs]),s.useLayoutEffect(()=>{b&&c?.(j.placement)},[b,j.placement,c]),s.useMemo(()=>({open:b,onOpenChange:v,modal:i,...F,...j}),[b,v,i,F,j])})({...o});return e.jsx(i.Provider,{value:r,children:n})},c=s.forwardRef(function({children:o,asChild:r=!1,...i},a){const{refs:c,getReferenceProps:u,open:d,onOpenChange:f}=l(),p=o.ref,m=t.useMergeRefs([c.setReference,a,p]);return r&&s.isValidElement(o)?s.cloneElement(o,u({ref:m,...i,...o.props})):e.jsx("button",{ref:m,onClick:()=>f?.(!d),"aria-expanded":d,...u({...i,className:n.clsx("jkl-popover-trigger",i.className)}),children:o})}),u=s.forwardRef(function({style:o,className:i,padding:a=0,initialFocus:c=0,returnFocus:u=!0,...d},f){const{context:p,modal:m,refs:g,open:h,floatingStyles:x,getFloatingProps:b,isPositioned:v}=l(),j=t.useMergeRefs([g.setFloating,f]),y=g.reference.current,{theme:O,size:P}=(k=y)&&"contextElement"in k?r.getThemeAndSize(y.contextElement):r.getThemeAndSize(y),R=s.useRef(null);var k;return s.useEffect(()=>{R.current=p.elements.domReference?.closest("[data-portal]")||document.body},[p.elements.domReference]),h?e.jsx(t.FloatingPortal,{root:R.current,children:e.jsx(t.FloatingFocusManager,{context:p,modal:m,initialFocus:c,returnFocus:u,children:e.jsx("div",{"data-theme":O,"data-size":P,className:n.clsx("jkl jkl-popover",i),ref:j,style:{...o,...x,"--popover-padding":`var(--jkl-spacing-${a})`,visibility:m||v?"visible":"hidden"},...b(d),children:d.children})})}):null});a.Trigger=c,a.Content=u,exports.Popover=a,exports.default=a;
|
|
2
2
|
//# sourceMappingURL=Popover.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.cjs","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 { getThemeAndSize } from \"../../utilities/getThemeAndSize.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 onPlacementChange,\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 // useLayoutEffect (i stedet for useEffect) sikrer at konsumenter får\n // riktig placement før paint — ellers ville første frame bruke default\n // placement og deretter snappe over til den faktiske, noe som gir et\n // synlig \"glitch\" på styling som er placement-avhengig (f.eks. flat side\n // / border-radius på Select-listboxen ved flip).\n React.useLayoutEffect(() => {\n if (!open) return;\n onPlacementChange?.(data.placement);\n }, [open, data.placement, onPlacementChange]);\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({\n ...props,\n className: clsx(\"jkl-popover-trigger\", props.className),\n })}\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 {\n context,\n modal,\n refs,\n open,\n floatingStyles,\n getFloatingProps,\n isPositioned,\n } = usePopoverContext();\n const ref = useMergeRefs([refs.setFloating, propRef]);\n\n const referenceElement = refs.reference.current as ReferenceElement;\n\n const { theme, size } = isCustomPositioned(referenceElement)\n ? getThemeAndSize(referenceElement.contextElement)\n : getThemeAndSize(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-size={size}\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 // Skjul popoveren inntil floating-ui har regnet\n // ut første posisjon — ellers blinker den\n // kort i (0,0) før den hopper på plass.\n // Bare for ikke-modale popovere; modale bruker\n // umiddelbar fokus-trap som forutsetter at\n // innholdet er fokuserbart fra første render.\n visibility:\n modal || isPositioned ? \"visible\" : \"hidden\",\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","onPlacementChange","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","className","clsx","PopoverContent","style","initialFocus","returnFocus","floatingStyles","getFloatingProps","isPositioned","setFloating","referenceElement","reference","theme","size","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","visibility","Trigger","Content"],"mappings":"kjBAmGMA,EAAiBC,EAAMC,cAAkC,MAEzDC,EAAoB,KACtB,MAAMC,EAAUH,EAAMI,WAAWL,GAEjC,GAAe,MAAXI,EACA,MAAM,IAAIE,MACN,mEAIR,OAAOF,GAGEG,EAAU,EACnBC,SAAAA,KACGC,MAIH,MAAMC,EAhGS,GACfC,KAAMC,EACNC,aAAcC,EACdC,UAAAA,EAAY,eACZC,SAAAA,EAAW,WACXC,MAAAA,GAAQ,EACRC,OAAQC,EAAU,EAClBC,kBAAAA,EACAC,kBAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,YAAAA,EACAC,eAAAA,MAEA,MAAOC,EAAkBC,GAAuB3B,EAAM4B,SAASjB,GAEzDD,EAAOC,GAASe,EAChBd,EAAeC,GAAiBc,EAEhCE,EAAOC,EAAAA,YAAY,CACrBpB,KAAAA,EACAE,aAAAA,EACAE,UAAAA,EACAC,SAAAA,EACAgB,WAAY,CACRd,EAAAA,OAAOC,GACPc,EAAAA,KAAK,CAAEC,QAAS,EAAGC,mBAAoB,CAAC,SAAU,SAClDC,QAAM,CAAEF,QAAS,MAErBG,qBAAsBC,EAAAA,aAGpBlC,EAAU0B,EAAK1B,QAEfmC,EAAQC,EAAAA,SAASpC,EAAS,CAC5BqC,SAAS,KACNjB,IAEDkB,EAAQC,EAAAA,SAASvC,EAAS,CAAEqC,SAAS,KAAUnB,IAC/CsB,EAAQC,EAAAA,SAASzC,EAAS,CAAEqC,SAAS,KAAUlB,IAC/CuB,EAAUC,EAAAA,WAAW3C,EAASsB,GAC9BsB,EAAOC,EAAAA,QAAQ7C,EAASqB,GAExByB,EAAeC,EAAAA,gBAAgB,CAACZ,EAAOO,EAASF,EAAOF,EAAOM,IAEpE/C,OAAAA,EAAMmD,gBAAgB,KACdhC,GACAU,EAAKuB,KAAKC,qBAAqBlC,GAAmBmC,UAEvD,CAACnC,EAAmBU,EAAKuB,OAO5BpD,EAAMmD,gBAAgB,KACbzC,GACLU,IAAoBS,EAAKf,YAC1B,CAACJ,EAAMmB,EAAKf,UAAWM,IAEnBpB,EAAMuD,QACT,KAAA,CACI7C,KAAAA,EACAE,aAAAA,EACAI,MAAAA,KACGiC,KACApB,IAEP,CAACnB,EAAME,EAAcI,EAAOiC,EAAcpB,KA0B9B2B,CAAW,IAAKhD,IAChC,aACKT,EAAe0D,SAAf,CAAwBC,MAAOjD,EAC3BF,SAAAA,KAyBPoD,EAAiB3D,EAAM4D,WAG3B,UAA0BrD,SAAAA,EAAUsD,QAAAA,GAAU,KAAUC,GAASC,GAC/D,MAAQX,KAAAA,EAAMY,kBAAAA,EAAmBtD,KAAAA,EAAME,aAAAA,GAAiBV,IAClD+D,EAAe1D,EAAiB2D,IAChCA,EAAMC,EAAAA,aAAa,CAACf,EAAKgB,aAAcL,EAASE,IAEtD,OAAIJ,GAAW7D,EAAMqE,eAAe9D,GACzBP,EAAMsE,aACT/D,EACAyD,EAAkB,CACdE,IAAAA,KACGJ,KACAvD,EAASuD,SAMpBS,EAAAA,IAAC,SAAA,CACGL,IAAAA,EACAM,QAAS,IAAM5D,KAAgBF,GAC/B,gBAAeA,KACXsD,EAAkB,IACfF,EACHW,UAAWC,EAAAA,KAAK,sBAAuBZ,EAAMW,aAGhDlE,SAAAA,GAGb,GAoCMoE,EAAiB3E,EAAM4D,WAG3B,UAEMgB,MAAAA,EACAH,UAAAA,EACAxC,QAAAA,EAAU,EACV4C,aAAAA,EAAe,EACfC,YAAAA,GAAc,KACXhB,GAEPC,GAEA,MACI5D,QAAAA,EACAa,MAAAA,EACAoC,KAAAA,EACA1C,KAAAA,EACAqE,eAAAA,EACAC,iBAAAA,EACAC,aAAAA,GACA/E,IACEgE,EAAMC,EAAAA,aAAa,CAACf,EAAK8B,YAAanB,IAEtCoB,EAAmB/B,EAAKgC,UAAU9B,SAEhC+B,MAAAA,EAAOC,KAAAA,IAlCfH,EAkC2CA,IA9BpC,mBAAoBA,EA+BrBI,EAAAA,gBAAgBJ,EAAiBK,gBACjCD,EAAAA,gBAAgBJ,GAEhBM,EAAoBzF,EAAM0F,OAA2B,MAtC3DP,MAgDA,OAPAnF,EAAM2F,UAAU,KACZF,EAAkBnC,QACdnD,EAAQyF,SAASC,cAAcC,QAC3B,kBACCC,SAASC,MACnB,CAAC7F,EAAQyF,SAASC,eAEhBnF,EAGD6D,EAAAA,IAAC0B,EAAAA,eAAA,CAAeC,KAAMT,EAAkBnC,QACpC/C,SAAAgE,EAAAA,IAAC4B,EAAAA,qBAAA,CACGhG,QAAAA,EACAa,MAAAA,EACA6D,aAAAA,EACAC,YAAAA,EAEAvE,SAAAgE,EAAAA,IAAC,MAAA,CACG,aAAYc,EACZ,YAAWC,EACXb,UAAWC,EAAAA,KAAK,kBAAmBD,GACnCP,IAAAA,EACAU,MACI,IACOA,KACAG,EACH,oBAAqB,qBAAqB9C,KAO1CmE,WACIpF,GAASiE,EAAe,UAAY,aAG5CD,EAAiBlB,GAEpBvD,SAAAuD,EAAMvD,eAhCL,IAqCtB,GAEAD,EAAQ+F,QAAU1C,EAClBrD,EAAQgG,QAAU3B"}
|
|
1
|
+
{"version":3,"file":"Popover.cjs","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 size,\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 { getThemeAndSize } from \"../../utilities/getThemeAndSize.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 onPlacementChange,\n matchReferenceWidth = false,\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 ...(matchReferenceWidth\n ? [\n size({\n apply({ rects, elements }) {\n elements.floating.style.width = `${rects.reference.width}px`;\n },\n }),\n ]\n : []),\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 // useLayoutEffect (i stedet for useEffect) sikrer at konsumenter får\n // riktig placement før paint — ellers ville første frame bruke default\n // placement og deretter snappe over til den faktiske, noe som gir et\n // synlig \"glitch\" på styling som er placement-avhengig (f.eks. flat side\n // / border-radius på Select-listboxen ved flip).\n React.useLayoutEffect(() => {\n if (!open) return;\n onPlacementChange?.(data.placement);\n }, [open, data.placement, onPlacementChange]);\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({\n ...props,\n className: clsx(\"jkl-popover-trigger\", props.className),\n })}\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 {\n context,\n modal,\n refs,\n open,\n floatingStyles,\n getFloatingProps,\n isPositioned,\n } = usePopoverContext();\n const ref = useMergeRefs([refs.setFloating, propRef]);\n\n const referenceElement = refs.reference.current as ReferenceElement;\n\n const { theme, size } = isCustomPositioned(referenceElement)\n ? getThemeAndSize(referenceElement.contextElement)\n : getThemeAndSize(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-size={size}\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 // Skjul popoveren inntil floating-ui har regnet\n // ut første posisjon — ellers blinker den\n // kort i (0,0) før den hopper på plass.\n // Bare for ikke-modale popovere; modale bruker\n // umiddelbar fokus-trap som forutsetter at\n // innholdet er fokuserbart fra første render.\n visibility:\n modal || isPositioned ? \"visible\" : \"hidden\",\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","onPlacementChange","matchReferenceWidth","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","size","apply","rects","elements","floating","style","width","reference","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","className","clsx","PopoverContent","initialFocus","returnFocus","floatingStyles","getFloatingProps","isPositioned","setFloating","referenceElement","theme","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","visibility","Trigger","Content"],"mappings":"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"}
|
|
@@ -65,6 +65,16 @@ export interface PopoverOptions {
|
|
|
65
65
|
* popoveren ligger over eller under referansen.
|
|
66
66
|
*/
|
|
67
67
|
onPlacementChange?: (placement: Placement) => void;
|
|
68
|
+
/**
|
|
69
|
+
* Setter bredden på popoveren lik bredden på referanse-elementet.
|
|
70
|
+
* Referanse-elementet er vanligvis `Popover.Trigger`, men kan overstyres
|
|
71
|
+
* med `positionReference`.
|
|
72
|
+
*
|
|
73
|
+
* @see https://floating-ui.com/docs/size#match-reference-width
|
|
74
|
+
*
|
|
75
|
+
* @default false
|
|
76
|
+
*/
|
|
77
|
+
matchReferenceWidth?: boolean;
|
|
68
78
|
/**
|
|
69
79
|
* Options for hover-interaksjoner.
|
|
70
80
|
*
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),n=require("../../hooks/useId/useId.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),n=require("../../hooks/useId/useId.cjs"),s=require("../../hooks/useListNavigation/useListNavigation.cjs"),o=require("../../hooks/usePreviousValue/usePreviousValue.cjs"),a=require("../../utilities/valuePair.cjs"),l=require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),u=require("../input-group/InputGroup.cjs"),c=require("../popover/Popover.cjs"),i=require("./select-utils.cjs"),p=()=>{},d=r.forwardRef((d,v)=>{const{id:f,name:b,items:m,value:k,label:j,labelProps:h,onChange:g,onBlur:y,onFocus:w,className:_,helpLabel:x,errorLabel:P,invalid:C,searchable:E=!1,inline:S=!1,defaultPrompt:D="Velg",width:L,maxShownOptions:N=5,style:$,tooltip:q,...F}=d,V=n.useId(f||"jkl-select",{generateSuffix:!f}),R=`${V}_label`,T=`${V}_button`,A=`${V}_search-input`,[I,O]=r.useState(!1),M=r.useCallback(()=>{O(e=>!e)},[]),[K,B]=r.useState("bottom"),G=r.useCallback(e=>{B(e.startsWith("top")?"top":"bottom")},[]),W=!!E,U=W&&I,[z,H]=r.useState(""),J=r.useCallback(e=>!!e.label.toLowerCase().includes(z.toLowerCase())||"function"==typeof E&&E(z,e),[E,z]),Q=r.useMemo(()=>m.map(a.getValuePair).map(e=>{const t=!W||""===z||J(e);return{...e,visible:t}}),[m,W,z,J]),X=r.useMemo(()=>!(typeof k>"u")&&m.some(e=>"string"==typeof e?e===k:e.value===k),[k,m]),[Y,Z]=r.useState(X&&void 0!==k?k:""),ee=""!==Y,te=r.useMemo(()=>Q.find(e=>e.value===Y)?.label||D,[Q,Y,D]),re=r.useRef(null),ne=r.useCallback(e=>{re.current=e,v&&("function"==typeof v?v(e):v.current=e),e&&Z(e.value)},[v]),se=o.usePreviousValue(k);r.useEffect(()=>{k!==se&&Z(typeof k>"u"||!X?"":k)},[k,se,X]);const oe=r.useCallback(e=>{const t=e.value;H(""),Z(t),M(),ie.current?.focus()},[M]),ae=o.usePreviousValue(Y);r.useEffect(()=>{typeof ae>"u"||ae===Y||Y===k||(g&&g({type:"change",target:{name:b,value:Y}}),re.current&&re.current.dispatchEvent(new Event("change",{bubbles:!0})))},[g,b,k,Y,ae]);const le=r.useRef(null),ue=r.useRef(!1),ce=r.useRef(null),ie=r.useRef(null),pe=r.useRef(null),[de,ve]=r.useState(null),fe=r.useRef(W),be=r.useRef(Y);r.useEffect(()=>{fe.current=W,be.current=Y});const me=r.useCallback(e=>{pe.current=e,ve(e),e&&!fe.current&&requestAnimationFrame(()=>{pe.current===e&&i.focusSelected(e,be.current)})},[]),ke=o.usePreviousValue(I);r.useEffect(()=>{I!==ke&&(I&&W?ce.current?.focus():!I&&ue.current&&ie.current&&ie.current.focus())},[I,ke,W]),s.useListNavigation({element:de});const je=r.useCallback(()=>{W&&H(""),y&&(y({type:"blur",target:{name:b,value:Y}}),re.current?.dispatchEvent(new Event("focusout",{bubbles:!0}))),ue.current=!1,O(!1)},[y,W,b,Y]),he=r.useCallback(e=>{const t=le.current,r=pe.current;t?.contains(e.relatedTarget)||r?.contains(e.relatedTarget)||je()},[je]),ge=r.useCallback(()=>{ue.current||(w&&w({type:"change",target:{name:b,value:Y}}),ue.current=!0)},[w,Y,b]),ye=r.useCallback(e=>{e.target.focus({preventScroll:!0})},[]);r.useEffect(()=>{const e=re.current;if(!e)return;const t=()=>{U?ce.current?.focus():ie.current?.focus()},r=e=>{const t=e.relatedTarget,r=le.current?.contains(t),n=pe.current?.contains(t);(r||n)&&e.preventDefault()};return e.addEventListener("focus",t),e.addEventListener("blur",r),()=>{e.removeEventListener("focus",t),e.removeEventListener("blur",r)}},[U]);const we=r.useCallback(e=>{"ArrowDown"!==e.key&&" "!==e.key||I?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),O(!1)):(e.preventDefault(),e.stopPropagation(),O(!0))},[I]),_e=r.useCallback(e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const t=pe.current;t&&(W?i.focusSelected(t,void 0):i.focusSelected(t,Y))}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),O(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&I&&(e.preventDefault(),e.stopPropagation());else{const t=pe.current;t&&(e.preventDefault(),e.stopPropagation(),i.focusSelected(t,Y))}},[Y,W,I]),xe=r.useCallback(e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&ce.current?ce.current.focus():ie.current&&(Z(e.currentTarget.value),O(!1),ie.current.focus());else if("ArrowUp"===e.key&&pe.current&&ce.current){const t=pe.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===t?.id&&ce.current&&ce.current.focus()}},[]);return r.useEffect(()=>{const e=e=>{"Escape"===e.key&&I&&O(!1)};return typeof window<"u"&&I&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}},[I]),e.jsxs(e.Fragment,{children:[e.jsxs("select",{name:b,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ne,value:Y,onChange:p,children:[e.jsx("option",{value:""})," ",Q.map(t=>e.jsx("option",{hidden:!t.visible,value:t.value,children:t.label},`${V}-opt-${t.value}`))]}),e.jsx(u.InputGroup,{ref:le,"data-testid":"jkl-select",className:t.clsx("jkl-select",_,{"jkl-select--inline":S,"jkl-select--open":I&&Q.some(e=>e.visible),"jkl-select--no-value":!ee,"jkl-select--invalid":!!P||C}),tooltip:q&&r.isValidElement(q)?r.cloneElement(q,{triggerProps:{...q.props.triggerProps,onFocus:e=>{q.props.triggerProps?.onFocus?.(e),je()}}}):null,...F,id:W?A:T,style:$,label:j,labelProps:{id:R,srOnly:S,...h,htmlFor:W?A:T},helpLabel:x,errorLabel:P,render:({"aria-invalid":r,...n})=>{const s=I&&Q.some(e=>e.visible);return e.jsxs(c.Popover,{open:s,placement:"bottom-start",offset:0,modal:!1,onPlacementChange:G,matchReferenceWidth:!0,clickOptions:{enabled:!1},dismissOptions:{enabled:!1},roleOptions:{enabled:!1},children:[e.jsx(c.Popover.Trigger,{asChild:!0,children:e.jsxs("div",{className:"jkl-select__outer-wrapper","data-popover-placement":K,style:{width:L},children:[W&&e.jsx("input",{...n,"aria-invalid":r,id:A,hidden:!U,ref:ce,placeholder:"Søk",value:z,onChange:e=>H(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":s&&ee?`${V}__${i.toLower(Y)}`:void 0,"aria-controls":s?V:void 0,"aria-expanded":s,role:"combobox",onKeyDown:_e,onBlur:he,onFocus:ge,onClick:e=>{e.stopPropagation()}}),e.jsx("button",{"aria-invalid":r,...n,id:T,ref:ie,hidden:U,type:"button",name:`${b}-btn`,className:t.clsx("jkl-select__button",{"jkl-select__button--active-value":!!Y}),"data-testid":"jkl-select__button","aria-label":`${te||"Velg"},${j}`,"aria-expanded":s,"aria-controls":s?V:void 0,onBlur:he,onFocus:ge,onKeyDown:we,onClick:M,onMouseDown:e=>{e.preventDefault(),ie.current?.focus()},children:te}),e.jsx(l.ArrowVerticalAnimated,{variant:"medium",pointingDown:!s,className:"jkl-select__arrow"})]})}),e.jsx(c.Popover.Content,{initialFocus:-1,returnFocus:!1,className:"jkl-select__popover",children:e.jsx("div",{id:V,ref:me,role:"listbox",className:"jkl-select__options-menu","data-popover-placement":K,"aria-labelledby":R,tabIndex:-1,"data-focus":"controlled",style:{"--jkl-select-max-shown-options":N},children:Q.map((t,r)=>t.visible?e.jsxs("button",{hidden:!t.visible,type:"button",id:`${V}__${i.toLower(t.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":t.value===Y,role:"option",value:t.value,"data-testautoid":`jkl-select__option-${r}`,onBlur:he,onFocus:ge,onKeyDown:xe,onClick:e=>{e.preventDefault(),oe(t)},onMouseOver:ye,children:[t.label,t.description?e.jsx("span",{className:"jkl-select__option-description",children:t.description}):null]},`${V}-${t.value}`):null)})})]})}})]})});d.displayName="Select",exports.Select=d;
|
|
2
2
|
//# sourceMappingURL=Select.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.cjs","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 useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\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 Popover from \"../popover/Popover.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 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 // Unik anchor-name som CSS anchor positioning bruker for å la\n // dropdown-listen matche bredden til triggeren.\n const anchorName = `--${listId.replace(/[^a-zA-Z0-9-]/g, \"-\")}-anchor`;\n\n const [dropdownIsShown, setShown] = useState(false);\n const toggleListVisibility = useCallback(() => {\n setShown((previousValue) => !previousValue);\n }, []);\n\n // Lagrer faktisk placement etter at floating-ui har kjørt `flip`,\n // slik at vi kan bytte hvilken side av lista og knappen som er\n // flat når lista snus over triggeren.\n const [popoverPlacement, setPopoverPlacement] = useState<\n \"top\" | \"bottom\"\n >(\"bottom\");\n const handlePlacementChange = useCallback((p: string) => {\n setPopoverPlacement(p.startsWith(\"top\") ? \"top\" : \"bottom\");\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 dropdownRef = useRef<HTMLDivElement | null>(null);\n // Lagrer listbox-elementet i state slik at downstream-hooks\n // (f.eks. `useListNavigation`) kan re-feste listeneren idet\n // `FloatingPortal` mounter listen.\n const [listboxEl, setListboxEl] = useState<HTMLDivElement | null>(null);\n\n // Listen rendres i en `FloatingPortal` som monteres via en\n // `useLayoutEffect` + `setState` i floating-ui. Refen er derfor\n // ikke tilgjengelig før i en senere render. Vi bruker en\n // callback-ref for å plassere fokus på valgt option idet listen\n // faktisk er i DOM-en. Refen holdes stabil (tom dependency-list)\n // slik at en endring i `selectedValue`/`isSearchable` ikke får\n // React til å avmontere/remontere refen og dermed flytte fokus\n // mens menyen er åpen — vi leser siste verdier via refs.\n const isSearchableRef = useRef(isSearchable);\n const selectedValueRef = useRef(selectedValue);\n useEffect(() => {\n isSearchableRef.current = isSearchable;\n selectedValueRef.current = selectedValue;\n });\n\n const setDropdownRef = useCallback((node: HTMLDivElement | null) => {\n dropdownRef.current = node;\n setListboxEl(node);\n if (node && !isSearchableRef.current) {\n // Popover skjules med `visibility: hidden` til\n // floating-ui har regnet ut første posisjon. Defer\n // fokus til etter neste paint, slik at vi ikke flytter\n // fokus til et usynlig element (kan gi manglende\n // fokusindikator i enkelte nettlesere).\n requestAnimationFrame(() => {\n if (dropdownRef.current === node) {\n focusSelected(node, selectedValueRef.current);\n }\n });\n }\n }, []);\n\n // Søkbart felt og knappen som får fokus ved lukking lever i hoved-\n // DOM-en, så for de tilfellene holder en useEffect.\n const wasShown = usePreviousValue(dropdownIsShown);\n useEffect(() => {\n if (dropdownIsShown === wasShown) return;\n if (dropdownIsShown && isSearchable) {\n searchFieldRef.current?.focus();\n } else if (\n !dropdownIsShown &&\n focusInsideRef.current &&\n buttonRef.current\n ) {\n buttonRef.current.focus();\n }\n }, [dropdownIsShown, wasShown, isSearchable]);\n\n useListNavigation({ element: listboxEl });\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 const dropdownElement = dropdownRef.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 // Dropdown rendres i en portal, så vi må sjekke begge trærne\n // for å avgjøre om fokus blir værende inne i komponenten.\n const nextFocusIsInsideComponent =\n componentRootElement?.contains(e.relatedTarget as Node) ||\n dropdownElement?.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 if (!select) return;\n\n const onSelectFocus = () => {\n if (showSearchInputField) {\n searchFieldRef.current?.focus();\n } else {\n buttonRef.current?.focus();\n }\n };\n const onSelectBlur = (ev: globalThis.FocusEvent) => {\n // Les refs ved hvert kall slik at vi alltid sjekker mot\n // siste listbox-element — den portalerte listen kan ha\n // mountet etter at denne effekten ble satt opp.\n const target = ev.relatedTarget as Node | null;\n const insideComponent =\n componentRootElementRef.current?.contains(target);\n const insideDropdown = dropdownRef.current?.contains(target);\n if (insideComponent || insideDropdown) {\n ev.preventDefault();\n }\n };\n\n select.addEventListener(\"focus\", onSelectFocus);\n select.addEventListener(\"blur\", onSelectBlur);\n return () => {\n select.removeEventListener(\"focus\", onSelectFocus);\n select.removeEventListener(\"blur\", onSelectBlur);\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 [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 [],\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={style}\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 // Lista vises kun når dropdown er åpnet *og* det\n // finnes minst ett synlig valg. `aria-expanded` på\n // trigger og combobox må følge samme boolean for\n // ikke å lyve om popoverens tilstand.\n const isPopoverOpen =\n dropdownIsShown &&\n visibleItems.some((item) => item.visible);\n return (\n <Popover\n open={isPopoverOpen}\n placement=\"bottom-start\"\n offset={0}\n modal={false}\n onPlacementChange={handlePlacementChange}\n clickOptions={{ enabled: false }}\n dismissOptions={{ enabled: false }}\n roleOptions={{ enabled: false }}\n >\n <Popover.Trigger asChild>\n <div\n className=\"jkl-select__outer-wrapper\"\n data-popover-placement={\n popoverPlacement\n }\n style={\n {\n width,\n anchorName,\n } as CSSProperties\n }\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(\n e.target.value,\n )\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n isPopoverOpen &&\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={\n isPopoverOpen\n ? listId\n : undefined\n }\n aria-expanded={isPopoverOpen}\n role=\"combobox\"\n onKeyDown={\n handleSearchOnKeyDown\n }\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(\n \"jkl-select__button\",\n {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n },\n )}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel || \"Velg\"\n },${label}`}\n aria-expanded={isPopoverOpen}\n aria-controls={\n isPopoverOpen\n ? listId\n : undefined\n }\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 <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!isPopoverOpen}\n className=\"jkl-select__arrow\"\n />\n </div>\n </Popover.Trigger>\n <Popover.Content\n initialFocus={-1}\n returnFocus={false}\n className=\"jkl-select__popover\"\n style={{\n width: `anchor-size(${anchorName} width)`,\n }}\n >\n <div\n id={listId}\n ref={setDropdownRef}\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n data-popover-placement={\n popoverPlacement\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n style={\n {\n \"--jkl-select-max-shown-options\":\n maxShownOptions,\n } as CSSProperties\n }\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 ===\n 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={\n handleOptionOnKeyDown\n }\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={\n handleMouseOver\n }\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 </Popover.Content>\n </Popover>\n );\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","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","anchorName","replace","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","popoverPlacement","setPopoverPlacement","handlePlacementChange","p","startsWith","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","dropdownRef","listboxEl","setListboxEl","isSearchableRef","selectedValueRef","setDropdownRef","node","requestAnimationFrame","focusSelected","wasShown","useListNavigation","element","close","handleBlur","e","componentRootElement","dropdownElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","onSelectFocus","onSelectBlur","ev","insideComponent","insideDropdown","preventDefault","addEventListener","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","listElement","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","ref","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","srOnly","htmlFor","render","ariaInvalid","inputProps","isPopoverOpen","Popover","open","placement","offset","modal","onPlacementChange","clickOptions","enabled","dismissOptions","roleOptions","Trigger","asChild","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","ArrowVerticalAnimated","variant","pointingDown","Content","initialFocus","returnFocus","i","onMouseOver","description","displayName"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Select.cjs","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties,\n type FocusEvent,\n forwardRef,\n type KeyboardEvent,\n type MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\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 Popover from \"../popover/Popover.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 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 // Lagrer faktisk placement etter at floating-ui har kjørt `flip`,\n // slik at vi kan bytte hvilken side av lista og knappen som er\n // flat når lista snus over triggeren.\n const [popoverPlacement, setPopoverPlacement] = useState<\n \"top\" | \"bottom\"\n >(\"bottom\");\n const handlePlacementChange = useCallback((p: string) => {\n setPopoverPlacement(p.startsWith(\"top\") ? \"top\" : \"bottom\");\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 dropdownRef = useRef<HTMLDivElement | null>(null);\n // Lagrer listbox-elementet i state slik at downstream-hooks\n // (f.eks. `useListNavigation`) kan re-feste listeneren idet\n // `FloatingPortal` mounter listen.\n const [listboxEl, setListboxEl] = useState<HTMLDivElement | null>(null);\n\n // Listen rendres i en `FloatingPortal` som monteres via en\n // `useLayoutEffect` + `setState` i floating-ui. Refen er derfor\n // ikke tilgjengelig før i en senere render. Vi bruker en\n // callback-ref for å plassere fokus på valgt option idet listen\n // faktisk er i DOM-en. Refen holdes stabil (tom dependency-list)\n // slik at en endring i `selectedValue`/`isSearchable` ikke får\n // React til å avmontere/remontere refen og dermed flytte fokus\n // mens menyen er åpen — vi leser siste verdier via refs.\n const isSearchableRef = useRef(isSearchable);\n const selectedValueRef = useRef(selectedValue);\n useEffect(() => {\n isSearchableRef.current = isSearchable;\n selectedValueRef.current = selectedValue;\n });\n\n const setDropdownRef = useCallback((node: HTMLDivElement | null) => {\n dropdownRef.current = node;\n setListboxEl(node);\n if (node && !isSearchableRef.current) {\n // Popover skjules med `visibility: hidden` til\n // floating-ui har regnet ut første posisjon. Defer\n // fokus til etter neste paint, slik at vi ikke flytter\n // fokus til et usynlig element (kan gi manglende\n // fokusindikator i enkelte nettlesere).\n requestAnimationFrame(() => {\n if (dropdownRef.current === node) {\n focusSelected(node, selectedValueRef.current);\n }\n });\n }\n }, []);\n\n // Søkbart felt og knappen som får fokus ved lukking lever i hoved-\n // DOM-en, så for de tilfellene holder en useEffect.\n const wasShown = usePreviousValue(dropdownIsShown);\n useEffect(() => {\n if (dropdownIsShown === wasShown) return;\n if (dropdownIsShown && isSearchable) {\n searchFieldRef.current?.focus();\n } else if (\n !dropdownIsShown &&\n focusInsideRef.current &&\n buttonRef.current\n ) {\n buttonRef.current.focus();\n }\n }, [dropdownIsShown, wasShown, isSearchable]);\n\n useListNavigation({ element: listboxEl });\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 const dropdownElement = dropdownRef.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 // Dropdown rendres i en portal, så vi må sjekke begge trærne\n // for å avgjøre om fokus blir værende inne i komponenten.\n const nextFocusIsInsideComponent =\n componentRootElement?.contains(e.relatedTarget as Node) ||\n dropdownElement?.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 if (!select) return;\n\n const onSelectFocus = () => {\n if (showSearchInputField) {\n searchFieldRef.current?.focus();\n } else {\n buttonRef.current?.focus();\n }\n };\n const onSelectBlur = (ev: globalThis.FocusEvent) => {\n // Les refs ved hvert kall slik at vi alltid sjekker mot\n // siste listbox-element — den portalerte listen kan ha\n // mountet etter at denne effekten ble satt opp.\n const target = ev.relatedTarget as Node | null;\n const insideComponent =\n componentRootElementRef.current?.contains(target);\n const insideDropdown = dropdownRef.current?.contains(target);\n if (insideComponent || insideDropdown) {\n ev.preventDefault();\n }\n };\n\n select.addEventListener(\"focus\", onSelectFocus);\n select.addEventListener(\"blur\", onSelectBlur);\n return () => {\n select.removeEventListener(\"focus\", onSelectFocus);\n select.removeEventListener(\"blur\", onSelectBlur);\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 [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 [],\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={style}\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 // Lista vises kun når dropdown er åpnet *og* det\n // finnes minst ett synlig valg. `aria-expanded` på\n // trigger og combobox må følge samme boolean for\n // ikke å lyve om popoverens tilstand.\n const isPopoverOpen =\n dropdownIsShown &&\n visibleItems.some((item) => item.visible);\n return (\n <Popover\n open={isPopoverOpen}\n placement=\"bottom-start\"\n offset={0}\n modal={false}\n onPlacementChange={handlePlacementChange}\n matchReferenceWidth\n clickOptions={{ enabled: false }}\n dismissOptions={{ enabled: false }}\n roleOptions={{ enabled: false }}\n >\n <Popover.Trigger asChild>\n <div\n className=\"jkl-select__outer-wrapper\"\n data-popover-placement={\n popoverPlacement\n }\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(\n e.target.value,\n )\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n isPopoverOpen &&\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={\n isPopoverOpen\n ? listId\n : undefined\n }\n aria-expanded={isPopoverOpen}\n role=\"combobox\"\n onKeyDown={\n handleSearchOnKeyDown\n }\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(\n \"jkl-select__button\",\n {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n },\n )}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel || \"Velg\"\n },${label}`}\n aria-expanded={isPopoverOpen}\n aria-controls={\n isPopoverOpen\n ? listId\n : undefined\n }\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 <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!isPopoverOpen}\n className=\"jkl-select__arrow\"\n />\n </div>\n </Popover.Trigger>\n <Popover.Content\n initialFocus={-1}\n returnFocus={false}\n className=\"jkl-select__popover\"\n >\n <div\n id={listId}\n ref={setDropdownRef}\n // biome-ignore lint/a11y/useSemanticElements: Vi reimplementerer select\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n data-popover-placement={\n popoverPlacement\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n style={\n {\n \"--jkl-select-max-shown-options\":\n maxShownOptions,\n } as CSSProperties\n }\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 ===\n 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={\n handleOptionOnKeyDown\n }\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={\n handleMouseOver\n }\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 </Popover.Content>\n </Popover>\n );\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","width","maxShownOptions","style","tooltip","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","popoverPlacement","setPopoverPlacement","handlePlacementChange","p","startsWith","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","buttonRef","focus","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","dropdownRef","listboxEl","setListboxEl","isSearchableRef","selectedValueRef","setDropdownRef","node","requestAnimationFrame","focusSelected","wasShown","useListNavigation","element","close","handleBlur","e","componentRootElement","dropdownElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","onSelectFocus","onSelectBlur","ev","insideComponent","insideDropdown","preventDefault","addEventListener","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","listElement","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","ref","jsx","hidden","InputGroup","clsx","React","isValidElement","cloneElement","triggerProps","srOnly","htmlFor","render","ariaInvalid","inputProps","isPopoverOpen","Popover","open","placement","offset","modal","onPlacementChange","matchReferenceWidth","clickOptions","enabled","dismissOptions","roleOptions","Trigger","asChild","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","ArrowVerticalAnimated","variant","pointingDown","Content","initialFocus","returnFocus","i","onMouseOver","description","displayName"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useAnimatedDetails/useAnimatedDetails.cjs"),s=require("./useAnimatedHeight/useAnimatedHeight.cjs"),r=require("./useAnimatedHeight/useAnimatedHeightBetween.cjs"),u=require("./useAnimatedHeight/useAutoAnimateHeight.cjs"),i=require("./useBrowserPreferences/useBrowserPreferences.cjs"),t=require("./useIntersectionObserver/useIntersectionObserver.cjs"),o=require("./useLocalStorage/useLocalStorage.cjs"),n=require("./useMutationObserver/useMutationObserver.cjs"),c=require("./usePreviousValue/usePreviousValue.cjs"),a=require("./useProgressiveImg/useProgressiveImg.cjs"),g=require("./useScreen/useScreen.cjs"),l=require("./useScrollIntoView/useScrollIntoView.cjs"),d=require("./useAriaLiveRegion/useAriaLiveRegion.cjs"),m=require("./useClickOutside/useClickOutside.cjs"),p=require("./useFocusOutside/useFocusOutside.cjs"),v=require("./useElementDimensions/useElementDimensions.cjs"),A=require("./useId/useId.cjs"),j=require("./useKeyListener/useKeyListener.cjs"),x=require("./useListNavigation/useListNavigation.cjs"),q=require("./useSwipeGesture/useSwipeGesture.cjs");exports.useAnimatedDetails=e.useAnimatedDetails,exports.useAnimatedHeight=s.useAnimatedHeight,exports.useAnimatedHeightBetween=r.useAnimatedHeightBetween,exports.useAutoAnimatedHeight=u.useAutoAnimatedHeight,exports.useBrowserPreferences=i.useBrowserPreferences,exports.useIntersectionObserver=t.useIntersectionObserver,exports.useLocalStorage=o.useLocalStorage,exports.useMutationObserver=n.useMutationObserver,exports.usePreviousValue=c.usePreviousValue,exports.useProgressiveImg=a.useProgressiveImg,exports.useScreen=g.useScreen,exports.useScrollIntoView=l.useScrollIntoView,exports.useAriaLiveRegion=d.useAriaLiveRegion,exports.useClickOutside=m.useClickOutside,exports.useFocusOutside=p.useFocusOutside,exports.useElementDimensions=v.useElementDimensions,exports.useId=A.useId,exports.useKeyListener=j.useKeyListener,exports.useListNavigation=x.useListNavigation,exports.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useAnimatedDetails/useAnimatedDetails.cjs"),s=require("./useAnimatedHeight/useAnimatedHeight.cjs"),r=require("./useAnimatedHeight/useAnimatedHeightBetween.cjs"),u=require("./useAnimatedHeight/useAutoAnimateHeight.cjs"),i=require("./useBrowserPreferences/useBrowserPreferences.cjs"),t=require("./useIntersectionObserver/useIntersectionObserver.cjs"),o=require("./useLocalStorage/useLocalStorage.cjs"),n=require("./useMutationObserver/useMutationObserver.cjs"),c=require("./usePreviousValue/usePreviousValue.cjs"),a=require("./useProgressiveImg/useProgressiveImg.cjs"),g=require("./useScreen/useScreen.cjs"),l=require("./useScrollIntoView/useScrollIntoView.cjs"),d=require("./useAriaLiveRegion/useAriaLiveRegion.cjs"),m=require("./useClickOutside/useClickOutside.cjs"),p=require("./useFocusOutside/useFocusOutside.cjs"),v=require("./useElementDimensions/useElementDimensions.cjs"),A=require("./useId/useId.cjs"),j=require("./useKeyListener/useKeyListener.cjs"),x=require("./useListNavigation/useListNavigation.cjs"),q=require("./useMergeRefs/useMergeRefs.cjs"),S=require("./useSwipeGesture/useSwipeGesture.cjs");exports.useAnimatedDetails=e.useAnimatedDetails,exports.useAnimatedHeight=s.useAnimatedHeight,exports.useAnimatedHeightBetween=r.useAnimatedHeightBetween,exports.useAutoAnimatedHeight=u.useAutoAnimatedHeight,exports.useBrowserPreferences=i.useBrowserPreferences,exports.useIntersectionObserver=t.useIntersectionObserver,exports.useLocalStorage=o.useLocalStorage,exports.useMutationObserver=n.useMutationObserver,exports.usePreviousValue=c.usePreviousValue,exports.useProgressiveImg=a.useProgressiveImg,exports.useScreen=g.useScreen,exports.useScrollIntoView=l.useScrollIntoView,exports.useAriaLiveRegion=d.useAriaLiveRegion,exports.useClickOutside=m.useClickOutside,exports.useFocusOutside=p.useFocusOutside,exports.useElementDimensions=v.useElementDimensions,exports.useId=A.useId,exports.useKeyListener=j.useKeyListener,exports.useListNavigation=x.useListNavigation,exports.useMergeRefs=q.useMergeRefs,exports.useSwipeGesture=S.useSwipeGesture;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -15,4 +15,5 @@ export { useElementDimensions, type Dimensions, } from './useElementDimensions/u
|
|
|
15
15
|
export { useId } from './useId/useId.cjs';
|
|
16
16
|
export { useKeyListener } from './useKeyListener/useKeyListener.cjs';
|
|
17
17
|
export { useListNavigation } from './useListNavigation/useListNavigation.cjs';
|
|
18
|
+
export { useMergeRefs } from './useMergeRefs/useMergeRefs.cjs';
|
|
18
19
|
export { useSwipeGesture, type SwipeChangeHandler, } from './useSwipeGesture/useSwipeGesture.cjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMergeRefs.cjs","sources":["../../../../src/hooks/useMergeRefs/useMergeRefs.ts"],"sourcesContent":["import {\n type ForwardedRef,\n type MutableRefObject,\n type RefCallback,\n useMemo,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\n\n/**\n * Slår sammen flere refs til én callback som bare endres når en av refsene endres.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);\n */\nexport function useMergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n // biome-ignore lint/correctness/useExhaustiveDependencies: Sammenlign hver ref for seg; [refs] blir ny ved hver rendring.\n return useMemo(() => mergeRefs(...refs), refs);\n}\n"],"names":["refs","useMemo","mergeRefs"],"mappings":"yKAcO,YACAA,GAGH,OAAOC,EAAAA,QAAQ,IAAMC,EAAAA,aAAaF,GAAOA,EAC7C"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Slår sammen flere refs til én callback som bare endres når en av refsene endres.
|
|
4
|
+
* @param refs Liste over refs du vil slå sammen
|
|
5
|
+
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
6
|
+
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
7
|
+
*/
|
|
8
|
+
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
package/build/cjs/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./core/tokens.cjs"),s=require("./hooks/useAnimatedDetails/useAnimatedDetails.cjs"),r=require("./hooks/useAnimatedHeight/useAnimatedHeight.cjs"),i=require("./hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs"),t=require("./hooks/useAnimatedHeight/useAutoAnimateHeight.cjs"),o=require("./hooks/useBrowserPreferences/useBrowserPreferences.cjs"),u=require("./hooks/useIntersectionObserver/useIntersectionObserver.cjs"),a=require("./hooks/useLocalStorage/useLocalStorage.cjs"),m=require("./hooks/useMutationObserver/useMutationObserver.cjs"),n=require("./hooks/usePreviousValue/usePreviousValue.cjs"),l=require("./hooks/useProgressiveImg/useProgressiveImg.cjs"),d=require("./hooks/useScreen/useScreen.cjs"),c=require("./hooks/useScrollIntoView/useScrollIntoView.cjs"),g=require("./hooks/useAriaLiveRegion/useAriaLiveRegion.cjs"),p=require("./hooks/useClickOutside/useClickOutside.cjs"),h=require("./hooks/useFocusOutside/useFocusOutside.cjs"),x=require("./hooks/useElementDimensions/useElementDimensions.cjs"),f=require("./hooks/useId/useId.cjs"),j=require("./hooks/useKeyListener/useKeyListener.cjs"),q=require("./hooks/useListNavigation/useListNavigation.cjs"),E=require("./hooks/useSwipeGesture/useSwipeGesture.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./core/tokens.cjs"),s=require("./hooks/useAnimatedDetails/useAnimatedDetails.cjs"),r=require("./hooks/useAnimatedHeight/useAnimatedHeight.cjs"),i=require("./hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs"),t=require("./hooks/useAnimatedHeight/useAutoAnimateHeight.cjs"),o=require("./hooks/useBrowserPreferences/useBrowserPreferences.cjs"),u=require("./hooks/useIntersectionObserver/useIntersectionObserver.cjs"),a=require("./hooks/useLocalStorage/useLocalStorage.cjs"),m=require("./hooks/useMutationObserver/useMutationObserver.cjs"),n=require("./hooks/usePreviousValue/usePreviousValue.cjs"),l=require("./hooks/useProgressiveImg/useProgressiveImg.cjs"),d=require("./hooks/useScreen/useScreen.cjs"),c=require("./hooks/useScrollIntoView/useScrollIntoView.cjs"),g=require("./hooks/useAriaLiveRegion/useAriaLiveRegion.cjs"),p=require("./hooks/useClickOutside/useClickOutside.cjs"),h=require("./hooks/useFocusOutside/useFocusOutside.cjs"),x=require("./hooks/useElementDimensions/useElementDimensions.cjs"),f=require("./hooks/useId/useId.cjs"),j=require("./hooks/useKeyListener/useKeyListener.cjs"),q=require("./hooks/useListNavigation/useListNavigation.cjs"),E=require("./hooks/useMergeRefs/useMergeRefs.cjs"),V=require("./hooks/useSwipeGesture/useSwipeGesture.cjs"),M=require("../index-CaISwoxr.cjs"),v=require("./utilities/formatters/util/formatNumber.cjs"),k=require("./utilities/formatters/util/parseNumber.cjs"),R=require("./utilities/formatters/util/registerWithMask.cjs"),O=require("./utilities/formatters/avstand/formatAvstand.cjs"),N=require("./utilities/formatters/bytes/formatBytes.cjs"),S=require("./utilities/formatters/date/formatDate.cjs"),A=require("./utilities/formatters/fodselsnummer/formatFodselsnummer.cjs"),I=require("./utilities/formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs"),L=require("./utilities/formatters/kontonummer/formatKontonummer.cjs"),T=require("./utilities/formatters/kortnummer/formatKortnummer.cjs"),b=require("./utilities/formatters/telefonnummer/formatTelefonnummer.cjs"),P=require("./utilities/formatters/valuta/formatValuta.cjs"),K=require("./utilities/getThemeAndSize.cjs"),D=require("./utilities/mergeRefs.cjs"),F=require("./utilities/polymorphism/mergeProps.cjs"),G=require("./utilities/polymorphism/SlotComponent.cjs"),w=require("./utilities/tabListener.cjs"),C=require("./utilities/validators/isValidEpost/isValidEpost.cjs"),W=require("./utilities/validators/isValidTelefonnummer/isValidTelefonnummer.cjs"),y=require("./utilities/validators/isValidRegistreringsnummer/isValidRegistreringsnummer.cjs"),H=require("./utilities/validators/isValidChassisnummer/isValidChassisnummer.cjs"),B=require("./utilities/validators/isValidDogId/isValidDogId.cjs"),U=require("./utilities/validators/isExactLength/isExactLength.cjs"),X=require("./utilities/validators/isInteger/isInteger.cjs"),_=require("./utilities/validators/isValidFodselsnummer/isValidFodselsnummer.cjs"),z=require("./utilities/validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.cjs"),J=require("./utilities/validators/isValidName/isValidName.cjs"),Q=require("./utilities/validators/hasMinimumWords/hasMinimumWords.cjs"),Y=require("./utilities/validators/hasNoIllegalCharacters/hasNoIllegalCharacters.cjs"),Z=require("./utilities/valuePair.cjs");exports.tokens=e,exports.useAnimatedDetails=s.useAnimatedDetails,exports.useAnimatedHeight=r.useAnimatedHeight,exports.useAnimatedHeightBetween=i.useAnimatedHeightBetween,exports.useAutoAnimatedHeight=t.useAutoAnimatedHeight,exports.useBrowserPreferences=o.useBrowserPreferences,exports.useIntersectionObserver=u.useIntersectionObserver,exports.useLocalStorage=a.useLocalStorage,exports.useMutationObserver=m.useMutationObserver,exports.usePreviousValue=n.usePreviousValue,exports.useProgressiveImg=l.useProgressiveImg,exports.useScreen=d.useScreen,exports.useScrollIntoView=c.useScrollIntoView,exports.useAriaLiveRegion=g.useAriaLiveRegion,exports.useClickOutside=p.useClickOutside,exports.useFocusOutside=h.useFocusOutside,exports.useElementDimensions=x.useElementDimensions,exports.useId=f.useId,exports.useKeyListener=j.useKeyListener,exports.useListNavigation=q.useListNavigation,exports.useMergeRefs=E.useMergeRefs,exports.useSwipeGesture=V.useSwipeGesture,exports.unicode=M.unicode,exports.formatNumber=v.formatNumber,exports.parseNumber=k.parseNumber,exports.registerWithFodselsnummerMask=R.registerWithFodselsnummerMask,exports.registerWithKontonummerMask=R.registerWithKontonummerMask,exports.registerWithKortnummerMask=R.registerWithKortnummerMask,exports.registerWithMasks=R.registerWithMasks,exports.registerWithTelefonnummerMask=R.registerWithTelefonnummerMask,exports.formatAvstand=O.formatAvstand,exports.formatBytes=N.formatBytes,exports.formatDate=S.formatDate,exports.FODSELSNUMMER_REGEX=A.FODSELSNUMMER_REGEX,exports.formatFodselsnummer=A.formatFodselsnummer,exports.ORGANISASJONSNUMMER_REGEX=I.ORGANISASJONSNUMMER_REGEX,exports.formatOrganisasjonsnummer=I.formatOrganisasjonsnummer,exports.KONTONUMMER_REGEX=L.KONTONUMMER_REGEX,exports.formatKontonummer=L.formatKontonummer,exports.KORTNUMMER_REGEX=T.KORTNUMMER_REGEX,exports.formatKortnummer=T.formatKortnummer,exports.TELEFONNUMMER_REGEX=b.TELEFONNUMMER_REGEX,exports.formatTelefonnummer=b.formatTelefonnummer,exports.formatValuta=P.formatValuta,exports.getThemeAndSize=K.getThemeAndSize,exports.mergeRefs=D.mergeRefs,exports.mergeProps=F.mergeProps,exports.SlotComponent=G.SlotComponent,exports.initTabListener=w.initTabListener,exports.isValidEpost=C.isValidEpost,exports.isValidTelefonnummer=W.isValidTelefonnummer,exports.isValidRegistreringsnummer=y.isValidRegistreringsnummer,exports.isValidChassisnummer=H.isValidChassisnummer,exports.isValidDogId=B.isValidDogId,exports.isExactLength=U.isExactLength,exports.isInteger=X.isInteger,exports.isValidFodselsnummer=_.isValidFodselsnummer,exports.isValidOrganisasjonsnummer=z.isValidOrganisasjonsnummer,exports.isValidName=J.isValidName,exports.hasMinimumWords=Q.hasMinimumWords,exports.hasNoIllegalCharacters=Y.hasNoIllegalCharacters,exports.getValuePair=Z.getValuePair;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../index-CaISwoxr.cjs"),r=require("./formatters/util/formatNumber.cjs"),s=require("./formatters/util/parseNumber.cjs"),t=require("./formatters/util/registerWithMask.cjs"),i=require("./formatters/avstand/formatAvstand.cjs"),a=require("./formatters/bytes/formatBytes.cjs"),o=require("./formatters/date/formatDate.cjs"),m=require("./formatters/fodselsnummer/formatFodselsnummer.cjs"),n=require("./formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs"),u=require("./formatters/kontonummer/formatKontonummer.cjs"),l=require("./formatters/kortnummer/formatKortnummer.cjs"),d=require("./formatters/telefonnummer/formatTelefonnummer.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../index-CaISwoxr.cjs"),r=require("./formatters/util/formatNumber.cjs"),s=require("./formatters/util/parseNumber.cjs"),t=require("./formatters/util/registerWithMask.cjs"),i=require("./formatters/avstand/formatAvstand.cjs"),a=require("./formatters/bytes/formatBytes.cjs"),o=require("./formatters/date/formatDate.cjs"),m=require("./formatters/fodselsnummer/formatFodselsnummer.cjs"),n=require("./formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs"),u=require("./formatters/kontonummer/formatKontonummer.cjs"),l=require("./formatters/kortnummer/formatKortnummer.cjs"),d=require("./formatters/telefonnummer/formatTelefonnummer.cjs"),f=require("./formatters/valuta/formatValuta.cjs"),g=require("./getThemeAndSize.cjs"),p=require("./mergeRefs.cjs"),x=require("../hooks/useMergeRefs/useMergeRefs.cjs"),c=require("./polymorphism/mergeProps.cjs"),E=require("./polymorphism/SlotComponent.cjs"),j=require("./tabListener.cjs"),M=require("./validators/isValidEpost/isValidEpost.cjs"),h=require("./validators/isValidTelefonnummer/isValidTelefonnummer.cjs"),V=require("./validators/isValidRegistreringsnummer/isValidRegistreringsnummer.cjs"),R=require("./validators/isValidChassisnummer/isValidChassisnummer.cjs"),q=require("./validators/isValidDogId/isValidDogId.cjs"),N=require("./validators/isExactLength/isExactLength.cjs"),O=require("./validators/isInteger/isInteger.cjs"),T=require("./validators/isValidFodselsnummer/isValidFodselsnummer.cjs"),v=require("./validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.cjs"),S=require("./validators/isValidName/isValidName.cjs"),W=require("./validators/hasMinimumWords/hasMinimumWords.cjs"),k=require("./validators/hasNoIllegalCharacters/hasNoIllegalCharacters.cjs"),I=require("./valuePair.cjs");exports.unicode=e.unicode,exports.formatNumber=r.formatNumber,exports.parseNumber=s.parseNumber,exports.registerWithFodselsnummerMask=t.registerWithFodselsnummerMask,exports.registerWithKontonummerMask=t.registerWithKontonummerMask,exports.registerWithKortnummerMask=t.registerWithKortnummerMask,exports.registerWithMasks=t.registerWithMasks,exports.registerWithTelefonnummerMask=t.registerWithTelefonnummerMask,exports.formatAvstand=i.formatAvstand,exports.formatBytes=a.formatBytes,exports.formatDate=o.formatDate,exports.FODSELSNUMMER_REGEX=m.FODSELSNUMMER_REGEX,exports.formatFodselsnummer=m.formatFodselsnummer,exports.ORGANISASJONSNUMMER_REGEX=n.ORGANISASJONSNUMMER_REGEX,exports.formatOrganisasjonsnummer=n.formatOrganisasjonsnummer,exports.KONTONUMMER_REGEX=u.KONTONUMMER_REGEX,exports.formatKontonummer=u.formatKontonummer,exports.KORTNUMMER_REGEX=l.KORTNUMMER_REGEX,exports.formatKortnummer=l.formatKortnummer,exports.TELEFONNUMMER_REGEX=d.TELEFONNUMMER_REGEX,exports.formatTelefonnummer=d.formatTelefonnummer,exports.formatValuta=f.formatValuta,exports.getThemeAndSize=g.getThemeAndSize,exports.mergeRefs=p.mergeRefs,exports.useMergeRefs=x.useMergeRefs,exports.mergeProps=c.mergeProps,exports.SlotComponent=E.SlotComponent,exports.initTabListener=j.initTabListener,exports.isValidEpost=M.isValidEpost,exports.isValidTelefonnummer=h.isValidTelefonnummer,exports.isValidRegistreringsnummer=V.isValidRegistreringsnummer,exports.isValidChassisnummer=R.isValidChassisnummer,exports.isValidDogId=q.isValidDogId,exports.isExactLength=N.isExactLength,exports.isInteger=O.isInteger,exports.isValidFodselsnummer=T.isValidFodselsnummer,exports.isValidOrganisasjonsnummer=v.isValidOrganisasjonsnummer,exports.isValidName=S.isValidName,exports.hasMinimumWords=W.hasMinimumWords,exports.hasNoIllegalCharacters=k.hasNoIllegalCharacters,exports.getValuePair=I.getValuePair;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -2,6 +2,7 @@ export * from './constants/index.cjs';
|
|
|
2
2
|
export * from './formatters/index.cjs';
|
|
3
3
|
export * from './getThemeAndSize.cjs';
|
|
4
4
|
export * from './mergeRefs.cjs';
|
|
5
|
+
export { useMergeRefs } from '../hooks/useMergeRefs/useMergeRefs.cjs';
|
|
5
6
|
export * from './polymorphism/index.cjs';
|
|
6
7
|
export * from './tabListener.cjs';
|
|
7
8
|
export * from './validators/index.cjs';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.mergeRefs=function(...e){return function(t){for(const o of e)o&&("function"==typeof o?o(t):o&&(o.current=t))}};
|
|
2
2
|
//# sourceMappingURL=mergeRefs.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeRefs.cjs","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"mergeRefs.cjs","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import type { ForwardedRef, MutableRefObject, RefCallback } from \"react\";\n\n/**\n * Slår sammen flere refs til én, for eksempel hvis du har både en\n * egen ref i en komponent og også vil kunne ta inn en forwardRef\n * fra brukeren av komponenten.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example\n * const ref = useRef<HTMLElement>(null);\n * const combinedRef = mergeRefs(ref, forwardedRef, anotherRef);\n *\n * return <div ref={combinedRef} {...props} />;\n */\nexport function mergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n return function combinedRef(instance: T | null) {\n for (const ref of refs) {\n if (!ref) continue;\n\n if (typeof ref === \"function\") {\n ref(instance);\n } else if (ref) {\n ref.current = instance;\n }\n }\n };\n}\n"],"names":["refs","instance","ref","current"],"mappings":"kGAcO,YACAA,GAEH,OAAO,SAAqBC,GACxB,IAAA,MAAWC,KAAOF,EACTE,IAEc,mBAARA,EACPA,EAAID,GACGC,IACPA,EAAIC,QAAUF,GAG1B,CACJ"}
|
|
@@ -12,11 +12,3 @@ import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
|
12
12
|
* return <div ref={combinedRef} {...props} />;
|
|
13
13
|
*/
|
|
14
14
|
export declare function mergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
15
|
-
/**
|
|
16
|
-
* Gjør det samme som {@link mergeRefs}, men wrappet i en `useMemo`, hvis du
|
|
17
|
-
* vil unngå å lage en ny funksjon ved hver render. Som regel ikke nødvendig.
|
|
18
|
-
* @param refs Liste over refs du vil slå sammen
|
|
19
|
-
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
20
|
-
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
21
|
-
*/
|
|
22
|
-
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|