musae 1.0.27-beta.2 → 1.0.27-beta.21

package/dist/components/tabs/hooks/use-navigation.mjs

@@ -0,0 +1,85 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useEvent, clamp, useResize, useMount, useMounted } from '@aiszlab/relax';
+import { useRef, useState, useMemo } from 'react';
+
+/**
+ * @description
+ * count dom ele size
+ */
+var useNavigation = function useNavigation() {
+  var navigatorRef = useRef(null);
+  var tabsRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    offset = _useState2[0],
+    setOffset = _useState2[1];
+  // navigator size
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    navigatorSize = _useState4[0],
+    setNavigatorSize = _useState4[1];
+  // tabs size
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tabsSize = _useState6[0],
+    setTabsSize = _useState6[1];
+  var _useMemo = useMemo(function () {
+      return {
+        maxOffset: Math.max(0, tabsSize - navigatorSize),
+        minOffset: 0
+      };
+    }, [navigatorSize, tabsSize]),
+    maxOffset = _useMemo.maxOffset,
+    minOffset = _useMemo.minOffset;
+  // handle scroll
+  var scrollNavigation = useEvent(function (delta) {
+    setOffset(clamp(delta, minOffset, maxOffset));
+  });
+  var resize = useEvent(function () {
+    var _navigatorRef$current, _navigatorRef$current2, _tabsRef$current$getB, _tabsRef$current;
+    var _navigatorSize = (_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.getBoundingClientRect().width) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0;
+    var _tabsSize = (_tabsRef$current$getB = (_tabsRef$current = tabsRef.current) === null || _tabsRef$current === void 0 ? void 0 : _tabsRef$current.getBoundingClientRect().width) !== null && _tabsRef$current$getB !== void 0 ? _tabsRef$current$getB : 0;
+    setNavigatorSize(_navigatorSize);
+    setTabsSize(_tabsSize);
+    scrollNavigation(0);
+  });
+  var _useMemo2 = useMemo(function () {
+      return {
+        isLeadingOverflow: offset > minOffset,
+        isTrailingOverflow: offset < maxOffset
+      };
+    }, [minOffset, maxOffset, offset]),
+    isLeadingOverflow = _useMemo2.isLeadingOverflow,
+    isTrailingOverflow = _useMemo2.isTrailingOverflow;
+  // if window resize
+  // re-calculate offsets range
+  useResize(resize);
+  // mouse wheel
+  var scrollByWheel = useEvent(function (event) {
+    event.preventDefault();
+    var deltaY = event.deltaY;
+    scrollNavigation(offset + deltaY);
+  });
+  // calculate size once at mounting step
+  useMount(function () {
+    resize();
+  });
+  useMounted(function () {
+    var _navigatorRef$current3;
+    (_navigatorRef$current3 = navigatorRef.current) === null || _navigatorRef$current3 === void 0 || _navigatorRef$current3.addEventListener("wheel", scrollByWheel);
+    return function () {
+      var _navigatorRef$current4;
+      (_navigatorRef$current4 = navigatorRef.current) === null || _navigatorRef$current4 === void 0 || _navigatorRef$current4.removeEventListener("wheel", scrollByWheel);
+    };
+  });
+  return {
+    navigatorRef: navigatorRef,
+    tabsRef: tabsRef,
+    offset: offset,
+    isLeadingOverflow: isLeadingOverflow,
+    isTrailingOverflow: isTrailingOverflow,
+    scrollNavigation: scrollNavigation
+  };
+};
+
+export { useNavigation };

package/dist/components/tabs/hooks/use-tabs-context.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var React = require('react');
+var context = require('../context.cjs');
+
+/**
+ * @description
+ * use tab context
+ */
+var useTabsContext = function useTabsContext() {
+  var context$1 = React.useContext(context.Context);
+  if (!context$1) {
+    throw new Error("useTabsContext must be used within a Tabs component");
+  }
+  return context$1;
+};
+
+exports.useTabsContext = useTabsContext;

package/dist/components/tabs/hooks/use-tabs-context.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description
+ * use tab context
+ */
+export declare const useTabsContext: () => import("../../../types/tabs").ContextValue & {
+    classNames: typeof import("../context").CLASS_NAMES;
+};

package/dist/components/tabs/hooks/use-tabs-context.mjs

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { Context } from '../context.mjs';
+
+/**
+ * @description
+ * use tab context
+ */
+var useTabsContext = function useTabsContext() {
+  var context = useContext(Context);
+  if (!context) {
+    throw new Error("useTabsContext must be used within a Tabs component");
+  }
+  return context;
+};
+
+export { useTabsContext };

