bianic-ui 2.5.1-beta.1 → 2.6.0-beta.1

package/README.md

@@ -1,49 +1,49 @@
-# Bianic 2.0
-
-DLS designed by BIAENERGI
-
-## Installation
-
-### First Installation
-
-`npm i bianic-ui`
-
-## Usage
-
-After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
-
-## Support
-
-If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## Contributing
-
-If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
-
-## Change Log
-
-Coming soon
-
-## Development Notes
-
-### Code Convention
-
-- Always separate style with tsx
-- For style config always try to be object with one level
-- Separate config file and component file for more readable code
-- The variable name of style config must be describe what you styling not describe the parameters (or key)
-- Use .tsx only when defining component, just us .ts if no component defined on the file
-- Don't import simulation or any demo to index.ts
-- Update storybook for every change or new component
-
-### Component attribute naming
-
-- Check on html documentation. Always try to use the exisiting html atribute name.
-- If there the attibute not listed on html documentation. You can make it on your own with rules :
-  - Use "is" prefix for boolean
-  - Use "on" prefix for event listener
-
-### Another Notes
-
-- Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.
-- Just discuss any concept you had. **Discuss first, Implement later**.
+# Bianic 2.0
+
+DLS designed by BIAENERGI
+
+## Installation
+
+### First Installation
+
+`npm i bianic-ui`
+
+## Usage
+
+After Bianic-Ui succesfully installed, you can call the component using JSX tag declaration style ex: `<Alert />`. Futher documentation about component can be access [here](https://ristek.link/bianic-dev-docs)
+
+## Support
+
+If you found any bug, please contact at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## Contributing
+
+If you're interested in contributing to Bianic-Ui, please contact our team at [devbiaenergi@gmail.com](mailto:devbiaenergi@gmail.com)
+
+## Change Log
+
+Coming soon
+
+## Development Notes
+
+### Code Convention
+
+- Always separate style with tsx
+- For style config always try to be object with one level
+- Separate config file and component file for more readable code
+- The variable name of style config must be describe what you styling not describe the parameters (or key)
+- Use .tsx only when defining component, just us .ts if no component defined on the file
+- Don't import simulation or any demo to index.ts
+- Update storybook for every change or new component
+
+### Component attribute naming
+
+- Check on html documentation. Always try to use the exisiting html atribute name.
+- If there the attibute not listed on html documentation. You can make it on your own with rules :
+  - Use "is" prefix for boolean
+  - Use "on" prefix for event listener
+
+### Another Notes
+
+- Please assign class `...-primary-black` when need black color. If not assigned system will use #000000 black.
+- Just discuss any concept you had. **Discuss first, Implement later**.

package/dist/cjs/index.js

@@ -583,7 +583,8 @@ var AvatarConfig = {
 };
 
 function Avatar(_a) {
-    var _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, _c = _a.name, name = _c === void 0 ? 'Test' : _c;
+    var _b, _c, _d, _e;
+    var _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.variant, variant = _g === void 0 ? 'initial' : _g, _h = _a.name, name = _h === void 0 ? 'Test' : _h, className = _a.className;
     var getInitials = function (initial) {
         if (!initial)
             return '';
@@ -593,17 +594,19 @@ function Avatar(_a) {
             .join('');
         return initials.slice(0, 2).toUpperCase();
     };
+    var usedSize = size in AvatarConfig ? size : 'md';
+    var usedVariant = variant in ['image', 'picture', 'initial'] ? variant : 'initial';
     var avatarResult = null;
-    switch (variant) {
+    switch (usedVariant) {
         case 'picture':
-            avatarResult = (React.createElement("img", { src: "https://img.freepik.com/free-psd/girl-avatar-emoji-3d-icon_23-2150579870.jpg", alt: "avatar", className: "".concat(AvatarConfig[size].picture) }));
+            avatarResult = (React.createElement("img", { src: "https://img.freepik.com/free-psd/girl-avatar-emoji-3d-icon_23-2150579870.jpg", alt: "avatar", className: "".concat((_b = AvatarConfig[usedSize]) === null || _b === void 0 ? void 0 : _b.picture, " ").concat(className) }));
             break;
         case 'initial':
-            avatarResult = (React.createElement("div", { className: "".concat(AvatarConfig[size].picture, " flex items-center justify-center bg-bia-sky") },
-                React.createElement("div", { className: "".concat(AvatarConfig[size]['no picture']) }, getInitials(name))));
+            avatarResult = (React.createElement("div", { className: "".concat((_c = AvatarConfig[usedSize]) === null || _c === void 0 ? void 0 : _c.picture, " flex items-center justify-center bg-bia-sky ").concat(className) },
+                React.createElement("div", { className: "".concat((_d = AvatarConfig[usedSize]) === null || _d === void 0 ? void 0 : _d['no picture']) }, getInitials(name))));
             break;
         case 'image':
-            avatarResult = (React.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", className: "".concat(AvatarConfig[size].picture, " flex items-center justify-center") },
+            avatarResult = (React.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", className: "".concat((_e = AvatarConfig[usedSize]) === null || _e === void 0 ? void 0 : _e.picture, " flex items-center justify-center ").concat(className) },
                 React.createElement("rect", { width: "160", height: "160", fill: "url(#pattern0_9212_4625)" }),
                 React.createElement("defs", null,
                     React.createElement("pattern", { id: "pattern0_9212_4625", patternContentUnits: "objectBoundingBox", width: "1", height: "1" },
@@ -615,6 +618,7 @@ function Avatar(_a) {
 }
 Avatar.defaultProps = {
     name: '',
+    variant: 'initial',
     size: 'md',
 };
 
@@ -1532,7 +1536,7 @@ var colorConfig$2 = {
 var ButtonApp = function (_a) {
     _a.icon; _a.isNotified; var _c = _a.isActive, isActive = _c === void 0 ? false : _c, disabled = _a.disabled, _d = _a.color, color = _d === void 0 ? 'green' : _d, label = _a.label, extended = _a.extended, rest = __rest(_a, ["icon", "isNotified", "isActive", "disabled", "color", "label", "extended"]);
     var buttonState = isActive ? 'active' : 'default';
-    return (React.createElement("button", __assign({ className: "button-app flex items-center justify-center px-[10px] pb-[8.3px] pt-[8.5px] font-arial text-size-tiny ".concat(colorConfig$2[color][buttonState], " ").concat(extended), type: "button", disabled: disabled }, rest), label));
+    return (React.createElement("button", __assign({ className: "button-app flex max-h-[30px] items-center justify-center px-[10px] pb-[8.3px] pt-[8.5px] font-arial text-size-tiny ".concat(colorConfig$2[color][buttonState], " ").concat(extended), type: "button", disabled: disabled }, rest), label));
 };
 
 var textColorConfig = {
@@ -1953,9 +1957,6 @@ var getDropdownStyle = function (anchorRef, popupRef) {
     return style;
 };
 var usePopupPosition = function (anchorRef, popupRef, position) {
-    // In projects where bianic-ui is installed,
-    // there is a delay in rendering styles,
-    // which causes popups to lose their position and need to be re-rendered.
     if (!anchorRef || !popupRef) {
         return [{}, function () { }];
     }
@@ -1968,18 +1969,23 @@ var usePopupPosition = function (anchorRef, popupRef, position) {
         setPositionStyle(newStyle);
     };
     React.useLayoutEffect(function () {
-        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current))
+        if (!(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current) || !(popupRef === null || popupRef === void 0 ? void 0 : popupRef.current))
             return;
         calcPosition();
-        window.addEventListener('scroll', calcPosition);
+        var resizeObserver = new ResizeObserver(calcPosition);
+        resizeObserver.observe(popupRef.current);
+        window.addEventListener('scroll', calcPosition, true);
         window.addEventListener('resize', calcPosition);
-        setRepeateRender(0);
         return function () {
-            window.removeEventListener('scroll', calcPosition);
+            resizeObserver.disconnect();
+            window.removeEventListener('scroll', calcPosition, true);
             window.removeEventListener('resize', calcPosition);
         };
-    }, [anchorRef]);
+    }, [anchorRef, popupRef]);
     React.useEffect(function () {
+        // In projects where bianic-ui is installed,
+        // there is a delay in rendering styles,
+        // which causes popups to lose their position and need to be re-rendered.
         if (repeateRender < 5 && (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)) {
             calcPosition();
             setRepeateRender(repeateRender + 1);
@@ -3729,8 +3735,8 @@ var Notification = function (props) {
 };
 
 var sizeConfig$2 = {
-    md: 'min-w-[38px] h-[40px] text-[14px] font-semibold',
-    sm: 'min-w-[29px] h-[30px] text-[12px] font-normal',
+    md: 'min-w-[40px] h-[40px] text-[14px] font-semibold',
+    sm: 'min-w-[30px] h-[30px] text-[12px] font-normal',
 };
 var positionConfig = {
     start: 'justify-start',
@@ -3777,15 +3783,11 @@ function PaginationBar(_a) {
         else
             setStartIndex(0);
     };
-    var getStartIndex = function (index) {
-        if (index + PAGE_SIZE > totalPages)
-            return Math.max(0, totalPages - PAGE_SIZE);
-        return index;
-    };
     React.useEffect(function () {
-        var correctedIndex = getStartIndex(startIndex);
-        setShowedPages(totalRange.slice(correctedIndex, correctedIndex + PAGE_SIZE));
-    }, [startIndex, totalRange, totalPages]);
+        var start = Math.max(0, Math.min(startIndex, totalPages - PAGE_SIZE));
+        var newPages = Array.from({ length: totalPages }, function (_, i) { return i + 1; }).slice(start, start + PAGE_SIZE);
+        setShowedPages(newPages);
+    }, [startIndex, totalPages]);
     return (React.createElement("div", { className: "flex ".concat(positionConfig[position], " gap-[5px]") },
         totalPages > 5 && (React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: handlePrevRange, className: showedPages[0] === 1 ? '' : 'cursor-pointer', iconLeft: React.createElement(TbChevronsLeft, { size: iconSize }), disabled: showedPages[0] === 1 })),
         React.createElement(Button, { variant: "subtle", size: size, type: "button", onClick: function () {