@rescui/select 0.17.1-RUI-293-Update-menu-component-7a032357e.20 → 0.17.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33

package/lib/multiselect.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { MultiselectProps } from './types';
-export declare function Multiselect({ options, value, onChange, error, label, note, size, mode, theme: themeFromProps, placement, isSingleLine, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: MultiselectProps): React.JSX.Element;
+export declare function Multiselect({ options, value, onChange, error, label, note, size, mode, theme: themeFromProps, placement, renderInTrigger, disableFlip, isSingleLine, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: MultiselectProps): React.JSX.Element;

package/lib/multiselect.js

@@ -69,6 +69,8 @@ function Multiselect(_ref) {
     mode = 'classic',
     theme: themeFromProps,
     placement = 'bottom',
+    renderInTrigger = false,
+    disableFlip = false,
     isSingleLine = false,
     boldLabel = true,
     reserveErrorLine = false,
@@ -261,6 +263,8 @@ function Multiselect(_ref) {
     dropdownRef: dropdownRef,
     triggerRef: triggerRef,
     placement: placement,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     isOpen: isOpen,
     listBoxState: listBoxState,
     maxVisibleItems: maxVisibleItems,

package/lib/parts/popup-content.d.ts

@@ -14,7 +14,9 @@ export type PopupContentProps = {
     emptyListMessage: string;
     maxVisibleItems?: number;
     trigger?: DropdownProps['trigger'];
+    renderInTrigger?: boolean;
+    disableFlip?: boolean;
     isOpen?: boolean;
     dropdownUpdateDeps?: unknown[];
 };
-export declare const PopupContent: ({ theme, listBoxState, triggerRef, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, isOpen, dropdownUpdateDeps }: PopupContentProps) => React.JSX.Element;
+export declare const PopupContent: ({ theme, listBoxState, triggerRef, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, renderInTrigger, disableFlip, isOpen, dropdownUpdateDeps }: PopupContentProps) => React.JSX.Element;

package/lib/parts/popup-content.js

@@ -18,6 +18,8 @@ const PopupContent = _ref => {
     emptyListMessage,
     maxVisibleItems,
     trigger,
+    renderInTrigger,
+    disableFlip,
     isOpen,
     dropdownUpdateDeps = []
   } = _ref;
@@ -53,6 +55,8 @@ const PopupContent = _ref => {
     isOpen: isOpen,
     cancelCloseAnimation: true,
     disableFocusLock: true,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     trigger: trigger
   }, /*#__PURE__*/React.createElement(ListBox, {
     state: listBoxState,

package/lib/select-basic.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { InnerSingleComponentProps } from './types';
-export declare function SelectBasic({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;
+export declare function SelectBasic({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, renderInTrigger, disableFlip, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;

package/lib/select-basic.js

@@ -28,6 +28,8 @@ function SelectBasic(_ref) {
     mode,
     theme,
     placement,
+    renderInTrigger,
+    disableFlip,
     boldLabel,
     reserveErrorLine,
     maxVisibleItems,
@@ -167,6 +169,8 @@ function SelectBasic(_ref) {
     maxVisibleItems: maxVisibleItems,
     emptyListMessage: emptyListMessage,
     listBoxItems: listBoxItems,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     trigger: _ref3 => {
       let {
         ref: triggerRefForDropdown

package/lib/select-searchable.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { InnerSingleComponentProps } from './types';
-export declare function SelectSearchable({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;
+export declare function SelectSearchable({ options, value: selectedItem, onChange, error, label, note, size, mode, theme, placement, renderInTrigger, disableFlip, boldLabel, reserveErrorLine, maxVisibleItems, isClearable, isLoading, isDisabled, name, noOptionsMessage, className, id, style, placeholder, ...rest }: InnerSingleComponentProps): React.JSX.Element;

package/lib/select-searchable.js

@@ -27,6 +27,8 @@ function SelectSearchable(_ref) {
     mode,
     theme,
     placement,
+    renderInTrigger,
+    disableFlip,
     boldLabel,
     reserveErrorLine,
     maxVisibleItems,
@@ -198,6 +200,8 @@ function SelectSearchable(_ref) {
     dropdownRef: dropdownRef,
     triggerRef: inputRef,
     placement: placement,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     isOpen: isOpen,
     listBoxState: listBoxState,
     maxVisibleItems: maxVisibleItems,

package/lib/select.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import type { SelectProps, SelectOption, SelectOptionOrGroup } from './types';
 export declare const Select: {
-    ({ options, size, mode, theme: themeFromProps, className, style, value, onChange, placeholder, isClearable, isLoading, isDisabled, isSearchable, noOptionsMessage, error, placement, boldLabel, reserveErrorLine, note, maxVisibleItems, id, ...restProps }: SelectProps): React.JSX.Element;
+    ({ options, size, mode, theme: themeFromProps, className, style, value, onChange, placeholder, isClearable, isLoading, isDisabled, isSearchable, noOptionsMessage, error, placement, renderInTrigger, disableFlip, boldLabel, reserveErrorLine, note, maxVisibleItems, id, ...restProps }: SelectProps): React.JSX.Element;
     propTypes: {
         className: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<object>;
@@ -23,6 +23,8 @@ export declare const Select: {
         note: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         noOptionsMessage: PropTypes.Validator<import("./types").NoOptionsMessage>;
         placement: PropTypes.Requireable<string>;
+        renderInTrigger: PropTypes.Requireable<boolean>;
+        disableFlip: PropTypes.Requireable<boolean>;
         name: PropTypes.Requireable<string>;
     };
 };

package/lib/select.js

@@ -40,6 +40,8 @@ const Select = _ref => {
     noOptionsMessage,
     error,
     placement = 'bottom',
+    renderInTrigger = false,
+    disableFlip = false,
     boldLabel = true,
     reserveErrorLine = false,
     note,
@@ -71,6 +73,8 @@ const Select = _ref => {
     noOptionsMessage: noOptionsMessage,
     error: error,
     placement: placement,
+    renderInTrigger: renderInTrigger,
+    disableFlip: disableFlip,
     boldLabel: boldLabel,
     reserveErrorLine: reserveErrorLine,
     note: note,
@@ -98,6 +102,8 @@ Select.propTypes = {
   note: PropTypes.node,
   noOptionsMessage: noOptionsMessageType,
   placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
+  renderInTrigger: PropTypes.bool,
+  disableFlip: PropTypes.bool,
   name: PropTypes.string
 };
 export { Select };

package/lib/styles/common.p.module.css.js

@@ -1,32 +1,32 @@
 var styles = {
-  "themeLight": "_themeLight_fu3pms_6",
-  "themeDark": "_themeDark_fu3pms_9",
-  "sizeS": "_sizeS_fu3pms_13",
-  "sizeM": "_sizeM_fu3pms_16",
-  "sizeL": "_sizeL_fu3pms_19",
-  "classic": "_classic_fu3pms_23",
-  "rock": "_rock_fu3pms_26",
-  "root": "_root_fu3pms_30",
-  "triggerContainer": "_triggerContainer_fu3pms_36",
-  "disabled": "_disabled_fu3pms_41",
-  "trigger": "_trigger_fu3pms_36",
-  "error": "_error_fu3pms_78",
-  "enabled": "_enabled_fu3pms_83",
-  "searchable": "_searchable_fu3pms_98",
-  "canBeMultiline": "_canBeMultiline_fu3pms_125",
-  "triggerText": "_triggerText_fu3pms_129",
-  "searchInput": "_searchInput_fu3pms_130",
-  "labelNotSelected": "_labelNotSelected_fu3pms_161",
-  "multi": "_multi_fu3pms_217",
-  "tagsContainer": "_tagsContainer_fu3pms_234",
-  "tag": "_tag_fu3pms_234",
-  "filledTag": "_filledTag_fu3pms_256",
-  "iconsWrapper": "_iconsWrapper_fu3pms_264",
-  "toggle": "_toggle_fu3pms_282",
-  "icon": "_icon_fu3pms_264",
-  "clearIcon": "_clearIcon_fu3pms_356",
-  "visuallyHidden": "_visuallyHidden_fu3pms_416",
-  "select": "_select_fu3pms_433",
-  "observable": "_observable_fu3pms_455"
+  "themeLight": "_themeLight_pw64y2_6",
+  "themeDark": "_themeDark_pw64y2_9",
+  "sizeS": "_sizeS_pw64y2_13",
+  "sizeM": "_sizeM_pw64y2_16",
+  "sizeL": "_sizeL_pw64y2_19",
+  "classic": "_classic_pw64y2_23",
+  "rock": "_rock_pw64y2_26",
+  "root": "_root_pw64y2_30",
+  "triggerContainer": "_triggerContainer_pw64y2_36",
+  "disabled": "_disabled_pw64y2_41",
+  "trigger": "_trigger_pw64y2_36",
+  "error": "_error_pw64y2_78",
+  "enabled": "_enabled_pw64y2_83",
+  "searchable": "_searchable_pw64y2_98",
+  "canBeMultiline": "_canBeMultiline_pw64y2_125",
+  "triggerText": "_triggerText_pw64y2_129",
+  "searchInput": "_searchInput_pw64y2_130",
+  "labelNotSelected": "_labelNotSelected_pw64y2_161",
+  "multi": "_multi_pw64y2_217",
+  "tagsContainer": "_tagsContainer_pw64y2_234",
+  "tag": "_tag_pw64y2_234",
+  "filledTag": "_filledTag_pw64y2_256",
+  "iconsWrapper": "_iconsWrapper_pw64y2_264",
+  "toggle": "_toggle_pw64y2_282",
+  "icon": "_icon_pw64y2_264",
+  "clearIcon": "_clearIcon_pw64y2_356",
+  "visuallyHidden": "_visuallyHidden_pw64y2_416",
+  "select": "_select_pw64y2_433",
+  "observable": "_observable_pw64y2_455"
 };
 export { styles as default };

package/lib/styles/form-trigger.p.module.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_9j6s10_6",
-  "themeDark": "_themeDark_9j6s10_9",
-  "sizeS": "_sizeS_9j6s10_13",
-  "sizeM": "_sizeM_9j6s10_16",
-  "sizeL": "_sizeL_9j6s10_19",
-  "main": "_main_9j6s10_23",
-  "label": "_label_9j6s10_27",
-  "disabled": "_disabled_9j6s10_33",
-  "footer": "_footer_9j6s10_38",
-  "errorMessage": "_errorMessage_9j6s10_45",
-  "error": "_error_9j6s10_45",
-  "note": "_note_9j6s10_54"
+  "themeLight": "_themeLight_1bpvhm_6",
+  "themeDark": "_themeDark_1bpvhm_9",
+  "sizeS": "_sizeS_1bpvhm_13",
+  "sizeM": "_sizeM_1bpvhm_16",
+  "sizeL": "_sizeL_1bpvhm_19",
+  "main": "_main_1bpvhm_23",
+  "label": "_label_1bpvhm_27",
+  "disabled": "_disabled_1bpvhm_33",
+  "footer": "_footer_1bpvhm_38",
+  "errorMessage": "_errorMessage_1bpvhm_45",
+  "error": "_error_1bpvhm_45",
+  "note": "_note_1bpvhm_54"
 };
 export { styles as default };

package/lib/styles/list-box.p.module.css.js

@@ -1,16 +1,16 @@
 var styles = {
-  "sizeS": "_sizeS_1ejiweu_6",
-  "sizeM": "_sizeM_1ejiweu_9",
-  "sizeL": "_sizeL_1ejiweu_12",
-  "classic": "_classic_1ejiweu_16",
-  "rock": "_rock_1ejiweu_19",
-  "listBox": "_listBox_1ejiweu_23",
-  "item": "_item_1ejiweu_39",
-  "selected": "_selected_1ejiweu_77",
-  "disabled": "_disabled_1ejiweu_91",
-  "checkIcon": "_checkIcon_1ejiweu_98",
-  "visible": "_visible_1ejiweu_105",
-  "divider": "_divider_1ejiweu_112",
-  "groupHeader": "_groupHeader_1ejiweu_126"
+  "sizeS": "_sizeS_fouuu0_6",
+  "sizeM": "_sizeM_fouuu0_9",
+  "sizeL": "_sizeL_fouuu0_12",
+  "classic": "_classic_fouuu0_16",
+  "rock": "_rock_fouuu0_19",
+  "listBox": "_listBox_fouuu0_23",
+  "item": "_item_fouuu0_39",
+  "selected": "_selected_fouuu0_77",
+  "disabled": "_disabled_fouuu0_91",
+  "checkIcon": "_checkIcon_fouuu0_98",
+  "visible": "_visible_fouuu0_105",
+  "divider": "_divider_fouuu0_112",
+  "groupHeader": "_groupHeader_fouuu0_126"
 };
 export { styles as default };

package/lib/types.d.ts

@@ -126,6 +126,14 @@ export type SelectProps = {
      * Placement of dropdown element
      */
     placement?: Placement;
+    /**
+     * Render dropdown inside trigger function or wrapper. May be useful when the trigger placed in the fixed layout or popovers.
+     * */
+    renderInTrigger?: boolean;
+    /**
+     * Disable dropdown flip behavior. By default dropdown will flip its position if it's not fully visible.
+     * */
+    disableFlip?: boolean;
     /**
      * Note element at the bottom (use with forms)
      */

package/llm/components/multiselect.md

@@ -134,7 +134,7 @@ const MySelect = () => {
 render(<MySelect />);
 ```
 
-```postcss
+```postcss attached
 .select-with-contrast-primary {
   --rs-select-contrast-primary: 1;
 }
@@ -150,6 +150,68 @@ render(<MySelect />);
 }
 ```
 
+#### In the native dialog element
+
+Because the [popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using) places the dialog element on the Top Layer, any value of `z-index` for the options list will be ignored.
+
+To work around this, we can use the `renderInTrigger` prop to render the popover in the dialog element instead of the bottom of the `body`.
+
+Also use `disableFlip` prop and `overflow: visible` css on the dialog if options will overflow it.
+
+```tsx
+import { useState } from 'react';
+import { Multiselect } from '@rescui/select';
+
+const options = [
+  { label: 'Blue', value: 'blue' },
+  { label: 'Black', value: 'black' },
+  { label: 'Red', value: 'red' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Yellow', value: 'yellow' },
+  { label: 'White', value: 'white' }
+];
+
+const MySelect = () => {
+  const [selected, setSelected] = useState([options[1], options[5]]);
+
+  return (
+    <div style={{ maxWidth: '380px' }}>
+      <Multiselect
+        className="clazz"
+        options={options}
+        value={selected}
+        onChange={value => setSelected(value)}
+        isSingleLine
+        size="m"
+        placeholder="Select colors..."
+        aria-label="Select colors"
+        renderInTrigger
+        disableFlip
+      />
+    </div>
+  );
+};
+
+render(
+  <>
+    <button command="show-modal" commandfor="my-dialog">
+      Open dialog
+    </button>
+
+    <dialog id="my-dialog" style={{ width: 500, overflow: 'visible' }}>
+      <div>
+        <button commandfor="my-dialog" command="close">
+          Close
+        </button>
+      </div>
+      <div style={{ marginTop: 12 }}>
+        <MySelect />
+      </div>
+    </dialog>
+  </>
+);
+```
+
 ## CSS Mixins API
 
 #### `Multiselect` mixins
@@ -162,9 +224,7 @@ render(<MySelect />);
 
 #### Demo
 
-Resize the grey area below to see the effect.
-
-You can use `@media` queries instead of `@container` queries:
+Use the controls to see the effect at different viewport widths.
 
 ```tsx
 import { useState } from 'react';
@@ -183,7 +243,7 @@ const MyMultiselect = ({ className }) => {
   const [selected, setSelected] = useState([options[0], options[5]]);
 
   return (
-    <div style={{ maxWidth: '380px' }}>
+    <div style={{ maxWidth: 380, height: 380 }}>
       <Multiselect
         options={options}
         value={selected}
@@ -197,32 +257,17 @@ const MyMultiselect = ({ className }) => {
   );
 };
 
-render(
-  <div className="preview-container">
-    <p style={{ position: 'absolute', right: 12, bottom: 12 }}>Resize me</p>
-    <MyMultiselect className="my-multiselect" />
-  </div>
-);
+render(<MyMultiselect className="my-multiselect" />);
 ```
 
 ```postcss
 @import '@rescui/select/lib/public-api.p.css';
 
-.preview-container {
-  position: relative;
-  container-type: inline-size;
-  resize: horizontal;
-  overflow: auto;
-  padding: 12px;
-  background-color: var(--rs-color-black-t5);
-  max-width: 800px;
-}
-
 .my-multiselect {
-  @container (max-width: 640px) {
+  @media (max-width: 640px) {
     @mixin rs-multiselect-size-l;
   }
-  @container (max-width: 500px) {
+  @media (max-width: 500px) {
     @mixin rs-multiselect-size-s;
   }
 }

package/llm/components/select.md

@@ -290,7 +290,7 @@ const MySelect = () => {
 render(<MySelect />);
 ```
 
-```postcss
+```postcss attached
 .select-with-contrast-primary {
   --rs-select-contrast-primary: 1;
 }
@@ -306,6 +306,63 @@ render(<MySelect />);
 }
 ```
 
+#### In the native dialog element
+
+Because the [popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using) places the dialog element on the Top Layer, any value of `z-index` for the options list will be ignored.
+
+To work around this, we can use the `renderInTrigger` prop to render the popover in the dialog element instead of the bottom of the `body`.
+
+Also use `disableFlip` prop and `overflow: visible` css on the dialog if options will overflow it.
+
+```tsx
+import { useState } from 'react';
+import { Select } from '@rescui/select';
+
+const options = [
+  { label: 'Light', value: 'light' },
+  { label: 'Regular', value: 'regular' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'Bold', value: 'bold' }
+];
+
+const MySelect = () => {
+  const [selected, setSelected] = useState(options[2]);
+
+  return (
+    <Select
+      options={options}
+      value={selected}
+      onChange={value => setSelected(value)}
+      size="m"
+      placeholder="Select font weight..."
+      aria-label="Select font weight"
+      placement="bottom"
+      renderInTrigger
+      disableFlip
+    />
+  );
+};
+
+render(
+  <>
+    <button command="show-modal" commandfor="my-dialog">
+      Open dialog
+    </button>
+
+    <dialog id="my-dialog" style={{ width: 500, overflow: 'visible' }}>
+      <div>
+        <button commandfor="my-dialog" command="close">
+          Close
+        </button>
+      </div>
+      <div style={{ marginTop: 12 }}>
+        <MySelect />
+      </div>
+    </dialog>
+  </>
+);
+```
+
 ## Native
 
 ### Features showcase
@@ -398,9 +455,7 @@ render(<MySelect />);
 
 ##### Demo
 
-Resize the grey area below to see the effect.
-
-You can use `@media` queries instead of `@container` queries:
+Use the controls to see the effect at different viewport widths.
 
 ```tsx
 import { useState } from 'react';
@@ -419,7 +474,7 @@ const MySelect = ({ className }) => {
   const [selected, setSelected] = useState(options[0]);
 
   return (
-    <div style={{ maxWidth: '380px' }}>
+    <div style={{ maxWidth: 380, height: 380 }}>
       <Select
         options={options}
         value={selected}
@@ -433,32 +488,17 @@ const MySelect = ({ className }) => {
   );
 };
 
-render(
-  <div className="select-preview-container">
-    <p style={{ position: 'absolute', right: 12, bottom: 12 }}>Resize me</p>
-    <MySelect className="my-select" />
-  </div>
-);
+render(<MySelect className="my-select" />);
 ```
 
 ```postcss attached
 @import '@rescui/select/lib/public-api.p.css';
 
-.select-preview-container {
-  position: relative;
-  container-type: inline-size;
-  resize: horizontal;
-  overflow: auto;
-  padding: 12px;
-  background-color: var(--rs-color-black-t5);
-  max-width: 800px;
-}
-
 .my-select {
-  @container (max-width: 640px) {
+  @media (max-width: 640px) {
     @mixin rs-select-size-l;
   }
-  @container (max-width: 500px) {
+  @media (max-width: 500px) {
     @mixin rs-select-size-s;
   }
 }
@@ -482,9 +522,7 @@ Check out [this example](/components/select/#contrast-primary-color) for contras
 
 ##### Demo
 
-Resize the grey area below to see the effect.
-
-You can use `@media` queries instead of `@container` queries:
+Use the controls to see the effect at different viewport widths.
 
 ```tsx
 import { useState } from 'react';
@@ -503,7 +541,7 @@ const MyNativeSelect = ({ className }) => {
   const [selected, setSelected] = useState(options[0]);
 
   return (
-    <div style={{ maxWidth: '380px' }}>
+    <div style={{ maxWidth: 380, height: 380 }}>
       <NativeSelect
         options={options}
         value={selected}
@@ -517,32 +555,17 @@ const MyNativeSelect = ({ className }) => {
   );
 };
 
-render(
-  <div className="native-select-preview-container">
-    <p style={{ position: 'absolute', right: 12, bottom: 12 }}>Resize me</p>
-    <MyNativeSelect className="my-native-select" />
-  </div>
-);
+render(<MyNativeSelect className="my-native-select" />);
 ```
 
 ```postcss
 @import '@rescui/select/lib/public-api.p.css';
 
-.native-select-preview-container {
-  position: relative;
-  container-type: inline-size;
-  resize: horizontal;
-  overflow: auto;
-  padding: 12px;
-  background-color: var(--rs-color-black-t5);
-  max-width: 800px;
-}
-
 .my-native-select {
-  @container (max-width: 640px) {
+  @media (max-width: 640px) {
     @mixin rs-native-select-size-l;
   }
-  @container (max-width: 500px) {
+  @media (max-width: 500px) {
     @mixin rs-native-select-size-s;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.17.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
+  "version": "0.17.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -17,10 +17,10 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "0.10.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
-    "@rescui/form-field": "0.1.4-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
-    "@rescui/tag": "0.13.9-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
-    "@rescui/use-resize-observer": "0.3.1-RUI-293-Update-menu-component-7a032357e.167+7a032357e",
+    "@rescui/dropdown": "0.10.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
+    "@rescui/form-field": "0.1.4-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
+    "@rescui/tag": "0.13.9-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
+    "@rescui/use-resize-observer": "0.3.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.180+d8a5b0551",
     "classnames": "^2.2.6",
     "downshift": "^9.3.2",
     "scroll-into-view-if-needed": "3.1.0"
@@ -31,9 +31,9 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-7a032357e.55+7a032357e",
+    "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.68+d8a5b0551",
     "@rescui/scripts": "0.5.2",
-    "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-7a032357e.20+7a032357e",
+    "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
     "@rescui/visual-regression": "0.1.4",
     "sniffr": "^1.2.0"
   },
@@ -42,5 +42,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "7a032357e8f31abbf69e18aa6b7ef2d75e40f42e"
+  "gitHead": "d8a5b055167d8b1ea55c32621655b8e0acc98a1a"
 }