@elliemae/ds-form-toggle 3.11.0-next.6 → 3.11.0-next.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ControlledToggle.js +10 -6
- package/dist/cjs/ControlledToggle.js.map +2 -2
- package/dist/cjs/utils/addTooltipOnReadOnly.js.map +1 -1
- package/dist/cjs/utils/styleHelpers.js.map +1 -1
- package/dist/esm/ControlledToggle.js +10 -6
- package/dist/esm/ControlledToggle.js.map +2 -2
- package/dist/esm/utils/addTooltipOnReadOnly.js.map +1 -1
- package/dist/esm/utils/styleHelpers.js.map +1 -1
- package/package.json +9 -6
|
@@ -56,12 +56,16 @@ const DSControlledToggle = (props) => {
|
|
|
56
56
|
setWidth(widthTextRef.current.clientWidth);
|
|
57
57
|
}
|
|
58
58
|
}, [widthTextRef]);
|
|
59
|
-
const handleOnChange = (0, import_react.useCallback)(
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
onChange
|
|
64
|
-
|
|
59
|
+
const handleOnChange = (0, import_react.useCallback)(
|
|
60
|
+
(e) => {
|
|
61
|
+
if (disabled || readOnly)
|
|
62
|
+
return;
|
|
63
|
+
if (onChange && e.type === "click") {
|
|
64
|
+
onChange();
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
[disabled, readOnly, onChange]
|
|
68
|
+
);
|
|
65
69
|
const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(rest, { onClick: handleOnChange });
|
|
66
70
|
const xStyledProps = (0, import_ds_utilities.useGetXstyledProps)(rest);
|
|
67
71
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, {
|
|
@@ -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, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\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 instanceUID = useMemo(() => id || uid(5), [id]);\n\n useEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n const handleOnChange = useCallback(() => {\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport type { DSButtonT } from '@elliemae/ds-button';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\ntype DSButtonV2OnClick = DSButtonT.InternalProps['onClick'];\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\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 instanceUID = useMemo(() => id || uid(5), [id]);\n\n useEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n const handleOnChange = useCallback<DSButtonV2OnClick>(\n (e) => {\n if (disabled || readOnly) return;\n // we are explicitly filtering on of those event out to ensure onChange is invoked only once per activation\n if (onChange && e.type === 'click') {\n // browser+button-v2 triggers \"click\" even for key-down space/enter action\n onChange();\n }\n },\n [disabled, readOnly, onChange],\n );\n\n const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n const xStyledProps = useGetXstyledProps(rest);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xStyledProps}\n disabled={disabled}\n >\n {addTooltipOnReadOnly(\n <StyledButton\n role=\"switch\"\n {...globalAttrs}\n value={value}\n type=\"button\"\n buttonType=\"raw\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n >\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent checked={checked} size={size} readOnly={readOnly} active={active} disabled={disabled}>\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n aria-hidden=\"true\"\n ref={labelTextRef}\n isLongerTextRendering={isLongerTextRendering}\n checked={checked}\n size={size}\n disabled={disabled}\n >\n {checked ? labelOn : labelOff}\n </StyledText>\n </StyledVisibleContent>\n </StyledLabel>\n <SetLabelWidth size={size} ref={widthTextRef} aria-hidden=\"true\">\n {longerText}\n </SetLabelWidth>\n </StyledButton>,\n readOnly,\n )}\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2FX;AA3FZ,mBAAyE;AACzE,iBAAoB;AACpB,0BAMO;AAEP,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AAIrC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,wBAAoB,kDAA6B,OAAO,6BAAY;AAC1E,0DAA+B,mBAAmB,0BAAS;AAC3D,QAAM,EAAE,SAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OAAO,KAAK,IACjH;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,kBAAc,sBAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,8BAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,qBAAiB;AAAA,IACrB,CAAC,MAAM;AACL,UAAI,YAAY;AAAU;AAE1B,UAAI,YAAY,EAAE,SAAS,SAAS;AAElC,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAEA,QAAM,kBAAc,4CAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,mBAAe,wCAAmB,IAAI;AAE5C,SACE,4CAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,IAEC;AAAA,MACC,6CAAC;AAAA,QACC,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ;AAAA,QACA,MAAK;AAAA,QACL,YAAW;AAAA,QACX,eAAY;AAAA,QACZ,IAAI;AAAA,QACJ,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,gBAAc;AAAA,QACd,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QAEA;AAAA,sDAAC;AAAA,YAAY;AAAA,YAAkB;AAAA,YAAY;AAAA,YACzC,uDAAC;AAAA,cAAqB;AAAA,cAAkB;AAAA,cAAY;AAAA,cAAoB;AAAA,cAAgB;AAAA,cACtF;AAAA,4DAAC;AAAA,kBAAa;AAAA,kBAAkB;AAAA,kBAAY;AAAA,kBAAoB;AAAA,iBAAoB;AAAA,gBACpF,4CAAC;AAAA,kBACC,eAAY;AAAA,kBACZ,KAAK;AAAA,kBACL;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC,oBAAU,UAAU;AAAA,iBACvB;AAAA;AAAA,aACF;AAAA,WACF;AAAA,UACA,4CAAC;AAAA,YAAc;AAAA,YAAY,KAAK;AAAA,YAAc,eAAY;AAAA,YACvD;AAAA,WACH;AAAA;AAAA,OACF;AAAA,MACA;AAAA,IACF;AAAA,GACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,8BAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/addTooltipOnReadOnly.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const addTooltipOnReadOnly = (Component: JSX.Element, readOnly: boolean): JSX.Element => {\n if (readOnly) return <DSTooltipV3 text=\"Read Only\">{Component}</DSTooltipV3>;\n return Component;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADIA;AAHvB,wBAA4B;AAErB,MAAM,uBAAuB,CAAC,WAAwB,aAAmC;AAC9F,MAAI;AAAU,WAAO,4CAAC;AAAA,MAAY,MAAK;AAAA,MAAa;AAAA,KAAU;AAC9D,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/utils/styleHelpers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../propTypes';\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,MAIoB;AAClB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAS,WAAO;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;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ;AAAA,
|
|
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,MAIoB;AAClB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAS,WAAO;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;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU;AAAA,IAC7B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AACA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,oBAAG,MAAM,YAAY,WAAW,EAAE,KAAK;AAClC,MAAM,wCAAwC,CACnD,UAKG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,oBAAG,MAAM,gBAAgB,WAAW,EAAE,KAAK;AACtC,MAAM,4CAA4C,CACvD,UAKG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,aAA8B;AAC7E,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -40,12 +40,16 @@ const DSControlledToggle = (props) => {
|
|
|
40
40
|
setWidth(widthTextRef.current.clientWidth);
|
|
41
41
|
}
|
|
42
42
|
}, [widthTextRef]);
|
|
43
|
-
const handleOnChange = useCallback(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
onChange
|
|
48
|
-
|
|
43
|
+
const handleOnChange = useCallback(
|
|
44
|
+
(e) => {
|
|
45
|
+
if (disabled || readOnly)
|
|
46
|
+
return;
|
|
47
|
+
if (onChange && e.type === "click") {
|
|
48
|
+
onChange();
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
[disabled, readOnly, onChange]
|
|
52
|
+
);
|
|
49
53
|
const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });
|
|
50
54
|
const xStyledProps = useGetXstyledProps(rest);
|
|
51
55
|
return /* @__PURE__ */ jsx(StyledContainer, {
|
|
@@ -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, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\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 instanceUID = useMemo(() => id || uid(5), [id]);\n\n useEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n const handleOnChange = useCallback(() => {\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react';\nimport { uid } from 'uid';\nimport {\n describe,\n useMemoMergePropsWithDefault,\n useGetGlobalAttributes,\n useValidateTypescriptPropTypes,\n useGetXstyledProps,\n} from '@elliemae/ds-utilities';\nimport type { DSButtonT } from '@elliemae/ds-button';\nimport { propTypes, defaultProps, type DSControlledToggleT } from './propTypes';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles';\nimport { addTooltipOnReadOnly } from './utils/addTooltipOnReadOnly';\n\ntype DSButtonV2OnClick = DSButtonT.InternalProps['onClick'];\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes);\n const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } =\n propsWithDefaults;\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 instanceUID = useMemo(() => id || uid(5), [id]);\n\n useEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n const handleOnChange = useCallback<DSButtonV2OnClick>(\n (e) => {\n if (disabled || readOnly) return;\n // we are explicitly filtering on of those event out to ensure onChange is invoked only once per activation\n if (onChange && e.type === 'click') {\n // browser+button-v2 triggers \"click\" even for key-down space/enter action\n onChange();\n }\n },\n [disabled, readOnly, onChange],\n );\n\n const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });\n const xStyledProps = useGetXstyledProps(rest);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xStyledProps}\n disabled={disabled}\n >\n {addTooltipOnReadOnly(\n <StyledButton\n role=\"switch\"\n {...globalAttrs}\n value={value}\n type=\"button\"\n buttonType=\"raw\"\n data-testid=\"ds-controlled-toggle-checkbox\"\n id={instanceUID}\n aria-readonly={readOnly}\n aria-disabled={disabled}\n aria-checked={checked}\n onClick={handleOnChange}\n readOnly={readOnly}\n disabled={disabled}\n >\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent checked={checked} size={size} readOnly={readOnly} active={active} disabled={disabled}>\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n aria-hidden=\"true\"\n ref={labelTextRef}\n isLongerTextRendering={isLongerTextRendering}\n checked={checked}\n size={size}\n disabled={disabled}\n >\n {checked ? labelOn : labelOff}\n </StyledText>\n </StyledVisibleContent>\n </StyledLabel>\n <SetLabelWidth size={size} ref={widthTextRef} aria-hidden=\"true\">\n {longerText}\n </SetLabelWidth>\n </StyledButton>,\n readOnly,\n )}\n </StyledContainer>\n );\n};\n\nDSControlledToggle.propTypes = propTypes;\nDSControlledToggle.displayName = 'DSControlledToggle';\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/addTooltipOnReadOnly.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nexport const addTooltipOnReadOnly = (Component: JSX.Element, readOnly: boolean): JSX.Element => {\n if (readOnly) return <DSTooltipV3 text=\"Read Only\">{Component}</DSTooltipV3>;\n return Component;\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACIA;AAHvB,SAAS,mBAAmB;AAErB,MAAM,uBAAuB,CAAC,WAAwB,aAAmC;AAC9F,MAAI;AAAU,WAAO,oBAAC;AAAA,MAAY,MAAK;AAAA,MAAa;AAAA,KAAU;AAC9D,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/styleHelpers.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { th, type PropsWithTheme } from '@elliemae/ds-system';\nimport type { DSControlledToggleT } from '../propTypes';\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,MAIoB;AAClB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAS,WAAO;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;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ;AAAA,
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,UAA+B;AAKxC,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,MAIoB;AAClB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,MAAI;AAAS,WAAO;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;AACO,MAAM,iBAAiB,CAC5B,MACA,EAAE,UAAU,MACD;AACX,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,UAAU,UAAU;AAAA,IAC7B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AACA,MAAM,cAAc;AAAA,EAClB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,iCAAiC,CAAC,YAAyB,UAC/D,GAAG,MAAM,YAAY,WAAW,EAAE,KAAK;AAClC,MAAM,wCAAwC,CACnD,UAKG,+BAA+B,cAAc,KAAK,GAAG,KAAK;AAE/D,MAAM,kBAAkB;AAAA,EACtB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AACb;AACA,MAAM,qCAAqC,CAAC,YAAyB,UACnE,GAAG,MAAM,gBAAgB,WAAW,EAAE,KAAK;AACtC,MAAM,4CAA4C,CACvD,UAKG,mCAAmC,cAAc,KAAK,GAAG,KAAK;AAE5D,MAAM,gBAAgB,CAAC,UAAmB,aAA8B;AAC7E,MAAI;AAAU,WAAO;AACrB,MAAI;AAAU,WAAO;AACrB,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-form-toggle",
|
|
3
|
-
"version": "3.11.0-next.
|
|
3
|
+
"version": "3.11.0-next.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Toggle",
|
|
6
6
|
"files": [
|
|
@@ -35,16 +35,16 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.11.0-next.
|
|
39
|
-
"@elliemae/ds-system": "3.11.0-next.
|
|
40
|
-
"@elliemae/ds-tooltip": "3.11.0-next.
|
|
41
|
-
"@elliemae/ds-utilities": "3.11.0-next.
|
|
38
|
+
"@elliemae/ds-button": "3.11.0-next.8",
|
|
39
|
+
"@elliemae/ds-system": "3.11.0-next.8",
|
|
40
|
+
"@elliemae/ds-tooltip": "3.11.0-next.8",
|
|
41
|
+
"@elliemae/ds-utilities": "3.11.0-next.8",
|
|
42
42
|
"styled-components": "~5.3.5",
|
|
43
43
|
"uid": "~2.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@elliemae/pui-theme": "~2.6.0",
|
|
47
|
-
"@testing-library/dom": "~8.
|
|
47
|
+
"@testing-library/dom": "~8.19.0",
|
|
48
48
|
"@testing-library/jest-dom": "~5.16.4",
|
|
49
49
|
"@testing-library/react": "~12.1.3",
|
|
50
50
|
"@testing-library/user-event": "~13.5.0",
|
|
@@ -65,8 +65,11 @@
|
|
|
65
65
|
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
66
66
|
"test": "node ../../scripts/testing/test.mjs",
|
|
67
67
|
"lint": "node ../../scripts/lint.mjs",
|
|
68
|
+
"eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../.eslintrc.js' src/",
|
|
68
69
|
"dts": "node ../../scripts/dts.mjs",
|
|
69
70
|
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
71
|
+
"dev:build": "pnpm --filter {.}... build && pnpm --filter {.}... dts",
|
|
72
|
+
"dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
|
|
70
73
|
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
71
74
|
}
|
|
72
75
|
}
|