@vaadin/react-components 24.8.0-alpha8 → 24.8.0-beta1

package/Markdown.d.ts

@@ -0,0 +1,9 @@
+import { type ReactElement, type RefAttributes } from 'react';
+import { type MarkdownProps as _MarkdownProps, type MarkdownElement } from './generated/Markdown.js';
+export * from './generated/Markdown.js';
+export type MarkdownProps = Partial<Omit<_MarkdownProps, 'children' | 'content'>> & Readonly<{
+    children?: string | null;
+}>;
+declare const ForwardedMarkdown: (props: MarkdownProps & RefAttributes<MarkdownElement>) => ReactElement | null;
+export { ForwardedMarkdown as Markdown };
+//# sourceMappingURL=Markdown.d.ts.map

package/Markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["src/Markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAEL,KAAK,aAAa,IAAI,cAAc,EACpC,KAAK,eAAe,EACrB,MAAM,yBAAyB,CAAC;AAEjC,cAAc,yBAAyB,CAAC;AAExC,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC,GAC/E,QAAQ,CAAC;IACP,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC,CAAC;AAML,QAAA,MAAM,iBAAiB,EAA2B,CAChD,KAAK,EAAE,aAAa,GAAG,aAAa,CAAC,eAAe,CAAC,KAClD,YAAY,GAAG,IAAI,CAAC;AAEzB,OAAO,EAAE,iBAAiB,IAAI,QAAQ,EAAE,CAAC"}

package/Markdown.js

@@ -0,0 +1,2 @@
+export*from"@vaadin/markdown/vaadin-markdown.js";import{forwardRef as m}from"react";import{Markdown as n}from"@vaadin/markdown/vaadin-markdown.js";import*as a from"react";import{createComponent as p}from"./utils/createComponent.js";var d={},o=p({elementClass:n,events:d,react:a,tagName:"vaadin-markdown"});import{jsx as M}from"react/jsx-runtime";function w({children:r,...e},t){return M(o,{...e,ref:t,content:r??""})}var c=m(w);export{c as Markdown,n as MarkdownElement};
+//# sourceMappingURL=Markdown.js.map

package/Markdown.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/Markdown.tsx", "src/generated/Markdown.ts"],
+  "sourcesContent": ["export * from \"@vaadin/markdown/vaadin-markdown.js\";\nimport { forwardRef, type ForwardedRef, type ReactElement, type RefAttributes } from 'react';\nimport {\n  Markdown as _Markdown,\n  type MarkdownProps as _MarkdownProps,\n  type MarkdownElement,\n} from './generated/Markdown.js';\n\nexport * from './generated/Markdown.js';\n\nexport type MarkdownProps = Partial<Omit<_MarkdownProps, 'children' | 'content'>> &\n  Readonly<{\n    children?: string | null;\n  }>;\n\nfunction Markdown({ children, ...props }: MarkdownProps, ref: ForwardedRef<MarkdownElement>): ReactElement | null {\n  return <_Markdown {...props} ref={ref} content={children ?? ''}></_Markdown>;\n}\n\nconst ForwardedMarkdown = forwardRef(Markdown) as (\n  props: MarkdownProps & RefAttributes<MarkdownElement>,\n) => ReactElement | null;\n\nexport { ForwardedMarkdown as Markdown };\n", "import type {} from \"@lit/react\";\nimport { Markdown as MarkdownElement, } from \"@vaadin/markdown/vaadin-markdown.js\";\nimport * as React from \"react\";\nimport { createComponent, type WebComponentProps } from \"../utils/createComponent.js\";\nexport { MarkdownElement, };\nexport type MarkdownEventMap = Readonly<{}>;\nconst events = {} as MarkdownEventMap;\nexport type MarkdownProps = WebComponentProps<MarkdownElement, MarkdownEventMap>;\nexport const Markdown = createComponent({\n    elementClass: MarkdownElement, events, react: React, tagName: \"vaadin-markdown\"\n});\n"],
+  "mappings": "AAAA,WAAc,sCACd,OAAS,cAAAA,MAA4E,QCArF,OAAS,YAAYC,MAAwB,sCAC7C,UAAYC,MAAW,QACvB,OAAS,mBAAAC,MAA+C,6BAGxD,IAAMC,EAAS,CAAC,EAEHC,EAAWC,EAAgB,CACpC,aAAcC,EAAiB,OAAAH,EAAQ,MAAOI,EAAO,QAAS,iBAClE,CAAC,EDMQ,cAAAC,MAAA,oBADT,SAASC,EAAS,CAAE,SAAAC,EAAU,GAAGC,CAAM,EAAkBC,EAAyD,CAChH,OAAOJ,EAACC,EAAA,CAAW,GAAGE,EAAO,IAAKC,EAAK,QAASF,GAAY,GAAI,CAClE,CAEA,IAAMG,EAAoBC,EAAWL,CAAQ",
+  "names": ["forwardRef", "MarkdownElement", "React", "createComponent", "events", "Markdown", "createComponent", "MarkdownElement", "React", "jsx", "Markdown", "children", "props", "ref", "ForwardedMarkdown", "forwardRef"]
+}

package/MasterDetailLayout.d.ts

