@wix/patterns 1.467.0 → 1.469.0

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "SkeletonCard4266768508";
+var _namespace_ = "SkeletonCard1353692677";
 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":"SkeletonCard4266768508__root","headerLoading":"SkeletonCard4266768508__headerLoading"};
+export var classes = {"root":"SkeletonCard1353692677__root","headerLoading":"SkeletonCard1353692677__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_ = "SlidingModal1237452183";
+var _namespace_ = "SlidingModal3699716134";
 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":"SlidingModal1237452183__root"};
+export var classes = {"root":"SlidingModal3699716134__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/Table/AddFieldColumnHeader.st.css

@@ -1,36 +1,59 @@
-.root {
-  display: inline-flex;
-  align-items: center;
+@property st-global(--wds-space-150);
+@property st-global(--wds-popover-fill);
+@property st-global(--wds-popover-border-width);
+@property st-global(--wds-popover-border-radius);
+@property st-global(--wds-shadow-surface-overlay);
+@property st-global(--wds-background-blur-surface-overlay);
+
+/* Non-resizable WDS headers have no positioning context. Sticky headers
+   already provide one and must keep their sticky positioning. */
+:global(th:not([data-sticky='true'])):has(.anchorLayer) {
+  position: relative;
+}
+
+.anchorLayer {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.anchorLayer > .popover {
+  display: grid;
   width: 100%;
-  min-width: 0;
+  height: 100%;
+}
+
+.popover {
+  --wds-popover-fill: transparent;
+  --wds-popover-border-width: 0;
+  --wds-popover-border-radius: 0;
+  --wds-shadow-surface-overlay: none;
+  --wds-background-blur-surface-overlay: 0px;
 }
 
 .title {
   display: flex;
+  align-items: center;
+  box-sizing: content-box;
   width: 100%;
   min-width: 0;
+  /* Cover WDS's block padding without changing the header's layout height. */
+  min-height: 24px;
+  margin-block: calc(-1 * var(--wds-space-150, 9px));
+  padding-block: var(--wds-space-150, 9px);
 }
 
 /* Invisible hit-area around the IconButton so the cursor can travel from the
-   title up to the button without leaving the hover area (interactive=true
-   keeps the popover open while hovering the content). padding-bottom matches
-   moveBy.y so the bridge reaches the title's top edge. */
+   title to the button without leaving the hover area (interactive=true keeps
+   the popover open while hovering the content). */
 .hoverBridge {
+  -st-states: side(enum(left, right));
   display: inline-block;
-  padding: 4px 13px 4px 4px;
+  padding: 4px;
   background: transparent;
+  transform: translate(50%, -50%);
 }
 
-/* Popover content is portaled to <body> via appendTo="window", so it isn't a
-   descendant of the trigger. WDS sets data-content-element on the portaled
-   element to a unique id that includes our dataHook ("add-field-popover"),
-   so we link to it that way. */
-:global(
-    [data-content-element^='popover-content-add-field-popover-'][data-hook='popover-content'][class]
-  ) {
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  border-radius: 0;
-  padding: 0;
+.hoverBridge:side(left) {
+  transform: translate(-50%, -50%);
 }

package/src/components/Table/AddFieldColumnHeader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AddFieldColumnHeader1088053720";
+var _namespace_ = "AddFieldColumnHeader3342868055";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AddFieldColumnHeader1088053720__root","title":"AddFieldColumnHeader1088053720__title","hoverBridge":"AddFieldColumnHeader1088053720__hoverBridge"};
+export var classes = {"root":"AddFieldColumnHeader3342868055__root","anchorLayer":"AddFieldColumnHeader3342868055__anchorLayer","popover":"AddFieldColumnHeader3342868055__popover","title":"AddFieldColumnHeader3342868055__title","hoverBridge":"AddFieldColumnHeader3342868055__hoverBridge"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {}; 
+export var vars = {"wds-space-150":"--wds-space-150","wds-popover-fill":"--wds-popover-fill","wds-popover-border-width":"--wds-popover-border-width","wds-popover-border-radius":"--wds-popover-border-radius","wds-shadow-surface-overlay":"--wds-shadow-surface-overlay","wds-background-blur-surface-overlay":"--wds-background-blur-surface-overlay"}; 
 
 
 

package/src/components/Table/AddFieldColumnHeader.tsx

@@ -1,65 +1,114 @@
-import React, { ReactNode, useContext, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { IconButton, Popover } from '@wix/design-system';
 import { Add } from '@wix/wix-ui-icons-common/lazy';
-import { ToolbarCollectionContext } from '../ToolbarCollectionContext';
-import { classes } from './AddFieldColumnHeader.st.css.js';
+import { observer } from 'mobx-react-lite';
+import { classes, st } from './AddFieldColumnHeader.st.css.js';
+import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
 
 export interface AddFieldColumnHeaderProps {
   children: ReactNode;
+  /** This column's id. The right border inserts after it. */
+  columnId: string;
 }
 
-export const AddFieldColumnHeader = ({
-  children,
-}: AddFieldColumnHeaderProps) => {
-  const collectionFieldsSource = useContext(
-    ToolbarCollectionContext,
-  )?.collectionFieldsSource;
-  // TODO: fix when the schema source exposes the CMS modal
-  const customColumnAddField = collectionFieldsSource?.fieldsSource
-    .fieldManagement?.canAddFields
-    ? () =>
-        collectionFieldsSource.openFieldModal({
-          origin: 'Custom columns panel',
-        })
-    : undefined;
-  const [hovered, setHovered] = useState(false);
+type Side = 'left' | 'right';
 
-  if (!collectionFieldsSource) {
-    return <>{children}</>;
-  }
+export const AddFieldColumnHeader = observer(
+  ({ children, columnId }: AddFieldColumnHeaderProps) => {
+    const toolbar = useToolbarCollectionContext();
+    const [side, setSide] = useState<Side>('right');
+    const [isButtonShown, setIsButtonShown] = useState(false);
 
-  return (
-    <Popover
-      shown={hovered}
-      appendTo="window"
-      placement="top-start"
-      moveBy={{ x: -27, y: -47 }}
-      interactive
-      fluid
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      className={classes.root}
-      dataHook="add-field-popover"
-    >
-      <Popover.Element>
-        <span className={classes.title}>{children}</span>
-      </Popover.Element>
-      <Popover.Content>
-        <span className={classes.hoverBridge}>
-          <IconButton
-            size="tiny"
-            skin="standard"
-            priority="secondary"
-            dataHook="add-field-column-header-button"
-            onClick={(e) => {
-              e.stopPropagation();
-              customColumnAddField?.();
-            }}
+    const collectionFieldsSource = toolbar?.collectionFieldsSource;
+
+    if (!collectionFieldsSource?.fieldsSource.fieldManagement?.canAddFields) {
+      return <>{children}</>;
+    }
+
+    if (toolbar.columnSizesState?.isResizing) {
+      return <>{children}</>;
+    }
+
+    // TODO: fix when the schema source exposes the CMS modal
+    const customColumnAddField = () => {
+      const columns = toolbar.selectedOrderedColumnsOrAll;
+      const index = columns.findIndex((c) => c.id === columnId);
+      const afterColumnId =
+        side === 'left'
+          ? columns
+              .slice(0, Math.max(index, 0))
+              .reverse()
+              .find((c) => c.id != null)?.id ?? null
+          : columnId;
+
+      toolbar.customColumnsState?.setPendingInsertPosition(afterColumnId);
+      collectionFieldsSource.openFieldModal({
+        origin: 'Table column header',
+      });
+    };
+
+    const handleMouseMove = (event: React.MouseEvent<HTMLSpanElement>) => {
+      const { left, width } = event.currentTarget.getBoundingClientRect();
+
+      setSide(event.clientX < left + width / 2 ? 'left' : 'right');
+      setIsButtonShown(true);
+    };
+
+    return (
+      <>
+        <span
+          className={classes.title}
+          data-hook="add-field-column-header-title"
+          onMouseMove={handleMouseMove}
+          onMouseLeave={() => setIsButtonShown(false)}
+        >
+          {children}
+        </span>
+        <span className={classes.anchorLayer}>
+          <Popover
+            shown={isButtonShown}
+            appendTo="window"
+            placement={side === 'left' ? 'bottom-start' : 'bottom-end'}
+            hideDelay={200}
+            flip={false}
+            // Turns off popper's preventOverflow, which otherwise pulls the button
+            // back inside the boundary and off the border it should sit on.
+            fixed
+            interactive
+            className={classes.popover}
+            dataHook="add-field-popover"
           >
-            <Add />
-          </IconButton>
+            <Popover.Element>
+              <span aria-hidden />
+            </Popover.Element>
+            <Popover.Content>
+              <span
+                className={st(classes.hoverBridge, { side })}
+                data-hook="add-field-column-header"
+                data-side={side}
+                onMouseEnter={() => setIsButtonShown(true)}
+                onMouseLeave={() => setIsButtonShown(false)}
+              >
+                <IconButton
+                  ariaLabel={toolbar.container.translate(
+                    'cairo.customFields.addCustomField.CTA',
+                  )}
+                  size="tiny"
+                  skin="dark"
+                  priority="secondary"
+                  dataHook="add-field-column-header-button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    customColumnAddField();
+                  }}
+                >
+                  <Add />
+                </IconButton>
+              </span>
+            </Popover.Content>
+          </Popover>
         </span>
-      </Popover.Content>
-    </Popover>
-  );
-};
+      </>
+    );
+  },
+);

package/src/components/Table/AddFieldColumnHeader.uni.driver.ts

@@ -0,0 +1,33 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { IconButtonUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+
+export function AddFieldColumnHeaderUniDriver(
+  base: UniDriver,
+  body: UniDriver,
+) {
+  const bridge = body.$('[data-hook="add-field-column-header"]');
+  const addButton = body.$('[data-hook="add-field-column-header-button"]');
+
+  return {
+    ...baseUniDriverFactory(base),
+
+    /**
+     * Moves the pointer over the column title, which is what reveals the
+     * button. The border it lands on comes from where the pointer is across
+     * the title, so only a laid-out browser can produce a left one.
+     */
+    hoverTitle: () => base.mouse.moveTo(base),
+
+    /** The border the button sits on: "left" or "right". */
+    getSide: () => bridge.attr('data-side'),
+
+    addButtonExists: () => addButton.exists(),
+
+    getAddButtonLabel: () => addButton.attr('aria-label'),
+
+    clickAddButton: () => IconButtonUniDriver(addButton, body).click(),
+  };
+}
+
+export default AddFieldColumnHeaderUniDriver;

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "TabsFilter560065561";
+var _namespace_ = "TabsFilter1621023237";
 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":"TabsFilter560065561__root","titleBox":"TabsFilter560065561__titleBox"};
+export var classes = {"root":"TabsFilter1621023237__root","titleBox":"TabsFilter1621023237__titleBox"};
 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_ = "ManageTagsModal17622325";
+var _namespace_ = "ManageTagsModal2882622398";
 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":"ManageTagsModal17622325__root"};
+export var classes = {"root":"ManageTagsModal2882622398__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_ = "ToolbarItem1298306547";
+var _namespace_ = "ToolbarItem1460566793";
 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":"ToolbarItem1298306547__root"};
+export var classes = {"root":"ToolbarItem1460566793__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_ = "ToolbarItemBox3970639897";
+var _namespace_ = "ToolbarItemBox3952381993";
 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":"ToolbarItemBox3970639897__root"};
+export var classes = {"root":"ToolbarItemBox3952381993__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_ = "common1871939312";
+var _namespace_ = "common1675353889";
 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":"common1871939312__root","column":"common1871939312__column","fullHeight":"common1871939312__fullHeight"};
+export var classes = {"root":"common1675353889__root","column":"common1675353889__column","fullHeight":"common1675353889__fullHeight"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/hooks/useCollectionTableResize.ts

@@ -36,7 +36,12 @@ export function useCollectionTableResize({
     ? {
         ...userResizeProps,
         minColumnWidth: userResizeProps?.minColumnWidth ?? 74,
+        onColumnResizeStart(columnId, startWidth, event) {
+          columnSizesState?.setResizing(true);
+          userResizeProps?.onColumnResizeStart?.(columnId, startWidth, event);
+        },
         onColumnResizeEnd(columnId, endWidth, event) {
+          columnSizesState?.setResizing(false);
           columnSizesState?.updateColumnWidth(columnId, Number(endWidth));
           userResizeProps?.onColumnResizeEnd?.(columnId, endWidth, event);
         },

package/src/hooks/useCreateWSRColumnBase.tsx

@@ -76,13 +76,15 @@ export function useCreateWSRColumnBase({
       const hasTitleText =
         typeof title === 'string' ? title.trim().length > 0 : Boolean(title);
       const wrapWithAddField =
-        showAddFieldButton && id !== 'avatar' && hasTitleText;
+        showAddFieldButton && id != null && id !== 'avatar' && hasTitleText;
 
       return {
         id,
         key: id ?? index,
         title: wrapWithAddField ? (
-          <AddFieldColumnHeader>{renderedTitle}</AddFieldColumnHeader>
+          <AddFieldColumnHeader columnId={id}>
+            {renderedTitle}
+          </AddFieldColumnHeader>
         ) : (
           renderedTitle
         ),

package/src/index.ts

@@ -185,6 +185,7 @@ export {
   type EditableCellContextMenuActionConfig,
   type EditableCellContextMenuActionContext,
   type TableCellConfig,
+  type TableCellProps,
   type CellViewProps,
   type CellEditProps,
   type CellEditWrapperProps,

package/src/schema/EntityPageFieldsCard.tsx

@@ -21,7 +21,8 @@ export interface EntityPageFieldsCardProps
   title: string;
   subtitle?: string;
   /**
-   * Field ids to offer, in order. Omitted ⇒ every editable schema field.
+   * Field ids to offer, in order. Omitted ⇒ every schema field; system fields
+   * and the id field show their value read-only and can be hidden.
    * Read once, on the first render — a later change is ignored, since the saved
    * show/hide and order are keyed to the list the card started with.
    */

package/src/state/CollectionFieldsSourceState.ts

@@ -258,6 +258,8 @@ export class CollectionFieldsSourceState {
     this.initTask.runOnce(() => this.fieldsSource.load());
     this.initTask.status.promise?.catch(() => this.handleLoadError());
 
+    const { modal } = this.customFieldsPanel.customFieldModal.modalState;
+
     const disposers = [
       // Push the columns once the source loads, and again whenever the field
       // list changes (add/edit/delete field). The first push starts every
@@ -275,6 +277,16 @@ export class CollectionFieldsSourceState {
         () => this.registerFilters(),
         { fireImmediately: true },
       ),
+      // Dismissing the modal doesn't cancel an in-flight field creation.
+      // Keep its position until the request finishes, including on failure.
+      reaction(
+        () => !modal.isOpen && !modal.confirming.isLoading,
+        (isClosedAndSettled) => {
+          if (isClosedAndSettled) {
+            this.toolbar.customColumnsState?.clearPendingInsertPosition();
+          }
+        },
+      ),
       // Make custom-columns storage reconciliation wait until this source's
       // columns are built, so a stored hide/show selection for source fields
       // survives a reload. Covers any source.

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

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

package/src/state/ColumnSizesState.ts

@@ -1,6 +1,6 @@
 import { DataCapsule, TaskState, WixPatternsContainer } from '@wix/bex-core';
 import { ColumnSizesService } from '../services';
-import { makeObservable, observable, runInAction } from 'mobx';
+import { action, makeObservable, observable, runInAction } from 'mobx';
 import { Column } from '../model';
 
 export interface ColumnSizesStateParams {
@@ -15,6 +15,7 @@ export class ColumnSizesState {
 
   readonly initTask = new TaskState();
   columnWidths: Record<string, number> | undefined = undefined;
+  isResizing = false;
 
   constructor(params: ColumnSizesStateParams) {
     this.container = params.container;
@@ -27,9 +28,15 @@ export class ColumnSizesState {
 
     makeObservable(this, {
       columnWidths: observable.ref,
+      isResizing: observable.ref,
+      setResizing: action,
     });
   }
 
+  setResizing(isResizing: boolean) {
+    this.isResizing = isResizing;
+  }
+
   init() {
     this.initTask.runOnce(async () => {
       const data = await this.columnSizeService.fetchColumnSizes();

package/src/state/CustomColumnsEntityPageState.ts

@@ -9,8 +9,10 @@ import type { ManageFieldsSource } from './ManageFieldsSource';
 import type { CustomColumnsDragAndDrop } from '../components/CustomColumns/CustomColumnsDragAndDrop';
 import type { CustomColumnsDragAndDropState } from './CustomColumnsDragAndDropState';
 import type { Field, SchemaConfig } from '../types/SchemaConfig';
+import { isEntityPageFieldHideable } from './EntityPage/resolveEntityPageFields';
 
-type SchemaFields = Pick<SchemaConfig, 'id' | 'fields'>;
+type SchemaFields = Pick<SchemaConfig, 'id' | 'fields'> &
+  Partial<Pick<SchemaConfig, 'idField'>>;
 
 export interface CustomColumnsEntityPageStateParams {
   panels: SidePanelsState;
@@ -139,9 +141,10 @@ export class CustomColumnsEntityPageState extends CustomColumnsPanelStateBase {
         if (!field) {
           return null;
         }
-        const isRequired = field.validation?.required === true;
-        const hideable = !isRequired;
-        return fieldToColumn(field, hideable);
+        return fieldToColumn(
+          field,
+          isEntityPageFieldHideable(field, this.schema?.idField),
+        );
       })
       .filter(Boolean) as Column[];
   }