@fremtind/jokul 0.28.1 → 0.30.0

package/styles/styles.scss

@@ -12,6 +12,7 @@
 @use "components/icon";
 @use "components/icon-button";
 @use "components/image";
+@use "components/input-panel";
 @use "components/input-group";
 @use "components/link";
 @use "components/link-list";
@@ -25,7 +26,6 @@
 @use "components/popover";
 @use "components/progress-bar";
 @use "components/radio-button";
-@use "components/radio-panel";
 @use "components/select";
 @use "components/summary-table";
 @use "components/system-message";

package/build/cjs/components/radio-panel/RadioPanel.cjs

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

package/build/cjs/components/radio-panel/RadioPanel.cjs.map

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

package/build/cjs/components/radio-panel/index.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./RadioPanel.cjs");exports.RadioPanel=e.RadioPanel;
-//# sourceMappingURL=index.cjs.map

package/build/cjs/components/radio-panel/index.d.cts

@@ -1 +0,0 @@
-export * from './RadioPanel.cjs';

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

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

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

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

package/build/es/components/radio-panel/index.d.ts

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

package/build/es/components/radio-panel/index.js

@@ -1,2 +0,0 @@
-import{RadioPanel as a}from"./RadioPanel.js";export{a as RadioPanel};
-//# sourceMappingURL=index.js.map

package/styles/components/radio-panel/_index.scss

@@ -1 +0,0 @@
-@forward "radio-panel";

package/styles/components/radio-panel/radio-panel.min.css

@@ -1 +0,0 @@
-@keyframes jkl-dot-in-u81qfui{0%{transform:scale(.8)}to{transform:scale(1)}}.jkl-radio-panel{--outer-border-color:var(--jkl-color-border-input);--outer-border-thickness:0.0625rem;--dot-color:transparent;--ring-color:transparent;border-radius:4px;cursor:pointer;outline:var(--outer-border-thickness) solid var(--outer-border-color);padding-left:1rem}.jkl-radio-panel__label{align-items:center;cursor:pointer;display:grid;gap:.5rem;grid-template-columns:-webkit-min-content fit-content(30%) 1fr;grid-template-columns:min-content fit-content(30%) 1fr}.jkl-radio-panel__input{opacity:0;position:absolute;top:-6px}.jkl-radio-panel__dot{background-color:var(--ring-color);border:.0625rem solid var(--jkl-color-border-action);border-radius:50%;cursor:pointer;display:inline-block;height:1.5rem;position:relative;transition-duration:.15s;transition-property:background-color,outline;transition-timing-function:ease;width:1.5rem}.jkl-radio-panel__dot:after{background-color:var(--dot-color);border-radius:50%;content:"";height:1rem;left:50%;position:absolute;scale:1;top:50%;transition-duration:.15s;transition-property:transform;transition-timing-function:ease;translate:-50% -50%;width:1rem}@media screen and (forced-colors:active){.jkl-radio-panel__dot{border:1px solid ButtonText}}.jkl-radio-panel__input:checked+.jkl-radio-panel__dot:after{animation:jkl-dot-in-u81qfui .15s ease}.jkl-radio-panel__main-label{padding-block:1.5rem}.jkl-radio-panel__extra-label{align-self:stretch;margin-left:1rem;margin-right:1rem}.jkl-radio-panel__extra-label>:first-child{padding-right:1rem}.jkl-radio-panel__extra-label--text{align-items:center;display:flex;height:100%}.jkl-radio-panel__content{cursor:default;display:none;padding-right:1.5rem}.jkl-radio-panel:has(:checked) .jkl-radio-panel__content[data-open=true],.jkl-radio-panel__content[data-alwaysOpen=true]{display:block;margin-bottom:24px}.jkl-radio-panel:has(:checked),.jkl-radio-panel:has(:focus-visible),.jkl-radio-panel:hover{--outer-border-color:var(--jkl-color-border-separator-hover);--outer-border-thickness:0.125rem}.jkl-radio-panel:has(:checked){--dot-color:var(--jkl-color-border-action)}[aria-invalid=true] .jkl-radio-panel{--ring-color:var(--jkl-color-background-alert-error)}[aria-invalid=true] .jkl-radio-panel:has(:checked){--dot-color:var(--jkl-color-text-on-alert)}

