pixelize-design-library 2.2.23 → 2.2.25
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.
- package/dist/Components/ButtonGroupIcon/ButtonGoupIconProps.d.ts +1 -1
- package/dist/Components/Common/FormLabel.js +1 -1
- package/dist/Components/DatePicker/DatePicker.js +113 -51
- package/dist/Components/KanbanBoard/KanbanBoard.js +124 -57
- package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js +4 -4
- package/dist/Components/SearchSelect/SearchSelect.js +3 -4
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ export type ButtonGroupIconProps = {
|
|
|
9
9
|
onButtongroupClick?: () => void;
|
|
10
10
|
size?: "lg" | "md" | "sm" | "xs";
|
|
11
11
|
variant?: "solid" | "outline" | "ghost" | "link" | "unstyled";
|
|
12
|
-
color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
|
|
12
|
+
color?: "primary" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha";
|
|
13
13
|
buttonGroupStyle?: React.CSSProperties;
|
|
14
14
|
buttonGroupLeftIconStyle?: React.CSSProperties;
|
|
15
15
|
buttonGroupRightIconStyle?: React.CSSProperties;
|
|
@@ -12,7 +12,7 @@ var TextLabel = function (_a) {
|
|
|
12
12
|
var label = _a.label, id = _a.id, _b = _a.isRequired, isRequired = _b === void 0 ? false : _b, _c = _a.isInformation, isInformation = _c === void 0 ? false : _c, _d = _a.informationMessage, informationMessage = _d === void 0 ? "" : _d;
|
|
13
13
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
14
14
|
return (react_1.default.createElement(react_2.Box, null,
|
|
15
|
-
react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], fontWeight: 400, fontSize: "0.875rem" },
|
|
15
|
+
react_1.default.createElement(react_2.FormLabel, { htmlFor: id !== null && id !== void 0 ? id : label, color: theme.colors.gray[600], fontWeight: 400, fontSize: "0.875rem", mb: "0" },
|
|
16
16
|
react_1.default.createElement(react_2.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem" },
|
|
17
17
|
label,
|
|
18
18
|
isRequired && (react_1.default.createElement("span", { style: { color: theme.colors.semantic.error[500] } }, "*")),
|
|
@@ -56,9 +56,6 @@ function CustomDatePicker(props) {
|
|
|
56
56
|
var showDate = resolvedPickerType === "date" || resolvedPickerType === "datetime";
|
|
57
57
|
var showTime = resolvedPickerType === "time" || resolvedPickerType === "datetime";
|
|
58
58
|
var selectedDate = !isRange ? props.selectedDate : null;
|
|
59
|
-
// const [currentMonth, setCurrentMonth] = useState<Date>(
|
|
60
|
-
// isRange ? new Date() : selectedDate ?? new Date()
|
|
61
|
-
// );
|
|
62
59
|
var _g = (0, react_1.useState)(isRange ? new Date() :
|
|
63
60
|
selectedDate
|
|
64
61
|
? (disableToday && (0, date_fns_1.isSameDay)(selectedDate, today) ? tomorrow : selectedDate)
|
|
@@ -67,46 +64,123 @@ function CustomDatePicker(props) {
|
|
|
67
64
|
var _j = (0, react_1.useState)(null), rangeEnd = _j[0], setRangeEnd = _j[1];
|
|
68
65
|
var _k = (0, react_1.useState)(true), selectingStart = _k[0], setSelectingStart = _k[1];
|
|
69
66
|
var _l = (0, react_1.useState)(selectedDate !== null && selectedDate !== void 0 ? selectedDate : null), tempDate = _l[0], setTempDate = _l[1];
|
|
70
|
-
// const [tempDate, setTempDate] = useState<Date | null>(
|
|
71
|
-
// selectedDate
|
|
72
|
-
// ? (disableToday && isSameDay(selectedDate, today) ? tomorrow : selectedDate)
|
|
73
|
-
// : (disableToday ? tomorrow : null)
|
|
74
|
-
// );
|
|
75
67
|
var _m = (0, react_1.useState)(rangeStart), tempRangeStart = _m[0], setTempRangeStart = _m[1];
|
|
76
68
|
var _o = (0, react_1.useState)(rangeEnd), tempRangeEnd = _o[0], setTempRangeEnd = _o[1];
|
|
69
|
+
var _p = (0, react_1.useState)(""), inputValue = _p[0], setInputValue = _p[1];
|
|
70
|
+
var _q = (0, react_1.useState)(false), isTyping = _q[0], setIsTyping = _q[1];
|
|
77
71
|
var popoverRef = (0, react_1.useRef)(null);
|
|
78
|
-
var
|
|
79
|
-
|
|
80
|
-
|
|
72
|
+
var _r = (0, react_1.useState)(false), isManualOpen = _r[0], setIsManualOpen = _r[1];
|
|
73
|
+
// Initialize input value based on selected date
|
|
74
|
+
(0, react_1.useEffect)(function () {
|
|
75
|
+
if (!isRange) {
|
|
76
|
+
if (selectedDate instanceof Date) {
|
|
77
|
+
setTempDate(new Date(selectedDate));
|
|
78
|
+
setInputValue((0, date_fns_1.format)(selectedDate, dateFormat));
|
|
79
|
+
}
|
|
80
|
+
else {
|
|
81
|
+
setTempDate(null);
|
|
82
|
+
setInputValue("");
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}, [selectedDate, isRange, disableToday, dateFormat]);
|
|
86
|
+
var handleInputChange = function (e) {
|
|
87
|
+
var value = e.target.value;
|
|
88
|
+
setInputValue(value);
|
|
89
|
+
setIsTyping(true);
|
|
90
|
+
};
|
|
91
|
+
var handleInputKeyDown = function (e) {
|
|
92
|
+
if (e.key === 'Enter') {
|
|
93
|
+
e.currentTarget.blur();
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
var handleInputBlur = function () {
|
|
97
|
+
setIsTyping(false);
|
|
98
|
+
if (!inputValue.trim()) {
|
|
99
|
+
setTempDate(null);
|
|
100
|
+
props.onChange(null);
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
try {
|
|
104
|
+
var parsed = (0, date_fns_1.parse)(inputValue, dateFormat, new Date());
|
|
105
|
+
if ((0, date_fns_1.isValid)(parsed)) {
|
|
106
|
+
var isValidDate = true;
|
|
107
|
+
if (minDate && (0, date_fns_1.isBefore)(parsed, minDate))
|
|
108
|
+
isValidDate = false;
|
|
109
|
+
if (maxDate && (0, date_fns_1.isAfter)(parsed, maxDate))
|
|
110
|
+
isValidDate = false;
|
|
111
|
+
if (disablePastDates && (0, date_fns_1.isBefore)(parsed, today) && !(0, date_fns_1.isSameDay)(parsed, today))
|
|
112
|
+
isValidDate = false;
|
|
113
|
+
if (disableFutureDates && (0, date_fns_1.isAfter)(parsed, today) && !(0, date_fns_1.isSameDay)(parsed, today))
|
|
114
|
+
isValidDate = false;
|
|
115
|
+
if (disableToday && (0, date_fns_1.isSameDay)(parsed, today))
|
|
116
|
+
isValidDate = false;
|
|
117
|
+
if (isValidDate) {
|
|
118
|
+
var finalDate = parsed;
|
|
119
|
+
if (showTime && tempDate) {
|
|
120
|
+
finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds());
|
|
121
|
+
}
|
|
122
|
+
else if (showTime && !tempDate) {
|
|
123
|
+
var now = new Date();
|
|
124
|
+
finalDate = new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
|
|
125
|
+
}
|
|
126
|
+
setTempDate(finalDate);
|
|
127
|
+
setCurrentMonth(finalDate);
|
|
128
|
+
setInputValue((0, date_fns_1.format)(finalDate, dateFormat));
|
|
129
|
+
props.onChange(finalDate);
|
|
130
|
+
return;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
catch (error) {
|
|
135
|
+
// Parsing failed
|
|
136
|
+
}
|
|
137
|
+
if (tempDate) {
|
|
138
|
+
setInputValue((0, date_fns_1.format)(tempDate, dateFormat));
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
setInputValue("");
|
|
142
|
+
setTempDate(null);
|
|
143
|
+
props.onChange(null);
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
var handleInputFocus = function (e) {
|
|
147
|
+
e.stopPropagation();
|
|
148
|
+
setIsTyping(true);
|
|
149
|
+
// Only open on focus if it's not already open and not a manual click
|
|
150
|
+
if (!isOpen && !isManualOpen) {
|
|
151
|
+
onOpen();
|
|
152
|
+
}
|
|
153
|
+
setIsManualOpen(false);
|
|
154
|
+
};
|
|
155
|
+
var handleTriggerClick = function (e) {
|
|
156
|
+
e.stopPropagation();
|
|
157
|
+
setIsManualOpen(true);
|
|
158
|
+
// Initialize tempDate if needed
|
|
159
|
+
if (!isRange && !tempDate) {
|
|
81
160
|
setTempDate(disableToday ? tomorrow : new Date());
|
|
82
161
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
162
|
+
// Toggle popover
|
|
163
|
+
if (isOpen) {
|
|
164
|
+
onClose();
|
|
165
|
+
}
|
|
166
|
+
else {
|
|
167
|
+
onOpen();
|
|
88
168
|
}
|
|
89
|
-
onOpen();
|
|
90
169
|
};
|
|
91
170
|
(0, react_1.useEffect)(function () {
|
|
92
171
|
if (!isRange) {
|
|
93
172
|
if (selectedDate instanceof Date) {
|
|
94
173
|
setTempDate(new Date(selectedDate));
|
|
95
|
-
|
|
96
|
-
// ? tomorrow
|
|
97
|
-
// : selectedDate;
|
|
98
|
-
// setTempDate(new Date(corrected));
|
|
174
|
+
setInputValue((0, date_fns_1.format)(selectedDate, dateFormat));
|
|
99
175
|
}
|
|
100
176
|
else {
|
|
101
177
|
setTempDate(null);
|
|
102
|
-
|
|
178
|
+
setInputValue("");
|
|
103
179
|
}
|
|
104
180
|
}
|
|
105
|
-
}, [selectedDate, isRange, disableToday]);
|
|
181
|
+
}, [selectedDate, isRange, disableToday, dateFormat]);
|
|
106
182
|
var handleDaySelect = function (day) {
|
|
107
|
-
// const updated = new Date(day);
|
|
108
183
|
var updated = new Date(day);
|
|
109
|
-
// 👇 Redirect selection from today → tomorrow
|
|
110
184
|
if (disableToday && (0, date_fns_1.isSameDay)(updated, today)) {
|
|
111
185
|
updated = tomorrow;
|
|
112
186
|
}
|
|
@@ -133,6 +207,7 @@ function CustomDatePicker(props) {
|
|
|
133
207
|
? new Date(updated.getFullYear(), updated.getMonth(), updated.getDate(), tempDate.getHours(), tempDate.getMinutes(), tempDate.getSeconds())
|
|
134
208
|
: updated;
|
|
135
209
|
setTempDate(updatedDate);
|
|
210
|
+
setInputValue((0, date_fns_1.format)(updatedDate, dateFormat));
|
|
136
211
|
props.onChange(updatedDate);
|
|
137
212
|
}
|
|
138
213
|
};
|
|
@@ -185,19 +260,19 @@ function CustomDatePicker(props) {
|
|
|
185
260
|
: tempRangeStart
|
|
186
261
|
? "".concat((0, date_fns_1.format)(tempRangeStart, dateFormat), " -")
|
|
187
262
|
: ""
|
|
188
|
-
:
|
|
189
|
-
?
|
|
190
|
-
:
|
|
263
|
+
: isTyping
|
|
264
|
+
? inputValue
|
|
265
|
+
: tempDate
|
|
266
|
+
? (0, date_fns_1.format)(tempDate, dateFormat)
|
|
267
|
+
: "";
|
|
191
268
|
(0, react_1.useEffect)(function () {
|
|
192
269
|
var handleClickOutside = function (event) {
|
|
193
270
|
var _a;
|
|
194
271
|
if (popoverRef.current &&
|
|
195
272
|
!popoverRef.current.contains(event.target) &&
|
|
196
273
|
!((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
197
|
-
if (tempDate) {
|
|
198
|
-
props.onChange(tempDate); // add new
|
|
199
|
-
}
|
|
200
274
|
onClose();
|
|
275
|
+
setIsManualOpen(false);
|
|
201
276
|
}
|
|
202
277
|
};
|
|
203
278
|
if (isOpen) {
|
|
@@ -209,13 +284,13 @@ function CustomDatePicker(props) {
|
|
|
209
284
|
return function () {
|
|
210
285
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
211
286
|
};
|
|
212
|
-
}, [isOpen, onClose
|
|
287
|
+
}, [isOpen, onClose]);
|
|
213
288
|
return (react_1.default.createElement(react_2.Box, { width: width, position: "relative" },
|
|
214
289
|
label && (react_1.default.createElement(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })),
|
|
215
|
-
react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur:
|
|
290
|
+
react_1.default.createElement(react_2.Popover, { isLazy: true, isOpen: isOpen, onOpen: onOpen, onClose: onClose, placement: "bottom-start", initialFocusRef: inputRef, closeOnBlur: false },
|
|
216
291
|
react_1.default.createElement(react_2.PopoverTrigger, null,
|
|
217
|
-
react_1.default.createElement(react_2.Box, { onClick:
|
|
218
|
-
react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, isReadOnly:
|
|
292
|
+
react_1.default.createElement(react_2.Box, { onClick: handleTriggerClick },
|
|
293
|
+
react_1.default.createElement(TextInput_1.default, { id: id, name: name, ref: inputRef, placeholder: placeholderText, value: displayValue, onChange: !isRange ? handleInputChange : undefined, onKeyDown: !isRange ? handleInputKeyDown : undefined, onFocus: !isRange ? handleInputFocus : undefined, onBlur: !isRange ? handleInputBlur : undefined, isReadOnly: isRange, error: error, errorMessage: errorMessage, helperText: helperText, autoComplete: autoComplete, isDisabled: disabled, width: width }))),
|
|
219
294
|
react_1.default.createElement(react_2.PopoverContent, { width: "auto", p: 2, ref: popoverRef },
|
|
220
295
|
react_1.default.createElement(react_2.PopoverBody, null,
|
|
221
296
|
showDate && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
@@ -238,34 +313,21 @@ function CustomDatePicker(props) {
|
|
|
238
313
|
react_1.default.createElement(lucide_react_1.ChevronRightIcon, null))),
|
|
239
314
|
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)); })),
|
|
240
315
|
renderDays())),
|
|
241
|
-
!isRange && showTime && (react_1.default.createElement(TimePicker_1.default
|
|
242
|
-
// date={tempDate ?? new Date()}
|
|
243
|
-
, {
|
|
244
|
-
// date={tempDate ?? new Date()}
|
|
245
|
-
date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat,
|
|
246
|
-
// onChange={(updatedDate) => {
|
|
247
|
-
// 👇 Redirect time change if today
|
|
248
|
-
// const corrected = disableToday && isSameDay(updatedDate, today)
|
|
249
|
-
// ? tomorrow
|
|
250
|
-
// : updatedDate;
|
|
251
|
-
// setTempDate(corrected);
|
|
252
|
-
// (props as any).onChange(corrected);
|
|
253
|
-
// }}
|
|
254
|
-
onChange: function (updatedDate) {
|
|
316
|
+
!isRange && showTime && (react_1.default.createElement(TimePicker_1.default, { date: tempDate !== null && tempDate !== void 0 ? tempDate : (disableToday ? tomorrow : today), dateFormat: dateFormat, onChange: function (updatedDate) {
|
|
255
317
|
setTempDate(updatedDate);
|
|
318
|
+
setInputValue((0, date_fns_1.format)(updatedDate, dateFormat));
|
|
256
319
|
props.onChange(updatedDate);
|
|
257
320
|
} })),
|
|
258
321
|
react_1.default.createElement(react_2.Box, { display: "flex", justifyContent: "space-between", mt: 3 },
|
|
259
322
|
react_1.default.createElement(Button_1.default, { size: "sm", variant: "ghost", onClick: function () {
|
|
260
323
|
setTempDate(null);
|
|
261
|
-
|
|
324
|
+
setInputValue("");
|
|
262
325
|
setTempRangeStart(null);
|
|
263
326
|
setTempRangeEnd(null);
|
|
264
327
|
setRangeStart(null);
|
|
265
328
|
setRangeEnd(null);
|
|
266
329
|
setSelectingStart(true);
|
|
267
330
|
props.onChange(null);
|
|
268
|
-
// (props as any).onChange(disableToday ? tomorrow : null);
|
|
269
331
|
onClose();
|
|
270
332
|
} }, "Clear"),
|
|
271
333
|
react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "primary", onClick: function () {
|
|
@@ -56,11 +56,16 @@ var AccountCard_1 = __importDefault(require("./AccountCard"));
|
|
|
56
56
|
var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
|
|
57
57
|
var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
|
|
58
58
|
var KanbanBoard = function (_a) {
|
|
59
|
-
var _b;
|
|
60
|
-
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete,
|
|
59
|
+
var _b, _c, _d, _e;
|
|
60
|
+
var data = _a.data, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _f = _a.isLoading, isLoading = _f === void 0 ? false : _f, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization;
|
|
61
61
|
var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
|
|
62
|
-
var
|
|
63
|
-
var
|
|
62
|
+
var _g = (0, react_1.useState)(data), columns = _g[0], setColumns = _g[1];
|
|
63
|
+
var _h = (0, react_1.useState)(600), containerHeight = _h[0], setContainerHeight = _h[1];
|
|
64
|
+
var _j = (0, react_1.useState)(0), scrollPosition = _j[0], setScrollPosition = _j[1];
|
|
65
|
+
var _k = (0, react_1.useState)(0), maxScroll = _k[0], setMaxScroll = _k[1];
|
|
66
|
+
var _l = (0, react_1.useState)(0), containerWidth = _l[0], setContainerWidth = _l[1];
|
|
67
|
+
var _m = (0, react_1.useState)(0), contentWidth = _m[0], setContentWidth = _m[1];
|
|
68
|
+
var _o = (0, react_1.useState)(null), hoveredColumn = _o[0], setHoveredColumn = _o[1];
|
|
64
69
|
// Responsive column width
|
|
65
70
|
var columnWidth = (0, react_2.useBreakpointValue)({
|
|
66
71
|
base: "16rem",
|
|
@@ -68,12 +73,13 @@ var KanbanBoard = function (_a) {
|
|
|
68
73
|
lg: "19rem",
|
|
69
74
|
});
|
|
70
75
|
// track expanded cards
|
|
71
|
-
var
|
|
76
|
+
var _p = (0, react_1.useState)({}), expanded = _p[0], setExpanded = _p[1];
|
|
72
77
|
// ref for lists
|
|
73
78
|
var listRefs = (0, react_1.useRef)({});
|
|
74
79
|
var containerRef = (0, react_1.useRef)(null);
|
|
80
|
+
var scrollContainerRef = (0, react_1.useRef)(null);
|
|
75
81
|
// store measured heights
|
|
76
|
-
var
|
|
82
|
+
var _q = (0, react_1.useState)({}), sizes = _q[0], setSizes = _q[1];
|
|
77
83
|
// update height for an item
|
|
78
84
|
var setSize = (0, react_1.useCallback)(function (index, size, colId) {
|
|
79
85
|
var key = "".concat(colId, "-").concat(index);
|
|
@@ -89,22 +95,69 @@ var KanbanBoard = function (_a) {
|
|
|
89
95
|
}, []);
|
|
90
96
|
var getItemSize = function (index, _items, colId) {
|
|
91
97
|
var key = "".concat(colId, "-").concat(index);
|
|
92
|
-
return sizes[key] || 180; //
|
|
98
|
+
return (sizes[key] || 180) + 12; // Add margin to the measured height
|
|
93
99
|
};
|
|
94
|
-
// Calculate container
|
|
100
|
+
// Calculate container dimensions and scroll
|
|
95
101
|
(0, react_1.useEffect)(function () {
|
|
96
|
-
var
|
|
102
|
+
var calculateDimensions = function () {
|
|
97
103
|
var _a;
|
|
104
|
+
var scrollContainer = scrollContainerRef.current;
|
|
105
|
+
if (scrollContainer) {
|
|
106
|
+
var containerWidth_1 = scrollContainer.clientWidth;
|
|
107
|
+
var contentWidth_1 = scrollContainer.scrollWidth;
|
|
108
|
+
var newMaxScroll = Math.max(0, contentWidth_1 - containerWidth_1);
|
|
109
|
+
setContainerWidth(containerWidth_1);
|
|
110
|
+
setContentWidth(contentWidth_1);
|
|
111
|
+
setMaxScroll(newMaxScroll);
|
|
112
|
+
// Update scroll position based on current scroll
|
|
113
|
+
setScrollPosition(scrollContainer.scrollLeft);
|
|
114
|
+
}
|
|
98
115
|
if (containerRef.current) {
|
|
99
116
|
var headerHeight = ((_a = document.querySelector("header")) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
|
|
100
117
|
var availableHeight = window.innerHeight - headerHeight - 100;
|
|
101
118
|
setContainerHeight(Math.max(500, availableHeight));
|
|
102
119
|
}
|
|
103
120
|
};
|
|
104
|
-
|
|
105
|
-
window.addEventListener("resize",
|
|
106
|
-
|
|
121
|
+
calculateDimensions();
|
|
122
|
+
window.addEventListener("resize", calculateDimensions);
|
|
123
|
+
// Recalculate when columns change
|
|
124
|
+
var timeoutId = setTimeout(calculateDimensions, 100);
|
|
125
|
+
return function () {
|
|
126
|
+
window.removeEventListener("resize", calculateDimensions);
|
|
127
|
+
clearTimeout(timeoutId);
|
|
128
|
+
};
|
|
129
|
+
}, [columns, isLoading]);
|
|
130
|
+
// Handle scroll events
|
|
131
|
+
(0, react_1.useEffect)(function () {
|
|
132
|
+
var scrollContainer = scrollContainerRef.current;
|
|
133
|
+
if (!scrollContainer)
|
|
134
|
+
return;
|
|
135
|
+
var handleScroll = function () {
|
|
136
|
+
setScrollPosition(scrollContainer.scrollLeft);
|
|
137
|
+
};
|
|
138
|
+
scrollContainer.addEventListener("scroll", handleScroll);
|
|
139
|
+
return function () { return scrollContainer.removeEventListener("scroll", handleScroll); };
|
|
107
140
|
}, []);
|
|
141
|
+
var handleCustomScroll = function (e) {
|
|
142
|
+
var scrollContainer = scrollContainerRef.current;
|
|
143
|
+
if (!scrollContainer || maxScroll <= 0)
|
|
144
|
+
return;
|
|
145
|
+
var rect = e.currentTarget.getBoundingClientRect();
|
|
146
|
+
var clickX = e.clientX - rect.left;
|
|
147
|
+
var scrollbarWidth = rect.width;
|
|
148
|
+
// Calculate the scroll position directly
|
|
149
|
+
var scrollPercentage = clickX / scrollbarWidth;
|
|
150
|
+
var newScroll = scrollPercentage * maxScroll;
|
|
151
|
+
// Use scrollLeft for instant scrolling
|
|
152
|
+
scrollContainer.scrollLeft = newScroll;
|
|
153
|
+
};
|
|
154
|
+
// Calculate scrollbar thumb width and position
|
|
155
|
+
var scrollbarThumbWidth = maxScroll > 0 && containerWidth > 0
|
|
156
|
+
? Math.max(30, (containerWidth / contentWidth) * 100)
|
|
157
|
+
: 100;
|
|
158
|
+
var scrollbarThumbPosition = maxScroll > 0
|
|
159
|
+
? (scrollPosition / maxScroll) * (100 - Math.max(30, scrollbarThumbWidth))
|
|
160
|
+
: 0;
|
|
108
161
|
// toggle expand/collapse
|
|
109
162
|
var toggleExpand = function (id, colId, index) {
|
|
110
163
|
setExpanded(function (prev) {
|
|
@@ -156,56 +209,70 @@ var KanbanBoard = function (_a) {
|
|
|
156
209
|
var index = _a.index, style = _a.style, data = _a.data;
|
|
157
210
|
var items = data.items, colId = data.colId, placeholder = data.placeholder;
|
|
158
211
|
var account = items[index];
|
|
159
|
-
return (react_1.default.createElement("div", { style:
|
|
212
|
+
return (react_1.default.createElement("div", { style: style },
|
|
160
213
|
react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
|
|
161
|
-
react_1.default.createElement(
|
|
162
|
-
react_1.default.createElement(
|
|
214
|
+
react_1.default.createElement("div", { style: { marginBottom: 12 } },
|
|
215
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
|
|
216
|
+
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); } }))); }))),
|
|
163
217
|
index === items.length - 1 && placeholder));
|
|
164
218
|
};
|
|
165
219
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
166
220
|
react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: kanbanEdit, create: kanbanCreate }),
|
|
167
221
|
react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
|
|
168
|
-
react_1.default.createElement(react_2.
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
react_1.default.createElement(
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
react_1.default.createElement(
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
222
|
+
react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200], minH: "".concat(containerHeight, "px"), position: "relative" },
|
|
223
|
+
react_1.default.createElement(react_2.Box, { position: "relative", top: "0", zIndex: 1000, bg: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], height: "8px", borderRadius: "6px", cursor: maxScroll > 0 ? "pointer" : "default", onClick: maxScroll > 0 ? handleCustomScroll : undefined, overflow: "hidden", _hover: {
|
|
224
|
+
"& .scrollbar-thumb": {
|
|
225
|
+
bg: (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[600],
|
|
226
|
+
},
|
|
227
|
+
} },
|
|
228
|
+
react_1.default.createElement(react_2.Box, { className: "scrollbar-thumb", height: "100%", borderRadius: "6px", bg: maxScroll > 0 ? (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[400] : "transparent", width: "".concat(scrollbarThumbWidth, "%"), transform: "translateX(".concat(scrollbarThumbPosition, "%)"), transition: "transform 0.05s ease, background 0.2s ease", position: "absolute", left: "0", minWidth: "10px" })),
|
|
229
|
+
react_1.default.createElement(react_2.Flex, { ref: scrollContainerRef, gap: 4, p: 4, overflowX: "auto", css: {
|
|
230
|
+
"&::-webkit-scrollbar": {
|
|
231
|
+
display: "none",
|
|
232
|
+
},
|
|
233
|
+
scrollbarWidth: "none",
|
|
234
|
+
"-ms-overflow-style": "none",
|
|
235
|
+
} }, isLoading
|
|
236
|
+
? Array.from({ length: 5 }).map(function (_, idx) {
|
|
237
|
+
var _a, _b;
|
|
238
|
+
return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
|
|
239
|
+
react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
|
|
240
|
+
react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
|
|
241
|
+
})
|
|
242
|
+
: Object.entries(columns).map(function (_a) {
|
|
243
|
+
var colId = _a[0], column = _a[1];
|
|
244
|
+
return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
|
|
245
|
+
var item = column.items[rubric.source.index];
|
|
246
|
+
return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }),
|
|
247
|
+
react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
|
|
248
|
+
return toggleExpand(item.id, colId, rubric.source.index);
|
|
249
|
+
} })));
|
|
250
|
+
} }, function (provided, snapshot) {
|
|
251
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
252
|
+
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
|
|
253
|
+
? (_a = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _a === void 0 ? void 0 : _a[50]
|
|
254
|
+
: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
|
|
255
|
+
? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.blue) === null || _c === void 0 ? void 0 : _c[500])
|
|
256
|
+
: "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: "hidden", height: "".concat(containerHeight - 32, "px"), onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
|
|
257
|
+
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" },
|
|
258
|
+
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] }, column.title),
|
|
259
|
+
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" })),
|
|
260
|
+
!(hoveredColumn === colId && column.items.length > 0) && (react_1.default.createElement(react_2.Box, { width: "16px", height: "16px" }))),
|
|
261
|
+
react_1.default.createElement(react_2.Box, { px: 2, pb: 2, flex: "1", overflow: "auto", width: "100%" }, virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
|
|
262
|
+
if (el)
|
|
263
|
+
listRefs.current[colId] = el;
|
|
264
|
+
}, height: containerHeight - 140, itemCount: column.items.length, itemSize: function (index) { return getItemSize(index, column.items, colId); }, width: "100%", itemData: {
|
|
265
|
+
items: column.items,
|
|
266
|
+
colId: colId,
|
|
267
|
+
placeholder: provided.placeholder,
|
|
268
|
+
} }, Row)) : (react_1.default.createElement(react_2.Box, { height: "100%", overflow: "auto" },
|
|
269
|
+
column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
|
|
270
|
+
react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id }, function (provided) { return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
|
|
271
|
+
react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
|
|
272
|
+
return toggleExpand(account.id, colId, index);
|
|
273
|
+
} }))); }))); }),
|
|
274
|
+
provided.placeholder)))));
|
|
275
|
+
}));
|
|
276
|
+
}))))));
|
|
210
277
|
};
|
|
211
278
|
exports.default = KanbanBoard;
|
|
@@ -80,15 +80,15 @@ function ProfilePhotoViewer(_a) {
|
|
|
80
80
|
transition: "opacity 0.3s",
|
|
81
81
|
} },
|
|
82
82
|
isEditable && (react_1.default.createElement(react_2.Tooltip, { label: "Edit", "aria-label": "Edit" },
|
|
83
|
-
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
|
|
83
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.SquarePen, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleClick, "aria-label": "Edit photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)", marginRight: "3px" }), _hover: {
|
|
84
84
|
transform: "scale(1.1)",
|
|
85
|
-
color: theme.colors.
|
|
85
|
+
color: theme.colors.white,
|
|
86
86
|
boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
|
|
87
87
|
} }))),
|
|
88
88
|
isView && (react_1.default.createElement(react_2.Tooltip, { label: "View", "aria-label": "View" },
|
|
89
|
-
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
|
|
89
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", color: theme.colors.gray[200], style: __assign(__assign({}, style), { transition: "transform 0.3s, box-shadow 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }), _hover: {
|
|
90
90
|
transform: "scale(1.1)",
|
|
91
|
-
color: theme.colors.
|
|
91
|
+
color: theme.colors.white,
|
|
92
92
|
boxShadow: "0 8px 16px rgba(0, 0, 0, 0.3)",
|
|
93
93
|
} })))),
|
|
94
94
|
isEditable && (react_1.default.createElement(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))))));
|
|
@@ -217,15 +217,14 @@ var SearchSelect = function (_a) {
|
|
|
217
217
|
? selectedValues.slice(0, (chip === null || chip === void 0 ? void 0 : chip.maxChips) || selectedValues.length).map(function (item) { return (react_1.default.createElement(Tag_1.default, { key: item.id, label: (chip === null || chip === void 0 ? void 0 : chip.maxText) && item.label.length > chip.maxText
|
|
218
218
|
? item.label.slice(0, chip.maxText) + '…'
|
|
219
219
|
: item.label, onIconClick: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? function () { return handleRemove(item === null || item === void 0 ? void 0 : item.id); } : undefined, icon: (chip === null || chip === void 0 ? void 0 : chip.onClick) ? lucide_react_1.CircleX : undefined, colorScheme: "gray", size: "sm" })); })
|
|
220
|
-
: selectedValues.length === 1 &&
|
|
221
|
-
inputValue === '' && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: "sm", color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0 }, selectedValues[0].label)),
|
|
220
|
+
: selectedValues.length === 1 && !isOpen && (react_1.default.createElement(react_2.Box, { as: "button", type: "button", onClick: function () { return setIsOpen(true); }, fontSize: "sm", color: theme.colors.gray[800], background: "transparent", border: "none", cursor: "pointer", p: 0 }, selectedValues[0].label)),
|
|
222
221
|
(chip === null || chip === void 0 ? void 0 : chip.maxChips) &&
|
|
223
222
|
isMultiple &&
|
|
224
223
|
selectedValues.length > chip.maxChips && (react_1.default.createElement(Tag_1.default, { key: "extra-count", label: "+ ".concat(selectedValues.length - chip.maxChips), colorScheme: "gray", size: "sm" })),
|
|
225
|
-
(isMultiple || inputValue || !selectedValues.length ||
|
|
224
|
+
(isMultiple || inputValue || !selectedValues.length || isOpen) && (react_1.default.createElement(react_2.Input, { ref: inputRef, variant: "unstyled", flex: "1", minW: "5rem", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, onFocus: function () {
|
|
226
225
|
setFocused(true);
|
|
227
226
|
setIsOpen(true);
|
|
228
|
-
}, onBlur: function () { return setFocused(false); }, placeholder: selectedValues.length ? "" : placeholder })),
|
|
227
|
+
}, onBlur: function () { return setFocused(false); }, placeholder: selectedValues.length && !isOpen ? "" : placeholder })),
|
|
229
228
|
react_1.default.createElement(react_2.Box, { ml: "auto", display: "flex", alignItems: "center", gap: 1 },
|
|
230
229
|
isRemoveAllIcon && selectedValues.length > 0 && (react_1.default.createElement(ToolTip_1.default, { placement: "top", label: "Remove All", hasArrow: true, bg: theme.colors.gray[600], color: theme.colors.white, fontSize: "0.75rem" },
|
|
231
230
|
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.X, { size: 12, color: theme.colors.black }), "aria-label": "Clear all", variant: "ghost", size: "sm", onClick: handleClearAll, sx: {
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
// import "./bootstrap";
|
|
3
2
|
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
3
|
if (k2 === undefined) k2 = k;
|
|
5
4
|
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
@@ -29,6 +28,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
29
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
30
29
|
exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.FormWrapper = exports.FileUploader = exports.FileUpload = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
|
|
31
30
|
exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.VerifyEmailOtp = exports.useToaster = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = void 0;
|
|
31
|
+
require("./bootstrap");
|
|
32
32
|
var Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
|
|
33
33
|
exports.Accordian = Accordion_1.default;
|
|
34
34
|
var AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
|