@shipengine/elements 2.18.0 → 2.20.0

package/esm/components/error-fallback/error-fallback.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { scopeTheme } from '../../utilities/styles.js';
+import { useTranslation } from 'react-i18next';
+import { Icon, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+
+/**
+ * @internal
+ *
+ * # Error Fallback Component
+ *
+ * Fallback component for the Elements ErrorBoundary
+ *
+ * @see {@link ErrorFallbackProps | The props that are passed into the `<ErrorFallback />` component}
+ */
+const ErrorFallback = ({
+  error
+}) => {
+  var _a;
+  const {
+    t
+  } = useTranslation("common");
+  return jsxs("div", Object.assign({
+    css: {
+      alignItems: "center",
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      justifyContent: "center",
+      textAlign: "center",
+      width: "100%"
+    }
+  }, {
+    children: [jsx("div", Object.assign({
+      css: theme => ({
+        color: scopeTheme(theme).palette.error.main,
+        marginBottom: scopeTheme(theme).spacing(2)
+      })
+    }, {
+      children: jsx(Icon, {
+        name: IconNames.CANCEL,
+        size: IconSize.SIZE_LARGE
+      })
+    })), t([typeof error === "string" ? error : (_a = error.message) !== null && _a !== void 0 ? _a : "errorMessages.unknown"])]
+  }));
+};
+
+export { ErrorFallback };

package/esm/components/error-fallback/index.js

@@ -0,0 +1 @@
+export { ErrorFallback } from './error-fallback.js';

package/esm/components/error-state/error-state.js

@@ -0,0 +1,40 @@
+import { __rest } from 'tslib';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Icon, IconSize, Typography } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './error-state.styles.js';
+
+const ErrorState = _a => {
+  var {
+      title,
+      subtitle
+    } = _a,
+    rest = __rest(_a, ["title", "subtitle"]);
+  return jsxs("div", Object.assign({
+    css: styles.container
+  }, rest, {
+    children: [jsx(Icon, {
+      css: styles.icon,
+      name: IconNames.ALERT,
+      size: IconSize.SIZE_LARGE
+    }), jsx(Typography, Object.assign({
+      variant: "heading3"
+    }, {
+      children: title
+    })), jsx("div", Object.assign({
+      css: styles.subtitleContainer
+    }, {
+      children: Array.isArray(subtitle) ? subtitle.map(text => jsx(Typography, Object.assign({
+        variant: "body1"
+      }, {
+        children: text
+      }))) : jsx(Typography, Object.assign({
+        variant: "body1"
+      }, {
+        children: subtitle
+      }))
+    }))]
+  }));
+};
+
+export { ErrorState };

package/esm/components/error-state/error-state.styles.js

@@ -0,0 +1,22 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  container: theme => ({
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    margin: "0 auto",
+    padding: scopeTheme(theme).spacing(5),
+    rowGap: scopeTheme(theme).spacing(),
+    textAlign: "center"
+  }),
+  icon: theme => ({
+    color: scopeTheme(theme).palette.error.main
+  }),
+  subtitleContainer: {
+    display: "flex",
+    flexDirection: "column"
+  }
+});
+
+export { styles };

package/esm/components/error-state/index.js

@@ -0,0 +1 @@
+export { ErrorState } from './error-state.js';

package/esm/components/field/checkbox-input/checkbox-input.js

@@ -0,0 +1,31 @@
+import { __rest } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { Checkbox } from '@shipengine/giger';
+import { createFieldController } from '../create-field-controller.js';
+
+const CheckboxInputController = createFieldController();
+const CheckboxInput = _a => {
+  var {
+      checkboxLabel,
+      ariaLabel
+    } = _a,
+    fieldProps = __rest(_a, ["checkboxLabel", "ariaLabel"]);
+  return jsx(CheckboxInputController, Object.assign({
+    displayLabel: false
+  }, fieldProps, {
+    children: _a => {
+      var {
+          value
+        } = _a,
+        checkboxInputProps = __rest(_a, ["value"]);
+      return jsx(Checkbox, Object.assign({
+        checked: value
+      }, checkboxInputProps, {
+        "aria-label": ariaLabel,
+        label: checkboxLabel
+      }));
+    }
+  }));
+};
+
+export { CheckboxInput };

