@vuu-ui/vuu-layout 2.1.17 → 2.1.19-beta.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 (265) hide show
  1. package/package.json +14 -16
  2. package/types/dock-layout/DockLayout.d.ts +4 -4
  3. package/types/dock-layout/Drawer.d.ts +4 -4
  4. package/types/drag-drop/BoxModel.d.ts +7 -7
  5. package/types/flexbox/FlexboxLayout.d.ts +4 -4
  6. package/types/flexbox/Splitter.d.ts +1 -1
  7. package/types/layout-reducer/layoutUtils.d.ts +1 -1
  8. package/types/layout-reducer/remove-layout-element.d.ts +1 -1
  9. package/types/layout-reducer/replace-layout-element.d.ts +2 -2
  10. package/types/layout-reducer/resize-flex-children.d.ts +2 -2
  11. package/types/layout-view/useView.d.ts +1 -1
  12. package/types/placeholder/Placeholder.d.ts +4 -4
  13. package/types/responsive/overflowUtils.d.ts +2 -2
  14. package/types/stack/StackLayout.d.ts +4 -4
  15. package/types/tools/devtools-box/layout-configurator.d.ts +26 -26
  16. package/types/tools/devtools-tree/layout-tree-viewer.d.ts +2 -2
  17. package/types/utils/pathUtils.d.ts +1 -1
  18. package/cjs/Component.js +0 -14
  19. package/cjs/Component.js.map +0 -1
  20. package/cjs/LayoutContainer.css.js +0 -6
  21. package/cjs/LayoutContainer.css.js.map +0 -1
  22. package/cjs/LayoutContainer.js +0 -33
  23. package/cjs/LayoutContainer.js.map +0 -1
  24. package/cjs/dock-layout/DockLayout.css.js +0 -6
  25. package/cjs/dock-layout/DockLayout.css.js.map +0 -1
  26. package/cjs/dock-layout/DockLayout.js +0 -41
  27. package/cjs/dock-layout/DockLayout.js.map +0 -1
  28. package/cjs/dock-layout/Drawer.css.js +0 -6
  29. package/cjs/dock-layout/Drawer.css.js.map +0 -1
  30. package/cjs/dock-layout/Drawer.js +0 -95
  31. package/cjs/dock-layout/Drawer.js.map +0 -1
  32. package/cjs/drag-drop/BoxModel.js +0 -416
  33. package/cjs/drag-drop/BoxModel.js.map +0 -1
  34. package/cjs/drag-drop/DragState.js +0 -161
  35. package/cjs/drag-drop/DragState.js.map +0 -1
  36. package/cjs/drag-drop/Draggable.js +0 -192
  37. package/cjs/drag-drop/Draggable.js.map +0 -1
  38. package/cjs/drag-drop/DropTarget.js +0 -257
  39. package/cjs/drag-drop/DropTarget.js.map +0 -1
  40. package/cjs/drag-drop/DropTargetRenderer.js +0 -218
  41. package/cjs/drag-drop/DropTargetRenderer.js.map +0 -1
  42. package/cjs/flexbox/Flexbox.css.js +0 -6
  43. package/cjs/flexbox/Flexbox.css.js.map +0 -1
  44. package/cjs/flexbox/Flexbox.js +0 -69
  45. package/cjs/flexbox/Flexbox.js.map +0 -1
  46. package/cjs/flexbox/FlexboxLayout.js +0 -30
  47. package/cjs/flexbox/FlexboxLayout.js.map +0 -1
  48. package/cjs/flexbox/Splitter.css.js +0 -6
  49. package/cjs/flexbox/Splitter.css.js.map +0 -1
  50. package/cjs/flexbox/Splitter.js +0 -122
  51. package/cjs/flexbox/Splitter.js.map +0 -1
  52. package/cjs/flexbox/flexbox-utils.js +0 -95
  53. package/cjs/flexbox/flexbox-utils.js.map +0 -1
  54. package/cjs/flexbox/useSplitterResizing.js +0 -197
  55. package/cjs/flexbox/useSplitterResizing.js.map +0 -1
  56. package/cjs/index.js +0 -122
  57. package/cjs/index.js.map +0 -1
  58. package/cjs/layout-action.js +0 -24
  59. package/cjs/layout-action.js.map +0 -1
  60. package/cjs/layout-header/Header.css.js +0 -6
  61. package/cjs/layout-header/Header.css.js.map +0 -1
  62. package/cjs/layout-header/Header.js +0 -152
  63. package/cjs/layout-header/Header.js.map +0 -1
  64. package/cjs/layout-header/useHeader.js +0 -85
  65. package/cjs/layout-header/useHeader.js.map +0 -1
  66. package/cjs/layout-provider/LayoutProvider.js +0 -304
  67. package/cjs/layout-provider/LayoutProvider.js.map +0 -1
  68. package/cjs/layout-provider/LayoutProviderContext.js +0 -23
  69. package/cjs/layout-provider/LayoutProviderContext.js.map +0 -1
  70. package/cjs/layout-provider/useLayoutDragDrop.js +0 -177
  71. package/cjs/layout-provider/useLayoutDragDrop.js.map +0 -1
  72. package/cjs/layout-reducer/flexUtils.js +0 -227
  73. package/cjs/layout-reducer/flexUtils.js.map +0 -1
  74. package/cjs/layout-reducer/insert-layout-element.js +0 -286
  75. package/cjs/layout-reducer/insert-layout-element.js.map +0 -1
  76. package/cjs/layout-reducer/layout-reducer.js +0 -202
  77. package/cjs/layout-reducer/layout-reducer.js.map +0 -1
  78. package/cjs/layout-reducer/layoutTypes.js +0 -40
  79. package/cjs/layout-reducer/layoutTypes.js.map +0 -1
  80. package/cjs/layout-reducer/layoutUtils.js +0 -237
  81. package/cjs/layout-reducer/layoutUtils.js.map +0 -1
  82. package/cjs/layout-reducer/move-layout-element.js +0 -31
  83. package/cjs/layout-reducer/move-layout-element.js.map +0 -1
  84. package/cjs/layout-reducer/remove-layout-element.js +0 -237
  85. package/cjs/layout-reducer/remove-layout-element.js.map +0 -1
  86. package/cjs/layout-reducer/replace-layout-element.js +0 -96
  87. package/cjs/layout-reducer/replace-layout-element.js.map +0 -1
  88. package/cjs/layout-reducer/resize-flex-children.js +0 -62
  89. package/cjs/layout-reducer/resize-flex-children.js.map +0 -1
  90. package/cjs/layout-reducer/wrap-layout-element.js +0 -211
  91. package/cjs/layout-reducer/wrap-layout-element.js.map +0 -1
  92. package/cjs/layout-view/View.css.js +0 -6
  93. package/cjs/layout-view/View.css.js.map +0 -1
  94. package/cjs/layout-view/View.js +0 -160
  95. package/cjs/layout-view/View.js.map +0 -1
  96. package/cjs/layout-view/useView.js +0 -75
  97. package/cjs/layout-view/useView.js.map +0 -1
  98. package/cjs/layout-view/useViewBroadcastChannel.js +0 -35
  99. package/cjs/layout-view/useViewBroadcastChannel.js.map +0 -1
  100. package/cjs/layout-view/useViewResize.js +0 -42
  101. package/cjs/layout-view/useViewResize.js.map +0 -1
  102. package/cjs/layout-view-actions/ViewContext.js +0 -16
  103. package/cjs/layout-view-actions/ViewContext.js.map +0 -1
  104. package/cjs/layout-view-actions/useViewActionDispatcher.js +0 -112
  105. package/cjs/layout-view-actions/useViewActionDispatcher.js.map +0 -1
  106. package/cjs/layout-view-actions/useViewContributions.js +0 -33
  107. package/cjs/layout-view-actions/useViewContributions.js.map +0 -1
  108. package/cjs/palette/Palette.css.js +0 -6
  109. package/cjs/palette/Palette.css.js.map +0 -1
  110. package/cjs/palette/Palette.js +0 -115
  111. package/cjs/palette/Palette.js.map +0 -1
  112. package/cjs/placeholder/LayoutStartPanel.css.js +0 -6
  113. package/cjs/placeholder/LayoutStartPanel.css.js.map +0 -1
  114. package/cjs/placeholder/LayoutStartPanel.js +0 -56
  115. package/cjs/placeholder/LayoutStartPanel.js.map +0 -1
  116. package/cjs/placeholder/Placeholder.css.js +0 -6
  117. package/cjs/placeholder/Placeholder.css.js.map +0 -1
  118. package/cjs/placeholder/Placeholder.js +0 -34
  119. package/cjs/placeholder/Placeholder.js.map +0 -1
  120. package/cjs/responsive/useResizeObserver.js +0 -118
  121. package/cjs/responsive/useResizeObserver.js.map +0 -1
  122. package/cjs/responsive/utils.js +0 -34
  123. package/cjs/responsive/utils.js.map +0 -1
  124. package/cjs/stack/Stack.css.js +0 -6
  125. package/cjs/stack/Stack.css.js.map +0 -1
  126. package/cjs/stack/Stack.js +0 -150
  127. package/cjs/stack/Stack.js.map +0 -1
  128. package/cjs/stack/StackLayout.js +0 -116
  129. package/cjs/stack/StackLayout.js.map +0 -1
  130. package/cjs/use-persistent-state.js +0 -63
  131. package/cjs/use-persistent-state.js.map +0 -1
  132. package/cjs/utils/pathUtils.js +0 -293
  133. package/cjs/utils/pathUtils.js.map +0 -1
  134. package/cjs/utils/propUtils.js +0 -27
  135. package/cjs/utils/propUtils.js.map +0 -1
  136. package/cjs/utils/refUtils.js +0 -12
  137. package/cjs/utils/refUtils.js.map +0 -1
  138. package/cjs/utils/styleUtils.js +0 -15
  139. package/cjs/utils/styleUtils.js.map +0 -1
  140. package/cjs/utils/typeOf.js +0 -27
  141. package/cjs/utils/typeOf.js.map +0 -1
  142. package/esm/Component.js +0 -12
  143. package/esm/Component.js.map +0 -1
  144. package/esm/LayoutContainer.css.js +0 -4
  145. package/esm/LayoutContainer.css.js.map +0 -1
  146. package/esm/LayoutContainer.js +0 -31
  147. package/esm/LayoutContainer.js.map +0 -1
  148. package/esm/dock-layout/DockLayout.css.js +0 -4
  149. package/esm/dock-layout/DockLayout.css.js.map +0 -1
  150. package/esm/dock-layout/DockLayout.js +0 -39
  151. package/esm/dock-layout/DockLayout.js.map +0 -1
  152. package/esm/dock-layout/Drawer.css.js +0 -4
  153. package/esm/dock-layout/Drawer.css.js.map +0 -1
  154. package/esm/dock-layout/Drawer.js +0 -93
  155. package/esm/dock-layout/Drawer.js.map +0 -1
  156. package/esm/drag-drop/BoxModel.js +0 -409
  157. package/esm/drag-drop/BoxModel.js.map +0 -1
  158. package/esm/drag-drop/DragState.js +0 -159
  159. package/esm/drag-drop/DragState.js.map +0 -1
  160. package/esm/drag-drop/Draggable.js +0 -190
  161. package/esm/drag-drop/Draggable.js.map +0 -1
  162. package/esm/drag-drop/DropTarget.js +0 -253
  163. package/esm/drag-drop/DropTarget.js.map +0 -1
  164. package/esm/drag-drop/DropTargetRenderer.js +0 -216
  165. package/esm/drag-drop/DropTargetRenderer.js.map +0 -1
  166. package/esm/flexbox/Flexbox.css.js +0 -4
  167. package/esm/flexbox/Flexbox.css.js.map +0 -1
  168. package/esm/flexbox/Flexbox.js +0 -67
  169. package/esm/flexbox/Flexbox.js.map +0 -1
  170. package/esm/flexbox/FlexboxLayout.js +0 -28
  171. package/esm/flexbox/FlexboxLayout.js.map +0 -1
  172. package/esm/flexbox/Splitter.css.js +0 -4
  173. package/esm/flexbox/Splitter.css.js.map +0 -1
  174. package/esm/flexbox/Splitter.js +0 -120
  175. package/esm/flexbox/Splitter.js.map +0 -1
  176. package/esm/flexbox/flexbox-utils.js +0 -89
  177. package/esm/flexbox/flexbox-utils.js.map +0 -1
  178. package/esm/flexbox/useSplitterResizing.js +0 -195
  179. package/esm/flexbox/useSplitterResizing.js.map +0 -1
  180. package/esm/index.js +0 -33
  181. package/esm/index.js.map +0 -1
  182. package/esm/layout-action.js +0 -22
  183. package/esm/layout-action.js.map +0 -1
  184. package/esm/layout-header/Header.css.js +0 -4
  185. package/esm/layout-header/Header.css.js.map +0 -1
  186. package/esm/layout-header/Header.js +0 -150
  187. package/esm/layout-header/Header.js.map +0 -1
  188. package/esm/layout-header/useHeader.js +0 -83
  189. package/esm/layout-header/useHeader.js.map +0 -1
  190. package/esm/layout-provider/LayoutProvider.js +0 -297
  191. package/esm/layout-provider/LayoutProvider.js.map +0 -1
  192. package/esm/layout-provider/LayoutProviderContext.js +0 -20
  193. package/esm/layout-provider/LayoutProviderContext.js.map +0 -1
  194. package/esm/layout-provider/useLayoutDragDrop.js +0 -175
  195. package/esm/layout-provider/useLayoutDragDrop.js.map +0 -1
  196. package/esm/layout-reducer/flexUtils.js +0 -218
  197. package/esm/layout-reducer/flexUtils.js.map +0 -1
  198. package/esm/layout-reducer/insert-layout-element.js +0 -282
  199. package/esm/layout-reducer/insert-layout-element.js.map +0 -1
  200. package/esm/layout-reducer/layout-reducer.js +0 -200
  201. package/esm/layout-reducer/layout-reducer.js.map +0 -1
  202. package/esm/layout-reducer/layoutTypes.js +0 -36
  203. package/esm/layout-reducer/layoutTypes.js.map +0 -1
  204. package/esm/layout-reducer/layoutUtils.js +0 -226
  205. package/esm/layout-reducer/layoutUtils.js.map +0 -1
  206. package/esm/layout-reducer/move-layout-element.js +0 -29
  207. package/esm/layout-reducer/move-layout-element.js.map +0 -1
  208. package/esm/layout-reducer/remove-layout-element.js +0 -235
  209. package/esm/layout-reducer/remove-layout-element.js.map +0 -1
  210. package/esm/layout-reducer/replace-layout-element.js +0 -92
  211. package/esm/layout-reducer/replace-layout-element.js.map +0 -1
  212. package/esm/layout-reducer/resize-flex-children.js +0 -59
  213. package/esm/layout-reducer/resize-flex-children.js.map +0 -1
  214. package/esm/layout-reducer/wrap-layout-element.js +0 -209
  215. package/esm/layout-reducer/wrap-layout-element.js.map +0 -1
  216. package/esm/layout-view/View.css.js +0 -4
  217. package/esm/layout-view/View.css.js.map +0 -1
  218. package/esm/layout-view/View.js +0 -158
  219. package/esm/layout-view/View.js.map +0 -1
  220. package/esm/layout-view/useView.js +0 -73
  221. package/esm/layout-view/useView.js.map +0 -1
  222. package/esm/layout-view/useViewBroadcastChannel.js +0 -33
  223. package/esm/layout-view/useViewBroadcastChannel.js.map +0 -1
  224. package/esm/layout-view/useViewResize.js +0 -40
  225. package/esm/layout-view/useViewResize.js.map +0 -1
  226. package/esm/layout-view-actions/ViewContext.js +0 -12
  227. package/esm/layout-view-actions/ViewContext.js.map +0 -1
  228. package/esm/layout-view-actions/useViewActionDispatcher.js +0 -110
  229. package/esm/layout-view-actions/useViewActionDispatcher.js.map +0 -1
  230. package/esm/layout-view-actions/useViewContributions.js +0 -31
  231. package/esm/layout-view-actions/useViewContributions.js.map +0 -1
  232. package/esm/palette/Palette.css.js +0 -4
  233. package/esm/palette/Palette.css.js.map +0 -1
  234. package/esm/palette/Palette.js +0 -112
  235. package/esm/palette/Palette.js.map +0 -1
  236. package/esm/placeholder/LayoutStartPanel.css.js +0 -4
  237. package/esm/placeholder/LayoutStartPanel.css.js.map +0 -1
  238. package/esm/placeholder/LayoutStartPanel.js +0 -54
  239. package/esm/placeholder/LayoutStartPanel.js.map +0 -1
  240. package/esm/placeholder/Placeholder.css.js +0 -4
  241. package/esm/placeholder/Placeholder.css.js.map +0 -1
  242. package/esm/placeholder/Placeholder.js +0 -32
  243. package/esm/placeholder/Placeholder.js.map +0 -1
  244. package/esm/responsive/useResizeObserver.js +0 -112
  245. package/esm/responsive/useResizeObserver.js.map +0 -1
  246. package/esm/responsive/utils.js +0 -31
  247. package/esm/responsive/utils.js.map +0 -1
  248. package/esm/stack/Stack.css.js +0 -4
  249. package/esm/stack/Stack.css.js.map +0 -1
  250. package/esm/stack/Stack.js +0 -148
  251. package/esm/stack/Stack.js.map +0 -1
  252. package/esm/stack/StackLayout.js +0 -114
  253. package/esm/stack/StackLayout.js.map +0 -1
  254. package/esm/use-persistent-state.js +0 -58
  255. package/esm/use-persistent-state.js.map +0 -1
  256. package/esm/utils/pathUtils.js +0 -280
  257. package/esm/utils/pathUtils.js.map +0 -1
  258. package/esm/utils/propUtils.js +0 -23
  259. package/esm/utils/propUtils.js.map +0 -1
  260. package/esm/utils/refUtils.js +0 -10
  261. package/esm/utils/refUtils.js.map +0 -1
  262. package/esm/utils/styleUtils.js +0 -13
  263. package/esm/utils/styleUtils.js.map +0 -1
  264. package/esm/utils/typeOf.js +0 -23
  265. package/esm/utils/typeOf.js.map +0 -1
