@ctlyst.id/internal-ui 3.3.14 → 3.3.16

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 CHANGED
@@ -726,7 +726,7 @@ declare class Time {
726
726
  }
727
727
  interface TimeInputProps {
728
728
  config?: TimeOptions;
729
- value?: string;
729
+ value?: Time;
730
730
  seconds?: boolean;
731
731
  onChangeTime?: (time: Time) => void;
732
732
  isDisabled?: boolean;
package/dist/index.d.ts CHANGED
@@ -726,7 +726,7 @@ declare class Time {
726
726
  }
727
727
  interface TimeInputProps {
728
728
  config?: TimeOptions;
729
- value?: string;
729
+ value?: Time;
730
730
  seconds?: boolean;
731
731
  onChangeTime?: (time: Time) => void;
732
732
  isDisabled?: boolean;
package/dist/index.js CHANGED
@@ -1287,26 +1287,32 @@ var getCommonPinningStyles = (column) => {
1287
1287
  ...isLastLeftPinnedColumn ? {
1288
1288
  padding: "16px 8px 16px 8px",
1289
1289
  "&:after": {
1290
+ transition: "all 0.3s",
1290
1291
  content: "''",
1291
1292
  position: "absolute",
1292
1293
  width: "30px",
1293
1294
  right: "0px",
1294
1295
  bottom: "-1px",
1295
1296
  top: 0,
1296
- transform: "translateX(100%)",
1297
+ transform: "translateX(100%)"
1298
+ },
1299
+ "[pin-left=true] &:after": {
1297
1300
  boxShadow: "inset 14px 0px 20px -10px #00000010"
1298
1301
  }
1299
1302
  } : {},
1300
1303
  ...isFirstRightPinnedColumn ? {
1301
1304
  padding: "16px 8px 16px 8px",
1302
1305
  "&:after": {
1306
+ transition: "all 0.3s",
1303
1307
  content: "''",
1304
1308
  position: "absolute",
1305
1309
  width: "30px",
1306
1310
  left: "0%",
1307
1311
  top: 0,
1308
1312
  bottom: "-1px",
1309
- transform: "translateX(-100%)",
1313
+ transform: "translateX(-100%)"
1314
+ },
1315
+ "[pin-right=true] &:after": {
1310
1316
  boxShadow: "inset -14px 0px 20px -10px #00000010"
1311
1317
  }
1312
1318
  } : {}
@@ -1406,22 +1412,39 @@ var useDataTable = ({
1406
1412
  };
1407
1413
  };
1408
1414
  var DataTable = React5.forwardRef((props, ref) => {
1409
- var _a, _b;
1415
+ var _a, _b, _c;
1410
1416
  const { isLoading, styles, headerSticky, onRowClick, container, columnPinning } = props;
1411
1417
  const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
1418
+ const refTable = React5.useRef(null);
1412
1419
  React5.useImperativeHandle(ref, () => ({
1413
1420
  toggleAllRowsSelected
1414
1421
  }));
1422
+ let lastPinnedColumn = 0;
1423
+ (_a = refTable.current) == null ? void 0 : _a.addEventListener("scroll", (s) => {
1424
+ var _a2, _b2, _c2, _d;
1425
+ const element = s.currentTarget;
1426
+ if (element.scrollLeft > 0) {
1427
+ (_a2 = refTable.current) == null ? void 0 : _a2.setAttribute("pin-left", "true");
1428
+ } else {
1429
+ (_b2 = refTable.current) == null ? void 0 : _b2.removeAttribute("pin-left");
1430
+ }
1431
+ if (element.scrollLeft < element.scrollWidth - (lastPinnedColumn + element.offsetWidth)) {
1432
+ (_c2 = refTable.current) == null ? void 0 : _c2.setAttribute("pin-right", "true");
1433
+ } else {
1434
+ (_d = refTable.current) == null ? void 0 : _d.removeAttribute("pin-right");
1435
+ }
1436
+ });
1415
1437
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1416
1438
  import_react28.Box,
1417
1439
  {
1418
1440
  overflowX: "auto",
1419
1441
  overflowY: "hidden",
1420
1442
  position: "relative",
1421
- pl: ((_a = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _a.length) ? 0 : 4,
1422
- pr: ((_b = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _b.length) ? 0 : 4,
1443
+ pl: ((_b = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _b.length) ? 0 : 4,
1444
+ pr: ((_c = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _c.length) ? 0 : 4,
1423
1445
  maxW: "100%",
1424
1446
  w: "full",
1447
+ ref: refTable,
1425
1448
  ...container,
1426
1449
  children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
1427
1450
  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -1451,7 +1474,10 @@ var DataTable = React5.forwardRef((props, ref) => {
1451
1474
  maxH: "50px",
1452
1475
  ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}),
1453
1476
  children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { bg: (0, import_react28.useColorModeValue)("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
1454
- var _a2;
1477
+ var _a2, _b2;
1478
+ if (!!((_a2 = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _a2.length) && header.column.getIsFirstColumn("right")) {
1479
+ lastPinnedColumn = header.column.getAfter("right");
1480
+ }
1455
1481
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1456
1482
  import_react28.Th,
1457
1483
  {
@@ -1478,10 +1504,10 @@ var DataTable = React5.forwardRef((props, ref) => {
1478
1504
  cursor: header.column.getCanSort() ? "pointer" : "default",
1479
1505
  "data-test-id": `CT_Container_SortingIcon_${header.id}`,
1480
1506
  onClick: header.column.getToggleSortingHandler(),
1481
- children: (_a2 = header.column.getCanSort() && {
1507
+ children: (_b2 = header.column.getCanSort() && {
1482
1508
  asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
1483
1509
  desc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
1484
- }[header.column.getIsSorted()]) != null ? _a2 : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { color: "neutral.500" }) })
1510
+ }[header.column.getIsSorted()]) != null ? _b2 : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { color: "neutral.500" }) })
1485
1511
  }
1486
1512
  )
1487
1513
  ]
@@ -4920,10 +4946,12 @@ var TimeInput2 = (0, import_react84.forwardRef)(
4920
4946
  isSuccess,
4921
4947
  onChangeTime
4922
4948
  }, ref) => {
4923
- const dateVal = value != null ? value : config2 == null ? void 0 : config2.date;
4949
+ const timeVal = value != null ? value : new Time(0, 0, 0);
4950
+ const dateVal = /* @__PURE__ */ new Date();
4951
+ dateVal.setHours(timeVal.hours, timeVal.minutes, timeVal.seconds, 0);
4924
4952
  const defaultDate = /* @__PURE__ */ new Date();
4925
4953
  defaultDate.setHours(0, 0, 0, 0);
4926
- const date = dateVal ? new Date(dateVal) : defaultDate;
4954
+ const date = dateVal || defaultDate;
4927
4955
  const timeValue = new Time();
4928
4956
  const { getRootProps, getInputProps, options, update, _manager } = useTimescape({
4929
4957
  date,
@@ -5289,7 +5317,16 @@ var Uploader = ({
5289
5317
  });
5290
5318
  const renderHelperText = () => {
5291
5319
  if (Array.isArray(helperText)) {
5292
- return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react88.UnorderedList, { pl: 2, fontSize: 12, color: "gray.600", "data-test-id": "CT_component_base-image-uploader_helperText", children: helperText.map((text2) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react88.ListItem, { children: text2 }, text2)) });
5320
+ return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
5321
+ import_react88.UnorderedList,
5322
+ {
5323
+ pl: 2,
5324
+ fontSize: 12,
5325
+ color: "black.medium",
5326
+ "data-test-id": "CT_component_base-image-uploader_helperText",
5327
+ children: helperText.map((text2) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react88.ListItem, { children: text2 }, text2))
5328
+ }
5329
+ );
5293
5330
  }
5294
5331
  return helperText;
5295
5332
  };
@@ -5316,7 +5353,6 @@ var Uploader = ({
5316
5353
  const color = isDisabled ? "neutral.500" : "primary.500";
5317
5354
  const containerHeight = !isSmall ? "160px" : "120px";
5318
5355
  const cursorType = filePreview ? "initial" : "pointer";
5319
- console.log(isDragActive);
5320
5356
  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_react88.FormControl, { isRequired, children: [
5321
5357
  label && typeof label === "string" ? (
5322
5358
  // eslint-disable-next-line react/jsx-no-useless-fragment