@erpsquad/common 1.8.41 → 1.8.42

package/dist/components/dynamic-layout-wrapper/dynamic-layout-wrapper/index.esm.js

@@ -81,8 +81,114 @@ const DynamicLayoutWrapper = ({
     /* @__PURE__ */ jsx(ExpandableSummaryWrapper, { ...mergedSummaryProps })
   ] });
 };
+const AdvancedDynamicLayoutWrapper = ({
+  multipleSummaries = [],
+  layoutMode = "horizontal",
+  minMainContentSize = 4,
+  minSummarySize = 2,
+  responsiveConfig,
+  ...baseProps
+}) => {
+  var _a;
+  const [summaryStates, setSummaryStates] = useState({});
+  const totalSummarySize = useMemo(() => {
+    return Object.values(summaryStates).reduce((total, state) => total + state.size, 0);
+  }, [summaryStates]);
+  const handleMultipleSummaryToggle = useCallback((summaryId, isExpanded, summaryGridSize) => {
+    setSummaryStates((prev) => {
+      var _a2;
+      const newStates = {
+        ...prev,
+        [summaryId]: { size: summaryGridSize, expanded: isExpanded }
+      };
+      const newTotalSize = Object.values(newStates).reduce((total, state) => total + state.size, 0);
+      const newMainSize = Math.max(
+        minMainContentSize,
+        Math.min(baseProps.maxGridSize - newTotalSize, baseProps.maxGridSize)
+      );
+      (_a2 = baseProps.onLayoutChange) == null ? void 0 : _a2.call(baseProps, newMainSize, newTotalSize, isExpanded);
+      return newStates;
+    });
+  }, [baseProps, minMainContentSize]);
+  if (multipleSummaries.length > 0) {
+    const mainSize = Math.max(
+      minMainContentSize,
+      (baseProps.maxGridSize || 12) - totalSummarySize
+    );
+    return /* @__PURE__ */ jsxs(Grid, { container: true, ...baseProps.containerProps, children: [
+      /* @__PURE__ */ jsx(
+        Grid,
+        {
+          item: true,
+          xs: mainSize,
+          sx: {
+            transition: baseProps.enableTransitions ? `all ${baseProps.transitionDuration || 300}ms ${baseProps.transitionEasing || "ease-in-out"}` : void 0,
+            ...(_a = baseProps.mainContentProps) == null ? void 0 : _a.sx
+          },
+          ...baseProps.mainContentProps,
+          children: baseProps.children
+        }
+      ),
+      multipleSummaries.map((summary) => /* @__PURE__ */ jsx(
+        ExpandableSummaryWrapper,
+        {
+          ...summary.props,
+          onToggle: (isExpanded, size) => handleMultipleSummaryToggle(summary.id, isExpanded, size),
+          children: summary.content
+        },
+        summary.id
+      ))
+    ] });
+  }
+  return /* @__PURE__ */ jsx(DynamicLayoutWrapper, { ...baseProps });
+};
+const useDynamicLayout = (maxGridSize = 12, defaultSummaryExpanded = true, expandedSize = 3, collapsedSize = 0) => {
+  const [isExpanded, setIsExpanded] = useState(defaultSummaryExpanded);
+  const [summarySize, setSummarySize] = useState(
+    defaultSummaryExpanded ? expandedSize : collapsedSize
+  );
+  const [mainSize, setMainSize] = useState(
+    maxGridSize - (defaultSummaryExpanded ? expandedSize : collapsedSize)
+  );
+  const toggleSummary = useCallback(() => {
+    const newExpanded = !isExpanded;
+    const newSummarySize = newExpanded ? expandedSize : collapsedSize;
+    const newMainSize = maxGridSize - newSummarySize;
+    setIsExpanded(newExpanded);
+    setSummarySize(newSummarySize);
+    setMainSize(newMainSize);
+  }, [isExpanded, expandedSize, collapsedSize, maxGridSize]);
+  const setSummaryState = useCallback((expanded) => {
+    const newSummarySize = expanded ? expandedSize : collapsedSize;
+    const newMainSize = maxGridSize - newSummarySize;
+    setIsExpanded(expanded);
+    setSummarySize(newSummarySize);
+    setMainSize(newMainSize);
+  }, [expandedSize, collapsedSize, maxGridSize]);
+  return {
+    isExpanded,
+    summarySize,
+    mainSize,
+    toggleSummary,
+    setSummaryState
+  };
+};
+const calculateOptimalSizes = (totalSize, contentRatio = 0.75, minContentSize = 4, minSummarySize = 2) => {
+  const idealContentSize = Math.floor(totalSize * contentRatio);
+  const idealSummarySize = totalSize - idealContentSize;
+  const contentSize = Math.max(minContentSize, idealContentSize);
+  const summarySize = Math.max(minSummarySize, Math.min(idealSummarySize, totalSize - contentSize));
+  return {
+    contentSize: Math.min(contentSize, totalSize - summarySize),
+    summarySize,
+    totalUsed: contentSize + summarySize
+  };
+};
 export {
+  AdvancedDynamicLayoutWrapper,
   DynamicLayoutWrapper,
-  DynamicLayoutWrapper as default
+  calculateOptimalSizes,
+  DynamicLayoutWrapper as default,
+  useDynamicLayout
 };
 //# sourceMappingURL=index.esm.js.map

