@devtron-labs/devtron-fe-common-lib 0.0.55-beta-6 → 0.0.55-beta-7

package/dist/Common/Modals/VisibleModal2.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
-export declare class VisibleModal2 extends React.Component<{
-    className: string;
-    close?: (e: any) => void;
-}> {
-    modalRef: HTMLElement;
-    constructor(props: any);
-    escFunction(event: any): void;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    render(): React.ReactPortal;
-}
+import React from 'react';
+export declare class VisibleModal2 extends React.Component<{
+    className: string;
+    close?: (e: any) => void;
+}> {
+    modalRef: HTMLElement;
+    constructor(props: any);
+    escFunction(event: any): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactPortal;
+}

package/dist/Common/Modals/VisibleModal2.js

@@ -0,0 +1,31 @@
+var i = Object.defineProperty;
+var n = (t, s, e) => s in t ? i(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var o = (t, s, e) => (n(t, typeof s != "symbol" ? s + "" : s, e), e);
+import { j as c } from "../../jsx-runtime-0dcb030c.js";
+import d from "react";
+import l from "react-dom";
+class h extends d.Component {
+  constructor(e) {
+    super(e);
+    o(this, "modalRef", document.getElementById("visible-modal-2"));
+    this.escFunction = this.escFunction.bind(this);
+  }
+  escFunction(e) {
+    e.keyCode === 27 && this.props.close && this.props.close(e);
+  }
+  componentDidMount() {
+    document.addEventListener("keydown", this.escFunction), this.modalRef.classList.add("show-with-bg");
+  }
+  componentWillUnmount() {
+    document.removeEventListener("keydown", this.escFunction), this.modalRef.classList.remove("show-with-bg");
+  }
+  render() {
+    return l.createPortal(
+      /* @__PURE__ */ c.jsx("div", { className: `visible-modal__body ${this.props.className}`, onClick: this.props?.close, "data-testid": "visible-modal2-close", children: this.props.children }),
+      document.getElementById("visible-modal-2")
+    );
+  }
+}
+export {
+  h as VisibleModal2
+};

package/dist/Common/MultiSelectCustomization.d.ts

@@ -1,37 +1,37 @@
-import React from 'react';
-export declare const Option: (props: any) => JSX.Element;
-export declare const SingleSelectOption: (props: any) => JSX.Element;
-export declare const MultiValueContainer: (props: any) => JSX.Element;
-export declare const ClearIndicator: (props: any) => JSX.Element;
-export declare const MultiValueRemove: (props: any) => JSX.Element;
-export declare const MultiValueChipContainer: ({ validator, isAllSelected, ...props }: {
-    [x: string]: any;
-    validator: any;
-    isAllSelected?: boolean;
-}) => JSX.Element;
-export declare const multiSelectStyles: {
-    control: (base: any, state: any) => any;
-    menu: (base: any, state: any) => any;
-    option: (base: any, state: any) => any;
-    container: (base: any, state: any) => any;
-    valueContainer: (base: any, state: any) => any;
-};
-export interface CustomSelect {
-    sortSelected?: boolean;
-    options: any[];
-    onChange: (...args: any[]) => void;
-    value?: any;
-    name?: string;
-    placeholder?: string;
-    className?: string;
-    classNamePrefix?: string;
-    menuPortalTarget?: any;
-    components?: object;
-    styles?: object;
-    isMulti?: boolean;
-    isDisabled?: boolean;
-    closeMenuOnSelect?: boolean;
-    hideSelectedOptions?: boolean;
-    formatOptionLabel?: (...args: any[]) => any;
-}
-export declare const CustomSelect: React.FC<CustomSelect>;
+import React from 'react';
+export declare const Option: (props: any) => JSX.Element;
+export declare const SingleSelectOption: (props: any) => JSX.Element;
+export declare const MultiValueContainer: (props: any) => JSX.Element;
+export declare const ClearIndicator: (props: any) => JSX.Element;
+export declare const MultiValueRemove: (props: any) => JSX.Element;
+export declare const MultiValueChipContainer: ({ validator, isAllSelected, ...props }: {
+    [x: string]: any;
+    validator: any;
+    isAllSelected?: boolean;
+}) => JSX.Element;
+export declare const multiSelectStyles: {
+    control: (base: any, state: any) => any;
+    menu: (base: any, state: any) => any;
+    option: (base: any, state: any) => any;
+    container: (base: any, state: any) => any;
+    valueContainer: (base: any, state: any) => any;
+};
+export interface CustomSelect {
+    sortSelected?: boolean;
+    options: any[];
+    onChange: (...args: any[]) => void;
+    value?: any;
+    name?: string;
+    placeholder?: string;
+    className?: string;
+    classNamePrefix?: string;
+    menuPortalTarget?: any;
+    components?: object;
+    styles?: object;
+    isMulti?: boolean;
+    isDisabled?: boolean;
+    closeMenuOnSelect?: boolean;
+    hideSelectedOptions?: boolean;
+    formatOptionLabel?: (...args: any[]) => any;
+}
+export declare const CustomSelect: React.FC<CustomSelect>;

package/dist/Common/MultiSelectCustomization.js

@@ -0,0 +1,97 @@
+import { j as l } from "../jsx-runtime-0dcb030c.js";
+import { c, R as x } from "../react-select.esm-97f26847.js";
+import * as i from "react";
+const h = (e) => /* @__PURE__ */ i.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 28", width: 24, height: 24, ...e }, /* @__PURE__ */ i.createElement("g", { fill: "none", fillRule: "evenodd", transform: "translate(2 2)" }, /* @__PURE__ */ i.createElement("rect", { width: 20, height: 20, fill: "#B1B7BC", rx: 10 }), /* @__PURE__ */ i.createElement("path", { fill: "#FFF", fillRule: "nonzero", d: "M6.464 6.464a1 1 0 0 1 1.415 0l2.12 2.12 2.122-2.12a1 1 0 0 1 1.32-.083l.095.083a1 1 0 0 1 0 1.415l-2.122 2.12 2.122 2.122a1 1 0 0 1 .083 1.32l-.083.095a1 1 0 0 1-1.415 0L10 11.414l-2.121 2.122a1 1 0 0 1-1.32.083l-.095-.083a1 1 0 0 1 0-1.415L8.584 10l-2.12-2.121a1 1 0 0 1-.083-1.32z" }))), p = (e) => /* @__PURE__ */ i.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...e }, /* @__PURE__ */ i.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ i.createElement("path", { stroke: "#06C", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3.898 12.564l4.95 4.95L19.455 6.906" }))), f = (e) => /* @__PURE__ */ i.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 21, viewBox: "0 0 20 21", ...e }, /* @__PURE__ */ i.createElement("g", { fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ i.createElement("path", { fill: "#FDE7E7", stroke: "#F33E3E", strokeLinejoin: "round", strokeWidth: 2, d: "M10 1.667C5.4 1.667 1.667 5.4 1.667 10S5.4 18.333 10 18.333 18.333 14.6 18.333 10 14.6 1.667 10 1.667z" }), /* @__PURE__ */ i.createElement("path", { fill: "#F33E3E", d: "M10 10.833c.46 0 .833-.373.833-.833V6.667c0-.46-.373-.834-.833-.834-.46 0-.833.373-.833.834V10c0 .46.373.833.833.833zm0 3.334c.46 0 .833-.373.833-.834 0-.46-.373-.833-.833-.833-.46 0-.833.373-.833.833 0 .46.373.834.833.834z" }))), w = (e) => {
+  const { selectOption: t, data: n } = e;
+  return /* @__PURE__ */ l.jsxs("div", { className: "flex left pl-12", style: { background: e.isFocused ? "var(--N100)" : "transparent" }, children: [
+    /* @__PURE__ */ l.jsx(
+      "input",
+      {
+        checked: e.isSelected,
+        disabled: e.isDisabled,
+        onChange: (s) => t(n),
+        type: "checkbox",
+        style: { height: "16px", width: "16px", flex: "0 0 16px" },
+        className: "mr-8"
+      }
+    ),
+    /* @__PURE__ */ l.jsx(c.Option, { ...e })
+  ] });
+}, j = (e) => {
+  const { selectOption: t, data: n } = e, s = { height: "16px", width: "16px", flex: "0 0 16px" }, r = (o) => t(n);
+  return /* @__PURE__ */ l.jsxs("div", { className: "flex left pl-12", style: { background: e.isFocused ? "var(--N100)" : "transparent" }, children: [
+    e.isSelected ? /* @__PURE__ */ l.jsx(p, { onClick: r, className: "mr-8 icon-dim-16", style: s }) : /* @__PURE__ */ l.jsx("span", { onClick: r, className: "mr-8", style: s }),
+    /* @__PURE__ */ l.jsx(c.Option, { ...e })
+  ] });
+}, E = (e) => {
+  const { children: t, data: n, innerProps: s, selectProps: r } = e, { label: o, value: a } = n;
+  return /* @__PURE__ */ l.jsxs(c.MultiValueContainer, { data: n, innerProps: s, selectProps: r, children: [
+    /* @__PURE__ */ l.jsx("div", { className: "flex fs-12 ml-4 cn-9", children: o }),
+    t[1]
+  ] });
+}, C = (e) => {
+  const {
+    children: t = /* @__PURE__ */ l.jsx(h, { className: "icon-dim-24" }),
+    getStyles: n,
+    innerProps: { ref: s, ...r }
+  } = e;
+  return /* @__PURE__ */ l.jsx("div", { ...r, ref: s, style: n("clearIndicator", e), children: /* @__PURE__ */ l.jsx("div", { className: "flex pointer", children: t }) });
+}, k = (e) => {
+  const {
+    data: t,
+    innerProps: { onClick: n, onMouseDown: s },
+    selectProps: r
+  } = e;
+  return /* @__PURE__ */ l.jsx(c.MultiValueRemove, { ...e, children: /* @__PURE__ */ l.jsx(
+    h,
+    {
+      onClick: n,
+      onMouseDown: s,
+      onClick: (o) => n(t),
+      style: { height: "18px", width: "18px" }
+    }
+  ) });
+}, N = ({ validator: e, isAllSelected: t = !1, ...n }) => {
+  const { children: s, data: r, innerProps: o, selectProps: a } = n, { label: u, value: d } = r, m = e ? e(d) : !0;
+  return t && d !== "*" ? null : /* @__PURE__ */ l.jsxs(c.MultiValueContainer, { data: r, innerProps: o, selectProps: a, children: [
+    /* @__PURE__ */ l.jsxs("div", { className: "flex left fs-12 pl-4 pr-4 dc__ellipsis-right", children: [
+      !m && /* @__PURE__ */ l.jsx(f, { className: "mr-4 icon-dim-16" }),
+      /* @__PURE__ */ l.jsx("div", { className: `dc__ellipsis-right ${m ? "cn-9" : "cr-5"}`, children: u })
+    ] }),
+    s[1]
+  ] });
+}, S = {
+  control: (e, t) => ({
+    ...e,
+    cursor: t.isDisabled ? "not-allowed" : "normal",
+    border: t.isFocused ? "1px solid #06c" : "1px solid #d6dbdf",
+    boxShadow: "none"
+  }),
+  menu: (e, t) => ({
+    ...e
+  }),
+  option: (e, t) => ({
+    ...e,
+    backgroundColor: t.isFocused ? "var(--N100)" : "white",
+    color: "var(--N900)",
+    padding: "8px 12px"
+  }),
+  container: (e, t) => ({
+    ...e,
+    cursor: t.isDisabled ? "not-allowed" : "pointer"
+  }),
+  valueContainer: (e, t) => ({
+    ...e,
+    color: t.selectProps.menuIsOpen ? "var(--N500)" : e.color
+  })
+}, b = (e) => /* @__PURE__ */ l.jsx(x, { ...e });
+export {
+  C as ClearIndicator,
+  b as CustomSelect,
+  N as MultiValueChipContainer,
+  E as MultiValueContainer,
+  k as MultiValueRemove,
+  w as Option,
+  j as SingleSelectOption,
+  S as multiSelectStyles
+};

