@charcoal-ui/react-sandbox 3.2.0 → 3.3.0

package/dist/components/Carousel/index.story.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    decorators: ((...args: any) => any)[];
+    decorators: any[];
 };
 export default _default;
 export declare const _Carousel: () => JSX.Element;

package/dist/components/CarouselButton/index.story.d.ts

@@ -1,7 +1,7 @@
 import CarouselButton from '.';
 declare const _default: {
     title: string;
-    decorators: ((...args: any) => any)[];
+    decorators: any[];
     component: typeof CarouselButton;
 };
 export default _default;

package/dist/components/Pager/index.d.ts

@@ -1,6 +1,7 @@
 interface CommonProps {
     page: number;
     pageCount: number;
+    pageRangeDisplayed?: number;
 }
 export interface PagerProps extends CommonProps {
     onChange(newPage: number): void;
@@ -10,5 +11,5 @@ export default _default;
 export interface LinkPagerProps extends CommonProps {
     makeUrl(page: number): string;
 }
-export declare function LinkPager({ page, pageCount, makeUrl }: LinkPagerProps): JSX.Element;
+export declare function LinkPager({ page, pageCount, pageRangeDisplayed, makeUrl, }: LinkPagerProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Pager/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pager/index.tsx"],"names":[],"mappings":"AAmEA,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;;AAGD,wBAmDE;AAEF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;CAC9B;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,cAAc,eAqCrE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pager/index.tsx"],"names":[],"mappings":"AA4EA,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAED,MAAM,WAAW,UAAW,SAAQ,WAAW;IAC7C,QAAQ,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;;AAGD,wBAwDE;AAEF,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;CAC9B;AAED,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,SAAS,EACT,kBAAkB,EAClB,OAAO,GACR,EAAE,cAAc,eAqChB"}

package/dist/components/Pager/index.story.d.ts

@@ -15,12 +15,19 @@ declare const _default: {
                 min: number;
             };
         };
+        pageRangeDisplayed: {
+            control: {
+                type: string;
+                min: number;
+            };
+        };
     };
 };
 export default _default;
 interface Props {
     page: number;
     pageCount: number;
+    pageRangeDisplayed?: number;
 }
 export declare const Default: Story<Props>;
 export declare const Link: Story<Props>;
@@ -28,4 +35,5 @@ export declare const NotCollapsed: Story<Props>;
 export declare const CollapsedWithDots: Story<Props>;
 export declare const LastPage: Story<Props>;
 export declare const One: Story<Props>;
+export declare const LittlePageRangeDisplayed: Story<Props>;
 //# sourceMappingURL=index.story.d.ts.map

package/dist/components/Pager/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Pager/index.story.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;;;;;;;;;;;;;;;AAIzC,wBAiBC;AAED,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;CAClB;AAOD,eAAO,MAAM,OAAO,cAAwB,CAAA;AAmC5C,eAAO,MAAM,IAAI,cAAqB,CAAA;AAMtC,eAAO,MAAM,YAAY,cAAqB,CAAA;AAM9C,eAAO,MAAM,iBAAiB,cAAqB,CAAA;AAMnD,eAAO,MAAM,QAAQ,cAAqB,CAAA;AAM1C,eAAO,MAAM,GAAG,cAAqB,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Pager/index.story.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAIzC,wBAuBC;AAED,UAAU,KAAK;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B;AAkBD,eAAO,MAAM,OAAO,cAAwB,CAAA;AA0D5C,eAAO,MAAM,IAAI,cAAqB,CAAA;AAMtC,eAAO,MAAM,YAAY,cAAqB,CAAA;AAM9C,eAAO,MAAM,iBAAiB,cAAqB,CAAA;AAMnD,eAAO,MAAM,QAAQ,cAAqB,CAAA;AAM1C,eAAO,MAAM,GAAG,cAAqB,CAAA;AAMrC,eAAO,MAAM,wBAAwB,cAAqB,CAAA"}

package/dist/foundation/{contants.d.ts → constants.d.ts}

@@ -1,4 +1,4 @@
 export declare const MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72;
 export declare const RESPONSIVE_LEFT_WIDTH: number;
 export declare const RESPONSIVE_MAIN_MAX_WIDTH: number;
