@vuu-ui/vuu-layout 0.5.4 → 0.5.5

package/src/layout-view/useViewActionDispatcher.ts

@@ -1,133 +0,0 @@
-import {
-  ReactElement,
-  RefObject,
-  SyntheticEvent,
-  useCallback,
-  useState,
-} from "react";
-import { useLayoutProviderDispatch } from "../layout-provider";
-import { DragStartAction } from "../layout-reducer";
-import { ViewDispatch } from "./ViewContext";
-import { ViewAction } from "./viewTypes";
-import { usePersistentState } from "../use-persistent-state";
-import { DataSource } from "@vuu-ui/vuu-data";
-
-export type Contribution = {
-  index?: number;
-  location?: string;
-  content: ReactElement;
-};
-
-export const useViewActionDispatcher = (
-  id: string,
-  root: RefObject<HTMLDivElement>,
-  viewPath?: string,
-  dropTargets?: string[]
-): [ViewDispatch, Contribution[] | undefined] => {
-  const { loadSessionState, purgeSessionState, purgeState, saveSessionState } =
-    usePersistentState();
-
-  const [contributions, setContributions] = useState<Contribution[]>(
-    loadSessionState(id, "contributions") ?? []
-  );
-  const dispatchLayoutAction = useLayoutProviderDispatch();
-  const updateContributions = useCallback(
-    (location: string, content: ReactElement) => {
-      const updatedContributions = contributions.concat([
-        { location, content },
-      ]);
-      saveSessionState(id, "contributions", updatedContributions);
-      setContributions(updatedContributions);
-    },
-    [contributions, id, saveSessionState]
-  );
-
-  const clearContributions = useCallback(() => {
-    purgeSessionState(id, "contributions");
-    setContributions([]);
-  }, [id, purgeSessionState]);
-
-  const handleRemove = useCallback(() => {
-    // TODO this requires a bit more thought. I works BECAUSE filteredGrid has
-    // stored its datasource in sessionState. It is highly pretty much a
-    // requirement for features to do so - how do we enforce it.
-    const ds = loadSessionState(id, "data-source") as DataSource;
-    if (ds) {
-      ds.unsubscribe();
-    }
-    purgeSessionState(id);
-    purgeState(id);
-    dispatchLayoutAction({ type: "remove", path: viewPath });
-  }, [
-    dispatchLayoutAction,
-    id,
-    loadSessionState,
-    purgeSessionState,
-    purgeState,
-    viewPath,
-  ]);
-
-  const handleMouseDown = useCallback(
-    async (evt, index, preDragActivity): Promise<boolean> => {
-      evt.stopPropagation();
-      const dragRect = root.current?.getBoundingClientRect();
-      return new Promise((resolve, reject) => {
-        // TODO should we check if we are allowed to drag ?
-        dispatchLayoutAction({
-          type: "drag-start",
-          evt,
-          path: index === undefined ? viewPath : `${viewPath}.${index}`,
-          dragRect,
-          preDragActivity,
-          dropTargets,
-          resolveDragStart: resolve,
-          rejectDragStart: reject,
-        } as DragStartAction);
-      });
-    },
-    [root, dispatchLayoutAction, viewPath, dropTargets]
-  );
-
-  // TODO should be event, action, then this method can bea assigned directly to a html element
-  // as an event hander
-  const dispatchAction = useCallback(
-    async <A extends ViewAction = ViewAction>(
-      action: A,
-      evt?: SyntheticEvent
-    ): Promise<boolean | void> => {
-      const { type } = action;
-      switch (type) {
-        case "maximize":
-        case "minimize":
-        case "restore":
-          // case Action.TEAR_OUT:
-          return dispatchLayoutAction({ type, path: action.path ?? viewPath });
-        case "remove":
-          return handleRemove();
-        case "mousedown":
-          console.log("2) ViewActionDispatch Hook dispatch Action mousedown");
-          return handleMouseDown(evt, action.index, action.preDragActivity);
-        case "add-toolbar-contribution":
-          return updateContributions(action.location, action.content);
-        case "remove-toolbar-contribution":
-          return clearContributions();
-        default: {
-          // if (Object.values(Action).includes(type)) {
-          //   dispatch(action);
-          // }
-          return undefined;
-        }
-      }
-    },
-    [
-      dispatchLayoutAction,
-      viewPath,
-      handleRemove,
-      handleMouseDown,
-      updateContributions,
-      clearContributions,
-    ]
-  );
-
-  return [dispatchAction, contributions];
-};

