pixelize-design-library 1.1.38 → 1.1.40

package/dist/Components/DatePicker/DatePicker.js

@@ -32,7 +32,7 @@ function DatePicker(_a) {
                     ? dateTimeFormat
                         ? dateTimeFormat
                         : "MM/dd/yyyy h:mm aa"
-                    : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light, style: { border: error ? "1px solid #DC143C" : "" } }) })),
+                    : dateFormat, showTimeSelect: showTimeSelect, timeFormat: timeFormat, timeIntervals: timeIntervals, timeCaption: timeCaption, id: id, name: name, customInput: react_1.default.createElement(react_2.Input, { size: "sm", bg: theme.colors.backgroundColor.light, style: { border: error ? "2px solid #DC143C" : "" } }) })),
         error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
         helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
 }

package/dist/Components/ProfileCard/ProfileCard.d.ts

@@ -9,4 +9,4 @@ export declare const ProfileCardBody: React.FC<{
 export declare const ProfileCardFooter: React.FC<{
     children: React.ReactNode;
 }>;
-export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;
+export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): React.JSX.Element;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -33,17 +33,19 @@ var ProfileCardFooter = function (_a) {
 };
 exports.ProfileCardFooter = ProfileCardFooter;
 function ProfileCard(_a) {
-    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
+    var maxW = _a.maxW, align = _a.align, variant = _a.variant, direction = _a.direction, justify = _a.justify, children = _a.children, size = _a.size, color = _a.color, overflow = _a.overflow, _b = _a.dividercolor, dividercolor = _b === void 0 ? "#d5cfcf" : _b, _c = _a.dividersize, dividersize = _c === void 0 ? "0.5px" : _c, _d = _a.dividervariant, dividervariant = _d === void 0 ? "solid" : _d, CardStyle = _a.CardStyle, CardHeaderStyle = _a.CardHeaderStyle, borderTopColor = _a.borderTopColor, borderLeftColor = _a.borderLeftColor;
     var isReactElement = function (child) {
         return child !== null && typeof child === "object" && "type" in child;
     };
     var header = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardHeader; });
     var body = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardBody; });
     var footer = react_1.default.Children.toArray(children).find(function (child) { return isReactElement(child) && child.type === exports.ProfileCardFooter; });
