@dnb/eufemia 9.40.0 → 9.41.0

package/fragments/lib.d.ts

@@ -1,13 +1,10 @@
 export function getFragments(): {
     DrawerList: typeof DrawerList;
-    ScrollView: import("react").ForwardRefExoticComponent<{
-        className?: string;
-        children?: import("react").ReactNode;
-        style?: import("react").CSSProperties;
-        innerRef?: import("react").ForwardedRef<unknown>;
-    } & import("../shared/types").SpacingElementProps & {
+    ScrollView: import("react").ForwardRefExoticComponent<import("./scroll-view/ScrollView").ScrollViewProps & import("../shared/types").SpacingElementProps & {
         space?: import("../shared/types").SpaceTypes | import("../shared/types").SpacingElementProps;
-    } & Partial<Omit<import("react").HTMLAttributes<HTMLDivElement>, "title">> & import("react").RefAttributes<unknown>>;
+    } & Partial<Omit<import("react").HTMLAttributes<HTMLDivElement>, "title">> & {
+        innerRef?: import("react").ForwardedRef<unknown>;
+    } & import("react").RefAttributes<unknown>>;
 };
 export function enableWebFragments(): boolean;
 declare namespace _default {

package/fragments/scroll-view/ScrollView.d.ts

@@ -5,17 +5,18 @@
 import React from 'react';
 import { SpacingProps } from '../../shared/types';
 export declare type ScrollViewProps = {
-    className?: string;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
+    /**
+     * Set to `true` to make the content accessible to keyboard navigation
+     * Default: false
+     */
+    interactive?: boolean;
+};
+export declare type ScrollViewAllProps = ScrollViewProps & SpacingProps & Partial<Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>> & {
     innerRef?: React.ForwardedRef<unknown>;
-} & SpacingProps & Partial<Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>>;
-declare const _default: React.ForwardRefExoticComponent<{
-    className?: string;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-    innerRef?: React.ForwardedRef<unknown>;
-} & import("../../shared/types").SpacingElementProps & {
+};
+declare const _default: React.ForwardRefExoticComponent<ScrollViewProps & import("../../shared/types").SpacingElementProps & {
     space?: import("../../shared/types").SpaceTypes | import("../../shared/types").SpacingElementProps;
-} & Partial<Omit<React.HTMLAttributes<HTMLDivElement>, "title">> & React.RefAttributes<unknown>>;
+} & Partial<Omit<React.HTMLAttributes<HTMLDivElement>, "title">> & {
+    innerRef?: React.ForwardedRef<unknown>;
+} & React.RefAttributes<unknown>>;
 export default _default;

package/fragments/scroll-view/ScrollView.js

@@ -8,7 +8,7 @@ import "core-js/modules/es.object.get-own-property-descriptors.js";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "innerRef"];
+var _excluded = ["interactive", "children", "className", "innerRef"];
 
 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; }
 
@@ -19,16 +19,16 @@ import classnames from 'classnames';
 import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
 import Context from '../../shared/Context';
 import { createSpacingClasses } from '../../components/space/SpacingHelper';
-import { includeValidProps } from '../../components/form-row/FormRowHelpers';
 var defaultProps = {
   children: null
 };
 
 function ScrollView(localProps) {
   var context = React.useContext(Context);
-  var props = extendPropsWithContext(localProps, defaultProps, includeValidProps(context.FormRow), context.ScrollView);
+  var props = extendPropsWithContext(localProps, defaultProps, context.ScrollView);
 
-  var children = props.children,
+  var interactive = props.interactive,
+      children = props.children,
       _props$className = props.className,
       className = _props$className === void 0 ? null : _props$className,
       innerRef = props.innerRef,
@@ -42,6 +42,10 @@ function ScrollView(localProps) {
     mainParams.ref = innerRef;
   }
 
+  if (interactive) {
+    mainParams.tabIndex = 0;
+  }
+
   validateDOMAttributes(props, mainParams);
   return React.createElement("div", mainParams, children);
 }

package/fragments/scroll-view/style/_scroll-view.scss

@@ -6,4 +6,12 @@
 .dnb-scroll-view {
   overflow-x: auto;
   @include scrollY(auto);
+
+  // interactive prop
+  &[tabindex='0'] {
+    &:focus {
+      outline: none;
+      @include fakeFocus();
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnb/eufemia",
-  "version": "9.40.0",
+  "version": "9.41.0",
   "description": "DNB Eufemia Design System UI Library",
   "license": "SEE LICENSE IN LICENSE FILE",
   "author": "DNB Team & Tobias Høegh",

package/shared/Eufemia.js

@@ -10,7 +10,7 @@ export function init() {
       _createClass(Eufemia, [{
         key: "version",
         get: function get() {
-          return '9.40.0';
+          return '9.41.0';
         }
       }]);
 

package/shared/helpers.js

@@ -154,7 +154,13 @@ export function scrollToLocationHashId() {
       if (id.length > 0) {
         var handleScroll = function handleScroll() {
           var runScroll = function runScroll() {
-            var top = getOffsetTop(elem) - offset;
+            var totalOffset = getOffsetTop(elem);
+
+            if (totalOffset <= 0) {
+              return;
+            }
+
+            var top = totalOffset - offset;
 
             try {
               if (typeof IntersectionObserver !== 'undefined') {

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

@@ -122,6 +122,10 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Table: {
+            accordionToggleButtonSR: string;
+            accordionMoreContentSR: string;
+        };
         Upload: {
             title: string;
             text: string;

package/shared/locales/en-GB.js

@@ -122,6 +122,10 @@ export default {
     Tag: {
       removeIconTitle: 'Remove'
     },
+    Table: {
+      accordionToggleButtonSR: 'Show more content',
+      accordionMoreContentSR: 'More content in the next row'
+    },
     Upload: {
       title: 'Upload documents',
       text: 'Drag & drop your files or choose files to upload.',

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

@@ -123,6 +123,10 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Table: {
+            accordionToggleButtonSR: string;
+            accordionMoreContentSR: string;
+        };
         Upload: {
             title: string;
             text: string;

package/shared/locales/index.d.ts

@@ -122,6 +122,10 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Table: {
+            accordionToggleButtonSR: string;
+            accordionMoreContentSR: string;
+        };
         Upload: {
             title: string;
             text: string;
@@ -261,6 +265,10 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Table: {
+            accordionToggleButtonSR: string;
+            accordionMoreContentSR: string;
+        };
         Upload: {
             title: string;
             text: string;

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

@@ -122,6 +122,10 @@ declare var _default: {
         Tag: {
             removeIconTitle: string;
         };
+        Table: {
+            accordionToggleButtonSR: string;
+            accordionMoreContentSR: string;
+        };
         Upload: {
             title: string;
             text: string;

package/shared/locales/nb-NO.js

@@ -122,6 +122,10 @@ export default {
     Tag: {
       removeIconTitle: 'Fjern'
     },
+    Table: {
+      accordionToggleButtonSR: 'Vis mer innhold',
+      accordionMoreContentSR: 'Mer innhold i neste rad'
+    },
     Upload: {
       title: 'Last opp dokumenter',
       text: 'Dra & slipp eller velg hvilke filer du vil laste opp.',