pixelize-design-library 1.1.25 → 1.1.27

package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts

@@ -20,7 +20,7 @@ export type ButtonGroupIconProps = {
         label: string;
         id: string | number;
     }[];
-    onDropdownOptionClick?: (option: {
+    onDropdownOptionClick?: (event: React.MouseEvent, option: {
         label: string;
         id: string | number;
     }) => void;

package/dist/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -38,12 +38,13 @@ function ButtonGroupIcon(_a) {
             onRightIconClick();
         }
     };
-    var handleMenuClick = function (option) { return function () {
+    var handleMenuClick = function (event, option) {
         setIsDropdownOpen(false);
+        // console.log("Option clicked:", option,event)
         if (onDropdownOptionClick) {
-            onDropdownOptionClick(option);
+            onDropdownOptionClick(event, option);
         }
-    }; };
+    };
     return (react_1.default.createElement(react_2.ButtonGroup, { size: size, isAttached: true, variant: variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle },
         leftIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Left icon button", icon: leftIcon, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: {
                 backgroundColor: theme.colors.primary[500],
@@ -65,7 +66,7 @@ function ButtonGroupIcon(_a) {
                     },
                 } }),
             react_1.default.createElement(react_2.Portal, null,
-                react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: handleMenuClick(option), style: menuItemStyle }, option.label)); }))))) : rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
+                react_1.default.createElement(react_2.MenuList, { style: menulistStyle }, dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map(function (option, index) { return (react_1.default.createElement(react_2.MenuItem, { key: index, onClick: function (event) { return handleMenuClick(event, option); }, style: menuItemStyle }, option.label)); }))))) : rightIcon && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Right icon button", icon: rightIcon, onClick: onRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: {
                 backgroundColor: theme.colors.primary[500],
                 "&:hover": {
                     backgroundColor: theme.colors.primary[400],

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
 import { SelectSearchProps } from "./SelectSearchProps";
-export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, onOptionMultiSelect, }: Readonly<SelectSearchProps>): React.JSX.Element;
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, dropdownStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, }: Readonly<SelectSearchProps>): React.JSX.Element;

package/dist/Components/SelectSearch/SelectSearch.js

@@ -495,12 +495,12 @@ var react_2 = require("@chakra-ui/react");
 var FormLabel_1 = require("../Common/FormLabel");
 var useCustomTheme_1 = require("../../Theme/useCustomTheme");
 function SelectSearch(_a) {
-    var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c, boxStyle = _a.boxStyle, _d = _a.placeholder, placeholder = _d === void 0 ? "Select Option" : _d, _e = _a.searchQuery, searchQuery = _e === void 0 ? "" : _e, _f = _a.isInformation, isInformation = _f === void 0 ? false : _f, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, isMultipleSelect = _a.isMultipleSelect, onOptionMultiSelect = _a.onOptionMultiSelect;
+    var options = _a.options, _b = _a.initialSelectedOption, initialSelectedOption = _b === void 0 ? null : _b, onOptionSelect = _a.onOptionSelect, inputOnchange = _a.inputOnchange, id = _a.id, name = _a.name, label = _a.label, inputStyle = _a.inputStyle, dropdownStyle = _a.dropdownStyle, isOptionLoading = _a.isOptionLoading, _c = _a.loadingText, loadingText = _c === void 0 ? "loading" : _c, boxStyle = _a.boxStyle, _d = _a.placeholder, placeholder = _d === void 0 ? "Select Option" : _d, _e = _a.searchQuery, searchQuery = _e === void 0 ? "" : _e, _f = _a.isInformation, isInformation = _f === void 0 ? false : _f, informationMessage = _a.informationMessage, rightIcon = _a.rightIcon, rightElementStyle = _a.rightElementStyle, isMultipleSelect = _a.isMultipleSelect, _g = _a.isRequired, isRequired = _g === void 0 ? false : _g, onOptionMultiSelect = _a.onOptionMultiSelect;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
-    var _g = (0, react_1.useState)([]), selectedOptions = _g[0], setSelectedOptions = _g[1];
-    var _h = (0, react_1.useState)(""), inputValue = _h[0], setInputValue = _h[1];
-    var _j = (0, react_1.useState)(false), isOpen = _j[0], setIsOpen = _j[1];
-    var _k = (0, react_1.useState)("below"), position = _k[0], setPosition = _k[1];
+    var _h = (0, react_1.useState)([]), selectedOptions = _h[0], setSelectedOptions = _h[1];
+    var _j = (0, react_1.useState)(""), inputValue = _j[0], setInputValue = _j[1];
+    var _k = (0, react_1.useState)(false), isOpen = _k[0], setIsOpen = _k[1];
+    var _l = (0, react_1.useState)("below"), position = _l[0], setPosition = _l[1];
     var inputRef = (0, react_1.useRef)(null);
     var dropdownRef = (0, react_1.useRef)(null);
     var filteredOptions = (0, react_1.useMemo)(function () {
@@ -597,7 +597,7 @@ function SelectSearch(_a) {
         return (react_1.default.createElement(react_2.Text, { px: 4, py: 2, color: "gray.500" }, "No options found"));
     }, [filteredOptions, isOptionLoading, loadingText, handleOptionClick]);
     return (react_1.default.createElement(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle },
-        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: false, isInformation: isInformation, informationMessage: informationMessage })),
+        label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
         isMultipleSelect && selectedOptions.length > 0 && (react_1.default.createElement(react_2.HStack, { spacing: 2, mb: 2 }, selectedOptions.map(function (option) { return (react_1.default.createElement(react_2.Tag, { size: "md", key: option.id, borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] } },
             react_1.default.createElement(react_2.TagLabel, { width: "50px" }, option.label),
             react_1.default.createElement(react_2.TagCloseButton, { onClick: function () { return handleRemoveOption(option); } }))); }))),

package/dist/Components/SelectSearch/SelectSearchProps.d.ts

@@ -21,6 +21,7 @@ export type SelectSearchProps = {
     rightIcon?: React.ReactNode;
     rightElementStyle?: {};
     isMultipleSelect?: boolean;
+    isRequired?: boolean;
 };
 export type selectOptions = {
     id: string;

package/dist/Pages/button.js

@@ -9,7 +9,14 @@ var fi_1 = require("react-icons/fi");
 var Button_1 = __importDefault(require("../Components/Button/Button"));
 var ButtonPage = function () {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), leftIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid" }),
+        react_1.default.createElement(ButtonGroupIcon_1.default, { buttonText: "hello", rightIcon: react_1.default.createElement(fi_1.FiHome, null), leftIcon: react_1.default.createElement(fi_1.FiHome, null), size: "md", variant: "solid", 
+            // color="red"
+            rightIconDropdown: true, dropdownOptions: [
+                { label: "123", id: "1" },
+                { label: "456", id: "2" }
+            ], onDropdownOptionClick: function (e, option) {
+                console.log(e, option);
+            } }),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),
         react_1.default.createElement("br", null),

package/package.json

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