npm - @fremtind/jokul - Versions diffs - 0.24.0 → 0.25.0 - Mend

@fremtind/jokul 0.24.0 → 0.25.0

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

Files changed (2688) hide show

package/build/es/components/modal/Modal.d.ts ADDED Viewed

@@ -0,0 +1,72 @@
+import { default as React } from 'react';
+import { WithOptionalChildren } from '../../core/types.js';
+import { IconButtonProps } from '../icon-button/IconButton.js';
+export interface ModalProps extends WithOptionalChildren {
+    id?: string;
+    className?: string;
+    component?: React.ElementType;
+    style?: React.CSSProperties;
+    /**
+     * Overstyrer padding på modalen via en CSS-variabel.
+     */
+    padding?: 16 | 24 | 40;
+}
+type BaseModalProps = Omit<ModalProps, "padding" | "component">;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<{
+    id: string;
+    ref: (node: React.ReactNode | HTMLElement) => void;
+    role: string;
+    'aria-modal': boolean;
+    'aria-hidden': boolean;
+    'aria-labelledby': string;
+} & BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalOverlay: React.ForwardRefExoticComponent<{
+    onClick?: (() => void) | undefined;
+} & BaseModalProps & {
+    /**
+     * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
+     */
+    transparent?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const Modal: React.ForwardRefExoticComponent<{
+    role: "document";
+} & ModalProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalHeader: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalTitle: React.ForwardRefExoticComponent<{
+    role: "heading";
+    'aria-level': number;
+    id: string;
+} & BaseModalProps & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalCloseButton: React.ForwardRefExoticComponent<Omit<{
+    type: "button";
+    onClick: () => void;
+} & {
+    "aria-label": string;
+}, "onClick"> & BaseModalProps & IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalBody: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Ment å brukes med `useModal`.
+ */
+export declare const ModalActions: React.ForwardRefExoticComponent<BaseModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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 ~~type~~ { WithOptionalChildren } from \"~~../..\~~";\nimport { CloseIcon } from \"../icon\";\nimport { IconButton, ~~type~~ IconButtonProps } from \"../icon-button\";\nimport { ModalConfig } from \"./useModal\";\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<HTMLDivElement, ModalConfig[\"container\"] & BaseModalProps>(\n ({ className, ...rest }, ref) => {\n return <div className={clsx(\"jkl-modal-container\", className)} {...rest} ref={ref} />;\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 ? `var(--jkl-spacing-${padding})` : 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>(({ className, ...rest }, ref) => (\n <div className={clsx(\"jkl-modal-header\", className)} {...rest} ref={ref} />\n));\nModalHeader.displayName = \"ModalHeader\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalTitle = forwardRef<HTMLParagraphElement, ModalConfig[\"title\"] & BaseModalProps>(\n ({ className, ...rest }, ref) => <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\"> & BaseModalProps & IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton className={clsx(\"jkl-modal-close\", className)} data-testautoid=\"jkl-modal-close\" {...rest} ref={ref}>\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(({ className, ...rest }, ref) => (\n <div className={clsx(\"jkl-modal-body\", className)} {...rest} ref={ref} />\n));\nModalBody.displayName = \"ModalBody\";\n\n/\n Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(({ className, ...rest }, ref) => (\n <div className={clsx(\"jkl-modal-actions\", className)} {...rest} ref={ref} />\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":"0gDAuBO,MAAMA,EAAiBC,GAC1B,EAAGC,UAAAA,KAAcC,GAAQC,IACdC,EAAC,OAAIH,UAAWI,EAAK,sBAAuBJ,MAAgBC,EAAMC,IAAAA,MAGjFJ,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,EAAU,qBAAqBA,UAAa,KAChEC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,GAA2C,EAAGC,UAAAA,KAAcC,GAAQC,MAC1F,MAAI,CAAAF,UAAWI,EAAK,mBAAoBJ,MAAgBC,EAAMC,IAAAA,MAEnEU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,GACtB,EAAGC,UAAAA,KAAcC,GAAQC,IAAQC,EAAC,IAAE,CAAAH,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEjGW,EAAWR,YAAc,aAKZ,MAAAS,EAAmBf,GAG9B,EAAGC,UAAAA,KAAcC,GAAQC,IACtBC,EAAAY,EAAA,CAAWf,UAAWI,EAAK,kBAAmBJ,GAAY,kBAAgB,qBAAsBC,EAAMC,IAAAA,EACnGc,SAAAb,EAACc,EAAU,CAAAC,QAAQ,eAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,GAA2C,EAAGC,UAAAA,KAAcC,GAAQC,MACxF,MAAI,CAAAF,UAAWI,EAAK,iBAAkBJ,MAAgBC,EAAMC,IAAAA,MAEjEiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,GAA2C,EAAGC,UAAAA,KAAcC,GAAQC,MAC3F,MAAI,CAAAF,UAAWI,EAAK,oBAAqBJ,MAAgBC,EAAMC,IAAAA,MAEpEkB,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/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<HTMLDivElement, ModalConfig[\"container\"] & BaseModalProps>(\n ({ className, ...rest }, ref) => {\n return <div className={clsx(\"jkl-modal-container\", className)} {...rest} ref={ref} />;\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 ? `var(--jkl-spacing-${padding})` : 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>(({ className, ...rest }, ref) => (\n <div className={clsx(\"jkl-modal-header\", className)} {...rest} ref={ref} />\n));\nModalHeader.displayName = \"ModalHeader\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalTitle = forwardRef<HTMLParagraphElement, ModalConfig[\"title\"] & BaseModalProps>(\n ({ className, ...rest }, ref) => <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\"> & BaseModalProps & IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton className={clsx(\"jkl-modal-close\", className)} data-testautoid=\"jkl-modal-close\" {...rest} ref={ref}>\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/\n Ment å brukes med `useModal`.\n /\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(({ className, ...rest }, ref) => (\n <div className={clsx(\"jkl-modal-body\", className)} {...rest} ref={ref} />\n));\nModalBody.displayName = \"ModalBody\";\n\n/\n Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(({ className, ...rest }, ref) => (\n <div className={clsx(\"jkl-modal-actions\", className)} {...rest} ref={ref} />\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":"0gDAuBO,MAAMA,EAAiBC,GAC1B,EAAGC,UAAAA,KAAcC,GAAQC,IACdC,EAAC,OAAIH,UAAWI,EAAK,sBAAuBJ,MAAgBC,EAAMC,IAAAA,MAGjFJ,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,EAAU,qBAAqBA,UAAa,KAChEC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,GAA2C,EAAGC,UAAAA,KAAcC,GAAQC,MAC1F,MAAI,CAAAF,UAAWI,EAAK,mBAAoBJ,MAAgBC,EAAMC,IAAAA,MAEnEU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,GACtB,EAAGC,UAAAA,KAAcC,GAAQC,IAAQC,EAAC,IAAE,CAAAH,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,MAEjGW,EAAWR,YAAc,aAKZ,MAAAS,EAAmBf,GAG9B,EAAGC,UAAAA,KAAcC,GAAQC,IACtBC,EAAAY,EAAA,CAAWf,UAAWI,EAAK,kBAAmBJ,GAAY,kBAAgB,qBAAsBC,EAAMC,IAAAA,EACnGc,SAAAb,EAACc,EAAU,CAAAC,QAAQ,eAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,GAA2C,EAAGC,UAAAA,KAAcC,GAAQC,MACxF,MAAI,CAAAF,UAAWI,EAAK,iBAAkBJ,MAAgBC,EAAMC,IAAAA,MAEjEiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,GAA2C,EAAGC,UAAAA,KAAcC,GAAQC,MAC3F,MAAI,CAAAF,UAAWI,EAAK,oBAAqBJ,MAAgBC,EAAMC,IAAAA,MAEpEkB,EAAaf,YAAc"}

package/build/es/components/modal/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export type { ModalProps } from './Modal.js';
+export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, } from './Modal.js';
+export type { UseModalOptions, ModalInstance, ModalConfig } from './useModal.js';
+export { useModal } from './useModal.js';

