@bifrostui/react 1.4.0-beta.0 → 1.4.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -168,8 +168,9 @@ const prompt = (options) => {
168
168
  const useDialog = () => {
169
169
  const holderRef = import_react.default.useRef(null);
170
170
  const wrapAPI = (props) => {
171
- const options = __spreadValues({ theme: holderRef.current.theme }, formatProps(props));
172
- const _a = options, { onConfirm, onCancel } = _a, rest = __objRest(_a, ["onConfirm", "onCancel"]);
171
+ var _a;
172
+ const options = __spreadValues({ theme: (_a = holderRef.current) == null ? void 0 : _a.theme }, formatProps(props));
173
+ const _b = options, { onConfirm, onCancel } = _b, rest = __objRest(_b, ["onConfirm", "onCancel"]);
173
174
  return new Promise((resolve) => {
174
175
  DialogGenerator(__spreadProps(__spreadValues({}, rest), {
175
176
  onConfirm: (val) => __async(void 0, null, function* () {
@@ -186,16 +187,22 @@ const useDialog = () => {
186
187
  }));
187
188
  });
188
189
  };
189
- wrapAPI.confirm = (options) => Dialog(__spreadProps(__spreadValues({
190
- type: "confirm"
191
- }, formatProps(options)), {
192
- theme: holderRef.current.theme
193
- }));
194
- wrapAPI.prompt = (options) => Dialog(__spreadProps(__spreadValues({
195
- type: "prompt"
196
- }, formatProps(options)), {
197
- theme: holderRef.current.theme
198
- }));
190
+ wrapAPI.confirm = (options) => {
191
+ var _a;
192
+ return Dialog(__spreadProps(__spreadValues({
193
+ type: "confirm"
194
+ }, formatProps(options)), {
195
+ theme: (_a = holderRef.current) == null ? void 0 : _a.theme
196
+ }));
197
+ };
198
+ wrapAPI.prompt = (options) => {
199
+ var _a;
200
+ return Dialog(__spreadProps(__spreadValues({
201
+ type: "prompt"
202
+ }, formatProps(options)), {
203
+ theme: (_a = holderRef.current) == null ? void 0 : _a.theme
204
+ }));
205
+ };
199
206
  return [wrapAPI, /* @__PURE__ */ import_react.default.createElement(import_Dialog.default, { key: "dialog-holder", ref: holderRef })];
200
207
  };
201
208
  Dialog.confirm = confirm;
@@ -39,6 +39,10 @@
39
39
  outline: none;
40
40
  background-color: var(--background-color);
41
41
  font-size: var(--bui-text-size-2);
42
+ width: auto;
43
+ overflow: hidden;
44
+ text-overflow: ellipsis;
45
+ white-space: nowrap;
42
46
  }
43
47
  .bui-input-input::placeholder {
44
48
  color: var(--bui-color-fg-subtle);
@@ -3,7 +3,6 @@
3
3
  --localtion-position: var(--bui-popover-localtion-position, 8PX);
4
4
  --max-width: var(--bui-popover-max-width, 350px);
5
5
  --content-min-width: var(--bui-popover-content-min-width, 30px);
6
- --content-min-height: var(--bui-popover-content-min-height, 32px);
7
6
  --content-padding: var(--bui-popover-content-padding, 6px 8px);
8
7
  max-width: var(--max-width);
9
8
  font-size: var(--bui-text-size-1);
@@ -79,8 +78,6 @@
79
78
  }
80
79
  .bui-popover .bui-popover-content {
81
80
  min-width: var(--content-min-width);
82
- min-height: var(--content-min-height);
83
- padding: var(--content-padding);
84
81
  color: var(--bui-color-fg-muted);
85
82
  text-align: left;
86
83
  text-decoration: none;
@@ -92,6 +89,6 @@
92
89
  0 6px 16px 0 rgba(0, 0, 0, 0.08),
93
90
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
94
91
  }
95
- .bui-popover .bui-popover-content div:nth-child(2) {
92
+ .bui-popover .bui-popover-content .bui-popover-title + .bui-popover-inner-content {
96
93
  margin-top: var(--bui-spacing-md);
97
94
  }
@@ -1,8 +1,6 @@
1
1
  var __create = Object.create;
2
2
  var __defProp = Object.defineProperty;
3
- var __defProps = Object.defineProperties;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
5
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
6
  var __getProtoOf = Object.getPrototypeOf;
@@ -20,7 +18,6 @@ var __spreadValues = (a, b) => {
20
18
  }
21
19
  return a;
22
20
  };
23
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
21
  var __objRest = (source, exclude) => {
25
22
  var target = {};
26
23
  for (var prop in source)
@@ -74,11 +71,10 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
74
71
  content,
75
72
  defaultOpen,
76
73
  placement = "top",
77
- trigger,
74
+ trigger = "click",
78
75
  onOpenChange,
79
76
  open,
80
- hideArrow,
81
- PortalProps
77
+ hideArrow
82
78
  } = _a, others = __objRest(_a, [
83
79
  "className",
84
80
  "style",
@@ -90,8 +86,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
90
86
  "trigger",
91
87
  "onOpenChange",
92
88
  "open",
93
- "hideArrow",
94
- "PortalProps"
89
+ "hideArrow"
95
90
  ]);
96
91
  const controlByUser = typeof open !== "undefined";
97
92
  const positionArr = placement.split(/([A-Z])/);
@@ -109,12 +104,34 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
109
104
  const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
110
105
  const [tooltyles, setTooltyles] = (0, import_react.useState)({});
111
106
  const ttId = (0, import_utils.useUniqueId)();
107
+ const changeOpenStatus = (event, status) => {
108
+ if (controlByUser)
109
+ return;
110
+ setOpenStatus(status);
111
+ onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
112
+ };
113
+ const triggerClick = (event) => {
114
+ event.stopPropagation();
115
+ const targetStatus = !openStatus;
116
+ changeOpenStatus(event, targetStatus);
117
+ };
118
+ const hidePopover = (event) => {
119
+ changeOpenStatus(event, false);
120
+ };
121
+ const showPopover = (event) => {
122
+ changeOpenStatus(event, true);
123
+ };
112
124
  (0, import_react.useEffect)(() => {
113
125
  if (!controlByUser)
114
126
  return;
115
127
  setOpenStatus(open);
116
128
  }, [open]);
117
- const onRootElementMouted = () => {
129
+ const clickEventHandler = (event) => {
130
+ if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
131
+ return;
132
+ hidePopover(event);
133
+ };
134
+ const onRootElementMouted = (0, import_utils.throttle)(() => {
118
135
  const result = (0, import_utils.getStylesAndLocation)({
119
136
  childrenRef,
120
137
  arrowDirection,
@@ -131,23 +148,25 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
131
148
  setArrowLocation(newArrowLocation);
132
149
  }
133
150
  setTooltyles(styles);
151
+ }, 100);
152
+ const bindEvent = () => {
153
+ if (!controlByUser) {
154
+ document.addEventListener("click", clickEventHandler);
155
+ }
156
+ window.addEventListener("resize", onRootElementMouted);
134
157
  };
135
- const changeOpenStatus = (event, status) => {
136
- if (controlByUser)
137
- return;
138
- setOpenStatus(status);
139
- onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
140
- };
141
- const triggerClick = (event) => {
142
- const targetStatus = !openStatus;
143
- changeOpenStatus(event, targetStatus);
144
- };
145
- const hidePopover = (event) => {
146
- changeOpenStatus(event, false);
147
- };
148
- const showPopover = (event) => {
149
- changeOpenStatus(event, true);
158
+ const unbindEvent = () => {
159
+ if (!controlByUser) {
160
+ document.removeEventListener("click", clickEventHandler);
161
+ }
162
+ window.removeEventListener("resize", onRootElementMouted);
150
163
  };
164
+ (0, import_react.useEffect)(() => {
165
+ bindEvent();
166
+ return () => {
167
+ unbindEvent();
168
+ };
169
+ }, []);
151
170
  if (!title && !content)
152
171
  return null;
153
172
  let triggerEventOption;
@@ -162,34 +181,26 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
162
181
  const childrenOptions = __spreadValues({
163
182
  ref: childrenRef
164
183
  }, triggerEventOption);
165
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, open || openStatus ? /* @__PURE__ */ import_react.default.createElement(
166
- import_Portal.default,
167
- __spreadProps(__spreadValues({
168
- onRootElementMouted
169
- }, PortalProps), {
170
- ref
171
- }),
172
- /* @__PURE__ */ import_react.default.createElement(
184
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, open || openStatus ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted, ref }, /* @__PURE__ */ import_react.default.createElement(
185
+ "div",
186
+ __spreadValues({
187
+ className: (0, import_clsx.default)(prefixCls, className, `popover-${arrowDirection}`, {
188
+ "bui-popover-arrow-hide": hideArrow
189
+ }),
190
+ "data-id": `tt_${ttId}`,
191
+ style: __spreadValues(__spreadValues({}, style), tooltyles)
192
+ }, others),
193
+ !hideArrow ? /* @__PURE__ */ import_react.default.createElement(
173
194
  "div",
174
- __spreadValues({
175
- className: (0, import_clsx.default)(prefixCls, className, `popover-${arrowDirection}`, {
176
- "bui-popover-arrow-hide": hideArrow
177
- }),
178
- "data-id": `tt_${ttId}`,
179
- style: __spreadValues(__spreadValues({}, style), tooltyles)
180
- }, others),
181
- !hideArrow ? /* @__PURE__ */ import_react.default.createElement(
182
- "div",
183
- {
184
- className: (0, import_clsx.default)(
185
- "bui-popover-arrow",
186
- `location-${arrowLocation}`
187
- )
188
- }
189
- ) : null,
190
- /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
191
- )
192
- ) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
195
+ {
196
+ className: (0, import_clsx.default)(
197
+ "bui-popover-arrow",
198
+ `location-${arrowLocation}`
199
+ )
200
+ }
201
+ ) : null,
202
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
203
+ )) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
193
204
  });
194
205
  Popover.displayName = "BuiPopover";
195
206
  var Popover_default = Popover;
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { OverrideProps } from '@bifrostui/types';
3
- import { PortalCoreProps } from '../Portal/Portal.types';
4
3
  type triggerType = 'click' | 'hover';
5
4
  export type PopoverProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
6
5
  props: P & {
@@ -39,10 +38,6 @@ export type PopoverProps<D extends React.ElementType = 'div', P = {}> = Override
39
38
  * @default 'click'
40
39
  */
41
40
  trigger?: triggerType | triggerType[];
42
- /**
43
- * Portal组件的属性
44
- */
45
- PortalProps?: PortalCoreProps;
46
41
  /**
47
42
  * 点击事件回调方法
48
43
  * - event 触发事件
@@ -15,7 +15,7 @@ export interface PortalCoreProps {
15
15
  */
16
16
  disablePortal?: boolean;
17
17
  /**
18
- * 页面跟节点
18
+ * 页面根节点
19
19
  */
20
20
  rootElement?: Element;
21
21
  /**
@@ -1,5 +1,5 @@
1
1
  .bui-progress {
2
- --fill-color: var(--bui-progress-fill-color, --bui-color-primary);
2
+ --fill-color: var(--bui-progress-fill-color, var(--bui-color-primary));
3
3
  --trail-color: var(--bui-progress-trail-color, rgba(156, 156, 165, 0.2));
4
4
  --stroke-width: var(--bui-progress-stroke-width, 8px);
5
5
  --width: var(--bui-progress-width, 100%);
@@ -1,7 +1,7 @@
1
1
  .bui-radio {
2
- --label-color: var(--bui-radio-label-color, --bui-color-fg-default);
3
- --label-font-size: var(--bui-radio-label-font-size, --bui-text-size-1);
4
- --icon-font-size: var(--bui-radio-icon-font-size, --bui-title-size-2);
2
+ --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
3
+ --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
4
+ --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
5
5
  --icon-padding: var(--bui-radio-icon-padding, 5px);
6
6
  display: inline-flex;
7
7
  align-items: center;
@@ -1,6 +1,6 @@
1
1
  .bui-slider {
2
- --line-color: var(--bui-slider-line-color, --bui-color-primary);
3
- --line-bg-color: var(--bui-slider-line-bg-color, --bui-color-border-default);
2
+ --line-color: var(--bui-slider-line-color, var(--bui-color-primary));
3
+ --line-bg-color: var(--bui-slider-line-bg-color, var(--bui-color-border-default));
4
4
  --width: var(--bui-slider-width, 100%);
5
5
  --height: var(--bui-slider-height, 2px);
6
6
  --padding: var(--bui-slider-padding, 19px 0);
@@ -12,9 +12,9 @@
12
12
  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
13
13
  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
14
14
  --tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
15
- --tooltip-font-size: var(--bui-tooltip-font-size, --bui-text-size-3);
16
- --tooltip-color: var(--bui-tooltip-color, --bui-color-white);
17
- --tooltip-bg-color: var(--bui-tooltip-bg-color, --line-color);
15
+ --tooltip-font-size: var(--bui-tooltip-font-size, var(--bui-text-size-3));
16
+ --tooltip-color: var(--bui-tooltip-color, var(--bui-color-white));
17
+ --tooltip-bg-color: var(--bui-tooltip-bg-color, var(--line-color));
18
18
  position: relative;
19
19
  width: var(--width);
20
20
  height: var(--height);
@@ -39,7 +39,7 @@
39
39
  top: 50%;
40
40
  left: 0;
41
41
  width: 100%;
42
- height: var(---height);
42
+ height: var(--height);
43
43
  transform: translateY(-50%);
44
44
  background-color: var(--line-bg-color);
45
45
  }
@@ -1,10 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { OverrideProps } from '@bifrostui/types';
3
3
  import { BaseLang } from '../locales/base';
4
- export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
5
- props: P & ThemeProps;
6
- defaultComponent: D;
7
- }, D>;
8
4
  export interface Breakpoints {
9
5
  /**
10
6
  * 超小屏幕 (小于 576px,实际为了处理临界值,断点值为 575.98px)
@@ -124,4 +120,8 @@ export type MountResponsiveTokenOptions = Pick<ThemeProps, 'responsive'> & {
124
120
  export type UpdateTokensOptions = Pick<ThemeProps, 'isRoot' | 'containerId' | 'container'> & {
125
121
  rootString: string;
126
122
  };
123
+ export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
124
+ props: P & ThemeProps;
125
+ defaultComponent: D;
126
+ }, D>;
127
127
  export { BaseLang, ResponsiveTokenOptions, ThemeProps, BuiltInThemesTokenOptions, componentsTokenOptions, };
@@ -62,7 +62,7 @@ module.exports = __toCommonJS(FunctionalToast_exports);
62
62
  var import_utils = require("@bifrostui/utils");
63
63
  var import_react = __toESM(require("react"));
64
64
  var import_Toast = __toESM(require("./Toast"));
65
- const toastCloses = [];
65
+ let toastCloses = [];
66
66
  const formatProps = (props) => {
67
67
  if (typeof props === "string") {
68
68
  return { message: props };
@@ -126,7 +126,12 @@ const functionalToast = (props) => {
126
126
  destroyAll();
127
127
  toastCloses.push(close);
128
128
  if (duration !== 0 && typeof duration === "number") {
129
- timer = setTimeout(close, duration);
129
+ timer = setTimeout(() => {
130
+ close();
131
+ if (!allowMultiple) {
132
+ toastCloses = [];
133
+ }
134
+ }, duration);
130
135
  }
131
136
  return () => {
132
137
  clearTimeout(timer);
@@ -158,11 +163,14 @@ functionalToast.clear = () => {
158
163
  const useToast = () => {
159
164
  const holderRef = import_react.default.useRef(null);
160
165
  ["warning", "loading", "success", "fail"].forEach((methodName) => {
161
- functionalToast[methodName] = (options) => functionalToast(__spreadProps(__spreadValues({
162
- type: methodName
163
- }, formatProps(options)), {
164
- theme: holderRef.current.theme
165
- }));
166
+ functionalToast[methodName] = (options) => {
167
+ var _a;
168
+ return functionalToast(__spreadProps(__spreadValues({
169
+ type: methodName
170
+ }, formatProps(options)), {
171
+ theme: (_a = holderRef.current) == null ? void 0 : _a.theme
172
+ }));
173
+ };
166
174
  });
167
175
  functionalToast.clear = () => {
168
176
  setTimeout(() => {
@@ -1,13 +1,14 @@
1
1
  .bui-toast {
2
2
  --min-width: var(--bui-toast-min-width, 86px);
3
3
  --max-width: var(--bui-toast-max-width, 80%);
4
+ --text-align: var(--bui-toast-text-align, center);
4
5
  --flex-direction: var(--bui-toast-flex-direction, column);
5
6
  --padding: var(--bui-toast-padding, var(--bui-spacing-xl));
6
7
  --position-top: var(--bui-toast-position-top, 15%);
7
8
  --position-bottom: var(--bui-toast-position-bottom, 85%);
8
9
  --background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
9
- --border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
10
- --icon-margin: var(--bui-toast-icon-margin-bottom, 8px);
10
+ --border-radius: var(--bui-toast-border-radius, var(--bui-shape-radius-default));
11
+ --icon-margin: var(--bui-toast-icon-margin, 0 0 8px);
11
12
  --icon-font-size: var(--bui-toast-icon-font-size, 30px);
12
13
  position: fixed;
13
14
  left: 50%;
@@ -22,7 +23,7 @@
22
23
  word-break: break-all;
23
24
  white-space: pre-wrap;
24
25
  background-color: var(--background-color);
25
- text-align: center;
26
+ text-align: var(--text-align);
26
27
  font-family: var(--bui-font-family);
27
28
  }
28
29
  .bui-toast.bui-toast-allow-click {
@@ -48,6 +49,6 @@
48
49
  align-items: center;
49
50
  }
50
51
  .bui-toast-icon .bui-svg-icon {
51
- margin: 0 0 var(--icon-margin);
52
+ margin: var(--icon-margin);
52
53
  font-size: var(--icon-font-size);
53
54
  }
@@ -1,8 +1,6 @@
1
1
  var __create = Object.create;
2
2
  var __defProp = Object.defineProperty;
3
- var __defProps = Object.defineProperties;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
7
5
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
6
  var __getProtoOf = Object.getPrototypeOf;
@@ -20,7 +18,6 @@ var __spreadValues = (a, b) => {
20
18
  }
21
19
  return a;
22
20
  };
23
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
21
  var __objRest = (source, exclude) => {
25
22
  var target = {};
26
23
  for (var prop in source)
@@ -73,10 +70,9 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
73
70
  title,
74
71
  defaultOpen,
75
72
  placement = "top",
76
- trigger,
73
+ trigger = "click",
77
74
  onOpenChange,
78
- open,
79
- PortalProps
75
+ open
80
76
  } = _a, others = __objRest(_a, [
81
77
  "className",
82
78
  "style",
@@ -86,8 +82,7 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
86
82
  "placement",
87
83
  "trigger",
88
84
  "onOpenChange",
89
- "open",
90
- "PortalProps"
85
+ "open"
91
86
  ]);
92
87
  const controlByUser = typeof open !== "undefined";
93
88
  const positionArr = placement.split(/([A-Z])/);
@@ -105,12 +100,34 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
105
100
  const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
106
101
  const [tooltyles, setTooltyles] = (0, import_react.useState)({});
107
102
  const ttId = (0, import_utils.useUniqueId)();
103
+ const changeOpenStatus = (event, status) => {
104
+ if (controlByUser)
105
+ return;
106
+ setOpenStatus(status);
107
+ onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
108
+ };
109
+ const triggerClick = (event) => {
110
+ event.stopPropagation();
111
+ const targetStatus = !openStatus;
112
+ changeOpenStatus(event, targetStatus);
113
+ };
114
+ const hideTooltip = (event) => {
115
+ changeOpenStatus(event, false);
116
+ };
117
+ const showTooltip = (event) => {
118
+ changeOpenStatus(event, true);
119
+ };
108
120
  (0, import_react.useEffect)(() => {
109
121
  if (!controlByUser)
110
122
  return;
111
123
  setOpenStatus(open);
112
124
  }, [open]);
113
- const onRootElementMouted = () => {
125
+ const clickEventHandler = (event) => {
126
+ if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
127
+ return;
128
+ hideTooltip(event);
129
+ };
130
+ const onRootElementMouted = (0, import_utils.throttle)(() => {
114
131
  const result = (0, import_utils.getStylesAndLocation)({
115
132
  childrenRef,
116
133
  arrowDirection,
@@ -127,23 +144,25 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
127
144
  setArrowLocation(newArrowLocation);
128
145
  }
129
146
  setTooltyles(styles);
147
+ }, 100);
148
+ const bindEvent = () => {
149
+ if (!controlByUser) {
150
+ document.addEventListener("click", clickEventHandler);
151
+ }
152
+ window.addEventListener("resize", onRootElementMouted);
130
153
  };
131
- const changeOpenStatus = (event, status) => {
132
- if (controlByUser)
133
- return;
134
- setOpenStatus(status);
135
- onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
136
- };
137
- const triggerClick = (event) => {
138
- const targetStatus = !openStatus;
139
- changeOpenStatus(event, targetStatus);
140
- };
141
- const hideTooltip = (event) => {
142
- changeOpenStatus(event, false);
143
- };
144
- const showTooltip = (event) => {
145
- changeOpenStatus(event, true);
154
+ const unbindEvent = () => {
155
+ if (!controlByUser) {
156
+ document.removeEventListener("click", clickEventHandler);
157
+ }
158
+ window.removeEventListener("resize", onRootElementMouted);
146
159
  };
160
+ (0, import_react.useEffect)(() => {
161
+ bindEvent();
162
+ return () => {
163
+ unbindEvent();
164
+ };
165
+ }, []);
147
166
  let triggerEventOption;
148
167
  if (!controlByUser) {
149
168
  triggerEventOption = (0, import_utils.triggerEventTransform)({
@@ -156,29 +175,21 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
156
175
  const childrenOptions = __spreadValues({
157
176
  ref: childrenRef
158
177
  }, triggerEventOption);
159
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ import_react.default.createElement(
160
- import_Portal.default,
161
- __spreadProps(__spreadValues({
162
- onRootElementMouted
163
- }, PortalProps), {
164
- ref
165
- }),
178
+ return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ import_react.default.createElement(import_Portal.default, { onRootElementMouted, ref }, /* @__PURE__ */ import_react.default.createElement(
179
+ "div",
180
+ __spreadValues({
181
+ className: (0, import_clsx.default)(prefixCls, className, `tooltip-${arrowDirection}`),
182
+ style: __spreadValues(__spreadValues({}, style), tooltyles),
183
+ "data-id": `tt_${ttId}`
184
+ }, others),
166
185
  /* @__PURE__ */ import_react.default.createElement(
167
186
  "div",
168
- __spreadValues({
169
- className: (0, import_clsx.default)(prefixCls, className, `tooltip-${arrowDirection}`),
170
- style: __spreadValues(__spreadValues({}, style), tooltyles),
171
- "data-id": `tt_${ttId}`
172
- }, others),
173
- /* @__PURE__ */ import_react.default.createElement(
174
- "div",
175
- {
176
- className: (0, import_clsx.default)("bui-tooltip-arrow", `location-${arrowLocation}`)
177
- }
178
- ),
179
- /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-tooltip-content" }, title)
180
- )
181
- ) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
187
+ {
188
+ className: (0, import_clsx.default)("bui-tooltip-arrow", `location-${arrowLocation}`)
189
+ }
190
+ ),
191
+ /* @__PURE__ */ import_react.default.createElement("div", { className: "bui-tooltip-content" }, title)
192
+ )) : null, import_react.default.isValidElement(children) ? import_react.default.cloneElement(children, childrenOptions) : children);
182
193
  });
