@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/dist/DesktopDateTimePicker/index.css

@@ -0,0 +1,66 @@
+:root,
+page,
+xhs-page {
+  --bui-datetime-picker-height: var(--bui-input-height, 32px);
+  --bui-datetime-picker-min-width: var(--bui-input-min-width, 100px);
+  --bui-datetime-picker-icon-size: var(--bui-title-size-3, 16px);
+  --bui-datetime-picker-font-size: var(--bui-title-size-3, 16px);
+  --bui-datetime-picker-container-padding: var(--bui-spacing-md, 9px);
+  --bui-datetime-picker-bg: var(--bui-color-bg-view);
+  --bui-datetime-picker-font-family: var(--bui-font-family);
+  --bui-datetime-picker-border: 1px solid var(--bui-color-border-default);
+  --bui-datetime-picker-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  --bui-datetime-picker-disabled-color: var(--bui-color-fg-subtle);
+}
+.bui-datetime-picker {
+  position: relative;
+  cursor: pointer;
+  height: var(--bui-datetime-picker-height);
+  min-width: 100px;
+  font-size: var(--bui-datetime-picker-font-size);
+  border-radius: 5px;
+  background-color: var(--bui-datetime-picker-bg);
+  font-family: var(--bui-datetime-picker-font-family);
+  box-sizing: border-box;
+  border: var(--bui-datetime-picker-border);
+}
+.bui-datetime-picker:active,
+.bui-datetime-picker-active {
+  box-shadow: var(--bui-datetime-picker-shadow);
+}
+.bui-datetime-picker-invalid {
+  border: 1px solid var(--bui-color-danger);
+}
+.bui-datetime-picker-icon {
+  display: flex;
+  align-items: center;
+  font-size: var(--bui-datetime-picker-icon-size);
+}
+.bui-datetime-picker-container {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  height: 100%;
+}
+.bui-datetime-picker-input {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+  background-color: transparent;
+  outline: none;
+  border: 0;
+}
+.bui-datetime-picker-box {
+  display: flex;
+  width: 420px;
+}
+.bui-datetime-picker.bui-datetime-picker-disabled {
+  pointer-events: none;
+  box-shadow: none;
+  background-color: rgba(188, 188, 188, 0.2);
+}
+.bui-datetime-picker.bui-datetime-picker-disabled input {
+  color: var(--bui-datetime-picker-disabled-color);
+}

package/dist/DesktopDateTimePicker/index.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DesktopDateTimePicker_exports = {};
+__export(DesktopDateTimePicker_exports, {
+  DesktopDateTimePicker: () => import_DesktopDateTimePicker.default,
+  default: () => import_DesktopDateTimePicker.default
+});
+module.exports = __toCommonJS(DesktopDateTimePicker_exports);
+var import_DesktopDateTimePicker = __toESM(require("./DesktopDateTimePicker"));
+__reExport(DesktopDateTimePicker_exports, require("./DesktopDateTimePicker.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DesktopDateTimePicker,
+  ...require("./DesktopDateTimePicker.types")
+});

package/dist/DesktopPicker/DesktopPicker.js