package/dist/Common/Pagination/PageSizeSelector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { PageSizeSelectorProps } from './types';
-declare const PageSizeSelector: ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => JSX.Element;
-export default PageSizeSelector;
+import { PageSizeSelectorProps } from './types';
+declare const PageSizeSelector: ({ pageSizeOptions, pageSize, changePageSize }: PageSizeSelectorProps) => JSX.Element;
+export default PageSizeSelector;

package/dist/Common/Pagination/PageSizeSelector.js

@@ -0,0 +1,52 @@
+import { j as e } from "../../jsx-runtime-0dcb030c.js";
+import { useState as m, useRef as x } from "react";
+import "../../Helper-a0caa238.js";
+import "../Constants.js";
+import { useClickOutside as j } from "../Hooks/UseClickOutside/UseClickOutside.js";
+import { getDefaultPageValueOptions as h } from "./utils.js";
+const g = ({
+  optionValue: s,
+  options: c,
+  setOptions: i,
+  handleCloseDropdown: r,
+  changePageSize: n
+}) => {
+  const o = () => {
+    const a = c.map((l) => ({
+      value: l.value,
+      selected: l.value === s
+    }));
+    i([...a]), r(), n(s);
+  };
+  return /* @__PURE__ */ e.jsx("div", { className: "select__item", onClick: o, children: s }, s);
+}, C = ({ pageSizeOptions: s, pageSize: c, changePageSize: i }) => {
+  const r = h(s).map((t) => ({
+    value: t.value,
+    selected: t.value === c
+  })), [n, o] = m(!1), [a, l] = m(r), d = () => {
+    o(!1);
+  }, f = () => {
+    o(!n);
+  }, p = x(null);
+  j(p, d);
+  const u = a.find((t) => t.selected), v = n ? "fa fa-caret-up" : "fa fa-caret-down";
+  return /* @__PURE__ */ e.jsxs("div", { ref: p, children: [
+    n && /* @__PURE__ */ e.jsx("div", { className: "pagination__select-menu", children: a.map((t) => /* @__PURE__ */ e.jsx(
+      g,
+      {
+        optionValue: t.value,
+        options: a,
+        setOptions: l,
+        handleCloseDropdown: d,
+        changePageSize: i
+      }
+    )) }),
+    /* @__PURE__ */ e.jsxs("button", { type: "button", className: "select__button", onClick: f, children: [
+      /* @__PURE__ */ e.jsx("span", { children: u ? u.value : "" }),
+      /* @__PURE__ */ e.jsx("span", { className: "select__icon", children: /* @__PURE__ */ e.jsx("i", { className: v }) })
+    ] })
+  ] });
+};
+export {
+  C as default
+};

