@elliemae/ds-form 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/InputMask/props.js

@@ -0,0 +1,146 @@
+import { PropTypes } from 'react-desc';
+
+const inputProps = {
+  /** Should component focus automatically */
+  autoFocus: PropTypes.bool.description('Should component focus automatically'),
+
+  /**
+   * Set style for the input mask
+   */
+  style: PropTypes.object.description('Set style for the input mask'),
+
+  /**
+   * Whether the input mask is disabled or not
+   */
+  disabled: PropTypes.bool.description('Whether the input mask is disabled or not'),
+
+  /** disableTooltip */
+  disableTooltip: PropTypes.bool.description('Whether to show a tooltip or not when text does not fit').defaultValue(true),
+
+  /** css class */
+  className: PropTypes.string.description('css class'),
+
+  /** html name prop for form */
+  name: PropTypes.string.description('html name prop for form'),
+
+  /**
+   * Max length for the input mask
+   */
+  maxLength: PropTypes.number.description('Max length for the input mask'),
+
+  /**
+   * Min length for the input mask
+   */
+  minLength: PropTypes.number.description('Min length for the input mask'),
+
+  /**
+   * Whether to make the content of the input mask fit the container or not
+   */
+  fluidWidth: PropTypes.bool.description('Whether to make the content of the input mask fit the container or not'),
+
+  /** isShowElipsisActive */
+  isShowElipsisActive: PropTypes.bool.description('Wheter to enable the ellipsis and tooltip functionality or not').defaultValue(true),
+
+  /**
+   * Component that works as placeholder
+   */
+  placeholder: PropTypes.node.description('Component that works as placeholder'),
+
+  /**
+   * 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 mask is clicked
+   */
+  onClick: PropTypes.func.description('Allows a function that is triggered once the input mask is clicked'),
+
+  /**
+   * Allows a function that is triggered once the input mask changes
+   */
+  onChange: PropTypes.func.description('Allows a function that is triggered once the input mask changes'),
+
+  /**
+   * Allows a function that is triggered once the input mask is focused
+   */
+  onFocus: PropTypes.func.description('Allows a function that is triggered once the input mask is focused'),
+
+  /**
+   * Allows a function that is triggered once the input mask loses focus
+   */
+  onBlur: PropTypes.func.description('Allows a function that is triggered once the input mask loses focus'),
+
+  /**
+   * Allows a function that is triggered once the input mask is pasted
+   */
+  onPaste: PropTypes.func.description('Allows a function that is triggered once the input mask is pasted'),
+
+  /**
+   * Allows a function that is triggered once in the input mask a keyboard key is released
+   */
+  onKeyUp: PropTypes.func.description('Allows a function that is triggered once in the input mask a keyboard key is released'),
+
+  /**
+   * Default value once the component is initialized
+   */
+  value: PropTypes.string.description('Default value once the component is initialized'),
+
+  /**
+   * Whether the input mask has error or not
+   */
+  hasError: PropTypes.bool.description('Whether the input mask has error or not'),
+
+  /**
+   * Whether the input mask is read only or not
+   */
+  readOnly: PropTypes.bool.description('Whether the input mask is read only or not'),
+  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]).description('Whether the input mask is read only or not'),
+
+  /**
+   * Type of input. Ex: 'text'
+   */
+  type: PropTypes.string.description("Type of input. Ex: 'text'"),
+
+  /**
+   * Whether the input mask is clearable or not
+   */
+  clearable: PropTypes.bool.description('Whether the input mask is clearable or not'),
+
+  /**
+   * Component to be added at the right side of the input
+   */
+  leftComponent: PropTypes.node.description('Component to be added at the right side of the input'),
+
+  /**
+   * Component to be added at the right side of the input
+   */
+  rightComponent: PropTypes.node.description('Component to be added at the right side of the input'),
+
+  /**
+   * Mask that has to match with the input information entered
+   * ['DATE', 'PHONE', 'PHONE_INTENATIONAL', 'SSN', 'US_ZIP_CODE', 'NUMBER', 'PERCENT']
+   */
+  mask: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.func]).description("Mask that has to match with the input information entered. ['DATE', 'PHONE', 'PHONE_INTENATIONAL', 'SSN', 'US_ZIP_CODE', 'NUMBER', 'PERCENT', 'ZIP_CODE_SEARCH']"),
+
+  /**
+    Expects pipe functions. i.e. autoCorrectedDatePipe
+    link a docu de text-mask
+   */
+  pipe: PropTypes.func.description('Expects pipe functions. i.e. autoCorrectedDatePipe'),
+
+  /**
+   * Put a sufix after the input mask
+   */
+  useSubfix: PropTypes.string.description('Put a sufix after the input mask'),
+
+  /**
+   * The placeholder character represents the fillable spot in the mask.
+   * The default placeholder character is underscore, _
+   */
+  placeholderChar: PropTypes.string.description("The placeholder character represents the fillable spot in the mask.\n The default placeholder character is underscore, _.").defaultValue('_')
+};
+
+export { inputProps };

