@sky-mavis/design-system 0.2.0

package/dist/components/dialog/DialogFooter.js

@@ -0,0 +1,23 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogFooter = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+exports.DialogFooter = props => {
+    const { className, children } = props, restProps = __rest(props, ["className", "children"]);
+    return (react_1.default.createElement("div", Object.assign({ className: classnames_1.default('ds-dialog-footer', className) }, restProps), children));
+};

package/dist/components/dialog/DialogHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * A space-delimited list of class names.
+     */
+    className?: string;
+}
+export declare const DialogHeader: React.FC<Props>;
+export {};

package/dist/components/dialog/DialogHeader.js

@@ -0,0 +1,24 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogHeader = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+exports.DialogHeader = props => {
+    const { className, children } = props, restProps = __rest(props, ["className", "children"]);
+    return (react_1.default.createElement("div", Object.assign({ className: classnames_1.default('ds-dialog-header', className) }, restProps),
+        react_1.default.createElement("h5", null, children)));
+};

package/dist/components/form-item/FormItem.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+interface Props {
+    /**
+     * A space-delimited list of class names to pass along to a child element.
+     */
+    className?: string;
+    /**
+     * A space-delimited list of class names to pass along to the injected label element.
+     */
+    labelClassName?: string;
+    /**
+     * Should label apply disabled styles.
+     */
+    disabled?: boolean;
+    /**
+     * Content of the <label> element.
+     */
+    label?: React.ReactNode;
+    /**
+     * for attribute of <label> element.
+     */
+    labelFor?: string;
+    /**
+     * Should FormItem apply inline styles.
+     */
+    inline?: boolean;
+    /**
+     * Visual intent color, this will apply on background, title and icon.
+     *
+     * Note that intent won't be passed automatically to children input elements.
+     * You will have to pass intent to children yourself.
+     */
+    intent?: IntentType;
+    /**
+     * Helper text content appears below the input elements.
+     */
+    helperText?: React.ReactNode;
+}
+export declare const FormItem: React.FC<Props>;
+export {};

package/dist/components/form-item/FormItem.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormItem = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const intent_1 = require("../../utils/intent");
+exports.FormItem = props => {
+    const { className, labelClassName, disabled, intent, inline, label, labelFor, children, helperText, } = props;
+    const intentClassName = intent_1.getIntentClassname(intent);
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-form-group', intentClassName, className, {
+            'ds-inline': inline === true,
+            'ds-disabled': disabled === true,
+        }) },
+        label && (react_1.default.createElement("label", { htmlFor: labelFor, className: classnames_1.default('ds-label', labelClassName) }, label)),
+        react_1.default.createElement("div", null,
+            children,
+            react_1.default.createElement("div", { className: "ds-helper-text" }, helperText))));
+};