package/dist/Common/Pagination/Pagination.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { PaginationProps } from './types';
-import './pagination.scss';
-declare const Pagination: ({ size, pageSize, offset, changePage, changePageSize, isPageSizeFix, pageSizeOptions, rootClassName, }: PaginationProps) => JSX.Element;
-export default Pagination;
+import { PaginationProps } from './types';
+declare const Pagination: ({ size, pageSize, offset, changePage, changePageSize, isPageSizeFix, pageSizeOptions, rootClassName, }: PaginationProps) => JSX.Element;
+export default Pagination;

package/dist/Common/Pagination/Pagination.js

@@ -0,0 +1,98 @@
+import "../../assets/Pagination.css";
+import { j as e } from "../../jsx-runtime-0dcb030c.js";
+import { useState as f, useEffect as p } from "react";
+import v from "./PageSizeSelector.js";
+import { createPageArr as u } from "./utils.js";
+const k = ({ value: a, isSelected: t, selectPage: c }) => {
+  const o = t ? "page__button page__button--selected" : "page__button", r = () => {
+    c(a);
+  };
+  return /* @__PURE__ */ e.jsx("li", { className: "page", children: /* @__PURE__ */ e.jsx("button", { className: o, onClick: r, type: "button", children: a }) });
+}, V = ({
+  size: a,
+  pageSize: t,
+  offset: c,
+  changePage: o,
+  changePageSize: r,
+  isPageSizeFix: x,
+  pageSizeOptions: N,
+  rootClassName: b
+}) => {
+  const [n, i] = f([]);
+  p(() => {
+    const s = u({ size: a, pageSize: t, selectedPageNo: 1 });
+    i(s);
+  }, [a, t]), p(() => {
+    const s = 1 + Math.floor(c / t), l = u({ size: a, pageSize: t, selectedPageNo: s });
+    i(l);
+  }, [c]);
+  const d = (s) => {
+    const l = u({ size: a, pageSize: t, selectedPageNo: s });
+    i(l), o(s);
+  }, h = () => {
+    const l = n.find((g) => g.selected).value - 1;
+    d(l);
+  }, P = () => {
+    const l = n.find((g) => g.selected).value + 1;
+    d(l);
+  }, j = c + t < a ? c + t : a, m = n.findIndex((s) => s.selected), _ = n.filter((s) => s.isVisible);
+  return (
+    // TODO: Remove pagination-wrapper from dashboard
+    /* @__PURE__ */ e.jsxs("div", { className: b || "", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "page-number", children: [
+        c + 1,
+        " - ",
+        j,
+        " of ",
+        a
+      ] }),
+      /* @__PURE__ */ e.jsxs("ul", { className: "pagination", children: [
+        /* @__PURE__ */ e.jsx("li", { className: "page", children: /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: "page__button page__button--icon",
+            disabled: !m,
+            onClick: h,
+            type: "button",
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ e.jsx("span", { className: "left-icon", children: /* @__PURE__ */ e.jsx("i", { className: "fa fa-chevron-left" }) })
+          }
+        ) }),
+        _.map((s) => /* @__PURE__ */ e.jsx(
+          k,
+          {
+            value: s.value,
+            isSelected: s.selected,
+            selectPage: d
+          },
+          s.value
+        )),
+        /* @__PURE__ */ e.jsx("li", { className: "page", children: /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: "page__button page__button--icon",
+            disabled: m === n.length - 1,
+            onClick: P,
+            type: "button",
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ e.jsx("span", { className: "left-icon", children: /* @__PURE__ */ e.jsx("i", { className: "fa fa-chevron-right" }) })
+          }
+        ) })
+      ] }),
+      !x && /* @__PURE__ */ e.jsxs("div", { className: "select", children: [
+        /* @__PURE__ */ e.jsx("span", { className: "select__placeholder", children: "Rows per page" }),
+        /* @__PURE__ */ e.jsx(
+          v,
+          {
+            pageSizeOptions: N,
+            pageSize: t,
+            changePageSize: r
+          }
+        )
+      ] })
+    ] })
+  );
+};
+export {
+  V as default
+};

