@elliemae/ds-form 3.16.0 → 3.16.1

package/dist/esm/TimeInput/DSTimeInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TimeInput/DSTimeInput.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSInput } from '../Input';\nimport { TimeInputImpl } from './TimeInputImpl';\n\nconst DSTimeInput = ({\n  containerProps = {},\n  innerRef,\n  className = '',\n  style = {},\n  onChange = () => null,\n  format,\n  value = '',\n  clearable = false,\n  disabled = false,\n  ariaLabel = 'Time input',\n}) => (\n  <DSInput\n    className={className}\n    clearable={clearable}\n    containerProps={containerProps}\n    customInputType={({ onChange: inputOnChange, ...restInputProps }) => (\n      <TimeInputImpl\n        aria-label={ariaLabel}\n        disabled={disabled}\n        format={format}\n        onChange={(time) => inputOnChange(time)}\n        {...restInputProps}\n        style={style}\n      />\n    )}\n    disabled={disabled}\n    innerRef={innerRef}\n    isShowElipsisActive={false}\n    onChange={onChange}\n    onClear={() => onChange(null)}\n    value={value}\n  />\n);\n\nDSTimeInput.defaultProps = {\n  format: 'hh:mm:ss',\n  disabled: false,\n  clearable: true,\n};\n\nconst props = {\n  /** Injected props to wrapper element of component */\n  containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n  /**\n   * Allows a function that is triggered once the time input changes\n   */\n  onChange: PropTypes.func.description('Allows a function that is triggered once the time input changes'),\n  /** a11y aria label */\n  'aria-label': PropTypes.string.description('a11y aria label'),\n  /** style object for time input wrapper */\n  style: PropTypes.object.description('style object for time input wrapper'),\n  /** inner ref for time inpot wrapper */\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'inner ref for time input wrapper',\n  ),\n  /** class for time input */\n  className: PropTypes.string.description('class for time input'),\n  /**\n   * Valid time format\n   */\n  format: PropTypes.string.description('Valid time format'),\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string.description('Default value once the component is initialized'),\n  /**\n   * Whether the time input is clearable or not\n   */\n  clearable: PropTypes.bool.description('Whether the time input is clearable or not'),\n  /**\n   * Whether the time input is disabled or not\n   */\n  disabled: PropTypes.bool.description('Whether the time input is disabled or not'),\n  /**\n   * Aria label\n   */\n  ariaLabel: PropTypes.string.description('Aria label'),\n};\n\nDSTimeInput.propTypes = props;\nDSTimeInput.displayName = 'DSTimeInput';\nconst DSTimeInputWithSchema = describe(DSTimeInput);\nDSTimeInputWithSchema.propTypes = props;\n\nexport { TimeInputImpl, DSTimeInputWithSchema, DSTimeInput };\n\nexport default DSTimeInput;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsBjB;AArBN,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAE9B,MAAM,cAAc,CAAC;AAAA,EACnB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AAAA,EACT,WAAW,MAAM;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AACd,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,CAAC,EAAE,UAAU,kBAAkB,eAAe,MAC7D;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,UAAU,CAAC,SAAS,cAAc,IAAI;AAAA,QACrC,GAAG;AAAA,QACJ;AAAA;AAAA,IACF;AAAA,IAEF;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,IACA,SAAS,MAAM,SAAS,IAAI;AAAA,IAC5B;AAAA;AACF;AAGF,YAAY,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AACb;AAEA,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,gDAAgD;AAAA,EAI7F,UAAU,UAAU,KAAK,YAAY,iEAAiE;AAAA,EAEtG,cAAc,UAAU,OAAO,YAAY,iBAAiB;AAAA,EAE5D,OAAO,UAAU,OAAO,YAAY,qCAAqC;AAAA,EAEzE,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA,EAEA,WAAW,UAAU,OAAO,YAAY,sBAAsB;AAAA,EAI9D,QAAQ,UAAU,OAAO,YAAY,mBAAmB;AAAA,EAIxD,OAAO,UAAU,OAAO,YAAY,iDAAiD;AAAA,EAIrF,WAAW,UAAU,KAAK,YAAY,4CAA4C;AAAA,EAIlF,UAAU,UAAU,KAAK,YAAY,2CAA2C;AAAA,EAIhF,WAAW,UAAU,OAAO,YAAY,YAAY;AACtD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSInput } from '../Input/index.js';\nimport { TimeInputImpl } from './TimeInputImpl.js';\n\nconst DSTimeInput = ({\n  containerProps = {},\n  innerRef,\n  className = '',\n  style = {},\n  onChange = () => null,\n  format,\n  value = '',\n  clearable = false,\n  disabled = false,\n  ariaLabel = 'Time input',\n}) => (\n  <DSInput\n    className={className}\n    clearable={clearable}\n    containerProps={containerProps}\n    customInputType={({ onChange: inputOnChange, ...restInputProps }) => (\n      <TimeInputImpl\n        aria-label={ariaLabel}\n        disabled={disabled}\n        format={format}\n        onChange={(time) => inputOnChange(time)}\n        {...restInputProps}\n        style={style}\n      />\n    )}\n    disabled={disabled}\n    innerRef={innerRef}\n    isShowElipsisActive={false}\n    onChange={onChange}\n    onClear={() => onChange(null)}\n    value={value}\n  />\n);\n\nDSTimeInput.defaultProps = {\n  format: 'hh:mm:ss',\n  disabled: false,\n  clearable: true,\n};\n\nconst props = {\n  /** Injected props to wrapper element of component */\n  containerProps: PropTypes.object.description('Injected props to wrapper element of component'),\n  /**\n   * Allows a function that is triggered once the time input changes\n   */\n  onChange: PropTypes.func.description('Allows a function that is triggered once the time input changes'),\n  /** a11y aria label */\n  'aria-label': PropTypes.string.description('a11y aria label'),\n  /** style object for time input wrapper */\n  style: PropTypes.object.description('style object for time input wrapper'),\n  /** inner ref for time inpot wrapper */\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]).description(\n    'inner ref for time input wrapper',\n  ),\n  /** class for time input */\n  className: PropTypes.string.description('class for time input'),\n  /**\n   * Valid time format\n   */\n  format: PropTypes.string.description('Valid time format'),\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string.description('Default value once the component is initialized'),\n  /**\n   * Whether the time input is clearable or not\n   */\n  clearable: PropTypes.bool.description('Whether the time input is clearable or not'),\n  /**\n   * Whether the time input is disabled or not\n   */\n  disabled: PropTypes.bool.description('Whether the time input is disabled or not'),\n  /**\n   * Aria label\n   */\n  ariaLabel: PropTypes.string.description('Aria label'),\n};\n\nDSTimeInput.propTypes = props;\nDSTimeInput.displayName = 'DSTimeInput';\nconst DSTimeInputWithSchema = describe(DSTimeInput);\nDSTimeInputWithSchema.propTypes = props;\n\nexport { TimeInputImpl, DSTimeInputWithSchema, DSTimeInput };\n\nexport default DSTimeInput;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBjB;AArBN,SAAS,WAAW,gBAAgB;AACpC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAE9B,MAAM,cAAc,CAAC;AAAA,EACnB,iBAAiB,CAAC;AAAA,EAClB;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ,CAAC;AAAA,EACT,WAAW,MAAM;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AACd,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB,CAAC,EAAE,UAAU,eAAe,GAAG,eAAe,MAC7D;AAAA,MAAC;AAAA;AAAA,QACC,cAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,UAAU,CAAC,SAAS,cAAc,IAAI;AAAA,QACrC,GAAG;AAAA,QACJ;AAAA;AAAA,IACF;AAAA,IAEF;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,IACA,SAAS,MAAM,SAAS,IAAI;AAAA,IAC5B;AAAA;AACF;AAGF,YAAY,eAAe;AAAA,EACzB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AACb;AAEA,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,gDAAgD;AAAA;AAAA;AAAA;AAAA,EAI7F,UAAU,UAAU,KAAK,YAAY,iEAAiE;AAAA;AAAA,EAEtG,cAAc,UAAU,OAAO,YAAY,iBAAiB;AAAA;AAAA,EAE5D,OAAO,UAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA,EAEzE,UAAU,UAAU,UAAU,CAAC,UAAU,MAAM,UAAU,MAAM,EAAE,SAAS,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE;AAAA,IAC3F;AAAA,EACF;AAAA;AAAA,EAEA,WAAW,UAAU,OAAO,YAAY,sBAAsB;AAAA;AAAA;AAAA;AAAA,EAI9D,QAAQ,UAAU,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAIxD,OAAO,UAAU,OAAO,YAAY,iDAAiD;AAAA;AAAA;AAAA;AAAA,EAIrF,WAAW,UAAU,KAAK,YAAY,4CAA4C;AAAA;AAAA;AAAA;AAAA,EAIlF,UAAU,UAAU,KAAK,YAAY,2CAA2C;AAAA;AAAA;AAAA;AAAA,EAIhF,WAAW,UAAU,OAAO,YAAY,YAAY;AACtD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,wBAAwB,SAAS,WAAW;AAClD,sBAAsB,YAAY;AAIlC,IAAO,sBAAQ;",
   "names": []
 }

package/dist/esm/TimeInput/TimeInputImpl.js

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { getVisibleTimeByFormat } from "@elliemae/ds-utilities";
 import memoizeOne from "memoize-one";
 import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { TimeInputs } from "./TimeInputs";
