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

package/esm/RadioGroup/DSRadioGroup.js

@@ -0,0 +1,96 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import React from 'react';
+import { describe } from 'react-desc';
+import GroupItem from '@elliemae/ds-shared/GroupContext/GroupItem';
+import Group from '@elliemae/ds-shared/GroupContext/Group';
+import DSFormItemLayout from '../FormItem/DSFormItemLayout.js';
+import '../FormItem/Error/DSError.js';
+import DSRadio from '../Radio/DSRadio.js';
+import { props } from './props.js';
+import { defaultProps } from './defaultProps.js';
+import { 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 emClassPrefix = 'em-ds';
+const baseClass = "".concat(emClassPrefix, "-radio-group");
+
+const RadioItem = props => /*#__PURE__*/_jsx(GroupItem, {
+  render: context => /*#__PURE__*/jsx(DSRadio, _objectSpread(_objectSpread({}, props), {}, {
+    checked: context.activeValue === props.value,
+    disabled: context.disabled || props.disabled,
+    onChange: context.onChange
+  }))
+});
+
+const DSRadioGroup = _ref => {
+  let {
+    containerProps,
+    onChange,
+    activeValue,
+    children,
+    orientation,
+    disabled,
+    truncateText,
+    labelProps
+  } = _ref;
+  const checkRefs = [];
+  const count = React.Children.count(children);
+
+  const onKeyDown = (e, index) => {
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+      if (index === 0) checkRefs[count - 1].focus();else checkRefs[index - 1].focus();
+    }
+
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      if (index === count - 1) checkRefs[0].focus();else checkRefs[index + 1].focus();
+    }
+  };
+
+  const group = /*#__PURE__*/_jsx(Group, {
+    activeValue: activeValue,
+    disabled: disabled,
+    onChange: onChange
+  }, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    "data-testid": "ds-radiogroup"
+  }, labelProps && labelProps.labelText ? {} : containerProps), {}, {
+    className: "".concat(baseClass, " ").concat(baseClass, "--").concat(orientation),
+    role: "group",
+    children: React.Children.map(children, (child, index) => /*#__PURE__*/jsx(RadioItem, _objectSpread(_objectSpread({}, child.props), {}, {
+      innerRef: t => {
+        checkRefs.push(t);
+      },
+      onKeyDown: e => onKeyDown(e, index)
+    })), null)
+  })));
+
+  if (labelProps && labelProps.labelText) {
+    return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+      className: "".concat(baseClass, "-form-item-layout-wrapper")
+    }, containerProps), {}, {
+      role: "group",
+      children: /*#__PURE__*/jsx(DSFormItemLayout, _objectSpread(_objectSpread({}, labelProps), {}, {
+        inputComponent: group,
+        onChange: onChange,
+        truncateText: truncateText
+      }))
+    }));
+  }
+
+  return group;
+};
+
+DSRadioGroup.defaultProps = defaultProps;
+const DSRadioGroupWithSchema = describe(DSRadioGroup);
+DSRadioGroupWithSchema.propTypes = props;
+
+export { DSRadioGroupWithSchema, DSRadioGroup as default };

package/esm/RadioGroup/defaultProps.js

@@ -0,0 +1,14 @@
+const defaultProps = {
+  containerProps: {},
+  onChange: () => null,
+  orientation: 'vertical',
+  disabled: false,
+  truncateText: false,
+  labelProps: {
+    feedbackMessage: '',
+    labelText: '',
+    required: false
+  }
+};
+
+export { defaultProps };

package/esm/RadioGroup/index.js

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

package/esm/RadioGroup/props.js

