pixelize-design-library 2.2.139 → 2.2.141

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/Components/DatePicker/DatePicker.js +81 -80
  2. package/dist/Components/DatePicker/DatePickerProps.d.ts +1 -0
  3. package/dist/Components/Input/TextInput.js +3 -3
  4. package/dist/Components/Input/TextInput.styles.js +12 -0
  5. package/dist/Components/KanbanBoard/KanbanBoard.js +15 -6
  6. package/dist/Components/Table/LeftFilterPane.d.ts +2 -2
  7. package/dist/Components/Table/LeftFilterPane.js +6 -0
  8. package/package.json +1 -1
package/dist/Components/DatePicker/DatePicker.js CHANGED
@@ -57,9 +57,9 @@ var inferPickerTypeFromFormat = function (formatStr) {
57
57
  return "date";
58
58
  };
59
59
  function CustomDatePicker(props) {
60
- var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, _a = props.placeholderText, placeholderText = _a === void 0 ? "Select a date" : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? "dd/MM/yyyy" : _b, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, isRange = props.isRange, _c = props.autoComplete, autoComplete = _c === void 0 ? "off" : _c, disabled = props.disabled, _d = props.width, width = _d === void 0 ? "100%" : _d, _e = props.disableToday, disableToday = _e === void 0 ? false : _e;
60
+ var id = props.id, name = props.name, label = props.label, isRequired = props.isRequired, isInformation = props.isInformation, informationMessage = props.informationMessage, error = props.error, errorMessage = props.errorMessage, helperText = props.helperText, _a = props.placeholderText, placeholderText = _a === void 0 ? "Select a date" : _a, _b = props.dateFormat, dateFormat = _b === void 0 ? "dd/MM/yyyy" : _b, pickerType = props.pickerType, minDate = props.minDate, maxDate = props.maxDate, disableFutureDates = props.disableFutureDates, disablePastDates = props.disablePastDates, isRange = props.isRange, _c = props.autoComplete, autoComplete = _c === void 0 ? "off" : _c, disabled = props.disabled, _d = props.width, width = _d === void 0 ? "100%" : _d, _e = props.disableToday, disableToday = _e === void 0 ? false : _e, _f = props.size, size = _f === void 0 ? "md" : _f;
61
61
  var theme = (0, useCustomTheme_1.useCustomTheme)();
62
- var _f = (0, react_2.useDisclosure)(), isOpen = _f.isOpen, onOpen = _f.onOpen, onClose = _f.onClose;
62
+ var _g = (0, react_2.useDisclosure)(), isOpen = _g.isOpen, onOpen = _g.onOpen, onClose = _g.onClose;
63
63
  var resolvedPickerType = pickerType !== null && pickerType !== void 0 ? pickerType : inferPickerTypeFromFormat(dateFormat);
64
64
  var inputRef = (0, react_1.useRef)(null);
65
65
  var today = new Date();
@@ -70,21 +70,21 @@ function CustomDatePicker(props) {
70
70
  // const [currentMonth, setCurrentMonth] = useState<Date>(
71
71
  // isRange ? new Date() : selectedDate ?? new Date()
72
72
  // );
73
- var _g = (0, react_1.useState)(isRange ? new Date() :
73
+ var _h = (0, react_1.useState)(isRange ? new Date() :
74
74
  selectedDate
75
75
  ? (disableToday && (0, date_fns_1.isSameDay)(selectedDate, today) ? tomorrow : selectedDate)
76
- : (disableToday ? tomorrow : today)), currentMonth = _g[0], setCurrentMonth = _g[1];
77
- var _h = (0, react_1.useState)(null), rangeStart = _h[0], setRangeStart = _h[1];
78
- var _j = (0, react_1.useState)(null), rangeEnd = _j[0], setRangeEnd = _j[1];
79
- var _k = (0, react_1.useState)(true), selectingStart = _k[0], setSelectingStart = _k[1];
80
- var _l = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _l[0], setTempDate = _l[1];
76
+ : (disableToday ? tomorrow : today)), currentMonth = _h[0], setCurrentMonth = _h[1];
77
+ var _j = (0, react_1.useState)(null), rangeStart = _j[0], setRangeStart = _j[1];
78
+ var _k = (0, react_1.useState)(null), rangeEnd = _k[0], setRangeEnd = _k[1];
79
+ var _l = (0, react_1.useState)(true), selectingStart = _l[0], setSelectingStart = _l[1];
80
+ var _m = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _m[0], setTempDate = _m[1];
81
81
  // const [tempDate, setTempDate] = useState<Date | null>(
82
82
  // selectedDate
83
83
  // ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
84
84
  // : (disableToday ? tomorrow : null)
85
85
  // );
86
- var _m = (0, react_1.useState)(rangeStart), tempRangeStart = _m[0], setTempRangeStart = _m[1];
87
- var _o = (0, react_1.useState)(rangeEnd), tempRangeEnd = _o[0], setTempRangeEnd = _o[1];
86
+ var _o = (0, react_1.useState)(rangeStart), tempRangeStart = _o[0], setTempRangeStart = _o[1];
87
+ var _p = (0, react_1.useState)(rangeEnd), tempRangeEnd = _p[0], setTempRangeEnd = _p[1];
88
88
  var popoverRef = (0, react_1.useRef)(null);
89
89
  var isViewingCurrentMonth = currentMonth.getFullYear() === today.getFullYear() &&
90
90
  currentMonth.getMonth() === today.getMonth();
@@ -228,75 +228,76 @@ function CustomDatePicker(props) {
228
228
  react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: true },
229
229
  react_1.default.createElement(react_2.PopoverTrigger, null,
230
230
  react_1.default.createElement(react_2.Box, { onClick: handleOpen },
231
- react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width }))),
232
- react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef },
233
- react_1.default.createElement(react_2.PopoverBody, null,
234
- showDate && (react_1.default.createElement(react_1.default.Fragment, null,
235
- react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 },
236
- react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.subMonths)(prev, 1); }); } },
237
- react_1.default.createElement(lucide_react_1.ChevronLeftIcon, null)),
238
- react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
239
- react_1.default.createElement("select", { value: currentMonth.getMonth(), onChange: function (e) {
240
- var newMonth = parseInt(e.target.value, 10);
241
- setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
242
- } }, Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
243
- react_1.default.createElement("select", { value: currentMonth.getFullYear(), onChange: function (e) {
244
- var newYear = parseInt(e.target.value, 10);
245
- setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
246
- } }, Array.from({ length: 100 }).map(function (_, i) {
247
- var year = new Date().getFullYear() - 50 + i;
248
- return (react_1.default.createElement("option", { key: year, value: year }, year));
249
- }))),
250
- react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
251
- !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () {
252
- setCurrentMonth(new Date(today.getFullYear(), today.getMonth(), 1));
253
- if (!disableToday && !isRange) {
254
- handleDaySelect(new Date(today));
255
- }
256
- }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday }, "Today")),
257
- react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
258
- react_1.default.createElement(lucide_react_1.ChevronRightIcon, null)))),
259
- react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day }, day)); })),
260
- renderDays())),
261
- !isRange && showTime && (react_1.default.createElement(TimePicker_1.default
262
- // date={tempDate ?? new Date()}
263
- , {
231
+ react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly: true, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width, size: size }))),
232
+ react_1.default.createElement(react_2.Portal, { appendToParentPortal: false },
233
+ react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef, zIndex: 1600 },
234
+ react_1.default.createElement(react_2.PopoverBody, null,
235
+ showDate && (react_1.default.createElement(react_1.default.Fragment, null,
236
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2 },
237
+ react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.subMonths)(prev, 1); }); } },
238
+ react_1.default.createElement(lucide_react_1.ChevronLeftIcon, null)),
239
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
240
+ react_1.default.createElement("select", { value: currentMonth.getMonth(), onChange: function (e) {
241
+ var newMonth = parseInt(e.target.value, 10);
242
+ setCurrentMonth(function (prev) { return new Date(prev.getFullYear(), newMonth, 1); });
243
+ } }, Array.from({ length: 12 }).map(function (_, i) { return (react_1.default.createElement("option", { key: i, value: i }, (0, date_fns_1.format)(new Date(2000, i, 1), "MMMM"))); })),
244
+ react_1.default.createElement("select", { value: currentMonth.getFullYear(), onChange: function (e) {
245
+ var newYear = parseInt(e.target.value, 10);
246
+ setCurrentMonth(function (prev) { return new Date(newYear, prev.getMonth(), 1); });
247
+ } }, Array.from({ length: 100 }).map(function (_, i) {
248
+ var year = new Date().getFullYear() - 50 + i;
249
+ return (react_1.default.createElement("option", { key: year, value: year }, year));
250
+ }))),
251
+ react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 1 },
252
+ !isViewingCurrentMonth && (react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () {
253
+ setCurrentMonth(new Date(today.getFullYear(), today.getMonth(), 1));
254
+ if (!disableToday && !isRange) {
255
+ handleDaySelect(new Date(today));
256
+ }
257
+ }, "aria-label": "Today", sx: { fontSize: "0.75rem", px: 2 }, isDisabled: disableToday }, "Today")),
258
+ react_1.default.createElement(Button_1.default, { variant: "ghost", size: "sm", onClick: function () { return setCurrentMonth(function (prev) { return (0, date_fns_1.addMonths)(prev, 1); }); } },
259
+ react_1.default.createElement(lucide_react_1.ChevronRightIcon, null)))),
260
+ react_1.default.createElement(react_2.Grid, { templateColumns: "repeat(7, 1fr)", gap: 1, fontWeight: "bold", mb: 1 }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map(function (day) { return (react_1.default.createElement(react_2.Box, { textAlign: "center", key: day }, day)); })),
261
+ renderDays())),
262
+ !isRange && showTime && (react_1.default.createElement(TimePicker_1.default
264
263
  // date={tempDate ?? new Date()}
265
- date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat,
266
- // onChange={(updatedDate) => {
267
- // 👇 Redirect time change if today
268
- // const corrected = disableToday && isSameDay(updatedDate, today)
269
- // ? tomorrow
270
- // : updatedDate;
271
- // setTempDate(corrected);
272
- // (props as any).onChange(corrected);
273
- // }}
274
- onChange: function (updatedDate) {
275
- setTempDate(updatedDate);
276
- props.onChange(updatedDate);
277
- } })),
278
- react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3 },
279
- react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
280
- setTempDate(null);
281
- // setTempDate(disableToday ? tomorrow : null);
282
- setTempRangeStart(null);
283
- setTempRangeEnd(null);
284
- setRangeStart(null);
285
- setRangeEnd(null);
286
- setSelectingStart(true);
287
- props.onChange(null);
288
- // (props as any).onChange(disableToday ? tomorrow : null);
289
- onClose();
290
- } }, "Clear"),
291
- react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () {
292
- if (isRange && tempRangeStart && tempRangeEnd) {
293
- setRangeStart(tempRangeStart);
294
- setRangeEnd(tempRangeEnd);
295
- props.onChange({ from: tempRangeStart, to: tempRangeEnd });
296
- }
297
- else if (!isRange && tempDate) {
298
- props.onChange(tempDate);
299
- }
300
- onClose();
301
- } }, "OK")))))));
264
+ , {
265
+ // date={tempDate ?? new Date()}
266
+ date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat,
267
+ // onChange={(updatedDate) => {
268
+ // 👇 Redirect time change if today
269
+ // const corrected = disableToday && isSameDay(updatedDate, today)
270
+ // ? tomorrow
271
+ // : updatedDate;
272
+ // setTempDate(corrected);
273
+ // (props as any).onChange(corrected);
274
+ // }}
275
+ onChange: function (updatedDate) {
276
+ setTempDate(updatedDate);
277
+ props.onChange(updatedDate);
278
+ } })),
279
+ react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3 },
280
+ react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
281
+ setTempDate(null);
282
+ // setTempDate(disableToday ? tomorrow : null);
283
+ setTempRangeStart(null);
284
+ setTempRangeEnd(null);
285
+ setRangeStart(null);
286
+ setRangeEnd(null);
287
+ setSelectingStart(true);
288
+ props.onChange(null);
289
+ // (props as any).onChange(disableToday ? tomorrow : null);
290
+ onClose();
291
+ } }, "Clear"),
292
+ react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () {
293
+ if (isRange && tempRangeStart && tempRangeEnd) {
294
+ setRangeStart(tempRangeStart);
295
+ setRangeEnd(tempRangeEnd);
296
+ props.onChange({ from: tempRangeStart, to: tempRangeEnd });
297
+ }
298
+ else if (!isRange && tempDate) {
299
+ props.onChange(tempDate);
300
+ }
301
+ onClose();
302
+ } }, "OK"))))))));
302
303
  }
