@vuu-ui/vuu-layout 0.5.4 → 0.5.5

package/src/menu/use-cascade.js

@@ -1,292 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-
-import { closestListItem, listItemIndex } from "./list-dom-utils";
-// import {mousePosition} from './aim/utils';
-// import {aiming} from './aim/aim';
-
-const nudge = (menus, distance, pos) => {
-  return menus.map((m, i) =>
-    i === menus.length - 1
-      ? {
-          ...m,
-          [pos]: m[pos] - distance,
-        }
-      : m
-  );
-};
-const nudgeLeft = (menus, distance) => nudge(menus, distance, "left");
-const nudgeUp = (menus, distance) => nudge(menus, distance, "top");
-
-const flipSides = (id, menus) => {
-  const [parentMenu, menu] = menus.slice(-2);
-  const el = document.getElementById(`${id}-${menu.id}`);
-  const { width } = el.getBoundingClientRect();
-  return menus.map((m) =>
-    m === menu
-      ? {
-          ...m,
-          left: parentMenu.left - (width - 2),
-        }
-      : m
-  );
-};
-
-const closedNode = (el) =>
-  el.ariaHasPopup === "true" && el.ariaExpanded !== "true";
-const getPosition = (el, openMenus) => {
-  const [{ left, top: menuTop }] = openMenus.slice(-1);
-  // const {top, right, bottom, left} = el.getBoundingClientRect();
-  // this will not work for MenuList within window, we need the
-  // const {offsetLeft: left, offsetTop: menuTop} = el.closest('.hwMenuList');
-  const { offsetWidth: width, offsetTop: top } = el;
-  return { left: left + width, top: top + menuTop };
-};
-
-export const getItemId = (id) => {
-  let pos = id.lastIndexOf("-");
-  return pos === -1 ? id : id.slice(pos + 1);
-};
-
-export const getMenuId = (id) => {
-  const itemId = getItemId(id);
-  const pos = itemId.lastIndexOf(".");
-  return pos > -1 ? itemId.slice(0, pos) : "root";
-};
-
-const getMenuDepth = (id) => {
-  let count = 0,
-    pos = id.indexOf(".", 0);
-  while (pos !== -1) {
-    count += 1;
-    pos = id.indexOf(".", pos + 1);
-  }
-  return count;
-};
-const identifyItem = (el) => [
-  getMenuId(el.id),
-  getItemId(el.id),
-  el.ariaHasPopup === "true",
-  el.ariaExpanded === "true",
-  getMenuDepth(el.id),
-];
-
-export const useCascade = ({
-  id,
-  onActivate,
-  onMouseEnterItem,
-  position: { x: posX, y: posY },
-}) => {
-  const [, forceRefresh] = useState({});
-  const openMenus = useRef([{ id: "root", left: posX, top: posY }]);
-
-  const setOpenMenus = useCallback((menus) => {
-    openMenus.current = menus;
-    forceRefresh({});
-  }, []);
-
-  const menuOpenPendingTimeout = useRef(null);
-  const menuClosePendingTimeout = useRef(null);
-  const menuState = useRef({ root: "no-popup" });
-  const prevLevel = useRef(0);
-
-  // const prevAim = useRef({mousePos: null, distance: true});
-
-  const openMenu = useCallback(
-    (menuId = "root", itemId = null, listItemEl = null) => {
-      if (menuId === "root" && itemId === null) {
-        setOpenMenus([{ id: "root", left: posX, top: posY }]);
-      } else {
-        menuState.current[menuId] = "popup-open";
-        const doc = listItemEl ? listItemEl.ownerDocument : document;
-        const el = doc.getElementById(`${id}-${menuId}-${itemId}`);
-        const { left, top } = getPosition(el, openMenus.current);
-        setOpenMenus(openMenus.current.concat({ id: itemId, left, top }));
-      }
-    },
-    [id, posX, posY, setOpenMenus]
-  );
-
-  const closeMenu = useCallback(
-    (menuId) => {
-      if (menuId === "root") {
-        setOpenMenus([]);
-      } else {
-        setOpenMenus(openMenus.current.slice(0, -1));
-      }
-    },
-    [setOpenMenus]
-  );
-
-  const closeMenus = useCallback(
-    (menuId, itemId) => {
-      const menus = openMenus.current.slice();
-      let { id: lastMenuId } = menus[menus.length - 1];
-      while (menus.length > 1 && !itemId.startsWith(lastMenuId)) {
-        const parentMenuId = getMenuId(lastMenuId);
-        menus.pop();
-        menuState.current[lastMenuId] = "no-popup";
-        menuState.current[parentMenuId] = "no-popup";
-        ({ id: lastMenuId } = menus[menus.length - 1]);
-      }
-      if (menus.length < openMenus.current.length) {
-        setOpenMenus(menus);
-      }
-    },
-    [setOpenMenus]
-  );
-
-  const scheduleOpen = useCallback(
-    (menuId, itemId, listItemEl) => {
-      if (menuOpenPendingTimeout.current) {
-        clearTimeout(menuOpenPendingTimeout.current);
-      }
-      menuOpenPendingTimeout.current = setTimeout(() => {
-        console.log(`scheduleOpen timed out opening ${itemId}`);
-        closeMenus(menuId, itemId);
-        menuState.current[menuId] = "popup-open";
-        menuState.current[itemId] = "no-popup";
-        openMenu(menuId, itemId, listItemEl);
-      }, 400);
-    },
-    [closeMenus, openMenu]
-  );
-
-  const scheduleClose = useCallback(
-    (openMenuId, menuId, itemId) => {
-      console.log(
-        `scheduleClose openMenuId ${openMenuId} menuId ${menuId} itemId ${itemId}`
-      );
-      menuState.current[openMenuId] = "pending-close";
-      menuClosePendingTimeout.current = setTimeout(() => {
-        closeMenus(menuId, itemId);
-      }, 400);
-    },
-    [closeMenus]
-  );
-
-  const handleRender = useCallback(() => {
-    const { current: menus } = openMenus;
-    const [menu] = menus.slice(-1);
-    const el = document.getElementById(`${id}-${menu.id}`);
-    if (el) {
-      const { right, bottom } = el.getBoundingClientRect();
-      const { clientHeight, clientWidth } = document.body;
-      if (right > clientWidth) {
-        const newMenus =
-          menus.length > 1
-            ? flipSides(id, menus)
-            : nudgeLeft(menus, right - clientWidth);
-        setOpenMenus(newMenus);
-      } else if (bottom > clientHeight) {
-        const newMenus = nudgeUp(menus, bottom - clientHeight);
-        setOpenMenus(newMenus);
-      }
-    }
-  }, [id, setOpenMenus]);
-
-  const listItemProps = useMemo(
-    () => ({
-      onMouseEnter: (evt) => {
-        const listItemEl = closestListItem(evt.target);
-        const [menuId, itemId, isGroup, isOpen, level] =
-          identifyItem(listItemEl);
-        const sameLevel = prevLevel.current === level;
-        const {
-          current: { [menuId]: state },
-        } = menuState;
-        prevLevel.current = level;
-
-        // console.log(
-        //   `%conMouseEnter #${menuId}[${itemId}] @${level}
-        //     isGroup ${isGroup} isOpen ${isOpen}
-        //     openMenus [${openMenus.current.join(',')}]
-        //     state='${JSON.stringify(menuState.current)}`,
-        //     'color: green; font-weight: bold;'
-        // );
-
-        if (state === "no-popup" && isGroup) {
-          // Shouldn;t we always set this ?
-          menuState.current[menuId] = "popup-pending";
-          scheduleOpen(menuId, itemId, listItemEl);
-        } else if (state === "popup-pending" && !isGroup) {
-          menuState.current[menuId] = "no-popup";
-          clearTimeout(menuOpenPendingTimeout.current);
-          menuOpenPendingTimeout.current = null;
-        } else if (state === "popup-pending" && isGroup) {
-          clearTimeout(menuOpenPendingTimeout.current);
-          scheduleOpen(menuId, itemId, listItemEl);
-        } else if (state === "popup-open") {
-          const [{ id: parentMenuId }, { id: openMenuId }] =
-            openMenus.current.slice(-2);
-          if (
-            parentMenuId === menuId &&
-            menuState.current[openMenuId] !== "pending-close" &&
-            sameLevel
-          ) {
-            scheduleClose(openMenuId, menuId, itemId);
-            if (isGroup && !isOpen) {
-              scheduleOpen(menuId, itemId, listItemEl);
-            }
-          } else if (
-            parentMenuId === menuId &&
-            isGroup &&
-            itemId !== openMenuId &&
-            menuState.current[openMenuId] === "pending-close"
-          ) {
-            // if there is already an item queued for opening cancel it
-            scheduleOpen(menuId, itemId, listItemEl);
-          } else if (isGroup) {
-            closeMenus(menuId, itemId);
-            scheduleOpen(menuId, itemId, listItemEl);
-          } else if (
-            !(menuState.current[openMenuId] === "pending-close" && sameLevel)
-          ) {
-            closeMenus(menuId, itemId);
-          }
-        }
-
-        if (state === "pending-close") {
-          if (menuOpenPendingTimeout.current) {
-            clearTimeout(menuOpenPendingTimeout.current);
-            menuOpenPendingTimeout.current = null;
-          }
-          clearTimeout(menuClosePendingTimeout.current);
-          menuClosePendingTimeout.current = null;
-          menuState.current[menuId] = "popup-open";
-        }
-
-        onMouseEnterItem(evt, itemId);
-      },
-
-      onClick: (evt) => {
-        const listItemEl = closestListItem(evt.target);
-        const idx = listItemIndex(listItemEl);
-        if (closedNode(listItemEl).ariaHasPopup === "true") {
-          if (listItemEl.ariaExpanded !== "true") {
-            openMenu(idx);
-          } else {
-            // do nothing
-          }
-        } else {
-          onActivate(getItemId(listItemEl.id));
-        }
-      },
-    }),
-    [
-      closeMenus,
-      onActivate,
-      onMouseEnterItem,
-      openMenu,
-      scheduleClose,
-      scheduleOpen,
-    ]
-  );
-
-  return {
-    closeMenu,
-    handleRender,
-    listItemProps,
-    openMenu,
-    openMenus: openMenus.current,
-  };
-};