package/dist/components/dynamic-layout-wrapper/dynamic-layout-wrapper/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/components/dynamic-layout-wrapper/dynamic-layout-wrapper.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\n/* eslint-disable unused-imports/no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { Grid, GridProps, useMediaQuery, useTheme } from '@mui/material';\nimport ExpandableSummaryWrapper, { ExpandableSummaryWrapperProps } from '../expandable-summary-wrapper/expandable-summary-wrapper';\n// import { ExpandableSummaryWrapper, ExpandableSummaryWrapperProps } from './ExpandableSummaryWrapper';\n\ninterface DynamicLayoutWrapperProps {\n  // Main content props\n  children: React.ReactNode;\n  mainContentProps?: Omit<GridProps, 'item' | 'xs'>;\n  \n  // Summary wrapper props\n  summaryContent: React.ReactNode;\n  summaryProps?: Omit<ExpandableSummaryWrapperProps, 'children' | 'onToggle'>;\n  \n  // Layout configuration\n  maxGridSize?: number;\n  defaultSummaryExpanded?: boolean;\n  expandedSummarySize?: number;\n  collapsedSummarySize?: number;\n  \n  // Container props\n  containerProps?: Omit<GridProps, 'container'>;\n  \n  // Callbacks\n  onLayoutChange?: (mainSize: number, summarySize: number, isExpanded: boolean) => void;\n  \n  // Animation configuration\n  enableTransitions?: boolean;\n  transitionDuration?: number | string;\n  transitionEasing?: string;\n\n  storageKey?: string\n}\n\nexport const DynamicLayoutWrapper: React.FC<DynamicLayoutWrapperProps> = ({\n  children,\n  mainContentProps = {},\n  summaryContent,\n  summaryProps = {},\n  maxGridSize = 12,\n  defaultSummaryExpanded = true,\n  expandedSummarySize = 3,\n  collapsedSummarySize = 0,\n  containerProps = {},\n  onLayoutChange,\n  enableTransitions = true,\n  transitionDuration,\n  transitionEasing,\n  storageKey = 'grid-summary-panel-state',\n}) => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n\n  const getInitialState = useCallback(() => {\n    if (typeof window !== 'undefined') {\n      const stored = localStorage.getItem(storageKey);\n      return stored ? JSON.parse(stored) : defaultSummaryExpanded;\n    }\n    return defaultSummaryExpanded;\n  }, [defaultSummaryExpanded, storageKey]);\n  \n  // Calculate initial main content size\n  const initialMainSize = useMemo(() => {\n    return (isMobile || !getInitialState()) ? maxGridSize :(defaultSummaryExpanded \n      ? maxGridSize - expandedSummarySize \n      : maxGridSize - collapsedSummarySize);\n  }, [isMobile, getInitialState, maxGridSize, defaultSummaryExpanded, expandedSummarySize, collapsedSummarySize]);\n  \n  const [mainContentSize, setMainContentSize] = useState<number>(initialMainSize);\n  \n  // Handle summary toggle with enhanced logic\n  const handleSummaryToggle = useCallback((isExpanded: boolean, summaryGridSize: number) => {\n    if(isMobile) {\n      setMainContentSize(maxGridSize);\n      return \n    }\n    const newMainContentSize = Math.max(1, Math.min(maxGridSize - summaryGridSize, maxGridSize));\n    \n    setMainContentSize(newMainContentSize);\n    \n    // Notify parent component of layout changes\n    onLayoutChange?.(newMainContentSize, summaryGridSize, isExpanded);\n  }, [isMobile, maxGridSize, onLayoutChange]);\n  \n  // Create transition styles\n  const transitionStyles = useMemo(() => {\n    if (!enableTransitions) return {};\n    \n    const duration = transitionDuration || theme.transitions.duration.enteringScreen;\n    const easing = transitionEasing || theme.transitions.easing.sharp;\n    \n    return {\n      transition: theme.transitions.create(['flex-basis', 'max-width'], {\n        easing,\n        duration,\n      }),\n    };\n  }, [enableTransitions, theme, transitionDuration, transitionEasing]);\n  \n  // Merge summary props with defaults\n  const mergedSummaryProps: ExpandableSummaryWrapperProps = {\n    defaultExpanded: defaultSummaryExpanded,\n    expandedGridSize: expandedSummarySize,\n    collapsedGridSize: collapsedSummarySize,\n    persistState: true,\n    ariaLabel: 'Toggle summary panel',\n    ...summaryProps,\n    onToggle: handleSummaryToggle,\n    children: summaryContent,\n    storageKey: storageKey\n  };\n  \n  return (\n    <Grid container {...containerProps}>\n      <Grid\n        item\n        xs={mainContentSize}\n        sx={{\n          ...transitionStyles,\n          ...mainContentProps.sx,\n        }}\n        {...mainContentProps}\n      >\n        {children}\n      </Grid>\n      \n      <ExpandableSummaryWrapper  {...mergedSummaryProps} />\n    </Grid>\n  );\n};\n\n// Enhanced version with additional features\ninterface AdvancedDynamicLayoutWrapperProps extends DynamicLayoutWrapperProps {\n  // Responsive breakpoints\n  responsiveConfig?: {\n    xs?: { expandedSize: number; collapsedSize: number };\n    sm?: { expandedSize: number; collapsedSize: number };\n    md?: { expandedSize: number; collapsedSize: number };\n    lg?: { expandedSize: number; collapsedSize: number };\n    xl?: { expandedSize: number; collapsedSize: number };\n  };\n  \n  // Multiple summary panels support\n  multipleSummaries?: Array<{\n    content: React.ReactNode;\n    props?: Omit<ExpandableSummaryWrapperProps, 'children' | 'onToggle'>;\n    id: string;\n  }>;\n  \n  // Layout modes\n  layoutMode?: 'horizontal' | 'vertical' | 'adaptive';\n  \n  // Minimum sizes\n  minMainContentSize?: number;\n  minSummarySize?: number;\n}\n\nexport const AdvancedDynamicLayoutWrapper: React.FC<AdvancedDynamicLayoutWrapperProps> = ({\n  multipleSummaries = [],\n  layoutMode = 'horizontal',\n  minMainContentSize = 4,\n  minSummarySize = 2,\n  responsiveConfig,\n  ...baseProps\n}) => {\n  const [summaryStates, setSummaryStates] = useState<Record<string, { size: number; expanded: boolean }>>({});\n  \n  // Calculate total summary size\n  const totalSummarySize = useMemo(() => {\n    return Object.values(summaryStates).reduce((total, state) => total + state.size, 0);\n  }, [summaryStates]);\n  \n  // Enhanced toggle handler for multiple summaries\n  const handleMultipleSummaryToggle = useCallback((\n    summaryId: string,\n    isExpanded: boolean,\n    summaryGridSize: number\n  ) => {\n    setSummaryStates(prev => {\n      const newStates = {\n        ...prev,\n        [summaryId]: { size: summaryGridSize, expanded: isExpanded }\n      };\n      \n      const newTotalSize = Object.values(newStates).reduce((total, state) => total + state.size, 0);\n      const newMainSize = Math.max(\n        minMainContentSize,\n        Math.min(baseProps.maxGridSize! - newTotalSize, baseProps.maxGridSize!)\n      );\n      \n      baseProps.onLayoutChange?.(newMainSize, newTotalSize, isExpanded);\n      \n      return newStates;\n    });\n  }, [baseProps, minMainContentSize]);\n  \n  // If multiple summaries are provided, render advanced layout\n  if (multipleSummaries.length > 0) {\n    const mainSize = Math.max(\n      minMainContentSize,\n      (baseProps.maxGridSize || 12) - totalSummarySize\n    );\n    \n    return (\n      <Grid container {...baseProps.containerProps}>\n        <Grid\n          item\n          xs={mainSize}\n          sx={{\n            transition: baseProps.enableTransitions ? \n              `all ${baseProps.transitionDuration || 300}ms ${baseProps.transitionEasing || 'ease-in-out'}` : \n              undefined,\n            ...baseProps.mainContentProps?.sx,\n          }}\n          {...baseProps.mainContentProps}\n        >\n          {baseProps.children}\n        </Grid>\n        \n        {multipleSummaries.map((summary) => (\n          <ExpandableSummaryWrapper\n            key={summary.id}\n            {...summary.props}\n            onToggle={(isExpanded, size) => \n              handleMultipleSummaryToggle(summary.id, isExpanded, size)\n            }\n          >\n            {summary.content}\n          </ExpandableSummaryWrapper>\n        ))}\n      </Grid>\n    );\n  }\n  \n  // Fallback to basic layout\n  return <DynamicLayoutWrapper {...baseProps} />;\n};\n\n// Hook for managing layout state externally\nexport const useDynamicLayout = (\n  maxGridSize: number = 12,\n  defaultSummaryExpanded: boolean = true,\n  expandedSize: number = 3,\n  collapsedSize: number = 0\n) => {\n  const [isExpanded, setIsExpanded] = useState(defaultSummaryExpanded);\n  const [summarySize, setSummarySize] = useState(\n    defaultSummaryExpanded ? expandedSize : collapsedSize\n  );\n  const [mainSize, setMainSize] = useState(\n    maxGridSize - (defaultSummaryExpanded ? expandedSize : collapsedSize)\n  );\n  \n  const toggleSummary = useCallback(() => {\n    const newExpanded = !isExpanded;\n    const newSummarySize = newExpanded ? expandedSize : collapsedSize;\n    const newMainSize = maxGridSize - newSummarySize;\n    \n    setIsExpanded(newExpanded);\n    setSummarySize(newSummarySize);\n    setMainSize(newMainSize);\n  }, [isExpanded, expandedSize, collapsedSize, maxGridSize]);\n  \n  const setSummaryState = useCallback((expanded: boolean) => {\n    const newSummarySize = expanded ? expandedSize : collapsedSize;\n    const newMainSize = maxGridSize - newSummarySize;\n    \n    setIsExpanded(expanded);\n    setSummarySize(newSummarySize);\n    setMainSize(newMainSize);\n  }, [expandedSize, collapsedSize, maxGridSize]);\n  \n  return {\n    isExpanded,\n    summarySize,\n    mainSize,\n    toggleSummary,\n    setSummaryState,\n  };\n};\n\n// Utility function for calculating optimal sizes\nexport const calculateOptimalSizes = (\n  totalSize: number,\n  contentRatio: number = 0.75,\n  minContentSize: number = 4,\n  minSummarySize: number = 2\n) => {\n  const idealContentSize = Math.floor(totalSize * contentRatio);\n  const idealSummarySize = totalSize - idealContentSize;\n  \n  const contentSize = Math.max(minContentSize, idealContentSize);\n  const summarySize = Math.max(minSummarySize, Math.min(idealSummarySize, totalSize - contentSize));\n  \n  return {\n    contentSize: Math.min(contentSize, totalSize - summarySize),\n    summarySize,\n    totalUsed: contentSize + summarySize,\n  };\n};\n\nexport default DynamicLayoutWrapper;"],"names":[],"mappings":";;;;;;AAqCO,MAAM,uBAA4D,CAAC;AAAA,EACxE;AAAA,EACA,mBAAmB,CAAA;AAAA,EACnB;AAAA,EACA,eAAe,CAAA;AAAA,EACf,cAAc;AAAA,EACd,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,iBAAiB,CAAA;AAAA,EACjB;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAM;AACJ,QAAM,QAAQ,SAAA;AACd,QAAM,WAAW,cAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAE3D,QAAM,kBAAkB,YAAY,MAAM;AACxC,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,SAAS,aAAa,QAAQ,UAAU;AAC9C,aAAO,SAAS,KAAK,MAAM,MAAM,IAAI;AAAA,IACvC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,wBAAwB,UAAU,CAAC;AAGvC,QAAM,kBAAkB,QAAQ,MAAM;AACpC,WAAQ,YAAY,CAAC,oBAAqB,cAAc,yBACpD,cAAc,sBACd,cAAc;AAAA,EACpB,GAAG,CAAC,UAAU,iBAAiB,aAAa,wBAAwB,qBAAqB,oBAAoB,CAAC;AAE9G,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAiB,eAAe;AAG9E,QAAM,sBAAsB,YAAY,CAAC,YAAqB,oBAA4B;AACxF,QAAG,UAAU;AACX,yBAAmB,WAAW;AAC9B;AAAA,IACF;AACA,UAAM,qBAAqB,KAAK,IAAI,GAAG,KAAK,IAAI,cAAc,iBAAiB,WAAW,CAAC;AAE3F,uBAAmB,kBAAkB;AAGrC,qDAAiB,oBAAoB,iBAAiB;AAAA,EACxD,GAAG,CAAC,UAAU,aAAa,cAAc,CAAC;AAG1C,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,CAAC,kBAAmB,QAAO,CAAA;AAE/B,UAAM,WAAW,sBAAsB,MAAM,YAAY,SAAS;AAClE,UAAM,SAAS,oBAAoB,MAAM,YAAY,OAAO;AAE5D,WAAO;AAAA,MACL,YAAY,MAAM,YAAY,OAAO,CAAC,cAAc,WAAW,GAAG;AAAA,QAChE;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL,GAAG,CAAC,mBAAmB,OAAO,oBAAoB,gBAAgB,CAAC;AAGnE,QAAM,qBAAoD;AAAA,IACxD,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,GAAG;AAAA,IACH,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA,EAAA;AAGF,SACE,qBAAC,MAAA,EAAK,WAAS,MAAE,GAAG,gBAClB,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,UACF,GAAG;AAAA,UACH,GAAG,iBAAiB;AAAA,QAAA;AAAA,QAErB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH,oBAAC,0BAAA,EAA2B,GAAG,mBAAA,CAAoB;AAAA,EAAA,GACrD;AAEJ;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/dynamic-layout-wrapper/dynamic-layout-wrapper.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\n/* eslint-disable unused-imports/no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { Grid, GridProps, useMediaQuery, useTheme } from '@mui/material';\nimport ExpandableSummaryWrapper, { ExpandableSummaryWrapperProps } from '../expandable-summary-wrapper/expandable-summary-wrapper';\n// import { ExpandableSummaryWrapper, ExpandableSummaryWrapperProps } from './ExpandableSummaryWrapper';\n\ninterface DynamicLayoutWrapperProps {\n  // Main content props\n  children: React.ReactNode;\n  mainContentProps?: Omit<GridProps, 'item' | 'xs'>;\n  \n  // Summary wrapper props\n  summaryContent: React.ReactNode;\n  summaryProps?: Omit<ExpandableSummaryWrapperProps, 'children' | 'onToggle'>;\n  \n  // Layout configuration\n  maxGridSize?: number;\n  defaultSummaryExpanded?: boolean;\n  expandedSummarySize?: number;\n  collapsedSummarySize?: number;\n  \n  // Container props\n  containerProps?: Omit<GridProps, 'container'>;\n  \n  // Callbacks\n  onLayoutChange?: (mainSize: number, summarySize: number, isExpanded: boolean) => void;\n  \n  // Animation configuration\n  enableTransitions?: boolean;\n  transitionDuration?: number | string;\n  transitionEasing?: string;\n\n  storageKey?: string\n}\n\nexport const DynamicLayoutWrapper: React.FC<DynamicLayoutWrapperProps> = ({\n  children,\n  mainContentProps = {},\n  summaryContent,\n  summaryProps = {},\n  maxGridSize = 12,\n  defaultSummaryExpanded = true,\n  expandedSummarySize = 3,\n  collapsedSummarySize = 0,\n  containerProps = {},\n  onLayoutChange,\n  enableTransitions = true,\n  transitionDuration,\n  transitionEasing,\n  storageKey = 'grid-summary-panel-state',\n}) => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n\n  const getInitialState = useCallback(() => {\n    if (typeof window !== 'undefined') {\n      const stored = localStorage.getItem(storageKey);\n      return stored ? JSON.parse(stored) : defaultSummaryExpanded;\n    }\n    return defaultSummaryExpanded;\n  }, [defaultSummaryExpanded, storageKey]);\n  \n  // Calculate initial main content size\n  const initialMainSize = useMemo(() => {\n    return (isMobile || !getInitialState()) ? maxGridSize :(defaultSummaryExpanded \n      ? maxGridSize - expandedSummarySize \n      : maxGridSize - collapsedSummarySize);\n  }, [isMobile, getInitialState, maxGridSize, defaultSummaryExpanded, expandedSummarySize, collapsedSummarySize]);\n  \n  const [mainContentSize, setMainContentSize] = useState<number>(initialMainSize);\n  \n  // Handle summary toggle with enhanced logic\n  const handleSummaryToggle = useCallback((isExpanded: boolean, summaryGridSize: number) => {\n    if(isMobile) {\n      setMainContentSize(maxGridSize);\n      return \n    }\n    const newMainContentSize = Math.max(1, Math.min(maxGridSize - summaryGridSize, maxGridSize));\n    \n    setMainContentSize(newMainContentSize);\n    \n    // Notify parent component of layout changes\n    onLayoutChange?.(newMainContentSize, summaryGridSize, isExpanded);\n  }, [isMobile, maxGridSize, onLayoutChange]);\n  \n  // Create transition styles\n  const transitionStyles = useMemo(() => {\n    if (!enableTransitions) return {};\n    \n    const duration = transitionDuration || theme.transitions.duration.enteringScreen;\n    const easing = transitionEasing || theme.transitions.easing.sharp;\n    \n    return {\n      transition: theme.transitions.create(['flex-basis', 'max-width'], {\n        easing,\n        duration,\n      }),\n    };\n  }, [enableTransitions, theme, transitionDuration, transitionEasing]);\n  \n  // Merge summary props with defaults\n  const mergedSummaryProps: ExpandableSummaryWrapperProps = {\n    defaultExpanded: defaultSummaryExpanded,\n    expandedGridSize: expandedSummarySize,\n    collapsedGridSize: collapsedSummarySize,\n    persistState: true,\n    ariaLabel: 'Toggle summary panel',\n    ...summaryProps,\n    onToggle: handleSummaryToggle,\n    children: summaryContent,\n    storageKey: storageKey\n  };\n  \n  return (\n    <Grid container {...containerProps}>\n      <Grid\n        item\n        xs={mainContentSize}\n        sx={{\n          ...transitionStyles,\n          ...mainContentProps.sx,\n        }}\n        {...mainContentProps}\n      >\n        {children}\n      </Grid>\n      \n      <ExpandableSummaryWrapper  {...mergedSummaryProps} />\n    </Grid>\n  );\n};\n\n// Enhanced version with additional features\ninterface AdvancedDynamicLayoutWrapperProps extends DynamicLayoutWrapperProps {\n  // Responsive breakpoints\n  responsiveConfig?: {\n    xs?: { expandedSize: number; collapsedSize: number };\n    sm?: { expandedSize: number; collapsedSize: number };\n    md?: { expandedSize: number; collapsedSize: number };\n    lg?: { expandedSize: number; collapsedSize: number };\n    xl?: { expandedSize: number; collapsedSize: number };\n  };\n  \n  // Multiple summary panels support\n  multipleSummaries?: Array<{\n    content: React.ReactNode;\n    props?: Omit<ExpandableSummaryWrapperProps, 'children' | 'onToggle'>;\n    id: string;\n  }>;\n  \n  // Layout modes\n  layoutMode?: 'horizontal' | 'vertical' | 'adaptive';\n  \n  // Minimum sizes\n  minMainContentSize?: number;\n  minSummarySize?: number;\n}\n\nexport const AdvancedDynamicLayoutWrapper: React.FC<AdvancedDynamicLayoutWrapperProps> = ({\n  multipleSummaries = [],\n  layoutMode = 'horizontal',\n  minMainContentSize = 4,\n  minSummarySize = 2,\n  responsiveConfig,\n  ...baseProps\n}) => {\n  const [summaryStates, setSummaryStates] = useState<Record<string, { size: number; expanded: boolean }>>({});\n  \n  // Calculate total summary size\n  const totalSummarySize = useMemo(() => {\n    return Object.values(summaryStates).reduce((total, state) => total + state.size, 0);\n  }, [summaryStates]);\n  \n  // Enhanced toggle handler for multiple summaries\n  const handleMultipleSummaryToggle = useCallback((\n    summaryId: string,\n    isExpanded: boolean,\n    summaryGridSize: number\n  ) => {\n    setSummaryStates(prev => {\n      const newStates = {\n        ...prev,\n        [summaryId]: { size: summaryGridSize, expanded: isExpanded }\n      };\n      \n      const newTotalSize = Object.values(newStates).reduce((total, state) => total + state.size, 0);\n      const newMainSize = Math.max(\n        minMainContentSize,\n        Math.min(baseProps.maxGridSize! - newTotalSize, baseProps.maxGridSize!)\n      );\n      \n      baseProps.onLayoutChange?.(newMainSize, newTotalSize, isExpanded);\n      \n      return newStates;\n    });\n  }, [baseProps, minMainContentSize]);\n  \n  // If multiple summaries are provided, render advanced layout\n  if (multipleSummaries.length > 0) {\n    const mainSize = Math.max(\n      minMainContentSize,\n      (baseProps.maxGridSize || 12) - totalSummarySize\n    );\n    \n    return (\n      <Grid container {...baseProps.containerProps}>\n        <Grid\n          item\n          xs={mainSize}\n          sx={{\n            transition: baseProps.enableTransitions ? \n              `all ${baseProps.transitionDuration || 300}ms ${baseProps.transitionEasing || 'ease-in-out'}` : \n              undefined,\n            ...baseProps.mainContentProps?.sx,\n          }}\n          {...baseProps.mainContentProps}\n        >\n          {baseProps.children}\n        </Grid>\n        \n        {multipleSummaries.map((summary) => (\n          <ExpandableSummaryWrapper\n            key={summary.id}\n            {...summary.props}\n            onToggle={(isExpanded, size) => \n              handleMultipleSummaryToggle(summary.id, isExpanded, size)\n            }\n          >\n            {summary.content}\n          </ExpandableSummaryWrapper>\n        ))}\n      </Grid>\n    );\n  }\n  \n  // Fallback to basic layout\n  return <DynamicLayoutWrapper {...baseProps} />;\n};\n\n// Hook for managing layout state externally\nexport const useDynamicLayout = (\n  maxGridSize: number = 12,\n  defaultSummaryExpanded: boolean = true,\n  expandedSize: number = 3,\n  collapsedSize: number = 0\n) => {\n  const [isExpanded, setIsExpanded] = useState(defaultSummaryExpanded);\n  const [summarySize, setSummarySize] = useState(\n    defaultSummaryExpanded ? expandedSize : collapsedSize\n  );\n  const [mainSize, setMainSize] = useState(\n    maxGridSize - (defaultSummaryExpanded ? expandedSize : collapsedSize)\n  );\n  \n  const toggleSummary = useCallback(() => {\n    const newExpanded = !isExpanded;\n    const newSummarySize = newExpanded ? expandedSize : collapsedSize;\n    const newMainSize = maxGridSize - newSummarySize;\n    \n    setIsExpanded(newExpanded);\n    setSummarySize(newSummarySize);\n    setMainSize(newMainSize);\n  }, [isExpanded, expandedSize, collapsedSize, maxGridSize]);\n  \n  const setSummaryState = useCallback((expanded: boolean) => {\n    const newSummarySize = expanded ? expandedSize : collapsedSize;\n    const newMainSize = maxGridSize - newSummarySize;\n    \n    setIsExpanded(expanded);\n    setSummarySize(newSummarySize);\n    setMainSize(newMainSize);\n  }, [expandedSize, collapsedSize, maxGridSize]);\n  \n  return {\n    isExpanded,\n    summarySize,\n    mainSize,\n    toggleSummary,\n    setSummaryState,\n  };\n};\n\n// Utility function for calculating optimal sizes\nexport const calculateOptimalSizes = (\n  totalSize: number,\n  contentRatio: number = 0.75,\n  minContentSize: number = 4,\n  minSummarySize: number = 2\n) => {\n  const idealContentSize = Math.floor(totalSize * contentRatio);\n  const idealSummarySize = totalSize - idealContentSize;\n  \n  const contentSize = Math.max(minContentSize, idealContentSize);\n  const summarySize = Math.max(minSummarySize, Math.min(idealSummarySize, totalSize - contentSize));\n  \n  return {\n    contentSize: Math.min(contentSize, totalSize - summarySize),\n    summarySize,\n    totalUsed: contentSize + summarySize,\n  };\n};\n\nexport default DynamicLayoutWrapper;"],"names":["_a"],"mappings":"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"}

package/dist/components/dynamic-layout-wrapper/dynamic-layout-wrapper/index.js

@@ -1,5 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),a=require("../../expandable-summary-wrapper/expandable-summary-wrapper/index.js"),t=require("../../../node_modules/@mui/material/styles/useTheme/index.js"),n=require("../../../node_modules/@mui/system/esm/useMediaQuery/useMediaQuery/index.js"),s=require("../../../node_modules/@mui/material/Grid/Grid/index.js");const i=({children:i,mainContentProps:u={},summaryContent:d,summaryProps:o={},maxGridSize:l=12,defaultSummaryExpanded:m=!0,expandedSummarySize:p=3,collapsedSummarySize:x=0,containerProps:c={},onLayoutChange:y,enableTransitions:f=!0,transitionDuration:g,transitionEasing:S,storageKey:h="grid-summary-panel-state"})=>{const b=t.default(),j=n.default(b.breakpoints.down("md")),M=r.useCallback(()=>{if("undefined"!=typeof window){const e=localStorage.getItem(h);return e?JSON.parse(e):m}return m},[m,h]),q=r.useMemo(()=>j||!M()?l:m?l-p:l-x,[j,M,l,m,p,x]),[w,z]=r.useState(q),C=r.useCallback((e,r)=>{if(j)return void z(l);const a=Math.max(1,Math.min(l-r,l));z(a),null==y||y(a,r,e)},[j,l,y]),G=r.useMemo(()=>{if(!f)return{};const e=g||b.transitions.duration.enteringScreen,r=S||b.transitions.easing.sharp;return{transition:b.transitions.create(["flex-basis","max-width"],{easing:r,duration:e})}},[f,b,g,S]),_={defaultExpanded:m,expandedGridSize:p,collapsedGridSize:x,persistState:!0,ariaLabel:"Toggle summary panel",...o,onToggle:C,children:d,storageKey:h};/* @__PURE__ */
-return e.jsxs(s.default,{container:!0,...c,children:[
-/* @__PURE__ */e.jsx(s.default,{item:!0,xs:w,sx:{...G,...u.sx},...u,children:i}),
-/* @__PURE__ */e.jsx(a.default,{..._})]})};exports.DynamicLayoutWrapper=i,exports.default=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),t=require("../../expandable-summary-wrapper/expandable-summary-wrapper/index.js"),n=require("../../../node_modules/@mui/material/styles/useTheme/index.js"),r=require("../../../node_modules/@mui/system/esm/useMediaQuery/useMediaQuery/index.js"),i=require("../../../node_modules/@mui/material/Grid/Grid/index.js");const s=({children:s,mainContentProps:o={},summaryContent:u,summaryProps:d={},maxGridSize:l=12,defaultSummaryExpanded:m=!0,expandedSummarySize:c=3,collapsedSummarySize:p=0,containerProps:x={},onLayoutChange:S,enableTransitions:y=!0,transitionDuration:h,transitionEasing:g,storageKey:f="grid-summary-panel-state"})=>{const z=n.default(),M=r.default(z.breakpoints.down("md")),b=a.useCallback(()=>{if("undefined"!=typeof window){const e=localStorage.getItem(f);return e?JSON.parse(e):m}return m},[m,f]),j=a.useMemo(()=>M||!b()?l:m?l-c:l-p,[M,b,l,m,c,p]),[C,v]=a.useState(j),G=a.useCallback((e,a)=>{if(M)return void v(l);const t=Math.max(1,Math.min(l-a,l));v(t),null==S||S(t,a,e)},[M,l,S]),P=a.useMemo(()=>{if(!y)return{};const e=h||z.transitions.duration.enteringScreen,a=g||z.transitions.easing.sharp;return{transition:z.transitions.create(["flex-basis","max-width"],{easing:a,duration:e})}},[y,z,h,g]),k={defaultExpanded:m,expandedGridSize:c,collapsedGridSize:p,persistState:!0,ariaLabel:"Toggle summary panel",...d,onToggle:G,children:u,storageKey:f};/* @__PURE__ */
+return e.jsxs(i.default,{container:!0,...x,children:[
+/* @__PURE__ */e.jsx(i.default,{item:!0,xs:C,sx:{...P,...o.sx},...o,children:s}),
+/* @__PURE__ */e.jsx(t.default,{...k})]})};exports.AdvancedDynamicLayoutWrapper=({multipleSummaries:n=[],layoutMode:r="horizontal",minMainContentSize:o=4,minSummarySize:u=2,responsiveConfig:d,...l})=>{var m;const[c,p]=a.useState({}),x=a.useMemo(()=>Object.values(c).reduce((e,a)=>e+a.size,0),[c]),S=a.useCallback((e,a,t)=>{p(n=>{var r;const i={...n,[e]:{size:t,expanded:a}},s=Object.values(i).reduce((e,a)=>e+a.size,0),u=Math.max(o,Math.min(l.maxGridSize-s,l.maxGridSize));return null==(r=l.onLayoutChange)||r.call(l,u,s,a),i})},[l,o]);if(n.length>0){const a=Math.max(o,(l.maxGridSize||12)-x);/* @__PURE__ */
+return e.jsxs(i.default,{container:!0,...l.containerProps,children:[
+/* @__PURE__ */e.jsx(i.default,{item:!0,xs:a,sx:{transition:l.enableTransitions?`all ${l.transitionDuration||300}ms ${l.transitionEasing||"ease-in-out"}`:void 0,...null==(m=l.mainContentProps)?void 0:m.sx},...l.mainContentProps,children:l.children}),n.map(a=>/* @__PURE__ */e.jsx(t.default,{...a.props,onToggle:(e,t)=>S(a.id,e,t),children:a.content},a.id))]})}/* @__PURE__ */
+return e.jsx(s,{...l})},exports.DynamicLayoutWrapper=s,exports.calculateOptimalSizes=(e,a=.75,t=4,n=2)=>{const r=Math.floor(e*a),i=e-r,s=Math.max(t,r),o=Math.max(n,Math.min(i,e-s));return{contentSize:Math.min(s,e-o),summarySize:o,totalUsed:s+o}},exports.default=s,exports.useDynamicLayout=(e=12,t=!0,n=3,r=0)=>{const[i,s]=a.useState(t),[o,u]=a.useState(t?n:r),[d,l]=a.useState(e-(t?n:r)),m=a.useCallback(()=>{const a=!i,t=a?n:r,o=e-t;s(a),u(t),l(o)},[i,n,r,e]),c=a.useCallback(a=>{const t=a?n:r,i=e-t;s(a),u(t),l(i)},[n,r,e]);return{isExpanded:i,summarySize:o,mainSize:d,toggleSummary:m,setSummaryState:c}};
 //# sourceMappingURL=index.js.map

