@fremtind/jokul 0.30.8 → 0.31.1

package/build/cjs/components/autosuggest/Autosuggest.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),n=require("./BaseAutosuggest.cjs"),s=require("./utils.cjs");exports.Autosuggest=({allItems:u,onChange:r=(()=>{}),onConfirm:o=(()=>{}),onInputValueChange:i,onStateChange:a,value:l,isOpen:c,...g})=>{const[m,p]=t.useState(u);t.useEffect((()=>p(u)),[u]);return e.jsx(n,{...g,items:m,itemToString:e=>e||"",onConfirm:o,downshiftProps:{selectedItem:l,onInputValueChange:i,onStateChange:e=>{a&&a(e),void 0!==e.selectedItem?r(e.selectedItem||""):e.inputValue&&p(s.filter(u,e.inputValue))},isOpen:c}})};
+//# sourceMappingURL=Autosuggest.cjs.map

package/build/cjs/components/autosuggest/Autosuggest.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autosuggest.cjs","sources":["../../../../src/components/autosuggest/Autosuggest.tsx"],"sourcesContent":["import type { StateChangeOptions } from \"downshift\";\nimport React, { type ReactNode, useEffect, useState } from \"react\";\nimport type { Density } from \"../../core/types.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport type { SupportLabelProps } from \"../input-group/SupportLabel.js\";\nimport type { PopupTipProps } from \"../tooltip/PopupTip.js\";\nimport BaseAutosuggest from \"./BaseAutosuggest.js\";\nimport { filter } from \"./utils.js\";\n\nexport type CommonProps = (\n    | {\n          label: string;\n          labelProps?: Omit<\n              LabelProps,\n              \"children\" | \"density\" | \"htmlFor\" | \"standAlone\"\n          >;\n          inputId?: null;\n          labelId?: null;\n      }\n    | {\n          label?: null;\n          labelProps?: null;\n          inputId: string;\n          labelId: string;\n      }\n) & {\n    className?: string;\n    isOpen?: boolean;\n    /** @deprecated Bruk helpLabel eller flytt denne teksten ovenfor skjemafeltets label */\n    leadText?: string;\n    errorLabel?: string;\n    helpLabel?: string;\n    supportLabelProps?: Omit<\n        SupportLabelProps,\n        \"id\" | \"errorLabel\" | \"helpLabel\" | \"density\"\n    >;\n    tooltipProps?: PopupTipProps;\n    variant?: \"large\" | \"medium\" | \"small\";\n    density?: Density;\n    placeholder?: string;\n    /** @deprecated Bruk noHits med text og evt. defaultverdier for items */\n    noHitsMessage?: ReactNode;\n    maxNumberOfHits?: number;\n    showDropdownControllerButton?: boolean;\n    onInputValueChange?: (inputValue: string) => void;\n    noHits?: { items: string[]; text: ReactNode };\n};\n\nexport interface AutosuggestStringItemProps {\n    allItems: string[];\n    value: string;\n    onChange?: (item: string) => void;\n    onStateChange?: (changes: StateChangeOptions<string>) => void;\n    onConfirm?: () => void;\n}\n\nexport type AutosuggestProps = CommonProps & AutosuggestStringItemProps;\n\nexport const Autosuggest = ({\n    allItems,\n    onChange = () => {\n        /* default noop */\n    },\n    onConfirm = () => {\n        /* noop */\n    },\n    onInputValueChange,\n    onStateChange,\n    value,\n    isOpen,\n    ...rest\n}: AutosuggestProps): JSX.Element => {\n    const [hits, setHits] = useState(allItems);\n\n    useEffect(() => setHits(allItems), [allItems]);\n\n    const handleStateChange = (changes: StateChangeOptions<string>) => {\n        if (onStateChange) {\n            onStateChange(changes);\n        }\n\n        if (changes.selectedItem !== undefined) {\n            onChange(changes.selectedItem || \"\");\n        } else if (changes.inputValue) {\n            setHits(filter(allItems, changes.inputValue));\n        }\n    };\n\n    const itemToString = (item: string | null) => (item ? item : \"\");\n\n    return (\n        <BaseAutosuggest\n            {...rest}\n            items={hits}\n            itemToString={itemToString}\n            onConfirm={onConfirm}\n            downshiftProps={{\n                selectedItem: value,\n                onInputValueChange,\n                onStateChange: handleStateChange,\n                isOpen,\n            }}\n        />\n    );\n};\n"],"names":["allItems","onChange","onConfirm","onInputValueChange","onStateChange","value","isOpen","rest","hits","setHits","useState","useEffect","jsx","BaseAutosuggest","items","itemToString","item","downshiftProps","selectedItem","changes","inputValue","filter"],"mappings":"wNA0D2B,EACvBA,SAAAA,EACAC,SAAAA,EAAW,SAGXC,UAAAA,EAAY,SAGZC,mBAAAA,EACAC,cAAAA,EACAC,MAAAA,EACAC,OAAAA,KACGC,MAEH,MAAOC,EAAMC,GAAWC,WAASV,GAEjCW,EAAAA,WAAU,IAAMF,EAAQT,IAAW,CAACA,IAiBhC,OAAAY,EAAAA,IAACC,EAAA,IACON,EACJO,MAAON,EACPO,aANcC,GAAyBA,GAAc,GAOrDd,UAAAA,EACAe,eAAgB,CACZC,aAAcb,EACdF,mBAAAA,EACAC,cAvBee,IACnBf,GACAA,EAAce,QAGW,IAAzBA,EAAQD,aACCjB,EAAAkB,EAAQD,cAAgB,IAC1BC,EAAQC,YACfX,EAAQY,EAAAA,OAAOrB,EAAUmB,EAAQC,YAAW,EAgBxCd,OAAAA,IACJ"}

package/build/cjs/components/autosuggest/Autosuggest.d.cts

@@ -0,0 +1,47 @@
+import { StateChangeOptions } from 'downshift';
+import { ReactNode } from 'react';
+import { Density } from '../../core/types.cjs';
+import { LabelProps } from '../input-group/Label.cjs';
+import { SupportLabelProps } from '../input-group/SupportLabel.cjs';
+import { PopupTipProps } from '../tooltip/PopupTip.cjs';
+export type CommonProps = ({
+    label: string;
+    labelProps?: Omit<LabelProps, "children" | "density" | "htmlFor" | "standAlone">;
+    inputId?: null;
+    labelId?: null;
+} | {
+    label?: null;
+    labelProps?: null;
+    inputId: string;
+    labelId: string;
+}) & {
+    className?: string;
+    isOpen?: boolean;
+    /** @deprecated Bruk helpLabel eller flytt denne teksten ovenfor skjemafeltets label */
+    leadText?: string;
+    errorLabel?: string;
+    helpLabel?: string;
+    supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel" | "density">;
+    tooltipProps?: PopupTipProps;
+    variant?: "large" | "medium" | "small";
+    density?: Density;
+    placeholder?: string;
+    /** @deprecated Bruk noHits med text og evt. defaultverdier for items */
+    noHitsMessage?: ReactNode;
+    maxNumberOfHits?: number;
+    showDropdownControllerButton?: boolean;
+    onInputValueChange?: (inputValue: string) => void;
+    noHits?: {
+        items: string[];
+        text: ReactNode;
+    };
+};
+export interface AutosuggestStringItemProps {
+    allItems: string[];
+    value: string;
+    onChange?: (item: string) => void;
+    onStateChange?: (changes: StateChangeOptions<string>) => void;
+    onConfirm?: () => void;
+}
+export type AutosuggestProps = CommonProps & AutosuggestStringItemProps;
+export declare const Autosuggest: ({ allItems, onChange, onConfirm, onInputValueChange, onStateChange, value, isOpen, ...rest }: AutosuggestProps) => JSX.Element;

package/build/cjs/components/autosuggest/BaseAutosuggest.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),t=require("classnames"),s=require("downshift"),r=require("../../hooks/useId/useId.cjs"),o=require("../input-group/InputGroup.cjs"),l=require("./ControllerButton.cjs"),i=require("./Menu.cjs");module.exports=function({className:n="",label:a,labelProps:p,tooltipProps:u,supportLabelProps:d,inputId:c,labelId:g,leadText:m,errorLabel:j,helpLabel:h,density:x,variant:b="small",noHitsMessage:I,maxNumberOfHits:P,placeholder:f,itemToString:k,items:S,downshiftProps:q,showDropdownControllerButton:w=!1,onConfirm:L=(()=>{}),noHits:N}){const H=r.useId(c||"jkl-text-input",{generateSuffix:!c}),y=r.useId(g||"jkl-label",{generateSuffix:!g}),M={inputId:H,labelId:y};return e.jsx(s,{...q,...M,itemToString:k,children:({getInputProps:s,getToggleButtonProps:r,getItemProps:c,getLabelProps:g,getMenuProps:q,getRootProps:H,selectedItem:M,isOpen:T,highlightedIndex:v,clearSelection:C})=>e.jsx(o.InputGroup,{...H(),label:a,className:t("jkl-autosuggest",n),density:x,labelProps:{variant:b,...p,...g({id:y})},supportLabelProps:d,tooltipProps:u,errorLabel:j,helpLabel:h,render:o=>e.jsxs(e.Fragment,{children:[m&&e.jsx("p",{className:t("jkl-spacing-l--bottom",{"jkl-body":"compact"!==x,"jkl-small":"compact"===x}),children:m}),e.jsxs("div",{className:"jkl-text-input-wrapper","data-invalid":!!j,children:[e.jsx("input",{...o,...s({id:o.id,placeholder:f,className:"jkl-text-input__input",onKeyDown:e=>{13===e.keyCode&&!T&&L()}}),"data-testid":"autosuggest__input"}),w&&e.jsx(l,{...r(),hasSelectedItem:!!M,clearSelection:C}),T&&e.jsx(i,{downshiftProps:{getMenuProps:q,getItemProps:c},highlightedIndex:v,items:S,itemToString:k,noHitsMessage:I,maxNumberOfHits:P,noHits:N})]})]})})})};
+//# sourceMappingURL=BaseAutosuggest.cjs.map

