@vuu-ui/vuu-layout 0.8.44 → 0.8.45

package/cjs/DraggableLayout.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var draggableLayoutCss = ".DraggableLayout {\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";
+
+module.exports = draggableLayoutCss;
+//# sourceMappingURL=DraggableLayout.css.js.map

package/cjs/DraggableLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/DraggableLayout.js

@@ -2,8 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
 var ComponentRegistry = require('./registry/ComponentRegistry.js');
+var DraggableLayout$1 = require('./DraggableLayout.css.js');
 
 const DraggableLayout = React.forwardRef(function DraggableLayout2({
   children,
@@ -13,6 +16,12 @@ const DraggableLayout = React.forwardRef(function DraggableLayout2({
   // ignore, its just a marker used by the layout system
   ...htmlAttributes
 }, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-draggable-layout",
+    css: DraggableLayout$1,
+    window: targetWindow
+  });
   const className = cx("DraggableLayout", classNameProp);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ref: forwardedRef, ...htmlAttributes, children });
 });

package/cjs/DraggableLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableLayout.js","sources":["../src/DraggableLayout.tsx"],"sourcesContent":["import classnames from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { registerComponent } from \"./registry/ComponentRegistry\";\n\nimport \"./DraggableLayout.css\";\n\nexport interface DraggableLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget?: boolean;\n  resizeable?: boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const DraggableLayout = forwardRef(function DraggableLayout(\n  {\n    children,\n    className: classNameProp,\n    dropTarget,\n    resizeable: _, // ignore, its just a marker used by the layout system\n    ...htmlAttributes\n  }: DraggableLayoutProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const className = classnames(\"DraggableLayout\", classNameProp);\n  return (\n    <div className={className} ref={forwardedRef} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n});\n\nconst componentName = \"DraggableLayout\";\n\nDraggableLayout.displayName = componentName;\n\nregisterComponent(componentName, DraggableLayout, \"container\");\n"],"names":["forwardRef","DraggableLayout","classnames","registerComponent"],"mappings":";;;;;;;AAWa,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,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,SAAA,GAAYC,EAAW,CAAA,iBAAA,EAAmB,aAAa,CAAA,CAAA;AAC7D,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAsB,KAAK,YAAe,EAAA,GAAG,gBAC/C,QACH,EAAA,CAAA,CAAA;AAEJ,CAAC,EAAA;AAED,MAAM,aAAgB,GAAA,iBAAA,CAAA;AAEtB,eAAA,CAAgB,WAAc,GAAA,aAAA,CAAA;AAE9BC,mCAAkB,CAAA,aAAA,EAAe,iBAAiB,WAAW,CAAA;;;;"}
+{"version":3,"file":"DraggableLayout.js","sources":["../src/DraggableLayout.tsx"],"sourcesContent":["import classnames from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { registerComponent } from \"./registry/ComponentRegistry\";\n\nimport draggableLayoutCss from \"./DraggableLayout.css\";\n\nexport interface DraggableLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget?: boolean;\n  resizeable?: boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const DraggableLayout = forwardRef(function DraggableLayout(\n  {\n    children,\n    className: classNameProp,\n    dropTarget,\n    resizeable: _, // ignore, its just a marker used by the layout system\n    ...htmlAttributes\n  }: DraggableLayoutProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-draggable-layout\",\n    css: draggableLayoutCss,\n    window: targetWindow,\n  });\n\n  const className = classnames(\"DraggableLayout\", classNameProp);\n  return (\n    <div className={className} ref={forwardedRef} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n});\n\nconst componentName = \"DraggableLayout\";\n\nDraggableLayout.displayName = componentName;\n\nregisterComponent(componentName, DraggableLayout, \"container\");\n"],"names":["forwardRef","DraggableLayout","useWindow","useComponentCssInjection","draggableLayoutCss","classnames","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,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,iBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAYC,EAAW,CAAA,iBAAA,EAAmB,aAAa,CAAA,CAAA;AAC7D,EAAA,sCACG,KAAI,EAAA,EAAA,SAAA,EAAsB,KAAK,YAAe,EAAA,GAAG,gBAC/C,QACH,EAAA,CAAA,CAAA;AAEJ,CAAC,EAAA;AAED,MAAM,aAAgB,GAAA,iBAAA,CAAA;AAEtB,eAAA,CAAgB,WAAc,GAAA,aAAA,CAAA;AAE9BC,mCAAkB,CAAA,aAAA,EAAe,iBAAiB,WAAW,CAAA;;;;"}

package/cjs/dock-layout/DockLayout.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = dockLayoutCss;
+//# sourceMappingURL=DockLayout.css.js.map

package/cjs/dock-layout/DockLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DockLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/dock-layout/DockLayout.js

@@ -3,12 +3,21 @@
 var jsxRuntime = require('react/jsx-runtime');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var ComponentRegistry = require('../registry/ComponentRegistry.js');
 var Drawer = require('./Drawer.js');
+var DockLayout$1 = require('./DockLayout.css.js');
 
 const isDrawer = (component) => component.type === Drawer;
 const isVertical = ({ props: { position = "left" } }) => position.match(/top|bottom/);
 const DockLayout = (props) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-dock-layput",
+    css: DockLayout$1,
+    window: targetWindow
+  });
   const { children, className: classNameProp, id, style } = props;
   const classBase = "vuuDockLayout";
   const [drawers, content] = vuuUtils.partition(children, isDrawer);

package/cjs/dock-layout/DockLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"DockLayout.js","sources":["../../src/dock-layout/DockLayout.tsx"],"sourcesContent":["import { partition } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, ReactElement } from \"react\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport Drawer from \"./Drawer\";\n\nimport \"./DockLayout.css\";\n\nconst isDrawer = (component: ReactElement) => component.type === Drawer;\nconst isVertical = ({ props: { position = \"left\" } }: ReactElement) =>\n  position.match(/top|bottom/);\n\nexport interface DockLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement[];\n}\n\nconst DockLayout = (props: DockLayoutProps) => {\n  const { children, className: classNameProp, id, style } = props;\n  const classBase = \"vuuDockLayout\";\n  const [drawers, content] = partition(children, 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":["partition","jsxs","registerComponent"],"mappings":";;;;;;;;AAQA,MAAM,QAAW,GAAA,CAAC,SAA4B,KAAA,SAAA,CAAU,IAAS,KAAA,MAAA,CAAA;AACjE,MAAM,UAAA,GAAa,CAAC,EAAE,KAAO,EAAA,EAAE,QAAW,GAAA,MAAA,EAAS,EAAA,KACjD,QAAS,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AAMvB,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AAC7C,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,aAAe,EAAA,EAAA,EAAI,OAAU,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,SAAY,GAAA,eAAA,CAAA;AAClB,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAAA,kBAAA,CAAU,UAAU,QAAQ,CAAA,CAAA;AACvD,EAAA,MAAM,CAAC,eAAiB,EAAA,iBAAiB,CAAI,GAAAA,kBAAA,CAAU,SAAS,UAAU,CAAA,CAAA;AAC1E,EAAM,MAAA,WAAA,GACJ,gBAAgB,MAAW,KAAA,CAAA,GACvB,eACA,iBAAkB,CAAA,MAAA,KAAW,IAC7B,UACA,GAAA,MAAA,CAAA;AAEN,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA,aAAA,EAAe,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,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,CAAA;AAAA,GACnD,EAAA,CAAA,CAAA;AAEJ,EAAA;AACA,UAAA,CAAW,WAAc,GAAA,YAAA,CAAA;AAIzBC,mCAAkB,CAAA,YAAA,EAAc,YAAY,WAAW,CAAA;;;;"}
+{"version":3,"file":"DockLayout.js","sources":["../../src/dock-layout/DockLayout.tsx"],"sourcesContent":["import { partition } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactElement } from \"react\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport Drawer from \"./Drawer\";\n\nimport dockLayoutCss from \"./DockLayout.css\";\n\nconst isDrawer = (component: ReactElement) => component.type === Drawer;\nconst isVertical = ({ props: { position = \"left\" } }: ReactElement) =>\n  position.match(/top|bottom/);\n\nexport interface DockLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactElement[];\n}\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 classBase = \"vuuDockLayout\";\n  const [drawers, content] = partition(children, 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","partition","jsxs","registerComponent"],"mappings":";;;;;;;;;;;AAUA,MAAM,QAAW,GAAA,CAAC,SAA4B,KAAA,SAAA,CAAU,IAAS,KAAA,MAAA,CAAA;AACjE,MAAM,UAAA,GAAa,CAAC,EAAE,KAAO,EAAA,EAAE,QAAW,GAAA,MAAA,EAAS,EAAA,KACjD,QAAS,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AAMvB,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AAC7C,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,aAAe,EAAA,EAAA,EAAI,OAAU,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,SAAY,GAAA,eAAA,CAAA;AAClB,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAAC,kBAAA,CAAU,UAAU,QAAQ,CAAA,CAAA;AACvD,EAAA,MAAM,CAAC,eAAiB,EAAA,iBAAiB,CAAI,GAAAA,kBAAA,CAAU,SAAS,UAAU,CAAA,CAAA;AAC1E,EAAM,MAAA,WAAA,GACJ,gBAAgB,MAAW,KAAA,CAAA,GACvB,eACA,iBAAkB,CAAA,MAAA,KAAW,IAC7B,UACA,GAAA,MAAA,CAAA;AAEN,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA,aAAA,EAAe,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,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,CAAA;AAAA,GACnD,EAAA,CAAA,CAAA;AAEJ,EAAA;AACA,UAAA,CAAW,WAAc,GAAA,YAAA,CAAA;AAIzBC,mCAAkB,CAAA,YAAA,EAAc,YAAY,WAAW,CAAA;;;;"}

package/cjs/dock-layout/Drawer.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = drawerCss;
+//# sourceMappingURL=Drawer.css.js.map

package/cjs/dock-layout/Drawer.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/dock-layout/Drawer.js

