npm - @fremtind/jokul - Versions diffs - 0.28.1 → 0.30.0 - Mend

@fremtind/jokul 0.28.1 → 0.30.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 (279) hide show

package/build/cjs/components/breadcrumb/index.d.cts CHANGED Viewed

@@ -1,4 +1,2 @@
-export type { BreadcrumbProps } from './Breadcrumb.cjs';
-export { Breadcrumb } from './Breadcrumb.cjs';
-export type { BreadcrumbItemProps } from './BreadcrumbItem.cjs';
-export { BreadcrumbItem } from './BreadcrumbItem.cjs';
+export { Breadcrumb, type BreadcrumbProps } from './Breadcrumb.cjs';
+export { BreadcrumbItem, type BreadcrumbItemProps } from './BreadcrumbItem.cjs';

package/build/cjs/components/button/index.d.cts CHANGED Viewed

@@ -1,2 +1,2 @@
 export { Button, PrimaryButton, SecondaryButton, TertiaryButton, } from './Button.cjs';
-export type { ButtonProps, ButtonVariant } from './types.cjs';
+export type { ButtonProps, ButtonVariant, IconOptions, IconPosition, } from './types.cjs';

package/build/cjs/components/button/types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.cjs","sources":["../../../../src/components/button/types.ts"],"sourcesContent":["import { Density } from \"../../core/types.js\";\nimport { PolymorphicPropsWithRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport const buttonVariants = [\n \"primary\",\n \"secondary\",\n \"tertiary\",\n \"ghost\",\n] as const;\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type IconPosition = \"left\" \| \"right\";\n\~~ntype~~ IconOptions<T extends React.ElementType> =\n // Hvis ikke knappen har ikon, MÅ den ha children:\n \| {\n iconPosition?: never;\n icon?: never;\n children: React.ComponentPropsWithoutRef<T>[\"children\"];\n }\n \| {\n /*\n Plasseringen av ikonet\n * @default \"left\"\n /\n iconPosition?: IconPosition;\n /\n Hvilket ikon som skal vises i knappen\n /\n icon: React.ReactElement;\n };\n\nexport type ButtonProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<\n ElementType,\n {\n density?: Density;\n /\n Hvilken variant av knappen skal vises\n * @default \"secondary\"\n /\n variant?: ButtonVariant;\n className?: string;\n loader?: {\n showLoader: boolean;\n textDescription: string;\n };\n /\n @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"left\"`\n /\n iconLeft?: React.ReactNode;\n /\n @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"right\"`\n */\n iconRight?: React.ReactNode;\n } & IconOptions<ElementType>\n >;\n\nexport type ButtonComponent = <\n ElementType extends React.ElementType = \"button\",\n>(\n props: ButtonProps<ElementType>,\n) => React.ReactElement \| null;\n"],"names":[],"mappings":"uGAG8B,CAC1B,UACA,YACA,WACA"}
1	+ {"version":3,"file":"types.cjs","sources":["../../../../src/components/button/types.ts"],"sourcesContent":["import { Density } from \"../../core/types.js\";\nimport { PolymorphicPropsWithRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport const buttonVariants = [\n \"primary\",\n \"secondary\",\n \"tertiary\",\n \"ghost\",\n] as const;\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type IconPosition = \"left\" \| \"right\";\n\nexport type IconOptions<T extends React.ElementType> =\n // Hvis ikke knappen har ikon, MÅ den ha children:\n \| {\n iconPosition?: never;\n icon?: never;\n children: React.ComponentPropsWithoutRef<T>[\"children\"];\n }\n \| {\n /*\n Plasseringen av ikonet\n * @default \"left\"\n /\n iconPosition?: IconPosition;\n /\n Hvilket ikon som skal vises i knappen\n /\n icon: React.ReactElement;\n };\n\nexport type ButtonProps<ElementType extends React.ElementType> =\n PolymorphicPropsWithRef<\n ElementType,\n {\n density?: Density;\n /\n Hvilken variant av knappen skal vises\n * @default \"secondary\"\n /\n variant?: ButtonVariant;\n className?: string;\n loader?: {\n showLoader: boolean;\n textDescription: string;\n };\n /\n @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"left\"`\n /\n iconLeft?: React.ReactNode;\n /\n @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"right\"`\n */\n iconRight?: React.ReactNode;\n } & IconOptions<ElementType>\n >;\n\nexport type ButtonComponent = <\n ElementType extends React.ElementType = \"button\",\n>(\n props: ButtonProps<ElementType>,\n) => React.ReactElement \| null;\n"],"names":[],"mappings":"uGAG8B,CAC1B,UACA,YACA,WACA"}

package/build/cjs/components/button/types.d.cts CHANGED Viewed

@@ -3,7 +3,7 @@ import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphi
 export declare const buttonVariants: readonly ["primary", "secondary", "tertiary", "ghost"];
 export type ButtonVariant = (typeof buttonVariants)[number];
 export type IconPosition = "left" | "right";
-type IconOptions<T extends React.ElementType> = {
+export type IconOptions<T extends React.ElementType> = {
     iconPosition?: never;
     icon?: never;
     children: React.ComponentPropsWithoutRef<T>["children"];
@@ -40,4 +40,3 @@ export type ButtonProps<ElementType extends React.ElementType> = PolymorphicProp
     iconRight?: React.ReactNode;
 } & IconOptions<ElementType>>;
 export type ButtonComponent = <ElementType extends React.ElementType = "button">(props: ButtonProps<ElementType>) => React.ReactElement | null;
-export {};

package/build/cjs/components/card/NavCard.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavCard.cjs","sources":["../../../../src/components/card/NavCard.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { AnchorHTMLAttributes, ElementType, FC } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { Image, ImageProps } from \"../image/Image.js\";\nimport {\n ErrorTag,\n InfoTag,\n SuccessTag,\n Tag,\n TagProps,\n WarningTag,\n} from \"../tag/Tag.js\";\nimport { PaddingOptions } from \"./types.js\";\nimport { getPaddingStyles } from \"./utils.js\";\n\~~nexport type TagType = \"success\" \| \"warning\" \| \"info\" \| \"error\";\~~n\n/*\n Bruk denne komponenten for å legge til ekstra informasjon i NavCard.\n * Innholdet blir rendret med skillelinje, og tekststil \"small\"\n /\nexport const InfoBlock: FC<WithChildren> = ({ children }) => (\n <div className=\"jkl-nav-card__info\">{children}</div>\n);\n\~~ninterface CardTag {\n /\n @default <none> Rendres som nøytral tag\n /\n type?: TagType;\n text: string;\n}\n\~~nexport interface NavCardProps\n extends PaddingOptions,\n AnchorHTMLAttributes<HTMLAnchorElement> {\n tag?: CardTag \| Array<CardTag>;\n title: string;\n href?: string;\n to?: string;\n external?: boolean;\n description?: string;\n image?: Omit<ImageProps, \"className\">;\n className?: string;\n /\n Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.\n * @default \"a\"\n */\n component?: ElementType;\n density?: Density;\n}\n\nconst getTag = (type?: TagType) => {\n switch (type) {\n case \"info\":\n return InfoTag;\n case \"success\":\n return SuccessTag;\n case \"warning\":\n return WarningTag;\n case \"error\":\n return ErrorTag;\n default:\n return Tag;\n }\n};\nconst NavCardTag = ({\n text,\n type,\n density,\n}: CardTag & Pick<TagProps, \"density\">) => {\n const CardTag = getTag(type);\n return <CardTag density={density}>{text}</CardTag>;\n};\n\nexport const NavCard: FC<NavCardProps> = React.forwardRef<\n HTMLAnchorElement,\n NavCardProps\n>((props, ref) => {\n const {\n component = \"a\",\n padding = \"l\",\n image,\n tag,\n title,\n external,\n description,\n children,\n className,\n density,\n ...rest\n } = props;\n\n const Component = component;\n\n const tagArr = !tag ? undefined : Array.isArray(tag) ? tag : [tag];\n\n return (\n <Component\n ref={ref}\n aria-label={title}\n className={clsx(\"jkl-nav-card\", className)}\n data-density={density}\n {...rest}\n >\n {image && <Image className=\"jkl-nav-card__image\" {...image} />}\n <div\n className=\"jkl-nav-card__content\"\n style={getPaddingStyles(padding)}\n >\n {tagArr && (\n <div className=\"jkl-nav-card__tag-wrapper\">\n {tagArr.map((t, index) => (\n <NavCardTag\n type={t.type}\n text={t.text}\n key={index}\n />\n ))}\n </div>\n )}\n <div>\n <p\n className={clsx(\n \"jkl-nav-card__link\",\n external ? \"jkl-nav-card__link--external\" : \"\",\n )}\n >\n {title}\n </p>\n {description && (\n <p className=\"jkl-nav-card__description jkl-spacing-xs--top\">\n {description}\n </p>\n )}\n </div>\n {children}\n </div>\n </Component>\n );\n});\n\nNavCard.displayName = \"NavCard\";\n"],"names":["NavCardTag","text","type","density","CardTag","InfoTag","SuccessTag","WarningTag","ErrorTag","Tag","getTag","~~jsx","~~children","NavCard","React","forwardRef","props","ref","component","padding","image","tag","title","external","description","className","rest","Component","tagArr","Array","isArray","jsxs","clsx","Image","style","getPaddingStyles","map","t","index","displayName"],"mappings":"~~qQAkEMA~~,EAAa,EACfC,KAAAA,EACAC,KAAAA,EACAC,QAAAA,~~MAEM~~,~~MAAAC~~,EAnBMF,KACZ,OAAQA,GACJ,IAAK,OACM,OAAAG,UACX,IAAK,UACM,OAAAC,aACX,IAAK,UACM,OAAAC,aACX,IAAK,QACM,OAAAC,WACX,QACW,OAAAC,MACf,EAOgBC,CAAOR,~~GAChB~~,~~OAAAS~~,EAAAA,~~IAACP~~,~~EAAQ~~,~~CAAAD~~,QAAAA,~~EAAmBS~~,~~SAAKX~~,GAAA,EAG/BY,EAA4BC,EAAMC,YAG7C,CAACC,EAAOC,KACA,MACFC,UAAAA,EAAY,IACZC,QAAAA,EAAU,IACVC,MAAAA,EACAC,IAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,YAAAA,EACAZ,SAAAA,EACAa,UAAAA,~~EACAtB~~,QAAAA,~~KACGuB~~,GACHV,EAEEW,EAAYT,EAEZU,EAAUP,EAAkBQ,MAAMC,QAAQT,GAAOA,EAAM,CAACA,QAAxC,EAGlB,OAAAU,EAAAA,KAACJ,EAAA,CACGV,IAAAA,EACA,aAAYK,EACZG,UAAWO,EAAAA,KAAK,eAAgBP,GAChC,~~eAActB~~,~~KACVuB~~,EAEHd,SAAA,CAAAQ,~~GAAUT~~,EAAAA,~~IAAAsB~~,QAAA,~~CAAMR~~,UAAU,yBAA0BL,IACrDW,EAAAA,KAAC,MAAA,CACGN,UAAU,~~wBACVS~~,MAAOC,~~mBAAiBhB~~,GAEvBP,SAAA,CACGgB,~~GAAAjB~~,EAAAA,IAAC,~~OAAIc~~,UAAU,4BACVb,~~WAAOwB~~,KAAI,CAACC,EAAGC,~~IACZ3B~~,EAAAA,~~IAACX~~,EAAA,CACGE,KAAMmC,EAAEnC,KACRD,KAAMoC,EAAEpC,MACHqC,cAKpB,MACG,~~CAAA1B~~,SAAA,~~CAAAD~~,EAAAA,IAAC,IAAA,~~CACGc~~,UAAWO,EAAAA,KACP,qBACAT,EAAW,+BAAiC,IAG/CX,SAAAU,IAEJE,~~GACGb~~,EAAAA,IAAC,IAAE,~~CAAAc~~,UAAU,gDACRb,SACLY,OAGPZ,OACL,IAKZC,~~EAAQ0B~~,YAAc,~~4BAzHqB~~,~~EAAG3B~~,SAAAA,~~KACzCD~~,EAAAA,IAAA,MAAA,~~CAAIc~~,UAAU,qBAAsBb,SAAAA"}
1	+ {"version":3,"file":"NavCard.cjs","sources":["../../../../src/components/card/NavCard.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { AnchorHTMLAttributes, ElementType, FC } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { Image, ImageProps } from \"../image/Image.js\";\nimport {\n ErrorTag,\n InfoTag,\n SuccessTag,\n Tag,\n TagProps,\n WarningTag,\n} from \"../tag/Tag.js\";\nimport { CardTag, PaddingOptions, TagType } from \"./types.js\";\nimport { getPaddingStyles } from \"./utils.js\";\n\n/*\n Bruk denne komponenten for å legge til ekstra informasjon i NavCard.\n * Innholdet blir rendret med skillelinje, og tekststil \"small\"\n /\nexport const InfoBlock: FC<WithChildren> = ({ children }) => (\n <div className=\"jkl-nav-card__info\">{children}</div>\n);\n\nexport interface NavCardProps\n extends PaddingOptions,\n AnchorHTMLAttributes<HTMLAnchorElement> {\n tag?: CardTag \| Array<CardTag>;\n title: string;\n href?: string;\n to?: string;\n external?: boolean;\n description?: string;\n image?: Omit<ImageProps, \"className\">;\n className?: string;\n /\n Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.\n * @default \"a\"\n */\n component?: ElementType;\n density?: Density;\n}\n\nconst getTag = (type?: TagType) => {\n switch (type) {\n case \"info\":\n return InfoTag;\n case \"success\":\n return SuccessTag;\n case \"warning\":\n return WarningTag;\n case \"error\":\n return ErrorTag;\n default:\n return Tag;\n }\n};\nconst NavCardTag = ({\n text,\n type,\n density,\n}: CardTag & Pick<TagProps, \"density\">) => {\n const CardTag = getTag(type);\n return <CardTag density={density}>{text}</CardTag>;\n};\n\nexport const NavCard: FC<NavCardProps> = React.forwardRef<\n HTMLAnchorElement,\n NavCardProps\n>((props, ref) => {\n const {\n component = \"a\",\n padding = \"l\",\n image,\n tag,\n title,\n external,\n description,\n children,\n className,\n density,\n ...rest\n } = props;\n\n const Component = component;\n\n const tagArr = !tag ? undefined : Array.isArray(tag) ? tag : [tag];\n\n return (\n <Component\n ref={ref}\n aria-label={title}\n className={clsx(\"jkl-nav-card\", className)}\n data-density={density}\n {...rest}\n >\n {image && <Image className=\"jkl-nav-card__image\" {...image} />}\n <div\n className=\"jkl-nav-card__content\"\n style={getPaddingStyles(padding)}\n >\n {tagArr && (\n <div className=\"jkl-nav-card__tag-wrapper\">\n {tagArr.map((t, index) => (\n <NavCardTag\n type={t.type}\n text={t.text}\n key={index}\n />\n ))}\n </div>\n )}\n <div>\n <p\n className={clsx(\n \"jkl-nav-card__link\",\n external ? \"jkl-nav-card__link--external\" : \"\",\n )}\n >\n {title}\n </p>\n {description && (\n <p className=\"jkl-nav-card__description jkl-spacing-xs--top\">\n {description}\n </p>\n )}\n </div>\n {children}\n </div>\n </Component>\n );\n});\n\nNavCard.displayName = \"NavCard\";\n"],"names":["NavCardTag","text","type","density","CardTag","InfoTag","SuccessTag","WarningTag","ErrorTag","Tag","getTag","children","NavCard","React","forwardRef","props","ref","component","padding","image","tag","title","external","description","className","rest","Component","tagArr","Array","isArray","jsxs","clsx","jsx","Image","style","getPaddingStyles","map","t","index","displayName"],"mappings":"qQAwDMA,EAAa,EACfC,KAAAA,EACAC,KAAAA,EACAC,QAAAA,MAEMC,MAAAA,EAnBMF,KACZ,OAAQA,GACJ,IAAK,OACM,OAAAG,UACX,IAAK,UACM,OAAAC,aACX,IAAK,UACM,OAAAC,aACX,IAAK,QACM,OAAAC,WACX,QACW,OAAAC,MACf,EAOgBC,CAAOR,GACvB,OAAQE,EAAAA,IAAAA,EAAA,CAAQD,QAAAA,EAAmBQ,SAAKV,GAAA,EAG/BW,EAA4BC,EAAMC,YAG7C,CAACC,EAAOC,KACA,MACFC,UAAAA,EAAY,IACZC,QAAAA,EAAU,IACVC,MAAAA,EACAC,IAAAA,EACAC,MAAAA,EACAC,SAAAA,EACAC,YAAAA,EACAZ,SAAAA,EACAa,UAAAA,EACArB,QAAAA,KACGsB,GACHV,EAEEW,EAAYT,EAEZU,EAAUP,EAAkBQ,MAAMC,QAAQT,GAAOA,EAAM,CAACA,QAAxC,EAGlB,OAAAU,EAAAA,KAACJ,EAAA,CACGV,IAAAA,EACA,aAAYK,EACZG,UAAWO,EAAAA,KAAK,eAAgBP,GAChC,eAAcrB,KACVsB,EAEHd,SAAA,CAAAQ,GAAUa,EAAAA,IAAAC,QAAA,CAAMT,UAAU,yBAA0BL,IACrDW,EAAAA,KAAC,MAAA,CACGN,UAAU,wBACVU,MAAOC,mBAAiBjB,GAEvBP,SAAA,CACGgB,GAAAK,EAAAA,IAAC,OAAIR,UAAU,4BACVb,WAAOyB,KAAI,CAACC,EAAGC,IACZN,EAAAA,IAAChC,EAAA,CACGE,KAAMmC,EAAEnC,KACRD,KAAMoC,EAAEpC,MACHqC,cAKpB,MACG,CAAA3B,SAAA,CAAAqB,EAAAA,IAAC,IAAA,CACGR,UAAWO,EAAAA,KACP,qBACAT,EAAW,+BAAiC,IAG/CX,SAAAU,IAEJE,GACGS,EAAAA,IAAC,IAAE,CAAAR,UAAU,gDACRb,SACLY,OAGPZ,OACL,IAKZC,EAAQ2B,YAAc,4BAjHqB,EAAG5B,SAAAA,KACzCqB,EAAAA,IAAA,MAAA,CAAIR,UAAU,qBAAsBb,SAAAA"}

