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

@fremtind/jokul 0.64.2 → 0.66.1

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

Files changed (1008) hide show

package/build/es/components/text-area/BaseTextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextArea.js","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n type FocusEvent,\n forwardRef,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n (props, ref) => {\n const {\n autoExpand,\n counter,\n onBlur,\n onFocus,\n rows = 7,\n placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n startOpen,\n style,\n value,\n \"aria-invalid\": ariaInvalid,\n onChange,\n ...rest\n } = props;\n\n const [counterCurrent, setCounterCurrent] = useState(() => {\n if (typeof value === \"undefined\") {\n return 0;\n } ~~else~~ if (typeof value === \"number\") {\n return String(value).length;\n } ~~else {~~\n return value.length;\n ~~}\n~~ });\n const [textAreaFocused, setTextAreaFocused] = useState(false);\n const internalRef = useRef<HTMLTextAreaElement>(null);\n const textAreaRef =\n (ref as RefObject<HTMLTextAreaElement>) \|\| internalRef;\n\n useEffect(() => {\n const textAreaElement = textAreaRef.current;\n if (textAreaElement) {\n if (!autoExpand) {\n textAreaElement.style.height = \"\";\n return;\n }\n\n if (textAreaFocused \|\| value) {\n textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n } else {\n textAreaElement.style.height = \"\";\n }\n }\n }, [autoExpand, textAreaRef, value, textAreaFocused]);\n\n function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n setTextAreaFocused(true);\n if (onFocus) {\n onFocus(e);\n }\n }\n\n function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n setTextAreaFocused(false);\n if (onBlur) {\n onBlur(e);\n }\n }\n\n function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n setCounterCurrent(e.target.value.length);\n if (onChange) {\n onChange(e);\n }\n }\n\n const counterTotal: number = counter?.maxLength \|\| 0;\n const progressCurrent: number = counterTotal - counterCurrent;\n function calculatePercentage(current: number, total: number): number {\n if (current <= 0) {\n return 0;\n }\n return total === 0 ? 0 : (current * 100) / total;\n }\n const counterLabel =\n counter && counterCurrent > counterTotal\n ? `Du har skrevet ${counterCurrent - counterTotal} tegn for mye`\n : undefined;\n\n const invalid = Boolean(ariaInvalid \|\| counterLabel);\n\n const overflowStyle = {\n overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n } as React.CSSProperties;\n\n return (\n <div\n className=\"jkl-text-area-wrapper\"\n data-invalid={invalid}\n data-has-content={counterCurrent > 0}\n >\n <textarea\n aria-invalid={invalid}\n className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n onChange={handleOnChange}\n ref={textAreaRef}\n style={{ ...style, ...overflowStyle }}\n placeholder={placeholder}\n value={value}\n {...rest}\n />\n {counter && (\n <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n <div className=\"jkl-text-area__counter-count\">\n {counterCurrent} / {counterTotal}\n </div>\n {!counter.hideProgress && (\n <div\n className=\"jkl-text-area__counter-progress\"\n style={{\n [\"--progress-width\" as string]: `${calculatePercentage(\n progressCurrent,\n counterTotal,\n )}%`,\n }}\n />\n )}\n </div>\n )}\n </div>\n );\n },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","calculatePercentage","displayName"],"mappings":"8HAWO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,GAAS,WACtCN,EAAU,IACV,~~EACiB~~,iBAAVA,~~EACPO~~,OAAOP,GAAOQ,~~OAEdR~~,EAAMQ,~~UAGdC~~,EAAiBC,GAAsBJ,GAAS,GACjDK,EAAcC,EAA4B,MAC1CC,EACDtB,GAA0CoB,EAE/CG,GAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,IACD,CAACzB,EAAYqB,EAAab,EAAOS,IAuB9B,MAAAU,GAAuB,MAAA1B,OAAA,EAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IASN,OAAAI,EAAC,MAAA,CACGC,UAAU,wBACV,eAAcF,EACd,mBAAkBlB,EAAiB,EAEnCqB,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcJ,EACdE,UAAW,sDAAsD5B,SACjEF,OA1CZ,SAAsBiC,GAClBjB,GAAmB,GACfhB,GACAA,EAAOiC,EAEf,EAsCYhC,QAlDZ,SAAuBgC,GACnBjB,GAAmB,GACff,GACAA,EAAQgC,EAEhB,EA8CYzB,SArCZ,SAAwByB,GACFtB,EAAAsB,EAAEC,OAAO5B,MAAMQ,QAC7BN,GACAA,EAASyB,EAEjB,EAiCYpC,IAAKsB,EACLd,MAAO,IAAKA,KAjBF,CAClB8B,UAAWrC,EAAa,cAAW,IAiB3BK,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACI8B,EAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAArB,EAAe,MAAce,MAEhC1B,EAAQqC,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACVzB,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcU,EA8CdZ,EA7CxBH,GAAW,GAGE,IAAVe,EAFI,EAEyB,IAAVf,EAAiBe,GAwCa,aA5CnDC,IAAoBhB,EAAiBe,CAmDlC,IAMpB3C,EAAa6C,YAAc"}
1	+ {"version":3,"file":"BaseTextArea.js","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n type FocusEvent,\n forwardRef,\n type RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n (props, ref) => {\n const {\n autoExpand,\n counter,\n onBlur,\n onFocus,\n rows = 7,\n placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n startOpen,\n style,\n value,\n \"aria-invalid\": ariaInvalid,\n onChange,\n ...rest\n } = props;\n\n const [counterCurrent, setCounterCurrent] = useState(() => {\n if (typeof value === \"undefined\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return String(value).length;\n }\n\n return value.length;\n });\n const [textAreaFocused, setTextAreaFocused] = useState(false);\n const internalRef = useRef<HTMLTextAreaElement>(null);\n const textAreaRef =\n (ref as RefObject<HTMLTextAreaElement>) \|\| internalRef;\n\n useEffect(() => {\n const textAreaElement = textAreaRef.current;\n if (textAreaElement) {\n if (!autoExpand) {\n textAreaElement.style.height = \"\";\n return;\n }\n\n if (textAreaFocused \|\| value) {\n textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n } else {\n textAreaElement.style.height = \"\";\n }\n }\n }, [autoExpand, textAreaRef, value, textAreaFocused]);\n\n function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n setTextAreaFocused(true);\n if (onFocus) {\n onFocus(e);\n }\n }\n\n function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n setTextAreaFocused(false);\n if (onBlur) {\n onBlur(e);\n }\n }\n\n function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n setCounterCurrent(e.target.value.length);\n if (onChange) {\n onChange(e);\n }\n }\n\n const counterTotal: number = counter?.maxLength \|\| 0;\n const progressCurrent: number = counterTotal - counterCurrent;\n function calculatePercentage(current: number, total: number): number {\n if (current <= 0) {\n return 0;\n }\n return total === 0 ? 0 : (current * 100) / total;\n }\n const counterLabel =\n counter && counterCurrent > counterTotal\n ? `Du har skrevet ${counterCurrent - counterTotal} tegn for mye`\n : undefined;\n\n const invalid = Boolean(ariaInvalid \|\| counterLabel);\n\n const overflowStyle = {\n overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n } as React.CSSProperties;\n\n return (\n <div\n className=\"jkl-text-area-wrapper\"\n data-invalid={invalid}\n data-has-content={counterCurrent > 0}\n >\n <textarea\n aria-invalid={invalid}\n className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n onBlur={handleOnBlur}\n onFocus={handleOnFocus}\n onChange={handleOnChange}\n ref={textAreaRef}\n style={{ ...style, ...overflowStyle }}\n placeholder={placeholder}\n value={value}\n {...rest}\n />\n {counter && (\n <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n <div className=\"jkl-text-area__counter-count\">\n {counterCurrent} / {counterTotal}\n </div>\n {!counter.hideProgress && (\n <div\n className=\"jkl-text-area__counter-progress\"\n style={{\n [\"--progress-width\" as string]: `${calculatePercentage(\n progressCurrent,\n counterTotal,\n )}%`,\n }}\n />\n )}\n </div>\n )}\n </div>\n );\n },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","calculatePercentage","displayName"],"mappings":"8HAWO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,GAAS,WACtCN,EAAU,IACV,EAGU,iBAAVA,EACAO,OAAOP,GAAOQ,OAGlBR,EAAMQ,UAEVC,EAAiBC,GAAsBJ,GAAS,GACjDK,EAAcC,EAA4B,MAC1CC,EACDtB,GAA0CoB,EAE/CG,GAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,IACD,CAACzB,EAAYqB,EAAab,EAAOS,IAuB9B,MAAAU,GAAuB,MAAA1B,OAAA,EAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IASN,OAAAI,EAAC,MAAA,CACGC,UAAU,wBACV,eAAcF,EACd,mBAAkBlB,EAAiB,EAEnCqB,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcJ,EACdE,UAAW,sDAAsD5B,SACjEF,OA1CZ,SAAsBiC,GAClBjB,GAAmB,GACfhB,GACAA,EAAOiC,EAEf,EAsCYhC,QAlDZ,SAAuBgC,GACnBjB,GAAmB,GACff,GACAA,EAAQgC,EAEhB,EA8CYzB,SArCZ,SAAwByB,GACFtB,EAAAsB,EAAEC,OAAO5B,MAAMQ,QAC7BN,GACAA,EAASyB,EAEjB,EAiCYpC,IAAKsB,EACLd,MAAO,IAAKA,KAjBF,CAClB8B,UAAWrC,EAAa,cAAW,IAiB3BK,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACI8B,EAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAArB,EAAe,MAAce,MAEhC1B,EAAQqC,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACVzB,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcU,EA8CdZ,EA7CxBH,GAAW,GAGE,IAAVe,EAFI,EAEyB,IAAVf,EAAiBe,GAwCa,aA5CnDC,IAAoBhB,EAAiBe,CAmDlC,IAMpB3C,EAAa6C,YAAc"}

package/build/es/components/text-area/TextArea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextArea } from \"./BaseTextArea.js\";\nimport { TextAreaProps } from \"./types.js\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (props, ref) => {\n const {\n autoExpand,\n className,\n counter,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n startOpen,\n supportLabelProps,\n tooltip,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n const textAreaProps = { autoExpand, counter, startOpen };\n return (\n <InputGroup\n className={clsx(\"jkl-text-area\", className, {\n \"jkl-text-area--start-open\": startOpen,\n \"jkl-text-area--auto-expand\": autoExpand,\n })}\n data-testid=\"jkl-text-area\"\n {...inputGroupProps}\n >\n <BaseTextArea ref={ref} {...rest} {...textAreaProps} />\n </InputGroup>\n );\n },\n);\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltip","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"oOAMO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,QAAAA,KACGC,GACHd,EACEe,EAAkB,CACpBN,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,QAAAA,GAEEG,EAAgB,CAAEd,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,OAAAM,EAACC,EAAA,CACGf,UAAWgB,EAAK,gBAAiBhB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRa,EAEJK,WAACC,EAAa,CAAApB,IAAAA,KAAca,KAAUE,KAAe,IAKrElB,EAASwB,YAAc"}
1	+ {"version":3,"file":"TextArea.js","sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextArea } from \"./BaseTextArea.js\";\nimport type { TextAreaProps } from \"./types.js\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n (props, ref) => {\n const {\n autoExpand,\n className,\n counter,\n density,\n errorLabel,\n helpLabel,\n inline,\n label,\n labelProps,\n startOpen,\n supportLabelProps,\n tooltip,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n const textAreaProps = { autoExpand, counter, startOpen };\n return (\n <InputGroup\n className={clsx(\"jkl-text-area\", className, {\n \"jkl-text-area--start-open\": startOpen,\n \"jkl-text-area--auto-expand\": autoExpand,\n })}\n data-testid=\"jkl-text-area\"\n {...inputGroupProps}\n >\n <BaseTextArea ref={ref} {...rest} {...textAreaProps} />\n </InputGroup>\n );\n },\n);\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltip","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"oOAMO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,QAAAA,KACGC,GACHd,EACEe,EAAkB,CACpBN,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,QAAAA,GAEEG,EAAgB,CAAEd,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,OAAAM,EAACC,EAAA,CACGf,UAAWgB,EAAK,gBAAiBhB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRa,EAEJK,WAACC,EAAa,CAAApB,IAAAA,KAAca,KAAUE,KAAe,IAKrElB,EAASwB,YAAc"}

package/build/es/components/text-area/stories/TextArea.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.stories.js","sources":["../../../../../src/components/text-area/stories/TextArea.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { TextArea as TextAreaComponent } from \"../TextArea.js\";\nimport \"../styles/_index.scss\";\n\nconst meta = {\n title: \"Komponenter/TextArea\",\n component: TextAreaComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof TextAreaComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TextArea: Story = {\n args: {\n label: \"Beskrivelse\",\n },\n};\n"],"names":["meta","title","component","TextAreaComponent","parameters","layout","tags","TextArea","args","label"],"mappings":"0CAIA,MAAMA,EAAO,CACTC,MAAO,uBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAkB,CAC3BC,KAAM,CACFC,MAAO"}
1	+ {"version":3,"file":"TextArea.stories.js","sources":["../../../../../src/components/text-area/stories/TextArea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { TextArea as TextAreaComponent } from \"../TextArea.js\";\nimport \"../styles/_index.scss\";\n\nconst meta = {\n title: \"Komponenter/TextArea\",\n component: TextAreaComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof TextAreaComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TextArea: Story = {\n args: {\n label: \"Beskrivelse\",\n },\n};\n"],"names":["meta","title","component","TextAreaComponent","parameters","layout","tags","TextArea","args","label"],"mappings":"0CAIA,MAAMA,EAAO,CACTC,MAAO,uBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAkB,CAC3BC,KAAM,CACFC,MAAO"}

