@shipengine/elements 2.20.0 → 2.22.0

package/cjs/components/items-breakdown/index.cjs

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

package/cjs/components/items-breakdown/items-breakdown.cjs

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var money = require('../../utilities/money.cjs');
+var React = require('react');
+var giger = require('@shipengine/giger');
+var itemsBreakdown_styles = require('./items-breakdown.styles.cjs');
+
+const ItemsBreakdownTableHeader = ({
+  hasValue,
+  hasTotal
+}) => jsxRuntime.jsx(giger.TableHeader, {
+  children: jsxRuntime.jsxs(giger.TableBaseRow, {
+    children: [jsxRuntime.jsx(giger.TableHeaderCell, {
+      "aria-hidden": "true"
+    }), jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+      css: itemsBreakdown_styles.styles.numericCell
+    }, {
+      children: "Qty"
+    })), hasValue && jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+      css: itemsBreakdown_styles.styles.numericCell
+    }, {
+      children: "$/ea"
+    })), hasTotal && jsxRuntime.jsx(giger.TableHeaderCell, Object.assign({
+      css: itemsBreakdown_styles.styles.numericCell
+    }, {
+      children: "$ Total"
+    }))]
+  })
+});
+/**
+ * @internal
+ *
+ * # Items Breakdown Component
+ */
+const ItemsBreakdown = ({
+  items
+}) => {
+  const hasValue = items.some(item => item.value !== undefined);
+  const hasTotal = items.some(item => item.totalValue !== undefined);
+  return jsxRuntime.jsx("div", Object.assign({
+    css: itemsBreakdown_styles.styles.tableWrapper
+  }, {
+    children: jsxRuntime.jsx(giger.Table, Object.assign({
+      header: jsxRuntime.jsx(ItemsBreakdownTableHeader, {
+        hasTotal: hasTotal,
+        hasValue: hasValue
+      })
+    }, {
+      children: jsxRuntime.jsx(giger.TableBody, {
+        children: items.map(({
+          name,
+          detail,
+          quantity,
+          value,
+          totalValue
+        }, index) => jsxRuntime.jsx(React.Fragment, {
+          children: jsxRuntime.jsxs(giger.TableBaseRow, {
+            children: [jsxRuntime.jsxs(giger.TableBodyCell, Object.assign({
+              css: itemsBreakdown_styles.styles.itemDescription
+            }, {
+              children: [jsxRuntime.jsx(giger.Typography, Object.assign({
+                css: itemsBreakdown_styles.styles.itemName
+              }, {
+                children: name
+              })), jsxRuntime.jsx(giger.Typography, {
+                children: detail
+              })]
+            })), jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              css: [itemsBreakdown_styles.styles.numericCell, itemsBreakdown_styles.styles.itemDetail]
+            }, {
+              children: quantity
+            })), hasValue && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              css: [itemsBreakdown_styles.styles.numericCell, itemsBreakdown_styles.styles.itemDetail]
+            }, {
+              children: value && money.formatMoney(value)
+            })), hasTotal && jsxRuntime.jsx(giger.TableBodyCell, Object.assign({
+              css: [itemsBreakdown_styles.styles.numericCell, itemsBreakdown_styles.styles.itemDetail]
+            }, {
+              children: totalValue && money.formatMoney(totalValue)
+            }))]
+          })
+        }, index))
+      })
+    }))
+  }));
+};
+
+exports.ItemsBreakdown = ItemsBreakdown;

