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

package/esm/LargeInputText/DSLargeInputText.js

@@ -1,107 +1,126 @@
-import * as React from "react";
-import React2, { useMemo } from "react";
-import { describe } from "react-desc";
-import {
-  convertPropToCssClassName,
-  aggregatedClasses
-} from "@elliemae/ds-classnames";
-import { props } from "./props";
-import { defaultProps } from "./defaultProps";
-const CounterArea = aggregatedClasses("div")("counter", "textarea", ({ limitError }) => ({
-  "limit-error": limitError
-}));
-const DSLargeInputText = ({
-  containerProps,
-  autoFocus,
-  className,
-  disabled,
-  name,
-  id,
-  maxLength,
-  minLength,
-  placeholder,
-  onClick,
-  onChange,
-  onFocus,
-  onBlur,
-  onKeyUp,
-  onKeyDown,
-  onPaste,
-  value,
-  hasError,
-  required,
-  readOnly,
-  resize,
-  innerRef,
-  ariaLabel,
-  ariaAutocomplete,
-  role,
-  characterLimitCounter,
-  rows,
-  errorLimit,
-  tabIndex
-}) => {
-  const limitError = useMemo(() => characterLimitCounter < String(value).length && characterLimitCounter > 0, [characterLimitCounter, value]);
-  const {
-    cssClassName,
-    classNameElement,
-    classNameBlock
-  } = convertPropToCssClassName("form-element-textarea", "text", {
-    hasError: limitError || hasError,
-    readOnly,
-    disabled
-  });
-  const handleKeyUp = (e) => {
-    onKeyUp(e);
+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 { useMemo } from 'react';
+import { describe } from 'react-desc';
+import { aggregatedClasses, convertPropToCssClassName } from '@elliemae/ds-classnames';
+import { props } from './props.js';
+import { defaultProps } from './defaultProps.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+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 CounterArea = aggregatedClasses('div')('counter', 'textarea', _ref => {
+  let {
+    limitError
+  } = _ref;
+  return {
+    'limit-error': limitError
   };
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", {
-    ...containerProps,
-    className: `${cssClassName} ${className}`
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: classNameBlock("wrapper")
-  }, /* @__PURE__ */ React2.createElement("textarea", {
-    ref: innerRef,
-    "aria-autocomplete": ariaAutocomplete,
-    "aria-label": ariaLabel,
-    "aria-multiline": true,
-    "aria-placeholder": placeholder,
-    "aria-required": required,
+});
+
+const DSLargeInputText = _ref2 => {
+  let {
+    containerProps,
     autoFocus,
-    className: classNameElement("textarea"),
-    "data-testid": "ds-large-input_main-component",
+    className,
     disabled,
+    name,
     id,
     maxLength,
     minLength,
-    name,
-    onBlur,
-    onChange,
+    placeholder,
     onClick,
+    onChange,
     onFocus,
+    onBlur,
+    onKeyUp,
     onKeyDown,
-    onKeyUp: handleKeyUp,
     onPaste,
-    placeholder,
-    role,
-    rows: String(rows),
-    style: {
-      resize
-    },
     value,
+    hasError,
+    required,
+    readOnly,
+    resize,
+    innerRef,
+    ariaLabel,
+    ariaAutocomplete,
+    role,
+    characterLimitCounter,
+    rows,
+    errorLimit,
     tabIndex
-  }))), characterLimitCounter > 0 && /* @__PURE__ */ React2.createElement(CounterArea, {
-    classProps: { limitError },
-    "data-testid": "counter-area"
-  }, `${limitError ? `${errorLimit} ${characterLimitCounter} characters.   ` : ""}${String(value).length} / ${characterLimitCounter}`));
+  } = _ref2;
+  const limitError = useMemo(() => characterLimitCounter < String(value).length && characterLimitCounter > 0, [characterLimitCounter, value]);
+  const {
+    cssClassName,
+    classNameElement,
+    classNameBlock
+  } = convertPropToCssClassName('form-element-textarea', 'text', {
+    hasError: limitError || hasError,
+    readOnly,
+    disabled
+  }); // auto size when user types
+
+  const handleKeyUp = e => {
+    // const { target } = e
+    onKeyUp(e); // if (e.key !== 'Enter') return
+    // target.style.cssText = 'height:auto; padding:0'
+    // target.style.cssText = `height: ${target.scrollHeight}px`
+  };
+
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      className: "".concat(cssClassName, " ").concat(className),
+      children: /*#__PURE__*/_jsx("div", {
+        className: classNameBlock('wrapper')
+      }, void 0, /*#__PURE__*/jsx("textarea", {
+        ref: innerRef,
+        "aria-autocomplete": ariaAutocomplete,
+        "aria-label": ariaLabel,
+        "aria-multiline": true,
+        "aria-placeholder": placeholder,
+        "aria-required": required,
+        autoFocus: autoFocus,
+        className: classNameElement('textarea'),
+        "data-testid": "ds-large-input_main-component",
+        disabled: disabled,
+        id: id,
+        maxLength: maxLength,
+        minLength: minLength,
+        name: name,
+        onBlur: onBlur,
+        onChange: onChange,
+        onClick: onClick,
+        onFocus: onFocus,
+        onKeyDown: onKeyDown,
+        onKeyUp: handleKeyUp,
+        onPaste: onPaste,
+        placeholder: placeholder,
+        role: role,
+        rows: String(rows),
+        style: {
+          resize
+        },
+        value: value,
+        tabIndex: tabIndex
+      }))
+    })), characterLimitCounter > 0 && /*#__PURE__*/_jsx(CounterArea, {
+      classProps: {
+        limitError
+      },
+      "data-testid": "counter-area"
+    }, void 0, "".concat(limitError ? "".concat(errorLimit, " ").concat(characterLimitCounter, " characters.   ") : '').concat(String(value).length, " / ").concat(characterLimitCounter))]
+  });
 };