package/styles/components/radio-panel/radio-panel.scss

@@ -1,140 +0,0 @@
-@use "../../core/jkl/" as jkl;
-@use "sass:string";
-
-$_radio-panel-dot-animation-name: jkl-dot-in-#{string.unique-id()};
-
-@keyframes #{$_radio-panel-dot-animation-name} {
-    0% {
-        transform: scale(0.8);
-    }
-
-    100% {
-        transform: scale(1);
-    }
-}
-
-.jkl-radio-panel {
-    --outer-border-color: var(--jkl-color-border-input);
-    --outer-border-thickness: #{jkl.rem(1px)};
-    --dot-color: transparent;
-    --ring-color: transparent;
-
-    outline: var(--outer-border-thickness) solid var(--outer-border-color);
-    border-radius: 4px;
-    padding-left: jkl.rem(16px);
-
-    cursor: pointer;
-
-    &__label {
-        display: grid;
-        grid-template-columns: min-content fit-content(30%) 1fr;
-        align-items: center;
-        gap: jkl.rem(8px);
-        cursor: pointer;
-    }
-
-    &__input {
-        opacity: 0;
-        position: absolute;
-        top: -6px;
-    }
-
-    /* The ring */
-    &__dot {
-        cursor: pointer;
-
-        display: inline-block;
-        position: relative;
-
-        height: jkl.rem(24px);
-        width: jkl.rem(24px);
-        border-radius: 50%;
-        border: jkl.rem(1px) solid var(--jkl-color-border-action);
-        background-color: var(--ring-color);
-
-        transition-property: background-color, outline;
-        @include jkl.motion;
-
-        /* The dot */
-        &::after {
-            content: "";
-
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            translate: -50% -50%;
-            scale: 1;
-
-            height: jkl.rem(16px);
-            width: jkl.rem(16px);
-            border-radius: 50%;
-            background-color: var(--dot-color);
-
-            transition-property: transform;
-            @include jkl.motion;
-        }
-
-        @include jkl.forced-colors-mode {
-            border: 1px solid ButtonText;
-        }
-    }
-
-    &__input:checked + &__dot {
-        &::after {
-            animation: $_radio-panel-dot-animation-name jkl.timing("productive")
-                ease;
-        }
-    }
-
-    &__main-label {
-        padding-block: jkl.rem(24px);
-    }
-
-    &__extra-label {
-        margin-left: jkl.rem(16px);
-        align-self: stretch;
-
-        margin-right: jkl.rem(16px);
-
-        > :first-child {
-            padding-right: jkl.rem(16px);
-        }
-
-        &--text {
-            display: flex;
-            height: 100%;
-            align-items: center;
-        }
-    }
-
-    &__content {
-        display: none;
-        cursor: default;
-        padding-right: jkl.rem(24px);
-
-        &[data-alwaysOpen="true"],
-        .jkl-radio-panel:has(:checked) &[data-open="true"] {
-            margin-bottom: 24px;
-            display: block;
-        }
-    }
-
-    &:has(:checked),
-    &:has(:focus-visible),
-    &:hover {
-        --outer-border-color: var(--jkl-color-border-separator-hover);
-        --outer-border-thickness: #{jkl.rem(2px)};
-    }
-
-    &:has(:checked) {
-        --dot-color: var(--jkl-color-border-action);
-    }
-
-    [aria-invalid="true"] & {
-        --ring-color: var(--jkl-color-background-alert-error);
-    }
-
-    [aria-invalid="true"] &:has(:checked) {
-        --dot-color: var(--jkl-color-text-on-alert);
-    }
-}