@elliemae/ds-form-toggle 3.5.0-rc.1 → 3.5.0-rc.10
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 +64 -45
- package/dist/cjs/ControlledToggle.js.map +1 -1
- package/dist/cjs/index.js +4 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/propTypes.js +4 -1
- package/dist/cjs/propTypes.js.map +1 -1
- package/dist/cjs/styles.js +4 -1
- package/dist/cjs/styles.js.map +1 -1
- package/dist/cjs/utils/addTooltipOnReadOnly.js +9 -5
- package/dist/cjs/utils/addTooltipOnReadOnly.js.map +1 -1
- package/dist/cjs/utils/styleHelpers.js +4 -1
- package/dist/cjs/utils/styleHelpers.js.map +1 -1
- package/dist/esm/ControlledToggle.js +60 -44
- package/dist/esm/ControlledToggle.js.map +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/propTypes.js.map +1 -1
- package/dist/esm/styles.js.map +1 -1
- package/dist/esm/utils/addTooltipOnReadOnly.js +5 -4
- package/dist/esm/utils/addTooltipOnReadOnly.js.map +1 -1
- package/dist/esm/utils/styleHelpers.js.map +1 -1
- package/package.json +5 -5
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var ControlledToggle_exports = {};
|
|
23
26
|
__export(ControlledToggle_exports, {
|
|
@@ -26,7 +29,8 @@ __export(ControlledToggle_exports, {
|
|
|
26
29
|
});
|
|
27
30
|
module.exports = __toCommonJS(ControlledToggle_exports);
|
|
28
31
|
var React = __toESM(require("react"));
|
|
29
|
-
var
|
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
+
var import_react = require("react");
|
|
30
34
|
var import_uid = require("uid");
|
|
31
35
|
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
32
36
|
var import_propTypes = require("./propTypes");
|
|
@@ -60,53 +64,68 @@ const DSControlledToggle = (props) => {
|
|
|
60
64
|
}, [disabled, readOnly, onChange]);
|
|
61
65
|
const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(rest, { onClick: handleOnChange });
|
|
62
66
|
const xStyledProps = (0, import_ds_utilities.useGetXstyledProps)(rest);
|
|
63
|
-
return /* @__PURE__ */
|
|
67
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, {
|
|
64
68
|
size,
|
|
65
69
|
"data-testid": "ds-controlled-toggle",
|
|
66
70
|
...containerProps,
|
|
67
71
|
...xStyledProps,
|
|
68
|
-
disabled
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
72
|
+
disabled,
|
|
73
|
+
children: (0, import_addTooltipOnReadOnly.addTooltipOnReadOnly)(
|
|
74
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledButton, {
|
|
75
|
+
role: "switch",
|
|
76
|
+
...globalAttrs,
|
|
77
|
+
value,
|
|
78
|
+
type: "button",
|
|
79
|
+
buttonType: "raw",
|
|
80
|
+
"data-testid": "ds-controlled-toggle-checkbox",
|
|
81
|
+
id: instanceUID,
|
|
82
|
+
"aria-readonly": readOnly,
|
|
83
|
+
"aria-disabled": disabled,
|
|
84
|
+
"aria-checked": checked,
|
|
85
|
+
onClick: handleOnChange,
|
|
86
|
+
readOnly,
|
|
87
|
+
disabled,
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, {
|
|
90
|
+
checked,
|
|
91
|
+
size,
|
|
92
|
+
width,
|
|
93
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledVisibleContent, {
|
|
94
|
+
checked,
|
|
95
|
+
size,
|
|
96
|
+
readOnly,
|
|
97
|
+
active,
|
|
98
|
+
disabled,
|
|
99
|
+
children: [
|
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCircle, {
|
|
101
|
+
checked,
|
|
102
|
+
size,
|
|
103
|
+
readOnly,
|
|
104
|
+
disabled
|
|
105
|
+
}),
|
|
106
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledText, {
|
|
107
|
+
"aria-hidden": "true",
|
|
108
|
+
ref: labelTextRef,
|
|
109
|
+
isLongerTextRendering,
|
|
110
|
+
checked,
|
|
111
|
+
size,
|
|
112
|
+
disabled,
|
|
113
|
+
children: checked ? labelOn : labelOff
|
|
114
|
+
})
|
|
115
|
+
]
|
|
116
|
+
})
|
|
117
|
+
}),
|
|
118
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.SetLabelWidth, {
|
|
119
|
+
size,
|
|
120
|
+
ref: widthTextRef,
|
|
121
|
+
"aria-hidden": "true",
|
|
122
|
+
children: longerText
|
|
123
|
+
})
|
|
124
|
+
]
|
|
125
|
+
}),
|
|
126
|
+
readOnly
|
|
127
|
+
)
|
|
128
|
+
});
|
|
110
129
|
};
|
|
111
130
|
DSControlledToggle.propTypes = import_propTypes.propTypes;
|
|
112
131
|
DSControlledToggle.displayName = "DSControlledToggle";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/ControlledToggle.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
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 if (disabled || readOnly) return;\n if (onChange) onChange();\n }, [disabled, readOnly, onChange]);\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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAAyE;AACzE,iBAAoB;AACpB,0BAMO;AACP,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AAErC,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,0BAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,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
|
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -14,7 +14,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
14
14
|
return to;
|
|
15
15
|
};
|
|
16
16
|
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
17
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
17
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
18
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
19
|
+
mod
|
|
20
|
+
));
|
|
18
21
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
22
|
var src_exports = {};
|
|
20
23
|
module.exports = __toCommonJS(src_exports);
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["export * from './ControlledToggle';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,+BAAd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/propTypes.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var propTypes_exports = {};
|
|
23
26
|
__export(propTypes_exports, {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n export interface Props {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: () => void | null;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n containerProps: Record<string, unknown>;\n id: string;\n }\n}\nexport const defaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onClick: () => null,\n size: 'm',\n readonly: false,\n disabled: false,\n};\n\nexport const propTypes = {\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 active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAuE;AAkBhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,8BAAU,OAAO,YAAY,8BAA8B;AAAA,EACpE,UAAU,8BAAU,OAAO,YAAY,gCAAgC;AAAA,EACvE,OAAO,8BAAU,OAAO,YAAY,4BAA4B;AAAA,EAChE,MAAM,8BAAU,OAAO,YAAY,2BAA2B;AAAA,EAC9D,SAAS,8BAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,8BAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,8BAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,QAAQ,8BAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,8BAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,8BAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,8BAAU,OAAO,YAAY,YAAY;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var styles_exports = {};
|
|
23
26
|
__export(styles_exports, {
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\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 &:hover,\n &:focus-within {\n border: 2px solid ${({ theme }) => theme.colors.brand[300]};\n &:after {\n content: '';\n height: calc(100% + 4px);\n width: calc(100% + 4px);\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n border-radius: 20px;\n position: absolute;\n }\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 border: 2px solid transparent;\n ${({ disabled }) => !disabled && focusBorders};\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\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, readOnly }) => handleCursors(disabled, readOnly)};\n }\n`;\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: 1;\n margin-bottom: -0.12rem;\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 }) => (disabled ? '#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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA4B;AAC5B,uBAA2B;AAG3B,0BAUO;AAkCP,MAAM,eAAe;AAAA;AAAA;AAAA,wBAGG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKhC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,kBAAkB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,KAAK,MAAM,oCAAgB;AAAA,mBACvB,CAAC,EAAE,KAAK,MAAM,iCAAa;AAAA;AAAA;AAAA;AAAA,IAI1C,CAAC,EAAE,SAAS,MAAM,CAAC,YAAY;AAAA;AAG5B,MAAM,cAAc,wBAAO;AAAA,WACvB,CAAC,EAAE,OAAO,KAAK,MAAM,QAAQ,aAAa,2BAAO;AAAA,YAChD,CAAC,EAAE,KAAK,MAAM,gCAAY;AAAA;AAAA;AAAA,mBAGnB,CAAC,EAAE,KAAK,MAAM,gCAAY;AAAA;AAGtC,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMvB,CAAC,EAAE,QAAQ,MAAO,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,KAAK,MAAM,QAAQ,gCAAY;AAAA,YACzC,CAAC,UACT,MAAM,SAAS,MACX,iBAAa,+DAA0C,KAAK,MAC5D;AAAA,oBACQ,+DAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAAA,cAER,CAAC,EAAE,UAAU,SAAS,UAAM,mCAAc,UAAU,QAAQ;AAAA;AAAA;AAInE,MAAM,eAAe,wBAAO;AAAA,YACvB,CAAC,EAAE,KAAK,MAAM,iCAAa;AAAA,WAC5B,CAAC,EAAE,KAAK,MAAM,iCAAa;AAAA;AAAA,sBAEhB,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAGrG,MAAM,aAAa,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZ,CAAC,EAAE,sBAAsB,MAAO,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC7E,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,mBAAe,yBAAO,2BAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,gBAAgB,wBAAO;AAAA,eACrB,CAAC,EAAE,OAAO,KAAK,UAAM,oCAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var addTooltipOnReadOnly_exports = {};
|
|
23
26
|
__export(addTooltipOnReadOnly_exports, {
|
|
@@ -25,13 +28,14 @@ __export(addTooltipOnReadOnly_exports, {
|
|
|
25
28
|
});
|
|
26
29
|
module.exports = __toCommonJS(addTooltipOnReadOnly_exports);
|
|
27
30
|
var React = __toESM(require("react"));
|
|
28
|
-
var
|
|
31
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
29
32
|
var import_ds_tooltip = require("@elliemae/ds-tooltip");
|
|
30
33
|
const addTooltipOnReadOnly = (Component, readOnly) => {
|
|
31
34
|
if (readOnly)
|
|
32
|
-
return /* @__PURE__ */
|
|
33
|
-
text: "Read Only"
|
|
34
|
-
|
|
35
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, {
|
|
36
|
+
text: "Read Only",
|
|
37
|
+
children: Component
|
|
38
|
+
});
|
|
35
39
|
return Component;
|
|
36
40
|
};
|
|
37
41
|
//# sourceMappingURL=addTooltipOnReadOnly.js.map
|
|
@@ -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": "
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,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
|
}
|
|
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
22
25
|
var styleHelpers_exports = {};
|
|
23
26
|
__export(styleHelpers_exports, {
|
|
@@ -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": "
|
|
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,SACD;AACH,aAAO,UAAU,UAAU;AAAA,SACxB;AACH,aAAO;AAAA,SACJ;AACH,aAAO;AAAA;AAEP,aAAO;AAAA;AAEb;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
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useState, useMemo, useRef, useEffect, useCallback } from "react";
|
|
3
4
|
import { uid } from "uid";
|
|
4
5
|
import {
|
|
5
6
|
describe,
|
|
@@ -47,53 +48,68 @@ const DSControlledToggle = (props) => {
|
|
|
47
48
|
}, [disabled, readOnly, onChange]);
|
|
48
49
|
const globalAttrs = useGetGlobalAttributes(rest, { onClick: handleOnChange });
|
|
49
50
|
const xStyledProps = useGetXstyledProps(rest);
|
|
50
|
-
return /* @__PURE__ */
|
|
51
|
+
return /* @__PURE__ */ jsx(StyledContainer, {
|
|
51
52
|
size,
|
|
52
53
|
"data-testid": "ds-controlled-toggle",
|
|
53
54
|
...containerProps,
|
|
54
55
|
...xStyledProps,
|
|
55
|
-
disabled
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
56
|
+
disabled,
|
|
57
|
+
children: addTooltipOnReadOnly(
|
|
58
|
+
/* @__PURE__ */ jsxs(StyledButton, {
|
|
59
|
+
role: "switch",
|
|
60
|
+
...globalAttrs,
|
|
61
|
+
value,
|
|
62
|
+
type: "button",
|
|
63
|
+
buttonType: "raw",
|
|
64
|
+
"data-testid": "ds-controlled-toggle-checkbox",
|
|
65
|
+
id: instanceUID,
|
|
66
|
+
"aria-readonly": readOnly,
|
|
67
|
+
"aria-disabled": disabled,
|
|
68
|
+
"aria-checked": checked,
|
|
69
|
+
onClick: handleOnChange,
|
|
70
|
+
readOnly,
|
|
71
|
+
disabled,
|
|
72
|
+
children: [
|
|
73
|
+
/* @__PURE__ */ jsx(StyledLabel, {
|
|
74
|
+
checked,
|
|
75
|
+
size,
|
|
76
|
+
width,
|
|
77
|
+
children: /* @__PURE__ */ jsxs(StyledVisibleContent, {
|
|
78
|
+
checked,
|
|
79
|
+
size,
|
|
80
|
+
readOnly,
|
|
81
|
+
active,
|
|
82
|
+
disabled,
|
|
83
|
+
children: [
|
|
84
|
+
/* @__PURE__ */ jsx(StyledCircle, {
|
|
85
|
+
checked,
|
|
86
|
+
size,
|
|
87
|
+
readOnly,
|
|
88
|
+
disabled
|
|
89
|
+
}),
|
|
90
|
+
/* @__PURE__ */ jsx(StyledText, {
|
|
91
|
+
"aria-hidden": "true",
|
|
92
|
+
ref: labelTextRef,
|
|
93
|
+
isLongerTextRendering,
|
|
94
|
+
checked,
|
|
95
|
+
size,
|
|
96
|
+
disabled,
|
|
97
|
+
children: checked ? labelOn : labelOff
|
|
98
|
+
})
|
|
99
|
+
]
|
|
100
|
+
})
|
|
101
|
+
}),
|
|
102
|
+
/* @__PURE__ */ jsx(SetLabelWidth, {
|
|
103
|
+
size,
|
|
104
|
+
ref: widthTextRef,
|
|
105
|
+
"aria-hidden": "true",
|
|
106
|
+
children: longerText
|
|
107
|
+
})
|
|
108
|
+
]
|
|
109
|
+
}),
|
|
110
|
+
readOnly
|
|
111
|
+
)
|
|
112
|
+
});
|
|
97
113
|
};
|
|
98
114
|
DSControlledToggle.propTypes = propTypes;
|
|
99
115
|
DSControlledToggle.displayName = "DSControlledToggle";
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/ControlledToggle.tsx"],
|
|
4
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 if (disabled || readOnly) return;\n if (onChange) onChange();\n }, [disabled, readOnly, onChange]);\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": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,UAAU,SAAS,QAAQ,WAAW,mBAAmB;AACzE,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,oBAA8C;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAErC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,SAAS;AAC3D,QAAM,EAAE,SAAS,UAAU,OAAO,SAAS,UAAU,MAAM,UAAU,QAAQ,UAAU,gBAAgB,OAAO,KAAK,IACjH;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,cAAc,QAAQ,MAAM,MAAM,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAEpD,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,YAAU,MAAM;AACd,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,QAAM,iBAAiB,YAAY,MAAM;AACvC,QAAI,YAAY;AAAU;AAC1B,QAAI;AAAU,eAAS;AAAA,EACzB,GAAG,CAAC,UAAU,UAAU,QAAQ,CAAC;AAEjC,QAAM,cAAc,uBAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,mBAAmB,IAAI;AAE5C,SACE,oBAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,IAEC;AAAA,MACC,qBAAC;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,8BAAC;AAAA,YAAY;AAAA,YAAkB;AAAA,YAAY;AAAA,YACzC,+BAAC;AAAA,cAAqB;AAAA,cAAkB;AAAA,cAAY;AAAA,cAAoB;AAAA,cAAgB;AAAA,cACtF;AAAA,oCAAC;AAAA,kBAAa;AAAA,kBAAkB;AAAA,kBAAY;AAAA,kBAAoB;AAAA,iBAAoB;AAAA,gBACpF,oBAAC;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,oBAAC;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,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/index.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './ControlledToggle';\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-utilities';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n export interface Props {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: () => void | null;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n containerProps: Record<string, unknown>;\n id: string;\n }\n}\nexport const defaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onClick: () => null,\n size: 'm',\n readonly: false,\n disabled: false,\n};\n\nexport const propTypes = {\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 active: PropTypes.bool.description('Wether the toggle has active styles or not').deprecated({ version: '3.x' }),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n};\n"],
|
|
5
|
-
"mappings": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,2BAA2B,kBAAkB,iBAAiB;AAkBhE,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS,MAAM;AAAA,EACf,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AACZ;AAEO,MAAM,YAAY;AAAA,EACvB,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,QAAQ,UAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,UAAU,OAAO,YAAY,YAAY;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes';\n\nimport {\n containerHeight,\n borderRadius,\n labelHeight,\n getInterpolatedBorderDsToggleColorByProps,\n getInterpolatedBgDsToggleColorByProps,\n circleValues,\n handleFontSize,\n margin,\n handleCursors,\n} from './utils/styleHelpers';\n\ninterface StyledContainerT {\n size: DSControlledToggleT.ToggleSize;\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 &:hover,\n &:focus-within {\n border: 2px solid ${({ theme }) => theme.colors.brand[300]};\n &:after {\n content: '';\n height: calc(100% + 4px);\n width: calc(100% + 4px);\n border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n border-radius: 20px;\n position: absolute;\n }\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 border: 2px solid transparent;\n ${({ disabled }) => !disabled && focusBorders};\n`;\n\nexport const StyledLabel = styled.div<StyledLabelT>`\n width: ${({ width, size }) => `calc(${width}px + ${margin[size]})`};\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, readOnly }) => handleCursors(disabled, readOnly)};\n }\n`;\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: 1;\n margin-bottom: -0.12rem;\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 }) => (disabled ? '#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": "AAAA;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,kBAAkB;AAG3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAkCP,MAAM,eAAe;AAAA;AAAA;AAAA,wBAGG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKhC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrD,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1B,CAAC,EAAE,KAAK,MAAM,gBAAgB;AAAA,mBACvB,CAAC,EAAE,KAAK,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA,IAI1C,CAAC,EAAE,SAAS,MAAM,CAAC,YAAY;AAAA;AAG5B,MAAM,cAAc,OAAO;AAAA,WACvB,CAAC,EAAE,OAAO,KAAK,MAAM,QAAQ,aAAa,OAAO;AAAA,YAChD,CAAC,EAAE,KAAK,MAAM,YAAY;AAAA;AAAA;AAAA,mBAGnB,CAAC,EAAE,KAAK,MAAM,YAAY;AAAA;AAGtC,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMvB,CAAC,EAAE,QAAQ,MAAO,UAAU,gBAAgB;AAAA,mBAC7C,CAAC,EAAE,KAAK,MAAM,QAAQ,YAAY;AAAA,YACzC,CAAC,UACT,MAAM,SAAS,MACX,aAAa,0CAA0C,KAAK,MAC5D;AAAA,gBACQ,0CAA0C,KAAK;AAAA;AAAA;AAAA,sBAGzC;AAAA;AAAA,cAER,CAAC,EAAE,UAAU,SAAS,MAAM,cAAc,UAAU,QAAQ;AAAA;AAAA;AAInE,MAAM,eAAe,OAAO;AAAA,YACvB,CAAC,EAAE,KAAK,MAAM,aAAa;AAAA,WAC5B,CAAC,EAAE,KAAK,MAAM,aAAa;AAAA;AAAA,sBAEhB,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,QAAQ;AAAA;AAGrG,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMZ,CAAC,EAAE,sBAAsB,MAAO,wBAAwB,eAAe;AAAA,eAC7E,CAAC,EAAE,OAAO,KAAK,MAAM,eAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA,WACvC,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,YAAY,MAAM,OAAO,QAAQ;AAAA,IAC7E,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,UAAU,sBAAsB;AAAA,IAClG,CAAC,EAAE,uBAAuB,QAAQ,MAAO,yBAAyB,CAAC,UAAU,sBAAsB;AAAA;AAGhG,MAAM,eAAe,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,OAAO,KAAK,MAAM,eAAe,MAAM,KAAK;AAAA,iBAC7C,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
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
4
|
const addTooltipOnReadOnly = (Component, readOnly) => {
|
|
5
5
|
if (readOnly)
|
|
6
|
-
return /* @__PURE__ */
|
|
7
|
-
text: "Read Only"
|
|
8
|
-
|
|
6
|
+
return /* @__PURE__ */ jsx(DSTooltipV3, {
|
|
7
|
+
text: "Read Only",
|
|
8
|
+
children: Component
|
|
9
|
+
});
|
|
9
10
|
return Component;
|
|
10
11
|
};
|
|
11
12
|
export {
|
|
@@ -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;
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,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;
|
|
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,SACD;AACH,aAAO,UAAU,UAAU;AAAA,SACxB;AACH,aAAO;AAAA,SACJ;AACH,aAAO;AAAA;AAEP,aAAO;AAAA;AAEb;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.5.0-rc.
|
|
3
|
+
"version": "3.5.0-rc.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Controlled Form Toggle",
|
|
6
6
|
"files": [
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
"indent": 4
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@elliemae/ds-button": "3.5.0-rc.
|
|
39
|
-
"@elliemae/ds-system": "3.5.0-rc.
|
|
40
|
-
"@elliemae/ds-tooltip": "3.5.0-rc.
|
|
41
|
-
"@elliemae/ds-utilities": "3.5.0-rc.
|
|
38
|
+
"@elliemae/ds-button": "3.5.0-rc.10",
|
|
39
|
+
"@elliemae/ds-system": "3.5.0-rc.10",
|
|
40
|
+
"@elliemae/ds-tooltip": "3.5.0-rc.10",
|
|
41
|
+
"@elliemae/ds-utilities": "3.5.0-rc.10",
|
|
42
42
|
"styled-components": "~5.3.5",
|
|
43
43
|
"uid": "~2.0.0"
|
|
44
44
|
},
|