@shipengine/elements 2.18.0 → 2.20.0

package/esm/components/grid-controller/grid-controller.styles.js

@@ -0,0 +1,29 @@
+import { createStyles, scopeTheme } from '../../utilities/styles.js';
+
+const styles = createStyles({
+  checkboxHeader: theme => ({
+    width: scopeTheme(theme).spacing(6)
+  }),
+  filters: theme => ({
+    borderBottom: `1px solid ${scopeTheme(theme).palette.gray[200]}`,
+    padding: `${scopeTheme(theme).spacing()}px ${scopeTheme(theme).spacing(2)}px`
+  }),
+  table: {
+    tableLayout: "initial"
+  },
+  tableFooter: {
+    borderTop: "none",
+    justifyContent: "space-between"
+  },
+  tableHeader: theme => ({
+    background: scopeTheme(theme).palette.secondary.ultraLight
+  }),
+  tableWrapper: {
+    border: "none"
+  },
+  wrapper: theme => Object.assign({
+    height: "auto"
+  }, scopeTheme(theme).getComponentOverride("Table"))
+});
+
+export { styles };

package/esm/components/grid-controller/grid-footer.js

@@ -0,0 +1,46 @@
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { Trans } from 'react-i18next';
+import { Typography, Pagination } from '@shipengine/giger';
+
+/**
+ * @internal
+ *
+ * # GridFooter
+ *
+ * - The `<GridFooter />` component that handle grid footer with pagination.
+ *
+ * @see {@link GridFooterProps | The props for the `<GridFooter />` component}
+ */
+const GridFooter = ({
+  page,
+  pages,
+  pageSize,
+  total,
+  showPagination,
+  onPageChange
+}) => {
+  const firstElementInPage = (page - 1) * pageSize + 1;
+  const lastElementInPage = Math.min(page * pageSize, total);
+  return jsxs(Fragment, {
+    children: [jsx(Typography, Object.assign({
+      component: "span",
+      variant: "body2"
+    }, {
+      children: jsx(Trans, {
+        components: [jsx("b", {})],
+        count: total,
+        i18nKey: "common:grid.row-count",
+        values: {
+          firstIndex: firstElementInPage,
+          lastIndex: lastElementInPage
+        }
+      })
+    })), showPagination && jsx(Pagination, {
+      currentPage: page,
+      onPageChange: onPageChange,
+      totalPages: pages
+    })]
+  });
+};
+
+export { GridFooter };

package/esm/components/grid-controller/index.js

@@ -0,0 +1,4 @@
+export { GridController } from './grid-controller.js';
+export { CellFormattedDate } from './cell-formatted-date.js';
+export { GridFooter } from './grid-footer.js';
+export { SortableHeader } from './sortable-header.js';

package/esm/components/grid-controller/sortable-header.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { Icon, IconSize } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+
+/**
+ * A reusable component for creating sortable table headers
+ * that support both mouse and keyboard interaction
+ */
+const SortableHeader = ({
+  headerText,
+  sortDirection,
+  onToggleSort
+}) => {
+  const handleKeyDown = e => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onToggleSort();
+    }
+  };
+  return jsxs("span", Object.assign({
+    "aria-label": headerText,
+    css: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "flex"
+    },
+    onClick: onToggleSort,
+    onKeyDown: handleKeyDown,
+    role: "button",
+    tabIndex: 0
+  }, {
+    children: [headerText, jsx(Icon, {
+      name: sortDirection === "desc" ? IconNames.SORT_BOTTOM : IconNames.SORT_TOP,
+      size: IconSize.SIZE_SMALL
+    })]
+  }));
+};
+
+export { SortableHeader };

package/esm/components/grid-filters/components/created-date-filter/created-date-filter.js

