x-ui-design 0.8.30 → 0.8.31
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.
- package/dist/esm/types/components/Popover/Popover.d.ts +2 -13
- package/dist/esm/types/index.d.ts +1 -13
- package/dist/index.d.ts +4 -16
- package/dist/index.esm.js +5 -27
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -26
- package/dist/index.js.map +1 -1
- package/lib/components/Popover/Popover.tsx +13 -52
- package/package.json +1 -1
|
@@ -1,16 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { PopoverProps } from "../../types/popover";
|
|
2
3
|
import './style.css';
|
|
3
|
-
declare const Popover:
|
|
4
|
-
content: React.ReactNode;
|
|
5
|
-
children: React.ReactNode;
|
|
6
|
-
trigger?: "click" | "hover";
|
|
7
|
-
placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
|
|
8
|
-
open?: boolean;
|
|
9
|
-
overlayStyle?: React.CSSProperties;
|
|
10
|
-
overlayClassName?: string;
|
|
11
|
-
title?: string | React.ReactNode;
|
|
12
|
-
visible?: boolean;
|
|
13
|
-
onVisibleChange?: ((open: boolean) => void) | undefined;
|
|
14
|
-
getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
|
|
15
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
4
|
+
declare const Popover: ({ prefixCls, content, children, trigger, placement, open, visible, title, style, overlayClassName, overlayStyle, onVisibleChange, getPopupContainer }: PopoverProps) => React.JSX.Element;
|
|
16
5
|
export default Popover;
|
|
@@ -26,19 +26,7 @@ declare const Menu: import("react").ComponentType<import("@/types/menu").MenuPro
|
|
|
26
26
|
declare const MenuItem: import("react").ComponentType<import("@/types/menu").ItemType>;
|
|
27
27
|
declare const MenuSubMenu: import("react").ComponentType<import("@/types/menu").SubMenuItem>;
|
|
28
28
|
declare const Dropdown: import("react").ComponentType<import("@/types/dropdown").DropdownProps>;
|
|
29
|
-
declare const Popover: import("react").ComponentType<import("@/types").
|
|
30
|
-
content: import("react").ReactNode;
|
|
31
|
-
children: import("react").ReactNode;
|
|
32
|
-
trigger?: "click" | "hover";
|
|
33
|
-
placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
|
|
34
|
-
open?: boolean;
|
|
35
|
-
overlayStyle?: import("react").CSSProperties;
|
|
36
|
-
overlayClassName?: string;
|
|
37
|
-
title?: string | import("react").ReactNode;
|
|
38
|
-
visible?: boolean;
|
|
39
|
-
onVisibleChange?: ((open: boolean) => void) | undefined;
|
|
40
|
-
getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
|
|
41
|
-
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
29
|
+
declare const Popover: import("react").ComponentType<import("@/types/popover").PopoverProps>;
|
|
42
30
|
declare const Result: import("react").ComponentType<import("@/types/result").ResultProps>;
|
|
43
31
|
export { Button, Checkbox, Empty, DatePicker, RangePicker, TimePicker, Form, FormItem, Input, Textarea, Radio, RadioButton, RadioGroup, Select, Option, Tag, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, Upload, Switch, Menu, MenuItem, MenuSubMenu, Dropdown, Popover, Result };
|
|
44
32
|
export { ClearIcon, ArrowIcon, LoadingIcon, CheckIcon, SearchIcon, CalendarIcon, SuccessIcon, ErrorIcon, DateDistanceIcon, TimeIcon, StampleIcon, TrashIcon, SpinerIcon, } from '@/components/Icons';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as __types_result from '@/types/result';
|
|
2
2
|
export { ResultProps, ResultStatusType } from '@/types/result';
|
|
3
|
-
import * as
|
|
4
|
-
export {
|
|
3
|
+
import * as __types_popover from '@/types/popover';
|
|
4
|
+
export { PopoverProps } from '@/types/popover';
|
|
5
5
|
import * as __types_dropdown from '@/types/dropdown';
|
|
6
6
|
export { DropdownItemType, DropdownProps } from '@/types/dropdown';
|
|
7
7
|
import * as __types_menu from '@/types/menu';
|
|
@@ -27,7 +27,7 @@ export { BaseButtonProps, ButtonProps, ButtonType } from '@/types/button';
|
|
|
27
27
|
export { ArrowIcon, CalendarIcon, CheckIcon, ClearIcon, DateDistanceIcon, ErrorIcon, LoadingIcon, SearchIcon, SpinerIcon, StampleIcon, SuccessIcon, TimeIcon, TrashIcon } from '@/components/Icons';
|
|
28
28
|
export { useForm } from '@/hooks/useForm';
|
|
29
29
|
export { useWatch } from '@/hooks/useWatch';
|
|
30
|
-
export {
|
|
30
|
+
export { DefaultProps, MouseEventHandlerSelect, Placement, RuleType, RuleTypes, SyntheticBaseEvent, TargetProps } from '@/types';
|
|
31
31
|
export { FormContext } from '@/components/Form/Form';
|
|
32
32
|
export { clsx, createArray, parseValue } from '@/helpers';
|
|
33
33
|
export { flattenChildren } from '@/helpers/flatten';
|
|
@@ -139,19 +139,7 @@ declare const Menu: react.ComponentType<__types_menu.MenuProps>;
|
|
|
139
139
|
declare const MenuItem: react.ComponentType<__types_menu.ItemType>;
|
|
140
140
|
declare const MenuSubMenu: react.ComponentType<__types_menu.SubMenuItem>;
|
|
141
141
|
declare const Dropdown: react.ComponentType<__types_dropdown.DropdownProps>;
|
|
142
|
-
declare const Popover: react.ComponentType<
|
|
143
|
-
content: react.ReactNode;
|
|
144
|
-
children: react.ReactNode;
|
|
145
|
-
trigger?: "click" | "hover";
|
|
146
|
-
placement?: "top" | "bottom" | "left" | "right" | "topRight" | "bottomRight" | "topLeft" | "bottomLeft";
|
|
147
|
-
open?: boolean;
|
|
148
|
-
overlayStyle?: react.CSSProperties;
|
|
149
|
-
overlayClassName?: string;
|
|
150
|
-
title?: string | react.ReactNode;
|
|
151
|
-
visible?: boolean;
|
|
152
|
-
onVisibleChange?: ((open: boolean) => void) | undefined;
|
|
153
|
-
getPopupContainer?: ((node: HTMLElement) => HTMLElement) | undefined;
|
|
154
|
-
} & react.RefAttributes<HTMLDivElement>>;
|
|
142
|
+
declare const Popover: react.ComponentType<__types_popover.PopoverProps>;
|
|
155
143
|
declare const Result: react.ComponentType<__types_result.ResultProps>;
|
|
156
144
|
|
|
157
145
|
export { Button, Checkbox, DatePicker, Dropdown, Empty, Form, FormItem, Input, Menu, MenuItem, MenuSubMenu, Option, Popover, Radio, RadioButton, RadioGroup, RangePicker, Result, Select, Skeleton, SkeletonAvatar, SkeletonButton, SkeletonImage, SkeletonInput, Switch, Tag, Textarea, TimePicker, Upload };
|
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import require$$1 from 'react/jsx-runtime';
|
|
2
|
-
import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, useCallback, createContext, useImperativeHandle, useLayoutEffect,
|
|
2
|
+
import React, { useRef, useState, Children, isValidElement, Fragment, Suspense, useEffect, useContext, useMemo, useCallback, createContext, useImperativeHandle, useLayoutEffect, cloneElement } from 'react';
|
|
3
3
|
import { createPortal } from 'react-dom';
|
|
4
4
|
import ReactDOMServer from 'react-dom/server';
|
|
5
5
|
|
|
@@ -5532,15 +5532,7 @@ var Dropdown$1 = /*#__PURE__*/Object.freeze({
|
|
|
5532
5532
|
var css_248z$1 = ".xUi-popover{&:before{content:\"\";height:10px;left:0;position:absolute;top:-10px;width:100%;z-index:10000}}.xUi-popover-wrapper-content{cursor:pointer;max-width:fit-content;width:-webkit-fill-available}.xUi-popover{background:var(--xui-background-color);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:8px 12px;width:max-content;z-index:1000}.xUi-popover-title{padding:4px}.xUi-popover-inner{color:var(--xui-text-color);font-size:14px}.xUi-popover-arrow{background:var(--xui-background-color);border-left:.5px solid var(--xui-border-color);border-top:.5px solid var(--xui-border-color);height:10px;left:12px;position:absolute;top:-6px;transform:rotate(45deg);width:10px}.xUi-popover-bottomRight .xUi-popover-arrow,.xUi-popover-right .xUi-popover-arrow,.xUi-popover-topRight .xUi-popover-arrow{left:unset;right:12px}.xUi-popover-arrow.bottom{border-bottom:.5px solid var(--xui-border-color);border-left:unset;border-right:.5px solid var(--xui-border-color);border-top:unset;bottom:-6px;top:unset}.xUi-popover-arrow.center{left:0;margin:0 auto;right:0}";
|
|
5533
5533
|
styleInject(css_248z$1);
|
|
5534
5534
|
|
|
5535
|
-
|
|
5536
|
-
return node => {
|
|
5537
|
-
refs.forEach(ref => {
|
|
5538
|
-
if (!ref) return;
|
|
5539
|
-
if (typeof ref === "function") ref(node);else ref.current = node;
|
|
5540
|
-
});
|
|
5541
|
-
};
|
|
5542
|
-
}
|
|
5543
|
-
const Popover = /*#__PURE__*/forwardRef(({
|
|
5535
|
+
const Popover = ({
|
|
5544
5536
|
prefixCls = prefixClsPopover,
|
|
5545
5537
|
content,
|
|
5546
5538
|
children,
|
|
@@ -5554,7 +5546,7 @@ const Popover = /*#__PURE__*/forwardRef(({
|
|
|
5554
5546
|
overlayStyle = {},
|
|
5555
5547
|
onVisibleChange,
|
|
5556
5548
|
getPopupContainer
|
|
5557
|
-
}
|
|
5549
|
+
}) => {
|
|
5558
5550
|
const triggerRef = useRef(null);
|
|
5559
5551
|
const popupRef = useRef(null);
|
|
5560
5552
|
const [innerOpen, setInnerOpen] = useState(false);
|
|
@@ -5570,17 +5562,6 @@ const Popover = /*#__PURE__*/forwardRef(({
|
|
|
5570
5562
|
triggerRef,
|
|
5571
5563
|
getPopupContainer: getPopupContainer?.(triggerRef.current)
|
|
5572
5564
|
});
|
|
5573
|
-
useImperativeHandle(ref, () => ({
|
|
5574
|
-
focus: () => triggerRef.current?.focus(),
|
|
5575
|
-
blur: () => triggerRef.current?.blur(),
|
|
5576
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
5577
|
-
// @ts-expect-error
|
|
5578
|
-
scrollTo: (...args) =>
|
|
5579
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
5580
|
-
// @ts-expect-error
|
|
5581
|
-
selectRef.current?.scrollTo(...args),
|
|
5582
|
-
nativeElement: triggerRef.current
|
|
5583
|
-
}), []);
|
|
5584
5565
|
useEffect(() => {
|
|
5585
5566
|
const handleClickOutside = e => {
|
|
5586
5567
|
if (popupRef.current && !popupRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
|
|
@@ -5620,15 +5601,12 @@ const Popover = /*#__PURE__*/forwardRef(({
|
|
|
5620
5601
|
if (! /*#__PURE__*/isValidElement(child)) {
|
|
5621
5602
|
child = /*#__PURE__*/React.createElement("div", null, child);
|
|
5622
5603
|
}
|
|
5623
|
-
// Merge user's ref + internal triggerRef
|
|
5624
|
-
const existingRef = child.ref;
|
|
5625
|
-
const mergedRef = mergeRefs(existingRef, triggerRef);
|
|
5626
5604
|
return /*#__PURE__*/cloneElement(child, {
|
|
5627
5605
|
key: index,
|
|
5628
5606
|
...(index === 0 ? {
|
|
5629
5607
|
style,
|
|
5630
5608
|
...childProps,
|
|
5631
|
-
ref:
|
|
5609
|
+
ref: triggerRef,
|
|
5632
5610
|
className: `${prefixCls}-wrapper-content`
|
|
5633
5611
|
} : {})
|
|
5634
5612
|
});
|
|
@@ -5652,7 +5630,7 @@ const Popover = /*#__PURE__*/forwardRef(({
|
|
|
5652
5630
|
}, content), /*#__PURE__*/React.createElement("div", {
|
|
5653
5631
|
className: `${prefixCls}-arrow ${showPlacement}`
|
|
5654
5632
|
}))));
|
|
5655
|
-
}
|
|
5633
|
+
};
|
|
5656
5634
|
|
|
5657
5635
|
var Popover$1 = /*#__PURE__*/Object.freeze({
|
|
5658
5636
|
__proto__: null,
|