npm - @fremtind/jokul - Versions diffs - 0.43.0 → 0.44.0 - Mend

@fremtind/jokul 0.43.0 → 0.44.0

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

Files changed (338) hide show

package/build/cjs/components/tabs/TabList.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabList.cjs","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\nimport { useTabsContext } from \"./tabsContext.js\";\n\nexport interface TabListProps extends WithChildren {\n \"aria-label\"?: string;\n className?: string;\n}\n\nexport interface InjectedProps {\n activeIndex: number;\n setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n tabIDs: string[];\n tabPanelIDs: string[];\n}\n\n/*\n Konteiner for elementer av typen Tab. Ikke funksjonell utenfor et Tabs element.\n \n Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const TabList = ({ children, className, ...injected }: TabListProps) => {\n // props injected by Tabs\n const { activeIndex, setActiveIndex, tabIDs, tabPanelIDs, ...rest } =\n injected as TabListProps & InjectedProps;\n const { density } = useTabsContext();\n\n const [tabsRect, setTabsRect] = useState<DOMRect>();\n const [activeRect, setActiveRect] = useState<DOMRect>();\n\n const tabsRef = useRef<HTMLDivElement>(null);\n const activeRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (tabsRef.current) {\n setTabsRect(tabsRef.current.getBoundingClientRect());\n }\n if (activeRef.current) {\n setActiveRect(activeRef.current.getBoundingClientRect());\n }\n }, [activeIndex, density]);\n\n const keyDownHandler = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === \"ArrowLeft\") {\n const current = event.currentTarget;\n const prev = event.currentTarget.previousSibling;\n\n if (prev) {\n (prev as HTMLElement).focus();\n } else {\n (\n current.parentElement?.lastChild\n ?.previousSibling as HTMLElement\n ).focus();\n }\n }\n\n if (event.key === \"ArrowRight\") {\n const current = event.currentTarget;\n const next = event.currentTarget.nextSibling;\n\n // skip the focus indicator element\n if (next && next.nodeName === \"BUTTON\") {\n (next as HTMLElement).focus();\n } else {\n (current.parentElement?.firstChild as HTMLElement).focus();\n }\n }\n },\n [],\n );\n\n return (\n <div\n role=\"tablist\"\n ref={tabsRef}\n {...rest}\n className={clsx(\"jkl-tablist\", className)}\n >\n {React.Children.map(children, (tab, tabIndex) => {\n const isActive = activeIndex === tabIndex;\n\n return React.isValidElement(tab)\n ? React.cloneElement<any>(tab, {\n onKeyDown: keyDownHandler,\n tabIndex: isActive ? undefined : -1,\n ref: isActive ? activeRef : undefined,\n onClick: () => setActiveIndex(tabIndex),\n \"aria-selected\": isActive,\n \"aria-controls\": tabPanelIDs[tabIndex],\n id: tabIDs[tabIndex],\n })\n : null;\n })}\n\n <span\n className=\"jkl-tablist__indicator\"\n style={{\n left: (activeRect?.left \|\| 0) - (tabsRect?.left \|\| 0),\n bottom: -1,\n width:\n (activeRect?.width \|\| 0) -\n (density === \"compact\" ? 32 : 38),\n }}\n />\n </div>\n );\n};\n"],"names":["children","className","injected","activeIndex","setActiveIndex","tabIDs","tabPanelIDs","rest","density","useTabsContext","tabsRect","setTabsRect","useState","activeRect","setActiveRect","tabsRef","useRef","activeRef","useEffect","current","getBoundingClientRect","keyDownHandler","useCallback","event","key","currentTarget","prev","previousSibling","focus","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsxs","role","ref","clsx","React","Children","map","tab","tabIndex","isActive","isValidElement","cloneElement","onKeyDown","onClick","id","jsx","style","left","bottom","width"],"mappings":"+NAsBuB,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,GACIM,QAAAA,GAAYC,~~oBAEbC~~,EAAUC,GAAeC,~~cACzBC~~,EAAYC,GAAiBF,~~aAE9BG~~,EAAUC,SAAuB,MACjCC,EAAYD,SAA0B,MAE5CE,EAAAA,WAAU,KACFH,EAAQI,SACIR,EAAAI,EAAQI,QAAQC,yBAE5BH,EAAUE,SACIL,EAAAG,EAAUE,QAAQC,wBAAuB,GAE5D,CAACjB,EAAaK,IAEjB,MAAMa,EAAiBC,EAAAA,aAClBC,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,kBAAvBH,EACMF,iBACRC,~~OACN~~,~~CAGA~~,GAAc,eAAdL,EAAMC,IAAsB,CAC5B,MAAML,EAAUI,EAAME,cAChBQ,EAAOV,EAAME,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAjB,EAAQY,oBAAR,EAAAK,EAAuBC,YAA2BT,~~OACvD~~,~~IAGR~~,IAIA,OAAAU,EAAAA,KAAC,MAAA,CACGC,KAAK,UACLC,IAAKzB,KACDR,EACJN,UAAWwC,EAAAA,KAAK,cAAexC,GAE9BD,SAAA,CAAA0C,EAAMC,SAASC,IAAI5C,GAAU,CAAC6C,EAAKC,KAChC,MAAMC,EAAW5C,IAAgB2C,EAEjC,OAAOJ,EAAMM,eAAeH,GACtBH,EAAMO,aAAkBJ,EAAK,CACzBK,UAAW7B,EACXyB,SAAUC,OAAW,GAAY,EACjCP,IAAKO,EAAW9B,OAAY,EAC5BkC,QAAS,IAAM/C,EAAe0C,GAC9B,gBAAiBC,EACjB,gBAAiBzC,EAAYwC,GAC7BM,GAAI/C,EAAOyC,KAEf,QAGVO,EAAAA,IAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,SAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QACA,EAAAC,QACK,MAAA5C,OAAA,EAAAA,EAAY4C,QAAS,IACT,YAAZjD,EAAwB,GAAK,~~SAG9C~~"}
1	+ {"version":3,"file":"TabList.cjs","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\nimport { useTabsContext } from \"./tabsContext.js\";\n\nexport interface TabListProps extends WithChildren {\n \"aria-label\"?: string;\n className?: string;\n}\n\nexport interface InjectedProps {\n activeIndex: number;\n setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n tabIDs: string[];\n tabPanelIDs: string[];\n}\n\n/*\n Konteiner for elementer av typen Tab. Ikke funksjonell utenfor et Tabs element.\n \n Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const TabList = ({ children, className, ...injected }: TabListProps) => {\n // props injected by Tabs\n const { activeIndex, setActiveIndex, tabIDs, tabPanelIDs, ...rest } =\n injected as TabListProps & InjectedProps;\n const { density } = useTabsContext();\n\n const [tabsRect, setTabsRect] = useState<DOMRect>();\n const [activeRect, setActiveRect] = useState<DOMRect>();\n\n const tabsRef = useRef<HTMLDivElement>(null);\n const activeRef = useRef<HTMLButtonElement>(null);\n\n useEffect(() => {\n if (tabsRef.current) {\n setTabsRect(tabsRef.current.getBoundingClientRect());\n }\n if (activeRef.current) {\n setActiveRect(activeRef.current.getBoundingClientRect());\n }\n }, [activeIndex, density]);\n\n const keyDownHandler = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === \"ArrowLeft\") {\n const current = event.currentTarget;\n const prev = event.currentTarget.previousSibling;\n\n if (prev) {\n (prev as HTMLElement).focus();\n } else {\n (\n current.parentElement?.lastChild\n ?.previousSibling as HTMLElement\n ).focus();\n }\n }\n\n if (event.key === \"ArrowRight\") {\n const current = event.currentTarget;\n const next = event.currentTarget.nextSibling;\n\n // skip the focus indicator element\n if (next && next.nodeName === \"BUTTON\") {\n (next as HTMLElement).focus();\n } else {\n (current.parentElement?.firstChild as HTMLElement).focus();\n }\n }\n },\n [],\n );\n\n return (\n <div\n role=\"tablist\"\n ref={tabsRef}\n {...rest}\n className={clsx(\"jkl-tablist\", className)}\n >\n {React.Children.map(children, (tab, tabIndex) => {\n const isActive = activeIndex === tabIndex;\n\n return React.isValidElement(tab)\n ? React.cloneElement<any>(tab, {\n onKeyDown: keyDownHandler,\n tabIndex: isActive ? undefined : -1,\n ref: isActive ? activeRef : undefined,\n onClick: () => setActiveIndex(tabIndex),\n \"aria-selected\": isActive,\n \"aria-controls\": tabPanelIDs[tabIndex],\n id: tabIDs[tabIndex],\n })\n : null;\n })}\n\n <span\n className=\"jkl-tablist__indicator\"\n style={{\n left: (activeRect?.left \|\| 0) - (tabsRect?.left \|\| 0),\n bottom: -1,\n width:\n (activeRect?.width \|\| 0) -\n (density === \"compact\" ? 32 : 38),\n }}\n />\n </div>\n );\n};\n"],"names":["children","className","injected","activeIndex","setActiveIndex","tabIDs","tabPanelIDs","rest","density","useTabsContext","tabsRect","setTabsRect","useState","activeRect","setActiveRect","tabsRef","useRef","activeRef","useEffect","current","getBoundingClientRect","keyDownHandler","useCallback","event","key","currentTarget","prev","previousSibling","focus","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsxs","role","ref","clsx","React","Children","map","tab","tabIndex","isActive","isValidElement","cloneElement","onKeyDown","onClick","id","jsx","style","left","bottom","width"],"mappings":"+NAsBuB,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,GACIM,QAAAA,GAAYC,EAAAA,kBAEbC,EAAUC,GAAeC,EAAkBA,YAC3CC,EAAYC,GAAiBF,EAAkBA,WAEhDG,EAAUC,SAAuB,MACjCC,EAAYD,SAA0B,MAE5CE,EAAAA,WAAU,KACFH,EAAQI,SACIR,EAAAI,EAAQI,QAAQC,yBAE5BH,EAAUE,SACIL,EAAAG,EAAUE,QAAQC,wBAAuB,GAE5D,CAACjB,EAAaK,IAEjB,MAAMa,EAAiBC,EAAAA,aAClBC,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,kBAAvBH,EACMF,iBACRC,OAEV,CAEI,GAAc,eAAdL,EAAMC,IAAsB,CAC5B,MAAML,EAAUI,EAAME,cAChBQ,EAAOV,EAAME,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAjB,EAAQY,oBAAR,EAAAK,EAAuBC,YAA2BT,OAE3D,IAEJ,IAIA,OAAAU,EAAAA,KAAC,MAAA,CACGC,KAAK,UACLC,IAAKzB,KACDR,EACJN,UAAWwC,EAAAA,KAAK,cAAexC,GAE9BD,SAAA,CAAA0C,EAAMC,SAASC,IAAI5C,GAAU,CAAC6C,EAAKC,KAChC,MAAMC,EAAW5C,IAAgB2C,EAEjC,OAAOJ,EAAMM,eAAeH,GACtBH,EAAMO,aAAkBJ,EAAK,CACzBK,UAAW7B,EACXyB,SAAUC,OAAW,GAAY,EACjCP,IAAKO,EAAW9B,OAAY,EAC5BkC,QAAS,IAAM/C,EAAe0C,GAC9B,gBAAiBC,EACjB,gBAAiBzC,EAAYwC,GAC7BM,GAAI/C,EAAOyC,KAEf,QAGVO,EAAAA,IAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,SAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QACA,EAAAC,QACK,MAAA5C,OAAA,EAAAA,EAAY4C,QAAS,IACT,YAAZjD,EAAwB,GAAK,SAE1C"}