package/src/layout-view/useViewResize.ts

@@ -1,53 +0,0 @@
-import { useResizeObserver, WidthHeight } from "@heswell/salt-lab";
-import { RefObject, useCallback, useRef } from "react";
-
-const NO_MEASUREMENT: string[] = [];
-
-type size = {
-  height?: number;
-  width?: number;
-};
-
-export interface ViewResizeHookProps {
-  mainRef: RefObject<HTMLDivElement>;
-  resize?: "defer" | "responsive";
-  rootRef: RefObject<HTMLDivElement>;
-}
-
-export const useViewResize = ({
-  mainRef,
-  resize = "responsive",
-  rootRef,
-}: ViewResizeHookProps) => {
-  const deferResize = resize === "defer";
-
-  const mainSize = useRef<size>({});
-  const resizeHandle = useRef<number>();
-
-  const setMainSize = useCallback(() => {
-    if (mainRef.current) {
-      mainRef.current.style.height = mainSize.current.height + "px";
-      mainRef.current.style.width = mainSize.current.width + "px";
-    }
-    resizeHandle.current = undefined;
-  }, []);
-
-  const onResize = useCallback(
-    ({ height, width }) => {
-      mainSize.current.height = height;
-      mainSize.current.width = width;
-      if (resizeHandle.current !== null) {
-        clearTimeout(resizeHandle.current);
-      }
-      resizeHandle.current = window.setTimeout(setMainSize, 40);
-    },
-    [setMainSize]
-  );
-
-  useResizeObserver(
-    rootRef,
-    deferResize ? WidthHeight : NO_MEASUREMENT,
-    onResize,
-    deferResize
-  );
-};

package/src/layout-view/viewTypes.ts

@@ -1,37 +0,0 @@
-import { HTMLAttributes } from "react";
-import { HeaderProps } from "../layout-header";
-import {
-  MaximizeAction,
-  MinimizeAction,
-  MousedownViewAction,
-  RemoveAction,
-  RestoreAction,
-  TearoutAction,
-  AddToolbarContributionViewAction,
-  RemoveToolbarContributionViewAction,
-} from "../layout-reducer";
-
-export type ViewAction =
-  | MaximizeAction
-  | MinimizeAction
-  | MousedownViewAction
-  | RemoveAction
-  | RestoreAction
-  | TearoutAction
-  | AddToolbarContributionViewAction
-  | RemoveToolbarContributionViewAction;
-
-export interface ViewProps extends HTMLAttributes<HTMLDivElement> {
-  closeable?: boolean;
-  collapsed?: boolean;
-  "data-resizeable"?: boolean;
-  dropTargets?: string[];
-  expanded?: boolean;
-  flexFill?: any;
-  header?: boolean | Partial<HeaderProps>;
-  orientation?: "vertical" | "horizontal";
-  path?: string;
-  resize?: "defer" | "responsive";
-  resizeable?: boolean;
-  tearOut?: boolean;
-}

package/src/menu/ContextMenu.css

@@ -1,22 +0,0 @@
-.hwPopupContainer.top-bottom-right-right .popup-menu {
-  left: auto;
-  right: 0;
-}
-
-.popup-menu .menu-item.showing > button,
-.popup-menu .menu-item > button:focus,
-.popup-menu .menu-item > button:hover {
-  text-decoration: none;
-  color: rgb(0, 0, 0);
-  background-color: rgb(220, 220, 220);
-}
-
-.popup-menu .menu-item.disabled > button {
-  clear: both;
-  font-weight: normal;
-  line-height: 1.5;
-  color: rgb(120, 120, 120);
-  white-space: nowrap;
-  text-decoration: none;
-  cursor: default;
-}

package/src/menu/ContextMenu.jsx