package/esm/components/field/checkbox-input/index.js

@@ -0,0 +1 @@
+export { CheckboxInput } from './checkbox-input.js';

package/esm/components/field/create-field-controller.js

@@ -0,0 +1,133 @@
+import { __rest, __awaiter } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useEffect } from 'react';
+import { useController, get, set } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FormField, FieldMessageType } from '@shipengine/giger';
+import { FieldLabel } from '../field-label/field-label.js';
+import { isString } from '../../utilities/predicates/isString.js';
+
+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 = __rest(_a, ["children", "control", "defaultValue", "displayErrors", "displayLabel", "errors", "hint", "inputOnly", "isOptional", "label", "labelInfo", "labelWeight", "labelWidth", "labelPosition", "name", "nativeLabel", "rules", "shouldUnregister", "subLabel"]);
+  const {
+    field,
+    fieldState
+  } = 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
+  useEffect(() => {
+    void (() => __awaiter(this, void 0, void 0, function* () {
+      if (control._formState.isSubmitted) {
+        const {
+          errors
+        } = yield control._executeSchema([name]);
+        const error = get(errors, name);
+        if (error) {
+          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
+  } = 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 = __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);
+  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 jsx(FormField, Object.assign({
+      message: displayErrors && mergedErrorMessages.length > 0 ? {
+        content: mergedErrorMessages.join(", "),
+        type: FieldMessageType.ERROR
+      } : hint ? {
+        content: hint,
+        type: FieldMessageType.HINT
+      } : undefined
+    }, {
+      children: input
+    }));
+  };
+  if (options.inputOnly || inputOnly || nativeLabel) return renderFormInput();
+  return jsx(FieldLabel, Object.assign({
+    label: displayLabel ? label : undefined,
+    labelInfo: labelInfo,
+    position: labelPosition,
+    subLabel: subLabel,
+    weight: labelWeight,
+    width: labelWidth,
+    withInput: true
+  }, {
+    children: renderFormInput()
+  }));
+};
+
+export { createFieldController };

package/esm/components/field/credit-card-input/credit-card-input.js

@@ -0,0 +1,43 @@
+import { __rest } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { formatCreditCardNumber } from '../../../utilities/money.js';
+import { Input } from '@shipengine/giger';
+import { createFieldController } from '../create-field-controller.js';
+import { styles } from '../field.styles.js';
+
+const CreditCardInputController = createFieldController();
+const transform = {
+  in: v => v ? formatCreditCardNumber(v) : "",
+  out: event => event.target.value === "" ? null : event.target.value.replace(/\s/g, "")
+};
+const CreditCardInput = fieldProps => jsx(CreditCardInputController, Object.assign({}, fieldProps, {
+  children: _a => {
+    var {
+        onChange,
+        value
+      } = _a,
+      creditCardInputProps = __rest(_a, ["onChange", "value"]);
+    return jsx("div", Object.assign({
+      css: styles.overrideStyles
+    }, {
+      children: jsx(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)
+      }))
+    }));
+  }
+}));
+
+export { CreditCardInput };

package/esm/components/field/credit-card-input/index.js

@@ -0,0 +1 @@
+export { CreditCardInput } from './credit-card-input.js';

package/esm/components/field/date-picker/date-picker.js

