@veracity/vui 0.5.1 → 0.6.0

package/core/links.d.ts

@@ -3,7 +3,8 @@ import { Dict, Environment } from '../utils';
 export declare type LinksDict = Dict<string>;
 declare type LinksContextType = [LinksDict, Dispatch<SetStateAction<LinksDict>>];
 /**
- * Adds loggedIn=1 parameter to the URL if isLoggedIn flag is true, which means the user is logged in.
+ * Adds loggedIn=1 parameter to the URL if 'isLoggedIn' flag is true, which means the user is logged in.
+ * If 'isLoggedIn' is falsy, loggedin param will be removed.
  * This is supposed to aid login flow when navigating between Veracity applications.
  */
 export declare function getLoggedInLink(link: string, isLoggedIn?: boolean): string;
@@ -14,7 +15,7 @@ export declare function LinksProvider(props: {
 export declare function useLinks(): LinksContextType;
 /**
  * Retrieves the links from CDN for the given environment and appends them with loggedin=1 parameter
- * if user is logged in. Links will be reloaded or updated whenever 'env' or 'isLoggedIn' change.
+ * if user is logged in. Links will be reloaded when 'env' changes or updated when 'isLoggedIn' changes.
  */
 export declare function useLoadLinks(env?: Environment, isLoggedIn?: boolean): void;
 export {};

package/core/links.js

@@ -88,14 +88,19 @@ var utils_1 = require("../utils");
 var consts_1 = require("./consts");
 var LinksContext = (0, react_1.createContext)(undefined);
 /**
- * Adds loggedIn=1 parameter to the URL if isLoggedIn flag is true, which means the user is logged in.
+ * Adds loggedIn=1 parameter to the URL if 'isLoggedIn' flag is true, which means the user is logged in.
+ * If 'isLoggedIn' is falsy, loggedin param will be removed.
  * This is supposed to aid login flow when navigating between Veracity applications.
  */
 function getLoggedInLink(link, isLoggedIn) {
     try {
         var url = new URL(link);
-        if (isLoggedIn)
+        if (isLoggedIn) {
             url.searchParams.append('loggedin', '1');
+        }
+        else {
+            url.searchParams.delete('loggedin');
+        }
         return url.toString();
     }
     catch (_a) {
@@ -120,7 +125,7 @@ function useLinks() {
 exports.useLinks = useLinks;
 /**
  * Retrieves the links from CDN for the given environment and appends them with loggedin=1 parameter
- * if user is logged in. Links will be reloaded or updated whenever 'env' or 'isLoggedIn' change.
+ * if user is logged in. Links will be reloaded when 'env' changes or updated when 'isLoggedIn' changes.
  */
 function useLoadLinks(env, isLoggedIn) {
     var _a = __read(useLinks(), 2), setLinks = _a[1];
@@ -130,17 +135,8 @@ function useLoadLinks(env, isLoggedIn) {
         loadLinks(env);
     }, [env]);
     (0, react_1.useEffect)(function () {
-        appendLoggedInParam(isLoggedIn);
+        setLinks(function (links) { return updateLoggedInParam(links, isLoggedIn); });
     }, [isLoggedIn]);
-    // Adds loggedin=1 param to each link if user is logged in.
-    function appendLoggedInParam(isLoggedIn) {
-        setLinks(function (state) {
-            return Object.keys(state).reduce(function (links, key) {
-                links[key] = getLoggedInLink(state[key], isLoggedIn);
-                return links;
-            }, {});
-        });
-    }
     // Load links from the CDN for the given environment.
     function loadLinks(env) {
         return __awaiter(this, void 0, void 0, function () {
@@ -157,8 +153,9 @@ function useLoadLinks(env, isLoggedIn) {
                         return [4 /*yield*/, response.json()];
                     case 2:
                         data = _b.sent();
-                        if ((0, utils_1.isObject)(data))
-                            setLinks(data);
+                        if ((0, utils_1.isObject)(data)) {
+                            setLinks(updateLoggedInParam(data, isLoggedIn));
+                        }
                         return [3 /*break*/, 4];
                     case 3:
                         _a = _b.sent();
@@ -169,5 +166,12 @@ function useLoadLinks(env, isLoggedIn) {
             });
         });
     }
+    // Adds/removes loggedin=1 URL param for each link based on isLoggedIn arg.
+    function updateLoggedInParam(links, isLoggedIn) {
+        return Object.keys(links).reduce(function (loggedInLinks, key) {
+            loggedInLinks[key] = getLoggedInLink(links[key], isLoggedIn);
+            return loggedInLinks;
+        }, {});
+    }
 }
 exports.useLoadLinks = useLoadLinks;

package/index.d.ts

@@ -21,6 +21,7 @@ export * from './menu';
 export * from './modal';
 export * from './notification';
 export * from './p';
+export * from './pagination';
 export * from './panel';
 export * from './popover';
 export * from './portal';

package/index.js

@@ -33,6 +33,7 @@ __exportStar(require("./menu"), exports);
 __exportStar(require("./modal"), exports);
 __exportStar(require("./notification"), exports);
 __exportStar(require("./p"), exports);
+__exportStar(require("./pagination"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./portal"), exports);

package/modal/modal.d.ts

@@ -1,7 +1,7 @@
 import { VuiComponent } from '../core';
 import { ModalProps } from './modal.types';
-import ModalBackdrop from './ModalBackdrop';
-import ModalContent from './ModalContent';
+import ModalBackdrop from './modalBackdrop';
+import ModalContent from './modalContent';
 /**
  * Displays provided content on top of a dark backdrop element with fixed position.
  * By default uses Portal for content and closes when clicking backdrop or pressing 'Escape'.

package/modal/modal.js

@@ -53,8 +53,8 @@ var portal_1 = __importDefault(require("../portal"));
 var utils_1 = require("../utils");
 var context_1 = require("./context");
 var focusLock_1 = __importDefault(require("./focusLock"));
-var ModalBackdrop_1 = __importDefault(require("./ModalBackdrop"));
-var ModalContent_1 = __importDefault(require("./ModalContent"));
+var modalBackdrop_1 = __importDefault(require("./modalBackdrop"));
+var modalContent_1 = __importDefault(require("./modalContent"));
 var modalManager_1 = require("./modalManager");
 /**
  * Displays provided content on top of a dark backdrop element with fixed position.
@@ -102,12 +102,12 @@ exports.Modal = (0, core_1.vui)(function (props, ref) {
     return (react_1.default.createElement(context_1.ModalProvider, { value: context },
         react_1.default.createElement(portal_1.default, { disablePortal: disablePortal },
             react_1.default.createElement(box_1.default, __assign({ className: (0, utils_1.cs)('vui-modal', className), ref: (0, utils_1.mergeRefs)(ref, modalRef) }, rest, { onKeyDown: (0, utils_1.callAll)(props.onKeyDown, onKeyDown), onMouseDown: (0, utils_1.callAll)(props.onMouseDown, onMouseDown) }),
-                !hideBackdrop && react_1.default.createElement(ModalBackdrop_1.default, null),
+                !hideBackdrop && react_1.default.createElement(modalBackdrop_1.default, null),
                 react_1.default.createElement(focusLock_1.default, { autoFocus: !disableAutoFocus, finalFocusRef: finalFocusRef, initialFocusRef: initialFocusRef, isDisabled: disableTrapFocus, returnFocus: !disableReturnFocus },
                     react_1.default.createElement(react_remove_scroll_1.RemoveScroll, { allowPinchZoom: allowPinchZoom, enabled: !disableScrollLock, forwardProps: true, removeScrollBar: !preserveScrollBar },
-                        react_1.default.createElement(ModalContent_1.default, __assign({}, contentProps), (0, react_1.cloneElement)(children, childProps))))))));
+                        react_1.default.createElement(modalContent_1.default, __assign({}, contentProps), (0, react_1.cloneElement)(children, childProps))))))));
 });
 exports.Modal.displayName = 'Modal';
-exports.Modal.Backdrop = ModalBackdrop_1.default;
-exports.Modal.Content = ModalContent_1.default;
+exports.Modal.Backdrop = modalBackdrop_1.default;
+exports.Modal.Content = modalContent_1.default;
 exports.default = exports.Modal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "Veracity UI React components library based on Styled Components and @xstyled",
   "main": "index.js",
   "author": "Veracity",

package/pagination/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PaginationContext } from './pagination.types';
+declare const PaginationProvider: import("react").Provider<PaginationContext>, usePaginationContext: () => PaginationContext;
+export { PaginationProvider, usePaginationContext };

package/pagination/context.js

@@ -0,0 +1,23 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePaginationContext = exports.PaginationProvider = void 0;
+var utils_1 = require("../utils");
+var _a = __read((0, utils_1.createContext)({ isOptional: true }), 2), PaginationProvider = _a[0], usePaginationContext = _a[1];
+exports.PaginationProvider = PaginationProvider;
+exports.usePaginationContext = usePaginationContext;

package/pagination/helpers.d.ts

@@ -0,0 +1,3 @@
+import { PaginationItem } from './pagination.types';
+/** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+export declare function getPaginationItems(page: number, pageCount: number): PaginationItem[];

package/pagination/helpers.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaginationItems = void 0;
+/** Returns an array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+function getPaginationItems(page, pageCount) {
+    var items = ['previous', 1];
+    if (page - 2 > 1)
+        items.push('ellipsisStart');
+    for (var i = page - 1; i <= page + 1; i++) {
+        if (i > 1 && i < pageCount)
+            items.push(i);
+    }
+    if (page + 2 < pageCount)
+        items.push('ellipsisEnd');
+    if (pageCount > 1)
+        items.push(pageCount);
+    items.push('next');
+    return items;
+}
+exports.getPaginationItems = getPaginationItems;

package/pagination/index.d.ts

@@ -0,0 +1,13 @@
+export * from './context';
+export * from './helpers';
+export * from './pagination';
+export { default } from './pagination';
+export * from './pagination.types';
+export * from './paginationButton';
+export * from './paginationEllipsis';
+export * from './paginationGoToPage';
+export * from './paginationNavigation';
+export * from './paginationPrevNext';
+export * from './paginationResults';
+export { default as usePagination } from './usePagination';
+export * from './usePagination.types';

package/pagination/index.js

@@ -0,0 +1,31 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePagination = exports.default = void 0;
+__exportStar(require("./context"), exports);
+__exportStar(require("./helpers"), exports);
+__exportStar(require("./pagination"), exports);
+var pagination_1 = require("./pagination");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(pagination_1).default; } });
+__exportStar(require("./pagination.types"), exports);
+__exportStar(require("./paginationButton"), exports);
+__exportStar(require("./paginationEllipsis"), exports);
+__exportStar(require("./paginationGoToPage"), exports);
+__exportStar(require("./paginationNavigation"), exports);
+__exportStar(require("./paginationPrevNext"), exports);
+__exportStar(require("./paginationResults"), exports);
+var usePagination_1 = require("./usePagination");
+Object.defineProperty(exports, "usePagination", { enumerable: true, get: function () { return __importDefault(usePagination_1).default; } });
+__exportStar(require("./usePagination.types"), exports);

package/pagination/pagination.d.ts

@@ -0,0 +1,21 @@
+import { VuiComponent } from '../core';
+import { PaginationProps } from './pagination.types';
+import PaginationButton from './paginationButton';
+import PaginationEllipsis from './paginationEllipsis';
+import PaginationGoToPage from './paginationGoToPage';
+import PaginationNavigation from './paginationNavigation';
+import PaginationPrevNext from './paginationPrevNext';
+import PaginationResults from './paginationResults';
+/**
+ * Displays page navigation buttons together with page and item count.
+ * GoToPage component is shown automatically above 10 pages.
+ */
+export declare const Pagination: VuiComponent<"div", PaginationProps> & {
+    Button: typeof PaginationButton;
+    Ellipsis: typeof PaginationEllipsis;
+    GoToPage: typeof PaginationGoToPage;
+    Navigation: typeof PaginationNavigation;
+    PrevNext: typeof PaginationPrevNext;
+    Results: typeof PaginationResults;
+};
+export default Pagination;

package/pagination/pagination.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.Pagination = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var paginationButton_1 = __importDefault(require("./paginationButton"));
+var paginationEllipsis_1 = __importDefault(require("./paginationEllipsis"));
+var paginationGoToPage_1 = __importDefault(require("./paginationGoToPage"));
+var paginationNavigation_1 = __importDefault(require("./paginationNavigation"));
+var paginationPrevNext_1 = __importDefault(require("./paginationPrevNext"));
+var paginationResults_1 = __importDefault(require("./paginationResults"));
+var usePagination_1 = __importDefault(require("./usePagination"));
+/**
+ * Displays page navigation buttons together with page and item count.
+ * GoToPage component is shown automatically above 10 pages.
+ */
+exports.Pagination = (0, core_1.vui)(function (props, ref) {
+    var _a;
+    var children = props.children, className = props.className, count = props.count, defaultPage = props.defaultPage, goToPage = props.goToPage, _b = props.items, itemsProp = _b === void 0 ? [] : _b, navigation = props.navigation, onPageChange = props.onPageChange, pageProp = props.page, pageSize = props.pageSize, results = props.results, size = props.size, variant = props.variant, rest = __rest(props, ["children", "className", "count", "defaultPage", "goToPage", "items", "navigation", "onPageChange", "page", "pageSize", "results", "size", "variant"]);
+    var styles = (0, core_1.useStyleConfig)('Pagination', props);
+    var _c = (0, usePagination_1.default)({
+        count: count,
+        defaultPage: defaultPage,
+        onPageChange: onPageChange,
+        page: pageProp,
+        pageSize: pageSize
+    }), _d = _c.items, items = _d === void 0 ? itemsProp : _d, paginationProps = __rest(_c, ["items"]);
+    var context = __assign(__assign({}, paginationProps), { items: items, size: size, variant: variant });
+    return (react_1.default.createElement(context_1.PaginationProvider, { value: context },
+        react_1.default.createElement(box_1.default, __assign({ centerV: true, className: (0, utils_1.cs)('vui-pagination', className), gap: 3, ref: ref, w: 1, wrap: true }, styles.container, rest), (_a = (0, utils_1.runIfFn)(children, context)) !== null && _a !== void 0 ? _a : (react_1.default.createElement(react_1.default.Fragment, null,
+            (0, utils_1.isJsx)(results) ? results : react_1.default.createElement(paginationResults_1.default, null),
+            (0, utils_1.isJsx)(navigation) ? navigation : react_1.default.createElement(paginationNavigation_1.default, { ml: "auto" }),
+            (0, utils_1.isJsx)(goToPage) ? goToPage : paginationProps.pageCount > 10 && react_1.default.createElement(paginationGoToPage_1.default, null))))));
+});
+exports.Pagination.displayName = 'Notification';
+exports.Pagination.Button = paginationButton_1.default;
+exports.Pagination.Ellipsis = paginationEllipsis_1.default;
+exports.Pagination.GoToPage = paginationGoToPage_1.default;
+exports.Pagination.Navigation = paginationNavigation_1.default;
+exports.Pagination.PrevNext = paginationPrevNext_1.default;
+exports.Pagination.Results = paginationResults_1.default;
+exports.default = exports.Pagination;

package/pagination/pagination.types.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { BoxProps } from '../box';
+import { ButtonProps } from '../button';
+import { ThemingProps } from '../theme';
+import { RenderProps } from '../utils';
+import { UsePaginationReturnType } from './usePagination';
+import { UsePaginationProps } from './usePagination.types';
+export declare type PaginationButtonProps = ButtonProps & {
+    /** Applies different styling to a button of the current page. */
+    isActive?: boolean;
+    /** Number of the page, which this button represents. */
+    page: number;
+};
+export declare type PaginationContext = UsePaginationReturnType & ThemingProps<'Pagination'>;
+export declare type PaginationItem = 'ellipsisEnd' | 'ellipsisStart' | 'next' | 'previous' | number;
+export declare type PaginationPrevNextProps = ButtonProps & {
+    /** Defines the logic of previous and next buttons. */
+    direction: 'previous' | 'next';
+};
+export declare type PaginationProps = Omit<BoxProps, 'size' | 'variant'> & ThemingProps<'Pagination'> & UsePaginationProps & {
+    /** Children provide render props using PaginationContext data. */
+    children?: RenderProps<PaginationContext>;
+    /** Socket for page input on the right side. */
+    goToPage?: JSX.Element;
+    /** Array describing pagination items, like page buttons, prev/next arrows or ellipsis. */
+    items?: PaginationItem[];
+    /** Socket for the main navigation elements in the middle. */
+    navigation?: JSX.Element;
+    /** Socket for numbers data on the left side. */
+    results?: JSX.Element;
+};

package/pagination/pagination.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/pagination/paginationButton.d.ts

@@ -0,0 +1,4 @@
+import { PaginationButtonProps } from './pagination.types';
+/** Displays a page navigation button within the Pagination. */
+export declare const PaginationButton: import("../core").VuiComponent<"button", PaginationButtonProps>;
+export default PaginationButton;

package/pagination/paginationButton.js

@@ -0,0 +1,50 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.PaginationButton = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Displays a page navigation button within the Pagination. */
+exports.PaginationButton = (0, core_1.vui)(function (props, ref) {
+    var isActiveProp = props.isActive, pageProp = props.page, rest = __rest(props, ["isActive", "page"]);
+    var _a = (0, context_1.usePaginationContext)(), onPageChange = _a.onPageChange, page = _a.page;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    var isActive = isActiveProp !== null && isActiveProp !== void 0 ? isActiveProp : pageProp === page;
+    var activeProps = isActive
+        ? {
+            bg: 'blue.20',
+            color: 'blue.80',
+            hoverBg: 'blue.30',
+            activeBg: 'blue.40'
+        }
+        : {};
+    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-paginationButton", minW: 0, onClick: function () { return onPageChange(pageProp); }, ref: ref, size: "sm", text: pageProp, variant: "text" }, styles.button, activeProps, rest)));
+});
+exports.PaginationButton.displayName = 'PaginationButton';
+exports.default = exports.PaginationButton;

package/pagination/paginationEllipsis.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays '...' ellipsis for hidden pages. */
+export declare const PaginationEllipsis: import("../core").VuiComponent<"span", BoxProps>;
+export default PaginationEllipsis;

package/pagination/paginationEllipsis.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.PaginationEllipsis = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Displays '...' ellipsis for hidden pages. */
+exports.PaginationEllipsis = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ alignItems: "center", className: "vui-paginationEllipsis", ref: ref }, styles.ellipsis, rest), children !== null && children !== void 0 ? children : '...'));
+});
+exports.PaginationEllipsis.displayName = 'PaginationEllipsis';
+exports.default = exports.PaginationEllipsis;

