npm - @fremtind/jokul - Versions diffs - 0.44.7 → 0.45.1 - Mend

@fremtind/jokul 0.44.7 → 0.45.1

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

Files changed (782) hide show

package/build/es/components/text-input/BaseTextInput.d.ts CHANGED Viewed

@@ -1,51 +1,3 @@
-import { default as React, HTMLProps, InputHTMLAttributes, MouseEventHandler, ReactNode } from 'react';
-import { Density } from '../../core/types.js';
-import { IconProps } from '../icon/types.js';
-interface ActionBaseProps extends Exclude<HTMLProps<HTMLButtonElement>, "disabled"> {
-    icon: React.ReactElement<IconProps>;
-    label: string;
-    buttonRef?: React.Ref<HTMLButtonElement>;
-}
-export interface ActionButton extends ActionBaseProps {
-    type?: "button" | "reset";
-    onClick: MouseEventHandler<HTMLButtonElement>;
-}
-export interface ActionSubmit extends ActionBaseProps {
-    type: "submit";
-    onClick?: MouseEventHandler<HTMLButtonElement>;
-}
-export type Action = ActionButton | ActionSubmit;
-export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "maxLength"> {
-    /**
-     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.
-     * @default "left"
-     */
-    align?: "left" | "right";
-    /**
-     * @deprecated Bruk heller actionButton
-     *
-     */
-    action?: Action;
-    density?: Density;
-    /**
-     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig
-     * @example "kr"
-     * */
-    unit?: ReactNode;
-    width?: string;
-    /**
-     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.
-     */
-    actionButton?: React.ReactElement;
-    /**
-     * Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes
-     *
-     * Merk: I noen Android-browsere vil dette ikke fungere som forventet. Det er gjort sånn
-     * pga begrensninger med hvordan software-tastaturet fungerer og er ikke en bug. Dersom
-     * man er veldig avhengig av at maxLength håndteres på alle plattformer anbefales det
-     * å bruke input-feltet som en controlled input og selv begrense lengden på verdien.
-     */
-    maxLength?: number | undefined;
-}
+import { default as React } from 'react';
+import { BaseTextInputProps } from './types.js';
 export declare const BaseTextInput: React.ForwardRefExoticComponent<BaseTextInputProps & React.RefAttributes<HTMLInputElement>>;
