@elliemae/ds-form 2.3.0-alpha.6 → 2.3.0-next.0

package/cjs/Checkbox/DSCheckbox.js

@@ -0,0 +1,179 @@
+'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 uid = require('uid');
+var dsClassnames = require('@elliemae/ds-classnames');
+var dsUtilities = require('@elliemae/ds-utilities');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+var CheckMark = require('./elements/CheckMark.js');
+var defaultProps = require('./defaultProps.js');
+var props = require('./props.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 = ["className", "onChange", "checked", "innerRef", "onKeyDown", "readOnly", "value", "disabled", "style", "variant", "tabIndex", "name", "onMouseEnter", "onMouseLeave", "instanceUID", "labelText"],
+      _excluded2 = ["labelText", "className", "htmlFor", "hasError", "readOnly", "disabled", "checked", "onChange", "variant", "children", "containerProps", "innerRef", "name"];
+
+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; }
+
+function Checkbox(_ref) {
+  let {
+    className,
+    onChange,
+    checked,
+    innerRef,
+    onKeyDown = () => null,
+    readOnly,
+    value,
+    disabled,
+    style,
+    variant,
+    tabIndex = 0,
+    name,
+    onMouseEnter,
+    onMouseLeave,
+    instanceUID,
+    labelText
+  } = _ref,
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  const checkRef = React.useRef(null);
+  const handleClick = React.useCallback(e => {
+    // prevent double onChange call
+    if (e.currentTarget.dataset.kind === 'checkmark') {
+      e.target = checkRef.current;
+      if (readOnly) return;
+      onChange(e);
+    }
+  }, [onChange, readOnly]);
+  return /*#__PURE__*/_jsx__default["default"]("span", {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(CheckMark, _objectSpread(_objectSpread({}, rest), {}, {
+    ref: innerRef,
+    "data-testid": rest['data-testid'] || 'ds-checkbox',
+    "aria-checked": checked,
+    "aria-disabled": disabled,
+    className: "".concat(className, " ").concat(variant || '', " ").concat(disabled ? 'disabled' : ''),
+    "data-kind": "checkmark",
+    onKeyDown: e => {
+      e.target = checkRef.current;
+      if (readOnly) return;
+
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        onChange(e);
+        onKeyDown(e);
+      }
+    },
+    onClick: handleClick,
+    role: "checkbox",
+    style: style,
+    tabIndex: tabIndex,
+    value: value,
+    children: /*#__PURE__*/jsxRuntime.jsx("input", {
+      id: "".concat(instanceUID, "-").concat(labelText),
+      onClick: handleClick,
+      ref: checkRef,
+      checked: !!checked,
+      disabled: disabled,
+      name: name,
+      readOnly: readOnly,
+      style: {
+        visibility: 'hidden',
+        pointerEvents: 'none'
+      },
+      type: "checkbox",
+      value: value,
+      onChange: () => {} // this suppress the warning, we manage onChange on another item level
+
+    })
+  })));
+}
+
+const DSCheckbox = _ref2 => {
+  let {
+    labelText = undefined,
+    className = undefined,
+    htmlFor = undefined,
+    hasError,
+    readOnly,
+    disabled,
+    checked,
+    onChange,
+    variant,
+    children,
+    containerProps,
+    innerRef,
+    name
+  } = _ref2,
+      otherProps = _objectWithoutProperties__default["default"](_ref2, _excluded2);
+
+  const {
+    cssClassName,
+    classNameElement
+  } = dsClassnames.convertPropToCssClassName('form-element-checkbox', className, {
+    hasError,
+    readOnly,
+    disabled
+  });
+  const instanceUID = React.useMemo(() => uid.uid(5), []);
+
+  const checkbox = /*#__PURE__*/jsxRuntime.jsx(Checkbox, _objectSpread(_objectSpread({}, otherProps), {}, {
+    checked: checked,
+    className: dsUtilities.cx("".concat(classNameElement('input-button'), " checkbox-").concat(String(checked)), className),
+    disabled: disabled,
+    innerRef: innerRef,
+    name: name,
+    onChange: onChange,
+    readOnly: readOnly,
+    variant: variant,
+    labelText: labelText,
+    instanceUID: instanceUID
+  }));
+
+  if (!labelText) return checkbox;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: "".concat(cssClassName, " ").concat(variant)
+  }, containerProps), {}, {
+    children: [/*#__PURE__*/_jsx__default["default"]("label", {
+      "data-testid": "ds-checkbox-label",
+      className: classNameElement('label'),
+      htmlFor: "".concat(instanceUID, "-").concat(labelText)
+    }, void 0, checkbox, /*#__PURE__*/_jsx__default["default"]("span", {
+      className: classNameElement('label-text')
+    }, void 0, labelText)), children && /*#__PURE__*/_jsx__default["default"]("div", {
+      className: classNameElement('checkbox-children')
+    }, void 0, children)]
+  }));
+};
+
+DSCheckbox.defaultProps = defaultProps.defaultProps;
+const CheckboxWithSchema = reactDesc.describe(DSCheckbox);
+CheckboxWithSchema.propTypes = props.checkboxProps;
+
+Object.defineProperty(exports, 'CHECKBOX_VARIANT', {
+  enumerable: true,
+  get: function () { return propTypes.CHECKBOX_VARIANT; }
+});
+exports.CheckboxWithSchema = CheckboxWithSchema;
+exports.DSCheckbox = DSCheckbox;
+exports["default"] = DSCheckbox;

