@elliemae/ds-form-toggle 3.5.0-rc.8 → 3.5.1-rc.1

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.
Files changed (9) hide show
  1. package/dist/cjs/ControlledToggle.js +60 -47
  2. package/dist/cjs/ControlledToggle.js.map +2 -2
  3. package/dist/cjs/utils/addTooltipOnReadOnly.js +5 -4
  4. package/dist/cjs/utils/addTooltipOnReadOnly.js.map +2 -2
  5. package/dist/esm/ControlledToggle.js +60 -47
  6. package/dist/esm/ControlledToggle.js.map +2 -2
  7. package/dist/esm/utils/addTooltipOnReadOnly.js +5 -4
  8. package/dist/esm/utils/addTooltipOnReadOnly.js.map +2 -2
  9. package/package.json +5 -5
package/dist/cjs/ControlledToggle.js CHANGED
@@ -29,7 +29,8 @@ __export(ControlledToggle_exports, {
29
29
  });
30
30
  module.exports = __toCommonJS(ControlledToggle_exports);
31
31
  var React = __toESM(require("react"));
32
- var import_react = __toESM(require("react"));
32
+ var import_jsx_runtime = require("react/jsx-runtime");
33
+ var import_react = require("react");
33
34
  var import_uid = require("uid");
34
35
  var import_ds_utilities = require("@elliemae/ds-utilities");
35
36
  var import_propTypes = require("./propTypes");
@@ -63,56 +64,68 @@ const DSControlledToggle = (props) => {
63
64
  }, [disabled, readOnly, onChange]);
64
65
  const globalAttrs = (0, import_ds_utilities.useGetGlobalAttributes)(rest, { onClick: handleOnChange });
65
66
  const xStyledProps = (0, import_ds_utilities.useGetXstyledProps)(rest);
66
- return /* @__PURE__ */ import_react.default.createElement(import_styles.StyledContainer, {
67
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, {
67
68
  size,
68
69
  "data-testid": "ds-controlled-toggle",
69
70
  ...containerProps,
70
71
  ...xStyledProps,
71
- disabled
72
- }, (0, import_addTooltipOnReadOnly.addTooltipOnReadOnly)(
73
- /* @__PURE__ */ import_react.default.createElement(import_styles.StyledButton, {
74
- role: "switch",
75
- ...globalAttrs,
76
- value,
77
- type: "button",
78
- buttonType: "raw",
79
- "data-testid": "ds-controlled-toggle-checkbox",
80
- id: instanceUID,
81
- "aria-readonly": readOnly,
82
- "aria-disabled": disabled,
83
- "aria-checked": checked,
84
- onClick: handleOnChange,
85
- readOnly,
86
- disabled
87
- }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledLabel, {
88
- checked,
89
- size,
90
- width
91
- }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledVisibleContent, {
92
- checked,
93
- size,
94
- readOnly,
95
- active,
96
- disabled
97
- }, /* @__PURE__ */ import_react.default.createElement(import_styles.StyledCircle, {
98
- checked,
99
- size,
100
- readOnly,
101
- disabled
102
- }), /* @__PURE__ */ import_react.default.createElement(import_styles.StyledText, {
103
- "aria-hidden": "true",
104
- ref: labelTextRef,
105
- isLongerTextRendering,
106
- checked,
107
- size,
108
- disabled
109
- }, checked ? labelOn : labelOff))), /* @__PURE__ */ import_react.default.createElement(import_styles.SetLabelWidth, {
110
- size,
111
- ref: widthTextRef,
112
- "aria-hidden": "true"
113
- }, longerText)),
114
- readOnly
115
- ));
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
+ });
116
129
  };
117
130
  DSControlledToggle.propTypes = import_propTypes.propTypes;
118
131
  DSControlledToggle.displayName = "DSControlledToggle";
