@wix/patterns 1.385.0 → 1.388.0

package/src/components/EditableTable/HeaderActionsPopover.tsx

@@ -1,85 +1,10 @@
-import React, { useState, useCallback, useRef, type ReactNode } from 'react';
-import { PopoverMenu, IconButton } from '@wix/design-system';
-import { MoreSmall } from '@wix/wix-ui-icons-common';
-import type { HeaderAction } from './headerActionTypes';
-import { st, classes } from './HeaderActionsPopover.st.css.js';
-import { useCloseOnAncestorScroll } from './useCloseOnAncestorScroll';
-
-export interface HeaderActionsPopoverProps {
-  actions: HeaderAction[][];
-  dataHook?: string;
-}
-
-export function HeaderActionsPopover({
-  actions,
-  dataHook,
-}: HeaderActionsPopoverProps) {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [popoverKey, setPopoverKey] = useState(0);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-
-  const closePopover = useCallback(() => {
-    setMenuOpen(false);
-    setPopoverKey((k) => k + 1);
-  }, []);
-
-  useCloseOnAncestorScroll(wrapperRef, closePopover, menuOpen);
-
-  const menuItems = actions
-    .filter((group) => group.length > 0)
-    .reduce<ReactNode[]>((result, group, index, array) => {
-      const items = group.map((action, i) => (
-        <PopoverMenu.MenuItem
-          key={`${index}-${i}`}
-          text={action.label}
-          onClick={action.onClick}
-          prefixIcon={action.icon}
-          disabled={action.disabled}
-          disabledDescription={action.disabledTooltip}
-          skin={action.skin}
-        />
-      ));
-      const divider =
-        index < array.length - 1
-          ? [<PopoverMenu.Divider key={`divider-${index}`} />]
-          : [];
-      return [...result, ...items, ...divider];
-    }, []);
-
-  if (menuItems.length === 0) {
-    return null;
-  }
-
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    <div
-      ref={wrapperRef}
-      className={st(classes.root, { menuOpen })}
-      data-hook={dataHook}
-      onClick={(e) => e.stopPropagation()}
-    >
-      <PopoverMenu
-        key={popoverKey}
-        dataHook={dataHook ? `${dataHook}-menu` : undefined}
-        textSize="small"
-        triggerElement={
-          <IconButton
-            size="tiny"
-            skin="dark"
-            priority="tertiary"
-            ariaLabel="Column actions"
-            dataHook={dataHook ? `${dataHook}-more-button` : undefined}
-          >
-            <MoreSmall />
-          </IconButton>
-        }
-        appendTo="window"
-        placement="bottom-end"
-        onShow={() => setMenuOpen(true)}
-        onHide={() => setMenuOpen(false)}
-      >
-        {menuItems}
-      </PopoverMenu>
-    </div>
-  );
+import React from 'react';
+import {
+  HeaderActionsPopover as SharedHeaderActionsPopover,
+  type HeaderActionsPopoverProps,
+} from '../FieldActions';
+import { classes } from './HeaderActionsPopover.st.css.js';
+
+export function HeaderActionsPopover(props: HeaderActionsPopoverProps) {
+  return <SharedHeaderActionsPopover {...props} className={classes.root} />;
 }

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout2009506538";
+var _namespace_ = "CellViewLayout2349911037";
 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":"CellViewLayout2009506538__root"};
+export var classes = {"root":"CellViewLayout2349911037__root"};
 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_ = "Edit61999194";
+var _namespace_ = "Edit4228668187";
 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":"Edit61999194__root","booleanEdit":"Edit61999194__booleanEdit"};
