@genesislcap/foundation-layout 14.424.1 → 14.425.0

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 (4) hide show
  1. package/dist/custom-elements.json +119 -119
  2. package/dist/react.cjs +50 -12
  3. package/dist/react.mjs +50 -12
  4. package/package.json +15 -15
package/dist/custom-elements.json CHANGED
@@ -185,125 +185,6 @@
185
185
  }
186
186
  ]
187
187
  },
188
- {
189
- "kind": "javascript-module",
190
- "path": "src/styles/constants.ts",
191
- "declarations": [
192
- {
193
- "kind": "function",
194
- "name": "glVisualConfig",
195
- "return": {
196
- "type": {
197
- "text": "Omit<LayoutConfig, 'root'>"
198
- }
199
- }
200
- },
201
- {
202
- "kind": "variable",
203
- "name": "LAYOUT_ICONS",
204
- "type": {
205
- "text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}"
206
- },
207
- "default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}",
208
- "description": "A collection of SVG icons in base64 format.",
209
- "privacy": "public"
210
- }
211
- ],
212
- "exports": [
213
- {
214
- "kind": "js",
215
- "name": "glVisualConfig",
216
- "declaration": {
217
- "name": "glVisualConfig",
218
- "module": "src/styles/constants.ts"
219
- }
220
- },
221
- {
222
- "kind": "js",
223
- "name": "LAYOUT_ICONS",
224
- "declaration": {
225
- "name": "LAYOUT_ICONS",
226
- "module": "src/styles/constants.ts"
227
- }
228
- }
229
- ]
230
- },
231
- {
232
- "kind": "javascript-module",
233
- "path": "src/styles/dragging.styles.ts",
234
- "declarations": [
235
- {
236
- "kind": "variable",
237
- "name": "globalDraggingStyles",
238
- "default": "`\n .lm_dragProxy .lm_content {\n box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n }\n .lm_dropTargetIndicator {\n outline: 1px dashed #cccccc;\n transition: all 200ms ease;\n }\n .lm_dropTargetIndicator .lm_inner {\n background: var(${neutralFillStealthRest.cssCustomProperty});\n opacity: 0.2;\n }\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items {\n float: left;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n .lm_dragProxy.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n .lm_dragProxy {\n cursor: move;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n .lm_dragProxy .lm_title {\n color: white;\n padding-left: 10px;\n }\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n }\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n`",
239
- "description": "This is defined as a string rather than a css template\nbecause it is applied to a CSSStyleSheet object rather than\nused as a FAST template"
240
- }
241
- ],
242
- "exports": [
243
- {
244
- "kind": "js",
245
- "name": "globalDraggingStyles",
246
- "declaration": {
247
- "name": "globalDraggingStyles",
248
- "module": "src/styles/dragging.styles.ts"
249
- }
250
- }
251
- ]
252
- },
253
- {
254
- "kind": "javascript-module",
255
- "path": "src/styles/index.ts",
256
- "declarations": [],
257
- "exports": [
258
- {
259
- "kind": "js",
260
- "name": "*",
261
- "declaration": {
262
- "name": "*",
263
- "package": "./constants"
264
- }
265
- },
266
- {
267
- "kind": "js",
268
- "name": "*",
269
- "declaration": {
270
- "name": "*",
271
- "package": "./dragging.styles"
272
- }
273
- },
274
- {
275
- "kind": "js",
276
- "name": "*",
277
- "declaration": {
278
- "name": "*",
279
- "package": "./layout.styles"
280
- }
281
- }
282
- ]
283
- },
284
- {
285
- "kind": "javascript-module",
286
- "path": "src/styles/layout.styles.ts",
287
- "declarations": [
288
- {
289
- "kind": "variable",
290
- "name": "layoutStyles",
291
- "default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\n\n :host {\n --foundation-tab-height: calc(\n (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px\n );\n }\n\n .lm_goldenlayout {\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n }\n\n .lm_stack.lm_item {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n }\n\n .lm_maximised .lm_header {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n position: unset;\n }\n\n .lm_maximised .lm_header .lm_tabs {\n z-index: 3;\n }\n\n .lm_content {\n background-color: var(--neutral-layer-card-container);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n box-sizing: border-box;\n color: var(--neutral-foreground-rest);\n }\n\n .lm_header .lm_tabs {\n padding: 0 16px;\n }\n\n .lm_stack > .lm_items {\n box-shadow: 0 -1px 15px rgb(0 0 0 / 15%);\n }\n\n .lm_header .lm_tab.lm_active.lm_focused {\n background-color: var(--neutral-layer-card-container);\n }\n\n .lm_header .lm_tab.lm_active {\n background-color: var(--neutral-layer-card-container);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-bottom: 0;\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background-color: var(--neutral-layer-4);\n border: 0;\n border-bottom-color: transparent;\n border-bottom: 0 solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 1.5px)\n calc(var(--control-corner-radius) * 1.5px) 0 0;\n color: var(--accent-foreground-rest);\n display: flex;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n margin-right: 2px;\n margin-top: 3px;\n padding: 2px 16px;\n }\n\n .lm_header .lm_tab:not(.lm_active):hover {\n background-color: var(--neutral-layer-card-container);\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_controls {\n top: 4px;\n display: flex;\n }\n\n .lm_header .lm_controls > * {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n background-repeat: no-repeat;\n background-position: center;\n background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.533333);\n background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 100%;\n }\n\n .lm_header .lm_controls > *:hover {\n background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\n cursor: pointer;\n }\n\n .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n }\n\n .lm_maximised .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n }\n\n .lm_controls .lm_close {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n }\n\n .lm_header .lm_tab .lm_close_tab {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n background-repeat: no-repeat;\n margin-left: 12px;\n position: relative;\n top: 0;\n right: 0;\n }\n\n .lm_header .lm_tab.lm_active {\n padding: 4px 25px 3px 10px;\n }\n\n .lm_header .lm_tab:not(.lm_active) .lm_title {\n color: var(--neutral-foreground-hint);\n }\n\n .lm_header .lm_controls .lm_tabdropdown::before {\n content: none;\n }\n\n .lm_header .lm_controls .lm_tabdropdown {\n background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n }\n\n .lm_header .lm_tabdropdown_list {\n top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n right: 108px;\n background-color: var(--neutral-layer-3);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n box-shadow: 0 5px 15px rgb(0 0 0 / 35%);\n }\n\n .lm_header .lm_tabdropdown_list > .lm_tab {\n box-shadow: none;\n padding: 0 16px;\n white-space: nowrap;\n background-color: transparent;\n color: var(--neutral-foreground-rest);\n height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n border-radius: 0;\n overflow: visible;\n text-overflow: normal;\n }\n\n .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n border-bottom: 0;\n }\n\n /* gl base styles start */\n .lm_root {\n position: relative;\n }\n\n .lm_row > .lm_item {\n float: left;\n }\n\n .lm_content {\n overflow: hidden;\n position: relative;\n }\n\n .lm_dragging,\n .lm_dragging * {\n cursor: move !important;\n user-select: none;\n }\n\n .lm_maximised {\n left: 0;\n padding: 1px;\n position: absolute;\n top: 0;\n z-index: 40;\n }\n\n .lm_maximise_placeholder {\n display: none;\n }\n\n .lm_splitter {\n position: relative;\n z-index: 20;\n }\n\n .lm_splitter:hover,\n .lm_splitter.lm_dragging {\n background: var(--accent-fill-rest);\n border-radius: calc(var(--control-corner-radius) * 4px);\n }\n\n .lm_splitter.lm_vertical .lm_drag_handle {\n width: 100%;\n height: 15px;\n position: absolute;\n top: -5px;\n cursor: ns-resize !important;\n }\n\n .lm_splitter.lm_horizontal {\n float: left;\n height: 100%;\n }\n\n .lm_splitter.lm_horizontal .lm_drag_handle {\n width: 15px;\n height: 100%;\n position: absolute;\n left: -5px;\n cursor: ew-resize !important;\n }\n\n .lm_header {\n overflow: visible;\n position: relative;\n }\n\n .lm_header [class^='lm_'] {\n box-sizing: content-box !important;\n }\n\n .lm_header .lm_controls {\n position: absolute;\n right: 3px;\n }\n\n .lm_header .lm_controls > li {\n cursor: pointer;\n float: left;\n width: 18px;\n height: 18px;\n text-align: center;\n }\n\n .lm_header ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n\n .lm_header .lm_tabs {\n position: absolute;\n }\n\n .lm_header .lm_tab {\n cursor: pointer;\n float: left;\n margin-top: 1px;\n padding: 3px 25px 3px 10px;\n position: relative;\n }\n\n .lm_header .lm_tab i {\n width: 2px;\n height: 19px;\n position: absolute;\n }\n\n .lm_header .lm_tab i.lm_left {\n top: 0;\n left: -2px;\n }\n\n .lm_header .lm_tab i.lm_right {\n top: 0;\n right: -2px;\n }\n\n .lm_header .lm_tab .lm_title {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n }\n\n .lm_header .lm_tab .lm_title:only-child {\n padding-left: 10px;\n }\n\n .lm_header .lm_tab .lm_close_tab {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n top: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3055);\n position: absolute;\n right: 0;\n text-align: center;\n }\n\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n height: 100%;\n }\n\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header,\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_left .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items,\n .lm_stack.lm_left .lm_items,\n .lm_stack.lm_right .lm_items {\n float: left;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n\n .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n .lm_stack.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n\n .lm_drop_tab_placeholder {\n float: left;\n width: 100px;\n height: 10px;\n visibility: hidden;\n }\n\n .lm_header .lm_tabdropdown_list {\n position: absolute;\n top: 20px;\n right: 0;\n z-index: 5;\n overflow: hidden;\n }\n\n .lm_header .lm_tabdropdown_list .lm_tab {\n clear: both;\n padding-right: 10px;\n margin: 0;\n }\n\n .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n width: 100px;\n }\n\n .lm_header .lm_tabdropdown_list .lm_close_tab {\n display: none !important;\n }\n\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n box-shadow: none;\n }\n\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n\n .lm_popin {\n width: 20px;\n height: 20px;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 9999;\n }\n\n .lm_popin > * {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .lm_popin > .lm_bg {\n z-index: 10;\n }\n\n .lm_popin > .lm_icon {\n z-index: 20;\n } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
292
- "description": "`ElementStyles` which defines the css for FoundationLayout.",
293
- "privacy": "public"
294
- }
295
- ],
296
- "exports": [
297
- {
298
- "kind": "js",
299
- "name": "layoutStyles",
300
- "declaration": {
301
- "name": "layoutStyles",
302
- "module": "src/styles/layout.styles.ts"
303
- }
304
- }
305
- ]
306
- },
307
188
  {
308
189
  "kind": "javascript-module",
309
190
  "path": "src/main/index.ts",
@@ -1573,6 +1454,125 @@
1573
1454
  }
