@ctlyst.id/internal-ui 5.6.6 → 5.6.7
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.js +719 -710
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +58 -49
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -341,6 +341,7 @@ var badge_default = Badge;
|
|
|
341
341
|
// src/components/breadcrumb/components/bread-crumb.tsx
|
|
342
342
|
import { Box as Box4, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Flex, IconButton, Text } from "@chakra-ui/react";
|
|
343
343
|
import { ChevronLeft, ChevronsRight, Home } from "@ctlyst.id/internal-icon";
|
|
344
|
+
import { useEffect, useState } from "react";
|
|
344
345
|
import { Fragment, jsx as jsx14, jsxs } from "react/jsx-runtime";
|
|
345
346
|
var BreadCrumb = ({
|
|
346
347
|
title,
|
|
@@ -354,6 +355,13 @@ var BreadCrumb = ({
|
|
|
354
355
|
hideTitle,
|
|
355
356
|
as
|
|
356
357
|
}) => {
|
|
358
|
+
const [hasPreviousPage, setHasPreviousPage] = useState(false);
|
|
359
|
+
useEffect(() => {
|
|
360
|
+
if (window === void 0) return;
|
|
361
|
+
if (window.history.length > 1) {
|
|
362
|
+
setHasPreviousPage(true);
|
|
363
|
+
}
|
|
364
|
+
}, []);
|
|
357
365
|
return /* @__PURE__ */ jsxs(
|
|
358
366
|
Box4,
|
|
359
367
|
{
|
|
@@ -378,6 +386,7 @@ var BreadCrumb = ({
|
|
|
378
386
|
bg: "white",
|
|
379
387
|
variant: "ghost",
|
|
380
388
|
"aria-label": "Back",
|
|
389
|
+
isDisabled: !hasPreviousPage,
|
|
381
390
|
icon: /* @__PURE__ */ jsx14(ChevronLeft, { size: 5 }),
|
|
382
391
|
onClick: backButton
|
|
383
392
|
}
|
|
@@ -678,9 +687,9 @@ import { InputRightElement } from "@chakra-ui/react";
|
|
|
678
687
|
// src/components/form/components/input-field.tsx
|
|
679
688
|
import { Box as Box8, Input as ChakraInput, InputGroup } from "@chakra-ui/react";
|
|
680
689
|
import { Close as Close2, Eye as Eye2, EyeOff } from "@ctlyst.id/internal-icon";
|
|
681
|
-
import
|
|
690
|
+
import React3, { useMemo, useState as useState2 } from "react";
|
|
682
691
|
import { jsx as jsx21, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
683
|
-
var InputField =
|
|
692
|
+
var InputField = React3.forwardRef((props, ref) => {
|
|
684
693
|
const {
|
|
685
694
|
value,
|
|
686
695
|
type,
|
|
@@ -713,7 +722,7 @@ var InputField = React2.forwardRef((props, ref) => {
|
|
|
713
722
|
focusColor: focusColor2
|
|
714
723
|
};
|
|
715
724
|
};
|
|
716
|
-
const [isShowPassword, setIsShowPassword] =
|
|
725
|
+
const [isShowPassword, setIsShowPassword] = useState2(false);
|
|
717
726
|
const inputType = useMemo(() => {
|
|
718
727
|
return type === "password" && isShowPassword ? "text" : type;
|
|
719
728
|
}, [isShowPassword, type]);
|
|
@@ -842,9 +851,9 @@ var input_field_default = InputField;
|
|
|
842
851
|
|
|
843
852
|
// src/components/form/components/textarea.tsx
|
|
844
853
|
import { Box as Box9, Textarea as ChakraTextarea } from "@chakra-ui/react";
|
|
845
|
-
import
|
|
854
|
+
import React4 from "react";
|
|
846
855
|
import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
847
|
-
var TextareaField =
|
|
856
|
+
var TextareaField = React4.forwardRef((props, ref) => {
|
|
848
857
|
const { value, isLoading, ...inputProps } = props;
|
|
849
858
|
return /* @__PURE__ */ jsx22(field_default, { ...inputProps, children: /* @__PURE__ */ jsxs6(Box9, { position: "relative", children: [
|
|
850
859
|
/* @__PURE__ */ jsx22(ChakraTextarea, { ref, value, ...inputProps }),
|
|
@@ -964,7 +973,7 @@ import { ChevronDownIcon, ChevronUpIcon, UpDownIcon } from "@chakra-ui/icons";
|
|
|
964
973
|
import { Box as Box11, Flex as Flex2, keyframes, Skeleton as Skeleton2, Table, Tbody, Td, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
|
|
965
974
|
import { css } from "@emotion/react";
|
|
966
975
|
import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
|
|
967
|
-
import * as
|
|
976
|
+
import * as React6 from "react";
|
|
968
977
|
import { useCallback as useCallback3 } from "react";
|
|
969
978
|
|
|
970
979
|
// src/hooks/use-drag-threshold/use-drag-or-click.ts
|
|
@@ -1123,17 +1132,17 @@ var useDataTable = ({
|
|
|
1123
1132
|
onRowSelectionChange,
|
|
1124
1133
|
columnPinning
|
|
1125
1134
|
}) => {
|
|
1126
|
-
const [isFirstLoad, setIsFirstLoad] =
|
|
1127
|
-
const [sorting, setSorting] =
|
|
1128
|
-
const dataColumns =
|
|
1129
|
-
const action =
|
|
1135
|
+
const [isFirstLoad, setIsFirstLoad] = React6.useState(true);
|
|
1136
|
+
const [sorting, setSorting] = React6.useState(sortingState != null ? sortingState : []);
|
|
1137
|
+
const dataColumns = React6.useMemo(() => columns, [columns]);
|
|
1138
|
+
const action = React6.useRef("");
|
|
1130
1139
|
const throttleRowClick = useCallback3(
|
|
1131
1140
|
throttle((row) => {
|
|
1132
1141
|
row.toggleSelected();
|
|
1133
1142
|
}, 250),
|
|
1134
1143
|
[]
|
|
1135
1144
|
);
|
|
1136
|
-
const checkboxColumn =
|
|
1145
|
+
const checkboxColumn = React6.useMemo(
|
|
1137
1146
|
() => [
|
|
1138
1147
|
{
|
|
1139
1148
|
id: "select",
|
|
@@ -1208,22 +1217,22 @@ var useDataTable = ({
|
|
|
1208
1217
|
});
|
|
1209
1218
|
const { getSelectedRowModel, toggleAllRowsSelected } = table;
|
|
1210
1219
|
const { flatRows } = getSelectedRowModel();
|
|
1211
|
-
|
|
1220
|
+
React6.useEffect(() => {
|
|
1212
1221
|
const rowData = flatRows.map((row) => row.original);
|
|
1213
1222
|
if (onSelectedRow) {
|
|
1214
1223
|
onSelectedRow(rowData, action.current);
|
|
1215
1224
|
}
|
|
1216
1225
|
}, [flatRows]);
|
|
1217
|
-
|
|
1226
|
+
React6.useEffect(() => {
|
|
1218
1227
|
action.current = "newData";
|
|
1219
1228
|
table.setRowSelection(selectedRow != null ? selectedRow : {});
|
|
1220
1229
|
}, [selectedRow]);
|
|
1221
|
-
|
|
1230
|
+
React6.useEffect(() => {
|
|
1222
1231
|
if (onSort && !isFirstLoad) {
|
|
1223
1232
|
onSort(sorting);
|
|
1224
1233
|
}
|
|
1225
1234
|
}, [sorting]);
|
|
1226
|
-
|
|
1235
|
+
React6.useEffect(() => {
|
|
1227
1236
|
setIsFirstLoad(false);
|
|
1228
1237
|
}, []);
|
|
1229
1238
|
return {
|
|
@@ -1235,7 +1244,7 @@ var useDataTable = ({
|
|
|
1235
1244
|
selectedRow
|
|
1236
1245
|
};
|
|
1237
1246
|
};
|
|
1238
|
-
var DataTable =
|
|
1247
|
+
var DataTable = React6.forwardRef((props, ref) => {
|
|
1239
1248
|
var _a, _b, _c, _d, _e;
|
|
1240
1249
|
const {
|
|
1241
1250
|
isLoading,
|
|
@@ -1253,8 +1262,8 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
|
1253
1262
|
} = props;
|
|
1254
1263
|
const { clickOrDragged, getDragOrClickProps } = useDragOrClick();
|
|
1255
1264
|
const { table, action, throttleRowClick, toggleAllRowsSelected, generateColumn, selectedRow } = useDataTable(props);
|
|
1256
|
-
const refTable =
|
|
1257
|
-
|
|
1265
|
+
const refTable = React6.useRef(null);
|
|
1266
|
+
React6.useImperativeHandle(ref, () => ({
|
|
1258
1267
|
toggleAllRowsSelected
|
|
1259
1268
|
}));
|
|
1260
1269
|
const tableResizeHandler = () => {
|
|
@@ -1274,7 +1283,7 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
|
1274
1283
|
};
|
|
1275
1284
|
};
|
|
1276
1285
|
let lastPinnedColumn = 0;
|
|
1277
|
-
|
|
1286
|
+
React6.useEffect(() => {
|
|
1278
1287
|
var _a2;
|
|
1279
1288
|
(_a2 = refTable.current) == null ? void 0 : _a2.addEventListener("scroll", (s) => {
|
|
1280
1289
|
var _a3, _b2, _c2, _d2;
|
|
@@ -1507,9 +1516,9 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
|
1507
1516
|
var data_table_default = DataTable;
|
|
1508
1517
|
|
|
1509
1518
|
// src/components/data-table/hook/use-select-table.ts
|
|
1510
|
-
import
|
|
1519
|
+
import React7 from "react";
|
|
1511
1520
|
var useSelectTable = (intialRowSelection) => {
|
|
1512
|
-
const [rowSelection, onRowSelectionChange] =
|
|
1521
|
+
const [rowSelection, onRowSelectionChange] = React7.useState(intialRowSelection != null ? intialRowSelection : {});
|
|
1513
1522
|
return {
|
|
1514
1523
|
rowSelection,
|
|
1515
1524
|
onRowSelectionChange
|
|
@@ -2897,10 +2906,10 @@ var styles_default = Styles;
|
|
|
2897
2906
|
|
|
2898
2907
|
// src/components/datepicker/components/time-input.tsx
|
|
2899
2908
|
import { Flex as Flex3, Input, InputGroup as InputGroup3, InputRightAddon as InputRightAddon3, Text as Text4 } from "@chakra-ui/react";
|
|
2900
|
-
import
|
|
2909
|
+
import React8 from "react";
|
|
2901
2910
|
import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
2902
2911
|
var TimeInput = ({ value, onChange, label, rightAddon }) => {
|
|
2903
|
-
const [time, setTime] =
|
|
2912
|
+
const [time, setTime] = React8.useState(value || "00:00");
|
|
2904
2913
|
const handleChange = (e) => {
|
|
2905
2914
|
var _a, _b;
|
|
2906
2915
|
setTime(((_a = e.target) == null ? void 0 : _a.value) || "00:00");
|
|
@@ -3060,10 +3069,10 @@ var datepicker_default = Datepicker;
|
|
|
3060
3069
|
// src/components/datepicker/components/datepicker-month/datepicker-month.tsx
|
|
3061
3070
|
import { Box as Box12, Input as Input2 } from "@chakra-ui/react";
|
|
3062
3071
|
import { css as css2 } from "@emotion/react";
|
|
3063
|
-
import
|
|
3072
|
+
import React9 from "react";
|
|
3064
3073
|
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
3065
3074
|
var DatePickerMonth = ({ onChange, min, max, ...props }) => {
|
|
3066
|
-
const [date, setDate] =
|
|
3075
|
+
const [date, setDate] = React9.useState(null);
|
|
3067
3076
|
return /* @__PURE__ */ jsx28(
|
|
3068
3077
|
Box12,
|
|
3069
3078
|
{
|
|
@@ -3119,7 +3128,7 @@ var datepicker_month_default = DatePickerMonth;
|
|
|
3119
3128
|
// src/components/datepicker/components/datepicker-month/multi-datepicker-month.tsx
|
|
3120
3129
|
import { Box as Box13 } from "@chakra-ui/react";
|
|
3121
3130
|
import styled from "@emotion/styled";
|
|
3122
|
-
import
|
|
3131
|
+
import React10 from "react";
|
|
3123
3132
|
import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3124
3133
|
var MultiDateWrapper = styled(Box13)`
|
|
3125
3134
|
display: flex;
|
|
@@ -3136,7 +3145,7 @@ var MultiDatePickerMonth = ({
|
|
|
3136
3145
|
min = "2020-01-01",
|
|
3137
3146
|
max = "2020-12-31"
|
|
3138
3147
|
}) => {
|
|
3139
|
-
const [date, setDate] =
|
|
3148
|
+
const [date, setDate] = React10.useState([null, null]);
|
|
3140
3149
|
return /* @__PURE__ */ jsxs11(MultiDateWrapper, { isError, children: [
|
|
3141
3150
|
/* @__PURE__ */ jsx29(
|
|
3142
3151
|
datepicker_month_default,
|
|
@@ -4237,7 +4246,7 @@ var pagination_detail_default = PaginationDetail;
|
|
|
4237
4246
|
|
|
4238
4247
|
// src/components/pagination/components/pagination-filter.tsx
|
|
4239
4248
|
import { Box as Box24, Select, Text as Text12, useColorModeValue as useColorModeValue6 } from "@chakra-ui/react";
|
|
4240
|
-
import * as
|
|
4249
|
+
import * as React11 from "react";
|
|
4241
4250
|
import { FiChevronDown } from "react-icons/fi";
|
|
4242
4251
|
import { jsx as jsx49, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
4243
4252
|
var PaginationFilter = ({
|
|
@@ -4247,7 +4256,7 @@ var PaginationFilter = ({
|
|
|
4247
4256
|
onChange,
|
|
4248
4257
|
...rest
|
|
4249
4258
|
}) => {
|
|
4250
|
-
const [value, setValue] =
|
|
4259
|
+
const [value, setValue] = React11.useState(limit);
|
|
4251
4260
|
return /* @__PURE__ */ jsxs22(Box24, { display: "flex", flexDirection: "row", alignItems: "center", children: [
|
|
4252
4261
|
/* @__PURE__ */ jsx49(Text12, { fontSize: "text.sm", lineHeight: 18, color: useColorModeValue6("neutral.900", "white"), ...rest, children: label }),
|
|
4253
4262
|
/* @__PURE__ */ jsx49(
|
|
@@ -4299,12 +4308,12 @@ import {
|
|
|
4299
4308
|
|
|
4300
4309
|
// src/components/popover/PopoverContent.tsx
|
|
4301
4310
|
import { forwardRef as forwardRef10, PopoverArrow as PopoverArrow3, PopoverContent as ChakraPopoverContent } from "@chakra-ui/react";
|
|
4302
|
-
import
|
|
4311
|
+
import React12 from "react";
|
|
4303
4312
|
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
4304
4313
|
var PopoverContent5 = forwardRef10((props, ref) => {
|
|
4305
4314
|
const { children, ...rest } = props;
|
|
4306
|
-
const hasArrow =
|
|
4307
|
-
return
|
|
4315
|
+
const hasArrow = React12.Children.toArray(children).some((child) => {
|
|
4316
|
+
return React12.isValidElement(child) && child.type === PopoverArrow3;
|
|
4308
4317
|
});
|
|
4309
4318
|
return /* @__PURE__ */ jsx50(ChakraPopoverContent, { ...!hasArrow ? { mt: -1 } : {}, ...rest, ref, children });
|
|
4310
4319
|
});
|
|
@@ -5580,36 +5589,36 @@ import { Code, CodeProps, Heading, HeadingProps, Link as Link5, LinkProps, Text
|
|
|
5580
5589
|
// src/components/time-input/components/index.tsx
|
|
5581
5590
|
import { Box as Box29, Flex as Flex17, forwardRef as forwardRef13, Input as Input3, InputGroup as InputGroup4 } from "@chakra-ui/react";
|
|
5582
5591
|
import { Clock } from "@ctlyst.id/internal-icon";
|
|
5583
|
-
import { useEffect as
|
|
5592
|
+
import { useEffect as useEffect4, useImperativeHandle as useImperativeHandle2 } from "react";
|
|
5584
5593
|
|
|
5585
5594
|
// src/components/time-input/components/integration.tsx
|
|
5586
5595
|
import { $NOW, TimescapeManager } from "@zamiru/timescape";
|
|
5587
5596
|
import { marry } from "@zamiru/timescape";
|
|
5588
5597
|
import {
|
|
5589
|
-
useEffect as
|
|
5598
|
+
useEffect as useEffect3,
|
|
5590
5599
|
useLayoutEffect,
|
|
5591
5600
|
useRef as useRef4,
|
|
5592
|
-
useState as
|
|
5601
|
+
useState as useState5
|
|
5593
5602
|
} from "react";
|
|
5594
5603
|
var useTimescape = (options = {}) => {
|
|
5595
5604
|
var _a;
|
|
5596
5605
|
const { date, onChangeDate, ...rest } = options;
|
|
5597
|
-
const [manager] =
|
|
5606
|
+
const [manager] = useState5(() => new TimescapeManager(date, rest));
|
|
5598
5607
|
const onChangeDateRef = useRef4(onChangeDate);
|
|
5599
5608
|
useLayoutEffect(() => {
|
|
5600
5609
|
onChangeDateRef.current = onChangeDate;
|
|
5601
5610
|
}, [onChangeDate]);
|
|
5602
|
-
const [optionsState, update] =
|
|
5611
|
+
const [optionsState, update] = useState5(() => ({
|
|
5603
5612
|
date,
|
|
5604
5613
|
...rest
|
|
5605
5614
|
}));
|
|
5606
|
-
|
|
5615
|
+
useEffect3(() => {
|
|
5607
5616
|
manager.resync();
|
|
5608
5617
|
return () => {
|
|
5609
5618
|
manager.remove();
|
|
5610
5619
|
};
|
|
5611
5620
|
}, [manager]);
|
|
5612
|
-
|
|
5621
|
+
useEffect3(() => {
|
|
5613
5622
|
return manager.on("changeDate", (nextDate) => {
|
|
5614
5623
|
var _a2;
|
|
5615
5624
|
(_a2 = onChangeDateRef.current) == null ? void 0 : _a2.call(onChangeDateRef, nextDate);
|
|
@@ -5617,7 +5626,7 @@ var useTimescape = (options = {}) => {
|
|
|
5617
5626
|
});
|
|
5618
5627
|
}, [manager]);
|
|
5619
5628
|
const timestamp = (_a = optionsState.date) == null ? void 0 : _a.getTime();
|
|
5620
|
-
|
|
5629
|
+
useEffect3(() => {
|
|
5621
5630
|
manager.date = timestamp;
|
|
5622
5631
|
manager.minDate = optionsState.minDate;
|
|
5623
5632
|
manager.maxDate = optionsState.maxDate;
|
|
@@ -5730,7 +5739,7 @@ var TimeInput2 = forwardRef13(
|
|
|
5730
5739
|
date,
|
|
5731
5740
|
...config2
|
|
5732
5741
|
});
|
|
5733
|
-
|
|
5742
|
+
useEffect4(() => {
|
|
5734
5743
|
var _a, _b, _c, _d, _e, _f;
|
|
5735
5744
|
timeValue.hours = (_b = (_a = options == null ? void 0 : options.date) == null ? void 0 : _a.getHours()) != null ? _b : 0;
|
|
5736
5745
|
timeValue.minutes = (_d = (_c = options == null ? void 0 : options.date) == null ? void 0 : _c.getMinutes()) != null ? _d : 0;
|
|
@@ -5993,7 +6002,7 @@ import {
|
|
|
5993
6002
|
UnorderedList as UnorderedList2
|
|
5994
6003
|
} from "@chakra-ui/react";
|
|
5995
6004
|
import { Close as X, Plus } from "@ctlyst.id/internal-icon";
|
|
5996
|
-
import { useCallback as useCallback4, useEffect as
|
|
6005
|
+
import { useCallback as useCallback4, useEffect as useEffect5, useState as useState6 } from "react";
|
|
5997
6006
|
import { useDropzone } from "react-dropzone";
|
|
5998
6007
|
|
|
5999
6008
|
// src/components/uploader/constants.ts
|
|
@@ -6112,10 +6121,10 @@ var Uploader = ({
|
|
|
6112
6121
|
customErrorRejection,
|
|
6113
6122
|
...props
|
|
6114
6123
|
}) => {
|
|
6115
|
-
const [filePreview, setFilePreview] =
|
|
6116
|
-
const [isError, setIsError] =
|
|
6117
|
-
const [errorText, setErrorText] =
|
|
6118
|
-
|
|
6124
|
+
const [filePreview, setFilePreview] = useState6();
|
|
6125
|
+
const [isError, setIsError] = useState6(propIsError);
|
|
6126
|
+
const [errorText, setErrorText] = useState6(propErrorText);
|
|
6127
|
+
useEffect5(() => {
|
|
6119
6128
|
setIsError(propIsError);
|
|
6120
6129
|
setErrorText(propErrorText);
|
|
6121
6130
|
}, [propIsError, propErrorText]);
|
|
@@ -6233,7 +6242,7 @@ var Uploader = ({
|
|
|
6233
6242
|
onHandleUploadFile == null ? void 0 : onHandleUploadFile(null, null);
|
|
6234
6243
|
acceptedFiles.pop();
|
|
6235
6244
|
};
|
|
6236
|
-
|
|
6245
|
+
useEffect5(() => {
|
|
6237
6246
|
if (value) {
|
|
6238
6247
|
if (typeof value === "string") {
|
|
6239
6248
|
setFilePreview(value);
|
|
@@ -8086,7 +8095,7 @@ import { useMemo as useMemo5 } from "react";
|
|
|
8086
8095
|
|
|
8087
8096
|
// src/provider/components/provider.tsx
|
|
8088
8097
|
import axios from "axios";
|
|
8089
|
-
import { createContext as createContext2, useContext, useEffect as
|
|
8098
|
+
import { createContext as createContext2, useContext, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5 } from "react";
|
|
8090
8099
|
import { ToastContainer as ToastContainer2 } from "react-toastify";
|
|
8091
8100
|
import { jsx as jsx69, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
8092
8101
|
var ProviderContext = createContext2({
|
|
@@ -8098,7 +8107,7 @@ var useInternalUI = () => {
|
|
|
8098
8107
|
};
|
|
8099
8108
|
var Provider = ({ children, config: config2, requestInterceptors, responseInterceptors }) => {
|
|
8100
8109
|
const instanceRef = useRef5(axios.create(config2));
|
|
8101
|
-
|
|
8110
|
+
useEffect6(() => {
|
|
8102
8111
|
requestInterceptors == null ? void 0 : requestInterceptors.forEach((interceptor) => {
|
|
8103
8112
|
instanceRef.current.interceptors.request.use(interceptor);
|
|
8104
8113
|
});
|