-//# sourceMappingURL=contants.d.ts.map
+//# sourceMappingURL=constants.d.ts.map

package/dist/foundation/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/foundation/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iCAAiC,KAAK,CAAA;AAEnD,eAAO,MAAM,qBAAqB,QACuB,CAAA;AACzD,eAAO,MAAM,yBAAyB,QAIrC,CAAA"}

package/dist/index.cjs.js

@@ -371,7 +371,7 @@ var import_react3 = require("react");
 var React2 = __toESM(require("react"));
 var import_styled_components7 = __toESM(require("styled-components"));
 
-// src/foundation/contants.ts
+// src/foundation/constants.ts
 var import_foundation = require("@charcoal-ui/foundation");
 var MAIN_COLUMN_HORIZONTAL_MIN_MARGIN = 72;
 var RESPONSIVE_LEFT_WIDTH = (0, import_foundation.columnSystem)(2, import_foundation.COLUMN_UNIT, import_foundation.GUTTER_UNIT) + import_foundation.GUTTER_UNIT;
@@ -1428,12 +1428,12 @@ function Carousel({
     animation.current = true;
   }, [animation, scrollLeft, set, scrollAmountCoef, setScrollLeft]);
   (0, import_react10.useEffect)(() => {
-    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 = (0, import_react10.useCallback)(() => {
@@ -1734,27 +1734,32 @@ var StyledPolyline = import_styled_components16.default.polyline`
 // src/components/Pager/index.tsx
 var import_react12 = require("@charcoal-ui/react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-function usePagerWindow(page, pageCount, windowSize = 7) {
+function usePagerWindow(page, pageCount, pageRangeDisplayed = 7) {
   if (process.env.NODE_ENV !== "production") {
-    (0, import_warning.default)((page | 0) === page, `\`page\` must be interger (${page})`);
+    (0, import_warning.default)((page | 0) === page, `\`page\` must be integer (${page})`);
     (0, import_warning.default)(
       (pageCount | 0) === pageCount,
-      `\`pageCount\` must be interger (${pageCount})`
+      `\`pageCount\` must be integer (${pageCount})`
     );
+    (0, import_warning.default)(
+      (pageRangeDisplayed | 0) === pageRangeDisplayed,
+      `\`pageRangeDisplayed\` must be integer (${pageRangeDisplayed})`
+    );
+    (0, import_warning.default)(pageRangeDisplayed > 2, `\`windowSize\` must be greater than 2`);
   }
   const window2 = (0, import_react11.useMemo)(() => {
     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,
         "...",
@@ -1764,12 +1769,17 @@ function usePagerWindow(page, pageCount, windowSize = 7) {
         )
       ];
     }
-  }, [page, pageCount, windowSize]);
+  }, [page, pageCount, pageRangeDisplayed]);
   (0, import_react11.useDebugValue)(window2);
   return window2;
 }
-var Pager_default = (0, import_react11.memo)(function Pager({ page, pageCount, onChange }) {
-  const window2 = usePagerWindow(page, pageCount);
+var Pager_default = (0, import_react11.memo)(function Pager({
+  page,
+  pageCount,
+  pageRangeDisplayed,
+  onChange
+}) {
+  const window2 = usePagerWindow(page, pageCount, pageRangeDisplayed);
   const makeClickHandler = (0, import_react11.useCallback)(
     (value) => () => {
       onChange(value);
@@ -1806,9 +1816,14 @@ var Pager_default = (0, import_react11.memo)(function Pager({ page, pageCount, o
     )
   ] });
 });
-function LinkPager({ page, pageCount, makeUrl }) {
+function LinkPager({
+  page,
+  pageCount,
+  pageRangeDisplayed,
+  makeUrl
+}) {
   const { Link } = (0, import_react12.useComponentAbstraction)();
-  const window2 = usePagerWindow(page, pageCount);
+  const window2 = usePagerWindow(page, pageCount, pageRangeDisplayed);
   const hasNext = page < pageCount;
   const hasPrev = page > 1;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(PagerContainer, { children: [