@inceptionbg/iui 2.0.12 → 2.0.14

package/src/components/Table/hooks/useTablePagination.ts

@@ -1,16 +1,19 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { IPagination, IPaginationControl } from '../../../types/ITable';
 
 export const useTablePagination = (defaultLimit: number = 5) => {
   const [limit, setLimit] = useState(defaultLimit);
   const [offset, setOffset] = useState(0);
 
-  const pagination: IPagination = { limit, offset };
-  const paginationControl: IPaginationControl = {
-    ...pagination,
-    setLimit,
-    setOffset,
-  };
+  const pagination: IPagination = useMemo(() => ({ limit, offset }), [limit, offset]);
+  const paginationControl: IPaginationControl = useMemo(
+    () => ({
+      ...pagination,
+      setLimit,
+      setOffset,
+    }),
+    [pagination]
+  );
 
   return { pagination, paginationControl };
 };

package/src/components/Table/hooks/useTableSelect.ts

@@ -1,11 +1,19 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
+import { ITableSelectedAction } from '../../../types/ITable';
 
-export const useTableSelect = () => {
+export const useTableSelect = ({ actions }: { actions: ITableSelectedAction[] }) => {
   const [selectedRows, setSelectedRows] = useState(new Set<string>());
 
-  return {
-    selectedRows,
-    setSelectedRows,
-    resetSelectedRows: () => setSelectedRows(new Set<string>()),
-  };
+  const rowSelect = useMemo(
+    () => ({
+      selectedRows,
+      setSelectedRows,
+      resetSelectedRows: () => setSelectedRows(new Set<string>()),
+      actions,
+    }),
+    // eslint-disable-next-line
+    [selectedRows]
+  );
+
+  return rowSelect;
 };

package/src/index.ts

@@ -27,6 +27,7 @@ import type {
   IPaginationControl,
   ITable,
   ITableColumn,
+  ITableDataActions,
   ITableDataItem,
   ITableDataItemCells,
   ITableEdit,
@@ -34,6 +35,10 @@ import type {
   ITableFilterData,
   ITableFilterItem,
   ITableSort,
+  ITableTemplateData,
+  IReportTemplate,
+  IReportTemplateData,
+  IReportTemplateFilterValue,
 } from './types/ITable';
 import type { ITreeItem } from './types/ITree';
 import type { IHeaderAction, IHeaderUserMenuProps } from './types/IHeader';
@@ -50,6 +55,7 @@ import { NotificationBadge } from './components/Badge/NotificationBadge';
 import { PillBadge } from './components/Badge/PillBadge';
 import { Button } from './components/Button/Button';
 import { IconButton } from './components/Button/IconButton';
+import { SplitButton } from './components/Button/SplitButton';
 import { Dashboard } from './components/Dashboard/Dashboard';
 import { DashboardWidget } from './components/Dashboard/DashboardWidget';
 import { FastLinksWidget } from './components/Dashboard/FastLinksWidget/FastLinksWidget';
@@ -96,7 +102,7 @@ import { Table } from './components/Table/Table';
 // import { TableFooter } from './components/Table/Components/TableFooter';
 // import { GridTable } from '../idea/GridTable/GridTable';
 // import { TablePrint } from './components/Table/Components/Print/TablePrint';
-import { useDefaultTemplate } from './components/Table/hooks/useDefaultTemplate';
+import { useTableColumns } from './components/Table/hooks/useTableColumns';
 import { useTableEdit } from './components/Table/hooks/useTableEdit';
 import { useTableFilterFields } from './components/Table/hooks/useTableFilterFields';
 import { useTablePagination } from './components/Table/hooks/useTablePagination';
@@ -216,6 +222,7 @@ export {
   Select,
   SelectAsyncPaginate,
   SelectCreatable,
+  SplitButton,
   tableCustomLimit1000,
   Tabs,
   TextInput,
@@ -232,7 +239,7 @@ export {
   // TablePrint,
   // TableEditRow,
   // TableFooter,
-  useDefaultTemplate,
+  useTableColumns,
   useTableEdit,
   useTableFilterFields,
   useTablePagination,
@@ -267,6 +274,7 @@ export type {
   ITab,
   ITable,
   ITableColumn,
+  ITableDataActions,
   ITableDataItem,
   ITableDataItemCells,
   ITableEdit,
@@ -274,6 +282,10 @@ export type {
   ITableFilterData,
   ITableFilterItem,
   ITableSort,
+  ITableTemplateData,
+  IReportTemplate,
+  IReportTemplateData,
+  IReportTemplateFilterValue,
   IGetPrintData,
   ITreeItem,
   IValueLabel,

package/src/styles/App.scss

@@ -15,6 +15,7 @@
 @use './components/alert';
 @use './components/badge';
 @use './components/button';
+@use './components/buttonSplit';
 @use './components/card';
 // @use './components/menu-v2';
 @use './components/dialog';

package/src/styles/common/maps/_buttonMaps.scss

@@ -0,0 +1,42 @@
+$text-button-sizes: (
+  xs: (
+    font-size: 10px,
+    svg: 12px,
+    padding: 0 10px,
+    height: 24px,
+    gap: 6px,
+  ),
+  s: (
+    font-size: 12px,
+    svg: 14px,
+    padding: 0 12px,
+    height: 30px,
+  ),
+  m: (
+    font-size: 14px,
+    svg: 16px,
+    padding: 0 14px,
+    height: 36px,
+  ),
+  l: (
+    font-size: 16px,
+    svg: 20px,
+    padding: 0 18px,
+    height: 48px,
+  ),
+);
+
+$icon-button-sizes: (
+  s: (
+    size: 32px,
+    svg: 16px,
+  ),
+  m: (
+    size: 40px,
+    svg: 20px,
+  ),
+  l: (
+    size: 44px,
+    svg: 24px,
+  ),
+);

package/src/styles/components/_button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../common/maps/buttonMaps' as buttonMaps;
 
 $btn-colors: (primary, neutral, danger);
 
@@ -6,19 +7,19 @@ $btn-colors: (primary, neutral, danger);
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 8px;
   border-radius: 100px;
   cursor: pointer;
   user-select: none;
   background: none;
-  transition: border-color 250ms, background-color 250ms;
+  transition:
+    border-color 250ms,
+    background-color 250ms;
 
   @each $key in $btn-colors {
     &.#{$key} {
       color: var(--#{$key}-600);
       &.solid {
         background-color: var(--#{$key});
-        border-color: var(--#{$key});
       }
       &.outlined {
         border-color: var(--#{$key}-600);
@@ -43,12 +44,12 @@ $btn-colors: (primary, neutral, danger);
     }
   }
 
-  &:not(.simple) {
-    border: 1px solid var(--neutral-300);
-  }
   &.solid {
     color: var(--text-inverse);
   }
+  &.outlined {
+    border: 1px solid var(--neutral-300);
+  }
   &:disabled {
     opacity: 0.5;
     cursor: default;
@@ -59,45 +60,19 @@ $btn-colors: (primary, neutral, danger);
 }
 
 ///// Text Button /////
-$text-button-sizes: (
-  xs: (
-    font-size: 10px,
-    svg: 12px,
-    padding: 4px 10px,
-    gap: 6px,
-  ),
-  s: (
-    font-size: 12px,
-    svg: 14px,
-    padding: 6px 12px,
-  ),
-  m: (
-    font-size: 14px,
-    svg: 16px,
-    padding: 8px 14px,
-  ),
-  l: (
-    font-size: 16px,
-    svg: 20px,
-    padding: 12px 18px,
-  ),
-);
 
 .iui-text-btn {
-  // letter-spacing: 0.4px;
   font-weight: 600;
   white-space: nowrap;
+  gap: 8px;
 
   // Sizes
-  @each $size, $vars in $text-button-sizes {
+  @each $size, $vars in buttonMaps.$text-button-sizes {
     &.#{$size} {
       font-size: map.get($vars, font-size);
       padding: map.get($vars, padding);
       gap: map.get($vars, gap);
-
-      @if map.has-key($vars, height) {
-        height: map.get($vars, height);
-      }
+      height: map.get($vars, height);
       svg {
         height: map.get($vars, svg);
         width: map.get($vars, svg);
@@ -107,23 +82,9 @@ $text-button-sizes: (
 }
 
 ///// Icon Button /////
-$icon-button-sizes: (
-  s: (
-    size: 32px,
-    svg: 16px,
-  ),
-  m: (
-    size: 40px,
-    svg: 20px,
-  ),
-  l: (
-    size: 44px,
-    svg: 24px,
-  ),
-);
 
 .iui-icon-btn {
-  @each $size, $vars in $icon-button-sizes {
+  @each $size, $vars in buttonMaps.$icon-button-sizes {
     &.#{$size} {
       min-height: map.get($vars, size);
       min-width: map.get($vars, size);

package/src/styles/components/_buttonSplit.scss

@@ -0,0 +1,90 @@
+@use 'sass:map';
+@use '../common/maps/buttonMaps' as buttonMaps;
+
+.iui-split-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  cursor: pointer;
+  user-select: none;
+  overflow: hidden;
+  transition:
+    border-color 250ms,
+    background-color 250ms;
+  .iui-btn-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: 600;
+    white-space: nowrap;
+    gap: 8px;
+  }
+  .btn-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-left: 2px solid var(--neutral-200);
+  }
+
+  &.solid {
+    background-color: var(--primary);
+    color: var(--text-inverse);
+    &:not(:disabled) {
+      .iui-btn-content,
+      .btn-actions {
+        &:hover,
+        &:active,
+        &.active {
+          background-color: var(--primary-600);
+        }
+      }
+      &:focus-visible {
+        box-shadow: 0px 0px 1px 3px var(--primary-200);
+      }
+    }
+  }
+  &.outlined {
+    border: 1px solid var(--neutral-300);
+    &:not(:disabled) {
+      .iui-btn-content,
+      .btn-actions {
+        &:hover,
+        &:active,
+        &.active {
+          background-color: var(--neutral-100);
+        }
+      }
+      &:focus-visible {
+        box-shadow: 0px 0px 1px 3px var(--neutral-200);
+      }
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  &:not(:disabled):active {
+    transform: translateY(2px);
+  }
+  // Sizes
+  @each $size, $vars in buttonMaps.$text-button-sizes {
+    &.#{$size} {
+      .iui-btn-content {
+        font-size: map.get($vars, font-size);
+        padding: map.get($vars, padding);
+        gap: map.get($vars, gap);
+        height: map.get($vars, height);
+      }
+      .btn-actions {
+        height: map.get($vars, height);
+        width: map.get($vars, height);
+      }
+      svg {
+        height: map.get($vars, svg);
+        width: map.get($vars, svg);
+      }
+    }
+  }
+}

package/src/styles/components/_header.scss

@@ -1,8 +1,9 @@
 @use '../variables/bp';
 
 .iui-header {
-  border-bottom: var(--border);
-  background: var(--background);
+  box-shadow: var(--container-shadow);
+  background: var(--primary);
+  color: var(--text-inverse);
   height: var(--header-height);
   width: 100dvw;
   display: flex;
@@ -10,13 +11,21 @@
   justify-content: space-between;
   padding: 0 24px 0 8px;
   box-sizing: border-box;
+  z-index: 2;
   .header-button {
     height: 40px;
     width: 40px;
     padding: 8px;
     border-radius: 50px;
-    &:hover {
+    circle {
+      fill: var(--white);
+    }
+    &:hover,
+    &.active {
       background-color: var(--neutral-hover);
+      circle {
+        fill: var(--primary);
+      }
     }
   }
 }
@@ -31,12 +40,17 @@
   user-select: none;
   &:hover {
     background-color: var(--neutral-hover);
+    color: var(--primary);
   }
 }
 .modules-menu {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   padding: 8px !important;
+  top: var(--header-height) !important;
+  left: 0 !important;
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
   @media #{bp.$mobile} {
     grid-template-columns: 1fr;
   }
@@ -81,7 +95,7 @@
   user-select: none;
   -webkit-user-drag: none;
   .user-icon {
-    color: var(--primary);
+    color: var(--white);
     height: 36px;
     width: 36px;
   }
@@ -96,7 +110,7 @@
     }
     .org-name {
       font-size: 12px;
-      color: var(--neutral-500);
+      color: var(--neutral-200);
     }
     p {
       line-height: 1.5;
@@ -113,6 +127,13 @@
     border-radius: 50px;
   }
 }
+.header-user-menu {
+  top: var(--header-height) !important;
+  right: 0 !important;
+  left: auto !important;
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+}
 
 @media #{bp.$mobile} {
   .user-info {

package/src/styles/components/_list.scss

@@ -4,9 +4,15 @@
   flex-direction: column;
   gap: 8px;
   .iui-list-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     border: var(--border);
     border-radius: 8px;
     padding: 12px 16px;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
     p {
       font-size: 14px;
       line-height: 20px;
@@ -18,6 +24,12 @@
       font-size: 12px;
       color: var(--neutral);
       margin-top: 4px;
+      white-space: pre-line;
+    }
+    .iui-list-item-actions {
+      display: flex;
+      align-items: center;
+      gap: 4px;
     }
     &.disabled {
       cursor: default;
@@ -28,12 +40,18 @@
       &:hover {
         background-color: var(--neutral-hover);
       }
+      &:has(.iui-icon-btn:hover) {
+        background-color: transparent;
+      }
       &.active {
-        background-color: var(--primary);
+        background-color: var(--primary) !important;
         color: var(--text-inverse);
         .iui-list-item-desc {
           color: var(--neutral-300);
         }
+        .iui-list-item-actions .iui-icon-btn:not(:hover) {
+          background-color: var(--background);
+        }
       }
     }
   }

package/src/styles/components/_page.scss

@@ -47,7 +47,7 @@
   padding: 0 1.5rem;
   min-height: 55px;
   max-height: 55px;
-  border-bottom: var(--border);
+  box-shadow: var(--container-shadow);
 
   @media #{bp.$mobileTablet} {
     .breadcrumbs {
@@ -60,4 +60,5 @@
   text-align: center;
   padding: 16px;
   font-size: 12px;
+  white-space: pre-line;
 }

package/src/styles/components/_sidebar.scss

@@ -6,7 +6,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  border-right: var(--border);
+  box-shadow: var(--container-shadow);
   height: calc(100dvh - var(--header-height));
   width: var(--sidebar-width);
   transition: width var(--animation);
@@ -190,7 +190,7 @@
     .item-only {
       padding-left: 15px;
       .sidebar-item-label {
-        padding-left: 6px;
+        padding-left: 8px;
       }
     }
     .sidebar-footer p {

package/src/styles/components/_table.scss

@@ -8,9 +8,9 @@ table {
   //// Header ////
   thead {
     z-index: 2;
-    background-color: var(--neutral-200);
+    background-color: var(--neutral-100);
     tr:first-child th {
-      border-top: var(--border);
+      border-top: var(--borderlight);
     }
   }
   th {
@@ -55,7 +55,7 @@ table {
   // Cell
   th,
   td {
-    border-bottom: var(--border);
+    border-bottom: var(--border-light);
     // Cell colors
     &.secondary {
       background-color: rgba(0, 0, 0, 0.04);
@@ -136,9 +136,9 @@ table {
   @media #{bp.$landscape} {
     td,
     th {
-      border-right: var(--border);
+      border-right: var(--border-light);
       &:first-child:not(.not-first-cell) {
-        border-left: var(--border);
+        border-left: var(--border-light);
       }
     }
     .select-col,
@@ -211,7 +211,7 @@ table {
 //     gap: 12px;
 //   }
 //   .list-box {
-//     border: var(--border);
+//     border: var(--border-light);
 //     border-radius: 16px;
 //     padding: 10px;
 //     user-select: none;

package/src/styles/variables/_variables.scss

@@ -82,6 +82,7 @@
   /////// OTHER ////////
   --header-height: 60px;
   --border: 1px solid var(--border-color);
+  --border-light: 1px solid var(--neutral-200);
   --sidebar-width: 260px;
   --sidebar-collapsed-width: 54px;