package/build/cjs/components/card/NavCard.d.cts CHANGED Viewed

@@ -1,20 +1,12 @@
 import { AnchorHTMLAttributes, ElementType, FC } from 'react';
 import { Density, WithChildren } from '../../core/types.cjs';
 import { ImageProps } from '../image/Image.cjs';
-import { PaddingOptions } from './types.cjs';
-export type TagType = "success" | "warning" | "info" | "error";
+import { CardTag, PaddingOptions } from './types.cjs';
 /**
  * Bruk denne komponenten for å legge til ekstra informasjon i NavCard.
  * Innholdet blir rendret med skillelinje, og tekststil "small"
  */
 export declare const InfoBlock: FC<WithChildren>;
-interface CardTag {
-    /**
-     * @default <none> Rendres som nøytral tag
-     */
-    type?: TagType;
-    text: string;
-}
 export interface NavCardProps extends PaddingOptions, AnchorHTMLAttributes<HTMLAnchorElement> {
     tag?: CardTag | Array<CardTag>;
     title: string;
@@ -32,4 +24,3 @@ export interface NavCardProps extends PaddingOptions, AnchorHTMLAttributes<HTMLA
     density?: Density;
 }
 export declare const NavCard: FC<NavCardProps>;
-export {};

package/build/cjs/components/card/index.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
-export { Card } from './Card.cjs';
-export { CardImage } from './CardImage.cjs';
+export { Card, type CardProps, type CardPadding, type CardVariant, } from './Card.cjs';
+export { CardImage, type CardImageProps } from './CardImage.cjs';
 export { NavCard, InfoBlock, type NavCardProps } from './NavCard.cjs';
 export { TaskCard, type TaskCardProps } from './TaskCard.cjs';
 export { InfoCard, type InfoCardProps } from './InfoCard.cjs';

package/build/cjs/components/card/types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.cjs","sources":["../../../../src/components/card/types.ts"],"sourcesContent":["export const SPACING_STEPS = [\n \"0\",\n \"m\",\n \"l\",\n \"xl\",\n \"2xl\",\n \"3xl\",\n \"4xl\",\n] as const;\ntype SpacingSteps = typeof SPACING_STEPS;\nexport const NEW_SPACING_STEPS = [\n \"0\",\n \"16\",\n \"24\",\n \"40\",\n \"64\",\n \"104\",\n \"168\",\n] as const;\ntype NewSpacingSteps = typeof NEW_SPACING_STEPS;\nexport type BasePadding =\n \| SpacingSteps[0 \| 1 \| 2 \| 3]\n \| NewSpacingSteps[0 \| 1 \| 2 \| 3];\nexport type OldSpacingStep = SpacingSteps[number];\nexport type NewSpacingStep = NewSpacingSteps[number];\nexport type SpacingStep = SpacingSteps[number] \| NewSpacingSteps[number];\n\nexport function isOldSpacingStep(value: SpacingStep): value is OldSpacingStep {\n return SPACING_STEPS.includes(value as OldSpacingStep);\n}\n\nexport interface PaddingShorthand {\n /*\n Legger til ekstra rom i toppen av kortet, fra spacing-skalaen til Jøkul.\n * Ikke bruk ekstra topPadding sammen med tag. Verdier lavere enn for venstre og høyre padding\n * blir ignorert.\n * @default \"24\"\n /\n top?: SpacingStep;\n /\n Bruk stegene fra spacing-skalaen til Jøkul.\n * Hvis left og right har forskjellige verdier brukes den største for begge.\n * @default \"24\"\n /\n right?: BasePadding;\n /\n Legger til ekstra rom i bunnen av kortet, fra spacing-skalaen til Jøkul.\n * Verdier lavere enn for venstre og høyre padding blir ignorert.\n * @default \"24\"\n /\n bottom?: SpacingStep;\n /\n Bruk stegene fra spacing-skalaen til Jøkul.\n * Hvis left og right har forskjellige verdier brukes den største for begge.\n * @default \"24\"\n /\n left?: BasePadding;\n}\n\nexport interface PaddingOptions {\n /\n Hvor mye rom skal det være rundt innholdet i kortet?\n * @default \"24\"\n */\n padding?: BasePadding \| PaddingShorthand;\n}\n"],"names":["SPACING_STEPS","value","includes"],"mappings":"gFAAO,MAAMA,EAAgB,CACzB,IACA,IACA,IACA,KACA,MACA,MACA,iCAG6B,CAC7B,IACA,KACA,KACA,KACA,KACA,MACA,wDAUG,SAA0BC,GACtB,OAAAD,EAAcE,SAASD,EAClC"}
1	+ {"version":3,"file":"types.cjs","sources":["../../../../src/components/card/types.ts"],"sourcesContent":["export const SPACING_STEPS = [\n \"0\",\n \"m\",\n \"l\",\n \"xl\",\n \"2xl\",\n \"3xl\",\n \"4xl\",\n] as const;\ntype SpacingSteps = typeof SPACING_STEPS;\nexport const NEW_SPACING_STEPS = [\n \"0\",\n \"16\",\n \"24\",\n \"40\",\n \"64\",\n \"104\",\n \"168\",\n] as const;\ntype NewSpacingSteps = typeof NEW_SPACING_STEPS;\nexport type BasePadding =\n \| SpacingSteps[0 \| 1 \| 2 \| 3]\n \| NewSpacingSteps[0 \| 1 \| 2 \| 3];\nexport type OldSpacingStep = SpacingSteps[number];\nexport type NewSpacingStep = NewSpacingSteps[number];\nexport type SpacingStep = SpacingSteps[number] \| NewSpacingSteps[number];\n\nexport function isOldSpacingStep(value: SpacingStep): value is OldSpacingStep {\n return SPACING_STEPS.includes(value as OldSpacingStep);\n}\n\nexport interface PaddingShorthand {\n /*\n Legger til ekstra rom i toppen av kortet, fra spacing-skalaen til Jøkul.\n * Ikke bruk ekstra topPadding sammen med tag. Verdier lavere enn for venstre og høyre padding\n * blir ignorert.\n * @default \"24\"\n /\n top?: SpacingStep;\n /\n Bruk stegene fra spacing-skalaen til Jøkul.\n * Hvis left og right har forskjellige verdier brukes den største for begge.\n * @default \"24\"\n /\n right?: BasePadding;\n /\n Legger til ekstra rom i bunnen av kortet, fra spacing-skalaen til Jøkul.\n * Verdier lavere enn for venstre og høyre padding blir ignorert.\n * @default \"24\"\n /\n bottom?: SpacingStep;\n /\n Bruk stegene fra spacing-skalaen til Jøkul.\n * Hvis left og right har forskjellige verdier brukes den største for begge.\n * @default \"24\"\n /\n left?: BasePadding;\n}\n\nexport interface PaddingOptions {\n /\n Hvor mye rom skal det være rundt innholdet i kortet?\n * @default \"24\"\n /\n padding?: BasePadding \| PaddingShorthand;\n}\n\nexport type TagType = \"success\" \| \"warning\" \| \"info\" \| \"error\";\n\nexport type CardTag = {\n /\n @default <none> Rendres som nøytral tag\n */\n type?: TagType;\n text: string;\n};\n"],"names":["SPACING_STEPS","value","includes"],"mappings":"gFAAO,MAAMA,EAAgB,CACzB,IACA,IACA,IACA,KACA,MACA,MACA,iCAG6B,CAC7B,IACA,KACA,KACA,KACA,KACA,MACA,wDAUG,SAA0BC,GACtB,OAAAD,EAAcE,SAASD,EAClC"}

package/build/cjs/components/card/types.d.cts CHANGED Viewed

@@ -41,4 +41,12 @@ export interface PaddingOptions {
      */
     padding?: BasePadding | PaddingShorthand;
 }
+export type TagType = "success" | "warning" | "info" | "error";
+export type CardTag = {
+    /**
+     * @default <none> Rendres som nøytral tag
+     */
+    type?: TagType;
+    text: string;
+};
 export {};

