@bifrostui/react 1.2.9-beta.0 → 1.3.1-beta.0

package/es/ThemeProvider/utils/mountTokens.d.ts

@@ -0,0 +1,26 @@
+import { ThemeProps, MountResponsiveTokenOptions, BuiltInThemesTokenOptions } from '../ThemeProvider.types';
+/**
+ * 挂载响应式自定义Tokens
+ * 响应式相关的Tokens挂载在全局根节点上，暗黑模式或大麦高亮主题下可自定义额外Toekns复写响应式Tokens
+ */
+export declare const mountResponsiveTokens: (options: MountResponsiveTokenOptions) => void;
+/**
+ * 复写内置主题Tokens，复写的自定义token应为对应主题css变量的子集
+ * BUI内置主题包括以下4种：
+ * 1. 默认高亮模式（defaultLightToken 复写 default-light.less）
+ * 2. 默认暗黑模式（defaultDarkToken 复写 default-dark.less）
+ * 3. 大麦高亮模式（dmLightToken 复写 dm-light.less）
+ * 4. 大麦暗黑模式（dmDarkToken 复写 dm-dark.less）
+ */
+export declare const overrideBuiltInThemes: (tokenOptions: BuiltInThemesTokenOptions) => void;
+/**
+ * 挂载Design Tokens
+ * Tokens的优先级：
+ * 1. 通常情况：组件的Tokens > 响应式Tokens > BUI内置Tokens（挂载顺序控制）
+ * 2. 暗黑模式：组件的Tokens > BUI内置的两种暗黑模式Tokens > 响应式Tokens (选择器权重控制)
+ *
+ * - 挂载顺序决定BUI内置Tokens（暗黑模式除外）和响应式Tokens的优先级
+ * - 选择器权重决定暗黑模式的Tokens和响应式Tokens的优先级
+ * - 命名规则决定组件的Tokens（如：--bui-button-xxx）
+ */
+export declare const mountTokens: (tokenOptions?: ThemeProps) => void;

package/es/ThemeProvider/utils/mountTokens.js

@@ -0,0 +1,88 @@
+import React from "react";
+import { isMini } from "@bifrostui/utils";
+import { breakpoints as defaultBreakpoints, rootSelector } from "./constants";
+const updateTokens = (options) => {
+  const { isRoot, rootString, container, containerId } = options || {};
+  if (isMini)
+    return;
+  const style = document.createElement("style");
+  style.type = "text/css";
+  style.appendChild(document.createTextNode(rootString));
+  let containerNode;
+  if (isRoot) {
+    containerNode = document.head;
+  } else if (containerId && container && React.isValidElement(container)) {
+    containerNode = document.querySelector(`.${containerId}`);
+  }
+  if (containerNode) {
+    containerNode.appendChild(style);
+  }
+};
+const mountResponsiveTokens = (options) => {
+  const { responsive, breakpoints = defaultBreakpoints } = options || {};
+  if (!responsive)
+    return;
+  const modeSelector = rootSelector.defaultLight;
+  let rootString = `${modeSelector.join(",")} { `;
+  Object.entries(responsive).forEach((config) => {
+    const [size, tokenConfig] = config || [];
+    if (!size || !tokenConfig)
+      return;
+    const cssVariablesString = Object.entries(tokenConfig || {}).reduce(
+      (acc, [key, value]) => {
+        return `${acc} ${key}: ${value};`;
+      },
+      ""
+    );
+    const mediaQuery = size === "xs" ? "max-width" : "min-width";
+    rootString += `@media (${mediaQuery}: ${breakpoints[size]}) { ${cssVariablesString} }`;
+  });
+  rootString = `${rootString} }`;
+  updateTokens({ isRoot: true, rootString });
+};
+const overrideBuiltInThemes = (tokenOptions) => {
+  if (!tokenOptions)
+    return;
+  Object.keys(rootSelector).forEach((selectorKey) => {
+    const modeSelector = rootSelector[selectorKey];
+    const token = tokenOptions[`${selectorKey}Token`];
+    if (token) {
+      let rootString = `${modeSelector.join(",")} { `;
+      const cssVariablesString = Object.entries(token).reduce(
+        (acc, [key, value]) => {
+          return `${acc} ${key}: ${value};`;
+        },
+        ""
+      );
+      rootString = `${rootString} ${cssVariablesString} }`;
+      updateTokens({ isRoot: true, rootString });
+    }
+  });
+};
+const mountComponentsTokens = (options) => {
+  const { isRoot = false, token, container, containerId } = options || {};
+  if (!token)
+    return;
+  const modeSelector = isRoot ? rootSelector.defaultLight : [`.${containerId}`];
+  let rootString = `${modeSelector.join(",")} { `;
+  const cssVariablesString = Object.entries(token).reduce(
+    (acc, [key, value]) => {
+      return `${acc} ${key}: ${value};`;
+    },
+    ""
+  );
+  rootString = `${rootString} ${cssVariablesString} }`;
+  updateTokens({ isRoot, rootString, container, containerId });
+};
+const mountTokens = (tokenOptions) => {
+  if (isMini)
+    return;
+  overrideBuiltInThemes(tokenOptions);
+  mountResponsiveTokens(tokenOptions);
+  mountComponentsTokens(tokenOptions);
+};
+export {
+  mountResponsiveTokens,
+  mountTokens,
+  overrideBuiltInThemes
+};