@@ -0,0 +1,39 @@
+import { PropTypes } from 'react-desc';
+import { orientation } from '@elliemae/ds-shared/prop-types';
+
+const props = {
+  /** Inject props to component wrapper  */
+  containerProps: PropTypes.object.description('Inject props to component wrapper'),
+
+  /**
+   * Allows a function that is triggered once the radio group changes
+   */
+  onChange: PropTypes.func.description('Allows a function that is triggered once the radio group changes'),
+
+  /**
+   * Selected default active value
+   */
+  activeValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Selected default active value'),
+
+  /**
+   * Radio group items to show of type DSRadio
+   */
+  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Radio group items to show of type DSRadio'),
+
+  /**
+   * ['horizontal', 'vertical']
+   */
+  orientation: PropTypes.oneOf(orientation).description("['horizontal', 'vertical']"),
+
+  /**
+   * Whether the radio group is disabled or not
+   */
+  disabled: PropTypes.bool.description(''),
+  labelProps: PropTypes.shape({
+    feedbackMessage: PropTypes.string,
+    labelText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    required: PropTypes.bool
+  }).description('Whether the radio group is disabled or not')
+};
+
+export { props };

package/esm/RequiredMark/RequiredMark.js

@@ -0,0 +1,27 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+
+const {
+  cssClassName
+} = convertPropToCssClassName('form-required-mark');
+
+const RequiredMark = _ref => {
+  let {
+    required = false,
+    optional = false
+  } = _ref;
+  if (!required && !optional) return null;
+
+  if (required) {
+    return /*#__PURE__*/_jsx("span", {
+      className: "".concat(cssClassName)
+    }, void 0, "\u25CF");
+  }
+
+  return /*#__PURE__*/_jsx("span", {
+    className: "".concat(cssClassName, " optional-mark")
+  }, void 0, "\u26AC");
+};
+
+export { RequiredMark as default };

package/esm/RequiredMark/index.js

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

package/esm/SearchBox/DSSearchBox.js

@@ -0,0 +1,103 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import { describe } from 'react-desc';
+import { CloseXsmall, Search } from '@elliemae/ds-icons';
+import { DSIconColors } from '@elliemae/ds-icon';
+import { SearchBoxTextBox } from './styled.js';
+import { SButton } from './SButton.js';
+import { useSearch } from './useSearch.js';
+import { searchBoxProps } from './props.js';
+import { defaultProps } from './defaultProps.js';
+
+var _Search;
+
+const DSSearchBox = _ref => {
+  let {
+    className,
+    clearable,
+    containerProps,
+    disableButton,
+    disabled,
+    innerRef,
+    onBlur,
+    onChange,
+    onKeyUp,
+    onSearch,
+    onClearButtonClick,
+    placeholder,
+    property,
+    readOnly,
+    searchOnEnter,
+    onSearchButtonClick,
+    showIcon,
+    style,
+    value
+  } = _ref;
+  const {
+    searchValue,
+    handleChange,
+    handleSearch,
+    handleKeyUp,
+    handleClear
+  } = useSearch({
+    onChange,
+    onKeyUp,
+    onSearch,
+    onSearchButtonClick,
+    property,
+    searchOnEnter,
+    value,
+    onClearButtonClick
+  });
+  const shouldShowClearIcon = clearable && (searchValue === null || searchValue === void 0 ? void 0 : searchValue.length) > 0;
+  const shouldShowSearchIcon = !shouldShowClearIcon && showIcon;
+  const shouldShowAnyIcon = shouldShowClearIcon || shouldShowSearchIcon;
+  const PureSearchboxIcon = React.useMemo(() => {
+    let Icon = _Search || (_Search = /*#__PURE__*/_jsx(Search, {
+      "aria-label": "Search"
+    }));
+
+    let handleOnClick = () => handleSearch(true);
+
+    if (!shouldShowAnyIcon) return null;
+
+    if (shouldShowClearIcon) {
+      Icon = /*#__PURE__*/_jsx(CloseXsmall, {
+        color: DSIconColors.PRIMARY,
+        "aria-label": "Clear input"
+      });
+      handleOnClick = handleClear;
+    }
+
+    return /*#__PURE__*/_jsx(SButton, {
+      disabled: disabled || disableButton,
+      icon: Icon,
+      onClick: handleOnClick,
+      dataTestid: shouldShowClearIcon ? 'ds-searchbox-button-clear' : 'ds-searchbox-button'
+    });
+  }, [shouldShowClearIcon, shouldShowSearchIcon, shouldShowAnyIcon, disabled, disableButton, handleSearch, handleClear]);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      position: 'relative',
+      zIndex: 0
+    }
+  }, void 0, /*#__PURE__*/_jsx(SearchBoxTextBox, {
+    className: className,
+    containerProps: containerProps,
+    disabled: disabled,
+    innerRef: innerRef,
+    onChange: handleChange,
+    onKeyUp: handleKeyUp,
+    onBlur: onBlur,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    style: style,
+    value: searchValue
+  }), PureSearchboxIcon);
+};
+
+DSSearchBox.defaultProps = defaultProps;
+const SearchBoxWithSchema = describe(DSSearchBox);
+SearchBoxWithSchema.propTypes = searchBoxProps;
+
+export { SearchBoxWithSchema, DSSearchBox as default };

