tc-dazzle-ui 1.2.0 → 1.3.0

package/dist/components/Atoms/Logo/Logo.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import './Logo.css';
 export type LogoSize = 'small' | 'medium' | 'large';
-export type LogoVariant = 'full' | 'icon';
+export type LogoVariant = 'full' | 'icon' | 'sandbox';
 export interface LogoProps {
     size?: LogoSize;
     variant?: LogoVariant;

package/dist/components/Molecules/DropdownMenu/DropdownMenu.d.ts

@@ -4,12 +4,14 @@ export interface DropdownMenuItem {
     id: string;
     label: string;
     icon?: React.ReactNode;
+    subItems?: DropdownMenuItem[];
     onClick?: () => void;
 }
 export interface DropdownMenuProps {
     items: DropdownMenuItem[];
     selectedId?: string;
     onItemClick?: (item: DropdownMenuItem) => void;
+    showIcons?: boolean;
     className?: string;
 }
 export declare const DropdownMenu: React.FC<DropdownMenuProps>;

package/dist/components/Organisms/MainHeader/MainHeader.d.ts

@@ -5,7 +5,6 @@ import type { GlobalSearchOption } from '../../Atoms';
 import './MainHeader.css';
 export interface MainHeaderProps {
     showSandbox?: boolean;
-    menuItems?: HeaderMenuItem[];
     searchFilterOptions?: GlobalSearchOption[];
     searchPlaceholder?: string;
     searchFilterPlaceholder?: string;

package/dist/index.esm.js

@@ -252,8 +252,10 @@ const CaretDownIcon = (props) => (jsx(IconWrapper, { ...props, children: jsx("sv
 // TeamConnect Logo Icon (honeycomb hexagon pattern)
 const TeamConnectIcon = (props) => (jsx(IconWrapper, { ...props, children: jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M5.5 4L8 2.5L10.5 4V7L8 8.5L5.5 7V4Z", fill: "#E91E63" }), jsx("path", { d: "M10.5 4L13 2.5L15.5 4V7L13 8.5L10.5 7V4Z", fill: "#9C27B0" }), jsx("path", { d: "M3 8.5L5.5 7L8 8.5V11.5L5.5 13L3 11.5V8.5Z", fill: "#7B1FA2" }), jsx("path", { d: "M8 8.5L10.5 7L13 8.5V11.5L10.5 13L8 11.5V8.5Z", fill: "#673AB7" }), jsx("path", { d: "M13 8.5L15.5 7L18 8.5V11.5L15.5 13L13 11.5V8.5Z", fill: "#3F51B5" }), jsx("path", { d: "M5.5 13L8 11.5L10.5 13V16L8 17.5L5.5 16V13Z", fill: "#303F9F" }), jsx("path", { d: "M10.5 13L13 11.5L15.5 13V16L13 17.5L10.5 16V13Z", fill: "#1A237E" })] }) }));
 
-// TeamConnect Logo Icon (honeycomb hexagon pattern)
-const LogoIcon = ({ className }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M5.5 4L8 2.5L10.5 4V7L8 8.5L5.5 7V4Z", fill: "#E91E63" }), jsx("path", { d: "M10.5 4L13 2.5L15.5 4V7L13 8.5L10.5 7V4Z", fill: "#9C27B0" }), jsx("path", { d: "M3 8.5L5.5 7L8 8.5V11.5L5.5 13L3 11.5V8.5Z", fill: "#7B1FA2" }), jsx("path", { d: "M8 8.5L10.5 7L13 8.5V11.5L10.5 13L8 11.5V8.5Z", fill: "#673AB7" }), jsx("path", { d: "M13 8.5L15.5 7L18 8.5V11.5L15.5 13L13 11.5V8.5Z", fill: "#3F51B5" }), jsx("path", { d: "M5.5 13L8 11.5L10.5 13V16L8 17.5L5.5 16V13Z", fill: "#303F9F" }), jsx("path", { d: "M10.5 13L13 11.5L15.5 13V16L13 17.5L10.5 16V13Z", fill: "#1A237E" })] }));
+// TeamConnect Logo Icon - Default (hexagon cluster pattern)
+const LogoIcon = ({ className }) => (jsxs("svg", { className: className, viewBox: "0 0 32 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M8.95902 16.0675L11.9454 10.8724L8.95902 5.68262H2.98634L0 10.8724L2.98634 16.0675H8.95902Z", fill: "#EC822A" }), jsx("path", { d: "M18.71 10.3849L21.6963 5.19515L18.71 0H12.7373L9.75098 5.19515L12.7373 10.3849H18.71Z", fill: "#E65A36" }), jsx("path", { d: "M22.5537 17.084L19.5674 22.2737L22.5537 27.4689H28.5264L31.5127 22.2737L28.5264 17.084H22.5537Z", fill: "#002453" }), jsx("path", { d: "M8.95902 17.084H2.98634L0 22.2737L2.98634 27.4689H8.95902L11.9454 22.2737L8.95902 17.084Z", fill: "#67666B" }), jsx("path", { d: "M22.5537 16.0675H28.5264L31.5127 10.8724L28.5264 5.68262H22.5537L19.5674 10.8724L22.5537 16.0675Z", fill: "#1CB3CD" }), jsx("path", { d: "M12.7373 22.6152L9.75098 27.805L12.7373 33.0001H18.71L21.6963 27.805L18.71 22.6152H12.7373Z", fill: "#B41E80" })] }));
+// Sandbox Logo Icon (old honeycomb pattern - for sandbox variant)
+const SandboxLogoIcon = ({ className }) => (jsxs("svg", { className: className, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("path", { d: "M5.5 4L8 2.5L10.5 4V7L8 8.5L5.5 7V4Z", fill: "#E91E63" }), jsx("path", { d: "M10.5 4L13 2.5L15.5 4V7L13 8.5L10.5 7V4Z", fill: "#9C27B0" }), jsx("path", { d: "M3 8.5L5.5 7L8 8.5V11.5L5.5 13L3 11.5V8.5Z", fill: "#7B1FA2" }), jsx("path", { d: "M8 8.5L10.5 7L13 8.5V11.5L10.5 13L8 11.5V8.5Z", fill: "#673AB7" }), jsx("path", { d: "M13 8.5L15.5 7L18 8.5V11.5L15.5 13L13 11.5V8.5Z", fill: "#3F51B5" }), jsx("path", { d: "M5.5 13L8 11.5L10.5 13V16L8 17.5L5.5 16V13Z", fill: "#303F9F" }), jsx("path", { d: "M10.5 13L13 11.5L15.5 13V16L13 17.5L10.5 16V13Z", fill: "#1A237E" })] }));
 const Logo = ({ size = 'medium', variant = 'full', showSandbox = false, className = '', onClick, }) => {
     const getSizeClass = () => {
         switch (size) {
@@ -265,12 +267,14 @@ const Logo = ({ size = 'medium', variant = 'full', showSandbox = false, classNam
                 return 'tc-logo--medium';
         }
     };
-    return (jsxs("div", { className: `tc-logo ${getSizeClass()} ${className}`.trim(), onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? (e) => {
+    // Use sandbox icon for sandbox variant, otherwise use default logo
+    const IconComponent = variant === 'sandbox' ? SandboxLogoIcon : LogoIcon;
+    return (jsxs("div", { className: `tc-logo ${getSizeClass()} ${variant === 'sandbox' ? 'tc-logo--sandbox' : ''} ${className}`.trim(), onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
                 onClick();
             }
-        } : undefined, children: [jsx(LogoIcon, { className: "tc-logo__icon" }), variant === 'full' && (jsxs("span", { className: "tc-logo__text", children: [jsx("span", { className: "tc-logo__text-team", children: "Team" }), jsx("span", { className: "tc-logo__text-connect", children: "Connect" }), showSandbox && (jsx("span", { className: "tc-logo__text-sandbox", children: "SANDBOX" }))] }))] }));
+        } : undefined, children: [jsx(IconComponent, { className: "tc-logo__icon" }), variant !== 'icon' && (jsxs("span", { className: "tc-logo__text", children: [jsx("span", { className: "tc-logo__text-team", children: "Team" }), jsx("span", { className: "tc-logo__text-connect", children: "Connect" }), (showSandbox || variant === 'sandbox') && (jsx("span", { className: "tc-logo__text-sandbox", children: "SANDBOX" }))] }))] }));
 };
 
 const Search = ({ placeholder = 'Search', filterPlaceholder = 'All', filterOptions = [
@@ -295,23 +299,39 @@ const Search = ({ placeholder = 'Search', filterPlaceholder = 'All', filterOptio
     return (jsxs("div", { className: `tc-search ${className}`.trim(), children: [jsx(GlobalSearch, { placeholder: placeholder, filterPlaceholder: filterPlaceholder, filterOptions: filterOptions, filterValue: controlledFilterValue !== undefined ? controlledFilterValue : filterValue, searchValue: controlledSearchValue !== undefined ? controlledSearchValue : searchValue, disabled: disabled, onSearch: handleSearch, onFilterChange: handleFilterChange, onSubmit: handleSubmit }), showInfoIcon && (jsx(IconButton, { icon: jsx(InfoIcon, { size: "medium" }), size: "medium", color: "default", onClick: handleInfoClick, disabled: disabled, ariaLabel: "More information", className: "tc-search__info-button" }))] }));
 };
 
+// Chevron Right Icon for submenu indicator
+const ChevronRightIcon = ({ className }) => (jsx("svg", { className: className, viewBox: "0 0 6 10", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M1 1L5 5L1 9", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }) }));
 // Default Wrench Icon (from Figma design)
 const WrenchIcon = ({ className }) => (jsx("svg", { className: className, viewBox: "0 0 14 14", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M13.6 3.5C13.4 3.3 13.1 3.3 12.9 3.5L10.5 5.9L8.1 3.5L10.5 1.1C10.7 0.9 10.7 0.6 10.5 0.4C9.3 -0.4 7.7 -0.1 6.6 1C5.7 1.9 5.4 3.2 5.8 4.3L0.4 9.7C-0.1 10.2 -0.1 11 0.4 11.5L2.5 13.6C3 14.1 3.8 14.1 4.3 13.6L9.7 8.2C10.8 8.6 12.1 8.3 13 7.4C14.1 6.3 14.4 4.7 13.6 3.5Z" }) }));
-const DropdownMenu = ({ items, selectedId, onItemClick, className = '', }) => {
+// Submenu component
+const SubMenu = ({ items, onItemClick, showIcons }) => {
+    return (jsx("div", { className: "tc-dropdown-menu__submenu", children: items.map((item) => (jsxs("div", { className: "tc-dropdown-menu__submenu-item", onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+            }, role: "menuitem", tabIndex: 0, children: [showIcons && item.icon && (jsx("span", { className: "tc-dropdown-menu__icon", children: item.icon })), jsx("span", { className: "tc-dropdown-menu__label", children: item.label })] }, item.id))) }));
+};
+const DropdownMenu = ({ items, selectedId, onItemClick, showIcons = true, className = '', }) => {
+    const [hoveredItemId, setHoveredItemId] = useState(null);
     const handleItemClick = (item) => {
         var _a;
-        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
-        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+        if (!item.subItems || item.subItems.length === 0) {
+            (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+        }
     };
-    return (jsx("div", { className: `tc-dropdown-menu ${className}`.trim(), children: items.map((item, index) => {
+    return (jsx("div", { className: `tc-dropdown-menu ${className}`.trim(), role: "menu", children: items.map((item, index) => {
             const isSelected = item.id === selectedId;
             const isLast = index === items.length - 1;
-            return (jsx("div", { className: `tc-dropdown-menu__item ${isSelected ? 'tc-dropdown-menu__item--selected' : ''} ${isLast ? 'tc-dropdown-menu__item--last' : ''}`, onClick: () => handleItemClick(item), role: "menuitem", tabIndex: 0, onKeyDown: (e) => {
+            const hasSubItems = item.subItems && item.subItems.length > 0;
+            const isHovered = hoveredItemId === item.id;
+            return (jsxs("div", { className: `tc-dropdown-menu__item ${isSelected ? 'tc-dropdown-menu__item--selected' : ''} ${isLast ? 'tc-dropdown-menu__item--last' : ''} ${hasSubItems ? 'tc-dropdown-menu__item--has-submenu' : ''}`, onClick: () => handleItemClick(item), onMouseEnter: () => setHoveredItemId(item.id), onMouseLeave: () => setHoveredItemId(null), role: "menuitem", tabIndex: 0, onKeyDown: (e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
                         handleItemClick(item);
                     }
-                }, children: jsxs("div", { className: "tc-dropdown-menu__link", children: [jsx("span", { className: "tc-dropdown-menu__icon", children: item.icon || jsx(WrenchIcon, {}) }), jsx("span", { className: "tc-dropdown-menu__label", children: item.label })] }) }, item.id));
+                }, children: [jsxs("div", { className: "tc-dropdown-menu__link", children: [showIcons && (jsx("span", { className: "tc-dropdown-menu__icon", children: item.icon || jsx(WrenchIcon, {}) })), jsx("span", { className: "tc-dropdown-menu__label", children: item.label }), hasSubItems && (jsx("span", { className: "tc-dropdown-menu__chevron", children: jsx(ChevronRightIcon, {}) }))] }), hasSubItems && isHovered && (jsx(SubMenu, { items: item.subItems, onItemClick: onItemClick, showIcons: showIcons }))] }, item.id));
         }) }));
 };
 
@@ -356,15 +376,48 @@ const HeaderMenu = ({ items, onItemClick, onDropdownItemClick, className = '', }
     return (jsx("div", { ref: menuRef, className: `tc-header-menu ${className}`.trim(), children: items.map((item) => {
             const isOpen = openMenuId === item.id;
             const hasDropdown = item.dropdownItems && item.dropdownItems.length > 0;
-            return (jsxs("div", { className: "tc-header-menu__item-wrapper", children: [jsxs("button", { className: `tc-header-menu__item ${isOpen ? 'tc-header-menu__item--active' : ''}`, onClick: () => handleItemClick(item), type: "button", "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? 'menu' : undefined, children: [jsx("span", { className: "tc-header-menu__icon", children: item.icon || defaultIcons[item.id.toLowerCase()] || jsx(BookmarkIcon, {}) }), jsx("span", { className: "tc-header-menu__label", children: item.label })] }), hasDropdown && isOpen && (jsx("div", { className: "tc-header-menu__dropdown", children: jsx(DropdownMenu, { items: item.dropdownItems, onItemClick: (dropdownItem) => handleDropdownItemClick(item, dropdownItem) }) }))] }, item.id));
+            return (jsxs("div", { className: "tc-header-menu__item-wrapper", children: [jsxs("button", { className: `tc-header-menu__item ${isOpen ? 'tc-header-menu__item--active' : ''}`, onClick: () => handleItemClick(item), type: "button", "aria-expanded": hasDropdown ? isOpen : undefined, "aria-haspopup": hasDropdown ? 'menu' : undefined, children: [jsx("span", { className: "tc-header-menu__icon", children: item.icon || defaultIcons[item.id.toLowerCase()] || jsx(BookmarkIcon, {}) }), jsx("span", { className: "tc-header-menu__label", children: item.label })] }), hasDropdown && isOpen && (jsx("div", { className: "tc-header-menu__dropdown", children: jsx(DropdownMenu, { items: item.dropdownItems, onItemClick: (dropdownItem) => handleDropdownItemClick(item, dropdownItem), showIcons: false }) }))] }, item.id));
         }) }));
 };
 
-// Default menu items matching the Figma design
-const defaultMenuItems = [
+// Fixed menu items - always the same
+const menuItems = [
     { id: 'bookmarks', label: 'Bookmarks', dropdownItems: [] },
-    { id: 'recent', label: 'Recent', dropdownItems: [] },
-    { id: 'all', label: 'All', dropdownItems: [] },
+    {
+        id: 'recent',
+        label: 'Recent',
+        dropdownItems: [
+            { id: 'unsaved-items', label: 'Unsaved Items', subItems: [
+                    { id: 'no-unsaved', label: 'No Unsaved Items' },
+                ] },
+            { id: 'recently-viewed', label: 'Recently Viewed', subItems: [] },
+            { id: 'recent-searches', label: 'Recent Searches', subItems: [] },
+        ]
+    },
+    {
+        id: 'all',
+        label: 'All',
+        dropdownItems: [
+            { id: 'view-full-list', label: 'View Full List' },
+            { id: 'accounts', label: 'Accounts' },
+            { id: 'action-matrix', label: 'Action Matrix', subItems: [
+                    { id: 'action-items', label: 'Action Items' },
+                ] },
+            { id: 'advanced-docket', label: 'Advanced Docket Management', subItems: [
+                    { id: 'scheduling-orders', label: 'Scheduling Orders' },
+                ] },
+            { id: 'appointments', label: 'Appointments' },
+            { id: 'approvals', label: 'Approvals' },
+            { id: 'ap-settings', label: 'AP Settings' },
+            { id: 'aries', label: 'ARIES' },
+            { id: 'aries-feedback', label: 'ARIES Feedback' },
+            { id: 'aries-settings', label: 'ARIES Settings' },
+            { id: 'billing-profiles', label: 'Billing Profiles' },
+            { id: 'budget-settings', label: 'Budget Settings' },
+            { id: 'budget-tests', label: 'Budget Tests' },
+            { id: 'cats-matters', label: 'Cats Matters' },
+        ]
+    },
     { id: 'tools', label: 'Tools', dropdownItems: [] },
     { id: 'help', label: 'Help', dropdownItems: [] },
     { id: 'client', label: 'Client', dropdownItems: [] },
@@ -373,8 +426,8 @@ const defaultMenuItems = [
 const defaultFilterOptions = [
     { value: 'all', label: 'All' },
 ];
-const MainHeader = ({ showSandbox = true, menuItems = defaultMenuItems, searchFilterOptions = defaultFilterOptions, searchPlaceholder = 'Search', searchFilterPlaceholder = 'All', onLogoClick, onSearch, onMenuItemClick, onDropdownItemClick, onInfoClick, className = '', }) => {
-    return (jsxs("header", { className: `tc-main-header ${className}`.trim(), children: [jsx("div", { className: "tc-main-header__logo", children: jsx(Logo, { size: "medium", showSandbox: showSandbox, onClick: onLogoClick }) }), jsx("div", { className: "tc-main-header__search", children: jsx(Search, { placeholder: searchPlaceholder, filterPlaceholder: searchFilterPlaceholder, filterOptions: searchFilterOptions, onSubmit: onSearch, onInfoClick: onInfoClick }) }), jsx("div", { className: "tc-main-header__menu", children: jsx(HeaderMenu, { items: menuItems, onItemClick: onMenuItemClick, onDropdownItemClick: onDropdownItemClick }) })] }));
+const MainHeader = ({ showSandbox = false, searchFilterOptions = defaultFilterOptions, searchPlaceholder = 'Search', searchFilterPlaceholder = 'All', onLogoClick, onSearch, onMenuItemClick, onDropdownItemClick, onInfoClick, className = '', }) => {
+    return (jsxs("header", { className: `tc-main-header ${className}`.trim(), children: [jsx("div", { className: "tc-main-header__logo", children: jsx(Logo, { size: "medium", variant: showSandbox ? 'sandbox' : 'full', onClick: onLogoClick }) }), jsx("div", { className: "tc-main-header__search", children: jsx(Search, { placeholder: searchPlaceholder, filterPlaceholder: searchFilterPlaceholder, filterOptions: searchFilterOptions, onSubmit: onSearch, onInfoClick: onInfoClick }) }), jsx("div", { className: "tc-main-header__menu", children: jsx(HeaderMenu, { items: menuItems, onItemClick: onMenuItemClick, onDropdownItemClick: onDropdownItemClick }) })] }));
 };
 
 var x = Object.defineProperty;