UEA-PRODEM
This commit is contained in:
+41
-9
@@ -1,8 +1,32 @@
|
||||
import * as react_jsx_runtime from 'react/jsx-runtime';
|
||||
import * as _radix_ui_react_context from '@radix-ui/react-context';
|
||||
import { Scope } from '@radix-ui/react-context';
|
||||
import * as React from 'react';
|
||||
import { Primitive } from '@radix-ui/react-primitive';
|
||||
|
||||
type Direction = 'ltr' | 'rtl';
|
||||
declare module 'react' {
|
||||
interface CSSProperties {
|
||||
[varName: `--radix-${string}`]: string | number | undefined | null;
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface FocusOptions {
|
||||
/**
|
||||
* A boolean value that should be set to `true` to force, or `false` to prevent
|
||||
* visible indication that the element is focused. If the property is not
|
||||
* specified, a browser will provide visible indication if it determines
|
||||
* that this would improve accessibility for users.
|
||||
*
|
||||
* @see
|
||||
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
|
||||
*/
|
||||
focusVisible?: boolean;
|
||||
}
|
||||
}
|
||||
type ScopedProps<P> = P & {
|
||||
__scopeSlider?: Scope;
|
||||
};
|
||||
declare const createSliderScope: _radix_ui_react_context.CreateScope;
|
||||
interface SliderProps extends Omit<SliderHorizontalProps | SliderVerticalProps, keyof SliderOrientationPrivateProps | 'defaultValue'> {
|
||||
name?: string;
|
||||
@@ -60,16 +84,24 @@ declare const SliderTrack: React.ForwardRefExoticComponent<SliderTrackProps & Re
|
||||
interface SliderRangeProps extends PrimitiveSpanProps {
|
||||
}
|
||||
declare const SliderRange: React.ForwardRefExoticComponent<SliderRangeProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
interface SliderThumbProps extends Omit<SliderThumbImplProps, 'index'> {
|
||||
interface SliderThumbProviderProps {
|
||||
name?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
interface SliderThumbImplProps extends PrimitiveSpanProps {
|
||||
index: number;
|
||||
declare function SliderThumbProvider(props: ScopedProps<SliderThumbProviderProps>): react_jsx_runtime.JSX.Element;
|
||||
declare namespace SliderThumbProvider {
|
||||
var displayName: string;
|
||||
}
|
||||
interface SliderThumbTriggerProps extends PrimitiveSpanProps {
|
||||
}
|
||||
declare const SliderThumbTrigger: React.ForwardRefExoticComponent<SliderThumbTriggerProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
interface SliderThumbProps extends SliderThumbTriggerProps {
|
||||
name?: string;
|
||||
}
|
||||
declare const Root: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
declare const Track: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
declare const Range: React.ForwardRefExoticComponent<SliderRangeProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
declare const Thumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
type PrimitiveInputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;
|
||||
interface SliderBubbleInputProps extends Omit<PrimitiveInputProps, 'value'> {
|
||||
}
|
||||
declare const SliderBubbleInput: React.ForwardRefExoticComponent<SliderBubbleInputProps & React.RefAttributes<HTMLInputElement>>;
|
||||
|
||||
export { Range, Root, Slider, type SliderProps, SliderRange, type SliderRangeProps, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, Thumb, Track, createSliderScope };
|
||||
export { SliderRange as Range, Slider as Root, Slider, type SliderProps, SliderRange, type SliderRangeProps, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, SliderThumb as Thumb, SliderTrack as Track, createSliderScope, SliderBubbleInput as unstable_BubbleInput, SliderBubbleInput as unstable_SliderBubbleInput, type SliderBubbleInputProps as unstable_SliderBubbleInputProps, SliderThumbProvider as unstable_SliderThumbProvider, type SliderThumbProviderProps as unstable_SliderThumbProviderProps, SliderThumbTrigger as unstable_SliderThumbTrigger, type SliderThumbTriggerProps as unstable_SliderThumbTriggerProps, SliderThumbProvider as unstable_ThumbProvider, SliderThumbTrigger as unstable_ThumbTrigger };
|
||||
|
||||
+41
-9
@@ -1,8 +1,32 @@
|
||||
import * as react_jsx_runtime from 'react/jsx-runtime';
|
||||
import * as _radix_ui_react_context from '@radix-ui/react-context';
|
||||
import { Scope } from '@radix-ui/react-context';
|
||||
import * as React from 'react';
|
||||
import { Primitive } from '@radix-ui/react-primitive';
|
||||
|
||||
type Direction = 'ltr' | 'rtl';
|
||||
declare module 'react' {
|
||||
interface CSSProperties {
|
||||
[varName: `--radix-${string}`]: string | number | undefined | null;
|
||||
}
|
||||
}
|
||||
declare global {
|
||||
interface FocusOptions {
|
||||
/**
|
||||
* A boolean value that should be set to `true` to force, or `false` to prevent
|
||||
* visible indication that the element is focused. If the property is not
|
||||
* specified, a browser will provide visible indication if it determines
|
||||
* that this would improve accessibility for users.
|
||||
*
|
||||
* @see
|
||||
* https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
|
||||
*/
|
||||
focusVisible?: boolean;
|
||||
}
|
||||
}
|
||||
type ScopedProps<P> = P & {
|
||||
__scopeSlider?: Scope;
|
||||
};
|
||||
declare const createSliderScope: _radix_ui_react_context.CreateScope;
|
||||
interface SliderProps extends Omit<SliderHorizontalProps | SliderVerticalProps, keyof SliderOrientationPrivateProps | 'defaultValue'> {
|
||||
name?: string;
|
||||
@@ -60,16 +84,24 @@ declare const SliderTrack: React.ForwardRefExoticComponent<SliderTrackProps & Re
|
||||
interface SliderRangeProps extends PrimitiveSpanProps {
|
||||
}
|
||||
declare const SliderRange: React.ForwardRefExoticComponent<SliderRangeProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
interface SliderThumbProps extends Omit<SliderThumbImplProps, 'index'> {
|
||||
interface SliderThumbProviderProps {
|
||||
name?: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
interface SliderThumbImplProps extends PrimitiveSpanProps {
|
||||
index: number;
|
||||
declare function SliderThumbProvider(props: ScopedProps<SliderThumbProviderProps>): react_jsx_runtime.JSX.Element;
|
||||
declare namespace SliderThumbProvider {
|
||||
var displayName: string;
|
||||
}
|
||||
interface SliderThumbTriggerProps extends PrimitiveSpanProps {
|
||||
}
|
||||
declare const SliderThumbTrigger: React.ForwardRefExoticComponent<SliderThumbTriggerProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
interface SliderThumbProps extends SliderThumbTriggerProps {
|
||||
name?: string;
|
||||
}
|
||||
declare const Root: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
declare const Track: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
declare const Range: React.ForwardRefExoticComponent<SliderRangeProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
declare const Thumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLSpanElement>>;
|
||||
type PrimitiveInputProps = React.ComponentPropsWithoutRef<typeof Primitive.input>;
|
||||
interface SliderBubbleInputProps extends Omit<PrimitiveInputProps, 'value'> {
|
||||
}
|
||||
declare const SliderBubbleInput: React.ForwardRefExoticComponent<SliderBubbleInputProps & React.RefAttributes<HTMLInputElement>>;
|
||||
|
||||
export { Range, Root, Slider, type SliderProps, SliderRange, type SliderRangeProps, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, Thumb, Track, createSliderScope };
|
||||
export { SliderRange as Range, Slider as Root, Slider, type SliderProps, SliderRange, type SliderRangeProps, SliderThumb, type SliderThumbProps, SliderTrack, type SliderTrackProps, SliderThumb as Thumb, SliderTrack as Track, createSliderScope, SliderBubbleInput as unstable_BubbleInput, SliderBubbleInput as unstable_SliderBubbleInput, type SliderBubbleInputProps as unstable_SliderBubbleInputProps, SliderThumbProvider as unstable_SliderThumbProvider, type SliderThumbProviderProps as unstable_SliderThumbProviderProps, SliderThumbTrigger as unstable_SliderThumbTrigger, type SliderThumbTriggerProps as unstable_SliderThumbTriggerProps, SliderThumbProvider as unstable_ThumbProvider, SliderThumbTrigger as unstable_ThumbTrigger };
|
||||
|
||||
+152
-73
@@ -31,15 +31,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
||||
// src/index.ts
|
||||
var index_exports = {};
|
||||
__export(index_exports, {
|
||||
Range: () => Range,
|
||||
Root: () => Root,
|
||||
Range: () => SliderRange,
|
||||
Root: () => Slider,
|
||||
Slider: () => Slider,
|
||||
SliderRange: () => SliderRange,
|
||||
SliderThumb: () => SliderThumb,
|
||||
SliderTrack: () => SliderTrack,
|
||||
Thumb: () => Thumb,
|
||||
Track: () => Track,
|
||||
createSliderScope: () => createSliderScope
|
||||
Thumb: () => SliderThumb,
|
||||
Track: () => SliderTrack,
|
||||
createSliderScope: () => createSliderScope,
|
||||
unstable_BubbleInput: () => SliderBubbleInput,
|
||||
unstable_SliderBubbleInput: () => SliderBubbleInput,
|
||||
unstable_SliderThumbProvider: () => SliderThumbProvider,
|
||||
unstable_SliderThumbTrigger: () => SliderThumbTrigger,
|
||||
unstable_ThumbProvider: () => SliderThumbProvider,
|
||||
unstable_ThumbTrigger: () => SliderThumbTrigger
|
||||
});
|
||||
module.exports = __toCommonJS(index_exports);
|
||||
|
||||
@@ -92,6 +98,7 @@ var Slider = React.forwardRef(
|
||||
} = props;
|
||||
const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
|
||||
const valueIndexToChangeRef = React.useRef(0);
|
||||
const isKeyboardInteractionRef = React.useRef(false);
|
||||
const isHorizontal = orientation === "horizontal";
|
||||
const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
|
||||
const [values = [], setValues] = (0, import_react_use_controllable_state.useControllableState)({
|
||||
@@ -99,7 +106,11 @@ var Slider = React.forwardRef(
|
||||
defaultProp: defaultValue,
|
||||
onChange: (value2) => {
|
||||
const thumbs = [...thumbRefs.current];
|
||||
thumbs[valueIndexToChangeRef.current]?.focus();
|
||||
thumbs[valueIndexToChangeRef.current]?.focus({
|
||||
preventScroll: true,
|
||||
focusVisible: isKeyboardInteractionRef.current
|
||||
});
|
||||
isKeyboardInteractionRef.current = false;
|
||||
onValueChange(value2);
|
||||
}
|
||||
});
|
||||
@@ -154,7 +165,10 @@ var Slider = React.forwardRef(
|
||||
...sliderProps,
|
||||
ref: forwardedRef,
|
||||
onPointerDown: (0, import_primitive.composeEventHandlers)(sliderProps.onPointerDown, () => {
|
||||
if (!disabled) valuesBeforeSlideStartRef.current = values;
|
||||
if (!disabled) {
|
||||
valuesBeforeSlideStartRef.current = values;
|
||||
isKeyboardInteractionRef.current = false;
|
||||
}
|
||||
}),
|
||||
min,
|
||||
max,
|
||||
@@ -162,10 +176,21 @@ var Slider = React.forwardRef(
|
||||
onSlideStart: disabled ? void 0 : handleSlideStart,
|
||||
onSlideMove: disabled ? void 0 : handleSlideMove,
|
||||
onSlideEnd: disabled ? void 0 : handleSlideEnd,
|
||||
onHomeKeyDown: () => !disabled && updateValues(min, 0, { commit: true }),
|
||||
onEndKeyDown: () => !disabled && updateValues(max, values.length - 1, { commit: true }),
|
||||
onHomeKeyDown: () => {
|
||||
if (!disabled) {
|
||||
isKeyboardInteractionRef.current = true;
|
||||
updateValues(min, 0, { commit: true });
|
||||
}
|
||||
},
|
||||
onEndKeyDown: () => {
|
||||
if (!disabled) {
|
||||
isKeyboardInteractionRef.current = true;
|
||||
updateValues(max, values.length - 1, { commit: true });
|
||||
}
|
||||
},
|
||||
onStepKeyDown: ({ event, direction: stepDirection }) => {
|
||||
if (!disabled) {
|
||||
isKeyboardInteractionRef.current = true;
|
||||
const isPageKey = PAGE_KEYS.includes(event.key);
|
||||
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
|
||||
const multiplier = isSkipKey ? 10 : 1;
|
||||
@@ -232,7 +257,7 @@ var SliderHorizontal = React.forwardRef(
|
||||
ref: composedRefs,
|
||||
style: {
|
||||
...sliderProps.style,
|
||||
["--radix-slider-thumb-transform"]: "translateX(-50%)"
|
||||
"--radix-slider-thumb-transform": "translateX(-50%)"
|
||||
},
|
||||
onSlideStart: (event) => {
|
||||
const value = getValueFromPointer(event.clientX);
|
||||
@@ -297,7 +322,7 @@ var SliderVertical = React.forwardRef(
|
||||
ref,
|
||||
style: {
|
||||
...sliderProps.style,
|
||||
["--radix-slider-thumb-transform"]: "translateY(50%)"
|
||||
"--radix-slider-thumb-transform": "translateY(50%)"
|
||||
},
|
||||
onSlideStart: (event) => {
|
||||
const value = getValueFromPointer(event.clientY);
|
||||
@@ -357,7 +382,7 @@ var SliderImpl = React.forwardRef(
|
||||
target.setPointerCapture(event.pointerId);
|
||||
event.preventDefault();
|
||||
if (context.thumbs.has(target)) {
|
||||
target.focus();
|
||||
target.focus({ preventScroll: true, focusVisible: false });
|
||||
} else {
|
||||
onSlideStart(event);
|
||||
}
|
||||
@@ -426,41 +451,65 @@ var SliderRange = React.forwardRef(
|
||||
);
|
||||
SliderRange.displayName = RANGE_NAME;
|
||||
var THUMB_NAME = "SliderThumb";
|
||||
var SliderThumb = React.forwardRef(
|
||||
var [SliderThumbContextProvider, useSliderThumbContext] = createSliderContext(THUMB_NAME);
|
||||
var THUMB_PROVIDER_NAME = "SliderThumbProvider";
|
||||
function SliderThumbProvider(props) {
|
||||
const {
|
||||
__scopeSlider,
|
||||
name,
|
||||
children,
|
||||
// @ts-expect-error internal render prop
|
||||
internal_do_not_use_render
|
||||
} = props;
|
||||
const context = useSliderContext(THUMB_PROVIDER_NAME, __scopeSlider);
|
||||
const getItems = useCollection(__scopeSlider);
|
||||
const [thumb, setThumb] = React.useState(null);
|
||||
const index = React.useMemo(
|
||||
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
||||
[getItems, thumb]
|
||||
);
|
||||
const size = (0, import_react_use_size.useSize)(thumb);
|
||||
const isFormControl = thumb ? !!context.form || !!thumb.closest("form") : true;
|
||||
const value = context.values[index];
|
||||
const resolvedName = name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0);
|
||||
const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
|
||||
React.useEffect(() => {
|
||||
if (thumb) {
|
||||
context.thumbs.add(thumb);
|
||||
return () => {
|
||||
context.thumbs.delete(thumb);
|
||||
};
|
||||
}
|
||||
}, [thumb, context.thumbs]);
|
||||
const thumbContext = {
|
||||
value,
|
||||
name: resolvedName,
|
||||
form: context.form,
|
||||
isFormControl,
|
||||
index,
|
||||
thumb,
|
||||
onThumbChange: setThumb,
|
||||
percent,
|
||||
size
|
||||
};
|
||||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderThumbContextProvider, { scope: __scopeSlider, ...thumbContext, children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(thumbContext) : children });
|
||||
}
|
||||
SliderThumbProvider.displayName = THUMB_PROVIDER_NAME;
|
||||
var THUMB_TRIGGER_NAME = "SliderThumbTrigger";
|
||||
var SliderThumbTrigger = React.forwardRef(
|
||||
(props, forwardedRef) => {
|
||||
const getItems = useCollection(props.__scopeSlider);
|
||||
const [thumb, setThumb] = React.useState(null);
|
||||
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
|
||||
const index = React.useMemo(
|
||||
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
||||
[getItems, thumb]
|
||||
const { __scopeSlider, ...thumbProps } = props;
|
||||
const context = useSliderContext(THUMB_TRIGGER_NAME, __scopeSlider);
|
||||
const orientation = useSliderOrientationContext(THUMB_TRIGGER_NAME, __scopeSlider);
|
||||
const { index, value, percent, size, onThumbChange } = useSliderThumbContext(
|
||||
THUMB_TRIGGER_NAME,
|
||||
__scopeSlider
|
||||
);
|
||||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderThumbImpl, { ...props, ref: composedRefs, index });
|
||||
}
|
||||
);
|
||||
var SliderThumbImpl = React.forwardRef(
|
||||
(props, forwardedRef) => {
|
||||
const { __scopeSlider, index, name, ...thumbProps } = props;
|
||||
const context = useSliderContext(THUMB_NAME, __scopeSlider);
|
||||
const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
|
||||
const [thumb, setThumb] = React.useState(null);
|
||||
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
|
||||
const isFormControl = thumb ? context.form || !!thumb.closest("form") : true;
|
||||
const size = (0, import_react_use_size.useSize)(thumb);
|
||||
const value = context.values[index];
|
||||
const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
|
||||
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => onThumbChange(node));
|
||||
const label = getLabel(index, context.values.length);
|
||||
const orientationSize = size?.[orientation.size];
|
||||
const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
|
||||
React.useEffect(() => {
|
||||
if (thumb) {
|
||||
context.thumbs.add(thumb);
|
||||
return () => {
|
||||
context.thumbs.delete(thumb);
|
||||
};
|
||||
}
|
||||
}, [thumb, context.thumbs]);
|
||||
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
||||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
@@ -468,45 +517,65 @@ var SliderThumbImpl = React.forwardRef(
|
||||
position: "absolute",
|
||||
[orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
|
||||
},
|
||||
children: [
|
||||
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
||||
import_react_primitive.Primitive.span,
|
||||
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Collection.ItemSlot, { scope: __scopeSlider, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
||||
import_react_primitive.Primitive.span,
|
||||
{
|
||||
role: "slider",
|
||||
"aria-label": props["aria-label"] || label,
|
||||
"aria-valuemin": context.min,
|
||||
"aria-valuenow": value,
|
||||
"aria-valuemax": context.max,
|
||||
"aria-orientation": context.orientation,
|
||||
"data-orientation": context.orientation,
|
||||
"data-disabled": context.disabled ? "" : void 0,
|
||||
tabIndex: context.disabled ? void 0 : 0,
|
||||
...thumbProps,
|
||||
ref: composedRefs,
|
||||
style: value === void 0 ? { display: "none" } : props.style,
|
||||
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => {
|
||||
context.valueIndexToChangeRef.current = index;
|
||||
})
|
||||
}
|
||||
) })
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
SliderThumbTrigger.displayName = THUMB_TRIGGER_NAME;
|
||||
var SliderThumb = React.forwardRef(
|
||||
(props, forwardedRef) => {
|
||||
const { __scopeSlider, name, ...thumbProps } = props;
|
||||
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
||||
SliderThumbProvider,
|
||||
{
|
||||
__scopeSlider,
|
||||
name,
|
||||
internal_do_not_use_render: ({ index, isFormControl }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
||||
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
||||
SliderThumbTrigger,
|
||||
{
|
||||
role: "slider",
|
||||
"aria-label": props["aria-label"] || label,
|
||||
"aria-valuemin": context.min,
|
||||
"aria-valuenow": value,
|
||||
"aria-valuemax": context.max,
|
||||
"aria-orientation": context.orientation,
|
||||
"data-orientation": context.orientation,
|
||||
"data-disabled": context.disabled ? "" : void 0,
|
||||
tabIndex: context.disabled ? void 0 : 0,
|
||||
...thumbProps,
|
||||
ref: composedRefs,
|
||||
style: value === void 0 ? { display: "none" } : props.style,
|
||||
onFocus: (0, import_primitive.composeEventHandlers)(props.onFocus, () => {
|
||||
context.valueIndexToChangeRef.current = index;
|
||||
})
|
||||
ref: forwardedRef,
|
||||
__scopeSlider
|
||||
}
|
||||
) }),
|
||||
isFormControl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
||||
),
|
||||
isFormControl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
||||
SliderBubbleInput,
|
||||
{
|
||||
name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
|
||||
form: context.form,
|
||||
value
|
||||
__scopeSlider
|
||||
},
|
||||
index
|
||||
)
|
||||
]
|
||||
) : null
|
||||
] })
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
SliderThumb.displayName = THUMB_NAME;
|
||||
var BUBBLE_INPUT_NAME = "RadioBubbleInput";
|
||||
var BUBBLE_INPUT_NAME = "SliderBubbleInput";
|
||||
var SliderBubbleInput = React.forwardRef(
|
||||
({ __scopeSlider, value, ...props }, forwardedRef) => {
|
||||
({ __scopeSlider, ...props }, forwardedRef) => {
|
||||
const { value, name, form } = useSliderThumbContext(BUBBLE_INPUT_NAME, __scopeSlider);
|
||||
const ref = React.useRef(null);
|
||||
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(ref, forwardedRef);
|
||||
const prevValue = (0, import_react_use_previous.usePrevious)(value);
|
||||
@@ -526,6 +595,8 @@ var SliderBubbleInput = React.forwardRef(
|
||||
import_react_primitive.Primitive.input,
|
||||
{
|
||||
style: { display: "none" },
|
||||
name,
|
||||
form,
|
||||
...props,
|
||||
ref: composedRefs,
|
||||
defaultValue: value
|
||||
@@ -585,14 +656,22 @@ function linearScale(input, output) {
|
||||
};
|
||||
}
|
||||
function getDecimalCount(value) {
|
||||
return (String(value).split(".")[1] || "").length;
|
||||
if (!Number.isFinite(value)) return 0;
|
||||
const str = value.toString();
|
||||
if (str.includes("e")) {
|
||||
const [coefficient, exponent] = str.split("e");
|
||||
const decimalPart2 = coefficient.split(".")[1] || "";
|
||||
const exponentNum = Number(exponent);
|
||||
return Math.max(0, decimalPart2.length - exponentNum);
|
||||
}
|
||||
const decimalPart = str.split(".")[1];
|
||||
return decimalPart ? decimalPart.length : 0;
|
||||
}
|
||||
function roundValue(value, decimalCount) {
|
||||
const rounder = Math.pow(10, decimalCount);
|
||||
return Math.round(value * rounder) / rounder;
|
||||
}
|
||||
var Root = Slider;
|
||||
var Track = SliderTrack;
|
||||
var Range = SliderRange;
|
||||
var Thumb = SliderThumb;
|
||||
function isFunction(value) {
|
||||
return typeof value === "function";
|
||||
}
|
||||
//# sourceMappingURL=index.js.map
|
||||
|
||||
+3
-3
File diff suppressed because one or more lines are too long
+153
-74
@@ -12,7 +12,7 @@ import { usePrevious } from "@radix-ui/react-use-previous";
|
||||
import { useSize } from "@radix-ui/react-use-size";
|
||||
import { Primitive } from "@radix-ui/react-primitive";
|
||||
import { createCollection } from "@radix-ui/react-collection";
|
||||
import { jsx, jsxs } from "react/jsx-runtime";
|
||||
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
||||
var PAGE_KEYS = ["PageUp", "PageDown"];
|
||||
var ARROW_KEYS = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
|
||||
var BACK_KEYS = {
|
||||
@@ -49,6 +49,7 @@ var Slider = React.forwardRef(
|
||||
} = props;
|
||||
const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
|
||||
const valueIndexToChangeRef = React.useRef(0);
|
||||
const isKeyboardInteractionRef = React.useRef(false);
|
||||
const isHorizontal = orientation === "horizontal";
|
||||
const SliderOrientation = isHorizontal ? SliderHorizontal : SliderVertical;
|
||||
const [values = [], setValues] = useControllableState({
|
||||
@@ -56,7 +57,11 @@ var Slider = React.forwardRef(
|
||||
defaultProp: defaultValue,
|
||||
onChange: (value2) => {
|
||||
const thumbs = [...thumbRefs.current];
|
||||
thumbs[valueIndexToChangeRef.current]?.focus();
|
||||
thumbs[valueIndexToChangeRef.current]?.focus({
|
||||
preventScroll: true,
|
||||
focusVisible: isKeyboardInteractionRef.current
|
||||
});
|
||||
isKeyboardInteractionRef.current = false;
|
||||
onValueChange(value2);
|
||||
}
|
||||
});
|
||||
@@ -111,7 +116,10 @@ var Slider = React.forwardRef(
|
||||
...sliderProps,
|
||||
ref: forwardedRef,
|
||||
onPointerDown: composeEventHandlers(sliderProps.onPointerDown, () => {
|
||||
if (!disabled) valuesBeforeSlideStartRef.current = values;
|
||||
if (!disabled) {
|
||||
valuesBeforeSlideStartRef.current = values;
|
||||
isKeyboardInteractionRef.current = false;
|
||||
}
|
||||
}),
|
||||
min,
|
||||
max,
|
||||
@@ -119,10 +127,21 @@ var Slider = React.forwardRef(
|
||||
onSlideStart: disabled ? void 0 : handleSlideStart,
|
||||
onSlideMove: disabled ? void 0 : handleSlideMove,
|
||||
onSlideEnd: disabled ? void 0 : handleSlideEnd,
|
||||
onHomeKeyDown: () => !disabled && updateValues(min, 0, { commit: true }),
|
||||
onEndKeyDown: () => !disabled && updateValues(max, values.length - 1, { commit: true }),
|
||||
onHomeKeyDown: () => {
|
||||
if (!disabled) {
|
||||
isKeyboardInteractionRef.current = true;
|
||||
updateValues(min, 0, { commit: true });
|
||||
}
|
||||
},
|
||||
onEndKeyDown: () => {
|
||||
if (!disabled) {
|
||||
isKeyboardInteractionRef.current = true;
|
||||
updateValues(max, values.length - 1, { commit: true });
|
||||
}
|
||||
},
|
||||
onStepKeyDown: ({ event, direction: stepDirection }) => {
|
||||
if (!disabled) {
|
||||
isKeyboardInteractionRef.current = true;
|
||||
const isPageKey = PAGE_KEYS.includes(event.key);
|
||||
const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key);
|
||||
const multiplier = isSkipKey ? 10 : 1;
|
||||
@@ -189,7 +208,7 @@ var SliderHorizontal = React.forwardRef(
|
||||
ref: composedRefs,
|
||||
style: {
|
||||
...sliderProps.style,
|
||||
["--radix-slider-thumb-transform"]: "translateX(-50%)"
|
||||
"--radix-slider-thumb-transform": "translateX(-50%)"
|
||||
},
|
||||
onSlideStart: (event) => {
|
||||
const value = getValueFromPointer(event.clientX);
|
||||
@@ -254,7 +273,7 @@ var SliderVertical = React.forwardRef(
|
||||
ref,
|
||||
style: {
|
||||
...sliderProps.style,
|
||||
["--radix-slider-thumb-transform"]: "translateY(50%)"
|
||||
"--radix-slider-thumb-transform": "translateY(50%)"
|
||||
},
|
||||
onSlideStart: (event) => {
|
||||
const value = getValueFromPointer(event.clientY);
|
||||
@@ -314,7 +333,7 @@ var SliderImpl = React.forwardRef(
|
||||
target.setPointerCapture(event.pointerId);
|
||||
event.preventDefault();
|
||||
if (context.thumbs.has(target)) {
|
||||
target.focus();
|
||||
target.focus({ preventScroll: true, focusVisible: false });
|
||||
} else {
|
||||
onSlideStart(event);
|
||||
}
|
||||
@@ -383,41 +402,65 @@ var SliderRange = React.forwardRef(
|
||||
);
|
||||
SliderRange.displayName = RANGE_NAME;
|
||||
var THUMB_NAME = "SliderThumb";
|
||||
var SliderThumb = React.forwardRef(
|
||||
var [SliderThumbContextProvider, useSliderThumbContext] = createSliderContext(THUMB_NAME);
|
||||
var THUMB_PROVIDER_NAME = "SliderThumbProvider";
|
||||
function SliderThumbProvider(props) {
|
||||
const {
|
||||
__scopeSlider,
|
||||
name,
|
||||
children,
|
||||
// @ts-expect-error internal render prop
|
||||
internal_do_not_use_render
|
||||
} = props;
|
||||
const context = useSliderContext(THUMB_PROVIDER_NAME, __scopeSlider);
|
||||
const getItems = useCollection(__scopeSlider);
|
||||
const [thumb, setThumb] = React.useState(null);
|
||||
const index = React.useMemo(
|
||||
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
||||
[getItems, thumb]
|
||||
);
|
||||
const size = useSize(thumb);
|
||||
const isFormControl = thumb ? !!context.form || !!thumb.closest("form") : true;
|
||||
const value = context.values[index];
|
||||
const resolvedName = name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0);
|
||||
const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
|
||||
React.useEffect(() => {
|
||||
if (thumb) {
|
||||
context.thumbs.add(thumb);
|
||||
return () => {
|
||||
context.thumbs.delete(thumb);
|
||||
};
|
||||
}
|
||||
}, [thumb, context.thumbs]);
|
||||
const thumbContext = {
|
||||
value,
|
||||
name: resolvedName,
|
||||
form: context.form,
|
||||
isFormControl,
|
||||
index,
|
||||
thumb,
|
||||
onThumbChange: setThumb,
|
||||
percent,
|
||||
size
|
||||
};
|
||||
return /* @__PURE__ */ jsx(SliderThumbContextProvider, { scope: __scopeSlider, ...thumbContext, children: isFunction(internal_do_not_use_render) ? internal_do_not_use_render(thumbContext) : children });
|
||||
}
|
||||
SliderThumbProvider.displayName = THUMB_PROVIDER_NAME;
|
||||
var THUMB_TRIGGER_NAME = "SliderThumbTrigger";
|
||||
var SliderThumbTrigger = React.forwardRef(
|
||||
(props, forwardedRef) => {
|
||||
const getItems = useCollection(props.__scopeSlider);
|
||||
const [thumb, setThumb] = React.useState(null);
|
||||
const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
|
||||
const index = React.useMemo(
|
||||
() => thumb ? getItems().findIndex((item) => item.ref.current === thumb) : -1,
|
||||
[getItems, thumb]
|
||||
const { __scopeSlider, ...thumbProps } = props;
|
||||
const context = useSliderContext(THUMB_TRIGGER_NAME, __scopeSlider);
|
||||
const orientation = useSliderOrientationContext(THUMB_TRIGGER_NAME, __scopeSlider);
|
||||
const { index, value, percent, size, onThumbChange } = useSliderThumbContext(
|
||||
THUMB_TRIGGER_NAME,
|
||||
__scopeSlider
|
||||
);
|
||||
return /* @__PURE__ */ jsx(SliderThumbImpl, { ...props, ref: composedRefs, index });
|
||||
}
|
||||
);
|
||||
var SliderThumbImpl = React.forwardRef(
|
||||
(props, forwardedRef) => {
|
||||
const { __scopeSlider, index, name, ...thumbProps } = props;
|
||||
const context = useSliderContext(THUMB_NAME, __scopeSlider);
|
||||
const orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider);
|
||||
const [thumb, setThumb] = React.useState(null);
|
||||
const composedRefs = useComposedRefs(forwardedRef, (node) => setThumb(node));
|
||||
const isFormControl = thumb ? context.form || !!thumb.closest("form") : true;
|
||||
const size = useSize(thumb);
|
||||
const value = context.values[index];
|
||||
const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
|
||||
const composedRefs = useComposedRefs(forwardedRef, (node) => onThumbChange(node));
|
||||
const label = getLabel(index, context.values.length);
|
||||
const orientationSize = size?.[orientation.size];
|
||||
const thumbInBoundsOffset = orientationSize ? getThumbInBoundsOffset(orientationSize, percent, orientation.direction) : 0;
|
||||
React.useEffect(() => {
|
||||
if (thumb) {
|
||||
context.thumbs.add(thumb);
|
||||
return () => {
|
||||
context.thumbs.delete(thumb);
|
||||
};
|
||||
}
|
||||
}, [thumb, context.thumbs]);
|
||||
return /* @__PURE__ */ jsxs(
|
||||
return /* @__PURE__ */ jsx(
|
||||
"span",
|
||||
{
|
||||
style: {
|
||||
@@ -425,45 +468,65 @@ var SliderThumbImpl = React.forwardRef(
|
||||
position: "absolute",
|
||||
[orientation.startEdge]: `calc(${percent}% + ${thumbInBoundsOffset}px)`
|
||||
},
|
||||
children: [
|
||||
/* @__PURE__ */ jsx(Collection.ItemSlot, { scope: props.__scopeSlider, children: /* @__PURE__ */ jsx(
|
||||
Primitive.span,
|
||||
children: /* @__PURE__ */ jsx(Collection.ItemSlot, { scope: __scopeSlider, children: /* @__PURE__ */ jsx(
|
||||
Primitive.span,
|
||||
{
|
||||
role: "slider",
|
||||
"aria-label": props["aria-label"] || label,
|
||||
"aria-valuemin": context.min,
|
||||
"aria-valuenow": value,
|
||||
"aria-valuemax": context.max,
|
||||
"aria-orientation": context.orientation,
|
||||
"data-orientation": context.orientation,
|
||||
"data-disabled": context.disabled ? "" : void 0,
|
||||
tabIndex: context.disabled ? void 0 : 0,
|
||||
...thumbProps,
|
||||
ref: composedRefs,
|
||||
style: value === void 0 ? { display: "none" } : props.style,
|
||||
onFocus: composeEventHandlers(props.onFocus, () => {
|
||||
context.valueIndexToChangeRef.current = index;
|
||||
})
|
||||
}
|
||||
) })
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
SliderThumbTrigger.displayName = THUMB_TRIGGER_NAME;
|
||||
var SliderThumb = React.forwardRef(
|
||||
(props, forwardedRef) => {
|
||||
const { __scopeSlider, name, ...thumbProps } = props;
|
||||
return /* @__PURE__ */ jsx(
|
||||
SliderThumbProvider,
|
||||
{
|
||||
__scopeSlider,
|
||||
name,
|
||||
internal_do_not_use_render: ({ index, isFormControl }) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
||||
/* @__PURE__ */ jsx(
|
||||
SliderThumbTrigger,
|
||||
{
|
||||
role: "slider",
|
||||
"aria-label": props["aria-label"] || label,
|
||||
"aria-valuemin": context.min,
|
||||
"aria-valuenow": value,
|
||||
"aria-valuemax": context.max,
|
||||
"aria-orientation": context.orientation,
|
||||
"data-orientation": context.orientation,
|
||||
"data-disabled": context.disabled ? "" : void 0,
|
||||
tabIndex: context.disabled ? void 0 : 0,
|
||||
...thumbProps,
|
||||
ref: composedRefs,
|
||||
style: value === void 0 ? { display: "none" } : props.style,
|
||||
onFocus: composeEventHandlers(props.onFocus, () => {
|
||||
context.valueIndexToChangeRef.current = index;
|
||||
})
|
||||
ref: forwardedRef,
|
||||
__scopeSlider
|
||||
}
|
||||
) }),
|
||||
isFormControl && /* @__PURE__ */ jsx(
|
||||
),
|
||||
isFormControl ? /* @__PURE__ */ jsx(
|
||||
SliderBubbleInput,
|
||||
{
|
||||
name: name ?? (context.name ? context.name + (context.values.length > 1 ? "[]" : "") : void 0),
|
||||
form: context.form,
|
||||
value
|
||||
__scopeSlider
|
||||
},
|
||||
index
|
||||
)
|
||||
]
|
||||
) : null
|
||||
] })
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
SliderThumb.displayName = THUMB_NAME;
|
||||
var BUBBLE_INPUT_NAME = "RadioBubbleInput";
|
||||
var BUBBLE_INPUT_NAME = "SliderBubbleInput";
|
||||
var SliderBubbleInput = React.forwardRef(
|
||||
({ __scopeSlider, value, ...props }, forwardedRef) => {
|
||||
({ __scopeSlider, ...props }, forwardedRef) => {
|
||||
const { value, name, form } = useSliderThumbContext(BUBBLE_INPUT_NAME, __scopeSlider);
|
||||
const ref = React.useRef(null);
|
||||
const composedRefs = useComposedRefs(ref, forwardedRef);
|
||||
const prevValue = usePrevious(value);
|
||||
@@ -483,6 +546,8 @@ var SliderBubbleInput = React.forwardRef(
|
||||
Primitive.input,
|
||||
{
|
||||
style: { display: "none" },
|
||||
name,
|
||||
form,
|
||||
...props,
|
||||
ref: composedRefs,
|
||||
defaultValue: value
|
||||
@@ -542,25 +607,39 @@ function linearScale(input, output) {
|
||||
};
|
||||
}
|
||||
function getDecimalCount(value) {
|
||||
return (String(value).split(".")[1] || "").length;
|
||||
if (!Number.isFinite(value)) return 0;
|
||||
const str = value.toString();
|
||||
if (str.includes("e")) {
|
||||
const [coefficient, exponent] = str.split("e");
|
||||
const decimalPart2 = coefficient.split(".")[1] || "";
|
||||
const exponentNum = Number(exponent);
|
||||
return Math.max(0, decimalPart2.length - exponentNum);
|
||||
}
|
||||
const decimalPart = str.split(".")[1];
|
||||
return decimalPart ? decimalPart.length : 0;
|
||||
}
|
||||
function roundValue(value, decimalCount) {
|
||||
const rounder = Math.pow(10, decimalCount);
|
||||
return Math.round(value * rounder) / rounder;
|
||||
}
|
||||
var Root = Slider;
|
||||
var Track = SliderTrack;
|
||||
var Range = SliderRange;
|
||||
var Thumb = SliderThumb;
|
||||
function isFunction(value) {
|
||||
return typeof value === "function";
|
||||
}
|
||||
export {
|
||||
Range,
|
||||
Root,
|
||||
SliderRange as Range,
|
||||
Slider as Root,
|
||||
Slider,
|
||||
SliderRange,
|
||||
SliderThumb,
|
||||
SliderTrack,
|
||||
Thumb,
|
||||
Track,
|
||||
createSliderScope
|
||||
SliderThumb as Thumb,
|
||||
SliderTrack as Track,
|
||||
createSliderScope,
|
||||
SliderBubbleInput as unstable_BubbleInput,
|
||||
SliderBubbleInput as unstable_SliderBubbleInput,
|
||||
SliderThumbProvider as unstable_SliderThumbProvider,
|
||||
SliderThumbTrigger as unstable_SliderThumbTrigger,
|
||||
SliderThumbProvider as unstable_ThumbProvider,
|
||||
SliderThumbTrigger as unstable_ThumbTrigger
|
||||
};
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
|
||||
+3
-3
File diff suppressed because one or more lines are too long
+22
-22
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@radix-ui/react-slider",
|
||||
"version": "1.3.6",
|
||||
"version": "1.4.0",
|
||||
"license": "MIT",
|
||||
"source": "./src/index.ts",
|
||||
"main": "./dist/index.js",
|
||||
@@ -11,28 +11,26 @@
|
||||
],
|
||||
"sideEffects": false,
|
||||
"dependencies": {
|
||||
"@radix-ui/number": "1.1.1",
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-previous": "1.1.1",
|
||||
"@radix-ui/react-use-size": "1.1.1"
|
||||
"@radix-ui/primitive": "1.1.4",
|
||||
"@radix-ui/react-collection": "1.1.9",
|
||||
"@radix-ui/number": "1.1.2",
|
||||
"@radix-ui/react-compose-refs": "1.1.3",
|
||||
"@radix-ui/react-direction": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.4",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.3",
|
||||
"@radix-ui/react-primitive": "2.1.5",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.2",
|
||||
"@radix-ui/react-use-previous": "1.1.2",
|
||||
"@radix-ui/react-use-size": "1.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.0.7",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"eslint": "^9.18.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"typescript": "^5.7.3",
|
||||
"@repo/builder": "0.0.0",
|
||||
"@types/react": "^19.2.2",
|
||||
"@types/react-dom": "^19.2.2",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"typescript": "^5.9.3",
|
||||
"@repo/typescript-config": "0.0.0",
|
||||
"@repo/eslint-config": "0.0.0"
|
||||
"@repo/builder": "0.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
@@ -51,14 +49,16 @@
|
||||
"homepage": "https://radix-ui.com/primitives",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/radix-ui/primitives.git"
|
||||
"url": "git+https://github.com/radix-ui/primitives.git",
|
||||
"directory": "packages/react/slider"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/radix-ui/primitives/issues"
|
||||
},
|
||||
"scripts": {
|
||||
"lint": "eslint --max-warnings 0 src",
|
||||
"lint": "oxlint --max-warnings 0 src",
|
||||
"clean": "rm -rf dist",
|
||||
"reset": "rm -rf dist node_modules",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"build": "radix-build"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user