@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.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: table2.getToggleAllRowsSelectedHandler()
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 : 4,
1146
- pr: ((_f = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _f.length) ? 0 : 4,
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
- onMouseDown: (e) => {
1245
- var _a2;
1246
- if (!isDisabledRow && !isHighlightedRow) {
1247
- (_a2 = e.currentTarget) == null ? void 0 : _a2.setAttribute("data-active", "true");
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
- sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
1282
- children: /* @__PURE__ */ jsx24(
1283
- Flex2,
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 React6 from "react";
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] = React6.useState(value || "00:00");
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 React7 from "react";
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] = React7.useState(null);
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 React8 from "react";
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] = React8.useState([null, null]);
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 React9 from "react";
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] = React9.useState(limit);
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 useRef2,
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 = useRef2(onChangeDate);
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 useRef3 } from "react";
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 = useRef3(axios.create(config2));
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,