package/build/cjs/components/combobox/Combobox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n FC,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport { Tag } from \"../tag/Tag.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { TooltipContent } from \"../tooltip/TooltipContent.js\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger.js\";\n\nexport type ComboboxValuePair = ValuePair & {\n tagLabel?: string;\n isMarked?: boolean;\n};\n\nexport function getComboboxValuePair(\n item: string \| ComboboxValuePair,\n): ComboboxValuePair {\n return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\ninterface PartialChangeEvent\n extends Partial<Omit<ChangeEvent<HTMLElement>, \"target\">> {\n type: \"change\" \| \"blur\";\n target: {\n name: string;\n value: string;\n selectedOptions: Array<ValuePair>;\n };\n}\n\ntype ChangeEventHandler = (event: PartialChangeEvent) => void;\n\ninterface ComboboxProps extends InputGroupProps {\n id?: string;\n placeholder?: string;\n labelProps?: Omit<\n LabelProps,\n \"children\" \| \"density\" \| \"htmlFor\" \| \"standAlone\"\n >;\n items: Array<ValuePair>;\n noMatchingOption?: string;\n label: string;\n name: string;\n value?: Array<ValuePair>;\n density?: Density;\n width?: string;\n helpLabel?: string;\n errorLabel?: string;\n className?: string;\n invalid?: boolean;\n hasTagHover?: boolean;\n onChange: ChangeEventHandler;\n onBlur?: ChangeEventHandler;\n onFocus?: ChangeEventHandler;\n}\n\nexport const Combobox: FC<ComboboxProps> = ({\n id,\n placeholder,\n items,\n onChange,\n onFocus,\n onBlur,\n value,\n label,\n noMatchingOption,\n labelProps,\n helpLabel,\n errorLabel,\n width,\n density,\n name,\n className,\n invalid,\n hasTagHover,\n}) => {\n const listId = useId(id \|\| \"jkl-combobox\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const inputId = `${listId}_search-input`;\n\n const [selectedValue, setSelectedValue] = useState<\n Array<ComboboxValuePair>\n >(value \|\| []);\n const [isPointingDown, setIsPointingDown] = useState<boolean>(true);\n const [showMenu, setShowMenu] = useState<boolean>(false);\n const [searchValue, setSearchValue] = useState<string>(\"\");\n const [noResults, setNoResults] = useState(false);\n const [marked, setMarked] = useState<boolean>(false);\n\n const searchRef = useRef<HTMLInputElement>(null);\n const inputRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n\n useEffect(() => {\n setSearchValue(\"\");\n if (showMenu && searchRef.current) {\n searchRef.current.focus();\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelectedValue((prev) => value \|\| prev);\n }, [value]);\n\n // Funksjon for å stile valgt element\n const isSelected = (option: ValuePair) => {\n if (!selectedValue) {\n return false;\n } else {\n return selectedValue.some((value) => value.value === option.value);\n }\n };\n\n // Fjerne ett eller flere valg\n const removeOption = useCallback(\n (option: string) => {\n return selectedValue.filter((value) => value.value !== option);\n },\n [selectedValue],\n );\n\n const onTagRemove = useCallback(\n (\n e:\n \| React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>\n \| React.KeyboardEvent<HTMLInputElement>,\n option: string,\n ) => {\n let newValue = removeOption(option);\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n e.stopPropagation();\n\n if (newValue.length === 0) {\n setMarked(false);\n }\n },\n [removeOption, setSelectedValue, onChange, name, setMarked],\n );\n\n // Håndtere valgt verdi i listen\n const onItemClick = useCallback(\n (option: string) => {\n let newValue: Array<ValuePair>;\n\n if (selectedValue.some((value) => value.value === option)) {\n newValue = removeOption(option);\n } else {\n const item = items.find((i) => i.value === option);\n newValue = [...selectedValue, item as ValuePair];\n }\n searchRef.current?.focus();\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n },\n [selectedValue, setSelectedValue, onChange, name, removeOption, items],\n );\n\n // Funksjon for søk\n const onSearch = (e: {\n target: { value: React.SetStateAction<string> };\n }) => {\n searchRef.current?.focus();\n setShowMenu(true);\n setSearchValue(e.target.value);\n };\n\n const options = useMemo(() => {\n if (!searchValue) {\n return items;\n }\n\n const filteredOptions = items.filter(\n (option) =>\n option.label.toLowerCase().indexOf(searchValue.toLowerCase()) >=\n 0,\n );\n\n setNoResults(filteredOptions.length === 0);\n\n return filteredOptions;\n }, [searchValue, items]);\n\n // Det første elementet i listen skal være aktivt fram til brukeren klikker på noe annet\n const [activeDescendant, setActiveDescendant] = useState<\n string \| undefined\n >(options[0]?.value ? `${listId}-${options[0]?.value}` : undefined);\n\n // Håndtere arrow-state\n useEffect(() => {\n if (showMenu) {\n setIsPointingDown(false);\n } else {\n setIsPointingDown(true);\n }\n }, [showMenu]);\n\n // Lukk meny med ESC\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && showMenu) {\n setShowMenu(false);\n }\n };\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\" && showMenu) {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [setShowMenu, showMenu]);\n\n // Fokushåndtering\n const handleFocusPlacement = useCallback((isOpen: boolean) => {\n if (isOpen) {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }\n }, []);\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: {\n name,\n value: selectedValue?.[0].value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n }\n focusInsideRef.current = true;\n setShowMenu(true);\n }\n }, [onFocus, selectedValue, name]);\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(showMenu, {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n });\n\n useListNavigation({ ref: dropdownRef });\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n\n const handleBlur = useCallback(\n (\n e: FocusEvent<\n HTMLDivElement \| HTMLInputElement \| HTMLButtonElement\n >,\n ) => {\n const componentRootElement = componentRootElementRef.current;\n const nextFocusIsInsideComponent =\n componentRootElement &&\n componentRootElement.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n setSearchValue(\"\");\n\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: {\n name,\n value: selectedValue?.[0]?.value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n inputRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShowMenu(false);\n }\n },\n [onBlur, name, selectedValue],\n );\n\n const handleMouseOver = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n }, []);\n\n // Tastaturnavigasjon\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n const listElement = dropdownRef.current;\n if (listElement) {\n listElement\n .querySelector<HTMLButtonElement>('[role=\"option\"]')\n ?.focus();\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShowMenu(false);\n }\n\n if ((e.metaKey && e.key === \"a\") \|\| (e.ctrlKey && e.key === \"a\")) {\n e.preventDefault();\n e.stopPropagation();\n const updatedSelectedValue = selectedValue.map((item) => ({\n ...item,\n isMarked: true,\n }));\n setMarked(true);\n setSelectedValue(updatedSelectedValue);\n } else if (e.key === \"Backspace\") {\n e.stopPropagation();\n setMarked(false);\n\n // Sjekk om selectedValue er markert\n const selectedValueIsMarked = selectedValue.some(\n (item) => item.isMarked,\n );\n\n if (selectedValueIsMarked) {\n const updatedSelectedValue = selectedValue.filter(\n (item) => !item.isMarked,\n );\n setSelectedValue(updatedSelectedValue);\n setSearchValue(\"\");\n } else if (selectedValue.length > 0 && searchValue === \"\") {\n // Hvis ingen items er markert, fjern siste valgte item\n onTagRemove(\n e,\n selectedValue[selectedValue.length - 1].value,\n );\n }\n }\n },\n [selectedValue, searchValue, dropdownRef, onTagRemove],\n );\n\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n if (searchRef.current) {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey) {\n searchRef.current.focus();\n } else {\n setShowMenu(false);\n searchRef.current.focus();\n }\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchRef.current\n ) {\n searchRef.current.focus();\n }\n }\n }\n },\n [setShowMenu, dropdownRef],\n );\n\n const hasSelection = selectedValue.length >= 1;\n\n return (\n <InputGroup\n label={label}\n id={inputId}\n ref={componentRootElementRef}\n data-testid=\"jkl-combobox\"\n className={clsx(\"jkl-combobox\", className, {\n \"jkl-combobox--invalid\": !!errorLabel \|\| invalid,\n \"jkl-combobox--menu-open\": showMenu,\n \"jkl-combobox--menu-closed\": !showMenu && hasSelection,\n })}\n labelProps={{\n id: labelId,\n ...labelProps,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n density={density}\n render={(inputProps) => (\n <div\n className={clsx(\"jkl-combobox__wrapper\", {\n \"jkl-combobox__wrapper--active-value\": hasSelection,\n })}\n style={{ width }}\n tabIndex={-1}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n <div\n className=\"jkl-combobox__tags\"\n data-testid=\"jkl-combobox__tags\"\n >\n {selectedValue\n .map(getComboboxValuePair)\n .map((option) => (\n <Tag\n key={option.value}\n className={`jkl-tag ${\n marked && \"jkl-tag__marked\"\n }`}\n data-testid=\"jkl-tag\"\n dismissAction={{\n onClick: (e) => {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n onTagRemove(e, option.value);\n },\n onBlur: handleBlur,\n label: `Fjern ${option.value}`,\n }}\n >\n {hasTagHover ? (\n <Tooltip key={option.value}>\n <TooltipTrigger>\n {\" \"}\n <span\n aria-hidden=\"true\"\n data-testid=\"jkl-tag__content\"\n >\n {option.tagLabel\n ? option.tagLabel\n : option.label}\n </span>\n </TooltipTrigger>\n <TooltipContent>\n {option.label}\n </TooltipContent>\n </Tooltip>\n ) : (\n <span\n aria-hidden=\"true\"\n data-testid=\"jkl-tag__content\"\n >\n {option.tagLabel\n ? option.tagLabel\n : option.label}\n </span>\n )}\n </Tag>\n ))}\n <input\n {...inputProps}\n className=\"jkl-combobox__search-input\"\n onChange={onSearch}\n data-testid=\"jkl-combobox__search-input\"\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleSearchOnKeyDown}\n value={searchValue}\n ref={searchRef}\n aria-controls={listId}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={showMenu}\n placeholder={\n selectedValue.length > 0 ? \"\" : placeholder\n }\n autoComplete=\"off\"\n />\n </div>\n\n <div\n className=\"jkl-combobox__menu\"\n role=\"listbox\"\n ref={dropdownRef}\n id={listId}\n aria-labelledby={labelId}\n aria-multiselectable=\"true\"\n aria-activedescendant={activeDescendant}\n onFocus={handleFocus}\n onBlur={handleBlur}\n tabIndex={-1}\n >\n {options.map((option, i) => (\n <button\n key={`${listId}-${option.value}`}\n type=\"button\"\n id={`${listId}__${option.value}`}\n aria-selected={isSelected(option)}\n role=\"option\"\n value={option.value}\n onBlur={handleBlur}\n className={`jkl-combobox__option ${\n isSelected(option) &&\n \"jkl-combobox__option--selected\"\n }`}\n data-testid=\"jkl-combobox__option\"\n data-testautoid={`jkl-combobox__option-${i}`}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n setActiveDescendant(\n `${listId}__${option.value}`,\n ); // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#required_javascript_features\n e.stopPropagation();\n onItemClick(option.value);\n setSearchValue(\"\");\n }}\n onMouseOver={handleMouseOver}\n >\n {option.description ? (\n <span>\n {option.label}\n <span className=\"jkl-combobox__option-description\">\n {option.description}\n </span>\n </span>\n ) : (\n option.label\n )}\n {isSelected(option) ? (\n <span>\n <CheckIcon />{\" \"}\n </span>\n ) : null}\n </button>\n ))}\n {noResults && (\n <div className=\"jkl-combobox__no-option\">\n {noMatchingOption}\n </div>\n )}\n </div>\n <div className=\"jkl-combobox__actions\">\n <IconButton\n id={buttonId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className=\"jkl-combobox__button\"\n data-testid=\"jkl-combobox__button\"\n aria-label={`${\n selectedValue.map((value) => value.label) \|\|\n \"Velg\"\n },${label}`}\n aria-expanded={showMenu}\n aria-controls={listId}\n role=\"button\"\n onClick={() => setShowMenu(true)}\n onMouseDown={(e) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n >\n <ArrowVerticalAnimated\n pointingDown={isPointingDown}\n />\n </IconButton>\n </div>\n </div>\n )}\n />\n );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","density","name","className","invalid","hasTagHover","listId","useId","generateSuffix","labelId","buttonId","inputId","selectedValue","setSelectedValue","useState","isPointingDown","setIsPointingDown","showMenu","setShowMenu","searchValue","setSearchValue","noResults","setNoResults","marked","setMarked","searchRef","useRef","inputRef","focusInsideRef","useEffect","current","focus","prev","isSelected","option","some","removeOption","useCallback","filter","onTagRemove","e","newValue","type","target","selectedOptions","stopPropagation","length","onItemClick","find","i","_a","onSearch","options","useMemo","filteredOptions","toLowerCase","indexOf","activeDescendant","setActiveDescendant","_b","handleEscape","key","window","addEventListener","removeEventListener","handleFocusPlacement","isOpen","handleFocus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","ref","componentRootElementRef","handleBlur","componentRootElement","contains","relatedTarget","dispatchEvent","Event","bubbles","handleMouseOver","preventScroll","handleSearchOnKeyDown","preventDefault","listElement","querySelector","metaKey","ctrlKey","updatedSelectedValue","map","isMarked","handleOptionOnKeyDown","shiftKey","firstVisible","currentTarget","hasSelection","jsx","InputGroup","clsx","render","inputProps","jsxs","style","tabIndex","children","Tag","dismissAction","onClick","Tooltip","TooltipTrigger","tagLabel","TooltipContent","onKeyDown","role","autoComplete","onMouseOver","description","CheckIcon","IconButton","onMouseDown","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"Combobox.cjs","sources":["../../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n ChangeEvent,\n FC,\n FocusEvent,\n KeyboardEvent,\n MouseEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useAnimatedHeight } from \"../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useListNavigation } from \"../../hooks/useListNavigation/useListNavigation.js\";\nimport { ValuePair } from \"../../utilities/valuePair.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { CheckIcon } from \"../icon/icons/CheckIcon.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { InputGroup, InputGroupProps } from \"../input-group/InputGroup.js\";\nimport { LabelProps } from \"../input-group/Label.js\";\nimport { Tag } from \"../tag/Tag.js\";\nimport { Tooltip } from \"../tooltip/Tooltip.js\";\nimport { TooltipContent } from \"../tooltip/TooltipContent.js\";\nimport { TooltipTrigger } from \"../tooltip/TooltipTrigger.js\";\n\nexport type ComboboxValuePair = ValuePair & {\n tagLabel?: string;\n isMarked?: boolean;\n};\n\nexport function getComboboxValuePair(\n item: string \| ComboboxValuePair,\n): ComboboxValuePair {\n return typeof item === \"string\" ? { value: item, label: item } : item;\n}\n\nexport interface ComboboxPartialChangeEvent\n extends Partial<Omit<ChangeEvent<HTMLElement>, \"target\">> {\n type: \"change\" \| \"blur\";\n target: {\n name: string;\n value: string;\n selectedOptions: Array<ValuePair>;\n };\n}\n\nexport type ComboboxChangeEventHandler = (\n event: ComboboxPartialChangeEvent,\n) => void;\n\nexport interface ComboboxProps extends InputGroupProps {\n id?: string;\n placeholder?: string;\n labelProps?: Omit<\n LabelProps,\n \"children\" \| \"density\" \| \"htmlFor\" \| \"standAlone\"\n >;\n items: Array<ValuePair>;\n noMatchingOption?: string;\n label: string;\n name: string;\n value?: Array<ValuePair>;\n density?: Density;\n width?: string;\n helpLabel?: string;\n errorLabel?: string;\n className?: string;\n invalid?: boolean;\n hasTagHover?: boolean;\n onChange: ComboboxChangeEventHandler;\n onBlur?: ComboboxChangeEventHandler;\n onFocus?: ComboboxChangeEventHandler;\n}\n\nexport const Combobox: FC<ComboboxProps> = ({\n id,\n placeholder,\n items,\n onChange,\n onFocus,\n onBlur,\n value,\n label,\n noMatchingOption,\n labelProps,\n helpLabel,\n errorLabel,\n width,\n density,\n name,\n className,\n invalid,\n hasTagHover,\n}) => {\n const listId = useId(id \|\| \"jkl-combobox\", { generateSuffix: !id });\n const labelId = `${listId}_label`;\n const buttonId = `${listId}_button`;\n const inputId = `${listId}_search-input`;\n\n const [selectedValue, setSelectedValue] = useState<\n Array<ComboboxValuePair>\n >(value \|\| []);\n const [isPointingDown, setIsPointingDown] = useState<boolean>(true);\n const [showMenu, setShowMenu] = useState<boolean>(false);\n const [searchValue, setSearchValue] = useState<string>(\"\");\n const [noResults, setNoResults] = useState(false);\n const [marked, setMarked] = useState<boolean>(false);\n\n const searchRef = useRef<HTMLInputElement>(null);\n const inputRef = useRef<HTMLDivElement>(null);\n const focusInsideRef = useRef(false);\n\n useEffect(() => {\n setSearchValue(\"\");\n if (showMenu && searchRef.current) {\n searchRef.current.focus();\n }\n }, [showMenu]);\n\n useEffect(() => {\n setSelectedValue((prev) => value \|\| prev);\n }, [value]);\n\n // Funksjon for å stile valgt element\n const isSelected = (option: ValuePair) => {\n if (!selectedValue) {\n return false;\n } else {\n return selectedValue.some((value) => value.value === option.value);\n }\n };\n\n // Fjerne ett eller flere valg\n const removeOption = useCallback(\n (option: string) => {\n return selectedValue.filter((value) => value.value !== option);\n },\n [selectedValue],\n );\n\n const onTagRemove = useCallback(\n (\n e:\n \| React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>\n \| React.KeyboardEvent<HTMLInputElement>,\n option: string,\n ) => {\n let newValue = removeOption(option);\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n e.stopPropagation();\n\n if (newValue.length === 0) {\n setMarked(false);\n }\n },\n [removeOption, setSelectedValue, onChange, name, setMarked],\n );\n\n // Håndtere valgt verdi i listen\n const onItemClick = useCallback(\n (option: string) => {\n let newValue: Array<ValuePair>;\n\n if (selectedValue.some((value) => value.value === option)) {\n newValue = removeOption(option);\n } else {\n const item = items.find((i) => i.value === option);\n newValue = [...selectedValue, item as ValuePair];\n }\n searchRef.current?.focus();\n setSelectedValue(newValue);\n onChange({\n type: \"change\",\n target: { name, value: option, selectedOptions: newValue },\n });\n },\n [selectedValue, setSelectedValue, onChange, name, removeOption, items],\n );\n\n // Funksjon for søk\n const onSearch = (e: {\n target: { value: React.SetStateAction<string> };\n }) => {\n searchRef.current?.focus();\n setShowMenu(true);\n setSearchValue(e.target.value);\n };\n\n const options = useMemo(() => {\n if (!searchValue) {\n return items;\n }\n\n const filteredOptions = items.filter(\n (option) =>\n option.label.toLowerCase().indexOf(searchValue.toLowerCase()) >=\n 0,\n );\n\n setNoResults(filteredOptions.length === 0);\n\n return filteredOptions;\n }, [searchValue, items]);\n\n // Det første elementet i listen skal være aktivt fram til brukeren klikker på noe annet\n const [activeDescendant, setActiveDescendant] = useState<\n string \| undefined\n >(options[0]?.value ? `${listId}-${options[0]?.value}` : undefined);\n\n // Håndtere arrow-state\n useEffect(() => {\n if (showMenu) {\n setIsPointingDown(false);\n } else {\n setIsPointingDown(true);\n }\n }, [showMenu]);\n\n // Lukk meny med ESC\n useEffect(() => {\n const handleEscape = (e: globalThis.KeyboardEvent) => {\n if (e.key === \"Escape\" && showMenu) {\n setShowMenu(false);\n }\n };\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"keydown\", handleEscape);\n }\n return () => {\n if (typeof window !== \"undefined\" && showMenu) {\n window.removeEventListener(\"keydown\", handleEscape);\n }\n };\n }, [setShowMenu, showMenu]);\n\n // Fokushåndtering\n const handleFocusPlacement = useCallback((isOpen: boolean) => {\n if (isOpen) {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n } else {\n if (focusInsideRef.current && inputRef.current) {\n inputRef.current.focus();\n }\n }\n }, []);\n\n const handleFocus = useCallback(() => {\n if (!focusInsideRef.current) {\n if (onFocus) {\n onFocus({\n type: \"change\",\n target: {\n name,\n value: selectedValue?.[0].value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n }\n focusInsideRef.current = true;\n setShowMenu(true);\n }\n }, [onFocus, selectedValue, name]);\n\n const [dropdownRef] = useAnimatedHeight<HTMLDivElement>(showMenu, {\n onFirstVisible: handleFocusPlacement,\n onTransitionEnd: handleFocusPlacement,\n });\n\n useListNavigation({ ref: dropdownRef });\n\n const componentRootElementRef = useRef<HTMLDivElement>(null);\n\n const handleBlur = useCallback(\n (\n e: FocusEvent<\n HTMLDivElement \| HTMLInputElement \| HTMLButtonElement\n >,\n ) => {\n const componentRootElement = componentRootElementRef.current;\n const nextFocusIsInsideComponent =\n componentRootElement &&\n componentRootElement.contains(e.relatedTarget as Node);\n if (!nextFocusIsInsideComponent) {\n setSearchValue(\"\");\n\n if (onBlur) {\n onBlur({\n type: \"blur\",\n target: {\n name,\n value: selectedValue?.[0]?.value \|\| \"\",\n selectedOptions: selectedValue,\n },\n });\n inputRef.current?.dispatchEvent(\n new Event(\"focusout\", { bubbles: true }),\n );\n }\n focusInsideRef.current = false;\n setShowMenu(false);\n }\n },\n [onBlur, name, selectedValue],\n );\n\n const handleMouseOver = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n // Ved mouseOver på options flytter vi fokus til dem for å unngå \"dobbel fokus\"\n // der det ser ut som to forskjellige elementer er fokusert/hovered samtidig\n (e.target as HTMLButtonElement).focus({ preventScroll: true });\n }, []);\n\n // Tastaturnavigasjon\n const handleSearchOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n e.stopPropagation();\n const listElement = dropdownRef.current;\n if (listElement) {\n listElement\n .querySelector<HTMLButtonElement>('[role=\"option\"]')\n ?.focus();\n }\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n e.stopPropagation();\n setShowMenu(false);\n }\n\n if ((e.metaKey && e.key === \"a\") \|\| (e.ctrlKey && e.key === \"a\")) {\n e.preventDefault();\n e.stopPropagation();\n const updatedSelectedValue = selectedValue.map((item) => ({\n ...item,\n isMarked: true,\n }));\n setMarked(true);\n setSelectedValue(updatedSelectedValue);\n } else if (e.key === \"Backspace\") {\n e.stopPropagation();\n setMarked(false);\n\n // Sjekk om selectedValue er markert\n const selectedValueIsMarked = selectedValue.some(\n (item) => item.isMarked,\n );\n\n if (selectedValueIsMarked) {\n const updatedSelectedValue = selectedValue.filter(\n (item) => !item.isMarked,\n );\n setSelectedValue(updatedSelectedValue);\n setSearchValue(\"\");\n } else if (selectedValue.length > 0 && searchValue === \"\") {\n // Hvis ingen items er markert, fjern siste valgte item\n onTagRemove(\n e,\n selectedValue[selectedValue.length - 1].value,\n );\n }\n }\n },\n [selectedValue, searchValue, dropdownRef, onTagRemove],\n );\n\n const handleOptionOnKeyDown = useCallback(\n (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === \"Tab\") {\n if (searchRef.current) {\n e.preventDefault();\n e.stopPropagation();\n\n if (e.shiftKey) {\n searchRef.current.focus();\n } else {\n setShowMenu(false);\n searchRef.current.focus();\n }\n }\n } else if (e.key === \"ArrowUp\") {\n if (dropdownRef.current && searchRef.current) {\n // Can't be based on index since the first item might be filtered out\n const firstVisible = dropdownRef.current.querySelector(\n '[role=\"option\"]:not([hidden])',\n );\n if (\n e.currentTarget.id === firstVisible?.id &&\n searchRef.current\n ) {\n searchRef.current.focus();\n }\n }\n }\n },\n [setShowMenu, dropdownRef],\n );\n\n const hasSelection = selectedValue.length >= 1;\n\n return (\n <InputGroup\n label={label}\n id={inputId}\n ref={componentRootElementRef}\n data-testid=\"jkl-combobox\"\n className={clsx(\"jkl-combobox\", className, {\n \"jkl-combobox--invalid\": !!errorLabel \|\| invalid,\n \"jkl-combobox--menu-open\": showMenu,\n \"jkl-combobox--menu-closed\": !showMenu && hasSelection,\n })}\n labelProps={{\n id: labelId,\n ...labelProps,\n }}\n helpLabel={helpLabel}\n errorLabel={errorLabel}\n density={density}\n render={(inputProps) => (\n <div\n className={clsx(\"jkl-combobox__wrapper\", {\n \"jkl-combobox__wrapper--active-value\": hasSelection,\n })}\n style={{ width }}\n tabIndex={-1}\n onFocus={handleFocus}\n onBlur={handleBlur}\n >\n <div\n className=\"jkl-combobox__tags\"\n data-testid=\"jkl-combobox__tags\"\n >\n {selectedValue\n .map(getComboboxValuePair)\n .map((option) => (\n <Tag\n key={option.value}\n className={`jkl-tag ${\n marked && \"jkl-tag__marked\"\n }`}\n data-testid=\"jkl-tag\"\n dismissAction={{\n onClick: (e) => {\n if (searchRef.current) {\n searchRef.current.focus();\n }\n onTagRemove(e, option.value);\n },\n onBlur: handleBlur,\n label: `Fjern ${option.value}`,\n }}\n >\n {hasTagHover ? (\n <Tooltip key={option.value}>\n <TooltipTrigger>\n {\" \"}\n <span\n aria-hidden=\"true\"\n data-testid=\"jkl-tag__content\"\n >\n {option.tagLabel\n ? option.tagLabel\n : option.label}\n </span>\n </TooltipTrigger>\n <TooltipContent>\n {option.label}\n </TooltipContent>\n </Tooltip>\n ) : (\n <span\n aria-hidden=\"true\"\n data-testid=\"jkl-tag__content\"\n >\n {option.tagLabel\n ? option.tagLabel\n : option.label}\n </span>\n )}\n </Tag>\n ))}\n <input\n {...inputProps}\n className=\"jkl-combobox__search-input\"\n onChange={onSearch}\n data-testid=\"jkl-combobox__search-input\"\n onFocus={handleFocus}\n onBlur={handleBlur}\n onKeyDown={handleSearchOnKeyDown}\n value={searchValue}\n ref={searchRef}\n aria-controls={listId}\n role=\"combobox\"\n aria-autocomplete=\"list\"\n aria-expanded={showMenu}\n placeholder={\n selectedValue.length > 0 ? \"\" : placeholder\n }\n autoComplete=\"off\"\n />\n </div>\n\n <div\n className=\"jkl-combobox__menu\"\n role=\"listbox\"\n ref={dropdownRef}\n id={listId}\n aria-labelledby={labelId}\n aria-multiselectable=\"true\"\n aria-activedescendant={activeDescendant}\n onFocus={handleFocus}\n onBlur={handleBlur}\n tabIndex={-1}\n >\n {options.map((option, i) => (\n <button\n key={`${listId}-${option.value}`}\n type=\"button\"\n id={`${listId}__${option.value}`}\n aria-selected={isSelected(option)}\n role=\"option\"\n value={option.value}\n onBlur={handleBlur}\n className={`jkl-combobox__option ${\n isSelected(option) &&\n \"jkl-combobox__option--selected\"\n }`}\n data-testid=\"jkl-combobox__option\"\n data-testautoid={`jkl-combobox__option-${i}`}\n onFocus={handleFocus}\n onKeyDown={handleOptionOnKeyDown}\n onClick={(e) => {\n setActiveDescendant(\n `${listId}__${option.value}`,\n ); // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#required_javascript_features\n e.stopPropagation();\n onItemClick(option.value);\n setSearchValue(\"\");\n }}\n onMouseOver={handleMouseOver}\n >\n {option.description ? (\n <span>\n {option.label}\n <span className=\"jkl-combobox__option-description\">\n {option.description}\n </span>\n </span>\n ) : (\n option.label\n )}\n {isSelected(option) ? (\n <span>\n <CheckIcon />{\" \"}\n </span>\n ) : null}\n </button>\n ))}\n {noResults && (\n <div className=\"jkl-combobox__no-option\">\n {noMatchingOption}\n </div>\n )}\n </div>\n <div className=\"jkl-combobox__actions\">\n <IconButton\n id={buttonId}\n onFocus={handleFocus}\n onBlur={handleBlur}\n className=\"jkl-combobox__button\"\n data-testid=\"jkl-combobox__button\"\n aria-label={`${\n selectedValue.map((value) => value.label) \|\|\n \"Velg\"\n },${label}`}\n aria-expanded={showMenu}\n aria-controls={listId}\n role=\"button\"\n onClick={() => setShowMenu(true)}\n onMouseDown={(e) => {\n e.preventDefault();\n inputRef.current?.focus();\n }}\n >\n <ArrowVerticalAnimated\n pointingDown={isPointingDown}\n />\n </IconButton>\n </div>\n </div>\n )}\n />\n );\n};\nCombobox.displayName = \"Combobox\";\n"],"names":["getComboboxValuePair","item","value","label","Combobox","id","placeholder","items","onChange","onFocus","onBlur","noMatchingOption","labelProps","helpLabel","errorLabel","width","density","name","className","invalid","hasTagHover","listId","useId","generateSuffix","labelId","buttonId","inputId","selectedValue","setSelectedValue","useState","isPointingDown","setIsPointingDown","showMenu","setShowMenu","searchValue","setSearchValue","noResults","setNoResults","marked","setMarked","searchRef","useRef","inputRef","focusInsideRef","useEffect","current","focus","prev","isSelected","option","some","removeOption","useCallback","filter","onTagRemove","e","newValue","type","target","selectedOptions","stopPropagation","length","onItemClick","find","i","_a","onSearch","options","useMemo","filteredOptions","toLowerCase","indexOf","activeDescendant","setActiveDescendant","_b","handleEscape","key","window","addEventListener","removeEventListener","handleFocusPlacement","isOpen","handleFocus","dropdownRef","useAnimatedHeight","onFirstVisible","onTransitionEnd","useListNavigation","ref","componentRootElementRef","handleBlur","componentRootElement","contains","relatedTarget","dispatchEvent","Event","bubbles","handleMouseOver","preventScroll","handleSearchOnKeyDown","preventDefault","listElement","querySelector","metaKey","ctrlKey","updatedSelectedValue","map","isMarked","handleOptionOnKeyDown","shiftKey","firstVisible","currentTarget","hasSelection","jsx","InputGroup","clsx","render","inputProps","jsxs","style","tabIndex","children","Tag","dismissAction","onClick","Tooltip","TooltipTrigger","tagLabel","TooltipContent","onKeyDown","role","autoComplete","onMouseOver","description","CheckIcon","IconButton","onMouseDown","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"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"}

package/build/cjs/components/combobox/Combobox.d.cts CHANGED Viewed

@@ -8,7 +8,7 @@ export type ComboboxValuePair = ValuePair & {
     isMarked?: boolean;
 };
 export declare function getComboboxValuePair(item: string | ComboboxValuePair): ComboboxValuePair;
-interface PartialChangeEvent extends Partial<Omit<ChangeEvent<HTMLElement>, "target">> {
+export interface ComboboxPartialChangeEvent extends Partial<Omit<ChangeEvent<HTMLElement>, "target">> {
     type: "change" | "blur";
     target: {
         name: string;
@@ -16,8 +16,8 @@ interface PartialChangeEvent extends Partial<Omit<ChangeEvent<HTMLElement>, "tar
         selectedOptions: Array<ValuePair>;
     };
 }
-type ChangeEventHandler = (event: PartialChangeEvent) => void;
-interface ComboboxProps extends InputGroupProps {
+export type ComboboxChangeEventHandler = (event: ComboboxPartialChangeEvent) => void;
+export interface ComboboxProps extends InputGroupProps {
     id?: string;
     placeholder?: string;
     labelProps?: Omit<LabelProps, "children" | "density" | "htmlFor" | "standAlone">;
@@ -33,9 +33,8 @@ interface ComboboxProps extends InputGroupProps {
     className?: string;
     invalid?: boolean;
     hasTagHover?: boolean;
-    onChange: ChangeEventHandler;
-    onBlur?: ChangeEventHandler;
-    onFocus?: ChangeEventHandler;
+    onChange: ComboboxChangeEventHandler;
+    onBlur?: ComboboxChangeEventHandler;
+    onFocus?: ComboboxChangeEventHandler;
 }
 export declare const Combobox: FC<ComboboxProps>;
-export {};

package/build/cjs/components/combobox/index.d.cts CHANGED Viewed

	@@ -1 +1 @@
1	- export { Combobox, getComboboxValuePair, type ComboboxValuePair, } from './Combobox.cjs';
1	+ export { Combobox, getComboboxValuePair, type ComboboxValuePair, type ComboboxProps, type ComboboxChangeEventHandler, type ComboboxPartialChangeEvent, } from './Combobox.cjs';

package/build/cjs/components/cookie-consent/index.d.cts CHANGED Viewed

@@ -1,5 +1,3 @@
+export { CookieConsent, type CookieConsentProps } from './CookieConsent.cjs';
+export { CookieConsentProvider, useCookieConsent, type CookieConsentProviderProps, } from './CookieConsentContext.cjs';
 export type { AcceptConsentCallback, Consent, ConsentState } from './types.cjs';
-export type { CookieConsentProps } from './CookieConsent.cjs';
-export { CookieConsent } from './CookieConsent.cjs';
-export type { CookieConsentProviderProps } from './CookieConsentContext.cjs';
-export { CookieConsentProvider, useCookieConsent, } from './CookieConsentContext.cjs';

package/build/cjs/components/datepicker/index.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./validation.cjs"),r=require("./utils.cjs"),t=require("./DatePicker.cjs");exports.isCorrectFormat=e.isCorrectFormat,exports.isWithinLowerBound=e.isWithinLowerBound,exports.isWithinUpperBound=e.isWithinUpperBound,exports.dayMonthYearRegex=r.dayMonthYearRegex,exports.formatInput=r.formatInput,exports.isBlurTargetOutside=r.isBlurTargetOutside,exports.parseDateString=r.parseDateString,exports.DatePicker=t.DatePicker;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DatePicker.cjs"),r=require("./validation.cjs"),t=require("./utils.cjs");exports.DatePicker=e.DatePicker,exports.isCorrectFormat=r.isCorrectFormat,exports.isWithinLowerBound=r.isWithinLowerBound,exports.isWithinUpperBound=r.isWithinUpperBound,exports.formatInput=t.formatInput,exports.isBlurTargetOutside=t.isBlurTargetOutside,exports.parseDateString=t.parseDateString;
 //# sourceMappingURL=index.cjs.map

package/build/cjs/components/datepicker/index.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-export * from './types.cjs';
-export * from './validation.cjs';
-export * from './utils.cjs';
 export { DatePicker } from './DatePicker.cjs';
+export { isCorrectFormat, isWithinLowerBound, isWithinUpperBound, } from './validation.cjs';
+export { formatInput, parseDateString, isBlurTargetOutside } from './utils.cjs';
+export { type DatePickerProps, type YearsToShow, type DatePickerChangeEventHandler, type DatePickerFocusEventHandler, type DatePickerBlurEventHandler, type DatePickerKeyDownEventHandler, type DatePickerAction, type ComparisonOptions, } from './types.cjs';

package/build/cjs/components/datepicker/types.d.cts CHANGED Viewed

@@ -268,3 +268,10 @@ export interface DatePickerProps extends Omit<InputGroupProps, "label" | "childr
 }
 export interface DatePickerAction extends Exclude<ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> {
 }
+export type ComparisonOptions = {
+    /**
+     * Kontroller om testen skal godkjennes om verdien er lik
+     * @default false
+     */
+    inclusive: boolean;
+};

package/build/cjs/components/datepicker/utils.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=/^(\d\d?)[\W](\d\d?)[\W](\d{4}|\d{2})$/,t=/^(\d{4}|\d{2})[\W](\d\d?)[\W](\d\d?)$/;exports.dayMonthYearRegex=e,exports.formatInput=function(e){return`${`${e.getDate()}`.padStart(2,"0")}.${`${e.getMonth()+1}`.padStart(2,"0")}.${e.getFullYear()}`},exports.isBlurTargetOutside=function(e){if(!e.relatedTarget)return!0;const t=e.target.closest(".jkl-datepicker__input-wrapper");return e.relatedTarget.closest(".jkl-datepicker__input-wrapper")!==t},exports.parseDateString=function(r){if(!r)return;const n=(r=>{const n=e.exec(r);if(n)return n.slice(1,4);const a=t.exec(r);if(!a)return;const o=a.slice(1,4);return o.reverse(),o})(r);if(!n)return;const a=parseInt((new Date).toLocaleString("no-NB",{year:"2-digit"})),o=parseInt(n[0],10),s=parseInt(n[1],10)-1,d=parseInt(n[2],10),i=d>99?d:(u=d)>a?u+1900:u+2e3,p=new Date(i,s,o,0,0,0);var u;return p.getMonth()===s&&p.getFullYear()===i?p:void 0};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=/^(\d\d?)[\W](\d\d?)[\W](\d{4}|\d{2})$/,e=/^(\d{4}|\d{2})[\W](\d\d?)[\W](\d\d?)$/;exports.formatInput=function(t){return`${`${t.getDate()}`.padStart(2,"0")}.${`${t.getMonth()+1}`.padStart(2,"0")}.${t.getFullYear()}`},exports.isBlurTargetOutside=function(t){if(!t.relatedTarget)return!0;const e=t.target.closest(".jkl-datepicker__input-wrapper");return t.relatedTarget.closest(".jkl-datepicker__input-wrapper")!==e},exports.parseDateString=function(r){if(!r)return;const n=(r=>{const n=t.exec(r);if(n)return n.slice(1,4);const a=e.exec(r);if(!a)return;const o=a.slice(1,4);return o.reverse(),o})(r);if(!n)return;const a=parseInt((new Date).toLocaleString("no-NB",{year:"2-digit"})),o=parseInt(n[0],10),s=parseInt(n[1],10)-1,i=parseInt(n[2],10),d=i>99?i:(c=i)>a?c+1900:c+2e3,u=new Date(d,s,o,0,0,0);var c;return u.getMonth()===s&&u.getFullYear()===d?u:void 0};
 //# sourceMappingURL=utils.cjs.map

package/build/cjs/components/datepicker/utils.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.cjs","sources":["../../../../src/components/datepicker/utils.ts"],"sourcesContent":["import React from \"react\";\n\~~nexport~~ ~~const~~ dayMonthYearRegex = /^(\\d\\d?)[\\W](\\d\\d?)[\\W](\\d{4}\|\\d{2})$/;\nconst yearMonthDayRegex = /^(\\d{4}\|\\d{2})[\\W](\\d\\d?)[\\W](\\d\\d?)$/;\n\n/*\n Format a Date object as a string in the format DatePicker expects.\n \n @param date the Date object to format\n * @return returns a date string with \"dd.mm.yyyy\"-format\n /\nexport function formatInput(date: Date): string {\n const day = `${date.getDate()}`.padStart(2, \"0\");\n const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n return `${day}.${month}.${date.getFullYear()}`;\n}\n\n/\n Get the date segments from a string of unknown format\n \n @param input date as a string with unknown format\n * @returns an array of string elements [day, month, year]\n /\nconst getDateSegmentsFromString = (input: string): string[] \| undefined => {\n const dayMonthYear = dayMonthYearRegex.exec(input);\n\n if (dayMonthYear) {\n return dayMonthYear.slice(1, 4);\n }\n\n const yearMonthDay = yearMonthDayRegex.exec(input);\n\n if (!yearMonthDay) {\n return undefined;\n }\n\n // reverse to get the correct ordering\n const slicedDateSegments = yearMonthDay.slice(1, 4);\n slicedDateSegments.reverse();\n\n return slicedDateSegments;\n};\n\n/\n Convert a date string to a Date object\n \n @param dateString date as string with format dd.mm.yyyy\n * @return a Date object representing the given date\n /\nexport function parseDateString(dateString?: string): Date \| undefined {\n if (!dateString) {\n return undefined;\n }\n\n const inputDateSegments = getDateSegmentsFromString(dateString);\n\n if (!inputDateSegments) {\n return undefined;\n }\n\n const currentTwoDigitYear = parseInt(\n new Date().toLocaleString(\"no-NB\", { year: \"2-digit\" }),\n );\n const parseTwoDigitYear = (year: number) =>\n year > currentTwoDigitYear ? year + 1900 : year + 2000;\n\n const day = parseInt(inputDateSegments[0], 10);\n const month = parseInt(inputDateSegments[1], 10) - 1;\n const yearIn = parseInt(inputDateSegments[2], 10);\n const year = yearIn > 99 ? yearIn : parseTwoDigitYear(yearIn);\n\n const generatedDate = new Date(year, month, day, 0, 0, 0);\n // Days can \"overflow\" to next month/year in Date(). Return undefined if it does:\n return generatedDate.getMonth() === month &&\n generatedDate.getFullYear() === year\n ? generatedDate\n : undefined;\n}\n\n/\n Hjelpefunksjon for å se om en onBlur går utenfor DatePicker,\n * eller om den går til et interaktivt element inni DatePickeren.\n * @param {React.FocusEvent<HTMLButtonElement \| HTMLInputElement>} e - Eventet fra onBlur og action.onBlur\n * @returns {boolean} true hvis e.relatedTarget er utenfor DatePicker\n */\nexport function isBlurTargetOutside(\n e: React.FocusEvent<HTMLButtonElement \| HTMLInputElement>,\n): boolean {\n if (!e.relatedTarget) {\n return true;\n }\n\n const targetRoot = e.target.closest(\".jkl-datepicker__input-wrapper\");\n const relatedTargetRoot = e.relatedTarget.closest(\n \".jkl-datepicker__input-wrapper\",\n );\n\n return relatedTargetRoot !== targetRoot;\n}\n"],"names":["dayMonthYearRegex","yearMonthDayRegex","date","getDate","padStart","getMonth","getFullYear","e","relatedTarget","targetRoot","target","closest","dateString","inputDateSegments","input","dayMonthYear","exec","slice","yearMonthDay","slicedDateSegments","reverse","getDateSegmentsFromString","currentTwoDigitYear","parseInt","Date","toLocaleString","year","day","month","yearIn","generatedDate"],"mappings":"~~gFAEO~~,MAAMA,EAAoB,~~wCAC3BC~~,EAAoB,~~wFAQnB~~,SAAqBC,GAGxB,MAAO,GAFK,GAAGA,EAAKC,YAAYC,SAAS,EAAG,QAC9B,GAAGF,EAAKG,WAAa,IAAID,SAAS,EAAG,QACzBF,EAAKI,eACnC,8BAsEO,SACHC,GAEI,IAACA,EAAEC,cACI,OAAA,EAGX,MAAMC,EAAaF,EAAEG,OAAOC,QAAQ,kCAKpC,OAJ0BJ,EAAEC,cAAcG,QACtC,oCAGyBF,CACjC,0BAjDO,SAAyBG,GAC5B,IAAKA,EACM,OAGL,MAAAC,EA/ByBC,KACzB,MAAAC,EAAef,EAAkBgB,KAAKF,GAE5C,GAAIC,EACO,OAAAA,EAAaE,MAAM,EAAG,GAG3B,MAAAC,EAAejB,EAAkBe,KAAKF,GAE5C,IAAKI,EACM,OAIX,MAAMC,EAAqBD,EAAaD,MAAM,EAAG,GACjD,OAAAE,EAAmBC,UAEZD,GAcmBE,CAA0BT,GAEpD,IAAKC,EACM,OAGX,MAAMS,EAAsBC,UACxB,IAAIC,MAAOC,eAAe,QAAS,CAAEC,KAAM,aAKzCC,EAAMJ,SAASV,EAAkB,GAAI,IACrCe,EAAQL,SAASV,EAAkB,GAAI,IAAM,EAC7CgB,EAASN,SAASV,EAAkB,GAAI,IACxCa,EAAOG,EAAS,GAAKA,GANAH,EAM2BG,GAL3CP,EAAsBI,EAAO,KAAOA,EAAO,IAOhDI,EAAgB,IAAIN,KAAKE,EAAME,EAAOD,EAAK,EAAG,EAAG,GAR5BD,MAUpB,OAAAI,EAAczB,aAAeuB,GAChCE,EAAcxB,gBAAkBoB,EAC9BI,OACA,CACV"}
1	+ {"version":3,"file":"utils.cjs","sources":["../../../../src/components/datepicker/utils.ts"],"sourcesContent":["import React from \"react\";\n\nconst dayMonthYearRegex = /^(\\d\\d?)[\\W](\\d\\d?)[\\W](\\d{4}\|\\d{2})$/;\nconst yearMonthDayRegex = /^(\\d{4}\|\\d{2})[\\W](\\d\\d?)[\\W](\\d\\d?)$/;\n\n/*\n Format a Date object as a string in the format DatePicker expects.\n \n @param date the Date object to format\n * @return returns a date string with \"dd.mm.yyyy\"-format\n /\nexport function formatInput(date: Date): string {\n const day = `${date.getDate()}`.padStart(2, \"0\");\n const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n return `${day}.${month}.${date.getFullYear()}`;\n}\n\n/\n Get the date segments from a string of unknown format\n \n @param input date as a string with unknown format\n * @returns an array of string elements [day, month, year]\n /\nconst getDateSegmentsFromString = (input: string): string[] \| undefined => {\n const dayMonthYear = dayMonthYearRegex.exec(input);\n\n if (dayMonthYear) {\n return dayMonthYear.slice(1, 4);\n }\n\n const yearMonthDay = yearMonthDayRegex.exec(input);\n\n if (!yearMonthDay) {\n return undefined;\n }\n\n // reverse to get the correct ordering\n const slicedDateSegments = yearMonthDay.slice(1, 4);\n slicedDateSegments.reverse();\n\n return slicedDateSegments;\n};\n\n/\n Convert a date string to a Date object\n \n @param dateString date as string with format dd.mm.yyyy\n * @return a Date object representing the given date\n /\nexport function parseDateString(dateString?: string): Date \| undefined {\n if (!dateString) {\n return undefined;\n }\n\n const inputDateSegments = getDateSegmentsFromString(dateString);\n\n if (!inputDateSegments) {\n return undefined;\n }\n\n const currentTwoDigitYear = parseInt(\n new Date().toLocaleString(\"no-NB\", { year: \"2-digit\" }),\n );\n const parseTwoDigitYear = (year: number) =>\n year > currentTwoDigitYear ? year + 1900 : year + 2000;\n\n const day = parseInt(inputDateSegments[0], 10);\n const month = parseInt(inputDateSegments[1], 10) - 1;\n const yearIn = parseInt(inputDateSegments[2], 10);\n const year = yearIn > 99 ? yearIn : parseTwoDigitYear(yearIn);\n\n const generatedDate = new Date(year, month, day, 0, 0, 0);\n // Days can \"overflow\" to next month/year in Date(). Return undefined if it does:\n return generatedDate.getMonth() === month &&\n generatedDate.getFullYear() === year\n ? generatedDate\n : undefined;\n}\n\n/\n Hjelpefunksjon for å se om en onBlur går utenfor DatePicker,\n * eller om den går til et interaktivt element inni DatePickeren.\n * @param {React.FocusEvent<HTMLButtonElement \| HTMLInputElement>} e - Eventet fra onBlur og action.onBlur\n * @returns {boolean} true hvis e.relatedTarget er utenfor DatePicker\n */\nexport function isBlurTargetOutside(\n e: React.FocusEvent<HTMLButtonElement \| HTMLInputElement>,\n): boolean {\n if (!e.relatedTarget) {\n return true;\n }\n\n const targetRoot = e.target.closest(\".jkl-datepicker__input-wrapper\");\n const relatedTargetRoot = e.relatedTarget.closest(\n \".jkl-datepicker__input-wrapper\",\n );\n\n return relatedTargetRoot !== targetRoot;\n}\n"],"names":["dayMonthYearRegex","yearMonthDayRegex","date","getDate","padStart","getMonth","getFullYear","e","relatedTarget","targetRoot","target","closest","dateString","inputDateSegments","input","dayMonthYear","exec","slice","yearMonthDay","slicedDateSegments","reverse","getDateSegmentsFromString","currentTwoDigitYear","parseInt","Date","toLocaleString","year","day","month","yearIn","generatedDate"],"mappings":"gFAEA,MAAMA,EAAoB,wCACpBC,EAAoB,4DAQnB,SAAqBC,GAGxB,MAAO,GAFK,GAAGA,EAAKC,YAAYC,SAAS,EAAG,QAC9B,GAAGF,EAAKG,WAAa,IAAID,SAAS,EAAG,QACzBF,EAAKI,eACnC,8BAsEO,SACHC,GAEI,IAACA,EAAEC,cACI,OAAA,EAGX,MAAMC,EAAaF,EAAEG,OAAOC,QAAQ,kCAKpC,OAJ0BJ,EAAEC,cAAcG,QACtC,oCAGyBF,CACjC,0BAjDO,SAAyBG,GAC5B,IAAKA,EACM,OAGL,MAAAC,EA/ByBC,KACzB,MAAAC,EAAef,EAAkBgB,KAAKF,GAE5C,GAAIC,EACO,OAAAA,EAAaE,MAAM,EAAG,GAG3B,MAAAC,EAAejB,EAAkBe,KAAKF,GAE5C,IAAKI,EACM,OAIX,MAAMC,EAAqBD,EAAaD,MAAM,EAAG,GACjD,OAAAE,EAAmBC,UAEZD,GAcmBE,CAA0BT,GAEpD,IAAKC,EACM,OAGX,MAAMS,EAAsBC,UACxB,IAAIC,MAAOC,eAAe,QAAS,CAAEC,KAAM,aAKzCC,EAAMJ,SAASV,EAAkB,GAAI,IACrCe,EAAQL,SAASV,EAAkB,GAAI,IAAM,EAC7CgB,EAASN,SAASV,EAAkB,GAAI,IACxCa,EAAOG,EAAS,GAAKA,GANAH,EAM2BG,GAL3CP,EAAsBI,EAAO,KAAOA,EAAO,IAOhDI,EAAgB,IAAIN,KAAKE,EAAME,EAAOD,EAAK,EAAG,EAAG,GAR5BD,MAUpB,OAAAI,EAAczB,aAAeuB,GAChCE,EAAcxB,gBAAkBoB,EAC9BI,OACA,CACV"}

