@dnb/eufemia 10.18.0 → 10.20.0

package/cjs/components/aria-live/useAriaLive.d.ts

@@ -0,0 +1,273 @@
+import React from 'react';
+import { AriaLiveAllProps } from './types';
+export default function useAriaLive(props: AriaLiveAllProps): {
+    element?: React.ElementType<any>;
+    defaultChecked?: boolean;
+    defaultValue?: string | number | readonly string[];
+    suppressContentEditableWarning?: boolean;
+    suppressHydrationWarning?: boolean;
+    accessKey?: string;
+    autoFocus?: boolean;
+    contentEditable?: "inherit" | (boolean | "true" | "false");
+    contextMenu?: string;
+    dir?: string;
+    draggable?: boolean | "true" | "false";
+    hidden?: boolean;
+    id?: string;
+    lang?: string;
+    nonce?: string;
+    placeholder?: string;
+    slot?: string;
+    spellCheck?: boolean | "true" | "false";
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    title?: string;
+    translate?: "yes" | "no";
+    radioGroup?: string;
+    role?: React.AriaRole;
+    about?: string;
+    content?: string;
+    datatype?: string;
+    inlist?: any;
+    prefix?: string;
+    property?: string;
+    rel?: string;
+    resource?: string;
+    rev?: string;
+    typeof?: string;
+    vocab?: string;
+    autoCapitalize?: string;
+    autoCorrect?: string;
+    autoSave?: string;
+    color?: string;
+    itemProp?: string;
+    itemScope?: boolean;
+    itemType?: string;
+    itemID?: string;
+    itemRef?: string;
+    results?: number;
+    security?: string;
+    unselectable?: "off" | "on";
+    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+    is?: string;
+    'aria-activedescendant'?: string;
+    'aria-atomic': boolean | "true" | "false";
+    'aria-autocomplete'?: "none" | "list" | "inline" | "both";
+    'aria-braillelabel'?: string;
+    'aria-brailleroledescription'?: string;
+    'aria-busy'?: boolean | "true" | "false";
+    'aria-checked'?: boolean | "true" | "false" | "mixed";
+    'aria-colcount'?: number;
+    'aria-colindex'?: number;
+    'aria-colindextext'?: string;
+    'aria-colspan'?: number;
+    'aria-controls'?: string;
+    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date";
+    'aria-describedby'?: string;
+    'aria-description'?: string;
+    'aria-details'?: string;
+    'aria-disabled'?: boolean | "true" | "false";
+    'aria-dropeffect'?: "link" | "copy" | "none" | "execute" | "move" | "popup";
+    'aria-errormessage'?: string;
+    'aria-expanded'?: boolean | "true" | "false";
+    'aria-flowto'?: string;
+    'aria-grabbed'?: boolean | "true" | "false";
+    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree";
+    'aria-hidden'?: boolean | "true" | "false";
+    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
+    'aria-keyshortcuts'?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-level'?: number;
+    'aria-live': "off" | "assertive" | "polite";
+    'aria-modal'?: boolean | "true" | "false";
+    'aria-multiline'?: boolean | "true" | "false";
+    'aria-multiselectable'?: boolean | "true" | "false";
+    'aria-orientation'?: "horizontal" | "vertical";
+    'aria-owns'?: string;
+    'aria-placeholder'?: string;
+    'aria-posinset'?: number;
+    'aria-pressed'?: boolean | "true" | "false" | "mixed";
+    'aria-readonly'?: boolean | "true" | "false";
+    'aria-relevant': "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    'aria-required'?: boolean | "true" | "false";
+    'aria-roledescription'?: string;
+    'aria-rowcount'?: number;
+    'aria-rowindex'?: number;
+    'aria-rowindextext'?: string;
+    'aria-rowspan'?: number;
+    'aria-selected'?: boolean | "true" | "false";
+    'aria-setsize'?: number;
+    'aria-sort'?: "other" | "none" | "ascending" | "descending";
+    'aria-valuemax'?: number;
+    'aria-valuemin'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    };
+    onCopy?: React.ClipboardEventHandler<HTMLElement>;
+    onCopyCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onCut?: React.ClipboardEventHandler<HTMLElement>;
+    onCutCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onPaste?: React.ClipboardEventHandler<HTMLElement>;
+    onPasteCapture?: React.ClipboardEventHandler<HTMLElement>;
+    onCompositionEnd?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionEndCapture?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionStart?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionStartCapture?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionUpdate?: React.CompositionEventHandler<HTMLElement>;
+    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLElement>;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onFocusCapture?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    onBlurCapture?: React.FocusEventHandler<HTMLElement>;
+    onChange?: React.FormEventHandler<HTMLElement>;
+    onChangeCapture?: React.FormEventHandler<HTMLElement>;
+    onBeforeInput?: React.FormEventHandler<HTMLElement>;
+    onBeforeInputCapture?: React.FormEventHandler<HTMLElement>;
+    onInput?: React.FormEventHandler<HTMLElement>;
+    onInputCapture?: React.FormEventHandler<HTMLElement>;
+    onReset?: React.FormEventHandler<HTMLElement>;
+    onResetCapture?: React.FormEventHandler<HTMLElement>;
+    onSubmit?: React.FormEventHandler<HTMLElement>;
+    onSubmitCapture?: React.FormEventHandler<HTMLElement>;
+    onInvalid?: React.FormEventHandler<HTMLElement>;
+    onInvalidCapture?: React.FormEventHandler<HTMLElement>;
+    onLoad?: React.ReactEventHandler<HTMLElement>;
+    onLoadCapture?: React.ReactEventHandler<HTMLElement>;
+    onError?: React.ReactEventHandler<HTMLElement>;
+    onErrorCapture?: React.ReactEventHandler<HTMLElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyPressCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
+    onKeyUpCapture?: React.KeyboardEventHandler<HTMLElement>;
+    onAbort?: React.ReactEventHandler<HTMLElement>;
+    onAbortCapture?: React.ReactEventHandler<HTMLElement>;
+    onCanPlay?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayCapture?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayThrough?: React.ReactEventHandler<HTMLElement>;
+    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLElement>;
+    onDurationChange?: React.ReactEventHandler<HTMLElement>;
+    onDurationChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onEmptied?: React.ReactEventHandler<HTMLElement>;
+    onEmptiedCapture?: React.ReactEventHandler<HTMLElement>;
+    onEncrypted?: React.ReactEventHandler<HTMLElement>;
+    onEncryptedCapture?: React.ReactEventHandler<HTMLElement>;
+    onEnded?: React.ReactEventHandler<HTMLElement>;
+    onEndedCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadedData?: React.ReactEventHandler<HTMLElement>;
+    onLoadedDataCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLElement>;
+    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLElement>;
+    onLoadStart?: React.ReactEventHandler<HTMLElement>;
+    onLoadStartCapture?: React.ReactEventHandler<HTMLElement>;
+    onPause?: React.ReactEventHandler<HTMLElement>;
+    onPauseCapture?: React.ReactEventHandler<HTMLElement>;
+    onPlay?: React.ReactEventHandler<HTMLElement>;
+    onPlayCapture?: React.ReactEventHandler<HTMLElement>;
+    onPlaying?: React.ReactEventHandler<HTMLElement>;
+    onPlayingCapture?: React.ReactEventHandler<HTMLElement>;
+    onProgress?: React.ReactEventHandler<HTMLElement>;
+    onProgressCapture?: React.ReactEventHandler<HTMLElement>;
+    onRateChange?: React.ReactEventHandler<HTMLElement>;
+    onRateChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onResize?: React.ReactEventHandler<HTMLElement>;
+    onResizeCapture?: React.ReactEventHandler<HTMLElement>;
+    onSeeked?: React.ReactEventHandler<HTMLElement>;
+    onSeekedCapture?: React.ReactEventHandler<HTMLElement>;
+    onSeeking?: React.ReactEventHandler<HTMLElement>;
+    onSeekingCapture?: React.ReactEventHandler<HTMLElement>;
+    onStalled?: React.ReactEventHandler<HTMLElement>;
+    onStalledCapture?: React.ReactEventHandler<HTMLElement>;
+    onSuspend?: React.ReactEventHandler<HTMLElement>;
+    onSuspendCapture?: React.ReactEventHandler<HTMLElement>;
+    onTimeUpdate?: React.ReactEventHandler<HTMLElement>;
+    onTimeUpdateCapture?: React.ReactEventHandler<HTMLElement>;
+    onVolumeChange?: React.ReactEventHandler<HTMLElement>;
+    onVolumeChangeCapture?: React.ReactEventHandler<HTMLElement>;
+    onWaiting?: React.ReactEventHandler<HTMLElement>;
+    onWaitingCapture?: React.ReactEventHandler<HTMLElement>;
+    onAuxClick?: React.MouseEventHandler<HTMLElement>;
+    onAuxClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    onClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onContextMenu?: React.MouseEventHandler<HTMLElement>;
+    onContextMenuCapture?: React.MouseEventHandler<HTMLElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLElement>;
+    onDoubleClickCapture?: React.MouseEventHandler<HTMLElement>;
+    onDrag?: React.DragEventHandler<HTMLElement>;
+    onDragCapture?: React.DragEventHandler<HTMLElement>;
+    onDragEnd?: React.DragEventHandler<HTMLElement>;
+    onDragEndCapture?: React.DragEventHandler<HTMLElement>;
+    onDragEnter?: React.DragEventHandler<HTMLElement>;
+    onDragEnterCapture?: React.DragEventHandler<HTMLElement>;
+    onDragExit?: React.DragEventHandler<HTMLElement>;
+    onDragExitCapture?: React.DragEventHandler<HTMLElement>;
+    onDragLeave?: React.DragEventHandler<HTMLElement>;
+    onDragLeaveCapture?: React.DragEventHandler<HTMLElement>;
+    onDragOver?: React.DragEventHandler<HTMLElement>;
+    onDragOverCapture?: React.DragEventHandler<HTMLElement>;
+    onDragStart?: React.DragEventHandler<HTMLElement>;
+    onDragStartCapture?: React.DragEventHandler<HTMLElement>;
+    onDrop?: React.DragEventHandler<HTMLElement>;
+    onDropCapture?: React.DragEventHandler<HTMLElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    onMouseDownCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
+    onMouseMove?: React.MouseEventHandler<HTMLElement>;
+    onMouseMoveCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseOut?: React.MouseEventHandler<HTMLElement>;
+    onMouseOutCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseOver?: React.MouseEventHandler<HTMLElement>;
+    onMouseOverCapture?: React.MouseEventHandler<HTMLElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLElement>;
+    onMouseUpCapture?: React.MouseEventHandler<HTMLElement>;
+    onSelect?: React.ReactEventHandler<HTMLElement>;
+    onSelectCapture?: React.ReactEventHandler<HTMLElement>;
+    onTouchCancel?: React.TouchEventHandler<HTMLElement>;
+    onTouchCancelCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchEnd?: React.TouchEventHandler<HTMLElement>;
+    onTouchEndCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchMove?: React.TouchEventHandler<HTMLElement>;
+    onTouchMoveCapture?: React.TouchEventHandler<HTMLElement>;
+    onTouchStart?: React.TouchEventHandler<HTMLElement>;
+    onTouchStartCapture?: React.TouchEventHandler<HTMLElement>;
+    onPointerDown?: React.PointerEventHandler<HTMLElement>;
+    onPointerDownCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerMove?: React.PointerEventHandler<HTMLElement>;
+    onPointerMoveCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerUp?: React.PointerEventHandler<HTMLElement>;
+    onPointerUpCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerCancel?: React.PointerEventHandler<HTMLElement>;
+    onPointerCancelCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement>;
+    onPointerEnterCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeaveCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerOver?: React.PointerEventHandler<HTMLElement>;
+    onPointerOverCapture?: React.PointerEventHandler<HTMLElement>;
+    onPointerOut?: React.PointerEventHandler<HTMLElement>;
+    onPointerOutCapture?: React.PointerEventHandler<HTMLElement>;
+    onGotPointerCapture?: React.PointerEventHandler<HTMLElement>;
+    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+    onLostPointerCapture?: React.PointerEventHandler<HTMLElement>;
+    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLElement>;
+    onScroll?: React.UIEventHandler<HTMLElement>;
+    onScrollCapture?: React.UIEventHandler<HTMLElement>;
+    onWheel?: React.WheelEventHandler<HTMLElement>;
+    onWheelCapture?: React.WheelEventHandler<HTMLElement>;
+    onAnimationStart?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationStartCapture?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationEndCapture?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationIteration?: React.AnimationEventHandler<HTMLElement>;
+    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLElement>;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
+    onTransitionEndCapture?: React.TransitionEventHandler<HTMLElement>;
+    className: string;
+    children: React.ReactNode;
+};

