cr-ui-lib 1.1.85 → 1.1.89
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/index.d.mts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +112 -84
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +112 -84
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -247,9 +247,10 @@ declare type SingleSelectDropdownProps = {
|
|
|
247
247
|
usePortal?: boolean;
|
|
248
248
|
placeholderClass?: string;
|
|
249
249
|
iconClass?: string;
|
|
250
|
+
displayContainerClass?: string;
|
|
250
251
|
};
|
|
251
|
-
declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, usePortal, //
|
|
252
|
-
iconClass, placeholderClass, }: SingleSelectDropdownProps): JSX.Element;
|
|
252
|
+
declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, usePortal, // default true
|
|
253
|
+
iconClass, placeholderClass, displayContainerClass, }: SingleSelectDropdownProps): JSX.Element;
|
|
253
254
|
|
|
254
255
|
interface SelectionButton {
|
|
255
256
|
data: string[];
|
package/dist/index.d.ts
CHANGED
|
@@ -247,9 +247,10 @@ declare type SingleSelectDropdownProps = {
|
|
|
247
247
|
usePortal?: boolean;
|
|
248
248
|
placeholderClass?: string;
|
|
249
249
|
iconClass?: string;
|
|
250
|
+
displayContainerClass?: string;
|
|
250
251
|
};
|
|
251
|
-
declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, usePortal, //
|
|
252
|
-
iconClass, placeholderClass, }: SingleSelectDropdownProps): JSX.Element;
|
|
252
|
+
declare function SingleSelectDropdown({ label, value, onChange, options, placeholder, onScrollToEnd, onSearch, hasMore, isLoading, searchable, searchDebounceMs, requiresSearch, minSearchLength, emptyMessage, loadingMessage, searchPlaceholder, disabled, hasIcon, buttonClass, labelClass, displayItemClass, displayMainClass, hasSearchIcon, searchInputClass, placeholderSearchClass, usePortal, // default true
|
|
253
|
+
iconClass, placeholderClass, displayContainerClass, }: SingleSelectDropdownProps): JSX.Element;
|
|
253
254
|
|
|
254
255
|
interface SelectionButton {
|
|
255
256
|
data: string[];
|
package/dist/index.js
CHANGED
|
@@ -3456,9 +3456,10 @@ function SingleSelectDropdown({
|
|
|
3456
3456
|
searchInputClass = "",
|
|
3457
3457
|
placeholderSearchClass = "",
|
|
3458
3458
|
usePortal = true,
|
|
3459
|
-
//
|
|
3459
|
+
// default true
|
|
3460
3460
|
iconClass = "",
|
|
3461
|
-
placeholderClass = ""
|
|
3461
|
+
placeholderClass = "",
|
|
3462
|
+
displayContainerClass = ""
|
|
3462
3463
|
}) {
|
|
3463
3464
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
3464
3465
|
const [searchTerm, setSearchTerm] = React.useState("");
|
|
@@ -3556,8 +3557,8 @@ function SingleSelectDropdown({
|
|
|
3556
3557
|
onSearch("");
|
|
3557
3558
|
}
|
|
3558
3559
|
}, [isOpen]);
|
|
3559
|
-
React.
|
|
3560
|
-
if (
|
|
3560
|
+
const updatePosition = React.useCallback(() => {
|
|
3561
|
+
if (dropdownRef.current && usePortal && isOpen) {
|
|
3561
3562
|
const rect = dropdownRef.current.getBoundingClientRect();
|
|
3562
3563
|
setDropdownPosition({
|
|
3563
3564
|
top: rect.bottom + window.scrollY,
|
|
@@ -3566,6 +3567,22 @@ function SingleSelectDropdown({
|
|
|
3566
3567
|
});
|
|
3567
3568
|
}
|
|
3568
3569
|
}, [isOpen, usePortal]);
|
|
3570
|
+
React.useLayoutEffect(() => {
|
|
3571
|
+
if (isOpen && usePortal) {
|
|
3572
|
+
updatePosition();
|
|
3573
|
+
window.addEventListener("scroll", updatePosition, {
|
|
3574
|
+
capture: true,
|
|
3575
|
+
passive: true
|
|
3576
|
+
});
|
|
3577
|
+
window.addEventListener("resize", updatePosition);
|
|
3578
|
+
return () => {
|
|
3579
|
+
window.removeEventListener("scroll", updatePosition, {
|
|
3580
|
+
capture: true
|
|
3581
|
+
});
|
|
3582
|
+
window.removeEventListener("resize", updatePosition);
|
|
3583
|
+
};
|
|
3584
|
+
}
|
|
3585
|
+
}, [isOpen, usePortal, updatePosition]);
|
|
3569
3586
|
const handleToggle = () => {
|
|
3570
3587
|
if (!disabled) {
|
|
3571
3588
|
setIsOpen(!isOpen);
|
|
@@ -3579,7 +3596,9 @@ function SingleSelectDropdown({
|
|
|
3579
3596
|
position: "absolute",
|
|
3580
3597
|
top: `${dropdownPosition.top + 4}px`,
|
|
3581
3598
|
left: `${dropdownPosition.left}px`,
|
|
3582
|
-
width: `${dropdownPosition.width}px
|
|
3599
|
+
width: `${dropdownPosition.width}px`,
|
|
3600
|
+
// Add a zIndex to ensure it floats above other content
|
|
3601
|
+
zIndex: 9999
|
|
3583
3602
|
} : {
|
|
3584
3603
|
position: "absolute",
|
|
3585
3604
|
top: "100%",
|
|
@@ -3589,93 +3608,102 @@ function SingleSelectDropdown({
|
|
|
3589
3608
|
zIndex: 99
|
|
3590
3609
|
},
|
|
3591
3610
|
className: "rounded-md bg-white shadow-lg z-50",
|
|
3592
|
-
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3593
|
-
|
|
3594
|
-
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
autoFocus: true,
|
|
3599
|
-
className: tailwindMerge.twMerge(
|
|
3600
|
-
"input-placeholder-ellipsis w-full pr-[30px] h-[40px] px-2 py-1 rounded-md border border-gray-300 text-sm focus:border-1 focus:border-[#4683B4] focus:outline-none",
|
|
3601
|
-
searchInputClass
|
|
3602
|
-
),
|
|
3603
|
-
value: searchTerm,
|
|
3604
|
-
onChange: (e) => handleSearchChange(e.target.value)
|
|
3605
|
-
}
|
|
3611
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3612
|
+
"div",
|
|
3613
|
+
{
|
|
3614
|
+
className: tailwindMerge.twMerge(
|
|
3615
|
+
"p-2 shadow-md border rounded-md max-h-[410px] flex flex-col",
|
|
3616
|
+
displayContainerClass
|
|
3606
3617
|
),
|
|
3607
|
-
|
|
3608
|
-
"
|
|
3609
|
-
|
|
3610
|
-
|
|
3611
|
-
|
|
3612
|
-
|
|
3618
|
+
children: [
|
|
3619
|
+
searchable && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
3620
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3621
|
+
"input",
|
|
3622
|
+
{
|
|
3623
|
+
type: "text",
|
|
3624
|
+
autoFocus: true,
|
|
3625
|
+
className: tailwindMerge.twMerge(
|
|
3626
|
+
"input-placeholder-ellipsis w-full pr-[30px] h-[40px] px-2 py-1 rounded-md border border-gray-300 text-sm focus:border-1 focus:border-[#4683B4] focus:outline-none",
|
|
3627
|
+
searchInputClass
|
|
3628
|
+
),
|
|
3629
|
+
value: searchTerm,
|
|
3630
|
+
onChange: (e) => handleSearchChange(e.target.value)
|
|
3631
|
+
}
|
|
3613
3632
|
),
|
|
3614
|
-
|
|
3615
|
-
|
|
3616
|
-
|
|
3617
|
-
|
|
3618
|
-
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3633
|
+
!searchTerm && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3634
|
+
"span",
|
|
3635
|
+
{
|
|
3636
|
+
className: tailwindMerge.twMerge(
|
|
3637
|
+
"absolute left-2 top-1/2 transform -translate-y-1/2 text-[12px] text-gray-400 overflow-hidden whitespace-nowrap text-ellipsis pointer-events-none w-[90%]",
|
|
3638
|
+
placeholderSearchClass
|
|
3639
|
+
),
|
|
3640
|
+
children: searchPlaceholder
|
|
3641
|
+
}
|
|
3623
3642
|
),
|
|
3624
|
-
|
|
3625
|
-
"
|
|
3643
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3644
|
+
"div",
|
|
3626
3645
|
{
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
|
|
3631
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
3646
|
+
className: tailwindMerge.twMerge(
|
|
3647
|
+
"absolute right-2 top-1/2 transform -translate-y-1/2 pointer-events-none",
|
|
3648
|
+
hasSearchIcon ? "block" : "hidden"
|
|
3649
|
+
),
|
|
3632
3650
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3633
|
-
"
|
|
3651
|
+
"svg",
|
|
3634
3652
|
{
|
|
3635
|
-
|
|
3636
|
-
|
|
3653
|
+
width: "16",
|
|
3654
|
+
height: "16",
|
|
3655
|
+
viewBox: "0 0 16 16",
|
|
3656
|
+
fill: "none",
|
|
3657
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
3658
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3659
|
+
"path",
|
|
3660
|
+
{
|
|
3661
|
+
d: "M10.9167 9.66667H10.2583L10.025 9.44167C10.8417 8.49167 11.3333 7.25833 11.3333 5.91667C11.3333 2.925 8.90833 0.5 5.91667 0.5C2.925 0.5 0.5 2.925 0.5 5.91667C0.5 8.90833 2.925 11.3333 5.91667 11.3333C7.25833 11.3333 8.49167 10.8417 9.44167 10.025L9.66667 10.2583V10.9167L13.8333 15.075L15.075 13.8333L10.9167 9.66667ZM5.91667 9.66667C3.84167 9.66667 2.16667 7.99167 2.16667 5.91667C2.16667 3.84167 3.84167 2.16667 5.91667 2.16667C7.99167 2.16667 9.66667 3.84167 9.66667 5.91667C9.66667 7.99167 7.99167 9.66667 5.91667 9.66667Z",
|
|
3662
|
+
fill: "#757575"
|
|
3663
|
+
}
|
|
3664
|
+
)
|
|
3637
3665
|
}
|
|
3638
3666
|
)
|
|
3639
3667
|
}
|
|
3640
3668
|
)
|
|
3641
|
-
}
|
|
3642
|
-
|
|
3643
|
-
|
|
3644
|
-
|
|
3645
|
-
|
|
3646
|
-
|
|
3647
|
-
|
|
3648
|
-
|
|
3649
|
-
|
|
3650
|
-
|
|
3651
|
-
|
|
3652
|
-
|
|
3653
|
-
|
|
3654
|
-
|
|
3655
|
-
|
|
3656
|
-
|
|
3657
|
-
|
|
3658
|
-
|
|
3659
|
-
|
|
3660
|
-
|
|
3661
|
-
|
|
3662
|
-
|
|
3663
|
-
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
|
|
3667
|
-
|
|
3668
|
-
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
|
|
3673
|
-
|
|
3674
|
-
|
|
3675
|
-
|
|
3676
|
-
|
|
3677
|
-
|
|
3678
|
-
|
|
3669
|
+
] }),
|
|
3670
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3671
|
+
"div",
|
|
3672
|
+
{
|
|
3673
|
+
ref: listRef,
|
|
3674
|
+
onScroll: handleScroll,
|
|
3675
|
+
onMouseEnter: () => setHoveredId("hovered"),
|
|
3676
|
+
onMouseLeave: () => setHoveredId(null),
|
|
3677
|
+
className: tailwindMerge.twMerge(
|
|
3678
|
+
`overflow-auto max-h-80 overscroll-contain ${searchable ? "mt-2" : ""}`,
|
|
3679
|
+
displayMainClass
|
|
3680
|
+
),
|
|
3681
|
+
children: [
|
|
3682
|
+
displayOptions.length > 0 ? displayOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3683
|
+
"div",
|
|
3684
|
+
{
|
|
3685
|
+
className: tailwindMerge.twMerge(
|
|
3686
|
+
`h-[40px] px-2 py-2 my-1 text-sm cursor-pointer select-none rounded-md hover:bg-gray-100 ${opt.id === value ? "bg-[#ECF3F7] text-[#131414] font-semibold" : "text-[#131414]"}`,
|
|
3687
|
+
displayItemClass
|
|
3688
|
+
),
|
|
3689
|
+
onClick: () => {
|
|
3690
|
+
onChange(opt.id);
|
|
3691
|
+
setIsOpen(false);
|
|
3692
|
+
},
|
|
3693
|
+
children: opt.name
|
|
3694
|
+
},
|
|
3695
|
+
opt.id
|
|
3696
|
+
)) : getEmptyStateContent(),
|
|
3697
|
+
isLoading && hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center px-2 pb-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500", children: [
|
|
3698
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400 mr-2" }),
|
|
3699
|
+
loadingMessage
|
|
3700
|
+
] }) })
|
|
3701
|
+
]
|
|
3702
|
+
}
|
|
3703
|
+
)
|
|
3704
|
+
]
|
|
3705
|
+
}
|
|
3706
|
+
)
|
|
3679
3707
|
}
|
|
3680
3708
|
);
|
|
3681
3709
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
@@ -4949,7 +4977,7 @@ var DynamicTableV2 = ({
|
|
|
4949
4977
|
"div",
|
|
4950
4978
|
{
|
|
4951
4979
|
className: tailwindMerge.twMerge(
|
|
4952
|
-
`flex w-full h-full bg-white bg-gray-50 border-l border-r border-b rounded-bl-[8px] rounded-br-[8px] pt-0 pl-0 pr-0 border-[#C6D0F7] overflow-x-auto
|
|
4980
|
+
`flex w-full h-full bg-white bg-gray-50 border-l border-r border-b rounded-bl-[8px] rounded-br-[8px] pt-0 pl-0 pr-0 border-[#C6D0F7] overflow-x-auto ${isSimpleMode && "overflow-hidden"}`,
|
|
4953
4981
|
tableClass
|
|
4954
4982
|
),
|
|
4955
4983
|
children: [
|
|
@@ -4966,7 +4994,7 @@ var DynamicTableV2 = ({
|
|
|
4966
4994
|
"div",
|
|
4967
4995
|
{
|
|
4968
4996
|
className: tailwindMerge.twMerge(
|
|
4969
|
-
"flex-grow overflow-
|
|
4997
|
+
"flex-grow overflow-y-auto",
|
|
4970
4998
|
tableSubInnerDivClass
|
|
4971
4999
|
),
|
|
4972
5000
|
children: [
|