@dreamtree-org/twreact-ui 2.1.1 → 2.1.2

package/README.md

@@ -523,6 +523,7 @@ Top navigation bar with user menu and notifications.
 - `onLeftIconClick`: (event) => void
 - `leftIconLabel`: string (default: "Go back") — the left button's accessible name, e.g. "Open navigation" when it opens a Sidebar drawer
 - `leftIconProps`: ButtonHTMLAttributes — spread onto the left button (e.g. `aria-expanded`, `aria-controls`); `className` merges last
+- `rightMenuContent`: ReactNode | (props) => ReactNode — replaces the notifications menu; an element renders as is, a function receives `{ notifications, ...navbarProps }`
 
 ```jsx
 <Navbar

package/dist/components/core/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Table.jsx"],"names":[],"mappings":";AAgDA,+EA0lDG;kBAjoDI,OAAO"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Table.jsx"],"names":[],"mappings":";AAgDA,+EA4lDG;kBAnoDI,OAAO"}

package/dist/components/navigation/Navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+EAkZG;;kBAppBmF,OAAO"}
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Navbar.jsx"],"names":[],"mappings":"AAmQA,+EAqZG;;kBAvpBmF,OAAO"}

package/dist/esm/components/core/Table/MobileCard.js

@@ -201,10 +201,10 @@ function MobileCard(_ref) {
         return jsxs("div", {
           className: cn("flex justify-between items-center flex-row py-2 border-b last:border-b-0", safeExtraCellClass),
           children: [jsx("div", {
-            className: "text-xs font-medium text-primary-700 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
+            className: "text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wide mb-1 sm:mb-0 sm:w-1/3 sm:pr-2",
             children: column.label
           }), jsx("div", {
-            className: "text-sm text-primary-900 sm:w-2/3 sm:pl-2 break-words",
+            className: "text-sm text-primary-900 dark:text-foreground sm:w-2/3 sm:pl-2 break-words",
             children: renderCell(column, row, globalIndex)
           })]
         }, column.key);

package/dist/esm/components/core/Table/MobileFilters.js

@@ -205,7 +205,7 @@ function MobileFilters(_ref5) {
           });
         },
         "aria-expanded": !!showMobileFilters,
-        className: "text-xs font-medium text-primary-700",
+        className: "text-xs font-medium text-primary-700 dark:text-primary-300",
         children: showMobileFilters ? "Hide" : "Show"
       })]
     }), showMobileFilters && jsxs("div", {

package/dist/esm/components/core/Table/Table.js

@@ -178,6 +178,12 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     _useState14 = _slicedToArray(_useState13, 2),
     filters = _useState14[0],
     setFilters = _useState14[1];
+  // The handlers below read and advance these refs synchronously, so they can
+  // call onSort / onFilter after setting state instead of inside a setState
+  // updater (updaters must be pure; React runs them during render and twice
+  // in StrictMode, #194). They are the only writers of sortConfig / filters.
+  var sortConfigRef = useRef(sortConfig);
+  var filtersRef = useRef(filters);
   var _useState15 = useState(""),
     _useState16 = _slicedToArray(_useState15, 2),
     searchInput = _useState16[0],
@@ -932,34 +938,30 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
   }, []);
   var handleSort = useCallback(function (key) {
     if (!sortable) return;
-    setSortConfig(function (prev) {
-      var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
-      onSort === null || onSort === void 0 || onSort(key, direction);
-      return {
-        key: key,
-        direction: direction
-      };
-    });
+    var prev = sortConfigRef.current;
+    var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
+    var next = {
+      key: key,
+      direction: direction
+    };
+    sortConfigRef.current = next;
+    setSortConfig(next);
+    onSort === null || onSort === void 0 || onSort(key, direction);
   }, [sortable, onSort]);
-  var handleFilter = useCallback(function (key, value) {
-    setFilters(function (prev) {
-      var newFilters = _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, key, value));
-      onFilter === null || onFilter === void 0 || onFilter(newFilters);
-      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-      return newFilters;
-    });
+  var commitFilters = useCallback(function (newFilters) {
+    filtersRef.current = newFilters;
+    setFilters(newFilters);
     setCurrentPage(1);
+    onFilter === null || onFilter === void 0 || onFilter(newFilters);
+    onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
   }, [onFilter, onFilterChange]);
+  var handleFilter = useCallback(function (key, value) {
+    return commitFilters(_objectSpread2(_objectSpread2({}, filtersRef.current), {}, _defineProperty({}, key, value)));
+  }, [commitFilters]);
   // Commits several filters at once (the phone filter sheet's Apply).
   var applyFilters = useCallback(function (patch) {
-    setFilters(function (prev) {
-      var newFilters = _objectSpread2(_objectSpread2({}, prev), patch);
-      onFilter === null || onFilter === void 0 || onFilter(newFilters);
-      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
-      return newFilters;
-    });
-    setCurrentPage(1);
-  }, [onFilter, onFilterChange]);
+    return commitFilters(_objectSpread2(_objectSpread2({}, filtersRef.current), patch));
+  }, [commitFilters]);
   // One open swipe row at a time: `{ key, side }`.
   var _useState37 = useState(null),
     _useState38 = _slicedToArray(_useState37, 2),
@@ -1196,7 +1198,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
       className: "bg-primary-50/40 hover:bg-primary-100/70 active:bg-primary-100 transition-colors border-t-2 border-b-2 border-dashed border-primary-300 cursor-pointer group",
       children: jsx("td", {
         colSpan: visibleCount,
-        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800",
+        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800 dark:text-primary-300 dark:group-hover:text-primary-200",
         children: jsxs("div", {
           className: "flex items-center justify-start gap-2",
           children: [jsx(Plus, {
@@ -1376,7 +1378,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             children: [hasDetailsColumn && jsx("th", {
               className: "w-8 px-4 py-3"
             }), showSerial && jsx("th", {
-              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider",
+              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wider",
               children: "#"
             }), selectable && jsx("th", {
               className: "w-12 px-6 py-3",
@@ -1403,7 +1405,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
               return jsx("th", {
                 scope: "col",
                 "aria-sort": ariaSort,
-                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 uppercase tracking-wider", isSortable && "p-0"),
+                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-700 dark:text-primary-300 uppercase tracking-wider", isSortable && "p-0"),
                 children: isSortable ? jsxs("button", {
                   type: "button",
                   onClick: function onClick() {

package/dist/esm/components/navigation/Navbar.js

@@ -347,8 +347,11 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
       })
     });
   };
-  // RightMenuContent: prefer prop if provided, else fallback
-  var RightMenuComponent = typeof RightMenuContentProp === "function" ? RightMenuContentProp : function (rest) {
+  // RightMenuContent: a render function or an element (#193), else the
+  // built-in notifications menu.
+  var RightMenuComponent = typeof RightMenuContentProp === "function" ? RightMenuContentProp : RightMenuContentProp != null ? function () {
+    return RightMenuContentProp;
+  } : function (rest) {
     return jsx(RightMenuContent, _objectSpread2({
       emitter: emitter
     }, rest));