@wavelengthusaf/components 2.2.5 → 2.3.0

package/README.md

@@ -14,9 +14,17 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.3.0 
+
+- Added `DefaultPagination` component to package for numbered pagination navigation, and modified PagePagination for testbed.  
+
+### 2.2.5 
+
+- Readded `DefaultIcon` component to package.  
+
 ### 2.2.2 - 2.2.4
 
-- Updated the Footer component to include the text? and textColor? props; slightly changed the appearance of the full Wavelength Logo in the footer.
+- Updated the `Footer` component to include the `text?` and `textColor?` props; slightly changed the appearance of the full Wavelength Logo in the footer.
 
 ### 2.2.1
 

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

@@ -0,0 +1,11 @@
+interface PaginationProps {
+    totalPages: number;
+    current: number;
+    handleChangePage: (value: number | string) => void;
+    itemList: (string | number)[];
+    firstEllipseList: number[];
+    secondEllipseList: number[];
+}
+export declare function ButtonPagination({ totalPages, current, handleChangePage, itemList, firstEllipseList, secondEllipseList }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default ButtonPagination;
+//# sourceMappingURL=ButtonPagination.d.ts.map

package/dist/components/pagination/ButtonPagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonPagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/ButtonPagination.tsx"],"names":[],"mappings":"AAQA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,iBAAiB,EAAE,MAAM,EAAE,CAAC;CAC7B;AAcD,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,EAAE,eAAe,2CA4HzI;AAED,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,12 @@
+interface PaginationProps {
+    totalPages: number;
+    current: number;
+    variant?: "text" | "contained" | "outlined";
+    handleChangePage: (value: number | string) => void;
+    itemList: (string | number)[];
+    firstEllipseList: number[];
+    secondEllipseList: number[];
+}
+export declare function VariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default VariationPagination;
+//# sourceMappingURL=VariationPagination.d.ts.map

package/dist/components/pagination/VariationPagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariationPagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/VariationPagination.tsx"],"names":[],"mappings":"AAUA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IACnD,QAAQ,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,iBAAiB,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,EAAE,eAAe,2CAmHrJ;AAED,eAAe,mBAAmB,CAAC"}

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

@@ -0,0 +1,13 @@
+interface PaginationProps {
+    totalPages: number;
+    boundaryCount?: number;
+    siblingCount?: number;
+    currentPageNumber: number;
+    style?: "text" | "contained" | "outlined" | "circular";
+    onPageChange: (page: number) => void;
+}
+export declare const range: (start: number, end: number) => number[];
+export declare function ascendingRange(start: number, end: number): number[];
+export declare function DefaultPagination({ totalPages, currentPageNumber, siblingCount, boundaryCount, style, onPageChange }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export default DefaultPagination;
+//# sourceMappingURL=WavelengthPagination.d.ts.map

package/dist/components/pagination/WavelengthPagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WavelengthPagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/WavelengthPagination.tsx"],"names":[],"mappings":"AAIA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;IACvD,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,KAAK,UAAW,MAAM,OAAO,MAAM,KAAG,MAAM,EAGxD,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAUnE;AAED,wBAAgB,iBAAiB,CAAC,EAAE,UAAU,EAAE,iBAAiB,EAAE,YAAgB,EAAE,aAAiB,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,eAAe,2CA6E7I;AAED,eAAe,iBAAiB,CAAC"}

package/dist/components/search/SearchTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchTextField.d.ts","sourceRoot":"","sources":["../../../src/components/search/SearchTextField.tsx"],"names":[],"mappings":"AAMA,wBAAgB,eAAe,4CAqB9B;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"SearchTextField.d.ts","sourceRoot":"","sources":["../../../src/components/search/SearchTextField.tsx"],"names":[],"mappings":"AAKA,wBAAgB,eAAe,4CAqB9B;AAED,eAAe,eAAe,CAAC"}

package/dist/index.d.ts

@@ -35,4 +35,5 @@ export * from "./components/snackbars/TestSnackbar";
 export * from "./components/sliders/WavelengthSlider";
 export * from "./components/carousels/WavelengthDefaultCarousel";
 export * from "./components/carousels/sliderCarousel";
+export * from "./components/pagination/WavelengthPagination";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,wDAAwD,CAAC;AACvE,cAAc,wEAAwE,CAAC;AACvF,cAAc,sEAAsE,CAAC;AACrF,cAAc,+CAA+C,CAAC;AAG9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,mFAAmF,CAAC;AAGlG,cAAc,iDAAiD,CAAC;AAGhE,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AAGpD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,oDAAoD,CAAC;AACnE,cAAc,6DAA6D,CAAC;AAG5E,cAAc,wDAAwD,CAAC;AAGvE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,0DAA0D,CAAC;AAGzE,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2CAA2C,CAAC;AAG1D,cAAc,mEAAmE,CAAC;AAGlF,cAAc,6BAA6B,CAAC;AAG5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AAGvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mDAAmD,CAAC;AAClE,cAAc,qCAAqC,CAAC;AAGpD,cAAc,uCAAuC,CAAC;AAGtD,cAAc,kDAAkD,CAAC;AACjE,cAAc,uCAAuC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AAGnC,cAAc,wDAAwD,CAAC;AACvE,cAAc,wEAAwE,CAAC;AACvF,cAAc,sEAAsE,CAAC;AACrF,cAAc,+CAA+C,CAAC;AAG9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,mFAAmF,CAAC;AAGlG,cAAc,iDAAiD,CAAC;AAGhE,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AAGpD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,oDAAoD,CAAC;AACnE,cAAc,6DAA6D,CAAC;AAG5E,cAAc,wDAAwD,CAAC;AAGvE,cAAc,4DAA4D,CAAC;AAC3E,cAAc,0DAA0D,CAAC;AAGzE,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2CAA2C,CAAC;AAG1D,cAAc,mEAAmE,CAAC;AAGlF,cAAc,6BAA6B,CAAC;AAG5C,cAAc,iDAAiD,CAAC;AAChE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,wCAAwC,CAAC;AAGvD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mDAAmD,CAAC;AAClE,cAAc,qCAAqC,CAAC;AAGpD,cAAc,uCAAuC,CAAC;AAGtD,cAAc,kDAAkD,CAAC;AACjE,cAAc,uCAAuC,CAAC;AAEtD,cAAc,8CAA8C,CAAC"}

package/dist/index.js

@@ -5007,12 +5007,312 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
     }
   ) }) });
 };
