@sikt/sds-toggle 7.0.0 → 8.0.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.
- package/CHANGELOG.md +11 -0
- package/dist/index.css +20 -14
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
## [8.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@7.0.0...@sikt/sds-toggle@8.0.0) (2026-03-12)
|
|
6
|
+
|
|
7
|
+
### ⚠ BREAKING CHANGES
|
|
8
|
+
|
|
9
|
+
- standardize onChange signatures across components
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
- prevent hover states on touch devices ([8c5f556](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8c5f5569c8fa6aadc3395448b6c388b1692b9742))
|
|
14
|
+
- standardize onChange signatures across components ([9944d83](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9944d83cf6b2b3d8aac2249b9394639e4ee186fb))
|
|
15
|
+
|
|
5
16
|
## [7.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@6.1.3...@sikt/sds-toggle@7.0.0) (2026-01-29)
|
|
6
17
|
|
|
7
18
|
### ⚠ BREAKING CHANGES
|
package/dist/index.css
CHANGED
|
@@ -18,9 +18,11 @@
|
|
|
18
18
|
display: inline-flex;
|
|
19
19
|
gap: var(--sds-space-padding-small);
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
@media (pointer: fine) {
|
|
22
|
+
.sds-toggle-switch:hover {
|
|
23
|
+
--toggle-track-border-color: var(--sds-color-layout-divider-strong);
|
|
24
|
+
--toggle-thumb-background-color: var(--sds-color-layout-divider-strong);
|
|
25
|
+
}
|
|
24
26
|
}
|
|
25
27
|
.sds-toggle-switch:active {
|
|
26
28
|
--toggle-track-border-color: var(--sds-color-layout-divider-strong);
|
|
@@ -33,15 +35,15 @@
|
|
|
33
35
|
--toggle-thumb-color: var(--sds-color-text-primary);
|
|
34
36
|
--toggle-thumb-position: calc( var(--toggle-track-width) - var(--toggle-thumb-size) - 2 * var(--toggle-thumb-offset) );
|
|
35
37
|
}
|
|
36
|
-
|
|
37
|
-
.sds-toggle-switch--checked:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
--toggle-track-border-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
38
|
+
@media (pointer: fine) {
|
|
39
|
+
.sds-toggle-switch--checked:hover {
|
|
40
|
+
--toggle-thumb-background-color: var( --sds-color-layout-background-default );
|
|
41
|
+
--toggle-track-background-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
42
|
+
--toggle-track-border-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
43
|
+
}
|
|
43
44
|
}
|
|
44
45
|
.sds-toggle-switch--checked:active {
|
|
46
|
+
--toggle-thumb-background-color: var( --sds-color-layout-background-default );
|
|
45
47
|
--toggle-track-background-color: var( --sds-color-interaction-primary-strong-pressed );
|
|
46
48
|
--toggle-track-border-color: var( --sds-color-interaction-primary-strong-pressed );
|
|
47
49
|
}
|
|
@@ -127,8 +129,10 @@
|
|
|
127
129
|
justify-content: center;
|
|
128
130
|
padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);
|
|
129
131
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
+
@media (pointer: fine) {
|
|
133
|
+
.sds-toggle-segment__option:hover {
|
|
134
|
+
background: var(--sds-color-interaction-primary-transparent-highlight);
|
|
135
|
+
}
|
|
132
136
|
}
|
|
133
137
|
.sds-toggle-segment__option:active {
|
|
134
138
|
background: var(--sds-color-interaction-primary-transparent-pressed);
|
|
@@ -137,8 +141,10 @@
|
|
|
137
141
|
background-color: var(--sds-color-interaction-primary-strong-default);
|
|
138
142
|
color: var(--sds-color-text-on-strong);
|
|
139
143
|
}
|
|
140
|
-
|
|
141
|
-
|
|
144
|
+
@media (pointer: fine) {
|
|
145
|
+
.sds-toggle-segment__option--checked:hover {
|
|
146
|
+
background-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
147
|
+
}
|
|
142
148
|
}
|
|
143
149
|
.sds-toggle-segment__option--checked:active {
|
|
144
150
|
background-color: var(--sds-color-interaction-primary-strong-pressed);
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/toggle-switch.pcss","../src/toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-typography-fontsize-1200);\n --toggle-thumb-size: var(--sds-typography-fontsize-300);\n --toggle-border-width: var(--sds-space-border-weight-regular);\n --toggle-padding: var(--sds-space-padding-minimal);\n --toggle-thumb-offset: var(--toggle-padding);\n --toggle-track-background-color: var(--sds-color-layout-background-default);\n --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-color: var(--sds-color-text-on-strong);\n --toggle-thumb-position: 0;\n}\n\n .sds-toggle-switch__label {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: var(--sds-space-padding-small);\n }\n\n .sds-toggle-switch:hover {\n
|
|
1
|
+
{"version":3,"sources":["../src/toggle-switch.pcss","../src/toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-typography-fontsize-1200);\n --toggle-thumb-size: var(--sds-typography-fontsize-300);\n --toggle-border-width: var(--sds-space-border-weight-regular);\n --toggle-padding: var(--sds-space-padding-minimal);\n --toggle-thumb-offset: var(--toggle-padding);\n --toggle-track-background-color: var(--sds-color-layout-background-default);\n --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-color: var(--sds-color-text-on-strong);\n --toggle-thumb-position: 0;\n}\n\n .sds-toggle-switch__label {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: var(--sds-space-padding-small);\n }\n\n @media (pointer: fine) {\n .sds-toggle-switch:hover {\n --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n }\n }\n\n .sds-toggle-switch:active {\n --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n }\n\n .sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-track-border-color: var(--toggle-track-background-color);\n --toggle-thumb-background-color: var(--sds-color-layout-background-default);\n --toggle-thumb-color: var(--sds-color-text-primary);\n --toggle-thumb-position: calc(\n var(--toggle-track-width) - var(--toggle-thumb-size) - 2 *\n var(--toggle-thumb-offset)\n );\n }\n\n @media (pointer: fine) {\n .sds-toggle-switch--checked:hover {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n }\n\n .sds-toggle-switch--checked:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-switch__inner {\n align-items: center;\n display: inline-flex;\n padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;\n position: relative;\n }\n\n .sds-toggle-switch__label-text {\n align-items: center;\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\n padding: var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-switch__track {\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n background-color: var(--toggle-track-background-color);\n border: var(--toggle-border-width) solid var(--toggle-track-border-color);\n border-radius: var(--toggle-thumb-size);\n height: calc(\n var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset))\n );\n width: var(--toggle-track-width);\n padding: var(--toggle-padding);\n transition:\n background-color var(--toggle-transition-duration),\n border-color var(--toggle-transition-duration);\n }\n\n .sds-toggle-switch__track:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n\n .sds-toggle-switch__thumb {\n align-items: center;\n background-color: var(--toggle-thumb-background-color);\n border-radius: var(--sds-space-border-radius-full);\n display: inline-flex;\n font-size: var(--sds-typography-fontsize-100);\n justify-content: center;\n position: absolute;\n left: var(--toggle-thumb-offset);\n height: var(--toggle-thumb-size);\n width: var(--toggle-thumb-size);\n transition: all var(--toggle-transition-duration);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > .sds-icon {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\n }\n",".sds-toggle-segment {\n --toggle-segment-border-width: var(--sds-space-border-weight-regular);\n --toggle-segment-border: var(--toggle-segment-border-width) solid\n var(--sds-color-interaction-primary-strong-default);\n}\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n gap: var(--toggle-segment-border-width);\n grid-auto-flow: column;\n padding: var(--sds-space-padding-minimal);\n outline: var(--toggle-segment-border);\n outline-offset: calc(var(--toggle-segment-border-width) * -1);\n }\n\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-minimal);\n display: flex;\n justify-content: center;\n padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);\n }\n\n @media (pointer: fine) {\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n }\n\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n\n .sds-toggle-segment__option--checked {\n background-color: var(--sds-color-interaction-primary-strong-default);\n color: var(--sds-color-text-on-strong);\n }\n\n @media (pointer: fine) {\n .sds-toggle-segment__option--checked:hover {\n background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n }\n\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-segment__label {\n display: flex;\n cursor: pointer;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n justify-content: center;\n line-height: var(--sds-typography-body-default-lineheight);\n min-width: 44px;\n position: relative;\n width: 100%;\n }\n\n .sds-toggle-segment__input {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"],"mappings":"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","names":[]}
|
package/dist/index.d.mts
CHANGED
|
@@ -33,7 +33,7 @@ interface ToggleSegmentOptionProps extends Omit<InputHTMLAttributes<HTMLInputEle
|
|
|
33
33
|
value: string | number;
|
|
34
34
|
label: NonNullable<ReactNode>;
|
|
35
35
|
checked?: boolean;
|
|
36
|
-
onChange: (event: ChangeEvent<HTMLInputElement
|
|
36
|
+
onChange: (event: ChangeEvent<HTMLInputElement>, value: string | number) => void;
|
|
37
37
|
}
|
|
38
38
|
declare const ToggleSegmentOption: react.ForwardRefExoticComponent<ToggleSegmentOptionProps & react.RefAttributes<HTMLInputElement>>;
|
|
39
39
|
|
package/dist/index.d.ts
CHANGED
|
@@ -33,7 +33,7 @@ interface ToggleSegmentOptionProps extends Omit<InputHTMLAttributes<HTMLInputEle
|
|
|
33
33
|
value: string | number;
|
|
34
34
|
label: NonNullable<ReactNode>;
|
|
35
35
|
checked?: boolean;
|
|
36
|
-
onChange: (event: ChangeEvent<HTMLInputElement
|
|
36
|
+
onChange: (event: ChangeEvent<HTMLInputElement>, value: string | number) => void;
|
|
37
37
|
}
|
|
38
38
|
declare const ToggleSegmentOption: react.ForwardRefExoticComponent<ToggleSegmentOptionProps & react.RefAttributes<HTMLInputElement>>;
|
|
39
39
|
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@sikt/sds-icons"),s=require("clsx/lite"),l=require("react"),a=require("react/jsx-runtime"),t=require("@sikt/sds-form"),r=Object.defineProperty,n=Object.defineProperties,c=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,g=(e,s,l)=>s in e?r(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l,h=(e,s)=>{for(var l in s||(s={}))i.call(s,l)&&g(e,l,s[l]);if(o)for(var l of o(s))d.call(s,l)&&g(e,l,s[l]);return e},m=(e,s)=>{var l={};for(var a in e)i.call(e,a)&&s.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&o)for(var a of o(e))s.indexOf(a)<0&&d.call(e,a)&&(l[a]=e[a]);return l},u=l.forwardRef((t,r)=>{var n=t,{checked:c=!1,label:o,"aria-labelledby":i,labelFirst:d=!1,showIcons:g=!0,onChange:u,className:p}=n,b=m(n,["checked","label","aria-labelledby","labelFirst","showIcons","onChange","className"]);const f=l.useId(),x=a.jsx("span",{className:"sds-toggle-switch__label-text",children:o}),v=a.jsxs("span",{className:"sds-toggle-switch__inner",children:[a.jsx("input",h({ref:r,id:f,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":i,checked:c,onChange:u,readOnly:!u},b)),a.jsxs("span",{className:"sds-toggle-switch__thumb",children:[g&&c&&a.jsx(e.ConfirmIcon,{}),g&&!c&&a.jsx(e.CancelIcon,{})]})]});return a.jsx("div",{className:s.clsx("sds-toggle-switch",c&&"sds-toggle-switch--checked",p),"data-testid":"sds-toggle-switch",children:void 0!==o?a.jsxs("label",{className:"sds-toggle-switch__label",htmlFor:f,children:[d&&x,v,!d&&x]}):v})});u.displayName="ToggleSwitch";var p=l.forwardRef((e,l)=>{var r,o,i=e,{children:d,variant:g="default",orientation:u="horizontal",className:p}=i,b=m(i,["children","variant","orientation","className"]);return a.jsx("div",{className:s.clsx("sds-toggle-segment","default"!==g&&"sds-toggle-segment--".concat(g),"sds-toggle-segment--".concat(u),p),children:a.jsx(t.Fieldset,(r=h({className:"sds-toggle-segment__fieldset"},b),o={ref:l,children:a.jsx("div",{className:"sds-toggle-segment__group",children:d})},n(r,c(o))))})});p.displayName="ToggleSegment";var b=l.forwardRef((e,r)=>{var n,c,o=e,{value:i,label:d,checked:g,onChange:u,className:p}=o,b=m(o,["value","label","checked","onChange","className"]);const{name:f}=null!=(n=t.useFieldset())?n:{},x=l.useId(),v=null!=(c=b.id)?c:x;return a.jsxs("div",{className:s.clsx("sds-toggle-segment__option",g&&"sds-toggle-segment__option--checked",p),children:[a.jsx("input",h({id:v,name:f,ref:r,type:"radio",onChange:u,className:"sds-toggle-segment__input",value:i,checked:g},b)),a.jsx("label",{className:"sds-toggle-segment__label",htmlFor:v,children:d})]})});b.displayName="ToggleSegmentOption",exports.ToggleSegment=p,exports.ToggleSegmentOption=b,exports.ToggleSwitch=u;//# sourceMappingURL=index.js.map
|
|
1
|
+
"use strict";var e=require("@sikt/sds-icons"),s=require("clsx/lite"),l=require("react"),a=require("react/jsx-runtime"),t=require("@sikt/sds-form"),r=Object.defineProperty,n=Object.defineProperties,c=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,g=(e,s,l)=>s in e?r(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l,h=(e,s)=>{for(var l in s||(s={}))i.call(s,l)&&g(e,l,s[l]);if(o)for(var l of o(s))d.call(s,l)&&g(e,l,s[l]);return e},m=(e,s)=>{var l={};for(var a in e)i.call(e,a)&&s.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&o)for(var a of o(e))s.indexOf(a)<0&&d.call(e,a)&&(l[a]=e[a]);return l},u=l.forwardRef((t,r)=>{var n=t,{checked:c=!1,label:o,"aria-labelledby":i,labelFirst:d=!1,showIcons:g=!0,onChange:u,className:p}=n,b=m(n,["checked","label","aria-labelledby","labelFirst","showIcons","onChange","className"]);const f=l.useId(),x=a.jsx("span",{className:"sds-toggle-switch__label-text",children:o}),v=a.jsxs("span",{className:"sds-toggle-switch__inner",children:[a.jsx("input",h({ref:r,id:f,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":i,checked:c,onChange:u,readOnly:!u},b)),a.jsxs("span",{className:"sds-toggle-switch__thumb",children:[g&&c&&a.jsx(e.ConfirmIcon,{}),g&&!c&&a.jsx(e.CancelIcon,{})]})]});return a.jsx("div",{className:s.clsx("sds-toggle-switch",c&&"sds-toggle-switch--checked",p),"data-testid":"sds-toggle-switch",children:void 0!==o?a.jsxs("label",{className:"sds-toggle-switch__label",htmlFor:f,children:[d&&x,v,!d&&x]}):v})});u.displayName="ToggleSwitch";var p=l.forwardRef((e,l)=>{var r,o,i=e,{children:d,variant:g="default",orientation:u="horizontal",className:p}=i,b=m(i,["children","variant","orientation","className"]);return a.jsx("div",{className:s.clsx("sds-toggle-segment","default"!==g&&"sds-toggle-segment--".concat(g),"sds-toggle-segment--".concat(u),p),children:a.jsx(t.Fieldset,(r=h({className:"sds-toggle-segment__fieldset"},b),o={ref:l,children:a.jsx("div",{className:"sds-toggle-segment__group",children:d})},n(r,c(o))))})});p.displayName="ToggleSegment";var b=l.forwardRef((e,r)=>{var n,c,o=e,{value:i,label:d,checked:g,onChange:u,className:p}=o,b=m(o,["value","label","checked","onChange","className"]);const{name:f}=null!=(n=t.useFieldset())?n:{},x=l.useId(),v=null!=(c=b.id)?c:x;return a.jsxs("div",{className:s.clsx("sds-toggle-segment__option",g&&"sds-toggle-segment__option--checked",p),children:[a.jsx("input",h({id:v,name:f,ref:r,type:"radio",onChange:e=>{u(e,i)},className:"sds-toggle-segment__input",value:i,checked:g},b)),a.jsx("label",{className:"sds-toggle-segment__label",htmlFor:v,children:d})]})});b.displayName="ToggleSegmentOption",exports.ToggleSegment=p,exports.ToggleSegmentOption=b,exports.ToggleSwitch=u;//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","useId","jsx","jsxs","ConfirmIcon","CancelIcon","clsx","Fieldset","_a","_b","useFieldset"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,IAAM,
|
|
1
|
+
{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","useId","jsx","jsxs","ConfirmIcon","CancelIcon","clsx","Fieldset","_a","_b","useFieldset"],"mappings":"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","file":"index.js","sourcesContent":["import { ConfirmIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n ChangeEventHandler,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n> {\n checked?: boolean;\n showIcons?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n (\n | {\n label: NonNullable<ReactNode>;\n labelFirst?: boolean;\n \"aria-labelledby\"?: never;\n }\n | {\n label?: never;\n labelFirst?: never;\n /**\n * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n */\n \"aria-labelledby\": string;\n }\n );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n (\n {\n checked = false,\n label,\n \"aria-labelledby\": ariaLabelledby,\n labelFirst = false,\n showIcons = true,\n onChange,\n className,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const labelElement = (\n <span className=\"sds-toggle-switch__label-text\">{label}</span>\n );\n const input = (\n <span className=\"sds-toggle-switch__inner\">\n <input\n ref={ref}\n id={id}\n type=\"checkbox\"\n role=\"switch\"\n className=\"sds-toggle-switch__track\"\n aria-labelledby={ariaLabelledby}\n checked={checked}\n onChange={onChange}\n readOnly={!onChange}\n {...rest}\n />\n <span className=\"sds-toggle-switch__thumb\">\n {showIcons && checked && <ConfirmIcon />}\n {showIcons && !checked && <CancelIcon />}\n </span>\n </span>\n );\n\n return (\n <div\n className={clsx(\n \"sds-toggle-switch\",\n checked && \"sds-toggle-switch--checked\",\n className,\n )}\n data-testid=\"sds-toggle-switch\"\n >\n {label !== undefined ? (\n <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n {labelFirst && labelElement}\n {input}\n {!labelFirst && labelElement}\n </label>\n ) : (\n input\n )}\n </div>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n variant?: \"default\" | \"fixed\";\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleSegment = forwardRef<\n HTMLFieldSetElement,\n ToggleSegmentProps\n>(\n (\n {\n children,\n variant = \"default\",\n orientation = \"horizontal\",\n className,\n ...rest\n },\n ref,\n ) => {\n return (\n <div\n className={clsx(\n \"sds-toggle-segment\",\n variant !== \"default\" && `sds-toggle-segment--${variant}`,\n `sds-toggle-segment--${orientation}`,\n className,\n )}\n >\n {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n <div className=\"sds-toggle-segment__group\">{children}</div>\n </Fieldset>\n </div>\n );\n },\n);\nToggleSegment.displayName = \"ToggleSegment\";\n","import { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n ChangeEvent,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"onChange\"\n> {\n value: string | number;\n label: NonNullable<ReactNode>;\n checked?: boolean;\n onChange: (\n event: ChangeEvent<HTMLInputElement>,\n value: string | number,\n ) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n HTMLInputElement,\n ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n const { name } = useFieldset() ?? {};\n const generatedId = useId();\n const htmlForId = rest.id ?? generatedId;\n\n return (\n <div\n className={clsx(\n \"sds-toggle-segment__option\",\n checked && \"sds-toggle-segment__option--checked\",\n className,\n )}\n >\n <input\n id={htmlForId}\n name={name}\n ref={ref}\n type=\"radio\"\n onChange={(e) => {\n onChange(e, value);\n }}\n className=\"sds-toggle-segment__input\"\n value={value}\n checked={checked}\n {...rest}\n />\n <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n {label}\n </label>\n </div>\n );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{ConfirmIcon as e,CancelIcon as s}from"@sikt/sds-icons";import{clsx as l}from"clsx/lite";import{forwardRef as a,useId as t}from"react";import{jsxs as r,jsx as n}from"react/jsx-runtime";import{Fieldset as o,useFieldset as c}from"@sikt/sds-form";var i=Object.defineProperty,d=Object.defineProperties,g=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,b=(e,s,l)=>s in e?i(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l,f=(e,s)=>{for(var l in s||(s={}))h.call(s,l)&&b(e,l,s[l]);if(m)for(var l of m(s))p.call(s,l)&&b(e,l,s[l]);return e},u=(e,s)=>{var l={};for(var a in e)h.call(e,a)&&s.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&m)for(var a of m(e))s.indexOf(a)<0&&p.call(e,a)&&(l[a]=e[a]);return l},v=a((a,o)=>{var c=a,{checked:i=!1,label:d,"aria-labelledby":g,labelFirst:m=!1,showIcons:h=!0,onChange:p,className:b}=c,v=u(c,["checked","label","aria-labelledby","labelFirst","showIcons","onChange","className"]);const _=t(),N=n("span",{className:"sds-toggle-switch__label-text",children:d}),y=r("span",{className:"sds-toggle-switch__inner",children:[n("input",f({ref:o,id:_,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":g,checked:i,onChange:p,readOnly:!p},v)),r("span",{className:"sds-toggle-switch__thumb",children:[h&&i&&n(e,{}),h&&!i&&n(s,{})]})]});return n("div",{className:l("sds-toggle-switch",i&&"sds-toggle-switch--checked",b),"data-testid":"sds-toggle-switch",children:void 0!==d?r("label",{className:"sds-toggle-switch__label",htmlFor:_,children:[m&&N,y,!m&&N]}):y})});v.displayName="ToggleSwitch";var _=a((e,s)=>{var a,t,r=e,{children:c,variant:i="default",orientation:m="horizontal",className:h}=r,p=u(r,["children","variant","orientation","className"]);return n("div",{className:l("sds-toggle-segment","default"!==i&&"sds-toggle-segment--".concat(i),"sds-toggle-segment--".concat(m),h),children:n(o,(a=f({className:"sds-toggle-segment__fieldset"},p),t={ref:s,children:n("div",{className:"sds-toggle-segment__group",children:c})},d(a,g(t))))})});_.displayName="ToggleSegment";var N=a((e,s)=>{var a,o,i=e,{value:d,label:g,checked:m,onChange:h,className:p}=i,b=u(i,["value","label","checked","onChange","className"]);const{name:v}=null!=(a=c())?a:{},_=t(),N=null!=(o=b.id)?o:_;return r("div",{className:l("sds-toggle-segment__option",m&&"sds-toggle-segment__option--checked",p),children:[n("input",f({id:N,name:v,ref:s,type:"radio",onChange:h,className:"sds-toggle-segment__input",value:d,checked:m},b)),n("label",{className:"sds-toggle-segment__label",htmlFor:N,children:g})]})});N.displayName="ToggleSegmentOption";export{_ as ToggleSegment,N as ToggleSegmentOption,v as ToggleSwitch};//# sourceMappingURL=index.mjs.map
|
|
1
|
+
import{ConfirmIcon as e,CancelIcon as s}from"@sikt/sds-icons";import{clsx as l}from"clsx/lite";import{forwardRef as a,useId as t}from"react";import{jsxs as r,jsx as n}from"react/jsx-runtime";import{Fieldset as o,useFieldset as c}from"@sikt/sds-form";var i=Object.defineProperty,d=Object.defineProperties,g=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,b=(e,s,l)=>s in e?i(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l,f=(e,s)=>{for(var l in s||(s={}))h.call(s,l)&&b(e,l,s[l]);if(m)for(var l of m(s))p.call(s,l)&&b(e,l,s[l]);return e},u=(e,s)=>{var l={};for(var a in e)h.call(e,a)&&s.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&m)for(var a of m(e))s.indexOf(a)<0&&p.call(e,a)&&(l[a]=e[a]);return l},v=a((a,o)=>{var c=a,{checked:i=!1,label:d,"aria-labelledby":g,labelFirst:m=!1,showIcons:h=!0,onChange:p,className:b}=c,v=u(c,["checked","label","aria-labelledby","labelFirst","showIcons","onChange","className"]);const _=t(),N=n("span",{className:"sds-toggle-switch__label-text",children:d}),y=r("span",{className:"sds-toggle-switch__inner",children:[n("input",f({ref:o,id:_,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":g,checked:i,onChange:p,readOnly:!p},v)),r("span",{className:"sds-toggle-switch__thumb",children:[h&&i&&n(e,{}),h&&!i&&n(s,{})]})]});return n("div",{className:l("sds-toggle-switch",i&&"sds-toggle-switch--checked",b),"data-testid":"sds-toggle-switch",children:void 0!==d?r("label",{className:"sds-toggle-switch__label",htmlFor:_,children:[m&&N,y,!m&&N]}):y})});v.displayName="ToggleSwitch";var _=a((e,s)=>{var a,t,r=e,{children:c,variant:i="default",orientation:m="horizontal",className:h}=r,p=u(r,["children","variant","orientation","className"]);return n("div",{className:l("sds-toggle-segment","default"!==i&&"sds-toggle-segment--".concat(i),"sds-toggle-segment--".concat(m),h),children:n(o,(a=f({className:"sds-toggle-segment__fieldset"},p),t={ref:s,children:n("div",{className:"sds-toggle-segment__group",children:c})},d(a,g(t))))})});_.displayName="ToggleSegment";var N=a((e,s)=>{var a,o,i=e,{value:d,label:g,checked:m,onChange:h,className:p}=i,b=u(i,["value","label","checked","onChange","className"]);const{name:v}=null!=(a=c())?a:{},_=t(),N=null!=(o=b.id)?o:_;return r("div",{className:l("sds-toggle-segment__option",m&&"sds-toggle-segment__option--checked",p),children:[n("input",f({id:N,name:v,ref:s,type:"radio",onChange:e=>{h(e,d)},className:"sds-toggle-segment__input",value:d,checked:m},b)),n("label",{className:"sds-toggle-segment__label",htmlFor:N,children:g})]})});N.displayName="ToggleSegmentOption";export{_ as ToggleSegment,N as ToggleSegmentOption,v as ToggleSwitch};//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","jsx","clsx","_a","_b","useId","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,IAAM,
|
|
1
|
+
{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","jsx","clsx","_a","_b","useId","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["import { ConfirmIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n ChangeEventHandler,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n> {\n checked?: boolean;\n showIcons?: boolean;\n onChange?: ChangeEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n (\n | {\n label: NonNullable<ReactNode>;\n labelFirst?: boolean;\n \"aria-labelledby\"?: never;\n }\n | {\n label?: never;\n labelFirst?: never;\n /**\n * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n */\n \"aria-labelledby\": string;\n }\n );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n (\n {\n checked = false,\n label,\n \"aria-labelledby\": ariaLabelledby,\n labelFirst = false,\n showIcons = true,\n onChange,\n className,\n ...rest\n },\n ref,\n ) => {\n const id = useId();\n const labelElement = (\n <span className=\"sds-toggle-switch__label-text\">{label}</span>\n );\n const input = (\n <span className=\"sds-toggle-switch__inner\">\n <input\n ref={ref}\n id={id}\n type=\"checkbox\"\n role=\"switch\"\n className=\"sds-toggle-switch__track\"\n aria-labelledby={ariaLabelledby}\n checked={checked}\n onChange={onChange}\n readOnly={!onChange}\n {...rest}\n />\n <span className=\"sds-toggle-switch__thumb\">\n {showIcons && checked && <ConfirmIcon />}\n {showIcons && !checked && <CancelIcon />}\n </span>\n </span>\n );\n\n return (\n <div\n className={clsx(\n \"sds-toggle-switch\",\n checked && \"sds-toggle-switch--checked\",\n className,\n )}\n data-testid=\"sds-toggle-switch\"\n >\n {label !== undefined ? (\n <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n {labelFirst && labelElement}\n {input}\n {!labelFirst && labelElement}\n </label>\n ) : (\n input\n )}\n </div>\n );\n },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n children: ReactNode;\n variant?: \"default\" | \"fixed\";\n orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleSegment = forwardRef<\n HTMLFieldSetElement,\n ToggleSegmentProps\n>(\n (\n {\n children,\n variant = \"default\",\n orientation = \"horizontal\",\n className,\n ...rest\n },\n ref,\n ) => {\n return (\n <div\n className={clsx(\n \"sds-toggle-segment\",\n variant !== \"default\" && `sds-toggle-segment--${variant}`,\n `sds-toggle-segment--${orientation}`,\n className,\n )}\n >\n {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n <div className=\"sds-toggle-segment__group\">{children}</div>\n </Fieldset>\n </div>\n );\n },\n);\nToggleSegment.displayName = \"ToggleSegment\";\n","import { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n ChangeEvent,\n InputHTMLAttributes,\n ReactNode,\n forwardRef,\n useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps extends Omit<\n InputHTMLAttributes<HTMLInputElement>,\n \"onChange\"\n> {\n value: string | number;\n label: NonNullable<ReactNode>;\n checked?: boolean;\n onChange: (\n event: ChangeEvent<HTMLInputElement>,\n value: string | number,\n ) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n HTMLInputElement,\n ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n const { name } = useFieldset() ?? {};\n const generatedId = useId();\n const htmlForId = rest.id ?? generatedId;\n\n return (\n <div\n className={clsx(\n \"sds-toggle-segment__option\",\n checked && \"sds-toggle-segment__option--checked\",\n className,\n )}\n >\n <input\n id={htmlForId}\n name={name}\n ref={ref}\n type=\"radio\"\n onChange={(e) => {\n onChange(e, value);\n }}\n className=\"sds-toggle-segment__input\"\n value={value}\n checked={checked}\n {...rest}\n />\n <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n {label}\n </label>\n </div>\n );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
|