package/cjs/components/items-breakdown/items-breakdown.styles.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  itemDescription: theme => ({
+    display: "flex",
+    flexDirection: "column",
+    padding: `${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(0)}px ${styles$1.scopeTheme(theme).spacing(0)}px`
+  }),
+  itemDetail: theme => ({
+    padding: `${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(2)}px ${styles$1.scopeTheme(theme).spacing(0.5)}px ${styles$1.scopeTheme(theme).spacing(0)}px`,
+    verticalAlign: "top"
+  }),
+  itemName: theme => ({
+    display: "-webkit-box",
+    lineHeight: `${styles$1.scopeTheme(theme).spacing(2.5)}px`,
+    maxHeight: `${styles$1.scopeTheme(theme).spacing(7.5)}px`,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    // Set item name to max 3 lines and truncate with ellipsis
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: "3",
+    whiteSpace: "normal"
+  }),
+  numericCell: () => ({
+    textAlign: "right",
+    width: "80px"
+  }),
+  tableWrapper: theme => ({
+    "&& > div": {
+      boxShadow: "none"
+    },
+    "&& > div table thead th": {
+      fontStyle: "italic",
+      fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal
+    }
+  })
+});
+
+exports.styles = styles;

package/cjs/components/link-action/index.cjs

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

package/cjs/components/link-action/link-action.cjs

@@ -0,0 +1,96 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var styles = require('../../utilities/styles.cjs');
+var React = require('react');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const icons = {
+  add: gigerTheme.IconNames.ADD,
+  checkFilled: gigerTheme.IconNames.CHECK_FILLED,
+  chevronBottom: gigerTheme.IconNames.CHEVRON_BOTTOM,
+  chevronTop: gigerTheme.IconNames.CHEVRON_TOP,
+  copy: gigerTheme.IconNames.COPY,
+  dots: gigerTheme.IconNames.DOTS,
+  download: gigerTheme.IconNames.DOWNLOAD,
+  edit: gigerTheme.IconNames.EDIT,
+  retry: gigerTheme.IconNames.CIRCULAR_ARROW
+};
+/**
+ * @internal
+ *
+ * # Link Action Component
+ */
+const LinkAction = /*#__PURE__*/React__default["default"].forwardRef((_a, ref) => {
+  var {
+      css,
+      icon,
+      isDisabled,
+      isLoading,
+      title,
+      iconPlacement = "left",
+      isBold = true
+    } = _a,
+    props = tslib.__rest(_a, ["css", "icon", "isDisabled", "isLoading", "title", "iconPlacement", "isBold"]);
+  return jsxRuntime.jsx(giger.Link, Object.assign({}, props, {
+    bold: isBold,
+    css: theme => [Object.assign(Object.assign({
+      "&&&": {
+        textDecoration: "none"
+      },
+      alignItems: "center"
+    }, icon === "checkFilled" ? {
+      color: styles.scopeTheme(theme).palette.success.main
+    } : null), {
+      display: "flex",
+      gap: styles.scopeTheme(theme).spacing(1)
+    }),
+    // TODO [LMNT-663] - Giger's Link component does not render isDisabled state unless isButton is true
+    (isDisabled || isLoading) && {
+      color: styles.scopeTheme(theme).palette.gray.main,
+      cursor: "none",
+      pointerEvents: "none"
+    }, css],
+    isDisabled: isDisabled,
+    onKeyDown: e => {
+      var _a;
+      if (e.key === "Enter") {
+        e.preventDefault();
+        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      }
+    },
+    ref: ref,
+    role: "button",
+    size: giger.ButtonSize.MEDIUM,
+    tabIndex: 0
+  }, {
+    children: isLoading ? jsxRuntime.jsx(giger.Spinner, {}) : jsxRuntime.jsxs("div", Object.assign({
+      css: theme => ({
+        alignItems: "center",
+        display: "flex",
+        flexDirection: iconPlacement === "left" ? "row" : "row-reverse",
+        gap: styles.scopeTheme(theme).spacing(0.5)
+      })
+    }, {
+      children: [icon && jsxRuntime.jsx(giger.Icon, {
+        name: icons[icon],
+        size: giger.IconSize.SIZE_SMALL,
+        title: title
+      }), title && jsxRuntime.jsx(giger.Typography, Object.assign({
+        bold: isBold
+      }, {
+        children: title
+      }))]
+    }))
+  }));
+});
+
+exports.LinkAction = LinkAction;

