@elliemae/ds-form 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/FormItem/DSFormItemLayout.js

@@ -1,72 +1,104 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { getComponentFromProps } from "@elliemae/ds-utilities";
-import { Group } from "@elliemae/ds-shared";
-import { DSInputGroup } from "../InputGroup";
-import { DSFloatingLabelInput } from "../FloatingLabelInput";
-import { DSError } from "./Error/DSError";
-import { props } from "./props";
-import { defaultProps } from "./defaultProps";
-import { FORMITEM_LAYOUT_VARIANTS } from "./variants";
-import { Suffix, SuffixInputWrapper, SuffixWrapper } from "./Suffix/Suffix";
-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 = ({
-  leftLabel,
-  floatingLabel,
-  name,
-  id,
-  value,
-  inputComponent: InputComponent,
-  labelComponent: LabelComponent,
-  feedbackComponent: FeedbackComponent,
-  labelText,
-  truncateText,
-  hasError,
-  validationState,
-  validationMessage,
-  feedbackMessage,
-  readOnly,
-  focused,
-  type,
-  autoFocus,
-  disabled,
-  onChange,
-  onBlur,
-  onFocus,
-  onPaste,
-  onKeyUp,
-  extraInputProps,
-  extraContent,
-  leftAddon,
-  rightAddon,
-  required,
-  optional,
-  mask,
-  useSubfix,
-  suffix,
-  variant,
-  fitContent,
-  withHighlight,
-  containerProps,
-  ...rest
-}) => {
-  const isGroup = InputComponent.type === (/* @__PURE__ */ React2.createElement(Group, null)).type;
-  const floatingLabelOverride = floatingLabel === "UNSAFE";
-  const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup;
-  const inputProps = {
-    ...extraInputProps,
+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';
+import Group from '@elliemae/ds-shared/GroupContext/Group';
+import DSInputGroup from '../InputGroup/DSInputGroup.js';
+import DSFloatingLabelInput from '../FloatingLabelInput/DSFloatingLabelInput.js';
+export { default as DSError } from './Error/DSError.js';
+import { props } from './props.js';
+import { defaultProps } from './defaultProps.js';
+export { FORMITEM_LAYOUT_VARIANTS } from './variants.js';
+import { SuffixWrapper, SuffixInputWrapper, Suffix } from './Suffix/Suffix.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var _Group;
+
+const _excluded = ["leftLabel", "floatingLabel", "name", "id", "value", "inputComponent", "labelComponent", "feedbackComponent", "labelText", "truncateText", "hasError", "validationState", "validationMessage", "feedbackMessage", "readOnly", "focused", "type", "autoFocus", "disabled", "onChange", "onBlur", "onFocus", "onPaste", "onKeyUp", "extraInputProps", "extraContent", "leftAddon", "rightAddon", "required", "optional", "mask", "useSubfix", "suffix", "variant", "fitContent", "withHighlight", "containerProps"];
+
+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 = 'form-item';
+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 {
+    leftLabel,
+    floatingLabel,
+    name,
+    id,
+    value,
+    inputComponent: InputComponent,
+    labelComponent: LabelComponent,
+    feedbackComponent: FeedbackComponent,
+    labelText,
+    truncateText,
+    hasError,
+    // orientation = 'vertical', // one of [ vertical, horizontal ]
+    validationState,
+    // one of [ success, error, warning ]
+    validationMessage,
+    feedbackMessage,
+    readOnly,
+    focused,
+    type,
+    autoFocus,
+    disabled,
+    onChange,
+    onBlur,
+    onFocus,
+    onPaste,
+    onKeyUp,
+    extraInputProps,
+    extraContent,
+    leftAddon,
+    rightAddon,
+    required,
+    optional,
+    mask,
+    useSubfix,
+    suffix,
+    variant,
+    fitContent,
+    withHighlight,
+    containerProps
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  const isGroup = InputComponent.type === (_Group || (_Group = /*#__PURE__*/_jsx(Group, {}))).type;
+
+  const floatingLabelOverride = floatingLabel === 'UNSAFE';
+  const WrapperContentComp = !isGroup ? WrapperContent : WrapperContentGroup; // group the input props to not duplicate it inside the specific inputComponent (floating or not)
+
+  const inputProps = _objectSpread(_objectSpread({}, extraInputProps), {}, {
     disabled,
-    hasError: hasError || validationState === "error",
+    hasError: hasError || validationState === 'error',
     id,
     name,
     type,
@@ -81,35 +113,39 @@ const DSFormItemLayout = ({
     mask,
     useSubfix,
     variant,
-    required,
-    ...rest
-  };
-  const renderInput = (Input) => leftAddon || rightAddon ? /* @__PURE__ */ React2.createElement(DSInputGroup, {
-    leftAddon,
-    rightAddon,
-    variant
-  }, Input) : Input;
-  const renderFloating = /* @__PURE__ */ React2.createElement(DSFloatingLabelInput, {
-    ...inputProps,
-    extraInputProps,
-    focused,
+    required
+  }, rest);
+
+  const renderInput = Input => leftAddon || rightAddon ? /*#__PURE__*/_jsx(DSInputGroup, {
+    leftAddon: leftAddon,
+    rightAddon: rightAddon,
+    variant: variant
+  }, void 0, Input) : Input;
+
+  const renderFloating = /*#__PURE__*/jsx(DSFloatingLabelInput, _objectSpread(_objectSpread({}, inputProps), {}, {
+    extraInputProps: extraInputProps,
+    focused: focused,
     inputComponent: InputComponent,
     labelComponent: LabelComponent,
-    labelText,
-    optional,
-    required,
-    variant
+    labelText: labelText,
+    optional: optional,
+    required: required,
+    variant: variant
+  }));
+
+  const InputWithLabel = floatingLabelOverride ? renderInput(renderFloating) : /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(LabelComponent, {
+      htmlFor: id || name,
+      label: labelText,
+      optional: optional,
+      required: required,
+      isGroup: isGroup,
+      truncateText: truncateText
+    }), renderInput(getComponentFromProps(InputComponent, inputProps))]
   });
-  const InputWithLabel = floatingLabelOverride ? renderInput(renderFloating) : /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(LabelComponent, {
-    htmlFor: id || name,
-    label: labelText,
-    optional,
-    required,
-    isGroup,
-    truncateText
-  }), renderInput(getComponentFromProps(InputComponent, inputProps)));
+
   if (suffix) {
-    return /* @__PURE__ */ React2.createElement(Wrapper, {
+    return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({
       classProps: {
         disabled,
         readOnly,
@@ -118,22 +154,24 @@ const DSFormItemLayout = ({
         variant,
         fitContent,
         withHighlight
-      },
-      ...containerProps
-    }, /* @__PURE__ */ React2.createElement(SuffixWrapper, {
-      className: "suffix-wrapper"
-    }, /* @__PURE__ */ React2.createElement(SuffixInputWrapper, {
-      className: "suffix-input-wrapper"
-    }, /* @__PURE__ */ React2.createElement(WrapperContentComp, null, InputWithLabel, extraContent), /* @__PURE__ */ React2.createElement(FeedbackComponent, {
-      hasError,
-      text: validationState || hasError ? validationMessage : feedbackMessage
-    })), /* @__PURE__ */ React2.createElement(Suffix, {
-      className: "suffix-label",
-      label: !!labelText,
-      withFeedback: Boolean(validationMessage || feedbackMessage)
-    }, suffix)));
+      }
+    }, containerProps), {}, {
+      children: /*#__PURE__*/_jsx(SuffixWrapper, {
+        className: "suffix-wrapper"
+      }, void 0, /*#__PURE__*/_jsx(SuffixInputWrapper, {
+        className: "suffix-input-wrapper"
+      }, void 0, _WrapperContentComp || (_WrapperContentComp = /*#__PURE__*/_jsx(WrapperContentComp, {}, void 0, InputWithLabel, extraContent)), /*#__PURE__*/_jsx(FeedbackComponent, {
+        hasError: hasError,
+        text: validationState || hasError ? validationMessage : feedbackMessage
+      })), /*#__PURE__*/_jsx(Suffix, {
+        className: "suffix-label",
+        label: !!labelText,
+        withFeedback: Boolean(validationMessage || feedbackMessage)
+      }, void 0, suffix))
+    }));
   }
-  return /* @__PURE__ */ React2.createElement(Wrapper, {
+
+  return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({
     classProps: {
       disabled,
       readOnly,
@@ -142,23 +180,17 @@ const DSFormItemLayout = ({
       variant,
       fitContent,
       withHighlight
-    },
-    ...containerProps
-  }, /* @__PURE__ */ React2.createElement(WrapperContentComp, null, InputWithLabel, extraContent), /* @__PURE__ */ React2.createElement(FeedbackComponent, {
-    hasError,
-    text: validationState || hasError ? validationMessage : feedbackMessage
+    }
+  }, containerProps), {}, {
+    children: [/*#__PURE__*/_jsx(WrapperContentComp, {}, void 0, InputWithLabel, extraContent), /*#__PURE__*/_jsx(FeedbackComponent, {
+      hasError: hasError,
+      text: validationState || hasError ? validationMessage : feedbackMessage
+    })]
   }));
 };
-DSFormItemLayout.propTypes = props;
+
 DSFormItemLayout.defaultProps = defaultProps;
 const DSFormItemLayoutWithSchema = describe(DSFormItemLayout);
 DSFormItemLayoutWithSchema.propTypes = props;
-var DSFormItemLayout_default = DSFormItemLayout;
-export {
-  DSError,
-  DSFormItemLayout,
-  DSFormItemLayoutWithSchema,
-  FORMITEM_LAYOUT_VARIANTS,
-  DSFormItemLayout_default as default
-};
-//# sourceMappingURL=DSFormItemLayout.js.map
+
+export { DSFormItemLayoutWithSchema, DSFormItemLayout as default };

package/esm/FormItem/Error/DSError.js

@@ -1,24 +1,26 @@
-import * as React from "react";
-import React2 from "react";
-import { PropTypes, describe } from "react-desc";
-const DSError = ({ hasError = false, errorText = "Error" }) => {
-  if (!hasError)
-    return null;
-  return /* @__PURE__ */ React2.createElement("div", {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+
+const DSError = _ref => {
+  let {
+    hasError = false,
+    errorText = 'Error'
+  } = _ref;
+  if (!hasError) return null;
+  return /*#__PURE__*/_jsx("div", {
     className: "em-ds-error"
-  }, errorText);
+  }, void 0, errorText);
 };
+
 const props = {
-  hasError: PropTypes.bool.description("error state"),
-  errorText: PropTypes.string.description("error label text")
+  /** error state */
+  hasError: PropTypes.bool.description('error state'),
+
+  /** error label text */
+  errorText: PropTypes.string.description('error label text')
 };
-DSError.propTypes = props;
 const DSErrorWithSchema = describe(DSError);
 DSErrorWithSchema.propTypes = props;
-var DSError_default = DSError;
-export {
-  DSError,
-  DSErrorWithSchema,
-  DSError_default as default
-};
-//# sourceMappingURL=DSError.js.map
+
+export { DSErrorWithSchema, DSError as default };

package/esm/FormItem/Feedback.js

@@ -1,18 +1,19 @@
-import * as React from "react";
-import React2 from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-const blockName = "form-item";
-const FeedbackSpan = aggregatedClasses("span")(blockName, "feedback");
-const Feedback = ({ text, hasError }) => {
-  if (!text)
-    return null;
-  return /* @__PURE__ */ React2.createElement(FeedbackSpan, {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+
+const blockName = 'form-item';
+const FeedbackSpan = aggregatedClasses('span')(blockName, 'feedback');
+
+const Feedback = _ref => {
+  let {
+    text,
+    hasError
+  } = _ref;
+  if (!text) return null;
+  return /*#__PURE__*/_jsx(FeedbackSpan, {
     classProps: hasError
-  }, text);
+  }, void 0, text);
 };
-var Feedback_default = Feedback;
-export {
-  Feedback,
-  Feedback_default as default
-};
-//# sourceMappingURL=Feedback.js.map
+
+export { Feedback as default };

package/esm/FormItem/Label/DSLabel.js

@@ -1,43 +1,32 @@
-import * as React from "react";
-import React2 from "react";
-import PropTypes from "prop-types";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { DSTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { RequiredMark } from "../../RequiredMark";
-const blockName = "em-ds-label";
-const Text = aggregatedClasses("span")(blockName, "text");
-const DSLabel = ({
-  children,
-  label,
-  htmlFor,
-  required,
-  optional,
-  truncateText = true,
-  isGroup = false
-}) => {
-  const Tag = isGroup ? "legend" : "label";
-  return /* @__PURE__ */ React2.createElement(Tag, {
-    className: `${blockName}${isGroup ? ` ${blockName}--group` : ""}`,
-    htmlFor
-  }, truncateText ? /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
-    value: children || label
-  }) : /* @__PURE__ */ React2.createElement(Text, null, label), /* @__PURE__ */ React2.createElement(RequiredMark, {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+import RequiredMark from '../../RequiredMark/RequiredMark.js';
+
+const blockName = 'em-ds-label';
+const Text = aggregatedClasses('span')(blockName, 'text');
+
+const DSLabel = _ref => {
+  let {
+    children,
+    label,
+    htmlFor,
+    required,
     optional,
-    required
+    truncateText = true,
+    isGroup = false
+  } = _ref;
+  const Tag = isGroup ? 'legend' : 'label';
+  return /*#__PURE__*/_jsx(Tag, {
+    className: "".concat(blockName).concat(isGroup ? " ".concat(blockName, "--group") : ''),
+    htmlFor: htmlFor
+  }, void 0, truncateText ? /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+    value: children || label
+  }) : /*#__PURE__*/_jsx(Text, {}, void 0, label), /*#__PURE__*/_jsx(RequiredMark, {
+    optional: optional,
+    required: required
   }));
 };
-DSLabel.propTypes = {
-  children: PropTypes.string,
-  label: PropTypes.string,
-  htmlFor: PropTypes.string,
-  required: PropTypes.bool,
-  optional: PropTypes.bool,
-  truncateText: PropTypes.bool,
-  isGroup: PropTypes.bool
-};
-var DSLabel_default = DSLabel;
-export {
-  DSLabel,
-  DSLabel_default as default
-};
-//# sourceMappingURL=DSLabel.js.map
+
+export { DSLabel as default };

package/esm/FormItem/Suffix/Suffix.js

@@ -1,35 +1,22 @@
-import * as React from "react";
-import styled from "styled-components";
-const Suffix = styled.div`
-  height: 2.16rem;
-  align-items: center;
-  display: flex;
-  ${(props) => {
+import styled from 'styled-components';
+
+/* eslint-disable consistent-return */
+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 = styled.div`
-  padding-right: 0.32rem;
-  flex: 1;
-`;
-const SuffixWrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-var Suffix_default = Suffix;
-export {
-  Suffix,
-  SuffixInputWrapper,
-  SuffixWrapper,
-  Suffix_default as default
-};
-//# sourceMappingURL=Suffix.js.map
+});
+const SuffixInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-126c671-1"
+})(["padding-right:0.32rem;flex:1;"]);
+const SuffixWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-126c671-2"
+})(["display:flex;align-items:center;"]);
+
+export { Suffix, SuffixInputWrapper, SuffixWrapper, Suffix as default };