@wix/patterns 1.263.0 → 1.265.0

package/src/state/CollectionPage/useCollectionPageContent.tsx

@@ -1,7 +1,20 @@
 import React from 'react';
-import { Page } 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 (
+      <Box
+        {...child.props}
+        direction="vertical"
+        minHeight={0}
+        height="100%"
+        flex={1}
+      />
+    );
+  }
   return <Page.Content {...child.props} />;
 }

package/src/state/CollectionPage/useCollectionPageFooter.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Page, SidePanel } from '@wix/design-system';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { CollectionPageFooterElement } from '../../components/CollectionPageFooter';
+
+export function useCollectionPageFooter(child: CollectionPageFooterElement) {
+  const { isPanelLayout } = useWixPatternsContainer();
+  if (isPanelLayout) {
+    return <SidePanel.Footer {...child.props} />;
+  }
+  return <Page.Footer {...child.props} />;
+}

package/src/state/CollectionPage/useCollectionPageHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Heading, Page } from '@wix/design-system';
+import { Box, Heading, Page, SidePanel } from '@wix/design-system';
 import { CollectionPageHeaderElement } from '../../components/CollectionPageHeaderNew';
 import { useCollectionPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
@@ -9,6 +9,7 @@ import { useIsMobile } from '../../hooks/useIsMobile';
 import { classes, st } from './CollectionPageHeader.st.css.js';
 import { pushFactoryIfNotExistsOrAddToTopOfGroup } from './pushFactoryIfNotExistsOrAddToTopOfGroup';
 import { MoreActions } from '../../components/MoreActions';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
 
 const MoreActionsBySecondaryAction = observer(
   ({ child }: { child: CollectionPageHeaderElement }) => {
@@ -48,6 +49,11 @@ const MoreActionsBySecondaryAction = observer(
 
 export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
   const isMobile = useIsMobile();
+  const { isPanelLayout } = useWixPatternsContainer();
+
+  if (isPanelLayout) {
+    return <SidePanel.Header title={child.props.title.text} />;
+  }
   return (
     <Page.Header
       key={child.key}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "FormPageHeader1796825381";
+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":"FormPageHeader1796825381__root"};
+export var classes = {"root":"FormPageHeader2552518940__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer2488312148__root.CardContainer2488312148--mobile{border-radius:0}.Collapse3409195705__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3409195705__exit{height:0}.CollectionPage3091439071__root.CollectionPage3091439071--mobile{--wds-page-header-padding-horizontal:0}.CollectionTable3574185100__root.CollectionTable3574185100--mobile td:first-child{padding-left:18px}.CollectionTable3574185100__root.CollectionTable3574185100--mobile td:last-child{padding-right:18px}.CollectionToolbar1743802385__left{min-width:0}.CollectionToolbar1743802385__root.CollectionToolbar1743802385--views .CollectionToolbar1743802385__left{flex-shrink:1;flex-grow:0}.CollectionToolbar1743802385__left.CollectionToolbar1743802385--expandable{flex:auto}.CollectionToolbar1743802385__root .CollectionToolbar1743802385__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar1743802385__root.CollectionToolbar1743802385--views .CollectionToolbar1743802385__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar1743802385__root .CollectionToolbar1743802385__right.CollectionToolbar1743802385__fullWidth{margin-inline-start:0!important}.CollectionToolbar1743802385__root.CollectionToolbar1743802385--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter1952909110__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter1952909110__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly779197060__root.AutoCompleteReadonly779197060--disableEditing{cursor:pointer}.AutoCompleteReadonly779197060__root.AutoCompleteReadonly779197060--disableEditing input{cursor:pointer}.ViewsDropdown3379161903__root{width:200px}.DragHandle3491303079__root{display:flex;align-items:center}.DragHandle3491303079__root:not(.DragHandle3491303079--disabled){cursor:grab;color:#a8caff}.DragHandle3491303079__root.DragHandle3491303079--disabled{color:#acafc4}.DragHandle3491303079__root:focus-visible:not(.DragHandle3491303079--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle3491303079__root.DragHandle3491303079--disabled{pointer-events:none}.DragHandle3491303079__root.DragHandle3491303079--dragging:not(.DragHandle3491303079--disabled){cursor:grabbing}.EntityPagePlain2805193397__root.EntityPagePlain2805193397--mobile{--wds-page-header-padding-horizontal:0}.Fade801000593__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade801000593__root.Fade801000593--exit{opacity:0}.Heading3921377375__root{visibility:visible}.Heading3921377375__root.Heading3921377375--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow1473031221__root.InputOverflow1473031221--selected:not(.InputOverflow1473031221--focused) input::placeholder{color:#000624}@keyframes LoadingRow3543269352__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%}}.LoadingRow3543269352__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:LoadingRow3543269352__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText3576219268__root{opacity:1}.MaxHeightText3576219268__root.MaxHeightText3576219268--height24{line-height:24px}.MaxLines1857967116__root{overflow:hidden}.MaxLines1857967116__root.MaxLines1857967116--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar1719938158__root{min-width:0}.NestedTablePlaceholderStatesRow2484428981__root td{padding:0!important;width:100%}.NestedTableRow2222993695__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow2222993695__root:hover{background-color:#e7f0ff!important}.NestedTableRow2222993695__root.NestedTableRow2222993695--expandable{cursor:pointer}.NestedTableRow2222993695__placeholder td{padding:0!important;width:100%}.NestedTableRow2222993695__root:hover td:first-of-type::before,.NestedTableRow2222993695__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect2289837617__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)}.NestedTableDragAndDropRow792121382__root.NestedTableDragAndDropRow792121382--draggingInto td{background-color:#e7f0ff!important}.PickerContent1116485106__root{display:flex}.PickerContentAdditionalStep3791920242__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep3791920242__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem3878395080__root{box-sizing:border-box}.ScrollableContent4044499270__root.ScrollableContent4044499270--overflowY{overflow-y:auto}.ScrollableContent4044499270__root.ScrollableContent4044499270--overflowX{overflow-x:auto}.ScrollableContent4044499270__root.ScrollableContent4044499270--smooth{scroll-behavior:smooth}.SkeletonCard2427498728__headerLoading{display:block!important}.SlidingModal1740485261__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal1740485261__root.SlidingModal1740485261---appendTo-6-parent{transition:transform 0s ease 0s;position:absolute}.SlidingModal1740485261__root:not(.SlidingModal1740485261--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter2458939024__root .TabsFilter2458939024__title{color:inherit!important}.ManageTagsModal1989625989__root{display:flex}.ToolbarItem2780647987__root{min-width:0}.ToolbarItemBox4183899479__root{min-width:0}.ToolbarItemBox4183899479__root.ToolbarItemBox4183899479--removeStartPadding{margin-left:-24px}.ToolbarItemBox4183899479__root.ToolbarItemBox4183899479--expandable{flex:1 0}.common2813459454__column{display:flex;flex-direction:column}.common2813459454__fullHeight{height:100%;min-height:0}.CollectionPageHeader4120272383__root.CollectionPageHeader4120272383--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader4120272383__root.CollectionPageHeader4120272383--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader1796825381__root.FormPageHeader1796825381--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader1796825381__root.FormPageHeader1796825381--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/test-utils/WixPatternsEssentialsTestProvider.tsx

@@ -1,13 +1,14 @@
 import React, { ReactNode, useState } from 'react';
 import {
+  PatternsLayoutType,
   WixPatternsEssentials,
   WixPatternsEssentialsOverrides,
 } from '@wix/bex-core';
 import {
-  useEssentials,
-  useTranslation,
   Trans,
+  useEssentials,
   useExperiments,
+  useTranslation,
 } from '@wix/fe-essentials/react';
 import {
   AppSettingsStorageStrategy,
@@ -18,13 +19,16 @@ import ExtensionWidget from './ExtensionWidget';
 import { Edit } from '@wix/wix-ui-icons-common';
 import { ErrorHandler } from '@wix/fe-essentials/error-handler';
 
-export function WixPatternsEssentialsTestProvider({
-  children,
-  overrides,
-}: {
+export interface WixPatternsEssentialsTestProviderProps {
   children?: ReactNode;
   overrides?: Partial<WixPatternsEssentialsOverrides>;
-}) {
+  layoutType?: PatternsLayoutType;
+}
+
+export function WixPatternsEssentialsTestProvider(
+  props: WixPatternsEssentialsTestProviderProps,
+) {
+  const { children, overrides, layoutType } = props;
   const {
     errorMonitor,
     httpClient,
@@ -117,7 +121,7 @@ export function WixPatternsEssentialsTestProvider({
   );
 
   return (
-    <CairoProvider localCache value={value}>
+    <CairoProvider localCache value={value} layoutType={layoutType}>
       {children}
     </CairoProvider>
   );

package/src/themes/PatternsTheme.ts

@@ -0,0 +1,26 @@
+import { IconElement } from '@wix/design-system';
+
+type Size = 'small' | 'medium' | 'tiny';
+
+export interface PatternsTheme {
+  name?: string;
+  containerLayout?: 'panel' | 'page';
+  sizes: {
+    medium?: Size;
+    small?: Size;
+  };
+  loader?: {
+    size?: Size;
+  };
+  toolbar: {
+    item: {
+      size?: Size;
+    };
+    button: {
+      suffix?: IconElement;
+    };
+  };
+  radioGroup: {
+    spacing?: string;
+  };
+}

package/src/themes/PatternsThemeProvider.ts

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+import { PatternsTheme } from './PatternsTheme';
+
+export const PatternsThemeContext = createContext<PatternsTheme>({
+  sizes: {},
+  toolbar: {
+    button: {},
+    item: {},
+  },
+  radioGroup: {},
+});
+
+export const PatternsThemeProvider = PatternsThemeContext.Provider;
+export const PatternsThemeConsumer = PatternsThemeContext.Consumer;
+
+export function usePatternsTheme() {
+  return useContext(PatternsThemeContext);
+}

package/src/themes/panel-theme.tsx

@@ -0,0 +1,26 @@
+import { ChevronRightSmall } from '@wix/wix-ui-icons-common';
+import React from 'react';
+import { PatternsTheme } from './PatternsTheme';
+
+export const panelTheme: PatternsTheme = {
+  name: 'panel',
+  containerLayout: 'panel',
+  loader: {
+    size: 'small',
+  },
+  sizes: {
+    small: 'tiny',
+    medium: 'small',
+  },
+  toolbar: {
+    item: {
+      size: 'tiny',
+    },
+    button: {
+      suffix: <ChevronRightSmall />,
+    },
+  },
+  radioGroup: {
+    spacing: '0px',
+  },
+};

package/src/version.ts

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