package/build/cjs/components/tabs/TabPanel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanel.cjs","sources":["../../../../src/components/tabs/TabPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\n\nexport interface TabPanelProps extends WithChildren {\n className?: string;\n}\n\n/*\n Konteiner for innhold i et tabbet brukergrensesnitt. Ikke funksjonell utenfor et Tabs element.\n \n Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const TabPanel = ({ children, ...props }: TabPanelProps) => {\n const classes = clsx(\"jkl-tabpanel\", props.className);\n\n return (\n <div role=\"tabpanel\" {...props} className={classes}>\n {children}\n </div>\n );\n};\n"],"names":["children","props","classes","clsx","className","jsx","role"],"mappings":"8KAawB,EAAGA,SAAAA,KAAaC,MACpC,MAAMC,EAAUC,EAAAA,KAAK,eAAgBF,EAAMG,WAGvC,OAAAC,~~EAAAA~~,~~IAAC,~~OAAIC,KAAK,cAAeL,EAAOG,UAAWF,EACtCF,SAAAA,GACL"}
1	+ {"version":3,"file":"TabPanel.cjs","sources":["../../../../src/components/tabs/TabPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\n\nexport interface TabPanelProps extends WithChildren {\n className?: string;\n}\n\n/*\n Konteiner for innhold i et tabbet brukergrensesnitt. Ikke funksjonell utenfor et Tabs element.\n \n Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const TabPanel = ({ children, ...props }: TabPanelProps) => {\n const classes = clsx(\"jkl-tabpanel\", props.className);\n\n return (\n <div role=\"tabpanel\" {...props} className={classes}>\n {children}\n </div>\n );\n};\n"],"names":["children","props","classes","clsx","className","jsx","role"],"mappings":"8KAawB,EAAGA,SAAAA,KAAaC,MACpC,MAAMC,EAAUC,EAAAA,KAAK,eAAgBF,EAAMG,WAGvC,OAAAC,MAAC,OAAIC,KAAK,cAAeL,EAAOG,UAAWF,EACtCF,SAAAA,GACL"}

package/build/cjs/components/tabs/Tabs.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.cjs","sources":["../../../../../../node_modules/.pnpm/nanoid@3.3.8/node_modules/nanoid/index.browser.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["// This file replaces `index.js` in bundlers like webpack or Rollup,\n// according to `browser` config in `package.json`.\n\nimport { urlAlphabet } from './url-alphabet/index.js'\n\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\n\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n // First, a bitmask is necessary to generate the ID. The bitmask makes bytes\n // values closer to the alphabet size. The bitmask calculates the closest\n // `2^31 - 1` number, which exceeds the alphabet size.\n // For example, the bitmask for the alphabet size 30 is 31 (00011111).\n // `Math.clz32` is not used, because it is not available in browsers.\n let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n // Though, the bitmask solution is not perfect since the bytes exceeding\n // the alphabet size are refused. Therefore, to reliably generate the ID,\n // the random bytes redundancy has to be satisfied.\n\n // Note: every hardware random generator call is performance expensive,\n // because the system call for entropy collection takes a lot of time.\n // So, to avoid additional system calls, extra bytes are requested in advance.\n\n // Next, a step determines how many random bytes to generate.\n // The number of random bytes gets decided upon the ID size, mask,\n // alphabet size, and magic number 1.6 (using 1.6 peaks at performance\n // according to benchmarks).\n\n // `-~f => Math.ceil(f)` if f is a float\n // `-~i => i + 1` if i is an integer\n let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n\n return (size = defaultSize) => {\n let id = ''\n while (true) {\n let bytes = getRandom(step)\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let j = step \| 0\n while (j--) {\n // Adding `\|\| ''` refuses a random byte that exceeds the alphabet size.\n id += alphabet[bytes[j] & mask] \|\| ''\n if (id.length === size) return id\n }\n }\n }\n}\n\nlet customAlphabet = (alphabet, size = 21) =>\n customRandom(alphabet, size, random)\n\nlet nanoid = (size = 21) =>\n crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n // It is incorrect to use bytes exceeding the alphabet size.\n // The following mask reduces the random byte in the 0-255 value\n // range to the 0-63 value range. Therefore, adding hacks, such\n // as empty string fallback or magic numbers, is unneccessary because\n // the bitmask trims bytes down to the alphabet size.\n byte &= 63\n if (byte < 36) {\n // `0-9a-z`\n id += byte.toString(36)\n } else if (byte < 62) {\n // `A-Z`\n id += (byte - 26).toString(36).toUpperCase()\n } else if (byte > 62) {\n id += '-'\n } else {\n id += '_'\n }\n return id\n }, '')\n\nexport { nanoid, customAlphabet, customRandom, urlAlphabet, random }\n","import clsx from \"clsx\";\nimport { nanoid } from \"nanoid\";\nimport React, { useState, useCallback, useEffect } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { InjectedProps, TabListProps } from \"./TabList.js\";\nimport { TabPanelProps } from \"./TabPanel.js\";\nimport { TabsContextProvider } from \"./tabsContext.js\";\n\nexport interface TabsProps extends WithChildren {\n className?: string;\n density?: Density;\n onChange?: (tabIndex: number) => void;\n defaultTab?: number;\n}\n\n/*\n Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.\n * Må inneholde en TabList etterfulgt av en eller flere TabPanel.\n \n Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tabs = ({\n onChange,\n defaultTab,\n density,\n ...props\n}: TabsProps) => {\n const [activeIndex, setActiveIndex] = useState(defaultTab ?? 0);\n\n const previousTabIndex = usePreviousValue(activeIndex);\n\n useEffect(() => {\n if (\n previousTabIndex !== undefined &&\n previousTabIndex !== activeIndex &&\n onChange\n ) {\n onChange(activeIndex);\n }\n }, [onChange, previousTabIndex, activeIndex]);\n\n const [tabIDs, setTabIDs] = useState<string[]>([]);\n const [tabPanelIDs, setTabPanelIds] = useState<string[]>([]);\n\n const resolveIDs = useCallback(() => {\n const tabList = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement(tabList)) return;\n\n React.Children.forEach(tabList.props.children, (tab) => {\n if (!React.isValidElement(tab)) return;\n\n setTabIDs((prev) => [...prev, `jkl-tab-${nanoid(8)}`]);\n setTabPanelIds((prev) => [...prev, `jkl-tabpanel-${nanoid(8)}`]);\n });\n }, [props.children]);\n\n const renderTabList = () => {\n const tabList = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement<TabListProps & InjectedProps>(tabList))\n return;\n\n return React.cloneElement<TabListProps & InjectedProps>(tabList, {\n activeIndex,\n setActiveIndex,\n tabIDs,\n tabPanelIDs,\n });\n };\n\n const renderTabPanels = () => {\n return React.Children.map(props.children, (child, childIndex) => {\n if (\n !React.isValidElement<\n TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n >(child) \|\|\n childIndex === 0\n )\n return;\n\n const tabPanelIndex = childIndex - 1;\n\n return tabPanelIndex === activeIndex\n ? React.cloneElement<\n TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n >(child, {\n \"aria-labelledby\": tabIDs[tabPanelIndex],\n id: tabPanelIDs[tabPanelIndex],\n })\n : null;\n });\n };\n\n useEffect(() => {\n resolveIDs();\n }, [resolveIDs]);\n\n return (\n <TabsContextProvider state={{ density }}>\n <div\n {...props}\n className={clsx(\"jkl-tabs\", props.className)}\n data-density={density}\n >\n {renderTabList()}\n {renderTabPanels()}\n </div>\n </TabsContextProvider>\n );\n};\n"],"names":["nanoid","size","crypto","getRandomValues","Uint8Array","reduce","id","byte","toString","toUpperCase","onChange","defaultTab","density","props","activeIndex","setActiveIndex","useState","previousTabIndex","usePreviousValue","useEffect","tabIDs","setTabIDs","tabPanelIDs","setTabPanelIds","resolveIDs","useCallback","tabList","React","Children","toArray","children","isValidElement","forEach","tab","prev","jsx","TabsContextProvider","state","jsxs","className","clsx","cloneElement","renderTabList","map","child","childIndex","tabPanelIndex"],"mappings":"8QAiDA,IAAIA,EAAS,CAACC,EAAO,KACnBC,OAAOC,gBAAgB,IAAIC,WAAWH,IAAOI,QAAO,CAACC,EAAIC,IASrDD,IAHFC,GAAQ,IACG,GAEHA,EAAKC,SAAS,IACXD,EAAO,IAETA,EAAO,IAAIC,SAAS,IAAIC,cACtBF,EAAO,GACV,IAEA,KAGP,iBC/Ce,EAChBG,SAAAA,EACAC,WAAAA,EACAC,QAAAA,KACGC,MAEH,MAAOC,EAAaC,GAAkBC,EAAAA,SAASL,GAAc,GAEvDM,EAAmBC,mBAAiBJ,GAE1CK,EAAAA,WAAU,UAEmB,IAArBF,GACAA,IAAqBH,GACrBJ,GAEAA,EAASI,EAAW,GAEzB,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAAA,SAAmB,KACxCM,EAAaC,GAAkBP,EAAAA,SAAmB,IAEnDQ,EAAaC,EAAAA,aAAY,KAC3B,MAAMC,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,EAAMI,eAAeL,IAE1BC,EAAMC,SAASI,QAAQN,EAAQb,MAAMiB,UAAWG,IACvCN,EAAMI,eAAeE,KAEhBZ,GAACa,GAAS,IAAIA,EAAM,WAAWlC,EAAO,QACjCuB,GAACW,GAAS,IAAIA,EAAM,gBAAgBlC,EAAO,QAAK,GAClE,GACF,CAACa,EAAMiB,WAuCVX,OAAAA,EAAAA,WAAU,KACKK,~~GAAA~~,~~GACZ,~~CAACA,IAGCW,EAAAA,IAAAC,EAAAA,oBAAA,CAAoBC,MAAO,CAAEzB,QAAAA,GAC1BkB,SAAAQ,EAAAA,KAAC,MAAA,IACOzB,EACJ0B,UAAWC,EAAAA,KAAK,WAAY3B,EAAM0B,WAClC,eAAc3B,EAEbkB,SAAA,CAhDS,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAEnD,GAACH,EAAMI,eAA6CL,GAGjD,OAAAC,EAAMc,aAA2Cf,EAAS,CAC7DZ,YAAAA,EACAC,eAAAA,EACAK,OAAAA,EACAE,YAAAA,GACH,EAqCsBoB,GAjChBf,EAAMC,SAASe,IAAI9B,EAAMiB,UAAU,CAACc,EAAOC,KAC9C,IACKlB,EAAMI,eAELa,IACa,IAAfC,EAEA,OAEJ,MAAMC,EAAgBD,EAAa,EAEnC,OAAOC,IAAkBhC,EACnBa,EAAMc,aAEJG,EAAO,CACL,kBAAmBxB,EAAO0B,GAC1BxC,GAAIgB,EAAYwB,KAEpB,YAkBV","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"Tabs.cjs","sources":["../../../../../../node_modules/.pnpm/nanoid@3.3.8/node_modules/nanoid/index.browser.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["// This file replaces `index.js` in bundlers like webpack or Rollup,\n// according to `browser` config in `package.json`.\n\nimport { urlAlphabet } from './url-alphabet/index.js'\n\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\n\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n // First, a bitmask is necessary to generate the ID. The bitmask makes bytes\n // values closer to the alphabet size. The bitmask calculates the closest\n // `2^31 - 1` number, which exceeds the alphabet size.\n // For example, the bitmask for the alphabet size 30 is 31 (00011111).\n // `Math.clz32` is not used, because it is not available in browsers.\n let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n // Though, the bitmask solution is not perfect since the bytes exceeding\n // the alphabet size are refused. Therefore, to reliably generate the ID,\n // the random bytes redundancy has to be satisfied.\n\n // Note: every hardware random generator call is performance expensive,\n // because the system call for entropy collection takes a lot of time.\n // So, to avoid additional system calls, extra bytes are requested in advance.\n\n // Next, a step determines how many random bytes to generate.\n // The number of random bytes gets decided upon the ID size, mask,\n // alphabet size, and magic number 1.6 (using 1.6 peaks at performance\n // according to benchmarks).\n\n // `-~f => Math.ceil(f)` if f is a float\n // `-~i => i + 1` if i is an integer\n let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n\n return (size = defaultSize) => {\n let id = ''\n while (true) {\n let bytes = getRandom(step)\n // A compact alternative for `for (var i = 0; i < step; i++)`.\n let j = step \| 0\n while (j--) {\n // Adding `\|\| ''` refuses a random byte that exceeds the alphabet size.\n id += alphabet[bytes[j] & mask] \|\| ''\n if (id.length === size) return id\n }\n }\n }\n}\n\nlet customAlphabet = (alphabet, size = 21) =>\n customRandom(alphabet, size, random)\n\nlet nanoid = (size = 21) =>\n crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n // It is incorrect to use bytes exceeding the alphabet size.\n // The following mask reduces the random byte in the 0-255 value\n // range to the 0-63 value range. Therefore, adding hacks, such\n // as empty string fallback or magic numbers, is unneccessary because\n // the bitmask trims bytes down to the alphabet size.\n byte &= 63\n if (byte < 36) {\n // `0-9a-z`\n id += byte.toString(36)\n } else if (byte < 62) {\n // `A-Z`\n id += (byte - 26).toString(36).toUpperCase()\n } else if (byte > 62) {\n id += '-'\n } else {\n id += '_'\n }\n return id\n }, '')\n\nexport { nanoid, customAlphabet, customRandom, urlAlphabet, random }\n","import clsx from \"clsx\";\nimport { nanoid } from \"nanoid\";\nimport React, { useState, useCallback, useEffect } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { InjectedProps, TabListProps } from \"./TabList.js\";\nimport { TabPanelProps } from \"./TabPanel.js\";\nimport { TabsContextProvider } from \"./tabsContext.js\";\n\nexport interface TabsProps extends WithChildren {\n className?: string;\n density?: Density;\n onChange?: (tabIndex: number) => void;\n defaultTab?: number;\n}\n\n/*\n Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.\n * Må inneholde en TabList etterfulgt av en eller flere TabPanel.\n \n Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tabs = ({\n onChange,\n defaultTab,\n density,\n ...props\n}: TabsProps) => {\n const [activeIndex, setActiveIndex] = useState(defaultTab ?? 0);\n\n const previousTabIndex = usePreviousValue(activeIndex);\n\n useEffect(() => {\n if (\n previousTabIndex !== undefined &&\n previousTabIndex !== activeIndex &&\n onChange\n ) {\n onChange(activeIndex);\n }\n }, [onChange, previousTabIndex, activeIndex]);\n\n const [tabIDs, setTabIDs] = useState<string[]>([]);\n const [tabPanelIDs, setTabPanelIds] = useState<string[]>([]);\n\n const resolveIDs = useCallback(() => {\n const tabList = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement(tabList)) return;\n\n React.Children.forEach(tabList.props.children, (tab) => {\n if (!React.isValidElement(tab)) return;\n\n setTabIDs((prev) => [...prev, `jkl-tab-${nanoid(8)}`]);\n setTabPanelIds((prev) => [...prev, `jkl-tabpanel-${nanoid(8)}`]);\n });\n }, [props.children]);\n\n const renderTabList = () => {\n const tabList = React.Children.toArray(props.children)[0];\n\n if (!React.isValidElement<TabListProps & InjectedProps>(tabList))\n return;\n\n return React.cloneElement<TabListProps & InjectedProps>(tabList, {\n activeIndex,\n setActiveIndex,\n tabIDs,\n tabPanelIDs,\n });\n };\n\n const renderTabPanels = () => {\n return React.Children.map(props.children, (child, childIndex) => {\n if (\n !React.isValidElement<\n TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n >(child) \|\|\n childIndex === 0\n )\n return;\n\n const tabPanelIndex = childIndex - 1;\n\n return tabPanelIndex === activeIndex\n ? React.cloneElement<\n TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n >(child, {\n \"aria-labelledby\": tabIDs[tabPanelIndex],\n id: tabPanelIDs[tabPanelIndex],\n })\n : null;\n });\n };\n\n useEffect(() => {\n resolveIDs();\n }, [resolveIDs]);\n\n return (\n <TabsContextProvider state={{ density }}>\n <div\n {...props}\n className={clsx(\"jkl-tabs\", props.className)}\n data-density={density}\n >\n {renderTabList()}\n {renderTabPanels()}\n </div>\n </TabsContextProvider>\n );\n};\n"],"names":["nanoid","size","crypto","getRandomValues","Uint8Array","reduce","id","byte","toString","toUpperCase","onChange","defaultTab","density","props","activeIndex","setActiveIndex","useState","previousTabIndex","usePreviousValue","useEffect","tabIDs","setTabIDs","tabPanelIDs","setTabPanelIds","resolveIDs","useCallback","tabList","React","Children","toArray","children","isValidElement","forEach","tab","prev","jsx","TabsContextProvider","state","jsxs","className","clsx","cloneElement","renderTabList","map","child","childIndex","tabPanelIndex"],"mappings":"8QAiDA,IAAIA,EAAS,CAACC,EAAO,KACnBC,OAAOC,gBAAgB,IAAIC,WAAWH,IAAOI,QAAO,CAACC,EAAIC,IASrDD,IAHFC,GAAQ,IACG,GAEHA,EAAKC,SAAS,IACXD,EAAO,IAETA,EAAO,IAAIC,SAAS,IAAIC,cACtBF,EAAO,GACV,IAEA,KAGP,iBC/Ce,EAChBG,SAAAA,EACAC,WAAAA,EACAC,QAAAA,KACGC,MAEH,MAAOC,EAAaC,GAAkBC,EAAAA,SAASL,GAAc,GAEvDM,EAAmBC,mBAAiBJ,GAE1CK,EAAAA,WAAU,UAEmB,IAArBF,GACAA,IAAqBH,GACrBJ,GAEAA,EAASI,EAAW,GAEzB,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAAA,SAAmB,KACxCM,EAAaC,GAAkBP,EAAAA,SAAmB,IAEnDQ,EAAaC,EAAAA,aAAY,KAC3B,MAAMC,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,EAAMI,eAAeL,IAE1BC,EAAMC,SAASI,QAAQN,EAAQb,MAAMiB,UAAWG,IACvCN,EAAMI,eAAeE,KAEhBZ,GAACa,GAAS,IAAIA,EAAM,WAAWlC,EAAO,QACjCuB,GAACW,GAAS,IAAIA,EAAM,gBAAgBlC,EAAO,QAAK,GAClE,GACF,CAACa,EAAMiB,WAuCVX,OAAAA,EAAAA,WAAU,KACKK,MACZ,CAACA,IAGCW,EAAAA,IAAAC,EAAAA,oBAAA,CAAoBC,MAAO,CAAEzB,QAAAA,GAC1BkB,SAAAQ,EAAAA,KAAC,MAAA,IACOzB,EACJ0B,UAAWC,EAAAA,KAAK,WAAY3B,EAAM0B,WAClC,eAAc3B,EAEbkB,SAAA,CAhDS,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAEnD,GAACH,EAAMI,eAA6CL,GAGjD,OAAAC,EAAMc,aAA2Cf,EAAS,CAC7DZ,YAAAA,EACAC,eAAAA,EACAK,OAAAA,EACAE,YAAAA,GACH,EAqCsBoB,GAjChBf,EAAMC,SAASe,IAAI9B,EAAMiB,UAAU,CAACc,EAAOC,KAC9C,IACKlB,EAAMI,eAELa,IACa,IAAfC,EAEA,OAEJ,MAAMC,EAAgBD,EAAa,EAEnC,OAAOC,IAAkBhC,EACnBa,EAAMc,aAEJG,EAAO,CACL,kBAAmBxB,EAAO0B,GAC1BxC,GAAIgB,EAAYwB,KAEpB,YAkBV","x_google_ignoreList":[0]}

package/build/cjs/components/text-input/BaseTextArea.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-input/BaseTextArea.tsx"],"sourcesContent":["import React, {\n type FocusEvent,\n forwardRef,\n type RefObject,\n type TextareaHTMLAttributes,\n useRef,\n useState,\n useEffect,\n ChangeEvent,\n} from \"react\";\n\nexport type Counter = {\n /** Antall tegn før telleren når maksimum og vi viser en feilmelding /\n maxLength: number;\n /\n Med teller vises en progress-bar i bunnen av tekstfeltet som krymper\n * ned fra 100% (null tegn skrevet) til 0% (maks antall tegn skrevet).\n * Om du vil skjule den, sett denne propen til true.\n \n @default false\n /\n hideProgress?: boolean;\n};\n\nexport interface BaseTextAreaProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"children\"> {\n /\n Viser en teller i tekstfeltet når det har fokus.\n /\n counter?: Counter;\n /* Sett antall rader skjemafeltet ekspanderes til ved focus. Innholdet scroller om feltet fylles med mer innhold enn det er plass til. /\n rows?: number;\n inline?: boolean;\n startOpen?: boolean;\n /* Gjør så skjemafeltet ekspanderer seg til å vise alt innhold i stedet for å scrolle /\n autoExpand?: boolean;\n}\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-input-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","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"wIAsCaA,EAAeC,EAAAA,YACxB,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,YAAS,WACtCN,EAAU,IACV,EACiB,iBAAVA,EACPO,OAAOP,GAAOQ,OAEdR,EAAMQ,UAGdC,EAAiBC,GAAsBJ,~~EAAAA~~,~~UAAS,~~GACjDK,EAAcC,SAA4B,MAC1CC,EACDtB,GAA0CoB,EAE/CG,EAAAA,WAAU,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,~~EACnC~~,~~IAEL~~,CAACzB,EAAYqB,EAAab,EAAOS,IAuB9B,MAAAU,GAAuB,MAAA1B,SAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IAIJI,EAAgB,CAClBC,UAAWhC,EAAa,cAAW,GAInC,OAAAiC,EAAAA,KAAC,MAAA,CACGC,UAAU,yBACV,eAAcJ,EACd,mBAAkBlB,EAAiB,EAEnCuB,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcN,EACdI,UAAW,sDAAsD9B,SACjEF,OA1CZ,SAAsBmC,GAClBnB,GAAmB,GACfhB,GACAA,EAAOmC,~~EACX~~,~~EAuCQlC~~,QAlDZ,SAAuBkC,GACnBnB,GAAmB,GACff,GACAA,EAAQkC,~~EACZ~~,~~EA+CQ3B~~,SArCZ,SAAwB2B,GACFxB,EAAAwB,EAAEC,OAAO9B,MAAMQ,QAC7BN,GACAA,EAAS2B,~~EACb~~,~~EAkCQtC~~,IAAKsB,EACLd,MAAO,IAAKA,KAAUwB,GACtB1B,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACIgC,EAAAA,KAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAAA,KAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAvB,EAAe,MAAce,MAEhC1B,EAAQsC,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV3B,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcW,EA8Cdb,EA7CxBH,GAAW,GAGE,IAAVgB,EAFI,EAEyB,IAAVhB,EAAiBgB,GAwCa,aA5CnD,IAAoBhB,EAAiBgB,~~CAqD1C~~,~~IAIZ5C~~,EAAa6C,YAAc"}
1	+ {"version":3,"file":"BaseTextArea.cjs","sources":["../../../../src/components/text-input/BaseTextArea.tsx"],"sourcesContent":["import React, {\n type FocusEvent,\n forwardRef,\n type RefObject,\n type TextareaHTMLAttributes,\n useRef,\n useState,\n useEffect,\n ChangeEvent,\n} from \"react\";\n\nexport type Counter = {\n /** Antall tegn før telleren når maksimum og vi viser en feilmelding /\n maxLength: number;\n /\n Med teller vises en progress-bar i bunnen av tekstfeltet som krymper\n * ned fra 100% (null tegn skrevet) til 0% (maks antall tegn skrevet).\n * Om du vil skjule den, sett denne propen til true.\n \n @default false\n /\n hideProgress?: boolean;\n};\n\nexport interface BaseTextAreaProps\n extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, \"children\"> {\n /\n Viser en teller i tekstfeltet når det har fokus.\n /\n counter?: Counter;\n /* Sett antall rader skjemafeltet ekspanderes til ved focus. Innholdet scroller om feltet fylles med mer innhold enn det er plass til. /\n rows?: number;\n inline?: boolean;\n startOpen?: boolean;\n /* Gjør så skjemafeltet ekspanderer seg til å vise alt innhold i stedet for å scrolle /\n autoExpand?: boolean;\n}\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-input-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","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"wIAsCaA,EAAeC,EAAAA,YACxB,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,YAAS,WACtCN,EAAU,IACV,EACiB,iBAAVA,EACPO,OAAOP,GAAOQ,OAEdR,EAAMQ,UAGdC,EAAiBC,GAAsBJ,YAAS,GACjDK,EAAcC,SAA4B,MAC1CC,EACDtB,GAA0CoB,EAE/CG,EAAAA,WAAU,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,SAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IAIJI,EAAgB,CAClBC,UAAWhC,EAAa,cAAW,GAInC,OAAAiC,EAAAA,KAAC,MAAA,CACGC,UAAU,yBACV,eAAcJ,EACd,mBAAkBlB,EAAiB,EAEnCuB,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcN,EACdI,UAAW,sDAAsD9B,SACjEF,OA1CZ,SAAsBmC,GAClBnB,GAAmB,GACfhB,GACAA,EAAOmC,EAEf,EAsCYlC,QAlDZ,SAAuBkC,GACnBnB,GAAmB,GACff,GACAA,EAAQkC,EAEhB,EA8CY3B,SArCZ,SAAwB2B,GACFxB,EAAAwB,EAAEC,OAAO9B,MAAMQ,QAC7BN,GACAA,EAAS2B,EAEjB,EAiCYtC,IAAKsB,EACLd,MAAO,IAAKA,KAAUwB,GACtB1B,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACIgC,EAAAA,KAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAAA,KAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAvB,EAAe,MAAce,MAEhC1B,EAAQsC,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV3B,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcW,EA8Cdb,EA7CxBH,GAAW,GAGE,IAAVgB,EAFI,EAEyB,IAAVhB,EAAiBgB,GAwCa,aA5CnD,IAAoBhB,EAAiBgB,CAmDlC,IAMpB5C,EAAa6C,YAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextInput.cjs","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties,\n forwardRef,\n HTMLProps,\n InputHTMLAttributes,\n type MouseEventHandler,\n type ReactNode,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/types.js\";\nimport { IconButton } from \"../icon-button/IconButton.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\ninterface ActionBaseProps\n extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n icon: React.ReactElement<IconProps>;\n label: string;\n buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n type?: \"button\" \| \"reset\";\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n type: \"submit\";\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton \| ActionSubmit;\n\nexport interface BaseTextInputProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"children\" \| \"maxLength\"\n > {\n /*\n Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n * @default \"left\"\n /\n align?: \"left\" \| \"right\";\n /\n @deprecated Bruk heller actionButton\n \n /\n action?: Action;\n density?: Density;\n /*\n Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n * @example \"kr\"\n * /\n unit?: ReactNode;\n width?: string;\n /\n Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n /\n actionButton?: React.ReactElement;\n /\n Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes\n \n Merk: I noen Android-browsere vil dette ikke fungere som forventet. Det er gjort sånn\n * pga begrensninger med hvordan software-tastaturet fungerer og er ikke en bug. Dersom\n * man er veldig avhengig av at maxLength håndteres på alle plattformer anbefales det\n * å bruke input-feltet som en controlled input og selv begrense lengden på verdien.\n */\n maxLength?: number \| 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 \"data-theme\": ariaInvalid ? \"light\" : undefined,\n })}\n {action && !actionButton && (\n <IconButton\n data-theme={ariaInvalid ? \"light\" : undefined}\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":"2NAaA,SAASA,EACLC,EACAC,GAEA,OAAID,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAF1C,CAQJ,CA0DO,MAAMG,EAAgBC,EAAAA,YACzB,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,EAAAA,KAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAAA,KAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAAA,IAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EAAAA,KACP,+BACAL,EAAaV,MAAMK,WAEvB,aAAcD,EAAc,aAAU,IAE7CF,IAAWQ,GACRI,EAAAA,IAACI,EAAAA,WAAA,CACG,aAAYd,EAAc,aAAU,EACpCE,QAAAA,EACAD,UAAWU,EAAAA,KACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,~~SAGpB~~,~~IAKZ3B~~,EAAc4B,YAAc"}
1	+ {"version":3,"file":"BaseTextInput.cjs","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties,\n forwardRef,\n HTMLProps,\n InputHTMLAttributes,\n type MouseEventHandler,\n type ReactNode,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/types.js\";\nimport { IconButton } from \"../icon-button/IconButton.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\ninterface ActionBaseProps\n extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n icon: React.ReactElement<IconProps>;\n label: string;\n buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n type?: \"button\" \| \"reset\";\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n type: \"submit\";\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton \| ActionSubmit;\n\nexport interface BaseTextInputProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"children\" \| \"maxLength\"\n > {\n /*\n Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n * @default \"left\"\n /\n align?: \"left\" \| \"right\";\n /\n @deprecated Bruk heller actionButton\n \n /\n action?: Action;\n density?: Density;\n /*\n Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n * @example \"kr\"\n * /\n unit?: ReactNode;\n width?: string;\n /\n Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n /\n actionButton?: React.ReactElement;\n /\n Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes\n \n Merk: I noen Android-browsere vil dette ikke fungere som forventet. Det er gjort sånn\n * pga begrensninger med hvordan software-tastaturet fungerer og er ikke en bug. Dersom\n * man er veldig avhengig av at maxLength håndteres på alle plattformer anbefales det\n * å bruke input-feltet som en controlled input og selv begrense lengden på verdien.\n */\n maxLength?: number \| 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 \"data-theme\": ariaInvalid ? \"light\" : undefined,\n })}\n {action && !actionButton && (\n <IconButton\n data-theme={ariaInvalid ? \"light\" : undefined}\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":"2NAaA,SAASA,EACLC,EACAC,GAEA,OAAID,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAF1C,CAQJ,CA0DO,MAAMG,EAAgBC,EAAAA,YACzB,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,EAAAA,KAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAAA,KAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAAA,IAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EAAAA,KACP,+BACAL,EAAaV,MAAMK,WAEvB,aAAcD,EAAc,aAAU,IAE7CF,IAAWQ,GACRI,EAAAA,IAACI,EAAAA,WAAA,CACG,aAAYd,EAAc,aAAU,EACpCE,QAAAA,EACAD,UAAWU,EAAAA,KACP,+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/cjs/components/text-input/TextArea.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/text-input/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { BaseTextArea, BaseTextAreaProps } from \"./BaseTextArea.js\";\n\nexport interface TextAreaProps\n extends Omit<InputGroupProps, \"children\">,\n BaseTextAreaProps {}\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":"2PASaA,EAAWC,EAAAA,YACpB,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,EAAAA,IAACC,EAAAA,WAAA,CACGf,UAAWgB,EAAAA,KAAK,gBAAiBhB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRa,EAEJK,eAACC,eAAa,CAAApB,IAAAA,KAAca,KAAUE,~~KAC1C~~,~~IAIZlB~~,EAASwB,YAAc"}
1	+ {"version":3,"file":"TextArea.cjs","sources":["../../../../src/components/text-input/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { BaseTextArea, BaseTextAreaProps } from \"./BaseTextArea.js\";\n\nexport interface TextAreaProps\n extends Omit<InputGroupProps, \"children\">,\n BaseTextAreaProps {}\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":"2PASaA,EAAWC,EAAAA,YACpB,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,EAAAA,IAACC,EAAAA,WAAA,CACGf,UAAWgB,EAAAA,KAAK,gBAAiBhB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRa,EAEJK,eAACC,eAAa,CAAApB,IAAAA,KAAca,KAAUE,KAAe,IAKrElB,EAASwB,YAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.cjs","sources":["../../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { BaseTextInput, BaseTextInputProps } from \"./BaseTextInput.js\";\n\nexport interface TextInputProps\n extends Omit<InputGroupProps, \"children\">,\n BaseTextInputProps {\n \"data-testautoid\"?: string;\n inline?: boolean;\n inputClassName?: string;\n}\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","inputGroupProps","jsx","InputGroup","clsx","children","BaseTextInput","displayName"],"mappings":"4PAaaA,EAAYC,EAAAA,YACrB,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,EACEa,EAAkB,CACpBX,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAG,kBAAAA,EACAC,QAAAA,GAGA,OAAAG,EAAAA,IAACC,EAAAA,WAAA,IACOF,EACJV,UAAWa,EAAAA,KAAKb,EAAW,iBAAkB,CACzC,yBAA0BI,IAE9B,cAAY,iBACZH,QAASG,EAAS,UAAYH,EAE9Ba,eAACC,~~gBAAc~~,CAAAjB,IAAAA,KAAcW,EAAMT,UAAWK,~~KAClD~~,~~IAKZV~~,EAAUqB,YAAc"}
1	+ {"version":3,"file":"TextInput.cjs","sources":["../../../../src/components/text-input/TextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { BaseTextInput, BaseTextInputProps } from \"./BaseTextInput.js\";\n\nexport interface TextInputProps\n extends Omit<InputGroupProps, \"children\">,\n BaseTextInputProps {\n \"data-testautoid\"?: string;\n inline?: boolean;\n inputClassName?: string;\n}\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","inputGroupProps","jsx","InputGroup","clsx","children","BaseTextInput","displayName"],"mappings":"4PAaaA,EAAYC,EAAAA,YACrB,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,EACEa,EAAkB,CACpBX,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAG,kBAAAA,EACAC,QAAAA,GAGA,OAAAG,EAAAA,IAACC,EAAAA,WAAA,IACOF,EACJV,UAAWa,EAAAA,KAAKb,EAAW,iBAAkB,CACzC,yBAA0BI,IAE9B,cAAY,iBACZH,QAASG,EAAS,UAAYH,EAE9Ba,eAACC,EAAAA,cAAc,CAAAjB,IAAAA,KAAcW,EAAMT,UAAWK,KAAgB,IAM9EV,EAAUqB,YAAc"}

package/build/cjs/components/toast/Toast.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.cjs","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 { 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 { Countdown } from \"../progress-bar/Countdown.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","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":"8jBAoBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,oBAClC,QACW,OAAA,~~KAAA~~,~~gBAIZ~~,UACHA,UAAAA,EACAI,MAAAA,KACGC,UAEC,IAAAC,EAAMC,SAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASA,SAAAL,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,~~0BAEjCC~~,OAAAA,EAAAA,WAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAAA,KAAC,MAAA,IACOhB,EACJF,IAAAA,EACAN,UAAWyB,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC1B,GAEJ,iBAAgBK,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA9B,MAAC,OAAK,CAAAE,UAAU,sBACX4B,SAAAvB,EAAMO,MAAMiB,QACT/B,EAAAA,IAACgC,EAAAA,UAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPrC,EAAQS,EAAMO,MAAMc,SACpBF,EAAAA,KAAA,MAAA,IAAQf,EAAYT,UAAU,qBAC1B4B,SAAA,CAAAf,GAAUf,EAAAA,IAAA,IAAA,CAAEE,UAAU,mBAAoB4B,SAAMf,IAChDf,EAAAA,IAAA,IAAA,CAAEE,UAAU,qBAAsB4B,SAAQjB,OAE/Cb,EAAAA,IAACoC,EAAAA,WAAA,CACG,aAAa7B,EAAMO,MAAMc,QAAsB,aAAZ,EACnC,aAAW,cACX1B,UAAU,4BACVmC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,eAACS,~~EAAAA~~,~~UAAU~~,~~CAAA,OAI3B~~"}
1	+ {"version":3,"file":"Toast.cjs","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 { 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 { Countdown } from \"../progress-bar/Countdown.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","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":"8jBAoBMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAAAA,IAACC,EAAUA,UAAA,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAAAA,IAACG,EAASA,SAAA,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAAAA,IAACI,EAAYA,YAAA,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAAAA,IAACK,EAAYA,YAAA,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,gBAGG,UACHA,UAAAA,EACAI,MAAAA,KACGC,UAEC,IAAAC,EAAMC,SAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASA,SAAAL,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,EAAAA,wBAEjCC,OAAAA,EAAAA,WAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAAA,KAAC,MAAA,IACOhB,EACJF,IAAAA,EACAN,UAAWyB,EAAAA,KACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC1B,GAEJ,iBAAgBK,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA9B,MAAC,OAAK,CAAAE,UAAU,sBACX4B,SAAAvB,EAAMO,MAAMiB,QACT/B,EAAAA,IAACgC,EAAAA,UAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPrC,EAAQS,EAAMO,MAAMc,SACpBF,EAAAA,KAAA,MAAA,IAAQf,EAAYT,UAAU,qBAC1B4B,SAAA,CAAAf,GAAUf,EAAAA,IAAA,IAAA,CAAEE,UAAU,mBAAoB4B,SAAMf,IAChDf,EAAAA,IAAA,IAAA,CAAEE,UAAU,qBAAsB4B,SAAQjB,OAE/Cb,EAAAA,IAACoC,EAAAA,WAAA,CACG,aAAa7B,EAAMO,MAAMc,QAAsB,aAAZ,EACnC,aAAW,cACX1B,UAAU,4BACVmC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,eAACS,EAAUA,UAAA,QAI3B"}

package/build/cjs/components/toast/toastContext.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toastContext.cjs","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});\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 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","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","toast","options","timeout","jsx","ToastRegion","useContext"],"mappings":"yMAUMA,EAAUC,EAAAA,cAA4B,CACxCC,IAAK,IACM,2CAM6C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EAAAA,SACZ,IAAIC,aAAyB,CACzBJ,iBAAAA,EACAK,kBAAkB,KAKtB,OAAAC,EAAAA,KAACV,EAAQW,SAAR,CACGC,MAAO,CACHV,IAAK,CAACW,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SAEG,QAArB,MAAAD,OAAAA,EAAAA,EAASC,UACY,SAArB,MAAAD,OAAAA,EAAAA,EAASC,YAECA,OAAA,GAGPT,EAAMJ,IAAIW,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRZ,SAAA,CAAAA,EACDa,EAAAA,IAACC,EAAYA,YAAA,CAAAX,MAAAA,EAAcD,UAAAA,~~MAC/B~~,~~mBAtCgB~~,IAAoBa,EAAAA,WAAWlB"}
1	+ {"version":3,"file":"toastContext.cjs","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});\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 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","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","toast","options","timeout","jsx","ToastRegion","useContext"],"mappings":"yMAUMA,EAAUC,EAAAA,cAA4B,CACxCC,IAAK,IACM,2CAM6C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EAAAA,SACZ,IAAIC,aAAyB,CACzBJ,iBAAAA,EACAK,kBAAkB,KAKtB,OAAAC,EAAAA,KAACV,EAAQW,SAAR,CACGC,MAAO,CACHV,IAAK,CAACW,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SAEG,QAArB,MAAAD,OAAAA,EAAAA,EAASC,UACY,SAArB,MAAAD,OAAAA,EAAAA,EAASC,YAECA,OAAA,GAGPT,EAAMJ,IAAIW,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRZ,SAAA,CAAAA,EACDa,EAAAA,IAACC,EAAYA,YAAA,CAAAX,MAAAA,EAAcD,UAAAA,MAAsB,mBArCrC,IAAoBa,EAAAA,WAAWlB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSlider.cjs","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 { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { ToggleChangeHandler } from \"./ToggleSwitch.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\nexport interface ToggleSliderProps extends WithChildren {\n labels: [string, string];\n onToggle: (value: string) => void;\n defaultValue?: string;\n className?: string;\n hideLegend?: boolean;\n density?: Density;\n}\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":["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":"4UAuBmD,EAC/CA,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,~~WAASN~~,GAAgBH,EAAO,IAClEU,EAAKC,QAAM,qBACXC,EAAWD,QAAM,4BACjBE,EAAYC,SAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAAA,cAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,kBAAgC,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,EAAAA,KAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAAA,KAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAAA,IAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,OAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAAA,KAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAAAA,KAACK,EAAAA,SACG,CAAAvC,SAAA,CAAAoC,EAAAA,IAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAAA,IAAC,QAAA,CACGlC,UAAWiC,OAAK,2BAA4B,CACxC,qCACIG,IAAU9B,IAElBmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAnBMA,KAuBnBF,EAAAA,IAAC,OAAA,CACGlC,UAAU,0BACV2C,MAAO5B,EACP,eAAW,~~SAGvB~~"}
1	+ {"version":3,"file":"ToggleSlider.cjs","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 { Density, WithChildren } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { ToggleChangeHandler } from \"./ToggleSwitch.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\nexport interface ToggleSliderProps extends WithChildren {\n labels: [string, string];\n onToggle: (value: string) => void;\n defaultValue?: string;\n className?: string;\n hideLegend?: boolean;\n density?: Density;\n}\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":["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":"4UAuBmD,EAC/CA,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,EAAAA,SAASN,GAAgBH,EAAO,IAClEU,EAAKC,QAAM,qBACXC,EAAWD,QAAM,4BACjBE,EAAYC,SAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAAA,cAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,kBAAgC,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,EAAAA,KAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAAA,KAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAAA,IAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,OAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAAA,KAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAAAA,KAACK,EAAAA,SACG,CAAAvC,SAAA,CAAAoC,EAAAA,IAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAAA,IAAC,QAAA,CACGlC,UAAWiC,OAAK,2BAA4B,CACxC,qCACIG,IAAU9B,IAElBmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAnBMA,KAuBnBF,EAAAA,IAAC,OAAA,CACGlC,UAAU,0BACV2C,MAAO5B,EACP,eAAW,SAEnB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ToggleSwitch.cjs","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ButtonHTMLAttributes,\n type MouseEventHandler,\n forwardRef,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\n SwipeChangeHandler,\n useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\n\nexport type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;\n\nexport type ToggleSwitchProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"onChange\"\n> & {\n density?: Density;\n /*\n Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på\n * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.\n * @example\n * ```js\n * function handleChange(event, pressed) {\n * console.log(`ToggleSwitch er ${pressed ? \"på\" : \"av\"}`);\n * }\n * ```\n */\n onChange?: ToggleChangeHandler<HTMLButtonElement>;\n};\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":"+TAkCaA,EAAeC,EAAAA,YACxB,EAEQ,eAAgBC,GAAc,EAC9BC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,GAAAA,EACAC,SAAAA,KACGC,GAEPC,KAEM,MAAAC,EAAMC,~~EAAAA~~,~~MAAML,~~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,kBAAgB,CACxCP,QAjBuDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,IAeVnB,SAZyD,CACzDmB,EACAC,KAEIA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,~~GAE1B~~,~~EAKIR~~,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAAA,KAAC,SAAA,CACGxB,UAAWyB,EAAAA,KAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAAA,IAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAAA,KAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAAA,IAAA,MAAA,CAAI3B,UAAU,mCACf2B,EAAAA,IAACC,EAAAA,UAAA,CACGC,QAAQ,QACRC,MAAI,EACJ9B,UAAU,+~~CAI1B~~,~~IAIZJ~~,EAAamC,YAAc"}
1	+ {"version":3,"file":"ToggleSwitch.cjs","sources":["../../../../src/components/toggle-switch/ToggleSwitch.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ButtonHTMLAttributes,\n type MouseEventHandler,\n forwardRef,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport {\n SwipeChangeHandler,\n useSwipeGesture,\n} from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\n\nexport type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;\n\nexport type ToggleSwitchProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n \"onChange\"\n> & {\n density?: Density;\n /*\n Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på\n * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.\n * @example\n * ```js\n * function handleChange(event, pressed) {\n * console.log(`ToggleSwitch er ${pressed ? \"på\" : \"av\"}`);\n * }\n * ```\n */\n onChange?: ToggleChangeHandler<HTMLButtonElement>;\n};\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":"+TAkCaA,EAAeC,EAAAA,YACxB,EAEQ,eAAgBC,GAAc,EAC9BC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,GAAAA,EACAC,SAAAA,KACGC,GAEPC,KAEM,MAAAC,EAAMC,QAAML,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,kBAAgB,CACxCP,QAjBuDQ,IACvDZ,GAAYD,GACD,MAAAN,GAAAA,EAAAmB,GAAQb,GACnB,MAAAK,GAAAA,EAAUQ,IAeVnB,SAZyD,CACzDmB,EACAC,KAEIA,IAAad,IACbC,EAAWa,GACX,MAAApB,GAAAA,EAAWmB,EAAOC,GACtB,EAMAR,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAM,EAAAA,KAAC,SAAA,CACGxB,UAAWyB,EAAAA,KAAK,oBAAqBzB,GACrCE,GAAII,EACJD,IAAAA,EACA,eAAcI,EACd,eAAcR,KACVkB,KACCA,EAAYO,SAAW,CAAA,EAAKN,EAEhCrB,SAAA,CAAAA,EACD4B,EAAAA,IAAC,OAAI,eAAW,EAAC3B,UAAU,2BACvBD,SAAAyB,EAAAA,KAAC,MAAI,CAAAxB,UAAU,mCACXD,SAAA,CAAC4B,EAAAA,IAAA,MAAA,CAAI3B,UAAU,mCACf2B,EAAAA,IAACC,EAAAA,UAAA,CACGC,QAAQ,QACRC,MAAI,EACJ9B,UAAU,+CAGtB,IAKhBJ,EAAamC,YAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"usePillStyles.cjs","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":["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":"+HAoB6B,CACzBA,EACAC,EACAC,KAEA,MAAOC,EAAOC,GAAYC,~~EAAAA~~,~~SAAS,~~IAC5BC,EAAUC,GAAeF,~~EAAAA~~,~~SAAS,~~GAEnCG,EAAYC,EAAAA,aAAY,KAC1B,GAAIT,EAAIU,SAAWV,EAAIU,QAAQC,cAAe,CACjCP,EAAAJ,EAAIU,QAAQE,aAEf,MAAAC,EAAoBZ,EACpBD,EAAIU,QAAQC,cAAcC,YAC1BZ,EAAIU,QAAQE,YACZ,EAENL,EAAYM,~~EAAiB~~,~~IAGlC~~,CAACb,EAAKC,KAAoBC,IAEvBY,EAAqBC,EAAAA,SAAQ,IAvCvC,SAAsCC,GAClC,IAAIC,GAAO,EAEX,MAAO,IAAIC,KACP,GAAID,EAAa,OAEX,MAAAE,EAASH,KAAME,GAEd,OAAAD,GAAA,EACPG,OAAOC,YAAW,KACPJ,GAAA,IACR,KAEIE,EAEf,CAwB6CG,CAASd,IAAY,CAACA,IAE/De,OAAAA,EAAAA,WAAU,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,~~OAC7B~~"}
1	+ {"version":3,"file":"usePillStyles.cjs","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":["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":"+HAoB6B,CACzBA,EACAC,EACAC,KAEA,MAAOC,EAAOC,GAAYC,WAAS,IAC5BC,EAAUC,GAAeF,WAAS,GAEnCG,EAAYC,EAAAA,aAAY,KAC1B,GAAIT,EAAIU,SAAWV,EAAIU,QAAQC,cAAe,CACjCP,EAAAJ,EAAIU,QAAQE,aAEf,MAAAC,EAAoBZ,EACpBD,EAAIU,QAAQC,cAAcC,YAC1BZ,EAAIU,QAAQE,YACZ,EAENL,EAAYM,EAChB,IAED,CAACb,EAAKC,KAAoBC,IAEvBY,EAAqBC,EAAAA,SAAQ,IAvCvC,SAAsCC,GAClC,IAAIC,GAAO,EAEX,MAAO,IAAIC,KACP,GAAID,EAAa,OAEX,MAAAE,EAASH,KAAME,GAEd,OAAAD,GAAA,EACPG,OAAOC,YAAW,KACPJ,GAAA,IACR,KAEIE,EAEf,CAwB6CG,CAASd,IAAY,CAACA,IAE/De,OAAAA,EAAAA,WAAU,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"}

package/build/cjs/components/tooltip/PopupTip.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopupTip.cjs","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { HTMLProps, useState, type FC, type ReactNode } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip, type TooltipProps } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\n\nexport interface PopupTipProps\n extends Omit<TooltipProps, \"triggerOn\" \| \"children\"> {\n /*\n Innholdet i tooltipet som vises\n /\n content: ReactNode;\n /\n Eventuelle props du vil sette på trigger-knappen for tooltipet\n /\n triggerProps?: Omit<HTMLProps<HTMLButtonElement>, \"children\" \| \"type\">;\n}\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":["content","triggerProps","tooltipProps","isOpen","setIsOpen","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent","tabIndex"],"mappings":"4UAmB2C,EACvCA,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,~~EAAAA~~,~~UAAS,~~GAErC,cACKC,UAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,MAACC,EAAAA,eACG,CAAAF,SAAAG,EAAAA,KAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EAAAA,KACP,8BACA,MAAAd,OAAA,EAAAA,EAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAAAA,IAACM,EAAaA,aAAA,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAAA,IAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAIrDC,EAAAA,IAACS,EAAeA,eAAA,CAAA,gBAAc,EAE1BV,SAAAC,EAAAA,IAAC,MAAI,CAAAI,UAAU,gCAAgCM,SAAU,EACpDX,SAAAT,QAGb"}
1	+ {"version":3,"file":"PopupTip.cjs","sources":["../../../../src/components/tooltip/PopupTip.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { HTMLProps, useState, type FC, type ReactNode } from \"react\";\nimport { QuestionIcon } from \"../icon/icons/QuestionIcon.js\";\nimport { Tooltip, type TooltipProps } from \"./Tooltip.js\";\nimport { TooltipContent } from \"./TooltipContent.js\";\nimport { TooltipTrigger } from \"./TooltipTrigger.js\";\n\nexport interface PopupTipProps\n extends Omit<TooltipProps, \"triggerOn\" \| \"children\"> {\n /*\n Innholdet i tooltipet som vises\n /\n content: ReactNode;\n /\n Eventuelle props du vil sette på trigger-knappen for tooltipet\n /\n triggerProps?: Omit<HTMLProps<HTMLButtonElement>, \"children\" \| \"type\">;\n}\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":["content","triggerProps","tooltipProps","isOpen","setIsOpen","useState","Tooltip","onOpenChange","triggerOn","children","jsx","TooltipTrigger","jsxs","type","className","clsx","QuestionIcon","variant","bold","TooltipContent","tabIndex"],"mappings":"4UAmB2C,EACvCA,QAAAA,EACAC,aAAAA,KACGC,MAEH,MAAOC,EAAQC,GAAaC,YAAS,GAErC,cACKC,UAAQ,CAAAC,aAAcH,EAAWI,UAAU,WAAYN,EACpDO,SAAA,CAAAC,MAACC,EAAAA,eACG,CAAAF,SAAAG,EAAAA,KAAC,SAAA,IACOX,EACJY,KAAK,SACLC,UAAWC,EAAAA,KACP,8BACA,MAAAd,OAAA,EAAAA,EAAca,WAElB,cAAY,8BAEZL,SAAA,CAAAC,EAAAA,IAACM,EAAaA,aAAA,CAAAC,QAAQ,UAAUC,KAAMf,IACrCO,EAAAA,IAAA,OAAA,CAAKI,UAAU,cAAcL,SAAe,yBAIrDC,EAAAA,IAACS,EAAeA,eAAA,CAAA,gBAAc,EAE1BV,SAAAC,EAAAA,IAAC,MAAI,CAAAI,UAAU,gCAAgCM,SAAU,EACpDX,SAAAT,QAGb"}

package/build/cjs/components/tooltip/Tooltip.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n type Placement,\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\";\n\nexport type TooltipPlacement = Extract<\n Placement,\n \"top-start\" \| \"top-end\" \| \"left\" \| \"right\" \| \"top\"\n>;\n\nexport interface TooltipProps {\n /*\n Sett til true dersom du ønsker at tooltipen skal være åpen som default\n * @default false\n /\n initialOpen?: boolean;\n /\n En funksjon som skal kalles når Tooltip åpnes eller lukkes\n * @param open Hvorvidt tooltip endres til å være åpen eller ikke\n /\n onOpenChange?: (open: boolean) => void;\n /\n Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk\n * bytte posisjon dersom det ikke er plass.\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til \"click\"\n * @default 250\n /\n delay?: number;\n /\n Angir om tooltipen skal åpnes ved klikk eller hover\n * @default \"hover\"\n */\n triggerOn?: \"click\" \| \"hover\";\n}\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","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","context","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value","useContext","Error"],"mappings":"wKA8HMA,EAAiBC,~~gBAA8B~~,MAExCC,EAAkBF,EAAeG,yBAcU,EACpDC,SAAAA,KACGC,MAEG,MAAAC,EAjFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,~~EAAAA~~,~~SAASP,~~GAC7BQ,EAAeC,SAAsB,MACrCC,EAAcD,SAA2B,MAIzCE,EAAOC,EAAAA,YAAY,CACrBC,KAAMR,EACND,aAAeS,IACX,MAAAT,GAAAA,EAAeS,GACfP,EAAQO,EAAI,EAEhBZ,UAAAA,EACAa,qBAAsBC,EAAAA,WACtBC,WAAY,CACRC,EAAAA,OAAO,IACPC,SACAC,QAAM,CAAEC,QAAS,KACjBC,EAAAA,MAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAAA,QAAQb,EAAKc,QAAS,CAAEF,KAAM,YACrCG,EAAUC,EAAAA,WAAWhB,EAAKc,SAC1BG,EAAQC,EAAAA,SAASlB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAEP4B,EAAQC,EAAAA,SAASrB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,EACTD,MAAOG,EAAS,EAAIH,IAElB+B,EAAQC,EAAAA,SAASvB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAGPgC,EAAeC,kBAAgB,CAACV,EAASO,EAAOV,EAAMK,EAAOG,IAE5D,MAAA,CACH5B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACH0B,KAAM,IACC1B,EAAK0B,KACR3B,YAAAA,EACA4B,eA3CgBhB,GACnBZ,EAAY6B,QAAUjB,MA4CpBa,~~EACP~~,~~EAyBgBK~~,CAAW1C,GAE3B,OAAQ2C,EAAAA,IAAA9C,EAAA,CAAgB+C,MAAO3C,EAAUF,SAAAA,GAAS,sDAlBrB,KACvB,MAAA4B,EAAUkB,aAAWlD,GAE3B,GAAgB,OAAZgC,EACA,MAAM,IAAImB,MACN,0DAID,OAAAnB"}
1	+ {"version":3,"file":"Tooltip.cjs","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n type Placement,\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\";\n\nexport type TooltipPlacement = Extract<\n Placement,\n \"top-start\" \| \"top-end\" \| \"left\" \| \"right\" \| \"top\"\n>;\n\nexport interface TooltipProps {\n /*\n Sett til true dersom du ønsker at tooltipen skal være åpen som default\n * @default false\n /\n initialOpen?: boolean;\n /\n En funksjon som skal kalles når Tooltip åpnes eller lukkes\n * @param open Hvorvidt tooltip endres til å være åpen eller ikke\n /\n onOpenChange?: (open: boolean) => void;\n /\n Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk\n * bytte posisjon dersom det ikke er plass.\n * @default \"top\"\n /\n placement?: TooltipPlacement;\n /\n Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til \"click\"\n * @default 250\n /\n delay?: number;\n /\n Angir om tooltipen skal åpnes ved klikk eller hover\n * @default \"hover\"\n */\n triggerOn?: \"click\" \| \"hover\";\n}\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","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","context","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value","useContext","Error"],"mappings":"wKA8HMA,EAAiBC,EAAAA,cAA8B,MAExCC,EAAkBF,EAAeG,yBAcU,EACpDC,SAAAA,KACGC,MAEG,MAAAC,EAjFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,WAASP,GAC7BQ,EAAeC,SAAsB,MACrCC,EAAcD,SAA2B,MAIzCE,EAAOC,EAAAA,YAAY,CACrBC,KAAMR,EACND,aAAeS,IACX,MAAAT,GAAAA,EAAeS,GACfP,EAAQO,EAAI,EAEhBZ,UAAAA,EACAa,qBAAsBC,EAAAA,WACtBC,WAAY,CACRC,EAAAA,OAAO,IACPC,SACAC,QAAM,CAAEC,QAAS,KACjBC,EAAAA,MAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAAA,QAAQb,EAAKc,QAAS,CAAEF,KAAM,YACrCG,EAAUC,EAAAA,WAAWhB,EAAKc,SAC1BG,EAAQC,EAAAA,SAASlB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAEP4B,EAAQC,EAAAA,SAASrB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,EACTD,MAAOG,EAAS,EAAIH,IAElB+B,EAAQC,EAAAA,SAASvB,EAAKc,QAAS,CACjCK,QAAuB,UAAd3B,IAGPgC,EAAeC,kBAAgB,CAACV,EAASO,EAAOV,EAAMK,EAAOG,IAE5D,MAAA,CACH5B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACH0B,KAAM,IACC1B,EAAK0B,KACR3B,YAAAA,EACA4B,eA3CgBhB,GACnBZ,EAAY6B,QAAUjB,MA4CpBa,EAAA,EA0BSK,CAAW1C,GAE3B,OAAQ2C,EAAAA,IAAA9C,EAAA,CAAgB+C,MAAO3C,EAAUF,SAAAA,GAAS,sDAlBrB,KACvB,MAAA4B,EAAUkB,aAAWlD,GAE3B,GAAgB,OAAZgC,EACA,MAAM,IAAImB,MACN,0DAID,OAAAnB"}