package/dist/Components/DatePicker/DatePickerProps.d.ts CHANGED
@@ -20,6 +20,7 @@ export type BaseDatePickerProps = {
20
20
  disabled?: boolean;
21
21
  width?: string | number;
22
22
  disableToday?: boolean;
23
+ size?: "sm" | "md" | "lg";
23
24
  };
24
25
  export type SingleDatePickerProps = BaseDatePickerProps & {
25
26
  isRange?: false;
package/dist/Components/Input/TextInput.js CHANGED
@@ -64,12 +64,12 @@ var FormLabel_1 = require("../Common/FormLabel");
64
64
  var HelperText_1 = __importDefault(require("../Common/HelperText"));
65
65
  var ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
66
66
  var TextInput = (0, react_1.forwardRef)(function (_a, ref) {
67
- var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "100%" : _g, _h = _a.height, height = _h === void 0 ? "2.75rem" : _h, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _j = _a.size, size = _j === void 0 ? "md" : _j, _k = _a.isInformation, isInformation = _k === void 0 ? false : _k, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, minW = _a.minW, maxW = _a.maxW, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete", "minW", "maxW"]);
67
+ var label = _a.label, _b = _a.type, type = _b === void 0 ? "text" : _b, id = _a.id, name = _a.name, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, _d = _a.isReadOnly, isReadOnly = _d === void 0 ? false : _d, _e = _a.isRequired, isRequired = _e === void 0 ? false : _e, value = _a.value, _f = _a.placeholder, placeholder = _f === void 0 ? "Placeholder" : _f, _g = _a.width, width = _g === void 0 ? "100%" : _g, height = _a.height, error = _a.error, errorMessage = _a.errorMessage, helperText = _a.helperText, onRightIconclick = _a.onRightIconclick, inputRightIcon = _a.inputRightIcon, inputLeftIcon = _a.inputLeftIcon, onLeftIconClick = _a.onLeftIconClick, inputGroupStyle = _a.inputGroupStyle, inputStyle = _a.inputStyle, _h = _a.size, size = _h === void 0 ? "md" : _h, _j = _a.isInformation, isInformation = _j === void 0 ? false : _j, informationMessage = _a.informationMessage, leftElementStyle = _a.leftElementStyle, rightElementStyle = _a.rightElementStyle, autoComplete = _a.autoComplete, minW = _a.minW, maxW = _a.maxW, props = __rest(_a, ["label", "type", "id", "name", "onChange", "onBlur", "onFocus", "isDisabled", "isReadOnly", "isRequired", "value", "placeholder", "width", "height", "error", "errorMessage", "helperText", "onRightIconclick", "inputRightIcon", "inputLeftIcon", "onLeftIconClick", "inputGroupStyle", "inputStyle", "size", "isInformation", "informationMessage", "leftElementStyle", "rightElementStyle", "autoComplete", "minW", "maxW"]);
68
68
  return (react_1.default.createElement(react_2.FormControl, { w: width, minW: minW, maxW: maxW },
69
69
  label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, id: id, isInformation: isInformation, informationMessage: informationMessage, isRequired: isRequired })),
70
- react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, height: height },
70
+ react_1.default.createElement(react_2.InputGroup, { style: inputGroupStyle, size: size, height: height },
71
71
  inputLeftIcon && (react_1.default.createElement(react_2.InputLeftElement, __assign({ onClick: onLeftIconClick, pointerEvents: onLeftIconClick ? "auto" : "none" }, leftElementStyle, { height: "100%", display: "flex", alignItems: "center" }), inputLeftIcon)),
72
- react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size, height: height, isInvalid: error, ref: ref, autoComplete: autoComplete }, inputStyle, props)),
72
+ react_1.default.createElement(react_2.Input, __assign({ type: type, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus, value: value, isDisabled: isDisabled, isReadOnly: isReadOnly, id: id, name: name, size: size }, (height != null && { height: height }), { isInvalid: error, ref: ref, autoComplete: autoComplete }, inputStyle, props)),
73
73
  inputRightIcon && (react_1.default.createElement(react_2.InputRightElement, __assign({ onClick: onRightIconclick, pointerEvents: onRightIconclick ? "auto" : "none" }, rightElementStyle, { height: "100%", display: "flex", alignItems: "center" }), inputRightIcon))),
