@elliemae/ds-form 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/Radio/Circle.js

@@ -1,22 +1,24 @@
-import * as React from "react";
-import React2 from "react";
-import { withTheme } from "@elliemae/ds-system";
-const Circle = ({ checked, theme }) => {
-  const r = theme.breakpoints.medium.split("px")[0] - window.innerWidth >= 0 ? 6 : 4;
-  return /* @__PURE__ */ React2.createElement("svg", {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { withTheme } from '@elliemae/ds-system';
+
+const Circle = _ref => {
+  let {
+    checked,
+    theme
+  } = _ref;
+  const r = theme.breakpoints.medium.split('px')[0] - window.innerWidth >= 0 ? 6 : 4;
+  return /*#__PURE__*/_jsx("svg", {
     width: "100%",
     height: "100%"
-  }, /* @__PURE__ */ React2.createElement("circle", {
-    className: checked ? "checked" : "unchecked",
-    r,
+  }, void 0, /*#__PURE__*/_jsx("circle", {
+    className: checked ? 'checked' : 'unchecked',
+    r: r,
     cx: "50%",
     cy: "50%"
   }));
 };
-const ThemedCircle = withTheme(Circle);
-var Circle_default = ThemedCircle;
-export {
-  ThemedCircle as Circle,
-  Circle_default as default
-};
-//# sourceMappingURL=Circle.js.map
+
+var Circle$1 = withTheme(Circle);
+
+export { Circle$1 as default };

package/esm/Radio/DSRadio.js

@@ -1,115 +1,179 @@
-import * as React from "react";
-import React2, { useRef } from "react";
-import { PropTypes, describe } from "react-desc";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-import { Circle } from "./Circle";
-const DSRadio = ({
-  containerProps,
-  className,
-  style,
-  labelText,
-  htmlFor,
-  hasError,
-  readOnly,
-  disabled,
-  checked,
-  value,
-  name,
-  onChange,
-  children,
-  tabIndex,
-  ...otherProps
-}) => {
-  const { cssClassName, classNameElement } = convertPropToCssClassName("form-element-radio", className, {
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { useRef } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import { convertPropToCssClassName } from '@elliemae/ds-classnames';
+import Circle from './Circle.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+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(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
-  });
-  const checkRef = useRef(null);
-  return /* @__PURE__ */ React2.createElement("div", {
-    ...containerProps,
-    className: cssClassName
-  }, /* @__PURE__ */ React2.createElement("label", {
-    className: classNameElement("label"),
-    htmlFor
-  }, /* @__PURE__ */ React2.createElement("input", {
-    ...otherProps,
-    ref: checkRef,
-    "aria-disabled": disabled,
-    checked: disabled ? false : checked,
-    className: classNameElement("input"),
     disabled,
+    checked,
+    value,
     name,
-    onChange: (e) => {
-      if (!readOnly && !disabled) {
-        onChange(e);
-      }
-    },
+    onChange,
+    children,
+    tabIndex
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  // this will be solved when we move to styled components...
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const {
+    cssClassName,
+    classNameElement
+  } = convertPropToCssClassName('form-element-radio', className, {
+    hasError,
     readOnly,
-    tabIndex: -1,
-    type: "radio",
-    value
-  }), /* @__PURE__ */ React2.createElement("span", {
-    ref: otherProps.innerRef,
-    "aria-checked": checked,
-    "aria-disabled": disabled,
-    className: classNameElement("input-button"),
-    onKeyDown: (e) => {
-      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,
-    tabIndex: disabled ? -1 : tabIndex
-  }, /* @__PURE__ */ React2.createElement(Circle, {
-    checked
-  })), /* @__PURE__ */ React2.createElement("span", {
-    className: classNameElement("label-text")
-  }, labelText)), children && /* @__PURE__ */ React2.createElement("div", {
-    className: classNameElement("radio-children")
-  }, children));
+    disabled
+  });
+  const checkRef = useRef(null);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+    className: cssClassName,
+    children: [/*#__PURE__*/_jsx("label", {
+      className: classNameElement('label'),
+      htmlFor: htmlFor
+    }, void 0, /*#__PURE__*/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__*/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(Circle, {
+        checked: checked
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      className: classNameElement('label-text')
+    }, void 0, labelText)), children && /*#__PURE__*/_jsx("div", {
+      className: classNameElement('radio-children')
+    }, void 0, children)]
+  }));
 };
+
 DSRadio.defaultProps = {
   containerProps: {},
-  className: "",
+  className: '',
   hasError: false,
   readOnly: false,
   disabled: false,
   checked: false,
-  name: "",
+  name: '',
   onChange: () => null,
   children: null,
   tabIndex: 0
 };
 const radioProps = {
-  containerProps: PropTypes.object.description("Injected props to wrapper element of component"),
-  className: PropTypes.string.description("css class prop"),
-  name: PropTypes.string.description("name property to manage form"),
-  labelText: PropTypes.string.description("Displayable label for the radio"),
-  htmlFor: PropTypes.element.description("HTMLFOR property to manage form"),
-  hasError: PropTypes.bool.description("Whether the radio has error or not"),
-  readOnly: PropTypes.bool.description("Whether the radio is read only or not"),
-  disabled: PropTypes.bool.description("Whether the radio is disabled or not"),
-  checked: PropTypes.bool.description("Whether the radio is checked or not"),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description("Value that takes the checkbox if it is checked").isRequired,
-  onChange: PropTypes.func.description("Allows a function that is triggered once the radio changes"),
-  children: PropTypes.node.description("Optional, if you want a checkbox customized"),
-  tabIndex: PropTypes.number.description("HTML tabindex to manage focus"),
-  style: PropTypes.number.description("style override object")
+  /** Injected props to wrapper element of component */
+  containerProps: PropTypes.object.description('Injected props to wrapper element of component'),
+
+  /** css class prop */
+  className: PropTypes.string.description('css class prop'),
+
+  /** name property to manage form */
+  name: PropTypes.string.description('name property to manage form'),
+
+  /**
+   * Displayable label for the radio
+   */
+  labelText: PropTypes.string.description('Displayable label for the radio'),
+
+  /** HTMLFOR property to manage form */
+  htmlFor: PropTypes.element.description('HTMLFOR property to manage form'),
+
+  /**
+   * Whether the radio has error or not
+   */
+  hasError: PropTypes.bool.description('Whether the radio has error or not'),
+
+  /**
+   * Whether the radio is read only or not
+   */
+  readOnly: PropTypes.bool.description('Whether the radio is read only or not'),
+
+  /**
+   * Whether the radio is disabled or not
+   */
+  disabled: PropTypes.bool.description('Whether the radio is disabled or not'),
+
+  /**
+   * Whether the radio is checked or not
+   */
+  checked: PropTypes.bool.description('Whether the radio is checked or not'),
+
+  /**
+   * Value that takes the checkbox if it is checked
+   */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]).description('Value that takes the checkbox if it is checked').isRequired,
+
+  /**
+   * Allows a function that is triggered once the radio changes
+   */
+  onChange: PropTypes.func.description('Allows a function that is triggered once the radio changes'),
+
+  /**
+   * Optional, if you want a checkbox customized
+   */
+  children: PropTypes.node.description('Optional, if you want a checkbox customized'),
+
+  /** HTML tabindex to manage focus */
+  tabIndex: PropTypes.number.description('HTML tabindex to manage focus'),
+
+  /** style override object */
+  style: PropTypes.number.description('style override object')
 };
