@ctlyst.id/internal-ui 5.6.1 → 5.6.3

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
@@ -976,6 +976,33 @@ declare const getTheme: (foundations: Record<string, any>) => Record<string, any
976
976
  declare const theme: Record<string, any>;
977
977
  type Theme = typeof theme;
978
978
 
979
+ declare class DragThreshold {
980
+ isDrag: boolean;
981
+ mouseDown: boolean;
982
+ x0: number;
983
+ y0: number;
984
+ /** threshold for dragging behavior in pixel
985
+ * @type {number}
986
+ */
987
+ threshold: number;
988
+ constructor();
989
+ reset(): void;
990
+ start(x: number, y: number): void;
991
+ move(x: number, y: number): void;
992
+ isDragged(): boolean;
993
+ }
994
+
995
+ interface DragOrClickOption {
996
+ onMouseDown?: (e: React.MouseEvent) => void;
997
+ onMouseMove?: (e: React.MouseEvent) => void;
998
+ onMouseUp?: (e: React.MouseEvent) => void;
999
+ onClick?: (e: React.MouseEvent) => void;
1000
+ }
1001
+ declare const useDragOrClick: () => {
1002
+ clickOrDragged: DragThreshold;
1003
+ getDragOrClickProps: ({ onClick, onMouseDown, onMouseMove, onMouseUp, }: DragOrClickOption) => Omit<DragOrClickOption, 'onClick'>;
1004
+ };
1005
+
979
1006
  declare function useFetcher(): {
980
1007
  fetcher: <TResponse = unknown>({ url, data, method, headers, ...config }: AxiosRequestConfig) => Promise<axios.AxiosResponse<TResponse, any>>;
981
1008
  };
@@ -996,4 +1023,4 @@ declare const ProviderContext: React__default.Context<ProviderContextObject>;
996
1023
  declare const useInternalUI: () => ProviderContextObject;
997
1024
  declare const Provider: FC<ProviderProps>;
998
1025
 