package/build/es/components/text-input/BaseTextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { BaseTextInputProps } from \"./types.js\";\n\nfunction getWidthAsStyle(\n width?: string,\n maxLength?: number,\n): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at 40ch\n const length = `${Math.min(maxLength, 40)}ch`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n (props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action &&\n actionButton &&\n React.cloneElement(actionButton, {\n className: clsx(\n \"jkl-text-input-action-button\",\n actionButton.props.className,\n ),\n })}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\n \"jkl-text-input-action-button\",\n action.className,\n )}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"gMAKA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CAEO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAACI,EAAA,CACGZ,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SACZ,IAOpB3B,EAAc4B,YAAc"}
1	+ {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { BaseTextInputProps } from \"./types.js\";\n\nfunction getWidthAsStyle(\n width?: string,\n maxLength?: number,\n): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at 40ch\n const length = `${Math.min(maxLength, 40)}ch`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n (props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action &&\n actionButton &&\n React.cloneElement(actionButton, {\n className: clsx(\n \"jkl-text-input-action-button\",\n actionButton.props.className,\n ),\n })}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\n \"jkl-text-input-action-button\",\n action.className,\n )}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"gMAKA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CAEO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,aAG9BH,IAAWQ,GACRI,EAACI,EAAA,CACGZ,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SACZ,IAOpB3B,EAAc4B,YAAc"}

package/build/es/components/text-input/TextInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.js","sources":["../../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextInput } from \"./BaseTextInput.js\";\nimport { TextInputProps } from \"./types.js\";\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n inputClassName,\n labelProps,\n supportLabelProps,\n tooltip,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n return (\n <InputGroup\n {...inputGroupProps}\n className={clsx(className, \"jkl-text-input\", {\n \"jkl-text-input--inline\": inline,\n })}\n data-testid=\"jkl-text-input\"\n density={inline ? \"compact\" : density}\n >\n <BaseTextInput ref={ref} {...rest} className={inputClassName} />\n </InputGroup>\n );\n },\n);\n\nTextInput.displayName = \"TextInput\";\n"],"names":["TextInput","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","inputClassName","labelProps","supportLabelProps","tooltip","rest","jsx","InputGroup","clsx","children","BaseTextInput","displayName"],"mappings":"sOAMO,MAAMA,EAAYC,GACrB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,KACGC,GACHZ,EAYA,OAAAa,EAACC,EAAA,CAVDZ,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAG,kBAAAA,EACAC,QAAAA,EAKIR,UAAWY,EAAKZ,EAAW,iBAAkB,CACzC,yBAA0BI,IAE9B,cAAY,iBACZH,QAASG,EAAS,UAAYH,EAE9BY,WAACC,EAAc,CAAAhB,IAAAA,KAAcW,EAAMT,UAAWK,KAAgB,IAM9EV,EAAUoB,YAAc"}
1	+ {"version":3,"file":"TextInput.js","sources":["../../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextInput } from \"./BaseTextInput.js\";\nimport type { TextInputProps } from \"./types.js\";\n\nexport const TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n inputClassName,\n labelProps,\n supportLabelProps,\n tooltip,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltip,\n };\n return (\n <InputGroup\n {...inputGroupProps}\n className={clsx(className, \"jkl-text-input\", {\n \"jkl-text-input--inline\": inline,\n })}\n data-testid=\"jkl-text-input\"\n density={inline ? \"compact\" : density}\n >\n <BaseTextInput ref={ref} {...rest} className={inputClassName} />\n </InputGroup>\n );\n },\n);\n\nTextInput.displayName = \"TextInput\";\n"],"names":["TextInput","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","inputClassName","labelProps","supportLabelProps","tooltip","rest","jsx","InputGroup","clsx","children","BaseTextInput","displayName"],"mappings":"sOAMO,MAAMA,EAAYC,GACrB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,eAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,KACGC,GACHZ,EAYA,OAAAa,EAACC,EAAA,CAVDZ,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAG,kBAAAA,EACAC,QAAAA,EAKIR,UAAWY,EAAKZ,EAAW,iBAAkB,CACzC,yBAA0BI,IAE9B,cAAY,iBACZH,QAASG,EAAS,UAAYH,EAE9BY,WAACC,EAAc,CAAAhB,IAAAA,KAAcW,EAAMT,UAAWK,KAAgB,IAM9EV,EAAUoB,YAAc"}

package/build/es/components/toast/Toast.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useEffect as e}from"react";import{useBrowserPreferences as r}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{Countdown as i}from"../countdown/Countdown.js";import{CloseIcon as c}from"../icon/icons/CloseIcon.js";import{ErrorIcon as l}from"../icon/icons/ErrorIcon.js";import{InfoIcon as m}from"../icon/icons/InfoIcon.js";import{SuccessIcon as u}from"../icon/icons/SuccessIcon.js";import{WarningIcon as f}from"../icon/icons/WarningIcon.js";import{IconButton as j}from"../icon-button/IconButton.js";const d=t=>{switch(t){case"error":return o(l,{className:"jkl-toast__icon"});case"info":return o(m,{className:"jkl-toast__icon"});case"success":return o(u,{className:"jkl-toast__icon"});case"warning":return o(f,{className:"jkl-toast__icon"});default:return null}};function p({className:l,state:m,...u}){var f;let p=n(null),{toastProps:k,titleProps:_}=s(u,m,p);const v="string"==typeof u.toast.content?u.toast.content:u.toast.content.content,I="string"==typeof u.toast.content?void 0:u.toast.content.title,g=null==(null==(f=u.toast.timer)?void 0:f.timerId),{prefersReducedMotion:N}=r();return e((()=>{N&&"exiting"===u.toast.animation&&m.remove(u.toast.key)}),[N,u.toast.animation,u.toast.key,m]),t("div",{...k,ref:p,className:a("jkl-toast",{"jkl-toast--info":"info"===u.toast.variant,"jkl-toast--error":"error"===u.toast.variant,"jkl-toast--warning":"warning"===u.toast.variant,"jkl-toast--success":"success"===u.toast.variant},l),"data-animation":u.toast.animation,onAnimationEnd:()=>{"exiting"===u.toast.animation&&m.remove(u.toast.key)},children:[o("span",{className:"jkl-toast__progress",children:u.toast.timeout?o(i,{from:u.toast.timeout,isPaused:g,onAnimationEnd:t=>{t.stopPropagation()}}):null}),d(u.toast.variant),t("div",{..._,className:"jkl-toast__content",children:[I&&o("p",{className:"jkl-toast__title",children:I}),o("p",{className:"jkl-toast__message",children:v})]}),o(j,{"data-theme":u.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{m.close(u.toast.key)},children:o(c,{})})]})}export{p as Toast};
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useEffect as e}from"react";import{useBrowserPreferences as r}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{Countdown as i}from"../countdown/Countdown.js";import{IconButton as c}from"../icon-button/IconButton.js";import{CloseIcon as l}from"../icon/icons/CloseIcon.js";import{ErrorIcon as m}from"../icon/icons/ErrorIcon.js";import{InfoIcon as u}from"../icon/icons/InfoIcon.js";import{SuccessIcon as f}from"../icon/icons/SuccessIcon.js";import{WarningIcon as j}from"../icon/icons/WarningIcon.js";const d=t=>{switch(t){case"error":return o(m,{className:"jkl-toast__icon"});case"info":return o(u,{className:"jkl-toast__icon"});case"success":return o(f,{className:"jkl-toast__icon"});case"warning":return o(j,{className:"jkl-toast__icon"});default:return null}};function p({className:m,state:u,...f}){var j;const p=n(null),{toastProps:k,titleProps:_}=s(f,u,p),v="string"==typeof f.toast.content?f.toast.content:f.toast.content.content,I="string"==typeof f.toast.content?void 0:f.toast.content.title,g=null==(null==(j=f.toast.timer)?void 0:j.timerId),{prefersReducedMotion:N}=r();return e((()=>{N&&"exiting"===f.toast.animation&&u.remove(f.toast.key)}),[N,f.toast.animation,f.toast.key,u]),t("div",{...k,ref:p,className:a("jkl-toast",{"jkl-toast--info":"info"===f.toast.variant,"jkl-toast--error":"error"===f.toast.variant,"jkl-toast--warning":"warning"===f.toast.variant,"jkl-toast--success":"success"===f.toast.variant},m),"data-animation":f.toast.animation,onAnimationEnd:()=>{"exiting"===f.toast.animation&&u.remove(f.toast.key)},children:[o("span",{className:"jkl-toast__progress",children:f.toast.timeout?o(i,{from:f.toast.timeout,isPaused:g,onAnimationEnd:t=>{t.stopPropagation()}}):null}),d(f.toast.variant),t("div",{..._,className:"jkl-toast__content",children:[I&&o("p",{className:"jkl-toast__title",children:I}),o("p",{className:"jkl-toast__message",children:v})]}),o(c,{"data-theme":f.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{u.close(f.toast.key)},children:o(l,{})})]})}export{p as Toast};
 //# sourceMappingURL=Toast.js.map

package/build/es/components/toast/Toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, ~~type~~ ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { ~~CloseIcon~~ } from \"../icon/~~icons/CloseIcon~~.js\";\nimport { ~~ErrorIcon~~ } from \"../icon/icons/~~ErrorIcon~~.js\";\nimport { ~~InfoIcon~~ } from \"../icon/icons/~~InfoIcon~~.js\";\nimport { ~~SuccessIcon~~ } from \"../icon/icons/~~SuccessIcon~~.js\";\nimport { ~~WarningIcon~~ } from \"../icon/icons/~~WarningIcon~~.js\";\nimport { ~~IconButton~~ } from \"../icon~~-button~~/~~IconButton~~.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" \| \"info\" \| \"success\" \| \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({\n className,\n state,\n ...props\n}: ToastProps<T>) {\n ~~let~~ ref = useRef(null);\n ~~let~~ { toastProps, titleProps } = useToast(props, state, ref);\n\n const content =\n typeof props.toast.content === \"string\"\n ? props.toast.content\n : props.toast.content.content;\n const title =\n typeof props.toast.content === \"string\"\n ? undefined\n : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\n \"jkl-toast\",\n {\n \"jkl-toast--info\": props.toast.variant === \"info\",\n \"jkl-toast--error\": props.toast.variant === \"error\",\n \"jkl-toast--warning\": props.toast.variant === \"warning\",\n \"jkl-toast--success\": props.toast.variant === \"success\",\n },\n className,\n )}\n data-animation={props.toast.animation}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === \"exiting\") {\n state.remove(props.toast.key);\n }\n }}\n >\n <span className=\"jkl-toast__progress\">\n {props.toast.timeout ? (\n <Countdown\n from={props.toast.timeout}\n isPaused={isPaused}\n onAnimationEnd={(e) => {\n // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n e.stopPropagation();\n }}\n />\n ) : null}\n </span>\n {getIcon(props.toast.variant)}\n <div {...titleProps} className=\"jkl-toast__content\">\n {title && <p className=\"jkl-toast__title\">{title}</p>}\n <p className=\"jkl-toast__message\">{content}</p>\n </div>\n <IconButton\n data-theme={!props.toast.variant ? undefined : \"light\"}\n aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"uqBAoBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,~~UAEC~~,~~IAAAC~~,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,~~GAElD~~,~~MAAAK,~~EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAa7B,EAAMO,MAAMc,QAAsB,aAAZ,EACnC,aAAW,cACX3B,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}
1	+ {"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" \| \"info\" \| \"success\" \| \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({\n className,\n state,\n ...props\n}: ToastProps<T>) {\n const ref = useRef(null);\n const { toastProps, titleProps } = useToast(props, state, ref);\n\n const content =\n typeof props.toast.content === \"string\"\n ? props.toast.content\n : props.toast.content.content;\n const title =\n typeof props.toast.content === \"string\"\n ? undefined\n : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\n \"jkl-toast\",\n {\n \"jkl-toast--info\": props.toast.variant === \"info\",\n \"jkl-toast--error\": props.toast.variant === \"error\",\n \"jkl-toast--warning\": props.toast.variant === \"warning\",\n \"jkl-toast--success\": props.toast.variant === \"success\",\n },\n className,\n )}\n data-animation={props.toast.animation}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === \"exiting\") {\n state.remove(props.toast.key);\n }\n }}\n >\n <span className=\"jkl-toast__progress\">\n {props.toast.timeout ? (\n <Countdown\n from={props.toast.timeout}\n isPaused={isPaused}\n onAnimationEnd={(e) => {\n // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n e.stopPropagation();\n }}\n />\n ) : null}\n </span>\n {getIcon(props.toast.variant)}\n <div {...titleProps} className=\"jkl-toast__content\">\n {title && <p className=\"jkl-toast__title\">{title}</p>}\n <p className=\"jkl-toast__message\">{content}</p>\n </div>\n <IconButton\n data-theme={!props.toast.variant ? undefined : \"light\"}\n aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"uqBAoBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,UAEGC,MAAAA,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAEpDK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAa7B,EAAMO,MAAMc,QAAsB,aAAZ,EACnC,aAAW,cACX3B,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}

package/build/es/components/toast/ToastRegion.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{useToastRegion as e}from"@react-aria/toast";import{useToastQueue as s}from"@react-stately/toast";import{c as o}from"../../../clsx-BeLtu-UY.js";import a from"react";import r from"react-dom";import{Toast as i}from"./Toast.js";function l({placement:s,state:r,...l}){let m=a.useRef(null),{regionProps:n}=e(l,r,m);return t("div",{className:o("jkl","jkl-toast-region",{"jkl-toast-region--left":"left"===s}),children:t("div",{...n,ref:m,className:"jkl-toast-region__toasts",children:[...r.visibleToasts].reverse().map((e=>t(i,{toast:e,state:r},e.key)))})})}function m({queue:e,placement:o}){const a=s(e);return a.visibleToasts.length>0?r.createPortal(t(l,{state:a,placement:o}),document.body):null}export{m as ToastRegion};
+import{jsx as t}from"react/jsx-runtime";import{useToastRegion as e}from"@react-aria/toast";import{useToastQueue as s}from"@react-stately/toast";import{c as o}from"../../../clsx-BeLtu-UY.js";import a from"react";import r from"react-dom";import{Toast as i}from"./Toast.js";function n({placement:s,state:r,...n}){const l=a.useRef(null),{regionProps:m}=e(n,r,l);return t("div",{className:o("jkl","jkl-toast-region",{"jkl-toast-region--left":"left"===s}),children:t("div",{...m,ref:l,className:"jkl-toast-region__toasts",children:[...r.visibleToasts].reverse().map((e=>t(i,{toast:e,state:r},e.key)))})})}function l({queue:e,placement:o}){const a=s(e);return a.visibleToasts.length>0?r.createPortal(t(n,{state:a,placement:o}),document.body):null}export{l as ToastRegion};
 //# sourceMappingURL=ToastRegion.js.map

