@elliemae/ds-form-toggle 3.16.0-next.1 → 3.16.0-next.3
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 +6 -6
- package/dist/cjs/ControlledToggle.js.map +2 -2
- package/dist/cjs/propTypes.js +15 -15
- package/dist/cjs/propTypes.js.map +2 -2
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/ControlledToggle.js +1 -1
- package/dist/esm/ControlledToggle.js.map +1 -1
- package/dist/esm/propTypes.js +1 -1
- package/dist/esm/propTypes.js.map +1 -1
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/ControlledToggle.d.ts +449 -449
- package/dist/types/propTypes.d.ts +448 -448
- package/package.json +7 -6
|
@@ -32,14 +32,14 @@ var React = __toESM(require("react"));
|
|
|
32
32
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
33
|
var import_react = require("react");
|
|
34
34
|
var import_uid = require("uid");
|
|
35
|
-
var
|
|
35
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
36
36
|
var import_propTypes = require("./propTypes");
|
|
37
37
|
var import_styles = require("./styles");
|
|
38
38
|
var import_addTooltipOnReadOnly = require("./utils/addTooltipOnReadOnly");
|
|
39
39
|
var import_DSFormToggleDefinitions = require("./DSFormToggleDefinitions");
|
|
40
40
|
const DSControlledToggle = (props) => {
|
|
41
|
-
const propsWithDefaults = (0,
|
|
42
|
-
(0,
|
|
41
|
+
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_propTypes.defaultProps);
|
|
42
|
+
(0, import_ds_props_helpers.useValidateTypescriptPropTypes)(propsWithDefaults, import_propTypes.propTypes, import_DSFormToggleDefinitions.DSFormToggleName);
|
|
43
43
|
const { labelOn, labelOff, value, checked, onChange, size, readOnly, active, disabled, containerProps, id, ...rest } = propsWithDefaults;
|
|
44
44
|
const [isLongerTextRendering, setIsLongerTextRendering] = (0, import_react.useState)(false);
|
|
45
45
|
const [width, setWidth] = (0, import_react.useState)(0);
|
|
@@ -67,8 +67,8 @@ const DSControlledToggle = (props) => {
|
|
|
67
67
|
},
|
|
68
68
|
[disabled, readOnly, onChange]
|
|
69
69
|
);
|
|
70
|
-
const globalAttrs = (0,
|
|
71
|
-
const xStyledProps = (0,
|
|
70
|
+
const globalAttrs = (0, import_ds_props_helpers.useGetGlobalAttributes)(rest, { onClick: handleOnChange });
|
|
71
|
+
const xStyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(rest);
|
|
72
72
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
73
73
|
import_styles.StyledContainer,
|
|
74
74
|
{
|
|
@@ -121,6 +121,6 @@ const DSControlledToggle = (props) => {
|
|
|
121
121
|
};
|
|
122
122
|
DSControlledToggle.propTypes = import_propTypes.propTypes;
|
|
123
123
|
DSControlledToggle.displayName = import_DSFormToggleDefinitions.DSFormToggleName;
|
|
124
|
-
const DSControlledToggleWithSchema = (0,
|
|
124
|
+
const DSControlledToggleWithSchema = (0, import_ds_props_helpers.describe)(DSControlledToggle);
|
|
125
125
|
DSControlledToggleWithSchema.propTypes = import_propTypes.propTypes;
|
|
126
126
|
//# sourceMappingURL=ControlledToggle.js.map
|
|
@@ -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-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0FX;AA1FZ,mBAAyE;AACzE,iBAAoB;AACpB,
|
|
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-props-helpers';\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';\nimport { DSFormToggleName } from './DSFormToggleDefinitions';\n\ntype DSButtonV2OnClick = DSButtonT.InternalProps['onClick'];\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes, DSFormToggleName);\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 if (onChange) {\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 = DSFormToggleName;\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;AD0FX;AA1FZ,mBAAyE;AACzE,iBAAoB;AACpB,8BAMO;AAEP,uBAAkE;AAClE,oBAQO;AACP,kCAAqC;AACrC,qCAAiC;AAIjC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,wBAAoB,sDAA6B,OAAO,6BAAY;AAC1E,8DAA+B,mBAAmB,4BAAW,+CAAgB;AAC7E,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;AAC1B,UAAI,UAAU;AACZ,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAEA,QAAM,kBAAc,gDAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,mBAAe,4CAAmB,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG;AAAA,YACJ;AAAA,YACA,MAAK;AAAA,YACL,YAAW;AAAA,YACX,eAAY;AAAA,YACZ,IAAI;AAAA,YACJ,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,6BAAY,SAAkB,MAAY,OACzC,uDAAC,sCAAqB,SAAkB,MAAY,UAAoB,QAAgB,UACtF;AAAA,4DAAC,8BAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,gBACpF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAY;AAAA,oBACZ,KAAK;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBAEC,oBAAU,UAAU;AAAA;AAAA,gBACvB;AAAA,iBACF,GACF;AAAA,cACA,4CAAC,+BAAc,MAAY,KAAK,cAAc,eAAY,QACvD,sBACH;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/propTypes.js
CHANGED
|
@@ -29,7 +29,7 @@ __export(propTypes_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(propTypes_exports);
|
|
31
31
|
var React = __toESM(require("react"));
|
|
32
|
-
var
|
|
32
|
+
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
33
33
|
const defaultProps = {
|
|
34
34
|
labelOn: "ON",
|
|
35
35
|
labelOff: "OFF",
|
|
@@ -42,19 +42,19 @@ const defaultProps = {
|
|
|
42
42
|
disabled: false
|
|
43
43
|
};
|
|
44
44
|
const propTypes = {
|
|
45
|
-
...
|
|
46
|
-
...
|
|
47
|
-
labelOn:
|
|
48
|
-
labelOff:
|
|
49
|
-
value:
|
|
50
|
-
name:
|
|
51
|
-
checked:
|
|
52
|
-
onchange:
|
|
53
|
-
size:
|
|
54
|
-
readOnly:
|
|
55
|
-
active:
|
|
56
|
-
disabled:
|
|
57
|
-
containerProps:
|
|
58
|
-
id:
|
|
45
|
+
...import_ds_props_helpers.globalAttributesPropTypes,
|
|
46
|
+
...import_ds_props_helpers.xstyledPropTypes,
|
|
47
|
+
labelOn: import_ds_props_helpers.PropTypes.string.description("Label when toggle is checked"),
|
|
48
|
+
labelOff: import_ds_props_helpers.PropTypes.string.description("Label when toggle is unchecked"),
|
|
49
|
+
value: import_ds_props_helpers.PropTypes.string.description("Value attribute for toggle"),
|
|
50
|
+
name: import_ds_props_helpers.PropTypes.string.description("Name attribute for toggle"),
|
|
51
|
+
checked: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is checked or not"),
|
|
52
|
+
onchange: import_ds_props_helpers.PropTypes.func.description("OnClick callback"),
|
|
53
|
+
size: import_ds_props_helpers.PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle"),
|
|
54
|
+
readOnly: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is readOnly or not"),
|
|
55
|
+
active: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle has active styles or not").deprecated({ version: "3.x" }),
|
|
56
|
+
disabled: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is disabled or not"),
|
|
57
|
+
containerProps: import_ds_props_helpers.PropTypes.shape({}).description("Set of properties attached to the main container"),
|
|
58
|
+
id: import_ds_props_helpers.PropTypes.string.description("Unique id.")
|
|
59
59
|
};
|
|
60
60
|
//# sourceMappingURL=propTypes.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/propTypes.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAuE;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,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,QAAQ,kCAAU,KAAK,YAAY,4CAA4C,EAAE,WAAW,EAAE,SAAS,MAAM,CAAC;AAAA,EAC9G,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,kCAAU,OAAO,YAAY,YAAY;AAC/C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
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';\nimport type { DSControlledToggleT } from './propTypes';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAChD,uBAA2B;
|
|
4
|
+
"sourcesContent": ["import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes';\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 &: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`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['600'];\n }};\n\n border-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else 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 }) => `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 ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\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: ${({ 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 }) => (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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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-
|
|
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-props-helpers';\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';\nimport { DSFormToggleName } from './DSFormToggleDefinitions';\n\ntype DSButtonV2OnClick = DSButtonT.InternalProps['onClick'];\n\nconst DSControlledToggle = (props: DSControlledToggleT.Props): JSX.Element => {\n const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);\n useValidateTypescriptPropTypes(propsWithDefaults, propTypes, DSFormToggleName);\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 if (onChange) {\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 = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = propTypes;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;AC0FX,SACE,KADF;AA1FZ,SAAgB,UAAU,SAAS,QAAQ,WAAW,mBAAmB;AACzE,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,WAAW,oBAA8C;AAClE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAIjC,MAAM,qBAAqB,CAAC,UAAkD;AAC5E,QAAM,oBAAoB,6BAA6B,OAAO,YAAY;AAC1E,iCAA+B,mBAAmB,WAAW,gBAAgB;AAC7E,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;AAAA,IACrB,CAAC,MAAM;AACL,UAAI,YAAY;AAAU;AAC1B,UAAI,UAAU;AACZ,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,CAAC,UAAU,UAAU,QAAQ;AAAA,EAC/B;AAEA,QAAM,cAAc,uBAAuB,MAAM,EAAE,SAAS,eAAe,CAAC;AAC5E,QAAM,eAAe,mBAAmB,IAAI;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEC;AAAA,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG;AAAA,YACJ;AAAA,YACA,MAAK;AAAA,YACL,YAAW;AAAA,YACX,eAAY;AAAA,YACZ,IAAI;AAAA,YACJ,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,gBAAc;AAAA,YACd,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YAEA;AAAA,kCAAC,eAAY,SAAkB,MAAY,OACzC,+BAAC,wBAAqB,SAAkB,MAAY,UAAoB,QAAgB,UACtF;AAAA,oCAAC,gBAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,gBACpF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAY;AAAA,oBACZ,KAAK;AAAA,oBACL;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBAEC,oBAAU,UAAU;AAAA;AAAA,gBACvB;AAAA,iBACF,GACF;AAAA,cACA,oBAAC,iBAAc,MAAY,KAAK,cAAc,eAAY,QACvD,sBACH;AAAA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;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/propTypes.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from "@elliemae/ds-
|
|
2
|
+
import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from "@elliemae/ds-props-helpers";
|
|
3
3
|
const defaultProps = {
|
|
4
4
|
labelOn: "ON",
|
|
5
5
|
labelOff: "OFF",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/propTypes.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { globalAttributesPropTypes, xstyledPropTypes, PropTypes } from '@elliemae/ds-props-helpers';\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
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
|
@@ -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';\nimport type { DSControlledToggleT } from './propTypes';\
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,KAAK,0BAA0B;AAChD,SAAS,kBAAkB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, css, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport type { DSControlledToggleT } from './propTypes';\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 &: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`\n background-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else return theme.colors.neutral['600'];\n }};\n\n border-color: ${({ checked, theme }) => {\n if (checked) return theme.colors.brand['800'];\n else 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 }) => `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 ${({ disabled, readOnly }) => !disabled && !readOnly && hoverStyled}\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: ${({ 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 }) => (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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|