ionbase-ui 0.2.0 → 0.3.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/dist/components/Avatar.d.ts +8 -5
- package/dist/components/Avatar.d.ts.map +1 -1
- package/dist/components/Avatar.js +31 -11
- package/dist/components/Avatar.js.map +1 -1
- package/dist/components/Button.d.ts +4 -0
- package/dist/components/Button.d.ts.map +1 -1
- package/dist/components/Button.js +6 -2
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Checkbox.d.ts +6 -0
- package/dist/components/Checkbox.d.ts.map +1 -1
- package/dist/components/Checkbox.js +6 -3
- package/dist/components/Checkbox.js.map +1 -1
- package/dist/components/Input.d.ts +30 -2
- package/dist/components/Input.d.ts.map +1 -1
- package/dist/components/Input.js +23 -7
- package/dist/components/Input.js.map +1 -1
- package/dist/components/Menu.d.ts +6 -0
- package/dist/components/Menu.d.ts.map +1 -1
- package/dist/components/Menu.js +11 -7
- package/dist/components/Menu.js.map +1 -1
- package/dist/components/NavItem.d.ts +4 -0
- package/dist/components/NavItem.d.ts.map +1 -1
- package/dist/components/NavItem.js +22 -2
- package/dist/components/NavItem.js.map +1 -1
- package/dist/components/Radio.d.ts +11 -0
- package/dist/components/Radio.d.ts.map +1 -1
- package/dist/components/Radio.js +25 -17
- package/dist/components/Radio.js.map +1 -1
- package/dist/components/ScrollProgress.d.ts.map +1 -1
- package/dist/components/ScrollProgress.js +1 -0
- package/dist/components/ScrollProgress.js.map +1 -1
- package/dist/components/Select.d.ts +11 -2
- package/dist/components/Select.d.ts.map +1 -1
- package/dist/components/Select.js +6 -3
- package/dist/components/Select.js.map +1 -1
- package/dist/components/Table.d.ts +26 -1
- package/dist/components/Table.d.ts.map +1 -1
- package/dist/components/Table.js +30 -7
- package/dist/components/Table.js.map +1 -1
- package/dist/components/Tabs.d.ts +7 -3
- package/dist/components/Tabs.d.ts.map +1 -1
- package/dist/components/Tabs.js +13 -2
- package/dist/components/Tabs.js.map +1 -1
- package/dist/components/Toggle.d.ts +6 -0
- package/dist/components/Toggle.d.ts.map +1 -1
- package/dist/components/Toggle.js +6 -3
- package/dist/components/Toggle.js.map +1 -1
- package/dist/components/dom-props.d.ts +59 -0
- package/dist/components/dom-props.d.ts.map +1 -1
- package/dist/components/dom-props.js +86 -0
- package/dist/components/dom-props.js.map +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js.map +1 -1
- package/dist/components/resolve-disabled.d.ts +9 -0
- package/dist/components/resolve-disabled.d.ts.map +1 -0
- package/dist/components/resolve-disabled.js +15 -0
- package/dist/components/resolve-disabled.js.map +1 -0
- package/dist/index.d.ts +5 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -6
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +133 -0
- package/dist/styles/table.css +10 -6
- package/dist/styles/tabs.css +12 -3
- package/dist/tokens-js.d.ts +12 -0
- package/dist/tokens-js.d.ts.map +1 -0
- package/dist/tokens-js.js +12 -0
- package/dist/tokens-js.js.map +1 -0
- package/package.json +7 -3
package/dist/components/Radio.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef, useRef, useImperativeHandle, useContext, createContext, useId, } from 'react';
|
|
4
|
+
import { resolveDisabled } from './resolve-disabled.js';
|
|
3
5
|
/**
|
|
4
6
|
* A radio is meaningless alone — it needs siblings sharing a `name` and one
|
|
5
7
|
* selected value. The context lets RadioGroup own that without every Radio
|
|
@@ -9,14 +11,15 @@ import { forwardRef, useRef, useImperativeHandle, useContext, createContext, use
|
|
|
9
11
|
const RadioGroupContext = createContext(null);
|
|
10
12
|
export const Radio = forwardRef((props, forwardedRef) => {
|
|
11
13
|
const group = useContext(RadioGroupContext);
|
|
12
|
-
const { value, size = group?.size ?? 'md', intent = group?.intent ?? 'brand', className, children,
|
|
14
|
+
const { value, size = group?.size ?? 'md', intent = group?.intent ?? 'brand', className, children, isDisabled, disabled, name = group?.name, ...rest } = props;
|
|
15
|
+
const resolvedDisabled = resolveDisabled(isDisabled, disabled) ?? group?.isDisabled;
|
|
13
16
|
const domRef = useRef(null);
|
|
14
17
|
useImperativeHandle(forwardedRef, () => domRef.current);
|
|
15
18
|
const classNames = [
|
|
16
19
|
'ion-radio',
|
|
17
20
|
size !== 'md' ? `ion-radio--${size}` : '',
|
|
18
21
|
intent !== 'brand' ? `ion-radio--${intent}` : '',
|
|
19
|
-
|
|
22
|
+
resolvedDisabled ? 'ion-radio--disabled' : '',
|
|
20
23
|
className || '',
|
|
21
24
|
]
|
|
22
25
|
.filter(Boolean)
|
|
@@ -24,18 +27,22 @@ export const Radio = forwardRef((props, forwardedRef) => {
|
|
|
24
27
|
// Controlled only when the group is controlled; otherwise the group's
|
|
25
28
|
// defaultValue seeds the native input and the DOM owns the selection.
|
|
26
29
|
const controlled = group && group.value !== undefined;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
30
|
+
/*
|
|
31
|
+
* One handler for both branches.
|
|
32
|
+
*
|
|
33
|
+
* These used to be written inline per branch, and only the uncontrolled one
|
|
34
|
+
* chained `rest.onChange`. So `<Radio onChange={...}>` fired inside an
|
|
35
|
+
* uncontrolled RadioGroup and was silently dead inside a controlled one —
|
|
36
|
+
* the same component honouring two different contracts depending on a prop
|
|
37
|
+
* set by its parent, with nothing to warn you which one you were getting.
|
|
38
|
+
*/
|
|
39
|
+
const handleChange = (e) => {
|
|
40
|
+
group?.onChange?.(value);
|
|
41
|
+
rest.onChange?.(e);
|
|
42
|
+
};
|
|
43
|
+
return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "radio", name: name, value: value, disabled: resolvedDisabled, className: "ion-radio__input", onChange: handleChange, ...(controlled
|
|
44
|
+
? { checked: group.value === value }
|
|
45
|
+
: { defaultChecked: group?.defaultValue === value }) }), _jsx("span", { className: "ion-radio__indicator", "aria-hidden": "true", children: _jsx("span", { className: "ion-radio__dot" }) }), children && _jsx("span", { className: "ion-radio__label", children: children })] }));
|
|
39
46
|
});
|
|
40
47
|
Radio.displayName = 'Radio';
|
|
41
48
|
/**
|
|
@@ -45,7 +52,8 @@ Radio.displayName = 'Radio';
|
|
|
45
52
|
* does not.
|
|
46
53
|
*/
|
|
47
54
|
export const RadioGroup = forwardRef((props, ref) => {
|
|
48
|
-
const { name, value, defaultValue, onChange, label, size, intent, isDisabled, className, children, ...rest } = props;
|
|
55
|
+
const { name, value, defaultValue, onChange, label, size, intent, isDisabled, disabled, className, children, ...rest } = props;
|
|
56
|
+
const resolvedDisabled = resolveDisabled(isDisabled, disabled);
|
|
49
57
|
const generated = useId();
|
|
50
58
|
return (_jsx(RadioGroupContext.Provider, { value: {
|
|
51
59
|
name: name ?? generated,
|
|
@@ -54,8 +62,8 @@ export const RadioGroup = forwardRef((props, ref) => {
|
|
|
54
62
|
onChange,
|
|
55
63
|
size,
|
|
56
64
|
intent,
|
|
57
|
-
isDisabled,
|
|
58
|
-
}, children: _jsxs("fieldset", { ...rest, ref: ref, className: ['ion-radio-group', className].filter(Boolean).join(' '), children: [label && _jsx("legend", { className: "ion-radio-group__label", children: label }), children] }) }));
|
|
65
|
+
isDisabled: resolvedDisabled,
|
|
66
|
+
}, children: _jsxs("fieldset", { ...rest, ref: ref, disabled: resolvedDisabled, className: ['ion-radio-group', className].filter(Boolean).join(' '), children: [label && _jsx("legend", { className: "ion-radio-group__label", children: label }), children] }) }));
|
|
59
67
|
});
|
|
60
68
|
RadioGroup.displayName = 'RadioGroup';
|
|
61
69
|
//# sourceMappingURL=Radio.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EACZ,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,UAAU,EACV,aAAa,EACb,KAAK,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAexD;;;;;GAKG;AACH,MAAM,iBAAiB,GAAG,aAAa,CAAgC,IAAI,CAAC,CAAC;AAkB7E,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,KAAK,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC5C,MAAM,EACJ,KAAK,EACL,IAAI,GAAG,KAAK,EAAE,IAAI,IAAI,IAAI,EAC1B,MAAM,GAAG,KAAK,EAAE,MAAM,IAAI,OAAO,EACjC,SAAS,EACT,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,IAAI,GAAG,KAAK,EAAE,IAAI,EAClB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GACpB,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,IAAI,KAAK,EAAE,UAAU,CAAC;IAE7D,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG;QACjB,WAAW;QACX,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACzC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QAChD,gBAAgB,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;QAC7C,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,sEAAsE;IACtE,sEAAsE;IACtE,MAAM,UAAU,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,CAAC;IAEtD;;;;;;;;OAQG;IACH,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,KAAK,EAAE,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;QACzB,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,iBAAO,SAAS,EAAE,UAAU,aAC1B,mBACM,IAAI,EACR,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,YAAY,KAClB,CAAC,UAAU;oBACb,CAAC,CAAC,EAAE,OAAO,EAAE,KAAM,CAAC,KAAK,KAAK,KAAK,EAAE;oBACrC,CAAC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,YAAY,KAAK,KAAK,EAAE,CAAC,GACtD,EACF,eAAM,SAAS,EAAC,sBAAsB,iBAAa,MAAM,YACvD,eAAM,SAAS,EAAC,gBAAgB,GAAG,GAC9B,EACN,QAAQ,IAAI,eAAM,SAAS,EAAC,kBAAkB,YAAE,QAAQ,GAAQ,IAC3D,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAuB5B;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,MAAM,EACN,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IACzB,KAAK,EAAE;YACL,IAAI,EAAE,IAAI,IAAI,SAAS;YACvB,KAAK;YACL,YAAY;YACZ,QAAQ;YACR,IAAI;YACJ,MAAM;YACN,UAAU,EAAE,gBAAgB;SAC7B,YAED,uBACM,IAAI,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAE,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,aAElE,KAAK,IAAI,iBAAQ,SAAS,EAAC,wBAAwB,YAAE,KAAK,GAAU,EACpE,QAAQ,IACA,GACgB,CAC9B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollProgress.d.ts","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScrollProgress.d.ts","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC;;iEAE6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAClC;6DACyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;2DAEuD;IACvD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,cAAc,4FAgK1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollProgress.js","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScrollProgress.js","sourceRoot":"","sources":["../../src/components/ScrollProgress.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ export interface SelectOption {
|
|
|
5
5
|
label: string;
|
|
6
6
|
isDisabled?: boolean;
|
|
7
7
|
}
|
|
8
|
-
export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
|
|
8
|
+
export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'disabled'> {
|
|
9
9
|
/** Matches the Figma `Size` variant: Small, Medium, Large. */
|
|
10
10
|
size?: SelectSize;
|
|
11
11
|
/** The options to render. Omit and pass `children` for grouped options. */
|
|
@@ -23,8 +23,17 @@ export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectE
|
|
|
23
23
|
errorMessage?: React.ReactNode;
|
|
24
24
|
isInvalid?: boolean;
|
|
25
25
|
isDisabled?: boolean;
|
|
26
|
-
/**
|
|
26
|
+
/**
|
|
27
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
28
|
+
*/
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Class names for the control box (`.ion-select`). Always lands here —
|
|
32
|
+
* never on the form-field wrapper. Use `wrapperClassName` for that.
|
|
33
|
+
*/
|
|
27
34
|
className?: string;
|
|
35
|
+
/** Class names for the `.ion-field` wrapper when a label or helper is shown. */
|
|
36
|
+
wrapperClassName?: string;
|
|
28
37
|
}
|
|
29
38
|
/**
|
|
30
39
|
* Select wraps a native `<select>` rather than rebuilding one.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,MAAM,GAAG,UAAU,CACpB;IACC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wDAAwD;IACxD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAuBD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,uFAiIlB,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef, useRef, useImperativeHandle, useId } from 'react';
|
|
3
4
|
import { useHover, useFocusRing, mergeProps } from 'react-aria';
|
|
5
|
+
import { resolveDisabled } from './resolve-disabled.js';
|
|
4
6
|
/**
|
|
5
7
|
* The chevron from Figma's `Chevron` slot, inlined.
|
|
6
8
|
*
|
|
@@ -25,7 +27,8 @@ const ChevronDown = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "ar
|
|
|
25
27
|
* interaction, Filled from whether a value is set, the rest from props.
|
|
26
28
|
*/
|
|
27
29
|
export const Select = forwardRef((props, forwardedRef) => {
|
|
28
|
-
const { size = 'md', options, placeholder, label, description, errorMessage, isInvalid, isDisabled, className: customClassName, value, defaultValue, children, id: providedId, ...rest } = props;
|
|
30
|
+
const { size = 'md', options, placeholder, label, description, errorMessage, isInvalid, isDisabled: isDisabledProp, disabled, className: customClassName, wrapperClassName, value, defaultValue, children, id: providedId, ...rest } = props;
|
|
31
|
+
const isDisabled = resolveDisabled(isDisabledProp, disabled);
|
|
29
32
|
const domRef = useRef(null);
|
|
30
33
|
useImperativeHandle(forwardedRef, () => domRef.current);
|
|
31
34
|
const generatedId = useId();
|
|
@@ -55,7 +58,7 @@ export const Select = forwardRef((props, forwardedRef) => {
|
|
|
55
58
|
isPlaceholder ? 'ion-select--placeholder' : '',
|
|
56
59
|
isInvalid ? 'ion-select--invalid' : '',
|
|
57
60
|
isDisabled ? 'ion-select--disabled' : '',
|
|
58
|
-
|
|
61
|
+
customClassName || '',
|
|
59
62
|
]
|
|
60
63
|
.filter(Boolean)
|
|
61
64
|
.join(' ');
|
|
@@ -71,7 +74,7 @@ export const Select = forwardRef((props, forwardedRef) => {
|
|
|
71
74
|
return (_jsxs("div", { className: [
|
|
72
75
|
'ion-field',
|
|
73
76
|
isInvalid ? 'ion-field--error' : '',
|
|
74
|
-
|
|
77
|
+
wrapperClassName || '',
|
|
75
78
|
]
|
|
76
79
|
.filter(Boolean)
|
|
77
80
|
.join(' '), children: [label && (_jsx("label", { htmlFor: id, className: "ion-field__label", children: label })), box, helper && (_jsx("span", { id: helperId, className: "ion-field__helper", children: helper }))] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/components/Select.tsx"],"names":[],"mappings":"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"}
|
|
@@ -18,18 +18,36 @@ export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement>
|
|
|
18
18
|
* padding, which `.ion-table--compact td` and friends apply through the CSS
|
|
19
19
|
* cascade from this one class. A context provider for a value nothing in JS
|
|
20
20
|
* ever reads would be infrastructure with no consumer.
|
|
21
|
+
*
|
|
22
|
+
* The scroll container is a keyboard-reachable region (WCAG 2.1.1): overflow
|
|
23
|
+
* alone is not enough. `aria-label` / `aria-labelledby` on `Table` name that
|
|
24
|
+
* region — the container accepts no props of its own, so the table's name is
|
|
25
|
+
* the only place the label can live. Prefer a `<caption>` via
|
|
26
|
+
* `aria-labelledby` when the name should also be visible.
|
|
21
27
|
*/
|
|
22
28
|
export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>>;
|
|
23
29
|
export declare const TableHead: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
24
30
|
export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
31
|
+
/**
|
|
32
|
+
* Row selection checkboxes have no visible label by design, so an accessible
|
|
33
|
+
* name is required — either `aria-label` or label `children` on the Checkbox.
|
|
34
|
+
*/
|
|
35
|
+
export type TableRowSelection = React.ComponentProps<typeof Checkbox> & ({
|
|
36
|
+
'aria-label': string;
|
|
37
|
+
} | {
|
|
38
|
+
children: React.ReactNode;
|
|
39
|
+
});
|
|
25
40
|
export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
|
|
26
41
|
isSelected?: boolean;
|
|
27
42
|
/**
|
|
28
43
|
* Renders a leading `Checkbox` cell — Figma's `Show Selection`. Takes the
|
|
29
44
|
* checkbox's own props directly rather than a boolean, since a selectable
|
|
30
45
|
* row needs `checked`/`onChange` wiring, not just a decorative box.
|
|
46
|
+
*
|
|
47
|
+
* Inside `<thead>` the cell is a `<th scope="col">` (select-all). Inside
|
|
48
|
+
* `<tbody>` it is a `<td>`.
|
|
31
49
|
*/
|
|
32
|
-
selection?:
|
|
50
|
+
selection?: TableRowSelection;
|
|
33
51
|
}
|
|
34
52
|
/**
|
|
35
53
|
* A plain `<tr>`. Hover is CSS-only (`:hover` plus a `data-hovered` escape
|
|
@@ -42,10 +60,17 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
|
|
|
42
60
|
*/
|
|
43
61
|
export declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
|
|
44
62
|
export type TableCellAlign = 'leading' | 'trailing' | 'center';
|
|
63
|
+
export type TableCellScope = 'col' | 'row' | 'colgroup' | 'rowgroup';
|
|
45
64
|
export interface TableCellProps extends Omit<React.TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
|
|
46
65
|
/** Renders `<th>` instead of `<td>` — Figma's header cell, `surface/page`
|
|
47
66
|
* fill included. */
|
|
48
67
|
header?: boolean;
|
|
68
|
+
/**
|
|
69
|
+
* `<th>` scope. Inferred when omitted: `col` in `<thead>`, `row` in
|
|
70
|
+
* `<tbody>`. Pass explicitly when the inference is wrong (e.g. a column
|
|
71
|
+
* header rendered outside `<thead>`).
|
|
72
|
+
*/
|
|
73
|
+
scope?: TableCellScope;
|
|
49
74
|
align?: TableCellAlign;
|
|
50
75
|
/** Figma's `Type=Link` — recolours the content to `text/link` /
|
|
51
76
|
* `icon/primary` rather than the body defaults. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgD,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAS7D,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,uEAAuE;IACvE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;wCACoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAoCjB,CAAC;AAGF,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH,eAAO,MAAM,SAAS,+HASpB,CAAC;AAGH;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GACnE,CAAC;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAAC,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,iBAAiB,CAAC;CAC/B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,2FA0BpB,CAAC;AAGF,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,EAC5C,OAAO,CACR;IACC;yBACqB;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;wDACoD;IACpD,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,uEAAuE;IACvE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,6FAyDrB,CAAC"}
|
package/dist/components/Table.js
CHANGED
|
@@ -1,6 +1,13 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
+
import { createContext, forwardRef, useContext } from 'react';
|
|
3
4
|
import { Checkbox } from './Checkbox.js';
|
|
5
|
+
/**
|
|
6
|
+
* Section context so `TableRow` / `TableCell` can tell head from body without
|
|
7
|
+
* a prop the caller has to keep in sync with where the row actually sits.
|
|
8
|
+
* `createContext` is client-only — see verify-client-boundaries.mjs.
|
|
9
|
+
*/
|
|
10
|
+
const TableSectionContext = createContext(null);
|
|
4
11
|
/**
|
|
5
12
|
* `Table` owns the scroll container and the density class; everything else
|
|
6
13
|
* is composed from `TableHead` / `TableBody` / `TableRow` / `TableCell`,
|
|
@@ -11,8 +18,14 @@ import { Checkbox } from './Checkbox.js';
|
|
|
11
18
|
* padding, which `.ion-table--compact td` and friends apply through the CSS
|
|
12
19
|
* cascade from this one class. A context provider for a value nothing in JS
|
|
13
20
|
* ever reads would be infrastructure with no consumer.
|
|
21
|
+
*
|
|
22
|
+
* The scroll container is a keyboard-reachable region (WCAG 2.1.1): overflow
|
|
23
|
+
* alone is not enough. `aria-label` / `aria-labelledby` on `Table` name that
|
|
24
|
+
* region — the container accepts no props of its own, so the table's name is
|
|
25
|
+
* the only place the label can live. Prefer a `<caption>` via
|
|
26
|
+
* `aria-labelledby` when the name should also be visible.
|
|
14
27
|
*/
|
|
15
|
-
export const Table = forwardRef(({ density = 'default', isStriped, className, children, ...rest }, ref) => (_jsx("div", { className: "ion-table-container", children: _jsx("table", { ...rest, ref: ref, className: [
|
|
28
|
+
export const Table = forwardRef(({ density = 'default', isStriped, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...rest }, ref) => (_jsx("div", { className: "ion-table-container", role: "region", tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: _jsx("table", { ...rest, ref: ref, className: [
|
|
16
29
|
'ion-table',
|
|
17
30
|
density !== 'default' ? `ion-table--${density}` : '',
|
|
18
31
|
isStriped ? 'ion-table--striped' : '',
|
|
@@ -21,9 +34,9 @@ export const Table = forwardRef(({ density = 'default', isStriped, className, ch
|
|
|
21
34
|
.filter(Boolean)
|
|
22
35
|
.join(' '), children: children }) })));
|
|
23
36
|
Table.displayName = 'Table';
|
|
24
|
-
export const TableHead = forwardRef((
|
|
37
|
+
export const TableHead = forwardRef(({ children, ...rest }, ref) => (_jsx(TableSectionContext.Provider, { value: "head", children: _jsx("thead", { ...rest, ref: ref, children: children }) })));
|
|
25
38
|
TableHead.displayName = 'TableHead';
|
|
26
|
-
export const TableBody = forwardRef((
|
|
39
|
+
export const TableBody = forwardRef(({ children, ...rest }, ref) => (_jsx(TableSectionContext.Provider, { value: "body", children: _jsx("tbody", { ...rest, ref: ref, children: children }) })));
|
|
27
40
|
TableBody.displayName = 'TableBody';
|
|
28
41
|
/**
|
|
29
42
|
* A plain `<tr>`. Hover is CSS-only (`:hover` plus a `data-hovered` escape
|
|
@@ -34,7 +47,12 @@ TableBody.displayName = 'TableBody';
|
|
|
34
47
|
* the same accessible pattern Menu and Table Cell's own link variant use;
|
|
35
48
|
* nesting an interactive role on `<tr>` itself is not valid HTML.
|
|
36
49
|
*/
|
|
37
|
-
export const TableRow = forwardRef(({ isSelected, selection, className, children, ...rest }, ref) =>
|
|
50
|
+
export const TableRow = forwardRef(({ isSelected, selection, className, children, ...rest }, ref) => {
|
|
51
|
+
const section = useContext(TableSectionContext);
|
|
52
|
+
const inHead = section === 'head';
|
|
53
|
+
return (_jsxs("tr", { ...rest, ref: ref, "data-selected": isSelected || undefined, className: ['ion-table__row', className].filter(Boolean).join(' '), children: [selection &&
|
|
54
|
+
(inHead ? (_jsx("th", { scope: "col", children: _jsx(Checkbox, { ...selection }) })) : (_jsx("td", { children: _jsx(Checkbox, { ...selection }) }))), children] }));
|
|
55
|
+
});
|
|
38
56
|
TableRow.displayName = 'TableRow';
|
|
39
57
|
/**
|
|
40
58
|
* One component covers Figma's `Table Cell` + `Cell Text`: the two are never
|
|
@@ -46,15 +64,20 @@ TableRow.displayName = 'TableRow';
|
|
|
46
64
|
* could disagree with where the cell actually sits — a `<th>` rendered inside
|
|
47
65
|
* `<tbody>` is still a header cell to the browser and to CSS either way.
|
|
48
66
|
*/
|
|
49
|
-
export const TableCell = forwardRef(({ header, align = 'leading', variant = 'default', showDivider, icon, trailingIcon, className, children, ...rest }, ref) => {
|
|
67
|
+
export const TableCell = forwardRef(({ header, scope: scopeProp, align = 'leading', variant = 'default', showDivider, icon, trailingIcon, className, children, ...rest }, ref) => {
|
|
68
|
+
const section = useContext(TableSectionContext);
|
|
50
69
|
const Tag = header ? 'th' : 'td';
|
|
70
|
+
// `scope` is only valid on `<th>` — never put it on a `<td>`.
|
|
71
|
+
const scope = header
|
|
72
|
+
? (scopeProp ?? (section === 'body' ? 'row' : 'col'))
|
|
73
|
+
: undefined;
|
|
51
74
|
const contentClassNames = [
|
|
52
75
|
'ion-table__cell-content',
|
|
53
76
|
variant === 'link' ? 'ion-table__cell-content--link' : '',
|
|
54
77
|
]
|
|
55
78
|
.filter(Boolean)
|
|
56
79
|
.join(' ');
|
|
57
|
-
return (_jsx(Tag, { ...rest, ref: ref, "data-align": align !== 'leading' ? align : undefined, "data-divider": showDivider || undefined, className: className, children: _jsxs("span", { className: contentClassNames, children: [icon && (_jsx("span", { className: "ion-table__cell-icon", "aria-hidden": "true", children: icon })), children, trailingIcon && (_jsx("span", { className: "ion-table__cell-icon ion-table__cell-icon--trailing", "aria-hidden": "true", children: trailingIcon }))] }) }));
|
|
80
|
+
return (_jsx(Tag, { ...rest, ref: ref, ...(scope ? { scope } : {}), "data-align": align !== 'leading' ? align : undefined, "data-divider": showDivider || undefined, className: className, children: _jsxs("span", { className: contentClassNames, children: [icon && (_jsx("span", { className: "ion-table__cell-icon", "aria-hidden": "true", children: icon })), children, trailingIcon && (_jsx("span", { className: "ion-table__cell-icon ion-table__cell-icon--trailing", "aria-hidden": "true", children: trailingIcon }))] }) }));
|
|
58
81
|
});
|
|
59
82
|
TableCell.displayName = 'TableCell';
|
|
60
83
|
//# sourceMappingURL=Table.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,10 +9,14 @@ export interface TabsProps<T extends object> extends AriaTabListProps<T> {
|
|
|
9
9
|
/** Matches the Figma `Size` variant. */
|
|
10
10
|
size?: TabsSize;
|
|
11
11
|
/**
|
|
12
|
-
*
|
|
13
|
-
*
|
|
12
|
+
* Drives both the arrow-key axis and the track layout.
|
|
13
|
+
*
|
|
14
|
+
* `vertical` is keyboard- and ARIA-complete — up/down move between tabs, and
|
|
15
|
+
* the track stacks — but its *decoration* is not: the underline rule and the
|
|
16
|
+
* pill track's padding are still written for the horizontal axis only. Those
|
|
17
|
+
* are Figma's to specify, not this file's to invent. See tabs.css.
|
|
14
18
|
*/
|
|
15
|
-
orientation?: 'horizontal';
|
|
19
|
+
orientation?: 'horizontal' | 'vertical';
|
|
16
20
|
className?: string;
|
|
17
21
|
}
|
|
18
22
|
export declare const Tabs: <T extends object>(props: TabsProps<T> & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,EAOL,KAAK,gBAAgB,EACtB,MAAM,YAAY,CAAC;AAEpB,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAIlD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,WAAW,CAAC;AAC5C,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACtE,sDAAsD;IACtD,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwED,eAAO,MAAM,IAAI,EAoDX,CAAC,CAAC,SAAS,MAAM,EACrB,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KACtD,KAAK,CAAC,YAAY,CAAC;AAExB,qFAAqF;AACrF,OAAO,EAAE,IAAI,IAAI,OAAO,EAAE,CAAC"}
|
package/dist/components/Tabs.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef, useRef } from 'react';
|
|
3
4
|
import { useTabList, useTab, useTabPanel, useHover, useFocusRing, mergeProps, } from 'react-aria';
|
|
4
5
|
import { useTabListState } from 'react-stately';
|
|
5
6
|
import { Item } from '@react-stately/collections';
|
|
7
|
+
import { ARIA_TAB_LIST_NON_DOM_PROPS, omitProps } from './dom-props.js';
|
|
6
8
|
/**
|
|
7
9
|
* A single tab. `useTab` supplies roving tabindex, arrow-key navigation and the
|
|
8
10
|
* aria-controls/aria-labelledby pairing with the panel.
|
|
@@ -31,7 +33,16 @@ function TabPanel({ state, className, ...rest }) {
|
|
|
31
33
|
return (_jsx("div", { ...tabPanelProps, ref: ref, className: ['ion-tabs__panel', className].filter(Boolean).join(' '), children: state.selectedItem?.props.children }));
|
|
32
34
|
}
|
|
33
35
|
export const Tabs = forwardRef(function Tabs(props, forwardedRef) {
|
|
34
|
-
const { type = 'pill', size = 'md', orientation = 'horizontal', className: customClassName, ...
|
|
36
|
+
const { type = 'pill', size = 'md', orientation = 'horizontal', className: customClassName, ...rest } = props;
|
|
37
|
+
/*
|
|
38
|
+
* `orientation` is destructured for the class name, so it has to be put back
|
|
39
|
+
* before the hooks see it. It was not, and React Aria therefore fell back to
|
|
40
|
+
* its own default of horizontal: a vertical track kept left/right arrow
|
|
41
|
+
* navigation and announced the wrong aria-orientation, while the CSS class
|
|
42
|
+
* said vertical. One value, two sources of truth.
|
|
43
|
+
*/
|
|
44
|
+
const ariaProps = { ...rest, orientation };
|
|
45
|
+
const domProps = omitProps(rest, ARIA_TAB_LIST_NON_DOM_PROPS);
|
|
35
46
|
const state = useTabListState(ariaProps);
|
|
36
47
|
const listRef = useRef(null);
|
|
37
48
|
const { tabListProps } = useTabList(ariaProps, state, listRef);
|
|
@@ -40,7 +51,7 @@ export const Tabs = forwardRef(function Tabs(props, forwardedRef) {
|
|
|
40
51
|
`ion-tabs__track--${type}`,
|
|
41
52
|
`ion-tabs__track--${orientation}`,
|
|
42
53
|
].join(' ');
|
|
43
|
-
return (_jsxs("div", { ref: forwardedRef, className: ['ion-tabs', customClassName].filter(Boolean).join(' '), children: [_jsx("div", { ...tabListProps, ref: listRef, className: trackClassName, children: [...state.collection].map((item) => (_jsx(Tab, { item: item, state: state, type: type, size: size }, item.key))) }), _jsx(TabPanel, { state: state }, state.selectedItem?.key)] }));
|
|
54
|
+
return (_jsxs("div", { ...domProps, ref: forwardedRef, className: ['ion-tabs', customClassName].filter(Boolean).join(' '), children: [_jsx("div", { ...tabListProps, ref: listRef, className: trackClassName, children: [...state.collection].map((item) => (_jsx(Tab, { item: item, state: state, type: type, size: size }, item.key))) }), _jsx(TabPanel, { state: state }, state.selectedItem?.key)] }));
|
|
44
55
|
});
|
|
45
56
|
/** A tab and its panel content. `title` is the tab label; children are the panel. */
|
|
46
57
|
export { Item as TabItem };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,12 @@ export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
|
|
|
6
6
|
size?: ToggleSize;
|
|
7
7
|
/** Matches the Figma `Color` variant: Brand, Neutral, Danger. */
|
|
8
8
|
intent?: ToggleIntent;
|
|
9
|
+
/** Whether the toggle is disabled. */
|
|
10
|
+
isDisabled?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
13
|
+
*/
|
|
14
|
+
disabled?: boolean;
|
|
9
15
|
children?: React.ReactNode;
|
|
10
16
|
}
|
|
11
17
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1D,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,CAChB;IACC,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iEAAiE;IACjE,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,sFA4ClB,CAAC"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
4
|
+
import { resolveDisabled } from './resolve-disabled.js';
|
|
3
5
|
/**
|
|
4
6
|
* Toggle is a checkbox with `role="switch"`.
|
|
5
7
|
*
|
|
@@ -14,19 +16,20 @@ import { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
|
14
16
|
* ramps.
|
|
15
17
|
*/
|
|
16
18
|
export const Toggle = forwardRef((props, forwardedRef) => {
|
|
17
|
-
const { size = 'md', intent = 'brand', className, children, disabled, ...rest } = props;
|
|
19
|
+
const { size = 'md', intent = 'brand', className, children, isDisabled, disabled, ...rest } = props;
|
|
20
|
+
const resolvedDisabled = resolveDisabled(isDisabled, disabled);
|
|
18
21
|
const domRef = useRef(null);
|
|
19
22
|
useImperativeHandle(forwardedRef, () => domRef.current);
|
|
20
23
|
const classNames = [
|
|
21
24
|
'ion-toggle',
|
|
22
25
|
size !== 'md' ? `ion-toggle--${size}` : '',
|
|
23
26
|
intent !== 'brand' ? `ion-toggle--${intent}` : '',
|
|
24
|
-
|
|
27
|
+
resolvedDisabled ? 'ion-toggle--disabled' : '',
|
|
25
28
|
className || '',
|
|
26
29
|
]
|
|
27
30
|
.filter(Boolean)
|
|
28
31
|
.join(' ');
|
|
29
|
-
return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "checkbox", role: "switch", disabled:
|
|
32
|
+
return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "checkbox", role: "switch", disabled: resolvedDisabled, className: "ion-toggle__input" }), _jsx("span", { className: "ion-toggle__track", "aria-hidden": "true", children: _jsx("span", { className: "ion-toggle__thumb" }) }), children && _jsx("span", { className: "ion-toggle__label", children: children })] }));
|
|
30
33
|
});
|
|
31
34
|
Toggle.displayName = 'Toggle';
|
|
32
35
|
//# sourceMappingURL=Toggle.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../src/components/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAsBxD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,OAAO,EAChB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAE/D,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG;QACjB,YAAY;QACZ,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC1C,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,eAAe,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QACjD,gBAAgB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;QAC9C,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iBAAO,SAAS,EAAE,UAAU,aAC1B,mBACM,IAAI,EACR,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAC,mBAAmB,GAC7B,EACF,eAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,YACpD,eAAM,SAAS,EAAC,mBAAmB,GAAG,GACjC,EACN,QAAQ,IAAI,eAAM,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAQ,IAC5D,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}
|
|
@@ -40,6 +40,65 @@
|
|
|
40
40
|
* with.
|
|
41
41
|
*/
|
|
42
42
|
export declare const ARIA_BUTTON_NON_DOM_PROPS: readonly ["onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "onFocusChange", "excludeFromTabOrder", "preventFocusOnPress", "elementType", "href", "target", "rel"];
|
|
43
|
+
/**
|
|
44
|
+
* The same, for `AriaTextFieldProps` — Input's prop type.
|
|
45
|
+
*
|
|
46
|
+
* Input had the opposite defect to Button's: it destructured ten named props
|
|
47
|
+
* and never built a rest object at all, so nothing outside `AriaTextFieldProps`
|
|
48
|
+
* ever reached the `<input>`. `data-testid` and every other custom attribute
|
|
49
|
+
* vanished with no warning. Spreading the rest fixes that, but only if these
|
|
50
|
+
* come out first.
|
|
51
|
+
*
|
|
52
|
+
* Sources, as of react-aria 3.50:
|
|
53
|
+
* LabelableProps label
|
|
54
|
+
* HelpTextProps description, errorMessage
|
|
55
|
+
* InputBase isDisabled, isReadOnly
|
|
56
|
+
* Validation isRequired, isInvalid, validationState, validationBehavior,
|
|
57
|
+
* validate
|
|
58
|
+
* ValueBase onChange — takes a string, not an event; `useTextField`
|
|
59
|
+
* returns a real DOM handler in its place
|
|
60
|
+
* FocusEvents onFocusChange
|
|
61
|
+
* FocusableDOMProps excludeFromTabOrder
|
|
62
|
+
*
|
|
63
|
+
* Several of these Input already destructures by name; they are listed anyway
|
|
64
|
+
* so this reads as a complete statement about the type rather than a diff
|
|
65
|
+
* against one component's parameter list.
|
|
66
|
+
*
|
|
67
|
+
* `spellCheck` is the odd one out: a real input attribute, but React Aria types
|
|
68
|
+
* it as `string` where React wants `Booleanish`, so forwarding it from the rest
|
|
69
|
+
* spread does not typecheck. It is dropped rather than cast because
|
|
70
|
+
* `useTextField` already returns it — verified: `inputProps` carries the whole
|
|
71
|
+
* of `TextInputDOMProps`, `spellCheck` and `autoCorrect` included.
|
|
72
|
+
*
|
|
73
|
+
* `value` and `defaultValue` are here for a subtler reason than the rest.
|
|
74
|
+
* "`inputProps` is spread afterwards and wins" only holds for the SAME key —
|
|
75
|
+
* and `useTextField` always returns `value`, even when the caller passed
|
|
76
|
+
* `defaultValue`. Forwarding `defaultValue` therefore puts both on the element
|
|
77
|
+
* and React warns that the input is neither controlled nor uncontrolled. This
|
|
78
|
+
* was a real regression, caught by the Input stories, not a precaution.
|
|
79
|
+
*
|
|
80
|
+
* `placeholder`, `name`, `autoComplete` and `id` stay out of the list: they are
|
|
81
|
+
* single-key collisions, so `inputProps` genuinely does win.
|
|
82
|
+
*/
|
|
83
|
+
export declare const ARIA_TEXT_FIELD_NON_DOM_PROPS: readonly ["label", "description", "errorMessage", "isDisabled", "isReadOnly", "isRequired", "isInvalid", "validationState", "validationBehavior", "validate", "onChange", "onFocusChange", "excludeFromTabOrder", "spellCheck", "value", "defaultValue"];
|
|
84
|
+
/**
|
|
85
|
+
* The same, for `AriaTabListProps` — Tabs' prop type.
|
|
86
|
+
*
|
|
87
|
+
* Tabs previously forwarded its leftover props only into the Aria/Stately
|
|
88
|
+
* hooks, so HTML attributes like `data-testid` never reached the root. The
|
|
89
|
+
* list below is what must stay off the DOM when the rest is spread onto the
|
|
90
|
+
* outer element; the hooks still see the full object.
|
|
91
|
+
*
|
|
92
|
+
* Sources, as of react-aria / react-stately 3.50:
|
|
93
|
+
* CollectionBase children, items, disabledKeys
|
|
94
|
+
* TabListProps isDisabled, selectedKey, defaultSelectedKey,
|
|
95
|
+
* onSelectionChange
|
|
96
|
+
* AriaTabListProps keyboardActivation, orientation
|
|
97
|
+
*
|
|
98
|
+
* `id`, `aria-*` and other `DOMProps` / `AriaLabelingProps` members are valid
|
|
99
|
+
* on the root and are deliberately absent.
|
|
100
|
+
*/
|
|
101
|
+
export declare const ARIA_TAB_LIST_NON_DOM_PROPS: readonly ["children", "items", "disabledKeys", "isDisabled", "selectedKey", "defaultSelectedKey", "onSelectionChange", "keyboardActivation", "orientation"];
|
|
43
102
|
/**
|
|
44
103
|
* Returns `props` without `keys`, leaving `props` untouched.
|
|
45
104
|
*
|