@@ -0,0 +1,243 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+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;
+};
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var DesktopPicker_exports = {};
+__export(DesktopPicker_exports, {
+  default: () => DesktopPicker_default
+});
+module.exports = __toCommonJS(DesktopPicker_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+var import_utils = require("@bifrostui/utils");
+var import_Backdrop = __toESM(require("../Backdrop"));
+var import_Portal = __toESM(require("../Portal"));
+var import_calcAfterMounted = __toESM(require("./utils/calcAfterMounted"));
+var import_index = require("./index.css");
+const prefixCls = "bui-desktop-picker";
+const directionMap = {
+  bottom: "top",
+  top: "bottom"
+};
+const DesktopPicker = /* @__PURE__ */ import_react.default.forwardRef(
+  (props, ref) => {
+    const _a = props, {
+      className,
+      open,
+      container,
+      children,
+      defaultDirection = "bottom",
+      inheritWidth = true,
+      content,
+      miniBackdropInvisible = false,
+      onClose,
+      onMount,
+      onUnmounted,
+      containerWidth = "auto",
+      BackdropProps,
+      prefix = ""
+    } = _a, others = __objRest(_a, [
+      "className",
+      "open",
+      "container",
+      "children",
+      "defaultDirection",
+      "inheritWidth",
+      "content",
+      "miniBackdropInvisible",
+      "onClose",
+      "onMount",
+      "onUnmounted",
+      "containerWidth",
+      "BackdropProps",
+      "prefix"
+    ]);
+    const contentRef = (0, import_react.useRef)(null);
+    const nodeRef = (0, import_react.useRef)(null);
+    const renderChildren = import_react.default.cloneElement(children, {
+      ref: nodeRef,
+      style: {
+        flex: 1
+      }
+    });
+    const [contentPosition, setContentPosition] = (0, import_react.useState)(
+      "bottom"
+    );
+    const [transform, setTransform] = (0, import_react.useState)(false);
+    const getContentDirection = () => __async(void 0, null, function* () {
+      const curScrollRoot = (0, import_utils.getRootContainer)(container);
+      const result = yield (0, import_utils.getStylesAndLocation)({
+        scrollRoot: container && curScrollRoot,
+        childrenRef: nodeRef,
+        arrowDirection: defaultDirection,
+        arrowLocation: "none",
+        offsetSpacing: 0,
+        tipRef: contentRef
+      });
+      if (!result)
+        return;
+      const { newArrowDirection, styles, childrenStyle } = result;
+      const element = contentRef.current;
+      element.style.transform = styles == null ? void 0 : styles.transform;
+      element.style.visibility = styles == null ? void 0 : styles.visibility;
+      element.style.top = styles == null ? void 0 : styles.top;
+      element.style.left = styles == null ? void 0 : styles.left;
+      if (inheritWidth) {
+        element.style.width = childrenStyle == null ? void 0 : childrenStyle.width;
+      }
+      setContentPosition(newArrowDirection);
+    });
+    (0, import_react.useEffect)(() => {
+      if (!import_utils.isMini && open) {
+        const addEventListenerClick = (e) => {
+          var _a2;
+          if (!((_a2 = nodeRef.current) == null ? void 0 : _a2.contains(e.target))) {
+            onClose(null, { value: !open });
+          }
+        };
+        getContentDirection();
+        const containerDom = (0, import_utils.getRootContainer)(container, window);
+        containerDom.addEventListener("scroll", getContentDirection);
+        window.addEventListener("resize", getContentDirection);
+        window.addEventListener("click", addEventListenerClick);
+        return () => {
+          containerDom.removeEventListener("scroll", getContentDirection);
+          window.removeEventListener("resize", getContentDirection);
+          window.removeEventListener("click", addEventListenerClick);
+        };
+      }
+      if (import_utils.isMini && open) {
+        (0, import_calcAfterMounted.default)(getContentDirection);
+      }
+    }, [container, open]);
+    const renderContent = () => {
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(
+            `${prefixCls}-container`,
+            `${prefixCls}-${contentPosition}`
+          ),
+          style: {
+            width: containerWidth
+          },
+          ref: contentRef
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `${prefixCls}-container-${transform && open ? "open" : "close"} ${prefixCls}-container-content`,
+            style: {
+              transformOrigin: `${directionMap[contentPosition]} center`
+            },
+            onTransitionEnd: () => {
+              if (!open) {
+                setTransform(false);
+              }
+            }
+          },
+          content
+        )
+      );
+    };
+    (0, import_react.useEffect)(() => {
+      if (open) {
+        (0, import_calcAfterMounted.default)(() => {
+          setTransform(true);
+        });
+      }
+    }, [open]);
+    const renderContainer = (0, import_react.useMemo)(() => {
+      return open || transform;
+    }, [open, transform]);
+    (0, import_utils.useDidMountEffect)(() => {
+      if (!renderContainer) {
+        onUnmounted == null ? void 0 : onUnmounted();
+      } else {
+        onMount == null ? void 0 : onMount();
+      }
+    }, [renderContainer]);
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({ ref, className: (0, import_clsx.default)(prefixCls, className) }, others), prefix, renderChildren), !import_utils.isMini && renderContainer && /* @__PURE__ */ import_react.default.createElement(import_Portal.default, null, renderContent()), import_utils.isMini && renderContainer && /* @__PURE__ */ import_react.default.createElement(import_Portal.default, null, renderContent(), !miniBackdropInvisible && /* @__PURE__ */ import_react.default.createElement(
+      import_Backdrop.default,
+      __spreadProps(__spreadValues({}, BackdropProps), {
+        invisible: true,
+        open,
+        onClick: (e) => onClose(e, { value: !open })
+      })
+    )));
+  }
+);
+DesktopPicker.displayName = "BUIDesktopPicker";
+var DesktopPicker_default = DesktopPicker;