package/build/cjs/components/datepicker/utils.d.cts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-export declare const dayMonthYearRegex: RegExp;
 /**
  * Format a Date object as a string in the format DatePicker expects.
  *

package/build/cjs/components/datepicker/validation.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"validation.cjs","sources":["../../../../src/components/datepicker/validation.ts"],"sourcesContent":["import { parseDateString } from \"./utils.js\";\n\nexport function isCorrectFormat(value: string \| undefined): boolean {\n if (!value) {\n return false;\n }\n const val = parseDateString(value);\n return Boolean(val);\n}\n\~~ntype ComparisonOptions = {\n /*\n Kontroller om testen skal godkjennes om verdien er lik\n * @default false\n */\n inclusive: boolean;\n};\n\~~nexport function isWithinLowerBound(\n value: Date \| string \| undefined,\n minDate: Date,\n options: ComparisonOptions = { inclusive: false },\n): boolean {\n const val = typeof value === \"string\" ? parseDateString(value) : value;\n\n if (!val) {\n return false;\n }\n\n if (options.inclusive) {\n return val >= minDate;\n }\n\n return val > minDate;\n}\n\nexport function isWithinUpperBound(\n value: Date \| string \| undefined,\n maxDate: Date,\n options: ComparisonOptions = { inclusive: false },\n): boolean {\n const val = typeof value === \"string\" ? parseDateString(value) : value;\n\n if (!val) {\n return false;\n }\n\n if (options.inclusive) {\n return val <= maxDate;\n }\n\n return val < maxDate;\n}\n"],"names":["value","parseDateString","minDate","options","inclusive","val","maxDate"],"mappings":"~~uIAEO~~,SAAyBA,GAC5B,QAAKA,KAGOC,kBAAgBD,EAEhC,~~6BAUO~~,SACHA,EACAE,EACAC,EAA6B,CAAEC,WAAW,IAE1C,MAAMC,EAAuB,iBAAVL,EAAqBC,EAAAA,gBAAgBD,GAASA,EAEjE,QAAKK,IAIDF,EAAQC,UACDC,GAAOH,EAGXG,EAAMH,EACjB,6BAEO,SACHF,EACAM,EACAH,EAA6B,CAAEC,WAAW,IAE1C,MAAMC,EAAuB,iBAAVL,EAAqBC,EAAAA,gBAAgBD,GAASA,EAEjE,QAAKK,IAIDF,EAAQC,UACDC,GAAOC,EAGXD,EAAMC,EACjB"}
1	+ {"version":3,"file":"validation.cjs","sources":["../../../../src/components/datepicker/validation.ts"],"sourcesContent":["import { ComparisonOptions } from \"./types.js\";\nimport { parseDateString } from \"./utils.js\";\n\nexport function isCorrectFormat(value: string \| undefined): boolean {\n if (!value) {\n return false;\n }\n const val = parseDateString(value);\n return Boolean(val);\n}\n\nexport function isWithinLowerBound(\n value: Date \| string \| undefined,\n minDate: Date,\n options: ComparisonOptions = { inclusive: false },\n): boolean {\n const val = typeof value === \"string\" ? parseDateString(value) : value;\n\n if (!val) {\n return false;\n }\n\n if (options.inclusive) {\n return val >= minDate;\n }\n\n return val > minDate;\n}\n\nexport function isWithinUpperBound(\n value: Date \| string \| undefined,\n maxDate: Date,\n options: ComparisonOptions = { inclusive: false },\n): boolean {\n const val = typeof value === \"string\" ? parseDateString(value) : value;\n\n if (!val) {\n return false;\n }\n\n if (options.inclusive) {\n return val <= maxDate;\n }\n\n return val < maxDate;\n}\n"],"names":["value","parseDateString","minDate","options","inclusive","val","maxDate"],"mappings":"uIAGO,SAAyBA,GAC5B,QAAKA,KAGOC,kBAAgBD,EAEhC,6BAEO,SACHA,EACAE,EACAC,EAA6B,CAAEC,WAAW,IAE1C,MAAMC,EAAuB,iBAAVL,EAAqBC,EAAAA,gBAAgBD,GAASA,EAEjE,QAAKK,IAIDF,EAAQC,UACDC,GAAOH,EAGXG,EAAMH,EACjB,6BAEO,SACHF,EACAM,EACAH,EAA6B,CAAEC,WAAW,IAE1C,MAAMC,EAAuB,iBAAVL,EAAqBC,EAAAA,gBAAgBD,GAASA,EAEjE,QAAKK,IAIDF,EAAQC,UACDC,GAAOC,EAGXD,EAAMC,EACjB"}

