bianic-ui 2.2.0-beta.0 → 2.2.0-beta.1

package/dist/cjs/index.js

@@ -1989,15 +1989,15 @@ MenuItem.defaultProps = {
 };
 
 function Tooltip(props) {
-    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b;
+    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b, _c = props.zIndex, zIndex = _c === void 0 ? 150 : _c, className = props.className, style = props.style;
     var timeout;
-    var _c = React.useState(false), active = _c[0], setActive = _c[1];
+    var _d = React.useState(false), active = _d[0], setActive = _d[1];
     var anchorRef = React.useRef(null);
     var tooltipContainerRef = React.useRef(null);
-    var _d = React.useState({
+    var _e = React.useState({
         maxWidth: maxWidth + 'px',
         whiteSpace: 'nowrap',
-    }), tooltipContainerStyle = _d[0], setTooltipContainerStyle = _d[1];
+    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -2041,12 +2041,12 @@ function Tooltip(props) {
     }, [content, maxWidth, scrollWidth, offsetHeight]);
     return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip, ref: anchorRef },
         children,
-        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle }))));
+        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle, zIndex: zIndex, className: className, style: style }))));
 }
 var TooltipItem = function (_a) {
-    var anchorRef = _a.anchorRef, direction = _a.direction, content = _a.content, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle;
+    var anchorRef = _a.anchorRef, className = _a.className, content = _a.content, direction = _a.direction, style = _a.style, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle, zIndex = _a.zIndex;
     var positionStyle = usePopupPosition(anchorRef, tooltipContainerRef, direction)[0];
-    return reactDom.createPortal(React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white", style: __assign(__assign({}, positionStyle), tooltipContainerStyle), ref: tooltipContainerRef }, content), document.body);
+    return reactDom.createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(className), style: __assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), ref: tooltipContainerRef }, content), document.body);
 };
 Tooltip.defaultProps = {
     delay: 400,
@@ -3709,20 +3709,19 @@ var classConfig = {
 };
 
 function Popover(_a) {
-    var children = _a.children, content = _a.content; _a.delay; var _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d; _a.maxWidth;
+    var className = _a.className, children = _a.children, content = _a.content, _b = _a.direction, direction = _b === void 0 ? 'bottom' : _b; _a.maxWidth; var _c = _a.title, title = _c === void 0 ? '' : _c, style = _a.style, zIndex = _a.zIndex;
     var wrapperRef = React.useRef(null);
-    React.useRef(null);
-    var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
+    var _d = useDetectOutsideClick(wrapperRef, false), isOpen = _d[0], setIsOpen = _d[1];
     return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
-        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
+        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction, className: className, style: style, zIndex: zIndex }))));
 }
 var PopoverItem = function (_a) {
-    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction;
+    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction, className = _a.className, style = _a.style, zIndex = _a.zIndex;
     var popoverRef = React.useRef(null);
     var positionStyle = usePopupPosition(anchorRef, popoverRef, direction)[0];
     var _b = classConfig[direction], triangleContainer = _b.triangleContainer, triangleShape = _b.triangleShape;
-    return reactDom.createPortal(React.createElement("div", { ref: popoverRef, style: positionStyle, className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white" },
+    return reactDom.createPortal(React.createElement("div", { ref: popoverRef, style: __assign(__assign(__assign({}, positionStyle), style), { zIndex: zIndex }), className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white ".concat(className) },
         React.createElement("div", { className: "flex flex-col" },
             React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
             React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
@@ -3730,7 +3729,6 @@ var PopoverItem = function (_a) {
             React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
 };
 Popover.defaultProps = {
-    delay: 400,
     direction: 'top',
     title: '',
 };

package/dist/cjs/types/components/Popover/PropInterface.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface PopoverProps {
+    className?: string;
+    children: React.ReactNode;
+    content: string;
+    delay?: number;
+    maxWidth?: string;
+    title?: string;
+    style?: React.CSSProperties;
+    zIndex?: number;
+    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+export interface PopoverItemProps {
+    anchorRef: React.RefObject<HTMLElement>;
+    className?: string;
+    content: string;
+    style?: React.CSSProperties;
+    title: string;
+    zIndex?: number;
+    direction: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}

package/dist/cjs/types/components/Popover/index.d.ts

@@ -1,16 +1,8 @@
 import React from 'react';
-interface PopoverProps {
-    children: React.ReactNode;
-    content: string;
-    delay?: number;
-    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    title?: string;
-    maxWidth?: string;
-}
-declare function Popover({ children, content, delay, direction, title, maxWidth, }: PopoverProps): React.JSX.Element;
+import { PopoverProps } from './PropInterface';
+declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React.JSX.Element;
 declare namespace Popover {
     var defaultProps: {
-        delay: number;
         direction: string;
         title: string;
     };

package/dist/cjs/types/components/Tooltip/PropsInterface.d.ts

@@ -1,16 +1,20 @@
-import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, RefObject } from 'react';
 interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
     children: ReactNode;
     content: ReactNode | string;
     delay?: number;
     maxWidth?: string;
+    zIndex?: number;
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 interface TooltipItemProps {
     anchorRef: RefObject<HTMLDivElement>;
-    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    className?: string;
     content: ReactNode | string;
     tooltipContainerRef: React.RefObject<HTMLDivElement>;
     tooltipContainerStyle: React.CSSProperties;
+    style?: ComponentPropsWithRef<'div'>['style'];
+    zIndex: number;
+    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 export { TooltipProps, TooltipItemProps };

package/dist/esm/index.js

@@ -1987,15 +1987,15 @@ MenuItem.defaultProps = {
 };
 
 function Tooltip(props) {
-    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b;
+    var children = props.children, content = props.content, delay = props.delay, _a = props.direction, direction = _a === void 0 ? 'top' : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? undefined : _b, _c = props.zIndex, zIndex = _c === void 0 ? 150 : _c, className = props.className, style = props.style;
     var timeout;
-    var _c = useState(false), active = _c[0], setActive = _c[1];
+    var _d = useState(false), active = _d[0], setActive = _d[1];
     var anchorRef = useRef(null);
     var tooltipContainerRef = useRef(null);
-    var _d = useState({
+    var _e = useState({
         maxWidth: maxWidth + 'px',
         whiteSpace: 'nowrap',
-    }), tooltipContainerStyle = _d[0], setTooltipContainerStyle = _d[1];
+    }), tooltipContainerStyle = _e[0], setTooltipContainerStyle = _e[1];
     var showTip = function () {
         timeout = setTimeout(function () {
             setActive(true);
@@ -2039,12 +2039,12 @@ function Tooltip(props) {
     }, [content, maxWidth, scrollWidth, offsetHeight]);
     return (React.createElement("div", { className: "tooltip-wrapper relative inline-flex h-fit w-fit flex-col", onMouseEnter: showTip, onMouseLeave: hideTip, ref: anchorRef },
         children,
-        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle }))));
+        active && (React.createElement(TooltipItem, { anchorRef: anchorRef, direction: direction, content: content, tooltipContainerRef: tooltipContainerRef, tooltipContainerStyle: tooltipContainerStyle, zIndex: zIndex, className: className, style: style }))));
 }
 var TooltipItem = function (_a) {
-    var anchorRef = _a.anchorRef, direction = _a.direction, content = _a.content, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle;
+    var anchorRef = _a.anchorRef, className = _a.className, content = _a.content, direction = _a.direction, style = _a.style, tooltipContainerRef = _a.tooltipContainerRef, tooltipContainerStyle = _a.tooltipContainerStyle, zIndex = _a.zIndex;
     var positionStyle = usePopupPosition(anchorRef, tooltipContainerRef, direction)[0];
-    return createPortal(React.createElement("div", { className: "tooltip-container break-word absolute z-50 inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white", style: __assign(__assign({}, positionStyle), tooltipContainerStyle), ref: tooltipContainerRef }, content), document.body);
+    return createPortal(React.createElement("div", { className: "tooltip-container break-word absolute inline-block break-all rounded-[4px] bg-primary-black px-[7px] py-[4px] text-size-sm text-primary-white ".concat(className), style: __assign(__assign(__assign({ zIndex: zIndex }, positionStyle), tooltipContainerStyle), style), ref: tooltipContainerRef }, content), document.body);
 };
 Tooltip.defaultProps = {
     delay: 400,
@@ -3707,20 +3707,19 @@ var classConfig = {
 };
 
 function Popover(_a) {
-    var children = _a.children, content = _a.content; _a.delay; var _c = _a.direction, direction = _c === void 0 ? 'bottom' : _c, _d = _a.title, title = _d === void 0 ? '' : _d; _a.maxWidth;
+    var className = _a.className, children = _a.children, content = _a.content, _b = _a.direction, direction = _b === void 0 ? 'bottom' : _b; _a.maxWidth; var _c = _a.title, title = _c === void 0 ? '' : _c, style = _a.style, zIndex = _a.zIndex;
     var wrapperRef = useRef(null);
-    useRef(null);
-    var _e = useDetectOutsideClick(wrapperRef, false), isOpen = _e[0], setIsOpen = _e[1];
+    var _d = useDetectOutsideClick(wrapperRef, false), isOpen = _d[0], setIsOpen = _d[1];
     return (React.createElement("div", { className: "Bianic-popover-Wrapper relative block h-fit w-fit", role: "button", ref: wrapperRef, onClick: function () { return setIsOpen(true); } },
         children,
-        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction }))));
+        isOpen && (React.createElement(PopoverItem, { title: title, content: content, anchorRef: wrapperRef, direction: direction, className: className, style: style, zIndex: zIndex }))));
 }
 var PopoverItem = function (_a) {
-    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction;
+    var title = _a.title, content = _a.content, anchorRef = _a.anchorRef, direction = _a.direction, className = _a.className, style = _a.style, zIndex = _a.zIndex;
     var popoverRef = useRef(null);
     var positionStyle = usePopupPosition(anchorRef, popoverRef, direction)[0];
     var _b = classConfig[direction], triangleContainer = _b.triangleContainer, triangleShape = _b.triangleShape;
-    return createPortal(React.createElement("div", { ref: popoverRef, style: positionStyle, className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white" },
+    return createPortal(React.createElement("div", { ref: popoverRef, style: __assign(__assign(__assign({}, positionStyle), style), { zIndex: zIndex }), className: "Bianic-popover-Tip text-bia-sm absolute z-50 w-[245px] space-y-[5px] rounded-[4px] bg-primary-black px-[20px] py-[17.5px] text-primary-white ".concat(className) },
         React.createElement("div", { className: "flex flex-col" },
             React.createElement("div", { className: "mb-[5px] font-humnst777 text-[16px] font-bold leading-[19.42px]" }, title),
             React.createElement("div", { className: "break-words font-segoe text-[12px] font-normal" }, content)),
@@ -3728,7 +3727,6 @@ var PopoverItem = function (_a) {
             React.createElement("div", { className: "h-0 w-0 ".concat(triangleShape) }))), document.body);
 };
 Popover.defaultProps = {
-    delay: 400,
     direction: 'top',
     title: '',
 };

package/dist/esm/types/components/Popover/PropInterface.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+export interface PopoverProps {
+    className?: string;
+    children: React.ReactNode;
+    content: string;
+    delay?: number;
+    maxWidth?: string;
+    title?: string;
+    style?: React.CSSProperties;
+    zIndex?: number;
+    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}
+export interface PopoverItemProps {
+    anchorRef: React.RefObject<HTMLElement>;
+    className?: string;
+    content: string;
+    style?: React.CSSProperties;
+    title: string;
+    zIndex?: number;
+    direction: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+}

package/dist/esm/types/components/Popover/index.d.ts

@@ -1,16 +1,8 @@
 import React from 'react';
-interface PopoverProps {
-    children: React.ReactNode;
-    content: string;
-    delay?: number;
-    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    title?: string;
-    maxWidth?: string;
-}
-declare function Popover({ children, content, delay, direction, title, maxWidth, }: PopoverProps): React.JSX.Element;
+import { PopoverProps } from './PropInterface';
+declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React.JSX.Element;
 declare namespace Popover {
     var defaultProps: {
-        delay: number;
         direction: string;
         title: string;
     };

package/dist/esm/types/components/Tooltip/PropsInterface.d.ts

@@ -1,16 +1,20 @@
-import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode, RefObject } from 'react';
 interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
     children: ReactNode;
     content: ReactNode | string;
     delay?: number;
     maxWidth?: string;
+    zIndex?: number;
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 interface TooltipItemProps {
     anchorRef: RefObject<HTMLDivElement>;
-    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    className?: string;
     content: ReactNode | string;
     tooltipContainerRef: React.RefObject<HTMLDivElement>;
     tooltipContainerStyle: React.CSSProperties;
+    style?: ComponentPropsWithRef<'div'>['style'];
+    zIndex: number;
+    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 export { TooltipProps, TooltipItemProps };

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import React$1, { ComponentPropsWithoutRef, ComponentPropsWithRef, ChangeEvent, ReactNode, MouseEvent, HTMLAttributes } from 'react';
 
 interface AccordionsProps extends ComponentPropsWithoutRef<'div'> {
@@ -605,17 +606,20 @@ declare namespace Pills {
 }
 
 interface PopoverProps {
-    children: React$1.ReactNode;
+    className?: string;
+    children: React.ReactNode;
     content: string;
     delay?: number;
-    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    title?: string;
     maxWidth?: string;
+    title?: string;
+    style?: React.CSSProperties;
+    zIndex?: number;
+    direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
-declare function Popover({ children, content, delay, direction, title, maxWidth, }: PopoverProps): React$1.JSX.Element;
+
+declare function Popover({ className, children, content, direction, maxWidth, title, style, zIndex, }: PopoverProps): React$1.JSX.Element;
 declare namespace Popover {
     var defaultProps: {
-        delay: number;
         direction: string;
         title: string;
     };
@@ -739,6 +743,7 @@ interface TooltipProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
     content: ReactNode | string;
     delay?: number;
     maxWidth?: string;
+    zIndex?: number;
     direction?: 'top' | 'right' | 'bottom' | 'left' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
 }
 

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "@biaenergi:registry": "https://gitlab.com/api/v4/projects/50905269/packages/npm/"
   },
-  "version": "2.2.0-beta.0",
+  "version": "2.2.0-beta.1",
   "description": "Design Language System develop by BIAENERGI",
   "scripts": {
     "rollup": "rollup -c",