package/dist/components/dynamic-layout-wrapper/dynamic-layout-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/dynamic-layout-wrapper/dynamic-layout-wrapper.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\n/* eslint-disable unused-imports/no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { Grid, GridProps, useMediaQuery, useTheme } from '@mui/material';\nimport ExpandableSummaryWrapper, { ExpandableSummaryWrapperProps } from '../expandable-summary-wrapper/expandable-summary-wrapper';\n// import { ExpandableSummaryWrapper, ExpandableSummaryWrapperProps } from './ExpandableSummaryWrapper';\n\ninterface DynamicLayoutWrapperProps {\n  // Main content props\n  children: React.ReactNode;\n  mainContentProps?: Omit<GridProps, 'item' | 'xs'>;\n  \n  // Summary wrapper props\n  summaryContent: React.ReactNode;\n  summaryProps?: Omit<ExpandableSummaryWrapperProps, 'children' | 'onToggle'>;\n  \n  // Layout configuration\n  maxGridSize?: number;\n  defaultSummaryExpanded?: boolean;\n  expandedSummarySize?: number;\n  collapsedSummarySize?: number;\n  \n  // Container props\n  containerProps?: Omit<GridProps, 'container'>;\n  \n  // Callbacks\n  onLayoutChange?: (mainSize: number, summarySize: number, isExpanded: boolean) => void;\n  \n  // Animation configuration\n  enableTransitions?: boolean;\n  transitionDuration?: number | string;\n  transitionEasing?: string;\n\n  storageKey?: string\n}\n\nexport const DynamicLayoutWrapper: React.FC<DynamicLayoutWrapperProps> = ({\n  children,\n  mainContentProps = {},\n  summaryContent,\n  summaryProps = {},\n  maxGridSize = 12,\n  defaultSummaryExpanded = true,\n  expandedSummarySize = 3,\n  collapsedSummarySize = 0,\n  containerProps = {},\n  onLayoutChange,\n  enableTransitions = true,\n  transitionDuration,\n  transitionEasing,\n  storageKey = 'grid-summary-panel-state',\n}) => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n\n  const getInitialState = useCallback(() => {\n    if (typeof window !== 'undefined') {\n      const stored = localStorage.getItem(storageKey);\n      return stored ? JSON.parse(stored) : defaultSummaryExpanded;\n    }\n    return defaultSummaryExpanded;\n  }, [defaultSummaryExpanded, storageKey]);\n  \n  // Calculate initial main content size\n  const initialMainSize = useMemo(() => {\n    return (isMobile || !getInitialState()) ? maxGridSize :(defaultSummaryExpanded \n      ? maxGridSize - expandedSummarySize \n      : maxGridSize - collapsedSummarySize);\n  }, [isMobile, getInitialState, maxGridSize, defaultSummaryExpanded, expandedSummarySize, collapsedSummarySize]);\n  \n  const [mainContentSize, setMainContentSize] = useState<number>(initialMainSize);\n  \n  // Handle summary toggle with enhanced logic\n  const handleSummaryToggle = useCallback((isExpanded: boolean, summaryGridSize: number) => {\n    if(isMobile) {\n      setMainContentSize(maxGridSize);\n      return \n    }\n    const newMainContentSize = Math.max(1, Math.min(maxGridSize - summaryGridSize, maxGridSize));\n    \n    setMainContentSize(newMainContentSize);\n    \n    // Notify parent component of layout changes\n    onLayoutChange?.(newMainContentSize, summaryGridSize, isExpanded);\n  }, [isMobile, maxGridSize, onLayoutChange]);\n  \n  // Create transition styles\n  const transitionStyles = useMemo(() => {\n    if (!enableTransitions) return {};\n    \n    const duration = transitionDuration || theme.transitions.duration.enteringScreen;\n    const easing = transitionEasing || theme.transitions.easing.sharp;\n    \n    return {\n      transition: theme.transitions.create(['flex-basis', 'max-width'], {\n        easing,\n        duration,\n      }),\n    };\n  }, [enableTransitions, theme, transitionDuration, transitionEasing]);\n  \n  // Merge summary props with defaults\n  const mergedSummaryProps: ExpandableSummaryWrapperProps = {\n    defaultExpanded: defaultSummaryExpanded,\n    expandedGridSize: expandedSummarySize,\n    collapsedGridSize: collapsedSummarySize,\n    persistState: true,\n    ariaLabel: 'Toggle summary panel',\n    ...summaryProps,\n    onToggle: handleSummaryToggle,\n    children: summaryContent,\n    storageKey: storageKey\n  };\n  \n  return (\n    <Grid container {...containerProps}>\n      <Grid\n        item\n        xs={mainContentSize}\n        sx={{\n          ...transitionStyles,\n          ...mainContentProps.sx,\n        }}\n        {...mainContentProps}\n      >\n        {children}\n      </Grid>\n      \n      <ExpandableSummaryWrapper  {...mergedSummaryProps} />\n    </Grid>\n  );\n};\n\n// Enhanced version with additional features\ninterface AdvancedDynamicLayoutWrapperProps extends DynamicLayoutWrapperProps {\n  // Responsive breakpoints\n  responsiveConfig?: {\n    xs?: { expandedSize: number; collapsedSize: number };\n    sm?: { expandedSize: number; collapsedSize: number };\n    md?: { expandedSize: number; collapsedSize: number };\n    lg?: { expandedSize: number; collapsedSize: number };\n    xl?: { expandedSize: number; collapsedSize: number };\n  };\n  \n  // Multiple summary panels support\n  multipleSummaries?: Array<{\n    content: React.ReactNode;\n    props?: Omit<ExpandableSummaryWrapperProps, 'children' | 'onToggle'>;\n    id: string;\n  }>;\n  \n  // Layout modes\n  layoutMode?: 'horizontal' | 'vertical' | 'adaptive';\n  \n  // Minimum sizes\n  minMainContentSize?: number;\n  minSummarySize?: number;\n}\n\nexport const AdvancedDynamicLayoutWrapper: React.FC<AdvancedDynamicLayoutWrapperProps> = ({\n  multipleSummaries = [],\n  layoutMode = 'horizontal',\n  minMainContentSize = 4,\n  minSummarySize = 2,\n  responsiveConfig,\n  ...baseProps\n}) => {\n  const [summaryStates, setSummaryStates] = useState<Record<string, { size: number; expanded: boolean }>>({});\n  \n  // Calculate total summary size\n  const totalSummarySize = useMemo(() => {\n    return Object.values(summaryStates).reduce((total, state) => total + state.size, 0);\n  }, [summaryStates]);\n  \n  // Enhanced toggle handler for multiple summaries\n  const handleMultipleSummaryToggle = useCallback((\n    summaryId: string,\n    isExpanded: boolean,\n    summaryGridSize: number\n  ) => {\n    setSummaryStates(prev => {\n      const newStates = {\n        ...prev,\n        [summaryId]: { size: summaryGridSize, expanded: isExpanded }\n      };\n      \n      const newTotalSize = Object.values(newStates).reduce((total, state) => total + state.size, 0);\n      const newMainSize = Math.max(\n        minMainContentSize,\n        Math.min(baseProps.maxGridSize! - newTotalSize, baseProps.maxGridSize!)\n      );\n      \n      baseProps.onLayoutChange?.(newMainSize, newTotalSize, isExpanded);\n      \n      return newStates;\n    });\n  }, [baseProps, minMainContentSize]);\n  \n  // If multiple summaries are provided, render advanced layout\n  if (multipleSummaries.length > 0) {\n    const mainSize = Math.max(\n      minMainContentSize,\n      (baseProps.maxGridSize || 12) - totalSummarySize\n    );\n    \n    return (\n      <Grid container {...baseProps.containerProps}>\n        <Grid\n          item\n          xs={mainSize}\n          sx={{\n            transition: baseProps.enableTransitions ? \n              `all ${baseProps.transitionDuration || 300}ms ${baseProps.transitionEasing || 'ease-in-out'}` : \n              undefined,\n            ...baseProps.mainContentProps?.sx,\n          }}\n          {...baseProps.mainContentProps}\n        >\n          {baseProps.children}\n        </Grid>\n        \n        {multipleSummaries.map((summary) => (\n          <ExpandableSummaryWrapper\n            key={summary.id}\n            {...summary.props}\n            onToggle={(isExpanded, size) => \n              handleMultipleSummaryToggle(summary.id, isExpanded, size)\n            }\n          >\n            {summary.content}\n          </ExpandableSummaryWrapper>\n        ))}\n      </Grid>\n    );\n  }\n  \n  // Fallback to basic layout\n  return <DynamicLayoutWrapper {...baseProps} />;\n};\n\n// Hook for managing layout state externally\nexport const useDynamicLayout = (\n  maxGridSize: number = 12,\n  defaultSummaryExpanded: boolean = true,\n  expandedSize: number = 3,\n  collapsedSize: number = 0\n) => {\n  const [isExpanded, setIsExpanded] = useState(defaultSummaryExpanded);\n  const [summarySize, setSummarySize] = useState(\n    defaultSummaryExpanded ? expandedSize : collapsedSize\n  );\n  const [mainSize, setMainSize] = useState(\n    maxGridSize - (defaultSummaryExpanded ? expandedSize : collapsedSize)\n  );\n  \n  const toggleSummary = useCallback(() => {\n    const newExpanded = !isExpanded;\n    const newSummarySize = newExpanded ? expandedSize : collapsedSize;\n    const newMainSize = maxGridSize - newSummarySize;\n    \n    setIsExpanded(newExpanded);\n    setSummarySize(newSummarySize);\n    setMainSize(newMainSize);\n  }, [isExpanded, expandedSize, collapsedSize, maxGridSize]);\n  \n  const setSummaryState = useCallback((expanded: boolean) => {\n    const newSummarySize = expanded ? expandedSize : collapsedSize;\n    const newMainSize = maxGridSize - newSummarySize;\n    \n    setIsExpanded(expanded);\n    setSummarySize(newSummarySize);\n    setMainSize(newMainSize);\n  }, [expandedSize, collapsedSize, maxGridSize]);\n  \n  return {\n    isExpanded,\n    summarySize,\n    mainSize,\n    toggleSummary,\n    setSummaryState,\n  };\n};\n\n// Utility function for calculating optimal sizes\nexport const calculateOptimalSizes = (\n  totalSize: number,\n  contentRatio: number = 0.75,\n  minContentSize: number = 4,\n  minSummarySize: number = 2\n) => {\n  const idealContentSize = Math.floor(totalSize * contentRatio);\n  const idealSummarySize = totalSize - idealContentSize;\n  \n  const contentSize = Math.max(minContentSize, idealContentSize);\n  const summarySize = Math.max(minSummarySize, Math.min(idealSummarySize, totalSize - contentSize));\n  \n  return {\n    contentSize: Math.min(contentSize, totalSize - summarySize),\n    summarySize,\n    totalUsed: contentSize + summarySize,\n  };\n};\n\nexport default DynamicLayoutWrapper;"],"names":["DynamicLayoutWrapper","children","mainContentProps","summaryContent","summaryProps","maxGridSize","defaultSummaryExpanded","expandedSummarySize","collapsedSummarySize","containerProps","onLayoutChange","enableTransitions","transitionDuration","transitionEasing","storageKey","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","getInitialState","useCallback","window","stored","localStorage","getItem","JSON","parse","initialMainSize","useMemo","mainContentSize","setMainContentSize","useState","handleSummaryToggle","isExpanded","summaryGridSize","newMainContentSize","Math","max","min","transitionStyles","duration","transitions","enteringScreen","easing","sharp","transition","create","mergedSummaryProps","defaultExpanded","expandedGridSize","collapsedGridSize","persistState","ariaLabel","onToggle","jsxs","Grid","container","jsx","item","xs","sx","ExpandableSummaryWrapper"],"mappings":"kbAqCO,MAAMA,EAA4D,EACvEC,WACAC,mBAAmB,CAAA,EACnBC,iBACAC,eAAe,CAAA,EACfC,cAAc,GACdC,0BAAyB,EACzBC,sBAAsB,EACtBC,uBAAuB,EACvBC,iBAAiB,CAAA,EACjBC,iBACAC,qBAAoB,EACpBC,qBACAC,mBACAC,aAAa,+BAEb,MAAMC,EAAQC,EAAAA,UACRC,EAAWC,EAAAA,QAAcH,EAAMI,YAAYC,KAAK,OAEhDC,EAAkBC,EAAAA,YAAY,KAClC,GAAsB,oBAAXC,OAAwB,CACjC,MAAMC,EAASC,aAAaC,QAAQZ,GACpC,OAAOU,EAASG,KAAKC,MAAMJ,GAAUlB,CACvC,CACA,OAAOA,GACN,CAACA,EAAwBQ,IAGtBe,EAAkBC,EAAAA,QAAQ,IACtBb,IAAaI,IAAqBhB,EAAcC,EACpDD,EAAcE,EACdF,EAAcG,EACjB,CAACS,EAAUI,EAAiBhB,EAAaC,EAAwBC,EAAqBC,KAElFuB,EAAiBC,GAAsBC,EAAAA,SAAiBJ,GAGzDK,EAAsBZ,EAAAA,YAAY,CAACa,EAAqBC,KAC5D,GAAGnB,EAED,YADAe,EAAmB3B,GAGrB,MAAMgC,EAAqBC,KAAKC,IAAI,EAAGD,KAAKE,IAAInC,EAAc+B,EAAiB/B,IAE/E2B,EAAmBK,GAGnB,MAAA3B,GAAAA,EAAiB2B,EAAoBD,EAAiBD,IACrD,CAAClB,EAAUZ,EAAaK,IAGrB+B,EAAmBX,EAAAA,QAAQ,KAC/B,IAAKnB,EAAmB,MAAO,CAAA,EAE/B,MAAM+B,EAAW9B,GAAsBG,EAAM4B,YAAYD,SAASE,eAC5DC,EAAShC,GAAoBE,EAAM4B,YAAYE,OAAOC,MAE5D,MAAO,CACLC,WAAYhC,EAAM4B,YAAYK,OAAO,CAAC,aAAc,aAAc,CAChEH,SACAH,eAGH,CAAC/B,EAAmBI,EAAOH,EAAoBC,IAG5CoC,EAAoD,CACxDC,gBAAiB5C,EACjB6C,iBAAkB5C,EAClB6C,kBAAmB5C,EACnB6C,cAAc,EACdC,UAAW,0BACRlD,EACHmD,SAAUrB,EACVjC,SAAUE,EACVW;AAGF,OACE0C,EAAAA,KAACC,EAAAA,QAAA,CAAKC,WAAS,KAAKjD,EAClBR,SAAA;eAAA0D,EAAAA,IAACF,EAAAA,QAAA,CACCG,MAAI,EACJC,GAAI9B,EACJ+B,GAAI,IACCrB,KACAvC,EAAiB4D,OAElB5D,EAEHD;qBAGF8D,EAAAA,QAAA,IAA8Bd"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/dynamic-layout-wrapper/dynamic-layout-wrapper.tsx"],"sourcesContent":["/* eslint-disable react-refresh/only-export-components */\n/* eslint-disable unused-imports/no-unused-vars */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport { Grid, GridProps, useMediaQuery, useTheme } from '@mui/material';\nimport ExpandableSummaryWrapper, { ExpandableSummaryWrapperProps } from '../expandable-summary-wrapper/expandable-summary-wrapper';\n// import { ExpandableSummaryWrapper, ExpandableSummaryWrapperProps } from './ExpandableSummaryWrapper';\n\ninterface DynamicLayoutWrapperProps {\n  // Main content props\n  children: React.ReactNode;\n  mainContentProps?: Omit<GridProps, 'item' | 'xs'>;\n  \n  // Summary wrapper props\n  summaryContent: React.ReactNode;\n  summaryProps?: Omit<ExpandableSummaryWrapperProps, 'children' | 'onToggle'>;\n  \n  // Layout configuration\n  maxGridSize?: number;\n  defaultSummaryExpanded?: boolean;\n  expandedSummarySize?: number;\n  collapsedSummarySize?: number;\n  \n  // Container props\n  containerProps?: Omit<GridProps, 'container'>;\n  \n  // Callbacks\n  onLayoutChange?: (mainSize: number, summarySize: number, isExpanded: boolean) => void;\n  \n  // Animation configuration\n  enableTransitions?: boolean;\n  transitionDuration?: number | string;\n  transitionEasing?: string;\n\n  storageKey?: string\n}\n\nexport const DynamicLayoutWrapper: React.FC<DynamicLayoutWrapperProps> = ({\n  children,\n  mainContentProps = {},\n  summaryContent,\n  summaryProps = {},\n  maxGridSize = 12,\n  defaultSummaryExpanded = true,\n  expandedSummarySize = 3,\n  collapsedSummarySize = 0,\n  containerProps = {},\n  onLayoutChange,\n  enableTransitions = true,\n  transitionDuration,\n  transitionEasing,\n  storageKey = 'grid-summary-panel-state',\n}) => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'));\n\n  const getInitialState = useCallback(() => {\n    if (typeof window !== 'undefined') {\n      const stored = localStorage.getItem(storageKey);\n      return stored ? JSON.parse(stored) : defaultSummaryExpanded;\n    }\n    return defaultSummaryExpanded;\n  }, [defaultSummaryExpanded, storageKey]);\n  \n  // Calculate initial main content size\n  const initialMainSize = useMemo(() => {\n    return (isMobile || !getInitialState()) ? maxGridSize :(defaultSummaryExpanded \n      ? maxGridSize - expandedSummarySize \n      : maxGridSize - collapsedSummarySize);\n  }, [isMobile, getInitialState, maxGridSize, defaultSummaryExpanded, expandedSummarySize, collapsedSummarySize]);\n  \n  const [mainContentSize, setMainContentSize] = useState<number>(initialMainSize);\n  \n  // Handle summary toggle with enhanced logic\n  const handleSummaryToggle = useCallback((isExpanded: boolean, summaryGridSize: number) => {\n    if(isMobile) {\n      setMainContentSize(maxGridSize);\n      return \n    }\n    const newMainContentSize = Math.max(1, Math.min(maxGridSize - summaryGridSize, maxGridSize));\n    \n    setMainContentSize(newMainContentSize);\n    \n    // Notify parent component of layout changes\n    onLayoutChange?.(newMainContentSize, summaryGridSize, isExpanded);\n  }, [isMobile, maxGridSize, onLayoutChange]);\n  \n  // Create transition styles\n  const transitionStyles = useMemo(() => {\n    if (!enableTransitions) return {};\n    \n    const duration = transitionDuration || theme.transitions.duration.enteringScreen;\n    const easing = transitionEasing || theme.transitions.easing.sharp;\n    \n    return {\n      transition: theme.transitions.create(['flex-basis', 'max-width'], {\n        easing,\n        duration,\n      }),\n    };\n  }, [enableTransitions, theme, transitionDuration, transitionEasing]);\n  \n  // Merge summary props with defaults\n  const mergedSummaryProps: ExpandableSummaryWrapperProps = {\n    defaultExpanded: defaultSummaryExpanded,\n    expandedGridSize: expandedSummarySize,\n    collapsedGridSize: collapsedSummarySize,\n    persistState: true,\n    ariaLabel: 'Toggle summary panel',\n    ...summaryProps,\n    onToggle: handleSummaryToggle,\n    children: summaryContent,\n    storageKey: storageKey\n  };\n  \n  return (\n    <Grid container {...containerProps}>\n      <Grid\n        item\n        xs={mainContentSize}\n        sx={{\n          ...transitionStyles,\n          ...mainContentProps.sx,\n        }}\n        {...mainContentProps}\n      >\n        {children}\n      </Grid>\n      \n      <ExpandableSummaryWrapper  {...mergedSummaryProps} />\n    </Grid>\n  );\n};\n\n// Enhanced version with additional features\ninterface AdvancedDynamicLayoutWrapperProps extends DynamicLayoutWrapperProps {\n  // Responsive breakpoints\n  responsiveConfig?: {\n    xs?: { expandedSize: number; collapsedSize: number };\n    sm?: { expandedSize: number; collapsedSize: number };\n    md?: { expandedSize: number; collapsedSize: number };\n    lg?: { expandedSize: number; collapsedSize: number };\n    xl?: { expandedSize: number; collapsedSize: number };\n  };\n  \n  // Multiple summary panels support\n  multipleSummaries?: Array<{\n    content: React.ReactNode;\n    props?: Omit<ExpandableSummaryWrapperProps, 'children' | 'onToggle'>;\n    id: string;\n  }>;\n  \n  // Layout modes\n  layoutMode?: 'horizontal' | 'vertical' | 'adaptive';\n  \n  // Minimum sizes\n  minMainContentSize?: number;\n  minSummarySize?: number;\n}\n\nexport const AdvancedDynamicLayoutWrapper: React.FC<AdvancedDynamicLayoutWrapperProps> = ({\n  multipleSummaries = [],\n  layoutMode = 'horizontal',\n  minMainContentSize = 4,\n  minSummarySize = 2,\n  responsiveConfig,\n  ...baseProps\n}) => {\n  const [summaryStates, setSummaryStates] = useState<Record<string, { size: number; expanded: boolean }>>({});\n  \n  // Calculate total summary size\n  const totalSummarySize = useMemo(() => {\n    return Object.values(summaryStates).reduce((total, state) => total + state.size, 0);\n  }, [summaryStates]);\n  \n  // Enhanced toggle handler for multiple summaries\n  const handleMultipleSummaryToggle = useCallback((\n    summaryId: string,\n    isExpanded: boolean,\n    summaryGridSize: number\n  ) => {\n    setSummaryStates(prev => {\n      const newStates = {\n        ...prev,\n        [summaryId]: { size: summaryGridSize, expanded: isExpanded }\n      };\n      \n      const newTotalSize = Object.values(newStates).reduce((total, state) => total + state.size, 0);\n      const newMainSize = Math.max(\n        minMainContentSize,\n        Math.min(baseProps.maxGridSize! - newTotalSize, baseProps.maxGridSize!)\n      );\n      \n      baseProps.onLayoutChange?.(newMainSize, newTotalSize, isExpanded);\n      \n      return newStates;\n    });\n  }, [baseProps, minMainContentSize]);\n  \n  // If multiple summaries are provided, render advanced layout\n  if (multipleSummaries.length > 0) {\n    const mainSize = Math.max(\n      minMainContentSize,\n      (baseProps.maxGridSize || 12) - totalSummarySize\n    );\n    \n    return (\n      <Grid container {...baseProps.containerProps}>\n        <Grid\n          item\n          xs={mainSize}\n          sx={{\n            transition: baseProps.enableTransitions ? \n              `all ${baseProps.transitionDuration || 300}ms ${baseProps.transitionEasing || 'ease-in-out'}` : \n              undefined,\n            ...baseProps.mainContentProps?.sx,\n          }}\n          {...baseProps.mainContentProps}\n        >\n          {baseProps.children}\n        </Grid>\n        \n        {multipleSummaries.map((summary) => (\n          <ExpandableSummaryWrapper\n            key={summary.id}\n            {...summary.props}\n            onToggle={(isExpanded, size) => \n              handleMultipleSummaryToggle(summary.id, isExpanded, size)\n            }\n          >\n            {summary.content}\n          </ExpandableSummaryWrapper>\n        ))}\n      </Grid>\n    );\n  }\n  \n  // Fallback to basic layout\n  return <DynamicLayoutWrapper {...baseProps} />;\n};\n\n// Hook for managing layout state externally\nexport const useDynamicLayout = (\n  maxGridSize: number = 12,\n  defaultSummaryExpanded: boolean = true,\n  expandedSize: number = 3,\n  collapsedSize: number = 0\n) => {\n  const [isExpanded, setIsExpanded] = useState(defaultSummaryExpanded);\n  const [summarySize, setSummarySize] = useState(\n    defaultSummaryExpanded ? expandedSize : collapsedSize\n  );\n  const [mainSize, setMainSize] = useState(\n    maxGridSize - (defaultSummaryExpanded ? expandedSize : collapsedSize)\n  );\n  \n  const toggleSummary = useCallback(() => {\n    const newExpanded = !isExpanded;\n    const newSummarySize = newExpanded ? expandedSize : collapsedSize;\n    const newMainSize = maxGridSize - newSummarySize;\n    \n    setIsExpanded(newExpanded);\n    setSummarySize(newSummarySize);\n    setMainSize(newMainSize);\n  }, [isExpanded, expandedSize, collapsedSize, maxGridSize]);\n  \n  const setSummaryState = useCallback((expanded: boolean) => {\n    const newSummarySize = expanded ? expandedSize : collapsedSize;\n    const newMainSize = maxGridSize - newSummarySize;\n    \n    setIsExpanded(expanded);\n    setSummarySize(newSummarySize);\n    setMainSize(newMainSize);\n  }, [expandedSize, collapsedSize, maxGridSize]);\n  \n  return {\n    isExpanded,\n    summarySize,\n    mainSize,\n    toggleSummary,\n    setSummaryState,\n  };\n};\n\n// Utility function for calculating optimal sizes\nexport const calculateOptimalSizes = (\n  totalSize: number,\n  contentRatio: number = 0.75,\n  minContentSize: number = 4,\n  minSummarySize: number = 2\n) => {\n  const idealContentSize = Math.floor(totalSize * contentRatio);\n  const idealSummarySize = totalSize - idealContentSize;\n  \n  const contentSize = Math.max(minContentSize, idealContentSize);\n  const summarySize = Math.max(minSummarySize, Math.min(idealSummarySize, totalSize - contentSize));\n  \n  return {\n    contentSize: Math.min(contentSize, totalSize - summarySize),\n    summarySize,\n    totalUsed: contentSize + summarySize,\n  };\n};\n\nexport default DynamicLayoutWrapper;"],"names":["DynamicLayoutWrapper","children","mainContentProps","summaryContent","summaryProps","maxGridSize","defaultSummaryExpanded","expandedSummarySize","collapsedSummarySize","containerProps","onLayoutChange","enableTransitions","transitionDuration","transitionEasing","storageKey","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","getInitialState","useCallback","window","stored","localStorage","getItem","JSON","parse","initialMainSize","useMemo","mainContentSize","setMainContentSize","useState","handleSummaryToggle","isExpanded","summaryGridSize","newMainContentSize","Math","max","min","transitionStyles","duration","transitions","enteringScreen","easing","sharp","transition","create","mergedSummaryProps","defaultExpanded","expandedGridSize","collapsedGridSize","persistState","ariaLabel","onToggle","jsxs","Grid","container","jsx","item","xs","sx","ExpandableSummaryWrapper","multipleSummaries","layoutMode","minMainContentSize","minSummarySize","responsiveConfig","baseProps","summaryStates","setSummaryStates","totalSummarySize","Object","values","reduce","total","state","size","handleMultipleSummaryToggle","summaryId","prev","newStates","expanded","newTotalSize","newMainSize","_a","call","length","mainSize","map","summary","props","id","content","totalSize","contentRatio","minContentSize","idealContentSize","floor","idealSummarySize","contentSize","summarySize","totalUsed","expandedSize","collapsedSize","setIsExpanded","setSummarySize","setMainSize","toggleSummary","newExpanded","newSummarySize","setSummaryState"],"mappings":"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"}

