@dnb/eufemia 9.32.1 → 9.34.0

package/es/shared/MediaQueryUtils.d.ts

@@ -32,6 +32,10 @@ export declare type MediaQueryProperties = {
      * If set to true, no MediaQuery will be used.
      */
     disabled?: boolean;
+    /**
+     * If set to true, no Eufemia warning will be shown when window.matchMedia is undefined
+     */
+    dismissWarning?: boolean;
     /**
      * For debugging
      */
@@ -80,7 +84,7 @@ export declare const isMatchMediaSupported: () => boolean;
  * @property {boolean} log - print used query to console
  * @returns MediaQueryList type
  */
-export declare function makeMediaQueryList({ query, when, not, log, disabled, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
+export declare function makeMediaQueryList({ query, when, not, log, disabled, dismissWarning, }?: MediaQueryProperties, breakpoints?: MediaQueryBreakpoints): MediaQueryList;
 /**
  * Adds a listener to the window.matchMedia Browser API
  *
@@ -88,7 +92,7 @@ export declare function makeMediaQueryList({ query, when, not, log, disabled, }?
  * @param {function} callback callback function
  * @returns function to remove listeners when called
  */
-export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: any) => void): MediaQueryListener;
+export declare function createMediaQueryListener(mediaQueryList: MediaQueryList, callback: (matches: boolean, event: Partial<MediaQueryListEvent>) => void): MediaQueryListener;
 /**
  * Builds a valid media query we can use on window.matchMedia(...)
  *

package/es/shared/MediaQueryUtils.js

@@ -4,8 +4,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 { isTrue, toKebabCase, warn } from './component-helper';
-import { IS_IE11 } from './helpers';
+import { isTrue, toKebabCase } from './component-helper';
+import { IS_IE11, warn } from './helpers';
 export const defaultBreakpoints = {
   small: '40em',
   medium: '50em',
@@ -46,9 +46,16 @@ export function makeMediaQueryList({
   when,
   not = null,
   log = false,
-  disabled = false
+  disabled = false,
+  dismissWarning = false
 } = {}, breakpoints = null) {
-  if (disabled || !isMatchMediaSupported()) {
+  const isSupported = isMatchMediaSupported();
+
+  if (disabled || !isSupported) {
+    if (!dismissWarning && !isSupported) {
+      warn('window.matchMedia is "undefined"');
+    }
+
     return null;
   }
 
@@ -64,14 +71,13 @@ export function makeMediaQueryList({
   const mediaQueryList = window.matchMedia(mediaQueryString);
 
   if (log) {
-    console.log('MediaQuery:', mediaQueryString);
+    warn('MediaQuery:', mediaQueryString);
   }
 
   return mediaQueryList;
 }
 export function createMediaQueryListener(mediaQueryList, callback) {
   if (!mediaQueryList) {
-    warn('Invalid MediaQueryList was given');
     return () => null;
   }
 

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

@@ -41,7 +41,7 @@ export function slugify(s: any): string;
 export function matchAll(string: any, regex: 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 | Element;
+export function getClosestScrollViewElement(currentElement: any): Element;
 export function convertJsxToString(elements: any, separator?: any): any;
 import { getPreviousSibling } from "./helpers/getPreviousSibling";
 import { warn } from "./helpers";

package/es/shared/component-helper.js

@@ -507,14 +507,8 @@ export const roundToNearest = (num, target) => {
   const diff = num % target;
   return diff > target / 2 ? num - diff + target : num - diff;
 };
-export const isInsideScrollView = (currentElement, returnElement = false) => {
-  const elem = getPreviousSibling('dnb-scroll-view', currentElement);
-
-  if (returnElement) {
-    return elem == window ? null : elem;
-  }
-
-  return elem == window ? false : Boolean(elem);
+export const getClosestScrollViewElement = currentElement => {
+  return getPreviousSibling('.dnb-scroll-view', currentElement);
 };
 export const convertJsxToString = (elements, separator = undefined) => {
   if (!Array.isArray(elements)) {

package/es/shared/index.d.ts

@@ -3,4 +3,5 @@ import Context from "./Context";
 import Provider from "./Provider";
 import MediaQuery from "./MediaQuery";
 import useMediaQuery from "./useMediaQuery";
-export { Context, Provider, MediaQuery, useMediaQuery };
+import useMedia from "./useMedia";
+export { Context, Provider, MediaQuery, useMediaQuery, useMedia };

package/es/shared/index.js

@@ -2,5 +2,6 @@ import Context from './Context';
 import Provider from './Provider';
 import MediaQuery from './MediaQuery';
 import useMediaQuery from './useMediaQuery';
+import useMedia from './useMedia';
 export * from './SpacingHelper';
-export { Context, Provider, MediaQuery, useMediaQuery };
+export { Context, Provider, MediaQuery, useMediaQuery, useMedia };

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

@@ -122,6 +122,21 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Upload: {
+            title: string;
+            text: string;
+            fileTypeDescription: string;
+            fileSizeDescription: string;
+            fileAmountDescription: string;
+            fileSizeContent: string;
+            buttonText: string;
+            loadingText: string;
+            errorLargeFile: string;
+            errorAmountLimit: string;
+            errorUnsupportedFile: string;
+            deleteButton: string;
+            fileListAriaLabel: string;
+        };
     };
 };
 export default _default;

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

@@ -121,6 +121,21 @@ export default {
     },
     Tag: {
       removeIconTitle: 'Remove'
+    },
+    Upload: {
+      title: 'Upload documents',
+      text: 'Drag & drop your files or choose files to upload.',
+      fileTypeDescription: 'Allowed formats:',
+      fileSizeDescription: 'Max. filesize:',
+      fileAmountDescription: 'Max. number of files:',
+      fileSizeContent: '%size MB',
+      buttonText: 'Choose files',
+      loadingText: 'Uploading',
+      errorLargeFile: 'The file you are trying to upload is too big, the maximum size supported is %size MB.',
+      errorAmountLimit: 'There is a limit to how many files you can upload (%amount).',
+      errorUnsupportedFile: 'The file you are trying to upload is not supported.',
+      deleteButton: 'Delete',
+      fileListAriaLabel: 'uploaded files'
     }
   }
 };

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

@@ -123,6 +123,21 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Upload: {
+            title: string;
+            text: string;
+            fileTypeDescription: string;
+            fileSizeDescription: string;
+            fileAmountDescription: string;
+            fileSizeContent: string;
+            buttonText: string;
+            loadingText: string;
+            errorLargeFile: string;
+            errorAmountLimit: string;
+            errorUnsupportedFile: string;
+            deleteButton: string;
+            fileListAriaLabel: string;
+        };
     };
 };
 export default _default;

package/es/shared/locales/index.d.ts

@@ -122,6 +122,21 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Upload: {
+            title: string;
+            text: string;
+            fileTypeDescription: string;
+            fileSizeDescription: string;
+            fileAmountDescription: string;
+            fileSizeContent: string;
+            buttonText: string;
+            loadingText: string;
+            errorLargeFile: string;
+            errorAmountLimit: string;
+            errorUnsupportedFile: string;
+            deleteButton: string;
+            fileListAriaLabel: string;
+        };
     };
     'nb-NO': {
         TimelineItem: {
@@ -246,6 +261,21 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Upload: {
+            title: string;
+            text: string;
+            fileTypeDescription: string;
+            fileSizeDescription: string;
+            fileAmountDescription: string;
+            fileSizeContent: string;
+            buttonText: string;
+            loadingText: string;
+            errorLargeFile: string;
+            errorAmountLimit: string;
+            errorUnsupportedFile: string;
+            deleteButton: string;
+            fileListAriaLabel: string;
+        };
     };
 };
 export default _default;

package/es/shared/locales/nb-NO.d.ts

@@ -122,6 +122,21 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Upload: {
+            title: string;
+            text: string;
+            fileTypeDescription: string;
+            fileSizeDescription: string;
+            fileAmountDescription: string;
+            fileSizeContent: string;
+            buttonText: string;
+            loadingText: string;
+            errorLargeFile: string;
+            errorAmountLimit: string;
+            errorUnsupportedFile: string;
+            deleteButton: string;
+            fileListAriaLabel: string;
+        };
     };
 };
 export default _default;

package/es/shared/locales/nb-NO.js

@@ -121,6 +121,21 @@ export default {
     },
     Tag: {
       removeIconTitle: 'Fjern'
+    },
+    Upload: {
+      title: 'Last opp dokumenter',
+      text: 'Dra & slipp eller velg hvilke filer du vil laste opp.',
+      fileTypeDescription: 'Tillatte filformater:',
+      fileSizeDescription: 'Maks filstørrelse:',
+      fileAmountDescription: 'Maks antall filer:',
+      fileSizeContent: '%size MB',
+      buttonText: 'Velg filer',
+      loadingText: 'Laster opp',
+      errorLargeFile: 'Filen du prøver å laste opp er for stor, vi støtter ikke filer større enn %size MB.',
+      errorAmountLimit: 'Det er begrenset hvor mange filer du kan laste opp (%amount).',
+      errorUnsupportedFile: 'Filen du prøver å laste opp er ikke støttet.',
+      deleteButton: 'Slett',
+      fileListAriaLabel: 'opplastede filer'
     }
   }
 };

package/es/shared/types.d.ts

@@ -1,24 +1,7 @@
-/// <reference types="react" />
-import { GetTranslationProps } from './Context';
+import React from 'react';
+import type { GetTranslationProps } from './Context';
+export * from '../components/space/types';
 export declare type LocaleProps = GetTranslationProps;
-export declare type SpacingElementProps = {
-    top?: SpaceTypes;
-    right?: SpaceTypes;
-    bottom?: SpaceTypes;
-    left?: SpaceTypes;
-};
-/**
- * @deprecated Use SpacingElementProps instead
- */
-export declare type ISpacingElementProps = SpacingElementProps;
-export declare type SpacingProps = SpacingElementProps & {
-    space?: SpaceTypes | SpacingElementProps;
-};
-/**
- * @deprecated Use SpacingProps instead
- */
-export declare type ISpacingProps = SpacingProps;
-export declare type SpaceTypes = string | boolean | number;
 export declare type DataAttributeTypes = {
     /**
      * When using HTMLAttributes on object to define props,
@@ -32,4 +15,4 @@ export declare type DataAttributeTypes = {
      */
     'data-testid'?: string;
 };
-export declare type DynamicElement = keyof JSX.IntrinsicElements | React.FunctionComponent;
+export declare type DynamicElement<P = React.HTMLProps<HTMLElement>> = keyof JSX.IntrinsicElements | React.FunctionComponent<P>;

package/es/shared/types.js

@@ -1 +1,2 @@
+export * from '../components/space/types';
 export {};

package/es/shared/useMedia.d.ts

@@ -0,0 +1,25 @@
+import { MediaQueryCondition } from './MediaQueryUtils';
+export declare type UseMediaProps = {
+    /**
+     * If set to true, no MediaQuery will be used.
+     * Default: false
+     */
+    disabled?: boolean;
+    /**
+     * For debugging
+     */
+    log?: boolean;
+};
+export declare type UseMediaQueries = {
+    small: MediaQueryCondition;
+    medium: MediaQueryCondition;
+    large: MediaQueryCondition;
+};
+export declare const queries: UseMediaQueries;
+export declare type UseMediaResult = {
+    isSmall: boolean;
+    isMedium: boolean;
+    isLarge: boolean;
+    isSSR: boolean;
+};
+export default function useMedia(props?: UseMediaProps): UseMediaResult;

package/es/shared/useMedia.js

@@ -0,0 +1,103 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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 Context from './Context';
+import { makeMediaQueryList, createMediaQueryListener, isMatchMediaSupported } from './MediaQueryUtils';
+import { toPascalCase } from './component-helper';
+export const queries = {
+  small: {
+    min: 0,
+    max: 'small'
+  },
+  medium: {
+    min: 'small',
+    max: 'medium'
+  },
+  large: {
+    min: 'medium'
+  }
+};
+export default function useMedia(props = {}) {
+  const {
+    disabled,
+    log
+  } = props;
+
+  const makeResult = () => {
+    return Object.entries(queries).reduce((acc, [key, when]) => {
+      var _item$mediaQueryList;
+
+      const name = `is${toPascalCase(key)}`;
+
+      if (disabled) {
+        acc[name] = false;
+        return acc;
+      }
+
+      defaults.current[name] = false;
+      const item = runQuery({
+        name,
+        when
+      });
+      acc[name] = (item === null || item === void 0 ? void 0 : (_item$mediaQueryList = item.mediaQueryList) === null || _item$mediaQueryList === void 0 ? void 0 : _item$mediaQueryList.matches) || false;
+      refs.current[key] = item;
+      return acc;
+    }, {
+      isSSR: !isMatchMediaSupported()
+    });
+  };
+
+  const runQuery = ({
+    when,
+    name
+  }) => {
+    if (!isMatchMediaSupported()) {
+      return;
+    }
+
+    const mediaQueryList = makeMediaQueryList({
+      when,
+      disabled,
+      log,
+      dismissWarning: true
+    }, context.breakpoints);
+    const event = createMediaQueryListener(mediaQueryList, match => {
+      if (!disabledRef.current && match) {
+        const state = _objectSpread(_objectSpread({}, defaults.current), {}, {
+          isSSR: result.isSSR
+        });
+
+        state[name] = match;
+        updateRerender(state);
+      }
+    });
+    return {
+      event,
+      mediaQueryList
+    };
+  };
+
+  React.useEffect(() => {
+    if (disabledRef.current && !disabled) {
+      updateRerender(makeResult());
+    }
+
+    disabledRef.current = disabled;
+  }, [disabled]);
+  React.useEffect(() => removeListeners, []);
+  const context = React.useContext(Context);
+  const refs = React.useRef({});
+  const defaults = React.useRef({});
+  const disabledRef = React.useRef(disabled);
+  const [result, updateRerender] = React.useState(makeResult);
+
+  const removeListeners = () => {
+    Object.values(refs.current).forEach(item => (item === null || item === void 0 ? void 0 : item.event) && item.event());
+  };
+
+  return result;
+}

package/es/style/core/helper-classes/helper-classes.scss

@@ -4,7 +4,7 @@
  */
 
 :root {
-  --easing-default: #{$defaultEasing};
+  --easing-default: cubic-bezier(0.42, 0, 0, 1);
 }
 
 // Focus management

package/es/style/core/utilities.scss

@@ -2,8 +2,6 @@
  * Utilities
  */
 
-$defaultEasing: cubic-bezier(0.42, 0, 0, 1);
-
 @mixin defaultDropShadow() {
   box-shadow: var(--shadow-default);
 }