fix: multiple minor fixes

Author: tenphi

.changeset/cyan-clouds-juggle.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix warning about incorrectly rendered component in SliderBase.

.changeset/itchy-guests-dress.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Correctly pass focusWithinProps in Slider.

.changeset/modern-bees-push.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Do not pass invalid isDisabled prop in Action.

src/components/actions/Action/Action.stories.tsx

@@ -0,0 +1,25 @@
+import { StoryFn } from '@storybook/react';
+
+import { baseProps } from '../../../stories/lists/baseProps';
+
+import { Action, CubeActionProps } from './Action';
+
+export default {
+  title: 'Actions/Action',
+  component: Action,
+  parameters: { controls: { exclude: baseProps } },
+  argTypes: {},
+};
+
+const Template: StoryFn<CubeActionProps> = (props) => <Action {...props} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Action',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: 'Action',
+  isDisabled: true,
+};

src/components/actions/Action.tsx renamed to src/components/actions/Action/Action.tsx

@@ -13,9 +13,8 @@ import {
   TEXT_STYLES,
   TextStyleProps,
   tasty,
-} from '../../tasty';
-
-import { useAction } from './use-action';
+} from '../../../tasty';
+import { useAction } from '../use-action';
 
 export interface CubeActionProps
   extends BaseProps,
@@ -83,6 +82,7 @@ export const Action = forwardRef(function Action(
       data-theme={theme}
       download={download}
       {...actionProps}
+      isDisabled={undefined}
       styles={styles}
     />
   );

src/components/actions/Button/Button.tsx

@@ -1,7 +1,7 @@
 import { cloneElement, forwardRef, ReactElement, useMemo } from 'react';
 import { FocusableRef } from '@react-types/shared';
 
-import { CubeActionProps } from '../Action';
+import { CubeActionProps } from '../Action/Action';
 import {
   CONTAINER_STYLES,
   extractStyles,

src/components/actions/index.ts

@@ -9,6 +9,6 @@ const Button = Object.assign(
 );
 
 export * from './Button';
-export * from './Action';
+export * from './Action/Action';
 export * from './use-action';
 export { Button, ButtonGroup };

src/components/fields/DatePicker/DatePickerInput.tsx

@@ -51,7 +51,7 @@ export function DatePickerInput<T extends DateValue>(
     state.segments = formatSegments(state.segments);
   }
 
-  const focusWithinProps = useFocusWithin({
+  const { focusWithinProps } = useFocusWithin({
     onFocusWithinChange: (isFocused) => {
       if (isFocused) {
         props.onFocus?.();

src/components/fields/Slider/Slider.tsx

@@ -1,6 +1,7 @@
 import { forwardRef } from 'react';
 
 import { extractStyles, OUTER_STYLES } from '../../../tasty';
+import { mergeProps } from '../../../utils/react/index';
 
 import { SliderThumb } from './SliderThumb';
 import { SliderTrack } from './SliderTrack';
@@ -50,8 +51,7 @@ function Slider(props: CubeSliderProps, ref: FocusableRef<HTMLDivElement>) {
 
   return (
     <SliderBase
-      {...otherProps}
-      {...baseProps}
+      {...mergeProps(otherProps, baseProps)}
       ref={ref}
       orientation={orientation}
       styles={extractedStyles}

src/components/fields/Slider/SliderBase.tsx

@@ -1,4 +1,4 @@
-import { RefObject, forwardRef, useRef, ReactNode } from 'react';
+import { RefObject, forwardRef, useRef, ReactNode, useMemo } from 'react';
 import { useFocusableRef } from '@react-spectrum/utils';
 import { FocusableRef } from '@react-types/shared';
 import { useSliderState } from 'react-stately';
@@ -7,7 +7,6 @@ import { useSlider, useNumberFormatter } from 'react-aria';
 import { extractStyles, OUTER_STYLES, tasty } from '../../../tasty';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { Text } from '../../content/Text';
-import { mergeProps } from '../../../utils/react';
 
 import { SliderControlsElement, SliderElement } from './elements';
 
@@ -186,22 +185,17 @@ function SliderBase(
       </LabelValueElement>
     );
 
+  const mods = useMemo(
+    () => ({
+      'side-label': labelPosition === 'side',
+      horizontal: orientation === 'horizontal',
+    }),
+    [labelPosition, orientation],
+  );
+
   const sliderField = (
-    <SliderElement
-      ref={domRef}
-      {...groupProps}
-      mods={{
-        'side-label': labelPosition === 'side',
-        horizontal: orientation === 'horizontal',
-      }}
-    >
-      <SliderControlsElement
-        {...trackProps}
-        ref={trackRef}
-        mods={{
-          horizontal: orientation === 'horizontal',
-        }}
-      >
+    <SliderElement ref={domRef} {...groupProps} mods={mods}>
+      <SliderControlsElement {...trackProps} ref={trackRef} mods={mods}>
         {children({
           trackRef,
           inputRef,
@@ -213,18 +207,13 @@ function SliderBase(
 
   styles = extractStyles(otherProps, OUTER_STYLES, styles);
 
-  return wrapWithField(
-    sliderField,
-    ref,
-    mergeProps(
-      {
-        ...props,
-        styles,
-        extra,
-      },
-      { labelProps },
-    ),
-  );
+  return wrapWithField(sliderField, ref, {
+    ...props,
+    children: undefined,
+    styles,
+    extra,
+    labelProps,
+  });
 }
 
 const _SliderBase = forwardRef(SliderBase);

src/components/fields/Slider/SliderThumb.tsx

@@ -1,4 +1,4 @@
-import { RefObject, useRef } from 'react';
+import { RefObject, useMemo, useRef } from 'react';
 import {
   AriaSliderThumbOptions,
   useHover,
@@ -37,14 +37,18 @@ export function SliderThumb(props: SliderThumbProps) {
 
   const { hoverProps, isHovered } = useHover({ isDisabled });
 
+  const mods = useMemo(() => {
+    return {
+      hovered: isHovered,
+      dragged: isDragging,
+      focused: !isDragging && isFocused,
+      disabled: isDisabled,
+    };
+  }, [isHovered, isDragging, isFocused, isDisabled]);
+
   return (
     <SliderThumbElement
-      mods={{
-        hovered: isHovered,
-        dragged: isDragging,
-        focused: !isDragging && isFocused,
-        disabled: isDisabled,
-      }}
+      mods={mods}
       {...mergeProps(thumbProps, hoverProps)}
       role="presentation"
     >

src/components/organisms/Modal/Modal.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import styled from 'styled-components';
 import { CSSTransition } from 'react-transition-group';
 
-import { Action } from '../../actions/Action';
+import { Action } from '../../actions/Action/Action';
 import { Card, CubeCardProps } from '../../content/Card/Card';
 import { Flow } from '../../layout/Flow';
 import { Flex } from '../../layout/Flex';