package/pagination/paginationGoToPage.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays a number input, which allows quickly jumping between pages. */
+export declare const PaginationGoToPage: import("../core").VuiComponent<"div", BoxProps>;
+export default PaginationGoToPage;

package/pagination/paginationGoToPage.js

@@ -0,0 +1,40 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationGoToPage = void 0;
+var react_1 = __importDefault(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var input_1 = __importDefault(require("../input"));
+var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays a number input, which allows quickly jumping between pages. */
+exports.PaginationGoToPage = (0, core_1.vui)(function (props, ref) {
+    var _a = (0, context_1.usePaginationContext)(), onPageChange = _a.onPageChange, pageCount = _a.pageCount;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    var onChange = function (e) {
+        var value = +e.target.value;
+        if (value >= 1 && value <= pageCount) {
+            onPageChange(Math.floor(value));
+        }
+    };
+    return (react_1.default.createElement(box_1.default, __assign({ centerV: true, className: "vui-paginationGoToPage", lineHeight: "normal", ref: ref }, styles.goToPage, props),
+        react_1.default.createElement(t_1.default, { size: "sm", weight: "medium" }, "Go to"),
+        react_1.default.createElement(input_1.default, { max: pageCount, min: 1, mx: 1, onChange: onChange, size: "sm", type: "number", w: 56 }),
+        react_1.default.createElement(t_1.default, { size: "sm", weight: "medium" }, "Page")));
+});
+exports.PaginationGoToPage.displayName = 'PaginationGoToPage';
+exports.default = exports.PaginationGoToPage;

package/pagination/paginationNavigation.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '../box';
+/** Displays a set of page navigation buttons. */
+export declare const PaginationNavigation: import("../core").VuiComponent<"div", BoxProps>;
+export default PaginationNavigation;

package/pagination/paginationNavigation.js

@@ -0,0 +1,68 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.prototype.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.PaginationNavigation = void 0;
+var react_1 = __importStar(require("react"));
+var box_1 = __importDefault(require("../box"));
+var core_1 = require("../core");
+var utils_1 = require("../utils");
+var context_1 = require("./context");
+var paginationButton_1 = __importDefault(require("./paginationButton"));
+var paginationEllipsis_1 = __importDefault(require("./paginationEllipsis"));
+var paginationPrevNext_1 = __importDefault(require("./paginationPrevNext"));
+/** Displays a set of page navigation buttons. */
+exports.PaginationNavigation = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    var items = (0, context_1.usePaginationContext)().items;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    return (react_1.default.createElement(box_1.default, __assign({ className: "vui-paginationNavigation", gap: 1, ref: ref, wrap: true }, styles.navigation, rest), children !== null && children !== void 0 ? children : items.map(function (item) { return (react_1.default.createElement(react_1.Fragment, { key: item },
+        item === 'previous' && react_1.default.createElement(paginationPrevNext_1.default, { direction: "previous" }),
+        (0, utils_1.isNumber)(item) && react_1.default.createElement(paginationButton_1.default, { page: item }),
+        (0, utils_1.isString)(item) && item.includes('ellipsis') && react_1.default.createElement(paginationEllipsis_1.default, null),
+        item === 'next' && react_1.default.createElement(paginationPrevNext_1.default, { direction: "next" }))); })));
+});
+exports.PaginationNavigation.displayName = 'PaginationNavigation';
+exports.default = exports.PaginationNavigation;