@@ -0,0 +1,46 @@
+import { __rest } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { getlocaleDateStringFormat, formatByDateAndLocale } from '../../../utilities/date.js';
+import { isToday } from 'date-fns/isToday';
+import { DatePicker as DatePicker$1 } from '@shipengine/giger';
+import { createFieldController } from '../create-field-controller.js';
+import { useElements } from '../../../elements-provider/elements-context-provider.js';
+
+const DatePickerController = createFieldController();
+const DatePicker = fieldProps => {
+  const {
+    locale
+  } = useElements();
+  const dateFormat = getlocaleDateStringFormat(locale);
+  return jsx(DatePickerController, Object.assign({}, fieldProps, {
+    children: _a => {
+      var _datePickerProps = __rest(_a, ["ref"]);
+      const onChange = date => {
+        var _a, _b;
+        const inputDate = Array.isArray(date) ? date[0] : date;
+        if (inputDate) {
+          const formattedDate = 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 jsx(DatePicker$1, Object.assign({}, datePickerProps, {
+        "aria-label": datePickerProps.label,
+        formatInputValue: value => isToday(value) ? datePickerProps.placeholderText || "Today" : value.toLocaleDateString(locale, {
+          day: "2-digit",
+          month: "2-digit",
+          year: "numeric"
+        }),
+        locale: locale
+      }));
+    }
+  }));
+};
+
+export { DatePicker };

package/esm/components/field/date-picker/index.js

@@ -0,0 +1 @@
+export { DatePicker } from './date-picker.js';

package/esm/components/field/expiration-input/expiration-input.js

@@ -0,0 +1,42 @@
+import { __rest } from 'tslib';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { formatExpiration } from '../../../utilities/money.js';
+import { Input } from '@shipengine/giger';
+import { createFieldController } from '../create-field-controller.js';
+import { styles } from '../field.styles.js';
+
+const ExpirationInputController = createFieldController();
+const transform = {
+  in: v => v ? formatExpiration(v) : "",
+  out: event => event.target.value === "" ? null : event.target.value
+};
+const ExpirationInput = fieldProps => jsx(ExpirationInputController, Object.assign({}, fieldProps, {
+  children: _a => {
+    var {
+        onChange,
+        value
+      } = _a,
+      expirationInputProps = __rest(_a, ["onChange", "value"]);
+    return jsx("div", Object.assign({
+      css: styles.overrideStyles
+    }, {
+      children: jsx(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)
+      }))
+    }));
+  }
+}));
+
+export { ExpirationInput };

package/esm/components/field/expiration-input/index.js

@@ -0,0 +1 @@
+export { ExpirationInput } from './expiration-input.js';

package/esm/components/field/field.styles.js

@@ -0,0 +1,18 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  overrideStyles: theme => ({
+    "&& input, && span[role='button']": {
+      cursor: "auto",
+      fontWeight: scopeTheme(theme).typography.fontWeight.normal
+    },
+    "&& input:hover": {
+      cursor: "pointer"
+    },
+    "&&.disabled input:hover": {
+      cursor: "not-allowed"
+    }
+  })
+});
+
+export { styles };

package/esm/components/field/fields.js

@@ -0,0 +1,15 @@
+export { CheckboxInput } from './checkbox-input/checkbox-input.js';
+export { CreditCardInput } from './credit-card-input/credit-card-input.js';
+export { DatePicker } from './date-picker/date-picker.js';
+export { ExpirationInput } from './expiration-input/expiration-input.js';
+export { InputGroup } from './input-group/input-group.js';
+export { MoneyInput, transform } from './money-input/money-input.js';
+export { NumberInput } from './number-input/number-input.js';
+export { RateSelect } from './rate-select/rate-select.js';
+export { SelectAutoComplete } from './select-auto-complete/select-auto-complete.js';
+export { Select } from './select/select.js';
+export { SelectWithCategories } from './select/select-with-categories.js';
+export { SubmitButton } from './submit-button/submit-button.js';
+export { Switch } from './switch/switch.js';
+export { TextArea } from './text-area/text-area.js';
+export { TextInput } from './text-input/text-input.js';

package/esm/components/field/index.js

@@ -0,0 +1,2 @@
+import * as fields from './fields.js';
+export { fields as Field };

package/esm/components/field/input-group/index.js

@@ -0,0 +1 @@
+export { InputGroup } from './input-group.js';

package/esm/components/field/input-group/input-group.js

