@elliemae/ds-form 3.0.0-next.2 → 3.0.0-next.3

package/cjs/FormItem/Label/DSLabel.js

@@ -1,39 +0,0 @@
-'use strict';
-
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('react');
-var dsClassnames = require('@elliemae/ds-classnames');
-var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
-var RequiredMark = require('../../RequiredMark/RequiredMark.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
-
-const blockName = 'em-ds-label';
-const Text = dsClassnames.aggregatedClasses('span')(blockName, 'text');
-
-const DSLabel = _ref => {
-  let {
-    children,
-    label,
-    htmlFor,
-    required,
-    optional,
-    truncateText = true,
-    isGroup = false
-  } = _ref;
-  const Tag = isGroup ? 'legend' : 'label';
-  return /*#__PURE__*/_jsx__default["default"](Tag, {
-    className: "".concat(blockName).concat(isGroup ? " ".concat(blockName, "--group") : ''),
-    htmlFor: htmlFor
-  }, void 0, truncateText ? /*#__PURE__*/_jsx__default["default"](DSTruncatedTooltipText__default["default"], {
-    value: children || label
-  }) : /*#__PURE__*/_jsx__default["default"](Text, {}, void 0, label), /*#__PURE__*/_jsx__default["default"](RequiredMark, {
-    optional: optional,
-    required: required
-  }));
-};
-
-module.exports = DSLabel;

package/cjs/FormItem/Suffix/Suffix.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-/* eslint-disable consistent-return */
-const Suffix = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-126c671-0"
-})(["height:2.16rem;align-items:center;display:flex;", ""], props => {
-  if (props.label && !props.withFeedback) {
-    return "\n      padding-top: 1.2rem;\n      ";
-  }
-
-  if (!props.label && !props.withFeedback) {
-    return "\n      padding-top: 1rem;\n      ";
-  }
-});
-const SuffixInputWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-126c671-1"
-})(["padding-right:0.32rem;flex:1;"]);
-const SuffixWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-126c671-2"
-})(["display:flex;align-items:center;"]);
-
-exports.Suffix = Suffix;
-exports.SuffixInputWrapper = SuffixInputWrapper;
-exports.SuffixWrapper = SuffixWrapper;
-exports["default"] = Suffix;

package/cjs/FormItem/ValidationFieldWrapper.js

@@ -1,125 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/esnext.async-iterator.some.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.some.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-
-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__default["default"](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 React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: props.value
-    };
-  }
-
-  componentDidMount() {
-    const {
-      value
-    } = this.state;
-    this.executeValidations(value);
-  }
-
-  static getDerivedStateFromProps(nextProps, 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);
-  }
-
-  handleBlur(e) {
-    const {
-      onBlur,
-      validateOnBlur
-    } = this.props;
-    const {
-      value
-    } = this.state;
-    if (validateOnBlur) this.executeValidations(value);
-    onBlur(e);
-  }
-
-  executeValidations(value) {
-    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
-        });
-        return error;
-      })) {
-        this.setState({
-          hasError: false
-        });
-      }
-    }
-  }
-
-  render() {
-    const {
-      children
-    } = this.props;
-    const {
-      value,
-      validationMessage,
-      validationState,
-      hasError
-    } = this.state;
-    return children({
-      value,
-      validationMessage,
-      validationState,
-      hasError,
-      onChange: this.handleChange,
-      onBlur: this.handleBlur
-    });
-  }
-
-}
-ValidationFieldWrapper.defaultProps = {
-  validateOnBlur: false,
-  validateOnChange: false,
-  name: '',
-  // name in context of the form
-  value: '',
-  validate: () => null,
-  onChange: () => null,
-  onBlur: () => null
-};
-
-module.exports = ValidationFieldWrapper;

package/cjs/FormItem/defaultProps.js

@@ -1,40 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSTextBox = require('../TextBox/DSTextBox.js');
-var DSLabel = require('./Label/DSLabel.js');
-var Feedback = require('./Feedback.js');
-var variants = require('./variants.js');
-
-const defaultProps = {
-  leftLabel: false,
-  floatingLabel: false,
-  inputComponent: DSTextBox["default"],
-  labelComponent: DSLabel,
-  feedbackComponent: Feedback,
-  hasError: false,
-  validationMessage: '',
-  feedbackMessage: '',
-  focused: false,
-  autoFocus: false,
-  disabled: false,
-  onChange: () => {},
-  onBlur: () => {},
-  onFocus: () => {},
-  onPaste: () => {},
-  onKeyUp: () => {},
-  extraInputProps: {},
-  leftAddon: null,
-  rightAddon: null,
-  required: false,
-  optional: false,
-  useSubfix: '',
-  suffix: '',
-  variant: variants.FORMITEM_LAYOUT_VARIANTS.DEFAULT,
-  containerProps: {},
-  fitContent: false,
-  withHighlight: false
-};
-
-exports.defaultProps = defaultProps;

