npm - @fremtind/jokul - Versions diffs - 0.27.4 → 0.27.5 - Mend

@fremtind/jokul 0.27.4 → 0.27.5

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

Files changed (140) hide show

package/build/es/components/modal/Modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { WithOptionalChildren } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/~~index~~.js\";\nimport { IconButton, IconButtonProps } from \"../icon-button/IconButton.js\";\nimport { ModalConfig } from \"./useModal.js\";\n\nexport interface ModalProps extends WithOptionalChildren {\n id?: string;\n className?: string;\n component?: React.ElementType;\n style?: React.CSSProperties;\n /*\n Overstyrer padding på modalen via en CSS-variabel.\n /\n padding?: 16 \| 24 \| 40;\n}\n\ntype BaseModalProps = Omit<ModalProps, \"padding\" \| \"component\">;\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalContainer = forwardRef<\n HTMLDivElement,\n ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten\n return (\n <div\n className={clsx(\"jkl-modal-container\", className)}\n {...rest}\n ref={ref}\n data-portal\n />\n );\n});\nModalContainer.displayName = \"ModalContainer\";\n\ntype ModalOverlayProps = ModalConfig[\"overlay\"] &\n BaseModalProps & {\n /\n Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.\n /\n transparent?: boolean;\n };\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n ({ className, transparent, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-overlay\", className, {\n \"jkl-modal-overlay--transparent\": transparent,\n })}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n ({ className, component, padding, style, ...rest }, ref) => {\n const C = component \|\| \"div\";\n return (\n <C\n className={clsx(\"jkl jkl-modal\", className)}\n style={\n {\n \"--jkl-modal-padding\": padding\n ? `var(--jkl-spacing-${padding})`\n : undefined,\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n ref={ref}\n />\n );\n },\n);\nModal.displayName = \"Modal\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-header\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalTitle = forwardRef<\n HTMLParagraphElement,\n ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalCloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n BaseModalProps &\n IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton\n className={clsx(\"jkl-modal-close\", className)}\n data-testautoid=\"jkl-modal-close\"\n {...rest}\n ref={ref}\n >\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-body\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/\n Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-actions\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"~~0gDAuBa~~,MAAAA,EAAiBC,GAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAC,MAAA,CACGH,UAAWI,EAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,MAIvBJ,EAAeO,YAAc,iBAatB,MAAMC,EAAeP,GACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,GACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGT,UAAWI,EAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,GACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,MAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,GAGxB,EAAGC,UAAAA,KAAcC,GAAQC,MACtB,IAAE,CAAAF,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEhEW,EAAWR,YAAc,aAKZ,MAAAS,EAAmBf,GAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAACY,EAAA,CACGf,UAAWI,EAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAU,CAAAC,QAAQ,eAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,GACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,MAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,GACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,MAIZkB,EAAaf,YAAc"}
1	+ {"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { WithOptionalChildren } from \"../../core/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { IconButton, IconButtonProps } from \"../icon-button/IconButton.js\";\nimport { ModalConfig } from \"./useModal.js\";\n\nexport interface ModalProps extends WithOptionalChildren {\n id?: string;\n className?: string;\n component?: React.ElementType;\n style?: React.CSSProperties;\n /*\n Overstyrer padding på modalen via en CSS-variabel.\n /\n padding?: 16 \| 24 \| 40;\n}\n\ntype BaseModalProps = Omit<ModalProps, \"padding\" \| \"component\">;\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalContainer = forwardRef<\n HTMLDivElement,\n ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten\n return (\n <div\n className={clsx(\"jkl-modal-container\", className)}\n {...rest}\n ref={ref}\n data-portal\n />\n );\n});\nModalContainer.displayName = \"ModalContainer\";\n\ntype ModalOverlayProps = ModalConfig[\"overlay\"] &\n BaseModalProps & {\n /\n Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.\n /\n transparent?: boolean;\n };\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n ({ className, transparent, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-overlay\", className, {\n \"jkl-modal-overlay--transparent\": transparent,\n })}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n ({ className, component, padding, style, ...rest }, ref) => {\n const C = component \|\| \"div\";\n return (\n <C\n className={clsx(\"jkl jkl-modal\", className)}\n style={\n {\n \"--jkl-modal-padding\": padding\n ? `var(--jkl-spacing-${padding})`\n : undefined,\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n ref={ref}\n />\n );\n },\n);\nModal.displayName = \"Modal\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-header\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalTitle = forwardRef<\n HTMLParagraphElement,\n ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalCloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n BaseModalProps &\n IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton\n className={clsx(\"jkl-modal-close\", className)}\n data-testautoid=\"jkl-modal-close\"\n {...rest}\n ref={ref}\n >\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-body\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/\n Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-actions\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"0OAuBa,MAAAA,EAAiBC,GAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAC,MAAA,CACGH,UAAWI,EAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,MAIvBJ,EAAeO,YAAc,iBAatB,MAAMC,EAAeP,GACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,MAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,GACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGT,UAAWI,EAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,GACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,MAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,GAGxB,EAAGC,UAAAA,KAAcC,GAAQC,MACtB,IAAE,CAAAF,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEhEW,EAAWR,YAAc,aAKZ,MAAAS,EAAmBf,GAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAACY,EAAA,CACGf,UAAWI,EAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAU,CAAAC,QAAQ,eAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,GACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,MAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,GACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,MAIZkB,EAAaf,YAAc"}

package/build/es/components/pagination/Pagination.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as n}from"react/jsx-runtime";import i,{useEffect as c}from"react";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import{ChevronLeftIcon as t}from"../icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as s}from"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{IconButton as r}from"../icon-button/IconButton.js";import{PageButton as a}from"./PageButton.js";const e=i.forwardRef((function({onPageChange:i,currentPage:e,numberOfPages:m,labels:l={previous:"Forrige side",next:"Neste side"},as:p,...j},u){c((()=>{e<1&&console.error("[Pagination]: currentPage prop should be set to a value larger than 0"),e>m&&console.error("[Pagination]: currentPage prop should not be set to a value larger than numberOfPages")}),[e,m]);const I=p||"nav";if(m<=7)return o(I,{ref:u,...j,className:"jkl-pagination",children:[n(r,{className:"jkl-pagination-button",title:l.previous,onClick:()=>i(e-1,e),"aria-disabled":1===e,tabIndex:1===e?-1:0,children:n(t,{})}),n("ol",{className:"jkl-pagination__pages",children:Array.from({length:m}).map(((o,c)=>{const t=c+1;return n(a,{isActive:e===t,number:t,total:m,onClick:()=>i(t,e)},c)}))}),n(r,{className:"jkl-pagination-button",title:l.next,onClick:()=>i(e+1,e),"aria-disabled":e===m,tabIndex:e===m?-1:0,children:n(s,{})})]});const h=e>4,d=e<m-3,g=Math.min(Math.max(e-2,2),m-5),b=Math.min(g+1,m-4),C=Math.min(b+1,m-3),k=Math.min(b+2,m-2),f=Math.min(b+3,m-1);return o(I,{ref:u,...j,className:"jkl-pagination",children:[n(r,{className:"jkl-pagination-button",title:l.previous,onClick:()=>i(e-1,e),"aria-disabled":1===e,tabIndex:1===e?-1:0,children:n(t,{})}),o("ol",{className:"jkl-pagination__pages",children:[n(a,{isActive:1===e,number:1,total:m,onClick:()=>i(1,e)}),h?n("span",{"aria-hidden":!0,className:"jkl-pagination-button--elipsis",children:"..."}):n(a,{isActive:e===g,number:g,total:m,onClick:()=>i(g,e)}),n(a,{isActive:e===b,number:b,total:m,onClick:()=>i(b,e)}),n(a,{isActive:e===C,number:C,total:m,onClick:()=>i(C,e)}),n(a,{isActive:e===k,number:k,total:m,onClick:()=>i(k,e)}),d?n("span",{"aria-hidden":!0,className:"jkl-pagination-button--elipsis",children:"..."}):n(a,{isActive:e===f,number:f,total:m,onClick:()=>i(f,e)}),n(a,{isActive:e===m,number:m,total:m,onClick:()=>i(m,e)})]}),n(r,{className:"jkl-pagination-button",title:l.next,onClick:()=>i(e+1,e),"aria-disabled":e===m,tabIndex:e===m?-1:0,children:n(s,{})})]})}));export{e as Pagination};
+import{jsxs as n,jsx as a}from"react/jsx-runtime";import t,{useEffect as e}from"react";import{ChevronLeftIcon as i}from"../icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as o}from"../icon/icons/ChevronRightIcon.js";import{IconButton as r}from"../icon-button/IconButton.js";import{PageButton as s}from"./PageButton.js";const l=t.forwardRef((function({onPageChange:t,currentPage:l,numberOfPages:c,labels:m={previous:"Forrige side",next:"Neste side"},as:u,...d},p){e((()=>{l<1&&console.error("[Pagination]: currentPage prop should be set to a value larger than 0"),l>c&&console.error("[Pagination]: currentPage prop should not be set to a value larger than numberOfPages")}),[l,c]);const g=u||"nav";if(c<=7)return n(g,{ref:p,...d,className:"jkl-pagination",children:[a(r,{className:"jkl-pagination-button",title:m.previous,onClick:()=>t(l-1,l),"aria-disabled":1===l,tabIndex:1===l?-1:0,children:a(i,{})}),a("ol",{className:"jkl-pagination__pages",children:Array.from({length:c}).map(((n,e)=>{const i=e+1;return a(s,{isActive:l===i,number:i,total:c,onClick:()=>t(i,l)},e)}))}),a(r,{className:"jkl-pagination-button",title:m.next,onClick:()=>t(l+1,l),"aria-disabled":l===c,tabIndex:l===c?-1:0,children:a(o,{})})]});const h=l>4,b=l<c-3,k=Math.min(Math.max(l-2,2),c-5),f=Math.min(k+1,c-4),v=Math.min(f+1,c-3),j=Math.min(f+2,c-2),C=Math.min(f+3,c-1);return n(g,{ref:p,...d,className:"jkl-pagination",children:[a(r,{className:"jkl-pagination-button",title:m.previous,onClick:()=>t(l-1,l),"aria-disabled":1===l,tabIndex:1===l?-1:0,children:a(i,{})}),n("ol",{className:"jkl-pagination__pages",children:[a(s,{isActive:1===l,number:1,total:c,onClick:()=>t(1,l)}),h?a("span",{"aria-hidden":!0,className:"jkl-pagination-button--elipsis",children:"..."}):a(s,{isActive:l===k,number:k,total:c,onClick:()=>t(k,l)}),a(s,{isActive:l===f,number:f,total:c,onClick:()=>t(f,l)}),a(s,{isActive:l===v,number:v,total:c,onClick:()=>t(v,l)}),a(s,{isActive:l===j,number:j,total:c,onClick:()=>t(j,l)}),b?a("span",{"aria-hidden":!0,className:"jkl-pagination-button--elipsis",children:"..."}):a(s,{isActive:l===C,number:C,total:c,onClick:()=>t(C,l)}),a(s,{isActive:l===c,number:c,total:c,onClick:()=>t(c,l)})]}),a(r,{className:"jkl-pagination-button",title:m.next,onClick:()=>t(l+1,l),"aria-disabled":l===c,tabIndex:l===c?-1:0,children:a(o,{})})]})}));export{l as Pagination};
 //# sourceMappingURL=Pagination.js.map

