reshaped 2.10.6 → 2.10.8

package/components/Actionable/Actionable.js

@@ -1,13 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import { classNames } from "../../utilities/helpers.js";
 import s from "./Actionable.module.css";
 const Actionable = forwardRef((props, ref) => {
     const { children, href, onClick, type, disabled, insetFocus, borderRadius, as, fullWidth, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], fullWidth && s["--full-width"]);
     const rootAttributes = Object.assign({}, attributes);
-    const repeatRef = React.useRef(false);
     const hasClickHandler = onClick || (attributes === null || attributes === void 0 ? void 0 : attributes.onClick);
     const hasFocusHandler = (attributes === null || attributes === void 0 ? void 0 : attributes.onFocus) || (attributes === null || attributes === void 0 ? void 0 : attributes.onBlur);
     const isLink = Boolean(href || (attributes === null || attributes === void 0 ? void 0 : attributes.href));
@@ -36,12 +35,6 @@ const Actionable = forwardRef((props, ref) => {
         var _a;
         if (disabled)
             return;
-        /**
-         * - Holding enter keep onClick getting triggered
-         * - Storybook environment is triggering onClick twice on each enter press
-         */
-        if (repeatRef.current)
-            return;
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onClick) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
     };
@@ -56,10 +49,6 @@ const Actionable = forwardRef((props, ref) => {
             return;
         event.preventDefault();
         handlePress(event);
-        repeatRef.current = true;
-        requestAnimationFrame(() => {
-            repeatRef.current = false;
-        });
     };
     return (_jsx(TagName, Object.assign({ ref: ref }, rootAttributes, { className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, children: children })));
 });

package/components/DropdownMenu/DropdownMenu.js

@@ -19,7 +19,6 @@ import { useFlyoutContext } from "../_private/Flyout/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useRTL from "../../hooks/useRTL.js";
-import { getActiveElement } from "../../utilities/a11y.js";
 import { classNames } from "../../utilities/helpers.js";
 import * as keys from "../../constants/keys.js";
 import s from "./DropdownMenu.module.css";
@@ -30,6 +29,7 @@ const DropdownMenu = (props) => {
 };
 const DropdownMenuContent = (props) => {
     const { children, attributes, className } = props;
+    const { flyout } = useFlyoutContext();
     const subMenuInstance = React.useContext(DropdownMenuSubContext);
     const [rtl] = useRTL();
     const { ref } = useHotkeys({
@@ -37,11 +37,9 @@ const DropdownMenuContent = (props) => {
             var _a;
             (_a = subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current) === null || _a === void 0 ? void 0 : _a.close();
         },
-        [keys.ENTER]: () => {
-            const el = getActiveElement();
-            el === null || el === void 0 ? void 0 : el.click();
-        },
-    }, [subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current]);
+    }, [subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current], {
+        disabled: flyout.status === "idle",
+    });
     const contentClassName = classNames(s.menu, className);
     return (_jsx(Popover.Content, { className: contentClassName, attributes: Object.assign(Object.assign({}, attributes), { ref }), children: children }));
 };

package/components/Slider/Slider.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);user-select:none;-webkit-tap-highlight-color:transparent}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{--rs-slider-tooltip-translate-x:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);left:50%;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transform:translate(var(--rs-slider-tooltip-translate-x));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1))!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
+.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);user-select:none;-webkit-tap-highlight-color:transparent}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{--rs-slider-tooltip-translate-x:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;left:50%;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transform:translate(var(--rs-slider-tooltip-translate-x));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1.5))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1.5))!important}.input:focus+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}

package/components/Slider/Slider.types.d.ts

@@ -73,6 +73,7 @@ export type ThumbProps = {
     onDragStart: () => void;
     max: number;
     min: number;
+    step: NonNullable<BaseProps["step"]>;
     renderValue?: BaseProps["renderValue"];
     tooltipRef: React.RefObject<HTMLDivElement>;
 };

package/components/Slider/Slider.utilities.d.ts

@@ -0,0 +1,2 @@
+export declare const getPrecision: (value: number) => number;
+export declare const applyStepToValue: (value: number, step: number) => number;