package/esm/SearchBox/NavSearchBox.js

@@ -0,0 +1,176 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { describe } from 'react-desc';
+import { ChevronDown, ChevronUp, CloseXsmall, Search } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import DSTextBox from '../TextBox/DSTextBox.js';
+import { navSearchBoxProps } from './props.js';
+import { navSearchBoxDefaultProps } from './defaultProps.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _StyledVerticalSepara, _VerticalSeparator;
+const StyledResultTracker = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-sbwvud-0"
+})(["padding:0 8px;color:#a2a9b6;white-space:nowrap;word-spacing:2px;"]);
+const StyledVerticalSeparator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-sbwvud-1"
+})(["height:60%;border-right:1px solid #a2a9b6;"]);
+const StyledToolbarRightAddonsWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-sbwvud-2"
+})(["display:flex;align-items:center;justify-content:flex-end;"]);
+const NavBtn = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-sbwvud-3"
+})(["height:calc(100% - 2px);border:none;border-radius:", ";"], _ref => {
+  let {
+    last
+  } = _ref;
+  return last ? '2px  2px 0px 0px' : '0px';
+});
+
+const RightButtonsGroup = props => {
+  const {
+    onNext,
+    onPrevious,
+    onClear,
+    hideNavs,
+    showClear
+  } = props;
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!hideNavs && /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(NavBtn, {
+        buttonType: "text",
+        containerProps: {
+          'data-testid': 'ds-navsearchbox-next'
+        },
+        icon: /*#__PURE__*/_jsx(ChevronDown, {
+          color: ['brand-primary', '800']
+        }),
+        onClick: onNext
+      }), /*#__PURE__*/_jsx(NavBtn, {
+        buttonType: "text",
+        containerProps: {
+          'data-testid': 'ds-navsearchbox-prev'
+        },
+        icon: /*#__PURE__*/_jsx(ChevronUp, {
+          color: ['brand-primary', '800']
+        }),
+        onClick: onPrevious
+      })]
+    }), showClear ? /*#__PURE__*/_jsx(NavBtn, {
+      containerProps: {
+        'data-testid': 'ds-navsearchbox-clear'
+      },
+      buttonType: "text",
+      icon: /*#__PURE__*/_jsx(CloseXsmall, {
+        color: ['brand-primary', '800']
+      }),
+      onClick: onClear,
+      last: true
+    }) : /*#__PURE__*/_jsx(NavBtn, {
+      containerProps: {
+        'data-testid': 'ds-navsearchbox-clear'
+      },
+      buttonType: "text",
+      icon: /*#__PURE__*/_jsx(Search, {
+        color: ['brand-primary', '800']
+      }),
+      last: true
+    })]
+  });
+};
+
+const ResultTracker = props => {
+  const {
+    currentResultIndex,
+    totalResults
+  } = props;
+  if (currentResultIndex === -1 && !totalResults) return null;
+  if (currentResultIndex === -1 && totalResults) return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, totalResults);
+  return /*#__PURE__*/_jsx(StyledResultTracker, {}, void 0, "".concat(currentResultIndex + 1, " / ").concat(totalResults));
+};
+
+const VerticalSeparator = () => _StyledVerticalSepara || (_StyledVerticalSepara = /*#__PURE__*/_jsx(StyledVerticalSeparator, {}));
+
+const ToolbarRightAddons = props => {
+  const {
+    onNext,
+    onPrevious,
+    onClear,
+    currentResultIndex,
+    totalResults,
+    showClear
+  } = props;
+  return /*#__PURE__*/_jsx(StyledToolbarRightAddonsWrapper, {}, void 0, /*#__PURE__*/_jsx(ResultTracker, {
+    currentResultIndex: currentResultIndex,
+    totalResults: totalResults
+  }), currentResultIndex !== -1 || totalResults ? _VerticalSeparator || (_VerticalSeparator = /*#__PURE__*/_jsx(VerticalSeparator, {})) : null, /*#__PURE__*/_jsx(RightButtonsGroup, {
+    onNext: onNext,
+    hideNavs: currentResultIndex === -1 && !totalResults,
+    onPrevious: onPrevious,
+    showClear: showClear,
+    onClear: onClear
+  }));
+};
+
+const NavSearchBox = props => {
+  const {
+    currentResultIndex,
+    onChange,
+    onClear,
+    onNext,
+    onPrevious,
+    totalResults,
+    value,
+    onBlur,
+    placeholder,
+    autoFocus,
+    innerRef
+  } = props;
+
+  const handleChange = e => {
+    if (onChange) onChange(e.target.value);
+  };
+
+  const handleKeyDown = e => {
+    // SHIFT + ENTER
+    if (e.shiftKey) {
+      if (e.key === 'Enter' || e.keyCode === 13) {
+        onPrevious();
+      }
+    } // ESCAPE
+    else if (e.key === 'Escape' || e.keyCode === 27) {
+      onClear();
+    } // ENTER
+    else if (e.key === 'Enter' || e.keyCode === 13) {
+      onNext();
+    }
+  };
+
+  return /*#__PURE__*/_jsx(DSTextBox, {
+    onChange: handleChange,
+    containerProps: {
+      'data-testid': 'ds-nav-searchbox-input'
+    },
+    onBlur: onBlur,
+    onKeyDown: handleKeyDown,
+    placeholder: placeholder,
+    value: value,
+    autoFocus: autoFocus,
+    innerRef: innerRef,
+    rightComponent: /*#__PURE__*/_jsx(ToolbarRightAddons, {
+      showClear: !!value,
+      onNext: onNext,
+      onPrevious: onPrevious,
+      onClear: onClear,
+      currentResultIndex: currentResultIndex,
+      totalResults: totalResults
+    })
+  });
+};
+
+NavSearchBox.defaultProps = navSearchBoxDefaultProps;
+const DSNavSearchBoxWithSchema = describe(NavSearchBox);
+DSNavSearchBoxWithSchema.propTypes = navSearchBoxProps;
+
+export { DSNavSearchBoxWithSchema, NavSearchBox };

