@deepnoid/ui 0.1.174 → 0.1.176
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/.turbo/turbo-build.log +189 -189
- package/dist/{chunk-4XEZQMLU.mjs → chunk-56EB7LGB.mjs} +2 -2
- package/dist/{chunk-52VX5MC2.mjs → chunk-6LEIEAN6.mjs} +2 -2
- package/dist/{chunk-6DOAZ27E.mjs → chunk-DDJBY4E3.mjs} +1 -1
- package/dist/{chunk-BM3MR3JR.mjs → chunk-EJ3W2WO7.mjs} +4 -4
- package/dist/{chunk-4OOHXMJH.mjs → chunk-IQS53D7Q.mjs} +1 -1
- package/dist/{chunk-D4YI5HF2.mjs → chunk-JQ7UTKWA.mjs} +4 -4
- package/dist/{chunk-QXVGMVCG.mjs → chunk-KXQWLBBN.mjs} +56 -26
- package/dist/{chunk-SCQCMQDP.mjs → chunk-Q634VF4Y.mjs} +1 -1
- package/dist/components/accordion/index.mjs +3 -3
- package/dist/components/backdrop/backdrop.mjs +2 -2
- package/dist/components/backdrop/index.mjs +2 -2
- package/dist/components/breadcrumb/breadcrumb.mjs +4 -4
- package/dist/components/breadcrumb/index.mjs +4 -4
- package/dist/components/button/button.mjs +1 -1
- package/dist/components/button/icon-button.mjs +1 -1
- package/dist/components/button/index.mjs +3 -3
- package/dist/components/button/text-button.mjs +2 -2
- package/dist/components/charts/areaChart.mjs +1 -1
- package/dist/components/charts/index.mjs +4 -4
- package/dist/components/checkbox/checkbox.mjs +2 -2
- package/dist/components/checkbox/index.mjs +2 -2
- package/dist/components/chip/chip.mjs +1 -1
- package/dist/components/chip/index.mjs +1 -1
- package/dist/components/drawer/drawer.mjs +2 -2
- package/dist/components/drawer/index.mjs +2 -2
- package/dist/components/fileUpload/fileUpload.mjs +7 -7
- package/dist/components/fileUpload/index.mjs +7 -7
- package/dist/components/input/index.mjs +3 -3
- package/dist/components/input/input.mjs +3 -3
- package/dist/components/list/index.mjs +2 -2
- package/dist/components/list/listItem.mjs +2 -2
- package/dist/components/modal/index.mjs +5 -5
- package/dist/components/modal/modal.mjs +5 -5
- package/dist/components/pagination/index.mjs +4 -4
- package/dist/components/pagination/pagination.mjs +4 -4
- package/dist/components/picker/datePicker.mjs +5 -5
- package/dist/components/picker/index.mjs +10 -10
- package/dist/components/picker/timePicker.mjs +4 -4
- package/dist/components/progress/index.mjs +2 -2
- package/dist/components/progress/progress.mjs +2 -2
- package/dist/components/radio/index.mjs +2 -2
- package/dist/components/radio/radio.mjs +2 -2
- package/dist/components/select/index.mjs +3 -3
- package/dist/components/select/select.mjs +3 -3
- package/dist/components/starRating/index.mjs +1 -1
- package/dist/components/starRating/starRating.mjs +1 -1
- package/dist/components/table/definition-table.mjs +2 -2
- package/dist/components/table/index.js +75 -45
- package/dist/components/table/index.mjs +8 -8
- package/dist/components/table/table-body.js +45 -15
- package/dist/components/table/table-body.mjs +7 -7
- package/dist/components/table/table-head.js +73 -41
- package/dist/components/table/table-head.mjs +7 -7
- package/dist/components/table/table.js +71 -41
- package/dist/components/table/table.mjs +7 -7
- package/dist/components/textarea/index.mjs +2 -2
- package/dist/components/textarea/textarea.mjs +2 -2
- package/dist/components/timePicker/calendar.mjs +1 -1
- package/dist/components/toast/index.mjs +4 -4
- package/dist/components/toast/toast.mjs +3 -3
- package/dist/components/toast/use-toast.mjs +4 -4
- package/dist/components/tree/index.mjs +2 -2
- package/dist/components/tree/tree.mjs +2 -2
- package/dist/index.js +252 -222
- package/dist/index.mjs +60 -60
- package/package.json +1 -1
- package/dist/{chunk-OEIEALIP.mjs → chunk-3DCUMRYP.mjs} +3 -3
- package/dist/{chunk-3CRSSRCH.mjs → chunk-3HXNAVAN.mjs} +3 -3
- package/dist/{chunk-IH3BJRTV.mjs → chunk-4X35QQTI.mjs} +3 -3
- package/dist/{chunk-KH63CD55.mjs → chunk-ACZ3DQVT.mjs} +3 -3
- package/dist/{chunk-DS5CGU2X.mjs → chunk-BH3I4LIZ.mjs} +3 -3
- package/dist/{chunk-HKLVFMYQ.mjs → chunk-GVXMHCVG.mjs} +3 -3
- package/dist/{chunk-4LUASWAN.mjs → chunk-NDNIAALB.mjs} +3 -3
- package/dist/{chunk-VNRGOOSY.mjs → chunk-ONLUMPWY.mjs} +3 -3
- package/dist/{chunk-WSBUOY2M.mjs → chunk-P56E5QWF.mjs} +3 -3
- package/dist/{chunk-5G6CCE55.mjs → chunk-PYUKZ4RH.mjs} +3 -3
- package/dist/{chunk-6574ITBF.mjs → chunk-WEIIVXUS.mjs} +3 -3
- package/dist/{chunk-PRNE3U26.mjs → chunk-XL6LZDT4.mjs} +3 -3
- package/dist/{chunk-45Y7ANPK.mjs → chunk-ZFC5O2V3.mjs} +3 -3
package/dist/index.js
CHANGED
|
@@ -7973,7 +7973,7 @@ var textareaStyle = (0, import_tailwind_variants13.tv)({
|
|
|
7973
7973
|
});
|
|
7974
7974
|
|
|
7975
7975
|
// src/components/table/table.tsx
|
|
7976
|
-
var
|
|
7976
|
+
var import_react18 = require("react");
|
|
7977
7977
|
var import_tailwind_variants17 = require("tailwind-variants");
|
|
7978
7978
|
|
|
7979
7979
|
// src/components/checkbox/checkbox.tsx
|
|
@@ -8231,7 +8231,40 @@ var TableHead = ({
|
|
|
8231
8231
|
var table_head_default = TableHead;
|
|
8232
8232
|
|
|
8233
8233
|
// src/components/table/table-body.tsx
|
|
8234
|
+
var import_react15 = require("react");
|
|
8234
8235
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
8236
|
+
function TableCell({
|
|
8237
|
+
row,
|
|
8238
|
+
column,
|
|
8239
|
+
colIdx,
|
|
8240
|
+
rowIndex,
|
|
8241
|
+
slots,
|
|
8242
|
+
classNames
|
|
8243
|
+
}) {
|
|
8244
|
+
var _a;
|
|
8245
|
+
const value = row[column.field];
|
|
8246
|
+
const formattedValue = ((_a = column.valueFormatter) == null ? void 0 : _a.call(column, { value, field: column.field })) || value;
|
|
8247
|
+
const content = column.renderCell ? column.renderCell({ id: row.id, field: column.field, value, formattedValue, row }) : formattedValue;
|
|
8248
|
+
const tdRef = (0, import_react15.useRef)(null);
|
|
8249
|
+
const [showTitle, setShowTitle] = (0, import_react15.useState)(false);
|
|
8250
|
+
const checkOverflow = (el) => el.scrollWidth > el.clientWidth;
|
|
8251
|
+
(0, import_react15.useEffect)(() => {
|
|
8252
|
+
if (tdRef.current) {
|
|
8253
|
+
setShowTitle(checkOverflow(tdRef.current));
|
|
8254
|
+
}
|
|
8255
|
+
}, [content]);
|
|
8256
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8257
|
+
"td",
|
|
8258
|
+
{
|
|
8259
|
+
ref: tdRef,
|
|
8260
|
+
className: clsx(slots.td(), classNames == null ? void 0 : classNames.td, column.className, "truncate"),
|
|
8261
|
+
style: { ...getCellStyle(column), maxWidth: column.width || "150px" },
|
|
8262
|
+
title: showTitle ? String(content) : void 0,
|
|
8263
|
+
children: content
|
|
8264
|
+
},
|
|
8265
|
+
`${row.id}-${column.field}-${colIdx}-${rowIndex}`
|
|
8266
|
+
);
|
|
8267
|
+
}
|
|
8235
8268
|
var TableBody = ({
|
|
8236
8269
|
slots,
|
|
8237
8270
|
rows,
|
|
@@ -8263,21 +8296,18 @@ var TableBody = ({
|
|
|
8263
8296
|
className: slots.tr({ class: classNames == null ? void 0 : classNames.tr }),
|
|
8264
8297
|
onClick: typeof onRowClick === "function" ? (event) => onRowClick(row, rowIndex, event) : void 0,
|
|
8265
8298
|
children: [
|
|
8266
|
-
columns.map((column, colIdx) =>
|
|
8267
|
-
|
|
8268
|
-
|
|
8269
|
-
|
|
8270
|
-
|
|
8271
|
-
|
|
8272
|
-
|
|
8273
|
-
|
|
8274
|
-
|
|
8275
|
-
|
|
8276
|
-
|
|
8277
|
-
|
|
8278
|
-
`${row.id}-${column.field}-${colIdx}-${rowIndex}`
|
|
8279
|
-
);
|
|
8280
|
-
}),
|
|
8299
|
+
columns.map((column, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8300
|
+
TableCell,
|
|
8301
|
+
{
|
|
8302
|
+
row,
|
|
8303
|
+
column,
|
|
8304
|
+
colIdx,
|
|
8305
|
+
rowIndex,
|
|
8306
|
+
slots,
|
|
8307
|
+
classNames
|
|
8308
|
+
},
|
|
8309
|
+
`${row.id}-${column.field}-${colIdx}`
|
|
8310
|
+
)),
|
|
8281
8311
|
rowCheckbox && renderCheckboxCell(row.id, rowIndex)
|
|
8282
8312
|
]
|
|
8283
8313
|
},
|
|
@@ -8299,18 +8329,18 @@ var TableBody = ({
|
|
|
8299
8329
|
var table_body_default = TableBody;
|
|
8300
8330
|
|
|
8301
8331
|
// src/components/pagination/pagination.tsx
|
|
8302
|
-
var
|
|
8332
|
+
var import_react17 = require("react");
|
|
8303
8333
|
|
|
8304
8334
|
// src/components/pagination/usePagination.ts
|
|
8305
|
-
var
|
|
8335
|
+
var import_react16 = require("react");
|
|
8306
8336
|
var usePagination = ({ currentPage, totalPage, groupSize, handleChangePage }) => {
|
|
8307
|
-
const startPage = (0,
|
|
8308
|
-
const endPage = (0,
|
|
8309
|
-
const pageList = (0,
|
|
8337
|
+
const startPage = (0, import_react16.useMemo)(() => Math.floor((currentPage - 1) / groupSize) * groupSize + 1, [currentPage, groupSize]);
|
|
8338
|
+
const endPage = (0, import_react16.useMemo)(() => Math.min(startPage + groupSize - 1, totalPage), [startPage, groupSize, totalPage]);
|
|
8339
|
+
const pageList = (0, import_react16.useMemo)(
|
|
8310
8340
|
() => Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i),
|
|
8311
8341
|
[startPage, endPage]
|
|
8312
8342
|
);
|
|
8313
|
-
const handleClickMovePage = (0,
|
|
8343
|
+
const handleClickMovePage = (0, import_react16.useCallback)(
|
|
8314
8344
|
(page) => (event) => {
|
|
8315
8345
|
event.preventDefault();
|
|
8316
8346
|
handleChangePage == null ? void 0 : handleChangePage(page);
|
|
@@ -8328,7 +8358,7 @@ var usePagination_default = usePagination;
|
|
|
8328
8358
|
|
|
8329
8359
|
// src/components/pagination/pagination.tsx
|
|
8330
8360
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
8331
|
-
var Pagination = (0,
|
|
8361
|
+
var Pagination = (0, import_react17.forwardRef)((originalProps, ref) => {
|
|
8332
8362
|
const [props, variantProps] = mapPropsVariants(originalProps, paginationStyle.variantKeys);
|
|
8333
8363
|
const {
|
|
8334
8364
|
classNames,
|
|
@@ -8342,12 +8372,12 @@ var Pagination = (0, import_react16.forwardRef)((originalProps, ref) => {
|
|
|
8342
8372
|
variant,
|
|
8343
8373
|
size
|
|
8344
8374
|
} = { ...props, ...variantProps };
|
|
8345
|
-
const [inputPage, setInputPage] = (0,
|
|
8375
|
+
const [inputPage, setInputPage] = (0, import_react17.useState)(currentPage);
|
|
8346
8376
|
const isFirstPageDisabled = currentPage <= 1;
|
|
8347
8377
|
const isPrevPageDisabled = currentPage <= 1;
|
|
8348
8378
|
const isNextPageDisabled = currentPage >= totalPage;
|
|
8349
8379
|
const isLastPageDisabled = currentPage >= totalPage;
|
|
8350
|
-
const slots = (0,
|
|
8380
|
+
const slots = (0, import_react17.useMemo)(() => paginationStyle(variantProps), [variantProps]);
|
|
8351
8381
|
const { pageList, handleClickMovePage } = usePagination_default({
|
|
8352
8382
|
currentPage,
|
|
8353
8383
|
totalPage,
|
|
@@ -8715,7 +8745,7 @@ var scrollAreaStyle = (0, import_tailwind_variants16.tv)({
|
|
|
8715
8745
|
|
|
8716
8746
|
// src/components/table/table.tsx
|
|
8717
8747
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
8718
|
-
var Table = (0,
|
|
8748
|
+
var Table = (0, import_react18.forwardRef)((originalProps, ref) => {
|
|
8719
8749
|
const [props, variantProps] = mapPropsVariants(originalProps, tableStyle.variantKeys);
|
|
8720
8750
|
const {
|
|
8721
8751
|
rows,
|
|
@@ -8740,8 +8770,8 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
|
|
|
8740
8770
|
} = { ...props, ...variantProps };
|
|
8741
8771
|
const { page = 1, perPage = 15 } = pagination || {};
|
|
8742
8772
|
const showPagination = pagination && totalData > 0;
|
|
8743
|
-
const [checkedRowIds, setCheckedRowIds] = (0,
|
|
8744
|
-
const tableMinWidth = (0,
|
|
8773
|
+
const [checkedRowIds, setCheckedRowIds] = (0, import_react18.useState)(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
|
|
8774
|
+
const tableMinWidth = (0, import_react18.useMemo)(() => {
|
|
8745
8775
|
const columnsWidth = columns.reduce((total, column) => {
|
|
8746
8776
|
if (column.width) return total + column.width;
|
|
8747
8777
|
if (column.minWidth) return total + column.minWidth;
|
|
@@ -8750,10 +8780,10 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
|
|
|
8750
8780
|
const checkboxWidth = rowCheckbox ? 40 : 0;
|
|
8751
8781
|
return columnsWidth + checkboxWidth;
|
|
8752
8782
|
}, [columns, rowCheckbox]);
|
|
8753
|
-
(0,
|
|
8783
|
+
(0, import_react18.useEffect)(() => {
|
|
8754
8784
|
onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
|
|
8755
8785
|
}, [checkedRowIds]);
|
|
8756
|
-
(0,
|
|
8786
|
+
(0, import_react18.useEffect)(() => {
|
|
8757
8787
|
const currentRowIds = new Set(rows.map((row) => row.id));
|
|
8758
8788
|
const ids = Array.from(checkedRowIds);
|
|
8759
8789
|
const hasValidCheckedRows = ids.every((id) => currentRowIds.has(id));
|
|
@@ -8761,7 +8791,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
|
|
|
8761
8791
|
setCheckedRowIds(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
|
|
8762
8792
|
}
|
|
8763
8793
|
}, [rows.map((row) => row.id).join(",")]);
|
|
8764
|
-
(0,
|
|
8794
|
+
(0, import_react18.useImperativeHandle)(
|
|
8765
8795
|
ref,
|
|
8766
8796
|
() => ({
|
|
8767
8797
|
checkedRowIds,
|
|
@@ -8788,7 +8818,7 @@ var Table = (0, import_react17.forwardRef)((originalProps, ref) => {
|
|
|
8788
8818
|
onRowClick == null ? void 0 : onRowClick(row, index, event);
|
|
8789
8819
|
};
|
|
8790
8820
|
const getCheckedRowData = (checked) => rows.filter((row) => checked.has(row.id));
|
|
8791
|
-
const slots = (0,
|
|
8821
|
+
const slots = (0, import_react18.useMemo)(
|
|
8792
8822
|
() => tableStyle({ ...variantProps, rowClickable: typeof onRowClick === "function" }),
|
|
8793
8823
|
[variantProps, onRowClick]
|
|
8794
8824
|
);
|
|
@@ -9107,7 +9137,7 @@ var getCellStyle = (column) => {
|
|
|
9107
9137
|
};
|
|
9108
9138
|
|
|
9109
9139
|
// src/components/table/definition-table.tsx
|
|
9110
|
-
var
|
|
9140
|
+
var import_react19 = require("react");
|
|
9111
9141
|
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
9112
9142
|
var DEFAULT_CELL_CLASSES = "px-[10px] py-[8px] text-md border-r border-neutral-light h-[50px]";
|
|
9113
9143
|
var FIRST_CELL_WIDTH_CLASS = "w-[120px] font-bold text-md text-body-foreground";
|
|
@@ -9200,10 +9230,10 @@ var DefinitionTableRow = ({
|
|
|
9200
9230
|
colIndex
|
|
9201
9231
|
);
|
|
9202
9232
|
}) });
|
|
9203
|
-
var DefinitionTable = (0,
|
|
9233
|
+
var DefinitionTable = (0, import_react19.forwardRef)(
|
|
9204
9234
|
({ rows = [], footer, highlightColumnKey, classNames }, ref) => {
|
|
9205
|
-
const slots = (0,
|
|
9206
|
-
const highlightColumnIndex = (0,
|
|
9235
|
+
const slots = (0, import_react19.useMemo)(() => DefinitionTableStyle(), []);
|
|
9236
|
+
const highlightColumnIndex = (0, import_react19.useMemo)(
|
|
9207
9237
|
() => getHighlightColumnIndex(rows, highlightColumnKey),
|
|
9208
9238
|
[rows, highlightColumnKey]
|
|
9209
9239
|
);
|
|
@@ -9236,10 +9266,10 @@ var DefinitionTableStyle = tv({
|
|
|
9236
9266
|
});
|
|
9237
9267
|
|
|
9238
9268
|
// src/components/select/select.tsx
|
|
9239
|
-
var
|
|
9269
|
+
var import_react20 = require("react");
|
|
9240
9270
|
var import_react_dom = require("react-dom");
|
|
9241
9271
|
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
9242
|
-
var Select = (0,
|
|
9272
|
+
var Select = (0, import_react20.forwardRef)((originalProps, ref) => {
|
|
9243
9273
|
var _a, _b;
|
|
9244
9274
|
const [props, variantProps] = mapPropsVariants(originalProps, select.variantKeys);
|
|
9245
9275
|
const {
|
|
@@ -9256,14 +9286,14 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
|
|
|
9256
9286
|
optionIconPlacement,
|
|
9257
9287
|
...inputProps
|
|
9258
9288
|
} = props;
|
|
9259
|
-
const slots = (0,
|
|
9260
|
-
const [selectedOptions, setSelectedOptions] = (0,
|
|
9261
|
-
const [targetRect, setTargetRect] = (0,
|
|
9262
|
-
const [optionWrapperHeight, setOptionWrapperHeight] = (0,
|
|
9263
|
-
const [isVisible, setIsVisible] = (0,
|
|
9264
|
-
const [isOpen, setIsOpen] = (0,
|
|
9265
|
-
const selectWrapperRef = (0,
|
|
9266
|
-
const optionWrapperRef = (0,
|
|
9289
|
+
const slots = (0, import_react20.useMemo)(() => select({ ...variantProps }), [variantProps]);
|
|
9290
|
+
const [selectedOptions, setSelectedOptions] = (0, import_react20.useState)(defaultSelectedOptions || []);
|
|
9291
|
+
const [targetRect, setTargetRect] = (0, import_react20.useState)(null);
|
|
9292
|
+
const [optionWrapperHeight, setOptionWrapperHeight] = (0, import_react20.useState)(0);
|
|
9293
|
+
const [isVisible, setIsVisible] = (0, import_react20.useState)(false);
|
|
9294
|
+
const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
|
|
9295
|
+
const selectWrapperRef = (0, import_react20.useRef)(null);
|
|
9296
|
+
const optionWrapperRef = (0, import_react20.useRef)(null);
|
|
9267
9297
|
const isControlled = originalProps.value !== void 0;
|
|
9268
9298
|
const openSelect = () => {
|
|
9269
9299
|
if (selectWrapperRef.current) {
|
|
@@ -9303,7 +9333,7 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
|
|
|
9303
9333
|
setSelectedOptions(nextOptions);
|
|
9304
9334
|
onChange == null ? void 0 : onChange(nextOptions);
|
|
9305
9335
|
};
|
|
9306
|
-
(0,
|
|
9336
|
+
(0, import_react20.useEffect)(() => {
|
|
9307
9337
|
const handleClickOutside = (e) => {
|
|
9308
9338
|
var _a2;
|
|
9309
9339
|
const target = e.target;
|
|
@@ -9314,12 +9344,12 @@ var Select = (0, import_react19.forwardRef)((originalProps, ref) => {
|
|
|
9314
9344
|
window.addEventListener("mousedown", handleClickOutside);
|
|
9315
9345
|
return () => window.removeEventListener("mousedown", handleClickOutside);
|
|
9316
9346
|
}, []);
|
|
9317
|
-
(0,
|
|
9347
|
+
(0, import_react20.useEffect)(() => {
|
|
9318
9348
|
if (optionWrapperRef.current) {
|
|
9319
9349
|
setOptionWrapperHeight(optionWrapperRef.current.getBoundingClientRect().height);
|
|
9320
9350
|
}
|
|
9321
9351
|
}, [targetRect]);
|
|
9322
|
-
(0,
|
|
9352
|
+
(0, import_react20.useEffect)(() => {
|
|
9323
9353
|
if (isControlled) {
|
|
9324
9354
|
const valueArray = Array.isArray(originalProps.value) ? originalProps.value : [originalProps.value];
|
|
9325
9355
|
const matched = options.filter((opt) => valueArray.includes(opt.value));
|
|
@@ -9689,14 +9719,14 @@ var select = tv({
|
|
|
9689
9719
|
});
|
|
9690
9720
|
|
|
9691
9721
|
// src/components/chip/chip.tsx
|
|
9692
|
-
var
|
|
9722
|
+
var import_react21 = require("react");
|
|
9693
9723
|
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
9694
|
-
var Chip = (0,
|
|
9724
|
+
var Chip = (0, import_react21.forwardRef)((originalProps, ref) => {
|
|
9695
9725
|
var _a;
|
|
9696
9726
|
const [rawProps, variantProps] = mapPropsVariants(originalProps, chipStyle.variantKeys);
|
|
9697
9727
|
const props = { ...rawProps, ...variantProps };
|
|
9698
9728
|
const Component = props.onClick ? "button" : "div";
|
|
9699
|
-
const slots = (0,
|
|
9729
|
+
const slots = (0, import_react21.useMemo)(() => chipStyle({ ...variantProps }), [variantProps]);
|
|
9700
9730
|
const renderIcon = (name) => name ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon_default, { name, fill: true, size: props.size, className: slots.icon() }) : null;
|
|
9701
9731
|
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
9702
9732
|
Component,
|
|
@@ -9874,12 +9904,12 @@ var chipStyle = tv({
|
|
|
9874
9904
|
});
|
|
9875
9905
|
|
|
9876
9906
|
// src/components/radio/radio.tsx
|
|
9877
|
-
var
|
|
9907
|
+
var import_react22 = require("react");
|
|
9878
9908
|
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
9879
|
-
var Radio = (0,
|
|
9909
|
+
var Radio = (0, import_react22.forwardRef)((originalProps, ref) => {
|
|
9880
9910
|
const [props, variantProps] = mapPropsVariants(originalProps, radioStyle.variantKeys);
|
|
9881
9911
|
const { children, classNames, labelPosition = "end", ...inputProps } = props;
|
|
9882
|
-
const slots = (0,
|
|
9912
|
+
const slots = (0, import_react22.useMemo)(() => radioStyle({ ...variantProps }), [variantProps]);
|
|
9883
9913
|
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
9884
9914
|
"label",
|
|
9885
9915
|
{
|
|
@@ -10044,16 +10074,16 @@ var radioStyle = tv({
|
|
|
10044
10074
|
});
|
|
10045
10075
|
|
|
10046
10076
|
// src/components/switch/switch.tsx
|
|
10047
|
-
var
|
|
10077
|
+
var import_react23 = require("react");
|
|
10048
10078
|
var import_tailwind_variants22 = require("tailwind-variants");
|
|
10049
10079
|
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
10050
|
-
var Switch = (0,
|
|
10080
|
+
var Switch = (0, import_react23.forwardRef)((originalProps, ref) => {
|
|
10051
10081
|
const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
|
|
10052
10082
|
const { size, color, disabled, disableAnimation, id, checked, onChange, classNames, ...inputProps } = {
|
|
10053
10083
|
...rawProps,
|
|
10054
10084
|
...variantProps
|
|
10055
10085
|
};
|
|
10056
|
-
const slots = (0,
|
|
10086
|
+
const slots = (0, import_react23.useMemo)(() => switchStyle({ ...variantProps }), [variantProps]);
|
|
10057
10087
|
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
|
|
10058
10088
|
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
10059
10089
|
"input",
|
|
@@ -10178,7 +10208,7 @@ var switchStyle = (0, import_tailwind_variants22.tv)({
|
|
|
10178
10208
|
});
|
|
10179
10209
|
|
|
10180
10210
|
// src/components/tooltip/tooltip.tsx
|
|
10181
|
-
var
|
|
10211
|
+
var import_react25 = require("react");
|
|
10182
10212
|
var import_react_dom2 = require("react-dom");
|
|
10183
10213
|
|
|
10184
10214
|
// src/components/tooltip/tooltip-utils.ts
|
|
@@ -10301,11 +10331,11 @@ var getTailStyles = (placement) => {
|
|
|
10301
10331
|
};
|
|
10302
10332
|
|
|
10303
10333
|
// src/components/tooltip/useTooltip.ts
|
|
10304
|
-
var
|
|
10334
|
+
var import_react24 = require("react");
|
|
10305
10335
|
var useTooltip = ({ placement, offset, targetRect }) => {
|
|
10306
|
-
const [tooltipPosition, setTooltipPosition] = (0,
|
|
10307
|
-
const tooltipRef = (0,
|
|
10308
|
-
(0,
|
|
10336
|
+
const [tooltipPosition, setTooltipPosition] = (0, import_react24.useState)({ x: 0, y: 0 });
|
|
10337
|
+
const tooltipRef = (0, import_react24.useRef)(null);
|
|
10338
|
+
(0, import_react24.useEffect)(() => {
|
|
10309
10339
|
if (targetRect && tooltipRef.current) {
|
|
10310
10340
|
const { width, height } = tooltipRef.current.getBoundingClientRect();
|
|
10311
10341
|
const scrollX = window.scrollX;
|
|
@@ -10336,28 +10366,28 @@ var useTooltip = ({ placement, offset, targetRect }) => {
|
|
|
10336
10366
|
|
|
10337
10367
|
// src/components/tooltip/tooltip.tsx
|
|
10338
10368
|
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
10339
|
-
var Tooltip = (0,
|
|
10369
|
+
var Tooltip = (0, import_react25.forwardRef)((originalProps, ref) => {
|
|
10340
10370
|
const [props, variantProps] = mapPropsVariants(originalProps, tooltipStyle.variantKeys);
|
|
10341
10371
|
const { placement = "top", offset = 5, delay = 100, persistent = false, classNames, noTouchContent } = props;
|
|
10342
|
-
const slots = (0,
|
|
10343
|
-
const [targetRect, setTargetRect] = (0,
|
|
10372
|
+
const slots = (0, import_react25.useMemo)(() => tooltipStyle({ ...variantProps }), [variantProps]);
|
|
10373
|
+
const [targetRect, setTargetRect] = (0, import_react25.useState)(null);
|
|
10344
10374
|
const { tooltipPosition, tooltipRef } = useTooltip({
|
|
10345
10375
|
placement,
|
|
10346
10376
|
offset,
|
|
10347
10377
|
delay,
|
|
10348
10378
|
targetRect
|
|
10349
10379
|
});
|
|
10350
|
-
const childrenRef = (0,
|
|
10351
|
-
const delayTimeoutRef = (0,
|
|
10352
|
-
const getProps = (0,
|
|
10380
|
+
const childrenRef = (0, import_react25.useRef)(null);
|
|
10381
|
+
const delayTimeoutRef = (0, import_react25.useRef)(null);
|
|
10382
|
+
const getProps = (0, import_react25.useCallback)(
|
|
10353
10383
|
(slotKey, classNameKey) => ({
|
|
10354
10384
|
className: slots[slotKey]({ class: classNames == null ? void 0 : classNames[classNameKey] })
|
|
10355
10385
|
}),
|
|
10356
10386
|
[slots, classNames]
|
|
10357
10387
|
);
|
|
10358
|
-
const getBaseProps = (0,
|
|
10359
|
-
const getContentProps = (0,
|
|
10360
|
-
const showTooltip = (0,
|
|
10388
|
+
const getBaseProps = (0, import_react25.useCallback)(() => getProps("base", "base"), [getProps]);
|
|
10389
|
+
const getContentProps = (0, import_react25.useCallback)(() => getProps("content", "content"), [getProps]);
|
|
10390
|
+
const showTooltip = (0, import_react25.useCallback)(() => {
|
|
10361
10391
|
if (childrenRef.current) {
|
|
10362
10392
|
const rect = childrenRef.current.getBoundingClientRect();
|
|
10363
10393
|
setTargetRect({
|
|
@@ -10370,12 +10400,12 @@ var Tooltip = (0, import_react24.forwardRef)((originalProps, ref) => {
|
|
|
10370
10400
|
});
|
|
10371
10401
|
}
|
|
10372
10402
|
}, []);
|
|
10373
|
-
const hideTooltip = (0,
|
|
10403
|
+
const hideTooltip = (0, import_react25.useCallback)(() => {
|
|
10374
10404
|
if (!persistent) {
|
|
10375
10405
|
delayTimeoutRef.current = window.setTimeout(() => setTargetRect(null), delay);
|
|
10376
10406
|
}
|
|
10377
10407
|
}, [persistent, delay]);
|
|
10378
|
-
(0,
|
|
10408
|
+
(0, import_react25.useEffect)(() => {
|
|
10379
10409
|
if (persistent) showTooltip();
|
|
10380
10410
|
}, [persistent, showTooltip]);
|
|
10381
10411
|
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
|
|
@@ -10460,10 +10490,10 @@ var tooltipStyle = tv({
|
|
|
10460
10490
|
});
|
|
10461
10491
|
|
|
10462
10492
|
// src/components/modal/modal.tsx
|
|
10463
|
-
var
|
|
10493
|
+
var import_react26 = require("react");
|
|
10464
10494
|
var import_react_dom3 = require("react-dom");
|
|
10465
10495
|
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
10466
|
-
var Modal = (0,
|
|
10496
|
+
var Modal = (0, import_react26.forwardRef)((props, ref) => {
|
|
10467
10497
|
const [localProps, variantProps] = mapPropsVariants(props, modal.variantKeys);
|
|
10468
10498
|
const {
|
|
10469
10499
|
classNames,
|
|
@@ -10478,8 +10508,8 @@ var Modal = (0, import_react25.forwardRef)((props, ref) => {
|
|
|
10478
10508
|
onCancel,
|
|
10479
10509
|
extraFooter
|
|
10480
10510
|
} = localProps;
|
|
10481
|
-
const slots = (0,
|
|
10482
|
-
(0,
|
|
10511
|
+
const slots = (0, import_react26.useMemo)(() => modal(variantProps), [variantProps]);
|
|
10512
|
+
(0, import_react26.useEffect)(() => {
|
|
10483
10513
|
document.body.classList.toggle("overflow-hidden", !!isOpen);
|
|
10484
10514
|
if (!isOpen || isKeyboardDismissDisabled) return;
|
|
10485
10515
|
const handleKeyDown = (e) => {
|
|
@@ -10581,18 +10611,18 @@ var modal = tv({
|
|
|
10581
10611
|
});
|
|
10582
10612
|
|
|
10583
10613
|
// src/components/drawer/drawer.tsx
|
|
10584
|
-
var
|
|
10614
|
+
var import_react27 = require("react");
|
|
10585
10615
|
var import_react_dom4 = require("react-dom");
|
|
10586
10616
|
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
10587
|
-
var Drawer = (0,
|
|
10617
|
+
var Drawer = (0, import_react27.forwardRef)((props, ref) => {
|
|
10588
10618
|
const [localProps, variantProps] = mapPropsVariants(props, drawer.variantKeys);
|
|
10589
10619
|
const { classNames, isOpen, content, isKeyboardDismissDisabled = false, onClose, backdrop = true } = localProps;
|
|
10590
10620
|
const position = props.position || "right";
|
|
10591
|
-
const [shouldRender, setShouldRender] = (0,
|
|
10592
|
-
const [isAnimating, setIsAnimating] = (0,
|
|
10593
|
-
const [isContentAnimating, setIsContentAnimating] = (0,
|
|
10594
|
-
const slots = (0,
|
|
10595
|
-
(0,
|
|
10621
|
+
const [shouldRender, setShouldRender] = (0, import_react27.useState)(isOpen);
|
|
10622
|
+
const [isAnimating, setIsAnimating] = (0, import_react27.useState)(isOpen);
|
|
10623
|
+
const [isContentAnimating, setIsContentAnimating] = (0, import_react27.useState)(isOpen);
|
|
10624
|
+
const slots = (0, import_react27.useMemo)(() => drawer(variantProps), [variantProps]);
|
|
10625
|
+
(0, import_react27.useEffect)(() => {
|
|
10596
10626
|
if (isOpen) {
|
|
10597
10627
|
setShouldRender(true);
|
|
10598
10628
|
requestAnimationFrame(() => {
|
|
@@ -10610,7 +10640,7 @@ var Drawer = (0, import_react26.forwardRef)((props, ref) => {
|
|
|
10610
10640
|
return () => clearTimeout(timer);
|
|
10611
10641
|
}
|
|
10612
10642
|
}, [isOpen]);
|
|
10613
|
-
(0,
|
|
10643
|
+
(0, import_react27.useEffect)(() => {
|
|
10614
10644
|
if (shouldRender) {
|
|
10615
10645
|
document.body.classList.add("overflow-hidden");
|
|
10616
10646
|
} else {
|
|
@@ -10741,15 +10771,15 @@ var drawer = tv({
|
|
|
10741
10771
|
var drawer_default = Drawer;
|
|
10742
10772
|
|
|
10743
10773
|
// src/components/list/list.tsx
|
|
10744
|
-
var
|
|
10774
|
+
var import_react28 = require("react");
|
|
10745
10775
|
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
10746
|
-
var List = (0,
|
|
10776
|
+
var List = (0, import_react28.forwardRef)((originalProps, ref) => {
|
|
10747
10777
|
const [props, variantProps] = mapPropsVariants(originalProps, listStyle.variantKeys);
|
|
10748
10778
|
const { children, classNames } = props;
|
|
10749
|
-
const slots = (0,
|
|
10750
|
-
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children:
|
|
10751
|
-
if (!(0,
|
|
10752
|
-
return (0,
|
|
10779
|
+
const slots = (0, import_react28.useMemo)(() => listStyle(variantProps), [variantProps]);
|
|
10780
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: import_react28.Children.map(children, (child) => {
|
|
10781
|
+
if (!(0, import_react28.isValidElement)(child)) return child;
|
|
10782
|
+
return (0, import_react28.cloneElement)(child, {
|
|
10753
10783
|
...variantProps,
|
|
10754
10784
|
...child.props
|
|
10755
10785
|
});
|
|
@@ -10786,9 +10816,9 @@ var listStyle = tv({
|
|
|
10786
10816
|
});
|
|
10787
10817
|
|
|
10788
10818
|
// src/components/list/listItem.tsx
|
|
10789
|
-
var
|
|
10819
|
+
var import_react29 = require("react");
|
|
10790
10820
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
10791
|
-
var ListItem = (0,
|
|
10821
|
+
var ListItem = (0, import_react29.forwardRef)((props, ref) => {
|
|
10792
10822
|
const [rawProps, variantProps] = mapPropsVariants(props, listItemStyle.variantKeys);
|
|
10793
10823
|
const {
|
|
10794
10824
|
title,
|
|
@@ -10800,7 +10830,7 @@ var ListItem = (0, import_react28.forwardRef)((props, ref) => {
|
|
|
10800
10830
|
classNames,
|
|
10801
10831
|
onClick
|
|
10802
10832
|
} = { ...rawProps, ...variantProps };
|
|
10803
|
-
const slots = (0,
|
|
10833
|
+
const slots = (0, import_react29.useMemo)(() => listItemStyle(variantProps), [variantProps]);
|
|
10804
10834
|
const iconSize = ["lg", "xl"].includes(size) ? "lg" : "md";
|
|
10805
10835
|
const avatarSize = iconSize;
|
|
10806
10836
|
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), "data-selected": selected, onClick, children: [
|
|
@@ -10980,9 +11010,9 @@ var listItemStyle = tv({
|
|
|
10980
11010
|
});
|
|
10981
11011
|
|
|
10982
11012
|
// src/components/toast/toast.tsx
|
|
10983
|
-
var
|
|
11013
|
+
var import_react30 = require("react");
|
|
10984
11014
|
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
10985
|
-
var Toast = (0,
|
|
11015
|
+
var Toast = (0, import_react30.forwardRef)((originalProps, ref) => {
|
|
10986
11016
|
const [props, variantProps] = mapPropsVariants(originalProps, toast.variantKeys);
|
|
10987
11017
|
const {
|
|
10988
11018
|
title,
|
|
@@ -10996,9 +11026,9 @@ var Toast = (0, import_react29.forwardRef)((originalProps, ref) => {
|
|
|
10996
11026
|
disableAnimation,
|
|
10997
11027
|
onClose
|
|
10998
11028
|
} = { ...props, ...variantProps };
|
|
10999
|
-
const slots = (0,
|
|
11000
|
-
const toastRef = (0,
|
|
11001
|
-
(0,
|
|
11029
|
+
const slots = (0, import_react30.useMemo)(() => toast({ ...variantProps }), [variantProps]);
|
|
11030
|
+
const toastRef = (0, import_react30.useRef)(null);
|
|
11031
|
+
(0, import_react30.useImperativeHandle)(
|
|
11002
11032
|
ref,
|
|
11003
11033
|
() => ({
|
|
11004
11034
|
getWidth: () => {
|
|
@@ -11131,7 +11161,7 @@ var toast = tv({
|
|
|
11131
11161
|
});
|
|
11132
11162
|
|
|
11133
11163
|
// src/components/toast/use-toast.tsx
|
|
11134
|
-
var
|
|
11164
|
+
var import_react31 = require("react");
|
|
11135
11165
|
|
|
11136
11166
|
// src/components/toast/toast-utils.ts
|
|
11137
11167
|
var getToastPosition = (placement, width, offset) => {
|
|
@@ -11171,9 +11201,9 @@ var getToastPosition = (placement, width, offset) => {
|
|
|
11171
11201
|
|
|
11172
11202
|
// src/components/toast/use-toast.tsx
|
|
11173
11203
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
11174
|
-
var ToastContext = (0,
|
|
11204
|
+
var ToastContext = (0, import_react31.createContext)(null);
|
|
11175
11205
|
var useToast = () => {
|
|
11176
|
-
const context = (0,
|
|
11206
|
+
const context = (0, import_react31.useContext)(ToastContext);
|
|
11177
11207
|
if (!context) {
|
|
11178
11208
|
throw new Error("useToast must be used within a ToastProvider");
|
|
11179
11209
|
}
|
|
@@ -11183,10 +11213,10 @@ var ToastProvider = ({
|
|
|
11183
11213
|
globalOptions,
|
|
11184
11214
|
children
|
|
11185
11215
|
}) => {
|
|
11186
|
-
const [toasts, setToasts] = (0,
|
|
11187
|
-
const [containerStyle, setContainerStyle] = (0,
|
|
11188
|
-
const toastRef = (0,
|
|
11189
|
-
const addToast = (0,
|
|
11216
|
+
const [toasts, setToasts] = (0, import_react31.useState)([]);
|
|
11217
|
+
const [containerStyle, setContainerStyle] = (0, import_react31.useState)({});
|
|
11218
|
+
const toastRef = (0, import_react31.useRef)(null);
|
|
11219
|
+
const addToast = (0, import_react31.useCallback)(
|
|
11190
11220
|
(title, options = {}) => {
|
|
11191
11221
|
const id = Date.now() + Math.floor(Math.random() * 1e5);
|
|
11192
11222
|
const newToast = {
|
|
@@ -11203,11 +11233,11 @@ var ToastProvider = ({
|
|
|
11203
11233
|
},
|
|
11204
11234
|
[globalOptions]
|
|
11205
11235
|
);
|
|
11206
|
-
const removeToast = (0,
|
|
11236
|
+
const removeToast = (0, import_react31.useCallback)((id) => {
|
|
11207
11237
|
setToasts((prevToasts) => prevToasts.filter((toast2) => toast2.id !== id));
|
|
11208
11238
|
}, []);
|
|
11209
11239
|
const contextValue = addToast;
|
|
11210
|
-
(0,
|
|
11240
|
+
(0, import_react31.useEffect)(() => {
|
|
11211
11241
|
var _a;
|
|
11212
11242
|
const width = (globalOptions == null ? void 0 : globalOptions.width) ? globalOptions.width : typeof ((_a = toastRef.current) == null ? void 0 : _a.getWidth) === "function" ? toastRef.current.getWidth() : 300;
|
|
11213
11243
|
const offset = 20;
|
|
@@ -11228,12 +11258,12 @@ var ToastProvider = ({
|
|
|
11228
11258
|
};
|
|
11229
11259
|
|
|
11230
11260
|
// src/components/picker/day.tsx
|
|
11231
|
-
var
|
|
11261
|
+
var import_react32 = require("react");
|
|
11232
11262
|
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
11233
|
-
var Day = (0,
|
|
11263
|
+
var Day = (0, import_react32.forwardRef)((originalProps, ref) => {
|
|
11234
11264
|
const [props, variantProps] = mapPropsVariants(originalProps, dayStyle.variantKeys);
|
|
11235
11265
|
const { classNames, children, ...divProps } = props;
|
|
11236
|
-
const slots = (0,
|
|
11266
|
+
const slots = (0, import_react32.useMemo)(() => dayStyle({ ...variantProps }), [variantProps]);
|
|
11237
11267
|
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ...divProps, children });
|
|
11238
11268
|
});
|
|
11239
11269
|
Day.displayName = "Day";
|
|
@@ -11270,7 +11300,7 @@ var dayStyle = tv({
|
|
|
11270
11300
|
});
|
|
11271
11301
|
|
|
11272
11302
|
// src/components/picker/datePicker.tsx
|
|
11273
|
-
var
|
|
11303
|
+
var import_react33 = require("react");
|
|
11274
11304
|
var import_react_dom5 = require("react-dom");
|
|
11275
11305
|
|
|
11276
11306
|
// src/components/picker/utils.ts
|
|
@@ -11287,7 +11317,7 @@ var formatStringToDate = (date) => {
|
|
|
11287
11317
|
|
|
11288
11318
|
// src/components/picker/datePicker.tsx
|
|
11289
11319
|
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
11290
|
-
var DatePicker = (0,
|
|
11320
|
+
var DatePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
|
|
11291
11321
|
const [props, variantProps] = mapPropsVariants(originalProps, datePickerStyle.variantKeys);
|
|
11292
11322
|
const {
|
|
11293
11323
|
classNames,
|
|
@@ -11314,26 +11344,26 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
|
|
|
11314
11344
|
dualCalendar = false,
|
|
11315
11345
|
...inputProps
|
|
11316
11346
|
} = { ...props, ...variantProps };
|
|
11317
|
-
const [selectedDate, setSelectedDate] = (0,
|
|
11318
|
-
const [selectedRange, setSelectedRange] = (0,
|
|
11347
|
+
const [selectedDate, setSelectedDate] = (0, import_react33.useState)(range ? "" : typeof value === "string" ? value || "" : "");
|
|
11348
|
+
const [selectedRange, setSelectedRange] = (0, import_react33.useState)({
|
|
11319
11349
|
startDate: range && typeof value === "object" ? (value == null ? void 0 : value.startDate) || "" : "",
|
|
11320
11350
|
endDate: range && typeof value === "object" ? (value == null ? void 0 : value.endDate) || "" : ""
|
|
11321
11351
|
});
|
|
11322
|
-
const [tempSelectedDate, setTempSelectedDate] = (0,
|
|
11323
|
-
const [tempSelectedRange, setTempSelectedRange] = (0,
|
|
11324
|
-
const [rangeSelection, setRangeSelection] = (0,
|
|
11325
|
-
const [isPanelOpen, setIsPanelOpen] = (0,
|
|
11326
|
-
const [leftCurrentDate, setLeftCurrentDate] = (0,
|
|
11352
|
+
const [tempSelectedDate, setTempSelectedDate] = (0, import_react33.useState)(selectedDate);
|
|
11353
|
+
const [tempSelectedRange, setTempSelectedRange] = (0, import_react33.useState)(selectedRange);
|
|
11354
|
+
const [rangeSelection, setRangeSelection] = (0, import_react33.useState)("start");
|
|
11355
|
+
const [isPanelOpen, setIsPanelOpen] = (0, import_react33.useState)(false);
|
|
11356
|
+
const [leftCurrentDate, setLeftCurrentDate] = (0, import_react33.useState)(
|
|
11327
11357
|
range && tempSelectedRange.startDate ? new Date(tempSelectedRange.startDate) : tempSelectedDate ? new Date(tempSelectedDate) : /* @__PURE__ */ new Date()
|
|
11328
11358
|
);
|
|
11329
|
-
const [rightCurrentDate, setRightCurrentDate] = (0,
|
|
11359
|
+
const [rightCurrentDate, setRightCurrentDate] = (0, import_react33.useState)(
|
|
11330
11360
|
dualCalendar ? new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1) : /* @__PURE__ */ new Date()
|
|
11331
11361
|
);
|
|
11332
|
-
const inputWrapperRef = (0,
|
|
11333
|
-
const calendarWrapperRef = (0,
|
|
11334
|
-
const [panelPos, setPanelPos] = (0,
|
|
11335
|
-
const blurTimeoutRef = (0,
|
|
11336
|
-
const isConfirmDisabled = (0,
|
|
11362
|
+
const inputWrapperRef = (0, import_react33.useRef)(null);
|
|
11363
|
+
const calendarWrapperRef = (0, import_react33.useRef)(null);
|
|
11364
|
+
const [panelPos, setPanelPos] = (0, import_react33.useState)({ top: -9999, left: -9999 });
|
|
11365
|
+
const blurTimeoutRef = (0, import_react33.useRef)(null);
|
|
11366
|
+
const isConfirmDisabled = (0, import_react33.useMemo)(() => {
|
|
11337
11367
|
if (range) {
|
|
11338
11368
|
const hasStart = !!tempSelectedRange.startDate;
|
|
11339
11369
|
const hasEnd = !!tempSelectedRange.endDate;
|
|
@@ -11353,7 +11383,7 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
|
|
|
11353
11383
|
return dateString;
|
|
11354
11384
|
}
|
|
11355
11385
|
};
|
|
11356
|
-
const displayValue = (0,
|
|
11386
|
+
const displayValue = (0, import_react33.useMemo)(() => {
|
|
11357
11387
|
if (range) {
|
|
11358
11388
|
const start = formatDate(selectedRange.startDate);
|
|
11359
11389
|
const end = formatDate(selectedRange.endDate);
|
|
@@ -11363,7 +11393,7 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
|
|
|
11363
11393
|
}
|
|
11364
11394
|
return formatDate(selectedDate);
|
|
11365
11395
|
}, [selectedDate, selectedRange, format, range]);
|
|
11366
|
-
const calculatePosition = (0,
|
|
11396
|
+
const calculatePosition = (0, import_react33.useCallback)(() => {
|
|
11367
11397
|
if (inputWrapperRef.current) {
|
|
11368
11398
|
const rect = inputWrapperRef.current.getBoundingClientRect();
|
|
11369
11399
|
setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
|
|
@@ -11406,7 +11436,7 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
|
|
|
11406
11436
|
e.preventDefault();
|
|
11407
11437
|
if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
|
|
11408
11438
|
};
|
|
11409
|
-
const getCalendarDates = (0,
|
|
11439
|
+
const getCalendarDates = (0, import_react33.useCallback)((currentDate) => {
|
|
11410
11440
|
const year = currentDate.getFullYear();
|
|
11411
11441
|
const month = currentDate.getMonth();
|
|
11412
11442
|
const firstDayOfMonth = new Date(year, month, 1).getDay();
|
|
@@ -11502,7 +11532,7 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
|
|
|
11502
11532
|
}
|
|
11503
11533
|
setIsPanelOpen(false);
|
|
11504
11534
|
};
|
|
11505
|
-
const getDayProps = (0,
|
|
11535
|
+
const getDayProps = (0, import_react33.useCallback)(
|
|
11506
11536
|
(dateObj, currentDate) => {
|
|
11507
11537
|
const today = /* @__PURE__ */ new Date();
|
|
11508
11538
|
const isToday = today.getDate() === dateObj.date && today.getMonth() === currentDate.getMonth() && today.getFullYear() === currentDate.getFullYear();
|
|
@@ -11529,7 +11559,7 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
|
|
|
11529
11559
|
const getPlaceholderText = () => {
|
|
11530
11560
|
return placeholder;
|
|
11531
11561
|
};
|
|
11532
|
-
(0,
|
|
11562
|
+
(0, import_react33.useEffect)(() => {
|
|
11533
11563
|
if (range && typeof value === "object") {
|
|
11534
11564
|
setSelectedRange(value || { startDate: "", endDate: "" });
|
|
11535
11565
|
setTempSelectedRange(value || { startDate: "", endDate: "" });
|
|
@@ -11540,12 +11570,12 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
|
|
|
11540
11570
|
if (value) setLeftCurrentDate(new Date(value));
|
|
11541
11571
|
}
|
|
11542
11572
|
}, [value, range]);
|
|
11543
|
-
(0,
|
|
11573
|
+
(0, import_react33.useEffect)(() => {
|
|
11544
11574
|
if (dualCalendar) {
|
|
11545
11575
|
setRightCurrentDate(new Date(leftCurrentDate.getFullYear(), leftCurrentDate.getMonth() + 1));
|
|
11546
11576
|
}
|
|
11547
11577
|
}, [leftCurrentDate, dualCalendar]);
|
|
11548
|
-
const slots = (0,
|
|
11578
|
+
const slots = (0, import_react33.useMemo)(() => datePickerStyle({ ...variantProps, dualCalendar }), [variantProps, dualCalendar]);
|
|
11549
11579
|
const endContent = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon_default, { name: "calendar", size, className: "cursor-pointer", fill: true, onClick: handleCalendarIconClick });
|
|
11550
11580
|
const renderCalendar = (currentDate, isLeft) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-[5px]", children: [
|
|
11551
11581
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: slots.calendarHead({ class: classNames == null ? void 0 : classNames.calendarHead }), children: dualCalendar ? isLeft ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
|
|
@@ -11562,7 +11592,7 @@ var DatePicker = (0, import_react32.forwardRef)((originalProps, ref) => {
|
|
|
11562
11592
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(icon_button_default, { name: "right", variant: "soft", color: "neutral", onClick: handleLeftNextMonth })
|
|
11563
11593
|
] }) }),
|
|
11564
11594
|
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-7", children: daysOfWeek.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(day_default, { variant: "text", children: day }, `${day}-${index}`)) }),
|
|
11565
|
-
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-7 gap-y-[5px] text-center", children: getCalendarDates(currentDate).map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
11595
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "grid grid-cols-7 gap-y-[5px] text-center", children: getCalendarDates(currentDate).map((week, weekIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react33.Fragment, { children: week.map((dateObj, index) => {
|
|
11566
11596
|
const dayVariant = getDayProps(dateObj, currentDate);
|
|
11567
11597
|
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
11568
11598
|
day_default,
|
|
@@ -11710,10 +11740,10 @@ var datePickerStyle = tv({
|
|
|
11710
11740
|
});
|
|
11711
11741
|
|
|
11712
11742
|
// src/components/picker/timePicker.tsx
|
|
11713
|
-
var
|
|
11743
|
+
var import_react34 = require("react");
|
|
11714
11744
|
var import_react_dom6 = require("react-dom");
|
|
11715
11745
|
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
11716
|
-
var TimePicker = (0,
|
|
11746
|
+
var TimePicker = (0, import_react34.forwardRef)((originalProps, ref) => {
|
|
11717
11747
|
const [props, variantProps] = mapPropsVariants(originalProps, timePickerStyle.variantKeys);
|
|
11718
11748
|
const {
|
|
11719
11749
|
classNames,
|
|
@@ -11726,20 +11756,20 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
|
|
|
11726
11756
|
placeholder = "",
|
|
11727
11757
|
...inputProps
|
|
11728
11758
|
} = props;
|
|
11729
|
-
const [selectedRange, setSelectedRange] = (0,
|
|
11759
|
+
const [selectedRange, setSelectedRange] = (0, import_react34.useState)(
|
|
11730
11760
|
valueRange || { start: "", end: "" }
|
|
11731
11761
|
);
|
|
11732
|
-
const [isPanelOpen, setIsPanelOpen] = (0,
|
|
11733
|
-
const inputWrapperRef = (0,
|
|
11734
|
-
const panelWrapperRef = (0,
|
|
11735
|
-
const [panelPos, setPanelPos] = (0,
|
|
11736
|
-
const displayValue = (0,
|
|
11762
|
+
const [isPanelOpen, setIsPanelOpen] = (0, import_react34.useState)(false);
|
|
11763
|
+
const inputWrapperRef = (0, import_react34.useRef)(null);
|
|
11764
|
+
const panelWrapperRef = (0, import_react34.useRef)(null);
|
|
11765
|
+
const [panelPos, setPanelPos] = (0, import_react34.useState)({ top: -9999, left: -9999 });
|
|
11766
|
+
const displayValue = (0, import_react34.useMemo)(() => {
|
|
11737
11767
|
if (selectedRange.start && selectedRange.end) {
|
|
11738
11768
|
return `${selectedRange.start} ~ ${selectedRange.end}`;
|
|
11739
11769
|
}
|
|
11740
11770
|
return "";
|
|
11741
11771
|
}, [selectedRange]);
|
|
11742
|
-
const calculatePosition = (0,
|
|
11772
|
+
const calculatePosition = (0, import_react34.useCallback)(() => {
|
|
11743
11773
|
if (inputWrapperRef.current) {
|
|
11744
11774
|
const rect = inputWrapperRef.current.getBoundingClientRect();
|
|
11745
11775
|
setPanelPos({ top: rect.bottom + window.scrollY + 6, left: rect.left + window.scrollX });
|
|
@@ -11761,7 +11791,7 @@ var TimePicker = (0, import_react33.forwardRef)((originalProps, ref) => {
|
|
|
11761
11791
|
setIsPanelOpen(false);
|
|
11762
11792
|
}
|
|
11763
11793
|
};
|
|
11764
|
-
const slots = (0,
|
|
11794
|
+
const slots = (0, import_react34.useMemo)(() => timePickerStyle({ ...variantProps }), [variantProps]);
|
|
11765
11795
|
const renderHourOptions = () => {
|
|
11766
11796
|
return Array.from({ length: 24 }, (_, i) => {
|
|
11767
11797
|
const value = String(i).padStart(2, "0");
|
|
@@ -12054,19 +12084,19 @@ var timePickerStyle = tv({
|
|
|
12054
12084
|
});
|
|
12055
12085
|
|
|
12056
12086
|
// src/components/tree/tree.tsx
|
|
12057
|
-
var
|
|
12087
|
+
var import_react35 = require("react");
|
|
12058
12088
|
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
12059
|
-
var TreeNodeItem = (0,
|
|
12089
|
+
var TreeNodeItem = (0, import_react35.forwardRef)(
|
|
12060
12090
|
({ node, depth, fileIcon, selectedName, classNames, onExpand }, ref) => {
|
|
12061
|
-
const [isOpen, setIsOpen] = (0,
|
|
12062
|
-
const [children, setChildren] = (0,
|
|
12063
|
-
const slots = (0,
|
|
12064
|
-
const hasMore = (0,
|
|
12091
|
+
const [isOpen, setIsOpen] = (0, import_react35.useState)(false);
|
|
12092
|
+
const [children, setChildren] = (0, import_react35.useState)(node.children);
|
|
12093
|
+
const slots = (0, import_react35.useMemo)(() => treeStyle(), []);
|
|
12094
|
+
const hasMore = (0, import_react35.useMemo)(() => {
|
|
12065
12095
|
if (node.isLeaf) return false;
|
|
12066
12096
|
if (Array.isArray(children)) return children.length > 0;
|
|
12067
12097
|
return typeof onExpand === "function";
|
|
12068
12098
|
}, [node.isLeaf, children, onExpand]);
|
|
12069
|
-
const toggleOpen = (0,
|
|
12099
|
+
const toggleOpen = (0, import_react35.useCallback)(async () => {
|
|
12070
12100
|
if (!isOpen && !children && onExpand && !node.isLeaf) {
|
|
12071
12101
|
try {
|
|
12072
12102
|
const result = await onExpand(node);
|
|
@@ -12142,7 +12172,7 @@ var TreeNodeItem = (0, import_react34.forwardRef)(
|
|
|
12142
12172
|
);
|
|
12143
12173
|
TreeNodeItem.displayName = "TreeNodeItem";
|
|
12144
12174
|
var Tree = ({ headerContent, group, groupIcon, fileIcon, selectedName, classNames, onExpand }) => {
|
|
12145
|
-
const slots = (0,
|
|
12175
|
+
const slots = (0, import_react35.useMemo)(() => treeStyle(), []);
|
|
12146
12176
|
const handleClick = (e) => {
|
|
12147
12177
|
var _a;
|
|
12148
12178
|
(_a = group.onClick) == null ? void 0 : _a.call(group, e);
|
|
@@ -12210,19 +12240,19 @@ var treeStyle = tv({
|
|
|
12210
12240
|
});
|
|
12211
12241
|
|
|
12212
12242
|
// src/components/fileUpload/fileUpload.tsx
|
|
12213
|
-
var
|
|
12243
|
+
var import_react38 = require("react");
|
|
12214
12244
|
var import_tailwind_variants34 = require("tailwind-variants");
|
|
12215
12245
|
|
|
12216
12246
|
// src/components/progress/progress.tsx
|
|
12217
|
-
var
|
|
12247
|
+
var import_react37 = require("react");
|
|
12218
12248
|
|
|
12219
12249
|
// src/hooks/useIsMounted.ts
|
|
12220
|
-
var
|
|
12250
|
+
var import_react36 = require("react");
|
|
12221
12251
|
function useIsMounted(props = {}) {
|
|
12222
12252
|
const { rerender = false, delay = 0 } = props;
|
|
12223
|
-
const isMountedRef = (0,
|
|
12224
|
-
const [isMounted, setIsMounted] = (0,
|
|
12225
|
-
(0,
|
|
12253
|
+
const isMountedRef = (0, import_react36.useRef)(false);
|
|
12254
|
+
const [isMounted, setIsMounted] = (0, import_react36.useState)(false);
|
|
12255
|
+
(0, import_react36.useEffect)(() => {
|
|
12226
12256
|
isMountedRef.current = true;
|
|
12227
12257
|
let timer = null;
|
|
12228
12258
|
if (rerender) {
|
|
@@ -12244,7 +12274,7 @@ function useIsMounted(props = {}) {
|
|
|
12244
12274
|
}
|
|
12245
12275
|
};
|
|
12246
12276
|
}, [rerender]);
|
|
12247
|
-
return [(0,
|
|
12277
|
+
return [(0, import_react36.useCallback)(() => isMountedRef.current, []), isMounted];
|
|
12248
12278
|
}
|
|
12249
12279
|
|
|
12250
12280
|
// src/components/progress/progress.tsx
|
|
@@ -12258,11 +12288,11 @@ var Progress = (originalProps) => {
|
|
|
12258
12288
|
delay: 100
|
|
12259
12289
|
});
|
|
12260
12290
|
const selfMounted = variantProps.disableAnimation ? true : isMounted;
|
|
12261
|
-
const percentage = (0,
|
|
12291
|
+
const percentage = (0, import_react37.useMemo)(
|
|
12262
12292
|
() => isIndeterminate || !selfMounted ? void 0 : clampPercentage((value - minValue) / (maxValue - minValue) * 100),
|
|
12263
12293
|
[selfMounted, isIndeterminate, value, minValue, maxValue]
|
|
12264
12294
|
);
|
|
12265
|
-
const slots = (0,
|
|
12295
|
+
const slots = (0, import_react37.useMemo)(() => progressStyle({ ...variantProps }), [variantProps]);
|
|
12266
12296
|
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
12267
12297
|
"div",
|
|
12268
12298
|
{
|
|
@@ -12379,13 +12409,13 @@ function FileUpload({
|
|
|
12379
12409
|
classNames,
|
|
12380
12410
|
defaultFile
|
|
12381
12411
|
}) {
|
|
12382
|
-
const fileInputRef = (0,
|
|
12383
|
-
const uploadIntervalRef = (0,
|
|
12384
|
-
const [currentFile, setCurrentFile] = (0,
|
|
12385
|
-
const [uploadProgress, setUploadProgress] = (0,
|
|
12386
|
-
const [message, setMessage] = (0,
|
|
12387
|
-
const [displayFileName, setDisplayFileName] = (0,
|
|
12388
|
-
const [hasUploadedFile, setHasUploadedFile] = (0,
|
|
12412
|
+
const fileInputRef = (0, import_react38.useRef)(null);
|
|
12413
|
+
const uploadIntervalRef = (0, import_react38.useRef)(null);
|
|
12414
|
+
const [currentFile, setCurrentFile] = (0, import_react38.useState)(null);
|
|
12415
|
+
const [uploadProgress, setUploadProgress] = (0, import_react38.useState)(0);
|
|
12416
|
+
const [message, setMessage] = (0, import_react38.useState)(errorMessage);
|
|
12417
|
+
const [displayFileName, setDisplayFileName] = (0, import_react38.useState)(() => (defaultFile == null ? void 0 : defaultFile.name) || "");
|
|
12418
|
+
const [hasUploadedFile, setHasUploadedFile] = (0, import_react38.useState)(false);
|
|
12389
12419
|
const slots = fileUploadStyle();
|
|
12390
12420
|
const handleButtonClick = () => {
|
|
12391
12421
|
var _a;
|
|
@@ -12442,14 +12472,14 @@ function FileUpload({
|
|
|
12442
12472
|
setHasUploadedFile(false);
|
|
12443
12473
|
if (onCancelUpload) onCancelUpload();
|
|
12444
12474
|
};
|
|
12445
|
-
(0,
|
|
12475
|
+
(0, import_react38.useEffect)(() => {
|
|
12446
12476
|
return () => {
|
|
12447
12477
|
if (uploadIntervalRef.current) {
|
|
12448
12478
|
clearInterval(uploadIntervalRef.current);
|
|
12449
12479
|
}
|
|
12450
12480
|
};
|
|
12451
12481
|
}, []);
|
|
12452
|
-
(0,
|
|
12482
|
+
(0, import_react38.useEffect)(() => {
|
|
12453
12483
|
if (errorMessage !== void 0) {
|
|
12454
12484
|
setMessage(errorMessage);
|
|
12455
12485
|
}
|
|
@@ -12583,12 +12613,12 @@ var skeletonStyle = (0, import_tailwind_variants35.tv)({
|
|
|
12583
12613
|
|
|
12584
12614
|
// src/components/charts/circularProgress.tsx
|
|
12585
12615
|
var import_recharts = require("recharts");
|
|
12586
|
-
var
|
|
12616
|
+
var import_react39 = require("react");
|
|
12587
12617
|
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
12588
|
-
var CircularProgress = (0,
|
|
12618
|
+
var CircularProgress = (0, import_react39.forwardRef)((originalProps, ref) => {
|
|
12589
12619
|
const [props, variantProps] = mapPropsVariants(originalProps, circularProgressStyle.variantKeys);
|
|
12590
12620
|
const { label, size = 150, percentage, innerContent, classNames } = { ...props, ...variantProps };
|
|
12591
|
-
const slots = (0,
|
|
12621
|
+
const slots = (0, import_react39.useMemo)(() => circularProgressStyle({ ...variantProps }), [variantProps]);
|
|
12592
12622
|
const data = [
|
|
12593
12623
|
{
|
|
12594
12624
|
name: label,
|
|
@@ -12620,7 +12650,7 @@ var CircularProgress = (0, import_react38.forwardRef)((originalProps, ref) => {
|
|
|
12620
12650
|
const colorValue = originalProps.color;
|
|
12621
12651
|
const colorKey = colorValue || "blue";
|
|
12622
12652
|
const currentGradient = gradientColors[colorKey];
|
|
12623
|
-
const wrappedInnerContent = (0,
|
|
12653
|
+
const wrappedInnerContent = (0, import_react39.useMemo)(() => {
|
|
12624
12654
|
return wrapSpanWithClass(innerContent);
|
|
12625
12655
|
}, [innerContent]);
|
|
12626
12656
|
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
|
|
@@ -12714,16 +12744,16 @@ function wrapSpanWithClass(node) {
|
|
|
12714
12744
|
if (Array.isArray(node)) {
|
|
12715
12745
|
return node.map(wrapSpanWithClass);
|
|
12716
12746
|
}
|
|
12717
|
-
if ((0,
|
|
12747
|
+
if ((0, import_react39.isValidElement)(node)) {
|
|
12718
12748
|
const element = node;
|
|
12719
12749
|
if (element.type === "span") {
|
|
12720
12750
|
const existing = (_a = element.props.className) != null ? _a : "";
|
|
12721
|
-
return (0,
|
|
12751
|
+
return (0, import_react39.cloneElement)(element, {
|
|
12722
12752
|
className: `text-xl font-bold ${existing}`.trim()
|
|
12723
12753
|
});
|
|
12724
12754
|
}
|
|
12725
12755
|
if (element.props.children) {
|
|
12726
|
-
return (0,
|
|
12756
|
+
return (0, import_react39.cloneElement)(element, {
|
|
12727
12757
|
children: wrapSpanWithClass(element.props.children)
|
|
12728
12758
|
});
|
|
12729
12759
|
}
|
|
@@ -12733,11 +12763,11 @@ function wrapSpanWithClass(node) {
|
|
|
12733
12763
|
}
|
|
12734
12764
|
|
|
12735
12765
|
// src/components/charts/areaChart.tsx
|
|
12736
|
-
var
|
|
12766
|
+
var import_react40 = require("react");
|
|
12737
12767
|
var import_recharts2 = require("recharts");
|
|
12738
12768
|
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
12739
|
-
var AreaChartComponent = (0,
|
|
12740
|
-
const uniqueId = (0,
|
|
12769
|
+
var AreaChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
|
|
12770
|
+
const uniqueId = (0, import_react40.useId)();
|
|
12741
12771
|
const [props, variantProps] = mapPropsVariants(originalProps, areaChartStyle.variantKeys);
|
|
12742
12772
|
const {
|
|
12743
12773
|
data,
|
|
@@ -12749,26 +12779,26 @@ var AreaChartComponent = (0, import_react39.forwardRef)((originalProps, ref) =>
|
|
|
12749
12779
|
chartHeight = 240,
|
|
12750
12780
|
classNames
|
|
12751
12781
|
} = { ...props, ...variantProps };
|
|
12752
|
-
const slots = (0,
|
|
12782
|
+
const slots = (0, import_react40.useMemo)(() => areaChartStyle({ ...variantProps }), [variantProps]);
|
|
12753
12783
|
const COLOR_MAP = {
|
|
12754
12784
|
primary: "#3F9CF2",
|
|
12755
12785
|
danger: "#FF4684"
|
|
12756
12786
|
};
|
|
12757
|
-
const colorHex = (0,
|
|
12758
|
-
const totalChartWidth = (0,
|
|
12787
|
+
const colorHex = (0, import_react40.useMemo)(() => COLOR_MAP[color], [color]);
|
|
12788
|
+
const totalChartWidth = (0, import_react40.useMemo)(() => {
|
|
12759
12789
|
if (!data || !itemWidth) return void 0;
|
|
12760
12790
|
const dataLength = startFromZero ? data.length + 1 : data.length;
|
|
12761
12791
|
return dataLength * itemWidth;
|
|
12762
12792
|
}, [data, itemWidth, startFromZero]);
|
|
12763
|
-
const needsScroll = (0,
|
|
12793
|
+
const needsScroll = (0, import_react40.useMemo)(() => {
|
|
12764
12794
|
return totalChartWidth;
|
|
12765
12795
|
}, [totalChartWidth]);
|
|
12766
|
-
const processedData = (0,
|
|
12796
|
+
const processedData = (0, import_react40.useMemo)(() => {
|
|
12767
12797
|
if (!data) return [];
|
|
12768
12798
|
return data;
|
|
12769
12799
|
}, [data, startFromZero]);
|
|
12770
|
-
const [tickPositions, setTickPositions] = (0,
|
|
12771
|
-
const tickRef = (0,
|
|
12800
|
+
const [tickPositions, setTickPositions] = (0, import_react40.useState)([]);
|
|
12801
|
+
const tickRef = (0, import_react40.useRef)([]);
|
|
12772
12802
|
const CustomTick = ({ x, y, payload }) => {
|
|
12773
12803
|
if (x !== void 0) {
|
|
12774
12804
|
tickRef.current.push(x);
|
|
@@ -12790,7 +12820,7 @@ var AreaChartComponent = (0, import_react39.forwardRef)((originalProps, ref) =>
|
|
|
12790
12820
|
}
|
|
12791
12821
|
);
|
|
12792
12822
|
};
|
|
12793
|
-
(0,
|
|
12823
|
+
(0, import_react40.useEffect)(() => {
|
|
12794
12824
|
const raf = requestAnimationFrame(() => {
|
|
12795
12825
|
const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
|
|
12796
12826
|
const mids = [];
|
|
@@ -12917,10 +12947,10 @@ var areaChartStyle = tv({
|
|
|
12917
12947
|
});
|
|
12918
12948
|
|
|
12919
12949
|
// src/components/charts/barChart.tsx
|
|
12920
|
-
var
|
|
12950
|
+
var import_react41 = require("react");
|
|
12921
12951
|
var import_recharts3 = require("recharts");
|
|
12922
12952
|
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
12923
|
-
var BarChartComponent = (0,
|
|
12953
|
+
var BarChartComponent = (0, import_react41.forwardRef)((originalProps, ref) => {
|
|
12924
12954
|
const [props, variantProps] = mapPropsVariants(originalProps, barChartStyle.variantKeys);
|
|
12925
12955
|
const {
|
|
12926
12956
|
data = [],
|
|
@@ -12932,13 +12962,13 @@ var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
|
|
|
12932
12962
|
barGap = 20,
|
|
12933
12963
|
tooltipFormatter
|
|
12934
12964
|
} = { ...props, ...variantProps };
|
|
12935
|
-
const slots = (0,
|
|
12936
|
-
const chartRef = (0,
|
|
12937
|
-
const tooltipRef = (0,
|
|
12938
|
-
const [tooltipLeft, setTooltipLeft] = (0,
|
|
12939
|
-
const [tickPositions, setTickPositions] = (0,
|
|
12940
|
-
const tickRef = (0,
|
|
12941
|
-
const [tooltipState, setTooltipState] = (0,
|
|
12965
|
+
const slots = (0, import_react41.useMemo)(() => barChartStyle({ ...variantProps }), [variantProps]);
|
|
12966
|
+
const chartRef = (0, import_react41.useRef)(null);
|
|
12967
|
+
const tooltipRef = (0, import_react41.useRef)(null);
|
|
12968
|
+
const [tooltipLeft, setTooltipLeft] = (0, import_react41.useState)(0);
|
|
12969
|
+
const [tickPositions, setTickPositions] = (0, import_react41.useState)([]);
|
|
12970
|
+
const tickRef = (0, import_react41.useRef)([]);
|
|
12971
|
+
const [tooltipState, setTooltipState] = (0, import_react41.useState)(null);
|
|
12942
12972
|
const handleMouseEnter = (e, dataKey) => {
|
|
12943
12973
|
if (!tooltipFormatter || !chartRef.current) return;
|
|
12944
12974
|
const { payload, x, y } = e;
|
|
@@ -12998,7 +13028,7 @@ var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
|
|
|
12998
13028
|
children: yAxisTickFormatter(payload.value)
|
|
12999
13029
|
}
|
|
13000
13030
|
);
|
|
13001
|
-
(0,
|
|
13031
|
+
(0, import_react41.useEffect)(() => {
|
|
13002
13032
|
const raf = requestAnimationFrame(() => {
|
|
13003
13033
|
const unique = [...new Set(tickRef.current)].sort((a, b) => a - b);
|
|
13004
13034
|
const mids = [];
|
|
@@ -13010,7 +13040,7 @@ var BarChartComponent = (0, import_react40.forwardRef)((originalProps, ref) => {
|
|
|
13010
13040
|
});
|
|
13011
13041
|
return () => cancelAnimationFrame(raf);
|
|
13012
13042
|
}, [data]);
|
|
13013
|
-
(0,
|
|
13043
|
+
(0, import_react41.useLayoutEffect)(() => {
|
|
13014
13044
|
if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
|
|
13015
13045
|
const chartRect = chartRef.current.getBoundingClientRect();
|
|
13016
13046
|
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
@@ -13156,13 +13186,13 @@ function BarChartTooltip({ className = "", children }) {
|
|
|
13156
13186
|
|
|
13157
13187
|
// src/components/charts/radarChart.tsx
|
|
13158
13188
|
var import_recharts4 = require("recharts");
|
|
13159
|
-
var
|
|
13189
|
+
var import_react42 = require("react");
|
|
13160
13190
|
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
13161
|
-
var RadarChart = (0,
|
|
13191
|
+
var RadarChart = (0, import_react42.forwardRef)((originalProps, ref) => {
|
|
13162
13192
|
const [props, variantProps] = mapPropsVariants(originalProps, radarChartStyle.variantKeys);
|
|
13163
13193
|
const { data, label, classNames, tooltipFormatter } = { ...props, ...variantProps };
|
|
13164
|
-
const slots = (0,
|
|
13165
|
-
const normalizedData = (0,
|
|
13194
|
+
const slots = (0, import_react42.useMemo)(() => radarChartStyle({ ...variantProps }), [variantProps]);
|
|
13195
|
+
const normalizedData = (0, import_react42.useMemo)(() => {
|
|
13166
13196
|
if (!data || data.length === 0) return [];
|
|
13167
13197
|
return data.map((item) => ({
|
|
13168
13198
|
...item,
|
|
@@ -13171,18 +13201,18 @@ var RadarChart = (0, import_react41.forwardRef)((originalProps, ref) => {
|
|
|
13171
13201
|
originalFullMark: item.fullMark || 100
|
|
13172
13202
|
}));
|
|
13173
13203
|
}, [data]);
|
|
13174
|
-
const containerHeight = (0,
|
|
13204
|
+
const containerHeight = (0, import_react42.useMemo)(() => {
|
|
13175
13205
|
if (!data || data.length === 0) return 250;
|
|
13176
13206
|
return data.length === 3 ? 245 : 306;
|
|
13177
13207
|
}, [data]);
|
|
13178
|
-
const chartMargin = (0,
|
|
13208
|
+
const chartMargin = (0, import_react42.useMemo)(() => {
|
|
13179
13209
|
return { top: 0, right: 0, bottom: 0, left: 0 };
|
|
13180
13210
|
}, [data]);
|
|
13181
|
-
const outerRadius = (0,
|
|
13211
|
+
const outerRadius = (0, import_react42.useMemo)(() => {
|
|
13182
13212
|
if (!data || data.length === 0) return 125;
|
|
13183
13213
|
return data.length === 3 ? 135 : 125;
|
|
13184
13214
|
}, [data]);
|
|
13185
|
-
const chartCenter = (0,
|
|
13215
|
+
const chartCenter = (0, import_react42.useMemo)(() => {
|
|
13186
13216
|
if (!data || data.length === 0) return {};
|
|
13187
13217
|
if (data.length === 3) return { cx: "50%", cy: "65%" };
|
|
13188
13218
|
return {};
|
|
@@ -13259,10 +13289,10 @@ var radarChartStyle = tv({
|
|
|
13259
13289
|
});
|
|
13260
13290
|
|
|
13261
13291
|
// src/components/charts/simpleBarChart.tsx
|
|
13262
|
-
var
|
|
13292
|
+
var import_react43 = require("react");
|
|
13263
13293
|
var import_recharts5 = require("recharts");
|
|
13264
13294
|
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
13265
|
-
var SimpleBarChartComponent = (0,
|
|
13295
|
+
var SimpleBarChartComponent = (0, import_react43.forwardRef)((originalProps, ref) => {
|
|
13266
13296
|
const [props, variantProps] = mapPropsVariants(originalProps, simpleBarChartStyle.variantKeys);
|
|
13267
13297
|
const {
|
|
13268
13298
|
data = [],
|
|
@@ -13273,13 +13303,13 @@ var SimpleBarChartComponent = (0, import_react42.forwardRef)((originalProps, ref
|
|
|
13273
13303
|
barGap = 20,
|
|
13274
13304
|
tooltipFormatter
|
|
13275
13305
|
} = { ...props, ...variantProps };
|
|
13276
|
-
const slots = (0,
|
|
13277
|
-
const chartRef = (0,
|
|
13278
|
-
const tooltipRef = (0,
|
|
13279
|
-
const [tooltipLeft, setTooltipLeft] = (0,
|
|
13280
|
-
const [tickPositions, setTickPositions] = (0,
|
|
13281
|
-
const [tooltipState, setTooltipState] = (0,
|
|
13282
|
-
(0,
|
|
13306
|
+
const slots = (0, import_react43.useMemo)(() => simpleBarChartStyle({ ...variantProps }), [variantProps]);
|
|
13307
|
+
const chartRef = (0, import_react43.useRef)(null);
|
|
13308
|
+
const tooltipRef = (0, import_react43.useRef)(null);
|
|
13309
|
+
const [tooltipLeft, setTooltipLeft] = (0, import_react43.useState)(0);
|
|
13310
|
+
const [tickPositions, setTickPositions] = (0, import_react43.useState)([]);
|
|
13311
|
+
const [tooltipState, setTooltipState] = (0, import_react43.useState)(null);
|
|
13312
|
+
(0, import_react43.useEffect)(() => {
|
|
13283
13313
|
if (!chartRef.current || !data.length) return;
|
|
13284
13314
|
const updateDimensions = () => {
|
|
13285
13315
|
if (!chartRef.current) return;
|
|
@@ -13353,7 +13383,7 @@ var SimpleBarChartComponent = (0, import_react42.forwardRef)((originalProps, ref
|
|
|
13353
13383
|
}
|
|
13354
13384
|
);
|
|
13355
13385
|
};
|
|
13356
|
-
(0,
|
|
13386
|
+
(0, import_react43.useLayoutEffect)(() => {
|
|
13357
13387
|
if (!tooltipState || !chartRef.current || !tooltipRef.current) return;
|
|
13358
13388
|
const chartRect = chartRef.current.getBoundingClientRect();
|
|
13359
13389
|
const tooltipRect = tooltipRef.current.getBoundingClientRect();
|
|
@@ -13457,9 +13487,9 @@ var simpleBarChartStyle = tv({
|
|
|
13457
13487
|
});
|
|
13458
13488
|
|
|
13459
13489
|
// src/components/starRating/starRating.tsx
|
|
13460
|
-
var
|
|
13490
|
+
var import_react44 = require("react");
|
|
13461
13491
|
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
13462
|
-
var StarRating = (0,
|
|
13492
|
+
var StarRating = (0, import_react44.forwardRef)((originalProps, ref) => {
|
|
13463
13493
|
const [props, variantProps] = mapPropsVariants(originalProps, starRatingStyle.variantKeys);
|
|
13464
13494
|
const {
|
|
13465
13495
|
stars,
|
|
@@ -13472,8 +13502,8 @@ var StarRating = (0, import_react43.forwardRef)((originalProps, ref) => {
|
|
|
13472
13502
|
filledColor = "text-primary-main",
|
|
13473
13503
|
emptyColor = "text-neutral-soft"
|
|
13474
13504
|
} = { ...props, ...variantProps };
|
|
13475
|
-
const slots = (0,
|
|
13476
|
-
const [hoverRating, setHoverRating] = (0,
|
|
13505
|
+
const slots = (0, import_react44.useMemo)(() => starRatingStyle({ ...variantProps }), [variantProps]);
|
|
13506
|
+
const [hoverRating, setHoverRating] = (0, import_react44.useState)(0);
|
|
13477
13507
|
const handleStarClick = (starIndex, isHalf = false) => {
|
|
13478
13508
|
if (readOnly || !onChange) return;
|
|
13479
13509
|
let newRating;
|