package/dist/components/examples/FlexibleReduxExample/index.esm.js

@@ -0,0 +1,154 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ERPUIProvider } from "../../providers/ERPUIProvider/index.esm.js";
+import SharePopUpEnhanced from "../../share-modal/share-modal-enhanced/index.esm.js";
+import { HeaderEnhanced } from "../../header/header-enhanced/index.esm.js";
+import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
+import Typography from "../../../node_modules/@mui/material/Typography/Typography/index.esm.js";
+import FormControlLabel from "../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";
+import Switch from "../../../node_modules/@mui/material/Switch/Switch/index.esm.js";
+import Button from "../../../node_modules/@mui/material/Button/Button/index.esm.js";
+const FlexibleReduxExample = () => {
+  const [useRedux, setUseRedux] = useState(false);
+  const [showShareModal, setShowShareModal] = useState(false);
+  const [users] = useState([
+    { id: 1, first_name: "John", last_name: "Doe", label: "John Doe", value: 1 },
+    { id: 2, first_name: "Jane", last_name: "Smith", label: "Jane Smith", value: 2 }
+  ]);
+  const [departments] = useState([
+    { id: 1, name: "Engineering", label: "Engineering", value: 1 },
+    { id: 2, name: "Marketing", label: "Marketing", value: 2 }
+  ]);
+  const [languages] = useState([
+    { code: "en", label: "English", direction: "ltr" },
+    { code: "es", label: "Spanish", direction: "ltr" },
+    { code: "ar", label: "Arabic", direction: "rtl" }
+  ]);
+  const [currentLanguage, setCurrentLanguage] = useState(languages[0]);
+  const [loading, setLoading] = useState(false);
+  const fetchUsersAndDepartments = async () => {
+    setLoading(true);
+    await new Promise((resolve) => setTimeout(resolve, 1e3));
+    setLoading(false);
+  };
+  const handleLanguageChange = (languageCode) => {
+    const language = languages.find((lang) => lang.code === languageCode);
+    if (language) {
+      setCurrentLanguage(language);
+    }
+  };
+  const handleShareSubmit = (data) => {
+    console.log("Share data:", data);
+    setShowShareModal(false);
+  };
+  return /* @__PURE__ */ jsx(ERPUIProvider, { useRedux, children: /* @__PURE__ */ jsxs(Box, { sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "h4", gutterBottom: true, children: "Flexible Redux Integration Example" }),
+    /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { mb: 2 }, children: "This example demonstrates how ERP UI Library components can work with or without Redux. Toggle the switch below to see the difference." }),
+    /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: useRedux,
+            onChange: (e) => setUseRedux(e.target.checked)
+          }
+        ),
+        label: `Use Redux: ${useRedux ? "Enabled" : "Disabled"}`,
+        sx: { mb: 3 }
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { sx: { mb: 3 }, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "h6", gutterBottom: true, children: [
+        "Current Mode: ",
+        useRedux ? "Redux-based" : "Prop-based"
+      ] }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: useRedux ? "Components are using Redux for state management" : "Components are using props and local state for data" })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { border: 1, borderColor: "grey.300", borderRadius: 1, p: 2, mb: 3 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Header Component" }),
+      /* @__PURE__ */ jsx(
+        HeaderEnhanced,
+        {
+          useRedux,
+          languages: useRedux ? void 0 : languages,
+          currentLanguage: useRedux ? void 0 : currentLanguage,
+          languagesLoading: useRedux ? void 0 : loading,
+          onLanguageChange: useRedux ? void 0 : handleLanguageChange,
+          onFetchLanguages: useRedux ? void 0 : fetchUsersAndDepartments
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { border: 1, borderColor: "grey.300", borderRadius: 1, p: 2, mb: 3 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Share Modal Component" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          onClick: () => setShowShareModal(true),
+          sx: { mb: 2 },
+          children: "Open Share Modal"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SharePopUpEnhanced,
+        {
+          open: showShareModal,
+          onClose: () => setShowShareModal(false),
+          title: "Share Document",
+          toggleSwitch: true,
+          onSubmit: handleShareSubmit,
+          useRedux,
+          users: useRedux ? void 0 : users,
+          departments: useRedux ? void 0 : departments,
+          loading: useRedux ? void 0 : loading,
+          onFetchUsersAndDepartments: useRedux ? void 0 : fetchUsersAndDepartments
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { border: 1, borderColor: "grey.300", borderRadius: 1, p: 2 }, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, children: "Code Example" }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "pre",
+          sx: {
+            backgroundColor: "grey.100",
+            p: 2,
+            borderRadius: 1,
+            overflow: "auto",
+            fontSize: "0.875rem"
+          },
+          children: useRedux ? `
+// Redux-based usage
+<ERPUIProvider useRedux={true} reduxStore={store} apiClient={apiClient}>
+  <HeaderEnhanced useRedux={true} />
+  <ShareModalEnhanced useRedux={true} />
+</ERPUIProvider>
+            ` : `
+// Prop-based usage
+<ERPUIProvider useRedux={false}>
+  <HeaderEnhanced
+    useRedux={false}
+    languages={languages}
+    currentLanguage={currentLanguage}
+    onLanguageChange={handleLanguageChange}
+  />
+  <ShareModalEnhanced
+    useRedux={false}
+    users={users}
+    departments={departments}
+    loading={loading}
+    onFetchUsersAndDepartments={fetchUsersAndDepartments}
+  />
+</ERPUIProvider>
+            `
+        }
+      )
+    ] })
+  ] }) });
+};
+export {
+  FlexibleReduxExample as default
+};
+//# sourceMappingURL=index.esm.js.map