package/build/es/components/pagination/Pagination.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { PageButton } from \"./PageButton.js\";\n\nexport type PaginationProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<\n ElementType,\n {\n currentPage: number;\n numberOfPages: number;\n onPageChange: (toPage: number, fromPage: number) => void;\n /*\n Dersom du ønsker å ha custom labels kan du sende inn disse. \"next\" og \"previous\"\n * brukes som hint til skjermlesere for ikon-knappene til Neste/Forrige side\n * @default { previous: \"Forrige side\", next: \"Neste side\" }\n */\n labels?: {\n previous: string;\n next: string;\n };\n }\n >;\n\nexport type PaginationComponent = <\n ElementType extends React.ElementType = \"nav\",\n>(\n props: PaginationProps<ElementType>,\n) => React.ReactElement \| null;\n\nexport const Pagination = React.forwardRef(function Pagination<\n ElementType extends React.ElementType = \"nav\",\n>(\n {\n onPageChange,\n currentPage,\n numberOfPages,\n labels = {\n previous: \"Forrige side\",\n next: \"Neste side\",\n },\n as,\n ...rest\n }: PaginationProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n) {\n useEffect(() => {\n if (currentPage < 1) {\n console.error(\n \"[Pagination]: currentPage prop should be set to a value larger than 0\",\n );\n }\n if (currentPage > numberOfPages) {\n console.error(\n \"[Pagination]: currentPage prop should not be set to a value larger than numberOfPages\",\n );\n }\n }, [currentPage, numberOfPages]);\n\n const Component = as \|\| \"nav\";\n\n if (numberOfPages <= 7) {\n return (\n <Component ref={ref} {...rest} className=\"jkl-pagination\">\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.previous}\n onClick={() => onPageChange(currentPage - 1, currentPage)}\n aria-disabled={currentPage === 1}\n tabIndex={currentPage === 1 ? -1 : 0}\n >\n <ChevronLeftIcon />\n </IconButton>\n <ol className=\"jkl-pagination__pages\">\n {Array.from({ length: numberOfPages }).map((_, index) => {\n const page = index + 1;\n return (\n <PageButton\n key={index}\n isActive={currentPage === page}\n number={page}\n total={numberOfPages}\n onClick={() => onPageChange(page, currentPage)}\n />\n );\n })}\n </ol>\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.next}\n onClick={() => onPageChange(currentPage + 1, currentPage)}\n aria-disabled={currentPage === numberOfPages}\n tabIndex={currentPage === numberOfPages ? -1 : 0}\n >\n <ChevronRightIcon />\n </IconButton>\n </Component>\n );\n }\n\n const showStartEllipsis = currentPage > 4;\n const showEndEllipsis = currentPage < numberOfPages - 3;\n\n const startEllipsis = Math.min(\n Math.max(currentPage - 2, 2),\n numberOfPages - 5,\n );\n const centerPageNumberStart = Math.min(\n startEllipsis + 1,\n numberOfPages - 4,\n );\n const centerPageNumber = Math.min(\n centerPageNumberStart + 1,\n numberOfPages - 3,\n );\n const centerPageNumberEnd = Math.min(\n centerPageNumberStart + 2,\n numberOfPages - 2,\n );\n const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 1);\n\n return (\n <Component ref={ref} {...rest} className=\"jkl-pagination\">\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.previous}\n onClick={() => onPageChange(currentPage - 1, currentPage)}\n aria-disabled={currentPage === 1}\n tabIndex={currentPage === 1 ? -1 : 0}\n >\n <ChevronLeftIcon />\n </IconButton>\n <ol className=\"jkl-pagination__pages\">\n <PageButton\n isActive={currentPage === 1}\n number={1}\n total={numberOfPages}\n onClick={() => onPageChange(1, currentPage)}\n />\n {showStartEllipsis ? (\n <span\n aria-hidden\n className=\"jkl-pagination-button--elipsis\"\n >\n {\"...\"}\n </span>\n ) : (\n <PageButton\n isActive={currentPage === startEllipsis}\n number={startEllipsis}\n total={numberOfPages}\n onClick={() => onPageChange(startEllipsis, currentPage)}\n />\n )}\n <PageButton\n isActive={currentPage === centerPageNumberStart}\n number={centerPageNumberStart}\n total={numberOfPages}\n onClick={() =>\n onPageChange(centerPageNumberStart, currentPage)\n }\n />\n <PageButton\n isActive={currentPage === centerPageNumber}\n number={centerPageNumber}\n total={numberOfPages}\n onClick={() => onPageChange(centerPageNumber, currentPage)}\n />\n <PageButton\n isActive={currentPage === centerPageNumberEnd}\n number={centerPageNumberEnd}\n total={numberOfPages}\n onClick={() =>\n onPageChange(centerPageNumberEnd, currentPage)\n }\n />\n {showEndEllipsis ? (\n <span\n aria-hidden\n className=\"jkl-pagination-button--elipsis\"\n >\n {\"...\"}\n </span>\n ) : (\n <PageButton\n isActive={currentPage === endEllipsis}\n number={endEllipsis}\n total={numberOfPages}\n onClick={() => onPageChange(endEllipsis, currentPage)}\n />\n )}\n <PageButton\n isActive={currentPage === numberOfPages}\n number={numberOfPages}\n total={numberOfPages}\n onClick={() => onPageChange(numberOfPages, currentPage)}\n />\n </ol>\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.next}\n onClick={() => onPageChange(currentPage + 1, currentPage)}\n aria-disabled={currentPage === numberOfPages}\n tabIndex={currentPage === numberOfPages ? -1 : 0}\n >\n <ChevronRightIcon />\n </IconButton>\n </Component>\n );\n}) as PaginationComponent;\n"],"names":["Pagination","React","forwardRef","onPageChange","currentPage","numberOfPages","labels","previous","next","as","rest","ref","useEffect","console","error","Component","className","children","jsx","IconButton","title","onClick","tabIndex","ChevronLeftIcon","from","length","map","_","index","page","PageButton","isActive","number","total","ChevronRightIcon","showStartEllipsis","showEndEllipsis","startEllipsis","Math","min","max","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","jsxs"],"mappings":"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"}
1	+ {"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport {\n PolymorphicPropsWithRef,\n PolymorphicRef,\n} from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { PageButton } from \"./PageButton.js\";\n\nexport type PaginationProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<\n ElementType,\n {\n currentPage: number;\n numberOfPages: number;\n onPageChange: (toPage: number, fromPage: number) => void;\n /*\n Dersom du ønsker å ha custom labels kan du sende inn disse. \"next\" og \"previous\"\n * brukes som hint til skjermlesere for ikon-knappene til Neste/Forrige side\n * @default { previous: \"Forrige side\", next: \"Neste side\" }\n */\n labels?: {\n previous: string;\n next: string;\n };\n }\n >;\n\nexport type PaginationComponent = <\n ElementType extends React.ElementType = \"nav\",\n>(\n props: PaginationProps<ElementType>,\n) => React.ReactElement \| null;\n\nexport const Pagination = React.forwardRef(function Pagination<\n ElementType extends React.ElementType = \"nav\",\n>(\n {\n onPageChange,\n currentPage,\n numberOfPages,\n labels = {\n previous: \"Forrige side\",\n next: \"Neste side\",\n },\n as,\n ...rest\n }: PaginationProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n) {\n useEffect(() => {\n if (currentPage < 1) {\n console.error(\n \"[Pagination]: currentPage prop should be set to a value larger than 0\",\n );\n }\n if (currentPage > numberOfPages) {\n console.error(\n \"[Pagination]: currentPage prop should not be set to a value larger than numberOfPages\",\n );\n }\n }, [currentPage, numberOfPages]);\n\n const Component = as \|\| \"nav\";\n\n if (numberOfPages <= 7) {\n return (\n <Component ref={ref} {...rest} className=\"jkl-pagination\">\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.previous}\n onClick={() => onPageChange(currentPage - 1, currentPage)}\n aria-disabled={currentPage === 1}\n tabIndex={currentPage === 1 ? -1 : 0}\n >\n <ChevronLeftIcon />\n </IconButton>\n <ol className=\"jkl-pagination__pages\">\n {Array.from({ length: numberOfPages }).map((_, index) => {\n const page = index + 1;\n return (\n <PageButton\n key={index}\n isActive={currentPage === page}\n number={page}\n total={numberOfPages}\n onClick={() => onPageChange(page, currentPage)}\n />\n );\n })}\n </ol>\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.next}\n onClick={() => onPageChange(currentPage + 1, currentPage)}\n aria-disabled={currentPage === numberOfPages}\n tabIndex={currentPage === numberOfPages ? -1 : 0}\n >\n <ChevronRightIcon />\n </IconButton>\n </Component>\n );\n }\n\n const showStartEllipsis = currentPage > 4;\n const showEndEllipsis = currentPage < numberOfPages - 3;\n\n const startEllipsis = Math.min(\n Math.max(currentPage - 2, 2),\n numberOfPages - 5,\n );\n const centerPageNumberStart = Math.min(\n startEllipsis + 1,\n numberOfPages - 4,\n );\n const centerPageNumber = Math.min(\n centerPageNumberStart + 1,\n numberOfPages - 3,\n );\n const centerPageNumberEnd = Math.min(\n centerPageNumberStart + 2,\n numberOfPages - 2,\n );\n const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 1);\n\n return (\n <Component ref={ref} {...rest} className=\"jkl-pagination\">\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.previous}\n onClick={() => onPageChange(currentPage - 1, currentPage)}\n aria-disabled={currentPage === 1}\n tabIndex={currentPage === 1 ? -1 : 0}\n >\n <ChevronLeftIcon />\n </IconButton>\n <ol className=\"jkl-pagination__pages\">\n <PageButton\n isActive={currentPage === 1}\n number={1}\n total={numberOfPages}\n onClick={() => onPageChange(1, currentPage)}\n />\n {showStartEllipsis ? (\n <span\n aria-hidden\n className=\"jkl-pagination-button--elipsis\"\n >\n {\"...\"}\n </span>\n ) : (\n <PageButton\n isActive={currentPage === startEllipsis}\n number={startEllipsis}\n total={numberOfPages}\n onClick={() => onPageChange(startEllipsis, currentPage)}\n />\n )}\n <PageButton\n isActive={currentPage === centerPageNumberStart}\n number={centerPageNumberStart}\n total={numberOfPages}\n onClick={() =>\n onPageChange(centerPageNumberStart, currentPage)\n }\n />\n <PageButton\n isActive={currentPage === centerPageNumber}\n number={centerPageNumber}\n total={numberOfPages}\n onClick={() => onPageChange(centerPageNumber, currentPage)}\n />\n <PageButton\n isActive={currentPage === centerPageNumberEnd}\n number={centerPageNumberEnd}\n total={numberOfPages}\n onClick={() =>\n onPageChange(centerPageNumberEnd, currentPage)\n }\n />\n {showEndEllipsis ? (\n <span\n aria-hidden\n className=\"jkl-pagination-button--elipsis\"\n >\n {\"...\"}\n </span>\n ) : (\n <PageButton\n isActive={currentPage === endEllipsis}\n number={endEllipsis}\n total={numberOfPages}\n onClick={() => onPageChange(endEllipsis, currentPage)}\n />\n )}\n <PageButton\n isActive={currentPage === numberOfPages}\n number={numberOfPages}\n total={numberOfPages}\n onClick={() => onPageChange(numberOfPages, currentPage)}\n />\n </ol>\n <IconButton\n className=\"jkl-pagination-button\"\n title={labels.next}\n onClick={() => onPageChange(currentPage + 1, currentPage)}\n aria-disabled={currentPage === numberOfPages}\n tabIndex={currentPage === numberOfPages ? -1 : 0}\n >\n <ChevronRightIcon />\n </IconButton>\n </Component>\n );\n}) as PaginationComponent;\n"],"names":["Pagination","React","forwardRef","onPageChange","currentPage","numberOfPages","labels","previous","next","as","rest","ref","useEffect","console","error","Component","className","children","jsx","IconButton","title","onClick","tabIndex","ChevronLeftIcon","from","length","map","_","index","page","PageButton","isActive","number","total","ChevronRightIcon","showStartEllipsis","showEndEllipsis","startEllipsis","Math","min","max","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","jsxs"],"mappings":"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"}

package/build/es/components/radio-panel/RadioPanel.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as l,useState as n,useCallback as t,useEffect as r,Children as o}from"react";import{useAutoAnimatedHeight as i}from"../../hooks/useAnimatedHeight/useAutoAnimateHeight.js";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";const d=l((function({children:l,alwaysOpen:d=!1,label:c,extraLabel:p,checked:u,onChange:m,...h},j){const[f,k]=n(!0),_=i(f),x=t((e=>(typeof e<"u"&&(null==m||m(e)),d?-1:(k(!1),window.setTimeout((()=>{k(!0)}),200)))),[k,d,m]);r((()=>{if(!u)return;const e=x();return()=>window.clearTimeout(e)}),[u,x]);const b=o.count(l)>0;return e("div",{className:"jkl-radio-panel",ref:j,children:[e("label",{className:"jkl-radio-panel__label",children:[a("input",{onChange:x,checked:u,className:"jkl-radio-panel__input",type:"radio",...h}),a("span",{"aria-hidden":"true",className:"jkl-radio-panel__dot"}),a("span",{className:"jkl-radio-panel__main-label",children:c}),a("span",{className:s("jkl-radio-panel__extra-label",{"jkl-radio-panel__extra-label--text":"string"==typeof p}),children:p})]}),a("div",{"data-open":f&&b,"data-alwaysOpen":d&&b,ref:_,className:"jkl-radio-panel__content","aria-live":!d&&b?"polite":void 0,children:f&&l})]})}));export{d as RadioPanel};
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as l}from"../../../clsx-BeLtu-UY.js";import{forwardRef as n,useState as s,useCallback as t,useEffect as i,Children as r}from"react";import{useAutoAnimatedHeight as o}from"../../hooks/useAnimatedHeight/useAutoAnimateHeight.js";const d=n((function({children:n,alwaysOpen:d=!1,label:c,extraLabel:p,checked:m,onChange:u,...h},f){const[_,j]=s(!0),k=o(_),x=t((a=>(typeof a<"u"&&(null==u||u(a)),d?-1:(j(!1),window.setTimeout((()=>{j(!0)}),200)))),[j,d,u]);i((()=>{if(!m)return;const a=x();return()=>window.clearTimeout(a)}),[m,x]);const b=r.count(n)>0;return a("div",{className:"jkl-radio-panel",ref:f,children:[a("label",{className:"jkl-radio-panel__label",children:[e("input",{onChange:x,checked:m,className:"jkl-radio-panel__input",type:"radio",...h}),e("span",{"aria-hidden":"true",className:"jkl-radio-panel__dot"}),e("span",{className:"jkl-radio-panel__main-label",children:c}),e("span",{className:l("jkl-radio-panel__extra-label",{"jkl-radio-panel__extra-label--text":"string"==typeof p}),children:p})]}),e("div",{"data-open":_&&b,"data-alwaysOpen":d&&b,ref:k,className:"jkl-radio-panel__content","aria-live":!d&&b?"polite":void 0,children:_&&n})]})}));export{d as RadioPanel};
 //# sourceMappingURL=RadioPanel.js.map