183
194
  Tooltip.displayName = "BuiTooltip";
184
195
  var Tooltip_default = Tooltip;
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { OverrideProps } from '@bifrostui/types';
3
- import { PortalCoreProps } from '../Portal/Portal.types';
4
3
  type triggerType = 'click' | 'hover';
5
4
  export type TooltipProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
6
5
  props: P & {
@@ -30,10 +29,6 @@ export type TooltipProps<D extends React.ElementType = 'div', P = {}> = Override
30
29
  * @default 'click'
31
30
  */
32
31
  trigger?: triggerType | triggerType[];
33
- /**
34
- * Portal组件的属性
35
- */
36
- PortalProps?: PortalCoreProps;
37
32
  /**
38
33
  * 点击事件回调方法
39
34
  * - event 触发事件
@@ -138,8 +138,9 @@ const prompt = (options) => {
138
138
  const useDialog = () => {
139
139
  const holderRef = React.useRef(null);
140
140
  const wrapAPI = (props) => {
141
- const options = __spreadValues({ theme: holderRef.current.theme }, formatProps(props));
142
- const _a = options, { onConfirm, onCancel } = _a, rest = __objRest(_a, ["onConfirm", "onCancel"]);
141
+ var _a;
142
+ const options = __spreadValues({ theme: (_a = holderRef.current) == null ? void 0 : _a.theme }, formatProps(props));
143
+ const _b = options, { onConfirm, onCancel } = _b, rest = __objRest(_b, ["onConfirm", "onCancel"]);
143
144
  return new Promise((resolve) => {
144
145
  DialogGenerator(__spreadProps(__spreadValues({}, rest), {
145
146
  onConfirm: (val) => __async(void 0, null, function* () {
@@ -156,16 +157,22 @@ const useDialog = () => {
156
157
  }));
157
158
  });
158
159
  };
159
- wrapAPI.confirm = (options) => Dialog(__spreadProps(__spreadValues({
160
- type: "confirm"
161
- }, formatProps(options)), {
162
- theme: holderRef.current.theme
163
- }));
164
- wrapAPI.prompt = (options) => Dialog(__spreadProps(__spreadValues({
165
- type: "prompt"
166
- }, formatProps(options)), {
167
- theme: holderRef.current.theme
168
- }));
160
+ wrapAPI.confirm = (options) => {
161
+ var _a;
162
+ return Dialog(__spreadProps(__spreadValues({
163
+ type: "confirm"
164
+ }, formatProps(options)), {
165
+ theme: (_a = holderRef.current) == null ? void 0 : _a.theme
166
+ }));
167
+ };
168
+ wrapAPI.prompt = (options) => {
169
+ var _a;
170
+ return Dialog(__spreadProps(__spreadValues({
171
+ type: "prompt"
172
+ }, formatProps(options)), {
173
+ theme: (_a = holderRef.current) == null ? void 0 : _a.theme
174
+ }));
175
+ };
169
176
  return [wrapAPI, /* @__PURE__ */ React.createElement(Popup, { key: "dialog-holder", ref: holderRef })];
