bianic-ui 1.9.2-alpha.2 → 1.9.3
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/cjs/index.js
CHANGED
|
@@ -2210,9 +2210,9 @@ var DropdownContainer = React.forwardRef(function DropdownContainer(propsComp, r
|
|
|
2210
2210
|
onClose();
|
|
2211
2211
|
};
|
|
2212
2212
|
return (open && (React.createElement(React.Fragment, null,
|
|
2213
|
-
isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen
|
|
2213
|
+
isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen", style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
|
|
2214
2214
|
React.createElement("div", __assign({ style: {
|
|
2215
|
-
zIndex: zIndex,
|
|
2215
|
+
zIndex: zIndex + 10, // Ensure dropdown is above overlay
|
|
2216
2216
|
}, ref: ref, className: "bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass) }, restProps), React.Children.map(children, function (child) {
|
|
2217
2217
|
return React.isValidElement(child)
|
|
2218
2218
|
? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
|
|
@@ -2220,7 +2220,7 @@ var DropdownContainer = React.forwardRef(function DropdownContainer(propsComp, r
|
|
|
2220
2220
|
onClose: function () { return onClose(); },
|
|
2221
2221
|
size: size,
|
|
2222
2222
|
onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
|
|
2223
|
-
zIndex: zIndex,
|
|
2223
|
+
zIndex: zIndex + 10,
|
|
2224
2224
|
})
|
|
2225
2225
|
: child;
|
|
2226
2226
|
})))));
|
|
@@ -2256,13 +2256,13 @@ function DropdownItem(_a) {
|
|
|
2256
2256
|
var currentZIndex = zIndex + 10;
|
|
2257
2257
|
return (React.createElement("div", { className: "bianic-dropdown-item group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
|
|
2258
2258
|
React.createElement("button", __assign({ className: "relative flex h-full w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: {
|
|
2259
|
-
zIndex: isHovered ? currentZIndex :
|
|
2259
|
+
zIndex: isHovered ? currentZIndex : currentZIndex + 15,
|
|
2260
2260
|
}, onClick: function (e) {
|
|
2261
2261
|
onClickItem(e, value);
|
|
2262
2262
|
}, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
|
|
2263
2263
|
content,
|
|
2264
2264
|
React.createElement("div", { className: "ml-auto flex items-center" }, children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey", size: chevronSize })))),
|
|
2265
|
-
children && (React.createElement(DropdownContainer, { className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex }, children))));
|
|
2265
|
+
children && (React.createElement(DropdownContainer, { className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex + 10 }, children))));
|
|
2266
2266
|
}
|
|
2267
2267
|
DropdownItem.defaultProps = {
|
|
2268
2268
|
className: '',
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface DropdownProps {
|
|
3
|
+
zIndex: number;
|
|
4
|
+
onClose?: () => void;
|
|
5
|
+
}
|
|
6
|
+
interface DropdownContextType {
|
|
7
|
+
props: DropdownProps;
|
|
8
|
+
setProps: React.Dispatch<React.SetStateAction<DropdownProps>>;
|
|
9
|
+
}
|
|
10
|
+
export declare function DropdownProvider({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
|
|
11
|
+
export declare function useDrodown(): DropdownContextType;
|
|
12
|
+
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -2208,9 +2208,9 @@ var DropdownContainer = forwardRef(function DropdownContainer(propsComp, ref) {
|
|
|
2208
2208
|
onClose();
|
|
2209
2209
|
};
|
|
2210
2210
|
return (open && (React.createElement(React.Fragment, null,
|
|
2211
|
-
isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen
|
|
2211
|
+
isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen", style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
|
|
2212
2212
|
React.createElement("div", __assign({ style: {
|
|
2213
|
-
zIndex: zIndex,
|
|
2213
|
+
zIndex: zIndex + 10, // Ensure dropdown is above overlay
|
|
2214
2214
|
}, ref: ref, className: "bianic-dropdown-container bg-bia-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] ".concat(containerClass) }, restProps), Children.map(children, function (child) {
|
|
2215
2215
|
return React.isValidElement(child)
|
|
2216
2216
|
? // Kirimkan handleItemClick sebagai props onClick ke setiap DropdownItem
|
|
@@ -2218,7 +2218,7 @@ var DropdownContainer = forwardRef(function DropdownContainer(propsComp, ref) {
|
|
|
2218
2218
|
onClose: function () { return onClose(); },
|
|
2219
2219
|
size: size,
|
|
2220
2220
|
onClickItem: function (e, val) { return handleClickDrpdownItem(e, val); },
|
|
2221
|
-
zIndex: zIndex,
|
|
2221
|
+
zIndex: zIndex + 10,
|
|
2222
2222
|
})
|
|
2223
2223
|
: child;
|
|
2224
2224
|
})))));
|
|
@@ -2254,13 +2254,13 @@ function DropdownItem(_a) {
|
|
|
2254
2254
|
var currentZIndex = zIndex + 10;
|
|
2255
2255
|
return (React.createElement("div", { className: "bianic-dropdown-item group/main relative cursor-pointer first:rounded-t-radius-sm first:pt-[6px] last:rounded-b-radius-sm last:pb-[6px]", onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } },
|
|
2256
2256
|
React.createElement("button", __assign({ className: "relative flex h-full w-full !min-w-fit items-center justify-start whitespace-nowrap px-[15px] py-[5px] text-left text-bia-black disabled:cursor-not-allowed disabled:text-bia-coolgrey-light-50 hover:[&:not(:disabled)]:bg-bia-blue-pastel ".concat(itemClass), style: {
|
|
2257
|
-
zIndex: isHovered ? currentZIndex :
|
|
2257
|
+
zIndex: isHovered ? currentZIndex : currentZIndex + 15,
|
|
2258
2258
|
}, onClick: function (e) {
|
|
2259
2259
|
onClickItem(e, value);
|
|
2260
2260
|
}, onKeyDown: function () { }, disabled: disabled, type: "button" }, props),
|
|
2261
2261
|
content,
|
|
2262
2262
|
React.createElement("div", { className: "ml-auto flex items-center" }, children && (React.createElement(TbChevronRight, { className: "ml-[10px] text-bia-coolgrey", size: chevronSize })))),
|
|
2263
|
-
children && (React.createElement(DropdownContainer, { className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex }, children))));
|
|
2263
|
+
children && (React.createElement(DropdownContainer, { className: "absolute top-0 bg-primary-white shadow-[0px_3px_20px_0px_rgba(0,0,0,0.20)] group-first/main:top-[6px] ".concat(translateClass), onClose: onClose, open: isHovered, onClickItem: function (e, value) { return onClickItem(e, value); }, size: size, ref: DropdownContRef, zIndex: currentZIndex + 10 }, children))));
|
|
2264
2264
|
}
|
|
2265
2265
|
DropdownItem.defaultProps = {
|
|
2266
2266
|
className: '',
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface DropdownProps {
|
|
3
|
+
zIndex: number;
|
|
4
|
+
onClose?: () => void;
|
|
5
|
+
}
|
|
6
|
+
interface DropdownContextType {
|
|
7
|
+
props: DropdownProps;
|
|
8
|
+
setProps: React.Dispatch<React.SetStateAction<DropdownProps>>;
|
|
9
|
+
}
|
|
10
|
+
export declare function DropdownProvider({ children }: React.PropsWithChildren<{}>): React.JSX.Element;
|
|
11
|
+
export declare function useDrodown(): DropdownContextType;
|
|
12
|
+
export {};
|
package/package.json
CHANGED