@ctlyst.id/internal-ui 5.2.0 → 5.3.0

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
@@ -459,10 +459,40 @@ var card_default = CardCustom;
459
459
  // src/components/checkbox/components/checkbox.tsx
460
460
  import { Box as Box5, Checkbox, forwardRef as forwardRef7, Text as Text2, useCheckbox } from "@chakra-ui/react";
461
461
  import * as Icon from "@ctlyst.id/internal-icon";
462
+ import { useCallback, useEffect, useState } from "react";
463
+
464
+ // src/utils/throttleFn.ts
465
+ var throttle = (fn, delay) => {
466
+ if (!delay) return fn;
467
+ let timeoutId;
468
+ return (val) => {
469
+ if (timeoutId) return;
470
+ fn(val);
471
+ timeoutId = setTimeout(() => {
472
+ clearTimeout(timeoutId);
473
+ timeoutId = void 0;
474
+ }, delay);
475
+ };
476
+ };
477
+
478
+ // src/components/checkbox/components/checkbox.tsx
462
479
  import { jsx as jsx16, jsxs as jsxs2 } from "react/jsx-runtime";
463
480
  var CheckboxComponent = forwardRef7(
464
- ({ isError = false, animated = false, helpText, errorText, boxProps, children, isDisabled, ...rest }, ref) => {
481
+ ({ isError = false, animated = false, helpText, errorText, boxProps, children, isDisabled, throttleTime, ...rest }, ref) => {
465
482
  const { state } = useCheckbox(rest);
483
+ const [isChecked, setIsChecked] = useState(!!rest.isChecked);
484
+ useEffect(() => {
485
+ setIsChecked(!!rest.isChecked);
486
+ }, [rest.isChecked]);
487
+ const throttleFn = useCallback(
488
+ throttle((val) => setIsChecked(val), throttleTime),
489
+ []
490
+ );
491
+ const handleOnChange = useCallback((event) => {
492
+ if (throttleTime) throttleFn(event.target.checked);
493
+ else setIsChecked(event.target.checked);
494
+ if (rest.onChange) rest.onChange(event);
495
+ }, []);
466
496
  const variant = isError ? "errors" : "unstyled";
467
497
  const renderIcon2 = () => {
468
498
  if (state.isChecked) return /* @__PURE__ */ jsx16(Icon.Check, { size: 3, color: "inherit" });
@@ -470,7 +500,21 @@ var CheckboxComponent = forwardRef7(
470
500
  return void 0;
471
501
  };
472
502
  return /* @__PURE__ */ jsxs2(Box5, { children: [
473
- /* @__PURE__ */ jsx16(Box5, { display: "flex", ...boxProps, children: /* @__PURE__ */ jsx16(Checkbox, { variant, ref, ...rest, isDisabled, color: "white", icon: renderIcon2(), children: children && /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children }) }) }),
503
+ /* @__PURE__ */ jsx16(Box5, { display: "flex", ...boxProps, children: /* @__PURE__ */ jsx16(
504
+ Checkbox,
505
+ {
506
+ "data-test-id": "Ok3zwJNf_-uY5Pe3mSV4P",
507
+ variant,
508
+ ref,
509
+ ...rest,
510
+ isChecked,
511
+ onChange: handleOnChange,
512
+ isDisabled,
513
+ color: "white",
514
+ icon: renderIcon2(),
515
+ children: children && /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.sm", color: isDisabled ? "black.medium" : "black.high", children })
516
+ }
517
+ ) }),
474
518
  (isError && errorText || helpText) && /* @__PURE__ */ jsx16(Box5, { mt: "1", ml: "6", children: isError ? /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "danger.500", children: errorText }) : /* @__PURE__ */ jsx16(Text2, { as: "span", display: "block", textStyle: "text.xs", color: "black.medium", children: helpText }) })
475
519
  ] });
476
520
  }
@@ -606,7 +650,7 @@ var chips_default = Chips;
606
650
 
607
651
  // src/components/counter/components/counter.tsx
608
652
  import { Box as Box10, HStack, IconButton as IconButton3, Text as Text3 } from "@chakra-ui/react";
