@dnb/eufemia 9.27.0 → 9.28.0

package/es/components/timeline/TimelineItem.js

@@ -128,7 +128,8 @@ const TimelineItem = localProps => {
       text: infoMessage,
       state: "info",
       className: "dnb-timeline__item__content__info",
-      "data-testid": "timeline-item-content-info"
+      "data-testid": "timeline-item-content-info",
+      stretch: true
     }))));
   };
 

package/es/index.d.ts

@@ -31,6 +31,7 @@ import Ul from "./elements/Ul";
 import Accordion from "./components/accordion/Accordion";
 import Autocomplete from "./components/autocomplete/Autocomplete";
 import Avatar from "./components/avatar/Avatar";
+import Badge from "./components/badge/Badge";
 import Breadcrumb from "./components/breadcrumb/Breadcrumb";
 import Button from "./components/button/Button";
 import Checkbox from "./components/checkbox/Checkbox";
@@ -71,4 +72,4 @@ import Timeline from "./components/timeline/Timeline";
 import ToggleButton from "./components/toggle-button/ToggleButton";
 import Tooltip from "./components/tooltip/Tooltip";
 import VisuallyHidden from "./components/visually-hidden/VisuallyHidden";
-export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Td, Th, Tr, Ul, Accordion, Autocomplete, Avatar, Breadcrumb, Button, Checkbox, DatePicker, Dialog, Drawer, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, VisuallyHidden };
+export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Td, Th, Tr, Ul, Accordion, Autocomplete, Avatar, Badge, Breadcrumb, Button, Checkbox, DatePicker, Dialog, Drawer, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, VisuallyHidden };

package/es/index.js

@@ -29,6 +29,7 @@ import Ul from './elements/Ul';
 import Accordion from './components/accordion/Accordion';
 import Autocomplete from './components/autocomplete/Autocomplete';
 import Avatar from './components/avatar/Avatar';
+import Badge from './components/badge/Badge';
 import Breadcrumb from './components/breadcrumb/Breadcrumb';
 import Button from './components/button/Button';
 import Checkbox from './components/checkbox/Checkbox';
@@ -69,5 +70,5 @@ import Timeline from './components/timeline/Timeline';
 import ToggleButton from './components/toggle-button/ToggleButton';
 import Tooltip from './components/tooltip/Tooltip';
 import VisuallyHidden from './components/visually-hidden/VisuallyHidden';
-export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Td, Th, Tr, Ul, Accordion, Autocomplete, Avatar, Breadcrumb, Button, Checkbox, DatePicker, Dialog, Drawer, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, VisuallyHidden };
+export { Anchor, Blockquote, Code, Dd, Div, Dl, Dt, H, H1, H2, H3, H4, H5, H6, Hr, Img, Ingress, Lead, Li, Link, Ol, P, Paragraph, Span, Td, Th, Tr, Ul, Accordion, Autocomplete, Avatar, Badge, Breadcrumb, Button, Checkbox, DatePicker, Dialog, Drawer, Dropdown, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Heading, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, VisuallyHidden };
 export default {};

