@antscorp/antsomi-ui 1.3.5-beta.285 → 1.3.5-beta.287

package/es/components/atoms/Icon/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-interface IconProps {
+import { IconProps as OriginIconProps } from '../../icons/type';
+export interface IconProps extends OriginIconProps {
     size?: number;
     width?: number;
     height?: number;
@@ -7,4 +8,3 @@ interface IconProps {
     style?: React.CSSProperties;
 }
 export declare const Icon: import("styled-components").StyledComponent<any, any, IconProps, string | number | symbol>;
-export {};

package/es/components/atoms/Scrollbars/Scrollbars.d.ts

@@ -0,0 +1,5 @@
+import { ScrollbarProps as CustomScrollbarProps } from 'react-custom-scrollbars';
+import React from 'react';
+export interface ScrollbarsProps extends CustomScrollbarProps {
+}
+export declare const Scrollbars: React.FC<ScrollbarsProps>;

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
+// Libraries
+import React from 'react';
+// Styled
+import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
+import { cloneDeep } from 'lodash';
+const THUMB_SIZE = 4;
+export const Scrollbars = props => {
+    const { autoHide = true, autoHeightMax = 0 } = props, restProps = __rest(props, ["autoHide", "autoHeightMax"]);
+    return (React.createElement(CustomScrollbars, Object.assign({ autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({}, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({}, props)), renderTrackVertical: props => React.createElement(VerticalTrack, Object.assign({}, props)), renderTrackHorizontal: props => React.createElement(HorizontalTrack, Object.assign({}, props)), renderView: props => {
+            const { style } = props || {};
+            const newStyle = cloneDeep(style);
+            newStyle.marginBottom = -THUMB_SIZE;
+            newStyle.marginRight = -THUMB_SIZE;
+            newStyle.minHeight = THUMB_SIZE;
+            if (autoHeightMax) {
+                newStyle.maxHeight = parseInt(`${autoHeightMax}`) + THUMB_SIZE;
+            }
+            return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
+        }, hideTracksWhenNotNeeded: true }, restProps)));
+};

package/es/components/atoms/Scrollbars/index.d.ts

@@ -0,0 +1,2 @@
+export { Scrollbars } from './Scrollbars';
+export type { ScrollbarsProps } from './Scrollbars';

package/es/components/atoms/Scrollbars/index.js

@@ -0,0 +1 @@
+export { Scrollbars } from './Scrollbars';

package/es/components/atoms/Scrollbars/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const ScrollbarsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ThumbBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalTrack: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalTrack: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/Scrollbars/styled.js

@@ -0,0 +1,29 @@
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const ScrollbarsWrapper = styled.div ``;
+export const ThumbBar = styled.div `
+  background: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.gray5};
+  border-radius: 4px;
+`;
+export const VerticalTrack = styled.div `
+  position: absolute;
+  width: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 2px;
+  bottom: 2px;
+  top: 2px;
+  border-radius: 4px;
+`;
+export const HorizontalTrack = styled.div `
+  position: absolute;
+  height: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 2px;
+  bottom: 2px;
+  left: 2px;
+  border-radius: 4px;
+`;

package/es/components/atoms/index.d.ts

@@ -40,6 +40,7 @@ export * from './MobileFrame';
 export * from './MobileFrameV2';
 export * from './SlideBar';
 export * from './ReactIframe';
+export * from './Scrollbars';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -40,3 +40,4 @@ export * from './MobileFrame';
 export * from './MobileFrameV2';
 export * from './SlideBar';
 export * from './ReactIframe';
+export * from './Scrollbars';

package/es/components/molecules/EditableName/styled.js

@@ -7,6 +7,7 @@ export const InputWrapperStyled = styled.div `
   background-color: #fff;
   border-bottom: 1px solid transparent;
   max-width: 100%;
+  overflow: hidden;
 
   display: inline-flex;
   align-items: baseline;

package/es/components/organism/DataTable/DataTable.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DataTableProps } from './types';
+export declare function DataTable<TTableDataType>(props: DataTableProps<TTableDataType>): React.JSX.Element | null;

package/es/components/organism/DataTable/DataTable.js

@@ -0,0 +1,33 @@
+/* eslint-disable react/function-component-definition */
+// Libraries
+import React, { useRef } from 'react';
+// Hooks
+import { useDataTable } from './hooks';
+// Styled
+import { DataTableWrapper } from './styled';
+// Components
+import { Table, Pagination, Toolbar } from './components';
+// Providers
+import { DataTableProvider } from './providers/DataTableProvider';
+import { AntdTableConfigProvider } from './providers';
+// Store
+import { createDataTableStore } from './stores';
+function DataTableComponent(props) {
+    // Hooks
+    const { pagination, setPagination } = useDataTable(props);
+    return (React.createElement(DataTableWrapper, null,
+        React.createElement(Toolbar, null),
+        React.createElement(Table, null),
+        React.createElement(Pagination, { id: "data-table-pagination", page: pagination.page, pageSize: pagination.pageSize, onChange: setPagination })));
+}
+export function DataTable(props) {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createDataTableStore(props);
+    }
+    if (!storeRef.current)
+        return null;
+    return (React.createElement(AntdTableConfigProvider, null,
+        React.createElement(DataTableProvider, { store: storeRef.current },
+            React.createElement(DataTableComponent, Object.assign({}, props)))));
+}

package/es/components/organism/DataTable/components/AddButton/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface AddButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+}
+export declare const AddButton: React.FC<AddButtonProps>;

package/es/components/organism/DataTable/components/AddButton/index.js

@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo } from 'react';
+import styled from 'styled-components';
+// Components
+import { Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const StyledAddButton = styled(Flex) `
+  border-radius: 100%;
+  width: 30px;
+  height: 30px;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+  color: #fff;
+  cursor: pointer;
+`;
+export const AddButton = memo(props => {
+    const { show } = props, restProps = __rest(props, ["show"]);
+    if (!show)
+        return null;
+    return (React.createElement(StyledAddButton, Object.assign({ align: "center", justify: "center" }, restProps),
+        React.createElement(Icon, { type: "icon-ants-plus-square", size: 14 })));
+});

package/es/components/organism/DataTable/components/Filter/AddFilterButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface AddFilterButtonProps {
+}
+export declare const AddFilterButton: React.FC<AddFilterButtonProps>;
+export {};

package/es/components/organism/DataTable/components/Filter/AddFilterButton.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { Flex, Icon, Button } from '@antscorp/antsomi-ui/es/components/atoms';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Styled
+import { FilterButton } from './styled';
+import { SavedFilterAndMetrics } from './SavedFilterAndMetrics';
+export const AddFilterButton = memo(props => {
+    const restProps = __rest(props, []);
+    const { t } = i18nInstance;
+    return (React.createElement(Flex, { align: "center", gap: 7 },
+        React.createElement(FilterButton, null,
+            React.createElement(Icon, { type: "icon-ants-filter-slim", size: 18 })),
+        React.createElement(SavedFilterAndMetrics, null,
+            React.createElement(Button, { type: "text" }, t(translations.filter.addFilter).toString()))));
+});

package/es/components/organism/DataTable/components/Filter/SavedFilterAndMetrics.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PopoverProps } from 'antd';
+interface FilterSelectFieldsProps extends PopoverProps {
+}
+export declare const SavedFilterAndMetrics: React.FC<React.PropsWithChildren<FilterSelectFieldsProps>>;
+export {};

package/es/components/organism/DataTable/components/Filter/SavedFilterAndMetrics.js

@@ -0,0 +1,111 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useMemo } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars';
+// Components
+import { Input, Popover, Icon, Divider, Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Menu } from '@antscorp/antsomi-ui/es/components/organism';
+// Styled
+import { FilterSelectFieldsContent } from './styled';
+import { IconButton } from '../../styled';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Context
+import { useDataTableContext } from '../../contexts/DataTableContext';
+import { serializeFilterMetricsToMenuItems } from '../../utils';
+import styled from 'styled-components';
+const ScrollWrapper = styled.div `
+  overflow-y: auto;
+`;
+const TestWrapper = styled.div `
+  /* Container styling */
+  &.container {
+    position: relative;
+    height: 400px;
+    width: 80%;
+    overflow: hidden;
+  }
+
+  /* Scrollable content styling */
+  .scrollable-content {
+    height: 100%;
+    width: 100%;
+    overflow-y: scroll;
+    padding-right: 20px; /* Add some space for the custom scrollbar */
+  }
+
+  /* Styling the scrollbar for Webkit browsers */
+  .scrollable-content::-webkit-scrollbar {
+    width: 16px;
+  }
+
+  .scrollable-content::-webkit-scrollbar-track {
+    background: #bd4b4b;
+  }
+
+  .scrollable-content::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 8px;
+    border: 4px solid transparent; /* Creates space around the thumb */
+    background-clip: content-box; /* Prevents thumb from extending into the border */
+  }
+
+  .scrollable-content::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+
+  /* Ensure scrollbar appears over other elements */
+  .scrollable-content::-webkit-scrollbar {
+    z-index: 10;
+    position: relative;
+  }
+
+  /* Styling for other browsers (standard) */
+  .scrollable-content {
+    scrollbar-color: #888 #f1f1f1; /* thumb and track colors */
+    scrollbar-width: thin; /* thin scrollbar */
+  }
+
+  /* Example item styling */
+  .item {
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+  }
+`;
+export const SavedFilterAndMetrics = props => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    const savedFilter = useDataTableContext(store => store.filter.savedFilter);
+    const filterMetrics = useDataTableContext(store => store.filter.filterMetrics);
+    // Variables
+    const { list, selected } = savedFilter || {};
+    // Memos
+    const filterMetricItems = useMemo(() => serializeFilterMetricsToMenuItems(filterMetrics || []), [filterMetrics]);
+    console.log({ filterMetricItems });
+    // Handlers
+    const renderSavedFilter = () => (React.createElement(Menu, { selectedKeys: [(selected === null || selected === void 0 ? void 0 : selected.toString()) || ''], items: list === null || list === void 0 ? void 0 : list.map(({ id, name, removable }) => ({
+            key: id,
+            label: (React.createElement(Flex, { align: "center", justify: "space-between" },
+                name,
+                !!removable && (React.createElement(IconButton, null,
+                    React.createElement(Icon, { type: "icon-ants-outline-delete" }))))),
+        })) }));
+    const renderFilterMetrics = () => React.createElement(Menu, { mode: "inline", items: filterMetricItems });
+    const content = (React.createElement(FilterSelectFieldsContent, null,
+        React.createElement(Input, { bordered: false, className: "search-input", autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24 }) }),
+        React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '8px 0 2px 0' } }),
+        React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 300, autoHide: true },
+            renderSavedFilter(),
+            React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '8px 0 2px 0' } }),
+            renderFilterMetrics())));
+    return (React.createElement(Popover, Object.assign({ content: content, trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0 }, arrow: false, placement: "bottomLeft" }, restProps), children));
+};

package/es/components/organism/DataTable/components/Filter/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface FilterProps {
+}
+export declare const Filter: React.FC<FilterProps>;
+export {};

package/es/components/organism/DataTable/components/Filter/index.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+import { FilterWrapper } from './styled';
+import { AddFilterButton } from './AddFilterButton';
+export const Filter = props => {
+    const restProps = __rest(props, []);
+    return (React.createElement(FilterWrapper, { align: "center" },
+        React.createElement(AddFilterButton, null)));
+};

package/es/components/organism/DataTable/components/Filter/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const FilterWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const FilterButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FilterSelectFieldsContent: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/organism/DataTable/components/Filter/styled.js

@@ -0,0 +1,26 @@
+// Libraries
+import styled from 'styled-components';
+// Componets
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const FilterWrapper = styled(Flex) ``;
+export const FilterButton = styled.div `
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+/* Filter Item */
+export const FilterSelectFieldsContent = styled.div `
+  .search-input {
+    margin-top: 8px;
+    input {
+      background-color: #fff !important;
+    }
+
+    i {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    }
+  }
+`;

package/es/components/organism/DataTable/components/ModifyColumn/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface ModifyColumnProps {
+}
+export declare const ModifyColumn: React.FC<ModifyColumnProps>;
+export {};

package/es/components/organism/DataTable/components/ModifyColumn/index.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+export const ModifyColumn = props => {
+    const restProps = __rest(props, []);
+    return React.createElement("div", null, "ModifyColumn");
+};

package/es/components/organism/DataTable/components/Pagination/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FlexProps } from 'antd/lib';
+type TChangePageSizePayload = {
+    pageSize: number;
+    page: number;
+};
+interface PaginationProps extends Omit<FlexProps, 'children' | 'onChange'> {
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    onChange?: (payload: TChangePageSizePayload) => void;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+export {};

package/es/components/organism/DataTable/components/Pagination/index.js

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useMemo } from 'react';
+// Components
+import { Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Flex, Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Instance
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Locales
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Styled
+import { ActionButton, PaginationWrapper } from './styled';
+// Constants
+import { DEFAULT_PAGE, DEFAULT_PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../../constants';
+const { Text } = Typography;
+export const Pagination = props => {
+    // Props
+    const { pageSize = DEFAULT_PAGE_SIZE, page = DEFAULT_PAGE, total = 70, onChange } = props, restProps = __rest(props, ["pageSize", "page", "total", "onChange"]);
+    // Instance
+    const { t } = i18nInstance;
+    // Memo
+    const paginationSizeOptions = useMemo(() => PAGE_SIZE_OPTIONS.map(pageSize => ({ label: pageSize.toString(), value: pageSize })), []);
+    // Variables
+    const disabledNext = page * pageSize >= total;
+    const disabledPrevious = page === 1;
+    // Handlers
+    const onChangePagination = (payload) => {
+        if (onChange) {
+            onChange(Object.assign({ page,
+                pageSize }, payload));
+        }
+    };
+    return (React.createElement(PaginationWrapper, Object.assign({ align: "center", gap: 10 }, restProps),
+        React.createElement(Flex, { align: "center", gap: 10 },
+            React.createElement(Text, null,
+                t(translations.pagination.showRow).toString(),
+                ":"),
+            React.createElement(Select, { defaultValue: DEFAULT_PAGE_SIZE, value: pageSize, className: "show-row-select", options: paginationSizeOptions, popupMatchSelectWidth: 70, onChange: value => onChangePagination({ pageSize: value, page: 1 }) })),
+        React.createElement(Text, null, `${page * pageSize - pageSize + 1} - ${Math.min(page * pageSize, total)} of ${total}`),
+        React.createElement(Flex, { align: "center", gap: 10 },
+            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: 1 }), disabled: disabledPrevious },
+                React.createElement(Icon, { type: "icon-ants-first-page", size: 12 })),
+            React.createElement(ActionButton, { disabled: disabledPrevious, onClick: () => onChangePagination({ page: page - 1 }) },
+                React.createElement(Icon, { type: "icon-ants-angle-left", size: 12 })),
+            React.createElement(ActionButton, { disabled: disabledNext, onClick: () => onChangePagination({ page: page + 1 }) },
+                React.createElement(Icon, { type: "icon-ants-angle-right", size: 12 })),
+            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: Math.ceil(total / pageSize) }), disabled: disabledNext },
+                React.createElement(Icon, { type: "icon-ants-last-page", size: 12 })))));
+};

