impact-ui 5.0.1 → 5.0.2

package/dist/components/TableV36/tableFunctions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tableFunctions.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/tableFunctions.tsx"],"names":[],"mappings":"AA4DA,eAAO,MAAM,oBAAoB,GAAI,WAAM,SAQ1C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,QAAG,QAM/B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,WAAM,EAAE,aAAQ,SAK5C,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,WAAM,SAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,eAAU,EAAE,WAAM,EAAE,QAAG,SAM/C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,WAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4ItC,CAAC;AAuhBF,eAAO,MAAM,OAAO,mFA03ClB,CAAC;AACH,eAAO,MAAM,yBAAyB,GAAI,iBAAY,WAgBrD,CAAC"}
+{"version":3,"file":"tableFunctions.d.ts","sourceRoot":"","sources":["../../../src/components/TableV36/tableFunctions.tsx"],"names":[],"mappings":"AA8DA,eAAO,MAAM,oBAAoB,GAAI,WAAM,SAQ1C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,QAAG,QAM/B,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,WAAM,EAAE,aAAQ,SAK5C,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,WAAM,SAM9C,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,eAAU,EAAE,WAAM,EAAE,QAAG,SAM/C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,WAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA4ItC,CAAC;AA+kBF,eAAO,MAAM,OAAO,mFA+4ClB,CAAC;AACH,eAAO,MAAM,yBAAyB,GAAI,iBAAY,WAgBrD,CAAC"}

package/dist/components/TableV36/tableFunctions.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useMemo, useEffect, useCallback, memo } from "react";
-import { useSensors, useSensor, MouseSensor, TouchSensor, DndContext, closestCenter, DragOverlay } from "@dnd-kit/core";
+import { useSensors, useSensor, MouseSensor, TouchSensor, DndContext, closestCenter, DragOverlay, useDroppable } from "@dnd-kit/core";
 import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { PersonUser as PersonUser_default, Globe as Globe_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
+import { PersonUser as PersonUser_default, Globe as Globe_default, PinnedIcon as PinnedIcon_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
 import default_1$1 from "../../node_modules/@mui/icons-material/KeyboardArrowDown.js";
 import default_1$3 from "../../node_modules/@mui/icons-material/KeyboardArrowRight.js";
 import default_1 from "../../node_modules/@mui/icons-material/KeyboardArrowUp.js";
@@ -23,6 +23,7 @@ import HighlightedText from "./HighlightedText.js";
 import { collectVisibleLeafIds, syncColumnSearchTextToGrid, ensureColumnGroupsExpanded } from "./tableUtils.js";
 import IconButton from "../../node_modules/@mui/material/IconButton/IconButton.js";
 import DragIndicator from "../../node_modules/@mui/icons-material/esm/DragIndicator.js";
+import { useTranslation } from "../../i18n/useTranslation.js";
 const saveViewIcon = getAssetUrl("icons/saveViewIcon.svg");
 const saveViewEditIcon = getAssetUrl("icons/saveViewEditIcon.svg");
 const saveViewDeleteIcon = getAssetUrl("icons/saveViewDeleteIcon.svg");
@@ -392,6 +393,33 @@ const applyVisibilityMapToGrid = (api, visibilityMap) => {
 const capitalizeHeader = (name) => name ? name.charAt(0).toUpperCase() + name.slice(1) : "";
 const mouseSensorOptions = { activationConstraint: { distance: 5 } };
 const touchSensorOptions = { activationConstraint: { delay: 200, tolerance: 5 } };
+const FROZEN_DROP_ZONE_ID = "frozen-drop-zone";
+const FrozenColumnsDropZone = () => {
+  const { t } = useTranslation();
+  const { setNodeRef } = useDroppable({ id: FROZEN_DROP_ZONE_ID });
+  return /* @__PURE__ */ jsx("div", { ref: setNodeRef, className: "table-setting-frozen-drop-zone", children: /* @__PURE__ */ jsx("span", { children: t("table.columns.dragHereToFreeze") }) });
+};
+const hasFrozenColumns = (columns) => columns.length > 0 && !(columns.length === 1 && columns[0].headerName === "N/A");
+const PinSideToggle = ({ pinned, onToggle }) => {
+  const isRight = pinned === "right";
+  return /* @__PURE__ */ jsxs("div", { className: "table-setting-pin-side-toggle", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `table-setting-pin-side-label${isRight ? "" : " is-active"}`, children: "L" }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": isRight ? "Pin right" : "Pin left",
+        className: `table-setting-pin-side-track${isRight ? " is-right" : ""}`,
+        onClick: (e) => {
+          e.stopPropagation();
+          onToggle == null ? void 0 : onToggle(isRight ? "left" : "right");
+        },
+        children: /* @__PURE__ */ jsx("span", { className: "table-setting-pin-side-thumb", children: /* @__PURE__ */ jsx(PinnedIcon_default, {}) })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `table-setting-pin-side-label${isRight ? " is-active" : ""}`, children: "R" })
+  ] });
+};
 const ColumnRowContent = memo(function ColumnRowContent2({
   column,
   level,
@@ -407,8 +435,10 @@ const ColumnRowContent = memo(function ColumnRowContent2({
   onKeyboardReorder,
   dragHandleProps,
   isOverlay,
-  searchText
+  searchText,
+  onTogglePinSide
 }) {
+  const isFrozen = rowClassName == null ? void 0 : rowClassName.includes("frozen-columns-list-item");
   const rowStyle = useMemo(
     () => ({
       ["--indent-level"]: level
@@ -536,12 +566,19 @@ const ColumnRowContent = memo(function ColumnRowContent2({
               text: capitalizeHeader(column.headerName)
             }
           )
-        ] })
+        ] }),
+        isFrozen && !isOverlay && /* @__PURE__ */ jsx(
+          PinSideToggle,
+          {
+            pinned: column.pinned,
+            onToggle: (side) => onTogglePinSide == null ? void 0 : onTogglePinSide(column.colId, side)
+          }
+        )
       ]
     }
   );
 });