package/dist/components/tabs/hooks/use-tabs.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var relax = require('@aiszlab/relax');
+
+/**
+ * @description
+ * tabs
+ */
+var useTabs = function useTabs(_ref) {
+  var _items$at;
+  var _activeKey = _ref.activeKey,
+    items = _ref.items,
+    defaultActiveKey = _ref.defaultActiveKey,
+    onChange = _ref.onChange;
+  var _useControlledState = relax.useControlledState(_activeKey, {
+      defaultState: defaultActiveKey !== null && defaultActiveKey !== void 0 ? defaultActiveKey : (_items$at = items.at(0)) === null || _items$at === void 0 ? void 0 : _items$at.key,
+      onChange: relax.useEvent(function (selectedKey) {
+        if (relax.isUndefined(selectedKey)) return;
+        onChange === null || onChange === void 0 || onChange(selectedKey);
+      })
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    activeKey = _useControlledState2[0],
+    setActiveKey = _useControlledState2[1];
+  var _useState = React.useState(function () {
+      return new Set(relax.isUndefined(activeKey) ? void 0 : [activeKey]);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    activatedKeys = _useState2[0],
+    setActivatedKeys = _useState2[1];
+  var changeActiveKey = relax.useEvent(function (key) {
+    setActiveKey(key);
+    setActivatedKeys(function (prev) {
+      return new Set(prev).add(key);
+    });
+  });
+  return {
+    activeKey: activeKey,
+    activatedKeys: activatedKeys,
+    changeActiveKey: changeActiveKey
+  };
+};
+
+exports.useTabs = useTabs;

package/dist/components/tabs/hooks/use-tabs.d.ts

@@ -0,0 +1,17 @@
+import { type Key } from "react";
+import { type TabItem, type TabsProps } from "../../../types/tabs";
+import type { Partialable } from "@aiszlab/relax/types";
+/**
+ * @description
+ * tabs
+ */
+export declare const useTabs: ({ activeKey: _activeKey, items, defaultActiveKey, onChange, }: {
+    activeKey?: Key;
+    items: TabItem[];
+    defaultActiveKey?: Key;
+    onChange?: TabsProps["onChange"];
+}) => {
+    activeKey: Partialable<Key>;
+    activatedKeys: Set<Key>;
+    changeActiveKey: (key: Key) => void;
+};

package/dist/components/tabs/hooks/use-tabs.mjs

@@ -0,0 +1,44 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState } from 'react';
+import { useControlledState, useEvent, isUndefined } from '@aiszlab/relax';
+
+/**
+ * @description
+ * tabs
+ */
+var useTabs = function useTabs(_ref) {
+  var _items$at;
+  var _activeKey = _ref.activeKey,
+    items = _ref.items,
+    defaultActiveKey = _ref.defaultActiveKey,
+    onChange = _ref.onChange;
+  var _useControlledState = useControlledState(_activeKey, {
+      defaultState: defaultActiveKey !== null && defaultActiveKey !== void 0 ? defaultActiveKey : (_items$at = items.at(0)) === null || _items$at === void 0 ? void 0 : _items$at.key,
+      onChange: useEvent(function (selectedKey) {
+        if (isUndefined(selectedKey)) return;
+        onChange === null || onChange === void 0 || onChange(selectedKey);
+      })
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    activeKey = _useControlledState2[0],
+    setActiveKey = _useControlledState2[1];
+  var _useState = useState(function () {
+      return new Set(isUndefined(activeKey) ? void 0 : [activeKey]);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    activatedKeys = _useState2[0],
+    setActivatedKeys = _useState2[1];
+  var changeActiveKey = useEvent(function (key) {
+    setActiveKey(key);
+    setActivatedKeys(function (prev) {
+      return new Set(prev).add(key);
+    });
+  });
+  return {
+    activeKey: activeKey,
+    activatedKeys: activatedKeys,
+    changeActiveKey: changeActiveKey
+  };
+};
+
+export { useTabs };

package/dist/components/tabs/navigation.cjs

@@ -4,34 +4,56 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.17.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
 var tab = require('./tab.cjs');
 var react = require('motion/react');
 var relax = require('@aiszlab/relax');
-var hooks = require('./hooks.cjs');
 var className = require('@aiszlab/relax/class-name');
 var useThemeColorVars = require('../../hooks/use-theme-color-vars.cjs');
+var useTabsContext = require('./hooks/use-tabs-context.cjs');
+var useNavigation = require('./hooks/use-navigation.cjs');
 
+var styles = {
+  indicator: {
+    "default": {
+      kWkggS: "musaex-19fix8x",
+      kVAEAm: "musaex-10l6tqk",
+      krVfgx: "musaex-1c1gxxa",
+      kIxVMA: "musaex-421gk9",
+      ksF3WI: "musaex-4izuhl",
+      $$css: true
+    },
+    medium: {
+      kZKoxP: "musaex-rftw1c",
+      $$css: true
+    },
+    small: {
+      kZKoxP: "musaex-12yrczq",
+      $$css: true
+    },
+    large: {
+      kZKoxP: "musaex-rntz3j",
+      $$css: true
+    }
+  }
+};
 var Navigation = function Navigation(_ref) {
   var onChange = _ref.onChange;
-  var _useTabsContext = hooks.useTabsContext(),
+  var _useTabsContext = useTabsContext.useTabsContext(),
     activeKey = _useTabsContext.activeKey,
     items = _useTabsContext.items,
-    classNames = _useTabsContext.classNames;
+    classNames = _useTabsContext.classNames,
+    size = _useTabsContext.size;
   var indicatorRef = React.useRef(null);
   var tabItemsRef = React.useRef(new Map());
-  var _useNavigation = hooks.useNavigation(),
+  var _useNavigation = useNavigation.useNavigation(),
     navigatorRef = _useNavigation.navigatorRef,
     tabsRef = _useNavigation.tabsRef,
-    scroll = _useNavigation.scroll,
     offset = _useNavigation.offset,
+    scrollNavigation = _useNavigation.scrollNavigation,
     isLeadingOverflow = _useNavigation.isLeadingOverflow,
     isTrailingOverflow = _useNavigation.isTrailingOverflow;
   var _themeColorVars = useThemeColorVars.useThemeColorVars(["outline-variant", "primary"]);
-  // control tabs scroll
-  hooks.useNavigatorScroll({
-    navigatorRef: navigatorRef,
-    scroll: scroll
-  });
   var styled = {
     navigation: {
       className: "musaex-quqrak musaex-d1xpcx musaex-1q0q8m5"
@@ -51,13 +73,11 @@ var Navigation = function Navigation(_ref) {
       }
     }[!!isLeadingOverflow << 1 | !!isTrailingOverflow << 0],
     list: {
-      className: "musaex-78zum5 musaex-eq5yr9 musaex-o9m17b"
+      className: "musaex-78zum5 musaex-eq5yr9 musaex-12eyqs9 musaex-bngzmg"
     },
-    indicator: {
-      className: "musaex-rftw1c musaex-19fix8x musaex-10l6tqk musaex-1c1gxxa"
-    }
+    indicator: stylex.props(styles.indicator["default"], styles.indicator[size])
   };
-  // repaint indicator when activeKey changed
+  // repaint indicator when activeKey or size changed
   // animate indicator to correct position & width
   React.useEffect(function () {
     var indicator = indicatorRef.current;
@@ -68,12 +88,22 @@ var Navigation = function Navigation(_ref) {
       left: tabItem === null || tabItem === void 0 ? void 0 : tabItem.offsetLeft,
       width: tabItem === null || tabItem === void 0 ? void 0 : tabItem.clientWidth
     });
-  }, [activeKey]);
+  }, [activeKey, size]);
+  // 用户手动切换`tab`选项
+  // 1. 切换`tab`后，尝试滚动`tab`到中间为止
+  var changeTabItem = relax.useEvent(function (key) {
+    var tabItem = tabItemsRef.current.get(key);
+    if (tabItem) {
+      var _navigatorRef$current, _navigatorRef$current2;
+      scrollNavigation(tabItem.offsetLeft - ((_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.clientWidth) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0) / 2);
+    }
+    onChange(key);
+  });
   return /*#__PURE__*/React.createElement("div", {
     role: "tablist",
     className: className.stringify(classNames.navigation, styled.navigation.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.navigation.style), _themeColorVars), {}, {
-      "--offset": offset
+      "--offset": offset + "px"
     })
   }, /*#__PURE__*/React.createElement("div", {
     ref: navigatorRef,
@@ -88,7 +118,7 @@ var Navigation = function Navigation(_ref) {
       key: item.key,
       value: item.key,
       label: item.label,
-      onClick: onChange,
+      onClick: changeTabItem,
       ref: function ref(_tab) {
         tabItemsRef.current.set(item.key, _tab);
       }

package/dist/components/tabs/navigation.mjs

@@ -1,33 +1,55 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import React, { useRef, useEffect } from 'react';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.17.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Tab from './tab.mjs';
 import { animate } from 'motion/react';
-import { isUndefined } from '@aiszlab/relax';
-import { useTabsContext, useNavigation, useNavigatorScroll } from './hooks.mjs';
+import { isUndefined, useEvent } from '@aiszlab/relax';
 import { stringify } from '@aiszlab/relax/class-name';
 import { useThemeColorVars } from '../../hooks/use-theme-color-vars.mjs';
+import { useTabsContext } from './hooks/use-tabs-context.mjs';
+import { useNavigation } from './hooks/use-navigation.mjs';
 
+var styles = {
+  indicator: {
+    "default": {
+      kWkggS: "musaex-19fix8x",
+      kVAEAm: "musaex-10l6tqk",
+      krVfgx: "musaex-1c1gxxa",
+      kIxVMA: "musaex-421gk9",
+      ksF3WI: "musaex-4izuhl",
+      $$css: true
+    },
+    medium: {
+      kZKoxP: "musaex-rftw1c",
+      $$css: true
+    },
+    small: {
+      kZKoxP: "musaex-12yrczq",
+      $$css: true
+    },
+    large: {
+      kZKoxP: "musaex-rntz3j",
+      $$css: true
+    }
+  }
+};
 var Navigation = function Navigation(_ref) {
   var onChange = _ref.onChange;
   var _useTabsContext = useTabsContext(),
     activeKey = _useTabsContext.activeKey,
     items = _useTabsContext.items,
-    classNames = _useTabsContext.classNames;
+    classNames = _useTabsContext.classNames,
+    size = _useTabsContext.size;
   var indicatorRef = useRef(null);
   var tabItemsRef = useRef(new Map());
   var _useNavigation = useNavigation(),
     navigatorRef = _useNavigation.navigatorRef,
     tabsRef = _useNavigation.tabsRef,
-    scroll = _useNavigation.scroll,
     offset = _useNavigation.offset,
+    scrollNavigation = _useNavigation.scrollNavigation,
     isLeadingOverflow = _useNavigation.isLeadingOverflow,
     isTrailingOverflow = _useNavigation.isTrailingOverflow;
   var _themeColorVars = useThemeColorVars(["outline-variant", "primary"]);
-  // control tabs scroll
-  useNavigatorScroll({
-    navigatorRef: navigatorRef,
-    scroll: scroll
-  });
   var styled = {
     navigation: {
       className: "musaex-quqrak musaex-d1xpcx musaex-1q0q8m5"
@@ -47,13 +69,11 @@ var Navigation = function Navigation(_ref) {
       }
     }[!!isLeadingOverflow << 1 | !!isTrailingOverflow << 0],
     list: {
-      className: "musaex-78zum5 musaex-eq5yr9 musaex-o9m17b"
+      className: "musaex-78zum5 musaex-eq5yr9 musaex-12eyqs9 musaex-bngzmg"
     },
-    indicator: {
-      className: "musaex-rftw1c musaex-19fix8x musaex-10l6tqk musaex-1c1gxxa"
-    }
+    indicator: props(styles.indicator["default"], styles.indicator[size])
   };
-  // repaint indicator when activeKey changed
+  // repaint indicator when activeKey or size changed
   // animate indicator to correct position & width
   useEffect(function () {
     var indicator = indicatorRef.current;
@@ -64,12 +84,22 @@ var Navigation = function Navigation(_ref) {
       left: tabItem === null || tabItem === void 0 ? void 0 : tabItem.offsetLeft,
       width: tabItem === null || tabItem === void 0 ? void 0 : tabItem.clientWidth
     });
-  }, [activeKey]);
+  }, [activeKey, size]);
+  // 用户手动切换`tab`选项
+  // 1. 切换`tab`后，尝试滚动`tab`到中间为止
+  var changeTabItem = useEvent(function (key) {
+    var tabItem = tabItemsRef.current.get(key);
+    if (tabItem) {
+      var _navigatorRef$current, _navigatorRef$current2;
+      scrollNavigation(tabItem.offsetLeft - ((_navigatorRef$current = (_navigatorRef$current2 = navigatorRef.current) === null || _navigatorRef$current2 === void 0 ? void 0 : _navigatorRef$current2.clientWidth) !== null && _navigatorRef$current !== void 0 ? _navigatorRef$current : 0) / 2);
+    }
+    onChange(key);
+  });
   return /*#__PURE__*/React.createElement("div", {
     role: "tablist",
     className: stringify(classNames.navigation, styled.navigation.className),
     style: _objectSpread(_objectSpread(_objectSpread({}, styled.navigation.style), _themeColorVars), {}, {
-      "--offset": offset
+      "--offset": offset + "px"
     })
   }, /*#__PURE__*/React.createElement("div", {
     ref: navigatorRef,
@@ -84,7 +114,7 @@ var Navigation = function Navigation(_ref) {
       key: item.key,
       value: item.key,
       label: item.label,
-      onClick: onChange,
+      onClick: changeTabItem,
       ref: function ref(_tab) {
         tabItemsRef.current.set(item.key, _tab);
       }

package/dist/components/tabs/panels.cjs

@@ -2,67 +2,84 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _createForOfIteratorHelper = require('@babel/runtime/helpers/createForOfIteratorHelper');
 var React = require('react');
 var className = require('@aiszlab/relax/class-name');
 var relax = require('@aiszlab/relax');
-var hooks = require('./hooks.cjs');
+var useTabsContext = require('./hooks/use-tabs-context.cjs');
 
 var Panels = function Panels(_ref) {
   var forceRender = _ref.forceRender,
     destroyable = _ref.destroyable,
     activatedKeys = _ref.activatedKeys;
-  var _useTabsContext = hooks.useTabsContext(),
+  var _useTabsContext = useTabsContext.useTabsContext(),
     items = _useTabsContext.items,
     activeKey = _useTabsContext.activeKey,
     classNames = _useTabsContext.classNames;
-  var styled = {
-    panels: {
-      className: "musaex-bvu51n"
-    },
-    panel: {
-      active: {},
-      hidden: {
-        className: "musaex-1s85apg"
-      }
-    }
-  };
+  // 收集需要渲染的面板内容
   var panels = React.useMemo(function () {
+    var renderedPanels = [];
     if (relax.isUndefined(activeKey)) {
-      return [];
+      return renderedPanels;
     }
-    if (destroyable) {
-      var _items$find;
-      return [[activeKey, (_items$find = items.find(function (item) {
-        return item.key === activeKey;
-      })) === null || _items$find === void 0 ? void 0 : _items$find.children]];
-    }
-    if (forceRender) {
-      return items.map(function (item) {
-        return [item.key, item.children];
-      });
+    var _iterator = _createForOfIteratorHelper(items),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        if (destroyable) {
+          if (item.key !== activeKey) {
+            continue;
+          }
+          if (item.children) {
+            renderedPanels.push({
+              key: item.key,
+              children: item.children
+            });
+          }
+          break;
+        }
+        if (forceRender || activatedKeys.has(item.key)) {
+          if (item.children) {
+            renderedPanels.push({
+              key: item.key,
+              children: item.children
+            });
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
     }
-    return items.map(function (item) {
-      return [item.key, activatedKeys.has(item.key) ? item.children : null];
-    });
+    return renderedPanels;
   }, [destroyable, forceRender, items, activeKey, activatedKeys]);
+  var styled = {
+    panels: {
+      0: {},
+      1: {
+        className: "musaex-1y9dh0z"
+      }
+    }[!!(panels.length > 0) << 0]
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: className.stringify(classNames.panels, styled.panels.className),
     style: styled.panels.style
   }, panels.map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      key = _ref3[0],
-      children = _ref3[1];
-    var _ref4 = key === activeKey ? styled.panel.active : styled.panel.hidden,
-      className$1 = _ref4.className,
-      style = _ref4.style;
-    if (relax.isVoid(children)) {
-      return null;
-    }
+    var key = _ref2.key,
+      children = _ref2.children;
+    var isActive = key === activeKey;
+    var panelStyled = {
+      0: {},
+      1: {
+        className: "musaex-1s85apg"
+      }
+    }[!!!isActive << 0];
     return /*#__PURE__*/React.createElement("div", {
       key: key,
-      className: className.stringify(classNames.panel, className$1),
-      style: style
+      className: className.stringify(classNames.panel, panelStyled.className),
+      style: panelStyled.style
     }, children);
   }));
 };