package/build/es/components/modal/useModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{useA11yDialog as o}from"react-a11y-dialog";import"react";import"../../hooks/useScreen/useScreen.js";import{useId as e}from"../../hooks/useId/useId.js";function a(a){const{id:s,role:l="dialog",closeButtonLabel:r="Lukk",...t}=a,i=e(s||"jkl-modal",{generateSuffix:!s}),[u,d]=o({id:i,role:l,...t}),{dialog:n,...c}=d;return[u,{modal:d.dialog,...c,closeButton:{...d.closeButton,"aria-label":r}}]}export{a as useModal};
+import{useA11yDialog as o}from"react-a11y-dialog";import{useId as a}from"../../hooks/useId/useId.js";function e(e){const{id:l,role:s="dialog",closeButtonLabel:t="Lukk",...d}=e,i=a(l||"jkl-modal",{generateSuffix:!l}),[r,u]=o({id:i,role:s,...d}),{dialog:n,...c}=u;return[r,{modal:u.dialog,...c,closeButton:{...u.closeButton,"aria-label":t}}]}export{e as useModal};
 //# sourceMappingURL=useModal.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useModal.js","sources":["../../../../src/components/modal/useModal.ts"],"sourcesContent":["import { A11yDialogConfig, A11yDialogProps, useA11yDialog } from \"react-a11y-dialog\";\nimport { useId } from \"../../hooks\";\n\nexport interface UseModalOptions extends Omit<A11yDialogProps, \"id\" \| \"closeButtonPosition\"> {\n id?: string;\n /*\n @default \"Lukk\"\n /\n closeButtonLabel?: string;\n /\n Sett til `alertdialog` om du ønsker å slå av muligheten til å lukke med ESC og klikk utenfor.\n \n @default \"dialog\"\n /\n role?: \"dialog\" \| \"alertdialog\";\n /\n Påkrevd for universell utforming. Tittelen kan gjenbrukes som `children` i `<ModalTitle>` med en konstant.\n /\n title: string;\n}\n\nexport type ModalInstance = ReturnType<typeof useModal>[0];\n\nexport interface ModalConfig extends Omit<A11yDialogConfig, \"dialog\"> {\n modal: A11yDialogConfig[\"dialog\"];\n closeButton: A11yDialogConfig[\"closeButton\"] & {\n \"aria-label\": string;\n };\n}\n\n/\n @example\n * ```jsx\n * const heading = \"Bekreft sletting\";\n * const [instance, { title, overlay, container, modal, closeButton }] = useModal({ title: heading });\n \n useEffect(() => {\n * if (!instance) {\n * return;\n * }\n * instance.show();\n * }, [instance]);\n \n return ReactDOM.createPortal(\n * <ModalContainer {...container}>\n * <ModalOverlay {...overlay} />\n * <Modal {...modal}>\n * <ModalHeader>\n * <ModalTitle {...title}>{heading}</ModalTitle>\n * <ModalCloseButton {...closeButton} />\n * </ModalHeader>\n * <ModalBody>\n * Er du sikker på at du vil slette Foo Bar Baz?\n * </ModalBody>\n * <ModalActions>\n * <PrimaryButton\n * onClick={() => {\n * // Do the thing\n * instance?.hide()\n * }}\n * >\n * Bekreft\n * </PrimaryButton>\n * <TertiaryButton onClick={() => instance?.hide()}>\n * Avbryt\n * </TertiaryButton>\n * </ModalActions>\n * </Modal>\n * </ModalContainer>,\n * document.body,\n * );\n * ```\n */\nexport function useModal(props: UseModalOptions) {\n const { id: idProp, role = \"dialog\", closeButtonLabel = \"Lukk\", ...rest } = props;\n\n const id = useId(idProp \|\| \"jkl-modal\", { generateSuffix: !idProp });\n\n const [instance, config] = useA11yDialog({\n id,\n role,\n ...rest,\n });\n\n const { dialog, ...restConfig } = config;\n\n const modalConfig: ModalConfig = {\n modal: config.dialog,\n ...restConfig,\n closeButton: {\n ...config.closeButton,\n \"aria-label\": closeButtonLabel,\n },\n };\n\n return [instance, modalConfig] as const;\n}\n"],"names":["useModal","props","id","idProp","role","closeButtonLabel","rest","useId","generateSuffix","instance","config","useA11yDialog","dialog","restConfig","modal","closeButton"],"mappings":"~~8JAyEO~~,SAASA,EAASC,GACf,MAAEC,GAAIC,EAAQC,KAAAA,EAAO,SAAUC,iBAAAA,EAAmB,UAAWC,GAASL,EAEtEC,EAAKK,EAAMJ,GAAU,YAAa,CAAEK,gBAAiBL,KAEpDM,EAAUC,GAAUC,EAAc,CACrCT,GAAAA,EACAE,KAAAA,KACGE,KAGCM,OAAAA,KAAWC,GAAeH,EAW3B,MAAA,CAACD,EATyB,CAC7BK,MAAOJ,EAAOE,UACXC,EACHE,YAAa,IACNL,EAAOK,YACV,aAAcV,IAK1B"}
1	+ {"version":3,"file":"useModal.js","sources":["../../../../src/components/modal/useModal.ts"],"sourcesContent":["import { A11yDialogConfig, A11yDialogProps, useA11yDialog } from \"react-a11y-dialog\";\nimport { useId } from \"../../hooks/useId/useId.js\";\n\nexport interface UseModalOptions extends Omit<A11yDialogProps, \"id\" \| \"closeButtonPosition\"> {\n id?: string;\n /*\n @default \"Lukk\"\n /\n closeButtonLabel?: string;\n /\n Sett til `alertdialog` om du ønsker å slå av muligheten til å lukke med ESC og klikk utenfor.\n \n @default \"dialog\"\n /\n role?: \"dialog\" \| \"alertdialog\";\n /\n Påkrevd for universell utforming. Tittelen kan gjenbrukes som `children` i `<ModalTitle>` med en konstant.\n /\n title: string;\n}\n\nexport type ModalInstance = ReturnType<typeof useModal>[0];\n\nexport interface ModalConfig extends Omit<A11yDialogConfig, \"dialog\"> {\n modal: A11yDialogConfig[\"dialog\"];\n closeButton: A11yDialogConfig[\"closeButton\"] & {\n \"aria-label\": string;\n };\n}\n\n/\n @example\n * ```jsx\n * const heading = \"Bekreft sletting\";\n * const [instance, { title, overlay, container, modal, closeButton }] = useModal({ title: heading });\n \n useEffect(() => {\n * if (!instance) {\n * return;\n * }\n * instance.show();\n * }, [instance]);\n \n return ReactDOM.createPortal(\n * <ModalContainer {...container}>\n * <ModalOverlay {...overlay} />\n * <Modal {...modal}>\n * <ModalHeader>\n * <ModalTitle {...title}>{heading}</ModalTitle>\n * <ModalCloseButton {...closeButton} />\n * </ModalHeader>\n * <ModalBody>\n * Er du sikker på at du vil slette Foo Bar Baz?\n * </ModalBody>\n * <ModalActions>\n * <PrimaryButton\n * onClick={() => {\n * // Do the thing\n * instance?.hide()\n * }}\n * >\n * Bekreft\n * </PrimaryButton>\n * <TertiaryButton onClick={() => instance?.hide()}>\n * Avbryt\n * </TertiaryButton>\n * </ModalActions>\n * </Modal>\n * </ModalContainer>,\n * document.body,\n * );\n * ```\n */\nexport function useModal(props: UseModalOptions) {\n const { id: idProp, role = \"dialog\", closeButtonLabel = \"Lukk\", ...rest } = props;\n\n const id = useId(idProp \|\| \"jkl-modal\", { generateSuffix: !idProp });\n\n const [instance, config] = useA11yDialog({\n id,\n role,\n ...rest,\n });\n\n const { dialog, ...restConfig } = config;\n\n const modalConfig: ModalConfig = {\n modal: config.dialog,\n ...restConfig,\n closeButton: {\n ...config.closeButton,\n \"aria-label\": closeButtonLabel,\n },\n };\n\n return [instance, modalConfig] as const;\n}\n"],"names":["useModal","props","id","idProp","role","closeButtonLabel","rest","useId","generateSuffix","instance","config","useA11yDialog","dialog","restConfig","modal","closeButton"],"mappings":"qGAyEO,SAASA,EAASC,GACf,MAAEC,GAAIC,EAAQC,KAAAA,EAAO,SAAUC,iBAAAA,EAAmB,UAAWC,GAASL,EAEtEC,EAAKK,EAAMJ,GAAU,YAAa,CAAEK,gBAAiBL,KAEpDM,EAAUC,GAAUC,EAAc,CACrCT,GAAAA,EACAE,KAAAA,KACGE,KAGCM,OAAAA,KAAWC,GAAeH,EAW3B,MAAA,CAACD,EATyB,CAC7BK,MAAOJ,EAAOE,UACXC,EACHE,YAAa,IACNL,EAAOK,YACV,aAAcV,IAK1B"}

