@wix/auto-patterns 1.20.0 → 1.22.0

package/dist/docs/custom_overrides.md

@@ -28,6 +28,10 @@ your-page/
     │   ├── index.tsx                  // Exports useColumns hook
     │   ├── name.ts
     │   └── date.ts
+    ├── slots/                         // Custom slot components for collection pages
+    │   ├── index.tsx                  // Exports useSlots hook
+    │   ├── TopBannerComponent.tsx
+    │   └── BottomStatsComponent.tsx
     ├── customComponents/              // Custom entity page components
     │   ├── index.tsx                  // Exports useComponents hook
     │   ├── CustomNameField.tsx
@@ -35,16 +39,12 @@ your-page/
     ├── modals/                        // Custom modals
     │   ├── index.tsx                  // Exports useModals hook
     │   └── myCustomModal.tsx
-    └── customDataSources/             // Custom data sources
+    ├── customDataSources/             // Custom data sources
     │   ├── index.tsx                  // Exports useCustomDataSources hook
     │   └── myCustomDataSource.ts
-    ├── sections/                      // Section renderers
-    │   ├── index.tsx
-    │   └── groupByType.ts
-    └── customComponents/              // Custom entity page components
+    └── sections/                      // Section renderers
         ├── index.tsx
-        ├── CustomNameField.tsx
-        └── InfoCard.tsx
+        └── groupByType.ts
 ```
 
 ### Using Override Hooks in Your Page
@@ -54,6 +54,7 @@ In your page component, use the hook-based approach to access React context and
 ```tsx
 import { useActions } from '../components/actions';
 import { useColumns } from '../components/columns';
+import { useSlots } from '../components/slots';
 import { useSections } from '../components/sections';
 import { useComponents } from '../components/customComponents';
 import { useModals } from '../components/modals';