-    var StylesWithBorder = borderLeftColor ? __assign(__assign({}, CardStyle), { borderLeft: "2px solid #3182CE" }) : borderTopColor ? __assign(__assign({}, CardStyle), { borderTop: "2px solid #3182CE" }) : __assign({}, CardStyle);
+    var StylesWithBorder = borderLeftColor
+        ? __assign(__assign({}, CardStyle), { borderLeft: "2px solid #3182CE" }) : borderTopColor
+        ? __assign(__assign({}, CardStyle), { borderTop: "2px solid #3182CE" }) : __assign({}, CardStyle);
     return (react_1.default.createElement(react_2.Card, { maxW: maxW, align: align, variant: variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder },
         header && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_2.CardHeader, { style: { fontWeight: "bold" } }, header),
+            react_1.default.createElement(react_2.CardHeader, { sx: __assign(__assign({}, CardHeaderStyle), { fontWeight: "bold" }) }, header),
             react_1.default.createElement(react_2.Divider, { style: {
                     borderColor: dividercolor,
                     borderWidth: dividersize,

package/dist/Components/ProfileCard/ProfileCardProps.d.ts

@@ -9,6 +9,7 @@ export type ProfileCardProps = Pick<CardProps, "direction" | "maxW" | "align" |
     dividersize?: string;
     dividervariant?: "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "inset" | "outset";
     CardStyle?: React.CSSProperties;
+    CardHeaderStyle?: React.CSSProperties;
     borderTopColor?: boolean;
     borderLeftColor?: boolean;
 };

package/dist/Components/SelectSearch/SelectSearch.js

@@ -324,9 +324,6 @@ function SelectSearch(_a) {
     var filteredOptions = (0, react_1.useMemo)(function () {
         return options.filter(function (option) { var _a, _b; return (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes((_b = (inputValue !== null && inputValue !== void 0 ? inputValue : "")) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
     }, [options, inputValue]);
-    (0, react_1.useEffect)(function () {
-        setInputValue(searchQuery);
-    }, [searchQuery]);
     //   const handleOptionClick = useCallback(
     //     (option: selectOptions) => {
     //       if (isMultipleSelect) {

package/dist/Components/SideBar/SideBar.js

@@ -38,7 +38,7 @@ function Sidebar(_a) {
             return (react_1.default.createElement(react_2.Menu, { key: menu.title, placement: "right" },
                 react_1.default.createElement(react_2.Link, { backgroundColor: activeMenu === menu.title && !toggle
                         ? theme.colors.primary[500]
-                        : "none", 
+                        : "none", paddingLeft: toggle ? "" : "20px", 
                     // borderRadius={8}
                     _hover: {
                         textDecor: "none",
@@ -58,15 +58,15 @@ function Sidebar(_a) {
                     menu.subMenu.map(function (subMenuItem) { return (react_1.default.createElement(react_2.MenuItem, { key: subMenuItem.title }, subMenuItem.title)); })))));
         })));
     }, [activeMenu, menus, handleMenuClick, toggle, theme.colors]);
-    return (react_1.default.createElement(react_2.Flex, { pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
+    return (react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", pos: "sticky", h: "100vh", boxShadow: theme.shadows.lg, w: toggle ? "75px" : "200px", flexDir: "column", justifyContent: "space-between", background: theme.colors.backgroundColor.light },
         react_1.default.createElement(react_2.Flex, { flexDir: "column", w: "100%", alignItems: "center", as: "nav", h: "100vh" },
             logo ? (react_1.default.createElement(react_2.Flex, { mt: 5, alignItems: "center", gap: 5 },
                 react_1.default.createElement(react_2.Image, { borderRadius: "full", boxSize: "45px", src: logo, alt: "Company Logo" }),
                 react_1.default.createElement(react_2.Text, { display: toggle ? "none" : "flex", fontSize: 20, fontWeight: 800 }, companyName))) : (react_1.default.createElement(react_2.Box, { ml: "-8px", mt: 5, width: "100%", display: "flex", justifyContent: "center", alignItems: "center" },
                 react_1.default.createElement(react_2.Text, { fontWeight: 800, fontSize: "1.3rem", textAlign: "center" }, toggle ? companyName[0] : companyName))),
-            react_1.default.createElement(react_2.Flex, { position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
+            react_1.default.createElement(react_2.Flex, { transition: "all 0.5s", position: "absolute", left: toggle ? "55px" : "180px", top: "60px", background: theme.colors.primary[500], borderRadius: "23px" },
                 react_1.default.createElement(react_2.IconButton, { background: "none", icon: toggle ? (react_1.default.createElement(fi_1.FiChevronRight, { color: (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.white })) : (react_1.default.createElement(fi_1.FiChevronLeft, { color: (_c = theme.colors) === null || _c === void 0 ? void 0 : _c.white })), _hover: { background: "none" }, onClick: changeToggle, "aria-label": "Toggle Navigation" })),
-            react_1.default.createElement(react_2.Flex, { mt: 35, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
+            react_1.default.createElement(react_2.Flex, { mt: 50, flexDir: "column", w: "100%", alignItems: toggle ? "center" : "flex-start", h: "100vh", overflow: "auto", css: Sidebar_1.FlexCss },
                 react_1.default.createElement(RenderMenuItems, null)))));
 }
 exports.default = Sidebar;

package/dist/Components/Table/Components/Pagination.d.ts

@@ -7,7 +7,7 @@ type PaginationProps = Pick<TableProps, "isVisiblity" | "columns"> & {
     rowsPerPage: number;
     currentPage: number;
     pages: number;
-    handleColumnVisibilityChange: (header: string) => void;
+    handleColumnVisibilityChange: (header: string | number) => void;
     setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
     dataLength: number;
 };

package/dist/Components/Table/Components/TableBody.js

@@ -43,7 +43,7 @@ var TableBody = function (_a) {
                     ? (0, table_1.calculateLeftOffset)(columnWidths, headerIndex) +
                         (isCheckbox ? 50 : 0)
                     : 0;
-                return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { key: headerIndex + 1, onClick: function () {
+                return (visibleColumns[header.label] && (react_2.default.createElement(react_1.Td, { maxWidth: 500, minWidth: 120, key: headerIndex + 1, onClick: function () {
                         return !header.node
                             ? handleRowClick(row, {
                                 label: header.label,
@@ -56,7 +56,8 @@ var TableBody = function (_a) {
                             ? theme.colors.backgroundColor.light
                             : "white", textOverflow: "ellipsis", border: noBorders
                         ? "none"
-                        : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined }, header.node ? header.node(row) : row[header.id])));
+                        : "1px solid ".concat((_a = theme.colors) === null || _a === void 0 ? void 0 : _a.gray[isFrozen ? 300 : 200]), className: "columns ".concat(isFrozen ? "sticky-columns" : "scrollable-columns"), boxSizing: "border-box", color: isFrozen ? freezedTextColor : undefined },
+                    react_2.default.createElement(react_1.Box, { textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", overflow: "hidden" }, header.node ? header.node(row) : row[header.id]))));
             })));
     })));
 };

package/dist/Components/Table/TableProps.d.ts

@@ -16,14 +16,14 @@ export type TableProps = {
     noBorders?: boolean;
     onSelection?: (selected: (string | number)[]) => void;
     isPagintaion?: boolean;
-    onRowClick?: (row: DataObject, header: Record<string, string>) => void;
+    onRowClick?: (row: DataObject, header: Record<string | number, string | number>) => void;
 };
 export type DataObject = {
     [key: string]: string | number;
 };
 export type TableHeaderProps = {
-    label: string;
-    id: string;
+    label: string | number;
+    id: string | number;
     isSort?: boolean;
     isSearch?: boolean;
     isFreeze?: boolean;
@@ -34,12 +34,12 @@ export type ExportOption = {
     id: string;
 };
 export type ColumnSortingProps = {
-    column: string;
+    column: string | number;
     direction: "asc" | "desc" | "none";
 };
 export type TableHeaderPageProps = Pick<TableProps, "columns" | "isCheckbox" | "headerBgColor" | "headerTextColor" | "freezedBgColor" | "freezedTextColor" | "noBorders" | "isLoading"> & {
     visibleColumns: Record<string, boolean>;
-    handleSort: (label: string, type: "asc" | "desc" | "none") => void;
+    handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
     activeHeader?: string | null;
     isPopoverOpen?: boolean;
     closePopover?: () => void;

package/dist/Pages/datePick.d.ts

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

package/dist/Utils/table.d.ts

@@ -1,7 +1,7 @@
 import { KaTableProps } from "../Components/KaTable/KaTableProps";
 import { DataObject } from "../Components/Table/TableProps";
 export declare function SortMultiColumnData(data: Record<string, string | number>[], sortConfig: {
-    column: string;
+    column: string | number;
     direction: string;
 }[]): Record<string, string | number>[];
 export declare const getPreviousColumnWidth: (columns: KaTableProps["columns"], key: string) => any;

package/package.json

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