package/build/cjs/components/autosuggest/BaseAutosuggest.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAutosuggest.cjs","sources":["../../../../src/components/autosuggest/BaseAutosuggest.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport {\n    Callback,\n    default as Downshift,\n    type DownshiftProps,\n    PropGetters,\n} from \"downshift\";\nimport React, { type ReactNode } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { type CommonProps } from \"./Autosuggest.js\";\nimport ControllerButton from \"./ControllerButton.js\";\nimport Menu from \"./Menu.js\";\n\nconst KEY_ENTER = 13;\n\ntype BaseAutosuggestProps<T> = CommonProps & {\n    itemToString: (item: T | null) => string;\n    items: T[];\n    downshiftProps: DownshiftProps<T>;\n    showDropdownControllerButton?: boolean;\n    onConfirm?: () => void;\n    noHits?: { text: ReactNode; items: T[] };\n};\ninterface Props extends PropGetters<any>, DownshiftProps<any> {\n    clearSelection: (cb?: Callback) => void;\n}\n\nfunction BaseAutosuggest<T>({\n    className = \"\",\n    label,\n    labelProps,\n    tooltipProps,\n    supportLabelProps,\n    inputId,\n    labelId,\n    leadText,\n    errorLabel,\n    helpLabel,\n    density,\n    variant = \"small\",\n    noHitsMessage,\n    maxNumberOfHits,\n    placeholder,\n    itemToString,\n    items,\n    downshiftProps,\n    showDropdownControllerButton = false,\n    onConfirm = () => {\n        /* noop */\n    },\n    noHits,\n}: BaseAutosuggestProps<T>): JSX.Element {\n    const uid = useId(inputId || \"jkl-text-input\", {\n        generateSuffix: !inputId,\n    });\n    const lid = useId(labelId || \"jkl-label\", { generateSuffix: !labelId });\n\n    const customLabelProps = {\n        inputId: uid,\n        labelId: lid,\n    };\n\n    return (\n        /* @ts-ignore-next-line det er noe rart og ancient med downshift */\n        <Downshift\n            {...downshiftProps}\n            {...customLabelProps}\n            itemToString={itemToString}\n        >\n            {({\n                getInputProps,\n                getToggleButtonProps,\n                getItemProps,\n                getLabelProps,\n                getMenuProps,\n                getRootProps,\n                selectedItem,\n                isOpen,\n                highlightedIndex,\n                clearSelection,\n            }: Props) => {\n                return (\n                    <InputGroup\n                        {...getRootProps()}\n                        label={label}\n                        className={cn(\"jkl-autosuggest\", className)}\n                        density={density}\n                        labelProps={{\n                            variant,\n                            ...labelProps,\n                            ...getLabelProps({\n                                id: lid,\n                            }),\n                        }}\n                        supportLabelProps={supportLabelProps}\n                        tooltipProps={tooltipProps}\n                        errorLabel={errorLabel}\n                        helpLabel={helpLabel}\n                        render={(inputProps) => (\n                            <>\n                                {leadText && (\n                                    <p\n                                        className={cn(\"jkl-spacing-l--bottom\", {\n                                            \"jkl-body\": density !== \"compact\",\n                                            \"jkl-small\": density === \"compact\",\n                                        })}\n                                    >\n                                        {leadText}\n                                    </p>\n                                )}\n                                <div\n                                    className=\"jkl-text-input-wrapper\"\n                                    data-invalid={!!errorLabel}\n                                >\n                                    <input\n                                        {...inputProps}\n                                        {...getInputProps({\n                                            id: inputProps.id,\n                                            placeholder,\n                                            className: \"jkl-text-input__input\",\n                                            onKeyDown: (e) => {\n                                                if (\n                                                    e.keyCode === KEY_ENTER &&\n                                                    !isOpen\n                                                ) {\n                                                    onConfirm();\n                                                }\n                                            },\n                                        })}\n                                        data-testid=\"autosuggest__input\"\n                                    />\n                                    {showDropdownControllerButton && (\n                                        <ControllerButton\n                                            {...getToggleButtonProps()}\n                                            hasSelectedItem={!!selectedItem}\n                                            clearSelection={clearSelection}\n                                        />\n                                    )}\n                                    {isOpen && (\n                                        <Menu\n                                            downshiftProps={{\n                                                getMenuProps,\n                                                getItemProps,\n                                            }}\n                                            highlightedIndex={highlightedIndex}\n                                            items={items}\n                                            itemToString={itemToString}\n                                            noHitsMessage={noHitsMessage}\n                                            maxNumberOfHits={maxNumberOfHits}\n                                            noHits={noHits}\n                                        />\n                                    )}\n                                </div>\n                            </>\n                        )}\n                    />\n                );\n            }}\n        </Downshift>\n    );\n}\n\nexport default BaseAutosuggest;\n"],"names":["className","label","labelProps","tooltipProps","supportLabelProps","inputId","labelId","leadText","errorLabel","helpLabel","density","variant","noHitsMessage","maxNumberOfHits","placeholder","itemToString","items","downshiftProps","showDropdownControllerButton","onConfirm","noHits","uid","useId","generateSuffix","lid","customLabelProps","jsx","Downshift","children","getInputProps","getToggleButtonProps","getItemProps","getLabelProps","getMenuProps","getRootProps","selectedItem","isOpen","highlightedIndex","clearSelection","InputGroup","cn","id","render","inputProps","jsxs","Fragment","onKeyDown","e","keyCode","ControllerButton","hasSelectedItem","Menu"],"mappings":"gQA4BA,UACIA,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EAAU,QACVC,cAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,eAAAA,EACAC,6BAAAA,GAA+B,EAC/BC,UAAAA,EAAY,SAGZC,OAAAA,IAEM,MAAAC,EAAMC,EAAAA,MAAMjB,GAAW,iBAAkB,CAC3CkB,gBAAiBlB,IAEfmB,EAAMF,QAAMhB,GAAW,YAAa,CAAEiB,gBAAiBjB,IAEvDmB,EAAmB,CACrBpB,QAASgB,EACTf,QAASkB,GAGb,OAEIE,EAAAA,IAACC,EAAA,IACOV,KACAQ,EACJV,aAAAA,EAECa,SAAC,EACEC,cAAAA,EACAC,qBAAAA,EACAC,aAAAA,EACAC,cAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,iBAAAA,EACAC,eAAAA,KAGIZ,EAAAA,IAACa,EAAAA,WAAA,IACOL,IACJjC,MAAAA,EACAD,UAAWwC,EAAG,kBAAmBxC,GACjCU,QAAAA,EACAR,WAAY,CACRS,QAAAA,KACGT,KACA8B,EAAc,CACbS,GAAIjB,KAGZpB,kBAAAA,EACAD,aAAAA,EACAK,WAAAA,EACAC,UAAAA,EACAiC,OAASC,GAEAC,EAAAA,KAAAC,EAAAA,SAAA,CAAAjB,SAAA,CACGrB,GAAAmB,EAAAA,IAAC,IAAA,CACG1B,UAAWwC,EAAG,wBAAyB,CACnC,WAAwB,YAAZ9B,EACZ,YAAyB,YAAZA,IAGhBkB,SAAArB,IAGTqC,EAAAA,KAAC,MAAA,CACG5C,UAAU,yBACV,iBAAgBQ,EAEhBoB,SAAA,CAAAF,EAAAA,IAAC,QAAA,IACOiB,KACAd,EAAc,CACdY,GAAIE,EAAWF,GACf3B,YAAAA,EACAd,UAAW,wBACX8C,UAAYC,IA3GtC,KA6GkCA,EAAEC,UACDZ,GAESjB,OAItB,cAAY,uBAEfD,GACGQ,EAAAA,IAACuB,EAAA,IACOnB,IACJoB,kBAAmBf,EACnBG,eAAAA,IAGPF,GACGV,EAAAA,IAACyB,EAAA,CACGlC,eAAgB,CACZgB,aAAAA,EACAF,aAAAA,GAEJM,iBAAAA,EACArB,MAAAA,EACAD,aAAAA,EACAH,cAAAA,EACAC,gBAAAA,EACAO,OAAAA,aAW5C"}

