rsuite 5.34.0 → 5.35.0

package/esm/InputPicker/InputPicker.js

@@ -583,7 +583,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         top = positionProps.top,
         className = positionProps.className;
     var menuClassPrefix = multi ? 'picker-check-menu' : 'picker-select-menu';
-    var classes = merge(className, menuClassName, prefix(menuClassPrefix));
+    var classes = merge(className, menuClassName, prefix(multi ? 'check-menu' : 'select-menu'));
 
     var styles = _extends({}, menuStyle, {
       left: left,

package/esm/RadioTile/RadioTile.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { WithAsProps } from '../@types/common';
+export declare type ValueType = string | number;
+export interface RadioTileProps<T = ValueType> extends WithAsProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Additional description, if needed*/
+    children?: React.ReactNode;
+    /** Specifies whether the radio is selected */
+    checked?: boolean;
+    /** Specifies the initial state: whether or not the radio is selected */
+    defaultChecked?: boolean;
+    /** Whether the Radio is disabled */
+    disabled?: boolean;
+    /** Label of the Radio tile */
+    label?: React.ReactNode;
+    /** Icon to be used */
+    icon?: React.ReactNode;
+    /** Name to use for form */
+    name?: string;
+    /** Value, corresponding to the value of the RadioTileGroup, to determine whether the */
+    value?: T;
+    /** Callback function with value changed */
+    onChange?: (value?: T, event?: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const RadioTile: React.ForwardRefExoticComponent<RadioTileProps<ValueType> & React.RefAttributes<unknown>>;
+export default RadioTile;

package/esm/RadioTile/RadioTile.js

@@ -0,0 +1,108 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback, useContext } from 'react';
+import PropTypes from 'prop-types';
+import CheckIcon from '@rsuite/icons/Check';
+import Stack from '../Stack';
+import { RadioTileContext } from '../RadioTileGroup/RadioTileGroup';
+import { useClassNames, useControlled, partitionHTMLProps } from '../utils';
+import useUniqueId from '../utils/useUniqueId';
+var RadioTile = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useContext = useContext(RadioTileContext),
+      groupValue = _useContext.value,
+      nameContext = _useContext.name,
+      disabledContext = _useContext.disabled,
+      onGroupChange = _useContext.onChange;
+
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? Stack : _props$as,
+      children = props.children,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'radio-tile' : _props$classPrefix,
+      checkedProp = props.checked,
+      className = props.className,
+      defaultChecked = props.defaultChecked,
+      _props$disabled = props.disabled,
+      disabled = _props$disabled === void 0 ? disabledContext : _props$disabled,
+      icon = props.icon,
+      value = props.value,
+      label = props.label,
+      _props$name = props.name,
+      name = _props$name === void 0 ? nameContext : _props$name,
+      _props$tabIndex = props.tabIndex,
+      tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
+      onChange = props.onChange,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "children", "classPrefix", "checked", "className", "defaultChecked", "disabled", "icon", "value", "label", "name", "tabIndex", "onChange"]);
+
+  var _useControlled = useControlled(typeof groupValue !== 'undefined' ? groupValue === value : checkedProp, defaultChecked || false),
+      checked = _useControlled[0],
+      setChecked = _useControlled[1];
+
+  var _partitionHTMLProps = partitionHTMLProps(rest),
+      htmlInputProps = _partitionHTMLProps[0],
+      restProps = _partitionHTMLProps[1];
+
+  var _useClassNames = useClassNames(classPrefix),
+      merge = _useClassNames.merge,
+      withClassPrefix = _useClassNames.withClassPrefix,
+      prefix = _useClassNames.prefix;
+
+  var handleChange = useCallback(function (event) {
+    setChecked(true);
+    onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, event);
+    onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
+  }, [onChange, onGroupChange, setChecked, value]);
+  var classes = merge(className, withClassPrefix({
+    checked: checked,
+    disabled: disabled
+  }));
+  var radioId = useUniqueId('radio-');
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    spacing: 6
+  }, restProps, {
+    childrenRenderMode: "clone",
+    ref: ref,
+    className: classes,
+    as: "label"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: prefix('icon')
+  }, icon), /*#__PURE__*/React.createElement("div", {
+    className: prefix('body')
+  }, /*#__PURE__*/React.createElement("input", _extends({}, htmlInputProps, {
+    type: "radio",
+    name: name,
+    value: value,
+    checked: checked,
+    tabIndex: tabIndex,
+    disabled: disabled,
+    onChange: handleChange,
+    "aria-checked": checked,
+    "aria-disabled": disabled,
+    "aria-labelledby": radioId + "-label",
+    "aria-describedby": radioId + "-desc"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: prefix('label'),
+    id: radioId + "-label"
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: prefix('content'),
+    id: radioId + "-desc"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: prefix('mark')
+  }, /*#__PURE__*/React.createElement(CheckIcon, {
+    className: prefix('mark-icon')
+  }))));
+});
+RadioTile.displayName = 'RadioTile';
+RadioTile.propTypes = {
+  children: PropTypes.node,
+  classPrefix: PropTypes.string,
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  icon: PropTypes.node,
+  label: PropTypes.node,
+  name: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onChange: PropTypes.func
+};
+export default RadioTile;