-export {};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type CSSProperties~~,\n~~ forwardRef~~,\n HTMLProps,\n InputHTMLAttributes,\n type~~ ~~MouseEventHandler,\n type ReactNode,\n~~} from \"react\";\nimport { ~~Density~~ } from \"~~../../core/types.js\";\nimport { IconProps } from \"~~../icon/~~types~~.js\";\nimport { ~~IconButton~~ } from \"~~../icon-button/IconButton~~.js\";\n\nfunction getWidthAsStyle(\n width?: string,\n maxLength?: number,\n): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at 40ch\n const length = `${Math.min(maxLength, 40)}ch`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\ninterface ActionBaseProps\n extends Exclude<HTMLProps<HTMLButtonElement>, \"disabled\"> {\n icon: React.ReactElement<IconProps>;\n label: string;\n buttonRef?: React.Ref<HTMLButtonElement>;\n}\n\nexport interface ActionButton extends ActionBaseProps {\n type?: \"button\" \| \"reset\";\n onClick: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport interface ActionSubmit extends ActionBaseProps {\n type: \"submit\";\n onClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport type Action = ActionButton \| ActionSubmit;\n\nexport interface BaseTextInputProps\n extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"children\" \| \"maxLength\"\n > {\n /*\n Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.\n * @default \"left\"\n /\n align?: \"left\" \| \"right\";\n /\n @deprecated Bruk heller actionButton\n \n /\n action?: Action;\n density?: Density;\n /*\n Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig\n * @example \"kr\"\n * /\n unit?: ReactNode;\n width?: string;\n /\n Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.\n /\n actionButton?: React.ReactElement;\n /\n Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes\n \n Merk: I noen Android-browsere vil dette ikke fungere som forventet. Det er gjort sånn\n * pga begrensninger med hvordan software-tastaturet fungerer og er ikke en bug. Dersom\n * man er veldig avhengig av at maxLength håndteres på alle plattformer anbefales det\n * å bruke input-feltet som en controlled input og selv begrense lengden på verdien.\n */\n maxLength?: number \| undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n (props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action &&\n actionButton &&\n React.cloneElement(actionButton, {\n className: clsx(\n \"jkl-text-input-action-button\",\n actionButton.props.className,\n ),\n \"data-theme\": ariaInvalid ? \"light\" : undefined,\n })}\n {action && !actionButton && (\n <IconButton\n data-theme={ariaInvalid ? \"light\" : undefined}\n density={density}\n className={clsx(\n \"jkl-text-input-action-button\",\n action.className,\n )}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"~~gMAaA~~,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,~~CA0DO~~,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,WAEvB,aAAcD,EAAc,aAAU,IAE7CF,IAAWQ,GACRI,EAACI,EAAA,CACG,aAAYd,EAAc,aAAU,EACpCE,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SACZ,IAOpB3B,EAAc4B,YAAc"}
1	+ {"version":3,"file":"BaseTextInput.js","sources":["../../../../src/components/text-input/BaseTextInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type CSSProperties, forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { BaseTextInputProps } from \"./types.js\";\n\nfunction getWidthAsStyle(\n width?: string,\n maxLength?: number,\n): CSSProperties \| undefined {\n if (width) {\n return { width }; // prioritize width prop\n }\n\n if (maxLength) {\n // adapt to maxLength, but capped at 40ch\n const length = `${Math.min(maxLength, 40)}ch`;\n const padding = \"24px\"; // left + right padding\n return { width: `calc(${length} + ${padding})` };\n }\n\n return undefined;\n}\n\nexport const BaseTextInput = forwardRef<HTMLInputElement, BaseTextInputProps>(\n (props, ref) => {\n const {\n action,\n align = \"left\",\n \"aria-invalid\": ariaInvalid,\n className = \"\",\n density,\n maxLength,\n style,\n type = \"text\",\n unit,\n width,\n actionButton,\n ...rest\n } = props;\n\n return (\n <div\n className=\"jkl-text-input-wrapper\"\n data-invalid={ariaInvalid}\n style={{ ...style, ...getWidthAsStyle(width, maxLength) }}\n >\n <input\n aria-invalid={ariaInvalid}\n ref={ref}\n className={clsx(\"jkl-text-input__input\", className, {\n \"jkl-text-input__input--align-right\": align === \"right\",\n })}\n maxLength={maxLength}\n type={type}\n {...rest}\n />\n {unit && <span className=\"jkl-text-input__unit\">{unit}</span>}\n {!action &&\n actionButton &&\n React.cloneElement(actionButton, {\n className: clsx(\n \"jkl-text-input-action-button\",\n actionButton.props.className,\n ),\n \"data-theme\": ariaInvalid ? \"light\" : undefined,\n })}\n {action && !actionButton && (\n <IconButton\n data-theme={ariaInvalid ? \"light\" : undefined}\n density={density}\n className={clsx(\n \"jkl-text-input-action-button\",\n action.className,\n )}\n title={action.label}\n onClick={action.onClick}\n onFocus={action.onFocus}\n onBlur={action.onBlur}\n ref={action.buttonRef}\n type={action.type \|\| \"button\"}\n >\n {action.icon}\n </IconButton>\n )}\n </div>\n );\n },\n);\n\nBaseTextInput.displayName = \"BaseInputField\";\n"],"names":["getWidthAsStyle","width","maxLength","Math","min","BaseTextInput","forwardRef","props","ref","action","align","ariaInvalid","className","density","style","type","unit","actionButton","rest","jsxs","children","jsx","clsx","React","cloneElement","IconButton","title","label","onClick","onFocus","onBlur","buttonRef","icon","displayName"],"mappings":"gMAKA,SAASA,EACLC,EACAC,GAEID,OAAAA,EACO,CAAEA,MAAAA,GAGTC,EAIO,CAAED,MAAO,QAFEE,KAAKC,IAAIF,EAAW,sBAFtCA,CAQR,CAEO,MAAMG,EAAgBC,GACzB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,MAAAA,EAAQ,OACR,eAAgBC,EAChBC,UAAAA,EAAY,GACZC,QAAAA,EACAX,UAAAA,EACAY,MAAAA,EACAC,KAAAA,EAAO,OACPC,KAAAA,EACAf,MAAAA,EACAgB,aAAAA,KACGC,GACHX,EAGA,OAAAY,EAAC,MAAA,CACGP,UAAU,yBACV,eAAcD,EACdG,MAAO,IAAKA,KAAUd,EAAgBC,EAAOC,IAE7CkB,SAAA,CAAAC,EAAC,QAAA,CACG,eAAcV,EACdH,IAAAA,EACAI,UAAWU,EAAK,wBAAyBV,EAAW,CAChD,qCAAgD,UAAVF,IAE1CR,UAAAA,EACAa,KAAAA,KACIG,IAEPF,GAAQK,EAAC,OAAK,CAAAT,UAAU,uBAAwBQ,SAAKJ,KACpDP,GACEQ,GACAM,EAAMC,aAAaP,EAAc,CAC7BL,UAAWU,EACP,+BACAL,EAAaV,MAAMK,WAEvB,aAAcD,EAAc,aAAU,IAE7CF,IAAWQ,GACRI,EAACI,EAAA,CACG,aAAYd,EAAc,aAAU,EACpCE,QAAAA,EACAD,UAAWU,EACP,+BACAb,EAAOG,WAEXc,MAAOjB,EAAOkB,MACdC,QAASnB,EAAOmB,QAChBC,QAASpB,EAAOoB,QAChBC,OAAQrB,EAAOqB,OACftB,IAAKC,EAAOsB,UACZhB,KAAMN,EAAOM,MAAQ,SAEpBK,SAAOX,EAAAuB,SACZ,IAOpB3B,EAAc4B,YAAc"}