package/dist/components/input/Input.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { IntentType } from '../../commons/types';
+import { SvgIconProps } from '../../icons/svg-icon/SvgIcon';
+declare type InputHtmlProps = React.InputHTMLAttributes<HTMLInputElement>;
+interface Props extends InputHtmlProps {
+    /**
+     * Visual intent color apply to Input element.
+     */
+    intent?: IntentType;
+    /**
+     * Left elements appear within the Input, use inline style elements for best result.
+     */
+    leftElement?: React.ReactNode;
+    /**
+     * Leftmost Icon of the Input. Can use customized SvgIcon or any icon from Sky
+     * Mavis icon pack.
+     */
+    leftIcon?: React.FC<SvgIconProps>;
+    /**
+     * Right elements appear within the Input, use inline style elements for best result.
+     */
+    rightElement?: React.ReactNode;
+    /**
+     * Rightmost Icon of the Input. Can use customized SvgIcon or any icon from Sky
+     * Mavis icon pack.
+     */
+    rightIcon?: React.FC<SvgIconProps>;
+    /**
+     *  Should Input apply Large or Default styles
+     */
+    large?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/input/Input.js

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const intent_1 = require("../../utils/intent");
+exports.Input = react_1.default.forwardRef((props, ref) => {
+    const { className, intent, leftIcon: LeftIcon, leftElement, rightIcon: RightIcon, large, rightElement } = props, htmlProps = __rest(props, ["className", "intent", "leftIcon", "leftElement", "rightIcon", "large", "rightElement"]);
+    const intentClassName = intent_1.getIntentClassname(intent);
+    const leftElementSpan = react_1.useRef(null);
+    const rightElementSpan = react_1.useRef(null);
+    const [paddingLeft, setPaddingLeft] = react_1.useState();
+    const [paddingRight, setPaddingRight] = react_1.useState();
+    react_1.useEffect(() => {
+        const leftThingsWidth = leftElementSpan.current !== null ? leftElementSpan.current.clientWidth + 8 : 0;
+        setPaddingLeft(16 + leftThingsWidth);
+    });
+    react_1.useEffect(() => {
+        const rightThingsWidth = rightElementSpan.current !== null ? rightElementSpan.current.clientWidth + 8 : 0;
+        setPaddingRight(16 + rightThingsWidth);
+    });
+    return (react_1.default.createElement("span", { className: classnames_1.default(className, 'ds-input-wrapper') },
+        (LeftIcon || leftElement) && (react_1.default.createElement("span", { ref: leftElementSpan, className: "ds-input-left" },
+            LeftIcon && (react_1.default.createElement("span", { className: "ds-icon" },
+                react_1.default.createElement(LeftIcon, { size: 24 }))),
+            leftElement && react_1.default.createElement("span", null, leftElement))),
+        react_1.default.createElement("input", Object.assign({ ref: ref, style: { paddingLeft, paddingRight }, className: classnames_1.default(intentClassName, 'ds-input', { large }) }, htmlProps)),
+        (RightIcon || rightElement) && (react_1.default.createElement("span", { ref: rightElementSpan, className: "ds-input-right" },
+            rightElement && react_1.default.createElement("span", null, rightElement),
+            RightIcon && (react_1.default.createElement("span", { className: "ds-icon" },
+                react_1.default.createElement(RightIcon, { size: 24 })))))));
+});
+exports.Input.displayName = 'Input';

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface MenuProps {
+    /**
+     * A space-delimited list of class names to pass along to a Menu element.
+     */
+    className?: string;
+    /**
+     * Called when the Menu Item is selected.
+     */
+    onSelect?: (e?: React.SyntheticEvent, itemId?: number | string) => void;
+    /**
+     * Value of select Menu Item
+     */
+    selectedItem?: number | string;
+    /**
+     * A flag to hide border and box shadow
+     */
+    noShadow?: boolean;
+}
+export declare const Menu: React.FC<MenuProps>;

package/dist/components/menu/Menu.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const MenuItem_1 = require("./MenuItem");
+exports.Menu = props => {
+    const { children, className, noShadow, onSelect, selectedItem } = props;
+    const handleSelectItem = (e, itemId) => {
+        !!onSelect && onSelect(e, itemId);
+    };
+    const menuItemElements = react_1.default.Children.map(children, child => {
+        if (MenuItem_1.isMenuItemElement(child)) {
+            return react_1.cloneElement(child, {
+                onSelect: handleSelectItem,
+                isSelected: selectedItem === child.props.id,
+            });
+        }
+        return child;
+    });
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-menu', { 'no-shadow': noShadow }, className) }, menuItemElements));
+};

package/dist/components/menu/MenuDivider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface MenuDividerProps {
+    className?: string;
+}
+export declare const MenuDivider: React.FC<MenuDividerProps>;
+export {};

package/dist/components/menu/MenuDivider.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuDivider = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+exports.MenuDivider = props => {
+    const { className } = props;
+    return react_1.default.createElement("div", { className: classnames_1.default('ds-menu-divider', className) });
+};

package/dist/components/menu/MenuItem.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { SvgIconProps } from '../../icons/svg-icon/SvgIcon';
+interface MenuItemProps {
+    /**
+     * Id of the Menu Item. Can be string or number.
+     */
+    id: number | string;
+    /**
+     * Whether Menu Item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The label of the Menu Item.
+     */
+    label?: React.ReactNode;
+    /**
+     * The icon of the Menu Item.
+     */
+    icon?: React.FC<SvgIconProps>;
+    /**
+     * The right element of the Menu Item.
+     *
+     * Usually, this is used to display a Badge, Icon or shortcut of the Menu Item.
+     */
+    rightElement?: React.ReactNode;
+    /**
+     * A space-delimited list of class names to pass along to a Menu Item element.
+     */
+    className?: string;
+    /**
+     * Called when the Menu Item is clicked.
+     */
+    onClick?: (e?: React.SyntheticEvent) => void;
+    /**
+     * Called when the Menu Item is selected.
+     */
+    onSelect?: (e?: React.SyntheticEvent, itemId?: number | string) => void;
+    /**
+     * A flag for selected Menu Item.
+     */
+    isSelected?: boolean;
+}
+export declare const MenuItem: React.FC<MenuItemProps>;
+export declare const isMenuItemElement: (object: any) => object is React.ReactElement<MenuItemProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export {};

package/dist/components/menu/MenuItem.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMenuItemElement = exports.MenuItem = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+exports.MenuItem = props => {
+    const { id, icon: Icon, label, className, disabled, rightElement, onClick, onSelect, isSelected, } = props;
+    const handleClickMenuItem = (e) => {
+        !!onClick && onClick(e);
+        !disabled && !!onSelect && onSelect(e, id);
+    };
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-menu-item', { disabled, selected: isSelected }, className), onClick: handleClickMenuItem },
+        !!Icon && react_1.default.createElement(Icon, { className: "ds-menu-item-icon" }),
+        !!label && react_1.default.createElement("span", { className: "ds-menu-item-title" }, label),
+        !!rightElement && react_1.default.createElement("span", { className: "ds-menu-item-right-element" }, rightElement)));
+};
+exports.isMenuItemElement = (object) => {
+    return react_1.default.isValidElement(object) && object.type === exports.MenuItem;
+};

