@ctlyst.id/internal-ui 3.3.8 → 3.3.10

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/dist/index.js +173 -152
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +176 -162
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -1406,155 +1406,169 @@ var useDataTable = ({
1406
1406
  };
1407
1407
  };
1408
1408
  var DataTable = React5.forwardRef((props, ref) => {
1409
- const { isLoading, styles, headerSticky, onRowClick, container } = props;
1409
+ var _a, _b;
1410
+ const { isLoading, styles, headerSticky, onRowClick, container, columnPinning } = props;
1410
1411
  const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
1411
1412
  React5.useImperativeHandle(ref, () => ({
1412
1413
  toggleAllRowsSelected
1413
1414
  }));
1414
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { overflowX: "auto", position: "relative", px: 4, maxW: "100%", w: "full", ...container, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
1415
- /* @__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)(
1416
- import_react28.Th,
1417
- {
1418
- colSpan: header.colSpan,
1419
- width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
1420
- ...styles == null ? void 0 : styles.tableColumnHeader,
1421
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1422
- import_react28.Flex,
1415
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1416
+ import_react28.Box,
1417
+ {
1418
+ overflowX: "auto",
1419
+ overflowY: "hidden",
1420
+ 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,
1423
+ maxW: "100%",
1424
+ w: "full",
1425
+ ...container,
1426
+ children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
1427
+ /* @__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)(
1428
+ import_react28.Th,
1423
1429
  {
1424
- "data-test-id": "CT_component_data-table_loader",
1425
- textTransform: "capitalize",
1426
- align: "center",
1427
- gap: 2,
1428
- children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
1430
+ colSpan: header.colSpan,
1431
+ width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
1432
+ ...styles == null ? void 0 : styles.tableColumnHeader,
1433
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1434
+ import_react28.Flex,
1435
+ {
1436
+ "data-test-id": "CT_component_data-table_loader",
1437
+ textTransform: "capitalize",
1438
+ align: "center",
1439
+ gap: 2,
1440
+ children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext())
1441
+ }
1442
+ )
1443
+ },
1444
+ header.id
1445
+ )) }, headerGroup.id)) }),
1446
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Td, { width: 210, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Skeleton, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i) }, i)) }, num)) })
1447
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, children: [
1448
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1449
+ import_react28.Thead,
1450
+ {
1451
+ maxH: "50px",
1452
+ ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}),
1453
+ 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;
1455
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1456
+ import_react28.Th,
1457
+ {
1458
+ colSpan: header.colSpan,
1459
+ sx: getCommonPinningStyles(header.column),
1460
+ width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
1461
+ ...styles == null ? void 0 : styles.tableColumnHeader,
1462
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
1463
+ import_react28.Flex,
1464
+ {
1465
+ backgroundColor: "white",
1466
+ height: "100%",
1467
+ "data-test-id": `CT_Container_TableHeader_${header.id}`,
1468
+ textTransform: "capitalize",
1469
+ userSelect: "none",
1470
+ align: "center",
1471
+ gap: 2,
1472
+ children: [
1473
+ (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
1474
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1475
+ import_react28.Box,
1476
+ {
1477
+ as: "span",
1478
+ cursor: header.column.getCanSort() ? "pointer" : "default",
1479
+ "data-test-id": `CT_Container_SortingIcon_${header.id}`,
1480
+ onClick: header.column.getToggleSortingHandler(),
1481
+ children: (_a2 = header.column.getCanSort() && {
1482
+ asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
1483
+ 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" }) })
1485
+ }
1486
+ )
1487
+ ]
1488
+ }
1489
+ )
1490
+ },
1491
+ header.id
1492
+ );
1493
+ }) }, headerGroup.id))
1429
1494
  }
1430
- )
1431
- },
1432
- header.id
1433
- )) }, headerGroup.id)) }),
1434
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Td, { width: 210, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Skeleton, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i) }, i)) }, num)) })
1435
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, children: [
1436
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1437
- import_react28.Thead,
1438
- {
1439
- maxH: "50px",
1440
- ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}),
1441
- 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) => {
1442
- var _a;
1495
+ ),
1496
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
1443
1497
  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1444
- import_react28.Th,
1498
+ import_react28.Tr,
1445
1499
  {
1446
- colSpan: header.colSpan,
1447
- sx: getCommonPinningStyles(header.column),
1448
- width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
1449
- ...styles == null ? void 0 : styles.tableColumnHeader,
1450
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
1451
- import_react28.Flex,
1452
- {
1453
- backgroundColor: "white",
1454
- height: "100%",
1455
- "data-test-id": `CT_Container_TableHeader_${header.id}`,
1456
- textTransform: "capitalize",
1457
- userSelect: "none",
1458
- align: "center",
1459
- gap: 2,
1460
- children: [
1461
- (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
1462
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1463
- import_react28.Box,
1464
- {
1465
- as: "span",
1466
- cursor: header.column.getCanSort() ? "pointer" : "default",
1467
- "data-test-id": `CT_Container_SortingIcon_${header.id}`,
1468
- onClick: header.column.getToggleSortingHandler(),
1469
- children: (_a = header.column.getCanSort() && {
1470
- asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
1471
- desc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
1472
- }[header.column.getIsSorted()]) != null ? _a : /* @__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" }) })
1473
- }
1474
- )
1475
- ]
1476
- }
1477
- )
1478
- },
1479
- header.id
1480
- );
1481
- }) }, headerGroup.id))
1482
- }
1483
- ),
1484
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
1485
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1486
- import_react28.Tr,
1487
- {
1488
- "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
1489
- tabindex: "0",
1490
- ...styles == null ? void 0 : styles.tableRow,
1491
- css: import_react29.css`
1500
+ "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
1501
+ tabindex: "0",
1502
+ ...styles == null ? void 0 : styles.tableRow,
1503
+ css: import_react29.css`
1492
1504
  &:last-child {
1493
1505
  td {
1494
1506
  border-bottom: none;
1495
1507
  }
1496
1508
  }
1497
1509
  `,
1498
- onMouseDown: (e) => {
1499
- var _a;
1500
- (_a = e.currentTarget) == null ? void 0 : _a.setAttribute("data-active", "true");
1501
- },
1502
- onMouseUp: (e) => {
1503
- var _a;
1504
- (_a = e.currentTarget) == null ? void 0 : _a.removeAttribute("data-active");
1505
- },
1506
- onClick: () => {
1507
- if (onRowClick) {
1508
- onRowClick(row.original);
1509
- }
1510
- },
1511
- children: row.getVisibleCells().map((cell) => {
1512
- const meta = cell.column.columnDef.meta;
1513
- const isDisabled = isCellDisabled(row.original, cell.column.id);
1514
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1515
- import_react28.Td,
1516
- {
1517
- "data-test-id": `CT_Component_TableCell_${cell.id}`,
1518
- fontSize: "text.sm",
1519
- sx: getCommonPinningStyles(cell.column),
1520
- ...styles == null ? void 0 : styles.tableCell,
1521
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1522
- import_react28.Flex,
1510
+ onMouseDown: (e) => {
1511
+ var _a2;
1512
+ (_a2 = e.currentTarget) == null ? void 0 : _a2.setAttribute("data-active", "true");
1513
+ },
1514
+ onMouseUp: (e) => {
1515
+ var _a2;
1516
+ (_a2 = e.currentTarget) == null ? void 0 : _a2.removeAttribute("data-active");
1517
+ },
1518
+ onClick: () => {
1519
+ if (onRowClick) {
1520
+ onRowClick(row.original);
1521
+ }
1522
+ },
1523
+ children: row.getVisibleCells().map((cell) => {
1524
+ const meta = cell.column.columnDef.meta;
1525
+ const isDisabled = isCellDisabled(row.original, cell.column.id);
1526
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1527
+ import_react28.Td,
1523
1528
  {
1524
- height: "100%",
1525
- width: "100%",
1526
- align: "center",
1527
- opacity: isDisabled ? 0.5 : 1,
1528
- sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
1529
+ "data-test-id": `CT_Component_TableCell_${cell.id}`,
1530
+ fontSize: "text.sm",
1531
+ sx: getCommonPinningStyles(cell.column),
1532
+ ...styles == null ? void 0 : styles.tableCell,
1529
1533
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1530
1534
  import_react28.Flex,
1531
1535
  {
1532
- tabIndex: 0,
1533
- cursor: "auto",
1534
- "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
1535
- onMouseUp: (e) => e.stopPropagation(),
1536
- onMouseDown: (e) => e.stopPropagation(),
1537
- onClick: (e) => {
1538
- e.stopPropagation();
1539
- },
1540
- noOfLines: 2,
1541
- sx: {
1542
- display: "-webkit-inline-box"
1543
- },
1544
- children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
1536
+ height: "100%",
1537
+ width: "100%",
1538
+ align: "center",
1539
+ opacity: isDisabled ? 0.5 : 1,
1540
+ sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
1541
+ children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1542
+ import_react28.Flex,
1543
+ {
1544
+ tabIndex: 0,
1545
+ cursor: "auto",
1546
+ "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
1547
+ onMouseUp: (e) => e.stopPropagation(),
1548
+ onMouseDown: (e) => e.stopPropagation(),
1549
+ onClick: (e) => {
1550
+ e.stopPropagation();
1551
+ },
1552
+ noOfLines: 2,
1553
+ sx: {
1554
+ display: "-webkit-inline-box"
1555
+ },
1556
+ children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
1557
+ }
1558
+ )
1545
1559
  }
1546
1560
  )
1547
- }
1548
- )
1549
- },
1550
- cell.id
1551
- );
1552
- })
1553
- },
1554
- row.id
1555
- );
1556
- }) })
1557
- ] }) });
1561
+ },
1562
+ cell.id
1563
+ );
1564
+ })
1565
+ },
1566
+ row.id
1567
+ );
1568
+ }) })
1569
+ ] })
1570
+ }
1571
+ );
1558
1572
  });
1559
1573
  var data_table_default = DataTable;
1560
1574
 
@@ -2496,7 +2510,33 @@ var Datepicker = ({
2496
2510
  id,
2497
2511
  name,
2498
2512
  selected,
2499
- customInput: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(input_field_default, { label, isRequired, autoComplete: "off", isError }),
2513
+ customInput: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2514
+ input_field_default,
2515
+ {
2516
+ label,
2517
+ isRequired,
2518
+ autoComplete: "off",
2519
+ isError,
2520
+ addOnRight: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react20.InputRightElement, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
2521
+ /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_internal_icon6.Calendar, { size: 4, color: "neutral.400" }),
2522
+ value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2523
+ import_react33.IconButton,
2524
+ {
2525
+ "data-test-id": "H0rseVCzGIaqoLho-EPbu",
2526
+ display: "flex",
2527
+ alignItems: "center",
2528
+ variant: "unstyled",
2529
+ "aria-label": "Remove",
2530
+ onClick: onClear,
2531
+ cursor: "pointer",
2532
+ size: "sm",
2533
+ minW: "unset",
2534
+ icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_internal_icon6.Close, { size: 4, color: "neutral.600" })
2535
+ }
2536
+ )
2537
+ ] })
2538
+ }
2539
+ ),
2500
2540
  showPopperArrow: false,
2501
2541
  calendarClassName: (0, import_shared_utils8.cx)({ inline: props.inline }),
2502
2542
  dropdownMode: "select",
@@ -2514,27 +2554,7 @@ var Datepicker = ({
2514
2554
  return component;
2515
2555
  }
2516
2556
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.FormControl, { "data-test-id": "CT_Component_datepicker_wrapper", isInvalid: isError, children: [
2517
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.InputGroup, { children: [
2518
- component,
2519
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react33.InputRightElement, { alignSelf: "center", bottom: 0, flexDir: "row-reverse", width: "auto", mr: 2, gap: 2, children: [
2520
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_internal_icon6.Calendar, { size: 4, color: "neutral.400" }),
2521
- value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
2522
- import_react33.IconButton,
2523
- {
2524
- "data-test-id": "H0rseVCzGIaqoLho-EPbu",
2525
- display: "flex",
2526
- alignItems: "center",
2527
- variant: "unstyled",
2528
- "aria-label": "Remove",
2529
- onClick: onClear,
2530
- cursor: "pointer",
2531
- size: "sm",
2532
- minW: "unset",
2533
- icon: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_internal_icon6.Close, { size: 4, color: "neutral.600" })
2534
- }
2535
- )
2536
- ] })
2537
- ] }),
2557
+ component,
2538
2558
  !isError ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react33.FormHelperText, { fontSize: "text.xs", mt: 1, children: helperText }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react33.FormErrorMessage, { fontSize: "text.xs", mt: 1, children: error })
2539
2559
  ] });
2540
2560
  };
@@ -4875,7 +4895,8 @@ var InputTimeArea = (0, import_react84.forwardRef)((props, ref) => {
4875
4895
  boxSizing: "content-box",
4876
4896
  height: "22px",
4877
4897
  ref,
4878
- p: "2px",
4898
+ px: "2px",
4899
+ py: 0,
4879
4900
  sx: {
4880
4901
  fontVariantNumeric: "tabular-nums"
4881
4902
  },