package/cjs/FormItem/index.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSFormItemLayout = require('./DSFormItemLayout.js');
-var DSError = require('./Error/DSError.js');
-var variants = require('./variants.js');
-
-
-
-exports.DSFormItemLayoutWithSchema = DSFormItemLayout.DSFormItemLayoutWithSchema;
-exports["default"] = DSFormItemLayout["default"];
-exports.DSError = DSError["default"];
-exports.DSErrorWithSchema = DSError.DSErrorWithSchema;
-exports.FORMITEM_LAYOUT_VARIANTS = variants.FORMITEM_LAYOUT_VARIANTS;

package/cjs/FormItem/props.js

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

package/cjs/FormItem/variants.js

@@ -1,14 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const FORMITEM_LAYOUT_VARIANTS = {
-  DEFAULT: 'variant-default',
-  FOCUS: 'variant-focus',
-  ACTIVE: 'variant-active',
-  DISABLED: 'variant-disabled',
-  READ_ONLY: 'variant-read-only',
-  OPTIONAL: 'variant-optional'
-};
-
-exports.FORMITEM_LAYOUT_VARIANTS = FORMITEM_LAYOUT_VARIANTS;

package/cjs/Input/DSInput.js

@@ -1,91 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('react');
-var InputImpl = require('./InputImpl.js');
-var InputAddonWrapper = require('./InputAddonWrapper.js');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-
-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__default["default"](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__default["default"](_ref, _excluded);
-
-  return /*#__PURE__*/jsxRuntime.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
-  }));
-};
-
-exports.InputAddonWrapper = InputAddonWrapper;
-exports["default"] = DSInput;

package/cjs/Input/InputAddonWrapper.js

@@ -1,121 +0,0 @@
-'use strict';
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/esnext.async-iterator.map.js');
-require('core-js/modules/esnext.iterator.map.js');
-require('core-js/modules/web.dom-collections.iterator.js');
-require('core-js/modules/esnext.async-iterator.for-each.js');
-require('core-js/modules/esnext.iterator.for-each.js');
-var React = require('react');
-var dsClassnames = require('@elliemae/ds-classnames');
-var jsxRuntime = require('react/jsx-runtime');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(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__default["default"](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 = 'input-addon-wrapper';
-const InputWrapper = dsClassnames.aggregatedClasses('div')(blockName);
-const InputAddon = dsClassnames.aggregatedClasses('span')(blockName, 'addon', _ref => {
-  let {
-    left,
-    right,
-    variant,
-    hasError
-  } = _ref;
-  return {
-    left,
-    right,
-    error: hasError,
-    [variant]: variant
-  };
-});
-class InputAddonWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-    this.renderAddonComponent = this.renderAddonComponent.bind(this);
-  }
-
-  getLeftAddon(components) {
-    return this.renderAddonComponent(true, components);
-  }
-
-  getRightAddon(components) {
-    return this.renderAddonComponent(false, components);
-  }
-
-  renderAddonComponent() {
-    let left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    let components = arguments.length > 1 ? arguments[1] : undefined;
-    if (!components) return null;
-
-    if (Array.isArray(components)) {
-      if (!components.filter(comp => comp).length) return null;
-    }
-
-    const {
-      containerProps,
-      hasError
-    } = this.props;
-    const classProps = left ? {
-      left: true
-    } : {
-      right: true
-    };
-    return /*#__PURE__*/jsxRuntime.jsx(InputAddon, _objectSpread(_objectSpread({
-      classProps: classProps,
-      hasError: hasError
-    }, containerProps), {}, {
-      children: components.map((component, index) => component && /*#__PURE__*/React__default["default"].cloneElement(component, _objectSpread(_objectSpread({}, component.props), {}, {
-        key: index
-      })))
-    }));
-  }
-
-  render() {
-    const {
-      className,
-      innerRef,
-      rightComponents,
-      leftComponents,
-      children,
-      variant,
-      containerProps
-    } = this.props;
-    const InputComponent = React__default["default"].Children.only(children);
-    const {
-      hasError,
-      readOnly,
-      disabled
-    } = InputComponent.props;
-    const rightAddon = this.getRightAddon([...rightComponents]);
-    const leftAddon = this.getLeftAddon([...leftComponents]);
-    return /*#__PURE__*/jsxRuntime.jsxs(InputWrapper, _objectSpread(_objectSpread({
-      className: className,
-      classProps: {
-        hasError,
-        readOnly,
-        disabled,
-        variant
-      },
-      innerRef: innerRef
-    }, containerProps), {}, {
-      children: [leftAddon, InputComponent, rightAddon]
-    }));
-  }
-
-}
-InputAddonWrapper.defaultProps = {
-  rightComponents: [],
-  leftComponents: [],
-  containerProps: {}
-};
-
-module.exports = InputAddonWrapper;