reshaped 3.5.1-canary.0 → 3.5.1

package/dist/components/Card/Card.js

@@ -28,9 +28,9 @@ const Card = forwardRef((props, ref) => {
     if (isActionable) {
         return (_jsx(Actionable, { className: rootClassNames, attributes: { ...attributes, style }, href: href, as: TagName, onClick: onClick, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            ref: ref, children: _jsx("span", { className: s.content, children: children }) }));
+            ref: ref, children: children }));
     }
-    return (_jsx(TagName, { ...attributes, onClick: onClick, href: href, ref: ref, className: rootClassNames, style: style, children: _jsx("span", { className: s.content, children: children }) }));
+    return (_jsx(TagName, { ...attributes, onClick: onClick, href: href, ref: ref, className: rootClassNames, style: style, children: children }));
 });
 Card.displayName = "Card";
 export default Card;

package/dist/components/Card/Card.module.css

@@ -1 +1 @@
-.root{--rs-border-width:1px;background:var(--rs-color-background-elevation-base);border:var(--rs-border-width) solid var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral);display:block;overflow:hidden;text-align:initial;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:box-shadow,border-color}.content,.root{position:relative}.content{z-index:var(--rs-z-index-raised)}.--selected{border-color:transparent;box-shadow:0 0 0 2px var(--rs-color-border-primary);transition-timing-function:var(--rs-easing-decelerate)}.--elevated{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised)}.--actionable:not(.--selected){color:inherit;cursor:pointer;outline:none;text-decoration:none}[data-rs-keyboard] .--actionable:not(.--selected):focus{box-shadow:var(--rs-focus-shadow)}.--actionable:not(.--selected):before{background:rgba(var(--rs-color-rgb-background-neutral-faded),32%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--actionable:not(.--selected):hover:before{opacity:1}
+.root{--rs-border-width:1px;background:var(--rs-color-background-elevation-base);border:var(--rs-border-width) solid var(--rs-color-border-neutral-faded);color:var(--rs-color-foreground-neutral);display:block;overflow:hidden;position:relative;text-align:initial;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:box-shadow,border-color}.--selected{border-color:transparent;box-shadow:0 0 0 2px var(--rs-color-border-primary);transition-timing-function:var(--rs-easing-decelerate)}.--elevated{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised)}.--actionable:not(.--selected){color:inherit;cursor:pointer;outline:none;text-decoration:none}[data-rs-keyboard] .--actionable:not(.--selected):focus{box-shadow:var(--rs-focus-shadow)}.--actionable:not(.--selected):before{background:rgba(var(--rs-color-rgb-background-neutral-faded),32%);content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--actionable:not(.--selected):hover:before{opacity:1}

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

@@ -71,7 +71,7 @@ export type ThumbProps = {
     onChange: (value: number, options?: {
         commit?: boolean;
     }) => void;
-    onDragStart: () => void;
+    onDragStart: (e: React.TouchEvent | React.MouseEvent) => void;
     max: number;
     min: number;
     step: NonNullable<BaseProps["step"]>;

package/dist/components/Slider/SliderControlled.js

@@ -136,14 +136,16 @@ const SliderControlled = (props) => {
         disableScroll();
         setDraggingId(closestId);
     };
-    const handleMinDragStart = () => {
+    const handleMinDragStart = (e) => {
         if (disabled)
             return;
+        e.stopPropagation();
         setDraggingId(minId);
     };
-    const handleMaxDragStart = () => {
+    const handleMaxDragStart = (e) => {
         if (disabled)
             return;
+        e.stopPropagation();
         setDraggingId(maxId);
     };
     const handleDragStop = React.useCallback(() => {

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

@@ -14,3 +14,4 @@ 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;
+export declare const testModal: () => import("react").JSX.Element;

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

@@ -2,6 +2,8 @@ import { Example } from "../../../utilities/storybook/index.js";
 import Slider from "../index.js";
 import View from "../../View/index.js";
 import FormControl from "../../FormControl/index.js";
+import Modal from "../../Modal/index.js";
+import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Components/Slider",
     component: Slider,
@@ -61,3 +63,9 @@ export const customRender = () => (<Example>
 			</FormControl>
 		</Example.Item>
 	</Example>);
+export const testModal = () => {
+    const toggle = useToggle(true);
+    return (<Modal active={toggle.active} onClose={toggle.deactivate} position="end">
+			<Slider name="slider" defaultValue={30} renderValue={false}/>
+		</Modal>);
+};

package/dist/components/View/View.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
 import type * as T from "./View.types";
 declare const View: {
-    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): React.ReactNode;
+    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react/jsx-runtime").JSX.Element;
     Item: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): React.ReactNode;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     displayName: string;

package/dist/components/View/tests/View.stories.d.ts

@@ -3,9 +3,9 @@ import { type ViewProps } from "./..";
 declare const _default: {
     title: string;
     component: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.ReactNode;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: ViewProps<As>): React.JSX.Element;
         Item: {
-            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): React.ReactNode;
+            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): React.JSX.Element;
             displayName: string;
         };
         displayName: string;

package/dist/components/View/tests/View.test.stories.d.ts

@@ -2,9 +2,9 @@ import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewProps<As>): React.ReactNode;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewProps<As>): import("react").JSX.Element;
         Item: {
-            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): React.ReactNode;
+            <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): import("react").JSX.Element;
             displayName: string;
         };
         displayName: string;

