@revikornmann/muka-ui 0.9.0 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/SegmentGroup/SegmentGroup.css +4 -4
- package/dist/cjs/components/SegmentGroup/SegmentGroup.js +11 -6
- package/dist/cjs/components/SegmentGroup/SegmentGroup.js.map +1 -1
- package/dist/esm/components/SegmentGroup/SegmentGroup.css +4 -4
- package/dist/esm/components/SegmentGroup/SegmentGroup.js +11 -6
- package/dist/esm/components/SegmentGroup/SegmentGroup.js.map +1 -1
- package/dist/styles/components/SegmentGroup.css +4 -4
- package/dist/styles/index.css +205 -203
- package/dist/styles/muka-dark.css +205 -203
- package/dist/styles/muka-light.css +205 -203
- package/dist/styles/tokens-bouwplan-dark.css +2 -0
- package/dist/styles/tokens-bouwplan-light.css +2 -0
- package/dist/styles/tokens-fscl-dark.css +2 -0
- package/dist/styles/tokens-fscl-light.css +2 -0
- package/dist/styles/tokens-grip-dark.css +2 -0
- package/dist/styles/tokens-grip-light.css +2 -0
- package/dist/styles/tokens-muka-dark.css +2 -0
- package/dist/styles/tokens-muka-light.css +2 -0
- package/dist/styles/tokens-wireframe-dark.css +2 -0
- package/dist/styles/tokens-wireframe-light.css +2 -0
- package/dist/styles/wireframe-dark.css +205 -203
- package/dist/styles/wireframe-light.css +205 -203
- package/dist/types/components/SegmentGroup/SegmentGroup.d.ts +4 -0
- package/dist/types/components/SegmentGroup/SegmentGroup.d.ts.map +1 -1
- package/package.json +1 -1
- package/tokens/t4-components/segmentgroup.json +8 -0
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
background-color: var(--segmentgroup-container-background);
|
|
10
10
|
border-radius: var(--segmentgroup-container-radius);
|
|
11
11
|
position: relative;
|
|
12
|
-
transition:
|
|
12
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
/* Inset shadow on container */
|
|
@@ -50,17 +50,18 @@
|
|
|
50
50
|
display: inline-flex;
|
|
51
51
|
align-items: center;
|
|
52
52
|
justify-content: center;
|
|
53
|
+
gap: var(--segmentgroup-segment-gap);
|
|
53
54
|
border: none;
|
|
54
55
|
background-color: var(--segmentgroup-segment-color-unselected-background);
|
|
55
56
|
color: var(--segmentgroup-segment-color-unselected-foreground);
|
|
56
57
|
border-radius: var(--segmentgroup-segment-radius);
|
|
57
58
|
cursor: pointer;
|
|
58
|
-
transition:
|
|
59
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
59
60
|
position: relative;
|
|
60
61
|
outline: none;
|
|
61
62
|
box-shadow: var(--segmentgroup-segment-shadow-unselected);
|
|
62
63
|
font-family: var(--alias-font-plain-family);
|
|
63
|
-
font-weight: var(--
|
|
64
|
+
font-weight: var(--segmentgroup-segment-fontWeight);
|
|
64
65
|
z-index: 1; /* Keep above pill */
|
|
65
66
|
}
|
|
66
67
|
|
|
@@ -153,7 +154,6 @@
|
|
|
153
154
|
background-color: transparent;
|
|
154
155
|
box-shadow: none;
|
|
155
156
|
color: var(--segmentgroup-segment-color-selected-foreground);
|
|
156
|
-
font-weight: var(--alias-font-plain-weight-semibold);
|
|
157
157
|
z-index: 2; /* Highlight pill when focused is tested below */
|
|
158
158
|
}
|
|
159
159
|
|
|
@@ -30,10 +30,11 @@ require("./SegmentGroup.css");
|
|
|
30
30
|
* />
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
33
|
-
const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', className = '', fullWidth = false, disabled = false, iconOnly = false, }) => {
|
|
33
|
+
const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', className = '', fullWidth = false, disabled = false, iconOnly = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) => {
|
|
34
34
|
const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue ?? options[0]?.value ?? '');
|
|
35
35
|
const selectedValue = value !== undefined ? value : internalValue;
|
|
36
36
|
const containerRef = (0, react_1.useRef)(null);
|
|
37
|
+
const segmentRefs = (0, react_1.useRef)({});
|
|
37
38
|
const [pillStyle, setPillStyle] = (0, react_1.useState)({ left: 0, width: 0, opacity: 0 });
|
|
38
39
|
(0, react_1.useEffect)(() => {
|
|
39
40
|
const updatePill = () => {
|
|
@@ -63,7 +64,7 @@ const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', cla
|
|
|
63
64
|
}
|
|
64
65
|
onChange?.(newValue);
|
|
65
66
|
}, [value, onChange, disabled]);
|
|
66
|
-
const handleKeyDown = (e, optionValue
|
|
67
|
+
const handleKeyDown = (e, optionValue) => {
|
|
67
68
|
const enabledOptions = options.filter((opt) => !opt.disabled);
|
|
68
69
|
const currentIndex = enabledOptions.findIndex((opt) => opt.value === optionValue);
|
|
69
70
|
let nextIndex = null;
|
|
@@ -95,17 +96,21 @@ const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', cla
|
|
|
95
96
|
return;
|
|
96
97
|
}
|
|
97
98
|
if (nextIndex !== null) {
|
|
98
|
-
|
|
99
|
+
const nextValue = enabledOptions[nextIndex].value;
|
|
100
|
+
handleChange(nextValue);
|
|
101
|
+
segmentRefs.current[nextValue]?.focus();
|
|
99
102
|
}
|
|
100
103
|
};
|
|
101
|
-
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: `muka-segmentgroup muka-segmentgroup--${size} ${fullWidth ? 'muka-segmentgroup--full-width' : ''} ${iconOnly ? 'muka-segmentgroup--icon-only' : ''} ${className}`.trim(), role: "radiogroup", children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-segmentgroup__pill", style: {
|
|
104
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: `muka-segmentgroup muka-segmentgroup--${size} ${fullWidth ? 'muka-segmentgroup--full-width' : ''} ${iconOnly ? 'muka-segmentgroup--icon-only' : ''} ${className}`.trim(), role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: [(0, jsx_runtime_1.jsx)("div", { className: "muka-segmentgroup__pill", style: {
|
|
102
105
|
transform: `translateX(${pillStyle.left}px)`,
|
|
103
106
|
width: `${pillStyle.width}px`,
|
|
104
107
|
opacity: pillStyle.opacity,
|
|
105
|
-
} }), options.map((option
|
|
108
|
+
} }), options.map((option) => {
|
|
106
109
|
const isSelected = selectedValue === option.value;
|
|
107
110
|
const isDisabled = disabled || option.disabled;
|
|
108
|
-
return ((0, jsx_runtime_1.
|
|
111
|
+
return ((0, jsx_runtime_1.jsxs)("button", { ref: (element) => {
|
|
112
|
+
segmentRefs.current[option.value] = element;
|
|
113
|
+
}, type: "button", role: "radio", "aria-checked": isSelected, "aria-label": option.label, disabled: isDisabled, tabIndex: isSelected ? 0 : -1, className: `muka-segmentgroup__segment ${isSelected ? 'muka-segmentgroup__segment--selected' : ''} ${isDisabled ? 'muka-segmentgroup__segment--disabled' : ''}`.trim(), onClick: () => !isDisabled && handleChange(option.value), onKeyDown: (e) => !isDisabled && handleKeyDown(e, option.value), children: [option.icon && ((0, jsx_runtime_1.jsx)("span", { className: "muka-segmentgroup__icon", "aria-hidden": "true", children: option.icon })), !iconOnly && (0, jsx_runtime_1.jsx)("span", { className: "muka-segmentgroup__label", children: option.label })] }, option.value));
|
|
109
114
|
})] }));
|
|
110
115
|
};
|
|
111
116
|
exports.SegmentGroup = SegmentGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;AAEb,iCAAwE;AACxE,8BAA4B;
|
|
1
|
+
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
background-color: var(--segmentgroup-container-background);
|
|
10
10
|
border-radius: var(--segmentgroup-container-radius);
|
|
11
11
|
position: relative;
|
|
12
|
-
transition:
|
|
12
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
/* Inset shadow on container */
|
|
@@ -50,17 +50,18 @@
|
|
|
50
50
|
display: inline-flex;
|
|
51
51
|
align-items: center;
|
|
52
52
|
justify-content: center;
|
|
53
|
+
gap: var(--segmentgroup-segment-gap);
|
|
53
54
|
border: none;
|
|
54
55
|
background-color: var(--segmentgroup-segment-color-unselected-background);
|
|
55
56
|
color: var(--segmentgroup-segment-color-unselected-foreground);
|
|
56
57
|
border-radius: var(--segmentgroup-segment-radius);
|
|
57
58
|
cursor: pointer;
|
|
58
|
-
transition:
|
|
59
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
59
60
|
position: relative;
|
|
60
61
|
outline: none;
|
|
61
62
|
box-shadow: var(--segmentgroup-segment-shadow-unselected);
|
|
62
63
|
font-family: var(--alias-font-plain-family);
|
|
63
|
-
font-weight: var(--
|
|
64
|
+
font-weight: var(--segmentgroup-segment-fontWeight);
|
|
64
65
|
z-index: 1; /* Keep above pill */
|
|
65
66
|
}
|
|
66
67
|
|
|
@@ -153,7 +154,6 @@
|
|
|
153
154
|
background-color: transparent;
|
|
154
155
|
box-shadow: none;
|
|
155
156
|
color: var(--segmentgroup-segment-color-selected-foreground);
|
|
156
|
-
font-weight: var(--alias-font-plain-weight-semibold);
|
|
157
157
|
z-index: 2; /* Highlight pill when focused is tested below */
|
|
158
158
|
}
|
|
159
159
|
|
|
@@ -27,10 +27,11 @@ import './SegmentGroup.css';
|
|
|
27
27
|
* />
|
|
28
28
|
* ```
|
|
29
29
|
*/
|
|
30
|
-
export const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', className = '', fullWidth = false, disabled = false, iconOnly = false, }) => {
|
|
30
|
+
export const SegmentGroup = ({ options, value, defaultValue, onChange, size = 'sm', className = '', fullWidth = false, disabled = false, iconOnly = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }) => {
|
|
31
31
|
const [internalValue, setInternalValue] = useState(defaultValue ?? options[0]?.value ?? '');
|
|
32
32
|
const selectedValue = value !== undefined ? value : internalValue;
|
|
33
33
|
const containerRef = useRef(null);
|
|
34
|
+
const segmentRefs = useRef({});
|
|
34
35
|
const [pillStyle, setPillStyle] = useState({ left: 0, width: 0, opacity: 0 });
|
|
35
36
|
useEffect(() => {
|
|
36
37
|
const updatePill = () => {
|
|
@@ -60,7 +61,7 @@ export const SegmentGroup = ({ options, value, defaultValue, onChange, size = 's
|
|
|
60
61
|
}
|
|
61
62
|
onChange?.(newValue);
|
|
62
63
|
}, [value, onChange, disabled]);
|
|
63
|
-
const handleKeyDown = (e, optionValue
|
|
64
|
+
const handleKeyDown = (e, optionValue) => {
|
|
64
65
|
const enabledOptions = options.filter((opt) => !opt.disabled);
|
|
65
66
|
const currentIndex = enabledOptions.findIndex((opt) => opt.value === optionValue);
|
|
66
67
|
let nextIndex = null;
|
|
@@ -92,17 +93,21 @@ export const SegmentGroup = ({ options, value, defaultValue, onChange, size = 's
|
|
|
92
93
|
return;
|
|
93
94
|
}
|
|
94
95
|
if (nextIndex !== null) {
|
|
95
|
-
|
|
96
|
+
const nextValue = enabledOptions[nextIndex].value;
|
|
97
|
+
handleChange(nextValue);
|
|
98
|
+
segmentRefs.current[nextValue]?.focus();
|
|
96
99
|
}
|
|
97
100
|
};
|
|
98
|
-
return (_jsxs("div", { ref: containerRef, className: `muka-segmentgroup muka-segmentgroup--${size} ${fullWidth ? 'muka-segmentgroup--full-width' : ''} ${iconOnly ? 'muka-segmentgroup--icon-only' : ''} ${className}`.trim(), role: "radiogroup", children: [_jsx("div", { className: "muka-segmentgroup__pill", style: {
|
|
101
|
+
return (_jsxs("div", { ref: containerRef, className: `muka-segmentgroup muka-segmentgroup--${size} ${fullWidth ? 'muka-segmentgroup--full-width' : ''} ${iconOnly ? 'muka-segmentgroup--icon-only' : ''} ${className}`.trim(), role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: [_jsx("div", { className: "muka-segmentgroup__pill", style: {
|
|
99
102
|
transform: `translateX(${pillStyle.left}px)`,
|
|
100
103
|
width: `${pillStyle.width}px`,
|
|
101
104
|
opacity: pillStyle.opacity,
|
|
102
|
-
} }), options.map((option
|
|
105
|
+
} }), options.map((option) => {
|
|
103
106
|
const isSelected = selectedValue === option.value;
|
|
104
107
|
const isDisabled = disabled || option.disabled;
|
|
105
|
-
return (
|
|
108
|
+
return (_jsxs("button", { ref: (element) => {
|
|
109
|
+
segmentRefs.current[option.value] = element;
|
|
110
|
+
}, type: "button", role: "radio", "aria-checked": isSelected, "aria-label": option.label, disabled: isDisabled, tabIndex: isSelected ? 0 : -1, className: `muka-segmentgroup__segment ${isSelected ? 'muka-segmentgroup__segment--selected' : ''} ${isDisabled ? 'muka-segmentgroup__segment--disabled' : ''}`.trim(), onClick: () => !isDisabled && handleChange(option.value), onKeyDown: (e) => !isDisabled && handleKeyDown(e, option.value), children: [option.icon && (_jsx("span", { className: "muka-segmentgroup__icon", "aria-hidden": "true", children: option.icon })), !iconOnly && _jsx("span", { className: "muka-segmentgroup__label", children: option.label })] }, option.value));
|
|
106
111
|
})] }));
|
|
107
112
|
};
|
|
108
113
|
export default SegmentGroup;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxE,OAAO,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"SegmentGroup.js","sourceRoot":"","sources":["../../../../components/SegmentGroup/SegmentGroup.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
background-color: var(--segmentgroup-container-background);
|
|
10
10
|
border-radius: var(--segmentgroup-container-radius);
|
|
11
11
|
position: relative;
|
|
12
|
-
transition:
|
|
12
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
/* Inset shadow on container */
|
|
@@ -50,17 +50,18 @@
|
|
|
50
50
|
display: inline-flex;
|
|
51
51
|
align-items: center;
|
|
52
52
|
justify-content: center;
|
|
53
|
+
gap: var(--segmentgroup-segment-gap);
|
|
53
54
|
border: none;
|
|
54
55
|
background-color: var(--segmentgroup-segment-color-unselected-background);
|
|
55
56
|
color: var(--segmentgroup-segment-color-unselected-foreground);
|
|
56
57
|
border-radius: var(--segmentgroup-segment-radius);
|
|
57
58
|
cursor: pointer;
|
|
58
|
-
transition:
|
|
59
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
59
60
|
position: relative;
|
|
60
61
|
outline: none;
|
|
61
62
|
box-shadow: var(--segmentgroup-segment-shadow-unselected);
|
|
62
63
|
font-family: var(--alias-font-plain-family);
|
|
63
|
-
font-weight: var(--
|
|
64
|
+
font-weight: var(--segmentgroup-segment-fontWeight);
|
|
64
65
|
z-index: 1; /* Keep above pill */
|
|
65
66
|
}
|
|
66
67
|
|
|
@@ -153,7 +154,6 @@
|
|
|
153
154
|
background-color: transparent;
|
|
154
155
|
box-shadow: none;
|
|
155
156
|
color: var(--segmentgroup-segment-color-selected-foreground);
|
|
156
|
-
font-weight: var(--alias-font-plain-weight-semibold);
|
|
157
157
|
z-index: 2; /* Highlight pill when focused is tested below */
|
|
158
158
|
}
|
|
159
159
|
|