999
- export { AccordionEye, AccordionIndicator, Alert, AlertAction, type AlertActionProps, AlertClose, type AlertCloseProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, Badge, type BadgeProps, BreadCrumb, type BreadCrumbParentProps, type BreadCrumbProps, Button, type ButtonProps, CHECKBOX_STATE, CardCustom as Card, type CardProps, CheckboxComponent as Checkbox, type CheckboxComponentProps, CheckboxGroupComponent as CheckboxGroup, type CheckboxGroupComponentProps, Chips, type ChipsProps, ClearIndicator, Counter, type CustomLoaderProps, DEFAULT_EXCEL_MIME_TYPE, DEFAULT_IMAGE_MIME_TYPE, _default as DataTable, type DataTableProps, type DataTableRefs, DatePickerMonth, type DatePickerMonthProps, Datepicker, type DatepickerProps, Dialog, type DisabledRowData, DropdownIndicator, EXCEL_EXT, EmptyState, type Environment, ErrorCode, Field, type FieldProps, Header, type HeaderDataProps, type HeaderProps, IMG_EXT, InputAddonLeft, InputAddonRight, InputField, type InputFieldProps, Loader, type LoaderProps, Logo, type LogoProps, Navigation as MainMenu, ModalBackButton, MultiDatePickerMonth, type MultiDatePickerMonthProps, MultiValue, MultiValueRemove, NavItem, type NavItemProps, Navbar, type NavbarProps, NavigationBar, type NavigationBarProps, type NavigationProps, NoOptionsMessage, ONE_MEGA_BYTE, type OptionGroup, type OptionMultiGroup, type OptionsGroup, Pagination, PaginationDetail, type PaginationDetailProps, PaginationFilter, type PaginationFilterProps, type PaginationProps, PopoverContent, Profile, type ProfileProps, type Props, Provider, ProviderContext, Radio, RadioGroup, type RadioGroupComponentProps, type RadioProps, Rating, type RatingProps, Select, SelectAsync, SelectAsyncCreatable, type SelectAsyncCreatableProps, type SelectAsyncProps, SelectCheckbox as SelectCheckBox, SelectCreatable, type SelectCreatableProps, type SelectProps, type SelectWithCheckboxBaseProps, Sidebar, SidebarHeader, type SidebarHeaderProps, SidebarMenu, type SidebarMenuProps, type SidebarProps, Switch, type SwitchProps, Tab, type TableStyleProps, type TextAreaProps, TextareaField, type Theme, Time, TimeInput, type TimeInputProps, type TimeOptions, Tooltip, type TooltipProps, Uploader, type UploaderProps, Version, type VersionProps, VoilaLogo, XMSLogo, concatList, createExtendTheme, defaultOnHandleRejections, dimensionValidator, formatValidationMessage, getSelectAllCheckboxState, getTheme, isCellDisabled, isRatioEqual, messages, selectStyles, theme, themeSelect, timeFromString, useAlertStyles, useDataTable, useFetcher, useInternalUI, useSelectTable, useToast };
1026
+ export { AccordionEye, AccordionIndicator, Alert, AlertAction, type AlertActionProps, AlertClose, type AlertCloseProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, Badge, type BadgeProps, BreadCrumb, type BreadCrumbParentProps, type BreadCrumbProps, Button, type ButtonProps, CHECKBOX_STATE, CardCustom as Card, type CardProps, CheckboxComponent as Checkbox, type CheckboxComponentProps, CheckboxGroupComponent as CheckboxGroup, type CheckboxGroupComponentProps, Chips, type ChipsProps, ClearIndicator, Counter, type CustomLoaderProps, DEFAULT_EXCEL_MIME_TYPE, DEFAULT_IMAGE_MIME_TYPE, _default as DataTable, type DataTableProps, type DataTableRefs, DatePickerMonth, type DatePickerMonthProps, Datepicker, type DatepickerProps, Dialog, type DisabledRowData, type DragOrClickOption, DropdownIndicator, EXCEL_EXT, EmptyState, type Environment, ErrorCode, Field, type FieldProps, Header, type HeaderDataProps, type HeaderProps, IMG_EXT, InputAddonLeft, InputAddonRight, InputField, type InputFieldProps, Loader, type LoaderProps, Logo, type LogoProps, Navigation as MainMenu, ModalBackButton, MultiDatePickerMonth, type MultiDatePickerMonthProps, MultiValue, MultiValueRemove, NavItem, type NavItemProps, Navbar, type NavbarProps, NavigationBar, type NavigationBarProps, type NavigationProps, NoOptionsMessage, ONE_MEGA_BYTE, type OptionGroup, type OptionMultiGroup, type OptionsGroup, Pagination, PaginationDetail, type PaginationDetailProps, PaginationFilter, type PaginationFilterProps, type PaginationProps, PopoverContent, Profile, type ProfileProps, type Props, Provider, ProviderContext, Radio, RadioGroup, type RadioGroupComponentProps, type RadioProps, Rating, type RatingProps, Select, SelectAsync, SelectAsyncCreatable, type SelectAsyncCreatableProps, type SelectAsyncProps, SelectCheckbox as SelectCheckBox, SelectCreatable, type SelectCreatableProps, type SelectProps, type SelectWithCheckboxBaseProps, Sidebar, SidebarHeader, type SidebarHeaderProps, SidebarMenu, type SidebarMenuProps, type SidebarProps, Switch, type SwitchProps, Tab, type TableStyleProps, type TextAreaProps, TextareaField, type Theme, Time, TimeInput, type TimeInputProps, type TimeOptions, Tooltip, type TooltipProps, Uploader, type UploaderProps, Version, type VersionProps, VoilaLogo, XMSLogo, concatList, createExtendTheme, defaultOnHandleRejections, dimensionValidator, formatValidationMessage, getSelectAllCheckboxState, getTheme, isCellDisabled, isRatioEqual, messages, selectStyles, theme, themeSelect, timeFromString, useAlertStyles, useDataTable, useDragOrClick, useFetcher, useInternalUI, useSelectTable, useToast };
package/dist/index.d.ts CHANGED
@@ -976,6 +976,33 @@ declare const getTheme: (foundations: Record<string, any>) => Record<string, any
976
976
  declare const theme: Record<string, any>;
