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

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.
Files changed (9) hide show
  1. package/dist/Popover/Popover.css +1 -4
  2. package/dist/Popover/Popover.js +31 -17
  3. package/dist/Portal/Portal.types.d.ts +1 -1
  4. package/dist/Tooltip/Tooltip.js +31 -17
  5. package/es/Popover/Popover.css +1 -4
  6. package/es/Popover/Popover.js +31 -17
  7. package/es/Portal/Portal.types.d.ts +1 -1
  8. package/es/Tooltip/Tooltip.js +31 -17
  9. package/package.json +5 -5
package/dist/Popover/Popover.css CHANGED
@@ -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
  }
package/dist/Popover/Popover.js CHANGED
@@ -74,7 +74,7 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
74
74
  content,
75
75
  defaultOpen,
76
76
  placement = "top",
77
- trigger,
77
+ trigger = "click",
78
78
  onOpenChange,
79
79
  open,
80
80
  hideArrow,
@@ -109,11 +109,41 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
109
109
  const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
110
110
  const [tooltyles, setTooltyles] = (0, import_react.useState)({});
111
111
  const ttId = (0, import_utils.useUniqueId)();
112
+ const changeOpenStatus = (event, status) => {
113
+ if (controlByUser)
114
+ return;
115
+ setOpenStatus(status);
116
+ onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
117
+ };
118
+ const triggerClick = (event) => {
119
+ event.stopPropagation();
120
+ const targetStatus = !openStatus;
121
+ changeOpenStatus(event, targetStatus);
122
+ };
123
+ const hidePopover = (event) => {
124
+ changeOpenStatus(event, false);
125
+ };
126
+ const showPopover = (event) => {
127
+ changeOpenStatus(event, true);
128
+ };
112
129
  (0, import_react.useEffect)(() => {
113
130
  if (!controlByUser)
114
131
  return;
115
132
  setOpenStatus(open);
116
133
  }, [open]);
134
+ const clickEventHandler = (event) => {
135
+ if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
136
+ return;
137
+ hidePopover(event);
138
+ };
139
+ (0, import_react.useEffect)(() => {
140
+ if (controlByUser)
141
+ return;
142
+ document.addEventListener("click", clickEventHandler);
143
+ return () => {
144
+ document.removeEventListener("click", clickEventHandler);
145
+ };
146
+ }, []);
117
147
  const onRootElementMouted = () => {
118
148
  const result = (0, import_utils.getStylesAndLocation)({
119
149
  childrenRef,
@@ -132,22 +162,6 @@ const Popover = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
132
162
  }
133
163
  setTooltyles(styles);
134
164
  };
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);
150
- };
151
165
  if (!title && !content)
152
166
  return null;
153
167
  let triggerEventOption;
package/dist/Portal/Portal.types.d.ts CHANGED
@@ -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
  /**
package/dist/Tooltip/Tooltip.js CHANGED
@@ -73,7 +73,7 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
73
73
  title,
74
74
  defaultOpen,
75
75
  placement = "top",
76
- trigger,
76
+ trigger = "click",
77
77
  onOpenChange,
78
78
  open,
79
79
  PortalProps
@@ -105,11 +105,41 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
105
105
  const [arrowLocation, setArrowLocation] = (0, import_react.useState)(location);
106
106
  const [tooltyles, setTooltyles] = (0, import_react.useState)({});
107
107
  const ttId = (0, import_utils.useUniqueId)();
108
+ const changeOpenStatus = (event, status) => {
109
+ if (controlByUser)
110
+ return;
111
+ setOpenStatus(status);
112
+ onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
113
+ };
114
+ const triggerClick = (event) => {
115
+ event.stopPropagation();
116
+ const targetStatus = !openStatus;
117
+ changeOpenStatus(event, targetStatus);
118
+ };
119
+ const hideTooltip = (event) => {
120
+ changeOpenStatus(event, false);
121
+ };
122
+ const showTooltip = (event) => {
123
+ changeOpenStatus(event, true);
124
+ };
108
125
  (0, import_react.useEffect)(() => {
109
126
  if (!controlByUser)
110
127
  return;
111
128
  setOpenStatus(open);
112
129
  }, [open]);
130
+ const clickEventHandler = (event) => {
131
+ if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
132
+ return;
133
+ hideTooltip(event);
134
+ };
135
+ (0, import_react.useEffect)(() => {
136
+ if (controlByUser)
137
+ return;
138
+ document.addEventListener("click", clickEventHandler);
139
+ return () => {
140
+ document.removeEventListener("click", clickEventHandler);
141
+ };
142
+ }, []);
113
143
  const onRootElementMouted = () => {
114
144
  const result = (0, import_utils.getStylesAndLocation)({
115
145
  childrenRef,
@@ -128,22 +158,6 @@ const Tooltip = /* @__PURE__ */ import_react.default.forwardRef((props, ref) =>
128
158
  }