@@ -3,7 +3,10 @@
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
+var Drawer$1 = require('./Drawer.css.js');
 
 const classBase = "vuuDrawer";
 const sizeAttribute = (value) => {
@@ -40,6 +43,12 @@ const Drawer = ({
   toggleButton,
   ...props
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-drawer",
+    css: Drawer$1,
+    window: targetWindow
+  });
   const [open, setOpen] = core.useControlled({
     controlled: openProp,
     default: defaultOpen ?? false,

package/cjs/dock-layout/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport \"./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 [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: defaultOpen ?? false,\n    name: \"Drawer\",\n    state: \"open\",\n  });\n\n  console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);\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":["useControlled","useCallback","jsx","Button"],"mappings":"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"}
+{"version":3,"file":"Drawer.js","sources":["../../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  console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);\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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"}

package/cjs/drag-drop/DropMenu.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var dropMenuCss = ".vuuDropMenu {\n  margin-left: -50%;\n  margin-bottom: -50%;\n  background-color: white;\n  border: solid 1px var(--grey40);\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  padding: 3px;\n  border-radius: 3px;\n}\n\n.vuuDropMenu-left,\n.vuuDropMenu-right {\n  flex-direction: column;\n}\n\n.vuuDropMenu-bottom {\n  transform: translate(0, -30px);\n}\n\n.vuuDropMenu-right {\n  transform: translate(-20px, 0);\n}\n\n.vuuDropMenu-item {\n  --vuu-icon-size: 20px;\n  width: 32px;\n  height: 32px;\n  background-color: var(--grey20);\n  border-bottom: solid 1px var(--grey40);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.vuuDropMenu-item .Icon {\n  transform: scale(1.25);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-left .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(180deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-top .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(270deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-bottom .vuuDropMenu-item .hwIcon {\n  transform: scale(1.25) rotate(90deg);\n  transform-origin: center center;\n}\n\n.vuuDropMenu-item .hwIcon-path {\n  fill: grey;\n}\n.vuuDropMenu-item:hover {\n  background-color: rgba(200, 200, 200, 0.5);\n}\n\n.vuuDropMenu-item:hover .hwIcon-path-2 {\n  fill: blue;\n}\n\n.vuuDropMenu-item:last-child {\n  border-bottom: none;\n}\n";
+
+module.exports = dropMenuCss;
+//# sourceMappingURL=DropMenu.css.js.map

package/cjs/drag-drop/DropMenu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropMenu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/drag-drop/DropMenu.js

@@ -2,6 +2,9 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var DropMenu$1 = require('./DropMenu.css.js');
 
 function computeMenuPosition(dropTarget, offsetTop = 0, offsetLeft = 0) {
   const { pos, clientRect: box } = dropTarget;
@@ -22,6 +25,12 @@ const DropMenu = ({
   onHover,
   orientation
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-drop-menu",
+    css: DropMenu$1,
+    window: targetWindow
+  });
   const dropTargets = dropTarget.toArray();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",

package/cjs/drag-drop/DropMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropMenu.js","sources":["../../src/drag-drop/DropMenu.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { HTMLAttributes } from \"react\";\nimport { DropTarget } from \"./DropTarget\";\n\nimport \"./DropMenu.css\";\n\nexport function computeMenuPosition(\n  dropTarget: DropTarget,\n  offsetTop = 0,\n  offsetLeft = 0\n): [number, number, \"left\" | \"bottom\" | \"right\" | \"top\"] {\n  const { pos, clientRect: box } = dropTarget;\n  const menuOffset = 20;\n\n  return pos.position.West\n    ? [box.left - offsetLeft + menuOffset, pos.y - offsetTop, \"left\"]\n    : pos.position.South\n    ? [pos.x - offsetLeft, box.bottom - offsetTop - menuOffset, \"bottom\"]\n    : pos.position.East\n    ? [box.right - offsetLeft - menuOffset, pos.y - offsetTop, \"right\"]\n    : /* North | Header*/ [\n        pos.x - offsetLeft,\n        box.top - offsetTop + menuOffset,\n        \"top\",\n      ];\n}\n\nconst classBase = \"vuuDropMenu\";\n\nexport interface DropMenuProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget: DropTarget;\n  onHover: (target: DropTarget | null) => void;\n  orientation?: \"left\" | \"top\" | \"right\" | \"bottom\";\n}\n\nexport const DropMenu = ({\n  className,\n  dropTarget,\n  onHover,\n  orientation,\n}: DropMenuProps) => {\n  const dropTargets = dropTarget.toArray();\n  // TODO we have all the information here to draw a mini target map\n  // but maybe thats overkill ...\n\n  return (\n    <div\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      onMouseLeave={() => onHover(null)}\n    >\n      {dropTargets.map((target, i) => (\n        <div\n          key={i}\n          className={`${classBase}-item`}\n          data-icon={i === 0 ? \"column-2A\" : \"column-2B\"}\n          onMouseEnter={() => onHover(target)}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;;AAMO,SAAS,mBACd,CAAA,UAAA,EACA,SAAY,GAAA,CAAA,EACZ,aAAa,CAC0C,EAAA;AACvD,EAAA,MAAM,EAAE,GAAA,EAAK,UAAY,EAAA,GAAA,EAAQ,GAAA,UAAA,CAAA;AACjC,EAAA,MAAM,UAAa,GAAA,EAAA,CAAA;AAEnB,EAAA,OAAO,IAAI,QAAS,CAAA,IAAA,GAChB,CAAC,GAAA,CAAI,OAAO,UAAa,GAAA,UAAA,EAAY,GAAI,CAAA,CAAA,GAAI,WAAW,MAAM,CAAA,GAC9D,GAAI,CAAA,QAAA,CAAS,QACb,CAAC,GAAA,CAAI,CAAI,GAAA,UAAA,EAAY,IAAI,MAAS,GAAA,SAAA,GAAY,UAAY,EAAA,QAAQ,IAClE,GAAI,CAAA,QAAA,CAAS,IACb,GAAA,CAAC,IAAI,KAAQ,GAAA,UAAA,GAAa,YAAY,GAAI,CAAA,CAAA,GAAI,WAAW,OAAO,CAAA;AAAA;AAAA,IAC5C;AAAA,MAClB,IAAI,CAAI,GAAA,UAAA;AAAA,MACR,GAAA,CAAI,MAAM,SAAY,GAAA,UAAA;AAAA,MACtB,KAAA;AAAA,KACF;AAAA,GAAA,CAAA;AACN,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAA;AAQX,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AACF,CAAqB,KAAA;AACnB,EAAM,MAAA,WAAA,GAAc,WAAW,OAAQ,EAAA,CAAA;AAIvC,EACE,uBAAAA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAAA,MACjE,YAAA,EAAc,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAE/B,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CACxB,qBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,UACvB,WAAA,EAAW,CAAM,KAAA,CAAA,GAAI,WAAc,GAAA,WAAA;AAAA,UACnC,YAAA,EAAc,MAAM,OAAA,CAAQ,MAAM,CAAA;AAAA,SAAA;AAAA,QAH7B,CAAA;AAAA,OAKR,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;;"}
+{"version":3,"file":"DropMenu.js","sources":["../../src/drag-drop/DropMenu.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { DropTarget } from \"./DropTarget\";\n\nimport dropMenuCss from \"./DropMenu.css\";\n\nexport function computeMenuPosition(\n  dropTarget: DropTarget,\n  offsetTop = 0,\n  offsetLeft = 0\n): [number, number, \"left\" | \"bottom\" | \"right\" | \"top\"] {\n  const { pos, clientRect: box } = dropTarget;\n  const menuOffset = 20;\n\n  return pos.position.West\n    ? [box.left - offsetLeft + menuOffset, pos.y - offsetTop, \"left\"]\n    : pos.position.South\n    ? [pos.x - offsetLeft, box.bottom - offsetTop - menuOffset, \"bottom\"]\n    : pos.position.East\n    ? [box.right - offsetLeft - menuOffset, pos.y - offsetTop, \"right\"]\n    : /* North | Header*/ [\n        pos.x - offsetLeft,\n        box.top - offsetTop + menuOffset,\n        \"top\",\n      ];\n}\n\nconst classBase = \"vuuDropMenu\";\n\nexport interface DropMenuProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget: DropTarget;\n  onHover: (target: DropTarget | null) => void;\n  orientation?: \"left\" | \"top\" | \"right\" | \"bottom\";\n}\n\nexport const DropMenu = ({\n  className,\n  dropTarget,\n  onHover,\n  orientation,\n}: DropMenuProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-drop-menu\",\n    css: dropMenuCss,\n    window: targetWindow,\n  });\n\n  const dropTargets = dropTarget.toArray();\n  // TODO we have all the information here to draw a mini target map\n  // but maybe thats overkill ...\n\n  return (\n    <div\n      className={cx(classBase, className, `${classBase}-${orientation}`)}\n      onMouseLeave={() => onHover(null)}\n    >\n      {dropTargets.map((target, i) => (\n        <div\n          key={i}\n          className={`${classBase}-item`}\n          data-icon={i === 0 ? \"column-2A\" : \"column-2B\"}\n          onMouseEnter={() => onHover(target)}\n        />\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","dropMenuCss","jsx"],"mappings":";;;;;;;;AAQO,SAAS,mBACd,CAAA,UAAA,EACA,SAAY,GAAA,CAAA,EACZ,aAAa,CAC0C,EAAA;AACvD,EAAA,MAAM,EAAE,GAAA,EAAK,UAAY,EAAA,GAAA,EAAQ,GAAA,UAAA,CAAA;AACjC,EAAA,MAAM,UAAa,GAAA,EAAA,CAAA;AAEnB,EAAA,OAAO,IAAI,QAAS,CAAA,IAAA,GAChB,CAAC,GAAA,CAAI,OAAO,UAAa,GAAA,UAAA,EAAY,GAAI,CAAA,CAAA,GAAI,WAAW,MAAM,CAAA,GAC9D,GAAI,CAAA,QAAA,CAAS,QACb,CAAC,GAAA,CAAI,CAAI,GAAA,UAAA,EAAY,IAAI,MAAS,GAAA,SAAA,GAAY,UAAY,EAAA,QAAQ,IAClE,GAAI,CAAA,QAAA,CAAS,IACb,GAAA,CAAC,IAAI,KAAQ,GAAA,UAAA,GAAa,YAAY,GAAI,CAAA,CAAA,GAAI,WAAW,OAAO,CAAA;AAAA;AAAA,IAC5C;AAAA,MAClB,IAAI,CAAI,GAAA,UAAA;AAAA,MACR,GAAA,CAAI,MAAM,SAAY,GAAA,UAAA;AAAA,MACtB,KAAA;AAAA,KACF;AAAA,GAAA,CAAA;AACN,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAA;AAQX,MAAM,WAAW,CAAC;AAAA,EACvB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AACF,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,WAAW,OAAQ,EAAA,CAAA;AAIvC,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAAA,MACjE,YAAA,EAAc,MAAM,OAAA,CAAQ,IAAI,CAAA;AAAA,MAE/B,QAAY,EAAA,WAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CACxB,qBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,UACvB,WAAA,EAAW,CAAM,KAAA,CAAA,GAAI,WAAc,GAAA,WAAA;AAAA,UACnC,YAAA,EAAc,MAAM,OAAA,CAAQ,MAAM,CAAA;AAAA,SAAA;AAAA,QAH7B,CAAA;AAAA,OAKR,CAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;;"}

package/cjs/drag-drop/DropTargetRenderer.js

@@ -25,11 +25,13 @@ function insertSVGRoot() {
     const root = document.getElementById("root");
     const container = document.createElement("div");
     container.id = "hw-drag-canvas";
+    container.style.cssText = `visibility:hidden;z-index:10;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent`;
     container.innerHTML = `
-      <svg width="100%" height="100%">
-        <path id="hw-drop-guides" />
+      <svg width="100%" height="100%" style="position: absolute;">
+        <path id="hw-drop-guides" style="fill: none; stroke: rgba(0, 0, 0, 0.3);stroke-dasharray: 2 3"/>
         <path
           id="vuu-drop-outline"
+          style="fill:rgba(0,0,255,.3);stroke:none;stroke-dasharray:4 2"
           d="M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z">
           <animate
             attributeName="d"
@@ -52,6 +54,12 @@ class DropTargetCanvas {
     insertSVGRoot();
   }
   prepare(dragRect, tabMode = "full-view") {
+    const dragCanvas = document.getElementById("hw-drag-canvas");
+    if (dragCanvas) {
+      dragCanvas.style.visibility = "visible";
+    } else {
+      throw Error("DropTargetRenderer.prepare no drag canvas detected");
+    }
     document.body.classList.add("drawing");
     this.currentPath = null;
     this.tabMode = tabMode;
@@ -64,7 +72,10 @@ class DropTargetCanvas {
   clear() {
     _hoverDropTarget = null;
     clearShiftedTab();
-    document.body.classList.remove("drawing");
+    const dragCanvas = document.getElementById("hw-drag-canvas");
+    if (dragCanvas) {
+      dragCanvas.style.visibility = "hidden";
+    }
     vuuPopups.PopupService.hidePopup();
   }
   get hoverDropTarget() {

package/cjs/drag-drop/DropTargetRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropTargetRenderer.js","sources":["../../src/drag-drop/DropTargetRenderer.tsx"],"sourcesContent":["import { PopupService } from \"@vuu-ui/vuu-popups\";\nimport { RelativeDropPosition } from \"./BoxModel\";\nimport { DragDropRect } from \"./dragDropTypes\";\nimport { DragState } from \"./DragState\";\nimport { computeMenuPosition, DropMenu } from \"./DropMenu\";\nimport { DropTarget, GuideLine } from \"./DropTarget\";\n\nimport \"./DropTargetRenderer.css\";\n\ntype Point = [number, number];\ntype TabMode = \"full-view\" | \"tab-only\";\n\nlet _multiDropOptions = false;\nlet _hoverDropTarget: DropTarget | null = null;\nlet _shiftedTab: HTMLElement | null = null;\n\nconst onHoverDropTarget = (dropTarget: DropTarget | null) =>\n  (_hoverDropTarget = dropTarget);\n\nconst start = ([x, y]: Point) => `M${x},${y}`;\nconst point = ([x, y]: Point) => `L${x},${y}`;\nconst pathFromPoints = ([p1, ...points]: Point[]) =>\n  `${start(p1)} ${points.map(point)}Z`;\n\nconst pathFromGuideLines = (guideLines?: GuideLine) => {\n  if (guideLines) {\n    const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;\n    return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;\n  } else {\n    return \"\";\n  }\n};\n\nfunction insertSVGRoot() {\n  if (document.getElementById(\"hw-drag-canvas\") === null) {\n    const root = document.getElementById(\"root\");\n    const container = document.createElement(\"div\");\n    container.id = \"hw-drag-canvas\";\n    container.innerHTML = `\n      <svg width=\"100%\" height=\"100%\">\n        <path id=\"hw-drop-guides\" />\n        <path\n          id=\"vuu-drop-outline\"\n          d=\"M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z\">\n          <animate\n            attributeName=\"d\"\n            id=\"hw-drop-outline-animate\"\n            begin=\"indefinite\"\n            dur=\"300ms\"\n            fill=\"freeze\"\n            to=\"M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z\"\n          />\n        </path>\n      </svg>\n      `;\n    document.body.insertBefore(container, root);\n  }\n}\nexport default class DropTargetCanvas {\n  private currentPath: string | null = null;\n  private tabMode: TabMode | null = null;\n\n  constructor() {\n    insertSVGRoot();\n  }\n\n  prepare(dragRect: DragDropRect, tabMode: TabMode = \"full-view\") {\n    // don't do this on body\n    document.body.classList.add(\"drawing\");\n    this.currentPath = null;\n    this.tabMode = tabMode;\n\n    const points = this.getPoints(0, 0, 0, 0);\n    // const points = this.getPoints(left, top, width, height);\n    const d = pathFromPoints(points);\n\n    const dropOutlinePath = document.getElementById(\"vuu-drop-outline\");\n    dropOutlinePath?.setAttribute(\"d\", d);\n    this.currentPath = d;\n  }\n\n  clear() {\n    // don't do this on body\n    _hoverDropTarget = null;\n    clearShiftedTab();\n    document.body.classList.remove(\"drawing\");\n    PopupService.hidePopup();\n  }\n\n  get hoverDropTarget() {\n    return _hoverDropTarget;\n  }\n\n  getPoints(\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    tabLeft = 0,\n    tabWidth = 0,\n    tabHeight = 0\n  ): Point[] {\n    const tabOnly = this.tabMode === \"tab-only\";\n    if (tabWidth === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y],\n        [x + width, y],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else if (tabOnly) {\n      const left = tabLeft;\n      return [\n        [left, y],\n        [left, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y + tabHeight],\n        [left + tabWidth, y + tabHeight],\n        [left, y + tabHeight],\n        [left, y + tabHeight],\n      ];\n    } else if (tabLeft === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else {\n      return [\n        [x, y + tabHeight],\n        [x + tabLeft, y + tabHeight],\n        [x + tabLeft, y],\n        [x + tabLeft, y],\n        [x + tabLeft, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    }\n  }\n\n  draw(dropTarget: DropTarget, dragState: DragState) {\n    const sameDropTarget = false;\n    const wasMultiDrop = _multiDropOptions;\n\n    if (_hoverDropTarget !== null) {\n      this.drawTarget(_hoverDropTarget);\n    } else {\n      if (sameDropTarget === false) {\n        _multiDropOptions = dropTarget.nextDropTarget != null;\n        if (dropTarget.pos.tab) {\n          moveExistingTabs(dropTarget);\n        } else if (_shiftedTab) {\n          clearShiftedTab();\n        }\n        this.drawTarget(dropTarget, dragState);\n      }\n\n      if (_multiDropOptions) {\n        const [left, top, orientation] = computeMenuPosition(dropTarget);\n        if (!wasMultiDrop || !sameDropTarget) {\n          const component = (\n            <DropMenu\n              dropTarget={dropTarget}\n              onHover={onHoverDropTarget}\n              orientation={orientation}\n            />\n          );\n          PopupService.showPopup({\n            left,\n            top,\n            component,\n          });\n        }\n      } else {\n        PopupService.hidePopup();\n      }\n    }\n  }\n\n  drawTarget(dropTarget: DropTarget, dragState?: DragState) {\n    const lineWidth = 6;\n\n    const targetDropOutline = dropTarget.getTargetDropOutline(\n      lineWidth,\n      dragState\n    );\n\n    if (targetDropOutline) {\n      const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } =\n        targetDropOutline;\n      const w = r - l;\n      const h = b - t;\n\n      if (this.currentPath) {\n        const path = document.getElementById(\"vuu-drop-outline\");\n        path?.setAttribute(\"d\", this.currentPath);\n      }\n\n      const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);\n      const path = pathFromPoints(points);\n      const animation = document.getElementById(\n        \"hw-drop-outline-animate\"\n      ) as unknown as SVGAnimateElement;\n      animation?.setAttribute(\"to\", path);\n      animation?.beginElement();\n      this.currentPath = path;\n\n      const dropGuidePath = document.getElementById(\"hw-drop-guides\");\n      dropGuidePath?.setAttribute(\"d\", pathFromGuideLines(guideLines));\n    }\n  }\n}\n\nconst cssShiftRight = \"transition:margin-left .4s ease-out;margin-left: 63px\";\nconst cssShiftBack = \"transition:margin-left .4s ease-out;margin-left: 0px\";\n\nfunction moveExistingTabs(dropTarget: DropTarget) {\n  const { AFTER, BEFORE } = RelativeDropPosition;\n  const {\n    clientRect: { Stack },\n    pos: {\n      // tab: { index: tabIndex, positionRelativeToTab }\n      tab,\n    },\n  } = dropTarget;\n\n  const { id } = dropTarget.component.props;\n  let tabEl = null;\n  // console.log(`tabPos = ${tabPos} (width=${tabWidth}) x=${x}`)\n  if (Stack && tab && tab.positionRelativeToTab !== AFTER) {\n    const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;\n    const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${\n      tab.index + tabOffset\n    })`;\n    tabEl = document.getElementById(id)?.querySelector(selector) as HTMLElement;\n    if (tabEl) {\n      if (_shiftedTab === null || _shiftedTab !== tabEl) {\n        tabEl.style.cssText = cssShiftRight;\n        if (_shiftedTab) {\n          _shiftedTab.style.cssText = cssShiftBack;\n        }\n        _shiftedTab = tabEl;\n      }\n    } else {\n      clearShiftedTab();\n    }\n  } else if (tab?.positionRelativeToTab === BEFORE) {\n    if (_shiftedTab === null) {\n      const selector = \".vuuHeader-title\";\n      tabEl = document\n        .getElementById(id)\n        ?.querySelector(selector) as HTMLElement;\n      tabEl.style.cssText = cssShiftRight;\n      _shiftedTab = tabEl;\n    }\n  } else {\n    clearShiftedTab();\n  }\n}\n\nfunction clearShiftedTab() {\n  if (_shiftedTab) {\n    _shiftedTab.style.cssText = cssShiftBack;\n    _shiftedTab = null;\n  }\n}\n"],"names":["PopupService","computeMenuPosition","jsx","DropMenu","path","RelativeDropPosition"],"mappings":"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"}
+{"version":3,"file":"DropTargetRenderer.js","sources":["../../src/drag-drop/DropTargetRenderer.tsx"],"sourcesContent":["import { PopupService } from \"@vuu-ui/vuu-popups\";\nimport { RelativeDropPosition } from \"./BoxModel\";\nimport { DragDropRect } from \"./dragDropTypes\";\nimport { DragState } from \"./DragState\";\nimport { computeMenuPosition, DropMenu } from \"./DropMenu\";\nimport { DropTarget, GuideLine } from \"./DropTarget\";\n\ntype Point = [number, number];\ntype TabMode = \"full-view\" | \"tab-only\";\n\nlet _multiDropOptions = false;\nlet _hoverDropTarget: DropTarget | null = null;\nlet _shiftedTab: HTMLElement | null = null;\n\nconst onHoverDropTarget = (dropTarget: DropTarget | null) =>\n  (_hoverDropTarget = dropTarget);\n\nconst start = ([x, y]: Point) => `M${x},${y}`;\nconst point = ([x, y]: Point) => `L${x},${y}`;\nconst pathFromPoints = ([p1, ...points]: Point[]) =>\n  `${start(p1)} ${points.map(point)}Z`;\n\nconst pathFromGuideLines = (guideLines?: GuideLine) => {\n  if (guideLines) {\n    const [x1, y1, x2, y2, x3, y3, x4, y4] = guideLines;\n    return `M${x1},${y1} L${x2},${y2} M${x3},${y3} L${x4},${y4}`;\n  } else {\n    return \"\";\n  }\n};\n\nfunction insertSVGRoot() {\n  if (document.getElementById(\"hw-drag-canvas\") === null) {\n    const root = document.getElementById(\"root\");\n    const container = document.createElement(\"div\");\n    container.id = \"hw-drag-canvas\";\n    container.style.cssText = `visibility:hidden;z-index:10;position:absolute;top:0px;left:0;right:0;bottom:0;background-color:transparent`;\n    container.innerHTML = `\n      <svg width=\"100%\" height=\"100%\" style=\"position: absolute;\">\n        <path id=\"hw-drop-guides\" style=\"fill: none; stroke: rgba(0, 0, 0, 0.3);stroke-dasharray: 2 3\"/>\n        <path\n          id=\"vuu-drop-outline\"\n          style=\"fill:rgba(0,0,255,.3);stroke:none;stroke-dasharray:4 2\"\n          d=\"M300,132 L380,132 L380,100 L460,100 L460,132, L550,132 L550,350 L300,350z\">\n          <animate\n            attributeName=\"d\"\n            id=\"hw-drop-outline-animate\"\n            begin=\"indefinite\"\n            dur=\"300ms\"\n            fill=\"freeze\"\n            to=\"M255,33 L255,33,L255,1,L315,1,L315,1,L794,1,L794,164,L255,164Z\"\n          />\n        </path>\n      </svg>\n      `;\n    document.body.insertBefore(container, root);\n  }\n}\nexport default class DropTargetCanvas {\n  private currentPath: string | null = null;\n  private tabMode: TabMode | null = null;\n\n  constructor() {\n    insertSVGRoot();\n  }\n\n  prepare(dragRect: DragDropRect, tabMode: TabMode = \"full-view\") {\n    // don't do this on body\n    const dragCanvas = document.getElementById(\"hw-drag-canvas\");\n    if (dragCanvas) {\n      dragCanvas.style.visibility = \"visible\";\n    } else {\n      throw Error(\"DropTargetRenderer.prepare no drag canvas detected\");\n    }\n    document.body.classList.add(\"drawing\");\n    this.currentPath = null;\n    this.tabMode = tabMode;\n\n    const points = this.getPoints(0, 0, 0, 0);\n    // const points = this.getPoints(left, top, width, height);\n    const d = pathFromPoints(points);\n\n    const dropOutlinePath = document.getElementById(\"vuu-drop-outline\");\n    dropOutlinePath?.setAttribute(\"d\", d);\n    this.currentPath = d;\n  }\n\n  clear() {\n    // don't do this on body\n    _hoverDropTarget = null;\n    clearShiftedTab();\n    const dragCanvas = document.getElementById(\"hw-drag-canvas\");\n    if (dragCanvas) {\n      dragCanvas.style.visibility = \"hidden\";\n    }\n    PopupService.hidePopup();\n  }\n\n  get hoverDropTarget() {\n    return _hoverDropTarget;\n  }\n\n  getPoints(\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    tabLeft = 0,\n    tabWidth = 0,\n    tabHeight = 0\n  ): Point[] {\n    const tabOnly = this.tabMode === \"tab-only\";\n    if (tabWidth === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y],\n        [x + width, y],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else if (tabOnly) {\n      const left = tabLeft;\n      return [\n        [left, y],\n        [left, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y],\n        [left + tabWidth, y + tabHeight],\n        [left + tabWidth, y + tabHeight],\n        [left, y + tabHeight],\n        [left, y + tabHeight],\n      ];\n    } else if (tabLeft === 0) {\n      return [\n        [x, y + tabHeight],\n        [x, y + tabHeight],\n        [x, y],\n        [x + tabWidth, y],\n        [x + tabWidth, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    } else {\n      return [\n        [x, y + tabHeight],\n        [x + tabLeft, y + tabHeight],\n        [x + tabLeft, y],\n        [x + tabLeft, y],\n        [x + tabLeft, y + tabHeight],\n        [x + width, y + tabHeight],\n        [x + width, y + height],\n        [x, y + height],\n      ];\n    }\n  }\n\n  draw(dropTarget: DropTarget, dragState: DragState) {\n    const sameDropTarget = false;\n    const wasMultiDrop = _multiDropOptions;\n\n    if (_hoverDropTarget !== null) {\n      this.drawTarget(_hoverDropTarget);\n    } else {\n      if (sameDropTarget === false) {\n        _multiDropOptions = dropTarget.nextDropTarget != null;\n        if (dropTarget.pos.tab) {\n          moveExistingTabs(dropTarget);\n        } else if (_shiftedTab) {\n          clearShiftedTab();\n        }\n        this.drawTarget(dropTarget, dragState);\n      }\n\n      if (_multiDropOptions) {\n        const [left, top, orientation] = computeMenuPosition(dropTarget);\n        if (!wasMultiDrop || !sameDropTarget) {\n          const component = (\n            <DropMenu\n              dropTarget={dropTarget}\n              onHover={onHoverDropTarget}\n              orientation={orientation}\n            />\n          );\n          PopupService.showPopup({\n            left,\n            top,\n            component,\n          });\n        }\n      } else {\n        PopupService.hidePopup();\n      }\n    }\n  }\n\n  drawTarget(dropTarget: DropTarget, dragState?: DragState) {\n    const lineWidth = 6;\n\n    const targetDropOutline = dropTarget.getTargetDropOutline(\n      lineWidth,\n      dragState\n    );\n\n    if (targetDropOutline) {\n      const { l, t, r, b, tabLeft, tabWidth, tabHeight, guideLines } =\n        targetDropOutline;\n      const w = r - l;\n      const h = b - t;\n\n      if (this.currentPath) {\n        const path = document.getElementById(\"vuu-drop-outline\");\n        path?.setAttribute(\"d\", this.currentPath);\n      }\n\n      const points = this.getPoints(l, t, w, h, tabLeft, tabWidth, tabHeight);\n      const path = pathFromPoints(points);\n      const animation = document.getElementById(\n        \"hw-drop-outline-animate\"\n      ) as unknown as SVGAnimateElement;\n      animation?.setAttribute(\"to\", path);\n      animation?.beginElement();\n      this.currentPath = path;\n\n      const dropGuidePath = document.getElementById(\"hw-drop-guides\");\n      dropGuidePath?.setAttribute(\"d\", pathFromGuideLines(guideLines));\n    }\n  }\n}\n\nconst cssShiftRight = \"transition:margin-left .4s ease-out;margin-left: 63px\";\nconst cssShiftBack = \"transition:margin-left .4s ease-out;margin-left: 0px\";\n\nfunction moveExistingTabs(dropTarget: DropTarget) {\n  const { AFTER, BEFORE } = RelativeDropPosition;\n  const {\n    clientRect: { Stack },\n    pos: {\n      // tab: { index: tabIndex, positionRelativeToTab }\n      tab,\n    },\n  } = dropTarget;\n\n  const { id } = dropTarget.component.props;\n  let tabEl = null;\n  // console.log(`tabPos = ${tabPos} (width=${tabWidth}) x=${x}`)\n  if (Stack && tab && tab.positionRelativeToTab !== AFTER) {\n    const tabOffset = tab.positionRelativeToTab === BEFORE ? 1 : 2;\n    const selector = `:scope .hwTabstrip > .hwTabstrip-inner > .hwTab:nth-child(${\n      tab.index + tabOffset\n    })`;\n    tabEl = document.getElementById(id)?.querySelector(selector) as HTMLElement;\n    if (tabEl) {\n      if (_shiftedTab === null || _shiftedTab !== tabEl) {\n        tabEl.style.cssText = cssShiftRight;\n        if (_shiftedTab) {\n          _shiftedTab.style.cssText = cssShiftBack;\n        }\n        _shiftedTab = tabEl;\n      }\n    } else {\n      clearShiftedTab();\n    }\n  } else if (tab?.positionRelativeToTab === BEFORE) {\n    if (_shiftedTab === null) {\n      const selector = \".vuuHeader-title\";\n      tabEl = document\n        .getElementById(id)\n        ?.querySelector(selector) as HTMLElement;\n      tabEl.style.cssText = cssShiftRight;\n      _shiftedTab = tabEl;\n    }\n  } else {\n    clearShiftedTab();\n  }\n}\n\nfunction clearShiftedTab() {\n  if (_shiftedTab) {\n    _shiftedTab.style.cssText = cssShiftBack;\n    _shiftedTab = null;\n  }\n}\n"],"names":["PopupService","computeMenuPosition","jsx","DropMenu","path","RelativeDropPosition"],"mappings":"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"}

package/cjs/flexbox/FluidGrid.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var fluidGridCss = ":root {\n  --hw-space-unit: 4px;\n  --hw-fluid-grid-col-bg: rgba(252, 209, 232, 0.7);\n}\n\n.hwFluidGrid {\n  --gap: var(--gutter-width);\n\n  display: flex;\n  gap: calc(var(--grid-gap) * var(--hw-space-unit));\n  flex-wrap: wrap;\n  padding: 0;\n}\n\n.hwFluidGrid > * {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --gutter-count: calc(var(--parent-col-count) - 1);\n  --total-gutter-width: calc(var(--gutter-count) * var(--gutter-width));\n  --available-width: calc(100% - var(--total-gutter-width));\n\n  flex-basis: 0;\n  flex-grow: 1;\n  flex-shrink: 1;\n  position: relative;\n}\n\n.hwFluidGrid > *:after {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: dashed 2px blue;\n}\n\n.hwFluidGrid > [data-xs] {\n  --internal-gutter-count: calc(var(--col-span) - 1);\n  --percent-width: calc(var(--col-span) / var(--parent-col-count));\n  --internal-gutter-width: calc(var(--internal-gutter-count) * var(--gutter-width));\n  flex-basis: calc(var(--available-width) * var(--percent-width) + var(--internal-gutter-width));\n  flex-grow: 0;\n}\n\n.hwFluidGrid > [data-xs='1'] {\n  --col-span: 1;\n}\n.hwFluidGrid > [data-xs='2'] {\n  --col-span: 2;\n}\n.hwFluidGrid > [data-xs='3'] {\n  --col-span: 3;\n}\n\n.hwFluidGrid > [data-xs='4'] {\n  --col-span: 4;\n}\n\n.hwFluidGrid > [data-xs='6'] {\n  --col-span: 6;\n}\n\n.hwFluidGrid > [data-xs='8'] {\n  --col-span: 8;\n}\n\n.hwFluidGrid > [data-xs='9'] {\n  --col-span: 9;\n}\n.hwFluidGrid > [data-xs='10'] {\n  --col-span: 10;\n}\n.hwFluidGrid > [data-xs='11'] {\n  --col-span: 11;\n}\n\n.hwFluidGrid > [data-xs='12'] {\n  --col-span: 12;\n}\n\n@media (min-width: 600px) {\n  .hwFluidGrid > [data-sm='1'] {\n    --col-span: 1;\n  }\n  .hwFluidGrid > [data-sm='2'] {\n    --col-span: 2;\n  }\n\n  .hwFluidGrid > [data-sm='3'] {\n    --col-span: 3;\n  }\n\n  .hwFluidGrid > [data-sm='4'] {\n    --col-span: 4;\n  }\n\n  .hwFluidGrid > [data-sm='6'] {\n    --col-span: 6;\n  }\n\n  .hwFluidGrid > [data-sm='8'] {\n    --col-span: 8;\n  }\n  .hwFluidGrid > [data-sm='9'] {\n    --col-span: 9;\n  }\n  .hwFluidGrid > [data-sm='10'] {\n    --col-span: 10;\n  }\n  .hwFluidGrid > [data-sm='11'] {\n    --col-span: 11;\n  }\n  .hwFluidGrid > [data-sm='12'] {\n    --col-span: 12;\n  }\n}\n\n/* Display the grid background */\n\n.hwFluidGrid-show-grid {\n  --gutter-width: calc(var(--hw-flex-gap) * var(--hw-space-unit));\n  --grid-gutter-count: calc(var(--grid-col-count, var(--parent-col-count)) - 1);\n  --grid-total-gutter-width: calc(var(--grid-gutter-count) * var(--gutter-width));\n  --grid-available-width: calc(100% - var(--grid-total-gutter-width));\n  --grid-percent-width: calc(1 / var(--grid-col-count, var(--parent-col-count)));\n  --column-width: calc(var(--grid-available-width) * var(--grid-percent-width));\n  background: repeating-linear-gradient(\n    to right,\n    var(--hw-fluid-grid-col-bg) 0,\n    var(--hw-fluid-grid-col-bg) var(--column-width),\n    white var(--column-width),\n    white calc(var(--column-width) + var(--gutter-width))\n  );\n}\n";
+
+module.exports = fluidGridCss;
+//# sourceMappingURL=FluidGrid.css.js.map

package/cjs/flexbox/FluidGrid.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FluidGrid.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/flexbox/FluidGrid.js

@@ -3,11 +3,14 @@
 var jsxRuntime = require('react/jsx-runtime');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var cx = require('clsx');
 var React = require('react');
 var useBreakpoints = require('../responsive/use-breakpoints.js');
 require('../responsive/useResizeObserver.js');
 var useResponsiveSizing = require('./useResponsiveSizing.js');
+var FluidGrid$1 = require('./FluidGrid.css.js');
 
 const classBase = "hwFluidGrid";
 const FluidGrid = React.forwardRef(function FluidGrid2(props, ref) {
@@ -30,6 +33,12 @@ const FluidGrid = React.forwardRef(function FluidGrid2(props, ref) {
     style: styleProp,
     ...rest
   } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-fluid-grid",
+    css: FluidGrid$1,
+    window: targetWindow
+  });
   const children = React.useMemo(() => {
     return vuuUtils.asReactElements(childrenProp);
   }, [childrenProp]);

package/cjs/flexbox/FluidGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"FluidGrid.js","sources":["../../src/flexbox/FluidGrid.tsx"],"sourcesContent":["import { asReactElements } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, useMemo } from \"react\";\nimport { useBreakpoints } from \"../responsive\";\nimport { FlexboxProps } from \"./flexboxTypes\";\nimport \"./FluidGrid.css\";\nimport { useResponsiveSizing } from \"./useResponsiveSizing\";\n\nconst classBase = \"hwFluidGrid\";\n\nexport interface FluidGridProps extends FlexboxProps {\n  showGrid?: boolean;\n}\n\nexport const FluidGrid = forwardRef(function FluidGrid(\n  props: FluidGridProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    breakPoints,\n    children: childrenProp,\n    column,\n    cols: colsProp = 12,\n    className: classNameProp,\n    flexFill,\n    gap = 3,\n    fullPage,\n    id,\n    onSplitterMoved,\n    resizeable,\n    row,\n    showGrid,\n    spacing,\n    splitterSize,\n    style: styleProp,\n    ...rest\n  } = props;\n\n  //TODO does thie useMemo serve any actual purpose or will childrenProp\n  // always be new anyway ?\n  const children = useMemo(() => {\n    return asReactElements(childrenProp);\n  }, [childrenProp]);\n\n  const { cols, content, rootRef } = useResponsiveSizing({\n    children,\n    cols: colsProp,\n    style: styleProp,\n  });\n\n  const breakpoint = useBreakpoints(\n    {\n      breakPoints,\n    },\n    rootRef\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-column`]: column,\n    [`${classBase}-row`]: row,\n    [`${classBase}-show-grid`]: showGrid,\n    \"flex-fill\": flexFill,\n    \"full-page\": fullPage,\n  });\n\n  const style = {\n    ...styleProp,\n    \"--spacing\": spacing,\n    \"--grid-col-count\": cols,\n    \"--grid-gap\": gap,\n  };\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      data-breakpoint={breakpoint}\n      data-cols={cols}\n      data-resizeable={resizeable || undefined}\n      id={id}\n      ref={useForkRef(rootRef, ref)}\n      style={style}\n    >\n      {content}\n    </div>\n  );\n});\nFluidGrid.displayName = \"FluidGrid\";\n"],"names":["forwardRef","FluidGrid","useMemo","asReactElements","useResponsiveSizing","useBreakpoints","jsx","useForkRef"],"mappings":";;;;;;;;;;;AASA,MAAM,SAAY,GAAA,aAAA,CAAA;AAMX,MAAM,SAAY,GAAAA,gBAAA,CAAW,SAASC,UAAAA,CAC3C,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,MAAA;AAAA,IACA,MAAM,QAAW,GAAA,EAAA;AAAA,IACjB,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAM,GAAA,CAAA;AAAA,IACN,QAAA;AAAA,IACA,EAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAIJ,EAAM,MAAA,QAAA,GAAWC,cAAQ,MAAM;AAC7B,IAAA,OAAOC,yBAAgB,YAAY,CAAA,CAAA;AAAA,GACrC,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAYC,uCAAoB,CAAA;AAAA,IACrD,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAAC,6BAAA;AAAA,IACjB;AAAA,MACE,WAAA;AAAA,KACF;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,IACzB,CAAC,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM,GAAG,GAAA;AAAA,IACtB,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,QAAA;AAAA,IAC5B,WAAa,EAAA,QAAA;AAAA,IACb,WAAa,EAAA,QAAA;AAAA,GACd,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,WAAa,EAAA,OAAA;AAAA,IACb,kBAAoB,EAAA,IAAA;AAAA,IACpB,YAAc,EAAA,GAAA;AAAA,GAChB,CAAA;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAiB,EAAA,UAAA;AAAA,MACjB,WAAW,EAAA,IAAA;AAAA,MACX,mBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,MAC/B,EAAA;AAAA,MACA,GAAA,EAAKC,eAAW,CAAA,OAAA,EAAS,GAAG,CAAA;AAAA,MAC5B,KAAA;AAAA,MAEC,QAAA,EAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC,EAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}
+{"version":3,"file":"FluidGrid.js","sources":["../../src/flexbox/FluidGrid.tsx"],"sourcesContent":["import { asReactElements } from \"@vuu-ui/vuu-utils\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, useMemo } from \"react\";\nimport { useBreakpoints } from \"../responsive\";\nimport { FlexboxProps } from \"./flexboxTypes\";\nimport { useResponsiveSizing } from \"./useResponsiveSizing\";\n\nimport fluidGridCss from \"./FluidGrid.css\";\n\nconst classBase = \"hwFluidGrid\";\n\nexport interface FluidGridProps extends FlexboxProps {\n  showGrid?: boolean;\n}\n\nexport const FluidGrid = forwardRef(function FluidGrid(\n  props: FluidGridProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    breakPoints,\n    children: childrenProp,\n    column,\n    cols: colsProp = 12,\n    className: classNameProp,\n    flexFill,\n    gap = 3,\n    fullPage,\n    id,\n    onSplitterMoved,\n    resizeable,\n    row,\n    showGrid,\n    spacing,\n    splitterSize,\n    style: styleProp,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-fluid-grid\",\n    css: fluidGridCss,\n    window: targetWindow,\n  });\n\n  //TODO does thie useMemo serve any actual purpose or will childrenProp\n  // always be new anyway ?\n  const children = useMemo(() => {\n    return asReactElements(childrenProp);\n  }, [childrenProp]);\n\n  const { cols, content, rootRef } = useResponsiveSizing({\n    children,\n    cols: colsProp,\n    style: styleProp,\n  });\n\n  const breakpoint = useBreakpoints(\n    {\n      breakPoints,\n    },\n    rootRef\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-column`]: column,\n    [`${classBase}-row`]: row,\n    [`${classBase}-show-grid`]: showGrid,\n    \"flex-fill\": flexFill,\n    \"full-page\": fullPage,\n  });\n\n  const style = {\n    ...styleProp,\n    \"--spacing\": spacing,\n    \"--grid-col-count\": cols,\n    \"--grid-gap\": gap,\n  };\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      data-breakpoint={breakpoint}\n      data-cols={cols}\n      data-resizeable={resizeable || undefined}\n      id={id}\n      ref={useForkRef(rootRef, ref)}\n      style={style}\n    >\n      {content}\n    </div>\n  );\n});\nFluidGrid.displayName = \"FluidGrid\";\n"],"names":["forwardRef","FluidGrid","useWindow","useComponentCssInjection","fluidGridCss","useMemo","asReactElements","useResponsiveSizing","useBreakpoints","jsx","useForkRef"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,aAAA,CAAA;AAMX,MAAM,SAAY,GAAAA,gBAAA,CAAW,SAASC,UAAAA,CAC3C,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,MAAA;AAAA,IACA,MAAM,QAAW,GAAA,EAAA;AAAA,IACjB,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,IACA,GAAM,GAAA,CAAA;AAAA,IACN,QAAA;AAAA,IACA,EAAA;AAAA,IACA,eAAA;AAAA,IACA,UAAA;AAAA,IACA,GAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,GAAG,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAID,EAAM,MAAA,QAAA,GAAWC,cAAQ,MAAM;AAC7B,IAAA,OAAOC,yBAAgB,YAAY,CAAA,CAAA;AAAA,GACrC,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAA,MAAM,EAAE,IAAA,EAAM,OAAS,EAAA,OAAA,KAAYC,uCAAoB,CAAA;AAAA,IACrD,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAAC,6BAAA;AAAA,IACjB;AAAA,MACE,WAAA;AAAA,KACF;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,MAAA;AAAA,IACzB,CAAC,CAAA,EAAG,SAAS,CAAA,IAAA,CAAM,GAAG,GAAA;AAAA,IACtB,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG,QAAA;AAAA,IAC5B,WAAa,EAAA,QAAA;AAAA,IACb,WAAa,EAAA,QAAA;AAAA,GACd,CAAA,CAAA;AAED,EAAA,MAAM,KAAQ,GAAA;AAAA,IACZ,GAAG,SAAA;AAAA,IACH,WAAa,EAAA,OAAA;AAAA,IACb,kBAAoB,EAAA,IAAA;AAAA,IACpB,YAAc,EAAA,GAAA;AAAA,GAChB,CAAA;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA;AAAA,MACA,iBAAiB,EAAA,UAAA;AAAA,MACjB,WAAW,EAAA,IAAA;AAAA,MACX,mBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,MAC/B,EAAA;AAAA,MACA,GAAA,EAAKC,eAAW,CAAA,OAAA,EAAS,GAAG,CAAA;AAAA,MAC5B,KAAA;AAAA,MAEC,QAAA,EAAA,OAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC,EAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;;;;"}

package/cjs/layout-header/Header.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var headerCss = ".vuuHeader {\n  --saltButton-height: 24px;\n  --saltButton-width: 24px;\n}\n\n.salt-density-high .vuuHeader {\n--saltToolbarField-marginTop: 0;\n}\n\n";
+
+module.exports = headerCss;
+//# sourceMappingURL=Header.css.js.map

package/cjs/layout-header/Header.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/layout-header/Header.js

@@ -3,12 +3,15 @@
 var jsxRuntime = require('react/jsx-runtime');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var cx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var React = require('react');
 require('@vuu-ui/vuu-utils');
 require('../layout-provider/LayoutProviderContext.js');
 require('../drag-drop/Draggable.js');
 require('../drag-drop/BoxModel.js');
 var ViewContext = require('../layout-view-actions/ViewContext.js');
+var Header$1 = require('./Header.css.js');
 
 const classBase = "vuuHeader";
 const Header = ({
@@ -21,6 +24,12 @@ const Header = ({
   style,
   title = "Untitled"
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-header",
+    css: Header$1,
+    window: targetWindow
+  });
   const labelFieldRef = React.useRef(null);
   const [value, setValue] = React.useState(title);
   const [editing, setEditing] = React.useState(false);

package/cjs/layout-header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport {\n  cloneElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { Contribution, useViewDispatch } from \"../layout-view-actions\";\n\nimport \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n  collapsed?: boolean;\n  contributions?: Contribution[];\n  expanded?: boolean;\n  closeable?: boolean;\n  onEditTitle: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n  className: classNameProp,\n  contributions,\n  collapsed,\n  closeable,\n  onEditTitle,\n  orientation: orientationProp = \"horizontal\",\n  style,\n  title = \"Untitled\",\n}: HeaderProps) => {\n  const labelFieldRef = useRef<HTMLDivElement>(null);\n  const [value, setValue] = useState<string>(title);\n  const [editing, setEditing] = useState<boolean>(false);\n\n  const viewDispatch = useViewDispatch();\n  const handleClose = (evt: MouseEvent) =>\n    viewDispatch?.({ type: \"remove\" }, evt);\n\n  const handleTitleMouseDown = () => {\n    labelFieldRef.current?.focus();\n  };\n\n  const handleButtonMouseDown = (evt: MouseEvent) => {\n    // do not allow drag to be initiated\n    evt.stopPropagation();\n  };\n\n  const orientation = collapsed || orientationProp;\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  const handleEnterEditMode = () => {\n    setEditing(true);\n  };\n\n  const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n    if (evt.key === \"Enter\") {\n      setEditing(true);\n    }\n  };\n\n  const handleExitEditMode = (\n    originalValue = \"\",\n    finalValue = \"\",\n    allowDeactivation = true,\n    editCancelled = false\n  ) => {\n    setEditing(false);\n    if (editCancelled) {\n      setValue(originalValue);\n    } else if (finalValue !== originalValue) {\n      setValue(finalValue);\n      onEditTitle?.(finalValue);\n    }\n    if (allowDeactivation === false) {\n      labelFieldRef.current?.focus();\n    }\n  };\n\n  const handleMouseDown = (e: MouseEvent) => {\n    viewDispatch?.({ type: \"mousedown\" }, e);\n  };\n\n  const toolbarItems: ReactElement[] = [];\n  const postTitleContributedItems: ReactElement[] = [];\n  const actionButtons: ReactElement[] = [];\n\n  contributions?.forEach((contribution, i) => {\n    switch (contribution.location) {\n      case \"pre-title\":\n        toolbarItems.push(cloneElement(contribution.content, { key: i }));\n        break;\n      default:\n        postTitleContributedItems.push(\n          cloneElement(contribution.content, { key: i })\n        );\n    }\n  });\n\n  title &&\n    toolbarItems.push(\n      <EditableLabel\n        className={`${classBase}-title`}\n        editing={editing}\n        key=\"title\"\n        value={value}\n        onChange={setValue}\n        onMouseDownCapture={handleTitleMouseDown}\n        onEnterEditMode={handleEnterEditMode}\n        onExitEditMode={handleExitEditMode}\n        onKeyDown={handleTitleKeyDown}\n        ref={labelFieldRef}\n        tabIndex={0}\n      />\n    );\n\n  closeable &&\n    actionButtons.push(\n      <IconButton\n        icon=\"close\"\n        key=\"close\"\n        onClick={handleClose}\n        onMouseDown={handleButtonMouseDown}\n        variant=\"secondary\"\n      />\n    );\n\n  postTitleContributedItems.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"contributions\">\n        {postTitleContributedItems}\n      </div>\n    );\n\n  actionButtons.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"actions\">\n        {actionButtons}\n      </div>\n    );\n\n  return (\n    <div\n      className={cx(\"vuuToolbarProxy\", className)}\n      style={style}\n      onMouseDown={handleMouseDown}\n    >\n      {toolbarItems}\n      {/* \n      {collapsed === false ? (\n        <ActionButton\n          aria-label=\"Minimize View\"\n          actionId=\"minimize\"\n          iconName=\"minimize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {collapsed ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"double-chevron-right\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded === false ? (\n        <ActionButton\n          aria-label=\"Maximize View\"\n          actionId=\"maximize\"\n          iconName=\"maximize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"restore\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {tearOut ? (\n        <ActionButton\n          aria-label=\"Tear out View\"\n          actionId=\"tearout\"\n          iconName=\"tear-out\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {closeable ? (\n        <Button\n          aria-label=\"close\"\n          data-icon\n          onClick={handleClose}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null} */}\n    </div>\n  );\n};\n"],"names":["useRef","useState","useViewDispatch","cloneElement","jsx","EditableLabel","IconButton"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  cloneElement,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { Contribution, useViewDispatch } from \"../layout-view-actions\";\n\nimport headerCss from \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n  collapsed?: boolean;\n  contributions?: Contribution[];\n  expanded?: boolean;\n  closeable?: boolean;\n  onEditTitle: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n  className: classNameProp,\n  contributions,\n  collapsed,\n  closeable,\n  onEditTitle,\n  orientation: orientationProp = \"horizontal\",\n  style,\n  title = \"Untitled\",\n}: HeaderProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-header\",\n    css: headerCss,\n    window: targetWindow,\n  });\n\n  const labelFieldRef = useRef<HTMLDivElement>(null);\n  const [value, setValue] = useState<string>(title);\n  const [editing, setEditing] = useState<boolean>(false);\n\n  const viewDispatch = useViewDispatch();\n  const handleClose = (evt: MouseEvent) =>\n    viewDispatch?.({ type: \"remove\" }, evt);\n\n  const handleTitleMouseDown = () => {\n    labelFieldRef.current?.focus();\n  };\n\n  const handleButtonMouseDown = (evt: MouseEvent) => {\n    // do not allow drag to be initiated\n    evt.stopPropagation();\n  };\n\n  const orientation = collapsed || orientationProp;\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  const handleEnterEditMode = () => {\n    setEditing(true);\n  };\n\n  const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n    if (evt.key === \"Enter\") {\n      setEditing(true);\n    }\n  };\n\n  const handleExitEditMode = (\n    originalValue = \"\",\n    finalValue = \"\",\n    allowDeactivation = true,\n    editCancelled = false\n  ) => {\n    setEditing(false);\n    if (editCancelled) {\n      setValue(originalValue);\n    } else if (finalValue !== originalValue) {\n      setValue(finalValue);\n      onEditTitle?.(finalValue);\n    }\n    if (allowDeactivation === false) {\n      labelFieldRef.current?.focus();\n    }\n  };\n\n  const handleMouseDown = (e: MouseEvent) => {\n    viewDispatch?.({ type: \"mousedown\" }, e);\n  };\n\n  const toolbarItems: ReactElement[] = [];\n  const postTitleContributedItems: ReactElement[] = [];\n  const actionButtons: ReactElement[] = [];\n\n  contributions?.forEach((contribution, i) => {\n    switch (contribution.location) {\n      case \"pre-title\":\n        toolbarItems.push(cloneElement(contribution.content, { key: i }));\n        break;\n      default:\n        postTitleContributedItems.push(\n          cloneElement(contribution.content, { key: i })\n        );\n    }\n  });\n\n  title &&\n    toolbarItems.push(\n      <EditableLabel\n        className={`${classBase}-title`}\n        editing={editing}\n        key=\"title\"\n        value={value}\n        onChange={setValue}\n        onMouseDownCapture={handleTitleMouseDown}\n        onEnterEditMode={handleEnterEditMode}\n        onExitEditMode={handleExitEditMode}\n        onKeyDown={handleTitleKeyDown}\n        ref={labelFieldRef}\n        tabIndex={0}\n      />\n    );\n\n  closeable &&\n    actionButtons.push(\n      <IconButton\n        icon=\"close\"\n        key=\"close\"\n        onClick={handleClose}\n        onMouseDown={handleButtonMouseDown}\n        variant=\"secondary\"\n      />\n    );\n\n  postTitleContributedItems.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"contributions\">\n        {postTitleContributedItems}\n      </div>\n    );\n\n  actionButtons.length > 0 &&\n    toolbarItems.push(\n      <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"actions\">\n        {actionButtons}\n      </div>\n    );\n\n  return (\n    <div\n      className={cx(\"vuuToolbarProxy\", className)}\n      style={style}\n      onMouseDown={handleMouseDown}\n    >\n      {toolbarItems}\n      {/* \n      {collapsed === false ? (\n        <ActionButton\n          aria-label=\"Minimize View\"\n          actionId=\"minimize\"\n          iconName=\"minimize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {collapsed ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"double-chevron-right\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded === false ? (\n        <ActionButton\n          aria-label=\"Maximize View\"\n          actionId=\"maximize\"\n          iconName=\"maximize\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {expanded ? (\n        <ActionButton\n          aria-label=\"Restore View\"\n          actionId=\"restore\"\n          iconName=\"restore\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {tearOut ? (\n        <ActionButton\n          aria-label=\"Tear out View\"\n          actionId=\"tearout\"\n          iconName=\"tear-out\"\n          onClick={handleAction}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null}\n      {closeable ? (\n        <Button\n          aria-label=\"close\"\n          data-icon\n          onClick={handleClose}\n          onMouseDown={handleButtonMouseDown}\n        />\n      ) : null} */}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCss","useRef","useState","useViewDispatch","cloneElement","jsx","EditableLabel","IconButton"],"mappings":"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"}

package/cjs/layout-provider/useLayoutDragDrop.js

@@ -4,6 +4,8 @@ var React = require('react');
 var Draggable = require('../drag-drop/Draggable.js');
 require('react/jsx-runtime');
 require('clsx');
+require('@salt-ds/styles');
+require('@salt-ds/window');
 var pathUtils = require('../utils/pathUtils.js');
 require('../drag-drop/BoxModel.js');
 var flexUtils = require('../layout-reducer/flexUtils.js');

package/cjs/layout-provider/useLayoutDragDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"useLayoutDragDrop.js","sources":["../../src/layout-provider/useLayoutDragDrop.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useRef } from \"react\";\nimport {\n  DragDropRect,\n  DragEndCallback,\n  Draggable,\n  DragInstructions,\n} from \"../drag-drop\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { getIntrinsicSize } from \"../layout-reducer/flexUtils\";\nimport { followPath, resolvePath } from \"../utils\";\nimport { LayoutProviderDispatch } from \"./LayoutProviderContext\";\n\nconst NO_INSTRUCTIONS = {} as DragInstructions;\nconst NO_OFFSETS: [number, number] = [0, 0];\n\ninterface CurrentDragAction extends Omit<DragStartAction, \"evt\" | \"type\"> {\n  dragContainerPath: string;\n}\n\ninterface DragOperation {\n  payload: ReactElement;\n  originalCSS: string;\n  dragRect: unknown;\n  dragInstructions: DragInstructions;\n  dragOffsets: [number, number];\n  targetPosition: { left: number; top: number };\n}\n\nconst getDragElement = (\n  rect: DragDropRect,\n  id: string,\n  dragElement?: HTMLElement\n): [HTMLElement, string, number, number] => {\n  const wrapper = document.createElement(\"div\");\n  wrapper.className = \"vuuSimpleDraggableWrapper\";\n  wrapper.classList.add(\n    \"vuuSimpleDraggableWrapper\",\n    \"salt-theme\",\n    \"salt-density-medium\"\n  );\n  wrapper.dataset.dragging = \"true\";\n\n  const div = dragElement ?? document.createElement(\"div\");\n  div.id = id;\n\n  wrapper.appendChild(div);\n  document.body.appendChild(wrapper);\n  const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;\n  return [wrapper, cssText, rect.left, rect.top];\n};\n\nconst determineDragOffsets = (\n  draggedElement: HTMLElement\n): [number, number] => {\n  const { offsetParent } = draggedElement;\n  if (offsetParent === null) {\n    return NO_OFFSETS;\n  } else {\n    const { left: offsetLeft, top: offsetTop } =\n      offsetParent.getBoundingClientRect();\n    return [offsetLeft, offsetTop];\n  }\n};\n\nexport const useLayoutDragDrop = (\n  rootLayoutRef: MutableRefObject<ReactElement>,\n  dispatch: LayoutProviderDispatch,\n  pathToDropTarget?: string\n) => {\n  const dragActionRef = useRef<CurrentDragAction>();\n  const dragOperationRef = useRef<DragOperation>();\n  const draggableHTMLElementRef = useRef<HTMLElement>();\n\n  const handleDrag = useCallback((x, y) => {\n    if (dragOperationRef.current && draggableHTMLElementRef.current) {\n      const {\n        dragOffsets: [offsetX, offsetY],\n        targetPosition,\n      } = dragOperationRef.current;\n      const left = typeof x === \"number\" ? x - offsetX : targetPosition.left;\n      const top = typeof y === \"number\" ? y - offsetY : targetPosition.top;\n      if (left !== targetPosition.left || top !== targetPosition.top) {\n        dragOperationRef.current.targetPosition.left = left;\n        dragOperationRef.current.targetPosition.top = top;\n        draggableHTMLElementRef.current.style.top = top + \"px\";\n        draggableHTMLElementRef.current.style.left = left + \"px\";\n      }\n    }\n  }, []);\n\n  const handleDrop: DragEndCallback = useCallback(\n    (dropTarget) => {\n      if (dragOperationRef.current) {\n        const {\n          dragInstructions,\n          payload: draggedReactElement,\n          originalCSS,\n        } = dragOperationRef.current;\n\n        if (dropTarget) {\n          dispatch({\n            type: \"drag-drop\",\n            draggedReactElement,\n            dragInstructions,\n            dropTarget,\n          });\n        }\n\n        if (draggableHTMLElementRef.current) {\n          if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {\n            console.log(\"drift back to start\");\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else if (dragInstructions.RemoveDraggableOnDragEnd) {\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else {\n            draggableHTMLElementRef.current.style.cssText = originalCSS;\n            delete draggableHTMLElementRef.current.dataset.dragging;\n          }\n        }\n\n        dragActionRef.current = undefined;\n        dragOperationRef.current = undefined;\n        draggableHTMLElementRef.current = undefined;\n      }\n    },\n    [dispatch]\n  );\n\n  const handleDragStart = useCallback(\n    (evt: MouseEvent) => {\n      if (dragActionRef.current) {\n        const {\n          payload: component,\n          dragContainerPath,\n          dragElement,\n          dragRect,\n          instructions = NO_INSTRUCTIONS,\n          path,\n        } = dragActionRef.current;\n        const { current: rootLayout } = rootLayoutRef;\n        const dragPos = { x: evt.clientX, y: evt.clientY };\n        const dragPayload = component ?? followPath(rootLayout, path, true);\n        const { id: dragPayloadId } = dragPayload.props;\n        const intrinsicSize = getIntrinsicSize(dragPayload);\n        let originalCSS = \"\",\n          dragCSS = \"\",\n          dragTransform = \"\";\n\n        let dragStartLeft = -1;\n        let dragStartTop = -1;\n        let dragOffsets: [number, number] = NO_OFFSETS;\n\n        let element = document.getElementById(dragPayloadId);\n\n        if (element === null) {\n          [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(\n            dragRect,\n            dragPayloadId,\n            dragElement\n          );\n        } else {\n          dragOffsets = determineDragOffsets(element);\n          const [offsetLeft, offsetTop] = dragOffsets;\n          const { width, height, left, top } = element.getBoundingClientRect();\n          dragStartLeft = left - offsetLeft;\n          dragStartTop = top - offsetTop;\n          dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;\n          element.dataset.dragging = \"true\";\n          originalCSS = element.style.cssText;\n        }\n\n        dragTransform = Draggable.initDrag(\n          rootLayoutRef.current,\n          dragContainerPath,\n          dragRect,\n          dragPos,\n          {\n            drag: handleDrag,\n            drop: handleDrop,\n          },\n          intrinsicSize\n          // dropTargets\n        );\n\n        element.style.cssText = dragCSS + dragTransform;\n        draggableHTMLElementRef.current = element;\n\n        dragOperationRef.current = {\n          payload: dragPayload,\n          originalCSS,\n          dragRect,\n          dragOffsets,\n          dragInstructions: instructions,\n          targetPosition: { left: dragStartLeft, top: dragStartTop },\n        };\n      }\n    },\n    [handleDrag, handleDrop, rootLayoutRef]\n  );\n\n  const prepareToDrag = useCallback(\n    (action: DragStartAction) => {\n      const { evt, ...options } = action;\n      dragActionRef.current = {\n        ...options,\n        dragContainerPath: resolvePath(rootLayoutRef.current, pathToDropTarget),\n      };\n      Draggable.handleMousedown(evt, handleDragStart, options.instructions);\n    },\n    [handleDragStart, pathToDropTarget, rootLayoutRef]\n  );\n\n  return prepareToDrag;\n};\n"],"names":["useRef","useCallback","followPath","getIntrinsicSize","Draggable","resolvePath"],"mappings":"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"}
+{"version":3,"file":"useLayoutDragDrop.js","sources":["../../src/layout-provider/useLayoutDragDrop.ts"],"sourcesContent":["import { MutableRefObject, ReactElement, useCallback, useRef } from \"react\";\nimport {\n  DragDropRect,\n  DragEndCallback,\n  Draggable,\n  DragInstructions,\n} from \"../drag-drop\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { getIntrinsicSize } from \"../layout-reducer/flexUtils\";\nimport { followPath, resolvePath } from \"../utils\";\nimport { LayoutProviderDispatch } from \"./LayoutProviderContext\";\n\nconst NO_INSTRUCTIONS = {} as DragInstructions;\nconst NO_OFFSETS: [number, number] = [0, 0];\n\ninterface CurrentDragAction extends Omit<DragStartAction, \"evt\" | \"type\"> {\n  dragContainerPath: string;\n}\n\ninterface DragOperation {\n  payload: ReactElement;\n  originalCSS: string;\n  dragRect: unknown;\n  dragInstructions: DragInstructions;\n  dragOffsets: [number, number];\n  targetPosition: { left: number; top: number };\n}\n\nconst getDragElement = (\n  rect: DragDropRect,\n  id: string,\n  dragElement?: HTMLElement\n): [HTMLElement, string, number, number] => {\n  const wrapper = document.createElement(\"div\");\n  wrapper.className = \"vuuSimpleDraggableWrapper\";\n  wrapper.classList.add(\n    \"vuuSimpleDraggableWrapper\",\n    \"salt-theme\",\n    \"salt-density-medium\"\n  );\n  wrapper.dataset.dragging = \"true\";\n\n  const div = dragElement ?? document.createElement(\"div\");\n  div.id = id;\n\n  wrapper.appendChild(div);\n  document.body.appendChild(wrapper);\n  const cssText = `top:${rect.top}px;left:${rect.left}px;width:${rect.width}px;height:${rect.height}px;`;\n  return [wrapper, cssText, rect.left, rect.top];\n};\n\nconst determineDragOffsets = (\n  draggedElement: HTMLElement\n): [number, number] => {\n  const { offsetParent } = draggedElement;\n  if (offsetParent === null) {\n    return NO_OFFSETS;\n  } else {\n    const { left: offsetLeft, top: offsetTop } =\n      offsetParent.getBoundingClientRect();\n    return [offsetLeft, offsetTop];\n  }\n};\n\nexport const useLayoutDragDrop = (\n  rootLayoutRef: MutableRefObject<ReactElement>,\n  dispatch: LayoutProviderDispatch,\n  pathToDropTarget?: string\n) => {\n  const dragActionRef = useRef<CurrentDragAction>();\n  const dragOperationRef = useRef<DragOperation>();\n  const draggableHTMLElementRef = useRef<HTMLElement>();\n\n  const handleDrag = useCallback((x, y) => {\n    if (dragOperationRef.current && draggableHTMLElementRef.current) {\n      const {\n        dragOffsets: [offsetX, offsetY],\n        targetPosition,\n      } = dragOperationRef.current;\n      const left = typeof x === \"number\" ? x - offsetX : targetPosition.left;\n      const top = typeof y === \"number\" ? y - offsetY : targetPosition.top;\n      if (left !== targetPosition.left || top !== targetPosition.top) {\n        dragOperationRef.current.targetPosition.left = left;\n        dragOperationRef.current.targetPosition.top = top;\n        draggableHTMLElementRef.current.style.top = top + \"px\";\n        draggableHTMLElementRef.current.style.left = left + \"px\";\n      }\n    }\n  }, []);\n\n  const handleDrop: DragEndCallback = useCallback(\n    (dropTarget) => {\n      if (dragOperationRef.current) {\n        const {\n          dragInstructions,\n          payload: draggedReactElement,\n          originalCSS,\n        } = dragOperationRef.current;\n\n        if (dropTarget) {\n          dispatch({\n            type: \"drag-drop\",\n            draggedReactElement,\n            dragInstructions,\n            dropTarget,\n          });\n        }\n\n        if (draggableHTMLElementRef.current) {\n          if (!dropTarget && dragInstructions.DriftHomeIfNoDropTarget) {\n            console.log(\"drift back to start\");\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else if (dragInstructions.RemoveDraggableOnDragEnd) {\n            document.body.removeChild(draggableHTMLElementRef.current);\n          } else {\n            draggableHTMLElementRef.current.style.cssText = originalCSS;\n            delete draggableHTMLElementRef.current.dataset.dragging;\n          }\n        }\n\n        dragActionRef.current = undefined;\n        dragOperationRef.current = undefined;\n        draggableHTMLElementRef.current = undefined;\n      }\n    },\n    [dispatch]\n  );\n\n  const handleDragStart = useCallback(\n    (evt: MouseEvent) => {\n      if (dragActionRef.current) {\n        const {\n          payload: component,\n          dragContainerPath,\n          dragElement,\n          dragRect,\n          instructions = NO_INSTRUCTIONS,\n          path,\n        } = dragActionRef.current;\n        const { current: rootLayout } = rootLayoutRef;\n        const dragPos = { x: evt.clientX, y: evt.clientY };\n        const dragPayload = component ?? followPath(rootLayout, path, true);\n        const { id: dragPayloadId } = dragPayload.props;\n        const intrinsicSize = getIntrinsicSize(dragPayload);\n        let originalCSS = \"\",\n          dragCSS = \"\",\n          dragTransform = \"\";\n\n        let dragStartLeft = -1;\n        let dragStartTop = -1;\n        let dragOffsets: [number, number] = NO_OFFSETS;\n\n        let element = document.getElementById(dragPayloadId);\n\n        if (element === null) {\n          [element, dragCSS, dragStartLeft, dragStartTop] = getDragElement(\n            dragRect,\n            dragPayloadId,\n            dragElement\n          );\n        } else {\n          dragOffsets = determineDragOffsets(element);\n          const [offsetLeft, offsetTop] = dragOffsets;\n          const { width, height, left, top } = element.getBoundingClientRect();\n          dragStartLeft = left - offsetLeft;\n          dragStartTop = top - offsetTop;\n          dragCSS = `width:${width}px;height:${height}px;left:${dragStartLeft}px;top:${dragStartTop}px;z-index: 100;background-color:#ccc;opacity: 0.6;`;\n          element.dataset.dragging = \"true\";\n          originalCSS = element.style.cssText;\n        }\n\n        dragTransform = Draggable.initDrag(\n          rootLayoutRef.current,\n          dragContainerPath,\n          dragRect,\n          dragPos,\n          {\n            drag: handleDrag,\n            drop: handleDrop,\n          },\n          intrinsicSize\n          // dropTargets\n        );\n\n        element.style.cssText = dragCSS + dragTransform;\n        draggableHTMLElementRef.current = element;\n\n        dragOperationRef.current = {\n          payload: dragPayload,\n          originalCSS,\n          dragRect,\n          dragOffsets,\n          dragInstructions: instructions,\n          targetPosition: { left: dragStartLeft, top: dragStartTop },\n        };\n      }\n    },\n    [handleDrag, handleDrop, rootLayoutRef]\n  );\n\n  const prepareToDrag = useCallback(\n    (action: DragStartAction) => {\n      const { evt, ...options } = action;\n      dragActionRef.current = {\n        ...options,\n        dragContainerPath: resolvePath(rootLayoutRef.current, pathToDropTarget),\n      };\n      Draggable.handleMousedown(evt, handleDragStart, options.instructions);\n    },\n    [handleDragStart, pathToDropTarget, rootLayoutRef]\n  );\n\n  return prepareToDrag;\n};\n"],"names":["useRef","useCallback","followPath","getIntrinsicSize","Draggable","resolvePath"],"mappings":"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"}