@momentum-design/components 0.118.4 → 0.118.6

package/dist/react/index.d.ts

@@ -9,8 +9,8 @@ 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 Bullet } from './bullet';
 export { default as Brandvisual } from './brandvisual';
+export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
@@ -52,8 +52,8 @@ export { default as NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Password } from './password';
-export { default as Popover } from './popover';
 export { default as Presence } from './presence';
+export { default as Popover } from './popover';
 export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';

package/dist/react/index.js

@@ -9,8 +9,8 @@ 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 Bullet } from './bullet';
 export { default as Brandvisual } from './brandvisual';
+export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';
 export { default as ButtonLink } from './buttonlink';
@@ -52,8 +52,8 @@ export { default as NavMenuItem } from './navmenuitem';
 export { default as OptGroup } from './optgroup';
 export { default as Option } from './option';
 export { default as Password } from './password';
-export { default as Popover } from './popover';
 export { default as Presence } from './presence';
+export { default as Popover } from './popover';
 export { default as Progressbar } from './progressbar';
 export { default as Progressspinner } from './progressspinner';
 export { default as Radio } from './radio';

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

@@ -2,20 +2,56 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/popover';
 import type { Events } from '../../components/popover/popover.types';
 /**
- * Popover component is a lightweight floating UI element that displays additional content when triggered.
- * It can be used for tooltips, dropdowns, or contextual menus.
+ * Popover is genric overlay which can be trigered by any actinable element.
+ *
+ * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.
+ *
  * The popover automatically positions itself based on available space and
- * supports dynamic height adjustments with scrollable content when needed。
+ * supports dynamic height adjustments with scrollable content when needed.
+ * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.
+ *
+ * ## Limitations
+ *
+ * ### On trigger for multiple popovers
+ *
+ * A component (button, etc.) can trigger more than one popover, but only one of them should change the
+ * aria-expanded and aria-haspopup attributes on the trigger.
  *
- * Note:
- *  - A component (button) can trigger more than one popover, but only one of them should change the
- *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.
+ * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked
+ * Popoers except one.
+ *
+ * ### React Popover with append-to attribute
+ *
+ * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself
+ * and mounts to the specified element. React will not know about the move and will not know about the
+ * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly
+ * added/removed by React, for example:
+ *
+ * ```tsx
+ * const SomeComponent = () => {
+ *    const [isOpen, setIsOpen] = useState(false);
+ *    return (<div>
+ *      {isOpen && <Popover append-to="some-element-id">...</mdc-popover>}
+ *    </div>);
+ * }
+ * ```
+ * As a workaround Popover need to wrap with any other element/component, for example:
+ * ```tsx
+ * const SomeComponent = () => {
+ *    const [isOpen, setIsOpen] = useState(false);
+ *    return (<div>
+ *      {isOpen && <div>
+ *        <Popover append-to="some-element-id">...</mdc-popover>
+ *      <div>}
+ *    </div>);
+ * }
+ * ```
+ * Note the wrapper <div> around the Popover component (React.Fragment does not work).
  *
  * @dependency mdc-button
  *
  * @tagname mdc-popover
  *
- *
  * @event shown - (React: onShown) This event is dispatched when the popover is shown
  * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
  * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)

package/dist/react/popover/index.js

@@ -3,20 +3,56 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/popover';
 import { TAG_NAME } from '../../components/popover/popover.constants';
 /**
- * Popover component is a lightweight floating UI element that displays additional content when triggered.
- * It can be used for tooltips, dropdowns, or contextual menus.
+ * Popover is genric overlay which can be trigered by any actinable element.
+ *
+ * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.
+ *
  * The popover automatically positions itself based on available space and
- * supports dynamic height adjustments with scrollable content when needed。
+ * supports dynamic height adjustments with scrollable content when needed.
+ * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.
+ *
+ * ## Limitations
+ *
+ * ### On trigger for multiple popovers
+ *
+ * A component (button, etc.) can trigger more than one popover, but only one of them should change the
+ * aria-expanded and aria-haspopup attributes on the trigger.
  *
- * Note:
- *  - A component (button) can trigger more than one popover, but only one of them should change the
- *    aria-expanded and aria-haspopup, the rest of the popovers must have `disable-aria-expanded` attribute.
+ * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked
+ * Popoers except one.
+ *
+ * ### React Popover with append-to attribute
+ *
+ * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself
+ * and mounts to the specified element. React will not know about the move and will not know about the
+ * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly
+ * added/removed by React, for example:
+ *
+ * ```tsx
+ * const SomeComponent = () => {
+ *    const [isOpen, setIsOpen] = useState(false);
+ *    return (<div>
+ *      {isOpen && <Popover append-to="some-element-id">...</mdc-popover>}
+ *    </div>);
+ * }
+ * ```
+ * As a workaround Popover need to wrap with any other element/component, for example:
+ * ```tsx
+ * const SomeComponent = () => {
+ *    const [isOpen, setIsOpen] = useState(false);
+ *    return (<div>
+ *      {isOpen && <div>
+ *        <Popover append-to="some-element-id">...</mdc-popover>
+ *      <div>}
+ *    </div>);
+ * }
+ * ```
+ * Note the wrapper <div> around the Popover component (React.Fragment does not work).
  *
  * @dependency mdc-button
  *
  * @tagname mdc-popover
  *
- *
  * @event shown - (React: onShown) This event is dispatched when the popover is shown
  * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden
  * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)

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

@@ -26,9 +26,6 @@ import type { Events } from '../../components/toggle/toggle.types';
  * @cssproperty --mdc-toggle-height - Height of the toggle
  * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
  * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
- * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
- * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
  * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
  * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
  * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state

package/dist/react/toggle/index.js

@@ -27,9 +27,6 @@ import { TAG_NAME } from '../../components/toggle/toggle.constants';
  * @cssproperty --mdc-toggle-height - Height of the toggle
  * @cssproperty --mdc-toggle-width-compact - Width of the toggle when it's size is compact
  * @cssproperty --mdc-toggle-height-compact - Height of the toggle when it's size is compact
- * @cssproperty --mdc-toggle-label-lineheight - Line height of the toggle label
- * @cssproperty --mdc-toggle-label-fontsize - Font size of the toggle label
- * @cssproperty --mdc-toggle-label-fontweight - Font weight of the toggle label
  * @cssproperty --mdc-toggle-label-color-disabled - Color of the toggle label and help text in disabled state
  * @cssproperty --mdc-toggle-help-text-color - Color of the help text label
  * @cssproperty --mdc-toggle-active-hover-color - Background color of the active toggle in hover state

package/package.json

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