@momentum-design/components 0.125.0 → 0.126.0

package/dist/index.d.ts

@@ -54,6 +54,7 @@ import Progressbar from './components/progressbar';
 import Progressspinner from './components/progressspinner';
 import Radio from './components/radio';
 import RadioGroup from './components/radiogroup';
+import ResponsiveSettingsProvider from './components/responsivesettingsprovider';
 import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Searchpopover from './components/searchpopover';
@@ -102,6 +103,6 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 import type { TablistChangeEvent } from './components/tablist/tablist.types';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
 export type { BadgeType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/index.js

@@ -56,6 +56,7 @@ import Progressbar from './components/progressbar';
 import Progressspinner from './components/progressspinner';
 import Radio from './components/radio';
 import RadioGroup from './components/radiogroup';
+import ResponsiveSettingsProvider from './components/responsivesettingsprovider';
 import ScreenreaderAnnouncer from './components/screenreaderannouncer';
 import Searchfield from './components/searchfield';
 import Searchpopover from './components/searchpopover';
@@ -91,6 +92,6 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/react/index.d.ts

@@ -2,19 +2,19 @@ export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
+export { default as Animation } from './animation';
 export { default as AnnouncementDialog } from './announcementdialog';
 export { default as Appheader } from './appheader';
-export { default as Animation } from './animation';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
-export { default as Bullet } from './bullet';
 export { default as Button } from './button';
+export { default as Bullet } from './bullet';
 export { default as ButtonGroup } from './buttongroup';
-export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as ButtonLink } from './buttonlink';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
@@ -44,8 +44,8 @@ export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItem } from './menuitem';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
@@ -59,6 +59,7 @@ export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
+export { default as ResponsiveSettingsProvider } from './responsivesettingsprovider';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Searchpopover } from './searchpopover';
@@ -71,9 +72,9 @@ export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticChip } from './staticchip';
 export { default as StaticRadio } from './staticradio';
-export { default as StaticToggle } from './statictoggle';
 export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
+export { default as StaticToggle } from './statictoggle';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';

package/dist/react/index.js

@@ -2,19 +2,19 @@ export { default as Accordion } from './accordion';
 export { default as AccordionButton } from './accordionbutton';
 export { default as AccordionGroup } from './accordiongroup';
 export { default as AlertChip } from './alertchip';
+export { default as Animation } from './animation';
 export { default as AnnouncementDialog } from './announcementdialog';
 export { default as Appheader } from './appheader';
-export { default as Animation } from './animation';
 export { default as Avatar } from './avatar';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
-export { default as Bullet } from './bullet';
 export { default as Button } from './button';
+export { default as Bullet } from './bullet';
 export { default as ButtonGroup } from './buttongroup';
-export { default as ButtonLink } from './buttonlink';
 export { default as Buttonsimple } from './buttonsimple';
+export { default as ButtonLink } from './buttonlink';
 export { default as Card } from './card';
 export { default as CardButton } from './cardbutton';
 export { default as CardCheckbox } from './cardcheckbox';
@@ -44,8 +44,8 @@ export { default as Listheader } from './listheader';
 export { default as ListItem } from './listitem';
 export { default as Marker } from './marker';
 export { default as MenuBar } from './menubar';
-export { default as MenuItem } from './menuitem';
 export { default as MenuItemCheckbox } from './menuitemcheckbox';
+export { default as MenuItem } from './menuitem';
 export { default as MenuItemRadio } from './menuitemradio';
 export { default as MenuPopover } from './menupopover';
 export { default as MenuSection } from './menusection';
@@ -59,6 +59,7 @@ export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';
 export { default as RadioGroup } from './radiogroup';
+export { default as ResponsiveSettingsProvider } from './responsivesettingsprovider';
 export { default as ScreenreaderAnnouncer } from './screenreaderannouncer';
 export { default as Searchfield } from './searchfield';
 export { default as Searchpopover } from './searchpopover';
@@ -71,9 +72,9 @@ export { default as Spinner } from './spinner';
 export { default as StaticCheckbox } from './staticcheckbox';
 export { default as StaticChip } from './staticchip';
 export { default as StaticRadio } from './staticradio';
