reshaped 3.8.0-canary.2 → 3.8.0-canary.20

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").TableProps> & {
@@ -15,8 +16,27 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const layout: () => React.JSX.Element;
-export declare const border: () => React.JSX.Element;
-export declare const rows: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
-export declare const examples: () => React.JSX.Element;
+export declare const layout: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const border: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const rows: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const render: StoryObj;
+export declare const tbody: StoryObj;
+export declare const tabIndex: StoryObj;
+export declare const className: StoryObj;
+export declare const edgeCases: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const examples: {
+    name: string;
+    render: () => React.JSX.Element;
+};

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

@@ -4,6 +4,7 @@ import Table from "../index.js";
 import Checkbox from "../../Checkbox/index.js";
 import Card from "../../Card/index.js";
 import View from "../../View/index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Table",
     component: Table,
@@ -13,201 +14,294 @@ export default {
         },
     },
 };
-export const layout = () => (<Example>
-		<Example.Item title="base">
-			<Table>
-				<Table.Head>
+export const layout = {
+    name: "base",
+    render: () => (<Example>
+			<Example.Item title="base">
+				<Table>
+					<Table.Head>
+						<Table.Row>
+							<Table.Heading>Column 1</Table.Heading>
+							<Table.Heading>Column 2</Table.Heading>
+						</Table.Row>
+					</Table.Head>
+					<Table.Body>
+						<Table.Row>
+							<Table.Cell>Cell 1</Table.Cell>
+							<Table.Cell>Cell 2</Table.Cell>
+						</Table.Row>
+					</Table.Body>
+				</Table>
+			</Example.Item>
+			<Example.Item title="colspan: 2 for col 2, rowspan: 2 for cell 3">
+				<Table>
 					<Table.Row>
 						<Table.Heading>Column 1</Table.Heading>
-						<Table.Heading>Column 2</Table.Heading>
+						<Table.Heading colSpan={2}>Column 2</Table.Heading>
 					</Table.Row>
-				</Table.Head>
-				<Table.Body>
 					<Table.Row>
 						<Table.Cell>Cell 1</Table.Cell>
 						<Table.Cell>Cell 2</Table.Cell>
+						<Table.Cell rowSpan={2}>Cell 3</Table.Cell>
 					</Table.Row>
-				</Table.Body>
-			</Table>
-		</Example.Item>
-		<Example.Item title="colspan: 2 for col 2, rowspan: 2 for cell 3">
-			<Table>
-				<Table.Row>
-					<Table.Heading>Column 1</Table.Heading>
-					<Table.Heading colSpan={2}>Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-					<Table.Cell rowSpan={2}>Cell 3</Table.Cell>
-				</Table.Row>
-				<Table.Row>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-		<Example.Item title="align: center for heading 1, align: end for heading 2">
-			<Table>
-				<Table.Row>
-					<Table.Heading align="center">Column 1</Table.Heading>
-					<Table.Heading align="end">Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-		<Example.Item title="valign: center for cell 2, valign: end for cell 3">
-			<Table>
-				<Table.Row>
-					<Table.Heading>Column 1</Table.Heading>
-					<Table.Heading>Column 2</Table.Heading>
-					<Table.Heading>Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row>
-					<Table.Cell>
-						<View height={15} backgroundColor="neutral-faded"/>
-					</Table.Cell>
-					<Table.Cell verticalAlign="center">Cell 2</Table.Cell>
-					<Table.Cell verticalAlign="end">Cell 3</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-		<Example.Item title="width: 40%, minWidth: 200px for col 1">
-			<Table>
-				<Table.Row>
-					<Table.Heading width="40%" minWidth="200px">
-						Column 1
-					</Table.Heading>
-					<Table.Heading>Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-	</Example>);
-export const border = () => (<Example>
-		<Example.Item title="border: true">
-			<Table border>
-				<Table.Row>
-					<Table.Heading>Column 1</Table.Heading>
-					<Table.Heading>Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-		<Example.Item title="columnBorder: true">
-			<Table columnBorder>
-				<Table.Row>
-					<Table.Heading>Column 1</Table.Heading>
-					<Table.Heading>Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-		<Example.Item title="columnBorder: true, border: true">
-			<Table columnBorder border>
-				<Table.Row>
-					<Table.Heading>Column 1</Table.Heading>
-					<Table.Heading>Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-	</Example>);
-export const rows = () => (<Example>
-		<Example.Item title="highlighted for row 2">
-			<Table>
-				<Table.Row>
-					<Table.Heading>Column 1</Table.Heading>
-					<Table.Heading>Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row highlighted>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-		<Example.Item title="clickable row 2, focus ring">
-			<Table>
-				<Table.Row>
-					<Table.Heading>Column 1</Table.Heading>
-					<Table.Heading>Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row onClick={() => { }}>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-	</Example>);
-export const edgeCases = () => (<Example>
-		<Example.Item title="scroll fade">
-			<Table>
-				<Table.Row>
-					<Table.Heading width="500px">Column 1</Table.Heading>
-					<Table.Heading width="500px">Column 2</Table.Heading>
-				</Table.Row>
-				<Table.Row>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-				</Table.Row>
-			</Table>
-		</Example.Item>
-		<Example.Item title="card with highlighted heading">
-			<Card elevated padding={0}>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="align: center for heading 1, align: end for heading 2">
 				<Table>
-					<Table.Row highlighted>
-						<Table.Heading width="50%" minWidth="200px">
+					<Table.Row>
+						<Table.Heading align="center">Column 1</Table.Heading>
+						<Table.Heading align="end">Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="valign: center for cell 2, valign: end for cell 3">
+				<Table>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>
+							<View height={15} backgroundColor="neutral-faded"/>
+						</Table.Cell>
+						<Table.Cell verticalAlign="center">Cell 2</Table.Cell>
+						<Table.Cell verticalAlign="end">Cell 3</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="width: 40%, minWidth: 200px for col 1">
+				<Table>
+					<Table.Row>
+						<Table.Heading width="40%" minWidth="200px">
 							Column 1
 						</Table.Heading>
-						<Table.Heading colSpan={2} align="end">
-							Column 2
-						</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell align="center">Cell 2</Table.Cell>
-						<Table.Cell align="end">Cell 3</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+		</Example>),
+};
+export const border = {
+    name: "border",
+    render: () => (<Example>
+			<Example.Item title="border: true">
+				<Table border>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Cell 1</Table.Cell>
-						<Table.Cell align="center">Cell 2</Table.Cell>
-						<Table.Cell align="end">Cell 3</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="columnBorder: true">
+				<Table columnBorder>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="columnBorder: true, border: true">
+				<Table columnBorder border>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+		</Example>),
+};
+export const rows = {
+    name: "rows",
+    render: () => (<Example>
+			<Example.Item title="highlighted for row 2">
+				<Table>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row highlighted>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
 					</Table.Row>
 				</Table>
-			</Card>
-		</Example.Item>
-		<Example.Item title="width: auto, nowrap">
-			<Table>
+			</Example.Item>
+			<Example.Item title="clickable row 2, focus ring">
+				<Table>
+					<Table.Row>
+						<Table.Heading>Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row onClick={() => { }}>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+		</Example>),
+};
+export const render = {
+    name: "rendering",
+    render: () => (<Table>
+			<Table.Head>
 				<Table.Row>
-					<Table.Heading width="50%">Column 1</Table.Heading>
-					<Table.Heading>Column 2</Table.Heading>
-					<Table.Heading>Column 3</Table.Heading>
-					<Table.Heading width="auto">Long heading title</Table.Heading>
+					<Table.Heading>Heading</Table.Heading>
+					<Table.Heading>Heading</Table.Heading>
 				</Table.Row>
+			</Table.Head>
+			<Table.Body>
 				<Table.Row>
-					<Table.Cell>Cell 1</Table.Cell>
-					<Table.Cell>Cell 2</Table.Cell>
-					<Table.Cell>Cell 3</Table.Cell>
-					<Table.Cell>Cell 4</Table.Cell>
+					<Table.Cell>Content</Table.Cell>
+					<Table.Cell>Content</Table.Cell>
+				</Table.Row>
+			</Table.Body>
+		</Table>),
+    play: async ({ canvas }) => {
+        const body = canvas.getAllByRole("rowgroup");
+        const rows = canvas.getAllByRole("row");
+        const headings = canvas.getAllByRole("columnheader");
+        const cells = canvas.getAllByRole("cell");
+        expect(body).toHaveLength(2);
+        expect(rows).toHaveLength(2);
+        expect(headings).toHaveLength(2);
+        expect(cells).toHaveLength(2);
+        expect(canvas.getAllByText("Heading")).toHaveLength(2);
+        expect(canvas.getAllByText("Content")).toHaveLength(2);
+    },
+};
+export const tbody = {
+    name: "tbody rendering",
+    render: () => (<Table>
+			<Table.Row>
+				<Table.Heading>Heading</Table.Heading>
+				<Table.Heading>Heading</Table.Heading>
+			</Table.Row>
+		</Table>),
+    play: async ({ canvas }) => {
+        const body = canvas.getByRole("rowgroup");
+        expect(body).toBeInTheDocument();
+    },
+};
+export const tabIndex = {
+    name: "adds tabIndex for clickable rows",
+    render: () => (<Table>
+			<Table.Row>
+				<Table.Cell />
+			</Table.Row>
+			<Table.Row onClick={() => { }}>
+				<Table.Cell />
+			</Table.Row>
+			<Table.Row attributes={{ onClick: () => { } }}>
+				<Table.Cell />
+			</Table.Row>
+		</Table>),
+    play: async ({ canvas }) => {
+        const elRows = canvas.getAllByRole("row");
+        expect(elRows[0]).not.toHaveAttribute("tabIndex");
+        expect(elRows[1]).toHaveAttribute("tabIndex", "0");
+        expect(elRows[2]).toHaveAttribute("tabIndex", "0");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Table className="test-classname" attributes={{ id: "test-id" }}>
+				<Table.Row attributes={{ id: "test-row-id" }}>
+					<Table.Cell attributes={{ id: "test-cell-id" }}></Table.Cell>
 				</Table.Row>
 			</Table>
-		</Example.Item>
-	</Example>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const row = canvas.getByRole("row");
+        const cell = canvas.getByRole("cell");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(row).toHaveAttribute("id", "test-row-id");
+        expect(cell).toHaveAttribute("id", "test-cell-id");
+    },
+};
+export const edgeCases = {
+    name: "test: edge cases",
+    render: () => (<Example>
+			<Example.Item title="scroll fade">
+				<Table>
+					<Table.Row>
+						<Table.Heading width="500px">Column 1</Table.Heading>
+						<Table.Heading width="500px">Column 2</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+			<Example.Item title="card with highlighted heading">
+				<Card elevated padding={0}>
+					<Table>
+						<Table.Row highlighted>
+							<Table.Heading width="50%" minWidth="200px">
+								Column 1
+							</Table.Heading>
+							<Table.Heading colSpan={2} align="end">
+								Column 2
+							</Table.Heading>
+						</Table.Row>
+						<Table.Row>
+							<Table.Cell>Cell 1</Table.Cell>
+							<Table.Cell align="center">Cell 2</Table.Cell>
+							<Table.Cell align="end">Cell 3</Table.Cell>
+						</Table.Row>
+						<Table.Row>
+							<Table.Cell>Cell 1</Table.Cell>
+							<Table.Cell align="center">Cell 2</Table.Cell>
+							<Table.Cell align="end">Cell 3</Table.Cell>
+						</Table.Row>
+					</Table>
+				</Card>
+			</Example.Item>
+			<Example.Item title="width: auto, nowrap">
+				<Table>
+					<Table.Row>
+						<Table.Heading width="50%">Column 1</Table.Heading>
+						<Table.Heading>Column 2</Table.Heading>
+						<Table.Heading>Column 3</Table.Heading>
+						<Table.Heading width="auto">Long heading title</Table.Heading>
+					</Table.Row>
+					<Table.Row>
+						<Table.Cell>Cell 1</Table.Cell>
+						<Table.Cell>Cell 2</Table.Cell>
+						<Table.Cell>Cell 3</Table.Cell>
+						<Table.Cell>Cell 4</Table.Cell>
+					</Table.Row>
+				</Table>
+			</Example.Item>
+		</Example>),
+};
 const SelectionDemo = () => {
     const [value, setValue] = React.useState([]);
     const rows = [
@@ -244,8 +338,11 @@ const SelectionDemo = () => {
 				</Table.Row>))}
 		</Table>);
 };