package/build/cjs/components/autosuggest/BaseAutosuggest.d.cts

@@ -0,0 +1,16 @@
+import { DownshiftProps } from 'downshift';
+import { ReactNode } from 'react';
+import { CommonProps } from './Autosuggest.cjs';
+type BaseAutosuggestProps<T> = CommonProps & {
+    itemToString: (item: T | null) => string;
+    items: T[];
+    downshiftProps: DownshiftProps<T>;
+    showDropdownControllerButton?: boolean;
+    onConfirm?: () => void;
+    noHits?: {
+        text: ReactNode;
+        items: T[];
+    };
+};
+declare function BaseAutosuggest<T>({ className, label, labelProps, tooltipProps, supportLabelProps, inputId, labelId, leadText, errorLabel, helpLabel, density, variant, noHitsMessage, maxNumberOfHits, placeholder, itemToString, items, downshiftProps, showDropdownControllerButton, onConfirm, noHits, }: BaseAutosuggestProps<T>): JSX.Element;
+export default BaseAutosuggest;

package/build/cjs/components/autosuggest/ControllerButton.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),c=require("../icon/icons/CloseIcon.cjs"),n=require("../icon/icons/SearchIcon.cjs"),o=require("../icon-button/IconButton.cjs");module.exports=({hasSelectedItem:t,clearSelection:i,onClick:s,...r})=>e.jsx(o.IconButton,{...r,className:"jkl-text-input-action-button","aria-label":t?"Fjern valg":"Vis valg",title:t?"Fjern valg":"Vis valg",onClick:t?i:s,children:t?e.jsx(c.CloseIcon,{}):e.jsx(n.SearchIcon,{})});
+//# sourceMappingURL=ControllerButton.cjs.map

package/build/cjs/components/autosuggest/ControllerButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControllerButton.cjs","sources":["../../../../src/components/autosuggest/ControllerButton.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { SearchIcon } from \"../icon/icons/SearchIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\ninterface Props {\n    clearSelection: () => void;\n    hasSelectedItem: boolean;\n    onClick: () => void;\n}\n\nconst ControllerButton: FC<Props> = ({\n    hasSelectedItem,\n    clearSelection,\n    onClick,\n    ...downshiftProps\n}) => (\n    <IconButton\n        {...downshiftProps}\n        className=\"jkl-text-input-action-button\"\n        aria-label={hasSelectedItem ? \"Fjern valg\" : \"Vis valg\"}\n        title={hasSelectedItem ? \"Fjern valg\" : \"Vis valg\"}\n        onClick={hasSelectedItem ? clearSelection : onClick}\n    >\n        {hasSelectedItem ? <CloseIcon /> : <SearchIcon />}\n    </IconButton>\n);\n\nexport default ControllerButton;\n"],"names":["hasSelectedItem","clearSelection","onClick","downshiftProps","jsx","IconButton","className","title","children","CloseIcon","SearchIcon"],"mappings":"+LAWoC,EAChCA,gBAAAA,EACAC,eAAAA,EACAC,QAAAA,KACGC,KAEHC,EAAAA,IAACC,EAAAA,WAAA,IACOF,EACJG,UAAU,+BACV,aAAYN,EAAkB,aAAe,WAC7CO,MAAOP,EAAkB,aAAe,WACxCE,QAASF,EAAkBC,EAAiBC,EAE3CM,SAAkBR,EAAAI,EAAAA,IAACK,EAAUA,UAAA,CAAA,SAAMC,EAAWA,WAAA"}

package/build/cjs/components/autosuggest/ControllerButton.d.cts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface Props {
+    clearSelection: () => void;
+    hasSelectedItem: boolean;
+    onClick: () => void;
+}
+declare const ControllerButton: FC<Props>;
+export default ControllerButton;

package/build/cjs/components/autosuggest/Menu.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),t=require("react"),s=require("classnames");module.exports=function({downshiftProps:{getMenuProps:i,getItemProps:a},highlightedIndex:l,items:u,itemToString:n,noHitsMessage:g,maxNumberOfHits:r=1/0,noHits:m}){const o=u.length>r?u.slice(0,r):u;if(0===o.length&&!g&&!m)return null;const c=0===o.length&&m?m.items:o;return e.jsxs("div",{"data-testid":"autosuggest__menu",className:"jkl-autosuggest__menu",children:[(g||m)&&0===o.length&&e.jsx("div",{className:"jkl-autosuggest__no-hits-message","aria-live":"polite",children:g||(null==m?void 0:m.text)}),c.length>0&&e.jsx("ul",{...i({className:"jkl-autosuggest__item-list"}),children:c.map(((e,i)=>t.createElement("li",{...a({item:e,className:s("jkl-autosuggest__item",{"jkl-autosuggest__item--active":i===l})}),"data-testid":"autosuggest__item",key:n(e)},n(e))))})]})};
+//# sourceMappingURL=Menu.cjs.map

package/build/cjs/components/autosuggest/Menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.cjs","sources":["../../../../src/components/autosuggest/Menu.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { PropGetters } from \"downshift\";\nimport React, { ReactNode } from \"react\";\n\ninterface MenuProps<T> {\n    downshiftProps: Pick<PropGetters<T>, \"getMenuProps\" | \"getItemProps\">;\n    highlightedIndex: number | undefined | null;\n    items: T[];\n    itemToString: (item: T | null) => string;\n    noHitsMessage?: ReactNode;\n    maxNumberOfHits?: number;\n    noHits?: { items: T[]; text: ReactNode };\n}\n\nfunction Menu<T>({\n    downshiftProps: { getMenuProps, getItemProps },\n    highlightedIndex,\n    items,\n    itemToString,\n    noHitsMessage,\n    maxNumberOfHits = Infinity,\n    noHits,\n}: MenuProps<T>): JSX.Element | null {\n    const visibleItems =\n        items.length > maxNumberOfHits\n            ? items.slice(0, maxNumberOfHits)\n            : items;\n\n    if (visibleItems.length === 0 && !noHitsMessage && !noHits) {\n        return null;\n    }\n\n    const itemList =\n        visibleItems.length === 0 && noHits ? noHits.items : visibleItems;\n\n    return (\n        <div data-testid=\"autosuggest__menu\" className=\"jkl-autosuggest__menu\">\n            {(noHitsMessage || noHits) && visibleItems.length === 0 && (\n                <div\n                    className=\"jkl-autosuggest__no-hits-message\"\n                    aria-live=\"polite\"\n                >\n                    {noHitsMessage || noHits?.text}\n                </div>\n            )}\n\n            {itemList.length > 0 && (\n                <ul\n                    {...getMenuProps({\n                        className: \"jkl-autosuggest__item-list\",\n                    })}\n                >\n                    {itemList.map((item, index) => (\n                        <li\n                            {...getItemProps({\n                                item,\n                                className: cn(\"jkl-autosuggest__item\", {\n                                    \"jkl-autosuggest__item--active\":\n                                        index === highlightedIndex,\n                                }),\n                            })}\n                            data-testid=\"autosuggest__item\"\n                            key={itemToString(item)}\n                        >\n                            {itemToString(item)}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n\nexport default Menu;\n"],"names":["downshiftProps","getMenuProps","getItemProps","highlightedIndex","items","itemToString","noHitsMessage","maxNumberOfHits","noHits","visibleItems","length","slice","itemList","jsxs","className","children","jsx","text","map","item","index","createElement","cn","key"],"mappings":"4GAcA,UACIA,gBAAkBC,aAAAA,EAAcC,aAAAA,GAChCC,iBAAAA,EACAC,MAAAA,EACAC,aAAAA,EACAC,cAAAA,EACAC,gBAAAA,EAAkB,IAClBC,OAAAA,IAEM,MAAAC,EACFL,EAAMM,OAASH,EACTH,EAAMO,MAAM,EAAGJ,GACfH,EAEV,GAA4B,IAAxBK,EAAaC,SAAiBJ,IAAkBE,EACzC,OAAA,KAGX,MAAMI,EACsB,IAAxBH,EAAaC,QAAgBF,EAASA,EAAOJ,MAAQK,EAEzD,OACKI,EAAAA,KAAA,MAAA,CAAI,cAAY,oBAAoBC,UAAU,wBACzCC,SAAA,EAAiBT,GAAAE,IAAmC,IAAxBC,EAAaC,QACvCM,EAAAA,IAAC,MAAA,CACGF,UAAU,mCACV,YAAU,SAETC,aAAiB,MAAAP,OAAAA,EAAAA,EAAQS,QAIjCL,EAASF,OAAS,GACfM,EAAAA,IAAC,KAAA,IACOf,EAAa,CACba,UAAW,+BAGdC,SAASH,EAAAM,KAAI,CAACC,EAAMC,IACjBC,EAAAA,cAAC,KAAA,IACOnB,EAAa,CACbiB,KAAAA,EACAL,UAAWQ,EAAG,wBAAyB,CACnC,gCACIF,IAAUjB,MAGtB,cAAY,oBACZoB,IAAKlB,EAAac,IAEjBd,EAAac,UAO1C"}