@@ -1,121 +0,0 @@
-import { useIdMemo as useId } from "@salt-ds/core";
-import { useCallback, useRef } from "react";
-import { Portal } from "../portal";
-
-import { getItemId, getMenuId, useCascade } from "./use-cascade";
-import { useItemsWithIds } from "./use-items-with-ids";
-
-import MenuList from "./MenuList";
-
-import "./ContextMenu.css";
-import { useClickAway } from "./use-click-away";
-
-const ContextMenu = ({
-  activatedWithKeyboard = false,
-  children: childrenProp,
-  id: idProp,
-  onClose = () => undefined,
-  position = { x: 0, y: 0 },
-  source: sourceProp,
-  style,
-}) => {
-  const id = useId(idProp);
-  const closeMenuRef = useRef(null);
-  const [menus, actions] = useItemsWithIds(sourceProp, childrenProp);
-  const navigatingWithKeyboard = useRef(activatedWithKeyboard);
-  const handleMouseEnterItem = useCallback(() => {
-    navigatingWithKeyboard.current = false;
-  }, []);
-
-  const handleActivate = useCallback(
-    (menuId) => {
-      const { action, options } = actions[menuId];
-      closeMenuRef.current("root");
-      onClose(action, options);
-    },
-    [actions, onClose]
-  );
-
-  const { closeMenu, listItemProps, openMenu, openMenus, handleRender } =
-    useCascade({
-      id,
-      onActivate: handleActivate,
-      onMouseEnterItem: handleMouseEnterItem,
-      position,
-    });
-  closeMenuRef.current = closeMenu;
-
-  console.log({ openMenus });
-
-  const handleClose = useCallback(() => {
-    closeMenu();
-    onClose();
-  }, [closeMenu, onClose]);
-
-  useClickAway({
-    containerClassName: "hwMenuList",
-    onClose: handleClose,
-    isOpen: openMenus.length > 0,
-  });
-
-  const handleOpenMenu = (id) => {
-    const itemId = getItemId(id);
-    const menuId = getMenuId(itemId);
-    navigatingWithKeyboard.current = true;
-    openMenu(menuId, itemId);
-  };
-  const handleCloseMenu = () => {
-    navigatingWithKeyboard.current = true;
-    closeMenu();
-  };
-
-  const handleHighlightMenuItem = () => {
-    // console.log(`highlight ${idx}`);
-  };
-
-  const lastMenu = openMenus.length - 1;
-
-  const getChildMenuIndex = (i) => {
-    if (i >= lastMenu) {
-      return -1;
-    } else {
-      const { id: menuId } = openMenus[i + 1];
-      const pos = menuId.lastIndexOf(".");
-      const idx =
-        pos === -1 ? parseInt(menuId, 10) : parseInt(menuId.slice(-pos), 10);
-      return idx;
-    }
-  };
-
-  return (
-    <>
-      {openMenus.map(({ id: menuId, left, top }, i) => {
-        const childMenuIndex = getChildMenuIndex(i);
-
-        return (
-          <Portal key={i} x={left} y={top} onRender={handleRender}>
-            <MenuList
-              activatedByKeyboard={navigatingWithKeyboard.current}
-              childMenuShowing={childMenuIndex}
-              id={id}
-              menuId={menuId}
-              isRoot={i === 0}
-              key={i}
-              listItemProps={listItemProps}
-              onActivate={handleActivate}
-              onHighlightMenuItem={handleHighlightMenuItem}
-              onCloseMenu={handleCloseMenu}
-              onOpenMenu={handleOpenMenu}
-              style={style}
-            >
-              {menus[menuId]}
-            </MenuList>
-          </Portal>
-        );
-      })}
-    </>
-  );
-};
-
-ContextMenu.displayName = "ContextMenu";
-export default ContextMenu;

package/src/menu/MenuList.css