package/components/Slider/Slider.utilities.js

@@ -0,0 +1,14 @@
+export const getPrecision = (value) => {
+    const floatPart = value.toString().split(".")[1];
+    return (floatPart === null || floatPart === void 0 ? void 0 : floatPart.length) || 0;
+};
+export const applyStepToValue = (value, step) => {
+    const isStepFloat = step % 1 !== 0;
+    const result = Math.round(value / step) * step;
+    // Handle javascript floats manually with string conversion
+    if (isStepFloat) {
+        const precision = getPrecision(step);
+        return Number(result.toFixed(precision));
+    }
+    return result;
+};

package/components/Slider/SliderControlled.js

@@ -7,15 +7,13 @@ import useRTL from "../../hooks/useRTL.js";
 import useElementId from "../../hooks/useElementId.js";
 import { useFormControl } from "../FormControl/index.js";
 import SliderThumb from "./SliderThumb.js";
+import { applyStepToValue } from "./Slider.utilities.js";
 import s from "./Slider.module.css";
 const getDragX = (event) => {
     if (event instanceof MouseEvent)
         return event.pageX || event.screenX;
     return event.changedTouches[0].pageX;
 };
-const applyStepToValue = (value, step) => {
-    return Math.round(value / step) * step;
-};
 const SliderControlled = (props) => {
     var _a;
     const { name, range, max, min, step = 1, onChange, onChangeCommit, renderValue, className, attributes, } = props;
@@ -200,6 +198,6 @@ const SliderControlled = (props) => {
     _jsxs("div", Object.assign({}, attributes, { className: rootClassNames, onMouseDown: handleMouseDown, onTouchStart: handleMouseDown, children: [_jsx("div", { className: s.bar, ref: barRef, children: _jsx("div", { className: s.selection, style: {
                         insetInlineStart: `${minPercentPosition || 0}%`,
                         width: `${maxPercentPosition - (minPercentPosition || 0)}%`,
-                    } }) }), minValue !== undefined && minPercentPosition !== undefined && (_jsx(SliderThumb, { id: minId, active: minId === draggingId, name: name, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, tooltipRef: minTooltipRef, renderValue: renderValue })), _jsx(SliderThumb, { id: maxId, active: maxId === draggingId, name: name, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, tooltipRef: maxTooltipRef, renderValue: renderValue })] })));
+                    } }) }), minValue !== undefined && minPercentPosition !== undefined && (_jsx(SliderThumb, { id: minId, active: minId === draggingId, name: name, disabled: disabled, onChange: handleMinChange, value: minValue, onDragStart: handleMinDragStart, position: minPercentPosition, max: max, min: min, ref: minRef, tooltipRef: minTooltipRef, renderValue: renderValue, step: step })), _jsx(SliderThumb, { id: maxId, active: maxId === draggingId, name: name, disabled: disabled, onChange: handleMaxChange, value: maxValue, onDragStart: handleMaxDragStart, position: maxPercentPosition, max: max, min: min, ref: maxRef, tooltipRef: maxTooltipRef, renderValue: renderValue, step: step })] })));
 };
 export default SliderControlled;

package/components/Slider/SliderThumb.js

@@ -4,15 +4,17 @@ import React from "react";
 import { classNames } from "../../utilities/helpers.js";
 import Theme from "../Theme/index.js";
 import Text from "../Text/index.js";