package/build/es/components/radio-panel/RadioPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioPanel.js","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n Children,\n ComponentPropsWithRef,\n ForwardedRef,\n forwardRef,\n useCallback,\n useEffect,\n useState,\n} from \"react\";\nimport { useAutoAnimatedHeight } from \"../../hooks/~~index~~.js\";\n\ntype Props = Omit<ComponentPropsWithRef<\"input\">, \"type\"> & {\n name: string;\n value: string;\n label: string;\n extraLabel?: React.ReactNode;\n alwaysOpen?: boolean;\n};\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n {\n children,\n alwaysOpen = false,\n label,\n extraLabel,\n checked,\n onChange,\n ...rest\n }: Props,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const [renderChildren, setRenderChildren] = useState(true);\n const animationRef = useAutoAnimatedHeight<HTMLDivElement>(renderChildren);\n\n const handleChange = useCallback(\n (e?: ChangeEvent<HTMLInputElement>) => {\n if (typeof e !== \"undefined\") {\n onChange?.(e);\n }\n\n if (alwaysOpen) {\n return -1;\n }\n\n // Hvis går fra lukket til åpen, trigge endring i live-region men\n // vent \"lenge nok\" til at skjermleseren får det med seg,\n // radio-knapper får bare en change event når de velges. Det at\n // en annen radio i gruppen blir valgt trigger bare et event på den.\n setRenderChildren(false);\n return window.setTimeout(() => {\n setRenderChildren(true);\n }, 200);\n },\n [setRenderChildren, alwaysOpen, onChange],\n );\n\n useEffect(() => {\n if (!checked) {\n return;\n }\n const timeoutId = handleChange();\n return () => window.clearTimeout(timeoutId);\n }, [checked, handleChange]);\n\n const hasChildren = Children.count(children) > 0;\n\n return (\n <div className=\"jkl-radio-panel\" ref={ref}>\n <label className=\"jkl-radio-panel__label\">\n <input\n onChange={handleChange}\n checked={checked}\n className=\"jkl-radio-panel__input\"\n type=\"radio\"\n {...rest}\n />\n <span\n aria-hidden=\"true\"\n className=\"jkl-radio-panel__dot\"\n ></span>\n <span className=\"jkl-radio-panel__main-label\">{label}</span>\n <span\n className={clsx(\"jkl-radio-panel__extra-label\", {\n \"jkl-radio-panel__extra-label--text\":\n typeof extraLabel === \"string\",\n })}\n >\n {extraLabel}\n </span>\n </label>\n <div\n data-open={renderChildren && hasChildren}\n data-alwaysOpen={alwaysOpen && hasChildren}\n ref={animationRef}\n className=\"jkl-radio-panel__content\"\n aria-live={!alwaysOpen && hasChildren ? \"polite\" : undefined}\n >\n {renderChildren && children}\n </div>\n </div>\n );\n});\n"],"names":["RadioPanel","forwardRef","children","alwaysOpen","label","extraLabel","checked","onChange","rest","ref","renderChildren","setRenderChildren","useState","animationRef","useAutoAnimatedHeight","handleChange","useCallback","e","window","setTimeout","useEffect","timeoutId","clearTimeout","hasChildren","Children","count","jsxs","className","jsx","type","clsx"],"mappings":"~~2WAqBa~~,MAAAA,EAAaC,GAAW,UAE7BC,SAAAA,EACAC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,KACGC,GAEPC,GAEM,MAACC,EAAgBC,GAAqBC,GAAS,GAC/CC,EAAeC,EAAsCJ,GAErDK,EAAeC,GAChBC,WACcA,EAAM,MACb,MAAAV,GAAAA,EAAWU,IAGXd,MAQJQ,GAAkB,GACXO,OAAOC,YAAW,KACrBR,GAAkB,EAAI,GACvB,QAEP,CAACA,EAAmBR,EAAYI,IAGpCa,GAAU,KACN,IAAKd,EACD,OAEJ,MAAMe,EAAYN,IACX,MAAA,IAAMG,OAAOI,aAAaD,EAAS,GAC3C,CAACf,EAASS,IAEb,MAAMQ,EAAcC,EAASC,MAAMvB,GAAY,EAG1C,OAAAwB,EAAA,MAAA,CAAIC,UAAU,kBAAkBlB,IAAAA,EAC7BP,SAAA,CAACwB,EAAA,QAAA,CAAMC,UAAU,yBACbzB,SAAA,CAAA0B,EAAC,QAAA,CACGrB,SAAUQ,EACVT,QAAAA,EACAqB,UAAU,yBACVE,KAAK,WACDrB,IAERoB,EAAC,OAAA,CACG,cAAY,OACZD,UAAU,yBAEbC,EAAA,OAAA,CAAKD,UAAU,8BAA+BzB,SAAME,IACrDwB,EAAC,OAAA,CACGD,UAAWG,EAAK,+BAAgC,CAC5C,qCAC0B,iBAAfzB,IAGdH,SAAAG,OAGTuB,EAAC,MAAA,CACG,YAAWlB,GAAkBa,EAC7B,kBAAiBpB,GAAcoB,EAC/Bd,IAAKI,EACLc,UAAU,2BACV,aAAYxB,GAAcoB,EAAc,cAAW,EAElDrB,SAAkBQ,GAAAR,MAInC"}
1	+ {"version":3,"file":"RadioPanel.js","sources":["../../../../src/components/radio-panel/RadioPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n Children,\n ComponentPropsWithRef,\n ForwardedRef,\n forwardRef,\n useCallback,\n useEffect,\n useState,\n} from \"react\";\nimport { useAutoAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAutoAnimateHeight.js\";\n\ntype Props = Omit<ComponentPropsWithRef<\"input\">, \"type\"> & {\n name: string;\n value: string;\n label: string;\n extraLabel?: React.ReactNode;\n alwaysOpen?: boolean;\n};\n\nexport const RadioPanel = forwardRef(function RadioPanel(\n {\n children,\n alwaysOpen = false,\n label,\n extraLabel,\n checked,\n onChange,\n ...rest\n }: Props,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const [renderChildren, setRenderChildren] = useState(true);\n const animationRef = useAutoAnimatedHeight<HTMLDivElement>(renderChildren);\n\n const handleChange = useCallback(\n (e?: ChangeEvent<HTMLInputElement>) => {\n if (typeof e !== \"undefined\") {\n onChange?.(e);\n }\n\n if (alwaysOpen) {\n return -1;\n }\n\n // Hvis går fra lukket til åpen, trigge endring i live-region men\n // vent \"lenge nok\" til at skjermleseren får det med seg,\n // radio-knapper får bare en change event når de velges. Det at\n // en annen radio i gruppen blir valgt trigger bare et event på den.\n setRenderChildren(false);\n return window.setTimeout(() => {\n setRenderChildren(true);\n }, 200);\n },\n [setRenderChildren, alwaysOpen, onChange],\n );\n\n useEffect(() => {\n if (!checked) {\n return;\n }\n const timeoutId = handleChange();\n return () => window.clearTimeout(timeoutId);\n }, [checked, handleChange]);\n\n const hasChildren = Children.count(children) > 0;\n\n return (\n <div className=\"jkl-radio-panel\" ref={ref}>\n <label className=\"jkl-radio-panel__label\">\n <input\n onChange={handleChange}\n checked={checked}\n className=\"jkl-radio-panel__input\"\n type=\"radio\"\n {...rest}\n />\n <span\n aria-hidden=\"true\"\n className=\"jkl-radio-panel__dot\"\n ></span>\n <span className=\"jkl-radio-panel__main-label\">{label}</span>\n <span\n className={clsx(\"jkl-radio-panel__extra-label\", {\n \"jkl-radio-panel__extra-label--text\":\n typeof extraLabel === \"string\",\n })}\n >\n {extraLabel}\n </span>\n </label>\n <div\n data-open={renderChildren && hasChildren}\n data-alwaysOpen={alwaysOpen && hasChildren}\n ref={animationRef}\n className=\"jkl-radio-panel__content\"\n aria-live={!alwaysOpen && hasChildren ? \"polite\" : undefined}\n >\n {renderChildren && children}\n </div>\n </div>\n );\n});\n"],"names":["RadioPanel","forwardRef","children","alwaysOpen","label","extraLabel","checked","onChange","rest","ref","renderChildren","setRenderChildren","useState","animationRef","useAutoAnimatedHeight","handleChange","useCallback","e","window","setTimeout","useEffect","timeoutId","clearTimeout","hasChildren","Children","count","jsxs","className","jsx","type","clsx"],"mappings":"6RAqBa,MAAAA,EAAaC,GAAW,UAE7BC,SAAAA,EACAC,WAAAA,GAAa,EACbC,MAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,SAAAA,KACGC,GAEPC,GAEM,MAACC,EAAgBC,GAAqBC,GAAS,GAC/CC,EAAeC,EAAsCJ,GAErDK,EAAeC,GAChBC,WACcA,EAAM,MACb,MAAAV,GAAAA,EAAWU,IAGXd,MAQJQ,GAAkB,GACXO,OAAOC,YAAW,KACrBR,GAAkB,EAAI,GACvB,QAEP,CAACA,EAAmBR,EAAYI,IAGpCa,GAAU,KACN,IAAKd,EACD,OAEJ,MAAMe,EAAYN,IACX,MAAA,IAAMG,OAAOI,aAAaD,EAAS,GAC3C,CAACf,EAASS,IAEb,MAAMQ,EAAcC,EAASC,MAAMvB,GAAY,EAG1C,OAAAwB,EAAA,MAAA,CAAIC,UAAU,kBAAkBlB,IAAAA,EAC7BP,SAAA,CAACwB,EAAA,QAAA,CAAMC,UAAU,yBACbzB,SAAA,CAAA0B,EAAC,QAAA,CACGrB,SAAUQ,EACVT,QAAAA,EACAqB,UAAU,yBACVE,KAAK,WACDrB,IAERoB,EAAC,OAAA,CACG,cAAY,OACZD,UAAU,yBAEbC,EAAA,OAAA,CAAKD,UAAU,8BAA+BzB,SAAME,IACrDwB,EAAC,OAAA,CACGD,UAAWG,EAAK,+BAAgC,CAC5C,qCAC0B,iBAAfzB,IAGdH,SAAAG,OAGTuB,EAAC,MAAA,CACG,YAAWlB,GAAkBa,EAC7B,kBAAiBpB,GAAcoB,EAC/Bd,IAAKI,EACLc,UAAU,2BACV,aAAYxB,GAAcoB,EAAc,cAAW,EAElDrB,SAAkBQ,GAAAR,MAInC"}

package/build/es/components/select/NativeSelect.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{forwardRef as s}from"react";import{getValuePair as c}from"../../utilities/valuePair.js";import"../icon/Icon.js";import{ArrowVerticalAnimated as e}from"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{InputGroup as r}from"../input-group/InputGroup.js";const t=s(((s,t)=>{const{label:a,className:l,density:p,errorLabel:m,helpLabel:j,inline:I,invalid:u,items:d,labelProps:h,placeholder:v="Velg",selectClassName:b,supportLabelProps:w,tooltipProps:f,value:k,width:A,...C}=s;return o(r,{label:a,density:p,errorLabel:m,helpLabel:j,labelProps:h,inline:I,supportLabelProps:w,tooltipProps:f,"data-testid":"jkl-select",className:n("jkl-select",l,{"jkl-select--inline":I,"jkl-select--invalid":!!m||u}),render:s=>i("div",{className:"jkl-select__outer-wrapper",style:{width:A},children:[i("select",{ref:t,className:n("jkl-select__button",b,{"jkl-select__button--active-value":!!k}),defaultValue:k?void 0:"",value:k,...s,...C,children:[v&&!k&&o("option",{disabled:!0,value:"",children:v}),d.map(c).map((i=>o("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:i.value,children:i.label},i.value)))]}),o(e,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));t.displayName="NativeSelect";export{t as NativeSelect};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{getValuePair as s}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as r}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as i}from"../input-group/InputGroup.js";const o=t(((t,o)=>{const{label:p,className:n,density:c,errorLabel:m,helpLabel:d,inline:u,invalid:j,items:v,labelProps:b,placeholder:_="Velg",selectClassName:f,supportLabelProps:k,tooltipProps:N,value:h,width:w,...P}=t;return e(i,{label:p,density:c,errorLabel:m,helpLabel:d,labelProps:b,inline:u,supportLabelProps:k,tooltipProps:N,"data-testid":"jkl-select",className:a("jkl-select",n,{"jkl-select--inline":u,"jkl-select--invalid":!!m||j}),render:t=>l("div",{className:"jkl-select__outer-wrapper",style:{width:w},children:[l("select",{ref:o,className:a("jkl-select__button",f,{"jkl-select__button--active-value":!!h}),defaultValue:h?void 0:"",value:h,...t,...P,children:[_&&!h&&e("option",{disabled:!0,value:"",children:_}),v.map(s).map((l=>e("option",{"data-testid":"jkl-select__option",className:"jkl-select__option",value:l.value,children:l.label},l.value)))]}),e(r,{variant:"medium",pointingDown:!0,className:"jkl-select__arrow"})]})})}));o.displayName="NativeSelect";export{o as NativeSelect};
 //# sourceMappingURL=NativeSelect.js.map