package/dist/Common/Pagination/constants.d.ts

@@ -1,5 +1,5 @@
-export declare const VISIBLE_PAGES_LIMIT = 5;
-export declare const FALLBACK_PAGE_SIZE_OPTIONS: {
-    value: number;
-    selected: boolean;
-}[];
+export declare const VISIBLE_PAGES_LIMIT = 5;
+export declare const FALLBACK_PAGE_SIZE_OPTIONS: {
+    value: number;
+    selected: boolean;
+}[];

package/dist/Common/Pagination/constants.js

@@ -0,0 +1,9 @@
+const e = 5, l = [
+  { value: 20, selected: !0 },
+  { value: 40, selected: !1 },
+  { value: 50, selected: !1 }
+];
+export {
+  l as FALLBACK_PAGE_SIZE_OPTIONS,
+  e as VISIBLE_PAGES_LIMIT
+};

package/dist/Common/Pagination/index.d.ts

@@ -1 +1 @@
-export { default as Pagination } from './Pagination';
+export { default as Pagination } from './Pagination';

package/dist/Common/Pagination/index.js

@@ -0,0 +1,4 @@
+import { default as t } from "./Pagination.js";
+export {
+  t as Pagination
+};

package/dist/Common/Pagination/types.d.ts

@@ -1,51 +1,51 @@
-/// <reference types="react" />
-export interface PageSizeOption {
-    value: number;
-    selected: boolean;
-}
-export interface PaginationProps {
-    /**
-     * number of items
-     */
-    size: number;
-    /**
-     * pageSize
-     */
-    pageSize: number;
-    offset: number;
-    changePage: (pageNo: number) => void;
-    changePageSize?: (pageSize: number) => void;
-    /**
-     * If true will not show page size selector
-     */
-    isPageSizeFix?: boolean;
-    /**
-     * If given would show these options in page size selector else [20,40,50] with 20 as selected
-     */
-    pageSizeOptions?: PageSizeOption[];
-    /**
-     * class for wrapper
-     */
-    rootClassName?: string;
-}
-export interface Page {
-    value: number;
-    selected: boolean;
-    isVisible: boolean;
-}
-export interface CreatePageArrType extends Pick<PaginationProps, 'size' | 'pageSize'> {
-    selectedPageNo: number;
-}
-export interface PageSizeSelectorProps extends Pick<PaginationProps, 'pageSizeOptions' | 'pageSize' | 'changePageSize'> {
-}
-export interface PageSizeItemsProps extends Pick<PageSizeSelectorProps, 'changePageSize'> {
-    optionValue: PageSizeOption['value'];
-    options: PageSizeOption[];
-    setOptions: React.Dispatch<React.SetStateAction<PageSizeOption[]>>;
-    handleCloseDropdown: () => void;
-}
-export interface PageValueItemProps {
-    value: PageSizeOption['value'];
-    isSelected: PageSizeOption['selected'];
-    selectPage: (selectedPageNo: number) => void;
-}
+/// <reference types="react" />
+export interface PageSizeOption {
+    value: number;
+    selected: boolean;
+}
+export interface PaginationProps {
+    /**
+     * number of items
+     */
+    size: number;
+    /**
+     * pageSize
+     */
+    pageSize: number;
+    offset: number;
+    changePage: (pageNo: number) => void;
+    changePageSize?: (pageSize: number) => void;
+    /**
+     * If true will not show page size selector
+     */
+    isPageSizeFix?: boolean;
+    /**
+     * If given would show these options in page size selector else [20,40,50] with 20 as selected
+     */
+    pageSizeOptions?: PageSizeOption[];
+    /**
+     * class for wrapper
+     */
+    rootClassName?: string;
+}
+export interface Page {
+    value: number;
+    selected: boolean;
+    isVisible: boolean;
+}
+export interface CreatePageArrType extends Pick<PaginationProps, 'size' | 'pageSize'> {
+    selectedPageNo: number;
+}
+export interface PageSizeSelectorProps extends Pick<PaginationProps, 'pageSizeOptions' | 'pageSize' | 'changePageSize'> {
+}
+export interface PageSizeItemsProps extends Pick<PageSizeSelectorProps, 'changePageSize'> {
+    optionValue: PageSizeOption['value'];
+    options: PageSizeOption[];
+    setOptions: React.Dispatch<React.SetStateAction<PageSizeOption[]>>;
+    handleCloseDropdown: () => void;
+}
+export interface PageValueItemProps {
+    value: PageSizeOption['value'];
+    isSelected: PageSizeOption['selected'];
+    selectPage: (selectedPageNo: number) => void;
+}

