@websolutespa/bom-mixer-ui 1.5.2 → 1.5.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.5.3
+
+### Patch Changes
+
+- Modified: Pagination
+
 ## 1.5.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -5419,29 +5419,12 @@ const Page = styled__default.default.div`
   ${props => getCssResponsive(props)}
 `;
 
-const tuple = function () {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  return args;
-};
-const tupleNumber = function () {
-  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    args[_key2] = arguments[_key2];
+const defaultContext$5 = {
+  currentPage: 1,
+  resolveUrl: () => {
+    return undefined;
   }
-  return args;
 };
-tuple('default', 'secondary', 'success', 'warning', 'error', 'abort', 'secondary-light', 'success-light', 'warning-light', 'error-light');
-tuple('default', 'secondary', 'success', 'warning', 'error');
-tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite');
-tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite', 'alert', 'purple', 'violet', 'cyan');
-tuple('default', 'silent', 'prevent');
-tuple('hover', 'click');
-tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
-tuple('start', 'center', 'end', 'left', 'right');
-
-tuple('prev', 'next', 'click');
-const defaultContext$5 = {};
 const PaginationContext = /*#__PURE__*/React__default.default.createContext(defaultContext$5);
 const usePaginationContext = () => React__default.default.useContext(PaginationContext);
 
@@ -5449,7 +5432,7 @@ const StyledPaginationItem$1 = styled__default.default.li`
   margin-right: 0.428em;
   display: inline-block;
 
-  button {
+  button, a {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
@@ -5504,14 +5487,18 @@ const StyledPaginationItem$1 = styled__default.default.li`
 `;
 const PaginationItem = _a => {
   var {
+      href,
       className,
       children,
       active,
       disabled,
       onClick
     } = _a,
-    props = __rest(_a, ["className", "children", "active", "disabled", "onClick"]);
+    props = __rest(_a, ["href", "className", "children", "active", "disabled", "onClick"]);
   const onClick_ = event => {
+    if (href) {
+      event.preventDefault();
+    }
     if (disabled) {
       return;
     }
@@ -5526,7 +5513,10 @@ const PaginationItem = _a => {
       "aria-label": props['aria-label'],
       className: classNames,
       onClick: onClick_
-    }, props, {
+    }, href ? {
+      as: 'a',
+      href
+    } : {}, props, {
       children: children
     }))
   });
@@ -5539,15 +5529,18 @@ const PaginationNext = _a => {
     } = _a,
     props = __rest(_a, ["children"]);
   const {
+    currentPage,
+    isLast,
     update,
-    isLast
+    resolveUrl
   } = usePaginationContext();
   return jsxRuntime.jsx(PaginationItem, Object.assign({
     className: "pagination-next",
     disabled: isLast,
     "aria-disabled": isLast,
     "aria-label": "next page",
-    onClick: () => update && update('next')
+    onClick: () => update && update('next'),
+    href: resolveUrl(currentPage + 1)
   }, props, {
     children: children
   }));
@@ -5643,6 +5636,9 @@ const PaginationPages = _ref => {
     current,
     setPage
   } = _ref;
+  const {
+    resolveUrl
+  } = usePaginationContext();
   const showPages = React.useMemo(() => {
     const oddLimit = limit % 2 === 0 ? limit - 1 : limit;
     return oddLimit - 2;
@@ -5657,6 +5653,7 @@ const PaginationPages = _ref => {
     "aria-label": `page ${value}`,
     active: value === active,
     onClick: () => setPage(value),
+    href: resolveUrl(value),
     children: value
   }, `pagination-item-${value}`), [setPage]);
   const renderStartItems = pagesArray.map((_, index) => {
@@ -5670,6 +5667,7 @@ const PaginationPages = _ref => {
       "aria-label": `page ${value}`,
       active: index + 1 === middleNumber,
       onClick: () => setPage(value),
+      href: resolveUrl(value),
       children: value
     }, `pagination-middle-${index}`);
   });
@@ -5686,6 +5684,7 @@ const PaginationPages = _ref => {
           "aria-label": `page ${value}`,
           active: value === current,
           onClick: () => setPage(value),
+          href: resolveUrl(value),
           children: value
         }, `pagination-item-${value}`);
       })
@@ -5712,8 +5711,10 @@ const PaginationPrevious = _a => {
     } = _a,
     props = __rest(_a, ["children"]);
   const {
+    currentPage,
+    isFirst,
     update,
-    isFirst
+    resolveUrl
   } = usePaginationContext();
   return jsxRuntime.jsx(PaginationItem, Object.assign({
     className: "pagination-previous",
@@ -5721,7 +5722,8 @@ const PaginationPrevious = _a => {
     "aria-disabled": isFirst,
     "aria-label": "previous page",
     title: "previous page",
-    onClick: () => update && update('prev')
+    onClick: () => update && update('prev'),
+    href: resolveUrl(currentPage - 1)
   }, props, {
     children: children
   }));
@@ -5753,7 +5755,7 @@ const StyledNav = styled__default.default.ul`
     margin-right: 0;
   }
 `;
-const PaginationBase = _a => {
+function PaginationBase(_a) {
   var {
       className = '',
       initialPage = 1,
@@ -5761,9 +5763,10 @@ const PaginationBase = _a => {
       limit = 7,
       page: customPage,
       children,
-      onChange
+      onChange,
+      urlResolver
     } = _a,
-    props = __rest(_a, ["className", "initialPage", "count", "limit", "page", "children", "onChange"]);
+    props = __rest(_a, ["className", "initialPage", "count", "limit", "page", "children", "onChange", "urlResolver"]);
   const label = bomMixerHooks.useLabel();
   const [page, setPage, pageRef] = bomMixerHooks.useCurrentState(initialPage);
   const [, prevChildren] = pickChild(children, PaginationPrevious);
@@ -5788,9 +5791,11 @@ const PaginationBase = _a => {
   };
   const values = React.useMemo(() => {
     return {
+      currentPage: page,
       isFirst: page <= 1,
       isLast: page >= count,
-      update
+      update,
+      resolveUrl: page => urlResolver ? urlResolver(page) : undefined
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [page, count]);
@@ -5822,7 +5827,7 @@ const PaginationBase = _a => {
       })
     }))
   });
-};
+}
 const Pagination = bomCore.withSchema(PaginationBase, {
   Previous: PaginationPrevious,
   Next: PaginationNext,
@@ -9157,6 +9162,27 @@ const radioVariants = {
   default: CssRadioDefault
 };
 
+const tuple = function () {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return args;
+};
+const tupleNumber = function () {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  return args;
+};
+tuple('default', 'secondary', 'success', 'warning', 'error', 'abort', 'secondary-light', 'success-light', 'warning-light', 'error-light');
+tuple('default', 'secondary', 'success', 'warning', 'error');
+tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite');
+tuple('default', 'secondary', 'success', 'warning', 'error', 'dark', 'lite', 'alert', 'purple', 'violet', 'cyan');
+tuple('default', 'silent', 'prevent');
+tuple('hover', 'click');
+tuple('top', 'topStart', 'topEnd', 'left', 'leftStart', 'leftEnd', 'bottom', 'bottomStart', 'bottomEnd', 'right', 'rightStart', 'rightEnd');
+tuple('start', 'center', 'end', 'left', 'right');
+
 const RatingSvg = props => jsxRuntime.jsx("svg", {
   viewBox: "0 0 24 24",
   /*