package/pagination/paginationPrevNext.d.ts

@@ -0,0 +1,4 @@
+import { PaginationPrevNextProps } from './pagination.types';
+/** Displays a page navigation button, which navigates forward or backward. */
+export declare const PaginationPrevNext: import("../core").VuiComponent<"button", PaginationPrevNextProps>;
+export default PaginationPrevNext;

package/pagination/paginationPrevNext.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.PaginationPrevNext = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = __importDefault(require("../button"));
+var core_1 = require("../core");
+var context_1 = require("./context");
+/** Displays a page navigation button, which navigates forward or backward. */
+exports.PaginationPrevNext = (0, core_1.vui)(function (props, ref) {
+    var direction = props.direction, rest = __rest(props, ["direction"]);
+    var _a = (0, context_1.usePaginationContext)(), onPageChange = _a.onPageChange, page = _a.page, pageCount = _a.pageCount;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    var isPrev = direction === 'previous';
+    var pageChange = isPrev ? -1 : 1;
+    var directionProps = {
+        disabled: isPrev ? page === 1 : page === pageCount,
+        icon: isPrev ? 'falAngleLeft' : 'falAngleRight',
+        onClick: function () { return onPageChange(page + pageChange); }
+    };
+    return (react_1.default.createElement(button_1.default, __assign({ className: "vui-paginationPrevNext", minW: 0, ref: ref, size: "sm", variant: "text" }, styles.prevNext, directionProps, rest)));
+});
+exports.PaginationPrevNext.displayName = 'PaginationPrevNext';
+exports.default = exports.PaginationPrevNext;

