reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,197 +1,191 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testIcon = exports.className = exports.disabled = exports.selectedColor = exports.multiple = exports.single = void 0;
-const test_1 = require("storybook/test");
-const ToggleButton_1 = __importDefault(require("../../../components/ToggleButton"));
-const ToggleButtonGroup_1 = __importDefault(require("../../../components/ToggleButtonGroup"));
-const storybook_1 = require("../../../utilities/storybook");
-const Checkmark_1 = __importDefault(require("../../../icons/Checkmark"));
-const Minus_1 = __importDefault(require("../../../icons/Minus"));
-const Plus_1 = __importDefault(require("../../../icons/Plus"));
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import ToggleButton from "../../../components/ToggleButton/index.js";
+import ToggleButtonGroup from "../../../components/ToggleButtonGroup/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconCheckmark from "../../../icons/Checkmark.js";
+import IconMinus from "../../../icons/Minus.js";
+import IconPlus from "../../../icons/Plus.js";
+export default {
     title: "Components/ToggleButtonGroup",
-    component: ToggleButtonGroup_1.default,
+    component: ToggleButtonGroup,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/toggle-button-group",
         },
     },
 };
-exports.single = {
+export const single = {
     name: "checked, defaultChecked, onChange",
     args: {
-        handleUncontrolledChange: (0, test_1.fn)(),
-        handleControlledChange: (0, test_1.fn)(),
-        handleItemChange: (0, test_1.fn)(),
+        handleUncontrolledChange: fn(),
+        handleControlledChange: fn(),
+        handleItemChange: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="single, uncontrolled, onChange">
-				<ToggleButtonGroup_1.default onChange={args.handleUncontrolledChange}>
-					<ToggleButton_1.default value="1" onChange={args.handleItemChange}>
+    render: (args) => (<Example>
+			<Example.Item title="single, uncontrolled, onChange">
+				<ToggleButtonGroup onChange={args.handleUncontrolledChange}>
+					<ToggleButton value="1" onChange={args.handleItemChange}>
 						Button
-					</ToggleButton_1.default>
-					<ToggleButton_1.default value="2">Button</ToggleButton_1.default>
-				</ToggleButtonGroup_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="single, controlled, onChange">
-				<ToggleButtonGroup_1.default onChange={args.handleControlledChange} value={[]}>
-					<ToggleButton_1.default value="3" onChange={args.handleItemChange}>
+					</ToggleButton>
+					<ToggleButton value="2">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+			<Example.Item title="single, controlled, onChange">
+				<ToggleButtonGroup onChange={args.handleControlledChange} value={[]}>
+					<ToggleButton value="3" onChange={args.handleItemChange}>
 						Button
-					</ToggleButton_1.default>
-					<ToggleButton_1.default value="4">Button</ToggleButton_1.default>
-				</ToggleButtonGroup_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</ToggleButton>
+					<ToggleButton value="4">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, args }) => {
         const [uncontrolledButton1, uncontrolledButton2, controlledButton1, controlledButton2] = canvas.getAllByRole("button");
-        await test_1.userEvent.click(uncontrolledButton1);
-        (0, test_1.expect)(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+        await userEvent.click(uncontrolledButton1);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
             value: ["1"],
-            event: test_1.expect.objectContaining({ target: uncontrolledButton1 }),
+            event: expect.objectContaining({ target: uncontrolledButton1 }),
         });
-        await test_1.userEvent.click(uncontrolledButton2);
-        (0, test_1.expect)(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+        await userEvent.click(uncontrolledButton2);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
             value: ["2"],
-            event: test_1.expect.objectContaining({ target: uncontrolledButton2 }),
+            event: expect.objectContaining({ target: uncontrolledButton2 }),
         });
-        await test_1.userEvent.click(controlledButton1);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenLastCalledWith({
+        await userEvent.click(controlledButton1);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
             value: ["3"],
-            event: test_1.expect.objectContaining({ target: controlledButton1 }),
+            event: expect.objectContaining({ target: controlledButton1 }),
         });
-        await test_1.userEvent.click(controlledButton2);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenLastCalledWith({
+        await userEvent.click(controlledButton2);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
             value: ["4"],
-            event: test_1.expect.objectContaining({ target: controlledButton2 }),
+            event: expect.objectContaining({ target: controlledButton2 }),
         });
-        (0, test_1.expect)(args.handleItemChange).not.toHaveBeenCalled();
+        expect(args.handleItemChange).not.toHaveBeenCalled();
     },
 };
