pixelize-design-library 1.1.42 → 1.1.44

package/dist/Components/Dropdown/DropDown.js

@@ -41,9 +41,9 @@ var framer_motion_1 = require("framer-motion");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 var MotionBox = (0, framer_motion_1.motion)((0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement(react_2.Box, __assign({ ref: ref }, props))); }));
 var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
-    var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle;
+    var dropDownButtonStyle = _a.dropDownButtonStyle, ButtonText = _a.ButtonText, options = _a.options, handleOptionSelect = _a.handleOptionSelect, _b = _a.dropdownType, dropdownType = _b === void 0 ? "button" : _b, text = _a.text, DropdownIcon = _a.DropdownIcon, _c = _a.isVisibleIconShow, isVisibleIconShow = _c === void 0 ? true : _c, buttonProps = _a.buttonProps, headStyle = _a.headStyle, ListStyle = _a.ListStyle, ItemStyle = _a.ItemStyle, LabelStyle = _a.LabelStyle, ImageStyle = _a.ImageStyle, _d = _a.optionsSize, optionsSize = _d === void 0 ? "lg" : _d, _e = _a.divider, divider = _e === void 0 ? false : _e;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _d = (0, react_2.useDisclosure)(), isOpen = _d.isOpen, onToggle = _d.onToggle, onClose = _d.onClose;
+    var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onToggle = _f.onToggle, onClose = _f.onClose;
     var dropdownRef = (0, react_1.useRef)(null);
     var handleListItemClick = function (optionId, optionLabel) {
         onClose();
@@ -74,9 +74,20 @@ var Dropdown = (0, react_1.forwardRef)(function (_a, ref) {
         return dropdownType === "button" ? ButtonToggle : TextToggle;
     };
     var DropdownContentRender = function () {
-        return (react_1.default.createElement(react_2.List, { bg: "white", border: "1px solid", borderColor: "blue.500", shadow: "md", p: 2, mt: 2, minWidth: "200px", style: ListStyle }, options.map(function (option) { return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: 2, _hover: { bg: "gray.100", color: "blue.500" }, display: "flex", alignItems: "center", cursor: "pointer", style: ItemStyle },
-            (option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Icon, { as: option.image, boxSize: "1.5rem", mr: 2, style: ImageStyle })),
-            react_1.default.createElement(react_2.Box, { as: "span", isTruncated: true, style: LabelStyle }, option.label))); })));
+        var _a, _b, _c;
+        return (react_1.default.createElement(react_2.List, { bg: (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light, border: "1px solid ".concat((_c = theme.colors) === null || _c === void 0 ? void 0 : _c.gray[300]), borderRadius: theme.radii.md, shadow: theme.shadows.lg, py: 2, mt: "0.2rem", minWidth: "200px", style: ListStyle }, options.map(function (option) {
+            var _a;
+            return (react_1.default.createElement(react_2.ListItem, { key: option.id, onClick: function () { return handleListItemClick(option.id, option.label); }, p: optionsSize === "sm" ? 1 : 2, px: 2, _hover: {
+                    bg: theme.colors.gray[100],
+                    color: theme.colors.blue[500],
+                }, display: "flex", alignItems: "center", cursor: "pointer", style: ItemStyle, borderBottom: divider ? "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[300]) : undefined, sx: {
+                    "&:last-child": {
+                        borderBottom: "none",
+                    },
+                } },
+                (option === null || option === void 0 ? void 0 : option.image) && (react_1.default.createElement(react_2.Icon, { as: option.image, boxSize: optionsSize === "sm" ? "1.1rem" : "1.5rem", mr: 2, style: ImageStyle })),
+                react_1.default.createElement(react_2.Box, { as: "span", fontSize: optionsSize === "sm" ? "14px" : "16px", isTruncated: true, style: LabelStyle }, option.label)));
+        })));
     };
     return (react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "relative", display: "inline-block" },
         dropDownToggleOption(),

package/dist/Components/Dropdown/DropdownProps.d.ts

@@ -15,6 +15,8 @@ export type DropdownProps = {
     ItemStyle?: React.CSSProperties;
     LabelStyle?: React.CSSProperties;
     ImageStyle?: React.CSSProperties;
+    optionsSize?: "sm" | "md";
+    divider?: boolean;
 };
 type Option = {
     id: string | number;

package/dist/Components/NavigationBar/NavigationBar.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { NavbarProps } from "./NavigationBarProps";
-export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText }: NavbarProps): React.JSX.Element;
+export default function NavBar({ userAvathar, userName, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, }: NavbarProps): React.JSX.Element;

package/dist/Components/NavigationBar/NavigationBar.js

@@ -12,10 +12,10 @@ function NavBar(_a) {
     return (react_1.default.createElement(react_2.Box, { bg: theme.colors.backgroundColor.light, px: 4, boxShadow: theme.shadows.sm },
         react_1.default.createElement(react_2.Flex, { h: 16, alignItems: "center", justifyContent: "space-between" },
             react_1.default.createElement(react_2.Box, null, navigationBarText),
-            react_1.default.createElement(react_2.Flex, { alignItems: "center" },
-                react_1.default.createElement(react_2.Stack, { direction: "row", spacing: 7 },
+            react_1.default.createElement(react_2.Flex, null,
+                react_1.default.createElement(react_2.Stack, { direction: "row", alignItems: "center", spacing: 7 },
                     react_1.default.createElement(react_2.Menu, null,
-                        react_1.default.createElement(react_2.Box, { mt: "0.4rem", cursor: "pointer" }, moreIcon),
+                        react_1.default.createElement(react_2.Box, { cursor: "pointer" }, moreIcon),
                         react_1.default.createElement(react_2.MenuButton, { as: react_2.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0 },
                             react_1.default.createElement(react_2.Avatar, { size: "sm", name: userName, src: userAvathar })),
                         react_1.default.createElement(react_2.MenuList, { alignItems: "center", zIndex: 5 },

package/dist/Pages/dropdown.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 declare const DropdownPage: () => React.JSX.Element;
 export default DropdownPage;

package/dist/Pages/dropdown.js

@@ -15,10 +15,10 @@ var DropdownPage = function () {
         { id: 5, label: "Link(URL)", image: fi_1.FiChevronUp },
     ];
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(DropDown_1.default, { ButtonText: "hello", options: exportOptionss, 
+        react_1.default.createElement(DropDown_1.default, { ButtonText: "hello", optionsSize: "sm", options: exportOptionss, 
             // dropDownButtonStyle={{ color: "red" }}
             DropdownIcon: react_1.default.createElement(fi_1.FiMoreHorizontal, { color: "gray.500" }), dropdownType: "button", handleOptionSelect: function (id, label) {
                 console.log("optionid", id, label);
-            }, buttonProps: { variant: "solid", colorScheme: "red" }, isVisibleIconShow: true })));
+            }, buttonProps: { variant: "solid", colorScheme: "red" }, isVisibleIconShow: true, divider: true })));
 };
 exports.default = DropdownPage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "1.1.42",
+  "version": "1.1.44",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",