@@ -1,150 +0,0 @@
-.hwMenuList {
-  --context-menu-color: #161616;
-  --context-menu-padding: var(--hw-list-item-padding, 0 6px);
-  --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175));
-  --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179));
-  --context-menu-highlight-bg: #a4d5f4;
-  --context-menu-blur-focus-bg: #e0e4e9;
-  --menu-item-height: var(--hw-list-item-height, 24px);
-  --menu-item-icon-color: black;
-  --menu-item-twisty-color: black;
-  --menu-item-twisty-content: '';
-  --menu-item-twisty-top: 50%;
-  --menu-item-twisty-left: auto;
-  --menu-item-twisty-right: 0px;
-  --menu-icon-size: 12px;
-
-  background-clip: padding-box;
-  background-color: white;
-  border-radius: 4px;
-  border: solid 1px rgba(0, 0, 0, 0.15);
-  box-shadow: var(--context-menu-shadow);
-  font-size: 13px;
-  list-style: none;
-  margin: 2px 0 0;
-  outline: 0;
-  padding: 0;
-  position: absolute;
-}
-
-.hwMenuItem {
-  align-items: center;
-  color: var(--context-menu-color);
-  display: flex;
-  gap: 6px;
-  height: var(--menu-item-height);
-  padding: var(--context-menu-padding);
-  padding-right: 24px;
-  position: relative;
-  white-space: nowrap;
-}
-
-.hwIconContainer {
-  display: inline-block;
-  flex: 12px 0 0;
-  height: var(--menu-icon-size);
-  mask-repeat: no-repeat;
-  width: var(--menu-icon-size);
-}
-
-[data-icon='filter'] {
-  --menu-icon-size: 12px;
-  --menu-icon: var(--svg-filter);
-}
-
-[data-icon='filter'] {
-  --menu-icon: var(--svg-filter);
-}
-
-[data-icon='sort'] {
-  --menu-icon: var(--svg-sort-order-down);
-}
-
-[data-icon='sorted-asc'] {
-  --menu-icon: var(--svg-sorted-asc);
-}
-
-[data-icon='sorted-dsc'] {
-  --menu-icon: var(--svg-sorted-dsc);
-}
-
-[data-icon] > .hwIconContainer {
-  background-color: var(--menu-item-icon-color);
-  -webkit-mask: var(--menu-icon) center center/var(--menu-icon-size) var(--menu-icon-size);
-  mask: var(--menu-icon) center center/var(--menu-icon-size) var(--menu-icon-size);
-}
-
-.hwMenuItem[aria-expanded='true'] {
-  background-color: var(--context-menu-blur-focus-bg);
-}
-
-.hwMenuItem-separator {
-  border-top: solid 1px var(--context-menu-blur-focus-bg);
-}
-
-.hwMenuItem[aria-haspopup='true']:after {
-  content: var(--menu-item-twisty-content);
-  -webkit-mask: var(--svg-chevron-right) center center/12px 12px;
-  mask: var(--svg-chevron-down) center center/12px 12px;
-  mask-repeat: no-repeat;
-  background-color: var(--menu-item-twisty-color);
-  height: 16px;
-  left: var(--menu-item-twisty-left);
-  right: var(--menu-item-twisty-right);
-  margin-top: -8px;
-  position: absolute;
-  top: var(--menu-item-twisty-top);
-  transition: transform 0.3s;
-  width: 16px;
-}
-
-.hwMenuItem[data-highlighted] {
-  background-color: var(--context-menu-highlight-bg);
-}
-
-.hwMenuItem:hover {
-  background-color: var(--context-menu-highlight-bg);
-  cursor: default;
-}
-
-.hwMenuList-childMenuShowing .hwMenuItem[data-highlighted] {
-  background-color: var(--context-menu-blur-focus-bg);
-}
-
-.hwMenuItem.focusVisible:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0px;
-  border: dotted var(--focus-visible-border-color) 2px;
-}
-
-.hwPopupContainer.top-bottom-right-right .popup-menu {
-  left: auto;
-  right: 0;
-}
-
-.popup-menu .menu-item.showing > button,
-.popup-menu .menu-item > button:focus,
-.popup-menu .menu-item > button:hover {
-  text-decoration: none;
-  color: rgb(0, 0, 0);
-  background-color: rgb(220, 220, 220);
-}
-
-.hwMenuItem-button:active,
-.hwMenuItem-button:hover {
-  outline: 0;
-}
-
-.popup-menu .menu-item.disabled > button {
-  clear: both;
-  font-weight: normal;
-  line-height: 1.5;
-  color: rgb(120, 120, 120);
-  white-space: nowrap;
-  text-decoration: none;
-  cursor: default;
-}

package/src/menu/MenuList.jsx