package/build/cjs/components/datepicker/validation.d.cts CHANGED Viewed

@@ -1,11 +1,4 @@
+import { ComparisonOptions } from './types.cjs';
 export declare function isCorrectFormat(value: string | undefined): boolean;
-type ComparisonOptions = {
-    /**
-     * Kontroller om testen skal godkjennes om verdien er lik
-     * @default false
-     */
-    inclusive: boolean;
-};
 export declare function isWithinLowerBound(value: Date | string | undefined, minDate: Date, options?: ComparisonOptions): boolean;
 export declare function isWithinUpperBound(value: Date | string | undefined, maxDate: Date, options?: ComparisonOptions): boolean;
-export {};

package/build/cjs/components/description-list/index.d.cts CHANGED Viewed

	@@ -1 +1 @@
1	- export * from './DescriptionList.cjs';
1	+ export { DescriptionList, DescriptionTerm, DescriptionDetail, type DescriptionListProps, type DescriptionTermProps, type DescriptionDetailProps, } from './DescriptionList.cjs';

package/build/cjs/components/expander/Expander.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Expander.cjs","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ForwardedRef } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { ScreenReaderOnly } from \"../ScreenReaderOnly.js\";\n\nexport ~~type ExpandDirection = \"up\" \| \"down\";\n\nexport~~ interface ExpanderProps extends WithChildren {\n as?: \"summary\" \| \"button\";\n /** Må settes dersom du ikke bruker CoreToggle. Verdien skal være IDen til innholdet du ekspanderer. /\n \"aria-controls\"?: string;\n /* Må settes dersom du ikke bruker CoreToggle. IDen her skal brukes som verdien til aria-labelledby på innholdet du ekspanderer. /\n id?: string;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n /\n Styrer retningen til pila, som animeres ved endring. Styrer også aria-expanded.\n * @default false\n /\n isExpanded?: boolean;\n /* @default \"down\" /\n expandDirection?: ~~ExpandDirection~~;\n density?: Density;\n /\n Skjul knappeteksten visuelt.\n \n @default false\n */\n hideLabel?: boolean;\n}\n\nexport const Expander = React.forwardRef(\n (\n {\n as = \"button\",\n className,\n children,\n density,\n expandDirection = \"down\",\n isExpanded = false,\n hideLabel = false,\n ...rest\n }: ExpanderProps,\n ref: ForwardedRef<HTMLButtonElement>,\n ): JSX.Element => {\n const ContentWrapper = hideLabel ? ScreenReaderOnly : React.Fragment;\n const pointingDown =\n expandDirection === \"down\" ? !isExpanded : isExpanded;\n\n const El = as;\n const type = El === \"button\" ? \"button\" : undefined;\n\n return (\n <El\n aria-expanded={isExpanded}\n data-testid=\"jkl-expander\"\n type={type}\n className={clsx(\"jkl-expander\", className, {\n \"jkl-expander--expanded\": isExpanded,\n \"jkl-expander--icon-only\": !children,\n })}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children && (\n <ContentWrapper>\n <span className=\"jkl-expander__text\">{children}</span>\n </ContentWrapper>\n )}\n <ArrowVerticalAnimated\n className=\"jkl-expander__arrow\"\n pointingDown={pointingDown}\n bold={isExpanded}\n />\n </El>\n );\n },\n);\n\nExpander.displayName = \"Expander\";\n"],"names":["Expander","React","forwardRef","as","className","children","density","expandDirection","isExpanded","hideLabel","rest","ref","ContentWrapper","ScreenReaderOnly","Fragment","pointingDown","El","type","jsxs","clsx","jsx","ArrowVerticalAnimated","bold","displayName"],"mappings":"~~mRAiCaA~~,EAAWC,EAAMC,YAC1B,EAEQC,GAAAA,EAAK,SACLC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EAAkB,OAClBC,WAAAA,GAAa,EACbC,UAAAA,GAAY,KACTC,GAEPC,KAEM,MAAAC,EAAiBH,EAAYI,mBAAmBZ,EAAMa,SACtDC,EACkB,SAApBR,GAA8BC,EAAaA,EAEzCQ,EAAKb,EACLc,EAAc,WAAPD,EAAkB,cAAW,EAGtC,OAAAE,EAAAA,KAACF,EAAA,CACG,gBAAeR,EACf,cAAY,eACZS,KAAAA,EACAb,UAAWe,EAAAA,KAAK,eAAgBf,EAAW,CACvC,yBAA0BI,EAC1B,2BAA4BH,OAE5BK,EACJ,eAAcJ,EACdK,IAAAA,EAECN,SAAA,CAAAA,SACIO,EACG,CAAAP,SAAAe,EAAAA,IAAC,QAAKhB,UAAU,qBAAsBC,SAAAA,MAG9Ce,EAAAA,IAACC,EAAAA,sBAAA,CACGjB,UAAU,sBACVW,aAAAA,EACAO,KAAMd,MACV,IAMhBR,EAASuB,YAAc"}
1	+ {"version":3,"file":"Expander.cjs","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ForwardedRef } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { ScreenReaderOnly } from \"../ScreenReaderOnly.js\";\n\nexport interface ExpanderProps extends WithChildren {\n as?: \"summary\" \| \"button\";\n /** Må settes dersom du ikke bruker CoreToggle. Verdien skal være IDen til innholdet du ekspanderer. /\n \"aria-controls\"?: string;\n /* Må settes dersom du ikke bruker CoreToggle. IDen her skal brukes som verdien til aria-labelledby på innholdet du ekspanderer. /\n id?: string;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n /\n Styrer retningen til pila, som animeres ved endring. Styrer også aria-expanded.\n * @default false\n /\n isExpanded?: boolean;\n /* @default \"down\" /\n expandDirection?: \"up\" \| \"down\";\n density?: Density;\n /\n Skjul knappeteksten visuelt.\n \n @default false\n */\n hideLabel?: boolean;\n}\n\nexport const Expander = React.forwardRef(\n (\n {\n as = \"button\",\n className,\n children,\n density,\n expandDirection = \"down\",\n isExpanded = false,\n hideLabel = false,\n ...rest\n }: ExpanderProps,\n ref: ForwardedRef<HTMLButtonElement>,\n ): JSX.Element => {\n const ContentWrapper = hideLabel ? ScreenReaderOnly : React.Fragment;\n const pointingDown =\n expandDirection === \"down\" ? !isExpanded : isExpanded;\n\n const El = as;\n const type = El === \"button\" ? \"button\" : undefined;\n\n return (\n <El\n aria-expanded={isExpanded}\n data-testid=\"jkl-expander\"\n type={type}\n className={clsx(\"jkl-expander\", className, {\n \"jkl-expander--expanded\": isExpanded,\n \"jkl-expander--icon-only\": !children,\n })}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children && (\n <ContentWrapper>\n <span className=\"jkl-expander__text\">{children}</span>\n </ContentWrapper>\n )}\n <ArrowVerticalAnimated\n className=\"jkl-expander__arrow\"\n pointingDown={pointingDown}\n bold={isExpanded}\n />\n </El>\n );\n },\n);\n\nExpander.displayName = \"Expander\";\n"],"names":["Expander","React","forwardRef","as","className","children","density","expandDirection","isExpanded","hideLabel","rest","ref","ContentWrapper","ScreenReaderOnly","Fragment","pointingDown","El","type","jsxs","clsx","jsx","ArrowVerticalAnimated","bold","displayName"],"mappings":"mRA+BaA,EAAWC,EAAMC,YAC1B,EAEQC,GAAAA,EAAK,SACLC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EAAkB,OAClBC,WAAAA,GAAa,EACbC,UAAAA,GAAY,KACTC,GAEPC,KAEM,MAAAC,EAAiBH,EAAYI,mBAAmBZ,EAAMa,SACtDC,EACkB,SAApBR,GAA8BC,EAAaA,EAEzCQ,EAAKb,EACLc,EAAc,WAAPD,EAAkB,cAAW,EAGtC,OAAAE,EAAAA,KAACF,EAAA,CACG,gBAAeR,EACf,cAAY,eACZS,KAAAA,EACAb,UAAWe,EAAAA,KAAK,eAAgBf,EAAW,CACvC,yBAA0BI,EAC1B,2BAA4BH,OAE5BK,EACJ,eAAcJ,EACdK,IAAAA,EAECN,SAAA,CAAAA,SACIO,EACG,CAAAP,SAAAe,EAAAA,IAAC,QAAKhB,UAAU,qBAAsBC,SAAAA,MAG9Ce,EAAAA,IAACC,EAAAA,sBAAA,CACGjB,UAAU,sBACVW,aAAAA,EACAO,KAAMd,MACV,IAMhBR,EAASuB,YAAc"}

