npm - @fremtind/jokul - Versions diffs - 0.27.1 → 0.27.2 - Mend

@fremtind/jokul 0.27.1 → 0.27.2

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 (508) hide show

package/build/es/components/table/TablePagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TablePagination.js","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n forwardRef,\n useCallback,\n useState,\n type ChangeEventHandler,\n type FC,\n type MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TablePaginationProps {\n className?: string;\n id?: string;\n density?: Density;\n /*\n @default 0\n /\n activePage?: number;\n /\n Null eller negativt tall tolkes som \"vis alle\".\n /\n rowsPerPage: number;\n rowsPerPageItems: Array<number \| { label: string; value: number }>;\n totalNumberOfRows: number;\n /\n Viser et valgfritt inputfelt for å hoppe raskt til en spesifik side.\n * Du kan også sende inn en custom label hvis du ønsker det, ellers bruke\n * true for default label\n * @default false\n /\n withGoToPage?: boolean \| { gotoLabel: string };\n onChange: (e: React.SyntheticEvent, toPage: number, fromPage: number) => void;\n onChangeRowsPerPage: ChangeEventHandler<HTMLSelectElement>;\n /\n Dersom du ønsker å ha custom labels kan du sende inn disse. \"rowsPerPage\"\n * vises alltid på skjerm mens \"next\" og \"previous\" brukes som hint til\n * skjermlesere for ikon-knappene til Neste/Forrige side\n * @default { rowsPerPage: \"Rader per side\", previous: \"Forrige\", next: \"Neste\" }\n /\n labels?: {\n rowsPerPage: string;\n previous: string;\n next: string;\n };\n}\n\nfunction clamp(min: number, num: number, max: number): number {\n if (num < min) {\n return min;\n } else if (num > max) {\n return max;\n }\n return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>((props, ref) => {\n const {\n activePage = 0,\n totalNumberOfRows,\n rowsPerPage,\n rowsPerPageItems,\n className,\n density,\n id: idProp,\n withGoToPage = false,\n onChange,\n onChangeRowsPerPage,\n labels = {\n rowsPerPage: \"Rader per side\",\n previous: \"Forrige\",\n next: \"Neste\",\n },\n ...rest\n } = props;\n\n const id = useId(idProp \|\| \"jkl-table-pagination\", { generateSuffix: !idProp });\n const { density: contextDensity } = useTableContext();\n\n const showAll = rowsPerPage <= 0;\n const numberOfPages = showAll ? 1 : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n const [currentPage, setCurrentPage] = useState(clamp(0, activePage, numberOfPages - 1));\n\n const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n const toPage = Number.parseInt(e.currentTarget.dataset[\"number\"] as string);\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, currentPage],\n );\n\n const [pagePickerValue, setPagePickerValue] = useState(String(currentPage + 1));\n const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n setPagePickerValue(e.target.value);\n try {\n const toPage = Number.parseInt(e.target.value) - 1;\n if (Number.isNaN(toPage)) {\n return;\n }\n\n if (toPage >= 0 && toPage < numberOfPages) {\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n }\n } catch {\n return;\n }\n },\n [onChange, setPagePickerValue, setCurrentPage, currentPage, numberOfPages],\n );\n\n const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (currentPage === 0) {\n // TODO: skal dette være en no-op i stedet?\n onChange(e, currentPage, currentPage);\n return;\n }\n const toPage = currentPage - 1;\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, currentPage],\n );\n\n const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (currentPage === numberOfPages - 1) {\n // TODO: skal dette være en no-op i stedet?\n onChange(e, currentPage, currentPage);\n return;\n }\n const toPage = currentPage + 1;\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, numberOfPages, currentPage],\n );\n\n return (\n <div\n className={clsx(\"jkl-table-pagination\", className)}\n {...rest}\n id={id}\n data-density={density \|\| contextDensity}\n ref={ref}\n >\n <div className=\"jkl-table-pagination__left\">\n <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n <span className=\"jkl-table-pagination__picker-label\" aria-hidden=\"true\">\n {labels.rowsPerPage}:\n </span>\n <NativeSelect\n className=\"jkl-table-pagination__picker-input\"\n label={labels.rowsPerPage}\n labelProps={{ srOnly: true }}\n name={`${id}-rows-per-page`}\n items={rowsPerPageItems.map((i) =>\n typeof i === \"number\" ? String(i) : { label: i.label, value: String(i.value) },\n )}\n value={String(rowsPerPage)}\n onChange={onChangeRowsPerPage}\n width=\"min(8rem, 100%)\"\n inline\n />\n </div>\n </div>\n <div className=\"jkl-table-pagination__right\">\n {numberOfPages !== 1 && (\n <nav className=\"jkl-table-pagination__nav\">\n {withGoToPage && (\n <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n <span className=\"jkl-table-pagination__picker-label\" aria-hidden=\"true\">\n {typeof withGoToPage === \"object\" ? withGoToPage.gotoLabel : \"Gå til side\"}:\n </span>\n {/ onChange først ved enter/submit */}\n <TextInput\n className=\"jkl-table-pagination__picker-input\"\n label={typeof withGoToPage === \"object\" ? withGoToPage.gotoLabel : \"Gå til side\"}\n labelProps={{ srOnly: true }}\n name={`${id}-go-to-page`}\n value={pagePickerValue}\n width=\"min(4rem, 100%)\"\n onChange={onPageChange}\n aria-invalid={\n pagePickerValue && pagePickerValue !== String(currentPage + 1)\n ? \"true\"\n : undefined\n }\n />\n </div>\n )}\n <ul>\n <li>\n <IconButton\n className=\"jkl-table-pagination__previous\"\n title={labels.previous}\n onClick={onPrevious}\n >\n <ChevronLeftIcon />\n </IconButton>\n </li>\n <PaginationPages\n id={id}\n activePage={activePage}\n numberOfPages={numberOfPages}\n onPageClick={onPageClick}\n />\n <li>\n <IconButton className=\"jkl-table-pagination__next\" title={labels.next} onClick={onNext}>\n <ChevronRightIcon />\n </IconButton>\n </li>\n </ul>\n </nav>\n )}\n </div>\n </div>\n );\n});\n\nconst PaginationPages: FC<{\n id: string;\n activePage: number;\n numberOfPages: number;\n onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n if (numberOfPages <= 7) {\n return (\n <>\n {Array.from({ length: numberOfPages }).map((_, i) => (\n <li key={`${id}-page-${i}`}>\n <button\n className={clsx(\"jkl-table-pagination__page\", {\n \"jkl-table-pagination__page--active\": activePage === i,\n })}\n type=\"button\"\n data-number={i}\n onClick={onPageClick}\n >\n {i + 1}\n </button>\n </li>\n ))}\n </>\n );\n }\n\n const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n const startEllipsis = Math.min(Math.max(activePage - 2, 1), numberOfPages - 6);\n const centerPageNumberStart = Math.min(startEllipsis + 1, numberOfPages - 5);\n const centerPageNumber = Math.min(centerPageNumberStart + 1, numberOfPages - 4);\n const centerPageNumberEnd = Math.min(centerPageNumberStart + 2, numberOfPages - 3);\n const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n return (\n <>\n <li>\n <PaginationPageButton isActive={activePage === 0} number={0} onClick={onPageClick} />\n </li>\n <li>\n {showStartEllipsis ? (\n <span className=\"jkl-table-pagination__ellipsis\" aria-hidden>\n {\"...\"}\n </span>\n ) : (\n <PaginationPageButton\n isActive={activePage === startEllipsis}\n number={startEllipsis}\n onClick={onPageClick}\n />\n )}\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumberStart}\n number={centerPageNumberStart}\n onClick={onPageClick}\n />\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumber}\n number={centerPageNumber}\n onClick={onPageClick}\n />\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumberEnd}\n number={centerPageNumberEnd}\n onClick={onPageClick}\n />\n </li>\n <li>\n {showEndEllipsis ? (\n <span className=\"jkl-table-pagination__ellipsis\" aria-hidden>\n {\"...\"}\n </span>\n ) : (\n <PaginationPageButton\n isActive={activePage === endEllipsis}\n number={endEllipsis}\n onClick={onPageClick}\n />\n )}\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === numberOfPages - 1}\n number={numberOfPages - 1}\n onClick={onPageClick}\n />\n </li>\n </>\n );\n};\n\nconst PaginationPageButton: FC<{\n isActive: boolean;\n number: number;\n onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n <button\n className={clsx(\"jkl-table-pagination__page\", {\n \"jkl-table-pagination__page--active\": isActive,\n })}\n type=\"button\"\n data-number={number}\n onClick={onClick}\n {...rest}\n >\n {number + 1}\n </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","density","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","contextDensity","useTableContext","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"TablePagination.js","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n forwardRef,\n useCallback,\n useState,\n type ChangeEventHandler,\n type FC,\n type MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TablePaginationProps {\n className?: string;\n id?: string;\n density?: Density;\n /*\n @default 0\n /\n activePage?: number;\n /\n Null eller negativt tall tolkes som \"vis alle\".\n /\n rowsPerPage: number;\n rowsPerPageItems: Array<number \| { label: string; value: number }>;\n totalNumberOfRows: number;\n /\n Viser et valgfritt inputfelt for å hoppe raskt til en spesifik side.\n * Du kan også sende inn en custom label hvis du ønsker det, ellers bruke\n * true for default label\n * @default false\n /\n withGoToPage?: boolean \| { gotoLabel: string };\n onChange: (\n e: React.SyntheticEvent,\n toPage: number,\n fromPage: number,\n ) => void;\n onChangeRowsPerPage: ChangeEventHandler<HTMLSelectElement>;\n /\n Dersom du ønsker å ha custom labels kan du sende inn disse. \"rowsPerPage\"\n * vises alltid på skjerm mens \"next\" og \"previous\" brukes som hint til\n * skjermlesere for ikon-knappene til Neste/Forrige side\n * @default { rowsPerPage: \"Rader per side\", previous: \"Forrige\", next: \"Neste\" }\n /\n labels?: {\n rowsPerPage: string;\n previous: string;\n next: string;\n };\n}\n\nfunction clamp(min: number, num: number, max: number): number {\n if (num < min) {\n return min;\n } else if (num > max) {\n return max;\n }\n return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(\n (props, ref) => {\n const {\n activePage = 0,\n totalNumberOfRows,\n rowsPerPage,\n rowsPerPageItems,\n className,\n density,\n id: idProp,\n withGoToPage = false,\n onChange,\n onChangeRowsPerPage,\n labels = {\n rowsPerPage: \"Rader per side\",\n previous: \"Forrige\",\n next: \"Neste\",\n },\n ...rest\n } = props;\n\n const id = useId(idProp \|\| \"jkl-table-pagination\", {\n generateSuffix: !idProp,\n });\n const { density: contextDensity } = useTableContext();\n\n const showAll = rowsPerPage <= 0;\n const numberOfPages = showAll\n ? 1\n : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n const [currentPage, setCurrentPage] = useState(\n clamp(0, activePage, numberOfPages - 1),\n );\n\n const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n const toPage = Number.parseInt(\n e.currentTarget.dataset[\"number\"] as string,\n );\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, currentPage],\n );\n\n const [pagePickerValue, setPagePickerValue] = useState(\n String(currentPage + 1),\n );\n const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n (e) => {\n setPagePickerValue(e.target.value);\n try {\n const toPage = Number.parseInt(e.target.value) - 1;\n if (Number.isNaN(toPage)) {\n return;\n }\n\n if (toPage >= 0 && toPage < numberOfPages) {\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n }\n } catch {\n return;\n }\n },\n [\n onChange,\n setPagePickerValue,\n setCurrentPage,\n currentPage,\n numberOfPages,\n ],\n );\n\n const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (currentPage === 0) {\n // TODO: skal dette være en no-op i stedet?\n onChange(e, currentPage, currentPage);\n return;\n }\n const toPage = currentPage - 1;\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, currentPage],\n );\n\n const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n (e) => {\n if (currentPage === numberOfPages - 1) {\n // TODO: skal dette være en no-op i stedet?\n onChange(e, currentPage, currentPage);\n return;\n }\n const toPage = currentPage + 1;\n onChange(e, toPage, currentPage);\n setCurrentPage(toPage);\n setPagePickerValue(String(toPage + 1));\n },\n [onChange, setCurrentPage, numberOfPages, currentPage],\n );\n\n return (\n <div\n className={clsx(\"jkl-table-pagination\", className)}\n {...rest}\n id={id}\n data-density={density \|\| contextDensity}\n ref={ref}\n >\n <div className=\"jkl-table-pagination__left\">\n <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n <span\n className=\"jkl-table-pagination__picker-label\"\n aria-hidden=\"true\"\n >\n {labels.rowsPerPage}:\n </span>\n <NativeSelect\n className=\"jkl-table-pagination__picker-input\"\n label={labels.rowsPerPage}\n labelProps={{ srOnly: true }}\n name={`${id}-rows-per-page`}\n items={rowsPerPageItems.map((i) =>\n typeof i === \"number\"\n ? String(i)\n : {\n label: i.label,\n value: String(i.value),\n },\n )}\n value={String(rowsPerPage)}\n onChange={onChangeRowsPerPage}\n width=\"min(8rem, 100%)\"\n inline\n />\n </div>\n </div>\n <div className=\"jkl-table-pagination__right\">\n {numberOfPages !== 1 && (\n <nav className=\"jkl-table-pagination__nav\">\n {withGoToPage && (\n <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n <span\n className=\"jkl-table-pagination__picker-label\"\n aria-hidden=\"true\"\n >\n {typeof withGoToPage === \"object\"\n ? withGoToPage.gotoLabel\n : \"Gå til side\"}\n :\n </span>\n {/ onChange først ved enter/submit */}\n <TextInput\n className=\"jkl-table-pagination__picker-input\"\n label={\n typeof withGoToPage === \"object\"\n ? withGoToPage.gotoLabel\n : \"Gå til side\"\n }\n labelProps={{ srOnly: true }}\n name={`${id}-go-to-page`}\n value={pagePickerValue}\n width=\"min(4rem, 100%)\"\n onChange={onPageChange}\n aria-invalid={\n pagePickerValue &&\n pagePickerValue !==\n String(currentPage + 1)\n ? \"true\"\n : undefined\n }\n />\n </div>\n )}\n <ul>\n <li>\n <IconButton\n className=\"jkl-table-pagination__previous\"\n title={labels.previous}\n onClick={onPrevious}\n >\n <ChevronLeftIcon />\n </IconButton>\n </li>\n <PaginationPages\n id={id}\n activePage={activePage}\n numberOfPages={numberOfPages}\n onPageClick={onPageClick}\n />\n <li>\n <IconButton\n className=\"jkl-table-pagination__next\"\n title={labels.next}\n onClick={onNext}\n >\n <ChevronRightIcon />\n </IconButton>\n </li>\n </ul>\n </nav>\n )}\n </div>\n </div>\n );\n },\n);\n\nconst PaginationPages: FC<{\n id: string;\n activePage: number;\n numberOfPages: number;\n onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n if (numberOfPages <= 7) {\n return (\n <>\n {Array.from({ length: numberOfPages }).map((_, i) => (\n <li key={`${id}-page-${i}`}>\n <button\n className={clsx(\"jkl-table-pagination__page\", {\n \"jkl-table-pagination__page--active\":\n activePage === i,\n })}\n type=\"button\"\n data-number={i}\n onClick={onPageClick}\n >\n {i + 1}\n </button>\n </li>\n ))}\n </>\n );\n }\n\n const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n const startEllipsis = Math.min(\n Math.max(activePage - 2, 1),\n numberOfPages - 6,\n );\n const centerPageNumberStart = Math.min(\n startEllipsis + 1,\n numberOfPages - 5,\n );\n const centerPageNumber = Math.min(\n centerPageNumberStart + 1,\n numberOfPages - 4,\n );\n const centerPageNumberEnd = Math.min(\n centerPageNumberStart + 2,\n numberOfPages - 3,\n );\n const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n return (\n <>\n <li>\n <PaginationPageButton\n isActive={activePage === 0}\n number={0}\n onClick={onPageClick}\n />\n </li>\n <li>\n {showStartEllipsis ? (\n <span\n className=\"jkl-table-pagination__ellipsis\"\n aria-hidden\n >\n {\"...\"}\n </span>\n ) : (\n <PaginationPageButton\n isActive={activePage === startEllipsis}\n number={startEllipsis}\n onClick={onPageClick}\n />\n )}\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumberStart}\n number={centerPageNumberStart}\n onClick={onPageClick}\n />\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumber}\n number={centerPageNumber}\n onClick={onPageClick}\n />\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === centerPageNumberEnd}\n number={centerPageNumberEnd}\n onClick={onPageClick}\n />\n </li>\n <li>\n {showEndEllipsis ? (\n <span\n className=\"jkl-table-pagination__ellipsis\"\n aria-hidden\n >\n {\"...\"}\n </span>\n ) : (\n <PaginationPageButton\n isActive={activePage === endEllipsis}\n number={endEllipsis}\n onClick={onPageClick}\n />\n )}\n </li>\n <li>\n <PaginationPageButton\n isActive={activePage === numberOfPages - 1}\n number={numberOfPages - 1}\n onClick={onPageClick}\n />\n </li>\n </>\n );\n};\n\nconst PaginationPageButton: FC<{\n isActive: boolean;\n number: number;\n onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n <button\n className={clsx(\"jkl-table-pagination__page\", {\n \"jkl-table-pagination__page--active\": isActive,\n })}\n type=\"button\"\n data-number={number}\n onClick={onClick}\n {...rest}\n >\n {number + 1}\n </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","density","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","contextDensity","useTableContext","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"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"}