-DSLargeInputText.propTypes = props;
+
 DSLargeInputText.defaultProps = defaultProps;
-const DSLargeInputTextWithSchema = describe(DSLargeInputText).description("A large input");
+const DSLargeInputTextWithSchema = describe(DSLargeInputText).description('A large input');
 DSLargeInputTextWithSchema.propTypes = props;
-var DSLargeInputText_default = DSLargeInputText;
-export {
-  DSLargeInputText,
-  DSLargeInputTextWithSchema,
-  DSLargeInputText_default as default
-};
-//# sourceMappingURL=DSLargeInputText.js.map
+
+export { DSLargeInputTextWithSchema, DSLargeInputText as default };

package/esm/LargeInputText/defaultProps.js

@@ -1,14 +1,13 @@
-import * as React from "react";
 const defaultProps = {
   containerProps: {},
   autoFocus: false,
-  className: "",
+  className: '',
   disabled: false,
-  name: "",
+  name: '',
   id: null,
   maxLength: null,
   minLength: 0,
-  placeholder: "",
+  placeholder: '',
   onClick: () => null,
   onChange: () => null,
   onFocus: () => null,
@@ -16,21 +15,19 @@ const defaultProps = {
   onKeyUp: () => null,
   onKeyDown: () => null,
   onPaste: () => null,
-  value: "",
+  value: '',
   hasError: false,
   required: false,
   readOnly: false,
-  resize: "vertical",
+  resize: 'vertical',
   innerRef: null,
-  ariaLabel: "Enter text",
-  ariaAutocomplete: "none",
-  role: "textbox",
+  ariaLabel: 'Enter text',
+  ariaAutocomplete: 'none',
+  role: 'textbox',
   characterLimitCounter: 0,
   rows: 3,
-  errorLimit: "Please limit your entry to",
-  tabIndex: ""
+  errorLimit: 'Please limit your entry to',
+  tabIndex: ''
 };
-export {
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps };

package/esm/LargeInputText/index.js

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

package/esm/LargeInputText/props.js

@@ -1,35 +1,124 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+import { PropTypes } from 'react-desc';
+
 const props = {
-  containerProps: PropTypes.object.description("Injected props to wrapper element of component"),
-  autoFocus: PropTypes.bool.description("Whether uses auto focus or not"),
-  className: PropTypes.string.description("CSS class"),
-  disabled: PropTypes.bool.description("Whether is disabled or not"),
-  name: PropTypes.string.description("HTML form name property"),
-  id: PropTypes.number.description("HTML id"),
-  maxLength: PropTypes.number.description("Max length for text to be entered"),
-  minLength: PropTypes.number.description("Min length for text to be entered"),
-  placeholder: PropTypes.string.description("Placeholder for the text"),
-  onClick: PropTypes.func.description("Allows a function that is triggered once the input text is clicked"),
-  onChange: PropTypes.func.description("Allows a function that is triggered once the input text changes"),
-  onFocus: PropTypes.func.description("Allows a function that is triggered once the input text is focused"),
-  onBlur: PropTypes.func.description("Allows a function that is triggered once the input text loses focus"),
-  onKeyUp: PropTypes.func.description("Allows a function that is triggered once in the input a keyboard key is released"),
-  onKeyDown: PropTypes.func.description("Allows a function that is triggered once a key is being pressed"),
-  onPaste: PropTypes.func.description("Allows a function that is triggered once the input text is pasted"),
-  value: PropTypes.string.description("Default value once the component is initialized"),
-  hasError: PropTypes.bool.description("Whether the input text has error or not"),
-  required: PropTypes.bool.description("Whether the input text is required or not"),
-  readOnly: PropTypes.bool.description("Whether the input text is read only or not"),
-  resize: PropTypes.string.description("Whether the input text style is vertical or not"),
-  innerRef: PropTypes.func.description("ref forwarded to component"),
-  ariaLabel: PropTypes.string.description("a11y aria label"),
-  ariaAutocomplete: PropTypes.string.description(""),
-  role: PropTypes.string.description("Type of input. Ex: textbox"),
-  characterLimitCounter: PropTypes.number.description("it will show a counter/limit if the value is greater than 0"),
-  tabIndex: PropTypes.string.description("Tab index html property.")
+  /** Injected props to wrapper element of component */
+  containerProps: PropTypes.object.description('Injected props to wrapper element of component'),
+
+  /**
+   * Whether uses auto focus or not
+   */
+  autoFocus: PropTypes.bool.description('Whether uses auto focus or not'),
+
+  /** CSS class */
+  className: PropTypes.string.description('CSS class'),
+
+  /**
+   * Whether is disabled or not
+   */
+  disabled: PropTypes.bool.description('Whether is disabled or not'),
+
+  /** HTML form name property */
+  name: PropTypes.string.description('HTML form name property'),
+
+  /** HTML id */
+  id: PropTypes.number.description('HTML id'),
+
+  /**
+   * Max length for text to be entered
+   */
+  maxLength: PropTypes.number.description('Max length for text to be entered'),
+
+  /**
+   * Min length for text to be entered
+   */
+  minLength: PropTypes.number.description('Min length for text to be entered'),
+
+  /**
+   * Placeholder for the text
+   */
+  placeholder: PropTypes.string.description('Placeholder for the text'),
+
+  /**
+   * Allows a function that is triggered once the input text is clicked
+   */
+  onClick: PropTypes.func.description('Allows a function that is triggered once the input text is clicked'),
+
+  /**
+   * Allows a function that is triggered once the input text changes
+   */
+  onChange: PropTypes.func.description('Allows a function that is triggered once the input text changes'),
+
+  /**
+   * Allows a function that is triggered once the input text is focused
+   */
+  onFocus: PropTypes.func.description('Allows a function that is triggered once the input text is focused'),
+
+  /**
+   * Allows a function that is triggered once the input text loses focus
+   */
+  onBlur: PropTypes.func.description('Allows a function that is triggered once the input text loses focus'),
+
+  /**
+   * Allows a function that is triggered once in the input a keyboard key is released
+   */
+  onKeyUp: PropTypes.func.description('Allows a function that is triggered once in the input a keyboard key is released'),
+
+  /**
+   * Allows a function that is triggered once a key is being pressed
+   */
+  onKeyDown: PropTypes.func.description('Allows a function that is triggered once a key is being pressed'),
+
+  /**
+   * Allows a function that is triggered once the input text is pasted
+   */
+  onPaste: PropTypes.func.description('Allows a function that is triggered once the input text is pasted'),
+
+  /**
+   * Default value once the component is initialized
+   */
+  value: PropTypes.string.description('Default value once the component is initialized'),
+
+  /**
+   * Whether the input text has error or not
+   */
+  hasError: PropTypes.bool.description('Whether the input text has error or not'),
+
+  /**
+   * Whether the input text is required or not
+   */
+  required: PropTypes.bool.description('Whether the input text is required or not'),
+
+  /**
+   * Whether the input text is read only or not
+   */
+  readOnly: PropTypes.bool.description('Whether the input text is read only or not'),
+
+  /**
+   * Whether the input text style is vertical or not
+   */
+  resize: PropTypes.string.description('Whether the input text style is vertical or not'),
+
+  /** ref forwarded to component */
+  innerRef: PropTypes.func.description('ref forwarded to component'),
+
+  /** a11y aria label */
+  ariaLabel: PropTypes.string.description('a11y aria label'),
+  ariaAutocomplete: PropTypes.string.description(''),
+
+  /**
+   * Type of input. Ex: textbox
+   */
+  role: PropTypes.string.description('Type of input. Ex: textbox'),
+
+  /**
+   * it will show a counter/limit if the value is greater than 0
+   */
+  characterLimitCounter: PropTypes.number.description('it will show a counter/limit if the value is greater than 0'),
+
+  /**
+   * Tab index html property.
+   */
+  tabIndex: PropTypes.string.description('Tab index html property.')
 };
-export {
-  props
-};
-//# sourceMappingURL=props.js.map
+
+export { props };

package/esm/MenuItem/components/MenuItem/index.js

@@ -1,34 +1,45 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { Grid } from "@elliemae/ds-grid";
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
-import { defaultProps, itemProps } from "../../props";
-import { StyledMenuItemWrapper } from "../styled";
-import { StyledItemLabel } from "./styled";
-const MenuItem = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import Grid from '@elliemae/ds-grid';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { itemProps, defaultProps } from '../../props.js';
+import { StyledMenuItemWrapper } from '../styled.js';
+import { StyledItemLabel } from './styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MenuItem = props => {
   const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
   useValidateTypescriptPropTypes(propsWithDefault, itemProps);
-  const { dsId, label, isSelected, onClick, isFocus, isActive, innerRef, onMouseEnter, onMouseLeave, wrapperStyles } = propsWithDefault;
-  return /* @__PURE__ */ React2.createElement(StyledMenuItemWrapper, {
-    "aria-selected": isSelected,
-    id: dsId,
-    role: "option",
+  const {
+    dsId,
+    label,
     isSelected,
-    isActive,
-    isFocus,
     onClick,
-    ref: innerRef,
+    isFocus,
+    isActive,
+    innerRef,
     onMouseEnter,
     onMouseLeave,
-    style: wrapperStyles
-  }, /* @__PURE__ */ React2.createElement(Grid, null, /* @__PURE__ */ React2.createElement(StyledItemLabel, null, label)));
+    wrapperStyles
+  } = propsWithDefault;
+  return /*#__PURE__*/jsx(StyledMenuItemWrapper, {
+    "aria-selected": isSelected,
+    id: dsId,
+    role: "option",
+    isSelected: isSelected,
+    isActive: isActive,
+    isFocus: isFocus,
+    onClick: onClick,
+    ref: innerRef,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    style: wrapperStyles,
+    children: /*#__PURE__*/_jsx(Grid, {}, void 0, /*#__PURE__*/_jsx(StyledItemLabel, {}, void 0, label))
+  });
 };