package/src/menu/use-click-away.js

@@ -1,22 +0,0 @@
-import { useEffect } from 'react';
-
-export const useClickAway = ({ containerClassName, isOpen, onClose }) => {
-  useEffect(() => {
-    const clickHandler = isOpen
-      ? (evt) => {
-          const container = evt.target.closest(`.${containerClassName}`);
-          if (container === null) {
-            onClose('root');
-          }
-        }
-      : null;
-
-    document.body.addEventListener('click', clickHandler, true);
-
-    return () => {
-      if (clickHandler) {
-        document.body.removeEventListener('click', clickHandler, true);
-      }
-    };
-  }, [containerClassName, isOpen, onClose]);
-};

package/src/menu/use-items-with-ids.js

@@ -1,75 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import { MenuItemGroup, Separator } from "./MenuList";
-
-export const isMenuItemGroup = (child) =>
-  child.type === MenuItemGroup || !!child.props["data-group"];
-
-export const useItemsWithIds = (sourceProp, childrenProp) => {
-  const normalizeChildren = useCallback(() => {
-    if (childrenProp === undefined) {
-      return;
-    }
-
-    const collectChildren = (
-      children,
-      path = "root",
-      menus = {},
-      actions = {}
-    ) => {
-      const list = (menus[path] = []);
-      let idx = 0;
-      let hasSeparator = false;
-
-      React.Children.forEach(children, (child) => {
-        if (child.type === Separator) {
-          hasSeparator = true;
-        } else {
-          const group = isMenuItemGroup(child);
-          const childPath = path === "root" ? `${idx}` : `${path}.${idx}`;
-          const {
-            props: { action, options },
-          } = child;
-          const [childWithId, grandChildren] = assignId(
-            child,
-            childPath,
-            group,
-            hasSeparator
-          );
-          list.push(childWithId);
-          if (grandChildren) {
-            collectChildren(grandChildren, childPath, menus, actions);
-          } else {
-            actions[childPath] = { action, options };
-          }
-          idx += 1;
-          hasSeparator = false;
-        }
-      });
-      return [menus, actions];
-    };
-
-    const assignId = (child, path, group, hasSeparator = false) => {
-      const {
-        props: { children },
-      } = child;
-      return [
-        React.cloneElement(child, {
-          hasSeparator,
-          id: `${path}`,
-          key: path,
-          children: group ? undefined : children,
-        }),
-        group ? children : undefined,
-      ];
-    };
-
-    return collectChildren(childrenProp);
-  }, [childrenProp]);
-
-  const [children, actions] = useMemo(
-    () => normalizeChildren(),
-    [normalizeChildren]
-  );
-
-  return [children, actions];
-};

