pixelize-design-library 2.1.55 → 2.1.57

package/dist/Components/DatePicker/DatePicker.js

@@ -242,7 +242,7 @@ function CustomDatePicker(props) {
                     // date={tempDate ?? new Date()}
                     , { 
                         // date={tempDate ?? new Date()}
-                        date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : new Date()), dateFormat: dateFormat, 
+                        date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, 
                         // onChange={(updatedDate) => {
                         // 👇 Redirect time change if today
                         //   const corrected = disableToday && isSameDay(updatedDate, today)

package/dist/Components/DatePicker/TimePicker.js

@@ -24,9 +24,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var react_2 = require("@chakra-ui/react");
 var TimePicker = function (_a) {
     var date = _a.date, onChange = _a.onChange, dateFormat = _a.dateFormat;
-    //  console.log(date, "dateindatepicker");
     var is12HourFormat = /(hh|h).*a/i.test(dateFormat);
     var _b = (0, react_1.useState)(date.getHours()), hour = _b[0], setHour = _b[1];
     var _c = (0, react_1.useState)(date.getMinutes()), minute = _c[0], setMinute = _c[1];
@@ -48,56 +48,33 @@ var TimePicker = function (_a) {
         var newHour = is12HourFormat
             ? convertTo24Hour(hrInput, meridiem || ampm)
             : hrInput;
-        var safeHour = Math.max(0, Math.min(23, newHour));
-        var safeMinutes = Math.max(0, Math.min(59, min));
-        var newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), safeHour, safeMinutes, 0, 0);
+        var newDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), newHour, min, 0, 0);
         onChange(newDate);
     };
     var handleHourChange = function (e) {
-        var hr = parseInt(e.target.value || "1", 10);
-        if (is12HourFormat) {
-            hr = Math.max(1, Math.min(12, hr));
-            setHour(hr);
-            updateTime(hr, minute, ampm);
-        }
-        else {
-            hr = Math.max(0, Math.min(23, hr));
-            setHour(hr);
-            updateTime(hr, minute);
-        }
+        var hr = parseInt(e.target.value, 10);
+        setHour(hr);
+        updateTime(hr, minute, ampm);
     };
     var handleMinuteChange = function (e) {
-        var min = parseInt(e.target.value || "0", 10);
-        // clamp between 0-59
-        min = Math.max(0, Math.min(59, min));
+        var min = parseInt(e.target.value, 10);
         setMinute(min);
         updateTime(hour, min, ampm);
     };
-    var handleAmpmToggle = function () {
-        var newMeridiem = ampm === "AM" ? "PM" : "AM";
-        var displayHr = hour % 12 === 0 ? 12 : hour % 12;
-        // const newHr = convertTo24Hour(displayHr, newMeridiem);
+    var handleAmpmChange = function (e) {
+        var newMeridiem = e.target.value;
         setAmpm(newMeridiem);
-        setHour(displayHr);
-        updateTime(displayHr, minute, newMeridiem);
+        updateTime(hour, minute, newMeridiem);
     };
     var displayHour = is12HourFormat ? (hour % 12 === 0 ? 12 : hour % 12) : hour;
-    return (react_1.default.createElement("div", { style: {
-            display: "flex",
-            alignItems: "center",
-            gap: "0.5rem",
-            fontSize: "1.25rem",
-            marginTop: "1rem",
-        } },
-        react_1.default.createElement("input", { type: "number", value: displayHour, onChange: handleHourChange, min: is12HourFormat ? 1 : 0, max: is12HourFormat ? 12 : 23, style: { width: "3rem", textAlign: "center" } }),
-        ":",
-        react_1.default.createElement("input", { type: "number", value: minute.toString().padStart(2, "0"), onChange: handleMinuteChange, min: 0, max: 59, style: { width: "3rem", textAlign: "center" } }),
-        is12HourFormat && (react_1.default.createElement("button", { type: "button", onClick: handleAmpmToggle, style: {
-                fontWeight: "bold",
-                padding: "0.25rem 0.5rem",
-                border: "none",
-                background: "transparent",
-                cursor: "pointer",
-            } }, ampm))));
+    return (react_1.default.createElement(react_2.HStack, { spacing: 2, mt: 4 },
+        react_1.default.createElement(react_2.Select, { value: displayHour, onChange: handleHourChange, w: "4rem" }, Array.from({ length: is12HourFormat ? 12 : 24 }, function (_, i) {
+            var value = is12HourFormat ? i + 1 : i;
+            return (react_1.default.createElement("option", { key: value, value: value }, value.toString().padStart(2, "0")));
+        })),
+        react_1.default.createElement(react_2.Select, { value: minute, onChange: handleMinuteChange, w: "4rem" }, Array.from({ length: 60 }, function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, i.toString().padStart(2, "0"))); })),
+        is12HourFormat && (react_1.default.createElement(react_2.Select, { value: ampm, onChange: handleAmpmChange, w: "5rem" },
+            react_1.default.createElement("option", { value: "AM" }, "AM"),
+            react_1.default.createElement("option", { value: "PM" }, "PM")))));
 };
 exports.default = TimePicker;

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

