@elliemae/ds-form-toggle 3.57.0-next.2 → 3.57.0-next.21

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 (55) hide show
  1. package/dist/cjs/ControlledToggle.js +75 -73
  2. package/dist/cjs/ControlledToggle.js.map +2 -2
  3. package/dist/cjs/config/useDSControlledToggle.js +25 -2
  4. package/dist/cjs/config/useDSControlledToggle.js.map +2 -2
  5. package/dist/cjs/{parts/AddTooltipOnReadOnly.js → config/useGetButtonProps.js} +30 -10
  6. package/dist/cjs/config/useGetButtonProps.js.map +7 -0
  7. package/dist/cjs/{DSFormToggleDefinitions.js → config/useGetWidestLabelWidth.js} +40 -6
  8. package/dist/cjs/config/useGetWidestLabelWidth.js.map +7 -0
  9. package/dist/cjs/constants/index.js +16 -3
  10. package/dist/cjs/constants/index.js.map +2 -2
  11. package/dist/cjs/index.js +11 -2
  12. package/dist/cjs/index.js.map +2 -2
  13. package/dist/cjs/react-desc-prop-types.js +12 -17
  14. package/dist/cjs/react-desc-prop-types.js.map +2 -2
  15. package/dist/cjs/styles.js +49 -35
  16. package/dist/cjs/styles.js.map +2 -2
  17. package/dist/cjs/utils/styleHelpers.js +12 -13
  18. package/dist/cjs/utils/styleHelpers.js.map +2 -2
  19. package/dist/esm/ControlledToggle.js +81 -79
  20. package/dist/esm/ControlledToggle.js.map +2 -2
  21. package/dist/esm/config/useDSControlledToggle.js +25 -2
  22. package/dist/esm/config/useDSControlledToggle.js.map +2 -2
  23. package/dist/esm/config/useGetButtonProps.js +31 -0
  24. package/dist/esm/config/useGetButtonProps.js.map +7 -0
  25. package/dist/esm/config/useGetWidestLabelWidth.js +40 -0
  26. package/dist/esm/config/useGetWidestLabelWidth.js.map +7 -0
  27. package/dist/esm/constants/index.js +16 -3
  28. package/dist/esm/constants/index.js.map +2 -2
  29. package/dist/esm/index.js +7 -1
  30. package/dist/esm/index.js.map +2 -2
  31. package/dist/esm/react-desc-prop-types.js +12 -17
  32. package/dist/esm/react-desc-prop-types.js.map +2 -2
  33. package/dist/esm/styles.js +50 -36
  34. package/dist/esm/styles.js.map +2 -2
  35. package/dist/esm/utils/styleHelpers.js +12 -13
  36. package/dist/esm/utils/styleHelpers.js.map +2 -2
  37. package/dist/types/config/useDSControlledToggle.d.ts +16 -19
  38. package/dist/types/config/useGetButtonProps.d.ts +10 -0
  39. package/dist/types/config/useGetWidestLabelWidth.d.ts +14 -0
  40. package/dist/types/constants/index.d.ts +15 -2
  41. package/dist/types/index.d.ts +2 -1
  42. package/dist/types/react-desc-prop-types.d.ts +39 -13
  43. package/dist/types/styles.d.ts +31 -30
  44. package/dist/types/tests/DSControlledToggle.app-sdk-compatibility.test.d.ts +1 -0
  45. package/dist/types/tests/DSControlledToggle.data-testId.test.d.ts +1 -0
  46. package/dist/types/utils/styleHelpers.d.ts +8 -8
  47. package/package.json +7 -11
  48. package/dist/cjs/DSFormToggleDefinitions.js.map +0 -7
  49. package/dist/cjs/parts/AddTooltipOnReadOnly.js.map +0 -7
  50. package/dist/esm/DSFormToggleDefinitions.js +0 -6
  51. package/dist/esm/DSFormToggleDefinitions.js.map +0 -7
  52. package/dist/esm/parts/AddTooltipOnReadOnly.js +0 -11
  53. package/dist/esm/parts/AddTooltipOnReadOnly.js.map +0 -7
  54. package/dist/types/DSFormToggleDefinitions.d.ts +0 -1
  55. package/dist/types/parts/AddTooltipOnReadOnly.d.ts +0 -5
