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

package/cjs/Radio/Circle.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsSystem = require('@elliemae/ds-system');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const Circle = _ref => {
+  let {
+    checked,
+    theme
+  } = _ref;
+  const r = theme.breakpoints.medium.split('px')[0] - window.innerWidth >= 0 ? 6 : 4;
+  return /*#__PURE__*/_jsx__default["default"]("svg", {
+    width: "100%",
+    height: "100%"
+  }, void 0, /*#__PURE__*/_jsx__default["default"]("circle", {
+    className: checked ? 'checked' : 'unchecked',
+    r: r,
+    cx: "50%",
+    cy: "50%"
+  }));
+};
+
+var Circle$1 = dsSystem.withTheme(Circle);
+
+module.exports = Circle$1;

package/cjs/Radio/DSRadio.js

@@ -0,0 +1,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var React = require('react');
+var reactDesc = require('react-desc');
+var dsClassnames = require('@elliemae/ds-classnames');
+var Circle = require('./Circle.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+
+const _excluded = ["containerProps", "className", "style", "labelText", "htmlFor", "hasError", "readOnly", "disabled", "checked", "value", "name", "onChange", "children", "tabIndex"];
+
+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__default["default"](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 DSRadio = _ref => {
+  let {
+    containerProps,
+    className,
+    style,
+    labelText,
+    htmlFor,
+    hasError,
+    readOnly,
+    disabled,
+    checked,
+    value,
+    name,
+    onChange,
+    children,
+    tabIndex
+  } = _ref,
+      otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  // this will be solved when we move to styled components...
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const {
+    cssClassName,
+    classNameElement
+  } = dsClassnames.convertPropToCssClassName('form-element-radio', className, {
+    hasError,
+    readOnly,
+    disabled
+  });
+  const checkRef = React.useRef(null);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    className: cssClassName,
+    children: [/*#__PURE__*/_jsx__default["default"]("label", {
+      className: classNameElement('label'),
+      htmlFor: htmlFor
+    }, void 0, /*#__PURE__*/jsxRuntime.jsx("input", _objectSpread(_objectSpread({}, otherProps), {}, {
+      ref: checkRef,
+      "aria-disabled": disabled,
+      checked: disabled ? false : checked,
+      className: classNameElement('input'),
+      disabled: disabled,
+      name: name,
+      onChange: e => {
+        if (!readOnly && !disabled) {
+          onChange(e);
+        }
+      },
+      readOnly: readOnly,
+      tabIndex: -1,
+      type: "radio",
+      value: value
+    })), /*#__PURE__*/jsxRuntime.jsx("span", {
+      ref: otherProps.innerRef,
+      "aria-checked": checked,
+      "aria-disabled": disabled,
+      className: classNameElement('input-button'),
+      onKeyDown: e => {
+        // really really bad pattern...
+        // overwriting the target to point to the hidden input because the focus is on the span and not on the input...
+        // we will solve this with a v2 of this when we move to controlled + styled components...
+        e.target = checkRef.current;
+        if (disabled) return;
+
+        if (e.key === 'Enter' || e.keyCode === 32) {
+          onChange(e);
+        } else if (otherProps.onKeyDown) {
+          otherProps.onKeyDown(e);
+        }
+      },
+      role: "radio",
+      style: style,
+      tabIndex: disabled ? -1 : tabIndex // value={value} // should be unused?
+      ,
+      children: /*#__PURE__*/_jsx__default["default"](Circle, {
+        checked: checked
+      })
+    }), /*#__PURE__*/_jsx__default["default"]("span", {
+      className: classNameElement('label-text')
+    }, void 0, labelText)), children && /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameElement('radio-children')
+    }, void 0, children)]
+  }));
+};
+
+DSRadio.defaultProps = {
+  containerProps: {},
+  className: '',
+  hasError: false,
+  readOnly: false,
+  disabled: false,
+  checked: false,
+  name: '',
+  onChange: () => null,
+  children: null,
+  tabIndex: 0
+};
+const radioProps = {
+  /** Injected props to wrapper element of component */
+  containerProps: reactDesc.PropTypes.object.description('Injected props to wrapper element of component'),
+
+  /** css class prop */
+  className: reactDesc.PropTypes.string.description('css class prop'),
+
+  /** name property to manage form */
+  name: reactDesc.PropTypes.string.description('name property to manage form'),
+
+  /**
+   * Displayable label for the radio
+   */
+  labelText: reactDesc.PropTypes.string.description('Displayable label for the radio'),
+
+  /** HTMLFOR property to manage form */
+  htmlFor: reactDesc.PropTypes.element.description('HTMLFOR property to manage form'),
+
+  /**
+   * Whether the radio has error or not
+   */
+  hasError: reactDesc.PropTypes.bool.description('Whether the radio has error or not'),
+
+  /**
+   * Whether the radio is read only or not
+   */
+  readOnly: reactDesc.PropTypes.bool.description('Whether the radio is read only or not'),
+
+  /**
+   * Whether the radio is disabled or not
+   */
+  disabled: reactDesc.PropTypes.bool.description('Whether the radio is disabled or not'),
+
+  /**
+   * Whether the radio is checked or not
+   */
+  checked: reactDesc.PropTypes.bool.description('Whether the radio is checked or not'),
+
+  /**
+   * Value that takes the checkbox if it is checked
+   */
+  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number, reactDesc.PropTypes.object]).description('Value that takes the checkbox if it is checked').isRequired,
+
+  /**
+   * Allows a function that is triggered once the radio changes
+   */
+  onChange: reactDesc.PropTypes.func.description('Allows a function that is triggered once the radio changes'),
+
+  /**
+   * Optional, if you want a checkbox customized
+   */
+  children: reactDesc.PropTypes.node.description('Optional, if you want a checkbox customized'),
+
+  /** HTML tabindex to manage focus */
+  tabIndex: reactDesc.PropTypes.number.description('HTML tabindex to manage focus'),
+
+  /** style override object */
+  style: reactDesc.PropTypes.number.description('style override object')
+};
+const DSRadioWithSchema = reactDesc.describe(DSRadio);
+DSRadioWithSchema.propTypes = radioProps;
+
+exports.DSRadioWithSchema = DSRadioWithSchema;
+exports["default"] = DSRadio;