@@ -0,0 +1,37 @@
+import { MasterDetailLayout as _MasterDetailLayout } from './generated/MasterDetailLayout.js';
+import React from 'react';
+export * from './generated/MasterDetailLayout.js';
+type MasterProps = React.PropsWithChildren<{}>;
+type DetailProps = React.PropsWithChildren<{}>;
+declare const MasterDetailLayoutWithValidation: React.FC<React.ComponentProps<typeof _MasterDetailLayout>>;
+/**
+ * `MasterDetailLayout` is a React component for building UIs with a master
+ * (or primary) area and a detail (or secondary) area that is displayed next to, or
+ * overlaid on top of, the master area, depending on configuration and viewport size.
+ *
+ * Content for each area should be wrapped into to the respective
+ * `MasterDetailLayout.Master` and `MasterDetailLayout.Detail` wrapper components.
+ * Using any other component as a child will throw an error. To ensure that view
+ * transitions are run properly, details content should be rendered conditionally
+ * into the `MasterDetailLayout.Detail` component.
+ *
+ * @example
+ * ```tsx
+ * const selectedProduct = useSignal<Product | null>(null);
+ *
+ * <MasterDetailLayout>
+ *   <MasterDetailLayout.Master>
+ *     <ProductList onSelect={(product) => { selectedProduct.value = product }} />
+ *   </MasterDetailLayout.Master>
+ *   <MasterDetailLayout.Detail>
+ *     { selectedProduct.value && <ProductDetail product={selectedProduct.value} /> }
+ *   </MasterDetailLayout.Detail>
+ * </MasterDetailLayout>
+ * ```
+ */
+declare const MasterDetailLayout: typeof MasterDetailLayoutWithValidation & {
+    Master: React.FC<MasterProps>;
+    Detail: React.FC<DetailProps>;
+};
+export { MasterDetailLayout };
+//# sourceMappingURL=MasterDetailLayout.d.ts.map

package/MasterDetailLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetailLayout.d.ts","sourceRoot":"","sources":["src/MasterDetailLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,mBAAmB,EAE1C,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,cAAc,mCAAmC,CAAC;AAElD,KAAK,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAC/C,KAAK,WAAW,GAAG,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAoI/C,QAAA,MAAM,gCAAgC,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAIhG,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,QAAA,MAAM,kBAAkB,EAAuC,OAAO,gCAAgC,GAAG;IACvG,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;IAC9B,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;CAC/B,CAAC;AAKF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/MasterDetailLayout.js

@@ -0,0 +1,2 @@
+export*from"@vaadin/master-detail-layout/vaadin-master-detail-layout.js";import{MasterDetailLayout as v}from"@vaadin/master-detail-layout/vaadin-master-detail-layout.js";import*as L from"react";import{createComponent as R}from"./utils/createComponent.js";var P={onBackdropClick:"backdrop-click",onDetailEscapePress:"detail-escape-press"},m=R({elementClass:v,events:P,react:L,tagName:"vaadin-master-detail-layout"});import s,{useEffect as k,useLayoutEffect as x,useRef as p,useState as f}from"react";import{Fragment as A,jsx as d,jsxs as N}from"react/jsx-runtime";function D({children:t}){return t}function b(t,e){let n=s.Children.toArray(t).filter(a=>s.isValidElement(a)),l=s.Children.toArray(e).filter(a=>s.isValidElement(a));if(n.length!==l.length)return!0;for(let a=0;a<n.length;a++){let r=n[a],i=l[a];if(r.type!==i.type||r.key!==i.key)return!0}return!1}function M({children:t}){let e=p(null),n=p(0),l=p(null),a=n.current+1,[r,i]=f("idle"),[c,y]=f(t);return x(()=>{let u=e.current?.closest("vaadin-master-detail-layout");if(u){if(r==="idle"){let o=e.current.childElementCount>0;e.current.setAttribute("slot",o?"detail":"detail-hidden")}else if(r==="starting"){let o=e.current.childElementCount>0,E=l.current.childElementCount>0,C=o&&E?"replace":o?"remove":"add";u._startTransition(C,()=>{i("ready"),y(t),n.current=a})}else if(r==="ready"){let o=e.current.childElementCount>0;e.current.setAttribute("slot",o?"detail":"detail-hidden"),u._finishTransition().then(()=>{i("idle")})}}},[r,c]),k(()=>{r==="idle"&&(b(c,t)?i("starting"):y(t))},[r,t]),N(A,{children:[d("div",{ref:e,style:{display:"contents"},children:c},n.current),r==="starting"&&d("div",{ref:l,style:{display:"none"},children:t},a)]})}function _(t){s.Children.forEach(t,e=>{if(s.isValidElement(e)&&e.type!==D&&e.type!==M)throw new Error("Invalid child in MasterDetailLayout. Only <MasterDetailLayout.Master> and <MasterDetailLayout.Detail> components are allowed. Check the component docs for proper usage.")})}var g=t=>(_(t.children),d(m,{...t})),h=g;h.Master=D;h.Detail=M;export{h as MasterDetailLayout,v as MasterDetailLayoutElement};
+//# sourceMappingURL=MasterDetailLayout.js.map

