@bifrostui/react 1.0.4 → 1.1.1

package/dist/CitySelector/CitySelector.css

@@ -0,0 +1,102 @@
+.bui-city-selector {
+  font-family: var(--bui-font-family);
+  height: 100%;
+  position: relative;
+}
+.bui-city-selector-title {
+  width: 100%;
+  height: 45px;
+  color: var(--bui-color-fg-default);
+  font-size: var(--bui-title-size-3);
+  line-height: 45px;
+  text-align: center;
+  position: sticky;
+  top: 0;
+  z-index: 1004;
+  border-bottom: solid 1px var(--bui-color-border-default);
+  background-color: var(--bui-color-bg-view);
+}
+.bui-city-selector-btn-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 45px;
+  height: 45px;
+  color: var(--bui-color-fg-muted);
+  text-align: center;
+  font-size: 20px;
+}
+.bui-city-selector-scroll-view-container {
+  height: 100%;
+}
+.bui-city-selector-scroll-view-container.container-has-title {
+  height: calc(100% - 45px);
+}
+.bui-city-selector-all-city {
+  min-height: 500px;
+  font-size: var(--bui-text-size-2);
+  width: 100%;
+  background: var(--bui-color-bg-view);
+  align-self: flex-start;
+}
+.bui-city-selector-all-city .select-city-buttons {
+  display: flex;
+  flex-flow: wrap;
+  padding-left: 3px;
+  padding-top: 7.5px;
+}
+.bui-city-selector-all-city .select-city-title {
+  font-size: var(--bui-title-size-4);
+  line-height: 15px;
+  font-weight: 600;
+  padding-left: var(--bui-spacing-lg);
+  padding-top: 9px;
+}
+.bui-city-selector-list {
+  padding-left: var(--bui-spacing-lg);
+  list-style-type: none;
+}
+.bui-city-selector-list-item {
+  height: 45px;
+  font-size: var(--bui-title-size-4);
+  display: flex;
+  align-items: center;
+}
+.bui-city-selector-list-item:not(:last-child) {
+  border-bottom: 0.5px solid var(--bui-color-border-default);
+}
+.bui-city-selector-index-container {
+  z-index: 1001;
+  position: absolute;
+  white-space: nowrap;
+  right: 0;
+  top: 50%;
+  width: 40px;
+  will-change: transform;
+  transform: translate(0, -50%);
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
+}
+.bui-city-selector-index-container.left-in {
+  opacity: 1;
+  transform: translate(0, -50%);
+}
+.bui-city-selector-index-container.city-index-has-title {
+  top: calc(50% + 22.5px);
+}
+.bui-city-selector-index-container ul {
+  margin: 0;
+  padding: 0;
+  float: left;
+  width: 100%;
+  touch-action: none;
+}
+.bui-city-selector-index-container li {
+  list-style: none;
+  height: 20px;
+  text-align: center;
+  font-size: var(--bui-text-size-3);
+  color: var(--bui-color-info, --bui-color-info);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/CitySelector/CitySelector.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CitySelectorProps } from './CitySelector.types';
+declare const CitySelector: React.ForwardRefExoticComponent<Omit<CitySelectorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default CitySelector;

package/dist/CitySelector/CitySelector.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CitySelectorCore = _interopRequireDefault(require("./CitySelectorCore"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const CitySelector = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    cities
+  } = props;
+  const [height, setHeight] = (0, _react.useState)('');
+  const touchHandler = (e, scrollToCode) => {
+    const t = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+    const code = t?.dataset?.code;
+    scrollToCode(code);
+  };
+  (0, _react.useEffect)(() => {
+    if (!cities?.length || height) return;
+    const screenHeight = window.innerHeight || document.documentElement.clientHeight;
+    const domHeight = document.querySelector('.bui-city-selector-scroll-view-container')?.getBoundingClientRect().height;
+    setHeight(`${domHeight / screenHeight * 100}vh`);
+  }, [cities]);
+  return /*#__PURE__*/_react.default.createElement(_CitySelectorCore.default, _extends({}, props, {
+    ref: ref,
+    touchHandler: touchHandler,
+    height: height
+  }));
+});
+CitySelector.displayName = 'BuiCitySelector';
+var _default = exports.default = CitySelector;