74
74
  error && react_1.default.createElement(ErrorMessage_1.default, { errorMessage: errorMessage }),
75
75
  helperText && !error && react_1.default.createElement(HelperText_1.default, { helperText: helperText })));
package/dist/Components/Input/TextInput.styles.js CHANGED
@@ -18,12 +18,24 @@ exports.Input = {
18
18
  },
19
19
  },
20
20
  sizes: {
21
+ sm: {
22
+ field: {
23
+ h: "2rem",
24
+ fontSize: "0.8125rem",
25
+ },
26
+ },
21
27
  md: {
22
28
  field: {
23
29
  h: "2.75rem",
24
30
  fontSize: "0.875rem",
25
31
  },
26
32
  },
33
+ lg: {
34
+ field: {
35
+ h: "3.25rem",
36
+ fontSize: "0.9375rem",
37
+ },
38
+ },
27
39
  },
28
40
  variants: {
29
41
  outline: function (props) {
package/dist/Components/KanbanBoard/KanbanBoard.js CHANGED
@@ -177,7 +177,9 @@ var KanbanBoard = function (_a) {
177
177
  react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
178
178
  react_1.default.createElement("div", { style: { marginBottom: 12 } },
179
179
  react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
180
- react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () { return toggleExpand(account.id, colId, index); }, isDeletable: canDelete }))); }))),
180
+ react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
181
+ return toggleExpand(account.id, colId, index);
182
+ }, isDeletable: canDelete }))); }))),
181
183
  index === items.length - 1 && placeholder));