@@ -1,3 +1,3 @@
 import React from "react";
 import { TableProps } from "./TableProps";
-export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, }: TableProps): React.JSX.Element;
+export default function Table({ data, columns, onSelection, isLoading, isCheckbox, headerBgColor, freezedBgColor, headerTextColor, freezedTextColor, tableBorderColor, noBorders, isPagination, onRowClick, selections, isActionFreeze, preferencesUrl, preferencesKey, preferencesName, preferencesPage, authToken, paginationMode, noOfRowsPerPage, totalRecords, onPagination, isTableSettings, headerActions, onGlobalSearch, }: TableProps): React.JSX.Element;

package/dist/Components/Table/Table.js

@@ -42,7 +42,7 @@ var Divider_1 = __importDefault(require("../Divider/Divider"));
 var TableSearch_1 = __importDefault(require("./Components/TableSearch"));
 function Table(_a) {
     var _b, _c, _d, _e, _f, _g;
-    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferencesUrl, preferencesUrl = _m === void 0 ? "" : _m, _o = _a.preferencesKey, preferencesKey = _o === void 0 ? "" : _o, _p = _a.preferencesName, preferencesName = _p === void 0 ? "" : _p, _q = _a.preferencesPage, preferencesPage = _q === void 0 ? "" : _q, _r = _a.authToken, authToken = _r === void 0 ? "" : _r, _s = _a.paginationMode, paginationMode = _s === void 0 ? "client" : _s, _t = _a.noOfRowsPerPage, noOfRowsPerPage = _t === void 0 ? 50 : _t, _u = _a.totalRecords, totalRecords = _u === void 0 ? 0 : _u, onPagination = _a.onPagination, _v = _a.isTableSettings, isTableSettings = _v === void 0 ? false : _v, headerActions = _a.headerActions;
+    var data = _a.data, columns = _a.columns, onSelection = _a.onSelection, isLoading = _a.isLoading, _h = _a.isCheckbox, isCheckbox = _h === void 0 ? false : _h, headerBgColor = _a.headerBgColor, freezedBgColor = _a.freezedBgColor, headerTextColor = _a.headerTextColor, freezedTextColor = _a.freezedTextColor, tableBorderColor = _a.tableBorderColor, _j = _a.noBorders, noBorders = _j === void 0 ? false : _j, _k = _a.isPagination, isPagination = _k === void 0 ? true : _k, onRowClick = _a.onRowClick, selections = _a.selections, _l = _a.isActionFreeze, isActionFreeze = _l === void 0 ? true : _l, _m = _a.preferencesUrl, preferencesUrl = _m === void 0 ? "" : _m, _o = _a.preferencesKey, preferencesKey = _o === void 0 ? "" : _o, _p = _a.preferencesName, preferencesName = _p === void 0 ? "" : _p, _q = _a.preferencesPage, preferencesPage = _q === void 0 ? "" : _q, _r = _a.authToken, authToken = _r === void 0 ? "" : _r, _s = _a.paginationMode, paginationMode = _s === void 0 ? "client" : _s, _t = _a.noOfRowsPerPage, noOfRowsPerPage = _t === void 0 ? 50 : _t, _u = _a.totalRecords, totalRecords = _u === void 0 ? 0 : _u, onPagination = _a.onPagination, _v = _a.isTableSettings, isTableSettings = _v === void 0 ? false : _v, headerActions = _a.headerActions, onGlobalSearch = _a.onGlobalSearch;
     var theme = (0, useCustomTheme_1.useCustomTheme)();
     var _w = (0, react_1.useState)({}), columnsSearch = _w[0], setColumnsSearch = _w[1];
     var isServerPagination = paginationMode === "server";
@@ -81,7 +81,7 @@ function Table(_a) {
         noOfRowsPerPage: noOfRowsPerPage,
         totalRecords: totalRecords,
         isServerPagination: isServerPagination,
-    }), tableData = _y.tableData, isContent = _y.isContent, isLink = _y.isLink, headerRefs = _y.headerRefs, columnWidths = _y.columnWidths, handleSort = _y.handleSort, handleCheckbox = _y.handleCheckbox, filteredData = _y.filteredData, startRow = _y.startRow, endRow = _y.endRow, selection = _y.selection, columnsSort = _y.columnsSort, currentPage = _y.currentPage, pages = _y.pages, rowsPerPage = _y.rowsPerPage, handlePageSizeChange = _y.handlePageSizeChange, setCurrentPage = _y.setCurrentPage, columnsList = _y.columnsList, handleColumnPreferences = _y.handleColumnPreferences, handleGlobalSearch = _y.handleGlobalSearch;
+    }), tableData = _y.tableData, isContent = _y.isContent, isLink = _y.isLink, headerRefs = _y.headerRefs, columnWidths = _y.columnWidths, handleSort = _y.handleSort, handleCheckbox = _y.handleCheckbox, filteredData = _y.filteredData, startRow = _y.startRow, endRow = _y.endRow, selection = _y.selection, columnsSort = _y.columnsSort, currentPage = _y.currentPage, pages = _y.pages, rowsPerPage = _y.rowsPerPage, handlePageSizeChange = _y.handlePageSizeChange, setCurrentPage = _y.setCurrentPage, columnsList = _y.columnsList, handleColumnPreferences = _y.handleColumnPreferences;
     var _filteredData = (0, react_1.useMemo)(function () {
         return (0, table_1.searchAndSortData)(filteredData, columnsSearch);
     }, [columnsSearch, filteredData]);
