@wix/auto-patterns 1.42.0 → 1.44.0

package/dist/esm/components/AutoPatternsCollectionComponent/AutoPatternsCollectionComponent.js

@@ -1,15 +1,16 @@
-import React, { useMemo, lazy, Suspense } from 'react';
+import React, { useMemo } from 'react';
 import { SchemaProvider } from '../../providers';
 import { SkeletonCollection } from '../AutoPatternsCollectionPageContent/SkeletonCollection';
-const AutoPatternsTableGridSwitch = /*#__PURE__*/lazy(() => import('../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch').then(module => ({
-  default: module.AutoPatternsTableGridSwitch
-})));
-const AutoPatternsTable = /*#__PURE__*/lazy(() => import('../AutoPatternsTable/AutoPatternsTable').then(module => ({
-  default: module.AutoPatternsTable
-})));
-const AutoPatternsGrid = /*#__PURE__*/lazy(() => import('../AutoPatternsGrid/AutoPatternsGrid').then(module => ({
-  default: module.AutoPatternsGrid
-})));
+import { AutoPatternsTable } from '../AutoPatternsTable';
+import { AutoPatternsTableGridSwitch } from '../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch';
+import { AutoPatternsGrid } from '../AutoPatternsGrid';
+
+/**
+ * AutoPatternsCollectionComponent - Entry Point for All Data Display Flows
+ *
+ * This is the main component that determines which data display pattern to render based on configuration.
+ * It serves as the entry point for three distinct rendering flows:
+ */
 export const AutoPatternsCollectionComponent = _ref => {
   let {
     component,
@@ -21,12 +22,15 @@ export const AutoPatternsCollectionComponent = _ref => {
   } = component;
   const memoized = useMemo(() => {
     var _layout$find, _layout$find2;
+    // No layout configuration - return null to render nothing
     if (!(layout != null && layout.length)) {
       return {
         componentToRender: null,
         componentType: 'Table'
       };
     }
+
+    // Extract table and grid configurations from layout array
     const tableConfig = (_layout$find = layout.find(item => item.type === 'Table')) == null ? void 0 : _layout$find.table;
     const gridConfig = (_layout$find2 = layout.find(item => item.type === 'Grid')) == null ? void 0 : _layout$find2.grid;
     let componentType = 'Table';
@@ -37,38 +41,26 @@ export const AutoPatternsCollectionComponent = _ref => {
         ...tableConfig,
         ...gridConfig
       };
-      componentToRender = /*#__PURE__*/React.createElement(Suspense, {
-        fallback: /*#__PURE__*/React.createElement(SkeletonCollection, {
-          componentType: "Table"
-        })
-      }, /*#__PURE__*/React.createElement(AutoPatternsTableGridSwitch, {
-        configuration: config
-      }));
+      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTableGridSwitch, {
+        config: config
+      });
     } else if (tableConfig) {
       const config = {
         ...sharedConfig,
         ...tableConfig
       };
-      componentToRender = /*#__PURE__*/React.createElement(Suspense, {
-        fallback: /*#__PURE__*/React.createElement(SkeletonCollection, {
-          componentType: "Table"
-        })
-      }, /*#__PURE__*/React.createElement(AutoPatternsTable, {
-        configuration: config
-      }));
+      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTable, {
+        config: config
+      });
     } else if (gridConfig) {
       componentType = 'Grid';
       const config = {
         ...sharedConfig,
         ...gridConfig
       };
-      componentToRender = /*#__PURE__*/React.createElement(Suspense, {
-        fallback: /*#__PURE__*/React.createElement(SkeletonCollection, {
-          componentType: "Grid"
-        })
-      }, /*#__PURE__*/React.createElement(AutoPatternsGrid, {
-        configuration: config
-      }));
+      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsGrid, {
+        config: config
+      });
     }
     return {
       componentToRender,

package/dist/esm/components/AutoPatternsCollectionComponent/AutoPatternsCollectionComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","lazy","Suspense","SchemaProvider","SkeletonCollection","AutoPatternsTableGridSwitch","then","module","default","AutoPatternsTable","AutoPatternsGrid","AutoPatternsCollectionComponent","_ref","component","index","layout","sharedConfig","memoized","_layout$find","_layout$find2","length","componentToRender","componentType","tableConfig","find","item","type","table","gridConfig","grid","config","createElement","fallback","configuration","Fragment","key","collection","collectionId","skeleton"],"sources":["../../../../src/components/AutoPatternsCollectionComponent/AutoPatternsCollectionComponent.tsx"],"sourcesContent":["import React, { useMemo, lazy, Suspense } from 'react';\nimport { CollectionComponentConfig } from '../../types';\nimport { SchemaProvider } from '../../providers';\nimport { SkeletonCollection } from '../AutoPatternsCollectionPageContent/SkeletonCollection';\n\nconst AutoPatternsTableGridSwitch = lazy(() =>\n  import('../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch').then(\n    (module) => ({ default: module.AutoPatternsTableGridSwitch }),\n  ),\n);\nconst AutoPatternsTable = lazy(() =>\n  import('../AutoPatternsTable/AutoPatternsTable').then((module) => ({\n    default: module.AutoPatternsTable,\n  })),\n);\nconst AutoPatternsGrid = lazy(() =>\n  import('../AutoPatternsGrid/AutoPatternsGrid').then((module) => ({\n    default: module.AutoPatternsGrid,\n  })),\n);\n\nexport const AutoPatternsCollectionComponent = ({\n  component,\n  index,\n}: {\n  component: CollectionComponentConfig;\n  index: number;\n}) => {\n  const { layout, ...sharedConfig } = component;\n\n  const memoized = useMemo(() => {\n    if (!layout?.length) {\n      return {\n        componentToRender: null,\n        componentType: 'Table' as 'Table' | 'Grid',\n      };\n    }\n\n    const tableConfig = layout.find((item) => item.type === 'Table')?.table;\n    const gridConfig = layout.find((item) => item.type === 'Grid')?.grid;\n\n    let componentType: 'Table' | 'Grid' = 'Table';\n    let componentToRender: React.ReactNode = null;\n\n    if (tableConfig && gridConfig) {\n      const config = {\n        ...sharedConfig,\n        ...tableConfig,\n        ...gridConfig,\n      };\n      componentToRender = (\n        <Suspense fallback={<SkeletonCollection componentType=\"Table\" />}>\n          <AutoPatternsTableGridSwitch configuration={config} />\n        </Suspense>\n      );\n    } else if (tableConfig) {\n      const config = { ...sharedConfig, ...tableConfig };\n      componentToRender = (\n        <Suspense fallback={<SkeletonCollection componentType=\"Table\" />}>\n          <AutoPatternsTable configuration={config} />\n        </Suspense>\n      );\n    } else if (gridConfig) {\n      componentType = 'Grid';\n      const config = { ...sharedConfig, ...gridConfig };\n      componentToRender = (\n        <Suspense fallback={<SkeletonCollection componentType=\"Grid\" />}>\n          <AutoPatternsGrid configuration={config} />\n        </Suspense>\n      );\n    }\n\n    return { componentToRender, componentType };\n  }, [layout, sharedConfig]);\n\n  const { componentToRender, componentType } = memoized;\n\n  return (\n    <>\n      {componentToRender ? (\n        <SchemaProvider\n          key={`${sharedConfig.collection.collectionId}-${index}`}\n          collection={sharedConfig.collection}\n          skeleton={<SkeletonCollection componentType={componentType} />}\n        >\n          {componentToRender}\n        </SchemaProvider>\n      ) : null}\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useMemo","SchemaProvider","SkeletonCollection","AutoPatternsTable","AutoPatternsTableGridSwitch","AutoPatternsGrid","AutoPatternsCollectionComponent","_ref","component","index","layout","sharedConfig","memoized","_layout$find","_layout$find2","length","componentToRender","componentType","tableConfig","find","item","type","table","gridConfig","grid","config","createElement","Fragment","key","collection","collectionId","skeleton"],"sources":["../../../../src/components/AutoPatternsCollectionComponent/AutoPatternsCollectionComponent.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { CollectionComponentConfig } from '../../types';\nimport { SchemaProvider } from '../../providers';\nimport { SkeletonCollection } from '../AutoPatternsCollectionPageContent/SkeletonCollection';\nimport { AutoPatternsTable } from '../AutoPatternsTable';\nimport { AutoPatternsTableGridSwitch } from '../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch';\nimport { AutoPatternsGrid } from '../AutoPatternsGrid';\n\n/**\n * AutoPatternsCollectionComponent - Entry Point for All Data Display Flows\n *\n * This is the main component that determines which data display pattern to render based on configuration.\n * It serves as the entry point for three distinct rendering flows:\n */\nexport const AutoPatternsCollectionComponent = ({\n  component,\n  index,\n}: {\n  component: CollectionComponentConfig;\n  index: number;\n}) => {\n  const { layout, ...sharedConfig } = component;\n\n  const memoized = useMemo(() => {\n    // No layout configuration - return null to render nothing\n    if (!layout?.length) {\n      return {\n        componentToRender: null,\n        componentType: 'Table' as 'Table' | 'Grid',\n      };\n    }\n\n    // Extract table and grid configurations from layout array\n    const tableConfig = layout.find((item) => item.type === 'Table')?.table;\n    const gridConfig = layout.find((item) => item.type === 'Grid')?.grid;\n\n    let componentType: 'Table' | 'Grid' = 'Table';\n    let componentToRender: React.ReactNode = null;\n\n    if (tableConfig && gridConfig) {\n      const config = {\n        ...sharedConfig,\n        ...tableConfig,\n        ...gridConfig,\n      };\n      componentToRender = <AutoPatternsTableGridSwitch config={config} />;\n    } else if (tableConfig) {\n      const config = { ...sharedConfig, ...tableConfig };\n      componentToRender = <AutoPatternsTable config={config} />;\n    } else if (gridConfig) {\n      componentType = 'Grid';\n      const config = { ...sharedConfig, ...gridConfig };\n      componentToRender = <AutoPatternsGrid config={config} />;\n    }\n\n    return { componentToRender, componentType };\n  }, [layout, sharedConfig]);\n\n  const { componentToRender, componentType } = memoized;\n\n  return (\n    <>\n      {componentToRender ? (\n        <SchemaProvider\n          key={`${sharedConfig.collection.collectionId}-${index}`}\n          collection={sharedConfig.collection}\n          skeleton={<SkeletonCollection componentType={componentType} />}\n        >\n          {componentToRender}\n        </SchemaProvider>\n      ) : null}\n    </>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,kBAAkB,QAAQ,yDAAyD;AAC5F,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,2BAA2B,QAAQ,4DAA4D;AACxG,SAASC,gBAAgB,QAAQ,qBAAqB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,+BAA+B,GAAGC,IAAA,IAMzC;EAAA,IAN0C;IAC9CC,SAAS;IACTC;EAIF,CAAC,GAAAF,IAAA;EACC,MAAM;IAAEG,MAAM;IAAE,GAAGC;EAAa,CAAC,GAAGH,SAAS;EAE7C,MAAMI,QAAQ,GAAGZ,OAAO,CAAC,MAAM;IAAA,IAAAa,YAAA,EAAAC,aAAA;IAC7B;IACA,IAAI,EAACJ,MAAM,YAANA,MAAM,CAAEK,MAAM,GAAE;MACnB,OAAO;QACLC,iBAAiB,EAAE,IAAI;QACvBC,aAAa,EAAE;MACjB,CAAC;IACH;;IAEA;IACA,MAAMC,WAAW,IAAAL,YAAA,GAAGH,MAAM,CAACS,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,KAAK,OAAO,CAAC,qBAA5CR,YAAA,CAA8CS,KAAK;IACvE,MAAMC,UAAU,IAAAT,aAAA,GAAGJ,MAAM,CAACS,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,KAAK,MAAM,CAAC,qBAA3CP,aAAA,CAA6CU,IAAI;IAEpE,IAAIP,aAA+B,GAAG,OAAO;IAC7C,IAAID,iBAAkC,GAAG,IAAI;IAE7C,IAAIE,WAAW,IAAIK,UAAU,EAAE;MAC7B,MAAME,MAAM,GAAG;QACb,GAAGd,YAAY;QACf,GAAGO,WAAW;QACd,GAAGK;MACL,CAAC;MACDP,iBAAiB,gBAAGjB,KAAA,CAAA2B,aAAA,CAACtB,2BAA2B;QAACqB,MAAM,EAAEA;MAAO,CAAE,CAAC;IACrE,CAAC,MAAM,IAAIP,WAAW,EAAE;MACtB,MAAMO,MAAM,GAAG;QAAE,GAAGd,YAAY;QAAE,GAAGO;MAAY,CAAC;MAClDF,iBAAiB,gBAAGjB,KAAA,CAAA2B,aAAA,CAACvB,iBAAiB;QAACsB,MAAM,EAAEA;MAAO,CAAE,CAAC;IAC3D,CAAC,MAAM,IAAIF,UAAU,EAAE;MACrBN,aAAa,GAAG,MAAM;MACtB,MAAMQ,MAAM,GAAG;QAAE,GAAGd,YAAY;QAAE,GAAGY;MAAW,CAAC;MACjDP,iBAAiB,gBAAGjB,KAAA,CAAA2B,aAAA,CAACrB,gBAAgB;QAACoB,MAAM,EAAEA;MAAO,CAAE,CAAC;IAC1D;IAEA,OAAO;MAAET,iBAAiB;MAAEC;IAAc,CAAC;EAC7C,CAAC,EAAE,CAACP,MAAM,EAAEC,YAAY,CAAC,CAAC;EAE1B,MAAM;IAAEK,iBAAiB;IAAEC;EAAc,CAAC,GAAGL,QAAQ;EAErD,oBACEb,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA4B,QAAA,QACGX,iBAAiB,gBAChBjB,KAAA,CAAA2B,aAAA,CAACzB,cAAc;IACb2B,GAAG,EAAE,GAAGjB,YAAY,CAACkB,UAAU,CAACC,YAAY,IAAIrB,KAAK,EAAG;IACxDoB,UAAU,EAAElB,YAAY,CAACkB,UAAW;IACpCE,QAAQ,eAAEhC,KAAA,CAAA2B,aAAA,CAACxB,kBAAkB;MAACe,aAAa,EAAEA;IAAc,CAAE;EAAE,GAE9DD,iBACa,CAAC,GACf,IACJ,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/esm/components/AutoPatternsGrid/AutoPatternsGrid.js

@@ -1,37 +1,143 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Grid } from '@wix/patterns';
-import { useGridFeatures } from '../../hooks';
-export const AutoPatternsGrid = _ref => {
-  let {
-    configuration
-  } = _ref;
+import React, { useState } from 'react';
+import { Grid, GridState, useCreateCollection, useGridCollection, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useBasePatternsStateParams } from '../../hooks/useBasePatternsStateParams';
+import { useGridFeaturesAsync } from '../../hooks';
+import { useBaseGridFeatures } from '../../hooks/useBaseGridFeatures';
+import { useBaseCollectionComponentReadyFeatures } from '../../hooks/useBaseCollectionComponentReadyFeatures';
+/**
+ * AutoPatternsGridLoaded - Step 4 in Grid Flow
+ *
+ * FLOW 2: AutoPatternsCollectionComponent → AutoPatternsGrid → useGridFeaturesAsync → [AutoPatternsGridLoaded] → useBaseCollectionComponentReadyFeatures → Grid
+ *
+ * This component renders when all async features have been loaded and are ready.
+ * It represents the "loaded" state of the grid flow and handles:
+ *
+ * Key Responsibilities:
+ * - Creates the grid collection state using loaded async features
+ * - Calls useBaseCollectionComponentReadyFeatures for final feature preparation
+ * - Extracts grid-specific features (renderItem, preset, imagePlacement) from base features
+ * - Extracts async features like dragAndDrop if enabled
+ * - Renders the final Grid component with all features combined
+ */
+const AutoPatternsGridLoaded = props => {
+  const {
+    config,
+    asyncFeaturesState,
+    baseStateParams,
+    dataHook
+  } = props;
+
+  // Extract grid-specific display features (how items are rendered and displayed)
   const {
-    state,
-    search,
-    title,
-    emptyState,
-    filters,
-    actionCell,
     renderItem,
     imagePlacement,
-    views,
-    preset,
-    dragAndDropProps
-  } = useGridFeatures(configuration);
+    preset
+  } = useBaseGridFeatures(config);
+
+  // Extract loaded async features from the successful feature loading state
+  const {
+    dragAndDrop
+  } = useSelector(() => ({
+    ...asyncFeaturesState.status.data
+  }));
+
+  // Create grid collection state with the loaded async dependencies
+  const state = useGridCollection(baseStateParams.params);
+
+  // STEP 5: Call shared hook that prepares final collection features
+  // This hook is shared across all three flows (Table, Grid, TableGridSwitch)
+  const baseCollectionComponentReadyFeatures = useBaseCollectionComponentReadyFeatures({
+    config,
+    collection: state.collection,
+    asyncFeaturesState,
+    baseStateParams
+  });
+
+  // Extract grid-specific drag and drop props if feature is loaded
+  const dragAndDropProps = dragAndDrop == null || dragAndDrop.useGridDragAndDrop == null ? void 0 : dragAndDrop.useGridDragAndDrop(config);
+
+  // FINAL STEP: Render the fully-featured Grid component
+  // Combines grid display features with loaded async features
   return /*#__PURE__*/React.createElement(Grid, _extends({
-    dataHook: "auto-patterns-grid",
-    search: search,
-    title: title,
-    state: state,
-    actionCell: actionCell,
-    filters: filters,
-    views: views,
-    emptyState: emptyState,
-    imagePlacement: imagePlacement
-  }, dragAndDropProps, {
+    dataHook: dataHook,
     preset: preset,
-    renderItem: renderItem
+    imagePlacement: imagePlacement,
+    renderItem: renderItem,
+    state: state
+  }, baseCollectionComponentReadyFeatures, dragAndDropProps));
+};
+
+/**
+ * AutoPatternsGrid - Step 2 in Grid Flow
+ *
+ * FLOW 2: AutoPatternsCollectionComponent → [AutoPatternsGrid] → useGridFeaturesAsync → AutoPatternsGridLoaded → useBaseCollectionComponentReadyFeatures → Grid
+ *
+ * This is the main grid component that orchestrates the grid rendering flow.
+ * It handles the loading states and coordinates between async feature loading and final rendering.
+ *
+ * Key Responsibilities:
+ * - Extracts grid display features (renderItem, preset, imagePlacement) and visible field IDs
+ * - Calls useGridFeaturesAsync (Step 3) to load grid-specific async features
+ * - Creates initial grid state with basic collection
+ * - Monitors loading status and switches between loading/loaded states
+ * - Renders skeleton grid during loading or AutoPatternsGridLoaded when ready
+ */
+export const AutoPatternsGrid = props => {
+  const {
+    config
+  } = props;
+
+  // Extract grid display features and visible field IDs from configuration
+  const {
+    renderItem,
+    imagePlacement,
+    preset,
+    visibleFieldIds
+  } = useBaseGridFeatures(config);
+
+  // Initialize base state parameters with collection config and visible fields
+  const baseStateParams = useBasePatternsStateParams(config, {
+    visibleFieldIds
+  });
+
+  // STEP 3: Load grid-specific async features (currently only drag&drop)
+  const {
+    asyncFeaturesState
+  } = useGridFeaturesAsync({
+    config
+  });
+
+  // Create patterns container and collection factory
+  const container = useWixPatternsContainer();
+  const createCollection = useCreateCollection();
+
+  // Initialize grid state with basic collection (used during loading)
+  const [state] = useState(() => new GridState({
+    collection: createCollection(baseStateParams.params),
+    container
   }));
+
+  // Monitor async features loading status
+  const isReady = useSelector(() => asyncFeaturesState.status.isSuccess || asyncFeaturesState.status.isError);
+  const dataHook = 'auto-patterns-grid';
+  if (isReady) {
+    // STEP 4: All features loaded - render the fully-featured grid
+    return /*#__PURE__*/React.createElement(AutoPatternsGridLoaded, {
+      dataHook: dataHook,
+      config: config,
+      baseStateParams: baseStateParams,
+      asyncFeaturesState: asyncFeaturesState
+    });
+  }
+
+  // LOADING STATE: Render basic grid skeleton while features are loading
+  return /*#__PURE__*/React.createElement(Grid, {
+    dataHook: dataHook,
+    preset: preset,
+    imagePlacement: imagePlacement,
+    renderItem: renderItem,
+    state: state
+  });
 };
 //# sourceMappingURL=AutoPatternsGrid.js.map

package/dist/esm/components/AutoPatternsGrid/AutoPatternsGrid.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Grid","useGridFeatures","AutoPatternsGrid","_ref","configuration","state","search","title","emptyState","filters","actionCell","renderItem","imagePlacement","views","preset","dragAndDropProps","createElement","_extends","dataHook"],"sources":["../../../../src/components/AutoPatternsGrid/AutoPatternsGrid.tsx"],"sourcesContent":["import React from 'react';\nimport { Grid } from '@wix/patterns';\nimport { GridConfig } from '../../types';\nimport { useGridFeatures } from '../../hooks';\n\nexport interface AutoPatternsGridContentProps {\n  configuration: GridConfig;\n}\n\nexport const AutoPatternsGrid = ({\n  configuration,\n}: AutoPatternsGridContentProps) => {\n  const {\n    state,\n    search,\n    title,\n    emptyState,\n    filters,\n    actionCell,\n    renderItem,\n    imagePlacement,\n    views,\n    preset,\n    dragAndDropProps,\n  } = useGridFeatures(configuration);\n\n  return (\n    <Grid\n      dataHook=\"auto-patterns-grid\"\n      search={search}\n      title={title}\n      state={state}\n      actionCell={actionCell}\n      filters={filters}\n      views={views}\n      emptyState={emptyState}\n      imagePlacement={imagePlacement}\n      {...dragAndDropProps}\n      preset={preset}\n      renderItem={renderItem}\n    />\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,eAAe;AAEpC,SAASC,eAAe,QAAQ,aAAa;AAM7C,OAAO,MAAMC,gBAAgB,GAAGC,IAAA,IAEI;EAAA,IAFH;IAC/BC;EAC4B,CAAC,GAAAD,IAAA;EAC7B,MAAM;IACJE,KAAK;IACLC,MAAM;IACNC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,UAAU;IACVC,UAAU;IACVC,cAAc;IACdC,KAAK;IACLC,MAAM;IACNC;EACF,CAAC,GAAGd,eAAe,CAACG,aAAa,CAAC;EAElC,oBACEL,KAAA,CAAAiB,aAAA,CAAChB,IAAI,EAAAiB,QAAA;IACHC,QAAQ,EAAC,oBAAoB;IAC7BZ,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA,KAAM;IACbF,KAAK,EAAEA,KAAM;IACbK,UAAU,EAAEA,UAAW;IACvBD,OAAO,EAAEA,OAAQ;IACjBI,KAAK,EAAEA,KAAM;IACbL,UAAU,EAAEA,UAAW;IACvBI,cAAc,EAAEA;EAAe,GAC3BG,gBAAgB;IACpBD,MAAM,EAAEA,MAAO;IACfH,UAAU,EAAEA;EAAW,EACxB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useState","Grid","GridState","useCreateCollection","useGridCollection","useSelector","useWixPatternsContainer","useBasePatternsStateParams","useGridFeaturesAsync","useBaseGridFeatures","useBaseCollectionComponentReadyFeatures","AutoPatternsGridLoaded","props","config","asyncFeaturesState","baseStateParams","dataHook","renderItem","imagePlacement","preset","dragAndDrop","status","data","state","params","baseCollectionComponentReadyFeatures","collection","dragAndDropProps","useGridDragAndDrop","createElement","_extends","AutoPatternsGrid","visibleFieldIds","container","createCollection","isReady","isSuccess","isError"],"sources":["../../../../src/components/AutoPatternsGrid/AutoPatternsGrid.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Grid,\n  GridState,\n  useCreateCollection,\n  useGridCollection,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { GridConfig } from '../../types';\nimport { useBasePatternsStateParams } from '../../hooks/useBasePatternsStateParams';\nimport { useGridFeaturesAsync } from '../../hooks';\nimport { useBaseGridFeatures } from '../../hooks/useBaseGridFeatures';\nimport { useBaseCollectionComponentReadyFeatures } from '../../hooks/useBaseCollectionComponentReadyFeatures';\n\nexport interface AutoPatternsGridContentProps {\n  config: GridConfig;\n}\n\n/**\n * AutoPatternsGridLoaded - Step 4 in Grid Flow\n *\n * FLOW 2: AutoPatternsCollectionComponent → AutoPatternsGrid → useGridFeaturesAsync → [AutoPatternsGridLoaded] → useBaseCollectionComponentReadyFeatures → Grid\n *\n * This component renders when all async features have been loaded and are ready.\n * It represents the \"loaded\" state of the grid flow and handles:\n *\n * Key Responsibilities:\n * - Creates the grid collection state using loaded async features\n * - Calls useBaseCollectionComponentReadyFeatures for final feature preparation\n * - Extracts grid-specific features (renderItem, preset, imagePlacement) from base features\n * - Extracts async features like dragAndDrop if enabled\n * - Renders the final Grid component with all features combined\n */\nconst AutoPatternsGridLoaded = (\n  props: NonNullable<ReturnType<typeof useGridFeaturesAsync>> &\n    AutoPatternsGridContentProps & {\n      baseStateParams: ReturnType<typeof useBasePatternsStateParams>;\n      dataHook?: string;\n    },\n) => {\n  const { config, asyncFeaturesState, baseStateParams, dataHook } = props;\n\n  // Extract grid-specific display features (how items are rendered and displayed)\n  const { renderItem, imagePlacement, preset } = useBaseGridFeatures(config);\n\n  // Extract loaded async features from the successful feature loading state\n  const { dragAndDrop } = useSelector(() => ({\n    ...asyncFeaturesState.status.data,\n  }));\n\n  // Create grid collection state with the loaded async dependencies\n  const state = useGridCollection<any>(baseStateParams.params);\n\n  // STEP 5: Call shared hook that prepares final collection features\n  // This hook is shared across all three flows (Table, Grid, TableGridSwitch)\n  const baseCollectionComponentReadyFeatures =\n    useBaseCollectionComponentReadyFeatures({\n      config,\n      collection: state.collection,\n      asyncFeaturesState,\n      baseStateParams,\n    });\n\n  // Extract grid-specific drag and drop props if feature is loaded\n  const dragAndDropProps = dragAndDrop?.useGridDragAndDrop?.(config);\n\n  // FINAL STEP: Render the fully-featured Grid component\n  // Combines grid display features with loaded async features\n  return (\n    <Grid\n      dataHook={dataHook}\n      preset={preset}\n      imagePlacement={imagePlacement}\n      renderItem={renderItem}\n      state={state}\n      {...baseCollectionComponentReadyFeatures}\n      {...dragAndDropProps}\n    />\n  );\n};\n\n/**\n * AutoPatternsGrid - Step 2 in Grid Flow\n *\n * FLOW 2: AutoPatternsCollectionComponent → [AutoPatternsGrid] → useGridFeaturesAsync → AutoPatternsGridLoaded → useBaseCollectionComponentReadyFeatures → Grid\n *\n * This is the main grid component that orchestrates the grid rendering flow.\n * It handles the loading states and coordinates between async feature loading and final rendering.\n *\n * Key Responsibilities:\n * - Extracts grid display features (renderItem, preset, imagePlacement) and visible field IDs\n * - Calls useGridFeaturesAsync (Step 3) to load grid-specific async features\n * - Creates initial grid state with basic collection\n * - Monitors loading status and switches between loading/loaded states\n * - Renders skeleton grid during loading or AutoPatternsGridLoaded when ready\n */\nexport const AutoPatternsGrid = (props: AutoPatternsGridContentProps) => {\n  const { config } = props;\n\n  // Extract grid display features and visible field IDs from configuration\n  const { renderItem, imagePlacement, preset, visibleFieldIds } =\n    useBaseGridFeatures(config);\n\n  // Initialize base state parameters with collection config and visible fields\n  const baseStateParams = useBasePatternsStateParams(config, {\n    visibleFieldIds,\n  });\n\n  // STEP 3: Load grid-specific async features (currently only drag&drop)\n  const { asyncFeaturesState } = useGridFeaturesAsync({ config });\n\n  // Create patterns container and collection factory\n  const container = useWixPatternsContainer();\n  const createCollection = useCreateCollection();\n\n  // Initialize grid state with basic collection (used during loading)\n  const [state] = useState(\n    () =>\n      new GridState<any, {}>({\n        collection: createCollection<any, {}>(baseStateParams.params),\n        container,\n      }),\n  );\n\n  // Monitor async features loading status\n  const isReady = useSelector(\n    () =>\n      asyncFeaturesState.status.isSuccess || asyncFeaturesState.status.isError,\n  );\n\n  const dataHook = 'auto-patterns-grid';\n\n  if (isReady) {\n    // STEP 4: All features loaded - render the fully-featured grid\n    return (\n      <AutoPatternsGridLoaded\n        dataHook={dataHook}\n        config={config}\n        baseStateParams={baseStateParams}\n        asyncFeaturesState={asyncFeaturesState}\n      />\n    );\n  }\n\n  // LOADING STATE: Render basic grid skeleton while features are loading\n  return (\n    <Grid\n      dataHook={dataHook}\n      preset={preset}\n      imagePlacement={imagePlacement}\n      renderItem={renderItem}\n      state={state}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/AutoPatternsRoute/AutoPatternsPage.js

@@ -1,9 +1,7 @@
 import React, { lazy, Suspense } from 'react';
 import { SchemaProvider } from '../../providers/SchemaContext';
 import { SkeletonEntity } from '../AutoPatternsEntityPage/SkeletonEntity';
-const AutoPatternsCollectionPage = /*#__PURE__*/lazy(() => import('../AutoPatternsCollectionPage').then(module => ({
-  default: module.AutoPatternsCollectionPage
-})));
+import { AutoPatternsCollectionPage } from '../AutoPatternsCollectionPage';
 const AutoPatternsEntityPage = /*#__PURE__*/lazy(() => import('../AutoPatternsEntityPage').then(module => ({
   default: module.AutoPatternsEntityPage
 })));
@@ -19,11 +17,9 @@ export const AutoPatternsPage = _ref => {
   switch (type) {
     case 'collectionPage':
       if (collectionPage) {
-        return /*#__PURE__*/React.createElement(Suspense, {
-          fallback: /*#__PURE__*/React.createElement("div", null)
-        }, /*#__PURE__*/React.createElement(AutoPatternsCollectionPage, {
+        return /*#__PURE__*/React.createElement(AutoPatternsCollectionPage, {
           configuration: collectionPage
-        }));
+        });
       }
       break;
     case 'entityPage':

package/dist/esm/components/AutoPatternsRoute/AutoPatternsPage.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","lazy","Suspense","SchemaProvider","SkeletonEntity","AutoPatternsCollectionPage","then","module","default","AutoPatternsEntityPage","AutoPatternsPage","_ref","pageConfig","type","collectionPage","entityPage","createElement","fallback","configuration","collection","skeleton"],"sources":["../../../../src/components/AutoPatternsRoute/AutoPatternsPage.tsx"],"sourcesContent":["import React, { lazy, Suspense } from 'react';\nimport { PageConfig } from '../../types';\nimport { SchemaProvider } from '../../providers/SchemaContext';\nimport { SkeletonEntity } from '../AutoPatternsEntityPage/SkeletonEntity';\n\nconst AutoPatternsCollectionPage = lazy(() =>\n  import('../AutoPatternsCollectionPage').then((module) => ({\n    default: module.AutoPatternsCollectionPage,\n  })),\n);\nconst AutoPatternsEntityPage = lazy(() =>\n  import('../AutoPatternsEntityPage').then((module) => ({\n    default: module.AutoPatternsEntityPage,\n  })),\n);\n\nexport interface AutoPatternsPageProps {\n  pageConfig: PageConfig;\n}\n\nexport const AutoPatternsPage = ({ pageConfig }: AutoPatternsPageProps) => {\n  const { type, collectionPage, entityPage } = pageConfig;\n\n  switch (type) {\n    case 'collectionPage':\n      if (collectionPage) {\n        return (\n          <Suspense fallback={<div />}>\n            <AutoPatternsCollectionPage configuration={collectionPage} />\n          </Suspense>\n        );\n      }\n      break;\n    case 'entityPage':\n      if (entityPage) {\n        return (\n          <SchemaProvider\n            collection={entityPage}\n            skeleton={<SkeletonEntity entityPage={entityPage} />}\n          >\n            <Suspense fallback={<SkeletonEntity entityPage={entityPage} />}>\n              <AutoPatternsEntityPage configuration={entityPage} />\n            </Suspense>\n          </SchemaProvider>\n        );\n      }\n      break;\n    default:\n      break;\n  }\n\n  return null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,QAAQ,QAAQ,OAAO;AAE7C,SAASC,cAAc,QAAQ,+BAA+B;AAC9D,SAASC,cAAc,QAAQ,0CAA0C;AAEzE,MAAMC,0BAA0B,gBAAGJ,IAAI,CAAC,MACtC,MAAM,CAAC,+BAA+B,CAAC,CAACK,IAAI,CAAEC,MAAM,KAAM;EACxDC,OAAO,EAAED,MAAM,CAACF;AAClB,CAAC,CAAC,CACJ,CAAC;AACD,MAAMI,sBAAsB,gBAAGR,IAAI,CAAC,MAClC,MAAM,CAAC,2BAA2B,CAAC,CAACK,IAAI,CAAEC,MAAM,KAAM;EACpDC,OAAO,EAAED,MAAM,CAACE;AAClB,CAAC,CAAC,CACJ,CAAC;AAMD,OAAO,MAAMC,gBAAgB,GAAGC,IAAA,IAA2C;EAAA,IAA1C;IAAEC;EAAkC,CAAC,GAAAD,IAAA;EACpE,MAAM;IAAEE,IAAI;IAAEC,cAAc;IAAEC;EAAW,CAAC,GAAGH,UAAU;EAEvD,QAAQC,IAAI;IACV,KAAK,gBAAgB;MACnB,IAAIC,cAAc,EAAE;QAClB,oBACEd,KAAA,CAAAgB,aAAA,CAACd,QAAQ;UAACe,QAAQ,eAAEjB,KAAA,CAAAgB,aAAA,YAAM;QAAE,gBAC1BhB,KAAA,CAAAgB,aAAA,CAACX,0BAA0B;UAACa,aAAa,EAAEJ;QAAe,CAAE,CACpD,CAAC;MAEf;MACA;IACF,KAAK,YAAY;MACf,IAAIC,UAAU,EAAE;QACd,oBACEf,KAAA,CAAAgB,aAAA,CAACb,cAAc;UACbgB,UAAU,EAAEJ,UAAW;UACvBK,QAAQ,eAAEpB,KAAA,CAAAgB,aAAA,CAACZ,cAAc;YAACW,UAAU,EAAEA;UAAW,CAAE;QAAE,gBAErDf,KAAA,CAAAgB,aAAA,CAACd,QAAQ;UAACe,QAAQ,eAAEjB,KAAA,CAAAgB,aAAA,CAACZ,cAAc;YAACW,UAAU,EAAEA;UAAW,CAAE;QAAE,gBAC7Df,KAAA,CAAAgB,aAAA,CAACP,sBAAsB;UAACS,aAAa,EAAEH;QAAW,CAAE,CAC5C,CACI,CAAC;MAErB;MACA;IACF;MACE;EACJ;EAEA,OAAO,IAAI;AACb,CAAC","ignoreList":[]}
+{"version":3,"names":["React","lazy","Suspense","SchemaProvider","SkeletonEntity","AutoPatternsCollectionPage","AutoPatternsEntityPage","then","module","default","AutoPatternsPage","_ref","pageConfig","type","collectionPage","entityPage","createElement","configuration","collection","skeleton","fallback"],"sources":["../../../../src/components/AutoPatternsRoute/AutoPatternsPage.tsx"],"sourcesContent":["import React, { lazy, Suspense } from 'react';\nimport { PageConfig } from '../../types';\nimport { SchemaProvider } from '../../providers/SchemaContext';\nimport { SkeletonEntity } from '../AutoPatternsEntityPage/SkeletonEntity';\nimport { AutoPatternsCollectionPage } from '../AutoPatternsCollectionPage';\n\nconst AutoPatternsEntityPage = lazy(() =>\n  import('../AutoPatternsEntityPage').then((module) => ({\n    default: module.AutoPatternsEntityPage,\n  })),\n);\n\nexport interface AutoPatternsPageProps {\n  pageConfig: PageConfig;\n}\n\nexport const AutoPatternsPage = ({ pageConfig }: AutoPatternsPageProps) => {\n  const { type, collectionPage, entityPage } = pageConfig;\n\n  switch (type) {\n    case 'collectionPage':\n      if (collectionPage) {\n        return <AutoPatternsCollectionPage configuration={collectionPage} />;\n      }\n      break;\n    case 'entityPage':\n      if (entityPage) {\n        return (\n          <SchemaProvider\n            collection={entityPage}\n            skeleton={<SkeletonEntity entityPage={entityPage} />}\n          >\n            <Suspense fallback={<SkeletonEntity entityPage={entityPage} />}>\n              <AutoPatternsEntityPage configuration={entityPage} />\n            </Suspense>\n          </SchemaProvider>\n        );\n      }\n      break;\n    default:\n      break;\n  }\n\n  return null;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,QAAQ,QAAQ,OAAO;AAE7C,SAASC,cAAc,QAAQ,+BAA+B;AAC9D,SAASC,cAAc,QAAQ,0CAA0C;AACzE,SAASC,0BAA0B,QAAQ,+BAA+B;AAE1E,MAAMC,sBAAsB,gBAAGL,IAAI,CAAC,MAClC,MAAM,CAAC,2BAA2B,CAAC,CAACM,IAAI,CAAEC,MAAM,KAAM;EACpDC,OAAO,EAAED,MAAM,CAACF;AAClB,CAAC,CAAC,CACJ,CAAC;AAMD,OAAO,MAAMI,gBAAgB,GAAGC,IAAA,IAA2C;EAAA,IAA1C;IAAEC;EAAkC,CAAC,GAAAD,IAAA;EACpE,MAAM;IAAEE,IAAI;IAAEC,cAAc;IAAEC;EAAW,CAAC,GAAGH,UAAU;EAEvD,QAAQC,IAAI;IACV,KAAK,gBAAgB;MACnB,IAAIC,cAAc,EAAE;QAClB,oBAAOd,KAAA,CAAAgB,aAAA,CAACX,0BAA0B;UAACY,aAAa,EAAEH;QAAe,CAAE,CAAC;MACtE;MACA;IACF,KAAK,YAAY;MACf,IAAIC,UAAU,EAAE;QACd,oBACEf,KAAA,CAAAgB,aAAA,CAACb,cAAc;UACbe,UAAU,EAAEH,UAAW;UACvBI,QAAQ,eAAEnB,KAAA,CAAAgB,aAAA,CAACZ,cAAc;YAACW,UAAU,EAAEA;UAAW,CAAE;QAAE,gBAErDf,KAAA,CAAAgB,aAAA,CAACd,QAAQ;UAACkB,QAAQ,eAAEpB,KAAA,CAAAgB,aAAA,CAACZ,cAAc;YAACW,UAAU,EAAEA;UAAW,CAAE;QAAE,gBAC7Df,KAAA,CAAAgB,aAAA,CAACV,sBAAsB;UAACW,aAAa,EAAEF;QAAW,CAAE,CAC5C,CACI,CAAC;MAErB;MACA;IACF;MACE;EACJ;EAEA,OAAO,IAAI;AACb,CAAC","ignoreList":[]}

package/dist/esm/components/AutoPatternsTable/AutoPatternsTable.js

@@ -1,50 +1,135 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { Table } from '@wix/patterns';
-import { useTableFeatures } from '../../hooks';
-export const AutoPatternsTable = _ref => {
-  let {
-    configuration
-  } = _ref;
+import React, { useMemo, useState } from 'react';
+import { Table, TableState, useCreateCollection, useSelector, useTableCollection, useWixPatternsContainer } from '@wix/patterns';
+import { useBasePatternsStateParams } from '../../hooks/useBasePatternsStateParams';
+import { useTableFeaturesAsync } from '../../hooks/useTableFeaturesAsync';
+import { useBaseCollectionComponentReadyFeatures } from '../../hooks/useBaseCollectionComponentReadyFeatures';
+/**
+ * AutoPatternsTableLoaded - Step 4 in Table Flow
+ *
+ * FLOW 1: AutoPatternsCollectionComponent → AutoPatternsTable → useTableFeaturesAsync → [AutoPatternsTableLoaded] → useBaseCollectionComponentReadyFeatures → Table
+ *
+ * This component renders when all async features have been loaded and are ready.
+ * It represents the "loaded" state of the table flow and handles:
+ *
+ * Key Responsibilities:
+ * - Creates the table collection state using loaded async features
+ * - Calls useBaseCollectionComponentReadyFeatures for final feature preparation
+ * - Extracts and applies table-specific features (baseTableFeatures, sections, dragAndDrop)
+ * - Renders the final Table component with all features combined
+ * - Merges all feature props into a single props object for the Table
+ */
+const AutoPatternsTableLoaded = props => {
   const {
-    state,
-    columns,
-    customColumns,
-    search,
-    title,
-    emptyState,
-    filters,
-    views,
-    actionCell,
-    bulkActionToolbar,
-    onRowClick,
-    stickyColumns,
-    stickySelectionColumn,
-    showTitleBar,
+    config,
+    asyncFeaturesState,
+    baseStateParams,
+    dataHook
+  } = props;
+
+  // Extract loaded async features from the successful feature loading state
+  const {
+    baseTableFeatures,
     sections,
-    dragAndDropProps,
-    dataExtension
-  } = useTableFeatures(configuration);
+    dragAndDrop
+  } = useSelector(() => ({
+    ...asyncFeaturesState.status.data
+  }));
+
+  // Create table collection state with the loaded async dependencies
+  const state = useTableCollection(baseStateParams.params);
+
+  // STEP 5: Call shared hook that prepares final collection features
+  // This hook is shared across all three flows (Table, Grid, TableGridSwitch)
+  const baseCollectionComponentReadyFeatures = useBaseCollectionComponentReadyFeatures({
+    config,
+    collection: state.collection,
+    asyncFeaturesState,
+    baseStateParams
+  });
+
+  // Extract feature-specific props from loaded features
+  const dragAndDropProps = dragAndDrop == null || dragAndDrop.useTableDragAndDrop == null ? void 0 : dragAndDrop.useTableDragAndDrop(config);
+  const baseTableFeaturesProps = baseTableFeatures == null ? void 0 : baseTableFeatures.useBaseTableFeatures(config);
+  const sectionsProps = sections == null ? void 0 : sections.useTableSections(config);
+
+  // FINAL STEP: Render the fully-featured Table component
+  // Combines all loaded features into final table props
   return /*#__PURE__*/React.createElement(Table, _extends({
-    dataHook: "auto-patterns-table",
-    search: search,
-    title: title,
+    dataHook: dataHook,
     state: state,
-    columns: columns,
-    dataExtension: dataExtension,
-    customColumns: customColumns
-  }, dragAndDropProps, {
-    actionCell: actionCell,
-    filters: filters,
-    views: views,
-    emptyState: emptyState,
-    bulkActionToolbar: bulkActionToolbar,
-    onRowClick: onRowClick,
+    columns: [],
     horizontalScroll: true,
-    stickyColumns: stickyColumns,
-    stickySelectionColumn: stickySelectionColumn,
-    showTitleBar: showTitleBar,
-    sections: sections
+    useNewInfiniteScrollLoader: true
+  }, sectionsProps && {
+    sections: sectionsProps
+  }, baseTableFeaturesProps, baseCollectionComponentReadyFeatures, dragAndDropProps));
+};
+
+/**
+ * AutoPatternsTable - Step 2 in Table Flow
+ *
+ * FLOW 1: AutoPatternsCollectionComponent → [AutoPatternsTable] → useTableFeaturesAsync → AutoPatternsTableLoaded → useBaseCollectionComponentReadyFeatures → Table
+ *
+ * This is the main table component that orchestrates the table rendering flow.
+ * It handles the loading states and coordinates between async feature loading and final rendering.
+ *
+ * Key Responsibilities:
+ * - Prepares visible field IDs from table column configuration
+ * - Calls useTableFeaturesAsync (Step 3) to load table-specific async features
+ * - Creates initial table state with basic collection
+ * - Monitors loading status and switches between loading/loaded states
+ * - Renders skeleton table during loading or AutoPatternsTableLoaded when ready
+ */
+export const AutoPatternsTable = props => {
+  const {
+    config
+  } = props;
+
+  // Extract visible field IDs from table columns for data fetching optimization
+  const visibleFieldIds = useMemo(() => config.columns.map(column => column.id), [config]);
+
+  // Initialize base state parameters with collection config and visible fields
+  const baseStateParams = useBasePatternsStateParams(config, {
+    visibleFieldIds
+  });
+
+  // STEP 3: Load table-specific async features (drag&drop, sections, base table features)
+  const {
+    asyncFeaturesState
+  } = useTableFeaturesAsync({
+    config
+  });
+
+  // Create patterns container and collection factory
+  const container = useWixPatternsContainer();
+  const createCollection = useCreateCollection();
+
+  // Initialize table state with basic collection (used during loading)
+  const [state] = useState(() => new TableState({
+    collection: createCollection(baseStateParams.params),
+    container
   }));
+
+  // Monitor async features loading status
+  const isReady = useSelector(() => asyncFeaturesState.status.isSuccess || asyncFeaturesState.status.isError);
+  const dataHook = 'auto-patterns-table';
+  if (isReady) {
+    // STEP 4: All features loaded - render the fully-featured table
+    return /*#__PURE__*/React.createElement(AutoPatternsTableLoaded, {
+      dataHook: dataHook,
+      config: config,
+      baseStateParams: baseStateParams,
+      asyncFeaturesState: asyncFeaturesState
+    });
+  }
+
+  // LOADING STATE: Render basic table skeleton while features are loading
+  return /*#__PURE__*/React.createElement(Table, {
+    dataHook: dataHook,
+    useNewInfiniteScrollLoader: true,
+    state: state,
+    columns: []
+  });
 };
 //# sourceMappingURL=AutoPatternsTable.js.map

package/dist/esm/components/AutoPatternsTable/AutoPatternsTable.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Table","useTableFeatures","AutoPatternsTable","_ref","configuration","state","columns","customColumns","search","title","emptyState","filters","views","actionCell","bulkActionToolbar","onRowClick","stickyColumns","stickySelectionColumn","showTitleBar","sections","dragAndDropProps","dataExtension","createElement","_extends","dataHook","horizontalScroll"],"sources":["../../../../src/components/AutoPatternsTable/AutoPatternsTable.tsx"],"sourcesContent":["import React from 'react';\nimport { Table } from '@wix/patterns';\nimport { TableConfig } from '../../types';\nimport { useTableFeatures } from '../../hooks';\n\nexport interface AutoPatternsTableContentProps {\n  configuration: TableConfig;\n}\n\nexport const AutoPatternsTable = ({\n  configuration,\n}: AutoPatternsTableContentProps) => {\n  const {\n    state,\n    columns,\n    customColumns,\n    search,\n    title,\n    emptyState,\n    filters,\n    views,\n    actionCell,\n    bulkActionToolbar,\n    onRowClick,\n    stickyColumns,\n    stickySelectionColumn,\n    showTitleBar,\n    sections,\n    dragAndDropProps,\n    dataExtension,\n  } = useTableFeatures(configuration);\n\n  return (\n    <Table\n      dataHook=\"auto-patterns-table\"\n      search={search}\n      title={title}\n      state={state}\n      columns={columns}\n      dataExtension={dataExtension}\n      customColumns={customColumns}\n      {...dragAndDropProps}\n      actionCell={actionCell}\n      filters={filters}\n      views={views}\n      emptyState={emptyState}\n      bulkActionToolbar={bulkActionToolbar}\n      onRowClick={onRowClick}\n      horizontalScroll\n      stickyColumns={stickyColumns}\n      stickySelectionColumn={stickySelectionColumn}\n      showTitleBar={showTitleBar}\n      sections={sections}\n    />\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,eAAe;AAErC,SAASC,gBAAgB,QAAQ,aAAa;AAM9C,OAAO,MAAMC,iBAAiB,GAAGC,IAAA,IAEI;EAAA,IAFH;IAChCC;EAC6B,CAAC,GAAAD,IAAA;EAC9B,MAAM;IACJE,KAAK;IACLC,OAAO;IACPC,aAAa;IACbC,MAAM;IACNC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,KAAK;IACLC,UAAU;IACVC,iBAAiB;IACjBC,UAAU;IACVC,aAAa;IACbC,qBAAqB;IACrBC,YAAY;IACZC,QAAQ;IACRC,gBAAgB;IAChBC;EACF,CAAC,GAAGpB,gBAAgB,CAACG,aAAa,CAAC;EAEnC,oBACEL,KAAA,CAAAuB,aAAA,CAACtB,KAAK,EAAAuB,QAAA;IACJC,QAAQ,EAAC,qBAAqB;IAC9BhB,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA,KAAM;IACbJ,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBe,aAAa,EAAEA,aAAc;IAC7Bd,aAAa,EAAEA;EAAc,GACzBa,gBAAgB;IACpBP,UAAU,EAAEA,UAAW;IACvBF,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAEA,KAAM;IACbF,UAAU,EAAEA,UAAW;IACvBI,iBAAiB,EAAEA,iBAAkB;IACrCC,UAAU,EAAEA,UAAW;IACvBU,gBAAgB;IAChBT,aAAa,EAAEA,aAAc;IAC7BC,qBAAqB,EAAEA,qBAAsB;IAC7CC,YAAY,EAAEA,YAAa;IAC3BC,QAAQ,EAAEA;EAAS,EACpB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useMemo","useState","Table","TableState","useCreateCollection","useSelector","useTableCollection","useWixPatternsContainer","useBasePatternsStateParams","useTableFeaturesAsync","useBaseCollectionComponentReadyFeatures","AutoPatternsTableLoaded","props","config","asyncFeaturesState","baseStateParams","dataHook","baseTableFeatures","sections","dragAndDrop","status","data","state","params","baseCollectionComponentReadyFeatures","collection","dragAndDropProps","useTableDragAndDrop","baseTableFeaturesProps","useBaseTableFeatures","sectionsProps","useTableSections","createElement","_extends","columns","horizontalScroll","useNewInfiniteScrollLoader","AutoPatternsTable","visibleFieldIds","map","column","id","container","createCollection","isReady","isSuccess","isError"],"sources":["../../../../src/components/AutoPatternsTable/AutoPatternsTable.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport {\n  Table,\n  TableState,\n  useCreateCollection,\n  useSelector,\n  useTableCollection,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { TableConfig } from '../../types';\nimport { useBasePatternsStateParams } from '../../hooks/useBasePatternsStateParams';\nimport { useTableFeaturesAsync } from '../../hooks/useTableFeaturesAsync';\nimport { useBaseCollectionComponentReadyFeatures } from '../../hooks/useBaseCollectionComponentReadyFeatures';\n\nexport interface AutoPatternsTableContentProps {\n  config: TableConfig;\n}\n\n/**\n * AutoPatternsTableLoaded - Step 4 in Table Flow\n *\n * FLOW 1: AutoPatternsCollectionComponent → AutoPatternsTable → useTableFeaturesAsync → [AutoPatternsTableLoaded] → useBaseCollectionComponentReadyFeatures → Table\n *\n * This component renders when all async features have been loaded and are ready.\n * It represents the \"loaded\" state of the table flow and handles:\n *\n * Key Responsibilities:\n * - Creates the table collection state using loaded async features\n * - Calls useBaseCollectionComponentReadyFeatures for final feature preparation\n * - Extracts and applies table-specific features (baseTableFeatures, sections, dragAndDrop)\n * - Renders the final Table component with all features combined\n * - Merges all feature props into a single props object for the Table\n */\nconst AutoPatternsTableLoaded = (\n  props: NonNullable<ReturnType<typeof useTableFeaturesAsync>> &\n    AutoPatternsTableContentProps & {\n      baseStateParams: ReturnType<typeof useBasePatternsStateParams>;\n      dataHook?: string;\n    },\n) => {\n  const { config, asyncFeaturesState, baseStateParams, dataHook } = props;\n\n  // Extract loaded async features from the successful feature loading state\n  const { baseTableFeatures, sections, dragAndDrop } = useSelector(() => ({\n    ...asyncFeaturesState.status.data,\n  }));\n\n  // Create table collection state with the loaded async dependencies\n  const state = useTableCollection<any>(baseStateParams.params);\n\n  // STEP 5: Call shared hook that prepares final collection features\n  // This hook is shared across all three flows (Table, Grid, TableGridSwitch)\n  const baseCollectionComponentReadyFeatures =\n    useBaseCollectionComponentReadyFeatures({\n      config,\n      collection: state.collection,\n      asyncFeaturesState,\n      baseStateParams,\n    });\n\n  // Extract feature-specific props from loaded features\n  const dragAndDropProps = dragAndDrop?.useTableDragAndDrop?.(config);\n  const baseTableFeaturesProps =\n    baseTableFeatures?.useBaseTableFeatures(config);\n  const sectionsProps = sections?.useTableSections(config);\n\n  // FINAL STEP: Render the fully-featured Table component\n  // Combines all loaded features into final table props\n  return (\n    <Table\n      dataHook={dataHook}\n      state={state}\n      columns={[]}\n      horizontalScroll\n      useNewInfiniteScrollLoader\n      {...(sectionsProps && { sections: sectionsProps })}\n      {...baseTableFeaturesProps}\n      {...baseCollectionComponentReadyFeatures}\n      {...dragAndDropProps}\n    />\n  );\n};\n\n/**\n * AutoPatternsTable - Step 2 in Table Flow\n *\n * FLOW 1: AutoPatternsCollectionComponent → [AutoPatternsTable] → useTableFeaturesAsync → AutoPatternsTableLoaded → useBaseCollectionComponentReadyFeatures → Table\n *\n * This is the main table component that orchestrates the table rendering flow.\n * It handles the loading states and coordinates between async feature loading and final rendering.\n *\n * Key Responsibilities:\n * - Prepares visible field IDs from table column configuration\n * - Calls useTableFeaturesAsync (Step 3) to load table-specific async features\n * - Creates initial table state with basic collection\n * - Monitors loading status and switches between loading/loaded states\n * - Renders skeleton table during loading or AutoPatternsTableLoaded when ready\n */\nexport const AutoPatternsTable = (props: AutoPatternsTableContentProps) => {\n  const { config } = props;\n\n  // Extract visible field IDs from table columns for data fetching optimization\n  const visibleFieldIds = useMemo(\n    () => config.columns.map((column) => column.id),\n    [config],\n  );\n\n  // Initialize base state parameters with collection config and visible fields\n  const baseStateParams = useBasePatternsStateParams(config, {\n    visibleFieldIds,\n  });\n\n  // STEP 3: Load table-specific async features (drag&drop, sections, base table features)\n  const { asyncFeaturesState } = useTableFeaturesAsync({ config });\n\n  // Create patterns container and collection factory\n  const container = useWixPatternsContainer();\n  const createCollection = useCreateCollection();\n\n  // Initialize table state with basic collection (used during loading)\n  const [state] = useState(\n    () =>\n      new TableState<any, {}>({\n        collection: createCollection<any, {}>(baseStateParams.params),\n        container,\n      }),\n  );\n\n  // Monitor async features loading status\n  const isReady = useSelector(\n    () =>\n      asyncFeaturesState.status.isSuccess || asyncFeaturesState.status.isError,\n  );\n\n  const dataHook = 'auto-patterns-table';\n\n  if (isReady) {\n    // STEP 4: All features loaded - render the fully-featured table\n    return (\n      <AutoPatternsTableLoaded\n        dataHook={dataHook}\n        config={config}\n        baseStateParams={baseStateParams}\n        asyncFeaturesState={asyncFeaturesState}\n      />\n    );\n  }\n\n  // LOADING STATE: Render basic table skeleton while features are loading\n  return (\n    <Table\n      dataHook={dataHook}\n      useNewInfiniteScrollLoader\n      state={state}\n      columns={[]}\n    />\n  );\n};\n"],"mappings":"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","ignoreList":[]}