package/cjs/components/loader/index.cjs

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

package/cjs/components/loader/loader.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var loader_styles = require('./loader.styles.cjs');
+
+/**
+ * @internal
+ *
+ * # Loader Component
+ */
+const Loader = props => {
+  return jsxRuntime.jsx("div", Object.assign({
+    css: loader_styles.styles.container
+  }, {
+    children: jsxRuntime.jsx(giger.Spinner, Object.assign({}, props, {
+      size: props.size || giger.SpinnerSize.SIZE_LARGE
+    }))
+  }));
+};
+
+exports.Loader = Loader;

package/cjs/components/loader/loader.styles.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  container: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    justifyContent: "center",
+    textAlign: "center",
+    width: "100%"
+  }
+});
+
+exports.styles = styles;

package/cjs/components/modal/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var modalContainer = require('./modal-container.cjs');
+var modal = require('./modal.cjs');
+
+
+
+exports.ModalContainer = modalContainer.ModalContainer;
+exports.ModalContext = modalContainer.ModalContext;
+exports.useModal = modalContainer.useModal;
+exports.Modal = modal.Modal;

package/cjs/components/modal/modal-container.cjs

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+
+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 ModalContainer = ({
+  children
+}) => {
+  const portalRef = React__namespace.useRef(null);
+  const [parent, setParent] = React__namespace.useState(undefined);
+  React__namespace.useEffect(() => {
+    var _a;
+    setParent((_a = portalRef.current) !== null && _a !== void 0 ? _a : undefined);
+  }, []);
+  const contextValue = {
+    fullScreen: true,
+    isContained: true,
+    parentSelector: parent ? () => parent : undefined
+  };
+  return jsxRuntime.jsx(ModalContext.Provider, Object.assign({
+    value: contextValue
+  }, {
+    children: jsxRuntime.jsx("div", Object.assign({
+      ref: portalRef,
+      style: {
+        position: "relative"
+      }
+    }, {
+      children: children
+    }))
+  }));
+};
+const ModalContext = /*#__PURE__*/React__namespace.createContext(undefined);
+const useModal = () => {
+  const context = React__namespace.useContext(ModalContext);
+  if (context === undefined) {
+    // We are not inside a ModalContainer; let modals use the default parent.
+    return {
+      isContained: false
+    };
+  }
+  return context;
+};
+
+exports.ModalContainer = ModalContainer;
+exports.ModalContext = ModalContext;
+exports.useModal = useModal;

package/cjs/components/modal/modal.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var modalContainer = require('./modal-container.cjs');
+var modal_styles = require('./modal.styles.cjs');
+
+const Modal = ({
+  children,
+  closeAriaLabel,
+  isOpen,
+  onClose,
+  title,
+  isFullScreen: _isFullScreen = false
+}) => {
+  const _a = modalContainer.useModal(),
+    {
+      isContained
+    } = _a,
+    modalProps = tslib.__rest(_a, ["isContained"]);
+  const headerProps = !isContained ? {
+    closeAriaLabel,
+    onClose,
+    showClose: true,
+    title
+  } : {};
+  return jsxRuntime.jsxs(giger.Dialog, Object.assign({
+    css: modal_styles.styles.dialog,
+    fullScreen: _isFullScreen,
+    isOpen: isOpen !== null && isOpen !== void 0 ? isOpen : false
+  }, modalProps, {
+    children: [jsxRuntime.jsx(giger.DialogHeader, Object.assign({}, headerProps, {
+      children: !!isContained && jsxRuntime.jsxs("header", Object.assign({
+        css: modal_styles.styles.header
+      }, {
+        children: [jsxRuntime.jsx(giger.ButtonIcon, Object.assign({
+          ariaDescribedby: closeAriaLabel !== null && closeAriaLabel !== void 0 ? closeAriaLabel : "Close dialog",
+          color: giger.ButtonColor.SECONDARY,
+          icon: gigerTheme.IconNames.CHEVRON_LEFT,
+          onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose(),
+          size: giger.ButtonSize.LARGE,
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: closeAriaLabel !== null && closeAriaLabel !== void 0 ? closeAriaLabel : "Close dialog"
+        })), jsxRuntime.jsx(giger.Typography, Object.assign({
+          component: "h3",
+          css: modal_styles.styles.headerTitle,
+          variant: "heading3"
+        }, {
+          children: title
+        }))]
+      }))
+    })), jsxRuntime.jsx(giger.DialogContent, {
+      children: children
+    })]
+  }));
+};
+
+exports.Modal = Modal;