package/es/Toast/FunctionalToast.d.ts

@@ -0,0 +1,3 @@
+import { ToastInstance } from './Toast.types';
+declare const Toast: ToastInstance;
+export default Toast;

package/es/Toast/FunctionalToast.js

@@ -0,0 +1,150 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { render, unmount, getRootElement } from "@bifrostui/utils";
+import React, { useCallback, useEffect, useState } from "react";
+import ToastView from "./Toast";
+const toastCloses = [];
+const formatProps = (props) => {
+  if (typeof props === "string") {
+    return { message: props };
+  }
+  return props;
+};
+const destroyAll = () => {
+  let closeToast = toastCloses.pop();
+  while (closeToast) {
+    closeToast();
+    closeToast = toastCloses.pop();
+  }
+};
+const functionalToast = (props) => {
+  const options = __spreadValues({
+    duration: 2e3,
+    position: "center",
+    allowMultiple: false,
+    disableClick: false
+  }, formatProps(props));
+  const instance = {
+    close: () => null
+  };
+  const rootWrapper = document.createElement("div");
+  if (options.disableClick) {
+    const styles = {
+      position: "fixed",
+      top: "0",
+      bottom: "0",
+      left: "0",
+      right: "0",
+      zIndex: "var(--bui-z-index-toast)"
+    };
+    Object.keys(styles).forEach((property) => {
+      rootWrapper.style[property] = styles[property];
+    });
+  }
+  const rootElement = getRootElement();
+  rootElement.appendChild(rootWrapper);
+  const ToastComponent = () => {
+    const _a = options, { duration, allowMultiple, onClose } = _a, others = __objRest(_a, ["duration", "allowMultiple", "onClose"]);
+    const [open, setOpen] = useState(false);
+    let timer;
+    const fadeTimeout = {
+      enter: 350,
+      exit: 150
+    };
+    const close = useCallback(() => {
+      setOpen(false);
+      setTimeout(() => {
+        const unmountRes = unmount(rootWrapper);
+        if (unmountRes && rootWrapper.parentNode) {
+          rootWrapper.parentNode.removeChild(rootWrapper);
+        }
+      }, fadeTimeout.exit);
+      onClose == null ? void 0 : onClose();
+    }, [rootWrapper]);
+    useEffect(() => {
+      setOpen(true);
+      if (!allowMultiple)
+        destroyAll();
+      toastCloses.push(close);
+      if (duration !== 0 && typeof duration === "number") {
+        timer = setTimeout(close, duration);
+      }
+      return () => {
+        clearTimeout(timer);
+      };
+    }, []);
+    instance.close = close;
+    return /* @__PURE__ */ React.createElement(
+      ToastView,
+      __spreadProps(__spreadValues({}, others), {
+        open,
+        timeout: fadeTimeout,
+        onClose: close
+      })
+    );
+  };
+  render(/* @__PURE__ */ React.createElement(ToastComponent, null), rootWrapper);
+  return instance;
+};
+["warning", "loading", "success", "fail"].forEach((methodName) => {
+  functionalToast[methodName] = (options) => functionalToast(__spreadValues({
+    type: methodName
+  }, formatProps(options)));
+});
+functionalToast.clear = () => {
+  setTimeout(() => {
+    destroyAll();
+  });
+};
+const useToast = () => {
+  const holderRef = React.useRef(null);
+  ["warning", "loading", "success", "fail"].forEach((methodName) => {
+    functionalToast[methodName] = (options) => functionalToast(__spreadProps(__spreadValues({
+      type: methodName
+    }, formatProps(options)), {
+      theme: holderRef.current.theme
+    }));
+  });
+  functionalToast.clear = () => {
+    setTimeout(() => {
+      destroyAll();
+    });
+  };
+  const wrapAPI = functionalToast;
+  return [wrapAPI, /* @__PURE__ */ React.createElement(ToastView, { key: "toast-holder", ref: holderRef })];
+};
+functionalToast.useToast = useToast;
+const Toast = functionalToast;
+var FunctionalToast_default = Toast;
+export {
+  FunctionalToast_default as default
+};