package/es/shared/AlignmentHelper.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 export default function AlignmentHelper(_ref) {
   let {
-    className,
-    children
+    className = null,
+    children = null
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded);
 

package/es/shared/Context.d.ts

@@ -6,9 +6,11 @@ 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';
@@ -20,9 +22,11 @@ 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>;
@@ -83,7 +87,7 @@ export declare type ContextProps = {
 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>;

package/es/shared/Eufemia.js

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

package/es/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/es/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/es/shared/helpers/filterValidProps.js

@@ -0,0 +1,14 @@
+function filterValidProps(props, validKeys, excludeKeys) {
+  const res = {},
+        o = Object.prototype.hasOwnProperty;
+
+  for (const key in props) {
+    if (o.call(validKeys, key) && (!excludeKeys || excludeKeys && !o.call(excludeKeys, key))) {
+      res[key] = props[key];
+    }
+  }
+
+  return res;
+}
+
+export { filterValidProps };

package/es/shared/helpers/withCamelCaseProps.js

@@ -37,6 +37,8 @@ export function classWithCamelCaseProps(Base) {
       _defineProperty(this, "_elem", void 0);
     }
 
+    componentDidMount() {}
+
     render() {
       if (this.props !== this._prevProps) {
         this._prevProps = this.props;

package/es/style/dnb-ui-components.css

@@ -802,7 +802,10 @@
   .dnb-autocomplete__row {
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
-    display: inline-flex; }
+    display: inline-flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center; }
   .dnb-autocomplete--small {
     line-height: 1.5rem;
     line-height: var(--autocomplete-height--small); }
@@ -861,6 +864,34 @@
             transform: rotate(180deg);
     -webkit-transform-origin: 50% 50%;
             transform-origin: 50% 50%; }
+  .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+    --border-color: var(--color-black-55);
+    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+            box-shadow: inset 0 0 0 0.0625rem var(--border-color);
+    -webkit-box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color);
+            box-shadow: inset 0 0 0 var(--input-border-width) var(--border-color);
+    /* iOS fix - because "inset" works not fine with border-radius */
+    /* Safari fix - because "inset" works not fine with border-radius if the user zooms the page */
+    border-color: transparent; }
+    @supports (-webkit-touch-callout: none) {
+      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+        -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                box-shadow: 0 0 0 0.0625rem var(--border-color);
+        -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } }
+    @media not all and (min-resolution: 0.001dpcm) {
+      @supports (-webkit-appearance: none) and (stroke-color: transparent) and (not (-webkit-overflow-scrolling: touch)) {
+        .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+          -webkit-box-shadow: 0 0 0 0.0625rem var(--border-color);
+                  box-shadow: 0 0 0 0.0625rem var(--border-color);
+          -webkit-box-shadow: 0 0 0 var(--input-border-width) var(--border-color);
+                  box-shadow: 0 0 0 var(--input-border-width) var(--border-color); } } }
+    @media screen and (-ms-high-contrast: none) {
+      .dnb-autocomplete .dnb-input__submit-button__button[disabled]:not(.dnb-button--has-text) {
+        -webkit-box-shadow: inset 0 0 0 1px #737373;
+                box-shadow: inset 0 0 0 1px #737373;
+        -webkit-box-shadow: inset 0 0 0 1px var(--color-black-55);
+                box-shadow: inset 0 0 0 1px var(--color-black-55); } }
   .dnb-autocomplete .dnb-input__submit-button__button .dnb-icon {
     -webkit-transition: -webkit-transform 400ms ease-out;
     transition: -webkit-transform 400ms ease-out;
@@ -871,7 +902,8 @@
               transition-duration: 1ms !important; }
   .dnb-autocomplete .dnb-input__inner__element {
     position: relative;
-    z-index: 3; }
+    z-index: 3;
+    cursor: text; }
   @media screen and (min-width: 40em) {
     .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__placeholder,
     .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
@@ -881,7 +913,6 @@
     .dnb-autocomplete .dnb-input--has-submit-element .dnb-input__input {
       padding-right: 2.5rem !important; } }
   .dnb-autocomplete .dnb-input__inner__element.dnb-p {
-    pointer-events: none;
     white-space: nowrap;
     padding: 0 0.5rem; }
     @media screen and (max-width: 40em) {
@@ -896,6 +927,8 @@
     padding-right: 3rem; }
   .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right .dnb-autocomplete--icon-position-right .dnb-input--icon-position-right.dnb-autocomplete--icon-position-right .dnb-input--has-icon .dnb-autocomplete--icon-position-right .dnb-input__input {
     padding-right: 1rem; }
+  .dnb-autocomplete--disabled .dnb-input__inner__element {
+    cursor: not-allowed; }
   .dnb-autocomplete__text {
     -webkit-box-ordinal-group: 2;
         -ms-flex-order: 1;
@@ -1050,6 +1083,7 @@
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
+  white-space: nowrap;
   border-radius: 50%;
   font-weight: 500;
   font-weight: var(--font-weight-medium);
@@ -1167,6 +1201,88 @@
         margin-left: 0.25rem;
         margin-left: var(--spacing-xx-small); }
 