package/pagination/paginationResults.d.ts

@@ -0,0 +1,4 @@
+import { TProps } from '../t';
+/** Displays an action button within the Pagination. */
+export declare const PaginationResults: import("../core").VuiComponent<"span", TProps>;
+export default PaginationResults;

package/pagination/paginationResults.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.PaginationResults = void 0;
+var react_1 = __importDefault(require("react"));
+var core_1 = require("../core");
+var t_1 = __importDefault(require("../t"));
+var context_1 = require("./context");
+/** Displays an action button within the Pagination. */
+exports.PaginationResults = (0, core_1.vui)(function (props, ref) {
+    var children = props.children, rest = __rest(props, ["children"]);
+    var _a = (0, context_1.usePaginationContext)(), count = _a.count, rangeEnd = _a.rangeEnd, rangeStart = _a.rangeStart;
+    var styles = (0, core_1.useStyleConfig)('Pagination', (0, context_1.usePaginationContext)());
+    return (react_1.default.createElement(t_1.default, __assign({ className: "vui-paginationResults", color: "grey.80", ref: ref, size: "sm", weight: "medium" }, styles.results, rest), children !== null && children !== void 0 ? children : "Showing " + rangeStart + " to " + rangeEnd + " of " + count + " results."));
+});
+exports.PaginationResults.displayName = 'PaginationResults';
+exports.default = exports.PaginationResults;