@@ -62,13 +63,14 @@ import { useCustomDataSources } from '../components/customDataSources';
 export default function YourPage() {
   const actions = useActions();
   const columns = useColumns();
+  const slots = useSlots();
   const sections = useSections();
   const components = useComponents();
   const modals = useModals();
   const customDataSources = useCustomDataSources();
 
   return (
-    <PatternsWizardOverridesProvider value={{ actions, columns, sections, components, modals, customDataSources }}>
+    <PatternsWizardOverridesProvider value={{ actions, columns, slots, sections, components, modals, customDataSources }}>
       <AutoPatternsApp configuration={config} />
     </PatternsWizardOverridesProvider>
   );
@@ -77,12 +79,13 @@ export default function YourPage() {
 
 ### Important: Updating Hook Index Files
 
-**When adding any new implementation (action, modal, column, section or component), you MUST update the corresponding hook in the `index.tsx` file to include your new implementation.** The main page component uses these hooks, so they serve as the central export point for each type of override.
+**When adding any new implementation (action, modal, column, slot, section or component), you MUST update the corresponding hook in the `index.tsx` file to include your new implementation.** The main page component uses these hooks, so they serve as the central export point for each type of override.
 
 For example:
 - Adding a new action → Update `../components/actions/index.tsx` to include the new action in the `useActions` hook
 - Adding a new modal → Update `../components/modals/index.tsx` to include the new modal in the `useModals` hook
 - Adding a new column override → Update `../components/columns/index.tsx` to include the new column in the `useColumns` hook
+- Adding a new slot component → Update `../components/slots/index.tsx` to include the new slot in the `useSlots` hook
 - Adding a new section renderer → Update `../components/sections/index.tsx` to include the new section in the `useSections` hook
 - Adding a new custom component → Update `../components/customComponents/index.tsx` to include the new component in the `useComponents` hook
 - Adding a new custom data source → Update `../components/customDataSources/index.tsx` to include the new data source in the `useCustomDataSources` hook
@@ -812,6 +815,10 @@ interface Section {
     prefixIcon?: React.ReactElement;
     onClick: () => void;
   };
+  badge?: {
+    visible: boolean;
+    skin?: 'light' | 'danger' | 'neutralLight';
+  };
 }
 ```
 
@@ -819,6 +826,7 @@ The section renderer receives an item and returns:
 - **id**: A unique identifier for the section (items with the same id are grouped together)
 - **title**: The text displayed in the section header
 - **primaryAction** (optional): An action button displayed in the section header
+- **badge** (optional): A badge configuration displayed in the section header
 
 #### Example: Section Renderer Implementation
 
@@ -844,6 +852,10 @@ export function groupByType(item: any): Section {
         console.log(`Showing all ${petType}s`);
       },
     },
+    badge: {
+      visible: true,
+      skin: 'light',
+    },
   };
 }
 ```
@@ -866,16 +878,20 @@ export function groupByAgeAndVaccination(item: any): Section {
 
   let sectionId: string;
   let sectionTitle: string;
+  let badgeSkin: 'light' | 'danger' | 'neutralLight' = 'light';
 
   if (age < 1) {
     sectionId = 'puppies';
     sectionTitle = 'Puppies (Under 1 year)';
+    badgeSkin = 'neutralLight';
   } else if (age >= 1 && age <= 5) {
     sectionId = isVaccinated ? 'young-vaccinated' : 'young-unvaccinated';
     sectionTitle = `Young Adults (1-5 years) - ${isVaccinated ? 'Vaccinated' : 'Not Vaccinated'}`;
+    badgeSkin = isVaccinated ? 'light' : 'danger';
   } else {
     sectionId = 'seniors';
     sectionTitle = 'Senior Pets (5+ years)';
+    badgeSkin = 'light';
   }
 
   return {
@@ -888,6 +904,10 @@ export function groupByAgeAndVaccination(item: any): Section {
         // Show special care information for puppies
       },
     } : undefined,
+    badge: {
+      visible: true,
+      skin: badgeSkin,
+    },
   };
 }
 ```
@@ -915,3 +935,155 @@ import * as actions from './components/actions';
 
 
 By implementing sections, you can significantly improve the user experience when dealing with large datasets by providing logical groupings that make information easier to find and understand.
+
+## Slots
+
+Slots allow you to inject custom React components into collection pages at specific points in the component hierarchy. Unlike other overrides that modify existing functionality, slots enable you to add entirely custom UI elements anywhere within the collection page components array.
+
+Slots are useful for:
+- Adding custom banners or announcements above or below the table/grid
+- Inserting analytics widgets or dashboards
+- Adding custom promotional content
+- Implementing page-specific functionality that doesn't fit into standard patterns
+
+### Configuration Structure
+
+Slots are configured in the collection page configuration using the `CustomComponentConfig` structure:
+
+```json
+{
+  "type": "custom",
+  "id": "myCustomSlot"
+}
+```
+
+**Key Properties:**
+- `type`: Must be set to `"custom"` to identify this as a slot component
+- `id`: A unique identifier that maps to your slot component implementation
+
+### Component Positioning
+
+Slot components can be positioned anywhere within the `components` array of a collection page. They will be rendered in the exact order specified in the configuration:
+
+```json
+{
+  "type": "collectionPage",
+  "collectionPage": {
+    "components": [
+      {
+        "type": "custom",
+        "id": "topBanner"
+      },
+      {
+        "type": "collection",
+        "collection": {
+          "collectionId": "MyCollection"
+        },
+        "layout": [...]
+      },
+      {
+        "type": "custom",
+        "id": "bottomStats"
+      }
+    ]
+  }
+}
+```
+
+This configuration will render:
+1. The custom `topBanner` component at the top
+2. The main collection component (table/grid) in the middle
+3. The custom `bottomStats` component at the bottom
+
+### Implementation Structure
+
+#### Creating Slot Components
+
+Slot components are standard React functional components that take no props:
+
+```tsx
+import React from 'react';
+import { Box, Card, Text, Button } from '@wix/design-system';
+
+export const TopBannerComponent: React.FC = () => {
+  return (
+    <Card>
+      <Card.Content>
+        <Box direction="vertical" gap={2}>
+          <Text size="large" weight="bold">Welcome to Pet Management</Text>
+          <Text>Manage all your pets from this central dashboard.</Text>
+          <Button size="small">Get Started</Button>
+        </Box>
+      </Card.Content>
+    </Card>
+  );
+};
+
+export const BottomStatsComponent: React.FC = () => {
+  return (
+    <Card>
+      <Card.Content>
+        <Box direction="horizontal" gap={4}>
+          <Box direction="vertical" gap={1}>
+            <Text size="large" weight="bold">47</Text>
+            <Text size="small">Total Pets</Text>
+          </Box>
+          <Box direction="vertical" gap={1}>
+            <Text size="large" weight="bold">12</Text>
+            <Text size="small">Available for Adoption</Text>
+          </Box>
+        </Box>
+      </Card.Content>
+    </Card>
+  );
+};
+```
+
+#### Creating the Slots Hook
+
+In `components/slots/index.tsx`:
+
+```tsx
+import { TopBannerComponent } from './TopBannerComponent';
+import { BottomStatsComponent } from './BottomStatsComponent';
+
+export const useSlots = () => {
+  // You can access React context and other hooks here
+  return {
+    topBanner: TopBannerComponent,
+    bottomStats: BottomStatsComponent
+  };
+};
+```
+
+**Important:** Every time you create a new slot component, you must import it and add it to the `useSlots` hook return object. The key in the return object must match the `id` specified in your JSON configuration.
+
+#### Registering Slots in Your Page
+
+In your main page component:
+
+```tsx
+import { useSlots } from '../components/slots';
+
+export default function YourPage() {
+  const slots = useSlots();
+
+  return (
+    <PatternsWizardOverridesProvider value={{ slots }}>
+      <AutoPatternsApp configuration={config} />
+    </PatternsWizardOverridesProvider>
+  );
+}
+```
+
+### Important Guidelines for Slots
+
+1. **Component Signature**: Slot components must be React functional components with no props: `React.FC`
+2. **Rendering Order**: Components render in the exact order specified in the `components` array
+3. **Performance**: Slot components re-render with the page, so optimize for performance if needed
+4. **Styling**: Follow the design system patterns and responsive design principles
+
+
+**Important:** Every time you create a new slot component, you must import it and add it to the `useSlots` hook return object in the `./components/slots/index.tsx` file. The key must match the `id` specified in your JSON configuration.
+
+Slots provide a powerful way to enhance collection pages with custom functionality while maintaining the structure and features of the AutoPatterns system.

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

@@ -0,0 +1,72 @@
+import { AutoPatternsTableGridSwitch } from '../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch';
+import { AutoPatternsTable } from '../AutoPatternsTable';
+import { AutoPatternsGrid } from '../AutoPatternsGrid';
+import { SchemaProvider } from '../../providers';
+import { SkeletonCollection } from '../AutoPatternsCollectionPageContent/SkeletonCollection';
+import React, { useMemo } from 'react';
+export const AutoPatternsCollectionComponent = _ref => {
+  let {
+    component,
+    index
+  } = _ref;
+  const {
+    layout,
+    ...sharedConfig
+  } = component;
+  const memoized = useMemo(() => {
+    var _layout$find, _layout$find2;
+    if (!(layout != null && layout.length)) {
+      return {
+        componentToRender: null,
+        componentType: 'Table'
+      };
+    }
+    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';
+    let componentToRender = null;
+    if (tableConfig && gridConfig) {
+      const config = {
+        ...sharedConfig,
+        ...tableConfig,
+        ...gridConfig
+      };
+      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTableGridSwitch, {
+        configuration: config
+      });
+    } else if (tableConfig) {
+      const config = {
+        ...sharedConfig,
+        ...tableConfig
+      };
+      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTable, {
+        configuration: config
+      });
+    } else if (gridConfig) {
+      componentType = 'Grid';
+      const config = {
+        ...sharedConfig,
+        ...gridConfig
+      };
+      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsGrid, {
+        configuration: config
+      });
+    }
+    return {
+      componentToRender,
+      componentType
+    };
+  }, [layout, sharedConfig]);
+  const {
+    componentToRender,
+    componentType
+  } = memoized;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, componentToRender ? /*#__PURE__*/React.createElement(SchemaProvider, {
+    key: `${sharedConfig.collection.collectionId}-${index}`,
+    collection: sharedConfig.collection,
+    skeleton: /*#__PURE__*/React.createElement(SkeletonCollection, {
+      componentType: componentType
+    })
+  }, componentToRender) : null);
+};
+//# sourceMappingURL=AutoPatternsCollectionComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["AutoPatternsTableGridSwitch","AutoPatternsTable","AutoPatternsGrid","SchemaProvider","SkeletonCollection","React","useMemo","AutoPatternsCollectionComponent","_ref","component","index","layout","sharedConfig","memoized","_layout$find","_layout$find2","length","componentToRender","componentType","tableConfig","find","item","type","table","gridConfig","grid","config","createElement","configuration","Fragment","key","collection","collectionId","skeleton"],"sources":["../../../../src/components/AutoPatternsCollectionComponent/AutoPatternsCollectionComponent.tsx"],"sourcesContent":["import { CollectionComponentConfig } from '../../types';\nimport { AutoPatternsTableGridSwitch } from '../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch';\nimport { AutoPatternsTable } from '../AutoPatternsTable';\nimport { AutoPatternsGrid } from '../AutoPatternsGrid';\nimport { SchemaProvider } from '../../providers';\nimport { SkeletonCollection } from '../AutoPatternsCollectionPageContent/SkeletonCollection';\nimport React, { useMemo } from 'react';\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        <AutoPatternsTableGridSwitch configuration={config} />\n      );\n    } else if (tableConfig) {\n      const config = { ...sharedConfig, ...tableConfig };\n      componentToRender = <AutoPatternsTable configuration={config} />;\n    } else if (gridConfig) {\n      componentType = 'Grid';\n      const config = { ...sharedConfig, ...gridConfig };\n      componentToRender = <AutoPatternsGrid configuration={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":"AACA,SAASA,2BAA2B,QAAQ,4DAA4D;AACxG,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,kBAAkB,QAAQ,yDAAyD;AAC5F,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AAEtC,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,GAAGP,OAAO,CAAC,MAAM;IAAA,IAAAQ,YAAA,EAAAC,aAAA;IAC7B,IAAI,EAACJ,MAAM,YAANA,MAAM,CAAEK,MAAM,GAAE;MACnB,OAAO;QACLC,iBAAiB,EAAE,IAAI;QACvBC,aAAa,EAAE;MACjB,CAAC;IACH;IAEA,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,gBACfZ,KAAA,CAAAsB,aAAA,CAAC3B,2BAA2B;QAAC4B,aAAa,EAAEF;MAAO,CAAE,CACtD;IACH,CAAC,MAAM,IAAIP,WAAW,EAAE;MACtB,MAAMO,MAAM,GAAG;QAAE,GAAGd,YAAY;QAAE,GAAGO;MAAY,CAAC;MAClDF,iBAAiB,gBAAGZ,KAAA,CAAAsB,aAAA,CAAC1B,iBAAiB;QAAC2B,aAAa,EAAEF;MAAO,CAAE,CAAC;IAClE,CAAC,MAAM,IAAIF,UAAU,EAAE;MACrBN,aAAa,GAAG,MAAM;MACtB,MAAMQ,MAAM,GAAG;QAAE,GAAGd,YAAY;QAAE,GAAGY;MAAW,CAAC;MACjDP,iBAAiB,gBAAGZ,KAAA,CAAAsB,aAAA,CAACzB,gBAAgB;QAAC0B,aAAa,EAAEF;MAAO,CAAE,CAAC;IACjE;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,oBACER,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAwB,QAAA,QACGZ,iBAAiB,gBAChBZ,KAAA,CAAAsB,aAAA,CAACxB,cAAc;IACb2B,GAAG,EAAE,GAAGlB,YAAY,CAACmB,UAAU,CAACC,YAAY,IAAItB,KAAK,EAAG;IACxDqB,UAAU,EAAEnB,YAAY,CAACmB,UAAW;IACpCE,QAAQ,eAAE5B,KAAA,CAAAsB,aAAA,CAACvB,kBAAkB;MAACc,aAAa,EAAEA;IAAc,CAAE;EAAE,GAE9DD,iBACa,CAAC,GACf,IACJ,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/esm/components/AutoPatternsCollectionPage/AutoPatternsCollectionPage.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { CollectionPage } from '@wix/patterns/page';
 import { AutoPatternsCollectionPageContent } from '../AutoPatternsCollectionPageContent';
-import { usePatternsWizardOverridesContext } from '../../providers';
 import { useCollectionPageActions } from '../../hooks/useCollectionPageActions';
 export const AutoPatternsCollectionPage = _ref => {
   let {
@@ -14,7 +13,6 @@ export const AutoPatternsCollectionPage = _ref => {
   const actions = useCollectionPageActions({
     collectionPageActions: configuration.actions
   });
-  const context = usePatternsWizardOverridesContext();
   return /*#__PURE__*/React.createElement(CollectionPage, {
     height: "100vh",
     dataHook: "auto-patterns-page"
@@ -23,7 +21,7 @@ export const AutoPatternsCollectionPage = _ref => {
     subtitle: subtitle,
     primaryAction: actions.primaryActions,
     secondaryActions: actions.secondaryActions
-  }), /*#__PURE__*/React.createElement(CollectionPage.Content, null, context != null && context.HeaderAddon ? /*#__PURE__*/React.createElement(context.HeaderAddon, null) : null, /*#__PURE__*/React.createElement(AutoPatternsCollectionPageContent, {
+  }), /*#__PURE__*/React.createElement(CollectionPage.Content, null, /*#__PURE__*/React.createElement(AutoPatternsCollectionPageContent, {
     configuration: configuration
   })));
 };

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

@@ -1 +1 @@
-{"version":3,"names":["React","CollectionPage","AutoPatternsCollectionPageContent","usePatternsWizardOverridesContext","useCollectionPageActions","AutoPatternsCollectionPage","_ref","configuration","title","subtitle","actions","collectionPageActions","context","createElement","height","dataHook","Header","primaryAction","primaryActions","secondaryActions","Content","HeaderAddon"],"sources":["../../../../src/components/AutoPatternsCollectionPage/AutoPatternsCollectionPage.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionPage } from '@wix/patterns/page';\nimport { AutoPatternsCollectionPageContent } from '../AutoPatternsCollectionPageContent';\nimport { usePatternsWizardOverridesContext } from '../../providers';\nimport { CollectionPageConfig } from '../../types/CollectionPageConfig';\nimport { useCollectionPageActions } from '../../hooks/useCollectionPageActions';\n\nexport interface AutoPatternsCollectionPageProps {\n  configuration: CollectionPageConfig;\n}\n\nexport const AutoPatternsCollectionPage: React.FC<\n  AutoPatternsCollectionPageProps\n> = ({ configuration }) => {\n  const { title, subtitle } = configuration;\n\n  const actions = useCollectionPageActions({\n    collectionPageActions: configuration.actions,\n  });\n\n  const context = usePatternsWizardOverridesContext();\n\n  return (\n    <CollectionPage height=\"100vh\" dataHook=\"auto-patterns-page\">\n      <CollectionPage.Header\n        title={title}\n        subtitle={subtitle}\n        primaryAction={actions.primaryActions}\n        secondaryActions={actions.secondaryActions}\n      />\n      <CollectionPage.Content>\n        {context?.HeaderAddon ? <context.HeaderAddon /> : null}\n        <AutoPatternsCollectionPageContent configuration={configuration} />\n      </CollectionPage.Content>\n    </CollectionPage>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,iCAAiC,QAAQ,sCAAsC;AACxF,SAASC,iCAAiC,QAAQ,iBAAiB;AAEnE,SAASC,wBAAwB,QAAQ,sCAAsC;AAM/E,OAAO,MAAMC,0BAEZ,GAAGC,IAAA,IAAuB;EAAA,IAAtB;IAAEC;EAAc,CAAC,GAAAD,IAAA;EACpB,MAAM;IAAEE,KAAK;IAAEC;EAAS,CAAC,GAAGF,aAAa;EAEzC,MAAMG,OAAO,GAAGN,wBAAwB,CAAC;IACvCO,qBAAqB,EAAEJ,aAAa,CAACG;EACvC,CAAC,CAAC;EAEF,MAAME,OAAO,GAAGT,iCAAiC,CAAC,CAAC;EAEnD,oBACEH,KAAA,CAAAa,aAAA,CAACZ,cAAc;IAACa,MAAM,EAAC,OAAO;IAACC,QAAQ,EAAC;EAAoB,gBAC1Df,KAAA,CAAAa,aAAA,CAACZ,cAAc,CAACe,MAAM;IACpBR,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBQ,aAAa,EAAEP,OAAO,CAACQ,cAAe;IACtCC,gBAAgB,EAAET,OAAO,CAACS;EAAiB,CAC5C,CAAC,eACFnB,KAAA,CAAAa,aAAA,CAACZ,cAAc,CAACmB,OAAO,QACpBR,OAAO,YAAPA,OAAO,CAAES,WAAW,gBAAGrB,KAAA,CAAAa,aAAA,CAACD,OAAO,CAACS,WAAW,MAAE,CAAC,GAAG,IAAI,eACtDrB,KAAA,CAAAa,aAAA,CAACX,iCAAiC;IAACK,aAAa,EAAEA;EAAc,CAAE,CAC5C,CACV,CAAC;AAErB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","CollectionPage","AutoPatternsCollectionPageContent","useCollectionPageActions","AutoPatternsCollectionPage","_ref","configuration","title","subtitle","actions","collectionPageActions","createElement","height","dataHook","Header","primaryAction","primaryActions","secondaryActions","Content"],"sources":["../../../../src/components/AutoPatternsCollectionPage/AutoPatternsCollectionPage.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionPage } from '@wix/patterns/page';\nimport { AutoPatternsCollectionPageContent } from '../AutoPatternsCollectionPageContent';\nimport { CollectionPageConfig } from '../../types/CollectionPageConfig';\nimport { useCollectionPageActions } from '../../hooks/useCollectionPageActions';\n\nexport interface AutoPatternsCollectionPageProps {\n  configuration: CollectionPageConfig;\n}\n\nexport const AutoPatternsCollectionPage: React.FC<\n  AutoPatternsCollectionPageProps\n> = ({ configuration }) => {\n  const { title, subtitle } = configuration;\n\n  const actions = useCollectionPageActions({\n    collectionPageActions: configuration.actions,\n  });\n\n  return (\n    <CollectionPage height=\"100vh\" dataHook=\"auto-patterns-page\">\n      <CollectionPage.Header\n        title={title}\n        subtitle={subtitle}\n        primaryAction={actions.primaryActions}\n        secondaryActions={actions.secondaryActions}\n      />\n      <CollectionPage.Content>\n        <AutoPatternsCollectionPageContent configuration={configuration} />\n      </CollectionPage.Content>\n    </CollectionPage>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,iCAAiC,QAAQ,sCAAsC;AAExF,SAASC,wBAAwB,QAAQ,sCAAsC;AAM/E,OAAO,MAAMC,0BAEZ,GAAGC,IAAA,IAAuB;EAAA,IAAtB;IAAEC;EAAc,CAAC,GAAAD,IAAA;EACpB,MAAM;IAAEE,KAAK;IAAEC;EAAS,CAAC,GAAGF,aAAa;EAEzC,MAAMG,OAAO,GAAGN,wBAAwB,CAAC;IACvCO,qBAAqB,EAAEJ,aAAa,CAACG;EACvC,CAAC,CAAC;EAEF,oBACET,KAAA,CAAAW,aAAA,CAACV,cAAc;IAACW,MAAM,EAAC,OAAO;IAACC,QAAQ,EAAC;EAAoB,gBAC1Db,KAAA,CAAAW,aAAA,CAACV,cAAc,CAACa,MAAM;IACpBP,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA,QAAS;IACnBO,aAAa,EAAEN,OAAO,CAACO,cAAe;IACtCC,gBAAgB,EAAER,OAAO,CAACQ;EAAiB,CAC5C,CAAC,eACFjB,KAAA,CAAAW,aAAA,CAACV,cAAc,CAACiB,OAAO,qBACrBlB,KAAA,CAAAW,aAAA,CAACT,iCAAiC;IAACI,aAAa,EAAEA;EAAc,CAAE,CAC5C,CACV,CAAC;AAErB,CAAC","ignoreList":[]}

package/dist/esm/components/AutoPatternsCollectionPageContent/AutoPatternsCollectionPageContent.js

@@ -1,9 +1,6 @@
 import React from 'react';
-import { AutoPatternsTable } from '../AutoPatternsTable';
-import { AutoPatternsGrid } from '../AutoPatternsGrid';
-import { AutoPatternsTableGridSwitch } from '../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch';
-import { SchemaProvider } from '../../providers';
-import { SkeletonCollection } from './SkeletonCollection';
+import { usePatternsWizardOverridesContext } from '../../providers';
+import { AutoPatternsCollectionComponent } from '../AutoPatternsCollectionComponent/AutoPatternsCollectionComponent';
 export const AutoPatternsCollectionPageContent = _ref => {
   let {
     configuration
@@ -11,53 +8,25 @@ export const AutoPatternsCollectionPageContent = _ref => {
   const {
     components
   } = configuration;
+  const overrides = usePatternsWizardOverridesContext();
   return /*#__PURE__*/React.createElement(React.Fragment, null, components.map((component, index) => {
-    var _layout$find, _layout$find2;
-    const {
-      layout,
-      ...sharedConfig
-    } = component;
-    if (!(layout != null && layout.length)) {
-      return null;
-    }
-    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';
-    let componentToRender = null;
-    if (tableConfig && gridConfig) {
-      const config = {
-        ...sharedConfig,
-        ...tableConfig,
-        ...gridConfig
-      };
-      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTableGridSwitch, {
-        configuration: config
-      });
-    } else if (tableConfig) {
-      const config = {
-        ...sharedConfig,
-        ...tableConfig
-      };
-      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsTable, {
-        configuration: config
+    if (component.type === 'collection') {
+      return /*#__PURE__*/React.createElement(AutoPatternsCollectionComponent, {
+        key: `collection-${component.collection.collectionId}-${index}`,
+        component: component,
+        index: index
       });
-    } else if (gridConfig) {
-      componentType = 'Grid';
-      const config = {
-        ...sharedConfig,
-        ...gridConfig
-      };
-      componentToRender = /*#__PURE__*/React.createElement(AutoPatternsGrid, {
-        configuration: config
+    } else if (component.type === 'custom') {
+      var _overrides$slots;
+      const CustomComponent = overrides == null || (_overrides$slots = overrides.slots) == null ? void 0 : _overrides$slots[component.id];
+      if (!CustomComponent) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(CustomComponent, {
+        key: `custom-${component.id}-${index}`
       });
     }
-    return componentToRender ? /*#__PURE__*/React.createElement(SchemaProvider, {
-      key: `${sharedConfig.collection.collectionId}-${index}`,
-      collection: sharedConfig.collection,
-      skeleton: /*#__PURE__*/React.createElement(SkeletonCollection, {
-        componentType: componentType
-      })
-    }, componentToRender) : null;
+    return null;
   }).filter(Boolean));
 };
 //# sourceMappingURL=AutoPatternsCollectionPageContent.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","AutoPatternsTable","AutoPatternsGrid","AutoPatternsTableGridSwitch","SchemaProvider","SkeletonCollection","AutoPatternsCollectionPageContent","_ref","configuration","components","createElement","Fragment","map","component","index","_layout$find","_layout$find2","layout","sharedConfig","length","tableConfig","find","item","type","table","gridConfig","grid","componentType","componentToRender","config","key","collection","collectionId","skeleton","filter","Boolean"],"sources":["../../../../src/components/AutoPatternsCollectionPageContent/AutoPatternsCollectionPageContent.tsx"],"sourcesContent":["import React from 'react';\nimport { AutoPatternsTable } from '../AutoPatternsTable';\nimport { CollectionPageConfig } from '../../types';\nimport { AutoPatternsGrid } from '../AutoPatternsGrid';\nimport { AutoPatternsTableGridSwitch } from '../AutoPatternsTableGridSwitch/AutoPatternsTableGridSwitch';\nimport { SchemaProvider } from '../../providers';\nimport { SkeletonCollection } from './SkeletonCollection';\n\nexport interface AutoPatternsCollectionPageContentProps {\n  configuration: CollectionPageConfig;\n}\n\nexport const AutoPatternsCollectionPageContent = ({\n  configuration,\n}: AutoPatternsCollectionPageContentProps) => {\n  const { components } = configuration;\n  return (\n    <>\n      {components\n        .map((component, index) => {\n          const { layout, ...sharedConfig } = component;\n\n          if (!layout?.length) {\n            return null;\n          }\n\n          const tableConfig = layout.find(\n            (item) => item.type === 'Table',\n          )?.table;\n          const gridConfig = layout.find((item) => item.type === 'Grid')?.grid;\n          let componentType: 'Table' | 'Grid' = 'Table';\n\n          let componentToRender = null;\n\n          if (tableConfig && gridConfig) {\n            const config = {\n              ...sharedConfig,\n              ...tableConfig,\n              ...gridConfig,\n            };\n            componentToRender = (\n              <AutoPatternsTableGridSwitch configuration={config} />\n            );\n          } else if (tableConfig) {\n            const config = { ...sharedConfig, ...tableConfig };\n            componentToRender = <AutoPatternsTable configuration={config} />;\n          } else if (gridConfig) {\n            componentType = 'Grid';\n            const config = { ...sharedConfig, ...gridConfig };\n            componentToRender = <AutoPatternsGrid configuration={config} />;\n          }\n\n          return 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        .filter(Boolean)}\n    </>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,iBAAiB,QAAQ,sBAAsB;AAExD,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,2BAA2B,QAAQ,4DAA4D;AACxG,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,kBAAkB,QAAQ,sBAAsB;AAMzD,OAAO,MAAMC,iCAAiC,GAAGC,IAAA,IAEH;EAAA,IAFI;IAChDC;EACsC,CAAC,GAAAD,IAAA;EACvC,MAAM;IAAEE;EAAW,CAAC,GAAGD,aAAa;EACpC,oBACER,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAW,QAAA,QACGF,UAAU,CACRG,GAAG,CAAC,CAACC,SAAS,EAAEC,KAAK,KAAK;IAAA,IAAAC,YAAA,EAAAC,aAAA;IACzB,MAAM;MAAEC,MAAM;MAAE,GAAGC;IAAa,CAAC,GAAGL,SAAS;IAE7C,IAAI,EAACI,MAAM,YAANA,MAAM,CAAEE,MAAM,GAAE;MACnB,OAAO,IAAI;IACb;IAEA,MAAMC,WAAW,IAAAL,YAAA,GAAGE,MAAM,CAACI,IAAI,CAC5BC,IAAI,IAAKA,IAAI,CAACC,IAAI,KAAK,OAC1B,CAAC,qBAFmBR,YAAA,CAEjBS,KAAK;IACR,MAAMC,UAAU,IAAAT,aAAA,GAAGC,MAAM,CAACI,IAAI,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,KAAK,MAAM,CAAC,qBAA3CP,aAAA,CAA6CU,IAAI;IACpE,IAAIC,aAA+B,GAAG,OAAO;IAE7C,IAAIC,iBAAiB,GAAG,IAAI;IAE5B,IAAIR,WAAW,IAAIK,UAAU,EAAE;MAC7B,MAAMI,MAAM,GAAG;QACb,GAAGX,YAAY;QACf,GAAGE,WAAW;QACd,GAAGK;MACL,CAAC;MACDG,iBAAiB,gBACf5B,KAAA,CAAAU,aAAA,CAACP,2BAA2B;QAACK,aAAa,EAAEqB;MAAO,CAAE,CACtD;IACH,CAAC,MAAM,IAAIT,WAAW,EAAE;MACtB,MAAMS,MAAM,GAAG;QAAE,GAAGX,YAAY;QAAE,GAAGE;MAAY,CAAC;MAClDQ,iBAAiB,gBAAG5B,KAAA,CAAAU,aAAA,CAACT,iBAAiB;QAACO,aAAa,EAAEqB;MAAO,CAAE,CAAC;IAClE,CAAC,MAAM,IAAIJ,UAAU,EAAE;MACrBE,aAAa,GAAG,MAAM;MACtB,MAAME,MAAM,GAAG;QAAE,GAAGX,YAAY;QAAE,GAAGO;MAAW,CAAC;MACjDG,iBAAiB,gBAAG5B,KAAA,CAAAU,aAAA,CAACR,gBAAgB;QAACM,aAAa,EAAEqB;MAAO,CAAE,CAAC;IACjE;IAEA,OAAOD,iBAAiB,gBACtB5B,KAAA,CAAAU,aAAA,CAACN,cAAc;MACb0B,GAAG,EAAE,GAAGZ,YAAY,CAACa,UAAU,CAACC,YAAY,IAAIlB,KAAK,EAAG;MACxDiB,UAAU,EAAEb,YAAY,CAACa,UAAW;MACpCE,QAAQ,eAAEjC,KAAA,CAAAU,aAAA,CAACL,kBAAkB;QAACsB,aAAa,EAAEA;MAAc,CAAE;IAAE,GAE9DC,iBACa,CAAC,GACf,IAAI;EACV,CAAC,CAAC,CACDM,MAAM,CAACC,OAAO,CACjB,CAAC;AAEP,CAAC","ignoreList":[]}
+{"version":3,"names":["React","usePatternsWizardOverridesContext","AutoPatternsCollectionComponent","AutoPatternsCollectionPageContent","_ref","configuration","components","overrides","createElement","Fragment","map","component","index","type","key","collection","collectionId","_overrides$slots","CustomComponent","slots","id","filter","Boolean"],"sources":["../../../../src/components/AutoPatternsCollectionPageContent/AutoPatternsCollectionPageContent.tsx"],"sourcesContent":["import React from 'react';\nimport { CollectionPageConfig } from '../../types';\nimport { usePatternsWizardOverridesContext } from '../../providers';\nimport { AutoPatternsCollectionComponent } from '../AutoPatternsCollectionComponent/AutoPatternsCollectionComponent';\n\nexport interface AutoPatternsCollectionPageContentProps {\n  configuration: CollectionPageConfig;\n}\n\nexport const AutoPatternsCollectionPageContent = ({\n  configuration,\n}: AutoPatternsCollectionPageContentProps) => {\n  const { components } = configuration;\n  const overrides = usePatternsWizardOverridesContext();\n\n  return (\n    <>\n      {components\n        .map((component, index) => {\n          if (component.type === 'collection') {\n            return (\n              <AutoPatternsCollectionComponent\n                key={`collection-${component.collection.collectionId}-${index}`}\n                component={component}\n                index={index}\n              />\n            );\n          } else if (component.type === 'custom') {\n            const CustomComponent = overrides?.slots?.[component.id];\n\n            if (!CustomComponent) {\n              return null;\n            }\n\n            return <CustomComponent key={`custom-${component.id}-${index}`} />;\n          }\n\n          return null;\n        })\n        .filter(Boolean)}\n    </>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,iCAAiC,QAAQ,iBAAiB;AACnE,SAASC,+BAA+B,QAAQ,oEAAoE;AAMpH,OAAO,MAAMC,iCAAiC,GAAGC,IAAA,IAEH;EAAA,IAFI;IAChDC;EACsC,CAAC,GAAAD,IAAA;EACvC,MAAM;IAAEE;EAAW,CAAC,GAAGD,aAAa;EACpC,MAAME,SAAS,GAAGN,iCAAiC,CAAC,CAAC;EAErD,oBACED,KAAA,CAAAQ,aAAA,CAAAR,KAAA,CAAAS,QAAA,QACGH,UAAU,CACRI,GAAG,CAAC,CAACC,SAAS,EAAEC,KAAK,KAAK;IACzB,IAAID,SAAS,CAACE,IAAI,KAAK,YAAY,EAAE;MACnC,oBACEb,KAAA,CAAAQ,aAAA,CAACN,+BAA+B;QAC9BY,GAAG,EAAE,cAAcH,SAAS,CAACI,UAAU,CAACC,YAAY,IAAIJ,KAAK,EAAG;QAChED,SAAS,EAAEA,SAAU;QACrBC,KAAK,EAAEA;MAAM,CACd,CAAC;IAEN,CAAC,MAAM,IAAID,SAAS,CAACE,IAAI,KAAK,QAAQ,EAAE;MAAA,IAAAI,gBAAA;MACtC,MAAMC,eAAe,GAAGX,SAAS,aAAAU,gBAAA,GAATV,SAAS,CAAEY,KAAK,qBAAhBF,gBAAA,CAAmBN,SAAS,CAACS,EAAE,CAAC;MAExD,IAAI,CAACF,eAAe,EAAE;QACpB,OAAO,IAAI;MACb;MAEA,oBAAOlB,KAAA,CAAAQ,aAAA,CAACU,eAAe;QAACJ,GAAG,EAAE,UAAUH,SAAS,CAACS,EAAE,IAAIR,KAAK;MAAG,CAAE,CAAC;IACpE;IAEA,OAAO,IAAI;EACb,CAAC,CAAC,CACDS,MAAM,CAACC,OAAO,CACjB,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/esm/components/AutoPatternsEntityPage/Fields/ImageInput.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormField, ImageViewer } from '@wix/design-system';
-import { useEntityPageContext, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useEntityPageContext, useIsMobile, useSelector, useWixPatternsContainer } from '@wix/patterns';
 import { useController } from '@wix/patterns/form';
 import { getImageUrl } from '../../../utils/media/getImageUrl';
 import { dashboard } from '@wix/dashboard';
@@ -15,6 +15,7 @@ export const ImageInput = props => {
     ...container
   } = useWixPatternsContainer();
   useSelector(() => container.initTask.status);
+  const isMobile = useIsMobile();
   const pageState = useEntityPageContext();
   async function openMedia() {
     try {
@@ -53,8 +54,8 @@ export const ImageInput = props => {
   }, /*#__PURE__*/React.createElement(ImageViewer, {
     imageUrl: imageUrl,
     dataHook: `image-${field.id}`,
-    onAddImage: () => openMedia(),
-    onUpdateImage: () => openMedia(),
+    onAddImage: isMobile ? undefined : () => openMedia(),
+    onUpdateImage: isMobile ? undefined : () => openMedia(),
     updateImageInfo: t('cairo.replace-image.tooltip'),
     removeImageInfo: t('cairo.remove-image.tooltip'),
     addImageInfo: t('cairo.add-image.tooltip'),

package/dist/esm/components/AutoPatternsEntityPage/Fields/ImageInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FormField","ImageViewer","useEntityPageContext","useSelector","useWixPatternsContainer","useController","getImageUrl","dashboard","ImageInput","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","t","container","initTask","status","pageState","openMedia","_chosenMediaItems$ite","chosenMediaItems","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","createElement","label","displayName","fieldState","statusMessage","message","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","addImageInfo","height","width","fit","onRemoveImage"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/ImageInput.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, ImageViewer } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport {\n  useEntityPageContext,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { getImageUrl } from '../../../utils/media/getImageUrl';\nimport { dashboard } from '@wix/dashboard';\n\nexport interface ImageInputProps extends BaseInputProps<string> {}\n\nexport const ImageInput = (props: ImageInputProps) => {\n  const { field, dataHook } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const pageState = useEntityPageContext();\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'IMAGE',\n      });\n\n      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;\n\n      controller.field.onChange(newImage);\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: pageState.form.control,\n    defaultValue: (pageState.entity as any)?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const imageUrl =\n    controller.field.value && getImageUrl(controller.field.value);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <ImageViewer\n        imageUrl={imageUrl}\n        dataHook={`image-${field.id}`}\n        onAddImage={() => openMedia()}\n        onUpdateImage={() => openMedia()}\n        updateImageInfo={t('cairo.replace-image.tooltip')}\n        removeImageInfo={t('cairo.remove-image.tooltip')}\n        addImageInfo={t('cairo.add-image.tooltip')}\n        height=\"120px\"\n        width=\"25%\"\n        fit=\"cover\"\n        onRemoveImage={() => controller.field.onChange(null)}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","FormField","ImageViewer","useEntityPageContext","useIsMobile","useSelector","useWixPatternsContainer","useController","getImageUrl","dashboard","ImageInput","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","t","container","initTask","status","isMobile","pageState","openMedia","_chosenMediaItems$ite","chosenMediaItems","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","createElement","label","displayName","fieldState","statusMessage","message","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","addImageInfo","height","width","fit","onRemoveImage"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/ImageInput.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, ImageViewer } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport {\n  useEntityPageContext,\n  useIsMobile,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { getImageUrl } from '../../../utils/media/getImageUrl';\nimport { dashboard } from '@wix/dashboard';\n\nexport interface ImageInputProps extends BaseInputProps<string> {}\n\nexport const ImageInput = (props: ImageInputProps) => {\n  const { field, dataHook } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const isMobile = useIsMobile();\n  const pageState = useEntityPageContext();\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'IMAGE',\n      });\n\n      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;\n\n      controller.field.onChange(newImage);\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: pageState.form.control,\n    defaultValue: (pageState.entity as any)?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const imageUrl =\n    controller.field.value && getImageUrl(controller.field.value);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <ImageViewer\n        imageUrl={imageUrl}\n        dataHook={`image-${field.id}`}\n        onAddImage={isMobile ? undefined : () => openMedia()}\n        onUpdateImage={isMobile ? undefined : () => openMedia()}\n        updateImageInfo={t('cairo.replace-image.tooltip')}\n        removeImageInfo={t('cairo.remove-image.tooltip')}\n        addImageInfo={t('cairo.add-image.tooltip')}\n        height=\"120px\"\n        width=\"25%\"\n        fit=\"cover\"\n        onRemoveImage={() => controller.field.onChange(null)}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -18,6 +18,7 @@ export const AutoPatternsTable = _ref => {
     onRowClick,
     stickyColumns,
     stickySelectionColumn,
+    showTitleBar,
     sections
   } = useTableFeatures(configuration);
   return /*#__PURE__*/React.createElement(Table, {
@@ -35,6 +36,7 @@ export const AutoPatternsTable = _ref => {
     horizontalScroll: true,
     stickyColumns: stickyColumns,
     stickySelectionColumn: stickySelectionColumn,
+    showTitleBar: showTitleBar,
     sections: sections
   });
 };

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","actionCell","bulkActionToolbar","onRowClick","stickyColumns","stickySelectionColumn","sections","createElement","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    actionCell,\n    bulkActionToolbar,\n    onRowClick,\n    stickyColumns,\n    stickySelectionColumn,\n    sections,\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      customColumns={customColumns}\n      actionCell={actionCell}\n      filters={filters}\n      emptyState={emptyState}\n      bulkActionToolbar={bulkActionToolbar}\n      onRowClick={onRowClick}\n      horizontalScroll\n      stickyColumns={stickyColumns}\n      stickySelectionColumn={stickySelectionColumn}\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,UAAU;IACVC,iBAAiB;IACjBC,UAAU;IACVC,aAAa;IACbC,qBAAqB;IACrBC;EACF,CAAC,GAAGhB,gBAAgB,CAACG,aAAa,CAAC;EAEnC,oBACEL,KAAA,CAAAmB,aAAA,CAAClB,KAAK;IACJmB,QAAQ,EAAC,qBAAqB;IAC9BX,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA,KAAM;IACbJ,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BK,UAAU,EAAEA,UAAW;IACvBD,OAAO,EAAEA,OAAQ;IACjBD,UAAU,EAAEA,UAAW;IACvBG,iBAAiB,EAAEA,iBAAkB;IACrCC,UAAU,EAAEA,UAAW;IACvBM,gBAAgB;IAChBL,aAAa,EAAEA,aAAc;IAC7BC,qBAAqB,EAAEA,qBAAsB;IAC7CC,QAAQ,EAAEA;EAAS,CACpB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Table","useTableFeatures","AutoPatternsTable","_ref","configuration","state","columns","customColumns","search","title","emptyState","filters","actionCell","bulkActionToolbar","onRowClick","stickyColumns","stickySelectionColumn","showTitleBar","sections","createElement","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    actionCell,\n    bulkActionToolbar,\n    onRowClick,\n    stickyColumns,\n    stickySelectionColumn,\n    showTitleBar,\n    sections,\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      customColumns={customColumns}\n      actionCell={actionCell}\n      filters={filters}\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,UAAU;IACVC,iBAAiB;IACjBC,UAAU;IACVC,aAAa;IACbC,qBAAqB;IACrBC,YAAY;IACZC;EACF,CAAC,GAAGjB,gBAAgB,CAACG,aAAa,CAAC;EAEnC,oBACEL,KAAA,CAAAoB,aAAA,CAACnB,KAAK;IACJoB,QAAQ,EAAC,qBAAqB;IAC9BZ,MAAM,EAAEA,MAAO;IACfC,KAAK,EAAEA,KAAM;IACbJ,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBC,aAAa,EAAEA,aAAc;IAC7BK,UAAU,EAAEA,UAAW;IACvBD,OAAO,EAAEA,OAAQ;IACjBD,UAAU,EAAEA,UAAW;IACvBG,iBAAiB,EAAEA,iBAAkB;IACrCC,UAAU,EAAEA,UAAW;IACvBO,gBAAgB;IAChBN,aAAa,EAAEA,aAAc;IAC7BC,qBAAqB,EAAEA,qBAAsB;IAC7CC,YAAY,EAAEA,YAAa;IAC3BC,QAAQ,EAAEA;EAAS,CACpB,CAAC;AAEN,CAAC","ignoreList":[]}