@elliemae/ds-form 2.3.0-next.0 → 3.0.0-alpha.0

package/dist/esm/Toggle/DSToggleImpl.js

@@ -0,0 +1,200 @@
+import * as React from "react";
+import React2, { Component } from "react";
+import {
+  isValidDrag,
+  cleanDrag,
+  calculateDrag,
+  dragStartingPoints
+} from "./toggleHelper";
+import { DSToggleRender } from "./DSToggleRender";
+import { togglePropTypes } from "./props";
+class DSToggleImpl extends Component {
+  constructor(props) {
+    super(props);
+    this.onDragStart = (clientX) => {
+      const {
+        startPoint,
+        checked,
+        isDragging,
+        boxWidth,
+        circleWidth
+      } = this.state;
+      const drag = calculateDrag(clientX, {
+        startPoint,
+        checked,
+        isDragging,
+        boxWidth,
+        circleWidth
+      });
+      if (drag)
+        this.setState({ drag });
+      else
+        this.setDragOnChange(checked);
+    };
+    this.onDragStop = (e) => {
+      const { checked } = this.state;
+      if (isValidDrag(this.state)) {
+        this.onChange(e);
+        this.setState(cleanDrag);
+      } else
+        this.setDragOnChange(checked);
+    };
+    this.onBlur = (e) => {
+      const { onBlur, id } = this.props;
+      if (onBlur)
+        onBlur(e, id);
+    };
+    this.onFocus = (e) => {
+      const { onFocus, id } = this.props;
+      if (onFocus)
+        onFocus(e, id);
+    };
+    this.onChange = (e) => {
+      const { checked } = this.state;
+      const {
+        onChange,
+        id,
+        value
+      } = this.props;
+      const newCheck = !checked;
+      this.setState({
+        checked: newCheck
+      });
+      e.target.value = value;
+      e.target.checked = newCheck;
+      e.checked = newCheck;
+      onChange(e, id);
+      this.setDragOnChange(newCheck);
+    };
+    this.onMouseEnter = () => {
+      this.setState({ inside: true });
+    };
+    this.onMouseLeave = () => {
+      this.setState({ inside: false });
+    };
+    this.onMouseMove = (event) => {
+      event.preventDefault();
+      this.onDragStart(event.clientX);
+    };
+    this.onMouseDown = (event) => {
+      this.onDragStart(event.clientX);
+      this.setState({ startPoint: event.clientX, isDragging: true });
+      window.addEventListener("mousemove", this.onMouseMove);
+      window.addEventListener("mouseup", this.onMouseUp);
+    };
+    this.onMouseUp = (event) => {
+      this.onDragStop(event);
+      window.removeEventListener("mousemove", this.onMouseMove);
+      window.removeEventListener("mouseup", this.onMouseUp);
+    };
+    this.onTouchCancel = () => {
+      this.setState({ inside: false });
+    };
+    this.onTouchEnd = (event) => {
+      event.preventDefault();
+      this.onDragStop(event);
+    };
+    this.onTouchMove = (event) => {
+      this.onDragStart(event.touches[0].clientX);
+    };
+    this.onTouchStart = (event) => {
+      this.onDragStart(event.touches[0].clientX);
+      this.setState({ startPoint: event.touches[0].clientX, isDragging: true });
+    };
+    this.state = {
+      checked: props.checked || false,
+      inside: false,
+      isDragging: false,
+      hide: true,
+      drag: null,
+      startPoint: null,
+      circleWidth: null,
+      boxWidth: null
+    };
+    this.circle = React2.createRef();
+    this.box = React2.createRef();
+  }
+  componentDidMount() {
+    this.verifyElements();
+  }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.state.hide && this.state.circleWidth && this.state.boxWidth && prevState.hide && this.state.drag !== null) {
+      this.setState({ hide: false });
+    }
+    if (snapshot) {
+      this.verifyElements();
+    }
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (props.checked === true || props.checked === false) {
+      return {
+        checked: props.checked,
+        ...dragStartingPoints(props.checked)(state)
+      };
+    }
+    return null;
+  }
+  getSnapshotBeforeUpdate(prevProps) {
+    const { size } = this.props;
+    if (prevProps.size !== size) {
+      return true;
+    }
+    return false;
+  }
+  setDragOnChange(currentCheckState) {
+    this.setState(dragStartingPoints(currentCheckState));
+  }
+  verifyElements() {
+    const { checked } = this.state;
+    const { checked: checkedProp } = this.props;
+    const nodesInterval = setInterval(() => {
+      if (!this.circle || !this.box || !this.circle.current || !this.box.current)
+        return;
+      const {
+        current: { clientWidth: circleWidth }
+      } = this.circle;
+      const {
+        current: { clientWidth: boxWidth }
+      } = this.box;
+      if (!circleWidth || !boxWidth || circleWidth === boxWidth)
+        return;
+      this.setState({
+        boxWidth,
+        circleWidth
+      });
+      this.setDragOnChange(checkedProp != null ? checkedProp : checked);
+      clearInterval(nodesInterval);
+    }, 5);
+  }
+  render() {
+    const { checked, drag, inside, hide } = this.state;
+    const dragStyle = drag !== null || checked || this.props.checked ? { left: `${drag}px` } : null;
+    return /* @__PURE__ */ React2.createElement(DSToggleRender, {
+      ...this.props,
+      defaultState: this.props.checked,
+      checked,
+      containerRef: this.box,
+      hide,
+      dragStyle,
+      handRef: this.circle,
+      inside,
+      onBlur: this.onBlur,
+      onChange: this.onChange,
+      onFocus: this.onFocus,
+      onMouseDown: this.onMouseDown,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      onTouchCancel: this.onTouchCancel,
+      onTouchEnd: this.onTouchEnd,
+      onTouchMove: this.onTouchMove,
+      onTouchStart: this.onTouchStart
+    });
+  }
+}
+DSToggleImpl.propTypes = togglePropTypes;
+var DSToggleImpl_default = DSToggleImpl;
+export {
+  DSToggleImpl,
+  DSToggleImpl_default as default
+};
+//# sourceMappingURL=DSToggleImpl.js.map

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

