@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.d.mts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +724 -671
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +96 -43
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
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(
|
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] =
|
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 =
|
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,
|
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
|
-
|
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 }) =>
|
1116
|
-
|
1117
|
-
|
1118
|
-
|
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
|
-
[
|
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
|
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
|
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
|
-
|
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
|
-
|
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
|
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
|
5493
|
+
useEffect as useEffect3,
|
5441
5494
|
useLayoutEffect,
|
5442
5495
|
useRef as useRef3,
|
5443
|
-
useState as
|
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] =
|
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] =
|
5506
|
+
const [optionsState, update] = useState5(() => ({
|
5454
5507
|
date,
|
5455
5508
|
...rest
|
5456
5509
|
}));
|
5457
|
-
|
5510
|
+
useEffect3(() => {
|
5458
5511
|
manager.resync();
|
5459
5512
|
return () => {
|
5460
5513
|
manager.remove();
|
5461
5514
|
};
|
5462
5515
|
}, [manager]);
|
5463
|
-
|
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
|
-
|
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
|
-
|
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
|
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] =
|
5995
|
+
const [filePreview, setFilePreview] = useState6();
|
5943
5996
|
const toast2 = useToast();
|
5944
|
-
const handleRejection =
|
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 =
|
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 =
|
6030
|
+
const onDropRejected = useCallback4((fileRejections) => {
|
5978
6031
|
defaultOnHandleRejections(fileRejections, { acceptFormat, maxFileSize }, handleRejection);
|
5979
6032
|
}, []);
|
5980
|
-
const validator =
|
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
|
-
|
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
|
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 =
|
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
|
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
|
-
|
7939
|
+
useEffect6(() => {
|
7887
7940
|
requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
|
7888
7941
|
instanceRef.current.interceptors.request.use(interceptor);
|
7889
7942
|
});
|