@wix/patterns 1.374.0 → 1.377.0

package/src/components/EditableTable/HeaderActionsPopover.st.css

@@ -0,0 +1,12 @@
+.root {
+  -st-states: menuOpen;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+/* Reveal when the table header cell is hovered or the menu is open */
+:global(th):hover .root,
+.root:menuOpen,
+.root:focus-within {
+  opacity: 1;
+}

package/src/components/EditableTable/{cellTypes/select/View.st.css.ts → HeaderActionsPopover.st.css.ts}

@@ -1,11 +1,11 @@
 // @ts-nocheck
 
 
-import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.js";
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "View289241894";
+var _namespace_ = "HeaderActionsPopover835706258";
 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":"View289241894__root"};
+export var classes = {"root":"HeaderActionsPopover835706258__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/HeaderActionsPopover.tsx

@@ -0,0 +1,85 @@
+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>
+  );
+}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout4168086300";
+var _namespace_ = "CellViewLayout3612497033";
 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":"CellViewLayout4168086300__root"};
+export var classes = {"root":"CellViewLayout3612497033__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_ = "Edit3735869115";
+var _namespace_ = "Edit550253640";
 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":"Edit3735869115__root","booleanEdit":"Edit3735869115__booleanEdit"};
+export var classes = {"root":"Edit550253640__root","booleanEdit":"Edit550253640__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -17,6 +17,11 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
     [onChange, onCommit],
   );
 
+  const stopClickPropagation = useCallback(
+    (e: React.MouseEvent) => e.stopPropagation(),
+    [],
+  );
+
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
       if (e.key === 'Enter') {
@@ -32,7 +37,11 @@ export const BooleanEdit: React.FC<CellEditProps<boolean>> = ({
   );
 
   return (
-    <div onKeyDown={handleKeyDown} className={classes.booleanEdit}>
+    <div
+      onKeyDown={handleKeyDown}
+      onClick={stopClickPropagation}
+      className={classes.booleanEdit}
+    >
       <CellCheckbox
         dataHook="boolean-checkbox"
         checked={!!value}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View913497453";
+var _namespace_ = "View4179032775";
 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":"View913497453__root","booleanView":"View913497453__booleanView"};
+export var classes = {"root":"View4179032775__root","booleanView":"View4179032775__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_ = "Edit313955034";
+var _namespace_ = "Edit1249065124";
 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":"Edit313955034__root","dateInput":"Edit313955034__dateInput"};
+export var classes = {"root":"Edit1249065124__root","dateInput":"Edit1249065124__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -25,7 +25,7 @@ export const DateEdit: React.FC<CellEditProps<Date | string | null>> = ({
 
   // Auto-open calendar when entering edit mode via type-to-edit
   useEffect(() => {
-    if (editTrigger === '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_ = "View2221165203";
+var _namespace_ = "View4250323581";
 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":"View2221165203__root"};
+export var classes = {"root":"View4250323581__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_ = "Edit1221715152";
+var _namespace_ = "Edit3352778691";
 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":"Edit1221715152__root","emailInput":"Edit1221715152__emailInput"};
+export var classes = {"root":"Edit3352778691__root","emailInput":"Edit3352778691__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -30,7 +30,11 @@ export const EmailEdit: React.FC<CellEditProps<string>> = ({
   return (
     <Box width="100%" height="100%" verticalAlign="middle">
       <Input
-        ref={inputRef}
+        ref={(instance) => {
+          if (inputRef) {
+            inputRef.current = instance;
+          }
+        }}
         size="small"
         border="none"
         value={value ?? ''}

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

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

package/src/components/EditableTable/cellTypes/index.ts

@@ -3,7 +3,6 @@ import { textCellType } from './text';
 import { numberCellType } from './number';
 import { booleanCellType } from './boolean';
 import { dateCellType } from './date';
-import { selectCellType } from './select';
 import { urlCellType } from './url';
 import { emailCellType } from './email';
 import { objectCellType } from './object';
@@ -13,7 +12,6 @@ export {
   numberCellType,
   booleanCellType,
   dateCellType,
-  selectCellType,
   urlCellType,
   emailCellType,
   objectCellType,
@@ -25,7 +23,6 @@ export const builtInCellTypes: CellType[] = [
   numberCellType,
   booleanCellType,
   dateCellType,
-  selectCellType,
   urlCellType,
   emailCellType,
   objectCellType,

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit2578505543";
+var _namespace_ = "Edit1556339613";
 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":"Edit2578505543__root","numberInput":"Edit2578505543__numberInput"};
+export var classes = {"root":"Edit1556339613__root","numberInput":"Edit1556339613__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -29,7 +29,11 @@ export const NumberEdit: React.FC<CellEditProps<number | null>> = ({
 
   return (
     <CellNumberInput
-      inputRef={inputRef}
+      inputRef={(instance) => {
+        if (inputRef) {
+          inputRef.current = instance;
+        }
+      }}
       size="small"
       border="none"
       value={value ?? undefined}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View1162563628";
+var _namespace_ = "View2548840183";
 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":"View1162563628__root","textView":"View1162563628__textView"};
+export var classes = {"root":"View2548840183__root","textView":"View2548840183__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_ = "Edit2006911160";
+var _namespace_ = "Edit3112699959";
 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":"Edit2006911160__root","jsonInput":"Edit2006911160__jsonInput"};
+export var classes = {"root":"Edit3112699959__root","jsonInput":"Edit3112699959__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_ = "View4156706664";
+var _namespace_ = "View1785259297";
 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":"View4156706664__root"};
+export var classes = {"root":"View1785259297__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_ = "Edit1195044413";
+var _namespace_ = "Edit1889865253";
 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":"Edit1195044413__root","selectInput":"Edit1195044413__selectInput"};
+export var classes = {"root":"Edit1889865253__root","selectInput":"Edit1889865253__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -8,6 +8,14 @@
   width: 100%;
 }
 
+/* Specific-values (autocomplete) mode */
+.inputArea input {
+  padding: 9px 12px 8px !important;
+  outline: none !important;
+  border: none !important;
+  box-sizing: border-box !important;
+}
+
 /* Strip WDS chrome from wrapper div */
 .inputArea > div {
   border: none !important;
@@ -21,6 +29,7 @@
   padding: 9px 12px 8px !important;
   outline: none !important;
   border: none !important;
+  box-sizing: border-box !important;
 }
 
 .inputArea:not(:isFocused) textarea {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit400015360";
+var _namespace_ = "Edit1726914236";
 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":"Edit400015360__root","editWrapper":"Edit400015360__editWrapper","inputArea":"Edit400015360__inputArea"};
+export var classes = {"root":"Edit1726914236__root","editWrapper":"Edit1726914236__editWrapper","inputArea":"Edit1726914236__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};