-export { default as StaticToggle } from './statictoggle';
 export { default as Stepper } from './stepper';
 export { default as StepperConnector } from './stepperconnector';
+export { default as StaticToggle } from './statictoggle';
 export { default as StepperItem } from './stepperitem';
 export { default as Tab } from './tab';
 export { default as TabList } from './tablist';

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

@@ -0,0 +1,35 @@
+import Component from '../../components/responsivesettingsprovider';
+/**
+ * `mdc-responsivesettingsprovider` is a provider component that supplies responsive settings
+ * context to its child components.
+ *
+ * This component does not make any assumptions about how the values are determined. Values can be set
+ * based on media queries or other device detection mechanisms.This way consumer can mix and match
+ * different settings depending on their target devices and use cases.
+ *
+ * For example, when the device has table screen size/resolution, but because it is fixed dialog like
+ * popovers provide better user experience.
+ *
+ * ## Responsive settings
+ *
+ * ### Media
+ *
+ * Generic media type to enforce responsive behavior in child components.
+ * Consumer component can use the media type from the context or
+ * just use CSS selector like [media="mobile"] to apply responsive styles.
+ *
+ * It is "unknown" by default so components can fall back to there default behavior.
+ *
+ * ### Popover Positioning
+ *
+ * By default, popovers are positioned close to the trigger element. But on small screens (e.g.: mobile devices),
+ * it is often better to show popovers/menus at the center of the screen like dialogs.
+ *
+ * ### Force Fullscreen Dialog
+ *
+ * Some components like dialogs can be shown in fullscreen mode on small screens for better user experience.
+ *
+ * @tagname mdc-responsivesettingsprovider
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/responsivesettingsprovider/index.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/responsivesettingsprovider';
+import { TAG_NAME } from '../../components/responsivesettingsprovider/responsivesettingsprovider.constants';
+/**
+ * `mdc-responsivesettingsprovider` is a provider component that supplies responsive settings
+ * context to its child components.
+ *
+ * This component does not make any assumptions about how the values are determined. Values can be set
+ * based on media queries or other device detection mechanisms.This way consumer can mix and match
+ * different settings depending on their target devices and use cases.
+ *
+ * For example, when the device has table screen size/resolution, but because it is fixed dialog like
+ * popovers provide better user experience.
+ *
+ * ## Responsive settings
+ *
+ * ### Media
+ *
+ * Generic media type to enforce responsive behavior in child components.
+ * Consumer component can use the media type from the context or
+ * just use CSS selector like [media="mobile"] to apply responsive styles.
+ *
+ * It is "unknown" by default so components can fall back to there default behavior.
+ *
+ * ### Popover Positioning
+ *
+ * By default, popovers are positioned close to the trigger element. But on small screens (e.g.: mobile devices),
+ * it is often better to show popovers/menus at the center of the screen like dialogs.
+ *
+ * ### Force Fullscreen Dialog
+ *
+ * Some components like dialogs can be shown in fullscreen mode on small screens for better user experience.
+ *
+ * @tagname mdc-responsivesettingsprovider
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'ResponsiveSettingsProvider',
+});
+export default reactWrapper;

package/dist/utils/controllers/ElementStore.d.ts

@@ -135,6 +135,16 @@ export declare class ElementStore<TItem extends HTMLElement> implements Reactive
      * @param index - The index at which to add the item.
      */
     addAt(newItem: Element, index: number): void;
