@grafana/scenes 4.4.0--canary.667.8550830076.0 → 4.4.1

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js +6 -25
  3. package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js.map +1 -1
  4. package/dist/index.js +4 -23
  5. package/dist/index.js.map +1 -1
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,3 +1,27 @@
1
+ # v4.4.1 (Thu Apr 04 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Chore: Remove viz panel tooltip related code that is no longer needed [#675](https://github.com/grafana/scenes/pull/675) ([@kaydelaney](https://github.com/kaydelaney))
6
+
7
+ #### Authors: 1
8
+
9
+ - kay delaney ([@kaydelaney](https://github.com/kaydelaney))
10
+
11
+ ---
12
+
13
+ # v4.4.0 (Thu Apr 04 2024)
14
+
15
+ #### 🚀 Enhancement
16
+
17
+ - SceneRefreshPicker: Implement mechanism for auto interval [#667](https://github.com/grafana/scenes/pull/667) ([@bfmatei](https://github.com/bfmatei))
18
+
19
+ #### Authors: 1
20
+
21
+ - Bogdan Matei ([@bfmatei](https://github.com/bfmatei))
22
+
23
+ ---
24
+
1
25
  # v4.3.0 (Wed Apr 03 2024)
2
26
 
3
27
  #### 🚀 Enhancement
package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js CHANGED
@@ -1,9 +1,9 @@
1
- import React, { useRef, useReducer, useCallback, useMemo } from 'react';
1
+ import React from 'react';
2
2
  import ReactGridLayout from 'react-grid-layout';
3
3
  import AutoSizer from 'react-virtualized-auto-sizer';
4
4
  import { GRID_CELL_VMARGIN, GRID_COLUMN_COUNT, GRID_CELL_HEIGHT } from './constants.js';
5
5
  import { LazyLoader } from '../LazyLoader.js';
6
- import { useTheme2, LayoutItemContext, useStyles2 } from '@grafana/ui';
6
+ import { useStyles2 } from '@grafana/ui';
7
7
  import { cx, css } from '@emotion/css';
8
8
 
9
9
  var __defProp = Object.defineProperty;
@@ -80,45 +80,26 @@ const GridItemWrapper = React.forwardRef((props, ref) => {
80
80
  const _a = props, { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children } = _a, divProps = __objRest(_a, ["grid", "layoutItem", "index", "totalCount", "isLazy", "style", "onLoad", "onChange", "children"]);
81
81
  const sceneChild = grid.getSceneLayoutChild(layoutItem.i);
82
82
  const className = (_b = sceneChild.getClassName) == null ? void 0 : _b.call(sceneChild);
83
- const theme = useTheme2();
84
- const boostedCount = useRef(0);
85
- const [_, forceUpdate] = useReducer((x) => x + 1, 0);
86
- const boostZIndex = useCallback(() => {
87
- boostedCount.current += 1;
88
- forceUpdate();
89
- return () => {
90
- boostedCount.current -= 1;
91
- forceUpdate();
92
- };
93
- }, [forceUpdate]);
94
- const ctxValue = useMemo(() => ({ boostZIndex }), [boostZIndex]);
95
- const descIndex = totalCount - index;
96
83
  const innerContent = /* @__PURE__ */ React.createElement(sceneChild.Component, {
97
84
  model: sceneChild,
98
85
  key: sceneChild.state.key
99
86
  });
100
- const innerContentWithContext = LayoutItemContext ? /* @__PURE__ */ React.createElement(LayoutItemContext.Provider, {
101
- value: ctxValue
102
- }, innerContent) : innerContent;
103
- const newStyle = __spreadProps(__spreadValues({}, style), {
104
- zIndex: boostedCount.current === 0 ? descIndex : theme.zIndex.dropdown
105
- });
106
87
  if (isLazy) {
107
88
  return /* @__PURE__ */ React.createElement(LazyLoader, __spreadProps(__spreadValues({}, divProps), {
108
89
  key: sceneChild.state.key,
109
90
  "data-griditem-key": sceneChild.state.key,
110
91
  className: cx(className, props.className),
111
- style: newStyle,
92
+ style,
112
93
  ref
113
- }), innerContentWithContext, children);
94
+ }), innerContent, children);
114
95
  }
115
96
  return /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, divProps), {
116
97
  ref,
117
98
  key: sceneChild.state.key,
118
99
  "data-griditem-key": sceneChild.state.key,
119
100
  className: cx(className, props.className),
120
- style: newStyle
121
- }), innerContentWithContext, children);
101
+ style
102
+ }), innerContent, children);
122
103
  });