package/cjs/components/modal/modal.styles.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  dialog: () => ({
+    maxHeight: "100vh",
+    overlay: {
+      position: "absolute"
+    }
+  }),
+  header: () => ({
+    alignContent: "center",
+    alignItems: "left",
+    display: "flex"
+  }),
+  headerTitle: theme => ({
+    alignItems: "center",
+    color: styles$1.scopeTheme(theme).palette.gray.dark,
+    display: "flex",
+    fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.normal,
+    margin: 0,
+    paddingLeft: styles$1.scopeTheme(theme).spacing(3)
+  })
+});
+
+exports.styles = styles;

package/cjs/components/pager/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var pager = require('./pager.cjs');
+var usePager = require('./usePager.cjs');
+
+
+
+exports.Pager = pager.Pager;
+exports.usePager = usePager.usePager;

package/cjs/components/pager/pager.cjs

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var React = require('react');
+var reactI18next = require('react-i18next');
+var giger = require('@shipengine/giger');
+var gigerTheme = require('@shipengine/giger-theme');
+var pager_styles = require('./pager.styles.cjs');
+
+const DEFAULT_ROW_COUNT_SELECTION = [5, 10, 25, 50];
+const Pager = ({
+  currentPageSize,
+  pagingData,
+  rowCountSelection: _rowCountSelection = DEFAULT_ROW_COUNT_SELECTION,
+  onPageSelect,
+  onPageSizeSelect
+}) => {
+  const [isRowCountDropDownOpen, setIsRowCountDropDownOpen] = React.useState(false);
+  const buttonIconRef = React.useRef(null);
+  const {
+    t
+  } = reactI18next.useTranslation();
+  const toggleRowCountDropdown = React.useCallback(() => setIsRowCountDropDownOpen(prev => !prev), []);
+  const handleClickAway = event => {
+    var _a;
+    if ((_a = buttonIconRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+      return;
+    }
+    toggleRowCountDropdown();
+  };
+  return jsxRuntime.jsxs("div", Object.assign({
+    css: pager_styles.styles.footer
+  }, {
+    children: [jsxRuntime.jsxs("div", Object.assign({
+      css: pager_styles.styles.leftFooter
+    }, {
+      children: [jsxRuntime.jsx("div", Object.assign({
+        css: pager_styles.styles.rowCount
+      }, {
+        children: jsxRuntime.jsx(reactI18next.Trans, {
+          components: [jsxRuntime.jsx("b", {
+            style: {
+              fontWeight: "bold"
+            }
+          }, "1")],
+          count: pagingData.total,
+          i18nKey: "common:grid.row-count",
+          values: {
+            firstIndex: pagingData.total !== 0 ? 1 + (pagingData.page - 1) * currentPageSize : 0,
+            lastIndex: Math.min(pagingData.total, pagingData.page * currentPageSize)
+          }
+        })
+      })), jsxRuntime.jsxs("div", Object.assign({
+        css: pager_styles.styles.rowsActions
+      }, {
+        children: [t("common:grid.rows"), jsxRuntime.jsx(giger.Button, Object.assign({
+          id: "selected-row",
+          onClick: () => toggleRowCountDropdown(),
+          ref: buttonIconRef,
+          variant: giger.ButtonVariant.TEXT
+        }, {
+          children: currentPageSize
+        })), isRowCountDropDownOpen ? jsxRuntime.jsx(giger.Icon, {
+          name: gigerTheme.IconNames.CHEVRON_TOP,
+          onClick: () => toggleRowCountDropdown(),
+          size: giger.IconSize.SIZE_MEDIUM
+        }) : jsxRuntime.jsx(giger.Icon, {
+          name: gigerTheme.IconNames.CHEVRON_BOTTOM,
+          onClick: () => toggleRowCountDropdown(),
+          size: giger.IconSize.SIZE_MEDIUM
+        }), jsxRuntime.jsx(giger.DropdownOptionList, Object.assign({
+          css: pager_styles.styles.rowCountDropDown,
+          dropdownWidth: "max-content",
+          isOpen: isRowCountDropDownOpen,
+          onChange: () => toggleRowCountDropdown(),
+          onClickAway: handleClickAway,
+          placement: "bottom",
+          reference: buttonIconRef.current
+        }, {
+          children: _rowCountSelection.map(selection => jsxRuntime.jsx(giger.Option, Object.assign({
+            onClick: () => onPageSizeSelect(selection),
+            value: String(selection)
+          }, {
+            children: selection
+          }), selection))
+        }))]
+      }))]
+    })), jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsx(giger.Pagination, {
+        boundaryPagesToShow: 5,
+        currentPage: pagingData.page,
+        onPageChange: onPageSelect,
+        totalPages: pagingData.pages
+      })
+    })]
+  }));
+};
+
+exports.Pager = Pager;