package/build/cjs/components/tooltip/TooltipContent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipContent.cjs","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":"iZAeA,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,EAAAA,YAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,~~sBACEC~~,EAAMC,EAAAA,aAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,QAAM,wBAChBC,qBAAAA,GAAyBC,~~2BACzBC~~,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,OACRgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,MAAY,CACjBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,OACNgC,QAAS,EACTC,UAAWlC,EAAeC,GAAQ,QAOtCkC,QAAAA,EAASC,MAAAA,GAAUC,EAAAA,mBACvBtB,EAAKuB,UAAUC,SAGnB,aACKC,EAAAA,eACG,CAAAlC,SAAAmC,EAAAA,IAACC,EAAAA,qBAAA,CACGC,aAA4B,UAAdjC,EAAwB,KACtCkC,aAAa,EACb5B,QAAAA,EACA6B,OAAO,EACPC,iBAAiB,EAEjBxC,SAGKyC,EAAAA,KAAAC,WAAA,CAAA1C,SAAA,CAAc,UAAdI,GACG+B,EAAAA,IAAC,OAAA,CACGvB,IAAKH,EAAKkC,eACVC,QAAM,EAGL5C,SAAAA,GAFI,GAAGe,aAKfI,GACGgB,EAAAA,IAAC,OAAK,CAAApC,UAAU,MACZC,SAAAyC,EAAAA,KAAC,OAAA,CAEG7B,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,UAAW8C,EAAAA,KACP,sBACA9C,MAEAO,EAAiB,IACdJ,EACH4C,GAAI/B,IAERgC,MAAO,IACAvC,KACAa,GAGNrB,SAAA,CAAAA,EACDmC,EAAAA,IAACa,EAAAA,cAAA,CACGtC,QAAAA,EACAE,IAAKP,EACL4C,MAAO,GACPC,OAAQ,GACRC,KAAK,8BAzBJpC,IAFc,GAAGA,mBAoCtD"}
1	+ {"version":3,"file":"TooltipContent.cjs","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":"iZAeA,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,EAAAA,YAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEM,MACFC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,EAAkBA,oBAChBC,EAAMC,EAAAA,aAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,QAAM,wBAChBC,qBAAAA,GAAyBC,EAAAA,yBACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,OACRgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,MAAY,CACjBgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,OACNgC,QAAS,EACTC,UAAWlC,EAAeC,GAAQ,QAOtCkC,QAAAA,EAASC,MAAAA,GAAUC,EAAAA,mBACvBtB,EAAKuB,UAAUC,SAGnB,aACKC,EAAAA,eACG,CAAAlC,SAAAmC,EAAAA,IAACC,EAAAA,qBAAA,CACGC,aAA4B,UAAdjC,EAAwB,KACtCkC,aAAa,EACb5B,QAAAA,EACA6B,OAAO,EACPC,iBAAiB,EAEjBxC,SAGKyC,EAAAA,KAAAC,WAAA,CAAA1C,SAAA,CAAc,UAAdI,GACG+B,EAAAA,IAAC,OAAA,CACGvB,IAAKH,EAAKkC,eACVC,QAAM,EAGL5C,SAAAA,GAFI,GAAGe,aAKfI,GACGgB,EAAAA,IAAC,OAAK,CAAApC,UAAU,MACZC,SAAAyC,EAAAA,KAAC,OAAA,CAEG7B,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,sBAAqBD,EACrB9B,UAAW8C,EAAAA,KACP,sBACA9C,MAEAO,EAAiB,IACdJ,EACH4C,GAAI/B,IAERgC,MAAO,IACAvC,KACAa,GAGNrB,SAAA,CAAAA,EACDmC,EAAAA,IAACa,EAAAA,cAAA,CACGtC,QAAAA,EACAE,IAAKP,EACL4C,MAAO,GACPC,OAAQ,GACRC,KAAK,8BAzBJpC,IAFc,GAAGA,mBAoCtD"}