170
177
  };
171
178
  Dialog.confirm = confirm;
@@ -39,6 +39,10 @@
39
39
  outline: none;
40
40
  background-color: var(--background-color);
41
41
  font-size: var(--bui-text-size-2);
42
+ width: auto;
43
+ overflow: hidden;
44
+ text-overflow: ellipsis;
45
+ white-space: nowrap;
42
46
  }
43
47
  .bui-input-input::placeholder {
44
48
  color: var(--bui-color-fg-subtle);
@@ -3,7 +3,6 @@
3
3
  --localtion-position: var(--bui-popover-localtion-position, 8PX);
4
4
  --max-width: var(--bui-popover-max-width, 350px);
5
5
  --content-min-width: var(--bui-popover-content-min-width, 30px);
6
- --content-min-height: var(--bui-popover-content-min-height, 32px);
7
6
  --content-padding: var(--bui-popover-content-padding, 6px 8px);
8
7
  max-width: var(--max-width);
9
8
  font-size: var(--bui-text-size-1);
@@ -79,8 +78,6 @@
79
78
  }
80
79
  .bui-popover .bui-popover-content {
81
80
  min-width: var(--content-min-width);
82
- min-height: var(--content-min-height);
83
- padding: var(--content-padding);
84
81
  color: var(--bui-color-fg-muted);
85
82
  text-align: left;
86
83
  text-decoration: none;
@@ -92,6 +89,6 @@
92
89
  0 6px 16px 0 rgba(0, 0, 0, 0.08),
93
90
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
94
91
  }
