@bifrostui/utils 2.0.0-alpha.2 → 2.0.0-alpha.20

package/dist/ssr/index.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var ssr_exports = {};
+__export(ssr_exports, {
+  canUseDOM: () => import_canUseDOM.canUseDOM
+});
+module.exports = __toCommonJS(ssr_exports);
+var import_canUseDOM = require("./canUseDOM");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  canUseDOM
+});

package/dist/themeCreator/cssVarToValue.d.ts

@@ -1,4 +1,20 @@
 import { CssVarToValueOptions } from './index.types';
+/**
+ * 设置全局默认主题变量
+ * 建议在小程序入口文件(app.ts)中调用，设置后所有组件都会使用该主题
+ * 支持主题继承：如果设置的主题中某个变量不存在，会自动从 defaultLight 继承
+ * @param themeVars 主题CSS变量对象
+ * @example
+ * import { setDefaultThemeVars } from '@bifrostui/utils';
+ * import { pioneerLight } from '@bifrostui/styles/registry';
+ * setDefaultThemeVars(pioneerLight.cssVars);
+ */
+export declare const setDefaultThemeVars: (themeVars: Record<string, string> | undefined) => void;
+/**
+ * 获取当前全局默认主题变量
+ * 返回合并后的主题变量（自定义主题 + defaultLight 基础主题）
+ */
+export declare const getDefaultThemeVars: () => Record<string, string> | undefined;
 /**
  * css变量转值
  */

package/dist/themeCreator/cssVarToValue.js

@@ -1,7 +1,21 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -17,15 +31,27 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var cssVarToValue_exports = {};
 __export(cssVarToValue_exports, {
-  cssVarToValue: () => cssVarToValue
+  cssVarToValue: () => cssVarToValue,
+  getDefaultThemeVars: () => getDefaultThemeVars,
+  setDefaultThemeVars: () => setDefaultThemeVars
 });
 module.exports = __toCommonJS(cssVarToValue_exports);
 var import_registry = require("@bifrostui/styles/registry");
+let globalDefaultThemeVars;
+const setDefaultThemeVars = (themeVars) => {
+  globalDefaultThemeVars = themeVars;
+};
+const getDefaultThemeVars = () => {
+  var _a, _b;
+  if (!globalDefaultThemeVars) {
+    return (_a = import_registry.defaultLight) == null ? void 0 : _a.cssVars;
+  }
+  return __spreadValues(__spreadValues({}, (_b = import_registry.defaultLight) == null ? void 0 : _b.cssVars), globalDefaultThemeVars);
+};
 const cssVarToValue = (options) => {
-  var _a;
   const {
     cssVar,
-    themeVars = (_a = import_registry.defaultLight) == null ? void 0 : _a.cssVars,
+    themeVars = getDefaultThemeVars(),
     _visitedKeys = /* @__PURE__ */ new Set()
   } = options || {};
   if (!cssVar)
@@ -48,5 +74,7 @@ const cssVarToValue = (options) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  cssVarToValue
+  cssVarToValue,
+  getDefaultThemeVars,
+  setDefaultThemeVars
 });

package/dist/toArray.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 interface Option {
     keepEmpty?: boolean;
 }

package/dist/toArray.js

@@ -30,17 +30,17 @@ __export(toArray_exports, {
   default: () => toArray
 });
 module.exports = __toCommonJS(toArray_exports);