+import { TimeInputs } from "./TimeInputs.js";
 const blockName = "input-time";
 const InputTimeContainer = aggregatedClasses("div")(blockName);
 const TimeInputImpl = ({
@@ -44,14 +44,41 @@ const TimeInputImpl = ({
 };
 TimeInputImpl.propTypes = {
   containerProps: PropTypes.shape({}),
+  /**
+   * Inner reference to the input
+   */
   innerRef: PropTypes.any,
+  /**
+   * Classes to add to the container
+   */
   className: PropTypes.string,
+  /**
+   * Styles to add to the container
+   */
   style: PropTypes.shape({}),
+  /**
+   * Allows a function that is triggered once the time input changes
+   */
   onChange: PropTypes.func,
+  /**
+   * Valid time format
+   */
   format: PropTypes.string,
+  /**
+   * Default value once the component is initialized
+   */
   value: PropTypes.string,
+  /**
+   * Whether the time input is clearable or not
+   */
   clearable: PropTypes.bool,
+  /**
+   * Whether the time input is disabled or not
+   */
   disabled: PropTypes.bool,
+  /**
+   * Aria label to add to the container
+   */
   "aria-label": PropTypes.bool,
   "arial-label": PropTypes.bool
 };

package/dist/esm/TimeInput/TimeInputImpl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TimeInput/TimeInputImpl.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { getVisibleTimeByFormat } from '@elliemae/ds-utilities';\nimport memoizeOne from 'memoize-one';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { TimeInputs } from './TimeInputs';\n\nconst blockName = 'input-time';\n\nconst InputTimeContainer = aggregatedClasses('div')(blockName);\n\nconst TimeInputImpl = ({\n  format,\n  innerRef,\n  onChange,\n  className,\n  value,\n  disabled,\n  clearable,\n  'arial-label': ariaLabel,\n}) => {\n  const getVisibleTimeInputs = memoizeOne((formatValue) => getVisibleTimeByFormat(formatValue));\n  let inputsContainer = useRef();\n\n  const handleFocus = (e) => {\n    if (!e.target.type) {\n      inputsContainer.querySelector('input').focus();\n    }\n  };\n\n  const visibleInputs = useMemo(() => getVisibleTimeInputs(format));\n\n  return (\n    <InputTimeContainer className={className} disabled={disabled} innerRef={innerRef} onClick={handleFocus}>\n      <TimeInputs\n        aria-label={ariaLabel}\n        clearable={clearable}\n        disabled={disabled}\n        format={format}\n        innerRef={(node) => {\n          inputsContainer = node;\n        }}\n        onChange={onChange}\n        time={value}\n        {...visibleInputs}\n      />\n    </InputTimeContainer>\n  );\n};\n\nTimeInputImpl.propTypes = {\n  containerProps: PropTypes.shape({}),\n  /**\n   * Inner reference to the input\n   */\n  innerRef: PropTypes.any,\n  /**\n   * Classes to add to the container\n   */\n  className: PropTypes.string,\n  /**\n   * Styles to add to the container\n   */\n  style: PropTypes.shape({}),\n  /**\n   * Allows a function that is triggered once the time input changes\n   */\n  onChange: PropTypes.func,\n  /**\n   * Valid time format\n   */\n  format: PropTypes.string,\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string,\n  /**\n   * Whether the time input is clearable or not\n   */\n  clearable: PropTypes.bool,\n  /**\n   * Whether the time input is disabled or not\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Aria label to add to the container\n   */\n  'aria-label': PropTypes.bool,\n  'arial-label': PropTypes.bool,\n};\n\nexport { TimeInputImpl };\nexport default TimeInputImpl;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkCjB;AAlCN,SAAgB,QAAQ,eAAe;AACvC,OAAO,eAAe;AACtB,SAAS,8BAA8B;AACvC,OAAO,gBAAgB;AACvB,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAE3B,MAAM,YAAY;AAElB,MAAM,qBAAqB,kBAAkB,KAAK,EAAE,SAAS;AAE7D,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,uBAAuB,WAAW,CAAC,gBAAgB,uBAAuB,WAAW,CAAC;AAC5F,MAAI,kBAAkB,OAAO;AAE7B,QAAM,cAAc,CAAC,MAAM;AACzB,QAAI,CAAC,EAAE,OAAO,MAAM;AAClB,sBAAgB,cAAc,OAAO,EAAE,MAAM;AAAA,IAC/C;AAAA,EACF;AAEA,QAAM,gBAAgB,QAAQ,MAAM,qBAAqB,MAAM,CAAC;AAEhE,SACE,oBAAC,sBAAmB,WAAsB,UAAoB,UAAoB,SAAS,aACzF;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,SAAS;AAClB,0BAAkB;AAAA,MACpB;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACL,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,gBAAgB,UAAU,MAAM,CAAC,CAAC;AAAA,EAIlC,UAAU,UAAU;AAAA,EAIpB,WAAW,UAAU;AAAA,EAIrB,OAAO,UAAU,MAAM,CAAC,CAAC;AAAA,EAIzB,UAAU,UAAU;AAAA,EAIpB,QAAQ,UAAU;AAAA,EAIlB,OAAO,UAAU;AAAA,EAIjB,WAAW,UAAU;AAAA,EAIrB,UAAU,UAAU;AAAA,EAIpB,cAAc,UAAU;AAAA,EACxB,eAAe,UAAU;AAC3B;AAGA,IAAO,wBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport { getVisibleTimeByFormat } from '@elliemae/ds-utilities';\nimport memoizeOne from 'memoize-one';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { TimeInputs } from './TimeInputs.js';\n\nconst blockName = 'input-time';\n\nconst InputTimeContainer = aggregatedClasses('div')(blockName);\n\nconst TimeInputImpl = ({\n  format,\n  innerRef,\n  onChange,\n  className,\n  value,\n  disabled,\n  clearable,\n  'arial-label': ariaLabel,\n}) => {\n  const getVisibleTimeInputs = memoizeOne((formatValue) => getVisibleTimeByFormat(formatValue));\n  let inputsContainer = useRef();\n\n  const handleFocus = (e) => {\n    if (!e.target.type) {\n      inputsContainer.querySelector('input').focus();\n    }\n  };\n\n  const visibleInputs = useMemo(() => getVisibleTimeInputs(format));\n\n  return (\n    <InputTimeContainer className={className} disabled={disabled} innerRef={innerRef} onClick={handleFocus}>\n      <TimeInputs\n        aria-label={ariaLabel}\n        clearable={clearable}\n        disabled={disabled}\n        format={format}\n        innerRef={(node) => {\n          inputsContainer = node;\n        }}\n        onChange={onChange}\n        time={value}\n        {...visibleInputs}\n      />\n    </InputTimeContainer>\n  );\n};\n\nTimeInputImpl.propTypes = {\n  containerProps: PropTypes.shape({}),\n  /**\n   * Inner reference to the input\n   */\n  innerRef: PropTypes.any,\n  /**\n   * Classes to add to the container\n   */\n  className: PropTypes.string,\n  /**\n   * Styles to add to the container\n   */\n  style: PropTypes.shape({}),\n  /**\n   * Allows a function that is triggered once the time input changes\n   */\n  onChange: PropTypes.func,\n  /**\n   * Valid time format\n   */\n  format: PropTypes.string,\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string,\n  /**\n   * Whether the time input is clearable or not\n   */\n  clearable: PropTypes.bool,\n  /**\n   * Whether the time input is disabled or not\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Aria label to add to the container\n   */\n  'aria-label': PropTypes.bool,\n  'arial-label': PropTypes.bool,\n};\n\nexport { TimeInputImpl };\nexport default TimeInputImpl;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCjB;AAlCN,SAAgB,QAAQ,eAAe;AACvC,OAAO,eAAe;AACtB,SAAS,8BAA8B;AACvC,OAAO,gBAAgB;AACvB,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAE3B,MAAM,YAAY;AAElB,MAAM,qBAAqB,kBAAkB,KAAK,EAAE,SAAS;AAE7D,MAAM,gBAAgB,CAAC;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,uBAAuB,WAAW,CAAC,gBAAgB,uBAAuB,WAAW,CAAC;AAC5F,MAAI,kBAAkB,OAAO;AAE7B,QAAM,cAAc,CAAC,MAAM;AACzB,QAAI,CAAC,EAAE,OAAO,MAAM;AAClB,sBAAgB,cAAc,OAAO,EAAE,MAAM;AAAA,IAC/C;AAAA,EACF;AAEA,QAAM,gBAAgB,QAAQ,MAAM,qBAAqB,MAAM,CAAC;AAEhE,SACE,oBAAC,sBAAmB,WAAsB,UAAoB,UAAoB,SAAS,aACzF;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,SAAS;AAClB,0BAAkB;AAAA,MACpB;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACL,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAEA,cAAc,YAAY;AAAA,EACxB,gBAAgB,UAAU,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAIlC,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpB,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,EAIrB,OAAO,UAAU,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAIzB,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpB,QAAQ,UAAU;AAAA;AAAA;AAAA;AAAA,EAIlB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjB,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,EAIrB,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpB,cAAc,UAAU;AAAA,EACxB,eAAe,UAAU;AAC3B;AAGA,IAAO,wBAAQ;",
   "names": []
 }

package/dist/esm/TimeInput/TimeInputs.js

@@ -19,7 +19,7 @@ import {
   isArrowIncrementDecrement,
   shouldFocusNextInput,
   placeholderFormat
-} from "./utils";
+} from "./utils.js";
 import {
   AM,
   PM,
@@ -337,6 +337,7 @@ const TimeInputs = ({
     return [
       inputsWithDividers,
       React2.createElement("span", { key: "span" }),
+      // hack for next/prev focus
       renderMeridiemInput()
     ];
   };

package/dist/esm/TimeInput/TimeInputs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TimeInput/TimeInputs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useEffect, useState } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport moment from 'moment';\nimport {\n  commonInputProps,\n  formatHour,\n  formatMinutes,\n  formatSeconds,\n  formatMeridiem,\n  getValidTimeNumber,\n  setNativeValue,\n  parseTimeNumberFromText,\n  focusNextInput,\n  focusPreviousInput,\n  getTimeValuesFromTime,\n  isArrowIncrementDecrement,\n  shouldFocusNextInput,\n  placeholderFormat,\n} from './utils';\nimport {\n  AM,\n  PM,\n  ARROW_UP,\n  ARROW_DOWN,\n  BACKSPACE,\n  ESCAPE,\n  HOME,\n  HOUR_RANGE_12,\n  HOUR_RANGE_24,\n  GENERAL_TIME_RANGE,\n  END,\n  PLACEHOLDER_TIME,\n  SHIFT,\n} from '@elliemae/ds-shared';\n\nconst blockName = 'input-times-group';\n\nconst InputTimesGroup = aggregatedClasses('div')(blockName);\nconst TimeInput = aggregatedClasses('input')(blockName, 'input');\nconst Divider = aggregatedClasses('span')(blockName, 'divider', ({ value }) => ({\n  value,\n}));\n\n// eslint-disable-next-line react/prop-types\nconst TimeDivider = ({ content = ':', value = '' }) => <Divider value={!!value}>{content}</Divider>;\n\nconst TimeInputs = ({\n  time,\n  format,\n  use12Hours,\n  step = 1,\n  showHours,\n  showMinutes,\n  showSeconds,\n  onChange,\n  disabled,\n  innerRef,\n  clearable,\n  'arial-label': ariaLabel,\n  'aria-label': ariaLabel2,\n}) => {\n  const [meridiem, setMeridiem] = useState('');\n  const [hours, setHours] = useState('');\n  const [minutes, setMinutes] = useState('');\n  const [hasInputValue, setHasInputValue] = useState(false);\n  const [seconds, setSeconds] = useState('');\n  const [currentKey, setCurrentKey] = useState('');\n  const [hasInputBeenTriggered, setHasInputBeenTriggered] = useState(false);\n\n  const [lastTypedNumber, setLastTypedNumber] = useState(null);\n  const inputRefs = {\n    hours: null,\n    minutes: null,\n    seconds: null,\n    meridiem: null,\n  };\n\n  useEffect(() => {\n    if (time && moment(time).isValid()) {\n      const timeValues = getTimeValuesFromTime(time, format, use12Hours);\n\n      setMeridiem(timeValues.meridiem);\n      setHours(timeValues.hours);\n      setMinutes(timeValues.minutes);\n      setSeconds(timeValues.seconds);\n    } else {\n      setMeridiem('');\n      setHours('');\n      setMinutes('');\n      setSeconds('');\n    }\n  }, [time, format, use12Hours]);\n\n  useEffect(() => {\n    const selectedTime = time || moment();\n    if (isTimeCompletelySet() && selectedTime.hours && hasInputBeenTriggered) {\n      if (showHours && hours) selectedTime.hours(hours);\n      if (showMinutes && minutes) selectedTime.minutes(minutes);\n      if (showSeconds && seconds) selectedTime.seconds(seconds);\n      if (use12Hours && meridiem) {\n        const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : (hours % 12) + 12;\n        selectedTime.hour(nextHours);\n      }\n      onChange(selectedTime);\n      setHasInputBeenTriggered(false);\n    }\n  }, [hours, minutes, seconds, meridiem]);\n\n  const focusNextInputIfNeeded = (currentEl, max, number) => {\n    if (\n      shouldFocusNextInput(max, number, currentEl.value) &&\n      !isArrowIncrementDecrement(currentKey) &&\n      !hasInputValue\n    ) {\n      focusNextInput(currentEl);\n    }\n  };\n\n  const getNextTimeValue = (value, incrementing = true) => {\n    const parsedValue = parseTimeNumberFromText(value);\n    return incrementing ? parsedValue + step : parsedValue - step;\n  };\n\n  const onInputFocus = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.select();\n  };\n\n  const onClick = (e) => {\n    if (e.target.value) {\n      setHasInputValue(true);\n    }\n  };\n\n  // eslint-disable-next-line max-statements\n  const onKeyDown = (event, max) => {\n    const { target } = event;\n    const { value } = target;\n    setLastTypedNumber(event.key);\n    switch (event.key) {\n      case ARROW_UP: {\n        event.preventDefault();\n        setCurrentKey(event.key);\n        const incrementedValue = getNextTimeValue(value);\n        setNativeValue(event.target, incrementedValue);\n        break;\n      }\n      case ARROW_DOWN: {\n        event.preventDefault();\n        setCurrentKey(event.key);\n        const decrementedValue = getNextTimeValue(value, false);\n        setNativeValue(event.target, decrementedValue);\n        break;\n      }\n      case BACKSPACE: {\n        event.preventDefault();\n        if (!value) {\n          focusPreviousInput(event.target);\n        } else {\n          setNativeValue(event.target, '');\n        }\n        break;\n      }\n      case ESCAPE: {\n        event.preventDefault();\n        event.target.blur();\n        break;\n      }\n      case HOME: {\n        event.preventDefault();\n        setNativeValue(event.target, String(max));\n        focusNextInput(event.target);\n        break;\n      }\n      case END: {\n        event.preventDefault();\n        setNativeValue(event.target, '00');\n        focusNextInput(event.target);\n        break;\n      }\n      case SHIFT:\n        event.preventDefault();\n        setCurrentKey(event.key);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const isTimeCompletelySet = () => {\n    let neededValues = [];\n\n    if (showHours) neededValues = [...neededValues, hours || null];\n    if (showMinutes) neededValues = [...neededValues, minutes || null];\n    if (showSeconds) neededValues = [...neededValues, seconds || null];\n    if (use12Hours) neededValues = [...neededValues, meridiem || null];\n\n    return !neededValues.some((value) => !value);\n  };\n\n  const handleSecondsChange = (e) => {\n    const { value } = e.target;\n    const secondsHandled = parseTimeNumberFromText(value);\n\n    const nextSeconds = getValidTimeNumber(GENERAL_TIME_RANGE, secondsHandled, lastTypedNumber);\n\n    setSeconds(formatSeconds(format, nextSeconds));\n    setHasInputBeenTriggered(true);\n    focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);\n  };\n\n  const handleMinutesChange = (e) => {\n    const { value } = e.target;\n    const minutesHandled = parseTimeNumberFromText(value);\n    const nextMinutes = getValidTimeNumber(GENERAL_TIME_RANGE, minutesHandled, lastTypedNumber);\n\n    setMinutes(formatMinutes(format, nextMinutes));\n    setHasInputBeenTriggered(true);\n    focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);\n  };\n\n  const handleHoursChange = (e) => {\n    const { value } = e.target;\n    const hour = parseTimeNumberFromText(value);\n    const hoursRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;\n\n    const nextHour = getValidTimeNumber(hoursRange, hour, lastTypedNumber);\n    setHours(formatHour(format, nextHour));\n    setHasInputBeenTriggered(true);\n    focusNextInputIfNeeded(e.target, hoursRange.max, value);\n  };\n\n  const handleMeridiemKeyDown = (e) => {\n    if (e.key === ARROW_UP || e.key === 'a') {\n      setMeridiem(formatMeridiem(format, AM));\n    } else if (e.key === ARROW_DOWN || e.key === 'p') {\n      setMeridiem(formatMeridiem(format, PM));\n    } else if (e.key === SHIFT) {\n      setCurrentKey(e.key);\n    } else if (e.key === BACKSPACE) {\n      setMeridiem('');\n    }\n    setHasInputBeenTriggered(true);\n  };\n\n  const handleMeridiemBlur = (e) => {\n    const { value } = e.target;\n    if (value !== AM && value !== PM) {\n      setMeridiem('');\n    }\n  };\n\n  const handleOnBlur = (event) => {\n    const selectedTime = moment();\n    if (clearable && !event.currentTarget.contains(event.relatedTarget)) {\n      if (showHours && hours) selectedTime.hours(hours);\n      if (showMinutes && minutes) selectedTime.minutes(minutes);\n      if (showSeconds && seconds) selectedTime.seconds(seconds);\n      if (use12Hours && meridiem) {\n        const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : (hours % 12) + 12;\n        selectedTime.hour(nextHours);\n      }\n      onChange(selectedTime);\n    }\n  };\n\n  const renderSecondsInput = () => {\n    if (!showSeconds) return null;\n\n    return (\n      <TimeInput\n        {...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick)}\n        key=\"seconds-input\"\n        data-testid=\"ds-time-input__seconds\"\n        aria-label={ariaLabel || ariaLabel2 || 'Seconds Input'}\n        disabled={disabled}\n        // eslint-disable-next-line no-return-assign\n        innerRef={(node) => (inputRefs.seconds = node)}\n        onChange={handleSecondsChange}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.seconds, format)}\n        value={seconds}\n      />\n    );\n  };\n\n  const renderMinutesInput = () => {\n    if (!showMinutes) return null;\n\n    return (\n      <TimeInput\n        {...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick)}\n        key=\"minutes-input\"\n        data-testid=\"ds-time-input__minutes\"\n        aria-label={ariaLabel || ariaLabel2 || 'Minutes Input'}\n        disabled={disabled}\n        // eslint-disable-next-line no-return-assign\n        innerRef={(node) => (inputRefs.minutes = node)}\n        onChange={handleMinutesChange}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.minutes, format)}\n        value={minutes}\n      />\n    );\n  };\n\n  const renderHoursInput = () => {\n    if (!showHours) return null;\n    const hourFormatRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;\n\n    return (\n      <TimeInput\n        {...commonInputProps((e) => onKeyDown(e, hourFormatRange.max), onInputFocus, onClick)}\n        key=\"hour-input\"\n        data-testid=\"ds-time-input__hours\"\n        aria-label={ariaLabel || ariaLabel2 || 'Hours Input'}\n        disabled={disabled}\n        // eslint-disable-next-line no-return-assign\n        innerRef={(node) => (inputRefs.hours = node)}\n        onChange={handleHoursChange}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.hour, format, use12Hours)}\n        value={hours}\n      />\n    );\n  };\n\n  const renderMeridiemInput = () => {\n    if (!use12Hours) return null;\n\n    return (\n      <TimeInput\n        {...commonInputProps}\n        key=\"meridiem-input\"\n        data-testid=\"ds-time-input__ampm\"\n        aria-label={ariaLabel || ariaLabel2 || 'Meridiem Input'}\n        disabled={disabled}\n        onBlur={handleMeridiemBlur}\n        onKeyDown={handleMeridiemKeyDown}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.meridiem, format)}\n        value={meridiem}\n      />\n    );\n  };\n\n  const renderTimeInputs = () => {\n    const inputs = [renderHoursInput(), renderMinutesInput(), renderSecondsInput()];\n    /* eslint-disable indent */\n    const inputsWithDividers = inputs.reduce(\n      (acc, input, index) =>\n        input\n          ? acc.concat([\n              index ? (\n                <TimeDivider\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={index}\n                  content=\":\"\n                  value={input.props.value}\n                />\n              ) : null,\n              input,\n            ])\n          : acc,\n      [],\n    );\n    /* eslint-enable indent */\n\n    return [\n      inputsWithDividers,\n      React.createElement('span', { key: 'span' }), // hack for next/prev focus\n      renderMeridiemInput(),\n    ];\n  };\n\n  return (\n    <InputTimesGroup onBlur={handleOnBlur} innerRef={innerRef}>\n      {renderTimeInputs()}\n    </InputTimesGroup>\n  );\n};\n\nexport { TimeInputs };\nexport default TimeInputs;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React, { useEffect, useState } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport moment from 'moment';\nimport {\n  commonInputProps,\n  formatHour,\n  formatMinutes,\n  formatSeconds,\n  formatMeridiem,\n  getValidTimeNumber,\n  setNativeValue,\n  parseTimeNumberFromText,\n  focusNextInput,\n  focusPreviousInput,\n  getTimeValuesFromTime,\n  isArrowIncrementDecrement,\n  shouldFocusNextInput,\n  placeholderFormat,\n} from './utils.js';\nimport {\n  AM,\n  PM,\n  ARROW_UP,\n  ARROW_DOWN,\n  BACKSPACE,\n  ESCAPE,\n  HOME,\n  HOUR_RANGE_12,\n  HOUR_RANGE_24,\n  GENERAL_TIME_RANGE,\n  END,\n  PLACEHOLDER_TIME,\n  SHIFT,\n} from '@elliemae/ds-shared';\n\nconst blockName = 'input-times-group';\n\nconst InputTimesGroup = aggregatedClasses('div')(blockName);\nconst TimeInput = aggregatedClasses('input')(blockName, 'input');\nconst Divider = aggregatedClasses('span')(blockName, 'divider', ({ value }) => ({\n  value,\n}));\n\n// eslint-disable-next-line react/prop-types\nconst TimeDivider = ({ content = ':', value = '' }) => <Divider value={!!value}>{content}</Divider>;\n\nconst TimeInputs = ({\n  time,\n  format,\n  use12Hours,\n  step = 1,\n  showHours,\n  showMinutes,\n  showSeconds,\n  onChange,\n  disabled,\n  innerRef,\n  clearable,\n  'arial-label': ariaLabel,\n  'aria-label': ariaLabel2,\n}) => {\n  const [meridiem, setMeridiem] = useState('');\n  const [hours, setHours] = useState('');\n  const [minutes, setMinutes] = useState('');\n  const [hasInputValue, setHasInputValue] = useState(false);\n  const [seconds, setSeconds] = useState('');\n  const [currentKey, setCurrentKey] = useState('');\n  const [hasInputBeenTriggered, setHasInputBeenTriggered] = useState(false);\n\n  const [lastTypedNumber, setLastTypedNumber] = useState(null);\n  const inputRefs = {\n    hours: null,\n    minutes: null,\n    seconds: null,\n    meridiem: null,\n  };\n\n  useEffect(() => {\n    if (time && moment(time).isValid()) {\n      const timeValues = getTimeValuesFromTime(time, format, use12Hours);\n\n      setMeridiem(timeValues.meridiem);\n      setHours(timeValues.hours);\n      setMinutes(timeValues.minutes);\n      setSeconds(timeValues.seconds);\n    } else {\n      setMeridiem('');\n      setHours('');\n      setMinutes('');\n      setSeconds('');\n    }\n  }, [time, format, use12Hours]);\n\n  useEffect(() => {\n    const selectedTime = time || moment();\n    if (isTimeCompletelySet() && selectedTime.hours && hasInputBeenTriggered) {\n      if (showHours && hours) selectedTime.hours(hours);\n      if (showMinutes && minutes) selectedTime.minutes(minutes);\n      if (showSeconds && seconds) selectedTime.seconds(seconds);\n      if (use12Hours && meridiem) {\n        const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : (hours % 12) + 12;\n        selectedTime.hour(nextHours);\n      }\n      onChange(selectedTime);\n      setHasInputBeenTriggered(false);\n    }\n  }, [hours, minutes, seconds, meridiem]);\n\n  const focusNextInputIfNeeded = (currentEl, max, number) => {\n    if (\n      shouldFocusNextInput(max, number, currentEl.value) &&\n      !isArrowIncrementDecrement(currentKey) &&\n      !hasInputValue\n    ) {\n      focusNextInput(currentEl);\n    }\n  };\n\n  const getNextTimeValue = (value, incrementing = true) => {\n    const parsedValue = parseTimeNumberFromText(value);\n    return incrementing ? parsedValue + step : parsedValue - step;\n  };\n\n  const onInputFocus = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    e.target.select();\n  };\n\n  const onClick = (e) => {\n    if (e.target.value) {\n      setHasInputValue(true);\n    }\n  };\n\n  // eslint-disable-next-line max-statements\n  const onKeyDown = (event, max) => {\n    const { target } = event;\n    const { value } = target;\n    setLastTypedNumber(event.key);\n    switch (event.key) {\n      case ARROW_UP: {\n        event.preventDefault();\n        setCurrentKey(event.key);\n        const incrementedValue = getNextTimeValue(value);\n        setNativeValue(event.target, incrementedValue);\n        break;\n      }\n      case ARROW_DOWN: {\n        event.preventDefault();\n        setCurrentKey(event.key);\n        const decrementedValue = getNextTimeValue(value, false);\n        setNativeValue(event.target, decrementedValue);\n        break;\n      }\n      case BACKSPACE: {\n        event.preventDefault();\n        if (!value) {\n          focusPreviousInput(event.target);\n        } else {\n          setNativeValue(event.target, '');\n        }\n        break;\n      }\n      case ESCAPE: {\n        event.preventDefault();\n        event.target.blur();\n        break;\n      }\n      case HOME: {\n        event.preventDefault();\n        setNativeValue(event.target, String(max));\n        focusNextInput(event.target);\n        break;\n      }\n      case END: {\n        event.preventDefault();\n        setNativeValue(event.target, '00');\n        focusNextInput(event.target);\n        break;\n      }\n      case SHIFT:\n        event.preventDefault();\n        setCurrentKey(event.key);\n        break;\n      default:\n        break;\n    }\n  };\n\n  const isTimeCompletelySet = () => {\n    let neededValues = [];\n\n    if (showHours) neededValues = [...neededValues, hours || null];\n    if (showMinutes) neededValues = [...neededValues, minutes || null];\n    if (showSeconds) neededValues = [...neededValues, seconds || null];\n    if (use12Hours) neededValues = [...neededValues, meridiem || null];\n\n    return !neededValues.some((value) => !value);\n  };\n\n  const handleSecondsChange = (e) => {\n    const { value } = e.target;\n    const secondsHandled = parseTimeNumberFromText(value);\n\n    const nextSeconds = getValidTimeNumber(GENERAL_TIME_RANGE, secondsHandled, lastTypedNumber);\n\n    setSeconds(formatSeconds(format, nextSeconds));\n    setHasInputBeenTriggered(true);\n    focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);\n  };\n\n  const handleMinutesChange = (e) => {\n    const { value } = e.target;\n    const minutesHandled = parseTimeNumberFromText(value);\n    const nextMinutes = getValidTimeNumber(GENERAL_TIME_RANGE, minutesHandled, lastTypedNumber);\n\n    setMinutes(formatMinutes(format, nextMinutes));\n    setHasInputBeenTriggered(true);\n    focusNextInputIfNeeded(e.target, GENERAL_TIME_RANGE.max, value);\n  };\n\n  const handleHoursChange = (e) => {\n    const { value } = e.target;\n    const hour = parseTimeNumberFromText(value);\n    const hoursRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;\n\n    const nextHour = getValidTimeNumber(hoursRange, hour, lastTypedNumber);\n    setHours(formatHour(format, nextHour));\n    setHasInputBeenTriggered(true);\n    focusNextInputIfNeeded(e.target, hoursRange.max, value);\n  };\n\n  const handleMeridiemKeyDown = (e) => {\n    if (e.key === ARROW_UP || e.key === 'a') {\n      setMeridiem(formatMeridiem(format, AM));\n    } else if (e.key === ARROW_DOWN || e.key === 'p') {\n      setMeridiem(formatMeridiem(format, PM));\n    } else if (e.key === SHIFT) {\n      setCurrentKey(e.key);\n    } else if (e.key === BACKSPACE) {\n      setMeridiem('');\n    }\n    setHasInputBeenTriggered(true);\n  };\n\n  const handleMeridiemBlur = (e) => {\n    const { value } = e.target;\n    if (value !== AM && value !== PM) {\n      setMeridiem('');\n    }\n  };\n\n  const handleOnBlur = (event) => {\n    const selectedTime = moment();\n    if (clearable && !event.currentTarget.contains(event.relatedTarget)) {\n      if (showHours && hours) selectedTime.hours(hours);\n      if (showMinutes && minutes) selectedTime.minutes(minutes);\n      if (showSeconds && seconds) selectedTime.seconds(seconds);\n      if (use12Hours && meridiem) {\n        const nextHours = meridiem.toLowerCase() === AM ? hours % 12 : (hours % 12) + 12;\n        selectedTime.hour(nextHours);\n      }\n      onChange(selectedTime);\n    }\n  };\n\n  const renderSecondsInput = () => {\n    if (!showSeconds) return null;\n\n    return (\n      <TimeInput\n        {...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick)}\n        key=\"seconds-input\"\n        data-testid=\"ds-time-input__seconds\"\n        aria-label={ariaLabel || ariaLabel2 || 'Seconds Input'}\n        disabled={disabled}\n        // eslint-disable-next-line no-return-assign\n        innerRef={(node) => (inputRefs.seconds = node)}\n        onChange={handleSecondsChange}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.seconds, format)}\n        value={seconds}\n      />\n    );\n  };\n\n  const renderMinutesInput = () => {\n    if (!showMinutes) return null;\n\n    return (\n      <TimeInput\n        {...commonInputProps((e) => onKeyDown(e, GENERAL_TIME_RANGE.max), onInputFocus, onClick)}\n        key=\"minutes-input\"\n        data-testid=\"ds-time-input__minutes\"\n        aria-label={ariaLabel || ariaLabel2 || 'Minutes Input'}\n        disabled={disabled}\n        // eslint-disable-next-line no-return-assign\n        innerRef={(node) => (inputRefs.minutes = node)}\n        onChange={handleMinutesChange}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.minutes, format)}\n        value={minutes}\n      />\n    );\n  };\n\n  const renderHoursInput = () => {\n    if (!showHours) return null;\n    const hourFormatRange = use12Hours ? HOUR_RANGE_12 : HOUR_RANGE_24;\n\n    return (\n      <TimeInput\n        {...commonInputProps((e) => onKeyDown(e, hourFormatRange.max), onInputFocus, onClick)}\n        key=\"hour-input\"\n        data-testid=\"ds-time-input__hours\"\n        aria-label={ariaLabel || ariaLabel2 || 'Hours Input'}\n        disabled={disabled}\n        // eslint-disable-next-line no-return-assign\n        innerRef={(node) => (inputRefs.hours = node)}\n        onChange={handleHoursChange}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.hour, format, use12Hours)}\n        value={hours}\n      />\n    );\n  };\n\n  const renderMeridiemInput = () => {\n    if (!use12Hours) return null;\n\n    return (\n      <TimeInput\n        {...commonInputProps}\n        key=\"meridiem-input\"\n        data-testid=\"ds-time-input__ampm\"\n        aria-label={ariaLabel || ariaLabel2 || 'Meridiem Input'}\n        disabled={disabled}\n        onBlur={handleMeridiemBlur}\n        onKeyDown={handleMeridiemKeyDown}\n        placeholder={placeholderFormat(PLACEHOLDER_TIME.meridiem, format)}\n        value={meridiem}\n      />\n    );\n  };\n\n  const renderTimeInputs = () => {\n    const inputs = [renderHoursInput(), renderMinutesInput(), renderSecondsInput()];\n    /* eslint-disable indent */\n    const inputsWithDividers = inputs.reduce(\n      (acc, input, index) =>\n        input\n          ? acc.concat([\n              index ? (\n                <TimeDivider\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={index}\n                  content=\":\"\n                  value={input.props.value}\n                />\n              ) : null,\n              input,\n            ])\n          : acc,\n      [],\n    );\n    /* eslint-enable indent */\n\n    return [\n      inputsWithDividers,\n      React.createElement('span', { key: 'span' }), // hack for next/prev focus\n      renderMeridiemInput(),\n    ];\n  };\n\n  return (\n    <InputTimesGroup onBlur={handleOnBlur} innerRef={innerRef}>\n      {renderTimeInputs()}\n    </InputTimesGroup>\n  );\n};\n\nexport { TimeInputs };\nexport default TimeInputs;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDgC;AAmOjD;AA/QN,OAAOA,UAAS,WAAW,gBAAgB;AAC3C,SAAS,yBAAyB;AAClC,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,YAAY;AAElB,MAAM,kBAAkB,kBAAkB,KAAK,EAAE,SAAS;AAC1D,MAAM,YAAY,kBAAkB,OAAO,EAAE,WAAW,OAAO;AAC/D,MAAM,UAAU,kBAAkB,MAAM,EAAE,WAAW,WAAW,CAAC,EAAE,MAAM,OAAO;AAAA,EAC9E;AACF,EAAE;AAGF,MAAM,cAAc,CAAC,EAAE,UAAU,KAAK,QAAQ,GAAG,MAAM,oBAAC,WAAQ,OAAO,CAAC,CAAC,OAAQ,mBAAQ;AAEzF,MAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,cAAc;AAChB,MAAM;AACJ,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AAExE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,IAAI;AAC3D,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,EACZ;AAEA,YAAU,MAAM;AACd,QAAI,QAAQ,OAAO,IAAI,EAAE,QAAQ,GAAG;AAClC,YAAM,aAAa,sBAAsB,MAAM,QAAQ,UAAU;AAEjE,kBAAY,WAAW,QAAQ;AAC/B,eAAS,WAAW,KAAK;AACzB,iBAAW,WAAW,OAAO;AAC7B,iBAAW,WAAW,OAAO;AAAA,IAC/B,OAAO;AACL,kBAAY,EAAE;AACd,eAAS,EAAE;AACX,iBAAW,EAAE;AACb,iBAAW,EAAE;AAAA,IACf;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,UAAU,CAAC;AAE7B,YAAU,MAAM;AACd,UAAM,eAAe,QAAQ,OAAO;AACpC,QAAI,oBAAoB,KAAK,aAAa,SAAS,uBAAuB;AACxE,UAAI,aAAa;AAAO,qBAAa,MAAM,KAAK;AAChD,UAAI,eAAe;AAAS,qBAAa,QAAQ,OAAO;AACxD,UAAI,eAAe;AAAS,qBAAa,QAAQ,OAAO;AACxD,UAAI,cAAc,UAAU;AAC1B,cAAM,YAAY,SAAS,YAAY,MAAM,KAAK,QAAQ,KAAM,QAAQ,KAAM;AAC9E,qBAAa,KAAK,SAAS;AAAA,MAC7B;AACA,eAAS,YAAY;AACrB,+BAAyB,KAAK;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,SAAS,QAAQ,CAAC;AAEtC,QAAM,yBAAyB,CAAC,WAAW,KAAK,WAAW;AACzD,QACE,qBAAqB,KAAK,QAAQ,UAAU,KAAK,KACjD,CAAC,0BAA0B,UAAU,KACrC,CAAC,eACD;AACA,qBAAe,SAAS;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,mBAAmB,CAAC,OAAO,eAAe,SAAS;AACvD,UAAM,cAAc,wBAAwB,KAAK;AACjD,WAAO,eAAe,cAAc,OAAO,cAAc;AAAA,EAC3D;AAEA,QAAM,eAAe,CAAC,MAAM;AAC1B,MAAE,eAAe;AACjB,MAAE,gBAAgB;AAClB,MAAE,OAAO,OAAO;AAAA,EAClB;AAEA,QAAM,UAAU,CAAC,MAAM;AACrB,QAAI,EAAE,OAAO,OAAO;AAClB,uBAAiB,IAAI;AAAA,IACvB;AAAA,EACF;AAGA,QAAM,YAAY,CAAC,OAAO,QAAQ;AAChC,UAAM,EAAE,OAAO,IAAI;AACnB,UAAM,EAAE,MAAM,IAAI;AAClB,uBAAmB,MAAM,GAAG;AAC5B,YAAQ,MAAM,KAAK;AAAA,MACjB,KAAK,UAAU;AACb,cAAM,eAAe;AACrB,sBAAc,MAAM,GAAG;AACvB,cAAM,mBAAmB,iBAAiB,KAAK;AAC/C,uBAAe,MAAM,QAAQ,gBAAgB;AAC7C;AAAA,MACF;AAAA,MACA,KAAK,YAAY;AACf,cAAM,eAAe;AACrB,sBAAc,MAAM,GAAG;AACvB,cAAM,mBAAmB,iBAAiB,OAAO,KAAK;AACtD,uBAAe,MAAM,QAAQ,gBAAgB;AAC7C;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,cAAM,eAAe;AACrB,YAAI,CAAC,OAAO;AACV,6BAAmB,MAAM,MAAM;AAAA,QACjC,OAAO;AACL,yBAAe,MAAM,QAAQ,EAAE;AAAA,QACjC;AACA;AAAA,MACF;AAAA,MACA,KAAK,QAAQ;AACX,cAAM,eAAe;AACrB,cAAM,OAAO,KAAK;AAClB;AAAA,MACF;AAAA,MACA,KAAK,MAAM;AACT,cAAM,eAAe;AACrB,uBAAe,MAAM,QAAQ,OAAO,GAAG,CAAC;AACxC,uBAAe,MAAM,MAAM;AAC3B;AAAA,MACF;AAAA,MACA,KAAK,KAAK;AACR,cAAM,eAAe;AACrB,uBAAe,MAAM,QAAQ,IAAI;AACjC,uBAAe,MAAM,MAAM;AAC3B;AAAA,MACF;AAAA,MACA,KAAK;AACH,cAAM,eAAe;AACrB,sBAAc,MAAM,GAAG;AACvB;AAAA,MACF;AACE;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,sBAAsB,MAAM;AAChC,QAAI,eAAe,CAAC;AAEpB,QAAI;AAAW,qBAAe,CAAC,GAAG,cAAc,SAAS,IAAI;AAC7D,QAAI;AAAa,qBAAe,CAAC,GAAG,cAAc,WAAW,IAAI;AACjE,QAAI;AAAa,qBAAe,CAAC,GAAG,cAAc,WAAW,IAAI;AACjE,QAAI;AAAY,qBAAe,CAAC,GAAG,cAAc,YAAY,IAAI;AAEjE,WAAO,CAAC,aAAa,KAAK,CAAC,UAAU,CAAC,KAAK;AAAA,EAC7C;AAEA,QAAM,sBAAsB,CAAC,MAAM;AACjC,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,UAAM,iBAAiB,wBAAwB,KAAK;AAEpD,UAAM,cAAc,mBAAmB,oBAAoB,gBAAgB,eAAe;AAE1F,eAAW,cAAc,QAAQ,WAAW,CAAC;AAC7C,6BAAyB,IAAI;AAC7B,2BAAuB,EAAE,QAAQ,mBAAmB,KAAK,KAAK;AAAA,EAChE;AAEA,QAAM,sBAAsB,CAAC,MAAM;AACjC,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,UAAM,iBAAiB,wBAAwB,KAAK;AACpD,UAAM,cAAc,mBAAmB,oBAAoB,gBAAgB,eAAe;AAE1F,eAAW,cAAc,QAAQ,WAAW,CAAC;AAC7C,6BAAyB,IAAI;AAC7B,2BAAuB,EAAE,QAAQ,mBAAmB,KAAK,KAAK;AAAA,EAChE;AAEA,QAAM,oBAAoB,CAAC,MAAM;AAC/B,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,UAAM,OAAO,wBAAwB,KAAK;AAC1C,UAAM,aAAa,aAAa,gBAAgB;AAEhD,UAAM,WAAW,mBAAmB,YAAY,MAAM,eAAe;AACrE,aAAS,WAAW,QAAQ,QAAQ,CAAC;AACrC,6BAAyB,IAAI;AAC7B,2BAAuB,EAAE,QAAQ,WAAW,KAAK,KAAK;AAAA,EACxD;AAEA,QAAM,wBAAwB,CAAC,MAAM;AACnC,QAAI,EAAE,QAAQ,YAAY,EAAE,QAAQ,KAAK;AACvC,kBAAY,eAAe,QAAQ,EAAE,CAAC;AAAA,IACxC,WAAW,EAAE,QAAQ,cAAc,EAAE,QAAQ,KAAK;AAChD,kBAAY,eAAe,QAAQ,EAAE,CAAC;AAAA,IACxC,WAAW,EAAE,QAAQ,OAAO;AAC1B,oBAAc,EAAE,GAAG;AAAA,IACrB,WAAW,EAAE,QAAQ,WAAW;AAC9B,kBAAY,EAAE;AAAA,IAChB;AACA,6BAAyB,IAAI;AAAA,EAC/B;AAEA,QAAM,qBAAqB,CAAC,MAAM;AAChC,UAAM,EAAE,MAAM,IAAI,EAAE;AACpB,QAAI,UAAU,MAAM,UAAU,IAAI;AAChC,kBAAY,EAAE;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,UAAU;AAC9B,UAAM,eAAe,OAAO;AAC5B,QAAI,aAAa,CAAC,MAAM,cAAc,SAAS,MAAM,aAAa,GAAG;AACnE,UAAI,aAAa;AAAO,qBAAa,MAAM,KAAK;AAChD,UAAI,eAAe;AAAS,qBAAa,QAAQ,OAAO;AACxD,UAAI,eAAe;AAAS,qBAAa,QAAQ,OAAO;AACxD,UAAI,cAAc,UAAU;AAC1B,cAAM,YAAY,SAAS,YAAY,MAAM,KAAK,QAAQ,KAAM,QAAQ,KAAM;AAC9E,qBAAa,KAAK,SAAS;AAAA,MAC7B;AACA,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC;AAAa,aAAO;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,iBAAiB,CAAC,MAAM,UAAU,GAAG,mBAAmB,GAAG,GAAG,cAAc,OAAO;AAAA,QACvF,KAAI;AAAA,QACJ,eAAY;AAAA,QACZ,cAAY,aAAa,cAAc;AAAA,QACvC;AAAA,QAEA,UAAU,CAAC,SAAU,UAAU,UAAU;AAAA,QACzC,UAAU;AAAA,QACV,aAAa,kBAAkB,iBAAiB,SAAS,MAAM;AAAA,QAC/D,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,CAAC;AAAa,aAAO;AAEzB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,iBAAiB,CAAC,MAAM,UAAU,GAAG,mBAAmB,GAAG,GAAG,cAAc,OAAO;AAAA,QACvF,KAAI;AAAA,QACJ,eAAY;AAAA,QACZ,cAAY,aAAa,cAAc;AAAA,QACvC;AAAA,QAEA,UAAU,CAAC,SAAU,UAAU,UAAU;AAAA,QACzC,UAAU;AAAA,QACV,aAAa,kBAAkB,iBAAiB,SAAS,MAAM;AAAA,QAC/D,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,QAAM,mBAAmB,MAAM;AAC7B,QAAI,CAAC;AAAW,aAAO;AACvB,UAAM,kBAAkB,aAAa,gBAAgB;AAErD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG,iBAAiB,CAAC,MAAM,UAAU,GAAG,gBAAgB,GAAG,GAAG,cAAc,OAAO;AAAA,QACpF,KAAI;AAAA,QACJ,eAAY;AAAA,QACZ,cAAY,aAAa,cAAc;AAAA,QACvC;AAAA,QAEA,UAAU,CAAC,SAAU,UAAU,QAAQ;AAAA,QACvC,UAAU;AAAA,QACV,aAAa,kBAAkB,iBAAiB,MAAM,QAAQ,UAAU;AAAA,QACxE,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,QAAM,sBAAsB,MAAM;AAChC,QAAI,CAAC;AAAY,aAAO;AAExB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAI;AAAA,QACJ,eAAY;AAAA,QACZ,cAAY,aAAa,cAAc;AAAA,QACvC;AAAA,QACA,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,aAAa,kBAAkB,iBAAiB,UAAU,MAAM;AAAA,QAChE,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AAEA,QAAM,mBAAmB,MAAM;AAC7B,UAAM,SAAS,CAAC,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAE9E,UAAM,qBAAqB,OAAO;AAAA,MAChC,CAAC,KAAK,OAAO,UACX,QACI,IAAI,OAAO;AAAA,QACT,QACE;AAAA,UAAC;AAAA;AAAA,YAGC,SAAQ;AAAA,YACR,OAAO,MAAM,MAAM;AAAA;AAAA,UAFd;AAAA,QAGP,IACE;AAAA,QACJ;AAAA,MACF,CAAC,IACD;AAAA,MACN,CAAC;AAAA,IACH;AAGA,WAAO;AAAA,MACL;AAAA,MACAA,OAAM,cAAc,QAAQ,EAAE,KAAK,OAAO,CAAC;AAAA;AAAA,MAC3C,oBAAoB;AAAA,IACtB;AAAA,EACF;AAEA,SACE,oBAAC,mBAAgB,QAAQ,cAAc,UACpC,2BAAiB,GACpB;AAEJ;AAGA,IAAO,qBAAQ;",
   "names": ["React"]
 }

package/dist/esm/TimeInput/index.js

@@ -1,3 +1,3 @@
 import * as React from "react";
-export * from "./DSTimeInput";
+export * from "./DSTimeInput.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/TimeInput/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/TimeInput/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSTimeInput';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSTimeInput.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;",
   "names": []
 }