95
- .bui-popover .bui-popover-content div:nth-child(2) {
92
+ .bui-popover .bui-popover-content .bui-popover-title + .bui-popover-inner-content {
96
93
  margin-top: var(--bui-spacing-md);
97
94
  }
@@ -1,6 +1,4 @@
1
1
  var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
2
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
3
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
4
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
16
14
  }
17
15
  return a;
18
16
  };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
17
  var __objRest = (source, exclude) => {
21
18
  var target = {};
22
19
  for (var prop in source)
@@ -34,7 +31,8 @@ import React, { useState, useRef, useEffect } from "react";
34
31
  import {
35
32
  getStylesAndLocation,
36
33
  triggerEventTransform,
37
- useUniqueId
34
+ useUniqueId,
35
+ throttle
38
36
  } from "@bifrostui/utils";
39
37
  import Portal from "../Portal";
40
38
  import "./Popover.css";
@@ -48,11 +46,10 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
48
46
  content,
49
47
  defaultOpen,
50
48
  placement = "top",
51
- trigger,
49
+ trigger = "click",
52
50
  onOpenChange,
53
51
  open,
54
- hideArrow,
55
- PortalProps
52
+ hideArrow
56
53
  } = _a, others = __objRest(_a, [
57
54
  "className",
58
55
  "style",
@@ -64,8 +61,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
64
61
  "trigger",
65
62
  "onOpenChange",
66
63
  "open",
67
- "hideArrow",
68
- "PortalProps"
64
+ "hideArrow"
69
65
  ]);
