@dnb/eufemia 10.0.0-beta.1 → 10.0.0-beta.2

package/extensions/payment-card/PaymentCard.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
+import type { SpacingProps } from '../shared/types';
+import type { SkeletonShow } from '../components/skeleton/Skeleton';
 export type PaymentCardCardStatus = 'active' | 'blocked' | 'expired';
 export type PaymentCardVariant = 'normal' | 'compact';
 export type PaymentCardDigits = string | number;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface PaymentCardRawData {
   productCode: string;
   productName: string;
@@ -14,45 +12,13 @@ export interface PaymentCardRawData {
   cardType: Record<string, unknown>;
   productType: Record<string, unknown>;
 }
-export type PaymentCardSkeleton = string | boolean;
-export type PaymentCardSpace =
-  | string
-  | number
-  | boolean
-  | {
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-       */
-      top?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-       */
-      right?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-       */
-      bottom?: string | number | boolean;
-
-      /**
-       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-       */
-      left?: string | number | boolean;
-    };
-export type PaymentCardTop = string | number | boolean;
-export type PaymentCardRight = string | number | boolean;
-export type PaymentCardBottom = string | number | boolean;
-export type PaymentCardLeft = string | number | boolean;
 export type PaymentCardChildren =
   | string
   | React.ReactNode
   | ((...args: any[]) => any);
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface PaymentCardProps extends React.HTMLProps<HTMLElement> {
+export interface PaymentCardProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   /**
    * <em>(required)</em> if product code matches one of the codes in the list the card will get that design, if no match is found Default design will be used.
    */
@@ -92,32 +58,7 @@ export interface PaymentCardProps extends React.HTMLProps<HTMLElement> {
   /**
    * If set to `true`, an overlaying skeleton with animation will be shown.
    */
-  skeleton?: PaymentCardSkeleton;
-
-  /**
-   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
-   */
-  space?: PaymentCardSpace;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
-   */
-  top?: PaymentCardTop;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
-   */
-  right?: PaymentCardRight;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
-   */
-  bottom?: PaymentCardBottom;
-
-  /**
-   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
-   */
-  left?: PaymentCardLeft;
+  skeleton?: SkeletonShow;
   class?: string;
   className?: string;
   children?: PaymentCardChildren;
@@ -129,3 +70,4 @@ export default class PaymentCard extends React.Component<
   static defaultProps: object;
   render(): JSX.Element;
 }
+export const getCardData = (product_code: string) => PaymentCardRawData;

package/extensions/payment-card/icons/BankAxept.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface BankAxeptSVGProps extends React.HTMLProps<HTMLElement> {
   /**
    * function fill() { [native code] }

package/extensions/payment-card/icons/Clock.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface ClockSVGProps extends React.HTMLProps<HTMLElement> {
   stroke?: string;
   width?: string;

package/extensions/payment-card/icons/DNB.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DNBLogoSVGProps extends React.HTMLProps<HTMLElement> {
   /**
    * function fill() { [native code] }

package/extensions/payment-card/icons/DNBMetalic.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DNBMetalicLogoSVGProps
   extends React.HTMLProps<HTMLElement> {
   /**

package/extensions/payment-card/icons/MastercardDefault.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface MastercardSVGProps extends React.HTMLProps<HTMLElement> {
   textFill?: string;
   width?: string;

package/extensions/payment-card/icons/MastercardMetalic.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface MastercardSVGProps extends React.HTMLProps<HTMLElement> {
   width?: string;
   height?: string;

package/extensions/payment-card/icons/MastercardMetalicBlack.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface SVGProps extends React.HTMLProps<HTMLElement> {
   width?: string;
   height?: string;

package/extensions/payment-card/icons/PB.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface PBSVGProps extends React.HTMLProps<HTMLElement> {
   /**
    * function fill() { [native code] }

package/extensions/payment-card/icons/PBPlatinum.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface PBPlatinumSVGProps extends React.HTMLProps<HTMLElement> {
   width?: string;
   height?: string;

package/extensions/payment-card/icons/Padlock.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface SVGProps extends React.HTMLProps<HTMLElement> {
   stroke?: string;
   width?: string;

package/extensions/payment-card/icons/Pluss.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface PlussProps extends React.HTMLProps<HTMLElement> {
   /**
    * function fill() { [native code] }

package/extensions/payment-card/icons/SagaGold.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface SagaGoldSVGProps extends React.HTMLProps<HTMLElement> {
   width?: string;
   height?: string;

package/extensions/payment-card/icons/SagaPlatinum.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface SagaPlatinumSVGProps
   extends React.HTMLProps<HTMLElement> {
   width?: string;

package/extensions/payment-card/icons/SagaVisaPlatinum.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface SagaVisaPlatinumSVGProps
   extends React.HTMLProps<HTMLElement> {
   width?: string;

package/extensions/payment-card/icons/VisaDefault.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface VisaSVGProps extends React.HTMLProps<HTMLElement> {
   /**
    * function fill() { [native code] }

package/extensions/payment-card/icons/VisaMetalic.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface VisaMetalicSVGProps extends React.HTMLProps<HTMLElement> {
   width?: string;
   height?: string;

package/extensions/payment-card/utils/CardDesigns.js

@@ -1,4 +1,4 @@
-import properties from '../../../style/properties';
+import properties from '../../../style/themes/theme-ui/properties';
 import { DNB, Saga, PB, Mastercard, BankAxept, Visa } from './Types';
 const defaultDesign = {
   name: 'Default',

package/fragments/drawer-list/DrawerList.d.ts

@@ -1,13 +1,7 @@
 import * as React from 'react';
-export type DrawerListScrollable = string | boolean;
-export type DrawerListFocusable = string | boolean;
+import type { SpacingProps } from '../../shared/types';
 export type DrawerListDirection = 'auto' | 'top' | 'bottom';
 export type DrawerListSize = 'default' | 'small' | 'medium' | 'large';
-export type DrawerListNoAnimation = string | boolean;
-export type DrawerListNoScrollAnimation = string | boolean;
-export type DrawerListPreventSelection = string | boolean;
-export type DrawerListActionMenu = string | boolean;
-export type DrawerListIsPopup = string | boolean;
 export type DrawerListAlignDrawer = 'left' | 'right';
 export type DrawerListOptionsRender =
   | Record<string, unknown>
@@ -19,14 +13,6 @@ export type DrawerListWrapperElement =
   | React.ReactNode;
 export type DrawerListDefaultValue = string | number;
 export type DrawerListValue = string | number;
-export type DrawerListSkipPortal = string | boolean;
-export type DrawerListPreventClose = string | boolean;
-export type DrawerListIndependentWidth = string | boolean;
-export type DrawerListFixedPosition = string | boolean;
-export type DrawerListKeepOpen = string | boolean;
-export type DrawerListPreventFocus = string | boolean;
-export type DrawerListSkipKeysearch = string | boolean;
-export type DrawerListOpened = string | boolean;
 export type DrawerListData =
   | string
   | ((...args: any[]) => any)
@@ -48,61 +34,45 @@ export type DrawerListRawData =
   | any[]
   | Record<string, unknown>
   | ((...args: any[]) => any);
-export type DrawerListIgnoreEvents = string | boolean;
-export type DrawerListSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type DrawerListTop = string | number | boolean;
-export type DrawerListRight = string | number | boolean;
-export type DrawerListBottom = string | number | boolean;
-export type DrawerListLeft = string | number | boolean;
 export type DrawerListChildren =
   | string
   | ((...args: any[]) => any)
   | React.ReactNode
   | Record<string, unknown>
   | any[];
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
-export interface DrawerListProps extends React.HTMLProps<HTMLElement> {
+export type DrawerListSuffix = React.ReactNode;
+export interface DrawerListProps
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   id?: string;
   role?: string;
   cache_hash?: string;
   triangle_position?: string;
-  scrollable?: DrawerListScrollable;
-  focusable?: DrawerListFocusable;
+  scrollable?: boolean;
+  focusable?: boolean;
   direction?: DrawerListDirection;
   size?: DrawerListSize;
   max_height?: number;
-  no_animation?: DrawerListNoAnimation;
-  no_scroll_animation?: DrawerListNoScrollAnimation;
-  prevent_selection?: DrawerListPreventSelection;
-  action_menu?: DrawerListActionMenu;
-  is_popup?: DrawerListIsPopup;
+  no_animation?: boolean;
+  no_scroll_animation?: boolean;
+  prevent_selection?: boolean;
+  action_menu?: boolean;
+  is_popup?: boolean;
   align_drawer?: DrawerListAlignDrawer;
   options_render?: DrawerListOptionsRender;
   wrapper_element?: DrawerListWrapperElement;
   default_value?: DrawerListDefaultValue;
   value?: DrawerListValue;
-  skip_portal?: DrawerListSkipPortal;
+  skip_portal?: boolean;
   portal_class?: string;
   list_class?: string;
-  prevent_close?: DrawerListPreventClose;
-  independent_width?: DrawerListIndependentWidth;
-  fixed_position?: DrawerListFixedPosition;
-  keep_open?: DrawerListKeepOpen;
-  prevent_focus?: DrawerListPreventFocus;
-  skip_keysearch?: DrawerListSkipKeysearch;
-  opened?: DrawerListOpened;
+  prevent_close?: boolean;
+  independent_width?: boolean;
+  fixed_position?: boolean;
+  keep_open?: boolean;
+  prevent_focus?: boolean;
+  skip_keysearch?: boolean;
+  opened?: boolean;
   class?: string;
   data?: DrawerListData;
   selected_value?: DrawerListSelectedValue;
@@ -110,14 +80,10 @@ export interface DrawerListProps extends React.HTMLProps<HTMLElement> {
   content?: DrawerListContent;
   prepared_data?: any[];
   raw_data?: DrawerListRawData;
-  ignore_events?: DrawerListIgnoreEvents;
-  space?: DrawerListSpace;
-  top?: DrawerListTop;
-  right?: DrawerListRight;
-  bottom?: DrawerListBottom;
-  left?: DrawerListLeft;
+  ignore_events?: boolean;
   className?: string;
   children?: DrawerListChildren;
+  suffix?: DrawerListSuffix;
   on_show?: (...args: any[]) => any;
   on_hide?: (...args: any[]) => any;
   handle_dismiss_focus?: (...args: any[]) => any;
@@ -127,20 +93,27 @@ export interface DrawerListProps extends React.HTMLProps<HTMLElement> {
   on_select?: (...args: any[]) => any;
   on_state_update?: (...args: any[]) => any;
 }
+export type DrawerListOptionsProps = {
+  children: React.ReactNode;
+};
+export type DrawerListItemProps = {
+  children: React.ReactNode;
+  selected: boolean;
+  value: string;
+  on_click: ({ value }: { value: string }) => void;
+};
 export default class DrawerList extends React.Component<
   DrawerListProps,
   any
 > {
   static defaultProps: object;
+  static Options: (props: DrawerListOptionsProps) => JSX.Element;
+  static Item: (props: DrawerListItemProps) => JSX.Element;
   render(): JSX.Element;
 }
 export type ItemContentChildren =
   | React.ReactNode
   | Record<string, unknown>;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface ItemContentProps {
   hash?: string;
   children?: ItemContentChildren;

package/fragments/drawer-list/DrawerListPortal.d.ts

@@ -1,25 +1,13 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DrawerListPortalInnerRef {
   current?: React.ReactNode | Record<string, unknown>;
 }
 export type DrawerListPortalCurrent =
   | React.ReactNode
   | Record<string, unknown>;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DrawerListPortalRootRef {
   current?: React.ReactNode | Record<string, unknown>;
 }
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DrawerListPortalProps
   extends React.HTMLProps<HTMLElement> {
   id: string;

package/fragments/drawer-list/DrawerListProvider.d.ts

@@ -1,17 +1,11 @@
 import * as React from 'react';
-export type DrawerListProviderScrollable = string | boolean;
-export type DrawerListProviderFocusable = string | boolean;
+import type { SpacingProps } from '../../shared/types';
 export type DrawerListProviderDirection = 'auto' | 'top' | 'bottom';
 export type DrawerListProviderSize =
   | 'default'
   | 'small'
   | 'medium'
   | 'large';
-export type DrawerListProviderNoAnimation = string | boolean;
-export type DrawerListProviderNoScrollAnimation = string | boolean;
-export type DrawerListProviderPreventSelection = string | boolean;
-export type DrawerListProviderActionMenu = string | boolean;
-export type DrawerListProviderIsPopup = string | boolean;
 export type DrawerListProviderAlignDrawer = 'left' | 'right';
 export type DrawerListProviderOptionsRender =
   | Record<string, unknown>
@@ -23,14 +17,6 @@ export type DrawerListProviderWrapperElement =
   | React.ReactNode;
 export type DrawerListProviderDefaultValue = string | number;
 export type DrawerListProviderValue = string | number;
-export type DrawerListProviderSkipPortal = string | boolean;
-export type DrawerListProviderPreventClose = string | boolean;
-export type DrawerListProviderIndependentWidth = string | boolean;
-export type DrawerListProviderFixedPosition = string | boolean;
-export type DrawerListProviderKeepOpen = string | boolean;
-export type DrawerListProviderPreventFocus = string | boolean;
-export type DrawerListProviderSkipKeysearch = string | boolean;
-export type DrawerListProviderOpened = string | boolean;
 export type DrawerListProviderData =
   | string
   | ((...args: any[]) => any)
@@ -55,59 +41,41 @@ export type DrawerListProviderRawData =
   | any[]
   | Record<string, unknown>
   | ((...args: any[]) => any);
-export type DrawerListProviderIgnoreEvents = string | boolean;
-export type DrawerListProviderSpace =
-  | string
-  | number
-  | boolean
-  | {
-      top?: string | number | boolean;
-      right?: string | number | boolean;
-      bottom?: string | number | boolean;
-      left?: string | number | boolean;
-    };
-export type DrawerListProviderTop = string | number | boolean;
-export type DrawerListProviderRight = string | number | boolean;
-export type DrawerListProviderBottom = string | number | boolean;
-export type DrawerListProviderLeft = string | number | boolean;
 export type DrawerListProviderPageOffset = string | number;
 export type DrawerListProviderObserverElement = string | React.ReactNode;
 export type DrawerListProviderMinHeight = string | number;
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface DrawerListProviderProps
-  extends React.HTMLProps<HTMLElement> {
+  extends React.HTMLProps<HTMLElement>,
+    SpacingProps {
   id?: string;
   role?: string;
   cache_hash?: string;
   triangle_position?: string;
-  scrollable?: DrawerListProviderScrollable;
-  focusable?: DrawerListProviderFocusable;
+  scrollable?: boolean;
+  focusable?: boolean;
   direction?: DrawerListProviderDirection;
   size?: DrawerListProviderSize;
   max_height?: number;
-  no_animation?: DrawerListProviderNoAnimation;
-  no_scroll_animation?: DrawerListProviderNoScrollAnimation;
-  prevent_selection?: DrawerListProviderPreventSelection;
-  action_menu?: DrawerListProviderActionMenu;
-  is_popup?: DrawerListProviderIsPopup;
+  no_animation?: boolean;
+  no_scroll_animation?: boolean;
+  prevent_selection?: boolean;
+  action_menu?: boolean;
+  is_popup?: boolean;
   align_drawer?: DrawerListProviderAlignDrawer;
   options_render?: DrawerListProviderOptionsRender;
   wrapper_element?: DrawerListProviderWrapperElement;
   default_value?: DrawerListProviderDefaultValue;
   value?: DrawerListProviderValue;
-  skip_portal?: DrawerListProviderSkipPortal;
+  skip_portal?: boolean;
   portal_class?: string;
   list_class?: string;
-  prevent_close?: DrawerListProviderPreventClose;
-  independent_width?: DrawerListProviderIndependentWidth;
-  fixed_position?: DrawerListProviderFixedPosition;
-  keep_open?: DrawerListProviderKeepOpen;
-  prevent_focus?: DrawerListProviderPreventFocus;
-  skip_keysearch?: DrawerListProviderSkipKeysearch;
-  opened?: DrawerListProviderOpened;
+  prevent_close?: boolean;
+  independent_width?: boolean;
+  fixed_position?: boolean;
+  keep_open?: boolean;
+  prevent_focus?: boolean;
+  skip_keysearch?: boolean;
+  opened?: boolean;
   class?: string;
   data?: DrawerListProviderData;
   selected_value?: DrawerListProviderSelectedValue;
@@ -115,12 +83,7 @@ export interface DrawerListProviderProps
   content?: DrawerListProviderContent;
   prepared_data?: any[];
   raw_data?: DrawerListProviderRawData;
-  ignore_events?: DrawerListProviderIgnoreEvents;
-  space?: DrawerListProviderSpace;
-  top?: DrawerListProviderTop;
-  right?: DrawerListProviderRight;
-  bottom?: DrawerListProviderBottom;
-  left?: DrawerListProviderLeft;
+  ignore_events?: boolean;
   className?: string;
   on_show?: (...args: any[]) => any;
   on_hide?: (...args: any[]) => any;

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

@@ -3,7 +3,7 @@
  *
  */
 import React from 'react';
-import { SpacingProps } from '../../shared/types';
+import type { SpacingProps } from '../../shared/types';
 export declare type ScrollViewProps = {
     /**
      * To make the content accessible to keyboard navigation. Use `true` or `auto`. Auto will detect if a scrollbar is visible and make the ScrollView accessible for keyboard navigation.

package/fragments/scroll-view/ScrollView.js

@@ -12,6 +12,7 @@ import classnames from 'classnames';
 import { extendPropsWithContext, validateDOMAttributes } from '../../shared/component-helper';
 import Context from '../../shared/Context';
 import { createSpacingClasses } from '../../components/space/SpacingHelper';
+const useLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 const defaultProps = {
   children: null
 };
@@ -50,12 +51,12 @@ function useInteractive(_ref) {
     ref
   } = _ref;
   const [isInteractive, setAsInteractive] = React.useState(Boolean(interactive));
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (interactive === 'auto') {
       setAsInteractive(hasScrollbar());
     }
   }, [interactive, children]);
-  React.useLayoutEffect(() => {
+  useLayoutEffect(() => {
     if (interactive === 'auto' && typeof ResizeObserver !== 'undefined') {
       const observer = new ResizeObserver(() => {
         setAsInteractive(hasScrollbar());

package/fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss

@@ -5,8 +5,10 @@
 
 @import '../../../../style/core/utilities.scss';
 
-// :root {
-// }
-
-// .dnb-scroll-view {
-// }
+:root {
+  --scrollbar-track-width: 0.5rem;
+  --scrollbar-thumb-width: 0.5rem;
+  --scrollbar-track-color: var(--color-black-8);
+  --scrollbar-thumb-color: var(--color-sea-green);
+  --scrollbar-thumb-hover-color: var(--color-emerald-green);
+}

package/package.json

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

package/shared/AlignmentHelper.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-/**
- * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
- */
-
 export interface AlignmentHelperProps
   extends React.HTMLProps<HTMLElement> {
   children?: React.ReactNode;