+/*
+* Badge component
+*
+*/
+:root {
+  --badge-font-size: var(--font-size-x-small);
+  --badge-width: 1.5rem;
+  --badge-height: 1.5rem;
+  --badge-border-radius-information: calc(var(--badge-height)/4);
+  --badge-border-radius-information: calc(var(--badge-height) / 4);
+  --badge-border-radius-notification: calc(var(--badge-height)/2);
+  --badge-border-radius-notification: calc(var(--badge-height) / 2);
+  --badge-line-height: var(--line-height-x-small); }
+
+.dnb-badge {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-weight: 500;
+  font-weight: var(--font-weight-medium);
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  white-space: nowrap;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -ms-flex-line-pack: center;
+      align-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  width: 1.5rem;
+  width: var(--badge-width);
+  height: 1.5rem;
+  height: var(--badge-height);
+  font-size: 0.875rem;
+  font-size: var(--badge-font-size); }
+  .dnb-badge,
+  .dnb-core-style .dnb-badge {
+    line-height: 1.125rem;
+    line-height: var(--badge-line-height); }
+  .dnb-badge__root {
+    position: relative;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    vertical-align: middle;
+    -ms-flex-negative: 0;
+        flex-shrink: 0; }
+    .dnb-badge__root .dnb-badge {
+      display: -webkit-box;
+      display: -ms-flexbox;
+      display: flex;
+      overflow: hidden;
+      position: absolute;
+      z-index: 2; }
+  .dnb-badge--variant-notification {
+    border-radius: 0.75rem;
+    border-radius: calc(1.5rem / 2);
+    border-radius: var(--badge-border-radius-notification); }
+  .dnb-badge--variant-information {
+    border-radius: 0.375rem;
+    border-radius: calc(1.5rem / 4);
+    border-radius: var(--badge-border-radius-information);
+    min-width: 1.5rem;
+    min-width: var(--badge-width);
+    width: auto;
+    padding: 0 0.25rem;
+    padding: 0 var(--spacing-xx-small); }
+  .dnb-badge--horizontal-left {
+    left: 0; }
+  .dnb-badge--horizontal-right {
+    right: 0; }
+  .dnb-badge--vertical-bottom {
+    bottom: 0; }
+  .dnb-badge--vertical-top {
+    top: 0; }
+
 /*
 * Breadcrumb component
 *
@@ -2695,19 +2811,12 @@ button.dnb-button::-moz-focus-inner {
         -ms-flex-direction: column;
             flex-direction: column;
     z-index: 10;
+    /** Sets the color on scroll overflow (at the bottom) */
     background-color: transparent;
     background-color: var(--modal-background-color, transparent);
     width: 100%;
     height: 100%;
     overflow-x: hidden; }
-    .dnb-drawer__inner::after {
-      content: '';
-      position: absolute;
-      z-index: -4;
-      left: 0;
-      top: 0;
-      width: 100vw;
-      height: 100%; }
   .dnb-drawer--spacing .dnb-drawer__inner {
     padding: 0 2rem 0;
     padding: 0 var(--drawer-spacing) 0; }
@@ -4329,8 +4438,7 @@ html[data-visual-test] .dnb-global-status__shell {
  */
 :root {
   --modal-z-index: 3000;
-  --modal-animation-duration: 300ms;
-  --modal-overlay-bg: rgba(0, 0, 0, 0.32); }
+  --modal-animation-duration: 300ms; }
 
 html[data-dnb-modal-active] {
   -moz-user-select: none;
@@ -4408,9 +4516,7 @@ html[data-dnb-modal-active] {
     left: 0;
     top: 0;
     width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.32);
-    background-color: var(--modal-overlay-bg); }
+    height: 100%; }
   .dnb-modal-root__inner .dnb-modal__overlay {
     -webkit-animation: hide-modal-overlay 300ms ease-out forwards;
             animation: hide-modal-overlay 300ms ease-out forwards;