+export var classes = {"root":"Edit4228668187__root","booleanEdit":"Edit4228668187__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_ = "View3386812290";
+var _namespace_ = "View3992431541";
 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":"View3386812290__root","booleanView":"View3386812290__booleanView"};
+export var classes = {"root":"View3992431541__root","booleanView":"View3992431541__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_ = "Edit2661826826";
+var _namespace_ = "Edit2849733869";
 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":"Edit2661826826__root","dateInput":"Edit2661826826__dateInput"};
+export var classes = {"root":"Edit2849733869__root","dateInput":"Edit2849733869__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { DatePicker } from '@wix/design-system';
 import type { CellEditProps } from '../../types';
-import { useCloseOnAncestorScroll } from '../../useCloseOnAncestorScroll';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
 import { classes } from './Edit.st.css.js';
 
 function isValidDate(value: Date | string | null | undefined): boolean {
@@ -25,7 +25,11 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
 
   // Auto-open calendar when entering edit mode via type-to-edit
   useEffect(() => {
-    if (editTrigger && typeof editTrigger === 'object' && editTrigger.kind === 'type') {
+    if (
+      editTrigger &&
+      typeof editTrigger === 'object' &&
+      editTrigger.kind === 'type'
+    ) {
       datePickerRef.current?.openCalendar();
     }
   }, [editTrigger]);

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3864650947";
+var _namespace_ = "Edit2338156068";
 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":"Edit3864650947__root","emailInput":"Edit3864650947__emailInput"};
+export var classes = {"root":"Edit2338156068__root","emailInput":"Edit2338156068__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

package/src/components/EditableTable/cellTypes/image/View.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { ImageView as FieldsImageView } from '@wix/patterns-fields';
 import type { CellViewProps } from '../../types';
 
-export const ImageView: React.FC<CellViewProps<string | null>> = ({ value }) => (
-  <FieldsImageView value={value} dataHook="image-view" />
-);
+export const ImageView: React.FC<CellViewProps<string | null>> = ({
+  value,
+}) => <FieldsImageView value={value} dataHook="image-view" />;

package/src/components/EditableTable/cellTypes/mediaGallery/View.uni.driver.ts

@@ -5,7 +5,9 @@ export function MediaGalleryViewUniDriver(base: UniDriver, _body: UniDriver) {
   return {
     ...baseUniDriverFactory(base),
     hasAvatarGroup: () =>
-      base.$('[data-hook="media-gallery-view"] [data-hook="avatar-item"]').exists(),
+      base
+        .$('[data-hook="media-gallery-view"] [data-hook="avatar-item"]')
+        .exists(),
     isEmpty: async () => {
       const count = await base
         .$('[data-hook="media-gallery-view"]')

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2675310422";
+var _namespace_ = "Edit3198482543";
 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":"Edit2675310422__root","numberInput":"Edit2675310422__numberInput"};
+export var classes = {"root":"Edit3198482543__root","numberInput":"Edit3198482543__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2223431657";
+var _namespace_ = "View1943206141";
 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":"View2223431657__root","textView":"View2223431657__textView"};
+export var classes = {"root":"View1943206141__root","textView":"View1943206141__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit423654692";
+var _namespace_ = "Edit1103264885";
 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":"Edit423654692__root","jsonInput":"Edit423654692__jsonInput"};
+export var classes = {"root":"Edit1103264885__root","jsonInput":"Edit1103264885__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1875718792";
+var _namespace_ = "Edit1556649707";
 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":"Edit1875718792__root","selectInput":"Edit1875718792__selectInput"};
+export var classes = {"root":"Edit1556649707__root","selectInput":"Edit1556649707__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2819143298";
+var _namespace_ = "Edit4035541426";
 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":"Edit2819143298__root","editWrapper":"Edit2819143298__editWrapper","inputArea":"Edit2819143298__inputArea"};
+export var classes = {"root":"Edit4035541426__root","editWrapper":"Edit4035541426__editWrapper","inputArea":"Edit4035541426__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -6,24 +6,25 @@ import {
 } from '@wix/patterns-fields';
 import type { CellEditProps } from '../../types';
 import type { ValidationRule } from '../../../../state/EditableTable/types';
-import { useCloseOnAncestorScroll } from '../../useCloseOnAncestorScroll';
+import { useCloseOnAncestorScroll } from '../../../../hooks/useCloseOnAncestorScroll';
 import { st, classes } from './Edit.st.css.js';
 
 function getMaxLength(validation?: ValidationRule[]) {
-  return (
-    validation?.find(
-      (r): r is { type: 'maxLength'; value: number; message: string } =>
-        r.type === 'maxLength',
-    )
+  return validation?.find(
+    (r): r is { type: 'maxLength'; value: number; message: string } =>
+      r.type === 'maxLength',
   )?.value;
 }
 
 function getSpecificValues(validation?: ValidationRule[]) {
-  return (
-    validation?.find(
-      (r): r is { type: 'specificValues'; values: { id: string; value: string }[]; message: string } =>
-        r.type === 'specificValues',
-    )
+  return validation?.find(
+    (
+      r,
+    ): r is {
+      type: 'specificValues';
+      values: { id: string; value: string }[];
+      message: string;
+    } => r.type === 'specificValues',
   )?.values;
 }
 
@@ -77,7 +78,15 @@ const TextEditPlain: React.FC<CellEditProps<string>> = ({
 // Specific values mode — autocomplete with a closed list of options
 const TextEditSpecificValues: React.FC<
   CellEditProps<string> & { options: { id: string; value: string }[] }
-> = ({ value, onChange, onCommit, onCancel, inputRef, editTrigger, options }) => {
+> = ({
+  value,
+  onChange,
+  onCommit,
+  onCancel,
+  inputRef,
+  editTrigger,
+  options,
+}) => {
   const acHandle = useRef<CellAutoCompleteHandle | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
 
@@ -134,7 +143,9 @@ const TextEditSpecificValues: React.FC<
         value={value || undefined}
         options={options}
         initialSearchText={
-          editTrigger && typeof editTrigger === 'object' && editTrigger.kind === 'type'
+          editTrigger &&
+          typeof editTrigger === 'object' &&
+          editTrigger.kind === 'type'
             ? editTrigger.key
             : undefined
         }

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1290691174";
+var _namespace_ = "Edit3804783142";
 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":"Edit1290691174__root","urlInput":"Edit1290691174__urlInput"};
+export var classes = {"root":"Edit3804783142__root","urlInput":"Edit3804783142__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -39,12 +39,18 @@ export const UrlEdit: React.FC<CellEditProps<string>> = ({
       }}
     >
       <CellUrlInput
-        inputRef={inputRef as React.MutableRefObject<InputImperativeActions | null | undefined>}
+        inputRef={
+          inputRef as React.MutableRefObject<
+            InputImperativeActions | null | undefined
+          >
+        }
         value={value ?? ''}
         onChange={onChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
-        autoSelect={!(typeof editTrigger === 'object' && editTrigger?.kind === 'type')}
+        autoSelect={
+          !(typeof editTrigger === 'object' && editTrigger?.kind === 'type')
+        }
         className={classes.urlInput}
       />
     </div>

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View883440419";
+var _namespace_ = "View3203535727";
 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":"View883440419__root","textView":"View883440419__textView","urlText":"View883440419__urlText","suffix":"View883440419__suffix"};
+export var classes = {"root":"View3203535727__root","textView":"View3203535727__textView","urlText":"View3203535727__urlText","suffix":"View3203535727__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.uni.driver.ts

@@ -13,9 +13,7 @@ export function UrlViewUniDriver(base: UniDriver, body: UniDriver) {
     getValue: () => base.text(),
     hasOpenLinkButton: () => linkButton.exists(),
     getLinkHref: () =>
-      base
-        .$('[data-hook="open-link-button"]')
-        .attr('href') as Promise<string>,
+      base.$('[data-hook="open-link-button"]').attr('href') as Promise<string>,
     clickOpenLink: () => linkButton.click(),
   };
 }

package/src/components/EditableTable/useCellFocusAndEditing.ts

@@ -147,7 +147,10 @@ export function useCellFocusAndEditing<T, F extends FiltersMap>({
         }
 
         e.preventDefault();
-        cellInteraction.startEdit(undefined, undefined, { kind: 'type', key: e.key });
+        cellInteraction.startEdit(undefined, undefined, {
+          kind: 'type',
+          key: e.key,
+        });
 
         if ('value' in typeResult) {
           // Cell type provides an explicit pre-populated value (e.g. first typed