609
- import { useCallback } from "react";
653
+ import { useCallback as useCallback2 } from "react";
610
654
  import { FiMinus, FiPlus } from "react-icons/fi";
611
655
 
612
656
  // src/components/form/components/input-addon.tsx
@@ -636,7 +680,7 @@ import { InputRightElement } from "@chakra-ui/react";
636
680
  // src/components/form/components/input-field.tsx
637
681
  import { Box as Box8, Input as ChakraInput, InputGroup } from "@chakra-ui/react";
638
682
  import { Close as Close2, Eye as Eye2, EyeOff } from "@ctlyst.id/internal-icon";
639
- import React2, { useMemo, useState } from "react";
683
+ import React2, { useMemo, useState as useState2 } from "react";
640
684
  import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
641
685
  var InputField = React2.forwardRef((props, ref) => {
642
686
  const {
@@ -671,7 +715,7 @@ var InputField = React2.forwardRef((props, ref) => {
671
715
  focusColor: focusColor2
672
716
  };
673
717
  };
674
- const [isShowPassword, setIsShowPassword] = useState(false);
718
+ const [isShowPassword, setIsShowPassword] = useState2(false);
675
719
  const inputType = useMemo(() => {
676
720
  return type === "password" && isShowPassword ? "text" : type;
677
721
  }, [isShowPassword, type]);
@@ -857,7 +901,7 @@ var Counter = ({
857
901
  const increment = () => {
858
902
  onChange(value + 1);
859
903
  };
860
- const handleChangeInput = useCallback(
904
+ const handleChangeInput = useCallback2(
861
905
  (e) => {
862
906
  const inputValue = e.target.value;
863
907
  const cleanedInputValue = inputValue.replace(/^0+/, "") || "0";
@@ -919,10 +963,11 @@ var counter_default = Counter;
919
963
 
920
964
  // src/components/data-table/components/data-table.tsx
921
965
  import { ChevronDownIcon, ChevronUpIcon, UpDownIcon } from "@chakra-ui/icons";
922
- import { Box as Box11, Checkbox as Checkbox2, Flex as Flex2, Skeleton as Skeleton2, Table, Tbody, Td, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
966
+ import { Box as Box11, Flex as Flex2, Skeleton as Skeleton2, Table, Tbody, Td, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
923
967
  import { css } from "@emotion/react";
924
968
  import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
925
969
  import * as React5 from "react";
970
+ import { useCallback as useCallback3 } from "react";
926
971
 
927
972
  // src/hooks/use-drag-threshold/use-drag-or-click.ts
928
973
  import { useRef } from "react";
@@ -1080,13 +1125,19 @@ var useDataTable = ({
1080
1125
  const [sorting, setSorting] = React5.useState(sortingState != null ? sortingState : []);
1081
1126
  const dataColumns = React5.useMemo(() => columns, [columns]);
1082
1127
  const action = React5.useRef("");
1128
+ const throttleRowClick = useCallback3(
1129
+ throttle((row) => {
1130
+ row.toggleSelected();
1131
+ }, 250),
1132
+ []
1133
+ );
1083
1134
  const checkboxColumn = React5.useMemo(
1084
1135
  () => [
1085
1136
  {
1086
1137
  id: "select",
1087
1138
  size: 32,
1088
1139
  header: ({ table: table2 }) => /* @__PURE__ */ jsx24(Flex2, { justifyContent: "center", children: /* @__PURE__ */ jsx24(
1089
- Checkbox2,
1140
+ checkbox_default,
1090
1141
  {
1091
1142
  "data-test-id": "select-header-data-table",
1092
1143
  ...{
@@ -1112,19 +1163,20 @@ var useDataTable = ({
1112
1163
  }
1113
1164
  }
1114
1165
  ) }),
1115
- cell: ({ row }) => /* @__PURE__ */ jsx24(Flex2, { justifyContent: "center", children: /* @__PURE__ */ jsx24(
1116
- Checkbox2,
1117
- {
1118
- "data-test-id": `select-data-table-${row.index}`,
1119
- ...{
1166
+ cell: ({ row }) => {
1167
+ return /* @__PURE__ */ jsx24(Flex2, { justifyContent: "center", children: /* @__PURE__ */ jsx24(
1168
+ checkbox_default,
1169
+ {
1170
+ "data-test-id": `select-data-table-${row.index}`,
1120
1171
  isChecked: row.getIsSelected(),
1121
- isIndeterminate: row.getIsSomeSelected()
1172
+ isIndeterminate: row.getIsSomeSelected(),
1173
+ onChange: () => throttleRowClick(row)
1122
1174
  }
1123
- }
1124
- ) })
1175
+ ) });
1176
+ }
1125
1177
  }
1126
1178
  ],
1127
- [dataSource]
1179
+ []
1128
1180
  );
1129
1181
  const generateColumn = () => {
1130
1182
  if (withSelectedRow) {
@@ -1176,7 +1228,8 @@ var useDataTable = ({
1176
1228
  table,
1177
1229
  action,
1178
1230
  toggleAllRowsSelected,
1179
- generateColumn
1231
+ generateColumn,
1232
+ throttleRowClick
1180
1233
  };
1181
1234
  };
1182
1235
  var DataTable = React5.forwardRef((props, ref) => {
@@ -1196,7 +1249,7 @@ var DataTable = React5.forwardRef((props, ref) => {
1196
1249
  paddingRowX = 8
1197
1250
  } = props;
1198
1251
  const { clickOrDragged, getDragOrClickProps } = useDragOrClick();
1199
- const { table, action, toggleAllRowsSelected, generateColumn } = useDataTable(props);
1252
+ const { table, action, throttleRowClick, toggleAllRowsSelected, generateColumn } = useDataTable(props);
1200
1253
  const refTable = React5.useRef(null);
1201
1254
  React5.useImperativeHandle(ref, () => ({
1202
1255
  toggleAllRowsSelected
@@ -1370,7 +1423,7 @@ var DataTable = React5.forwardRef((props, ref) => {
1370
1423
  },
1371
1424
  onClick: () => {
1372
1425
  action.current = "selectRow";
1373
- if (withSelectedRow) row.toggleSelected();
1426
+ if (withSelectedRow) throttleRowClick(row);
1374
1427
  if (onRowClick) {
1375
1428
  if (isDisabledRow) return;
1376
1429
  onRowClick(row.original);
@@ -4816,7 +4869,7 @@ function SelectCreatable({ styles, isError = false, ...rest }) {
4816
4869
  }
4817
4870
 
4818
4871
  // src/components/select/components/select-with-checkbox.tsx
4819
- import { Checkbox as Checkbox3, Flex as Flex12, Text as Text14 } from "@chakra-ui/react";
4872
+ import { Checkbox as Checkbox2, Flex as Flex12, Text as Text14 } from "@chakra-ui/react";
4820
4873
  import { useColorMode as useColorMode7 } from "@chakra-ui/system";
4821
4874
  import ReactSelect2, { components as ComponentRS } from "react-select";
4822
4875
  import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -4888,7 +4941,7 @@ var InputOption = ({
4888
4941
  cursor: isDisabled ? "not-allowed" : "default",
4889
4942
  children: [
4890
4943
  (data == null ? void 0 : data.selectAllCheckbox) ? /* @__PURE__ */ jsx57(
4891
- Checkbox3,
4944
+ Checkbox2,
4892
4945
  {
4893
4946
  isChecked: checkedState === CHECKBOX_STATE.CHECKED,
4894
4947
  isIndeterminate: checkedState === CHECKBOX_STATE.INDETERMINATE,
@@ -4897,7 +4950,7 @@ var InputOption = ({
4897
4950
  "data-test-id": "CT_component_select-checkbox_select-all-option"
4898
4951
  }
4899
4952
  ) : /* @__PURE__ */ jsx57(
4900
- Checkbox3,
4953
+ Checkbox2,
4901
4954
  {
4902
4955
  pointerEvents: "none",
4903
4956
  isChecked: isSelected,
@@ -5431,36 +5484,36 @@ import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text
5431
5484
  // src/components/time-input/components/index.tsx
5432
5485
  import { Box as Box29, Flex as Flex17, forwardRef as forwardRef12, Input as Input3, InputGroup as InputGroup4 } from "@chakra-ui/react";
5433
5486
  import { Clock } from "@ctlyst.id/internal-icon";
5434
- import { useEffect as useEffect3, useImperativeHandle as useImperativeHandle2 } from "react";
5487
+ import { useEffect as useEffect4, useImperativeHandle as useImperativeHandle2 } from "react";
5435
5488
 
5436
5489
  // src/components/time-input/components/integration.tsx
5437
5490
  import { $NOW, TimescapeManager } from "@zamiru/timescape";
5438
5491
  import { marry } from "@zamiru/timescape";
5439
5492
  import {
5440
- useEffect as useEffect2,
5493
+ useEffect as useEffect3,
5441
5494
  useLayoutEffect,
5442
5495
  useRef as useRef3,
5443
- useState as useState4
5496
+ useState as useState5
5444
5497
  } from "react";
5445
5498
  var useTimescape = (options = {}) => {
5446
5499
  var _a;
5447
5500
  const { date, onChangeDate, ...rest } = options;
5448
- const [manager] = useState4(() => new TimescapeManager(date, rest));
5501
+ const [manager] = useState5(() => new TimescapeManager(date, rest));
5449
5502
  const onChangeDateRef = useRef3(onChangeDate);
5450
5503
  useLayoutEffect(() => {
5451
5504
  onChangeDateRef.current = onChangeDate;
5452
5505
  }, [onChangeDate]);
5453
- const [optionsState, update] = useState4(() => ({
5506
+ const [optionsState, update] = useState5(() => ({
5454
5507
  date,
5455
5508
  ...rest
5456
5509
  }));
5457
- useEffect2(() => {
5510
+ useEffect3(() => {
5458
5511
  manager.resync();
5459
5512
  return () => {
5460
5513
  manager.remove();
5461
5514
  };
5462
5515
  }, [manager]);
5463
- useEffect2(() => {
5516
+ useEffect3(() => {
5464
5517
  return manager.on("changeDate", (nextDate) => {
5465
5518
  var _a2;
5466
5519
  (_a2 = onChangeDateRef.current) == null ? void 0 : _a2.call(onChangeDateRef, nextDate);
@@ -5468,7 +5521,7 @@ var useTimescape = (options = {}) => {
5468
5521
  });
5469
5522
  }, [manager]);
5470
5523
  const timestamp = (_a = optionsState.date) == null ? void 0 : _a.getTime();
5471
- useEffect2(() => {
5524
+ useEffect3(() => {
5472
5525
  manager.date = timestamp;
5473
5526
  manager.minDate = optionsState.minDate;
5474
5527
  manager.maxDate = optionsState.maxDate;
@@ -5581,7 +5634,7 @@ var TimeInput2 = forwardRef12(
5581
5634
  date,
5582
5635
  ...config2
5583
5636
  });
5584
- useEffect3(() => {
5637
+ useEffect4(() => {
5585
5638
  var _a, _b, _c, _d, _e, _f;
5586
5639
  timeValue.hours = (_b = (_a = options == null ? void 0 : options.date) == null ? void 0 : _a.getHours()) != null ? _b : 0;
5587
5640
  timeValue.minutes = (_d = (_c = options == null ? void 0 : options.date) == null ? void 0 : _c.getMinutes()) != null ? _d : 0;
@@ -5840,7 +5893,7 @@ import {
5840
5893
  UnorderedList as UnorderedList2
5841
5894
  } from "@chakra-ui/react";
5842
5895
  import { Close as X, Plus } from "@ctlyst.id/internal-icon";
5843
- import { useCallback as useCallback2, useEffect as useEffect4, useState as useState5 } from "react";
5896
+ import { useCallback as useCallback4, useEffect as useEffect5, useState as useState6 } from "react";
5844
5897
  import { useDropzone } from "react-dropzone";
5845
5898
 
5846
5899
  // src/components/uploader/constants.ts
@@ -5939,9 +5992,9 @@ var Uploader = ({
5939
5992
  validatorExt,
5940
5993
  ...props
5941
5994
  }) => {
5942
- const [filePreview, setFilePreview] = useState5();
5995
+ const [filePreview, setFilePreview] = useState6();
5943
5996
  const toast2 = useToast();
5944
- const handleRejection = useCallback2(
5997
+ const handleRejection = useCallback4(
5945
5998
  (message, file, image) => {
5946
5999
  if (onHandleRejections) {
5947
6000
  onHandleRejections(file, image);
@@ -5951,7 +6004,7 @@ var Uploader = ({
5951
6004
  // eslint-disable-next-line react-hooks/exhaustive-deps
5952
6005
  [onHandleRejections]
5953
6006
  );
5954
- const onDropAccepted = useCallback2(
6007
+ const onDropAccepted = useCallback4(
5955
6008
  (files) => {
5956
6009
  const file = files[0];
5957
6010
  const imageUrl = URL.createObjectURL(file);
@@ -5974,10 +6027,10 @@ var Uploader = ({
5974
6027
  },
5975
6028
  [acceptFormat, customValidation, dimension, handleRejection, maxFileSize, onHandleUploadFile]
5976
6029
  );
5977
- const onDropRejected = useCallback2((fileRejections) => {
6030
+ const onDropRejected = useCallback4((fileRejections) => {
5978
6031
  defaultOnHandleRejections(fileRejections, { acceptFormat, maxFileSize }, handleRejection);
5979
6032
  }, []);
5980
- const validator = useCallback2(
6033
+ const validator = useCallback4(
5981
6034
  (file) => {
5982
6035
  const result = [];
5983
6036
  if (validatorExt) {
@@ -6026,7 +6079,7 @@ var Uploader = ({
6026
6079
  onHandleUploadFile == null ? void 0 : onHandleUploadFile(null, null);
6027
6080
  acceptedFiles.pop();
6028
6081
  };
6029
- useEffect4(() => {
6082
+ useEffect5(() => {
6030
6083
  if (value) {
6031
6084
  if (typeof value === "string") {
6032
6085
  setFilePreview(value);
@@ -6876,14 +6929,14 @@ var variants2 = {
6876
6929
  errors,
6877
6930
  unstyled
6878
6931
  };
6879
- var Checkbox4 = defineMultiStyleConfig3({
6932
+ var Checkbox3 = defineMultiStyleConfig3({
6880
6933
  baseStyle: baseStyle3,
6881
6934
  variants: variants2,
6882
6935
  defaultProps: {
6883
6936
  variant: "unstyled"
6884
6937
  }
6885
6938
  });
6886
- var checkbox_default2 = Checkbox4;
6939
+ var checkbox_default2 = Checkbox3;
6887
6940
 
6888
6941
  // src/config/theme/components/chips.ts
6889
6942
  import { tagAnatomy } from "@chakra-ui/anatomy";
@@ -7871,7 +7924,7 @@ import { useMemo as useMemo5 } from "react";
7871
7924
 
7872
7925
  // src/provider/components/provider.tsx
7873
7926
  import axios from "axios";
7874
- import { createContext as createContext2, useContext, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4 } from "react";
7927
+ import { createContext as createContext2, useContext, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4 } from "react";
7875
7928
  import { ToastContainer as ToastContainer2 } from "react-toastify";
7876
7929
  import { jsx as jsx67, jsxs as jsxs32 } from "react/jsx-runtime";
7877
7930
  var ProviderContext = createContext2({
@@ -7883,7 +7936,7 @@ var useInternalUI = () => {
7883
7936
  };
7884
7937
  var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
7885
7938
  const instanceRef = useRef4(axios.create(config2));
7886
- useEffect5(() => {
7939
+ useEffect6(() => {
7887
7940
  requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
7888
7941
  instanceRef.current.interceptors.request.use(interceptor);
7889
7942
  });