@flipdish/ui-library 0.37.0 → 0.38.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/__internal__/selectionControl/selectionControl.styles.cjs +22 -0
- package/dist/components/__internal__/selectionControl/selectionControl.styles.cjs.map +1 -0
- package/dist/components/__internal__/selectionControl/selectionControl.styles.d.ts +17 -0
- package/dist/components/__internal__/selectionControl/selectionControl.styles.d.ts.map +1 -0
- package/dist/components/__internal__/selectionControl/selectionControl.styles.js +20 -0
- package/dist/components/__internal__/selectionControl/selectionControl.styles.js.map +1 -0
- package/dist/components/__internal__/selectionControl/selectionControl.utils.d.ts +23 -0
- package/dist/components/__internal__/selectionControl/selectionControl.utils.d.ts.map +1 -0
- package/dist/components/atoms/Checkbox/index.cjs +3 -16
- package/dist/components/atoms/Checkbox/index.cjs.map +1 -1
- package/dist/components/atoms/Checkbox/index.d.ts.map +1 -1
- package/dist/components/atoms/Checkbox/index.js +3 -16
- package/dist/components/atoms/Checkbox/index.js.map +1 -1
- package/dist/components/atoms/Toggle/Toggle.styles.cjs +0 -14
- package/dist/components/atoms/Toggle/Toggle.styles.cjs.map +1 -1
- package/dist/components/atoms/Toggle/Toggle.styles.d.ts +0 -14
- package/dist/components/atoms/Toggle/Toggle.styles.d.ts.map +1 -1
- package/dist/components/atoms/Toggle/Toggle.styles.js +0 -14
- package/dist/components/atoms/Toggle/Toggle.styles.js.map +1 -1
- package/dist/components/atoms/Toggle/index.cjs +3 -2
- package/dist/components/atoms/Toggle/index.cjs.map +1 -1
- package/dist/components/atoms/Toggle/index.d.ts.map +1 -1
- package/dist/components/atoms/Toggle/index.js +3 -2
- package/dist/components/atoms/Toggle/index.js.map +1 -1
- package/dist/native/components/__internal__/selectionControl/SelectionControlText.d.ts +1 -1
- package/dist/native/components/__internal__/selectionControl/SelectionControlText.d.ts.map +1 -1
- package/dist/native/components/__internal__/selectionControl/SelectionControlText.js +2 -1
- package/dist/native/components/__internal__/selectionControl/SelectionControlText.js.map +1 -1
- package/dist/native/components/__internal__/selectionControl/selectionControl.styles.d.ts +17 -0
- package/dist/native/components/__internal__/selectionControl/selectionControl.styles.d.ts.map +1 -0
- package/dist/native/components/__internal__/selectionControl/selectionControl.styles.js +20 -0
- package/dist/native/components/__internal__/selectionControl/selectionControl.styles.js.map +1 -0
- package/dist/native/components/__internal__/selectionControl/selectionControl.utils.d.ts +23 -0
- package/dist/native/components/__internal__/selectionControl/selectionControl.utils.d.ts.map +1 -0
- package/dist/native/components/__internal__/selectionControl/selectionControl.utils.js +20 -0
- package/dist/native/components/__internal__/selectionControl/selectionControl.utils.js.map +1 -0
- package/dist/native/components/atoms/Checkbox/index.d.ts +31 -9
- package/dist/native/components/atoms/Checkbox/index.d.ts.map +1 -0
- package/dist/native/components/atoms/Checkbox/index.js +39 -0
- package/dist/native/components/atoms/Checkbox/index.js.map +1 -0
- package/dist/native/components/atoms/Toggle/Toggle.styles.d.ts +0 -14
- package/dist/native/components/atoms/Toggle/Toggle.styles.d.ts.map +1 -1
- package/dist/native/components/atoms/Toggle/Toggle.styles.js +0 -14
- package/dist/native/components/atoms/Toggle/Toggle.styles.js.map +1 -1
- package/dist/native/components/atoms/Toggle/index.d.ts.map +1 -1
- package/dist/native/components/atoms/Toggle/index.js +3 -1
- package/dist/native/components/atoms/Toggle/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
4
|
+
|
|
5
|
+
/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
|
|
6
|
+
const selectionControlSizes = cx.sortCx({
|
|
7
|
+
sm: {
|
|
8
|
+
root: 'gap-2',
|
|
9
|
+
textWrapper: '',
|
|
10
|
+
label: 'text-sm font-medium',
|
|
11
|
+
hint: 'text-sm',
|
|
12
|
+
},
|
|
13
|
+
md: {
|
|
14
|
+
root: 'gap-3',
|
|
15
|
+
textWrapper: 'gap-0.5',
|
|
16
|
+
label: 'text-md font-medium',
|
|
17
|
+
hint: 'text-md',
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
exports.selectionControlSizes = selectionControlSizes;
|
|
22
|
+
//# sourceMappingURL=selectionControl.styles.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selectionControl.styles.cjs","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"sourcesContent":[null],"names":["sortCx"],"mappings":";;;;AAIA;AACO,MAAM,qBAAqB,GAAGA,SAAM,CAAC;AAC1C,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACgG,CAAA;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export type SelectionControlSize = 'sm' | 'md';
|
|
2
|
+
/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
|
|
3
|
+
export declare const selectionControlSizes: {
|
|
4
|
+
sm: {
|
|
5
|
+
root: string;
|
|
6
|
+
textWrapper: string;
|
|
7
|
+
label: string;
|
|
8
|
+
hint: string;
|
|
9
|
+
};
|
|
10
|
+
md: {
|
|
11
|
+
root: string;
|
|
12
|
+
textWrapper: string;
|
|
13
|
+
label: string;
|
|
14
|
+
hint: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=selectionControl.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selectionControl.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,mHAAmH;AACnH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAakE,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { sortCx } from '@flipdish/ui-library/utilities/cx';
|
|
2
|
+
|
|
3
|
+
/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
|
|
4
|
+
const selectionControlSizes = sortCx({
|
|
5
|
+
sm: {
|
|
6
|
+
root: 'gap-2',
|
|
7
|
+
textWrapper: '',
|
|
8
|
+
label: 'text-sm font-medium',
|
|
9
|
+
hint: 'text-sm',
|
|
10
|
+
},
|
|
11
|
+
md: {
|
|
12
|
+
root: 'gap-3',
|
|
13
|
+
textWrapper: 'gap-0.5',
|
|
14
|
+
label: 'text-md font-medium',
|
|
15
|
+
hint: 'text-md',
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
export { selectionControlSizes };
|
|
20
|
+
//# sourceMappingURL=selectionControl.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selectionControl.styles.js","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;AACO,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAC1C,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACgG,CAAA;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Accessible name for a native selection control, since RN's `accessibilityLabel` takes only a string.
|
|
4
|
+
*
|
|
5
|
+
* @param ariaLabel Explicit name from the web-style `aria-label` prop; always wins when set.
|
|
6
|
+
* @param label The visible label, used only when it is plain text.
|
|
7
|
+
* @returns The name to announce, or `undefined` when neither gives a string.
|
|
8
|
+
*/
|
|
9
|
+
export declare const getAccessibleName: (ariaLabel: string | undefined, label: ReactNode) => string | undefined;
|
|
10
|
+
/**
|
|
11
|
+
* Screen-reader hint for a native selection control, since RN's `accessibilityHint` takes only a string.
|
|
12
|
+
*
|
|
13
|
+
* @param hint The visible hint, announced after the name only when it is plain text.
|
|
14
|
+
* @returns The hint to announce, or `undefined` for a non-string or missing hint.
|
|
15
|
+
*/
|
|
16
|
+
export declare const getAccessibleHint: (hint: ReactNode) => string | undefined;
|
|
17
|
+
export declare const SELECTION_CONTROL_HIT_SLOP: {
|
|
18
|
+
top: number;
|
|
19
|
+
bottom: number;
|
|
20
|
+
left: number;
|
|
21
|
+
right: number;
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=selectionControl.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selectionControl.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/__internal__/selectionControl/selectionControl.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,GAAG,SAAS,EAAE,OAAO,SAAS,KAAG,MAAM,GAAG,SAC/B,CAAC;AAE/D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,SAA0D,CAAC;AAGxH,eAAO,MAAM,0BAA0B;;;;;CAA6C,CAAC"}
|
|
@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
5
5
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
6
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
var selectionControl_styles = require('../../__internal__/selectionControl/selectionControl.styles.cjs');
|
|
7
8
|
|
|
8
9
|
/** Visual-only checkbox square with no input behaviour, for building custom selectable controls; `Checkbox` renders it inside a react-aria `Checkbox`. */
|
|
9
10
|
const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = 'sm', isFocusVisible = false }) => {
|
|
@@ -18,24 +19,10 @@ CheckboxBase.displayName = 'CheckboxBase';
|
|
|
18
19
|
*/
|
|
19
20
|
const Checkbox = ({ label, hint, size = 'sm', className, 'data-testid': dataTestId, ...ariaCheckboxProps }) => {
|
|
20
21
|
const checkboxTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'checkbox', rootName: 'checkbox' });
|
|
21
|
-
|
|
22
|
-
sm: {
|
|
23
|
-
root: 'gap-2',
|
|
24
|
-
textWrapper: '',
|
|
25
|
-
label: 'text-sm font-medium',
|
|
26
|
-
hint: 'text-sm',
|
|
27
|
-
},
|
|
28
|
-
md: {
|
|
29
|
-
root: 'gap-3',
|
|
30
|
-
textWrapper: 'gap-0.5',
|
|
31
|
-
label: 'text-md font-medium',
|
|
32
|
-
hint: 'text-md',
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
return (jsxRuntime.jsx(reactAriaComponents.Checkbox, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx.cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
|
|
22
|
+
return (jsxRuntime.jsx(reactAriaComponents.Checkbox, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx.cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', selectionControl_styles.selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('inline-flex flex-col', selectionControl_styles.selectionControlSizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', selectionControl_styles.selectionControlSizes[size].label), children: label }), hint && (
|
|
36
23
|
// biome-ignore lint/a11y/noStaticElementInteractions: not independently interactive — only stops the click reaching outer React handlers, see below
|
|
37
24
|
// biome-ignore lint/a11y/useKeyWithClickEvents: same as above, no keyboard equivalent needed
|
|
38
|
-
jsxRuntime.jsx("span", { className: cx.cx('text-tertiary',
|
|
25
|
+
jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', selectionControl_styles.selectionControlSizes[size].hint), onClick: (event) => {
|
|
39
26
|
// Deliberately stopPropagation only, no preventDefault (matches the
|
|
40
27
|
// Untitled UI reference). The native <label>->control click-forwarding
|
|
41
28
|
// that toggles the checkbox happens during the real DOM bubble phase,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","useResolvedTestId","AriaCheckbox","_Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","cx","_jsx","useResolvedTestId","AriaCheckbox","selectionControlSizes","_Fragment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAA4B,KAAK,aAAa,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAA4B,KAAK,aAAa,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG1G,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qGAAqG;IACrG,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,0JAA0J;AAC1J,eAAO,MAAM,YAAY;mFAAiG,iBAAiB;;CAwC1I,CAAC;AAGF,MAAM,WAAW,aAAc,SAAQ,iBAAiB;IACtD,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAC5B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ;wFAA8F,aAAa;;CAuD/H,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
3
3
|
import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
4
4
|
import { Checkbox as Checkbox$1 } from 'react-aria-components';
|
|
5
|
+
import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
|
|
5
6
|
|
|
6
7
|
/** Visual-only checkbox square with no input behaviour, for building custom selectable controls; `Checkbox` renders it inside a react-aria `Checkbox`. */
|
|
7
8
|
const CheckboxBase = ({ className, isSelected, isDisabled, isIndeterminate, size = 'sm', isFocusVisible = false }) => {
|
|
@@ -16,24 +17,10 @@ CheckboxBase.displayName = 'CheckboxBase';
|
|
|
16
17
|
*/
|
|
17
18
|
const Checkbox = ({ label, hint, size = 'sm', className, 'data-testid': dataTestId, ...ariaCheckboxProps }) => {
|
|
18
19
|
const checkboxTestId = useResolvedTestId({ testId: dataTestId, segment: 'checkbox', rootName: 'checkbox' });
|
|
19
|
-
|
|
20
|
-
sm: {
|
|
21
|
-
root: 'gap-2',
|
|
22
|
-
textWrapper: '',
|
|
23
|
-
label: 'text-sm font-medium',
|
|
24
|
-
hint: 'text-sm',
|
|
25
|
-
},
|
|
26
|
-
md: {
|
|
27
|
-
root: 'gap-3',
|
|
28
|
-
textWrapper: 'gap-0.5',
|
|
29
|
-
label: 'text-md font-medium',
|
|
30
|
-
hint: 'text-md',
|
|
31
|
-
},
|
|
32
|
-
};
|
|
33
|
-
return (jsx(Checkbox$1, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', sizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('inline-flex flex-col', sizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', sizes[size].label), children: label }), hint && (
|
|
20
|
+
return (jsx(Checkbox$1, { ...ariaCheckboxProps, "data-testid": checkboxTestId, className: (state) => cx('relative flex items-start', state.isDisabled && 'cursor-not-allowed', selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isIndeterminate, isDisabled, isFocusVisible }) => (jsxs(Fragment, { children: [jsx(CheckboxBase, { size: size, isSelected: isSelected, isIndeterminate: isIndeterminate, isDisabled: isDisabled, isFocusVisible: isFocusVisible, className: label || hint ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('inline-flex flex-col', selectionControlSizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', selectionControlSizes[size].label), children: label }), hint && (
|
|
34
21
|
// biome-ignore lint/a11y/noStaticElementInteractions: not independently interactive — only stops the click reaching outer React handlers, see below
|
|
35
22
|
// biome-ignore lint/a11y/useKeyWithClickEvents: same as above, no keyboard equivalent needed
|
|
36
|
-
jsx("span", { className: cx('text-tertiary',
|
|
23
|
+
jsx("span", { className: cx('text-tertiary', selectionControlSizes[size].hint), onClick: (event) => {
|
|
37
24
|
// Deliberately stopPropagation only, no preventDefault (matches the
|
|
38
25
|
// Untitled UI reference). The native <label>->control click-forwarding
|
|
39
26
|
// that toggles the checkbox happens during the real DOM bubble phase,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaCheckbox","_Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Checkbox/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx","AriaCheckbox","_Fragment"],"mappings":"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"}
|
|
@@ -21,20 +21,6 @@ const styles = cx.sortCx({
|
|
|
21
21
|
sm: 'translate-x-4',
|
|
22
22
|
md: 'translate-x-5',
|
|
23
23
|
},
|
|
24
|
-
sizes: {
|
|
25
|
-
sm: {
|
|
26
|
-
root: 'gap-2',
|
|
27
|
-
textWrapper: '',
|
|
28
|
-
label: 'text-sm font-medium',
|
|
29
|
-
hint: 'text-sm',
|
|
30
|
-
},
|
|
31
|
-
md: {
|
|
32
|
-
root: 'gap-3',
|
|
33
|
-
textWrapper: 'gap-0.5',
|
|
34
|
-
label: 'text-md font-medium',
|
|
35
|
-
hint: 'text-md',
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
24
|
});
|
|
39
25
|
|
|
40
26
|
exports.styles = styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.styles.cjs","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":["sortCx"],"mappings":";;;;AAGO,MAAM,MAAM,GAAGA,SAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;
|
|
1
|
+
{"version":3,"file":"Toggle.styles.cjs","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":["sortCx"],"mappings":";;;;AAGO,MAAM,MAAM,GAAGA,SAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACvC,CAAA;;"}
|
|
@@ -17,19 +17,5 @@ export declare const styles: {
|
|
|
17
17
|
sm: string;
|
|
18
18
|
md: string;
|
|
19
19
|
};
|
|
20
|
-
sizes: {
|
|
21
|
-
sm: {
|
|
22
|
-
root: string;
|
|
23
|
-
textWrapper: string;
|
|
24
|
-
label: string;
|
|
25
|
-
hint: string;
|
|
26
|
-
};
|
|
27
|
-
md: {
|
|
28
|
-
root: string;
|
|
29
|
-
textWrapper: string;
|
|
30
|
-
label: string;
|
|
31
|
-
hint: string;
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
20
|
};
|
|
35
21
|
//# sourceMappingURL=Toggle.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAmBjB,CAAC"}
|
|
@@ -19,20 +19,6 @@ const styles = sortCx({
|
|
|
19
19
|
sm: 'translate-x-4',
|
|
20
20
|
md: 'translate-x-5',
|
|
21
21
|
},
|
|
22
|
-
sizes: {
|
|
23
|
-
sm: {
|
|
24
|
-
root: 'gap-2',
|
|
25
|
-
textWrapper: '',
|
|
26
|
-
label: 'text-sm font-medium',
|
|
27
|
-
hint: 'text-sm',
|
|
28
|
-
},
|
|
29
|
-
md: {
|
|
30
|
-
root: 'gap-3',
|
|
31
|
-
textWrapper: 'gap-0.5',
|
|
32
|
-
label: 'text-md font-medium',
|
|
33
|
-
hint: 'text-md',
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
22
|
});
|
|
37
23
|
|
|
38
24
|
export { styles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.styles.js","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;
|
|
1
|
+
{"version":3,"file":"Toggle.styles.js","sources":["../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACvC,CAAA;;"}
|
|
@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var cx = require('@flipdish/ui-library/utilities/cx');
|
|
5
5
|
var testIdUtils = require('@flipdish/ui-library/utilities/testIdUtils');
|
|
6
6
|
var reactAriaComponents = require('react-aria-components');
|
|
7
|
+
var selectionControl_styles = require('../../__internal__/selectionControl/selectionControl.styles.cjs');
|
|
7
8
|
var Toggle_styles = require('./Toggle.styles.cjs');
|
|
8
9
|
|
|
9
10
|
/** Visual-only switch track and knob with no input behaviour, for building custom controls; `Toggle` renders it inside a react-aria `Switch`. */
|
|
@@ -19,10 +20,10 @@ const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelect
|
|
|
19
20
|
*/
|
|
20
21
|
const Toggle = ({ label, hint, className, size = 'sm', slim, 'data-testid': dataTestId, ...ariaSwitchProps }) => {
|
|
21
22
|
const toggleTestId = testIdUtils.useResolvedTestId({ testId: dataTestId, segment: 'toggle', rootName: 'toggle' });
|
|
22
|
-
return (jsxRuntime.jsx(reactAriaComponents.Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx.cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed',
|
|
23
|
+
return (jsxRuntime.jsx(reactAriaComponents.Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx.cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', selectionControl_styles.selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxRuntime.jsxs("div", { className: cx.cx('flex flex-col', selectionControl_styles.selectionControlSizes[size].textWrapper), children: [label && jsxRuntime.jsx("p", { className: cx.cx('text-secondary select-none', selectionControl_styles.selectionControlSizes[size].label), children: label }), hint && (
|
|
23
24
|
// biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
|
|
24
25
|
// biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
|
|
25
|
-
jsxRuntime.jsx("span", { className: cx.cx('text-tertiary',
|
|
26
|
+
jsxRuntime.jsx("span", { className: cx.cx('text-tertiary', selectionControl_styles.selectionControlSizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
|
|
26
27
|
};
|
|
27
28
|
|
|
28
29
|
exports.Toggle = Toggle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","cx","styles","useResolvedTestId","AriaSwitch","_jsxs","_Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","cx","styles","useResolvedTestId","AriaSwitch","selectionControlSizes","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,iJAAiJ;AACjJ,eAAO,MAAM,UAAU,GAAI,8EAAqF,eAAe,gCAkC9H,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,eAAe;IAClD,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,uFAA8F,WAAW,gCA4C/H,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import { cx } from '@flipdish/ui-library/utilities/cx';
|
|
3
3
|
import { useResolvedTestId } from '@flipdish/ui-library/utilities/testIdUtils';
|
|
4
4
|
import { Switch } from 'react-aria-components';
|
|
5
|
+
import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
|
|
5
6
|
import { styles } from './Toggle.styles.js';
|
|
6
7
|
|
|
7
8
|
/** Visual-only switch track and knob with no input behaviour, for building custom controls; `Toggle` renders it inside a react-aria `Switch`. */
|
|
@@ -17,10 +18,10 @@ const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, isSelect
|
|
|
17
18
|
*/
|
|
18
19
|
const Toggle = ({ label, hint, className, size = 'sm', slim, 'data-testid': dataTestId, ...ariaSwitchProps }) => {
|
|
19
20
|
const toggleTestId = useResolvedTestId({ testId: dataTestId, segment: 'toggle', rootName: 'toggle' });
|
|
20
|
-
return (jsx(Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed',
|
|
21
|
+
return (jsx(Switch, { ...ariaSwitchProps, "data-testid": toggleTestId, className: (state) => cx('relative flex w-max items-start', state.isDisabled && 'cursor-not-allowed', selectionControlSizes[size].root, typeof className === 'function' ? className(state) : className), children: ({ isSelected, isDisabled, isFocusVisible, isHovered }) => (jsxs(Fragment, { children: [jsx(ToggleBase, { slim: slim, size: size, isHovered: isHovered, isDisabled: isDisabled, isFocusVisible: isFocusVisible, isSelected: isSelected, className: slim ? 'mt-0.5' : '' }), (label || hint) && (jsxs("div", { className: cx('flex flex-col', selectionControlSizes[size].textWrapper), children: [label && jsx("p", { className: cx('text-secondary select-none', selectionControlSizes[size].label), children: label }), hint && (
|
|
21
22
|
// biome-ignore lint/a11y/noStaticElementInteractions: This is a hint that is not interactive
|
|
22
23
|
// biome-ignore lint/a11y/useKeyWithClickEvents: This is a hint that is not interactive
|
|
23
|
-
jsx("span", { className: cx('text-tertiary',
|
|
24
|
+
jsx("span", { className: cx('text-tertiary', selectionControlSizes[size].hint), onClick: (event) => event.stopPropagation(), children: hint }))] }))] })) }));
|
|
24
25
|
};
|
|
25
26
|
|
|
26
27
|
export { Toggle, ToggleBase };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaSwitch","_jsxs","_Fragment"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Toggle/index.tsx"],"sourcesContent":[null],"names":["_jsx","AriaSwitch","_jsxs","_Fragment"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionControlText.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectionControlText.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,oBAAoB,EAAyB,MAAM,2BAA2B,CAAC;AAa7F,UAAU,yBAAyB;IACjC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,yHAAyH;AACzH,eAAO,MAAM,oBAAoB,GAAI,uBAAuB,yBAAyB,uCASpF,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { cx } from '../../../utilities/cx/index.js';
|
|
3
3
|
import { View, Text } from 'react-native';
|
|
4
|
+
import { selectionControlSizes } from './selectionControl.styles.js';
|
|
4
5
|
|
|
5
6
|
// `Text` className is ignored by the current `react-native-css` preview (see Avatar), so label
|
|
6
7
|
// typography goes through `style`. Mirrors `text-sm`/`text-md` + `font-medium`.
|
|
@@ -15,7 +16,7 @@ const HINT_COLOR = '#525252';
|
|
|
15
16
|
const SelectionControlText = ({ size, label, hint }) => {
|
|
16
17
|
if (!label && !hint)
|
|
17
18
|
return null;
|
|
18
|
-
return (jsxs(View, { className: cx('shrink flex-col', size
|
|
19
|
+
return (jsxs(View, { className: cx('shrink flex-col', selectionControlSizes[size].textWrapper), children: [label ? jsx(Text, { style: { ...TEXT_SIZE[size], fontWeight: '500', color: LABEL_COLOR }, children: label }) : null, hint ? jsx(Text, { style: { ...TEXT_SIZE[size], color: HINT_COLOR }, children: hint }) : null] }));
|
|
19
20
|
};
|
|
20
21
|
|
|
21
22
|
export { SelectionControlText };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectionControlText.js","sources":["../../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"SelectionControlText.js","sources":["../../../../../../src/components/__internal__/selectionControl/SelectionControlText.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAKA;AACA;AACA,MAAM,SAAS,GAA2E;IACxF,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;CACrC;AAED;AACA,MAAM,WAAW,GAAG,SAAS;AAC7B,MAAM,UAAU,GAAG,SAAS;AAQ5B;AACO,MAAM,oBAAoB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA6B,KAAI;AACvF,IAAA,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AAEhC,IAAA,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAE,EAAE,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,EAAA,QAAA,EAAA,CAC5E,KAAK,GAAGC,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAA,QAAA,EAAG,KAAK,EAAA,CAAQ,GAAG,IAAI,EACzG,IAAI,GAAGA,IAAC,IAAI,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAA,QAAA,EAAG,IAAI,GAAQ,GAAG,IAAI,CAAA,EAAA,CAC/E;AAEX;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export type SelectionControlSize = 'sm' | 'md';
|
|
2
|
+
/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
|
|
3
|
+
export declare const selectionControlSizes: {
|
|
4
|
+
sm: {
|
|
5
|
+
root: string;
|
|
6
|
+
textWrapper: string;
|
|
7
|
+
label: string;
|
|
8
|
+
hint: string;
|
|
9
|
+
};
|
|
10
|
+
md: {
|
|
11
|
+
root: string;
|
|
12
|
+
textWrapper: string;
|
|
13
|
+
label: string;
|
|
14
|
+
hint: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=selectionControl.styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selectionControl.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,mHAAmH;AACnH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAakE,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { sortCx } from '../../../utilities/cx/index.js';
|
|
2
|
+
|
|
3
|
+
/** Root gap and label/hint typography shared by `Toggle`, `Checkbox` and `RadioButton` on web and React Native. */
|
|
4
|
+
const selectionControlSizes = sortCx({
|
|
5
|
+
sm: {
|
|
6
|
+
root: 'gap-2',
|
|
7
|
+
textWrapper: '',
|
|
8
|
+
label: 'text-sm font-medium',
|
|
9
|
+
hint: 'text-sm',
|
|
10
|
+
},
|
|
11
|
+
md: {
|
|
12
|
+
root: 'gap-3',
|
|
13
|
+
textWrapper: 'gap-0.5',
|
|
14
|
+
label: 'text-md font-medium',
|
|
15
|
+
hint: 'text-md',
|
|
16
|
+
},
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
export { selectionControlSizes };
|
|
20
|
+
//# sourceMappingURL=selectionControl.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selectionControl.styles.js","sources":["../../../../../../src/components/__internal__/selectionControl/selectionControl.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAIA;AACO,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAC1C,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,EAAE;AACf,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,IAAI,EAAE,OAAO;AACb,QAAA,WAAW,EAAE,SAAS;AACtB,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,IAAI,EAAE,SAAS;AAChB,KAAA;AACgG,CAAA;;"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Accessible name for a native selection control, since RN's `accessibilityLabel` takes only a string.
|
|
4
|
+
*
|
|
5
|
+
* @param ariaLabel Explicit name from the web-style `aria-label` prop; always wins when set.
|
|
6
|
+
* @param label The visible label, used only when it is plain text.
|
|
7
|
+
* @returns The name to announce, or `undefined` when neither gives a string.
|
|
8
|
+
*/
|
|
9
|
+
export declare const getAccessibleName: (ariaLabel: string | undefined, label: ReactNode) => string | undefined;
|
|
10
|
+
/**
|
|
11
|
+
* Screen-reader hint for a native selection control, since RN's `accessibilityHint` takes only a string.
|
|
12
|
+
*
|
|
13
|
+
* @param hint The visible hint, announced after the name only when it is plain text.
|
|
14
|
+
* @returns The hint to announce, or `undefined` for a non-string or missing hint.
|
|
15
|
+
*/
|
|
16
|
+
export declare const getAccessibleHint: (hint: ReactNode) => string | undefined;
|
|
17
|
+
export declare const SELECTION_CONTROL_HIT_SLOP: {
|
|
18
|
+
top: number;
|
|
19
|
+
bottom: number;
|
|
20
|
+
left: number;
|
|
21
|
+
right: number;
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=selectionControl.utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selectionControl.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/__internal__/selectionControl/selectionControl.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAAI,WAAW,MAAM,GAAG,SAAS,EAAE,OAAO,SAAS,KAAG,MAAM,GAAG,SAC/B,CAAC;AAE/D;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,MAAM,SAAS,KAAG,MAAM,GAAG,SAA0D,CAAC;AAGxH,eAAO,MAAM,0BAA0B;;;;;CAA6C,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Accessible name for a native selection control, since RN's `accessibilityLabel` takes only a string.
|
|
3
|
+
*
|
|
4
|
+
* @param ariaLabel Explicit name from the web-style `aria-label` prop; always wins when set.
|
|
5
|
+
* @param label The visible label, used only when it is plain text.
|
|
6
|
+
* @returns The name to announce, or `undefined` when neither gives a string.
|
|
7
|
+
*/
|
|
8
|
+
const getAccessibleName = (ariaLabel, label) => ariaLabel ?? (typeof label === 'string' ? label : undefined);
|
|
9
|
+
/**
|
|
10
|
+
* Screen-reader hint for a native selection control, since RN's `accessibilityHint` takes only a string.
|
|
11
|
+
*
|
|
12
|
+
* @param hint The visible hint, announced after the name only when it is plain text.
|
|
13
|
+
* @returns The hint to announce, or `undefined` for a non-string or missing hint.
|
|
14
|
+
*/
|
|
15
|
+
const getAccessibleHint = (hint) => (typeof hint === 'string' ? hint : undefined);
|
|
16
|
+
// Widens the 16–24px controls toward the 44pt minimum; vertical stops at 8 so options in a `gap-4` stack never overlap.
|
|
17
|
+
const SELECTION_CONTROL_HIT_SLOP = { top: 8, bottom: 8, left: 12, right: 12 };
|
|
18
|
+
|
|
19
|
+
export { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint, getAccessibleName };
|
|
20
|
+
//# sourceMappingURL=selectionControl.utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selectionControl.utils.js","sources":["../../../../../../src/components/__internal__/selectionControl/selectionControl.utils.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA;;;;;;AAMG;AACI,MAAM,iBAAiB,GAAG,CAAC,SAA6B,EAAE,KAAgB,KAC/E,SAAS,KAAK,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,SAAS;AAE7D;;;;;AAKG;MACU,iBAAiB,GAAG,CAAC,IAAe,MAA0B,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,SAAS;AAEtH;MACa,0BAA0B,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;;"}
|
|
@@ -1,12 +1,34 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
export interface CheckboxProps {
|
|
3
|
+
/** Sets the box size and the label and hint text size. */
|
|
4
|
+
size?: 'sm' | 'md';
|
|
5
|
+
/** Text shown beside the box; pressing it toggles the checkbox. */
|
|
6
|
+
label?: ReactNode;
|
|
7
|
+
/** Supporting text shown below the label. */
|
|
8
|
+
hint?: ReactNode;
|
|
9
|
+
/** Controlled checked state — the checkbox is checked when true. */
|
|
10
|
+
isSelected?: boolean;
|
|
11
|
+
/** Initial checked state for uncontrolled usage. */
|
|
12
|
+
defaultSelected?: boolean;
|
|
13
|
+
/** Shows a dash instead of a check, for a parent whose children are partly checked. */
|
|
14
|
+
isIndeterminate?: boolean;
|
|
15
|
+
/** Disables interaction and shows a reduced-opacity state. */
|
|
16
|
+
isDisabled?: boolean;
|
|
17
|
+
/** Called with the new checked state whenever the user toggles it. */
|
|
18
|
+
onChange?: (isSelected: boolean) => void;
|
|
19
|
+
/** Extra classes merged onto the root `Pressable`. */
|
|
20
|
+
className?: string;
|
|
21
|
+
/** Web-style accessible name, used as `accessibilityLabel` so shared call sites work on both platforms. */
|
|
22
|
+
'aria-label'?: string;
|
|
23
|
+
/** Overrides the generated `testID` (defaults to `fd-checkbox`). */
|
|
24
|
+
'data-testid'?: string;
|
|
25
|
+
}
|
|
1
26
|
/**
|
|
2
|
-
* `Checkbox`
|
|
27
|
+
* React Native `Checkbox` — the same box, check, dash, label and hint as web, built from
|
|
28
|
+
* `Pressable` and `View` instead of a react-aria `Checkbox`. The web `ring-inset` becomes a
|
|
29
|
+
* 1px border, which takes no extra space inside the fixed-size box.
|
|
3
30
|
*
|
|
4
|
-
*
|
|
5
|
-
* that importing `@flipdish/ui-library/components/atoms/Checkbox` from React Native fails at
|
|
6
|
-
* compile time rather than resolving to the web build's types. There is no
|
|
7
|
-
* matching `index.js`, so Metro cannot bundle this module either.
|
|
8
|
-
*
|
|
9
|
-
* To make `Checkbox` available on React Native, add an `index.native.tsx` beside
|
|
10
|
-
* its `index.tsx` — the build picks it up automatically and this stub disappears.
|
|
31
|
+
* @summary checkbox for selecting one or more options (React Native)
|
|
11
32
|
*/
|
|
12
|
-
export declare const
|
|
33
|
+
export declare const Checkbox: ({ label, hint, size, className, isSelected: isSelectedProp, defaultSelected, isIndeterminate, isDisabled, onChange, "aria-label": ariaLabel, "data-testid": dataTestId, }: CheckboxProps) => import("react").JSX.Element;
|
|
34
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Checkbox/index.native.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMjD,MAAM,WAAW,aAAa;IAC5B,0DAA0D;IAC1D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,mEAAmE;IACnE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AASD;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,2KAYtB,aAAa,gCA4Cf,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Minus, Check } from '@flipdish/ui-icons';
|
|
3
|
+
import { cx } from '../../../utilities/cx/index.js';
|
|
4
|
+
import { useResolvedTestId } from '../../../utilities/testIdUtils/index.js';
|
|
5
|
+
import { useState } from 'react';
|
|
6
|
+
import { Pressable, View } from 'react-native';
|
|
7
|
+
import { SelectionControlText } from '../../__internal__/selectionControl/SelectionControlText.js';
|
|
8
|
+
import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
|
|
9
|
+
import { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint, getAccessibleName } from '../../__internal__/selectionControl/selectionControl.utils.js';
|
|
10
|
+
|
|
11
|
+
// Web draws both glyphs in a 14px viewBox with a 2px stroke; the ported 24px icons need 24/7 for the same weight.
|
|
12
|
+
const GLYPH_STROKE = 24 / 7;
|
|
13
|
+
const CHECK_SIZE = { sm: 12, md: 14 };
|
|
14
|
+
const DASH_SIZE = { sm: 10, md: 14 };
|
|
15
|
+
// `text-fg-white` — icons take a colour value, not a class.
|
|
16
|
+
const GLYPH_COLOR = '#ffffff';
|
|
17
|
+
/**
|
|
18
|
+
* React Native `Checkbox` — the same box, check, dash, label and hint as web, built from
|
|
19
|
+
* `Pressable` and `View` instead of a react-aria `Checkbox`. The web `ring-inset` becomes a
|
|
20
|
+
* 1px border, which takes no extra space inside the fixed-size box.
|
|
21
|
+
*
|
|
22
|
+
* @summary checkbox for selecting one or more options (React Native)
|
|
23
|
+
*/
|
|
24
|
+
const Checkbox = ({ label, hint, size = 'sm', className, isSelected: isSelectedProp, defaultSelected = false, isIndeterminate, isDisabled, onChange, 'aria-label': ariaLabel, 'data-testid': dataTestId, }) => {
|
|
25
|
+
const checkboxTestId = useResolvedTestId({ testId: dataTestId, segment: 'checkbox', rootName: 'checkbox' });
|
|
26
|
+
const [uncontrolledSelected, setUncontrolledSelected] = useState(defaultSelected);
|
|
27
|
+
const isSelected = isSelectedProp ?? uncontrolledSelected;
|
|
28
|
+
const isFilled = isSelected || isIndeterminate;
|
|
29
|
+
const handlePress = () => {
|
|
30
|
+
const next = !isSelected;
|
|
31
|
+
if (isSelectedProp === undefined)
|
|
32
|
+
setUncontrolledSelected(next);
|
|
33
|
+
onChange?.(next);
|
|
34
|
+
};
|
|
35
|
+
return (jsxs(Pressable, { testID: checkboxTestId, disabled: isDisabled, onPress: handlePress, accessibilityRole: "checkbox", hitSlop: SELECTION_CONTROL_HIT_SLOP, accessibilityLabel: getAccessibleName(ariaLabel, label), accessibilityHint: getAccessibleHint(hint), accessibilityState: { checked: isIndeterminate ? 'mixed' : isSelected, disabled: Boolean(isDisabled) }, className: cx('relative flex flex-row items-start self-start', selectionControlSizes[size].root, className), children: [jsx(View, { className: cx('size-4 shrink-0 items-center justify-center rounded border border-primary bg-primary', size === 'md' && 'size-5 rounded-md', isFilled && 'border-brand-solid bg-brand-solid', isDisabled && 'opacity-50', isDisabled && !isFilled && 'bg-tertiary', (label || hint) && 'mt-0.5'), children: isIndeterminate ? (jsx(Minus, { size: DASH_SIZE[size], color: GLYPH_COLOR, strokeWidth: GLYPH_STROKE })) : isSelected ? (jsx(Check, { size: CHECK_SIZE[size], color: GLYPH_COLOR, strokeWidth: GLYPH_STROKE })) : null }), jsx(SelectionControlText, { size: size, label: label, hint: hint })] }));
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export { Checkbox };
|
|
39
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/Checkbox/index.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;;AAkCA;AACA,MAAM,YAAY,GAAG,EAAE,GAAG,CAAC;AAC3B,MAAM,UAAU,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAW;AAC9C,MAAM,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAW;AAC7C;AACA,MAAM,WAAW,GAAG,SAAS;AAE7B;;;;;;AAMG;AACI,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,IAAI,GAAG,IAAI,EACX,SAAS,EACT,UAAU,EAAE,cAAc,EAC1B,eAAe,GAAG,KAAK,EACvB,eAAe,EACf,UAAU,EACV,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,aAAa,EAAE,UAAU,GACX,KAAI;AAClB,IAAA,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;IAC3G,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC;AACjF,IAAA,MAAM,UAAU,GAAG,cAAc,IAAI,oBAAoB;AACzD,IAAA,MAAM,QAAQ,GAAG,UAAU,IAAI,eAAe;IAE9C,MAAM,WAAW,GAAG,MAAK;AACvB,QAAA,MAAM,IAAI,GAAG,CAAC,UAAU;QACxB,IAAI,cAAc,KAAK,SAAS;YAAE,uBAAuB,CAAC,IAAI,CAAC;AAC/D,QAAA,QAAQ,GAAG,IAAI,CAAC;AAClB,IAAA,CAAC;IAED,QACEA,KAAC,SAAS,EAAA,EACR,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAC,UAAU,EAC5B,OAAO,EAAE,0BAA0B,EACnC,kBAAkB,EAAE,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,EACvD,iBAAiB,EAAE,iBAAiB,CAAC,IAAI,CAAC,EAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,EAAE,EACtG,SAAS,EAAE,EAAE,CAAC,+CAA+C,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,QAAA,EAAA,CAE3GC,GAAA,CAAC,IAAI,EAAA,EACH,SAAS,EAAE,EAAE,CACX,sFAAsF,EACtF,IAAI,KAAK,IAAI,IAAI,mBAAmB,EACpC,QAAQ,IAAI,mCAAmC,EAC/C,UAAU,IAAI,YAAY,EAC1B,UAAU,IAAI,CAAC,QAAQ,IAAI,aAAa,EACxC,CAAC,KAAK,IAAI,IAAI,KAAK,QAAQ,CAC5B,YAEA,eAAe,IACdA,IAAC,KAAK,EAAA,EAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAA,CAAI,IAC7E,UAAU,IACZA,GAAA,CAAC,KAAK,EAAA,EAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAA,CAAI,IAC9E,IAAI,EAAA,CACH,EAEPA,IAAC,oBAAoB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,CAAA,EAAA,CACpD;AAEhB;;"}
|
|
@@ -17,19 +17,5 @@ export declare const styles: {
|
|
|
17
17
|
sm: string;
|
|
18
18
|
md: string;
|
|
19
19
|
};
|
|
20
|
-
sizes: {
|
|
21
|
-
sm: {
|
|
22
|
-
root: string;
|
|
23
|
-
textWrapper: string;
|
|
24
|
-
label: string;
|
|
25
|
-
hint: string;
|
|
26
|
-
};
|
|
27
|
-
md: {
|
|
28
|
-
root: string;
|
|
29
|
-
textWrapper: string;
|
|
30
|
-
label: string;
|
|
31
|
-
hint: string;
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
20
|
};
|
|
35
21
|
//# sourceMappingURL=Toggle.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM
|
|
1
|
+
{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAmBjB,CAAC"}
|
|
@@ -19,20 +19,6 @@ const styles = sortCx({
|
|
|
19
19
|
sm: 'translate-x-4',
|
|
20
20
|
md: 'translate-x-5',
|
|
21
21
|
},
|
|
22
|
-
sizes: {
|
|
23
|
-
sm: {
|
|
24
|
-
root: 'gap-2',
|
|
25
|
-
textWrapper: '',
|
|
26
|
-
label: 'text-sm font-medium',
|
|
27
|
-
hint: 'text-sm',
|
|
28
|
-
},
|
|
29
|
-
md: {
|
|
30
|
-
root: 'gap-3',
|
|
31
|
-
textWrapper: 'gap-0.5',
|
|
32
|
-
label: 'text-md font-medium',
|
|
33
|
-
hint: 'text-md',
|
|
34
|
-
},
|
|
35
|
-
},
|
|
36
22
|
});
|
|
37
23
|
|
|
38
24
|
export { styles };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.styles.js","sources":["../../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;
|
|
1
|
+
{"version":3,"file":"Toggle.styles.js","sources":["../../../../../../src/components/atoms/Toggle/Toggle.styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGO,MAAM,MAAM,GAAG,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE;AACP,YAAA,EAAE,EAAE,eAAe;AACnB,YAAA,EAAE,EAAE,gBAAgB;AACrB,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AAC+D,KAAA;AAClE,IAAA,IAAI,EAAE;AACJ,QAAA,EAAE,EAAE,QAAQ;AACZ,QAAA,EAAE,EAAE,QAAQ;AACwB,KAAA;AACtC,IAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,eAAe;AACnB,QAAA,EAAE,EAAE,eAAe;AACiB,KAAA;AACvC,CAAA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/index.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/Toggle/index.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAMpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,WAAW,WAAW;IAC1B,6DAA6D;IAC7D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qFAAqF;IACrF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2GAA2G;IAC3G,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAOD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,GAAI,gKAYpB,WAAW,gCA2Eb,CAAC"}
|
|
@@ -4,6 +4,8 @@ import { useResolvedTestId } from '../../../utilities/testIdUtils/index.js';
|
|
|
4
4
|
import { useState, useRef, useEffect } from 'react';
|
|
5
5
|
import { Animated, Easing, Pressable, View } from 'react-native';
|
|
6
6
|
import { SelectionControlText } from '../../__internal__/selectionControl/SelectionControlText.js';
|
|
7
|
+
import { selectionControlSizes } from '../../__internal__/selectionControl/selectionControl.styles.js';
|
|
8
|
+
import { SELECTION_CONTROL_HIT_SLOP, getAccessibleHint } from '../../__internal__/selectionControl/selectionControl.utils.js';
|
|
7
9
|
import { styles } from './Toggle.styles.js';
|
|
8
10
|
|
|
9
11
|
// Matches the web knob's 150ms ease-in-out slide.
|
|
@@ -42,7 +44,7 @@ const Toggle = ({ label, hint, className, size = 'sm', slim, isSelected: isSelec
|
|
|
42
44
|
setUncontrolledSelected(next);
|
|
43
45
|
onChange?.(next);
|
|
44
46
|
};
|
|
45
|
-
return (jsxs(Pressable, { testID: toggleTestId, disabled: isDisabled, onPress: handlePress, onPressIn: () => setPressed(true), onPressOut: () => setPressed(false), accessibilityRole: "switch", accessibilityLabel: ariaLabel ?? label, accessibilityState: { checked: isSelected, disabled: Boolean(isDisabled) }, className: cx('relative flex flex-row items-start self-start',
|
|
47
|
+
return (jsxs(Pressable, { testID: toggleTestId, disabled: isDisabled, onPress: handlePress, onPressIn: () => setPressed(true), onPressOut: () => setPressed(false), accessibilityRole: "switch", hitSlop: SELECTION_CONTROL_HIT_SLOP, accessibilityLabel: ariaLabel ?? label, accessibilityHint: getAccessibleHint(hint), accessibilityState: { checked: isSelected, disabled: Boolean(isDisabled) }, className: cx('relative flex flex-row items-start self-start', selectionControlSizes[size].root, className), children: [jsxs(View, { className: cx('flex-row rounded-full bg-tertiary', isDisabled && 'opacity-50', slim && 'mt-0.5', styles.track[slim ? 'slim' : 'default'][size]), children: [jsx(Animated.View, { pointerEvents: "none", style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, opacity: progress }, children: jsx(View, { className: cx('flex-1 rounded-full bg-brand-solid', pressed && 'bg-brand-solid_hover') }) }), jsx(View, { pointerEvents: "none", className: cx('absolute inset-0 rounded-full border-secondary', slim && isSelected && 'border-transparent'), style: { borderWidth: slim ? 1 : 0.5 } }), jsx(View, { className: "flex-1 flex-row", onLayout: handleKnobAreaLayout, children: jsx(Animated.View, { style: { transform: [{ translateX }] }, children: jsx(View, { className: cx('rounded-full bg-fg-white shadow-sm', slim && 'border border-toggle-border shadow-xs', slim && isSelected && 'border-toggle-slim-border_pressed', slim && isSelected && pressed && 'border-toggle-slim-border_pressed-hover', styles.knob[size]) }) }) })] }), jsx(SelectionControlText, { size: size, label: label, hint: hint })] }));
|
|
46
48
|
};
|
|
47
49
|
|
|
48
50
|
export { Toggle };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/Toggle/index.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/Toggle/index.native.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flipdish/ui-library",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.38.0",
|
|
4
4
|
"description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"imports": {
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
"@storybook/addon-a11y": "^10.5.8",
|
|
227
227
|
"@storybook/addon-docs": "^10.5.8",
|
|
228
228
|
"@storybook/addon-mcp": "^0.7.0",
|
|
229
|
-
"@storybook/addon-vitest": "10.6.
|
|
229
|
+
"@storybook/addon-vitest": "10.6.2",
|
|
230
230
|
"@storybook/react-vite": "^10.5.8",
|
|
231
231
|
"@tailwindcss/vite": "^4.3.1",
|
|
232
232
|
"@testing-library/jest-dom": "^6.9.1",
|