package/es/components/organism/DataTable/components/Pagination/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const PaginationWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const ActionButton: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;

package/es/components/organism/DataTable/components/Pagination/styled.js

@@ -0,0 +1,34 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const PaginationWrapper = styled(Flex) `
+  height: 60px;
+
+  .show-row-select {
+    width: 50px;
+  }
+`;
+export const ActionButton = styled.div `
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  transition: all 0.3s;
+
+  ${props => props.disabled &&
+    css `
+      pointer-events: none;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5};
+    `}
+
+  &:hover {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText};
+  }
+
+  cursor: pointer;
+`;

package/es/components/organism/DataTable/components/Table/ResizableCell.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ResizeCallbackData } from 'react-resizable';
+interface HandleProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+interface ResizableCellProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'onResize'> {
+    onResize?: (e: React.SyntheticEvent<Element, Event>, data: ResizeCallbackData) => void;
+    width?: number;
+    handleProps?: HandleProps;
+}
+export declare const ResizableCell: React.FC<ResizableCellProps>;
+export {};

package/es/components/organism/DataTable/components/Table/ResizableCell.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+import { Resizable } from 'react-resizable';
+export const ResizableCell = props => {
+    var _a;
+    const { width, onResize, handleProps } = props, restProps = __rest(props, ["width", "onResize", "handleProps"]);
+    const isRowSelectionCol = (_a = props === null || props === void 0 ? void 0 : props.className) === null || _a === void 0 ? void 0 : _a.includes('antsomi-table-selection-column');
+    if (isRowSelectionCol || !width) {
+        return React.createElement("th", Object.assign({}, restProps));
+    }
+    return (React.createElement(Resizable, { width: width || 0, height: 0, handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
+                e.stopPropagation();
+            } },
+            React.createElement("span", Object.assign({ 
+                /* react-resizable-handle */
+                className: "resizable-handle" }, handleProps))), onResize: (...args) => onResize && onResize(...args), draggableOpts: { enableUserSelectHack: false } },
+        React.createElement("th", Object.assign({}, restProps))));
+};

package/es/components/organism/DataTable/components/Table/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TableProps as AntdTableProps } from 'antd';
+interface TableProps extends AntdTableProps<any> {
+}
+export declare const Table: React.FC<TableProps>;
+export {};