@dnb/eufemia 9.24.0 → 9.26.1

package/es/components/pagination/Pagination.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 var _InfinityScroller;
 
-const _excluded = ["align", "children", "className", "class", "disabled", "skeleton", "tagName", "page_count", "current_page", "startup_page", "mode", "hide_progress_indicator", "use_load_button"],
+const _excluded = ["align", "children", "className", "class", "disabled", "skeleton", "tagName", "page_count", "current_page", "startup_page", "mode", "hide_progress_indicator", "use_load_button", "currentPage"],
       _excluded2 = ["children"],
       _excluded3 = ["children"];
 
@@ -139,7 +139,8 @@ class PaginationInstance extends React.PureComponent {
       startup_page: _startup_page,
       mode: _mode,
       hide_progress_indicator: _hide_progress_indicator,
-      use_load_button: _use_load_button
+      use_load_button: _use_load_button,
+      currentPage: _currentPage
     } = props,
           attributes = _objectWithoutProperties(props, _excluded);
 

package/es/components/pagination/PaginationBar.d.ts

@@ -1,42 +1,35 @@
-import * as React from 'react';
-export type PaginationBarChildren =
-  | React.ReactNode
-  | ((...args: any[]) => any);
-
 /**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ * Web Pagination Component
+ *
  */
-export interface PaginationBarProps extends React.HTMLProps<HTMLElement> {
-  /**
-   * The title used in every button shown in the bar. Defaults to `Side %s`.
-   */
-  button_title?: string;
-
-  /**
-   * The title used in the previous page button. Defaults to `Forrige side`.
-   */
-  prev_title?: string;
-
-  /**
-   * The title used in the next page button. Defaults to `Neste side`.
-   */
-  next_title?: string;
-
-  /**
-   * The title used in the dots. Relevant for screen-readers. Defaults to `%s flere sider`.
-   */
-  more_pages?: string;
-  contentRef?: Object;
-
-  /**
-   * The given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section.
-   */
-  children?: PaginationBarChildren;
-}
-export default class PaginationBar extends React.Component<
-  PaginationBarProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
+import React from 'react';
+interface PaginationBarProps {
+    /**
+     * The title used in every button shown in the bar. Defaults to Side %s.
+     */
+    button_title: string;
+    /**
+     *  The title used in the previous page button. Defaults to Forrige side.
+     */
+    prev_title: string;
+    /**
+     *  The title used in the next page button. Defaults to Neste side.
+     */
+    next_title: string;
+    /**
+     * The title used in the dots. Relevant for screen-readers. Defaults to %s flere sider.
+     */
+    more_pages: string;
+    /**
+     * Reference to the parent component. Used to contain height between updates.
+     */
+    contentRef: React.RefObject<any>;
+    /**
+     *  the given content can be either a function or a React node, depending on your needs. A function contains several helper functions. More details down below and have a look at the examples in the demos section.
+     */
+    children: React.ReactNode;
 }
+declare const PaginationBar: (innerProps: PaginationBarProps) => JSX.Element;
+export declare const useResizeObserver: (element: any) => string;
+export default PaginationBar;
+export type { PaginationBarProps };

package/es/components/pagination/PaginationBar.js

@@ -1,196 +1,241 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var _div, _div2, _div3;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext, useRef, useEffect, useState } from 'react';
 import { dispatchCustomElementEvent, extendPropsWithContext } from '../../shared/component-helper';
 import { calculatePagination, getDotsAriaLabel } from './PaginationCalculation';
 import PaginationContext from './PaginationContext';
+import Context from '../../shared/Context';
 import Button from '../button/Button';