@@ -34,92 +34,94 @@ __export(ControlledToggle_exports, {
34
34
  module.exports = __toCommonJS(ControlledToggle_exports);
35
35
  var React = __toESM(require("react"));
36
36
  var import_jsx_runtime = require("react/jsx-runtime");
37
- var import_react = require("react");
38
37
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
38
+ var import_useDSControlledToggle = require("./config/useDSControlledToggle.js");
39
+ var import_constants = require("./constants/index.js");
39
40
  var import_react_desc_prop_types = require("./react-desc-prop-types.js");
40
41
  var import_styles = require("./styles.js");
41
- var import_DSFormToggleDefinitions = require("./DSFormToggleDefinitions.js");
42
- var import_useDSControlledToggle = require("./config/useDSControlledToggle.js");
43
- var import_AddTooltipOnReadOnly = require("./parts/AddTooltipOnReadOnly.js");
44
42
  const DSControlledToggle = (props) => {
45
- const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = (0, import_useDSControlledToggle.useDSControlledToggle)(props);
46
- const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
47
- const [isLongerTextRendering, setIsLongerTextRendering] = (0, import_react.useState)(false);
48
- const [width, setWidth] = (0, import_react.useState)(0);
49
- const labelTextRef = (0, import_react.useRef)(null);
50
- const widthTextRef = (0, import_react.useRef)(null);
51
- const longerText = (0, import_react.useMemo)(() => labelOn.length > labelOff.length ? labelOn : labelOff, [labelOff, labelOn]);
52
- const ButtonProps = (0, import_react.useMemo)(
53
- () => ({
54
- role: readOnly ? "checkbox" : "switch",
55
- "data-testid": "ds-controlled-toggle-checkbox",
56
- // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...
57
- // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value
58
- value,
59
- id: instanceUid,
60
- "aria-readonly": readOnly,
61
- "aria-disabled": disabled || applyAriaDisabled || readOnly,
62
- "aria-checked": checked,
63
- "aria-describedby": `${instanceUid}_feedback_message ${instanceUid}_error_message`,
64
- readOnly,
65
- disabled,
66
- ...globalProps,
67
- type: "button",
68
- buttonType: "raw",
69
- onClick: handleOnClick
70
- }),
71
- [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled]
72
- );
73
- (0, import_react.useLayoutEffect)(() => {
74
- if (labelTextRef.current) {
75
- setIsLongerTextRendering(labelTextRef.current.innerText === longerText);
76
- }
77
- }, [labelTextRef, longerText, checked]);
78
- (0, import_react.useLayoutEffect)(() => {
79
- if (widthTextRef.current) {
80
- setWidth(widthTextRef.current.clientWidth);
81
- }
82
- }, [widthTextRef]);
43
+ const { propsWithDefault, xstyledProps, width, handleRefOnLabelWidth, handleRefOffLabelWidth, buttonProps } = (0, import_useDSControlledToggle.useDSControlledToggle)(props);
44
+ const {
45
+ wcagViolationLabelOn,
46
+ wcagViolationLabelOff,
47
+ checked,
48
+ size,
49
+ containerProps,
50
+ disabled,
51
+ applyAriaDisabled,
52
+ readOnly
53
+ } = propsWithDefault;
54
+ const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(propsWithDefault);
83
55
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
84
56
  import_styles.StyledContainer,
85
57
  {
86
- size,
87
- "data-testid": "ds-controlled-toggle",
58
+ $size: size,
59
+ "data-testid": import_constants.CONTROLLED_TOGGLE_DATA_TESTID.CONTROLLED_CONTAINER,
88
60
  ...containerProps,
89
61
  ...xstyledProps,
90
62
  disabled,
91
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_AddTooltipOnReadOnly.AddTooltipOnReadOnly, { readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledButton, { ...ButtonProps, children: [
92
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLabel, { checked, size, width, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
93
- import_styles.StyledVisibleContent,
94
- {
95
- checked,
96
- size,
97
- readOnly,
98
- disabled,
99
- applyAriaDisabled,
100
- children: [
101
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCircle, { checked, size, readOnly, disabled }),
102
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
103
- import_styles.StyledText,
104
- {
105
- innerRef: labelTextRef,
106
- isLongerTextRendering,
107
- checked,
108
- size,
109
- disabled,
110
- applyAriaDisabled,
111
- children: checked ? labelOn : labelOff
112
- }
113
- )
114
- ]
115
- }
116
- ) }),
117
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.SetLabelWidth, { size, innerRef: widthTextRef, "aria-hidden": "true", children: longerText })
118
- ] }) })
63
+ getOwnerProps,
64
+ getOwnerPropsArguments,
65
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
66
+ import_styles.StyledButton,
67
+ {
68
+ ...readOnly ? { "aria-readonly": "true" } : {},
69
+ ...buttonProps,
70
+ getOwnerProps,
71
+ getOwnerPropsArguments,
72
+ children: [
73
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
+ import_styles.StyledRadiusShape,
75
+ {
76
+ $size: size,
77
+ $width: width,
78
+ getOwnerProps,
79
+ getOwnerPropsArguments,
80
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
81
+ import_styles.StyledButtonContentWrapper,
82
+ {
83
+ $checked: checked,
84
+ $size: size,
85
+ $readOnly: readOnly,
86
+ $disabled: disabled,
87
+ $applyAriaDisabled: applyAriaDisabled,
88
+ getOwnerProps,
89
+ getOwnerPropsArguments,
90
+ children: [
91
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
92
+ import_styles.StyledCircle,
93
+ {
94
+ $size: size,
95
+ $readOnly: readOnly,
96
+ $applyAriaDisabled: applyAriaDisabled,
97
+ getOwnerProps,
98
+ getOwnerPropsArguments
99
+ }
100
+ ),
101
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
102
+ import_styles.StyledTextWrapper,
103
+ {
104
+ $size: size,
105
+ $disabled: disabled,
106
+ getOwnerProps,
107
+ getOwnerPropsArguments,
108
+ children: checked ? wcagViolationLabelOn ?? "ON" : wcagViolationLabelOff ?? "OFF"
109
+ }
110
+ )
111
+ ]
112
+ }
113
+ )
114
+ }
115
+ ),
116
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.SetLabelWidth, { $size: size, innerRef: handleRefOnLabelWidth, "aria-hidden": "true", children: wcagViolationLabelOn ?? "ON" }),
117
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.SetLabelWidth, { $size: size, innerRef: handleRefOffLabelWidth, "aria-hidden": "true", children: wcagViolationLabelOff ?? "OFF" })
118
+ ]
119
+ }
120
+ )
119
121
  }
120
122
  );
121
123
  };
122
- DSControlledToggle.displayName = import_DSFormToggleDefinitions.DSFormToggleName;
124
+ DSControlledToggle.displayName = import_constants.DSControlledToggleName;
123
125
  const DSControlledToggleWithSchema = (0, import_ds_props_helpers.describe)(DSControlledToggle);
124
126
  DSControlledToggleWithSchema.propTypes = import_react_desc_prop_types.DSControlledTogglePropTypesSchema;
125
127
  //# 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, useLayoutEffect } from 'react';\nimport type { DSButtonV2T } from '@elliemae/ds-button-v2';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n StyledContainer,\n StyledButton,\n StyledLabel,\n StyledVisibleContent,\n StyledCircle,\n StyledText,\n SetLabelWidth,\n} from './styles.js';\nimport { DSFormToggleName } from './DSFormToggleDefinitions.js';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { AddTooltipOnReadOnly } from './parts/AddTooltipOnReadOnly.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n const { propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick } = useDSControlledToggle(props);\n const { labelOn, labelOff, checked, size, value, containerProps, disabled, applyAriaDisabled, readOnly } =\n propsWithDefault;\n\n const [isLongerTextRendering, setIsLongerTextRendering] = useState<boolean>(false);\n const [width, setWidth] = useState<number>(0);\n const labelTextRef = useRef<HTMLDivElement | null>(null);\n const widthTextRef = useRef<HTMLDivElement | null>(null);\n\n const longerText = useMemo(() => (labelOn.length > labelOff.length ? labelOn : labelOff), [labelOff, labelOn]);\n\n const ButtonProps: DSButtonV2T.Props = useMemo(\n () => ({\n role: readOnly ? 'checkbox' : 'switch',\n 'data-testid': 'ds-controlled-toggle-checkbox',\n // removing 'value' could be a breaking change in scenarios where the form is submitted and the value is used...\n // check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value\n value,\n id: instanceUid,\n 'aria-readonly': readOnly,\n 'aria-disabled': disabled || applyAriaDisabled || readOnly,\n 'aria-checked': checked,\n 'aria-describedby': `${instanceUid}_feedback_message ${instanceUid}_error_message`,\n readOnly,\n disabled,\n ...(globalProps as unknown as DSButtonV2T.Props),\n type: 'button',\n buttonType: 'raw',\n onClick: handleOnClick,\n }),\n [checked, disabled, globalProps, handleOnClick, instanceUid, readOnly, value, applyAriaDisabled],\n );\n\n useLayoutEffect(() => {\n if (labelTextRef.current) {\n setIsLongerTextRendering(labelTextRef.current.innerText === longerText);\n }\n }, [labelTextRef, longerText, checked]);\n\n useLayoutEffect(() => {\n if (widthTextRef.current) {\n setWidth(widthTextRef.current.clientWidth);\n }\n }, [widthTextRef]);\n\n return (\n <StyledContainer\n size={size}\n data-testid=\"ds-controlled-toggle\"\n {...containerProps}\n {...xstyledProps}\n disabled={disabled}\n >\n <AddTooltipOnReadOnly readOnly={readOnly}>\n <StyledButton {...ButtonProps}>\n <StyledLabel checked={checked} size={size} width={width}>\n <StyledVisibleContent\n checked={checked}\n size={size}\n readOnly={readOnly}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n <StyledCircle checked={checked} size={size} readOnly={readOnly} disabled={disabled} />\n <StyledText\n innerRef={labelTextRef}\n isLongerTextRendering={isLongerTextRendering}\n checked={checked}\n size={size}\n disabled={disabled}\n applyAriaDisabled={applyAriaDisabled}\n >\n {checked ? labelOn : labelOff}\n </StyledText>\n </StyledVisibleContent>\n </StyledLabel>\n <SetLabelWidth size={size} innerRef={widthTextRef} aria-hidden=\"true\">\n {longerText}\n </SetLabelWidth>\n </StyledButton>\n </AddTooltipOnReadOnly>\n </StyledContainer>\n );\n};\n\nDSControlledToggle.displayName = DSFormToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0EX;AA1EZ,mBAAkE;AAElE,8BAAyB;AACzB,mCAA4E;AAC5E,oBAQO;AACP,qCAAiC;AACjC,mCAAsC;AACtC,kCAAqC;AAErC,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,aAAa,cAAc,aAAa,cAAc,QAAI,oDAAsB,KAAK;AAC/G,QAAM,EAAE,SAAS,UAAU,SAAS,MAAM,OAAO,gBAAgB,UAAU,mBAAmB,SAAS,IACrG;AAEF,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAkB,KAAK;AACjF,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,mBAAe,qBAA8B,IAAI;AACvD,QAAM,mBAAe,qBAA8B,IAAI;AAEvD,QAAM,iBAAa,sBAAQ,MAAO,QAAQ,SAAS,SAAS,SAAS,UAAU,UAAW,CAAC,UAAU,OAAO,CAAC;AAE7G,QAAM,kBAAiC;AAAA,IACrC,OAAO;AAAA,MACL,MAAM,WAAW,aAAa;AAAA,MAC9B,eAAe;AAAA;AAAA;AAAA,MAGf;AAAA,MACA,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB,YAAY,qBAAqB;AAAA,MAClD,gBAAgB;AAAA,MAChB,oBAAoB,GAAG,WAAW,qBAAqB,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,MACA,GAAI;AAAA,MACJ,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,UAAU,aAAa,eAAe,aAAa,UAAU,OAAO,iBAAiB;AAAA,EACjG;AAEA,oCAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,+BAAyB,aAAa,QAAQ,cAAc,UAAU;AAAA,IACxE;AAAA,EACF,GAAG,CAAC,cAAc,YAAY,OAAO,CAAC;AAEtC,oCAAgB,MAAM;AACpB,QAAI,aAAa,SAAS;AACxB,eAAS,aAAa,QAAQ,WAAW;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAY;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MAEA,sDAAC,oDAAqB,UACpB,uDAAC,8BAAc,GAAG,aAChB;AAAA,oDAAC,6BAAY,SAAkB,MAAY,OACzC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YAEA;AAAA,0DAAC,8BAAa,SAAkB,MAAY,UAAoB,UAAoB;AAAA,cACpF;AAAA,gBAAC;AAAA;AAAA,kBACC,UAAU;AAAA,kBACV;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBAEC,oBAAU,UAAU;AAAA;AAAA,cACvB;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QACA,4CAAC,+BAAc,MAAY,UAAU,cAAc,eAAY,QAC5D,sBACH;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