@@ -0,0 +1,226 @@
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { formatByDateAndLocale, isNowOrInTheFuture } from '../../../../utilities/date.js';
+import { useRef, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useToggle } from 'react-use';
+import { Button, ButtonVariant, Icon, IconSize, Popover, RadioGroup, Radio, Input, Calendar } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { styles } from './created-date-filter.styles.js';
+import { DateFilter } from './types/form.js';
+import { getDateRangeFromEnum } from './utils/dates.js';
+import { useElements } from '../../../../elements-provider/elements-context-provider.js';
+
+/**
+ * @internal
+ *
+ * # CreatedDateFilter
+ *
+ * - The `<CreatedDateFilter />` component handle created date filter used in Shipments Grid.
+ *
+ * @see {@link CreatedDateFilterProps | The props for the `<CreatedDateFilter />` component}
+ */
+const CreatedDateFilter = ({
+  filters,
+  onFiltersUpdated
+}) => {
+  var _a;
+  const {
+    t
+  } = useTranslation(["common"]);
+  const {
+    locale
+  } = useElements();
+  const buttonRef = useRef(null);
+  const [showCreatedDateFilter, toggleCreatedDateFilter] = useToggle(false);
+  const [showCalendar, setShowCalendar] = useState(false);
+  const [calendarStartDate, setCalendarStartDate] = useState(null);
+  const [calendarEndDate, setCalendarEndDate] = useState(null);
+  const [selectedDateFilter, setSelectedDateFilter] = useState();
+  const onDateFilterChange = ({
+    target: {
+      value
+    }
+  }) => {
+    setSelectedDateFilter(value);
+    if (value !== DateFilter.CUSTOM) {
+      setShowCalendar(false);
+      onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+        createdDate: {
+          enabled: true,
+          value: getDateRangeFromEnum(value)
+        }
+      }));
+    } else {
+      setShowCalendar(true);
+    }
+  };
+  const onFilterClear = () => {
+    setSelectedDateFilter(undefined);
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      createdDate: {
+        enabled: true,
+        value: null
+      }
+    }));
+  };
+  const onCalendarChange = dates => {
+    const [start, end] = dates;
+    setCalendarStartDate(start);
+    setCalendarEndDate(end);
+  };
+  const onApplyCustomDates = () => {
+    if (!calendarEndDate || !calendarStartDate) {
+      return;
+    }
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      createdDate: {
+        enabled: true,
+        value: {
+          end: calendarEndDate,
+          start: calendarStartDate
+        }
+      }
+    }));
+  };
+  const onClear = () => {
+    setCalendarStartDate(null);
+    setCalendarEndDate(null);
+  };
+  const onToggleCreatedDateFilter = () => {
+    toggleCreatedDateFilter();
+    setSelectedDateFilter(undefined);
+    setCalendarStartDate(null);
+    setCalendarEndDate(null);
+    setShowCalendar(false);
+  };
+  useEffect(() => {
+    var _a;
+    if (!((_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value)) {
+      setSelectedDateFilter(undefined);
+    }
+  }, [filters.createdDate]);
+  return ((_a = filters.createdDate) === null || _a === void 0 ? void 0 : _a.value) ? jsxs(Button, Object.assign({
+    css: styles.mainButton,
+    onClick: onFilterClear,
+    variant: ButtonVariant.TEXT
+  }, {
+    children: [jsx("span", {
+      children: t("common:grid.createdDateFilter", {
+        createdDateEnd: formatByDateAndLocale(filters.createdDate.value.end, locale),
+        createdDateStart: formatByDateAndLocale(filters.createdDate.value.start, locale),
+        interpolation: {
+          escapeValue: false
+        }
+      })
+    }), jsx(Icon, {
+      name: IconNames.CLOSE,
+      size: IconSize.SIZE_SMALL
+    })]
+  })) : jsxs(Fragment, {
+    children: [jsxs(Button, Object.assign({
+      css: styles.mainButton,
+      onClick: onToggleCreatedDateFilter,
+      ref: buttonRef,
+      variant: ButtonVariant.TEXT
+    }, {
+      children: [jsx("span", {
+        children: t("common:grid.createdDate")
+      }), jsx(Icon, {
+        name: showCreatedDateFilter ? IconNames.CARET_TOP : IconNames.CARET_BOTTOM,
+        size: IconSize.SIZE_SMALL
+      })]
+    })), jsx(Popover, Object.assign({
+      css: styles.popover,
+      isOpen: showCreatedDateFilter,
+      onClickAway: toggleCreatedDateFilter,
+      reference: buttonRef.current
+    }, {
+      children: jsxs("section", Object.assign({
+        css: styles.popoverWrapper
+      }, {
+        children: [jsxs(RadioGroup, Object.assign({
+          css: styles.radioGroup,
+          name: "dateFilter",
+          onChange: onDateFilterChange,
+          value: selectedDateFilter
+        }, {
+          children: [jsx(Radio, Object.assign({
+            value: DateFilter.TODAY
+          }, {
+            children: t("common:grid.dateFilterToday")
+          })), jsx(Radio, Object.assign({
+            value: DateFilter.LAST7DAYS
+          }, {
+            children: t("common:grid.dateFilterLast7Days")
+          })), jsx(Radio, Object.assign({
+            value: DateFilter.LAST30DAYS
+          }, {
+            children: t("common:grid.dateFilterLast30Days")
+          })), jsx(Radio, Object.assign({
+            value: DateFilter.LAST365DAYS
+          }, {
+            children: t("common:grid.dateFilterLast12Months")
+          })), jsx(Radio, Object.assign({
+            value: DateFilter.CUSTOM
+          }, {
+            children: t("common:grid.dateFilterCustom")
+          }))]
+        })), showCalendar && jsxs("section", Object.assign({
+          css: styles.popoverCalendarWrapper
+        }, {
+          children: [jsxs("div", Object.assign({
+            css: styles.inputsWrapper
+          }, {
+            children: [jsx(Input, {
+              css: styles.input,
+              readOnly: true,
+              rightContent: jsx(Icon, {
+                name: IconNames.CALENDAR,
+                size: IconSize.SIZE_SMALL
+              }),
+              value: calendarStartDate ? formatByDateAndLocale(calendarStartDate, locale) : undefined
+            }), jsx(Icon, {
+              css: styles.inputsArrow,
+              name: IconNames.ARROW_RIGHT,
+              size: IconSize.SIZE_SMALL
+            }), jsx(Input, {
+              css: styles.input,
+              readOnly: true,
+              rightContent: jsx(Icon, {
+                name: IconNames.CALENDAR,
+                size: IconSize.SIZE_SMALL
+              }),
+              value: calendarEndDate ? formatByDateAndLocale(calendarEndDate, locale) : undefined
+            })]
+          })), jsx(Calendar, {
+            containerStyles: styles.calendarContainer,
+            endDate: calendarEndDate,
+            filterDate: date => !isNowOrInTheFuture(date),
+            onChange: onCalendarChange,
+            selected: calendarStartDate,
+            selectsRange: true,
+            startDate: calendarStartDate,
+            withBorder: false
+          }), jsxs("div", Object.assign({
+            css: styles.calendarFooterButtons
+          }, {
+            children: [jsx(Button, Object.assign({
+              css: styles.clearButton,
+              onClick: onClear,
+              variant: ButtonVariant.OUTLINED
+            }, {
+              children: t("common:grid.clear")
+            })), jsx(Button, Object.assign({
+              disabled: !calendarStartDate || !calendarEndDate,
+              onClick: onApplyCustomDates
+            }, {
+              children: t("common:grid.apply")
+            }))]
+          }))]
+        }))]
+      }))
+    }))]
+  });
+};
+
+export { CreatedDateFilter };