package/build/cjs/components/autosuggest/Menu.d.cts

@@ -0,0 +1,16 @@
+import { PropGetters } from 'downshift';
+import { ReactNode } from 'react';
+interface MenuProps<T> {
+    downshiftProps: Pick<PropGetters<T>, "getMenuProps" | "getItemProps">;
+    highlightedIndex: number | undefined | null;
+    items: T[];
+    itemToString: (item: T | null) => string;
+    noHitsMessage?: ReactNode;
+    maxNumberOfHits?: number;
+    noHits?: {
+        items: T[];
+        text: ReactNode;
+    };
+}
+declare function Menu<T>({ downshiftProps: { getMenuProps, getItemProps }, highlightedIndex, items, itemToString, noHitsMessage, maxNumberOfHits, noHits, }: MenuProps<T>): JSX.Element | null;
+export default Menu;

package/build/cjs/components/autosuggest/index.cjs

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

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

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

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

@@ -0,0 +1,2 @@
+export type { AutosuggestProps } from './Autosuggest.cjs';
+export { Autosuggest } from './Autosuggest.cjs';

package/build/cjs/components/autosuggest/utils.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("match-sorter");exports.filter=function(e,r,o){const s=o?{keys:o}:{};return r?t.matchSorter(e,r,s):e};
+//# sourceMappingURL=utils.cjs.map

package/build/cjs/components/autosuggest/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../../../src/components/autosuggest/utils.ts"],"sourcesContent":["import { matchSorter } from \"match-sorter\";\n\nexport function filter<T>(\n    allItems: T[],\n    inputValue: string | null,\n    keys?: string[],\n): T[] {\n    const options = keys ? { keys } : {};\n    if (!inputValue) {\n        return allItems;\n    }\n    return matchSorter(allItems, inputValue, options);\n}\n"],"names":["allItems","inputValue","keys","options","matchSorter"],"mappings":"+HAEgB,SACZA,EACAC,EACAC,GAEA,MAAMC,EAAUD,EAAO,CAAEA,KAAAA,GAAS,CAAA,EAClC,OAAKD,EAGEG,cAAYJ,EAAUC,EAAYE,GAF9BH,CAGf"}

package/build/cjs/components/autosuggest/utils.d.cts

@@ -0,0 +1 @@
+export declare function filter<T>(allItems: T[], inputValue: string | null, keys?: string[]): T[];

package/build/es/components/autosuggest/Autosuggest.d.ts

@@ -0,0 +1,47 @@
+import { StateChangeOptions } from 'downshift';
+import { ReactNode } from 'react';
+import { Density } from '../../core/types.js';
+import { LabelProps } from '../input-group/Label.js';
+import { SupportLabelProps } from '../input-group/SupportLabel.js';
+import { PopupTipProps } from '../tooltip/PopupTip.js';
+export type CommonProps = ({
+    label: string;
+    labelProps?: Omit<LabelProps, "children" | "density" | "htmlFor" | "standAlone">;
+    inputId?: null;
+    labelId?: null;
+} | {
+    label?: null;
+    labelProps?: null;
+    inputId: string;
+    labelId: string;
+}) & {
+    className?: string;
+    isOpen?: boolean;
+    /** @deprecated Bruk helpLabel eller flytt denne teksten ovenfor skjemafeltets label */
+    leadText?: string;
+    errorLabel?: string;
+    helpLabel?: string;
+    supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel" | "density">;
+    tooltipProps?: PopupTipProps;
+    variant?: "large" | "medium" | "small";
+    density?: Density;
+    placeholder?: string;
+    /** @deprecated Bruk noHits med text og evt. defaultverdier for items */
+    noHitsMessage?: ReactNode;
+    maxNumberOfHits?: number;
+    showDropdownControllerButton?: boolean;
+    onInputValueChange?: (inputValue: string) => void;
+    noHits?: {
+        items: string[];
+        text: ReactNode;
+    };
+};
+export interface AutosuggestStringItemProps {
+    allItems: string[];
+    value: string;
+    onChange?: (item: string) => void;
+    onStateChange?: (changes: StateChangeOptions<string>) => void;
+    onConfirm?: () => void;
+}
+export type AutosuggestProps = CommonProps & AutosuggestStringItemProps;
+export declare const Autosuggest: ({ allItems, onChange, onConfirm, onInputValueChange, onStateChange, value, isOpen, ...rest }: AutosuggestProps) => JSX.Element;

package/build/es/components/autosuggest/Autosuggest.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{useState as t,useEffect as s}from"react";import n from"./BaseAutosuggest.js";import{filter as o}from"./utils.js";const a=({allItems:a,onChange:r=(()=>{}),onConfirm:i=(()=>{}),onInputValueChange:u,onStateChange:m,value:l,isOpen:p,...f})=>{const[g,c]=t(a);return s((()=>c(a)),[a]),e(n,{...f,items:g,itemToString:e=>e||"",onConfirm:i,downshiftProps:{selectedItem:l,onInputValueChange:u,onStateChange:e=>{m&&m(e),void 0!==e.selectedItem?r(e.selectedItem||""):e.inputValue&&c(o(a,e.inputValue))},isOpen:p}})};export{a as Autosuggest};
+//# sourceMappingURL=Autosuggest.js.map

package/build/es/components/autosuggest/Autosuggest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autosuggest.js","sources":["../../../../src/components/autosuggest/Autosuggest.tsx"],"sourcesContent":["import type { StateChangeOptions } from \"downshift\";\nimport React, { type ReactNode, useEffect, useState } from \"react\";\nimport type { Density } from \"../../core/types.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport type { SupportLabelProps } from \"../input-group/SupportLabel.js\";\nimport type { PopupTipProps } from \"../tooltip/PopupTip.js\";\nimport BaseAutosuggest from \"./BaseAutosuggest.js\";\nimport { filter } from \"./utils.js\";\n\nexport type CommonProps = (\n    | {\n          label: string;\n          labelProps?: Omit<\n              LabelProps,\n              \"children\" | \"density\" | \"htmlFor\" | \"standAlone\"\n          >;\n          inputId?: null;\n          labelId?: null;\n      }\n    | {\n          label?: null;\n          labelProps?: null;\n          inputId: string;\n          labelId: string;\n      }\n) & {\n    className?: string;\n    isOpen?: boolean;\n    /** @deprecated Bruk helpLabel eller flytt denne teksten ovenfor skjemafeltets label */\n    leadText?: string;\n    errorLabel?: string;\n    helpLabel?: string;\n    supportLabelProps?: Omit<\n        SupportLabelProps,\n        \"id\" | \"errorLabel\" | \"helpLabel\" | \"density\"\n    >;\n    tooltipProps?: PopupTipProps;\n    variant?: \"large\" | \"medium\" | \"small\";\n    density?: Density;\n    placeholder?: string;\n    /** @deprecated Bruk noHits med text og evt. defaultverdier for items */\n    noHitsMessage?: ReactNode;\n    maxNumberOfHits?: number;\n    showDropdownControllerButton?: boolean;\n    onInputValueChange?: (inputValue: string) => void;\n    noHits?: { items: string[]; text: ReactNode };\n};\n\nexport interface AutosuggestStringItemProps {\n    allItems: string[];\n    value: string;\n    onChange?: (item: string) => void;\n    onStateChange?: (changes: StateChangeOptions<string>) => void;\n    onConfirm?: () => void;\n}\n\nexport type AutosuggestProps = CommonProps & AutosuggestStringItemProps;\n\nexport const Autosuggest = ({\n    allItems,\n    onChange = () => {\n        /* default noop */\n    },\n    onConfirm = () => {\n        /* noop */\n    },\n    onInputValueChange,\n    onStateChange,\n    value,\n    isOpen,\n    ...rest\n}: AutosuggestProps): JSX.Element => {\n    const [hits, setHits] = useState(allItems);\n\n    useEffect(() => setHits(allItems), [allItems]);\n\n    const handleStateChange = (changes: StateChangeOptions<string>) => {\n        if (onStateChange) {\n            onStateChange(changes);\n        }\n\n        if (changes.selectedItem !== undefined) {\n            onChange(changes.selectedItem || \"\");\n        } else if (changes.inputValue) {\n            setHits(filter(allItems, changes.inputValue));\n        }\n    };\n\n    const itemToString = (item: string | null) => (item ? item : \"\");\n\n    return (\n        <BaseAutosuggest\n            {...rest}\n            items={hits}\n            itemToString={itemToString}\n            onConfirm={onConfirm}\n            downshiftProps={{\n                selectedItem: value,\n                onInputValueChange,\n                onStateChange: handleStateChange,\n                isOpen,\n            }}\n        />\n    );\n};\n"],"names":["Autosuggest","allItems","onChange","onConfirm","onInputValueChange","onStateChange","value","isOpen","rest","hits","setHits","useState","useEffect","jsx","BaseAutosuggest","items","itemToString","item","downshiftProps","selectedItem","changes","inputValue","filter"],"mappings":"gKA0DO,MAAMA,EAAc,EACvBC,SAAAA,EACAC,SAAAA,EAAW,SAGXC,UAAAA,EAAY,SAGZC,mBAAAA,EACAC,cAAAA,EACAC,MAAAA,EACAC,OAAAA,KACGC,MAEH,MAAOC,EAAMC,GAAWC,EAASV,GAEjCW,OAAAA,GAAU,IAAMF,EAAQT,IAAW,CAACA,IAiBhCY,EAACC,EAAA,IACON,EACJO,MAAON,EACPO,aANcC,GAAyBA,GAAc,GAOrDd,UAAAA,EACAe,eAAgB,CACZC,aAAcb,EACdF,mBAAAA,EACAC,cAvBee,IACnBf,GACAA,EAAce,QAGW,IAAzBA,EAAQD,aACCjB,EAAAkB,EAAQD,cAAgB,IAC1BC,EAAQC,YACfX,EAAQY,EAAOrB,EAAUmB,EAAQC,YAAW,EAgBxCd,OAAAA,IACJ"}

