@elliemae/ds-form 2.1.0 → 2.2.0-alpha.3

package/esm/ExpandableInput/ExpandableInputImpl.js

@@ -1,50 +1,17 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { Component, cloneElement } from 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { isFunction } from '@elliemae/ds-shared/utils';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../Input/InputImpl.js';
-import InputAddonWrapper from '../Input/InputAddonWrapper.js';
-import { jsx } from 'react/jsx-runtime';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const blockName = 'expandable-input';
-const ExpandableInput = aggregatedClasses('div')(blockName, null, _ref => {
-  let {
-    isOpen
-  } = _ref;
-  return {
-    opened: isOpen
-  };
-});
-const InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, 'wrapper', _ref2 => {
-  let {
-    isOpen
-  } = _ref2;
-  return {
-    opened: isOpen
-  };
-});
+import * as React from "react";
+import React2, { Component, cloneElement } from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { isFunction } from "@elliemae/ds-shared/utils";
+import { InputAddonWrapper } from "../Input";
+const blockName = "expandable-input";
+const ExpandableInput = aggregatedClasses("div")(blockName, null, ({ isOpen }) => ({ opened: isOpen }));
+const InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, "wrapper", ({ isOpen }) => ({ opened: isOpen }));
 class ExpandableInputImpl extends Component {
-  constructor() {
-    super();
-  }
-
   componentDidUpdate(prevProps) {
-    const {
-      isOpen
-    } = this.props;
-    if (isOpen && isOpen !== prevProps.isOpen) this.input.focus();
+    const { isOpen } = this.props;
+    if (isOpen && isOpen !== prevProps.isOpen)
+      this.input.focus();
   }
-
   render() {
     const {
       innerRef,
@@ -57,39 +24,38 @@ class ExpandableInputImpl extends Component {
       onBlur,
       containerProps
     } = this.props;
-    const InputComponent = React.Children.only(children);
-
-    const handleTriggerClick = e => {
-      if (isFunction(triggerComponent.onClick)) triggerComponent.onClick(e);
-
+    const InputComponent = React2.Children.only(children);
+    const handleTriggerClick = (e) => {
+      if (isFunction(triggerComponent.onClick))
+        triggerComponent.onClick(e);
       if (isOpen) {
         onClose();
       } else {
         onOpen();
       }
     };
-
-    return /*#__PURE__*/jsx(ExpandableInput, _objectSpread(_objectSpread({}, containerProps), {}, {
-      classProps: {
-        isOpen
-      },
-      innerRef: innerRef,
-      style: {
-        width: isOpen && width
-      },
-      children: /*#__PURE__*/_jsx(InputWrapper, {
-        rightComponents: [/*#__PURE__*/cloneElement(triggerComponent, {
-          key: 'handler',
+    return /* @__PURE__ */ React2.createElement(ExpandableInput, {
+      ...containerProps,
+      classProps: { isOpen },
+      innerRef,
+      style: { width: isOpen && width }
+    }, /* @__PURE__ */ React2.createElement(InputWrapper, {
+      rightComponents: [
+        cloneElement(triggerComponent, {
+          key: "handler",
           onClick: handleTriggerClick
-        })]
-      }, void 0, /*#__PURE__*/cloneElement(InputComponent, {
-        className: 'expandable-input__input',
-        innerRef: node => this.input = node,
-        onBlur
-      }))
-    }));
+        })
+      ]
+    }, cloneElement(InputComponent, {
+      className: "expandable-input__input",
+      innerRef: (node) => this.input = node,
+      onBlur
+    })));
   }
-
 }
-
-export { ExpandableInputImpl as default };
+var ExpandableInputImpl_default = ExpandableInputImpl;
+export {
+  ExpandableInputImpl,
+  ExpandableInputImpl_default as default
+};
+//# sourceMappingURL=ExpandableInputImpl.js.map

package/esm/ExpandableInput/ExpandableInputImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/ExpandableInput/ExpandableInputImpl.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { Component, cloneElement } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { isFunction } from '@elliemae/ds-shared/utils';\nimport { InputAddonWrapper } from '../Input';\n\nconst blockName = 'expandable-input';\n\nconst ExpandableInput = aggregatedClasses('div')(\n  blockName,\n  null,\n  ({ isOpen }) => ({ opened: isOpen }),\n);\nconst InputWrapper = aggregatedClasses(InputAddonWrapper)(\n  blockName,\n  'wrapper',\n  ({ isOpen }) => ({ opened: isOpen }),\n);\n\nclass ExpandableInputImpl extends Component {\n  componentDidUpdate(prevProps) {\n    const { isOpen } = this.props;\n    if (isOpen && isOpen !== prevProps.isOpen) this.input.focus();\n  }\n\n  render() {\n    const {\n      innerRef,\n      triggerComponent,\n      children,\n      width,\n      isOpen,\n      onOpen,\n      onClose,\n      onBlur,\n      containerProps,\n    } = this.props;\n    const InputComponent = React.Children.only(children);\n    const handleTriggerClick = e => {\n      if (isFunction(triggerComponent.onClick)) triggerComponent.onClick(e);\n      if (isOpen) {\n        onClose();\n      } else {\n        onOpen();\n      }\n    };\n\n    return (\n      <ExpandableInput\n        {...containerProps}\n        classProps={{ isOpen }}\n        innerRef={innerRef}\n        style={{ width: isOpen && width }}\n      >\n        <InputWrapper\n          rightComponents={[\n            cloneElement(triggerComponent, {\n              key: 'handler',\n              onClick: handleTriggerClick,\n            }),\n          ]}\n        >\n          {cloneElement(InputComponent, {\n            className: 'expandable-input__input',\n            innerRef: node => (this.input = node),\n            onBlur,\n          })}\n        </InputWrapper>\n      </ExpandableInput>\n    );\n  }\n}\n\nexport { ExpandableInputImpl };\nexport default ExpandableInputImpl;"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,kBAAkB,kBAAkB,OACxC,WACA,MACA,CAAC,EAAE,aAAc,GAAE,QAAQ;AAE7B,MAAM,eAAe,kBAAkB,mBACrC,WACA,WACA,CAAC,EAAE,aAAc,GAAE,QAAQ;AAG7B,kCAAkC,UAAU;AAAA,EAC1C,mBAAmB,WAAW;AAC5B,UAAM,EAAE,WAAW,KAAK;AACxB,QAAI,UAAU,WAAW,UAAU;AAAQ,WAAK,MAAM;AAAA;AAAA,EAGxD,SAAS;AACP,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AACT,UAAM,iBAAiB,OAAM,SAAS,KAAK;AAC3C,UAAM,qBAAqB,OAAK;AAC9B,UAAI,WAAW,iBAAiB;AAAU,yBAAiB,QAAQ;AACnE,UAAI,QAAQ;AACV;AAAA,aACK;AACL;AAAA;AAAA;AAIJ,WACE,qCAAC,iBAAD;AAAA,SACM;AAAA,MACJ,YAAY,EAAE;AAAA,MACd;AAAA,MACA,OAAO,EAAE,OAAO,UAAU;AAAA,OAE1B,qCAAC,cAAD;AAAA,MACE,iBAAiB;AAAA,QACf,aAAa,kBAAkB;AAAA,UAC7B,KAAK;AAAA,UACL,SAAS;AAAA;AAAA;AAAA,OAIZ,aAAa,gBAAgB;AAAA,MAC5B,WAAW;AAAA,MACX,UAAU,UAAS,KAAK,QAAQ;AAAA,MAChC;AAAA;AAAA;AAAA;AASZ,IAAO,8BAAQ;",
+  "names": []
+}

package/esm/ExpandableInput/index.js

@@ -1 +1,3 @@
-export { default } from './DSExpandableInput.js';
+import * as React from "react";
+export * from "./DSExpandableInput";
+//# sourceMappingURL=index.js.map

package/esm/ExpandableInput/index.js.map

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

package/esm/FloatingLabelInput/DSFloatingLabelInput.js

@@ -1,131 +1,55 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import FloatingLabelInputImpl from './FloatingLabelInputImpl.js';
-import DSLabel from '../FormItem/Label/DSLabel.js';
-import DSTextBox from '../TextBox/DSTextBox.js';
-
-const noop = () => {};
-
-const DSFloatingLabelInput = _ref => {
-  let {
-    containerProps = {},
-    arialLabel = '',
-
-    /**
-     * Gets the reference for the input controller
-     *
-     * @param {HTMLElement} node
-     */
-    innerRef = noop,
-
-    /**
-     * Custom className for floatingLabelInput
-     */
-    className = '',
-
-    /**
-     * Props injected to the input component
-     *
-     * @type Object
-     */
-    extraInputProps = {},
-
-    /**
-     * Input controller
-     *
-     * @type {element}
-     */
-    inputComponent = DSTextBox,
-
-    /**
-     * Input value
-     *
-     * @type {string}
-     */
-    value = '',
-
-    /**
-     * Label component
-     *
-     * @type {element}
-     */
-    labelComponent = DSLabel,
-
-    /**
-     * Label text
-     *
-     * @type {string | element}
-     */
-    labelText = null,
-
-    /**
-     * Callback when input controller has changed
-     *
-     * @param event
-     */
-    onChange = noop,
-    onBlur = noop,
-    onFocus = noop,
-
-    /**
-     * Whether the label is floating or not
-     *
-     * @type {boolean}
-     */
-    isOpen = false,
-
-    /**
-     * Whether ...
-     *
-     * @type {boolean}
-     */
-    hasError = false,
-
-    /**
-     * Whether ...
-     *
-     * @type {boolean}
-     */
-    readOnly = false,
-
-    /**
-     * Whether ...
-     *
-     * @type {boolean}
-     */
-    disabled = false,
-
-    /**
-     * Whether ...
-     *
-     * @type {boolean}
-     */
-    required = false,
-    optional = false,
-    mask = null,
-    useSubfix = ''
-  } = _ref;
-  return /*#__PURE__*/_jsx(FloatingLabelInputImpl, {
-    arialLabel: arialLabel,
-    className: className,
-    disabled: disabled,
-    extraInputProps: extraInputProps,
-    hasError: hasError,
-    innerRef: innerRef,
-    inputComponent: inputComponent,
-    isOpen: isOpen,
-    labelComponent: labelComponent,
-    labelText: labelText,
-    mask: mask,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    optional: optional,
-    readOnly: readOnly,
-    required: required,
-    useSubfix: useSubfix,
-    value: value
-  });
+import * as React from "react";
+import React2 from "react";
+import { FloatingLabelInputImpl } from "./FloatingLabelInputImpl";
+import { DSLabel } from "../FormItem/Label/DSLabel";
+import { DSTextBox } from "../TextBox/DSTextBox";
+const noop = () => {
 };
-
-export { DSFloatingLabelInput as default };
+const DSFloatingLabelInput = ({
+  containerProps = {},
+  arialLabel = "",
+  innerRef = noop,
+  className = "",
+  extraInputProps = {},
+  inputComponent = DSTextBox,
+  value = "",
+  labelComponent = DSLabel,
+  labelText = null,
+  onChange = noop,
+  onBlur = noop,
+  onFocus = noop,
+  isOpen = false,
+  hasError = false,
+  readOnly = false,
+  disabled = false,
+  required = false,
+  optional = false,
+  mask = null,
+  useSubfix = ""
+}) => /* @__PURE__ */ React2.createElement(FloatingLabelInputImpl, {
+  arialLabel,
+  className,
+  disabled,
+  extraInputProps,
+  hasError,
+  innerRef,
+  inputComponent,
+  isOpen,
+  labelComponent,
+  labelText,
+  mask,
+  onBlur,
+  onChange,
+  onFocus,
+  optional,
+  readOnly,
+  required,
+  useSubfix,
+  value
+});
+var DSFloatingLabelInput_default = DSFloatingLabelInput;
+export {
+  DSFloatingLabelInput,
+  DSFloatingLabelInput_default as default
+};
+//# sourceMappingURL=DSFloatingLabelInput.js.map

package/esm/FloatingLabelInput/DSFloatingLabelInput.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FloatingLabelInput/DSFloatingLabelInput.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { FloatingLabelInputImpl } from './FloatingLabelInputImpl';\nimport { DSLabel } from '../FormItem/Label/DSLabel';\nimport { DSTextBox } from '../TextBox/DSTextBox';\n\nconst noop = () => {};\nconst DSFloatingLabelInput = ({\n  containerProps = {},\n  arialLabel = '',\n  /**\n   * Gets the reference for the input controller\n   *\n   * @param {HTMLElement} node\n   */\n  innerRef = noop,\n  /**\n   * Custom className for floatingLabelInput\n   */\n  className = '',\n  /**\n   * Props injected to the input component\n   *\n   * @type Object\n   */\n  extraInputProps = {},\n  /**\n   * Input controller\n   *\n   * @type {element}\n   */\n  inputComponent = DSTextBox,\n  /**\n   * Input value\n   *\n   * @type {string}\n   */\n  value = '',\n  /**\n   * Label component\n   *\n   * @type {element}\n   */\n  labelComponent = DSLabel,\n  /**\n   * Label text\n   *\n   * @type {string | element}\n   */\n  labelText = null,\n  /**\n   * Callback when input controller has changed\n   *\n   * @param event\n   */\n  onChange = noop,\n  onBlur = noop,\n  onFocus = noop,\n  /**\n   * Whether the label is floating or not\n   *\n   * @type {boolean}\n   */\n  isOpen = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  hasError = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  readOnly = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  disabled = false,\n  /**\n   * Whether ...\n   *\n   * @type {boolean}\n   */\n  required = false,\n  optional = false,\n  mask = null,\n  useSubfix = '',\n}) => (\n  <FloatingLabelInputImpl\n    arialLabel={arialLabel}\n    className={className}\n    disabled={disabled}\n    extraInputProps={extraInputProps}\n    hasError={hasError}\n    innerRef={innerRef}\n    inputComponent={inputComponent}\n    isOpen={isOpen}\n    labelComponent={labelComponent}\n    labelText={labelText}\n    mask={mask}\n    onBlur={onBlur}\n    onChange={onChange}\n    onFocus={onFocus}\n    optional={optional}\n    readOnly={readOnly}\n    required={required}\n    useSubfix={useSubfix}\n    value={value}\n  />\n);\n\nexport { DSFloatingLabelInput };\nexport default DSFloatingLabelInput;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,OAAO,MAAM;AAAA;AACnB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,iBAAiB;AAAA,EACjB,aAAa;AAAA,EAMb,WAAW;AAAA,EAIX,YAAY;AAAA,EAMZ,kBAAkB;AAAA,EAMlB,iBAAiB;AAAA,EAMjB,QAAQ;AAAA,EAMR,iBAAiB;AAAA,EAMjB,YAAY;AAAA,EAMZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EAMV,SAAS;AAAA,EAMT,WAAW;AAAA,EAMX,WAAW;AAAA,EAMX,WAAW;AAAA,EAMX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,MAEZ,qCAAC,wBAAD;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,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAKJ,IAAO,+BAAQ;",
+  "names": []
+}

package/esm/FloatingLabelInput/FloatingLabelInputImpl.js

@@ -1,84 +1,55 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import React, { Component } from 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-import { getComponentFromProps } from '@elliemae/ds-utilities';
-import DSTextWrapper from '@elliemae/ds-text-wrapper';
-import { ResizeObserver } from 'resize-observer';
-import getSvgPath from './getSvgPath.js';
-import RequiredMark from '../RequiredMark/RequiredMark.js';
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-const blockName = 'labeled-outline';
-const Wrapper = aggregatedClasses('div')(blockName, null, _ref => {
-  let {
-    isOpen
-  } = _ref;
-  return {
-    'has-value': isOpen
-  };
-});
-const FloatingLabel = aggregatedClasses('label')(blockName, 'label');
-const OutlineIdle = aggregatedClasses('div')(blockName, 'idle');
-const Outline = aggregatedClasses('div')(blockName, 'outline');
-const OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');
-
-const shouldUpdateSvgPath = (_ref2, prevSizes) => {
-  let {
-    width,
-    height,
-    labelWidth
-  } = _ref2;
-  if (width !== prevSizes.width) return true;
-  if (height !== prevSizes.height) return true;
+import * as React from "react";
+import React2, { Component } from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { getComponentFromProps } from "@elliemae/ds-utilities";
+import { DSTextWrapper } from "@elliemae/ds-text-wrapper";
+import { ResizeObserver } from "resize-observer";
+import { getSvgPath } from "./getSvgPath";
+import { RequiredMark } from "../RequiredMark/RequiredMark";
+const blockName = "labeled-outline";
+const Wrapper = aggregatedClasses("div")(blockName, null, ({ isOpen }) => ({
+  "has-value": isOpen
+}));
+const FloatingLabel = aggregatedClasses("label")(blockName, "label");
+const OutlineIdle = aggregatedClasses("div")(blockName, "idle");
+const Outline = aggregatedClasses("div")(blockName, "outline");
+const OutlinePath = aggregatedClasses("path")(blockName, "outline__path");
+const shouldUpdateSvgPath = ({ width, height, labelWidth }, prevSizes) => {
+  if (width !== prevSizes.width)
+    return true;
+  if (height !== prevSizes.height)
+    return true;
   return labelWidth !== prevSizes.labelWidth;
 };
-
 class FloatingLabelInputImpl extends Component {
   constructor(props) {
     super(props);
     this.resizeObserver = new ResizeObserver(() => this.updatePath());
     this.prevSizes = {};
-    this.wrapperRef = /*#__PURE__*/React.createRef();
-    this.outlinePathRef = /*#__PURE__*/React.createRef();
-    this.outlineIdleRef = /*#__PURE__*/React.createRef();
-    this.labelRef = /*#__PURE__*/React.createRef();
+    this.wrapperRef = React2.createRef();
+    this.outlinePathRef = React2.createRef();
+    this.outlineIdleRef = React2.createRef();
+    this.labelRef = React2.createRef();
     this.updatePath = this.updatePath.bind(this);
   }
-
   componentDidMount() {
     this.resizeObserver.observe(this.wrapperRef.current);
   }
-
   componentDidUpdate() {
-    if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;
+    if (!shouldUpdateSvgPath(this.sizes, this.prevSizes))
+      return;
     this.updatePath();
   }
-
   componentWillUnmount() {
     this.resizeObserver.unobserve(this.wrapperRef.current);
   }
-
   get sizes() {
-    const {
-      current: labelEl
-    } = this.labelRef;
-    const {
-      current: wrapperEl
-    } = this.wrapperRef;
-    const {
-      current: outlineIdleEl
-    } = this.outlineIdleRef;
+    const { current: labelEl } = this.labelRef;
+    const { current: wrapperEl } = this.wrapperRef;
+    const { current: outlineIdleEl } = this.outlineIdleRef;
     const elStyles = window.getComputedStyle(outlineIdleEl);
-    const leftRadius = elStyles.getPropertyValue('border-top-left-radius');
-    const rightRadius = elStyles.getPropertyValue('border-top-right-radius');
+    const leftRadius = elStyles.getPropertyValue("border-top-left-radius");
+    const rightRadius = elStyles.getPropertyValue("border-top-right-radius");
     const hasLeftRadius = parseFloat(leftRadius) !== 0;
     const hasRightRadius = parseFloat(rightRadius) !== 0;
     return {
@@ -90,32 +61,23 @@ class FloatingLabelInputImpl extends Component {
       hasRightRadius
     };
   }
-
   get isOpened() {
-    const {
-      focused,
-      isOpen,
-      value
-    } = this.props;
+    const { focused, isOpen, value } = this.props;
     return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;
   }
-
   getValue(value) {
-    const {
-      valueAccessor
-    } = this.props;
-    if (valueAccessor) return valueAccessor(value); // is an event
-
-    if (value && value.target) return value.target.value;
+    const { valueAccessor } = this.props;
+    if (valueAccessor)
+      return valueAccessor(value);
+    if (value && value.target)
+      return value.target.value;
     return value;
   }
-
   updatePath() {
     const path = getSvgPath(this.sizes);
     this.prevSizes = this.sizes;
-    this.outlinePathRef.current.setAttribute('d', path);
+    this.outlinePathRef.current.setAttribute("d", path);
   }
-
   render() {
     const {
       ariaLabel,
@@ -135,10 +97,9 @@ class FloatingLabelInputImpl extends Component {
       useSubfix,
       optional
     } = this.props;
-
-    const inputProps = _objectSpread({
+    const inputProps = {
       ariaLabel,
-      className: 'floating-label-input-controller',
+      className: "floating-label-input-controller",
       disabled,
       hasError,
       onBlur,
@@ -148,12 +109,12 @@ class FloatingLabelInputImpl extends Component {
       value,
       innerRef,
       mask,
-      useSubfix
-    }, extraInputProps);
-
+      useSubfix,
+      ...extraInputProps
+    };
     const InputComponent = getComponentFromProps(inputComponent, inputProps);
     const isOpen = this.isOpened;
-    return /*#__PURE__*/_jsx(Wrapper, {
+    return /* @__PURE__ */ React2.createElement(Wrapper, {
       classProps: {
         hasError,
         isOpen,
@@ -165,28 +126,26 @@ class FloatingLabelInputImpl extends Component {
       onFocus: () => null,
       onMouseOut: this.handleMouseOut,
       onMouseOver: this.handleMouseOver
-    }, void 0, InputComponent, /*#__PURE__*/_jsx(FloatingLabel, {
-      classProps: {
-        isOpen
-      },
+    }, InputComponent, /* @__PURE__ */ React2.createElement(FloatingLabel, {
+      classProps: { isOpen },
       innerRef: this.labelRef
-    }, void 0, /*#__PURE__*/_jsx(DSTextWrapper, {
+    }, /* @__PURE__ */ React2.createElement(DSTextWrapper, {
       maxWidth: "100%",
       text: labelText
-    }), /*#__PURE__*/_jsx(RequiredMark, {
-      optional: optional,
-      required: required
-    })), /*#__PURE__*/_jsx(Outline, {}, void 0, /*#__PURE__*/_jsx("svg", {}, void 0, /*#__PURE__*/_jsx(OutlinePath, {
+    }), /* @__PURE__ */ React2.createElement(RequiredMark, {
+      optional,
+      required
+    })), /* @__PURE__ */ React2.createElement(Outline, null, /* @__PURE__ */ React2.createElement("svg", null, /* @__PURE__ */ React2.createElement(OutlinePath, {
       innerRef: this.outlinePathRef
-    }))), /*#__PURE__*/_jsx(OutlineIdle, {
+    }))), /* @__PURE__ */ React2.createElement(OutlineIdle, {
       innerRef: this.outlineIdleRef
     }));
   }
-
 }
-
-FloatingLabelInputImpl.defaultProps = {
-  onChange: () => null
+FloatingLabelInputImpl.defaultProps = { onChange: () => null };
+var FloatingLabelInputImpl_default = FloatingLabelInputImpl;
+export {
+  FloatingLabelInputImpl,
+  FloatingLabelInputImpl_default as default
 };
-
-export { FloatingLabelInputImpl as default };
+//# sourceMappingURL=FloatingLabelInputImpl.js.map

package/esm/FloatingLabelInput/FloatingLabelInputImpl.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/FloatingLabelInput/FloatingLabelInputImpl.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/no-unused-state */\nimport React, { Component } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getComponentFromProps } from '@elliemae/ds-utilities';\nimport { DSTextWrapper } from '@elliemae/ds-text-wrapper';\nimport { ResizeObserver } from 'resize-observer';\nimport { getSvgPath } from './getSvgPath';\nimport { RequiredMark } from '../RequiredMark/RequiredMark';\n\nconst blockName = 'labeled-outline';\n\nconst Wrapper = aggregatedClasses('div')(blockName, null, ({ isOpen }) => ({\n  'has-value': isOpen,\n}));\nconst FloatingLabel = aggregatedClasses('label')(blockName, 'label');\nconst OutlineIdle = aggregatedClasses('div')(blockName, 'idle');\nconst Outline = aggregatedClasses('div')(blockName, 'outline');\nconst OutlinePath = aggregatedClasses('path')(blockName, 'outline__path');\n\nconst shouldUpdateSvgPath = ({ width, height, labelWidth }, prevSizes) => {\n  if (width !== prevSizes.width) return true;\n  if (height !== prevSizes.height) return true;\n  return labelWidth !== prevSizes.labelWidth;\n};\n\nclass FloatingLabelInputImpl extends Component {\n  resizeObserver = new ResizeObserver(() => this.updatePath());\n\n  prevSizes = {};\n\n  static defaultProps = { onChange: () => null };\n\n  constructor(props) {\n    super(props);\n    this.wrapperRef = React.createRef();\n    this.outlinePathRef = React.createRef();\n    this.outlineIdleRef = React.createRef();\n    this.labelRef = React.createRef();\n\n    this.updatePath = this.updatePath.bind(this);\n  }\n\n  componentDidMount() {\n    this.resizeObserver.observe(this.wrapperRef.current);\n  }\n\n  componentDidUpdate() {\n    if (!shouldUpdateSvgPath(this.sizes, this.prevSizes)) return;\n    this.updatePath();\n  }\n\n  componentWillUnmount() {\n    this.resizeObserver.unobserve(this.wrapperRef.current);\n  }\n\n  get sizes() {\n    const { current: labelEl } = this.labelRef;\n    const { current: wrapperEl } = this.wrapperRef;\n    const { current: outlineIdleEl } = this.outlineIdleRef;\n    const elStyles = window.getComputedStyle(outlineIdleEl);\n    const leftRadius = elStyles.getPropertyValue('border-top-left-radius');\n    const rightRadius = elStyles.getPropertyValue('border-top-right-radius');\n    const hasLeftRadius = parseFloat(leftRadius) !== 0;\n    const hasRightRadius = parseFloat(rightRadius) !== 0;\n    return {\n      labelWidth: labelEl.offsetWidth * 0.9,\n      width: wrapperEl.offsetWidth,\n      height: wrapperEl.offsetHeight,\n      radiusStyle: leftRadius,\n      hasLeftRadius,\n      hasRightRadius,\n    };\n  }\n\n  get isOpened() {\n    const { focused, isOpen, value } = this.props;\n    return focused || (Array.isArray(value) ? !!value.length : !!value) || isOpen;\n  }\n\n  getValue(value) {\n    const { valueAccessor } = this.props;\n    if (valueAccessor) return valueAccessor(value);\n    // is an event\n    if (value && value.target) return value.target.value;\n\n    return value;\n  }\n\n  updatePath() {\n    const path = getSvgPath(this.sizes);\n    this.prevSizes = this.sizes;\n    this.outlinePathRef.current.setAttribute('d', path);\n  }\n\n  render() {\n    const {\n      ariaLabel,\n      hasError,\n      readOnly,\n      disabled,\n      inputComponent,\n      labelText,\n      onBlur,\n      onFocus,\n      innerRef,\n      extraInputProps,\n      required,\n      value,\n      onChange,\n      mask,\n      useSubfix,\n      optional,\n    } = this.props;\n\n    const inputProps = {\n      ariaLabel,\n      className: 'floating-label-input-controller',\n      disabled,\n      hasError,\n      onBlur,\n      onChange,\n      onFocus,\n      readOnly,\n      value,\n      innerRef,\n      mask,\n      useSubfix,\n      ...extraInputProps,\n    };\n    const InputComponent = getComponentFromProps(inputComponent, inputProps);\n    const isOpen = this.isOpened;\n\n    return (\n      <Wrapper\n        classProps={{\n          hasError,\n          isOpen,\n          readOnly,\n          disabled,\n        }}\n        innerRef={this.wrapperRef}\n        onBlur={() => null}\n        onFocus={() => null}\n        onMouseOut={this.handleMouseOut}\n        onMouseOver={this.handleMouseOver}\n      >\n        {InputComponent}\n        <FloatingLabel classProps={{ isOpen }} innerRef={this.labelRef}>\n          <DSTextWrapper maxWidth=\"100%\" text={labelText} />\n          <RequiredMark optional={optional} required={required} />\n        </FloatingLabel>\n        <Outline>\n          <svg>\n            <OutlinePath innerRef={this.outlinePathRef} />\n          </svg>\n        </Outline>\n        <OutlineIdle innerRef={this.outlineIdleRef} />\n      </Wrapper>\n    );\n  }\n}\n\nexport { FloatingLabelInputImpl };\nexport default FloatingLabelInputImpl;\n"],
+  "mappings": "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",
+  "names": []
+}