package/dist/components/overlay/Overlay.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+interface WithClickOutside {
+    onClickOutside?: React.MouseEventHandler;
+}
+export declare const WithClickOutside: import("react-onclickoutside").WrapperClass<React.PropsWithChildren<WithClickOutside>, React.FC<WithClickOutside> & WithClickOutside>;
+export interface OverlayProps {
+    /**
+     * Should overlay content be focus at the moment it appears.
+     */
+    autoFocus?: boolean;
+    /**
+     * Decide Overlay position on DOM tree. Should it be rendered inline or at portalContainer.
+     */
+    usePortal?: boolean;
+    /**
+     * Use with usePortal=true. Default is window.document.body.
+     */
+    portalContainer?: HTMLElement;
+    /**
+     * Should appear with a backdrop. For best result only use backdrop on
+     * fullscreen overlay.
+     */
+    withBackdrop?: boolean;
+    /**
+     * Backdrop component. By default backdrop is a semi-transparent div.
+     */
+    backdrop?: React.ReactNode;
+    /**
+     * Should Overlay appear.
+     */
+    isOpen: boolean;
+    /**
+     * Trigger when user try to close Overlay using keyboard or clicking outside content.
+     */
+    onClose?: () => void;
+    /**
+     * Should onClose trigger when user press Escape button on keyboard.
+     */
+    canEscapeKeyClose?: boolean;
+    /**
+     * Should onClose trigger when user click outside Overlay content.
+     */
+    canClickOutsideClose?: boolean;
+}
+export declare const Overlay: React.FC<OverlayProps>;
+export {};