package/dist/esm/Toggle/DSToggle.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useDeprecateComponent } from "@elliemae/ds-utilities";
 import { PropTypes, describe } from "@elliemae/ds-props-helpers";
-import { DSToggleImpl } from "./DSToggleImpl";
+import { DSToggleImpl } from "./DSToggleImpl.js";
 import { dsBasicSizes } from "@elliemae/ds-shared";
 const DSToggle = ({
   containerProps,
@@ -45,16 +45,49 @@ DSToggle.defaultProps = {
   checked: void 0
 };
 const props = {
+  /**
+   * Set of Properties attached to the main container
+   */
   containerProps: PropTypes.shape({}).description("Set of Properties attached to the main container"),
+  /**
+   * Whether the toggle has error or not
+   */
   hasError: PropTypes.bool.description("Whether the toggle has error or not"),
+  /**
+   * Whether the toggle is read only or not
+   */
   readOnly: PropTypes.bool.description("Whether the toggle is read only or not"),
+  /**
+   * Whether the toggle is disabled or not
+   */
   disabled: PropTypes.bool.description("Whether the toggle is disabled or not"),
+  /**
+   * Whether the toggle is checked or not
+   */
   checked: PropTypes.bool.description("Whether the toggle is checked or not"),
+  /**
+   * Allows a function that is triggered once the toggle changes
+   */
   onChange: PropTypes.func.description("Allows a function that is triggered once the toggle changes"),
+  /**
+   * Label to show when the toggle is ON
+   */
   labelOn: PropTypes.string.description("Label to show when the toggle is ON"),
+  /**
+   * Label to show when the toggle is OFF
+   */
   labelOff: PropTypes.string.description("Label to show when the toggle is OFF"),
+  /**
+   * Default value once the component is initialized
+   */
   value: PropTypes.string.description("Default value once the component is initialized"),
+  /**
+   * ['s', 'm', 'l']
+   */
   size: PropTypes.oneOf(dsBasicSizes).description("['s', 'm', 'l']"),
+  /**
+   * Input name
+   */
   name: PropTypes.string.description("Input name")
 };
 DSToggle.propTypes = props;

package/dist/esm/Toggle/DSToggle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Toggle/DSToggle.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSToggleImpl } from './DSToggleImpl';\nimport { dsBasicSizes } from '@elliemae/ds-shared';\n\nconst DSToggle = ({\n  containerProps,\n  hasError,\n  readOnly,\n  disabled,\n  checked,\n  labelOn,\n  labelOff,\n  name,\n  value,\n  size,\n  ...otherProps\n}) => {\n  useDeprecateComponent({ componentName: 'ds-form/Toggle', version: 'TBD Date: 2023 Q3' });\n\n  return (\n    <DSToggleImpl\n      {...otherProps}\n      checked={checked}\n      containerProps={containerProps}\n      disabled={disabled}\n      hasError={hasError}\n      labelOff={labelOff}\n      labelOn={labelOn}\n      name={name}\n      readOnly={readOnly}\n      size={size}\n      value={value}\n    />\n  );\n};\n\nDSToggle.defaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  size: 's',\n  hasError: false,\n  readOnly: false,\n  disabled: false,\n  checked: undefined,\n};\n\nconst props = {\n  /**\n   * Set of Properties attached to the main container\n   */\n  containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),\n  /**\n   * Whether the toggle has error or not\n   */\n  hasError: PropTypes.bool.description('Whether the toggle has error or not'),\n  /**\n   * Whether the toggle is read only or not\n   */\n  readOnly: PropTypes.bool.description('Whether the toggle is read only or not'),\n  /**\n   * Whether the toggle is disabled or not\n   */\n  disabled: PropTypes.bool.description('Whether the toggle is disabled or not'),\n  /**\n   * Whether the toggle is checked or not\n   */\n  checked: PropTypes.bool.description('Whether the toggle is checked or not'),\n  /**\n   * Allows a function that is triggered once the toggle changes\n   */\n  onChange: PropTypes.func.description('Allows a function that is triggered once the toggle changes'),\n  /**\n   * Label to show when the toggle is ON\n   */\n  labelOn: PropTypes.string.description('Label to show when the toggle is ON'),\n  /**\n   * Label to show when the toggle is OFF\n   */\n  labelOff: PropTypes.string.description('Label to show when the toggle is OFF'),\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string.description('Default value once the component is initialized'),\n  /**\n   * ['s', 'm', 'l']\n   */\n  size: PropTypes.oneOf(dsBasicSizes).description(\"['s', 'm', 'l']\"),\n  /**\n   * Input name\n   */\n  name: PropTypes.string.description('Input name'),\n};\n\nDSToggle.propTypes = props;\nDSToggle.displayName = 'DSToggle';\nconst DSToggleWithSchema = describe(DSToggle);\n\nDSToggleWithSchema.propTypes = props;\n\nexport default DSToggle;\n\nexport { DSToggleWithSchema, DSToggle };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACsBnB;AArBJ,SAAS,6BAA6B;AACtC,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,MAAM;AACJ,wBAAsB,EAAE,eAAe,kBAAkB,SAAS,oBAAoB,CAAC;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,QAAQ;AAAA,EAIZ,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA,EAIlG,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA,EAI1E,UAAU,UAAU,KAAK,YAAY,wCAAwC;AAAA,EAI7E,UAAU,UAAU,KAAK,YAAY,uCAAuC;AAAA,EAI5E,SAAS,UAAU,KAAK,YAAY,sCAAsC;AAAA,EAI1E,UAAU,UAAU,KAAK,YAAY,6DAA6D;AAAA,EAIlG,SAAS,UAAU,OAAO,YAAY,qCAAqC;AAAA,EAI3E,UAAU,UAAU,OAAO,YAAY,sCAAsC;AAAA,EAI7E,OAAO,UAAU,OAAO,YAAY,iDAAiD;AAAA,EAIrF,MAAM,UAAU,MAAM,YAAY,EAAE,YAAY,iBAAiB;AAAA,EAIjE,MAAM,UAAU,OAAO,YAAY,YAAY;AACjD;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAE5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-props-helpers';\nimport { DSToggleImpl } from './DSToggleImpl.js';\nimport { dsBasicSizes } from '@elliemae/ds-shared';\n\nconst DSToggle = ({\n  containerProps,\n  hasError,\n  readOnly,\n  disabled,\n  checked,\n  labelOn,\n  labelOff,\n  name,\n  value,\n  size,\n  ...otherProps\n}) => {\n  useDeprecateComponent({ componentName: 'ds-form/Toggle', version: 'TBD Date: 2023 Q3' });\n\n  return (\n    <DSToggleImpl\n      {...otherProps}\n      checked={checked}\n      containerProps={containerProps}\n      disabled={disabled}\n      hasError={hasError}\n      labelOff={labelOff}\n      labelOn={labelOn}\n      name={name}\n      readOnly={readOnly}\n      size={size}\n      value={value}\n    />\n  );\n};\n\nDSToggle.defaultProps = {\n  labelOn: 'ON',\n  labelOff: 'OFF',\n  size: 's',\n  hasError: false,\n  readOnly: false,\n  disabled: false,\n  checked: undefined,\n};\n\nconst props = {\n  /**\n   * Set of Properties attached to the main container\n   */\n  containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),\n  /**\n   * Whether the toggle has error or not\n   */\n  hasError: PropTypes.bool.description('Whether the toggle has error or not'),\n  /**\n   * Whether the toggle is read only or not\n   */\n  readOnly: PropTypes.bool.description('Whether the toggle is read only or not'),\n  /**\n   * Whether the toggle is disabled or not\n   */\n  disabled: PropTypes.bool.description('Whether the toggle is disabled or not'),\n  /**\n   * Whether the toggle is checked or not\n   */\n  checked: PropTypes.bool.description('Whether the toggle is checked or not'),\n  /**\n   * Allows a function that is triggered once the toggle changes\n   */\n  onChange: PropTypes.func.description('Allows a function that is triggered once the toggle changes'),\n  /**\n   * Label to show when the toggle is ON\n   */\n  labelOn: PropTypes.string.description('Label to show when the toggle is ON'),\n  /**\n   * Label to show when the toggle is OFF\n   */\n  labelOff: PropTypes.string.description('Label to show when the toggle is OFF'),\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string.description('Default value once the component is initialized'),\n  /**\n   * ['s', 'm', 'l']\n   */\n  size: PropTypes.oneOf(dsBasicSizes).description(\"['s', 'm', 'l']\"),\n  /**\n   * Input name\n   */\n  name: PropTypes.string.description('Input name'),\n};\n\nDSToggle.propTypes = props;\nDSToggle.displayName = 'DSToggle';\nconst DSToggleWithSchema = describe(DSToggle);\n\nDSToggleWithSchema.propTypes = props;\n\nexport default DSToggle;\n\nexport { DSToggleWithSchema, DSToggle };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsBnB;AArBJ,SAAS,6BAA6B;AACtC,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAE7B,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,wBAAsB,EAAE,eAAe,kBAAkB,SAAS,oBAAoB,CAAC;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,eAAe;AAAA,EACtB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS;AACX;AAEA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIZ,gBAAgB,UAAU,MAAM,CAAC,CAAC,EAAE,YAAY,kDAAkD;AAAA;AAAA;AAAA;AAAA,EAIlG,UAAU,UAAU,KAAK,YAAY,qCAAqC;AAAA;AAAA;AAAA;AAAA,EAI1E,UAAU,UAAU,KAAK,YAAY,wCAAwC;AAAA;AAAA;AAAA;AAAA,EAI7E,UAAU,UAAU,KAAK,YAAY,uCAAuC;AAAA;AAAA;AAAA;AAAA,EAI5E,SAAS,UAAU,KAAK,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA,EAI1E,UAAU,UAAU,KAAK,YAAY,6DAA6D;AAAA;AAAA;AAAA;AAAA,EAIlG,SAAS,UAAU,OAAO,YAAY,qCAAqC;AAAA;AAAA;AAAA;AAAA,EAI3E,UAAU,UAAU,OAAO,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA,EAI7E,OAAO,UAAU,OAAO,YAAY,iDAAiD;AAAA;AAAA;AAAA;AAAA,EAIrF,MAAM,UAAU,MAAM,YAAY,EAAE,YAAY,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAIjE,MAAM,UAAU,OAAO,YAAY,YAAY;AACjD;AAEA,SAAS,YAAY;AACrB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAE5C,mBAAmB,YAAY;AAE/B,IAAO,mBAAQ;",
   "names": []
 }