package/build/es/components/toast/ToastRegion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToastRegion.js","sources":["../../../../src/components/toast/ToastRegion.tsx"],"sourcesContent":["import { type AriaToastRegionProps, useToastRegion } from \"@react-aria/toast\";\nimport {\n ~~useToastQueue~~,\n type ToastState,\n ~~ToastQueue~~,\n} from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Toast } from \"./Toast.js\";\nimport { ToastContent } from \"./types.js\";\n\ninterface ToastRegionProps<T extends ToastContent = ToastContent>\n extends AriaToastRegionProps {\n placement: \"center\" \| \"left\";\n state: ToastState<T>;\n}\n\nfunction Region<T extends ToastContent>({\n placement,\n state,\n ...props\n}: ToastRegionProps<T>) {\n ~~let~~ ref = React.useRef(null);\n ~~let~~ { regionProps } = useToastRegion(props, state, ref);\n\n return (\n <div\n className={clsx(\"jkl\", \"jkl-toast-region\", {\n \"jkl-toast-region--left\": placement === \"left\",\n })}\n >\n <div\n {...regionProps}\n ref={ref}\n className=\"jkl-toast-region__toasts\"\n >\n {[...state.visibleToasts].reverse().map((toast) => (\n <Toast key={toast.key} toast={toast} state={state} />\n ))}\n </div>\n </div>\n );\n}\n\nexport function ToastRegion({\n queue,\n placement,\n}: {\n queue: ToastQueue<ToastContent>;\n placement: \"center\" \| \"left\";\n}) {\n const state = useToastQueue<ToastContent>(queue);\n return state.visibleToasts.length > 0\n ? ReactDOM.createPortal(\n <Region state={state} placement={placement} />,\n document.body,\n )\n : null;\n}\n"],"names":["Region","placement","state","props","ref","React","useRef","regionProps","useToastRegion","jsx","className","clsx","children","visibleToasts","reverse","map","toast","Toast","key","ToastRegion","queue","useToastQueue","length","ReactDOM","createPortal","document","body"],"mappings":"+QAkBA,SAASA,GACLC,UAAAA,EACAC,MAAAA,KACGC,~~IAEC~~,~~IAAAC~~,EAAMC,EAAMC,OAAO,OACjBC,YAAAA,GAAgBC,EAAeL,EAAOD,EAAOE,~~GAG/C~~,OAAAK,EAAC,MAAA,CACGC,UAAWC,EAAK,MAAO,mBAAoB,CACvC,yBAAwC,SAAdV,IAG9BW,SAAAH,EAAC,MAAA,IACOF,EACJH,IAAAA,EACAM,UAAU,2BAETE,aAAIV,EAAMW,eAAeC,UAAUC,KAAKC,KACpCC,EAAsB,CAAAD,MAAAA,EAAcd,MAAAA,GAAzBc,EAAME,UAKtC,CAEO,SAASC,GACZC,MAAAA,EACAnB,UAAAA,IAKMC,MAAAA,EAAQmB,EAA4BD,GAC1C,OAAOlB,EAAMW,cAAcS,OAAS,EAC9BC,EAASC,aACLf,EAACT,EAAO,CAAAE,MAAAA,EAAcD,UAAAA,IACtBwB,SAASC,MAEb,IACV"}
1	+ {"version":3,"file":"ToastRegion.js","sources":["../../../../src/components/toast/ToastRegion.tsx"],"sourcesContent":["import { type AriaToastRegionProps, useToastRegion } from \"@react-aria/toast\";\nimport {\n type ToastQueue,\n type ToastState,\n useToastQueue,\n} from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Toast } from \"./Toast.js\";\nimport type { ToastContent } from \"./types.js\";\n\ninterface ToastRegionProps<T extends ToastContent = ToastContent>\n extends AriaToastRegionProps {\n placement: \"center\" \| \"left\";\n state: ToastState<T>;\n}\n\nfunction Region<T extends ToastContent>({\n placement,\n state,\n ...props\n}: ToastRegionProps<T>) {\n const ref = React.useRef(null);\n const { regionProps } = useToastRegion(props, state, ref);\n\n return (\n <div\n className={clsx(\"jkl\", \"jkl-toast-region\", {\n \"jkl-toast-region--left\": placement === \"left\",\n })}\n >\n <div\n {...regionProps}\n ref={ref}\n className=\"jkl-toast-region__toasts\"\n >\n {[...state.visibleToasts].reverse().map((toast) => (\n <Toast key={toast.key} toast={toast} state={state} />\n ))}\n </div>\n </div>\n );\n}\n\nexport function ToastRegion({\n queue,\n placement,\n}: {\n queue: ToastQueue<ToastContent>;\n placement: \"center\" \| \"left\";\n}) {\n const state = useToastQueue<ToastContent>(queue);\n return state.visibleToasts.length > 0\n ? ReactDOM.createPortal(\n <Region state={state} placement={placement} />,\n document.body,\n )\n : null;\n}\n"],"names":["Region","placement","state","props","ref","React","useRef","regionProps","useToastRegion","jsx","className","clsx","children","visibleToasts","reverse","map","toast","Toast","key","ToastRegion","queue","useToastQueue","length","ReactDOM","createPortal","document","body"],"mappings":"+QAkBA,SAASA,GACLC,UAAAA,EACAC,MAAAA,KACGC,IAEG,MAAAC,EAAMC,EAAMC,OAAO,OACjBC,YAAAA,GAAgBC,EAAeL,EAAOD,EAAOE,GAGjD,OAAAK,EAAC,MAAA,CACGC,UAAWC,EAAK,MAAO,mBAAoB,CACvC,yBAAwC,SAAdV,IAG9BW,SAAAH,EAAC,MAAA,IACOF,EACJH,IAAAA,EACAM,UAAU,2BAETE,aAAIV,EAAMW,eAAeC,UAAUC,KAAKC,KACpCC,EAAsB,CAAAD,MAAAA,EAAcd,MAAAA,GAAzBc,EAAME,UAKtC,CAEO,SAASC,GACZC,MAAAA,EACAnB,UAAAA,IAKMC,MAAAA,EAAQmB,EAA4BD,GAC1C,OAAOlB,EAAMW,cAAcS,OAAS,EAC9BC,EAASC,aACLf,EAACT,EAAO,CAAAE,MAAAA,EAAcD,UAAAA,IACtBwB,SAASC,MAEb,IACV"}

package/build/es/components/toast/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 export { ToastProvider, useToast } from './toastContext.js';
-export { type ToastContent, type ToastOptions, type ToastContext, } from './types.js';
+export type { ToastContent, ToastOptions, ToastContext, } from './types.js';

package/build/es/components/toast/stories/Toast.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{Toast as n}from"../Toast.js";const t={title:"Komponenter/Toast",component:n,tags:["autodocs"],argTypes:{toast:{description:"Obs: Dette er en forenklet versjon av 'toast'-propen for å vise variantene.",options:["Info","Error","Success","Warning","Ingen"],mapping:{Info:{content:"Hei verden",key:"",variant:"info"},Error:{content:"Hei verden",key:"",variant:"error"},Success:{content:"Hei verden",key:"",variant:"success"},Warning:{content:"Hei verden",key:"",variant:"warning"},Ingen:{content:"Hei verden",key:""}}}},args:{state:{add:()=>"e",close:()=>"",pauseAll:()=>"",remove:()=>"",resumeAll:()=>"",visibleToasts:[{content:"Hei verden",key:Date.now().toString()}]},toast:{content:"Hei verden",key:"",variant:"info"}}},r={render:t=>e(n,{...t})};export{r as Toast,t as default};
+import{jsx as e}from"react/jsx-runtime";import"react";import{Toast as n}from"../Toast.js";const t={title:"Komponenter/Toast",component:n,tags:["autodocs"],argTypes:{toast:{description:"Obs: Dette er en forenklet versjon av 'toast'-propen for å vise variantene.",options:["Info","Error","Success","Warning","Ingen"],mapping:{Info:{content:"Hei verden",key:"",variant:"info"},Error:{content:"Hei verden",key:"",variant:"error"},Success:{content:"Hei verden",key:"",variant:"success"},Warning:{content:"Hei verden",key:"",variant:"warning"},Ingen:{content:"Hei verden",key:""}}}},args:{state:{add:()=>"e",close:()=>"",pauseAll:()=>"",remove:()=>"",resumeAll:()=>"",visibleToasts:[{content:"Hei verden",key:Date.now().toString()}]},toast:{content:"Hei verden",key:"",variant:"info"}}},r={render:t=>e(n,{...t})};export{r as Toast,t as default};
 //# sourceMappingURL=Toast.stories.js.map

package/build/es/components/toast/stories/Toast.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.stories.js","sources":["../../../../../src/components/toast/stories/Toast.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Toast as ToastComponent } from \"../Toast.js\";\n\nconst meta = {\n title: \"Komponenter/Toast\",\n component: ToastComponent,\n tags: [\"autodocs\"],\n argTypes: {\n toast: {\n description:\n \"Obs: Dette er en forenklet versjon av 'toast'-propen for å vise variantene.\",\n options: [\"Info\", \"Error\", \"Success\", \"Warning\", \"Ingen\"],\n mapping: {\n Info: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"info\",\n },\n Error: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"error\",\n },\n Success: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"success\",\n },\n Warning: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"warning\",\n },\n Ingen: {\n content: \"Hei verden\",\n key: \"\",\n },\n },\n },\n },\n args: {\n state: {\n add: () => \"e\",\n close: () => \"\",\n pauseAll: () => \"\",\n remove: () => \"\",\n resumeAll: () => \"\",\n visibleToasts: [\n { content: \"Hei verden\", key: Date.now().toString() },\n ],\n },\n toast: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"info\",\n },\n },\n} satisfies Meta<typeof ToastComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Toast: Story = {\n render: (args) => <ToastComponent {...args} />,\n};\n"],"names":["meta","title","component","ToastComponent","tags","argTypes","toast","description","options","mapping","Info","content","key","variant","Error","Success","Warning","Ingen","args","state","add","close","pauseAll","remove","resumeAll","visibleToasts","Date","now","toString","Toast","render","jsx"],"mappings":"~~4EAKA~~,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EACXC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CACHC,YACI,8EACJC,QAAS,CAAC,OAAQ,QAAS,UAAW,UAAW,SACjDC,QAAS,CACLC,KAAM,CACFC,QAAS,aACTC,IAAK,GACLC,QAAS,QAEbC,MAAO,CACHH,QAAS,aACTC,IAAK,GACLC,QAAS,SAEbE,QAAS,CACLJ,QAAS,aACTC,IAAK,GACLC,QAAS,WAEbG,QAAS,CACLL,QAAS,aACTC,IAAK,GACLC,QAAS,WAEbI,MAAO,CACHN,QAAS,aACTC,IAAK,OAKrBM,KAAM,CACFC,MAAO,CACHC,IAAK,IAAM,IACXC,MAAO,IAAM,GACbC,SAAU,IAAM,GAChBC,OAAQ,IAAM,GACdC,UAAW,IAAM,GACjBC,cAAe,CACX,CAAEd,QAAS,aAAcC,IAAKc,KAAKC,MAAMC,cAGjDtB,MAAO,CACHK,QAAS,aACTC,IAAK,GACLC,QAAS,UAQRgB,EAAe,CACxBC,OAASZ,GAAUa,EAAA5B,EAAA,IAAmBe"}
1	+ {"version":3,"file":"Toast.stories.js","sources":["../../../../../src/components/toast/stories/Toast.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Toast as ToastComponent } from \"../Toast.js\";\n\nconst meta = {\n title: \"Komponenter/Toast\",\n component: ToastComponent,\n tags: [\"autodocs\"],\n argTypes: {\n toast: {\n description:\n \"Obs: Dette er en forenklet versjon av 'toast'-propen for å vise variantene.\",\n options: [\"Info\", \"Error\", \"Success\", \"Warning\", \"Ingen\"],\n mapping: {\n Info: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"info\",\n },\n Error: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"error\",\n },\n Success: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"success\",\n },\n Warning: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"warning\",\n },\n Ingen: {\n content: \"Hei verden\",\n key: \"\",\n },\n },\n },\n },\n args: {\n state: {\n add: () => \"e\",\n close: () => \"\",\n pauseAll: () => \"\",\n remove: () => \"\",\n resumeAll: () => \"\",\n visibleToasts: [\n { content: \"Hei verden\", key: Date.now().toString() },\n ],\n },\n toast: {\n content: \"Hei verden\",\n key: \"\",\n variant: \"info\",\n },\n },\n} satisfies Meta<typeof ToastComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Toast: Story = {\n render: (args) => <ToastComponent {...args} />,\n};\n"],"names":["meta","title","component","ToastComponent","tags","argTypes","toast","description","options","mapping","Info","content","key","variant","Error","Success","Warning","Ingen","args","state","add","close","pauseAll","remove","resumeAll","visibleToasts","Date","now","toString","Toast","render","jsx"],"mappings":"0FAKA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EACXC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CACHC,YACI,8EACJC,QAAS,CAAC,OAAQ,QAAS,UAAW,UAAW,SACjDC,QAAS,CACLC,KAAM,CACFC,QAAS,aACTC,IAAK,GACLC,QAAS,QAEbC,MAAO,CACHH,QAAS,aACTC,IAAK,GACLC,QAAS,SAEbE,QAAS,CACLJ,QAAS,aACTC,IAAK,GACLC,QAAS,WAEbG,QAAS,CACLL,QAAS,aACTC,IAAK,GACLC,QAAS,WAEbI,MAAO,CACHN,QAAS,aACTC,IAAK,OAKrBM,KAAM,CACFC,MAAO,CACHC,IAAK,IAAM,IACXC,MAAO,IAAM,GACbC,SAAU,IAAM,GAChBC,OAAQ,IAAM,GACdC,UAAW,IAAM,GACjBC,cAAe,CACX,CAAEd,QAAS,aAAcC,IAAKc,KAAKC,MAAMC,cAGjDtB,MAAO,CACHK,QAAS,aACTC,IAAK,GACLC,QAAS,UAQRgB,EAAe,CACxBC,OAASZ,GAAUa,EAAA5B,EAAA,IAAmBe"}

