@dnb/eufemia 9.32.1 → 9.34.0

package/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/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/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/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/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/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/shared/types.js

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

package/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/shared/useMedia.js

@@ -0,0 +1,126 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+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 "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.entries.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.values.js";
+import React from 'react';
+import Context from './Context';
+import { makeMediaQueryList, createMediaQueryListener, isMatchMediaSupported } from './MediaQueryUtils';
+import { toPascalCase } from './component-helper';
+export var queries = {
+  small: {
+    min: 0,
+    max: 'small'
+  },
+  medium: {
+    min: 'small',
+    max: 'medium'
+  },
+  large: {
+    min: 'medium'
+  }
+};
+export default function useMedia() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var disabled = props.disabled,
+      log = props.log;
+
+  var makeResult = function makeResult() {
+    return Object.entries(queries).reduce(function (acc, _ref) {
+      var _item$mediaQueryList;
+
+      var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          when = _ref2[1];
+
+      var name = "is".concat(toPascalCase(key));
+
+      if (disabled) {
+        acc[name] = false;
+        return acc;
+      }
+
+      defaults.current[name] = false;
+      var item = runQuery({
+        name: name,
+        when: 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()
+    });
+  };
+
+  var runQuery = function runQuery(_ref3) {
+    var when = _ref3.when,
+        name = _ref3.name;
+
+    if (!isMatchMediaSupported()) {
+      return;
+    }
+
+    var mediaQueryList = makeMediaQueryList({
+      when: when,
+      disabled: disabled,
+      log: log,
+      dismissWarning: true
+    }, context.breakpoints);
+    var event = createMediaQueryListener(mediaQueryList, function (match) {
+      if (!disabledRef.current && match) {
+        var state = _objectSpread(_objectSpread({}, defaults.current), {}, {
+          isSSR: result.isSSR
+        });
+
+        state[name] = match;
+        updateRerender(state);
+      }
+    });
+    return {
+      event: event,
+      mediaQueryList: mediaQueryList
+    };
+  };
+
+  React.useEffect(function () {
+    if (disabledRef.current && !disabled) {
+      updateRerender(makeResult());
+    }
+
+    disabledRef.current = disabled;
+  }, [disabled]);
+  React.useEffect(function () {
+    return removeListeners;
+  }, []);
+  var context = React.useContext(Context);
+  var refs = React.useRef({});
+  var defaults = React.useRef({});
+  var disabledRef = React.useRef(disabled);
+
+  var _React$useState = React.useState(makeResult),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      result = _React$useState2[0],
+      updateRerender = _React$useState2[1];
+
+  var removeListeners = function removeListeners() {
+    Object.values(refs.current).forEach(function (item) {
+      return (item === null || item === void 0 ? void 0 : item.event) && item.event();
+    });
+  };
+
+  return result;
+}

package/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/style/core/utilities.scss

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