@dnb/eufemia 9.23.1 → 9.24.0

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/tag/Tag.d.ts

@@ -13,6 +13,11 @@ export interface TagProps {
      * Default: null
      */
     icon?: IconPrimaryIcon;
+    /**
+     * If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.
+     * Default: null
+     */
+    hasLabel?: boolean;
     /**
      * Custom className on the component root
      * Default: null
@@ -45,13 +50,7 @@ export interface TagProps {
     omitOnKeyUpDeleteEvent?: boolean;
 }
 export declare const defaultProps: {
-    className: any;
     skeleton: boolean;
-    text: any;
-    children: any;
-    icon: any;
-    onClick: any;
-    onDelete: any;
     omitOnKeyUpDeleteEvent: boolean;
 };
 declare const Tag: {

package/es/components/tag/Tag.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 
 var _IconPrimary;
 
-const _excluded = ["className", "skeleton", "children", "text", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
+const _excluded = ["className", "skeleton", "children", "text", "hasLabel", "onClick", "onDelete", "omitOnKeyUpDeleteEvent"];
 import React from 'react';
 import classnames from 'classnames';
 import IconPrimary from '../icon-primary/IconPrimary';
@@ -14,13 +14,7 @@ import { usePropsWithContext } from '../../shared/hooks';
 import TagGroup from './TagGroup';
 import { TagGroupContext } from './TagContext';
 export const defaultProps = {
-  className: null,
   skeleton: false,
-  text: null,
-  children: null,
-  icon: null,
-  onClick: null,
-  onDelete: null,
   omitOnKeyUpDeleteEvent: false
 };
 
@@ -36,6 +30,7 @@ const Tag = localProps => {
     skeleton,
     children,
     text,
+    hasLabel,
     onClick,
     onDelete,
     omitOnKeyUpDeleteEvent
@@ -69,7 +64,7 @@ const Tag = localProps => {
     buttonAttr.icon = getDeleteIcon();
   }
 
-  if (!tagGroupContext) {
+  if (!tagGroupContext && !hasLabel) {
     warn(`Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
   }
 

package/es/fragments/drawer-list/DrawerList.js

@@ -409,7 +409,7 @@ const ItemContent = ({
       key: hash + n,
       className: "dnb-drawer-list__option__item"
     }, children.render ? children.render(item, hash + n) : item));
-  } else if (children.content) {
+  } else if (Object.prototype.hasOwnProperty.call(children, 'content')) {
     return children.render ? children.render(children.content, hash, children) : children.content;
   }
 

package/es/fragments/drawer-list/DrawerListHelpers.js

@@ -202,6 +202,8 @@ export const normalizeData = props => {
   }
 
   return (data || []).map((item, __id) => {
+    var _item;
+
     if (typeof item === 'number' || typeof item === 'string' || Array.isArray(item) || React.isValidElement(item)) {
       item = {
         content: item,
@@ -209,7 +211,7 @@ export const normalizeData = props => {
       };
     }
 
-    return typeof item.__id !== 'undefined' ? item : _objectSpread(_objectSpread({}, item), {}, {
+    return typeof ((_item = item) === null || _item === void 0 ? void 0 : _item.__id) !== 'undefined' ? item : _objectSpread(_objectSpread({}, item), {}, {
       __id
     });
   });

package/es/shared/Context.d.ts

@@ -3,6 +3,7 @@ export function prepareContext(props?: {}): {
     updateTranslation: (locale: any, translation: any) => void;
     getTranslation: (props: any) => any;
     locales: any;
+    Button: {};
     Avatar: {};
     AvatarGroup: {};
     Breadcrumb: {};
@@ -22,6 +23,7 @@ declare const Context: React.Context<{
     updateTranslation: (locale: any, translation: any) => void;
     getTranslation: (props: any) => any;
     locales: any;
+    Button: {};
     Avatar: {};
     AvatarGroup: {};
     Breadcrumb: {};

package/es/shared/Context.js

@@ -41,6 +41,7 @@ export const prepareContext = (props = {}) => {
       return context.translation;
     },
     locales,
+    Button: {},
     Avatar: {},
     AvatarGroup: {},
     Breadcrumb: {},

package/es/shared/Eufemia.js

@@ -2,7 +2,7 @@ export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '9.23.1';
+        return '9.24.0';
       }
 
     }

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

@@ -72,6 +72,10 @@ declare var _default: {
             dialog_title: string;
             close_title: string;
         };
+        Dialog: {
+            declineText: string;
+            confirmText: string;
+        };
         NumberFormat: {
             clipboard_copy: string;
         };

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

@@ -72,6 +72,10 @@ export default {
       dialog_title: 'Dialog Window',
       close_title: 'Close'
     },
+    Dialog: {
+      declineText: 'Cancel',
+      confirmText: 'Approve'
+    },
     NumberFormat: {
       clipboard_copy: 'Copied'
     },

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

@@ -73,6 +73,10 @@ declare var _default: {
             dialog_title: string;
             close_title: string;
         };
+        Dialog: {
+            declineText: string;
+            confirmText: string;
+        };
         NumberFormat: {
             clipboard_copy: string;
         };

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

@@ -72,6 +72,10 @@ declare var _default: {
             dialog_title: string;
             close_title: string;
         };
+        Dialog: {
+            declineText: string;
+            confirmText: string;
+        };
         NumberFormat: {
             clipboard_copy: string;
         };
@@ -188,6 +192,10 @@ declare var _default: {
             dialog_title: string;
             close_title: string;
         };
+        Dialog: {
+            declineText: string;
+            confirmText: string;
+        };
         NumberFormat: {
             clipboard_copy: string;
         };

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

@@ -72,6 +72,10 @@ declare var _default: {
             dialog_title: string;
             close_title: string;
         };
+        Dialog: {
+            declineText: string;
+            confirmText: string;
+        };
         NumberFormat: {
             clipboard_copy: string;
         };

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

@@ -72,6 +72,10 @@ export default {
       dialog_title: 'Separat Vindu',
       close_title: 'Lukk'
     },
+    Dialog: {
+      declineText: 'Avbryt',
+      confirmText: 'Godta'
+    },
     NumberFormat: {
       clipboard_copy: 'Kopiert'
     },

package/es/shared/useTranslation.d.ts

@@ -6,6 +6,7 @@ export class Translation extends React.PureComponent<any, any, any> {
         updateTranslation: (locale: any, translation: any) => void;
         getTranslation: (props: any) => any;
         locales: any;
+        Button: {};
         Avatar: {};
         AvatarGroup: {};
         Breadcrumb: {};