@dnb/eufemia 9.26.0 → 9.28.0

package/cjs/shared/Context.d.ts

@@ -1,46 +1,98 @@
-export function prepareContext(props?: {}): {
-    translation: any;
-    updateTranslation: (locale: any, translation: any) => void;
-    getTranslation: (props: any) => any;
-    locale: any;
-    locales: any;
-    skeleton: any;
-    Button: {};
-    Avatar: {};
-    AvatarGroup: {};
-    Breadcrumb: {};
-    BreadcrumbItem: {};
-    InfoCard: {};
-    Tag: {};
-    TagGroup: {};
-    Timeline: {};
-    TimelineItem: {};
-    VisuallyHidden: {};
-    Drawer: {};
-    Dialog: {};
-    NumberFormat: {};
+/**
+ * Web Context Context
+ *
+ */
+import React from 'react';
+import type { ButtonProps } from '../components/button/Button';
+import type { AvatarProps } from '../components/avatar/Avatar';
+import type { AvatarGroupProps } from '../components/avatar/AvatarGroup';
+import type { BadgeProps } from '../components/badge/Badge';
+import type { BreadcrumbProps } from '../components/breadcrumb/Breadcrumb';
+import type { BreadcrumbItemProps } from '../components/breadcrumb/BreadcrumbItem';
+import type { InfoCardProps } from '../components/info-card/InfoCard';
+import type { SliderProps } from '../components/slider/Slider';
+import type { TagProps } from '../components/tag/Tag';
+import type { TagGroupProps } from '../components/tag/TagGroup';
+import type { TimelineProps } from '../components/timeline/Timeline';
+import type { TimelineItemProps } from '../components/timeline/TimelineItem';
+import type { VisuallyHiddenProps } from '../components/visually-hidden/VisuallyHidden';
+import type { DrawerProps } from '../components/drawer/types';
+import type { DialogProps } from '../components/dialog/types';
+export declare type ContextProps = {
+    Button?: Partial<ButtonProps>;
+    Avatar?: Partial<AvatarProps>;
+    AvatarGroup?: Partial<AvatarGroupProps>;
+    Badge?: Partial<BadgeProps>;
+    Breadcrumb?: Partial<BreadcrumbProps>;
+    BreadcrumbItem?: Partial<BreadcrumbItemProps>;
+    InfoCard?: Partial<InfoCardProps>;
+    Slider?: Partial<SliderProps>;
+    Tag?: Partial<TagProps>;
+    TagGroup?: Partial<TagGroupProps>;
+    Timeline?: Partial<TimelineProps>;
+    TimelineItem?: Partial<TimelineItemProps>;
+    VisuallyHidden?: Partial<VisuallyHiddenProps>;
+    Drawer?: Partial<DrawerProps>;
+    Dialog?: Partial<DialogProps>;
+    NumberFormat?: Record<string, unknown>;
+    Table?: Record<string, unknown>;
+    HelpButton?: Record<string, unknown>;
+    Pagination?: Record<string, unknown>;
+    FormRow?: Record<string, unknown>;
+    /**
+     * Will enable all skeletons inside this provider/context scope
+     */
+    skeleton?: boolean | string;
+    /**
+     * Define what breakpoints should be used by the MediaQuery component and hook
+     */
+    breakpoints?: Record<string, string>;
+    /**
+     * Defines the locale (internal translation) used by some components
+     */
+    locale?: Locale;
+    /**
+     * Provide your own translations. Use the same format as defined in the translation files
+     */
+    translation?: Translation;
+    /**
+     * Defines the currency used by the NumberFormat component
+     */
+    currency?: string;
+    /**
+     * Defines the currencyDisplay used by the NumberFormat component
+     */
+    currency_display?: string;
+    /**
+     * Update any given provider/context properties
+     */
+    update?: (props: ContextProps) => void;
+    /**
+     * Update any given provider/context properties, but only for the particular scope
+     */
+    updateCurrent?: (props: ContextProps) => void;
+    /**
+     * Update the used locale from within the context
+     */
+    setLocale?: (locale: Locale) => void;
+    /**
+     * Update the used locale from within the context, but only for the particular scope
+     */
+    setCurrentLocale?: (locale: Locale) => void;
+    locales?: Locales;
+    __newContext?: Record<string, string>;
+    updateTranslation?: (locale: Locale, translation: Translation) => void;
+    getTranslation?: (props?: GetTranslationProps) => Translation;
 };
+export declare type GetTranslationProps = {
+    lang?: Locale;
+    locale?: Locale;
+} & Record<string, unknown>;
+export declare type Locale = string | 'nb-NO' | 'en-GB' | 'en-US';
+export declare type ComponentTranslationsName = string;
+export declare type ComponentTranslations = Record<string, string>;
+export declare type Locales = Record<Locale, Translation>;
+export declare type Translation = Record<ComponentTranslationsName, ComponentTranslations>;
+export declare const prepareContext: (props?: ContextProps) => ContextProps;
+declare const Context: React.Context<ContextProps>;
 export default Context;
-declare const Context: React.Context<{
-    translation: any;
-    updateTranslation: (locale: any, translation: any) => void;
-    getTranslation: (props: any) => any;
-    locale: any;
-    locales: any;
-    skeleton: any;
-    Button: {};
-    Avatar: {};
-    AvatarGroup: {};
-    Breadcrumb: {};
-    BreadcrumbItem: {};
-    InfoCard: {};
-    Tag: {};
-    TagGroup: {};
-    Timeline: {};
-    TimelineItem: {};
-    VisuallyHidden: {};
-    Drawer: {};
-    Dialog: {};
-    NumberFormat: {};
-}>;
-import React from "react";

package/cjs/shared/Context.js

@@ -79,23 +79,10 @@ var prepareContext = function prepareContext() {
 
       return context.translation;
     },
-    locale: null,
     locales: locales,
-    skeleton: null,
-    Button: {},
-    Avatar: {},
-    AvatarGroup: {},
-    Breadcrumb: {},
-    BreadcrumbItem: {},
-    InfoCard: {},
-    Tag: {},
-    TagGroup: {},
-    Timeline: {},
-    TimelineItem: {},
-    VisuallyHidden: {},
-    Drawer: {},
-    Dialog: {},
-    NumberFormat: {}
+    locale: null,
+    breakpoints: null,
+    skeleton: null
   }, props), {}, {
     translation: translation
   });