package/build/es/components/text-input/TextArea.d.ts CHANGED Viewed

@@ -1,6 +1,3 @@
 import { default as React } from 'react';
-import { InputGroupProps } from '../input-group/InputGroup.js';
-import { BaseTextAreaProps } from './BaseTextArea.js';
-export interface TextAreaProps extends Omit<InputGroupProps, "children">, BaseTextAreaProps {
-}
+import { TextAreaProps } from './types.js';
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

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

package/build/es/components/text-input/TextInput.d.ts CHANGED Viewed

@@ -1,9 +1,3 @@
 import { default as React } from 'react';
-import { InputGroupProps } from '../input-group/InputGroup.js';
-import { BaseTextInputProps } from './BaseTextInput.js';
-export interface TextInputProps extends Omit<InputGroupProps, "children">, BaseTextInputProps {
-    "data-testautoid"?: string;
-    inline?: boolean;
-    inputClassName?: string;
-}
+import { TextInputProps } from './types.js';
 export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

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

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

package/build/es/components/text-input/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-export { BaseTextArea, type BaseTextAreaProps, type Counter, } from './BaseTextArea.js';
-export { BaseTextInput, type BaseTextInputProps, type Action, } from './BaseTextInput.js';
-export { TextArea, type TextAreaProps } from './TextArea.js';
-export { TextInput, type TextInputProps } from './TextInput.js';
+export { BaseTextArea } from './BaseTextArea.js';
+export { BaseTextInput } from './BaseTextInput.js';
+export { TextArea } from './TextArea.js';
+export { TextInput } from './TextInput.js';
+export type { BaseTextAreaProps, Counter, BaseTextInputProps, Action, TextAreaProps, TextInputProps, } from './types.js';

package/build/es/components/text-input/types.d.ts ADDED Viewed

