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

package/lib/parts/checkbox-control-inner.d.ts

@@ -30,6 +30,7 @@ export declare type CheckboxControlProps = {
     notUseLabelTag?: boolean;
     size?: CheckboxSize;
     mode?: CheckboxMode;
+    errorId?: string;
 };
 declare const CheckboxControlInner: React.ForwardRefExoticComponent<CheckboxControlProps & React.RefAttributes<HTMLInputElement>>;
 export default CheckboxControlInner;

package/lib/parts/checkbox-control-inner.js

@@ -22,11 +22,11 @@ const DEFAULT_MODE = 'classic';
 const CheckboxControlInner = /*#__PURE__*/React.forwardRef(function CheckboxControlInner(_ref, ref) {
   let {
     className,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore, react/prop-types
-    // @ts-ignore
+    // @ts-expect-error: omit children from restProps
     children,
     theme: themeFromProps,
     isError,
+    errorId,
     disabled,
     size = DEFAULT_SIZE,
     mode = DEFAULT_MODE,
@@ -46,7 +46,9 @@ const CheckboxControlInner = /*#__PURE__*/React.forwardRef(function CheckboxCont
     ref: ref,
     className: styles.input,
     type: "checkbox",
-    disabled: disabled
+    disabled: disabled,
+    "aria-errormessage": isError ? errorId : undefined,
+    "aria-invalid": Boolean(isError)
   }), /*#__PURE__*/React.createElement("span", {
     className: cn(styles.icon, isError && styles.iconError),
     "data-test": 'checkbox-icon'
@@ -69,6 +71,7 @@ CheckboxControlInner.propTypes = {
   indeterminate: PropTypes.bool,
   notUseLabelTag: PropTypes.bool,
   size: PropTypes.oneOf(['s', 'm', 'l']),
-  mode: PropTypes.oneOf(['classic', 'rock'])
+  mode: PropTypes.oneOf(['classic', 'rock']),
+  errorId: PropTypes.string
 };
 export { CheckboxControlInner as default };

package/lib/parts/checkbox-control.js

@@ -10,6 +10,7 @@ const CheckboxControl = /*#__PURE__*/React.forwardRef(function CheckboxControl(p
       handleCheckboxChange,
       value: groupValue,
       isError,
+      errorId,
       theme,
       size,
       mode,
@@ -29,6 +30,7 @@ const CheckboxControl = /*#__PURE__*/React.forwardRef(function CheckboxControl(p
       onChange,
       checked,
       isError: propsIsError,
+      errorId: propsErrorId,
       disabled: propsDisabled,
       theme: propsTheme,
       size: propsSize,
@@ -37,6 +39,7 @@ const CheckboxControl = /*#__PURE__*/React.forwardRef(function CheckboxControl(p
     } = props;
     return /*#__PURE__*/React.createElement(CheckboxControlInner, {
       isError: isError || propsIsError,
+      errorId: errorId || propsErrorId,
       value: value,
       onChange: handleCheckboxChange,
       checked: _includesInstanceProperty(groupValue).call(groupValue, value),

package/lib/parts/checkbox-list.d.ts

@@ -3,13 +3,23 @@ import { Theme } from '@rescui/ui-contexts';
 import CSS from 'csstype';
 export declare type CheckboxListProps = {
     className?: string;
+    id?: string;
     style?: CSS.Properties;
     mode?: 'classic' | 'rock';
     size?: 's' | 'm' | 'l';
     onChange?: (val: string[]) => void;
     value?: string[];
     defaultValue?: string[];
-    error?: boolean | React.ReactNode;
+    label?: React.ReactNode;
+    note?: React.ReactNode;
+    /** Error flag or message */
+    error?: 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;
+    boldLabel?: boolean;
     theme?: Theme;
     disabled?: boolean;
     children?: React.ReactNode;

package/lib/parts/checkbox-list.js

@@ -4,18 +4,19 @@ import PropTypes from 'prop-types';
 import { Menu } from '@rescui/menu';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
-import WarningIcon from '../_virtual/warning.js';
-import styles from './checkbox.p.module.css.js';
+import { ErrorMessage, shouldRenderErrorMessage } from '@rescui/form-field';
+import styles from './checkbox-list.p.module.css.js';
 import CheckboxManager from './checkbox-manager.js';
+import { useBackwardCompatibleId } from './use-backward-compatible-id.js';
 const THEME_STYLES = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
 const SIZE_STYLES = {
-  s: styles.listSizeS,
-  m: styles.listSizeM,
-  l: styles.listSizeL
-};
+  s: styles.sizeS,
+  m: styles.sizeM,
+  l: styles.sizeL
+}; // eslint-disable-next-line complexity
 
 const CheckboxList = _ref => {
   let {
@@ -27,13 +28,20 @@ const CheckboxList = _ref => {
     onChange,
     value,
     defaultValue,
+    label,
+    note,
     error,
+    reserveErrorLine = false,
     className,
-    // eslint-disable-next-line react/prop-types
+    id,
     style,
+    boldLabel = true,
     ...restProps
   } = _ref;
   const theme = useThemeWithUndefined(themeFromProps);
+  const uniqueId = `checkbox-list-${useBackwardCompatibleId()}`;
+  const errorId = `${id ? id : uniqueId}-error`;
+  const hasFooter = Boolean(note) || shouldRenderErrorMessage(error, reserveErrorLine);
   return /*#__PURE__*/React.createElement(CheckboxManager, {
     theme: theme,
     defaultValue: defaultValue,
@@ -45,18 +53,18 @@ const CheckboxList = _ref => {
     disabled: disabled,
     size: size,
     mode: mode
-  }, /*#__PURE__*/React.createElement("div", {
-    className: cn(className, styles.container, THEME_STYLES[theme], SIZE_STYLES[size] || styles.listSizeM),
-    style: style
-  }, error && typeof error !== 'boolean' && /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.errorMessage, styles.list),
-    "data-test": "checkbox-error-message",
-    "data-rs-internal": "checkbox-list__error-message"
-  }, /*#__PURE__*/React.createElement(WarningIcon, {
-    "data-rs-internal": "checkbox-list__error-icon",
-    className: styles.errorIcon,
-    "data-render-all-sizes": true
-  }), /*#__PURE__*/React.createElement("span", null, error)), /*#__PURE__*/React.createElement(Menu, {
+  }, /*#__PURE__*/React.createElement("fieldset", {
+    className: cn(className, styles.container, THEME_STYLES[theme], SIZE_STYLES[size] || styles.sizeM, Boolean(error) && styles.error, disabled && styles.disabled),
+    id: id,
+    style: style,
+    "aria-errormessage": error ? errorId : undefined,
+    "aria-invalid": Boolean(error),
+    "data-test": "checkbox-list"
+  }, label && /*#__PURE__*/React.createElement("legend", {
+    className: styles.label,
+    "data-test": 'checkbox-list__label',
+    "data-rs-internal": boldLabel ? 'checkbox-list__bold-label' : 'checkbox-list__label'
+  }, label), /*#__PURE__*/React.createElement(Menu, {
     tag: 'div',
     itemTag: null,
     size: size,
@@ -64,8 +72,20 @@ const CheckboxList = _ref => {
     disabled: disabled,
     "data-rs-internal": 'checkbox__menu',
     theme: theme,
+    className: styles.inner,
     ...restProps
-  }, children)));
+  }, children), hasFooter && /*#__PURE__*/React.createElement("div", {
+    className: styles.footer
+  }, /*#__PURE__*/React.createElement(ErrorMessage, {
+    id: errorId,
+    className: styles.errorMessage,
+    "data-test": 'checkbox-list__error',
+    reserveLine: reserveErrorLine
+  }, error), note && /*#__PURE__*/React.createElement("div", {
+    className: styles.note,
+    "data-test": 'checkbox-list__note',
+    "data-rs-internal": "checkbox-list__note"
+  }, note))));
 };
 
 CheckboxList.propTypes = {
@@ -74,8 +94,15 @@ CheckboxList.propTypes = {
   onChange: PropTypes.func,
   value: PropTypes.array,
   defaultValue: PropTypes.array,
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  error: ErrorMessage.propTypes.children,
+  style: PropTypes.object,
   theme: PropTypes.oneOf(['light', 'dark']),
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  reserveErrorLine: PropTypes.bool,
+  label: PropTypes.node,
+  note: PropTypes.node,
+  boldLabel: PropTypes.bool
 };
 export { CheckboxList as default };

package/lib/parts/checkbox-list.p.module.css.js

@@ -0,0 +1,16 @@
+var styles = {
+  "themeLight": "_themeLight_1txuou8_6",
+  "themeDark": "_themeDark_1txuou8_9",
+  "container": "_container_1txuou8_13",
+  "sizeS": "_sizeS_1txuou8_18",
+  "sizeM": "_sizeM_1txuou8_21",
+  "sizeL": "_sizeL_1txuou8_24",
+  "inner": "_inner_1txuou8_28",
+  "label": "_label_1txuou8_32",
+  "disabled": "_disabled_1txuou8_39",
+  "footer": "_footer_1txuou8_44",
+  "errorMessage": "_errorMessage_1txuou8_49",
+  "error": "_error_1txuou8_49",
+  "note": "_note_1txuou8_58"
+};
+export { styles as default };

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

@@ -1,31 +1,25 @@
 var styles = {
-  "themeLight": "_themeLight_1yjjktt_8",
-  "themeDark": "_themeDark_1yjjktt_11",
-  "container": "_container_1yjjktt_15",
-  "listSizeS": "_listSizeS_1yjjktt_20",
-  "listSizeM": "_listSizeM_1yjjktt_23",
-  "listSizeL": "_listSizeL_1yjjktt_26",
-  "checkboxSizeS": "_checkboxSizeS_1yjjktt_30",
-  "checkboxSizeM": "_checkboxSizeM_1yjjktt_33",
-  "checkboxSizeL": "_checkboxSizeL_1yjjktt_36",
-  "sizeS": "_sizeS_1yjjktt_40",
-  "sizeM": "_sizeM_1yjjktt_43",
-  "sizeL": "_sizeL_1yjjktt_46",
-  "classic": "_classic_1yjjktt_50",
-  "rock": "_rock_1yjjktt_53",
-  "checkbox": "_checkbox_1yjjktt_30",
-  "errorMessage": "_errorMessage_1yjjktt_79",
-  "list": "_list_1yjjktt_20",
-  "errorIcon": "_errorIcon_1yjjktt_93",
-  "input": "_input_1yjjktt_99",
-  "icon": "_icon_1yjjktt_110",
-  "enabled": "_enabled_1yjjktt_126",
-  "indeterminate": "_indeterminate_1yjjktt_130",
-  "disabled": "_disabled_1yjjktt_138",
-  "error": "_error_1yjjktt_79",
-  "checkmark": "_checkmark_1yjjktt_194",
-  "markS": "_markS_1yjjktt_219",
-  "markM": "_markM_1yjjktt_222",
-  "markL": "_markL_1yjjktt_225"
+  "themeLight": "_themeLight_d1mcrn_8",
+  "themeDark": "_themeDark_d1mcrn_11",
+  "checkboxSizeS": "_checkboxSizeS_d1mcrn_15",
+  "checkboxSizeM": "_checkboxSizeM_d1mcrn_18",
+  "checkboxSizeL": "_checkboxSizeL_d1mcrn_21",
+  "sizeS": "_sizeS_d1mcrn_25",
+  "sizeM": "_sizeM_d1mcrn_28",
+  "sizeL": "_sizeL_d1mcrn_31",
+  "classic": "_classic_d1mcrn_35",
+  "rock": "_rock_d1mcrn_38",
+  "checkbox": "_checkbox_d1mcrn_15",
+  "input": "_input_d1mcrn_65",
+  "icon": "_icon_d1mcrn_76",
+  "enabled": "_enabled_d1mcrn_92",
+  "indeterminate": "_indeterminate_d1mcrn_96",
+  "disabled": "_disabled_d1mcrn_104",
+  "error": "_error_d1mcrn_133",
+  "checkmark": "_checkmark_d1mcrn_160",
+  "markS": "_markS_d1mcrn_185",
+  "markM": "_markM_d1mcrn_188",
+  "markL": "_markL_d1mcrn_191",
+  "errorMessage": "_errorMessage_d1mcrn_195"
 };
 export { styles as default };

package/lib/parts/group-context.d.ts

@@ -8,6 +8,7 @@ export declare type GroupContextValue = {
     inGroup: boolean;
     handleCheckboxChange?: React.ChangeEventHandler<HTMLInputElement>;
     isError?: boolean;
+    errorId?: string;
     theme?: Theme;
     size?: CheckboxSize;
     mode?: 'classic' | 'rock';

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 };