+
+// src/components/pagination/WavelengthPagination.tsx
+import { useState as useState7, useMemo } from "react";
+
+// src/components/pagination/ButtonPagination.tsx
+import { useState as useState5 } from "react";
+import Button6 from "@mui/material/Button";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import styled6 from "styled-components";
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+var MyDroplistItems = styled6("li")`
+  background-color: white;
+  color: #000000;
+  padding: 10px 30px;
+  textdecoration: none;
+  display: block;
+  width: 80px;
+
+  &:hover {
+    background-color: lightgray;
+  }
+`;
+function ButtonPagination({ totalPages, current, handleChangePage, itemList, firstEllipseList, secondEllipseList }) {
+  const [isOpen, setIsOpen] = useState5(false);
+  const [isSecOpen, setIsSecOpen] = useState5(false);
+  const toggleDropdown = (index) => {
+    if (index === 1) {
+      setIsOpen(!isOpen);
+    } else {
+      setIsSecOpen(!isSecOpen);
+    }
+  };
+  const dropstyles = {
+    dropcenter: {
+      position: "relative",
+      left: "-40px",
+      top: "-20px"
+    },
+    mydrop: {
+      position: "absolute",
+      zIndex: "3",
+      maxHeight: "200px",
+      overflow: "scroll"
+    },
+    rangenumbers: {
+      display: "flex"
+    },
+    butPagCompDivStyle: {
+      display: "flex"
+    }
+  };
+  const WLButtonPagStyle = {
+    background: "white",
+    color: "black",
+    border: "none",
+    padding: "1px",
+    fontSize: "16px",
+    height: "55px",
+    width: "40px",
+    boxshadow: "4px 2px 4px darkslategray",
+    borderRadius: "50%",
+    margin: "3px",
+    "&:hover": {
+      background: "#49baf7"
+    },
+    "&:disabled": {
+      background: "rgb(226, 223, 223)"
+    },
+    "&.active": {
+      background: "#8FD8FF"
+    }
+  };
+  return /* @__PURE__ */ jsxs23("div", { style: dropstyles.butPagCompDivStyle, children: [
+    /* @__PURE__ */ jsx31(Button6, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx31(ArrowBackIosNewIcon, {}) }),
+    /* @__PURE__ */ jsx31("section", { style: dropstyles.rangenumbers, children: itemList.map(
+      (item, index) => item === "..." && index === 1 ? (
+        //first half ellipse with first half dropdown
+        // dropdown
+        // eslint-disable-next-line react/jsx-key
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx31(Button6, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isOpen && /* @__PURE__ */ jsx31("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx31("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx31(
+            MyDroplistItems,
+            {
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : item === "..." && index === 5 ? (
+        //second half ellipse with second half dropdown
+        /* @__PURE__ */ jsxs23("div", { children: [
+          /* @__PURE__ */ jsx31(Button6, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isSecOpen && /* @__PURE__ */ jsx31("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx31("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx31(
+            MyDroplistItems,
+            {
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : /* @__PURE__ */ jsx31(Button6, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", sx: WLButtonPagStyle, children: item }, index)
+    ) }),
+    /* @__PURE__ */ jsx31(Button6, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx31(ArrowForwardIosIcon, {}) })
+  ] });
+}
+var ButtonPagination_default = ButtonPagination;
+
+// src/components/pagination/VariationPagination.tsx
+import { useState as useState6 } from "react";
+import Button7 from "@mui/material/Button";
+import ArrowBackIosNewIcon2 from "@mui/icons-material/ArrowBackIosNew";
+import ArrowForwardIosIcon2 from "@mui/icons-material/ArrowForwardIos";
+import styled7 from "styled-components";
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+function VariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList }) {
+  const [isOpen, setIsOpen] = useState6(false);
+  const [isSecOpen, setIsSecOpen] = useState6(false);
+  const MyDroplistItems2 = styled7("li")`
+    background-color: white;
+    color: #000000;
+    padding: 10px 30px;
+    textdecoration: none;
+    display: block;
+    width: 80px;
+
+    &:hover {
+      background-color: lightgray;
+    }
+  `;
+  const dropstyles = {
+    pagination: {
+      display: "flex"
+    },
+    dropcenter: {
+      position: "relative",
+      left: "-40px",
+      top: "-20px"
+    },
+    mydrop: {
+      position: "absolute",
+      zIndex: "3",
+      maxHeight: "200px",
+      overflow: "scroll"
+    },
+    rangenumbers: {
+      display: "flex"
+    }
+  };
+  const toggleDropdown = (index) => {
+    if (index === 1) {
+      setIsOpen(!isOpen);
+    } else {
+      setIsSecOpen(!isSecOpen);
+    }
+  };
+  return /* @__PURE__ */ jsxs24("div", { style: dropstyles.pagination, children: [
+    /* @__PURE__ */ jsx32(Button7, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ jsx32(ArrowBackIosNewIcon2, {}) }),
+    /* @__PURE__ */ jsx32("section", { style: dropstyles.rangenumbers, children: itemList.map(
+      (item, index) => item === "..." && index === 1 ? (
+        //first half ellipse with first half dropdown
+        // eslint-disable-next-line react/jsx-key
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsx32(Button7, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
+          isOpen && /* @__PURE__ */ jsx32("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx32("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx32(
+            MyDroplistItems2,
+            {
+              style: dropstyles.mydroplist,
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : item === "..." && index === 5 ? (
+        //second half ellipse with second half dropdown
+        /* @__PURE__ */ jsxs24("div", { children: [
+          /* @__PURE__ */ jsx32(Button7, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
+          isSecOpen && /* @__PURE__ */ jsx32("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx32("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx32(
+            MyDroplistItems2,
+            {
+              style: dropstyles.mydroplist,
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : /* @__PURE__ */ jsx32(Button7, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", variant, children: item }, index)
+    ) }),
+    /* @__PURE__ */ jsx32(Button7, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ jsx32(ArrowForwardIosIcon2, {}) })
+  ] });
+}
+var VariationPagination_default = VariationPagination;
+
+// src/components/pagination/WavelengthPagination.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+var range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, i) => start + i);
+};
+function ascendingRange(start, end) {
+  const result = [];
+  for (let i = start; i < end; i++) {
+    if (i !== start) {
+      result.push(i);
+    }
+  }
+  return result;
+}
+function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, boundaryCount = 1, style: style3, onPageChange }) {
+  const [current, setCurrent] = useState7(currentPageNumber);
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+  const siblingsStart = Math.max(Math.min(current - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
+  const firstEllipseList = ascendingRange(1, siblingsStart);
+  const secondEllipseList = ascendingRange(siblingsEnd, totalPages);
+  const itemList = useMemo(() => {
+    return [
+      ...startPages,
+      ...siblingsStart > boundaryCount + 2 ? ["..."] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : [],
+      ...range(siblingsStart, siblingsEnd),
+      ...siblingsEnd < totalPages - boundaryCount - 1 ? ["..."] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : [],
+      ...endPages
+    ];
+  }, [current, totalPages, boundaryCount, siblingCount]);
+  const handleChangePage = (value) => {
+    if (typeof value === "number") {
+      setCurrent(value);
+      onPageChange(value);
+    }
+  };
+  if (style3 === "circular") {
+    return /* @__PURE__ */ jsx33(ButtonPagination_default, { totalPages, current, handleChangePage, itemList, firstEllipseList, secondEllipseList });
+  } else if (style3 === "text") {
+    return /* @__PURE__ */ jsx33(
+      VariationPagination_default,
+      {
+        totalPages,
+        current,
+        variant: "text",
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else if (style3 === "outlined") {
+    return /* @__PURE__ */ jsx33(
+      VariationPagination_default,
+      {
+        totalPages,
+        current,
+        variant: "outlined",
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else if (style3 === "contained") {
+    return /* @__PURE__ */ jsx33(
+      VariationPagination_default,
+      {
+        totalPages,
+        current,
+        variant: "contained",
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx33(
+      VariationPagination_default,
+      {
+        totalPages,
+        current,
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  }
+}
 export {
   AppLogo,
   ButtonIcon,
   ButtonMenu,
   DefaultCarousel,
   DefaultIcon,
+  DefaultPagination,
   ManyPlanesComponent,
   NotAvailablePage,
   SearchTextField,
@@ -5042,8 +5342,10 @@ export {
   WavelengthStandardSnackbar,
   WavelengthTitleBar,
   add,
+  ascendingRange,
   concat,
   findBestStringMatch,
+  range,
   useOutsideClick,
   useThemeContext
 };