@shipengine/elements 2.20.0 → 2.21.0

package/cjs/components/field/create-field-controller.cjs

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var fieldLabel = require('../field-label/field-label.cjs');
+var isString = require('../../utilities/predicates/isString.cjs');
+
+const createFieldController = (options = {}) => function FieldController(_a) {
+  var {
+      children,
+      control,
+      defaultValue,
+      displayErrors = true,
+      displayLabel = true,
+      errors: errorsProp,
+      hint,
+      inputOnly,
+      isOptional,
+      label,
+      labelInfo,
+      labelWeight,
+      labelWidth,
+      labelPosition,
+      name,
+      nativeLabel,
+      rules,
+      shouldUnregister,
+      subLabel
+    } = _a,
+    formInputProps = tslib.__rest(_a, ["children", "control", "defaultValue", "displayErrors", "displayLabel", "errors", "hint", "inputOnly", "isOptional", "label", "labelInfo", "labelWeight", "labelWidth", "labelPosition", "name", "nativeLabel", "rules", "shouldUnregister", "subLabel"]);
+  const {
+    field,
+    fieldState
+  } = reactHookForm.useController({
+    control,
+    defaultValue: defaultValue,
+    name,
+    rules,
+    shouldUnregister
+  });
+  // Run field validation on mount if the form has already been submitted. This ensures that optional fields
+  // mounted *after* a submission (when form validation is in 'onChange' mode) will immediately
+  // display any validation errors
+  React.useEffect(() => {
+    void (() => tslib.__awaiter(this, void 0, void 0, function* () {
+      if (control._formState.isSubmitted) {
+        const {
+          errors
+        } = yield control._executeSchema([name]);
+        const error = reactHookForm.get(errors, name);
+        if (error) {
+          reactHookForm.set(control._formState.errors, name, error);
+          // This is a hack;  calling _updateValid immediately will not notifiy formState subscribers
+          setTimeout(() => control._updateValid(), 0);
+        }
+      }
+    }))();
+  }, [control, name]);
+  const {
+    t
+  } = reactI18next.useTranslation("common");
+  const getFieldErrorMessages = () => {
+    var _a;
+    if ((_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) {
+      try {
+        const _b = JSON.parse(fieldState.error.message),
+          {
+            message
+          } = _b,
+          errorMeta = tslib.__rest(_b, ["message"]);
+        return [t(message, Object.assign({
+          fieldLabel: label
+        }, errorMeta))];
+      } catch (_c) {
+        return [t(fieldState.error.message, {
+          fieldLabel: label
+        })];
+      }
+    }
+    return [];
+  };
+  // TODO - Aggregation for composite-field errors (use similar algo as InputGroups)
+  const getCompositeFieldErrorMessages = () => Object.entries(fieldState.error || {})
+  // TODO - The RHF FieldError only has the fieldNames available, not their labels.
+  // We need to figure out a better way to handle composite fields (like MoneyInput)
+  .map(([fieldName, err]) => (err === null || err === void 0 ? void 0 : err.message) && t(err.message, {
+    fieldLabel: fieldName[0].toUpperCase() + fieldName.slice(1)
+  })).filter(isString.isString);
+  const fieldErrorMessages =
+  // TODO - Checking the value is a stopgap and won't work for certain edge cases. Refactor to use a FieldControllerOption of 'composite'
+  typeof field.value === "object" && field.value !== null ? getCompositeFieldErrorMessages() : getFieldErrorMessages();
+  const mergedErrorMessages = [...(errorsProp || []), ...fieldErrorMessages];
+  const renderFormInput = () => {
+    const inputLabel = isOptional ? t("schema.optionalLabel", {
+      fieldLabel: label
+    }) : label;
+    const input = children(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, formInputProps), nativeLabel && {
+      label: inputLabel
+    }), !nativeLabel && {
+      "aria-label": inputLabel
+    }), field), {
+      isInvalid: mergedErrorMessages.length > 0
+    }));
+    if (!displayErrors) return input;
+    return jsxRuntime.jsx(giger.FormField, Object.assign({
+      message: displayErrors && mergedErrorMessages.length > 0 ? {
+        content: mergedErrorMessages.join(", "),
+        type: giger.FieldMessageType.ERROR
+      } : hint ? {
+        content: hint,
+        type: giger.FieldMessageType.HINT
+      } : undefined
+    }, {
+      children: input
+    }));
+  };
+  if (options.inputOnly || inputOnly || nativeLabel) return renderFormInput();
+  return jsxRuntime.jsx(fieldLabel.FieldLabel, Object.assign({
+    label: displayLabel ? label : undefined,
+    labelInfo: labelInfo,
+    position: labelPosition,
+    subLabel: subLabel,
+    weight: labelWeight,
+    width: labelWidth,
+    withInput: true
+  }, {
+    children: renderFormInput()
+  }));
+};
+
+exports.createFieldController = createFieldController;