182
184
  };
183
185
  var NoItemsTemplate = function (_a) {
@@ -232,7 +234,7 @@ var KanbanBoard = function (_a) {
232
234
  return toggleExpand(item.id, colId, rubric.source.index);
233
235
  } })));
234
236
  } }, function (provided, snapshot) {
235
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
237
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
236
238
  return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
237
239
  ? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
238
240
  : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
@@ -241,8 +243,13 @@ var KanbanBoard = function (_a) {
241
243
  react_1.default.createElement(react_2.Flex, { width: "95%", height: "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], background: (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative" },
242
244
  react_1.default.createElement(react_2.Text, { fontWeight: "600", fontSize: "1rem", color: (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[700], noOfLines: 1, w: "100%" },
243
245
  react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
244
- canDelete && hoveredColumn === colId && column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], _hover: { color: (_k = colors === null || colors === void 0 ? void 0 : colors.red) === null || _k === void 0 ? void 0 : _k[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
245
- !(canDelete && hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
246
+ react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, px: "8px", mr: { base: "6px", md: "10px" }, borderRadius: "999px", border: "1px solid gray", display: "flex", alignItems: "center", justifyContent: "center", color: (_j = colors === null || colors === void 0 ? void 0 : colors.text) === null || _j === void 0 ? void 0 : _j[600], fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_k = column === null || column === void 0 ? void 0 : column.items) === null || _k === void 0 ? void 0 : _k.length),
247
+ canDelete &&
248
+ hoveredColumn === colId &&
249
+ column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_l = colors === null || colors === void 0 ? void 0 : colors.text) === null || _l === void 0 ? void 0 : _l[600], _hover: { color: (_m = colors === null || colors === void 0 ? void 0 : colors.red) === null || _m === void 0 ? void 0 : _m[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease" })),
250
+ !(canDelete &&
251
+ hoveredColumn === colId &&
252
+ column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" })),
246
253
  react_1.default.createElement(react_2.Box, { px: 2,
247
254
  // pb={2}
248
255
  flex: "1", overflowY: "auto", width: "100%",
@@ -280,11 +287,13 @@ var KanbanBoard = function (_a) {
280
287
  },
281
288
  cursor: canDrag ? "grab" : "not-allowed",
282
289
  } },
283
- (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && react_1.default.createElement(NoItemsTemplate, { column: column }),
290
+ (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column })),
284
291
  virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
285
292
  if (el)
286
293
  listRefs.current[colId] = el;
287
- }, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) { return getItemSize(index, column.items, colId); }, width: "100%", itemData: {
294
+ }, height: containerHeight - 150, itemCount: column.items.length, itemSize: function (index) {
295
+ return getItemSize(index, column.items, colId);
296
+ }, width: "100%", itemData: {
288
297
  items: column.items,
289
298
  colId: colId,
290
299
  placeholder: provided.placeholder,
package/dist/Components/Table/LeftFilterPane.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  export type FilterItem = {
3
3
  id: string;
4
4
  label: string;
5
- type?: "text" | "select" | "user";
5
+ type?: "text" | "select" | "user" | "date";
6
6
  option?: {
7
7
  id: string;
8
8
  label: string;
@@ -19,7 +19,7 @@ export type SelectedFilterItem = {
19
19
  id: string;
20
20
  condition?: string;
21
21
  value?: any;
22
- type?: "text" | "select" | "user";
22
+ type?: "text" | "select" | "user" | "date";
23
23
  };
24
24
  export type LeftFilterPaneProps = {
25
25
  title?: string;
package/dist/Components/Table/LeftFilterPane.js CHANGED
@@ -66,6 +66,7 @@ var RadioButton_1 = require("../RadioButton/RadioButton");
66
66
  var TextOperationControls_1 = require("./TextOperationControls");
67
67
  var SelectOperationControls_1 = require("./SelectOperationControls");
68
68
  var CompactSelect_1 = __importDefault(require("./CompactSelect"));
69
+ var DatePicker_1 = __importDefault(require("../DatePicker/DatePicker"));
69
70
  // ─── Helpers ──────────────────────────────────────────────────────────────────
70
71
  var LABEL_MAX_LENGTH = 18;
71
72
  function formatHeaderLabel(label) {
@@ -96,6 +97,9 @@ var ActiveItemControls = function (_a) {
96
97
  var activeItem = _a.activeItem, sec = _a.sec, setTextOperator = _a.setTextOperator, setTextValue = _a.setTextValue;
97
98
  if (!activeItem)
98
99
  return null;
100
+ if (activeItem.type === "date") {
101
+ return (react_1.default.createElement(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
102
+ }
99
103
  if (activeItem.type === "text") {
100
104
  return (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, activeItem.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, activeItem.id, val); } }));
101
105
  }
@@ -135,6 +139,8 @@ var SectionContent = function (_a) {
135
139
  ".chakra-checkbox__control": { width: "12px", height: "12px", mt: "2px" },
136
140
  ".chakra-checkbox__label": { lineHeight: "1rem", whiteSpace: "normal", wordBreak: "break-word" },
137
141
  } }),
142
+ checked && it.type === "date" && (react_1.default.createElement(react_2.Box, { ml: "1.25rem" },
143
+ react_1.default.createElement(DatePicker_1.default, { size: "sm", selectedDate: activeItem.value, onChange: function (val) { return setTextValue(sec.id, it.id, val); } }))),
138
144
  checked && it.type === "text" && (react_1.default.createElement(TextOperationControls_1.TextOperationControls, { operator: activeItem.condition || "contains", value: activeItem.value || "", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, onValueChange: function (val) { return setTextValue(sec.id, it.id, val); } })),
139
145
  checked && (it.type === "select" || it.type === "user") && (react_1.default.createElement(react_2.Box, null,
140
146
  react_1.default.createElement(SelectOperationControls_1.SelectOperationControls, { operator: activeItem.condition || "is", onOperatorChange: function (op) { return setTextOperator(sec.id, it.id, op); }, size: "xs", ml: "1.25rem" }),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.139",
3
+ "version": "2.2.141",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",