@momentum-design/components 0.46.1 → 0.47.0

package/dist/index.d.ts

@@ -36,6 +36,7 @@ import Textarea from './components/textarea';
 import Searchfield from './components/searchfield';
 import Brandvisual from './components/brandvisual';
 import Appheader from './components/appheader';
+import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.types';
 import type { TextType } from './components/text/text.types';
 import type { PopoverPlacement } from './components/popover/popover.types';
@@ -43,6 +44,6 @@ import type { BadgeType } from './components/badge/badge.types';
 import type { IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor } from './components/button/button.types';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
 export type { TextType, SpinnerSize, SpinnerVariant, PopoverPlacement, BadgeType, IconButtonSize, PillButtonSize, ButtonVariant, ButtonColor, };
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/index.js

@@ -37,10 +37,11 @@ import Textarea from './components/textarea';
 import Searchfield from './components/searchfield';
 import Brandvisual from './components/brandvisual';
 import Appheader from './components/appheader';
+import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Components Exports
-export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
+export { AlertChip, Avatar, AvatarButton, Badge, Bullet, Button, Checkbox, Chip, Coachmark, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Input, InputChip, Link, List, ListItem, Marker, Popover, Presence, Radio, RadioGroup, Spinner, Tab, Text, ThemeProvider, Toggle, VirtualizedList, Option, OptGroup, Progressbar, ScreenreaderAnnouncer, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/index.d.ts

@@ -1,12 +1,12 @@
 export { default as AlertChip } from './alertchip';
-export { default as Avatar } from './avatar';
 export { default as Appheader } from './appheader';
+export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
-export { default as Button } from './button';
-export { default as Buttonsimple } from './buttonsimple';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
+export { default as Button } from './button';
+export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
@@ -29,6 +29,7 @@ export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
+export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';

package/dist/react/index.js

@@ -1,12 +1,12 @@
 export { default as AlertChip } from './alertchip';
-export { default as Avatar } from './avatar';
 export { default as Appheader } from './appheader';
+export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
-export { default as Button } from './button';
-export { default as Buttonsimple } from './buttonsimple';
 export { default as Brandvisual } from './brandvisual';
 export { default as Bullet } from './bullet';
+export { default as Button } from './button';
+export { default as Buttonsimple } from './buttonsimple';
 export { default as Checkbox } from './checkbox';
 export { default as Chip } from './chip';
 export { default as Coachmark } from './coachmark';
@@ -29,6 +29,7 @@ export { default as Presence } from './presence';
 export { default as Progressbar } from './progressbar';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
+export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Spinner } from './spinner';
 export { default as Tab } from './tab';

package/dist/react/screenreaderannouncer/index.d.ts

@@ -0,0 +1,34 @@
+import Component from '../../components/screenreaderannouncer';
+/**
+ * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.
+ *
+ * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.
+ *
+ * **Internal logic**
+ *
+ * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not
+ * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created
+ * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element
+ * is created in the DOM.
+ *
+ * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with
+ * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.
+ * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.
+ *
+ * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.
+ *
+ * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and
+ * all the announcement elements added are removed from the DOM and timeouts cleared.
+ *
+ * **Note**
+ * 1. The default delay of 150 miliseconds is used as we dynamically generate the
+ * aria-live region in the DOM and add the announcement text to it.
+ * 3. If no `identity` is provided, all the screen reader components will create and use only one
+ * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.
+ *
+ * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/
+ *
+ * @tagname mdc-screenreaderannouncer
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/screenreaderannouncer/index.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/screenreaderannouncer';
+import { TAG_NAME } from '../../components/screenreaderannouncer/screenreaderannouncer.constants';
+/**
+ * `mdc-screenreaderannouncer` can be used to announce messages with the screen reader.
+ *
+ * To make an announcement set `announcement` attribute on the `mdc-screenreaderannouncer` element.
+ *
+ * **Internal logic**
+ *
+ * When the screenreader announcer is connected to the DOM, if the `identity` attribute is not
+ * provided, it is set to `mdc-screenreaderannouncer-identity` and a `<div>` element with this id is created
+ * in the DOM. If the `identity` attribute is provided, the identity element is used and no new element
+ * is created in the DOM.
+ *
+ * When the `announcement` attribute is set, the screenreader announcer will create a `<div>` element with
+ * `aria-live` attribute set to the value of `data-aria-live` attribute and append it to the `identity` element.
+ * After delay of `delay` milliseconds, a <p> element with the announcement text is appended to the `<div>` element.
+ *
+ * The announcement `<div>` element is removed from the DOM after `timeout` milliseconds.
+ *
+ * When the screen announcer component is disconnected from the DOM, all the timeouts are cleared and
+ * all the announcement elements added are removed from the DOM and timeouts cleared.
+ *
+ * **Note**
+ * 1. The default delay of 150 miliseconds is used as we dynamically generate the
+ * aria-live region in the DOM and add the announcement text to it.
+ * 3. If no `identity` is provided, all the screen reader components will create and use only one
+ * `<div>` element with id `mdc-screenreaderannouncer-identity` in the DOM.
+ *
+ * Reference: https://patrickhlauke.github.io/aria/tests/live-regions/
+ *
+ * @tagname mdc-screenreaderannouncer
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'ScreenreaderAnnouncer',
+});
+export default reactWrapper;

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.46.1"
+  "version": "0.47.0"
 }