package/build/cjs/components/expander/Expander.d.cts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { Density, WithChildren } from '../../core/types.cjs';
-export type ExpandDirection = "up" | "down";
 export interface ExpanderProps extends WithChildren {
     as?: "summary" | "button";
     /** Må settes dersom du ikke bruker CoreToggle. Verdien skal være IDen til innholdet du ekspanderer. */
@@ -16,7 +15,7 @@ export interface ExpanderProps extends WithChildren {
      */
     isExpanded?: boolean;
     /** @default "down" */
-    expandDirection?: ExpandDirection;
+    expandDirection?: "up" | "down";
     density?: Density;
     /**
      * Skjul knappeteksten visuelt.

package/build/cjs/components/expander/index.d.cts CHANGED Viewed

@@ -1,4 +1,2 @@
-export type { ExpanderProps as ExpandButtonProps } from './Expander.cjs';
-export { Expander } from './Expander.cjs';
-export type { ExpandSectionProps } from './ExpandSection.cjs';
-export { ExpandSection } from './ExpandSection.cjs';
+export { Expander, type ExpanderProps } from './Expander.cjs';
+export { ExpandSection, type ExpandSectionProps } from './ExpandSection.cjs';

package/build/cjs/components/feedback/Feedback.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Feedback.cjs","sources":["../../../../src/components/feedback/Feedback.tsx"],"sourcesContent":["import React, {~~\n ComponentProps,\n~~ ReactElement~~,\n~~ ReactNode~~,\n~~ useState~~,\n~~} from \"react\";\nimport { BaseTextAreaProps } from \"../text-input/BaseTextArea.js\";\nimport { FeedbackContextProvider } from \"./feedbackContext.js\";\nimport { Followup } from \"./followup/Followup.js\";\nimport { MainQuestion } from \"./main-question/MainQuestion.js\";\nimport { ContactQuestion } from \"./questions/ContactQuestion.js\";\nimport { FeedbackOption, FeedbackType } from \"./types.js\";\n\~~ntype~~ ~~FollowupProps~~ = ~~ComponentProps<typeof Followup>;\ntype ContactQuestionProps~~ = ~~ComponentProps<typeof ContactQuestion>;\n\ntype Props =~~ {\n className?: string;\n /** Velg typen alternativer, Smiley eller RadioButtons. /\n type: \"radio\" \| \"smiley\";\n /* Spørsmålet som stilles til brukeren /\n label: string;\n /* Hjelpetekst til hovedspørsmålet /\n helpLabel?: string;\n /* Svaralternativer til spørsmålet /\n options: FeedbackOption[];\n /* Dersom du vil stille et åpent spørsmål i tillegg kan du sette denne til en truthy verdi /\n addOnQuestion?:\n \| {\n /* Spørsmålet du vil stille /\n label?: string;\n /* Eventuell hjelpetekst. Om du ikke spesifiserer en vil det vises en påminnelse om å ikke skrive inn personling informasjon. /\n helpLabel?: string;\n }\n \| boolean;\n /* Lar deg tilpasse meldingen som kommer når brukeren sender inn tilbakemeldingen. /\n successMessage?: {\n title: string;\n children: ReactNode;\n };\n /\n Funksjon for å håndtere innsending av tilbakemelding\n * @param value Verdien av tilbakemeldingen. Dette er et objekt med følgende egenskaper:\n * - `feedbackValue`: Selve verdien av tilbakemeldingen (format varierer etter spørsmålstype)\n * - `intentionalSubmit`: Er `true` hvis brukeren aktivt sendte inn skjemaet, `false` hvis skjemaet ble sendt inn automatisk\n * - `message`: Eventuell utfyllende melding fra bruker. Blir kun sendt inn ved aktiv innsending\n /\n onSubmit: (value: FeedbackType) => void;\n followup?: FollowupProps;\n contactQuestion?: ContactQuestionProps;\n /\n Hvis du ønsker at Feedback formen skal eksponeres som et landmark kan du sende inn\n * hva du ønsker at en skjermleser skal kalle den her. Bare eksponer Feedback som et\n * landmark på sider der den er en viktig del av innholdet, feks en kvitteringsside\n * eller et annet sted det å kunne gi tilbakemelding vil føles naturlig eller forventet\n * for brukeren.\n /\n landmarkLabel?: string;\n} & Pick<BaseTextAreaProps, \"counter\">;\n\nexport const Feedback = ({\n className,\n followup,\n contactQuestion,\n counter,\n landmarkLabel,\n ...mainQuestionProps\n}: ~~Props~~): ReactElement => {\n const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);\n const [followupStarted, setFollowupStarted] = useState(false);\n const [followupSubmitted, setFollowupSubmitted] = useState(false);\n const [contactSubmitted, setContactSubmitted] = useState(false);\n\n return (\n <div\n className={`jkl-feedback ${className \|\| \"\"}`}\n data-testid=\"feedback\"\n >\n <FeedbackContextProvider\n value={{\n feedbackSubmitted,\n followupStarted,\n followupSubmitted,\n contactSubmitted,\n counter,\n landmarkLabel,\n setFeedbackSubmitted,\n setFollowupStarted,\n setFollowupSubmitted,\n setContactSubmitted,\n }}\n >\n {!followupStarted && <MainQuestion {...mainQuestionProps} />}\n {feedbackSubmitted && !contactSubmitted && followup && (\n <Followup {...followup} />\n )}\n {contactQuestion && (\n <div aria-live=\"polite\">\n {/ Show contact question after followup, or after feedback if no followup */}\n {((!followup && feedbackSubmitted) \|\|\n followupSubmitted) && (\n <ContactQuestion {...contactQuestion} />\n )}\n </div>\n )}\n </FeedbackContextProvider>\n </div>\n );\n};\n"],"names":["className","followup","contactQuestion","counter","landmarkLabel","mainQuestionProps","feedbackSubmitted","setFeedbackSubmitted","useState","followupStarted","setFollowupStarted","followupSubmitted","setFollowupSubmitted","contactSubmitted","setContactSubmitted","jsx","children","jsxs","FeedbackContextProvider","value","MainQuestion","Followup","ContactQuestion"],"mappings":"~~4TA4DwB~~,EACpBA,UAAAA,EACAC,SAAAA,EACAC,gBAAAA,EACAC,QAAAA,EACAC,cAAAA,KACGC,MAEH,MAAOC,EAAmBC,GAAwBC,YAAS,IACpDC,EAAiBC,GAAsBF,YAAS,IAChDG,EAAmBC,GAAwBJ,YAAS,IACpDK,EAAkBC,GAAuBN,YAAS,GAGrD,OAAAO,EAAAA,IAAC,MAAA,CACGf,UAAW,gBAAgBA,GAAa,KACxC,cAAY,WAEZgB,SAAAC,EAAAA,KAACC,EAAAA,wBAAA,CACGC,MAAO,CACHb,kBAAAA,EACAG,gBAAAA,EACAE,kBAAAA,EACAE,iBAAAA,EACAV,QAAAA,EACAC,cAAAA,EACAG,qBAAAA,EACAG,mBAAAA,EACAE,qBAAAA,EACAE,oBAAAA,GAGHE,SAAA,EAACP,GAAmBM,EAAAA,IAACK,EAAcA,aAAA,IAAGf,IACtCC,IAAsBO,GAAoBZ,GACtCc,EAAAA,IAAAM,WAAA,IAAapB,IAEjBC,GACGa,EAAAA,IAAC,MAAI,CAAA,YAAU,SAERC,WAACf,GAAYK,GACZK,IACAI,MAACO,EAAAA,gBAAiB,IAAGpB,UAIrC"}
1	+ {"version":3,"file":"Feedback.cjs","sources":["../../../../src/components/feedback/Feedback.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useState } from \"react\";\nimport { BaseTextAreaProps } from \"../text-input/BaseTextArea.js\";\nimport { FeedbackContextProvider } from \"./feedbackContext.js\";\nimport { Followup } from \"./followup/Followup.js\";\nimport { MainQuestion } from \"./main-question/MainQuestion.js\";\nimport { ContactQuestion } from \"./questions/ContactQuestion.js\";\nimport {\n ContactQuestionProps,\n FeedbackOption,\n FeedbackType,\n FollowupProps,\n} from \"./types.js\";\n\nexport type FeedbackProps = {\n className?: string;\n /** Velg typen alternativer, Smiley eller RadioButtons. /\n type: \"radio\" \| \"smiley\";\n /* Spørsmålet som stilles til brukeren /\n label: string;\n /* Hjelpetekst til hovedspørsmålet /\n helpLabel?: string;\n /* Svaralternativer til spørsmålet /\n options: FeedbackOption[];\n /* Dersom du vil stille et åpent spørsmål i tillegg kan du sette denne til en truthy verdi /\n addOnQuestion?:\n \| {\n /* Spørsmålet du vil stille /\n label?: string;\n /* Eventuell hjelpetekst. Om du ikke spesifiserer en vil det vises en påminnelse om å ikke skrive inn personling informasjon. /\n helpLabel?: string;\n }\n \| boolean;\n /* Lar deg tilpasse meldingen som kommer når brukeren sender inn tilbakemeldingen. /\n successMessage?: {\n title: string;\n children: ReactNode;\n };\n /\n Funksjon for å håndtere innsending av tilbakemelding\n * @param value Verdien av tilbakemeldingen. Dette er et objekt med følgende egenskaper:\n * - `feedbackValue`: Selve verdien av tilbakemeldingen (format varierer etter spørsmålstype)\n * - `intentionalSubmit`: Er `true` hvis brukeren aktivt sendte inn skjemaet, `false` hvis skjemaet ble sendt inn automatisk\n * - `message`: Eventuell utfyllende melding fra bruker. Blir kun sendt inn ved aktiv innsending\n /\n onSubmit: (value: FeedbackType) => void;\n followup?: FollowupProps;\n contactQuestion?: ContactQuestionProps;\n /\n Hvis du ønsker at Feedback formen skal eksponeres som et landmark kan du sende inn\n * hva du ønsker at en skjermleser skal kalle den her. Bare eksponer Feedback som et\n * landmark på sider der den er en viktig del av innholdet, feks en kvitteringsside\n * eller et annet sted det å kunne gi tilbakemelding vil føles naturlig eller forventet\n * for brukeren.\n /\n landmarkLabel?: string;\n} & Pick<BaseTextAreaProps, \"counter\">;\n\nexport const Feedback = ({\n className,\n followup,\n contactQuestion,\n counter,\n landmarkLabel,\n ...mainQuestionProps\n}: FeedbackProps): ReactElement => {\n const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);\n const [followupStarted, setFollowupStarted] = useState(false);\n const [followupSubmitted, setFollowupSubmitted] = useState(false);\n const [contactSubmitted, setContactSubmitted] = useState(false);\n\n return (\n <div\n className={`jkl-feedback ${className \|\| \"\"}`}\n data-testid=\"feedback\"\n >\n <FeedbackContextProvider\n value={{\n feedbackSubmitted,\n followupStarted,\n followupSubmitted,\n contactSubmitted,\n counter,\n landmarkLabel,\n setFeedbackSubmitted,\n setFollowupStarted,\n setFollowupSubmitted,\n setContactSubmitted,\n }}\n >\n {!followupStarted && <MainQuestion {...mainQuestionProps} />}\n {feedbackSubmitted && !contactSubmitted && followup && (\n <Followup {...followup} />\n )}\n {contactQuestion && (\n <div aria-live=\"polite\">\n {/ Show contact question after followup, or after feedback if no followup */}\n {((!followup && feedbackSubmitted) \|\|\n followupSubmitted) && (\n <ContactQuestion {...contactQuestion} />\n )}\n </div>\n )}\n </FeedbackContextProvider>\n </div>\n );\n};\n"],"names":["className","followup","contactQuestion","counter","landmarkLabel","mainQuestionProps","feedbackSubmitted","setFeedbackSubmitted","useState","followupStarted","setFollowupStarted","followupSubmitted","setFollowupSubmitted","contactSubmitted","setContactSubmitted","jsx","children","jsxs","FeedbackContextProvider","value","MainQuestion","Followup","ContactQuestion"],"mappings":"4TAyDwB,EACpBA,UAAAA,EACAC,SAAAA,EACAC,gBAAAA,EACAC,QAAAA,EACAC,cAAAA,KACGC,MAEH,MAAOC,EAAmBC,GAAwBC,YAAS,IACpDC,EAAiBC,GAAsBF,YAAS,IAChDG,EAAmBC,GAAwBJ,YAAS,IACpDK,EAAkBC,GAAuBN,YAAS,GAGrD,OAAAO,EAAAA,IAAC,MAAA,CACGf,UAAW,gBAAgBA,GAAa,KACxC,cAAY,WAEZgB,SAAAC,EAAAA,KAACC,EAAAA,wBAAA,CACGC,MAAO,CACHb,kBAAAA,EACAG,gBAAAA,EACAE,kBAAAA,EACAE,iBAAAA,EACAV,QAAAA,EACAC,cAAAA,EACAG,qBAAAA,EACAG,mBAAAA,EACAE,qBAAAA,EACAE,oBAAAA,GAGHE,SAAA,EAACP,GAAmBM,EAAAA,IAACK,EAAcA,aAAA,IAAGf,IACtCC,IAAsBO,GAAoBZ,GACtCc,EAAAA,IAAAM,WAAA,IAAapB,IAEjBC,GACGa,EAAAA,IAAC,MAAI,CAAA,YAAU,SAERC,WAACf,GAAYK,GACZK,IACAI,MAACO,EAAAA,gBAAiB,IAAGpB,UAIrC"}