package/dist/components/examples/FlexibleReduxExample/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/components/examples/FlexibleReduxExample.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Box, Button, Typography, Switch, FormControlLabel } from '@mui/material';\nimport { ERPUIProvider } from '../providers/ERPUIProvider';\nimport ShareModalEnhanced from '../share-modal/share-modal-enhanced';\nimport HeaderEnhanced from '../header/header-enhanced';\n\n/**\n * Example component demonstrating flexible Redux usage\n * This shows how components can work with or without Redux\n */\nconst FlexibleReduxExample: React.FC = () => {\n  const [useRedux, setUseRedux] = useState(false);\n  const [showShareModal, setShowShareModal] = useState(false);\n  \n  // Mock data for non-Redux usage\n  const [users] = useState([\n    { id: 1, first_name: 'John', last_name: 'Doe', label: 'John Doe', value: 1 },\n    { id: 2, first_name: 'Jane', last_name: 'Smith', label: 'Jane Smith', value: 2 },\n  ]);\n  \n  const [departments] = useState([\n    { id: 1, name: 'Engineering', label: 'Engineering', value: 1 },\n    { id: 2, name: 'Marketing', label: 'Marketing', value: 2 },\n  ]);\n  \n  const [languages] = useState([\n    { code: 'en', label: 'English', direction: 'ltr' },\n    { code: 'es', label: 'Spanish', direction: 'ltr' },\n    { code: 'ar', label: 'Arabic', direction: 'rtl' },\n  ]);\n  \n  const [currentLanguage, setCurrentLanguage] = useState(languages[0]);\n  const [loading, setLoading] = useState(false);\n\n  // Mock API functions\n  const fetchUsersAndDepartments = async () => {\n    setLoading(true);\n    // Simulate API call\n    await new Promise(resolve => setTimeout(resolve, 1000));\n    setLoading(false);\n  };\n\n  const handleLanguageChange = (languageCode: string) => {\n    const language = languages.find(lang => lang.code === languageCode);\n    if (language) {\n      setCurrentLanguage(language);\n    }\n  };\n\n  const handleShareSubmit = (data: any) => {\n    console.log('Share data:', data);\n    setShowShareModal(false);\n  };\n\n  return (\n    <ERPUIProvider useRedux={useRedux}>\n      <Box sx={{ p: 3 }}>\n        <Typography variant=\"h4\" gutterBottom>\n          Flexible Redux Integration Example\n        </Typography>\n        \n        <Typography variant=\"body1\" sx={{ mb: 2 }}>\n          This example demonstrates how ERP UI Library components can work with or without Redux.\n          Toggle the switch below to see the difference.\n        </Typography>\n\n        <FormControlLabel\n          control={\n            <Switch\n              checked={useRedux}\n              onChange={(e) => setUseRedux(e.target.checked)}\n            />\n          }\n          label={`Use Redux: ${useRedux ? 'Enabled' : 'Disabled'}`}\n          sx={{ mb: 3 }}\n        />\n\n        <Box sx={{ mb: 3 }}>\n          <Typography variant=\"h6\" gutterBottom>\n            Current Mode: {useRedux ? 'Redux-based' : 'Prop-based'}\n          </Typography>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {useRedux \n              ? 'Components are using Redux for state management'\n              : 'Components are using props and local state for data'\n            }\n          </Typography>\n        </Box>\n\n        {/* Header Example */}\n        <Box sx={{ border: 1, borderColor: 'grey.300', borderRadius: 1, p: 2, mb: 3 }}>\n          <Typography variant=\"h6\" gutterBottom>\n            Header Component\n          </Typography>\n          <HeaderEnhanced\n            useRedux={useRedux}\n            languages={useRedux ? undefined : languages}\n            currentLanguage={useRedux ? undefined : currentLanguage}\n            languagesLoading={useRedux ? undefined : loading}\n            onLanguageChange={useRedux ? undefined : handleLanguageChange}\n            onFetchLanguages={useRedux ? undefined : fetchUsersAndDepartments}\n          />\n        </Box>\n\n        {/* Share Modal Example */}\n        <Box sx={{ border: 1, borderColor: 'grey.300', borderRadius: 1, p: 2, mb: 3 }}>\n          <Typography variant=\"h6\" gutterBottom>\n            Share Modal Component\n          </Typography>\n          <Button\n            variant=\"contained\"\n            onClick={() => setShowShareModal(true)}\n            sx={{ mb: 2 }}\n          >\n            Open Share Modal\n          </Button>\n          \n          <ShareModalEnhanced\n            open={showShareModal}\n            onClose={() => setShowShareModal(false)}\n            title=\"Share Document\"\n            toggleSwitch={true}\n            onSubmit={handleShareSubmit}\n            useRedux={useRedux}\n            users={useRedux ? undefined : users}\n            departments={useRedux ? undefined : departments}\n            loading={useRedux ? undefined : loading}\n            onFetchUsersAndDepartments={useRedux ? undefined : fetchUsersAndDepartments}\n          />\n        </Box>\n\n        {/* Code Example */}\n        <Box sx={{ border: 1, borderColor: 'grey.300', borderRadius: 1, p: 2 }}>\n          <Typography variant=\"h6\" gutterBottom>\n            Code Example\n          </Typography>\n          <Box\n            component=\"pre\"\n            sx={{\n              backgroundColor: 'grey.100',\n              p: 2,\n              borderRadius: 1,\n              overflow: 'auto',\n              fontSize: '0.875rem',\n            }}\n          >\n            {useRedux ? `\n// Redux-based usage\n<ERPUIProvider useRedux={true} reduxStore={store} apiClient={apiClient}>\n  <HeaderEnhanced useRedux={true} />\n  <ShareModalEnhanced useRedux={true} />\n</ERPUIProvider>\n            ` : `\n// Prop-based usage\n<ERPUIProvider useRedux={false}>\n  <HeaderEnhanced\n    useRedux={false}\n    languages={languages}\n    currentLanguage={currentLanguage}\n    onLanguageChange={handleLanguageChange}\n  />\n  <ShareModalEnhanced\n    useRedux={false}\n    users={users}\n    departments={departments}\n    loading={loading}\n    onFetchUsersAndDepartments={fetchUsersAndDepartments}\n  />\n</ERPUIProvider>\n            `}\n          </Box>\n        </Box>\n      </Box>\n    </ERPUIProvider>\n  );\n};\n\nexport default FlexibleReduxExample;"],"names":["ShareModalEnhanced"],"mappings":"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"}

package/dist/components/examples/FlexibleReduxExample/index.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),r=require("../../providers/ERPUIProvider/index.js"),n=require("../../share-modal/share-modal-enhanced/index.js"),t=require("../../header/header-enhanced/index.js"),d=require("../../../node_modules/@mui/material/Box/Box/index.js"),o=require("../../../node_modules/@mui/material/Typography/Typography/index.js"),s=require("../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.js"),i=require("../../../node_modules/@mui/material/Switch/Switch/index.js"),u=require("../../../node_modules/@mui/material/Button/Button/index.js");exports.default=()=>{const[l,h]=a.useState(!1),[c,m]=a.useState(!1),[x]=a.useState([{id:1,first_name:"John",last_name:"Doe",label:"John Doe",value:1},{id:2,first_name:"Jane",last_name:"Smith",label:"Jane Smith",value:2}]),[g]=a.useState([{id:1,name:"Engineering",label:"Engineering",value:1},{id:2,name:"Marketing",label:"Marketing",value:2}]),[b]=a.useState([{code:"en",label:"English",direction:"ltr"},{code:"es",label:"Spanish",direction:"ltr"},{code:"ar",label:"Arabic",direction:"rtl"}]),[p,f]=a.useState(b[0]),[v,j]=a.useState(!1),R=async()=>{j(!0),await new Promise(e=>setTimeout(e,1e3)),j(!1)};/* @__PURE__ */
+return e.jsx(r.ERPUIProvider,{useRedux:l,children:/* @__PURE__ */e.jsxs(d.default,{sx:{p:3},children:[
+/* @__PURE__ */e.jsx(o.default,{variant:"h4",gutterBottom:!0,children:"Flexible Redux Integration Example"}),
+/* @__PURE__ */e.jsx(o.default,{variant:"body1",sx:{mb:2},children:"This example demonstrates how ERP UI Library components can work with or without Redux. Toggle the switch below to see the difference."}),
+/* @__PURE__ */e.jsx(s.default,{control:/* @__PURE__ */e.jsx(i.default,{checked:l,onChange:e=>h(e.target.checked)}),label:"Use Redux: "+(l?"Enabled":"Disabled"),sx:{mb:3}}),
+/* @__PURE__ */e.jsxs(d.default,{sx:{mb:3},children:[
+/* @__PURE__ */e.jsxs(o.default,{variant:"h6",gutterBottom:!0,children:["Current Mode: ",l?"Redux-based":"Prop-based"]}),
+/* @__PURE__ */e.jsx(o.default,{variant:"body2",color:"text.secondary",children:l?"Components are using Redux for state management":"Components are using props and local state for data"})]}),
+/* @__PURE__ */e.jsxs(d.default,{sx:{border:1,borderColor:"grey.300",borderRadius:1,p:2,mb:3},children:[
+/* @__PURE__ */e.jsx(o.default,{variant:"h6",gutterBottom:!0,children:"Header Component"}),
+/* @__PURE__ */e.jsx(t.HeaderEnhanced,{useRedux:l,languages:l?void 0:b,currentLanguage:l?void 0:p,languagesLoading:l?void 0:v,onLanguageChange:l?void 0:e=>{const a=b.find(a=>a.code===e);a&&f(a)},onFetchLanguages:l?void 0:R})]}),
+/* @__PURE__ */e.jsxs(d.default,{sx:{border:1,borderColor:"grey.300",borderRadius:1,p:2,mb:3},children:[
+/* @__PURE__ */e.jsx(o.default,{variant:"h6",gutterBottom:!0,children:"Share Modal Component"}),
+/* @__PURE__ */e.jsx(u.default,{variant:"contained",onClick:()=>m(!0),sx:{mb:2},children:"Open Share Modal"}),
+/* @__PURE__ */e.jsx(n.default,{open:c,onClose:()=>m(!1),title:"Share Document",toggleSwitch:!0,onSubmit:e=>{m(!1)},useRedux:l,users:l?void 0:x,departments:l?void 0:g,loading:l?void 0:v,onFetchUsersAndDepartments:l?void 0:R})]}),
+/* @__PURE__ */e.jsxs(d.default,{sx:{border:1,borderColor:"grey.300",borderRadius:1,p:2},children:[
+/* @__PURE__ */e.jsx(o.default,{variant:"h6",gutterBottom:!0,children:"Code Example"}),
+/* @__PURE__ */e.jsx(d.default,{component:"pre",sx:{backgroundColor:"grey.100",p:2,borderRadius:1,overflow:"auto",fontSize:"0.875rem"},children:l?"\n// Redux-based usage\n<ERPUIProvider useRedux={true} reduxStore={store} apiClient={apiClient}>\n  <HeaderEnhanced useRedux={true} />\n  <ShareModalEnhanced useRedux={true} />\n</ERPUIProvider>\n            ":"\n// Prop-based usage\n<ERPUIProvider useRedux={false}>\n  <HeaderEnhanced\n    useRedux={false}\n    languages={languages}\n    currentLanguage={currentLanguage}\n    onLanguageChange={handleLanguageChange}\n  />\n  <ShareModalEnhanced\n    useRedux={false}\n    users={users}\n    departments={departments}\n    loading={loading}\n    onFetchUsersAndDepartments={fetchUsersAndDepartments}\n  />\n</ERPUIProvider>\n            "})]})]})})};
+//# sourceMappingURL=index.js.map