package/build/es/components/toast/toastContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toastContext.js","sources":["../../../../src/components/toast/toastContext.tsx"],"sourcesContent":["import { ToastQueue } from \"@react-stately/toast\";\nimport React, { createContext, useContext, useState, type FC } from \"react\";\nimport { ToastRegion } from \"./ToastRegion.js\";\nimport {\n ToastContent,\n ToastContext,\n ToastContextProviderProps,\n ToastOptions,\n} from \"./types.js\";\n\nconst context = createContext<ToastContext>({\n add: () => {\n return \"missing-provider\";\n },\n close: () => {},\n});\n\nexport const useToast = (): ToastContext => useContext(context);\n\nexport const ToastProvider: FC<ToastContextProviderProps> = ({\n children,\n maxVisibleToasts = 5,\n placement = \"center\",\n}) => {\n const [queue] = useState(\n new ToastQueue<ToastContent>({\n maxVisibleToasts,\n hasExitAnimation: true,\n }),\n );\n\n return (\n <context.Provider\n value={{\n close: queue.close.bind(queue),\n add: (toast: ToastContent, options?: ToastOptions) => {\n let timeout: number \| undefined = 5000;\n\n if (typeof options?.timeout === \"number\") {\n timeout = options.timeout as number;\n } else if (\n options?.timeout === null \|\|\n options?.timeout === \"off\"\n ) {\n timeout = undefined;\n }\n\n return queue.add(toast, {\n ...options,\n timeout,\n });\n },\n }}\n >\n {children}\n <ToastRegion queue={queue} placement={placement} />\n </context.Provider>\n );\n};\n"],"names":["context","createContext","add","close","useToast","useContext","ToastProvider","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","bind","toast","options","timeout","jsx","ToastRegion"],"mappings":"uNAUA,MAAMA,EAAUC,EAA4B,CACxCC,IAAK,IACM,mBAEXC,MAAO,SAGEC,EAAW,IAAoBC,EAAWL,GAE1CM,EAA+C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EACZ,IAAIC,EAAyB,CACzBJ,iBAAAA,EACAK,kBAAkB,KAKtB,OAAAC,EAACd,EAAQe,SAAR,CACGC,MAAO,CACHb,MAAOO,EAAMP,MAAMc,KAAKP,GACxBR,IAAK,CAACgB,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SAEG,QAArB,MAAAD,OAAA,EAAAA,EAASC,UACY,SAArB,MAAAD,OAAA,EAAAA,EAASC,YAECA,OAAA,GAGPV,EAAMR,IAAIgB,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRb,SAAA,CAAAA,EACDc,EAACC,EAAY,CAAAZ,MAAAA,EAAcD,UAAAA,MAAsB"}
1	+ {"version":3,"file":"toastContext.js","sources":["../../../../src/components/toast/toastContext.tsx"],"sourcesContent":["import { ToastQueue } from \"@react-stately/toast\";\nimport React, { createContext, useContext, useState, type FC } from \"react\";\nimport { ToastRegion } from \"./ToastRegion.js\";\nimport type {\n ToastContent,\n ToastContext,\n ToastContextProviderProps,\n ToastOptions,\n} from \"./types.js\";\n\nconst context = createContext<ToastContext>({\n add: () => {\n return \"missing-provider\";\n },\n close: () => {},\n});\n\nexport const useToast = (): ToastContext => useContext(context);\n\nexport const ToastProvider: FC<ToastContextProviderProps> = ({\n children,\n maxVisibleToasts = 5,\n placement = \"center\",\n}) => {\n const [queue] = useState(\n new ToastQueue<ToastContent>({\n maxVisibleToasts,\n hasExitAnimation: true,\n }),\n );\n\n return (\n <context.Provider\n value={{\n close: queue.close.bind(queue),\n add: (toast: ToastContent, options?: ToastOptions) => {\n let timeout: number \| undefined = 5000;\n\n if (typeof options?.timeout === \"number\") {\n timeout = options.timeout as number;\n } else if (\n options?.timeout === null \|\|\n options?.timeout === \"off\"\n ) {\n timeout = undefined;\n }\n\n return queue.add(toast, {\n ...options,\n timeout,\n });\n },\n }}\n >\n {children}\n <ToastRegion queue={queue} placement={placement} />\n </context.Provider>\n );\n};\n"],"names":["context","createContext","add","close","useToast","useContext","ToastProvider","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","bind","toast","options","timeout","jsx","ToastRegion"],"mappings":"uNAUA,MAAMA,EAAUC,EAA4B,CACxCC,IAAK,IACM,mBAEXC,MAAO,SAGEC,EAAW,IAAoBC,EAAWL,GAE1CM,EAA+C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EACZ,IAAIC,EAAyB,CACzBJ,iBAAAA,EACAK,kBAAkB,KAKtB,OAAAC,EAACd,EAAQe,SAAR,CACGC,MAAO,CACHb,MAAOO,EAAMP,MAAMc,KAAKP,GACxBR,IAAK,CAACgB,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SAEG,QAArB,MAAAD,OAAA,EAAAA,EAASC,UACY,SAArB,MAAAD,OAAA,EAAAA,EAASC,YAECA,OAAA,GAGPV,EAAMR,IAAIgB,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRb,SAAA,CAAAA,EACDc,EAACC,EAAY,CAAAZ,MAAAA,EAAcD,UAAAA,MAAsB"}

package/build/es/components/toggle-switch/ToggleSlider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSlider.js","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n FC,\n Fragment,\n MouseEventHandler,\n useRef,\n useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { ToggleChangeHandler, ToggleSliderProps } from \"./types.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\nexport const ToggleSlider: FC<ToggleSliderProps> = ({\n children,\n labels,\n className = \"\",\n onToggle,\n defaultValue,\n hideLegend = false,\n density,\n ...rest\n}) => {\n const [currentLabel, setCurrentLabel] = useState(defaultValue \|\| labels[0]);\n const id = useId(\"jkl-toggle-slider\");\n const legendId = useId(\"jkl-toggle-slider-legend\");\n const activeRef = useRef<HTMLLabelElement>(null);\n\n const shouldTransform = currentLabel === labels[1];\n const pillStyles = usePillStyles(activeRef, shouldTransform, [density]);\n\n const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n setCurrentLabel(pressed ? labels[1] : labels[0]);\n onToggle(pressed ? labels[1] : labels[0]);\n };\n\n const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.currentTarget;\n setCurrentLabel(value);\n onToggle(value);\n };\n\n const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({\n onClick: handleClick,\n onChange: handleChange,\n });\n const { onClick, ...swipeHandlers } = gestureHandlers;\n\n if (process.env.NODE_ENV !== \"production\") {\n console.error(\n \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n );\n }\n\n return (\n <fieldset\n {...rest}\n className={clsx(\"jkl-toggle-slider\", className)}\n aria-labelledby={legendId}\n data-testid=\"jkl-toggle-slider\"\n data-density={density}\n >\n <div\n id={legendId}\n className={clsx(\"jkl-toggle-slider__legend\", {\n \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n })}\n >\n {children}\n </div>\n <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n {labels.map((label) => (\n <Fragment key={label}>\n <input\n className=\"jkl-toggle-slider__input\"\n type=\"radio\"\n value={label}\n checked={label === currentLabel}\n name={id}\n id={`${label}-${id}`}\n onClick={onClick}\n onChange={() => {}}\n />\n <label\n className={clsx(\"jkl-toggle-slider__label\", {\n \"jkl-toggle-slider__label--selected\":\n label === currentLabel,\n })}\n ref={label === currentLabel ? activeRef : undefined}\n htmlFor={`${label}-${id}`}\n >\n {label}\n </label>\n </Fragment>\n ))}\n <span\n className=\"jkl-toggle-slider__pill\"\n style={pillStyles}\n aria-hidden\n />\n </div>\n </fieldset>\n );\n};\n"],"names":["ToggleSlider","children","labels","className","onToggle","defaultValue","hideLegend","density","rest","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"kVAaO,MAAMA,EAAsC,EAC/CC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,EAASN,GAAgBH,EAAO,IAClEU,EAAKC,EAAM,qBACXC,EAAWD,EAAM,4BACjBE,EAAYC,EAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,EAAgC,CACxDC,QAPsDC,IAChD,MAAEC,MAAAA,GAAUD,EAAME,cACxBf,EAAgBc,GAChBpB,EAASoB,EAAK,EAKdE,SAbmD,CAACC,EAAGC,KACvDlB,EAAgBkB,EAAU1B,EAAO,GAAKA,EAAO,IAC7CE,EAASwB,EAAU1B,EAAO,GAAKA,EAAO,GAAE,KAapCoB,QAAAA,KAAYO,GAAkBT,EAElC,MAAyB,eAAzBU,QAAQC,IAAIC,UACJC,QAAAC,MACJ,iHAKJC,EAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,EAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAACK,EACG,CAAAvC,SAAA,CAAAoC,EAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAC,QAAA,CACGlC,UAAWiC,EAAK,2BAA4B,CACxC,qCACIG,IAAU9B,IAElBmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAnBMA,KAuBnBF,EAAC,OAAA,CACGlC,UAAU,0BACV2C,MAAO5B,EACP,eAAW,SAEnB"}
1	+ {"version":3,"file":"ToggleSlider.js","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type FC,\n Fragment,\n type MouseEventHandler,\n useRef,\n useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport type { ToggleChangeHandler, ToggleSliderProps } from \"./types.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\nexport const ToggleSlider: FC<ToggleSliderProps> = ({\n children,\n labels,\n className = \"\",\n onToggle,\n defaultValue,\n hideLegend = false,\n density,\n ...rest\n}) => {\n const [currentLabel, setCurrentLabel] = useState(defaultValue \|\| labels[0]);\n const id = useId(\"jkl-toggle-slider\");\n const legendId = useId(\"jkl-toggle-slider-legend\");\n const activeRef = useRef<HTMLLabelElement>(null);\n\n const shouldTransform = currentLabel === labels[1];\n const pillStyles = usePillStyles(activeRef, shouldTransform, [density]);\n\n const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n setCurrentLabel(pressed ? labels[1] : labels[0]);\n onToggle(pressed ? labels[1] : labels[0]);\n };\n\n const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.currentTarget;\n setCurrentLabel(value);\n onToggle(value);\n };\n\n const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({\n onClick: handleClick,\n onChange: handleChange,\n });\n const { onClick, ...swipeHandlers } = gestureHandlers;\n\n if (process.env.NODE_ENV !== \"production\") {\n console.error(\n \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n );\n }\n\n return (\n <fieldset\n {...rest}\n className={clsx(\"jkl-toggle-slider\", className)}\n aria-labelledby={legendId}\n data-testid=\"jkl-toggle-slider\"\n data-density={density}\n >\n <div\n id={legendId}\n className={clsx(\"jkl-toggle-slider__legend\", {\n \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n })}\n >\n {children}\n </div>\n <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n {labels.map((label) => (\n <Fragment key={label}>\n <input\n className=\"jkl-toggle-slider__input\"\n type=\"radio\"\n value={label}\n checked={label === currentLabel}\n name={id}\n id={`${label}-${id}`}\n onClick={onClick}\n onChange={() => {}}\n />\n <label\n className={clsx(\"jkl-toggle-slider__label\", {\n \"jkl-toggle-slider__label--selected\":\n label === currentLabel,\n })}\n ref={label === currentLabel ? activeRef : undefined}\n htmlFor={`${label}-${id}`}\n >\n {label}\n </label>\n </Fragment>\n ))}\n <span\n className=\"jkl-toggle-slider__pill\"\n style={pillStyles}\n aria-hidden\n />\n </div>\n </fieldset>\n );\n};\n"],"names":["ToggleSlider","children","labels","className","onToggle","defaultValue","hideLegend","density","rest","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"kVAaO,MAAMA,EAAsC,EAC/CC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,EAASN,GAAgBH,EAAO,IAClEU,EAAKC,EAAM,qBACXC,EAAWD,EAAM,4BACjBE,EAAYC,EAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,EAAgC,CACxDC,QAPsDC,IAChD,MAAEC,MAAAA,GAAUD,EAAME,cACxBf,EAAgBc,GAChBpB,EAASoB,EAAK,EAKdE,SAbmD,CAACC,EAAGC,KACvDlB,EAAgBkB,EAAU1B,EAAO,GAAKA,EAAO,IAC7CE,EAASwB,EAAU1B,EAAO,GAAKA,EAAO,GAAE,KAapCoB,QAAAA,KAAYO,GAAkBT,EAElC,MAAyB,eAAzBU,QAAQC,IAAIC,UACJC,QAAAC,MACJ,iHAKJC,EAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,EAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAACK,EACG,CAAAvC,SAAA,CAAAoC,EAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAC,QAAA,CACGlC,UAAWiC,EAAK,2BAA4B,CACxC,qCACIG,IAAU9B,IAElBmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAnBMA,KAuBnBF,EAAC,OAAA,CACGlC,UAAU,0BACV2C,MAAO5B,EACP,eAAW,SAEnB"}

package/build/es/components/toggle-switch/ToggleSwitch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSwitch.js","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type MouseEventHandler, forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { ToggleChangeHandler, ToggleSwitchProps } from \"./types.js\";\n\nexport const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(\n (\n {\n \"aria-pressed\": ariaPressed = false,\n children,\n className,\n density,\n id,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const uid = useId(id \|\| \"jkl-toggle-switch\", { generateSuffix: !id });\n const [pressed, setPressed] = React.useState(ariaPressed);\n React.useEffect(() => {\n setPressed(ariaPressed);\n }, [ariaPressed]);\n\n const {\n onClick,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n ...buttonProps\n } = rest;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n setPressed(!pressed);\n onChange?.(event, !pressed);\n onClick?.(event);\n };\n\n const handleChange: ToggleChangeHandler<HTMLButtonElement> = (\n event,\n toggleTo,\n ) => {\n if (toggleTo !== pressed) {\n setPressed(toggleTo);\n onChange?.(event, toggleTo);\n }\n };\n\n const { gestureHandlers } = useSwipeGesture({\n onClick: handleClick,\n onChange: handleChange,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n });\n\n return (\n <button\n className={clsx(\"jkl-toggle-switch\", className)}\n id={uid}\n ref={ref}\n aria-pressed={pressed}\n data-density={density}\n {...buttonProps}\n {...(buttonProps.disabled ? {} : gestureHandlers)}\n >\n {children}\n <div aria-hidden className=\"jkl-toggle-switch-widget\">\n <div className=\"jkl-toggle-switch-widget__slider\">\n <div className=\"jkl-toggle-switch-widget__knob\" />\n <CheckIcon\n variant=\"small\"\n bold\n className=\"jkl-toggle-switch-widget__indicator\"\n />\n </div>\n </div>\n </button>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n"],"names":["ToggleSwitch","forwardRef","ariaPressed","children","className","density","id","onChange","rest","ref","uid","useId","generateSuffix","pressed","setPressed","React","useState","useEffect","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","buttonProps","gestureHandlers","useSwipeGesture","event","toggleTo","jsxs","clsx","disabled","jsx","CheckIcon","variant","bold","displayName"],"mappings":"iUAOO,MAAMA,EAAeC,GACxB,EAEQ,eAAgBC,GAAc,EAC9BC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,GAAAA,EACAC,SAAAA,KACGC,GAEPC,KAEM,MAAAC,EAAMC,EAAML,GAAM,oBAAqB,CAAEM,gBAAiBN,KACzDO,EAASC,GAAcC,EAAMC,SAASd,GAC7Ca,EAAME,WAAU,KACZH,EAAWZ,EAAW,GACvB,CAACA,IAEE,MACFgB,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,KACGC,GACHf,GAkBIgB,gBAAAA,GAAoBC,EAAgB,CACxCP,QAjBuDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,EAAAA,EAeVnB,SAZyD,CACzDmB,EACAC,KAEIA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GAAAA,EAOtBR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAC,SAAA,CACGxB,UAAWyB,EAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAA,MAAA,CAAI3B,UAAU,mCACf2B,EAACC,EAAA,CACGC,QAAQ,QACRC,MAAI,EACJ9B,UAAU,+CAGtB,IAKhBJ,EAAamC,YAAc"}
1	+ {"version":3,"file":"ToggleSwitch.js","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type MouseEventHandler, forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport type { ToggleChangeHandler, ToggleSwitchProps } from \"./types.js\";\n\nexport const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(\n (\n {\n \"aria-pressed\": ariaPressed = false,\n children,\n className,\n density,\n id,\n onChange,\n ...rest\n },\n ref,\n ) => {\n const uid = useId(id \|\| \"jkl-toggle-switch\", { generateSuffix: !id });\n const [pressed, setPressed] = React.useState(ariaPressed);\n React.useEffect(() => {\n setPressed(ariaPressed);\n }, [ariaPressed]);\n\n const {\n onClick,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n ...buttonProps\n } = rest;\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n setPressed(!pressed);\n onChange?.(event, !pressed);\n onClick?.(event);\n };\n\n const handleChange: ToggleChangeHandler<HTMLButtonElement> = (\n event,\n toggleTo,\n ) => {\n if (toggleTo !== pressed) {\n setPressed(toggleTo);\n onChange?.(event, toggleTo);\n }\n };\n\n const { gestureHandlers } = useSwipeGesture({\n onClick: handleClick,\n onChange: handleChange,\n onPointerCancel,\n onPointerDown,\n onPointerMove,\n onPointerUp,\n });\n\n return (\n <button\n className={clsx(\"jkl-toggle-switch\", className)}\n id={uid}\n ref={ref}\n aria-pressed={pressed}\n data-density={density}\n {...buttonProps}\n {...(buttonProps.disabled ? {} : gestureHandlers)}\n >\n {children}\n <div aria-hidden className=\"jkl-toggle-switch-widget\">\n <div className=\"jkl-toggle-switch-widget__slider\">\n <div className=\"jkl-toggle-switch-widget__knob\" />\n <CheckIcon\n variant=\"small\"\n bold\n className=\"jkl-toggle-switch-widget__indicator\"\n />\n </div>\n </div>\n </button>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n"],"names":["ToggleSwitch","forwardRef","ariaPressed","children","className","density","id","onChange","rest","ref","uid","useId","generateSuffix","pressed","setPressed","React","useState","useEffect","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","buttonProps","gestureHandlers","useSwipeGesture","event","toggleTo","jsxs","clsx","disabled","jsx","CheckIcon","variant","bold","displayName"],"mappings":"iUAOO,MAAMA,EAAeC,GACxB,EAEQ,eAAgBC,GAAc,EAC9BC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,GAAAA,EACAC,SAAAA,KACGC,GAEPC,KAEM,MAAAC,EAAMC,EAAML,GAAM,oBAAqB,CAAEM,gBAAiBN,KACzDO,EAASC,GAAcC,EAAMC,SAASd,GAC7Ca,EAAME,WAAU,KACZH,EAAWZ,EAAW,GACvB,CAACA,IAEE,MACFgB,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,KACGC,GACHf,GAkBIgB,gBAAAA,GAAoBC,EAAgB,CACxCP,QAjBuDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,EAAAA,EAeVnB,SAZyD,CACzDmB,EACAC,KAEIA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GAAAA,EAOtBR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAC,SAAA,CACGxB,UAAWyB,EAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAA,MAAA,CAAI3B,UAAU,mCACf2B,EAACC,EAAA,CACGC,QAAQ,QACRC,MAAI,EACJ9B,UAAU,+CAGtB,IAKhBJ,EAAamC,YAAc"}