package/build/es/components/autosuggest/BaseAutosuggest.d.ts

@@ -0,0 +1,16 @@
+import { DownshiftProps } from 'downshift';
+import { ReactNode } from 'react';
+import { CommonProps } from './Autosuggest.js';
+type BaseAutosuggestProps<T> = CommonProps & {
+    itemToString: (item: T | null) => string;
+    items: T[];
+    downshiftProps: DownshiftProps<T>;
+    showDropdownControllerButton?: boolean;
+    onConfirm?: () => void;
+    noHits?: {
+        text: ReactNode;
+        items: T[];
+    };
+};
+declare function BaseAutosuggest<T>({ className, label, labelProps, tooltipProps, supportLabelProps, inputId, labelId, leadText, errorLabel, helpLabel, density, variant, noHitsMessage, maxNumberOfHits, placeholder, itemToString, items, downshiftProps, showDropdownControllerButton, onConfirm, noHits, }: BaseAutosuggestProps<T>): JSX.Element;
+export default BaseAutosuggest;

package/build/es/components/autosuggest/BaseAutosuggest.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t,Fragment as o}from"react/jsx-runtime";import s from"classnames";import r from"downshift";import{useId as l}from"../../hooks/useId/useId.js";import{InputGroup as a}from"../input-group/InputGroup.js";import i from"./ControllerButton.js";import n from"./Menu.js";function p({className:p="",label:m,labelProps:d,tooltipProps:u,supportLabelProps:g,inputId:c,labelId:h,leadText:f,errorLabel:b,helpLabel:I,density:P,variant:j="small",noHitsMessage:x,maxNumberOfHits:k,placeholder:S,itemToString:w,items:L,downshiftProps:N,showDropdownControllerButton:H=!1,onConfirm:y=(()=>{}),noHits:M}){const T=l(c||"jkl-text-input",{generateSuffix:!c}),v=l(h||"jkl-label",{generateSuffix:!h});return e(r,{...N,inputId:T,labelId:v,itemToString:w,children:({getInputProps:r,getToggleButtonProps:l,getItemProps:c,getLabelProps:h,getMenuProps:N,getRootProps:T,selectedItem:C,isOpen:_,highlightedIndex:B,clearSelection:O})=>e(a,{...T(),label:m,className:s("jkl-autosuggest",p),density:P,labelProps:{variant:j,...d,...h({id:v})},supportLabelProps:g,tooltipProps:u,errorLabel:b,helpLabel:I,render:a=>t(o,{children:[f&&e("p",{className:s("jkl-spacing-l--bottom",{"jkl-body":"compact"!==P,"jkl-small":"compact"===P}),children:f}),t("div",{className:"jkl-text-input-wrapper","data-invalid":!!b,children:[e("input",{...a,...r({id:a.id,placeholder:S,className:"jkl-text-input__input",onKeyDown:e=>{13===e.keyCode&&!_&&y()}}),"data-testid":"autosuggest__input"}),H&&e(i,{...l(),hasSelectedItem:!!C,clearSelection:O}),_&&e(n,{downshiftProps:{getMenuProps:N,getItemProps:c},highlightedIndex:B,items:L,itemToString:w,noHitsMessage:x,maxNumberOfHits:k,noHits:M})]})]})})})}export{p as default};
+//# sourceMappingURL=BaseAutosuggest.js.map

package/build/es/components/autosuggest/BaseAutosuggest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseAutosuggest.js","sources":["../../../../src/components/autosuggest/BaseAutosuggest.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport {\n    Callback,\n    default as Downshift,\n    type DownshiftProps,\n    PropGetters,\n} from \"downshift\";\nimport React, { type ReactNode } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { type CommonProps } from \"./Autosuggest.js\";\nimport ControllerButton from \"./ControllerButton.js\";\nimport Menu from \"./Menu.js\";\n\nconst KEY_ENTER = 13;\n\ntype BaseAutosuggestProps<T> = CommonProps & {\n    itemToString: (item: T | null) => string;\n    items: T[];\n    downshiftProps: DownshiftProps<T>;\n    showDropdownControllerButton?: boolean;\n    onConfirm?: () => void;\n    noHits?: { text: ReactNode; items: T[] };\n};\ninterface Props extends PropGetters<any>, DownshiftProps<any> {\n    clearSelection: (cb?: Callback) => void;\n}\n\nfunction BaseAutosuggest<T>({\n    className = \"\",\n    label,\n    labelProps,\n    tooltipProps,\n    supportLabelProps,\n    inputId,\n    labelId,\n    leadText,\n    errorLabel,\n    helpLabel,\n    density,\n    variant = \"small\",\n    noHitsMessage,\n    maxNumberOfHits,\n    placeholder,\n    itemToString,\n    items,\n    downshiftProps,\n    showDropdownControllerButton = false,\n    onConfirm = () => {\n        /* noop */\n    },\n    noHits,\n}: BaseAutosuggestProps<T>): JSX.Element {\n    const uid = useId(inputId || \"jkl-text-input\", {\n        generateSuffix: !inputId,\n    });\n    const lid = useId(labelId || \"jkl-label\", { generateSuffix: !labelId });\n\n    const customLabelProps = {\n        inputId: uid,\n        labelId: lid,\n    };\n\n    return (\n        /* @ts-ignore-next-line det er noe rart og ancient med downshift */\n        <Downshift\n            {...downshiftProps}\n            {...customLabelProps}\n            itemToString={itemToString}\n        >\n            {({\n                getInputProps,\n                getToggleButtonProps,\n                getItemProps,\n                getLabelProps,\n                getMenuProps,\n                getRootProps,\n                selectedItem,\n                isOpen,\n                highlightedIndex,\n                clearSelection,\n            }: Props) => {\n                return (\n                    <InputGroup\n                        {...getRootProps()}\n                        label={label}\n                        className={cn(\"jkl-autosuggest\", className)}\n                        density={density}\n                        labelProps={{\n                            variant,\n                            ...labelProps,\n                            ...getLabelProps({\n                                id: lid,\n                            }),\n                        }}\n                        supportLabelProps={supportLabelProps}\n                        tooltipProps={tooltipProps}\n                        errorLabel={errorLabel}\n                        helpLabel={helpLabel}\n                        render={(inputProps) => (\n                            <>\n                                {leadText && (\n                                    <p\n                                        className={cn(\"jkl-spacing-l--bottom\", {\n                                            \"jkl-body\": density !== \"compact\",\n                                            \"jkl-small\": density === \"compact\",\n                                        })}\n                                    >\n                                        {leadText}\n                                    </p>\n                                )}\n                                <div\n                                    className=\"jkl-text-input-wrapper\"\n                                    data-invalid={!!errorLabel}\n                                >\n                                    <input\n                                        {...inputProps}\n                                        {...getInputProps({\n                                            id: inputProps.id,\n                                            placeholder,\n                                            className: \"jkl-text-input__input\",\n                                            onKeyDown: (e) => {\n                                                if (\n                                                    e.keyCode === KEY_ENTER &&\n                                                    !isOpen\n                                                ) {\n                                                    onConfirm();\n                                                }\n                                            },\n                                        })}\n                                        data-testid=\"autosuggest__input\"\n                                    />\n                                    {showDropdownControllerButton && (\n                                        <ControllerButton\n                                            {...getToggleButtonProps()}\n                                            hasSelectedItem={!!selectedItem}\n                                            clearSelection={clearSelection}\n                                        />\n                                    )}\n                                    {isOpen && (\n                                        <Menu\n                                            downshiftProps={{\n                                                getMenuProps,\n                                                getItemProps,\n                                            }}\n                                            highlightedIndex={highlightedIndex}\n                                            items={items}\n                                            itemToString={itemToString}\n                                            noHitsMessage={noHitsMessage}\n                                            maxNumberOfHits={maxNumberOfHits}\n                                            noHits={noHits}\n                                        />\n                                    )}\n                                </div>\n                            </>\n                        )}\n                    />\n                );\n            }}\n        </Downshift>\n    );\n}\n\nexport default BaseAutosuggest;\n"],"names":["BaseAutosuggest","className","label","labelProps","tooltipProps","supportLabelProps","inputId","labelId","leadText","errorLabel","helpLabel","density","variant","noHitsMessage","maxNumberOfHits","placeholder","itemToString","items","downshiftProps","showDropdownControllerButton","onConfirm","noHits","uid","useId","generateSuffix","lid","jsx","Downshift","children","getInputProps","getToggleButtonProps","getItemProps","getLabelProps","getMenuProps","getRootProps","selectedItem","isOpen","highlightedIndex","clearSelection","InputGroup","cn","id","render","inputProps","jsxs","Fragment","onKeyDown","e","keyCode","ControllerButton","hasSelectedItem","Menu"],"mappings":"8RA4BA,SAASA,GACLC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EAAU,QACVC,cAAAA,EACAC,gBAAAA,EACAC,YAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,eAAAA,EACAC,6BAAAA,GAA+B,EAC/BC,UAAAA,EAAY,SAGZC,OAAAA,IAEMC,MAAAA,EAAMC,EAAMjB,GAAW,iBAAkB,CAC3CkB,gBAAiBlB,IAEfmB,EAAMF,EAAMhB,GAAW,YAAa,CAAEiB,gBAAiBjB,IAO7D,OAEImB,EAACC,EAAA,IACOT,EAPRZ,QAASgB,EACTf,QAASkB,EAQLT,aAAAA,EAECY,SAAC,EACEC,cAAAA,EACAC,qBAAAA,EACAC,aAAAA,EACAC,cAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,iBAAAA,EACAC,eAAAA,KAGIZ,EAACa,EAAA,IACOL,IACJhC,MAAAA,EACAD,UAAWuC,EAAG,kBAAmBvC,GACjCU,QAAAA,EACAR,WAAY,CACRS,QAAAA,KACGT,KACA6B,EAAc,CACbS,GAAIhB,KAGZpB,kBAAAA,EACAD,aAAAA,EACAK,WAAAA,EACAC,UAAAA,EACAgC,OAASC,GAEAC,EAAAC,EAAA,CAAAjB,SAAA,CACGpB,GAAAkB,EAAC,IAAA,CACGzB,UAAWuC,EAAG,wBAAyB,CACnC,WAAwB,YAAZ7B,EACZ,YAAyB,YAAZA,IAGhBiB,SAAApB,IAGToC,EAAC,MAAA,CACG3C,UAAU,yBACV,iBAAgBQ,EAEhBmB,SAAA,CAAAF,EAAC,QAAA,IACOiB,KACAd,EAAc,CACdY,GAAIE,EAAWF,GACf1B,YAAAA,EACAd,UAAW,wBACX6C,UAAYC,IA3GtC,KA6GkCA,EAAEC,UACDZ,GAEShB,OAItB,cAAY,uBAEfD,GACGO,EAACuB,EAAA,IACOnB,IACJoB,kBAAmBf,EACnBG,eAAAA,IAGPF,GACGV,EAACyB,EAAA,CACGjC,eAAgB,CACZe,aAAAA,EACAF,aAAAA,GAEJM,iBAAAA,EACApB,MAAAA,EACAD,aAAAA,EACAH,cAAAA,EACAC,gBAAAA,EACAO,OAAAA,aAW5C"}