977
977
  type Theme = typeof theme;
978
978
 
979
+ declare class DragThreshold {
980
+ isDrag: boolean;
981
+ mouseDown: boolean;
982
+ x0: number;
983
+ y0: number;
984
+ /** threshold for dragging behavior in pixel
985
+ * @type {number}
986
+ */
987
+ threshold: number;
988
+ constructor();
989
+ reset(): void;
990
+ start(x: number, y: number): void;
991
+ move(x: number, y: number): void;
992
+ isDragged(): boolean;
993
+ }
994
+
995
+ interface DragOrClickOption {
996
+ onMouseDown?: (e: React.MouseEvent) => void;
997
+ onMouseMove?: (e: React.MouseEvent) => void;
998
+ onMouseUp?: (e: React.MouseEvent) => void;
999
+ onClick?: (e: React.MouseEvent) => void;
1000
+ }
1001
+ declare const useDragOrClick: () => {
1002
+ clickOrDragged: DragThreshold;
1003
+ getDragOrClickProps: ({ onClick, onMouseDown, onMouseMove, onMouseUp, }: DragOrClickOption) => Omit<DragOrClickOption, 'onClick'>;
1004
+ };
1005
+
979
1006
  declare function useFetcher(): {
980
1007
  fetcher: <TResponse = unknown>({ url, data, method, headers, ...config }: AxiosRequestConfig) => Promise<axios.AxiosResponse<TResponse, any>>;
981
1008
  };
@@ -996,4 +1023,4 @@ declare const ProviderContext: React__default.Context<ProviderContextObject>;
996
1023
  declare const useInternalUI: () => ProviderContextObject;
997
1024
  declare const Provider: FC<ProviderProps>;
998
1025
 
