@dnb/eufemia 9.23.1 → 9.26.0

package/es/components/number-format/NumberFormat.d.ts

@@ -8,6 +8,7 @@ export type NumberFormatSuffix =
   | ((...args: any[]) => any);
 export type NumberFormatCurrency = string | boolean;
 export type NumberFormatCurrencyPosition = 'auto' | 'before' | 'after';
+export type NumberFormatCompact = 'short' | 'long' | boolean;
 export type NumberFormatBan = string | boolean;
 export type NumberFormatNin = string | boolean;
 export type NumberFormatPhone = string | boolean;
@@ -102,6 +103,11 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
    */
   currency_position?: NumberFormatCurrencyPosition;
 
+  /**
+   * Shortens any number or currency including an abbreviation (no IE11 support). You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either `short` or `long`. Defaults to `short` if `true` is given.
+   */
+  compact?: NumberFormatCompact;
+
   /**
    * "Bank Account Number": use `true` to use the default Norwegian style (2000 12 34567) formatting.
    */
@@ -133,7 +139,7 @@ export interface NumberFormatProps extends React.HTMLProps<HTMLElement> {
   link?: NumberFormatLink;
 
   /**
-   * Accepts all <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString">number.toLocaleString</a> options as an object - can also be a JSON given as the parameter e.g. `options=&#39;{"minimumFractionDigits":"2"}&#39;`.
+   * Accepts all <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString">number.toLocaleString</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat">Intl.NumberFormat</a> options as an object - can also be a JSON given as the parameter e.g. `options={{ &#39;minimumFractionDigits&#39;: 2 }}`.
    */
   options?: NumberFormatOptions;
 

package/es/components/number-format/NumberFormat.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["id", "value", "prefix", "suffix", "children", "currency", "currency_display", "currency_position", "ban", "nin", "phone", "org", "percent", "link", "tooltip", "skeleton", "options", "locale", "decimals", "omit_rounding", "clean", "selectall", "copy_selection", "clean_copy_value", "element", "class", "className"];
+const _excluded = ["id", "value", "prefix", "suffix", "children", "currency", "currency_display", "currency_position", "compact", "ban", "nin", "phone", "org", "percent", "link", "tooltip", "skeleton", "options", "locale", "decimals", "omit_rounding", "clean", "selectall", "copy_selection", "clean_copy_value", "element", "class", "className"];
 
 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; }
 
