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

package/esm/FormItem/ValidationFieldWrapper.js

@@ -1,5 +1,16 @@
-import * as React from "react";
-import { Component } from "react";
+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); 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; }
 class ValidationFieldWrapper extends Component {
   constructor(props) {
     super(props);
@@ -7,48 +18,82 @@ class ValidationFieldWrapper extends Component {
       value: props.value
     };
   }
+
   componentDidMount() {
-    const { value } = this.state;
+    const {
+      value
+    } = this.state;
     this.executeValidations(value);
   }
+
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { value } = nextProps;
-    if (value === prevState.value)
-      return null;
-    return {
-      ...prevState,
+    const {
       value
-    };
+    } = nextProps;
+    if (value === prevState.value) return null;
+    return _objectSpread(_objectSpread({}, prevState), {}, {
+      value
+    });
   }
+
   handleChange(e) {
-    const { onChange } = this.props;
-    this.setState({ value: e.target.value });
-    if (onChange)
-      onChange(e);
+    const {
+      onChange
+    } = this.props;
+    this.setState({
+      value: e.target.value
+    });
+    if (onChange) onChange(e);
   }
+
   handleBlur(e) {
-    const { onBlur, validateOnBlur } = this.props;
-    const { value } = this.state;
-    if (validateOnBlur)
-      this.executeValidations(value);
+    const {
+      onBlur,
+      validateOnBlur
+    } = this.props;
+    const {
+      value
+    } = this.state;
+    if (validateOnBlur) this.executeValidations(value);
     onBlur(e);
   }