-export const examples = () => (<Example>
-		<Example.Item title="selectable">
-			<SelectionDemo />
-		</Example.Item>
-	</Example>);
+export const examples = {
+    name: "test: selectable",
+    render: () => (<Example>
+			<Example.Item title="selectable">
+				<SelectionDemo />
+			</Example.Item>
+		</Example>),
+};

package/dist/components/Tabs/Tabs.module.css

@@ -1 +1 @@
-@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;isolation:isolate;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-focus-inset-shadow)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.item{color:var(--rs-color-foreground-neutral)}@media (hover:hover) and (pointer:fine){.item:not(.--item-disabled,.--item-active):hover{color:var(--rs-color-foreground-neutral-faded)}}.item.--item-disabled{color:var(--rs-color-foreground-disabled)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0}.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-focus-shadow)}.--panel-hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex;overflow:hidden}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}
+@property --rs-tabs-mid-l{syntax:"<length>";initial-value:-24px;inherits:false}@property --rs-tabs-stop-l{syntax:"<length>";initial-value:0;inherits:false}@property --rs-tabs-stop-r{syntax:"<length-percentage>";initial-value:100%;inherits:false}@property --rs-tabs-mid-r{syntax:"<length-percentage>";initial-value:calc(100% + 24px);inherits:false}.root{box-sizing:initial;isolation:isolate;max-width:100%}.list,.root{position:relative}.list{--rs-tabs-gap:var(--rs-unit-x6);gap:var(--rs-tabs-gap)}.inner:after{background-color:var(--rs-color-border-neutral-faded);content:"";position:absolute;z-index:2}.listItem{flex-shrink:0;position:relative}.button{overflow:hidden;position:relative;z-index:1;-webkit-tap-highlight-color:transparent}.button,.buttonContent{border-radius:var(--rs-radius-medium);width:100%}.buttonContent{align-items:center;box-sizing:border-box;display:flex}.icon{color:inherit;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}[data-rs-keyboard] .radio:focus+.buttonContent{box-shadow:var(--rs-shadow-focus-inset)}.icon:not(:last-child){margin-inline-end:var(--rs-unit-x2)}.item{color:var(--rs-color-foreground-neutral)}@media (hover:hover) and (pointer:fine){.item:not(.--item-disabled,.--item-active):hover{color:var(--rs-color-foreground-neutral-faded)}}.item.--item-disabled{color:var(--rs-color-foreground-disabled)}.--item-active:after{content:""}.--item-active:after,.selector{background:var(--rs-color-border-primary);border-radius:calc(var(--rs-radius-medium) - 1px);position:absolute;z-index:var(--rs-z-index-relative)}.selector{--rs-tab-selection-x:0;--rs-tab-selection-y:0;--rs-tab-selection-scale-x:0;--rs-tab-selection-scale-y:0;transform:translate(calc(var(--rs-tab-selection-x) * 1px),calc(var(--rs-tab-selection-y) * 1px)) translateZ(0);transform-origin:0 0}.--selector-hidden{visibility:hidden}.--selector-animated{transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:transform,height,width;will-change:transform,height,width}.control{align-items:center;display:none;inset-block:0;opacity:0;pointer-events:none;position:absolute;transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:opacity,transform;z-index:var(--rs-z-index-relative)}.control.control--active{opacity:1;pointer-events:all}[dir=rtl] .control{transform:scaleX(-1)}.control--next{inset-inline-end:0}.control--prev{inset-inline-start:0}.panel{outline:none}[data-rs-keyboard] .panel:focus{box-shadow:var(--rs-shadow-focus)}.--panel-hidden{display:none}.--scrollable .inner{overflow:auto;overflow:-moz-scrollbars-none;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to right,transparent 0,transparent var(--rs-tabs-mid-l),#000 var(--rs-tabs-stop-l),#000 var(--rs-tabs-stop-r),transparent var(--rs-tabs-mid-r),transparent 100%);transition:var(--rs-duration-medium) var(--rs-easing-decelerate);transition-property:--rs-tabs-stop-l,--rs-tabs-stop-r,--rs-tabs-mid-l,--rs-tabs-mid-r}.--scrollable .inner::-webkit-scrollbar{display:none}.--direction-row .inner{white-space:nowrap}.--direction-row .inner:after{bottom:0;height:1px;inset-inline:0}.--direction-row .list{align-items:center;display:inline-flex;flex-wrap:nowrap;vertical-align:top}.--direction-row .--item-active:after{height:2px;inset-inline:0;bottom:0}.--direction-row .selector{bottom:0;height:2px;left:0;width:calc(var(--rs-tab-selection-scale-x) * 1px)}.--direction-row .button{box-sizing:initial;margin:var(--rs-unit-x1) calc(var(--rs-unit-x2) * -1);padding:0 var(--rs-unit-x2)}.--direction-row .buttonContent{justify-content:center;padding:var(--rs-tabs-item-p-v) 0}.--direction-column .inner:after{height:100%;inset-block:0;inset-inline-end:0;width:1px}.--direction-column .list{--rs-tabs-gap:var(--rs-unit-x1);display:flex;flex-direction:column}.--direction-column .item{padding-inline-end:var(--rs-unit-x1)}.--direction-column .--item-active:after{bottom:0}.--direction-column .--item-active:after,.--direction-column .selector{height:100%;inset-inline-end:0;width:2px}.--direction-column .selector{height:calc(var(--rs-tab-selection-scale-y) * 1px);top:0}.--direction-column .button{margin-inline-start:calc(var(--rs-unit-x2) * -1);padding:var(--rs-unit-x2);width:calc(100% + var(--rs-unit-x1))}.--direction-column .buttonContent{justify-content:flex-start}.--variant-borderless .inner:after,.--variant-pills .inner:after,.--variant-pills-elevated .inner:after{content:none}.--variant-pills .button,.--variant-pills-elevated .button{margin:0;padding:0}.--variant-pills .buttonContent,.--variant-pills-elevated .buttonContent{margin:0;padding:var(--rs-tabs-item-p-v) var(--rs-tabs-item-p-h)}@media (hover:hover) and (pointer:fine){.--variant-pills .buttonContent:hover,.--variant-pills-elevated .buttonContent:hover{background:none}}.--variant-pills-elevated .buttonContent{padding:calc(var(--rs-tabs-item-p-v) - var(--rs-unit-x1) / 2) var(--rs-tabs-item-p-h)}.--variant-pills .list,.--variant-pills-elevated .list{--rs-tabs-gap:var(--rs-unit-x1)}.--variant-pills .selector,.--variant-pills-elevated .selector{background-color:var(--rs-color-background-neutral);height:calc(var(--rs-tab-selection-scale-y) * 1px);opacity:.6;width:calc(var(--rs-tab-selection-scale-x) * 1px);z-index:0}.--direction-column.--variant-pills .selector,.--direction-column.--variant-pills-elevated .selector{left:0}.--direction-row.--variant-pills .selector,.--direction-row.--variant-pills-elevated .selector{top:0}.--variant-pills .--item-active:after,.--variant-pills-elevated .--item-active:after{background-color:var(--rs-color-background-neutral);opacity:.6;z-index:0}.--direction-column.--variant-pills .--item-active:after,.--direction-column.--variant-pills-elevated .--item-active:after{width:100%}.--direction-row.--variant-pills .--item-active:after,.--direction-row.--variant-pills-elevated .--item-active:after{height:100%}.--variant-pills-elevated .list{background:var(--rs-color-background-neutral-faded);border:2px solid transparent;border-radius:var(--rs-radius-medium)}.--variant-pills-elevated .--item-active:after,.--variant-pills-elevated .selector{background:var(--rs-color-background-elevation-raised);box-shadow:var(--rs-shadow-raised);box-sizing:border-box;opacity:1}.--size-medium{--rs-tabs-item-p-v:var(--rs-unit-x2);--rs-tabs-item-p-h:var(--rs-unit-x3)}.--size-large{--rs-tabs-item-p-v:var(--rs-unit-x3);--rs-tabs-item-p-h:var(--rs-unit-x4)}.--item-width-equal{max-width:none}.--item-width-equal .inner{flex-wrap:wrap}.--item-width-equal .list{display:flex;overflow:hidden}.--item-width-equal .listItem{flex-basis:0;flex-grow:1;margin:0}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:100%;--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:0px;--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}@media (pointer:fine){.control{display:flex}.--fade-end .inner,[dir=rtl] .--fade-start .inner{--rs-tabs-mid-r:calc(100% - var(--rs-unit-x1) * 4);--rs-tabs-stop-r:calc(100% - var(--rs-unit-x1) * 10)}.--fade-start .inner,[dir=rtl] .--fade-end .inner{--rs-tabs-mid-l:calc(var(--rs-unit-x1) * 4);--rs-tabs-stop-l:calc(var(--rs-unit-x1) * 10)}}

package/dist/components/Tabs/TabsControlled.js

@@ -7,6 +7,7 @@ const TabsControlled = (props) => {
     const { children, value, onChange, onSilentChange, itemWidth, variant, name, direction = "row", size = "medium", } = props;
     const id = useElementId();
     const elActiveRef = React.useRef(null);
+    // eslint-disable-next-line react-hooks/refs
     const elPrevActiveRef = React.useRef(elActiveRef.current);
     const elScrollableRef = React.useRef(null);
     const [selection, setSelection] = React.useState({

package/dist/components/Tabs/TabsList.js

@@ -3,9 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/props.js";
 import useRTL from "../../hooks/useRTL.js";
-import { focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "../../utilities/a11y/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
+import useKeyboardArrowNavigation from "../../hooks/useKeyboardArrowNavigation.js";
 import useFadeSide from "../../hooks/_private/useFadeSide.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
@@ -61,23 +60,7 @@ const TabsList = (props) => {
             left: itemEl.offsetLeft,
         };
     }, [elScrollableRef]);
-    const { ref: hotkeysRef } = useHotkeys({
-        "ArrowLeft, ArrowUp": () => {
-            focusPreviousElement(elScrollableRef.current);
-        },
-        "ArrowRight, ArrowDown": () => {
-            focusNextElement(elScrollableRef.current);
-        },
-        Home: () => {
-            focusFirstElement(elScrollableRef.current);
-        },
-        End: () => {
-            focusLastElement(elScrollableRef.current);
-        },
-    }, [], {
-        preventDefault: true,
-        disabled: !!name,
-    });
+    useKeyboardArrowNavigation({ ref: elScrollableRef, disabled: !!name });
     useIsomorphicLayoutEffect(() => {
         if (value)
             return;
@@ -106,7 +89,7 @@ const TabsList = (props) => {
             return;
         setSelection({ ...selectionStyle, status: "animated" });
     }, [selection]);
-    return (_jsxs("div", { ...attributes, className: rootClassNames, children: [_jsx("div", { className: s.inner, ref: elScrollableRef, children: _jsxs("div", { className: s.list, role: "tablist", ref: hotkeysRef, children: [React.Children.map(children, (child, index) => {
+    return (_jsxs("div", { ...attributes, className: rootClassNames, children: [_jsx("div", { className: s.inner, ref: elScrollableRef, children: _jsxs("div", { className: s.list, role: "tablist", children: [React.Children.map(children, (child, index) => {
                             if (!React.isValidElement(child))
                                 return null;
                             const props = child.props;