package/dist/components/examples/FlexibleReduxExample/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/examples/FlexibleReduxExample.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Box, Button, Typography, Switch, FormControlLabel } from '@mui/material';\nimport { ERPUIProvider } from '../providers/ERPUIProvider';\nimport ShareModalEnhanced from '../share-modal/share-modal-enhanced';\nimport HeaderEnhanced from '../header/header-enhanced';\n\n/**\n * Example component demonstrating flexible Redux usage\n * This shows how components can work with or without Redux\n */\nconst FlexibleReduxExample: React.FC = () => {\n  const [useRedux, setUseRedux] = useState(false);\n  const [showShareModal, setShowShareModal] = useState(false);\n  \n  // Mock data for non-Redux usage\n  const [users] = useState([\n    { id: 1, first_name: 'John', last_name: 'Doe', label: 'John Doe', value: 1 },\n    { id: 2, first_name: 'Jane', last_name: 'Smith', label: 'Jane Smith', value: 2 },\n  ]);\n  \n  const [departments] = useState([\n    { id: 1, name: 'Engineering', label: 'Engineering', value: 1 },\n    { id: 2, name: 'Marketing', label: 'Marketing', value: 2 },\n  ]);\n  \n  const [languages] = useState([\n    { code: 'en', label: 'English', direction: 'ltr' },\n    { code: 'es', label: 'Spanish', direction: 'ltr' },\n    { code: 'ar', label: 'Arabic', direction: 'rtl' },\n  ]);\n  \n  const [currentLanguage, setCurrentLanguage] = useState(languages[0]);\n  const [loading, setLoading] = useState(false);\n\n  // Mock API functions\n  const fetchUsersAndDepartments = async () => {\n    setLoading(true);\n    // Simulate API call\n    await new Promise(resolve => setTimeout(resolve, 1000));\n    setLoading(false);\n  };\n\n  const handleLanguageChange = (languageCode: string) => {\n    const language = languages.find(lang => lang.code === languageCode);\n    if (language) {\n      setCurrentLanguage(language);\n    }\n  };\n\n  const handleShareSubmit = (data: any) => {\n    console.log('Share data:', data);\n    setShowShareModal(false);\n  };\n\n  return (\n    <ERPUIProvider useRedux={useRedux}>\n      <Box sx={{ p: 3 }}>\n        <Typography variant=\"h4\" gutterBottom>\n          Flexible Redux Integration Example\n        </Typography>\n        \n        <Typography variant=\"body1\" sx={{ mb: 2 }}>\n          This example demonstrates how ERP UI Library components can work with or without Redux.\n          Toggle the switch below to see the difference.\n        </Typography>\n\n        <FormControlLabel\n          control={\n            <Switch\n              checked={useRedux}\n              onChange={(e) => setUseRedux(e.target.checked)}\n            />\n          }\n          label={`Use Redux: ${useRedux ? 'Enabled' : 'Disabled'}`}\n          sx={{ mb: 3 }}\n        />\n\n        <Box sx={{ mb: 3 }}>\n          <Typography variant=\"h6\" gutterBottom>\n            Current Mode: {useRedux ? 'Redux-based' : 'Prop-based'}\n          </Typography>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {useRedux \n              ? 'Components are using Redux for state management'\n              : 'Components are using props and local state for data'\n            }\n          </Typography>\n        </Box>\n\n        {/* Header Example */}\n        <Box sx={{ border: 1, borderColor: 'grey.300', borderRadius: 1, p: 2, mb: 3 }}>\n          <Typography variant=\"h6\" gutterBottom>\n            Header Component\n          </Typography>\n          <HeaderEnhanced\n            useRedux={useRedux}\n            languages={useRedux ? undefined : languages}\n            currentLanguage={useRedux ? undefined : currentLanguage}\n            languagesLoading={useRedux ? undefined : loading}\n            onLanguageChange={useRedux ? undefined : handleLanguageChange}\n            onFetchLanguages={useRedux ? undefined : fetchUsersAndDepartments}\n          />\n        </Box>\n\n        {/* Share Modal Example */}\n        <Box sx={{ border: 1, borderColor: 'grey.300', borderRadius: 1, p: 2, mb: 3 }}>\n          <Typography variant=\"h6\" gutterBottom>\n            Share Modal Component\n          </Typography>\n          <Button\n            variant=\"contained\"\n            onClick={() => setShowShareModal(true)}\n            sx={{ mb: 2 }}\n          >\n            Open Share Modal\n          </Button>\n          \n          <ShareModalEnhanced\n            open={showShareModal}\n            onClose={() => setShowShareModal(false)}\n            title=\"Share Document\"\n            toggleSwitch={true}\n            onSubmit={handleShareSubmit}\n            useRedux={useRedux}\n            users={useRedux ? undefined : users}\n            departments={useRedux ? undefined : departments}\n            loading={useRedux ? undefined : loading}\n            onFetchUsersAndDepartments={useRedux ? undefined : fetchUsersAndDepartments}\n          />\n        </Box>\n\n        {/* Code Example */}\n        <Box sx={{ border: 1, borderColor: 'grey.300', borderRadius: 1, p: 2 }}>\n          <Typography variant=\"h6\" gutterBottom>\n            Code Example\n          </Typography>\n          <Box\n            component=\"pre\"\n            sx={{\n              backgroundColor: 'grey.100',\n              p: 2,\n              borderRadius: 1,\n              overflow: 'auto',\n              fontSize: '0.875rem',\n            }}\n          >\n            {useRedux ? `\n// Redux-based usage\n<ERPUIProvider useRedux={true} reduxStore={store} apiClient={apiClient}>\n  <HeaderEnhanced useRedux={true} />\n  <ShareModalEnhanced useRedux={true} />\n</ERPUIProvider>\n            ` : `\n// Prop-based usage\n<ERPUIProvider useRedux={false}>\n  <HeaderEnhanced\n    useRedux={false}\n    languages={languages}\n    currentLanguage={currentLanguage}\n    onLanguageChange={handleLanguageChange}\n  />\n  <ShareModalEnhanced\n    useRedux={false}\n    users={users}\n    departments={departments}\n    loading={loading}\n    onFetchUsersAndDepartments={fetchUsersAndDepartments}\n  />\n</ERPUIProvider>\n            `}\n          </Box>\n        </Box>\n      </Box>\n    </ERPUIProvider>\n  );\n};\n\nexport default FlexibleReduxExample;"],"names":["useRedux","setUseRedux","useState","showShareModal","setShowShareModal","users","id","first_name","last_name","label","value","departments","name","languages","code","direction","currentLanguage","setCurrentLanguage","loading","setLoading","fetchUsersAndDepartments","async","Promise","resolve","setTimeout","jsx","ERPUIProvider","children","jsxs","Box","sx","p","Typography","variant","gutterBottom","mb","FormControlLabel","control","Switch","checked","onChange","e","target","color","border","borderColor","borderRadius","HeaderEnhanced","languagesLoading","onLanguageChange","languageCode","language","find","lang","onFetchLanguages","Button","onClick","ShareModalEnhanced","open","onClose","title","toggleSwitch","onSubmit","data","onFetchUsersAndDepartments","component","backgroundColor","overflow","fontSize"],"mappings":"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"}

package/dist/components/filter/filter/index.esm.js

@@ -30,14 +30,14 @@ import DialogTitle from "../../../node_modules/@mui/material/DialogTitle/DialogT
 import Box from "../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import MenuItem from "../../../node_modules/@mui/material/MenuItem/MenuItem/index.esm.js";
 import IconButton from "../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
+import { Edit } from "../../icons/edit/index.esm.js";
+import { Trash } from "../../icons/trash/index.esm.js";
 import OutlinedInput from "../../../node_modules/@mui/material/OutlinedInput/OutlinedInput/index.esm.js";
 import InputAdornment from "../../../node_modules/@mui/material/InputAdornment/InputAdornment/index.esm.js";
 import Close from "../../../node_modules/@mui/icons-material/esm/Close/index.esm.js";
 import DialogContent from "../../../node_modules/@mui/material/DialogContent/DialogContent/index.esm.js";
 import Alert from "../../../node_modules/@mui/material/Alert/Alert/index.esm.js";
 import DialogActions from "../../../node_modules/@mui/material/DialogActions/DialogActions/index.esm.js";
-import { Edit } from "../../icons/edit/index.esm.js";
-import { Trash } from "../../icons/trash/index.esm.js";
 setBaseUrl(`${"https://apidev.erpforce.co"}/system-feature`);
 const initialQuery = { combinator: "and", rules: [] };
 const Filter = ({

package/dist/components/filter/filter/index.js

@@ -1,21 +1,21 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),r=require("react-querybuilder"),t=;/* empty css                                                                                         */;/* empty css                    */var i=,/* empty css                         */n=,/* empty css                                 */s=,/* empty css                                     */a=,/* empty css                                 */o=,/* empty css                                */u=,/* empty css                              */d=,/* empty css                             */c=,/* empty css                                */m=,/* empty css                                   */f=,/* empty css                         */x=,/* empty css                                */p=,/* empty css                                 */h=,/* empty css                                               */j=,/* empty css                                                */v=,/* empty css                             */g=,/* empty css                           */q=,/* empty css                              */y=require("lodash"),b=,/* empty css                                                   */S=,/* empty css                                       */C=require("react-router-dom"),k=,/* empty css                                */_=,/* empty css                                                       */A=,/* empty css                                                                 */I=,/* empty css                                                 */F=,/* empty css                                                           */N=,/* empty css                                                               */w=,/* empty css                                                                     */E=,/* empty css                                                                       */D=,/* empty css                                                         */z=,/* empty css                                                                     */P=,/* empty css                                                     */T=,/* empty css                                                                     */B=,/* empty css                      */M=;/* empty css                       */function R(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var L=/* @__PURE__ */R(y);j.setBaseUrl("https://apidev.erpforce.co/system-feature");const Q={combinator:"and",rules:[]};exports.default=({open:y,onClose:R,savedFilters:O,fetchSavedFilters:V,onSaveFilter:W,onSelectedFilter:G,applyFilter:U,fields:K=[]})=>{const H=C.useLocation(),J=localStorage.getItem(v.auth.storageTokenKeyName),{updatePageInfo:X,activePage:Y,schemaFields:Z,setActivePage:$}=q.usePages();K=Z.length?g.generateFields(Z):K;const[ee,le]=l.useState(Q),[re,te]=l.useState(O??[]),[ie,ne]=l.useState(null),[se,ae]=l.useState(null),[oe,ue]=l.useState(null),{isRtl:de}=k.useLanguage(),ce=l.useMemo(()=>S.routeToResourceMap[H.pathname]||null,[H.pathname]);l.useEffect(()=>{O&&te(O)},[O]);const me=l.useCallback((e=!1)=>{let l=ee;if(pe(l))ue("Invalid filter");else if(e)l=Q,le(l);else{const e=l?g.generateQueryString(l):l;X({filters:l,filterQueryString:e}),R()}},[ee,U,R]),fe=e=>{e?(ne(e),le(e.query),G&&G(e)):(ne(null),le(Q),G&&G(null))},xe=e=>{const l=null==O?void 0:O.filter(l=>l.name.toLowerCase().includes(e.toLowerCase()));l&&te(l)};l.useEffect(()=>{let e=Q;L.default.isEmpty(Y.filters)||(e=Y.filters),le(e);const l=null==O?void 0:O.find(e=>{var l;return e.name===(null==(l=null==Y?void 0:Y.filters)?void 0:l.name)});ne(l||null)},[null==Y?void 0:Y.filters,O]);const pe=e=>{var l,r;let t=[];return null==(l=null==e?void 0:e.rules)||l.forEach(l=>{if(t.includes(l.field)&&"and"==e.combinator)return!0;t.push(l.field)}),t.length!==(null==(r=null==e?void 0:e.rules)?void 0:r.length)},he=e=>Array.isArray(e.rules)?e.rules.length?e.rules.some(he):!e.rules.length:!e.field||L.default.isEmpty(e.value)&&!["null","notNull"].includes(e.operator),je=l.useMemo(()=>he(ee)||oe,[ee,oe]);/* @__PURE__ */
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),r=require("react-querybuilder"),t=;/* empty css                                                                                         */;/* empty css                    */var i=,/* empty css                         */n=,/* empty css                                 */s=,/* empty css                                     */a=,/* empty css                                 */o=,/* empty css                                */u=,/* empty css                              */d=,/* empty css                             */c=,/* empty css                                */m=,/* empty css                                   */f=,/* empty css                         */x=,/* empty css                                */p=,/* empty css                                 */h=,/* empty css                                               */j=,/* empty css                                                */v=,/* empty css                             */g=,/* empty css                           */q=,/* empty css                              */y=require("lodash"),b=,/* empty css                                                   */S=,/* empty css                                       */C=require("react-router-dom"),k=,/* empty css                                */_=,/* empty css                                                       */A=,/* empty css                                                                 */I=,/* empty css                                                 */F=,/* empty css                                                           */N=,/* empty css                                                               */w=,/* empty css                      */E=,/* empty css                       */D=,/* empty css                                                                     */z=,/* empty css                                                                       */P=,/* empty css                                                         */T=,/* empty css                                                                     */B=,/* empty css                                                     */M=;/* empty css                                                                     */function R(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var L=/* @__PURE__ */R(y);j.setBaseUrl("https://apidev.erpforce.co/system-feature");const Q={combinator:"and",rules:[]};exports.default=({open:y,onClose:R,savedFilters:O,fetchSavedFilters:V,onSaveFilter:W,onSelectedFilter:G,applyFilter:U,fields:K=[]})=>{const H=C.useLocation(),J=localStorage.getItem(v.auth.storageTokenKeyName),{updatePageInfo:X,activePage:Y,schemaFields:Z,setActivePage:$}=q.usePages();K=Z.length?g.generateFields(Z):K;const[ee,le]=l.useState(Q),[re,te]=l.useState(O??[]),[ie,ne]=l.useState(null),[se,ae]=l.useState(null),[oe,ue]=l.useState(null),{isRtl:de}=k.useLanguage(),ce=l.useMemo(()=>S.routeToResourceMap[H.pathname]||null,[H.pathname]);l.useEffect(()=>{O&&te(O)},[O]);const me=l.useCallback((e=!1)=>{let l=ee;if(pe(l))ue("Invalid filter");else if(e)l=Q,le(l);else{const e=l?g.generateQueryString(l):l;X({filters:l,filterQueryString:e}),R()}},[ee,U,R]),fe=e=>{e?(ne(e),le(e.query),G&&G(e)):(ne(null),le(Q),G&&G(null))},xe=e=>{const l=null==O?void 0:O.filter(l=>l.name.toLowerCase().includes(e.toLowerCase()));l&&te(l)};l.useEffect(()=>{let e=Q;L.default.isEmpty(Y.filters)||(e=Y.filters),le(e);const l=null==O?void 0:O.find(e=>{var l;return e.name===(null==(l=null==Y?void 0:Y.filters)?void 0:l.name)});ne(l||null)},[null==Y?void 0:Y.filters,O]);const pe=e=>{var l,r;let t=[];return null==(l=null==e?void 0:e.rules)||l.forEach(l=>{if(t.includes(l.field)&&"and"==e.combinator)return!0;t.push(l.field)}),t.length!==(null==(r=null==e?void 0:e.rules)?void 0:r.length)},he=e=>Array.isArray(e.rules)?e.rules.length?e.rules.some(he):!e.rules.length:!e.field||L.default.isEmpty(e.value)&&!["null","notNull"].includes(e.operator),je=l.useMemo(()=>he(ee)||oe,[ee,oe]);/* @__PURE__ */
 return e.jsx("div",{children:/* @__PURE__ */e.jsxs(_.default,{open:y,onClose:R,maxWidth:"md",fullWidth:!0,PaperProps:{sx:{borderRadius:2}},children:[
 /* @__PURE__ */e.jsxs(A.default,{className:"filter-header",children:[
 /* @__PURE__ */e.jsx(n.Typography,{type:"s3",weight:"medium",color:"theme.secondary.1000",children:"Filters"}),
 /* @__PURE__ */e.jsxs(I.default,{gap:1,display:"flex",children:[
-/* @__PURE__ */e.jsxs(i.default,{fullWidth:!0,size:"small",className:"filter-dropdown",value:ie?ie.name:"Saved Filters",onChange:e=>{const l=null==O?void 0:O.find(l=>l.name==e.target.value);fe(l)},variant:"outlined",onClose:()=>{setTimeout(()=>{xe("")},500)},input:ie?/* @__PURE__ */e.jsx(w.default,{label:"",endAdornment:/* @__PURE__ */e.jsx(E.default,{position:"end",children:/* @__PURE__ */e.jsx(N.default,{"aria-label":"clear selection",onClick:()=>{fe()},edge:"end",sx:{mr:1.5},size:"small",children:/* @__PURE__ */e.jsx(D.default,{sx:{fontSize:"1rem"}})})})}):void 0,children:[
+/* @__PURE__ */e.jsxs(i.default,{fullWidth:!0,size:"small",className:"filter-dropdown",value:ie?ie.name:"Saved Filters",onChange:e=>{const l=null==O?void 0:O.find(l=>l.name==e.target.value);fe(l)},variant:"outlined",onClose:()=>{setTimeout(()=>{xe("")},500)},input:ie?/* @__PURE__ */e.jsx(D.default,{label:"",endAdornment:/* @__PURE__ */e.jsx(z.default,{position:"end",children:/* @__PURE__ */e.jsx(N.default,{"aria-label":"clear selection",onClick:()=>{fe()},edge:"end",sx:{mr:1.5},size:"small",children:/* @__PURE__ */e.jsx(P.default,{sx:{fontSize:"1rem"}})})})}):void 0,children:[
 /* @__PURE__ */e.jsx("div",{className:"searchbar-box-list",children:/* @__PURE__ */e.jsx(p.default,{placeholder:"Search Filters",handleSearch:e=>xe(e)})}),null==re?void 0:re.map(l=>/* @__PURE__ */e.jsxs(F.default,{value:null==l?void 0:l.name,className:"menu-list",selected:(null==ie?void 0:ie.name)==(null==l?void 0:l.name),children:[
 /* @__PURE__ */e.jsx(n.Typography,{color:"theme.secondary.1000",type:"s3",children:null==l?void 0:l.name}),
 /* @__PURE__ */e.jsxs("div",{className:"icon-list",children:[
-/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:e=>{e.preventDefault(),e.stopPropagation(),ae(l)},children:/* @__PURE__ */e.jsx(B.Edit,{fontSize:"small",color:(null==ie?void 0:ie.name)==(null==l?void 0:l.name)?"theme.primary.800":"inherit"})}),
-/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:e=>{e.preventDefault(),e.stopPropagation(),(async e=>{const l={"x-token":J,id:e};j.deleteV1FilterId(l).then(e=>{ne(null),le(Q),V&&V()}).catch(e=>{})})(l.id)},color:"error",children:/* @__PURE__ */e.jsx(M.Trash,{fontSize:"small",color:"theme.error.600"})})]})]},l.id))]}),
+/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:e=>{e.preventDefault(),e.stopPropagation(),ae(l)},children:/* @__PURE__ */e.jsx(w.Edit,{fontSize:"small",color:(null==ie?void 0:ie.name)==(null==l?void 0:l.name)?"theme.primary.800":"inherit"})}),
+/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:e=>{e.preventDefault(),e.stopPropagation(),(async e=>{const l={"x-token":J,id:e};j.deleteV1FilterId(l).then(e=>{ne(null),le(Q),V&&V()}).catch(e=>{})})(l.id)},color:"error",children:/* @__PURE__ */e.jsx(E.Trash,{fontSize:"small",color:"theme.error.600"})})]})]},l.id))]}),
 /* @__PURE__ */e.jsx(h.default,{open:null!==se,onClose:()=>ae(null),handleSubmit:e=>(e=>{if(se)return(async(e,l)=>{const r={"x-token":J,id:e,name:l,module:(null==ce?void 0:ce.fieldResource)||(null==ce?void 0:ce.pageResource)};try{await j.putV1FilterId(r),V&&V(),b.enqueueSnackbar("Filters renamed successfully.")}catch(t){let e="Something went wrong on saving filters";return t instanceof Error&&(e=g.getErrorMessage(t.message)),b.enqueueSnackbar(e,{variant:"error"}),!1}return!0})(se.id,e)})(e),oldName:null==se?void 0:se.name}),
-/* @__PURE__ */e.jsx(I.default,{children:/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:R,children:/* @__PURE__ */e.jsx(D.default,{fontSize:"small"})})})]})]}),
-/* @__PURE__ */e.jsxs(z.default,{className:"content",children:[oe&&/* @__PURE__ */e.jsx(P.default,{severity:"error",sx:{px:1,pt:.5,mb:1},children:/* @__PURE__ */e.jsx(n.Typography,{color:"error",type:"s4",children:oe})}),
+/* @__PURE__ */e.jsx(I.default,{children:/* @__PURE__ */e.jsx(N.default,{size:"small",onClick:R,children:/* @__PURE__ */e.jsx(P.default,{fontSize:"small"})})})]})]}),
+/* @__PURE__ */e.jsxs(T.default,{className:"content",children:[oe&&/* @__PURE__ */e.jsx(B.default,{severity:"error",sx:{px:1,pt:.5,mb:1},children:/* @__PURE__ */e.jsx(n.Typography,{color:"error",type:"s4",children:oe})}),
 /* @__PURE__ */e.jsxs(t.QueryBuilderMaterial,{children:[
 /* @__PURE__ */e.jsx(r.QueryBuilder,{fields:K||[],query:ee,onQueryChange:e=>{const l=e.rules.map((e,l)=>{var r,t;return{...e,value:e.field!==(null==(t=null==(r=ee.rules)?void 0:r[l])?void 0:t.field)||["null","notNull"].includes(e.operator)?"":e.value}});le({...e,rules:l}),ue(null),W&&W(e)},showCombinatorsBetweenRules:!0,controlClassnames:{header:"actions"},controlElements:{addRuleAction:u.default,addGroupAction:d.default,combinatorSelector:s.default,fieldSelector:o.default,operatorSelector:m.default,removeRuleAction:a.default,valueEditor:c.default,removeGroupAction:x.default}}),
 /* @__PURE__ */e.jsx(f.default,{variant:"text",className:de?"remove-filters_rtl":"remove-filters",onClick:()=>{me(!0)},disabled:je,children:"Clear all filters"})]})]}),