+
   executeValidations(value) {
-    const { validations } = this.props;
+    const {
+      validations
+    } = this.props;
+
     if (validations && Array.isArray(validations)) {
-      if (!validations.some((validation) => {
-        const { error, payload } = validation({ value });
-        if (error)
-          this.setState({ validationMessage: payload, state: error });
+      if (!validations.some(validation => {
+        const {
+          error,
+          payload
+        } = validation({
+          value
+        });
+        if (error) this.setState({
+          validationMessage: payload,
+          state: error
+        });
         return error;
       })) {
-        this.setState({ hasError: false });
+        this.setState({
+          hasError: false
+        });
       }
     }
   }
+
   render() {
-    const { children } = this.props;
-    const { value, validationMessage, validationState, hasError } = this.state;
+    const {
+      children
+    } = this.props;
+    const {
+      value,
+      validationMessage,
+      validationState,
+      hasError
+    } = this.state;
     return children({
       value,
       validationMessage,
@@ -58,17 +103,17 @@ class ValidationFieldWrapper extends Component {
       onBlur: this.handleBlur
     });
   }
+
 }
 ValidationFieldWrapper.defaultProps = {
   validateOnBlur: false,
   validateOnChange: false,
-  name: "",
-  value: "",
+  name: '',
+  // name in context of the form
+  value: '',
   validate: () => null,
   onChange: () => null,
   onBlur: () => null
 };
-export {
-  ValidationFieldWrapper as default
-};
-//# sourceMappingURL=ValidationFieldWrapper.js.map
+
+export { ValidationFieldWrapper as default };

package/esm/FormItem/defaultProps.js

@@ -1,8 +1,8 @@
-import * as React from "react";
-import { DSTextBox } from "../TextBox";
-import { DSLabel } from "./Label/DSLabel";
-import { Feedback } from "./Feedback";
-import { FORMITEM_LAYOUT_VARIANTS } from "./variants";
+import DSTextBox from '../TextBox/DSTextBox.js';
+import DSLabel from './Label/DSLabel.js';
+import Feedback from './Feedback.js';
+import { FORMITEM_LAYOUT_VARIANTS } from './variants.js';
+
 const defaultProps = {
   leftLabel: false,
   floatingLabel: false,
@@ -10,34 +10,27 @@ const defaultProps = {
   labelComponent: DSLabel,
   feedbackComponent: Feedback,
   hasError: false,
-  validationMessage: "",
-  feedbackMessage: "",
+  validationMessage: '',
+  feedbackMessage: '',
   focused: false,
   autoFocus: false,
   disabled: false,
-  onChange: () => {
-  },
-  onBlur: () => {
-  },
-  onFocus: () => {
-  },
-  onPaste: () => {
-  },
-  onKeyUp: () => {
-  },
+  onChange: () => {},
+  onBlur: () => {},
+  onFocus: () => {},
+  onPaste: () => {},
+  onKeyUp: () => {},
   extraInputProps: {},
   leftAddon: null,
   rightAddon: null,
   required: false,
   optional: false,
-  useSubfix: "",
-  suffix: "",
+  useSubfix: '',
+  suffix: '',
   variant: FORMITEM_LAYOUT_VARIANTS.DEFAULT,
   containerProps: {},
   fitContent: false,
   withHighlight: false
 };
-export {
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps };

package/esm/FormItem/index.js

@@ -1,18 +1,3 @@
-import * as React from "react";
-import {
-  default as default2,
-  DSFormItemLayout,
-  FORMITEM_LAYOUT_VARIANTS,
-  DSError,
-  DSFormItemLayoutWithSchema
-} from "./DSFormItemLayout";
-import { DSErrorWithSchema } from "./Error/DSError";
-export {
-  DSError,
-  DSErrorWithSchema,
-  DSFormItemLayout,
-  DSFormItemLayoutWithSchema,
-  FORMITEM_LAYOUT_VARIANTS,
-  default2 as default
-};
-//# sourceMappingURL=index.js.map
+export { DSFormItemLayoutWithSchema, default } from './DSFormItemLayout.js';
+export { default as DSError, DSErrorWithSchema } from './Error/DSError.js';
+export { FORMITEM_LAYOUT_VARIANTS } from './variants.js';

package/esm/FormItem/props.js

@@ -1,58 +1,124 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { FORMITEM_LAYOUT_VARIANTS } from "./variants";
+import { PropTypes } from 'react-desc';
+import { FORMITEM_LAYOUT_VARIANTS } from './variants.js';
+
 const props = {
-  containerProps: PropTypes.object.description("props to inject to form item layout wrapper"),
-  disableTooltip: PropTypes.bool.description("Whether to show a tooltip or not when text does not fit").defaultValue(true),
-  leftLabel: PropTypes.bool.description("position label on the left"),
-  floatingLabel: PropTypes.bool.description("turn on floating label"),
-  id: PropTypes.string.description("id for form item layout"),
-  name: PropTypes.string.description("html name prop for form tags"),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description("form item layout element value"),
-  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description("Any input component"),
-  isShowElipsisActive: PropTypes.bool.description("Wheter to enable the ellipsis and tooltip functionality or not").defaultValue(true),
-  labelComponent: PropTypes.func.description("Label component"),
-  feedbackComponent: PropTypes.func.description("feedback component to embed on form item"),
-  labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description("label text"),
-  hasError: PropTypes.bool.description("error state"),
-  fitContent: PropTypes.bool.description("Adds fit content css property to the main container, making the layout width adapt to the input component"),
-  validationState: PropTypes.oneOf(["success", "error", "warning"]).description("validation state"),
-  validationMessage: PropTypes.string.description("validation message"),
-  feedbackMessage: PropTypes.string.description("feedback message"),
-  readOnly: PropTypes.bool.description("read only form item"),
-  focused: PropTypes.bool.description("focused state"),
-  type: PropTypes.string.description("input type"),
-  autoFocus: PropTypes.bool.description("auto focus input"),
-  disabled: PropTypes.bool.description("disabled state"),
-  onChange: PropTypes.func.description("on change handler"),
-  onBlur: PropTypes.func.description("on blur handler"),
-  extraInputProps: PropTypes.object.description("extra input props to inject"),
-  extraContent: PropTypes.element.description("extra content"),
-  leftAddon: PropTypes.element.description("left addon for form item"),
-  rightAddon: PropTypes.element.description("right addon for form item"),
-  required: PropTypes.bool.description("add required mark"),
-  optional: PropTypes.bool.description("add optional mark"),
-  onFocus: PropTypes.func.description("on focus handler"),
-  onPaste: PropTypes.func.description("on paste handler"),
-  truncateText: PropTypes.bool.description("add truncation and ellipsis"),
-  onKeyUp: PropTypes.func.description("on key up event handler"),
-  mask: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.func
-  ]).description("mask for input mask component"),
-  useSubfix: PropTypes.string.description("add suffix to input"),
-  suffix: PropTypes.string.description("suffix for input"),
-  variant: PropTypes.oneOf([
-    FORMITEM_LAYOUT_VARIANTS.DEFAULT,
-    FORMITEM_LAYOUT_VARIANTS.FOCUS,
-    FORMITEM_LAYOUT_VARIANTS.ACTIVE,
-    FORMITEM_LAYOUT_VARIANTS.DISABLED,
-    FORMITEM_LAYOUT_VARIANTS.READ_ONLY,
-    FORMITEM_LAYOUT_VARIANTS.OPTIONAL
-  ]).description("form item layout type"),
-  withHighlight: PropTypes.bool.description("adds highlight style to the input component")
+  /** props to inject to form item layout wrapper */
+  containerProps: PropTypes.object.description('props to inject to form item layout wrapper'),
+
+  /** disableTooltip */
+  disableTooltip: PropTypes.bool.description('Whether to show a tooltip or not when text does not fit').defaultValue(true),
+
+  /** position label on the left */
+  leftLabel: PropTypes.bool.description('position label on the left'),
+
+  /** turn on floating label */
+  floatingLabel: PropTypes.bool.description('turn on floating label'),
+
+  /** id for form item layout */
+  id: PropTypes.string.description('id for form item layout'),
+
+  /** html name prop for form tags */
+  name: PropTypes.string.description('html name prop for form tags'),
+
+  /** form item layout element value */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('form item layout element value'),
+
+  /** Any input component */
+  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Any input component'),
+
+  /** isShowElipsisActive */
+
+  /** isShowElipsisActive */
+  isShowElipsisActive: PropTypes.bool.description('Wheter to enable the ellipsis and tooltip functionality or not').defaultValue(true),
+
+  /** Label component  */
+  labelComponent: PropTypes.func.description('Label component'),
+
+  /** feedback component to embed on form item */
+  feedbackComponent: PropTypes.func.description('feedback component to embed on form item'),
+
+  /** label text */
+  labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).description('label text'),
+
+  /** error state */
+  hasError: PropTypes.bool.description('error state'),
+
+  /** add fit content to form container */
+  fitContent: PropTypes.bool.description('Adds fit content css property to the main container, making the layout width adapt to the input component'),
+
+  /** validation state */
+  validationState: PropTypes.oneOf(['success', 'error', 'warning']).description('validation state'),
+
+  /** validation message */
+  validationMessage: PropTypes.string.description('validation message'),
+
+  /** feedback message */
+  feedbackMessage: PropTypes.string.description('feedback message'),
+
+  /** read only form item */
+  readOnly: PropTypes.bool.description('read only form item'),
+
+  /** focused state */
+  focused: PropTypes.bool.description('focused state'),
+
+  /** input type */
+  type: PropTypes.string.description('input type'),
+
+  /** auto focus input */
+  autoFocus: PropTypes.bool.description('auto focus input'),
+
+  /** disabled state */
+  disabled: PropTypes.bool.description('disabled state'),
+
+  /** on change handler */
+  onChange: PropTypes.func.description('on change handler'),
+
+  /** on blur handler */
+  onBlur: PropTypes.func.description('on blur handler'),
+
+  /** extra input props to inject */
+  extraInputProps: PropTypes.object.description('extra input props to inject'),
+
+  /** extra content */
+  extraContent: PropTypes.element.description('extra content'),
+
+  /** left addon for form item */
+  leftAddon: PropTypes.element.description('left addon for form item'),
+
+  /** right addon for form item */
+  rightAddon: PropTypes.element.description('right addon for form item'),
+
+  /** add required mark */
+  required: PropTypes.bool.description('add required mark'),
+
+  /** add optional mark */
+  optional: PropTypes.bool.description('add optional mark'),
+
+  /** on focus handler */
+  onFocus: PropTypes.func.description('on focus handler'),
+
+  /** on paste handler */
+  onPaste: PropTypes.func.description('on paste handler'),
+
+  /** add truncation and ellipsis */
+  truncateText: PropTypes.bool.description('add truncation and ellipsis'),
+
+  /** on key up event handler */
+  onKeyUp: PropTypes.func.description('on key up event handler'),
+
+  /** mask for input mask component */
+  mask: PropTypes.oneOfType([// PropTypes.oneOf(maskTypes),
+  PropTypes.string, PropTypes.func]).description('mask for input mask component'),
+
+  /** add suffix to input */
+  useSubfix: PropTypes.string.description('add suffix to input'),
+
+  /** suffix for input */
+  suffix: PropTypes.string.description('suffix for input'),
+
+  /** form item layout type */
+  variant: PropTypes.oneOf([FORMITEM_LAYOUT_VARIANTS.DEFAULT, FORMITEM_LAYOUT_VARIANTS.FOCUS, FORMITEM_LAYOUT_VARIANTS.ACTIVE, FORMITEM_LAYOUT_VARIANTS.DISABLED, FORMITEM_LAYOUT_VARIANTS.READ_ONLY, FORMITEM_LAYOUT_VARIANTS.OPTIONAL]).description('form item layout type'),
+  withHighlight: PropTypes.bool.description('adds highlight style to the input component')
 };
-export {
-  props
-};
-//# sourceMappingURL=props.js.map
+
+export { props };

package/esm/FormItem/variants.js

@@ -1,13 +1,10 @@
-import * as React from "react";
 const FORMITEM_LAYOUT_VARIANTS = {
-  DEFAULT: "variant-default",
-  FOCUS: "variant-focus",
-  ACTIVE: "variant-active",
-  DISABLED: "variant-disabled",
-  READ_ONLY: "variant-read-only",
-  OPTIONAL: "variant-optional"
+  DEFAULT: 'variant-default',
+  FOCUS: 'variant-focus',
+  ACTIVE: 'variant-active',
+  DISABLED: 'variant-disabled',
+  READ_ONLY: 'variant-read-only',
+  OPTIONAL: 'variant-optional'
 };
-export {
-  FORMITEM_LAYOUT_VARIANTS
-};
-//# sourceMappingURL=variants.js.map
+
+export { FORMITEM_LAYOUT_VARIANTS };

package/esm/Input/DSInput.js

@@ -1,69 +1,81 @@
-import * as React from "react";
-import React2 from "react";
-import { InputImpl } from "./InputImpl";
-import { InputAddonWrapper } from "./InputAddonWrapper";
-const DSInput = ({
-  containerProps = {},
-  id,
-  autoFocus = false,
-  disabled = false,
-  className = "",
-  clearable = false,
-  name = "",
-  maxLength = 255,
-  minLength = 0,
-  fluidWidth = false,
-  disableTooltip = true,
-  placeholder,
-  value = "",
-  hasError = false,
-  readOnly = false,
-  innerRef = null,
-  type = "text",
-  min = void 0,
-  max = void 0,
-  leftComponent = null,
-  rightComponent = null,
-  required = false,
-  customInputType = null,
-  variant,
-  isShowElipsisActive = true,
-  ...otherProps
-}) => /* @__PURE__ */ React2.createElement(InputImpl, {
-  ...otherProps,
-  "aria-label": otherProps["aria-label"],
-  "aria-describedby": otherProps["aria-describedby"],
-  autoFocus,
-  className: `${className} ${disabled ? "input-disabled" : ""}`,
-  clearable,
-  containerProps,
-  customInputType,
-  "data-testid": otherProps["data-testid"] || "ds-input_main-component",
-  disabled,
-  disableTooltip,
-  fluidWidth,
-  hasError,
-  id,
-  innerRef,
-  isShowElipsisActive,
-  leftComponent,
-  max,
-  maxLength,
-  min,
-  minLength,
-  name,
-  placeholder,
-  readOnly,
-  required,
-  rightComponent,
-  type,
-  value,
-  variant
-});
-var DSInput_default = DSInput;
-export {
-  DSInput,
-  InputAddonWrapper,
-  DSInput_default as default
+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';
+import InputImpl from './InputImpl.js';
+export { default as InputAddonWrapper } from './InputAddonWrapper.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["containerProps", "id", "autoFocus", "disabled", "className", "clearable", "name", "maxLength", "minLength", "fluidWidth", "disableTooltip", "placeholder", "value", "hasError", "readOnly", "innerRef", "type", "min", "max", "leftComponent", "rightComponent", "required", "customInputType", "variant", "isShowElipsisActive"];
+
+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 DSInput = _ref => {
+  let {
+    containerProps = {},
+    id,
+    autoFocus = false,
+    disabled = false,
+    className = '',
+    clearable = false,
+    name = '',
+    maxLength = 255,
+    minLength = 0,
+    fluidWidth = false,
+    disableTooltip = true,
+    placeholder,
+    value = '',
+    hasError = false,
+    readOnly = false,
+    innerRef = null,
+    type = 'text',
+    min = undefined,
+    max = undefined,
+    leftComponent = null,
+    rightComponent = null,
+    required = false,
+    customInputType = null,
+    variant,
+    isShowElipsisActive = true
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(InputImpl, _objectSpread(_objectSpread({}, otherProps), {}, {
+    "aria-label": otherProps['aria-label'],
+    "aria-describedby": otherProps['aria-describedby'],
+    autoFocus: autoFocus,
+    className: "".concat(className, " ").concat(disabled ? 'input-disabled' : ''),
+    clearable: clearable,
+    containerProps: containerProps,
+    customInputType: customInputType,
+    "data-testid": otherProps['data-testid'] || 'ds-input_main-component',
+    disabled: disabled,
+    disableTooltip: disableTooltip,
+    fluidWidth: fluidWidth,
+    hasError: hasError,
+    id: id,
+    innerRef: innerRef,
+    isShowElipsisActive: isShowElipsisActive,
+    leftComponent: leftComponent,
+    max: max,
+    maxLength: maxLength,
+    min: min,
+    minLength: minLength,
+    name: name,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    required: required,
+    rightComponent: rightComponent,
+    type: type,
+    value: value,
+    variant: variant
+  }));
 };
-//# sourceMappingURL=DSInput.js.map
+
+export { DSInput as default };