package/dist/esm/Toggle/DSToggleImpl.js

@@ -1,12 +1,19 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2, { Component } from "react";
-import { isValidDrag, cleanDrag, calculateDrag, dragStartingPoints } from "./toggleHelper";
-import { DSToggleRender } from "./DSToggleRender";
-import { togglePropTypes } from "./props";
+import { isValidDrag, cleanDrag, calculateDrag, dragStartingPoints } from "./toggleHelper.js";
+import { DSToggleRender } from "./DSToggleRender.js";
+import { togglePropTypes } from "./props.js";
 class DSToggleImpl extends Component {
   constructor(props) {
     super(props);
+    /**
+     * ******************************************************
+     * Drag
+     * ****************************************************** *
+     *
+     * @param clientX
+     */
     this.onDragStart = (clientX) => {
       const { startPoint, checked, isDragging, boxWidth, circleWidth } = this.state;
       const drag = calculateDrag(clientX, {
@@ -29,6 +36,13 @@ class DSToggleImpl extends Component {
       } else
         this.setDragOnChange(checked);
     };
+    /**
+     * ******************************************************
+     * StandardEvents
+     * ****************************************************** *
+     *
+     * @param e
+     */
     this.onBlur = (e) => {
       const { onBlur, id } = this.props;
       if (onBlur)
@@ -45,6 +59,7 @@ class DSToggleImpl extends Component {
         onChange,
         id,
         value
+        // checked: checkedProp,
       } = this.props;
       const newCheck = !checked;
       this.setState({
@@ -56,6 +71,11 @@ class DSToggleImpl extends Component {
       onChange(e, id);
       this.setDragOnChange(newCheck);
     };
+    /**
+     ******************************************************
+        MouseEvents
+     ******************************************************* *
+     */
     this.onMouseEnter = () => {
       this.setState({ inside: true });
     };
@@ -77,6 +97,11 @@ class DSToggleImpl extends Component {
       window.removeEventListener("mousemove", this.onMouseMove);
       window.removeEventListener("mouseup", this.onMouseUp);
     };
+    /**
+     ******************************************************
+        Touch
+     ******************************************************* *
+     */
     this.onTouchCancel = () => {
       this.setState({ inside: false });
     };
@@ -95,6 +120,7 @@ class DSToggleImpl extends Component {
       checked: props.checked || false,
       inside: false,
       isDragging: false,
+      // prevent draw of toggle before drag handle positioning calculations
       hide: true,
       drag: null,
       startPoint: null,
@@ -133,6 +159,13 @@ class DSToggleImpl extends Component {
     }
     return false;
   }
+  /**
+   * ******************************************************
+   * other
+   * ****************************************************** *
+   *
+   * @param currentCheckState
+   */
   setDragOnChange(currentCheckState) {
     this.setState(dragStartingPoints(currentCheckState));
   }

package/dist/esm/Toggle/DSToggleImpl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Toggle/DSToggleImpl.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { isValidDrag, cleanDrag, calculateDrag, dragStartingPoints } from './toggleHelper';\nimport { DSToggleRender } from './DSToggleRender';\nimport { togglePropTypes } from './props';\n\nclass DSToggleImpl extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      checked: props.checked || false,\n      inside: false,\n      isDragging: false,\n      // prevent draw of toggle before drag handle positioning calculations\n      hide: true,\n      drag: null,\n      startPoint: null,\n      circleWidth: null,\n      boxWidth: null,\n    };\n    this.circle = React.createRef();\n    this.box = React.createRef();\n\n    this.setDragOnChange = this.setDragOnChange.bind(this);\n    this.verifyElements = this.verifyElements.bind(this);\n  }\n\n  componentDidMount() {\n    this.verifyElements();\n  }\n\n  componentDidUpdate(prevProps, prevState, snapshot) {\n    if (\n      this.state.hide &&\n      this.state.circleWidth &&\n      this.state.boxWidth &&\n      prevState.hide &&\n      this.state.drag !== null\n    ) {\n      // eslint-disable-next-line react/no-did-update-set-state\n      this.setState({ hide: false });\n    }\n    if (snapshot) {\n      this.verifyElements();\n    }\n  }\n\n  /**\n   * ******************************************************\n   * Drag\n   * ****************************************************** *\n   *\n   * @param clientX\n   */\n  onDragStart = (clientX) => {\n    const { startPoint, checked, isDragging, boxWidth, circleWidth } = this.state;\n    // const { checked: checkedProp, } = this.props\n    const drag = calculateDrag(clientX, {\n      startPoint,\n      checked,\n      isDragging,\n      boxWidth,\n      circleWidth,\n    });\n    if (drag) this.setState({ drag });\n    // else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position\n    else this.setDragOnChange(checked); // set initial position\n  };\n\n  onDragStop = (e) => {\n    const { checked } = this.state;\n    // const { checked: checkedProp, } = this.props\n    if (isValidDrag(this.state)) {\n      this.onChange(e);\n      this.setState(cleanDrag);\n      // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position\n    } else this.setDragOnChange(checked); // set initial position\n  };\n\n  /**\n   * ******************************************************\n   * StandardEvents\n   * ****************************************************** *\n   *\n   * @param e\n   */\n  onBlur = (e) => {\n    const { onBlur, id } = this.props;\n    if (onBlur) onBlur(e, id);\n  };\n\n  onFocus = (e) => {\n    const { onFocus, id } = this.props;\n    if (onFocus) onFocus(e, id);\n  };\n\n  onChange = (e) => {\n    const { checked } = this.state;\n    const {\n      onChange,\n      id,\n      value,\n      // checked: checkedProp,\n    } = this.props;\n    const newCheck = !checked;\n    // this.setState({\n    //   checked: checkedProp != null ? checkedProp : newCheck,\n    // })\n    this.setState({\n      checked: newCheck,\n    });\n    e.target.value = value;\n    e.target.checked = newCheck;\n    e.checked = newCheck;\n    onChange(e, id);\n    // this.setDragOnChange(checkedProp != null ? checkedProp : newCheck) // set new position\n    this.setDragOnChange(newCheck); // set new position\n  };\n\n  /**\n   ******************************************************\n      MouseEvents\n   ******************************************************* *\n   */\n  onMouseEnter = () => {\n    this.setState({ inside: true });\n  };\n\n  onMouseLeave = () => {\n    this.setState({ inside: false });\n  };\n\n  onMouseMove = (event) => {\n    event.preventDefault();\n    this.onDragStart(event.clientX);\n  };\n\n  onMouseDown = (event) => {\n    this.onDragStart(event.clientX);\n    this.setState({ startPoint: event.clientX, isDragging: true });\n    window.addEventListener('mousemove', this.onMouseMove);\n    window.addEventListener('mouseup', this.onMouseUp);\n  };\n\n  onMouseUp = (event) => {\n    this.onDragStop(event);\n    window.removeEventListener('mousemove', this.onMouseMove);\n    window.removeEventListener('mouseup', this.onMouseUp);\n  };\n\n  /**\n   ******************************************************\n      Touch\n   ******************************************************* *\n   */\n  onTouchCancel = () => {\n    this.setState({ inside: false });\n  };\n\n  onTouchEnd = (event) => {\n    event.preventDefault();\n    this.onDragStop(event);\n  };\n\n  onTouchMove = (event) => {\n    this.onDragStart(event.touches[0].clientX);\n  };\n\n  onTouchStart = (event) => {\n    this.onDragStart(event.touches[0].clientX);\n    this.setState({ startPoint: event.touches[0].clientX, isDragging: true });\n  };\n\n  static getDerivedStateFromProps(props, state) {\n    if (props.checked === true || props.checked === false) {\n      return {\n        checked: props.checked,\n        ...dragStartingPoints(props.checked)(state),\n      };\n    }\n    return null;\n  }\n\n  getSnapshotBeforeUpdate(prevProps) {\n    const { size } = this.props;\n    if (prevProps.size !== size) {\n      return true;\n    }\n    return false;\n  }\n\n  /**\n   * ******************************************************\n   * other\n   * ****************************************************** *\n   *\n   * @param currentCheckState\n   */\n  setDragOnChange(currentCheckState) {\n    this.setState(dragStartingPoints(currentCheckState));\n  }\n\n  verifyElements() {\n    const { checked } = this.state;\n    const { checked: checkedProp } = this.props;\n    const nodesInterval = setInterval(() => {\n      // !important it checks when nodes are availables\n      if (!this.circle || !this.box || !this.circle.current || !this.box.current) return;\n      const {\n        current: { clientWidth: circleWidth },\n      } = this.circle;\n      const {\n        current: { clientWidth: boxWidth },\n      } = this.box;\n      if (!circleWidth || !boxWidth || circleWidth === boxWidth) return;\n      this.setState({\n        boxWidth,\n        circleWidth,\n      });\n      this.setDragOnChange(checkedProp != null ? checkedProp : checked);\n      // this.setDragOnChange(checked)\n      clearInterval(nodesInterval);\n    }, 5);\n  }\n\n  render() {\n    const { checked, drag, inside, hide } = this.state;\n    const dragStyle = drag !== null || checked || this.props.checked ? { left: `${drag}px` } : null;\n    return (\n      <DSToggleRender\n        {...this.props}\n        defaultState={this.props.checked}\n        checked={checked}\n        containerRef={this.box}\n        hide={hide}\n        dragStyle={dragStyle}\n        handRef={this.circle}\n        inside={inside}\n        onBlur={this.onBlur}\n        onChange={this.onChange}\n        onFocus={this.onFocus}\n        onMouseDown={this.onMouseDown}\n        onMouseEnter={this.onMouseEnter}\n        onMouseLeave={this.onMouseLeave}\n        onTouchCancel={this.onTouchCancel}\n        onTouchEnd={this.onTouchEnd}\n        onTouchMove={this.onTouchMove}\n        onTouchStart={this.onTouchStart}\n      />\n    );\n  }\n}\n\nDSToggleImpl.propTypes = togglePropTypes;\n\nexport { DSToggleImpl };\nexport default DSToggleImpl;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { Component } from 'react';\nimport { isValidDrag, cleanDrag, calculateDrag, dragStartingPoints } from './toggleHelper.js';\nimport { DSToggleRender } from './DSToggleRender.js';\nimport { togglePropTypes } from './props.js';\n\nclass DSToggleImpl extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      checked: props.checked || false,\n      inside: false,\n      isDragging: false,\n      // prevent draw of toggle before drag handle positioning calculations\n      hide: true,\n      drag: null,\n      startPoint: null,\n      circleWidth: null,\n      boxWidth: null,\n    };\n    this.circle = React.createRef();\n    this.box = React.createRef();\n\n    this.setDragOnChange = this.setDragOnChange.bind(this);\n    this.verifyElements = this.verifyElements.bind(this);\n  }\n\n  componentDidMount() {\n    this.verifyElements();\n  }\n\n  componentDidUpdate(prevProps, prevState, snapshot) {\n    if (\n      this.state.hide &&\n      this.state.circleWidth &&\n      this.state.boxWidth &&\n      prevState.hide &&\n      this.state.drag !== null\n    ) {\n      // eslint-disable-next-line react/no-did-update-set-state\n      this.setState({ hide: false });\n    }\n    if (snapshot) {\n      this.verifyElements();\n    }\n  }\n\n  /**\n   * ******************************************************\n   * Drag\n   * ****************************************************** *\n   *\n   * @param clientX\n   */\n  onDragStart = (clientX) => {\n    const { startPoint, checked, isDragging, boxWidth, circleWidth } = this.state;\n    // const { checked: checkedProp, } = this.props\n    const drag = calculateDrag(clientX, {\n      startPoint,\n      checked,\n      isDragging,\n      boxWidth,\n      circleWidth,\n    });\n    if (drag) this.setState({ drag });\n    // else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position\n    else this.setDragOnChange(checked); // set initial position\n  };\n\n  onDragStop = (e) => {\n    const { checked } = this.state;\n    // const { checked: checkedProp, } = this.props\n    if (isValidDrag(this.state)) {\n      this.onChange(e);\n      this.setState(cleanDrag);\n      // } else this.setDragOnChange(checkedProp != null ? checkedProp : checked) // set initial position\n    } else this.setDragOnChange(checked); // set initial position\n  };\n\n  /**\n   * ******************************************************\n   * StandardEvents\n   * ****************************************************** *\n   *\n   * @param e\n   */\n  onBlur = (e) => {\n    const { onBlur, id } = this.props;\n    if (onBlur) onBlur(e, id);\n  };\n\n  onFocus = (e) => {\n    const { onFocus, id } = this.props;\n    if (onFocus) onFocus(e, id);\n  };\n\n  onChange = (e) => {\n    const { checked } = this.state;\n    const {\n      onChange,\n      id,\n      value,\n      // checked: checkedProp,\n    } = this.props;\n    const newCheck = !checked;\n    // this.setState({\n    //   checked: checkedProp != null ? checkedProp : newCheck,\n    // })\n    this.setState({\n      checked: newCheck,\n    });\n    e.target.value = value;\n    e.target.checked = newCheck;\n    e.checked = newCheck;\n    onChange(e, id);\n    // this.setDragOnChange(checkedProp != null ? checkedProp : newCheck) // set new position\n    this.setDragOnChange(newCheck); // set new position\n  };\n\n  /**\n   ******************************************************\n      MouseEvents\n   ******************************************************* *\n   */\n  onMouseEnter = () => {\n    this.setState({ inside: true });\n  };\n\n  onMouseLeave = () => {\n    this.setState({ inside: false });\n  };\n\n  onMouseMove = (event) => {\n    event.preventDefault();\n    this.onDragStart(event.clientX);\n  };\n\n  onMouseDown = (event) => {\n    this.onDragStart(event.clientX);\n    this.setState({ startPoint: event.clientX, isDragging: true });\n    window.addEventListener('mousemove', this.onMouseMove);\n    window.addEventListener('mouseup', this.onMouseUp);\n  };\n\n  onMouseUp = (event) => {\n    this.onDragStop(event);\n    window.removeEventListener('mousemove', this.onMouseMove);\n    window.removeEventListener('mouseup', this.onMouseUp);\n  };\n\n  /**\n   ******************************************************\n      Touch\n   ******************************************************* *\n   */\n  onTouchCancel = () => {\n    this.setState({ inside: false });\n  };\n\n  onTouchEnd = (event) => {\n    event.preventDefault();\n    this.onDragStop(event);\n  };\n\n  onTouchMove = (event) => {\n    this.onDragStart(event.touches[0].clientX);\n  };\n\n  onTouchStart = (event) => {\n    this.onDragStart(event.touches[0].clientX);\n    this.setState({ startPoint: event.touches[0].clientX, isDragging: true });\n  };\n\n  static getDerivedStateFromProps(props, state) {\n    if (props.checked === true || props.checked === false) {\n      return {\n        checked: props.checked,\n        ...dragStartingPoints(props.checked)(state),\n      };\n    }\n    return null;\n  }\n\n  getSnapshotBeforeUpdate(prevProps) {\n    const { size } = this.props;\n    if (prevProps.size !== size) {\n      return true;\n    }\n    return false;\n  }\n\n  /**\n   * ******************************************************\n   * other\n   * ****************************************************** *\n   *\n   * @param currentCheckState\n   */\n  setDragOnChange(currentCheckState) {\n    this.setState(dragStartingPoints(currentCheckState));\n  }\n\n  verifyElements() {\n    const { checked } = this.state;\n    const { checked: checkedProp } = this.props;\n    const nodesInterval = setInterval(() => {\n      // !important it checks when nodes are availables\n      if (!this.circle || !this.box || !this.circle.current || !this.box.current) return;\n      const {\n        current: { clientWidth: circleWidth },\n      } = this.circle;\n      const {\n        current: { clientWidth: boxWidth },\n      } = this.box;\n      if (!circleWidth || !boxWidth || circleWidth === boxWidth) return;\n      this.setState({\n        boxWidth,\n        circleWidth,\n      });\n      this.setDragOnChange(checkedProp != null ? checkedProp : checked);\n      // this.setDragOnChange(checked)\n      clearInterval(nodesInterval);\n    }, 5);\n  }\n\n  render() {\n    const { checked, drag, inside, hide } = this.state;\n    const dragStyle = drag !== null || checked || this.props.checked ? { left: `${drag}px` } : null;\n    return (\n      <DSToggleRender\n        {...this.props}\n        defaultState={this.props.checked}\n        checked={checked}\n        containerRef={this.box}\n        hide={hide}\n        dragStyle={dragStyle}\n        handRef={this.circle}\n        inside={inside}\n        onBlur={this.onBlur}\n        onChange={this.onChange}\n        onFocus={this.onFocus}\n        onMouseDown={this.onMouseDown}\n        onMouseEnter={this.onMouseEnter}\n        onMouseLeave={this.onMouseLeave}\n        onTouchCancel={this.onTouchCancel}\n        onTouchEnd={this.onTouchEnd}\n        onTouchMove={this.onTouchMove}\n        onTouchStart={this.onTouchStart}\n      />\n    );\n  }\n}\n\nDSToggleImpl.propTypes = togglePropTypes;\n\nexport { DSToggleImpl };\nexport default DSToggleImpl;\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/Toggle/index.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { default as default2, DSToggleWithSchema, DSToggle } from "./DSToggle";
+import { default as default2, DSToggleWithSchema, DSToggle } from "./DSToggle.js";
 export {
   DSToggle,
   DSToggleWithSchema,

package/dist/esm/Toggle/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Toggle/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSToggleWithSchema, DSToggle } from './DSToggle';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { default, DSToggleWithSchema, DSToggle } from './DSToggle.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAAA,UAAS,oBAAoB,gBAAgB;",
   "names": ["default"]
 }

package/dist/esm/Toggle/props.js

@@ -2,16 +2,49 @@ import * as React from "react";
 import PropTypes from "prop-types";
 import { dsBasicSizes } from "@elliemae/ds-shared";
 const togglePropTypes = {
+  /**
+   * Set of Properties attached to the main container
+   */
   containerProps: PropTypes.shape({}),
+  /**
+   * Whether the toggle has error or not
+   */
   hasError: PropTypes.bool,
+  /**
+   * Whether the toggle is read only or not
+   */
   readOnly: PropTypes.bool,
+  /**
+   * Whether the toggle is disabled or not
+   */
   disabled: PropTypes.bool,
+  /**
+   * Whether the toggle is checked or not
+   */
   checked: PropTypes.bool,
+  /**
+   * Allows a function that is triggered once the toggle changes
+   */
   onChange: PropTypes.func,
+  /**
+   * Label to show when the toggle is ON
+   */
   labelOn: PropTypes.string,
+  /**
+   * Label to show when the toggle is OFF
+   */
   labelOff: PropTypes.string,
+  /**
+   * Default value once the component is initialized
+   */
   value: PropTypes.string,
+  /**
+   * ['s', 'm', 'l']
+   */
   size: PropTypes.oneOf(dsBasicSizes),
+  /**
+   * Input name
+   */
   name: PropTypes.string
 };
 export {

package/dist/esm/Toggle/props.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Toggle/props.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import PropTypes from 'prop-types';\nimport { dsBasicSizes } from '@elliemae/ds-shared';\n\nexport const togglePropTypes = {\n  /**\n   * Set of Properties attached to the main container\n   */\n  containerProps: PropTypes.shape({}),\n  /**\n   * Whether the toggle has error or not\n   */\n  hasError: PropTypes.bool,\n  /**\n   * Whether the toggle is read only or not\n   */\n  readOnly: PropTypes.bool,\n  /**\n   * Whether the toggle is disabled or not\n   */\n  disabled: PropTypes.bool,\n  /**\n   * Whether the toggle is checked or not\n   */\n  checked: PropTypes.bool,\n  /**\n   * Allows a function that is triggered once the toggle changes\n   */\n  onChange: PropTypes.func,\n  /**\n   * Label to show when the toggle is ON\n   */\n  labelOn: PropTypes.string,\n  /**\n   * Label to show when the toggle is OFF\n   */\n  labelOff: PropTypes.string,\n  /**\n   * Default value once the component is initialized\n   */\n  value: PropTypes.string,\n  /**\n   * ['s', 'm', 'l']\n   */\n  size: PropTypes.oneOf(dsBasicSizes),\n  /**\n   * Input name\n   */\n  name: PropTypes.string,\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAO,eAAe;AACtB,SAAS,oBAAoB;AAEtB,MAAM,kBAAkB;AAAA,EAI7B,gBAAgB,UAAU,MAAM,CAAC,CAAC;AAAA,EAIlC,UAAU,UAAU;AAAA,EAIpB,UAAU,UAAU;AAAA,EAIpB,UAAU,UAAU;AAAA,EAIpB,SAAS,UAAU;AAAA,EAInB,UAAU,UAAU;AAAA,EAIpB,SAAS,UAAU;AAAA,EAInB,UAAU,UAAU;AAAA,EAIpB,OAAO,UAAU;AAAA,EAIjB,MAAM,UAAU,MAAM,YAAY;AAAA,EAIlC,MAAM,UAAU;AAClB;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAO,eAAe;AACtB,SAAS,oBAAoB;AAEtB,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAI7B,gBAAgB,UAAU,MAAM,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,EAIlC,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpB,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpB,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpB,SAAS,UAAU;AAAA;AAAA;AAAA;AAAA,EAInB,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpB,SAAS,UAAU;AAAA;AAAA;AAAA;AAAA,EAInB,UAAU,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,EAIjB,MAAM,UAAU,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,EAIlC,MAAM,UAAU;AAClB;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,23 +1,23 @@
 import * as React from "react";
-export * from "./Checkbox";
-export * from "./CheckboxGroup";
-export * from "./TimeInput";
-export * from "./DateInput";
-export * from "./DateInputV2";
-export * from "./ExpandableInput";
-export * from "./FloatingLabelInput";
-export * from "./FormItem";
-export * from "./Input";
-export * from "./InputGroup";
-export * from "./InputMask";
-export * from "./InputProtected";
-export * from "./LargeInputText";
-export * from "./Radio";
-export * from "./RadioGroup";
-export * from "./RequiredMark";
-export * from "./SearchBox";
-export * from "./TextBox";
-export * from "./Toggle";
-export * from "./ComboBox";
-export * from "./ComboBoxFreeSolo";
+export * from "./Checkbox/index.js";
+export * from "./CheckboxGroup/index.js";
+export * from "./TimeInput/index.js";
+export * from "./DateInput/index.js";
+export * from "./DateInputV2/index.js";
+export * from "./ExpandableInput/index.js";
+export * from "./FloatingLabelInput/index.js";
+export * from "./FormItem/index.js";
+export * from "./Input/index.js";
+export * from "./InputGroup/index.js";
+export * from "./InputMask/index.js";
+export * from "./InputProtected/index.js";
+export * from "./LargeInputText/index.js";
+export * from "./Radio/index.js";
+export * from "./RadioGroup/index.js";
+export * from "./RequiredMark/index.js";
+export * from "./SearchBox/index.js";
+export * from "./TextBox/index.js";
+export * from "./Toggle/index.js";
+export * from "./ComboBox/index.js";
+export * from "./ComboBoxFreeSolo/index.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Checkbox';\nexport * from './CheckboxGroup';\nexport * from './TimeInput';\nexport * from './DateInput';\nexport * from './DateInputV2';\nexport * from './ExpandableInput';\nexport * from './FloatingLabelInput';\nexport * from './FormItem';\nexport * from './Input';\nexport * from './InputGroup';\nexport * from './InputMask';\nexport * from './InputProtected';\nexport * from './LargeInputText';\nexport * from './Radio';\nexport * from './RadioGroup';\nexport * from './RequiredMark';\nexport * from './SearchBox';\nexport * from './TextBox';\nexport * from './Toggle';\nexport * from './ComboBox';\nexport * from './ComboBoxFreeSolo';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './Checkbox/index.js';\nexport * from './CheckboxGroup/index.js';\nexport * from './TimeInput/index.js';\nexport * from './DateInput/index.js';\nexport * from './DateInputV2/index.js';\nexport * from './ExpandableInput/index.js';\nexport * from './FloatingLabelInput/index.js';\nexport * from './FormItem/index.js';\nexport * from './Input/index.js';\nexport * from './InputGroup/index.js';\nexport * from './InputMask/index.js';\nexport * from './InputProtected/index.js';\nexport * from './LargeInputText/index.js';\nexport * from './Radio/index.js';\nexport * from './RadioGroup/index.js';\nexport * from './RequiredMark/index.js';\nexport * from './SearchBox/index.js';\nexport * from './TextBox/index.js';\nexport * from './Toggle/index.js';\nexport * from './ComboBox/index.js';\nexport * from './ComboBoxFreeSolo/index.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []
 }