@rescui/switcher 0.12.11 → 0.13.1-RUI-293-Update-menu-component-7a032357e.20

package/lib/switcher.js

@@ -5,6 +5,7 @@ import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 import styles from './switcher.p.module.css.js';
+import { useSafeId } from './use-safe-id.js';
 const MARK_TRANSITION_DURATION = '0.2s';
 const sizeToClass = {
   l: styles.sizeL,
@@ -35,19 +36,27 @@ const optionRenderer = (_ref, ref) => {
     value,
     icon,
     disabled,
-    onClick,
-    selected
+    onChange,
+    selected,
+    name,
+    'aria-label': ariaLabel
   } = _ref;
   const isWithoutText = isNodeEmpty(label);
-  return /*#__PURE__*/React.createElement("button", {
-    key: String(value),
+  return /*#__PURE__*/React.createElement("label", {
     ref: ref,
-    onClick: onClick,
-    type: "button",
+    key: String(value),
     "data-rs-internal": 'switcher__option',
+    className: cn(styles.option, selected && styles.selected),
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    value: String(value),
+    onChange: onChange,
+    className: styles.radio,
+    checked: selected,
     disabled: disabled,
-    className: cn(styles.option, selected && styles.selected)
-  }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
+    name: name
+  }), /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
     className: cn(icon.props.className, styles.icon),
     'data-render-all-sizes': true
   }), !isWithoutText && /*#__PURE__*/React.createElement("span", null, label));
@@ -62,17 +71,19 @@ function Switcher(_ref2) {
     size = 'm',
     disabled,
     compact = false,
-    ['data-e2e']: e2eId,
     options,
     value: switcherValue,
     mode = 'classic',
     iconPosition = 'left',
     onChange,
-    style
+    style,
+    name,
+    ...rest
   } = _ref2;
   const refsArray = useRef([]);
   const containerRef = useRef(null);
   const theme = useThemeWithUndefined(themeFromProps);
