@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/source/components/navigation/tabs/tabs.jsx

@@ -1,24 +1,64 @@
 import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/tabs/tabs.entry.less";
-import { Show, createEffect, createSignal, mergeProps, on, onCleanup, onMount, splitProps } from "solid-js";
+import {
+  For,
+  Show,
+  children,
+  createComputed,
+  createEffect,
+  createMemo,
+  createSignal,
+  createUniqueId,
+  mergeProps,
+  on,
+  onCleanup,
+  onMount,
+  splitProps
+} from "solid-js";
+import { isServer } from "solid-js/web";
 import cn from "clsx";
 import { debounce } from "../../../utils/debounce";
 import { animate } from "../../../utils/animate";
+import { matchesKeyboardShortcut } from "../../../utils/keyboardShortcut";
 import { TabsContext } from "./tabsContext";
 import { Tab } from "./tab/tab";
+import { getHiddenIndexes } from "./tabs.utils";
+import { Menu } from "../menu";
+import { MenuItem } from "../menu/menuItem";
 import { Icon } from "../../base/icon";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { createRovingTabIndex } from "../../../primitives/createRovingTabIndex";
 const VIEW_NEXT_TAB_PX = 40;
 const SCROLL_PAGE = 0.8;
+function TabListItems(props) {
+  const resolved = children(() => props.children);
+  if (!isServer) {
+    createComputed(() => props.onItems(resolved.toArray().filter((node) => node instanceof Element)));
+  }
+  return <>{resolved()}</>;
+}
+function PanelsResolver(props) {
+  const resolved = children(() => props.children);
+  createComputed(
+    () => props.onPanels(
+      resolved(),
+      resolved.toArray().some((node) => node != null && node !== false && node !== "")
+    )
+  );
+  return null;
+}
 function Tabs(props) {
   const merged = mergeProps(
     {
       indicatorContent: false,
       scrollable: false,
       scrollButtons: false,
+      overflowMenu: false,
       dense: false,
+      orientation: "horizontal",
       scrollBackAriaLabel: "Scroll tabs back",
-      scrollForwardAriaLabel: "Scroll tabs forward"
+      scrollForwardAriaLabel: "Scroll tabs forward",
+      overflowMenuAriaLabel: "More tabs"
     },
     props
   );
@@ -30,20 +70,38 @@ function Tabs(props) {
     "indicatorContent",
     "scrollable",
     "scrollButtons",
+    "onReorder",
+    "overflowMenu",
+    "overflowMenuAriaLabel",
     "dense",
+    "orientation",
+    "panels",
+    "id",
     "scrollBackAriaLabel",
     "scrollForwardAriaLabel",
     "aria-label",
     "ref"
   ]);
+  const generatedId = createUniqueId();
+  const baseId = () => local.id ?? generatedId;
+  const [registrations, setRegistrations] = createSignal([]);
+  const tabId = (index) => registrations().find((registration) => registration.index() === index)?.id() ?? `${baseId()}-tab-${index}`;
+  const panelId = (index) => `${baseId()}-panel-${index}`;
+  const [panels, setPanels] = createSignal();
+  const [hasPanels, setHasPanels] = createSignal(false);
+  const [focusedIndex, setFocusedIndex] = createSignal(null);
   const [mounted, setMounted] = createSignal(false);
   const [indicatorStyle, setIndicatorStyle] = createSignal({ root: {} });
   const [overflowStart, setOverflowStart] = createSignal(false);
   const [overflowEnd, setOverflowEnd] = createSignal(false);
+  const [hiddenIndexes, setHiddenIndexes] = createSignal([]);
+  const [overflowOpen, setOverflowOpen] = createSignal(false);
+  let overflowTriggerEl;
   let tabsEl;
   let tabListEl;