@@ -0,0 +1,82 @@
+import { HTMLProps, InputHTMLAttributes, MouseEventHandler, ReactNode, TextareaHTMLAttributes } from 'react';
+import { Density } from '../../core/types.js';
+import { IconProps } from '../icon/types.js';
+import { InputGroupProps } from '../input-group/types.js';
+export interface BaseTextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "maxLength"> {
+    /**
+     * Brukes til inputfelter hvor det brukes maskering, for formatering av store tall. Brukes typisk bare til valuta.
+     * @default "left"
+     */
+    align?: "left" | "right";
+    /**
+     * @deprecated Bruk heller actionButton
+     *
+     */
+    action?: Action;
+    density?: Density;
+    /**
+     * Benevnelse for feltet. Unngå å bruke både benevnelse og handling samtidig
+     * @example "kr"
+     * */
+    unit?: ReactNode;
+    width?: string;
+    /**
+     * Element som vises til høyre for inputfeltet. Brukes typisk til å trigge en handling som f.eks. å vise/skjule passord.
+     */
+    actionButton?: React.ReactElement;
+    /**
+     * Setter maxlength attributtet og justerer bredden på feltet til å passe det tallet som settes
+     *
+     * Merk: I noen Android-browsere vil dette ikke fungere som forventet. Det er gjort sånn
+     * pga begrensninger med hvordan software-tastaturet fungerer og er ikke en bug. Dersom
+     * man er veldig avhengig av at maxLength håndteres på alle plattformer anbefales det
+     * å bruke input-feltet som en controlled input og selv begrense lengden på verdien.
+     */
+    maxLength?: number | undefined;
+}
+export interface TextInputProps extends Omit<InputGroupProps, "children">, BaseTextInputProps {
+    "data-testautoid"?: string;
+    inline?: boolean;
+    inputClassName?: string;
+}
+interface ActionBaseProps extends Exclude<HTMLProps<HTMLButtonElement>, "disabled"> {
+    icon: React.ReactElement<IconProps>;
+    label: string;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+}
+export interface ActionButton extends ActionBaseProps {
+    type?: "button" | "reset";
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+export interface ActionSubmit extends ActionBaseProps {
+    type: "submit";
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export type Action = ActionButton | ActionSubmit;
+export type Counter = {
+    /** Antall tegn før telleren når maksimum og vi viser en feilmelding */
+    maxLength: number;
+    /**
+     * Med teller vises en progress-bar i bunnen av tekstfeltet som krymper
+     * ned fra 100% (null tegn skrevet) til 0% (maks antall tegn skrevet).
+     * Om du vil skjule den, sett denne propen til true.
+     *
+     * @default false
+     */
+    hideProgress?: boolean;
+};
+export interface BaseTextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "children"> {
+    /**
+     * Viser en teller i tekstfeltet når det har fokus.
+     */
+    counter?: Counter;
+    /** Sett antall rader skjemafeltet ekspanderes til ved focus. Innholdet scroller om feltet fylles med mer innhold enn det er plass til. */
+    rows?: number;
+    inline?: boolean;
+    startOpen?: boolean;
+    /** Gjør så skjemafeltet ekspanderer seg til å vise alt innhold i stedet for å scrolle */
+    autoExpand?: boolean;
+}
+export interface TextAreaProps extends Omit<InputGroupProps, "children">, BaseTextAreaProps {
+}
+export {};

package/build/es/components/text-input/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ //# sourceMappingURL=types.js.map

package/build/es/components/text-input/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

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

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

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

package/build/es/components/toggle-switch/ToggleSlider.d.ts CHANGED Viewed

@@ -1,11 +1,3 @@
 import { FC } from 'react';
-import { Density, WithChildren } from '../../core/types.js';
-export interface ToggleSliderProps extends WithChildren {
-    labels: [string, string];
-    onToggle: (value: string) => void;
-    defaultValue?: string;
-    className?: string;
-    hideLegend?: boolean;
-    density?: Density;
-}
+import { ToggleSliderProps } from './types.js';
 export declare const ToggleSlider: FC<ToggleSliderProps>;

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

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

package/build/es/components/toggle-switch/ToggleSwitch.d.ts CHANGED Viewed

@@ -1,32 +1,6 @@
-import { default as React, ButtonHTMLAttributes } from 'react';
-import { Density } from '../../core/types.js';
-import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.js';
-export type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;
-export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
-    density?: Density;
-    /**
-     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
-     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
-     * @example
-     * ```js
-     * function handleChange(event, pressed) {
-     *    console.log(`ToggleSwitch er ${pressed ? "på" : "av"}`);
-     * }
-     * ```
-     */
-    onChange?: ToggleChangeHandler<HTMLButtonElement>;
-};
+import { default as React } from 'react';
+import { ToggleChangeHandler } from './types.js';
 export declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
-    density?: Density;
-    /**
-     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
-     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
-     * @example
-     * ```js
-     * function handleChange(event, pressed) {
-     *    console.log(`ToggleSwitch er ${pressed ? "på" : "av"}`);
-     * }
-     * ```
-     */
+    density?: import('../../index.js').Density;
     onChange?: ToggleChangeHandler<HTMLButtonElement>;
 } & React.RefAttributes<HTMLButtonElement>>;

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

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

package/build/es/components/toggle-switch/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
-export { ToggleSwitch, type ToggleChangeHandler, type ToggleSwitchProps, } from './ToggleSwitch.js';
-export { ToggleSlider, type ToggleSliderProps } from './ToggleSlider.js';
+export { ToggleSwitch } from './ToggleSwitch.js';
+export { ToggleSlider } from './ToggleSlider.js';
+export type { ToggleChangeHandler, ToggleSwitchProps, ToggleSliderProps, } from './types.js';

