@wix/patterns 1.261.0 → 1.264.0

package/src/state/KanbanState/KanbanState.ts

@@ -81,7 +81,8 @@ export interface KanbanStateParamsAPI<
 }
 
 export class KanbanState<T, S, F extends FiltersMap = OptionalFiltersMap>
-  implements ICollectionComponentState, KanbanStateParamsAPI<T, F> {
+  implements ICollectionComponentState, KanbanStateParamsAPI<T, F>
+{
   readonly container: WixPatternsContainer;
   kanbanStageStates: Record<
     string,
@@ -267,7 +268,7 @@ export class KanbanState<T, S, F extends FiltersMap = OptionalFiltersMap>
       this.stagesCollectionState.initTask.status.isLoading ||
       this.isRefetching ||
       Object.keys(this.kanbanStageStates).length !==
-      this.stagesCollectionState.result.keyedItems.length
+        this.stagesCollectionState.result.keyedItems.length
     );
   }
 
@@ -455,10 +456,10 @@ export class KanbanState<T, S, F extends FiltersMap = OptionalFiltersMap>
       initialPage: hasDataForStage
         ? this.getInitialPageData(stageData)
         : {
-          items: [],
-          total: 0,
-          cursor: null,
-        },
+            items: [],
+            total: 0,
+            cursor: null,
+          },
       name: this.stagesCollectionState.itemName(stage),
       key: this.stagesCollectionState.itemKey(stage),
       kanbanId: this.kanbanId,
@@ -483,10 +484,10 @@ export class KanbanState<T, S, F extends FiltersMap = OptionalFiltersMap>
         hasDataForStage
           ? stageData
           : {
-            items: [],
-            total: 0,
-            cursor: null,
-          },
+              items: [],
+              total: 0,
+              cursor: null,
+            },
       );
 
       stageState.itemsCollectionState.setInitialPage(initialPageData);

package/src/state/ViewsState.ts

@@ -261,10 +261,7 @@ export class ViewsState<F extends FiltersMap> {
     return items;
   }
 