package/cjs/Radio/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSRadio = require('./DSRadio.js');
+
+
+
+exports.DSRadioWithSchema = DSRadio.DSRadioWithSchema;
+exports["default"] = DSRadio["default"];

package/cjs/RadioGroup/DSRadioGroup.js

@@ -0,0 +1,109 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var GroupItem = require('@elliemae/ds-shared/GroupContext/GroupItem');
+var Group = require('@elliemae/ds-shared/GroupContext/Group');
+var DSFormItemLayout = require('../FormItem/DSFormItemLayout.js');
+require('../FormItem/Error/DSError.js');
+var DSRadio = require('../Radio/DSRadio.js');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var GroupItem__default = /*#__PURE__*/_interopDefaultLegacy(GroupItem);
+var Group__default = /*#__PURE__*/_interopDefaultLegacy(Group);
+
+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__default["default"](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__default["default"](GroupItem__default["default"], {
+  render: context => /*#__PURE__*/jsxRuntime.jsx(DSRadio["default"], _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__default["default"].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__default["default"](Group__default["default"], {
+    activeValue: activeValue,
+    disabled: disabled,
+    onChange: onChange
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    "data-testid": "ds-radiogroup"
+  }, labelProps && labelProps.labelText ? {} : containerProps), {}, {
+    className: "".concat(baseClass, " ").concat(baseClass, "--").concat(orientation),
+    role: "group",
+    children: React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/jsxRuntime.jsx(RadioItem, _objectSpread(_objectSpread({}, child.props), {}, {
+      innerRef: t => {
+        checkRefs.push(t);
+      },
+      onKeyDown: e => onKeyDown(e, index)
+    })), null)
+  })));
+
+  if (labelProps && labelProps.labelText) {
+    return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+      className: "".concat(baseClass, "-form-item-layout-wrapper")
+    }, containerProps), {}, {
+      role: "group",
+      children: /*#__PURE__*/jsxRuntime.jsx(DSFormItemLayout["default"], _objectSpread(_objectSpread({}, labelProps), {}, {
+        inputComponent: group,
+        onChange: onChange,
+        truncateText: truncateText
+      }))
+    }));
+  }
+
+  return group;
+};
+
+DSRadioGroup.defaultProps = defaultProps.defaultProps;
+const DSRadioGroupWithSchema = reactDesc.describe(DSRadioGroup);
+DSRadioGroupWithSchema.propTypes = props.props;
+
+exports.DSRadioGroupWithSchema = DSRadioGroupWithSchema;
+exports["default"] = DSRadioGroup;