package/cjs/components/pager/pager.styles.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles$1 = require('../../utilities/styles.cjs');
+
+const styles = styles$1.createStyles({
+  footer: {
+    "> *": {
+      borderTop: "0 !important"
+    },
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  leftFooter: theme => ({
+    display: "flex",
+    margin: styles$1.scopeTheme(theme).spacing(2),
+    span: {
+      fontWeight: styles$1.scopeTheme(theme).typography.fontWeight.bold
+    }
+  }),
+  rowCount: theme => ({
+    alignItems: "center",
+    display: "flex",
+    marginRight: styles$1.scopeTheme(theme).spacing(4),
+    whiteSpace: "pre"
+  }),
+  rowCountDropDown: {
+    "> * > *": {
+      justifyContent: "center !important"
+    }
+  },
+  rowsActions: theme => ({
+    "#selected-row": {
+      ":hover": {
+        backgroundColor: "transparent"
+      },
+      borderRadius: styles$1.scopeTheme(theme).borderRadius.XS,
+      color: styles$1.scopeTheme(theme).palette.black,
+      padding: styles$1.scopeTheme(theme).spacing(1),
+      paddingRight: styles$1.scopeTheme(theme).spacing(0.5)
+    },
+    alignItems: "baseline",
+    display: "flex",
+    span: {
+      alignSelf: "center"
+    }
+  })
+});
+
+exports.styles = styles;

package/cjs/components/pager/usePager.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const usePager = (initialPageSize = 10) => {
+  const [page, setPage] = React.useState(1);
+  const [pageSize, setPageSize] = React.useState(initialPageSize);
+  const handlePageSelect = page => {
+    setPage(page);
+  };
+  const handlePageSizeSelect = pageSize => {
+    setPageSize(pageSize);
+  };
+  const resetCurrentPage = () => {
+    setPage(1);
+  };
+  return {
+    page,
+    pagerProps: {
+      currentPage: page,
+      currentPageSize: pageSize,
+      onPageSelect: handlePageSelect,
+      onPageSizeSelect: handlePageSizeSelect,
+      resetCurrentPage
+    },
+    pageSize
+  };
+};
+
+exports.usePager = usePager;