@elliemae/ds-form 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/ExpandableInput/ExpandableInputImpl.js

@@ -1,3 +1,8 @@
+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';
@@ -12,16 +17,22 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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, ({
-  isOpen
-}) => ({
-  opened: isOpen
-}));
-const InputWrapper = aggregatedClasses(InputAddonWrapper)(blockName, 'wrapper', ({
-  isOpen
-}) => ({
-  opened: isOpen
-}));
+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
+  };
+});
 class ExpandableInputImpl extends Component {
   constructor() {
     super();

package/esm/FloatingLabelInput/DSFloatingLabelInput.js

@@ -6,123 +6,126 @@ import DSTextBox from '../TextBox/DSTextBox.js';
 
 const noop = () => {};
 
-const DSFloatingLabelInput = ({
-  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 = ''
-}) => /*#__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 = _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
+  });
+};
 
 export { DSFloatingLabelInput as default };

package/esm/FloatingLabelInput/FloatingLabelInputImpl.js

@@ -1,8 +1,13 @@
+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/getComponentFromProps';
+import { getComponentFromProps } from '@elliemae/ds-utilities';
 import DSTextWrapper from '@elliemae/ds-text-wrapper';
 import { ResizeObserver } from 'resize-observer';
 import getSvgPath from './getSvgPath.js';
@@ -12,21 +17,25 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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, ({
-  isOpen
-}) => ({
-  'has-value': isOpen
-}));
+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 = ({
-  width,
-  height,
-  labelWidth
-}, prevSizes) => {
+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;
@@ -35,11 +44,8 @@ const shouldUpdateSvgPath = ({
 class FloatingLabelInputImpl extends Component {
   constructor(props) {
     super(props);
-
-    _defineProperty(this, "resizeObserver", new ResizeObserver(() => this.updatePath()));
-
-    _defineProperty(this, "prevSizes", {});
-
+    this.resizeObserver = new ResizeObserver(() => this.updatePath());
+    this.prevSizes = {};
     this.wrapperRef = /*#__PURE__*/React.createRef();
     this.outlinePathRef = /*#__PURE__*/React.createRef();
     this.outlineIdleRef = /*#__PURE__*/React.createRef();
@@ -179,8 +185,8 @@ class FloatingLabelInputImpl extends Component {
 
 }
 
-_defineProperty(FloatingLabelInputImpl, "defaultProps", {
+FloatingLabelInputImpl.defaultProps = {
   onChange: () => null
-});
+};
 
 export { FloatingLabelInputImpl as default };

package/esm/FloatingLabelInput/getSvgPath.js

@@ -1,12 +1,13 @@
 /* eslint-disable prefer-template,max-statements,no-nested-ternary */
-function getSvgPath({
-  labelWidth = 50,
-  width = 200,
-  height = 35,
-  radiusStyle,
-  hasRightRadius = true,
-  hasLeftRadius = true
-}) {
+function getSvgPath(_ref) {
+  let {
+    labelWidth = 50,
+    width = 200,
+    height = 35,
+    radiusStyle,
+    hasRightRadius = true,
+    hasLeftRadius = true
+  } = _ref;
   const notchWidth = labelWidth;
   const radius = parseFloat(radiusStyle);
   const cornerWidth = radius + 1.3;
@@ -31,7 +32,9 @@ function getSvgPath({
     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;
 
   {

package/esm/FormItem/DSFormItemLayout.js

@@ -1,10 +1,15 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
 import { describe } from 'react-desc';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import getComponentFromProps from '@elliemae/ds-utilities/getComponentFromProps';
+import { getComponentFromProps } from '@elliemae/ds-utilities';
 import Group from '@elliemae/ds-shared/GroupContext/Group';
 import DSInputGroup from '../InputGroup/DSInputGroup.js';
 import DSFloatingLabelInput from '../FloatingLabelInput/DSFloatingLabelInput.js';
@@ -23,21 +28,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const blockName = 'form-item';
-const Wrapper = aggregatedClasses('div')(blockName, null, ({
-  leftLabel,
-  variant,
-  fitContent,
-  withHighlight
-}) => ({
-  'with-left-label': leftLabel,
-  'fit-content': fitContent,
-  [variant]: variant,
-  'with-highlight': withHighlight
-}));
-const WrapperContent = aggregatedClasses('div')(`${blockName}-content`);
-const WrapperContentGroup = aggregatedClasses('fieldset')(`${blockName}-content`);
-
-const DSFormItemLayout = _ref => {
+const Wrapper = aggregatedClasses('div')(blockName, null, _ref => {
+  let {
+    leftLabel,
+    variant,
+    fitContent,
+    withHighlight
+  } = _ref;
+  return {
+    'with-left-label': leftLabel,
+    'fit-content': fitContent,
+    [variant]: variant,
+    'with-highlight': withHighlight
+  };
+});
+const WrapperContent = aggregatedClasses('div')("".concat(blockName, "-content"));
+const WrapperContentGroup = aggregatedClasses('fieldset')("".concat(blockName, "-content"));
+
+const DSFormItemLayout = _ref2 => {
   var _WrapperContentComp;
 
   let {
@@ -80,8 +88,8 @@ const DSFormItemLayout = _ref => {
     fitContent,
     withHighlight,
     containerProps
-  } = _ref,
-      rest = _objectWithoutProperties(_ref, _excluded);
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
   const isGroup = InputComponent.type === (_Group || (_Group = /*#__PURE__*/_jsx(Group, {}))).type;
 

package/esm/FormItem/Error/DSError.js

@@ -2,10 +2,11 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { PropTypes, describe } from 'react-desc';
 
-const DSError = ({
-  hasError = false,
-  errorText = 'Error'
-}) => {
+const DSError = _ref => {
+  let {
+    hasError = false,
+    errorText = 'Error'
+  } = _ref;
   if (!hasError) return null;
   return /*#__PURE__*/_jsx("div", {
     className: "em-ds-error"

package/esm/FormItem/Feedback.js

@@ -5,10 +5,11 @@ import { aggregatedClasses } from '@elliemae/ds-classnames';
 const blockName = 'form-item';
 const FeedbackSpan = aggregatedClasses('span')(blockName, 'feedback');
 
-const Feedback = ({
-  text,
-  hasError
-}) => {
+const Feedback = _ref => {
+  let {
+    text,
+    hasError
+  } = _ref;
   if (!text) return null;
   return /*#__PURE__*/_jsx(FeedbackSpan, {
     classProps: hasError

package/esm/FormItem/Label/DSLabel.js

@@ -7,18 +7,19 @@ import RequiredMark from '../../RequiredMark/RequiredMark.js';
 const blockName = 'em-ds-label';
 const Text = aggregatedClasses('span')(blockName, 'text');
 
-const DSLabel = ({
-  children,
-  label,
-  htmlFor,
-  required,
-  optional,
-  truncateText = true,
-  isGroup = false
-}) => {
+const DSLabel = _ref => {
+  let {
+    children,
+    label,
+    htmlFor,
+    required,
+    optional,
+    truncateText = true,
+    isGroup = false
+  } = _ref;
   const Tag = isGroup ? 'legend' : 'label';
   return /*#__PURE__*/_jsx(Tag, {
-    className: `${blockName}${isGroup ? ` ${blockName}--group` : ''}`,
+    className: "".concat(blockName).concat(isGroup ? " ".concat(blockName, "--group") : ''),
     htmlFor: htmlFor
   }, void 0, truncateText ? /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
     value: children || label

package/esm/FormItem/Suffix/Suffix.js

@@ -5,15 +5,11 @@ const Suffix = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-126c671-0"
 })(["height:2.16rem;align-items:center;display:flex;", ""], props => {
   if (props.label && !props.withFeedback) {
-    return `
-      padding-top: 1.2rem;
-      `;
+    return "\n      padding-top: 1.2rem;\n      ";
   }
 
   if (!props.label && !props.withFeedback) {
-    return `
-      padding-top: 1rem;
-      `;
+    return "\n      padding-top: 1rem;\n      ";
   }
 });
 const SuffixInputWrapper = /*#__PURE__*/styled.div.withConfig({

package/esm/FormItem/ValidationFieldWrapper.js

@@ -1,4 +1,11 @@
+import 'core-js/modules/esnext.async-iterator.filter.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 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
 import { Component } from 'react';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -98,8 +105,7 @@ class ValidationFieldWrapper extends Component {
   }
 
 }
-
-_defineProperty(ValidationFieldWrapper, "defaultProps", {
+ValidationFieldWrapper.defaultProps = {
   validateOnBlur: false,
   validateOnChange: false,
   name: '',
@@ -108,6 +114,6 @@ _defineProperty(ValidationFieldWrapper, "defaultProps", {
   validate: () => null,
   onChange: () => null,
   onBlur: () => null
-});
+};
 
 export { ValidationFieldWrapper as default };

package/esm/Input/DSInput.js

@@ -1,3 +1,8 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import 'react';
@@ -43,8 +48,9 @@ const DSInput = _ref => {
 
   return /*#__PURE__*/jsx(InputImpl, _objectSpread(_objectSpread({}, otherProps), {}, {
     "aria-label": otherProps['aria-label'],
+    "aria-describedby": otherProps['aria-describedby'],
     autoFocus: autoFocus,
-    className: `${className} ${disabled ? 'input-disabled' : ''}`,
+    className: "".concat(className, " ").concat(disabled ? 'input-disabled' : ''),
     clearable: clearable,
     containerProps: containerProps,
     customInputType: customInputType,