@wix/patterns 1.366.0 → 1.370.0

package/src/components/CollectionToolbar/ToolbarOverflowMenu.tsx

@@ -0,0 +1,323 @@
+import React, {
+  ReactElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Box,
+  IconButton,
+  ListItemAction,
+  Popover,
+  Text,
+  TextButton,
+  Thumbnail,
+} from '@wix/design-system';
+import {
+  ChevronLeft,
+  DataCollection,
+  MoreSmall,
+} from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { ViewTypeState } from '../../state/ViewTypeState';
+import {
+  layoutOptions,
+  layoutConfig,
+} from '../TableGridSwitchButton/layoutConfig';
+
+type Translate = ReturnType<typeof useWixPatternsContainer>['translate'];
+type Focusable = { focus: () => void };
+
+export interface ToolbarOverflowPrimaryItem {
+  text: string;
+  icon: ReactElement;
+  onClick: () => void;
+  dataHook?: string;
+}
+
+export interface ToolbarOverflowSecondaryItem {
+  text: string;
+  prefixIcon: ReactElement;
+  onClick: () => void;
+  dataHook?: string;
+}
+
+export interface ToolbarOverflowLayoutSwitchConfig {
+  viewTypeState: ViewTypeState;
+}
+
+type ActiveView = 'main' | 'layout';
+
+export interface ToolbarOverflowMenuProps {
+  primaryItems: ToolbarOverflowPrimaryItem[];
+  secondaryItems: ToolbarOverflowSecondaryItem[];
+  layoutSwitchConfig?: ToolbarOverflowLayoutSwitchConfig;
+}
+
+export function ToolbarOverflowMenu({
+  primaryItems,
+  secondaryItems,
+  layoutSwitchConfig,
+}: ToolbarOverflowMenuProps) {
+  const [shown, setShown] = useState(false);
+  const [activeView, setActiveView] = useState<ActiveView>('main');
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const focusTargetRef = useRef<'first' | 'layoutSwitch' | null>(null);
+  const { translate: t } = useWixPatternsContainer();
+
+  const shouldFocusTriggerOnCloseRef = useRef(false);
+
+  const close = useCallback(() => {
+    setShown(false);
+    setActiveView('main');
+  }, []);
+
+  const closeAndFocusTrigger = useCallback(() => {
+    shouldFocusTriggerOnCloseRef.current = true;
+    close();
+  }, [close]);
+
+  useEffect(() => {
+    if (!shown && shouldFocusTriggerOnCloseRef.current) {
+      shouldFocusTriggerOnCloseRef.current = false;
+      setTimeout(() => {
+        triggerRef.current?.focus();
+      });
+    }
+  }, [shown]);
+
+  const hasItems =
+    primaryItems.length > 0 ||
+    secondaryItems.length > 0 ||
+    !!layoutSwitchConfig;
+
+  if (!hasItems) {
+    return null;
+  }
+
+  return (
+    <Popover
+      dataHook="toolbar-overflow-menu"
+      shown={shown}
+      placement="bottom"
+      showArrow
+      flip
+      appendTo="parent"
+      onClickOutside={closeAndFocusTrigger}
+      onEscPress={closeAndFocusTrigger}
+      onTabOut={close}
+      zIndex={1101}
+    >
+      <Popover.Element>
+        <IconButton
+          ref={triggerRef}
+          size="small"
+          skin="inverted"
+          dataHook="toolbar-overflow-menu-trigger"
+          aria-label={t('cairo.moreActions')}
+          onClick={() => {
+            setShown((prev) => {
+              if (!prev) {
+                focusTargetRef.current = 'first';
+              }
+              return !prev;
+            });
+          }}
+        >
+          <MoreSmall />
+        </IconButton>
+      </Popover.Element>
+      <Popover.Content>
+        <Box
+          dataHook="toolbar-overflow-menu-content"
+          direction="vertical"
+          minWidth={activeView === 'main' ? '300px' : '184px'}
+          paddingTop="SP1"
+          paddingBottom="SP1"
+        >
+          {activeView === 'main' ? (
+            <MainView
+              primaryItems={primaryItems}
+              secondaryItems={secondaryItems}
+              layoutSwitchConfig={layoutSwitchConfig}
+              onItemClick={closeAndFocusTrigger}
+              onLayoutSwitchClick={() => setActiveView('layout')}
+              focusTarget={focusTargetRef}
+              t={t}
+            />
+          ) : (
+            <LayoutSwitchView
+              config={layoutSwitchConfig!}
+              onBack={() => {
+                focusTargetRef.current = 'layoutSwitch';
+                setActiveView('main');
+              }}
+              onSelect={closeAndFocusTrigger}
+              t={t}
+            />
+          )}
+        </Box>
+      </Popover.Content>
+    </Popover>
+  );
+}
+
+function MainView({
+  primaryItems,
+  secondaryItems,
+  layoutSwitchConfig,
+  onItemClick,
+  onLayoutSwitchClick,
+  focusTarget,
+  t,
+}: {
+  primaryItems: ToolbarOverflowPrimaryItem[];
+  secondaryItems: ToolbarOverflowSecondaryItem[];
+  layoutSwitchConfig?: ToolbarOverflowLayoutSwitchConfig;
+  onItemClick: () => void;
+  onLayoutSwitchClick: () => void;
+  focusTarget: React.MutableRefObject<'first' | 'layoutSwitch' | null>;
+  t: Translate;
+}) {
+  const firstItemRef = useRef<Focusable | null>(null);
+  const layoutSwitchRef = useRef<Focusable | null>(null);
+
+  useEffect(() => {
+    const target = focusTarget.current;
+    focusTarget.current = null;
+
+    if (target === 'first') {
+      firstItemRef.current?.focus();
+    } else if (target === 'layoutSwitch') {
+      layoutSwitchRef.current?.focus();
+    }
+  });
+
+  const isFirstItemPrimary = primaryItems.length > 0;
+
+  return (
+    <>
+      {primaryItems.length > 0 && (
+        <Box direction="horizontal" gap="SP2" padding="SP2">
+          {primaryItems.map((item, index) => (
+            <Box key={index} flex={1} minWidth={0}>
+              <Thumbnail
+                ref={index === 0 ? (firstItemRef as any) : undefined}
+                size="tiny"
+                skin="secondary"
+                image={item.icon}
+                onClick={() => {
+                  item.onClick();
+                  onItemClick();
+                }}
+                dataHook={item.dataHook}
+                title={
+                  <Text size="medium" weight="thin">
+                    {item.text}
+                  </Text>
+                }
+                width="100%"
+              />
+            </Box>
+          ))}
+        </Box>
+      )}
+      {layoutSwitchConfig && (
+        <ListItemAction
+          ref={
+            !isFirstItemPrimary
+              ? (r) => {
+                  layoutSwitchRef.current = r;
+                  if (!firstItemRef.current) {
+                    firstItemRef.current = r;
+                  }
+                }
+              : layoutSwitchRef
+          }
+          size="medium"
+          dataHook="overflow-layout-switch"
+          prefixIcon={<DataCollection />}
+          title={t('cairo.table.layout.switchLayout')}
+          onClick={() => {
+            layoutSwitchConfig.viewTypeState.reportLayoutSwitch();
+            onLayoutSwitchClick();
+          }}
+        />
+      )}
+      {secondaryItems.map((item, index) => (
+        <ListItemAction
+          key={index}
+          ref={
+            !isFirstItemPrimary && !layoutSwitchConfig && index === 0
+              ? firstItemRef
+              : undefined
+          }
+          size="medium"
+          title={item.text}
+          onClick={() => {
+            item.onClick();
+            onItemClick();
+          }}
+          prefixIcon={item.prefixIcon}
+          dataHook={item.dataHook}
+        />
+      ))}
+    </>
+  );
+}
+
+function LayoutSwitchView({
+  config,
+  onBack,
+  onSelect,
+  t,
+}: {
+  config: ToolbarOverflowLayoutSwitchConfig;
+  onBack: () => void;
+  onSelect: () => void;
+  t: Translate;
+}) {
+  const { viewTypeState } = config;
+  const activeOptionRef = useRef<Focusable>(null);
+
+  useEffect(() => {
+    activeOptionRef.current?.focus();
+  }, []);
+
+  return (
+    <>
+      <Box padding="SP1 SP3">
+        <TextButton
+          size="small"
+          dataHook="overflow-layout-switch-back"
+          prefixIcon={<ChevronLeft />}
+          onClick={onBack}
+        >
+          {t('cairo.import.back')}
+        </TextButton>
+      </Box>
+      {layoutOptions.map((option, index) => {
+        const isActive = viewTypeState.viewType === option;
+        return (
+          <ListItemAction
+            key={option}
+            ref={isActive ? activeOptionRef : undefined}
+            size="medium"
+            dataHook={`overflow-layout-option-${option}`}
+            prefixIcon={layoutConfig[option].icon as ReactElement}
+            title={t(layoutConfig[option].translationKey)}
+            highlighted={isActive ? true : undefined}
+            onClick={() => {
+              viewTypeState.reportLayoutOptionClicked(option, index);
+              if (!isActive) {
+                viewTypeState.changeViewType(option);
+              }
+              onSelect();
+            }}
+          />
+        );
+      })}
+    </>
+  );
+}

