@vuu-ui/vuu-layout 0.0.27 → 0.5.4

package/src/layout-provider/useLayoutDragDrop.ts

@@ -35,11 +35,11 @@ const getDragElement = (
 ): [HTMLElement, string, number, number] => {
   const wrapper = document.createElement("div");
   wrapper.className = "vuuSimpleDraggableWrapper";
-  // TODO caller needs to supply the uitk classes
+  // TODO caller needs to supply the salt classes
   wrapper.classList.add(
     "vuuSimpleDraggableWrapper",
-    "uitk-theme",
-    "uitk-density-medium"
+    "salt-theme",
+    "salt-density-medium"
   );
   wrapper.dataset.dragging = "true";
 

package/src/layout-view/View.css

@@ -1,8 +1,11 @@
 .vuuView {
-  border: var(--vuuView-border, solid 1px var(--uitk-container-borderColor-medium));
+  border-color: var(--vuuView-borderColor, var(--salt-container-primary-borderColor));
+  border-width: var(--vuuView-borderWidth, 1px);
+  border-style: var(--vuuView-borderStyle, none);
+
   display: flex;
   flex-direction: column;
-  margin: var(--vuuView-margin, 3px);
+  margin: var(--vuuView-margin, 0px);
   min-height: 50px;
   min-width: 50px;
   outline: none;

package/src/layout-view/View.tsx

@@ -1,4 +1,4 @@
-import { useForkRef, useIdMemo as useId } from "@heswell/uitk-core";
+import { useForkRef, useIdMemo as useId } from "@salt-ds/core";
 import cx from "classnames";
 import React, { ForwardedRef, forwardRef, useMemo, useRef } from "react";
 import { Header } from "../layout-header/Header";

package/src/layout-view/useViewResize.ts

@@ -1,4 +1,4 @@
-import { useResizeObserver, WidthHeight } from "@heswell/uitk-core";
+import { useResizeObserver, WidthHeight } from "@heswell/salt-lab";
 import { RefObject, useCallback, useRef } from "react";
 
 const NO_MEASUREMENT: string[] = [];

package/src/menu/ContextMenu.css

@@ -0,0 +1,22 @@
+.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

@@ -0,0 +1,121 @@
+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

@@ -0,0 +1,150 @@
+.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

@@ -0,0 +1,179 @@
+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;

package/src/menu/aim/aim.js

@@ -0,0 +1,92 @@
+import findCorners, { boundaries } from './corners';
+import pointInPolygon from './point-in-polygon';
+
+export function distance(source, target) {
+  const a = source.x - target.x;
+  const b = source.y - target.y;
+  return Math.sqrt(a * a + b * b);
+}
+
+export function side(corners) {
+  if (corners[0] === 'top-right' && corners[1] === 'bottom-right') return 'right';
+  else if (corners[0] === 'top-left' && corners[1] === 'bottom-right') return 'top-right';
+  else if (corners[0] === 'top-left' && corners[1] === 'top-right') return 'top';
+  else if (corners[0] === 'bottom-left' && corners[1] === 'top-right') return 'top-left';
+  else if (corners[0] === 'bottom-left' && corners[1] === 'top-left') return 'left';
+  else if (corners[0] === 'bottom-right' && corners[1] === 'top-left') return 'bottom-left';
+  else if (corners[0] === 'bottom-right' && corners[1] === 'bottom-left') return 'bottom';
+  else if (corners[0] === 'top-right' && corners[1] === 'bottom-left') return 'bottom-right';
+}
+
+export function bullseye(corners, boundaries, mousePosition) {
+  switch (side(corners)) {
+    case 'right':
+      return {
+        x: boundaries[0].x,
+        y: mousePosition.y
+      };
+    case 'top-right':
+      return {
+        x: boundaries[1].x,
+        y: boundaries[0].y
+      };
+    case 'top':
+      return {
+        x: mousePosition.x,
+        y: boundaries[0].y
+      };
+    case 'top-left':
+      return {
+        x: boundaries[0].x,
+        y: boundaries[1].y
+      };
+    case 'left':
+      return {
+        x: boundaries[0].x,
+        y: mousePosition.y
+      };
+    case 'bottom-left':
+      return {
+        x: boundaries[1].x,
+        y: boundaries[0].y
+      };
+    case 'bottom':
+      return {
+        x: mousePosition.x,
+        y: boundaries[0].y
+      };
+    case 'bottom-right':
+      return {
+        x: boundaries[0].x,
+        y: boundaries[1].y
+      };
+  }
+}
+
+function formatPoints(points) {
+  const finalPoints = [];
+  for (let i = 0, len = points.length; i < len; ++i) {
+    finalPoints.push([points[i].x, points[i].y]);
+  }
+  return finalPoints;
+}
+
+export function aiming(e, mousePosition, prevMousePosition, target, alreadyAiming) {
+  if (!prevMousePosition) return false;
+  else if (
+    !alreadyAiming &&
+    mousePosition.x === prevMousePosition.x &&
+    mousePosition.y === prevMousePosition.y
+  ) {
+    return false;
+  }
+
+  const corners = findCorners(e, target);
+  const bound = boundaries(corners, prevMousePosition, target);
+
+  if (pointInPolygon([mousePosition.x, mousePosition.y], formatPoints(bound))) {
+    const dist = Math.round(distance(mousePosition, bullseye(corners, bound, mousePosition)));
+    return Math.max(dist, 1);
+  }
+  return false;
+}