-exports.multiple = {
+export const multiple = {
     name: "selectionMode, checked, defaultChecked, onChange",
     args: {
-        handleUncontrolledChange: (0, test_1.fn)(),
-        handleControlledChange: (0, test_1.fn)(),
+        handleUncontrolledChange: fn(),
+        handleControlledChange: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="multiple, uncontrolled, onChange">
-				<ToggleButtonGroup_1.default onChange={args.handleUncontrolledChange} selectionMode="multiple">
-					<ToggleButton_1.default value="1">Button</ToggleButton_1.default>
-					<ToggleButton_1.default value="2">Button</ToggleButton_1.default>
-				</ToggleButtonGroup_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="multiple, controlled, onChange">
-				<ToggleButtonGroup_1.default onChange={args.handleControlledChange} value={[]} selectionMode="multiple">
-					<ToggleButton_1.default value="3">Button</ToggleButton_1.default>
-					<ToggleButton_1.default value="4">Button</ToggleButton_1.default>
-				</ToggleButtonGroup_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: (args) => (<Example>
+			<Example.Item title="multiple, uncontrolled, onChange">
+				<ToggleButtonGroup onChange={args.handleUncontrolledChange} selectionMode="multiple">
+					<ToggleButton value="1">Button</ToggleButton>
+					<ToggleButton value="2">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+			<Example.Item title="multiple, controlled, onChange">
+				<ToggleButtonGroup onChange={args.handleControlledChange} value={[]} selectionMode="multiple">
+					<ToggleButton value="3">Button</ToggleButton>
+					<ToggleButton value="4">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, args }) => {
         const [uncontrolledButton1, uncontrolledButton2, controlledButton1, controlledButton2] = canvas.getAllByRole("button");
-        await test_1.userEvent.click(uncontrolledButton1);
-        (0, test_1.expect)(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+        await userEvent.click(uncontrolledButton1);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
             value: ["1"],
-            event: test_1.expect.objectContaining({ target: uncontrolledButton1 }),
+            event: expect.objectContaining({ target: uncontrolledButton1 }),
         });
-        await test_1.userEvent.click(uncontrolledButton2);
-        (0, test_1.expect)(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
+        await userEvent.click(uncontrolledButton2);
+        expect(args.handleUncontrolledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleUncontrolledChange).toHaveBeenLastCalledWith({
             value: ["1", "2"],
-            event: test_1.expect.objectContaining({ target: uncontrolledButton2 }),
+            event: expect.objectContaining({ target: uncontrolledButton2 }),
         });
-        await test_1.userEvent.click(controlledButton1);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenLastCalledWith({
+        await userEvent.click(controlledButton1);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
             value: ["3"],
-            event: test_1.expect.objectContaining({ target: controlledButton1 }),
+            event: expect.objectContaining({ target: controlledButton1 }),
         });
-        await test_1.userEvent.click(controlledButton2);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenCalledTimes(2);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenLastCalledWith({
+        await userEvent.click(controlledButton2);
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(2);
+        expect(args.handleControlledChange).toHaveBeenLastCalledWith({
             value: ["4"],
-            event: test_1.expect.objectContaining({ target: controlledButton2 }),
+            event: expect.objectContaining({ target: controlledButton2 }),
         });
     },
 };
-exports.selectedColor = {
+export const selectedColor = {
     name: "color, selectedColor, selectedVariant",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="selectedColor: primary">
-				<ToggleButtonGroup_1.default selectedColor="primary" defaultValue={["2"]}>
-					<ToggleButton_1.default value="1">Button</ToggleButton_1.default>
-					<ToggleButton_1.default value="2">Button</ToggleButton_1.default>
-					<ToggleButton_1.default value="3">Button</ToggleButton_1.default>
-				</ToggleButtonGroup_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: primary, selectedColor: critical">
-				<ToggleButtonGroup_1.default color="primary" selectedColor="critical" defaultValue={["2"]}>
-					<ToggleButton_1.default value="1" variant="ghost">
+    render: () => (<Example>
+			<Example.Item title="selectedColor: primary">
+				<ToggleButtonGroup selectedColor="primary" defaultValue={["2"]}>
+					<ToggleButton value="1">Button</ToggleButton>
+					<ToggleButton value="2">Button</ToggleButton>
+					<ToggleButton value="3">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+			<Example.Item title="color: primary, selectedColor: critical">
+				<ToggleButtonGroup color="primary" selectedColor="critical" defaultValue={["2"]}>
+					<ToggleButton value="1" variant="ghost">
 						Button
-					</ToggleButton_1.default>
-					<ToggleButton_1.default value="2" variant="ghost">
+					</ToggleButton>
+					<ToggleButton value="2" variant="ghost">
 						Button
-					</ToggleButton_1.default>
-					<ToggleButton_1.default value="3" variant="ghost">
+					</ToggleButton>
+					<ToggleButton value="3" variant="ghost">
 						Button
-					</ToggleButton_1.default>
-				</ToggleButtonGroup_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: primary, selectedColor: critical, selectedVariant: solid">
-				<ToggleButtonGroup_1.default selectedColor="primary" selectedVariant="solid" defaultValue={["2"]}>
-					<ToggleButton_1.default value="1">Button</ToggleButton_1.default>
-					<ToggleButton_1.default value="2">Button</ToggleButton_1.default>
-					<ToggleButton_1.default value="3">Button</ToggleButton_1.default>
-				</ToggleButtonGroup_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+			<Example.Item title="color: primary, selectedColor: critical, selectedVariant: solid">
+				<ToggleButtonGroup selectedColor="primary" selectedVariant="solid" defaultValue={["2"]}>
+					<ToggleButton value="1">Button</ToggleButton>
+					<ToggleButton value="2">Button</ToggleButton>
+					<ToggleButton value="3">Button</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+		</Example>),
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabled">
-				<ToggleButtonGroup_1.default selectedColor="critical" value={["1"]}>
-					<ToggleButton_1.default disabled value="1" color="critical">
+    render: () => (<Example>
+			<Example.Item title="disabled">
+				<ToggleButtonGroup selectedColor="critical" value={["1"]}>
+					<ToggleButton disabled value="1" color="critical">
 						Button
-					</ToggleButton_1.default>
-					<ToggleButton_1.default disabled value="2" color="critical">
+					</ToggleButton>
+					<ToggleButton disabled value="2" color="critical">
 						Button
-					</ToggleButton_1.default>
-				</ToggleButtonGroup_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</ToggleButton>
+				</ToggleButtonGroup>
+			</Example.Item>
+		</Example>),
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<ToggleButtonGroup_1.default className="test-classname" attributes={{ id: "test-id" }}>
-				<ToggleButton_1.default>Button 1</ToggleButton_1.default>
-				<ToggleButton_1.default>Button 1</ToggleButton_1.default>
-			</ToggleButtonGroup_1.default>
+			<ToggleButtonGroup className="test-classname" attributes={{ id: "test-id" }}>
+				<ToggleButton>Button 1</ToggleButton>
+				<ToggleButton>Button 1</ToggleButton>
+			</ToggleButtonGroup>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };
-exports.testIcon = {
+export const testIcon = {
     name: "test: icon only",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="icon only">
-				<ToggleButtonGroup_1.default selectedColor="primary">
-					<ToggleButton_1.default value="1" icon={Plus_1.default}/>
-					<ToggleButton_1.default value="2" icon={Minus_1.default}/>
-					<ToggleButton_1.default value="3" icon={Checkmark_1.default}/>
-				</ToggleButtonGroup_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="icon only">
+				<ToggleButtonGroup selectedColor="primary">
+					<ToggleButton value="1" icon={IconPlus}/>
+					<ToggleButton value="2" icon={IconMinus}/>
+					<ToggleButton value="3" icon={IconCheckmark}/>
+				</ToggleButtonGroup>
+			</Example.Item>
+		</Example>),
 };

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./Tooltip.types";
+import type * as T from "./Tooltip.types.js";
 declare const Tooltip: React.FC<T.Props>;
 export default Tooltip;

package/dist/components/Tooltip/Tooltip.js

@@ -1,12 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Flyout from "../../components/Flyout";
+import Flyout from "../../components/Flyout/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
     const { text, children, position = "bottom", color = "inverted", contentMaxWidth = "360px", ...flyoutProps } = props;
     if (!text)
         return children({ ref: null }, { active: false });
     return (_jsxs(Flyout, { ...flyoutProps, contentGap: flyoutProps.contentGap ?? 1.5, position: position, triggerType: "hover", 
+        // Tapping the trigger usually runs its action, so tooltips only open with hover and keyboard focus
+        disableTouchTrigger: true, 
         // Disable group timeouts by default since it's not controlled by the default user events
         groupTimeouts: flyoutProps.active === undefined ? true : false, contentMaxWidth: contentMaxWidth, contentClassName: s.root, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { colorMode: color, children: text })] }));
 };

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FlyoutProps, FlyoutTriggerAttributes } from "../../components/Flyout";
+import type { FlyoutProps, FlyoutTriggerAttributes } from "../../components/Flyout/index.js";
 export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "onAfterOpen" | "onAfterClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "positionRef" | "contentGap" | "contentShift" | "contentMaxWidth" | "contentZIndex" | "originCoordinates" | "contentAttributes" | "contentClassName" | "instanceRef"> & {
     /** Node for inserting children */
     children: (attributes: FlyoutTriggerAttributes, props: {

package/dist/components/Tooltip/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./Tooltip";
-export type { Props as TooltipProps } from "./Tooltip.types";
+export { default } from "./Tooltip.js";
+export type { Props as TooltipProps } from "./Tooltip.types.js";

package/dist/components/Tooltip/index.js

@@ -1 +1 @@
-export { default } from "./Tooltip";
+export { default } from "./Tooltip.js";

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

@@ -1,6 +1,6 @@
 import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
-import { TooltipProps } from "../../../components/Tooltip";
+import { TooltipProps } from "../../../components/Tooltip/index.js";
 declare const _default: {
     title: string;
     component: import("react").FC<TooltipProps>;