package/cjs/components/field/credit-card-input/credit-card-input.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../../utilities/money.cjs');
+var giger = require('@shipengine/giger');
+var createFieldController = require('../create-field-controller.cjs');
+var field_styles = require('../field.styles.cjs');
+
+const CreditCardInputController = createFieldController.createFieldController();
+const transform = {
+  in: v => v ? money.formatCreditCardNumber(v) : "",
+  out: event => event.target.value === "" ? null : event.target.value.replace(/\s/g, "")
+};
+const CreditCardInput = fieldProps => jsxRuntime.jsx(CreditCardInputController, Object.assign({}, fieldProps, {
+  children: _a => {
+    var {
+        onChange,
+        value
+      } = _a,
+      creditCardInputProps = tslib.__rest(_a, ["onChange", "value"]);
+    return jsxRuntime.jsx("div", Object.assign({
+      css: field_styles.styles.overrideStyles
+    }, {
+      children: jsxRuntime.jsx(giger.Input, Object.assign({}, creditCardInputProps, {
+        onChange: e => {
+          // Amex allows 15 digits, all others allow 16
+          if (e.target.value.replace(/\s/g, "").length > 16) {
+            e.preventDefault();
+          } else {
+            onChange(transform.out(e));
+          }
+        },
+        onKeyDown: e => {
+          // Prevent non-numeric characters
+          if (!/^([0-9]|Backspace|Delete|Enter|Tab)$/i.test(e.key)) e.preventDefault();
+        },
+        type: "text",
+        value: transform.in(value)
+      }))
+    }));
+  }
+}));
+
+exports.CreditCardInput = CreditCardInput;

package/cjs/components/field/credit-card-input/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var creditCardInput = require('./credit-card-input.cjs');
+
+
+
+exports.CreditCardInput = creditCardInput.CreditCardInput;

package/cjs/components/field/date-picker/date-picker.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var date = require('../../../utilities/date.cjs');
+var isToday = require('date-fns/isToday');
+var giger = require('@shipengine/giger');
+var createFieldController = require('../create-field-controller.cjs');
+var elementsContextProvider = require('../../../elements-provider/elements-context-provider.cjs');
+
+const DatePickerController = createFieldController.createFieldController();
+const DatePicker = fieldProps => {
+  const {
+    locale
+  } = elementsContextProvider.useElements();
+  const dateFormat = date.getlocaleDateStringFormat(locale);
+  return jsxRuntime.jsx(DatePickerController, Object.assign({}, fieldProps, {
+    children: _a => {
+      var _datePickerProps = tslib.__rest(_a, ["ref"]);
+      const onChange = date$1 => {
+        var _a, _b;
+        const inputDate = Array.isArray(date$1) ? date$1[0] : date$1;
+        if (inputDate) {
+          const formattedDate = date.formatByDateAndLocale(inputDate, locale, dateFormat);
+          (_a = _datePickerProps.onChange) === null || _a === void 0 ? void 0 : _a.call(_datePickerProps, formattedDate);
+        } else {
+          (_b = _datePickerProps.onChange) === null || _b === void 0 ? void 0 : _b.call(_datePickerProps, inputDate);
+        }
+      };
+      const datePickerProps = Object.assign(Object.assign({}, _datePickerProps), {
+        onChange,
+        selected: new Date(_datePickerProps.value),
+        selectsRange: false
+      });
+      return jsxRuntime.jsx(giger.DatePicker, Object.assign({}, datePickerProps, {
+        "aria-label": datePickerProps.label,
+        formatInputValue: value => isToday.isToday(value) ? datePickerProps.placeholderText || "Today" : value.toLocaleDateString(locale, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric"
+        }),
+        locale: locale
+      }));
+    }
+  }));
+};
+
+exports.DatePicker = DatePicker;

