@rescui/select 0.14.4-RUI-286-Fix-tooltip-stacking-f4145b01.1 → 0.15.0

package/lib/parts/common-select.p.module.css.js

@@ -1,15 +1,15 @@
 var styles = {
-  "sizeS": "_sizeS_z3nhpr_3",
-  "sizeM": "_sizeM_z3nhpr_6",
-  "sizeL": "_sizeL_z3nhpr_9",
-  "menu": "_menu_z3nhpr_13",
-  "menuSizeS": "_menuSizeS_z3nhpr_26",
-  "menuSizeM": "_menuSizeM_z3nhpr_30",
-  "menuSizeL": "_menuSizeL_z3nhpr_34",
-  "withGroupsLabel": "_withGroupsLabel_z3nhpr_40",
-  "lastOption": "_lastOption_z3nhpr_39",
-  "divider": "_divider_z3nhpr_45",
-  "checkIcon": "_checkIcon_z3nhpr_51",
-  "observable": "_observable_z3nhpr_56"
+  "sizeS": "_sizeS_18ip9hg_3",
+  "sizeM": "_sizeM_18ip9hg_6",
+  "sizeL": "_sizeL_18ip9hg_9",
+  "menu": "_menu_18ip9hg_13",
+  "menuSizeS": "_menuSizeS_18ip9hg_26",
+  "menuSizeM": "_menuSizeM_18ip9hg_30",
+  "menuSizeL": "_menuSizeL_18ip9hg_34",
+  "withGroupsLabel": "_withGroupsLabel_18ip9hg_40",
+  "lastOption": "_lastOption_18ip9hg_39",
+  "divider": "_divider_18ip9hg_45",
+  "checkIcon": "_checkIcon_18ip9hg_51",
+  "observable": "_observable_18ip9hg_56"
 };
 export { styles as default };

package/lib/parts/form-trigger-wrapper.d.ts

@@ -5,12 +5,30 @@ export declare type FormTriggerWrapperProps = {
     size?: SelectSize;
     theme?: Theme;
     className?: string;
+    id?: string;
+    disabled?: boolean;
+    errorId?: string;
     error?: boolean | React.ReactNode;
+    reserveErrorLine?: boolean;
     label?: React.ReactNode;
     note?: React.ReactNode;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
     boldLabel?: boolean;
     children?: React.ReactNode;
-};
-declare const FormTriggerWrapper: React.ForwardRefExoticComponent<FormTriggerWrapperProps & React.RefAttributes<HTMLDivElement>>;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const FormTriggerWrapper: React.ForwardRefExoticComponent<{
+    size?: SelectSize;
+    theme?: Theme;
+    className?: string;
+    id?: string;
+    disabled?: boolean;
+    errorId?: string;
+    error?: boolean | React.ReactNode;
+    reserveErrorLine?: boolean;
+    label?: React.ReactNode;
+    note?: React.ReactNode;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    boldLabel?: boolean;
+    children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export default FormTriggerWrapper;

package/lib/parts/form-trigger-wrapper.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import WarningIcon from '../_virtual/warning.js';
+import { shouldRenderErrorMessage, ErrorMessage } from '@rescui/form-field';
 import styles from './form-trigger.p.module.css.js';
 const SIZE_STYLES = {
   l: styles.sizeL,
@@ -30,39 +30,47 @@ const Label = _ref => {
   }
 };
 
-const FormTriggerWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const FormTriggerWrapper = /*#__PURE__*/React.forwardRef( // eslint-disable-next-line complexity
+(_ref2, ref) => {
   let {
     size,
     theme: themeFromProps,
     className,
+    id,
+    disabled,
     error,
+    errorId,
+    reserveErrorLine = false,
     label,
     note,
     children,
     onKeyDown,
-    boldLabel
+    boldLabel,
+    ...restProps
   } = _ref2;
   const theme = useThemeWithUndefined(themeFromProps);
+  const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn(className, styles.main, SIZE_STYLES[size], THEME_STYLES[theme]),
+    className: cn(className, styles.main, SIZE_STYLES[size], THEME_STYLES[theme], Boolean(error) && styles.error, disabled && styles.disabled),
+    id: id,
     ref: ref,
     "data-test": "select-wrapper",
-    "data-rs-internal": 'select-form-trigger-wrapper'
+    "data-rs-internal": 'select-form-trigger-wrapper',
+    ...restProps
   }, /*#__PURE__*/React.createElement(Label, {
     boldLabel: boldLabel
   }, label), /*#__PURE__*/React.createElement("div", {
     onKeyDown: onKeyDown
-  }, children), error && /*#__PURE__*/React.createElement("div", {
+  }, children), hasFooter && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, /*#__PURE__*/React.createElement(ErrorMessage, {
+    id: errorId,
     className: styles.errorMessage,
-    "data-rs-internal": 'select-form-trigger-wrapper__error-message'
-  }, /*#__PURE__*/React.createElement(WarningIcon, {
-    className: styles.errorIcon,
-    "data-rs-internal": 'select-form-trigger-wrapper__error-icon',
-    "data-render-all-sizes": true
-  }), /*#__PURE__*/React.createElement("span", null, error)), note && /*#__PURE__*/React.createElement("div", {
+    reserveLine: reserveErrorLine
+  }, error), note && /*#__PURE__*/React.createElement("div", {
     className: styles.note,
     "data-rs-internal": 'select-form-trigger-wrapper__note'
-  }, note));
+  }, note)));
 });
 FormTriggerWrapper.displayName = 'FormTriggerWrapper';
 export { FormTriggerWrapper as default };

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

