react-multi-tab 1.0.0

package/dist/index.mjs

@@ -0,0 +1,618 @@
+import { createContext, useRef, useEffect, useCallback, useMemo, useSyncExternalStore, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/MultiTabProvider.tsx
+var MultiTabContext = createContext(null);
+
+// src/store.ts
+function reducer(state, action) {
+  switch (action.type) {
+    case "OPEN_TAB": {
+      const activate = action.activate;
+      const newActiveId = activate ? action.tab.instanceId : state.activeTabId;
+      const newHistory = activate ? [
+        ...state.activeTabHistory.filter(
+          (id) => id !== action.tab.instanceId
+        ),
+        action.tab.instanceId
+      ] : state.activeTabHistory;
+      return {
+        ...state,
+        tabs: [...state.tabs, action.tab],
+        activeTabId: newActiveId,
+        activeTabHistory: newHistory
+      };
+    }
+    case "CLOSE_TAB": {
+      const newTabs = state.tabs.filter(
+        (t) => t.instanceId !== action.instanceId
+      );
+      const newHistory = state.activeTabHistory.filter(
+        (id) => id !== action.instanceId
+      );
+      let newActive = state.activeTabId;
+      if (state.activeTabId === action.instanceId) {
+        const previousValidActive = newHistory.length > 0 ? newHistory[newHistory.length - 1] : null;
+        newActive = previousValidActive || (newTabs.length > 0 ? newTabs[newTabs.length - 1].instanceId : null);
+      }
+      const { [action.instanceId]: _removed, ...restData } = state.tabData;
+      return {
+        tabs: newTabs,
+        activeTabId: newActive,
+        tabData: restData,
+        activeTabHistory: newHistory
+      };
+    }
+    case "ACTIVATE_TAB": {
+      if (!state.tabs.some((t) => t.instanceId === action.instanceId))
+        return state;
+      const newHistory = [
+        ...state.activeTabHistory.filter((id) => id !== action.instanceId),
+        action.instanceId
+      ];
+      return {
+        ...state,
+        activeTabId: action.instanceId,
+        activeTabHistory: newHistory
+      };
+    }
+    case "CLOSE_ALL":
+      return { tabs: [], activeTabId: null, tabData: {}, activeTabHistory: [] };
+    case "CLOSE_OTHERS": {
+      const kept = state.tabs.filter((t) => t.instanceId === action.instanceId);
+      const keptIds = new Set(kept.map((t) => t.instanceId));
+      const keptData = {};
+      for (const id of keptIds) {
+        if (state.tabData[id]) keptData[id] = state.tabData[id];
+      }
+      const newHistory = state.activeTabHistory.filter(
+        (id) => id === action.instanceId
+      );
+      return {
+        tabs: kept,
+        activeTabId: action.instanceId,
+        tabData: keptData,
+        activeTabHistory: newHistory
+      };
+    }
+    case "SET_DATA":
+      return {
+        ...state,
+        tabData: {
+          ...state.tabData,
+          [action.instanceId]: {
+            ...state.tabData[action.instanceId] ?? {},
+            ...action.data
+          }
+        }
+      };
+    case "REMOVE_DATA": {
+      const { [action.instanceId]: _removed, ...rest } = state.tabData;
+      return { ...state, tabData: rest };
+    }
+    case "RESTORE": {
+      const restoredActive = action.state.activeTabId;
+      const newHistory = restoredActive ? [
+        ...state.activeTabHistory.filter((id) => id !== restoredActive),
+        restoredActive
+      ] : state.activeTabHistory;
+      return { ...state, ...action.state, activeTabHistory: newHistory };
+    }
+    default:
+      return state;
+  }
+}
+function createMultiTabStore(initialState) {
+  let state = initialState;
+  const listeners = /* @__PURE__ */ new Set();
+  const getState = () => state;
+  const dispatch = (action) => {
+    state = reducer(state, action);
+    listeners.forEach((listener) => listener());
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  };
+  return {
+    getState,
+    dispatch,
+    subscribe
+  };
+}
+var counter = 0;
+function generateInstanceId(pageId) {
+  counter += 1;
+  return `${pageId}-${counter}`;
+}
+function MultiTabProvider({
+  registry,
+  adapter,
+  defaultActiveTab,
+  children,
+  onTabOpen,
+  onTabClose,
+  onTabChange
+}) {
+  const store = useRef(
+    createMultiTabStore({
+      tabs: [],
+      activeTabId: defaultActiveTab ?? null,
+      tabData: {},
+      activeTabHistory: defaultActiveTab ? [defaultActiveTab] : []
+    })
+  ).current;
+  const cbRef = useRef({ onTabOpen, onTabClose, onTabChange });
+  cbRef.current = { onTabOpen, onTabClose, onTabChange };
+  const prevActiveRef = useRef(defaultActiveTab ?? null);
+  useEffect(
+    () => store.subscribe(() => {
+      const state = store.getState();
+      if (state.activeTabId !== null && state.activeTabId !== prevActiveRef.current) {
+        cbRef.current.onTabChange?.(state.activeTabId);
+      }
+      prevActiveRef.current = state.activeTabId;
+    }),
+    [store]
+  );
+  const initialised = useRef(false);
+  useEffect(() => {
+    if (initialised.current || !adapter) return;
+    initialised.current = true;
+    const saved = adapter.read();
+    if (!saved || saved.tabs.length === 0) return;
+    const restoredTabs = saved.tabs.map((instanceId) => {
+      const parts = instanceId.split("-");
+      for (let i = parts.length - 1; i >= 1; i--) {
+        const candidateId = parts.slice(0, i).join("-");
+        const page = registry.getPage(candidateId);
+        if (page) {
+          return {
+            instanceId,
+            pageId: page.id,
+            label: page.label,
+            closable: page.closable !== false
+          };
+        }
+      }
+      return null;
+    }).filter((t) => t !== null);
+    if (restoredTabs.length > 0) {
+      const activeTab = saved.activeTab && restoredTabs.some((t) => t.instanceId === saved.activeTab) ? saved.activeTab : restoredTabs[restoredTabs.length - 1].instanceId;
+      store.dispatch({
+        type: "RESTORE",
+        state: { tabs: restoredTabs, activeTabId: activeTab }
+      });
+    }
+  }, [adapter, registry, store]);
+  useEffect(() => {
+    if (!adapter) return;
+    return store.subscribe(() => {
+      const { tabs, activeTabId } = store.getState();
+      adapter.write(tabs, activeTabId);
+    });
+  }, [adapter, store]);
+  useEffect(() => {
+    if (!adapter?.subscribe) return;
+    const unsubscribe = adapter.subscribe(() => {
+      const saved = adapter.read();
+      const currentState = store.getState();
+      if (saved?.activeTab && saved.activeTab !== currentState.activeTabId) {
+        store.dispatch({ type: "ACTIVATE_TAB", instanceId: saved.activeTab });
+      }
+    });
+    return unsubscribe;
+  }, [adapter, store]);
+  useEffect(() => () => adapter?.destroy?.(), [adapter]);
+  const openTab = useCallback(
+    (pageId, options) => {
+      const page = registry.getPage(pageId);
+      if (!page) {
+        throw new Error(
+          `react-multi-tab: Page "${pageId}" not found in registry.`
+        );
+      }
+      const instanceId = options?.instanceId ?? generateInstanceId(pageId);
+      const tab = {
+        instanceId,
+        pageId,
+        label: options?.label ?? page.label,
+        closable: page.closable !== false
+      };
+      store.dispatch({
+        type: "OPEN_TAB",
+        tab,
+        activate: options?.activate !== false
+      });
+      cbRef.current.onTabOpen?.(tab);
+      return instanceId;
+    },
+    [registry, store]
+  );
+  const closeTab = useCallback(
+    (instanceId) => {
+      store.dispatch({ type: "CLOSE_TAB", instanceId });
+      cbRef.current.onTabClose?.(instanceId);
+    },
+    [store]
+  );
+  const activateTab = useCallback(
+    (instanceId) => {
+      store.dispatch({ type: "ACTIVATE_TAB", instanceId });
+    },
+    [store]
+  );
+  const closeAllTabs = useCallback(() => {
+    store.dispatch({ type: "CLOSE_ALL" });
+  }, [store]);
+  const closeOtherTabs = useCallback(
+    (instanceId) => {
+      store.dispatch({ type: "CLOSE_OTHERS", instanceId });
+    },
+    [store]
+  );
+  const setTabData = useCallback(
+    (instanceId, data) => {
+      store.dispatch({ type: "SET_DATA", instanceId, data });
+    },
+    [store]
+  );
+  const getTabData = useCallback(
+    (instanceId) => store.getState().tabData[instanceId] ?? {},
+    [store]
+  );
+  const removeTabData = useCallback(
+    (instanceId) => {
+      store.dispatch({ type: "REMOVE_DATA", instanceId });
+    },
+    [store]
+  );
+  const contextValue = useMemo(
+    () => ({
+      store,
+      registry,
+      openTab,
+      closeTab,
+      activateTab,
+      closeAllTabs,
+      closeOtherTabs,
+      setTabData,
+      getTabData,
+      removeTabData
+    }),
+    [
+      store,
+      registry,
+      openTab,
+      closeTab,
+      activateTab,
+      closeAllTabs,
+      closeOtherTabs,
+      setTabData,
+      getTabData,
+      removeTabData
+    ]
+  );
+  return /* @__PURE__ */ jsx(MultiTabContext.Provider, { value: contextValue, children });
+}
+function TabList({
+  children,
+  className,
+  style,
+  ...ariaProps
+}) {
+  const listRef = useRef(null);
+  const handleKeyDown = useCallback(
+    (e) => {
+      const tabElements = listRef.current?.querySelectorAll('[role="tab"]');
+      if (!tabElements || tabElements.length === 0) return;
+      const tabs = Array.from(tabElements);
+      const currentIndex = tabs.findIndex(
+        (el) => el === document.activeElement
+      );
+      let nextIndex = null;
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault();
+          nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault();
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+          break;
+        case "Home":
+          e.preventDefault();
+          nextIndex = 0;
+          break;
+        case "End":
+          e.preventDefault();
+          nextIndex = tabs.length - 1;
+          break;
+        default:
+          return;
+      }
+      if (nextIndex !== null) {
+        tabs[nextIndex].focus();
+      }
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "tablist",
+      className,
+      style,
+      onKeyDown: handleKeyDown,
+      ...ariaProps,
+      children
+    }
+  );
+}
+function useInternalContext() {
+  const ctx = useContext(MultiTabContext);
+  if (!ctx) {
+    throw new Error(
+      "react-multi-tab: Hooks must be used within a <MultiTabProvider>."
+    );
+  }
+  return ctx;
+}
+function TabTrigger({
+  instanceId,
+  children,
+  className,
+  style,
+  disabled = false
+}) {
+  const { store, activateTab } = useInternalContext();
+  const state = useSyncExternalStore(store.subscribe, store.getState);
+  const isActive = state.activeTabId === instanceId;
+  const handleClick = useCallback(() => {
+    if (!disabled) activateTab(instanceId);
+  }, [instanceId, disabled, activateTab]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if ((e.key === "Enter" || e.key === " ") && !disabled) {
+        e.preventDefault();
+        activateTab(instanceId);
+      }
+    },
+    [instanceId, disabled, activateTab]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tab",
+      id: `rmt-tab-${instanceId}`,
+      "aria-selected": isActive,
+      "aria-controls": `rmt-tabpanel-${instanceId}`,
+      tabIndex: isActive ? 0 : -1,
+      className,
+      style,
+      "aria-disabled": disabled,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "data-state": isActive ? "active" : "inactive",
+      children
+    }
+  );
+}
+function TabPanel({
+  instanceId,
+  children,
+  hidden = false,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tabpanel",
+      id: `rmt-tabpanel-${instanceId}`,
+      "aria-labelledby": `rmt-tab-${instanceId}`,
+      tabIndex: 0,
+      hidden,
+      className,
+      style,
+      children
+    }
+  );
+}
+var TabInstanceContext = createContext(null);
+function useTabInstanceId() {
+  const instanceId = useContext(TabInstanceContext);
+  if (!instanceId) {
+    throw new Error(
+      "react-multi-tab: useTabInstanceId must be used within a component rendered inside a Tab."
+    );
+  }
+  return instanceId;
+}
+function TabContent({ instanceId, children }) {
+  return /* @__PURE__ */ jsx(TabInstanceContext.Provider, { value: instanceId, children });
+}
+function TabPanels({ className, style }) {
+  const { store, registry, setTabData } = useInternalContext();
+  const state = useSyncExternalStore(store.subscribe, store.getState);
+  return /* @__PURE__ */ jsx("div", { className, style, children: state.tabs.map((tab) => {
+    const page = registry.getPage(tab.pageId);
+    if (!page) return null;
+    const isActive = state.activeTabId === tab.instanceId;
+    const data = state.tabData[tab.instanceId] ?? {};
+    const Component = page.component;
+    return /* @__PURE__ */ jsx(
+      TabPanel,
+      {
+        instanceId: tab.instanceId,
+        hidden: !isActive,
+        children: /* @__PURE__ */ jsx(TabContent, { instanceId: tab.instanceId, children: /* @__PURE__ */ jsx(
+          Component,
+          {
+            instanceId: tab.instanceId,
+            data,
+            setData: (update) => setTabData(tab.instanceId, update)
+          }
+        ) })
+      },
+      tab.instanceId
+    );
+  }) });
+}
+function TabCloseButton({
+  instanceId,
+  children,
+  className,
+  style,
+  "aria-label": ariaLabel
+}) {
+  const { store, closeTab } = useInternalContext();
+  const state = useSyncExternalStore(store.subscribe, store.getState);
+  const tab = state.tabs.find((t) => t.instanceId === instanceId);
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      closeTab(instanceId);
+    },
+    [instanceId, closeTab]
+  );
+  if (!tab || !tab.closable) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": ariaLabel ?? `Close ${tab.label}`,
+      className,
+      style,
+      onClick: handleClick,
+      tabIndex: -1,
+      children: children ?? "\xD7"
+    }
+  );
+}
+function useMultiTab() {
+  const {
+    store,
+    openTab,
+    closeTab,
+    activateTab,
+    closeAllTabs,
+    closeOtherTabs
+  } = useInternalContext();
+  const state = useSyncExternalStore(store.subscribe, store.getState);
+  return {
+    tabs: state.tabs,
+    activeTabId: state.activeTabId,
+    openTab,
+    closeTab,
+    activateTab,
+    closeAllTabs,
+    closeOtherTabs
+  };
+}
+var EMPTY_DATA = Object.freeze({});
+function useTabData(instanceId) {
+  const { store, setTabData } = useInternalContext();
+  const contextId = useContext(TabInstanceContext);
+  const fallbackId = store.getState().activeTabId;
+  const resolvedId = instanceId ?? contextId ?? fallbackId;
+  const getSnapshot = useCallback(() => {
+    if (!resolvedId) return EMPTY_DATA;
+    const tabData = store.getState().tabData[resolvedId];
+    return tabData ?? EMPTY_DATA;
+  }, [resolvedId, store]);
+  const data = useSyncExternalStore(store.subscribe, getSnapshot);
+  const setData = useCallback(
+    (update) => {
+      if (resolvedId) {
+        setTabData(resolvedId, update);
+      }
+    },
+    [resolvedId, setTabData]
+  );
+  return [data, setData];
+}
+
+// src/registry.ts
+function createPageRegistry(pages) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const page of pages) {
+    if (!page.id) {
+      throw new Error("react-multi-tab: Page definition must have an id.");
+    }
+    if (!page.label) {
+      throw new Error(`react-multi-tab: Page "${page.id}" must have a label.`);
+    }
+    if (!page.component) {
+      throw new Error(
+        `react-multi-tab: Page "${page.id}" must have a component.`
+      );
+    }
+    if (ids.has(page.id)) {
+      throw new Error(`react-multi-tab: Duplicate page id: "${page.id}".`);
+    }
+    ids.add(page.id);
+  }
+  const frozen = [...pages];
+  return {
+    pages: frozen,
+    getPage: (id) => frozen.find((p) => p.id === id)
+  };
+}
+
+// src/adapters/memory.ts
+function memoryAdapter() {
+  return {
+    read: () => null,
+    write: () => {
+    }
+  };
+}
+
+// src/adapters/search-params.ts
+function searchParamsAdapter(options) {
+  const tabsKey = options?.tabsParam ?? "tabs";
+  const activeKey = options?.activeParam ?? "active";
+  return {
+    read() {
+      if (typeof window === "undefined") return null;
+      const params = new URLSearchParams(window.location.search);
+      const tabsStr = params.get(tabsKey);
+      const activeTab = params.get(activeKey);
+      if (!tabsStr) return null;
+      const tabs = tabsStr.split(",").filter(Boolean);
+      return { tabs, activeTab };
+    },
+    write(tabs, activeTabId) {
+      if (typeof window === "undefined") return;
+      const params = new URLSearchParams(window.location.search);
+      if (tabs.length > 0) {
+        params.set(tabsKey, tabs.map((t) => t.instanceId).join(","));
+        if (activeTabId) {
+          params.set(activeKey, activeTabId);
+        } else {
+          params.delete(activeKey);
+        }
+      } else {
+        params.delete(tabsKey);
+        params.delete(activeKey);
+      }
+      const qs = params.toString().replace(/%2C/g, ",");
+      const newUrl = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
+      window.history.replaceState(null, "", newUrl);
+    },
+    subscribe(callback) {
+      window.addEventListener("popstate", callback);
+      return () => window.removeEventListener("popstate", callback);
+    }
+  };
+}
+
+export { MultiTabProvider, TabCloseButton, TabContent, TabList, TabPanel, TabPanels, TabTrigger, createPageRegistry, memoryAdapter, searchParamsAdapter, useMultiTab, useTabData, useTabInstanceId };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map