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

package/esm/RadioGroup/DSRadioGroup.js

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

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

package/esm/RadioGroup/index.js

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

package/esm/RadioGroup/props.js

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

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

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

package/esm/SearchBox/DSSearchBox.js

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

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

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

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

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

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