package/pagination/theme.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    baseStyle: {};
+    defaultProps: {};
+    parts: string[];
+    sizes: {};
+    variants: {};
+};
+export default _default;

package/pagination/theme.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var baseStyle = {};
+var defaultProps = {};
+var parts = ['container', 'button', 'ellipsis', 'goToPage', 'navigation', 'prevNext', 'results'];
+var sizes = {};
+var variants = {};
+exports.default = {
+    baseStyle: baseStyle,
+    defaultProps: defaultProps,
+    parts: parts,
+    sizes: sizes,
+    variants: variants
+};

package/pagination/usePagination.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { UsePaginationProps } from './usePagination.types';
+/** Hook to manage pagination data and state in controlled or uncontrolled way. */
+export default function usePagination(props: UsePaginationProps): {
+    count: number;
+    items: import("./pagination.types").PaginationItem[];
+    onPageChange: import("react").Dispatch<import("react").SetStateAction<number>>;
+    page: number;
+    pageCount: number;
+    pageSize: number;
+    rangeEnd: number;
+    rangeStart: number;
+};
+export declare type UsePaginationReturnType = ReturnType<typeof usePagination>;

package/pagination/usePagination.js

@@ -0,0 +1,58 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var utils_1 = require("../utils");
+var helpers_1 = require("./helpers");
+/** Hook to manage pagination data and state in controlled or uncontrolled way. */
+function usePagination(props) {
+    var count = props.count, _a = props.defaultPage, defaultPage = _a === void 0 ? 1 : _a, onPageChangeProp = props.onPageChange, pageProp = props.page, pageSize = props.pageSize;
+    var _b = __read((0, utils_1.useControlled)({
+        defaultValue: defaultPage,
+        onChange: onPageChangeProp,
+        value: pageProp
+    }), 3), page = _b[0], onPageChange = _b[1], _c = _b[2], isControlled = _c.isControlled, reset = _c.reset;
+    // In uncontrolled mode, trigger external callback on the first render for consumer to initialize data.
+    (0, react_1.useEffect)(function () {
+        !isControlled && (onPageChangeProp === null || onPageChangeProp === void 0 ? void 0 : onPageChangeProp(defaultPage));
+    }, []);
+    /** In uncontrolled mode, reset pagination whenever pageSize changes (apart from initialization). */
+    (0, react_1.useEffect)(function () {
+        isMounted() && reset();
+    }, [pageSize]);
+    var isMounted = (0, utils_1.useIsMounted)();
+    /** How many pages are there in total. */
+    var pageCount = count > 0 && pageSize > 0 ? Math.ceil(count / pageSize) : 0;
+    /** Array of navigation items, like buttons or arrows. */
+    var items = (0, helpers_1.getPaginationItems)(page, pageCount);
+    /** First item displayed on the current page. */
+    var rangeStart = (page - 1) * pageSize + 1;
+    /** Last item displayed on the current page. */
+    var rangeEnd = page === pageCount ? count : page * pageSize;
+    return {
+        count: count,
+        items: items,
+        onPageChange: onPageChange,
+        page: page,
+        pageCount: pageCount,
+        pageSize: pageSize,
+        rangeEnd: rangeEnd,
+        rangeStart: rangeStart
+    };
+}
+exports.default = usePagination;