package/build/es/components/toggle-switch/stories/ToggleSwitch.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSwitch.stories.js","sources":["../../../../../src/components/toggle-switch/stories/ToggleSwitch.stories.tsx"],"sourcesContent":["import { Meta, StoryObj } from \"@storybook/react\";\nimport { ToggleSwitch as ToggleSwitchComponent } from \"../ToggleSwitch.js\";\nimport \"../styles/_index.scss\";\n\nconst meta = {\n title: \"Komponenter/ToggleSwitch\",\n component: ToggleSwitchComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof ToggleSwitchComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const ToggleSwitch: Story = {\n args: {\n children: \"Mørk modus\",\n },\n};\n"],"names":["meta","title","component","ToggleSwitchComponent","parameters","layout","tags","ToggleSwitch","args","children"],"mappings":"kDAIA,MAAMA,EAAO,CACTC,MAAO,2BACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAsB,CAC/BC,KAAM,CACFC,SAAU"}
1	+ {"version":3,"file":"ToggleSwitch.stories.js","sources":["../../../../../src/components/toggle-switch/stories/ToggleSwitch.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { ToggleSwitch as ToggleSwitchComponent } from \"../ToggleSwitch.js\";\nimport \"../styles/_index.scss\";\n\nconst meta = {\n title: \"Komponenter/ToggleSwitch\",\n component: ToggleSwitchComponent,\n parameters: {\n layout: \"centered\",\n },\n tags: [\"autodocs\"],\n} satisfies Meta<typeof ToggleSwitchComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const ToggleSwitch: Story = {\n args: {\n children: \"Mørk modus\",\n },\n};\n"],"names":["meta","title","component","ToggleSwitchComponent","parameters","layout","tags","ToggleSwitch","args","children"],"mappings":"kDAIA,MAAMA,EAAO,CACTC,MAAO,2BACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAsB,CAC/BC,KAAM,CACFC,SAAU"}

package/build/es/components/toggle-switch/usePillStyles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useState as e,useCallback as t,useMemo as n,useEffect as r}from"react";const i=(i,s,o)=>{const[u,c]=e(0),[a,l]=e(0),d=t((()=>{if(i.current&&i.current.parentElement){c(i.current.clientWidth);const e=s?i.current.parentElement.clientWidth-i.current.clientWidth:0;l(e)}}),[i,s,...o]),w=n((()=>function(e){let t=!1;return(...n)=>{if(t)return;const r=e(...n);return t=!0,window.setTimeout((()=>{t=!1}),200),r}}(d)),[d]);return r((()=>(d(),typeof window<"u"&&window.addEventListener("resize",w),()=>{typeof window<"u"&&window.removeEventListener("resize",w)})),[d,w]),{width:u,transform:`translateX(${a}px)`}};export{i as usePillStyles};
+import{useState as e,useCallback as t,useMemo as n,useEffect as r}from"react";const i=(i,s,o)=>{const[u,a]=e(0),[c,l]=e(0),d=t((()=>{var e;if(null!=(e=i.current)&&e.parentElement){a(i.current.clientWidth);const e=s?i.current.parentElement.clientWidth-i.current.clientWidth:0;l(e)}}),[i,s,...o]),w=n((()=>function(e){let t=!1;return(...n)=>{if(t)return;const r=e(...n);return t=!0,window.setTimeout((()=>{t=!1}),200),r}}(d)),[d]);return r((()=>(d(),typeof window<"u"&&window.addEventListener("resize",w),()=>{typeof window<"u"&&window.removeEventListener("resize",w)})),[d,w]),{width:u,transform:`translateX(${c}px)`}};export{i as usePillStyles};
 //# sourceMappingURL=usePillStyles.js.map

package/build/es/components/toggle-switch/usePillStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"usePillStyles.js","sources":["../../../../src/components/toggle-switch/usePillStyles.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useMemo, useState } from \"react\";\n\~~n// eslint-disable-next-line @typescript-eslint/no-explicit-any\~~nfunction throttle<R, A extends any[]>(fn: (...args: A) => R) {\n let wait = false;\n\n return (...args: A) => {\n if (wait) return undefined;\n\n const result = fn(...args);\n\n wait = true;\n window.setTimeout(() => {\n wait = false;\n }, 200);\n\n return result;\n };\n}\n\nexport const usePillStyles = (\n ref: RefObject<HTMLLabelElement>,\n shouldTransform: boolean,\n dependencies: unknown[],\n) => {\n const [width, setWidth] = useState(0);\n const [distance, setDistance] = useState(0);\n\n const setStyles = useCallback(() => {\n if (ref.current ~~&& ref.current.~~parentElement) {\n setWidth(ref.current.clientWidth);\n\n const translateDistance = shouldTransform\n ? ref.current.parentElement.clientWidth -\n ref.current.clientWidth\n : 0;\n\n setDistance(translateDistance);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, shouldTransform, ...dependencies]);\n\n const throttledSetStyles = useMemo(() => throttle(setStyles), [setStyles]);\n\n useEffect(() => {\n setStyles();\n typeof window !== \"undefined\" &&\n window.addEventListener(\"resize\", throttledSetStyles);\n return () => {\n typeof window !== \"undefined\" &&\n window.removeEventListener(\"resize\", throttledSetStyles);\n };\n }, [setStyles, throttledSetStyles]);\n\n return {\n width,\n transform: `translateX(${distance}px)`,\n };\n};\n"],"names":["usePillStyles","ref","shouldTransform","dependencies","width","setWidth","useState","distance","setDistance","setStyles","useCallback","current","parentElement","clientWidth","translateDistance","throttledSetStyles","useMemo","fn","wait","args","result","window","setTimeout","throttle","useEffect","addEventListener","removeEventListener","transform"],"mappings":"~~8EAoBO~~,MAAMA,EAAgB,CACzBC,EACAC,EACAC,KAEA,MAAOC,EAAOC,GAAYC,EAAS,IAC5BC,EAAUC,GAAeF,EAAS,GAEnCG,EAAYC,GAAY,~~KAC1B~~,~~GAAIT~~,~~EAAIU~~,~~SAAWV~~,~~EAAIU~~,~~QAAQC~~,cAAe,~~CACjCP~~,EAAAJ,~~EAAIU~~,QAAQE,aAEfC,MAAAA,~~EAAoBZ~~,EACpBD,~~EAAIU~~,QAAQC,cAAcC,~~YAC1BZ~~,~~EAAIU~~,QAAQE,YACZ,~~EAENL~~,~~EAAYM~~,EAChB,IAED,~~CAACb~~,EAAKC,KAAoBC,~~IAEvBY~~,EAAqBC,GAAQ,IAvCvC,SAAsCC,GAClC,IAAIC,GAAO,EAEX,MAAO,IAAIC,KACP,GAAID,EAAa,OAEXE,MAAAA,EAASH,KAAME,GAEd,OAAAD,GAAA,EACPG,OAAOC,YAAW,KACPJ,GAAA,CAAA,GACR,KAEIE,CAAAA,CAEf,CAwB6CG,~~CAASd~~,IAAY,CAACA,IAE/D,~~OAAAe~~,GAAU,~~KACIf~~,~~WACHY~~,OAAW,KACdA,OAAOI,iBAAiB,SAAUV,GAC/B,YACIM,OAAW,KACdA,OAAOK,oBAAoB,SAAUX,EAAkB,IAEhE,~~CAACN~~,~~EAAWM~~,IAER,~~CACHX~~,MAAAA,~~EACAuB~~,UAAW,~~cAAcpB~~,OAAQ"}
1	+ {"version":3,"file":"usePillStyles.js","sources":["../../../../src/components/toggle-switch/usePillStyles.ts"],"sourcesContent":["import {\n type RefObject,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\n\nfunction throttle<R, A extends any[]>(fn: (...args: A) => R) {\n let wait = false;\n\n return (...args: A) => {\n if (wait) return undefined;\n\n const result = fn(...args);\n\n wait = true;\n window.setTimeout(() => {\n wait = false;\n }, 200);\n\n return result;\n };\n}\n\nexport const usePillStyles = (\n ref: RefObject<HTMLLabelElement>,\n shouldTransform: boolean,\n dependencies: unknown[],\n) => {\n const [width, setWidth] = useState(0);\n const [distance, setDistance] = useState(0);\n\n const setStyles = useCallback(() => {\n if (ref.current?.parentElement) {\n setWidth(ref.current.clientWidth);\n\n const translateDistance = shouldTransform\n ? ref.current.parentElement.clientWidth -\n ref.current.clientWidth\n : 0;\n\n setDistance(translateDistance);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [ref, shouldTransform, ...dependencies]);\n\n const throttledSetStyles = useMemo(() => throttle(setStyles), [setStyles]);\n\n useEffect(() => {\n setStyles();\n typeof window !== \"undefined\" &&\n window.addEventListener(\"resize\", throttledSetStyles);\n return () => {\n typeof window !== \"undefined\" &&\n window.removeEventListener(\"resize\", throttledSetStyles);\n };\n }, [setStyles, throttledSetStyles]);\n\n return {\n width,\n transform: `translateX(${distance}px)`,\n };\n};\n"],"names":["usePillStyles","ref","shouldTransform","dependencies","width","setWidth","useState","distance","setDistance","setStyles","useCallback","_a","current","parentElement","clientWidth","translateDistance","throttledSetStyles","useMemo","fn","wait","args","result","window","setTimeout","throttle","useEffect","addEventListener","removeEventListener","transform"],"mappings":"8EAyBO,MAAMA,EAAgB,CACzBC,EACAC,EACAC,KAEA,MAAOC,EAAOC,GAAYC,EAAS,IAC5BC,EAAUC,GAAeF,EAAS,GAEnCG,EAAYC,GAAY,WACtB,GAAA,OAAAC,EAAAV,EAAIW,UAAJD,EAAaE,cAAe,CACnBR,EAAAJ,EAAIW,QAAQE,aAEfC,MAAAA,EAAoBb,EACpBD,EAAIW,QAAQC,cAAcC,YAC1Bb,EAAIW,QAAQE,YACZ,EAENN,EAAYO,EAChB,IAED,CAACd,EAAKC,KAAoBC,IAEvBa,EAAqBC,GAAQ,IAvCvC,SAAsCC,GAClC,IAAIC,GAAO,EAEX,MAAO,IAAIC,KACP,GAAID,EAAa,OAEXE,MAAAA,EAASH,KAAME,GAEd,OAAAD,GAAA,EACPG,OAAOC,YAAW,KACPJ,GAAA,CAAA,GACR,KAEIE,CAAAA,CAEf,CAwB6CG,CAASf,IAAY,CAACA,IAE/D,OAAAgB,GAAU,KACIhB,WACHa,OAAW,KACdA,OAAOI,iBAAiB,SAAUV,GAC/B,YACIM,OAAW,KACdA,OAAOK,oBAAoB,SAAUX,EAAkB,IAEhE,CAACP,EAAWO,IAER,CACHZ,MAAAA,EACAwB,UAAW,cAAcrB,OAAQ"}

package/build/es/components/tooltip/PopupTip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupTip.js","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState, type FC } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\nimport { PopupTipProps } from \"./types.js\";\n\nexport const PopupTip: FC<PopupTipProps> = ({\n content,\n triggerProps,\n ...tooltipProps\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <Tooltip onOpenChange={setIsOpen} triggerOn=\"click\" {...tooltipProps}>\n <TooltipTrigger>\n <button\n {...triggerProps}\n type=\"button\"\n className={clsx(\n \"jkl-tooltip-question-button\",\n triggerProps?.className,\n )}\n data-testid=\"jkl-tooltip-question-button\"\n >\n <QuestionIcon variant=\"inherit\" bold={isOpen} />\n <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n </button>\n </TooltipTrigger>\n\n <TooltipContent data-ispopup={true}>\n {/* ~~eslint~~-~~disable-next-line~~ ~~jsx-~~a11y/~~no-noninteractive-tabindex~~ */}\n <div className=\"jkl-popuptip__content-wrapper\" tabIndex={0}>\n {content}\n </div>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"names":["PopupTip","content","triggerProps","tooltipProps","isOpen","setIsOpen","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent","tabIndex"],"mappings":"+UAQO,MAAMA,EAA8B,EACvCC,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,GAAS,YAGhCC,EAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,EAACC,EACG,CAAAF,SAAAG,EAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EACP,8BACA,MAAAd,SAAAA,EAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAACM,EAAa,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAIrDC,EAACS,EAAe,CAAA,gBAAc,EAE1BV,SAAAC,EAAC,MAAI,CAAAI,UAAU,gCAAgCM,SAAU,EACpDX,SAAAT,QAGb"}
1	+ {"version":3,"file":"PopupTip.js","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useState, type FC } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\nimport type { PopupTipProps } from \"./types.js\";\n\nexport const PopupTip: FC<PopupTipProps> = ({\n content,\n triggerProps,\n ...tooltipProps\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <Tooltip onOpenChange={setIsOpen} triggerOn=\"click\" {...tooltipProps}>\n <TooltipTrigger>\n <button\n {...triggerProps}\n type=\"button\"\n className={clsx(\n \"jkl-tooltip-question-button\",\n triggerProps?.className,\n )}\n data-testid=\"jkl-tooltip-question-button\"\n >\n <QuestionIcon variant=\"inherit\" bold={isOpen} />\n <span className=\"jkl-sr-only\">Vis hjelpetekst</span>\n </button>\n </TooltipTrigger>\n\n <TooltipContent data-ispopup={true}>\n {/* biome-ignore lint/a11y/noNoninteractiveTabindex: */}\n <div className=\"jkl-popuptip__content-wrapper\" tabIndex={0}>\n {content}\n </div>\n </TooltipContent>\n </Tooltip>\n );\n};\n"],"names":["PopupTip","content","triggerProps","tooltipProps","isOpen","setIsOpen","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent","tabIndex"],"mappings":"+UAQO,MAAMA,EAA8B,EACvCC,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,GAAS,YAGhCC,EAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,EAACC,EACG,CAAAF,SAAAG,EAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EACP,8BACA,MAAAd,SAAAA,EAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAACM,EAAa,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAIrDC,EAACS,EAAe,CAAA,gBAAc,EAE1BV,SAAAC,EAAC,MAAI,CAAAI,UAAU,gCAAgCM,SAAU,EACpDX,SAAAT,QAGb"}