package/cjs/components/aria-live/useAriaLive.js

@@ -0,0 +1,84 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useAriaLive;
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _componentHelper = require("../../shared/component-helper");
+const _excluded = ["disabled", "delay", "atomic", "politeness", "relevant", "className", "children", "showAnnouncement", "variant", "priority"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const variantConfig = {
+  text: {
+    delay: 1000,
+    atomic: true,
+    showAnnouncement: false
+  },
+  content: {
+    delay: -1,
+    atomic: false,
+    showAnnouncement: true
+  }
+};
+const priorityConfig = {
+  low: {
+    politeness: 'polite'
+  },
+  high: {
+    politeness: 'assertive'
+  }
+};
+function useAriaLive(props) {
+  const [announcement, setAnnouncement] = (0, _react.useState)('');
+  const timeoutRef = (0, _react.useRef)(null);
+  const _extendPropsWithConte = (0, _componentHelper.extendPropsWithContext)(props, variantConfig[props.variant || 'text'], priorityConfig[props.priority || 'low']),
+    {
+      disabled = false,
+      delay,
+      atomic,
+      politeness,
+      relevant,
+      className,
+      children,
+      showAnnouncement,
+      variant,
+      priority
+    } = _extendPropsWithConte,
+    rest = _objectWithoutProperties(_extendPropsWithConte, _excluded);
+  const showTextAnnouncement = delay > -1;
+  (0, _react.useEffect)(() => {
+    if (showTextAnnouncement) {
+      var _ref;
+      setAnnouncement('');
+      const isTest = process.env.NODE_ENV === 'test';
+      const timer = setTimeout(() => {
+        if (!disabled) {
+          setAnnouncement(children);
+        }
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setAnnouncement(''), isTest ? 100 : delay + 1000);
+      }, (_ref = isTest ? 0 : delay) !== null && _ref !== void 0 ? _ref : 1000);
+      return () => {
+        clearTimeout(timer);
+        clearTimeout(timeoutRef.current);
+      };
+    }
+  }, [delay, children, disabled, showTextAnnouncement]);
+  return _objectSpread({
+    'aria-live': disabled && !showTextAnnouncement ? 'off' : politeness,
+    'aria-atomic': atomic,
+    'aria-relevant': relevant,
+    className: (0, _classnames.default)('dnb-aria-live', className, !showAnnouncement && 'dnb-sr-only'),
+    children: showTextAnnouncement ? announcement : children
+  }, rest);
+}
+//# sourceMappingURL=useAriaLive.js.map