package/cjs/RadioGroup/defaultProps.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const defaultProps = {
+  containerProps: {},
+  onChange: () => null,
+  orientation: 'vertical',
+  disabled: false,
+  truncateText: false,
+  labelProps: {
+    feedbackMessage: '',
+    labelText: '',
+    required: false
+  }
+};
+
+exports.defaultProps = defaultProps;

package/cjs/RadioGroup/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var DSRadioGroup = require('./DSRadioGroup.js');
+
+
+
+module.exports = DSRadioGroup["default"];

package/cjs/RadioGroup/props.js

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

package/cjs/RequiredMark/RequiredMark.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var dsClassnames = require('@elliemae/ds-classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const {
+  cssClassName
+} = dsClassnames.convertPropToCssClassName('form-required-mark');
+
+const RequiredMark = _ref => {
+  let {
+    required = false,
+    optional = false
+  } = _ref;
+  if (!required && !optional) return null;
+
+  if (required) {
+    return /*#__PURE__*/_jsx__default["default"]("span", {
+      className: "".concat(cssClassName)
+    }, void 0, "\u25CF");
+  }
+
+  return /*#__PURE__*/_jsx__default["default"]("span", {
+    className: "".concat(cssClassName, " optional-mark")
+  }, void 0, "\u26AC");
+};
+
+module.exports = RequiredMark;

package/cjs/RequiredMark/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var RequiredMark = require('./RequiredMark.js');
+
+
+
+module.exports = RequiredMark;

package/cjs/SearchBox/DSSearchBox.js

@@ -0,0 +1,113 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var reactDesc = require('react-desc');
+var dsIcons = require('@elliemae/ds-icons');
+var dsIcon = require('@elliemae/ds-icon');
+var styled = require('./styled.js');
+var SButton = require('./SButton.js');
+var useSearch = require('./useSearch.js');
+var props = require('./props.js');
+var defaultProps = require('./defaultProps.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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.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__default["default"].useMemo(() => {
+    let Icon = _Search || (_Search = /*#__PURE__*/_jsx__default["default"](dsIcons.Search, {
+      "aria-label": "Search"
+    }));
+
+    let handleOnClick = () => handleSearch(true);
+
+    if (!shouldShowAnyIcon) return null;
+
+    if (shouldShowClearIcon) {
+      Icon = /*#__PURE__*/_jsx__default["default"](dsIcons.CloseXsmall, {
+        color: dsIcon.DSIconColors.PRIMARY,
+        "aria-label": "Clear input"
+      });
+      handleOnClick = handleClear;
+    }
+
+    return /*#__PURE__*/_jsx__default["default"](SButton.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__default["default"]("div", {
+    style: {
+      position: 'relative',
+      zIndex: 0
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.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.defaultProps;
+const SearchBoxWithSchema = reactDesc.describe(DSSearchBox);
+SearchBoxWithSchema.propTypes = props.searchBoxProps;
+
+exports.SearchBoxWithSchema = SearchBoxWithSchema;
+exports["default"] = DSSearchBox;