package/build/es/components/tooltip/Tooltip.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useFloating as t,autoUpdate as n,offset as o,flip as s,shift as r,arrow as a,useRole as i,useDismiss as l,useClick as u,useHover as p,useFocus as c,useInteractions as d}from"@floating-ui/react";import{createContext as m,useContext as f,useState as x,useRef as g}from"react";const h=m(null),v=h.Provider,O=()=>{const e=f(h);if(null===e)throw new Error("Tooltip-komponentene kan kun brukes inne i <Tooltip />");return e},k=({children:m,...f})=>{const h=(({initialOpen:e=!1,placement:m="top",delay:f=250,triggerOn:h="hover",onOpenChange:v})=>{const[O,k]=x(e),w=g(null),C=g(null),T=t({open:O,onOpenChange:e=>{null==v||v(e),k(e)},placement:m,whileElementsMounted:n,middleware:[o(16),s(),r({padding:16}),a({element:w,padding:8})]}),b=i(T.context,{role:"tooltip"}),E=l(T.context),j=u(T.context,{enabled:"click"===h}),y=p(T.context,{enabled:"hover"===h,delay:O?0:f}),D=c(T.context,{enabled:"hover"===h}),F=d([E,D,b,j,y]);return{triggerOn:h,isOpen:O,setOpen:k,arrowElement:w,...T,refs:{...T.refs,description:C,setDescription:e=>C.current=e},...F}})(f);return e(v,{value:h,children:m})};export{k as Tooltip,v as TooltipProvider,O as useTooltipContext};
+import{jsx as e}from"react/jsx-runtime";import{useFloating as t,autoUpdate as n,offset as o,flip as s,shift as r,arrow as a,useRole as i,useDismiss as l,useClick as u,useHover as p,useFocus as c,useInteractions as d}from"@floating-ui/react";import{createContext as m,useContext as f,useState as x,useRef as g}from"react";const h=m(null),v=h.Provider,O=()=>{const e=f(h);if(null===e)throw new Error("Tooltip-komponentene kan kun brukes inne i <Tooltip />");return e},k=({children:m,...f})=>{const h=(({initialOpen:e=!1,placement:m="top",delay:f=250,triggerOn:h="hover",onOpenChange:v})=>{const[O,k]=x(e),w=g(null),C=g(null),T=t({open:O,onOpenChange:e=>{null==v||v(e),k(e)},placement:m,whileElementsMounted:n,middleware:[o(16),s(),r({padding:16}),a({element:w,padding:8})]}),b=i(T.context,{role:"tooltip"}),E=l(T.context),j=u(T.context,{enabled:"click"===h}),y=p(T.context,{enabled:"hover"===h,delay:O?0:f}),D=c(T.context,{enabled:"hover"===h}),F=d([E,D,b,j,y]);return{triggerOn:h,isOpen:O,setOpen:k,arrowElement:w,...T,refs:{...T.refs,description:C,setDescription:e=>{C.current=e}},...F}})(f);return e(v,{value:h,children:m})};export{k as Tooltip,v as TooltipProvider,O as useTooltipContext};
 //# sourceMappingURL=Tooltip.js.map

package/build/es/components/tooltip/Tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n type UseFloatingReturn,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport React, { FC, createContext, useContext, useRef, useState } from \"react\";\nimport { ~~type~~ WithChildren } from \"../../core/types.js\";\nimport { TooltipProps } from \"./types.js\";\n\ntype UseTooltipReturn = {\n triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n isOpen: boolean;\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n arrowElement: React.RefObject<SVGSVGElement>;\n refs: {\n description: React.MutableRefObject<HTMLElement \| null>;\n setDescription: (element: HTMLElement \| null) => void;\n } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n initialOpen = false,\n placement = \"top\",\n delay = 250,\n triggerOn = \"hover\",\n onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n const [isOpen, setOpen] = useState(initialOpen);\n const arrowElement = useRef<SVGSVGElement>(null);\n const description = useRef<HTMLElement \| null>(null);\n const setDescription = (element: HTMLElement \| null) ~~=>\~~n (description.current = element);\n\n const data = useFloating({\n open: isOpen,\n onOpenChange: (open) => {\n onOpenChange?.(open);\n setOpen(open);\n },\n placement,\n whileElementsMounted: autoUpdate,\n middleware: [\n offset(16),\n flip(),\n shift({ padding: 16 }),\n arrow({ element: arrowElement, padding: 8 }),\n ],\n });\n\n const role = useRole(data.context, { role: \"tooltip\" });\n const dismiss = useDismiss(data.context);\n const click = useClick(data.context, {\n enabled: triggerOn === \"click\",\n });\n const hover = useHover(data.context, {\n enabled: triggerOn === \"hover\",\n delay: isOpen ? 0 : delay,\n });\n const focus = useFocus(data.context, {\n enabled: triggerOn === \"hover\",\n });\n\n const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n return {\n triggerOn,\n isOpen,\n setOpen,\n arrowElement,\n ...data,\n refs: {\n ...data.refs,\n description,\n setDescription,\n },\n ...interactions,\n };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> \| null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n const context = useContext(tooltipContext);\n\n if (context === null) {\n throw new Error(\n \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n );\n }\n\n return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n children,\n ...options\n}) => {\n const tooltip = useTooltip(options);\n\n return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","context","useContext","Error","Tooltip","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value"],"mappings":"~~iUA+BA~~,~~MA6DMA~~,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KACvBC,MAAAA,EAAUC,EAAWN,GAE3B,GAAgB,OAAZK,EACA,MAAM,IAAIE,MACN,0DAIDF,OAAAA,CAAAA,EAGEG,EAA2C,EACpDC,SAAAA,KACGC,MAEGC,MAAAA,~~EAjFS~~,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,~~MAEM~~,~~MAACC~~,EAAQC,GAAWC,EAASP,GAC7BQ,EAAeC,EAAsB,MACrCC,EAAcD,EAA2B,~~MAIzCE~~,EAAOC,EAAY,CACrBC,KAAMR,EACND,aAAeS,IACX,MAAAT,GAAAA,EAAeS,GACfP,EAAQO,EAAI,EAEhBZ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CACRC,EAAO,IACPC,IACAC,EAAM,CAAEC,QAAS,KACjBC,EAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAQb,EAAKlB,QAAS,CAAE8B,KAAM,YACrCE,EAAUC,EAAWf,EAAKlB,SAC1BkC,EAAQC,EAASjB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAEP2B,EAAQC,EAASpB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,EACTD,MAAOG,EAAS,EAAIH,IAElB8B,EAAQC,EAAStB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAGP+B,EAAeC,EAAgB,CAACV,EAASO,EAAOT,EAAMI,EAAOG,IAE5D,MAAA,CACH3B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACHyB,KAAM,IACCzB,EAAKyB,KACR1B,YAAAA,EACA2B,~~eA3CgBf~~,~~GACnBZ~~,EAAY4B,QAAUhB,~~MA4CpBY~~,EAAA,EA0BSK,CAAWzC,GAEnB,OAAA0C,EAAAlD,EAAA,CAAgBmD,MAAO1C,EAAUF,SAAAA,GAAS"}
1	+ {"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n type UseFloatingReturn,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport React, {\n type FC,\n createContext,\n useContext,\n useRef,\n useState,\n} from \"react\";\nimport type { WithChildren } from \"../../core/types.js\";\nimport type { TooltipProps } from \"./types.js\";\n\ntype UseTooltipReturn = {\n triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n isOpen: boolean;\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n arrowElement: React.RefObject<SVGSVGElement>;\n refs: {\n description: React.MutableRefObject<HTMLElement \| null>;\n setDescription: (element: HTMLElement \| null) => void;\n } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n initialOpen = false,\n placement = \"top\",\n delay = 250,\n triggerOn = \"hover\",\n onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n const [isOpen, setOpen] = useState(initialOpen);\n const arrowElement = useRef<SVGSVGElement>(null);\n const description = useRef<HTMLElement \| null>(null);\n const setDescription = (element: HTMLElement \| null) => {\n description.current = element;\n };\n\n const data = useFloating({\n open: isOpen,\n onOpenChange: (open) => {\n onOpenChange?.(open);\n setOpen(open);\n },\n placement,\n whileElementsMounted: autoUpdate,\n middleware: [\n offset(16),\n flip(),\n shift({ padding: 16 }),\n arrow({ element: arrowElement, padding: 8 }),\n ],\n });\n\n const role = useRole(data.context, { role: \"tooltip\" });\n const dismiss = useDismiss(data.context);\n const click = useClick(data.context, {\n enabled: triggerOn === \"click\",\n });\n const hover = useHover(data.context, {\n enabled: triggerOn === \"hover\",\n delay: isOpen ? 0 : delay,\n });\n const focus = useFocus(data.context, {\n enabled: triggerOn === \"hover\",\n });\n\n const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n return {\n triggerOn,\n isOpen,\n setOpen,\n arrowElement,\n ...data,\n refs: {\n ...data.refs,\n description,\n setDescription,\n },\n ...interactions,\n };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> \| null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n const context = useContext(tooltipContext);\n\n if (context === null) {\n throw new Error(\n \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n );\n }\n\n return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n children,\n ...options\n}) => {\n const tooltip = useTooltip(options);\n\n return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","context","useContext","Error","Tooltip","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value"],"mappings":"iUAqCA,MA8DMA,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KACvBC,MAAAA,EAAUC,EAAWN,GAE3B,GAAgB,OAAZK,EACA,MAAM,IAAIE,MACN,0DAIDF,OAAAA,CAAAA,EAGEG,EAA2C,EACpDC,SAAAA,KACGC,MAEGC,MAAAA,EAlFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,EAASP,GAC7BQ,EAAeC,EAAsB,MACrCC,EAAcD,EAA2B,MAKzCE,EAAOC,EAAY,CACrBC,KAAMR,EACND,aAAeS,IACX,MAAAT,GAAAA,EAAeS,GACfP,EAAQO,EAAI,EAEhBZ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CACRC,EAAO,IACPC,IACAC,EAAM,CAAEC,QAAS,KACjBC,EAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAQb,EAAKlB,QAAS,CAAE8B,KAAM,YACrCE,EAAUC,EAAWf,EAAKlB,SAC1BkC,EAAQC,EAASjB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAEP2B,EAAQC,EAASpB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,EACTD,MAAOG,EAAS,EAAIH,IAElB8B,EAAQC,EAAStB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAGP+B,EAAeC,EAAgB,CAACV,EAASO,EAAOT,EAAMI,EAAOG,IAE5D,MAAA,CACH3B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACHyB,KAAM,IACCzB,EAAKyB,KACR1B,YAAAA,EACA2B,eA5CgBf,IACpBZ,EAAY4B,QAAUhB,CAAAA,MA6CnBY,EAAA,EA0BSK,CAAWzC,GAEnB,OAAA0C,EAAAlD,EAAA,CAAgBmD,MAAO1C,EAAUF,SAAAA,GAAS"}