package/src/components/CollectionToolbar/useToolbarOverflowItems.ts

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react';
+import {
+  ToolbarOverflowPrimaryItem,
+  ToolbarOverflowSecondaryItem,
+  ToolbarOverflowLayoutSwitchConfig,
+} from './ToolbarOverflowMenu';
+import { ToolbarCollectionState } from '../../state';
+import { ViewTypeState } from '../../state/ViewTypeState';
+import {
+  ContentFilter,
+  Adjust,
+  ChangeOrder,
+  UploadExport,
+  DownloadImport,
+} from '@wix/wix-ui-icons-common';
+
+export interface ToolbarOverflowItems {
+  primaryItems: ToolbarOverflowPrimaryItem[];
+  secondaryItems: ToolbarOverflowSecondaryItem[];
+  layoutSwitchConfig?: ToolbarOverflowLayoutSwitchConfig;
+}
+
+export function useToolbarOverflowItems(
+  state: ToolbarCollectionState<any, any>,
+  props: {
+    customColumns?: unknown;
+    multiLevelSorting?: unknown;
+    exportButton?: unknown;
+    importButton?: unknown;
+    MoreFiltersButton?: unknown;
+    viewTypeState?: ViewTypeState;
+  },
+): ToolbarOverflowItems {
+  const { container, panels, exportState, importState } = state;
+  const { translate: t } = container;
+
+  return useMemo(() => {
+    const primaryItems: ToolbarOverflowPrimaryItem[] = [];
+    const secondaryItems: ToolbarOverflowSecondaryItem[] = [];
+
+    // Primary actions (rendered as Thumbnails)
+    if (props.MoreFiltersButton) {
+      primaryItems.push({
+        text: t('cairo.toolbar.moreFiltersButton', { defaultValue: '' }),
+        icon: React.createElement(ContentFilter),
+        onClick: () => panels.openSidePanel('filters'),
+        dataHook: 'overflow-more-filters',
+      });
+    }
+
+    if (props.customColumns) {
+      primaryItems.push({
+        text: t('cairo.table.custom-columns.button.cta', {
+          defaultValue: '',
+        }),
+        icon: React.createElement(Adjust),
+        onClick: () => panels.openSidePanel('customColumns'),
+        dataHook: 'overflow-custom-columns',
+      });
+    }
+
+    // Secondary actions (rendered as ListItemAction)
+    if (props.multiLevelSorting) {
+      secondaryItems.push({
+        text: t('cairo.table.advanced-sorting.button.cta', {
+          defaultValue: '',
+        }),
+        prefixIcon: React.createElement(ChangeOrder),
+        onClick: () => panels.openSidePanel('multiLevelSorting'),
+        dataHook: 'overflow-multi-level-sorting',
+      });
+    }
+
+    if (props.exportButton && exportState) {
+      secondaryItems.push({
+        text: t('cairo.export.export', { defaultValue: '' }),
+        prefixIcon: React.createElement(UploadExport),
+        onClick: () => exportState.open(),
+        dataHook: 'overflow-export',
+      });
+    }
+
+    if (props.importButton && importState) {
+      secondaryItems.push({
+        text: t('cairo.import.import', { defaultValue: '' }),
+        prefixIcon: React.createElement(DownloadImport),
+        onClick: () => importState.open(),
+        dataHook: 'overflow-import',
+      });
+    }
+
+    const layoutSwitchConfig: ToolbarOverflowLayoutSwitchConfig | undefined =
+      props.viewTypeState
+        ? {
+            viewTypeState: props.viewTypeState,
+          }
+        : undefined;
+
+    return { primaryItems, secondaryItems, layoutSwitchConfig };
+  }, [
+    props.customColumns,
+    props.multiLevelSorting,
+    props.exportButton,
+    props.importButton,
+    props.MoreFiltersButton,
+    props.viewTypeState,
+    t,
+    panels,
+    exportState,
+    importState,
+  ]);
+}

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

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

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

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

