@teselagen/ui 0.10.9 → 0.10.11

package/AdvancedOptions.d.ts

@@ -1,7 +1,8 @@
-export default function AdvancedOptions({ children, content, label, style, isOpenByDefault }: {
+export default function AdvancedOptions({ children, content, label, style, isOpenByDefault, localStorageKey }: {
     children: any;
     content: any;
     label: any;
     style: any;
     isOpenByDefault: any;
+    localStorageKey: any;
 }): import("react/jsx-runtime").JSX.Element | null;

package/DataTable/Columns.d.ts

@@ -1,10 +1,11 @@
-export function useColumns({ addFilters, cellRenderer, columns, resetDefaultVisibility, currentParams, compact, editingCell, editingCellSelectAll, entities, expandedEntityIdMap, extraCompact, filters, formName, getCellHoverText, isCellEditable, isEntityDisabled, isLocalCall, isSimple, isSingleSelect, isSelectionARectangle, noDeselectAll, noSelect, noUserSelect, onDeselect, onMultiRowSelect, onRowClick, onRowSelect, onSingleRowSelect, order, primarySelectedCellId, reduxFormCellValidation, reduxFormSelectedEntityIdMap, refocusTable, removeSingleFilter, schema, selectedCells, setExpandedEntityIdMap, setNewParams, updateColumnVisibility, setOrder, setSelectedCells, shouldShowSubComponent, startCellEdit, SubComponent, tableRef, updateEntitiesHelper, updateValidation, withCheckboxes, withExpandAndCollapseAllButton, withFilter: _withFilter, withSort, recordIdToIsVisibleMap, setRecordIdToIsVisibleMap, withDisplayOptions }: {
+export function useColumns({ addFilters, cellRenderer, columns, resetDefaultVisibility, currentParams, compact, hideExpandSubCompColumn, editingCell, editingCellSelectAll, entities, expandedEntityIdMap, extraCompact, filters, formName, getCellHoverText, isCellEditable, isEntityDisabled, isLocalCall, isSimple, isSingleSelect, isSelectionARectangle, noDeselectAll, noSelect, noUserSelect, onDeselect, onMultiRowSelect, onRowClick, onRowSelect, onSingleRowSelect, order, primarySelectedCellId, reduxFormCellValidation, reduxFormSelectedEntityIdMap, refocusTable, removeSingleFilter, schema, selectedCells, setExpandedEntityIdMap, setNewParams, updateColumnVisibility, setOrder, setSelectedCells, shouldShowSubComponent, startCellEdit, SubComponent, tableRef, updateEntitiesHelper, updateValidation, withCheckboxes, withExpandAndCollapseAllButton, withFilter: _withFilter, withSort, recordIdToIsVisibleMap, setRecordIdToIsVisibleMap, withDisplayOptions, getCheckboxGroupId }: {
     addFilters: any;
     cellRenderer: any;
     columns: any;
     resetDefaultVisibility: any;
     currentParams: any;
     compact: any;
+    hideExpandSubCompColumn: any;
     editingCell: any;
     editingCellSelectAll: any;
     entities: any;
@@ -53,4 +54,5 @@ export function useColumns({ addFilters, cellRenderer, columns, resetDefaultVisi
     recordIdToIsVisibleMap: any;
     setRecordIdToIsVisibleMap: any;
     withDisplayOptions: any;
+    getCheckboxGroupId: any;
 }): any;

package/DataTable/utils/rowClick.d.ts

@@ -1,4 +1,4 @@
-export default function rowClick(e: any, rowInfo: any, entities: any, { reduxFormSelectedEntityIdMap, isSingleSelect, noSelect, onRowClick, isEntityDisabled, withCheckboxes, onDeselect, onSingleRowSelect, onMultiRowSelect, noDeselectAll, onRowSelect, change }: {
+export default function rowClick(e: any, rowInfo: any, entities: any, { reduxFormSelectedEntityIdMap, isSingleSelect, noSelect, onRowClick, isEntityDisabled, withCheckboxes, onDeselect, onSingleRowSelect, onMultiRowSelect, noDeselectAll, onRowSelect, change, getCheckboxGroupId }: {
     reduxFormSelectedEntityIdMap: any;
     isSingleSelect: any;
     noSelect: any;
@@ -11,6 +11,7 @@ export default function rowClick(e: any, rowInfo: any, entities: any, { reduxFor
     noDeselectAll: any;
     onRowSelect: any;
     change: any;
+    getCheckboxGroupId: any;
 }): void;
 export function changeSelectedEntities({ idMap, entities, change }: {
     idMap: any;

package/index.cjs.js

@@ -17158,7 +17158,8 @@ function rowClick(e, rowInfo, entities, {
   onMultiRowSelect,
   noDeselectAll,
   onRowSelect,
-  change
+  change,
+  getCheckboxGroupId
 }) {
   const entity = rowInfo.original;
   onRowClick(e, entity, rowInfo);
@@ -17230,6 +17231,38 @@ function rowClick(e, rowInfo, entities, {
       }
     }
   }
+  if (getCheckboxGroupId) {
+    const clickedRowId = rowId;
+    const clickedEntity = entity;
+    const clickedGroupId = getCheckboxGroupId(clickedEntity, rowInfo.index);
+    if (!newIdMap[clickedRowId] && clickedGroupId) {
+      entities.forEach((e2, i2) => {
+        if (getCheckboxGroupId(e2, i2) === clickedGroupId) {
+          const id = getIdOrCodeOrIndex(e2, i2);
+          delete newIdMap[id];
+        }
+      });
+    }
+    const selectedGroupIds = /* @__PURE__ */ new Set();
+    entities.forEach((e2, i2) => {
+      const id = getIdOrCodeOrIndex(e2, i2);
+      if (newIdMap[id]) {
+        const gid = getCheckboxGroupId(e2, i2);
+        if (gid) selectedGroupIds.add(gid);
+      }
+    });
+    if (selectedGroupIds.size > 0) {
+      entities.forEach((e2, i2) => {
+        const gid = getCheckboxGroupId(e2, i2);
+        if (gid && selectedGroupIds.has(gid)) {
+          const id = getIdOrCodeOrIndex(e2, i2);
+          if (!newIdMap[id]) {
+            newIdMap[id] = { entity: e2, time: Date.now() };
+          }
+        }
+      });
+    }
+  }
   finalizeSelection({
     idMap: newIdMap,
     entities,
@@ -52189,6 +52222,7 @@ const useColumns = /* @__PURE__ */ __name(({
   resetDefaultVisibility,
   currentParams,
   compact,
+  hideExpandSubCompColumn,
   editingCell,
   editingCellSelectAll,
   entities,
@@ -52236,7 +52270,8 @@ const useColumns = /* @__PURE__ */ __name(({
   withSort = true,
   recordIdToIsVisibleMap,
   setRecordIdToIsVisibleMap,
-  withDisplayOptions
+  withDisplayOptions,
+  getCheckboxGroupId
 }) => {
   const dispatch = reactRedux.useDispatch();
   const change = React.useCallback(
@@ -52484,6 +52519,14 @@ const useColumns = /* @__PURE__ */ __name(({
         return /* @__PURE__ */ React.createElement("div", null);
       }
       const entity = entities[rowIndex];
+      if (getCheckboxGroupId) {
+        const currentGroupId = getCheckboxGroupId(entity, rowIndex);
+        const previousEntity = entities[rowIndex - 1];
+        const previousGroupId = previousEntity ? getCheckboxGroupId(previousEntity, rowIndex - 1) : void 0;
+        if (currentGroupId && currentGroupId === previousGroupId) {
+          return /* @__PURE__ */ React.createElement("div", null);
+        }
+      }
       return /* @__PURE__ */ React.createElement(
         core.Checkbox,
         {
@@ -52502,7 +52545,8 @@ const useColumns = /* @__PURE__ */ __name(({
               onMultiRowSelect,
               noDeselectAll,
               onRowSelect,
-              change
+              change,
+              getCheckboxGroupId
             });
           }, "onClick"),
           checked: isSelected
@@ -52523,7 +52567,8 @@ const useColumns = /* @__PURE__ */ __name(({
       onRowSelect,
       onSingleRowSelect,
       reduxFormSelectedEntityIdMap,
-      withCheckboxes
+      withCheckboxes,
+      getCheckboxGroupId
     ]
   );
   const finishCellEdit = React.useCallback(
@@ -52598,13 +52643,14 @@ const useColumns = /* @__PURE__ */ __name(({
         );
       }, "Header")
     }), {
+      show: !hideExpandSubCompColumn,
       expander: true,
       Expander: /* @__PURE__ */ __name(({ isExpanded, original: record }) => {
         let shouldShow = true;
         if (shouldShowSubComponent) {
           shouldShow = shouldShowSubComponent(record);
         }
-        if (!shouldShow) return null;
+        if (!shouldShow || hideExpandSubCompColumn) return null;
         return /* @__PURE__ */ React.createElement(
           core.Button,
           {
@@ -56955,7 +57001,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
       entities: normalizedEntities
     });
   }
-  const convertedSchema = React.useMemo(() => convertSchema(_schema), [_schema]);
+  const __schema = useDeepEqualMemo(_schema);
+  const convertedSchema = React.useMemo(() => convertSchema(__schema), [__schema]);
   if (isLocalCall) {
     if (!noForm && (!formName || formName === "tgDataTable")) {
       throw new Error(
@@ -57145,6 +57192,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     minimalStyle,
     mustClickCheckboxToSelect,
     noDeselectAll,
+    hideExpandSubCompColumn,
     noFooter = isSimple ? !withPaging : false,
     noFullscreenButton = isSimple,
     noHeader = false,
@@ -57192,7 +57240,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     withSort,
     withTitle = !isSimple,
     noExcessiveCheck,
-    isEntityCountLoading
+    isEntityCountLoading,
+    getCheckboxGroupId
   } = props;
   const _entities = React.useMemo(
     () => ((reduxFormEntities == null ? void 0 : reduxFormEntities.length) ? reduxFormEntities : _origEntities) || [],
@@ -58729,6 +58778,15 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
       const isExpanded = expandedEntityIdMap[rowId];
       const rowDisabled = isEntityDisabled(entity);
       const dataId = entity.id || entity.code;
+      let noGroupBorder = false;
+      if (getCheckboxGroupId) {
+        const currentGroupId = getCheckboxGroupId(entity, rowInfo.index);
+        const nextEntity = entities[rowInfo.index + 1];
+        const nextGroupId = nextEntity ? getCheckboxGroupId(nextEntity, rowInfo.index + 1) : void 0;
+        if (currentGroupId && currentGroupId === nextGroupId) {
+          noGroupBorder = true;
+        }
+      }
       return {
         onClick: /* @__PURE__ */ __name((e) => {
           if (isCellEditable) return;
@@ -58755,7 +58813,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
             onMultiRowSelect,
             noDeselectAll,
             onRowSelect,
-            change
+            change,
+            getCheckboxGroupId
           });
         }, "onClick"),
         //row right click
@@ -58797,9 +58856,11 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
           {
             disabled: rowDisabled,
             selected: rowSelected && !withCheckboxes,
-            "rt-tr-last-row": rowInfo.index === entities.length - 1
+            "rt-tr-last-row": rowInfo.index === entities.length - 1,
+            "no-group-border": noGroupBorder
           }
         ),
+        "data-test-selected": !!rowSelected,
         "data-test-id": dataId === void 0 ? rowInfo.index : dataId,
         "data-index": rowInfo.index,
         "data-tip": typeof rowDisabled === "string" ? rowDisabled : void 0,
@@ -58830,7 +58891,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
       reduxFormSelectedEntityIdMap,
       selectedCells,
       showContextMenu2,
-      withCheckboxes
+      withCheckboxes,
+      getCheckboxGroupId
     ]
   );
   const getTableCellProps = React.useCallback(
@@ -59143,6 +59205,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     isSingleSelect,
     isSelectionARectangle,
     noDeselectAll,
+    hideExpandSubCompColumn,
     noSelect,
     noUserSelect,
     onDeselect,
@@ -59174,6 +59237,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     withFilter,
     withSort,
     recordIdToIsVisibleMap,
+    getCheckboxGroupId,
     setRecordIdToIsVisibleMap
   });
   const scrollToTop = React.useCallback(
@@ -67313,9 +67377,19 @@ function AdvancedOptions({
   content: content2,
   label,
   style,
-  isOpenByDefault
+  isOpenByDefault,
+  localStorageKey
 }) {
-  const [isOpen, setOpen] = React.useState(isOpenByDefault);
+  const [isOpen, setOpen] = React.useState(() => {
+    if (localStorageKey) {
+      if (window.localStorage.getItem(localStorageKey) === "true") {
+        return true;
+      } else if (window.localStorage.getItem(localStorageKey) === "false") {
+        return false;
+      }
+    }
+    return isOpenByDefault;
+  });
   if (!(content2 || children)) {
     return null;
   }
@@ -67323,20 +67397,28 @@ function AdvancedOptions({
     "div",
     {
       onClick: /* @__PURE__ */ __name(() => {
-        setOpen(!isOpen);
+        const newIsOpen = !isOpen;
+        setOpen(newIsOpen);
+        if (localStorageKey) {
+          window.localStorage.setItem(localStorageKey, newIsOpen);
+        }
       }, "onClick"),
-      style: { cursor: "pointer", display: "flex", alignItems: "flex-end" },
-      className: "tg-toggle-advanced-options"
+      style: {
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        userSelect: "none"
+      },
+      className: `tg-toggle-advanced-options`
     },
-    label || "Advanced",
-    " ",
     /* @__PURE__ */ React.createElement(
       core.Icon,
       {
         icon: isOpen ? "caret-down" : "caret-right",
-        style: { marginLeft: 5 }
+        style: { marginRight: 5 }
       }
-    )
+    ),
+    /* @__PURE__ */ React.createElement("strong", null, label || "Advanced")
   ), isOpen && /* @__PURE__ */ React.createElement("div", { style: { marginTop: 10 } }, content2 || children));
 }
 __name(AdvancedOptions, "AdvancedOptions");
@@ -70971,6 +71053,7 @@ const _ResizableDraggableDialog = class _ResizableDraggableDialog extends React.
             topLeft: true,
             topRight: true
           },
+          resizeHandleWrapperClass: "tg-dialog-resize-handle",
           maxHeight: windowHeight,
           maxWidth: windowWidth,
           bounds: "window",
@@ -70989,12 +71072,14 @@ const _ResizableDraggableDialog = class _ResizableDraggableDialog extends React.
         }, RndProps),
         /* @__PURE__ */ React.createElement(
           core.Dialog,
-          __spreadValues({
+          __spreadProps(__spreadValues({
             enforceFocus: false,
             hasBackdrop: false,
             usePortal: false,
             canEscapeKeyClose: true
-          }, rest)
+          }, rest), {
+            title: /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React.createElement(core.Icon, { size: "14", "data-tip": "I'm a resizable draggable dialog!", icon: "move" }), rest.title)
+          })
         )
       )
     );

package/index.es.js

@@ -17140,7 +17140,8 @@ function rowClick(e, rowInfo, entities, {
   onMultiRowSelect,
   noDeselectAll,
   onRowSelect,
-  change: change2
+  change: change2,
+  getCheckboxGroupId
 }) {
   const entity = rowInfo.original;
   onRowClick(e, entity, rowInfo);
@@ -17212,6 +17213,38 @@ function rowClick(e, rowInfo, entities, {
       }
     }
   }
+  if (getCheckboxGroupId) {
+    const clickedRowId = rowId;
+    const clickedEntity = entity;
+    const clickedGroupId = getCheckboxGroupId(clickedEntity, rowInfo.index);
+    if (!newIdMap[clickedRowId] && clickedGroupId) {
+      entities.forEach((e2, i2) => {
+        if (getCheckboxGroupId(e2, i2) === clickedGroupId) {
+          const id = getIdOrCodeOrIndex(e2, i2);
+          delete newIdMap[id];
+        }
+      });
+    }
+    const selectedGroupIds = /* @__PURE__ */ new Set();
+    entities.forEach((e2, i2) => {
+      const id = getIdOrCodeOrIndex(e2, i2);
+      if (newIdMap[id]) {
+        const gid = getCheckboxGroupId(e2, i2);
+        if (gid) selectedGroupIds.add(gid);
+      }
+    });
+    if (selectedGroupIds.size > 0) {
+      entities.forEach((e2, i2) => {
+        const gid = getCheckboxGroupId(e2, i2);
+        if (gid && selectedGroupIds.has(gid)) {
+          const id = getIdOrCodeOrIndex(e2, i2);
+          if (!newIdMap[id]) {
+            newIdMap[id] = { entity: e2, time: Date.now() };
+          }
+        }
+      });
+    }
+  }
   finalizeSelection({
     idMap: newIdMap,
     entities,
@@ -52171,6 +52204,7 @@ const useColumns = /* @__PURE__ */ __name(({
   resetDefaultVisibility,
   currentParams,
   compact,
+  hideExpandSubCompColumn,
   editingCell,
   editingCellSelectAll,
   entities,
@@ -52218,7 +52252,8 @@ const useColumns = /* @__PURE__ */ __name(({
   withSort = true,
   recordIdToIsVisibleMap,
   setRecordIdToIsVisibleMap,
-  withDisplayOptions
+  withDisplayOptions,
+  getCheckboxGroupId
 }) => {
   const dispatch = useDispatch();
   const change$1 = useCallback(
@@ -52466,6 +52501,14 @@ const useColumns = /* @__PURE__ */ __name(({
         return /* @__PURE__ */ React__default.createElement("div", null);
       }
       const entity = entities[rowIndex];
+      if (getCheckboxGroupId) {
+        const currentGroupId = getCheckboxGroupId(entity, rowIndex);
+        const previousEntity = entities[rowIndex - 1];
+        const previousGroupId = previousEntity ? getCheckboxGroupId(previousEntity, rowIndex - 1) : void 0;
+        if (currentGroupId && currentGroupId === previousGroupId) {
+          return /* @__PURE__ */ React__default.createElement("div", null);
+        }
+      }
       return /* @__PURE__ */ React__default.createElement(
         Checkbox,
         {
@@ -52484,7 +52527,8 @@ const useColumns = /* @__PURE__ */ __name(({
               onMultiRowSelect,
               noDeselectAll,
               onRowSelect,
-              change: change$1
+              change: change$1,
+              getCheckboxGroupId
             });
           }, "onClick"),
           checked: isSelected
@@ -52505,7 +52549,8 @@ const useColumns = /* @__PURE__ */ __name(({
       onRowSelect,
       onSingleRowSelect,
       reduxFormSelectedEntityIdMap,
-      withCheckboxes
+      withCheckboxes,
+      getCheckboxGroupId
     ]
   );
   const finishCellEdit = useCallback(
@@ -52580,13 +52625,14 @@ const useColumns = /* @__PURE__ */ __name(({
         );
       }, "Header")
     }), {
+      show: !hideExpandSubCompColumn,
       expander: true,
       Expander: /* @__PURE__ */ __name(({ isExpanded, original: record }) => {
         let shouldShow = true;
         if (shouldShowSubComponent) {
           shouldShow = shouldShowSubComponent(record);
         }
-        if (!shouldShow) return null;
+        if (!shouldShow || hideExpandSubCompColumn) return null;
         return /* @__PURE__ */ React__default.createElement(
           Button,
           {
@@ -56937,7 +56983,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
       entities: normalizedEntities
     });
   }
-  const convertedSchema = useMemo(() => convertSchema(_schema), [_schema]);
+  const __schema = useDeepEqualMemo(_schema);
+  const convertedSchema = useMemo(() => convertSchema(__schema), [__schema]);
   if (isLocalCall) {
     if (!noForm && (!formName || formName === "tgDataTable")) {
       throw new Error(
@@ -57127,6 +57174,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     minimalStyle,
     mustClickCheckboxToSelect,
     noDeselectAll,
+    hideExpandSubCompColumn,
     noFooter = isSimple ? !withPaging : false,
     noFullscreenButton = isSimple,
     noHeader = false,
@@ -57174,7 +57222,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     withSort,
     withTitle = !isSimple,
     noExcessiveCheck,
-    isEntityCountLoading
+    isEntityCountLoading,
+    getCheckboxGroupId
   } = props;
   const _entities = useMemo(
     () => ((reduxFormEntities == null ? void 0 : reduxFormEntities.length) ? reduxFormEntities : _origEntities) || [],
@@ -58711,6 +58760,15 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
       const isExpanded = expandedEntityIdMap[rowId];
       const rowDisabled = isEntityDisabled(entity);
       const dataId = entity.id || entity.code;
+      let noGroupBorder = false;
+      if (getCheckboxGroupId) {
+        const currentGroupId = getCheckboxGroupId(entity, rowInfo.index);
+        const nextEntity = entities[rowInfo.index + 1];
+        const nextGroupId = nextEntity ? getCheckboxGroupId(nextEntity, rowInfo.index + 1) : void 0;
+        if (currentGroupId && currentGroupId === nextGroupId) {
+          noGroupBorder = true;
+        }
+      }
       return {
         onClick: /* @__PURE__ */ __name((e) => {
           if (isCellEditable) return;
@@ -58737,7 +58795,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
             onMultiRowSelect,
             noDeselectAll,
             onRowSelect,
-            change: change$1
+            change: change$1,
+            getCheckboxGroupId
           });
         }, "onClick"),
         //row right click
@@ -58779,9 +58838,11 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
           {
             disabled: rowDisabled,
             selected: rowSelected && !withCheckboxes,
-            "rt-tr-last-row": rowInfo.index === entities.length - 1
+            "rt-tr-last-row": rowInfo.index === entities.length - 1,
+            "no-group-border": noGroupBorder
           }
         ),
+        "data-test-selected": !!rowSelected,
         "data-test-id": dataId === void 0 ? rowInfo.index : dataId,
         "data-index": rowInfo.index,
         "data-tip": typeof rowDisabled === "string" ? rowDisabled : void 0,
@@ -58812,7 +58873,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
       reduxFormSelectedEntityIdMap,
       selectedCells,
       showContextMenu2,
-      withCheckboxes
+      withCheckboxes,
+      getCheckboxGroupId
     ]
   );
   const getTableCellProps = useCallback(
@@ -59125,6 +59187,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     isSingleSelect,
     isSelectionARectangle,
     noDeselectAll,
+    hideExpandSubCompColumn,
     noSelect,
     noUserSelect,
     onDeselect,
@@ -59156,6 +59219,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     withFilter,
     withSort,
     recordIdToIsVisibleMap,
+    getCheckboxGroupId,
     setRecordIdToIsVisibleMap
   });
   const scrollToTop = useCallback(
@@ -67295,9 +67359,19 @@ function AdvancedOptions({
   content: content2,
   label,
   style,
-  isOpenByDefault
+  isOpenByDefault,
+  localStorageKey
 }) {
-  const [isOpen, setOpen] = useState(isOpenByDefault);
+  const [isOpen, setOpen] = useState(() => {
+    if (localStorageKey) {
+      if (window.localStorage.getItem(localStorageKey) === "true") {
+        return true;
+      } else if (window.localStorage.getItem(localStorageKey) === "false") {
+        return false;
+      }
+    }
+    return isOpenByDefault;
+  });
   if (!(content2 || children)) {
     return null;
   }
@@ -67305,20 +67379,28 @@ function AdvancedOptions({
     "div",
     {
       onClick: /* @__PURE__ */ __name(() => {
-        setOpen(!isOpen);
+        const newIsOpen = !isOpen;
+        setOpen(newIsOpen);
+        if (localStorageKey) {
+          window.localStorage.setItem(localStorageKey, newIsOpen);
+        }
       }, "onClick"),
-      style: { cursor: "pointer", display: "flex", alignItems: "flex-end" },
-      className: "tg-toggle-advanced-options"
+      style: {
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        userSelect: "none"
+      },
+      className: `tg-toggle-advanced-options`
     },
-    label || "Advanced",
-    " ",
     /* @__PURE__ */ React__default.createElement(
       Icon,
       {
         icon: isOpen ? "caret-down" : "caret-right",
-        style: { marginLeft: 5 }
+        style: { marginRight: 5 }
       }
-    )
+    ),
+    /* @__PURE__ */ React__default.createElement("strong", null, label || "Advanced")
   ), isOpen && /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 10 } }, content2 || children));
 }
 __name(AdvancedOptions, "AdvancedOptions");
@@ -70953,6 +71035,7 @@ const _ResizableDraggableDialog = class _ResizableDraggableDialog extends React_
             topLeft: true,
             topRight: true
           },
+          resizeHandleWrapperClass: "tg-dialog-resize-handle",
           maxHeight: windowHeight,
           maxWidth: windowWidth,
           bounds: "window",
@@ -70971,12 +71054,14 @@ const _ResizableDraggableDialog = class _ResizableDraggableDialog extends React_
         }, RndProps),
         /* @__PURE__ */ React__default.createElement(
           Dialog,
-          __spreadValues({
+          __spreadProps(__spreadValues({
             enforceFocus: false,
             hasBackdrop: false,
             usePortal: false,
             canEscapeKeyClose: true
-          }, rest)
+          }, rest), {
+            title: /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } }, /* @__PURE__ */ React__default.createElement(Icon, { size: "14", "data-tip": "I'm a resizable draggable dialog!", icon: "move" }), rest.title)
+          })
         )
       )
     );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.10.9",
+  "version": "0.10.11",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/AdvancedOptions.js

@@ -6,9 +6,19 @@ export default function AdvancedOptions({
   content,
   label,
   style,
-  isOpenByDefault
+  isOpenByDefault,
+  localStorageKey
 }) {
-  const [isOpen, setOpen] = useState(isOpenByDefault);
+  const [isOpen, setOpen] = useState(() => {
+    if (localStorageKey) {
+      if (window.localStorage.getItem(localStorageKey) === "true") {
+        return true;
+      } else if (window.localStorage.getItem(localStorageKey) === "false") {
+        return false;
+      }
+    }
+    return isOpenByDefault;
+  });
   if (!(content || children)) {
     return null;
   }
@@ -16,16 +26,25 @@ export default function AdvancedOptions({
     <div style={{ marginTop: 5, ...style }}>
       <div
         onClick={() => {
-          setOpen(!isOpen);
+          const newIsOpen = !isOpen;
+          setOpen(newIsOpen);
+          if (localStorageKey) {
+            window.localStorage.setItem(localStorageKey, newIsOpen);
+          }
         }}
-        style={{ cursor: "pointer", display: "flex", alignItems: "flex-end" }}
-        className="tg-toggle-advanced-options"
+        style={{
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          userSelect: "none"
+        }}
+        className={`tg-toggle-advanced-options`}
       >
-        {label || "Advanced"}{" "}
         <Icon
           icon={isOpen ? "caret-down" : "caret-right"}
-          style={{ marginLeft: 5 }}
-        ></Icon>
+          style={{ marginRight: 5 }}
+        />
+        <strong>{label || "Advanced"}</strong>
       </div>
       {isOpen && <div style={{ marginTop: 10 }}>{content || children}</div>}
     </div>

package/src/DataTable/Columns.js

@@ -406,6 +406,7 @@ export const useColumns = ({
   resetDefaultVisibility,
   currentParams,
   compact,
+  hideExpandSubCompColumn,
   editingCell,
   editingCellSelectAll,
   entities,
@@ -453,7 +454,8 @@ export const useColumns = ({
   withSort = true,
   recordIdToIsVisibleMap,
   setRecordIdToIsVisibleMap,
-  withDisplayOptions
+  withDisplayOptions,
+  getCheckboxGroupId
 }) => {
   const dispatch = useDispatch();
   const change = useCallback(
@@ -743,6 +745,16 @@ export const useColumns = ({
         return <div />;
       }
       const entity = entities[rowIndex];
+      if (getCheckboxGroupId) {
+        const currentGroupId = getCheckboxGroupId(entity, rowIndex);
+        const previousEntity = entities[rowIndex - 1];
+        const previousGroupId = previousEntity
+          ? getCheckboxGroupId(previousEntity, rowIndex - 1)
+          : undefined;
+        if (currentGroupId && currentGroupId === previousGroupId) {
+          return <div />;
+        }
+      }
       return (
         <Checkbox
           name={`${getIdOrCodeOrIndex(entity, rowIndex)}-checkbox`}
@@ -760,7 +772,8 @@ export const useColumns = ({
               onMultiRowSelect,
               noDeselectAll,
               onRowSelect,
-              change
+              change,
+              getCheckboxGroupId
             });
           }}
           checked={isSelected}
@@ -781,7 +794,8 @@ export const useColumns = ({
       onRowSelect,
       onSingleRowSelect,
       reduxFormSelectedEntityIdMap,
-      withCheckboxes
+      withCheckboxes,
+      getCheckboxGroupId
     ]
   );
 
@@ -866,13 +880,14 @@ export const useColumns = ({
           );
         }
       }),
+      show: !hideExpandSubCompColumn,
       expander: true,
       Expander: ({ isExpanded, original: record }) => {
         let shouldShow = true;
         if (shouldShowSubComponent) {
           shouldShow = shouldShowSubComponent(record);
         }
-        if (!shouldShow) return null;
+        if (!shouldShow || hideExpandSubCompColumn) return null;
         return (
           <Button
             className={classNames(
@@ -1050,6 +1065,5 @@ export const useColumns = ({
     );
     return tableColumn;
   });
-
   return columnsToRender.concat(tableColumns);
 };

package/src/DataTable/index.js

@@ -205,8 +205,9 @@ const DataTable = ({
       entities: normalizedEntities
     };
   }
+  const __schema = useDeepEqualMemo(_schema);
 
-  const convertedSchema = useMemo(() => convertSchema(_schema), [_schema]);
+  const convertedSchema = useMemo(() => convertSchema(__schema), [__schema]);
 
   if (isLocalCall) {
     if (!noForm && (!formName || formName === "tgDataTable")) {
@@ -430,6 +431,7 @@ const DataTable = ({
     minimalStyle,
     mustClickCheckboxToSelect,
     noDeselectAll,
+    hideExpandSubCompColumn,
     noFooter = isSimple ? !withPaging : false,
     noFullscreenButton = isSimple,
     noHeader = false,
@@ -477,7 +479,8 @@ const DataTable = ({
     withSort,
     withTitle = !isSimple,
     noExcessiveCheck,
-    isEntityCountLoading
+    isEntityCountLoading,
+    getCheckboxGroupId
   } = props;
 
   const _entities = useMemo(
@@ -2235,6 +2238,17 @@ const DataTable = ({
       const isExpanded = expandedEntityIdMap[rowId];
       const rowDisabled = isEntityDisabled(entity);
       const dataId = entity.id || entity.code;
+      let noGroupBorder = false;
+      if (getCheckboxGroupId) {
+        const currentGroupId = getCheckboxGroupId(entity, rowInfo.index);
+        const nextEntity = entities[rowInfo.index + 1];
+        const nextGroupId = nextEntity
+          ? getCheckboxGroupId(nextEntity, rowInfo.index + 1)
+          : undefined;
+        if (currentGroupId && currentGroupId === nextGroupId) {
+          noGroupBorder = true;
+        }
+      }
       return {
         onClick: e => {
           if (isCellEditable) return;
@@ -2264,7 +2278,8 @@ const DataTable = ({
             onMultiRowSelect,
             noDeselectAll,
             onRowSelect,
-            change
+            change,
+            getCheckboxGroupId
           });
         },
         //row right click
@@ -2310,9 +2325,11 @@ const DataTable = ({
           {
             disabled: rowDisabled,
             selected: rowSelected && !withCheckboxes,
-            "rt-tr-last-row": rowInfo.index === entities.length - 1
+            "rt-tr-last-row": rowInfo.index === entities.length - 1,
+            "no-group-border": noGroupBorder
           }
         ),
+        "data-test-selected": !!rowSelected,
         "data-test-id": dataId === undefined ? rowInfo.index : dataId,
         "data-index": rowInfo.index,
         "data-tip": typeof rowDisabled === "string" ? rowDisabled : undefined,
@@ -2344,7 +2361,8 @@ const DataTable = ({
       reduxFormSelectedEntityIdMap,
       selectedCells,
       showContextMenu,
-      withCheckboxes
+      withCheckboxes,
+      getCheckboxGroupId
     ]
   );
 
@@ -2712,6 +2730,7 @@ const DataTable = ({
     isSingleSelect,
     isSelectionARectangle,
     noDeselectAll,
+    hideExpandSubCompColumn,
     noSelect,
     noUserSelect,
     onDeselect,
@@ -2743,6 +2762,7 @@ const DataTable = ({
     withFilter,
     withSort,
     recordIdToIsVisibleMap,
+    getCheckboxGroupId,
     setRecordIdToIsVisibleMap
   });
 

package/src/DataTable/style.css

@@ -141,6 +141,50 @@
   border: none;
 }
 
+.ReactTable.ReactTable .rt-tbody .rt-tr-group.no-group-border {
+  border-bottom: none;
+}
+
+.react-draggable .bp3-dialog {
+  /* add little chevrons in the bottom corners of the dialog to show its draggable */
+  position: relative;
+}
+
+.react-draggable .bp3-dialog::before,
+.react-draggable .bp3-dialog::after {
+  content: "";
+  position: absolute;
+  bottom: 3px;
+  width: 10px;
+  height: 10px;
+  border-style: double;
+  border-color: var(--base3);
+  border-width: 0;
+  border-bottom-width: 6px;
+  pointer-events: none;
+}
+
+.react-draggable .bp3-dialog::before {
+  left: 3px;
+  border-left-width: 6px;
+  border-bottom-left-radius: 2px;
+}
+
+.react-draggable .bp3-dialog::after {
+  right: 3px;
+  border-right-width: 6px;
+  border-bottom-right-radius: 2px;
+}
+
+.react-draggable .tg-dialog-resize-handle div:first-child {
+  bottom: 0px !important;
+  left: 0px !important;
+}
+.react-draggable .tg-dialog-resize-handle div:nth-child(2) {
+  bottom: 0px !important;
+  right: 0px !important;
+}
+
 .bp3-dark .ReactTable.ReactTable .rt-tbody .rt-tr-group {
   border-bottom-color: rgba(16, 22, 26, 0.15);
 }

package/src/DataTable/utils/rowClick.js

@@ -19,7 +19,8 @@ export default function rowClick(
     onMultiRowSelect,
     noDeselectAll,
     onRowSelect,
-    change
+    change,
+    getCheckboxGroupId
   }
 ) {
   const entity = rowInfo.original;
@@ -111,6 +112,44 @@ export default function rowClick(
     }
   }
 
+  if (getCheckboxGroupId) {
+    const clickedRowId = rowId;
+    const clickedEntity = entity;
+    const clickedGroupId = getCheckboxGroupId(clickedEntity, rowInfo.index);
+
+    // 1. Handle Deselection of the clicked group
+    if (!newIdMap[clickedRowId] && clickedGroupId) {
+      entities.forEach((e, i) => {
+        if (getCheckboxGroupId(e, i) === clickedGroupId) {
+          const id = getIdOrCodeOrIndex(e, i);
+          delete newIdMap[id];
+        }
+      });
+    }
+
+    // 2. Expand selection to include full groups for all selected items
+    const selectedGroupIds = new Set();
+    entities.forEach((e, i) => {
+      const id = getIdOrCodeOrIndex(e, i);
+      if (newIdMap[id]) {
+        const gid = getCheckboxGroupId(e, i);
+        if (gid) selectedGroupIds.add(gid);
+      }
+    });
+
+    if (selectedGroupIds.size > 0) {
+      entities.forEach((e, i) => {
+        const gid = getCheckboxGroupId(e, i);
+        if (gid && selectedGroupIds.has(gid)) {
+          const id = getIdOrCodeOrIndex(e, i);
+          if (!newIdMap[id]) {
+            newIdMap[id] = { entity: e, time: Date.now() };
+          }
+        }
+      });
+    }
+  }
+
   finalizeSelection({
     idMap: newIdMap,
     entities,

package/src/ResizableDraggableDialog/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Dialog, Classes } from "@blueprintjs/core";
+import { Dialog, Classes, Icon } from "@blueprintjs/core";
 import { Rnd } from "react-rnd";
 import { debounce } from "lodash-es";
 import "./style.css";
@@ -109,6 +109,7 @@ export default class ResizableDraggableDialog extends React.Component {
             topLeft: true,
             topRight: true
           }}
+          resizeHandleWrapperClass="tg-dialog-resize-handle"
           maxHeight={windowHeight}
           maxWidth={windowWidth}
           bounds="window"
@@ -133,6 +134,12 @@ export default class ResizableDraggableDialog extends React.Component {
             usePortal={false}
             canEscapeKeyClose={true}
             {...rest}
+            title={
+              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <Icon size="14" data-tip="I'm a resizable draggable dialog!" icon="move"></Icon>
+                {rest.title}
+              </div>
+            }
           />
         </Rnd>
       </div>

package/src/style.css

@@ -1,12 +1,14 @@
 :root {
   --base1: #ffffff;
   --base2: #cdcdcd;
+  --base3: #a1a3a5;
   --reversed: #293742;
 }
 
 body.bp3-dark {
   --base1: #393a3a;
   --base2: #293742;
+  --base3: #959697;
   --reversed: #cdcdcd;
 }
 

package/ui.css

@@ -8819,12 +8819,14 @@ span.bp3-popover-target{
 /*# sourceMappingURL=blueprint-icons.css.map */:root {
   --base1: #ffffff;
   --base2: #cdcdcd;
+  --base3: #a1a3a5;
   --reversed: #293742;
 }
 
 body.bp3-dark {
   --base1: #393a3a;
   --base2: #293742;
+  --base3: #959697;
   --reversed: #cdcdcd;
 }
 
@@ -9611,6 +9613,50 @@ button:not(:disabled):active {
   border: none;
 }
 
+.ReactTable.ReactTable .rt-tbody .rt-tr-group.no-group-border {
+  border-bottom: none;
+}
+
+.react-draggable .bp3-dialog {
+  /* add little chevrons in the bottom corners of the dialog to show its draggable */
+  position: relative;
+}
+
+.react-draggable .bp3-dialog::before,
+.react-draggable .bp3-dialog::after {
+  content: "";
+  position: absolute;
+  bottom: 3px;
+  width: 10px;
+  height: 10px;
+  border-style: double;
+  border-color: var(--base3);
+  border-width: 0;
+  border-bottom-width: 6px;
+  pointer-events: none;
+}
+
+.react-draggable .bp3-dialog::before {
+  left: 3px;
+  border-left-width: 6px;
+  border-bottom-left-radius: 2px;
+}
+
+.react-draggable .bp3-dialog::after {
+  right: 3px;
+  border-right-width: 6px;
+  border-bottom-right-radius: 2px;
+}
+
+.react-draggable .tg-dialog-resize-handle div:first-child {
+  bottom: 0px !important;
+  left: 0px !important;
+}
+.react-draggable .tg-dialog-resize-handle div:nth-child(2) {
+  bottom: 0px !important;
+  right: 0px !important;
+}
+
 .bp3-dark .ReactTable.ReactTable .rt-tbody .rt-tr-group {
   border-bottom-color: rgba(16, 22, 26, 0.15);
 }