package/dist/utilities/a11y/focus.d.ts

@@ -1,18 +1,15 @@
-import type { FocusableElement } from "./types";
+import type { FocusableElement, FocusableOptions } from "./types";
 export declare const focusableSelector = "a,button,input:not([type=\"hidden\"]),textarea,select,details,[tabindex],[contenteditable]";
 export declare const getActiveElement: (originEl?: HTMLElement | null) => HTMLButtonElement;
 export declare const focusElement: (el: FocusableElement, options?: {
     pseudoFocus?: boolean;
 }) => void;
-export declare const getFocusableElements: (rootEl: HTMLElement, options?: {
-    additionalElement?: FocusableElement | null;
-}) => FocusableElement[];
+export declare const getFocusableElements: (rootEl: HTMLElement, options?: FocusableOptions) => FocusableElement[];
 export declare const getFocusData: (args: {
     root: HTMLElement;
     target: "next" | "prev" | "first" | "last";
-    options?: {
+    options?: FocusableOptions & {
         circular?: boolean;
-        additionalElement?: FocusableElement | null;
     };
 }) => {
     overflow: boolean;

package/dist/utilities/a11y/focus.js

@@ -26,7 +26,7 @@ export const getFocusableElements = (rootEl, options) => {
         if (el.clientHeight === 0)
             return false;
         // Using getAttribute here since browser sets el.tabIndex to -1 by default
-        if (el.getAttribute("tabindex") === "-1")
+        if (!options?.includeNegativeTabIndex && el.getAttribute("tabindex") === "-1")
             return false;
         if (el.type === "radio") {
             let sameNameRadioEls;
@@ -65,7 +65,10 @@ export const getFocusableElements = (rootEl, options) => {
 };
 export const getFocusData = (args) => {
     const { root, target, options } = args;
-    const focusable = getFocusableElements(root, { additionalElement: options?.additionalElement });
+    const focusable = getFocusableElements(root, {
+        additionalElement: options?.additionalElement,
+        includeNegativeTabIndex: options?.includeNegativeTabIndex,
+    });
     const focusableLimit = focusable.length - 1;
     const currentElement = getActiveElement(root);
     const currentIndex = focusable.indexOf(currentElement);
@@ -87,11 +90,11 @@ export const getFocusData = (args) => {
     }
     return { overflow: isOverflow, el: focusable[nextIndex] };
 };
-const focusTargetElement = (root, target) => {
-    const data = getFocusData({ root, target });
+const focusTargetElement = (root, target, options) => {
+    const data = getFocusData({ root, target, options });
     focusElement(data.el);
 };
-export const focusNextElement = (root) => focusTargetElement(root, "next");
-export const focusPreviousElement = (root) => focusTargetElement(root, "prev");
-export const focusFirstElement = (root) => focusTargetElement(root, "first");
-export const focusLastElement = (root) => focusTargetElement(root, "last");
+export const focusNextElement = (root) => focusTargetElement(root, "next", { includeNegativeTabIndex: true });
+export const focusPreviousElement = (root) => focusTargetElement(root, "prev", { includeNegativeTabIndex: true });
+export const focusFirstElement = (root) => focusTargetElement(root, "first", { includeNegativeTabIndex: true });
+export const focusLastElement = (root) => focusTargetElement(root, "last", { includeNegativeTabIndex: true });

package/dist/utilities/a11y/types.d.ts

@@ -18,3 +18,7 @@
  */
 export type TrapMode = "dialog" | "action-menu" | "action-bar" | "content-menu" | "selection-menu";
 export type FocusableElement = HTMLButtonElement | HTMLInputElement;
+export type FocusableOptions = {
+    additionalElement?: FocusableElement | null;
+    includeNegativeTabIndex?: boolean;
+};

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": "3.5.1-canary.0",
+	"version": "3.5.1",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",