@warp-ds/elements 2.9.1-next.4 → 2.9.1-next.5

package/dist/packages/button/button.react.stories.d.ts

@@ -3,8 +3,14 @@ import React from 'react';
 import { Button } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
-    component: import("@lit/react").ReactWebComponent<import("./button").WarpButton, {}>;
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+        fullWidth?: boolean;
+        iconOnly?: boolean;
+    } & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+        fullWidth?: boolean;
+        iconOnly?: boolean;
+    } & React.RefAttributes<import("./button").WarpButton>>;
 };
 export default _default;
 export type Story = StoryObj<typeof Button>;

package/dist/packages/button/button.react.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/packages/button/button.react.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Button } from './react.js';
+describe('Button React SSR', () => {
+    test('renders fullWidth as the full-width attribute', () => {
+        const html = renderToString(React.createElement(Button, { fullWidth: true }, 'Full width'));
+        expect(html).toContain('full-width');
+        expect(html).not.toContain('fullWidth');
+    });
+    test('renders iconOnly as the icon-only attribute', () => {
+        const html = renderToString(React.createElement(Button, { iconOnly: true }, 'Icon only'));
+        expect(html).toContain('icon-only');
+        expect(html).not.toContain('iconOnly');
+    });
+});

package/dist/packages/button/react.d.ts

@@ -1,2 +1,6 @@
+import React from 'react';
 import { WarpButton } from './button.js';
-export declare const Button: import("@lit/react").ReactWebComponent<WarpButton, {}>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpButton>, "value" | "form" | "small" | "name" | "disabled" | "type" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "ariaValueTextLoading" | "_handleButtonClick"> & {} & Partial<Omit<WarpButton, keyof HTMLElement>> & React.RefAttributes<WarpButton>, "ref">, "full-width" | "icon-only"> & {
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+} & React.RefAttributes<WarpButton>>;

package/dist/packages/button/react.js

@@ -4,8 +4,15 @@ import React from 'react';
 // decouple from CDN by providing a dummy class
 class Component extends LitElement {
 }
-export const Button = createComponent({
+const BaseButton = createComponent({
     tagName: 'w-button',
     elementClass: Component,
     react: React,
 });
+export const Button = React.forwardRef(({ fullWidth, iconOnly, ...props }, ref) => React.createElement(BaseButton, {
+    ...props,
+    ...(fullWidth ? { 'full-width': true } : {}),
+    ...(iconOnly ? { 'icon-only': true } : {}),
+    ref,
+}));
+Button.displayName = 'Button';

package/dist/packages/select/select.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { Select } from './react';
 declare const _default: {
     title: string;
-    render(args: Omit<React.HTMLAttributes<import("./select").WarpSelect>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "readOnly" | "readonly" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "autoFocus" | "onChange" | "optional" | "willUpdate" | "formStateRestoreCallback" | "always" | "hint" | "_options" | "_setValue" | "handleKeyDown"> & {
+    render(args: Omit<React.HTMLAttributes<import("./select").WarpSelect>, "value" | "form" | "label" | "name" | "disabled" | "invalid" | "helpText" | "readOnly" | "readonly" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onchange" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "autoFocus" | "onChange" | "hint" | "optional" | "willUpdate" | "formStateRestoreCallback" | "always" | "_options" | "_setValue" | "handleKeyDown"> & {
         onChange?: (e: Event) => void;
         onchange?: (e: Event) => void;
     } & Partial<Omit<import("./select").WarpSelect, keyof HTMLElement>> & React.RefAttributes<import("./select").WarpSelect>): React.JSX.Element;

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@warp-ds/elements",
-  "version": "2.9.1-next.3",
+  "version": "2.9.1-next.4",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "2.9.1-next.4",
+  "version": "2.9.1-next.5",
   "packageManager": "pnpm@10.33.2",
   "description": "Custom elements for Warp",
   "exports": {