package/build/cjs/components/tooltip/TooltipTrigger.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipTrigger.cjs","sources":["../../../../src/components/tooltip/TooltipTrigger.tsx"],"sourcesContent":["import { useMergeRefs } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, type HTMLProps } from \"react\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nexport const TooltipTrigger = forwardRef<HTMLElement, HTMLProps<HTMLElement>>(\n function TooltipTrigger({ children, className, ...props }, forwardedRef) {\n const { isOpen, getReferenceProps, refs, triggerOn } =\n useTooltipContext();\n const childrenRef = (children as any).ref;\n const ref = useMergeRefs([\n childrenRef,\n refs.setReference,\n forwardedRef,\n ]);\n\n const filterMaterialSymbols = (\n maybeText: string \| null \| undefined,\n ) => {\n return maybeText?.replaceAll(/[\\ue003-\\uf8aa]/g, \"\");\n };\n\n const ariaLabel = [\n (refs.reference.current as HTMLElement \| null)?.textContent,\n refs.description.current?.textContent,\n ]\n .map(filterMaterialSymbols)\n .filter(Boolean)\n .join(\". \");\n\n if (React.isValidElement(children)) {\n return React.cloneElement(\n children,\n getReferenceProps({\n ref,\n \"aria-label\": ariaLabel,\n ...children.props,\n ...props,\n className: clsx(children.props.className, className),\n \"data-tooltip-shown\": isOpen,\n style: { ...children.props.style },\n tabIndex: triggerOn === \"click\" ? 0 : undefined,\n }),\n );\n }\n\n return (\n <button\n data-tooltip-shown={isOpen}\n {...getReferenceProps({\n className: clsx(className, \"jkl-tooltip-trigger\"),\n // Sørg for at vi ikke sender inn skjemaer ved klikk på knappen\n type: \"button\",\n ref,\n \"aria-label\": ariaLabel,\n ...props,\n })}\n >\n {children}\n </button>\n );\n },\n);\n"],"names":["TooltipTrigger","forwardRef","children","className","props","forwardedRef","isOpen","getReferenceProps","refs","triggerOn","useTooltipContext","childrenRef","ref","useMergeRefs","setReference","ariaLabel","_a","reference","current","textContent","_b","description","map","maybeText","replaceAll","filter","Boolean","join","React","isValidElement","cloneElement","clsx","style","tabIndex","jsx","type"],"mappings":"2OAKaA,EAAiBC,EAAAA,YAC1B,UAA0BC,SAAAA,EAAUC,UAAAA,KAAcC,GAASC,WACvD,MAAQC,OAAAA,EAAQC,kBAAAA,EAAmBC,KAAAA,EAAMC,UAAAA,GACrCC,EAAAA,oBACEC,EAAeT,EAAiBU,IAChCA,EAAMC,EAAAA,aAAa,CACrBF,EACAH,EAAKM,aACLT,IASEU,EAAY,CACb,OAAAC,EAAAR,EAAKS,UAAUC,cAAf,EAAAF,EAA+CG,YAChD,OAAAC,EAAAZ,EAAKa,YAAYH,cAAjBE,EAAAA,EAA0BD,aAEzBG,KATDC,GAEO,MAAAA,SAAAA,EAAWC,WAAW,mBAAoB,MAQhDC,OAAOC,SACPC,KAAK,MAEN,OAAAC,EAAMC,eAAe3B,GACd0B,EAAME,aACT5B,EACAK,EAAkB,CACdK,IAAAA,EACA,aAAcG,KACXb,EAASE,SACTA,EACHD,UAAW4B,EAAAA,KAAK7B,EAASE,MAAMD,UAAWA,GAC1C,qBAAsBG,EACtB0B,MAAO,IAAK9B,EAASE,MAAM4B,OAC3BC,SAAwB,UAAdxB,EAAwB,OAAI,KAM9CyB,EAAAA,IAAC,SAAA,CACG,qBAAoB5B,KAChBC,EAAkB,CAClBJ,UAAW4B,EAAAA,KAAK5B,EAAW,uBAE3BgC,KAAM,SACNvB,IAAAA,EACA,aAAcG,KACXX,IAGNF,SAAAA,~~GACL~~"}
1	+ {"version":3,"file":"TooltipTrigger.cjs","sources":["../../../../src/components/tooltip/TooltipTrigger.tsx"],"sourcesContent":["import { useMergeRefs } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { forwardRef, type HTMLProps } from \"react\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nexport const TooltipTrigger = forwardRef<HTMLElement, HTMLProps<HTMLElement>>(\n function TooltipTrigger({ children, className, ...props }, forwardedRef) {\n const { isOpen, getReferenceProps, refs, triggerOn } =\n useTooltipContext();\n const childrenRef = (children as any).ref;\n const ref = useMergeRefs([\n childrenRef,\n refs.setReference,\n forwardedRef,\n ]);\n\n const filterMaterialSymbols = (\n maybeText: string \| null \| undefined,\n ) => {\n return maybeText?.replaceAll(/[\\ue003-\\uf8aa]/g, \"\");\n };\n\n const ariaLabel = [\n (refs.reference.current as HTMLElement \| null)?.textContent,\n refs.description.current?.textContent,\n ]\n .map(filterMaterialSymbols)\n .filter(Boolean)\n .join(\". \");\n\n if (React.isValidElement(children)) {\n return React.cloneElement(\n children,\n getReferenceProps({\n ref,\n \"aria-label\": ariaLabel,\n ...children.props,\n ...props,\n className: clsx(children.props.className, className),\n \"data-tooltip-shown\": isOpen,\n style: { ...children.props.style },\n tabIndex: triggerOn === \"click\" ? 0 : undefined,\n }),\n );\n }\n\n return (\n <button\n data-tooltip-shown={isOpen}\n {...getReferenceProps({\n className: clsx(className, \"jkl-tooltip-trigger\"),\n // Sørg for at vi ikke sender inn skjemaer ved klikk på knappen\n type: \"button\",\n ref,\n \"aria-label\": ariaLabel,\n ...props,\n })}\n >\n {children}\n </button>\n );\n },\n);\n"],"names":["TooltipTrigger","forwardRef","children","className","props","forwardedRef","isOpen","getReferenceProps","refs","triggerOn","useTooltipContext","childrenRef","ref","useMergeRefs","setReference","ariaLabel","_a","reference","current","textContent","_b","description","map","maybeText","replaceAll","filter","Boolean","join","React","isValidElement","cloneElement","clsx","style","tabIndex","jsx","type"],"mappings":"2OAKaA,EAAiBC,EAAAA,YAC1B,UAA0BC,SAAAA,EAAUC,UAAAA,KAAcC,GAASC,WACvD,MAAQC,OAAAA,EAAQC,kBAAAA,EAAmBC,KAAAA,EAAMC,UAAAA,GACrCC,EAAAA,oBACEC,EAAeT,EAAiBU,IAChCA,EAAMC,EAAAA,aAAa,CACrBF,EACAH,EAAKM,aACLT,IASEU,EAAY,CACb,OAAAC,EAAAR,EAAKS,UAAUC,cAAf,EAAAF,EAA+CG,YAChD,OAAAC,EAAAZ,EAAKa,YAAYH,cAAjBE,EAAAA,EAA0BD,aAEzBG,KATDC,GAEO,MAAAA,SAAAA,EAAWC,WAAW,mBAAoB,MAQhDC,OAAOC,SACPC,KAAK,MAEN,OAAAC,EAAMC,eAAe3B,GACd0B,EAAME,aACT5B,EACAK,EAAkB,CACdK,IAAAA,EACA,aAAcG,KACXb,EAASE,SACTA,EACHD,UAAW4B,EAAAA,KAAK7B,EAASE,MAAMD,UAAWA,GAC1C,qBAAsBG,EACtB0B,MAAO,IAAK9B,EAASE,MAAM4B,OAC3BC,SAAwB,UAAdxB,EAAwB,OAAI,KAM9CyB,EAAAA,IAAC,SAAA,CACG,qBAAoB5B,KAChBC,EAAkB,CAClBJ,UAAW4B,EAAAA,KAAK5B,EAAW,uBAE3BgC,KAAM,SACNvB,IAAAA,EACA,aAAcG,KACXX,IAGNF,SAAAA,GAGb"}

