ionbase-ui 0.1.1 → 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/README.md +129 -3
- 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 +154 -1
- package/dist/styles/table.css +10 -6
- package/dist/styles/tabs.css +12 -3
- package/dist/styles/tokens/base.css +8 -8
- 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
|
@@ -1,6 +1,8 @@
|
|
|
1
|
+
'use client';
|
|
1
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
3
|
import { forwardRef, useRef, useImperativeHandle } from 'react';
|
|
3
4
|
import { useHover, useFocusRing, mergeProps } from 'react-aria';
|
|
5
|
+
import { resolveDisabled } from './resolve-disabled.js';
|
|
4
6
|
/** Figma's `Chevron` slot — always the same downward caret, shown only when
|
|
5
7
|
* `showChevron` is set. Inlined for the same reason Select's is: it is part
|
|
6
8
|
* of the control, not a slot a caller fills. */
|
|
@@ -18,7 +20,8 @@ const Chevron = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-h
|
|
|
18
20
|
* `:focus-visible` rules so the stylesheet still works without React.
|
|
19
21
|
*/
|
|
20
22
|
export const NavItem = forwardRef((props, forwardedRef) => {
|
|
21
|
-
const { icon, showChevron, isDisabled, children, className, href, ...rest } = props;
|
|
23
|
+
const { icon, showChevron, isDisabled: isDisabledProp, disabled, children, className, href, ...rest } = props;
|
|
24
|
+
const isDisabled = resolveDisabled(isDisabledProp, disabled);
|
|
22
25
|
const domRef = useRef(null);
|
|
23
26
|
useImperativeHandle(forwardedRef, () => domRef.current);
|
|
24
27
|
const { hoverProps, isHovered } = useHover({ isDisabled });
|
|
@@ -37,7 +40,24 @@ export const NavItem = forwardRef((props, forwardedRef) => {
|
|
|
37
40
|
};
|
|
38
41
|
const content = (_jsxs(_Fragment, { children: [icon && (_jsx("span", { className: "ion-nav-item__icon", "aria-hidden": "true", children: icon })), children, showChevron && (_jsx("span", { className: "ion-nav-item__chevron", "aria-hidden": "true", children: _jsx(Chevron, {}) }))] }));
|
|
39
42
|
if (href !== undefined) {
|
|
40
|
-
|
|
43
|
+
/*
|
|
44
|
+
* A disabled link keeps the `<a>` (so the role stays "link") but must not
|
|
45
|
+
* fire handlers spread via `...rest`. `aria-disabled` alone does not stop
|
|
46
|
+
* `onClick` — strip pointer/keyboard activation and take the link out of
|
|
47
|
+
* the tab order.
|
|
48
|
+
*/
|
|
49
|
+
const { onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, onKeyDown, onKeyUp, ...anchorRest } = rest;
|
|
50
|
+
return (_jsx("a", { ...anchorRest, ...(isDisabled
|
|
51
|
+
? {}
|
|
52
|
+
: {
|
|
53
|
+
onClick,
|
|
54
|
+
onMouseDown,
|
|
55
|
+
onMouseUp,
|
|
56
|
+
onPointerDown,
|
|
57
|
+
onPointerUp,
|
|
58
|
+
onKeyDown,
|
|
59
|
+
onKeyUp,
|
|
60
|
+
}), ...mergeProps(hoverProps, focusProps), ...stateAttributes, ref: domRef, href: isDisabled ? undefined : href, "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, className: classNames, children: content }));
|
|
41
61
|
}
|
|
42
62
|
return (_jsx("button", { ...rest, ...mergeProps(hoverProps, focusProps), ...stateAttributes, ref: domRef, type: "button", disabled: isDisabled, className: classNames, children: content }));
|
|
43
63
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavItem.js","sourceRoot":"","sources":["../../src/components/NavItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NavItem.js","sourceRoot":"","sources":["../../src/components/NavItem.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,6 +5,12 @@ export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
|
|
|
5
5
|
value: string;
|
|
6
6
|
size?: RadioSize;
|
|
7
7
|
intent?: RadioIntent;
|
|
8
|
+
/** Whether this radio is disabled. Falls back to the group's `isDisabled`. */
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
12
|
+
*/
|
|
13
|
+
disabled?: boolean;
|
|
8
14
|
children?: React.ReactNode;
|
|
9
15
|
}
|
|
10
16
|
export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -17,7 +23,12 @@ export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLF
|
|
|
17
23
|
label?: React.ReactNode;
|
|
18
24
|
size?: RadioSize;
|
|
19
25
|
intent?: RadioIntent;
|
|
26
|
+
/** Whether every radio in the group is disabled. */
|
|
20
27
|
isDisabled?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* @deprecated Use `isDisabled`. Accepted as an alias for one minor version.
|
|
30
|
+
*/
|
|
31
|
+
disabled?: boolean;
|
|
21
32
|
children?: React.ReactNode;
|
|
22
33
|
}
|
|
23
34
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/components/Radio.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAoBzD,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,MAAM,GAAG,OAAO,CAC1B;IACC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,KAAK,qFAuEjB,CAAC;AAIF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EACjD,UAAU,CACX;IACC,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,6FA4CtB,CAAC"}
|
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":"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"}
|
|
@@ -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"}
|