package/build/es/components/select/NativeSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NativeSelect.js","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/~~index~~.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\n\nexport interface NativeSelectProps\n extends Omit<InputGroupProps, \"children\">,\n SelectHTMLAttributes<HTMLSelectElement> {\n /*\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Setter inn et placeholderelement som vises når ingenting er valgt i nedtrekkslisten.\n * @default \"Velg\"\n */\n placeholder?: string;\n items: Array<string \| ValuePair>;\n selectClassName?: string;\n width?: string;\n}\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n invalid,\n items,\n labelProps,\n placeholder = \"Velg\",\n selectClassName,\n supportLabelProps,\n tooltipProps,\n value,\n width,\n ...rest\n } = props;\n\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltipProps,\n };\n\n return (\n <InputGroup\n {...inputGroupProps}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n <select\n ref={ref}\n className={clsx(\n \"jkl-select__button\",\n selectClassName,\n {\n \"jkl-select__button--active-value\": !!value,\n },\n )}\n defaultValue={value ? undefined : \"\"}\n value={value}\n {...inputProps}\n {...rest}\n >\n {placeholder && !value && (\n <option disabled value=\"\">\n {placeholder}\n </option>\n )}\n {items.map(getValuePair).map((item) => (\n <option\n data-testid=\"jkl-select__option\"\n className=\"jkl-select__option\"\n key={item.value}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltipProps","value","width","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"~~4lDAwBO~~,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHjB,EAcA,OAAAkB,EAACC,EAAA,CAXDjB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,aAAAA,EAMI,cAAY,aACZX,UAAWiB,EAAK,aAAcjB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Ca,OAASC,GACLC,EAAC,MAAA,CACGpB,UAAU,4BACVqB,MAAO,CAAER,MAAAA,GAETS,SAAA,CAAAF,EAAC,SAAA,CACGtB,IAAAA,EACAE,UAAWiB,EACP,qBACAR,EACA,CACI,qCAAsCG,IAG9CW,aAAcX,OAAQ,EAAY,GAClCA,MAAAA,KACIO,KACAL,EAEHQ,SAAA,CAAed,IAACI,GACZG,EAAA,SAAA,CAAOS,UAAQ,EAACZ,MAAM,GAClBU,SACLd,IAEHF,EAAMmB,IAAIC,GAAcD,KAAKE,GAC1BZ,EAAC,SAAA,CACG,cAAY,qBACZf,UAAU,qBAEVY,MAAOe,EAAKf,MAEXU,SAAKK,EAAA5B,OAHD4B,EAAKf,YAOtBG,EAACa,EAAA,CACGC,QAAQ,SACRC,cAAY,EACZ9B,UAAU,0BAElB,IAOpBL,EAAaoC,YAAc"}
1	+ {"version":3,"file":"NativeSelect.js","sources":["../../../../src/components/select/NativeSelect.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, SelectHTMLAttributes } from \"react\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\n\nexport interface NativeSelectProps\n extends Omit<InputGroupProps, \"children\">,\n SelectHTMLAttributes<HTMLSelectElement> {\n /*\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Setter inn et placeholderelement som vises når ingenting er valgt i nedtrekkslisten.\n * @default \"Velg\"\n */\n placeholder?: string;\n items: Array<string \| ValuePair>;\n selectClassName?: string;\n width?: string;\n}\n\nexport const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n (props, ref) => {\n const {\n label,\n className,\n density,\n errorLabel,\n helpLabel,\n inline,\n invalid,\n items,\n labelProps,\n placeholder = \"Velg\",\n selectClassName,\n supportLabelProps,\n tooltipProps,\n value,\n width,\n ...rest\n } = props;\n\n const inputGroupProps = {\n label,\n density,\n errorLabel,\n helpLabel,\n labelProps,\n inline,\n supportLabelProps,\n tooltipProps,\n };\n\n return (\n <InputGroup\n {...inputGroupProps}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n <select\n ref={ref}\n className={clsx(\n \"jkl-select__button\",\n selectClassName,\n {\n \"jkl-select__button--active-value\": !!value,\n },\n )}\n defaultValue={value ? undefined : \"\"}\n value={value}\n {...inputProps}\n {...rest}\n >\n {placeholder && !value && (\n <option disabled value=\"\">\n {placeholder}\n </option>\n )}\n {items.map(getValuePair).map((item) => (\n <option\n data-testid=\"jkl-select__option\"\n className=\"jkl-select__option\"\n key={item.value}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nNativeSelect.displayName = \"NativeSelect\";\n"],"names":["NativeSelect","forwardRef","props","ref","label","className","density","errorLabel","helpLabel","inline","invalid","items","labelProps","placeholder","selectClassName","supportLabelProps","tooltipProps","value","width","rest","jsx","InputGroup","clsx","render","inputProps","jsxs","style","children","defaultValue","disabled","map","getValuePair","item","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"iVAwBO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,MAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,YAAAA,EAAc,OACdC,gBAAAA,EACAC,kBAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,MAAAA,KACGC,GACHjB,EAcA,OAAAkB,EAACC,EAAA,CAXDjB,MAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAI,WAAAA,EACAH,OAAAA,EACAM,kBAAAA,EACAC,aAAAA,EAMI,cAAY,aACZX,UAAWiB,EAAK,aAAcjB,EAAW,CACrC,qBAAsBI,EACtB,wBAAyBF,GAAcG,IAE3Ca,OAASC,GACLC,EAAC,MAAA,CACGpB,UAAU,4BACVqB,MAAO,CAAER,MAAAA,GAETS,SAAA,CAAAF,EAAC,SAAA,CACGtB,IAAAA,EACAE,UAAWiB,EACP,qBACAR,EACA,CACI,qCAAsCG,IAG9CW,aAAcX,OAAQ,EAAY,GAClCA,MAAAA,KACIO,KACAL,EAEHQ,SAAA,CAAed,IAACI,GACZG,EAAA,SAAA,CAAOS,UAAQ,EAACZ,MAAM,GAClBU,SACLd,IAEHF,EAAMmB,IAAIC,GAAcD,KAAKE,GAC1BZ,EAAC,SAAA,CACG,cAAY,qBACZf,UAAU,qBAEVY,MAAOe,EAAKf,MAEXU,SAAKK,EAAA5B,OAHD4B,EAAKf,YAOtBG,EAACa,EAAA,CACGC,QAAQ,SACRC,cAAY,EACZ9B,UAAU,0BAElB,IAOpBL,EAAaoC,YAAc"}

package/build/es/components/select/Select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as o,jsx as n}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r,useState as i,useCallback as s,useMemo as c,useRef as a,useEffect as l}from"react";import{useAnimatedHeight as u}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import{useId as p}from"../../hooks/useId/useId.js";import{useListNavigation as d}from"../../hooks/useListNavigation/useListNavigation.js";import{usePreviousValue as m}from"../../hooks/usePreviousValue/usePreviousValue.js";import{getValuePair as v}from"../../utilities/valuePair.js";import"../icon/Icon.js";import{ArrowVerticalAnimated as f}from"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{InputGroup as j}from"../input-group/InputGroup.js";import{focusSelected as h,toLower as b}from"./select-utils.js";const g=()=>{},k=r(((r,k)=>{const{id:w,name:y,items:I,value:_,label:P,labelProps:D,onChange:C,onBlur:L,onFocus:A,className:E,helpLabel:N,errorLabel:$,invalid:x,searchable:S=!1,inline:T=!1,defaultPrompt:F="Velg",density:V,width:R,maxShownOptions:H=5,style:K,tooltipProps:B,...M}=r,U=p(w||"jkl-select",{generateSuffix:!w}),G=`${U}_label`,O=`${U}_button`,q=`${U}_search-input`,[z,Q]=i(!1),W=s((()=>{Q((e=>!e))}),[]),J=!!S,X=J&&z,[Y,Z]=i(""),ee=s((e=>!!e.label.toLowerCase().includes(Y.toLowerCase())||"function"==typeof S&&S(Y,e)),[S,Y]),oe=c((()=>I.map(v).map((e=>{const o=!J||""===Y||ee(e);return{...e,visible:o}}))),[I,J,Y,ee]),ne=c((()=>!(typeof _>"u")&&I.some((e=>"string"==typeof e?e===_:e.value===_))),[_,I]),[te,re]=i(ne&&void 0!==_?_:""),ie=""!==te,se=c((()=>{var e;return(null==(e=oe.find((e=>e.value===te)))?void 0:e.label)||F}),[oe,te,F]),ce=a(null),ae=s((e=>{ce.current=e,k&&("function"==typeof k?k(e):k.current=e),e&&re(e.value)}),[ce,k]),le=m(_);l((()=>{_!==le&&re(typeof _>"u"||!ne?"":_)}),[re,_,le,ne]);const ue=s((e=>{const o=e.value;Z(""),re(o),W()}),[Z,re,W]),pe=m(te);l((()=>{typeof pe>"u"||pe===te||te===_||(C&&C({type:"change",target:{name:y,value:te}}),ce.current&&ce.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[C,y,_,te,pe]);const de=a(null),me=a(!1),ve=a(null),fe=a(null),je=s(((e,o)=>{if(e&&!J){const e=o.current;e&&h(e,te)}else e?ve.current&&ve.current.focus():me.current&&fe.current&&fe.current.focus()}),[J,te]),[he]=u(z,{onFirstVisible:je,onTransitionEnd:je});d({ref:he});const be=s((()=>{var e;J&&Z(""),L&&(L({type:"blur",target:{name:y,value:te}}),null==(e=ce.current)||e.dispatchEvent(new Event("focusout",{bubbles:!0}))),me.current=!1,Q(!1)}),[L,Z,Q,J,y,te]),ge=s((e=>{const o=de.current;o&&o.contains(e.relatedTarget)||be()}),[be]),ke=s((()=>{me.current||(A&&A({type:"change",target:{name:y,value:te}}),me.current=!0)}),[A,te,y]),we=s((e=>{e.target.focus({preventScroll:!0})}),[]);l((()=>{const e=ce.current,o=ve.current,n=fe.current,t=de.current;return null==e||e.addEventListener("focus",(()=>{X?null==o||o.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{X?null==o||o.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){t&&t.contains(e.relatedTarget)&&e.preventDefault()}))}}),[X]);const ye=s((e=>{"ArrowDown"!==e.key&&" "!==e.key||z?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),Q(!1)):(e.preventDefault(),e.stopPropagation(),Q(!0))}),[Q,z]),Ie=s((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const o=he.current;o&&h(o,J?void 0:te)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),Q(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&z&&(e.preventDefault(),e.stopPropagation());else{const o=he.current;o&&(e.preventDefault(),e.stopPropagation(),h(o,te))}}),[Q,he,te,J,z]),_e=s((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&ve.current?ve.current.focus():fe.current&&(re(e.currentTarget.value),Q(!1),fe.current.focus());else if("ArrowUp"===e.key&&he.current&&ve.current){const o=he.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==o?void 0:o.id)&&ve.current&&ve.current.focus()}}),[Q,he]);return l((()=>{const e=e=>{"Escape"===e.key&&z&&Q(!1)};return typeof window<"u"&&z&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[Q,z]),e(o,{children:[e("select",{name:y,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ae,value:te,onChange:g,children:[n("option",{value:""})," ",oe.map((e=>n("option",{hidden:!e.visible,value:e.value,children:e.label},`${U}-opt-${e.value}`)))]}),n(j,{ref:de,"data-testid":"jkl-select",className:t("jkl-select",E,{"jkl-select--inline":T,"jkl-select--open":z&&oe.some((e=>e.visible)),"jkl-select--no-value":!ie,"jkl-select--invalid":!!$||x}),tooltipProps:B&&{...B,triggerProps:{...B.triggerProps,onFocus:e=>{var o,n;null==(n=null==(o=B.triggerProps)?void 0:o.onFocus)||n.call(o,e),be()}}},...M,id:J?q:O,style:{"--jkl-select-max-shown-options":H,...K},density:V,label:P,labelProps:{id:G,srOnly:T,...D,htmlFor:J?q:O},helpLabel:N,errorLabel:$,render:o=>e("div",{className:"jkl-select__outer-wrapper",style:{width:R},children:[J&&n("input",{...o,id:q,hidden:!X,ref:ve,placeholder:"Søk",value:Y,onChange:e=>Z(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":ie?`${U}__${b(te)}`:void 0,"aria-controls":U,"aria-expanded":z,role:"combobox",onKeyDown:Ie,onBlur:ge,onFocus:ke,onClick:e=>{e.stopPropagation()}}),n("button",{...o,id:O,ref:fe,hidden:X,type:"button",name:`${y}-btn`,className:t("jkl-select__button",{"jkl-select__button--active-value":!!te}),"data-testid":"jkl-select__button","aria-label":`${se||"Velg"},${P}`,"aria-expanded":z,"aria-controls":U,onBlur:ge,onFocus:ke,onKeyDown:ye,onClick:W,onMouseDown:e=>{var o;e.preventDefault(),null==(o=fe.current)||o.focus()},children:se}),n("div",{id:U,ref:he,role:"listbox",className:"jkl-select__options-menu",hidden:!z||oe.every((e=>!e.visible)),"aria-labelledby":G,tabIndex:-1,"data-focus":"controlled",children:oe.map(((o,t)=>o.visible?e("button",{hidden:!o.visible,type:"button",id:`${U}__${b(o.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":o.value===te,role:"option",value:o.value,"data-testautoid":`jkl-select__option-${t}`,onBlur:ge,onFocus:ke,onKeyDown:_e,onClick:e=>{e.preventDefault(),ue(o)},onMouseOver:we,children:[o.label,o.description?n("span",{className:"jkl-select__option-description",children:o.description}):null]},`${U}-${o.value}`):null))}),n(f,{variant:"medium",pointingDown:!z,className:"jkl-select__arrow"})]})})]})}));k.displayName="Select";export{k as Select};
+import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as o,useState as a,useCallback as l,useMemo as s,useRef as i,useEffect as u}from"react";import{useAnimatedHeight as c}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import{useId as p}from"../../hooks/useId/useId.js";import{useListNavigation as d}from"../../hooks/useListNavigation/useListNavigation.js";import{usePreviousValue as v}from"../../hooks/usePreviousValue/usePreviousValue.js";import{getValuePair as f}from"../../utilities/valuePair.js";import{ArrowVerticalAnimated as m}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{InputGroup as b}from"../input-group/InputGroup.js";import{focusSelected as g,toLower as h}from"./select-utils.js";const k=()=>{},y=o(((o,y)=>{const{id:j,name:w,items:_,value:P,label:D,labelProps:E,onChange:L,onBlur:$,onFocus:x,className:N,helpLabel:A,errorLabel:C,invalid:F,searchable:S=!1,inline:V=!1,defaultPrompt:T="Velg",density:I,width:K,maxShownOptions:B=5,style:H,tooltipProps:M,...O}=o,G=p(j||"jkl-select",{generateSuffix:!j}),R=`${G}_label`,q=`${G}_button`,U=`${G}_search-input`,[z,J]=a(!1),Q=l((()=>{J((e=>!e))}),[]),W=!!S,X=W&&z,[Y,Z]=a(""),ee=l((e=>!!e.label.toLowerCase().includes(Y.toLowerCase())||"function"==typeof S&&S(Y,e)),[S,Y]),te=s((()=>_.map(f).map((e=>{const t=!W||""===Y||ee(e);return{...e,visible:t}}))),[_,W,Y,ee]),ne=s((()=>!(typeof P>"u")&&_.some((e=>"string"==typeof e?e===P:e.value===P))),[P,_]),[re,oe]=a(ne&&void 0!==P?P:""),ae=""!==re,le=s((()=>{var e;return(null==(e=te.find((e=>e.value===re)))?void 0:e.label)||T}),[te,re,T]),se=i(null),ie=l((e=>{se.current=e,y&&("function"==typeof y?y(e):y.current=e),e&&oe(e.value)}),[se,y]),ue=v(P);u((()=>{P!==ue&&oe(typeof P>"u"||!ne?"":P)}),[oe,P,ue,ne]);const ce=l((e=>{const t=e.value;Z(""),oe(t),Q()}),[Z,oe,Q]),pe=v(re);u((()=>{typeof pe>"u"||pe===re||re===P||(L&&L({type:"change",target:{name:w,value:re}}),se.current&&se.current.dispatchEvent(new Event("change",{bubbles:!0})))}),[L,w,P,re,pe]);const de=i(null),ve=i(!1),fe=i(null),me=i(null),be=l(((e,t)=>{if(e&&!W){const e=t.current;e&&g(e,re)}else e?fe.current&&fe.current.focus():ve.current&&me.current&&me.current.focus()}),[W,re]),[ge]=c(z,{onFirstVisible:be,onTransitionEnd:be});d({ref:ge});const he=l((()=>{var e;W&&Z(""),$&&($({type:"blur",target:{name:w,value:re}}),null==(e=se.current)||e.dispatchEvent(new Event("focusout",{bubbles:!0}))),ve.current=!1,J(!1)}),[$,Z,J,W,w,re]),ke=l((e=>{const t=de.current;t&&t.contains(e.relatedTarget)||he()}),[he]),ye=l((()=>{ve.current||(x&&x({type:"change",target:{name:w,value:re}}),ve.current=!0)}),[x,re,w]),je=l((e=>{e.target.focus({preventScroll:!0})}),[]);u((()=>{const e=se.current,t=fe.current,n=me.current,r=de.current;return null==e||e.addEventListener("focus",(()=>{X?null==t||t.focus():null==n||n.focus()})),null==e||e.addEventListener("blur",(function(e){r&&r.contains(e.relatedTarget)&&e.preventDefault()})),()=>{null==e||e.removeEventListener("focus",(()=>{X?null==t||t.focus():null==n||n.focus()})),null==e||e.removeEventListener("blur",(function(e){r&&r.contains(e.relatedTarget)&&e.preventDefault()}))}}),[X]);const we=l((e=>{"ArrowDown"!==e.key&&" "!==e.key||z?"Escape"===e.key&&(e.preventDefault(),e.stopPropagation(),J(!1)):(e.preventDefault(),e.stopPropagation(),J(!0))}),[J,z]),_e=l((e=>{if("ArrowDown"===e.key){e.preventDefault(),e.stopPropagation();const t=ge.current;t&&g(t,W?void 0:re)}else if("Escape"===e.key)e.preventDefault(),e.stopPropagation(),J(!1);else if("Tab"!==e.key||e.shiftKey)"Enter"===e.key&&z&&(e.preventDefault(),e.stopPropagation());else{const t=ge.current;t&&(e.preventDefault(),e.stopPropagation(),g(t,re))}}),[J,ge,re,W,z]),Pe=l((e=>{if("Tab"===e.key)e.preventDefault(),e.stopPropagation(),e.shiftKey&&fe.current?fe.current.focus():me.current&&(oe(e.currentTarget.value),J(!1),me.current.focus());else if("ArrowUp"===e.key&&ge.current&&fe.current){const t=ge.current.querySelector('[role="option"]:not([hidden])');e.currentTarget.id===(null==t?void 0:t.id)&&fe.current&&fe.current.focus()}}),[J,ge]);return u((()=>{const e=e=>{"Escape"===e.key&&z&&J(!1)};return typeof window<"u"&&z&&window.addEventListener("keydown",e),()=>{typeof window<"u"&&window.removeEventListener("keydown",e)}}),[J,z]),e(t,{children:[e("select",{name:w,tabIndex:-1,"data-testid":"jkl-native-select",className:"jkl-sr-only","aria-hidden":!0,ref:ie,value:re,onChange:k,children:[n("option",{value:""})," ",te.map((e=>n("option",{hidden:!e.visible,value:e.value,children:e.label},`${G}-opt-${e.value}`)))]}),n(b,{ref:de,"data-testid":"jkl-select",className:r("jkl-select",N,{"jkl-select--inline":V,"jkl-select--open":z&&te.some((e=>e.visible)),"jkl-select--no-value":!ae,"jkl-select--invalid":!!C||F}),tooltipProps:M&&{...M,triggerProps:{...M.triggerProps,onFocus:e=>{var t,n;null==(n=null==(t=M.triggerProps)?void 0:t.onFocus)||n.call(t,e),he()}}},...O,id:W?U:q,style:{"--jkl-select-max-shown-options":B,...H},density:I,label:D,labelProps:{id:R,srOnly:V,...E,htmlFor:W?U:q},helpLabel:A,errorLabel:C,render:t=>e("div",{className:"jkl-select__outer-wrapper",style:{width:K},children:[W&&n("input",{...t,id:U,hidden:!X,ref:fe,placeholder:"Søk",value:Y,onChange:e=>Z(e.target.value),"data-testid":"jkl-select__search-input",className:"jkl-select__search-input","aria-autocomplete":"list","aria-activedescendant":ae?`${G}__${h(re)}`:void 0,"aria-controls":G,"aria-expanded":z,role:"combobox",onKeyDown:_e,onBlur:ke,onFocus:ye,onClick:e=>{e.stopPropagation()}}),n("button",{...t,id:q,ref:me,hidden:X,type:"button",name:`${w}-btn`,className:r("jkl-select__button",{"jkl-select__button--active-value":!!re}),"data-testid":"jkl-select__button","aria-label":`${le||"Velg"},${D}`,"aria-expanded":z,"aria-controls":G,onBlur:ke,onFocus:ye,onKeyDown:we,onClick:Q,onMouseDown:e=>{var t;e.preventDefault(),null==(t=me.current)||t.focus()},children:le}),n("div",{id:G,ref:ge,role:"listbox",className:"jkl-select__options-menu",hidden:!z||te.every((e=>!e.visible)),"aria-labelledby":R,tabIndex:-1,"data-focus":"controlled",children:te.map(((t,r)=>t.visible?e("button",{hidden:!t.visible,type:"button",id:`${G}__${h(t.value)}`,className:"jkl-select__option","data-testid":"jkl-select__option","aria-selected":t.value===re,role:"option",value:t.value,"data-testautoid":`jkl-select__option-${r}`,onBlur:ke,onFocus:ye,onKeyDown:Pe,onClick:e=>{e.preventDefault(),ce(t)},onMouseOver:je,children:[t.label,t.description?n("span",{className:"jkl-select__option-description",children:t.description}):null]},`${G}-${t.value}`):null))}),n(m,{variant:"medium",pointingDown:!z,className:"jkl-select__arrow"})]})})]})}));y.displayName="Select";export{y as Select};
 //# sourceMappingURL=Select.js.map

package/build/es/components/select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n CSSProperties,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/index.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\n\ninterface PartialChangeEvent\n extends Partial<Omit<ChangeEvent<HTMLSelectElement>, \"target\">> {\n /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change /\n type: \"change\" \| \"blur\";\n target: {\n /* Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret /\n name: string;\n value: string;\n };\n}\n\ntype ChangeEventHandler = (event: PartialChangeEvent) => void;\n\ninterface Option extends ValuePair {\n visible: boolean;\n}\n\nexport interface SelectProps\n extends Omit<InputGroupProps, \"children\">,\n DataTestAutoId {\n id?: string;\n name: string;\n label: string;\n labelProps?: Omit<\n LabelProps,\n \"children\" \| \"density\" \| \"htmlFor\" \| \"standAlone\"\n >;\n items: Array<string \| ValuePair>;\n /\n @default false\n /\n inline?: boolean;\n /\n @default \"Velg\"\n /\n defaultPrompt?: string;\n className?: string;\n value?: string;\n helpLabel?: string;\n errorLabel?: string;\n /\n @default false\n /\n searchable?:\n \| boolean\n \| ((searchValue: string, searchItem: string \| ValuePair) => boolean);\n density?: Density;\n width?: string;\n onChange?: ChangeEventHandler;\n onBlur?: ChangeEventHandler;\n onFocus?: ChangeEventHandler;\n /\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Hvor mange valg skal vises i listen før den begynner å scrolle.\n * @default 5\n /\n maxShownOptions?: number;\n}\n\nconst noop = () => {\n return;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedSelectRef) => {\n const {\n id,\n name,\n items,\n value,\n label,\n labelProps,\n onChange,\n onBlur,\n onFocus,\n className,\n helpLabel,\n errorLabel,\n invalid,\n searchable = false,\n inline = false,\n defaultPrompt = \"Velg\",\n density,\n width,\n maxShownOptions = 5,\n style,\n tooltipProps,\n ...rest\n } = props;\n\n const listId = useId(id \|\| \"jkl-select\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const searchInputId = `${listId}_search-input`;\n\n const [dropdownIsShown, setShown] = useState(false);\n const toggleListVisibility = useCallback(() => {\n setShown((previousValue) => !previousValue);\n }, []);\n\n /// Søk\n\n const isSearchable = Boolean(searchable);\n const showSearchInputField = isSearchable && dropdownIsShown;\n const [searchValue, setSearchValue] = useState(\"\");\n const searchFn = useCallback(\n (item: ValuePair) => {\n if (\n item.label.toLowerCase().includes(searchValue.toLowerCase())\n ) {\n return true;\n }\n\n if (typeof searchable === \"function\") {\n return searchable(searchValue, item);\n }\n\n return false;\n },\n [searchable, searchValue],\n );\n const visibleItems: Option[] = useMemo(\n () =>\n items.map(getValuePair).map((item) => {\n const visible =\n !isSearchable \|\| searchValue === \"\" \|\| searchFn(item);\n return { ...item, visible };\n }),\n [items, isSearchable, searchValue, searchFn],\n );\n const valueIsInItems: boolean = useMemo(() => {\n if (typeof value === \"undefined\") {\n return false;\n }\n return items.some((item) =>\n typeof item === \"string\"\n ? item === value\n : item.value === value,\n );\n }, [value, items]);\n\n /// Valg av <option>\n\n const [selectedValue, setSelectedValue] = useState<string>(\n valueIsInItems && value !== undefined ? value : \"\",\n );\n const hasSelectedValue = selectedValue !== \"\";\n const selectedValueLabel = useMemo(\n () =>\n visibleItems.find((item) => item.value === selectedValue)\n ?.label \|\| defaultPrompt,\n [visibleItems, selectedValue, defaultPrompt],\n );\n\n const selectRef = useRef<HTMLSelectElement \| null>(null);\n // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n const unifiedSelectRef = useCallback(\n (instance: HTMLSelectElement \| null) => {\n selectRef.current = instance;\n if (forwardedSelectRef) {\n if (typeof forwardedSelectRef === \"function\") {\n forwardedSelectRef(instance);\n } else {\n forwardedSelectRef.current = instance;\n }\n }\n if (instance) {\n setSelectedValue(instance.value);\n }\n },\n [selectRef, forwardedSelectRef],\n );\n\n const previousValue = usePreviousValue(value);\n useEffect(() => {\n if (value === previousValue) {\n return;\n }\n if (typeof value === \"undefined\" \|\| !valueIsInItems) {\n setSelectedValue(\"\");\n } else {\n setSelectedValue(value);\n }\n }, [setSelectedValue, value, previousValue, valueIsInItems]);\n\n const selectOption = useCallback(\n (item: Option) => {\n const nextValue = item.value;\n setSearchValue(\"\");\n setSelectedValue(nextValue);\n toggleListVisibility();\n },\n [setSearchValue, setSelectedValue, toggleListVisibility],\n );\n\n // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n const previousSelectedValue = usePreviousValue(selectedValue);\n useEffect(() => {\n // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n if (\n typeof previousSelectedValue === \"undefined\" \|\|\n previousSelectedValue === selectedValue \|\|\n selectedValue === value\n ) {\n return;\n }\n if (onChange) {\n onChange({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n if (selectRef.current) {\n selectRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n /// Fokushåndtering\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n const searchFieldRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleFocusPlacement = useCallback(\n (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n if (isOpen && !isSearchable) {\n const listElement = ref.current;\n if (listElement) {\n focusSelected(listElement, selectedValue);\n }\n } else if (isOpen) {\n if (searchFieldRef.current) {\n searchFieldRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && buttonRef.current) {\n buttonRef.current.focus();\n }\n }\n },\n [isSearchable, selectedValue],\n );\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n dropdownIsShown,\n {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n },\n );\n\n useListNavigation({ ref: dropdownRef });\n\n const close = useCallback(() => {\n if (isSearchable) {\n setSearchValue(\"\");\n }\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: { name, value: selectedValue },\n });\n selectRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShown(false);\n }, [\n onBlur,\n setSearchValue,\n setShown,\n isSearchable,\n name,\n selectedValue,\n ]);\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLButtonElement \| HTMLInputElement>) => {\n const componentRootElement = componentRootElementRef.current;\n // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n // https://github.com/facebook/react/issues/2011\n // This might be fixed in react 17. Se issue above.\n const nextFocusIsInsideComponent =\n componentRootElement &&\n componentRootElement.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n close();\n }\n },\n [close],\n );\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n focusInsideRef.current = true;\n }\n }, [onFocus, selectedValue, name]);\n\n const handleMouseOver = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n },\n [],\n );\n\n // Handle focus and blur of hidden select element\n useEffect(() => {\n const select = selectRef.current;\n const searchField = searchFieldRef.current;\n const button = buttonRef.current;\n const componentRootElement = componentRootElementRef.current;\n\n select?.addEventListener(\"focus\", () => {\n showSearchInputField ? searchField?.focus() : button?.focus();\n });\n select?.addEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n\n return () => {\n select?.removeEventListener(\"focus\", () => {\n showSearchInputField\n ? searchField?.focus()\n : button?.focus();\n });\n select?.removeEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(\n ev.relatedTarget as Node,\n ) &&\n ev.preventDefault();\n });\n };\n }, [showSearchInputField]);\n\n /// Tastaturnavigasjon\n\n // Add support for opening dropdown with arrowkey down as expected from native select\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (\n (e.key === \"ArrowDown\" \|\| e.key === \" \") &&\n !dropdownIsShown\n ) {\n e.preventDefault();\n e.stopPropagation();\n setShown(true);\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n }\n },\n [setShown, dropdownIsShown],\n );\n\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n\n const listElement = dropdownRef.current;\n if (listElement) {\n if (isSearchable) {\n // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n // den valgte verdien.\n focusSelected(listElement, undefined);\n } else {\n focusSelected(listElement, selectedValue);\n }\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n } else if (e.key === \"Tab\" && !e.shiftKey) {\n const listElement = dropdownRef.current;\n if (listElement) {\n e.preventDefault();\n e.stopPropagation();\n focusSelected(listElement, selectedValue);\n }\n } else if (e.key === \"Enter\" && dropdownIsShown) {\n // Should not propagate Enter keyevent because form might submit\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [\n setShown,\n dropdownRef,\n selectedValue,\n isSearchable,\n dropdownIsShown,\n ],\n );\n\n // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey && searchFieldRef.current) {\n searchFieldRef.current.focus();\n } else if (buttonRef.current) {\n // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n setSelectedValue(e.currentTarget.value);\n setShown(false);\n buttonRef.current.focus();\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchFieldRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchFieldRef.current\n ) {\n searchFieldRef.current.focus();\n }\n }\n }\n },\n [setShown, dropdownRef],\n );\n\n // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && dropdownIsShown) {\n setShown(false);\n }\n };\n if (typeof window !== \"undefined\" && dropdownIsShown) {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\") {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [setShown, dropdownIsShown]);\n\n return (\n <>\n <select\n name={name}\n tabIndex={-1}\n data-testid=\"jkl-native-select\"\n className=\"jkl-sr-only\"\n aria-hidden\n ref={unifiedSelectRef}\n value={selectedValue}\n onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n >\n <option value=\"\"></option>{\" \"}\n {/ Tom option må være et valg, ellers vil <select> alltid ha en value */}\n {visibleItems.map((item) => (\n <option\n key={`${listId}-opt-${item.value}`}\n hidden={!item.visible}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <InputGroup\n ref={componentRootElementRef}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--open\":\n dropdownIsShown &&\n visibleItems.some((item) => item.visible),\n \"jkl-select--no-value\": !hasSelectedValue,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n tooltipProps={\n tooltipProps && {\n ...tooltipProps,\n triggerProps: {\n ...tooltipProps.triggerProps,\n onFocus: (e) => {\n tooltipProps.triggerProps?.onFocus?.(e);\n close();\n },\n },\n }\n }\n {...rest}\n id={isSearchable ? searchInputId : buttonId}\n style={\n {\n [\"--jkl-select-max-shown-options\"]: maxShownOptions,\n ...style,\n } as CSSProperties\n }\n density={density}\n label={label}\n labelProps={{\n id: labelId,\n srOnly: inline,\n ...labelProps,\n htmlFor: isSearchable ? searchInputId : buttonId,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n {isSearchable && (\n <input\n {...inputProps}\n id={searchInputId}\n hidden={!showSearchInputField}\n ref={searchFieldRef}\n placeholder=\"Søk\"\n value={searchValue}\n onChange={(e) =>\n setSearchValue(e.target.value)\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={listId}\n aria-expanded={dropdownIsShown}\n role=\"combobox\"\n onKeyDown={handleSearchOnKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onClick={(e) => {\n e.stopPropagation();\n }}\n />\n )}\n <button\n {...inputProps}\n id={buttonId}\n ref={buttonRef}\n hidden={showSearchInputField}\n type=\"button\"\n name={`${name}-btn`}\n className={clsx(\"jkl-select__button\", {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n })}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel \|\| \"Velg\"\n },${label}`}\n aria-expanded={dropdownIsShown}\n aria-controls={listId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOnKeyDown}\n onClick={toggleListVisibility}\n onMouseDown={(e) => {\n // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n // https://twitter.com/MilesSorce/status/1278762360669265925\n e.preventDefault();\n buttonRef.current?.focus();\n }}\n >\n {selectedValueLabel}\n </button>\n <div\n id={listId}\n ref={dropdownRef}\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n hidden={\n !dropdownIsShown \|\|\n visibleItems.every((item) => !item.visible)\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n >\n {visibleItems.map((item, i) =>\n // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n item.visible ? (\n <button\n key={`${listId}-${item.value}`}\n hidden={!item.visible}\n type=\"button\"\n id={`${listId}__${toLower(\n item.value,\n )}`}\n className=\"jkl-select__option\"\n data-testid=\"jkl-select__option\"\n aria-selected={\n item.value === selectedValue\n }\n role=\"option\"\n value={item.value}\n data-testautoid={`jkl-select__option-${i}`}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={handleMouseOver}\n >\n {item.label}\n {item.description ? (\n <span className=\"jkl-select__option-description\">\n {item.description}\n </span>\n ) : null}\n </button>\n ) : null,\n )}\n </div>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!dropdownIsShown}\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n </>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltipProps","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","buttonRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","focus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","triggerProps","_b","call","srOnly","htmlFor","render","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n CSSProperties,\n FocusEvent,\n forwardRef,\n KeyboardEvent,\n MouseEvent,\n RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { DataTestAutoId, Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { getValuePair, ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport { focusSelected, toLower } from \"./select-utils.js\";\n\ninterface PartialChangeEvent\n extends Partial<Omit<ChangeEvent<HTMLSelectElement>, \"target\">> {\n /** Kreves av react-hook-form, det skjer ulike ting avhengig av om det er blur eller change /\n type: \"change\" \| \"blur\";\n target: {\n /* Kreves av react-hook-form for å vite hvilket skjemafelt som ble endret /\n name: string;\n value: string;\n };\n}\n\ntype ChangeEventHandler = (event: PartialChangeEvent) => void;\n\ninterface Option extends ValuePair {\n visible: boolean;\n}\n\nexport interface SelectProps\n extends Omit<InputGroupProps, \"children\">,\n DataTestAutoId {\n id?: string;\n name: string;\n label: string;\n labelProps?: Omit<\n LabelProps,\n \"children\" \| \"density\" \| \"htmlFor\" \| \"standAlone\"\n >;\n items: Array<string \| ValuePair>;\n /\n @default false\n /\n inline?: boolean;\n /\n @default \"Velg\"\n /\n defaultPrompt?: string;\n className?: string;\n value?: string;\n helpLabel?: string;\n errorLabel?: string;\n /\n @default false\n /\n searchable?:\n \| boolean\n \| ((searchValue: string, searchItem: string \| ValuePair) => boolean);\n density?: Density;\n width?: string;\n onChange?: ChangeEventHandler;\n onBlur?: ChangeEventHandler;\n onFocus?: ChangeEventHandler;\n /\n Merk som ugyldig uten å sende inn en errorLabel.\n * NB! Brukes kun i tilfeller der valideringsfeil dukker opp andre steder, for eksempel i en FieldGroup.\n /\n invalid?: boolean;\n /\n Hvor mange valg skal vises i listen før den begynner å scrolle.\n * @default 5\n /\n maxShownOptions?: number;\n}\n\nconst noop = () => {\n return;\n};\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n (props, forwardedSelectRef) => {\n const {\n id,\n name,\n items,\n value,\n label,\n labelProps,\n onChange,\n onBlur,\n onFocus,\n className,\n helpLabel,\n errorLabel,\n invalid,\n searchable = false,\n inline = false,\n defaultPrompt = \"Velg\",\n density,\n width,\n maxShownOptions = 5,\n style,\n tooltipProps,\n ...rest\n } = props;\n\n const listId = useId(id \|\| \"jkl-select\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const searchInputId = `${listId}_search-input`;\n\n const [dropdownIsShown, setShown] = useState(false);\n const toggleListVisibility = useCallback(() => {\n setShown((previousValue) => !previousValue);\n }, []);\n\n /// Søk\n\n const isSearchable = Boolean(searchable);\n const showSearchInputField = isSearchable && dropdownIsShown;\n const [searchValue, setSearchValue] = useState(\"\");\n const searchFn = useCallback(\n (item: ValuePair) => {\n if (\n item.label.toLowerCase().includes(searchValue.toLowerCase())\n ) {\n return true;\n }\n\n if (typeof searchable === \"function\") {\n return searchable(searchValue, item);\n }\n\n return false;\n },\n [searchable, searchValue],\n );\n const visibleItems: Option[] = useMemo(\n () =>\n items.map(getValuePair).map((item) => {\n const visible =\n !isSearchable \|\| searchValue === \"\" \|\| searchFn(item);\n return { ...item, visible };\n }),\n [items, isSearchable, searchValue, searchFn],\n );\n const valueIsInItems: boolean = useMemo(() => {\n if (typeof value === \"undefined\") {\n return false;\n }\n return items.some((item) =>\n typeof item === \"string\"\n ? item === value\n : item.value === value,\n );\n }, [value, items]);\n\n /// Valg av <option>\n\n const [selectedValue, setSelectedValue] = useState<string>(\n valueIsInItems && value !== undefined ? value : \"\",\n );\n const hasSelectedValue = selectedValue !== \"\";\n const selectedValueLabel = useMemo(\n () =>\n visibleItems.find((item) => item.value === selectedValue)\n ?.label \|\| defaultPrompt,\n [visibleItems, selectedValue, defaultPrompt],\n );\n\n const selectRef = useRef<HTMLSelectElement \| null>(null);\n // Hjelpefunksjon som gjør det enklere å forwarde refen og å bruke den selv internt\n const unifiedSelectRef = useCallback(\n (instance: HTMLSelectElement \| null) => {\n selectRef.current = instance;\n if (forwardedSelectRef) {\n if (typeof forwardedSelectRef === \"function\") {\n forwardedSelectRef(instance);\n } else {\n forwardedSelectRef.current = instance;\n }\n }\n if (instance) {\n setSelectedValue(instance.value);\n }\n },\n [selectRef, forwardedSelectRef],\n );\n\n const previousValue = usePreviousValue(value);\n useEffect(() => {\n if (value === previousValue) {\n return;\n }\n if (typeof value === \"undefined\" \|\| !valueIsInItems) {\n setSelectedValue(\"\");\n } else {\n setSelectedValue(value);\n }\n }, [setSelectedValue, value, previousValue, valueIsInItems]);\n\n const selectOption = useCallback(\n (item: Option) => {\n const nextValue = item.value;\n setSearchValue(\"\");\n setSelectedValue(nextValue);\n toggleListVisibility();\n },\n [setSearchValue, setSelectedValue, toggleListVisibility],\n );\n\n // La komponenten rendre <select> med den valgte verdien før onChange trigges, slik at\n // react-hook-form@>7.41.1 behandler feltet som at det har en verdi.\n const previousSelectedValue = usePreviousValue(selectedValue);\n useEffect(() => {\n // previousSelectedValue er undefined på første render, men da vil vi ikke ha en onChange uansett\n if (\n typeof previousSelectedValue === \"undefined\" \|\|\n previousSelectedValue === selectedValue \|\|\n selectedValue === value\n ) {\n return;\n }\n if (onChange) {\n onChange({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n if (selectRef.current) {\n selectRef.current.dispatchEvent(\n new Event(\"change\", { bubbles: true }),\n );\n }\n }, [onChange, name, value, selectedValue, previousSelectedValue]);\n\n /// Fokushåndtering\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n const searchFieldRef = useRef<HTMLInputElement>(null);\n const buttonRef = useRef<HTMLButtonElement>(null);\n\n const handleFocusPlacement = useCallback(\n (isOpen: boolean, ref: RefObject<HTMLElement>) => {\n if (isOpen && !isSearchable) {\n const listElement = ref.current;\n if (listElement) {\n focusSelected(listElement, selectedValue);\n }\n } else if (isOpen) {\n if (searchFieldRef.current) {\n searchFieldRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && buttonRef.current) {\n buttonRef.current.focus();\n }\n }\n },\n [isSearchable, selectedValue],\n );\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(\n dropdownIsShown,\n {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n },\n );\n\n useListNavigation({ ref: dropdownRef });\n\n const close = useCallback(() => {\n if (isSearchable) {\n setSearchValue(\"\");\n }\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: { name, value: selectedValue },\n });\n selectRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShown(false);\n }, [\n onBlur,\n setSearchValue,\n setShown,\n isSearchable,\n name,\n selectedValue,\n ]);\n\n const handleBlur = useCallback(\n (e: FocusEvent<HTMLButtonElement \| HTMLInputElement>) => {\n const componentRootElement = componentRootElementRef.current;\n // There are known issues in Firefox when using \"relatedTarget\" in onBlur events:\n // https://github.com/facebook/react/issues/2011\n // This might be fixed in react 17. Se issue above.\n const nextFocusIsInsideComponent =\n componentRootElement &&\n componentRootElement.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n close();\n }\n },\n [close],\n );\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: { name, value: selectedValue },\n });\n }\n focusInsideRef.current = true;\n }\n }, [onFocus, selectedValue, name]);\n\n const handleMouseOver = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n },\n [],\n );\n\n // Handle focus and blur of hidden select element\n useEffect(() => {\n const select = selectRef.current;\n const searchField = searchFieldRef.current;\n const button = buttonRef.current;\n const componentRootElement = componentRootElementRef.current;\n\n select?.addEventListener(\"focus\", () => {\n showSearchInputField ? searchField?.focus() : button?.focus();\n });\n select?.addEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(ev.relatedTarget as Node) &&\n ev.preventDefault();\n });\n\n return () => {\n select?.removeEventListener(\"focus\", () => {\n showSearchInputField\n ? searchField?.focus()\n : button?.focus();\n });\n select?.removeEventListener(\"blur\", function (this, ev) {\n componentRootElement &&\n componentRootElement.contains(\n ev.relatedTarget as Node,\n ) &&\n ev.preventDefault();\n });\n };\n }, [showSearchInputField]);\n\n /// Tastaturnavigasjon\n\n // Add support for opening dropdown with arrowkey down as expected from native select\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (\n (e.key === \"ArrowDown\" \|\| e.key === \" \") &&\n !dropdownIsShown\n ) {\n e.preventDefault();\n e.stopPropagation();\n setShown(true);\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n }\n },\n [setShown, dropdownIsShown],\n );\n\n // onKeyDown to stop ArrowDown from scrolling the page\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n\n const listElement = dropdownRef.current;\n if (listElement) {\n if (isSearchable) {\n // Flytt fokus til det første elementet i listen, ikke det forrige valgte.\n // Ved endring i filter er det ikke gitt at vi ønsker å ta utgangspunkt i\n // den valgte verdien.\n focusSelected(listElement, undefined);\n } else {\n focusSelected(listElement, selectedValue);\n }\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShown(false);\n } else if (e.key === \"Tab\" && !e.shiftKey) {\n const listElement = dropdownRef.current;\n if (listElement) {\n e.preventDefault();\n e.stopPropagation();\n focusSelected(listElement, selectedValue);\n }\n } else if (e.key === \"Enter\" && dropdownIsShown) {\n // Should not propagate Enter keyevent because form might submit\n e.preventDefault();\n e.stopPropagation();\n }\n },\n [\n setShown,\n dropdownRef,\n selectedValue,\n isSearchable,\n dropdownIsShown,\n ],\n );\n\n // onKeyDown so this Tab listener isn't triggered by tabbing from search field to option\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey && searchFieldRef.current) {\n searchFieldRef.current.focus();\n } else if (buttonRef.current) {\n // Mimic behaviour of Firefox and native select, where Tab selects the current item and closes the menu\n setSelectedValue(e.currentTarget.value);\n setShown(false);\n buttonRef.current.focus();\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchFieldRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchFieldRef.current\n ) {\n searchFieldRef.current.focus();\n }\n }\n }\n },\n [setShown, dropdownRef],\n );\n\n // Add support for closing the dropdown with Escape like native select. Unfortunately, Escape does not trigger the button onKeyDown.\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && dropdownIsShown) {\n setShown(false);\n }\n };\n if (typeof window !== \"undefined\" && dropdownIsShown) {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\") {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [setShown, dropdownIsShown]);\n\n return (\n <>\n <select\n name={name}\n tabIndex={-1}\n data-testid=\"jkl-native-select\"\n className=\"jkl-sr-only\"\n aria-hidden\n ref={unifiedSelectRef}\n value={selectedValue}\n onChange={noop} // React complains unless we give an onChange handler. This is technically a read-only field, but readOnly isn't an option here.\n >\n <option value=\"\"></option>{\" \"}\n {/ Tom option må være et valg, ellers vil <select> alltid ha en value */}\n {visibleItems.map((item) => (\n <option\n key={`${listId}-opt-${item.value}`}\n hidden={!item.visible}\n value={item.value}\n >\n {item.label}\n </option>\n ))}\n </select>\n <InputGroup\n ref={componentRootElementRef}\n data-testid=\"jkl-select\"\n className={clsx(\"jkl-select\", className, {\n \"jkl-select--inline\": inline,\n \"jkl-select--open\":\n dropdownIsShown &&\n visibleItems.some((item) => item.visible),\n \"jkl-select--no-value\": !hasSelectedValue,\n \"jkl-select--invalid\": !!errorLabel \|\| invalid,\n })}\n tooltipProps={\n tooltipProps && {\n ...tooltipProps,\n triggerProps: {\n ...tooltipProps.triggerProps,\n onFocus: (e) => {\n tooltipProps.triggerProps?.onFocus?.(e);\n close();\n },\n },\n }\n }\n {...rest}\n id={isSearchable ? searchInputId : buttonId}\n style={\n {\n [\"--jkl-select-max-shown-options\"]: maxShownOptions,\n ...style,\n } as CSSProperties\n }\n density={density}\n label={label}\n labelProps={{\n id: labelId,\n srOnly: inline,\n ...labelProps,\n htmlFor: isSearchable ? searchInputId : buttonId,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n render={(inputProps) => (\n <div\n className=\"jkl-select__outer-wrapper\"\n style={{ width }}\n >\n {isSearchable && (\n <input\n {...inputProps}\n id={searchInputId}\n hidden={!showSearchInputField}\n ref={searchFieldRef}\n placeholder=\"Søk\"\n value={searchValue}\n onChange={(e) =>\n setSearchValue(e.target.value)\n }\n data-testid=\"jkl-select__search-input\"\n className=\"jkl-select__search-input\"\n aria-autocomplete=\"list\"\n aria-activedescendant={\n hasSelectedValue\n ? `${listId}__${toLower(\n selectedValue,\n )}`\n : undefined\n }\n aria-controls={listId}\n aria-expanded={dropdownIsShown}\n role=\"combobox\"\n onKeyDown={handleSearchOnKeyDown}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onClick={(e) => {\n e.stopPropagation();\n }}\n />\n )}\n <button\n {...inputProps}\n id={buttonId}\n ref={buttonRef}\n hidden={showSearchInputField}\n type=\"button\"\n name={`${name}-btn`}\n className={clsx(\"jkl-select__button\", {\n \"jkl-select__button--active-value\":\n !!selectedValue,\n })}\n data-testid=\"jkl-select__button\"\n aria-label={`${\n selectedValueLabel \|\| \"Velg\"\n },${label}`}\n aria-expanded={dropdownIsShown}\n aria-controls={listId}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOnKeyDown}\n onClick={toggleListVisibility}\n onMouseDown={(e) => {\n // Workaround for en Safari-bug hvor e.relatedTarget er null i onBlur\n // https://twitter.com/MilesSorce/status/1278762360669265925\n e.preventDefault();\n buttonRef.current?.focus();\n }}\n >\n {selectedValueLabel}\n </button>\n <div\n id={listId}\n ref={dropdownRef}\n role=\"listbox\"\n className=\"jkl-select__options-menu\"\n hidden={\n !dropdownIsShown \|\|\n visibleItems.every((item) => !item.visible)\n }\n aria-labelledby={labelId}\n tabIndex={-1}\n data-focus=\"controlled\" // lar oss styre markering av valg vha focus\n >\n {visibleItems.map((item, i) =>\n // Det er viktig at vi _fjerner_ elementer som ikke er synlige fra DOMen for at tastaturnavigasjon skal fungere.\n // For eksempel, hvis vi har elementene Apple, Samsung og LG i den rekkefølgen og søker etter \"l\"\n // vil Samsung ikke synes. Om vi bare setter hidden-attributtet på Samsung vil ArrowDown fra Apple ikke fungere.\n // Dette lar seg ikke gjenskape i en enhetstest med JSDOM + user-events, og Cypress lukker Select\n // ved første {downArrow} ¯\\_(ツ)_/¯. Så please test scenariet over manuelt om dette skaper trøbbel for deg.\n item.visible ? (\n <button\n key={`${listId}-${item.value}`}\n hidden={!item.visible}\n type=\"button\"\n id={`${listId}__${toLower(\n item.value,\n )}`}\n className=\"jkl-select__option\"\n data-testid=\"jkl-select__option\"\n aria-selected={\n item.value === selectedValue\n }\n role=\"option\"\n value={item.value}\n data-testautoid={`jkl-select__option-${i}`}\n onBlur={handleBlur}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n e.preventDefault();\n selectOption(item);\n }}\n onMouseOver={handleMouseOver}\n >\n {item.label}\n {item.description ? (\n <span className=\"jkl-select__option-description\">\n {item.description}\n </span>\n ) : null}\n </button>\n ) : null,\n )}\n </div>\n <ArrowVerticalAnimated\n variant=\"medium\"\n pointingDown={!dropdownIsShown}\n className=\"jkl-select__arrow\"\n />\n </div>\n )}\n />\n </>\n );\n },\n);\n\nSelect.displayName = \"Select\";\n"],"names":["noop","Select","forwardRef","props","forwardedSelectRef","id","name","items","value","label","labelProps","onChange","onBlur","onFocus","className","helpLabel","errorLabel","invalid","searchable","inline","defaultPrompt","density","width","maxShownOptions","style","tooltipProps","rest","listId","useId","generateSuffix","labelId","buttonId","searchInputId","dropdownIsShown","setShown","useState","toggleListVisibility","useCallback","previousValue","isSearchable","showSearchInputField","searchValue","setSearchValue","searchFn","item","toLowerCase","includes","visibleItems","useMemo","map","getValuePair","visible","valueIsInItems","some","selectedValue","setSelectedValue","hasSelectedValue","selectedValueLabel","_a","find","selectRef","useRef","unifiedSelectRef","instance","current","usePreviousValue","useEffect","selectOption","nextValue","previousSelectedValue","type","target","dispatchEvent","Event","bubbles","componentRootElementRef","focusInsideRef","searchFieldRef","buttonRef","handleFocusPlacement","isOpen","ref","listElement","focusSelected","focus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","close","handleBlur","e","componentRootElement","contains","relatedTarget","handleFocus","handleMouseOver","preventScroll","select","searchField","button","addEventListener","ev","preventDefault","removeEventListener","handleOnKeyDown","key","stopPropagation","handleSearchOnKeyDown","shiftKey","handleOptionOnKeyDown","currentTarget","firstVisible","querySelector","handleEscape","window","jsxs","Fragment","children","tabIndex","jsx","hidden","InputGroup","clsx","triggerProps","_b","call","srOnly","htmlFor","render","inputProps","placeholder","toLower","role","onKeyDown","onClick","onMouseDown","every","i","onMouseOver","description","ArrowVerticalAnimated","variant","pointingDown","displayName"],"mappings":"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"}

package/build/es/components/system-message/common/DismissButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as n}from"react/jsx-runtime";import{forwardRef as i}from"react";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import{CloseIcon as c}from"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/WarningIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/PenIcon.js";const s=i((({label:i="Lukk",...s},r)=>o("button",{ref:r,type:"button",title:i,...s,children:[n(c,{variant:"small",bold:!0}),n("span",{className:"jkl-sr-only",children:i})]})));s.displayName="DismissButton";export{s as DismissButton};
+import{jsxs as s,jsx as o}from"react/jsx-runtime";import{forwardRef as t}from"react";import{CloseIcon as a}from"../../icon/icons/CloseIcon.js";const r=t((({label:t="Lukk",...r},e)=>s("button",{ref:e,type:"button",title:t,...r,children:[o(a,{variant:"small",bold:!0}),o("span",{className:"jkl-sr-only",children:t})]})));r.displayName="DismissButton";export{r as DismissButton};
 //# sourceMappingURL=DismissButton.js.map

package/build/es/components/system-message/common/DismissButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DismissButton.js","sources":["../../../../../src/components/system-message/common/DismissButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\nimport { CloseIcon } from \"../../icon/~~index~~.js\";\n\nexport interface DismissButtonProps\n extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n label?: string;\n}\n\nexport const DismissButton = forwardRef<HTMLButtonElement, DismissButtonProps>(\n ({ label = \"Lukk\", ...rest }, ref) => {\n return (\n <button ref={ref} type=\"button\" title={label} {...rest}>\n <CloseIcon variant=\"small\" bold />\n <span className=\"jkl-sr-only\">{label}</span>\n </button>\n );\n },\n);\n\nDismissButton.displayName = \"DismissButton\";\n"],"names":["DismissButton","forwardRef","label","rest","ref","jsxs","type","title","children","jsx","CloseIcon","variant","bold","className","displayName"],"mappings":"~~qhDAQO~~,MAAMA,EAAgBC,GACzB,EAAGC,MAAAA,EAAQ,UAAWC,GAAQC,IAEtBC,EAAC,UAAOD,IAAAA,EAAUE,KAAK,SAASC,MAAOL,KAAWC,EAC9CK,SAAA,CAAAC,EAACC,EAAU,CAAAC,QAAQ,QAAQC,MAAI,IAC9BH,EAAA,OAAA,CAAKI,UAAU,cAAeL,SAAMN,SAMrDF,EAAcc,YAAc"}
1	+ {"version":3,"file":"DismissButton.js","sources":["../../../../../src/components/system-message/common/DismissButton.tsx"],"sourcesContent":["import React, { ButtonHTMLAttributes, forwardRef } from \"react\";\nimport { CloseIcon } from \"../../icon/icons/CloseIcon.js\";\n\nexport interface DismissButtonProps\n extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, \"disabled\"> {\n label?: string;\n}\n\nexport const DismissButton = forwardRef<HTMLButtonElement, DismissButtonProps>(\n ({ label = \"Lukk\", ...rest }, ref) => {\n return (\n <button ref={ref} type=\"button\" title={label} {...rest}>\n <CloseIcon variant=\"small\" bold />\n <span className=\"jkl-sr-only\">{label}</span>\n </button>\n );\n },\n);\n\nDismissButton.displayName = \"DismissButton\";\n"],"names":["DismissButton","forwardRef","label","rest","ref","jsxs","type","title","children","jsx","CloseIcon","variant","bold","className","displayName"],"mappings":"+IAQO,MAAMA,EAAgBC,GACzB,EAAGC,MAAAA,EAAQ,UAAWC,GAAQC,IAEtBC,EAAC,UAAOD,IAAAA,EAAUE,KAAK,SAASC,MAAOL,KAAWC,EAC9CK,SAAA,CAAAC,EAACC,EAAU,CAAAC,QAAQ,QAAQC,MAAI,IAC9BH,EAAA,OAAA,CAAKI,UAAU,cAAeL,SAAMN,SAMrDF,EAAcc,YAAc"}

package/build/es/components/system-message/common/MessageIcon.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import{ErrorIcon as n}from"../../icon/icons/ErrorIcon.js";import"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import{InfoIcon as c}from"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import{SuccessIcon as i}from"../../icon/icons/SuccessIcon.js";import{WarningIcon as s}from"../../icon/icons/WarningIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/PenIcon.js";const r=({messageType:r})=>{switch(r){case"error":return o(n,{className:"jkl-system-message__icon"});case"info":return o(c,{className:"jkl-system-message__icon"});case"success":return o(i,{className:"jkl-system-message__icon"});case"warning":return o(s,{className:"jkl-system-message__icon"});default:return null}};export{r as MessageIcon};
+import{jsx as s}from"react/jsx-runtime";import{ErrorIcon as o}from"../../icon/icons/ErrorIcon.js";import{InfoIcon as c}from"../../icon/icons/InfoIcon.js";import{SuccessIcon as e}from"../../icon/icons/SuccessIcon.js";import{WarningIcon as n}from"../../icon/icons/WarningIcon.js";const r=({messageType:r})=>{switch(r){case"error":return s(o,{className:"jkl-system-message__icon"});case"info":return s(c,{className:"jkl-system-message__icon"});case"success":return s(e,{className:"jkl-system-message__icon"});case"warning":return s(n,{className:"jkl-system-message__icon"});default:return null}};export{r as MessageIcon};
 //# sourceMappingURL=MessageIcon.js.map

package/build/es/components/system-message/common/MessageIcon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MessageIcon.js","sources":["../../../../../src/components/system-message/common/MessageIcon.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport {\n ErrorIcon~~,\n~~ InfoIcon~~,\n WarningIcon,\n~~ SuccessIcon~~,\n~~} from \"../../icon/~~index~~.js\";\n\ntype MessageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\ntype Props = {\n messageType: MessageTypes;\n};\n\nexport const MessageIcon: FC<Props> = ({ messageType }) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-system-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-system-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-system-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-system-message__icon\" />;\n\n default:\n return null;\n }\n};\n"],"names":["MessageIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon"],"mappings":"~~uiDAcO~~,MAAMA,EAAyB,EAAGC,YAAAA,MACrC,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,6BAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,6BAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,6BAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,6BAElC,QACW,OAAA,KACf"}
1	+ {"version":3,"file":"MessageIcon.js","sources":["../../../../../src/components/system-message/common/MessageIcon.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { ErrorIcon } from \"../../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../../icon/icons/WarningIcon.js\";\n\ntype MessageTypes = \"info\" \| \"error\" \| \"success\" \| \"warning\";\n\ntype Props = {\n messageType: MessageTypes;\n};\n\nexport const MessageIcon: FC<Props> = ({ messageType }) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-system-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-system-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-system-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-system-message__icon\" />;\n\n default:\n return null;\n }\n};\n"],"names":["MessageIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon"],"mappings":"sRAYO,MAAMA,EAAyB,EAAGC,YAAAA,MACrC,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,6BAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,6BAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,6BAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,6BAElC,QACW,OAAA,KACf"}

package/build/es/components/table/ExpandableTableRow.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import r,{forwardRef as n,useState as s,useEffect as d}from"react";import{useAnimatedHeight as t}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import"../../hooks/useScreen/useScreen.js";import{useId as i}from"../../hooks/useId/useId.js";import{ExpandableTableRowController as p}from"./ExpandableTableRowController.js";import{TableRow as c}from"./TableRow.js";const b=n(((n,b)=>{const{className:m,clickable:x,children:h,expandedChildren:j,onToggle:w,colSpan:k=100,isOpen:f,...u}=n,[g,E]=s(f??!1);d((()=>{typeof f>"u"||E(f)}),[f]);const[R]=t(g,{timing:"expressive"}),T=()=>{const e=!g;w&&w(e),E(e)},C=o("jkl-table-row--expandable",m,{"jkl-table-row--expanded":g,"jkl-expandable-table-row--clickable-external":x}),S=o("jkl-expandable-table-row__expanded-row",{"jkl-expandable-table-row__expanded-row--expanded":g}),y=i("jkl-expandable-table-row"),N=i("jkl-expandable-table-row-controller");return e(a,{children:[l(c,{className:C,clickable:x??{onClick:()=>T()},...u,ref:b,children:r.Children.map(h,(e=>r.isValidElement(e)&&e.type==p?r.cloneElement(e,{isOpen:g,onClick:()=>T(),"aria-controls":y,id:N}):e))}),l("tr",{"aria-hidden":!g,children:l("td",{colSpan:k,children:l("div",{ref:R,className:S,id:y,"aria-labelledby":N,hidden:!g,role:"group",children:j})})})]})}));b.displayName="ExpandableTableRow";export{b as ExpandableTableRow};
+import{jsxs as e,Fragment as a,jsx as l}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";import r,{forwardRef as n,useState as s,useEffect as d}from"react";import{useAnimatedHeight as t}from"../../hooks/useAnimatedHeight/useAnimatedHeight.js";import{useId as i}from"../../hooks/useId/useId.js";import{ExpandableTableRowController as p}from"./ExpandableTableRowController.js";import{TableRow as c}from"./TableRow.js";const b=n(((n,b)=>{const{className:m,clickable:x,children:w,expandedChildren:h,onToggle:j,colSpan:f=100,isOpen:k,...u}=n,[g,E]=s(k??!1);d((()=>{typeof k>"u"||E(k)}),[k]);const[R]=t(g,{timing:"expressive"}),T=()=>{const e=!g;j&&j(e),E(e)},C=o("jkl-table-row--expandable",m,{"jkl-table-row--expanded":g,"jkl-expandable-table-row--clickable-external":x}),y=o("jkl-expandable-table-row__expanded-row",{"jkl-expandable-table-row__expanded-row--expanded":g}),N=i("jkl-expandable-table-row"),_=i("jkl-expandable-table-row-controller");return e(a,{children:[l(c,{className:C,clickable:x??{onClick:()=>T()},...u,ref:b,children:r.Children.map(w,(e=>r.isValidElement(e)&&e.type==p?r.cloneElement(e,{isOpen:g,onClick:()=>T(),"aria-controls":N,id:_}):e))}),l("tr",{"aria-hidden":!g,children:l("td",{colSpan:f,children:l("div",{ref:R,className:y,id:N,"aria-labelledby":_,hidden:!g,role:"group",children:h})})})]})}));b.displayName="ExpandableTableRow";export{b as ExpandableTableRow};
 //# sourceMappingURL=ExpandableTableRow.js.map