package/es/Toast/Toast.css

@@ -0,0 +1,56 @@
+.bui-toast {
+  --min-width: var(--bui-toast-min-width, 86px);
+  --max-width: var(--bui-toast-max-width, 80%);
+  --flex-direction: var(--bui-toast-flex-direction, column);
+  --padding: var(--bui-toast-padding, var(--bui-spacing-xl));
+  --word-break: break-all;
+  --z-index: var(--bui-z-index-toast);
+  --position-top: var(--bui-toast-position-top, 15%);
+  --position-bottom: var(--bui-toast-position-bottom, 85%);
+  --background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
+  --border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
+  --icon-margin: var(--bui-toast-icon-margin-bottom, 8px);
+  --icon-font-size: var(--bui-toast-icon-font-size, 30px);
+  --text-align: center;
+  position: fixed;
+  left: 50%;
+  z-index: var(--z-index);
+  width: fit-content;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  padding: var(--padding);
+  font-size: var(--bui-text-size-1);
+  color: var(--bui-color-white);
+  border-radius: var(--border-radius);
+  word-break: var(--word-break);
+  white-space: pre-wrap;
+  background-color: var(--background-color);
+  text-align: var(--text-align);
+  font-family: var(--bui-font-family);
+}
+.bui-toast.bui-toast-allow-click {
+  position: fixed;
+  right: unset;
+  bottom: unset;
+}
+.bui-toast-center {
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.bui-toast-top {
+  top: var(--position-top);
+  transform: translate(-50%, calc(-1 * var(--position-top)));
+}
+.bui-toast-bottom {
+  top: var(--position-bottom);
+  transform: translate(-50%, calc(-1 * var(--position-bottom)));
+}
+.bui-toast-icon {
+  display: flex;
+  flex-direction: var(--flex-direction);
+  align-items: center;
+}
+.bui-toast-icon .bui-svg-icon {
+  margin: 0 0 var(--icon-margin);
+  font-size: var(--icon-font-size);
+}

package/es/Toast/Toast.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ToastProps, ToastRef } from './Toast.types';
+import './Toast.less';
+declare const ToastComponent: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<ToastRef>>;
+export default ToastComponent;

package/es/Toast/Toast.js