package/src/components/CtaProps.ts

@@ -2,7 +2,7 @@ import { IconElement } from '@wix/design-system';
 
 export interface CtaBaseProps {
   /**
-   * A unique idetifier for the CTA.
+   * A unique identifier for the CTA.
    * @external
    */
   id: string;

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

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

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell3084944771";
+var _namespace_ = "EditableCell771327262";
 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":"EditableCell3084944771__root","validationIndicator":"EditableCell3084944771__validationIndicator"};
+export var classes = {"root":"EditableCell771327262__root","validationIndicator":"EditableCell771327262__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2756468535";
+var _namespace_ = "Edit2088892532";
 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":"Edit2756468535__root","booleanEdit":"Edit2756468535__booleanEdit"};
+export var classes = {"root":"Edit2088892532__root","booleanEdit":"Edit2088892532__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1734812011";
+var _namespace_ = "View2530445919";
 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":"View1734812011__root","booleanView":"View1734812011__booleanView"};
+export var classes = {"root":"View2530445919__root","booleanView":"View2530445919__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2954194738";
+var _namespace_ = "Edit3674829988";
 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":"Edit2954194738__root","dateInput":"Edit2954194738__dateInput"};
+export var classes = {"root":"Edit3674829988__root","dateInput":"Edit3674829988__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3496179537";
+var _namespace_ = "View2865880142";
 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":"View3496179537__root","textView":"View3496179537__textView"};
+export var classes = {"root":"View2865880142__root","textView":"View2865880142__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/Edit.st.css

@@ -0,0 +1,4 @@
+.emailInput {
+  width: 100%;
+  margin-left: -1px;
+}

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "Edit3567699263";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"Edit3567699263__root","emailInput":"Edit3567699263__emailInput"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/EditableTable/cellTypes/email/Edit.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { Input, Box } from '@wix/design-system';
+import type { CellEditProps } from '../../types';
+import { classes } from './Edit.st.css.js';
+
+export const EmailEdit: React.FC<CellEditProps<string>> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+}) => {
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        onCommit();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        onCancel();
+      }
+    },
+    [onCommit, onCancel],
+  );
+
+  const handleBlur = useCallback(() => {
+    onCommit();
+  }, [onCommit]);
+
+  return (
+    <Box width="100%" height="100%" verticalAlign="middle">
+      <Input
+        ref={inputRef}
+        size="small"
+        border="none"
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        type="email"
+        autoSelect={false}
+        className={classes.emailInput}
+      />
+    </Box>
+  );
+};