package/cjs/components/aria-live/useAriaLive.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAriaLive.js","names":["_react","require","_classnames","_interopRequireDefault","_componentHelper","_excluded","obj","__esModule","default","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","sourceSymbolKeys","indexOf","prototype","propertyIsEnumerable","sourceKeys","variantConfig","text","delay","atomic","showAnnouncement","content","priorityConfig","low","politeness","high","useAriaLive","props","announcement","setAnnouncement","useState","timeoutRef","useRef","_extendPropsWithConte","extendPropsWithContext","variant","priority","disabled","relevant","className","children","rest","showTextAnnouncement","useEffect","_ref","isTest","process","env","NODE_ENV","timer","setTimeout","clearTimeout","current","classnames"],"sources":["../../../../src/components/aria-live/useAriaLive.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\nimport classnames from 'classnames'\nimport { AriaLiveAllProps } from './types'\nimport { extendPropsWithContext } from '../../shared/component-helper'\n\nconst variantConfig: {\n  [key: string]: {\n    delay: AriaLiveAllProps['delay']\n    showAnnouncement: AriaLiveAllProps['showAnnouncement']\n    atomic?: AriaLiveAllProps['atomic']\n  }\n} = {\n  text: {\n    delay: 1000,\n    atomic: true,\n    showAnnouncement: false,\n  },\n  content: {\n    delay: -1,\n    atomic: false,\n    showAnnouncement: true,\n  },\n}\n\nconst priorityConfig: {\n  [key: string]: {\n    politeness: AriaLiveAllProps['politeness']\n  }\n} = {\n  low: {\n    politeness: 'polite',\n  },\n  high: {\n    politeness: 'assertive',\n  },\n}\n\nexport default function useAriaLive(props: AriaLiveAllProps) {\n  const [announcement, setAnnouncement] = useState<React.ReactNode>('')\n  const timeoutRef = useRef(null)\n\n  const {\n    disabled = false,\n    delay,\n    atomic,\n    politeness,\n    relevant,\n    className,\n    children,\n    showAnnouncement,\n    variant, // eslint-disable-line\n    priority, // eslint-disable-line\n    ...rest\n  } = extendPropsWithContext(\n    props,\n    variantConfig[props.variant || 'text'],\n    priorityConfig[props.priority || 'low']\n  )\n\n  const showTextAnnouncement = delay > -1\n\n  useEffect(() => {\n    if (showTextAnnouncement) {\n      setAnnouncement('')\n\n      const isTest = process.env.NODE_ENV === 'test'\n      const timer = setTimeout(\n        () => {\n          if (!disabled) {\n            setAnnouncement(children)\n          }\n\n          clearTimeout(timeoutRef.current)\n          timeoutRef.current = setTimeout(\n            () => setAnnouncement(''),\n            isTest ? 100 : delay + 1000\n          )\n        },\n        (isTest ? 0 : delay) ?? 1000\n      )\n\n      return () => {\n        clearTimeout(timer)\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [delay, children, disabled, showTextAnnouncement])\n\n  return {\n    'aria-live': disabled && !showTextAnnouncement ? 'off' : politeness,\n    'aria-atomic': atomic,\n    'aria-relevant': relevant,\n    className: classnames(\n      'dnb-aria-live',\n      !showAnnouncement && 'dnb-sr-only',\n      className\n    ),\n    children: showTextAnnouncement ? announcement : children,\n    ...rest,\n  }\n}\n"],"mappings":"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"}

package/cjs/components/autocomplete/Autocomplete.d.ts

@@ -210,7 +210,6 @@ export interface AutocompleteProps
    * Define a custom class for the internal drawer-list. This makes it possible more easily customize the drawer-list style with styled-components and the `css` style method. Defaults to `null`.
    */
   drawer_class?: string;
-  ariaLiveDelay?: number;
   /**
    * Will be called for every key change the users makes. Returns an object with the input `value` inside `{ value, event, attributes }` including <a href="/uilib/components/autocomplete/events#dynamically-change-data">these methods</a>.
    */

package/cjs/components/autocomplete/Autocomplete.js

@@ -14,6 +14,7 @@ var _AlignmentHelper2 = _interopRequireDefault(require("../../shared/AlignmentHe
 var _SpacingHelper = require("../space/SpacingHelper");
 var _filterValidProps = require("../../shared/helpers/filterValidProps");
 var _Suffix = _interopRequireDefault(require("../../shared/helpers/Suffix"));
+var _AriaLive = _interopRequireDefault(require("../aria-live/AriaLive"));
 var _FormLabel = _interopRequireDefault(require("../form-label/FormLabel"));
 var _FormStatus = _interopRequireDefault(require("../form-status/FormStatus"));
 var _IconPrimary2 = _interopRequireDefault(require("../icon-primary/IconPrimary"));
@@ -25,7 +26,7 @@ var _DrawerListProvider = _interopRequireDefault(require("../../fragments/drawer
 var _DrawerListHelpers = require("../../fragments/drawer-list/DrawerListHelpers");
 var _IconPrimary, _AlignmentHelper;
 const _excluded = ["fillDataIfEmpty"],
-  _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "independent_width", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting", "ariaLiveDelay"];
+  _excluded2 = ["title", "placeholder", "label", "label_direction", "label_sr_only", "icon", "icon_size", "input_icon", "size", "align_autocomplete", "fixed_position", "status", "status_state", "status_props", "status_no_animation", "globalStatus", "suffix", "scrollable", "focusable", "keep_open", "keep_value", "keep_value_and_selection", "show_clear_button", "prevent_close", "no_animation", "no_scroll_animation", "show_submit_button", "submit_element", "input_element", "options_render", "prevent_selection", "max_height", "default_value", "search_numbers", "search_in_word_index", "show_options_sr", "selected_sr", "submit_button_title", "submit_button_icon", "portal_class", "drawer_class", "input_ref", "className", "class", "disabled", "stretch", "skeleton", "triangle_position", "icon_position", "skip_portal", "independent_width", "mode", "data", "children", "direction", "id", "opened", "value", "input_value", "indicator_label", "no_options", "show_all", "aria_live_options", "disable_highlighting"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -126,7 +127,6 @@ _defineProperty(Autocomplete, "defaultProps", {
   class: null,
   className: null,
   children: null,
-  ariaLiveDelay: null,
   on_show: null,
   on_hide: null,
   on_type: null,
@@ -216,7 +216,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes = _objectSpread(_
   class: _propTypes.default.string,
   className: _propTypes.default.string,
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.node, _propTypes.default.object, _propTypes.default.array]),
-  ariaLiveDelay: _propTypes.default.number,
   on_show: _propTypes.default.func,
   on_type: _propTypes.default.func,
   on_focus: _propTypes.default.func,
@@ -376,7 +375,6 @@ class AutocompleteInstance extends _react.default.PureComponent {
       }
       if (_this.state.hasFocus) {
         _this.setVisible();
-        _this.setAriaLiveUpdate();
       }
       return data;
     });
@@ -404,7 +402,6 @@ class AutocompleteInstance extends _react.default.PureComponent {
       _this.context.drawerList.setState({
         cache_hash: value + _this.countData(data)
       });
-      _this.setAriaLiveUpdate();
       return data;
     });
     _defineProperty(this, "wrapWithShowAll", data => {
@@ -1193,7 +1190,6 @@ class AutocompleteInstance extends _react.default.PureComponent {
   }
   componentWillUnmount() {
     clearTimeout(this._selectTimeout);
-    clearTimeout(this._ariaLiveUpdateTimeout);
     clearTimeout(this._focusTimeout);
     clearTimeout(this._blurTimeout);
   }
@@ -1224,39 +1220,25 @@ class AutocompleteInstance extends _react.default.PureComponent {
       });
     });
   }
-  setAriaLiveUpdate() {
+  getAriaLiveUpdate() {
     const {
       opened
     } = this.context.drawerList;
-    const {
-      aria_live_options,
-      no_options,
-      ariaLiveDelay = 1000
-    } = this._props;
-    clearTimeout(this._ariaLiveUpdateTimeout);
     if (opened) {
-      this._ariaLiveUpdateTimeout = setTimeout(() => {
-        let newString = null;
-        const count = this.countData();
-        if (count > 0) {
-          newString = String(aria_live_options).replace('%s', count);
-        } else {
-          newString = no_options;
-        }
-        if (newString) {
-          this.setState({
-            ariaLiveUpdate: newString,
-            _listenForPropChanges: false
-          });
-          this._ariaLiveUpdateTimeout = setTimeout(() => {
-            this.setState({
-              ariaLiveUpdate: null,
-              _listenForPropChanges: false
-            });
-          }, 1000);
-        }
-      }, ariaLiveDelay);
+      const {
+        aria_live_options,
+        no_options
+      } = this._props;
+      const count = this.countData();
+      let newString = null;
+      if (count > 0) {
+        newString = String(aria_live_options).replace('%s', count);
+      } else {
+        newString = no_options;
+      }
+      return newString;
     }
+    return '';
   }
   getVoiceOverActiveItem(selected_sr) {
     const {
@@ -1264,11 +1246,10 @@ class AutocompleteInstance extends _react.default.PureComponent {
       selected_item
     } = this.context.drawerList;
     const currentDataItem = (0, _DrawerListHelpers.getCurrentData)(active_item, this.context.drawerList.data);
-    return _react.default.createElement("span", {
+    return _react.default.createElement(_AriaLive.default, {
       hidden: !_helpers.IS_MAC,
-      className: "dnb-sr-only",
-      "aria-live": "assertive",
-      "aria-atomic": true
+      priority: "hight",
+      delay: 0
     }, currentDataItem && _react.default.createElement(_react.default.Fragment, null, active_item === selected_item ? _react.default.createElement(_react.default.Fragment, null, selected_sr, " ") : null, _react.default.createElement(_DrawerList.ItemContent, null, currentDataItem)));
   }
   render() {
@@ -1338,16 +1319,14 @@ class AutocompleteInstance extends _react.default.PureComponent {
         no_options,
         show_all,
         aria_live_options,
-        disable_highlighting,
-        ariaLiveDelay
+        disable_highlighting
       } = props,
       attributes = _objectWithoutProperties(props, _excluded2);
     const id = this._id;
     const showStatus = (0, _componentHelper.getStatusState)(status);
     const {
       inputValue,
-      visibleIndicator,
-      ariaLiveUpdate
+      visibleIndicator
     } = this.state;
     const {
       hidden,
@@ -1521,10 +1500,9 @@ class AutocompleteInstance extends _react.default.PureComponent {
       className: "dnb-autocomplete__suffix",
       id: id + '-suffix',
       context: props
-    }, suffix))), this.getVoiceOverActiveItem(selected_sr), _react.default.createElement("span", {
-      className: "dnb-sr-only",
-      "aria-live": "assertive"
-    }, ariaLiveUpdate));
+    }, suffix))), this.getVoiceOverActiveItem(selected_sr), _react.default.createElement(_AriaLive.default, {
+      priority: "hight"
+    }, this.getAriaLiveUpdate()));
   }
 }
 _defineProperty(AutocompleteInstance, "defaultProps", Autocomplete.defaultProps);