package/esm/SearchBox/SButton.js

@@ -0,0 +1,25 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { focus } from '@elliemae/ds-system';
+
+const Button = /*#__PURE__*/styled.button.withConfig({
+  componentId: "sc-15udc15-0"
+})(["all:unset;position:absolute;height:calc(100% - 2px);width:28px;top:1px;right:1px;display:flex;justify-content:center;align-items:center;box-sizing:border-box;cursor:pointer;z-index:1;svg{fill:", ";}&:disabled{color:#5d6775;cursor:not-allowed;svg{fill:#5d6775;}}&:focus{", "}"], props => props.theme.colors.brand['600'], focus());
+
+const SButton = _ref => {
+  let {
+    icon,
+    disabled,
+    onClick,
+    dataTestid = "ds-searchbox-button"
+  } = _ref;
+  return /*#__PURE__*/_jsx(Button, {
+    "data-testid": dataTestid,
+    onClick: onClick,
+    disabled: disabled,
+    type: "button"
+  }, void 0, icon);
+};
+
+export { SButton };

package/esm/SearchBox/SearchBoxToggle.js

@@ -0,0 +1,68 @@
+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 '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 } from 'react';
+import styled from 'styled-components';
+import { Search } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import DSSearchBox from './DSSearchBox.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _Search;
+
+const _excluded = ["onSearchButtonClick", "width"];
+
+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 SEARCH_BUTTON_WIDTH = 26;
+const SearchWrap = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-xt33wm-0"
+})(["transition:width 200ms ease;width:", "px;height:0;", " ", ""], SEARCH_BUTTON_WIDTH, props => !props.show ? "\n        opacity:0;\n\n        & * {\n          width: ".concat(SEARCH_BUTTON_WIDTH, "px;\n          height: 0;\n          border: 0;\n        }\n      ") : '', props => props.isOpen ? "width: ".concat(props.width, ";opacity: 1;height: auto;") : ''); // eslint-disable-next-line react/prop-types
+
+const SearchBoxToggle = _ref => {
+  let {
+    onSearchButtonClick,
+    width
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const [isOpen, setOpen] = useState(false);
+  const [show, setShow] = useState(true);
+  const computedWidth = typeof width === 'number' ? "".concat(width, "px") : width;
+
+  const button = /*#__PURE__*/_jsx(DSButton, {
+    onClick: () => {
+      setOpen(true);
+    },
+    buttonType: "text",
+    icon: _Search || (_Search = /*#__PURE__*/_jsx(Search, {}))
+  });
+
+  return /*#__PURE__*/_jsx("div", {}, void 0, show && !isOpen && button, /*#__PURE__*/_jsx(SearchWrap, {
+    show: !show || isOpen,
+    isOpen: isOpen,
+    width: computedWidth,
+    onTransitionEnd: () => {
+      setShow(!isOpen);
+    }
+  }, void 0, /*#__PURE__*/jsx(DSSearchBox, _objectSpread(_objectSpread({}, rest), {}, {
+    onSearchButtonClick: () => {
+      onSearchButtonClick();
+      setOpen(false);
+    }
+  }))));
+};
+
+SearchBoxToggle.defaultProps = {
+  onSearchButtonClick: () => null,
+  width: 300
+};
+
+export { SearchBoxToggle as default };

package/esm/SearchBox/defaultProps.js

@@ -0,0 +1,28 @@
+const defaultProps = {
+  className: '',
+  clearable: false,
+  clearOnSearch: false,
+  containerProps: {},
+  disableButton: false,
+  disabled: false,
+  innerRef: undefined,
+  onBlur: () => null,
+  onChange: () => null,
+  onKeyUp: () => null,
+  onSearch: () => null,
+  onSearchButtonClick: () => null,
+  onClearButtonClick: () => null,
+  placeholder: 'Search all',
+  property: 'all',
+  readOnly: false,
+  searchOnEnter: true,
+  showIcon: true,
+  style: {},
+  value: undefined
+};
+const navSearchBoxDefaultProps = {
+  placeholder: 'Search...',
+  currentResultIndex: -1
+};
+
+export { defaultProps, navSearchBoxDefaultProps };

package/esm/SearchBox/index.js

@@ -0,0 +1,3 @@
+export { default as SearchBoxToggle } from './SearchBoxToggle.js';
+export { SearchBoxWithSchema, default } from './DSSearchBox.js';
+export { NavSearchBox as DSNavSearchBox, DSNavSearchBoxWithSchema } from './NavSearchBox.js';