package/build/cjs/core/index.cjs CHANGED Viewed

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

package/build/cjs/core/index.d.cts CHANGED Viewed

@@ -1,3 +1,2 @@
 export type { ColorScheme, Density, Easing, Timing, DataTestAutoId, WithChildren, WithOptionalChildren, } from './types.cjs';
 export { default as tokens } from './tokens.cjs';
-export { default as tailwindPreset } from './tailwind/tailwindPreset.cjs';

package/build/cjs/hooks/useAnimatedDetails/useAnimatedDetails.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAnimatedDetails.cjs","sources":["../../../../src/hooks/useAnimatedDetails/useAnimatedDetails.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/*\n Lar deg animere et HTML details element med en summary trigger og noe innhold.\n * HTML strukturen din bør se ut som omtrent\n * <details ref={detailsRef}>\n * <summary ref={summaryRef} onClick={onSummaryClick}>Trigger for å åpne</summary>\n * <div ref={contentRef}>Ekspanderbart innhold</div>\n * </details>\n \n @param onOpenChange Callback med informasjon om når elementet åpner/lukker seg.\n * @param isExpanded Styr åpning/lukking utenfra.\n * @deprecated Bruk heller `useAnimatedHeightBetween` eller lignende på selve innholdet\n */\nexport const useAnimatedDetails = ({\n onOpenChange,\n isExpanded,\n}: {\n onOpenChange: (open: boolean, e: React.MouseEvent<HTMLElement>) => void;\n isExpanded: boolean;\n}): {\n detailsRef: React.RefObject<HTMLDetailsElement>;\n summaryRef: React.RefObject<HTMLButtonElement>;\n contentRef: React.RefObject<HTMLDivElement>;\n onSummaryClick: React.MouseEventHandler<HTMLElement>;\n} => {\n const detailsRef = useRef<HTMLDetailsElement>(null);\n const summaryRef = useRef<HTMLButtonElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const animation = useRef<Animation \| null>(null);\n\n const [isClosing, setIsClosing] = useState(false);\n const [isExpanding, setIsExpanding] = useState(false);\n\n useEffect(() => {\n onAnimationFinish(isExpanded);\n }, [isExpanded]);\n\n const onAnimationFinish = (open: boolean) => {\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.open = open;\n animation.current = null;\n setIsClosing(false);\n setIsExpanding(false);\n detailsRef.current.style.overflow = \"\";\n detailsRef.current.style.height = \"\";\n }\n };\n\n const open = (e: React.MouseEvent<HTMLElement>) => {\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.style.height = `${detailsRef.current.offsetHeight}px`;\n detailsRef.current.open = true;\n requestAnimationFrame(() => {\n if (\n detailsRef.current &&\n summaryRef.current &&\n contentRef.current\n ) {\n setIsExpanding(true);\n onOpenChange(true, e);\n const startHeight = detailsRef.current.offsetHeight;\n const endHeight =\n summaryRef.current.offsetHeight +\n contentRef.current.offsetHeight;\n\n if (animation.current) {\n animation.current.cancel();\n }\n\n if (detailsRef.current.animate) {\n animation.current = detailsRef.current.animate(\n {\n height: [`${startHeight}px`, `${endHeight}px`],\n },\n {\n duration: 150,\n easing: \"ease\",\n },\n );\n animation.current.onfinish = () =>\n onAnimationFinish(true);\n animation.current.oncancel = () =>\n setIsExpanding(false);\n }\n }\n });\n }\n };\n\n const close = (e: React.MouseEvent<HTMLElement>) => {\n if (detailsRef.current && summaryRef.current) {\n setIsClosing(true);\n onOpenChange(false, e);\n const startHeight = detailsRef.current.offsetHeight;\n const endHeight = summaryRef.current.offsetHeight;\n if (animation.current) {\n animation.current.cancel();\n }\n\n if (detailsRef.current.animate) {\n animation.current = detailsRef.current.animate(\n {\n height: [`${startHeight}px`, `${endHeight}px`],\n },\n {\n duration: 150,\n easing: \"ease\",\n },\n );\n animation.current.onfinish = () => onAnimationFinish(false);\n animation.current.oncancel = () => setIsClosing(false);\n }\n }\n };\n\n const onSummaryClick = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.style.overflow = \"hidden\";\n if (isClosing \|\| !detailsRef.current.open) {\n open(e);\n } else if (isExpanding \|\| detailsRef.current.open) {\n close(e);\n }\n }\n };\n\n return { detailsRef, summaryRef, contentRef, onSummaryClick };\n};\n"],"names":["onOpenChange","isExpanded","detailsRef","useRef","summaryRef","contentRef","animation","isClosing","setIsClosing","useState","isExpanding","setIsExpanding","useEffect","onAnimationFinish","open","current","style","overflow","height","onSummaryClick","e","preventDefault","offsetHeight","requestAnimationFrame","startHeight","endHeight","cancel","animate","duration","easing","onfinish","oncancel","close"],"mappings":"oIAckC,EAC9BA,aAAAA,EACAC,WAAAA,MAUM,MAAAC,EAAaC,SAA2B,MACxCC,EAAaD,SAA0B,MACvCE,EAAaF,SAAuB,MACpCG,EAAYH,SAAyB,OAEpCI,EAAWC,GAAgBC,~~EAAAA~~,~~UAAS,~~IACpCC,EAAaC,GAAkBF,~~EAAAA~~,~~UAAS,~~GAE/CG,EAAAA,WAAU,KACNC,EAAkBZ,EAAU,GAC7B,CAACA,IAEE,MAAAY,EAAqBC,IACnBZ,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQD,KAAOA,EAC1BR,EAAUS,QAAU,KACpBP,GAAa,GACbG,GAAe,GACJT,EAAAa,QAAQC,MAAMC,SAAW,GACzBf,EAAAa,QAAQC,MAAME,OAAS,GAAA,EAmF1C,MAAO,CAAEhB,WAAAA,EAAYE,WAAAA,EAAYC,WAAAA,EAAYc,eAZrBC,IACpBA,EAAEC,iBACEnB,EAAWa,SAAWX,EAAWW,UACtBb,EAAAa,QAAQC,MAAMC,SAAW,SAChCV,IAAcL,EAAWa,QAAQD,KAvE/BM,KACNlB,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQC,MAAME,OAAS,GAAGhB,EAAWa,QAAQO,iBACxDpB,EAAWa,QAAQD,MAAO,EAC1BS,uBAAsB,KAClB,GACIrB,EAAWa,SACXX,EAAWW,SACXV,EAAWU,QACb,CACEJ,GAAe,GACfX,GAAa,EAAMoB,GACb,MAAAI,EAActB,EAAWa,QAAQO,aACjCG,EACFrB,EAAWW,QAAQO,aACnBjB,EAAWU,QAAQO,aAEnBhB,EAAUS,SACVT,EAAUS,QAAQW,SAGlBxB,EAAWa,QAAQY,UACTrB,EAAAS,QAAUb,EAAWa,QAAQY,QACnC,CACIT,OAAQ,CAAC,GAAGM,MAAiB,GAAGC,QAEpC,CACIG,SAAU,IACVC,OAAQ,SAGhBvB,EAAUS,QAAQe,SAAW,IACzBjB,GAAkB,GACtBP,EAAUS,QAAQgB,SAAW,IACzBpB,GAAe,~~GACvB~~,~~KAIhB~~,~~EAiCYG~~,CAAKM,IACEV,GAAeR,EAAWa,QAAQD,OAhCtCM,KACP,GAAAlB,EAAWa,SAAWX,EAAWW,QAAS,CAC1CP,GAAa,GACbR,GAAa,EAAOoB,GACd,MAAAI,EAActB,EAAWa,QAAQO,aACjCG,EAAYrB,EAAWW,QAAQO,aACjChB,EAAUS,SACVT,EAAUS,QAAQW,SAGlBxB,EAAWa,QAAQY,UACTrB,EAAAS,QAAUb,EAAWa,QAAQY,QACnC,CACIT,OAAQ,CAAC,GAAGM,MAAiB,GAAGC,QAEpC,CACIG,SAAU,IACVC,OAAQ,SAGhBvB,EAAUS,QAAQe,SAAW,IAAMjB,GAAkB,GACrDP,EAAUS,QAAQgB,SAAW,IAAMvB,GAAa,~~GACpD~~,~~GAWIwB~~,CAAMZ,GAAC,EAKyC"}
1	+ {"version":3,"file":"useAnimatedDetails.cjs","sources":["../../../../src/hooks/useAnimatedDetails/useAnimatedDetails.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/*\n Lar deg animere et HTML details element med en summary trigger og noe innhold.\n * HTML strukturen din bør se ut som omtrent\n * <details ref={detailsRef}>\n * <summary ref={summaryRef} onClick={onSummaryClick}>Trigger for å åpne</summary>\n * <div ref={contentRef}>Ekspanderbart innhold</div>\n * </details>\n \n @param onOpenChange Callback med informasjon om når elementet åpner/lukker seg.\n * @param isExpanded Styr åpning/lukking utenfra.\n * @deprecated Bruk heller `useAnimatedHeightBetween` eller lignende på selve innholdet\n */\nexport const useAnimatedDetails = ({\n onOpenChange,\n isExpanded,\n}: {\n onOpenChange: (open: boolean, e: React.MouseEvent<HTMLElement>) => void;\n isExpanded: boolean;\n}): {\n detailsRef: React.RefObject<HTMLDetailsElement>;\n summaryRef: React.RefObject<HTMLButtonElement>;\n contentRef: React.RefObject<HTMLDivElement>;\n onSummaryClick: React.MouseEventHandler<HTMLElement>;\n} => {\n const detailsRef = useRef<HTMLDetailsElement>(null);\n const summaryRef = useRef<HTMLButtonElement>(null);\n const contentRef = useRef<HTMLDivElement>(null);\n const animation = useRef<Animation \| null>(null);\n\n const [isClosing, setIsClosing] = useState(false);\n const [isExpanding, setIsExpanding] = useState(false);\n\n useEffect(() => {\n onAnimationFinish(isExpanded);\n }, [isExpanded]);\n\n const onAnimationFinish = (open: boolean) => {\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.open = open;\n animation.current = null;\n setIsClosing(false);\n setIsExpanding(false);\n detailsRef.current.style.overflow = \"\";\n detailsRef.current.style.height = \"\";\n }\n };\n\n const open = (e: React.MouseEvent<HTMLElement>) => {\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.style.height = `${detailsRef.current.offsetHeight}px`;\n detailsRef.current.open = true;\n requestAnimationFrame(() => {\n if (\n detailsRef.current &&\n summaryRef.current &&\n contentRef.current\n ) {\n setIsExpanding(true);\n onOpenChange(true, e);\n const startHeight = detailsRef.current.offsetHeight;\n const endHeight =\n summaryRef.current.offsetHeight +\n contentRef.current.offsetHeight;\n\n if (animation.current) {\n animation.current.cancel();\n }\n\n if (detailsRef.current.animate) {\n animation.current = detailsRef.current.animate(\n {\n height: [`${startHeight}px`, `${endHeight}px`],\n },\n {\n duration: 150,\n easing: \"ease\",\n },\n );\n animation.current.onfinish = () =>\n onAnimationFinish(true);\n animation.current.oncancel = () =>\n setIsExpanding(false);\n }\n }\n });\n }\n };\n\n const close = (e: React.MouseEvent<HTMLElement>) => {\n if (detailsRef.current && summaryRef.current) {\n setIsClosing(true);\n onOpenChange(false, e);\n const startHeight = detailsRef.current.offsetHeight;\n const endHeight = summaryRef.current.offsetHeight;\n if (animation.current) {\n animation.current.cancel();\n }\n\n if (detailsRef.current.animate) {\n animation.current = detailsRef.current.animate(\n {\n height: [`${startHeight}px`, `${endHeight}px`],\n },\n {\n duration: 150,\n easing: \"ease\",\n },\n );\n animation.current.onfinish = () => onAnimationFinish(false);\n animation.current.oncancel = () => setIsClosing(false);\n }\n }\n };\n\n const onSummaryClick = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n if (detailsRef.current && summaryRef.current) {\n detailsRef.current.style.overflow = \"hidden\";\n if (isClosing \|\| !detailsRef.current.open) {\n open(e);\n } else if (isExpanding \|\| detailsRef.current.open) {\n close(e);\n }\n }\n };\n\n return { detailsRef, summaryRef, contentRef, onSummaryClick };\n};\n"],"names":["onOpenChange","isExpanded","detailsRef","useRef","summaryRef","contentRef","animation","isClosing","setIsClosing","useState","isExpanding","setIsExpanding","useEffect","onAnimationFinish","open","current","style","overflow","height","onSummaryClick","e","preventDefault","offsetHeight","requestAnimationFrame","startHeight","endHeight","cancel","animate","duration","easing","onfinish","oncancel","close"],"mappings":"oIAckC,EAC9BA,aAAAA,EACAC,WAAAA,MAUM,MAAAC,EAAaC,SAA2B,MACxCC,EAAaD,SAA0B,MACvCE,EAAaF,SAAuB,MACpCG,EAAYH,SAAyB,OAEpCI,EAAWC,GAAgBC,YAAS,IACpCC,EAAaC,GAAkBF,YAAS,GAE/CG,EAAAA,WAAU,KACNC,EAAkBZ,EAAU,GAC7B,CAACA,IAEE,MAAAY,EAAqBC,IACnBZ,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQD,KAAOA,EAC1BR,EAAUS,QAAU,KACpBP,GAAa,GACbG,GAAe,GACJT,EAAAa,QAAQC,MAAMC,SAAW,GACzBf,EAAAa,QAAQC,MAAME,OAAS,GAAA,EAmF1C,MAAO,CAAEhB,WAAAA,EAAYE,WAAAA,EAAYC,WAAAA,EAAYc,eAZrBC,IACpBA,EAAEC,iBACEnB,EAAWa,SAAWX,EAAWW,UACtBb,EAAAa,QAAQC,MAAMC,SAAW,SAChCV,IAAcL,EAAWa,QAAQD,KAvE/BM,KACNlB,EAAWa,SAAWX,EAAWW,UACjCb,EAAWa,QAAQC,MAAME,OAAS,GAAGhB,EAAWa,QAAQO,iBACxDpB,EAAWa,QAAQD,MAAO,EAC1BS,uBAAsB,KAClB,GACIrB,EAAWa,SACXX,EAAWW,SACXV,EAAWU,QACb,CACEJ,GAAe,GACfX,GAAa,EAAMoB,GACb,MAAAI,EAActB,EAAWa,QAAQO,aACjCG,EACFrB,EAAWW,QAAQO,aACnBjB,EAAWU,QAAQO,aAEnBhB,EAAUS,SACVT,EAAUS,QAAQW,SAGlBxB,EAAWa,QAAQY,UACTrB,EAAAS,QAAUb,EAAWa,QAAQY,QACnC,CACIT,OAAQ,CAAC,GAAGM,MAAiB,GAAGC,QAEpC,CACIG,SAAU,IACVC,OAAQ,SAGhBvB,EAAUS,QAAQe,SAAW,IACzBjB,GAAkB,GACtBP,EAAUS,QAAQgB,SAAW,IACzBpB,GAAe,GAE3B,KAER,EAkCQG,CAAKM,IACEV,GAAeR,EAAWa,QAAQD,OAhCtCM,KACP,GAAAlB,EAAWa,SAAWX,EAAWW,QAAS,CAC1CP,GAAa,GACbR,GAAa,EAAOoB,GACd,MAAAI,EAActB,EAAWa,QAAQO,aACjCG,EAAYrB,EAAWW,QAAQO,aACjChB,EAAUS,SACVT,EAAUS,QAAQW,SAGlBxB,EAAWa,QAAQY,UACTrB,EAAAS,QAAUb,EAAWa,QAAQY,QACnC,CACIT,OAAQ,CAAC,GAAGM,MAAiB,GAAGC,QAEpC,CACIG,SAAU,IACVC,OAAQ,SAGhBvB,EAAUS,QAAQe,SAAW,IAAMjB,GAAkB,GACrDP,EAAUS,QAAQgB,SAAW,IAAMvB,GAAa,GAExD,GAUQwB,CAAMZ,GAAC,EAKyC"}

