rsuite 6.0.1 → 6.1.0

package/esm/Rate/Rate.js

@@ -26,6 +26,7 @@ const Rate = forwardRef((props, ref) => {
     classPrefix = 'rate',
     disabled,
     max = 5,
+    name,
     readOnly,
     vertical,
     size,
@@ -128,7 +129,8 @@ const Rate = forwardRef((props, ref) => {
     style: mergedStyle,
     onMouseLeave: handleMouseLeave,
     "data-disabled": disabled,
-    "data-readonly": readOnly
+    "data-readonly": readOnly,
+    "data-name": name
   }, rest), starStates.map((status, index) => /*#__PURE__*/React.createElement(Character, {
     role: "radio",
     "aria-posinset": index + 1,

package/esm/Tree/hooks/useFlattenTree.d.ts

@@ -28,6 +28,10 @@ interface UseFlattenTreeOptions {
      * An array of item values that should not be selectable.
      */
     uncheckableItemValues?: any[];
+    /**
+     * An array of item values that should be disabled.
+     */
+    disabledItemValues?: any[];
     /**
      * A callback function that will be called when the tree nodes change.
      * It receives a map of the tree nodes.

package/esm/Tree/hooks/useFlattenTree.js

@@ -16,6 +16,7 @@ function useFlattenTree(data, options) {
     valueKey,
     childrenKey,
     uncheckableItemValues = [],
+    disabledItemValues = [],
     cascade,
     multiple,
     callback
@@ -27,6 +28,26 @@ function useFlattenTree(data, options) {
     // Reset values to false
     Object.keys(flattenedNodes.current).forEach(refKey => {
       const node = flattenedNodes.current[refKey];
+
+      // Check if this node or any of its parents is disabled
+      const isNodeDisabled = disabledItemValues.some(disabledValue => shallowEqual(node[valueKey], disabledValue));
+      let hasDisabledParent = false;
+      let currentNode = node;
+      while (currentNode.parent && !hasDisabledParent) {
+        const parentRefKey = currentNode.parent.refKey;
+        if (parentRefKey && flattenedNodes.current[parentRefKey]) {
+          const parentValue = flattenedNodes.current[parentRefKey][valueKey];
+          if (disabledItemValues.some(disabledValue => shallowEqual(parentValue, disabledValue))) {
+            hasDisabledParent = true;
+          }
+        }
+        currentNode = currentNode.parent;
+      }
+
+      // Skip disabled nodes - they should not be affected by cascade or value changes
+      if (isNodeDisabled || hasDisabledParent) {
+        return;
+      }
       if (cascade && !isNil(node.parent) && !isNil(node.parent.refKey)) {
         node.check = flattenedNodes.current[node.parent.refKey].check;
       } else {
@@ -38,7 +59,7 @@ function useFlattenTree(data, options) {
         }
       });
     });
-  }, [cascade, uncheckableItemValues, valueKey]);
+  }, [cascade, uncheckableItemValues, disabledItemValues, valueKey]);
   const flattenTreeData = useCallback((treeData, parent, layer = 1) => {
     if (!Array.isArray(treeData) || treeData.length === 0) {
       return [];

package/esm/Tree/hooks/useFocusTree.js

@@ -5,7 +5,7 @@ import { KEY_VALUES } from "../../internals/constants/index.js";
 import { useEventCallback, useCustom } from "../../internals/hooks/index.js";
 import { onMenuKeyDown } from "../../internals/Picker/index.js";
 import { useItemDataKeys, useRegisterTreeMethods } from "../../internals/Tree/TreeProvider.js";
-import { isSearching, focusNextItem, getFocusableItems, getActiveItem, focusPreviousItem, focusCurrentItem, focusTreeNode, handleLeftArrow, handleRightArrow } from "../utils/index.js";
+import { isSearching, focusNextItem, getFocusableItems, getActiveItem, focusPreviousItem, focusFirstItem, focusLastItem, focusCurrentItem, focusTreeNode, handleLeftArrow, handleRightArrow } from "../utils/index.js";
 import useTreeNodeRefs from "./useTreeNodeRefs.js";
 /**
  * Custom hook that manages the focus behavior of a tree component.
@@ -99,12 +99,30 @@ function useFocusTree(props) {
       onFocusItem
     });
   });
+  const handleHomeKey = useEventCallback(() => {
+    const focusProps = getFocusProps();
+    const focusedValue = focusFirstItem(focusProps);
+    if (focusedValue) {
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
+    }
+  });
+  const handleEndKey = useEventCallback(() => {
+    const focusProps = getFocusProps();
+    const focusedValue = focusLastItem(focusProps);
+    if (focusedValue) {
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 || onFocused(focusedValue);
+    }
+  });
   const onTreeKeydown = useEventCallback(event => {
     onMenuKeyDown(event, {
       down: () => handleFocusItem(KEY_VALUES.DOWN),
       up: () => handleFocusItem(KEY_VALUES.UP),
       left: rtl ? handleRightArrowEvent : handleLeftArrowEvent,
-      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent
+      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent,
+      home: handleHomeKey,
+      end: handleEndKey
     });
   });
   const focusTreeFirstNode = useEventCallback(() => {

package/esm/Tree/hooks/useVirtualizedTreeData.d.ts

@@ -3,5 +3,6 @@ declare function useVirtualizedTreeData(nodes: TreeNodeMap, data: TreeNode[], op
     expandItemValues: (string | number)[];
     cascade?: boolean;
     searchKeyword?: string;
+    disabledItemValues?: (string | number)[];
 }): () => TreeNode[];
 export default useVirtualizedTreeData;

package/esm/Tree/hooks/useVirtualizedTreeData.js

@@ -30,7 +30,8 @@ function useVirtualizedTreeData(nodes, data, options) {
     const {
       cascade,
       searchKeyword,
-      expandItemValues
+      expandItemValues,
+      disabledItemValues = []
     } = options;
     return UNSAFE_flattenTree(data, childrenKey, node => {
       let formatted = {};
@@ -54,7 +55,9 @@ function useVirtualizedTreeData(nodes, data, options) {
         const checkState = !isUndefined(cascade) ? getNodeCheckState(curNode, {
           cascade,
           nodes,
-          childrenKey
+          childrenKey,
+          disabledItemValues,
+          valueKey
         }) : undefined;
         formatted = {
           ...node,

package/esm/Tree/utils/focusableTree.d.ts

@@ -35,6 +35,14 @@ export declare const focusNextItem: (props: FocusItemProps) => any;
  * Focuses on the previous item in a tree.
  */
 export declare const focusPreviousItem: (props: FocusItemProps) => any;
+/**
+ * Focuses on the first item in a tree.
+ */
+export declare const focusFirstItem: (props: FocusItemProps) => any;
+/**
+ * Focuses on the last item in a tree.
+ */
+export declare const focusLastItem: (props: FocusItemProps) => any;
 interface ScrollToActiveTreeNodeProps {
     value: any;
     valueKey: string;

package/esm/Tree/utils/focusableTree.js

@@ -108,6 +108,42 @@ export const focusPreviousItem = props => {
   return value;
 };
 
+/**
+ * Focuses on the first item in a tree.
+ */
+export const focusFirstItem = props => {
+  const {
+    focusableItems,
+    treeNodesRefs,
+    valueKey
+  } = props;
+  if (focusableItems.length === 0) {
+    return;
+  }
+  const firstItem = focusableItems[0];
+  const value = firstItem[valueKey];
+  focusTreeNode(firstItem.refKey, treeNodesRefs);
+  return value;
+};
+
+/**
+ * Focuses on the last item in a tree.
+ */
+export const focusLastItem = props => {
+  const {
+    focusableItems,
+    treeNodesRefs,
+    valueKey
+  } = props;
+  if (focusableItems.length === 0) {
+    return;
+  }
+  const lastItem = focusableItems[focusableItems.length - 1];
+  const value = lastItem[valueKey];
+  focusTreeNode(lastItem.refKey, treeNodesRefs);
+  return value;
+};
+
 /**
  * Returns the index of the first visible node in the tree that matches the given value.
  */

package/esm/Tree/utils/index.d.ts

@@ -7,5 +7,5 @@ export { formatNodeRefKey } from './formatNodeRefKey';
 export { indentTreeNode } from './indentTreeNode';
 export { isSearching } from './isSearching';
 export { isExpand } from './isExpand';
-export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusTreeNode, focusCurrentItem } from './focusableTree';
+export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusFirstItem, focusLastItem, focusTreeNode, focusCurrentItem } from './focusableTree';
 export { handleLeftArrow, handleRightArrow } from './treeKeyboardInteractions';

package/esm/Tree/utils/index.js

@@ -10,5 +10,5 @@ export { isSearching } from "./isSearching.js";
 export { isExpand } from "./isExpand.js";
 
 // Utility functions for managing focusable items in a tree.
-export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusTreeNode, focusCurrentItem } from "./focusableTree.js";
+export { getFocusableItems, getActiveItem, focusNextItem, focusPreviousItem, focusFirstItem, focusLastItem, focusTreeNode, focusCurrentItem } from "./focusableTree.js";
 export { handleLeftArrow, handleRightArrow } from "./treeKeyboardInteractions.js";

package/esm/internals/Picker/utils.d.ts

@@ -13,6 +13,8 @@ export interface KeyboardEvents {
     esc?: React.KeyboardEventHandler;
     right?: React.KeyboardEventHandler;
     left?: React.KeyboardEventHandler;
+    home?: React.KeyboardEventHandler;
+    end?: React.KeyboardEventHandler;
 }
 /**
  * Handling keyboard events...

package/esm/internals/Picker/utils.js

@@ -47,7 +47,9 @@ export function onMenuKeyDown(event, events) {
     del,
     esc,
     right,
-    left
+    left,
+    home,
+    end
   } = events;
   switch (event.key) {
     // down
@@ -82,6 +84,16 @@ export function onMenuKeyDown(event, events) {
     case KEY_VALUES.RIGHT:
       right === null || right === void 0 || right(event);
       break;
+    // home
+    case KEY_VALUES.HOME:
+      home === null || home === void 0 || home(event);
+      event.preventDefault();
+      break;
+    // end
+    case KEY_VALUES.END:
+      end === null || end === void 0 || end(event);
+      event.preventDefault();
+      break;
     default:
   }
 }

package/esm/internals/StyledBox/StyledBox.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { BoxProps } from '../Box';
 import type { Size, Color } from '../types';
 export interface StyledBoxProps extends BoxProps {
-    /** Name of the Box */
+    /** Component identifier for CSS variable generation */
     name: string;
     /** Size of the Box */
     size?: Size | number | string;

package/esm/internals/StyledBox/StyledBox.js

@@ -7,12 +7,12 @@ const StyledBox = forwardRef((props, ref) => {
   const {
     as,
     color,
-    name,
+    name: componentName,
     style,
     size,
     ...rest
   } = props;
-  const boxStyle = mergeStyles(style, getSizeStyle(size, name), getColorStyle(color, name));
+  const boxStyle = mergeStyles(style, getSizeStyle(size, componentName), getColorStyle(color, componentName));
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: as,
     ref: ref,

package/internals/Box/styles/index.scss

@@ -0,0 +1,31 @@
+@use '../../../styles/base' as base;
+@use '../../../styles/themes' as themes;
+@use '../../../styles/variables' as vars;
+
+// Define breakpoints map
+$breakpoints: (
+  xs: vars.$screen-sm,
+  sm: vars.$screen-md,
+  md: vars.$screen-lg,
+  lg: vars.$screen-xl,
+  xl: vars.$screen-xxl
+);
+
+// Generate responsive visibility styles
+@each $key, $value in $breakpoints {
+  $bp: calc(#{$value} - 1px);
+
+  // Visible from breakpoint
+  @media (max-width: $bp) {
+    [data-visible-from='#{$key}'] {
+      display: none !important;
+    }
+  }
+
+  // Hidden from breakpoint
+  @media (min-width: #{$value}) {
+    [data-hidden-from='#{$key}'] {
+      display: none !important;
+    }
+  }
+}

package/internals/Burger/styles/index.scss

@@ -0,0 +1,72 @@
+@use '../../Box/styles/index' as box;
+
+.rs-burger {
+  --rs-burger-size: 36px;
+  --rs-burger-thickness: 2px;
+  --rs-burger-color: currentColor;
+  --rs-burger-spacing: calc(var(--rs-spacing) * 1.5);
+  --rs-burger-line-size: calc(var(--rs-burger-size) - var(--rs-burger-spacing) * 2);
+
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  outline: none;
+  transition: background 0.2s;
+  box-sizing: border-box;
+  width: var(--rs-burger-size);
+  height: var(--rs-burger-size);
+  padding: var(--rs-burger-spacing);
+
+  // The burger line (middle)
+  &-line {
+    position: relative;
+    display: block;
+    width: var(--rs-burger-line-size);
+    height: var(--rs-burger-thickness);
+    background: var(--rs-burger-color);
+    border-radius: var(--rs-burger-thickness);
+    transition-property: background, transform;
+    transition-duration: 0.2s, 0.3s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+
+    // Top and bottom lines
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      inset-inline-start: 0;
+      width: 100%;
+      height: var(--rs-burger-thickness);
+      background: var(--rs-burger-color);
+      border-radius: var(--rs-burger-thickness);
+      transition-property: transform;
+      transition-duration: 0.3s;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &::before {
+      top: calc(var(--rs-burger-line-size) / -3);
+    }
+
+    &::after {
+      top: calc(var(--rs-burger-line-size) / 3);
+    }
+  }
+
+  // Opened state animation
+  &:where([data-opened='true']) {
+    .rs-burger-line {
+      background: transparent;
+
+      &::before {
+        transform: translateY(calc(var(--rs-burger-line-size) / 3)) rotate(45deg);
+      }
+
+      &::after {
+        transform: translateY(calc(var(--rs-burger-line-size) / -3)) rotate(-45deg);
+      }
+    }
+  }
+}

package/internals/CloseButton/styles/index.scss

@@ -0,0 +1,14 @@
+@use '../../../IconButton/styles/index' as icon-button;
+
+// Close button
+.rs-btn-close {
+  border: none;
+  outline: none !important;
+  background: transparent;
+  line-height: 1;
+  cursor: pointer;
+
+  .rs-icon {
+    vertical-align: bottom;
+  }
+}

package/internals/Picker/styles/_mixin.scss

@@ -0,0 +1,219 @@
+@use 'sass:map';
+@use '../../../styles/mixins/color-modes';
+@use '../../../Dropdown/styles/mixin' as dropdown;
+
+// Picker Menu items common styles
+@mixin picker-listbox-reset {
+  overflow-y: auto;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+// Picker Menu group common styles
+@mixin picker-menu-group-common($prefix) {
+  // Set border & padding to menu group if it isn't the first.
+  .rs-#{$prefix}-menu-group:not(:first-child) {
+    margin-top: var(--rs-picker-group-select-menu-gap);
+    border-top: 1px solid var(--rs-divider-border);
+    padding-top: var(--rs-picker-group-select-menu-gap);
+  }
+}
+
+// Group title common styles
+@mixin picker-menu-group-title($prefix) {
+  .rs-#{$prefix}-menu-group-title {
+    padding-block: var(--rs-picker-item-content-padding-vertical);
+    padding-inline: var(--rs-picker-item-content-padding-horizontal);
+    padding-inline-end: calc(var(--rs-padding-inline-md) + 20px);
+    position: relative;
+    cursor: pointer;
+    color: var(--rs-text-heading);
+
+    .rs-#{$prefix}-menu-group-caret {
+      display: inline-block;
+      margin-inline-start: 2px;
+      position: absolute;
+      top: var(--rs-padding-block-md);
+      inset-inline-end: var(--rs-padding-inline-md);
+      color: var(--rs-text-secondary);
+    }
+  }
+}
+
+// Group closed common styles
+@mixin picker-menu-group-closed($prefix) {
+  .rs-#{$prefix}-menu-group.folded {
+    .rs-#{$prefix}-menu-group-caret {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+@mixin picker-item-hover {
+  color: var(--rs-text-primary);
+  background-color: var(--rs-state-hover-bg);
+}
+
+@mixin picker-item-active {
+  font-weight: var(--rs-picker-select-menu-item-selected-font-weight);
+}
+
+@mixin picker-calendar-cell-content {
+  display: inline-block;
+  cursor: pointer;
+  font-size: var(--rs-calendar-cell-font-size);
+  line-height: var(--rs-calendar-cell-line-height);
+  padding: var(--rs-calendar-cell-padding);
+  border-radius: var(--rs-calendar-border-radius);
+
+  &:hover {
+    background-color: var(--rs-state-hover-bg);
+  }
+}
+
+@mixin picker-calendar-cell-content-selected {
+  color: var(--rs-calendar-date-selected-text);
+  background-color: var(--rs-bg-active);
+  box-shadow: none;
+
+  @include color-modes.high-contrast-mode {
+    text-decoration: underline;
+  }
+}
+
+@mixin picker-calendar-title-show {
+  color: var(--rs-text-active);
+  background: transparent;
+}
+
+// Default picker toggle
+@mixin picker-default-toggle {
+  [data-appearance='default'] & {
+    color: var(--rs-text-primary);
+    border-width: var(--rs-picker-toggle-border-width);
+    border-color: var(--rs-picker-toggle-border-color);
+    border-style: solid;
+  }
+
+  [data-disabled='true'] & {
+    cursor: var(--rs-cursor-disabled);
+  }
+
+  [data-appearance='default']:not([data-disabled='true']) {
+    &:focus {
+      border-color: var(--rs-input-focus-border);
+    }
+  }
+}
+
+// Subtle picker toggle
+@mixin picker-subtle-toggle {
+  .rs-picker[data-appearance='subtle'] & {
+    --rs-picker-toggle-border-width: 0px;
+    @include dropdown.dropdown-toggle;
+  }
+
+  .rs-picker[data-appearance='subtle'][data-disabled='true'] & {
+    cursor: var(--rs-cursor-disabled);
+
+    &:focus,
+    &:active {
+      background: none;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+
+// Group closed common styles
+@mixin picker-menu-group-closed($prefix) {
+  .rs-#{$prefix}-menu-group.folded {
+    .rs-#{$prefix}-menu-group-caret {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+@mixin picker-item-hover {
+  color: var(--rs-text-primary);
+  background-color: var(--rs-state-hover-bg);
+}
+
+@mixin picker-item-active {
+  font-weight: var(--rs-picker-select-menu-item-selected-font-weight);
+}
+
+@mixin picker-calendar-cell-content {
+  display: inline-block;
+  cursor: pointer;
+  font-size: var(--rs-calendar-cell-font-size);
+  line-height: var(--rs-calendar-cell-line-height);
+  padding: var(--rs-calendar-cell-padding);
+  border-radius: var(--rs-calendar-border-radius);
+
+  &:hover {
+    background-color: var(--rs-state-hover-bg);
+  }
+}
+
+@mixin picker-calendar-cell-content-selected {
+  color: var(--rs-calendar-date-selected-text);
+  background-color: var(--rs-bg-active);
+  box-shadow: none;
+
+  @include color-modes.high-contrast-mode {
+    text-decoration: underline;
+  }
+}
+
+@mixin picker-calendar-title-show {
+  color: var(--rs-text-active);
+  background: transparent;
+}
+
+// Default picker toggle
+@mixin picker-default-toggle {
+  [data-appearance='default'] & {
+    color: var(--rs-text-primary);
+    border-width: var(--rs-picker-toggle-border-width);
+    border-color: var(--rs-picker-toggle-border-color);
+    border-style: solid;
+  }
+
+  [data-disabled='true'] & {
+    cursor: var(--rs-cursor-disabled);
+  }
+
+  [data-appearance='default']:not([data-disabled='true']) {
+    &:focus {
+      border-color: var(--rs-input-focus-border);
+    }
+  }
+}
+
+// Subtle picker toggle
+@mixin picker-subtle-toggle {
+  .rs-picker[data-appearance='subtle'] & {
+    --rs-picker-toggle-border-width: 0px;
+    @include dropdown.dropdown-toggle;
+  }
+
+  .rs-picker[data-appearance='subtle'][data-disabled='true'] & {
+    cursor: var(--rs-cursor-disabled);
+
+    &:focus,
+    &:active {
+      background: none;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+}

package/internals/Picker/styles/_variables.scss

@@ -0,0 +1,9 @@
+// Picker variables
+:root {
+  --rs-picker-transition: var(--rs-input-transition);
+  --rs-picker-select-menu-item-selected-font-weight: bold;
+  --rs-picker-group-select-menu-gap: 6px;
+  --rs-picker-menu-padding: 12px;
+  --rs-picker-item-content-padding-vertical: 8px;
+  --rs-picker-item-content-padding-horizontal: var(--rs-picker-menu-padding);
+}