package/MasterDetailLayout.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["src/MasterDetailLayout.tsx", "src/generated/MasterDetailLayout.ts"],
+  "sourcesContent": ["export * from \"@vaadin/master-detail-layout/vaadin-master-detail-layout.js\";\nimport {\n  MasterDetailLayout as _MasterDetailLayout,\n  MasterDetailLayoutElement,\n} from './generated/MasterDetailLayout.js';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\n\nexport * from './generated/MasterDetailLayout.js';\n\ntype MasterProps = React.PropsWithChildren<{}>;\ntype DetailProps = React.PropsWithChildren<{}>;\n\ntype MasterDetailLayoutElementWithInternalAPI = MasterDetailLayoutElement & {\n  _startTransition: (transitionType: 'add' | 'remove' | 'replace', callback: () => void) => void;\n  _finishTransition: () => Promise<void>;\n};\n\nfunction Master({ children }: MasterProps) {\n  return children;\n}\n\n/**\n * Compares two sets of React children to detect meaningful changes, ignoring text nodes.\n * Compares by component type and key.\n *\n * @param prevChildren Previous children\n * @param nextChildren Current children\n * @returns True if the non-text children are meaningfully different, false otherwise\n */\nfunction areChildrenDifferent(prevChildren: React.ReactNode, nextChildren: React.ReactNode): boolean {\n  // Convert to arrays and filter out text nodes\n  const prevArray = React.Children.toArray(prevChildren).filter((child) => React.isValidElement(child));\n  const nextArray = React.Children.toArray(nextChildren).filter((child) => React.isValidElement(child));\n\n  // If lengths are different, children have changed\n  if (prevArray.length !== nextArray.length) {\n    return true;\n  }\n\n  // Compare each element by type and key\n  for (let i = 0; i < prevArray.length; i++) {\n    const prevChild = prevArray[i] as React.ReactElement;\n    const nextChild = nextArray[i] as React.ReactElement;\n\n    // Compare by type\n    if (prevChild.type !== nextChild.type) {\n      return true;\n    }\n\n    // Compare by key (React.Children.toArray adds keys if missing)\n    if (prevChild.key !== nextChild.key) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\nfunction Detail({ children }: DetailProps) {\n  const currentDetailsRef = useRef<HTMLDivElement>(null);\n  const currentDetailsKey = useRef<number>(0);\n  const nextDetailsRef = useRef<HTMLDivElement>(null);\n  const nextDetailsKey = currentDetailsKey.current + 1;\n  const [state, setState] = useState('idle');\n  const [currentChildren, setCurrentChildren] = useState(children);\n\n  useLayoutEffect(() => {\n    const layout = currentDetailsRef.current?.closest(\n      'vaadin-master-detail-layout',\n    ) as MasterDetailLayoutElementWithInternalAPI;\n    if (!layout) {\n      return;\n    }\n\n    if (state === 'idle') {\n      // No transition in progress\n      // Just update slot name\n      const hasChildren = currentDetailsRef.current!.childElementCount > 0;\n      currentDetailsRef.current!.setAttribute('slot', hasChildren ? 'detail' : 'detail-hidden');\n    } else if (state === 'starting') {\n      // Transition is starting and old and (invisible) new details are rendered\n      // Determine the transition type based on old and new detail contents\n      const hasCurrentDetails = currentDetailsRef.current!.childElementCount > 0;\n      const hasNextDetails = nextDetailsRef.current!.childElementCount > 0;\n      const transitionType = hasCurrentDetails && hasNextDetails ? 'replace' : hasCurrentDetails ? 'remove' : 'add';\n      // Start transition to capture old DOM state\n      layout._startTransition(transitionType, () => {\n        // Once old DOM state is captured, render with new details only\n        setState('ready');\n        setCurrentChildren(children);\n        currentDetailsKey.current = nextDetailsKey;\n      });\n    } else if (state === 'ready') {\n      // Transition is ready and new details are rendered\n      // Update slot name to either show or hide the new details\n      const hasChildren = currentDetailsRef.current!.childElementCount > 0;\n      currentDetailsRef.current!.setAttribute('slot', hasChildren ? 'detail' : 'detail-hidden');\n      // Finish transition to animate to new DOM state\n      layout._finishTransition().then(() => {\n        // Transition is finished, reset state\n        setState('idle');\n      });\n    }\n  }, [state, currentChildren]);\n\n  useEffect(() => {\n    if (state !== 'idle') {\n      return;\n    }\n    if (areChildrenDifferent(currentChildren, children)) {\n      setState('starting');\n    } else {\n      setCurrentChildren(children);\n    }\n  }, [state, children]);\n\n  return (\n    <>\n      <div ref={currentDetailsRef} key={currentDetailsKey.current} style={{ display: 'contents' }}>\n        {currentChildren}\n      </div>\n      {state === 'starting' && (\n        <div ref={nextDetailsRef} key={nextDetailsKey} style={{ display: 'none' }}>\n          {children}\n        </div>\n      )}\n    </>\n  );\n}\n\nfunction validateChildren(children: React.ReactNode) {\n  React.Children.forEach(children, (child) => {\n    // Ignore non-React elements\n    // We especially want to ignore text nodes to allow for whitespace resulting from formatting\n    if (React.isValidElement(child) && child.type !== Master && child.type !== Detail) {\n      throw new Error(\n        'Invalid child in MasterDetailLayout. Only <MasterDetailLayout.Master> and <MasterDetailLayout.Detail> components are allowed. Check the component docs for proper usage.',\n      );\n    }\n  });\n}\n\nconst MasterDetailLayoutWithValidation: React.FC<React.ComponentProps<typeof _MasterDetailLayout>> = (props) => {\n  validateChildren(props.children);\n\n  return <_MasterDetailLayout {...props} />;\n};\n\n/**\n * `MasterDetailLayout` is a React component for building UIs with a master\n * (or primary) area and a detail (or secondary) area that is displayed next to, or\n * overlaid on top of, the master area, depending on configuration and viewport size.\n *\n * Content for each area should be wrapped into to the respective\n * `MasterDetailLayout.Master` and `MasterDetailLayout.Detail` wrapper components.\n * Using any other component as a child will throw an error. To ensure that view\n * transitions are run properly, details content should be rendered conditionally\n * into the `MasterDetailLayout.Detail` component.\n *\n * @example\n * ```tsx\n * const selectedProduct = useSignal<Product | null>(null);\n *\n * <MasterDetailLayout>\n *   <MasterDetailLayout.Master>\n *     <ProductList onSelect={(product) => { selectedProduct.value = product }} />\n *   </MasterDetailLayout.Master>\n *   <MasterDetailLayout.Detail>\n *     { selectedProduct.value && <ProductDetail product={selectedProduct.value} /> }\n *   </MasterDetailLayout.Detail>\n * </MasterDetailLayout>\n * ```\n */\nconst MasterDetailLayout = MasterDetailLayoutWithValidation as typeof MasterDetailLayoutWithValidation & {\n  Master: React.FC<MasterProps>;\n  Detail: React.FC<DetailProps>;\n};\n\nMasterDetailLayout.Master = Master;\nMasterDetailLayout.Detail = Detail;\n\nexport { MasterDetailLayout };\n", "import type { EventName } from \"@lit/react\";\nimport { MasterDetailLayout as MasterDetailLayoutElement, type MasterDetailLayoutEventMap as _MasterDetailLayoutEventMap, } from \"@vaadin/master-detail-layout/vaadin-master-detail-layout.js\";\nimport * as React from \"react\";\nimport { createComponent, type WebComponentProps } from \"../utils/createComponent.js\";\nexport { MasterDetailLayoutElement, };\nexport type MasterDetailLayoutEventMap = Readonly<{\n    onBackdropClick: EventName<_MasterDetailLayoutEventMap[\"backdrop-click\"]>;\n    onDetailEscapePress: EventName<_MasterDetailLayoutEventMap[\"detail-escape-press\"]>;\n}>;\nconst events = { onBackdropClick: \"backdrop-click\", onDetailEscapePress: \"detail-escape-press\" } as MasterDetailLayoutEventMap;\nexport type MasterDetailLayoutProps = WebComponentProps<MasterDetailLayoutElement, MasterDetailLayoutEventMap>;\nexport const MasterDetailLayout = createComponent({\n    elementClass: MasterDetailLayoutElement, events, react: React, tagName: \"vaadin-master-detail-layout\"\n});\n"],
+  "mappings": "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",
+  "names": ["MasterDetailLayoutElement", "React", "createComponent", "events", "MasterDetailLayout", "createComponent", "MasterDetailLayoutElement", "React", "React", "useEffect", "useLayoutEffect", "useRef", "useState", "Fragment", "jsx", "jsxs", "Master", "children", "areChildrenDifferent", "prevChildren", "nextChildren", "prevArray", "child", "nextArray", "i", "prevChild", "nextChild", "Detail", "currentDetailsRef", "currentDetailsKey", "nextDetailsRef", "nextDetailsKey", "state", "setState", "currentChildren", "setCurrentChildren", "layout", "hasChildren", "hasCurrentDetails", "hasNextDetails", "transitionType", "validateChildren", "MasterDetailLayoutWithValidation", "props", "MasterDetailLayout"]
+}