4
+ "sourcesContent": ["import { describe, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport { useDSControlledToggle } from './config/useDSControlledToggle.js';\nimport { CONTROLLED_TOGGLE_DATA_TESTID, DSControlledToggleName } from './constants/index.js';\nimport { DSControlledTogglePropTypesSchema, type DSControlledToggleT } from './react-desc-prop-types.js';\nimport {\n SetLabelWidth,\n StyledButton,\n StyledButtonContentWrapper,\n StyledCircle,\n StyledContainer,\n StyledRadiusShape,\n StyledTextWrapper,\n} from './styles.js';\n\nconst DSControlledToggle: React.ComponentType<DSControlledToggleT.Props> = (props) => {\n const { propsWithDefault, xstyledProps, width, handleRefOnLabelWidth, handleRefOffLabelWidth, buttonProps } =\n useDSControlledToggle(props);\n const {\n wcagViolationLabelOn,\n wcagViolationLabelOff,\n checked,\n size,\n containerProps,\n disabled,\n applyAriaDisabled,\n readOnly,\n } = propsWithDefault;\n const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);\n\n return (\n <StyledContainer\n $size={size}\n data-testid={CONTROLLED_TOGGLE_DATA_TESTID.CONTROLLED_CONTAINER}\n {...containerProps}\n {...xstyledProps}\n disabled={disabled}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledButton\n // as per morning meeting, juan said \"readOnly\" in toggle should receive aria-readonly, aria-readonly is valid for switch role, the html readonly attribute is not\n {...(readOnly ? { 'aria-readonly': 'true' } : {})}\n {...buttonProps}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledRadiusShape\n $size={size}\n $width={width}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledButtonContentWrapper\n $checked={checked}\n $size={size}\n $readOnly={readOnly}\n $disabled={disabled}\n $applyAriaDisabled={applyAriaDisabled}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <StyledCircle\n $size={size}\n $readOnly={readOnly}\n $applyAriaDisabled={applyAriaDisabled}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n />\n <StyledTextWrapper\n $size={size}\n $disabled={disabled}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n {checked ? (wcagViolationLabelOn ?? 'ON') : (wcagViolationLabelOff ?? 'OFF')}\n </StyledTextWrapper>\n </StyledButtonContentWrapper>\n </StyledRadiusShape>\n <SetLabelWidth $size={size} innerRef={handleRefOnLabelWidth} aria-hidden=\"true\">\n {wcagViolationLabelOn ?? 'ON'}\n </SetLabelWidth>\n <SetLabelWidth $size={size} innerRef={handleRefOffLabelWidth} aria-hidden=\"true\">\n {wcagViolationLabelOff ?? 'OFF'}\n </SetLabelWidth>\n </StyledButton>\n </StyledContainer>\n );\n};\n\nDSControlledToggle.displayName = DSControlledToggleName;\nconst DSControlledToggleWithSchema = describe(DSControlledToggle);\nDSControlledToggleWithSchema.propTypes = DSControlledTogglePropTypesSchema;\n\nexport { DSControlledToggle, DSControlledToggleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADqDb;AArDV,8BAAwC;AAExC,mCAAsC;AACtC,uBAAsE;AACtE,mCAA4E;AAC5E,oBAQO;AAEP,MAAM,qBAAqE,CAAC,UAAU;AACpF,QAAM,EAAE,kBAAkB,cAAc,OAAO,uBAAuB,wBAAwB,YAAY,QACxG,oDAAsB,KAAK;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,gBAAgB;AAEhF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,eAAa,+CAA8B;AAAA,MAC1C,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UAEE,GAAI,WAAW,EAAE,iBAAiB,OAAO,IAAI,CAAC;AAAA,UAC9C,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR;AAAA,gBACA;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,UAAU;AAAA,oBACV,OAAO;AAAA,oBACP,WAAW;AAAA,oBACX,WAAW;AAAA,oBACX,oBAAoB;AAAA,oBACpB;AAAA,oBACA;AAAA,oBAEA;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,OAAO;AAAA,0BACP,WAAW;AAAA,0BACX,oBAAoB;AAAA,0BACpB;AAAA,0BACA;AAAA;AAAA,sBACF;AAAA,sBACA;AAAA,wBAAC;AAAA;AAAA,0BACC,OAAO;AAAA,0BACP,WAAW;AAAA,0BACX;AAAA,0BACA;AAAA,0BAEC,oBAAW,wBAAwB,OAAS,yBAAyB;AAAA;AAAA,sBACxE;AAAA;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,YACA,4CAAC,+BAAc,OAAO,MAAM,UAAU,uBAAuB,eAAY,QACtE,kCAAwB,MAC3B;AAAA,YACA,4CAAC,+BAAc,OAAO,MAAM,UAAU,wBAAwB,eAAY,QACvE,mCAAyB,OAC5B;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,mBAAmB,cAAc;AACjC,MAAM,mCAA+B,kCAAS,kBAAkB;AAChE,6BAA6B,YAAY;",
6
6
  "names": []
7
7
  }