package/esm/components/grid-filters/components/created-date-filter/created-date-filter.styles.js

@@ -0,0 +1,45 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  calendarContainer: theme => ({
+    border: `1px solid ${scopeTheme(theme).palette.gray[200]}`,
+    borderRadius: scopeTheme(theme).borderRadius.M
+  }),
+  calendarFooterButtons: theme => ({
+    alignSelf: "flex-end",
+    marginTop: scopeTheme(theme).spacing()
+  }),
+  clearButton: theme => ({
+    marginRight: scopeTheme(theme).spacing()
+  }),
+  input: () => ({
+    width: `calc((278px - 6px) / 2)`
+  }),
+  inputsArrow: theme => ({
+    marginLeft: scopeTheme(theme).spacing(),
+    marginRight: scopeTheme(theme).spacing()
+  }),
+  inputsWrapper: theme => ({
+    alignItems: "center",
+    display: "flex",
+    marginBottom: scopeTheme(theme).spacing()
+  }),
+  mainButton: theme => ({
+    marginRight: scopeTheme(theme).spacing()
+  }),
+  popover: () => ({
+    maxWidth: "initial"
+  }),
+  popoverCalendarWrapper: () => ({
+    display: "flex",
+    flexDirection: "column"
+  }),
+  popoverWrapper: () => ({
+    display: "flex"
+  }),
+  radioGroup: theme => ({
+    marginRight: scopeTheme(theme).spacing(4)
+  })
+});
+
+export { styles };

package/esm/components/grid-filters/components/created-date-filter/index.js

@@ -0,0 +1 @@
+export { CreatedDateFilter } from './created-date-filter.js';

package/esm/components/grid-filters/components/created-date-filter/types/form.js