package/generated/Markdown.d.ts

@@ -0,0 +1,9 @@
+import { Markdown as MarkdownElement } from "@vaadin/markdown/vaadin-markdown.js";
+import * as React from "react";
+import { type WebComponentProps } from "../utils/createComponent.js";
+export * from "@vaadin/markdown/vaadin-markdown.js";
+export { MarkdownElement, };
+export type MarkdownEventMap = Readonly<{}>;
+export type MarkdownProps = WebComponentProps<MarkdownElement, MarkdownEventMap>;
+export declare const Markdown: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<MarkdownElement, Readonly<{}>>> & React.RefAttributes<MarkdownElement>) => React.ReactElement | null;
+//# sourceMappingURL=Markdown.d.ts.map

package/generated/Markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../src/generated/Markdown.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,eAAe,EAAG,MAAM,qCAAqC,CAAC;AACnF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAE,eAAe,GAAG,CAAC;AAC5B,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG,iBAAiB,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;AACjF,eAAO,MAAM,QAAQ,oLAEnB,CAAC"}

package/generated/MasterDetailLayout.d.ts

@@ -0,0 +1,16 @@
+import type { EventName } from "@lit/react";
+import { MasterDetailLayout as MasterDetailLayoutElement, type MasterDetailLayoutEventMap as _MasterDetailLayoutEventMap } from "@vaadin/master-detail-layout/vaadin-master-detail-layout.js";
+import * as React from "react";
+import { type WebComponentProps } from "../utils/createComponent.js";
+export * from "@vaadin/master-detail-layout/vaadin-master-detail-layout.js";
+export { MasterDetailLayoutElement, };
+export type MasterDetailLayoutEventMap = Readonly<{
+    onBackdropClick: EventName<_MasterDetailLayoutEventMap["backdrop-click"]>;
+    onDetailEscapePress: EventName<_MasterDetailLayoutEventMap["detail-escape-press"]>;
+}>;
+export type MasterDetailLayoutProps = WebComponentProps<MasterDetailLayoutElement, MasterDetailLayoutEventMap>;
+export declare const MasterDetailLayout: (props: Partial<import("../utils/createComponent.js").ThemedWebComponentProps<MasterDetailLayoutElement, Readonly<{
+    onBackdropClick: EventName<_MasterDetailLayoutEventMap["backdrop-click"]>;
+    onDetailEscapePress: EventName<_MasterDetailLayoutEventMap["detail-escape-press"]>;
+}>>> & React.RefAttributes<MasterDetailLayoutElement>) => React.ReactElement | null;
+//# sourceMappingURL=MasterDetailLayout.d.ts.map