@@ -32,10 +32,12 @@ __export(useDSControlledToggle_exports, {
32
32
  });
33
33
  module.exports = __toCommonJS(useDSControlledToggle_exports);
34
34
  var React = __toESM(require("react"));
35
- var import_react = __toESM(require("react"));
36
35
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
36
+ var import_react = __toESM(require("react"));
37
37
  var import_uid = require("uid");
38
38
  var import_react_desc_prop_types = require("../react-desc-prop-types.js");
39
+ var import_useGetButtonProps = require("./useGetButtonProps.js");
40
+ var import_useGetWidestLabelWidth = require("./useGetWidestLabelWidth.js");
39
41
  var import_useValidateProps = require("./useValidateProps.js");
40
42
  const useDSControlledToggle = (propsFromUser) => {
41
43
  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(propsFromUser, import_react_desc_prop_types.defaultProps);
@@ -56,15 +58,36 @@ const useDSControlledToggle = (propsFromUser) => {
56
58
  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
57
59
  const { id } = propsWithDefault;
58
60
  const instanceUid = import_react.default.useMemo(() => id || (0, import_uid.uid)(5), [id]);
61
+ const { width, handleRefOnLabelWidth, handleRefOffLabelWidth } = (0, import_useGetWidestLabelWidth.useGetWidestLabelWidth)();
62
+ const buttonProps = (0, import_useGetButtonProps.useGetButtonProps)({
63
+ handleOnClick,
64
+ globalProps,
65
+ instanceUid,
66
+ propsWithDefault
67
+ });
59
68
  return import_react.default.useMemo(
60
69
  () => ({
61
70
  propsWithDefault,
71
+ width,
72
+ handleRefOnLabelWidth,
73
+ handleRefOffLabelWidth,
62
74
  globalProps,
75
+ buttonProps,
63
76
  xstyledProps,
64
77
  instanceUid,
65
78
  handleOnClick
66
79
  }),
67
- [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick]
80
+ [
81
+ propsWithDefault,
82
+ width,
83
+ handleRefOnLabelWidth,
84
+ handleRefOffLabelWidth,
85
+ globalProps,
86
+ buttonProps,
87
+ xstyledProps,
88
+ instanceUid,
89
+ handleOnClick
90
+ ]
68
91
  );
69
92
  };
70
93
  //# sourceMappingURL=useDSControlledToggle.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/config/useDSControlledToggle.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useCallback } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface DSControlledToggleCTX {\n propsWithDefault: DSControlledToggleT.InternalProps;\n globalProps: ReturnType<typeof useGetGlobalAttributes>;\n xstyledProps: ReturnType<typeof useGetXstyledProps>;\n instanceUid: string;\n}\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n const handleOnClick = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || applyAriaDisabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, applyAriaDisabled, readOnly, onChange],\n );\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n onClick: handleOnClick,\n });\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n // const eventHandlers = useEventHandlers({ propsWithDefault, instanceUid }); // <-- complex logic should be made atomics this way\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n globalProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n }),\n [propsWithDefault, globalProps, xstyledProps, instanceUid, handleOnClick],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAmC;AACnC,8BAAyF;AACzF,iBAAoB;AACpB,mCAAoF;AACpF,8BAAiC;AAS1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,uBAAmB,sDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,kBAAc,gDAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAM1D,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,aAAa,cAAc,aAAa,aAAa;AAAA,EAC1E;AACF;",
4
+ "sourcesContent": ["import { useGetGlobalAttributes, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport React, { useCallback } from 'react';\nimport { uid } from 'uid';\nimport { type DSControlledToggleT, DSControlledTogglePropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useGetButtonProps } from './useGetButtonProps.js';\nimport { useGetWidestLabelWidth } from './useGetWidestLabelWidth.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useDSControlledToggle = (propsFromUser: DSControlledToggleT.Props) => {\n // =============================================================================\n // MERGE WITH DEFAULT AND VALIDATE PROPS\n // =============================================================================\n const propsWithDefault = useMemoMergePropsWithDefault<DSControlledToggleT.InternalProps>(propsFromUser, defaultProps);\n useValidateProps(propsWithDefault, DSControlledTogglePropTypes);\n // =============================================================================\n // AD HOC PER COMPONENT LOGIC\n // =============================================================================\n const { disabled, applyAriaDisabled, readOnly, onChange } = propsWithDefault;\n const handleOnClick = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n if (disabled || applyAriaDisabled || readOnly) return;\n if (onChange) {\n onChange(e);\n }\n },\n [disabled, applyAriaDisabled, readOnly, onChange],\n );\n // =============================================================================\n // GLOBAL ATTRIBUTES & XSTYLED PROPS\n // =============================================================================\n const globalProps = useGetGlobalAttributes<DSControlledToggleT.InternalProps>(propsWithDefault, {\n onClick: handleOnClick,\n });\n const xstyledProps = useGetXstyledProps(propsWithDefault);\n const { id } = propsWithDefault;\n const instanceUid = React.useMemo(() => id || uid(5), [id]);\n // =============================================================================\n // HELPERS HOOKS CONFIGS\n // =============================================================================\n const { width, handleRefOnLabelWidth, handleRefOffLabelWidth } = useGetWidestLabelWidth();\n const buttonProps = useGetButtonProps({\n handleOnClick,\n globalProps,\n instanceUid,\n propsWithDefault,\n });\n\n return React.useMemo(\n () => ({\n propsWithDefault,\n width,\n handleRefOnLabelWidth,\n handleRefOffLabelWidth,\n globalProps,\n buttonProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n }),\n [\n propsWithDefault,\n width,\n handleRefOnLabelWidth,\n handleRefOffLabelWidth,\n globalProps,\n buttonProps,\n xstyledProps,\n instanceUid,\n handleOnClick,\n ],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAyF;AACzF,mBAAmC;AACnC,iBAAoB;AACpB,mCAAoF;AACpF,+BAAkC;AAClC,oCAAuC;AACvC,8BAAiC;AAE1B,MAAM,wBAAwB,CAAC,kBAA6C;AAIjF,QAAM,uBAAmB,sDAAgE,eAAe,yCAAY;AACpH,gDAAiB,kBAAkB,wDAA2B;AAI9D,QAAM,EAAE,UAAU,mBAAmB,UAAU,SAAS,IAAI;AAC5D,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAAgG;AAC/F,UAAI,YAAY,qBAAqB,SAAU;AAC/C,UAAI,UAAU;AACZ,iBAAS,CAAC;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,UAAU,mBAAmB,UAAU,QAAQ;AAAA,EAClD;AAIA,QAAM,kBAAc,gDAA0D,kBAAkB;AAAA,IAC9F,SAAS;AAAA,EACX,CAAC;AACD,QAAM,mBAAe,4CAAmB,gBAAgB;AACxD,QAAM,EAAE,GAAG,IAAI;AACf,QAAM,cAAc,aAAAA,QAAM,QAAQ,MAAM,UAAM,gBAAI,CAAC,GAAG,CAAC,EAAE,CAAC;AAI1D,QAAM,EAAE,OAAO,uBAAuB,uBAAuB,QAAI,sDAAuB;AACxF,QAAM,kBAAc,4CAAkB;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO,aAAAA,QAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
6
6
  "names": ["React"]
7
7
  }
@@ -26,16 +26,36 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
26
26
  mod
27
27
  ));
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var AddTooltipOnReadOnly_exports = {};
30
- __export(AddTooltipOnReadOnly_exports, {
31
- AddTooltipOnReadOnly: () => AddTooltipOnReadOnly
29
+ var useGetButtonProps_exports = {};
30
+ __export(useGetButtonProps_exports, {
31
+ useGetButtonProps: () => useGetButtonProps
32
32
  });
33
- module.exports = __toCommonJS(AddTooltipOnReadOnly_exports);
33
+ module.exports = __toCommonJS(useGetButtonProps_exports);
34
34
  var React = __toESM(require("react"));
35
- var import_jsx_runtime = require("react/jsx-runtime");
36
- var import_ds_tooltip_v3 = require("@elliemae/ds-tooltip-v3");
37
- const AddTooltipOnReadOnly = ({ readOnly, children }) => {
38
- if (readOnly) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip_v3.DSTooltipV3, { text: "Read Only", children });
39
- return children;
35
+ var import_react = require("react");
36
+ var import_constants = require("../constants/index.js");
37
+ const useGetButtonProps = (config) => {
38
+ const { globalProps, instanceUid, handleOnClick, propsWithDefault } = config;
39
+ const { checked, disabled, applyAriaDisabled, readOnly } = propsWithDefault;
40
+ const { size: _sizeCleanFromRest, shape: _shapeCleanFromRest, ...restGlobalProps } = globalProps;
41
+ const buttonProps = (0, import_react.useMemo)(
42
+ () => ({
43
+ role: "switch",
44
+ "data-testid": import_constants.CONTROLLED_TOGGLE_DATA_TESTID.TOGGLE_CHECKBOX,
45
+ id: instanceUid,
46
+ "aria-readonly": readOnly,
47
+ "aria-disabled": disabled || applyAriaDisabled || readOnly,
48
+ "aria-checked": checked,
49
+ "aria-describedby": `${instanceUid}_feedback_message ${instanceUid}_error_message`,
50
+ readOnly,
51
+ disabled,
52
+ ...restGlobalProps,
53
+ type: "button",
54
+ buttonType: "raw",
55
+ onClick: handleOnClick
56
+ }),
57
+ [instanceUid, readOnly, disabled, applyAriaDisabled, checked, restGlobalProps, handleOnClick]
58
+ );
59
+ return buttonProps;
40
60
  };
41
- //# sourceMappingURL=AddTooltipOnReadOnly.js.map
61
+ //# sourceMappingURL=useGetButtonProps.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/config/useGetButtonProps.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import type { GlobalAttributesT } from '@elliemae/ds-props-helpers';\nimport { useMemo } from 'react';\nimport { CONTROLLED_TOGGLE_DATA_TESTID } from '../constants/index.js';\nimport { type DSControlledToggleT } from '../react-desc-prop-types.js';\n\ninterface UseGetButtonPropsConfigT {\n handleOnClick: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n globalProps: GlobalAttributesT<HTMLButtonElement>;\n propsWithDefault: DSControlledToggleT.InternalProps;\n instanceUid: string;\n}\nexport const useGetButtonProps = (config: UseGetButtonPropsConfigT): DSControlledToggleT.ButtonV3InherithedProps => {\n const { globalProps, instanceUid, handleOnClick, propsWithDefault } = config;\n const { checked, disabled, applyAriaDisabled, readOnly } = propsWithDefault;\n\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const { size: _sizeCleanFromRest, shape: _shapeCleanFromRest, ...restGlobalProps } = globalProps;\n const buttonProps: DSControlledToggleT.ButtonV3InherithedProps = useMemo(\n () => ({\n role: 'switch',\n 'data-testid': CONTROLLED_TOGGLE_DATA_TESTID.TOGGLE_CHECKBOX,\n id: instanceUid,\n 'aria-readonly': readOnly,\n 'aria-disabled': disabled || applyAriaDisabled || readOnly,\n 'aria-checked': checked,\n 'aria-describedby': `${instanceUid}_feedback_message ${instanceUid}_error_message`,\n readOnly,\n disabled,\n ...restGlobalProps,\n type: 'button',\n buttonType: 'raw',\n onClick: handleOnClick,\n }),\n [instanceUid, readOnly, disabled, applyAriaDisabled, checked, restGlobalProps, handleOnClick],\n );\n return buttonProps;\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwB;AACxB,uBAA8C;AASvC,MAAM,oBAAoB,CAAC,WAAkF;AAClH,QAAM,EAAE,aAAa,aAAa,eAAe,iBAAiB,IAAI;AACtE,QAAM,EAAE,SAAS,UAAU,mBAAmB,SAAS,IAAI;AAG3D,QAAM,EAAE,MAAM,oBAAoB,OAAO,qBAAqB,GAAG,gBAAgB,IAAI;AACrF,QAAM,kBAA2D;AAAA,IAC/D,OAAO;AAAA,MACL,MAAM;AAAA,MACN,eAAe,+CAA8B;AAAA,MAC7C,IAAI;AAAA,MACJ,iBAAiB;AAAA,MACjB,iBAAiB,YAAY,qBAAqB;AAAA,MAClD,gBAAgB;AAAA,MAChB,oBAAoB,GAAG,WAAW,qBAAqB,WAAW;AAAA,MAClE;AAAA,MACA;AAAA,MACA,GAAG;AAAA,MACH,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,CAAC,aAAa,UAAU,UAAU,mBAAmB,SAAS,iBAAiB,aAAa;AAAA,EAC9F;AACA,SAAO;AACT;",
6
+ "names": []
7
+ }
@@ -26,11 +26,45 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
26
26
  mod
27
27
  ));