package/cjs/components/field/date-picker/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var datePicker = require('./date-picker.cjs');
+
+
+
+exports.DatePicker = datePicker.DatePicker;

package/cjs/components/field/expiration-input/expiration-input.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../../utilities/money.cjs');
+var giger = require('@shipengine/giger');
+var createFieldController = require('../create-field-controller.cjs');
+var field_styles = require('../field.styles.cjs');
+
+const ExpirationInputController = createFieldController.createFieldController();
+const transform = {
+  in: v => v ? money.formatExpiration(v) : "",
+  out: event => event.target.value === "" ? null : event.target.value
+};
+const ExpirationInput = fieldProps => jsxRuntime.jsx(ExpirationInputController, Object.assign({}, fieldProps, {
+  children: _a => {
+    var {
+        onChange,
+        value
+      } = _a,
+      expirationInputProps = tslib.__rest(_a, ["onChange", "value"]);
+    return jsxRuntime.jsx("div", Object.assign({
+      css: field_styles.styles.overrideStyles
+    }, {
+      children: jsxRuntime.jsx(giger.Input, Object.assign({}, expirationInputProps, {
+        onChange: e => {
+          if (e.target.value.length > 7) {
+            e.preventDefault();
+          } else {
+            onChange(transform.out(e));
+          }
+        },
+        onKeyDown: e => {
+          // Prevent non-numeric characters
+          if (!/^([0-9]|Backspace|Delete|Enter|Tab)$/i.test(e.key)) e.preventDefault();
+        },
+        type: "text",
+        value: transform.in(value)
+      }))
+    }));
+  }
+}));
+
+exports.ExpirationInput = ExpirationInput;

package/cjs/components/field/expiration-input/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var expirationInput = require('./expiration-input.cjs');
+
+
+
+exports.ExpirationInput = expirationInput.ExpirationInput;

package/cjs/components/field/field.styles.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  overrideStyles: theme => ({
+    "&& input, && span[role='button']": {
+      cursor: "auto",
+      fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
+    },
+    "&& input:hover": {
+      cursor: "pointer"
+    },
+    "&&.disabled input:hover": {
+      cursor: "not-allowed"
+    }
+  })
+});
+
+exports.styles = styles;

package/cjs/components/field/fields.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var checkboxInput = require('./checkbox-input/checkbox-input.cjs');
+var creditCardInput = require('./credit-card-input/credit-card-input.cjs');
+var datePicker = require('./date-picker/date-picker.cjs');
+var expirationInput = require('./expiration-input/expiration-input.cjs');
+var inputGroup = require('./input-group/input-group.cjs');
+var moneyInput = require('./money-input/money-input.cjs');
+var numberInput = require('./number-input/number-input.cjs');
+var rateSelect = require('./rate-select/rate-select.cjs');
+var selectAutoComplete = require('./select-auto-complete/select-auto-complete.cjs');
+var select = require('./select/select.cjs');
+var selectWithCategories = require('./select/select-with-categories.cjs');
+var submitButton = require('./submit-button/submit-button.cjs');
+var _switch = require('./switch/switch.cjs');
+var textArea = require('./text-area/text-area.cjs');
+var textInput = require('./text-input/text-input.cjs');
+
+
+
+exports.CheckboxInput = checkboxInput.CheckboxInput;
+exports.CreditCardInput = creditCardInput.CreditCardInput;
+exports.DatePicker = datePicker.DatePicker;
+exports.ExpirationInput = expirationInput.ExpirationInput;
+exports.InputGroup = inputGroup.InputGroup;
+exports.MoneyInput = moneyInput.MoneyInput;
+exports.transform = moneyInput.transform;
+exports.NumberInput = numberInput.NumberInput;
+exports.RateSelect = rateSelect.RateSelect;
+exports.SelectAutoComplete = selectAutoComplete.SelectAutoComplete;
+exports.Select = select.Select;
+exports.SelectWithCategories = selectWithCategories.SelectWithCategories;
+exports.SubmitButton = submitButton.SubmitButton;
+exports.Switch = _switch.Switch;
+exports.TextArea = textArea.TextArea;
+exports.TextInput = textInput.TextInput;