package/src/menu/use-keyboard-navigation.js

@@ -1,162 +0,0 @@
-import { useCallback, useRef, useState } from "react";
-import { hasPopup, isRoot } from "./utils";
-import { applyHandlers } from "../utils/apply-handlers";
-import { isNavigationKey } from "./key-code";
-
-// we need a way to set highlightedIdx when selection changes
-export const useKeyboardNavigation = (
-  {
-    autoHighlightFirstItem = false,
-    count,
-    highlightedIdx: highlightedIdxProp,
-    onActivate,
-    onHighlight,
-    onKeyDown,
-    onCloseMenu,
-    onOpenMenu,
-  },
-  ...additionalHandlers
-) => {
-  // const prevCount = useRef(count);
-  const highlightedIndexRef = useRef(
-    highlightedIdxProp ?? autoHighlightFirstItem ? 0 : -1
-  );
-  const [, forceRefresh] = useState(null);
-  const controlledHighlighting = highlightedIdxProp !== undefined;
-
-  // count will not work for this, as it will change when we expand collapse groups
-  // if (count !== prevCount.current) {
-  //   prevCount.current = count;
-  //   if (highlightedIndexRef.current !== -1){
-  //     highlightedIndexRef.current = autoHighlightFirstItem ? 0 : -1;
-  //   }
-  // }
-
-  const setHighlightedIndex = useCallback(
-    (idx) => {
-      highlightedIndexRef.current = idx;
-      onHighlight && onHighlight(idx);
-      applyHandlers(additionalHandlers, "onHighlight", idx);
-      forceRefresh({});
-    },
-    [additionalHandlers, onHighlight]
-  );
-
-  // does this belong here or should it be a method passed in?
-  const keyBoardNavigation = useRef(true);
-  const ignoreFocus = useRef(false);
-  const setIgnoreFocus = (value) => (ignoreFocus.current = value);
-
-  const hiliteItemAtIndex = useCallback(
-    (idx) => {
-      if (idx !== highlightedIndexRef.current) {
-        if (!controlledHighlighting) {
-          setHighlightedIndex(idx);
-        }
-      }
-    },
-    [controlledHighlighting, setHighlightedIndex]
-  );
-
-  const highlightedIdx = controlledHighlighting
-    ? highlightedIdxProp
-    : highlightedIndexRef.current;
-
-  const listProps = {
-    onFocus: () => {
-      if (highlightedIdx === -1) {
-        setHighlightedIndex(0);
-      }
-    },
-    onKeyDown: (e) => {
-      if (isNavigationKey(e)) {
-        e.preventDefault();
-        e.stopPropagation();
-        keyBoardNavigation.current = true;
-        navigateChildldItems(e);
-      } else if (
-        (e.key === "ArrowRight" || e.key === "Enter") &&
-        hasPopup(e.target, highlightedIdx)
-      ) {
-        onOpenMenu(highlightedIdx);
-      } else if (e.key === "ArrowLeft" && !isRoot(e.target)) {
-        onCloseMenu(highlightedIdx);
-      } else if (e.key === "Enter") {
-        onActivate && onActivate(highlightedIdx);
-      }
-      // Is there any harm in allowing other keyDown Handlers to fire ?
-      // TODO this is out of date - use additionalHandlers
-      if (Array.isArray(onKeyDown)) {
-        for (let handleEvent of onKeyDown) {
-          if (e.isPropagationStopped()) {
-            break;
-          }
-          handleEvent(e);
-        }
-      } else if (onKeyDown && !e.isPropagationStopped()) {
-        onKeyDown(e);
-      }
-
-      applyHandlers(additionalHandlers, "onKeyDown", e);
-    },
-    onMouseDownCapture: () => {
-      keyBoardNavigation.current = false;
-      setIgnoreFocus(true);
-    },
-
-    // onMouseEnter would seem less expensive but it misses some cases
-    onMouseMove: () => {
-      if (keyBoardNavigation.current) {
-        keyBoardNavigation.current = false;
-      }
-    },
-    onMouseLeave: () => {
-      // label === 'ParsedInput' && console.log(`%c[useKeyboardNavigationHook]<${label}> onMouseLeave`,'color:brown')
-      keyBoardNavigation.current = true;
-      setIgnoreFocus(false);
-      hiliteItemAtIndex(-1);
-    },
-  };
-
-  const navigateChildldItems = (e) => {
-    const nextIdx = nextItemIdx(count, e.key, highlightedIndexRef.current);
-    if (nextIdx !== highlightedIndexRef.current) {
-      hiliteItemAtIndex(nextIdx);
-      applyHandlers(additionalHandlers, "onKeyboardNavigation", e, nextIdx);
-    }
-  };
-
-  // label === 'ParsedInput' && console.log(`%cuseNavigationHook<${label}>
-  // highlightedIdxProp= ${highlightedIdxProp},
-  // highlightedIndexRef= ${highlightedIndexRef.current},
-  // %chighlightedIdx= ${highlightedIdx}`, 'color: brown','color: brown;font-weight: bold;')
-
-  return {
-    focusVisible: keyBoardNavigation.current ? highlightedIdx : -1,
-    controlledHighlighting,
-    highlightedIdx,
-    hiliteItemAtIndex,
-    keyBoardNavigation,
-    listProps,
-    setIgnoreFocus,
-  };
-};
-
-// need to be able to accommodate disabled items
-function nextItemIdx(count, key, idx) {
-  if (key === "Up") {
-    if (idx > 0) {
-      return idx - 1;
-    } else {
-      return idx;
-    }
-  } else {
-    if (idx === null) {
-      return 0;
-    } else if (idx === count - 1) {
-      return idx;
-    } else {
-      return idx + 1;
-    }
-  }
-}

