@vaadin/react-components 25.3.1 → 25.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Grid.d.ts.map +1 -1
- package/Grid.js +1 -1
- package/Grid.js.map +3 -3
- package/MasterDetailLayout.d.ts.map +1 -1
- package/MasterDetailLayout.js +1 -1
- package/MasterDetailLayout.js.map +3 -3
- package/package.json +69 -65
- package/utils/createComponent.js +1 -1
- package/utils/createComponent.js.map +1 -1
- package/utils/useDeferredColumnWidthRecalculation.d.ts +9 -0
- package/utils/useDeferredColumnWidthRecalculation.d.ts.map +1 -0
- package/utils/useDeferredColumnWidthRecalculation.js +2 -0
- package/utils/useDeferredColumnWidthRecalculation.js.map +7 -0
package/Grid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["src/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["src/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAiC,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACjH,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,WAAW,EAChB,KAAK,SAAS,IAAI,UAAU,EAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AAI5E,cAAc,qBAAqB,CAAC;AAEpC,MAAM,MAAM,SAAS,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,oBAAoB,CAAC,CAAC,GACnF,QAAQ,CAAC;IACP,kBAAkB,CAAC,EAAE,aAAa,CAAC,gCAAgC,CAAC,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;CACpF,CAAC,CAAC;AAoBL,QAAA,MAAM,aAAa,EAAuB,CAAC,KAAK,GAAG,eAAe,EAChE,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,KACxD,YAAY,GAAG,IAAI,CAAC;AAEzB,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,CAAC"}
|
package/Grid.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export*from"@vaadin/grid/vaadin-grid.js";import{forwardRef as
|
|
1
|
+
export*from"@vaadin/grid/vaadin-grid.js";import{forwardRef as l}from"react";import{Grid as a}from"@vaadin/grid/vaadin-grid.js";import*as i from"react";import{createComponent as m}from"./utils/createComponent.js";var p={onActiveItemChanged:"active-item-changed",onCellActivate:"cell-activate",onCellFocus:"cell-focus",onColumnReorder:"column-reorder",onColumnResize:"column-resize",onDataProviderChanged:"data-provider-changed",onExpandedItemsChanged:"expanded-items-changed",onGridDragend:"grid-dragend",onGridDragstart:"grid-dragstart",onGridDrop:"grid-drop",onItemToggle:"item-toggle",onLoadingChanged:"loading-changed",onSelectedItemsChanged:"selected-items-changed",onSizeChanged:"size-changed"},t=m({elementClass:a,events:p,react:i,tagName:"vaadin-grid"});import{useModelRenderer as s}from"./renderers/useModelRenderer.js";import c from"./utils/useDeferredColumnWidthRecalculation.js";import{jsxs as G}from"react/jsx-runtime";function g(e,r){let[n,d]=s(e.rowDetailsRenderer,{renderMode:"microtask"}),o=c(r);return G(t,{...e,ref:o,rowDetailsRenderer:d,children:[e.children,n]})}var h=l(g);export{h as Grid,a as GridElement};
|
|
2
2
|
//# sourceMappingURL=Grid.js.map
|
package/Grid.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["src/Grid.tsx", "src/generated/Grid.ts"],
|
|
4
|
-
"sourcesContent": ["export * from \"@vaadin/grid/vaadin-grid.js\";\nimport {
|
|
5
|
-
"mappings": "AAAA,WAAc,8BACd,
|
|
6
|
-
"names": ["forwardRef", "
|
|
4
|
+
"sourcesContent": ["export * from \"@vaadin/grid/vaadin-grid.js\";\nimport { type ComponentType, type ForwardedRef, forwardRef, type ReactElement, type RefAttributes } from 'react';\nimport {\n Grid as _Grid,\n type GridDefaultItem,\n type GridElement,\n type GridProps as _GridProps,\n} from './generated/Grid.js';\nimport type { GridRowDetailsReactRendererProps } from './renderers/grid.js';\nimport { useModelRenderer } from './renderers/useModelRenderer.js';\nimport useDeferredColumnWidthRecalculation from './utils/useDeferredColumnWidthRecalculation.js';\n\nexport * from './generated/Grid.js';\n\nexport type GridProps<TItem> = Partial<Omit<_GridProps<TItem>, 'rowDetailsRenderer'>> &\n Readonly<{\n rowDetailsRenderer?: ComponentType<GridRowDetailsReactRendererProps<TItem>> | null;\n }>;\n\nfunction Grid<TItem = GridDefaultItem>(\n props: GridProps<TItem>,\n ref: ForwardedRef<GridElement<TItem>>,\n): ReactElement | null {\n const [portals, rowDetailsRenderer] = useModelRenderer(props.rowDetailsRenderer, {\n renderMode: 'microtask',\n });\n\n const finalRef = useDeferredColumnWidthRecalculation(ref);\n\n return (\n <_Grid<TItem> {...props} ref={finalRef} rowDetailsRenderer={rowDetailsRenderer}>\n {props.children}\n {portals}\n </_Grid>\n );\n}\n\nconst ForwardedGrid = forwardRef(Grid) as <TItem = GridDefaultItem>(\n props: GridProps<TItem> & RefAttributes<GridElement<TItem>>,\n) => ReactElement | null;\n\nexport { ForwardedGrid as Grid };\n", "import type { EventName } from \"@lit/react\";\nimport { Grid as GridElement, type GridEventMap as _GridEventMap, } from \"@vaadin/grid/vaadin-grid.js\";\nimport * as React from \"react\";\nimport { createComponent, type WebComponentProps } from \"../utils/createComponent.js\";\nexport { GridElement, };\nexport type GridEventMap<T1> = Readonly<{\n onActiveItemChanged: EventName<_GridEventMap<T1>[\"active-item-changed\"]>;\n onCellActivate: EventName<_GridEventMap<T1>[\"cell-activate\"]>;\n onCellFocus: EventName<_GridEventMap<T1>[\"cell-focus\"]>;\n onColumnReorder: EventName<_GridEventMap<T1>[\"column-reorder\"]>;\n onColumnResize: EventName<_GridEventMap<T1>[\"column-resize\"]>;\n onDataProviderChanged: EventName<CustomEvent<unknown>>;\n onExpandedItemsChanged: EventName<_GridEventMap<T1>[\"expanded-items-changed\"]>;\n onGridDragend: EventName<_GridEventMap<T1>[\"grid-dragend\"]>;\n onGridDragstart: EventName<_GridEventMap<T1>[\"grid-dragstart\"]>;\n onGridDrop: EventName<_GridEventMap<T1>[\"grid-drop\"]>;\n onItemToggle: EventName<_GridEventMap<T1>[\"item-toggle\"]>;\n onLoadingChanged: EventName<_GridEventMap<T1>[\"loading-changed\"]>;\n onSelectedItemsChanged: EventName<_GridEventMap<T1>[\"selected-items-changed\"]>;\n onSizeChanged: EventName<CustomEvent<unknown>>;\n}>;\nconst events = { onActiveItemChanged: \"active-item-changed\", onCellActivate: \"cell-activate\", onCellFocus: \"cell-focus\", onColumnReorder: \"column-reorder\", onColumnResize: \"column-resize\", onDataProviderChanged: \"data-provider-changed\", onExpandedItemsChanged: \"expanded-items-changed\", onGridDragend: \"grid-dragend\", onGridDragstart: \"grid-dragstart\", onGridDrop: \"grid-drop\", onItemToggle: \"item-toggle\", onLoadingChanged: \"loading-changed\", onSelectedItemsChanged: \"selected-items-changed\", onSizeChanged: \"size-changed\" } as GridEventMap<any>;\nexport type GridProps<T1> = WebComponentProps<GridElement<T1>, GridEventMap<T1>>;\nexport const Grid = createComponent({\n elementClass: GridElement, events, react: React, tagName: \"vaadin-grid\"\n}) as <T1>(props: GridProps<T1> & React.RefAttributes<GridElement<T1>>) => React.ReactElement | null;\n"],
|
|
5
|
+
"mappings": "AAAA,WAAc,8BACd,OAAgD,cAAAA,MAAyD,QCAzG,OAAS,QAAQC,MAAwD,8BACzE,UAAYC,MAAW,QACvB,OAAS,mBAAAC,MAA+C,6BAkBxD,IAAMC,EAAS,CAAE,oBAAqB,sBAAuB,eAAgB,gBAAiB,YAAa,aAAc,gBAAiB,iBAAkB,eAAgB,gBAAiB,sBAAuB,wBAAyB,uBAAwB,yBAA0B,cAAe,eAAgB,gBAAiB,iBAAkB,WAAY,YAAa,aAAc,cAAe,iBAAkB,kBAAmB,uBAAwB,yBAA0B,cAAe,cAAe,EAE/fC,EAAOC,EAAgB,CAChC,aAAcC,EAAa,OAAAH,EAAQ,MAAOI,EAAO,QAAS,aAC9D,CAAC,EDhBD,OAAS,oBAAAC,MAAwB,kCACjC,OAAOC,MAAyC,iDAoB5C,eAAAC,MAAA,oBAXJ,SAASC,EACPC,EACAC,EACqB,CACrB,GAAM,CAACC,EAASC,CAAkB,EAAIP,EAAiBI,EAAM,mBAAoB,CAC/E,WAAY,WACd,CAAC,EAEKI,EAAWP,EAAoCI,CAAG,EAExD,OACEH,EAACC,EAAA,CAAc,GAAGC,EAAO,IAAKI,EAAU,mBAAoBD,EACzD,UAAAH,EAAM,SACNE,GACH,CAEJ,CAEA,IAAMG,EAAgBC,EAAWP,CAAI",
|
|
6
|
+
"names": ["forwardRef", "GridElement", "React", "createComponent", "events", "Grid", "createComponent", "GridElement", "React", "useModelRenderer", "useDeferredColumnWidthRecalculation", "jsxs", "Grid", "props", "ref", "portals", "rowDetailsRenderer", "finalRef", "ForwardedGrid", "forwardRef"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
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;AAC/C,KAAK,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;
|
|
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;AAC/C,KAAK,sBAAsB,GAAG,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAyK1D,QAAA,MAAM,gCAAgC,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAIhG,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;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;IAC9B,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC;CACrD,CAAC;AAMF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
|
package/MasterDetailLayout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export*from"@vaadin/master-detail-layout/vaadin-master-detail-layout.js";import{MasterDetailLayout as
|
|
1
|
+
export*from"@vaadin/master-detail-layout/vaadin-master-detail-layout.js";import{MasterDetailLayout as g}from"@vaadin/master-detail-layout/vaadin-master-detail-layout.js";import*as k from"react";import{createComponent as b}from"./utils/createComponent.js";var x={onBackdropClick:"backdrop-click",onDetailEscapePress:"detail-escape-press"},E=b({elementClass:g,events:x,react:k,tagName:"vaadin-master-detail-layout"});import o,{useEffect as A,useLayoutEffect as N,useRef as d,useState as C}from"react";import{Fragment as I,jsx as p,jsxs as V}from"react/jsx-runtime";function L({children:e}){return e}function v({children:e}){return p("div",{slot:"detail-placeholder",style:{height:"100%"},children:e})}function W(e,t){let l=o.Children.toArray(e).filter(a=>o.isValidElement(a)),r=o.Children.toArray(t).filter(a=>o.isValidElement(a));if(l.length!==r.length)return!0;for(let a=0;a<l.length;a++){let n=l[a],i=r[a];if(n.type!==i.type||n.key!==i.key)return!0}return!1}function P({children:e}){let t=d(null),l=d(0),r=d(null),a=l.current+1,[n,i]=C("idle"),[y,D]=C(e),h=d(e);return h.current=e,N(()=>{let c=t.current?.closest("vaadin-master-detail-layout");if(c){if(n==="idle"){let u=t.current.childElementCount>0;t.current.setAttribute("slot",u?"detail":"detail-hidden")}else if(n==="starting"){let u=t.current.childElementCount>0,R=r.current.childElementCount>0,f=u&&R?"replace":u?"remove":"add",M;c._startTransition(f,async()=>{if(f==="replace"&&t.current){let s=t.current.cloneNode(!0);M=s,s.setAttribute("slot","detail-outgoing"),c.appendChild(s),t.current.setAttribute("slot","detail-hidden")}else t.current&&t.current.setAttribute("slot","detail-hidden");if(r.current){r.current.style.display="";let s=r.current.childElementCount>0;r.current.setAttribute("slot",s?"detail":"detail-hidden")}await Promise.resolve(),c.recalculateLayout()}).then(()=>{M?.remove(),D(h.current),l.current=a,i("idle")})}}},[n,y]),A(()=>{n==="idle"&&(W(y,e)?i("starting"):D(e))},[n,e]),V(I,{children:[p("div",{ref:t,style:{height:"100%"},children:y},l.current),n==="starting"&&p("div",{ref:r,style:{display:"none",height:"100%"},children:e},a)]})}function T(e){o.Children.forEach(e,t=>{if(o.isValidElement(t)&&t.type!==L&&t.type!==P&&t.type!==v)throw new Error("Invalid child in MasterDetailLayout. Only <MasterDetailLayout.Master>, <MasterDetailLayout.Detail>, and <MasterDetailLayout.DetailPlaceholder> components are allowed. Check the component docs for proper usage.")})}var _=e=>(T(e.children),p(E,{...e})),m=_;m.Master=L;m.Detail=P;m.DetailPlaceholder=v;export{m as MasterDetailLayout,g as MasterDetailLayoutElement};
|
|
2
2
|
//# sourceMappingURL=MasterDetailLayout.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["src/MasterDetailLayout.tsx", "src/generated/MasterDetailLayout.ts"],
|
|
4
|
-
"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<{}>;\ntype DetailPlaceholderProps = React.PropsWithChildren<{}>;\n\ntype MasterDetailLayoutElementWithInternalAPI = MasterDetailLayoutElement & {\n _startTransition: (transitionType: 'add' | 'remove' | 'replace', callback: () => void) => Promise<void>;\n};\n\nfunction Master({ children }: MasterProps) {\n return children;\n}\n\nfunction DetailPlaceholder({ children }: DetailPlaceholderProps) {\n return (\n <div slot=\"detail-placeholder\" style={{ height: '100%' }}>\n {children}\n </div>\n );\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 \u2014 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\n // _startTransition calls the callback synchronously for add/replace,\n // and asynchronously for remove.\n layout\n ._startTransition(transitionType, async () => {\n if (transitionType === 'replace' && currentDetailsRef.current) {\n // For replace, _startTransition moved the current div to the\n // detail-outgoing slot for the outgoing animation. Clone it so the\n // WC can animate the clone out, then hide the React-managed original\n // so the WC's post-animation cleanup won't remove it from the DOM.\n const clone = currentDetailsRef.current.cloneNode(true) as HTMLElement;\n clone.setAttribute('slot', 'detail-outgoing');\n layout.appendChild(clone);\n currentDetailsRef.current.setAttribute('slot', 'detail-hidden');\n } else if (currentDetailsRef.current) {\n currentDetailsRef.current.setAttribute('slot', 'detail-hidden');\n }\n if (nextDetailsRef.current) {\n nextDetailsRef.current.style.display = '';\n const hasNext = nextDetailsRef.current.childElementCount > 0;\n nextDetailsRef.current.setAttribute('slot', hasNext ? 'detail' : 'detail-hidden');\n }\n\n // Wait for Lit elements to render\n await Promise.resolve();\n\n // Recompute layout state with the new DOM\n layout.recalculateLayout();\n })\n .then(() => {\n // Animation finished \u2014 sync React state to match DOM reality\n setCurrentChildren(children);\n currentDetailsKey.current = nextDetailsKey;\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={{ height: '100%' }}>\n {currentChildren}\n </div>\n {state === 'starting' && (\n <div ref={nextDetailsRef} key={nextDetailsKey} style={{ display: 'none', height: '100%' }}>\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 (\n React.isValidElement(child) &&\n child.type !== Master &&\n child.type !== Detail &&\n child.type !== DetailPlaceholder\n ) {\n throw new Error(\n 'Invalid child in MasterDetailLayout. Only <MasterDetailLayout.Master>, <MasterDetailLayout.Detail>, and <MasterDetailLayout.DetailPlaceholder> 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 the respective\n * `MasterDetailLayout.Master`, `MasterDetailLayout.Detail`, and optionally\n * `MasterDetailLayout.DetailPlaceholder` 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. The `DetailPlaceholder` is shown\n * in the detail area when no detail is selected, and is hidden when the viewport\n * is too narrow (unlike detail, it does not become an overlay).\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 DetailPlaceholder: React.FC<DetailPlaceholderProps>;\n};\n\nMasterDetailLayout.Master = Master;\nMasterDetailLayout.Detail = Detail;\nMasterDetailLayout.DetailPlaceholder = DetailPlaceholder;\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"],
|
|
5
|
-
"mappings": "AAAA,WAAc,8DCCd,OAAS,sBAAsBA,MAAkG,8DACjI,UAAYC,MAAW,QACvB,OAAS,mBAAAC,MAA+C,6BAMxD,IAAMC,EAAS,CAAE,gBAAiB,iBAAkB,oBAAqB,qBAAsB,EAElFC,EAAqBC,EAAgB,CAC9C,aAAcC,EAA2B,OAAAH,EAAQ,MAAOI,EAAO,QAAS,6BAC5E,CAAC,EDRD,OAAOC,GAAS,aAAAC,EAAW,mBAAAC,EAAiB,UAAAC,EAAQ,YAAAC,MAAgB,QAkBhE,
|
|
6
|
-
"names": ["MasterDetailLayoutElement", "React", "createComponent", "events", "MasterDetailLayout", "createComponent", "MasterDetailLayoutElement", "React", "React", "useEffect", "useLayoutEffect", "useRef", "useState", "Fragment", "jsx", "jsxs", "Master", "children", "DetailPlaceholder", "areChildrenDifferent", "prevChildren", "nextChildren", "prevArray", "child", "nextArray", "i", "prevChild", "nextChild", "Detail", "currentDetailsRef", "currentDetailsKey", "nextDetailsRef", "nextDetailsKey", "state", "setState", "currentChildren", "setCurrentChildren", "layout", "hasChildren", "hasCurrentDetails", "hasNextDetails", "transitionType", "clone", "hasNext", "validateChildren", "MasterDetailLayoutWithValidation", "props", "MasterDetailLayout"]
|
|
4
|
+
"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<{}>;\ntype DetailPlaceholderProps = React.PropsWithChildren<{}>;\n\ntype MasterDetailLayoutElementWithInternalAPI = MasterDetailLayoutElement & {\n _startTransition: (transitionType: 'add' | 'remove' | 'replace', callback: () => void) => Promise<void>;\n};\n\nfunction Master({ children }: MasterProps) {\n return children;\n}\n\nfunction DetailPlaceholder({ children }: DetailPlaceholderProps) {\n return (\n <div slot=\"detail-placeholder\" style={{ height: '100%' }}>\n {children}\n </div>\n );\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 // The transition completion handler closes over the children from when the\n // transition started, so read the latest ones through a ref instead.\n const latestChildren = useRef(children);\n latestChildren.current = 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 \u2014 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\n // _startTransition calls the callback synchronously for add/replace,\n // and asynchronously for remove.\n let outgoingClone: HTMLElement | undefined;\n layout\n ._startTransition(transitionType, async () => {\n if (transitionType === 'replace' && currentDetailsRef.current) {\n // For replace, _startTransition moved the current div to the\n // detail-outgoing slot for the outgoing animation. Clone it so the\n // WC can animate the clone out, then hide the React-managed original\n // so the WC's post-animation cleanup won't remove it from the DOM.\n const clone = currentDetailsRef.current.cloneNode(true) as HTMLElement;\n outgoingClone = clone;\n clone.setAttribute('slot', 'detail-outgoing');\n layout.appendChild(clone);\n currentDetailsRef.current.setAttribute('slot', 'detail-hidden');\n } else if (currentDetailsRef.current) {\n currentDetailsRef.current.setAttribute('slot', 'detail-hidden');\n }\n if (nextDetailsRef.current) {\n nextDetailsRef.current.style.display = '';\n const hasNext = nextDetailsRef.current.childElementCount > 0;\n nextDetailsRef.current.setAttribute('slot', hasNext ? 'detail' : 'detail-hidden');\n }\n\n // Wait for Lit elements to render\n await Promise.resolve();\n\n // Recompute layout state with the new DOM\n layout.recalculateLayout();\n })\n .then(() => {\n // Animation finished \u2014 remove the clone the WC does not own, then\n // sync React state to match DOM reality\n outgoingClone?.remove();\n setCurrentChildren(latestChildren.current);\n currentDetailsKey.current = nextDetailsKey;\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={{ height: '100%' }}>\n {currentChildren}\n </div>\n {state === 'starting' && (\n <div ref={nextDetailsRef} key={nextDetailsKey} style={{ display: 'none', height: '100%' }}>\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 (\n React.isValidElement(child) &&\n child.type !== Master &&\n child.type !== Detail &&\n child.type !== DetailPlaceholder\n ) {\n throw new Error(\n 'Invalid child in MasterDetailLayout. Only <MasterDetailLayout.Master>, <MasterDetailLayout.Detail>, and <MasterDetailLayout.DetailPlaceholder> 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 the respective\n * `MasterDetailLayout.Master`, `MasterDetailLayout.Detail`, and optionally\n * `MasterDetailLayout.DetailPlaceholder` 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. The `DetailPlaceholder` is shown\n * in the detail area when no detail is selected, and is hidden when the viewport\n * is too narrow (unlike detail, it does not become an overlay).\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 DetailPlaceholder: React.FC<DetailPlaceholderProps>;\n};\n\nMasterDetailLayout.Master = Master;\nMasterDetailLayout.Detail = Detail;\nMasterDetailLayout.DetailPlaceholder = DetailPlaceholder;\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["MasterDetailLayoutElement", "React", "createComponent", "events", "MasterDetailLayout", "createComponent", "MasterDetailLayoutElement", "React", "React", "useEffect", "useLayoutEffect", "useRef", "useState", "Fragment", "jsx", "jsxs", "Master", "children", "DetailPlaceholder", "areChildrenDifferent", "prevChildren", "nextChildren", "prevArray", "child", "nextArray", "i", "prevChild", "nextChild", "Detail", "currentDetailsRef", "currentDetailsKey", "nextDetailsRef", "nextDetailsKey", "state", "setState", "currentChildren", "setCurrentChildren", "latestChildren", "layout", "hasChildren", "hasCurrentDetails", "hasNextDetails", "transitionType", "outgoingClone", "clone", "hasNext", "validateChildren", "MasterDetailLayoutWithValidation", "props", "MasterDetailLayout"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/react-components",
|
|
3
|
-
"version": "25.3.
|
|
3
|
+
"version": "25.3.3",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -27,70 +27,70 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@lit/react": "^1.0.7",
|
|
30
|
-
"@vaadin/a11y-base": "25.3.
|
|
31
|
-
"@vaadin/accordion": "25.3.
|
|
32
|
-
"@vaadin/app-layout": "25.3.
|
|
33
|
-
"@vaadin/avatar": "25.3.
|
|
34
|
-
"@vaadin/avatar-group": "25.3.
|
|
35
|
-
"@vaadin/badge": "25.3.
|
|
36
|
-
"@vaadin/breadcrumbs": "25.3.
|
|
37
|
-
"@vaadin/button": "25.3.
|
|
38
|
-
"@vaadin/card": "25.3.
|
|
39
|
-
"@vaadin/checkbox": "25.3.
|
|
40
|
-
"@vaadin/checkbox-group": "25.3.
|
|
41
|
-
"@vaadin/combo-box": "25.3.
|
|
42
|
-
"@vaadin/component-base": "25.3.
|
|
43
|
-
"@vaadin/confirm-dialog": "25.3.
|
|
44
|
-
"@vaadin/context-menu": "25.3.
|
|
45
|
-
"@vaadin/custom-field": "25.3.
|
|
46
|
-
"@vaadin/date-picker": "25.3.
|
|
47
|
-
"@vaadin/date-time-picker": "25.3.
|
|
48
|
-
"@vaadin/details": "25.3.
|
|
49
|
-
"@vaadin/dialog": "25.3.
|
|
50
|
-
"@vaadin/email-field": "25.3.
|
|
51
|
-
"@vaadin/field-base": "25.3.
|
|
52
|
-
"@vaadin/field-highlighter": "25.3.
|
|
53
|
-
"@vaadin/form-layout": "25.3.
|
|
54
|
-
"@vaadin/grid": "25.3.
|
|
55
|
-
"@vaadin/horizontal-layout": "25.3.
|
|
56
|
-
"@vaadin/icon": "25.3.
|
|
57
|
-
"@vaadin/icons": "25.3.
|
|
58
|
-
"@vaadin/input-container": "25.3.
|
|
59
|
-
"@vaadin/integer-field": "25.3.
|
|
60
|
-
"@vaadin/item": "25.3.
|
|
61
|
-
"@vaadin/list-box": "25.3.
|
|
62
|
-
"@vaadin/lit-renderer": "25.3.
|
|
63
|
-
"@vaadin/login": "25.3.
|
|
64
|
-
"@vaadin/markdown": "25.3.
|
|
65
|
-
"@vaadin/master-detail-layout": "25.3.
|
|
66
|
-
"@vaadin/menu-bar": "25.3.
|
|
67
|
-
"@vaadin/message-input": "25.3.
|
|
68
|
-
"@vaadin/message-list": "25.3.
|
|
69
|
-
"@vaadin/multi-select-combo-box": "25.3.
|
|
70
|
-
"@vaadin/notification": "25.3.
|
|
71
|
-
"@vaadin/number-field": "25.3.
|
|
72
|
-
"@vaadin/overlay": "25.3.
|
|
73
|
-
"@vaadin/password-field": "25.3.
|
|
74
|
-
"@vaadin/popover": "25.3.
|
|
75
|
-
"@vaadin/progress-bar": "25.3.
|
|
76
|
-
"@vaadin/radio-group": "25.3.
|
|
77
|
-
"@vaadin/scroller": "25.3.
|
|
78
|
-
"@vaadin/select": "25.3.
|
|
79
|
-
"@vaadin/side-nav": "25.3.
|
|
80
|
-
"@vaadin/slider": "25.3.
|
|
81
|
-
"@vaadin/split-layout": "25.3.
|
|
82
|
-
"@vaadin/switch": "25.3.
|
|
83
|
-
"@vaadin/tabs": "25.3.
|
|
84
|
-
"@vaadin/tabsheet": "25.3.
|
|
85
|
-
"@vaadin/text-area": "25.3.
|
|
86
|
-
"@vaadin/text-field": "25.3.
|
|
87
|
-
"@vaadin/time-picker": "25.3.
|
|
88
|
-
"@vaadin/tooltip": "25.3.
|
|
89
|
-
"@vaadin/upload": "25.3.
|
|
90
|
-
"@vaadin/vaadin-lumo-styles": "25.3.
|
|
91
|
-
"@vaadin/vaadin-themable-mixin": "25.3.
|
|
92
|
-
"@vaadin/vertical-layout": "25.3.
|
|
93
|
-
"@vaadin/virtual-list": "25.3.
|
|
30
|
+
"@vaadin/a11y-base": "25.3.3",
|
|
31
|
+
"@vaadin/accordion": "25.3.3",
|
|
32
|
+
"@vaadin/app-layout": "25.3.3",
|
|
33
|
+
"@vaadin/avatar": "25.3.3",
|
|
34
|
+
"@vaadin/avatar-group": "25.3.3",
|
|
35
|
+
"@vaadin/badge": "25.3.3",
|
|
36
|
+
"@vaadin/breadcrumbs": "25.3.3",
|
|
37
|
+
"@vaadin/button": "25.3.3",
|
|
38
|
+
"@vaadin/card": "25.3.3",
|
|
39
|
+
"@vaadin/checkbox": "25.3.3",
|
|
40
|
+
"@vaadin/checkbox-group": "25.3.3",
|
|
41
|
+
"@vaadin/combo-box": "25.3.3",
|
|
42
|
+
"@vaadin/component-base": "25.3.3",
|
|
43
|
+
"@vaadin/confirm-dialog": "25.3.3",
|
|
44
|
+
"@vaadin/context-menu": "25.3.3",
|
|
45
|
+
"@vaadin/custom-field": "25.3.3",
|
|
46
|
+
"@vaadin/date-picker": "25.3.3",
|
|
47
|
+
"@vaadin/date-time-picker": "25.3.3",
|
|
48
|
+
"@vaadin/details": "25.3.3",
|
|
49
|
+
"@vaadin/dialog": "25.3.3",
|
|
50
|
+
"@vaadin/email-field": "25.3.3",
|
|
51
|
+
"@vaadin/field-base": "25.3.3",
|
|
52
|
+
"@vaadin/field-highlighter": "25.3.3",
|
|
53
|
+
"@vaadin/form-layout": "25.3.3",
|
|
54
|
+
"@vaadin/grid": "25.3.3",
|
|
55
|
+
"@vaadin/horizontal-layout": "25.3.3",
|
|
56
|
+
"@vaadin/icon": "25.3.3",
|
|
57
|
+
"@vaadin/icons": "25.3.3",
|
|
58
|
+
"@vaadin/input-container": "25.3.3",
|
|
59
|
+
"@vaadin/integer-field": "25.3.3",
|
|
60
|
+
"@vaadin/item": "25.3.3",
|
|
61
|
+
"@vaadin/list-box": "25.3.3",
|
|
62
|
+
"@vaadin/lit-renderer": "25.3.3",
|
|
63
|
+
"@vaadin/login": "25.3.3",
|
|
64
|
+
"@vaadin/markdown": "25.3.3",
|
|
65
|
+
"@vaadin/master-detail-layout": "25.3.3",
|
|
66
|
+
"@vaadin/menu-bar": "25.3.3",
|
|
67
|
+
"@vaadin/message-input": "25.3.3",
|
|
68
|
+
"@vaadin/message-list": "25.3.3",
|
|
69
|
+
"@vaadin/multi-select-combo-box": "25.3.3",
|
|
70
|
+
"@vaadin/notification": "25.3.3",
|
|
71
|
+
"@vaadin/number-field": "25.3.3",
|
|
72
|
+
"@vaadin/overlay": "25.3.3",
|
|
73
|
+
"@vaadin/password-field": "25.3.3",
|
|
74
|
+
"@vaadin/popover": "25.3.3",
|
|
75
|
+
"@vaadin/progress-bar": "25.3.3",
|
|
76
|
+
"@vaadin/radio-group": "25.3.3",
|
|
77
|
+
"@vaadin/scroller": "25.3.3",
|
|
78
|
+
"@vaadin/select": "25.3.3",
|
|
79
|
+
"@vaadin/side-nav": "25.3.3",
|
|
80
|
+
"@vaadin/slider": "25.3.3",
|
|
81
|
+
"@vaadin/split-layout": "25.3.3",
|
|
82
|
+
"@vaadin/switch": "25.3.3",
|
|
83
|
+
"@vaadin/tabs": "25.3.3",
|
|
84
|
+
"@vaadin/tabsheet": "25.3.3",
|
|
85
|
+
"@vaadin/text-area": "25.3.3",
|
|
86
|
+
"@vaadin/text-field": "25.3.3",
|
|
87
|
+
"@vaadin/time-picker": "25.3.3",
|
|
88
|
+
"@vaadin/tooltip": "25.3.3",
|
|
89
|
+
"@vaadin/upload": "25.3.3",
|
|
90
|
+
"@vaadin/vaadin-lumo-styles": "25.3.3",
|
|
91
|
+
"@vaadin/vaadin-themable-mixin": "25.3.3",
|
|
92
|
+
"@vaadin/vertical-layout": "25.3.3",
|
|
93
|
+
"@vaadin/virtual-list": "25.3.3"
|
|
94
94
|
},
|
|
95
95
|
"author": "Vaadin Ltd.",
|
|
96
96
|
"license": "Apache-2.0",
|
|
@@ -562,6 +562,10 @@
|
|
|
562
562
|
"./utils/mapItemsWithComponents.d.ts.map": "./utils/mapItemsWithComponents.d.ts.map",
|
|
563
563
|
"./utils/mapItemsWithComponents.js": "./utils/mapItemsWithComponents.js",
|
|
564
564
|
"./utils/mapItemsWithComponents.js.map": "./utils/mapItemsWithComponents.js.map",
|
|
565
|
+
"./utils/useDeferredColumnWidthRecalculation.d.ts": "./utils/useDeferredColumnWidthRecalculation.d.ts",
|
|
566
|
+
"./utils/useDeferredColumnWidthRecalculation.d.ts.map": "./utils/useDeferredColumnWidthRecalculation.d.ts.map",
|
|
567
|
+
"./utils/useDeferredColumnWidthRecalculation.js": "./utils/useDeferredColumnWidthRecalculation.js",
|
|
568
|
+
"./utils/useDeferredColumnWidthRecalculation.js.map": "./utils/useDeferredColumnWidthRecalculation.js.map",
|
|
565
569
|
"./utils/useMergedRefs.d.ts": "./utils/useMergedRefs.d.ts",
|
|
566
570
|
"./utils/useMergedRefs.d.ts.map": "./utils/useMergedRefs.d.ts.map",
|
|
567
571
|
"./utils/useMergedRefs.js": "./utils/useMergedRefs.js",
|
package/utils/createComponent.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{createComponent as n}from"@lit/react";window.Vaadin??={},window.Vaadin.registrations??=[],window.Vaadin.registrations.push({is:"@vaadin/react-components",version:"25.3.
|
|
1
|
+
import{createComponent as n}from"@lit/react";window.Vaadin??={},window.Vaadin.registrations??=[],window.Vaadin.registrations.push({is:"@vaadin/react-components",version:"25.3.3"});function o(e){const{elementClass:t}=e;return n("_properties"in t?{...e,elementClass:{name:t.name,prototype:{...t._properties,hidden:Boolean}}}:e)}function r(e){return o(e)}export{o as createComponent,r as createThemedComponent};
|
|
2
2
|
//# sourceMappingURL=createComponent.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/utils/createComponent.ts"],
|
|
4
|
-
"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 */ '25.3.
|
|
4
|
+
"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 */ '25.3.3',\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<I extends HTMLElement, E extends EventNames = {}> = 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/**\n * The type of a React component created from a Vaadin web component.\n */\nexport type ReactWebComponent<I extends HTMLElement, E extends EventNames = {}> = (\n props: WebComponentProps<I, E> & RefAttributes<I>,\n) => React.ReactElement | null;\n\n/**\n * The type of a React component that always accepts a `theme` property, even if\n * the underlying web component does not use `ThemableMixin` / does not expose\n * `ThemePropertyMixinClass` in its type. Used for components that support theme\n * variants through the `theme` attribute without the mixin.\n */\nexport type ThemedReactWebComponent<I extends HTMLElement, E extends EventNames = {}> = (\n props: Partial<ThemedWebComponentProps<I, E>> & RefAttributes<I>,\n) => React.ReactElement | null;\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): ReactWebComponent<I, E>;\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\n// A separate declaration is needed here for the same reason as `createComponent`.\nexport function createThemedComponent<I extends HTMLElement, E extends EventNames = {}>(\n options: Options<I, E>,\n): ThemedReactWebComponent<I, E>;\n\n// Creates a React component that always accepts a `theme` property, regardless of\n// whether the underlying web component uses `ThemableMixin`. This only widens the\n// type: the runtime is identical to `createComponent`. `@lit/react` already forwards\n// any prop that is not defined on the element prototype (such as `theme` on a\n// non-`ThemableMixin` element) to the DOM as an attribute, so no runtime change is\n// needed \u2014 this function exists purely to expose `theme` at the type level.\nexport function createThemedComponent<I extends HTMLElement, E extends EventNames = {}>(options: Options<I, E>): any {\n return createComponent(options);\n}\n"],
|
|
5
5
|
"mappings": "AAAA,OAAS,mBAAmBA,MAAwC,aAuBpE,OAAO,SAAW,CAAC,EACnB,OAAO,OAAO,gBAAkB,CAAC,EACjC,OAAO,OAAO,cAAc,KAAK,CAC/B,GAAI,2BACJ,QAAiC,QACnC,CAAC,EAyEM,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,CAaO,SAASE,EAAwEF,EAA6B,CACnH,OAAOD,EAAgBC,CAAO,CAChC",
|
|
6
6
|
"names": ["_createComponent", "createComponent", "options", "elementClass", "createThemedComponent"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type ForwardedRef, type RefCallback } from 'react';
|
|
2
|
+
import type { GridElement } from '../generated/Grid.js';
|
|
3
|
+
/**
|
|
4
|
+
* Defers `recalculateColumnWidths()` into a microtask so that the React renderer
|
|
5
|
+
* portals have content before the column widths are measured.
|
|
6
|
+
* Returns the ref to pass to the grid element.
|
|
7
|
+
*/
|
|
8
|
+
export default function useDeferredColumnWidthRecalculation<T extends GridElement<any>>(ref: ForwardedRef<T>): RefCallback<T>;
|
|
9
|
+
//# sourceMappingURL=useDeferredColumnWidthRecalculation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDeferredColumnWidthRecalculation.d.ts","sourceRoot":"","sources":["../src/utils/useDeferredColumnWidthRecalculation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAe,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,mCAAmC,CAAC,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,EACpF,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,GACnB,WAAW,CAAC,CAAC,CAAC,CAahB"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{useCallback as a}from"react";import o from"./useMergedRefs.js";function c(t){const r=a(e=>{e&&(e.recalculateColumnWidths=function(...l){queueMicrotask(()=>{Object.getPrototypeOf(this).recalculateColumnWidths.call(this,...l)})})},[]);return o(r,t)}export{c as default};
|
|
2
|
+
//# sourceMappingURL=useDeferredColumnWidthRecalculation.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/utils/useDeferredColumnWidthRecalculation.ts"],
|
|
4
|
+
"sourcesContent": ["import { type ForwardedRef, type RefCallback, useCallback } from 'react';\nimport type { GridElement } from '../generated/Grid.js';\nimport useMergedRefs from './useMergedRefs.js';\n\n/**\n * Defers `recalculateColumnWidths()` into a microtask so that the React renderer\n * portals have content before the column widths are measured.\n * Returns the ref to pass to the grid element.\n */\nexport default function useDeferredColumnWidthRecalculation<T extends GridElement<any>>(\n ref: ForwardedRef<T>,\n): RefCallback<T> {\n const patchRef = useCallback((element: T | null) => {\n if (element) {\n element.recalculateColumnWidths = function (...args) {\n // Wait for column content to finish rendering before recalculating widths.\n queueMicrotask(() => {\n Object.getPrototypeOf(this).recalculateColumnWidths.call(this, ...args);\n });\n };\n }\n }, []);\n\n return useMergedRefs(patchRef, ref);\n}\n"],
|
|
5
|
+
"mappings": "AAAA,OAA8C,eAAAA,MAAmB,QAEjE,OAAOC,MAAmB,qBAOX,SAARC,EACLC,EACgB,CAChB,MAAMC,EAAWJ,EAAaK,GAAsB,CAC9CA,IACFA,EAAQ,wBAA0B,YAAaC,EAAM,CAEnD,eAAe,IAAM,CACnB,OAAO,eAAe,IAAI,EAAE,wBAAwB,KAAK,KAAM,GAAGA,CAAI,CACxE,CAAC,CACH,EAEJ,EAAG,CAAC,CAAC,EAEL,OAAOL,EAAcG,EAAUD,CAAG,CACpC",
|
|
6
|
+
"names": ["useCallback", "useMergedRefs", "useDeferredColumnWidthRecalculation", "ref", "patchRef", "element", "args"]
|
|
7
|
+
}
|