package/generated/MasterDetailLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MasterDetailLayout.d.ts","sourceRoot":"","sources":["../src/generated/MasterDetailLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,kBAAkB,IAAI,yBAAyB,EAAE,KAAK,0BAA0B,IAAI,2BAA2B,EAAG,MAAM,6DAA6D,CAAC;AAC/L,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AACtF,cAAc,6DAA6D,CAAC;AAC5E,OAAO,EAAE,yBAAyB,GAAG,CAAC;AACtC,MAAM,MAAM,0BAA0B,GAAG,QAAQ,CAAC;IAC9C,eAAe,EAAE,SAAS,CAAC,2BAA2B,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAC1E,mBAAmB,EAAE,SAAS,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,CAAC,CAAC;CACtF,CAAC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,yBAAyB,EAAE,0BAA0B,CAAC,CAAC;AAC/G,eAAO,MAAM,kBAAkB;qBALV,SAAS,CAAC,2BAA2B,CAAC,gBAAgB,CAAC,CAAC;yBACpD,SAAS,CAAC,2BAA2B,CAAC,qBAAqB,CAAC,CAAC;mFAMpF,CAAC"}

package/index.d.ts

@@ -42,20 +42,22 @@ export * from "./Item.js";
 export * from "./ListBox.js";
 export * from "./LoginForm.js";
 export * from "./LoginOverlay.js";
+export * from "./Markdown.js";
+export * from "./MasterDetailLayout.js";
 export * from "./MenuBar.js";
 export * from "./MessageInput.js";
 export * from "./Message.js";
 export * from "./MessageList.js";
 export * from "./MultiSelectComboBox.js";
 export * from "./Notification.js";
-export * from "./NumberField.js";
 export * from "./PasswordField.js";
+export * from "./NumberField.js";
 export * from "./Popover.js";
 export * from "./ProgressBar.js";
 export * from "./RadioButton.js";
 export * from "./RadioGroup.js";
-export * from "./Scroller.js";
 export * from "./Select.js";
+export * from "./Scroller.js";
 export * from "./SideNavItem.js";
 export * from "./SideNav.js";
 export * from "./SplitLayout.js";

package/index.js

@@ -42,20 +42,22 @@ export * from "./Item.js";
 export * from "./ListBox.js";
 export * from "./LoginForm.js";
 export * from "./LoginOverlay.js";
+export * from "./Markdown.js";
+export * from "./MasterDetailLayout.js";
 export * from "./MenuBar.js";
 export * from "./MessageInput.js";
 export * from "./Message.js";
 export * from "./MessageList.js";
 export * from "./MultiSelectComboBox.js";
 export * from "./Notification.js";
-export * from "./NumberField.js";
 export * from "./PasswordField.js";
+export * from "./NumberField.js";
 export * from "./Popover.js";
 export * from "./ProgressBar.js";
 export * from "./RadioButton.js";
 export * from "./RadioGroup.js";
-export * from "./Scroller.js";
 export * from "./Select.js";
+export * from "./Scroller.js";
 export * from "./SideNavItem.js";
 export * from "./SideNav.js";
 export * from "./SplitLayout.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/react-components",