@@ -1,13 +1,15 @@
 var styles = {
-  "themeLight": "_themeLight_qkx1ai_7",
-  "themeDark": "_themeDark_qkx1ai_10",
-  "sizeS": "_sizeS_qkx1ai_14",
-  "sizeM": "_sizeM_qkx1ai_17",
-  "sizeL": "_sizeL_qkx1ai_20",
-  "main": "_main_qkx1ai_24",
-  "label": "_label_qkx1ai_28",
-  "errorMessage": "_errorMessage_qkx1ai_34",
-  "errorIcon": "_errorIcon_qkx1ai_45",
-  "note": "_note_qkx1ai_50"
+  "themeLight": "_themeLight_14qtra6_6",
+  "themeDark": "_themeDark_14qtra6_9",
+  "sizeS": "_sizeS_14qtra6_13",
+  "sizeM": "_sizeM_14qtra6_16",
+  "sizeL": "_sizeL_14qtra6_19",
+  "main": "_main_14qtra6_23",
+  "label": "_label_14qtra6_27",
+  "disabled": "_disabled_14qtra6_33",
+  "footer": "_footer_14qtra6_38",
+  "errorMessage": "_errorMessage_14qtra6_45",
+  "error": "_error_14qtra6_45",
+  "note": "_note_14qtra6_54"
 };
 export { styles as default };

package/lib/parts/multiselect.d.ts