package/dist/DesktopPicker/DesktopPicker.types.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 DesktopPicker_types_exports = {};
+module.exports = __toCommonJS(DesktopPicker_types_exports);

package/dist/DesktopPicker/index.css

@@ -0,0 +1,39 @@
+:root,
+page,
+xhs-page {
+  --bui-desktop-picker-zindex: var(--bui-z-index-tooltip);
+  --bui-desktop-picker-bg: var(--bui-color-bg-view);
+  --bui-desktop-picker-shadow: 0 0 0 2px var(--bui-color-bg-default);
+}
+.bui-desktop-picker {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 100%;
+}
+.bui-desktop-picker-container {
+  position: absolute;
+  box-sizing: border-box;
+  visibility: hidden;
+  z-index: var(--bui-desktop-picker-zindex);
+}
+.bui-desktop-picker-container-content {
+  border-radius: 3px;
+  background-color: var(--bui-desktop-picker-bg);
+  box-shadow: var(--bui-desktop-picker-shadow);
+}
+.bui-desktop-picker-container-open {
+  transform: none;
+  transition: opacity 321ms cubic-bezier(0.4, 0, 0.2, 1), transform 214ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.bui-desktop-picker-container-close {
+  opacity: 0;
+  transform: scale(0.75, 0.5625);
+  transition: opacity 321ms cubic-bezier(0.4, 0, 0.2, 1), transform 214ms cubic-bezier(0.4, 0, 0.2, 1) 107ms;
+}
+.bui-desktop-picker-top {
+  margin-top: -6px;
+}
+.bui-desktop-picker-bottom {
+  margin-top: 6px;
+}

package/dist/DesktopPicker/index.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DesktopPicker_exports = {};
+__export(DesktopPicker_exports, {
+  DesktopPicker: () => import_DesktopPicker.default,
+  default: () => import_DesktopPicker.default
+});
+module.exports = __toCommonJS(DesktopPicker_exports);
+var import_DesktopPicker = __toESM(require("./DesktopPicker"));
+__reExport(DesktopPicker_exports, require("./DesktopPicker.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DesktopPicker,
+  ...require("./DesktopPicker.types")
+});

package/dist/DesktopPicker/utils/calcAfterMounted.js

@@ -0,0 +1,25 @@
+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 calcAfterMounted_exports = {};
+__export(calcAfterMounted_exports, {
+  default: () => calcAfterMounted_default
+});
+module.exports = __toCommonJS(calcAfterMounted_exports);
+var calcAfterMounted_default = (fn) => {
+  fn();
+};

package/dist/DesktopPicker/utils/calcAfterMounted.miniapp.js

@@ -0,0 +1,38 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var calcAfterMounted_miniapp_exports = {};
+__export(calcAfterMounted_miniapp_exports, {
+  default: () => calcAfterMounted_miniapp_default
+});
+module.exports = __toCommonJS(calcAfterMounted_miniapp_exports);
+var import_taro = __toESM(require("@tarojs/taro"));
+var calcAfterMounted_miniapp_default = (fn) => {
+  import_taro.default.nextTick(() => {
+    fn();
+  });
+};