package/build/es/components/table/TableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableRow.js","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\n\nexport interface ClickableRowProps {\n markClickedRows?: boolean;\n /** Lar deg kontrollere radens tilstand untenfra /\n isClicked?: boolean;\n onClick: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent> \| React.KeyboardEvent<HTMLTableRowElement>) => void;\n}\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n /\n Gir raden interaktivitet og en click-handler.\n */\n clickable?: ClickableRowProps;\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(({ className, clickable, children, ...rest }, ref) => {\n const { density } = useTableContext();\n const { isTableBody } = useTableSectionContext();\n\n const [clicked, setClicked] = useState(clickable?.isClicked \|\| false);\n\n useEffect(() => {\n setClicked((prev) ~~=> (~~clickable?.isClicked !== undefined ? clickable.isClicked : prev));\n }, [clickable?.isClicked]);\n\n if (isTableBody && clickable) {\n return (\n <tr\n onClick={function handleOnClick(e) {\n setClicked(!clicked);\n clickable.onClick(e);\n }}\n onKeyPress={function handleKeyPress(e) {\n if (e.key === \" \" \|\| e.key === \"Enter\") {\n e.preventDefault();\n setClicked(!clicked);\n clickable.onClick(e);\n }\n }}\n data-testid=\"jkl-clickable-table-row\"\n className={clsx(\"jkl-table-row\", \"jkl-table-row--clickable\", className, {\n [\"jkl-table-row--clicked\"]: clickable?.markClickedRows && clicked,\n })}\n aria-label=\"Klikkbar rad\"\n aria-pressed={clickable?.markClickedRows ? (clicked ? \"true\" : \"false\") : undefined}\n tabIndex={0}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children}\n </tr>\n );\n }\n\n return (\n <tr className={clsx(\"jkl-table-row\", className)} {...rest} ref={ref} data-density={density}>\n {children}\n </tr>\n );\n});\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"~~4QAmBM~~,~~MAAAA~~,EAAWC,~~GAA+C~~,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,~~KACpG~~,MAAEC,QAAAA,GAAYC,KACZC,YAAAA,GAAgBC,KAEjBC,EAASC,GAAcC,GAAS,MAAAV,OAAA,EAAAA,EAAWW,aAAa,~~GAM~~/D,~~OAJAC~~,GAAU,KACNH,GAAYI,~~QAAmC~~,KAAzB,MAAAb,OAAA,EAAAA,EAAWW,WAA0BX,EAAUW,UAAYE,~~GAAK~~,~~GACvF~~,CAAC,MAAAb,OAAAA,EAAAA,EAAWW,YAIPG,EAAC,KAFLR,GAAeN,EAEV,CACGe,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,~~EAAK~~,~~gBAAiB~~,~~2BAA4BrB~~,~~EAAW~~,~~CACnE~~,~~0BAA2B~~,MAAAC,OAAAA,EAAAA,EAAWqB,kBAAmBb,~~IAE9D~~,aAAW,eACX,~~eAAc~~,MAAAR,GAAAA,EAAWqB,~~gBAAmBb~~,~~EAAU~~,~~OAAS~~,~~aAAW~~,~~EAC1Ec~~,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,GAMR,~~CAAGF~~,UAAWqB,EAAK,gBAAiBrB,~~MAAgBG~~,~~EAAMC~~,IAAAA,~~EAAU~~,eAAcC,~~EAC9EH~~,SAAAA,~~GACL~~,~~IAIRJ~~,EAAS0B,YAAc"}
1	+ {"version":3,"file":"TableRow.js","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\n\nexport interface ClickableRowProps {\n markClickedRows?: boolean;\n /** Lar deg kontrollere radens tilstand untenfra /\n isClicked?: boolean;\n onClick: (\n e:\n \| React.MouseEvent<HTMLTableRowElement, MouseEvent>\n \| React.KeyboardEvent<HTMLTableRowElement>,\n ) => void;\n}\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n /\n Gir raden interaktivitet og en click-handler.\n */\n clickable?: ClickableRowProps;\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, clickable, children, ...rest }, ref) => {\n const { density } = useTableContext();\n const { isTableBody } = useTableSectionContext();\n\n const [clicked, setClicked] = useState(clickable?.isClicked \|\| false);\n\n useEffect(() => {\n setClicked((prev) =>\n clickable?.isClicked !== undefined ? clickable.isClicked : prev,\n );\n }, [clickable?.isClicked]);\n\n if (isTableBody && clickable) {\n return (\n <tr\n onClick={function handleOnClick(e) {\n setClicked(!clicked);\n clickable.onClick(e);\n }}\n onKeyPress={function handleKeyPress(e) {\n if (e.key === \" \" \|\| e.key === \"Enter\") {\n e.preventDefault();\n setClicked(!clicked);\n clickable.onClick(e);\n }\n }}\n data-testid=\"jkl-clickable-table-row\"\n className={clsx(\n \"jkl-table-row\",\n \"jkl-table-row--clickable\",\n className,\n {\n [\"jkl-table-row--clicked\"]:\n clickable?.markClickedRows && clicked,\n },\n )}\n aria-label=\"Klikkbar rad\"\n aria-pressed={\n clickable?.markClickedRows\n ? clicked\n ? \"true\"\n : \"false\"\n : undefined\n }\n tabIndex={0}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children}\n </tr>\n );\n }\n\n return (\n <tr\n className={clsx(\"jkl-table-row\", className)}\n {...rest}\n ref={ref}\n data-density={density}\n >\n {children}\n </tr>\n );\n },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"4QAuBA,MAAMA,EAAWC,GACb,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpC,MAAEC,QAAAA,GAAYC,KACZC,YAAAA,GAAgBC,KAEjBC,EAASC,GAAcC,GAAS,MAAAV,OAAA,EAAAA,EAAWW,aAAa,GAQ/D,OANAC,GAAU,KACNH,GAAYI,QACiB,KAAzB,MAAAb,OAAA,EAAAA,EAAWW,WAA0BX,EAAUW,UAAYE,GAAA,GAEhE,CAAC,MAAAb,OAAAA,EAAAA,EAAWW,YAIPG,EAAC,KAFLR,GAAeN,EAEV,CACGe,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EACP,gBACA,2BACArB,EACA,CACK,0BACG,MAAAC,OAAAA,EAAAA,EAAWqB,kBAAmBb,IAG1C,aAAW,eACX,eACI,MAAAR,GAAAA,EAAWqB,gBACLb,EACI,OACA,aACJ,EAEVc,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,GAMR,CACGF,UAAWqB,EAAK,gBAAiBrB,MAC7BG,EACJC,IAAAA,EACA,eAAcC,EAEbH,SAAAA,GAAA,IAMjBJ,EAAS0B,YAAc"}

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

@@ -6,7 +6,7 @@ export { TableCell } from './TableCell.js';
 export { TableColumn } from './TableColumn.js';
 export { TableColumnGroup } from './TableColumnGroup.js';
 export { useTableContext, TableContextProvider } from './tableContext.js';
-export { useTableSectionContext, TableSectionContextProvider } from './tableSectionContext.js';
+export { useTableSectionContext, TableSectionContextProvider, } from './tableSectionContext.js';
 export { TableFooter } from './TableFooter.js';
 export { TableHead } from './TableHead.js';
 export { TableHeader } from './TableHeader.js';

package/build/es/components/table/tableContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tableContext.js","sources":["../../../../src/components/table/tableContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\n\ntype TableContext = {\n density?: Density;\n collapseToList: boolean;\n};\n\nconst tableContext = createContext<TableContext>({\n density: undefined,\n collapseToList: false,\n});\n\nexport const useTableContext = (): TableContext => useContext(tableContext);\n\nexport interface TableContextProviderProps extends WithChildren {\n state: TableContext;\n}\n\nexport const TableContextProvider: React.FC<TableContextProviderProps> = ({ state, children }) => ~~(\n~~ <tableContext.Provider value={state}>{children}</tableContext.Provider>\n~~);\n~~"],"names":["tableContext","createContext","density","collapseToList","useTableContext","useContext","TableContextProvider","state","children","~~jsx","~~Provider","value"],"mappings":"8FAQA,MAAMA,EAAeC,EAA4B,CAC7CC,aAAS,EACTC,gBAAgB,IAGPC,EAAkB,IAAoBC,EAAWL,GAMjDM,EAA4D,~~EAAGC~~,MAAAA,~~EAAOC~~,SAAAA,~~KAC9EC~~,~~EAAAT~~,~~EAAaU,~~SAAb,CAAsBC,~~MAAOJ~~,EAAQC,SAAAA"}
1	+ {"version":3,"file":"tableContext.js","sources":["../../../../src/components/table/tableContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\n\ntype TableContext = {\n density?: Density;\n collapseToList: boolean;\n};\n\nconst tableContext = createContext<TableContext>({\n density: undefined,\n collapseToList: false,\n});\n\nexport const useTableContext = (): TableContext => useContext(tableContext);\n\nexport interface TableContextProviderProps extends WithChildren {\n state: TableContext;\n}\n\nexport const TableContextProvider: React.FC<TableContextProviderProps> = ({\n state,\n children,\n}) => <tableContext.Provider value={state}>{children}</tableContext.Provider>;\n"],"names":["tableContext","createContext","density","collapseToList","useTableContext","useContext","TableContextProvider","state","children","Provider","value"],"mappings":"8FAQA,MAAMA,EAAeC,EAA4B,CAC7CC,aAAS,EACTC,gBAAgB,IAGPC,EAAkB,IAAoBC,EAAWL,GAMjDM,EAA4D,EACrEC,MAAAA,EACAC,SAAAA,OACGR,EAAaS,SAAb,CAAsBC,MAAOH,EAAQC,SAAAA"}

package/build/es/components/table/tableSectionContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tableSectionContext.js","sources":["../../../../src/components/table/tableSectionContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\n\ntype TableSectionContext = {\n isTableHead: boolean;\n isTableBody: boolean;\n isTableFooter: boolean;\n};\n\nconst tableSectionContext = createContext<TableSectionContext>({\n isTableHead: false,\n isTableBody: false,\n isTableFooter: false,\n});\n\nexport const useTableSectionContext = (): TableSectionContext => useContext(tableSectionContext);\n\nexport interface TableSectionContextProviderProps extends WithChildren {\n state: TableSectionContext;\n}\n\nexport const TableSectionContextProvider: React.FC<TableSectionContextProviderProps> = ({ state, children }) => (\n <tableSectionContext.Provider value={state}>{children}</tableSectionContext.Provider>\n);\n"],"names":["tableSectionContext","createContext","isTableHead","isTableBody","isTableFooter","useTableSectionContext","useContext","TableSectionContextProvider","state","children","jsx","Provider","value"],"mappings":"8FASA,MAAMA,EAAsBC,EAAmC,CAC3DC,aAAa,EACbC,aAAa,EACbC,eAAe,IAGNC,EAAyB,~~IAA2BC~~,EAAWN,~~GAM/DO~~,~~EAA0E~~,EAAGC,MAAAA,EAAOC,SAAAA,~~KAC5FC~~,EAAAV,EAAoBW,SAApB,CAA6BC,MAAOJ,~~EAAQC~~,SAAAA"}
1	+ {"version":3,"file":"tableSectionContext.js","sources":["../../../../src/components/table/tableSectionContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\n\ntype TableSectionContext = {\n isTableHead: boolean;\n isTableBody: boolean;\n isTableFooter: boolean;\n};\n\nconst tableSectionContext = createContext<TableSectionContext>({\n isTableHead: false,\n isTableBody: false,\n isTableFooter: false,\n});\n\nexport const useTableSectionContext = (): TableSectionContext =>\n useContext(tableSectionContext);\n\nexport interface TableSectionContextProviderProps extends WithChildren {\n state: TableSectionContext;\n}\n\nexport const TableSectionContextProvider: React.FC<\n TableSectionContextProviderProps\n> = ({ state, children }) => (\n <tableSectionContext.Provider value={state}>\n {children}\n </tableSectionContext.Provider>\n);\n"],"names":["tableSectionContext","createContext","isTableHead","isTableBody","isTableFooter","useTableSectionContext","useContext","TableSectionContextProvider","state","children","jsx","Provider","value"],"mappings":"8FASA,MAAMA,EAAsBC,EAAmC,CAC3DC,aAAa,EACbC,aAAa,EACbC,eAAe,IAGNC,EAAyB,IAClCC,EAAWN,GAMFO,EAET,EAAGC,MAAAA,EAAOC,SAAAA,KACTC,EAAAV,EAAoBW,SAApB,CAA6BC,MAAOJ,EAChCC,SAAAA"}

package/build/es/components/table/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import { TableSortDirection } from \"./TableHeader.js\";\n\nexport type TableSortProps = ReturnType<ReturnType<typeof useSortableTableHeader>[\"getSortProps\"]>[\"sortable\"];\n\nexport const useSortableTableHeader = (\n activeSortKey: string,\n activeSortDirection: TableSortDirection,\n onChange: (newSortKey: string, newSortDirection: TableSortDirection) => void,\n) => {\n const calculateNewSortParameters = (sortKey: string): TableSortDirection => {\n if (sortKey === activeSortKey && activeSortDirection === \"desc\") {\n return \"asc\";\n }\n\n return \"desc\";\n };\n\n const handleClick = (sortKey: string) => {\n const newSortParameters = calculateNewSortParameters(sortKey);\n onChange(sortKey, newSortParameters);\n };\n\n const getSortProps = (sortKey: string) => {\n return {\n sortable: {\n onClick: () => handleClick(sortKey),\n direction: activeSortKey === sortKey ? activeSortDirection : undefined,\n },\n };\n };\n\n return {\n getSortProps,\n };\n};\n"],"names":["useSortableTableHeader","activeSortKey","activeSortDirection","onChange","calculateNewSortParameters","handleClick","sortKey","newSortParameters","getSortProps","sortable","onClick","direction"],"mappings":"~~AAIO~~,MAAMA,EAAyB,CAClCC,EACAC,EACAC,~~KAEMC~~,~~MAQAC~~,EAAeC,IACXC,MAAAA,~~EATyB~~,~~CAACD~~,~~GAC5BA~~,IAAYL,GAAyC,SAAxBC,EACtB,MAGJ,OAImBE,CAA2BE,GACrDH,EAASG,EAASC,EAAiB,~~EAYhC~~,MAAA,CACHC,~~aAVkBF~~,IACX,CACHG,SAAU,CACNC,QAAS,IAAML,EAAYC,GAC3BK,~~UAAWV~~,IAAkBK,EAAUJ,OAAsB,~~KAMrE~~"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import { TableSortDirection } from \"./TableHeader.js\";\n\nexport type TableSortProps = ReturnType<\n ReturnType<typeof useSortableTableHeader>[\"getSortProps\"]\n>[\"sortable\"];\n\nexport const useSortableTableHeader = (\n activeSortKey: string,\n activeSortDirection: TableSortDirection,\n onChange: (\n newSortKey: string,\n newSortDirection: TableSortDirection,\n ) => void,\n) => {\n const calculateNewSortParameters = (\n sortKey: string,\n ): TableSortDirection => {\n if (sortKey === activeSortKey && activeSortDirection === \"desc\") {\n return \"asc\";\n }\n\n return \"desc\";\n };\n\n const handleClick = (sortKey: string) => {\n const newSortParameters = calculateNewSortParameters(sortKey);\n onChange(sortKey, newSortParameters);\n };\n\n const getSortProps = (sortKey: string) => {\n return {\n sortable: {\n onClick: () => handleClick(sortKey),\n direction:\n activeSortKey === sortKey ? activeSortDirection : undefined,\n },\n };\n };\n\n return {\n getSortProps,\n };\n};\n"],"names":["useSortableTableHeader","activeSortKey","activeSortDirection","onChange","calculateNewSortParameters","handleClick","sortKey","newSortParameters","getSortProps","sortable","onClick","direction"],"mappings":"AAMO,MAAMA,EAAyB,CAClCC,EACAC,EACAC,KAKMC,MAUAC,EAAeC,IACXC,MAAAA,EAXyB,CAC/BD,GAEIA,IAAYL,GAAyC,SAAxBC,EACtB,MAGJ,OAImBE,CAA2BE,GACrDH,EAASG,EAASC,EAAiB,EAahC,MAAA,CACHC,aAXkBF,IACX,CACHG,SAAU,CACNC,QAAS,IAAML,EAAYC,GAC3BK,UACIV,IAAkBK,EAAUJ,OAAsB,KAM9D"}

package/build/es/components/tabs/NavTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavTab.js","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ElementType, forwardRef, useCallback, type AnchorHTMLAttributes } from \"react\";\n\nexport interface NavTabProps<T extends object = Record<string, unknown>>\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n /** Sett til true for den nåværende fanen. False på resten. /\n \"aria-selected\": boolean;\n className?: string;\n id?: string;\n /\n Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.\n * @default \"a\"\n /\n component?: ElementType;\n /* Send inn custom props til `component`. Nyttig om routeren din har noe fancy custom greier. /\n componentProps?: T;\n /* Vanlig alternativ til `href` i routere. /\n to?: string;\n href?: string;\n /\n Hook for å kunne stoppe default oppførsel ved tastaturnavigasjon.\n \n Om default oppførsel ikke fungerer for deg og du mister tastaturfokus etter\n * navigasjon kan du returnere `false` her og sørge for korrekt oppførsel selv.\n */\n onBeforeKeyboardNavigation?: (from: HTMLAnchorElement, to: HTMLAnchorElement) => boolean \| void;\n}\n\nexport const NavTab = forwardRef<HTMLAnchorElement, NavTabProps>((props, ref) => {\n const {\n component = \"a\",\n \"aria-selected\": selected,\n className,\n componentProps = {},\n onBeforeKeyboardNavigation: onBeforeNavigate,\n ...rest\n } = props;\n\n const Component = component;\n\n const navigate = useCallback(\n (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n if (onBeforeNavigate) {\n // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n const doNavigate = onBeforeNavigate(from, to);\n if (doNavigate === false) {\n return;\n }\n }\n\n to.focus();\n // Click brukes for å være router-agnostisk\n to.click();\n },\n [onBeforeNavigate],\n );\n\n const handleOnKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === \"ArrowLeft\") {\n const current = event.currentTarget;\n const prev = event.currentTarget.previousSibling;\n\n if (prev) {\n navigate(current, prev as HTMLAnchorElement);\n } else {\n navigate(current, current.parentElement?.lastChild?.previousSibling as HTMLAnchorElement);\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 === \"A\") {\n navigate(current, next as HTMLAnchorElement);\n } else {\n navigate(current, current.parentElement?.firstChild as HTMLAnchorElement);\n }\n }\n },\n [navigate],\n );\n\n return (\n <Component\n ref={ref}\n {...rest}\n {...componentProps}\n role=\"tab\"\n aria-selected={selected}\n className={clsx(\"jkl-tab\", className)}\n onKeyDown={handleOnKeyDown}\n // En faneliste skal være én fokuserbar gruppe.\n // Piltaster brukes for å veksle mellom faner.\n // Bare den aktive fanen skal være fokuserbar med tastatur.\n tabIndex={selected ? 0 : -1}\n />\n );\n});\n\nNavTab.displayName = \"NavTab\";\n"],"names":["NavTab","forwardRef","props","ref","component","selected","className","componentProps","onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","clsx","onKeyDown","tabIndex","displayName"],"mappings":"~~0IA4BO~~,MAAMA,EAASC,~~GAA2C~~,CAACC,EAAOC,~~KAC/D~~,MACFC,UAAAA,EAAY,IACZ,gBAAiBC,EACjBC,UAAAA,EACAC,eAAAA,EAAiB,CAAC,EAClBC,2BAA4BC,KACzBC,GACHR,EAEES,EAAYP,EAEZQ,EAAWC,GACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,GACnBM,cACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,~~IAGkB~~,OAAAE,EAAA,OAAAC,EAAAL,EAAQM,~~oBAARD~~,~~EAAAA,~~EAAuBE,~~gBAAvB~~,~~EAAAH~~,~~EAAkCD~~,~~iBAE5D,~~CAEIL,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBO,EAAOV,EAAMG,cAAcQ,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbnB,EAASS,EAASQ,~~GAETjB~~,~~EAAAS~~,~~EAAS~~,OAAAW,EAAAX,EAAQM,oBAAR,EAAAK,~~EAAuBC~~,~~WAEjD~~,IAEJ,CAACrB,IAID,OAAAsB,EAACvB,EAAA,CACGR,IAAAA,KACIO,KACAH,EACJ4B,KAAK,MACL,gBAAe9B,EACfC,UAAW8B,EAAK,UAAW9B,GAC3B+B,UAAWnB,EAIXoB,SAAUjC,EAAW,GAAI,GAAA,~~IAKrCL~~,EAAOuC,YAAc"}
1	+ {"version":3,"file":"NavTab.js","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ElementType,\n forwardRef,\n useCallback,\n type AnchorHTMLAttributes,\n} from \"react\";\n\nexport interface NavTabProps<T extends object = Record<string, unknown>>\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n /** Sett til true for den nåværende fanen. False på resten. /\n \"aria-selected\": boolean;\n className?: string;\n id?: string;\n /\n Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.\n * @default \"a\"\n /\n component?: ElementType;\n /* Send inn custom props til `component`. Nyttig om routeren din har noe fancy custom greier. /\n componentProps?: T;\n /* Vanlig alternativ til `href` i routere. /\n to?: string;\n href?: string;\n /\n Hook for å kunne stoppe default oppførsel ved tastaturnavigasjon.\n \n Om default oppførsel ikke fungerer for deg og du mister tastaturfokus etter\n * navigasjon kan du returnere `false` her og sørge for korrekt oppførsel selv.\n */\n onBeforeKeyboardNavigation?: (\n from: HTMLAnchorElement,\n to: HTMLAnchorElement,\n ) => boolean \| void;\n}\n\nexport const NavTab = forwardRef<HTMLAnchorElement, NavTabProps>(\n (props, ref) => {\n const {\n component = \"a\",\n \"aria-selected\": selected,\n className,\n componentProps = {},\n onBeforeKeyboardNavigation: onBeforeNavigate,\n ...rest\n } = props;\n\n const Component = component;\n\n const navigate = useCallback(\n (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n if (onBeforeNavigate) {\n // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n const doNavigate = onBeforeNavigate(from, to);\n if (doNavigate === false) {\n return;\n }\n }\n\n to.focus();\n // Click brukes for å være router-agnostisk\n to.click();\n },\n [onBeforeNavigate],\n );\n\n const handleOnKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n if (event.key === \"ArrowLeft\") {\n const current = event.currentTarget;\n const prev = event.currentTarget.previousSibling;\n\n if (prev) {\n navigate(current, prev as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement?.lastChild\n ?.previousSibling as HTMLAnchorElement,\n );\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 === \"A\") {\n navigate(current, next as HTMLAnchorElement);\n } else {\n navigate(\n current,\n current.parentElement\n ?.firstChild as HTMLAnchorElement,\n );\n }\n }\n },\n [navigate],\n );\n\n return (\n <Component\n ref={ref}\n {...rest}\n {...componentProps}\n role=\"tab\"\n aria-selected={selected}\n className={clsx(\"jkl-tab\", className)}\n onKeyDown={handleOnKeyDown}\n // En faneliste skal være én fokuserbar gruppe.\n // Piltaster brukes for å veksle mellom faner.\n // Bare den aktive fanen skal være fokuserbar med tastatur.\n tabIndex={selected ? 0 : -1}\n />\n );\n },\n);\n\nNavTab.displayName = \"NavTab\";\n"],"names":["NavTab","forwardRef","props","ref","component","selected","className","componentProps","onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","clsx","onKeyDown","tabIndex","displayName"],"mappings":"0IAoCO,MAAMA,EAASC,GAClB,CAACC,EAAOC,KACE,MACFC,UAAAA,EAAY,IACZ,gBAAiBC,EACjBC,UAAAA,EACAC,eAAAA,EAAiB,CAAC,EAClBC,2BAA4BC,KACzBC,GACHR,EAEES,EAAYP,EAEZQ,EAAWC,GACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,GACnBM,cACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,IAKI,OAAAE,EAAA,OAAAC,EAAAL,EAAQM,sBAARD,EAAuBE,kBAAvBH,EACMD,iBAGlB,CAEIL,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBO,EAAOV,EAAMG,cAAcQ,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbnB,EAASS,EAASQ,GAElBjB,EACIS,EACA,OAAAW,EAAAX,EAAQM,oBAAR,EAAAK,EACMC,WAGlB,IAEJ,CAACrB,IAID,OAAAsB,EAACvB,EAAA,CACGR,IAAAA,KACIO,KACAH,EACJ4B,KAAK,MACL,gBAAe9B,EACfC,UAAW8B,EAAK,UAAW9B,GAC3B+B,UAAWnB,EAIXoB,SAAUjC,EAAW,GAAI,GAAA,IAMzCL,EAAOuC,YAAc"}

package/build/es/components/tabs/NavTabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavTabs.js","sources":["../../../../src/components/tabs/NavTabs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport type { Density, WithChildren } from \"../../core/types.js\";\n\nexport interface NavTabsProps extends WithChildren {\n \"aria-label\"?: string;\n className?: string;\n density?: Density;\n id?: string;\n}\n\nexport const NavTabs = ({\n \"aria-label\": ariaLabel,\n children,\n className,\n density = \"comfortable\",\n ...rest\n}: NavTabsProps) => {\n const [tabsRect, setTabsRect] = useState<DOMRect>();\n const [activeRect, setActiveRect] = useState<DOMRect>();\n\n const scrollRef = useRef<HTMLDivElement>(null);\n const tablistRef = useRef<HTMLDivElement>(null);\n const activeRef = useRef<HTMLElement>(null);\n\n const selectedIndex = React.Children.toArray(children).findIndex((navTab) => {\n if (!React.isValidElement(navTab)) {\n return false;\n }\n return navTab.props[\"aria-selected\"] === true;\n });\n\n useEffect(() => {\n if (tablistRef.current) {\n setTabsRect(tablistRef.current.getBoundingClientRect());\n }\n if (activeRef.current) {\n setActiveRect(activeRef.current.getBoundingClientRect());\n }\n }, [selectedIndex, density]);\n\n return (\n <div {...rest} data-layout-density={density} className={clsx(\"jkl-tabs\", className)} ref={scrollRef}>\n <div role=\"tablist\" aria-label={ariaLabel} ref={tablistRef} className=\"jkl-tablist\">\n {React.Children.map(children, (child, index) => {\n return React.isValidElement(child)\n ? React.cloneElement<any>(child, {\n ref: selectedIndex === index ? activeRef : undefined,\n })\n : null;\n })}\n <span\n className=\"jkl-tablist__indicator\"\n style={{\n left: (activeRect?.left \|\| 0) - (tabsRect?.left \|\| 0) + (scrollRef.current?.scrollLeft \|\| 0),\n bottom: -1,\n width: (activeRect?.width \|\| 0) - (density === \"compact\" ? 32 : 38),\n }}\n />\n </div>\n </div>\n );\n};\n"],"names":["NavTabs","ariaLabel","children","className","density","rest","tabsRect","setTabsRect","useState","activeRect","setActiveRect","scrollRef","useRef","tablistRef","activeRef","selectedIndex","React","Children","toArray","findIndex","navTab","isValidElement","props","useEffect","current","getBoundingClientRect","jsx","clsx","ref","jsxs","role","map","child","index","cloneElement","style","left","_a","scrollLeft","bottom","width"],"mappings":"+JAWO,MAAMA,EAAU,EACnB,aAAcC,EACdC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,iBACPC,YAEH,MAAOC,EAAUC,GAAeC,KACzBC,EAAYC,GAAiBF,IAE9BG,EAAYC,EAAuB,MACnCC,EAAaD,EAAuB,MACpCE,EAAYF,EAAoB,MAEhCG,EAAgBC,EAAMC,SAASC,QAAQhB,GAAUiB,~~WAAWC~~,~~KACzDJ~~,EAAMK,eAAeD,KAGe,IAAlCA,EAAOE,MAAM,~~mBAGxB~~,OAAAC,GAAU,KACFV,EAAWW,SACCjB,EAAAM,EAAWW,QAAQC,yBAE/BX,EAAUU,SACId,EAAAI,EAAUU,QAAQC,wBAAuB,GAE5D,CAACV,EAAeX,IAGfsB,EAAC,~~UAAQrB~~,~~EAAM~~,sBAAqBD,~~EAASD~~,UAAWwB,EAAK,WAAYxB,~~GAAYyB~~,IAAKjB,~~EACtFT~~,SAAA2B,EAAC,~~OAAIC~~,KAAK,~~UAAU~~,aAAY7B,~~EAAW2B~~,IAAKf,~~EAAYV~~,UAAU,~~cACjED~~,SAAA,CAAAc,EAAMC,SAASc,IAAI7B,GAAU,CAAC8B,EAAOC,IAC3BjB,EAAMK,eAAeW,GACtBhB,EAAMkB,aAAkBF,EAAO,CAC3BJ,~~IAAKb~~,IAAkBkB,~~EAAQnB~~,~~OAAY~~,~~IAE/C~~,OAEVY,EAAC,OAAA,CACGvB,UAAU,yBACVgC,MAAO,CACHC,~~OAAO~~,MAAA3B,OAAA,EAAAA,EAAY2B,OAAQ,~~KAAM~~,MAAA9B,OAAA,EAAAA,EAAU8B,OAAQ,~~KAAM~~,OAAAC,EAAA1B,EAAUa,cAAV,EAAAa,EAAmBC,aAAc,~~GAC1FC~~,QAAQ,EACRC,~~QAAQ~~,MAAA/B,OAAAA,EAAAA,EAAY+B,QAAS,~~IAAkB~~,YAAZpC,EAAwB,GAAK,~~WAIhF~~"}
1	+ {"version":3,"file":"NavTabs.js","sources":["../../../../src/components/tabs/NavTabs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport type { Density, WithChildren } from \"../../core/types.js\";\n\nexport interface NavTabsProps extends WithChildren {\n \"aria-label\"?: string;\n className?: string;\n density?: Density;\n id?: string;\n}\n\nexport const NavTabs = ({\n \"aria-label\": ariaLabel,\n children,\n className,\n density = \"comfortable\",\n ...rest\n}: NavTabsProps) => {\n const [tabsRect, setTabsRect] = useState<DOMRect>();\n const [activeRect, setActiveRect] = useState<DOMRect>();\n\n const scrollRef = useRef<HTMLDivElement>(null);\n const tablistRef = useRef<HTMLDivElement>(null);\n const activeRef = useRef<HTMLElement>(null);\n\n const selectedIndex = React.Children.toArray(children).findIndex(\n (navTab) => {\n if (!React.isValidElement(navTab)) {\n return false;\n }\n return navTab.props[\"aria-selected\"] === true;\n },\n );\n\n useEffect(() => {\n if (tablistRef.current) {\n setTabsRect(tablistRef.current.getBoundingClientRect());\n }\n if (activeRef.current) {\n setActiveRect(activeRef.current.getBoundingClientRect());\n }\n }, [selectedIndex, density]);\n\n return (\n <div\n {...rest}\n data-layout-density={density}\n className={clsx(\"jkl-tabs\", className)}\n ref={scrollRef}\n >\n <div\n role=\"tablist\"\n aria-label={ariaLabel}\n ref={tablistRef}\n className=\"jkl-tablist\"\n >\n {React.Children.map(children, (child, index) => {\n return React.isValidElement(child)\n ? React.cloneElement<any>(child, {\n ref:\n selectedIndex === index\n ? activeRef\n : undefined,\n })\n : null;\n })}\n <span\n className=\"jkl-tablist__indicator\"\n style={{\n left:\n (activeRect?.left \|\| 0) -\n (tabsRect?.left \|\| 0) +\n (scrollRef.current?.scrollLeft \|\| 0),\n bottom: -1,\n width:\n (activeRect?.width \|\| 0) -\n (density === \"compact\" ? 32 : 38),\n }}\n />\n </div>\n </div>\n );\n};\n"],"names":["NavTabs","ariaLabel","children","className","density","rest","tabsRect","setTabsRect","useState","activeRect","setActiveRect","scrollRef","useRef","tablistRef","activeRef","selectedIndex","React","Children","toArray","findIndex","navTab","isValidElement","props","useEffect","current","getBoundingClientRect","jsx","clsx","ref","jsxs","role","map","child","index","cloneElement","style","left","_a","scrollLeft","bottom","width"],"mappings":"+JAWO,MAAMA,EAAU,EACnB,aAAcC,EACdC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,iBACPC,YAEH,MAAOC,EAAUC,GAAeC,KACzBC,EAAYC,GAAiBF,IAE9BG,EAAYC,EAAuB,MACnCC,EAAaD,EAAuB,MACpCE,EAAYF,EAAoB,MAEhCG,EAAgBC,EAAMC,SAASC,QAAQhB,GAAUiB,WAClDC,KACQJ,EAAMK,eAAeD,KAGe,IAAlCA,EAAOE,MAAM,mBAI5B,OAAAC,GAAU,KACFV,EAAWW,SACCjB,EAAAM,EAAWW,QAAQC,yBAE/BX,EAAUU,SACId,EAAAI,EAAUU,QAAQC,wBAAuB,GAE5D,CAACV,EAAeX,IAGfsB,EAAC,MAAA,IACOrB,EACJ,sBAAqBD,EACrBD,UAAWwB,EAAK,WAAYxB,GAC5ByB,IAAKjB,EAELT,SAAA2B,EAAC,MAAA,CACGC,KAAK,UACL,aAAY7B,EACZ2B,IAAKf,EACLV,UAAU,cAETD,SAAA,CAAAc,EAAMC,SAASc,IAAI7B,GAAU,CAAC8B,EAAOC,IAC3BjB,EAAMK,eAAeW,GACtBhB,EAAMkB,aAAkBF,EAAO,CAC3BJ,IACIb,IAAkBkB,EACZnB,OACA,IAEd,OAEVY,EAAC,OAAA,CACGvB,UAAU,yBACVgC,MAAO,CACHC,OACK,MAAA3B,OAAA,EAAAA,EAAY2B,OAAQ,KACpB,MAAA9B,OAAA,EAAAA,EAAU8B,OAAQ,KAClB,OAAAC,EAAA1B,EAAUa,cAAV,EAAAa,EAAmBC,aAAc,GACtCC,QAAQ,EACRC,QACK,MAAA/B,OAAAA,EAAAA,EAAY+B,QAAS,IACT,YAAZpC,EAAwB,GAAK,WAG9C"}

