@rescui/checkbox 0.9.5-RUI-286-Fix-tooltip-stacking-f4145b01.1 → 0.10.1

package/lib/checkbox.d.ts

@@ -3,6 +3,7 @@ import { Theme } from '@rescui/ui-contexts';
 import type { CheckboxMode, CheckboxSize } from './parts/checkbox-control-inner';
 export declare type CheckboxProps = {
     className?: string;
+    id?: string;
     /** Checked state. `onChange` callback is required. */
     checked?: boolean;
     /** Node or text to show near the input */
@@ -17,6 +18,11 @@ export declare type CheckboxProps = {
     disabled?: boolean;
     /** Error state */
     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;
     /** Value of the checkbox */
     value?: string;
     /** Change value callback. `event => ...` */

package/lib/checkbox.js

@@ -4,9 +4,10 @@ import PropTypes from 'prop-types';
 import { MenuItem } from '@rescui/menu';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import cn from 'classnames';
-import WarningIcon from './_virtual/warning.js';
+import { ErrorMessage } from '@rescui/form-field';
 import { GroupContext } from './parts/group-context.js';
 import CheckboxControl from './parts/checkbox-control.js';
+import { useBackwardCompatibleId } from './parts/use-backward-compatible-id.js';
 import styles from './parts/checkbox.p.module.css.js';
 const THEME_STYLES = {
   light: styles.themeLight,
@@ -21,6 +22,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
   let {
     children,
     className,
+    id,
     disabled,
     mode = 'classic',
     size: propsSize = 'm',
@@ -32,6 +34,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
     // eslint-disable-next-line react/prop-types
     onClick,
     error,
+    reserveErrorLine = false,
     ...restProps
   } = _ref;
   const theme = useThemeWithUndefined(themeFromProps);
@@ -40,8 +43,12 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
     size: contextSize
   } = useContext(GroupContext);
   const size = !inGroup ? propsSize : contextSize || propsSize;
+  const uniqueId = `checkbox-list-${useBackwardCompatibleId()}`;
+  const errorId = `${id ? id : uniqueId}-error`;
   return /*#__PURE__*/React.createElement("div", {
     className: cn(className, styles.container, THEME_STYLES[theme], SIZE_STYLES[size]),
+    id: id,
+    "data-test": "checkbox__wrapper",
     "data-rs-internal": 'checkbox'
   }, /*#__PURE__*/React.createElement(MenuItem, {
     tag: 'label',
@@ -60,18 +67,16 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(_ref, ref) {
       mode: mode,
       theme: theme,
       isError: Boolean(error),
+      errorId: errorId,
       notUseLabelTag: true,
       ...restProps
     })
-  }, children), error && typeof error !== 'boolean' && /*#__PURE__*/React.createElement("div", {
+  }, children), /*#__PURE__*/React.createElement(ErrorMessage, {
+    id: errorId,
     className: styles.errorMessage,
-    "data-test": "checkbox-error-message",
-    "data-rs-internal": "checkbox__error-message"
-  }, /*#__PURE__*/React.createElement(WarningIcon, {
-    "data-rs-internal": "checkbox__error-icon",
-    className: styles.errorIcon,
-    "data-render-all-sizes": true
-  }), /*#__PURE__*/React.createElement("span", null, error)));
+    "data-test": 'checkbox__error',
+    reserveLine: reserveErrorLine
+  }, error));
 });
 Checkbox.propTypes = {
   checked: PropTypes.bool,
@@ -87,6 +92,9 @@ Checkbox.propTypes = {
   onBlur: PropTypes.func,
   indeterminate: PropTypes.bool,
   mode: PropTypes.oneOf(['classic', 'rock']),
-  size: PropTypes.oneOf(['s', 'm', 'l'])
+  size: PropTypes.oneOf(['s', 'm', 'l']),
+  className: PropTypes.string,
+  id: PropTypes.string,
+  reserveErrorLine: PropTypes.bool
 };
 export { Checkbox, Checkbox as default };