package/dist/CitySelector/CitySelector.miniapp.d.ts

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

package/dist/CitySelector/CitySelector.miniapp.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _taro = _interopRequireDefault(require("@tarojs/taro"));
+var _CitySelectorCore = _interopRequireDefault(require("./CitySelectorCore"));
+require("./miniapp.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const CitySelector = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    cities
+  } = props;
+  const containerTop = (0, _react.useRef)(0);
+  const codeHeight = (0, _react.useRef)(0);
+  const [height, setHeight] = (0, _react.useState)('');
+  const queryContainerTop = cbk => {
+    const query = _taro.default.createSelectorQuery();
+    query.select('.bui-city-selector-index-container').boundingClientRect();
+    query.exec(res => {
+      containerTop.current = res[0]?.top;
+      cbk?.();
+    });
+  };
+  (0, _react.useEffect)(() => {
+    if (cities?.length === 0 || codeHeight.current) return;
+    // 演示获取字母高度
+    setTimeout(() => {
+      const query = _taro.default.createSelectorQuery();
+      query.select('.bui-city-selector-index-item').boundingClientRect();
+      query.exec(res => {
+        codeHeight.current = res[0]?.height;
+      });
+    }, 300);
+  }, [cities, height]);
+  (0, _react.useEffect)(() => {
+    if (!cities?.length || height) return;
+    const {
+      screenHeight
+    } = _taro.default.getSystemInfoSync();
+    const query = _taro.default.createSelectorQuery();
+    query.select('.bui-city-selector-scroll-view-container').boundingClientRect();
+    query.exec(codeRect => {
+      const domHeight = codeRect?.[0]?.height;
+      setHeight(`${domHeight / screenHeight * 100}vh`);
+    });
+  }, [cities]);
+  const parseIndex = (length, index) => {
+    if (index <= 0) return 0;
+    if (index >= length - 1) return length - 1;
+    return index;
+  };
+  const pxToCode = (clientY, scrollToCode, codeGroup) => {
+    let index = Math.floor((clientY - containerTop.current) / codeHeight.current);
+    index = parseIndex(codeGroup.length, index);
+    const codeItem = codeGroup[index];
+    scrollToCode(codeItem.code || codeItem);
+  };
+  const touchHandler = (event, scrollToCode, codeGroup) => {
+    const {
+      clientY
+    } = event.changedTouches[0];
+    queryContainerTop(() => {
+      pxToCode(clientY, scrollToCode, codeGroup);
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_CitySelectorCore.default, _extends({}, props, {
+    ref: ref,
+    touchHandler: touchHandler,
+    height: height
+  }));
+});
+CitySelector.displayName = 'BuiCitySelector';
+var _default = exports.default = CitySelector;

package/dist/CitySelector/CitySelector.types.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { OverrideProps } from '@bifrostui/types';
+export type cityType = {
+    /** 城市名 */
+    name: string;
+    /** 城市名id */
+    code: string;
+};
+export type allCityItemType = {
+    /** 城市列表 */
+    cities: cityType[];
+    /** 索引字母 */
+    groupName: string;
+};
+export type CitySelectorProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
+    props: P & {
+        /** 当前城市信息 */
+        selectedCity?: cityType;
+        /** 当前城市栏的title */
+        selectedCityGroupName?: string;
+        /** 定位城市信息 */
+        currentCity?: cityType;
+        /** 定位城市栏的title */
+        currentCityGroupName?: string;
+        /** 热门城市信息 */
+        hotCities?: cityType[];
+        /** 热门城市栏的title */
+        hotCitiesGroupName?: string;
+        /** 城市列表 */
+        cities: allCityItemType[];
+        /** 禁用展示索引 默认false 即展示索引 */
+        disableIndex?: boolean;
+        /** 头部标题 */
+        title?: string;
+        /** 选择城市回调 */
+        onSelect: (e: React.SyntheticEvent, data: {
+            city: cityType;
+        }) => void;
+        /** 和title配合使用，头部右侧的关闭回调 */
+        onClose?: (e: React.SyntheticEvent) => void;
+    };
+    defaultComponent: D;
+}, D>;
+export type CitySelectorCoreProps = CitySelectorProps & {
+    touchHandler: any;
+    height?: string;
+};

