@ctlyst.id/internal-ui 4.3.2 → 5.0.1
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/index.d.mts +10 -3
- package/dist/index.d.ts +10 -3
- package/dist/index.js +718 -617
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +155 -55
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
@@ -923,6 +923,83 @@ import { Box as Box11, Checkbox as Checkbox2, Flex as Flex2, Skeleton as Skeleto
|
|
923
923
|
import { css } from "@emotion/react";
|
924
924
|
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
925
925
|
import * as React5 from "react";
|
926
|
+
|
927
|
+
// src/hooks/use-drag-threshold/use-drag-or-click.ts
|
928
|
+
import { useRef } from "react";
|
929
|
+
|
930
|
+
// src/hooks/use-drag-threshold/drag-threshold.ts
|
931
|
+
var DragThreshold = class {
|
932
|
+
constructor() {
|
933
|
+
__publicField(this, "isDrag");
|
934
|
+
__publicField(this, "mouseDown");
|
935
|
+
__publicField(this, "x0");
|
936
|
+
__publicField(this, "y0");
|
937
|
+
/** threshold for dragging behavior in pixel
|
938
|
+
* @type {number}
|
939
|
+
*/
|
940
|
+
__publicField(this, "threshold");
|
941
|
+
this.isDrag = false;
|
942
|
+
this.x0 = 0;
|
943
|
+
this.y0 = 0;
|
944
|
+
this.threshold = 20;
|
945
|
+
this.mouseDown = false;
|
946
|
+
}
|
947
|
+
reset() {
|
948
|
+
this.isDrag = false;
|
949
|
+
this.x0 = 0;
|
950
|
+
this.y0 = 0;
|
951
|
+
this.mouseDown = false;
|
952
|
+
}
|
953
|
+
start(x, y) {
|
954
|
+
this.x0 = x;
|
955
|
+
this.y0 = y;
|
956
|
+
this.mouseDown = true;
|
957
|
+
}
|
958
|
+
move(x, y) {
|
959
|
+
if (!this.mouseDown) return;
|
960
|
+
const dx = Math.abs(x - this.x0);
|
961
|
+
const dy = Math.abs(y - this.y0);
|
962
|
+
this.isDrag = Math.abs(dx) > this.threshold || Math.abs(dy) > this.threshold;
|
963
|
+
}
|
964
|
+
isDragged() {
|
965
|
+
return this.isDrag;
|
966
|
+
}
|
967
|
+
};
|
968
|
+
|
969
|
+
// src/hooks/use-drag-threshold/use-drag-or-click.ts
|
970
|
+
var useDragOrClick = () => {
|
971
|
+
const clickOrDragged = useRef(new DragThreshold());
|
972
|
+
const getDragOrClickProps = ({
|
973
|
+
onClick,
|
974
|
+
onMouseDown,
|
975
|
+
onMouseMove,
|
976
|
+
onMouseUp
|
977
|
+
}) => {
|
978
|
+
return {
|
979
|
+
onMouseDown: (e) => {
|
980
|
+
clickOrDragged.current.start(e.clientX, e.clientY);
|
981
|
+
onMouseDown == null ? void 0 : onMouseDown(e);
|
982
|
+
},
|
983
|
+
onMouseMove: (e) => {
|
984
|
+
clickOrDragged.current.move(e.clientX, e.clientY);
|
985
|
+
onMouseMove == null ? void 0 : onMouseMove(e);
|
986
|
+
},
|
987
|
+
onMouseUp: (e) => {
|
988
|
+
if (!clickOrDragged.current.isDragged()) {
|
989
|
+
onClick == null ? void 0 : onClick(e);
|
990
|
+
}
|
991
|
+
clickOrDragged.current.reset();
|
992
|
+
onMouseUp == null ? void 0 : onMouseUp(e);
|
993
|
+
}
|
994
|
+
};
|
995
|
+
};
|
996
|
+
return {
|
997
|
+
clickOrDragged: clickOrDragged.current,
|
998
|
+
getDragOrClickProps
|
999
|
+
};
|
1000
|
+
};
|
1001
|
+
|
1002
|
+
// src/components/data-table/components/data-table.tsx
|
926
1003
|
import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
|
927
1004
|
var isCellDisabled = (row, cellId) => {
|
928
1005
|
if (row.disabled) {
|
@@ -994,11 +1071,13 @@ var useDataTable = ({
|
|
994
1071
|
sortDescFirst,
|
995
1072
|
sortingState,
|
996
1073
|
manualSorting,
|
1074
|
+
selectedRow,
|
1075
|
+
disabledRow,
|
1076
|
+
onRowSelectionChange,
|
997
1077
|
columnPinning
|
998
1078
|
}) => {
|
999
1079
|
const [isFirstLoad, setIsFirstLoad] = React5.useState(true);
|
1000
1080
|
const [sorting, setSorting] = React5.useState(sortingState != null ? sortingState : []);
|
1001
|
-
const [rowSelection, onRowSelectionChange] = React5.useState({});
|
1002
1081
|
const dataColumns = React5.useMemo(() => columns, [columns]);
|
1003
1082
|
const checkboxColumn = React5.useMemo(
|
1004
1083
|
() => [
|
@@ -1010,9 +1089,24 @@ var useDataTable = ({
|
|
1010
1089
|
{
|
1011
1090
|
"data-test-id": "select-header-data-table",
|
1012
1091
|
...{
|
1092
|
+
isDisabled: table2.getPaginationRowModel().rows.filter((row) => !(disabledRow == null ? void 0 : disabledRow(row.original))).length === 0,
|
1013
1093
|
isChecked: table2.getIsAllRowsSelected(),
|
1014
1094
|
isIndeterminate: table2.getIsSomeRowsSelected(),
|
1015
|
-
onChange:
|
1095
|
+
onChange: () => {
|
1096
|
+
if (table2.getIsAllRowsSelected()) {
|
1097
|
+
table2.getToggleAllRowsSelectedHandler();
|
1098
|
+
} else if (disabledRow) {
|
1099
|
+
const prevSelected = table2.getFilteredSelectedRowModel().rows.length;
|
1100
|
+
const rows = table2.getPaginationRowModel().rows.filter((row) => !disabledRow(row.original));
|
1101
|
+
if (prevSelected === rows.length) {
|
1102
|
+
table2.setRowSelection(Object.fromEntries(rows.map((row) => [row.id, false])));
|
1103
|
+
} else {
|
1104
|
+
table2.setRowSelection(Object.fromEntries(rows.map((row) => [row.id, true])));
|
1105
|
+
}
|
1106
|
+
} else {
|
1107
|
+
table2.getToggleAllRowsSelectedHandler();
|
1108
|
+
}
|
1109
|
+
}
|
1016
1110
|
}
|
1017
1111
|
}
|
1018
1112
|
) }),
|
@@ -1022,8 +1116,7 @@ var useDataTable = ({
|
|
1022
1116
|
"data-test-id": `select-data-table-${row.index}`,
|
1023
1117
|
...{
|
1024
1118
|
isChecked: row.getIsSelected(),
|
1025
|
-
isIndeterminate: row.getIsSomeSelected()
|
1026
|
-
onChange: row.getToggleSelectedHandler()
|
1119
|
+
isIndeterminate: row.getIsSomeSelected()
|
1027
1120
|
}
|
1028
1121
|
}
|
1029
1122
|
) })
|
@@ -1050,15 +1143,17 @@ var useDataTable = ({
|
|
1050
1143
|
sortDescFirst,
|
1051
1144
|
state: {
|
1052
1145
|
sorting,
|
1053
|
-
rowSelection,
|
1146
|
+
...selectedRow ? { rowSelection: selectedRow } : {},
|
1054
1147
|
...columnPinning ? { columnPinning } : {}
|
1055
1148
|
},
|
1149
|
+
enableRowSelection: withSelectedRow,
|
1056
1150
|
onRowSelectionChange,
|
1057
1151
|
onSortingChange
|
1058
1152
|
});
|
1059
1153
|
const { getSelectedRowModel, toggleAllRowsSelected } = table;
|
1060
1154
|
const { flatRows } = getSelectedRowModel();
|
1061
1155
|
React5.useEffect(() => {
|
1156
|
+
console.log("changed");
|
1062
1157
|
const rowData = flatRows.map((row) => row.original);
|
1063
1158
|
if (onSelectedRow) {
|
1064
1159
|
onSelectedRow(rowData);
|
@@ -1089,9 +1184,11 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1089
1184
|
columnPinning,
|
1090
1185
|
disabledRow,
|
1091
1186
|
highlightedRow,
|
1187
|
+
withSelectedRow,
|
1092
1188
|
highlightRowColor,
|
1093
1189
|
cellLineClamp = 2
|
1094
1190
|
} = props;
|
1191
|
+
const { clickOrDragged, getDragOrClickProps } = useDragOrClick();
|
1095
1192
|
const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
|
1096
1193
|
const refTable = React5.useRef(null);
|
1097
1194
|
React5.useImperativeHandle(ref, () => ({
|
@@ -1142,8 +1239,8 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1142
1239
|
overflowX: "auto",
|
1143
1240
|
overflowY: "hidden",
|
1144
1241
|
position: "relative",
|
1145
|
-
pl: ((_e = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _e.length) ? 0 :
|
1146
|
-
pr: ((_f = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _f.length) ? 0 :
|
1242
|
+
pl: ((_e = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _e.length) ? 0 : 2,
|
1243
|
+
pr: ((_f = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _f.length) ? 0 : 2,
|
1147
1244
|
maxW: "100%",
|
1148
1245
|
w: "full",
|
1149
1246
|
ref: refTable,
|
@@ -1230,7 +1327,7 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1230
1327
|
{
|
1231
1328
|
"data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
|
1232
1329
|
...styles == null ? void 0 : styles.tableRow,
|
1233
|
-
sx: { ...isHighlightedRow && getTableHighlightStyle() },
|
1330
|
+
sx: { ...isHighlightedRow && getTableHighlightStyle(highlightRowColor) },
|
1234
1331
|
"aria-disabled": isDisabledRow,
|
1235
1332
|
"data-highlight": isHighlightedRow ? "true" : "false",
|
1236
1333
|
css: css`
|
@@ -1241,24 +1338,27 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1241
1338
|
}
|
1242
1339
|
`,
|
1243
1340
|
cursor: isDisabledRow ? "default" : "pointer",
|
1244
|
-
|
1245
|
-
|
1246
|
-
|
1247
|
-
(
|
1341
|
+
...getDragOrClickProps({
|
1342
|
+
onMouseDown: (e) => {
|
1343
|
+
var _a2;
|
1344
|
+
if (!isDisabledRow && !isHighlightedRow) {
|
1345
|
+
(_a2 = e.currentTarget) == null ? void 0 : _a2.setAttribute("data-active", "true");
|
1346
|
+
}
|
1347
|
+
},
|
1348
|
+
onMouseUp: (e) => {
|
1349
|
+
var _a2;
|
1350
|
+
(_a2 = e.currentTarget) == null ? void 0 : _a2.removeAttribute("data-active");
|
1351
|
+
},
|
1352
|
+
onClick: () => {
|
1353
|
+
if (withSelectedRow) row.toggleSelected();
|
1354
|
+
if (onRowClick) {
|
1355
|
+
if (isDisabledRow) return;
|
1356
|
+
onRowClick(row.original);
|
1357
|
+
}
|
1248
1358
|
}
|
1249
|
-
},
|
1250
|
-
onMouseUp: (e) => {
|
1251
|
-
var _a2;
|
1252
|
-
(_a2 = e.currentTarget) == null ? void 0 : _a2.removeAttribute("data-active");
|
1253
|
-
},
|
1359
|
+
}),
|
1254
1360
|
opacity: isDisabledRow ? 0.4 : 1,
|
1255
1361
|
pointerEvents: isDisabledRow ? "none" : "auto",
|
1256
|
-
onClick: () => {
|
1257
|
-
if (onRowClick) {
|
1258
|
-
if (isDisabledRow) return;
|
1259
|
-
onRowClick(row.original);
|
1260
|
-
}
|
1261
|
-
},
|
1262
1362
|
children: row.getVisibleCells().map((cell) => {
|
1263
1363
|
const meta = cell.column.columnDef.meta;
|
1264
1364
|
const isDisabled = isCellDisabled(row.original, cell.column.id);
|
@@ -1274,31 +1374,20 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1274
1374
|
children: /* @__PURE__ */ jsx24(
|
1275
1375
|
Flex2,
|
1276
1376
|
{
|
1377
|
+
tabIndex: 0,
|
1277
1378
|
height: "100%",
|
1278
1379
|
width: "100%",
|
1279
1380
|
align: "center",
|
1381
|
+
"data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
|
1280
1382
|
opacity: isDisabled ? 0.5 : 1,
|
1281
|
-
|
1282
|
-
|
1283
|
-
|
1284
|
-
|
1285
|
-
tabIndex: 0,
|
1286
|
-
cursor: "auto",
|
1287
|
-
"data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
|
1288
|
-
onMouseUp: (e) => e.stopPropagation(),
|
1289
|
-
onMouseDown: (e) => e.stopPropagation(),
|
1290
|
-
onClick: (e) => {
|
1291
|
-
e.stopPropagation();
|
1292
|
-
},
|
1293
|
-
...cellLineClamp > 0 ? {
|
1294
|
-
noOfLines: cellLineClamp,
|
1295
|
-
sx: {
|
1296
|
-
display: "-webkit-inline-box"
|
1297
|
-
}
|
1298
|
-
} : {},
|
1299
|
-
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
1383
|
+
...cellLineClamp > 0 ? {
|
1384
|
+
noOfLines: cellLineClamp,
|
1385
|
+
sx: {
|
1386
|
+
display: "-webkit-inline-box"
|
1300
1387
|
}
|
1301
|
-
|
1388
|
+
} : {},
|
1389
|
+
sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
|
1390
|
+
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
1302
1391
|
}
|
1303
1392
|
)
|
1304
1393
|
},
|
@@ -1315,6 +1404,16 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1315
1404
|
});
|
1316
1405
|
var data_table_default = DataTable;
|
1317
1406
|
|
1407
|
+
// src/components/data-table/hook/use-select-table.ts
|
1408
|
+
import React6 from "react";
|
1409
|
+
var useSelectTable = (intialRowSelection) => {
|
1410
|
+
const [rowSelection, onRowSelectionChange] = React6.useState(intialRowSelection != null ? intialRowSelection : {});
|
1411
|
+
return {
|
1412
|
+
rowSelection,
|
1413
|
+
onRowSelectionChange
|
1414
|
+
};
|
1415
|
+
};
|
1416
|
+
|
1318
1417
|
// src/components/datepicker/components/datepicker.tsx
|
1319
1418
|
import { FormControl as FormControl3, FormErrorMessage as FormErrorMessage3, FormHelperText as FormHelperText3, IconButton as IconButton4 } from "@chakra-ui/react";
|
1320
1419
|
import { cx as cx8 } from "@chakra-ui/shared-utils";
|
@@ -2698,10 +2797,10 @@ var styles_default = Styles;
|
|
2698
2797
|
|
2699
2798
|
// src/components/datepicker/components/time-input.tsx
|
2700
2799
|
import { Flex as Flex3, Input, InputGroup as InputGroup3, InputRightAddon as InputRightAddon3, Text as Text4 } from "@chakra-ui/react";
|
2701
|
-
import
|
2800
|
+
import React7 from "react";
|
2702
2801
|
import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
|
2703
2802
|
var TimeInput = ({ value, onChange, label, rightAddon }) => {
|
2704
|
-
const [time, setTime] =
|
2803
|
+
const [time, setTime] = React7.useState(value || "00:00");
|
2705
2804
|
const handleChange = (e) => {
|
2706
2805
|
var _a, _b;
|
2707
2806
|
setTime(((_a = e.target) == null ? void 0 : _a.value) || "00:00");
|
@@ -2861,10 +2960,10 @@ var datepicker_default = Datepicker;
|
|
2861
2960
|
// src/components/datepicker/components/datepicker-month/datepicker-month.tsx
|
2862
2961
|
import { Box as Box12, Input as Input2 } from "@chakra-ui/react";
|
2863
2962
|
import { css as css2 } from "@emotion/react";
|
2864
|
-
import
|
2963
|
+
import React8 from "react";
|
2865
2964
|
import { jsx as jsx28 } from "react/jsx-runtime";
|
2866
2965
|
var DatePickerMonth = ({ onChange, min, max, ...props }) => {
|
2867
|
-
const [date, setDate] =
|
2966
|
+
const [date, setDate] = React8.useState(null);
|
2868
2967
|
return /* @__PURE__ */ jsx28(
|
2869
2968
|
Box12,
|
2870
2969
|
{
|
@@ -2920,7 +3019,7 @@ var datepicker_month_default = DatePickerMonth;
|
|
2920
3019
|
// src/components/datepicker/components/datepicker-month/multi-datepicker-month.tsx
|
2921
3020
|
import { Box as Box13 } from "@chakra-ui/react";
|
2922
3021
|
import styled from "@emotion/styled";
|
2923
|
-
import
|
3022
|
+
import React9 from "react";
|
2924
3023
|
import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
|
2925
3024
|
var MultiDateWrapper = styled(Box13)`
|
2926
3025
|
display: flex;
|
@@ -2937,7 +3036,7 @@ var MultiDatePickerMonth = ({
|
|
2937
3036
|
min = "2020-01-01",
|
2938
3037
|
max = "2020-12-31"
|
2939
3038
|
}) => {
|
2940
|
-
const [date, setDate] =
|
3039
|
+
const [date, setDate] = React9.useState([null, null]);
|
2941
3040
|
return /* @__PURE__ */ jsxs11(MultiDateWrapper, { isError, children: [
|
2942
3041
|
/* @__PURE__ */ jsx29(
|
2943
3042
|
datepicker_month_default,
|
@@ -4036,7 +4135,7 @@ var pagination_detail_default = PaginationDetail;
|
|
4036
4135
|
|
4037
4136
|
// src/components/pagination/components/pagination-filter.tsx
|
4038
4137
|
import { Box as Box24, Select, Text as Text12, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
|
4039
|
-
import * as
|
4138
|
+
import * as React10 from "react";
|
4040
4139
|
import { FiChevronDown } from "react-icons/fi";
|
4041
4140
|
import { jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
|
4042
4141
|
var PaginationFilter = ({
|
@@ -4046,7 +4145,7 @@ var PaginationFilter = ({
|
|
4046
4145
|
onChange,
|
4047
4146
|
...rest
|
4048
4147
|
}) => {
|
4049
|
-
const [value, setValue] =
|
4148
|
+
const [value, setValue] = React10.useState(limit);
|
4050
4149
|
return /* @__PURE__ */ jsxs22(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
|
4051
4150
|
/* @__PURE__ */ jsx49(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue6("neutral.900", "white"), ...rest, children: label }),
|
4052
4151
|
/* @__PURE__ */ jsx49(
|
@@ -5310,14 +5409,14 @@ import { marry } from "@zamiru/timescape";
|
|
5310
5409
|
import {
|
5311
5410
|
useEffect as useEffect2,
|
5312
5411
|
useLayoutEffect,
|
5313
|
-
useRef as
|
5412
|
+
useRef as useRef3,
|
5314
5413
|
useState as useState4
|
5315
5414
|
} from "react";
|
5316
5415
|
var useTimescape = (options = {}) => {
|
5317
5416
|
var _a;
|
5318
5417
|
const { date, onChangeDate, ...rest } = options;
|
5319
5418
|
const [manager] = useState4(() => new TimescapeManager(date, rest));
|
5320
|
-
const onChangeDateRef =
|
5419
|
+
const onChangeDateRef = useRef3(onChangeDate);
|
5321
5420
|
useLayoutEffect(() => {
|
5322
5421
|
onChangeDateRef.current = onChangeDate;
|
5323
5422
|
}, [onChangeDate]);
|
@@ -7742,7 +7841,7 @@ import { useMemo as useMemo5 } from "react";
|
|
7742
7841
|
|
7743
7842
|
// src/provider/components/provider.tsx
|
7744
7843
|
import axios from "axios";
|
7745
|
-
import { createContext as createContext2, useContext, useEffect as useEffect5, useMemo as useMemo4, useRef as
|
7844
|
+
import { createContext as createContext2, useContext, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4 } from "react";
|
7746
7845
|
import { ToastContainer as ToastContainer2 } from "react-toastify";
|
7747
7846
|
import { jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
|
7748
7847
|
var ProviderContext = createContext2({
|
@@ -7753,7 +7852,7 @@ var useInternalUI = () => {
|
|
7753
7852
|
return { instance };
|
7754
7853
|
};
|
7755
7854
|
var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
|
7756
|
-
const instanceRef =
|
7855
|
+
const instanceRef = useRef4(axios.create(config2));
|
7757
7856
|
useEffect5(() => {
|
7758
7857
|
requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
|
7759
7858
|
instanceRef.current.interceptors.request.use(interceptor);
|
@@ -8177,6 +8276,7 @@ export {
|
|
8177
8276
|
useRadio,
|
8178
8277
|
useRadioGroup,
|
8179
8278
|
useRadioGroupContext,
|
8279
|
+
useSelectTable,
|
8180
8280
|
useSteps,
|
8181
8281
|
useTab2 as useTab,
|
8182
8282
|
useTabIndicator,
|