@@ -0,0 +1,123 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import * as React from 'react';
+import { useEffect } from 'react';
+import { useController, useWatch, get } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FormField, FieldMessageType } from '@shipengine/giger';
+import { styles } from './input-group.styles.js';
+import { FieldLabel } from '../../field-label/field-label.js';
+
+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 = __rest(_a, ["children", "control", "defaultValue", "disabled", "divider", "compact", "message", "sizes", "name", "rules", "shouldUnregister", "trigger", "labelPosition", "labelWidth"]);
+  const {
+    fieldState: {
+      error: groupError
+    },
+    formState: {
+      errors: formErrors,
+      isSubmitted
+    }
+  } = useController({
+    control,
+    name
+  });
+  const {
+    t
+  } = useTranslation("common");
+  const propsOfChildren = React.Children.map(children, child => ({
+    label: child.props.label,
+    name: child.props.name
+  }));
+  const fieldValuesOfChildren = useWatch({
+    control: control,
+    name: propsOfChildren.map(c => c.name)
+  });
+  // Trigger group-level validations when child fields validate interactively (mode: onChange)
+  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 = 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 jsx(FieldLabel, Object.assign({}, nativeProps, {
+    position: labelPosition,
+    width: labelWidth,
+    withInput: true
+  }, {
+    children: jsx(FormField, Object.assign({
+      message: mergedErrorMessages.length > 0 ? {
+        content: mergedErrorMessages.join(", "),
+        type: FieldMessageType.ERROR
+      } : message
+    }, {
+      children: jsx("div", Object.assign({
+        css: styles.getGroupParent(compact)
+      }, {
+        children: React.Children.map(children, (child, index) => jsxs("div", Object.assign({
+          css: styles.getGroupChild(sizes === null || sizes === void 0 ? void 0 : sizes[index])
+        }, {
+          children: [jsx("div", Object.assign({
+            css: styles.getGroupChildInput({
+              compact,
+              index
+            })
+          }, {
+            children: /*#__PURE__*/React.cloneElement(child, {
+              disabled: disabled || child.props.disabled,
+              displayErrors: false,
+              errors: groupErrorMessage ? [`${name}_GROUP_ERROR`] : child.props.errors,
+              inputOnly: true
+            })
+          })), divider && jsx("div", Object.assign({
+            "aria-hidden": "true",
+            css: styles.dividerStyles
+          }, {
+            children: renderDivider(divider, index)
+          }))]
+        }), child.key))
+      }))
+    }))
+  }));
+};
+
+export { InputGroup };

package/esm/components/field/input-group/input-group.styles.js

@@ -0,0 +1,37 @@
+import { createStyles, scopeTheme } from '../../../utilities/styles.js';
+
+const styles = createStyles({
+  dividerStyles: theme => ({
+    flexGrow: 0,
+    lineHeight: scopeTheme(theme).getLineHeight(scopeTheme(theme).typography.fontSize.S, scopeTheme(theme).typography.lineHeight.S),
+    paddingBottom: scopeTheme(theme).spacing(1.5),
+    paddingLeft: scopeTheme(theme).spacing(),
+    paddingRight: scopeTheme(theme).spacing(),
+    paddingTop: 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 : scopeTheme(theme).borderRadius.S,
+      borderBottomRightRadius: index ? scopeTheme(theme).borderRadius.S : 0,
+      borderTopLeftRadius: index ? 0 : scopeTheme(theme).borderRadius.S,
+      borderTopRightRadius: index ? scopeTheme(theme).borderRadius.S : 0
+    }
+  }), {
+    flexGrow: 1
+  }),
+  getGroupParent: compact => theme => ({
+    display: "flex",
+    gap: compact ? 0 : scopeTheme(theme).spacing(2),
+    width: "100%"
+  })
+});
+
+export { styles };

package/esm/components/field/money-input/index.js

@@ -0,0 +1 @@
+export { MoneyInput, transform } from './money-input.js';

package/esm/components/field/money-input/money-input-styles.js

@@ -0,0 +1,9 @@
+import { createStyles } from '../../../utilities/styles.js';
+
+const styles = createStyles({
+  leftDecoratorStyles: {
+    lineHeight: 1
+  }
+});
+
+export { styles };