-  let tabCounter = 0;
-  const contentRefs = [];
+  let closingTab = null;
+  const [items, setItems] = createSignal();
+  let created = 0;
   const getTabsMeta = () => {
     let tabsMeta;
     if (tabsEl) {
@@ -56,7 +114,7 @@ function Tabs(props) {
       const tab = tabListEl.children[local.value];
       tabMeta = tab ? tab.getBoundingClientRect() : null;
       if (local.indicatorContent) {
-        tabContentMeta = contentRefs[local.value]?.getBoundingClientRect() ?? null;
+        tabContentMeta = tab?.querySelector(".smwb-tab__content")?.getBoundingClientRect() ?? null;
       }
     }
     return { tabsMeta, tabMeta, tabContentMeta };
@@ -86,11 +144,23 @@ function Tabs(props) {
     if (!tabsEl || !local.scrollable) {
       setOverflowStart(false);
       setOverflowEnd(false);
+      setHiddenIndexes((prev) => prev.length === 0 ? prev : []);
       return;
     }
     const max = tabsEl.scrollWidth - tabsEl.clientWidth;
     setOverflowStart(tabsEl.scrollLeft > 1);
     setOverflowEnd(tabsEl.scrollLeft < max - 1);
+    const hidden = local.overflowMenu ? getHiddenIndexes(
+      tabListEl ? Array.from(tabListEl.children).map((child) => {
+        const item = child;
+        return { offsetLeft: item.offsetLeft, offsetWidth: item.offsetWidth };
+      }) : [],
+      tabsEl.scrollLeft,
+      tabsEl.clientWidth
+    ) : [];
+    setHiddenIndexes(
+      (prev) => prev.length === hidden.length && prev.every((index, at) => index === hidden[at]) ? prev : hidden
+    );
   };
   const scroll = (scrollValue) => {
     if (!tabsEl) return;
@@ -100,17 +170,28 @@ function Tabs(props) {
     if (!tabsEl) return;
     scroll(tabsEl.scrollLeft + direction * tabsEl.clientWidth * SCROLL_PAGE);
   };
-  const scrollSelectedIntoView = () => {
-    const { tabsMeta, tabMeta } = getTabsMeta();
-    if (!tabMeta || !tabsMeta) return;
-    if (tabMeta.left < tabsMeta.left) {
-      scroll(tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left) - VIEW_NEXT_TAB_PX);
-    } else if (tabMeta.right > tabsMeta.right) {
-      scroll(tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right) + VIEW_NEXT_TAB_PX);
+  const scrollIndexIntoView = (index) => {
+    if (!tabsEl || !tabListEl) return;
+    const tab = tabListEl.children[index];
+    if (!tab) return;
+    const tabsRect = tabsEl.getBoundingClientRect();
+    const tabRect = tab.getBoundingClientRect();
+    if (tabRect.left < tabsRect.left) {
+      scroll(tabsEl.scrollLeft + (tabRect.left - tabsRect.left) - VIEW_NEXT_TAB_PX);
+    } else if (tabRect.right > tabsRect.right) {
+      scroll(tabsEl.scrollLeft + (tabRect.right - tabsRect.right) + VIEW_NEXT_TAB_PX);
     }
   };
+  const scrollSelectedIntoView = () => {
+    scrollIndexIntoView(local.value);
+  };
   onMount(() => setMounted(true));
-  createEffect(on(() => local.value, () => updateIndicatorState()));
+  createEffect(
+    on([() => local.value, items], () => {
+      updateIndicatorState();
+      updateOverflow();
+    })
+  );
   onMount(() => {
     const onResize = debounce(() => {
       updateIndicatorState();
@@ -137,19 +218,218 @@ function Tabs(props) {
     indicatorStyle();
     scrollSelectedIntoView();
   });
+  const getTabNodes = () => Array.from(tabListEl?.querySelectorAll('[role="tab"]') ?? []);
+  const itemOf = (tab) => tab.closest(".smwb-tab-item") ?? tab;
+  const indexOfFocus = (target) => target ? getTabNodes().findIndex((node) => itemOf(node).contains(target)) : -1;
+  const isNodeDisabled = (node) => !node || node.getAttribute("aria-disabled") === "true" || node.disabled === true;
+  const selectedStop = () => {
+    const count = items()?.length;
+    const candidate = count === void 0 || local.value >= 0 && local.value < count ? local.value : 0;
+    const list = registrations();
+    if (!list.some((registration) => registration.index() === candidate && registration.disabled())) return candidate;
+    const enabled = list.filter((registration) => !registration.disabled()).map((registration) => registration.index()).filter((index) => index >= 0);
+    return enabled.length > 0 ? Math.min(...enabled) : candidate;
+  };
+  const stopIndex = () => focusedIndex() ?? selectedStop();
+  const onRovingKeyDown = createRovingTabIndex({
+    count: () => getTabNodes().length,
+    activeIndex: stopIndex,
+    get orientation() {
+      return local.orientation;
+    },
+    onMove: (next) => getTabNodes()[next]?.focus(),
+    isDisabled: (index) => isNodeDisabled(getTabNodes()[index])
+  });
+  let dragSourceIndex = null;
+  let draggingItem = null;
+  let dropTargetItem = null;
+  const dragItemOf = (target) => target instanceof Element ? itemOf(target) : null;
+  const clearDragMarks = () => {
+    draggingItem?.classList.remove("smwb-tab-item--dragging");
+    dropTargetItem?.classList.remove("smwb-tab-item--drop-target");
+    draggingItem = null;
+    dropTargetItem = null;
+  };
+  const onItemDragStart = (event) => {
+    if (!local.onReorder) return;
+    const item = dragItemOf(event.target);
+    if (!item) return;
+    const index = indexOfFocus(item);
+    if (index < 0 || isNodeDisabled(getTabNodes()[index])) return;
+    dragSourceIndex = index;
+    draggingItem = item;
+    item.classList.add("smwb-tab-item--dragging");
+    event.dataTransfer?.setData("text/plain", String(index));
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = "move";
+    }
+  };
+  const onItemDragOver = (event) => {
+    if (dragSourceIndex === null || !local.onReorder) return;
+    const item = dragItemOf(event.target);
+    if (!item) return;
+    event.preventDefault();
+    if (item === dropTargetItem) return;
+    dropTargetItem?.classList.remove("smwb-tab-item--drop-target");
+    dropTargetItem = item;
+    item.classList.add("smwb-tab-item--drop-target");
+  };
+  const onItemDrop = (event) => {
+    if (dragSourceIndex === null) return;
+    const from = dragSourceIndex;
+    dragSourceIndex = null;
+    const to = indexOfFocus(dragItemOf(event.target));
+    const sourceItem = draggingItem;
+    const wasSelected = from === local.value;
+    const doc = sourceItem?.ownerDocument;
+    const hadFocus = Boolean(sourceItem && doc?.activeElement && sourceItem.contains(doc.activeElement));
+    clearDragMarks();
+    event.preventDefault();
+    if (to >= 0 && to !== from) {
+      local.onReorder?.(from, to);
+      if (wasSelected) {
+        local.onChange(event, to);
+      }
+      if (hadFocus) {
+        const moved = getTabNodes()[to];
+        if (moved && itemOf(moved) === sourceItem) moved.focus();
+      }
+    }
+  };
+  const onItemDragEnd = () => {
+    dragSourceIndex = null;
+    clearDragMarks();
+  };
+  const switchByChord = (event, delta) => {
+    const nodes = getTabNodes();
+    const from = indexOfFocus(event.target);
+    if (from < 0 || nodes.length === 0) return;
+    for (let step = 1; step <= nodes.length; step += 1) {
+      const next = (from + delta * step + nodes.length) % nodes.length;
+      const node = nodes[next];
+      if (node && !isNodeDisabled(node)) {
+        node.focus();
+        node.click();
+        return;
+      }
+    }
+  };
+  const onTabListKeyDown = (event) => {
+    if (event.defaultPrevented) return;
+    if ((event.ctrlKey || event.metaKey) && !event.altKey && indexOfFocus(event.target) >= 0) {
+      const index = indexOfFocus(event.target);
+      const registration = registrations().find((candidate) => candidate.index() === index);
+      if (matchesKeyboardShortcut(event, ["Mod", "W"])) {
+        if (registration && !registration.disabled() && registration.closable()) {
+          event.preventDefault();
+          registration.requestClose(event);
+        }
+        return;
+      }
+      if (matchesKeyboardShortcut(event, ["Mod", "Shift", "["])) {
+        event.preventDefault();
+        switchByChord(event, -1);
+        return;
+      }
+      if (matchesKeyboardShortcut(event, ["Mod", "Shift", "]"])) {
+        event.preventDefault();
+        switchByChord(event, 1);
+        return;
+      }
+    }
+    if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
+    if (!event.target.closest('[role="tab"]')) return;
+    onRovingKeyDown(event);
+  };
+  createEffect(
+    on(
+      items,
+      () => {
+        const doc = tabListEl?.ownerDocument;
+        const closing = closingTab;
+        if (doc && closing && !closing.item.isConnected) {
+          closingTab = null;
+          if (!doc.activeElement || doc.activeElement === doc.body) {
+            const nodes = getTabNodes();
+            const from = Math.min(closing.index, nodes.length - 1);
+            const candidates = [...nodes.keys()].filter((index2) => !isNodeDisabled(nodes[index2]));
+            const target = candidates.find((index2) => index2 >= from) ?? candidates[candidates.length - 1];
+            if (target !== void 0) {
+              nodes[target]?.focus();
+              setFocusedIndex(target);
+              return;
+            }
+          }
+        }
+        if (focusedIndex() === null) return;
+        const index = indexOfFocus(doc?.activeElement);
+        setFocusedIndex(index >= 0 ? index : null);
+      },
+      { defer: true }
+    )
+  );
+  const onTabListFocusIn = (event) => {
+    const index = indexOfFocus(event.target);
+    if (index >= 0) setFocusedIndex(index);
+    if (closingTab && !closingTab.item.contains(event.target)) closingTab = null;
+  };
+  const onTabListFocusOut = (event) => {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      setFocusedIndex(null);
+      queueMicrotask(() => {
+        if (closingTab?.item.isConnected) closingTab = null;
+      });
+    }
+  };
   const contextValue = {
     value: () => local.value,
+    tabStop: (index) => stopIndex() === index,
+    tabId,
+    panelId,
+    hasPanels,
+    reorderable: () => local.onReorder !== void 0,
     onChange: local.onChange,
-    indicatorContent: local.indicatorContent,
-    registerTab: () => tabCounter++,
-    setContentRef: (index, el) => {
-      contentRefs[index] = el;
+    closing: (index, reason) => {
+      const tab = getTabNodes()[index];
+      const active = tab?.ownerDocument.activeElement;
+      const focused = reason === "actions" || Boolean(active && tab && itemOf(tab).contains(active));
+      closingTab = tab && focused ? { item: itemOf(tab), index } : null;
+    },
+    registerTab: (element, info) => {
+      const order = created++;
+      const index = createMemo(() => {
+        const list = items();
+        if (!list) return order;
+        const el = element();
+        return el ? list.findIndex((item) => item.contains(el)) : -1;
+      });
+      const registration = { ...info, index };
+      setRegistrations((list) => [...list, registration]);
+      onCleanup(() => setRegistrations((list) => list.filter((item) => item !== registration)));
+      return index;
     }
   };
   const showScrollButtons = () => local.scrollable && local.scrollButtons && (overflowStart() || overflowEnd());
+  const showOverflowTrigger = () => local.scrollable && local.overflowMenu && hiddenIndexes().length > 0;
+  const overflowItemIcon = (node) => node?.querySelector(".smwb-tab__icon") ?? void 0;
+  const overflowItemLabel = (node) => node?.querySelector(".smwb-tab__text-label")?.textContent ?? "";
+  const cloneIconInto = (el, node) => {
+    const source = overflowItemIcon(node);
+    if (!source) return;
+    Array.from(source.childNodes).forEach((child) => el.appendChild(child.cloneNode(true)));
+  };
+  const chooseOverflowItem = (event, index) => {
+    setOverflowOpen(false);
+    local.onChange(event, index);
+    scrollIndexIntoView(index);
+  };
   return <TabsContext.Provider value={contextValue}>
+      <PanelsResolver onPanels={(resolved, has) => (setPanels(() => resolved), setHasPanels(has))}>
+        {local.panels}
+      </PanelsResolver>
       <div
     {...rest}
+    id={local.id}
     class={cn(
       "smwb-tabs",
       {
@@ -159,7 +439,6 @@ function Tabs(props) {
       },
       local.class
     )}
-    role="tabpanel"
     ref={mergeRefs(local.ref)}
   >
         <Show when={showScrollButtons()}>
@@ -168,6 +447,7 @@ function Tabs(props) {
     class="smwb-tabs__scroll-button smwb-tabs__scroll-button--start"
     aria-label={local.scrollBackAriaLabel}
     disabled={!overflowStart()}
+    tabindex={-1}
     onClick={() => scrollByPage(-1)}
   >
             <Icon name="chevron_left" size={20} />
@@ -182,8 +462,21 @@ function Tabs(props) {
     classList={{ "smwb-tabs__scroller--scrollable": local.scrollable }}
     ref={(el) => tabsEl = el}
   >
-          <div class="smwb-tabs__scroll-area" ref={(el) => tabListEl = el} role="tablist" aria-label={local["aria-label"]}>
-            {local.children}
+          <div
+    class="smwb-tabs__scroll-area"
+    ref={(el) => tabListEl = el}
+    role="tablist"
+    aria-label={local["aria-label"]}
+    aria-orientation={local.orientation}
+    onKeyDown={onTabListKeyDown}
+    onFocusIn={onTabListFocusIn}
+    onFocusOut={onTabListFocusOut}
+    onDragStart={onItemDragStart}
+    onDragOver={onItemDragOver}
+    onDrop={onItemDrop}
+    onDragEnd={onItemDragEnd}
+  >
+            <TabListItems onItems={setItems}>{local.children}</TabListItems>
           </div>
           <Show when={mounted()}>
             <span
@@ -206,12 +499,91 @@ function Tabs(props) {
     class="smwb-tabs__scroll-button smwb-tabs__scroll-button--end"
     aria-label={local.scrollForwardAriaLabel}
     disabled={!overflowEnd()}
+    tabindex={-1}
     onClick={() => scrollByPage(1)}
   >
             <Icon name="chevron_right" size={20} />
           </button>
         </Show>
+        <Show when={showOverflowTrigger()}>
+          <button
+    type="button"
+    class="smwb-tabs__overflow-trigger"
+    aria-haspopup="menu"
+    aria-expanded={overflowOpen()}
+    aria-label={local.overflowMenuAriaLabel}
+    tabindex={-1}
+    ref={(el) => overflowTriggerEl = el}
+    onClick={() => setOverflowOpen((open) => !open)}
+  >
+            <Icon name="more_horiz" size={20} />
+          </button>
+          <Menu
+    anchorElement={overflowTriggerEl ?? null}
+    isOpen={overflowOpen()}
+    onClose={() => setOverflowOpen(false)}
+    placement="bottom-end"
+  >
+            <For each={hiddenIndexes()}>
+              {(index) => {
+    const nodeNow = () => getTabNodes()[index];
+    const drawn = nodeNow();
+    const [label, setLabel] = createSignal(overflowItemLabel(drawn));
+    const [hasIcon, setHasIcon] = createSignal(Boolean(overflowItemIcon(drawn)));
+    const disabled = createMemo(() => {
+      const registration = registrations().find((candidate) => candidate.index() === index);
+      return registration ? registration.disabled() : isNodeDisabled(nodeNow());
+    });
+    let iconEl;
+    let shownNode = drawn;
+    const syncIcon = (node) => {
+      shownNode = node;
+      const source = overflowItemIcon(node);
+      setHasIcon(Boolean(source));
+      if (iconEl && source) {
+        iconEl.textContent = "";
+        cloneIconInto(iconEl, node);
+      }
+    };
+    createEffect(
+      on([items, registrations], () => {
+        const node = nodeNow();
+        setLabel(overflowItemLabel(node));
+        syncIcon(node);
+        const item = node ? itemOf(node) : null;
+        const view = item?.ownerDocument.defaultView;
+        if (!item || !view || typeof view.MutationObserver === "undefined") return;
+        const observer = new view.MutationObserver(() => {
+          setLabel(overflowItemLabel(node));
+          syncIcon(node);
+        });
+        observer.observe(item, { subtree: true, childList: true, characterData: true });
+        onCleanup(() => observer.disconnect());
+      })
+    );
+    return <MenuItem
+      disabled={disabled()}
+      aria-current={index === local.value ? "true" : void 0}
+      onClick={(event) => chooseOverflowItem(event, index)}
+    >
+                    <Show when={hasIcon()}>
+                      <span
+      class="smwb-tab__icon"
+      aria-hidden="true"
+      ref={(el) => {
+        iconEl = el;
+        if (overflowItemIcon(shownNode)) cloneIconInto(el, shownNode);
+      }}
+    />
+                    </Show>
+                    <span class="smwb-tab__text-label">{label()}</span>
+                  </MenuItem>;
+  }}
+            </For>
+          </Menu>
+        </Show>
       </div>
+      {panels()}
     </TabsContext.Provider>;
 }
 var tabs_default = Tabs;