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

package/esm/FloatingLabelInput/DSFloatingLabelInput.js

@@ -1,55 +1,131 @@
-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 = () => {
+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
+  });
 };
-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
+
+export { DSFloatingLabelInput as default };

package/esm/FloatingLabelInput/FloatingLabelInputImpl.js

@@ -1,55 +1,84 @@
-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;
+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;
   return labelWidth !== prevSizes.labelWidth;
 };
+
 class FloatingLabelInputImpl extends Component {
   constructor(props) {
     super(props);
     this.resizeObserver = new ResizeObserver(() => this.updatePath());
     this.prevSizes = {};
-    this.wrapperRef = React2.createRef();
-    this.outlinePathRef = React2.createRef();
-    this.outlineIdleRef = React2.createRef();
-    this.labelRef = React2.createRef();
+    this.wrapperRef = /*#__PURE__*/React.createRef();
+    this.outlinePathRef = /*#__PURE__*/React.createRef();
+    this.outlineIdleRef = /*#__PURE__*/React.createRef();
+    this.labelRef = /*#__PURE__*/React.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 {
@@ -61,23 +90,32 @@ 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);
-    if (value && value.target)
-      return value.target.value;
+    const {
+      valueAccessor
+    } = this.props;
+    if (valueAccessor) return valueAccessor(value); // is an event
+
+    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,
@@ -97,9 +135,10 @@ class FloatingLabelInputImpl extends Component {
       useSubfix,
       optional
     } = this.props;
-    const inputProps = {
+
+    const inputProps = _objectSpread({
       ariaLabel,
-      className: "floating-label-input-controller",
+      className: 'floating-label-input-controller',
       disabled,
       hasError,
       onBlur,
@@ -109,12 +148,12 @@ class FloatingLabelInputImpl extends Component {
       value,
       innerRef,
       mask,
-      useSubfix,
-      ...extraInputProps
-    };
+      useSubfix
+    }, extraInputProps);
+
     const InputComponent = getComponentFromProps(inputComponent, inputProps);
     const isOpen = this.isOpened;
-    return /* @__PURE__ */ React2.createElement(Wrapper, {
+    return /*#__PURE__*/_jsx(Wrapper, {
       classProps: {
         hasError,
         isOpen,
@@ -126,26 +165,28 @@ class FloatingLabelInputImpl extends Component {
       onFocus: () => null,
       onMouseOut: this.handleMouseOut,
       onMouseOver: this.handleMouseOver
-    }, InputComponent, /* @__PURE__ */ React2.createElement(FloatingLabel, {
-      classProps: { isOpen },
+    }, void 0, InputComponent, /*#__PURE__*/_jsx(FloatingLabel, {
+      classProps: {
+        isOpen
+      },
       innerRef: this.labelRef
-    }, /* @__PURE__ */ React2.createElement(DSTextWrapper, {
+    }, void 0, /*#__PURE__*/_jsx(DSTextWrapper, {
       maxWidth: "100%",
       text: labelText
-    }), /* @__PURE__ */ React2.createElement(RequiredMark, {
-      optional,
-      required
-    })), /* @__PURE__ */ React2.createElement(Outline, null, /* @__PURE__ */ React2.createElement("svg", null, /* @__PURE__ */ React2.createElement(OutlinePath, {
+    }), /*#__PURE__*/_jsx(RequiredMark, {
+      optional: optional,
+      required: required
+    })), /*#__PURE__*/_jsx(Outline, {}, void 0, /*#__PURE__*/_jsx("svg", {}, void 0, /*#__PURE__*/_jsx(OutlinePath, {
       innerRef: this.outlinePathRef
-    }))), /* @__PURE__ */ React2.createElement(OutlineIdle, {
+    }))), /*#__PURE__*/_jsx(OutlineIdle, {
       innerRef: this.outlineIdleRef
     }));
   }
+
 }
-FloatingLabelInputImpl.defaultProps = { onChange: () => null };
-var FloatingLabelInputImpl_default = FloatingLabelInputImpl;
-export {
-  FloatingLabelInputImpl,
-  FloatingLabelInputImpl_default as default
+
+FloatingLabelInputImpl.defaultProps = {
+  onChange: () => null
 };
-//# sourceMappingURL=FloatingLabelInputImpl.js.map
+
+export { FloatingLabelInputImpl as default };

package/esm/FloatingLabelInput/getSvgPath.js

@@ -1,14 +1,14 @@
-import * as React from "react";
-function getSvgPath({
-  labelWidth = 50,
-  width = 200,
-  height = 35,
-  radiusStyle,
-  hasRightRadius = true,
-  hasLeftRadius = true
-}) {
+/* eslint-disable prefer-template,max-statements,no-nested-ternary */
+function getSvgPath(_ref) {
+  let {
+    labelWidth = 50,
+    width = 200,
+    height = 35,
+    radiusStyle,
+    hasRightRadius = true,
+    hasLeftRadius = true
+  } = _ref;
   const notchWidth = labelWidth;
-  const isRtl = false;
   const radius = parseFloat(radiusStyle);
   const cornerWidth = radius + 1.3;
   const leadingStrokeLength = 4;
@@ -17,29 +17,31 @@ function getSvgPath({
   let extraSizeForLeftV = 0;
   let extraSizeForRightV = 0;
   let extraSizeForTopH = radius;
+
   if (!hasRightRadius) {
     extraSizeForH += radius;
     extraSizeForRightV = radius * 2;
   }
+
   if (!hasLeftRadius) {
     extraSizeForH += radius;
     extraSizeForLeftV = radius * 2;
   }
+
   if (!hasLeftRadius && hasRightRadius || hasRightRadius && hasLeftRadius) {
     extraSizeForTopH = 0;
   }
-  const pathMiddle = (hasRightRadius ? "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius : "") + "v" + (height - (2 * cornerWidth - (extraSizeForRightV + 1.5))) + (hasRightRadius ? "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius : "") + "h" + (-width + 2 * cornerWidth - extraSizeForH) + (hasLeftRadius ? "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + -radius : "") + "v" + (-height + (2 * cornerWidth - (extraSizeForLeftV + 1.5))) + (hasLeftRadius ? "a" + radius + "," + radius + " 0 0 1 " + radius + "," + -radius : "");
+
+  const pathMiddle = '' + (hasRightRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius : '') + 'v' + (height - (2 * cornerWidth - (extraSizeForRightV + 1.5))) + ( // right vertical line
+  hasRightRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius : '') + 'h' + (-width + 2 * cornerWidth - extraSizeForH) + (hasLeftRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius : '') + 'v' + (-height + (2 * cornerWidth - (extraSizeForLeftV + 1.5))) + ( // left vertical line
+  hasLeftRadius ? 'a' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius : '');
   let path;
-  if (!isRtl) {
-    path = "M" + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + "," + 0.5 + "h" + (width - 2 * cornerWidth - paddedNotchWidth - leadingStrokeLength + extraSizeForTopH) + pathMiddle + "h" + leadingStrokeLength;
-  } else {
-    path = "M" + (width - cornerWidth - leadingStrokeLength) + "," + 0.5 + "h" + leadingStrokeLength + pathMiddle + "h" + (width - 2 * cornerWidth - paddedNotchWidth - leadingStrokeLength);
+
+  {
+    path = '' + 'M' + (cornerWidth + leadingStrokeLength + paddedNotchWidth) + ',' + 0.5 + 'h' + (width - 2 * cornerWidth - paddedNotchWidth - leadingStrokeLength + extraSizeForTopH) + pathMiddle + 'h' + leadingStrokeLength;
   }
+
   return path;
 }
-var getSvgPath_default = getSvgPath;
-export {
-  getSvgPath_default as default,
-  getSvgPath
-};
-//# sourceMappingURL=getSvgPath.js.map
+
+export { getSvgPath as default };

package/esm/FloatingLabelInput/index.js

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