@charcoal-ui/react-sandbox 3.2.0 → 3.3.0

package/dist/index.esm.js

@@ -303,7 +303,7 @@ import { useContext } from "react";
 import * as React2 from "react";
 import styled6, { createGlobalStyle, css as css3 } from "styled-components";
 
-// src/foundation/contants.ts
+// src/foundation/constants.ts
 import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from "@charcoal-ui/foundation";
 var MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72;
 var RESPONSIVE_LEFT_WIDTH = columnSystem(2, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT;
@@ -1374,12 +1374,12 @@ function Carousel({
     animation.current = true;
   }, [animation, scrollLeft, set, scrollAmountCoef, setScrollLeft]);
   useEffect2(() => {
-    const newleftShow = scrollLeft > 0;
-    const newrightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0;
-    if (newleftShow !== leftShow || newrightShow !== rightShow) {
-      setLeftShow(newleftShow);
-      setRightShow(newrightShow);
-      onScrollStateChange?.(newleftShow || newrightShow);
+    const newLeftShow = scrollLeft > 0;
+    const newRightShow = scrollLeft < maxScrollLeft && maxScrollLeft > 0;
+    if (newLeftShow !== leftShow || newRightShow !== rightShow) {
+      setLeftShow(newLeftShow);
+      setRightShow(newRightShow);
+      onScrollStateChange?.(newLeftShow || newRightShow);
     }
   }, [leftShow, maxScrollLeft, onScrollStateChange, rightShow, scrollLeft]);
   const handleScroll = useCallback2(() => {
@@ -1680,27 +1680,32 @@ var StyledPolyline = styled15.polyline`
 // src/components/Pager/index.tsx
 import { useComponentAbstraction as useComponentAbstraction4 } from "@charcoal-ui/react";
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-function usePagerWindow(page, pageCount, windowSize = 7) {
+function usePagerWindow(page, pageCount, pageRangeDisplayed = 7) {
   if (process.env.NODE_ENV !== "production") {
-    warning((page | 0) === page, `\`page\` must be interger (${page})`);
+    warning((page | 0) === page, `\`page\` must be integer (${page})`);
     warning(
       (pageCount | 0) === pageCount,
-      `\`pageCount\` must be interger (${pageCount})`
+      `\`pageCount\` must be integer (${pageCount})`
     );
+    warning(
+      (pageRangeDisplayed | 0) === pageRangeDisplayed,
+      `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`
+    );
+    warning(pageRangeDisplayed > 2, `\`windowSize\` must be greater than 2`);
   }
   const window2 = useMemo2(() => {
     const visibleFirstPage = 1;
     const visibleLastPage = Math.min(
       pageCount,
-      Math.max(page + Math.floor(windowSize / 2), windowSize)
+      Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed)
     );
-    if (visibleLastPage <= windowSize) {
+    if (visibleLastPage <= pageRangeDisplayed) {
       return Array.from(
         { length: 1 + visibleLastPage - visibleFirstPage },
         (_, i) => visibleFirstPage + i
       );
     } else {
-      const start = visibleLastPage - (windowSize - 1) + 2;
+      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2;
       return [
         visibleFirstPage,
         "...",
@@ -1710,12 +1715,17 @@ function usePagerWindow(page, pageCount, windowSize = 7) {
         )
       ];
     }
-  }, [page, pageCount, windowSize]);
+  }, [page, pageCount, pageRangeDisplayed]);
   useDebugValue2(window2);
   return window2;
 }
-var Pager_default = memo2(function Pager({ page, pageCount, onChange }) {
-  const window2 = usePagerWindow(page, pageCount);
+var Pager_default = memo2(function Pager({
+  page,
+  pageCount,
+  pageRangeDisplayed,
+  onChange
+}) {
+  const window2 = usePagerWindow(page, pageCount, pageRangeDisplayed);
   const makeClickHandler = useCallback3(
     (value) => () => {
       onChange(value);
@@ -1752,9 +1762,14 @@ var Pager_default = memo2(function Pager({ page, pageCount, onChange }) {
     )
   ] });
 });
-function LinkPager({ page, pageCount, makeUrl }) {
+function LinkPager({
+  page,
+  pageCount,
+  pageRangeDisplayed,
+  makeUrl
+}) {
   const { Link } = useComponentAbstraction4();
-  const window2 = usePagerWindow(page, pageCount);
+  const window2 = usePagerWindow(page, pageCount, pageRangeDisplayed);
   const hasNext = page < pageCount;
   const hasPrev = page > 1;
   return /* @__PURE__ */ jsxs8(PagerContainer, { children: [