package/package.json CHANGED
@@ -1,24 +1,25 @@
1
1
  {
2
- "version": "2.1.17",
2
+ "version": "2.1.19-beta.1",
3
3
  "description": "VUU Layout Components",
4
+ "type": "module",
4
5
  "author": "heswell",
5
6
  "license": "Apache-2.0",
6
7
  "types": "types/index.d.ts",
7
8
  "devDependencies": {
8
- "@vuu-ui/vuu-data-types": "2.1.17",
9
- "@vuu-ui/vuu-filter-types": "2.1.17"
9
+ "@vuu-ui/vuu-data-types": "2.1.19-beta.1",
10
+ "@vuu-ui/vuu-filter-types": "2.1.19-beta.1"
10
11
  },
11
12
  "dependencies": {
12
13
  "@salt-ds/core": "1.54.1",
13
14
  "@salt-ds/styles": "0.2.1",
14
15
  "@salt-ds/window": "0.1.1",
15
- "@vuu-ui/vuu-data-react": "2.1.17",
16
- "@vuu-ui/vuu-datatable": "2.1.17",
17
- "@vuu-ui/vuu-filters": "2.1.17",
18
- "@vuu-ui/vuu-popups": "2.1.17",
19
- "@vuu-ui/vuu-table": "2.1.17",
20
- "@vuu-ui/vuu-ui-controls": "2.1.17",
21
- "@vuu-ui/vuu-utils": "2.1.17"
16
+ "@vuu-ui/vuu-data-react": "2.1.19-beta.1",
17
+ "@vuu-ui/vuu-datatable": "2.1.19-beta.1",
18
+ "@vuu-ui/vuu-filters": "2.1.19-beta.1",
19
+ "@vuu-ui/vuu-popups": "2.1.19-beta.1",
20
+ "@vuu-ui/vuu-table": "2.1.19-beta.1",
21
+ "@vuu-ui/vuu-ui-controls": "2.1.19-beta.1",
22
+ "@vuu-ui/vuu-utils": "2.1.19-beta.1"
22
23
  },
23
24
  "peerDependencies": {
24
25
  "clsx": "^2.0.0",
@@ -34,13 +35,10 @@
34
35
  ],
35
36
  "exports": {
36
37
  ".": {
37
- "require": "./cjs/index.js",
38
- "import": "./esm/index.js",
38
+ "import": "./index.js",
39
39
  "types": "./types/index.d.ts"
40
40
  }
41
41
  },
42
- "main": "cjs/index.js",
43
- "module": "esm/index.js",
44
- "name": "@vuu-ui/vuu-layout",
45
- "type": "module"
42
+ "module": "index.js",
43
+ "name": "@vuu-ui/vuu-layout"
46
44
  }