1574
1455
  ]
1575
1456
  },
1457
+ {
1458
+ "kind": "javascript-module",
1459
+ "path": "src/styles/constants.ts",
1460
+ "declarations": [
1461
+ {
1462
+ "kind": "function",
1463
+ "name": "glVisualConfig",
1464
+ "return": {
1465
+ "type": {
1466
+ "text": "Omit<LayoutConfig, 'root'>"
1467
+ }
1468
+ }
1469
+ },
1470
+ {
1471
+ "kind": "variable",
1472
+ "name": "LAYOUT_ICONS",
1473
+ "type": {
1474
+ "text": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}"
1475
+ },
1476
+ "default": "{\n renameSVG,\n maximiseSVG,\n minimiseSVG,\n closeSVG,\n tabDropdownSVG,\n popoutSVG,\n}",
1477
+ "description": "A collection of SVG icons in base64 format.",
1478
+ "privacy": "public"
1479
+ }
1480
+ ],
1481
+ "exports": [
1482
+ {
1483
+ "kind": "js",
1484
+ "name": "glVisualConfig",
1485
+ "declaration": {
1486
+ "name": "glVisualConfig",
1487
+ "module": "src/styles/constants.ts"
1488
+ }
1489
+ },
1490
+ {
1491
+ "kind": "js",
1492
+ "name": "LAYOUT_ICONS",
1493
+ "declaration": {
1494
+ "name": "LAYOUT_ICONS",
1495
+ "module": "src/styles/constants.ts"
1496
+ }
1497
+ }
1498
+ ]
1499
+ },
1500
+ {
1501
+ "kind": "javascript-module",
1502
+ "path": "src/styles/dragging.styles.ts",
1503
+ "declarations": [
1504
+ {
1505
+ "kind": "variable",
1506
+ "name": "globalDraggingStyles",
1507
+ "default": "`\n .lm_dragProxy .lm_content {\n box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);\n }\n .lm_dropTargetIndicator {\n outline: 1px dashed #cccccc;\n transition: all 200ms ease;\n }\n .lm_dropTargetIndicator .lm_inner {\n background: var(${neutralFillStealthRest.cssCustomProperty});\n opacity: 0.2;\n }\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items {\n float: left;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n .lm_dragProxy.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n .lm_dragProxy {\n cursor: move;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n .lm_dragProxy .lm_title {\n color: white;\n padding-left: 10px;\n }\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n }\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n`",
1508
+ "description": "This is defined as a string rather than a css template\nbecause it is applied to a CSSStyleSheet object rather than\nused as a FAST template"
1509
+ }
1510
+ ],
1511
+ "exports": [
1512
+ {
1513
+ "kind": "js",
1514
+ "name": "globalDraggingStyles",
1515
+ "declaration": {
1516
+ "name": "globalDraggingStyles",
1517
+ "module": "src/styles/dragging.styles.ts"
1518
+ }
1519
+ }
1520
+ ]
1521
+ },
1522
+ {
1523
+ "kind": "javascript-module",
1524
+ "path": "src/styles/index.ts",
1525
+ "declarations": [],
1526
+ "exports": [
1527
+ {
1528
+ "kind": "js",
1529
+ "name": "*",
1530
+ "declaration": {
1531
+ "name": "*",
1532
+ "package": "./constants"
1533
+ }
1534
+ },
1535
+ {
1536
+ "kind": "js",
1537
+ "name": "*",
1538
+ "declaration": {
1539
+ "name": "*",
1540
+ "package": "./dragging.styles"
1541
+ }
1542
+ },
1543
+ {
1544
+ "kind": "js",
1545
+ "name": "*",
1546
+ "declaration": {
1547
+ "name": "*",
1548
+ "package": "./layout.styles"
1549
+ }
1550
+ }
1551
+ ]
1552
+ },
1553
+ {
1554
+ "kind": "javascript-module",
1555
+ "path": "src/styles/layout.styles.ts",
1556
+ "declarations": [
1557
+ {
1558
+ "kind": "variable",
1559
+ "name": "layoutStyles",
1560
+ "default": "css`\n ${containerStyles}\n ${loadingSpinnerStyles}\n\n :host {\n --foundation-tab-height: calc(\n (((var(--base-height-multiplier) + var(--density)) * var(--design-unit)) - 4) * 1px\n );\n }\n\n .lm_goldenlayout {\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n }\n\n .lm_stack.lm_item {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n }\n\n .lm_maximised .lm_header {\n background-color: var(--neutral-layer-3);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n position: unset;\n }\n\n .lm_maximised .lm_header .lm_tabs {\n z-index: 3;\n }\n\n .lm_content {\n background-color: var(--neutral-layer-card-container);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n box-sizing: border-box;\n color: var(--neutral-foreground-rest);\n }\n\n .lm_header .lm_tabs {\n padding: 0 16px;\n }\n\n .lm_stack > .lm_items {\n box-shadow: 0 -1px 15px rgb(0 0 0 / 15%);\n }\n\n .lm_header .lm_tab.lm_active.lm_focused {\n background-color: var(--neutral-layer-card-container);\n }\n\n .lm_header .lm_tab.lm_active {\n background-color: var(--neutral-layer-card-container);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-bottom: 0;\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_tab {\n align-items: center;\n background-color: var(--neutral-layer-4);\n border: 0;\n border-bottom-color: transparent;\n border-bottom: 0 solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 1.5px)\n calc(var(--control-corner-radius) * 1.5px) 0 0;\n color: var(--accent-foreground-rest);\n display: flex;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 8px);\n margin-right: 2px;\n margin-top: 3px;\n padding: 2px 16px;\n }\n\n .lm_header .lm_tab:not(.lm_active):hover {\n background-color: var(--neutral-layer-card-container);\n color: var(--accent-foreground-rest);\n }\n\n .lm_header .lm_controls {\n top: 4px;\n display: flex;\n }\n\n .lm_header .lm_controls > * {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) - 6px);\n background-repeat: no-repeat;\n background-position: center;\n background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.533333);\n background-color: color-mix(in srgb, var(--neutral-fill-strong-rest), transparent 90%);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n margin-right: 4px;\n top: 3px;\n opacity: 100%;\n }\n\n .lm_header .lm_controls > *:hover {\n background-color: color-mix(in srgb, var(--neutral-fill-strong-hover), transparent 75%);\n cursor: pointer;\n }\n\n .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.maximiseSVG}');\n }\n\n .lm_maximised .lm_controls .lm_maximise {\n background-image: url('${LAYOUT_ICONS.minimiseSVG}');\n }\n\n .lm_controls .lm_close {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n }\n\n .lm_header .lm_tab .lm_close_tab {\n background-image: url('${LAYOUT_ICONS.closeSVG}');\n background-size: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.2777);\n background-repeat: no-repeat;\n margin-left: 12px;\n position: relative;\n top: 0;\n right: 0;\n }\n\n .lm_header .lm_tab.lm_active {\n padding: 4px 25px 3px 10px;\n }\n\n .lm_header .lm_tab:not(.lm_active) .lm_title {\n color: var(--neutral-foreground-hint);\n }\n\n .lm_header .lm_controls .lm_tabdropdown::before {\n content: none;\n }\n\n .lm_header .lm_controls .lm_tabdropdown {\n background-image: url('${LAYOUT_ICONS.tabDropdownSVG}');\n }\n\n .lm_header .lm_tabdropdown_list {\n top: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n right: 108px;\n background-color: var(--neutral-layer-3);\n border: 1px solid;\n border-color: var(--neutral-stroke-rest);\n border-radius: calc(var(--control-corner-radius) * 1.5px);\n box-shadow: 0 5px 15px rgb(0 0 0 / 35%);\n }\n\n .lm_header .lm_tabdropdown_list > .lm_tab {\n box-shadow: none;\n padding: 0 16px;\n white-space: nowrap;\n background-color: transparent;\n color: var(--neutral-foreground-rest);\n height: var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT});\n border-radius: 0;\n overflow: visible;\n text-overflow: normal;\n }\n\n .lm_header .lm_tabdropdown_list > .lm_tab:last-child {\n border-bottom: 0;\n }\n\n /* gl base styles start */\n .lm_root {\n position: relative;\n }\n\n .lm_row > .lm_item {\n float: left;\n }\n\n .lm_content {\n overflow: hidden;\n position: relative;\n }\n\n .lm_dragging,\n .lm_dragging * {\n cursor: move !important;\n user-select: none;\n }\n\n .lm_maximised {\n left: 0;\n padding: 1px;\n position: absolute;\n top: 0;\n z-index: 40;\n }\n\n .lm_maximise_placeholder {\n display: none;\n }\n\n .lm_splitter {\n position: relative;\n z-index: 20;\n }\n\n .lm_splitter:hover,\n .lm_splitter.lm_dragging {\n background: var(--accent-fill-rest);\n border-radius: calc(var(--control-corner-radius) * 4px);\n }\n\n .lm_splitter.lm_vertical .lm_drag_handle {\n width: 100%;\n height: 15px;\n position: absolute;\n top: -5px;\n cursor: ns-resize !important;\n }\n\n .lm_splitter.lm_horizontal {\n float: left;\n height: 100%;\n }\n\n .lm_splitter.lm_horizontal .lm_drag_handle {\n width: 15px;\n height: 100%;\n position: absolute;\n left: -5px;\n cursor: ew-resize !important;\n }\n\n .lm_header {\n overflow: visible;\n position: relative;\n }\n\n .lm_header [class^='lm_'] {\n box-sizing: content-box !important;\n }\n\n .lm_header .lm_controls {\n position: absolute;\n right: 3px;\n }\n\n .lm_header .lm_controls > li {\n cursor: pointer;\n float: left;\n width: 18px;\n height: 18px;\n text-align: center;\n }\n\n .lm_header ul {\n margin: 0;\n padding: 0;\n list-style-type: none;\n }\n\n .lm_header .lm_tabs {\n position: absolute;\n }\n\n .lm_header .lm_tab {\n cursor: pointer;\n float: left;\n margin-top: 1px;\n padding: 3px 25px 3px 10px;\n position: relative;\n }\n\n .lm_header .lm_tab i {\n width: 2px;\n height: 19px;\n position: absolute;\n }\n\n .lm_header .lm_tab i.lm_left {\n top: 0;\n left: -2px;\n }\n\n .lm_header .lm_tab i.lm_right {\n top: 0;\n right: -2px;\n }\n\n .lm_header .lm_tab .lm_title {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n user-select: none;\n }\n\n .lm_header .lm_tab .lm_title:only-child {\n padding-left: 10px;\n }\n\n .lm_header .lm_tab .lm_close_tab {\n width: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n height: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3888);\n top: calc(var(--foundation-tab-height, ${DEFAULT_TAB_HEIGHT}) * 0.3055);\n position: absolute;\n right: 0;\n text-align: center;\n }\n\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n height: 100%;\n }\n\n .lm_dragProxy.lm_left .lm_header,\n .lm_dragProxy.lm_right .lm_header,\n .lm_stack.lm_left .lm_header,\n .lm_stack.lm_right .lm_header {\n width: 20px;\n float: left;\n vertical-align: top;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform-origin: left top;\n top: 0;\n width: 1000px;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_controls,\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_left .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n bottom: 0;\n }\n\n .lm_dragProxy.lm_left .lm_items,\n .lm_dragProxy.lm_right .lm_items,\n .lm_stack.lm_left .lm_items,\n .lm_stack.lm_right .lm_items {\n float: left;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_tabs,\n .lm_stack.lm_left .lm_header .lm_tabs {\n transform: rotate(-90deg) scaleX(-1);\n left: 0;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab,\n .lm_stack.lm_left .lm_header .lm_tabs .lm_tab {\n transform: scaleX(-1);\n margin-top: 1px;\n }\n\n .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_left .lm_header .lm_tabdropdown_list {\n top: initial;\n right: initial;\n left: 20px;\n }\n\n .lm_dragProxy.lm_right .lm_content {\n float: left;\n }\n\n .lm_dragProxy.lm_right .lm_header .lm_tabs,\n .lm_stack.lm_right .lm_header .lm_tabs {\n transform: rotate(90deg) scaleX(1);\n left: 100%;\n margin-left: 0;\n }\n\n .lm_dragProxy.lm_right .lm_header .lm_controls,\n .lm_stack.lm_right .lm_header .lm_controls {\n left: 3px;\n }\n\n .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_right .lm_header .lm_tabdropdown_list {\n top: initial;\n right: 20px;\n }\n\n .lm_dragProxy.lm_bottom .lm_header .lm_tab,\n .lm_stack.lm_bottom .lm_header .lm_tab {\n margin-top: 0;\n border-top: none;\n }\n\n .lm_dragProxy.lm_bottom .lm_header .lm_controls,\n .lm_stack.lm_bottom .lm_header .lm_controls {\n top: 3px;\n }\n\n .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list,\n .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list {\n top: initial;\n bottom: 20px;\n }\n\n .lm_drop_tab_placeholder {\n float: left;\n width: 100px;\n height: 10px;\n visibility: hidden;\n }\n\n .lm_header .lm_tabdropdown_list {\n position: absolute;\n top: 20px;\n right: 0;\n z-index: 5;\n overflow: hidden;\n }\n\n .lm_header .lm_tabdropdown_list .lm_tab {\n clear: both;\n padding-right: 10px;\n margin: 0;\n }\n\n .lm_header .lm_tabdropdown_list .lm_tab .lm_title {\n width: 100px;\n }\n\n .lm_header .lm_tabdropdown_list .lm_close_tab {\n display: none !important;\n }\n\n .lm_dragProxy {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 30;\n }\n\n .lm_dragProxy .lm_header {\n background: transparent;\n }\n\n .lm_dragProxy .lm_content {\n border-top: none;\n overflow: hidden;\n }\n\n .lm_dropTargetIndicator {\n display: none;\n position: absolute;\n z-index: 20;\n box-shadow: none;\n }\n\n .lm_dropTargetIndicator .lm_inner {\n width: 100%;\n height: 100%;\n position: relative;\n top: 0;\n left: 0;\n }\n\n .lm_transition_indicator {\n display: none;\n width: 20px;\n height: 20px;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n }\n\n .lm_popin {\n width: 20px;\n height: 20px;\n position: absolute;\n bottom: 0;\n right: 0;\n z-index: 9999;\n }\n\n .lm_popin > * {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .lm_popin > .lm_bg {\n z-index: 10;\n }\n\n .lm_popin > .lm_icon {\n z-index: 20;\n } /*# sourceMappingURL=goldenlayout-base.css.map */\n`",
1561
+ "description": "`ElementStyles` which defines the css for FoundationLayout.",
1562
+ "privacy": "public"
1563
+ }
1564
+ ],
1565
+ "exports": [
1566
+ {
1567
+ "kind": "js",
1568
+ "name": "layoutStyles",
1569
+ "declaration": {
1570
+ "name": "layoutStyles",
1571
+ "module": "src/styles/layout.styles.ts"
1572
+ }
1573
+ }
1574
+ ]
1575
+ },
1576
1576
  {
1577
1577
  "kind": "javascript-module",
1578
1578
  "path": "src/utils/constants.ts",
package/dist/react.cjs CHANGED
@@ -5,29 +5,67 @@
5
5
 
6
6
  'use strict';
7
7
 
8
- const { provideReactWrapper } = require('@microsoft/fast-react-wrapper');
9
8
  const React = require('react');
10
9
  const { FoundationLayoutItem: FoundationLayoutItemWC } = require('./esm/main/layout-item.js');
11
10
  const { FoundationLayout: FoundationLayoutWC } = require('./esm/main/layout-main.js');
12
11
  const { FoundationLayoutPopoutController: FoundationLayoutPopoutControllerWC } = require('./esm/main/layout-popout-controller.js');
13
12
  const { FoundationLayoutRegion: FoundationLayoutRegionWC } = require('./esm/main/layout-region.js');
14
13
 
15
- const { wrap } = provideReactWrapper(React);
14
+ function _mergeRefs(...refs) {
15
+ return (value) => {
16
+ for (const ref of refs) {
17
+ if (typeof ref === 'function') ref(value);
18
+ else if (ref != null) ref.current = value;
19
+ }
20
+ };
21
+ }
16
22
 
17
- const FoundationLayoutItem = wrap(FoundationLayoutItemWC);
23
+ const FoundationLayoutItem = React.forwardRef(function FoundationLayoutItem(props, ref) {
24
+ const { children, ...rest } = props;
25
+ return React.createElement(customElements.getName(FoundationLayoutItemWC) ?? '%%prefix%%-layout-item', { ...rest, ref }, children);
26
+ });
18
27
 
19
- const FoundationLayout = wrap(FoundationLayoutWC, {
20
- events: {
21
- onFirstLoaded: 'first-loaded',
22
- onItemAdded: 'item-added',
23
- onItemRemoved: 'item-removed',
24
- onItemResized: 'item-resized',
25
- },
28
+ const FoundationLayout = React.forwardRef(function FoundationLayout(props, ref) {
29
+ const { onFirstLoaded, onItemAdded, onItemRemoved, onItemResized, children, ...rest } = props;
30
+ const _innerRef = React.useRef(null);
31
+ const _onFirstLoadedRef = React.useRef(onFirstLoaded);
32
+ _onFirstLoadedRef.current = onFirstLoaded;
33
+ const _onItemAddedRef = React.useRef(onItemAdded);
34
+ _onItemAddedRef.current = onItemAdded;
35
+ const _onItemRemovedRef = React.useRef(onItemRemoved);
36
+ _onItemRemovedRef.current = onItemRemoved;
37
+ const _onItemResizedRef = React.useRef(onItemResized);
38
+ _onItemResizedRef.current = onItemResized;
39
+ React.useLayoutEffect(() => {
40
+ const el = _innerRef.current;
41
+ if (!el) return;
42
+ const _onFirstLoadedFn = (e) => _onFirstLoadedRef.current?.(e);
43
+ el.addEventListener('first-loaded', _onFirstLoadedFn);
44
+ const _onItemAddedFn = (e) => _onItemAddedRef.current?.(e);
45
+ el.addEventListener('item-added', _onItemAddedFn);
46
+ const _onItemRemovedFn = (e) => _onItemRemovedRef.current?.(e);
47
+ el.addEventListener('item-removed', _onItemRemovedFn);
48
+ const _onItemResizedFn = (e) => _onItemResizedRef.current?.(e);
49
+ el.addEventListener('item-resized', _onItemResizedFn);
50
+ return () => {
51
+ el.removeEventListener('first-loaded', _onFirstLoadedFn);
52
+ el.removeEventListener('item-added', _onItemAddedFn);
53
+ el.removeEventListener('item-removed', _onItemRemovedFn);
54
+ el.removeEventListener('item-resized', _onItemResizedFn);
55
+ };
56
+ }, []);
57
+ return React.createElement(customElements.getName(FoundationLayoutWC) ?? '%%prefix%%-layout', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
26
58
  });
27
59
 
28
- const FoundationLayoutPopoutController = wrap(FoundationLayoutPopoutControllerWC);
60
+ const FoundationLayoutPopoutController = React.forwardRef(function FoundationLayoutPopoutController(props, ref) {
61
+ const { children, ...rest } = props;
62
+ return React.createElement(customElements.getName(FoundationLayoutPopoutControllerWC) ?? 'foundation-layout-popout-controller', { ...rest, ref }, children);
63
+ });
29
64
 
30
- const FoundationLayoutRegion = wrap(FoundationLayoutRegionWC);
65
+ const FoundationLayoutRegion = React.forwardRef(function FoundationLayoutRegion(props, ref) {
66
+ const { children, ...rest } = props;
67
+ return React.createElement(customElements.getName(FoundationLayoutRegionWC) ?? '%%prefix%%-layout-region', { ...rest, ref }, children);
68
+ });
31
69
 
32
70
  module.exports = {
33
71
  FoundationLayoutItem,
package/dist/react.mjs CHANGED
@@ -3,26 +3,64 @@
3
3
  * Generated from custom-elements manifest.
4
4
  */
5
5
 
6
- import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
7
6
  import React from 'react';
8
7
  import { FoundationLayoutItem as FoundationLayoutItemWC } from './esm/main/layout-item.js';
9
8
  import { FoundationLayout as FoundationLayoutWC } from './esm/main/layout-main.js';
10
9
  import { FoundationLayoutPopoutController as FoundationLayoutPopoutControllerWC } from './esm/main/layout-popout-controller.js';
11
10
  import { FoundationLayoutRegion as FoundationLayoutRegionWC } from './esm/main/layout-region.js';
12
11
 
13
- const { wrap } = provideReactWrapper(React);
12
+ function _mergeRefs(...refs) {
13
+ return (value) => {
14
+ for (const ref of refs) {
15
+ if (typeof ref === 'function') ref(value);
16
+ else if (ref != null) ref.current = value;
17
+ }
18
+ };
19
+ }
14
20
 
15
- export const FoundationLayoutItem = wrap(FoundationLayoutItemWC);
21
+ export const FoundationLayoutItem = React.forwardRef(function FoundationLayoutItem(props, ref) {
22
+ const { children, ...rest } = props;
23
+ return React.createElement(customElements.getName(FoundationLayoutItemWC) ?? '%%prefix%%-layout-item', { ...rest, ref }, children);
24
+ });
16
25
 
17
- export const FoundationLayout = wrap(FoundationLayoutWC, {
18
- events: {
19
- onFirstLoaded: 'first-loaded',
20
- onItemAdded: 'item-added',
21
- onItemRemoved: 'item-removed',
22
- onItemResized: 'item-resized',
23
- },
26
+ export const FoundationLayout = React.forwardRef(function FoundationLayout(props, ref) {
27
+ const { onFirstLoaded, onItemAdded, onItemRemoved, onItemResized, children, ...rest } = props;
28
+ const _innerRef = React.useRef(null);
29
+ const _onFirstLoadedRef = React.useRef(onFirstLoaded);
30
+ _onFirstLoadedRef.current = onFirstLoaded;
31
+ const _onItemAddedRef = React.useRef(onItemAdded);
32
+ _onItemAddedRef.current = onItemAdded;
33
+ const _onItemRemovedRef = React.useRef(onItemRemoved);
34
+ _onItemRemovedRef.current = onItemRemoved;
35
+ const _onItemResizedRef = React.useRef(onItemResized);
36
+ _onItemResizedRef.current = onItemResized;
37
+ React.useLayoutEffect(() => {
38
+ const el = _innerRef.current;
39
+ if (!el) return;
40
+ const _onFirstLoadedFn = (e) => _onFirstLoadedRef.current?.(e);
41
+ el.addEventListener('first-loaded', _onFirstLoadedFn);
42
+ const _onItemAddedFn = (e) => _onItemAddedRef.current?.(e);
43
+ el.addEventListener('item-added', _onItemAddedFn);
44
+ const _onItemRemovedFn = (e) => _onItemRemovedRef.current?.(e);
45
+ el.addEventListener('item-removed', _onItemRemovedFn);
46
+ const _onItemResizedFn = (e) => _onItemResizedRef.current?.(e);
47
+ el.addEventListener('item-resized', _onItemResizedFn);
48
+ return () => {
49
+ el.removeEventListener('first-loaded', _onFirstLoadedFn);
50
+ el.removeEventListener('item-added', _onItemAddedFn);
51
+ el.removeEventListener('item-removed', _onItemRemovedFn);
52
+ el.removeEventListener('item-resized', _onItemResizedFn);
53
+ };
54
+ }, []);
55
+ return React.createElement(customElements.getName(FoundationLayoutWC) ?? '%%prefix%%-layout', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
24
56
  });
25
57
 
26
- export const FoundationLayoutPopoutController = wrap(FoundationLayoutPopoutControllerWC);
58
+ export const FoundationLayoutPopoutController = React.forwardRef(function FoundationLayoutPopoutController(props, ref) {
59
+ const { children, ...rest } = props;
60
+ return React.createElement(customElements.getName(FoundationLayoutPopoutControllerWC) ?? 'foundation-layout-popout-controller', { ...rest, ref }, children);
61
+ });
27
62
 
28
- export const FoundationLayoutRegion = wrap(FoundationLayoutRegionWC);
63
+ export const FoundationLayoutRegion = React.forwardRef(function FoundationLayoutRegion(props, ref) {
64
+ const { children, ...rest } = props;
65
+ return React.createElement(customElements.getName(FoundationLayoutRegionWC) ?? '%%prefix%%-layout-region', { ...rest, ref }, children);
66
+ });
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-layout",
3
3
  "description": "Genesis Foundation UI App Layout",
4
- "version": "14.424.1",
4
+ "version": "14.425.0",
5
5
  "license": "SEE LICENSE IN license.txt",
6
6
  "main": "dist/esm/index.js",
7
7
  "types": "dist/foundation-layout.d.ts",
@@ -38,22 +38,22 @@
38
38
  }
39
39
  },
40
40
  "devDependencies": {
41
- "@genesislcap/foundation-testing": "14.424.1",
42
- "@genesislcap/genx": "14.424.1",
43
- "@genesislcap/rollup-builder": "14.424.1",
44
- "@genesislcap/ts-builder": "14.424.1",
45
- "@genesislcap/uvu-playwright-builder": "14.424.1",
46
- "@genesislcap/vite-builder": "14.424.1",
47
- "@genesislcap/webpack-builder": "14.424.1"
41
+ "@genesislcap/foundation-testing": "14.425.0",
42
+ "@genesislcap/genx": "14.425.0",
43
+ "@genesislcap/rollup-builder": "14.425.0",
44
+ "@genesislcap/ts-builder": "14.425.0",
45
+ "@genesislcap/uvu-playwright-builder": "14.425.0",
46
+ "@genesislcap/vite-builder": "14.425.0",
47
+ "@genesislcap/webpack-builder": "14.425.0"
48
48
  },
49
49
  "dependencies": {
50
50
  "@genesis-community/golden-layout": "^2.11.0",
51
- "@genesislcap/foundation-broadcast-channel": "14.424.1",
52
- "@genesislcap/foundation-comms": "14.424.1",
53
- "@genesislcap/foundation-events": "14.424.1",
54
- "@genesislcap/foundation-logger": "14.424.1",
55
- "@genesislcap/foundation-ui": "14.424.1",
56
- "@genesislcap/foundation-utils": "14.424.1",
51
+ "@genesislcap/foundation-broadcast-channel": "14.425.0",
52
+ "@genesislcap/foundation-comms": "14.425.0",
53
+ "@genesislcap/foundation-events": "14.425.0",
54
+ "@genesislcap/foundation-logger": "14.425.0",
55
+ "@genesislcap/foundation-ui": "14.425.0",
56
+ "@genesislcap/foundation-utils": "14.425.0",
57
57
  "@microsoft/fast-components": "2.30.6",
58
58
  "@microsoft/fast-element": "1.14.0",
59
59
  "@microsoft/fast-foundation": "2.50.0"
@@ -67,5 +67,5 @@
67
67
  "access": "public"
68
68
  },
69
69
  "customElements": "dist/custom-elements.json",
70
- "gitHead": "04bb18a6f0b26506a9d87ab252ce9e2329219a5e"
70
+ "gitHead": "c49bb94fbc3a74e84f18c7445398af116e1a58bb"
71
71
  }