@@ -0,0 +1,99 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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 __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import clsx from "clsx";
+import React, { useImperativeHandle } from "react";
+import {
+  ErrorCircleFilledBoldIcon,
+  AccessTimeCircleFilledBoldIcon,
+  AlertCircleFilledBoldIcon,
+  SuccessCircleFilledBoldIcon
+} from "@bifrostui/icons";
+import Fade from "../Fade";
+import { useTheme } from "../ThemeProvider";
+import "./Toast.css";
+const prefixCls = "bui-toast";
+const ToastComponent = /* @__PURE__ */ React.forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    style,
+    open,
+    type,
+    icon,
+    message,
+    position = "center",
+    disableClick = false,
+    theme
+  } = _a, others = __objRest(_a, [
+    "className",
+    "style",
+    "open",
+    "type",
+    "icon",
+    "message",
+    "position",
+    "disableClick",
+    "theme"
+  ]);
+  const themeConfig = useTheme(theme);
+  useImperativeHandle(ref, () => {
+    return { theme: themeConfig };
+  }, []);
+  const iconMap = {
+    fail: /* @__PURE__ */ React.createElement(ErrorCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    loading: /* @__PURE__ */ React.createElement(AccessTimeCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    warning: /* @__PURE__ */ React.createElement(AlertCircleFilledBoldIcon, { htmlColor: "#ffffff" }),
+    success: /* @__PURE__ */ React.createElement(SuccessCircleFilledBoldIcon, { htmlColor: "#ffffff" })
+  };
+  const iconDom = iconMap[type] || icon;
+  return /* @__PURE__ */ React.createElement(Fade, __spreadProps(__spreadValues({}, others), { in: open, appear: false, unmountOnExit: true }), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        prefixCls,
+        `${prefixCls}-${position}`,
+        {
+          [`${prefixCls}-icon`]: !!iconDom,
+          [`${prefixCls}-allow-click`]: !disableClick
+        },
+        className
+      ),
+      style
+    },
+    iconDom,
+    message
+  ));
+});
+ToastComponent.displayName = "BuiToast";
+var Toast_default = ToastComponent;
+export {
+  Toast_default as default
+};

package/es/Toast/Toast.types.d.ts

@@ -0,0 +1,101 @@
+import React from 'react';
+import { FadeProps } from '../Fade/Fade.types';
+import { ThemeProps } from '../ThemeProvider/ThemeProvider.types';
+export type ToastRef = {
+    theme?: ThemeProps;
+};
+/**
+ * 提示类型
+ */
+export type ToastType = 'loading' | 'success' | 'fail' | 'warning';
+export interface ToastProps extends FadeProps {
+    /**
+     * 是否展示
+     */
+    open?: boolean;
+    /**
+     * 提示类型
+     */
+    type?: ToastType;
+    /**
+     * toast内容，支持使用`\n`换行
+     */
+    message?: string;
+    /**
+     * 展示时长(ms)，值为 0 时，toast 不会消失
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * 展示位置
+     * @default center
+     */
+    position?: 'top' | 'center' | 'bottom';
+    /**
+     * 是否允许同时存在多个Toast
+     * @default false
+     */
+    allowMultiple?: boolean;
+    /**
+     * 自定义图标
+     */
+    icon?: React.ReactNode;
+    /**
+     * theme 主题定制
+     */
+    theme?: ThemeProps;
+    /**
+     * 展示Toast时，页面内容是否可以点击
+     * @default false
+     */
+    disableClick?: boolean;
+    /**
+     * 关闭时的回调函数
+     */
+    onClose?: () => void;
+}
+/**
+ * 函数式调用配置参数
+ */
+export type ToastOptions = Omit<ToastProps, 'type' | 'open'> | string;
+/**
+ * 函数式调用返回值类型
+ */
+export type ToastReturnType = {
+    /**
+     * 关闭当前提示
+     */
+    close: () => void;
+};
+/**
+ * Toast Instance
+ */
+export interface ToastFunction {
+    (options: ToastOptions): ToastReturnType;
+    /**
+     * 警告提示
+     */
+    warning: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 加载提示
+     */
+    loading: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 成功提示
+     */
+    success: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 失败提示
+     */
+    fail: (options: ToastOptions) => ToastReturnType;
+    /**
+     * 清空提示
+     */
+    clear: () => void;
+}
+export interface ToastInstance extends ToastFunction {
+    /**
+     * 获取toast静态方法 & contextHolder
+     */
+    useToast: () => [ToastFunction, React.JSX.Element];
+}