-const areSortablePropsEqual = (prev, next) => prev.column.colId === next.column.colId && prev.column.isVisible === next.column.isVisible && prev.column.headerName === next.column.headerName && prev.column.disabled === next.column.disabled && prev.isIndeterminate === next.isIndeterminate && prev.checkboxChecked === next.checkboxChecked && prev.reserveCollapseSlot === next.reserveCollapseSlot && prev.level === next.level && prev.isCollapsed === next.isCollapsed && prev.hasChildren === next.hasChildren && prev.rowClassName === next.rowClassName && prev.dragIconClass === next.dragIconClass && prev.onToggleCollapse === next.onToggleCollapse && prev.onToggleVisibility === next.onToggleVisibility && prev.onKeyboardReorder === next.onKeyboardReorder && prev.searchText === next.searchText && prev.children === next.children;
+const areSortablePropsEqual = (prev, next) => prev.column.colId === next.column.colId && prev.column.isVisible === next.column.isVisible && prev.column.headerName === next.column.headerName && prev.column.disabled === next.column.disabled && prev.column.pinned === next.column.pinned && prev.isIndeterminate === next.isIndeterminate && prev.checkboxChecked === next.checkboxChecked && prev.reserveCollapseSlot === next.reserveCollapseSlot && prev.level === next.level && prev.isCollapsed === next.isCollapsed && prev.hasChildren === next.hasChildren && prev.rowClassName === next.rowClassName && prev.dragIconClass === next.dragIconClass && prev.onToggleCollapse === next.onToggleCollapse && prev.onToggleVisibility === next.onToggleVisibility && prev.onTogglePinSide === next.onTogglePinSide && prev.onKeyboardReorder === next.onKeyboardReorder && prev.searchText === next.searchText && prev.children === next.children;
 const SortableColumnItem = memo(function SortableColumnItem2({
   column,
   level,
@@ -556,7 +593,8 @@ const SortableColumnItem = memo(function SortableColumnItem2({
   onToggleVisibility,
   onKeyboardReorder,
   searchText,
-  children
+  children,
+  onTogglePinSide
 }) {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: column.colId
@@ -594,7 +632,8 @@ const SortableColumnItem = memo(function SortableColumnItem2({
             searchText,
             onKeyboardReorder,
             onToggleCollapse,
-            onToggleVisibility
+            onToggleVisibility,
+            onTogglePinSide
           }
         ),
         hasChildren && !isCollapsed && children
@@ -615,7 +654,8 @@ const NestedColumnItem = memo(function NestedColumnItem2({
   onToggleCollapse,
   onToggleVisibility,
   searchText,
-  children
+  children,
+  onTogglePinSide
 }) {
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
@@ -632,7 +672,8 @@ const NestedColumnItem = memo(function NestedColumnItem2({
         rowClassName,
         searchText,
         onToggleCollapse,
-        onToggleVisibility
+        onToggleVisibility,
+        onTogglePinSide
       }
     ),
     hasChildren && !isCollapsed && children
@@ -847,7 +888,8 @@ const Columns = forwardRef((props, ref) => {
         colId: column.colId || column.field || column.headerName,
         headerName: column.headerName || column.field || "N/A",
         isVisible: !(column == null ? void 0 : column.hide),
-        isPinned: column.pinned ? true : false,
+        isPinned: !!column.pinned,
+        pinned: column.pinned === "right" ? "right" : column.pinned ? "left" : null,
         children: ((_a3 = column == null ? void 0 : column.children) == null ? void 0 : _a3.length) > 0 ? getColumnState(column.children) : null,
         disabled: column == null ? void 0 : column.disableColumnCheckboxInSettings
       };
@@ -1085,13 +1127,14 @@ const Columns = forwardRef((props, ref) => {
         isDraggingRef.current = false;
         return;
       }
-      const isFrozenTarget = fullFrozenOrder.includes(overId) || frozenColumnOrder.includes(overId);
+      const isFrozenDropZone = overId === FROZEN_DROP_ZONE_ID;
+      const isFrozenTarget = isFrozenDropZone || fullFrozenOrder.includes(overId) || frozenColumnOrder.includes(overId);
       const isScrollableTarget = fullScrollableOrder.includes(overId) || scrollableColumnOrder.includes(overId);
       const visibleScrollable = scrollableColumnOrder.length ? scrollableColumnOrder : fullScrollableOrder;
       let nextFrozen = [...fullFrozenOrder];
       let nextScrollable = [...fullScrollableOrder];
       let pinChanges = null;
-      if (isFrozenSource && isFrozenTarget) {
+      if (isFrozenSource && isFrozenTarget && !isFrozenDropZone) {
         const oldIndex = nextFrozen.indexOf(activeId);
         const newIndex = nextFrozen.indexOf(overId);
         if (oldIndex === -1 || newIndex === -1) {
@@ -1116,7 +1159,7 @@ const Columns = forwardRef((props, ref) => {
         pinChanges = [{ colId: activeId, pinned: null }];
       } else if (isScrollableSource && isFrozenTarget) {
         nextScrollable = nextScrollable.filter((id) => id !== activeId);
-        const insertAt = !nextFrozen.includes(overId) ? nextFrozen.length : nextFrozen.indexOf(overId);
+        const insertAt = isFrozenDropZone || !nextFrozen.includes(overId) ? nextFrozen.length : nextFrozen.indexOf(overId);
         nextFrozen = [...nextFrozen];
         nextFrozen.splice(insertAt, 0, activeId);
         pinChanges = [{ colId: activeId, pinned: "left" }];
@@ -1181,6 +1224,16 @@ const Columns = forwardRef((props, ref) => {
     },
     [frozenColumn, scrollableColumn, fullFrozenOrder, fullScrollableOrder, commitColumnReorder]
   );
+  const handleTogglePinSide = useCallback(
+    (colId, pinned) => {
+      commitColumnReorder({
+        frozenOrder: fullFrozenOrder,
+        scrollableOrder: fullScrollableOrder,
+        pinChanges: [{ colId, pinned }]
+      });
+    },
+    [commitColumnReorder, fullFrozenOrder, fullScrollableOrder]
+  );
   const renderColumnRow = useCallback(
     (column, level, section) => {
       const isFrozen = section === "frozen";
@@ -1215,6 +1268,7 @@ const Columns = forwardRef((props, ref) => {
             onKeyboardReorder: handleKeyboardReorder,
             onToggleCollapse,
             onToggleVisibility,
+            onTogglePinSide: isFrozen ? handleTogglePinSide : void 0,
             children: childNodes
           },
           column.colId
@@ -1235,6 +1289,7 @@ const Columns = forwardRef((props, ref) => {
           searchText: debouncedSearchText,
           onToggleCollapse,
           onToggleVisibility,
+          onTogglePinSide: isFrozen ? handleTogglePinSide : void 0,
           children: childNodes
         },
         column.colId
@@ -1249,7 +1304,8 @@ const Columns = forwardRef((props, ref) => {
       toggleScrollColumnCollapse,
       toggleColumnVisibilityFrozen,
       toggleColumnVisibilityScroll,
-      handleKeyboardReorder
+      handleKeyboardReorder,
+      handleTogglePinSide
     ]
   );
   const handleSaveAndApply = () => {
@@ -1808,9 +1864,9 @@ const Columns = forwardRef((props, ref) => {
             onDragStart: handleDragStart,
             children: [
               /* @__PURE__ */ jsxs(SortableContext, { items: sortableItems, children: [
-                frozenColumn.length > 0 && !(frozenColumn.length === 1 && frozenColumn[0].headerName === "N/A") && /* @__PURE__ */ jsxs("div", { className: "table-setting-collapse-columns-container", children: [
+                /* @__PURE__ */ jsxs("div", { className: "table-setting-collapse-columns-container", children: [
                   /* @__PURE__ */ jsx("h3", { children: "Frozen columns" }),
-                  /* @__PURE__ */ jsx(
+                  hasFrozenColumns(frozenColumn) ? /* @__PURE__ */ jsx(
                     "div",
                     {
                       "aria-label": "Frozen columns",
@@ -1820,7 +1876,7 @@ const Columns = forwardRef((props, ref) => {
                         (column) => column.headerName !== "N/A" && renderColumnRow(column, 0, "frozen")
                       )
                     }
-                  )
+                  ) : /* @__PURE__ */ jsx(FrozenColumnsDropZone, {})
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "table-setting-scroll-columns-container", children: [
                   /* @__PURE__ */ jsx("h3", { children: "Scrollable Columns" }),

package/dist/locales/de-DE.json.d.ts

@@ -183,6 +183,7 @@ declare const _default: {
 
   "table.columns.na": "N/A",
   "table.columns.frozen": "Fixierte Spalten",
+  "table.columns.dragHereToFreeze": "Zum Fixieren hierher ziehen",
   "table.columns.scrollable": "Scrollbare Spalten",
   "table.columns.main": "Hauptspalte",
   "table.columns.expandColumns": "Spalten einblenden",

package/dist/locales/de-DE.json.js

@@ -167,6 +167,7 @@ const deDE = {
   "table.menu.largeFont": "Groß",
   "table.columns.na": "N/A",
   "table.columns.frozen": "Fixierte Spalten",
+  "table.columns.dragHereToFreeze": "Zum Fixieren hierher ziehen",
   "table.columns.scrollable": "Scrollbare Spalten",
   "table.columns.main": "Hauptspalte",
   "table.columns.expandColumns": "Spalten einblenden",

package/dist/locales/en-US.json.d.ts

@@ -183,6 +183,7 @@ declare const _default: {
 
   "table.columns.na": "N/A",
   "table.columns.frozen": "Frozen columns",
+  "table.columns.dragHereToFreeze": "Drag here to freeze",
   "table.columns.scrollable": "Scrollable Columns",
   "table.columns.main": "Main Column",
   "table.columns.expandColumns": "Expand columns",

package/dist/locales/en-US.json.js

@@ -167,6 +167,7 @@ const enUS = {
   "table.menu.largeFont": "Large Font",
   "table.columns.na": "N/A",
   "table.columns.frozen": "Frozen columns",
+  "table.columns.dragHereToFreeze": "Drag here to freeze",
   "table.columns.scrollable": "Scrollable Columns",
   "table.columns.main": "Main Column",
   "table.columns.expandColumns": "Expand columns",

package/dist/locales/es-ES.json.d.ts

@@ -183,6 +183,7 @@ declare const _default: {
 
   "table.columns.na": "N/D",
   "table.columns.frozen": "Columnas fijadas",
+  "table.columns.dragHereToFreeze": "Arrastra aquí para fijar",
   "table.columns.scrollable": "Columnas desplazables",
   "table.columns.main": "Columna principal",
   "table.columns.expandColumns": "Expandir columnas",

package/dist/locales/es-ES.json.js

@@ -167,6 +167,7 @@ const esES = {
   "table.menu.largeFont": "Fuente grande",
   "table.columns.na": "N/D",
   "table.columns.frozen": "Columnas fijadas",
+  "table.columns.dragHereToFreeze": "Arrastra aquí para fijar",
   "table.columns.scrollable": "Columnas desplazables",
   "table.columns.main": "Columna principal",
   "table.columns.expandColumns": "Expandir columnas",

package/dist/mcp-component-registry.json

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "generatedAt": "2026-10-14T15:53:17.881Z",
+  "generatedAt": "2026-10-26T13:42:19.203Z",
   "components": {
     "Menu": {
       "title": "Components/Menu",
@@ -717,6 +717,12 @@
           "description": "Array of breadcrumb items to display in the navigation path",
           "type": "Array<BreadcrumbItem>",
           "required": true
+        },
+        "showAllItems": {
+          "description": "When true, shows all breadcrumb labels with no",
+          "type": "boolean",
+          "defaultValue": "false",
+          "required": false
         }
       },
       "storyArgs": {
@@ -5916,7 +5922,6 @@
       },
       "storyArgs": {
         "Default": {
-          "tableHeader": "Table",
           "cardContainer": true,
           "emptyStateText": "No data to display",
           "rowData": "carsData",
@@ -5966,6 +5971,7 @@
           "viewPoint": "list",
           "suppressRowClickSelection": true,
           "suppressColumnMenu": true,
+          "loading": true,
           "defaultColDef": "{",
           "maxWidth": 120
         },