package/dist/cjs/ControlledToggle.js.map CHANGED
@@ -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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,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,6BAAAA,QAAA,cAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,SAEC;AAAA,IACC,6BAAAA,QAAA,cAAC;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ;AAAA,MACA,MAAK;AAAA,MACL,YAAW;AAAA,MACX,eAAY;AAAA,MACZ,IAAI;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,gBAAc;AAAA,MACd,SAAS;AAAA,MACT;AAAA,MACA;AAAA,OAEA,6BAAAA,QAAA,cAAC;AAAA,MAAY;AAAA,MAAkB;AAAA,MAAY;AAAA,OACzC,6BAAAA,QAAA,cAAC;AAAA,MAAqB;AAAA,MAAkB;AAAA,MAAY;AAAA,MAAoB;AAAA,MAAgB;AAAA,OACtF,6BAAAA,QAAA,cAAC;AAAA,MAAa;AAAA,MAAkB;AAAA,MAAY;AAAA,MAAoB;AAAA,KAAoB,GACpF,6BAAAA,QAAA,cAAC;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAc;AAAA,MAAY,KAAK;AAAA,MAAc,eAAY;AAAA,OACvD,UACH,CACF;AAAA,IACA;AAAA,EACF,CACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,8BAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
6
- "names": ["React"]
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
+ "names": []
7
7
  }
package/dist/cjs/utils/addTooltipOnReadOnly.js CHANGED
@@ -28,13 +28,14 @@ __export(addTooltipOnReadOnly_exports, {
28
28
  });
29
29
  module.exports = __toCommonJS(addTooltipOnReadOnly_exports);
30
30
  var React = __toESM(require("react"));
31
- var import_react = __toESM(require("react"));
31
+ var import_jsx_runtime = require("react/jsx-runtime");
32
32
  var import_ds_tooltip = require("@elliemae/ds-tooltip");
33
33
  const addTooltipOnReadOnly = (Component, readOnly) => {
34
34
  if (readOnly)
35
- return /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltipV3, {
36
- text: "Read Only"
37
- }, Component);
35
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, {
36
+ text: "Read Only",
37
+ children: Component
38
+ });
38
39
  return Component;
39
40
  };
40
41
  //# sourceMappingURL=addTooltipOnReadOnly.js.map
package/dist/cjs/utils/addTooltipOnReadOnly.js.map CHANGED
@@ -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;ADAvB,mBAAkB;AAClB,wBAA4B;AAErB,MAAM,uBAAuB,CAAC,WAAwB,aAAmC;AAC9F,MAAI;AAAU,WAAO,6BAAAA,QAAA,cAAC;AAAA,MAAY,MAAK;AAAA,OAAa,SAAU;AAC9D,SAAO;AACT;",
6
- "names": ["React"]
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
+ "names": []
7
7
  }
package/dist/esm/ControlledToggle.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
- import React2, { useState, useMemo, useRef, useEffect, useCallback } from "react";
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,56 +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__ */ React2.createElement(StyledContainer, {
51
+ return /* @__PURE__ */ jsx(StyledContainer, {
51
52
  size,
52
53
  "data-testid": "ds-controlled-toggle",
53
54
  ...containerProps,
54
55
  ...xStyledProps,
55
- disabled
56
- }, addTooltipOnReadOnly(
57
- /* @__PURE__ */ React2.createElement(StyledButton, {
58
- role: "switch",
59
- ...globalAttrs,
60
- value,
61
- type: "button",
62
- buttonType: "raw",
63
- "data-testid": "ds-controlled-toggle-checkbox",
64
- id: instanceUID,
65
- "aria-readonly": readOnly,
66
- "aria-disabled": disabled,
67
- "aria-checked": checked,
68
- onClick: handleOnChange,
69
- readOnly,
70
- disabled
71
- }, /* @__PURE__ */ React2.createElement(StyledLabel, {
72
- checked,
73
- size,
74
- width
75
- }, /* @__PURE__ */ React2.createElement(StyledVisibleContent, {
76
- checked,
77
- size,
78
- readOnly,
79
- active,
80
- disabled
81
- }, /* @__PURE__ */ React2.createElement(StyledCircle, {
82
- checked,
83
- size,
84
- readOnly,
85
- disabled
86
- }), /* @__PURE__ */ React2.createElement(StyledText, {
87
- "aria-hidden": "true",
88
- ref: labelTextRef,
89
- isLongerTextRendering,
90
- checked,
91
- size,
92
- disabled
93
- }, checked ? labelOn : labelOff))), /* @__PURE__ */ React2.createElement(SetLabelWidth, {
94
- size,
95
- ref: widthTextRef,
96
- "aria-hidden": "true"
97
- }, longerText)),
98
- readOnly
99
- ));
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
+ });
100
113
  };