129
159
  setTooltyles(styles);
130
160
  };
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);
146
- };
147
161
  let triggerEventOption;
148
162
  if (!controlByUser) {
149
163
  triggerEventOption = (0, import_utils.triggerEventTransform)({
package/es/Popover/Popover.css CHANGED
@@ -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
  }
package/es/Popover/Popover.js CHANGED
@@ -48,7 +48,7 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
48
48
  content,
49
49
  defaultOpen,
50
50
  placement = "top",
51
- trigger,
51
+ trigger = "click",
52
52
  onOpenChange,
53
53
  open,
54
54
  hideArrow,
@@ -83,11 +83,41 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
83
83
  const [arrowLocation, setArrowLocation] = useState(location);
84
84
  const [tooltyles, setTooltyles] = useState({});
85
85
  const ttId = useUniqueId();
86
+ const changeOpenStatus = (event, status) => {
87
+ if (controlByUser)
88
+ return;
89
+ setOpenStatus(status);
90
+ onOpenChange == null ? void 0 : onOpenChange(event, { open: status });
91
+ };
92
+ const triggerClick = (event) => {
93
+ event.stopPropagation();
94
+ const targetStatus = !openStatus;
95
+ changeOpenStatus(event, targetStatus);
96
+ };
97
+ const hidePopover = (event) => {
98
+ changeOpenStatus(event, false);
99
+ };
100
+ const showPopover = (event) => {
101
+ changeOpenStatus(event, true);
102
+ };
86
103
  useEffect(() => {
87
104
  if (!controlByUser)
88
105
  return;
89
106
  setOpenStatus(open);
90
107
  }, [open]);
108
+ const clickEventHandler = (event) => {
109
+ if (trigger === "hover" || (trigger == null ? void 0 : trigger.length) === 1 && (trigger == null ? void 0 : trigger[0]) === "hover")
110
+ return;
111
+ hidePopover(event);
112
+ };
113
+ useEffect(() => {
114
+ if (controlByUser)
115
+ return;
116
+ document.addEventListener("click", clickEventHandler);
117
+ return () => {
118
+ document.removeEventListener("click", clickEventHandler);
119
+ };
120
+ }, []);
91
121
  const onRootElementMouted = () => {
92
122
  const result = getStylesAndLocation({
93
123
  childrenRef,
@@ -106,22 +136,6 @@ const Popover = /* @__PURE__ */ React.forwardRef((props, ref) => {
106
136
  }
107
137
  setTooltyles(styles);
108
138
  };
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);
124
- };
125
139
  if (!title && !content)
126
140
  return null;
127
141
  let triggerEventOption;
package/es/Portal/Portal.types.d.ts CHANGED
@@ -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
  /**
package/es/Tooltip/Tooltip.js CHANGED
@@ -47,7 +47,7 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
47
47
  title,
48
48
  defaultOpen,
49
49
  placement = "top",
50
- trigger,
50
+ trigger = "click",
51
51
  onOpenChange,
52
52
  open,
53
53
  PortalProps
@@ -79,11 +79,41 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
79
79
  const [arrowLocation, setArrowLocation] = useState(location);
80
80
  const [tooltyles, setTooltyles] = useState({});
81
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 hideTooltip = (event) => {
94
+ changeOpenStatus(event, false);
95
+ };
96
+ const showTooltip = (event) => {
97
+ changeOpenStatus(event, true);
98
+ };
82
99
  useEffect(() => {
83
100
  if (!controlByUser)
84
101
  return;
85
102
  setOpenStatus(open);
86
103
  }, [open]);
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
+ hideTooltip(event);
108
+ };
109
+ useEffect(() => {
110
+ if (controlByUser)
111
+ return;
112
+ document.addEventListener("click", clickEventHandler);
113
+ return () => {
114
+ document.removeEventListener("click", clickEventHandler);
115
+ };
116
+ }, []);
87
117
  const onRootElementMouted = () => {
88
118
  const result = getStylesAndLocation({
89
119
  childrenRef,
@@ -102,22 +132,6 @@ const Tooltip = /* @__PURE__ */ React.forwardRef((props, ref) => {
102
132
  }
103
133
  setTooltyles(styles);
104
134
  };
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);
120
- };
121
135
  let triggerEventOption;
122
136
  if (!controlByUser) {
123
137
  triggerEventOption = triggerEventTransform({
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.1",
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.1",
37
+ "@bifrostui/types": "1.4.0-beta.1",
38
+ "@bifrostui/styles": "1.4.0-beta.1",
39
+ "@bifrostui/utils": "1.4.0-beta.1"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "@tarojs/components": "^3.0.0",