package/build/es/components/toggle-switch/types.d.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { ButtonHTMLAttributes } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.js';
+export interface ToggleSliderProps extends WithChildren {
+    labels: [string, string];
+    onToggle: (value: string) => void;
+    defaultValue?: string;
+    className?: string;
+    hideLegend?: boolean;
+    density?: Density;
+}
+export type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;
+export type ToggleSwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    density?: Density;
+    /**
+     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
+     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
+     * @example
+     * ```js
+     * function handleChange(event, pressed) {
+     *    console.log(`ToggleSwitch er ${pressed ? "på" : "av"}`);
+     * }
+     * ```
+     */
+    onChange?: ToggleChangeHandler<HTMLButtonElement>;
+};

package/build/es/components/toggle-switch/types.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ //# sourceMappingURL=types.js.map

package/build/es/components/toggle-switch/types.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/es/components/tooltip/PopupTip.d.ts CHANGED Viewed

@@ -1,13 +1,3 @@
-import { HTMLProps, FC, ReactNode } from 'react';
-import { TooltipProps } from './Tooltip.js';
-export interface PopupTipProps extends Omit<TooltipProps, "triggerOn" | "children"> {
-    /**
-     * Innholdet i tooltipet som vises
-     */
-    content: ReactNode;
-    /**
-     * Eventuelle props du vil sette på trigger-knappen for tooltipet
-     */
-    triggerProps?: Omit<HTMLProps<HTMLButtonElement>, "children" | "type">;
-}
+import { FC } from 'react';
+import { PopupTipProps } from './types.js';
 export declare const PopupTip: FC<PopupTipProps>;

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

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

package/build/es/components/tooltip/Tooltip.d.ts CHANGED Viewed

@@ -1,35 +1,7 @@
-import { Placement, UseFloatingReturn, useInteractions } from '@floating-ui/react';
+import { UseFloatingReturn, useInteractions } from '@floating-ui/react';
 import { default as React, FC } from 'react';
 import { WithChildren } from '../../core/types.js';
