@wix/patterns 1.264.0 → 1.265.0

package/src/essentials/WixPatternsEssentialsProvider.tsx

@@ -1,22 +1,19 @@
-import React, { ReactNode, useState } from 'react';
-import { ContextType, WixPatternsEssentialsOverrides } from '@wix/bex-core';
+import React, { useState } from 'react';
+import { WixPatternsEssentialsOverrides } from '@wix/bex-core';
+import { CairoProviderBaseProps } from '@wix/bex-core/react';
 import { useEssentials } from '@wix/fe-essentials/react';
 import { CairoProvider } from '../providers';
 import { buildWixPatternsEssentials } from './buildWixPatternsEssentials';
 
-export interface WixPatternsEssentialsProviderProps {
+export interface WixPatternsEssentialsProviderProps
+  extends CairoProviderBaseProps {
   value?: Partial<WixPatternsEssentialsOverrides>;
-  children?: ReactNode;
-  localCache?: boolean;
-  contextType?: ContextType;
 }
 
-export function WixPatternsEssentialsProvider({
-  value,
-  children,
-  localCache,
-  contextType,
-}: WixPatternsEssentialsProviderProps) {
+export function WixPatternsEssentialsProvider(
+  props: WixPatternsEssentialsProviderProps,
+) {
+  const { value, children } = props;
   const essentials = useEssentials();
 
   const [wixPatternsEssentials] = useState(() =>
@@ -26,11 +23,7 @@ export function WixPatternsEssentialsProvider({
   );
 
   return (
-    <CairoProvider
-      value={wixPatternsEssentials}
-      localCache={localCache}
-      contextType={contextType}
-    >
+    <CairoProvider {...props} value={wixPatternsEssentials}>
       {children}
     </CairoProvider>
   );

package/src/giza/WixPatternsGizaProvider.tsx

@@ -1,21 +1,15 @@
 import React, { ReactNode, useState } from 'react';
-import {
-  ContextType,
-  WixPatternsEssentialsOverrides,
-  showToastCompat,
-} from '@wix/bex-core';
+import { showToastCompat, WixPatternsEssentialsOverrides } from '@wix/bex-core';
+import { CairoProviderBaseProps, usePageLocation } from '@wix/bex-core/react';
 import { useEssentials } from '@wix/yoshi-flow-bm/fe-essentials-giza';
 import { useComponentLoaded, usePlatformApi } from '@wix/yoshi-flow-bm';
 import { CairoProvider } from '../providers';
 import { buildWixPatternsEssentials } from './buildWixPatternsEssentials';
 import { minimalRequiredRuntimeCheck } from '../utils/minimalRequiredRuntimeCheck';
-import { usePageLocation } from '@wix/bex-core/react';
 
-export interface WixPatternsGizaProviderProps {
+export interface WixPatternsGizaProviderProps extends CairoProviderBaseProps {
   children?: ReactNode;
   value?: Partial<WixPatternsEssentialsOverrides>;
-  localCache?: boolean;
-  contextType?: ContextType;
 }
 
 export function WixPatternsGizaProvider(props: WixPatternsGizaProviderProps) {
@@ -29,7 +23,6 @@ export function WixPatternsGizaProvider(props: WixPatternsGizaProviderProps) {
   const {
     children,
     value: wixPatternsEssentialsOverridesProp,
-    localCache,
     contextType = 'ACCOUNT',
   } = props;
   const { showToast, navigateTo, onBeforeUnload, getHostContainer } =
@@ -65,8 +58,8 @@ export function WixPatternsGizaProvider(props: WixPatternsGizaProviderProps) {
 
   return (
     <CairoProvider
+      {...props}
       value={wixPatternsEssentials}
-      localCache={localCache}
       contextType={contextType}
     >
       {children}

package/src/providers/CairoProvider.tsx

@@ -1,6 +1,6 @@
 import {
-  CairoProvider as CairoProviderBase,
-  CairoProviderProps as CairoProviderBaseProps,
+  CairoProvider as CairoProviderCore,
+  CairoProviderProps as CairoProviderCoreProps,
 } from '@wix/bex-core/react';
 import { configure } from '@wix/bex-utils/react-dom';
 import React, { useState } from 'react';
@@ -22,14 +22,11 @@ if (process.env.NODE_ENV !== 'production') {
   });
 }
 
-export interface CairoProviderProps extends CairoProviderBaseProps {}
+export interface CairoProviderProps extends CairoProviderCoreProps {}
+
+export function CairoProvider(props: CairoProviderProps) {
+  const { value: valueProp, children, layoutType, ...rest } = props;
 
-export function CairoProvider({
-  value: valueProp,
-  children,
-  layoutType,
-  ...rest
-}: CairoProviderProps) {
   const [value] = useState(() => ({
     ...valueProp,
     environment: {
@@ -48,8 +45,8 @@ export function CairoProvider({
     );
   }
   return (
-    <CairoProviderBase {...rest} value={value} layoutType={layoutType}>
+    <CairoProviderCore {...rest} value={value} layoutType={layoutType}>
       {child}
-    </CairoProviderBase>
+    </CairoProviderCore>
   );
 }

package/src/providers/WixPatternsBaseProvider.tsx

@@ -1,10 +1,11 @@
 import React, { ReactNode, useState } from 'react';
 import { CairoProvider } from './CairoProvider';
 import { experimentsFallbackApi, WixPatternsEssentials } from '@wix/bex-core';
+import { CairoProviderBaseProps } from '@wix/bex-core/react';
 import { Trans } from '@wix/bex-utils/@wix/wix-i18n-config';
 import { WixPatternsMinimalEssentials } from './WixPatternsMinimalEssentials';
 
-export interface WixPatternsBaseProviderProps {
+export interface WixPatternsBaseProviderProps extends CairoProviderBaseProps {
   /**
    * Minimal essentials that are required for wix-patterns to work (i.e i18n,bi,experiments)
    */

package/src/state/CollectionPage/CollectionPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "CollectionPageHeader191701069";
+var _namespace_ = "CollectionPageHeader3779852258";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CollectionPageHeader191701069__root"};
+export var classes = {"root":"CollectionPageHeader3779852258__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/useCollectionPageContent.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
-import { Page, SidePanel } from '@wix/design-system';
+import { Box, Page } from '@wix/design-system';
 import { CollectionPageContentElement } from '../../components/CollectionPageContent';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 export function useCollectionPageContent(child: CollectionPageContentElement) {
   const { isPanelLayout } = useWixPatternsContainer();
   if (isPanelLayout) {
-    return <SidePanel.Content {...child.props} noPadding stretchVertically />;
+    return (
+      <Box
+        {...child.props}
+        direction="vertical"
+        minHeight={0}
+        height="100%"
+        flex={1}
+      />
+    );
   }
   return <Page.Content {...child.props} />;
 }

package/src/state/FormPage/FormPageHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "FormPageHeader3883917094";
+var _namespace_ = "FormPageHeader2552518940";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"FormPageHeader3883917094__root"};
+export var classes = {"root":"FormPageHeader2552518940__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer2055806073__root.CardContainer2055806073--mobile{border-radius:0}.Collapse2575569709__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse2575569709__exit{height:0}.CollectionPage83339576__root.CollectionPage83339576--mobile{--wds-page-header-padding-horizontal:0}.CollectionTable1873965278__root.CollectionTable1873965278--mobile td:first-child{padding-left:18px}.CollectionTable1873965278__root.CollectionTable1873965278--mobile td:last-child{padding-right:18px}.CollectionToolbar363269901__left{min-width:0}.CollectionToolbar363269901__root.CollectionToolbar363269901--views .CollectionToolbar363269901__left{flex-shrink:1;flex-grow:0}.CollectionToolbar363269901__left.CollectionToolbar363269901--expandable{flex:auto}.CollectionToolbar363269901__root .CollectionToolbar363269901__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar363269901__root.CollectionToolbar363269901--views .CollectionToolbar363269901__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar363269901__root .CollectionToolbar363269901__right.CollectionToolbar363269901__fullWidth{margin-inline-start:0!important}.CollectionToolbar363269901__root.CollectionToolbar363269901--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter3001369942__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter3001369942__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly789628355__root.AutoCompleteReadonly789628355--disableEditing{cursor:pointer}.AutoCompleteReadonly789628355__root.AutoCompleteReadonly789628355--disableEditing input{cursor:pointer}.ViewsDropdown1461627814__root{width:200px}.DragHandle1355224633__root{display:flex;align-items:center}.DragHandle1355224633__root:not(.DragHandle1355224633--disabled){cursor:grab;color:#a8caff}.DragHandle1355224633__root.DragHandle1355224633--disabled{color:#acafc4}.DragHandle1355224633__root:focus-visible:not(.DragHandle1355224633--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1355224633__root.DragHandle1355224633--disabled{pointer-events:none}.DragHandle1355224633__root.DragHandle1355224633--dragging:not(.DragHandle1355224633--disabled){cursor:grabbing}.EntityPagePlain3842564122__root.EntityPagePlain3842564122--mobile{--wds-page-header-padding-horizontal:0}.Fade1408656930__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade1408656930__root.Fade1408656930--exit{opacity:0}.Heading1971196384__root{visibility:visible}.Heading1971196384__root.Heading1971196384--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow1986854382__root.InputOverflow1986854382--selected:not(.InputOverflow1986854382--focused) input::placeholder{color:#000624}@keyframes LoadingRow2368040009__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow2368040009__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow2368040009__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText4145661589__root{opacity:1}.MaxHeightText4145661589__root.MaxHeightText4145661589--height24{line-height:24px}.MaxLines2629824244__root{overflow:hidden}.MaxLines2629824244__root.MaxLines2629824244--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar132225335__root{min-width:0}.NestedTablePlaceholderStatesRow3476621018__root td{padding:0!important;width:100%}.NestedTableRow1862023425__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1862023425__root:hover{background-color:#e7f0ff!important}.NestedTableRow1862023425__root.NestedTableRow1862023425--expandable{cursor:pointer}.NestedTableRow1862023425__placeholder td{padding:0!important;width:100%}.NestedTableRow1862023425__root:hover td:first-of-type::before,.NestedTableRow1862023425__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect1456717427__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow2496377944__root.NestedTableDragAndDropRow2496377944--draggingInto td{background-color:#e7f0ff!important}.PickerContent3767537066__root{display:flex}.PickerContentAdditionalStep919761103__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep919761103__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem2671529059__root{box-sizing:border-box}.ScrollableContent438644261__root.ScrollableContent438644261--overflowY{overflow-y:auto}.ScrollableContent438644261__root.ScrollableContent438644261--overflowX{overflow-x:auto}.ScrollableContent438644261__root.ScrollableContent438644261--smooth{scroll-behavior:smooth}.SkeletonCard1949124427__headerLoading{display:block!important}.SlidingModal2512982585__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2512982585__root.SlidingModal2512982585---appendTo-6-parent{transition:transform 0s ease 0s;position:absolute}.SlidingModal2512982585__root:not(.SlidingModal2512982585--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter4153273067__root .TabsFilter4153273067__title{color:inherit!important}.ManageTagsModal3205379865__root{display:flex}.ToolbarItem2832233981__root{min-width:0}.ToolbarItemBox198729933__root{min-width:0}.ToolbarItemBox198729933__root.ToolbarItemBox198729933--removeStartPadding{margin-left:-24px}.ToolbarItemBox198729933__root.ToolbarItemBox198729933--expandable{flex:1 0}.common351681796__column{display:flex;flex-direction:column}.common351681796__fullHeight{height:100%;min-height:0}.CollectionPageHeader191701069__root.CollectionPageHeader191701069--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader191701069__root.CollectionPageHeader191701069--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader3883917094__root.FormPageHeader3883917094--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader3883917094__root.FormPageHeader3883917094--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.CardContainer1162892424__root.CardContainer1162892424--mobile{border-radius:0}.Collapse1354406179__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse1354406179__exit{height:0}.CollectionPage4089491718__root.CollectionPage4089491718--mobile{--wds-page-header-padding-horizontal:0}.CollectionPage4089491718__root.CollectionPage4089491718--panel{overflow:hidden;position:relative}.CollectionTable3362170684__root.CollectionTable3362170684--mobile td:first-child{padding-left:18px}.CollectionTable3362170684__root.CollectionTable3362170684--mobile td:last-child{padding-right:18px}.CollectionToolbar1939736022__left{min-width:0}.CollectionToolbar1939736022__root.CollectionToolbar1939736022--views .CollectionToolbar1939736022__left{flex-shrink:1;flex-grow:0}.CollectionToolbar1939736022__left.CollectionToolbar1939736022--expandable{flex:auto}.CollectionToolbar1939736022__root .CollectionToolbar1939736022__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1939736022__root.CollectionToolbar1939736022--views .CollectionToolbar1939736022__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1939736022__root .CollectionToolbar1939736022__right.CollectionToolbar1939736022__fullWidth{margin-inline-start:0!important}.CollectionToolbar1939736022__root.CollectionToolbar1939736022--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1499759097__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1499759097__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly3562650700__root.AutoCompleteReadonly3562650700--disableEditing{cursor:pointer}.AutoCompleteReadonly3562650700__root.AutoCompleteReadonly3562650700--disableEditing input{cursor:pointer}.ViewsDropdown1853269276__root{width:200px}.DragHandle173041026__root{display:flex;align-items:center}.DragHandle173041026__root:not(.DragHandle173041026--disabled){cursor:grab;color:#a8caff}.DragHandle173041026__root.DragHandle173041026--disabled{color:#acafc4}.DragHandle173041026__root:focus-visible:not(.DragHandle173041026--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle173041026__root.DragHandle173041026--disabled{pointer-events:none}.DragHandle173041026__root.DragHandle173041026--dragging:not(.DragHandle173041026--disabled){cursor:grabbing}.EntityPagePlain3125617155__root.EntityPagePlain3125617155--mobile{--wds-page-header-padding-horizontal:0}.Fade4066996397__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade4066996397__root.Fade4066996397--exit{opacity:0}.Heading3152379401__root{visibility:visible}.Heading3152379401__root.Heading3152379401--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow2116414656__root.InputOverflow2116414656--selected:not(.InputOverflow2116414656--focused) input::placeholder{color:#000624}@keyframes LoadingRow3617053642__gradientSwoosh{0%{background-position:50% 50%;background-size:150% 125%}15%{background-position:75% 40%;background-size:130% 115%}30%{background-position:50% 50%;background-size:120% 135%}60%{background-position:30% 50%;background-size:120% 135%}80%{background-position:10% 30%;background-size:130% 155%}to{background-position:40% 45%;background-size:125% 135%}}.LoadingRow3617053642__root{background-image:linear-gradient(60deg,rgba(255,255,255,.15)0,rgba(255,255,255,.15) 50%,rgba(95,242,174,.15) 100%),linear-gradient(284.81deg,#fff 67.18%,#91bbff 158.87%),linear-gradient(29deg,rgba(145,187,255,.6)0,#fff 40%,rgba(95,242,174,.6) 100%);height:100%;background-size:150% 125%;background-repeat:no-repeat;animation:LoadingRow3617053642__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText4075989554__root{opacity:1}.MaxHeightText4075989554__root.MaxHeightText4075989554--height24{line-height:24px}.MaxLines483284732__root{overflow:hidden}.MaxLines483284732__root.MaxLines483284732--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar206332739__root{min-width:0}.NestedTablePlaceholderStatesRow4070074949__root td{padding:0!important;width:100%}.NestedTableRow1332964938__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow1332964938__root:hover{background-color:#e7f0ff!important}.NestedTableRow1332964938__root.NestedTableRow1332964938--expandable{cursor:pointer}.NestedTableRow1332964938__placeholder td{padding:0!important;width:100%}.NestedTableRow1332964938__root:hover td:first-of-type::before,.NestedTableRow1332964938__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect493559973__root{position:absolute;transform:translate(6px,6px);background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,6,36,.12),0 0 6px 0 rgba(0,6,36,.12)}.NestedTableDragAndDropRow2736321106__root.NestedTableDragAndDropRow2736321106--draggingInto td{background-color:#e7f0ff!important}.PickerContent1184630930__root{display:flex}.PickerContentAdditionalStep1014198277__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep1014198277__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem2409496180__root{box-sizing:border-box}.ScrollableContent3193808438__root.ScrollableContent3193808438--overflowY{overflow-y:auto}.ScrollableContent3193808438__root.ScrollableContent3193808438--overflowX{overflow-x:auto}.ScrollableContent3193808438__root.ScrollableContent3193808438--smooth{scroll-behavior:smooth}.SkeletonCard366659410__headerLoading{display:block!important}.SlidingModal826424250__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal826424250__root.SlidingModal826424250---appendTo-6-parent{transition:transform 0s ease 0s;position:absolute}.SlidingModal826424250__root:not(.SlidingModal826424250--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter3146213581__root .TabsFilter3146213581__title{color:inherit!important}.ManageTagsModal497343785__root{display:flex}.ToolbarItem246157428__root{min-width:0}.ToolbarItemBox3629337748__root{min-width:0}.ToolbarItemBox3629337748__root.ToolbarItemBox3629337748--removeStartPadding{margin-left:-24px}.ToolbarItemBox3629337748__root.ToolbarItemBox3629337748--expandable{flex:1 0}.common430087294__column{display:flex;flex-direction:column}.common430087294__fullHeight{height:100%;min-height:0}.CollectionPageHeader3779852258__root.CollectionPageHeader3779852258--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader3779852258__root.CollectionPageHeader3779852258--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2552518940__root.FormPageHeader2552518940--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2552518940__root.FormPageHeader2552518940--mobile>*{margin-left:0;margin-top:6px!important;height:auto}

package/src/themes/PatternsTheme.ts

@@ -9,6 +9,9 @@ export interface PatternsTheme {
     medium?: Size;
     small?: Size;
   };
+  loader?: {
+    size?: Size;
+  };
   toolbar: {
     item: {
       size?: Size;

package/src/themes/panel-theme.tsx

@@ -5,6 +5,9 @@ import { PatternsTheme } from './PatternsTheme';
 export const panelTheme: PatternsTheme = {
   name: 'panel',
   containerLayout: 'panel',
+  loader: {
+    size: 'small',
+  },
   sizes: {
     small: 'tiny',
     medium: 'small',

package/src/version.ts

@@ -1 +1 @@
-export const version = 'patterns@1.264.0';
+export const version = 'patterns@1.265.0';