package/es/Toast/Toast.types.js

@@ -0,0 +1 @@
+export {};

package/es/Toast/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as Toast } from './FunctionalToast';
+export * from './Toast.types';

package/es/Toast/index.js

@@ -0,0 +1,6 @@
+import { default as default2, default as default3 } from "./FunctionalToast";
+export * from "./Toast.types";
+export {
+  default3 as Toast,
+  default2 as default
+};

package/es/Tooltip/Tooltip.css

@@ -0,0 +1,91 @@
+.bui-tooltip {
+  --arrow-size: var(--bui-tooltip-arrow-size, 8px);
+  --localtion-position: var(--bui-tooltip-localtion-position, 8px);
+  --max-width: var(--bui-tooltip-max-width, 350px);
+  --content-min-width: var(--bui-tooltip-content-min-width, 30px);
+  --content-min-height: var(--bui-tooltip-content-min-height, 32px);
+  --content-padding: var(--bui-tooltip-content-padding, 6px 8px);
+  max-width: var(--max-width);
+  font-size: var(--bui-text-size-1);
+  position: absolute;
+  visibility: hidden;
+  z-index: var(--bui-z-index-tooltip);
+}
+.bui-tooltip .bui-tooltip-arrow {
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+.bui-tooltip .bui-tooltip-arrow.location-left {
+  left: var(--localtion-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-right {
+  right: var(--localtion-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-top {
+  top: var(--localtion-position);
+}
+.bui-tooltip .bui-tooltip-arrow.location-bottom {
+  bottom: var(--localtion-position);
+}
+.bui-tooltip.tooltip-top .location-center,
+.bui-tooltip.tooltip-bottom .location-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.bui-tooltip.tooltip-left .location-center,
+.bui-tooltip.tooltip-right .location-center {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.bui-tooltip.tooltip-top {
+  padding-bottom: var(--arrow-size);
+}
+.bui-tooltip.tooltip-top .bui-tooltip-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-top: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  bottom: 0;
+}
+.bui-tooltip.tooltip-bottom {
+  padding-top: var(--arrow-size);
+}
+.bui-tooltip.tooltip-bottom .bui-tooltip-arrow {
+  border-left: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  top: 0;
+}
+.bui-tooltip.tooltip-left {
+  padding-right: var(--arrow-size);
+}
+.bui-tooltip.tooltip-left .bui-tooltip-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-left: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  right: 0;
+}
+.bui-tooltip.tooltip-right {
+  padding-left: var(--arrow-size);
+}
+.bui-tooltip.tooltip-right .bui-tooltip-arrow {
+  border-top: var(--arrow-size) solid transparent;
+  border-bottom: var(--arrow-size) solid transparent;
+  border-right: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
+  left: 0;
+}
+.bui-tooltip .bui-tooltip-content {
+  min-width: var(--content-min-width);
+  min-height: var(--content-min-height);
+  padding: var(--content-padding);
+  color: var(--bui-color-white);
+  text-align: left;
+  text-decoration: none;
+  word-wrap: break-word;
+  background-color: var(--bui-color-bg-alpha-dark-7);
+  border-radius: var(--bui-shape-radius-poster);
+  box-shadow:
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}

package/es/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './Tooltip.less';
+import { TooltipProps } from './Tooltip.types';
+declare const Tooltip: React.ForwardRefExoticComponent<Omit<TooltipProps<"div", {}>, "ref"> & React.RefAttributes<HTMLElement>>;
+export default Tooltip;