-export type TooltipPlacement = Extract<Placement, "top-start" | "top-end" | "left" | "right" | "top">;
-export interface TooltipProps {
-    /**
-     * Sett til true dersom du ønsker at tooltipen skal være åpen som default
-     * @default false
-     */
-    initialOpen?: boolean;
-    /**
-     * En funksjon som skal kalles når Tooltip åpnes eller lukkes
-     * @param open Hvorvidt tooltip endres til å være åpen eller ikke
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk
-     * bytte posisjon dersom det ikke er plass.
-     * @default "top"
-     */
-    placement?: TooltipPlacement;
-    /**
-     * Valgfri forsinkelse før tooltipen åpner. Ignoreres dersom triggerOn er satt til "click"
-     * @default 250
-     */
-    delay?: number;
-    /**
-     * Angir om tooltipen skal åpnes ved klikk eller hover
-     * @default "hover"
-     */
-    triggerOn?: "click" | "hover";
-}
+import { TooltipProps } from './types.js';
 type UseTooltipReturn = {
     triggerOn: NonNullable<TooltipProps["triggerOn"]>;
     isOpen: boolean;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n type ~~Placement,\n type~~ UseFloatingReturn,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport React, { FC, createContext, useContext, useRef, useState } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\~~n\nexport~~ ~~type~~ ~~TooltipPlacement = Extract<\n Placement,\n \"top-start\" \| \"top-end\" \| \"left\" \| \"right\" \| \"top\"\n>;\n\nexport interface~~ TooltipProps {\n /*\n ~~Sett~~ ~~til true dersom du ønsker at tooltipen skal være åpen som default~~\n * @default false\n /\n initialOpen?: boolean;\n /\n En funksjon som skal kalles når Tooltip åpnes eller lukkes\n * @param open Hvorvidt tooltip endres til å være åpen eller ikke\n /\n onOpenChange?: (open: boolean) => void;\n /\n Plassering av tooltipen i forhold til triggeren. Tooltipen vil automatisk\n * bytte posisjon dersom det ikke er plass.\n * @default \"~~top\"\n /\n placement?: TooltipPlacement;\n /\n Valgfri forsinkelse før tooltipen åpner~~. ~~Ignoreres dersom triggerOn er satt til~~ \"~~click\"\n * @default 250\n /\n delay?: number~~;\n ~~/\n Angir om tooltipen skal åpnes ved klikk eller hover~~\~~n * @default \"hover\"\n */\n triggerOn?: \"click\" \| \"hover\";\n}\n\~~ntype UseTooltipReturn = {\n triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n isOpen: boolean;\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n arrowElement: React.RefObject<SVGSVGElement>;\n refs: {\n description: React.MutableRefObject<HTMLElement \| null>;\n setDescription: (element: HTMLElement \| null) => void;\n } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n initialOpen = false,\n placement = \"top\",\n delay = 250,\n triggerOn = \"hover\",\n onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n const [isOpen, setOpen] = useState(initialOpen);\n const arrowElement = useRef<SVGSVGElement>(null);\n const description = useRef<HTMLElement \| null>(null);\n const setDescription = (element: HTMLElement \| null) =>\n (description.current = element);\n\n const data = useFloating({\n open: isOpen,\n onOpenChange: (open) => {\n onOpenChange?.(open);\n setOpen(open);\n },\n placement,\n whileElementsMounted: autoUpdate,\n middleware: [\n offset(16),\n flip(),\n shift({ padding: 16 }),\n arrow({ element: arrowElement, padding: 8 }),\n ],\n });\n\n const role = useRole(data.context, { role: \"tooltip\" });\n const dismiss = useDismiss(data.context);\n const click = useClick(data.context, {\n enabled: triggerOn === \"click\",\n });\n const hover = useHover(data.context, {\n enabled: triggerOn === \"hover\",\n delay: isOpen ? 0 : delay,\n });\n const focus = useFocus(data.context, {\n enabled: triggerOn === \"hover\",\n });\n\n const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n return {\n triggerOn,\n isOpen,\n setOpen,\n arrowElement,\n ...data,\n refs: {\n ...data.refs,\n description,\n setDescription,\n },\n ...interactions,\n };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> \| null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n const context = useContext(tooltipContext);\n\n if (context === null) {\n throw new Error(\n \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n );\n }\n\n return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n children,\n ...options\n}) => {\n const tooltip = useTooltip(options);\n\n return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","context","useContext","Error","Tooltip","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value"],"mappings":"~~iUAiEA~~,MA6DMA,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KACvBC,MAAAA,EAAUC,EAAWN,GAE3B,GAAgB,OAAZK,EACA,MAAM,IAAIE,MACN,0DAIDF,OAAAA,CAAAA,EAGEG,EAA2C,EACpDC,SAAAA,KACGC,MAEGC,MAAAA,EAjFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEM,MAACC,EAAQC,GAAWC,EAASP,GAC7BQ,EAAeC,EAAsB,MACrCC,EAAcD,EAA2B,MAIzCE,EAAOC,EAAY,CACrBC,KAAMR,EACND,aAAeS,IACX,MAAAT,GAAAA,EAAeS,GACfP,EAAQO,EAAI,EAEhBZ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CACRC,EAAO,IACPC,IACAC,EAAM,CAAEC,QAAS,KACjBC,EAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAQb,EAAKlB,QAAS,CAAE8B,KAAM,YACrCE,EAAUC,EAAWf,EAAKlB,SAC1BkC,EAAQC,EAASjB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAEP2B,EAAQC,EAASpB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,EACTD,MAAOG,EAAS,EAAIH,IAElB8B,EAAQC,EAAStB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAGP+B,EAAeC,EAAgB,CAACV,EAASO,EAAOT,EAAMI,EAAOG,IAE5D,MAAA,CACH3B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACHyB,KAAM,IACCzB,EAAKyB,KACR1B,YAAAA,EACA2B,eA3CgBf,GACnBZ,EAAY4B,QAAUhB,MA4CpBY,EAAA,EA0BSK,CAAWzC,GAEnB,OAAA0C,EAAAlD,EAAA,CAAgBmD,MAAO1C,EAAUF,SAAAA,GAAS"}
