@elliemae/ds-form-toggle 3.60.0-next.37 → 3.60.0-next.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/config/useDSControlledToggle.js +1 -1
- package/dist/cjs/config/useDSControlledToggle.js.map +2 -2
- package/dist/cjs/constants/index.js.map +1 -1
- package/dist/cjs/react-desc-prop-types.js +3 -3
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/typescript-testing/form-toggle-typescript-valid.js +132 -0
- package/dist/cjs/typescript-testing/form-toggle-typescript-valid.js.map +7 -0
- package/dist/esm/config/useDSControlledToggle.js +1 -1
- package/dist/esm/config/useDSControlledToggle.js.map +2 -2
- package/dist/esm/constants/index.js.map +1 -1
- package/dist/esm/react-desc-prop-types.js +3 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/typescript-testing/form-toggle-typescript-valid.js +109 -0
- package/dist/esm/typescript-testing/form-toggle-typescript-valid.js.map +7 -0
- package/dist/types/react-desc-prop-types.d.ts +4 -4
- package/dist/types/tests/DSControlledToggle.events.test.d.ts +1 -0
- package/dist/types/tests/DSControlledToggle.exports.test.d.ts +1 -0
- package/dist/types/tests/DSControlledToggle.get-owner-props-arguments.test.d.ts +1 -0
- package/dist/types/typescript-testing/form-toggle-typescript-valid.d.ts +1 -0
- package/package.json +6 -6
- /package/dist/types/tests/{DSControlledToggle.a11y.test.d.ts → DSControlledToggle.a11y-specific-scenarios.test.d.ts} +0 -0
- /package/dist/types/tests/{DSControlledToggle.test.d.ts → DSControlledToggle.api.test.d.ts} +0 -0
|
@@ -57,7 +57,7 @@ const useDSControlledToggle = (propsFromUser) => {
|
|
|
57
57
|
});
|
|
58
58
|
const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
|
|
59
59
|
const { id } = propsWithDefault;
|
|
60
|
-
const instanceUid = import_react.default.useMemo(() => id || (0, import_uid.uid)(5)
|
|
60
|
+
const instanceUid = import_react.default.useMemo(() => id || `ds-form-toggle-${(0, import_uid.uid)(5)}`, [id]);
|
|
61
61
|
const { width, handleRefOnLabelWidth, handleRefOffLabelWidth } = (0, import_useGetWidestLabelWidth.useGetWidestLabelWidth)();
|
|
62
62
|
const buttonProps = (0, import_useGetButtonProps.useGetButtonProps)({
|
|
63
63
|
handleOnClick,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/useDSControlledToggle.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useGetButtonProps } from './useGetButtonProps.js';\nimport { useGetWidestLabelWidth } from './useGetWidestLabelWidth.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n const handleOnClick = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || applyAriaDisabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, applyAriaDisabled, readOnly, onChange],\n );\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n onClick: handleOnClick,\n });\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5)
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAyF;AACzF,mBAAmC;AACnC,iBAAoB;AACpB,mCAAoF;AACpF,+BAAkC;AAClC,oCAAuC;AACvC,8BAAiC;AAE1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,uBAAmB,sDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,kBAAc,gDAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,
|
|
4
|
+
"sourcesContent": ["import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useGetButtonProps } from './useGetButtonProps.js';\nimport { useGetWidestLabelWidth } from './useGetWidestLabelWidth.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n const handleOnClick = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || applyAriaDisabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, applyAriaDisabled, readOnly, onChange],\n );\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n onClick: handleOnClick,\n });\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || `ds-form-toggle-${uid(5)}`, [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const { width, handleRefOnLabelWidth, handleRefOffLabelWidth } = useGetWidestLabelWidth();\n const buttonProps = useGetButtonProps({\n handleOnClick,\n globalProps,\n instanceUid,\n propsWithDefault,\n });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n width,\n handleRefOnLabelWidth,\n handleRefOffLabelWidth,\n globalProps,\n buttonProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n }),\n [\n propsWithDefault,\n width,\n handleRefOnLabelWidth,\n handleRefOffLabelWidth,\n globalProps,\n buttonProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAyF;AACzF,mBAAmC;AACnC,iBAAoB;AACpB,mCAAoF;AACpF,+BAAkC;AAClC,oCAAuC;AACvC,8BAAiC;AAE1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,uBAAmB,sDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,kBAAc,gDAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,MAAM,sBAAkB,gBAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAI9E,QAAM,EAAE,OAAO,uBAAuB,uBAAuB,QAAI,sDAAuB;AACxF,QAAM,kBAAc,4CAAkB;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/constants/index.
|
|
3
|
+
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSControlledToggleName = 'DSFormtoggle';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_SLOTS = {\n CONTAINER_WITH_RADIUS_SHAPE: 'container-with-radius-shape',\n BUTTON_CONTENT_WRAPPER: 'button-content-wrapper',\n CIRCLE: 'circle',\n TEXT_WRAPPER: 'text-wrapper',\n // legacy ones...\n CONTROLLED_CONTAINER: 'controlled-container', // in other components this is the ROOT\n TOGGLE_CHECKBOX: 'toggle-checkbox',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n CONTROLLED_CONTAINER: 'ds-controlled-toggle', // in other components this is the ROOT\n TOGGLE_CHECKBOX: 'ds-controlled-toggle-checkbox',\n};\n\n// Specific of the toggle component\n\nexport const TOGGLE_SIZES = {\n SMALL: 's',\n MEDIUM: 'm',\n LARGE: 'l',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,yBAAyB;AAG/B,MAAM,0BAA0B;AAAA,EACrC,6BAA6B;AAAA,EAC7B,wBAAwB;AAAA,EACxB,QAAQ;AAAA,EACR,cAAc;AAAA;AAAA,EAEd,sBAAsB;AAAA;AAAA,EACtB,iBAAiB;AACnB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,OAAG,0CAAwB,wBAAwB,uBAAuB;AAAA,EAC1E,sBAAsB;AAAA;AAAA,EACtB,iBAAiB;AACnB;AAIO,MAAM,eAAe;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
@@ -47,14 +47,14 @@ const defaultProps = {
|
|
|
47
47
|
const DSControlledTogglePropTypes = {
|
|
48
48
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
49
49
|
...import_ds_props_helpers.xstyledPropTypes,
|
|
50
|
-
checked: import_ds_props_helpers.PropTypes.bool.description("
|
|
50
|
+
checked: import_ds_props_helpers.PropTypes.bool.description("Whether the toggle is checked or not").defaultValue("false"),
|
|
51
51
|
onChange: import_ds_props_helpers.PropTypes.func.description("OnClick callback").defaultValue("() => null"),
|
|
52
52
|
size: import_ds_props_helpers.PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle").defaultValue(import_constants.TOGGLE_SIZES.MEDIUM),
|
|
53
|
-
disabled: import_ds_props_helpers.PropTypes.bool.description("
|
|
53
|
+
disabled: import_ds_props_helpers.PropTypes.bool.description("Whether the toggle is disabled or not").defaultValue("false"),
|
|
54
54
|
applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
|
|
55
55
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
56
56
|
).defaultValue("false"),
|
|
57
|
-
readOnly: import_ds_props_helpers.PropTypes.bool.description("
|
|
57
|
+
readOnly: import_ds_props_helpers.PropTypes.bool.description("Whether the toggle is readOnly or not").defaultValue("false"),
|
|
58
58
|
containerProps: import_ds_props_helpers.PropTypes.object.description("Set of properties attached to the main container"),
|
|
59
59
|
id: import_ds_props_helpers.PropTypes.string.description("Unique id."),
|
|
60
60
|
labelOn: import_ds_props_helpers.PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TOGGLE_SIZES } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n export interface DefaultProps {\n checked: boolean;\n onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface OptionalProps {\n containerProps?: Record<string, unknown>;\n id?: string;\n }\n\n // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n // this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n export interface PostDeprecationETAPropsFallback {\n /**\n * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOn?: string; // used to be \"labelOn\"\n /**\n * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOff?: string; // used to be \"labelOff\"\n }\n export interface
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AACvE,uBAA6B;AAqEtB,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,8BAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,KAAK,YAAY,
|
|
4
|
+
"sourcesContent": ["import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TOGGLE_SIZES } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n export interface DefaultProps {\n checked: boolean;\n onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface OptionalProps {\n containerProps?: Record<string, unknown>;\n id?: string;\n }\n\n // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n // this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n export interface PostDeprecationETAPropsFallback {\n /**\n * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOn?: string; // used to be \"labelOn\"\n /**\n * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOff?: string; // used to be \"labelOff\"\n }\n export interface PreDeprecationETAProps {\n /**\n * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n labelOn?: string; // used to be \"labelOn\"\n /**\n * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n labelOff?: string; // used to be \"labelOff\"\n }\n\n export interface ButtonV3InherithedProps extends Omit<DSButtonV3T.Props, 'size' | 'children'> {}\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps,\n PreDeprecationETAProps,\n PostDeprecationETAPropsFallback {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps,\n PreDeprecationETAProps,\n PostDeprecationETAPropsFallback {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n checked: false,\n onChange: () => null,\n size: TOGGLE_SIZES.MEDIUM,\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<\n Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> &\n DSControlledToggleT.PreDeprecationETAProps\n> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.bool.description('Whether the toggle is checked or not').defaultValue('false'),\n onChange: PropTypes.func.description('OnClick callback').defaultValue('() => null'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle').defaultValue(TOGGLE_SIZES.MEDIUM),\n disabled: PropTypes.bool.description('Whether the toggle is disabled or not').defaultValue('false'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue('false'),\n readOnly: PropTypes.bool.description('Whether the toggle is readOnly or not').defaultValue('false'),\n containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n labelOn: PropTypes.string\n .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n .deprecated({ version: '25.3' }),\n labelOff: PropTypes.string\n .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AACvE,uBAA6B;AAqEtB,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,8BAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EAChG,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,YAAY;AAAA,EAClF,MAAM,kCAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,8BAAa,MAAM;AAAA,EACrG,UAAU,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,kCAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,gBAAgB,kCAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,IAAI,kCAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,SAAS,kCAAU,OAChB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,UAAU,kCAAU,OACjB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;AAEO,MAAM,oCACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __copyProps = (to, from, except, desc) => {
|
|
9
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
|
+
for (let key of __getOwnPropNames(from))
|
|
11
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
12
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
13
|
+
}
|
|
14
|
+
return to;
|
|
15
|
+
};
|
|
16
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
18
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
19
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
20
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var React = __toESM(require("react"));
|
|
25
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
26
|
+
var import__ = require("../index.js");
|
|
27
|
+
const testRequiredProps = {};
|
|
28
|
+
const testOptionalProps = {
|
|
29
|
+
id: "toggle-id",
|
|
30
|
+
containerProps: {
|
|
31
|
+
"data-testid": "toggle-container",
|
|
32
|
+
"aria-label": "toggle container"
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
const testPartialDefaults = {
|
|
36
|
+
checked: true,
|
|
37
|
+
size: import__.TOGGLE_SIZES.MEDIUM
|
|
38
|
+
};
|
|
39
|
+
const testProps = {
|
|
40
|
+
...testRequiredProps,
|
|
41
|
+
...testOptionalProps,
|
|
42
|
+
...testPartialDefaults
|
|
43
|
+
};
|
|
44
|
+
const testPropsAsSyntax = {
|
|
45
|
+
...testRequiredProps,
|
|
46
|
+
...testOptionalProps,
|
|
47
|
+
...testPartialDefaults
|
|
48
|
+
};
|
|
49
|
+
const testCompleteDefaults = {
|
|
50
|
+
checked: false,
|
|
51
|
+
onChange: () => {
|
|
52
|
+
},
|
|
53
|
+
size: import__.TOGGLE_SIZES.MEDIUM,
|
|
54
|
+
readOnly: false,
|
|
55
|
+
disabled: false,
|
|
56
|
+
applyAriaDisabled: false
|
|
57
|
+
};
|
|
58
|
+
const testInternalProps = {
|
|
59
|
+
...testRequiredProps,
|
|
60
|
+
...testOptionalProps,
|
|
61
|
+
...testCompleteDefaults
|
|
62
|
+
};
|
|
63
|
+
const testInternalPropsAsSyntax = {
|
|
64
|
+
...testRequiredProps,
|
|
65
|
+
...testOptionalProps,
|
|
66
|
+
...testCompleteDefaults
|
|
67
|
+
};
|
|
68
|
+
const testExplicitDefinition = {
|
|
69
|
+
id: "toggle-explicit",
|
|
70
|
+
containerProps: {
|
|
71
|
+
"data-testid": "toggle-explicit-container"
|
|
72
|
+
},
|
|
73
|
+
checked: true,
|
|
74
|
+
onChange: () => {
|
|
75
|
+
},
|
|
76
|
+
size: import__.TOGGLE_SIZES.LARGE,
|
|
77
|
+
readOnly: false,
|
|
78
|
+
disabled: false,
|
|
79
|
+
applyAriaDisabled: false,
|
|
80
|
+
labelOn: "Enabled",
|
|
81
|
+
labelOff: "Disabled",
|
|
82
|
+
wcagViolationLabelOn: "Legacy On",
|
|
83
|
+
wcagViolationLabelOff: "Legacy Off"
|
|
84
|
+
};
|
|
85
|
+
const testInferedTypeCompatibility = {
|
|
86
|
+
id: "toggle-inferred",
|
|
87
|
+
checked: false,
|
|
88
|
+
onChange: () => {
|
|
89
|
+
},
|
|
90
|
+
size: import__.TOGGLE_SIZES.SMALL,
|
|
91
|
+
readOnly: false,
|
|
92
|
+
disabled: true,
|
|
93
|
+
applyAriaDisabled: true,
|
|
94
|
+
labelOn: "Enabled",
|
|
95
|
+
labelOff: "Disabled"
|
|
96
|
+
};
|
|
97
|
+
const testDefinitionAsConst = {
|
|
98
|
+
id: "toggle-const",
|
|
99
|
+
checked: true,
|
|
100
|
+
onChange: () => {
|
|
101
|
+
},
|
|
102
|
+
size: import__.TOGGLE_SIZES.MEDIUM,
|
|
103
|
+
readOnly: true,
|
|
104
|
+
disabled: false,
|
|
105
|
+
applyAriaDisabled: false
|
|
106
|
+
};
|
|
107
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
108
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSControlledToggle, { ...testExplicitDefinition }),
|
|
109
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSControlledToggle, { ...testInferedTypeCompatibility }),
|
|
110
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.DSControlledToggle, { ...testDefinitionAsConst }),
|
|
111
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
112
|
+
import__.DSControlledToggle,
|
|
113
|
+
{
|
|
114
|
+
id: "toggle-inline",
|
|
115
|
+
containerProps: {
|
|
116
|
+
"data-testid": "toggle-inline-container"
|
|
117
|
+
},
|
|
118
|
+
checked: true,
|
|
119
|
+
onChange: () => {
|
|
120
|
+
},
|
|
121
|
+
size: import__.TOGGLE_SIZES.MEDIUM,
|
|
122
|
+
readOnly: false,
|
|
123
|
+
disabled: false,
|
|
124
|
+
applyAriaDisabled: false,
|
|
125
|
+
labelOn: "Enabled",
|
|
126
|
+
labelOff: "Disabled",
|
|
127
|
+
wcagViolationLabelOn: "Legacy On",
|
|
128
|
+
wcagViolationLabelOff: "Legacy Off"
|
|
129
|
+
}
|
|
130
|
+
)
|
|
131
|
+
] });
|
|
132
|
+
//# sourceMappingURL=form-toggle-typescript-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/form-toggle-typescript-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledToggle, TOGGLE_SIZES, type DSControlledToggleT } from '../index.js';\n\n/**\n * Namespace type aliases exposed by the package public API.\n */\ntype ComponentPropsForApp = DSControlledToggleT.Props;\ntype ComponentPropsInternals = DSControlledToggleT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledToggleT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledToggleT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledToggleT.RequiredProps;\n\n/**\n * Required props contract (empty for this component).\n */\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\n/**\n * Optional props contract.\n */\nconst testOptionalProps: ComponentPropsOptionalProps = {\n id: 'toggle-id',\n containerProps: {\n 'data-testid': 'toggle-container',\n 'aria-label': 'toggle container',\n },\n};\n\n/**\n * Partial defaults are valid for app-facing props.\n */\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n checked: true,\n size: TOGGLE_SIZES.MEDIUM,\n};\n\n/**\n * Public props composition using explicit type annotation.\n */\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\n/**\n * Public props composition using \"as\" syntax.\n */\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n/**\n * Internal props require all default values.\n */\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n checked: false,\n onChange: () => {},\n size: TOGGLE_SIZES.MEDIUM,\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n};\n\n/**\n * Internal props composition using explicit type annotation.\n */\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\n/**\n * Internal props composition using \"as\" syntax.\n */\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n/**\n * Explicit app-facing definition validates individual keys.\n */\nconst testExplicitDefinition: ComponentPropsForApp = {\n id: 'toggle-explicit',\n containerProps: {\n 'data-testid': 'toggle-explicit-container',\n },\n checked: true,\n onChange: () => {},\n size: TOGGLE_SIZES.LARGE,\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n labelOn: 'Enabled',\n labelOff: 'Disabled',\n wcagViolationLabelOn: 'Legacy On',\n wcagViolationLabelOff: 'Legacy Off',\n};\n\n/**\n * Inferred compatibility validates the complete object against public props.\n */\nconst testInferedTypeCompatibility = {\n id: 'toggle-inferred',\n checked: false,\n onChange: () => {},\n size: TOGGLE_SIZES.SMALL,\n readOnly: false,\n disabled: true,\n applyAriaDisabled: true,\n labelOn: 'Enabled',\n labelOff: 'Disabled',\n} as ComponentPropsForApp;\n\n/**\n * As-const object should remain spread-compatible with component props.\n */\nconst testDefinitionAsConst = {\n id: 'toggle-const',\n checked: true,\n onChange: () => {},\n size: TOGGLE_SIZES.MEDIUM,\n readOnly: true,\n disabled: false,\n applyAriaDisabled: false,\n} as const;\n\n/**\n * TS validation usage component covering spread and inline syntaxes.\n */\nconst ExampleUsageComponent = () => (\n <>\n <DSControlledToggle {...testExplicitDefinition} />\n <DSControlledToggle {...testInferedTypeCompatibility} />\n <DSControlledToggle {...testDefinitionAsConst} />\n <DSControlledToggle\n id=\"toggle-inline\"\n containerProps={{\n 'data-testid': 'toggle-inline-container',\n }}\n checked\n onChange={() => {}}\n size={TOGGLE_SIZES.MEDIUM}\n readOnly={false}\n disabled={false}\n applyAriaDisabled={false}\n labelOn=\"Enabled\"\n labelOff=\"Disabled\"\n wcagViolationLabelOn=\"Legacy On\"\n wcagViolationLabelOff=\"Legacy Off\"\n />\n </>\n);\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA,YAAuB;ACwIrB;AAvIF,eAA2E;AAc3E,MAAM,oBAAiD,CAAC;AAKxD,MAAM,oBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAKA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,MAAM,sBAAa;AACrB;AAKA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,uBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,yBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,sBAAsB;AAAA,EACtB,uBAAuB;AACzB;AAKA,MAAM,+BAA+B;AAAA,EACnC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AACZ;AAKA,MAAM,wBAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,sBAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,wBAAwB,MAC5B,4EACE;AAAA,8CAAC,+BAAoB,GAAG,wBAAwB;AAAA,EAChD,4CAAC,+BAAoB,GAAG,8BAA8B;AAAA,EACtD,4CAAC,+BAAoB,GAAG,uBAAuB;AAAA,EAC/C;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,MACA,SAAO;AAAA,MACP,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,MAAM,sBAAa;AAAA,MACnB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,sBAAqB;AAAA,MACrB,uBAAsB;AAAA;AAAA,EACxB;AAAA,GACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -24,7 +24,7 @@ const useDSControlledToggle = (propsFromUser) => {
|
|
|
24
24
|
});
|
|
25
25
|
const xstyledProps = useGetXstyledProps(propsWithDefault);
|
|
26
26
|
const { id } = propsWithDefault;
|
|
27
|
-
const instanceUid = React2.useMemo(() => id || uid(5)
|
|
27
|
+
const instanceUid = React2.useMemo(() => id || `ds-form-toggle-${uid(5)}`, [id]);
|
|
28
28
|
const { width, handleRefOnLabelWidth, handleRefOffLabelWidth } = useGetWidestLabelWidth();
|
|
29
29
|
const buttonProps = useGetButtonProps({
|
|
30
30
|
handleOnClick,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDSControlledToggle.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useGetButtonProps } from './useGetButtonProps.js';\nimport { useGetWidestLabelWidth } from './useGetWidestLabelWidth.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n const handleOnClick = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || applyAriaDisabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, applyAriaDisabled, readOnly, onChange],\n );\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n onClick: handleOnClick,\n });\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5)
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,OAAOA,UAAS,mBAAmB;AACnC,SAAS,WAAW;AACpB,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AAE1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,cAAc,uBAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useGetButtonProps } from './useGetButtonProps.js';\nimport { useGetWidestLabelWidth } from './useGetWidestLabelWidth.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n const handleOnClick = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || applyAriaDisabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, applyAriaDisabled, readOnly, onChange],\n );\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n onClick: handleOnClick,\n });\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || `ds-form-toggle-${uid(5)}`, [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const { width, handleRefOnLabelWidth, handleRefOffLabelWidth } = useGetWidestLabelWidth();\n const buttonProps = useGetButtonProps({\n handleOnClick,\n globalProps,\n instanceUid,\n propsWithDefault,\n });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n width,\n handleRefOnLabelWidth,\n handleRefOffLabelWidth,\n globalProps,\n buttonProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n }),\n [\n propsWithDefault,\n width,\n handleRefOnLabelWidth,\n handleRefOffLabelWidth,\n globalProps,\n buttonProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,OAAOA,UAAS,mBAAmB;AACnC,SAAS,WAAW;AACpB,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AAE1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,cAAc,uBAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,eAAe,mBAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAcA,OAAM,QAAQ,MAAM,MAAM,kBAAkB,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAI9E,QAAM,EAAE,OAAO,uBAAuB,uBAAuB,IAAI,uBAAuB;AACxF,QAAM,cAAc,kBAAkB;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSControlledToggleName = 'DSFormtoggle';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_SLOTS = {\n CONTAINER_WITH_RADIUS_SHAPE: 'container-with-radius-shape',\n BUTTON_CONTENT_WRAPPER: 'button-content-wrapper',\n CIRCLE: 'circle',\n TEXT_WRAPPER: 'text-wrapper',\n // legacy ones...\n CONTROLLED_CONTAINER: 'controlled-container', // in other components this is the ROOT\n TOGGLE_CHECKBOX: 'toggle-checkbox',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n CONTROLLED_CONTAINER: 'ds-controlled-toggle', // in other components this is the ROOT\n TOGGLE_CHECKBOX: 'ds-controlled-toggle-checkbox',\n};\n\n// Specific of the toggle component\n\nexport const TOGGLE_SIZES = {\n SMALL: 's',\n MEDIUM: 'm',\n LARGE: 'l',\n} as const;\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,yBAAyB;AAG/B,MAAM,0BAA0B;AAAA,EACrC,6BAA6B;AAAA,EAC7B,wBAAwB;AAAA,EACxB,QAAQ;AAAA,EACR,cAAc;AAAA;AAAA,EAEd,sBAAsB;AAAA;AAAA,EACtB,iBAAiB;AACnB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,GAAG,wBAAwB,wBAAwB,uBAAuB;AAAA,EAC1E,sBAAsB;AAAA;AAAA,EACtB,iBAAiB;AACnB;AAIO,MAAM,eAAe;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;",
|
|
6
6
|
"names": []
|
|
@@ -12,14 +12,14 @@ const defaultProps = {
|
|
|
12
12
|
const DSControlledTogglePropTypes = {
|
|
13
13
|
...globalAttributesPropTypes,
|
|
14
14
|
...xstyledPropTypes,
|
|
15
|
-
checked: PropTypes.bool.description("
|
|
15
|
+
checked: PropTypes.bool.description("Whether the toggle is checked or not").defaultValue("false"),
|
|
16
16
|
onChange: PropTypes.func.description("OnClick callback").defaultValue("() => null"),
|
|
17
17
|
size: PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle").defaultValue(TOGGLE_SIZES.MEDIUM),
|
|
18
|
-
disabled: PropTypes.bool.description("
|
|
18
|
+
disabled: PropTypes.bool.description("Whether the toggle is disabled or not").defaultValue("false"),
|
|
19
19
|
applyAriaDisabled: PropTypes.bool.description(
|
|
20
20
|
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
|
21
21
|
).defaultValue("false"),
|
|
22
|
-
readOnly: PropTypes.bool.description("
|
|
22
|
+
readOnly: PropTypes.bool.description("Whether the toggle is readOnly or not").defaultValue("false"),
|
|
23
23
|
containerProps: PropTypes.object.description("Set of properties attached to the main container"),
|
|
24
24
|
id: PropTypes.string.description("Unique id."),
|
|
25
25
|
labelOn: PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TOGGLE_SIZES } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n export interface DefaultProps {\n checked: boolean;\n onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface OptionalProps {\n containerProps?: Record<string, unknown>;\n id?: string;\n }\n\n // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n // this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n export interface PostDeprecationETAPropsFallback {\n /**\n * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOn?: string; // used to be \"labelOn\"\n /**\n * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOff?: string; // used to be \"labelOff\"\n }\n export interface
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;AAqEtB,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,KAAK,YAAY,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TOGGLE_SIZES } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n export interface DefaultProps {\n checked: boolean;\n onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface OptionalProps {\n containerProps?: Record<string, unknown>;\n id?: string;\n }\n\n // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n // this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n export interface PostDeprecationETAPropsFallback {\n /**\n * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOn?: string; // used to be \"labelOn\"\n /**\n * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOff?: string; // used to be \"labelOff\"\n }\n export interface PreDeprecationETAProps {\n /**\n * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n labelOn?: string; // used to be \"labelOn\"\n /**\n * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n labelOff?: string; // used to be \"labelOff\"\n }\n\n export interface ButtonV3InherithedProps extends Omit<DSButtonV3T.Props, 'size' | 'children'> {}\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps,\n PreDeprecationETAProps,\n PostDeprecationETAPropsFallback {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps,\n PreDeprecationETAProps,\n PostDeprecationETAPropsFallback {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n checked: false,\n onChange: () => null,\n size: TOGGLE_SIZES.MEDIUM,\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<\n Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> &\n DSControlledToggleT.PreDeprecationETAProps\n> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.bool.description('Whether the toggle is checked or not').defaultValue('false'),\n onChange: PropTypes.func.description('OnClick callback').defaultValue('() => null'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle').defaultValue(TOGGLE_SIZES.MEDIUM),\n disabled: PropTypes.bool.description('Whether the toggle is disabled or not').defaultValue('false'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue('false'),\n readOnly: PropTypes.bool.description('Whether the toggle is readOnly or not').defaultValue('false'),\n containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n labelOn: PropTypes.string\n .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n .deprecated({ version: '25.3' }),\n labelOff: PropTypes.string\n .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,WAAW,2BAA2B,wBAAwB;AACvE,SAAS,oBAAoB;AAqEtB,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EAChG,UAAU,UAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,YAAY;AAAA,EAClF,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,aAAa,MAAM;AAAA,EACrG,UAAU,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,UAAU,KAAK,YAAY,uCAAuC,EAAE,aAAa,OAAO;AAAA,EAClG,gBAAgB,UAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,IAAI,UAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,SAAS,UAAU,OAChB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,UAAU,UAAU,OACjB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;AAEO,MAAM,oCACX;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { DSControlledToggle, TOGGLE_SIZES } from "../index.js";
|
|
4
|
+
const testRequiredProps = {};
|
|
5
|
+
const testOptionalProps = {
|
|
6
|
+
id: "toggle-id",
|
|
7
|
+
containerProps: {
|
|
8
|
+
"data-testid": "toggle-container",
|
|
9
|
+
"aria-label": "toggle container"
|
|
10
|
+
}
|
|
11
|
+
};
|
|
12
|
+
const testPartialDefaults = {
|
|
13
|
+
checked: true,
|
|
14
|
+
size: TOGGLE_SIZES.MEDIUM
|
|
15
|
+
};
|
|
16
|
+
const testProps = {
|
|
17
|
+
...testRequiredProps,
|
|
18
|
+
...testOptionalProps,
|
|
19
|
+
...testPartialDefaults
|
|
20
|
+
};
|
|
21
|
+
const testPropsAsSyntax = {
|
|
22
|
+
...testRequiredProps,
|
|
23
|
+
...testOptionalProps,
|
|
24
|
+
...testPartialDefaults
|
|
25
|
+
};
|
|
26
|
+
const testCompleteDefaults = {
|
|
27
|
+
checked: false,
|
|
28
|
+
onChange: () => {
|
|
29
|
+
},
|
|
30
|
+
size: TOGGLE_SIZES.MEDIUM,
|
|
31
|
+
readOnly: false,
|
|
32
|
+
disabled: false,
|
|
33
|
+
applyAriaDisabled: false
|
|
34
|
+
};
|
|
35
|
+
const testInternalProps = {
|
|
36
|
+
...testRequiredProps,
|
|
37
|
+
...testOptionalProps,
|
|
38
|
+
...testCompleteDefaults
|
|
39
|
+
};
|
|
40
|
+
const testInternalPropsAsSyntax = {
|
|
41
|
+
...testRequiredProps,
|
|
42
|
+
...testOptionalProps,
|
|
43
|
+
...testCompleteDefaults
|
|
44
|
+
};
|
|
45
|
+
const testExplicitDefinition = {
|
|
46
|
+
id: "toggle-explicit",
|
|
47
|
+
containerProps: {
|
|
48
|
+
"data-testid": "toggle-explicit-container"
|
|
49
|
+
},
|
|
50
|
+
checked: true,
|
|
51
|
+
onChange: () => {
|
|
52
|
+
},
|
|
53
|
+
size: TOGGLE_SIZES.LARGE,
|
|
54
|
+
readOnly: false,
|
|
55
|
+
disabled: false,
|
|
56
|
+
applyAriaDisabled: false,
|
|
57
|
+
labelOn: "Enabled",
|
|
58
|
+
labelOff: "Disabled",
|
|
59
|
+
wcagViolationLabelOn: "Legacy On",
|
|
60
|
+
wcagViolationLabelOff: "Legacy Off"
|
|
61
|
+
};
|
|
62
|
+
const testInferedTypeCompatibility = {
|
|
63
|
+
id: "toggle-inferred",
|
|
64
|
+
checked: false,
|
|
65
|
+
onChange: () => {
|
|
66
|
+
},
|
|
67
|
+
size: TOGGLE_SIZES.SMALL,
|
|
68
|
+
readOnly: false,
|
|
69
|
+
disabled: true,
|
|
70
|
+
applyAriaDisabled: true,
|
|
71
|
+
labelOn: "Enabled",
|
|
72
|
+
labelOff: "Disabled"
|
|
73
|
+
};
|
|
74
|
+
const testDefinitionAsConst = {
|
|
75
|
+
id: "toggle-const",
|
|
76
|
+
checked: true,
|
|
77
|
+
onChange: () => {
|
|
78
|
+
},
|
|
79
|
+
size: TOGGLE_SIZES.MEDIUM,
|
|
80
|
+
readOnly: true,
|
|
81
|
+
disabled: false,
|
|
82
|
+
applyAriaDisabled: false
|
|
83
|
+
};
|
|
84
|
+
const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
85
|
+
/* @__PURE__ */ jsx(DSControlledToggle, { ...testExplicitDefinition }),
|
|
86
|
+
/* @__PURE__ */ jsx(DSControlledToggle, { ...testInferedTypeCompatibility }),
|
|
87
|
+
/* @__PURE__ */ jsx(DSControlledToggle, { ...testDefinitionAsConst }),
|
|
88
|
+
/* @__PURE__ */ jsx(
|
|
89
|
+
DSControlledToggle,
|
|
90
|
+
{
|
|
91
|
+
id: "toggle-inline",
|
|
92
|
+
containerProps: {
|
|
93
|
+
"data-testid": "toggle-inline-container"
|
|
94
|
+
},
|
|
95
|
+
checked: true,
|
|
96
|
+
onChange: () => {
|
|
97
|
+
},
|
|
98
|
+
size: TOGGLE_SIZES.MEDIUM,
|
|
99
|
+
readOnly: false,
|
|
100
|
+
disabled: false,
|
|
101
|
+
applyAriaDisabled: false,
|
|
102
|
+
labelOn: "Enabled",
|
|
103
|
+
labelOff: "Disabled",
|
|
104
|
+
wcagViolationLabelOn: "Legacy On",
|
|
105
|
+
wcagViolationLabelOff: "Legacy Off"
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
] });
|
|
109
|
+
//# sourceMappingURL=form-toggle-typescript-valid.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/form-toggle-typescript-valid.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSControlledToggle, TOGGLE_SIZES, type DSControlledToggleT } from '../index.js';\n\n/**\n * Namespace type aliases exposed by the package public API.\n */\ntype ComponentPropsForApp = DSControlledToggleT.Props;\ntype ComponentPropsInternals = DSControlledToggleT.InternalProps;\ntype ComponentPropsDefaultProps = DSControlledToggleT.DefaultProps;\ntype ComponentPropsOptionalProps = DSControlledToggleT.OptionalProps;\ntype ComponentPropsRequiredProps = DSControlledToggleT.RequiredProps;\n\n/**\n * Required props contract (empty for this component).\n */\nconst testRequiredProps: ComponentPropsRequiredProps = {};\n\n/**\n * Optional props contract.\n */\nconst testOptionalProps: ComponentPropsOptionalProps = {\n id: 'toggle-id',\n containerProps: {\n 'data-testid': 'toggle-container',\n 'aria-label': 'toggle container',\n },\n};\n\n/**\n * Partial defaults are valid for app-facing props.\n */\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n checked: true,\n size: TOGGLE_SIZES.MEDIUM,\n};\n\n/**\n * Public props composition using explicit type annotation.\n */\nconst testProps: ComponentPropsForApp = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n};\n\n/**\n * Public props composition using \"as\" syntax.\n */\nconst testPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testPartialDefaults,\n} as ComponentPropsForApp;\n\n/**\n * Internal props require all default values.\n */\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n checked: false,\n onChange: () => {},\n size: TOGGLE_SIZES.MEDIUM,\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n};\n\n/**\n * Internal props composition using explicit type annotation.\n */\nconst testInternalProps: ComponentPropsInternals = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n};\n\n/**\n * Internal props composition using \"as\" syntax.\n */\nconst testInternalPropsAsSyntax = {\n ...testRequiredProps,\n ...testOptionalProps,\n ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n/**\n * Explicit app-facing definition validates individual keys.\n */\nconst testExplicitDefinition: ComponentPropsForApp = {\n id: 'toggle-explicit',\n containerProps: {\n 'data-testid': 'toggle-explicit-container',\n },\n checked: true,\n onChange: () => {},\n size: TOGGLE_SIZES.LARGE,\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n labelOn: 'Enabled',\n labelOff: 'Disabled',\n wcagViolationLabelOn: 'Legacy On',\n wcagViolationLabelOff: 'Legacy Off',\n};\n\n/**\n * Inferred compatibility validates the complete object against public props.\n */\nconst testInferedTypeCompatibility = {\n id: 'toggle-inferred',\n checked: false,\n onChange: () => {},\n size: TOGGLE_SIZES.SMALL,\n readOnly: false,\n disabled: true,\n applyAriaDisabled: true,\n labelOn: 'Enabled',\n labelOff: 'Disabled',\n} as ComponentPropsForApp;\n\n/**\n * As-const object should remain spread-compatible with component props.\n */\nconst testDefinitionAsConst = {\n id: 'toggle-const',\n checked: true,\n onChange: () => {},\n size: TOGGLE_SIZES.MEDIUM,\n readOnly: true,\n disabled: false,\n applyAriaDisabled: false,\n} as const;\n\n/**\n * TS validation usage component covering spread and inline syntaxes.\n */\nconst ExampleUsageComponent = () => (\n <>\n <DSControlledToggle {...testExplicitDefinition} />\n <DSControlledToggle {...testInferedTypeCompatibility} />\n <DSControlledToggle {...testDefinitionAsConst} />\n <DSControlledToggle\n id=\"toggle-inline\"\n containerProps={{\n 'data-testid': 'toggle-inline-container',\n }}\n checked\n onChange={() => {}}\n size={TOGGLE_SIZES.MEDIUM}\n readOnly={false}\n disabled={false}\n applyAriaDisabled={false}\n labelOn=\"Enabled\"\n labelOff=\"Disabled\"\n wcagViolationLabelOn=\"Legacy On\"\n wcagViolationLabelOff=\"Legacy Off\"\n />\n </>\n);\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACwIrB,mBACE,KADF;AAvIF,SAAS,oBAAoB,oBAA8C;AAc3E,MAAM,oBAAiD,CAAC;AAKxD,MAAM,oBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,IACf,cAAc;AAAA,EAChB;AACF;AAKA,MAAM,sBAA2D;AAAA,EAC/D,SAAS;AAAA,EACT,MAAM,aAAa;AACrB;AAKA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,uBAA6D;AAAA,EACjE,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAKA,MAAM,yBAA+C;AAAA,EACnD,IAAI;AAAA,EACJ,gBAAgB;AAAA,IACd,eAAe;AAAA,EACjB;AAAA,EACA,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,sBAAsB;AAAA,EACtB,uBAAuB;AACzB;AAKA,MAAM,+BAA+B;AAAA,EACnC,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,UAAU;AACZ;AAKA,MAAM,wBAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB,MAAM,aAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAKA,MAAM,wBAAwB,MAC5B,iCACE;AAAA,sBAAC,sBAAoB,GAAG,wBAAwB;AAAA,EAChD,oBAAC,sBAAoB,GAAG,8BAA8B;AAAA,EACtD,oBAAC,sBAAoB,GAAG,uBAAuB;AAAA,EAC/C;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,MACA,SAAO;AAAA,MACP,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB,MAAM,aAAa;AAAA,MACnB,UAAU;AAAA,MACV,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,sBAAqB;AAAA,MACrB,uBAAsB;AAAA;AAAA,EACxB;AAAA,GACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -29,7 +29,7 @@ export declare namespace DSControlledToggleT {
|
|
|
29
29
|
*/
|
|
30
30
|
wcagViolationLabelOff?: string;
|
|
31
31
|
}
|
|
32
|
-
interface
|
|
32
|
+
interface PreDeprecationETAProps {
|
|
33
33
|
/**
|
|
34
34
|
* @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.
|
|
35
35
|
* Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.
|
|
@@ -43,11 +43,11 @@ export declare namespace DSControlledToggleT {
|
|
|
43
43
|
}
|
|
44
44
|
interface ButtonV3InherithedProps extends Omit<DSButtonV3T.Props, 'size' | 'children'> {
|
|
45
45
|
}
|
|
46
|
-
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps,
|
|
46
|
+
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps, PreDeprecationETAProps, PostDeprecationETAPropsFallback {
|
|
47
47
|
}
|
|
48
|
-
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps,
|
|
48
|
+
interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps, RequiredProps, PreDeprecationETAProps, PostDeprecationETAPropsFallback {
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
export declare const defaultProps: DSControlledToggleT.DefaultProps;
|
|
52
|
-
export declare const DSControlledTogglePropTypes: DSPropTypesSchema<Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> & DSControlledToggleT.
|
|
52
|
+
export declare const DSControlledTogglePropTypes: DSPropTypesSchema<Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> & DSControlledToggleT.PreDeprecationETAProps>;
|
|
53
53
|
export declare const DSControlledTogglePropTypesSchema: ValidationMap<DSControlledToggleT.Props>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-toggle",
|
|
3
|
-
"version": "3.60.0-next.
|
|
3
|
+
"version": "3.60.0-next.39",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Toggle",
|
|
6
6
|
"files": [
|
|
@@ -39,15 +39,15 @@
|
|
|
39
39
|
"lodash-es": "^4.17.21",
|
|
40
40
|
"styled-components": "~5.3.9",
|
|
41
41
|
"uid": "^2.0.2",
|
|
42
|
-
"@elliemae/ds-
|
|
43
|
-
"@elliemae/ds-props-helpers": "3.60.0-next.
|
|
44
|
-
"@elliemae/ds-
|
|
42
|
+
"@elliemae/ds-system": "3.60.0-next.39",
|
|
43
|
+
"@elliemae/ds-props-helpers": "3.60.0-next.39",
|
|
44
|
+
"@elliemae/ds-button-v2": "3.60.0-next.39"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@elliemae/pui-theme": "~2.13.0",
|
|
48
48
|
"jest": "^30.0.0",
|
|
49
|
-
"@elliemae/ds-monorepo-devops": "3.60.0-next.
|
|
50
|
-
"@elliemae/ds-test-utils": "3.60.0-next.
|
|
49
|
+
"@elliemae/ds-monorepo-devops": "3.60.0-next.39",
|
|
50
|
+
"@elliemae/ds-test-utils": "3.60.0-next.39"
|
|
51
51
|
},
|
|
52
52
|
"peerDependencies": {
|
|
53
53
|
"@elliemae/pui-theme": "~2.13.0",
|
|
File without changes
|
|
File without changes
|