-export default class PaginationBar extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "setPage", (currentPage, event = null) => {
-      this.keepPageHeight();
-      this.focusPage();
-      this.context.pagination.setState({
-        currentPage
-      });
-      this.context.pagination.updatePageContent(currentPage);
-      dispatchCustomElementEvent(this.context.pagination, 'on_change', _objectSpread(_objectSpread({
-        page: currentPage,
-        pageNo: currentPage,
-        pageNumber: currentPage
-      }, this.context.pagination), {}, {
-        event
-      }));
-    });
-
-    _defineProperty(this, "setPrevPage", () => {
-      this.setPage(this.context.pagination.currentPage - 1);
-    });
-
-    _defineProperty(this, "setNextPage", () => {
-      this.setPage(this.context.pagination.currentPage + 1);
-    });
-
-    _defineProperty(this, "clickHandler", ({
-      pageNumber,
-      event
-    }) => {
-      this.setPage(pageNumber, event);
-    });
-  }
-
-  componentDidMount() {
-    const context = this.context.pagination;
-    const currentPage = context.startupPage || context.currentPage || 1;
-    const items = context.prefillItems(currentPage, {
-      skipObserver: true
-    });
-    context.setState({
-      currentPage,
-      items
-    });
-    context.updatePageContent(currentPage);
-  }
-
-  focusPage() {
-    this.context.pagination.onPageUpdate(() => {
+import IconPrimary from '../icon-primary/IconPrimary';
+import styleProperties from '../../style/properties';
+const defaultProps = {
+  button_title: null,
+  prev_title: null,
+  next_title: null,
+  more_pages: null,
+  contentRef: null,
+  children: null
+};
+
+const PaginationBar = innerProps => {
+  const context = useContext(PaginationContext);
+  const {
+    currentPage,
+    pageCount,
+    disabled,
+    skeleton
+  } = context.pagination;
+
+  const focusPage = () => {
+    const {
+      onPageUpdate
+    } = context.pagination;
+    const {
+      contentRef
+    } = innerProps;
+    onPageUpdate(() => {
       try {
-        const elem = this.props.contentRef.current;
+        const elem = contentRef.current;
         elem.focus();
       } catch (e) {}
     });
-  }
+  };
 
-  keepPageHeight() {
+  const keepPageHeight = () => {
     try {
-      const elem = this.props.contentRef.current;
+      const elem = innerProps.contentRef.current;
       const pageHeight = elem.offsetHeight;
       elem.style.height = `${pageHeight / 16}rem`;
       elem.style.minHeight = elem.style.height;
     } catch (e) {}
 
-    this.context.pagination.onPageUpdate(() => {
+    const {
+      onPageUpdate
+    } = context.pagination;
+    onPageUpdate(() => {
       try {
-        const elem = this.props.contentRef.current;
+        const elem = innerProps.contentRef.current;
         elem.style.height = 'auto';
         elem.style.minHeight = elem.style.height;
       } catch (e) {}
     });
-  }
+  };
 
-  render() {
-    const props = extendPropsWithContext(this.props, PaginationBar.defaultProps, this.context.getTranslation(this.props).Pagination);
-    const {
-      button_title,
-      prev_title,
-      next_title,
-      more_pages
-    } = props;
+  const setPage = (currentPage, event = null) => {
+    keepPageHeight();
     const {
-      pageCount,
-      currentPage,
-      disabled,
-      skeleton
-    } = this.context.pagination;
-    const prevIsDisabled = currentPage === 1;
-    const nextIsDisabled = currentPage === pageCount || pageCount === 0;
-    const pages = calculatePagination(pageCount, currentPage);
-    return React.createElement("div", {
-      className: 'dnb-pagination__bar' + (pageCount >= 8 ? " dnb-pagination--many-pages" : "")
-    }, React.createElement(Button, {
-      key: "left-arrow",
-      className: "dnb-pagination__button",
-      disabled: disabled || prevIsDisabled,
-      skeleton: skeleton,
-      size: "small",
-      icon: "chevron_left",
-      on_click: this.setPrevPage,
-      title: prevIsDisabled ? null : prev_title
-    }), React.createElement("div", {
-      className: "dnb-pagination__bar__inner"
-    }, pages[0].map(pageNumber => React.createElement(Button, {
-      key: pageNumber,
-      className: "dnb-pagination__button",
-      size: "medium",
-      text: String(pageNumber),
-      "aria-label": button_title.replace('%s', pageNumber),
-      variant: pageNumber === currentPage ? 'primary' : 'secondary',
-      disabled: disabled,
-      skeleton: skeleton,
-      "aria-current": pageNumber === currentPage ? 'page' : null,
-      on_click: event => this.clickHandler({
-        pageNumber,
-        event
-      })
-    })), pages.slice(1).map((list, idx) => React.createElement(React.Fragment, {
-      key: idx
-    }, React.createElement("div", {
-      key: `dots-${idx}`,
-      className: "dnb-pagination__dots",
-      "aria-label": getDotsAriaLabel({
-        more_pages,
-        list,
-        pages
-      })
-    }, _div || (_div = React.createElement("div", {
-      key: "dot-1"
-    })), _div2 || (_div2 = React.createElement("div", {
-      key: "dot-2"
-    })), _div3 || (_div3 = React.createElement("div", {
-      key: "dot-3"
-    }))), list.map(pageNumber => React.createElement(Button, {
-      key: pageNumber,
-      className: "dnb-pagination__button",
-      size: "medium",
+      setState: setContextState,
+      updatePageContent
+    } = context.pagination;
+    setContextState({
+      currentPage
+    });
+    updatePageContent(currentPage);
+    dispatchCustomElementEvent(context.pagination, 'on_change', _objectSpread(_objectSpread({
+      page: currentPage,
+      pageNo: currentPage,
+      pageNumber: currentPage
+    }, context.pagination), {}, {
+      event
+    }));
+  };
+
+  const setPrevPage = () => {
+    setPage(context.pagination.currentPage - 1);
+  };
+
+  const setNextPage = () => {
+    setPage(context.pagination.currentPage + 1);
+  };
+
+  const clickHandler = ({
+    pageNumber,
+    event
+  }) => {
+    setPage(pageNumber, event);
+    focusPage();
+  };
+
+  const {
+    getTranslation
+  } = useContext(Context);
+  const {
+    button_title,
+    prev_title,
+    next_title,
+    more_pages
+  } = extendPropsWithContext(_objectSpread(_objectSpread({}, defaultProps), innerProps), defaultProps, getTranslation(innerProps).Pagination);
+  const prevIsDisabled = currentPage > -1 ? currentPage === 1 : true;
+  const nextIsDisabled = currentPage > -1 ? currentPage === pageCount || pageCount === 0 : true;
+  const paginationBarRef = useRef(null);
+  const currentScreenSize = useResizeObserver(paginationBarRef);
+  const pageNumberGroups = calculatePagination(pageCount, currentPage, currentScreenSize === 'small');
+  return React.createElement("div", {
+    ref: paginationBarRef,
+    className: 'dnb-pagination__bar' + (pageCount >= 8 ? " dnb-pagination--many-pages" : "")
+  }, React.createElement("div", {
+    className: "dnb-pagination__bar__wrapper"
+  }, React.createElement("div", {
+    className: "dnb-pagination__bar__skip"
+  }, React.createElement(Button, {
+    key: "left-arrow",
+    disabled: disabled || prevIsDisabled,
+    skeleton: skeleton,
+    variant: "tertiary",
+    icon: "chevron_left",
+    icon_position: "left",
+    text: prev_title,
+    on_click: setPrevPage,
+    title: prevIsDisabled ? null : prev_title
+  }), React.createElement(Button, {
+    key: "right-arrow",
+    disabled: disabled || nextIsDisabled,
+    skeleton: skeleton,
+    variant: "tertiary",
+    icon: "chevron_right",
+    icon_position: "right",
+    text: next_title,
+    on_click: setNextPage,
+    title: nextIsDisabled ? null : next_title
+  })), React.createElement("div", {
+    className: "dnb-pagination__bar__inner"
+  }, ((pageNumberGroups === null || pageNumberGroups === void 0 ? void 0 : pageNumberGroups[0]) || []).map(pageNumber => React.createElement(Button, {
+    key: pageNumber,
+    className: "dnb-pagination__button",
+    text: String(pageNumber),
+    "aria-label": button_title.replace('%s', pageNumber),
+    variant: pageNumber === currentPage ? 'primary' : 'secondary',
+    disabled: disabled,
+    skeleton: skeleton,
+    "aria-current": pageNumber === currentPage ? 'page' : null,
+    on_click: event => clickHandler({
+      pageNumber,
+      event
+    })
+  })), pageNumberGroups.slice(1).map((numbersList, idx) => React.createElement(React.Fragment, {
+    key: idx
+  }, React.createElement(IconPrimary, {
+    role: "separator",
+    "aria-orientation": "vertical",
+    "aria-hidden": false,
+    title: getDotsAriaLabel({
+      more_pages,
+      numbersList,
+      pageNumberGroups
+    }),
+    className: "dnb-pagination__dots",
+    icon: "more",
+    size: "medium"
+  }), numbersList.map(pageNumber => {
+    return React.createElement(Button, {
+      key: (pageNumber || 0) + idx,
+      className: 'dnb-pagination__button' + (String(pageNumber).length > 3 ? " dnb-pagination__button--large-number" : ""),
       text: String(pageNumber),
       "aria-label": button_title.replace('%s', pageNumber),
       variant: pageNumber === currentPage ? 'primary' : 'secondary',
       disabled: disabled,
       skeleton: skeleton,
       "aria-current": pageNumber === currentPage ? 'page' : null,
-      on_click: event => this.clickHandler({
+      on_click: event => clickHandler({
         pageNumber,
         event
       })
-    }))))), React.createElement(Button, {
-      key: "right-arrow",
-      className: "dnb-pagination__button",
-      disabled: disabled || nextIsDisabled,
-      skeleton: skeleton,
-      size: "small",
-      icon: "chevron_right",
-      on_click: this.setNextPage,
-      title: nextIsDisabled ? null : next_title
-    }));
-  }
+    });
+  }))))), React.createElement("span", {
+    className: "dnb-sr-only",
+    "aria-live": "assertive"
+  }, button_title.replace('%s', currentPage)));
+};
+
+export const useResizeObserver = element => {
+  const [currentSize, setSize] = useState('large');
+  const resizeObserver = useRef(null);
+  useEffect(() => {
+    try {
+      var _resizeObserver$curre;
+
+      const handleSizeChange = width => {
+        if (width <= getSizeInPx('small') && currentSize !== 'small') {
+          setSize('small');
+        } else if (width <= getSizeInPx('medium') && currentSize !== 'medium') {
+          setSize('medium');
+        } else if (width <= getSizeInPx('large') && currentSize !== 'large') {
+          setSize('large');
+        } else if (width <= getSizeInPx('x-large') && currentSize !== 'x-large') {
+          setSize('x-large');
+        } else if (width <= getSizeInPx('xx-large') && currentSize !== 'xx-large') {
+          setSize('xx-large');
+        }
+      };
+
+      resizeObserver.current = new ResizeObserver(entries => {
+        handleSizeChange(entries[0].contentRect.width);
+      });
+      (_resizeObserver$curre = resizeObserver.current) === null || _resizeObserver$curre === void 0 ? void 0 : _resizeObserver$curre.observe(element.current);
+      handleSizeChange(element.current.clientWidth);
+    } catch (e) {}
 
-}
+    return () => {
+      var _resizeObserver$curre2;
 
-_defineProperty(PaginationBar, "contextType", PaginationContext);
+      (_resizeObserver$curre2 = resizeObserver.current) === null || _resizeObserver$curre2 === void 0 ? void 0 : _resizeObserver$curre2.disconnect();
+    };
+  }, [element]);
+  return currentSize;
+};
 
-_defineProperty(PaginationBar, "defaultProps", {
-  button_title: null,
-  prev_title: null,
-  next_title: null,
-  more_pages: null,
-  contentRef: null,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? PaginationBar.propTypes = {
-  button_title: PropTypes.string,
-  prev_title: PropTypes.string,
-  next_title: PropTypes.string,
-  more_pages: PropTypes.string,
-  contentRef: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
-} : void 0;
+const getSizeInPx = size => {
+  const styleSize = styleProperties[`--layout-${size}`];
+
+  if (styleSize.includes('em')) {
+    return parseFloat(styleSize.replace(/(rem|em)$/, '')) * 16;
+  }
+
+  return parseFloat(styleSize.replace(/(px)$/, ''));
+};
+
+export default PaginationBar;

package/es/components/pagination/PaginationCalculation.d.ts

@@ -1,6 +1,10 @@
-export function calculatePagination(page_count: any, current_page: any): any[][];
-export function getDotsAriaLabel({ more_pages, list, pages }: {
-    more_pages: any;
-    list: any;
-    pages: any;
-}): any;
+/**
+ * Pagination Calculate
+ *
+ */
+export declare const calculatePagination: (pageCount: number, currentPage: number, isSmallScreen?: boolean) => Array<Array<number>>;
+export declare const getDotsAriaLabel: ({ more_pages, numbersList: nList, pageNumberGroups: pGroups, }: {
+    more_pages: string;
+    numbersList: Array<number>;
+    pageNumberGroups: Array<Array<number>>;
+}) => string;

package/es/components/pagination/PaginationCalculation.js

@@ -1,45 +1,71 @@
-export const calculatePagination = (page_count, current_page) => {
-  if (page_count === 1) return [[1]];
-  const start = Math.max.apply(Math, [1, current_page + 2 > page_count ? current_page - 4 + (Math.min.apply(Math, [page_count, current_page - 2 < 1 ? current_page + 4 - (current_page - 1) : current_page + 2]) - current_page) : current_page - 2]);
-  const end = Math.min.apply(Math, [page_count, current_page - 2 < 1 ? current_page + 4 - (current_page - start) : current_page + 2]);
-  let middle = [];
-
-  for (let i = start; i <= end; i++) {
-    middle.push(i);
+export const calculatePagination = (pageCount, currentPage, isSmallScreen) => {
+  if (pageCount === 1) return [[1]];
+  const MIDDLE_WIDTH = isSmallScreen ? 1 : 3;
+  const EDGE_WIDTH = isSmallScreen ? 4 : 9;
+  const FIRST_BUTTON = 1;
+  const LAST_BUTTON = pageCount;
+  const currentAtStart = currentPage - EDGE_WIDTH + 1 < FIRST_BUTTON;
+  const currentAtEnd = currentPage + EDGE_WIDTH > LAST_BUTTON;
+  let middleStart;
+  let middleEnd;
+
+  if (currentAtStart) {
+    middleStart = 2;
+    middleEnd = EDGE_WIDTH;
+  } else if (currentAtEnd) {
+    middleStart = LAST_BUTTON + 1 - EDGE_WIDTH;
+    middleEnd = LAST_BUTTON - 1;
+  } else {
+    middleStart = isSmallScreen ? currentPage : currentPage - MIDDLE_WIDTH;
+    middleEnd = currentPage + MIDDLE_WIDTH;
+  }
+
+  if (middleEnd > LAST_BUTTON - 1) middleEnd = LAST_BUTTON - 1;
+  if (middleStart < FIRST_BUTTON + 1) middleStart = FIRST_BUTTON + 1;
+  const middleArray = [];
+
+  if (middleStart === 2) {
+    middleArray.push(FIRST_BUTTON);
+  }
+
+  for (let i = middleStart; i <= middleEnd; i++) {
+    middleArray.push(i);
+  }
+
+  if (middleEnd === LAST_BUTTON - 1) {
+    middleArray.push(LAST_BUTTON);
   }
 
   const pages = [];
 
-  if (start > 2) {
-    pages.push([1]);
-  } else if (start === 2) {
-    middle = [1].concat(middle);
+  if (middleStart !== 2) {
+    pages.push([FIRST_BUTTON]);
   }
 
-  pages.push(middle);
+  if (typeof LAST_BUTTON !== 'undefined') {
+    pages.push(middleArray);
 
-  if (end <= page_count - 2) {
-    pages.push([page_count]);
-  } else if (end === page_count - 1) {
-    middle.push(page_count);
+    if (middleEnd !== LAST_BUTTON - 1) {
+      pages.push([LAST_BUTTON]);
+    }
   }
 
   return pages;
 };
 export const getDotsAriaLabel = ({
   more_pages,
-  list,
-  pages
+  numbersList: nList,
+  pageNumberGroups: pGroups
 }) => {
   let count = 0;
 
   try {
-    if (list.length === 1) {
-      count = list[0] - (pages.length === 2 ? pages[0][pages[0].length - 1] : pages[1][pages[1].length - 1]);
-    } else if (list.length > 1) {
-      count = list[0] - pages[0] - 1;
+    if (nList.length === 1) {
+      count = nList[0] - (pGroups.length === 2 ? pGroups[0][pGroups[0].length - 1] : pGroups[1][pGroups[1].length - 1]);
+    } else if (nList.length > 1) {
+      count = nList[0] - pGroups[0][0] - 1;
     }
   } catch (e) {}
 
-  return count > 0 ? more_pages.replace('%s', count) : null;
+  return count > 0 ? more_pages.replace('%s', count.toString()) : null;
 };