@elliemae/ds-form-toggle 3.39.1-rc.0 → 3.40.0-rc.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/ControlledToggle.js +28 -17
- package/dist/cjs/ControlledToggle.js.map +2 -2
- package/dist/cjs/config/useDSControlledToggle.js +3 -3
- package/dist/cjs/config/useDSControlledToggle.js.map +2 -2
- package/dist/cjs/config/useValidateProps.js.map +2 -2
- package/dist/cjs/parts/AddTooltipOnReadOnly.js +2 -5
- package/dist/cjs/parts/AddTooltipOnReadOnly.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +5 -1
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styles.js +5 -5
- package/dist/cjs/styles.js.map +2 -2
- package/dist/cjs/utils/styleHelpers.js +6 -1
- package/dist/cjs/utils/styleHelpers.js.map +2 -2
- package/dist/esm/ControlledToggle.js +28 -17
- package/dist/esm/ControlledToggle.js.map +2 -2
- package/dist/esm/config/useDSControlledToggle.js +3 -3
- package/dist/esm/config/useDSControlledToggle.js.map +2 -2
- package/dist/esm/config/useValidateProps.js.map +2 -2
- package/dist/esm/parts/AddTooltipOnReadOnly.js +3 -6
- package/dist/esm/parts/AddTooltipOnReadOnly.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +5 -1
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styles.js +5 -5
- package/dist/esm/styles.js.map +2 -2
- package/dist/esm/utils/styleHelpers.js +6 -1
- package/dist/esm/utils/styleHelpers.js.map +2 -2
- package/dist/types/config/useValidateProps.d.ts +2 -2
- package/dist/types/parts/AddTooltipOnReadOnly.d.ts +2 -2
- package/dist/types/react-desc-prop-types.d.ts +4 -3
- package/dist/types/styles.d.ts +2 -0
- package/dist/types/tests/DSControlledToggle.a11y.test.d.ts +1 -0
- package/dist/types/utils/styleHelpers.d.ts +3 -1
- package/package.json +6 -6
@@ -43,7 +43,7 @@ var import_useDSControlledToggle = require("./config/useDSControlledToggle.js");
|
|
43
43
|
var import_AddTooltipOnReadOnly = require("./parts/AddTooltipOnReadOnly.js");
|
44
44
|
const DSControlledToggle = (props) => {
|
45
45
|
const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = (0, import_useDSControlledToggle.useDSControlledToggle)(props);
|
46
|
-
const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;
|
46
|
+
const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
|
47
47
|
const [isLongerTextRendering, setIsLongerTextRendering] = (0, import_react.useState)(false);
|
48
48
|
const [width, setWidth] = (0, import_react.useState)(0);
|
49
49
|
const labelTextRef = (0, import_react.useRef)(null);
|
@@ -58,7 +58,7 @@ const DSControlledToggle = (props) => {
|
|
58
58
|
value,
|
59
59
|
id: instanceUid,
|
60
60
|
"aria-readonly": readOnly,
|
61
|
-
"aria-disabled": disabled,
|
61
|
+
"aria-disabled": disabled || applyAriaDisabled,
|
62
62
|
"aria-checked": checked,
|
63
63
|
readOnly,
|
64
64
|
disabled,
|
@@ -67,7 +67,7 @@ const DSControlledToggle = (props) => {
|
|
67
67
|
buttonType: "raw",
|
68
68
|
onClick: handleOnClick
|
69
69
|
}),
|
70
|
-
[checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value]
|
70
|
+
[checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled]
|
71
71
|
);
|
72
72
|
(0, import_react.useLayoutEffect)(() => {
|
73
73
|
if (labelTextRef.current) {
|
@@ -88,20 +88,31 @@ const DSControlledToggle = (props) => {
|
|
88
88
|
...xstyledProps,
|
89
89
|
disabled,
|
90
90
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AddTooltipOnReadOnly.AddTooltipOnReadOnly, { readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledButton, { ...ButtonProps, children: [
|
91
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { checked, size, width, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
disabled,
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
91
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { checked, size, width, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
92
|
+
import_styles.StyledVisibleContent,
|
93
|
+
{
|
94
|
+
checked,
|
95
|
+
size,
|
96
|
+
readOnly,
|
97
|
+
disabled,
|
98
|
+
applyAriaDisabled,
|
99
|
+
children: [
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCircle, { checked, size, readOnly, disabled }),
|
101
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
102
|
+
import_styles.StyledText,
|
103
|
+
{
|
104
|
+
innerRef: labelTextRef,
|
105
|
+
isLongerTextRendering,
|
106
|
+
checked,
|
107
|
+
size,
|
108
|
+
disabled,
|
109
|
+
applyAriaDisabled,
|
110
|
+
children: checked ? labelOn : labelOff
|
111
|
+
}
|
112
|
+
)
|
113
|
+
]
|
114
|
+
}
|
115
|
+
) }),
|
105
116
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.SetLabelWidth, { size, innerRef: widthTextRef, "aria-hidden": "true", children: longerText })
|
106
117
|
] }) })
|
107
118
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../src/ControlledToggle.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);\n const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly }
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
4
|
+
"sourcesContent": ["import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);\n const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } =\n propsWithDefault;\n\n const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n const [width, setWidth] = useState<number>(0);\n const labelTextRef = useRef<HTMLDivElement | null>(null);\n const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n const ButtonProps: DSButtonV2T.Props = useMemo(\n () => ({\n role: 'switch',\n 'data-testid': 'ds-controlled-toggle-checkbox',\n // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...\n // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\n value,\n id: instanceUid,\n 'aria-readonly': readOnly,\n 'aria-disabled': disabled || applyAriaDisabled,\n 'aria-checked': checked,\n readOnly,\n disabled,\n ...(globalProps as unknown as DSButtonV2T.Props),\n type: 'button',\n buttonType: 'raw',\n onClick: handleOnClick,\n }),\n [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled],\n );\n\n useLayoutEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useLayoutEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xstyledProps}\n disabled={disabled}\n >\n <AddTooltipOnReadOnly readOnly={readOnly}>\n <StyledButton {...ButtonProps}>\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n innerRef={labelTextRef}\n isLongerTextRendering={isLongerTextRendering}\n checked={checked}\n size={size}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n {checked ? labelOn : labelOff}\n </StyledText>\n </StyledVisibleContent>\n </StyledLabel>\n <SetLabelWidth size={size} innerRef={widthTextRef} aria-hidden=\"true\">\n {longerText}\n </SetLabelWidth>\n </StyledButton>\n </AddTooltipOnReadOnly>\n </StyledContainer>\n );\n};\n\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyEX;AAzEZ,mBAAkE;AAElE,8BAAyB;AACzB,mCAA4E;AAC5E,oBAQO;AACP,qCAAiC;AACjC,mCAAsC;AACtC,kCAAqC;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,cAAc,QAAI,oDAAsB,KAAK;AAC/G,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,mBAAmB,SAAS,IACrG;AAEF,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,mBAAe,qBAA8B,IAAI;AACvD,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,iBAAa,sBAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,kBAAiC;AAAA,IACrC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe;AAAA;AAAA;AAAA,MAGf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB,YAAY;AAAA,MAC7B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,eAAe,aAAa,UAAU,OAAO,iBAAiB;AAAA,EACjG;AAEA,oCAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,oCAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,sDAAC,oDAAqB,UACpB,uDAAC,8BAAc,GAAG,aAChB;AAAA,oDAAC,6BAAY,SAAkB,MAAY,OACzC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,8BAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,cACpF;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC,oBAAU,UAAU;AAAA;AAAA,cACvB;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,+BAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -40,15 +40,15 @@ var import_useValidateProps = require("./useValidateProps.js");
|
|
40
40
|
const useDSControlledToggle = (propsFromUser) => {
|
41
41
|
const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
|
42
42
|
(0, import_useValidateProps.useValidateProps)(propsWithDefault, import_react_desc_prop_types.DSControlledTogglePropTypes);
|
43
|
-
const { disabled, readOnly, onChange } = propsWithDefault;
|
43
|
+
const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;
|
44
44
|
const handleOnClick = (0, import_react.useCallback)(
|
45
45
|
(e) => {
|
46
|
-
if (disabled || readOnly) return;
|
46
|
+
if (disabled || applyAriaDisabled || readOnly) return;
|
47
47
|
if (onChange) {
|
48
48
|
onChange(e);
|
49
49
|
}
|
50
50
|
},
|
51
|
-
[disabled, readOnly, onChange]
|
51
|
+
[disabled, applyAriaDisabled, readOnly, onChange]
|
52
52
|
);
|
53
53
|
const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault, {
|
54
54
|
onClick: 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 React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n propsWithDefault: DSControlledToggleT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\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, readOnly, onChange } = propsWithDefault;\n const handleOnClick = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, 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), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n }),\n [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,8BAAyF;AACzF,iBAAoB;AACpB,mCAAoF;AACpF,8BAAiC;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,uBAAmB,sDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;
|
4
|
+
"sourcesContent": ["import React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n propsWithDefault: DSControlledToggleT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\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), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n }),\n [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,8BAAyF;AACzF,iBAAoB;AACpB,mCAAoF;AACpF,8BAAiC;AAS1B,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,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,aAAa;AAAA,EAC1E;AACF;",
|
6
6
|
"names": ["React"]
|
7
7
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../src/config/useValidateProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
4
|
+
"sourcesContent": ["import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { DSControlledToggleName } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSControlledToggleT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSControlledToggleName);\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAmE;AAEnE,uBAAuC;AAEhC,MAAM,mBAAmB,CAAC,OAA0C,cAA4C;AAErH,8DAA+B,OAAO,WAAW,uCAAsB;AACzE;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -34,11 +34,8 @@ module.exports = __toCommonJS(AddTooltipOnReadOnly_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
36
36
|
var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
37
|
-
const AddTooltipOnReadOnly = ({
|
38
|
-
readOnly,
|
39
|
-
children
|
40
|
-
}) => {
|
37
|
+
const AddTooltipOnReadOnly = ({ readOnly, children }) => {
|
41
38
|
if (readOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, { text: "Read Only", children });
|
42
|
-
return
|
39
|
+
return children;
|
43
40
|
};
|
44
41
|
//# sourceMappingURL=AddTooltipOnReadOnly.js.map
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../src/parts/AddTooltipOnReadOnly.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({ readOnly, children }: { readOnly: boolean; children: React.ReactNode }) => {\n if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n return children;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIA;AAHvB,wBAA4B;AAErB,MAAM,uBAAuB,CAAC,EAAE,UAAU,SAAS,MAAwD;AAChH,MAAI,SAAU,QAAO,4CAAC,iCAAY,MAAK,aAAa,UAAS;AAC7D,SAAO;AACT;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -44,7 +44,8 @@ const defaultProps = {
|
|
44
44
|
onChange: () => null,
|
45
45
|
size: "m",
|
46
46
|
readOnly: false,
|
47
|
-
disabled: false
|
47
|
+
disabled: false,
|
48
|
+
applyAriaDisabled: false
|
48
49
|
};
|
49
50
|
const DSControlledTogglePropTypes = {
|
50
51
|
...import_ds_props_helpers.globalAttributesPropTypes,
|
@@ -58,6 +59,9 @@ const DSControlledTogglePropTypes = {
|
|
58
59
|
size: import_ds_props_helpers.PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle"),
|
59
60
|
readOnly: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is readOnly or not"),
|
60
61
|
disabled: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is disabled or not"),
|
62
|
+
applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
|
63
|
+
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
64
|
+
).defaultValue(false),
|
61
65
|
containerProps: import_ds_props_helpers.PropTypes.shape({}).description("Set of properties attached to the main container"),
|
62
66
|
id: import_ds_props_helpers.PropTypes.string.description("Unique id.")
|
63
67
|
};
|
@@ -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 {
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
4
|
+
"sourcesContent": ["import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n\n export interface OptionalProps {\n containerProps: Record<string, unknown>;\n id: string;\n }\n\n export interface DefaultProps {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\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 Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onChange: () => null,\n size: 'm',\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n labelOn: PropTypes.string.description('Label when toggle is checked'),\n labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n value: PropTypes.string.description('Value attribute for toggle'),\n name: PropTypes.string.description('Name attribute for toggle'),\n checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n onChange: PropTypes.func.description('OnClick callback'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\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 containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\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;ADCvB,8BAAuE;AAoChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,kCAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,kCAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,kCAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,kCAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,kCAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,kCAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
|
6
6
|
"names": []
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
@@ -58,12 +58,12 @@ const focusBorders = import_ds_system.css`
|
|
58
58
|
const hoverStyled = import_ds_system.css`
|
59
59
|
background-color: ${({ checked, theme }) => {
|
60
60
|
if (checked) return theme.colors.brand["800"];
|
61
|
-
|
61
|
+
return theme.colors.neutral["600"];
|
62
62
|
}};
|
63
63
|
|
64
64
|
border-color: ${({ checked, theme }) => {
|
65
65
|
if (checked) return theme.colors.brand["800"];
|
66
|
-
|
66
|
+
return theme.colors.neutral["700"];
|
67
67
|
}};
|
68
68
|
`;
|
69
69
|
const StyledContainer = (0, import_ds_system.styled)("div")`
|
@@ -101,8 +101,8 @@ const StyledVisibleContent = (0, import_ds_system.styled)("div")`
|
|
101
101
|
transition: background-color 0.2s;
|
102
102
|
background-color: ${import_styleHelpers.getInterpolatedBgDsToggleColorByProps};
|
103
103
|
&:hover {
|
104
|
-
cursor: ${({ disabled, readOnly }) => (0, import_styleHelpers.handleCursors)(disabled, readOnly)};
|
105
|
-
${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}
|
104
|
+
cursor: ${({ disabled, applyAriaDisabled, readOnly }) => (0, import_styleHelpers.handleCursors)(disabled, applyAriaDisabled, readOnly)};
|
105
|
+
${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}
|
106
106
|
}
|
107
107
|
`;
|
108
108
|
const StyledCircle = import_ds_system.styled.div`
|
@@ -119,7 +119,7 @@ const StyledText = import_ds_system.styled.div`
|
|
119
119
|
justify-content: ${({ isLongerTextRendering }) => isLongerTextRendering ? "flex-start" : "center"};
|
120
120
|
font-size: ${({ theme, size }) => (0, import_styleHelpers.handleFontSize)(size, theme)};
|
121
121
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
122
|
-
color: ${({ theme, disabled }) => disabled ? "#5c6574" : theme.colors.neutral["000"]};
|
122
|
+
color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#5c6574" : theme.colors.neutral["000"]};
|
123
123
|
${({ isLongerTextRendering, checked }) => isLongerTextRendering && checked ? `margin-left: 6px;` : void 0}
|
124
124
|
${({ isLongerTextRendering, checked }) => isLongerTextRendering && !checked ? `margin-left: 4px;` : void 0}
|
125
125
|
`;
|
package/dist/cjs/styles.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n &:after {\n content: '';\n top: -3px;\n right: -3px;\n bottom: -3px;\n left: -3px;\n border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nconst hoverStyled = css<{ checked: boolean }>`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAChD,0BAA2B;AAE3B,0BAUO;
|
4
|
+
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n &:after {\n content: '';\n top: -3px;\n right: -3px;\n bottom: -3px;\n left: -3px;\n border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nconst hoverStyled = css<{ checked: boolean }>`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n return theme.colors.neutral['600'];\n }};\n\n border-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n return theme.colors.neutral['700'];\n }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n display: inline-flex;\n width: fit-content;\n justify-content: center;\n align-items: center;\n height: ${({ size }) => containerHeight[size]};\n border-radius: ${({ size }) => borderRadius[size]};\n outline: none;\n position: relative;\n z-index: 0;\n border: 2px solid transparent;\n ${({ disabled }) => !disabled && focusBorders};\n ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled('div')<StyledLabelT>`\n width: ${({ width, size }) => (width ? `calc(${width}px + ${margin[size]})` : 'auto')};\n height: ${({ size }) => labelHeight[size]};\n z-index: 2;\n outline: none;\n border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled('div')<StyledVisibleContentT>`\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n height: 100%;\n flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n border: ${(props) =>\n props.size === 's'\n ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n : `\n 2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n `};\n transition: background-color 0.2s;\n background-color: ${getInterpolatedBgDsToggleColorByProps};\n &:hover {\n cursor: ${({ disabled, applyAriaDisabled, readOnly }) => handleCursors(disabled, applyAriaDisabled, readOnly)};\n ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}\n }\n` as unknown as React.ComponentType<React.ComponentProps<'div'> & Partial<StyledVisibleContentT>>;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n height: ${({ size }) => circleValues[size]};\n width: ${({ size }) => circleValues[size]};\n border-radius: 50%;\n background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n display: flex;\n flex-grow: 1;\n line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n align-items: center;\n justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme, disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled ? '#5c6574' : theme.colors.neutral['000']};\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n margin: 0;\n padding: 0;\n z-index: 20;\n border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n width: auto;\n position: absolute;\n white-space: nowrap;\n visibility: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": "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",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -44,9 +44,11 @@ var import_ds_system = require("@elliemae/ds-system");
|
|
44
44
|
const getStyleState = ({
|
45
45
|
checked,
|
46
46
|
disabled,
|
47
|
+
applyAriaDisabled,
|
47
48
|
readOnly
|
48
49
|
}) => {
|
49
50
|
if (disabled) return "disabled";
|
51
|
+
if (applyAriaDisabled) return "applyAriaDisabled";
|
50
52
|
if (readOnly) return "readOnly";
|
51
53
|
if (checked) return "checked";
|
52
54
|
return "unchecked";
|
@@ -90,6 +92,7 @@ const handleFontSize = (size, { fontSizes }) => {
|
|
90
92
|
};
|
91
93
|
const bgColorsMap = {
|
92
94
|
disabled: "neutral-100",
|
95
|
+
applyAriaDisabled: "neutral-100",
|
93
96
|
readOnly: "neutral-500",
|
94
97
|
checked: "brand-600",
|
95
98
|
unchecked: "neutral-500"
|
@@ -98,14 +101,16 @@ const getInterpolatedBgDSToggleColor = (styleState, props) => import_ds_system.t
|
|
98
101
|
const getInterpolatedBgDsToggleColorByProps = (props) => getInterpolatedBgDSToggleColor(getStyleState(props), props);
|
99
102
|
const borderColorsMap = {
|
100
103
|
disabled: "neutral-300",
|
104
|
+
applyAriaDisabled: "neutral-300",
|
101
105
|
readOnly: "neutral-500",
|
102
106
|
checked: "brand-700",
|
103
107
|
unchecked: "neutral-600"
|
104
108
|
};
|
105
109
|
const getInterpolatedBorderDSToggleColor = (styleState, props) => import_ds_system.th.color(borderColorsMap[styleState])(props);
|
106
110
|
const getInterpolatedBorderDsToggleColorByProps = (props) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);
|
107
|
-
const handleCursors = (disabled, readOnly) => {
|
111
|
+
const handleCursors = (disabled, applyAriaDisabled, readOnly) => {
|
108
112
|
if (disabled) return "not-allowed";
|
113
|
+
if (applyAriaDisabled) return "not-allowed";
|
109
114
|
if (readOnly) return "default";
|
110
115
|
return "pointer";
|
111
116
|
};
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
4
|
-
"sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n checked,\n disabled,\n readOnly,\n}: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n}>): StyleStateT => {\n if (disabled) return 'disabled';\n if (readOnly) return 'readOnly';\n if (checked) return 'checked';\n return 'unchecked';\n};\n\nexport const circleValues = {\n s: '14px',\n m: '20px',\n l: '28px',\n};\n\nexport const margin = {\n s: '26px',\n m: '34px',\n l: '42px',\n};\n\nexport const containerHeight = {\n s: '20px',\n m: '28px',\n l: '36px',\n};\n\nexport const labelHeight = {\n s: '16px',\n m: '24px',\n l: '32px',\n};\n\nexport const borderRadius = {\n s: '16px',\n m: '20px',\n l: '22px',\n};\nexport const handleFontSize = (\n size: DSControlledToggleT.ToggleSize,\n { fontSizes }: PropsWithTheme['theme'],\n): string => {\n switch (size) {\n case 's':\n return fontSizes.microText[200];\n case 'm':\n return '15px';\n case 'l':\n return '20px';\n default:\n return '15px';\n }\n};\nconst bgColorsMap = {\n disabled: 'neutral-100',\n readOnly: 'neutral-500',\n checked: 'brand-600',\n unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n disabled: 'neutral-300',\n readOnly: 'neutral-500',\n checked: 'brand-700',\n unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n if (disabled) return 'not-allowed';\n if (readOnly) return 'default';\n return 'pointer';\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,
|
4
|
+
"sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'applyAriaDisabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n checked,\n disabled,\n applyAriaDisabled,\n readOnly,\n}: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n}>): StyleStateT => {\n if (disabled) return 'disabled';\n if (applyAriaDisabled) return 'applyAriaDisabled';\n if (readOnly) return 'readOnly';\n if (checked) return 'checked';\n return 'unchecked';\n};\n\nexport const circleValues = {\n s: '14px',\n m: '20px',\n l: '28px',\n};\n\nexport const margin = {\n s: '26px',\n m: '34px',\n l: '42px',\n};\n\nexport const containerHeight = {\n s: '20px',\n m: '28px',\n l: '36px',\n};\n\nexport const labelHeight = {\n s: '16px',\n m: '24px',\n l: '32px',\n};\n\nexport const borderRadius = {\n s: '16px',\n m: '20px',\n l: '22px',\n};\n\nexport const handleFontSize = (\n size: DSControlledToggleT.ToggleSize,\n { fontSizes }: PropsWithTheme['theme'],\n): string => {\n switch (size) {\n case 's':\n return fontSizes.microText[200];\n case 'm':\n return '15px';\n case 'l':\n return '20px';\n default:\n return '15px';\n }\n};\n\nconst bgColorsMap = {\n disabled: 'neutral-100',\n applyAriaDisabled: 'neutral-100',\n readOnly: 'neutral-500',\n checked: 'brand-600',\n unchecked: 'neutral-500',\n} as const;\n\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(bgColorsMap[styleState])(props);\n\nexport const getInterpolatedBgDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n disabled: 'neutral-300',\n applyAriaDisabled: 'neutral-300',\n readOnly: 'neutral-500',\n checked: 'brand-700',\n unchecked: 'neutral-600',\n} as const;\n\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(borderColorsMap[styleState])(props);\n\nexport const getInterpolatedBorderDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean): string => {\n if (disabled) return 'not-allowed';\n if (applyAriaDisabled) return 'not-allowed';\n if (readOnly) return 'default';\n return 'pointer';\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKoB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,MAAI,QAAS,QAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,oBAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAElC,MAAM,wCAAwC,CACnD,UAMG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,oBAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AAEtC,MAAM,4CAA4C,CACvD,UAMG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,mBAA4B,aAA8B;AACzG,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,SAAO;AACT;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -17,7 +17,7 @@ import { useDSControlledToggle } from "./config/useDSControlledToggle.js";
|
|
17
17
|
import { AddTooltipOnReadOnly } from "./parts/AddTooltipOnReadOnly.js";
|
18
18
|
const DSControlledToggle = (props) => {
|
19
19
|
const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);
|
20
|
-
const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly } = propsWithDefault;
|
20
|
+
const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
|
21
21
|
const [isLongerTextRendering, setIsLongerTextRendering] = useState(false);
|
22
22
|
const [width, setWidth] = useState(0);
|
23
23
|
const labelTextRef = useRef(null);
|
@@ -32,7 +32,7 @@ const DSControlledToggle = (props) => {
|
|
32
32
|
value,
|
33
33
|
id: instanceUid,
|
34
34
|
"aria-readonly": readOnly,
|
35
|
-
"aria-disabled": disabled,
|
35
|
+
"aria-disabled": disabled || applyAriaDisabled,
|
36
36
|
"aria-checked": checked,
|
37
37
|
readOnly,
|
38
38
|
disabled,
|
@@ -41,7 +41,7 @@ const DSControlledToggle = (props) => {
|
|
41
41
|
buttonType: "raw",
|
42
42
|
onClick: handleOnClick
|
43
43
|
}),
|
44
|
-
[checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value]
|
44
|
+
[checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled]
|
45
45
|
);
|
46
46
|
useLayoutEffect(() => {
|
47
47
|
if (labelTextRef.current) {
|
@@ -62,20 +62,31 @@ const DSControlledToggle = (props) => {
|
|
62
62
|
...xstyledProps,
|
63
63
|
disabled,
|
64
64
|
children: /* @__PURE__ */ jsx(AddTooltipOnReadOnly, { readOnly, children: /* @__PURE__ */ jsxs(StyledButton, { ...ButtonProps, children: [
|
65
|
-
/* @__PURE__ */ jsx(StyledLabel, { checked, size, width, children: /* @__PURE__ */ jsxs(
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
disabled,
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
65
|
+
/* @__PURE__ */ jsx(StyledLabel, { checked, size, width, children: /* @__PURE__ */ jsxs(
|
66
|
+
StyledVisibleContent,
|
67
|
+
{
|
68
|
+
checked,
|
69
|
+
size,
|
70
|
+
readOnly,
|
71
|
+
disabled,
|
72
|
+
applyAriaDisabled,
|
73
|
+
children: [
|
74
|
+
/* @__PURE__ */ jsx(StyledCircle, { checked, size, readOnly, disabled }),
|
75
|
+
/* @__PURE__ */ jsx(
|
76
|
+
StyledText,
|
77
|
+
{
|
78
|
+
innerRef: labelTextRef,
|
79
|
+
isLongerTextRendering,
|
80
|
+
checked,
|
81
|
+
size,
|
82
|
+
disabled,
|
83
|
+
applyAriaDisabled,
|
84
|
+
children: checked ? labelOn : labelOff
|
85
|
+
}
|
86
|
+
)
|
87
|
+
]
|
88
|
+
}
|
89
|
+
) }),
|
79
90
|
/* @__PURE__ */ jsx(SetLabelWidth, { size, innerRef: widthTextRef, "aria-hidden": "true", children: longerText })
|
80
91
|
] }) })
|
81
92
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledToggle.tsx"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);\n const { labelOn, labelOff, checked, size, value, containerProps, disabled, readOnly }
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);\n const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } =\n propsWithDefault;\n\n const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n const [width, setWidth] = useState<number>(0);\n const labelTextRef = useRef<HTMLDivElement | null>(null);\n const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n const ButtonProps: DSButtonV2T.Props = useMemo(\n () => ({\n role: 'switch',\n 'data-testid': 'ds-controlled-toggle-checkbox',\n // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...\n // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\n value,\n id: instanceUid,\n 'aria-readonly': readOnly,\n 'aria-disabled': disabled || applyAriaDisabled,\n 'aria-checked': checked,\n readOnly,\n disabled,\n ...(globalProps as unknown as DSButtonV2T.Props),\n type: 'button',\n buttonType: 'raw',\n onClick: handleOnClick,\n }),\n [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled],\n );\n\n useLayoutEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useLayoutEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xstyledProps}\n disabled={disabled}\n >\n <AddTooltipOnReadOnly readOnly={readOnly}>\n <StyledButton {...ButtonProps}>\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n innerRef={labelTextRef}\n isLongerTextRendering={isLongerTextRendering}\n checked={checked}\n size={size}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n {checked ? labelOn : labelOff}\n </StyledText>\n </StyledVisibleContent>\n </StyledLabel>\n <SetLabelWidth size={size} innerRef={widthTextRef} aria-hidden=\"true\">\n {longerText}\n </SetLabelWidth>\n </StyledButton>\n </AddTooltipOnReadOnly>\n </StyledContainer>\n );\n};\n\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACyEX,SAOE,KAPF;AAzEZ,SAAgB,UAAU,SAAS,QAAQ,uBAAuB;AAElE,SAAS,gBAAgB;AACzB,SAAS,yCAAmE;AAC5E;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,cAAc,IAAI,sBAAsB,KAAK;AAC/G,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,mBAAmB,SAAS,IACrG;AAEF,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAiB,CAAC;AAC5C,QAAM,eAAe,OAA8B,IAAI;AACvD,QAAM,eAAe,OAA8B,IAAI;AAEvD,QAAM,aAAa,QAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,cAAiC;AAAA,IACrC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe;AAAA;AAAA;AAAA,MAGf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB,YAAY;AAAA,MAC7B,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,eAAe,aAAa,UAAU,OAAO,iBAAiB;AAAA,EACjG;AAEA,kBAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,kBAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,8BAAC,wBAAqB,UACpB,+BAAC,gBAAc,GAAG,aAChB;AAAA,4BAAC,eAAY,SAAkB,MAAY,OACzC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,gBAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,cACpF;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC,oBAAU,UAAU;AAAA;AAAA,cACvB;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QACA,oBAAC,iBAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -7,15 +7,15 @@ import { useValidateProps } from "./useValidateProps.js";
|
|
7
7
|
const useDSControlledToggle = (propsFromUser) => {
|
8
8
|
const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
|
9
9
|
useValidateProps(propsWithDefault, DSControlledTogglePropTypes);
|
10
|
-
const { disabled, readOnly, onChange } = propsWithDefault;
|
10
|
+
const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;
|
11
11
|
const handleOnClick = useCallback(
|
12
12
|
(e) => {
|
13
|
-
if (disabled || readOnly) return;
|
13
|
+
if (disabled || applyAriaDisabled || readOnly) return;
|
14
14
|
if (onChange) {
|
15
15
|
onChange(e);
|
16
16
|
}
|
17
17
|
},
|
18
|
-
[disabled, readOnly, onChange]
|
18
|
+
[disabled, applyAriaDisabled, readOnly, onChange]
|
19
19
|
);
|
20
20
|
const globalProps = useGetGlobalAttributes(propsWithDefault, {
|
21
21
|
onClick: 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 React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n propsWithDefault: DSControlledToggleT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\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, readOnly, onChange } = propsWithDefault;\n const handleOnClick = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, 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), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n }),\n [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n );\n};\n"],
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,mBAAmB;AACnC,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,wBAAwB;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,mBAAmB,6BAAgE,eAAe,YAAY;AACpH,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,EAAE,UAAU,UAAU,SAAS,IAAI;
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n propsWithDefault: DSControlledToggleT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\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), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n }),\n [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n );\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,mBAAmB;AACnC,SAAS,wBAAwB,oBAAoB,oCAAoC;AACzF,SAAS,WAAW;AACpB,SAAmC,6BAA6B,oBAAoB;AACpF,SAAS,wBAAwB;AAS1B,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,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,aAAa;AAAA,EAC1E;AACF;",
|
6
6
|
"names": ["React"]
|
7
7
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\nimport { DSControlledToggleName } from '../constants/index.js';\n\nexport const useValidateProps = (props: DSControlledToggleT.InternalProps, propTypes: ValidationMap<unknown>): void => {\n // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n useValidateTypescriptPropTypes(props, propTypes, DSControlledToggleName);\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAA0D;AAEnE,SAAS,8BAA8B;AAEhC,MAAM,mBAAmB,CAAC,OAA0C,cAA4C;AAErH,iCAA+B,OAAO,WAAW,sBAAsB;AACzE;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -1,12 +1,9 @@
|
|
1
1
|
import * as React from "react";
|
2
|
-
import {
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
3
3
|
import { DSTooltipV3 } from "@elliemae/ds-tooltip";
|
4
|
-
const AddTooltipOnReadOnly = ({
|
5
|
-
readOnly,
|
6
|
-
children
|
7
|
-
}) => {
|
4
|
+
const AddTooltipOnReadOnly = ({ readOnly, children }) => {
|
8
5
|
if (readOnly) return /* @__PURE__ */ jsx(DSTooltipV3, { text: "Read Only", children });
|
9
|
-
return
|
6
|
+
return children;
|
10
7
|
};
|
11
8
|
export {
|
12
9
|
AddTooltipOnReadOnly
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/AddTooltipOnReadOnly.tsx"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const AddTooltipOnReadOnly = ({ readOnly, children }: { readOnly: boolean; children: React.ReactNode }) => {\n if (readOnly) return <DSTooltipV3 text=\"Read Only\">{children}</DSTooltipV3>;\n return children;\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIA;AAHvB,SAAS,mBAAmB;AAErB,MAAM,uBAAuB,CAAC,EAAE,UAAU,SAAS,MAAwD;AAChH,MAAI,SAAU,QAAO,oBAAC,eAAY,MAAK,aAAa,UAAS;AAC7D,SAAO;AACT;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -9,7 +9,8 @@ const defaultProps = {
|
|
9
9
|
onChange: () => null,
|
10
10
|
size: "m",
|
11
11
|
readOnly: false,
|
12
|
-
disabled: false
|
12
|
+
disabled: false,
|
13
|
+
applyAriaDisabled: false
|
13
14
|
};
|
14
15
|
const DSControlledTogglePropTypes = {
|
15
16
|
...globalAttributesPropTypes,
|
@@ -23,6 +24,9 @@ const DSControlledTogglePropTypes = {
|
|
23
24
|
size: PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle"),
|
24
25
|
readOnly: PropTypes.bool.description("Wether the toggle is readOnly or not"),
|
25
26
|
disabled: PropTypes.bool.description("Wether the toggle is disabled or not"),
|
27
|
+
applyAriaDisabled: PropTypes.bool.description(
|
28
|
+
"Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
|
29
|
+
).defaultValue(false),
|
26
30
|
containerProps: PropTypes.shape({}).description("Set of properties attached to the main container"),
|
27
31
|
id: PropTypes.string.description("Unique id.")
|
28
32
|
};
|
@@ -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 {
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n\n export interface OptionalProps {\n containerProps: Record<string, unknown>;\n id: string;\n }\n\n export interface DefaultProps {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\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 Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onChange: () => null,\n size: 'm',\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n labelOn: PropTypes.string.description('Label when toggle is checked'),\n labelOff: PropTypes.string.description('Label when toggle is unchecked'),\n value: PropTypes.string.description('Value attribute for toggle'),\n name: PropTypes.string.description('Name attribute for toggle'),\n checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n onChange: PropTypes.func.description('OnClick callback'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\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 containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,2BAA2B,wBAAwB;AAoChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,UAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,UAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,UAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,UAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,UAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,UAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,mBAAmB,UAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,UAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
|
6
6
|
"names": []
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
@@ -29,12 +29,12 @@ const focusBorders = css`
|
|
29
29
|
const hoverStyled = css`
|
30
30
|
background-color: ${({ checked, theme }) => {
|
31
31
|
if (checked) return theme.colors.brand["800"];
|
32
|
-
|
32
|
+
return theme.colors.neutral["600"];
|
33
33
|
}};
|
34
34
|
|
35
35
|
border-color: ${({ checked, theme }) => {
|
36
36
|
if (checked) return theme.colors.brand["800"];
|
37
|
-
|
37
|
+
return theme.colors.neutral["700"];
|
38
38
|
}};
|
39
39
|
`;
|
40
40
|
const StyledContainer = styled("div")`
|
@@ -72,8 +72,8 @@ const StyledVisibleContent = styled("div")`
|
|
72
72
|
transition: background-color 0.2s;
|
73
73
|
background-color: ${getInterpolatedBgDsToggleColorByProps};
|
74
74
|
&:hover {
|
75
|
-
cursor: ${({ disabled, readOnly }) => handleCursors(disabled, readOnly)};
|
76
|
-
${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}
|
75
|
+
cursor: ${({ disabled, applyAriaDisabled, readOnly }) => handleCursors(disabled, applyAriaDisabled, readOnly)};
|
76
|
+
${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}
|
77
77
|
}
|
78
78
|
`;
|
79
79
|
const StyledCircle = styled.div`
|
@@ -90,7 +90,7 @@ const StyledText = styled.div`
|
|
90
90
|
justify-content: ${({ isLongerTextRendering }) => isLongerTextRendering ? "flex-start" : "center"};
|
91
91
|
font-size: ${({ theme, size }) => handleFontSize(size, theme)};
|
92
92
|
font-weight: ${({ theme }) => theme.fontWeights.semibold};
|
93
|
-
color: ${({ theme, disabled }) => disabled ? "#5c6574" : theme.colors.neutral["000"]};
|
93
|
+
color: ${({ theme, disabled, applyAriaDisabled }) => disabled || applyAriaDisabled ? "#5c6574" : theme.colors.neutral["000"]};
|
94
94
|
${({ isLongerTextRendering, checked }) => isLongerTextRendering && checked ? `margin-left: 6px;` : void 0}
|
95
95
|
${({ isLongerTextRendering, checked }) => isLongerTextRendering && !checked ? `margin-left: 4px;` : void 0}
|
96
96
|
`;
|
package/dist/esm/styles.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n &:after {\n content: '';\n top: -3px;\n right: -3px;\n bottom: -3px;\n left: -3px;\n border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nconst hoverStyled = css<{ checked: boolean }>`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,kBAAkB;AAE3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers.js';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n}\ninterface StyledLabelT {\n width: number;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n}\ninterface StyledVisibleContentT {\n checked: boolean;\n size: DSControlledToggleT.ToggleSize;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n as: 'p' | 'label';\n htmlFor: string;\n}\ninterface StyledCircleT {\n size: DSControlledToggleT.ToggleSize;\n readOnly: boolean;\n checked: boolean;\n disabled: boolean;\n}\ninterface StyledTextT {\n isLongerTextRendering: boolean;\n size: DSControlledToggleT.ToggleSize;\n checked: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n}\ninterface SetLabelWidthT {\n size: DSControlledToggleT.ToggleSize;\n}\n\nconst focusBorders = css`\n &:focus-within {\n &:after {\n content: '';\n top: -3px;\n right: -3px;\n bottom: -3px;\n left: -3px;\n border: 2px solid ${({ theme }) => theme.colors.brand['700']};\n border-radius: 20px;\n position: absolute;\n }\n }\n`;\n\nconst hoverStyled = css<{ checked: boolean }>`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n return theme.colors.neutral['600'];\n }};\n\n border-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n return theme.colors.neutral['700'];\n }};\n`;\n\nexport const StyledContainer = styled('div')<StyledContainerT>`\n display: inline-flex;\n width: fit-content;\n justify-content: center;\n align-items: center;\n height: ${({ size }) => containerHeight[size]};\n border-radius: ${({ size }) => borderRadius[size]};\n outline: none;\n position: relative;\n z-index: 0;\n border: 2px solid transparent;\n ${({ disabled }) => !disabled && focusBorders};\n ${xStyledCommonProps}\n`;\n\nexport const StyledLabel = styled('div')<StyledLabelT>`\n width: ${({ width, size }) => (width ? `calc(${width}px + ${margin[size]})` : 'auto')};\n height: ${({ size }) => labelHeight[size]};\n z-index: 2;\n outline: none;\n border-radius: ${({ size }) => labelHeight[size]};\n`;\n\nexport const StyledVisibleContent = styled('div')<StyledVisibleContentT>`\n display: flex;\n margin: 0;\n padding: 0;\n align-items: center;\n height: 100%;\n flex-direction: ${({ checked }) => (checked ? 'row-reverse' : 'row')};\n border-radius: ${({ size }) => `calc(${labelHeight[size]} - 4px)`};\n border: ${(props) =>\n props.size === 's'\n ? `1px solid ${getInterpolatedBorderDsToggleColorByProps(props)}`\n : `\n 2px solid ${getInterpolatedBorderDsToggleColorByProps(props)}\n `};\n transition: background-color 0.2s;\n background-color: ${getInterpolatedBgDsToggleColorByProps};\n &:hover {\n cursor: ${({ disabled, applyAriaDisabled, readOnly }) => handleCursors(disabled, applyAriaDisabled, readOnly)};\n ${({ disabled, applyAriaDisabled, readOnly }) => !disabled && !applyAriaDisabled && !readOnly && hoverStyled}\n }\n` as unknown as React.ComponentType<React.ComponentProps<'div'> & Partial<StyledVisibleContentT>>;\n\nexport const StyledCircle = styled.div<StyledCircleT>`\n height: ${({ size }) => circleValues[size]};\n width: ${({ size }) => circleValues[size]};\n border-radius: 50%;\n background-color: ${({ theme, readOnly }) => (readOnly ? theme.colors.neutral[100] : theme.colors.neutral['000'])};\n`;\n\nexport const StyledText = styled.div<StyledTextT>`\n display: flex;\n flex-grow: 1;\n line-height: ${({ theme, size }) => handleFontSize(size, theme)};\n align-items: center;\n justify-content: ${({ isLongerTextRendering }) => (isLongerTextRendering ? 'flex-start' : 'center')};\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n color: ${({ theme, disabled, applyAriaDisabled }) =>\n disabled || applyAriaDisabled ? '#5c6574' : theme.colors.neutral['000']};\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && checked ? `margin-left: 6px;` : undefined)}\n ${({ isLongerTextRendering, checked }) => (isLongerTextRendering && !checked ? `margin-left: 4px;` : undefined)}\n`;\n\nexport const StyledButton = styled(DSButtonV2)`\n margin: 0;\n padding: 0;\n z-index: 20;\n border-radius: 20px;\n`;\n\nexport const SetLabelWidth = styled.div<SetLabelWidthT>`\n font-size: ${({ theme, size }) => handleFontSize(size, theme)};\n font-weight: ${({ theme }) => theme.fontWeights.semibold};\n width: auto;\n position: absolute;\n white-space: nowrap;\n visibility: hidden;\n`;\n"],
|
5
|
+
"mappings": "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",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -3,9 +3,11 @@ import { th } from "@elliemae/ds-system";
|
|
3
3
|
const getStyleState = ({
|
4
4
|
checked,
|
5
5
|
disabled,
|
6
|
+
applyAriaDisabled,
|
6
7
|
readOnly
|
7
8
|
}) => {
|
8
9
|
if (disabled) return "disabled";
|
10
|
+
if (applyAriaDisabled) return "applyAriaDisabled";
|
9
11
|
if (readOnly) return "readOnly";
|
10
12
|
if (checked) return "checked";
|
11
13
|
return "unchecked";
|
@@ -49,6 +51,7 @@ const handleFontSize = (size, { fontSizes }) => {
|
|
49
51
|
};
|
50
52
|
const bgColorsMap = {
|
51
53
|
disabled: "neutral-100",
|
54
|
+
applyAriaDisabled: "neutral-100",
|
52
55
|
readOnly: "neutral-500",
|
53
56
|
checked: "brand-600",
|
54
57
|
unchecked: "neutral-500"
|
@@ -57,14 +60,16 @@ const getInterpolatedBgDSToggleColor = (styleState, props) => th.color(bgColorsM
|
|
57
60
|
const getInterpolatedBgDsToggleColorByProps = (props) => getInterpolatedBgDSToggleColor(getStyleState(props), props);
|
58
61
|
const borderColorsMap = {
|
59
62
|
disabled: "neutral-300",
|
63
|
+
applyAriaDisabled: "neutral-300",
|
60
64
|
readOnly: "neutral-500",
|
61
65
|
checked: "brand-700",
|
62
66
|
unchecked: "neutral-600"
|
63
67
|
};
|
64
68
|
const getInterpolatedBorderDSToggleColor = (styleState, props) => th.color(borderColorsMap[styleState])(props);
|
65
69
|
const getInterpolatedBorderDsToggleColorByProps = (props) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);
|
66
|
-
const handleCursors = (disabled, readOnly) => {
|
70
|
+
const handleCursors = (disabled, applyAriaDisabled, readOnly) => {
|
67
71
|
if (disabled) return "not-allowed";
|
72
|
+
if (applyAriaDisabled) return "not-allowed";
|
68
73
|
if (readOnly) return "default";
|
69
74
|
return "pointer";
|
70
75
|
};
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n checked,\n disabled,\n readOnly,\n}: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n}>): StyleStateT => {\n if (disabled) return 'disabled';\n if (readOnly) return 'readOnly';\n if (checked) return 'checked';\n return 'unchecked';\n};\n\nexport const circleValues = {\n s: '14px',\n m: '20px',\n l: '28px',\n};\n\nexport const margin = {\n s: '26px',\n m: '34px',\n l: '42px',\n};\n\nexport const containerHeight = {\n s: '20px',\n m: '28px',\n l: '36px',\n};\n\nexport const labelHeight = {\n s: '16px',\n m: '24px',\n l: '32px',\n};\n\nexport const borderRadius = {\n s: '16px',\n m: '20px',\n l: '22px',\n};\nexport const handleFontSize = (\n size: DSControlledToggleT.ToggleSize,\n { fontSizes }: PropsWithTheme['theme'],\n): string => {\n switch (size) {\n case 's':\n return fontSizes.microText[200];\n case 'm':\n return '15px';\n case 'l':\n return '20px';\n default:\n return '15px';\n }\n};\nconst bgColorsMap = {\n disabled: 'neutral-100',\n readOnly: 'neutral-500',\n checked: 'brand-600',\n unchecked: 'neutral-500',\n} as const;\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(bgColorsMap[styleState])(props);\nexport const getInterpolatedBgDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n disabled: 'neutral-300',\n readOnly: 'neutral-500',\n checked: 'brand-700',\n unchecked: 'neutral-600',\n} as const;\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(borderColorsMap[styleState])(props);\nexport const getInterpolatedBorderDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, readOnly: boolean): string => {\n if (disabled) return 'not-allowed';\n if (readOnly) return 'default';\n return 'pointer';\n};\n"],
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAA+B;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../react-desc-prop-types.js';\n\ntype StyleStateT = 'disabled' | 'applyAriaDisabled' | 'readOnly' | 'checked' | 'unchecked';\n\nconst getStyleState = ({\n checked,\n disabled,\n applyAriaDisabled,\n readOnly,\n}: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n}>): StyleStateT => {\n if (disabled) return 'disabled';\n if (applyAriaDisabled) return 'applyAriaDisabled';\n if (readOnly) return 'readOnly';\n if (checked) return 'checked';\n return 'unchecked';\n};\n\nexport const circleValues = {\n s: '14px',\n m: '20px',\n l: '28px',\n};\n\nexport const margin = {\n s: '26px',\n m: '34px',\n l: '42px',\n};\n\nexport const containerHeight = {\n s: '20px',\n m: '28px',\n l: '36px',\n};\n\nexport const labelHeight = {\n s: '16px',\n m: '24px',\n l: '32px',\n};\n\nexport const borderRadius = {\n s: '16px',\n m: '20px',\n l: '22px',\n};\n\nexport const handleFontSize = (\n size: DSControlledToggleT.ToggleSize,\n { fontSizes }: PropsWithTheme['theme'],\n): string => {\n switch (size) {\n case 's':\n return fontSizes.microText[200];\n case 'm':\n return '15px';\n case 'l':\n return '20px';\n default:\n return '15px';\n }\n};\n\nconst bgColorsMap = {\n disabled: 'neutral-100',\n applyAriaDisabled: 'neutral-100',\n readOnly: 'neutral-500',\n checked: 'brand-600',\n unchecked: 'neutral-500',\n} as const;\n\nconst getInterpolatedBgDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(bgColorsMap[styleState])(props);\n\nexport const getInterpolatedBgDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBgDSToggleColor(getStyleState(props), props);\n\nconst borderColorsMap = {\n disabled: 'neutral-300',\n applyAriaDisabled: 'neutral-300',\n readOnly: 'neutral-500',\n checked: 'brand-700',\n unchecked: 'neutral-600',\n} as const;\n\nconst getInterpolatedBorderDSToggleColor = (styleState: StyleStateT, props: PropsWithTheme) =>\n th.color(borderColorsMap[styleState])(props);\n\nexport const getInterpolatedBorderDsToggleColorByProps = (\n props: PropsWithTheme<{\n checked: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n readOnly: boolean;\n }>,\n) => getInterpolatedBorderDSToggleColor(getStyleState(props), props);\n\nexport const handleCursors = (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean): string => {\n if (disabled) return 'not-allowed';\n if (applyAriaDisabled) return 'not-allowed';\n if (readOnly) return 'default';\n return 'pointer';\n};\n"],
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAA+B;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKoB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,MAAI,QAAS,QAAO;AACpB,SAAO;AACT;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,SAAS;AAAA,EACpB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,kBAAkB;AAAA,EAC7B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,cAAc;AAAA,EACzB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,eAAe;AAAA,EAC1B,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU,GAAG;AAAA,IAChC,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,GAAG,MAAM,YAAY,UAAU,CAAC,EAAE,KAAK;AAElC,MAAM,wCAAwC,CACnD,UAMG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AAEA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,GAAG,MAAM,gBAAgB,UAAU,CAAC,EAAE,KAAK;AAEtC,MAAM,4CAA4C,CACvD,UAMG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,mBAA4B,aAA8B;AACzG,MAAI,SAAU,QAAO;AACrB,MAAI,kBAAmB,QAAO;AAC9B,MAAI,SAAU,QAAO;AACrB,SAAO;AACT;",
|
6
6
|
"names": []
|
7
7
|
}
|
@@ -1,3 +1,3 @@
|
|
1
|
-
import type
|
1
|
+
import { type ValidationMap } from '@elliemae/ds-props-helpers';
|
2
2
|
import { type DSControlledToggleT } from '../react-desc-prop-types.js';
|
3
|
-
export declare const useValidateProps: (props: DSControlledToggleT.InternalProps, propTypes:
|
3
|
+
export declare const useValidateProps: (props: DSControlledToggleT.InternalProps, propTypes: ValidationMap<unknown>) => void;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
export declare const AddTooltipOnReadOnly: ({ readOnly, children
|
2
|
+
export declare const AddTooltipOnReadOnly: ({ readOnly, children }: {
|
3
3
|
readOnly: boolean;
|
4
4
|
children: React.ReactNode;
|
5
|
-
}) => JSX.Element;
|
5
|
+
}) => string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
@@ -1,5 +1,5 @@
|
|
1
|
-
|
2
|
-
import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';
|
1
|
+
/// <reference types="react" />
|
2
|
+
import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';
|
3
3
|
export declare namespace DSControlledToggleT {
|
4
4
|
type ToggleSize = 's' | 'm' | 'l';
|
5
5
|
interface OptionalProps {
|
@@ -16,6 +16,7 @@ export declare namespace DSControlledToggleT {
|
|
16
16
|
size: ToggleSize;
|
17
17
|
readOnly: boolean;
|
18
18
|
disabled: boolean;
|
19
|
+
applyAriaDisabled: boolean;
|
19
20
|
}
|
20
21
|
interface Props extends Partial<DefaultProps>, OptionalProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>, XstyledProps {
|
21
22
|
}
|
@@ -24,4 +25,4 @@ export declare namespace DSControlledToggleT {
|
|
24
25
|
}
|
25
26
|
export declare const defaultProps: DSControlledToggleT.DefaultProps;
|
26
27
|
export declare const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props>;
|
27
|
-
export declare const DSControlledTogglePropTypesSchema:
|
28
|
+
export declare const DSControlledTogglePropTypesSchema: ValidationMap<DSControlledToggleT.Props>;
|
package/dist/types/styles.d.ts
CHANGED
@@ -13,6 +13,7 @@ interface StyledVisibleContentT {
|
|
13
13
|
checked: boolean;
|
14
14
|
size: DSControlledToggleT.ToggleSize;
|
15
15
|
disabled: boolean;
|
16
|
+
applyAriaDisabled: boolean;
|
16
17
|
readOnly: boolean;
|
17
18
|
as: 'p' | 'label';
|
18
19
|
htmlFor: string;
|
@@ -28,6 +29,7 @@ interface StyledTextT {
|
|
28
29
|
size: DSControlledToggleT.ToggleSize;
|
29
30
|
checked: boolean;
|
30
31
|
disabled: boolean;
|
32
|
+
applyAriaDisabled: boolean;
|
31
33
|
}
|
32
34
|
interface SetLabelWidthT {
|
33
35
|
size: DSControlledToggleT.ToggleSize;
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|
@@ -29,11 +29,13 @@ export declare const handleFontSize: (size: DSControlledToggleT.ToggleSize, { fo
|
|
29
29
|
export declare const getInterpolatedBgDsToggleColorByProps: (props: PropsWithTheme<{
|
30
30
|
checked: boolean;
|
31
31
|
disabled: boolean;
|
32
|
+
applyAriaDisabled: boolean;
|
32
33
|
readOnly: boolean;
|
33
34
|
}>) => string;
|
34
35
|
export declare const getInterpolatedBorderDsToggleColorByProps: (props: PropsWithTheme<{
|
35
36
|
checked: boolean;
|
36
37
|
disabled: boolean;
|
38
|
+
applyAriaDisabled: boolean;
|
37
39
|
readOnly: boolean;
|
38
40
|
}>) => string;
|
39
|
-
export declare const handleCursors: (disabled: boolean, readOnly: boolean) => string;
|
41
|
+
export declare const handleCursors: (disabled: boolean, applyAriaDisabled: boolean, readOnly: boolean) => string;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@elliemae/ds-form-toggle",
|
3
|
-
"version": "3.
|
3
|
+
"version": "3.40.0-rc.0",
|
4
4
|
"license": "MIT",
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Toggle",
|
6
6
|
"files": [
|
@@ -39,16 +39,16 @@
|
|
39
39
|
"lodash": "~4.17.21",
|
40
40
|
"styled-components": "~5.3.9",
|
41
41
|
"uid": "~2.0.1",
|
42
|
-
"@elliemae/ds-
|
43
|
-
"@elliemae/ds-props-helpers": "3.
|
44
|
-
"@elliemae/ds-
|
45
|
-
"@elliemae/ds-
|
42
|
+
"@elliemae/ds-system": "3.40.0-rc.0",
|
43
|
+
"@elliemae/ds-props-helpers": "3.40.0-rc.0",
|
44
|
+
"@elliemae/ds-tooltip": "3.40.0-rc.0",
|
45
|
+
"@elliemae/ds-button-v2": "3.40.0-rc.0"
|
46
46
|
},
|
47
47
|
"devDependencies": {
|
48
48
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
49
49
|
"@elliemae/pui-theme": "~2.9.3",
|
50
50
|
"styled-components": "~5.3.9",
|
51
|
-
"@elliemae/ds-monorepo-devops": "3.
|
51
|
+
"@elliemae/ds-monorepo-devops": "3.40.0-rc.0"
|
52
52
|
},
|
53
53
|
"peerDependencies": {
|
54
54
|
"@elliemae/pui-theme": "~2.9.3",
|