999
- export { AccordionEye, AccordionIndicator, Alert, AlertAction, type AlertActionProps, AlertClose, type AlertCloseProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, Badge, type BadgeProps, BreadCrumb, type BreadCrumbParentProps, type BreadCrumbProps, Button, type ButtonProps, CHECKBOX_STATE, CardCustom as Card, type CardProps, CheckboxComponent as Checkbox, type CheckboxComponentProps, CheckboxGroupComponent as CheckboxGroup, type CheckboxGroupComponentProps, Chips, type ChipsProps, ClearIndicator, Counter, type CustomLoaderProps, DEFAULT_EXCEL_MIME_TYPE, DEFAULT_IMAGE_MIME_TYPE, _default as DataTable, type DataTableProps, type DataTableRefs, DatePickerMonth, type DatePickerMonthProps, Datepicker, type DatepickerProps, Dialog, type DisabledRowData, DropdownIndicator, EXCEL_EXT, EmptyState, type Environment, ErrorCode, Field, type FieldProps, Header, type HeaderDataProps, type HeaderProps, IMG_EXT, InputAddonLeft, InputAddonRight, InputField, type InputFieldProps, Loader, type LoaderProps, Logo, type LogoProps, Navigation as MainMenu, ModalBackButton, MultiDatePickerMonth, type MultiDatePickerMonthProps, MultiValue, MultiValueRemove, NavItem, type NavItemProps, Navbar, type NavbarProps, NavigationBar, type NavigationBarProps, type NavigationProps, NoOptionsMessage, ONE_MEGA_BYTE, type OptionGroup, type OptionMultiGroup, type OptionsGroup, Pagination, PaginationDetail, type PaginationDetailProps, PaginationFilter, type PaginationFilterProps, type PaginationProps, PopoverContent, Profile, type ProfileProps, type Props, Provider, ProviderContext, Radio, RadioGroup, type RadioGroupComponentProps, type RadioProps, Rating, type RatingProps, Select, SelectAsync, SelectAsyncCreatable, type SelectAsyncCreatableProps, type SelectAsyncProps, SelectCheckbox as SelectCheckBox, SelectCreatable, type SelectCreatableProps, type SelectProps, type SelectWithCheckboxBaseProps, Sidebar, SidebarHeader, type SidebarHeaderProps, SidebarMenu, type SidebarMenuProps, type SidebarProps, Switch, type SwitchProps, Tab, type TableStyleProps, type TextAreaProps, TextareaField, type Theme, Time, TimeInput, type TimeInputProps, type TimeOptions, Tooltip, type TooltipProps, Uploader, type UploaderProps, Version, type VersionProps, VoilaLogo, XMSLogo, concatList, createExtendTheme, defaultOnHandleRejections, dimensionValidator, formatValidationMessage, getSelectAllCheckboxState, getTheme, isCellDisabled, isRatioEqual, messages, selectStyles, theme, themeSelect, timeFromString, useAlertStyles, useDataTable, useFetcher, useInternalUI, useSelectTable, useToast };
1026
+ export { AccordionEye, AccordionIndicator, Alert, AlertAction, type AlertActionProps, AlertClose, type AlertCloseProps, AlertDescription, type AlertDescriptionProps, AlertIcon, type AlertIconProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, Anchor, type AnchorProps, Badge, type BadgeProps, BreadCrumb, type BreadCrumbParentProps, type BreadCrumbProps, Button, type ButtonProps, CHECKBOX_STATE, CardCustom as Card, type CardProps, CheckboxComponent as Checkbox, type CheckboxComponentProps, CheckboxGroupComponent as CheckboxGroup, type CheckboxGroupComponentProps, Chips, type ChipsProps, ClearIndicator, Counter, type CustomLoaderProps, DEFAULT_EXCEL_MIME_TYPE, DEFAULT_IMAGE_MIME_TYPE, _default as DataTable, type DataTableProps, type DataTableRefs, DatePickerMonth, type DatePickerMonthProps, Datepicker, type DatepickerProps, Dialog, type DisabledRowData, type DragOrClickOption, DropdownIndicator, EXCEL_EXT, EmptyState, type Environment, ErrorCode, Field, type FieldProps, Header, type HeaderDataProps, type HeaderProps, IMG_EXT, InputAddonLeft, InputAddonRight, InputField, type InputFieldProps, Loader, type LoaderProps, Logo, type LogoProps, Navigation as MainMenu, ModalBackButton, MultiDatePickerMonth, type MultiDatePickerMonthProps, MultiValue, MultiValueRemove, NavItem, type NavItemProps, Navbar, type NavbarProps, NavigationBar, type NavigationBarProps, type NavigationProps, NoOptionsMessage, ONE_MEGA_BYTE, type OptionGroup, type OptionMultiGroup, type OptionsGroup, Pagination, PaginationDetail, type PaginationDetailProps, PaginationFilter, type PaginationFilterProps, type PaginationProps, PopoverContent, Profile, type ProfileProps, type Props, Provider, ProviderContext, Radio, RadioGroup, type RadioGroupComponentProps, type RadioProps, Rating, type RatingProps, Select, SelectAsync, SelectAsyncCreatable, type SelectAsyncCreatableProps, type SelectAsyncProps, SelectCheckbox as SelectCheckBox, SelectCreatable, type SelectCreatableProps, type SelectProps, type SelectWithCheckboxBaseProps, Sidebar, SidebarHeader, type SidebarHeaderProps, SidebarMenu, type SidebarMenuProps, type SidebarProps, Switch, type SwitchProps, Tab, type TableStyleProps, type TextAreaProps, TextareaField, type Theme, Time, TimeInput, type TimeInputProps, type TimeOptions, Tooltip, type TooltipProps, Uploader, type UploaderProps, Version, type VersionProps, VoilaLogo, XMSLogo, concatList, createExtendTheme, defaultOnHandleRejections, dimensionValidator, formatValidationMessage, getSelectAllCheckboxState, getTheme, isCellDisabled, isRatioEqual, messages, selectStyles, theme, themeSelect, timeFromString, useAlertStyles, useDataTable, useDragOrClick, useFetcher, useInternalUI, useSelectTable, useToast };
package/dist/index.js CHANGED
@@ -378,6 +378,7 @@ __export(src_exports, {
378
378
  useDataTable: () => useDataTable,
379
379
  useDimensions: () => import_react110.useDimensions,
380
380
  useDisclosure: () => import_react110.useDisclosure,
381
+ useDragOrClick: () => useDragOrClick,
381
382
  useDrawerContext: () => import_react58.useDrawerContext,
382
383
  useFetcher: () => useFetcher,
383
384
  useImage: () => import_react98.useImage,
@@ -1676,24 +1677,25 @@ var DataTable = React5.forwardRef((props, ref) => {
1676
1677
  ...((_e = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _e.length) && hasScroll ? { "data-pin-right": true } : {},
1677
1678
  ...container,
1678
1679
  children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react30.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
1679
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.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_react30.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1680
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.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_react30.Tr, { ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1680
1681
  import_react30.Th,
1681
1682
  {
1682
1683
  colSpan: header.colSpan,
1683
- width: `${header.getSize()}px`,
1684
1684
  _first: { paddingLeft: `${paddingRowX + 8}px` },
1685
1685
  _last: { paddingRight: `${paddingRowX + 8}px` },
1686
1686
  ...styles == null ? void 0 : styles.tableColumnHeader,
1687
+ ...getTableHeaderSize(header, index, headerGroup.headers.length),
1687
1688
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Flex, { "data-test-id": "CT_component_data-table_loader", align: "center", gap: 2, children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) })
1688
1689
  },
1689
1690
  header.id
1690
1691
  )) }, headerGroup.id)) }),
