@axzydev/axzy_ui_system 1.3.3 → 1.3.5

package/src/components/organisms/sidebar/sidebar.tsx

@@ -1,8 +1,30 @@
 import { useEffect, useRef, useState } from "react";
 import { FaChevronDown } from "react-icons/fa";
-import { ITNavigationItem, ITSidebarProps } from "./sidebar.props";
+import {
+  ITNavigationItem,
+  ITNavigationSubItem,
+  ITNavigationSubItemEntry,
+  ITNavigationSubItemGroup,
+  ITSidebarProps,
+} from "./sidebar.props";
 import ITText from "@/components/atoms/text/text";
 
+/** Narrows a submenu entry to a titled group. */
+function isSubItemGroup(
+  entry: ITNavigationSubItemEntry,
+): entry is ITNavigationSubItemGroup {
+  return "items" in entry;
+}
+
+/** Flattens a parent's entries (plain items + groups) into a single list. */
+function flattenSubItems(
+  entries: ITNavigationSubItemEntry[],
+): ITNavigationSubItem[] {
+  return entries.flatMap((entry) =>
+    isSubItemGroup(entry) ? entry.items : [entry],
+  );
+}
+
 /**
  * Vertical navigation sidebar with submenu expand/collapse, hover tooltips in collapsed mode,
  * and glassmorphism styling. The collapsed rail expands automatically on pointer hover — there
@@ -76,7 +98,7 @@ export default function ITSidebar({
   useEffect(() => {
     const activeParents = new Set<string>();
     navigationItems.forEach(item => {
-      if (item.subitems && item.subitems.some(sub => sub.isActive)) {
+      if (item.subitems && flattenSubItems(item.subitems).some(sub => sub.isActive)) {
         activeParents.add(item.id);
       }
     });
@@ -115,6 +137,86 @@ export default function ITSidebar({
   const isSidebarCollapsed = visibleOnMobile ? false : (!isHovering && isCollapsed);
   const sidebarWidth = isSidebarCollapsed ? "w-[88px]" : "w-[280px]";
 
+  const renderSubItem = (subitem: ITNavigationSubItem) => (
+    <li key={subitem.id} className="relative">
+      <button
+        aria-current={subitem.isActive ? "page" : undefined}
+        onClick={() => {
+          if (subitem.action) subitem.action();
+          if (onSubItemClick) onSubItemClick(subitem);
+        }}
+        className={`flex items-center gap-2 w-full text-left px-3 py-1.5 rounded-xl transition-all duration-300`}
+        style={{
+          color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
+          backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
+          fontSize: '0.78rem',
+          fontWeight: subitem.isActive ? 600 : 500,
+          letterSpacing: '0.01em',
+          marginLeft: subitemConnector === '|' ? '-1px' : '0',
+        }}
+        onMouseEnter={(e) => {
+          if (!subitem.isActive) {
+            e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
+            e.currentTarget.style.transform = 'translateX(3px)';
+          }
+        }}
+        onMouseLeave={(e) => {
+          if (!subitem.isActive) {
+            e.currentTarget.style.backgroundColor = 'transparent';
+            e.currentTarget.style.transform = 'translateX(0)';
+          }
+        }}
+      >
+        {subitem.isActive && subitemConnector === '|' && (
+          <div
+            className="absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all"
+            style={{
+              backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
+              boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)",
+            }}
+          />
+        )}
+        {subitemConnector === 'dot' && (
+          <span
+            className={`w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 ${subitem.isActive ? 'scale-125' : ''}`}
+            style={{
+              backgroundColor: subitem.isActive
+                ? "var(--it-sidebar-active-icon, var(--color-primary-500))"
+                : "var(--it-sidebar-icon-color, var(--color-secondary-400))"
+            }}
+          />
+        )}
+        <ITText as="span" className="truncate">{subitem.label}</ITText>
+      </button>
+    </li>
+  );
+
+  const renderSubItemGroup = (group: ITNavigationSubItemGroup, itemId: string) => {
+    const headingId = `it-sidebar-subgroup-${itemId}-${group.id}`;
+    return (
+      <li key={group.id} className="relative">
+        <div id={headingId} className="px-3 pt-2.5 pb-1 mt-1">
+          <ITText
+            as="span"
+            className="block"
+            style={{
+              color: "var(--it-sidebar-icon-color, var(--color-secondary-400))",
+              fontSize: "0.68rem",
+              fontWeight: 700,
+              letterSpacing: "0.08em",
+              textTransform: "uppercase",
+            }}
+          >
+            {group.label}
+          </ITText>
+        </div>
+        <ul aria-labelledby={headingId} className="flex flex-col gap-0">
+          {group.items.map(renderSubItem)}
+        </ul>
+      </li>
+    );
+  };
+
   return (
     <aside
       ref={sidebarRef}
@@ -256,7 +358,7 @@ export default function ITSidebar({
 
                   {item.subitems && item.subitems.length > 0 ? (
                     <div className="py-2">
-                      {item.subitems.map((subitem) => (
+                      {flattenSubItems(item.subitems).map((subitem) => (
                         <div
                           key={subitem.id}
                           className={`px-5 py-2.5 text-sm flex items-center gap-3 transition-colors relative`}
@@ -283,7 +385,7 @@ export default function ITSidebar({
 
               {/* Submenu - smooth height/opacity when not collapsed */}
               {!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && (
-                <div id={submenuId} role="group" aria-label={item.label} className={`overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[500px] opacity-100 mt-1" : "max-h-0 opacity-0"}`}>
+                <div id={submenuId} role="group" aria-label={item.label} className={`overflow-hidden transition-all duration-400 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "max-h-[1000px] opacity-100 mt-1" : "max-h-0 opacity-0"}`}>
                   <ul
                     className="ml-4 flex flex-col gap-0 py-0.5"
                     style={{
@@ -292,59 +394,11 @@ export default function ITSidebar({
                         : 'none'
                     }}
                   >
-                    {item.subitems.map((subitem) => (
-                      <li key={subitem.id} className="relative">
-                        <button
-                          aria-current={subitem.isActive ? "page" : undefined}
-                          onClick={() => {
-                            if (subitem.action) subitem.action();
-                            if (onSubItemClick) onSubItemClick(subitem);
-                          }}
-                          className={`flex items-center gap-2 w-full text-left px-3 py-1.5 rounded-xl transition-all duration-300`}
-                          style={{
-                            color: subitem.isActive ? "var(--it-sidebar-active-color, var(--color-secondary-900))" : "var(--it-sidebar-label-color, var(--color-secondary-600))",
-                            backgroundColor: subitem.isActive ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
-                            fontSize: '0.78rem',
-                            fontWeight: subitem.isActive ? 600 : 500,
-                            letterSpacing: '0.01em',
-                            marginLeft: subitemConnector === '|' ? '-1px' : '0',
-                          }}
-                          onMouseEnter={(e) => {
-                            if (!subitem.isActive) {
-                              e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
-                              e.currentTarget.style.transform = 'translateX(3px)';
-                            }
-                          }}
-                          onMouseLeave={(e) => {
-                            if (!subitem.isActive) {
-                              e.currentTarget.style.backgroundColor = 'transparent';
-                              e.currentTarget.style.transform = 'translateX(0)';
-                            }
-                          }}
-                        >
-                          {subitem.isActive && subitemConnector === '|' && (
-                            <div
-                              className="absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all"
-                              style={{
-                                backgroundColor: "var(--it-sidebar-active-icon, var(--color-primary-500))",
-                                boxShadow: "0 0 6px color-mix(in srgb, var(--it-sidebar-active-icon, var(--color-primary-500)) 25%, transparent)",
-                              }}
-                            />
-                          )}
-                          {subitemConnector === 'dot' && (
-                            <span
-                              className={`w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 ${subitem.isActive ? 'scale-125' : ''}`}
-                              style={{
-                                backgroundColor: subitem.isActive
-                                  ? "var(--it-sidebar-active-icon, var(--color-primary-500))"
-                                  : "var(--it-sidebar-icon-color, var(--color-secondary-400))"
-                              }}
-                            />
-                          )}
-                          <ITText as="span" className="truncate">{subitem.label}</ITText>
-                        </button>
-                      </li>
-                    ))}
+                    {item.subitems.map((entry) =>
+                      isSubItemGroup(entry)
+                        ? renderSubItemGroup(entry, item.id)
+                        : renderSubItem(entry),
+                    )}
                   </ul>
                 </div>
               )}

package/src/hooks/useTableState.ts

@@ -1,4 +1,5 @@
 import { useCallback, useMemo, useState } from "react";
+import type { ColumnFilters, ColumnFilterValue } from "@/types/table.types";
 
 interface SortConfig {
   key: string;
@@ -13,30 +14,35 @@ export interface UseTableStateOptions {
 export interface UseTableStateResult {
   currentPage: number;
   itemsPerPage: number;
-  filters: Record<string, string | boolean | number>;
+  filters: ColumnFilters;
   sortConfig: SortConfig | null;
   totalPages: number;
   setTotalPages: (pages: number) => void;
   goToPage: (page: number) => void;
   handleItemsPerPageChange: (value: number) => void;
-  handleFilterChange: (
-    key: string,
-    value: string | boolean | number | undefined
-  ) => void;
+  handleFilterChange: (key: string, value: ColumnFilterValue | undefined) => void;
   handleSort: (key: string, sortable?: boolean) => void;
   resetPage: () => void;
   clearFilters: () => void;
 }
 
+/**
+ * A filter value is considered empty when it should be removed from the filter
+ * map: `undefined`/`null`/`""`, or a date range whose both ends are null.
+ */
+const isEmptyFilterValue = (value: ColumnFilterValue | undefined): boolean => {
+  if (value === undefined || value === null || value === "") return true;
+  if (Array.isArray(value)) return value[0] == null && value[1] == null;
+  return false;
+};
+
 export function useTableState({
   defaultItemsPerPage = 10,
   initialSort = null,
 }: UseTableStateOptions = {}): UseTableStateResult {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage, setItemsPerPage] = useState(defaultItemsPerPage);
-  const [filters, setFilters] = useState<
-    Record<string, string | boolean | number>
-  >({});
+  const [filters, setFilters] = useState<ColumnFilters>({});
   const [sortConfig, setSortConfig] = useState<SortConfig | null>(initialSort);
   const [totalPages, setTotalPages] = useState(1);
 
@@ -58,14 +64,14 @@ export function useTableState({
   }, []);
 
   const handleFilterChange = useCallback(
-    (key: string, value: string | boolean | number | undefined) => {
+    (key: string, value: ColumnFilterValue | undefined) => {
       setFilters((prev) => {
-        if (value === undefined || value === null || value === "") {
+        if (isEmptyFilterValue(value)) {
           const next = { ...prev };
           delete next[key];
           return next;
         }
-        return { ...prev, [key]: value };
+        return { ...prev, [key]: value as ColumnFilterValue };
       });
       setCurrentPage(1);
     },

package/src/index.css

@@ -160,4 +160,14 @@
   .it-stepper-slide-in-left {
     animation: it-slide-in-left 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
   }
+
+  /* Pinned (frozen) table columns: 1px edge separator on the frozen side.
+     Background + hover live in the component as Tailwind arbitrary utilities so
+     the cell matches --color-table-rowBg / --color-table-rowHover. */
+  :where(.it-table-pinned-left) {
+    box-shadow: inset -1px 0 0 0 var(--color-secondary-200);
+  }
+  :where(.it-table-pinned-right) {
+    box-shadow: inset 1px 0 0 0 var(--color-secondary-200);
+  }
 }

package/src/index.ts

@@ -101,13 +101,13 @@ import type { ITSearchSelectProps } from "./components/molecules/search-select/s
 import type { ITSelectProps } from "./components/molecules/select/select.props";
 import type { ITSearchTableProps } from "./components/organisms/searchTable/searchTable.props";
 import type { ITSegmentedControlProps } from "./components/atoms/segmented-control/segmented-control.props";
-import type { ITSidebarProps, ITNavigationItem, ITNavigationSubItem } from "./components/organisms/sidebar/sidebar.props";
+import type { ITSidebarProps, ITNavigationItem, ITNavigationSubItem, ITNavigationSubItemEntry, ITNavigationSubItemGroup } from "./components/organisms/sidebar/sidebar.props";
 import type { ITSkeletonProps } from "./components/atoms/skeleton/skeleton.props";
 import type { ITSlideToggleProps } from "./components/atoms/slide/slide.props";
 import type { ITSliderProps } from "./components/atoms/slider/slider.props";
 import type { ITStackProps } from "./components/atoms/stack/stack.props";
 import type { ITStatCardProps } from "./components/molecules/stat-card/stat-card.props";
-import type { ITTableProps, Column } from "./components/molecules/table/table.props";
+import type { ITTableProps, Column, ColumnFilterMode } from "./components/molecules/table/table.props";
 import type { ITTextProps } from "./components/atoms/text/text.props";
 import type { ITTextareaProps } from "./components/atoms/textarea/textarea.props";
 import type { ITTabsProps, ITTabItem } from "./components/molecules/tabs/tabs.props";
@@ -115,7 +115,7 @@ import type { ITTripleFilterProps, ITTripleFilterOption } from "./components/org
 import type { ITToastProps } from "./components/organisms/toast/toast.props";
 import type { ITWysiwygProps } from "./components/molecules/wysiwyg/wysiwyg.props";
 import type { FieldConfig, FieldConfigV2 } from "./types/field.types";
-import type { TableDensity } from "./types/table.types";
+import type { ColumnFilters, ColumnFilterValue, TableDensity } from "./types/table.types";
 
 // UTILS
 import ITDropfile, { UploadStatus, FileTypeEnum } from "./components/organisms/dropfile/dropfile";
@@ -157,7 +157,7 @@ export {
 };
 
   export type {
-    Column, FieldConfig,
+    Column, ColumnFilters, ColumnFilterMode, ColumnFilterValue, FieldConfig,
     FieldConfigV2,
     ITAccordionItem, ITAccordionProps,
     ITAlertProps, ITAvatarProps, ITBadgetProps,
@@ -173,6 +173,7 @@ export {
     ITLayoutProps, ITLoaderProps, ITNavbarProps,
     ITPageProps, ITPageHeaderProps,
     ITNavigationItem, ITNavigationSubItem,
+    ITNavigationSubItemEntry, ITNavigationSubItemGroup,
     ITPaginationProps, ITPopoverProps, ITProgressProps,
     ITRadioGroupProps, ITRadioOption, ITSelectProps, ITSearchSelectProps,
     ITSearchTableProps,