+    /**
+     * Implements binary search on the cache, to get the index of the nearest newItem position.
+     *
+     * @param cache - The array which contains the list of dom node elements.
+     * @param newItem - The new node element which is needed to be added in the list item.
+     * @returns either:
+     *  - the index where the new item need to be inserted or
+     *  - -1 when the item must be appended to the end of the list item.
+     */
+    private getIndexToInsertInCache;
     /**
      * Adds an item to the cache at the specified index.
      * When the index

package/dist/utils/controllers/ElementStore.js

@@ -1,5 +1,5 @@
 import { LIFE_CYCLE_EVENTS } from '../mixins/lifecycle/lifecycle.contants';
-import { isBefore } from '../dom';
+import { isAfter, isBefore } from '../dom';
 const defaultIsValidFn = (item) => !!item;
 /**
  * ElementStore is a controller that manages a collection of elements.
@@ -133,6 +133,34 @@ export class ElementStore {
     addAt(newItem, index) {
         this.addItem(newItem, index);
     }
+    /**
+     * Implements binary search on the cache, to get the index of the nearest newItem position.
+     *
+     * @param cache - The array which contains the list of dom node elements.
+     * @param newItem - The new node element which is needed to be added in the list item.
+     * @returns either:
+     *  - the index where the new item need to be inserted or
+     *  - -1 when the item must be appended to the end of the list item.
+     */
+    getIndexToInsertInCache(newItem) {
+        // If the new item is located at the last place, then we can check the last -1 cache item and return if valid
+        if (!this.cache.length || !isAfter(this.cache.at(-1), newItem)) {
+            return -1;
+        }
+        // Fall back to binary search
+        let begin = 0;
+        let end = this.cache.length - 1;
+        while (begin <= end) {
+            const middle = Math.floor((begin + end) / 2);
+            if (isBefore(this.cache[middle], newItem)) {
+                begin = middle + 1;
+            }
+            else {
+                end = middle - 1;
+            }
+        }
+        return begin;
+    }
     /**
      * Adds an item to the cache at the specified index.
      * When the index
@@ -148,7 +176,7 @@ export class ElementStore {
         var _a;
         const newItem = item;
         if (this.isValidItem(newItem) && !this.cache.includes(newItem)) {
-            const idx = index === undefined ? this.cache.findIndex(e => isBefore(newItem, e)) : index;
+            const idx = index === undefined ? this.getIndexToInsertInCache(newItem) : index;
             if (this.onStoreUpdate) {
                 (_a = this.onStoreUpdate) === null || _a === void 0 ? void 0 : _a.call(this, newItem, 'added', idx === -1 ? this.cache.length : idx, this.cache.slice());
             }

package/dist/utils/dom.d.ts

@@ -1,3 +1,16 @@
+/**
+ * nodeB precedes nodeA in either a pre-order depth-first traversal of a tree containing both
+ * (e.g., as a descendant or preceding sibling or a descendant of a preceding sibling or
+ * preceding sibling of an ancestor) or (if they are disconnected) in an arbitrary but
+ * consistent ordering.
+ *
+ * @param nodeA - The first node to compare.
+ * @param nodeB - The second node to compare.
+ * @returns - True if nodeA is after nodeB, false otherwise.
+ *
+ * @see [compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+ */
+export declare const isAfter: (nodeA: Element, nodeB: Element) => boolean;
 /**
  * nodeB follows nodeA in either a pre-order depth-first traversal of a tree containing both
  * (e.g., as a descendant or following sibling or a descendant of a following sibling or

package/dist/utils/dom.js

@@ -1,4 +1,17 @@
 /* eslint-disable max-classes-per-file,no-bitwise */
+/**
+ * nodeB precedes nodeA in either a pre-order depth-first traversal of a tree containing both
+ * (e.g., as a descendant or preceding sibling or a descendant of a preceding sibling or
+ * preceding sibling of an ancestor) or (if they are disconnected) in an arbitrary but
+ * consistent ordering.
+ *
+ * @param nodeA - The first node to compare.
+ * @param nodeB - The second node to compare.
+ * @returns - True if nodeA is after nodeB, false otherwise.
+ *
+ * @see [compareDocumentPosition](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition)
+ */
+export const isAfter = (nodeA, nodeB) => !!(nodeA.compareDocumentPosition(nodeB) & Node.DOCUMENT_POSITION_PRECEDING);
 /**
  * nodeB follows nodeA in either a pre-order depth-first traversal of a tree containing both
  * (e.g., as a descendant or following sibling or a descendant of a following sibling or

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.125.0",
+  "version": "0.126.0",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"