package/build/es/components/tooltip/TooltipContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipContent.js","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n type Side,\n useMergeRefs,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getTranslation(side: Side, value: ~~number~~ = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nexport const TooltipContent = forwardRef<\n HTMLDivElement,\n HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n { className, children, [\"data-ispopup\"]: isPopup, ...props },\n forwardedRef,\n) {\n const {\n triggerOn,\n arrowElement,\n getFloatingProps,\n placement,\n floatingStyles,\n refs,\n context,\n } = useTooltipContext();\n const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n const contentId = useId(\"jkl-tooltip-content\");\n const { prefersReducedMotion } = useBrowserPreferences();\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, -5),\n }),\n },\n );\n\n // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { density, theme } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n initialFocus={triggerOn === \"click\" ? 0 : -1}\n returnFocus={true}\n context={context}\n modal={false}\n closeOnFocusOut={true}\n >\n <>\n {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n {triggerOn === \"hover\" && (\n <span\n ref={refs.setDescription}\n hidden\n key={`${contentId}-trigger`}\n >\n {children}\n </span>\n )}\n {isMounted && (\n <span className=\"jkl\" key={`${contentId}-wrapper`}>\n <span\n key={contentId}\n ref={ref}\n data-placement={placement}\n data-testid={\"tooltip-content\"}\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\n \"jkl-tooltip-content\",\n className,\n )}\n {...getFloatingProps({\n ...props,\n id: contentId,\n })}\n style={{\n ...floatingStyles,\n ...animationStyles,\n }}\n >\n {children}\n <FloatingArrow\n context={context}\n ref={arrowElement}\n width={24}\n height={12}\n fill=\"var(--background-color)\"\n />\n </span>\n </span>\n )}\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","FloatingPortal","jsx","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"0iBAeA,SAASA,EAAeC,EAAYC,~~EAAgB~~,~~GAChD~~,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,GAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,IACEC,EAAMC,EAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,EAAM,wBAChBC,qBAAAA,GAAyBC,KACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,MAAY,CACpBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,MAAY,CACjBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,MAAY,CAClBgC,QAAS,EACTC,UAAWlC,EAAeC,GAAQ,QAOtCkC,QAAAA,EAASC,MAAAA,GAAUC,EACvBtB,EAAKuB,UAAUC,SAGnB,SACKC,EACG,CAAAlC,SAAAmC,EAACC,EAAA,CACGC,aAA4B,UAAdjC,EAAwB,GAAI,EAC1CkC,aAAa,EACb5B,QAAAA,EACA6B,OAAO,EACPC,iBAAiB,EAEjBxC,SAGKyC,EAAAC,EAAA,CAAA1C,SAAA,CAAc,UAAdI,GACG+B,EAAC,OAAA,CACGvB,IAAKH,EAAKkC,eACVC,QAAM,EAGL5C,SAAAA,GAFI,GAAGe,aAKfI,GACGgB,EAAC,OAAK,CAAApC,UAAU,MACZC,SAAAyC,EAAC,OAAA,CAEG7B,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,UAAW8C,EACP,sBACA9C,MAEAO,EAAiB,IACdJ,EACH4C,GAAI/B,IAERgC,MAAO,IACAvC,KACAa,GAGNrB,SAAA,CAAAA,EACDmC,EAACa,EAAA,CACGtC,QAAAA,EACAE,IAAKP,EACL4C,MAAO,GACPC,OAAQ,GACRC,KAAK,8BAzBJpC,IAFc,GAAGA,mBAoCtD"}
1	+ {"version":3,"file":"TooltipContent.js","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n FloatingArrow,\n FloatingFocusManager,\n FloatingPortal,\n type Side,\n useMergeRefs,\n useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { type HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n switch (side) {\n case \"top\":\n return `0 ${value}px`;\n case \"left\":\n return `${value}px 0`;\n case \"bottom\":\n return `0 ${-value}px`;\n case \"right\":\n return `${-value}px 0`;\n\n default:\n return `0 ${value}px`;\n }\n}\n\nexport const TooltipContent = forwardRef<\n HTMLDivElement,\n HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n { className, children, [\"data-ispopup\"]: isPopup, ...props },\n forwardedRef,\n) {\n const {\n triggerOn,\n arrowElement,\n getFloatingProps,\n placement,\n floatingStyles,\n refs,\n context,\n } = useTooltipContext();\n const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n const contentId = useId(\"jkl-tooltip-content\");\n const { prefersReducedMotion } = useBrowserPreferences();\n const { isMounted, styles: animationStyles } = useTransitionStyles(\n context,\n {\n duration: {\n open: prefersReducedMotion ? 0 : 250,\n close: prefersReducedMotion ? 0 : 150,\n },\n initial: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, 5),\n }),\n open: ({ side }) => ({\n opacity: 1,\n translate: getTranslation(side, 0),\n }),\n close: ({ side }) => ({\n opacity: 0,\n translate: getTranslation(side, -5),\n }),\n },\n );\n\n // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n const { density, theme } = getThemeAndDensity(\n refs.reference.current as HTMLElement,\n );\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n initialFocus={triggerOn === \"click\" ? 0 : -1}\n returnFocus={true}\n context={context}\n modal={false}\n closeOnFocusOut={true}\n >\n <>\n {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n {triggerOn === \"hover\" && (\n <span\n ref={refs.setDescription}\n hidden\n key={`${contentId}-trigger`}\n >\n {children}\n </span>\n )}\n {isMounted && (\n <span className=\"jkl\" key={`${contentId}-wrapper`}>\n <span\n key={contentId}\n ref={ref}\n data-placement={placement}\n data-testid={\"tooltip-content\"}\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\n \"jkl-tooltip-content\",\n className,\n )}\n {...getFloatingProps({\n ...props,\n id: contentId,\n })}\n style={{\n ...floatingStyles,\n ...animationStyles,\n }}\n >\n {children}\n <FloatingArrow\n context={context}\n ref={arrowElement}\n width={24}\n height={12}\n fill=\"var(--background-color)\"\n />\n </span>\n </span>\n )}\n </>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","density","theme","getThemeAndDensity","reference","current","FloatingPortal","jsx","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"0iBAeA,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACM,MAAA,MAAMA,MACjB,IAAK,QACM,OAAIA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,GAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,IACEC,EAAMC,EAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,EAAM,wBAChBC,qBAAAA,GAAyBC,KACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,MAAY,CACpBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,MAAY,CACjBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,MAAY,CAClBgC,QAAS,EACTC,UAAWlC,EAAeC,GAAQ,QAOtCkC,QAAAA,EAASC,MAAAA,GAAUC,EACvBtB,EAAKuB,UAAUC,SAGnB,SACKC,EACG,CAAAlC,SAAAmC,EAACC,EAAA,CACGC,aAA4B,UAAdjC,EAAwB,GAAI,EAC1CkC,aAAa,EACb5B,QAAAA,EACA6B,OAAO,EACPC,iBAAiB,EAEjBxC,SAGKyC,EAAAC,EAAA,CAAA1C,SAAA,CAAc,UAAdI,GACG+B,EAAC,OAAA,CACGvB,IAAKH,EAAKkC,eACVC,QAAM,EAGL5C,SAAAA,GAFI,GAAGe,aAKfI,GACGgB,EAAC,OAAK,CAAApC,UAAU,MACZC,SAAAyC,EAAC,OAAA,CAEG7B,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,UAAW8C,EACP,sBACA9C,MAEAO,EAAiB,IACdJ,EACH4C,GAAI/B,IAERgC,MAAO,IACAvC,KACAa,GAGNrB,SAAA,CAAAA,EACDmC,EAACa,EAAA,CACGtC,QAAAA,EACAE,IAAKP,EACL4C,MAAO,GACPC,OAAQ,GACRC,KAAK,8BAzBJpC,IAFc,GAAGA,mBAoCtD"}

package/build/es/components/tooltip/stories/Tooltip.stories.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{Tooltip as e}from"../Tooltip.js";import{TooltipContent as r}from"../TooltipContent.js";import{TooltipTrigger as i}from"../TooltipTrigger.js";const n={title:"Komponenter/Tooltip",component:e,subcomponents:{TooltipTrigger:i,TooltipContent:r},tags:["autodocs"],argTypes:{delay:{control:"number"},initialOpen:{control:"boolean"},placement:{control:"select",options:["top","top-start","top-end","left","right"]},triggerOn:{control:"select",options:["click","hover"]}}},l={args:{children:o("p",{children:"Klikk for å kopiere til utklippstavlen"}),delay:2e3,initialOpen:!1,placement:"top",triggerOn:"hover"},render:n=>t("p",{children:["Kontonummer:"," ",t(e,{...n,children:[o(i,{children:"1602 44 54979"}),o(r,{children:"Klikk for å kopiere til utklippstavlen"})]})]})};export{l as Tooltip,n as default};
+import{jsx as o,jsxs as t}from"react/jsx-runtime";import"react";import{Tooltip as e}from"../Tooltip.js";import{TooltipContent as r}from"../TooltipContent.js";import{TooltipTrigger as i}from"../TooltipTrigger.js";const n={title:"Komponenter/Tooltip",component:e,subcomponents:{TooltipTrigger:i,TooltipContent:r},tags:["autodocs"],argTypes:{delay:{control:"number"},initialOpen:{control:"boolean"},placement:{control:"select",options:["top","top-start","top-end","left","right"]},triggerOn:{control:"select",options:["click","hover"]}}},l={args:{children:o("p",{children:"Klikk for å kopiere til utklippstavlen"}),delay:2e3,initialOpen:!1,placement:"top",triggerOn:"hover"},render:n=>t("p",{children:["Kontonummer:"," ",t(e,{...n,children:[o(i,{children:"1602 44 54979"}),o(r,{children:"Klikk for å kopiere til utklippstavlen"})]})]})};export{l as Tooltip,n as default};
 //# sourceMappingURL=Tooltip.stories.js.map

package/build/es/components/tooltip/stories/Tooltip.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.stories.js","sources":["../../../../../src/components/tooltip/stories/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tooltip as TooltipComponent } from \"../Tooltip.js\";\nimport { TooltipContent } from \"../TooltipContent.js\";\nimport { TooltipTrigger } from \"../TooltipTrigger.js\";\n\nconst meta = {\n title: \"Komponenter/Tooltip\",\n component: TooltipComponent,\n subcomponents: { TooltipTrigger, TooltipContent },\n tags: [\"autodocs\"],\n argTypes: {\n delay: { control: \"number\" },\n initialOpen: { control: \"boolean\" },\n placement: {\n control: \"select\",\n options: [\"top\", \"top-start\", \"top-end\", \"left\", \"right\"],\n },\n triggerOn: { control: \"select\", options: [\"click\", \"hover\"] },\n },\n} satisfies Meta<typeof TooltipComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Tooltip: Story = {\n args: {\n children: <p>Klikk for å kopiere til utklippstavlen</p>,\n delay: 2000,\n initialOpen: false,\n placement: \"top\",\n triggerOn: \"hover\",\n },\n render: (args) => (\n <p>\n Kontonummer:{\" \"}\n <TooltipComponent {...args}>\n <TooltipTrigger>1602 44 54979</TooltipTrigger>\n <TooltipContent>\n Klikk for å kopiere til utklippstavlen\n </TooltipContent>\n </TooltipComponent>\n </p>\n ),\n};\n"],"names":["meta","title","component","TooltipComponent","subcomponents","TooltipTrigger","TooltipContent","tags","argTypes","delay","control","initialOpen","placement","options","triggerOn","Tooltip","args","children","jsx","render","jsxs"],"mappings":"~~sMAOA~~,MAAMA,EAAO,CACTC,MAAO,sBACPC,UAAWC,EACXC,cAAe,CAAEC,eAAAA,EAAgBC,eAAAA,GACjCC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CAAEC,QAAS,UAClBC,YAAa,CAAED,QAAS,WACxBE,UAAW,CACPF,QAAS,SACTG,QAAS,CAAC,MAAO,YAAa,UAAW,OAAQ,UAErDC,UAAW,CAAEJ,QAAS,SAAUG,QAAS,CAAC,QAAS,YAO9CE,EAAiB,CAC1BC,KAAM,CACFC,SAAWC,EAAA,IAAA,CAAED,SAAsC,2CACnDR,MAAO,IACPE,aAAa,EACbC,UAAW,MACXE,UAAW,SAEfK,OAASH,GACLI,EAAC,IAAE,CAAAH,SAAA,CAAA,eACc,IACbG,EAACjB,EAAkB,IAAGa,EAClBC,SAAA,CAAAC,EAACb,GAAeY,SAAa,kBAC7BC,EAACZ,GAAeW,SAEhB"}
1	+ {"version":3,"file":"Tooltip.stories.js","sources":["../../../../../src/components/tooltip/stories/Tooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tooltip as TooltipComponent } from \"../Tooltip.js\";\nimport { TooltipContent } from \"../TooltipContent.js\";\nimport { TooltipTrigger } from \"../TooltipTrigger.js\";\n\nconst meta = {\n title: \"Komponenter/Tooltip\",\n component: TooltipComponent,\n subcomponents: { TooltipTrigger, TooltipContent },\n tags: [\"autodocs\"],\n argTypes: {\n delay: { control: \"number\" },\n initialOpen: { control: \"boolean\" },\n placement: {\n control: \"select\",\n options: [\"top\", \"top-start\", \"top-end\", \"left\", \"right\"],\n },\n triggerOn: { control: \"select\", options: [\"click\", \"hover\"] },\n },\n} satisfies Meta<typeof TooltipComponent>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Tooltip: Story = {\n args: {\n children: <p>Klikk for å kopiere til utklippstavlen</p>,\n delay: 2000,\n initialOpen: false,\n placement: \"top\",\n triggerOn: \"hover\",\n },\n render: (args) => (\n <p>\n Kontonummer:{\" \"}\n <TooltipComponent {...args}>\n <TooltipTrigger>1602 44 54979</TooltipTrigger>\n <TooltipContent>\n Klikk for å kopiere til utklippstavlen\n </TooltipContent>\n </TooltipComponent>\n </p>\n ),\n};\n"],"names":["meta","title","component","TooltipComponent","subcomponents","TooltipTrigger","TooltipContent","tags","argTypes","delay","control","initialOpen","placement","options","triggerOn","Tooltip","args","children","jsx","render","jsxs"],"mappings":"oNAOA,MAAMA,EAAO,CACTC,MAAO,sBACPC,UAAWC,EACXC,cAAe,CAAEC,eAAAA,EAAgBC,eAAAA,GACjCC,KAAM,CAAC,YACPC,SAAU,CACNC,MAAO,CAAEC,QAAS,UAClBC,YAAa,CAAED,QAAS,WACxBE,UAAW,CACPF,QAAS,SACTG,QAAS,CAAC,MAAO,YAAa,UAAW,OAAQ,UAErDC,UAAW,CAAEJ,QAAS,SAAUG,QAAS,CAAC,QAAS,YAO9CE,EAAiB,CAC1BC,KAAM,CACFC,SAAWC,EAAA,IAAA,CAAED,SAAsC,2CACnDR,MAAO,IACPE,aAAa,EACbC,UAAW,MACXE,UAAW,SAEfK,OAASH,GACLI,EAAC,IAAE,CAAAH,SAAA,CAAA,eACc,IACbG,EAACjB,EAAkB,IAAGa,EAClBC,SAAA,CAAAC,EAACb,GAAeY,SAAa,kBAC7BC,EAACZ,GAAeW,SAEhB"}

package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useRef as e,useCallback as t,useEffect as n}from"react";import r from"../../core/tokens.js";import{useBrowserPreferences as i}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as s}from"../usePreviousValue/usePreviousValue.js";function l(l,o){const u=s(l),a=(null==o?void 0:o.easing)||"standard",c=(null==o?void 0:o.timing)||"productive",d=(null==o?void 0:o.display)||"block",m=`${r.motion.timing[c]} height ${r.motion.easing[a]}`,{prefersReducedMotion:v}=i(),f=e(),y=e(),h=e(null);function g(e){var t;const n=h.current;n&&e.target===n&&(l?n.removeAttribute("style"):(n.removeAttribute("style"),n.style.display="none"),null==(t=null==o?void 0:o.onTransitionEnd)||t.call(o,l,h))}const p=t((()=>{var e,t,n,r;const i=h.current;if(i&&void 0!==u){if(l){if(l&&u)return}else if(i.style.display="none",!u)return;if(null==(e=null==o?void 0:o.onTransitionStart)||e.call(o,l,h),v)return i.removeAttribute("style"),l&&(null==(t=null==o?void 0:o.onFirstVisible)||t.call(o,l,h)),void(null==(n=null==o?void 0:o.onTransitionEnd)||n.call(o,l,h));if(i.style.transition=m,i.style.display=d,i.style.overflow="hidden",l)null==(r=null==o?void 0:o.onFirstVisible)||r.call(o,l,h),i.style.height="0",i.style.height=`${i.scrollHeight}px`;else{if(0===i.scrollHeight)return void i.removeAttribute("style");i.style.height=`${i.scrollHeight}px`,f.current=requestAnimationFrame((()=>{y.current=requestAnimationFrame((()=>{i.style.height="0px"}))}))}}}),[l,o,u,m,v,d]);return n((()=>{p()}),[l,p]),n((()=>{const e=h.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}}),[l]),n((()=>{const e=f.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[f,y]),[h,p]}export{l as useAnimatedHeight};
+import{useRef as e,useCallback as t,useEffect as n}from"react";import r from"../../core/tokens.js";import{useBrowserPreferences as i}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as s}from"../usePreviousValue/usePreviousValue.js";function l(l,o){const u=s(l),a=(null==o?void 0:o.easing)||"standard",c=(null==o?void 0:o.timing)||"productive",d=(null==o?void 0:o.display)||"block",m=`${r.motion.timing[c]} height ${r.motion.easing[a]}`,{prefersReducedMotion:v}=i(),f=e(),y=e(),h=e(null);function g(e){var t;const n=h.current;n&&e.target===n&&(l?n.removeAttribute("style"):(n.removeAttribute("style"),n.style.display="none"),null==(t=null==o?void 0:o.onTransitionEnd)||t.call(o,l,h))}const p=t((()=>{var e,t,n,r;const i=h.current;if(i&&void 0!==u){if(l){if(l&&u)return}else if(i.style.display="none",!u)return;if(null==(e=null==o?void 0:o.onTransitionStart)||e.call(o,l,h),v)return i.removeAttribute("style"),l&&(null==(t=null==o?void 0:o.onFirstVisible)||t.call(o,l,h)),void(null==(n=null==o?void 0:o.onTransitionEnd)||n.call(o,l,h));if(i.style.transition=m,i.style.display=d,i.style.overflow="hidden",l)null==(r=null==o?void 0:o.onFirstVisible)||r.call(o,l,h),i.style.height="0",i.style.height=`${i.scrollHeight}px`;else{if(0===i.scrollHeight)return void i.removeAttribute("style");i.style.height=`${i.scrollHeight}px`,f.current=requestAnimationFrame((()=>{y.current=requestAnimationFrame((()=>{i.style.height="0px"}))}))}}}),[l,o,u,m,v,d]);return n((()=>{p()}),[l,p]),n((()=>{const e=h.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}}),[l]),n((()=>{const e=f.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[]),[h,p]}export{l as useAnimatedHeight};
 //# sourceMappingURL=useAnimatedHeight.js.map

package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/*\n Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n \n @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n isOpen: boolean,\n options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n const wasOpen = usePreviousValue(isOpen);\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const display = options?.display \|\| defaultDisplay;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n function handleTransitionEnd(event: TransitionEvent) {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n if (isOpen) {\n element.removeAttribute(\"style\");\n } else {\n element.removeAttribute(\"style\");\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef);\n }\n }\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n // Ikke kjør animasjonen hvis elementet ikke er rendret,\n // eller hvis det er første render.\n if (!element \|\| wasOpen === undefined) {\n return;\n }\n\n if (!isOpen) {\n element.style.display = \"none\";\n if (!wasOpen) {\n // Første render eller rerender med isOpen false\n return;\n }\n } else if (isOpen && wasOpen) {\n // Re-render etter å ha vært lukket, men forblitt åpen.\n return;\n }\n\n options?.onTransitionStart?.(isOpen, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n }\n options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n element.style.transition = transition;\n element.style.display = display;\n element.style.overflow = \"hidden\";\n\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n element.style.height = \"0\";\n element.style.height = `${element.scrollHeight}px`;\n } else {\n // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n // style: height: 0; display: block; overflow:hidden\n if (element.scrollHeight === 0) {\n element.removeAttribute(\"style\");\n return;\n }\n\n element.style.height = `${element.scrollHeight}px`;\n\n raf1.current = requestAnimationFrame(() => {\n raf2.current = requestAnimationFrame(() => {\n element.style.height = `${0}px`;\n });\n });\n }\n }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n useEffect(() => {\n runAnimation();\n }, [isOpen, runAnimation]);\n\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n ~~// eslint-disable-next-line react-hooks/exhaustive-deps\n~~ }, [isOpen]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, [~~raf1, raf2~~]);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","_a","onTransitionEnd","call","runAnimation","useCallback","onTransitionStart","_b","onFirstVisible","_c","overflow","_d","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiBgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAUC,EAAiBH,GAC3BI,GAAS,MAAAH,OAAA,EAAAA,EAASG,SAfN,WAgBZC,GAAS,MAAAJ,OAAAA,EAAAA,EAASI,SAfN,aAgBZC,GAAU,MAAAL,SAAAA,EAASK,UAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,SACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAEnB,OAAAiB,EAAA,MAAAtB,OAAA,EAAAA,EAAAuB,kBAAAD,EAAAE,KAAAxB,EAAkBD,EAAQe,GAE3C,CAEMW,MAAAA,EAAeC,GAAY,iBAC7B,MAAMT,EAAUH,EAAWI,QAIvB,GAACD,QAAuB,IAAZhB,EAIhB,CAAKF,GAAAA,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OAOCqB,GAAA,OAAAA,EAAA,MAAAtB,OAAA,EAAAA,EAAA2B,oBAAAL,EAAAE,KAAAxB,EAAoBD,EAAQe,GAEjCL,EAMA,OALAQ,EAAQG,gBAAgB,SACpBrB,IACS,OAAA6B,EAAA,MAAA5B,OAAA,EAAAA,EAAA6B,iBAAAD,EAAAJ,KAAAxB,EAAiBD,EAAQe,SAE7B,OAAAgB,EAAA,MAAA9B,OAAA,EAAAA,EAAAuB,kBAAAO,EAAAN,KAAAxB,EAAkBD,EAAQe,IAIvCG,GAAAA,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMU,SAAW,SAErBhC,EACS,OAAAiC,EAAA,MAAAhC,OAAAA,EAAAA,EAAA6B,iBAAAG,EAAAR,KAAAxB,EAAiBD,EAAQe,GAClCG,EAAQI,MAAMY,OAAS,IACvBhB,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,qBAC/B,CAICjB,GAAyB,IAAzBA,EAAQiB,aAER,YADAjB,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,iBAE7BvB,EAAAO,QAAUiB,uBAAsB,KAC5BtB,EAAAK,QAAUiB,uBAAsB,KACzBlB,EAAAI,MAAMY,OAAS,KAAA,GAC1B,GAET,CAAA,IACD,CAAClC,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,~~IAEhE~~,OAAA+B,GAAU,KACOX,MACd,CAAC1B,EAAQ0B,~~IAEZW~~,GAAU,KACN,MAAMnB,EAAUH,EAAWI,QAC3B,OAAID,GACQA,EAAAoB,iBAAiB,gBAAiBtB,GAGvC,KACCE,GACQA,EAAAqB,oBACJ,gBACAvB,EAAA,CAER,~~GAGL~~,CAAChB,IAEJqC,GAAU,KACN,MAAMG,EAAK5B,EAAKO,QACVsB,EAAK3B,EAAKK,QAChB,MAAO,KACHqB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,EAAE,CAAA,GAElC,~~CAAC7B~~,~~EAAME~~,~~IAEH,CAACC,~~EAAYW,EACxB"}
1	+ {"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/*\n Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n \n @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n isOpen: boolean,\n options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n const wasOpen = usePreviousValue(isOpen);\n const easing = options?.easing \|\| defaultEasing;\n const timing = options?.timing \|\| defaultTiming;\n const display = options?.display \|\| defaultDisplay;\n const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n const raf1 = useRef<number>();\n const raf2 = useRef<number>();\n const elementRef = useRef<T>(null);\n\n function handleTransitionEnd(event: TransitionEvent) {\n const element = elementRef.current;\n\n // Ignore bubbling transitions from within container\n if (element && event.target === element) {\n if (isOpen) {\n element.removeAttribute(\"style\");\n } else {\n element.removeAttribute(\"style\");\n element.style.display = \"none\";\n }\n options?.onTransitionEnd?.(isOpen, elementRef);\n }\n }\n\n const runAnimation = useCallback(() => {\n const element = elementRef.current;\n\n // Ikke kjør animasjonen hvis elementet ikke er rendret,\n // eller hvis det er første render.\n if (!element \|\| wasOpen === undefined) {\n return;\n }\n\n if (!isOpen) {\n element.style.display = \"none\";\n if (!wasOpen) {\n // Første render eller rerender med isOpen false\n return;\n }\n } else if (isOpen && wasOpen) {\n // Re-render etter å ha vært lukket, men forblitt åpen.\n return;\n }\n\n options?.onTransitionStart?.(isOpen, elementRef);\n\n if (prefersReducedMotion) {\n element.removeAttribute(\"style\");\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n }\n options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n return;\n }\n\n element.style.transition = transition;\n element.style.display = display;\n element.style.overflow = \"hidden\";\n\n if (isOpen) {\n options?.onFirstVisible?.(isOpen, elementRef);\n element.style.height = \"0\";\n element.style.height = `${element.scrollHeight}px`;\n } else {\n // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n // style: height: 0; display: block; overflow:hidden\n if (element.scrollHeight === 0) {\n element.removeAttribute(\"style\");\n return;\n }\n\n element.style.height = `${element.scrollHeight}px`;\n\n raf1.current = requestAnimationFrame(() => {\n raf2.current = requestAnimationFrame(() => {\n element.style.height = `${0}px`;\n });\n });\n }\n }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isOpen\n useEffect(() => {\n runAnimation();\n }, [isOpen, runAnimation]);\n\n // biome-ignore lint/correctness/useExhaustiveDependencies:\n useEffect(() => {\n const element = elementRef.current;\n if (element) {\n element.addEventListener(\"transitionend\", handleTransitionEnd);\n }\n\n return () => {\n if (element) {\n element.removeEventListener(\n \"transitionend\",\n handleTransitionEnd,\n );\n }\n };\n }, [isOpen]);\n\n useEffect(() => {\n const r1 = raf1.current;\n const r2 = raf2.current;\n return () => {\n r1 && cancelAnimationFrame(r1);\n r2 && cancelAnimationFrame(r2);\n };\n }, []);\n\n return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","_a","onTransitionEnd","call","runAnimation","useCallback","onTransitionStart","_b","onFirstVisible","_c","overflow","_d","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiBgB,SAAAA,EACZC,EACAC,GAEMC,MAAAA,EAAUC,EAAiBH,GAC3BI,GAAS,MAAAH,OAAA,EAAAA,EAASG,SAfN,WAgBZC,GAAS,MAAAJ,OAAAA,EAAAA,EAASI,SAfN,aAgBZC,GAAU,MAAAL,SAAAA,EAASK,UAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,SACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAEnB,OAAAiB,EAAA,MAAAtB,OAAA,EAAAA,EAAAuB,kBAAAD,EAAAE,KAAAxB,EAAkBD,EAAQe,GAE3C,CAEMW,MAAAA,EAAeC,GAAY,iBAC7B,MAAMT,EAAUH,EAAWI,QAIvB,GAACD,QAAuB,IAAZhB,EAIhB,CAAKF,GAAAA,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OAOCqB,GAAA,OAAAA,EAAA,MAAAtB,OAAA,EAAAA,EAAA2B,oBAAAL,EAAAE,KAAAxB,EAAoBD,EAAQe,GAEjCL,EAMA,OALAQ,EAAQG,gBAAgB,SACpBrB,IACS,OAAA6B,EAAA,MAAA5B,OAAA,EAAAA,EAAA6B,iBAAAD,EAAAJ,KAAAxB,EAAiBD,EAAQe,SAE7B,OAAAgB,EAAA,MAAA9B,OAAA,EAAAA,EAAAuB,kBAAAO,EAAAN,KAAAxB,EAAkBD,EAAQe,IAIvCG,GAAAA,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMU,SAAW,SAErBhC,EACS,OAAAiC,EAAA,MAAAhC,OAAAA,EAAAA,EAAA6B,iBAAAG,EAAAR,KAAAxB,EAAiBD,EAAQe,GAClCG,EAAQI,MAAMY,OAAS,IACvBhB,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,qBAC/B,CAICjB,GAAyB,IAAzBA,EAAQiB,aAER,YADAjB,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,iBAE7BvB,EAAAO,QAAUiB,uBAAsB,KAC5BtB,EAAAK,QAAUiB,uBAAsB,KACzBlB,EAAAI,MAAMY,OAAS,KAAA,GAC1B,GAET,CAAA,IACD,CAAClC,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAGhE,OAAA+B,GAAU,KACOX,MACd,CAAC1B,EAAQ0B,IAGZW,GAAU,KACN,MAAMnB,EAAUH,EAAWI,QAC3B,OAAID,GACQA,EAAAoB,iBAAiB,gBAAiBtB,GAGvC,KACCE,GACQA,EAAAqB,oBACJ,gBACAvB,EAAA,CAER,GAEL,CAAChB,IAEJqC,GAAU,KACN,MAAMG,EAAK5B,EAAKO,QACVsB,EAAK3B,EAAKK,QAChB,MAAO,KACHqB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,EAAE,CAAA,GAElC,IAEI,CAAC1B,EAAYW,EACxB"}

package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../core/tokens.js";import{useBrowserPreferences as s}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as o}from"../usePreviousValue/usePreviousValue.js";function i(i,a){const u=o(i),l=(null==a?void 0:a.easing)||"standard",d=(null==a?void 0:a.timing)||"productive",c=`${n.motion.timing[d]} height ${n.motion.easing[l]}`,{prefersReducedMotion:m}=s(),p=e(),y=e(),f=e(null),v=t((e=>{var t;const r=f.current;r&&e.target===r&&(r.removeAttribute("style"),null==(t=null==a?void 0:a.onTransitionEnd)||t.call(a,i,f))}),[a,i]),g=t((()=>{var e,t;const r=f.current;if(r&&(void 0===u&&(r.dataset.expanded=i?"true":"false"),!(!i&&!u||i&&u))){if(null==(e=null==a?void 0:a.onTransitionStart)||e.call(a,i,f),m)return r.removeAttribute("style"),r.dataset.expanded=i?"true":"false",void(null==(t=null==a?void 0:a.onTransitionEnd)||t.call(a,i,f));i?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame((()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.style.setProperty("height",`${e}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame((()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${o}px`),s.dataset.expanded="true"}))}))}(f,c,p,y):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame((()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.dataset.expanded="true",s.style.setProperty("height",`${o}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame((()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${e}px`),s.dataset.expanded="false"}))}))}(f,c,p,y)}}),[u,i,a,m,c]);return r((()=>{g()}),[i,g]),r((()=>{const e=f.current;return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}}),[i]),r((()=>{const e=p.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[p,y]),[f,g]}export{i as useAnimatedHeightBetween};
+import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../core/tokens.js";import{useBrowserPreferences as s}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as o}from"../usePreviousValue/usePreviousValue.js";function i(i,a){const u=o(i),l=(null==a?void 0:a.easing)||"standard",d=(null==a?void 0:a.timing)||"productive",c=`${n.motion.timing[d]} height ${n.motion.easing[l]}`,{prefersReducedMotion:m}=s(),p=e(),y=e(),f=e(null),v=t((e=>{var t;const r=f.current;r&&e.target===r&&(r.removeAttribute("style"),null==(t=null==a?void 0:a.onTransitionEnd)||t.call(a,i,f))}),[a,i]),g=t((()=>{var e,t;const r=f.current;if(r&&(void 0===u&&(r.dataset.expanded=i?"true":"false"),!(!i&&!u||i&&u))){if(null==(e=null==a?void 0:a.onTransitionStart)||e.call(a,i,f),m)return r.removeAttribute("style"),r.dataset.expanded=i?"true":"false",void(null==(t=null==a?void 0:a.onTransitionEnd)||t.call(a,i,f));i?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame((()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.style.setProperty("height",`${e}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame((()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${o}px`),s.dataset.expanded="true"}))}))}(f,c,p,y):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame((()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.dataset.expanded="true",s.style.setProperty("height",`${o}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame((()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${e}px`),s.dataset.expanded="false"}))}))}(f,c,p,y)}}),[u,i,a,m,c]);return r((()=>{g()}),[i,g]),r((()=>{const e=f.current;return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}}),[i]),r((()=>{const e=p.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}}),[]),[f,g]}export{i as useAnimatedHeightBetween};
 //# sourceMappingURL=useAnimatedHeightBetween.js.map