package/cjs/Checkbox/defaultProps.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var propTypes = require('@elliemae/ds-shared/prop-types');
+
+const defaultProps = {
+  hasError: false,
+  readOnly: false,
+  disabled: false,
+  checked: false,
+  onChange: () => null,
+  variant: propTypes.CHECKBOX_VARIANT.DEFAULT,
+  children: null,
+  containerProps: {},
+  name: ''
+};
+
+exports.defaultProps = defaultProps;

package/cjs/Checkbox/elements/CheckMark.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const CheckMark = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1rrft2r-0"
+})([""]);
+
+module.exports = CheckMark;

package/cjs/Checkbox/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSCheckbox = require('./DSCheckbox.js');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+
+
+
+exports.CheckboxWithSchema = DSCheckbox.CheckboxWithSchema;
+exports.DSCheckbox = DSCheckbox.DSCheckbox;
+exports["default"] = DSCheckbox.DSCheckbox;
+Object.defineProperty(exports, 'CHECKBOX_VARIANT', {
+	enumerable: true,
+	get: function () { return propTypes.CHECKBOX_VARIANT; }
+});

package/cjs/Checkbox/props.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+
+const checkboxProps = {
+  containerProps: reactDesc.PropTypes.object.description('Set of Properties attached to the main container'),
+  labelText: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.element]).description('Displayable label for the checkbox'),
+  htmlFor: reactDesc.PropTypes.element.description('html for attr'),
+  hasError: reactDesc.PropTypes.bool.description('Whether the checkbox has error or not').defaultValue(false),
+  readOnly: reactDesc.PropTypes.bool.description('Whether the checkbox is read only or not').defaultValue(false),
+  disabled: reactDesc.PropTypes.bool.description('Whether the checkbox is disabled or not').defaultValue(false),
+  checked: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.oneOf(['mixed']), reactDesc.PropTypes.bool]).description('Whether the checkbox is checked, mixed or unchecked').defaultValue(false),
+  value: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number, reactDesc.PropTypes.object]).description('Value that takes the checkbox if it is checked'),
+  variant: reactDesc.PropTypes.oneOf(propTypes.checkboxVariants).description('checbkox variant').defaultValue(propTypes.CHECKBOX_VARIANT.DEFAULT),
+  children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.element, reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.element)]).description('children elements'),
+  onChange: reactDesc.PropTypes.func.description('function executed when the checkbox changes'),
+  name: reactDesc.PropTypes.string.description('checkbox s name')
+};
+
+exports.checkboxProps = checkboxProps;

package/cjs/CheckboxGroup/DSCheckboxGroup.js