-/* @__PURE__ */e.jsx(T.default,{className:"filter-footer",children:/* @__PURE__ */e.jsxs(I.default,{sx:{display:"flex",alignItems:"center",justifyContent:ie?"space-between":"flex-end",width:"100%"},children:[ie&&/* @__PURE__ */e.jsx(I.default,{children:/* @__PURE__ */e.jsx(f.default,{onClick:async()=>{if(ie){const e={"x-token":J,id:ie.id,data:ee};j.putV1FilterId(e).then(e=>{V&&V(),$(e=>({...e,filters:{...e.filters,rules:ee.rules,combinator:ee.combinator,name:ie.name}}))}).catch(e=>b.enqueueSnackbar("Error renaming saved filters:",{variant:"error"}))}},children:"Update Seleted filter"})}),
+/* @__PURE__ */e.jsx(M.default,{className:"filter-footer",children:/* @__PURE__ */e.jsxs(I.default,{sx:{display:"flex",alignItems:"center",justifyContent:ie?"space-between":"flex-end",width:"100%"},children:[ie&&/* @__PURE__ */e.jsx(I.default,{children:/* @__PURE__ */e.jsx(f.default,{onClick:async()=>{if(ie){const e={"x-token":J,id:ie.id,data:ee};j.putV1FilterId(e).then(e=>{V&&V(),$(e=>({...e,filters:{...e.filters,rules:ee.rules,combinator:ee.combinator,name:ie.name}}))}).catch(e=>b.enqueueSnackbar("Error renaming saved filters:",{variant:"error"}))}},children:"Update Seleted filter"})}),
 /* @__PURE__ */e.jsxs(I.default,{sx:{display:"flex",gap:1},children:[
 /* @__PURE__ */e.jsx(f.default,{className:"cancel-filter-btn",onClick:R,children:"Cancel"}),
 /* @__PURE__ */e.jsx(f.default,{disabled:je,onClick:()=>me(),children:"Apply"})]})]})})]})})};