101
114
  DSControlledToggle.propTypes = propTypes;
102
115
  DSControlledToggle.displayName = "DSControlledToggle";
package/dist/esm/ControlledToggle.js.map CHANGED
@@ -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,YAAY,WAAW;ACAvB,OAAOA,UAAS,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,gBAAAA,OAAA,cAAC;AAAA,IACC;AAAA,IACA,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ;AAAA,KAEC;AAAA,IACC,gBAAAA,OAAA,cAAC;AAAA,MACC,MAAK;AAAA,MACJ,GAAG;AAAA,MACJ;AAAA,MACA,MAAK;AAAA,MACL,YAAW;AAAA,MACX,eAAY;AAAA,MACZ,IAAI;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,gBAAc;AAAA,MACd,SAAS;AAAA,MACT;AAAA,MACA;AAAA,OAEA,gBAAAA,OAAA,cAAC;AAAA,MAAY;AAAA,MAAkB;AAAA,MAAY;AAAA,OACzC,gBAAAA,OAAA,cAAC;AAAA,MAAqB;AAAA,MAAkB;AAAA,MAAY;AAAA,MAAoB;AAAA,MAAgB;AAAA,OACtF,gBAAAA,OAAA,cAAC;AAAA,MAAa;AAAA,MAAkB;AAAA,MAAY;AAAA,MAAoB;AAAA,KAAoB,GACpF,gBAAAA,OAAA,cAAC;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OAEC,UAAU,UAAU,QACvB,CACF,CACF,GACA,gBAAAA,OAAA,cAAC;AAAA,MAAc;AAAA,MAAY,KAAK;AAAA,MAAc,eAAY;AAAA,OACvD,UACH,CACF;AAAA,IACA;AAAA,EACF,CACF;AAEJ;AAEA,mBAAmB,YAAY;AAC/B,mBAAmB,cAAc;AACjC,MAAM,+BAA+B,SAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
6
- "names": ["React"]
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
+ "names": []
7
7
  }
package/dist/esm/utils/addTooltipOnReadOnly.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import * as React from "react";
2
- import React2 from "react";
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__ */ React2.createElement(DSTooltipV3, {
7
- text: "Read Only"
8
- }, Component);
6
+ return /* @__PURE__ */ jsx(DSTooltipV3, {
7
+ text: "Read Only",
8
+ children: Component
9
+ });
9
10
  return Component;
10
11
  };
11
12
  export {
package/dist/esm/utils/addTooltipOnReadOnly.js.map CHANGED
@@ -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;ACAvB,OAAOA,YAAW;AAClB,SAAS,mBAAmB;AAErB,MAAM,uBAAuB,CAAC,WAAwB,aAAmC;AAC9F,MAAI;AAAU,WAAO,gBAAAA,OAAA,cAAC;AAAA,MAAY,MAAK;AAAA,OAAa,SAAU;AAC9D,SAAO;AACT;",
6
- "names": ["React"]
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
+ "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.8",
3
+ "version": "3.5.1-rc.1",
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.8",
39
- "@elliemae/ds-system": "3.5.0-rc.8",
40
- "@elliemae/ds-tooltip": "3.5.0-rc.8",
41
- "@elliemae/ds-utilities": "3.5.0-rc.8",
38
+ "@elliemae/ds-button": "3.5.1-rc.1",
39
+ "@elliemae/ds-system": "3.5.1-rc.1",
40
+ "@elliemae/ds-tooltip": "3.5.1-rc.1",
41
+ "@elliemae/ds-utilities": "3.5.1-rc.1",
42
42
  "styled-components": "~5.3.5",
43
43
  "uid": "~2.0.0"
44
44
  },