package/build/es/components/autosuggest/ControllerButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface Props {
+    clearSelection: () => void;
+    hasSelectedItem: boolean;
+    onClick: () => void;
+}
+declare const ControllerButton: FC<Props>;
+export default ControllerButton;

package/build/es/components/autosuggest/ControllerButton.js

@@ -0,0 +1,2 @@
+import{jsx as o}from"react/jsx-runtime";import{CloseIcon as t}from"../icon/icons/CloseIcon.js";import{SearchIcon as n}from"../icon/icons/SearchIcon.js";import{IconButton as c}from"../icon-button/IconButton.js";const e=({hasSelectedItem:e,clearSelection:a,onClick:i,...s})=>o(c,{...s,className:"jkl-text-input-action-button","aria-label":e?"Fjern valg":"Vis valg",title:e?"Fjern valg":"Vis valg",onClick:e?a:i,children:o(e?t:n,{})});export{e as default};
+//# sourceMappingURL=ControllerButton.js.map

package/build/es/components/autosuggest/ControllerButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControllerButton.js","sources":["../../../../src/components/autosuggest/ControllerButton.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { SearchIcon } from \"../icon/icons/SearchIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\ninterface Props {\n    clearSelection: () => void;\n    hasSelectedItem: boolean;\n    onClick: () => void;\n}\n\nconst ControllerButton: FC<Props> = ({\n    hasSelectedItem,\n    clearSelection,\n    onClick,\n    ...downshiftProps\n}) => (\n    <IconButton\n        {...downshiftProps}\n        className=\"jkl-text-input-action-button\"\n        aria-label={hasSelectedItem ? \"Fjern valg\" : \"Vis valg\"}\n        title={hasSelectedItem ? \"Fjern valg\" : \"Vis valg\"}\n        onClick={hasSelectedItem ? clearSelection : onClick}\n    >\n        {hasSelectedItem ? <CloseIcon /> : <SearchIcon />}\n    </IconButton>\n);\n\nexport default ControllerButton;\n"],"names":["ControllerButton","hasSelectedItem","clearSelection","onClick","downshiftProps","jsx","IconButton","className","title","children","CloseIcon","SearchIcon"],"mappings":"kNAWA,MAAMA,EAA8B,EAChCC,gBAAAA,EACAC,eAAAA,EACAC,QAAAA,KACGC,KAEHC,EAACC,EAAA,IACOF,EACJG,UAAU,+BACV,aAAYN,EAAkB,aAAe,WAC7CO,MAAOP,EAAkB,aAAe,WACxCE,QAASF,EAAkBC,EAAiBC,EAE3CM,SAAkBJ,EAAAJ,EAACS,EAAgBC,EAAN,CAAA"}

package/build/es/components/autosuggest/Menu.d.ts

@@ -0,0 +1,16 @@
+import { PropGetters } from 'downshift';
+import { ReactNode } from 'react';
+interface MenuProps<T> {
+    downshiftProps: Pick<PropGetters<T>, "getMenuProps" | "getItemProps">;
+    highlightedIndex: number | undefined | null;
+    items: T[];
+    itemToString: (item: T | null) => string;
+    noHitsMessage?: ReactNode;
+    maxNumberOfHits?: number;
+    noHits?: {
+        items: T[];
+        text: ReactNode;
+    };
+}
+declare function Menu<T>({ downshiftProps: { getMenuProps, getItemProps }, highlightedIndex, items, itemToString, noHitsMessage, maxNumberOfHits, noHits, }: MenuProps<T>): JSX.Element | null;
+export default Menu;

package/build/es/components/autosuggest/Menu.js

@@ -0,0 +1,2 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{createElement as s}from"react";import i from"classnames";function a({downshiftProps:{getMenuProps:a,getItemProps:l},highlightedIndex:m,items:n,itemToString:o,noHitsMessage:g,maxNumberOfHits:u=1/0,noHits:r}){const c=n.length>u?n.slice(0,u):n;if(0===c.length&&!g&&!r)return null;const d=0===c.length&&r?r.items:c;return t("div",{"data-testid":"autosuggest__menu",className:"jkl-autosuggest__menu",children:[(g||r)&&0===c.length&&e("div",{className:"jkl-autosuggest__no-hits-message","aria-live":"polite",children:g||(null==r?void 0:r.text)}),d.length>0&&e("ul",{...a({className:"jkl-autosuggest__item-list"}),children:d.map(((t,e)=>s("li",{...l({item:t,className:i("jkl-autosuggest__item",{"jkl-autosuggest__item--active":e===m})}),"data-testid":"autosuggest__item",key:o(t)},o(t))))})]})}export{a as default};
+//# sourceMappingURL=Menu.js.map