package/esm/RadioTile/index.d.ts

@@ -0,0 +1,3 @@
+import RadioTile from './RadioTile';
+export type { RadioTileProps, ValueType } from './RadioTile';
+export default RadioTile;

package/esm/RadioTile/index.js

@@ -0,0 +1,2 @@
+import RadioTile from './RadioTile';
+export default RadioTile;

package/esm/RadioTileGroup/RadioTileGroup.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { WithAsProps, FormControlBaseProps, RsRefForwardingComponent } from '../@types/common';
+import { ValueType } from '../RadioTile';
+export interface RadioTileContextProps {
+    name?: string;
+    value?: ValueType | null;
+    controlled?: boolean;
+    disabled?: boolean;
+    onChange?: (value: ValueType | undefined, event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export interface RadioTileGroupProps<T = ValueType> extends WithAsProps, FormControlBaseProps<T> {
+    /** Name to use for form */
+    name?: string;
+    /** Inline layout */
+    inline?: boolean;
+    /** Whether radio is disabled */
+    disabled?: boolean;
+    /** Primary content */
+    children?: React.ReactNode;
+}
+export declare const RadioTileContext: React.Context<RadioTileContextProps>;
+declare const RadioTileGroup: RsRefForwardingComponent<'div', RadioTileGroupProps>;
+export default RadioTileGroup;

package/esm/RadioTileGroup/RadioTileGroup.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useClassNames, useControlled } from '../utils';
+import Stack from '../Stack';
+export var RadioTileContext = /*#__PURE__*/React.createContext({});
+var RadioTileGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+      Component = _props$as === void 0 ? Stack : _props$as,
+      className = props.className,
+      inline = props.inline,
+      children = props.children,
+      _props$classPrefix = props.classPrefix,
+      classPrefix = _props$classPrefix === void 0 ? 'radio-tile-group' : _props$classPrefix,
+      disabled = props.disabled,
+      valueProp = props.value,
+      defaultValue = props.defaultValue,
+      name = props.name,
+      onChange = props.onChange,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "className", "inline", "children", "classPrefix", "disabled", "value", "defaultValue", "name", "onChange"]);
+
+  var _useClassNames = useClassNames(classPrefix),
+      merge = _useClassNames.merge,
+      withClassPrefix = _useClassNames.withClassPrefix;
+
+  var classes = merge(className, withClassPrefix());
+
+  var _useControlled = useControlled(valueProp, defaultValue),
+      value = _useControlled[0],
+      setValue = _useControlled[1];
+
+  var handleChange = useCallback(function (nextValue, event) {
+    setValue(nextValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
+  }, [onChange, setValue]);
+  var contextValue = useMemo(function () {
+    return {
+      name: name,
+      disabled: disabled,
+      value: typeof value === 'undefined' ? null : value,
+      onChange: handleChange
+    };
+  }, [disabled, handleChange, name, value]);
+  return /*#__PURE__*/React.createElement(RadioTileContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Component, _extends({
+    alignItems: "stretch",
+    spacing: 10
+  }, rest, {
+    role: "radiogroup",
+    childrenRenderMode: "clone",
+    direction: inline ? 'row' : 'column',
+    ref: ref,
+    className: classes
+  }), children));
+});
+RadioTileGroup.displayName = 'RadioTileGroup';
+RadioTileGroup.propTypes = {
+  name: PropTypes.string,
+  inline: PropTypes.bool,
+  value: PropTypes.any,
+  defaultValue: PropTypes.any,
+  className: PropTypes.string,
+  classPrefix: PropTypes.string,
+  children: PropTypes.node,
+  onChange: PropTypes.func
+};
+export default RadioTileGroup;