@@ -0,0 +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 {\n  isValidDrag,\n  cleanDrag,\n  calculateDrag,\n  dragStartingPoints,\n} 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\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 {\n      startPoint,\n      checked,\n      isDragging,\n      boxWidth,\n      circleWidth,\n    } = 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      MouseEvents\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      Touch\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 (\n        !this.circle ||\n        !this.box ||\n        !this.circle.current ||\n        !this.box.current\n      )\n        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 =\n      drag !== null || checked || this.props.checked\n        ? { left: `${drag}px` }\n        : 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": []
+}

package/dist/esm/Toggle/DSToggleRender.js

@@ -0,0 +1,106 @@
+import * as React from "react";
+import React2 from "react";
+import { onClickHandlerForNonInteractiveElements } from "@elliemae/ds-utilities";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+import { DSTooltip } from "@elliemae/ds-tooltip";
+const DSToggleRender = ({
+  containerProps,
+  id,
+  className = "",
+  style = {},
+  hasError = false,
+  hide,
+  readOnly = false,
+  disabled = false,
+  checked = false,
+  onBlur = () => null,
+  onFocus = () => null,
+  onChange = () => null,
+  onMouseDown = () => null,
+  onMouseEnter = () => null,
+  onMouseLeave = () => null,
+  onTouchCancel = () => null,
+  onTouchEnd = () => null,
+  onTouchMove = () => null,
+  onTouchStart = () => null,
+  labelOn = "ON",
+  labelOff = "OFF",
+  dragStyle = {},
+  containerRef = null,
+  handRef = null,
+  name = "",
+  value = "",
+  size = "s",
+  defaultState
+}) => {
+  const {
+    cssClassName,
+    classNameBlock,
+    classNameElement
+  } = convertPropToCssClassName("form-element-toggle", className, {
+    hasError,
+    readOnly,
+    disabled,
+    checked,
+    id,
+    size
+  });
+  const allowChange = disabled || readOnly;
+  let label = checked ? /* @__PURE__ */ React2.createElement("div", {
+    className: classNameElement("icon-on")
+  }, labelOn) : /* @__PURE__ */ React2.createElement("div", {
+    className: classNameElement("icon-off")
+  }, labelOff);
+  if (readOnly) {
+    label = /* @__PURE__ */ React2.createElement(DSTooltip, {
+      interactionType: "hover",
+      title: "Read Only",
+      triggerComponent: label
+    });
+  }
+  return /* @__PURE__ */ React2.createElement("div", {
+    "data-testid": "em-ds-toggle",
+    ...containerProps,
+    "aria-disabled": disabled,
+    defaultChecked: checked,
+    defaultValue: value,
+    ...onClickHandlerForNonInteractiveElements(allowChange ? null : onChange),
+    ref: containerRef,
+    className: `${cssClassName} ${defaultState ? "default-state-checked" : ""}${hide ? " ds-form-element-toggle-hide" : ""}`,
+    onBlur,
+    onFocus,
+    "aria-checked": checked,
+    role: "checkbox",
+    tabIndex: 0
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: classNameBlock("box")
+  }, label), /* @__PURE__ */ React2.createElement("div", {
+    ref: handRef,
+    "aria-checked": checked,
+    "aria-disabled": disabled,
+    className: `${classNameElement("input")} ${defaultState ? "default-state-checked" : ""}`,
+    onMouseDown: allowChange ? null : onMouseDown,
+    onMouseEnter: allowChange ? null : onMouseEnter,
+    onMouseLeave: allowChange ? null : onMouseLeave,
+    onTouchCancel: allowChange ? null : onTouchCancel,
+    onTouchEnd: allowChange ? null : onTouchEnd,
+    onTouchMove: allowChange ? null : onTouchMove,
+    onTouchStart: allowChange ? null : onTouchStart,
+    style: {
+      ...style,
+      ...dragStyle
+    }
+  }), /* @__PURE__ */ React2.createElement("input", {
+    className: classNameElement("hidden-checkbox"),
+    defaultChecked: checked,
+    defaultValue: value,
+    name,
+    type: "checkbox"
+  }));
+};
+var DSToggleRender_default = DSToggleRender;
+export {
+  DSToggleRender,
+  DSToggleRender_default as default
+};
+//# sourceMappingURL=DSToggleRender.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Toggle/DSToggleRender.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable complexity */\nimport React from 'react';\nimport { onClickHandlerForNonInteractiveElements } from '@elliemae/ds-utilities';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport { DSTooltip } from '@elliemae/ds-tooltip';\n\nconst DSToggleRender = ({\n  containerProps,\n  id,\n  className = '',\n  style = {},\n  hasError = false,\n  hide,\n  readOnly = false,\n  disabled = false,\n  checked = false,\n  onBlur = () => null,\n  onFocus = () => null,\n  onChange = () => null,\n  onMouseDown = () => null,\n  onMouseEnter = () => null,\n  onMouseLeave = () => null,\n  onTouchCancel = () => null,\n  onTouchEnd = () => null,\n  onTouchMove = () => null,\n  onTouchStart = () => null,\n  labelOn = 'ON',\n  labelOff = 'OFF',\n  dragStyle = {},\n  containerRef = null,\n  handRef = null,\n  name = '',\n  value = '',\n  size = 's',\n  defaultState,\n}) => {\n  const {\n    cssClassName,\n    classNameBlock,\n    classNameElement,\n  } = convertPropToCssClassName('form-element-toggle', className, {\n    hasError,\n    readOnly,\n    disabled,\n    checked,\n    id,\n    size,\n  });\n  const allowChange = disabled || readOnly;\n\n  let label = checked ? (\n    <div className={classNameElement('icon-on')}>{labelOn}</div>\n  ) : (\n    <div className={classNameElement('icon-off')}>{labelOff}</div>\n  );\n\n  if (readOnly) {\n    label = (\n      <DSTooltip\n        interactionType=\"hover\"\n        title=\"Read Only\"\n        triggerComponent={label}\n      />\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"em-ds-toggle\"\n      {...containerProps}\n      aria-disabled={disabled}\n      defaultChecked={checked}\n      defaultValue={value}\n      {...onClickHandlerForNonInteractiveElements(\n        allowChange ? null : onChange,\n      )}\n      ref={containerRef}\n      className={`${cssClassName} ${\n        defaultState ? 'default-state-checked' : ''\n      }${hide ? ' ds-form-element-toggle-hide' : ''}`}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n      aria-checked={checked}\n      role=\"checkbox\"\n      tabIndex={0}\n    >\n      <div className={classNameBlock('box')}>{label}</div>\n      <div\n        ref={handRef}\n        aria-checked={checked}\n        aria-disabled={disabled}\n        className={`${classNameElement('input')} ${\n          defaultState ? 'default-state-checked' : ''\n        }`}\n        onMouseDown={allowChange ? null : onMouseDown}\n        onMouseEnter={allowChange ? null : onMouseEnter}\n        onMouseLeave={allowChange ? null : onMouseLeave}\n        onTouchCancel={allowChange ? null : onTouchCancel}\n        onTouchEnd={allowChange ? null : onTouchEnd}\n        onTouchMove={allowChange ? null : onTouchMove}\n        onTouchStart={allowChange ? null : onTouchStart}\n        style={{\n          ...style,\n          ...dragStyle,\n        }}\n      />\n      <input\n        className={classNameElement('hidden-checkbox')}\n        defaultChecked={checked}\n        defaultValue={value}\n        name={name}\n        type=\"checkbox\"\n      />\n    </div>\n  );\n};\n\nexport { DSToggleRender };\nexport default DSToggleRender;\n"],
+  "mappings": "AAAA;ACEA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV,SAAS,MAAM;AAAA,EACf,UAAU,MAAM;AAAA,EAChB,WAAW,MAAM;AAAA,EACjB,cAAc,MAAM;AAAA,EACpB,eAAe,MAAM;AAAA,EACrB,eAAe,MAAM;AAAA,EACrB,gBAAgB,MAAM;AAAA,EACtB,aAAa,MAAM;AAAA,EACnB,cAAc,MAAM;AAAA,EACpB,eAAe,MAAM;AAAA,EACrB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,MACI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,MACE,0BAA0B,uBAAuB,WAAW;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEF,QAAM,cAAc,YAAY;AAEhC,MAAI,QAAQ,UACV,qCAAC,OAAD;AAAA,IAAK,WAAW,iBAAiB;AAAA,KAAa,WAE9C,qCAAC,OAAD;AAAA,IAAK,WAAW,iBAAiB;AAAA,KAAc;AAGjD,MAAI,UAAU;AACZ,YACE,qCAAC,WAAD;AAAA,MACE,iBAAgB;AAAA,MAChB,OAAM;AAAA,MACN,kBAAkB;AAAA;AAAA;AAKxB,SACE,qCAAC,OAAD;AAAA,IACE,eAAY;AAAA,OACR;AAAA,IACJ,iBAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,cAAc;AAAA,OACV,wCACF,cAAc,OAAO;AAAA,IAEvB,KAAK;AAAA,IACL,WAAW,GAAG,gBACZ,eAAe,0BAA0B,KACxC,OAAO,iCAAiC;AAAA,IAC3C;AAAA,IACA;AAAA,IAEA,gBAAc;AAAA,IACd,MAAK;AAAA,IACL,UAAU;AAAA,KAEV,qCAAC,OAAD;AAAA,IAAK,WAAW,eAAe;AAAA,KAAS,QACxC,qCAAC,OAAD;AAAA,IACE,KAAK;AAAA,IACL,gBAAc;AAAA,IACd,iBAAe;AAAA,IACf,WAAW,GAAG,iBAAiB,YAC7B,eAAe,0BAA0B;AAAA,IAE3C,aAAa,cAAc,OAAO;AAAA,IAClC,cAAc,cAAc,OAAO;AAAA,IACnC,cAAc,cAAc,OAAO;AAAA,IACnC,eAAe,cAAc,OAAO;AAAA,IACpC,YAAY,cAAc,OAAO;AAAA,IACjC,aAAa,cAAc,OAAO;AAAA,IAClC,cAAc,cAAc,OAAO;AAAA,IACnC,OAAO;AAAA,SACF;AAAA,SACA;AAAA;AAAA,MAGP,qCAAC,SAAD;AAAA,IACE,WAAW,iBAAiB;AAAA,IAC5B,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd;AAAA,IACA,MAAK;AAAA;AAAA;AAOb,IAAO,yBAAQ;",
+  "names": []
+}

