@dreamtree-org/twreact-ui 2.0.2 → 2.0.4

package/dist/index.esm.js

@@ -5976,9 +5976,29 @@ function Portal(_ref) {
 // Internal (not exported from the package). Shared focus management for the
 // overlay primitives (Drawer, Dialog, Popover, Tour, Sidebar, AppShell).
 var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
+// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
+// "open" while CSS hides it on wide viewports; there is nothing to trap then.
+// `stopAt` (exclusive) bounds the walk, so getFocusable checks only the
+// elements between a candidate and its root.
+var isDisplayNone = function isDisplayNone(el) {
+  var stopAt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  for (var node = el; node && node.nodeType === 1 && node !== stopAt; node = node.parentElement) {
+    if (window.getComputedStyle(node).display === "none") return true;
+  }
+  return false;
+};
+// `.focus()` silently fails on an element that is not rendered (`display:none`
+// on it or an ancestor) or is `visibility:hidden` (inherited, so the element's
+// own computed value covers its ancestors). getClientRects() is not used:
+// jsdom reports empty rects for every element.
+var isRendered = function isRendered(el, root) {
+  return window.getComputedStyle(el).visibility !== "hidden" && !isDisplayNone(el, root);
+};
+// Tabbable, rendered descendants of `root`, in DOM order. Used for the initial
+// focus and for the Tab trap's first/last items.
 var getFocusable = function getFocusable(root) {
   return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
-    return el.getAttribute("aria-hidden") !== "true";
+    return el.getAttribute("aria-hidden") !== "true" && isRendered(el, root);
   }) : [];
 };
 // Only the most recently opened overlay reacts to Escape / Tab, so a Popover
@@ -5987,14 +6007,6 @@ var layerStack = [];
 var isTopLayer = function isTopLayer(token) {
   return layerStack[layerStack.length - 1] === token;
 };
-// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
-// "open" while CSS hides it on wide viewports; there is nothing to trap then.
-var isDisplayNone = function isDisplayNone(el) {
-  for (var node = el; node && node.nodeType === 1; node = node.parentElement) {
-    if (window.getComputedStyle(node).display === "none") return true;
-  }
-  return false;
-};
 function cycleFocus(e, panel) {
   if (isDisplayNone(panel)) return;
   var focusables = getFocusable(panel);
@@ -6899,7 +6911,7 @@ var SheetCloseButton = function SheetCloseButton(_ref5) {
 
 var _excluded$Y = ["open", "isOpen", "placement", "title", "description", "showCloseButton", "haptics", "onSnapChange"],
   _excluded2$9 = ["className"],
-  _excluded3$4 = ["className"],
+  _excluded3$5 = ["className"],
   _excluded4$3 = ["className"];
 function ownKeys$16(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$16(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$16(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$16(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -6987,7 +6999,7 @@ var SheetHeader = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
 });
 var SheetBody = /*#__PURE__*/React__default.forwardRef(function (_ref4, _ref5) {
   var className = _ref4.className,
-    props = _objectWithoutProperties$1(_ref4, _excluded3$4);
+    props = _objectWithoutProperties$1(_ref4, _excluded3$5);
   var ctx = useContext(SheetContext);
   var dragProps = ctx ? mergeHandlers(ctx.bodyDragProps, props) : {};
   return jsx("div", _objectSpread$16(_objectSpread$16(_objectSpread$16({
@@ -7497,7 +7509,8 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
       return document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  var showClearButton = allowClear && !disabled && selectedOptions.length > 0;
+  var isEmpty = selectedOptions.length === 0;
+  var showClearButton = allowClear && !disabled && !isEmpty;
   var displayValue = function displayValue() {
     var _selectedOptions$;
     if (multiSelect) {
@@ -7755,9 +7768,12 @@ var Select = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardedRef
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", SIZE_CLASSES$3[size] || SIZE_CLASSES$3.md, {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selectedOptions.length,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": isEmpty,
           "pr-14": showClearButton
         }, className),
+        "data-empty": isEmpty ? "" : undefined,
         onClick: function onClick() {
           if (!disabled) {
             setIsOpen(function (prev) {
@@ -10646,7 +10662,7 @@ function FieldInput(_ref) {
   });
 }
 
-var _excluded$U = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "replaceDefaultActions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "showToolbar", "showColumnPicker", "wrapCells", "mobileMaxFields", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent", "interactive", "onSave", "onEdit", "onRowAdd", "onRowDelete", "editKeyBinding", "newRowPosition", "addRowRef", "onInitAddRow", "renderAddRowButton", "renderExternalAddRow", "actionMenuPresentation", "defaultMobileView", "mobileFiltersPresentation", "swipeActions", "stickyHeader"],
+var _excluded$U = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "paginationPosition", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "replaceDefaultActions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "showToolbar", "showColumnPicker", "wrapCells", "mobileMaxFields", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent", "interactive", "onSave", "onEdit", "onRowAdd", "onRowDelete", "editKeyBinding", "newRowPosition", "addRowRef", "onInitAddRow", "renderAddRowButton", "renderExternalAddRow", "actionMenuPresentation", "defaultMobileView", "mobileFiltersPresentation", "swipeActions", "stickyHeader"],
   _excluded2$8 = ["_key", "_isNew"];
 function ownKeys$_(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$_(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$_(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$_(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -10673,6 +10689,8 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     selectable = _ref$selectable === void 0 ? false : _ref$selectable,
     _ref$pagination = _ref.pagination,
     pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$paginationPositi = _ref.paginationPosition,
+    paginationPosition = _ref$paginationPositi === void 0 ? "both" : _ref$paginationPositi,
     _ref$pageSize = _ref.pageSize,
     pageSize = _ref$pageSize === void 0 ? 25 : _ref$pageSize,
     onSort = _ref.onSort,
@@ -11810,6 +11828,12 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     openSwipe: openSwipe,
     setOpenSwipe: setOpenSwipe
   };
+  // Which pager(s) render when `pagination` is on: the toolbar's compact
+  // PaginationHeader ("top"), the PaginationFooter ("bottom"), or both
+  // (default). Unknown values fall back to "both" (#135).
+  var pagerPosition = paginationPosition === "top" || paginationPosition === "bottom" ? paginationPosition : "both";
+  var showHeaderPager = pagination && pagerPosition !== "bottom";
+  var showFooterPager = pagination && pagerPosition !== "top";
   var showToolbarBar = showToolbar || interactive && (isDirty || !!renderAddRowButton || !!renderExternalAddRow);
   var renderAddRowClickableRow = useCallback(function () {
     return jsx("tr", {
@@ -11926,7 +11950,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
         }), showToolbar && jsxs("div", {
           className: "text-sm whitespace-nowrap",
           children: [resultRange.start, " - ", resultRange.end, " of ", resultRange.total, " ", "results"]
-        }), showToolbar && pagination && jsx(PaginationHeader, {
+        }), showToolbar && showHeaderPager && jsx(PaginationHeader, {
           currentPage: pageIndex,
           totalPages: totalPages,
           onPageChange: handlePageChange,
@@ -12207,7 +12231,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     }), TfootComponent && typeof TfootComponent === "function" ? jsx(TfootComponent, {
       columns: columnsState,
       data: filteredData
-    }) : TfootComponent, pagination && jsx(PaginationFooter, {
+    }) : TfootComponent, showFooterPager && jsx(PaginationFooter, {
       currentPage: pageIndex,
       totalPages: totalPages,
       onPageChange: handlePageChange,
@@ -18193,10 +18217,13 @@ var DatePicker = /*#__PURE__*/React__default.forwardRef(function (_ref, forwarde
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !selected,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": !selected,
           // leave room for the sibling clear button overlaid on the field
           "pr-16": showClear && selected
         }, className),
+        "data-empty": selected ? undefined : "",
         onClick: function onClick() {
           return setIsOpen(function (open) {
             return !open;
@@ -19164,7 +19191,7 @@ ColorPicker.displayName = "ColorPicker";
 
 var _excluded$P = ["fields", "onSubmit", "defaultValues", "validationSchema", "className", "submitText", "resetText", "submitButtonClass", "resetButtonClass", "showReset", "submitDisabled"],
   _excluded2$7 = ["type", "name", "label", "required", "options", "placeholder", "helperText"],
-  _excluded3$3 = ["onChange", "ref", "value"];
+  _excluded3$4 = ["onChange", "ref", "value"];
 function ownKeys$U(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$U(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$U(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$U(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -19494,7 +19521,7 @@ var Form = /*#__PURE__*/forwardRef(function Form(_ref2, ref) {
               _onChange3 = _ref9$field.onChange,
               ref = _ref9$field.ref,
               value = _ref9$field.value,
-              field = _objectWithoutProperties$1(_ref9$field, _excluded3$3);
+              field = _objectWithoutProperties$1(_ref9$field, _excluded3$4);
             return jsxs("div", {
               className: "w-full",
               children: [label && jsxs("label", {
@@ -20460,7 +20487,8 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
     }));
   };
   // Display placeholder until both start and end are committed (mandatory range).
-  var triggerText = committed.start && committed.end ? formatRange(committed.start, committed.end) : placeholder;
+  var isEmpty = !committed.start || !committed.end;
+  var triggerText = isEmpty ? placeholder : formatRange(committed.start, committed.end);
   var draftText = localStart && localEnd ? formatRange(localStart, localEnd) : placeholder;
   var presetList = Array.isArray(presets) && presets.length > 0 ? presets : null;
   var presetChips = presetList ? jsx("div", {
@@ -20540,9 +20568,12 @@ var DateRangePicker = /*#__PURE__*/forwardRef(function DateRangePicker(_ref, ref
         "aria-invalid": error ? true : undefined,
         className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", {
           "border-error-500 focus:ring-error-500": error,
-          "text-primary-500": !committed.start || !committed.end,
+          // Empty: the placeholder reads muted, like Input's
+          // ::placeholder (#159). `className` still merges last.
+          "text-muted": isEmpty,
           "pr-16": showClearButton
         }, className),
+        "data-empty": isEmpty ? "" : undefined,
         onClick: function onClick() {
           // The trigger always toggles, even mid-pick (DTUI-35): closing
           // drops the uncommitted start, reopening starts from the last
@@ -25459,7 +25490,7 @@ var SearchField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 });
 SearchField.displayName = "SearchField";
 
-var _excluded$u = ["items", "collapsed", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange", "swipeable"];
+var _excluded$u = ["items", "collapsed", "collapsible", "onToggle", "className", "containerClassName", "stickyOffset", "logo", "footer", "user", "onUserClick", "drawerPosition", "isMobileOpen", "setIsMobileOpen", "showCollapsedTooltips", "tooltipOptions", "linkAs", "expandedIds", "defaultExpandedIds", "onExpandedChange", "swipeable"];
 function ownKeys$z(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // From `md` up the sidebar is an in-flow sticky column; below it, the same
@@ -25628,6 +25659,8 @@ var hasBadge$1 = function hasBadge(item) {
  * - linkAs: element type used for items with `href` (default "a"; pass Next.js Link etc.)
  * - collapsed: boolean (desktop collapsed)
  * - onToggle: function to toggle collapse
+ * - collapsible: boolean (default true) — false hides the md+ collapse/expand
+ *   toggle (the drawer keeps its "Close navigation" button)
  * - expandedIds / defaultExpandedIds / onExpandedChange: open groups (ids)
  * - className, containerClassName, stickyOffset, logo, footer, user, onUserClick
  * - drawerPosition: 'left' | 'right'
@@ -25644,6 +25677,8 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
     items = _ref2$items === void 0 ? [] : _ref2$items,
     _ref2$collapsed = _ref2.collapsed,
     collapsed = _ref2$collapsed === void 0 ? false : _ref2$collapsed,
+    _ref2$collapsible = _ref2.collapsible,
+    collapsible = _ref2$collapsible === void 0 ? true : _ref2$collapsible,
     onToggle = _ref2.onToggle,
     className = _ref2.className,
     containerClassName = _ref2.containerClassName,
@@ -25975,6 +26010,9 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
     if (drawerMode && mobileOpen && setIsMobileOpen) setIsMobileOpen(false);else onToggle === null || onToggle === void 0 || onToggle();
   };
   var toggleLabel = drawerMode ? "Close navigation" : effectiveCollapsed ? "Expand sidebar" : "Collapse sidebar";
+  // `collapsible={false}`: no collapse/expand toggle on md+. The drawer keeps
+  // its close button (44px touch target, the drawer's only visible close).
+  var showToggle = drawerMode || collapsible;
   var CloseChevron = isRight ? ChevronRight : ChevronLeft;
   var toggleIcon = drawerMode ? jsx(CloseChevron, {
     className: "h-5 w-5",
@@ -26041,7 +26079,7 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
         children: [!effectiveCollapsed && logo && jsx("div", {
           className: "flex min-w-0 items-center",
           children: logo
-        }), jsx("button", {
+        }), showToggle && jsx("button", {
           type: "button",
           onClick: handleToggleClick,
           className: cn("inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-md", "hover:bg-gray-100 dark:hover:bg-gray-800", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"),
@@ -26266,7 +26304,8 @@ var Avatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 Avatar.displayName = 'Avatar';
 
 var _excluded$r = ["emitter", "content", "notifications"],
-  _excluded2$5 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"];
+  _excluded2$5 = ["emitter", "logo", "center", "items", "user", "notifications", "searchable", "onSearch", "leftIcon", "rightMenuContent", "onLeftIconClick", "leftIconLabel", "leftIconProps", "onLoginClick", "onLogoutClick", "className", "onFetch", "isMobileOpen", "setIsMobileOpen", "sticky", "largeTitle"],
+  _excluded3$3 = ["className", "onClick"];
 function ownKeys$w(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var NO_NOTIFICATIONS = [];
@@ -26497,6 +26536,9 @@ var Navbar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
     leftIcon = _ref3$leftIcon === void 0 ? jsx(ChevronLeft, {}) : _ref3$leftIcon,
     RightMenuContentProp = _ref3.rightMenuContent,
     onLeftIconClick = _ref3.onLeftIconClick,
+    _ref3$leftIconLabel = _ref3.leftIconLabel,
+    leftIconLabel = _ref3$leftIconLabel === void 0 ? "Go back" : _ref3$leftIconLabel,
+    leftIconProps = _ref3.leftIconProps,
     _ref3$onLoginClick = _ref3.onLoginClick,
     onLoginClick = _ref3$onLoginClick === void 0 ? function () {
       return console.log("invoked onLoginClick");
@@ -26543,6 +26585,18 @@ var Navbar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
       window.removeEventListener("resize", handleResize);
     };
   }, [handleResize]);
+  // Left button: `leftIconLabel` names it ("Go back" by default; e.g. "Open
+  // menu" when it opens a Sidebar drawer). `leftIconProps` lands on the
+  // <button> (aria-expanded, aria-controls, data-*, …); its className merges
+  // last and its onClick runs after `onLeftIconClick`.
+  var _ref4 = leftIconProps || {},
+    leftIconClassName = _ref4.className,
+    leftIconOnClick = _ref4.onClick,
+    leftIconRest = _objectWithoutProperties$1(_ref4, _excluded3$3);
+  var handleLeftIconClick = function handleLeftIconClick(e) {
+    onLeftIconClick === null || onLeftIconClick === void 0 || onLeftIconClick(e);
+    leftIconOnClick === null || leftIconOnClick === void 0 || leftIconOnClick(e);
+  };
   // Handle search submit
   var handleSearch = function handleSearch(e) {
     e.preventDefault();
@@ -26612,13 +26666,14 @@ var Navbar = /*#__PURE__*/React__default.forwardRef(function (_ref3, ref) {
           "aria-hidden": true
         }), jsxs("div", {
           className: "flex min-w-0 items-center",
-          children: [leftIcon !== false && jsx("button", {
-            onClick: onLeftIconClick,
+          children: [leftIcon !== false && jsx("button", _objectSpread$w(_objectSpread$w({
             type: "button",
-            className: cn(ICON_BUTTON, "shrink-0 md:hidden"),
-            "aria-label": "Go back",
+            "aria-label": leftIconLabel
+          }, leftIconRest), {}, {
+            onClick: handleLeftIconClick,
+            className: cn(ICON_BUTTON, "shrink-0 md:hidden", leftIconClassName),
             children: leftIcon
-          }), logo && jsx("div", {
+          })), logo && jsx("div", {
             className: "ml-2 min-w-0 truncate sm:ml-4 md:ml-0",
             children: logo
           })]
@@ -38858,6 +38913,10 @@ const {
   mergeConfig
 } = axios;
 
+var defaultIsUnauthorized = function defaultIsUnauthorized(error) {
+  var _error$response;
+  return (error === null || error === void 0 || (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 401;
+};
 var useApi = function useApi() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _props$BASE_URL = props.BASE_URL,
@@ -38892,7 +38951,10 @@ var useApi = function useApi() {
           headers: headers
         });
       }
-    } : _props$sendRequest;
+    } : _props$sendRequest,
+    onUnauthorized = props.onUnauthorized,
+    _props$isUnauthorized = props.isUnauthorized,
+    isUnauthorized = _props$isUnauthorized === void 0 ? defaultIsUnauthorized : _props$isUnauthorized;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
@@ -38909,20 +38971,25 @@ var useApi = function useApi() {
     _useState8 = _slicedToArray(_useState7, 2),
     lastRequest = _useState8[0],
     setLastRequest = _useState8[1];
-  var fetchData = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url, method, data, headers) {
-      var options,
-        _options$needLoading,
-        needLoading,
-        requestInstance,
-        response,
-        _error,
-        _args = arguments,
-        _t;
+  // Runs `onUnauthorized` for a failed request. Never throws: a failing
+  // predicate or handler must not replace the request's own error.
+  var notifyUnauthorized = function notifyUnauthorized(error, request) {
+    if (!onUnauthorized) return;
+    try {
+      if (isUnauthorized(error)) onUnauthorized(error, request);
+    } catch (handlerError) {
+      // eslint-disable-next-line no-console
+      console.error('useApi: onUnauthorized / isUnauthorized threw', handlerError);
+    }
+  };
+  // Single send path for fetchData and callApi, so `onUnauthorized` fires
+  // exactly once per failing request and sees the `apiKey` when there is one.
+  var request = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url, method, data, headers, options, apiKey) {
+      var _options$needLoading, needLoading, requestInstance, response, _error, _t;
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            options = _args.length > 4 && _args[4] !== undefined ? _args[4] : {};
             _options$needLoading = options.needLoading, needLoading = _options$needLoading === void 0 ? true : _options$needLoading;
             requestInstance = createRequestInstance(BASE_URL, DEFAULT_HEADERS);
             if (needLoading) setLoading(true);
@@ -38938,6 +39005,11 @@ var useApi = function useApi() {
             _t = _context["catch"](1);
             _error = _t;
             setError(_error);
+            notifyUnauthorized(_error, {
+              apiKey: apiKey,
+              url: url,
+              method: String(method).toUpperCase()
+            });
             throw _error;
           case 4:
             _context.prev = 4;
@@ -38949,10 +39021,14 @@ var useApi = function useApi() {
         }
       }, _callee, null, [[1, 3, 4, 5]]);
     }));
-    return function fetchData(_x, _x2, _x3, _x4) {
+    return function request(_x, _x2, _x3, _x4, _x5, _x6) {
       return _ref.apply(this, arguments);
     };
   }();
+  var fetchData = function fetchData(url, method, data, headers) {
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    return request(url, method, data, headers, options);
+  };
   var callApi = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(apiKey, args, needLoading) {
       var apiResolve, _apiResolve, url, method, headers, payload;
@@ -38969,9 +39045,9 @@ var useApi = function useApi() {
             _apiResolve = apiResolve.apply(void 0, _toConsumableArray$1(args)), url = _apiResolve.url, method = _apiResolve.method, headers = _apiResolve.headers, payload = _apiResolve.data;
             _context2.prev = 2;
             _context2.next = 3;
-            return fetchData(url, method, payload, headers, {
+            return request(url, method, payload, headers, {
               needLoading: needLoading
-            });
+            }, apiKey);
           case 3:
             return _context2.abrupt("return", _context2.sent);
           case 4:
@@ -38984,7 +39060,7 @@ var useApi = function useApi() {
         }
       }, _callee2, null, [[2,, 4, 5]]);
     }));
-    return function callApi(_x5, _x6, _x7) {
+    return function callApi(_x7, _x8, _x9) {
       return _ref2.apply(this, arguments);
     };
   }();