package/esm/RadioTileGroup/index.d.ts

@@ -0,0 +1,3 @@
+import RadioTileGroup from './RadioTileGroup';
+export type { RadioTileGroupProps } from './RadioTileGroup';
+export default RadioTileGroup;

package/esm/RadioTileGroup/index.js

@@ -0,0 +1,2 @@
+import RadioTileGroup from './RadioTileGroup';
+export default RadioTileGroup;

package/esm/index.d.ts

@@ -68,6 +68,10 @@ export { default as Radio } from './Radio';
 export type { RadioProps } from './Radio';
 export { default as RadioGroup } from './RadioGroup';
 export type { RadioGroupProps } from './RadioGroup';
+export { default as RadioTile } from './RadioTile';
+export type { RadioTileProps } from './RadioTile';
+export { default as RadioTileGroup } from './RadioTileGroup';
+export type { RadioTileGroupProps } from './RadioTileGroup';
 export { default as SelectPicker } from './SelectPicker';
 export type { SelectPickerProps } from './SelectPicker';
 export { default as CheckPicker } from './CheckPicker';

package/esm/index.js

@@ -36,6 +36,8 @@ export { default as Checkbox } from './Checkbox';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as Radio } from './Radio';
 export { default as RadioGroup } from './RadioGroup';
+export { default as RadioTile } from './RadioTile';
+export { default as RadioTileGroup } from './RadioTileGroup';
 export { default as SelectPicker } from './SelectPicker';
 export { default as CheckPicker } from './CheckPicker';
 export { default as InputPicker } from './InputPicker';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.34.0",
+  "version": "5.35.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -38,7 +38,7 @@
     "prop-types": "^15.8.1",
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.8",
-    "rsuite-table": "^5.10.5",
+    "rsuite-table": "^5.10.6",
     "schema-typed": "^2.1.3"
   },
   "peerDependencies": {

package/styles/color-modes/dark.less

@@ -247,6 +247,13 @@
   --rs-radio-checked-bg: @H500-dark;
   --rs-radio-disabled-bg: @B500-dark;
 
+  // RadioTile
+  --rs-radio-tile-border: @B300-dark;
+  --rs-radio-tile-bg: @B000-dark;
+  --rs-radio-tile-checked-color: @H500-dark;
+  --rs-radio-tile-checked-mark-color: @B800-dark;
+  --rs-radio-tile-checked-disabled-color: @H900-dark;
+
   // Rate
   --rs-rate-symbol: @B600-dark;
   --rs-rate-symbol-checked: @yellow-500;

package/styles/color-modes/high-contrast.less

@@ -256,6 +256,13 @@
   --rs-radio-checked-bg: @H500-high-contrast;
   --rs-radio-disabled-bg: @B500-high-contrast;
 
+  // RadioTile
+  --rs-radio-tile-border: @B300-high-contrast;
+  --rs-radio-tile-bg: @B000-high-contrast;
+  --rs-radio-tile-checked-color: @H500-high-contrast;
+  --rs-radio-tile-checked-mark-color: @B800-high-contrast;
+  --rs-radio-tile-checked-disabled-color: @H900-high-contrast;
+
   // Rate
   --rs-rate-symbol: @B100-high-contrast;
   --rs-rate-symbol-checked: @H500-high-contrast;

package/styles/color-modes/light.less

@@ -254,6 +254,14 @@
   --rs-radio-checked-bg: @H500;
   --rs-radio-disabled-bg: @B050;
 
+  // RadioTile
+  --rs-radio-tile-border: @B300;
+  --rs-radio-tile-bg: @B000;
+  --rs-radio-tile-checked-color: @H500;
+  --rs-radio-tile-checked-mark-color: #fff;
+  --rs-radio-tile-checked-disabled-color: @H100;
+  --rs-radio-tile-icon-size: 32px;
+
   // Rate
   --rs-rate-symbol: @B600;
   --rs-rate-symbol-checked: @yellow-500;

package/styles/index.less

@@ -56,6 +56,7 @@
 @import '../Progress/styles/index';
 @import '../Radio/styles/index';
 @import '../RadioGroup/styles/index';
+@import '../RadioTile/styles/index';
 @import '../Ripple/styles/index';
 @import '../Row/styles/index';
 @import '../SelectPicker/styles/index';