package/dist/esm/Toggle/index.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { default as default2, DSToggleWithSchema, DSToggle } from "./DSToggle";
+export {
+  DSToggle,
+  DSToggleWithSchema,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/dist/esm/Toggle/props.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import { dsBasicSizes } from "@elliemae/ds-shared/prop-types";
+const togglePropTypes = {
+  containerProps: PropTypes.shape({}),
+  hasError: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+  labelOn: PropTypes.string,
+  labelOff: PropTypes.string,
+  value: PropTypes.string,
+  size: PropTypes.oneOf(dsBasicSizes),
+  name: PropTypes.string
+};
+export {
+  togglePropTypes
+};
+//# sourceMappingURL=props.js.map

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

@@ -0,0 +1,7 @@
+{
+  "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/prop-types';\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;ACAA;AACA;AAEO,MAAM,kBAAkB;AAAA,EAI7B,gBAAgB,UAAU,MAAM;AAAA,EAIhC,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;AAAA,EAItB,MAAM,UAAU;AAAA;",
+  "names": []
+}

package/dist/esm/Toggle/toggleHelper.js

@@ -0,0 +1,40 @@
+import * as React from "react";
+const isValidDrag = ({
+  inside,
+  circleWidth,
+  drag,
+  checked,
+  boxWidth
+}) => {
+  const difference = boxWidth - circleWidth;
+  return checked ? !inside && -drag > difference / 2 : !inside && drag > boxWidth / 3;
+};
+const cleanDrag = () => ({
+  startPoint: null,
+  isDragging: false
+});
+const calculateDrag = (clientX, { startPoint, checked, isDragging, boxWidth, circleWidth }) => {
+  if (!isDragging)
+    return null;
+  const move = startPoint - clientX;
+  const drag = !checked ? clientX - startPoint : boxWidth - circleWidth - move;
+  if (!checked && clientX > 0 && clientX > startPoint && drag < boxWidth * 0.7)
+    return drag;
+  if (checked && clientX > 0 && clientX < startPoint && move < boxWidth * 0.7)
+    return drag;
+  return null;
+};
+const dragStartingPoints = (checked) => ({ circleWidth, boxWidth }) => {
+  if (checked)
+    return { drag: boxWidth - circleWidth };
+  return {
+    drag: 0
+  };
+};
+export {
+  calculateDrag,
+  cleanDrag,
+  dragStartingPoints,
+  isValidDrag
+};
+//# sourceMappingURL=toggleHelper.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/Toggle/toggleHelper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const isValidDrag = ({\n  inside,\n  circleWidth,\n  drag,\n  checked,\n  boxWidth,\n}) => {\n  const difference = boxWidth - circleWidth;\n  return checked\n    ? !inside && -drag > difference / 2\n    : !inside && drag > boxWidth / 3;\n};\n\nexport const cleanDrag = () => ({\n  startPoint: null,\n  isDragging: false,\n});\n\n// eslint-disable-next-line complexity\nexport const calculateDrag = (\n  clientX,\n  { startPoint, checked, isDragging, boxWidth, circleWidth },\n) => {\n  if (!isDragging) return null;\n  const move = startPoint - clientX;\n  const drag = !checked ? clientX - startPoint : boxWidth - circleWidth - move;\n  if (!checked && clientX > 0 && clientX > startPoint && drag < boxWidth * 0.7)\n    return drag;\n  if (checked && clientX > 0 && clientX < startPoint && move < boxWidth * 0.7)\n    return drag;\n  return null;\n};\n\nexport const dragStartingPoints = (checked) => ({ circleWidth, boxWidth }) => {\n  if (checked) return { drag: boxWidth - circleWidth };\n  return {\n    drag: 0,\n  };\n};\n"],
+  "mappings": "AAAA;ACAO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,aAAa,WAAW;AAC9B,SAAO,UACH,CAAC,UAAU,CAAC,OAAO,aAAa,IAChC,CAAC,UAAU,OAAO,WAAW;AAAA;AAG5B,MAAM,YAAY,MAAO;AAAA,EAC9B,YAAY;AAAA,EACZ,YAAY;AAAA;AAIP,MAAM,gBAAgB,CAC3B,SACA,EAAE,YAAY,SAAS,YAAY,UAAU,kBAC1C;AACH,MAAI,CAAC;AAAY,WAAO;AACxB,QAAM,OAAO,aAAa;AAC1B,QAAM,OAAO,CAAC,UAAU,UAAU,aAAa,WAAW,cAAc;AACxE,MAAI,CAAC,WAAW,UAAU,KAAK,UAAU,cAAc,OAAO,WAAW;AACvE,WAAO;AACT,MAAI,WAAW,UAAU,KAAK,UAAU,cAAc,OAAO,WAAW;AACtE,WAAO;AACT,SAAO;AAAA;AAGF,MAAM,qBAAqB,CAAC,YAAY,CAAC,EAAE,aAAa,eAAe;AAC5E,MAAI;AAAS,WAAO,EAAE,MAAM,WAAW;AACvC,SAAO;AAAA,IACL,MAAM;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +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";
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;",
+  "names": []
+}