package/src/menu/utils.js

@@ -1,5 +0,0 @@
-export const isRoot = (el) => el.closest(`[data-root='true']`) !== null;
-
-export const hasPopup = (el, idx) =>
-  (el.ariaHasPopup === 'true' && el.dataset?.idx === `${idx}`) ||
-  el.querySelector(`:scope > [data-idx='${idx}'][aria-haspopup='true']`) !== null;

package/src/palette/Palette.css

@@ -1,37 +0,0 @@
-.vuuPalette {
-}
-
-.vuuPalette-horizontal {
-  align-items: center;
-  display: flex;
-}
-
-.vuuPalette .vuuComponentIcon {
-}
-
-.vuuPaletteItem {
-  --vuu-icon-color: var(--salt-separable-primary-background);
-  --vuu-icon-inset: calc(50% - 12px) auto auto -3px;
-  --vuu-icon-svg: var(--svg-grab-handle);
-  --vuu-icon-height: 24px;
-  --vuu-icon-width: 24px;
-  padding-left: 20px;
-}
-
-.vuuPaletteItem[data-icon]:after {
-  --height: var(--vuu-icon-height, var(--vuu-icon-size, 12px));
-  --width: var(--vuu-icon-width, var(--vuu-icon-size, 12px));
-
-  content: "";
-  background-color: var(--vuu-icon-color, black);
-  height: var(--height);
-  inset: var(--vuu-icon-inset,0 auto 0 0);
-  mask: var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;
-  -webkit-mask: var(--vuu-icon-svg) center center/var(--width) var(--height) no-repeat;
-  position: absolute;
-  width: var(--width);
-}
-
-.vuuSimpleDraggableWrapper > .vuuPaletteItem {
-  --vuu-icon-color: var(--salt-selectable-foreground);
-}