28
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var DSFormToggleDefinitions_exports = {};
30
- __export(DSFormToggleDefinitions_exports, {
31
- DSFormToggleName: () => DSFormToggleName
29
+ var useGetWidestLabelWidth_exports = {};
30
+ __export(useGetWidestLabelWidth_exports, {
31
+ useGetWidestLabelWidth: () => useGetWidestLabelWidth
32
32
  });
33
- module.exports = __toCommonJS(DSFormToggleDefinitions_exports);
33
+ module.exports = __toCommonJS(useGetWidestLabelWidth_exports);
34
34
  var React = __toESM(require("react"));
35
- const DSFormToggleName = "DSFormToggle";
36
- //# sourceMappingURL=DSFormToggleDefinitions.js.map
35
+ var import_lodash_es = require("lodash-es");
36
+ var import_react = __toESM(require("react"));
37
+ const useGetWidestLabelWidth = () => {
38
+ const [width, setWidth] = (0, import_react.useState)(0);
39
+ const onLabelWidthRef = (0, import_react.useRef)(68);
40
+ const offLabelWidthRef = (0, import_react.useRef)(68);
41
+ const setLongestWidth = import_react.default.useCallback(
42
+ (0, import_lodash_es.throttle)(
43
+ () => {
44
+ const longest = Math.max(onLabelWidthRef.current, offLabelWidthRef.current);
45
+ setWidth(longest);
46
+ },
47
+ 20,
48
+ { leading: false, trailing: true }
49
+ ),
50
+ []
51
+ );
52
+ const handleRefOnLabelWidth = import_react.default.useCallback(
53
+ (node) => {
54
+ const { clientWidth } = node || {};
55
+ onLabelWidthRef.current = clientWidth ?? onLabelWidthRef.current;
56
+ setLongestWidth();
57
+ },
58
+ [setLongestWidth]
59
+ );
60
+ const handleRefOffLabelWidth = import_react.default.useCallback(
61
+ (node) => {
62
+ const { clientWidth } = node || {};
63
+ offLabelWidthRef.current = clientWidth ?? offLabelWidthRef.current;
64
+ setLongestWidth();
65
+ },
66
+ [setLongestWidth]
67
+ );
68
+ return { width, handleRefOnLabelWidth, handleRefOffLabelWidth };
69
+ };
70
+ //# sourceMappingURL=useGetWidestLabelWidth.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/config/useGetWidestLabelWidth.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import { throttle } from 'lodash-es';\nimport React, { useState, useRef } from 'react';\n\n/**\n * This should not be required, we are doing this to keep the wcagViolationLabelOn/wcagViolationLabelOff working\n * this calculates the width of the widest custom label and sets the width of both labels to that width to avoid layout shift on toggle\n *\n * ---\n *\n * this can be safely removed in favor of a sensible default min-width for the accessible ON/OFF labels when we can actually kill the wcagViolationLabelOn/wcagViolationLabelOff props\n */\nexport const useGetWidestLabelWidth = () => {\n const [width, setWidth] = useState<number>(0);\n const onLabelWidthRef = useRef<number>(68);\n const offLabelWidthRef = useRef<number>(68);\n // typescript with debounce doesn't work well, so we need to disable the exhaustive deps rule here\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const setLongestWidth = React.useCallback(\n throttle(\n () => {\n const longest = Math.max(onLabelWidthRef.current, offLabelWidthRef.current);\n setWidth(longest);\n },\n 20,\n { leading: false, trailing: true },\n ),\n [],\n );\n const handleRefOnLabelWidth = React.useCallback<React.RefCallback<HTMLDivElement>>(\n (node) => {\n const { clientWidth } = node || {};\n onLabelWidthRef.current = clientWidth ?? onLabelWidthRef.current;\n setLongestWidth();\n },\n [setLongestWidth],\n );\n const handleRefOffLabelWidth = React.useCallback<React.RefCallback<HTMLDivElement>>(\n (node) => {\n const { clientWidth } = node || {};\n offLabelWidthRef.current = clientWidth ?? offLabelWidthRef.current;\n setLongestWidth();\n },\n [setLongestWidth],\n );\n return { width, handleRefOnLabelWidth, handleRefOffLabelWidth };\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAyB;AACzB,mBAAwC;AAUjC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAiB,CAAC;AAC5C,QAAM,sBAAkB,qBAAe,EAAE;AACzC,QAAM,uBAAmB,qBAAe,EAAE;AAG1C,QAAM,kBAAkB,aAAAA,QAAM;AAAA,QAC5B;AAAA,MACE,MAAM;AACJ,cAAM,UAAU,KAAK,IAAI,gBAAgB,SAAS,iBAAiB,OAAO;AAC1E,iBAAS,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,EAAE,SAAS,OAAO,UAAU,KAAK;AAAA,IACnC;AAAA,IACA,CAAC;AAAA,EACH;AACA,QAAM,wBAAwB,aAAAA,QAAM;AAAA,IAClC,CAAC,SAAS;AACR,YAAM,EAAE,YAAY,IAAI,QAAQ,CAAC;AACjC,sBAAgB,UAAU,eAAe,gBAAgB;AACzD,sBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AACA,QAAM,yBAAyB,aAAAA,QAAM;AAAA,IACnC,CAAC,SAAS;AACR,YAAM,EAAE,YAAY,IAAI,QAAQ,CAAC;AACjC,uBAAiB,UAAU,eAAe,iBAAiB;AAC3D,sBAAgB;AAAA,IAClB;AAAA,IACA,CAAC,eAAe;AAAA,EAClB;AACA,SAAO,EAAE,OAAO,uBAAuB,uBAAuB;AAChE;",
6
+ "names": ["React"]
7
+ }
@@ -30,19 +30,32 @@ var constants_exports = {};
30
30
  __export(constants_exports, {
31
31
  CONTROLLED_TOGGLE_DATA_TESTID: () => CONTROLLED_TOGGLE_DATA_TESTID,
32
32
  CONTROLLED_TOGGLE_SLOTS: () => CONTROLLED_TOGGLE_SLOTS,
33
- DSControlledToggleName: () => DSControlledToggleName
33
+ DSControlledToggleName: () => DSControlledToggleName,
34
+ TOGGLE_SIZES: () => TOGGLE_SIZES
34
35
  });
35
36
  module.exports = __toCommonJS(constants_exports);
36
37
  var React = __toESM(require("react"));
37
38
  var import_ds_system = require("@elliemae/ds-system");
38
- const DSControlledToggleName = "DSControlledtoggle";
39
+ const DSControlledToggleName = "DSFormtoggle";
39
40
  const CONTROLLED_TOGGLE_SLOTS = {
40
- CONTROLLED_CONTAINER: "container",
41
+ CONTAINER_WITH_RADIUS_SHAPE: "container-with-radius-shape",
42
+ BUTTON_CONTENT_WRAPPER: "button-content-wrapper",
43
+ CIRCLE: "circle",
44
+ TEXT_WRAPPER: "text-wrapper",
45
+ // legacy ones...
46
+ CONTROLLED_CONTAINER: "controlled-container",
47
+ // in other components this is the ROOT
41
48
  TOGGLE_CHECKBOX: "toggle-checkbox"
42
49
  };
43
50
  const CONTROLLED_TOGGLE_DATA_TESTID = {
44
51
  ...(0, import_ds_system.slotObjectToDataTestIds)(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),
45
52
  CONTROLLED_CONTAINER: "ds-controlled-toggle",
53
+ // in other components this is the ROOT
46
54
  TOGGLE_CHECKBOX: "ds-controlled-toggle-checkbox"
47
55
  };
56
+ const TOGGLE_SIZES = {
57
+ SMALL: "s",
58
+ MEDIUM: "m",
59
+ LARGE: "l"
60
+ };
48
61
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/constants/index.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSControlledToggleName = 'DSControlledtoggle';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_SLOTS = {\n CONTROLLED_CONTAINER: 'container',\n TOGGLE_CHECKBOX: 'toggle-checkbox',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n CONTROLLED_CONTAINER: 'ds-controlled-toggle',\n TOGGLE_CHECKBOX: 'ds-controlled-toggle-checkbox',\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,yBAAyB;AAG/B,MAAM,0BAA0B;AAAA,EACrC,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,OAAG,0CAAwB,wBAAwB,uBAAuB;AAAA,EAC1E,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;",
4
+ "sourcesContent": ["import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSControlledToggleName = 'DSFormtoggle';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_SLOTS = {\n CONTAINER_WITH_RADIUS_SHAPE: 'container-with-radius-shape',\n BUTTON_CONTENT_WRAPPER: 'button-content-wrapper',\n CIRCLE: 'circle',\n TEXT_WRAPPER: 'text-wrapper',\n // legacy ones...\n CONTROLLED_CONTAINER: 'controlled-container', // in other components this is the ROOT\n TOGGLE_CHECKBOX: 'toggle-checkbox',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const CONTROLLED_TOGGLE_DATA_TESTID = {\n ...slotObjectToDataTestIds(DSControlledToggleName, CONTROLLED_TOGGLE_SLOTS),\n CONTROLLED_CONTAINER: 'ds-controlled-toggle', // in other components this is the ROOT\n TOGGLE_CHECKBOX: 'ds-controlled-toggle-checkbox',\n};\n\n// Specific of the toggle component\n\nexport const TOGGLE_SIZES = {\n SMALL: 's',\n MEDIUM: 'm',\n LARGE: 'l',\n} as const;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,yBAAyB;AAG/B,MAAM,0BAA0B;AAAA,EACrC,6BAA6B;AAAA,EAC7B,wBAAwB;AAAA,EACxB,QAAQ;AAAA,EACR,cAAc;AAAA;AAAA,EAEd,sBAAsB;AAAA;AAAA,EACtB,iBAAiB;AACnB;AAGO,MAAM,gCAAgC;AAAA,EAC3C,OAAG,0CAAwB,wBAAwB,uBAAuB;AAAA,EAC1E,sBAAsB;AAAA;AAAA,EACtB,iBAAiB;AACnB;AAIO,MAAM,eAAe;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;",
6
6
  "names": []
7
7
  }
package/dist/cjs/index.js CHANGED
@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
5
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
6
  var __getProtoOf = Object.getPrototypeOf;
7
7
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
8
12
  var __copyProps = (to, from, except, desc) => {
9
13
  if (from && typeof from === "object" || typeof from === "function") {
10
14
  for (let key of __getOwnPropNames(from))
@@ -13,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
13
17
  }
14
18
  return to;
15
19
  };
16
- var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
17
20
  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
18
21
  // If the importer is in node compatibility mode or this is not an ESM
19
22
  // file that has been converted to a CommonJS file using a Babel-
@@ -24,7 +27,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
24
27
  ));
