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.
@@ -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: React.ForwardRefExoticComponent<import("../..").DefaultProps & {
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").DefaultProps & {
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 __types from '@/types';
4
- export { DefaultProps, MouseEventHandlerSelect, Placement, RuleType, RuleTypes, SyntheticBaseEvent, TargetProps } from '@/types';
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 { PopoverProps } from '@/types/popover';
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<__types.DefaultProps & {
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, forwardRef, cloneElement } from 'react';
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
- function mergeRefs(...refs) {
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
- }, ref) => {
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: mergedRef,
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,