-
-  _getInitialSelectItem(
-    items: PrivateView<F>[],
-  ): PrivateView<F> | undefined {
+  _getInitialSelectItem(items: PrivateView<F>[]): PrivateView<F> | undefined {
     const { initialSelect, _initialViewIdFromUrl, defaultViewId } = this;
 
     if (initialSelect == null) {

package/src/styles.global.css

@@ -1 +1 @@
-.CardContainer2816435378__root.CardContainer2816435378--mobile{border-radius:0}.Collapse3313035634__root{transition-property:height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.Collapse3313035634__exit{height:0}.CollectionPage2659754749__root.CollectionPage2659754749--mobile{--wds-page-header-padding-horizontal:0}.CollectionTable3789129489__root.CollectionTable3789129489--mobile td:first-child{padding-left:18px}.CollectionTable3789129489__root.CollectionTable3789129489--mobile td:last-child{padding-right:18px}.CollectionToolbar856652363__left{min-width:0}.CollectionToolbar856652363__root.CollectionToolbar856652363--views .CollectionToolbar856652363__left{flex-shrink:1;flex-grow:0}.CollectionToolbar856652363__left.CollectionToolbar856652363--expandable{flex:auto}.CollectionToolbar856652363__root .CollectionToolbar856652363__right{justify-content:flex-end!important;flex-grow:1;flex-shrink:1;flex-basis:auto}.CollectionToolbar856652363__root.CollectionToolbar856652363--views .CollectionToolbar856652363__right{min-width:0;flex-grow:1;flex-shrink:0;flex-basis:0}.CollectionToolbar856652363__root .CollectionToolbar856652363__right.CollectionToolbar856652363__fullWidth{margin-inline-start:0!important}.CollectionToolbar856652363__root.CollectionToolbar856652363--mobile{padding-right:18px;padding-left:18px}.SearchOrCustomFilter2018705461__search{min-width:140px;max-width:240px;flex:1 0}.SearchOrCustomFilter2018705461__searchMobile{width:100%;justify-content:flex-end}.AutoCompleteReadonly3472175462__root.AutoCompleteReadonly3472175462--disableEditing{cursor:pointer}.AutoCompleteReadonly3472175462__root.AutoCompleteReadonly3472175462--disableEditing input{cursor:pointer}.ViewsDropdown2523037556__root{width:200px}.DragHandle1384877889__root{display:flex;align-items:center}.DragHandle1384877889__root:not(.DragHandle1384877889--disabled){cursor:grab;color:#a8caff}.DragHandle1384877889__root.DragHandle1384877889--disabled{color:#acafc4}.DragHandle1384877889__root:focus-visible:not(.DragHandle1384877889--disabled){outline:0;box-shadow:0 0 0 3px #a6d0ff}.DragHandle1384877889__root.DragHandle1384877889--disabled{pointer-events:none}.DragHandle1384877889__root.DragHandle1384877889--dragging:not(.DragHandle1384877889--disabled){cursor:grabbing}.EntityPagePlain1244331438__root.EntityPagePlain1244331438--mobile{--wds-page-header-padding-horizontal:0}.Fade1822755885__root{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);opacity:1}.Fade1822755885__root.Fade1822755885--exit{opacity:0}.Heading322658514__root{visibility:visible}.Heading322658514__root.Heading322658514--appearanceH2{font-size:28px!important;line-height:36px!important}.InputOverflow2740037672__root.InputOverflow2740037672--selected:not(.InputOverflow2740037672--focused) input::placeholder{color:#000624}@keyframes LoadingRow2032827896__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%}}.LoadingRow2032827896__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:LoadingRow2032827896__gradientSwoosh 2s ease-out infinite alternate}.MaxHeightText2646176708__root{opacity:1}.MaxHeightText2646176708__root.MaxHeightText2646176708--height24{line-height:24px}.MaxLines1988150017__root{overflow:hidden}.MaxLines1988150017__root.MaxLines1988150017--clamp{-webkit-box-orient:vertical;display:-webkit-box}.MultiBulkActionToolbar3960437646__root{min-width:0}.NestedTablePlaceholderStatesRow2904074660__root td{padding:0!important;width:100%}.NestedTableRow3427171272__firstLevel td{padding-top:18px!important;padding-bottom:18px!important}.NestedTableRow3427171272__root:hover{background-color:#e7f0ff!important}.NestedTableRow3427171272__root.NestedTableRow3427171272--expandable{cursor:pointer}.NestedTableRow3427171272__placeholder td{padding:0!important;width:100%}.NestedTableRow3427171272__root:hover td:first-of-type::before,.NestedTableRow3427171272__parentHovered td:first-of-type::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#5999ff}.MultipleDragOverlayEffect3645946618__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)}.NestedTableDragAndDropRow761657154__root.NestedTableDragAndDropRow761657154--draggingInto td{background-color:#e7f0ff!important}.PickerContent1221046944__root{display:flex}.PickerContentAdditionalStep3990396416__titles{display:flex;justify-content:center;flex:1 1 auto;overflow:hidden;flex-direction:column}.PickerContentAdditionalStep3990396416__suffix{display:flex;align-items:center;flex:0 0 auto;overflow:hidden}.PickerTableListItem1518127344__root{box-sizing:border-box}.ScrollableContent186640191__root.ScrollableContent186640191--overflowY{overflow-y:auto}.ScrollableContent186640191__root.ScrollableContent186640191--overflowX{overflow-x:auto}.ScrollableContent186640191__root.ScrollableContent186640191--smooth{scroll-behavior:smooth}.SkeletonCard1111038852__headerLoading{display:block!important}.SlidingModal2434369816__root{transition:transform .4s ease 0s;position:fixed;z-index:1}.SlidingModal2434369816__root.SlidingModal2434369816---appendTo-6-parent{transition:transform 0s ease 0s;position:absolute}.SlidingModal2434369816__root:not(.SlidingModal2434369816--exited){box-shadow:0 3px 24px 0 rgba(22,45,61,.18),0 8px 8px 0 rgba(22,45,61,.12)}.TabsFilter1584719376__root .TabsFilter1584719376__title{color:inherit!important}.ManageTagsModal3546780406__root{display:flex}.ToolbarItem3712438792__root{min-width:0}.ToolbarItemBox1914234473__root{min-width:0}.ToolbarItemBox1914234473__root.ToolbarItemBox1914234473--removeStartPadding{margin-left:-24px}.ToolbarItemBox1914234473__root.ToolbarItemBox1914234473--expandable{flex:1 0}.common11644450__column{display:flex;flex-direction:column}.common11644450__fullHeight{height:100%;min-height:0}.CollectionPageHeader2415985844__root.CollectionPageHeader2415985844--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.CollectionPageHeader2415985844__root.CollectionPageHeader2415985844--mobile>*{margin-left:0;margin-top:6px!important;height:auto}.FormPageHeader2155437001__root.FormPageHeader2155437001--mobile{flex-direction:column;padding-right:18px;padding-left:18px}.FormPageHeader2155437001__root.FormPageHeader2155437001--mobile>*{margin-left:0;margin-top:6px!important;height:auto}
+.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}

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/testkit/jsdom.ts

@@ -106,4 +106,4 @@ export const RequestIdTestkit = uniTestkitFactoryCreator(RequestIdUniDriver);
 
 export const SearchableCollectionContentTestkit = uniTestkitFactoryCreator(
   SearchableCollectionContentUniDriver,
-);
+);

package/src/themes/PatternsTheme.ts

@@ -0,0 +1,23 @@
+import { IconElement } from '@wix/design-system';
+
+type Size = 'small' | 'medium' | 'tiny';
+
+export interface PatternsTheme {
+  name?: string;
+  containerLayout?: 'panel' | 'page';
+  sizes: {
+    medium?: Size;
+    small?: 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,23 @@
+import { ChevronRightSmall } from '@wix/wix-ui-icons-common';
+import React from 'react';
+import { PatternsTheme } from './PatternsTheme';
+
+export const panelTheme: PatternsTheme = {
+  name: 'panel',
+  containerLayout: 'panel',
+  sizes: {
+    small: 'tiny',
+    medium: 'small',
+  },
+  toolbar: {
+    item: {
+      size: 'tiny',
+    },
+    button: {
+      suffix: <ChevronRightSmall />,
+    },
+  },
+  radioGroup: {
+    spacing: '0px',
+  },
+};

package/src/unidriver/DatePicker.uni.driver.ts

@@ -0,0 +1,13 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { DatePickerUniDriver as DatePickerUniDriverOriginal } from '@wix/design-system/dist/testkit/unidriver';
+import { UniDriverFactory } from '../components/uniDriverFactory';
+import { DatePickerUniDriver as DatePickerUniDriverFactory } from '@wix/design-system/dist/types/DatePicker/DatePicker.uni.driver';
+
+export const DatePickerUniDriver = async (base: UniDriver, body: UniDriver) =>
+  (DatePickerUniDriverOriginal as UniDriverFactory<DatePickerUniDriverFactory>)(
+    base,
+    body,
+    {
+      dataHook: (await base.attr('data-hook')) as string | undefined,
+    },
+  );

package/src/utils/useWindowFlipPopoverProps.ts

@@ -24,6 +24,7 @@ export function useWindowFlipPopoverProps({
     windowFlipPopoverProps: {
       appendTo: 'window' as const,
       flip: true,
+      fixed: false,
       maxWidth: dropdownWidth,
       ...(location === 'modal' && { zIndex: 5001 }),
       ...popoverProps,

package/src/version.ts

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