package/build/cjs/hooks/useAnimatedHeight/useAnimatedHeight.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAnimatedHeight.cjs","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":["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":"4RAiBgB,SACZA,EACAC,GAEM,MAAAC,EAAUC,mBAAiBH,GAC3BI,GAAS,MAAAH,OAAA,EAAAA,EAASG,SAfN,WAgBZC,GAAS,MAAAJ,OAAA,EAAAA,EAASI,SAfN,aAgBZC,GAAU,MAAAL,OAAA,EAAAA,EAASK,UAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,~~0BAE3BC~~,EAAOC,EAAAA,SACPC,EAAOD,EAAAA,SACPE,EAAaF,SAAU,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,OAAAA,EAAAA,EAAAuB,kBAAAD,EAAAE,KAAAxB,EAAkBD,EAAQe,~~GACvC~~,~~CAGE~~,MAAAW,EAAeC,EAAAA,aAAY,iBAC7B,MAAMT,EAAUH,EAAWI,QAIvB,GAACD,QAAuB,IAAZhB,EAIhB,CAAA,GAAKF,GAML,GAAWA,GAAUE,EAEjB,YAPAgB,GAAAA,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFS,OAAAqB,EAAA,MAAAtB,SAAAA,EAAA2B,oBAAAL,EAAAE,KAAAxB,EAAoBD,EAAQe,GAEjCL,EAMA,OALAQ,EAAQG,gBAAgB,SACpBrB,IACS,OAAA6B,EAAA,MAAA5B,OAAAA,EAAAA,EAAA6B,iBAAAD,EAAAJ,KAAAxB,EAAiBD,EAAQe,SAE7B,OAAAgB,EAAA,MAAA9B,SAAAA,EAAAuB,kBAAAO,EAAAN,KAAAxB,EAAkBD,EAAQe,IAQvC,GAJAG,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMU,SAAW,SAErBhC,EACS,OAAAiC,EAAA,MAAAhC,SAAAA,EAAA6B,iBAAAG,EAAAR,KAAAxB,EAAiBD,EAAQe,GAClCG,EAAQI,MAAMY,OAAS,IACvBhB,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,qBAC/B,CAIC,GAAyB,IAAzBjB,EAAQiB,aAER,YADAjB,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,iBAE7BvB,EAAAO,QAAUiB,uBAAsB,KAC5BtB,EAAAK,QAAUiB,uBAAsB,KACzBlB,EAAAI,MAAMY,OAAS,QAC1B,~~GACJ~~,CAAA,~~IAEN~~,CAAClC,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAEhE+B,OAAAA,EAAAA,WAAU,KACOX,~~GAAA~~,~~GACd,~~CAAC1B,EAAQ0B,IAEZW,EAAAA,WAAU,KACN,MAAMnB,EAAUH,EAAWI,QAC3B,OAAID,GACQA,EAAAoB,iBAAiB,gBAAiBtB,GAGvC,KACCE,GACQA,EAAAqB,oBACJ,gBACAvB,~~EACJ~~,CAER,~~GAED~~,CAAChB,IAEJqC,EAAAA,WAAU,KACN,MAAMG,EAAK5B,EAAKO,QACVsB,EAAK3B,EAAKK,QAChB,MAAO,KACHqB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,EAAE,~~CACjC~~,~~GACD~~,CAAC7B,EAAME,IAEH,CAACC,EAAYW,EACxB"}
1	+ {"version":3,"file":"useAnimatedHeight.cjs","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":["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":"4RAiBgB,SACZA,EACAC,GAEM,MAAAC,EAAUC,mBAAiBH,GAC3BI,GAAS,MAAAH,OAAA,EAAAA,EAASG,SAfN,WAgBZC,GAAS,MAAAJ,OAAA,EAAAA,EAASI,SAfN,aAgBZC,GAAU,MAAAL,OAAA,EAAAA,EAASK,UAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,EAAAA,wBAE3BC,EAAOC,EAAAA,SACPC,EAAOD,EAAAA,SACPE,EAAaF,SAAU,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,OAAAA,EAAAA,EAAAuB,kBAAAD,EAAAE,KAAAxB,EAAkBD,EAAQe,GAE3C,CAEM,MAAAW,EAAeC,EAAAA,aAAY,iBAC7B,MAAMT,EAAUH,EAAWI,QAIvB,GAACD,QAAuB,IAAZhB,EAIhB,CAAA,GAAKF,GAML,GAAWA,GAAUE,EAEjB,YAPAgB,GAAAA,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFS,OAAAqB,EAAA,MAAAtB,SAAAA,EAAA2B,oBAAAL,EAAAE,KAAAxB,EAAoBD,EAAQe,GAEjCL,EAMA,OALAQ,EAAQG,gBAAgB,SACpBrB,IACS,OAAA6B,EAAA,MAAA5B,OAAAA,EAAAA,EAAA6B,iBAAAD,EAAAJ,KAAAxB,EAAiBD,EAAQe,SAE7B,OAAAgB,EAAA,MAAA9B,SAAAA,EAAAuB,kBAAAO,EAAAN,KAAAxB,EAAkBD,EAAQe,IAQvC,GAJAG,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMU,SAAW,SAErBhC,EACS,OAAAiC,EAAA,MAAAhC,SAAAA,EAAA6B,iBAAAG,EAAAR,KAAAxB,EAAiBD,EAAQe,GAClCG,EAAQI,MAAMY,OAAS,IACvBhB,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,qBAC/B,CAIC,GAAyB,IAAzBjB,EAAQiB,aAER,YADAjB,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMY,OAAS,GAAGhB,EAAQiB,iBAE7BvB,EAAAO,QAAUiB,uBAAsB,KAC5BtB,EAAAK,QAAUiB,uBAAsB,KACzBlB,EAAAI,MAAMY,OAAS,QAC1B,GAET,CAAA,IACD,CAAClC,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAEhE+B,OAAAA,EAAAA,WAAU,KACOX,MACd,CAAC1B,EAAQ0B,IAEZW,EAAAA,WAAU,KACN,MAAMnB,EAAUH,EAAWI,QAC3B,OAAID,GACQA,EAAAoB,iBAAiB,gBAAiBtB,GAGvC,KACCE,GACQA,EAAAqB,oBACJ,gBACAvB,EAAA,CAER,GAGL,CAAChB,IAEJqC,EAAAA,WAAU,KACN,MAAMG,EAAK5B,EAAKO,QACVsB,EAAK3B,EAAKK,QAChB,MAAO,KACHqB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,EAAE,CAAA,GAElC,CAAC7B,EAAME,IAEH,CAACC,EAAYW,EACxB"}