package/dist/components/overlay/Overlay.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = exports.WithClickOutside = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const react_onclickoutside_1 = __importDefault(require("react-onclickoutside"));
+const react_transition_group_1 = require("react-transition-group");
+const dom_1 = require("../../utils/dom");
+const WithClickOutsideComponent = props => {
+    WithClickOutsideComponent.onClickOutside = props.onClickOutside;
+    return react_1.default.createElement(react_1.default.Fragment, null, props.children);
+};
+WithClickOutsideComponent.prototype = {};
+exports.WithClickOutside = react_onclickoutside_1.default(WithClickOutsideComponent, {
+    handleClickOutside: () => WithClickOutsideComponent.onClickOutside,
+});
+exports.Overlay = props => {
+    const { onClose, isOpen, backdrop, autoFocus = false, withBackdrop = false, portalContainer = dom_1.isDocDefined ? document.body : null, usePortal = true, children, canClickOutsideClose, canEscapeKeyClose, } = props;
+    const overlayContainerRef = react_1.useRef(null);
+    const onClickOutsideContent = () => {
+        if (canClickOutsideClose && onClose) {
+            onClose();
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.which === 27 && canEscapeKeyClose === true && onClose) {
+            event.preventDefault();
+            onClose();
+        }
+    };
+    const focusOnOverlay = () => {
+        if (overlayContainerRef.current === null) {
+            return;
+        }
+        const element = react_dom_1.findDOMNode(overlayContainerRef.current);
+        if (element === null) {
+            return;
+        }
+        if (element.contains(document.activeElement)) {
+            return;
+        }
+        element.focus();
+    };
+    react_1.useEffect(() => {
+        if (autoFocus === true) {
+            focusOnOverlay();
+        }
+    }, [isOpen]);
+    const renderContent = () => {
+        const contents = [];
+        if (withBackdrop === true) {
+            contents.push(react_1.default.createElement(react_transition_group_1.CSSTransition, { key: "backdrop", timeout: 200, className: "ds-overlay-backdrop" },
+                react_1.default.createElement("div", { className: "ds-overlay-backdrop" }, backdrop ? backdrop : react_1.default.createElement("div", { className: "ds-backdrop" }))));
+        }
+        contents.push(react_1.default.createElement(react_transition_group_1.CSSTransition, { key: "content", timeout: 200, className: "ds-overlay-content" },
+            react_1.default.createElement(exports.WithClickOutside, { onClickOutside: onClickOutsideContent },
+                react_1.default.createElement("div", { className: "ds-overlay-content" }, children))));
+        return (react_1.default.createElement(react_transition_group_1.TransitionGroup, { className: classnames_1.default('ds-overlay-container', { 'ds-inline': usePortal === false }), style: { pointerEvents: isOpen ? 'auto' : 'none' }, onKeyDown: handleKeyDown, tabIndex: canClickOutsideClose || canEscapeKeyClose ? 0 : undefined, component: "div", timeout: 200, appear: true, ref: overlayContainerRef }, isOpen === true ? contents : []));
+    };
+    if (usePortal === true && portalContainer === null) {
+        return null;
+    }
+    else if (usePortal === true && portalContainer !== null) {
+        return react_dom_1.createPortal(renderContent(), portalContainer);
+    }
+    else {
+        return renderContent();
+    }
+};

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+declare enum PaginationTypes {
+    Input = "Input",
+    FullPage = "FullPage",
+    Single = "Single"
+}
+interface Props {
+    /**
+     * Total items of the list.
+     */
+    total: number;
+    /**
+     * Amount of items each page.
+     */
+    limit: number;
+    /**
+     * Current page for chosing offset.
+     */
+    currentPage: number;
+    /**
+     * Handle event for changing page.
+     */
+    onChangePage: (page: number) => void;
+    /**
+     * A flag for showing Last and First button.
+     */
+    hasLastFirst?: boolean;
+    /**
+     * Select a type of displaying styles for pagination
+     */
+    type?: PaginationTypes;
+}
+export declare const Pagination: React.FC<Props> & {
+    type: typeof PaginationTypes;
+};
+export {};

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const __1 = require("../..");
+const ChevronLeft_1 = require("../../icons/ChevronLeft");
+const ChevronRight_1 = require("../../icons/ChevronRight");
+var PaginationTypes;
+(function (PaginationTypes) {
+    PaginationTypes["Input"] = "Input";
+    PaginationTypes["FullPage"] = "FullPage";
+    PaginationTypes["Single"] = "Single";
+})(PaginationTypes || (PaginationTypes = {}));
+exports.Pagination = ({ total, limit, currentPage, onChangePage, type = PaginationTypes.FullPage, hasLastFirst, }) => {
+    const [selectedPage, setSelectedPage] = react_1.useState(currentPage);
+    const totalPage = Math.ceil(total / limit);
+    const onClickFirst = () => {
+        if (onChangePage) {
+            onChangePage(1);
+        }
+    };
+    const onClickLast = () => {
+        if (onChangePage) {
+            onChangePage(totalPage);
+        }
+    };
+    const onClickChange = (value) => () => {
+        if (onChangePage) {
+            onChangePage(value);
+        }
+    };
+    const pageDist = totalPage - 1;
+    const onChangeInput = (e) => {
+        if (!e.target.value || /^\d+$/.test(e.target.value)) {
+            setSelectedPage(e.target.value);
+        }
+    };
+    const onKeypress = (e) => {
+        if (e.key === 'Enter') {
+            const value = selectedPage || currentPage;
+            setSelectedPage(Number(value));
+            onChangePage(Number(value));
+        }
+    };
+    react_1.useEffect(() => {
+        setSelectedPage(currentPage);
+    }, [currentPage]);
+    return (react_1.default.createElement("div", { className: classnames_1.default('ds-pagination') },
+        hasLastFirst && (react_1.default.createElement(__1.Button, { size: __1.Button.sizes.Small, minimal: true, intent: __1.IntentType.Primary, className: "ds-pagination-button-left", onClick: onClickFirst, disabled: currentPage === 1 }, "First")),
+        react_1.default.createElement(__1.Button, { className: "ds-pagination-button-left", size: __1.Button.sizes.Small, disabled: currentPage === 1, leftIcon: ChevronLeft_1.ChevronLeftIcon, onClick: onClickChange(currentPage - 1), intent: __1.IntentType.Primary, minimal: true }),
+        type === PaginationTypes.Input && (react_1.default.createElement("div", { className: "ds-pagination-info" },
+            react_1.default.createElement("input", { className: "ds-input", value: selectedPage, onChange: onChangeInput, onKeyPress: onKeypress }),
+            ' ',
+            "/ ",
+            totalPage)),
+        type === PaginationTypes.FullPage && (react_1.default.createElement("span", { className: "ds-pagination-info" },
+            currentPage,
+            " / ",
+            totalPage)),
+        type === PaginationTypes.Single &&
+            new Array(totalPage).fill(0).map((_el, index) => index === 0 ||
+                index === totalPage - 1 ||
+                index === currentPage - 1 ||
+                (currentPage === 1 && index <= 2) ||
+                (currentPage === 1 && index >= totalPage - 3) ||
+                (currentPage === totalPage && index <= 2) ||
+                (currentPage === totalPage && index >= totalPage - 3) ||
+                (currentPage !== 1 && currentPage <= 3 && index + 1 - currentPage >= pageDist - 3) ||
+                (currentPage !== totalPage &&
+                    currentPage >= totalPage - 2 &&
+                    currentPage - index - 1 >= pageDist - 3) ||
+                Math.abs(index + 1 - currentPage) === 1 ? (react_1.default.createElement("div", { className: classnames_1.default('ds-pagination-number', { active: currentPage === index + 1 }), key: index, onClick: onClickChange(index + 1) }, index + 1)) : Math.abs(index + 1 - currentPage) === 2 ||
+                (currentPage === 1 && index + 1 - currentPage === 3) ||
+                (currentPage === totalPage && currentPage - index - 1 === 3) ? (react_1.default.createElement("div", { className: "ds-pagination-separator" }, "...")) : null),
+        react_1.default.createElement(__1.Button, { className: "ds-pagination-button-right", leftIcon: ChevronRight_1.ChevronRightIcon, size: __1.Button.sizes.Small, onClick: onClickChange(currentPage + 1), intent: __1.IntentType.Primary, disabled: currentPage === totalPage, minimal: true }),
+        hasLastFirst && (react_1.default.createElement(__1.Button, { size: __1.Button.sizes.Small, minimal: true, intent: __1.IntentType.Primary, disabled: currentPage === totalPage, onClick: onClickLast, className: "ds-pagination-button-right" }, "Last"))));
+};
+exports.Pagination.type = PaginationTypes;