-  "version": "24.8.0-alpha8",
+  "version": "24.8.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -27,65 +27,67 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.7",
-    "@vaadin/a11y-base": "24.8.0-alpha8",
-    "@vaadin/accordion": "24.8.0-alpha8",
-    "@vaadin/app-layout": "24.8.0-alpha8",
-    "@vaadin/avatar": "24.8.0-alpha8",
-    "@vaadin/avatar-group": "24.8.0-alpha8",
-    "@vaadin/button": "24.8.0-alpha8",
-    "@vaadin/card": "24.8.0-alpha8",
-    "@vaadin/checkbox": "24.8.0-alpha8",
-    "@vaadin/checkbox-group": "24.8.0-alpha8",
-    "@vaadin/combo-box": "24.8.0-alpha8",
-    "@vaadin/component-base": "24.8.0-alpha8",
-    "@vaadin/confirm-dialog": "24.8.0-alpha8",
-    "@vaadin/context-menu": "24.8.0-alpha8",
-    "@vaadin/custom-field": "24.8.0-alpha8",
-    "@vaadin/date-picker": "24.8.0-alpha8",
-    "@vaadin/date-time-picker": "24.8.0-alpha8",
-    "@vaadin/details": "24.8.0-alpha8",
-    "@vaadin/dialog": "24.8.0-alpha8",
-    "@vaadin/email-field": "24.8.0-alpha8",
-    "@vaadin/field-base": "24.8.0-alpha8",
-    "@vaadin/field-highlighter": "24.8.0-alpha8",
-    "@vaadin/form-layout": "24.8.0-alpha8",
-    "@vaadin/grid": "24.8.0-alpha8",
-    "@vaadin/horizontal-layout": "24.8.0-alpha8",
-    "@vaadin/icon": "24.8.0-alpha8",
-    "@vaadin/icons": "24.8.0-alpha8",
-    "@vaadin/input-container": "24.8.0-alpha8",
-    "@vaadin/integer-field": "24.8.0-alpha8",
-    "@vaadin/item": "24.8.0-alpha8",
-    "@vaadin/list-box": "24.8.0-alpha8",
-    "@vaadin/lit-renderer": "24.8.0-alpha8",
-    "@vaadin/login": "24.8.0-alpha8",
-    "@vaadin/menu-bar": "24.8.0-alpha8",
-    "@vaadin/message-input": "24.8.0-alpha8",
-    "@vaadin/message-list": "24.8.0-alpha8",
-    "@vaadin/multi-select-combo-box": "24.8.0-alpha8",
-    "@vaadin/notification": "24.8.0-alpha8",
-    "@vaadin/number-field": "24.8.0-alpha8",
-    "@vaadin/overlay": "24.8.0-alpha8",
-    "@vaadin/password-field": "24.8.0-alpha8",
-    "@vaadin/popover": "24.8.0-alpha8",
-    "@vaadin/progress-bar": "24.8.0-alpha8",
-    "@vaadin/radio-group": "24.8.0-alpha8",
-    "@vaadin/scroller": "24.8.0-alpha8",
-    "@vaadin/select": "24.8.0-alpha8",
-    "@vaadin/side-nav": "24.8.0-alpha8",
-    "@vaadin/split-layout": "24.8.0-alpha8",
-    "@vaadin/tabs": "24.8.0-alpha8",
-    "@vaadin/tabsheet": "24.8.0-alpha8",
-    "@vaadin/text-area": "24.8.0-alpha8",
-    "@vaadin/text-field": "24.8.0-alpha8",
-    "@vaadin/time-picker": "24.8.0-alpha8",
-    "@vaadin/tooltip": "24.8.0-alpha8",
-    "@vaadin/upload": "24.8.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
-    "@vaadin/vertical-layout": "24.8.0-alpha8",
-    "@vaadin/virtual-list": "24.8.0-alpha8"
+    "@vaadin/a11y-base": "24.8.0-beta1",
+    "@vaadin/accordion": "24.8.0-beta1",
+    "@vaadin/app-layout": "24.8.0-beta1",
+    "@vaadin/avatar": "24.8.0-beta1",
+    "@vaadin/avatar-group": "24.8.0-beta1",
+    "@vaadin/button": "24.8.0-beta1",
+    "@vaadin/card": "24.8.0-beta1",
+    "@vaadin/checkbox": "24.8.0-beta1",
+    "@vaadin/checkbox-group": "24.8.0-beta1",
+    "@vaadin/combo-box": "24.8.0-beta1",
+    "@vaadin/component-base": "24.8.0-beta1",
+    "@vaadin/confirm-dialog": "24.8.0-beta1",
+    "@vaadin/context-menu": "24.8.0-beta1",
+    "@vaadin/custom-field": "24.8.0-beta1",
+    "@vaadin/date-picker": "24.8.0-beta1",
+    "@vaadin/date-time-picker": "24.8.0-beta1",
+    "@vaadin/details": "24.8.0-beta1",
+    "@vaadin/dialog": "24.8.0-beta1",
+    "@vaadin/email-field": "24.8.0-beta1",
+    "@vaadin/field-base": "24.8.0-beta1",
+    "@vaadin/field-highlighter": "24.8.0-beta1",
+    "@vaadin/form-layout": "24.8.0-beta1",
+    "@vaadin/grid": "24.8.0-beta1",
+    "@vaadin/horizontal-layout": "24.8.0-beta1",
+    "@vaadin/icon": "24.8.0-beta1",
+    "@vaadin/icons": "24.8.0-beta1",
+    "@vaadin/input-container": "24.8.0-beta1",
+    "@vaadin/integer-field": "24.8.0-beta1",
+    "@vaadin/item": "24.8.0-beta1",
+    "@vaadin/list-box": "24.8.0-beta1",
+    "@vaadin/lit-renderer": "24.8.0-beta1",
+    "@vaadin/login": "24.8.0-beta1",
+    "@vaadin/markdown": "24.8.0-beta1",
+    "@vaadin/master-detail-layout": "24.8.0-beta1",
+    "@vaadin/menu-bar": "24.8.0-beta1",
+    "@vaadin/message-input": "24.8.0-beta1",
+    "@vaadin/message-list": "24.8.0-beta1",
+    "@vaadin/multi-select-combo-box": "24.8.0-beta1",
+    "@vaadin/notification": "24.8.0-beta1",
+    "@vaadin/number-field": "24.8.0-beta1",
+    "@vaadin/overlay": "24.8.0-beta1",
+    "@vaadin/password-field": "24.8.0-beta1",
+    "@vaadin/popover": "24.8.0-beta1",
+    "@vaadin/progress-bar": "24.8.0-beta1",
+    "@vaadin/radio-group": "24.8.0-beta1",
+    "@vaadin/scroller": "24.8.0-beta1",
+    "@vaadin/select": "24.8.0-beta1",
+    "@vaadin/side-nav": "24.8.0-beta1",
+    "@vaadin/split-layout": "24.8.0-beta1",
+    "@vaadin/tabs": "24.8.0-beta1",
+    "@vaadin/tabsheet": "24.8.0-beta1",
+    "@vaadin/text-area": "24.8.0-beta1",
+    "@vaadin/text-field": "24.8.0-beta1",
+    "@vaadin/time-picker": "24.8.0-beta1",
+    "@vaadin/tooltip": "24.8.0-beta1",
+    "@vaadin/upload": "24.8.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.8.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-beta1",
+    "@vaadin/vertical-layout": "24.8.0-beta1",
+    "@vaadin/virtual-list": "24.8.0-beta1"
   },
   "author": "Vaadin Ltd.",
   "license": "Apache-2.0",
@@ -296,6 +298,14 @@
       "types": "./LoginOverlay.d.ts",
       "default": "./LoginOverlay.js"
     },