+  const uniqueId = useSafeId();
   const handleOptionRef = useCallback(index => ref => {
     if (!ref) {
       return;
@@ -119,20 +130,21 @@ function Switcher(_ref2) {
 
   useEffect(() => updateMark(true), [activeIndex]);
   useResizeObserver(containerRef, () => updateMark(false));
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", { ...rest,
     className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
-    "data-e2e": e2eId,
     ref: containerRef,
     "data-rs-internal": 'switcher',
     "data-test": cn(`switcher`, disabled && `switcher-disabled`),
     style: { ...style,
       '--_rs-switcher-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
-    }
+    },
+    role: "radiogroup"
   }, options.map((_ref3, index) => {
     let {
       value,
       label,
-      icon
+      icon,
+      'aria-label': optionAriaLabel
     } = _ref3;
     return /*#__PURE__*/React.createElement(Option, {
       key: String(value),
@@ -140,9 +152,11 @@ function Switcher(_ref2) {
       label: label,
       icon: icon,
       disabled: disabled,
-      onClick: () => onChange(value),
+      onChange: () => onChange(value),
       ref: handleOptionRef(index),
-      selected: options[activeIndex]?.value === value
+      selected: options[activeIndex]?.value === value,
+      name: name ?? `rs-switcher-${uniqueId}`,
+      "aria-label": optionAriaLabel
     });
   }), /*#__PURE__*/React.createElement("span", {
     className: cn(styles.mark),

package/lib/switcher.p.module.css.js

@@ -1,21 +1,22 @@
 var styles = {
-  "themeLight": "_themeLight_1whkdot_6",
-  "themeDark": "_themeDark_1whkdot_9",
-  "sizeXS": "_sizeXS_1whkdot_13",
-  "sizeS": "_sizeS_1whkdot_16",
-  "sizeM": "_sizeM_1whkdot_19",
-  "sizeL": "_sizeL_1whkdot_22",
-  "modeClassic": "_modeClassic_1whkdot_26",
-  "modeRock": "_modeRock_1whkdot_29",
-  "compact": "_compact_1whkdot_33",
-  "switcher": "_switcher_1whkdot_37",
-  "disabled": "_disabled_1whkdot_55",
-  "alignIconLeft": "_alignIconLeft_1whkdot_60",
-  "alignIconRight": "_alignIconRight_1whkdot_63",
-  "option": "_option_1whkdot_67",
-  "selected": "_selected_1whkdot_118",
-  "hiddenMark": "_hiddenMark_1whkdot_127",
-  "icon": "_icon_1whkdot_158",
-  "mark": "_mark_1whkdot_171"
+  "themeLight": "_themeLight_dklen2_6",
+  "themeDark": "_themeDark_dklen2_9",
+  "sizeXS": "_sizeXS_dklen2_13",
+  "sizeS": "_sizeS_dklen2_16",
+  "sizeM": "_sizeM_dklen2_19",
+  "sizeL": "_sizeL_dklen2_22",
+  "modeClassic": "_modeClassic_dklen2_26",
+  "modeRock": "_modeRock_dklen2_29",
+  "compact": "_compact_dklen2_33",
+  "switcher": "_switcher_dklen2_37",
+  "disabled": "_disabled_dklen2_55",
+  "alignIconLeft": "_alignIconLeft_dklen2_60",
+  "alignIconRight": "_alignIconRight_dklen2_63",
+  "option": "_option_dklen2_67",
+  "selected": "_selected_dklen2_118",
+  "hiddenMark": "_hiddenMark_dklen2_127",
+  "icon": "_icon_dklen2_158",
+  "mark": "_mark_dklen2_171",
+  "radio": "_radio_dklen2_199"
 };
 export { styles as default };

package/lib/use-safe-id.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useSafeId: typeof React.useId;

package/lib/use-safe-id.js

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

package/lib/vertical-switcher.d.ts

@@ -1,35 +1,62 @@
-import React from 'react';
-export declare type VerticalSwitcherOptionIconPosition = 'left' | 'right';
-export declare type VerticalSwitcherSize = 'l' | 'm' | 's' | 'xs';
-export declare type VerticalSwitcherTheme = 'light' | 'dark';
-export declare type VerticalSwitcherMode = 'rock' | 'classic';
-export declare type VerticalSwitcherOption<OptionsValueType> = {
-    label?: React.ReactNode;
-    value: OptionsValueType;
-    /** Additional icon */
-    icon?: React.ReactNode;
-};
-export declare type VerticalSwitcherOptionForDocs = VerticalSwitcherOption<any>;
-export interface VerticalSwitcherProps<ValueType, OptionsValueType extends ValueType> {
-    /** Current selected value */
-    value: ValueType;
-    /** Array of options */
-    options?: VerticalSwitcherOption<OptionsValueType>[];
-    onChange: (value: OptionsValueType) => void;
-    className?: string;
-    theme?: VerticalSwitcherTheme;
-    size?: VerticalSwitcherSize;
-    /** Appearance mode */
-    mode?: VerticalSwitcherMode;
-    disabled?: boolean;
-    /** Identifier for e2e tests */
-    'data-e2e'?: string;
-    /** **Works only if the `icon` on options is present.** Additional icon position. */
-    iconPosition?: VerticalSwitcherOptionIconPosition;
-    /** CSS style object */
-    style?: React.CSSProperties;
-}
-export declare function VerticalSwitcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, ['data-e2e']: e2eId, options: rawOptions, value: switcherValue, mode, iconPosition, onChange, style }: VerticalSwitcherProps<ValueType, OptionsValueType>): JSX.Element;
-export declare namespace VerticalSwitcher {
-    var propTypes: {};
-}
+import React from 'react';
+import type { JSX } from 'react';
+import PropTypes from 'prop-types';
+export type VerticalSwitcherOptionIconPosition = 'left' | 'right';
+export type VerticalSwitcherSize = 'l' | 'm' | 's' | 'xs';
+export type VerticalSwitcherTheme = 'light' | 'dark';
+export type VerticalSwitcherMode = 'rock' | 'classic';
+export type VerticalSwitcherOption<OptionsValueType> = {
+    label?: React.ReactNode;
+    value: OptionsValueType;
+    /** Additional icon */
+    icon?: React.ReactNode;
+    /** Optional a11y label for the option. May be useful for icon-only options. */
+    'aria-label'?: string;
+};
+export type VerticalSwitcherOptionForDocs = VerticalSwitcherOption<any>;
+interface VerticalSwitcherExplicitProps<ValueType, OptionsValueType extends ValueType> {
+    /** Current selected value */
+    value: ValueType;
+    /** Array of options */
+    options?: VerticalSwitcherOption<OptionsValueType>[];
+    onChange: (value: OptionsValueType) => void;
+    className?: string;
+    theme?: VerticalSwitcherTheme;
+    size?: VerticalSwitcherSize;
+    /** Appearance mode */
+    mode?: VerticalSwitcherMode;
+    disabled?: boolean;
+    /** Identifier for e2e tests */
+    'data-e2e'?: string;
+    /** **Works only if the `icon` on options is present.** Additional icon position. */
+    iconPosition?: VerticalSwitcherOptionIconPosition;
+    /** CSS style object */
+    style?: React.CSSProperties;
+    /** Optional a11y label for the switcher. Recommended to use either that or `aria-labelledby`. */
+    'aria-label'?: string;
+    /** Optional a11y label reference for the switcher. Recommended to use either that or `aria-label`. */
+    'aria-labelledby'?: string;
+    /** Optional name of all `input[type="radio"]` children. if not set, it will fallback to a randomly generated name. */
+    name?: string;
+}
+export type VerticalSwitcherProps<ValueType, OptionsValueType extends ValueType> = VerticalSwitcherExplicitProps<ValueType, OptionsValueType> & Omit<React.HTMLProps<HTMLSpanElement>, keyof VerticalSwitcherExplicitProps<ValueType, OptionsValueType>>;
+export declare function VerticalSwitcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, options: rawOptions, value: switcherValue, mode, iconPosition, onChange, style, name, ...rest }: VerticalSwitcherProps<ValueType, OptionsValueType>): JSX.Element;
+export declare namespace VerticalSwitcher {
+    var propTypes: {
+        options: PropTypes.Validator<PropTypes.InferProps<{
+            label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+            value: PropTypes.Validator<any>;
+            icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        }>[]>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        value: PropTypes.Validator<any>;
+        className: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        theme: PropTypes.Requireable<string>;
+        iconPosition: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        style: PropTypes.Requireable<object>;
+        'data-e2e': PropTypes.Requireable<string>;
+    };
+}
+export {};

package/lib/vertical-switcher.js

@@ -5,6 +5,7 @@ import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { useResizeObserver } from '@rescui/use-resize-observer';
 import styles from './vertical-switcher.p.module.css.js';
+import { useSafeId } from './use-safe-id.js';
 const MARK_TRANSITION_DURATION = '0.2s'; // eslint-disable-next-line @typescript-eslint/no-empty-function
 
 const noop = () => {};
@@ -13,7 +14,8 @@ const verticalSwitcherContext = /*#__PURE__*/createContext({
   switcherValue: null,
   onChange: noop,
   handleOptionRef: () => noop,
-  disabled: null
+  disabled: null,
+  name: null
 });
 const sizeToClass = {
   l: styles.sizeL,
@@ -45,7 +47,8 @@ const processOptions = _ref => {
     options.push({
       label: option.label,
       value: option.value,
-      icon: option.icon
+      icon: option.icon,
+      'aria-label': option['aria-label']
     });
 
     if ( /*#__PURE__*/React.isValidElement(option.icon) && iconPosition === 'left') {
@@ -84,26 +87,34 @@ function Option(_ref2) {
     label,
     value,
     icon,
-    index
+    index,
+    'aria-label': ariaLabel
   } = _ref2;
   const {
     switcherValue,
     onChange,
     handleOptionRef,
-    disabled
+    disabled,
+    name
   } = useContext(verticalSwitcherContext);
   const selected = switcherValue === value;
   const isWithoutText = isNodeEmpty(label);
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("label", {
     key: String(value),
     ref: handleOptionRef(index),
-    onClick: () => onChange(value),
-    type: "button",
     "data-rs-internal": 'vertical-switcher__option',
-    disabled: disabled,
     className: cn(styles.option, selected && styles.selected),
-    "data-test": cn(`vertical-switcher-option`, selected && ' vertical-switcher-option-selected')
-  }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
+    "data-test": cn(`vertical-switcher-option`, selected && ' vertical-switcher-option-selected'),
+    "aria-label": ariaLabel
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    value: String(value),
+    onChange: () => onChange(value),
+    className: styles.radio,
+    checked: selected,
+    disabled: disabled,
+    name: name
+  }), /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
     className: cn(icon.props.className, styles.icon),
     'data-render-all-sizes': true
   }), !isWithoutText && /*#__PURE__*/React.createElement("span", {
@@ -117,17 +128,19 @@ function VerticalSwitcher(_ref3) {
     theme: themeFromProps,
     size = 'm',
     disabled,
-    ['data-e2e']: e2eId,
     options: rawOptions,
     value: switcherValue,
     mode = 'classic',
     iconPosition = 'left',
     onChange,
-    style
+    style,
+    name,
+    ...rest
   } = _ref3;
   const refsArray = useRef([]);
   const containerRef = useRef(null);
   const theme = useThemeWithUndefined(themeFromProps);
+  const uniqueId = useSafeId();
   const {
     options,
     activeIndex
@@ -184,34 +197,37 @@ function VerticalSwitcher(_ref3) {
   useResizeObserver(containerRef, () => updateMark(false), {
     ignoreFirstCall: true
   });
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("span", { ...rest,
     className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
-    "data-e2e": e2eId,
     ref: containerRef,
     "data-rs-internal": 'vertical-switcher',
     "data-test": cn(`vertical-switcher`, disabled && `vertical-switcher-disabled`),
     style: { ...style,
       '--_rs-switcher-vertical-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
-    }
+    },
+    role: "radiogroup"
   }, /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
     value: {
       switcherValue: options[activeIndex]?.value,
       onChange,
       handleOptionRef,
-      disabled
+      disabled,
+      name: name ?? `rs-vertical-switcher-${uniqueId}`
     }
   }, options.map((_ref4, index) => {
     let {
       value,
       label,
-      icon
+      icon,
+      'aria-label': optionAriaLabel
     } = _ref4;
     return /*#__PURE__*/React.createElement(Option, {
       key: String(value),
       value: value,
       label: label,
       icon: icon,
-      index: index
+      index: index,
+      "aria-label": optionAriaLabel
     });
   }), /*#__PURE__*/React.createElement("span", {
     className: cn(styles.mark),

package/lib/vertical-switcher.p.module.css.js

@@ -1,22 +1,23 @@
 var styles = {
-  "themeLight": "_themeLight_8t4v3o_6",
-  "themeDark": "_themeDark_8t4v3o_9",
-  "sizeXS": "_sizeXS_8t4v3o_13",
-  "sizeS": "_sizeS_8t4v3o_16",
-  "sizeM": "_sizeM_8t4v3o_19",
-  "sizeL": "_sizeL_8t4v3o_22",
-  "modeClassic": "_modeClassic_8t4v3o_26",
-  "modeRock": "_modeRock_8t4v3o_29",
-  "verticalSwitcher": "_verticalSwitcher_8t4v3o_33",
-  "disabled": "_disabled_8t4v3o_50",
-  "alignIconLeft": "_alignIconLeft_8t4v3o_55",
-  "alignIconRight": "_alignIconRight_8t4v3o_58",
-  "option": "_option_8t4v3o_62",
-  "selected": "_selected_8t4v3o_107",
-  "hiddenMark": "_hiddenMark_8t4v3o_116",
-  "optionLabel": "_optionLabel_8t4v3o_147",
-  "icon": "_icon_8t4v3o_153",
-  "fakeIcon": "_fakeIcon_8t4v3o_164",
-  "mark": "_mark_8t4v3o_171"
+  "themeLight": "_themeLight_z9i77r_6",
+  "themeDark": "_themeDark_z9i77r_9",
+  "sizeXS": "_sizeXS_z9i77r_13",
+  "sizeS": "_sizeS_z9i77r_16",
+  "sizeM": "_sizeM_z9i77r_19",
+  "sizeL": "_sizeL_z9i77r_22",
+  "modeClassic": "_modeClassic_z9i77r_26",
+  "modeRock": "_modeRock_z9i77r_29",
+  "verticalSwitcher": "_verticalSwitcher_z9i77r_33",
+  "disabled": "_disabled_z9i77r_50",
+  "alignIconLeft": "_alignIconLeft_z9i77r_55",
+  "alignIconRight": "_alignIconRight_z9i77r_58",
+  "option": "_option_z9i77r_62",
+  "selected": "_selected_z9i77r_107",
+  "hiddenMark": "_hiddenMark_z9i77r_116",
+  "optionLabel": "_optionLabel_z9i77r_147",
+  "icon": "_icon_z9i77r_153",
+  "fakeIcon": "_fakeIcon_z9i77r_164",
+  "mark": "_mark_z9i77r_171",
+  "radio": "_radio_z9i77r_196"
 };
 export { styles as default };