1691
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1692
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1692
1693
  import_react30.Td,
1693
1694
  {
1694
- width: 210,
1695
+ width: "100%",
1695
1696
  _first: { paddingLeft: `${paddingRowX + 8}px` },
1696
1697
  _last: { paddingRight: `${paddingRowX + 8}px` },
1698
+ ...styles == null ? void 0 : styles.tableCell,
1697
1699
  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Skeleton, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i)
1698
1700
  },
1699
1701
  i
@@ -1729,17 +1731,17 @@ var DataTable = React5.forwardRef((props, ref) => {
1729
1731
  gap: 2,
1730
1732
  children: [
1731
1733
  (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
1732
- (_b2 = header.column.getCanSort() && {
1733
- asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
1734
- desc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
1735
- }[header.column.getIsSorted()]) != null ? _b2 : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1734
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
1736
1735
  import_react30.Box,
1737
1736
  {
1738
1737
  as: "span",
1739
1738
  cursor: header.column.getCanSort() ? "pointer" : "default",
1740
1739
  "data-test-id": `CT_Container_SortingIcon_${header.id}`,
1741
1740
  onClick: header.column.getToggleSortingHandler(),
1742
- children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Box, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { color: "neutral.500" }) })
1741
+ children: (_b2 = header.column.getCanSort() && {
1742
+ asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
1743
+ desc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
1744
+ }[header.column.getIsSorted()]) != null ? _b2 : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Box, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { color: "neutral.500" }) })
1743
1745
  }
1744
1746
  )
1745
1747
  ]
@@ -8579,6 +8581,7 @@ var import_react111 = require("@chakra-ui/react");
8579
8581
  useDataTable,
8580
8582
  useDimensions,
8581
8583
  useDisclosure,
8584
+ useDragOrClick,
8582
8585
  useDrawerContext,
8583
8586
  useFetcher,
8584
8587
  useImage,