@webstudio-is/sdk-components-react 0.167.0 → 0.173.0

package/lib/types/__generated__/option.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/react-sdk";
+export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/select.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/react-sdk";
+export declare const props: Record<string, PropMeta>;

package/lib/types/blockquote.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "blockquote";
 export declare const Blockquote: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, "ref"> & import("react").RefAttributes<HTMLQuoteElement>>;

package/lib/types/body.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "body";
 export declare const Body: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLBodyElement>, HTMLBodyElement>, "ref"> & import("react").RefAttributes<HTMLBodyElement>>;

package/lib/types/bold.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "b";
 export declare const Bold: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/lib/types/button.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "button";
 export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/types/checkbox.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const defaultTag = "input";
 export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "value"> & {
-    value?: string | undefined;
+    value?: string;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/code-text.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const defaultTag = "code";
 export declare const CodeText: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & {
-    code?: string | undefined;
+    code?: string;
 }, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/lib/types/components.d.ts

@@ -32,3 +32,5 @@ export { VimeoPlayButton } from "./vimeo-play-button";
 export { VimeoSpinner } from "./vimeo-spinner";
 export { XmlNode } from "./xml-node";
 export { Time } from "./time";
+export { Select } from "./select";
+export { Option } from "./option";

package/lib/types/form.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "form";
 export declare const Form: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import("react").RefAttributes<HTMLFormElement>>;

package/lib/types/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { Hook } from "@webstudio-is/react-sdk";
+export declare const hooks: Hook[];

package/lib/types/html-embed.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const __testing__: {
     scriptTestIdPrefix: string;
 };
@@ -6,6 +5,7 @@ type HtmlEmbedProps = {
     code: string;
     executeScriptOnCanvas?: boolean;
     clientOnly?: boolean;
+    className?: string;
     children?: never;
 };
 export declare const HtmlEmbed: import("react").ForwardRefExoticComponent<HtmlEmbedProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib/types/html-embed.test.d.ts

@@ -1 +1 @@
-import "@testing-library/jest-dom/jest-globals";
+export {};

package/lib/types/image.d.ts

@@ -2,5 +2,7 @@ import { type ComponentPropsWithoutRef } from "react";
 import { Image as WebstudioImage } from "@webstudio-is/image";
 export declare const defaultTag = "img";
 type Props = Omit<ComponentPropsWithoutRef<typeof WebstudioImage>, "loader">;
-export declare const Image: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLImageElement>>;
+export declare const Image: import("react").ForwardRefExoticComponent<Props & {
+    $webstudio$canvasOnly$assetId?: string | undefined;
+} & import("react").RefAttributes<HTMLImageElement>>;
 export {};

package/lib/types/input.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const defaultTag = "input";
 export declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement> & {
-    type?: "number" | "search" | "time" | "text" | "hidden" | "color" | "tel" | "url" | "email" | "date" | "range" | "datetime-local" | "month" | "password" | "week" | undefined;
+    type?: "color" | "date" | "datetime-local" | "email" | "hidden" | "month" | "number" | "password" | "range" | "search" | "tel" | "text" | "time" | "url" | "week";
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/italic.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "i";
 export declare const Italic: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/lib/types/label.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "label";
 export declare const Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/lib/types/list-item.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "li";
 export declare const ListItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/lib/types/metas.d.ts

@@ -33,3 +33,5 @@ export { meta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { meta as VimeoSpinner } from "./vimeo-spinner.ws";
 export { meta as XmlNode } from "./xml-node.ws";
 export { meta as Time } from "./time.ws";
+export { meta as Select } from "./select.ws";
+export { meta as Option } from "./option.ws";

package/lib/types/option.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultTag = "option";
+export declare const Option: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>, "ref"> & import("react").RefAttributes<HTMLOptionElement>>;

package/lib/types/option.ws.d.ts

@@ -0,0 +1,3 @@
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/paragraph.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "p";
 export declare const Paragraph: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/lib/types/props.d.ts

@@ -32,3 +32,5 @@ export { propsMeta as VimeoPlayButton } from "./vimeo-play-button.ws";
 export { propsMeta as VimeoSpinner } from "./vimeo-spinner.ws";
 export { propsMeta as XmlNode } from "./xml-node.ws";
 export { propsMeta as Time } from "./time.ws";
+export { propsMeta as Select } from "./select.ws";
+export { propsMeta as Option } from "./option.ws";

package/lib/types/radio-button.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const defaultTag = "input";
 export declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "type" | "value"> & {
-    value?: string | undefined;
+    value?: string;
 }, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/lib/types/select.d.ts

@@ -0,0 +1,4 @@
+import { type Hook } from "@webstudio-is/react-sdk";
+export declare const defaultTag = "select";
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+export declare const hooksSelect: Hook;

package/lib/types/select.ws.d.ts

@@ -0,0 +1,3 @@
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/separator.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "hr";
 export declare const Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & import("react").RefAttributes<HTMLHRElement>>;

package/lib/types/span.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "span";
 export declare const Span: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/types/subscript.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "sub";
 export declare const Subscript: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/lib/types/superscript.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "sup";
 export declare const Superscript: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/lib/types/textarea.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const defaultTag = "textarea";
 export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/lib/types/vimeo-play-button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { defaultTag } from "./button";
 export { defaultTag };
 export declare const VimeoPlayButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/types/vimeo-preview-image.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-/// <reference types="react" />
 export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponent<Omit<{
     slot?: string | undefined;
     style?: import("react").CSSProperties | undefined;
@@ -48,33 +46,33 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-colcount"?: number | undefined;
     "aria-colindex"?: number | undefined;
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "date" | "location" | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "execute" | "copy" | "move" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
     "aria-label"?: string | undefined;
     "aria-labelledby"?: string | undefined;
@@ -87,9 +85,9 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
@@ -103,7 +101,7 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;
@@ -267,8 +265,8 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    height?: string | number | undefined;
-    width?: string | number | undefined;
+    height?: number | string | undefined;
+    width?: number | string | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
@@ -276,9 +274,11 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     src?: string | undefined;
     loading?: "eager" | "lazy" | undefined;
     decoding?: "async" | "auto" | "sync" | undefined;
-    fetchPriority?: "high" | "low" | "auto" | undefined;
+    fetchPriority?: "high" | "low" | "auto";
     sizes?: string | undefined;
     srcSet?: string | undefined;
-    quality?: number | undefined;
-    optimize?: boolean | undefined;
+    quality?: number;
+    optimize?: boolean;
+} & {
+    $webstudio$canvasOnly$assetId?: string | undefined;
 } & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;

package/lib/types/vimeo-spinner.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const VimeoSpinner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/types/vimeo.d.ts

@@ -65,7 +65,7 @@ export type VimeoOptions = Omit<VimeoPlayerOptions, "dnt" | "interactive_params"
 };
 type PlayerStatus = "initial" | "loading" | "ready";
 export declare const VimeoContext: import("react").Context<{
-    previewImageUrl?: URL | undefined;
+    previewImageUrl?: URL;
     onInitPlayer: () => void;
     status: PlayerStatus;
 }>;

package/lib/types/xml-node.d.ts

@@ -5,8 +5,8 @@ type Props = {
     tag: string;
     xmlns?: string;
     children: ReactNode;
-    [idAttribute]: string;
-    [componentAttribute]: string;
+    [idAttribute]?: string;
+    [componentAttribute]?: string;
 };
 export declare const XmlNode: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.167.0",
+  "version": "0.173.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -27,6 +27,11 @@
       "webstudio": "./src/props.ts",
       "types": "./lib/types/props.d.ts",
       "import": "./lib/props.js"
+    },
+    "./hooks": {
+      "webstudio": "./src/hooks.ts",
+      "types": "./lib/types/hooks.d.ts",
+      "import": "./lib/hooks.js"
     }
   },
   "peerDependencies": {
@@ -36,31 +41,28 @@
   "dependencies": {
     "@react-aria/utils": "^3.21.0",
     "colord": "^2.9.3",
-    "@webstudio-is/icons": "0.167.0",
-    "@webstudio-is/image": "0.167.0",
-    "@webstudio-is/react-sdk": "0.167.0"
+    "@webstudio-is/icons": "0.173.0",
+    "@webstudio-is/react-sdk": "0.173.0",
+    "@webstudio-is/image": "0.173.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.2",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "jest-environment-jsdom": "^29.7.0",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
-    "typescript": "5.4.5",
+    "typescript": "5.5.2",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/jest-config": "1.0.7"
+    "@webstudio-is/jest-config": "1.0.7",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
-    "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
     "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts --outdir=lib --bundle --format=esm --packages=external",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
     "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "typecheck": "tsc",
-    "checks": "pnpm typecheck"
+    "typecheck": "tsc"
   }
 }