@@ -0,0 +1,10 @@
+var DateFilter;
+(function (DateFilter) {
+  DateFilter["TODAY"] = "today";
+  DateFilter["LAST7DAYS"] = "last_7";
+  DateFilter["LAST30DAYS"] = "last_30";
+  DateFilter["LAST365DAYS"] = "last_365";
+  DateFilter["CUSTOM"] = "custom";
+})(DateFilter || (DateFilter = {}));
+
+export { DateFilter };

package/esm/components/grid-filters/components/created-date-filter/utils/dates.js

@@ -0,0 +1,28 @@
+import { subDays } from 'date-fns/subDays';
+import { DateFilter } from '../types/form.js';
+
+const DaysToSubtract = {
+  [DateFilter.LAST7DAYS]: 7,
+  [DateFilter.LAST30DAYS]: 30,
+  [DateFilter.LAST365DAYS]: 365
+};
+/**
+ * Given a value from `enumValue` we will return an object with the end and start Date
+ * By default will return `DateFilter.TODAY`, the `DateFilter.CUSTOM` its being handled at the
+ * component.
+ */
+const getDateRangeFromEnum = enumValue => {
+  const today = new Date();
+  if ([DateFilter.LAST30DAYS, DateFilter.LAST7DAYS, DateFilter.LAST365DAYS].includes(enumValue)) {
+    return {
+      end: today,
+      start: subDays(today, DaysToSubtract[enumValue])
+    };
+  }
+  return {
+    end: today,
+    start: today
+  };
+};
+
+export { getDateRangeFromEnum };

package/esm/components/grid-filters/components/created-date-filter/utils/index.js

@@ -0,0 +1 @@
+export { getDateRangeFromEnum } from './dates.js';

package/esm/components/grid-filters/components/index.js

@@ -0,0 +1,4 @@
+export { ShipmentIdFilter } from './shipment-id-filter/shipment-id-filter.js';
+export { CreatedDateFilter } from './created-date-filter/created-date-filter.js';
+export { LabelIdFilter } from './label-id-filter/label-id-filter.js';
+export { TrackingStatusFilter } from './tracking-status-filter/tracking-status-filter.js';

package/esm/components/grid-filters/components/label-id-filter/index.js

@@ -0,0 +1 @@
+export { LabelIdFilter } from './label-id-filter.js';

package/esm/components/grid-filters/components/label-id-filter/label-id-filter-shema.js

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+const labelIdFormSchema = z.object({
+  labelId: z.string({
+    errorMap: () => ({
+      message: "schemaErrors.requiredLabelId"
+    })
+  })
+});
+
+export { labelIdFormSchema };

package/esm/components/grid-filters/components/label-id-filter/label-id-filter.js