package/build/cjs/components/feedback/Feedback.d.cts CHANGED Viewed

@@ -1,11 +1,7 @@
-import { ComponentProps, ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { BaseTextAreaProps } from '../text-input/BaseTextArea.cjs';
-import { Followup } from './followup/Followup.cjs';
-import { ContactQuestion } from './questions/ContactQuestion.cjs';
-import { FeedbackOption, FeedbackType } from './types.cjs';
-type FollowupProps = ComponentProps<typeof Followup>;
-type ContactQuestionProps = ComponentProps<typeof ContactQuestion>;
-type Props = {
+import { ContactQuestionProps, FeedbackOption, FeedbackType, FollowupProps } from './types.cjs';
+export type FeedbackProps = {
     className?: string;
     /** Velg typen alternativer, Smiley eller RadioButtons. */
     type: "radio" | "smiley";
@@ -46,5 +42,4 @@ type Props = {
      */
     landmarkLabel?: string;
 } & Pick<BaseTextAreaProps, "counter">;
-export declare const Feedback: ({ className, followup, contactQuestion, counter, landmarkLabel, ...mainQuestionProps }: Props) => ReactElement;
-export {};
+export declare const Feedback: ({ className, followup, contactQuestion, counter, landmarkLabel, ...mainQuestionProps }: FeedbackProps) => ReactElement;