+import { getPrecision } from "./Slider.utilities.js";
 import s from "./Slider.module.css";
 const SliderThumb = (props, ref) => {
-    const { name, value, disabled, active, position, max, min, onChange, onDragStart, renderValue, tooltipRef, } = props;
+    const { name, value, disabled, active, position, max, min, step, onChange, onDragStart, renderValue, tooltipRef, } = props;
     const id = React.useId();
     const thumbClassNames = classNames(s.thumb, active && s["thumb--active"]);
-    const tooltipValue = renderValue ? renderValue({ value }) : value;
+    const precision = getPrecision(step);
+    const tooltipValue = renderValue ? renderValue({ value }) : value.toFixed(precision);
     const handleChange = (e) => {
         onChange(+e.target.value);
     };
-    return (_jsxs(_Fragment, { children: [_jsx("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, "aria-labelledby": id }), _jsx("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { insetInlineStart: `${position}%` }, id: id, "aria-hidden": "true", children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", weight: "medium", className: s.tooltip, attributes: { ref: tooltipRef }, children: tooltipValue }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, step: step, "aria-labelledby": id }), _jsx("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { insetInlineStart: `${position}%` }, id: id, "aria-hidden": "true", children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", weight: "medium", className: s.tooltip, attributes: { ref: tooltipRef }, children: tooltipValue }) }) })] }));
 };
 export default React.forwardRef(SliderThumb);

package/components/Slider/tests/Slider.stories.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
 };
 export default _default;
 export declare const base: () => import("react").JSX.Element;
+export declare const step: () => import("react").JSX.Element;
 export declare const boundaries: () => import("react").JSX.Element;
 export declare const status: () => import("react").JSX.Element;
 export declare const customRender: () => import("react").JSX.Element;

package/components/Slider/tests/Slider.stories.js

@@ -18,6 +18,11 @@ export const base = () => (<Example>
 			<Slider range name="slider" defaultMinValue={30} defaultMaxValue={70} renderValue={() => "Hundred more times"}/>
 		</Example.Item>
 	</Example>);
+export const step = () => (<Example>
+		<Example.Item title="float step">
+			<Slider name="slider" defaultValue={30} step={0.01}/>
+		</Example.Item>
+	</Example>);
 export const boundaries = () => (<Example>
 		<Example.Item title="min: 20, max: 30, value: 25">
 			<Slider name="slider" defaultValue={25} min={20} max={30}/>

package/hooks/_private/useSingletonHotkeys.js

@@ -98,7 +98,9 @@ export class HotkeyStore {
                             !(e.target === data.ref.current || data.ref.current.contains(e.target))) {
                             return;
                         }
-                        data.callback(pressedMap[pressedId]);
+                        const resolvedEvent = pressedMap[pressedId];
+                        resolvedEvent === null || resolvedEvent === void 0 ? void 0 : resolvedEvent.preventDefault();
+                        data.callback(resolvedEvent);
                         this.hotkeyMap[pressedId].used = true;
                     });
                 }

package/hooks/tests/useHotkeys.stories.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const state: () => React.JSX.Element;
+export declare const state: () => import("react").JSX.Element;

package/hooks/tests/useHotkeys.stories.js

@@ -1,4 +1,3 @@
-import React from "react";
 import useHotkeys from "../useHotkeys.js";
 import View from "../../components/View/index.js";
 export default { title: "Hooks/useHotkeys" };

package/hooks/useHotkeys.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 declare const useHotkeys: <Element_1 extends HTMLElement>(hotkeys: Record<string, ((e: KeyboardEvent) => void) | null>, deps?: unknown[], options?: {
     ref?: React.RefObject<Element_1> | undefined;
+    disabled?: boolean | undefined;
 } | undefined) => {
     ref: React.RefObject<Element_1>;
     checkHotkeyState: (key: string) => boolean;

package/hooks/useHotkeys.js

@@ -6,10 +6,12 @@ const useHotkeys = (hotkeys, deps = [], options) => {
     const generatedRef = React.useRef(null);
     const elementRef = (options === null || options === void 0 ? void 0 : options.ref) || generatedRef;
     React.useEffect(() => {
+        if (options === null || options === void 0 ? void 0 : options.disabled)
+            return;
         const remove = addHotkeys(hotkeys, elementRef);
         return () => remove === null || remove === void 0 ? void 0 : remove();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [addHotkeys, Object.keys(hotkeys).join(","), ...deps]);
+    }, [addHotkeys, Object.keys(hotkeys).join(","), options === null || options === void 0 ? void 0 : options.disabled, ...deps]);
     return { ref: elementRef, checkHotkeyState: isPressed };
 };
 export default useHotkeys;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "2.10.6",
+	"version": "2.10.8",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",