@dmsi/wedgekit-react 0.0.922 → 0.0.986

package/dist/components/DataGrid/PinnedColumns.cjs

@@ -442,6 +442,9 @@ var useMatchesMedia = (query) => {
 };
 var useMatchesMobile = () => useMatchesMedia("(width < 48rem)");
 
+// src/hooks/useTableLayout/useTableLayout.ts
+var import_react5 = require("react");
+
 // src/utils/formatting.tsx
 function getDecimalPlaceholder(decimals) {
   if (!decimals || decimals <= 0) {
@@ -573,30 +576,8 @@ function formatDate(date) {
   }
 }
 
-// src/utils/mergeObjectArrays.ts
-function mergeObjectArrays(arr1, arr2) {
-  const arr2Map = /* @__PURE__ */ new Map();
-  for (const item of arr2) {
-    const id = item.id;
-    if (id !== void 0) {
-      arr2Map.set(id, item);
-    }
-  }
-  return arr1.map((item1) => {
-    const id = item1.id;
-    if (id !== void 0 && arr2Map.has(id)) {
-      const item2 = arr2Map.get(id);
-      const meta1 = item1.meta;
-      const meta2 = item2.meta;
-      const mergedMeta = meta1 && meta2 && typeof meta1 === "object" && typeof meta2 === "object" ? __spreadValues(__spreadValues({}, meta1), meta2) : meta2 != null ? meta2 : meta1;
-      return __spreadProps(__spreadValues(__spreadValues({}, item1), item2), { meta: mergedMeta });
-    }
-    return item1;
-  });
-}
-
 // src/utils/index.ts
-var LocalStoragePrefixVersion = `dmsi-acc-v1.1.4`;
+var LocalStoragePrefixVersion = `dmsi-acc-v1.1.5`;
 
 // src/utils.ts
 function findDocumentRoot(element) {
@@ -621,74 +602,366 @@ function findDocumentRoot(element) {
   return window.document.body;
 }
 
-// src/hooks/useTableLayout.ts
-var import_react5 = require("react");
-var LocalStoragePrefix = `${LocalStoragePrefixVersion}-tableLayout`;
-var getLocalStorageKeyWithPrefix = (key) => `${LocalStoragePrefix}__${key}`;
+// src/hooks/useTableLayout/storage.ts
+var STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tablePrefs`;
+var LEGACY_STORAGE_PREFIX = `${LocalStoragePrefixVersion}-tableLayout`;
+var CURRENT_SCHEMA_VERSION = 2;
+function getStorageKey(key) {
+  return `${STORAGE_PREFIX}__${key}`;
+}
+function getLegacyStorageKey(key) {
+  return `${LEGACY_STORAGE_PREFIX}__${key}-tableLayout`;
+}
+function loadPreferences(key) {
+  const storageKey = getStorageKey(key);
+  const legacyKey = getLegacyStorageKey(key);
+  const newData = localStorage.getItem(storageKey);
+  if (newData) {
+    try {
+      const parsed = JSON.parse(newData);
+      if (parsed.version === CURRENT_SCHEMA_VERSION) {
+        return parsed;
+      }
+      localStorage.removeItem(storageKey);
+    } catch (e) {
+      localStorage.removeItem(storageKey);
+    }
+  }
+  const legacyData = localStorage.getItem(legacyKey);
+  if (legacyData) {
+    localStorage.removeItem(legacyKey);
+  }
+  return null;
+}
+function savePreferences(key, preferences) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const storageKey = getStorageKey(key);
+  const hasPreferences = ((_b = (_a = preferences.columnOrder) == null ? void 0 : _a.length) != null ? _b : 0) > 0 || ((_d = (_c = preferences.hiddenByUser) == null ? void 0 : _c.length) != null ? _d : 0) > 0 || ((_f = (_e = preferences.shownByUser) == null ? void 0 : _e.length) != null ? _f : 0) > 0 || Object.keys((_g = preferences.columnWidths) != null ? _g : {}).length > 0;
+  if (!hasPreferences) {
+    localStorage.removeItem(storageKey);
+    return;
+  }
+  const data = __spreadProps(__spreadValues({}, preferences), {
+    version: CURRENT_SCHEMA_VERSION
+  });
+  localStorage.setItem(storageKey, JSON.stringify(data));
+}
+function clearPreferences(key) {
+  const storageKey = getStorageKey(key);
+  const legacyKey = getLegacyStorageKey(key);
+  localStorage.removeItem(storageKey);
+  localStorage.removeItem(legacyKey);
+}
+function clearAllLegacyData() {
+  if (typeof window === "undefined") return;
+  const keysToRemove = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if ((key == null ? void 0 : key.includes("-tableLayout__")) && key.endsWith("-tableLayout")) {
+      keysToRemove.push(key);
+    }
+  }
+  keysToRemove.forEach((key) => {
+    localStorage.removeItem(key);
+  });
+}
+function hasPerformedLegacyMigration() {
+  if (typeof window === "undefined") return true;
+  return localStorage.getItem(`${STORAGE_PREFIX}__migrated`) === "true";
+}
+function markLegacyMigrationComplete() {
+  if (typeof window === "undefined") return;
+  localStorage.setItem(`${STORAGE_PREFIX}__migrated`, "true");
+}
+
+// src/hooks/useTableLayout/computeColumns.ts
+function computeColumnVisibility(column, preferences) {
+  var _a, _b, _c, _d, _e, _f;
+  const columnId = column.id;
+  if (!columnId) return true;
+  const systemVisible = (_b = (_a = column.meta) == null ? void 0 : _a.visible) != null ? _b : true;
+  const canUserToggle = (_d = (_c = column.meta) == null ? void 0 : _c.inVisibilityMenu) != null ? _d : true;
+  if (!canUserToggle) {
+    return systemVisible;
+  }
+  if (preferences) {
+    if ((_e = preferences.hiddenByUser) == null ? void 0 : _e.includes(columnId)) {
+      return false;
+    }
+    if ((_f = preferences.shownByUser) == null ? void 0 : _f.includes(columnId)) {
+      return true;
+    }
+  }
+  return systemVisible;
+}
+function applyPreferencesToColumns(systemColumns, preferences) {
+  var _a;
+  let columns = systemColumns.map((col) => __spreadProps(__spreadValues({}, col), {
+    meta: __spreadProps(__spreadValues({}, col.meta), {
+      // Compute visibility based on system + user preferences
+      visible: computeColumnVisibility(col, preferences)
+    })
+  }));
+  if ((_a = preferences == null ? void 0 : preferences.columnOrder) == null ? void 0 : _a.length) {
+    const orderMap = new Map(
+      preferences.columnOrder.map((id, index) => [id, index])
+    );
+    columns = columns.sort((a, b) => {
+      var _a2, _b;
+      const orderA = (_a2 = orderMap.get(a.id)) != null ? _a2 : Number.MAX_SAFE_INTEGER;
+      const orderB = (_b = orderMap.get(b.id)) != null ? _b : Number.MAX_SAFE_INTEGER;
+      if (orderA === Number.MAX_SAFE_INTEGER && orderB === Number.MAX_SAFE_INTEGER) {
+        return 0;
+      }
+      return orderA - orderB;
+    });
+  }
+  if (preferences == null ? void 0 : preferences.columnWidths) {
+    columns = columns.map((col) => {
+      var _a2;
+      const width = col.id ? (_a2 = preferences.columnWidths) == null ? void 0 : _a2[col.id] : void 0;
+      if (width !== void 0) {
+        return __spreadProps(__spreadValues({}, col), {
+          size: width
+        });
+      }
+      return col;
+    });
+  }
+  return columns;
+}
+function extractColumnOrder(columns) {
+  return columns.filter((c) => c.id).map((c) => c.id);
+}
+function extractVisibilityChanges(columns, systemColumns) {
+  const hiddenByUser = [];
+  const shownByUser = [];
+  columns.forEach((col) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (!col.id) return;
+    const systemCol = systemColumns.find((c) => c.id === col.id);
+    if (!systemCol) return;
+    const systemVisible = (_b = (_a = systemCol.meta) == null ? void 0 : _a.visible) != null ? _b : true;
+    const currentVisible = (_d = (_c = col.meta) == null ? void 0 : _c.visible) != null ? _d : true;
+    const canToggle = (_f = (_e = systemCol.meta) == null ? void 0 : _e.inVisibilityMenu) != null ? _f : true;
+    if (!canToggle) return;
+    if (systemVisible && !currentVisible) {
+      hiddenByUser.push(col.id);
+    } else if (!systemVisible && currentVisible) {
+      if (((_g = systemCol.meta) == null ? void 0 : _g.inVisibilityMenu) !== false) {
+        shownByUser.push(col.id);
+      }
+    }
+  });
+  return { hiddenByUser, shownByUser };
+}
+
+// src/hooks/useTableLayout/useTableLayout.ts
+var hasCleanedLegacyDataThisSession = false;
 function useTableLayout(initialColumns, key, autosync = true) {
-  const [columns, setColumns] = (0, import_react5.useState)(initialColumns);
+  const [preferences, setPreferences] = (0, import_react5.useState)(null);
+  const [columns, setColumnsState] = (0, import_react5.useState)(
+    () => (
+      // Initialize with system columns (no preferences applied yet)
+      initialColumns.map((col) => __spreadValues({}, col))
+    )
+  );
   const [isReady, setIsReady] = (0, import_react5.useState)(false);
-  const isReadyRef = (0, import_react5.useRef)(false);
   const keyRef = (0, import_react5.useRef)(key);
+  const initialColumnsRef = (0, import_react5.useRef)(initialColumns);
+  const preferencesRef = (0, import_react5.useRef)(preferences);
+  const autosyncRef = (0, import_react5.useRef)(autosync);
   (0, import_react5.useEffect)(() => {
-    isReadyRef.current = isReady;
     keyRef.current = key;
-  }, [isReady, key]);
-  const handleSaveLayout = (0, import_react5.useCallback)(
-    (setter, _internal) => {
-      if (!isReadyRef.current && !_internal || !keyRef.current) return;
-      setColumns((prevColumns) => {
-        const newColumns = typeof setter === "function" ? setter(prevColumns) : setter;
-        if (JSON.stringify(newColumns) === JSON.stringify(prevColumns) && !_internal) {
-          return prevColumns;
-        }
-        localStorage.setItem(
-          getLocalStorageKeyWithPrefix(`${keyRef.current}-tableLayout`),
-          JSON.stringify(newColumns)
-        );
-        return newColumns;
-      });
-    },
-    []
-  );
+  }, [key]);
+  (0, import_react5.useEffect)(() => {
+    initialColumnsRef.current = initialColumns;
+  }, [initialColumns]);
+  (0, import_react5.useEffect)(() => {
+    preferencesRef.current = preferences;
+  }, [preferences]);
   (0, import_react5.useEffect)(() => {
-    if (!autosync) return;
+    autosyncRef.current = autosync;
+  }, [autosync]);
+  (0, import_react5.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    if (!hasCleanedLegacyDataThisSession && !hasPerformedLegacyMigration()) {
+      clearAllLegacyData();
+      markLegacyMigrationComplete();
+      hasCleanedLegacyDataThisSession = true;
+    }
+  }, []);
+  (0, import_react5.useEffect)(() => {
+    if (!autosync) {
+      setIsReady(true);
+      return;
+    }
     if (!key) {
       setIsReady(true);
       return;
     }
-    const savedLayout = localStorage.getItem(
-      getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
+    const savedPrefs = loadPreferences(key);
+    setPreferences(savedPrefs);
+    const computedColumns = applyPreferencesToColumns(
+      initialColumns,
+      savedPrefs
     );
-    if (savedLayout) {
-      setColumns(
-        mergeObjectArrays(
-          initialColumns,
-          JSON.parse(savedLayout)
-        )
-      );
-    } else {
-      localStorage.setItem(
-        getLocalStorageKeyWithPrefix(`${key}-tableLayout`),
-        JSON.stringify(initialColumns)
-      );
-      setColumns((prev) => {
-        if (JSON.stringify(initialColumns) === JSON.stringify(prev))
-          return prev;
-        return initialColumns;
-      });
-    }
+    setColumnsState(computedColumns);
     setIsReady(true);
-  }, [initialColumns, key, autosync]);
-  const getSavedLayout = (0, import_react5.useCallback)(() => {
-    const savedLayout = localStorage.getItem(
-      getLocalStorageKeyWithPrefix(`${key}-tableLayout`)
+  }, [key, autosync]);
+  (0, import_react5.useEffect)(() => {
+    if (!isReady) return;
+    const computedColumns = applyPreferencesToColumns(
+      initialColumns,
+      preferencesRef.current
     );
-    if (savedLayout) {
-      return JSON.parse(savedLayout);
-    }
-  }, [key]);
-  return { columns, setColumns: handleSaveLayout, isReady, getSavedLayout };
+    setColumnsState(computedColumns);
+  }, [initialColumns, isReady]);
+  const persistPreferences = (0, import_react5.useCallback)(
+    (newPrefs) => {
+      if (!keyRef.current) return;
+      const updated = __spreadProps(__spreadValues(__spreadValues({}, preferencesRef.current), newPrefs), {
+        version: 2
+      });
+      setPreferences(updated);
+      if (autosyncRef.current) {
+        savePreferences(keyRef.current, updated);
+      }
+      const computedColumns = applyPreferencesToColumns(
+        initialColumnsRef.current,
+        updated
+      );
+      setColumnsState(computedColumns);
+    },
+    []
+  );
+  const hideColumn = (0, import_react5.useCallback)(
+    (columnId) => {
+      var _a, _b;
+      const currentPrefs = preferencesRef.current;
+      const currentHidden = (_a = currentPrefs == null ? void 0 : currentPrefs.hiddenByUser) != null ? _a : [];
+      const currentShown = (_b = currentPrefs == null ? void 0 : currentPrefs.shownByUser) != null ? _b : [];
+      const newShown = currentShown.filter((id) => id !== columnId);
+      const newHidden = currentHidden.includes(columnId) ? currentHidden : [...currentHidden, columnId];
+      persistPreferences(__spreadProps(__spreadValues({}, currentPrefs), {
+        hiddenByUser: newHidden,
+        shownByUser: newShown
+      }));
+    },
+    [persistPreferences]
+  );
+  const showColumn = (0, import_react5.useCallback)(
+    (columnId) => {
+      var _a, _b;
+      const currentPrefs = preferencesRef.current;
+      const currentHidden = (_a = currentPrefs == null ? void 0 : currentPrefs.hiddenByUser) != null ? _a : [];
+      const currentShown = (_b = currentPrefs == null ? void 0 : currentPrefs.shownByUser) != null ? _b : [];
+      const newHidden = currentHidden.filter((id) => id !== columnId);
+      const newShown = currentShown.includes(columnId) ? currentShown : [...currentShown, columnId];
+      persistPreferences(__spreadProps(__spreadValues({}, currentPrefs), {
+        hiddenByUser: newHidden,
+        shownByUser: newShown
+      }));
+    },
+    [persistPreferences]
+  );
+  const reorderColumns = (0, import_react5.useCallback)(
+    (columnIds) => {
+      persistPreferences(__spreadProps(__spreadValues({}, preferencesRef.current), {
+        columnOrder: columnIds
+      }));
+    },
+    [persistPreferences]
+  );
+  const setColumnWidth = (0, import_react5.useCallback)(
+    (columnId, width) => {
+      var _a;
+      const currentPrefs = preferencesRef.current;
+      const currentWidths = (_a = currentPrefs == null ? void 0 : currentPrefs.columnWidths) != null ? _a : {};
+      persistPreferences(__spreadProps(__spreadValues({}, currentPrefs), {
+        columnWidths: __spreadProps(__spreadValues({}, currentWidths), { [columnId]: width })
+      }));
+    },
+    [persistPreferences]
+  );
+  const resetToDefaults = (0, import_react5.useCallback)(() => {
+    if (!keyRef.current) return;
+    clearPreferences(keyRef.current);
+    setPreferences(null);
+    const computedColumns = applyPreferencesToColumns(
+      initialColumnsRef.current,
+      null
+    );
+    setColumnsState(computedColumns);
+  }, []);
+  const getUserPreferences = (0, import_react5.useCallback)(() => {
+    var _a;
+    return (_a = preferencesRef.current) != null ? _a : { version: 2 };
+  }, []);
+  const getSavedLayout = (0, import_react5.useCallback)(() => {
+    return columns;
+  }, [columns]);
+  const setColumns = (0, import_react5.useCallback)(
+    (setter) => {
+      setColumnsState((prev) => {
+        var _a, _b, _c, _d;
+        const newColumns = typeof setter === "function" ? setter(prev) : setter;
+        const newOrder = extractColumnOrder(newColumns);
+        const { hiddenByUser, shownByUser } = extractVisibilityChanges(
+          newColumns,
+          initialColumnsRef.current
+        );
+        const existingPrefs = preferencesRef.current;
+        const mergedHidden = Array.from(
+          /* @__PURE__ */ new Set([
+            ...hiddenByUser,
+            // Keep existing hidden prefs for columns that are still hidden
+            ...(_b = (_a = existingPrefs == null ? void 0 : existingPrefs.hiddenByUser) == null ? void 0 : _a.filter((id) => {
+              var _a2;
+              const col = newColumns.find((c) => c.id === id);
+              return col && ((_a2 = col.meta) == null ? void 0 : _a2.visible) === false;
+            })) != null ? _b : []
+          ])
+        );
+        const mergedShown = Array.from(
+          /* @__PURE__ */ new Set([
+            ...shownByUser,
+            // Keep existing shown prefs for columns that are still visible
+            ...(_d = (_c = existingPrefs == null ? void 0 : existingPrefs.shownByUser) == null ? void 0 : _c.filter((id) => {
+              var _a2;
+              const col = newColumns.find((c) => c.id === id);
+              return col && ((_a2 = col.meta) == null ? void 0 : _a2.visible) !== false;
+            })) != null ? _d : []
+          ])
+        );
+        if (keyRef.current && autosync) {
+          const newPrefs = {
+            columnOrder: newOrder,
+            hiddenByUser: mergedHidden,
+            shownByUser: mergedShown,
+            columnWidths: existingPrefs == null ? void 0 : existingPrefs.columnWidths,
+            version: 2
+          };
+          setPreferences(newPrefs);
+          savePreferences(keyRef.current, newPrefs);
+        }
+        return newColumns;
+      });
+    },
+    [autosync]
+  );
+  return {
+    columns,
+    setColumns,
+    isReady,
+    getSavedLayout,
+    hideColumn,
+    showColumn,
+    reorderColumns,
+    setColumnWidth,
+    resetToDefaults,
+    getUserPreferences
+  };
 }
 
 // src/hooks/useEditCell.tsx
@@ -3023,7 +3296,8 @@ function DataGrid({
   const {
     columns: tableColumns,
     setColumns: setTableColumns,
-    getSavedLayout
+    getSavedLayout,
+    resetToDefaults
   } = useTableLayout(columns, id != null ? id : testid);
   const [columnOrder, setColumnOrder] = (0, import_react14.useState)(
     tableColumns.map((c) => c.id)
@@ -3051,21 +3325,8 @@ function DataGrid({
     [tableColumns]
   );
   const resetDefaultColumnVisibility = (0, import_react14.useCallback)(() => {
-    setTableColumns((prev) => {
-      columns.forEach((column) => {
-        var _a2, _b2;
-        const columnId = column.id;
-        const isVisible = (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.visible) != null ? _b2 : true;
-        const persistedIndex = prev.findIndex((col) => col.id === columnId);
-        if (persistedIndex !== -1) {
-          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
-            visible: isVisible
-          });
-        }
-      });
-      return [...prev];
-    }, true);
-  }, [columns, setTableColumns]);
+    resetToDefaults();
+  }, [resetToDefaults]);
   (0, import_react14.useEffect)(() => {
     updateColumnVisibility(true);
   }, [updateColumnVisibility]);
@@ -3101,14 +3362,18 @@ function DataGrid({
   const toggleColumnVisibility = (0, import_react14.useCallback)(
     (columnId, isVisible) => {
       setTableColumns((prev) => {
-        const persistedIndex = prev.findIndex((col) => col.id === columnId);
-        if (persistedIndex !== -1) {
-          prev[persistedIndex].meta = __spreadProps(__spreadValues({}, prev[persistedIndex].meta), {
-            visible: isVisible
-          });
-        }
-        return [...prev];
-      }, true);
+        const newColumns = prev.map((col) => {
+          if (col.id === columnId) {
+            return __spreadProps(__spreadValues({}, col), {
+              meta: __spreadProps(__spreadValues({}, col.meta), {
+                visible: isVisible
+              })
+            });
+          }
+          return col;
+        });
+        return newColumns;
+      });
     },
     [setTableColumns]
   );
@@ -3880,7 +4145,8 @@ var Button = (_a) => {
     href,
     id,
     testid,
-    isLoading
+    isLoading,
+    fontNormal = false
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -3896,7 +4162,8 @@ var Button = (_a) => {
     "href",
     "id",
     "testid",
-    "isLoading"
+    "isLoading",
+    "fontNormal"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx17.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -3923,6 +4190,15 @@ var Button = (_a) => {
     "active:bg-background-action-secondary-active active:border-transparent active:text-text-action-primary-active",
     "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
   );
+  const quarternaryOutlinedVariantStyles = variant === "quarternary-outlined" && (0, import_clsx17.default)(
+    "bg-transparent border-transparent",
+    iconOnly ? (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-icon-action-primary-normal" : (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-primary-normal",
+    "bg-transparent border-transparent",
+    "hover:bg-transparent hover:border-border-primary-normal hover:text-text-primary-normal",
+    "focus:bg-transparent focus:border-border-primary-normal focus:text-text-primary-normal focus:outline-0",
+    "active:bg-transparent active:border-transparent active:text-text-primary-active",
+    "disabled:bg-transparent disabled:border-transparent disabled:text-text-action-primary-disabled"
+  );
   const primaryCriticalVariantStyles = variant === "primary-critical" && (0, import_clsx17.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
     "bg-background-action-critical-primary-normal border-background-action-critical-primary-normal",
@@ -3966,6 +4242,7 @@ var Button = (_a) => {
     primaryVariantStyles,
     secondaryVariantStyles,
     tertiaryVariantStyles,
+    quarternaryOutlinedVariantStyles,
     primaryCriticalVariantStyles,
     secondaryCriticalVariantStyles,
     tertiaryCriticalVariantStyles,
@@ -3976,6 +4253,7 @@ var Button = (_a) => {
   const labelClasses = (0, import_clsx17.default)(
     "min-h-6 flex items-center justify-center",
     classNameLabel,
+    fontNormal && "font-normal!",
     componentPaddingXUsingComponentGap,
     typography.buttonLabel
   );
@@ -5081,7 +5359,8 @@ var ModalHeader = ({
       id,
       "data-testid": testid,
       className: (0, import_clsx25.default)(
-        "flex justify-between items-center",
+        "flex items-center",
+        headerIconAlign === void 0 && "justify-between",
         headerIconAlign === "center" && "justify-center",
         headerIconAlign === "right" && "justify-end",
         headerIconAlign === "left" && "justify-start",
@@ -5912,7 +6191,7 @@ var import_react37 = require("react");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 
 // src/components/EmblaCarousel/index.tsx
-var import_react40 = require("react");
+var import_react40 = __toESM(require("react"), 1);
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
 var import_embla_carousel_autoplay = __toESM(require("embla-carousel-autoplay"), 1);