@@ -0,0 +1,117 @@
+'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 DSCheckbox = require('../Checkbox/DSCheckbox.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, "-checkbox-group");
+
+const CheckboxItem = props => /*#__PURE__*/_jsx__default["default"](GroupItem__default["default"], {
+  render: context => /*#__PURE__*/jsxRuntime.jsx(DSCheckbox.DSCheckbox, _objectSpread(_objectSpread({}, props), {}, {
+    checked: context.activeValue && context.activeValue.indexOf(props.value) !== -1,
+    disabled: context.disabled || props.disabled,
+    onChange: context.onChange
+  }))
+});
+
+const DSCheckboxGroup = _ref => {
+  let {
+    onChange,
+    activeValue,
+    children,
+    disabled,
+    orientation,
+    truncateText,
+    labelProps,
+    containerProps
+  } = _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,
+    multiple: true,
+    onChange: onChange
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    className: "".concat(baseClass, " ").concat(baseClass, "--").concat(orientation)
+  }, labelProps && labelProps.labelText ? {} : containerProps), {}, {
+    role: "group",
+    children: React__default["default"].Children.map(children, (child, index) => /*#__PURE__*/jsxRuntime.jsx(CheckboxItem, _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;
+};
+
+const noop = () => null;
+
+DSCheckboxGroup.defaultProps = defaultProps.defaultProps;
+const DSCheckboxGroupWithSchema = reactDesc.describe(DSCheckboxGroup);
+DSCheckboxGroupWithSchema.propTypes = props.props;
+CheckboxItem.defaultProps = {
+  checked: false,
+  disabled: false,
+  onChange: noop
+};
+
+exports.DSCheckboxGroup = DSCheckboxGroup;
+exports.DSCheckboxGroupWithSchema = DSCheckboxGroupWithSchema;
+exports["default"] = DSCheckboxGroup;

package/cjs/CheckboxGroup/defaultProps.js

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

package/cjs/CheckboxGroup/index.js

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

package/cjs/CheckboxGroup/props.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var DSCheckbox = require('../Checkbox/DSCheckbox.js');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+
+const props = {
+  /**
+   * Allows a function that is triggered once the checkbox group changes
+   */
+  onChange: reactDesc.PropTypes.func.description('Allows a function that is triggered once the checkbox group changes'),
+
+  /**
+   * Default active value
+   */
+  activeValue: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number, reactDesc.PropTypes.array]).description('Default active value'),
+
+  /**
+   * Checkbox group items to show of type DSCheckbox
+   */
+  children: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
+    type: DSCheckbox.DSCheckbox
+  })).description('Checkbox group items to show of type DSCheckbox'),
+
+  /**
+   * Whether the checkbox group is disabled or not
+   */
+  disabled: reactDesc.PropTypes.bool.description('Whether the checkbox group is disabled or not'),
+
+  /**
+   * ['horizontal', 'vertical']
+   */
+  orientation: reactDesc.PropTypes.oneOf(propTypes.orientation).description("['horizontal', 'vertical']"),
+
+  /**
+   * label props
+   */
+  labelProps: reactDesc.PropTypes.objectOf(reactDesc.PropTypes.shape({
+    feedbackMessage: reactDesc.PropTypes.string,
+    labelText: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.element]),
+    required: reactDesc.PropTypes.bool
+  })).description('label props')
+};
+
+exports.props = props;

package/cjs/ComboBox/DSComboBox.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./v1/DSComboBox.js');
+var Combobox = require('./v2/Combobox.js');
+var Select = require('react-select');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+
+
+
+exports.DSComboBox2 = Combobox.DSComboBox2;
+exports["default"] = Combobox.DSComboBox2;
+Object.defineProperty(exports, 'components', {
+	enumerable: true,
+	get: function () { return Select.components; }
+});
+Object.defineProperty(exports, 'COMBOBOX_VARIANT', {
+	enumerable: true,
+	get: function () { return propTypes.COMBOBOX_VARIANT; }
+});

package/cjs/ComboBox/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./v1/DSComboBox.js');
+var Combobox = require('./v2/Combobox.js');
+var Select = require('react-select');
+var propTypes = require('@elliemae/ds-shared/prop-types');
+
+
+
+exports.ComboBoxWithSchema = Combobox.ComboBoxWithSchema;
+exports.DSComboBox2 = Combobox.DSComboBox2;
+exports["default"] = Combobox.DSComboBox2;
+Object.defineProperty(exports, 'components', {
+	enumerable: true,
+	get: function () { return Select.components; }
+});
+Object.defineProperty(exports, 'COMBOBOX_VARIANT', {
+	enumerable: true,
+	get: function () { return propTypes.COMBOBOX_VARIANT; }
+});