123
104
  GridItemWrapper.displayName = "GridItemWrapper";
124
105
  function validateChildrenSize(children) {
package/dist/esm/components/layout/grid/SceneGridLayoutRenderer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useReducer, useRef } from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from './constants';\nimport { LazyLoader } from '../LazyLoader';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\n// @ts-expect-error TODO remove when @grafana/ui is upgraded to 10.4\nimport { LayoutItemContext, useStyles2, useTheme2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n const { children, isLazy, isDraggable, isResizable } = model.useState();\n\n validateChildrenSize(children);\n\n return (\n <AutoSizer>\n {({ width, height }) => {\n if (width === 0) {\n return null;\n }\n\n const layout = model.buildGridLayout(width, height);\n\n return (\n /**\n * The children is using a width of 100% so we need to guarantee that it is wrapped\n * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n * has a width of 0 and will let its content overflow its div.\n */\n <div\n style={{ width: `${width}px`, height: '100%', position: 'relative', zIndex: 1 }}\n className={cx('react-grid-layout', isDraggable && 'react-grid-layout--enable-move-animations')}\n >\n <ReactGridLayout\n width={width}\n /**\n Disable draggable if mobile device, solving an issue with unintentionally\n moving panels. https://github.com/grafana/grafana/issues/18497\n theme.breakpoints.md = 769\n */\n isDraggable={isDraggable && width > 768}\n isResizable={isResizable ?? false}\n containerPadding={[0, 0]}\n useCSSTransforms={true}\n margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}\n cols={GRID_COLUMN_COUNT}\n rowHeight={GRID_CELL_HEIGHT}\n draggableHandle={`.grid-drag-handle-${model.state.key}`}\n draggableCancel=\".grid-drag-cancel\"\n // @ts-ignore: ignoring for now until we make the size type numbers-only\n layout={layout}\n onDragStop={model.onDragStop}\n onResizeStop={model.onResizeStop}\n onLayoutChange={model.onLayoutChange}\n isBounded={false}\n resizeHandle={<ResizeHandle />}\n >\n {layout.map((gridItem, index) => (\n <GridItemWrapper\n key={gridItem.i}\n grid={model}\n layoutItem={gridItem}\n index={index}\n isLazy={isLazy}\n totalCount={layout.length}\n />\n ))}\n </ReactGridLayout>\n </div>\n );\n }}\n </AutoSizer>\n );\n}\n\ninterface GridItemWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n grid: SceneGridLayout;\n layoutItem: ReactGridLayout.Layout;\n index: number;\n totalCount: number;\n isLazy?: boolean;\n}\n\nconst GridItemWrapper = React.forwardRef<HTMLDivElement, GridItemWrapperProps>((props, ref) => {\n const { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children, ...divProps } = props;\n const sceneChild = grid.getSceneLayoutChild(layoutItem.i)!;\n const className = sceneChild.getClassName?.();\n const theme = useTheme2();\n\n const boostedCount = useRef(0);\n const [_, forceUpdate] = useReducer((x) => x + 1, 0);\n\n const boostZIndex = useCallback(() => {\n boostedCount.current += 1;\n forceUpdate();\n\n return () => {\n boostedCount.current -= 1;\n forceUpdate();\n };\n }, [forceUpdate]);\n\n const ctxValue = useMemo(() => ({ boostZIndex }), [boostZIndex]);\n const descIndex = totalCount - index;\n const innerContent = <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />;\n const innerContentWithContext = LayoutItemContext ? (\n <LayoutItemContext.Provider value={ctxValue}>{innerContent}</LayoutItemContext.Provider>\n ) : (\n innerContent\n );\n\n const newStyle = {\n ...style,\n zIndex: boostedCount.current === 0 ? descIndex : theme.zIndex.dropdown,\n };\n\n if (isLazy) {\n return (\n <LazyLoader\n {...divProps}\n key={sceneChild.state.key!}\n data-griditem-key={sceneChild.state.key}\n className={cx(className, props.className)}\n style={newStyle}\n ref={ref}\n >\n {innerContentWithContext}\n {children}\n </LazyLoader>\n );\n }\n\n return (\n <div\n {...divProps}\n ref={ref}\n key={sceneChild.state.key}\n data-griditem-key={sceneChild.state.key}\n className={cx(className, props.className)}\n style={newStyle}\n >\n {innerContentWithContext}\n {children}\n </div>\n );\n});\n\nGridItemWrapper.displayName = 'GridItemWrapper';\n\nfunction validateChildrenSize(children: SceneGridItemLike[]) {\n if (\n children.some(\n (c) =>\n c.state.height === undefined ||\n c.state.width === undefined ||\n c.state.x === undefined ||\n c.state.y === undefined\n )\n ) {\n throw new Error('All children must have a size specified');\n }\n}\n\ninterface ResizeHandleProps extends React.HTMLAttributes<HTMLDivElement> {\n handleAxis?: string;\n}\n\nconst ResizeHandle = React.forwardRef<HTMLDivElement, ResizeHandleProps>(({ handleAxis, ...divProps }, ref) => {\n const customCssClass = useStyles2(getResizeHandleStyles);\n\n return (\n <div ref={ref} {...divProps} className={`${customCssClass} scene-resize-handle`}>\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M21 15L15 21M21 8L8 21\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </div>\n );\n});\n\nResizeHandle.displayName = 'ResizeHandle';\n\nfunction getResizeHandleStyles(theme: GrafanaTheme2) {\n return css({\n position: 'absolute',\n bottom: 0,\n right: 0,\n zIndex: 999,\n padding: theme.spacing(1.5, 0, 0, 1.5),\n color: theme.colors.border.strong,\n cursor: 'se-resize',\n '&:hover': {\n color: theme.colors.text.link,\n },\n svg: {\n display: 'block',\n },\n '.react-resizable-hide &': {\n display: 'none',\n },\n });\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SceneGridLayoutRenderer.js","sources":["../../../../../src/components/layout/grid/SceneGridLayoutRenderer.tsx"],"sourcesContent":["import React from 'react';\nimport ReactGridLayout from 'react-grid-layout';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { SceneComponentProps } from '../../../core/types';\nimport { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from './constants';\nimport { LazyLoader } from '../LazyLoader';\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { SceneGridItemLike } from './types';\nimport { useStyles2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { GrafanaTheme2 } from '@grafana/data';\n\nexport function SceneGridLayoutRenderer({ model }: SceneComponentProps<SceneGridLayout>) {\n const { children, isLazy, isDraggable, isResizable } = model.useState();\n\n validateChildrenSize(children);\n\n return (\n <AutoSizer>\n {({ width, height }) => {\n if (width === 0) {\n return null;\n }\n\n const layout = model.buildGridLayout(width, height);\n\n return (\n /**\n * The children is using a width of 100% so we need to guarantee that it is wrapped\n * in an element that has the calculated size given by the AutoSizer. The AutoSizer\n * has a width of 0 and will let its content overflow its div.\n */\n <div\n style={{ width: `${width}px`, height: '100%', position: 'relative', zIndex: 1 }}\n className={cx('react-grid-layout', isDraggable && 'react-grid-layout--enable-move-animations')}\n >\n <ReactGridLayout\n width={width}\n /**\n Disable draggable if mobile device, solving an issue with unintentionally\n moving panels. https://github.com/grafana/grafana/issues/18497\n theme.breakpoints.md = 769\n */\n isDraggable={isDraggable && width > 768}\n isResizable={isResizable ?? false}\n containerPadding={[0, 0]}\n useCSSTransforms={true}\n margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}\n cols={GRID_COLUMN_COUNT}\n rowHeight={GRID_CELL_HEIGHT}\n draggableHandle={`.grid-drag-handle-${model.state.key}`}\n draggableCancel=\".grid-drag-cancel\"\n // @ts-ignore: ignoring for now until we make the size type numbers-only\n layout={layout}\n onDragStop={model.onDragStop}\n onResizeStop={model.onResizeStop}\n onLayoutChange={model.onLayoutChange}\n isBounded={false}\n resizeHandle={<ResizeHandle />}\n >\n {layout.map((gridItem, index) => (\n <GridItemWrapper\n key={gridItem.i}\n grid={model}\n layoutItem={gridItem}\n index={index}\n isLazy={isLazy}\n totalCount={layout.length}\n />\n ))}\n </ReactGridLayout>\n </div>\n );\n }}\n </AutoSizer>\n );\n}\n\ninterface GridItemWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n grid: SceneGridLayout;\n layoutItem: ReactGridLayout.Layout;\n index: number;\n totalCount: number;\n isLazy?: boolean;\n}\n\nconst GridItemWrapper = React.forwardRef<HTMLDivElement, GridItemWrapperProps>((props, ref) => {\n const { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children, ...divProps } = props;\n const sceneChild = grid.getSceneLayoutChild(layoutItem.i)!;\n const className = sceneChild.getClassName?.();\n\n const innerContent = <sceneChild.Component model={sceneChild} key={sceneChild.state.key} />;\n\n if (isLazy) {\n return (\n <LazyLoader\n {...divProps}\n key={sceneChild.state.key!}\n data-griditem-key={sceneChild.state.key}\n className={cx(className, props.className)}\n style={style}\n ref={ref}\n >\n {innerContent}\n {children}\n </LazyLoader>\n );\n }\n\n return (\n <div\n {...divProps}\n ref={ref}\n key={sceneChild.state.key}\n data-griditem-key={sceneChild.state.key}\n className={cx(className, props.className)}\n style={style}\n >\n {innerContent}\n {children}\n </div>\n );\n});\n\nGridItemWrapper.displayName = 'GridItemWrapper';\n\nfunction validateChildrenSize(children: SceneGridItemLike[]) {\n if (\n children.some(\n (c) =>\n c.state.height === undefined ||\n c.state.width === undefined ||\n c.state.x === undefined ||\n c.state.y === undefined\n )\n ) {\n throw new Error('All children must have a size specified');\n }\n}\n\ninterface ResizeHandleProps extends React.HTMLAttributes<HTMLDivElement> {\n handleAxis?: string;\n}\n\nconst ResizeHandle = React.forwardRef<HTMLDivElement, ResizeHandleProps>(({ handleAxis, ...divProps }, ref) => {\n const customCssClass = useStyles2(getResizeHandleStyles);\n\n return (\n <div ref={ref} {...divProps} className={`${customCssClass} scene-resize-handle`}>\n <svg width=\"16px\" height=\"16px\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M21 15L15 21M21 8L8 21\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </div>\n );\n});\n\nResizeHandle.displayName = 'ResizeHandle';\n\nfunction getResizeHandleStyles(theme: GrafanaTheme2) {\n return css({\n position: 'absolute',\n bottom: 0,\n right: 0,\n zIndex: 999,\n padding: theme.spacing(1.5, 0, 0, 1.5),\n color: theme.colors.border.strong,\n cursor: 'se-resize',\n '&:hover': {\n color: theme.colors.text.link,\n },\n svg: {\n display: 'block',\n },\n '.react-resizable-hide &': {\n display: 'none',\n },\n });\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYgB,SAAA,uBAAA,CAAwB,EAAE,KAAA,EAA+C,EAAA;AACvF,EAAA,MAAM,EAAE,QAAU,EAAA,MAAA,EAAQ,aAAa,WAAY,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAEtE,EAAA,oBAAA,CAAqB,QAAQ,CAAA,CAAA;AAE7B,EAAA,2CACG,SACE,EAAA,IAAA,EAAA,CAAC,EAAE,KAAA,EAAO,QAAa,KAAA;AACtB,IAAA,IAAI,UAAU,CAAG,EAAA;AACf,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,MAAM,MAAS,GAAA,KAAA,CAAM,eAAgB,CAAA,KAAA,EAAO,MAAM,CAAA,CAAA;AAElD,IAAA,uBAMG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACC,KAAA,EAAO,EAAE,KAAA,EAAO,CAAG,EAAA,KAAA,CAAA,EAAA,CAAA,EAAW,QAAQ,MAAQ,EAAA,QAAA,EAAU,UAAY,EAAA,MAAA,EAAQ,CAAE,EAAA;AAAA,MAC9E,SAAW,EAAA,EAAA,CAAG,mBAAqB,EAAA,WAAA,IAAe,2CAA2C,CAAA;AAAA,KAAA,kBAE5F,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACC,KAAA;AAAA,MAMA,WAAA,EAAa,eAAe,KAAQ,GAAA,GAAA;AAAA,MACpC,aAAa,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,KAAA;AAAA,MAC5B,gBAAA,EAAkB,CAAC,CAAA,EAAG,CAAC,CAAA;AAAA,MACvB,gBAAkB,EAAA,IAAA;AAAA,MAClB,MAAA,EAAQ,CAAC,iBAAA,EAAmB,iBAAiB,CAAA;AAAA,MAC7C,IAAM,EAAA,iBAAA;AAAA,MACN,SAAW,EAAA,gBAAA;AAAA,MACX,eAAA,EAAiB,CAAqB,kBAAA,EAAA,KAAA,CAAM,KAAM,CAAA,GAAA,CAAA,CAAA;AAAA,MAClD,eAAgB,EAAA,mBAAA;AAAA,MAEhB,MAAA;AAAA,MACA,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,cAAc,KAAM,CAAA,YAAA;AAAA,MACpB,gBAAgB,KAAM,CAAA,cAAA;AAAA,MACtB,SAAW,EAAA,KAAA;AAAA,MACX,YAAA,sCAAe,YAAa,EAAA,IAAA,CAAA;AAAA,KAAA,EAE3B,MAAO,CAAA,GAAA,CAAI,CAAC,QAAA,EAAU,0BACpB,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA;AAAA,MACC,KAAK,QAAS,CAAA,CAAA;AAAA,MACd,IAAM,EAAA,KAAA;AAAA,MACN,UAAY,EAAA,QAAA;AAAA,MACZ,KAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAY,MAAO,CAAA,MAAA;AAAA,KACrB,CACD,CACH,CACF,CAAA,CAAA;AAAA,GAGN,CAAA,CAAA;AAEJ,CAAA;AAUA,MAAM,eAAkB,GAAA,KAAA,CAAM,UAAiD,CAAA,CAAC,OAAO,GAAQ,KAAA;AAtF/F,EAAA,IAAA,EAAA,CAAA;AAuFE,EAAwG,MAAA,EAAA,GAAA,KAAA,EAAhG,QAAM,UAAY,EAAA,KAAA,EAAO,YAAY,MAAQ,EAAA,KAAA,EAAO,MAAQ,EAAA,QAAA,EAAU,QAvFhF,EAAA,GAuF0G,IAAb,QAAa,GAAA,SAAA,CAAA,EAAA,EAAb,CAAnF,MAAM,EAAA,YAAA,EAAY,SAAO,YAAY,EAAA,QAAA,EAAQ,OAAO,EAAA,QAAA,EAAQ,UAAU,EAAA,UAAA,CAAA,CAAA,CAAA;AAC9E,EAAA,MAAM,UAAa,GAAA,IAAA,CAAK,mBAAoB,CAAA,UAAA,CAAW,CAAC,CAAA,CAAA;AACxD,EAAM,MAAA,SAAA,GAAA,CAAY,gBAAW,YAAX,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,UAAA,CAAA,CAAA;AAElB,EAAM,MAAA,YAAA,mBAAgB,KAAA,CAAA,aAAA,CAAA,UAAA,CAAW,SAAX,EAAA;AAAA,IAAqB,KAAO,EAAA,UAAA;AAAA,IAAY,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,GAAK,CAAA,CAAA;AAEzF,EAAA,IAAI,MAAQ,EAAA;AACV,IACE,uBAAA,KAAA,CAAA,aAAA,CAAC,6CACK,QADL,CAAA,EAAA;AAAA,MAEC,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,MACtB,mBAAA,EAAmB,WAAW,KAAM,CAAA,GAAA;AAAA,MACpC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA,MACxC,KAAA;AAAA,MACA,GAAA;AAAA,KAAA,CAAA,EAEC,cACA,QACH,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,wCACK,QADL,CAAA,EAAA;AAAA,IAEC,GAAA;AAAA,IACA,GAAA,EAAK,WAAW,KAAM,CAAA,GAAA;AAAA,IACtB,mBAAA,EAAmB,WAAW,KAAM,CAAA,GAAA;AAAA,IACpC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,KAAA,CAAM,SAAS,CAAA;AAAA,IACxC,KAAA;AAAA,GAAA,CAAA,EAEC,cACA,QACH,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAED,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAE9B,SAAS,qBAAqB,QAA+B,EAAA;AAC3D,EAAA,IACE,QAAS,CAAA,IAAA;AAAA,IACP,CAAC,CACC,KAAA,CAAA,CAAE,KAAM,CAAA,MAAA,KAAW,UACnB,CAAE,CAAA,KAAA,CAAM,KAAU,KAAA,KAAA,CAAA,IAClB,EAAE,KAAM,CAAA,CAAA,KAAM,KACd,CAAA,IAAA,CAAA,CAAE,MAAM,CAAM,KAAA,KAAA,CAAA;AAAA,GAElB,EAAA;AACA,IAAM,MAAA,IAAI,MAAM,yCAAyC,CAAA,CAAA;AAAA,GAC3D;AACF,CAAA;AAMA,MAAM,YAAe,GAAA,KAAA,CAAM,UAA8C,CAAA,CAAC,IAA6B,GAAQ,KAAA;AAArC,EAAA,IAAA,EAAA,GAAA,EAAA,CAAA,CAAiB,QAAA,GAAA,SAAA,CAAjB,IAAiB,CAAf,YAAA,CAAA,EAAA;AAC1E,EAAM,MAAA,cAAA,GAAiB,WAAW,qBAAqB,CAAA,CAAA;AAEvD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IAAI,GAAA;AAAA,GAAA,EAAc,QAAlB,CAAA,EAAA;AAAA,IAA4B,WAAW,CAAG,EAAA,cAAA,CAAA,oBAAA,CAAA;AAAA,GAAA,CAAA,kBACxC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,KAAM,EAAA,MAAA;AAAA,IAAO,MAAO,EAAA,MAAA;AAAA,IAAO,OAAQ,EAAA,WAAA;AAAA,IAAY,IAAK,EAAA,MAAA;AAAA,IAAO,KAAM,EAAA,4BAAA;AAAA,GAAA,kBACnE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,CAAE,EAAA,wBAAA;AAAA,IACF,MAAO,EAAA,cAAA;AAAA,IACP,WAAY,EAAA,GAAA;AAAA,IACZ,aAAc,EAAA,OAAA;AAAA,IACd,cAAe,EAAA,OAAA;AAAA,GACjB,CACF,CACF,CAAA,CAAA;AAEJ,CAAC,CAAA,CAAA;AAED,YAAA,CAAa,WAAc,GAAA,cAAA,CAAA;AAE3B,SAAS,sBAAsB,KAAsB,EAAA;AACnD,EAAA,OAAO,GAAI,CAAA;AAAA,IACT,QAAU,EAAA,UAAA;AAAA,IACV,MAAQ,EAAA,CAAA;AAAA,IACR,KAAO,EAAA,CAAA;AAAA,IACP,MAAQ,EAAA,GAAA;AAAA,IACR,SAAS,KAAM,CAAA,OAAA,CAAQ,GAAK,EAAA,CAAA,EAAG,GAAG,GAAG,CAAA;AAAA,IACrC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,MAAA;AAAA,IAC3B,MAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAA;AAAA,MACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,IAAA;AAAA,KAC3B;AAAA,IACA,GAAK,EAAA;AAAA,MACH,OAAS,EAAA,OAAA;AAAA,KACX;AAAA,IACA,yBAA2B,EAAA;AAAA,MACzB,OAAS,EAAA,MAAA;AAAA,KACX;AAAA,GACD,CAAA,CAAA;AACH;;;;"}
package/dist/index.js CHANGED
@@ -7698,45 +7698,26 @@ const GridItemWrapper = React__default["default"].forwardRef((props, ref) => {
7698
7698
  const _a = props, { grid, layoutItem, index, totalCount, isLazy, style, onLoad, onChange, children } = _a, divProps = __objRest(_a, ["grid", "layoutItem", "index", "totalCount", "isLazy", "style", "onLoad", "onChange", "children"]);
7699
7699
  const sceneChild = grid.getSceneLayoutChild(layoutItem.i);
7700
7700
  const className = (_b = sceneChild.getClassName) == null ? void 0 : _b.call(sceneChild);
7701
- const theme = ui.useTheme2();
7702
- const boostedCount = React.useRef(0);
7703
- const [_, forceUpdate] = React.useReducer((x) => x + 1, 0);
7704
- const boostZIndex = React.useCallback(() => {
7705
- boostedCount.current += 1;
7706
- forceUpdate();
7707
- return () => {
7708
- boostedCount.current -= 1;
7709
- forceUpdate();
7710
- };
7711
- }, [forceUpdate]);
7712
- const ctxValue = React.useMemo(() => ({ boostZIndex }), [boostZIndex]);
7713
- const descIndex = totalCount - index;
7714
7701
  const innerContent = /* @__PURE__ */ React__default["default"].createElement(sceneChild.Component, {
7715
7702
  model: sceneChild,
7716
7703
  key: sceneChild.state.key
7717
7704
  });
7718
- const innerContentWithContext = ui.LayoutItemContext ? /* @__PURE__ */ React__default["default"].createElement(ui.LayoutItemContext.Provider, {
7719
- value: ctxValue
7720
- }, innerContent) : innerContent;
7721
- const newStyle = __spreadProps$6(__spreadValues$9({}, style), {
7722
- zIndex: boostedCount.current === 0 ? descIndex : theme.zIndex.dropdown
7723
- });
7724
7705
  if (isLazy) {
7725
7706
  return /* @__PURE__ */ React__default["default"].createElement(LazyLoader, __spreadProps$6(__spreadValues$9({}, divProps), {
7726
7707
  key: sceneChild.state.key,
7727
7708
  "data-griditem-key": sceneChild.state.key,
7728
7709
  className: css.cx(className, props.className),
7729
- style: newStyle,
7710
+ style,
7730
7711
  ref
7731
- }), innerContentWithContext, children);
7712
+ }), innerContent, children);
7732
7713
  }
7733
7714
  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$6(__spreadValues$9({}, divProps), {
7734
7715
  ref,
7735
7716
  key: sceneChild.state.key,
7736
7717
  "data-griditem-key": sceneChild.state.key,
7737
7718
  className: css.cx(className, props.className),
7738
- style: newStyle
7739
- }), innerContentWithContext, children);
7719
+ style
7720
+ }), innerContent, children);
7740
7721
  });
7741
7722
  GridItemWrapper.displayName = "GridItemWrapper";
7742
7723
  function validateChildrenSize(children) {