+    "./Markdown.js": {
+      "types": "./Markdown.d.ts",
+      "default": "./Markdown.js"
+    },
+    "./MasterDetailLayout.js": {
+      "types": "./MasterDetailLayout.d.ts",
+      "default": "./MasterDetailLayout.js"
+    },
     "./MenuBar.js": {
       "types": "./MenuBar.d.ts",
       "default": "./MenuBar.js"
@@ -448,6 +458,8 @@
     "./ListBox": "./ListBox.js",
     "./LoginForm": "./LoginForm.js",
     "./LoginOverlay": "./LoginOverlay.js",
+    "./Markdown": "./Markdown.js",
+    "./MasterDetailLayout": "./MasterDetailLayout.js",
     "./MenuBar": "./MenuBar.js",
     "./Message": "./Message.js",
     "./MessageInput": "./MessageInput.js",

package/utils/createComponent.js

@@ -1,2 +1,2 @@
-import{createComponent as n}from"@lit/react";window.Vaadin??={},window.Vaadin.registrations??=[],window.Vaadin.registrations.push({is:"@vaadin/react-components",version:"24.8.0-alpha8"});function s(e){const{elementClass:t}=e;return n("_properties"in t?{...e,elementClass:{name:t.name,prototype:{...t._properties,hidden:Boolean}}}:e)}export{s as createComponent};
+import{createComponent as n}from"@lit/react";window.Vaadin??={},window.Vaadin.registrations??=[],window.Vaadin.registrations.push({is:"@vaadin/react-components",version:"24.8.0-beta1"});function s(e){const{elementClass:t}=e;return n("_properties"in t?{...e,elementClass:{name:t.name,prototype:{...t._properties,hidden:Boolean}}}:e)}export{s as createComponent};
 //# sourceMappingURL=createComponent.js.map

package/utils/createComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/utils/createComponent.ts"],
-  "sourcesContent": ["import { createComponent as _createComponent, type EventName } from '@lit/react';\nimport type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';\nimport type React from 'react';\nimport type { RefAttributes } from 'react';\n\ndeclare const __VERSION__: string;\n\ndeclare global {\n  interface VaadinRegistration {\n    is: string;\n    version: string;\n  }\n\n  interface Vaadin {\n    registrations?: VaadinRegistration[];\n  }\n\n  interface Window {\n    // @ts-expect-error: Different declaration from one of the dependencies.\n    Vaadin?: Vaadin;\n  }\n}\n\nwindow.Vaadin ??= {};\nwindow.Vaadin.registrations ??= [];\nwindow.Vaadin.registrations.push({\n  is: '@vaadin/react-components',\n  version: /* updated-by-script */ '24.8.0-alpha8',\n});\n\n// TODO: Remove when types from @lit-labs/react are exported\nexport type EventNames = Record<string, EventName | string>;\ntype Constructor<T> = { new (): T; name: string };\ntype PolymerConstructor<T> = Constructor<T> & { _properties: Record<string, unknown> };\ntype Options<I extends HTMLElement, E extends EventNames = {}> = Readonly<{\n  displayName?: string;\n  elementClass: Constructor<I> | PolymerConstructor<I>;\n  events?: E;\n  react: typeof window.React;\n  tagName: string;\n}>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]?: R[K] extends EventName ? (e: R[K]['__eventType']) => void : (e: Event) => void;\n};\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO: LoginOverlay has \"autofocus\" property, so we add it back manually.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>> & { autofocus?: boolean };\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n  React.HTMLAttributes<I>,\n  // Prefer type of provided event handler props or those on element over\n  // built-in HTMLAttributes\n  keyof E | keyof ElementProps<I>\n> &\n  EventListeners<E> &\n  ElementProps<I>;\n\nexport type ThemedWebComponentProps<\n  I extends ThemePropertyMixinClass & HTMLElement,\n  E extends EventNames = {},\n> = ComponentProps<I, E> & {\n  /**\n   * Attribute that can be used by the component to apply built-in style variants,\n   * or to propagate its value to the sub-components in Shadow DOM.\n   *\n   * @see ThemePropertyMixinClass#_theme\n   */\n  theme?: string;\n};\n\ntype AllWebComponentProps<I extends HTMLElement, E extends EventNames = {}> = I extends ThemePropertyMixinClass\n  ? ThemedWebComponentProps<I, E>\n  : ComponentProps<I, E>;\n\nexport type WebComponentProps<I extends HTMLElement, E extends EventNames = {}> = Partial<AllWebComponentProps<I, E>>;\n\n// We need a separate declaration here; otherwise, the TypeScript fails into the\n// endless loop trying to resolve the typings.\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>(\n  options: Options<I, E>,\n): (props: WebComponentProps<I, E> & RefAttributes<I>) => React.ReactElement | null;\n\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>(options: Options<I, E>): any {\n  const { elementClass } = options;\n\n  return _createComponent(\n    '_properties' in elementClass\n      ? {\n          ...options,\n          // TODO: improve or remove the Polymer workaround\n          // 'createComponent' relies on key presence on the custom element class,\n          // but Polymer defines properties on the prototype when the first element\n          // is created. Workaround: pass a mock object with properties in\n          // the prototype.\n          elementClass: {\n            // @ts-expect-error: it is a specific workaround for Polymer classes.\n            name: elementClass.name,\n            prototype: { ...elementClass._properties, hidden: Boolean },\n          },\n        }\n      : options,\n  );\n}\n"],
-  "mappings": "AAAA,OAAS,mBAAmBA,MAAwC,aAuBpE,OAAO,SAAW,CAAC,EACnB,OAAO,OAAO,gBAAkB,CAAC,EACjC,OAAO,OAAO,cAAc,KAAK,CAC/B,GAAI,2BACJ,QAAiC,eACnC,CAAC,EA2DM,SAASC,EAAkEC,EAA6B,CAC7G,KAAM,CAAE,aAAAC,CAAa,EAAID,EAEzB,OAAOF,EACL,gBAAiBG,EACb,CACE,GAAGD,EAMH,aAAc,CAEZ,KAAMC,EAAa,KACnB,UAAW,CAAE,GAAGA,EAAa,YAAa,OAAQ,OAAQ,CAC5D,CACF,EACAD,CACN,CACF",
+  "sourcesContent": ["import { createComponent as _createComponent, type EventName } from '@lit/react';\nimport type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';\nimport type React from 'react';\nimport type { RefAttributes } from 'react';\n\ndeclare const __VERSION__: string;\n\ndeclare global {\n  interface VaadinRegistration {\n    is: string;\n    version: string;\n  }\n\n  interface Vaadin {\n    registrations?: VaadinRegistration[];\n  }\n\n  interface Window {\n    // @ts-expect-error: Different declaration from one of the dependencies.\n    Vaadin?: Vaadin;\n  }\n}\n\nwindow.Vaadin ??= {};\nwindow.Vaadin.registrations ??= [];\nwindow.Vaadin.registrations.push({\n  is: '@vaadin/react-components',\n  version: /* updated-by-script */ '24.8.0-beta1',\n});\n\n// TODO: Remove when types from @lit-labs/react are exported\nexport type EventNames = Record<string, EventName | string>;\ntype Constructor<T> = { new (): T; name: string };\ntype PolymerConstructor<T> = Constructor<T> & { _properties: Record<string, unknown> };\ntype Options<I extends HTMLElement, E extends EventNames = {}> = Readonly<{\n  displayName?: string;\n  elementClass: Constructor<I> | PolymerConstructor<I>;\n  events?: E;\n  react: typeof window.React;\n  tagName: string;\n}>;\n\n// A map of expected event listener types based on EventNames.\ntype EventListeners<R extends EventNames> = {\n  [K in keyof R]?: R[K] extends EventName ? (e: R[K]['__eventType']) => void : (e: Event) => void;\n};\n\n// Props derived from custom element class. Currently has limitations of making\n// all properties optional and also surfaces life cycle methods in autocomplete.\n// TODO: LoginOverlay has \"autofocus\" property, so we add it back manually.\ntype ElementProps<I> = Partial<Omit<I, keyof HTMLElement>> & { autofocus?: boolean };\n\n// Acceptable props to the React component.\ntype ComponentProps<I, E extends EventNames = {}> = Omit<\n  React.HTMLAttributes<I>,\n  // Prefer type of provided event handler props or those on element over\n  // built-in HTMLAttributes\n  keyof E | keyof ElementProps<I>\n> &\n  EventListeners<E> &\n  ElementProps<I>;\n\nexport type ThemedWebComponentProps<\n  I extends ThemePropertyMixinClass & HTMLElement,\n  E extends EventNames = {},\n> = ComponentProps<I, E> & {\n  /**\n   * Attribute that can be used by the component to apply built-in style variants,\n   * or to propagate its value to the sub-components in Shadow DOM.\n   *\n   * @see ThemePropertyMixinClass#_theme\n   */\n  theme?: string;\n};\n\ntype AllWebComponentProps<I extends HTMLElement, E extends EventNames = {}> = I extends ThemePropertyMixinClass\n  ? ThemedWebComponentProps<I, E>\n  : ComponentProps<I, E>;\n\nexport type WebComponentProps<I extends HTMLElement, E extends EventNames = {}> = Partial<AllWebComponentProps<I, E>>;\n\n// We need a separate declaration here; otherwise, the TypeScript fails into the\n// endless loop trying to resolve the typings.\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>(\n  options: Options<I, E>,\n): (props: WebComponentProps<I, E> & RefAttributes<I>) => React.ReactElement | null;\n\nexport function createComponent<I extends HTMLElement, E extends EventNames = {}>(options: Options<I, E>): any {\n  const { elementClass } = options;\n\n  return _createComponent(\n    '_properties' in elementClass\n      ? {\n          ...options,\n          // TODO: improve or remove the Polymer workaround\n          // 'createComponent' relies on key presence on the custom element class,\n          // but Polymer defines properties on the prototype when the first element\n          // is created. Workaround: pass a mock object with properties in\n          // the prototype.\n          elementClass: {\n            // @ts-expect-error: it is a specific workaround for Polymer classes.\n            name: elementClass.name,\n            prototype: { ...elementClass._properties, hidden: Boolean },\n          },\n        }\n      : options,\n  );\n}\n"],
+  "mappings": "AAAA,OAAS,mBAAmBA,MAAwC,aAuBpE,OAAO,SAAW,CAAC,EACnB,OAAO,OAAO,gBAAkB,CAAC,EACjC,OAAO,OAAO,cAAc,KAAK,CAC/B,GAAI,2BACJ,QAAiC,cACnC,CAAC,EA2DM,SAASC,EAAkEC,EAA6B,CAC7G,KAAM,CAAE,aAAAC,CAAa,EAAID,EAEzB,OAAOF,EACL,gBAAiBG,EACb,CACE,GAAGD,EAMH,aAAc,CAEZ,KAAMC,EAAa,KACnB,UAAW,CAAE,GAAGA,EAAa,YAAa,OAAQ,OAAQ,CAC5D,CACF,EACAD,CACN,CACF",
   "names": ["_createComponent", "createComponent", "options", "elementClass"]
 }