-var import_react = __toESM(require("react"));
+var React = __toESM(require("react"));
 var import_react_is = require("react-is");
 function toArray(children, option = {}) {
   let ret = [];
-  import_react.default.Children.forEach(children, (child) => {
+  React.Children.forEach(children, (child) => {
     if ((child === void 0 || child === null) && !option.keepEmpty) {
       return;
     }
     if (Array.isArray(child)) {
       ret = ret.concat(toArray(child));
-    } else if ((0, import_react_is.isFragment)(child) && child.props) {
+    } else if ((0, import_react_is.isFragment)(child) && React.isValidElement(child)) {
       ret = ret.concat(toArray(child.props.children, option));
     } else {
       ret.push(child);

package/dist/transitions.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 interface IEasing {
     easeInOut: string;
     easeIn: string;

package/dist/transitions.js

@@ -75,7 +75,7 @@ function formatMs(milliseconds) {
 function createTransitions(inputTransitions = {}) {
   const mergedEasing = __spreadValues(__spreadValues({}, easing), inputTransitions.easing);
   const mergedDuration = __spreadValues(__spreadValues({}, duration), inputTransitions.duration);
-  const create = (props = ["all"], options) => {
+  const create = (props = ["all"], options = {}) => {
     const {
       duration: durationOption = mergedDuration.standard,
       easing: easingOption = mergedEasing.easeInOut,

package/es/context-selector/createContext.d.ts

@@ -0,0 +1,26 @@
+import { Context } from './types';
+/**
+ * Creates a context that supports selective subscriptions.
+ * This allows components to subscribe to only specific parts of the context value
+ * and re-render only when those parts change.
+ *
+ * @param defaultValue - The default value for the context
+ * @returns A context object that can be used with useContextSelector
+ *
+ * @example
+ * ```tsx
+ * interface MyContextValue {
+ *   count: number;
+ *   name: string;
+ * }
+ *
+ * const MyContext = createContext<MyContextValue>({ count: 0, name: '' });
+ *
+ * function MyComponent() {
+ *   // Only re-renders when count changes, not when name changes
+ *   const count = useContextSelector(MyContext, ctx => ctx.count);
+ *   return <div>{count}</div>;
+ * }
+ * ```
+ */
+export declare const createContext: <Value>(defaultValue: Value) => Context<Value>;

package/es/context-selector/createContext.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+import {
+  unstable_NormalPriority as NormalPriority,
+  unstable_runWithPriority as runWithPriority
+} from "scheduler";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect";
+const createProvider = (Original) => {
+  const Provider = (props) => {
+    const valueRef = React.useRef(props.value);
+    const versionRef = React.useRef(0);
+    const contextValue = React.useRef(null);
+    if (!contextValue.current) {
+      contextValue.current = {
+        value: valueRef,
+        version: versionRef,
+        listeners: []
+      };
+    }
+    useIsomorphicLayoutEffect(() => {
+      valueRef.current = props.value;
+      versionRef.current += 1;
+      runWithPriority(NormalPriority, () => {
+        contextValue.current.listeners.forEach(
+          (listener) => {
+            listener([versionRef.current, props.value]);
+          }
+        );
+      });
+    }, [props.value]);
+    return React.createElement(
+      Original,
+      { value: contextValue.current },
+      props.children
+    );
+  };
+  if (process.env.NODE_ENV !== "production") {
+    Provider.displayName = "ContextSelector.Provider";
+  }
+  return Provider;
+};
+const createContext = (defaultValue) => {
+  const context = React.createContext({
+    value: { current: defaultValue },
+    version: { current: -1 },
+    listeners: []
+  });
+  context.Provider = createProvider(context.Provider);
+  delete context.Consumer;
+  return context;
+};
+export {
+  createContext
+};

package/es/context-selector/index.d.ts

@@ -0,0 +1,4 @@
+export { createContext } from './createContext';
+export { useContextSelector } from './useContextSelector';
+export { useHasParentContext } from './useHasParentContext';
+export type { Context, ContextSelector, ContextValue, ContextVersion, } from './types';

package/es/context-selector/index.js

@@ -0,0 +1,8 @@
+import { createContext } from "./createContext";
+import { useContextSelector } from "./useContextSelector";
+import { useHasParentContext } from "./useHasParentContext";
+export {
+  createContext,
+  useContextSelector,
+  useHasParentContext
+};

package/es/context-selector/types.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+/**
+ * @internal
+ */
+export type Context<Value> = React.Context<Value> & {
+    Provider: React.FC<React.ProviderProps<Value>>;
+    Consumer: never;
+};
+export type ContextSelector<Value, SelectedValue> = (value: Value) => SelectedValue;
+/**
+ * @internal
+ */
+export type ContextVersion = number;
+/**
+ * @internal
+ */
+export type ContextValue<Value> = {
+    /** Holds a set of subscribers from components. */
+    listeners: ((payload: readonly [ContextVersion, Value]) => void)[];
+    /** Holds an actual value of React's context that will be propagated down for computations. */
+    value: React.MutableRefObject<Value>;
+    /** A version field is used to sync a context value and consumers. */
+    version: React.MutableRefObject<ContextVersion>;
+};

package/es/context-selector/useContextSelector.d.ts

@@ -0,0 +1,29 @@
+import { Context, ContextSelector } from './types';
+/**
+ * This hook returns context selected value by selector.
+ * It will only accept context created by `createContext` from this package.
+ * It will trigger re-render only if the selected value is referentially changed.
+ *
+ * @param context - Context created by createContext from this package
+ * @param selector - Function that selects a value from the context
+ * @returns The selected value from the context
+ *
+ * @example
+ * ```tsx
+ * interface MyContextValue {
+ *   count: number;
+ *   name: string;
+ * }
+ *
+ * const MyContext = createContext<MyContextValue>({ count: 0, name: '' });
+ *
+ * function Counter() {
+ *   // Only re-renders when count changes, not when name changes
+ *   const count = useContextSelector(MyContext, ctx => ctx.count);
+ *   const increment = useContextSelector(MyContext, ctx => ctx.increment);
+ *
+ *   return <button onClick={increment}>{count}</button>;
+ * }
+ * ```
+ */
+export declare const useContextSelector: <Value, SelectedValue>(context: Context<Value>, selector: ContextSelector<Value, SelectedValue>) => SelectedValue;

package/es/context-selector/useContextSelector.js

@@ -0,0 +1,59 @@
+import * as React from "react";
+import useEventCallback from "../hooks/useEventCallback";
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect";
+const useContextSelector = (context, selector) => {
+  const contextValue = React.useContext(
+    context
+  );
+  const {
+    value: { current: value },
+    version: { current: version },
+    listeners
+  } = contextValue;
+  const selected = selector(value);
+  const [state, setState] = React.useState([
+    value,
+    selected
+  ]);
+  const dispatch = (payload) => {
+    setState((prevState) => {
+      if (!payload) {
+        return [value, selected];
+      }
+      if (payload[0] <= version) {
+        if (Object.is(prevState[1], selected)) {
+          return prevState;
+        }
+        return [value, selected];
+      }
+      try {
+        if (Object.is(prevState[0], payload[1])) {
+          return prevState;
+        }
+        const nextSelected = selector(payload[1]);
+        if (Object.is(prevState[1], nextSelected)) {
+          return prevState;
+        }
+        return [payload[1], nextSelected];
+      } catch (e) {
+        console.error(e);
+      }
+      return [prevState[0], prevState[1]];
+    });
+  };
+  if (!Object.is(state[1], selected)) {
+    dispatch(void 0);
+  }
+  const stableDispatch = useEventCallback(dispatch);
+  useIsomorphicLayoutEffect(() => {
+    listeners.push(stableDispatch);
+    return () => {
+      const index = listeners.indexOf(stableDispatch);
+      listeners.splice(index, 1);
+    };
+  }, [stableDispatch, listeners]);
+  return state[1];
+};
+export {
+  useContextSelector
+};

package/es/context-selector/useHasParentContext.d.ts

@@ -0,0 +1,26 @@
+import { Context } from './types';
+/**
+ * Utility hook for contexts created by createContext from this package
+ * to determine if a parent context exists.
+ *
+ * WARNING: This hook will not work for native React contexts
+ *
+ * @param context - Context created by createContext from this package
+ * @returns Whether the hook is wrapped by a parent context provider
+ *
+ * @example
+ * ```tsx
+ * const MyContext = createContext({ value: 'default' });
+ *
+ * function MyComponent() {
+ *   const hasContext = useHasParentContext(MyContext);
+ *
+ *   if (hasContext) {
+ *     return <div>I am inside context provider</div>;
+ *   } else {
+ *     return <div>I can only use default context value</div>;
+ *   }
+ * }
+ * ```
+ */
+export declare function useHasParentContext<Value>(context: Context<Value>): boolean;

package/es/context-selector/useHasParentContext.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+function useHasParentContext(context) {
+  const contextValue = React.useContext(
+    context
+  );
+  if (contextValue.version) {
+    return contextValue.version.current !== -1;
+  }
+  return false;
+}
+export {
+  useHasParentContext
+};

package/es/directionLocationUtil.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 /**
  * 根据元素宽高判断是否超出边界，超出边界则重新定义方向
  */

package/es/getBoundingClientRect/index.js

@@ -1,16 +1,6 @@
 function getBoundingClientRect(ele) {
   if (!ele) {
-    return Promise.resolve({
-      width: 0,
-      height: 0,
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0,
-      x: 0,
-      y: 0,
-      toJSON: () => ({})
-    });
+    return Promise.resolve(null);
   }
   return Promise.resolve(ele.getBoundingClientRect());
 }

package/es/hooks/useDomReady/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 function useDomReady(cb) {
   React.useEffect(() => {
     cb == null ? void 0 : cb();

package/es/hooks/useEventCallback.d.ts

@@ -1,6 +1,15 @@
 /**
- * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * Modified `useCallback` that can be used when dependencies change too frequently.
  *
- * @param {function} fn
+ * Can occur when:
+ * - User props are dependencies which could change on every render
+ * - Volatile values (i.e. useState/useDispatch) are dependencies which could change frequently
+ *
+ * This should not be used often, but can be a useful re-render optimization since the callback
+ * is a ref and will not be invalidated between re-renders.
+ *
+ * @param fn - The callback function that will be used
+ * @see https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ * @see https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
  */
-export default function useEventCallback(fn: any): (...args: any[]) => any;
+export default function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;

package/es/hooks/useEventCallback.js

@@ -1,10 +1,19 @@
-import React, { useLayoutEffect } from "react";
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 function useEventCallback(fn) {
-  const ref = React.useRef(fn);
-  useLayoutEffect(() => {
-    ref.current = fn;
+  const callbackRef = React.useRef(() => {
+    throw new Error("Cannot call an event handler while rendering");
   });
-  return React.useCallback((...args) => (0, ref.current)(...args), []);
+  useIsomorphicLayoutEffect(() => {
+    callbackRef.current = fn;
+  }, [fn]);
+  return React.useCallback(
+    (...args) => {
+      const callback = callbackRef.current;
+      return callback(...args);
+    },
+    [callbackRef]
+  );
 }
 export {
   useEventCallback as default

package/es/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+/**
+ * React currently throws a warning when using useLayoutEffect on the server. To get around it, we can conditionally
+ * useEffect on the server (no-op) and useLayoutEffect in the browser. We occasionally need useLayoutEffect to
+ * ensure we don't get a render flash for certain operations, but we may also need affected components to render on
+ * the server.
+ *
+ * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
+ */
+export declare const useIsomorphicLayoutEffect: typeof React.useEffect;

package/es/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { canUseDOM } from "../ssr";
+const useIsomorphicLayoutEffect = canUseDOM() ? React.useLayoutEffect : React.useEffect;
+export {
+  useIsomorphicLayoutEffect
+};

package/es/hooks/useMemoizedFn.js

@@ -13,7 +13,7 @@ function useMemoizedFn(fn) {
   fnRef.current = useMemo(() => fn, [fn]);
   const memoizedFn = useRef();
   if (!memoizedFn.current) {
-    memoizedFn.current = function(...args) {
+    memoizedFn.current = function memoized(...args) {
       return fnRef.current.apply(this, args);
     };
   }

package/es/hooks/useSize.js

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import useDomReady from "./useDomReady";
 import getBoundingClientRect from "../getBoundingClientRect";
 import { getTargetElement } from "../domTarget";

package/es/hooks/useTouchEmulator.js

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 let eventTarget;
-const Touch = function Touch2(target, identifier, pos, deltaX, deltaY) {
-  deltaX = deltaX || 0;
-  deltaY = deltaY || 0;
+const Touch = function Touch2(target, identifier, pos, dx = 0, dy = 0) {
+  const deltaX = dx || 0;
+  const deltaY = dy || 0;
   this.identifier = identifier;
   this.target = target;
   this.clientX = pos.clientX + deltaX;

package/es/index.d.ts

@@ -15,3 +15,4 @@ export * from './domUtils';
 export * from './isType';
 export * from './render';
 export * from './themeCreator';
+export * from './context-selector';

package/es/index.js

@@ -40,6 +40,7 @@ export * from "./domUtils";
 export * from "./isType";
 export * from "./render";
 export * from "./themeCreator";
+export * from "./context-selector";
 export {
   default8 as blockTouch,
   default3 as convertHexToRGBA,

package/es/isMini.js

@@ -1,4 +1,4 @@
-const isMini = typeof process.env.TARO_ENV === "string";
+const isMini = typeof process.env.TARO_ENV === "string" && ["weapp", "swan", "alipay", "tt", "qq", "jd"].includes(process.env.TARO_ENV);
 const isWeapp = process.env.TARO_ENV === "weapp";
 const isAlipay = process.env.TARO_ENV === "alipay";
 const isTt = process.env.TARO_ENV === "tt";

package/es/render.d.ts

@@ -8,6 +8,6 @@ type ContainerType = (Element | DocumentFragment) & {
 export declare function testModernRender(node: ReactElement, container: ContainerType, isTest: boolean): void;
 export declare function render(node: ReactElement, container: ContainerType): void;
 /** @private Test usage. Not work in prod */
-export declare function testLegacyUnmount(container: ContainerType, isTest: boolean): any;
-export declare function unmount(container: ContainerType): any;
+export declare function testLegacyUnmount(container: ContainerType, isTest: boolean): boolean;
+export declare function unmount(container: ContainerType): boolean | Promise<void>;
 export {};

package/es/setRef.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
+import * as React from 'react';
 export default function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;

package/es/ssr/canUseDOM.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Verifies if an application can use DOM.
+ */
+export declare function canUseDOM(): boolean;

package/es/ssr/canUseDOM.js

@@ -0,0 +1,6 @@
+function canUseDOM() {
+  return typeof window !== "undefined" && !!(window.document && window.document.createElement);
+}
+export {
+  canUseDOM
+};

package/es/ssr/index.d.ts

@@ -0,0 +1 @@
+export { canUseDOM } from './canUseDOM';

package/es/ssr/index.js

@@ -0,0 +1,4 @@
+import { canUseDOM } from "./canUseDOM";
+export {
+  canUseDOM
+};

package/es/themeCreator/cssVarToValue.d.ts

@@ -1,4 +1,20 @@
 import { CssVarToValueOptions } from './index.types';
+/**
+ * 设置全局默认主题变量
+ * 建议在小程序入口文件(app.ts)中调用，设置后所有组件都会使用该主题
+ * 支持主题继承：如果设置的主题中某个变量不存在，会自动从 defaultLight 继承
+ * @param themeVars 主题CSS变量对象
+ * @example
+ * import { setDefaultThemeVars } from '@bifrostui/utils';
+ * import { pioneerLight } from '@bifrostui/styles/registry';
+ * setDefaultThemeVars(pioneerLight.cssVars);
+ */
+export declare const setDefaultThemeVars: (themeVars: Record<string, string> | undefined) => void;
+/**
+ * 获取当前全局默认主题变量
+ * 返回合并后的主题变量（自定义主题 + defaultLight 基础主题）
+ */
+export declare const getDefaultThemeVars: () => Record<string, string> | undefined;
 /**
  * css变量转值
  */