@@ -129,6 +129,7 @@ export default class NumberFormat extends React.PureComponent {
       currency,
       currency_display,
       currency_position,
+      compact,
       ban,
       nin,
       phone,
@@ -165,6 +166,7 @@ export default class NumberFormat extends React.PureComponent {
       currency_display,
       currency_position,
       omit_currency_sign: this.state.omitCurrencySign,
+      compact,
       ban,
       nin,
       phone,
@@ -280,6 +282,7 @@ _defineProperty(NumberFormat, "defaultProps", {
   currency: null,
   currency_display: null,
   currency_position: null,
+  compact: null,
   ban: null,
   nin: null,
   phone: null,
@@ -311,6 +314,7 @@ process.env.NODE_ENV !== "production" ? NumberFormat.propTypes = _objectSpread(_
   currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   currency_display: PropTypes.string,
   currency_position: PropTypes.oneOf(['auto', 'before', 'after']),
+  compact: PropTypes.oneOfType([PropTypes.oneOf(['short', 'long']), PropTypes.bool]),
   ban: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   nin: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   phone: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

package/es/components/number-format/NumberUtils.d.ts

@@ -34,6 +34,9 @@ export interface formatOptionParams {
   /** Should the number be cleaned */
   clean?: boolean;
 
+  /** shortens any number or currency including an abbreviation. You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either a boolean, or a string with "short" or "long" */
+  compact?: boolean | 'short' | 'long';
+
   /** How many decimals */
   decimals?: number;
 
@@ -53,13 +56,19 @@ export interface formatOptionParams {
   /** Currency code (ISO 4217) or `true` to use the default, `NOK`. */
   currency?: string | boolean;
 
-  /** Intl.NumberFormat currency option – you can use false or empty string to hide the sign/name */
-  currency_display?: string | boolean;
+  /** Intl.NumberFormat currency option – you can use false or empty string to hide the sign/name. Defaults to narrowSymbol when the locale is no else we default to code. */
+  currency_display?:
+    | boolean
+    | ''
+    | 'code'
+    | 'name'
+    | 'symbol'
+    | 'narrowSymbol';
   /** currency option */
   currency_position?: formatCurrencyPosition;
   /** hides the currency sign */
   omit_currency_sign?: boolean;
-  /** will remove all extra signs,like a currency sign or percent sign for the cleanedValue return when returnAria is true */
+  /** will remove all extra signs, like a currency sign or percent sign for the cleanedValue return when returnAria is true */
   clean_copy_value?: boolean;
 
   /** Intl.NumberFormat options (NumberFormatOptions) */

package/es/components/number-format/NumberUtils.js

@@ -13,6 +13,7 @@ const NUMBER_CHARS = '\\-0-9,.';
 export const format = (value, {
   locale = null,
   clean = false,
+  compact = null,
   phone = null,
   org = null,
   ban = null,
@@ -50,7 +51,7 @@ export const format = (value, {
 
   if (parseFloat(decimals) >= 0) {
     value = formatDecimals(value, decimals, omit_rounding, opts);
-  } else {
+  } else if (typeof opts.maximumFractionDigits === 'undefined') {
     opts.maximumFractionDigits = 20;
   }
 
@@ -105,6 +106,13 @@ export const format = (value, {
   } else if (isTrue(currency) || typeof currency === 'string') {
     type = 'currency';
     opts.currency = opts.currency || (isTrue(currency) ? CURRENCY : currency);
+    handleCompactBeforeDisplay({
+      value,
+      locale,
+      compact,
+      decimals,
+      opts
+    });
 
     if (decimals === null) {
       decimals = 2;
@@ -118,7 +126,7 @@ export const format = (value, {
     }
 
     opts.style = 'currency';
-    opts.currencyDisplay = getFallbackCurrencyDisplay(locale, opts.currency_display || currency_display);
+    opts.currencyDisplay = getFallbackCurrencyDisplay(locale, opts.currencyDisplay || currency_display);
 
     if (typeof opts.minimumFractionDigits === 'undefined' && String(value).indexOf('.') === -1 && cleanedNumber % 1 === 0) {
       opts.minimumFractionDigits = 0;
@@ -166,6 +174,11 @@ export const format = (value, {
       }
     }
 
+    handleCompactBeforeAria({
+      value,
+      compact,
+      opts
+    });
     aria = formatNumber(cleanedNumber, locale, _objectSpread(_objectSpread({
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
@@ -181,12 +194,21 @@ export const format = (value, {
       aria = prepareMinus(aria, locale);
     }
   } else {
+    handleCompactBeforeDisplay({
+      value,
+      locale,
+      compact,
+      decimals,
+      opts
+    });
     display = formatNumber(value, locale, opts);
     display = prepareMinus(display, locale);
-    aria = formatNumber(value, locale, _objectSpread(_objectSpread({}, opts), {}, {
-      minimumFractionDigits: 1,
-      maximumFractionDigits: 20
-    }));
+    handleCompactBeforeAria({
+      value,
+      compact,
+      opts
+    });
+    aria = formatNumber(value, locale, opts);
     aria = enhanceSR(value, aria, locale);
   }
 
@@ -213,7 +235,7 @@ export const format = (value, {
       });
     } else {
       const thousandsSeparator = getThousandsSeparator(locale);
-      cleanedValue = display.replace(new RegExp(`${thousandsSeparator}(?=\\d{3})`, 'g'), '');
+      cleanedValue = String(display).replace(new RegExp(`${thousandsSeparator}(?=\\d{3})`, 'g'), '');
     }
 
     return {
@@ -732,4 +754,76 @@ function formatToParts({
   return [{
     value: number
   }];
+}
+
+function handleCompactBeforeDisplay({
+  value,
+  locale,
+  compact,
+  decimals = 0,
+  opts
+} = {}) {
+  if (!canHandleCompact({
+    value,
+    compact
+  })) {
+    return;
+  }
+
+  value = parseInt(Math.abs(value));
+  opts.notation = 'compact';
+
+  if (isTrue(compact) && locale && /(no|nb|nn)$/i.test(locale)) {
+    opts.compactDisplay = Math.abs(value) < 1000000 ? 'long' : 'short';
+  } else {
+    opts.compactDisplay = !isTrue(compact) ? compact : 'short';
+  }
+
+  if (typeof opts.maximumSignificantDigits === 'undefined') {
+    if (isNaN(parseFloat(decimals))) {
+      decimals = 0;
+    } else {
+      decimals = parseFloat(decimals);
+    }
+
+    const ref = String(value).length % 3;
+
+    if (ref === 2) {
+      decimals += 1;
+    } else if (ref === 0) {
+      decimals += 2;
+    }
+
+    opts.maximumSignificantDigits = decimals + 1;
+  }
+}
+
+function handleCompactBeforeAria({
+  value,
+  compact,
+  opts
+}) {
+  if (!canHandleCompact({
+    value,
+    compact
+  })) {
+    return;
+  }
+
+  opts.compactDisplay = 'long';
+}
+
+function canHandleCompact({
+  value,
+  compact
+}) {
+  if (IS_IE11) {
+    return false;
+  }
+
+  if (compact && Math.abs(value) >= 1000) {
+    return true;
+  }
+
+  return false;
 }

package/es/components/number-format/style/dnb-number-format.css

@@ -141,6 +141,11 @@
   html[data-visual-test] .dnb-tooltip--hide {
     -webkit-animation: hide-tooltip 1ms ease-out 1s forwards;
             animation: hide-tooltip 1ms ease-out 1s forwards; }
+  .dnb-tooltip__portal {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0; }
   .dnb-tooltip__content {
     min-width: 2rem;
     min-height: 1.5rem;

package/es/components/number-format/style/dnb-number-format.min.css

@@ -1 +1 @@
-.dnb-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tooltip *,.dnb-tooltip :after,.dnb-tooltip :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tooltip :after,.dnb-tooltip :before{text-decoration:inherit;vertical-align:inherit}.dnb-tooltip{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--animate_position{-webkit-transition:all .3s ease-in-out,opacity .2s ease-out;transition:all .3s ease-in-out,opacity .2s ease-out}.dnb-tooltip--active{-webkit-animation:show-tooltip .2s ease-out forwards;animation:show-tooltip .2s ease-out forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{-webkit-animation:show-tooltip 1ms ease-out forwards;animation:show-tooltip 1ms ease-out forwards}.dnb-tooltip--hide{-webkit-animation:hide-tooltip .2s ease-in-out forwards;animation:hide-tooltip .2s ease-in-out forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{-webkit-animation:hide-tooltip 1ms ease-out forwards;animation:hide-tooltip 1ms ease-out forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{-webkit-animation:hide-tooltip 1ms ease-out 1s forwards;animation:hide-tooltip 1ms ease-out 1s forwards}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;-webkit-transform:translateY(70%) rotate(45deg);transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{-ms-flex-item-align:start;align-self:flex-start}.dnb-tooltip__arrow__arrow--right{-ms-flex-item-align:end;align-self:flex-end}@-webkit-keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}.dnb-number-format{speak-as:numbers;color:inherit;display:inline-block;position:relative;white-space:nowrap}.dnb-number-format__prefix,.dnb-number-format__suffix{white-space:normal}.dnb-number-format.dnb-anchor{cursor:pointer}.dnb-number-format--selectall{cursor:text}.dnb-number-format__visible{position:relative;z-index:2}.dnb-number-format--selected .dnb-number-format__visible{background-color:#a5e1d2;background-color:var(--color-mint-green);color:#000;color:var(--color-black)}.dnb-number-format__selection{left:0;opacity:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.dnb-number-format--selected .dnb-number-format__selection{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;z-index:3}.dnb-number-format.dnb-skeleton,.dnb-skeleton .dnb-number-format{-webkit-text-fill-color:#ebebeb;-webkit-text-fill-color:var(--skeleton-color)}
+.dnb-tooltip{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;color:#333;color:var(--color-black-80,#333);font-family:DNB,sans-serif;font-family:var(--font-family-default);font-size:1rem;font-size:var(--font-size-small);font-style:normal;font-weight:400;font-weight:var(--font-weight-basis);line-height:1.5rem;line-height:var(--line-height-basis);margin:0;padding:0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;word-break:break-word}.dnb-tooltip *,.dnb-tooltip :after,.dnb-tooltip :before{background-repeat:no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}.dnb-tooltip :after,.dnb-tooltip :before{text-decoration:inherit;vertical-align:inherit}.dnb-tooltip{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;opacity:0;padding:0 1rem;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;visibility:hidden;z-index:3100}.dnb-tooltip--large{padding:.25rem 1rem}.dnb-tooltip--animate_position{-webkit-transition:all .3s ease-in-out,opacity .2s ease-out;transition:all .3s ease-in-out,opacity .2s ease-out}.dnb-tooltip--active{-webkit-animation:show-tooltip .2s ease-out forwards;animation:show-tooltip .2s ease-out forwards;visibility:visible}.dnb-tooltip--active.dnb-tooltip--no-animation,html[data-visual-test] .dnb-tooltip--active{-webkit-animation:show-tooltip 1ms ease-out forwards;animation:show-tooltip 1ms ease-out forwards}.dnb-tooltip--hide{-webkit-animation:hide-tooltip .2s ease-in-out forwards;animation:hide-tooltip .2s ease-in-out forwards;visibility:visible}.dnb-tooltip--hide.dnb-tooltip--no-animation{-webkit-animation:hide-tooltip 1ms ease-out forwards;animation:hide-tooltip 1ms ease-out forwards}.dnb-tooltip--fixed{position:fixed}html[data-visual-test] .dnb-tooltip--hide{-webkit-animation:hide-tooltip 1ms ease-out 1s forwards;animation:hide-tooltip 1ms ease-out 1s forwards}.dnb-tooltip__portal{left:0;position:absolute;right:0;top:0}.dnb-tooltip__content{min-height:1.5rem;min-width:2rem;padding:0}.dnb-tooltip__arrow{height:.5rem;margin:0;overflow:hidden;pointer-events:none;position:absolute;width:1rem}.dnb-tooltip__arrow:before{bottom:0;content:"";height:1rem;left:0;position:absolute;-webkit-transform:translateY(70%) rotate(45deg);transform:translateY(70%) rotate(45deg);width:1rem}.dnb-tooltip__arrow__position--bottom{top:-.5rem}.dnb-tooltip__arrow__position--top{bottom:-.5rem;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.dnb-tooltip__arrow__position--left{margin-right:3px;right:-.75rem;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.dnb-tooltip__arrow__position--right{left:-.75rem;margin-left:3px;-webkit-transform:rotate(270deg);transform:rotate(270deg)}.dnb-tooltip__arrow__arrow--left{-ms-flex-item-align:start;align-self:flex-start}.dnb-tooltip__arrow__arrow--right{-ms-flex-item-align:end;align-self:flex-end}@-webkit-keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@keyframes show-tooltip{0%{opacity:0}to{opacity:1}}@-webkit-keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes hide-tooltip{0%{opacity:1}to{opacity:0;visibility:hidden}}.dnb-number-format{speak-as:numbers;color:inherit;display:inline-block;position:relative;white-space:nowrap}.dnb-number-format__prefix,.dnb-number-format__suffix{white-space:normal}.dnb-number-format.dnb-anchor{cursor:pointer}.dnb-number-format--selectall{cursor:text}.dnb-number-format__visible{position:relative;z-index:2}.dnb-number-format--selected .dnb-number-format__visible{background-color:#a5e1d2;background-color:var(--color-mint-green);color:#000;color:var(--color-black)}.dnb-number-format__selection{left:0;opacity:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}.dnb-number-format--selected .dnb-number-format__selection{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all;z-index:3}.dnb-number-format.dnb-skeleton,.dnb-skeleton .dnb-number-format{-webkit-text-fill-color:#ebebeb;-webkit-text-fill-color:var(--skeleton-color)}

package/es/components/number-format/useNumberFormat.d.ts

@@ -0,0 +1,3 @@
+import type { formatOptionParams, formatValue } from './NumberUtils';
+declare function useNumberFormat(value: formatValue, options?: formatOptionParams): import("./NumberUtils").formatReturnType;
+export default useNumberFormat;

package/es/components/number-format/useNumberFormat.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { format } from './NumberUtils';
+import Context from '../../shared/Context';
+import usePropsWithContext from '../../shared/hooks/usePropsWithContext';
+
+function useNumberFormat(value, options = {}) {
+  const context = useContext(Context);
+  const params = usePropsWithContext(options, {
+    locale: context.locale
+  }, context.NumberFormat);
+  return format(value, params);
+}
+
+export default useNumberFormat;

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 };