@@ -1,7 +1,7 @@
1
1
  import { HTMLAttributes } from "react";
2
2
  export type DockLayoutProps = HTMLAttributes<HTMLDivElement>;
3
- declare const DockLayout: {
4
- (props: DockLayoutProps): import("react/jsx-runtime").JSX.Element;
5
- displayName: string;
6
- };
3
+ declare function DockLayout(props: DockLayoutProps): import("react/jsx-runtime").JSX.Element;
4
+ declare namespace DockLayout {
5
+ var displayName: string;
6
+ }
7
7
  export default DockLayout;
@@ -10,8 +10,8 @@ export interface DrawerProps extends HTMLAttributes<HTMLDivElement> {
10
10
  sizeClosed?: number;
11
11
  toggleButton?: "start" | "end";
12
12
  }
13
- declare const Drawer: {
14
- ({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
15
- displayName: string;
16
- };
13
+ declare function Drawer({ children, className: classNameProp, clickToOpen, defaultOpen, sizeOpen, sizeClosed, style: styleProp, open: openProp, position, inline, onClick, peekaboo, toggleButton, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
14
+ declare namespace Drawer {
15
+ var displayName: string;
16
+ }
17
17
  export default Drawer;
@@ -18,7 +18,7 @@ export declare const Position: Readonly<{
18
18
  North: Readonly<{
19
19
  offset: number;
20
20
  valueOf: () => number;
21
- toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
21
+ toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
22
22
  North: boolean;
23
23
  South: boolean;
24
24
  East: boolean;
@@ -34,7 +34,7 @@ export declare const Position: Readonly<{
34
34
  East: Readonly<{
35
35
  offset: number;
36
36
  valueOf: () => number;
37
- toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
37
+ toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
38
38
  North: boolean;
39
39
  South: boolean;
40
40
  East: boolean;
@@ -50,7 +50,7 @@ export declare const Position: Readonly<{
50
50
  South: Readonly<{
51
51
  offset: number;
52
52
  valueOf: () => number;
53
- toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
53
+ toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
54
54
  North: boolean;
55
55
  South: boolean;
56
56
  East: boolean;
@@ -66,7 +66,7 @@ export declare const Position: Readonly<{
66
66
  West: Readonly<{
67
67
  offset: number;
68
68
  valueOf: () => number;
69
- toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
69
+ toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
70
70
  North: boolean;
71
71
  South: boolean;
72
72
  East: boolean;
@@ -82,7 +82,7 @@ export declare const Position: Readonly<{
82
82
  Header: Readonly<{
83
83
  offset: number;
84
84
  valueOf: () => number;
85
- toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
85
+ toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
86
86
  North: boolean;
87
87
  South: boolean;
88
88
  East: boolean;
@@ -98,7 +98,7 @@ export declare const Position: Readonly<{
98
98
  Centre: Readonly<{
99
99
  offset: number;
100
100
  valueOf: () => number;
101
- toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
101
+ toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
102
102
  North: boolean;
103
103
  South: boolean;
104
104
  East: boolean;
@@ -114,7 +114,7 @@ export declare const Position: Readonly<{
114
114
  Absolute: Readonly<{
115
115
  offset: number;
116
116
  valueOf: () => number;
117
- toString: () => "north" | "south" | "east" | "west" | "header" | "centre" | "absolute";
117
+ toString: () => "absolute" | "centre" | "east" | "header" | "north" | "south" | "west";
118
118
  North: boolean;
119
119
  South: boolean;
120
120
  East: boolean;
@@ -1,5 +1,5 @@
1
1
  import { FlexboxLayoutProps } from "./flexboxTypes";
2
- export declare const FlexboxLayout: {
3
- (props: FlexboxLayoutProps): import("react/jsx-runtime").JSX.Element;
4
- displayName: string;
5
- };
2
+ export declare function FlexboxLayout(props: FlexboxLayoutProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare namespace FlexboxLayout {
4
+ var displayName: string;
5
+ }
@@ -9,4 +9,4 @@ export interface SplitterProps extends Omit<HTMLAttributes<HTMLDivElement>, "onD
9
9
  onDrag: SplitterDragHandler;
10
10
  onDragEnd: SplitterDragEndHandler;
11
11
  }
12
- export declare const Splitter: React.NamedExoticComponent<SplitterProps>;
12
+ export declare const Splitter: React.MemoExoticComponent<({ column, index, onDrag, onDragEnd, onDragStart, style, }: SplitterProps) => import("react/jsx-runtime").JSX.Element>;
@@ -7,7 +7,7 @@ interface ComponentWithId {
7
7
  [key: string]: unknown;
8
8
  }
9
9
  export declare const getManagedDimension: (style: CSSProperties) => [dimension, dimension];
10
- export declare const applyLayoutProps: (component: ReactElement, path?: string) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
10
+ export declare const applyLayoutProps: (component: ReactElement, path?: string) => ReactElement<unknown, string | React.JSXElementConstructor<any>>;
11
11
  export interface LayoutProps extends ComponentWithId {
12
12
  active?: number;
13
13
  "data-path"?: string;
@@ -1,3 +1,3 @@
1
1
  import React, { ReactElement } from "react";
2
2
  import { RemoveAction } from "./layoutTypes";
3
- export declare function removeChild(layoutRoot: ReactElement, { path }: RemoveAction): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
3
+ export declare function removeChild(layoutRoot: ReactElement, { path }: RemoveAction): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
@@ -1,6 +1,6 @@
1
1
  import React, { ReactElement } from "react";
2
2
  import { ReplaceAction } from "./layoutTypes";
3
3
  import { LayoutProps } from "./layoutUtils";
4
- export declare function replaceChild(model: ReactElement, { target, replacement }: ReplaceAction): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
5
- export declare function _replaceChild(model: ReactElement, child: ReactElement, replacement: ReactElement<LayoutProps>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
4
+ export declare function replaceChild(model: ReactElement, { target, replacement }: ReplaceAction): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
5
+ export declare function _replaceChild(model: ReactElement, child: ReactElement, replacement: ReactElement<LayoutProps>): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
6
6
  export declare function swapChild(model: ReactElement, child: ReactElement, replacement: ReactElement, op?: "collapse" | "expand"): ReactElement;
@@ -1,4 +1,4 @@
1
1
  import React, { ReactElement } from "react";
2
2
  import { LayoutResizeAction, SplitterResizeAction } from "./layoutTypes";
3
- export declare function resizeFlexChild(layoutRoot: ReactElement, { path, size }: LayoutResizeAction): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
4
- export declare function resizeFlexChildren(layoutRoot: ReactElement, { path, sizes }: SplitterResizeAction): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
3
+ export declare function resizeFlexChild(layoutRoot: ReactElement, { path, size }: LayoutResizeAction): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
4
+ export declare function resizeFlexChildren(layoutRoot: ReactElement, { path, sizes }: SplitterResizeAction): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
@@ -9,7 +9,7 @@ export interface ViewHookProps {
9
9
  }
10
10
  export declare const useView: ({ id, rootRef, path, dropTargets, title: titleProp, }: ViewHookProps) => {
11
11
  contributions: import("./viewTypes").Contribution[] | undefined;
12
- dispatchViewAction: import("../layout-view-actions/ViewContext").ViewDispatch;
12
+ dispatchViewAction: import("..").ViewDispatch;
13
13
  load: (key?: string) => any;
14
14
  onConfigChange: ConfigChangeHandler;
15
15
  onEditTitle: (title: string) => void;
@@ -10,7 +10,7 @@ export interface PlaceholderProps extends ViewProps {
10
10
  */
11
11
  shim?: boolean;
12
12
  }
13
- export declare const Placeholder: {
14
- ({ className: classNameProp, showStartMenu, ...viewProps }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
15
- displayName: string;
16
- };
13
+ export declare function Placeholder({ className: classNameProp, showStartMenu, ...viewProps }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare namespace Placeholder {
15
+ var displayName: string;
16
+ }
@@ -1,2 +1,2 @@
1
- export function getOverflowedItems(containerRef: any, height?: number): any[][];
2
- export function findFirstOverflow(elements: any, height: any): number;
1
+ export declare const getOverflowedItems: (containerRef: any, height?: number) => any[][];
2
+ export declare const findFirstOverflow: (elements: any, height: any) => number;
@@ -1,5 +1,5 @@
1
1
  import { StackProps } from "./stackTypes";
2
- export declare const StackLayout: {
3
- (props: StackProps): import("react/jsx-runtime").JSX.Element;
4
- displayName: string;
5
- };
2
+ export declare function StackLayout(props: StackProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare namespace StackLayout {
4
+ var displayName: string;
5
+ }
@@ -1,31 +1,31 @@
1
- export function XXXnormalizeStyles(layoutStyle?: {}, visualStyle?: {}): {};
2
- export namespace MARGIN_STYLES {
3
- let margin: boolean;
4
- let marginTop: boolean;
5
- let marginRight: boolean;
6
- let marginBottom: boolean;
7
- let marginLeft: boolean;
8
- }
9
- export namespace PADDING_STYLES {
10
- let padding: boolean;
11
- let paddingTop: boolean;
12
- let paddingRight: boolean;
13
- let paddingBottom: boolean;
14
- let paddingLeft: boolean;
15
- }
16
- export namespace BORDER_STYLES {
17
- let border: boolean;
18
- let borderColor: boolean;
19
- let borderWidth: boolean;
20
- let borderTopWidth: boolean;
21
- let borderRightWidth: boolean;
22
- let borderBottomWidth: boolean;
23
- let borderLeftWidth: boolean;
24
- }
25
- export function LayoutConfigurator({ height, managedStyle, onChange, style, width, }: {
1
+ export declare const MARGIN_STYLES: {
2
+ margin: boolean;
3
+ marginTop: boolean;
4
+ marginRight: boolean;
5
+ marginBottom: boolean;
6
+ marginLeft: boolean;
7
+ };
8
+ export declare const PADDING_STYLES: {
9
+ padding: boolean;
10
+ paddingTop: boolean;
11
+ paddingRight: boolean;
12
+ paddingBottom: boolean;
13
+ paddingLeft: boolean;
14
+ };
15
+ export declare const BORDER_STYLES: {
16
+ border: boolean;
17
+ borderColor: boolean;
18
+ borderWidth: boolean;
19
+ borderTopWidth: boolean;
20
+ borderRightWidth: boolean;
21
+ borderBottomWidth: boolean;
22
+ borderLeftWidth: boolean;
23
+ };
24
+ export declare const LayoutConfigurator: ({ height, managedStyle, onChange, style, width, }: {
26
25
  height: any;
27
26
  managedStyle: any;
28
27
  onChange: any;
29
28
  style: any;
30
29
  width: any;
31
- }): import("react/jsx-runtime").JSX.Element;
30
+ }) => import("react/jsx-runtime").JSX.Element;
31
+ export declare function XXXnormalizeStyles(layoutStyle?: {}, visualStyle?: {}): {};
@@ -1,5 +1,5 @@
1
- export function LayoutTreeViewer({ layout, onSelect: _, style }: {
1
+ export declare const LayoutTreeViewer: ({ layout, onSelect: _, style }: {
2
2
  layout: any;
3
3
  onSelect: any;
4
4
  style: any;
5
- }): import("react/jsx-runtime").JSX.Element;
5
+ }) => import("react/jsx-runtime").JSX.Element;
@@ -17,7 +17,7 @@ export declare function followPathToParent(source: ReactElement, path: string):
17
17
  export declare function findTarget(source: LayoutModel | undefined, test: (props: any) => boolean): LayoutModel | undefined;
18
18
  export declare function containerOf(source: LayoutModel, target: LayoutModel): LayoutModel | null;
19
19
  export declare const getChild: (children: ReactElement[], idx: number) => ReactElement | undefined;
20
- export declare function followPathToComponent(component: ReactElement, path: string): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
20
+ export declare function followPathToComponent(component: ReactElement, path: string): ReactElement<unknown, string | React.JSXElementConstructor<any>> | undefined;
21
21
  export declare function followPath(source: LayoutModel, path: string): LayoutModel | undefined;
22
22
  export declare function followPath(source: ReactElement, path: string, throwIfNotFound: true): ReactElement;
23
23
  export declare function nextLeaf(root: ReactElement, path: string): any;
package/cjs/Component.js DELETED
@@ -1,14 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var React = require('react');
5
- var vuuUtils = require('@vuu-ui/vuu-utils');
6
-
7
- const Component = React.forwardRef(function Component2({ resizeable, ...props }, ref) {
8
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: "Component", ref });
9
- });
10
- Component.displayName = "Component";
11
- vuuUtils.registerComponent("Component", Component, "component");
12
-
13
- module.exports = Component;
14
- //# sourceMappingURL=Component.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Component.js","sources":["../../../packages/vuu-layout/src/Component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\n\nexport interface ComponentProps extends HTMLAttributes<HTMLDivElement> {\n resizeable?: boolean;\n}\n\nconst Component = forwardRef(function Component(\n { resizeable, ...props }: ComponentProps,\n ref: React.ForwardedRef<HTMLDivElement>,\n) {\n return <div {...props} className=\"Component\" ref={ref} />;\n}) as React.FunctionComponent<ComponentProps>;\nComponent.displayName = \"Component\";\n\nexport default Component;\n\nregisterComponent(\"Component\", Component, \"component\");\n"],"names":["forwardRef","Component","registerComponent"],"mappings":";;;;;;AAOM,MAAA,SAAA,GAAYA,iBAAW,SAASC,UAAAA,CACpC,EAAE,UAAY,EAAA,GAAG,KAAM,EAAA,EACvB,GACA,EAAA;AACA,EAAA,sCAAQ,KAAK,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAU,aAAY,GAAU,EAAA,CAAA;AACzD,CAAC;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;AAIxBC,0BAAkB,CAAA,WAAA,EAAa,WAAW,WAAW,CAAA;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var layoutContainerCss = ".vuuLayoutContainer {\n display: inline-block;\n outline: none;\n}\n\n[data-dragging=\"true\"] {\n position: absolute !important;\n z-index: 100;\n}\n\n.vuuSimpleDraggableWrapper {\n background-color: white;\n box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.vuuSimpleDraggableWrapper > * {\n height: 100%;\n width: 100%;\n}\n";
4
-
5
- module.exports = layoutContainerCss;
6
- //# sourceMappingURL=LayoutContainer.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LayoutContainer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,33 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var vuuUtils = require('@vuu-ui/vuu-utils');
5
- var styles = require('@salt-ds/styles');
6
- var window = require('@salt-ds/window');
7
- var cx = require('clsx');
8
- var React = require('react');
9
- var LayoutContainer$1 = require('./LayoutContainer.css.js');
10
-
11
- const LayoutContainer = React.forwardRef(function LayoutContainer2({
12
- children,
13
- className: classNameProp,
14
- dropTarget,
15
- resizeable: _,
16
- // ignore, its just a marker used by the layout system
17
- ...htmlAttributes
18
- }, forwardedRef) {
19
- const targetWindow = window.useWindow();
20
- styles.useComponentCssInjection({
21
- testId: "vuu-layout-container",
22
- css: LayoutContainer$1,
23
- window: targetWindow
24
- });
25
- const className = cx("vuuLayoutContainer", classNameProp);
26
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ref: forwardedRef, ...htmlAttributes, children });
27
- });
28
- const componentName = "LayoutContainer";
29
- LayoutContainer.displayName = componentName;
30
- vuuUtils.registerComponent(componentName, LayoutContainer, "container");
31
-
32
- exports.LayoutContainer = LayoutContainer;
33
- //# sourceMappingURL=LayoutContainer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LayoutContainer.js","sources":["../../../packages/vuu-layout/src/LayoutContainer.tsx"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\n\nimport layoutContainerCss from \"./LayoutContainer.css\";\n\nexport interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {\n dropTarget?: boolean;\n resizeable?: boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const LayoutContainer = forwardRef(function LayoutContainer(\n {\n children,\n className: classNameProp,\n dropTarget,\n resizeable: _, // ignore, its just a marker used by the layout system\n ...htmlAttributes\n }: LayoutContainerProps,\n forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-layout-container\",\n css: layoutContainerCss,\n window: targetWindow,\n });\n\n const className = cx(\"vuuLayoutContainer\", classNameProp);\n return (\n <div className={className} ref={forwardedRef} {...htmlAttributes}>\n {children}\n </div>\n );\n});\n\nconst componentName = \"LayoutContainer\";\n\nLayoutContainer.displayName = componentName;\n\nregisterComponent(componentName, LayoutContainer, \"container\");\n"],"names":["forwardRef","LayoutContainer","useWindow","useComponentCssInjection","layoutContainerCss","registerComponent"],"mappings":";;;;;;;;;;AAaa,MAAA,eAAA,GAAkBA,gBAAW,CAAA,SAASC,gBACjD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,UAAA;AAAA,EACA,UAAY,EAAA,CAAA;AAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,oBAAA,EAAsB,aAAa,CAAA;AACxD,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAsB,KAAK,YAAe,EAAA,GAAG,gBAC/C,QACH,EAAA,CAAA;AAEJ,CAAC;AAED,MAAM,aAAgB,GAAA,iBAAA;AAEtB,eAAA,CAAgB,WAAc,GAAA,aAAA;AAE9BC,0BAAkB,CAAA,aAAA,EAAe,iBAAiB,WAAW,CAAA;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var dockLayoutCss = ".vuuDockLayout {\n --chest-bg: var(--hw-chest-bg, inherit);\n --drawer-bg: var(--hw-drawer-bg, inherit);\n --drawer-size: var(--hw-drawer-size, 200px);\n --drawer-peek-size: var(--hw-drawer-peek-size, 32px);\n --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);\n background-color: var(--chest-bg);\n display: flex;\n}\n\n.vuuDockLayout-horizontal {\n flex-direction: row;\n}\n\n.vuuDockLayout-vertical {\n flex-direction: column;\n}\n\n.vuuDockLayout-content {\n background-color: var(--chest-bg);\n flex-grow: 1;\n flex-shrink: 1;\n overflow: hidden;\n /* position: relative; */\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.vuuDockLayout-horizontal .vuuDockLayout-content {\n flex-basis: 100%;\n}\n\n.vuuDockLayout-vertical .vuuDockLayout-content {\n flex-basis: 100%;\n}\n";
4
-
5
- module.exports = dockLayoutCss;
6
- //# sourceMappingURL=DockLayout.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DockLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,41 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var vuuUtils = require('@vuu-ui/vuu-utils');
5
- var cx = require('clsx');
6
- var styles = require('@salt-ds/styles');
7
- var window = require('@salt-ds/window');
8
- var React = require('react');
9
- var Drawer = require('./Drawer.js');
10
- var DockLayout$1 = require('./DockLayout.css.js');
11
-
12
- const isDrawer = (component) => component.type === Drawer;
13
- const isVertical = (element) => (
14
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
- element.props.position && // eslint-disable-next-line @typescript-eslint/no-explicit-any
16
- element.props.position.match(/top|bottom/)
17
- );
18
- const classBase = "vuuDockLayout";
19
- const DockLayout = (props) => {
20
- const targetWindow = window.useWindow();
21
- styles.useComponentCssInjection({
22
- testId: "vuu-dock-layput",
23
- css: DockLayout$1,
24
- window: targetWindow
25
- });
26
- const { children, className: classNameProp, id, style } = props;
27
- const childElements = React.useMemo(() => vuuUtils.asReactElements(children), [children]);
28
- const [drawers, content] = vuuUtils.partition(childElements, isDrawer);
29
- const [verticalDrawers, horizontalDrawers] = vuuUtils.partition(drawers, isVertical);
30
- const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
31
- const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
32
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, id, style, children: [
33
- drawers,
34
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: content })
35
- ] });
36
- };
37
- DockLayout.displayName = "DockLayout";
38
- vuuUtils.registerComponent("DockLayout", DockLayout, "container");
39
-
40
- module.exports = DockLayout;
41
- //# sourceMappingURL=DockLayout.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DockLayout.js","sources":["../../../../packages/vuu-layout/src/dock-layout/DockLayout.tsx"],"sourcesContent":["import {\n asReactElements,\n partition,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactElement, useMemo } from \"react\";\nimport Drawer from \"./Drawer\";\n\nimport dockLayoutCss from \"./DockLayout.css\";\n\nconst isDrawer = (component: ReactElement) => component.type === Drawer;\nconst isVertical = (element: ReactElement) =>\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (element.props as any).position &&\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (element.props as any).position.match(/top|bottom/);\n\nexport type DockLayoutProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuDockLayout\";\n\nconst DockLayout = (props: DockLayoutProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dock-layput\",\n css: dockLayoutCss,\n window: targetWindow,\n });\n\n const { children, className: classNameProp, id, style } = props;\n const childElements = useMemo(() => asReactElements(children), [children]);\n\n const [drawers, content] = partition(childElements, isDrawer);\n const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);\n const orientation =\n verticalDrawers.length === 0\n ? \"horizontal\"\n : horizontalDrawers.length === 0\n ? \"vertical\"\n : \"both\";\n\n const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n return (\n <div className={className} id={id} style={style}>\n {drawers}\n <div className={`${classBase}-content`}>{content}</div>\n </div>\n );\n};\nDockLayout.displayName = \"DockLayout\";\n\nexport default DockLayout;\n\nregisterComponent(\"DockLayout\", DockLayout, \"container\");\n"],"names":["useWindow","useComponentCssInjection","dockLayoutCss","useMemo","asReactElements","partition","jsxs","registerComponent"],"mappings":";;;;;;;;;;;AAaA,MAAM,QAAW,GAAA,CAAC,SAA4B,KAAA,SAAA,CAAU,IAAS,KAAA,MAAA;AACjE,MAAM,aAAa,CAAC,OAAA;AAAA;AAAA,EAEjB,QAAQ,KAAc,CAAA,QAAA;AAAA,EAEtB,OAAQ,CAAA,KAAA,CAAc,QAAS,CAAA,KAAA,CAAM,YAAY;AAAA,CAAA;AAIpD,MAAM,SAAY,GAAA,eAAA;AAEZ,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AAC7C,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,aAAe,EAAA,EAAA,EAAI,OAAU,GAAA,KAAA;AAC1D,EAAM,MAAA,aAAA,GAAgBC,cAAQ,MAAMC,wBAAA,CAAgB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAEzE,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAAC,kBAAA,CAAU,eAAe,QAAQ,CAAA;AAC5D,EAAA,MAAM,CAAC,eAAiB,EAAA,iBAAiB,CAAI,GAAAA,kBAAA,CAAU,SAAS,UAAU,CAAA;AAC1E,EAAM,MAAA,WAAA,GACJ,gBAAgB,MAAW,KAAA,CAAA,GACvB,eACA,iBAAkB,CAAA,MAAA,KAAW,IAC3B,UACA,GAAA,MAAA;AAER,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA,aAAA,EAAe,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAE5E,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAsB,EAAA,EAAA,EAAQ,KAChC,EAAA,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,mCACA,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA;AAAA,GACnD,EAAA,CAAA;AAEJ;AACA,UAAA,CAAW,WAAc,GAAA,YAAA;AAIzBC,0BAAkB,CAAA,YAAA,EAAc,YAAY,WAAW,CAAA;;;;"}
@@ -1,6 +0,0 @@
1
- 'use strict';
2
-
3
- var drawerCss = ".vuuDrawer {\n --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);\n --vuu-close-icon-svg: var(--svg-chevron-double-right);\n\n transition: flex-basis;\n transition-duration: var(--drawer-transition-duration);\n position: relative;\n z-index: 1;\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n min-width: 0;\n min-height: 0;\n display: flex;\n}\n\n.vuuDrawer-peekaboo {\n flex-basis: var(--drawer-peek-size);\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.vuuDrawer-inline.vuuDrawer-open {\n flex-basis: var(--drawer-size);\n flex-grow: 0;\n flex-shrink: 0;\n}\n\n.vuuDrawer-liner {\n background-color: var(--drawer-bg);\n overflow: hidden;\n position: relative;\n}\n\n.vuuDrawer-content {\n height: 100%;\n overflow: hidden;\n position: absolute;\n top: 0;\n right: var(--drawer-peek-size);\n transition: right;\n transition-duration: var(--drawer-transition-duration);\n width: 100%;\n flex: 1 1 100%;\n}\n\n.vuuDrawer-open .vuuDrawer-content {\n right: 0;\n}\n\n/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {\n display: none;\n} */\n\n.vuuDrawer-left {\n border-right: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-right {\n border-left: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-top {\n border-bottom: var(--drawer-leading-edge-border);\n}\n.vuuDrawer-bottom {\n border-top: var(--drawer-leading-edge-border);\n}\n\n.vuuDrawer-left .vuuDrawer-liner,\n.vuuDrawer-right .vuuDrawer-liner {\n height: 100%;\n transition: width;\n}\n\n.vuuDrawer-top .vuuDrawer-liner,\n.vuuDrawer-bottom .vuuDrawer-liner {\n width: 100%;\n transition: height;\n}\n\n.vuuDrawer-inline .vuuDrawer-liner {\n width: 100%;\n height: 100%;\n}\n\n.vuuDrawer-over .vuuDrawer-liner {\n position: absolute;\n transition-duration: 0.4s;\n}\n\n.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {\n top: 0;\n left: 0;\n width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {\n top: 0;\n right: 0;\n width: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {\n height: 0;\n top: 0;\n left: 0;\n}\n\n.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {\n bottom: 0;\n height: 0;\n left: 0;\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n width: var(--drawer-peek-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {\n height: var(--drawer-peek-size);\n}\n\n.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n width: var(--drawer-size);\n}\n\n.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,\n.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {\n height: var(--drawer-size);\n}\n\n.vuuDrawer-top,\n.vuuDrawer-left {\n order: 0;\n}\n\n.vuuDrawer-bottom,\n.vuuDrawer-right {\n order: 99;\n}\n\n.vuuDrawer-left,\n.vuuDrawer-right {\n flex-direction: column;\n}\n\n.vuuToggleButton-container {\n --saltButton-height: 28px;\n --saltButton-width: 28px;\n --vuu-icon-size: 12px;\n flex: 0 0 28px;\n}\n\n.vuuDrawer-open {\n --vuu-close-icon-svg: var(--svg-chevron-double-left);\n\n}\n";
4
-
5
- module.exports = drawerCss;
6
- //# sourceMappingURL=Drawer.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Drawer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
@@ -1,95 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var core = require('@salt-ds/core');
5
- var cx = require('clsx');
6
- var styles = require('@salt-ds/styles');
7
- var window = require('@salt-ds/window');
8
- var React = require('react');
9
- var Drawer$1 = require('./Drawer.css.js');
10
-
11
- const classBase = "vuuDrawer";
12
- const sizeAttribute = (value) => {
13
- return typeof value === "string" ? value : value + "px";
14
- };
15
- const getStyle = (styleProp, sizeOpen, sizeClosed) => {
16
- const hasSizeOpen = sizeOpen !== void 0;
17
- const hasSizeClosed = sizeClosed !== void 0;
18
- if (!styleProp && !hasSizeClosed && !hasSizeOpen) {
19
- return void 0;
20
- }
21
- if (!hasSizeClosed && !hasSizeOpen) {
22
- return styleProp;
23
- }
24
- return {
25
- ...styleProp,
26
- "--drawer-size": hasSizeOpen ? sizeAttribute(sizeOpen) : void 0,
27
- "--drawer-peek-size": hasSizeClosed ? sizeAttribute(sizeClosed) : void 0
28
- };
29
- };
30
- const Drawer = ({
31
- children,
32
- className: classNameProp,
33
- clickToOpen,
34
- defaultOpen,
35
- sizeOpen,
36
- sizeClosed,
37
- style: styleProp,
38
- open: openProp,
39
- position = "left",
40
- inline,
41
- onClick,
42
- peekaboo = false,
43
- toggleButton,
44
- ...props
45
- }) => {
46
- const targetWindow = window.useWindow();
47
- styles.useComponentCssInjection({
48
- testId: "vuu-drawer",
49
- css: Drawer$1,
50
- window: targetWindow
51
- });
52
- const [open, setOpen] = core.useControlled({
53
- controlled: openProp,
54
- default: defaultOpen ?? false,
55
- name: "Drawer",
56
- state: "open"
57
- });
58
- const className = cx(classBase, classNameProp, `${classBase}-${position}`, {
59
- [`${classBase}-open`]: open,
60
- [`${classBase}-inline`]: inline,
61
- [`${classBase}-over`]: !inline,
62
- [`${classBase}-peekaboo`]: peekaboo
63
- });
64
- const toggleDrawer = React.useCallback(() => {
65
- setOpen(!open);
66
- }, [open, setOpen]);
67
- const style = getStyle(styleProp, sizeOpen, sizeClosed);
68
- const handleClick = clickToOpen ? toggleDrawer : onClick;
69
- const renderToggleButton = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("vuuToggleButton-container"), children: open ? /* @__PURE__ */ jsxRuntime.jsx(
70
- core.Button,
71
- {
72
- "aria-label": "close",
73
- onClick: toggleDrawer,
74
- "data-icon": "close",
75
- variant: "secondary"
76
- }
77
- ) : /* @__PURE__ */ jsxRuntime.jsx(
78
- core.Button,
79
- {
80
- "aria-label": "open",
81
- onClick: toggleDrawer,
82
- "data-icon": "close",
83
- variant: "secondary"
84
- }
85
- ) });
86
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, className, onClick: handleClick, style, children: [
87
- toggleButton == "start" ? renderToggleButton() : null,
88
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-liner`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children }) }),
89
- toggleButton == "end" ? renderToggleButton() : null
90
- ] });
91
- };
92
- Drawer.displayName = "Drawer";
93
-
94
- module.exports = Drawer;
95
- //# sourceMappingURL=Drawer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Drawer.js","sources":["../../../../packages/vuu-layout/src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport drawerCss from \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n styleProp?: CSSProperties,\n sizeOpen?: number,\n sizeClosed?: number,\n) => {\n const hasSizeOpen = sizeOpen !== undefined;\n const hasSizeClosed = sizeClosed !== undefined;\n\n if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n return undefined;\n }\n\n if (!hasSizeClosed && !hasSizeOpen) {\n return styleProp;\n }\n\n return {\n ...styleProp,\n \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n clickToOpen?: boolean;\n defaultOpen?: boolean;\n inline?: boolean;\n open?: boolean;\n peekaboo?: boolean;\n position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n sizeOpen?: number;\n sizeClosed?: number;\n toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n children,\n className: classNameProp,\n clickToOpen,\n defaultOpen,\n sizeOpen,\n sizeClosed,\n style: styleProp,\n open: openProp,\n position = \"left\",\n inline,\n onClick,\n peekaboo = false,\n toggleButton,\n ...props\n}: DrawerProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: defaultOpen ?? false,\n name: \"Drawer\",\n state: \"open\",\n });\n\n const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n [`${classBase}-open`]: open,\n [`${classBase}-inline`]: inline,\n [`${classBase}-over`]: !inline,\n [`${classBase}-peekaboo`]: peekaboo,\n });\n\n const toggleDrawer = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n const renderToggleButton = () => (\n <div className={cx(\"vuuToggleButton-container\")}>\n {open ? (\n <Button\n aria-label=\"close\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n ) : (\n <Button\n aria-label=\"open\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n )}\n </div>\n );\n\n return (\n <div {...props} className={className} onClick={handleClick} style={style}>\n {toggleButton == \"start\" ? renderToggleButton() : null}\n <div className={`${classBase}-liner`}>\n <div className={`${classBase}-content`}>{children}</div>\n </div>\n {toggleButton == \"end\" ? renderToggleButton() : null}\n </div>\n );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":["useWindow","useComponentCssInjection","drawerCss","useControlled","useCallback","jsx","Button"],"mappings":"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"}