package/dist/CitySelector/CitySelector.types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/CitySelector/CitySelectorCore.d.ts

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

package/dist/CitySelector/CitySelectorCore.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@bifrostui/utils");
+var _ScrollView = require("../ScrollView");
+var _Selector = _interopRequireDefault(require("./Selector"));
+require("./CitySelector.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+// 误差偏移量
+const DEVIATION_HEIGHT = '6vmin';
+const GPS_TYPE = {
+  title: '定位',
+  code: 'GPS'
+};
+const CURRENT_TYPE = {
+  title: '当前',
+  code: 'CRRT'
+};
+const HOT_CITY_TYPE = {
+  title: '热门',
+  code: 'HOT'
+};
+const prefixCls = 'bui-city-selector';
+const CitySelector = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    title: pageTitle,
+    selectedCity,
+    selectedCityGroupName = '当前城市',
+    currentCity,
+    currentCityGroupName = '定位城市',
+    hotCities,
+    hotCitiesGroupName = '热门城市',
+    cities,
+    disableIndex,
+    touchHandler,
+    height,
+    onSelect,
+    onClose,
+    ref: propsRef,
+    ...others
+  } = props;
+  const cityRef = (0, _react.useRef)(null);
+  const nodeRef = (0, _utils.useForkRef)(ref, propsRef, cityRef);
+  (0, _utils.useTouchEmulator)(cityRef.current);
+  const [codeGroup, setCodeGroup] = (0, _react.useState)([]);
+  const [codeShow, setCodeShow] = (0, _react.useState)(false);
+  const [targetId, setTargetId] = (0, _react.useState)('');
+
+  // 提取字母
+  (0, _react.useEffect)(() => {
+    if (!cities || cities?.length === 0 || codeGroup.length !== 0 || disableIndex) return;
+    const newGroup = [];
+    if (selectedCity) {
+      newGroup.push(CURRENT_TYPE);
+    }
+    if (currentCity) {
+      newGroup.push(GPS_TYPE);
+    }
+    if (hotCities) {
+      newGroup.push(HOT_CITY_TYPE);
+    }
+    cities.forEach(item => {
+      newGroup.push(item.groupName.toUpperCase());
+    });
+    setCodeGroup(newGroup);
+  }, [cities, selectedCity, currentCity, hotCities]);
+
+  // 计算每个code的top
+  (0, _react.useEffect)(() => {
+    if (codeGroup.length === 0) return;
+    setCodeShow(true);
+  }, [codeGroup]);
+  const selectHandler = (e, city) => {
+    onSelect(e, {
+      city
+    });
+  };
+  const scrollToCode = targetCode => {
+    if (!targetCode) return;
+    setTargetId(oldCode => {
+      if (targetCode !== oldCode) return targetCode;
+      return oldCode;
+    });
+  };
+  const touchCbk = e => {
+    e.stopPropagation();
+    touchHandler?.(e, scrollToCode, codeGroup);
+  };
+  const codeClickHandler = rightCode => {
+    setTargetId(rightCode);
+  };
+  const scrollHandler = (0, _utils.throttle)(() => {
+    if (targetId) {
+      setTargetId(undefined);
+    }
+  }, 500);
+  const closeHandler = e => {
+    onClose?.(e);
+  };
+  const renderTitile = (title, titleCode) => {
+    const parseTitle = (titleCode || title).toUpperCase();
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-city-title",
+      id: disableIndex ? '' : parseTitle
+    }, title.toUpperCase());
+  };
+  const renderCity = (citys, title, titleCode) => {
+    return /*#__PURE__*/_react.default.createElement("div", null, renderTitile(title, titleCode), /*#__PURE__*/_react.default.createElement("div", {
+      className: "select-city-buttons"
+    }, citys.map((city, index) => {
+      return /*#__PURE__*/_react.default.createElement(_Selector.default, {
+        key: index,
+        city: city,
+        onSelect: selectHandler
+      });
+    })));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _clsx.default)(prefixCls, className),
+    ref: nodeRef
+  }, others), pageTitle ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-title`
+  }, pageTitle, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-btn-close`,
+    onClick: closeHandler
+  }, "\u2715")) : null, /*#__PURE__*/_react.default.createElement(_ScrollView.ScrollView, {
+    scrollIntoView: targetId,
+    scrollY: true,
+    className: (0, _clsx.default)(`${prefixCls}-scroll-view-container tph`, {
+      'container-has-title': pageTitle
+    }),
+    onScroll: scrollHandler
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-all-city`
+  }, selectedCity ? renderCity([selectedCity], selectedCityGroupName, CURRENT_TYPE.code) : null, currentCity ? renderCity([currentCity], currentCityGroupName, GPS_TYPE.code) : null, hotCities?.length > 0 ? renderCity(hotCities, hotCitiesGroupName, HOT_CITY_TYPE.code) : null, cities?.length > 0 ? /*#__PURE__*/_react.default.createElement("div", {
+    className: `${prefixCls}-list-container`
+  }, cities.map((item, cityGroupIndex) => {
+    if (!item?.groupName) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: cityGroupIndex
+    }, renderTitile(item.groupName, item.groupName), /*#__PURE__*/_react.default.createElement("ul", {
+      className: `${prefixCls}-list`
+    }, item.cities.map((city, cityIndex) => {
+      return /*#__PURE__*/_react.default.createElement("li", {
+        className: `${prefixCls}-list-item`,
+        key: cityIndex,
+        onClick: e => {
+          selectHandler(e, city);
+        }
+      }, city.name);
+    })));
+  })) : null)), codeGroup?.length > 0 && height ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)(`${prefixCls}-index-container`, {
+      'left-in': codeShow,
+      'city-index-has-title': pageTitle
+    })
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    onTouchMove: touchCbk,
+    className: `${prefixCls}-index-list`
+  }, codeGroup.map((item, chartIndex) => {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: `${prefixCls}-index-item`,
+      key: chartIndex,
+      "data-code": item.code || item,
+      onClick: () => {
+        codeClickHandler(item.code || item);
+      },
+      style: {
+        maxHeight: `calc((${height} - ${DEVIATION_HEIGHT}) / ${codeGroup.length})`
+      }
+    }, item.title || item);
+  }))) : null);
+});
+CitySelector.displayName = 'BuiCitySelector';
+var _default = exports.default = CitySelector;

package/dist/CitySelector/Selector/index.css

@@ -0,0 +1,11 @@
+.bui-city-selector-item {
+  width: 111px;
+  height: 36px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  margin: 4.5px 0 4.5px 9px;
+  background-color: var(--bui-color-bg-default);
+  font-size: var(--bui-text-size-2);
+}

package/dist/CitySelector/Selector/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { cityType } from '../CitySelector.types';
+import './index.less';
+type propsType = {
+    city: cityType;
+    onSelect: (e: React.SyntheticEvent, city: cityType) => void;
+};
+declare const Selector: (props: propsType) => React.JSX.Element;
+export default Selector;

package/dist/CitySelector/Selector/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+require("./index.css");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Selector = props => {
+  const {
+    city,
+    onSelect
+  } = props;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: "bui-city-selector-item",
+    onClick: e => {
+      onSelect?.(e, city);
+    }
+  }, city.name);
+};
+var _default = exports.default = Selector;

package/dist/CitySelector/index.d.ts

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

package/dist/CitySelector/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  CitySelector: true
+};
+Object.defineProperty(exports, "CitySelector", {
+  enumerable: true,
+  get: function () {
+    return _CitySelector.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _CitySelector.default;
+  }
+});
+var _CitySelector = _interopRequireDefault(require("./CitySelector"));
+var _CitySelector2 = require("./CitySelector.types");
+Object.keys(_CitySelector2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CitySelector2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CitySelector2[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/CitySelector/miniapp.css

@@ -0,0 +1,4 @@
+.bui-city-scroll-view-container {
+  height: 100%;
+  display: block;
+}

package/dist/Modal/Modal.miniapp.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ViewProps } from '@tarojs/components';
+import './Modal.less';
+declare const Modal: React.ForwardRefExoticComponent<Omit<ViewProps & {
+    open?: boolean;
+    container?: Element | (() => Element);
+    hideBackdrop?: boolean;
+    BackdropProps?: Partial<import("../Backdrop").BackdropProps>;
+    onClose?: (e: React.SyntheticEvent<Element, Event>, detail: import("./Modal.types").CloseDetail) => void;
+    disableScrollLock?: boolean;
+    disablePortal?: boolean;
+    keepMounted?: boolean;
+} & import("../../../bui-types/src").ICommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, keyof import("../../../bui-types/src").ICommonProps | "open" | "container" | "hideBackdrop" | "BackdropProps" | "onClose" | "disableScrollLock" | "disablePortal" | "keepMounted">, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Modal;

package/dist/Modal/Modal.miniapp.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _utils = require("@bifrostui/utils");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _react = _interopRequireWildcard(require("react"));
+var _components = require("@tarojs/components");
+var _Backdrop = _interopRequireDefault(require("../Backdrop"));
+var _Portal = _interopRequireDefault(require("../Portal"));
+require("./Modal.css");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const prefixCls = 'bui-modal';
+const Modal = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    className,
+    open,
+    BackdropProps,
+    children,
+    container,
+    disablePortal,
+    disableScrollLock,
+    hideBackdrop,
+    onClose,
+    keepMounted,
+    ...others
+  } = props;
+  const modalRef = _react.default.useRef(null);
+  const handleRef = (0, _utils.useForkRef)(modalRef, ref);
+  const [backdropExited, setBackDropExited] = (0, _react.useState)(hideBackdrop || !open);
+  const mounted = open || !backdropExited || keepMounted;
+  const handleBackdropClick = event => {
+    if (event.target.id !== event.currentTarget.id) {
+      return;
+    }
+    if (onClose) {
+      onClose(event, {
+        from: 'backdrop'
+      });
+    }
+  };
+  if (!mounted) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_Portal.default, {
+    container: container,
+    disablePortal: disablePortal
+  }, /*#__PURE__*/_react.default.createElement(_components.View, _extends({
+    className: (0, _clsx.default)(prefixCls, className),
+    ref: handleRef,
+    catchMove: !disableScrollLock
+  }, others), !hideBackdrop ? /*#__PURE__*/_react.default.createElement(_Backdrop.default, _extends({
+    open: open,
+    onClick: handleBackdropClick,
+    onEnter: () => setBackDropExited(false),
+    onExited: () => setBackDropExited(true)
+  }, BackdropProps, {
+    className: (0, _clsx.default)(`${prefixCls}-backdrop`, BackdropProps?.className)
+  })) : null, (open || keepMounted) && children));
+});
+Modal.displayName = 'BuiModal';
+Modal.defaultProps = {
+  open: false,
+  disablePortal: false,
+  disableScrollLock: false,
+  hideBackdrop: false
+};
+var _default = exports.default = Modal;