@wix/patterns 1.352.0 → 1.354.0

package/src/components/PickerTableListItem/PickerTableListItem.st.css.ts

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

package/src/components/ScrollableContent/ScrollableContent.st.css.ts

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

package/src/components/SkeletonCard/SkeletonCard.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard2461642541";
+var _namespace_ = "SkeletonCard3893727976";
 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":"SkeletonCard2461642541__root","headerLoading":"SkeletonCard2461642541__headerLoading"};
+export var classes = {"root":"SkeletonCard3893727976__root","headerLoading":"SkeletonCard3893727976__headerLoading"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/SlidingModal/SlidingModal.st.css.ts

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

package/src/components/TabsFilter/TabsFilter.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter4095275580";
+var _namespace_ = "TabsFilter393841454";
 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":"TabsFilter4095275580__root","title":"TabsFilter4095275580__title"};
+export var classes = {"root":"TabsFilter393841454__root","title":"TabsFilter393841454__title"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Tags/ManageTags/ManageTagsModal/ManageTagsModal.st.css.ts

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

package/src/components/ToolbarItem/ToolbarItem.st.css.ts

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

package/src/components/ToolbarItemBox/ToolbarItemBox.st.css.ts

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

package/src/components/common.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "common970521328";
+var _namespace_ = "common485820671";
 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":"common970521328__root","column":"common970521328__column","fullHeight":"common970521328__fullHeight"};
+export var classes = {"root":"common485820671__root","column":"common485820671__column","fullHeight":"common485820671__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/state/CollectionPage/CollectionPageActionsBar.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Box } from '@wix/design-system';
+import { CollectionPageHeaderElement } from '../../components/CollectionPageHeaderNew';
+import { useCollectionPageContext } from '../../providers';
+import { observer } from 'mobx-react-lite';
+import { MoreActionsText } from '../../components/MoreActions/MoreActionsText';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import { pushFactoryIfNotExistsOrAddToTopOfGroup } from './pushFactoryIfNotExistsOrAddToTopOfGroup';
+import { mergeActionsForNarrowMode } from './transformSecondaryActionsToMoreActions';
+import { MoreActions } from '../../components/MoreActions';
+import {
+  MoreActionItemFactory,
+  MoreActionsPropItem,
+} from '../../components/MoreActions/MoreActionsBase';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+function withFeaturedActions(
+  items: MoreActionsPropItem[] | MoreActionsPropItem[][] | undefined,
+  featuredActions: MoreActionItemFactory[] | undefined,
+) {
+  if (!featuredActions) {
+    return items;
+  }
+  let result = items;
+  for (const factory of featuredActions) {
+    result = pushFactoryIfNotExistsOrAddToTopOfGroup(result, factory);
+  }
+  return result;
+}
+
+const WideModeMoreActions = observer(
+  ({ child }: { child: CollectionPageHeaderElement }) => {
+    const { primaryToolbar } = useCollectionPageContext();
+    const featuredActions = primaryToolbar?.getPageFeaturedActions();
+
+    const forceMoreActions = featuredActions?.length ? (
+      <MoreActions />
+    ) : undefined;
+
+    const moreActions = child.props.moreActions ?? forceMoreActions;
+    if (!moreActions) {
+      return null;
+    }
+
+    const { type: MoreActionsType, props: moreActionsProps } = moreActions;
+    const items = withFeaturedActions(moreActionsProps.items, featuredActions);
+
+    if (child.props.secondaryActions) {
+      return <MoreActionsType {...moreActionsProps} items={items} />;
+    }
+
+    return <MoreActionsText {...moreActionsProps} items={items} />;
+  },
+);
+
+const NarrowModeMoreActions = observer(
+  ({ child }: { child: CollectionPageHeaderElement }) => {
+    const { primaryToolbar } = useCollectionPageContext();
+    const featuredActions = primaryToolbar?.getPageFeaturedActions();
+    const moreActionsProps = child.props.moreActions?.props;
+
+    const moreActionsItems = withFeaturedActions(
+      moreActionsProps?.items,
+      featuredActions,
+    );
+
+    const items = mergeActionsForNarrowMode(
+      child.props.secondaryActions,
+      moreActionsItems,
+    );
+
+    if (items.length === 0) {
+      return null;
+    }
+
+    return (
+      <MoreActions
+        items={items}
+        containerId={moreActionsProps?.containerId}
+        exploreAppsModalProps={moreActionsProps?.exploreAppsModalProps}
+        biAdditionalInfo={moreActionsProps?.biAdditionalInfo}
+      />
+    );
+  },
+);
+
+export const CollectionPageActionsBar = observer(
+  ({ child }: { child: CollectionPageHeaderElement }) => {
+    const isMobile = useIsMobile();
+    const { isNarrow } = useCollectionPageContext();
+    const { internalExperiments } = useWixPatternsContainer();
+
+    const isNarrowMode =
+      isNarrow &&
+      internalExperiments?.enabled('specs.cairo.CollectionPageMinWidth');
+
+    if (isMobile) {
+      return <Box gap="SP2">{child.props.primaryAction}</Box>;
+    }
+
+    if (isNarrowMode) {
+      return (
+        <Box gap="SP2">
+          <NarrowModeMoreActions child={child} />
+          {child.props.primaryAction}
+        </Box>
+      );
+    }
+
+    return (
+      <Box gap="SP2">
+        <WideModeMoreActions child={child} />
+        {child.props.secondaryActions}
+        {child.props.primaryAction}
+      </Box>
+    );
+  },
+);

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

@@ -2,6 +2,10 @@
   -st-states: mobile;
 }
 
+.root:not(:mobile) {
+  gap: 12px;
+}
+
 .root:mobile {
   flex-direction: column;
   padding-right: 18px;

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

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

package/src/state/CollectionPage/transformSecondaryActionsToMoreActions.ts

@@ -0,0 +1,74 @@
+import { ActionSubitem } from '../../components/ActionControl/ActionSubItemProps';
+import { MoreActionsItem } from '../../components/MoreActions/MoreActionsItem';
+import { SecondaryActionsElement } from '../../components/SecondaryActions/SecondaryActions';
+import { MoreActionsPropItem } from '../../components/MoreActions/MoreActionsBase';
+
+function normalizeToGroups<T>(items: T[] | T[][] | undefined): T[][] {
+  if (!items || items.length === 0) {
+    return [];
+  }
+  return Array.isArray(items[0]) ? (items as T[][]) : [items as T[]];
+}
+
+function toMoreActionsItem(subitem: ActionSubitem): MoreActionsItem {
+  return {
+    text: subitem.label ?? '',
+    onClick: subitem.onClick ?? (() => {}),
+    prefixIcon: subitem.prefixIcon,
+    disabled: subitem.disabled,
+    subtitle: subitem.subtitle,
+    dataHook: subitem.dataHook,
+    biName: subitem.biName,
+    biAdditionalInfo: subitem.biAdditionalInfo,
+  };
+}
+
+function secondaryActionsToGroups(
+  secondaryActions: SecondaryActionsElement | undefined,
+): MoreActionsPropItem[][] {
+  if (!secondaryActions) {
+    return [];
+  }
+
+  const {
+    label,
+    onClick,
+    prefixIcon,
+    disabled,
+    biName,
+    biAdditionalInfo,
+    subItems,
+  } = secondaryActions.props;
+
+  if (subItems && subItems.length > 0) {
+    return normalizeToGroups(subItems).map((group) =>
+      group.map(toMoreActionsItem),
+    );
+  }
+
+  if (label) {
+    return [
+      [
+        {
+          text: label,
+          onClick: onClick ?? (() => {}),
+          prefixIcon,
+          disabled,
+          biName,
+          biAdditionalInfo,
+        },
+      ],
+    ];
+  }
+
+  return [];
+}
+
+export function mergeActionsForNarrowMode(
+  secondaryActions: SecondaryActionsElement | undefined,
+  moreActionsItems: MoreActionsPropItem[] | MoreActionsPropItem[][] | undefined,
+): MoreActionsPropItem[][] {
+  const secondaryGroups = secondaryActionsToGroups(secondaryActions);
+  const moreActionsGroups = normalizeToGroups(moreActionsItems);
+  return [...secondaryGroups, ...moreActionsGroups];
+}

package/src/state/CollectionPage/useCollectionPageHeader.tsx

@@ -4,49 +4,11 @@ import { CollectionPageHeaderElement } from '../../components/CollectionPageHead
 import { useCollectionPageContext } from '../../providers';
 import { observer } from 'mobx-react-lite';
 import { PageSubTitle } from '../../components/PageSubTitle';
-import { MoreActionsText } from '../../components/MoreActions/MoreActionsText';
 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';
 import { PanelHeader } from './PanelHeader';
-
-const MoreActionsBySecondaryAction = observer(
-  ({ child }: { child: CollectionPageHeaderElement }) => {
-    const pageState = useCollectionPageContext();
-    const { primaryToolbar } = pageState;
-
-    const featuredActions = primaryToolbar?.getPageFeaturedActions();
-
-    const forceMoreActions = featuredActions?.length ? (
-      <MoreActions />
-    ) : undefined;
-
-    const moreActions = child.props.moreActions ?? forceMoreActions;
-
-    if (!moreActions) {
-      return null;
-    }
-
-    const { type: MoreActionsElementType, props: moreActionsProps } =
-      moreActions;
-
-    let items = moreActionsProps.items;
-
-    if (featuredActions) {
-      for (const factory of featuredActions) {
-        items = pushFactoryIfNotExistsOrAddToTopOfGroup(items, factory);
-      }
-    }
-
-    if (child.props.secondaryActions) {
-      return <MoreActionsElementType {...moreActionsProps} items={items} />;
-    }
-
-    return <MoreActionsText {...moreActionsProps} items={items} />;
-  },
-);
+import { CollectionPageActionsBar } from './CollectionPageActionsBar';
 
 export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
   const isMobile = useIsMobile();
@@ -60,6 +22,7 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
       />
     );
   }
+
   return (
     <Page.Header
       key={child.key}
@@ -71,13 +34,7 @@ export function useCollectionPageHeader(child: CollectionPageHeaderElement) {
           <PageSubTitle {...child.props.subtitle} />
         ) : undefined
       }
-      actionsBar={
-        <Box gap="SP2">
-          {!isMobile && <MoreActionsBySecondaryAction child={child} />}
-          {!isMobile && child.props.secondaryActions}
-          {child.props.primaryAction}
-        </Box>
-      }
+      actionsBar={<CollectionPageActionsBar child={child} />}
       breadcrumbs={
         isMobile
           ? () => {
@@ -93,25 +50,34 @@ const CollectionPageHeaderTitle = observer(
   ({ minimized }: { minimized: boolean }) => {
     const state = useCollectionPageContext();
     const isMobile = useIsMobile();
-    const titleContent = (
-      <>
-        <Box inline paddingRight="9px">
-          {state.pageTitle}
-        </Box>
-        {state.total !== false && !state.hideHeaderTotal && (
-          <Box inline color="D40" dataHook="page-header-total-count">
-            {state.total}
-          </Box>
-        )}
-      </>
-    );
 
     if (minimized) {
-      return titleContent;
+      return <>{state.pageTitle}</>;
     }
 
     return (
-      <Heading size={isMobile ? 'large' : 'extraLarge'}>{titleContent}</Heading>
+      <Heading size={isMobile ? 'large' : 'extraLarge'}>
+        <Box inline maxLines={1} paddingRight="9px" minWidth={0} width="100%">
+          <Heading
+            size={isMobile ? 'large' : 'extraLarge'}
+            ellipsis
+            showTooltip={!isMobile}
+            placement="bottom"
+          >
+            {state.pageTitle}
+          </Heading>
+          {state.total !== false && !state.hideHeaderTotal && (
+            <Box
+              inline
+              color="D40"
+              paddingLeft="9px"
+              dataHook="page-header-total-count"
+            >
+              {state.total}
+            </Box>
+          )}
+        </Box>
+      </Heading>
     );
   },
 );

package/src/state/DropdownCollectionFilterState.ts

@@ -42,10 +42,21 @@ export class DropdownCollectionFilterState<
     );
   }
 
+  get inputValue() {
+    return this.shouldShowInputValue
+      ? this.collectionFilter.collection.query.search.value
+      : '';
+  }
+
+  get shouldShowInputValue() {
+    return this.dropdownSelect.dropdown.isOn || !this.inputState.disableEditing;
+  }
+
   onOptionsShow() {
     this.promotedItems = this.collectionFilter.select.selectedValues.map(
       (item) => item.key,
     );
+    this.dropdownSelect.open();
   }
 
   constructor(params: DropdownCollectionFilterStateParams<V, F>) {
@@ -69,6 +80,8 @@ export class DropdownCollectionFilterState<
     makeObservable(this, {
       init: action.bound,
       shouldShowPlaceholder: computed,
+      inputValue: computed,
+      shouldShowInputValue: computed,
       promotedItems: observable.ref,
       onOptionsShow: action.bound,
     });

package/src/state/DropdownSelectState.ts

@@ -48,6 +48,7 @@ export class DropdownSelectState<V> {
       delete: action,
       deleteKey: action,
       init: action.bound,
+      open: action.bound,
       clear: action.bound,
       syncSelectedItems: action.bound,
       syncSelectedItemsIfChanged: action.bound,
@@ -174,6 +175,12 @@ export class DropdownSelectState<V> {
     events.emit('close');
   }
 
+  open() {
+    const { dropdown, events } = this;
+    dropdown.setOn();
+    events.emit('open');
+  }
+
   closeAndChangeSelectedItems() {
     this.close();
     const { selectedItems, filter } = this;

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

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