70
66
  const controlByUser = typeof open !== "undefined";
71
67
  const positionArr = placement.split(/([A-Z])/);
@@ -83,12 +79,34 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
83
79
  const [arrowLocation, setArrowLocation] = useState(location);
84
80
  const [tooltyles, setTooltyles] = useState({});
85
81
  const ttId = useUniqueId();
82
+ const changeOpenStatus = (event, status) => {
83
+ if (controlByUser)
84
+ return;
85
+ setOpenStatus(status);
86
+ onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
87
+ };
88
+ const triggerClick = (event) => {
89
+ event.stopPropagation();
90
+ const targetStatus = !openStatus;
91
+ changeOpenStatus(event, targetStatus);
92
+ };
93
+ const hidePopover = (event) => {
94
+ changeOpenStatus(event, false);
95
+ };
96
+ const showPopover = (event) => {
97
+ changeOpenStatus(event, true);
98
+ };
86
99
  useEffect(() => {
87
100
  if (!controlByUser)
88
101
  return;
89
102
  setOpenStatus(open);
90
103
  }, [open]);
91
- const onRootElementMouted = () => {
104
+ const clickEventHandler = (event) => {
105
+ if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
106
+ return;
107
+ hidePopover(event);
108
+ };
109
+ const onRootElementMouted = throttle(() => {
92
110
  const result = getStylesAndLocation({
93
111
  childrenRef,
94
112
  arrowDirection,
@@ -105,23 +123,25 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
105
123
  setArrowLocation(newArrowLocation);
106
124
  }
107
125
  setTooltyles(styles);
126
+ }, 100);
127
+ const bindEvent = () => {
128
+ if (!controlByUser) {
129
+ document.addEventListener("click", clickEventHandler);
130
+ }
131
+ window.addEventListener("resize", onRootElementMouted);
108
132
  };
109
- const changeOpenStatus = (event, status) => {
110
- if (controlByUser)
111
- return;
112
- setOpenStatus(status);
113
- onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
114
- };
115
- const triggerClick = (event) => {
116
- const targetStatus = !openStatus;
117
- changeOpenStatus(event, targetStatus);
118
- };
119
- const hidePopover = (event) => {
120
- changeOpenStatus(event, false);
121
- };
122
- const showPopover = (event) => {
123
- changeOpenStatus(event, true);
133
+ const unbindEvent = () => {
134
+ if (!controlByUser) {
135
+ document.removeEventListener("click", clickEventHandler);
136
+ }
137
+ window.removeEventListener("resize", onRootElementMouted);
124
138
  };
139
+ useEffect(() => {
140
+ bindEvent();
141
+ return () => {
142
+ unbindEvent();
143
+ };
144
+ }, []);
125
145
  if (!title && !content)
126
146
  return null;
127
147
  let triggerEventOption;
@@ -136,34 +156,26 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
136
156
  const childrenOptions = __spreadValues({
137
157
  ref: childrenRef
138
158
  }, triggerEventOption);
139
- return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(
140
- Portal,
141
- __spreadProps(__spreadValues({
142
- onRootElementMouted
143
- }, PortalProps), {
144
- ref
145
- }),
146
- /* @__PURE__ */ React.createElement(
159
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, open || openStatus ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
160
+ "div",
161
+ __spreadValues({
162
+ className: clsx(prefixCls, className, `popover-${arrowDirection}`, {
163
+ "bui-popover-arrow-hide": hideArrow
164
+ }),
165
+ "data-id": `tt_${ttId}`,
166
+ style: __spreadValues(__spreadValues({}, style), tooltyles)
167
+ }, others),
168
+ !hideArrow ? /* @__PURE__ */ React.createElement(
147
169
  "div",
148
- __spreadValues({
149
- className: clsx(prefixCls, className, `popover-${arrowDirection}`, {
150
- "bui-popover-arrow-hide": hideArrow
151
- }),
152
- "data-id": `tt_${ttId}`,
153
- style: __spreadValues(__spreadValues({}, style), tooltyles)
154
- }, others),
155
- !hideArrow ? /* @__PURE__ */ React.createElement(
156
- "div",
157
- {
158
- className: clsx(
159
- "bui-popover-arrow",
160
- `location-${arrowLocation}`
161
- )
162
- }
163
- ) : null,
164
- /* @__PURE__ */ React.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
165
- )
166
- ) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
170
+ {
171
+ className: clsx(
172
+ "bui-popover-arrow",
173
+ `location-${arrowLocation}`
174
+ )
175
+ }
176
+ ) : null,
177
+ /* @__PURE__ */ React.createElement("div", { className: "bui-popover-content" }, title ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-title" }, title) : null, content ? /* @__PURE__ */ React.createElement("div", { className: "bui-popover-inner-content" }, content) : null)
178
+ )) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
167
179
  });