package/dist/Common/Pagination/types.js

@@ -0,0 +1 @@
+

package/dist/Common/Pagination/utils.d.ts

@@ -1,6 +1,6 @@
-import { CreatePageArrType, Page, PageSizeOption } from './types';
-/**
- * Returns an array of pages numbers and whether they are selected, visible or not
- */
-export declare const createPageArr: ({ size, pageSize, selectedPageNo }: CreatePageArrType) => Page[];
-export declare const getDefaultPageValueOptions: (pageSizeOptions: PageSizeOption[]) => PageSizeOption[];
+import { CreatePageArrType, Page, PageSizeOption } from './types';
+/**
+ * Returns an array of pages numbers and whether they are selected, visible or not
+ */
+export declare const createPageArr: ({ size, pageSize, selectedPageNo }: CreatePageArrType) => Page[];
+export declare const getDefaultPageValueOptions: (pageSizeOptions: PageSizeOption[]) => PageSizeOption[];

package/dist/Common/Pagination/utils.js

@@ -0,0 +1,15 @@
+import { VISIBLE_PAGES_LIMIT as s, FALLBACK_PAGE_SIZE_OPTIONS as l } from "./constants.js";
+const _ = ({ size: n, pageSize: I, selectedPageNo: t }) => {
+  const u = [], o = Math.ceil(n / I), c = t - 2 < 1 ? 1 : t - 2, i = t + 2 > o ? o : t + 2;
+  for (let r = 1; r <= o; r++)
+    u.push({
+      value: r,
+      selected: r === t,
+      isVisible: i - s < r && r < c + s
+    });
+  return u;
+}, a = (n) => n?.length ? n : l;
+export {
+  _ as createPageArr,
+  a as getDefaultPageValueOptions
+};