-MenuItem.propTypes = itemProps;
+
 const MenuItemWithSchema = describe(MenuItem);
 MenuItemWithSchema.propTypes = itemProps;
-export {
-  MenuItem,
-  MenuItemWithSchema
-};
-//# sourceMappingURL=index.js.map
+
+export { MenuItem, MenuItemWithSchema };

package/esm/MenuItem/components/MenuItem/styled.js

@@ -1,14 +1,7 @@
-import * as React from "react";
-import styled from "styled-components";
-const StyledItemLabel = styled.div`
-  display: grid;
-  align-items: center;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-`;
-export {
-  StyledItemLabel
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+
+const StyledItemLabel = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1f7cz5s-0"
+})(["display:grid;align-items:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+export { StyledItemLabel };

package/esm/MenuItem/components/MultiMenuItem/MultiMenuItem.js

@@ -1,11 +1,13 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { DSControlledCheckbox } from "@elliemae/ds-controlled-form";
-import { defaultProps, itemProps } from "../../props";
-import { StyledItemContent } from "./styled";
-import { StyledGlobalMenuItemWrapper } from "../styled";
-const MultiMenuItem = (props) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import { DSControlledCheckbox } from '@elliemae/ds-controlled-form';
+import { itemProps, defaultProps } from '../../props.js';
+import { StyledItemContent } from './styled.js';
+import { StyledGlobalMenuItemWrapper } from '../styled.js';
+import { jsx } from 'react/jsx-runtime';
+
+const MultiMenuItem = props => {
   const {
     dsId,
     value,
@@ -23,41 +25,39 @@ const MultiMenuItem = (props) => {
     tabIndex,
     render
   } = props;
-  return /* @__PURE__ */ React2.createElement(StyledGlobalMenuItemWrapper, {
+  return /*#__PURE__*/jsx(StyledGlobalMenuItemWrapper, {
     id: dsId,
-    disabled,
-    isActive,
-    isSelected,
-    isFocus,
-    onClick,
+    disabled: disabled,
+    isActive: isActive,
+    isSelected: isSelected,
+    isFocus: isFocus,
+    onClick: onClick,
     ref: innerRef,
-    onMouseDown,
-    onMouseEnter,
-    onMouseLeave,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     role: "option",
-    className: isActive ? "ds-list-item-active" : "",
+    className: isActive ? 'ds-list-item-active' : '',
     "aria-selected": isSelected,
     style: wrapperStyles,
     pr: render ? 0 : 40,
-    "data-testid": "combobox-option"
-  }, /* @__PURE__ */ React2.createElement(StyledItemContent, null, render ? render(props) : /* @__PURE__ */ React2.createElement(DSControlledCheckbox, {
-    tabIndex,
-    disabled,
-    checked: isSelected,
-    onMouseDown,
-    name: value,
-    ariaLabel: label,
-    label,
-    id: value,
-    onChange: onClick
-  })));
+    "data-testid": "combobox-option",
+    children: /*#__PURE__*/_jsx(StyledItemContent, {}, void 0, render ? render(props) : /*#__PURE__*/_jsx(DSControlledCheckbox, {
+      tabIndex: tabIndex,
+      disabled: disabled,
+      checked: isSelected,
+      onMouseDown: onMouseDown,
+      name: value,
+      ariaLabel: label,
+      label: label,
+      id: value,
+      onChange: onClick
+    }))
+  });
 };
-MultiMenuItem.propTypes = itemProps;
+
 MultiMenuItem.defaultProps = defaultProps;
 const MultiMenuItemWithSchema = describe(MultiMenuItem);
 MultiMenuItemWithSchema.propTypes = itemProps;
-export {
-  MultiMenuItem,
-  MultiMenuItemWithSchema
-};
-//# sourceMappingURL=MultiMenuItem.js.map
+
+export { MultiMenuItem, MultiMenuItemWithSchema };

package/esm/MenuItem/components/MultiMenuItem/styled.js

@@ -1,13 +1,7 @@
-import * as React from "react";
-import styled from "styled-components";
-const StyledItemContent = styled.div`
-  display: flex;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  width: 100%;
-`;
-export {
-  StyledItemContent
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+
+const StyledItemContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1stlix4-0"
+})(["display:flex;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;"]);
+
+export { StyledItemContent };