package/build/es/components/autosuggest/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../../src/components/autosuggest/Menu.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport { PropGetters } from \"downshift\";\nimport React, { ReactNode } from \"react\";\n\ninterface MenuProps<T> {\n    downshiftProps: Pick<PropGetters<T>, \"getMenuProps\" | \"getItemProps\">;\n    highlightedIndex: number | undefined | null;\n    items: T[];\n    itemToString: (item: T | null) => string;\n    noHitsMessage?: ReactNode;\n    maxNumberOfHits?: number;\n    noHits?: { items: T[]; text: ReactNode };\n}\n\nfunction Menu<T>({\n    downshiftProps: { getMenuProps, getItemProps },\n    highlightedIndex,\n    items,\n    itemToString,\n    noHitsMessage,\n    maxNumberOfHits = Infinity,\n    noHits,\n}: MenuProps<T>): JSX.Element | null {\n    const visibleItems =\n        items.length > maxNumberOfHits\n            ? items.slice(0, maxNumberOfHits)\n            : items;\n\n    if (visibleItems.length === 0 && !noHitsMessage && !noHits) {\n        return null;\n    }\n\n    const itemList =\n        visibleItems.length === 0 && noHits ? noHits.items : visibleItems;\n\n    return (\n        <div data-testid=\"autosuggest__menu\" className=\"jkl-autosuggest__menu\">\n            {(noHitsMessage || noHits) && visibleItems.length === 0 && (\n                <div\n                    className=\"jkl-autosuggest__no-hits-message\"\n                    aria-live=\"polite\"\n                >\n                    {noHitsMessage || noHits?.text}\n                </div>\n            )}\n\n            {itemList.length > 0 && (\n                <ul\n                    {...getMenuProps({\n                        className: \"jkl-autosuggest__item-list\",\n                    })}\n                >\n                    {itemList.map((item, index) => (\n                        <li\n                            {...getItemProps({\n                                item,\n                                className: cn(\"jkl-autosuggest__item\", {\n                                    \"jkl-autosuggest__item--active\":\n                                        index === highlightedIndex,\n                                }),\n                            })}\n                            data-testid=\"autosuggest__item\"\n                            key={itemToString(item)}\n                        >\n                            {itemToString(item)}\n                        </li>\n                    ))}\n                </ul>\n            )}\n        </div>\n    );\n}\n\nexport default Menu;\n"],"names":["Menu","downshiftProps","getMenuProps","getItemProps","highlightedIndex","items","itemToString","noHitsMessage","maxNumberOfHits","noHits","visibleItems","length","slice","itemList","jsxs","className","children","jsx","text","map","item","index","createElement","cn","key"],"mappings":"kHAcA,SAASA,GACLC,gBAAkBC,aAAAA,EAAcC,aAAAA,GAChCC,iBAAAA,EACAC,MAAAA,EACAC,aAAAA,EACAC,cAAAA,EACAC,gBAAAA,EAAkB,IAClBC,OAAAA,IAEMC,MAAAA,EACFL,EAAMM,OAASH,EACTH,EAAMO,MAAM,EAAGJ,GACfH,EAEV,GAA4B,IAAxBK,EAAaC,SAAiBJ,IAAkBE,EACzC,OAAA,KAGX,MAAMI,EACsB,IAAxBH,EAAaC,QAAgBF,EAASA,EAAOJ,MAAQK,EAGpD,OAAAI,EAAA,MAAA,CAAI,cAAY,oBAAoBC,UAAU,wBACzCC,SAAA,EAAiBT,GAAAE,IAAmC,IAAxBC,EAAaC,QACvCM,EAAC,MAAA,CACGF,UAAU,mCACV,YAAU,SAETC,aAAiB,MAAAP,OAAA,EAAAA,EAAQS,QAIjCL,EAASF,OAAS,GACfM,EAAC,KAAA,IACOf,EAAa,CACba,UAAW,+BAGdC,SAASH,EAAAM,KAAI,CAACC,EAAMC,IACjBC,EAAC,KAAA,IACOnB,EAAa,CACbiB,KAAAA,EACAL,UAAWQ,EAAG,wBAAyB,CACnC,gCACIF,IAAUjB,MAGtB,cAAY,oBACZoB,IAAKlB,EAAac,IAEjBd,EAAac,UAO1C"}

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

@@ -0,0 +1,2 @@
+export type { AutosuggestProps } from './Autosuggest.js';
+export { Autosuggest } from './Autosuggest.js';

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

@@ -0,0 +1,2 @@
+import{Autosuggest as s}from"./Autosuggest.js";export{s as Autosuggest};
+//# sourceMappingURL=index.js.map

package/build/es/components/autosuggest/index.js.map

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

package/build/es/components/autosuggest/utils.d.ts

@@ -0,0 +1 @@
+export declare function filter<T>(allItems: T[], inputValue: string | null, keys?: string[]): T[];

package/build/es/components/autosuggest/utils.js

@@ -0,0 +1,2 @@
+import{matchSorter as r}from"match-sorter";function t(t,e,o){return e?r(t,e,o?{keys:o}:{}):t}export{t as filter};
+//# sourceMappingURL=utils.js.map

package/build/es/components/autosuggest/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../src/components/autosuggest/utils.ts"],"sourcesContent":["import { matchSorter } from \"match-sorter\";\n\nexport function filter<T>(\n    allItems: T[],\n    inputValue: string | null,\n    keys?: string[],\n): T[] {\n    const options = keys ? { keys } : {};\n    if (!inputValue) {\n        return allItems;\n    }\n    return matchSorter(allItems, inputValue, options);\n}\n"],"names":["filter","allItems","inputValue","keys","matchSorter"],"mappings":"2CAEgB,SAAAA,EACZC,EACAC,EACAC,GAGA,OAAKD,EAGEE,EAAYH,EAAUC,EAJbC,EAAO,CAAEA,KAAAA,GAAS,CAAA,GAEvBF,CAGf"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.30.8",
+    "version": "0.31.1",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -83,6 +83,16 @@
                 "default": "./build/cjs/components/accordion/index.cjs"
             }
         },
+        "./components/autosuggest": {
+            "import": {
+                "types": "./build/es/components/autosuggest/index.d.ts",
+                "default": "./build/es/components/autosuggest/index.js"
+            },
+            "require": {
+                "types": "./build/cjs/components/autosuggest/index.d.cts",
+                "default": "./build/cjs/components/autosuggest/index.cjs"
+            }
+        },
         "./components/breadcrumb": {
             "import": {
                 "types": "./build/es/components/breadcrumb/index.d.ts",
@@ -483,11 +493,12 @@
         "test": "vitest --config vite.test.config.mjs"
     },
     "dependencies": {
+        "@types/react": "^18.0.0",
+        "downshift": "^7.6.0",
+        "match-sorter": "^6.3.1",
+        "react": "^18.0.0",
         "react-dom": "^18.0.0"
     },
-    "peerDependencies": {
-        "react": "^18.0.0"
-    },
     "optionalDependencies": {
         "@floating-ui/react": ">0.24.1 <0.27",
         "@react-aria/toast": "^3.0.0-beta.1",
@@ -535,5 +546,5 @@
             "@babel/preset-react"
         ]
     },
-    "gitHead": "ba3951c628cae68874dbc4b378c08e215717447e"
+    "gitHead": "27c9715cd08b9cd61551ac018ecd0b249e06fe3e"
 }

package/styles/components/autosuggest/_index.scss

@@ -0,0 +1,3 @@
+@forward "autosuggest";
+
+@use "../text-input";

package/styles/components/autosuggest/autosuggest.css