package/esm/InputMask/types/index.js

@@ -0,0 +1 @@
+

package/esm/InputMask/utils/setCaretPosition.js

@@ -0,0 +1,15 @@
+const setCaretPosition = (ctrl, pos) => {
+  // Modern browsers
+  if (ctrl !== null && ctrl !== void 0 && ctrl.setSelectionRange) {
+    ctrl === null || ctrl === void 0 ? void 0 : ctrl.focus();
+    ctrl === null || ctrl === void 0 ? void 0 : ctrl.setSelectionRange(pos, pos); // IE8 and below
+  } else if (ctrl !== null && ctrl !== void 0 && ctrl.createTextRange) {
+    const range = ctrl === null || ctrl === void 0 ? void 0 : ctrl.createTextRange();
+    range === null || range === void 0 ? void 0 : range.collapse(true);
+    range === null || range === void 0 ? void 0 : range.moveEnd('character', pos);
+    range === null || range === void 0 ? void 0 : range.moveStart('character', pos);
+    range === null || range === void 0 ? void 0 : range.select();
+  }
+};
+
+export { setCaretPosition as default };

package/esm/InputProtected/DSInputProtected.js

@@ -0,0 +1,91 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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 { useState, useEffect, useCallback } from 'react';
+import { describe } from 'react-desc';
+import { LockUnlocked, LockLocked, VisibleView, InvisibleHide } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import DSInputGroup from '../InputGroup/DSInputGroup.js';
+import { DSInputMask } from '../InputMask/DSInputMask.js';
+import { inputProtectedProps } from './props.js';
+import { defaultProps } from './defaultProps.js';
+import { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["leftAddon", "rightAddon", "onChange", "value", "readOnly", "mask", "type", "placeholderChar"];
+
+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 ADDON_ICON_OPTIONS = {
+  LockUnlocked: /*#__PURE__*/_jsx(LockUnlocked, {}),
+  LockLocked: /*#__PURE__*/_jsx(LockLocked, {}),
+  VisibleView: /*#__PURE__*/_jsx(VisibleView, {}),
+  InvisibleHide: /*#__PURE__*/_jsx(InvisibleHide, {})
+};
+
+const DSInputProtected = _ref => {
+  let {
+    leftAddon,
+    rightAddon,
+    onChange,
+    value,
+    readOnly,
+    mask,
+    type,
+    placeholderChar = undefined
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const left = leftAddon && ADDON_ICON_OPTIONS[leftAddon];
+  const right = rightAddon && ADDON_ICON_OPTIONS[rightAddon];
+  const [inputLocked, setLocked] = useState(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);
+  const [inputHidden, setHidden] = useState(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);
+  useEffect(() => {
+    setLocked(leftAddon === LEFT_ADDON_OPTIONS.LockLocked);
+    setHidden(rightAddon === RIGHT_ADDON_OPTIONS.InvisibleHide);
+  }, [leftAddon, rightAddon]);
+  const handleLeft = useCallback(() => {
+    setLocked(!inputLocked);
+  }, [leftAddon, inputLocked]);
+  const handleRight = useCallback(() => {
+    setHidden(!inputHidden);
+  }, [rightAddon, inputHidden]);
+  return /*#__PURE__*/_jsx("div", {}, void 0, /*#__PURE__*/_jsx(DSInputGroup, {
+    leftAddon: left ? /*#__PURE__*/_jsx(DSButton, {
+      "aria-label": "".concat(inputLocked ? 'Allow' : 'Disallow', " Edition"),
+      buttonType: "secondary",
+      icon: ADDON_ICON_OPTIONS[inputLocked ? LEFT_ADDON_OPTIONS.LockUnlocked : LEFT_ADDON_OPTIONS.LockLocked],
+      onClick: handleLeft
+    }) : undefined,
+    readOnly: left ? inputLocked : readOnly,
+    rightAddon: right ? /*#__PURE__*/_jsx(DSButton, {
+      "aria-label": "".concat(inputHidden ? 'Show' : 'Hide', " Characters"),
+      buttonType: "secondary",
+      icon: ADDON_ICON_OPTIONS[inputHidden ? RIGHT_ADDON_OPTIONS.VisibleView : RIGHT_ADDON_OPTIONS.InvisibleHide],
+      onClick: handleRight,
+      containerProps: {
+        'data-testid': 'inputprotected-show-hide-button'
+      }
+    }) : undefined
+  }, void 0, /*#__PURE__*/jsx(DSInputMask, _objectSpread(_objectSpread({}, rest), {}, {
+    mask: mask,
+    placeholderChar: placeholderChar,
+    onChange: onChange,
+    readOnly: left ? inputLocked : readOnly,
+    type: right && inputHidden ? 'password' : type,
+    value: value
+  }))));
+};
+
+DSInputProtected.defaultProps = defaultProps;
+const DSInputProtectedWithSchema = describe(DSInputProtected);
+DSInputProtectedWithSchema.propTypes = inputProtectedProps;
+
+export { DSInputProtected, DSInputProtectedWithSchema, DSInputProtected as default };

package/esm/InputProtected/defaultProps.js

@@ -0,0 +1,8 @@
+import { RIGHT_ADDON_OPTIONS } from './options.js';
+
+const defaultProps = {
+  rightAddon: RIGHT_ADDON_OPTIONS.InvisibleHide,
+  mask: data => new Array(data.length).fill(/./)
+};
+
+export { defaultProps };

package/esm/InputProtected/index.js

@@ -0,0 +1,2 @@
+export { DSInputProtected, DSInputProtectedWithSchema, DSInputProtected as default } from './DSInputProtected.js';
+export { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options.js';

package/esm/InputProtected/options.js

@@ -0,0 +1,10 @@
+const LEFT_ADDON_OPTIONS = {
+  LockUnlocked: 'LockUnlocked',
+  LockLocked: 'LockLocked'
+};
+const RIGHT_ADDON_OPTIONS = {
+  VisibleView: 'VisibleView',
+  InvisibleHide: 'InvisibleHide'
+};
+
+export { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS };

package/esm/InputProtected/props.js

@@ -0,0 +1,20 @@
+import { PropTypes } from 'react-desc';
+import { LEFT_ADDON_OPTIONS, RIGHT_ADDON_OPTIONS } from './options.js';
+
+const inputProtectedProps = {
+  leftAddon: PropTypes.oneOf([LEFT_ADDON_OPTIONS.LockLocked, LEFT_ADDON_OPTIONS.LockUnlocked]).description('left addon component to display'),
+  rightAddon: PropTypes.oneOf([RIGHT_ADDON_OPTIONS.VisibleView, RIGHT_ADDON_OPTIONS.InvisibleHide]).description('right addon component to display').defaultValue(RIGHT_ADDON_OPTIONS.InvisibleHide),
+  onChange: PropTypes.func.description('Function executed when input s value changes'),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('input s value'),
+  readOnly: PropTypes.bool.description('Whether the input is read-only or not').defaultValue(false),
+  mask: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.func]).description('mask to apply'),
+  type: PropTypes.oneOf(['password', 'number', 'text']).description('type of input'),
+
+  /**
+   * PlaceholderChar: The placeholder character represents the fillable spot in the mask.
+   * The default placeholder character is underscore, _.
+   */
+  placeholderChar: PropTypes.string.description("The placeholder character represents the fillable spot in the mask.\n  * The default placeholder character is underscore, _.")
+};
+
+export { inputProtectedProps };

package/esm/LargeInputText/DSLargeInputText.js

@@ -0,0 +1,126 @@
+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
+  };
+});
+
+const DSLargeInputText = _ref2 => {
+  let {
+    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
+  } = _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.defaultProps = defaultProps;
+const DSLargeInputTextWithSchema = describe(DSLargeInputText).description('A large input');
+DSLargeInputTextWithSchema.propTypes = props;
+
+export { DSLargeInputTextWithSchema, DSLargeInputText as default };

package/esm/LargeInputText/defaultProps.js

@@ -0,0 +1,33 @@
+const defaultProps = {
+  containerProps: {},
+  autoFocus: false,
+  className: '',
+  disabled: false,
+  name: '',
+  id: null,
+  maxLength: null,
+  minLength: 0,
+  placeholder: '',
+  onClick: () => null,
+  onChange: () => null,
+  onFocus: () => null,
+  onBlur: () => null,
+  onKeyUp: () => null,
+  onKeyDown: () => null,
+  onPaste: () => null,
+  value: '',
+  hasError: false,
+  required: false,
+  readOnly: false,
+  resize: 'vertical',
+  innerRef: null,
+  ariaLabel: 'Enter text',
+  ariaAutocomplete: 'none',
+  role: 'textbox',
+  characterLimitCounter: 0,
+  rows: 3,
+  errorLimit: 'Please limit your entry to',
+  tabIndex: ''
+};
+
+export { defaultProps };

package/esm/LargeInputText/index.js

@@ -0,0 +1 @@
+export { DSLargeInputTextWithSchema, default } from './DSLargeInputText.js';

package/esm/LargeInputText/props.js

@@ -0,0 +1,124 @@
+import { PropTypes } from 'react-desc';
+
+const props = {
+  /** 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 };

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

@@ -0,0 +1,45 @@
+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__*/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))
+  });
+};
+
+const MenuItemWithSchema = describe(MenuItem);
+MenuItemWithSchema.propTypes = itemProps;
+
+export { MenuItem, MenuItemWithSchema };

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

@@ -0,0 +1,7 @@
+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 };