1	+ {"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n type UseFloatingReturn,\n arrow,\n autoUpdate,\n flip,\n offset,\n shift,\n useClick,\n useDismiss,\n useFloating,\n useFocus,\n useHover,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport React, { FC, createContext, useContext, useRef, useState } from \"react\";\nimport { type WithChildren } from \"../../core/types.js\";\nimport { TooltipProps } from \"./types.js\";\n\ntype UseTooltipReturn = {\n triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n isOpen: boolean;\n setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n arrowElement: React.RefObject<SVGSVGElement>;\n refs: {\n description: React.MutableRefObject<HTMLElement \| null>;\n setDescription: (element: HTMLElement \| null) => void;\n } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n initialOpen = false,\n placement = \"top\",\n delay = 250,\n triggerOn = \"hover\",\n onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n const [isOpen, setOpen] = useState(initialOpen);\n const arrowElement = useRef<SVGSVGElement>(null);\n const description = useRef<HTMLElement \| null>(null);\n const setDescription = (element: HTMLElement \| null) =>\n (description.current = element);\n\n const data = useFloating({\n open: isOpen,\n onOpenChange: (open) => {\n onOpenChange?.(open);\n setOpen(open);\n },\n placement,\n whileElementsMounted: autoUpdate,\n middleware: [\n offset(16),\n flip(),\n shift({ padding: 16 }),\n arrow({ element: arrowElement, padding: 8 }),\n ],\n });\n\n const role = useRole(data.context, { role: \"tooltip\" });\n const dismiss = useDismiss(data.context);\n const click = useClick(data.context, {\n enabled: triggerOn === \"click\",\n });\n const hover = useHover(data.context, {\n enabled: triggerOn === \"hover\",\n delay: isOpen ? 0 : delay,\n });\n const focus = useFocus(data.context, {\n enabled: triggerOn === \"hover\",\n });\n\n const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n return {\n triggerOn,\n isOpen,\n setOpen,\n arrowElement,\n ...data,\n refs: {\n ...data.refs,\n description,\n setDescription,\n },\n ...interactions,\n };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> \| null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n const context = useContext(tooltipContext);\n\n if (context === null) {\n throw new Error(\n \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n );\n }\n\n return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n children,\n ...options\n}) => {\n const tooltip = useTooltip(options);\n\n return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","context","useContext","Error","Tooltip","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value"],"mappings":"iUA+BA,MA6DMA,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KACvBC,MAAAA,EAAUC,EAAWN,GAE3B,GAAgB,OAAZK,EACA,MAAM,IAAIE,MACN,0DAIDF,OAAAA,CAAAA,EAGEG,EAA2C,EACpDC,SAAAA,KACGC,MAEGC,MAAAA,EAjFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEM,MAACC,EAAQC,GAAWC,EAASP,GAC7BQ,EAAeC,EAAsB,MACrCC,EAAcD,EAA2B,MAIzCE,EAAOC,EAAY,CACrBC,KAAMR,EACND,aAAeS,IACX,MAAAT,GAAAA,EAAeS,GACfP,EAAQO,EAAI,EAEhBZ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CACRC,EAAO,IACPC,IACAC,EAAM,CAAEC,QAAS,KACjBC,EAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAQb,EAAKlB,QAAS,CAAE8B,KAAM,YACrCE,EAAUC,EAAWf,EAAKlB,SAC1BkC,EAAQC,EAASjB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAEP2B,EAAQC,EAASpB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,EACTD,MAAOG,EAAS,EAAIH,IAElB8B,EAAQC,EAAStB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAGP+B,EAAeC,EAAgB,CAACV,EAASO,EAAOT,EAAMI,EAAOG,IAE5D,MAAA,CACH3B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACHyB,KAAM,IACCzB,EAAKyB,KACR1B,YAAAA,EACA2B,eA3CgBf,GACnBZ,EAAY4B,QAAUhB,MA4CpBY,EAAA,EA0BSK,CAAWzC,GAEnB,OAAA0C,EAAAlD,EAAA,CAAgBmD,MAAO1C,EAAUF,SAAAA,GAAS"}

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

@@ -1,4 +1,5 @@
-export { Tooltip, type TooltipPlacement, type TooltipProps, } from './Tooltip.js';
+export { Tooltip } from './Tooltip.js';
 export { TooltipContent } from './TooltipContent.js';
 export { TooltipTrigger } from './TooltipTrigger.js';
-export { PopupTip, type PopupTipProps } from './PopupTip.js';
+export { PopupTip } from './PopupTip.js';
+export type { TooltipPlacement, TooltipProps, PopupTipProps } from './types.js';