@@ -0,0 +1,141 @@
+import { __awaiter } from 'tslib';
+import { jsx, Fragment, jsxs } from '@emotion/react/jsx-runtime';
+import { formLogger } from '../../../../utilities/form-logger.js';
+import { validationResolver } from '../../../../utilities/validation.js';
+import { useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation, Trans } from 'react-i18next';
+import { useToggle } from 'react-use';
+import { Button, ButtonVariant, Icon, IconSize, Popover } from '@shipengine/giger';
+import { IconNames } from '@shipengine/giger-theme';
+import { labelIdFormSchema } from './label-id-filter-shema.js';
+import { styles } from './label-id-filter.styles.js';
+import { TextInput } from '../../../field/text-input/text-input.js';
+import { SubmitButton } from '../../../field/submit-button/submit-button.js';
+
+/**
+ * @internal
+ *
+ * # LabelIdFilter
+ *
+ * - The `<LabelIdFilter />` component handle label id filter used in Labels Grid.
+ *
+ * @see {@link LabelIdFilterProps | The props for the `<LabelIdFilter />` component}
+ */
+const LabelIdFilter = ({
+  filters,
+  onFiltersUpdated
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+  const {
+    t
+  } = useTranslation(["common"]);
+  const [showLabelIdFilter, toggleLabelIdFilter] = useToggle(false);
+  const buttonRef = useRef(null);
+  const form = useForm({
+    resolver: validationResolver(labelIdFormSchema)
+  });
+  const handleSubmit = form.handleSubmit(values => __awaiter(void 0, void 0, void 0, function* () {
+    toggleLabelIdFilter();
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      labelId: Object.assign(Object.assign({}, filters.labelId), {
+        enabled: true,
+        value: values.labelId
+      })
+    }));
+  }));
+  const onClearLabelId = () => {
+    onFiltersUpdated(Object.assign(Object.assign({}, filters), {
+      labelId: Object.assign(Object.assign({}, filters.labelId), {
+        enabled: true,
+        value: ""
+      })
+    }));
+    showLabelIdFilter && toggleLabelIdFilter();
+  };
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    jsx(Fragment, {
+      children: jsxs(Fragment, {
+        children: [jsx(Button, Object.assign({
+          onClick: toggleLabelIdFilter,
+          ref: buttonRef,
+          variant: ButtonVariant.TEXT
+        }, {
+          children: filters.labelId && filters.labelId.value ? jsxs(Fragment, {
+            children: [jsx("span", {
+              children: jsx(Trans, {
+                i18nKey: t("common:grid.labelIdFilter", {
+                  name: (_b = (_a = filters === null || filters === void 0 ? void 0 : filters.labelId) === null || _a === void 0 ? void 0 : _a.nickname) !== null && _b !== void 0 ? _b : t("common:grid.labelId")
+                }),
+                values: {
+                  labelId: filters.labelId.value
+                }
+              })
+            }), jsx(Icon, {
+              name: IconNames.CLOSE,
+              onClick: e => {
+                e.stopPropagation();
+                onClearLabelId();
+              },
+              onKeyDown: e => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.stopPropagation();
+                  onClearLabelId();
+                }
+              },
+              role: "button",
+              size: IconSize.SIZE_SMALL,
+              tabIndex: 0
+            })]
+          }) : jsxs(Fragment, {
+            children: [jsx("span", {
+              children: (_d = (_c = filters === null || filters === void 0 ? void 0 : filters.labelId) === null || _c === void 0 ? void 0 : _c.nickname) !== null && _d !== void 0 ? _d : t("common:grid.labelId")
+            }), jsx(Icon, {
+              name: showLabelIdFilter ? IconNames.CARET_TOP : IconNames.CARET_BOTTOM,
+              size: IconSize.SIZE_SMALL
+            })]
+          })
+        })), jsx(Popover, Object.assign({
+          isOpen: showLabelIdFilter,
+          onClickAway: toggleLabelIdFilter,
+          reference: buttonRef.current
+        }, {
+          children: jsxs("form", Object.assign({
+            onSubmit: formLogger.capture(handleSubmit)
+          }, {
+            children: [jsx(TextInput, {
+              "aria-required": "true",
+              control: form.control,
+              defaultValue: (_f = (_e = filters.labelId) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : "",
+              hint: t("common:grid.labelIdHint"),
+              label: (_h = (_g = filters === null || filters === void 0 ? void 0 : filters.labelId) === null || _g === void 0 ? void 0 : _g.nickname) !== null && _h !== void 0 ? _h : t("common:grid.labelId"),
+              labelPosition: "vertical",
+              labelWeight: "bold",
+              labelWidth: "100%",
+              name: "labelId",
+              placeholder: t("common:grid.search")
+            }), jsxs("div", Object.assign({
+              css: styles.buttons
+            }, {
+              children: [jsx(Button, Object.assign({
+                disabled: !form.watch("labelId") && !((_j = filters.labelId) === null || _j === void 0 ? void 0 : _j.value),
+                onClick: onClearLabelId,
+                variant: ButtonVariant.OUTLINED
+              }, {
+                children: t("common:grid.clear")
+              })), jsx(SubmitButton, Object.assign({
+                control: form.control,
+                variant: ButtonVariant.FILLED
+              }, {
+                children: t("common:grid.apply")
+              }))]
+            }))]
+          }))
+        }))]
+      })
+    })
+  );
+};
+
+export { LabelIdFilter };

package/esm/components/grid-filters/components/label-id-filter/label-id-filter.styles.js

@@ -0,0 +1,11 @@
+import { createStyles, scopeTheme } from '../../../../utilities/styles.js';
+
+const styles = createStyles({
+  buttons: theme => ({
+    display: "flex",
+    gap: scopeTheme(theme).spacing(),
+    justifyContent: "flex-end"
+  })
+});
+
+export { styles };

package/esm/components/grid-filters/components/shipment-id-filter/index.js

@@ -0,0 +1 @@
+export { ShipmentIdFilter } from './shipment-id-filter.js';

package/esm/components/grid-filters/components/shipment-id-filter/shipment-id-filter-shema.js

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+const shipmentIdFormSchema = z.object({
+  shipmentId: z.string({
+    errorMap: () => ({
+      message: "schemaErrors.requiredShipmentId"
+    })
+  })
+});
+
+export { shipmentIdFormSchema };