diff --git a/.changeset/afraid-lies-switch.md b/.changeset/afraid-lies-switch.md new file mode 100644 index 000000000..752e23101 --- /dev/null +++ b/.changeset/afraid-lies-switch.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Fix version declaration. diff --git a/.changeset/cyan-clouds-juggle.md b/.changeset/cyan-clouds-juggle.md new file mode 100644 index 000000000..b152d1dc9 --- /dev/null +++ b/.changeset/cyan-clouds-juggle.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Fix warning about incorrectly rendered component in SliderBase. diff --git a/.changeset/itchy-guests-dress.md b/.changeset/itchy-guests-dress.md new file mode 100644 index 000000000..d0a3b0bba --- /dev/null +++ b/.changeset/itchy-guests-dress.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Correctly pass focusWithinProps in Slider. diff --git a/.changeset/modern-bees-push.md b/.changeset/modern-bees-push.md new file mode 100644 index 000000000..5ee9d2403 --- /dev/null +++ b/.changeset/modern-bees-push.md @@ -0,0 +1,5 @@ +--- +'@cube-dev/ui-kit': patch +--- + +Do not pass invalid isDisabled prop in Action. diff --git a/src/components/actions/Action/Action.stories.tsx b/src/components/actions/Action/Action.stories.tsx new file mode 100644 index 000000000..58cde86bf --- /dev/null +++ b/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 = (props) => ; + +export const Default = Template.bind({}); +Default.args = { + children: 'Action', +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + children: 'Action', + isDisabled: true, +}; diff --git a/src/components/actions/Action.tsx b/src/components/actions/Action/Action.tsx similarity index 94% rename from src/components/actions/Action.tsx rename to src/components/actions/Action/Action.tsx index 4641748ad..63a5c32c2 100644 --- a/src/components/actions/Action.tsx +++ b/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} /> ); diff --git a/src/components/actions/Button/Button.tsx b/src/components/actions/Button/Button.tsx index f5f174dd6..169c8e8af 100644 --- a/src/components/actions/Button/Button.tsx +++ b/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, diff --git a/src/components/actions/index.ts b/src/components/actions/index.ts index 7ba7149b1..3978b2916 100644 --- a/src/components/actions/index.ts +++ b/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 }; diff --git a/src/components/fields/DatePicker/DatePickerInput.tsx b/src/components/fields/DatePicker/DatePickerInput.tsx index 1c6c72d13..f614bfca2 100644 --- a/src/components/fields/DatePicker/DatePickerInput.tsx +++ b/src/components/fields/DatePicker/DatePickerInput.tsx @@ -51,7 +51,7 @@ export function DatePickerInput( state.segments = formatSegments(state.segments); } - const focusWithinProps = useFocusWithin({ + const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocused) => { if (isFocused) { props.onFocus?.(); diff --git a/src/components/fields/Slider/Slider.tsx b/src/components/fields/Slider/Slider.tsx index 5d62c694d..428c971a5 100644 --- a/src/components/fields/Slider/Slider.tsx +++ b/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) { return ( ); + const mods = useMemo( + () => ({ + 'side-label': labelPosition === 'side', + horizontal: orientation === 'horizontal', + }), + [labelPosition, orientation], + ); + const sliderField = ( - - + + {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); diff --git a/src/components/fields/Slider/SliderThumb.tsx b/src/components/fields/Slider/SliderThumb.tsx index 7bff959a2..cfe72ffa7 100644 --- a/src/components/fields/Slider/SliderThumb.tsx +++ b/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 ( diff --git a/src/components/organisms/Modal/Modal.tsx b/src/components/organisms/Modal/Modal.tsx index 5170b2b75..db4a8b59d 100644 --- a/src/components/organisms/Modal/Modal.tsx +++ b/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'; diff --git a/src/version.ts b/src/version.ts index d510b0518..b99e7b156 100644 --- a/src/version.ts +++ b/src/version.ts @@ -5,16 +5,17 @@ interface Window { }; } -if (window.CubeUIKit?.version) { +const version = '__UIKIT_VERSION__'; + +// Ensure CubeUIKit is defined on window in a way bundlers recognize +window.CubeUIKit = window.CubeUIKit || { version }; + +// Check for multiple versions +if (window.CubeUIKit.version && window.CubeUIKit.version !== version) { console.error('More than one version of CubeUIKit is loaded', { - loadedVersions: [window.CubeUIKit.version, '__UIKIT_VERSION'], + loadedVersions: [window.CubeUIKit.version, version], }); } else { - if (!window.CubeUIKit || !Array.isArray(window.CubeUIKit)) { - window.CubeUIKit = { - version: '__UIKIT_VERSION__', - }; - } else { - window.CubeUIKit.version = '__UIKIT_VERSION__'; - } + // Set version if not already set + window.CubeUIKit.version = version; }