@octaviaflow/core 3.0.18-beta.4 → 3.0.18-beta.6

package/dist/index.js

@@ -4744,7 +4744,7 @@ var Select = forwardRef14(function Select2({
   const dropdownRef = useRef8(null);
   const searchRef = useRef8(null);
   const [searchQuery, setSearchQuery] = useState7("");
-  const [dropdownPos, setDropdownPos] = useState7({ top: 0, left: 0, width: 0 });
+  const [dropdownPos, setDropdownPos] = useState7({ left: 0, width: 0, maxHeight: 240, direction: "down" });
   const setTriggerRef = (node) => {
     triggerRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);
@@ -4805,10 +4805,19 @@ var Select = forwardRef14(function Select2({
   const updatePosition = useCallback7(() => {
     if (!triggerRef.current) return;
     const rect = triggerRef.current.getBoundingClientRect();
+    const viewportH = window.innerHeight;
+    const margin = 8;
+    const gap = 4;
+    const spaceBelow = viewportH - rect.bottom - gap - margin;
+    const spaceAbove = rect.top - gap - margin;
+    const PREFERRED_MIN = 200;
+    const openUp = spaceBelow < PREFERRED_MIN && spaceAbove > spaceBelow;
     setDropdownPos({
-      top: rect.bottom + 4,
+      ...openUp ? { bottom: viewportH - rect.top + gap } : { top: rect.bottom + gap },
       left: rect.left,
-      width: rect.width
+      width: rect.width,
+      maxHeight: Math.max(120, openUp ? spaceAbove : spaceBelow),
+      direction: openUp ? "up" : "down"
     });
   }, []);
   useEffect3(() => {
@@ -4900,7 +4909,8 @@ var Select = forwardRef14(function Select2({
               className: "ods-select__dropdown",
               style: {
                 position: "fixed",
-                top: dropdownPos.top,
+                ...dropdownPos.top !== void 0 && { top: dropdownPos.top },
+                ...dropdownPos.bottom !== void 0 && { bottom: dropdownPos.bottom },
                 left: dropdownPos.left,
                 // `minWidth` (not `width`) keeps the popover at
                 // least as wide as the trigger — preserves visual
@@ -4910,7 +4920,12 @@ var Select = forwardRef14(function Select2({
                 // Avoids the previous `max-content` recipe which
                 // made the popover grow uncomfortably wide on
                 // searchable / long-option menus.
-                minWidth: Math.max(dropdownPos.width, dropdownMinWidth ?? 0)
+                minWidth: Math.max(dropdownPos.width, dropdownMinWidth ?? 0),
+                // Bound the popover to the available viewport edge so
+                // it never spills off-screen on tall pages. Pairs with
+                // `overflow-y: auto` from the .ods-select__dropdown
+                // SCSS so long option lists scroll internally.
+                maxHeight: dropdownPos.maxHeight
               },
               initial: { opacity: 0, scale: 0.95 },
               animate: { opacity: 1, scale: 1 },
@@ -10340,7 +10355,6 @@ import {
   ColumnIcon,
   DownloadIcon,
   FilterIcon as DsFilterIcon,
-  MenuIcon,
   OverflowMenuHorizontalIcon,
   RenewIcon,
   SearchIcon as DsSearchIcon
@@ -10479,44 +10493,6 @@ function FilterPopover({
     ] }) })
   ] });
 }
-function DensityPopover({
-  density,
-  setDensity,
-  open,
-  setOpen
-}) {
-  const triggerRef = useRef20(null);
-  return /* @__PURE__ */ jsxs34("div", { className: "ods-datatable__filter", children: [
-    /* @__PURE__ */ jsx35(
-      "button",
-      {
-        ref: triggerRef,
-        type: "button",
-        className: "ods-datatable__icon-btn",
-        onClick: () => setOpen(!open),
-        "aria-label": "Row density",
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        children: DensityIcon
-      }
-    ),
-    /* @__PURE__ */ jsx35(PortalMenu, { open, onClose: () => setOpen(false), triggerRef, align: "end", children: /* @__PURE__ */ jsx35("ul", { role: "listbox", style: { listStyle: "none", margin: 0, padding: 0 }, children: ["compact", "default", "comfortable"].map((d) => /* @__PURE__ */ jsx35("li", { children: /* @__PURE__ */ jsx35(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "ods-datatable__menu-item",
-          density === d && "ods-datatable__menu-item--active"
-        ),
-        onClick: () => {
-          setDensity(d);
-          setOpen(false);
-        },
-        children: d.charAt(0).toUpperCase() + d.slice(1)
-      }
-    ) }, d)) }) })
-  ] });
-}
 function ColumnsPopover({
   columns,
   hidden,
@@ -10577,7 +10553,6 @@ var SortDesc = /* @__PURE__ */ jsx35(CaretDownIcon, { width: 10, height: 10, "ar
 var SortIdle = /* @__PURE__ */ jsx35(CaretSortIcon, { width: 10, height: 10, "aria-hidden": "true", style: { opacity: 0.5 } });
 var FilterIcon = /* @__PURE__ */ jsx35(DsFilterIcon, { width: 12, height: 12, "aria-hidden": "true" });
 var ColumnsIcon = /* @__PURE__ */ jsx35(ColumnIcon, { width: 12, height: 12, "aria-hidden": "true" });
-var DensityIcon = /* @__PURE__ */ jsx35(MenuIcon, { width: 12, height: 12, "aria-hidden": "true" });
 var MoreHIcon = () => /* @__PURE__ */ jsx35(OverflowMenuHorizontalIcon, { width: 12, height: 12, "aria-hidden": "true" });
 var XIcon2 = () => /* @__PURE__ */ jsx35(CloseIcon6, { width: 12, height: 12, "aria-hidden": "true" });
 var RefreshIcon = (props) => /* @__PURE__ */ jsx35(RenewIcon, { width: 12, height: 12, ...props });
@@ -10667,8 +10642,7 @@ function DataTable(props) {
     expandable = false,
     renderExpanded,
     pagination,
-    density: densityProp = "default",
-    showDensityToggle = true,
+    density: densityProp = "comfortable",
     showColumnSettings = true,
     loading = false,
     error,
@@ -10732,9 +10706,7 @@ function DataTable(props) {
     );
   }, [filters, filterValues]);
   const [columnWidths, setColumnWidths] = useState18({});
-  const [density, setDensity] = useState18(densityProp);
-  const [densityOpen, setDensityOpen] = useState18(false);
-  useEffect15(() => setDensity(densityProp), [densityProp]);
+  const density = densityProp;
   const [hiddenCols, setHiddenCols] = useState18(
     () => new Set(columns.filter((c) => c.visible === false).map((c) => c.key))
   );
@@ -10745,11 +10717,21 @@ function DataTable(props) {
   const [internalPage, setInternalPage] = useState18(1);
   const [internalPageSize, setInternalPageSize] = useState18(pgCfg?.pageSize ?? 10);
   const page = pgCfg?.page ?? internalPage;
-  const pageSize = pgCfg?.pageSize ?? internalPageSize;
+  useEffect15(() => {
+    if (pgCfg?.pageSize !== void 0 && pgCfg.pageSize !== internalPageSize) {
+      setInternalPageSize(pgCfg.pageSize);
+    }
+  }, [pgCfg?.pageSize]);
+  const pageSize = internalPageSize;
   const setPage = (p) => {
     pgCfg?.onPageChange?.(p);
     if (pgCfg?.page === void 0) setInternalPage(p);
   };
+  const setPageSize = (n) => {
+    setInternalPageSize(n);
+    pgCfg?.onPageSizeChange?.(n);
+    setPage(1);
+  };
   const idOf = useCallback16(
     (row, idx) => getRowId ? getRowId(row, idx) : String(idx),
     [getRowId]
@@ -10911,27 +10893,16 @@ function DataTable(props) {
                 f.key
               ))
             ] }),
-            (showDensityToggle || showColumnSettings) && /* @__PURE__ */ jsxs34("div", { className: "ods-datatable__toolbar-section ods-datatable__toolbar-section--view", children: [
-              showDensityToggle && /* @__PURE__ */ jsx35(
-                DensityPopover,
-                {
-                  density,
-                  setDensity,
-                  open: densityOpen,
-                  setOpen: setDensityOpen
-                }
-              ),
-              showColumnSettings && /* @__PURE__ */ jsx35(
-                ColumnsPopover,
-                {
-                  columns,
-                  hidden: hiddenCols,
-                  setHidden: setHiddenCols,
-                  open: colSettingsOpen,
-                  setOpen: setColSettingsOpen
-                }
-              )
-            ] }),
+            showColumnSettings && /* @__PURE__ */ jsx35("div", { className: "ods-datatable__toolbar-section ods-datatable__toolbar-section--view", children: /* @__PURE__ */ jsx35(
+              ColumnsPopover,
+              {
+                columns,
+                hidden: hiddenCols,
+                setHidden: setHiddenCols,
+                open: colSettingsOpen,
+                setOpen: setColSettingsOpen
+              }
+            ) }),
             (showRefresh || showExport) && /* @__PURE__ */ jsxs34("div", { className: "ods-datatable__toolbar-section ods-datatable__toolbar-section--data", children: [
               showRefresh && /* @__PURE__ */ jsx35(
                 "button",
@@ -11207,10 +11178,7 @@ function DataTable(props) {
                   "aria-label": "Rows per page",
                   value: String(pageSize),
                   options: pageSizes.map((n) => ({ value: String(n), label: String(n) })),
-                  onChange: (v) => {
-                    setInternalPageSize(Number(v));
-                    setPage(1);
-                  }
+                  onChange: (v) => setPageSize(Number(v))
                 }
               )
             ] }),