package/dist/types/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from '@elliemae/ds-common/Checkbox';

package/dist/types/CheckboxGroup/DSCheckboxGroup.d.ts

@@ -0,0 +1,72 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+declare const DSCheckboxGroup: {
+    ({ onChange, activeValue, children, disabled, orientation, truncateText, labelProps, containerProps, }: {
+        onChange: any;
+        activeValue: any;
+        children: any;
+        disabled: any;
+        orientation: any;
+        truncateText: any;
+        labelProps: any;
+        containerProps: any;
+    }): JSX.Element;
+    propTypes: {
+        onChange: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        activeValue: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        children: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        disabled: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        orientation: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+        labelProps: {
+            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
+                deprecated: import("react-desc").PropTypesDescValidator;
+            };
+            isRequired: import("react-desc").PropTypesDescValue;
+        };
+    };
+    defaultProps: {
+        onChange: () => null;
+        activeValue: never[];
+        children: never[];
+        disabled: boolean;
+        orientation: string;
+        truncateText: boolean;
+        labelProps: {
+            feedbackMessage: string;
+            labelText: string;
+            required: boolean;
+        };
+        containerProps: {};
+    };
+};
+declare const DSCheckboxGroupWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { DSCheckboxGroup, DSCheckboxGroupWithSchema };

package/dist/types/CheckboxGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './DSCheckboxGroup';

package/dist/types/ComboBox/DSComboBox.d.ts

@@ -0,0 +1 @@
+export * from '@elliemae/ds-common/DSComboBox';

package/dist/types/ComboBox/index.d.ts

@@ -0,0 +1 @@
+export * from '@elliemae/ds-common/ComboBox';

package/dist/types/ComboBox/v1/index.d.ts

@@ -0,0 +1 @@
+export * from '@elliemae/ds-common/ComboBox/v1';