@rescui/select 0.14.4-RUI-285-Support-blur-for-glow-hover-6f393bc1.1 → 0.15.0

package/lib/select.d.ts

@@ -12,6 +12,7 @@ export interface SelectProps {
      * Additional class name
      */
     className?: string;
+    id?: string;
     /**
      * Array of options or option groups
      */
@@ -60,6 +61,11 @@ export interface SelectProps {
      * 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 Select element (use with forms)
      */
@@ -72,7 +78,6 @@ export interface SelectProps {
      * Note element below then Select element (use with forms)
      */
     note?: React.ReactNode;
-    id?: string;
     /**
      * Text to display when there are no options
      */

package/lib/select.js

@@ -6,10 +6,12 @@ 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 SelectTrigger from './parts/trigger.js';
 import FormTriggerWrapper from './parts/form-trigger-wrapper.js';
 import { useObservableForceRerender } from './parts/use-observable-force-rerender.js';
+import { useBackwardCompatibleId } from './parts/use-backward-compatible-id.js';
 import { optionType, optionsGroupType, noOptionsMessageConfigType } from './common-prop-types.js';
 import { useStrongMemo, getDefaultCursorIndex, isGroupsEmpty, getMovedCursorIndex, shouldOpenSelect, isIndexMatchCursor, withoutGroupsLabel, getPlainOptionsFromGroups, getEmptyMessage, OptionGroupTypes, getOptionValue, convertToOptionGroupsIfNeeded, escapeRegex, getTextFromNodes, calculateMaxHeight } from './utils.js';
 import { ARROW_DOWN, ARROW_UP, ENTER, SPACE, TAB, ESCAPE, BACKSPACE } from './key-codes.js';
@@ -94,6 +96,7 @@ const Select = _ref2 => {
     mode = 'classic',
     theme: themeFromProps,
     className = null,
+    id,
     value = undefined,
     onChange,
     placeholder,
@@ -102,8 +105,10 @@ const Select = _ref2 => {
     isDisabled = false,
     isSearchable = false,
     noOptionsMessage,
+    error,
     placement = 'bottom',
-    boldLabel,
+    boldLabel = true,
+    reserveErrorLine = false,
     ...restProps
   } = _ref2;
   const [triggerFormWrapperRef, setTriggerFormWrapperRef] = useState(null);
@@ -292,6 +297,8 @@ const Select = _ref2 => {
   const actualSize = sizeFromCss || size;
   const maxHeight = calculateMaxHeight(actualSize);
   const withGroupsLabel = !withoutGroupsLabel(filteredGroups);
+  const uniqueId = `select-${useBackwardCompatibleId()}`;
+  const errorId = `${id ? id : uniqueId}-error`;
   return /*#__PURE__*/React.createElement(Dropdown, {
     theme: theme,
     onRequestClose: handleClose,
@@ -311,13 +318,20 @@ const Select = _ref2 => {
       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)
       }, /*#__PURE__*/React.createElement("div", {
         ref: observableRef,
         className: styles.observable
@@ -341,8 +355,7 @@ const Select = _ref2 => {
         onSearchChange: handleSearchInputChange,
         onClick: handleClick,
         onClearClick: handleClearClick,
-        error: Boolean(restProps.error),
-        id: restProps.id,
+        error: Boolean(error),
         "data-target": "trigger"
       }));
     },
@@ -379,7 +392,7 @@ Select.propTypes = {
   isSearchable: PropTypes.bool,
   isDisabled: PropTypes.bool,
   isLoading: PropTypes.bool,
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  error: ErrorMessage.propTypes.children,
   label: PropTypes.node,
   id: PropTypes.string,
   note: PropTypes.node,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.14.4-RUI-285-Support-blur-for-glow-hover-6f393bc1.1+6f393bc1",
+  "version": "0.15.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,10 +16,11 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "0.9.4-RUI-285-Support-blur-for-glow-hover-6f393bc1.1+6f393bc1",
-    "@rescui/menu": "0.13.2-RUI-285-Support-blur-for-glow-hover-6f393bc1.1+6f393bc1",
-    "@rescui/tag": "0.13.4-RUI-285-Support-blur-for-glow-hover-6f393bc1.1+6f393bc1",
-    "@rescui/use-resize-observer": "0.3.1-RUI-285-Support-blur-for-glow-hover-6f393bc1.96+6f393bc1",
+    "@rescui/dropdown": "^0.9.4",
+    "@rescui/form-field": "^0.1.0",
+    "@rescui/menu": "^0.13.2",
+    "@rescui/tag": "^0.13.4",
+    "@rescui/use-resize-observer": "^0.3.0",
     "classnames": "^2.2.6",
     "scroll-into-view-if-needed": "2.2.20"
   },
@@ -29,10 +30,10 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.2.13-RUI-285-Support-blur-for-glow-hover-6f393bc1.50+6f393bc1",
-    "@rescui/scripts": "0.5.1",
-    "@rescui/typography": "0.24.4-RUI-285-Support-blur-for-glow-hover-6f393bc1.1+6f393bc1",
-    "@rescui/visual-regression": "0.1.4",
+    "@rescui/colors": "^0.3.0",
+    "@rescui/scripts": "^0.5.1",
+    "@rescui/typography": "^0.24.4",
+    "@rescui/visual-regression": "^0.1.4",
     "sniffr": "^1.2.0"
   },
   "scripts": {
@@ -40,5 +41,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "6f393bc1b7394a744b9737ba9fe13126c3163219"
+  "gitHead": "1c29c8940bcec78d637ea6070ee8a63c258c8e89"
 }

package/lib/_virtual/warning.js

@@ -1,106 +0,0 @@
-import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'classnames';
-import styles from './index.css.js';
-const sizeStyles = {
-  "xs": styles.sizeXS,
-  "s": styles.sizeS,
-  "m": styles.sizeM,
-  "l": styles.sizeL
-};
-const Size = {
-  "xs": "xs",
-  "s": "s",
-  "m": "m",
-  "l": "l"
-};
-const WarningIcon16 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 16 16"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m6.303 1.989-5.027 8.874C.483 12.263 1.494 14 3.103 14h9.793c1.609 0 2.62-1.736 1.827-3.137L9.696 1.99C8.949.67 7.05.67 6.303 1.989M8 12a1 1 0 1 1 0-2 1 1 0 0 1 0 2m0-8a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0v-4A.5.5 0 0 1 8 4"
-})));
-WarningIcon16.displayName = 'WarningIcon16';
-const WarningIcon20 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 20 20"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m8.042 3.141-5.8 10.24C1.327 14.997 2.494 17 4.35 17h11.3c1.856 0 3.023-2.003 2.108-3.62l-5.8-10.239c-.862-1.521-3.054-1.521-3.916 0M10 5.25a.75.75 0 0 1 .75.75v5a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75m0 9.25a1 1 0 1 1 0-2 1 1 0 0 1 0 2"
-})));
-WarningIcon20.displayName = 'WarningIcon20';
-const WarningIcon24 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 24 24"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "m9.52 3.446-7.346 12.97C1.014 18.463 2.492 21 4.844 21h14.312c2.352 0 3.83-2.537 2.67-4.584L14.48 3.446c-1.092-1.928-3.868-1.928-4.96 0M12 7a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1m0 11a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"
-})));
-WarningIcon24.displayName = 'WarningIcon24';
-const WarningIcon28 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
-  viewBox: "0 0 28 28"
-}, props, {
-  ref: ref
-}), /*#__PURE__*/React.createElement("path", {
-  d: "M11.26 4.598 3.14 18.933C1.858 21.195 3.492 24 6.09 24h15.82c2.599 0 4.232-2.805 2.951-5.067l-8.12-14.335c-1.207-2.13-4.275-2.13-5.481 0M14 8a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1m0 12a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"
-})));
-WarningIcon28.displayName = 'WarningIcon28';
-const WarningIcon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    theme,
-    size: sizeFromProps = "m",
-    className,
-    style,
-    ['data-render-all-sizes']: renderAllSizes = false,
-    ...props
-  } = _ref;
-  const size = sizeFromProps in Size ? sizeFromProps : "m";
-  const mainProps = { ...props,
-    className: cn(styles.icon, styles[theme], sizeStyles[size], renderAllSizes && styles.allVariants, className),
-    style: renderAllSizes ? {
-      '--rs-icon-ar-width': 28,
-      '--rs-icon-ar-height': 28,
-      ...style
-    } : style,
-    ref
-  };
-
-  if (renderAllSizes) {
-    return /*#__PURE__*/React.createElement("svg", _extends({
-      viewBox: "0 0 28 28"
-    }, mainProps), /*#__PURE__*/React.createElement(WarningIcon16, {
-      className: styles.variant16
-    }), /*#__PURE__*/React.createElement(WarningIcon20, {
-      className: styles.variant20
-    }), /*#__PURE__*/React.createElement(WarningIcon24, {
-      className: styles.variant24
-    }), /*#__PURE__*/React.createElement(WarningIcon28, {
-      className: styles.variant28
-    }));
-  }
-
-  if (size === Size['xs']) {
-    return /*#__PURE__*/React.createElement(WarningIcon16, mainProps);
-  }
-
-  if (size === Size['s']) {
-    return /*#__PURE__*/React.createElement(WarningIcon20, mainProps);
-  }
-
-  if (size === Size['m']) {
-    return /*#__PURE__*/React.createElement(WarningIcon24, mainProps);
-  }
-
-  return /*#__PURE__*/React.createElement(WarningIcon28, mainProps);
-});
-WarningIcon.displayName = 'WarningIcon';
-WarningIcon.propTypes = {
-  className: PropTypes.string,
-  theme: PropTypes.oneOf(["light", "dark"]),
-  size: PropTypes.oneOf(["xs", "s", "m", "l"]),
-  'data-render-all-sizes': PropTypes.bool,
-  style: PropTypes.object
-};
-export { Size, WarningIcon as default };