168
180
  Popover.displayName = "BuiPopover";
169
181
  var Popover_default = Popover;
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { OverrideProps } from '@bifrostui/types';
3
- import { PortalCoreProps } from '../Portal/Portal.types';
4
3
  type triggerType = 'click' | 'hover';
5
4
  export type PopoverProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
6
5
  props: P & {
@@ -39,10 +38,6 @@ export type PopoverProps<D extends React.ElementType = 'div', P = {}> = Override
39
38
  * @default 'click'
40
39
  */
41
40
  trigger?: triggerType | triggerType[];
42
- /**
43
- * Portal组件的属性
44
- */
45
- PortalProps?: PortalCoreProps;
46
41
  /**
47
42
  * 点击事件回调方法
48
43
  * - event 触发事件
@@ -15,7 +15,7 @@ export interface PortalCoreProps {
15
15
  */
16
16
  disablePortal?: boolean;
17
17
  /**
18
- * 页面跟节点
18
+ * 页面根节点
19
19
  */
20
20
  rootElement?: Element;
21
21
  /**
@@ -1,5 +1,5 @@
1
1
  .bui-progress {
2
- --fill-color: var(--bui-progress-fill-color, --bui-color-primary);
2
+ --fill-color: var(--bui-progress-fill-color, var(--bui-color-primary));
3
3
  --trail-color: var(--bui-progress-trail-color, rgba(156, 156, 165, 0.2));
4
4
  --stroke-width: var(--bui-progress-stroke-width, 8px);
5
5
  --width: var(--bui-progress-width, 100%);
@@ -1,7 +1,7 @@
1
1
  .bui-radio {
2
- --label-color: var(--bui-radio-label-color, --bui-color-fg-default);
3
- --label-font-size: var(--bui-radio-label-font-size, --bui-text-size-1);
4
- --icon-font-size: var(--bui-radio-icon-font-size, --bui-title-size-2);
2
+ --label-color: var(--bui-radio-label-color, var(--bui-color-fg-default));
3
+ --label-font-size: var(--bui-radio-label-font-size, var(--bui-text-size-1));
4
+ --icon-font-size: var(--bui-radio-icon-font-size, var(--bui-title-size-2));
5
5
  --icon-padding: var(--bui-radio-icon-padding, 5px);
6
6
  display: inline-flex;
7
7
  align-items: center;
@@ -1,6 +1,6 @@
1
1
  .bui-slider {
2
- --line-color: var(--bui-slider-line-color, --bui-color-primary);
3
- --line-bg-color: var(--bui-slider-line-bg-color, --bui-color-border-default);
2
+ --line-color: var(--bui-slider-line-color, var(--bui-color-primary));
3
+ --line-bg-color: var(--bui-slider-line-bg-color, var(--bui-color-border-default));
4
4
  --width: var(--bui-slider-width, 100%);
5
5
  --height: var(--bui-slider-height, 2px);
6
6
  --padding: var(--bui-slider-padding, 19px 0);
@@ -12,9 +12,9 @@
12
12
  --tooltip-height: var(--bui-slider-tooltip-height, 24px);
13
13
  --tooltip-line-height: var(--bui-slider-tooltip-line-height, 24px);
14
14
  --tooltip-border-radius: var(--bui-slider-tooltip-border-radius, 24px);
15
- --tooltip-font-size: var(--bui-tooltip-font-size, --bui-text-size-3);
16
- --tooltip-color: var(--bui-tooltip-color, --bui-color-white);
17
- --tooltip-bg-color: var(--bui-tooltip-bg-color, --line-color);
15
+ --tooltip-font-size: var(--bui-tooltip-font-size, var(--bui-text-size-3));
16
+ --tooltip-color: var(--bui-tooltip-color, var(--bui-color-white));
17
+ --tooltip-bg-color: var(--bui-tooltip-bg-color, var(--line-color));
18
18
  position: relative;
19
19
  width: var(--width);
20
20
  height: var(--height);
@@ -39,7 +39,7 @@
39
39
  top: 50%;
40
40
  left: 0;
41
41
  width: 100%;
42
- height: var(---height);
42
+ height: var(--height);
43
43
  transform: translateY(-50%);
44
44
  background-color: var(--line-bg-color);
45
45
  }
@@ -1,10 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { OverrideProps } from '@bifrostui/types';
3
3
  import { BaseLang } from '../locales/base';
4
- export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
5
- props: P & ThemeProps;
6
- defaultComponent: D;
7
- }, D>;
8
4
  export interface Breakpoints {
9
5
  /**
10
6
  * 超小屏幕 (小于 576px,实际为了处理临界值,断点值为 575.98px)
@@ -124,4 +120,8 @@ export type MountResponsiveTokenOptions = Pick<ThemeProps, 'responsive'> & {
124
120
  export type UpdateTokensOptions = Pick<ThemeProps, 'isRoot' | 'containerId' | 'container'> & {
125
121
  rootString: string;
126
122
  };
123
+ export type ThemeProviderProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
124
+ props: P & ThemeProps;
125
+ defaultComponent: D;
126
+ }, D>;
127
127
  export { BaseLang, ResponsiveTokenOptions, ThemeProps, BuiltInThemesTokenOptions, componentsTokenOptions, };
@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
32
32
  import { render, unmount, getRootElement } from "@bifrostui/utils";
33
33
  import React, { useCallback, useEffect, useState } from "react";
34
34
  import ToastView from "./Toast";
35
- const toastCloses = [];
35
+ let toastCloses = [];
36
36
  const formatProps = (props) => {
37
37
  if (typeof props === "string") {
38
38
  return { message: props };
@@ -96,7 +96,12 @@ const functionalToast = (props) => {
96
96
  destroyAll();
97
97
  toastCloses.push(close);
98
98
  if (duration !== 0 && typeof duration === "number") {
99
- timer = setTimeout(close, duration);
99
+ timer = setTimeout(() => {
100
+ close();
101
+ if (!allowMultiple) {
102
+ toastCloses = [];
103
+ }
104
+ }, duration);
100
105
  }
101
106
  return () => {
102
107
  clearTimeout(timer);
@@ -128,11 +133,14 @@ functionalToast.clear = () => {
128
133
  const useToast = () => {
129
134
  const holderRef = React.useRef(null);
130
135
  ["warning", "loading", "success", "fail"].forEach((methodName) => {
131
- functionalToast[methodName] = (options) => functionalToast(__spreadProps(__spreadValues({
132
- type: methodName
133
- }, formatProps(options)), {
134
- theme: holderRef.current.theme
135
- }));
136
+ functionalToast[methodName] = (options) => {
137
+ var _a;
138
+ return functionalToast(__spreadProps(__spreadValues({
139
+ type: methodName
140
+ }, formatProps(options)), {
141
+ theme: (_a = holderRef.current) == null ? void 0 : _a.theme
142
+ }));
143
+ };
136
144
  });
137
145
  functionalToast.clear = () => {
138
146
  setTimeout(() => {
@@ -1,13 +1,14 @@
1
1
  .bui-toast {
2
2
  --min-width: var(--bui-toast-min-width, 86px);
3
3
  --max-width: var(--bui-toast-max-width, 80%);
4
+ --text-align: var(--bui-toast-text-align, center);
4
5
  --flex-direction: var(--bui-toast-flex-direction, column);
5
6
  --padding: var(--bui-toast-padding, var(--bui-spacing-xl));
6
7
  --position-top: var(--bui-toast-position-top, 15%);
7
8
  --position-bottom: var(--bui-toast-position-bottom, 85%);
8
9
  --background-color: var(--bui-toast-bg-color, rgba(0, 0, 0, 0.8));
9
- --border-radius: var(--bui-toast-border-radius, --bui-shape-radius-default);
10
- --icon-margin: var(--bui-toast-icon-margin-bottom, 8px);
10
+ --border-radius: var(--bui-toast-border-radius, var(--bui-shape-radius-default));
11
+ --icon-margin: var(--bui-toast-icon-margin, 0 0 8px);
11
12
  --icon-font-size: var(--bui-toast-icon-font-size, 30px);
12
13
  position: fixed;
13
14
  left: 50%;
@@ -22,7 +23,7 @@
22
23
  word-break: break-all;
23
24
  white-space: pre-wrap;
24
25
  background-color: var(--background-color);
25
- text-align: center;
26
+ text-align: var(--text-align);
26
27
  font-family: var(--bui-font-family);
27
28
  }
28
29
  .bui-toast.bui-toast-allow-click {
@@ -48,6 +49,6 @@
48
49
  align-items: center;
49
50
  }
50
51
  .bui-toast-icon .bui-svg-icon {
51
- margin: 0 0 var(--icon-margin);
52
+ margin: var(--icon-margin);
52
53
  font-size: var(--icon-font-size);
53
54
  }
@@ -1,6 +1,4 @@
1
1
  var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
2
  var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
3
  var __hasOwnProp = Object.prototype.hasOwnProperty;
6
4
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
16
14
  }
17
15
  return a;
18
16
  };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
17
  var __objRest = (source, exclude) => {
21
18
  var target = {};
22
19
  for (var prop in source)
@@ -34,7 +31,8 @@ import React, { useState, useRef, useEffect } from "react";
34
31
  import {
35
32
  getStylesAndLocation,
36
33
  triggerEventTransform,
37
- useUniqueId
34
+ useUniqueId,
35
+ throttle
38
36
  } from "@bifrostui/utils";
39
37
  import Portal from "../Portal";
40
38
  import "./Tooltip.css";
@@ -47,10 +45,9 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
47
45
  title,
48
46
  defaultOpen,
49
47
  placement = "top",
50
- trigger,
48
+ trigger = "click",
51
49
  onOpenChange,
52
- open,
53
- PortalProps
50
+ open
54
51
  } = _a, others = __objRest(_a, [
55
52
  "className",
56
53
  "style",
@@ -60,8 +57,7 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
60
57
  "placement",
61
58
  "trigger",
62
59
  "onOpenChange",
63
- "open",
64
- "PortalProps"
60
+ "open"
65
61
  ]);
66
62
  const controlByUser = typeof open !== "undefined";
67
63
  const positionArr = placement.split(/([A-Z])/);
@@ -79,12 +75,34 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
79
75
  const [arrowLocation, setArrowLocation] = useState(location);
80
76
  const [tooltyles, setTooltyles] = useState({});
81
77
  const ttId = useUniqueId();
78
+ const changeOpenStatus = (event, status) => {
79
+ if (controlByUser)
80
+ return;
81
+ setOpenStatus(status);
82
+ onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
83
+ };
84
+ const triggerClick = (event) => {
85
+ event.stopPropagation();
86
+ const targetStatus = !openStatus;
87
+ changeOpenStatus(event, targetStatus);
88
+ };
89
+ const hideTooltip = (event) => {
90
+ changeOpenStatus(event, false);
91
+ };
92
+ const showTooltip = (event) => {
93
+ changeOpenStatus(event, true);
94
+ };
82
95
  useEffect(() => {
83
96
  if (!controlByUser)
84
97
  return;
85
98
  setOpenStatus(open);
86
99
  }, [open]);
87
- const onRootElementMouted = () => {
100
+ const clickEventHandler = (event) => {
101
+ if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
102
+ return;
103
+ hideTooltip(event);
104
+ };
105
+ const onRootElementMouted = throttle(() => {
88
106
  const result = getStylesAndLocation({
89
107
  childrenRef,
90
108
  arrowDirection,
@@ -101,23 +119,25 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
101
119
  setArrowLocation(newArrowLocation);
102
120
  }
103
121
  setTooltyles(styles);
122
+ }, 100);
123
+ const bindEvent = () => {
124
+ if (!controlByUser) {
125
+ document.addEventListener("click", clickEventHandler);
126
+ }
127
+ window.addEventListener("resize", onRootElementMouted);
104
128
  };
105
- const changeOpenStatus = (event, status) => {
106
- if (controlByUser)
107
- return;
108
- setOpenStatus(status);
109
- onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
110
- };
111
- const triggerClick = (event) => {
112
- const targetStatus = !openStatus;
113
- changeOpenStatus(event, targetStatus);
114
- };
115
- const hideTooltip = (event) => {
116
- changeOpenStatus(event, false);
117
- };
118
- const showTooltip = (event) => {
119
- changeOpenStatus(event, true);
129
+ const unbindEvent = () => {
130
+ if (!controlByUser) {
131
+ document.removeEventListener("click", clickEventHandler);
132
+ }
133
+ window.removeEventListener("resize", onRootElementMouted);
120
134
  };
135
+ useEffect(() => {
136
+ bindEvent();
137
+ return () => {
138
+ unbindEvent();
139
+ };
140
+ }, []);
121
141
  let triggerEventOption;
122
142
  if (!controlByUser) {
123
143
  triggerEventOption = triggerEventTransform({
@@ -130,29 +150,21 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
130
150
  const childrenOptions = __spreadValues({
131
151
  ref: childrenRef
132
152
  }, triggerEventOption);
133
- return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(
134
- Portal,
135
- __spreadProps(__spreadValues({
136
- onRootElementMouted
137
- }, PortalProps), {
138
- ref
139
- }),
153
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, (open || openStatus) && title ? /* @__PURE__ */ React.createElement(Portal, { onRootElementMouted, ref }, /* @__PURE__ */ React.createElement(
154
+ "div",
155
+ __spreadValues({
156
+ className: clsx(prefixCls, className, `tooltip-${arrowDirection}`),
157
+ style: __spreadValues(__spreadValues({}, style), tooltyles),
158
+ "data-id": `tt_${ttId}`
159
+ }, others),
140
160
  /* @__PURE__ */ React.createElement(
141
161
  "div",
142
- __spreadValues({
143
- className: clsx(prefixCls, className, `tooltip-${arrowDirection}`),
144
- style: __spreadValues(__spreadValues({}, style), tooltyles),
145
- "data-id": `tt_${ttId}`
146
- }, others),
147
- /* @__PURE__ */ React.createElement(
148
- "div",
149
- {
150
- className: clsx("bui-tooltip-arrow", `location-${arrowLocation}`)
151
- }
152
- ),
153
- /* @__PURE__ */ React.createElement("div", { className: "bui-tooltip-content" }, title)
154
- )
155
- ) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
162
+ {
163
+ className: clsx("bui-tooltip-arrow", `location-${arrowLocation}`)
164
+ }
165
+ ),
166
+ /* @__PURE__ */ React.createElement("div", { className: "bui-tooltip-content" }, title)
167
+ )) : null, React.isValidElement(children) ? React.cloneElement(children, childrenOptions) : children);
156
168
  });