package/pagination/usePagination.types.d.ts

@@ -0,0 +1,12 @@
+export declare type UsePaginationProps = {
+    /** Total amount of items being paginated. */
+    count: number;
+    /** Starting page in uncontrolled mode. */
+    defaultPage?: number;
+    /** Callback triggered by Pagination elements. */
+    onPageChange?: (page: number) => void;
+    /** Currently displayed page. */
+    page?: number;
+    /** Amount of items per page. */
+    pageSize: number;
+};

package/pagination/usePagination.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/theme/components.d.ts

@@ -679,6 +679,13 @@ declare const _default: {
         };
         variants: {};
     };
+    Pagination: {
+        baseStyle: {};
+        defaultProps: {};
+        parts: string[];
+        sizes: {};
+        variants: {};
+    };
     Panel: {
         baseStyle: {};
         defaultProps: {

package/theme/components.js

@@ -23,15 +23,16 @@ var theme_17 = __importDefault(require("../menu/theme"));
 var theme_18 = __importDefault(require("../modal/theme"));
 var theme_19 = __importDefault(require("../notification/theme"));
 var theme_20 = __importDefault(require("../p/theme"));
-var theme_21 = __importDefault(require("../panel/theme"));
-var theme_22 = __importDefault(require("../popover/theme"));
-var theme_23 = __importDefault(require("../radio/theme"));
-var theme_24 = __importDefault(require("../skeleton/theme"));
-var theme_25 = __importDefault(require("../spinner/theme"));
-var theme_26 = __importDefault(require("../switch/theme"));
-var theme_27 = __importDefault(require("../t/theme"));
-var theme_28 = __importDefault(require("../tag/theme"));
-var theme_29 = __importDefault(require("../textarea/theme"));
+var theme_21 = __importDefault(require("../pagination/theme"));
+var theme_22 = __importDefault(require("../panel/theme"));
+var theme_23 = __importDefault(require("../popover/theme"));
+var theme_24 = __importDefault(require("../radio/theme"));
+var theme_25 = __importDefault(require("../skeleton/theme"));
+var theme_26 = __importDefault(require("../spinner/theme"));
+var theme_27 = __importDefault(require("../switch/theme"));
+var theme_28 = __importDefault(require("../t/theme"));
+var theme_29 = __importDefault(require("../tag/theme"));
+var theme_30 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Avatar: theme_1.default,
     Box: theme_2.default,
@@ -53,13 +54,14 @@ exports.default = {
     Modal: theme_18.default,
     Notification: theme_19.default,
     P: theme_20.default,
-    Panel: theme_21.default,
-    Popover: theme_22.default,
-    Radio: theme_23.default,
-    Skeleton: theme_24.default,
-    Spinner: theme_25.default,
-    Switch: theme_26.default,
-    T: theme_27.default,
-    Tag: theme_28.default,
-    Textarea: theme_29.default
+    Pagination: theme_21.default,
+    Panel: theme_22.default,
+    Popover: theme_23.default,
+    Radio: theme_24.default,
+    Skeleton: theme_25.default,
+    Spinner: theme_26.default,
+    Switch: theme_27.default,
+    T: theme_28.default,
+    Tag: theme_29.default,
+    Textarea: theme_30.default
 };

package/theme/defaultTheme.d.ts

@@ -875,6 +875,13 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        Pagination: {
+            baseStyle: {};
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {};
+        };
         Panel: {
             baseStyle: {};
             defaultProps: {

package/utils/react.d.ts

@@ -20,6 +20,20 @@ export declare function useCallbackRef<T extends AnyFunction>(callback?: T): T;
  * @param events - array of events listened for (default: ['mousedown', 'touchstart'])
  */
 export declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], callback?: (event: Event) => void, events?: string[]): void;
+export declare type UseControlledProps<T> = {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+};
+/** Supports state management in components that can be controlled or uncontrolled. */
+export declare function useControlled<T>(props: UseControlledProps<T>): [T, React.Dispatch<React.SetStateAction<T>>, {
+    isControlled: boolean;
+    reset: () => void;
+}];
 /** Returns an array with each prefix added to the id. Useful for aria attributes in compound components. */
 export declare function useIds(id: string, prefixes: string[]): string[];
+/**
+ * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
+ */
+export declare function useIsMounted(): () => boolean;
 export {};

package/utils/react.js

@@ -45,9 +45,10 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIds = exports.useClickOutside = exports.useCallbackRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
+exports.useIsMounted = exports.useIds = exports.useControlled = exports.useClickOutside = exports.useCallbackRef = exports.mergeRefs = exports.createContext = exports.assignRef = void 0;
 var react_1 = __importStar(require("react"));
 var assertion_1 = require("./assertion");
+var function_1 = require("./function");
 /**
  * Assigns given value to the provided ref.
  * Supports ref as function (e.g. useState) and classic ref (e.g. useRef).
@@ -136,8 +137,44 @@ function useClickOutside(ref, callback, events) {
     }, [eventsString, ref]);
 }
 exports.useClickOutside = useClickOutside;
+// TODO: Move to ui-utils
+/** Supports state management in components that can be controlled or uncontrolled. */
+function useControlled(props) {
+    var defaultValue = props.defaultValue, onChangeProp = props.onChange, valueProp = props.value;
+    var _a = __read((0, react_1.useState)(defaultValue), 2), valueState = _a[0], setValue = _a[1];
+    var isControlled = valueProp !== undefined;
+    var value = isControlled ? valueProp : valueState;
+    /** Triggers the external callback with the new value. In uncontrolled mode, updates state. */
+    var onChange = useCallbackRef(function (next) {
+        var newValue = (0, function_1.runIfFn)(next);
+        if (!isControlled)
+            setValue(newValue);
+        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+    });
+    /** In uncontrolled mode, sets the state to the default value. */
+    var reset = useCallbackRef(function () {
+        !isControlled && defaultValue && onChange(defaultValue);
+    });
+    return [value, onChange, { isControlled: isControlled, reset: reset }];
+}
+exports.useControlled = useControlled;
 /** Returns an array with each prefix added to the id. Useful for aria attributes in compound components. */
 function useIds(id, prefixes) {
     return prefixes.map(function (prefix) { return prefix + "-" + id; });
 }
 exports.useIds = useIds;
+// TODO: Bring it from ui-utils
+/**
+ * Provides a function, which can be called to check if component using the hook is mounted or unmounted.
+ */
+function useIsMounted() {
+    var isMounted = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(function () {
+        isMounted.current = true;
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return (0, react_1.useCallback)(function () { return isMounted.current; }, []);
+}
+exports.useIsMounted = useIsMounted;