package/build/es/components/tabs/Tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab.js","sources":["../../../../src/components/tabs/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\n\nexport interface TabProps extends WithChildren {\n className?: string;\n}\n\n/*\n En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.\n \n Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tab = React.forwardRef<HTMLButtonElement, TabProps>((props, ref) => {\n const classes = clsx(\"jkl-tab\", props.className);\n\n return <button role=\"tab\" type=\"button\" ref={ref} {...props} className={classes} ~~/>;\~~n});\n\nTab.displayName = \"Tab\";\n"],"names":["Tab","React","forwardRef","props","ref","classes","clsx","className","jsx","role","type","displayName"],"mappings":"2GAaO,MAAMA,EAAMC,EAAMC,~~YAAwC~~,CAACC,EAAOC,~~KACrE~~,MAAMC,EAAUC,EAAK,UAAWH,EAAMI,~~WAE/B~~,OAAAC,EAAC,~~SAAO~~,~~CAAAC~~,KAAK,~~MAAMC~~,KAAK,~~SAASN~~,IAAAA,~~KAAcD~~,~~EAAOI~~,UAAWF,~~GAAS~~,~~IAGrFL~~,EAAIW,YAAc"}
1	+ {"version":3,"file":"Tab.js","sources":["../../../../src/components/tabs/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\n\nexport interface TabProps extends WithChildren {\n className?: string;\n}\n\n/*\n En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.\n \n Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tab = React.forwardRef<HTMLButtonElement, TabProps>(\n (props, ref) => {\n const classes = clsx(\"jkl-tab\", props.className);\n\n return (\n <button\n role=\"tab\"\n type=\"button\"\n ref={ref}\n {...props}\n className={classes}\n />\n );\n },\n);\n\nTab.displayName = \"Tab\";\n"],"names":["Tab","React","forwardRef","props","ref","classes","clsx","className","jsx","role","type","displayName"],"mappings":"2GAaO,MAAMA,EAAMC,EAAMC,YACrB,CAACC,EAAOC,KACJ,MAAMC,EAAUC,EAAK,UAAWH,EAAMI,WAGlC,OAAAC,EAAC,SAAA,CACGC,KAAK,MACLC,KAAK,SACLN,IAAAA,KACID,EACJI,UAAWF,GAAA,IAM3BL,EAAIW,YAAc"}

package/build/es/components/tabs/TabList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabList.js","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 } = 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((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 (current.parentElement?.lastChild?.previousSibling as HTMLElement).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 return (\n <div role=\"tablist\" ref={tabsRef} {...rest} className={clsx(\"jkl-tablist\", className)}>\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: (activeRect?.width \|\| 0) - (density === \"compact\" ? 32 : 38),\n }}\n />\n </div>\n );\n};\n"],"names":["TabList","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":"kOAsBO,MAAMA,EAAU,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,~~GAASL~~,~~GAC9DM~~,QAAAA,GAAYC,KAEbC,EAAUC,GAAeC,KACzBC,EAAYC,GAAiBF,IAE9BG,EAAUC,EAAuB,MACjCC,EAAYD,EAA0B,MAE5CE,GAAU,KACFH,EAAQI,SACIR,EAAAI,EAAQI,QAAQC,yBAE5BH,EAAUE,SACIL,EAAAG,EAAUE,QAAQC,wBAAuB,GAE5D,CAACjB,EAAaK,~~IAEXa~~,~~MAAAA~~,EAAiBC,~~GAAaC~~,~~cAC5BA~~,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,~~SAErB~~,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,gBAAvBH,EAAAA,~~EAAkCF~~,~~iBAAgCC~~,~~OAE3E~~,CAEIL,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAML,EAAUI,EAAME,cAChBQ,EAAOV,EAAME,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAjB,EAAQY,oBAARK,EAAAA,EAAuBC,YAA2BT,OAE3D,~~IACD~~,~~IAEH~~,~~OACKU~~,~~EAAA~~,MAAA,~~CAAIC~~,KAAK,~~UAAUC~~,IAAKzB,~~KAAaR~~,~~EAAMN~~,UAAWwC,EAAK,cAAexC,~~GACtED~~,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,IAAA,IAGVO,EAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,OAAAA,EAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QAAQ,EACRC,~~QAAQ~~,MAAA5C,OAAAA,EAAAA,EAAY4C,QAAS,~~IAAkB~~,YAAZjD,EAAwB,GAAK,~~SAG5E~~"}
1	+ {"version":3,"file":"TabList.js","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":["TabList","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":"kOAsBO,MAAMA,EAAU,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,GACIM,QAAAA,GAAYC,KAEbC,EAAUC,GAAeC,KACzBC,EAAYC,GAAiBF,IAE9BG,EAAUC,EAAuB,MACjCC,EAAYD,EAA0B,MAE5CE,GAAU,KACFH,EAAQI,SACIR,EAAAI,EAAQI,QAAQC,yBAE5BH,EAAUE,SACIL,EAAAG,EAAUE,QAAQC,wBAAuB,GAE5D,CAACjB,EAAaK,IAEjB,MAAMa,EAAiBC,GAClBC,cACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,gBAAvBH,EAAAA,EACMF,iBACRC,OAEV,CAEIL,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAML,EAAUI,EAAME,cAChBQ,EAAOV,EAAME,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAjB,EAAQY,oBAARK,EAAAA,EAAuBC,YAA2BT,OAE3D,IAEJ,IAIA,OAAAU,EAAC,MAAA,CACGC,KAAK,UACLC,IAAKzB,KACDR,EACJN,UAAWwC,EAAK,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,IAAA,IAGVO,EAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,OAAAA,EAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QAAQ,EACRC,QACK,MAAA5C,OAAAA,EAAAA,EAAY4C,QAAS,IACT,YAAZjD,EAAwB,GAAK,SAE1C"}

package/build/es/components/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sources":["../../../../../../node_modules/.pnpm/nanoid@3.3.7/node_modules/nanoid/index.browser.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { urlAlphabet } from './url-alphabet/index.js'\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n return (size = defaultSize) => {\n let id = ''\n while (true) {\n let bytes = getRandom(step)\n let j = step\n while (j--) {\n id += alphabet[bytes[j] & mask] \|\| ''\n if (id.length === size) return id\n }\n }\n }\n}\nlet customAlphabet = (alphabet, size = 21) =>\n customRandom(alphabet, size, random)\nlet nanoid = (size = 21) =>\n crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n byte &= 63\n if (byte < 36) {\n id += byte.toString(36)\n } else if (byte < 62) {\n id += (byte - 26).toString(36).toUpperCase()\n } else if (byte > 62) {\n id += '-'\n } else {\n id += '_'\n }\n return id\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 = ({ onChange, defaultTab, density, ...props }: TabsProps) => {\n const [activeIndex, setActiveIndex] = useState(defaultTab ?? 0);\n\n const previousTabIndex = usePreviousValue(activeIndex);\n\n useEffect(() => {\n if (previousTabIndex !== undefined && previousTabIndex !== activeIndex && onChange) {\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)) 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 (!React.isValidElement<TabPanelProps & React.HTMLAttributes<HTMLDivElement>>(child) \|\| childIndex === 0)\n return;\n\n const tabPanelIndex = childIndex - 1;\n\n return tabPanelIndex === activeIndex\n ? React.cloneElement<TabPanelProps & React.HTMLAttributes<HTMLDivElement>>(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 {...props} className={clsx(\"jkl-tabs\", props.className)} data-density={density}>\n {renderTabList()}\n {renderTabPanels()}\n </div>\n </TabsContextProvider>\n );\n};\n"],"names":["nanoid","size","crypto","getRandomValues","Uint8Array","reduce","id","byte","toString","toUpperCase","Tabs","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","TabsContextProvider","state","jsxs","className","clsx","cloneElement","renderTabList","map","child","childIndex","tabPanelIndex"],"mappings":"+SAmBA,IAAIA,EAAS,CAACC,EAAO,KACnBC,OAAOC,gBAAgB,IAAIC,WAAWH,IAAOI,QAAO,CAACC,EAAIC,IAGrDD,IAFFC,GAAQ,IACG,GACHA,EAAKC,SAAS,IACXD,EAAO,IACTA,EAAO,IAAIC,SAAS,IAAIC,cACtBF,EAAO,GACV,IAEA,KAGP,~~ICVQ~~,~~MAAAG~~,EAAO,~~EAAGC~~,SAAAA,~~EAAUC~~,WAAAA,~~EAAYC~~,QAAAA,~~KAAYC~~,~~MAC/C~~,MAACC,EAAaC,GAAkBC,EAASL,GAAc,GAEvDM,EAAmBC,EAAiBJ,GAE1CK,GAAU,~~UACmB~~,IAArBF,~~GAAkCA~~,IAAqBH,~~GAAeJ~~,~~GACtEA~~,EAASI,EAAW,GAEzB,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAmB,KACxCM,EAAaC,GAAkBP,EAAmB,IAEnDQ,EAAaC,GAAY,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,WAAWnC,EAAO,QACjCwB,GAACW,GAAS,IAAIA,EAAM,gBAAgBnC,EAAO,QAAK,GAClE,GACF,CAACc,EAAMiB,~~WA+BV~~,OAAAX,GAAU,KACKK,MACZ,CAACA,~~MAGCW~~,~~EAAoB~~,~~CAAAC~~,MAAO,~~CAAExB~~,QAAAA,GAC1BkB,~~SAACO~~,~~EAAA~~,MAAA,~~IAAQxB~~,~~EAAOyB~~,UAAWC,EAAK,~~WAAY1B~~,~~EAAMyB~~,~~WAAY~~,~~eAAc1B~~,~~EACvEkB~~,SAAA,~~CApCS~~,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,GAAAA,EAAMI,eAA6CL,~~GAEjDC~~,OAAAA,~~EAAMa~~,~~aAA2Cd~~,EAAS,CAC7DZ,YAAAA,EACAC,eAAAA,EACAK,OAAAA,EACAE,YAAAA,GACH,~~EA0BsBmB~~,~~GAtBhBd~~,EAAMC,~~SAASc~~,~~IAAI7B~~,EAAMiB,UAAU,~~CAACa~~,EAAOC,KAC9C,~~IAAKjB~~,EAAMI,~~eAAqEY~~,~~IAAyB~~,IAAfC,~~EACtF~~,OAEJ,MAAMC,EAAgBD,EAAa,EAEnC,OAAOC,~~IAAkB/B~~,EACnBa,~~EAAMa~~,~~aAAmEG~~,EAAO,~~CAC5E~~,~~kBAAmBvB~~,~~EAAOyB~~,~~GAC1BxC~~,GAAIiB,~~EAAYuB~~,KAEpB,IAAA,~~QAcV~~","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"Tabs.js","sources":["../../../../../../node_modules/.pnpm/nanoid@3.3.7/node_modules/nanoid/index.browser.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { urlAlphabet } from './url-alphabet/index.js'\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n return (size = defaultSize) => {\n let id = ''\n while (true) {\n let bytes = getRandom(step)\n let j = step\n while (j--) {\n id += alphabet[bytes[j] & mask] \|\| ''\n if (id.length === size) return id\n }\n }\n }\n}\nlet customAlphabet = (alphabet, size = 21) =>\n customRandom(alphabet, size, random)\nlet nanoid = (size = 21) =>\n crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n byte &= 63\n if (byte < 36) {\n id += byte.toString(36)\n } else if (byte < 62) {\n id += (byte - 26).toString(36).toUpperCase()\n } else if (byte > 62) {\n id += '-'\n } else {\n id += '_'\n }\n return id\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","Tabs","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":"+SAmBA,IAAIA,EAAS,CAACC,EAAO,KACnBC,OAAOC,gBAAgB,IAAIC,WAAWH,IAAOI,QAAO,CAACC,EAAIC,IAGrDD,IAFFC,GAAQ,IACG,GACHA,EAAKC,SAAS,IACXD,EAAO,IACTA,EAAO,IAAIC,SAAS,IAAIC,cACtBF,EAAO,GACV,IAEA,KAGP,ICVE,MAAMG,EAAO,EAChBC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,KACGC,MAEG,MAACC,EAAaC,GAAkBC,EAASL,GAAc,GAEvDM,EAAmBC,EAAiBJ,GAE1CK,GAAU,UAEmB,IAArBF,GACAA,IAAqBH,GACrBJ,GAEAA,EAASI,EAAW,GAEzB,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAmB,KACxCM,EAAaC,GAAkBP,EAAmB,IAEnDQ,EAAaC,GAAY,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,WAAWnC,EAAO,QACjCwB,GAACW,GAAS,IAAIA,EAAM,gBAAgBnC,EAAO,QAAK,GAClE,GACF,CAACc,EAAMiB,WAuCV,OAAAX,GAAU,KACKK,MACZ,CAACA,IAGCW,EAAAC,EAAA,CAAoBC,MAAO,CAAEzB,QAAAA,GAC1BkB,SAAAQ,EAAC,MAAA,IACOzB,EACJ0B,UAAWC,EAAK,WAAY3B,EAAM0B,WAClC,eAAc3B,EAEbkB,SAAA,CAhDS,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,GAAAA,EAAMI,eAA6CL,GAGjDC,OAAAA,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,GAC1BzC,GAAIiB,EAAYwB,KAEpB,IAAA,QAkBV","x_google_ignoreList":[0]}

package/build/es/components/tag/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ButtonHTMLAttributes, FC, HTMLAttributes, MouseEventHandler } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nexport interface DismissAction extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n label: string;\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n density?: Density;\n dismissAction?: DismissAction;\n}\n\ntype Variant = \"info\" \| \"error\" \| \"warning\" \| \"success\";\n\nfunction getDisplayName(variant?: Variant) {\n switch (variant) {\n case \"info\":\n return \"InfoTag\";\n case \"error\":\n return \"ErrorTag\";\n case \"warning\":\n return \"WarningTag\";\n case \"success\":\n return \"SuccessTag\";\n default:\n return \"Tag\";\n }\n}\n\nfunction tagFactory(variant?: Variant) {\n const Tag: FC<TagProps> = ({ className, density, dismissAction, children, ...rest }) => (\n <span\n className={clsx(\n \"jkl-tag\",\n {\n \"jkl-tag--info\": variant === \"info\",\n \"jkl-tag--error\": variant === \"error\",\n \"jkl-tag--warning\": variant === \"warning\",\n \"jkl-tag--success\": variant === \"success\",\n },\n className,\n )}\n data-density={density}\n {...rest}\n >\n {children}\n {dismissAction && (\n <IconButton\n className=\"jkl-tag__dismiss-action\"\n density={density}\n title={dismissAction.label}\n onClick={dismissAction.onClick}\n onFocus={dismissAction.onFocus}\n onBlur={dismissAction.onBlur}\n >\n <CloseIcon variant=\"small\" bold />\n </IconButton>\n )}\n </span>\n );\n Tag.displayName = getDisplayName(variant);\n return Tag;\n}\n\nexport const Tag = tagFactory();\nexport const InfoTag = tagFactory(\"info\");\nexport const ErrorTag = tagFactory(\"error\");\nexport const WarningTag = tagFactory(\"warning\");\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","density","dismissAction","children","rest","jsxs","clsx","jsx","IconButton","title","label","onClick","onFocus","onBlur","CloseIcon","bold","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"i/~~CAiCA~~,SAASA,EAAWC,~~GACVC~~,~~MAAAA~~,EAAoB,~~EAAGC~~,UAAAA,~~EAAWC~~,QAAAA,~~EAASC~~,cAAAA,~~EAAeC~~,SAAAA,~~KAAaC~~,~~KACzEC~~,EAAC,OAAA,CACGL,UAAWM,EACP,UACA,CACI,gBAA6B,SAAZR,EACjB,iBAA8B,UAAZA,EAClB,mBAAgC,YAAZA,EACpB,mBAAgC,YAAZA,GAExBE,GAEJ,eAAcC,KACVG,EAEHD,SAAA,CAAAA,EACAD,GACGK,EAACC,EAAA,CACGR,UAAU,0BACVC,QAAAA,EACAQ,MAAOP,EAAcQ,MACrBC,QAAST,EAAcS,QACvBC,QAASV,EAAcU,QACvBC,OAAQX,EAAcW,OAEtBV,SAACI,EAAAO,EAAA,CAAUhB,QAAQ,QAAQiB,MAAI,SAK/ChB,OAAAA,EAAIiB,~~YA9CR~~,SAAwBlB,GACpB,OAAQA,GACJ,IAAK,OACM,MAAA,UACX,IAAK,QACM,MAAA,WACX,IAAK,UACM,MAAA,aACX,IAAK,UACM,MAAA,aACX,QACW,MAAA,MAEnB,~~CAiCsBmB~~,CAAenB,GAC1BC,CACX,CAEO,MAAMA,EAAMF,IACNqB,EAAUrB,EAAW,QACrBsB,EAAWtB,EAAW,SACtBuB,EAAavB,EAAW,WACxBwB,EAAaxB,EAAW"}
1	+ {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ButtonHTMLAttributes,\n FC,\n HTMLAttributes,\n MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nexport interface DismissAction\n extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n label: string;\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface TagProps extends HTMLAttributes<HTMLSpanElement> {\n density?: Density;\n dismissAction?: DismissAction;\n}\n\ntype Variant = \"info\" \| \"error\" \| \"warning\" \| \"success\";\n\nfunction getDisplayName(variant?: Variant) {\n switch (variant) {\n case \"info\":\n return \"InfoTag\";\n case \"error\":\n return \"ErrorTag\";\n case \"warning\":\n return \"WarningTag\";\n case \"success\":\n return \"SuccessTag\";\n default:\n return \"Tag\";\n }\n}\n\nfunction tagFactory(variant?: Variant) {\n const Tag: FC<TagProps> = ({\n className,\n density,\n dismissAction,\n children,\n ...rest\n }) => (\n <span\n className={clsx(\n \"jkl-tag\",\n {\n \"jkl-tag--info\": variant === \"info\",\n \"jkl-tag--error\": variant === \"error\",\n \"jkl-tag--warning\": variant === \"warning\",\n \"jkl-tag--success\": variant === \"success\",\n },\n className,\n )}\n data-density={density}\n {...rest}\n >\n {children}\n {dismissAction && (\n <IconButton\n className=\"jkl-tag__dismiss-action\"\n density={density}\n title={dismissAction.label}\n onClick={dismissAction.onClick}\n onFocus={dismissAction.onFocus}\n onBlur={dismissAction.onBlur}\n >\n <CloseIcon variant=\"small\" bold />\n </IconButton>\n )}\n </span>\n );\n Tag.displayName = getDisplayName(variant);\n return Tag;\n}\n\nexport const Tag = tagFactory();\nexport const InfoTag = tagFactory(\"info\");\nexport const ErrorTag = tagFactory(\"error\");\nexport const WarningTag = tagFactory(\"warning\");\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","density","dismissAction","children","rest","jsxs","clsx","jsx","IconButton","title","label","onClick","onFocus","onBlur","CloseIcon","bold","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"i/CAuCA,SAASA,EAAWC,GAChB,MAAMC,EAAoB,EACtBC,UAAAA,EACAC,QAAAA,EACAC,cAAAA,EACAC,SAAAA,KACGC,KAEHC,EAAC,OAAA,CACGL,UAAWM,EACP,UACA,CACI,gBAA6B,SAAZR,EACjB,iBAA8B,UAAZA,EAClB,mBAAgC,YAAZA,EACpB,mBAAgC,YAAZA,GAExBE,GAEJ,eAAcC,KACVG,EAEHD,SAAA,CAAAA,EACAD,GACGK,EAACC,EAAA,CACGR,UAAU,0BACVC,QAAAA,EACAQ,MAAOP,EAAcQ,MACrBC,QAAST,EAAcS,QACvBC,QAASV,EAAcU,QACvBC,OAAQX,EAAcW,OAEtBV,SAACI,EAAAO,EAAA,CAAUhB,QAAQ,QAAQiB,MAAI,SAK/ChB,OAAAA,EAAIiB,YApDR,SAAwBlB,GACpB,OAAQA,GACJ,IAAK,OACM,MAAA,UACX,IAAK,QACM,MAAA,WACX,IAAK,UACM,MAAA,aACX,IAAK,UACM,MAAA,aACX,QACW,MAAA,MAEnB,CAuCsBmB,CAAenB,GAC1BC,CACX,CAEO,MAAMA,EAAMF,IACNqB,EAAUrB,EAAW,QACrBsB,EAAWtB,EAAW,SACtBuB,EAAavB,EAAW,WACxBwB,EAAaxB,EAAW"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextArea.js","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\ntype 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 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>((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 = (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 className=\"jkl-text-input-wrapper\" data-invalid={invalid} data-has-content={counterCurrent > 0}>\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});\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","calculatePercentage","displayName"],"mappings":"~~8HAqCO~~,MAAMA,EAAeC,~~GAAmD~~,CAACC,EAAOC,~~KAC7E~~,MACFC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,GAAS,WACtCN,EAAU,IACV,EACiB,iBAAVA,EACPO,OAAOP,GAAOQ,OAEdR,EAAMQ,UAGdC,EAAiBC,GAAsBJ,GAAS,GACjDK,EAAcC,EAA4B,MAC1CC,~~EAAetB~~,GAA0CoB,EAE/DG,GAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,IACD,CAACzB,EAAYqB,EAAab,EAAOS,IAuB9B,MAAAU,GAAuB,MAAA1B,OAAA,EAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IASN,OAAAI,EAAC,~~OAAIC~~,UAAU,~~yBAAyB~~,eAAcF,~~EAAS~~,mBAAkBlB,EAAiB,~~EAC9FqB~~,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcJ,EACdE,UAAW,sDAAsD5B,SACjEF,~~OAtCZ~~,SAAsBiC,GAClBjB,GAAmB,GACfhB,GACAA,EAAOiC,EAEf,~~EAkCYhC~~,~~QA9CZ~~,SAAuBgC,GACnBjB,GAAmB,GACff,GACAA,EAAQgC,EAEhB,~~EA0CYzB~~,~~SAjCZ~~,SAAwByB,GACFtB,EAAAsB,EAAEC,OAAO5B,MAAMQ,QAC7BN,GACAA,EAASyB,EAEjB,~~EA6BYpC~~,IAAKsB,EACLd,MAAO,IAAKA,~~KAbF~~,CAClB8B,UAAWrC,EAAa,cAAW,~~IAa3BK~~,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACI8B,EAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAArB,EAAe,MAAce,MAEhC1B,EAAQqC,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACVzB,MAAO,CACF,~~oBAxCAiB~~,~~EAyCGK~~,~~EAzCcU~~,~~EA0CdZ~~,~~EAzCxBH~~,GAAW,GAGE,IAAVe,EAFI,EAEyB,IAAVf,EAAiBe,~~GAoCa~~,~~aAxCnDC~~,IAAoBhB,EAAiBe,~~CAiD1C~~,~~IAGR3C~~,EAAa6C,YAAc"}
1	+ {"version":3,"file":"BaseTextArea.js","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\ntype 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","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","calculatePercentage","displayName"],"mappings":"8HAsCO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,GAAS,WACtCN,EAAU,IACV,EACiB,iBAAVA,EACPO,OAAOP,GAAOQ,OAEdR,EAAMQ,UAGdC,EAAiBC,GAAsBJ,GAAS,GACjDK,EAAcC,EAA4B,MAC1CC,EACDtB,GAA0CoB,EAE/CG,GAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,IACD,CAACzB,EAAYqB,EAAab,EAAOS,IAuB9B,MAAAU,GAAuB,MAAA1B,OAAA,EAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IASN,OAAAI,EAAC,MAAA,CACGC,UAAU,yBACV,eAAcF,EACd,mBAAkBlB,EAAiB,EAEnCqB,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcJ,EACdE,UAAW,sDAAsD5B,SACjEF,OA1CZ,SAAsBiC,GAClBjB,GAAmB,GACfhB,GACAA,EAAOiC,EAEf,EAsCYhC,QAlDZ,SAAuBgC,GACnBjB,GAAmB,GACff,GACAA,EAAQgC,EAEhB,EA8CYzB,SArCZ,SAAwByB,GACFtB,EAAAsB,EAAEC,OAAO5B,MAAMQ,QAC7BN,GACAA,EAASyB,EAEjB,EAiCYpC,IAAKsB,EACLd,MAAO,IAAKA,KAjBF,CAClB8B,UAAWrC,EAAa,cAAW,IAiB3BK,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACI8B,EAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAArB,EAAe,MAAce,MAEhC1B,EAAQqC,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACVzB,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcU,EA8CdZ,EA7CxBH,GAAW,GAGE,IAAVe,EAFI,EAEyB,IAAVf,EAAiBe,GAwCa,aA5CnDC,IAAoBhB,EAAiBe,CAmDlC,IAMpB3C,EAAa6C,YAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactNode,\n InputHTMLAttributes,\n HTMLProps,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\n\nfunction getWidthAsStyle(width?: string, maxLength?: number): 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 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 extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\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<IconProps>;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>((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 && actionButton && actionButton}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\"jkl-text-input-action-button\", action.className)}\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\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","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"6LAaA,SAASA,~~EAAgBC~~,~~EAAgBC~~,~~GACjCD~~,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,~~CA4CO~~,MAAMG,EAAgBC,~~GAAiD~~,CAACC,EAAOC,~~KAC5E~~,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GAAUQ,GAAgBA,EAC3BR,IAAWQ,GACRI,EAACE,EAAA,CACGV,QAAAA,EACAD,UAAWU,~~EAAK~~,+~~BAAgCb~~,EAAOG,~~WACvDY~~,MAAOf,EAAOgB,MACdC,QAASjB,EAAOiB,QAChBC,QAASlB,EAAOkB,QAChBC,OAAQnB,EAAOmB,OACfpB,IAAKC,EAAOoB,UACZd,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAqB,SACZ,~~IAMhBzB~~,EAAc0B,YAAc"}
1	+ {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties,\n forwardRef,\n type MouseEventHandler,\n type ReactNode,\n InputHTMLAttributes,\n HTMLProps,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { IconProps } from \"../icon/index.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<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\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<IconProps>;\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 && actionButton && actionButton}\n {action && !actionButton && (\n <IconButton\n density={density}\n className={clsx(\n \"jkl-text-input-action-button\",\n action.className,\n )}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"6LAaA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CA8CO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GAAUQ,GAAgBA,EAC3BR,IAAWQ,GACRI,EAACE,EAAA,CACGV,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXY,MAAOf,EAAOgB,MACdC,QAASjB,EAAOiB,QAChBC,QAASlB,EAAOkB,QAChBC,OAAQnB,EAAOmB,OACfpB,IAAKC,EAAOoB,UACZd,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAqB,SACZ,IAOpBzB,EAAc0B,YAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextArea.js","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 extends Omit<InputGroupProps, \"children\">, BaseTextAreaProps {}\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>((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 tooltipProps,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltipProps,\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});\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltipProps","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"~~oOAOO~~,MAAMA,EAAWC,~~GAA+C~~,CAACC,EAAOC,~~KACrE~~,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,aAAAA,KACGC,GACHd,EACEe,EAAkB,CACpBN,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,aAAAA,GAEEG,EAAgB,CAAEd,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,OAAAM,EAACC,EAAA,CACGf,UAAWgB,EAAK,gBAAiBhB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRa,EAEJK,WAACC,EAAa,CAAApB,IAAAA,KAAca,KAAUE,KAAe,~~IAIjElB~~,EAASwB,YAAc"}
1	+ {"version":3,"file":"TextArea.js","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 tooltipProps,\n ...rest\n } = props;\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltipProps,\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","tooltipProps","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"oOASO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,aAAAA,KACGC,GACHd,EACEe,EAAkB,CACpBN,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,aAAAA,GAEEG,EAAgB,CAAEd,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,OAAAM,EAACC,EAAA,CACGf,UAAWgB,EAAK,gBAAiBhB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRa,EAEJK,WAACC,EAAa,CAAApB,IAAAA,KAAca,KAAUE,KAAe,IAKrElB,EAASwB,YAAc"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from \"../icon/index.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>({ className, state, ...props }: ToastProps<T>) {\n let ref = useRef(null);\n let { toastProps, titleProps } = useToast(props, state, ref);\n\n const content = typeof props.toast.content === \"string\" ? props.toast.content : props.toast.content.content;\n const title = typeof props.toast.content === \"string\" ? undefined : 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 aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"~~y4DAgBA~~,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,~~GAAgCJ~~,UAAAA,~~EAAWK~~,MAAAA,~~KAAUC~~,~~UAC7D~~,IAAAC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAElD,MAAAK,~~EAAyC~~,iBAAxBN,EAAMO,MAAMD,~~QAAuBN~~,EAAMO,MAAMD,~~QAAUN~~,EAAMO,MAAMD,QAAQA,~~QAC9FE~~,~~EAAuC~~,iBAAxBR,EAAMO,MAAMD,~~aAAuB~~,~~EAAYN~~,EAAMO,MAAMD,QAAQE,~~MAGlFC~~,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAW,cACXnC,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}
1	+ {"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport { QueuedToast, type ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/index.js\";\nimport {\n CloseIcon,\n ErrorIcon,\n InfoIcon,\n SuccessIcon,\n WarningIcon,\n} from \"../icon/index.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 aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","IconButton","onClick","close","CloseIcon"],"mappings":"y4DAsBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KACf,EAGG,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,UAEC,IAAAC,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAElD,MAAAK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,OAE/Cd,EAACqC,EAAA,CACG,aAAW,cACXnC,UAAU,4BACVoC,QAAS,KACC/B,EAAAgC,MAAM/B,EAAMO,MAAMW,IAAG,EAG/BK,WAACS,EAAU,QAI3B"}

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

@@ -1,7 +1,7 @@
 import { ToastQueue } from '@react-stately/toast';
 import { default as React } from 'react';
 import { ToastContent } from './types.js';
-export declare function ToastRegion({ queue, placement }: {
+export declare function ToastRegion({ queue, placement, }: {
     queue: ToastQueue<ToastContent>;
     placement: "center" | "left";
 }): React.ReactPortal | null;

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"toastContext.js","sources":["../../../../src/components/toast/toastContext.tsx"],"sourcesContent":["import { ToastQueue } from \"@react-stately/toast\";\nimport React, { createContext, useContext, useState, type FC } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\nimport { ToastRegion } from \"./ToastRegion.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastContextProviderProps extends WithChildren {\n maxVisibleToasts?: number;\n /*\n @default \"center\"\n */\n placement?: \"center\" \| \"left\";\n}\n\ntype ToastContext = {\n add: (toast: ToastContent, options?: ToastOptions) => string;\n};\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(new ToastQueue<ToastContent>({ maxVisibleToasts, hasExitAnimation: true }));\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 (options?.timeout === null \|\| options?.timeout === \"off\") {\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","useToast","useContext","ToastProvider","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","toast","options","timeout","jsx","ToastRegion"],"mappings":"uNAkBA,MAAMA,EAAUC,EAA4B,CACxCC,IAAK,IACM,qBAIFC,EAAW,IAAoBC,EAAWJ,GAE1CK,EAA+C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,~~EAAS~~,IAAIC,EAAyB,~~CAAEJ~~,iBAAAA,~~EAAkBK~~,kBAAkB,~~KAGxF~~,OAAAC,EAACb,EAAQc,SAAR,CACGC,MAAO,CACHb,IAAK,CAACc,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,~~SACU~~,QAArB,MAAAD,OAAA,EAAAA,EAASC,~~UAAyC~~,SAArB,MAAAD,OAAA,EAAAA,EAASC,~~YACnCA~~,OAAA,GAGPT,EAAMP,IAAIc,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRZ,SAAA,CAAAA,EACDa,EAACC,EAAY,CAAAX,MAAAA,EAAcD,UAAAA,MAAsB"}
1	+ {"version":3,"file":"toastContext.js","sources":["../../../../src/components/toast/toastContext.tsx"],"sourcesContent":["import { ToastQueue } from \"@react-stately/toast\";\nimport React, { createContext, useContext, useState, type FC } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\nimport { ToastRegion } from \"./ToastRegion.js\";\nimport { ToastContent, ToastOptions } from \"./types.js\";\n\ninterface ToastContextProviderProps extends WithChildren {\n maxVisibleToasts?: number;\n /*\n @default \"center\"\n */\n placement?: \"center\" \| \"left\";\n}\n\ntype ToastContext = {\n add: (toast: ToastContent, options?: ToastOptions) => string;\n};\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","useToast","useContext","ToastProvider","children","maxVisibleToasts","placement","queue","useState","ToastQueue","hasExitAnimation","jsxs","Provider","value","toast","options","timeout","jsx","ToastRegion"],"mappings":"uNAkBA,MAAMA,EAAUC,EAA4B,CACxCC,IAAK,IACM,qBAIFC,EAAW,IAAoBC,EAAWJ,GAE1CK,EAA+C,EACxDC,SAAAA,EACAC,iBAAAA,EAAmB,EACnBC,UAAAA,EAAY,aAEN,MAACC,GAASC,EACZ,IAAIC,EAAyB,CACzBJ,iBAAAA,EACAK,kBAAkB,KAKtB,OAAAC,EAACb,EAAQc,SAAR,CACGC,MAAO,CACHb,IAAK,CAACc,EAAqBC,KACvB,IAAIC,EAA8B,IAE9B,MAA4B,iBAArB,MAAAD,OAAAA,EAAAA,EAASC,SAChBA,EAAUD,EAAQC,SAEG,QAArB,MAAAD,OAAA,EAAAA,EAASC,UACY,SAArB,MAAAD,OAAA,EAAAA,EAASC,YAECA,OAAA,GAGPT,EAAMP,IAAIc,EAAO,IACjBC,EACHC,QAAAA,GACH,GAIRZ,SAAA,CAAAA,EACDa,EAACC,EAAY,CAAAX,MAAAA,EAAcD,UAAAA,MAAsB"}