@momentum-design/components 0.54.2 → 0.55.0

package/dist/index.d.ts

@@ -40,6 +40,7 @@ import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
 import Tooltip from './components/tooltip';
+import ToggleTip from './components/toggletip';
 import VirtualizedList from './components/virtualizedlist';
 import TabList from './components/tablist';
 import type { BadgeType } from './components/badge/badge.types';
@@ -49,6 +50,6 @@ import type { SpinnerSize, SpinnerVariant } from './components/spinner/spinner.t
 import type { TextType } from './components/text/text.types';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES } from './components/button/button.constants';
-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, StaticCheckbox, StaticRadio, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
+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, StaticCheckbox, StaticRadio, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
 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

@@ -41,12 +41,13 @@ import Textarea from './components/textarea';
 import ThemeProvider from './components/themeprovider';
 import Toggle from './components/toggle';
 import Tooltip from './components/tooltip';
+import ToggleTip from './components/toggletip';
 import VirtualizedList from './components/virtualizedlist';
 import TabList from './components/tablist';
 import { inMemoryCache, webAPIIconsCache } from './utils/icon-cache';
 // Constants / Utils Imports
 import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, } from './components/button/button.constants';
 // 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, ScreenreaderAnnouncer, StaticCheckbox, StaticRadio, Textarea, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
+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, StaticCheckbox, StaticRadio, Textarea, ToggleTip, Tooltip, Searchfield, Brandvisual, Appheader, Select, TabList, Progressspinner, };
 // Constants / Utils Exports
 export { inMemoryCache, webAPIIconsCache, BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES };

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
+export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
-export { default as AlertChip } from './alertchip';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
@@ -42,5 +42,6 @@ export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
 export { default as VirtualizedList } from './virtualizedlist';

package/dist/react/index.js

@@ -1,6 +1,6 @@
+export { default as AlertChip } from './alertchip';
 export { default as Appheader } from './appheader';
 export { default as Avatar } from './avatar';
-export { default as AlertChip } from './alertchip';
 export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Brandvisual } from './brandvisual';
@@ -42,5 +42,6 @@ export { default as Text } from './text';
 export { default as Textarea } from './textarea';
 export { default as ThemeProvider } from './themeprovider';
 export { default as Toggle } from './toggle';
+export { default as ToggleTip } from './toggletip';
 export { default as Tooltip } from './tooltip';
 export { default as VirtualizedList } from './virtualizedlist';

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

@@ -0,0 +1,44 @@
+import { type EventName } from '@lit/react';
+import Component from '../../components/toggletip';
+/**
+ * A toggletip is triggered by clicking a trigger element.
+ *
+ * It can contain interactive content and can be closed by
+ * clicking outside the toggletip or pressing the escape key.
+ *
+ * It can have optional close button to close the toggletip.
+ *
+ * Toggletip component uses `mdc-screenreaderannouncer` internally to
+ * announce the toggletip text content with screen readers when the toggletip is shown.
+ *
+ * `screenreader-announcer-identity` attribute can be used to provide ID of an element
+ * in DOM to which announcement elements are added. If not set, a visually hidden
+ * div element is created in DOM to which announcement elements are added.
+ *
+ * Please refer to the `mdc-screenreaderannouncer` component for more details.
+ *
+ * @dependency mdc-screenreaderannouncer
+ * @dependency mdc-button
+ *
+ * @tagname mdc-toggletip
+ *
+ * @event shown - (React: onShown) This event is dispatched when the toggletip is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden
+ * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip
+ * is destroyed (removed from the DOM)
+ *
+ * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.
+ * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.
+ * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip
+ *  when the color is contrast.
+ *
+ * @slot - Default slot for the toggletip content
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onShown: EventName<Event>;
+    onHidden: EventName<Event>;
+    onCreated: EventName<Event>;
+    onDestroyed: EventName<Event>;
+}>;
+export default reactWrapper;

package/dist/react/toggletip/index.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/toggletip';
+import { TAG_NAME } from '../../components/toggletip/toggletip.constants';
+/**
+ * A toggletip is triggered by clicking a trigger element.
+ *
+ * It can contain interactive content and can be closed by
+ * clicking outside the toggletip or pressing the escape key.
+ *
+ * It can have optional close button to close the toggletip.
+ *
+ * Toggletip component uses `mdc-screenreaderannouncer` internally to
+ * announce the toggletip text content with screen readers when the toggletip is shown.
+ *
+ * `screenreader-announcer-identity` attribute can be used to provide ID of an element
+ * in DOM to which announcement elements are added. If not set, a visually hidden
+ * div element is created in DOM to which announcement elements are added.
+ *
+ * Please refer to the `mdc-screenreaderannouncer` component for more details.
+ *
+ * @dependency mdc-screenreaderannouncer
+ * @dependency mdc-button
+ *
+ * @tagname mdc-toggletip
+ *
+ * @event shown - (React: onShown) This event is dispatched when the toggletip is shown
+ * @event hidden - (React: onHidden) This event is dispatched when the toggletip is hidden
+ * @event created - (React: onCreated) This event is dispatched when the toggletip is created (added to the DOM)
+ * @event destroyed - (React: onDestroyed) This event is dispatched when the toggletip
+ * is destroyed (removed from the DOM)
+ *
+ * @cssproperty --mdc-toggletip-max-width - The maximum width of the toggletip.
+ * @cssproperty --mdc-toggletip-text-color - The text color of the toggletip.
+ * @cssproperty --mdc-toggletip-text-color-contrast - The text color of the toggletip
+ *  when the color is contrast.
+ *
+ * @slot - Default slot for the toggletip content
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {
+        onShown: 'shown',
+        onHidden: 'hidden',
+        onCreated: 'created',
+        onDestroyed: 'destroyed',
+    },
+    displayName: 'ToggleTip',
+});
+export default reactWrapper;

package/package.json

@@ -39,5 +39,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.54.2"
+  "version": "0.55.0"
 }