25
28
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
26
29
  var index_exports = {};
30
+ __export(index_exports, {
31
+ DSControlledToggle: () => import_ControlledToggle.DSControlledToggle,
32
+ DSControlledToggleWithSchema: () => import_ControlledToggle.DSControlledToggleWithSchema,
33
+ TOGGLE_SIZES: () => import_constants.TOGGLE_SIZES
34
+ });
27
35
  module.exports = __toCommonJS(index_exports);
28
36
  var React = __toESM(require("react"));
29
- __reExport(index_exports, require("./ControlledToggle.js"), module.exports);
37
+ var import_ControlledToggle = require("./ControlledToggle.js");
38
+ var import_constants = require("./constants/index.js");
30
39
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.ts", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["export * from './ControlledToggle.js';\nexport type { DSControlledToggleT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAAc,kCAAd;",
4
+ "sourcesContent": ["export { DSControlledToggle, DSControlledToggleWithSchema } from './ControlledToggle.js';\nexport { TOGGLE_SIZES } from './constants/index.js';\nexport type { DSControlledToggleT } from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,8BAAiE;AACjE,uBAA6B;",
6
6
  "names": []
7
7
  }
@@ -35,14 +35,11 @@ __export(react_desc_prop_types_exports, {
35
35
  module.exports = __toCommonJS(react_desc_prop_types_exports);
36
36
  var React = __toESM(require("react"));
37
37
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
38
+ var import_constants = require("./constants/index.js");
38
39
  const defaultProps = {
39
- labelOn: "ON",
40
- labelOff: "OFF",
41
- name: "",
42
- value: "",
43
40
  checked: false,
44
41
  onChange: () => null,
45
- size: "m",
42
+ size: import_constants.TOGGLE_SIZES.MEDIUM,
46
43
  readOnly: false,
47
44
  disabled: false,
48
45
  applyAriaDisabled: false
@@ -50,20 +47,18 @@ const defaultProps = {
50
47
  const DSControlledTogglePropTypes = {
51
48
  ...import_ds_props_helpers.globalAttributesPropTypes,
52
49
  ...import_ds_props_helpers.xstyledPropTypes,
53
- labelOn: import_ds_props_helpers.PropTypes.string.description("Label when toggle is checked").deprecated({ version: "25.3" }),
54
- labelOff: import_ds_props_helpers.PropTypes.string.description("Label when toggle is unchecked").deprecated({ version: "25.3" }),
55
- value: import_ds_props_helpers.PropTypes.string.description("Value attribute for toggle").deprecated({ version: "25.3" }),
56
- name: import_ds_props_helpers.PropTypes.string.description("Name attribute for toggle").deprecated({ version: "25.3" }),
57
- checked: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is checked or not"),
58
- onChange: import_ds_props_helpers.PropTypes.func.description("OnClick callback"),
59
- size: import_ds_props_helpers.PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle"),
60
- readOnly: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is readOnly or not"),
61
- disabled: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is disabled or not"),
50
+ checked: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is checked or not").defaultValue("false"),
51
+ onChange: import_ds_props_helpers.PropTypes.func.description("OnClick callback").defaultValue("() => null"),
52
+ size: import_ds_props_helpers.PropTypes.oneOf(["s", "m", "l"]).description("Size of toggle").defaultValue(import_constants.TOGGLE_SIZES.MEDIUM),
53
+ disabled: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is disabled or not").defaultValue("false"),
62
54
  applyAriaDisabled: import_ds_props_helpers.PropTypes.bool.description(
63
55
  "Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION."
64
- ).defaultValue(false),
65
- containerProps: import_ds_props_helpers.PropTypes.shape({}).description("Set of properties attached to the main container"),
66
- id: import_ds_props_helpers.PropTypes.string.description("Unique id.")
56
+ ).defaultValue("false"),
57
+ readOnly: import_ds_props_helpers.PropTypes.bool.description("Wether the toggle is readOnly or not").defaultValue("false"),
58
+ containerProps: import_ds_props_helpers.PropTypes.object.description("Set of properties attached to the main container"),
59
+ id: import_ds_props_helpers.PropTypes.string.description("Unique id."),
60
+ labelOn: import_ds_props_helpers.PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" }),
61
+ labelOff: import_ds_props_helpers.PropTypes.string.description("Past deprecation ETA, this fails WCAG, switch to appropiate designs").deprecated({ version: "25.3" })
67
62
  };
68
63
  const DSControlledTogglePropTypesSchema = DSControlledTogglePropTypes;
69
64
  //# sourceMappingURL=react-desc-prop-types.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = 's' | 'm' | 'l';\n\n export interface OptionalProps {\n containerProps: Record<string, unknown>;\n id: string;\n }\n\n export interface DefaultProps {\n labelOn: string;\n labelOff: string;\n name: string;\n value: string;\n checked: boolean;\n onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n labelOn: 'ON',\n labelOff: 'OFF',\n name: '',\n value: '',\n checked: false,\n onChange: () => null,\n size: 'm',\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<DSControlledToggleT.Props> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n labelOn: PropTypes.string.description('Label when toggle is checked').deprecated({ version: '25.3' }),\n labelOff: PropTypes.string.description('Label when toggle is unchecked').deprecated({ version: '25.3' }),\n value: PropTypes.string.description('Value attribute for toggle').deprecated({ version: '25.3' }),\n name: PropTypes.string.description('Name attribute for toggle').deprecated({ version: '25.3' }),\n checked: PropTypes.bool.description('Wether the toggle is checked or not'),\n onChange: PropTypes.func.description('OnClick callback'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle'),\n readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not'),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue(false),\n containerProps: PropTypes.shape({}).description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,8BAAuE;AAoChE,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,OAAO,YAAY,8BAA8B,EAAE,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACpG,UAAU,kCAAU,OAAO,YAAY,gCAAgC,EAAE,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACvG,OAAO,kCAAU,OAAO,YAAY,4BAA4B,EAAE,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EAChG,MAAM,kCAAU,OAAO,YAAY,2BAA2B,EAAE,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EAC9F,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA,EACzE,UAAU,kCAAU,KAAK,YAAY,kBAAkB;AAAA,EACvD,MAAM,kCAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB;AAAA,EACnE,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,UAAU,kCAAU,KAAK,YAAY,sCAAsC;AAAA,EAC3E,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,KAAK;AAAA,EACrB,gBAAgB,kCAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAClG,IAAI,kCAAU,OAAO,YAAY,YAAY;AAC/C;AAEO,MAAM,oCACX;",
4
+ "sourcesContent": ["import type { DSButtonV3T } from '@elliemae/ds-button-v2';\nimport type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { TOGGLE_SIZES } from './constants/index.js';\n\nexport declare namespace DSControlledToggleT {\n export type ToggleSize = ObjectValues<typeof TOGGLE_SIZES>;\n\n export interface DefaultProps {\n checked: boolean;\n onChange: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;\n size: ToggleSize;\n readOnly: boolean;\n disabled: boolean;\n applyAriaDisabled: boolean;\n }\n\n export interface RequiredProps {}\n\n export interface OptionalProps {\n containerProps?: Record<string, unknown>;\n id?: string;\n }\n\n // this interface is the \"last chance\" for apps to keep using the deprecated props before the major release that will remove them\n // this is meant to \"break\" those using the old prop, but still allow a last chance to gradually update (requiring them to change the prop name)\n export interface PostDeprecationETAPropsFallback {\n /**\n * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOn?: string; // used to be \"labelOn\"\n /**\n * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n wcagViolationLabelOff?: string; // used to be \"labelOff\"\n }\n export interface PostDeprecationETAProps {\n /**\n * @deprecated a custom wcagViolationLabelOn violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n labelOn?: string; // used to be \"labelOn\"\n /**\n * @deprecated a custom wcagViolationLabelOff violates the role='switch' by design and it's impossible to make it WCAG compliant.\n * Do not use it, if you need a custom label, you don't need a toggle, use a checkbox instead.\n */\n labelOff?: string; // used to be \"labelOff\"\n }\n\n export interface ButtonV3InherithedProps extends Omit<DSButtonV3T.Props, 'size' | 'children'> {}\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps,\n PostDeprecationETAProps,\n PostDeprecationETAPropsFallback {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof XstyledProps>,\n XstyledProps,\n RequiredProps,\n PostDeprecationETAProps,\n PostDeprecationETAPropsFallback {}\n}\n\nexport const defaultProps: DSControlledToggleT.DefaultProps = {\n checked: false,\n onChange: () => null,\n size: TOGGLE_SIZES.MEDIUM,\n readOnly: false,\n disabled: false,\n applyAriaDisabled: false,\n};\n\nexport const DSControlledTogglePropTypes: DSPropTypesSchema<\n Omit<DSControlledToggleT.Props, keyof DSControlledToggleT.PostDeprecationETAPropsFallback> &\n DSControlledToggleT.PostDeprecationETAProps\n> = {\n ...globalAttributesPropTypes,\n ...xstyledPropTypes,\n checked: PropTypes.bool.description('Wether the toggle is checked or not').defaultValue('false'),\n onChange: PropTypes.func.description('OnClick callback').defaultValue('() => null'),\n size: PropTypes.oneOf(['s', 'm', 'l']).description('Size of toggle').defaultValue(TOGGLE_SIZES.MEDIUM),\n disabled: PropTypes.bool.description('Wether the toggle is disabled or not').defaultValue('false'),\n applyAriaDisabled: PropTypes.bool\n .description(\n 'Whether to apply disabled styling and announce as disabled in SR. CAN STILL RECEIVE FOCUS. PREVENTS ONLY MAIN ACTION.',\n )\n .defaultValue('false'),\n readOnly: PropTypes.bool.description('Wether the toggle is readOnly or not').defaultValue('false'),\n containerProps: PropTypes.object.description('Set of properties attached to the main container'),\n id: PropTypes.string.description('Unique id.'),\n labelOn: PropTypes.string\n .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n .deprecated({ version: '25.3' }),\n labelOff: PropTypes.string\n .description('Past deprecation ETA, this fails WCAG, switch to appropiate designs')\n .deprecated({ version: '25.3' }),\n};\n\nexport const DSControlledTogglePropTypesSchema =\n DSControlledTogglePropTypes as unknown as ValidationMap<DSControlledToggleT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAAuE;AACvE,uBAA6B;AAqEtB,MAAM,eAAiD;AAAA,EAC5D,SAAS;AAAA,EACT,UAAU,MAAM;AAAA,EAChB,MAAM,8BAAa;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,mBAAmB;AACrB;AAEO,MAAM,8BAGT;AAAA,EACF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,SAAS,kCAAU,KAAK,YAAY,qCAAqC,EAAE,aAAa,OAAO;AAAA,EAC/F,UAAU,kCAAU,KAAK,YAAY,kBAAkB,EAAE,aAAa,YAAY;AAAA,EAClF,MAAM,kCAAU,MAAM,CAAC,KAAK,KAAK,GAAG,CAAC,EAAE,YAAY,gBAAgB,EAAE,aAAa,8BAAa,MAAM;AAAA,EACrG,UAAU,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EACjG,mBAAmB,kCAAU,KAC1B;AAAA,IACC;AAAA,EACF,EACC,aAAa,OAAO;AAAA,EACvB,UAAU,kCAAU,KAAK,YAAY,sCAAsC,EAAE,aAAa,OAAO;AAAA,EACjG,gBAAgB,kCAAU,OAAO,YAAY,kDAAkD;AAAA,EAC/F,IAAI,kCAAU,OAAO,YAAY,YAAY;AAAA,EAC7C,SAAS,kCAAU,OAChB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AAAA,EACjC,UAAU,kCAAU,OACjB,YAAY,qEAAqE,EACjF,WAAW,EAAE,SAAS,OAAO,CAAC;AACnC;AAEO,MAAM,oCACX;",
6
6
  "names": []
7
7
  }