@@ -1,179 +0,0 @@
-import React, { useLayoutEffect, useMemo, useRef } from "react";
-import cx from "classnames";
-import { useIdMemo as useId } from "@salt-ds/core";
-import { useKeyboardNavigation } from "./use-keyboard-navigation";
-import { isMenuItemGroup } from "./use-items-with-ids";
-
-import "./MenuList.css";
-
-const classBase = "hwMenuList";
-
-export const Separator = () => <li className="hwMenuItem-divider" />;
-
-// Purely used as markers, props will be extracted
-export const MenuItemGroup = () => null;
-// eslint-disable-next-line no-unused-vars
-export const MenuItem = ({ children, idx, ...props }) => {
-  return <div {...props}>{children}</div>;
-};
-
-const hasIcon = (child) => child.props["data-icon"];
-
-const MenuList = ({
-  activatedByKeyboard,
-  childMenuShowing = -1,
-  children,
-  highlightedIdx: highlightedIdxProp,
-  id: idProp,
-  isRoot,
-  listItemProps,
-  menuId,
-  onHighlightMenuItem,
-  onActivate,
-  onCloseMenu,
-  onOpenMenu,
-  ...props
-}) => {
-  const id = useId(idProp);
-  const root = useRef(null);
-
-  // The id generation be,ongs in useIttemsWithIds
-  const mapIdxToId = useMemo(() => new Map(), []);
-
-  const handleOpenMenu = (idx) => {
-    const el = root.current.querySelector(`:scope > [data-idx='${idx}']`);
-    onOpenMenu(el.id);
-  };
-
-  const handleActivate = (idx) => {
-    const el = root.current.querySelector(`:scope > [data-idx='${idx}']`);
-    onActivate(el.id);
-  };
-
-  const { focusVisible, highlightedIdx, listProps } = useKeyboardNavigation({
-    count: children.length,
-    highlightedIdx: highlightedIdxProp,
-    onActivate: handleActivate,
-    onHighlight: onHighlightMenuItem,
-    onOpenMenu: handleOpenMenu,
-    onCloseMenu,
-    id,
-  });
-
-  const appliedFocusVisible = childMenuShowing == -1 ? focusVisible : -1;
-
-  useLayoutEffect(() => {
-    if (childMenuShowing === -1 && activatedByKeyboard) {
-      root.current.focus();
-    }
-  }, [activatedByKeyboard, childMenuShowing]);
-
-  const getActiveDescendant = () =>
-    highlightedIdx === undefined || highlightedIdx === -1
-      ? undefined
-      : mapIdxToId.get(highlightedIdx);
-
-  return (
-    <div
-      {...props}
-      {...listProps}
-      aria-activedescendant={getActiveDescendant()}
-      className={cx(classBase, {
-        [`${classBase}-childMenuShowing`]: childMenuShowing !== -1,
-      })}
-      data-root={isRoot || undefined}
-      id={`${id}-${menuId}`}
-      ref={root}
-      role="menu"
-      tabIndex={0}
-    >
-      {renderContent()}
-    </div>
-  );
-
-  function renderContent() {
-    const propsCommonToAllListItems = {
-      ...listItemProps,
-      role: "menuitem",
-    };
-
-    const maybeIcon = (children, withIcon) =>
-      withIcon
-        ? [<span className="hwIconContainer" key="icon" />].concat(children)
-        : children;
-
-    function addClonedChild(list, child, idx, withIcon) {
-      const {
-        children,
-        className,
-        id: itemId,
-        hasSeparator,
-        label,
-        ...props
-      } = child.props;
-      const hasSubMenu = isMenuItemGroup(child);
-      const subMenuShowing = hasSubMenu && childMenuShowing === idx;
-      const ariaControls = subMenuShowing ? `${id}-${itemId}` : undefined;
-
-      list.push(
-        <MenuItem
-          {...props}
-          {...propsCommonToAllListItems}
-          {...getMenuItemProps(
-            `${id}-${menuId}`,
-            itemId,
-            idx,
-            child.key,
-            highlightedIdx,
-            appliedFocusVisible,
-            className,
-            hasSeparator
-          )}
-          aria-controls={ariaControls}
-          aria-haspopup={hasSubMenu || undefined}
-          aria-expanded={subMenuShowing || undefined}
-        >
-          {hasSubMenu
-            ? maybeIcon(label, withIcon)
-            : maybeIcon(children, withIcon)}
-        </MenuItem>
-      );
-      // mapIdxToId.set(idx, itemId);
-    }
-
-    const listItems = [];
-
-    if (children && children.length > 0) {
-      const withIcon = children.some(hasIcon);
-
-      children.forEach((child, idx) => {
-        addClonedChild(listItems, child, idx, withIcon);
-      });
-    }
-
-    return listItems;
-  }
-};
-
-const getMenuItemProps = (
-  baseId,
-  itemId,
-  idx,
-  key,
-  highlightedIdx,
-  focusVisible,
-  className,
-  hasSeparator
-) => ({
-  id: `${baseId}-${itemId}`,
-  key: key ?? idx,
-  "data-idx": idx,
-  "data-highlighted": idx === highlightedIdx || undefined,
-  className: cx("hwMenuItem", className, {
-    "hwMenuItem-separator": hasSeparator,
-    focusVisible: focusVisible === idx,
-  }),
-});
-
-MenuList.displayName = "MenuList";
-export default MenuList;