@@ -6,6 +6,7 @@ export interface MultiselectProps {
      * Additional class name
      */
     className?: string;
+    id?: string;
     /**
      * Array of options
      */
@@ -54,6 +55,11 @@ export interface MultiselectProps {
      * Error state flag or React.ReactNode (use with forms)
      */
     error?: boolean | React.ReactNode;
+    /**
+     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
+     * If `false`, there will be no reservation.
+     */
+    reserveErrorLine?: boolean;
     /**
      * Label element upper then Multiselect element (use with forms)
      */
@@ -66,7 +72,6 @@ export interface MultiselectProps {
      * Note element below then Multiselect element (use with forms)
      */
     note?: React.ReactNode;
-    id?: string;
     /**
      * Text to display when there are no options
      */

package/lib/parts/multiselect.js

@@ -6,6 +6,7 @@ import cn from 'classnames';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Dropdown } from '@rescui/dropdown';
 import { Menu, MenuItem, Divider, GroupHeader } from '@rescui/menu';
+import { ErrorMessage } from '@rescui/form-field';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import CheckOutlineIcon from '../_virtual/check-outline.js';
 import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getOptionValue, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, withoutGroupsLabel, getPlainOptionsFromGroups, getEmptyMessage, OptionGroupTypes, convertToOptionGroupsIfNeeded, calculateMaxHeight } from '../utils.js';
@@ -14,6 +15,7 @@ import { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB, ESCAPE, BACKSPACE } from '../k
 import SelectTrigger from './trigger.js';
 import FormTriggerWrapper from './form-trigger-wrapper.js';
 import { useObservableForceRerender } from './use-observable-force-rerender.js';
+import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
 import styles from './common-select.p.module.css.js'; // eslint-disable-next-line complexity
 
 const Option = _ref => {
@@ -149,6 +151,7 @@ const Multiselect = _ref4 => {
     mode = 'classic',
     theme: themeFromProps,
     className = null,
+    id,
     value = undefined,
     onChange,
     placeholder,
@@ -157,8 +160,10 @@ const Multiselect = _ref4 => {
     isLoading = false,
     isDisabled = false,
     noOptionsMessage,
+    error,
+    reserveErrorLine = false,
     placement = 'bottom',
-    boldLabel,
+    boldLabel = true,
     ...restProps
   } = _ref4;
   const [triggerFormWrapperRef, setTriggerFormWrapperRef] = useState(null);
@@ -341,6 +346,8 @@ const Multiselect = _ref4 => {
   const actualSize = sizeFromCss || size;
   const maxHeight = calculateMaxHeight(actualSize);
   const withGroupsLabel = !withoutGroupsLabel(filteredGroups);
+  const uniqueId = `multiselect-${useBackwardCompatibleId()}`;
+  const errorId = `${id ? id : uniqueId}-error`;
   return /*#__PURE__*/React.createElement(Dropdown, {
     theme: theme,
     onRequestClose: handleClose,
@@ -360,13 +367,21 @@ const Multiselect = _ref4 => {
       return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
         ref: setTriggerFormWrapperRef,
         className: cn(className, SIZE_STYLES[size]),
+        id: id,
+        errorId: errorId,
         theme: theme,
         size: size,
-        error: restProps.error,
+        disabled: isDisabled,
+        error: error,
+        reserveErrorLine: reserveErrorLine,
         label: restProps.label,
         note: restProps.note,
         onKeyDown: handleTriggerKeyDown,
-        boldLabel: boldLabel
+        boldLabel: boldLabel,
+        role: "listbox",
+        "aria-errormessage": error ? errorId : undefined,
+        "aria-invalid": Boolean(error),
+        "aria-multiselectable": true
       }, /*#__PURE__*/React.createElement("div", {
         ref: observableRef,
         className: styles.observable
@@ -388,8 +403,7 @@ const Multiselect = _ref4 => {
         onClick: handleClick,
         onClearClick: handleClearClick,
         onItemClearClick: handleUnselectClick,
-        error: Boolean(restProps.error),
-        id: restProps.id,
+        error: Boolean(error),
         "data-target": "trigger"
       }));
     },
@@ -429,7 +443,7 @@ Multiselect.propTypes = {
   isClearable: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isLoading: PropTypes.bool,
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  error: ErrorMessage.propTypes.children,
   label: PropTypes.node,
   note: PropTypes.node,
   id: PropTypes.string,

package/lib/parts/native-select.d.ts

@@ -12,6 +12,7 @@ export declare type NativeSelectProps = {
     size?: SelectSize;
     theme?: Theme;
     className?: string;
+    id?: string;
     style?: object;
     value: NativeSelectOption;
     onChange?: (newValue: NativeSelectOption) => void;
@@ -22,6 +23,11 @@ export declare type NativeSelectProps = {
     label?: React.ReactNode;
     note?: React.ReactNode;
     error?: boolean | React.ReactNode;
+    /**
+     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
+     * If `false`, there will be no reservation.
+     */
+    reserveErrorLine?: boolean;
     noOptionsMessage?: NoOptionsMessage;
     name?: string;
     boldLabel?: boolean;

package/lib/parts/native-select.js

@@ -3,9 +3,11 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import { ErrorMessage } from '@rescui/form-field';
 import { nativeOptionType, nativeOptionsGroupType, noOptionsMessageType } from '../common-prop-types.js';
 import SelectTrigger from './trigger.js';
 import FormTriggerWrapper from './form-trigger-wrapper.js';
+import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
 import styles from './native-select.p.module.css.js';
 const DEFAULT_NO_OPTIONS_MESSAGES = {
   noOptions: 'No options',
@@ -138,6 +140,7 @@ const NativeSelect = _ref6 => {
     size = 'm',
     theme: themeFromProps,
     className = null,
+    id,
     style,
     value = undefined,
     onChange,
@@ -148,9 +151,10 @@ const NativeSelect = _ref6 => {
     label,
     note,
     error,
+    reserveErrorLine = false,
     noOptionsMessage,
     name,
-    boldLabel
+    boldLabel = true
   } = _ref6;
   const theme = useThemeWithUndefined(themeFromProps);
   const [hovered, setHovered] = useState(false);
@@ -196,11 +200,17 @@ const NativeSelect = _ref6 => {
     });
   }
 
+  const currentId = `native-select-${useBackwardCompatibleId()}`;
+  const errorId = `${id ? id : currentId}-error`;
   return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
     className: cn(className, styles.main, SIZE_STYLES[size]),
+    id: id,
     theme: theme,
     size: size,
+    disabled: isDisabled,
     error: error,
+    errorId: errorId,
+    reserveErrorLine: reserveErrorLine,
     label: label,
     note: note,
     onKeyDown: () => false,
@@ -218,12 +228,15 @@ const NativeSelect = _ref6 => {
     disabled: isDisabled ? true : undefined,
     onChange: handleChange,
     name: name,
-    value: (value === null || value === void 0 ? void 0 : value.label) !== '' ? value === null || value === void 0 ? void 0 : value.value : PLACEHOLDER_VALUE
+    value: (value === null || value === void 0 ? void 0 : value.label) !== '' ? value === null || value === void 0 ? void 0 : value.value : PLACEHOLDER_VALUE,
+    "aria-errormessage": error ? errorId : undefined,
+    "aria-invalid": Boolean(error)
   }, optionList)));
 };
 
 NativeSelect.propTypes = {
   className: PropTypes.string,
+  id: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.oneOfType([nativeOptionType, nativeOptionsGroupType])),
   value: nativeOptionType,
   onChange: PropTypes.func,
@@ -233,7 +246,7 @@ NativeSelect.propTypes = {
   isDisabled: PropTypes.bool,
   isLoading: PropTypes.bool,
   trigger: PropTypes.func,
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  error: ErrorMessage.propTypes.children,
   label: PropTypes.node,
   note: PropTypes.node,
   noOptionsMessage: noOptionsMessageType,

package/lib/parts/native-select.p.module.css.js

@@ -1,9 +1,9 @@
 var styles = {
-  "sizeS": "_sizeS_1gl6ux4_6",
-  "sizeM": "_sizeM_1gl6ux4_9",
-  "sizeL": "_sizeL_1gl6ux4_12",
-  "main": "_main_1gl6ux4_16",
-  "wrapper": "_wrapper_1gl6ux4_20",
-  "select": "_select_1gl6ux4_24"
+  "sizeS": "_sizeS_1e02zs3_6",
+  "sizeM": "_sizeM_1e02zs3_9",
+  "sizeL": "_sizeL_1e02zs3_12",
+  "main": "_main_1e02zs3_16",
+  "wrapper": "_wrapper_1e02zs3_20",
+  "select": "_select_1e02zs3_24"
 };
 export { styles as default };

package/lib/parts/trigger.p.module.css.js

@@ -1,31 +1,31 @@
 var styles = {
-  "themeLight": "_themeLight_ufjs6v_27",
-  "themeDark": "_themeDark_ufjs6v_30",
-  "sizeS": "_sizeS_ufjs6v_34",
-  "sizeM": "_sizeM_ufjs6v_37",
-  "sizeL": "_sizeL_ufjs6v_40",
-  "classic": "_classic_ufjs6v_44",
-  "rock": "_rock_ufjs6v_47",
-  "main": "_main_ufjs6v_51",
-  "open": "_open_ufjs6v_80",
-  "searchKeyFocused": "_searchKeyFocused_ufjs6v_85",
-  "error": "_error_ufjs6v_89",
-  "disabled": "_disabled_ufjs6v_95",
-  "enabled": "_enabled_ufjs6v_103",
-  "searchFocused": "_searchFocused_ufjs6v_104",
-  "focused": "_focused_ufjs6v_105",
-  "isMulti": "_isMulti_ufjs6v_138",
-  "iconsWrapper": "_iconsWrapper_ufjs6v_142",
-  "labelWrapper": "_labelWrapper_ufjs6v_157",
-  "label": "_label_ufjs6v_157",
-  "labelNotSelected": "_labelNotSelected_ufjs6v_197",
-  "searchInput": "_searchInput_ufjs6v_210",
-  "multi": "_multi_ufjs6v_240",
-  "tagsContainer": "_tagsContainer_ufjs6v_256",
-  "tag": "_tag_ufjs6v_256",
-  "filledTag": "_filledTag_ufjs6v_279",
-  "toggle": "_toggle_ufjs6v_286",
-  "icon": "_icon_ufjs6v_142",
-  "clearIcon": "_clearIcon_ufjs6v_353"
+  "themeLight": "_themeLight_106h1g8_6",
+  "themeDark": "_themeDark_106h1g8_9",
+  "sizeS": "_sizeS_106h1g8_13",
+  "sizeM": "_sizeM_106h1g8_16",
+  "sizeL": "_sizeL_106h1g8_19",
+  "classic": "_classic_106h1g8_23",
+  "rock": "_rock_106h1g8_26",
+  "main": "_main_106h1g8_30",
+  "open": "_open_106h1g8_60",
+  "searchKeyFocused": "_searchKeyFocused_106h1g8_65",
+  "error": "_error_106h1g8_69",
+  "disabled": "_disabled_106h1g8_75",
+  "enabled": "_enabled_106h1g8_83",
+  "searchFocused": "_searchFocused_106h1g8_84",
+  "focused": "_focused_106h1g8_85",
+  "isMulti": "_isMulti_106h1g8_118",
+  "iconsWrapper": "_iconsWrapper_106h1g8_122",
+  "labelWrapper": "_labelWrapper_106h1g8_137",
+  "label": "_label_106h1g8_137",
+  "labelNotSelected": "_labelNotSelected_106h1g8_177",
+  "searchInput": "_searchInput_106h1g8_190",
+  "multi": "_multi_106h1g8_220",
+  "tagsContainer": "_tagsContainer_106h1g8_236",
+  "tag": "_tag_106h1g8_236",
+  "filledTag": "_filledTag_106h1g8_259",
+  "toggle": "_toggle_106h1g8_266",
+  "icon": "_icon_106h1g8_122",
+  "clearIcon": "_clearIcon_106h1g8_333"
 };
 export { styles as default };

package/lib/parts/use-backward-compatible-id.d.ts

@@ -0,0 +1,4 @@
+export declare const useBackwardCompatibleId: {
+    (): string | number;
+    counter: number;
+};

package/lib/parts/use-backward-compatible-id.js

@@ -0,0 +1,14 @@
+import React, { useRef } from 'react';
+
+const useBackwardCompatibleId = () => {
+  const id = useRef(null);
+
+  if (id.current === null) {
+    id.current = useBackwardCompatibleId.counter++;
+  }
+
+  return (React.useId ? React.useId : () => id.current)();
+};
+
+useBackwardCompatibleId.counter = 0;
+export { useBackwardCompatibleId };