157
169
  Tooltip.displayName = "BuiTooltip";
158
170
  var Tooltip_default = Tooltip;
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { OverrideProps } from '@bifrostui/types';
3
- import { PortalCoreProps } from '../Portal/Portal.types';
4
3
  type triggerType = 'click' | 'hover';
5
4
  export type TooltipProps<D extends React.ElementType = 'div', P = {}> = OverrideProps<{
6
5
  props: P & {
@@ -30,10 +29,6 @@ export type TooltipProps<D extends React.ElementType = 'div', P = {}> = Override
30
29
  * @default 'click'
31
30
  */
32
31
  trigger?: triggerType | triggerType[];
33
- /**
34
- * Portal组件的属性
35
- */
36
- PortalProps?: PortalCoreProps;
37
32
  /**
38
33
  * 点击事件回调方法
39
34
  * - event 触发事件
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bifrostui/react",
3
- "version": "1.4.0-beta.0",
3
+ "version": "1.4.0-beta.2",
4
4
  "description": "React components for building mobile application",
5
5
  "homepage": "http://bui.taopiaopiao.com",
6
6
  "license": "MIT",
@@ -33,10 +33,10 @@
33
33
  "clsx": "^1.2.1",
34
34
  "dayjs": "^1.11.7",
35
35
  "swiper": "^8.1.5",
36
- "@bifrostui/icons": "1.4.0-beta.0",
37
- "@bifrostui/types": "1.4.0-beta.0",
38
- "@bifrostui/styles": "1.4.0-beta.0",
39
- "@bifrostui/utils": "1.4.0-beta.0"
36
+ "@bifrostui/icons": "1.4.0-beta.2",
37
+ "@bifrostui/styles": "1.4.0-beta.2",
38
+ "@bifrostui/types": "1.4.0-beta.2",
39
+ "@bifrostui/utils": "1.4.0-beta.2"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@tarojs/components": "^3.0.0",