package/build/es/components/pagination/Pagination.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
+export type PaginationProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
+    currentPage: number;
+    numberOfPages: number;
+    onPageChange: (toPage: number, fromPage: number) => void;
+    /**
+     * Dersom du ønsker å ha custom labels kan du sende inn disse. "next" og "previous"
+     * brukes som hint til skjermlesere for ikon-knappene til Neste/Forrige side
+     * @default { previous: "Forrige side", next: "Neste side" }
+     */
+    labels?: {
+        previous: string;
+        next: string;
+    };
+}>;
+export type PaginationComponent = <ElementType extends React.ElementType = "nav">(props: PaginationProps<ElementType>) => React.ReactElement | null;
+export declare const Pagination: PaginationComponent;

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 { PolymorphicPropsWithRef, PolymorphicRef } from \"../../utilities/polymorphism\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\nimport { PageButton } from \"./PageButton\";\n\nexport type PaginationProps<ElementType extends React.ElementType> = 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 = <ElementType extends React.ElementType = \"nav\">(\n props: PaginationProps<ElementType>,\n) => React.ReactElement \| null;\n\nexport const Pagination = React.forwardRef(function Pagination<ElementType extends React.ElementType = \"nav\">(\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(\"[Pagination]: currentPage prop should be set to a value larger than 0\");\n }\n if (currentPage > numberOfPages) {\n console.error(\"[Pagination]: currentPage prop should not be set to a value larger than numberOfPages\");\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(Math.max(currentPage - 2, 2), numberOfPages - 5);\n const centerPageNumberStart = Math.min(startEllipsis + 1, numberOfPages - 4);\n const centerPageNumber = Math.min(centerPageNumberStart + 1, numberOfPages - 3);\n const centerPageNumberEnd = Math.min(centerPageNumberStart + 2, numberOfPages - 2);\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 aria-hidden className=\"jkl-pagination-button--elipsis\">\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={() => onPageChange(centerPageNumberStart, currentPage)}\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={() => onPageChange(centerPageNumberEnd, currentPage)}\n />\n {showEndEllipsis ? (\n <span aria-hidden className=\"jkl-pagination-button--elipsis\">\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":"sjDA4BO,MAAMA,EAAaC,EAAMC,YAAW,UAEnCC,aAAAA,EACAC,YAAAA,EACAC,cAAAA,EACAC,OAAAA,EAAS,CACLC,SAAU,eACVC,KAAM,cAEVC,GAAAA,KACGC,GAEPC,GAEAC,GAAU,KACFR,EAAc,GACdS,QAAQC,MAAM,yEAEdV,EAAcC,GACdQ,QAAQC,MAAM,wFAAuF,GAE1G,CAACV,EAAaC,IAEjB,MAAMU,EAAYN,GAAM,MAExB,GAAIJ,GAAiB,WAEZU,EAAU,CAAAJ,IAAAA,KAAcD,EAAMM,UAAU,iBACrCC,SAAA,CAAAC,EAACC,EAAA,CACGH,UAAU,wBACVI,MAAOd,EAAOC,SACdc,QAAS,IAAMlB,EAAaC,EAAc,EAAGA,GAC7C,gBAA+B,IAAhBA,EACfkB,SAA0B,IAAhBlB,GAAyB,EAAA,EAEnCa,WAACM,EAAgB,MAEpBL,EAAA,KAAA,CAAGF,UAAU,wBACTC,eAAMO,KAAK,CAAEC,OAAQpB,IAAiBqB,KAAI,CAACC,EAAGC,KAC3C,MAAMC,EAAOD,EAAQ,EAEjB,OAAAV,EAACY,EAAA,CAEGC,SAAU3B,IAAgByB,EAC1BG,OAAQH,EACRI,MAAO5B,EACPgB,QAAS,IAAMlB,EAAa0B,EAAMzB,IAJ7BwB,EAAA,MASrBV,EAACC,EAAA,CACGH,UAAU,wBACVI,MAAOd,EAAOE,KACda,QAAS,IAAMlB,EAAaC,EAAc,EAAGA,GAC7C,gBAAeA,IAAgBC,EAC/BiB,SAAUlB,IAAgBC,GAAqB,EAAA,EAE/CY,WAACiB,EAAiB,SAM5BC,MAAAA,EAAoB/B,EAAc,EAClCgC,EAAkBhC,EAAcC,EAAgB,EAEhDgC,EAAgBC,KAAKC,IAAID,KAAKE,IAAIpC,EAAc,EAAG,GAAIC,EAAgB,GACvEoC,EAAwBH,KAAKC,IAAIF,EAAgB,EAAGhC,EAAgB,GACpEqC,EAAmBJ,KAAKC,IAAIE,EAAwB,EAAGpC,EAAgB,GACvEsC,EAAsBL,KAAKC,IAAIE,EAAwB,EAAGpC,EAAgB,GAC1EuC,EAAcN,KAAKC,IAAIE,EAAwB,EAAGpC,EAAgB,YAGnEU,EAAU,CAAAJ,IAAAA,KAAcD,EAAMM,UAAU,iBACrCC,SAAA,CAAAC,EAACC,EAAA,CACGH,UAAU,wBACVI,MAAOd,EAAOC,SACdc,QAAS,IAAMlB,EAAaC,EAAc,EAAGA,GAC7C,gBAA+B,IAAhBA,EACfkB,SAA0B,IAAhBlB,GAAyB,EAAA,EAEnCa,WAACM,EAAgB,MAErBsB,EAAC,KAAG,CAAA7B,UAAU,wBACVC,SAAA,CAAAC,EAACY,EAAA,CACGC,SAA0B,IAAhB3B,EACV4B,OAAQ,EACRC,MAAO5B,EACPgB,QAAS,IAAMlB,EAAa,EAAGC,KAElC+B,IACI,OAAK,CAAA,eAAW,EAACnB,UAAU,iCACvBC,iBAGLC,EAACY,EAAA,CACGC,SAAU3B,IAAgBiC,EAC1BL,OAAQK,EACRJ,MAAO5B,EACPgB,QAAS,IAAMlB,EAAakC,EAAejC,KAGnDc,EAACY,EAAA,CACGC,SAAU3B,IAAgBqC,EAC1BT,OAAQS,EACRR,MAAO5B,EACPgB,QAAS,IAAMlB,EAAasC,EAAuBrC,KAEvDc,EAACY,EAAA,CACGC,SAAU3B,IAAgBsC,EAC1BV,OAAQU,EACRT,MAAO5B,EACPgB,QAAS,IAAMlB,EAAauC,EAAkBtC,KAElDc,EAACY,EAAA,CACGC,SAAU3B,IAAgBuC,EAC1BX,OAAQW,EACRV,MAAO5B,EACPgB,QAAS,IAAMlB,EAAawC,EAAqBvC,KAEpDgC,IACI,OAAK,CAAA,eAAW,EAACpB,UAAU,iCACvBC,iBAGLC,EAACY,EAAA,CACGC,SAAU3B,IAAgBwC,EAC1BZ,OAAQY,EACRX,MAAO5B,EACPgB,QAAS,IAAMlB,EAAayC,EAAaxC,KAGjDc,EAACY,EAAA,CACGC,SAAU3B,IAAgBC,EAC1B2B,OAAQ3B,EACR4B,MAAO5B,EACPgB,QAAS,IAAMlB,EAAaE,EAAeD,QAGnDc,EAACC,EAAA,CACGH,UAAU,wBACVI,MAAOd,EAAOE,KACda,QAAS,IAAMlB,EAAaC,EAAc,EAAGA,GAC7C,gBAAeA,IAAgBC,EAC/BiB,SAAUlB,IAAgBC,GAAqB,EAAA,EAE/CY,WAACiB,EAAiB,QAIlC"}
1	+ {"version":3,"file":"Pagination.js","sources":["../../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { PolymorphicPropsWithRef, PolymorphicRef } 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> = 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 = <ElementType extends React.ElementType = \"nav\">(\n props: PaginationProps<ElementType>,\n) => React.ReactElement \| null;\n\nexport const Pagination = React.forwardRef(function Pagination<ElementType extends React.ElementType = \"nav\">(\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(\"[Pagination]: currentPage prop should be set to a value larger than 0\");\n }\n if (currentPage > numberOfPages) {\n console.error(\"[Pagination]: currentPage prop should not be set to a value larger than numberOfPages\");\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(Math.max(currentPage - 2, 2), numberOfPages - 5);\n const centerPageNumberStart = Math.min(startEllipsis + 1, numberOfPages - 4);\n const centerPageNumber = Math.min(centerPageNumberStart + 1, numberOfPages - 3);\n const centerPageNumberEnd = Math.min(centerPageNumberStart + 2, numberOfPages - 2);\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 aria-hidden className=\"jkl-pagination-button--elipsis\">\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={() => onPageChange(centerPageNumberStart, currentPage)}\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={() => onPageChange(centerPageNumberEnd, currentPage)}\n />\n {showEndEllipsis ? (\n <span aria-hidden className=\"jkl-pagination-button--elipsis\">\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/pagination/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export * from './Pagination.js';

package/build/es/components/popover/Popover.d.ts ADDED Viewed

@@ -0,0 +1,154 @@
+import { useFocus, useHover, useClick, useDismiss, useRole, UseFloatingOptions, ReferenceType } from '@floating-ui/react';
+import * as React from "react";
+type ClickOptions = Parameters<typeof useClick>[1];
+type DismissOptions = Parameters<typeof useDismiss>[1];
+type FocusOptions = Parameters<typeof useFocus>[1];
+type HoverOptions = Parameters<typeof useHover>[1];
+type RoleOptions = Parameters<typeof useRole>[1];
+interface PopoverOptions {
+    /**
+     * Angir om popoveren er åpen eller lukket.
+     *
+     * @see https://floating-ui.com/docs/usefloating#open
+     */
+    open?: boolean;
+    /**
+     * Callback som trigges når popoveren åpnes eller lukkes.
+     *
+     * @see https://floating-ui.com/docs/usefloating#onopenchange
+     */
+    onOpenChange?: UseFloatingOptions["onOpenChange"];
+    /**
+     * Bestemmer plasseringen av popoveren.
+     *
+     * @see https://floating-ui.com/docs/usefloating#placement
+     *
+     * @default "bottom-start"
+     */
+    placement?: UseFloatingOptions["placement"];
+    /**
+     * Definerer strategien for posisjonering av popoveren.
+     *
+     * @see https://floating-ui.com/docs/usefloating#strategy
+     *
+     * @default "absolute"
+     */
+    strategy?: UseFloatingOptions["strategy"];
+    /**
+     * Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet
+     * og innhold utenfor ikke kan interageres med.
+     *
+     * @see https://floating-ui.com/docs/usefloating#modal
+     *
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Justerer avstanden mellom referanse-elementet og popoveren.
+     *
+     * @see https://floating-ui.com/docs/offset
+     *
+     * @default 4
+     */
+    offset?: number;
+    /**
+     * Referanse til elementet som popoveren skal posisjoneres i forhold til.
+     *
+     * @see https://floating-ui.com/docs/usefloating#setpositionreference
+     *
+     * @default Popover.Trigger
+     */
+    positionReference?: React.RefObject<ReferenceType>;
+    /**
+     * Options for hover-interaksjoner.
+     *
+     * @see https://floating-ui.com/docs/usehover
+     *
+     * @default { enabled: false }
+     */
+    hoverOptions?: HoverOptions;
+    /**
+     * Options for fokus-interaksjoner.
+     *
+     * @see https://floating-ui.com/docs/usefocus
+     *
+     * @default { enabled: false }
+     */
+    focusOptions?: FocusOptions;
+    /**
+     * Options for klikk-interaksjoner.
+     *
+     * @see https://floating-ui.com/docs/useclick
+     *
+     * @default { enabled: false }
+     */
+    clickOptions?: ClickOptions;
+    /**
+     * Konfigurerer rollen for popoveren.
+     *
+     * @see https://floating-ui.com/docs/userole
+     *
+     * @default { enabled: true, role: "dialog" }
+     */
+    roleOptions?: RoleOptions;
+    /**
+     * Options for å lukke popoveren når en dismissal skjer,
+     * som ved å klikke utenfor eller trykke på "Escape"-tasten.
+     *
+     * @see https://floating-ui.com/docs/usedismiss
+     *
+     * @default { enabled: true }
+     */
+    dismissOptions?: DismissOptions;
+}
+export declare const Popover: {
+    ({ children, ...restOptions }: {
+        children: React.ReactNode;
+    } & PopoverOptions): React.JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement> & PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement> & PopoverContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+interface PopoverTriggerProps {
+    children: React.ReactNode;
+    /**
+     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.
+     *
+     * Default er `false`.
+     *
+     * @example
+     * ```tsx
+     * <Component asChild foo="bar">
+     *    <Child baz="qux" />
+     * </Component>
+     *
+     * // Rendrer følgende:
+     * <Child foo="bar" baz="qux" />
+     * ```
+     */
+    asChild?: boolean;
+}
+interface PopoverContentProps {
+    /**
+     * Padding rundt innholdet i popoveren.
+     *
+     * Default er `0`.
+     */
+    padding?: 0 | 8 | 16 | 24;
+    /**
+     *
+     * Angir hvilket element som skal motta fokus ved åpning.
+     * Kan være en tabbar index eller en referanse til et element."
+     *
+     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.
+     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus
+     */
+    initialFocus?: number | React.RefObject<HTMLElement>;
+    /**
+     * Angir om fokus skal returneres til triggeren når popoveren lukkes.
+     *
+     * Default er `true`.
+     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus
+     */
+    returnFocus?: boolean;
+}
+export default Popover;

package/build/es/components/popover/Popover.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useMergeRefs as t,FloatingPortal as n,FloatingFocusManager as o,useFloating as s,offset as r,flip as a,shift as i,autoUpdate as l,useClick as c,useHover as p,useFocus as u,useDismiss as d,useRole as m,useInteractions as f}from"@floating-ui/react";import{c as g}from"../../../clsx-BeLtu-UY.js";import*as h from"react";import{getThemeAndDensity as v}from"../../utilities/getThemeAndDensity.js";import"../../utilities/polymorphism/SlotComponent.js";const x=h.createContext(null),y=()=>{const e=h.useContext(x);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},C=({children:t,...n})=>{const o=(({open:e,onOpenChange:t,placement:n="bottom-start",strategy:o="absolute",modal:g=!0,offset:v=4,positionReference:x,hoverOptions:y,focusOptions:C,clickOptions:F,roleOptions:k,dismissOptions:b})=>{const[O,j]=h.useState(e),P=e??O,R=t??j,E=s({open:P,onOpenChange:R,placement:n,strategy:o,middleware:[r(v),a({padding:5,fallbackPlacements:["bottom","top"]}),i({padding:12})],whileElementsMounted:l}),w=E.context,M=c(w,{enabled:!1,...F}),D=p(w,{enabled:!1,...y}),S=u(w,{enabled:!1,...C}),T=d(w,b),A=m(w,k),N=f([M,T,S,D,A]);return h.useLayoutEffect((()=>{x&&E.refs.setPositionReference(null==x?void 0:x.current)}),[x,E.refs]),h.useMemo((()=>({open:P,onOpenChange:R,modal:g,...N,...E})),[P,R,g,N,E])})({...n});return e(x.Provider,{value:o,children:t})},F=h.forwardRef((function({children:n,asChild:o=!1,...s},r){const{refs:a,getReferenceProps:i,open:l,onOpenChange:c}=y(),p=n.ref,u=t([a.setReference,r,p]);return o&&h.isValidElement(n)?h.cloneElement(n,i({ref:u,...s,...n.props})):e("button",{ref:u,onClick:()=>null==c?void 0:c(!l),"aria-expanded":l,...i(s),children:n})})),k=h.forwardRef((function({style:s,className:r,padding:a=0,initialFocus:i=0,returnFocus:l=!0,...c},p){const{context:u,modal:d,refs:m,open:f,floatingStyles:h,getFloatingProps:x}=y(),C=t([m.setFloating,p]),F=m.reference.current,{theme:k,density:b}=v((O=F)&&"contextElement"in O?F.contextElement:F);var O;return f?e(n,{children:e(o,{context:u,modal:d,initialFocus:i,returnFocus:l,children:e("div",{"data-theme":k,"data-layout-density":b,className:g("jkl jkl-popover",r),ref:C,style:{...s,...h,"--popover-padding":`var(--jkl-spacing-${a})`},...x(c),children:c.children})})}):null}));C.Trigger=F,C.Content=k;export{C as default};
+import{jsx as e}from"react/jsx-runtime";import{useMergeRefs as n,FloatingPortal as t,FloatingFocusManager as o,useFloating as s,offset as r,flip as a,shift as i,autoUpdate as l,useClick as c,useHover as u,useFocus as d,useDismiss as p,useRole as f,useInteractions as m}from"@floating-ui/react";import{c as g}from"../../../clsx-BeLtu-UY.js";import*as h from"react";import{getThemeAndDensity as v}from"../../utilities/getThemeAndDensity.js";const x=h.createContext(null),y=()=>{const e=h.useContext(x);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},F=({children:n,...t})=>{const o=(({open:e,onOpenChange:n,placement:t="bottom-start",strategy:o="absolute",modal:g=!0,offset:v=4,positionReference:x,hoverOptions:y,focusOptions:F,clickOptions:k,roleOptions:C,dismissOptions:b})=>{const[O,P]=h.useState(e),R=e??O,j=n??P,E=s({open:R,onOpenChange:j,placement:t,strategy:o,middleware:[r(v),a({padding:5,fallbackPlacements:["bottom","top"]}),i({padding:12})],whileElementsMounted:l}),w=E.context,M=c(w,{enabled:!1,...k}),D=u(w,{enabled:!1,...y}),T=d(w,{enabled:!1,...F}),A=p(w,b),N=f(w,C),S=m([M,A,T,D,N]);return h.useLayoutEffect((()=>{x&&E.refs.setPositionReference(null==x?void 0:x.current)}),[x,E.refs]),h.useMemo((()=>({open:R,onOpenChange:j,modal:g,...S,...E})),[R,j,g,S,E])})({...t});return e(x.Provider,{value:o,children:n})},k=h.forwardRef((function({children:t,asChild:o=!1,...s},r){const{refs:a,getReferenceProps:i,open:l,onOpenChange:c}=y(),u=t.ref,d=n([a.setReference,r,u]);return o&&h.isValidElement(t)?h.cloneElement(t,i({ref:d,...s,...t.props})):e("button",{ref:d,onClick:()=>null==c?void 0:c(!l),"aria-expanded":l,...i(s),children:t})})),C=h.forwardRef((function({style:s,className:r,padding:a=0,initialFocus:i=0,returnFocus:l=!0,...c},u){const{context:d,modal:p,refs:f,open:m,floatingStyles:h,getFloatingProps:x}=y(),F=n([f.setFloating,u]),k=f.reference.current,{theme:C,density:b}=v((O=k)&&"contextElement"in O?k.contextElement:k);var O;return m?e(t,{children:e(o,{context:d,modal:p,initialFocus:i,returnFocus:l,children:e("div",{"data-theme":C,"data-layout-density":b,className:g("jkl jkl-popover",r),ref:F,style:{...s,...h,"--popover-padding":`var(--jkl-spacing-${a})`},...x(c),children:c.children})})}):null}));F.Trigger=k,F.Content=C;export{F as Popover,F as default};
 //# sourceMappingURL=Popover.js.map

package/build/es/components/popover/Popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n useFloating,\n useFocus,\n useHover,\n useClick,\n useDismiss,\n autoUpdate,\n useRole,\n useMergeRefs,\n offset,\n flip,\n shift,\n useInteractions,\n FloatingPortal,\n FloatingFocusManager,\n UseFloatingOptions,\n VirtualElement,\n ReferenceElement,\n ReferenceType,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities\";\n\ntype ClickOptions = Parameters<typeof useClick>[1];\ntype DismissOptions = Parameters<typeof useDismiss>[1];\ntype FocusOptions = Parameters<typeof useFocus>[1];\ntype HoverOptions = Parameters<typeof useHover>[1];\ntype RoleOptions = Parameters<typeof useRole>[1];\n\ninterface PopoverOptions {\n /*\n Angir om popoveren er åpen eller lukket.\n \n @see https://floating-ui.com/docs/usefloating#open\n /\n open?: boolean;\n /\n Callback som trigges når popoveren åpnes eller lukkes.\n \n @see https://floating-ui.com/docs/usefloating#onopenchange\n /\n onOpenChange?: UseFloatingOptions[\"onOpenChange\"];\n /\n Bestemmer plasseringen av popoveren.\n \n @see https://floating-ui.com/docs/usefloating#placement\n \n @default \"bottom-start\"\n /\n placement?: UseFloatingOptions[\"placement\"];\n /\n Definerer strategien for posisjonering av popoveren.\n \n @see https://floating-ui.com/docs/usefloating#strategy\n \n @default \"absolute\"\n /\n strategy?: UseFloatingOptions[\"strategy\"];\n /\n Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet\n * og innhold utenfor ikke kan interageres med.\n \n @see https://floating-ui.com/docs/usefloating#modal\n \n @default true\n /\n modal?: boolean;\n /\n Justerer avstanden mellom referanse-elementet og popoveren.\n \n @see https://floating-ui.com/docs/offset\n \n @default 4\n /\n offset?: number;\n /\n Referanse til elementet som popoveren skal posisjoneres i forhold til.\n \n @see https://floating-ui.com/docs/usefloating#setpositionreference\n \n @default Popover.Trigger\n /\n positionReference?: React.RefObject<ReferenceType>;\n /\n Options for hover-interaksjoner.\n \n @see https://floating-ui.com/docs/usehover\n \n @default { enabled: false }\n /\n hoverOptions?: HoverOptions;\n /\n Options for fokus-interaksjoner.\n \n @see https://floating-ui.com/docs/usefocus\n \n @default { enabled: false }\n /\n focusOptions?: FocusOptions;\n /\n Options for klikk-interaksjoner.\n \n @see https://floating-ui.com/docs/useclick\n \n @default { enabled: false }\n /\n clickOptions?: ClickOptions;\n /\n Konfigurerer rollen for popoveren.\n \n @see https://floating-ui.com/docs/userole\n \n @default { enabled: true, role: \"dialog\" }\n /\n roleOptions?: RoleOptions;\n /\n Options for å lukke popoveren når en dismissal skjer,\n * som ved å klikke utenfor eller trykke på \"Escape\"-tasten.\n \n @see https://floating-ui.com/docs/usedismiss\n \n @default { enabled: true }\n /\n dismissOptions?: DismissOptions;\n}\n\nconst usePopover = ({\n open: _open,\n onOpenChange: _onOpenChange,\n placement = \"bottom-start\",\n strategy = \"absolute\",\n modal = true,\n offset: _offset = 4,\n positionReference,\n hoverOptions,\n focusOptions,\n clickOptions,\n roleOptions,\n dismissOptions,\n}: PopoverOptions) => {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n const open = _open ?? uncontrolledOpen;\n const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n const data = useFloating({\n open,\n onOpenChange,\n placement,\n strategy,\n middleware: [\n offset(_offset),\n flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n shift({ padding: 12 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const context = data.context;\n\n const click = useClick(context, {\n enabled: false,\n ...clickOptions,\n });\n const hover = useHover(context, { enabled: false, ...hoverOptions });\n const focus = useFocus(context, { enabled: false, ...focusOptions });\n const dismiss = useDismiss(context, dismissOptions);\n const role = useRole(context, roleOptions);\n\n const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n React.useLayoutEffect(() => {\n if (positionReference) {\n data.refs.setPositionReference(positionReference?.current);\n }\n }, [positionReference, data.refs]);\n\n return React.useMemo(\n () => ({\n open,\n onOpenChange,\n modal,\n ...interactions,\n ...data,\n }),\n [open, onOpenChange, modal, interactions, data],\n );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> \| null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context == null) {\n throw new Error(\"Popover komponenter må brukes innenfor en <Popover /> komponent\");\n }\n\n return context;\n};\n\nconst Popover = ({\n children,\n ...restOptions\n}: {\n children: React.ReactNode;\n} & PopoverOptions) => {\n const popover = usePopover({ ...restOptions });\n return <PopoverContext.Provider value={popover}>{children}</PopoverContext.Provider>;\n};\n\ninterface PopoverTriggerProps {\n children: React.ReactNode;\n /\n Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n \n Default er `false`.\n \n @example\n * ```tsx\n * <Component asChild foo=\"bar\">\n * <Child baz=\"qux\" />\n * </Component>\n \n // Rendrer følgende:\n * <Child foo=\"bar\" baz=\"qux\" />\n * ```\n /\n asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & PopoverTriggerProps>(\n function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n const childrenRef = (children as any).ref;\n const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n if (asChild && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n getReferenceProps({\n ref,\n ...props,\n ...children.props,\n }),\n );\n }\n\n return (\n <button ref={ref} onClick={() => onOpenChange?.(!open)} aria-expanded={open} {...getReferenceProps(props)}>\n {children}\n </button>\n );\n },\n);\n\ninterface PopoverContentProps {\n /\n Padding rundt innholdet i popoveren.\n \n Default er `0`.\n /\n padding?: 0 \| 8 \| 16 \| 24;\n /\n \n * Angir hvilket element som skal motta fokus ved åpning.\n * Kan være en tabbar index eller en referanse til et element.\"\n \n Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n /\n initialFocus?: number \| React.RefObject<HTMLElement>;\n /\n Angir om fokus skal returneres til triggeren når popoveren lukkes.\n \n Default er `true`.\n * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n */\n returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (referenceElement: ReferenceElement): referenceElement is VirtualElement => {\n if (!referenceElement) return false;\n\n return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & PopoverContentProps>(\n function PopoverContent(\n { style, className, padding = 0, initialFocus = 0, returnFocus = true, ...props },\n propRef,\n ) {\n const { context, modal, refs, open, floatingStyles, getFloatingProps } = usePopoverContext();\n const ref = useMergeRefs([refs.setFloating, propRef]);\n\n const referenceElement = refs.reference.current as ReferenceElement;\n\n const { theme, density } = isCustomPositioned(referenceElement)\n ? getThemeAndDensity(referenceElement.contextElement)\n : getThemeAndDensity(referenceElement);\n\n if (!open) return null;\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n modal={modal}\n initialFocus={initialFocus}\n returnFocus={returnFocus}\n >\n <div\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\"jkl jkl-popover\", className)}\n ref={ref}\n style={\n {\n ...style,\n ...floatingStyles,\n \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n } as React.CSSProperties\n }\n {...getFloatingProps(props)}\n >\n {props.children}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n },\n);\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","FloatingPortal","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
1	+ {"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n useFloating,\n useFocus,\n useHover,\n useClick,\n useDismiss,\n autoUpdate,\n useRole,\n useMergeRefs,\n offset,\n flip,\n shift,\n useInteractions,\n FloatingPortal,\n FloatingFocusManager,\n UseFloatingOptions,\n VirtualElement,\n ReferenceElement,\n ReferenceType,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndDensity } from \"../../utilities/getThemeAndDensity.js\";\n\ntype ClickOptions = Parameters<typeof useClick>[1];\ntype DismissOptions = Parameters<typeof useDismiss>[1];\ntype FocusOptions = Parameters<typeof useFocus>[1];\ntype HoverOptions = Parameters<typeof useHover>[1];\ntype RoleOptions = Parameters<typeof useRole>[1];\n\ninterface PopoverOptions {\n /*\n Angir om popoveren er åpen eller lukket.\n \n @see https://floating-ui.com/docs/usefloating#open\n /\n open?: boolean;\n /\n Callback som trigges når popoveren åpnes eller lukkes.\n \n @see https://floating-ui.com/docs/usefloating#onopenchange\n /\n onOpenChange?: UseFloatingOptions[\"onOpenChange\"];\n /\n Bestemmer plasseringen av popoveren.\n \n @see https://floating-ui.com/docs/usefloating#placement\n \n @default \"bottom-start\"\n /\n placement?: UseFloatingOptions[\"placement\"];\n /\n Definerer strategien for posisjonering av popoveren.\n \n @see https://floating-ui.com/docs/usefloating#strategy\n \n @default \"absolute\"\n /\n strategy?: UseFloatingOptions[\"strategy\"];\n /\n Angir om popoveren skal fungere som en modal, der fokus er låst til det flytende elementet\n * og innhold utenfor ikke kan interageres med.\n \n @see https://floating-ui.com/docs/usefloating#modal\n \n @default true\n /\n modal?: boolean;\n /\n Justerer avstanden mellom referanse-elementet og popoveren.\n \n @see https://floating-ui.com/docs/offset\n \n @default 4\n /\n offset?: number;\n /\n Referanse til elementet som popoveren skal posisjoneres i forhold til.\n \n @see https://floating-ui.com/docs/usefloating#setpositionreference\n \n @default Popover.Trigger\n /\n positionReference?: React.RefObject<ReferenceType>;\n /\n Options for hover-interaksjoner.\n \n @see https://floating-ui.com/docs/usehover\n \n @default { enabled: false }\n /\n hoverOptions?: HoverOptions;\n /\n Options for fokus-interaksjoner.\n \n @see https://floating-ui.com/docs/usefocus\n \n @default { enabled: false }\n /\n focusOptions?: FocusOptions;\n /\n Options for klikk-interaksjoner.\n \n @see https://floating-ui.com/docs/useclick\n \n @default { enabled: false }\n /\n clickOptions?: ClickOptions;\n /\n Konfigurerer rollen for popoveren.\n \n @see https://floating-ui.com/docs/userole\n \n @default { enabled: true, role: \"dialog\" }\n /\n roleOptions?: RoleOptions;\n /\n Options for å lukke popoveren når en dismissal skjer,\n * som ved å klikke utenfor eller trykke på \"Escape\"-tasten.\n \n @see https://floating-ui.com/docs/usedismiss\n \n @default { enabled: true }\n /\n dismissOptions?: DismissOptions;\n}\n\nconst usePopover = ({\n open: _open,\n onOpenChange: _onOpenChange,\n placement = \"bottom-start\",\n strategy = \"absolute\",\n modal = true,\n offset: _offset = 4,\n positionReference,\n hoverOptions,\n focusOptions,\n clickOptions,\n roleOptions,\n dismissOptions,\n}: PopoverOptions) => {\n const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n const open = _open ?? uncontrolledOpen;\n const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n const data = useFloating({\n open,\n onOpenChange,\n placement,\n strategy,\n middleware: [\n offset(_offset),\n flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n shift({ padding: 12 }),\n ],\n whileElementsMounted: autoUpdate,\n });\n\n const context = data.context;\n\n const click = useClick(context, {\n enabled: false,\n ...clickOptions,\n });\n const hover = useHover(context, { enabled: false, ...hoverOptions });\n const focus = useFocus(context, { enabled: false, ...focusOptions });\n const dismiss = useDismiss(context, dismissOptions);\n const role = useRole(context, roleOptions);\n\n const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n React.useLayoutEffect(() => {\n if (positionReference) {\n data.refs.setPositionReference(positionReference?.current);\n }\n }, [positionReference, data.refs]);\n\n return React.useMemo(\n () => ({\n open,\n onOpenChange,\n modal,\n ...interactions,\n ...data,\n }),\n [open, onOpenChange, modal, interactions, data],\n );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> \| null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context == null) {\n throw new Error(\"Popover komponenter må brukes innenfor en <Popover /> komponent\");\n }\n\n return context;\n};\n\nexport const Popover = ({\n children,\n ...restOptions\n}: {\n children: React.ReactNode;\n} & PopoverOptions) => {\n const popover = usePopover({ ...restOptions });\n return <PopoverContext.Provider value={popover}>{children}</PopoverContext.Provider>;\n};\n\ninterface PopoverTriggerProps {\n children: React.ReactNode;\n /\n Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n \n Default er `false`.\n \n @example\n * ```tsx\n * <Component asChild foo=\"bar\">\n * <Child baz=\"qux\" />\n * </Component>\n \n // Rendrer følgende:\n * <Child foo=\"bar\" baz=\"qux\" />\n * ```\n /\n asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<HTMLElement, React.HTMLProps<HTMLElement> & PopoverTriggerProps>(\n function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n const childrenRef = (children as any).ref;\n const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n if (asChild && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n getReferenceProps({\n ref,\n ...props,\n ...children.props,\n }),\n );\n }\n\n return (\n <button ref={ref} onClick={() => onOpenChange?.(!open)} aria-expanded={open} {...getReferenceProps(props)}>\n {children}\n </button>\n );\n },\n);\n\ninterface PopoverContentProps {\n /\n Padding rundt innholdet i popoveren.\n \n Default er `0`.\n /\n padding?: 0 \| 8 \| 16 \| 24;\n /\n \n * Angir hvilket element som skal motta fokus ved åpning.\n * Kan være en tabbar index eller en referanse til et element.\"\n \n Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n /\n initialFocus?: number \| React.RefObject<HTMLElement>;\n /\n Angir om fokus skal returneres til triggeren når popoveren lukkes.\n \n Default er `true`.\n * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n */\n returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (referenceElement: ReferenceElement): referenceElement is VirtualElement => {\n if (!referenceElement) return false;\n\n return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDivElement> & PopoverContentProps>(\n function PopoverContent(\n { style, className, padding = 0, initialFocus = 0, returnFocus = true, ...props },\n propRef,\n ) {\n const { context, modal, refs, open, floatingStyles, getFloatingProps } = usePopoverContext();\n const ref = useMergeRefs([refs.setFloating, propRef]);\n\n const referenceElement = refs.reference.current as ReferenceElement;\n\n const { theme, density } = isCustomPositioned(referenceElement)\n ? getThemeAndDensity(referenceElement.contextElement)\n : getThemeAndDensity(referenceElement);\n\n if (!open) return null;\n\n return (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n modal={modal}\n initialFocus={initialFocus}\n returnFocus={returnFocus}\n >\n <div\n data-theme={theme}\n data-layout-density={density}\n className={clsx(\"jkl jkl-popover\", className)}\n ref={ref}\n style={\n {\n ...style,\n ...floatingStyles,\n \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n } as React.CSSProperties\n }\n {...getFloatingProps(props)}\n >\n {props.children}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n },\n);\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","density","getThemeAndDensity","contextElement","FloatingPortal","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}

package/build/es/components/popover/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as Popover } from './Popover.js';

package/build/es/components/popover/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{default as o}from"./Popover.js";export{o as Popover};
+import{Popover as o}from"./Popover.js";export{o as Popover};
 //# sourceMappingURL=index.js.map

package/build/es/components/progress-bar/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export type { CountdownProps } from './Countdown.js';
+export { Countdown } from './Countdown.js';
+export type { ProgressBarProps } from './ProgressBar.js';
+export { ProgressBar } from './ProgressBar.js';

package/build/es/components/radio-button/BaseRadioButton.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { default as React, ChangeEventHandler } from 'react';
+import { Density } from '../../core/types.js';
+import { RadioButtonProps } from './RadioButton.js';
+export interface BaseRadioButtonProps extends RadioButtonProps {
+    inline?: boolean;
+    density?: Density;
+    invalid?: boolean;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+export declare const BaseRadioButton: React.ForwardRefExoticComponent<BaseRadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/build/es/components/radio-button/BaseRadioButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{forwardRef as o}from"react";import"../../hooks/useScreen/useScreen.js";import{useId as s}from"../../hooks/useId/useId.js";const i=o(((o,i)=>{const{id:n,className:r,checked:d,children:l,label:u,density:c,inline:m,invalid:j,name:b,value:k,onChange:h,...p}=o,_=s(n||"jkl-radio-button",{generateSuffix:!n});return a("div",{className:t("jkl-radio-button",r,{"jkl-radio-button--inline":m,"jkl-radio-button--error":j}),"data-density":c,children:[e("input",{name:b,ref:i,...p,id:_,className:"jkl-radio-button__input",type:"radio",onChange:h,value:k,checked:d}),a("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:_,className:"jkl-radio-button__label",children:[e("span",{"aria-hidden":!0,className:"jkl-radio-button__dot"}),e("span",{className:"jkl-radio-button__text",children:u||l})]})]})}));i.displayName="BaseRadioButton";export{i as BaseRadioButton};
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{forwardRef as o}from"react";import{useId as i}from"../../hooks/useId/useId.js";const s=o(((o,s)=>{const{id:n,className:r,checked:d,children:l,label:u,density:c,inline:m,invalid:j,name:b,value:k,onChange:h,...p}=o,_=i(n||"jkl-radio-button",{generateSuffix:!n});return a("div",{className:t("jkl-radio-button",r,{"jkl-radio-button--inline":m,"jkl-radio-button--error":j}),"data-density":c,children:[e("input",{name:b,ref:s,...p,id:_,className:"jkl-radio-button__input",type:"radio",onChange:h,value:k,checked:d}),a("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:_,className:"jkl-radio-button__label",children:[e("span",{"aria-hidden":!0,className:"jkl-radio-button__dot"}),e("span",{className:"jkl-radio-button__text",children:u||l})]})]})}));s.displayName="BaseRadioButton";export{s as BaseRadioButton};
 //# sourceMappingURL=BaseRadioButton.js.map

package/build/es/components/radio-button/BaseRadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseRadioButton.js","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ChangeEventHandler, forwardRef } from \"react\";\nimport { Density } from \"~~../..\~~";\nimport { useId } from \"../../hooks\";\nimport { RadioButtonProps } from \"./RadioButton\";\n\nexport interface BaseRadioButtonProps extends RadioButtonProps {\n inline?: boolean;\n density?: Density;\n invalid?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const BaseRadioButton = forwardRef<HTMLInputElement, BaseRadioButtonProps>((props, ref) => {\n const { id, className, checked, children, label, density, inline, invalid, name, value, onChange, ...rest } = props;\n\n const inputId = useId(id \|\| \"jkl-radio-button\", { generateSuffix: !id });\n\n return (\n <div\n className={clsx(\"jkl-radio-button\", className, {\n \"jkl-radio-button--inline\": inline,\n \"jkl-radio-button--error\": invalid,\n })}\n data-density={density}\n >\n <input\n name={name}\n ref={ref}\n {...rest}\n id={inputId}\n className=\"jkl-radio-button__input\"\n type=\"radio\"\n onChange={onChange}\n value={value}\n checked={checked}\n />\n <label data-testid=\"jkl-radio-button__label-tag\" htmlFor={inputId} className=\"jkl-radio-button__label\">\n <span aria-hidden className=\"jkl-radio-button__dot\" />\n <span className=\"jkl-radio-button__text\">{label \|\| children}</span>\n </label>\n </div>\n );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","density","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"~~iOAaO~~,MAAMA,EAAkBC,GAAmD,CAACC,EAAOC,KACtF,MAAQC,GAAAA,EAAIC,UAAAA,EAAWC,QAAAA,EAASC,SAAAA,EAAUC,MAAAA,EAAOC,QAAAA,EAASC,OAAAA,EAAQC,QAAAA,EAASC,KAAAA,EAAMC,MAAAA,EAAOC,SAAAA,KAAaC,GAASb,EAExGc,EAAUC,EAAMb,GAAM,mBAAoB,CAAEc,gBAAiBd,IAG/D,OAAAe,EAAC,MAAA,CACGd,UAAWe,EAAK,mBAAoBf,EAAW,CAC3C,2BAA4BK,EAC5B,0BAA2BC,IAE/B,eAAcF,EAEdF,SAAA,CAAAc,EAAC,QAAA,CACGT,KAAAA,EACAT,IAAAA,KACIY,EACJX,GAAIY,EACJX,UAAU,0BACViB,KAAK,QACLR,SAAAA,EACAD,MAAAA,EACAP,QAAAA,MAEH,QAAM,CAAA,cAAY,8BAA8BiB,QAASP,EAASX,UAAU,0BACzEE,SAAA,CAAAc,EAAC,OAAK,CAAA,eAAW,EAAChB,UAAU,0BAC3BgB,EAAA,OAAA,CAAKhB,UAAU,yBAA0BE,YAASA,SACvD,IAKZP,EAAgBwB,YAAc"}
1	+ {"version":3,"file":"BaseRadioButton.js","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ChangeEventHandler, forwardRef } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { RadioButtonProps } from \"./RadioButton.js\";\n\nexport interface BaseRadioButtonProps extends RadioButtonProps {\n inline?: boolean;\n density?: Density;\n invalid?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const BaseRadioButton = forwardRef<HTMLInputElement, BaseRadioButtonProps>((props, ref) => {\n const { id, className, checked, children, label, density, inline, invalid, name, value, onChange, ...rest } = props;\n\n const inputId = useId(id \|\| \"jkl-radio-button\", { generateSuffix: !id });\n\n return (\n <div\n className={clsx(\"jkl-radio-button\", className, {\n \"jkl-radio-button--inline\": inline,\n \"jkl-radio-button--error\": invalid,\n })}\n data-density={density}\n >\n <input\n name={name}\n ref={ref}\n {...rest}\n id={inputId}\n className=\"jkl-radio-button__input\"\n type=\"radio\"\n onChange={onChange}\n value={value}\n checked={checked}\n />\n <label data-testid=\"jkl-radio-button__label-tag\" htmlFor={inputId} className=\"jkl-radio-button__label\">\n <span aria-hidden className=\"jkl-radio-button__dot\" />\n <span className=\"jkl-radio-button__text\">{label \|\| children}</span>\n </label>\n </div>\n );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","density","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"sLAaO,MAAMA,EAAkBC,GAAmD,CAACC,EAAOC,KACtF,MAAQC,GAAAA,EAAIC,UAAAA,EAAWC,QAAAA,EAASC,SAAAA,EAAUC,MAAAA,EAAOC,QAAAA,EAASC,OAAAA,EAAQC,QAAAA,EAASC,KAAAA,EAAMC,MAAAA,EAAOC,SAAAA,KAAaC,GAASb,EAExGc,EAAUC,EAAMb,GAAM,mBAAoB,CAAEc,gBAAiBd,IAG/D,OAAAe,EAAC,MAAA,CACGd,UAAWe,EAAK,mBAAoBf,EAAW,CAC3C,2BAA4BK,EAC5B,0BAA2BC,IAE/B,eAAcF,EAEdF,SAAA,CAAAc,EAAC,QAAA,CACGT,KAAAA,EACAT,IAAAA,KACIY,EACJX,GAAIY,EACJX,UAAU,0BACViB,KAAK,QACLR,SAAAA,EACAD,MAAAA,EACAP,QAAAA,MAEH,QAAM,CAAA,cAAY,8BAA8BiB,QAASP,EAASX,UAAU,0BACzEE,SAAA,CAAAc,EAAC,OAAK,CAAA,eAAW,EAAChB,UAAU,0BAC3BgB,EAAA,OAAA,CAAKhB,UAAU,yBAA0BE,YAASA,SACvD,IAKZP,EAAgBwB,YAAc"}

package/build/es/components/radio-button/RadioButton.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { default as React, InputHTMLAttributes, ChangeEventHandler, ReactNode } from 'react';
+import { SupportLabelProps } from '../input-group/SupportLabel.js';
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children"> {
+    children?: ReactNode;
+    value: string;
+    /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form */
+    name?: string;
+    /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /** @deprecated Bruk children */
+    label?: ReactNode;
+    helpLabel?: ReactNode;
+    supportLabelProps?: Omit<SupportLabelProps, "id" | "errorLabel" | "helpLabel" | "density">;
+}
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/build/es/components/radio-button/RadioButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as o,Fragment as i,jsx as n}from"react/jsx-runtime";import{forwardRef as s}from"react";import"../../hooks/useScreen/useScreen.js";import{useId as c}from"../../hooks/useId/useId.js";import"../tooltip/Tooltip.js";import"../tooltip/TooltipContent.js";import"../tooltip/TooltipTrigger.js";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"../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{SupportLabel as r}from"../input-group/SupportLabel.js";import"../input-group/InputGroup.js";import{BaseRadioButton as t}from"./BaseRadioButton.js";import{useRadioGroupContext as p}from"./radioGroupContext.js";const e=s(((s,e)=>{const{checked:m,value:a,supportLabelProps:j,helpLabel:u,...I}=s,{value:l,density:d,...h}=p(),f=c("jkl-support-label");return o(i,{children:[n(t,{...h,...I,ref:e,checked:typeof m<"u"?m:typeof l<"u"?a===l:void 0,value:a,"aria-describedby":u?f:void 0}),n(r,{...j,label:u,labelType:"help",id:f,density:d})]})}));e.displayName="RadioButton";export{e as RadioButton};
+import{jsxs as o,Fragment as e,jsx as a}from"react/jsx-runtime";import{forwardRef as t}from"react";import{useId as r}from"../../hooks/useId/useId.js";import{SupportLabel as s}from"../input-group/SupportLabel.js";import{BaseRadioButton as p}from"./BaseRadioButton.js";import{useRadioGroupContext as i}from"./radioGroupContext.js";const u=t(((t,u)=>{const{checked:d,value:l,supportLabelProps:m,helpLabel:n,...f}=t,{value:c,density:b,...j}=i(),y=r("jkl-support-label");return o(e,{children:[a(p,{...j,...f,ref:u,checked:typeof d<"u"?d:typeof c<"u"?l===c:void 0,value:l,"aria-describedby":n?y:void 0}),a(s,{...m,label:n,labelType:"help",id:y,density:b})]})}));u.displayName="RadioButton";export{u as RadioButton};
 //# sourceMappingURL=RadioButton.js.map

package/build/es/components/radio-button/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ChangeEventHandler, ReactNode } from \"react\";\nimport { useId } from \"../../hooks\";\nimport { SupportLabel, SupportLabelProps } from \"../input-group\";\nimport { BaseRadioButton } from \"./BaseRadioButton\";\nimport { useRadioGroupContext } from \"./radioGroupContext\";\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n children?: ReactNode;\n value: string;\n /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form /\n name?: string;\n /* Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /* @deprecated Bruk children */\n label?: ReactNode;\n helpLabel?: ReactNode;\n supportLabelProps?: Omit<SupportLabelProps, \"id\" \| \"errorLabel\" \| \"helpLabel\" \| \"density\">;\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>((props, ref) => {\n const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n const { value: selectedValue, density, ...context } = useRadioGroupContext();\n const supportId = useId(\"jkl-support-label\");\n\n return (\n <>\n <BaseRadioButton\n {...context}\n {...rest}\n ref={ref}\n checked={\n typeof checked !== \"undefined\"\n ? checked\n : typeof selectedValue !== \"undefined\"\n ? value === selectedValue\n : undefined\n }\n value={value}\n aria-describedby={helpLabel ? supportId : undefined}\n />\n <SupportLabel\n {...supportLabelProps}\n label={helpLabel}\n labelType={\"help\"}\n id={supportId}\n density={density}\n />\n </>\n );\n});\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","density","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"~~o0DAmBO~~,MAAMA,EAAcC,GAA+C,CAACC,EAAOC,KACxE,MAAEC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAC1DG,MAAOI,EAAeC,QAAAA,KAAYC,GAAYC,IAChDC,EAAYC,EAAM,qBAExB,OAEQC,EAAAC,EAAA,CAAAC,SAAA,CAAAC,EAACC,EAAA,IACOR,KACAH,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACzBJ,IAAUI,OACV,EAEVJ,MAAAA,EACA,mBAAkBE,EAAYM,OAAY,IAE9CK,EAACE,EAAA,IACOd,EACJe,MAAOd,EACPe,UAAW,OACXC,GAAIV,EACJH,QAAAA,MAER,IAIRV,EAAYwB,YAAc"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import React, { forwardRef, InputHTMLAttributes, ChangeEventHandler, ReactNode } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { SupportLabel, SupportLabelProps } from \"../input-group/SupportLabel.js\";\nimport { BaseRadioButton } from \"./BaseRadioButton.js\";\nimport { useRadioGroupContext } from \"./radioGroupContext.js\";\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"children\"> {\n children?: ReactNode;\n value: string;\n /** Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form /\n name?: string;\n /* Kan også settes på RadioButtonGroup, men settes på RadioButton f. eks. av react-hook-form /\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /* @deprecated Bruk children */\n label?: ReactNode;\n helpLabel?: ReactNode;\n supportLabelProps?: Omit<SupportLabelProps, \"id\" \| \"errorLabel\" \| \"helpLabel\" \| \"density\">;\n}\n\nexport const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>((props, ref) => {\n const { checked, value, supportLabelProps, helpLabel, ...rest } = props;\n const { value: selectedValue, density, ...context } = useRadioGroupContext();\n const supportId = useId(\"jkl-support-label\");\n\n return (\n <>\n <BaseRadioButton\n {...context}\n {...rest}\n ref={ref}\n checked={\n typeof checked !== \"undefined\"\n ? checked\n : typeof selectedValue !== \"undefined\"\n ? value === selectedValue\n : undefined\n }\n value={value}\n aria-describedby={helpLabel ? supportId : undefined}\n />\n <SupportLabel\n {...supportLabelProps}\n label={helpLabel}\n labelType={\"help\"}\n id={supportId}\n density={density}\n />\n </>\n );\n});\n\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","forwardRef","props","ref","checked","value","supportLabelProps","helpLabel","rest","selectedValue","density","context","useRadioGroupContext","supportId","useId","jsxs","Fragment","children","jsx","BaseRadioButton","SupportLabel","label","labelType","id","displayName"],"mappings":"yUAmBO,MAAMA,EAAcC,GAA+C,CAACC,EAAOC,KACxE,MAAEC,QAAAA,EAASC,MAAAA,EAAOC,kBAAAA,EAAmBC,UAAAA,KAAcC,GAASN,GAC1DG,MAAOI,EAAeC,QAAAA,KAAYC,GAAYC,IAChDC,EAAYC,EAAM,qBAExB,OAEQC,EAAAC,EAAA,CAAAC,SAAA,CAAAC,EAACC,EAAA,IACOR,KACAH,EACJL,IAAAA,EACAC,eACWA,EAAY,IACbA,SACOK,EAAkB,IACzBJ,IAAUI,OACV,EAEVJ,MAAAA,EACA,mBAAkBE,EAAYM,OAAY,IAE9CK,EAACE,EAAA,IACOd,EACJe,MAAOd,EACPe,UAAW,OACXC,GAAIV,EACJH,QAAAA,MAER,IAIRV,EAAYwB,YAAc"}

package/build/es/components/radio-button/RadioButtonGroup.d.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { ChangeEventHandler, FC } from 'react';
+import { Density } from '../../core/types.js';
+import { FieldGroupProps } from '../input-group/FieldGroup.js';
+export interface RadioButtonGroupProps extends Omit<FieldGroupProps, "onChange"> {
+    legend: string;
+    /** Alle RadioButton i gruppen får dette som name. */
+    name?: string;
+    /** Om gruppen skal være controlled setter du den valgte verdien her. */
+    value?: string;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    helpLabel?: string;
+    /**
+     * Erstatter hjelpeteksten (hvis noen) med en feilmelding.
+     * Merker samtidig alle RadioButton i gruppen som ugyldige.
+     */
+    errorLabel?: string;
+    /**
+     * Setter inline-modifieren på alle RadioButton i gruppen.
+     * @default false
+     */
+    inline?: boolean;
+    density?: Density;
+}
+export declare const RadioButtonGroup: FC<RadioButtonGroupProps>;

package/build/es/components/radio-button/RadioButtonGroup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import{FieldGroup as n}from"../input-group/FieldGroup.js";import"../input-group/InputGroup.js";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"../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{RadioGroupContextProvider as i}from"./radioGroupContext.js";const c=c=>{const{name:r,value:s,onChange:t,errorLabel:p,inline:e=!1,density:m,labelProps:a={variant:"medium"},...j}=c;return o(i,{state:{onChange:t,value:s,name:r,invalid:!!p,inline:e,density:m},children:o(n,{errorLabel:p,labelProps:a,"data-testid":"jkl-radio-button-group",density:m,...j,role:"radiogroup","aria-invalid":!!p})})};export{c as RadioButtonGroup};
+import{jsx as r}from"react/jsx-runtime";import{FieldGroup as o}from"../input-group/FieldGroup.js";import{RadioGroupContextProvider as e}from"./radioGroupContext.js";const a=a=>{const{name:i,value:t,onChange:n,errorLabel:d,inline:l=!1,density:s,labelProps:u={variant:"medium"},...p}=a;return r(e,{state:{onChange:n,value:t,name:i,invalid:!!d,inline:l,density:s},children:r(o,{errorLabel:d,labelProps:u,"data-testid":"jkl-radio-button-group",density:s,...p,role:"radiogroup","aria-invalid":!!d})})};export{a as RadioButtonGroup};
 //# sourceMappingURL=RadioButtonGroup.js.map