@@ -0,0 +1,141 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 28 Oct 2024 14:22:00 GMT
+ */
+@media screen and (prefers-color-scheme: light) {
+  :root {
+    --jkl-autosuggest-text-color: #1b1917;
+    --jkl-autosuggest-menu-background-color: #ffffff;
+    --jkl-autosuggest-focus-color: #1b1917;
+    --jkl-autosuggest-error-text-color: #1b1917;
+    --jkl-autosuggest-error-placeholder-color: #636060;
+    --jkl-autosuggest-hover-option-color: #1b1917;
+    --jkl-autosuggest-hover-option-background-color: #e0dbd4;
+  }
+}
+[data-theme=light] {
+  --jkl-autosuggest-text-color: #1b1917;
+  --jkl-autosuggest-menu-background-color: #ffffff;
+  --jkl-autosuggest-focus-color: #1b1917;
+  --jkl-autosuggest-error-text-color: #1b1917;
+  --jkl-autosuggest-error-placeholder-color: #636060;
+  --jkl-autosuggest-hover-option-color: #1b1917;
+  --jkl-autosuggest-hover-option-background-color: #e0dbd4;
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --jkl-autosuggest-text-color: #f9f9f9;
+    --jkl-autosuggest-menu-background-color: #000000;
+    --jkl-autosuggest-focus-color: #f9f9f9;
+    --jkl-autosuggest-error-text-color: #1b1917;
+    --jkl-autosuggest-error-placeholder-color: #636060;
+    --jkl-autosuggest-hover-option-color: #f9f9f9;
+    --jkl-autosuggest-hover-option-background-color: #636060;
+  }
+}
+[data-theme=dark] {
+  --jkl-autosuggest-text-color: #f9f9f9;
+  --jkl-autosuggest-menu-background-color: #000000;
+  --jkl-autosuggest-focus-color: #f9f9f9;
+  --jkl-autosuggest-error-text-color: #1b1917;
+  --jkl-autosuggest-error-placeholder-color: #636060;
+  --jkl-autosuggest-hover-option-color: #f9f9f9;
+  --jkl-autosuggest-hover-option-background-color: #636060;
+}
+
+:root,
+[data-layout-density=comfortable],
+[data-density=comfortable] {
+  --jkl-autosuggest-item-font-size: var(--jkl-body-font-size);
+  --jkl-autosuggest-item-line-height: var(--jkl-body-line-height);
+  --jkl-autosuggest-item-font-weight: var(--jkl-body-font-weight);
+  --jkl-autosuggest-menu-padding: 1rem 0.5rem 0;
+  --jkl-autosuggest-controller-button-width: auto;
+  --jkl-autosuggest-controller-button-padding: 0 0.75rem;
+  --jkl-autosuggest-controller-button-icon-size: 1.25rem;
+  --jkl-autosuggest-option-padding: 0 0.75rem;
+  --jkl-autosuggest-option-height: 3rem;
+}
+
+[data-layout-density=compact],
+[data-density=compact] {
+  --jkl-autosuggest-item-font-size: var(--jkl-small-font-size);
+  --jkl-autosuggest-item-line-height: var(--jkl-small-line-height);
+  --jkl-autosuggest-item-font-weight: var(--jkl-small-font-weight);
+  --jkl-autosuggest-menu-padding: 0.25rem;
+  --jkl-autosuggest-controller-button-width: 1.5rem;
+  --jkl-autosuggest-controller-button-padding: 0;
+  --jkl-autosuggest-controller-button-icon-size: 1.125rem;
+  --jkl-autosuggest-no-hits-message-font-size: var(--jkl-small-font-size);
+  --jkl-autosuggest-option-padding: 0 0.5rem;
+  --jkl-autosuggest-option-height: 2rem;
+}
+
+.jkl-autosuggest {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+}
+.jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper {
+  border-radius: 0.1875rem 0.1875rem 0 0;
+}
+.jkl-autosuggest__input-group > input[aria-invalid=true] ~ .jkl-autosuggest__controller-button {
+  color: var(--jkl-autosuggest-error-placeholder-color);
+}
+.jkl-autosuggest__input-group > input[aria-invalid=true] ~ .jkl-autosuggest__controller-button:hover {
+  color: var(--jkl-autosuggest-error-text-color);
+}
+html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__input-group > input[aria-invalid=true] ~ .jkl-autosuggest__controller-button:focus::after {
+  box-shadow: inset 0 0 0 0.125rem var(--jkl-autosuggest-error-text-color);
+}
+
+.jkl-autosuggest__no-hits-message {
+  font-size: var(--jkl-autosuggest-no-hits-message-font-size);
+  padding: var(--jkl-autosuggest-option-padding);
+}
+.jkl-autosuggest__menu {
+  background-color: var(--jkl-autosuggest-menu-background-color);
+  border: 0.125rem solid var(--jkl-autosuggest-focus-color);
+  border-top: none;
+  border-radius: 0 0 0.1875rem 0.1875rem;
+  box-sizing: border-box;
+  color: var(--jkl-autosuggest-text-color);
+  position: absolute;
+  inset: 100% -0.0625rem auto;
+  margin: 0;
+  padding: 0;
+  max-height: 60vh;
+  overflow-y: auto;
+  width: calc(100% + 0.125rem);
+  z-index: 7000;
+  -webkit-overflow-scrolling: touch;
+}
+.jkl-autosuggest__item-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.jkl-autosuggest__item {
+  font-size: var(--jkl-autosuggest-item-font-size);
+  line-height: var(--jkl-autosuggest-item-line-height);
+  font-weight: var(--jkl-autosuggest-item-font-weight);
+  color: unset;
+  display: flex;
+  align-items: center;
+  border: 0;
+  background-color: inherit;
+  min-height: var(--jkl-autosuggest-option-height);
+  text-align: left;
+  transition-timing-function: ease;
+  transition-duration: 150ms;
+  transition-property: color, background-color;
+  position: relative;
+  padding: var(--jkl-autosuggest-option-padding);
+  cursor: pointer;
+}
+.jkl-autosuggest__item:focus, .jkl-autosuggest__item--active, .jkl-autosuggest__item:hover {
+  color: var(--jkl-autosuggest-hover-option-color);
+  background-color: var(--jkl-autosuggest-hover-option-background-color);
+}

package/styles/components/autosuggest/autosuggest.min.css

@@ -0,0 +1 @@
+@media screen and (prefers-color-scheme:light){:root{--jkl-autosuggest-text-color:#1b1917;--jkl-autosuggest-menu-background-color:#fff;--jkl-autosuggest-focus-color:#1b1917;--jkl-autosuggest-error-text-color:#1b1917;--jkl-autosuggest-error-placeholder-color:#636060;--jkl-autosuggest-hover-option-color:#1b1917;--jkl-autosuggest-hover-option-background-color:#e0dbd4}}[data-theme=light]{--jkl-autosuggest-text-color:#1b1917;--jkl-autosuggest-menu-background-color:#fff;--jkl-autosuggest-focus-color:#1b1917;--jkl-autosuggest-error-text-color:#1b1917;--jkl-autosuggest-error-placeholder-color:#636060;--jkl-autosuggest-hover-option-color:#1b1917;--jkl-autosuggest-hover-option-background-color:#e0dbd4}@media screen and (prefers-color-scheme:dark){:root{--jkl-autosuggest-text-color:#f9f9f9;--jkl-autosuggest-menu-background-color:#000;--jkl-autosuggest-focus-color:#f9f9f9;--jkl-autosuggest-error-text-color:#1b1917;--jkl-autosuggest-error-placeholder-color:#636060;--jkl-autosuggest-hover-option-color:#f9f9f9;--jkl-autosuggest-hover-option-background-color:#636060}}[data-theme=dark]{--jkl-autosuggest-text-color:#f9f9f9;--jkl-autosuggest-menu-background-color:#000;--jkl-autosuggest-focus-color:#f9f9f9;--jkl-autosuggest-error-text-color:#1b1917;--jkl-autosuggest-error-placeholder-color:#636060;--jkl-autosuggest-hover-option-color:#f9f9f9;--jkl-autosuggest-hover-option-background-color:#636060}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-autosuggest-item-font-size:var(--jkl-body-font-size);--jkl-autosuggest-item-line-height:var(--jkl-body-line-height);--jkl-autosuggest-item-font-weight:var(--jkl-body-font-weight);--jkl-autosuggest-menu-padding:1rem 0.5rem 0;--jkl-autosuggest-controller-button-width:auto;--jkl-autosuggest-controller-button-padding:0 0.75rem;--jkl-autosuggest-controller-button-icon-size:1.25rem;--jkl-autosuggest-option-padding:0 0.75rem;--jkl-autosuggest-option-height:3rem}[data-density=compact],[data-layout-density=compact]{--jkl-autosuggest-item-font-size:var(--jkl-small-font-size);--jkl-autosuggest-item-line-height:var(--jkl-small-line-height);--jkl-autosuggest-item-font-weight:var(--jkl-small-font-weight);--jkl-autosuggest-menu-padding:0.25rem;--jkl-autosuggest-controller-button-width:1.5rem;--jkl-autosuggest-controller-button-padding:0;--jkl-autosuggest-controller-button-icon-size:1.125rem;--jkl-autosuggest-no-hits-message-font-size:var(--jkl-small-font-size);--jkl-autosuggest-option-padding:0 0.5rem;--jkl-autosuggest-option-height:2rem}.jkl-autosuggest{align-items:flex-start;display:flex;flex-direction:column;position:relative}.jkl-autosuggest[aria-expanded=true] .jkl-text-input-wrapper{border-radius:.1875rem .1875rem 0 0}.jkl-autosuggest__input-group>input[aria-invalid=true]~.jkl-autosuggest__controller-button{color:var(--jkl-autosuggest-error-placeholder-color)}.jkl-autosuggest__input-group>input[aria-invalid=true]~.jkl-autosuggest__controller-button:hover{color:var(--jkl-autosuggest-error-text-color)}html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__input-group>input[aria-invalid=true]~.jkl-autosuggest__controller-button:focus:after{box-shadow:inset 0 0 0 .125rem var(--jkl-autosuggest-error-text-color)}.jkl-autosuggest__no-hits-message{font-size:var(--jkl-autosuggest-no-hits-message-font-size);padding:var(--jkl-autosuggest-option-padding)}.jkl-autosuggest__menu{background-color:var(--jkl-autosuggest-menu-background-color);border:.125rem solid var(--jkl-autosuggest-focus-color);border-radius:0 0 .1875rem .1875rem;border-top:none;box-sizing:border-box;color:var(--jkl-autosuggest-text-color);inset:100% -.0625rem auto;margin:0;max-height:60vh;overflow-y:auto;padding:0;position:absolute;width:calc(100% + .125rem);z-index:7000;-webkit-overflow-scrolling:touch}.jkl-autosuggest__item-list{list-style-type:none;margin:0;padding:0}.jkl-autosuggest__item{align-items:center;background-color:inherit;border:0;color:unset;cursor:pointer;display:flex;font-size:var(--jkl-autosuggest-item-font-size);font-weight:var(--jkl-autosuggest-item-font-weight);line-height:var(--jkl-autosuggest-item-line-height);min-height:var(--jkl-autosuggest-option-height);padding:var(--jkl-autosuggest-option-padding);position:relative;text-align:left;transition-duration:.15s;transition-property:color,background-color;transition-timing-function:ease}.jkl-autosuggest__item--active,.jkl-autosuggest__item:focus,.jkl-autosuggest__item:hover{background-color:var(--jkl-autosuggest-hover-option-background-color);color:var(--jkl-autosuggest-hover-option-color)}