package/cjs/components/field/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var fields = require('./fields.cjs');
+
+
+
+exports.Field = fields;

package/cjs/components/field/input-group/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var inputGroup = require('./input-group.cjs');
+
+
+
+exports.InputGroup = inputGroup.InputGroup;

package/cjs/components/field/input-group/input-group.cjs

@@ -0,0 +1,146 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var inputGroup_styles = require('./input-group.styles.cjs');
+var fieldLabel = require('../../field-label/field-label.cjs');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const renderDivider = (divider, index) => Array.isArray(divider) ? divider[index] : divider;
+const InputGroup = _a => {
+  var {
+      children,
+      control,
+      defaultValue,
+      disabled,
+      divider,
+      compact,
+      message,
+      sizes,
+      name,
+      rules,
+      shouldUnregister,
+      trigger,
+      labelPosition,
+      labelWidth
+    } = _a,
+    nativeProps = tslib.__rest(_a, ["children", "control", "defaultValue", "disabled", "divider", "compact", "message", "sizes", "name", "rules", "shouldUnregister", "trigger", "labelPosition", "labelWidth"]);
+  const {
+    fieldState: {
+      error: groupError
+    },
+    formState: {
+      errors: formErrors,
+      isSubmitted
+    }
+  } = reactHookForm.useController({
+    control,
+    name
+  });
+  const {
+    t
+  } = reactI18next.useTranslation("common");
+  const propsOfChildren = React__namespace.Children.map(children, child => ({
+    label: child.props.label,
+    name: child.props.name
+  }));
+  const fieldValuesOfChildren = reactHookForm.useWatch({
+    control: control,
+    name: propsOfChildren.map(c => c.name)
+  });
+  // Trigger group-level validations when child fields validate interactively (mode: onChange)
+  React.useEffect(() => {
+    if (isSubmitted) void trigger(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Allow spreading in the deps array
+  }, [isSubmitted, ...fieldValuesOfChildren]);
+  const childLabelsByErrorKey = propsOfChildren.reduce((results, childProps) => {
+    var _a;
+    // Undocumented 'get' method retrieves an error by path: https://github.com/react-hook-form/error-message/blob/master/src/ErrorMessage.tsx
+    const err = reactHookForm.get(formErrors, childProps.name);
+    return Object.assign(Object.assign({}, results), (err === null || err === void 0 ? void 0 : err.message) && {
+      [err.message]: [...((_a = results[err.message]) !== null && _a !== void 0 ? _a : []), childProps.label]
+    });
+  }, {});
+  const childErrorMessages = Object.entries(childLabelsByErrorKey).flatMap(([errorKey, childLabels]) => {
+    if (errorKey.includes("schemaErrors.")) {
+      return childLabels.length > 1 ? t(`${errorKey}List`, {
+        fieldLabels: childLabels
+      }) : t(errorKey, {
+        fieldLabel: childLabels[0]
+      });
+    }
+    // If the errorKey doesn't include `schemaErrors.`, it's a default Zod error message
+    // and we need to add it to the errorMap in validation.ts
+    return childLabels.map(() => errorKey);
+  });
+  const groupErrorMessage = (groupError === null || groupError === void 0 ? void 0 : groupError.message) ? t(groupError.message, {
+    fieldLabel: nativeProps.label
+  }) : undefined;
+  const mergedErrorMessages = [...childErrorMessages, ...(groupErrorMessage ? [groupErrorMessage] : [])];
+  return jsxRuntime.jsx(fieldLabel.FieldLabel, Object.assign({}, nativeProps, {
+    position: labelPosition,
+    width: labelWidth,
+    withInput: true
+  }, {
+    children: jsxRuntime.jsx(giger.FormField, Object.assign({
+      message: mergedErrorMessages.length > 0 ? {
+        content: mergedErrorMessages.join(", "),
+        type: giger.FieldMessageType.ERROR
+      } : message
+    }, {
+      children: jsxRuntime.jsx("div", Object.assign({
+        css: inputGroup_styles.styles.getGroupParent(compact)
+      }, {
+        children: React__namespace.Children.map(children, (child, index) => jsxRuntime.jsxs("div", Object.assign({
+          css: inputGroup_styles.styles.getGroupChild(sizes === null || sizes === void 0 ? void 0 : sizes[index])
+        }, {
+          children: [jsxRuntime.jsx("div", Object.assign({
+            css: inputGroup_styles.styles.getGroupChildInput({
+              compact,
+              index
+            })
+          }, {
+            children: /*#__PURE__*/React__namespace.cloneElement(child, {
+              disabled: disabled || child.props.disabled,
+              displayErrors: false,
+              errors: groupErrorMessage ? [`${name}_GROUP_ERROR`] : child.props.errors,
+              inputOnly: true
+            })
+          })), divider && jsxRuntime.jsx("div", Object.assign({
+            "aria-hidden": "true",
+            css: inputGroup_styles.styles.dividerStyles
+          }, {
+            children: renderDivider(divider, index)
+          }))]
+        }), child.key))
+      }))
+    }))
+  }));
+};
+
+exports.InputGroup = InputGroup;

package/cjs/components/field/input-group/input-group.styles.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  dividerStyles: theme => ({
+    flexGrow: 0,
+    lineHeight: styles$1.scopeTheme(theme).getLineHeight(styles$1.scopeTheme(theme).typography.fontSize.S, styles$1.scopeTheme(theme).typography.lineHeight.S),
+    paddingBottom: styles$1.scopeTheme(theme).spacing(1.5),
+    paddingLeft: styles$1.scopeTheme(theme).spacing(),
+    paddingRight: styles$1.scopeTheme(theme).spacing(),
+    paddingTop: styles$1.scopeTheme(theme).spacing(2) - 2
+  }),
+  getGroupChild: size => () => ({
+    display: "flex",
+    flexShrink: size ? 0 : 1,
+    width: size !== null && size !== void 0 ? size : "100%"
+  }),
+  getGroupChildInput: ({
+    compact,
+    index
+  }) => theme => Object.assign(Object.assign({}, compact && {
+    "&& > div > div": {
+      borderBottomLeftRadius: index ? 0 : styles$1.scopeTheme(theme).borderRadius.S,
+      borderBottomRightRadius: index ? styles$1.scopeTheme(theme).borderRadius.S : 0,
+      borderTopLeftRadius: index ? 0 : styles$1.scopeTheme(theme).borderRadius.S,
+      borderTopRightRadius: index ? styles$1.scopeTheme(theme).borderRadius.S : 0
+    }
+  }), {
+    flexGrow: 1
+  }),
+  getGroupParent: compact => theme => ({
+    display: "flex",
+    gap: compact ? 0 : styles$1.scopeTheme(theme).spacing(2),
+    width: "100%"
+  })
+});
+
+exports.styles = styles;

package/cjs/components/field/money-input/index.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var moneyInput = require('./money-input.cjs');
+
+
+
+exports.MoneyInput = moneyInput.MoneyInput;
+exports.transform = moneyInput.transform;

package/cjs/components/field/money-input/money-input-styles.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  leftDecoratorStyles: {
+    lineHeight: 1
+  }
+});
+
+exports.styles = styles;