@adminiumjs/ui 0.3.7 → 0.3.9
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/components/segmented-control/SegmentedControl.d.ts +5 -1
- package/dist/components/segmented-control/SegmentedControl.d.ts.map +1 -1
- package/dist/components/segmented-control/SegmentedControl.js +9 -2
- package/dist/components/segmented-control/SegmentedControl.js.map +1 -1
- package/package.json +2 -2
|
@@ -16,7 +16,11 @@ export interface SegmentedControlOption {
|
|
|
16
16
|
}
|
|
17
17
|
export interface SegmentedControlProps extends Omit<React.ComponentPropsWithRef<'div'>, 'style' | 'defaultValue' | 'onChange'> {
|
|
18
18
|
options: readonly SegmentedControlOption[];
|
|
19
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* Controlled selected value. A value that is none of the options — `''`,
|
|
21
|
+
* a form's "not answered yet" — draws the tray with nothing selected. Left
|
|
22
|
+
* out, the control keeps its own state and starts on the first option.
|
|
23
|
+
*/
|
|
20
24
|
value?: string | undefined;
|
|
21
25
|
/** Uncontrolled initial value (defaults to the first enabled option). */
|
|
22
26
|
defaultValue?: string | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,wCAAwC;IACxC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,GAAG,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAWD,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IACvF,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C
|
|
1
|
+
{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAE/C,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACpC,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,wCAAwC;IACxC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,4CAA4C;IAC5C,GAAG,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAWD,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IACvF,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yEAAyE;IACzE,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtD,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,YAAY,EACZ,aAAa,EACb,QAAgB,EAChB,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAyGvB"}
|
|
@@ -24,6 +24,7 @@ export function SegmentedControl({ options, value, defaultValue, onValueChange,
|
|
|
24
24
|
const firstEnabled = options.find((option) => !option.disabled)?.value;
|
|
25
25
|
const [internal, setInternal] = useState(defaultValue ?? firstEnabled);
|
|
26
26
|
const current = value !== undefined ? value : internal;
|
|
27
|
+
const anySelected = options.some((option) => option.value === current);
|
|
27
28
|
const select = (nextValue, focus = false) => {
|
|
28
29
|
if (value === undefined)
|
|
29
30
|
setInternal(nextValue);
|
|
@@ -52,7 +53,11 @@ export function SegmentedControl({ options, value, defaultValue, onValueChange,
|
|
|
52
53
|
if (delta === 0)
|
|
53
54
|
return;
|
|
54
55
|
const fromIndex = enabled.findIndex((option) => option.value === current);
|
|
55
|
-
|
|
56
|
+
// Nothing chosen yet: forward lands on the first segment, backward on the last.
|
|
57
|
+
next =
|
|
58
|
+
fromIndex === -1
|
|
59
|
+
? enabled[delta > 0 ? 0 : enabled.length - 1]
|
|
60
|
+
: enabled[(fromIndex + delta + enabled.length) % enabled.length];
|
|
56
61
|
}
|
|
57
62
|
if (!next)
|
|
58
63
|
return;
|
|
@@ -61,7 +66,9 @@ export function SegmentedControl({ options, value, defaultValue, onValueChange,
|
|
|
61
66
|
};
|
|
62
67
|
return (_jsx("div", { ref: trayRef, role: "radiogroup", onKeyDown: handleKeyDown, className: cn('inline-flex items-center gap-0.5 rounded-md bg-surface-2 p-[3px]', className), ...props, children: options.map((option) => {
|
|
63
68
|
const selected = option.value === current;
|
|
64
|
-
|
|
69
|
+
// A value that is no option (a form's empty answer) selects nothing,
|
|
70
|
+
// and the tray still needs its one tab stop.
|
|
71
|
+
const tabbable = selected || (!anySelected && option.value === firstEnabled);
|
|
65
72
|
return (_jsxs("button", { type: "button", role: "radio", "aria-checked": selected, ...(option.ariaLabel === undefined ? {} : { 'aria-label': option.ariaLabel }), tabIndex: tabbable ? 0 : -1, "data-value": option.value, "data-selected": selected ? '' : undefined, disabled: disabled || option.disabled, onClick: () => select(option.value), className: cn('group inline-flex h-7 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-[8px] px-3 ', 'text-[12.5px] font-semibold text-fg-muted transition-colors duration-150 hover:text-fg ', 'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ', 'disabled:pointer-events-none disabled:opacity-40 ', 'data-[selected]:bg-surface data-[selected]:text-fg data-[selected]:shadow-card ', '[&_svg]:size-3.5 [&_svg]:shrink-0', option.label === undefined || option.label === null ? 'px-2' : '', itemClassName), children: [option.dot === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: cn('size-1.5 shrink-0 rounded-full', dotToneClasses[option.dot]) })), option.icon === undefined || option.icon === null ? null : (_jsx("span", { "aria-hidden": "true", className: "flex items-center", children: option.icon })), option.label, option.count === undefined ? null : (_jsx("span", { className: cn('inline-flex min-w-[18px] items-center justify-center rounded-full bg-surface-3 px-1.5 py-px ', 'font-mono text-[10px] font-bold tabular-nums text-fg-muted ', 'group-data-[selected]:bg-accent group-data-[selected]:text-accent-fg'), children: option.count }))] }, option.value));
|
|
66
73
|
}) }));
|
|
67
74
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGzC,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAkBrC,MAAM,cAAc,GAAyB;IAC3C,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,WAAW;IACnB,GAAG,EAAE,QAAQ;IACb,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,WAAW;IACnB,IAAI,EAAE,SAAS;CAChB,CAAC;
|
|
1
|
+
{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../../src/components/segmented-control/SegmentedControl.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@adminiumjs/ui",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.9",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@adminium/tokens": "npm:@adminiumjs/tokens@0.3.
|
|
26
|
+
"@adminium/tokens": "npm:@adminiumjs/tokens@0.3.9",
|
|
27
27
|
"@radix-ui/react-checkbox": "^1.3.3",
|
|
28
28
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
29
29
|
"@radix-ui/react-direction": "^1.1.1",
|