@fremtind/jokul 5.0.0-next.13 → 5.0.0-next.14
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.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/expander/Accordion.cjs +2 -0
- package/build/cjs/components/expander/Accordion.cjs.map +1 -0
- package/build/cjs/components/expander/Accordion.d.cts +2 -0
- package/build/cjs/components/expander/ExpandablePanel.cjs +1 -1
- package/build/cjs/components/expander/ExpandablePanel.cjs.map +1 -1
- package/build/cjs/components/expander/ExpandablePanelContent.cjs +1 -1
- package/build/cjs/components/expander/ExpandablePanelContent.cjs.map +1 -1
- package/build/cjs/components/expander/index.d.cts +1 -1
- package/build/cjs/components/expander/types.d.cts +5 -2
- package/build/cjs/components/link-list/LinkList.cjs +1 -1
- package/build/cjs/components/link-list/LinkList.cjs.map +1 -1
- package/build/cjs/components/link-list/LinkList.d.cts +1 -1
- package/build/cjs/components/link-list/types.d.cts +1 -0
- package/build/cjs/utilities/types.cjs +1 -1
- package/build/cjs/utilities/types.cjs.map +1 -1
- package/build/cjs/utilities/types.d.cts +1 -1
- package/build/es/components/expander/Accordion.d.ts +2 -0
- package/build/es/components/expander/Accordion.js +2 -0
- package/build/es/components/expander/Accordion.js.map +1 -0
- package/build/es/components/expander/ExpandablePanel.js +1 -1
- package/build/es/components/expander/ExpandablePanel.js.map +1 -1
- package/build/es/components/expander/ExpandablePanelContent.js +1 -1
- package/build/es/components/expander/ExpandablePanelContent.js.map +1 -1
- package/build/es/components/expander/index.d.ts +1 -1
- package/build/es/components/expander/types.d.ts +5 -2
- package/build/es/components/link-list/LinkList.d.ts +1 -1
- package/build/es/components/link-list/LinkList.js +1 -1
- package/build/es/components/link-list/LinkList.js.map +1 -1
- package/build/es/components/link-list/types.d.ts +1 -0
- package/build/es/utilities/types.d.ts +1 -1
- package/build/es/utilities/types.js +1 -1
- package/build/es/utilities/types.js.map +1 -1
- package/codemods/__tests__/import-paths.test.mjs +131 -32
- package/codemods/import-paths.mjs +38 -14
- package/codemods/transforms/expandable-panel.mjs +41 -0
- package/package.json +1 -1
- package/styles/base.css +95 -702
- package/styles/base.min.css +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/expander/_index.scss +1 -0
- package/styles/components/expander/accordion.css +21 -0
- package/styles/components/expander/accordion.min.css +1 -0
- package/styles/components/expander/accordion.scss +24 -0
- package/styles/components/expander/expandable.css +16 -27
- package/styles/components/expander/expandable.min.css +1 -1
- package/styles/components/expander/expandable.scss +5 -19
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/file-input.css +9 -9
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/link-list/link-list.css +6 -1
- package/styles/components/link-list/link-list.min.css +1 -1
- package/styles/components/link-list/link-list.scss +8 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -3
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +2 -2
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components.css +67 -52
- package/styles/components.min.css +1 -1
- package/styles/tailwind.css +95 -95
- package/styles/theme/_color-scheme.scss +95 -95
- package/styles/theme/_index.scss +0 -4
- package/styles/theme/brands/dnb/_color-scheme.scss +0 -121
- package/styles/theme/brands/dnb/_fonts.scss +0 -46
- package/styles/theme/brands/dnb/_index.scss +0 -2
- package/styles/theme/brands/eika/_color-scheme.scss +0 -121
- package/styles/theme/brands/eika/_fonts.scss +0 -46
- package/styles/theme/brands/eika/_index.scss +0 -2
- package/styles/theme/brands/fremtind/_color-scheme.scss +0 -121
- package/styles/theme/brands/fremtind/_fonts.scss +0 -30
- package/styles/theme/brands/fremtind/_index.scss +0 -2
- package/styles/theme/brands/sparebank1/_color-scheme.scss +0 -121
- package/styles/theme/brands/sparebank1/_fonts.scss +0 -38
- package/styles/theme/brands/sparebank1/_index.scss +0 -2
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs");exports.Accordion=({children:r,outlined:s=!1,className:t,...o})=>e.jsx("section",{className:c.clsx("jkl-accordion",t),"data-outlined":s,...o,children:r});
|
|
2
|
+
//# sourceMappingURL=Accordion.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/expander/Accordion.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport type { AccordionProps } from \"./types.js\";\n\nexport const Accordion = ({\n children,\n outlined = false,\n className,\n ...rest\n}: AccordionProps) => (\n <section\n className={clsx(\"jkl-accordion\", className)}\n data-outlined={outlined}\n {...rest}\n >\n {children}\n </section>\n);\n"],"names":["children","outlined","className","rest","jsx","clsx"],"mappings":"+KAGyB,EACrBA,SAAAA,EACAC,SAAAA,GAAW,EACXC,UAAAA,KACGC,KAEHC,EAAAA,IAAC,UAAA,CACGF,UAAWG,EAAAA,KAAK,gBAAiBH,GACjC,gBAAeD,KACXE,EAEHH,SAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=require("./ExpandablePanelContent.cjs"),r=require("./Expander.cjs"),s=require("./context.cjs"),l=Object.assign(t.forwardRef(function(a,r){const{children:l,as:i="details",outlined:o,open:d,defaultOpen:c,onOpenChange:p,className:u,...x}=a,[j,b]=t.useState(c||!1),[f,g]=t.useState(!1),[v,E]=t.useState(0),h=t.useRef();t.useImperativeHandle(r,()=>h.current,[]);const m=i,S=typeof d<"u",q=S?d:j;return t.useEffect(()=>{const e=e=>{b("open"===e.newState)},n=h.current;return n?.addEventListener("toggle",e),()=>n?.removeEventListener("toggle",e)},[]),e.jsxs("div",{className:"jkl-expandable-panel__wrapper",children:[e.jsx("div",{ref:e=>e?.setAttribute("inert","true"),className:"jkl-expandable-panel__focus-container",style:{height:v}}),e.jsx(m,{ref:h,"data-testid":"jkl-expand-section",className:n.clsx("jkl-expandable-panel",o&&"jkl-expandable-panel--outlined",u),open:"details"===i?q||f:void 0,"data-visible-content":q||f,...x,children:e.jsx(s.ExpanderContext.Provider,{value:{open:q,onToggle:()=>{S?p?.(!q):b(e=>(p?.(!e),!e))},onTransitionEnd:g,onTransitionStart:e=>{e&&g(!0)},setExpanderHeight:E},children:l})})]})}),{Content:a.ExpandablePanelContent,Header:r.Expander});exports.ExpandablePanel=l;
|
|
2
2
|
//# sourceMappingURL=ExpandablePanel.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandablePanel.cjs","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { Expander } from \"./Expander.jsx\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandablePanelComponent,\n ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n React.forwardRef(function ExpandablePanel<\n ElementType extends React.ElementType = \"details\",\n >(\n props: ExpandablePanelProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n ) {\n const {\n children,\n as = \"details\",\n
|
|
1
|
+
{"version":3,"file":"ExpandablePanel.cjs","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { Expander } from \"./Expander.jsx\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandablePanelComponent,\n ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n React.forwardRef(function ExpandablePanel<\n ElementType extends React.ElementType = \"details\",\n >(\n props: ExpandablePanelProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n ) {\n const {\n children,\n as = \"details\",\n outlined,\n open: controlledOpen,\n defaultOpen,\n onOpenChange,\n className,\n ...rest\n } = props;\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(\n defaultOpen || false,\n );\n const [contentIsVisible, setContentIsVisible] = useState(false);\n const [expanderHeight, setExpanderHeight] = useState(0);\n\n const internalRef = useRef<HTMLDetailsElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const El = as;\n const isControlled = typeof controlledOpen !== \"undefined\";\n const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n const setVisibleIfOpening = (isOpening: boolean) => {\n if (isOpening) {\n setContentIsVisible(true);\n }\n };\n\n const syncUncontrolledState = () => {\n if (isControlled) {\n onOpenChange?.(!isOpen);\n return;\n }\n setUncontrolledOpen((previousValue) => {\n onOpenChange?.(!previousValue);\n return !previousValue;\n });\n };\n\n useEffect(() => {\n const callback = (e: ToggleEvent & { newState: string }) => {\n setUncontrolledOpen(e.newState === \"open\");\n };\n\n const element = internalRef.current;\n\n element?.addEventListener(\"toggle\", callback as EventListener);\n\n return () =>\n element?.removeEventListener(\n \"toggle\",\n callback as EventListener,\n );\n }, []);\n\n return (\n <div className=\"jkl-expandable-panel__wrapper\">\n <div\n /*\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n */\n ref={(node) => node?.setAttribute(\"inert\", \"true\")}\n className=\"jkl-expandable-panel__focus-container\"\n style={{ height: expanderHeight }}\n />\n <El\n ref={internalRef}\n data-testid={\"jkl-expand-section\"}\n className={clsx(\n \"jkl-expandable-panel\",\n outlined && \"jkl-expandable-panel--outlined\",\n className,\n )}\n open={\n /* for the animation to work in Safari we must ensure that\n * the element is open *before* the transition starts */\n as === \"details\"\n ? isOpen || contentIsVisible\n : undefined\n }\n /* this attribute is used for styling purposes */\n data-visible-content={isOpen || contentIsVisible}\n {...rest}\n >\n <ExpanderContext.Provider\n value={{\n open: isOpen,\n onToggle: syncUncontrolledState,\n onTransitionEnd: setContentIsVisible,\n onTransitionStart: setVisibleIfOpening,\n setExpanderHeight,\n }}\n >\n {children}\n </ExpanderContext.Provider>\n </El>\n </div>\n );\n }),\n { Content: ExpandablePanelContent, Header: Expander },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","outlined","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","node","setAttribute","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent","Header","Expander"],"mappings":"iRAWaA,EAAkBC,OAAOC,OAClCC,EAAMC,WAAW,SAGbC,EACAC,GAEA,MACIC,SAAAA,EACAC,GAAAA,EAAK,UACLC,SAAAA,EACAC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAAAA,SAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,EAAAA,UAAS,IAClDG,EAAgBC,GAAqBJ,EAAAA,SAAS,GAE/CK,EAAcC,EAAAA,SACpBC,EAAAA,oBAAoBnB,EAAK,IAAMiB,EAAYG,QAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAmB/Cc,OAAAA,EAAAA,UAAU,KACN,MAAMC,EAAYC,IACdf,EAAmC,SAAfe,EAAEC,WAGpBC,EAAUX,EAAYG,QAE5B,OAAAQ,GAASC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,IAET,IAGCM,EAAAA,KAAC,MAAA,CAAIvB,UAAU,gCACXP,SAAA,CAAA+B,EAAAA,IAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,wCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAAAA,IAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EAAAA,KACP,uBACAlC,GAAY,iCACZK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAAAA,IAACM,EAAAA,gBAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA9DU,KACtBnB,EACAf,KAAgBgB,GAGpBZ,EAAqB+B,IACjBnC,KAAgBmC,IACRA,KAwDIC,gBAAiB7B,EACjB8B,kBAtESC,IACrBA,GACA/B,GAAoB,IAqERE,kBAAAA,GAGHf,SAAAA,QAKrB,GACA,CAAE6C,QAASC,yBAAwBC,OAAQC,EAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),r=require("../../hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs"),a=require("./context.cjs"),i=({className:i,children:s,...o})=>{const{open:c,onTransitionStart:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),r=require("../../hooks/useAnimatedHeight/useAnimatedHeightBetween.cjs"),a=require("./context.cjs"),i=({className:i,children:s,...o})=>{const{open:c,onTransitionStart:l,onTransitionEnd:d}=n.useContext(a.ExpanderContext),[u]=r.useAnimatedHeightBetween(c,{timing:"snappy",onTransitionStart:l,onTransitionEnd:d});return n.useEffect(()=>{const e=u.current;c?e?.removeAttribute("inert"):e?.setAttribute("inert","true")},[c,u]),e.jsx("div",{ref:u,className:t.clsx("jkl-expandable-panel__content",i),...o,"data-expanded":c,children:e.jsx("div",{className:"jkl-expandable-panel__content-wrapper",children:s})})};i.displayName="ExpandablePanel.Content",exports.ExpandablePanelContent=i;
|
|
2
2
|
//# sourceMappingURL=ExpandablePanelContent.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandablePanelContent.cjs","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useEffect } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n className,\n children,\n ...rest\n}) => {\n const { open, onTransitionStart, onTransitionEnd } =\n useContext<ExpandableContext>(ExpanderContext);\n\n const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n timing: \"snappy\",\n onTransitionStart,\n onTransitionEnd,\n });\n\n /*\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n */\n useEffect(() => {\n const node = animationRef.current;\n\n if (!open) {\n node?.setAttribute(\"inert\", \"true\");\n } else {\n node?.removeAttribute(\"inert\");\n }\n }, [open, animationRef]);\n\n return (\n <div\n ref={animationRef}\n className={clsx(\"jkl-
|
|
1
|
+
{"version":3,"file":"ExpandablePanelContent.cjs","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useEffect } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n className,\n children,\n ...rest\n}) => {\n const { open, onTransitionStart, onTransitionEnd } =\n useContext<ExpandableContext>(ExpanderContext);\n\n const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n timing: \"snappy\",\n onTransitionStart,\n onTransitionEnd,\n });\n\n /*\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n */\n useEffect(() => {\n const node = animationRef.current;\n\n if (!open) {\n node?.setAttribute(\"inert\", \"true\");\n } else {\n node?.removeAttribute(\"inert\");\n }\n }, [open, animationRef]);\n\n return (\n <div\n ref={animationRef}\n className={clsx(\"jkl-expandable-panel__content\", className)}\n {...rest}\n data-expanded={open}\n >\n <div className=\"jkl-expandable-panel__content-wrapper\">\n {children}\n </div>\n </div>\n );\n};\n\nExpandablePanelContent.displayName = \"ExpandablePanel.Content\";\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","useEffect","node","current","removeAttribute","setAttribute","jsx","ref","clsx","displayName"],"mappings":"mRASaA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAAAA,WAA8BC,EAAAA,kBAE3BC,GAAgBC,EAAAA,yBAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IASJM,OAAAA,EAAAA,UAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFtBF,GAAMG,aAAa,QAAS,SAIjC,CAACZ,EAAMK,IAGNQ,EAAAA,IAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAAA,KAAK,gCAAiClB,MAC7CE,EACJ,gBAAeC,EAEfF,SAAAe,EAAAA,IAAC,MAAA,CAAIhB,UAAU,wCACVC,SAAAA,OAMjBF,EAAuBoB,YAAc"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { ComponentProps, FC, RefObject } from 'react';
|
|
1
|
+
import { ComponentProps, FC, HTMLAttributes, RefObject } from 'react';
|
|
2
2
|
import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.cjs';
|
|
3
3
|
export type ExpandablePanelContentComponent = FC<ComponentProps<"div"> & {}>;
|
|
4
4
|
export type ExpandablePanelProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
|
|
5
|
-
|
|
5
|
+
outlined?: boolean;
|
|
6
6
|
open?: boolean;
|
|
7
7
|
defaultOpen?: boolean;
|
|
8
8
|
onOpenChange?: (open: boolean) => void;
|
|
@@ -27,4 +27,7 @@ export type ExpandableContext = {
|
|
|
27
27
|
onTransitionEnd: (isOpen: boolean, ref: RefObject<HTMLElement | HTMLDetailsElement | null>) => void;
|
|
28
28
|
setExpanderHeight: (height: number) => void;
|
|
29
29
|
};
|
|
30
|
+
export type AccordionProps = HTMLAttributes<HTMLDivElement> & {
|
|
31
|
+
outlined?: boolean;
|
|
32
|
+
};
|
|
30
33
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),s=require("./LinkListLink.cjs"),t=({label:s,hideLabel:t=!0,className:r,...
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),s=require("./LinkListLink.cjs"),t=({label:s,hideLabel:t=!0,outlined:a=!1,className:r,...n})=>{const c=i.useId();return e.jsxs("nav",{className:l.clsx("jkl-link-list",r),"aria-labelledby":`list-${c}-label`,"data-outlined":a,children:[e.jsx("p",{className:"jkl-link-list-title",id:`list-${c}-label`,hidden:t,children:s}),e.jsx("ul",{"aria-labelledby":`list-${c}-label`,...n})]})};t.Link=s.LinkListLink,exports.LinkList=t;
|
|
2
2
|
//# sourceMappingURL=LinkList.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkList.cjs","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport { LinkListLink } from \"./LinkListLink.js\";\nimport type { LinkListProps } from \"./types.js\";\n\nexport const LinkList = ({\n label,\n hideLabel = true,\n className,\n ...rest\n}: LinkListProps): React.JSX.Element => {\n const id = useId();\n\n return (\n <nav\n className={clsx(\"jkl-link-list\", className)}\n aria-labelledby={`list-${id}-label`}\n >\n <p\n className=\"jkl-link-list-title\"\n id={`list-${id}-label`}\n hidden={hideLabel}\n >\n {label}\n </p>\n <ul aria-labelledby={`list-${id}-label`} {...rest} />\n </nav>\n );\n};\n\nLinkList.Link = LinkListLink;\n"],"names":["LinkList","label","hideLabel","className","rest","id","useId","jsxs","clsx","children","jsx","hidden","Link","LinkListLink"],"mappings":"gNAKaA,EAAW,EACpBC,MAAAA,EACAC,UAAAA,GAAY,EACZC,UAAAA,KACGC,MAEH,MAAMC,EAAKC,EAAAA,QAEX,OACIC,EAAAA,KAAC,MAAA,CACGJ,UAAWK,EAAAA,KAAK,gBAAiBL,GACjC,kBAAiB,QAAQE,
|
|
1
|
+
{"version":3,"file":"LinkList.cjs","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport { LinkListLink } from \"./LinkListLink.js\";\nimport type { LinkListProps } from \"./types.js\";\n\nexport const LinkList = ({\n label,\n hideLabel = true,\n outlined = false,\n className,\n ...rest\n}: LinkListProps): React.JSX.Element => {\n const id = useId();\n\n return (\n <nav\n className={clsx(\"jkl-link-list\", className)}\n aria-labelledby={`list-${id}-label`}\n data-outlined={outlined}\n >\n <p\n className=\"jkl-link-list-title\"\n id={`list-${id}-label`}\n hidden={hideLabel}\n >\n {label}\n </p>\n <ul aria-labelledby={`list-${id}-label`} {...rest} />\n </nav>\n );\n};\n\nLinkList.Link = LinkListLink;\n"],"names":["LinkList","label","hideLabel","outlined","className","rest","id","useId","jsxs","clsx","children","jsx","hidden","Link","LinkListLink"],"mappings":"gNAKaA,EAAW,EACpBC,MAAAA,EACAC,UAAAA,GAAY,EACZC,SAAAA,GAAW,EACXC,UAAAA,KACGC,MAEH,MAAMC,EAAKC,EAAAA,QAEX,OACIC,EAAAA,KAAC,MAAA,CACGJ,UAAWK,EAAAA,KAAK,gBAAiBL,GACjC,kBAAiB,QAAQE,UACzB,gBAAeH,EAEfO,SAAA,CAAAC,EAAAA,IAAC,IAAA,CACGP,UAAU,sBACVE,GAAI,QAAQA,UACZM,OAAQV,EAEPQ,SAAAT,UAEJ,KAAA,CAAG,kBAAiB,QAAQK,aAAgBD,QAKzDL,EAASa,KAAOC,EAAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { LinkListProps } from './types.cjs';
|
|
3
3
|
export declare const LinkList: {
|
|
4
|
-
({ label, hideLabel, className, ...rest }: LinkListProps): React.JSX.Element;
|
|
4
|
+
({ label, hideLabel, outlined, className, ...rest }: LinkListProps): React.JSX.Element;
|
|
5
5
|
Link: React.ForwardRefExoticComponent<Omit<import('../../utilities/index.js').PolymorphicPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
|
|
6
6
|
};
|
|
@@ -3,5 +3,6 @@ import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphi
|
|
|
3
3
|
export type LinkListProps = HTMLAttributes<HTMLUListElement> & {
|
|
4
4
|
label: string;
|
|
5
5
|
hideLabel?: boolean;
|
|
6
|
+
outlined?: boolean;
|
|
6
7
|
};
|
|
7
8
|
export type LinkListLinkComponent = <ElementType extends React.ElementType = "a">(props: PolymorphicPropsWithRef<ElementType>) => React.ReactElement | null;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.BRANDS=[
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.BRANDS=[];
|
|
2
2
|
//# sourceMappingURL=types.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n \"data-testautoid\"?: string;\n}\n\nexport type ColorScheme = \"light\" | \"dark\";\n\nexport type Size = \"small\" | \"medium\" | \"large\";\n\nexport const BRANDS = [
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n \"data-testautoid\"?: string;\n}\n\nexport type ColorScheme = \"light\" | \"dark\";\n\nexport type Size = \"small\" | \"medium\" | \"large\";\n\nexport const BRANDS = [] as const;\n\nexport type Brand = (typeof BRANDS)[number];\n\nexport type Easing = keyof typeof tokens.motion.easing;\nexport type Timing = keyof typeof tokens.motion.timing;\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n * Dersom de er valgfrie (for eksempel om du har en standardverdi) bruker du\n * WithOptionalChildren.\n *\n * @see WithOptionalChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithChildren {\n children: ReactNode | ReactNode[];\n}\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n *\n * Om du alltid forventer å få children, bruk WithChildren.\n *\n * @see WithChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithOptionalChildren {\n children?: ReactNode | ReactNode[];\n}\n"],"names":[],"mappings":"+FAasB"}
|
|
@@ -5,7 +5,7 @@ export interface DataTestAutoId {
|
|
|
5
5
|
}
|
|
6
6
|
export type ColorScheme = "light" | "dark";
|
|
7
7
|
export type Size = "small" | "medium" | "large";
|
|
8
|
-
export declare const BRANDS: readonly [
|
|
8
|
+
export declare const BRANDS: readonly [];
|
|
9
9
|
export type Brand = (typeof BRANDS)[number];
|
|
10
10
|
export type Easing = keyof typeof tokens.motion.easing;
|
|
11
11
|
export type Timing = keyof typeof tokens.motion.timing;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as c}from"react/jsx-runtime";import{c as o}from"../../../clsx-BeLtu-UY.js";const s=({children:s,outlined:a=!1,className:r,...e})=>c("section",{className:o("jkl-accordion",r),"data-outlined":a,...e,children:s});export{s as Accordion};
|
|
2
|
+
//# sourceMappingURL=Accordion.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../../src/components/expander/Accordion.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport type { AccordionProps } from \"./types.js\";\n\nexport const Accordion = ({\n children,\n outlined = false,\n className,\n ...rest\n}: AccordionProps) => (\n <section\n className={clsx(\"jkl-accordion\", className)}\n data-outlined={outlined}\n {...rest}\n >\n {children}\n </section>\n);\n"],"names":["Accordion","children","outlined","className","rest","jsx","clsx"],"mappings":"sFAGO,MAAMA,EAAY,EACrBC,SAAAA,EACAC,SAAAA,GAAW,EACXC,UAAAA,KACGC,KAEHC,EAAC,UAAA,CACGF,UAAWG,EAAK,gBAAiBH,GACjC,gBAAeD,KACXE,EAEHH,SAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as
|
|
1
|
+
import{jsxs as e,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import t,{useState as r,useRef as s,useImperativeHandle as o,useEffect as l}from"react";import{ExpandablePanelContent as i}from"./ExpandablePanelContent.js";import{Expander as d}from"./Expander.js";import{ExpanderContext as p}from"./context.js";const c=Object.assign(t.forwardRef(function(t,i){const{children:d,as:c="details",outlined:m,open:x,defaultOpen:u,onOpenChange:f,className:j,...E}=t,[b,g]=r(u||!1),[v,h]=r(!1),[k,C]=r(0),N=s();o(i,()=>N.current,[]);const P=c,_=typeof x<"u",w=_?x:b;return l(()=>{const e=e=>{g("open"===e.newState)},n=N.current;return n?.addEventListener("toggle",e),()=>n?.removeEventListener("toggle",e)},[]),e("div",{className:"jkl-expandable-panel__wrapper",children:[n("div",{ref:e=>e?.setAttribute("inert","true"),className:"jkl-expandable-panel__focus-container",style:{height:k}}),n(P,{ref:N,"data-testid":"jkl-expand-section",className:a("jkl-expandable-panel",m&&"jkl-expandable-panel--outlined",j),open:"details"===c?w||v:void 0,"data-visible-content":w||v,...E,children:n(p.Provider,{value:{open:w,onToggle:()=>{_?f?.(!w):g(e=>(f?.(!e),!e))},onTransitionEnd:h,onTransitionStart:e=>{e&&h(!0)},setExpanderHeight:C},children:d})})]})}),{Content:i,Header:d});export{c as ExpandablePanel};
|
|
2
2
|
//# sourceMappingURL=ExpandablePanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandablePanel.js","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { Expander } from \"./Expander.jsx\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandablePanelComponent,\n ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n React.forwardRef(function ExpandablePanel<\n ElementType extends React.ElementType = \"details\",\n >(\n props: ExpandablePanelProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n ) {\n const {\n children,\n as = \"details\",\n
|
|
1
|
+
{"version":3,"file":"ExpandablePanel.js","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { Expander } from \"./Expander.jsx\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandablePanelComponent,\n ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n React.forwardRef(function ExpandablePanel<\n ElementType extends React.ElementType = \"details\",\n >(\n props: ExpandablePanelProps<ElementType>,\n ref?: PolymorphicRef<ElementType>,\n ) {\n const {\n children,\n as = \"details\",\n outlined,\n open: controlledOpen,\n defaultOpen,\n onOpenChange,\n className,\n ...rest\n } = props;\n\n const [uncontrolledOpen, setUncontrolledOpen] = useState(\n defaultOpen || false,\n );\n const [contentIsVisible, setContentIsVisible] = useState(false);\n const [expanderHeight, setExpanderHeight] = useState(0);\n\n const internalRef = useRef<HTMLDetailsElement>();\n useImperativeHandle(ref, () => internalRef.current, []);\n\n const El = as;\n const isControlled = typeof controlledOpen !== \"undefined\";\n const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n const setVisibleIfOpening = (isOpening: boolean) => {\n if (isOpening) {\n setContentIsVisible(true);\n }\n };\n\n const syncUncontrolledState = () => {\n if (isControlled) {\n onOpenChange?.(!isOpen);\n return;\n }\n setUncontrolledOpen((previousValue) => {\n onOpenChange?.(!previousValue);\n return !previousValue;\n });\n };\n\n useEffect(() => {\n const callback = (e: ToggleEvent & { newState: string }) => {\n setUncontrolledOpen(e.newState === \"open\");\n };\n\n const element = internalRef.current;\n\n element?.addEventListener(\"toggle\", callback as EventListener);\n\n return () =>\n element?.removeEventListener(\n \"toggle\",\n callback as EventListener,\n );\n }, []);\n\n return (\n <div className=\"jkl-expandable-panel__wrapper\">\n <div\n /*\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n */\n ref={(node) => node?.setAttribute(\"inert\", \"true\")}\n className=\"jkl-expandable-panel__focus-container\"\n style={{ height: expanderHeight }}\n />\n <El\n ref={internalRef}\n data-testid={\"jkl-expand-section\"}\n className={clsx(\n \"jkl-expandable-panel\",\n outlined && \"jkl-expandable-panel--outlined\",\n className,\n )}\n open={\n /* for the animation to work in Safari we must ensure that\n * the element is open *before* the transition starts */\n as === \"details\"\n ? isOpen || contentIsVisible\n : undefined\n }\n /* this attribute is used for styling purposes */\n data-visible-content={isOpen || contentIsVisible}\n {...rest}\n >\n <ExpanderContext.Provider\n value={{\n open: isOpen,\n onToggle: syncUncontrolledState,\n onTransitionEnd: setContentIsVisible,\n onTransitionStart: setVisibleIfOpening,\n setExpanderHeight,\n }}\n >\n {children}\n </ExpanderContext.Provider>\n </El>\n </div>\n );\n }),\n { Content: ExpandablePanelContent, Header: Expander },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","outlined","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","node","setAttribute","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent","Header","Expander"],"mappings":"qVAWO,MAAMA,EAAkBC,OAAOC,OAClCC,EAAMC,WAAW,SAGbC,EACAC,GAEA,MACIC,SAAAA,EACAC,GAAAA,EAAK,UACLC,SAAAA,EACAC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,GAAS,IAClDG,EAAgBC,GAAqBJ,EAAS,GAE/CK,EAAcC,IACpBC,EAAoBnB,EAAK,IAAMiB,EAAYG,QAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAmB/C,OAAAc,EAAU,KACN,MAAMC,EAAYC,IACdf,EAAmC,SAAfe,EAAEC,WAGpBC,EAAUX,EAAYG,QAE5B,OAAAQ,GAASC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,IAET,IAGCM,EAAC,MAAA,CAAIvB,UAAU,gCACXP,SAAA,CAAA+B,EAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,wCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EACP,uBACAlC,GAAY,iCACZK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAACM,EAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA9DU,KACtBnB,EACAf,KAAgBgB,GAGpBZ,EAAqB+B,IACjBnC,KAAgBmC,IACRA,KAwDIC,gBAAiB7B,EACjB8B,kBAtESC,IACrBA,GACA/B,GAAoB,IAqERE,kBAAAA,GAGHf,SAAAA,QAKrB,GACA,CAAE6C,QAASC,EAAwBC,OAAQC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{useContext as n,useEffect as a}from"react";import{useAnimatedHeightBetween as r}from"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{ExpanderContext as s}from"./context.js";const o=({className:o,children:i,...m})=>{const{open:
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{useContext as n,useEffect as a}from"react";import{useAnimatedHeightBetween as r}from"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{ExpanderContext as s}from"./context.js";const o=({className:o,children:i,...m})=>{const{open:p,onTransitionStart:d,onTransitionEnd:c}=n(s),[l]=r(p,{timing:"snappy",onTransitionStart:d,onTransitionEnd:c});return a(()=>{const e=l.current;p?e?.removeAttribute("inert"):e?.setAttribute("inert","true")},[p,l]),e("div",{ref:l,className:t("jkl-expandable-panel__content",o),...m,"data-expanded":p,children:e("div",{className:"jkl-expandable-panel__content-wrapper",children:i})})};o.displayName="ExpandablePanel.Content";export{o as ExpandablePanelContent};
|
|
2
2
|
//# sourceMappingURL=ExpandablePanelContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandablePanelContent.js","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useEffect } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n className,\n children,\n ...rest\n}) => {\n const { open, onTransitionStart, onTransitionEnd } =\n useContext<ExpandableContext>(ExpanderContext);\n\n const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n timing: \"snappy\",\n onTransitionStart,\n onTransitionEnd,\n });\n\n /*\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n */\n useEffect(() => {\n const node = animationRef.current;\n\n if (!open) {\n node?.setAttribute(\"inert\", \"true\");\n } else {\n node?.removeAttribute(\"inert\");\n }\n }, [open, animationRef]);\n\n return (\n <div\n ref={animationRef}\n className={clsx(\"jkl-
|
|
1
|
+
{"version":3,"file":"ExpandablePanelContent.js","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useEffect } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n ExpandableContext,\n ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n className,\n children,\n ...rest\n}) => {\n const { open, onTransitionStart, onTransitionEnd } =\n useContext<ExpandableContext>(ExpanderContext);\n\n const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n timing: \"snappy\",\n onTransitionStart,\n onTransitionEnd,\n });\n\n /*\n Setter `inert` manuelt for å støtte både React 18 og 19.\n\n Dette unngår typefeil i React 18 og advarsler i React 19.\n Se: https://github.com/WICG/inert/issues/58\n */\n useEffect(() => {\n const node = animationRef.current;\n\n if (!open) {\n node?.setAttribute(\"inert\", \"true\");\n } else {\n node?.removeAttribute(\"inert\");\n }\n }, [open, animationRef]);\n\n return (\n <div\n ref={animationRef}\n className={clsx(\"jkl-expandable-panel__content\", className)}\n {...rest}\n data-expanded={open}\n >\n <div className=\"jkl-expandable-panel__content-wrapper\">\n {children}\n </div>\n </div>\n );\n};\n\nExpandablePanelContent.displayName = \"ExpandablePanel.Content\";\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","useEffect","node","current","removeAttribute","setAttribute","jsx","ref","clsx","displayName"],"mappings":"4RASO,MAAMA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAA8BC,IAE3BC,GAAgBC,EAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IASJ,OAAAM,EAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFtBF,GAAMG,aAAa,QAAS,SAIjC,CAACZ,EAAMK,IAGNQ,EAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAK,gCAAiClB,MAC7CE,EACJ,gBAAeC,EAEfF,SAAAe,EAAC,MAAA,CAAIhB,UAAU,wCACVC,SAAAA,OAMjBF,EAAuBoB,YAAc"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { ComponentProps, FC, RefObject } from 'react';
|
|
1
|
+
import { ComponentProps, FC, HTMLAttributes, RefObject } from 'react';
|
|
2
2
|
import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
|
|
3
3
|
export type ExpandablePanelContentComponent = FC<ComponentProps<"div"> & {}>;
|
|
4
4
|
export type ExpandablePanelProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
|
|
5
|
-
|
|
5
|
+
outlined?: boolean;
|
|
6
6
|
open?: boolean;
|
|
7
7
|
defaultOpen?: boolean;
|
|
8
8
|
onOpenChange?: (open: boolean) => void;
|
|
@@ -27,4 +27,7 @@ export type ExpandableContext = {
|
|
|
27
27
|
onTransitionEnd: (isOpen: boolean, ref: RefObject<HTMLElement | HTMLDetailsElement | null>) => void;
|
|
28
28
|
setExpanderHeight: (height: number) => void;
|
|
29
29
|
};
|
|
30
|
+
export type AccordionProps = HTMLAttributes<HTMLDivElement> & {
|
|
31
|
+
outlined?: boolean;
|
|
32
|
+
};
|
|
30
33
|
export {};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { LinkListProps } from './types.js';
|
|
3
3
|
export declare const LinkList: {
|
|
4
|
-
({ label, hideLabel, className, ...rest }: LinkListProps): React.JSX.Element;
|
|
4
|
+
({ label, hideLabel, outlined, className, ...rest }: LinkListProps): React.JSX.Element;
|
|
5
5
|
Link: React.ForwardRefExoticComponent<Omit<import('../../utilities/index.js').PolymorphicPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
|
|
6
6
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as l,jsx as
|
|
1
|
+
import{jsxs as l,jsx as i}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{useId as a}from"react";import{LinkListLink as e}from"./LinkListLink.js";const t=({label:e,hideLabel:t=!0,outlined:n=!1,className:r,...o})=>{const d=a();return l("nav",{className:s("jkl-link-list",r),"aria-labelledby":`list-${d}-label`,"data-outlined":n,children:[i("p",{className:"jkl-link-list-title",id:`list-${d}-label`,hidden:t,children:e}),i("ul",{"aria-labelledby":`list-${d}-label`,...o})]})};t.Link=e;export{t as LinkList};
|
|
2
2
|
//# sourceMappingURL=LinkList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkList.js","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport { LinkListLink } from \"./LinkListLink.js\";\nimport type { LinkListProps } from \"./types.js\";\n\nexport const LinkList = ({\n label,\n hideLabel = true,\n className,\n ...rest\n}: LinkListProps): React.JSX.Element => {\n const id = useId();\n\n return (\n <nav\n className={clsx(\"jkl-link-list\", className)}\n aria-labelledby={`list-${id}-label`}\n >\n <p\n className=\"jkl-link-list-title\"\n id={`list-${id}-label`}\n hidden={hideLabel}\n >\n {label}\n </p>\n <ul aria-labelledby={`list-${id}-label`} {...rest} />\n </nav>\n );\n};\n\nLinkList.Link = LinkListLink;\n"],"names":["LinkList","label","hideLabel","className","rest","id","useId","jsxs","clsx","children","jsx","hidden","Link","LinkListLink"],"mappings":"+KAKO,MAAMA,EAAW,EACpBC,MAAAA,EACAC,UAAAA,GAAY,EACZC,UAAAA,KACGC,MAEH,MAAMC,EAAKC,IAEX,OACIC,EAAC,MAAA,CACGJ,UAAWK,EAAK,gBAAiBL,GACjC,kBAAiB,QAAQE,
|
|
1
|
+
{"version":3,"file":"LinkList.js","sources":["../../../../src/components/link-list/LinkList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useId } from \"react\";\nimport { LinkListLink } from \"./LinkListLink.js\";\nimport type { LinkListProps } from \"./types.js\";\n\nexport const LinkList = ({\n label,\n hideLabel = true,\n outlined = false,\n className,\n ...rest\n}: LinkListProps): React.JSX.Element => {\n const id = useId();\n\n return (\n <nav\n className={clsx(\"jkl-link-list\", className)}\n aria-labelledby={`list-${id}-label`}\n data-outlined={outlined}\n >\n <p\n className=\"jkl-link-list-title\"\n id={`list-${id}-label`}\n hidden={hideLabel}\n >\n {label}\n </p>\n <ul aria-labelledby={`list-${id}-label`} {...rest} />\n </nav>\n );\n};\n\nLinkList.Link = LinkListLink;\n"],"names":["LinkList","label","hideLabel","outlined","className","rest","id","useId","jsxs","clsx","children","jsx","hidden","Link","LinkListLink"],"mappings":"+KAKO,MAAMA,EAAW,EACpBC,MAAAA,EACAC,UAAAA,GAAY,EACZC,SAAAA,GAAW,EACXC,UAAAA,KACGC,MAEH,MAAMC,EAAKC,IAEX,OACIC,EAAC,MAAA,CACGJ,UAAWK,EAAK,gBAAiBL,GACjC,kBAAiB,QAAQE,UACzB,gBAAeH,EAEfO,SAAA,CAAAC,EAAC,IAAA,CACGP,UAAU,sBACVE,GAAI,QAAQA,UACZM,OAAQV,EAEPQ,SAAAT,MAEJ,KAAA,CAAG,kBAAiB,QAAQK,aAAgBD,QAKzDL,EAASa,KAAOC"}
|
|
@@ -3,5 +3,6 @@ import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphi
|
|
|
3
3
|
export type LinkListProps = HTMLAttributes<HTMLUListElement> & {
|
|
4
4
|
label: string;
|
|
5
5
|
hideLabel?: boolean;
|
|
6
|
+
outlined?: boolean;
|
|
6
7
|
};
|
|
7
8
|
export type LinkListLinkComponent = <ElementType extends React.ElementType = "a">(props: PolymorphicPropsWithRef<ElementType>) => React.ReactElement | null;
|
|
@@ -5,7 +5,7 @@ export interface DataTestAutoId {
|
|
|
5
5
|
}
|
|
6
6
|
export type ColorScheme = "light" | "dark";
|
|
7
7
|
export type Size = "small" | "medium" | "large";
|
|
8
|
-
export declare const BRANDS: readonly [
|
|
8
|
+
export declare const BRANDS: readonly [];
|
|
9
9
|
export type Brand = (typeof BRANDS)[number];
|
|
10
10
|
export type Easing = keyof typeof tokens.motion.easing;
|
|
11
11
|
export type Timing = keyof typeof tokens.motion.timing;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const
|
|
1
|
+
const o=[];export{o as BRANDS};
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n \"data-testautoid\"?: string;\n}\n\nexport type ColorScheme = \"light\" | \"dark\";\n\nexport type Size = \"small\" | \"medium\" | \"large\";\n\nexport const BRANDS = [
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../src/utilities/types.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n// @ts-ignore Typescript vil klage her dersom ikke tokens er bygget ennå\nimport type { default as tokens } from \"../tokens.js\";\n\n// Brukes til å extende props for komponenter som skal støtte data-testautoid ifbm. Test Complete\nexport interface DataTestAutoId {\n \"data-testautoid\"?: string;\n}\n\nexport type ColorScheme = \"light\" | \"dark\";\n\nexport type Size = \"small\" | \"medium\" | \"large\";\n\nexport const BRANDS = [] as const;\n\nexport type Brand = (typeof BRANDS)[number];\n\nexport type Easing = keyof typeof tokens.motion.easing;\nexport type Timing = keyof typeof tokens.motion.timing;\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n * Dersom de er valgfrie (for eksempel om du har en standardverdi) bruker du\n * WithOptionalChildren.\n *\n * @see WithOptionalChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithChildren {\n children: ReactNode | ReactNode[];\n}\n\n/**\n * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at\n * TypeScript skal kunne oppdage når komponenten forventer children og ikke\n * får det, eller at komponenten blir _gitt_ children men ikke forventer det.\n *\n * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du\n * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.\n *\n * Om du alltid forventer å få children, bruk WithChildren.\n *\n * @see WithChildren\n * @see https://solverfox.dev/writing/no-implicit-children/\n */\nexport interface WithOptionalChildren {\n children?: ReactNode | ReactNode[];\n}\n"],"names":["BRANDS"],"mappings":"AAaO,MAAMA,EAAS"}
|