@@ -93,7 +93,7 @@ function Table(_a) {
     var tablePaginationText = "".concat(startRow + 1, " - ").concat(endRow > tableData.length ? tableData.length : endRow, " of ").concat(isServerPagination ? totalRecords : tableData.length);
     return (react_1.default.createElement(react_2.Box, { bg: (_c = (_b = theme.colors) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c[50], border: "0.063rem solid ".concat((_d = theme.colors.border) === null || _d === void 0 ? void 0 : _d[500]), borderRadius: 3 },
         react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 0, height: 45, gap: 2 },
-            react_1.default.createElement(TableSearch_1.default, { onSearch: handleGlobalSearch }),
+            react_1.default.createElement(TableSearch_1.default, { onSearch: onGlobalSearch }),
             isTableSettings && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(Divider_1.default, null),
                 react_1.default.createElement(TableSettings_1.default, { columns: columnsList, onSave: function (cols) { return handleColumnPreferences(cols); } }))),

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

@@ -30,6 +30,7 @@ export type TableProps = {
     onPagination?: (page: number, noOfRecords: number) => void;
     isTableSettings?: boolean;
     headerActions?: HeaderActionsProps;
+    onGlobalSearch?: (searchVal: string) => void;
 };
 export type HeaderActionsProps = {
     isDelete?: {

package/dist/Pages/datePick.js

@@ -61,7 +61,7 @@ var DatePick = function () {
         react_1.default.createElement("h2", null, "Date "),
         react_1.default.createElement("h2", null, "time "),
         react_1.default.createElement("h2", null, "datetime "),
-        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy hh:mm aa", pickerType: "datetime", width: "300px", error: true, errorMessage: "Invalid date" }),
+        react_1.default.createElement(DatePicker_1.default, { selectedDate: selectedDateTime, onChange: handleDateTimeChange, dateFormat: "dd/MM/yyyy HH:mm", pickerType: "datetime", width: "300px", error: true, errorMessage: "Invalid date" }),
         react_1.default.createElement("br", null),
         react_1.default.createElement("h2", null, "Date Range Picker")));
 };

package/dist/Pages/table.js

@@ -139,6 +139,6 @@ var column = [
 ];
 var TableExample = function () {
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); }, isPagination: false, isTableSettings: true })));
+        react_1.default.createElement(Table_1.default, { columns: column, data: tableData, isCheckbox: true, isVisiblity: false, isLoading: false, noBorders: false, onSelection: function (checked) { return console.log(checked); }, onRowClick: function (row, header) { return console.log(row, header); }, isPagination: false, isTableSettings: true, onGlobalSearch: function (value) { return console.log(value, "searched"); } })));
 };
 exports.TableExample = TableExample;

package/package.json

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