package/cjs/shared/Eufemia.js

@@ -21,7 +21,7 @@ function init() {
       _createClass(Eufemia, [{
         key: "version",
         get: function get() {
-          return '9.26.0';
+          return '9.28.0';
         }
       }]);
 

package/cjs/shared/MediaQuery.d.ts

@@ -1,38 +1,19 @@
-import * as React from 'react';
-export type MediaQueryMatchOnSsr = string | boolean;
-export type MediaQueryWhen = string | any[] | Object;
-export type MediaQueryNot = string | boolean;
-export type MediaQueryQuery = string | Object;
-
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-export interface MediaQueryProps extends React.HTMLProps<HTMLElement> {
-  /**
-   * If set to true, it will match and return the given children during SSR.
-   */
-  matchOnSSR?: MediaQueryMatchOnSsr;
-
-  /**
-   * Define a list of sizes to match, given as an object `{ min: &#39;small&#39;, max: &#39;medium&#39; }` or as an array `[{ min: &#39;small&#39;, max: &#39;medium&#39; }, { min: &#39;medium&#39;, max: &#39;large&#39; }]`.
-   */
-  when?: MediaQueryWhen;
-
-  /**
-   * Reverts the defined queries as a whole.
-   */
-  not?: MediaQueryNot;
-
-  /**
-   * A MediaQuery as a string similar to the CSS API, but without `@media`.
-   */
-  query?: MediaQueryQuery;
-  children?: React.ReactNode;
-}
-export default class MediaQuery extends React.Component<
-  MediaQueryProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
+import React from 'react';
+import { onMediaQueryChange } from './MediaQueryUtils';
+import type { MediaQueryProps, MediaQueryState, MediaQueryListener } from './MediaQueryUtils';
+export type { MediaQueryProps };
+export { onMediaQueryChange };
+export default class MediaQuery extends React.PureComponent<MediaQueryProps, MediaQueryState> {
+    static contextType: React.Context<import("./Context").ContextProps>;
+    listener: MediaQueryListener;
+    state: {
+        match: any;
+        mediaQueryList: any;
+    };
+    constructor(props: any, context: any);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(props: any): void;
+    bindListener: () => void;
+    render(): React.ReactNode;
 }

package/cjs/shared/MediaQuery.js

@@ -37,8 +37,6 @@ require("core-js/modules/es.string.match.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _componentHelper = require("./component-helper");
 
 var _Context = _interopRequireDefault(require("./Context"));
@@ -81,6 +79,8 @@ var MediaQuery = function (_React$PureComponent) {
 
     _this = _super.call(this, props);
 
+    _defineProperty(_assertThisInitialized(_this), "listener", void 0);
+
     _defineProperty(_assertThisInitialized(_this), "state", {
       match: null,
       mediaQueryList: null
@@ -154,20 +154,4 @@ var MediaQuery = function (_React$PureComponent) {
 
 exports.default = MediaQuery;
 
-_defineProperty(MediaQuery, "contextType", _Context.default);
-
-_defineProperty(MediaQuery, "defaultProps", {
-  matchOnSSR: null,
-  when: null,
-  not: null,
-  query: null,
-  children: null
-});
-
-process.env.NODE_ENV !== "production" ? MediaQuery.propTypes = {
-  matchOnSSR: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  when: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array, _propTypes.default.object]),
-  not: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
-  query: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
-  children: _propTypes.default.node
-} : void 0;
+_defineProperty(MediaQuery, "contextType", _Context.default);

package/cjs/shared/MediaQueryUtils.d.ts

@@ -1,3 +1,52 @@
+/// <reference types="react" />
+export declare type MediaQuerySizes = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+export declare type MediaQueryBreakpoints = Partial<Record<MediaQuerySizes, string>>;
+export declare const defaultBreakpoints: MediaQueryBreakpoints;
+export declare type MediaQueryCondition = {
+    min?: number | string | MediaQuerySizes;
+    max?: number | string | MediaQuerySizes;
+    screen?: boolean;
+    minWidth?: number | string | MediaQuerySizes;
+    maxWidth?: number | string | MediaQuerySizes;
+    orientation?: string;
+    handheld?: boolean;
+    not?: boolean;
+    all?: boolean;
+    monochrome?: boolean;
+    aspectRatio?: string;
+} | string;
+export declare type MediaQueryProperties = {
+    /**
+     * A MediaQuery as a string similar to the CSS API, but without `@media`.
+     */
+    query?: MediaQueryCondition;
+    /**
+     * Define a list of sizes to match, given as an object `{ min: 'small', max: 'medium' }` or as an array `[{ min: 'small', max: 'medium' }, { min: 'medium', max: 'large' }]`.
+     */
+    when?: MediaQueryCondition | Array<MediaQueryCondition>;
+    /**
+     * Reverts the defined queries as a whole.
+     */
+    not?: boolean;
+    /**
+     * For debugging
+     */
+    log?: boolean;
+} & MediaQueryCondition;
+export declare type MediaQueryListener = () => void;
+export declare type MediaQueryProps = {
+    /**
+     * If set to true, it will match and return the given children during SSR.
+     */
+    matchOnSSR?: boolean;
+    children?: React.ReactNode;
+} & MediaQueryProperties;
+export declare type MediaQueryState = {
+    match?: boolean | null;
+    mediaQueryList?: {
+        matches: boolean;
+    };
+};
 /**
  * Adds a listener to a given MediaQuery
  *
@@ -8,9 +57,15 @@
  * @param {function} callback function that gets emitted when the given media query
  * @returns function to remove listeners when called
  */
-export function onMediaQueryChange(property: any, callback: Function, { runOnInit }?: {
+export declare function onMediaQueryChange(property: MediaQueryProperties | string, callback?: (matches: boolean, mediaQueryList: MediaQueryList) => void, { runOnInit }?: {
     runOnInit?: boolean;
-}): () => any;
+}): MediaQueryListener;
+/**
+ * Returns a boolean for whether window.matchMedia is supported or not
+ *
+ * @returns boolean
+ */
+export declare const isMatchMediaSupported: () => boolean;
 /**
  * Convert user defined media queries to an valid MediaQueryList we can assign a listener to
  *
@@ -21,12 +76,7 @@ export function onMediaQueryChange(property: any, callback: Function, { runOnIni
  * @property {boolean} log - print used query to console
  * @returns MediaQueryList type
  */
-export function makeMediaQueryList({ query, when, not, log }?: {
-    query: any;
-    when: any;
-    not?: any;
-    log?: boolean;
-}, breakpoints?: any): MediaQueryList;
+export declare function makeMediaQueryList({ query, when, not, log }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
 /**
  * Adds a listener to the window.matchMedia Browser API
  *
@@ -34,7 +84,7 @@ export function makeMediaQueryList({ query, when, not, log }?: {
  * @param {function} callback callback function
  * @returns function to remove listeners when called
  */
-export function createMediaQueryListener(mediaQueryList: MatchMediaList, callback: Function): () => any;
+export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: any) => void): MediaQueryListener;
 /**
  * Builds a valid media query we can use on window.matchMedia(...)
  *
@@ -44,23 +94,11 @@ export function createMediaQueryListener(mediaQueryList: MatchMediaList, callbac
  * @property {boolean} not - reverses a media query
  * @returns media queries as a string
  */
-export function buildQuery({ query, when, not }: {
-    query?: any;
-    when?: any;
-    not?: any;
-}, breakpoints: any): any;
+export declare function buildQuery({ query, when, not }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryCondition;
 /**
  * Convert a media query from various formats to a valid string based media query
  *
  * @param {array|object|string} query media query definitions
  * @returns media query string
  */
-export function convertToMediaQuery(query: any[] | object | string, breakpoints?: any): any;
-export const defaultBreakpoints: {
-    small: string;
-    medium: string;
-    large: string;
-    'x-large': string;
-    'xx-large': string;
-};
-export function isMatchMediaSupported(): boolean;
+export declare function convertToMediaQuery(query: MediaQueryCondition | Array<MediaQueryCondition>, breakpoints?: MediaQueryBreakpoints): string;

package/cjs/shared/MediaQueryUtils.js

@@ -223,7 +223,7 @@ function buildQuery() {
   }
 
   if ((0, _componentHelper.isTrue)(not)) {
-    query = reverseQuery(query);
+    query = reverseQuery(String(query));
   }
 
   return query || 'not';
@@ -353,7 +353,7 @@ function objToMediaQuery(obj) {
 }
 
 function getValueByFeature(value) {
-  var types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var types = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   types = types || defaultBreakpoints;
 
   if (Object.prototype.hasOwnProperty.call(types, value)) {

package/cjs/shared/Provider.d.ts

@@ -1,15 +1,39 @@
-import * as React from 'react';
-
 /**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
+ * Lib Provider
+ *
  */
-export interface ProviderProps extends React.HTMLProps<HTMLElement> {
-  value?: Object;
-  locale?: string;
-  skeleton?: boolean;
-  children: React.ReactNode;
-}
-export default class Provider extends React.Component<ProviderProps, any> {
-  static defaultProps: object;
-  render(): JSX.Element;
+import React from 'react';
+import type { ContextProps } from './Context';
+export declare type ProviderProps = {
+    /**
+     * Send in an object that gets spread as properties to the Provider
+     */
+    value?: ContextProps;
+    /**
+     * Define the locale used for every Eufemia components inside this Provider. Defaults to nb-NO
+     */
+    locale?: string;
+    /**
+     * Enable skeleton of every Eufemia component inside this Provider
+     */
+    skeleton?: boolean | string;
+    /**
+     * The content
+     */
+    children: React.ReactNode;
+} & ContextProps;
+export declare type ProviderState = {
+    /** For internal use */
+    isRoot?: boolean;
+    _listenForPropChanges?: boolean;
+    _startupProps?: ContextProps;
+} & ContextProps;
+export default class Provider extends React.PureComponent<ProviderProps, ProviderState> {
+    static contextType: React.Context<ContextProps>;
+    static defaultProps: Record<string, unknown>;
+    static getDerivedStateFromProps(props: any, state: any): ContextProps;
+    static mergeContext(props: any, context: any): any;
+    constructor(props: any, context: any);
+    setNewContext(__newContext: any): void;
+    render(): JSX.Element;
 }

package/cjs/shared/Provider.js

@@ -43,13 +43,11 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Context = _interopRequireWildcard(require("./Context"));
 
 var _componentHelper = require("./component-helper");
 
-var _FormRow = require("../components/form-row/FormRow");
+var _FormRowHelpers = require("../components/form-row/FormRowHelpers");
 
 var _excluded = ["children"],
     _excluded2 = ["children"],
@@ -147,10 +145,10 @@ var Provider = function (_React$PureComponent) {
       });
     };
 
+    pC.isRoot = isRoot;
+    pC._listenForPropChanges = true;
+    pC._startupProps = startupProps;
     _this.state = pC;
-    _this.state.isRoot = isRoot;
-    _this.state._listenForPropChanges = true;
-    _this.state._startupProps = startupProps;
     return _this;
   }
 
@@ -203,7 +201,7 @@ var Provider = function (_React$PureComponent) {
 
         if (state.FormRow) {
           state.FormRow = _objectSpread(_objectSpread({}, state.FormRow), updatedProps.FormRow);
-          state.FormRow = (0, _FormRow.prepareFormRowContext)(state.FormRow);
+          state.FormRow = (0, _FormRowHelpers.prepareFormRowContext)(state.FormRow);
         }
       }
 
@@ -235,11 +233,4 @@ exports.default = Provider;
 
 _defineProperty(Provider, "contextType", _Context.default);
 
-_defineProperty(Provider, "defaultProps", {});
-
-process.env.NODE_ENV !== "production" ? Provider.propTypes = {
-  value: _propTypes.default.object,
-  locale: _propTypes.default.string,
-  skeleton: _propTypes.default.bool,
-  children: _propTypes.default.node.isRequired
-} : void 0;
+_defineProperty(Provider, "defaultProps", {});

package/cjs/shared/component-helper.d.ts

@@ -39,7 +39,7 @@ export function makeUniqueId(prefix?: string, length?: number): string;
 export function slugify(s: any): string;
 export function matchAll(string: any, regex: any): any[];
 export function getPreviousSibling(className: [string], element: [HTMLElement]): [HTMLElement];
-export function isChildOfElement(element: any, target: any, cb?: any): any;
+export function isChildOfElement(element: HTMLElement, target: HTMLElement, callback?: Function): HTMLElement | null;
 export function roundToNearest(num: any, target: any): any;
 export function isInsideScrollView(currentElement: any, returnElement?: boolean): boolean | [HTMLElement];
 export function convertJsxToString(elements: any, separator?: any): any;

package/cjs/shared/component-helper.js

@@ -784,15 +784,15 @@ var getPreviousSibling = function getPreviousSibling(className, element) {
 exports.getPreviousSibling = getPreviousSibling;
 
 var isChildOfElement = function isChildOfElement(element, target) {
-  var cb = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
 
   try {
     var contains = function contains(element) {
-      if (cb) {
-        var res = cb(element);
+      if (callback) {
+        var res = callback(element);
 
-        if (typeof res === 'boolean') {
-          return res;
+        if (res) {
+          return element;
         }
       }
 

package/cjs/shared/helpers/Suffix.d.ts

@@ -4,11 +4,12 @@
  */
 import React from 'react';
 declare const SuffixContext: React.Context<any>;
-interface SuffixProps {
+export declare type SuffixChildren = React.ReactNode;
+export declare type SuffixProps = {
     className: string;
-    children: React.ReactNode;
+    children: SuffixChildren;
     context: Record<string, unknown>;
-}
-declare const Suffix: ({ className, children, context, ...props }: SuffixProps) => JSX.Element;
+};
+declare const Suffix: ({ className, children, context, ...props }: SuffixProps & React.HTMLAttributes<HTMLSpanElement>) => JSX.Element;
 export { SuffixContext };
 export default Suffix;

package/cjs/shared/helpers/filterValidProps.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Filters out props from a given object/context
+ * It returns a new object, with keys defined in validKeys
+ *
+ * @param props object of component properties
+ * @param validKeys object with keys that should get returned
+ * @param excludeKeys object with keys that should be excluded
+ * @returns filtered properties
+ */
+declare function filterValidProps<Props>(props: Props, validKeys: Record<string, unknown>, excludeKeys?: Record<string, unknown>): Props;
+export { filterValidProps };

package/cjs/shared/helpers/filterValidProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterValidProps = filterValidProps;
+
+function filterValidProps(props, validKeys, excludeKeys) {
+  var res = {},
+      o = Object.prototype.hasOwnProperty;
+
+  for (var key in props) {
+    if (o.call(validKeys, key) && (!excludeKeys || excludeKeys && !o.call(excludeKeys, key))) {
+      res[key] = props[key];
+    }
+  }
+
+  return res;
+}

package/cjs/shared/helpers/withCamelCaseProps.js

@@ -123,6 +123,9 @@ function classWithCamelCaseProps(Base) {
     }
 
     _createClass(Derived, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {}
+    }, {
       key: "render",
       value: function render() {
         if (this.props !== this._prevProps) {

package/cjs/shared/interfaces.d.ts

@@ -8,3 +8,16 @@ export interface ISpacingElementProps {
     left?: SpaceTypes;
 }
 export declare type SpaceTypes = string | boolean | number;
+export declare type DataAttributeTypes = {
+    /**
+     * When using HTMLAttributes on object to define props,
+     * we need not get data-* attributes as valid types:
+     *
+     * triggerAttributes={{
+     *   'data-testid': 'html-selector'
+     * }}
+     *
+     * Effects: triggerAttributes, closeButtonAttributes
+     */
+    'data-testid'?: string;
+};

package/cjs/shared/locales/en-GB.d.ts

@@ -66,6 +66,7 @@ declare var _default: {
             show_all: string;
             show_options_sr: string;
             aria_live_options: string;
+            selected_sr: string;
             indicator_label: string;
         };
         Modal: {

package/cjs/shared/locales/en-GB.js

@@ -72,6 +72,7 @@ var _default = {
       show_all: 'Show everything',
       show_options_sr: 'Browse options, close with esc button',
       aria_live_options: '%s options',
+      selected_sr: 'Selected:',
       indicator_label: 'Getting data ...'
     },
     Modal: {

package/cjs/shared/locales/en-US.d.ts

@@ -67,6 +67,7 @@ declare var _default: {
             show_all: string;
             show_options_sr: string;
             aria_live_options: string;
+            selected_sr: string;
             indicator_label: string;
         };
         Modal: {