-DSRadio.propTypes = radioProps;
 const DSRadioWithSchema = describe(DSRadio);
 DSRadioWithSchema.propTypes = radioProps;
-var DSRadio_default = DSRadio;
-export {
-  DSRadio,
-  DSRadioWithSchema,
-  DSRadio_default as default
-};
-//# sourceMappingURL=DSRadio.js.map
+
+export { DSRadioWithSchema, DSRadio as default };

package/esm/Radio/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./DSRadio";
-//# sourceMappingURL=index.js.map
+export { DSRadioWithSchema, default } from './DSRadio.js';

package/esm/RadioGroup/DSRadioGroup.js

@@ -1,85 +1,96 @@
-import * as React from "react";
-import React2 from "react";
-import { describe } from "react-desc";
-import { GroupItem, Group } from "@elliemae/ds-shared";
-import { DSFormItemLayout } from "../FormItem";
-import { DSRadio } from "../Radio";
-import { props as rprops } from "./props";
-import { defaultProps } from "./defaultProps";
-const emClassPrefix = "em-ds";
-const baseClass = `${emClassPrefix}-radio-group`;
-const RadioItem = (props) => /* @__PURE__ */ React2.createElement(GroupItem, {
-  render: (context) => /* @__PURE__ */ React2.createElement(DSRadio, {
-    ...props,
+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 = ({
-  containerProps,
-  onChange,
-  activeValue,
-  children,
-  orientation,
-  disabled,
-  truncateText,
-  labelProps
-}) => {
+
+const DSRadioGroup = _ref => {
+  let {
+    containerProps,
+    onChange,
+    activeValue,
+    children,
+    orientation,
+    disabled,
+    truncateText,
+    labelProps
+  } = _ref;
   const checkRefs = [];
-  const count = React2.Children.count(children);
+  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 === '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();
+
+    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+      if (index === count - 1) checkRefs[0].focus();else checkRefs[index + 1].focus();
     }
   };
-  const group = /* @__PURE__ */ React2.createElement(Group, {
-    activeValue,
-    disabled,
-    onChange
-  }, /* @__PURE__ */ React2.createElement("div", {
-    "data-testid": "ds-radiogroup",
-    ...labelProps && labelProps.labelText ? {} : containerProps,
-    className: `${baseClass} ${baseClass}--${orientation}`,
-    role: "group"
-  }, React2.Children.map(children, (child, index) => /* @__PURE__ */ React2.createElement(RadioItem, {
-    ...child.props,
-    innerRef: (t) => {
-      checkRefs.push(t);
-    },
-    onKeyDown: (e) => onKeyDown(e, index)
-  }), null)));
+
+  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__ */ React2.createElement("div", {
-      className: `${baseClass}-form-item-layout-wrapper`,
-      ...containerProps,
-      role: "group"
-    }, /* @__PURE__ */ React2.createElement(DSFormItemLayout, {
-      ...labelProps,
-      inputComponent: group,
-      onChange,
-      truncateText
+    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.propTypes = rprops;
+
 DSRadioGroup.defaultProps = defaultProps;
 const DSRadioGroupWithSchema = describe(DSRadioGroup);
-DSRadioGroupWithSchema.propTypes = rprops;
-var DSRadioGroup_default = DSRadioGroup;
-export {
-  DSRadioGroup,
-  DSRadioGroupWithSchema,
-  DSRadioGroup_default as default
-};
-//# sourceMappingURL=DSRadioGroup.js.map
+DSRadioGroupWithSchema.propTypes = props;
+
+export { DSRadioGroupWithSchema, DSRadioGroup as default };

package/esm/RadioGroup/defaultProps.js

@@ -1,17 +1,14 @@
-import * as React from "react";
 const defaultProps = {
   containerProps: {},
   onChange: () => null,
-  orientation: "vertical",
+  orientation: 'vertical',
   disabled: false,
   truncateText: false,
   labelProps: {
-    feedbackMessage: "",
-    labelText: "",
+    feedbackMessage: '',
+    labelText: '',
     required: false
   }
 };
-export {
-  defaultProps
-};
-//# sourceMappingURL=defaultProps.js.map
+
+export { defaultProps };

package/esm/RadioGroup/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./DSRadioGroup";
-//# sourceMappingURL=index.js.map
+export { default } from './DSRadioGroup.js';

package/esm/RadioGroup/props.js

@@ -1,23 +1,39 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
-import { orientation as radioGroupOrientation } from "@elliemae/ds-shared/prop-types";
+import { PropTypes } from 'react-desc';
+import { orientation } from '@elliemae/ds-shared/prop-types';
+
 const props = {
-  containerProps: PropTypes.object.description("Inject props to component wrapper"),
-  onChange: PropTypes.func.description("Allows a function that is triggered once the radio group changes"),
-  activeValue: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]).description("Selected default active value"),
-  children: PropTypes.arrayOf(PropTypes.element).isRequired.description("Radio group items to show of type DSRadio"),
-  orientation: PropTypes.oneOf(radioGroupOrientation).description("['horizontal', 'vertical']"),
-  disabled: PropTypes.bool.description(""),
+  /** 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")
+  }).description('Whether the radio group is disabled or not')
 };
-export {
-  props
-};
-//# sourceMappingURL=props.js.map
+
+export { props };

package/esm/RequiredMark/RequiredMark.js

@@ -1,23 +1,27 @@
-import * as React from "react";
-import React2 from "react";
-import { convertPropToCssClassName } from "@elliemae/ds-classnames";
-const { cssClassName } = convertPropToCssClassName("form-required-mark");
-const RequiredMark = ({ required = false, optional = false }) => {
-  if (!required && !optional)
-    return null;
+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__ */ React2.createElement("span", {
-      className: `${cssClassName}`
-    }, "\u25CF");
+    return /*#__PURE__*/_jsx("span", {
+      className: "".concat(cssClassName)
+    }, void 0, "\u25CF");
   }
-  return /* @__PURE__ */ React2.createElement("span", {
-    className: `${cssClassName} optional-mark`
-  }, "\u26AC");
+
+  return /*#__PURE__*/_jsx("span", {
+    className: "".concat(cssClassName, " optional-mark")
+  }, void 0, "\u26AC");
 };
-var RequiredMark_default = RequiredMark;
-export {
-  RequiredMark as DSRequiredMark,
-  RequiredMark,
-  RequiredMark_default as default
-};
-//# sourceMappingURL=RequiredMark.js.map
+
+export { RequiredMark as default };

package/esm/RequiredMark/index.js

@@ -1,3 +1 @@
-import * as React from "react";
-export * from "./RequiredMark";
-//# sourceMappingURL=index.js.map
+export { default } from './RequiredMark.js';