@vuu-ui/vuu-layout 2.1.19-beta.2 → 2.1.19-beta.4

package/esm/Component.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { registerComponent } from '@vuu-ui/vuu-utils';
+
+const Component = forwardRef(function Component2({ resizeable, ...props }, ref) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: "Component", ref });
+});
+Component.displayName = "Component";
+registerComponent("Component", Component, "component");
+
+export { Component as default };
+//# sourceMappingURL=Component.js.map

package/esm/Component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Component.js","sources":["../../../packages/vuu-layout/src/Component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\n\nexport interface ComponentProps extends HTMLAttributes<HTMLDivElement> {\n  resizeable?: boolean;\n}\n\nconst Component = forwardRef(function Component(\n  { resizeable, ...props }: ComponentProps,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  return <div {...props} className=\"Component\" ref={ref} />;\n}) as React.FunctionComponent<ComponentProps>;\nComponent.displayName = \"Component\";\n\nexport default Component;\n\nregisterComponent(\"Component\", Component, \"component\");\n"],"names":["Component"],"mappings":";;;;AAOM,MAAA,SAAA,GAAY,WAAW,SAASA,UAAAA,CACpC,EAAE,UAAY,EAAA,GAAG,KAAM,EAAA,EACvB,GACA,EAAA;AACA,EAAA,2BAAQ,KAAK,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAU,aAAY,GAAU,EAAA,CAAA;AACzD,CAAC;AACD,SAAA,CAAU,WAAc,GAAA,WAAA;AAIxB,iBAAkB,CAAA,WAAA,EAAa,WAAW,WAAW,CAAA;;;;"}

package/esm/LayoutContainer.css.js

@@ -0,0 +1,4 @@
+var layoutContainerCss = ".vuuLayoutContainer {\n  display: inline-block;\n  outline: none;\n}\n\n[data-dragging=\"true\"] {\n  position: absolute !important;\n  z-index: 100;\n}\n\n.vuuSimpleDraggableWrapper {\n  background-color: white;\n  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);\n}\n.vuuSimpleDraggableWrapper > * {\n  height: 100%;\n  width: 100%;\n}\n";
+
+export { layoutContainerCss as default };
+//# sourceMappingURL=LayoutContainer.css.js.map

package/esm/LayoutContainer.css.js.map

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

package/esm/LayoutContainer.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { registerComponent } from '@vuu-ui/vuu-utils';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import cx from 'clsx';
+import { forwardRef } from 'react';
+import layoutContainerCss from './LayoutContainer.css.js';
+
+const LayoutContainer = forwardRef(function LayoutContainer2({
+  children,
+  className: classNameProp,
+  dropTarget,
+  resizeable: _,
+  // ignore, its just a marker used by the layout system
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-layout-container",
+    css: layoutContainerCss,
+    window: targetWindow
+  });
+  const className = cx("vuuLayoutContainer", classNameProp);
+  return /* @__PURE__ */ jsx("div", { className, ref: forwardedRef, ...htmlAttributes, children });
+});
+const componentName = "LayoutContainer";
+LayoutContainer.displayName = componentName;
+registerComponent(componentName, LayoutContainer, "container");
+
+export { LayoutContainer };
+//# sourceMappingURL=LayoutContainer.js.map

package/esm/LayoutContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutContainer.js","sources":["../../../packages/vuu-layout/src/LayoutContainer.tsx"],"sourcesContent":["import { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\n\nimport layoutContainerCss from \"./LayoutContainer.css\";\n\nexport interface LayoutContainerProps extends HTMLAttributes<HTMLDivElement> {\n  dropTarget?: boolean;\n  resizeable?: boolean;\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const LayoutContainer = forwardRef(function LayoutContainer(\n  {\n    children,\n    className: classNameProp,\n    dropTarget,\n    resizeable: _, // ignore, its just a marker used by the layout system\n    ...htmlAttributes\n  }: LayoutContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-layout-container\",\n    css: layoutContainerCss,\n    window: targetWindow,\n  });\n\n  const className = cx(\"vuuLayoutContainer\", classNameProp);\n  return (\n    <div className={className} ref={forwardedRef} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n});\n\nconst componentName = \"LayoutContainer\";\n\nLayoutContainer.displayName = componentName;\n\nregisterComponent(componentName, LayoutContainer, \"container\");\n"],"names":["LayoutContainer"],"mappings":";;;;;;;;AAaa,MAAA,eAAA,GAAkB,UAAW,CAAA,SAASA,gBACjD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,UAAA;AAAA,EACA,UAAY,EAAA,CAAA;AAAA;AAAA,EACZ,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAA,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,oBAAA,EAAsB,aAAa,CAAA;AACxD,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAsB,KAAK,YAAe,EAAA,GAAG,gBAC/C,QACH,EAAA,CAAA;AAEJ,CAAC;AAED,MAAM,aAAgB,GAAA,iBAAA;AAEtB,eAAA,CAAgB,WAAc,GAAA,aAAA;AAE9B,iBAAkB,CAAA,aAAA,EAAe,iBAAiB,WAAW,CAAA;;;;"}

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

@@ -0,0 +1,4 @@
+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";
+
+export { dockLayoutCss as default };
+//# sourceMappingURL=DockLayout.css.js.map

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

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

package/esm/dock-layout/DockLayout.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { registerComponent, asReactElements, partition } from '@vuu-ui/vuu-utils';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useMemo } from 'react';
+import Drawer from './Drawer.js';
+import dockLayoutCss from './DockLayout.css.js';
+
+const isDrawer = (component) => component.type === Drawer;
+const isVertical = (element) => (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  element.props.position && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  element.props.position.match(/top|bottom/)
+);
+const classBase = "vuuDockLayout";
+const DockLayout = (props) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-dock-layput",
+    css: dockLayoutCss,
+    window: targetWindow
+  });
+  const { children, className: classNameProp, id, style } = props;
+  const childElements = useMemo(() => asReactElements(children), [children]);
+  const [drawers, content] = partition(childElements, isDrawer);
+  const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
+  const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
+  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
+  return /* @__PURE__ */ jsxs("div", { className, id, style, children: [
+    drawers,
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, children: content })
+  ] });
+};
+DockLayout.displayName = "DockLayout";
+registerComponent("DockLayout", DockLayout, "container");
+
+export { DockLayout as default };
+//# sourceMappingURL=DockLayout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DockLayout.js","sources":["../../../../packages/vuu-layout/src/dock-layout/DockLayout.tsx"],"sourcesContent":["import {\n  asReactElements,\n  partition,\n  registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactElement, useMemo } from \"react\";\nimport Drawer from \"./Drawer\";\n\nimport dockLayoutCss from \"./DockLayout.css\";\n\nconst isDrawer = (component: ReactElement) => component.type === Drawer;\nconst isVertical = (element: ReactElement) =>\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (element.props as any).position &&\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (element.props as any).position.match(/top|bottom/);\n\nexport type DockLayoutProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuDockLayout\";\n\nconst DockLayout = (props: DockLayoutProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-dock-layput\",\n    css: dockLayoutCss,\n    window: targetWindow,\n  });\n\n  const { children, className: classNameProp, id, style } = props;\n  const childElements = useMemo(() => asReactElements(children), [children]);\n\n  const [drawers, content] = partition(childElements, isDrawer);\n  const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);\n  const orientation =\n    verticalDrawers.length === 0\n      ? \"horizontal\"\n      : horizontalDrawers.length === 0\n        ? \"vertical\"\n        : \"both\";\n\n  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n  return (\n    <div className={className} id={id} style={style}>\n      {drawers}\n      <div className={`${classBase}-content`}>{content}</div>\n    </div>\n  );\n};\nDockLayout.displayName = \"DockLayout\";\n\nexport default DockLayout;\n\nregisterComponent(\"DockLayout\", DockLayout, \"container\");\n"],"names":[],"mappings":";;;;;;;;;AAaA,MAAM,QAAW,GAAA,CAAC,SAA4B,KAAA,SAAA,CAAU,IAAS,KAAA,MAAA;AACjE,MAAM,aAAa,CAAC,OAAA;AAAA;AAAA,EAEjB,QAAQ,KAAc,CAAA,QAAA;AAAA,EAEtB,OAAQ,CAAA,KAAA,CAAc,QAAS,CAAA,KAAA,CAAM,YAAY;AAAA,CAAA;AAIpD,MAAM,SAAY,GAAA,eAAA;AAEZ,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AAC7C,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,aAAe,EAAA,EAAA,EAAI,OAAU,GAAA,KAAA;AAC1D,EAAM,MAAA,aAAA,GAAgB,QAAQ,MAAM,eAAA,CAAgB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAEzE,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAA,SAAA,CAAU,eAAe,QAAQ,CAAA;AAC5D,EAAA,MAAM,CAAC,eAAiB,EAAA,iBAAiB,CAAI,GAAA,SAAA,CAAU,SAAS,UAAU,CAAA;AAC1E,EAAM,MAAA,WAAA,GACJ,gBAAgB,MAAW,KAAA,CAAA,GACvB,eACA,iBAAkB,CAAA,MAAA,KAAW,IAC3B,UACA,GAAA,MAAA;AAER,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA,aAAA,EAAe,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAE5E,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAsB,EAAA,EAAA,EAAQ,KAChC,EAAA,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,wBACA,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA;AAAA,GACnD,EAAA,CAAA;AAEJ;AACA,UAAA,CAAW,WAAc,GAAA,YAAA;AAIzB,iBAAkB,CAAA,YAAA,EAAc,YAAY,WAAW,CAAA;;;;"}

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

@@ -0,0 +1,4 @@
+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";
+
+export { drawerCss as default };
+//# sourceMappingURL=Drawer.css.js.map

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

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

package/esm/dock-layout/Drawer.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useControlled, Button } from '@salt-ds/core';
+import cx from 'clsx';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { useCallback } from 'react';
+import drawerCss from './Drawer.css.js';
+
+const classBase = "vuuDrawer";
+const sizeAttribute = (value) => {
+  return typeof value === "string" ? value : value + "px";
+};
+const getStyle = (styleProp, sizeOpen, sizeClosed) => {
+  const hasSizeOpen = sizeOpen !== void 0;
+  const hasSizeClosed = sizeClosed !== void 0;
+  if (!styleProp && !hasSizeClosed && !hasSizeOpen) {
+    return void 0;
+  }
+  if (!hasSizeClosed && !hasSizeOpen) {
+    return styleProp;
+  }
+  return {
+    ...styleProp,
+    "--drawer-size": hasSizeOpen ? sizeAttribute(sizeOpen) : void 0,
+    "--drawer-peek-size": hasSizeClosed ? sizeAttribute(sizeClosed) : void 0
+  };
+};
+const Drawer = ({
+  children,
+  className: classNameProp,
+  clickToOpen,
+  defaultOpen,
+  sizeOpen,
+  sizeClosed,
+  style: styleProp,
+  open: openProp,
+  position = "left",
+  inline,
+  onClick,
+  peekaboo = false,
+  toggleButton,
+  ...props
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-drawer",
+    css: drawerCss,
+    window: targetWindow
+  });
+  const [open, setOpen] = useControlled({
+    controlled: openProp,
+    default: defaultOpen ?? false,
+    name: "Drawer",
+    state: "open"
+  });
+  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {
+    [`${classBase}-open`]: open,
+    [`${classBase}-inline`]: inline,
+    [`${classBase}-over`]: !inline,
+    [`${classBase}-peekaboo`]: peekaboo
+  });
+  const toggleDrawer = useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+  const style = getStyle(styleProp, sizeOpen, sizeClosed);
+  const handleClick = clickToOpen ? toggleDrawer : onClick;
+  const renderToggleButton = () => /* @__PURE__ */ jsx("div", { className: cx("vuuToggleButton-container"), children: open ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "close",
+      onClick: toggleDrawer,
+      "data-icon": "close",
+      variant: "secondary"
+    }
+  ) : /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": "open",
+      onClick: toggleDrawer,
+      "data-icon": "close",
+      variant: "secondary"
+    }
+  ) });
+  return /* @__PURE__ */ jsxs("div", { ...props, className, onClick: handleClick, style, children: [
+    toggleButton == "start" ? renderToggleButton() : null,
+    /* @__PURE__ */ jsx("div", { className: `${classBase}-liner`, children: /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, children }) }),
+    toggleButton == "end" ? renderToggleButton() : null
+  ] });
+};
+Drawer.displayName = "Drawer";
+
+export { Drawer as default };
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../packages/vuu-layout/src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport drawerCss from \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n  return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n  styleProp?: CSSProperties,\n  sizeOpen?: number,\n  sizeClosed?: number,\n) => {\n  const hasSizeOpen = sizeOpen !== undefined;\n  const hasSizeClosed = sizeClosed !== undefined;\n\n  if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n    return undefined;\n  }\n\n  if (!hasSizeClosed && !hasSizeOpen) {\n    return styleProp;\n  }\n\n  return {\n    ...styleProp,\n    \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n    \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n  };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n  clickToOpen?: boolean;\n  defaultOpen?: boolean;\n  inline?: boolean;\n  open?: boolean;\n  peekaboo?: boolean;\n  position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  sizeOpen?: number;\n  sizeClosed?: number;\n  toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n  children,\n  className: classNameProp,\n  clickToOpen,\n  defaultOpen,\n  sizeOpen,\n  sizeClosed,\n  style: styleProp,\n  open: openProp,\n  position = \"left\",\n  inline,\n  onClick,\n  peekaboo = false,\n  toggleButton,\n  ...props\n}: DrawerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: defaultOpen ?? false,\n    name: \"Drawer\",\n    state: \"open\",\n  });\n\n  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n    [`${classBase}-open`]: open,\n    [`${classBase}-inline`]: inline,\n    [`${classBase}-over`]: !inline,\n    [`${classBase}-peekaboo`]: peekaboo,\n  });\n\n  const toggleDrawer = useCallback(() => {\n    setOpen(!open);\n  }, [open, setOpen]);\n\n  const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n  const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n  const renderToggleButton = () => (\n    <div className={cx(\"vuuToggleButton-container\")}>\n      {open ? (\n        <Button\n          aria-label=\"close\"\n          onClick={toggleDrawer}\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <Button\n          aria-label=\"open\"\n          onClick={toggleDrawer}\n          data-icon=\"close\"\n          variant=\"secondary\"\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div {...props} className={className} onClick={handleClick} style={style}>\n      {toggleButton == \"start\" ? renderToggleButton() : null}\n      <div className={`${classBase}-liner`}>\n        <div className={`${classBase}-content`}>{children}</div>\n      </div>\n      {toggleButton == \"end\" ? renderToggleButton() : null}\n    </div>\n  );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":[],"mappings":"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"}

package/esm/drag-drop/BoxModel.js

@@ -0,0 +1,409 @@
+import { boxContainsPoint, isContainer } from '@vuu-ui/vuu-utils';
+import 'react';
+import { getProps } from '../utils/propUtils.js';
+import { typeOf } from '../utils/typeOf.js';
+
+const positionValues = {
+  north: 1,
+  east: 2,
+  south: 4,
+  west: 8,
+  header: 16,
+  centre: 32,
+  absolute: 64
+};
+const RelativeDropPosition = {
+  AFTER: "after",
+  BEFORE: "before"
+};
+const Position = Object.freeze({
+  North: _position("north"),
+  East: _position("east"),
+  South: _position("south"),
+  West: _position("west"),
+  Header: _position("header"),
+  Centre: _position("centre"),
+  Absolute: _position("absolute")
+});
+function _position(str) {
+  return Object.freeze({
+    offset: str === "north" || str === "west" ? 0 : str === "south" || str === "east" ? 1 : NaN,
+    valueOf: function() {
+      return positionValues[str];
+    },
+    toString: function() {
+      return str;
+    },
+    North: str === "north",
+    South: str === "south",
+    East: str === "east",
+    West: str === "west",
+    Header: str === "header",
+    Centre: str === "centre",
+    NorthOrSouth: str === "north" || str === "south",
+    EastOrWest: str === "east" || str === "west",
+    NorthOrWest: str === "north" || str === "west",
+    SouthOrEast: str === "east" || str === "south",
+    Absolute: str === "absolute"
+  });
+}
+const NORTH = Position.North, SOUTH = Position.South, EAST = Position.East, WEST = Position.West, HEADER = Position.Header, CENTRE = Position.Centre;
+class BoxModel {
+  //TODO we should accept initial let,top offsets here
+  // if dropTargets are supplied, we will only allow drop operations directly on these targets
+  // TODO we will need to make this more flexible e.g allowing drop anywhere within these target
+  static measure(model, dropTargetPaths = []) {
+    const measurements = {};
+    measureRootComponent(model, measurements, dropTargetPaths);
+    return measurements;
+  }
+  static allBoxesContainingPoint(layout, measurements, x, y, validDropTargets) {
+    return allBoxesContainingPoint(
+      layout,
+      measurements,
+      x,
+      y,
+      validDropTargets
+    ).reverse();
+  }
+}
+function pointPositionWithinRect(x, y, rect, borderZone = 30) {
+  const width = rect.right - rect.left;
+  const height = rect.bottom - rect.top;
+  const posX = x - rect.left;
+  const posY = y - rect.top;
+  let closeToTheEdge = 0;
+  if (posX < borderZone) closeToTheEdge += 8;
+  if (posX > width - borderZone) closeToTheEdge += 2;
+  if (posY < borderZone) closeToTheEdge += 1;
+  if (posY > height - borderZone) closeToTheEdge += 4;
+  return { pctX: posX / width, pctY: posY / height, closeToTheEdge };
+}
+function getPosition(x, y, rect, targetOrientation) {
+  const { BEFORE, AFTER } = RelativeDropPosition;
+  const { pctX, pctY, closeToTheEdge } = pointPositionWithinRect(x, y, rect);
+  let position;
+  let tab;
+  if (targetOrientation === "row") {
+    position = pctX < 0.5 ? WEST : EAST;
+  } else if (rect.header && boxContainsPoint(rect.header, x, y)) {
+    position = HEADER;
+    if (rect.Stack) {
+      const tabCount = rect.Stack.length;
+      if (tabCount === 0) {
+        tab = {
+          index: -1,
+          left: rect.left,
+          positionRelativeToTab: AFTER,
+          width: 0
+        };
+      } else {
+        const targetTab = rect.Stack.find(
+          ({ left, right }) => x >= left && x <= right
+        );
+        if (targetTab) {
+          const tabWidth = targetTab.right - targetTab.left;
+          tab = {
+            index: rect.Stack.indexOf(targetTab),
+            left: targetTab.left,
+            positionRelativeToTab: (x - targetTab.left) / tabWidth < 0.5 ? BEFORE : AFTER,
+            width: tabWidth
+          };
+        } else {
+          const lastTab = rect.Stack[tabCount - 1];
+          tab = {
+            left: lastTab.right,
+            width: 0,
+            index: tabCount,
+            positionRelativeToTab: AFTER
+          };
+        }
+      }
+    } else if (rect.header.titleWidth) {
+      const tabWidth = rect.header.titleWidth;
+      tab = {
+        index: -1,
+        left: rect.left,
+        positionRelativeToTab: (x - rect.left) / tabWidth < 0.5 ? BEFORE : AFTER,
+        width: tabWidth
+      };
+    } else {
+      tab = {
+        left: rect.left,
+        width: 0,
+        positionRelativeToTab: BEFORE,
+        index: -1
+      };
+    }
+  } else {
+    position = getPositionWithinBox(x, y, rect, pctX, pctY);
+  }
+  return { position, x, y, closeToTheEdge, tab };
+}
+function getPositionWithinBox(x, y, rect, pctX, pctY) {
+  const centerBox = getCenteredBox(rect, 0.2);
+  if (boxContainsPoint(centerBox, x, y)) {
+    return CENTRE;
+  } else {
+    const quadrant = `${pctY < 0.5 ? "north" : "south"}${pctX < 0.5 ? "west" : "east"}`;
+    switch (quadrant) {
+      case "northwest":
+        return pctX > pctY ? NORTH : WEST;
+      case "northeast":
+        return 1 - pctX > pctY ? NORTH : EAST;
+      case "southeast":
+        return pctX > pctY ? EAST : SOUTH;
+      case "southwest":
+        return 1 - pctX > pctY ? WEST : SOUTH;
+    }
+  }
+}
+function getCenteredBox({ right, left, top, bottom }, pctSize) {
+  const pctOffset = (1 - pctSize) / 2;
+  const w = (right - left) * pctOffset;
+  const h = (bottom - top) * pctOffset;
+  return { left: left + w, top: top + h, right: right - w, bottom: bottom - h };
+}
+function measureRootComponent(rootComponent, measurements, dropTargets) {
+  const {
+    id,
+    "data-path": dataPath,
+    path = dataPath
+  } = getProps(rootComponent);
+  const type = typeOf(rootComponent);
+  if (id && path) {
+    const [rect, el] = measureComponentDomElement(rootComponent);
+    measureComponent(rootComponent, rect, el, measurements);
+    if (isContainer(type)) {
+      collectChildMeasurements(rootComponent, measurements, dropTargets);
+    }
+  }
+}
+function measureComponent(component, rect, el, measurements) {
+  const {
+    "data-path": dataPath,
+    path = dataPath,
+    header
+  } = getProps(component);
+  measurements[path] = rect;
+  const type = typeOf(component);
+  if (header || type === "Stack") {
+    const query = type === "Stack" ? ".vuuTabstrip" : ".vuuHeader";
+    const headerEl = el.querySelector(query);
+    if (headerEl) {
+      const { top, left, right, bottom } = headerEl.getBoundingClientRect();
+      measurements[path].header = {
+        top: Math.round(top),
+        left: Math.round(left),
+        right: Math.round(right),
+        bottom: Math.round(bottom)
+      };
+      if (type === "Stack") {
+        measurements[path].Stack = Array.from(
+          headerEl.querySelectorAll(".vuuTab")
+        ).map((tab) => tab.getBoundingClientRect()).map(({ left: left2, right: right2 }) => ({ left: left2, right: right2 }));
+      } else {
+        const titleEl = headerEl.querySelector('[class^="vuuHeader-title"]');
+        const { header: header2 } = measurements[path];
+        if (titleEl && header2) {
+          header2.titleWidth = titleEl.clientWidth;
+        }
+      }
+    }
+  }
+  return measurements[path];
+}
+function collectChildMeasurements(component, measurements, dropTargets, preX = 0, posX = 0, preY = 0, posY = 0) {
+  const {
+    children,
+    "data-path": dataPath,
+    path = dataPath,
+    style,
+    active = 0
+  } = getProps(component);
+  const type = typeOf(component);
+  const isFlexbox = type === "Flexbox";
+  const isStack = type === "Stack";
+  const isTower = isFlexbox && style.flexDirection === "column";
+  const isTerrace = isFlexbox && style.flexDirection === "row";
+  const childrenToMeasure = isStack ? children.filter((_child, idx) => idx === active) : children.filter(omitDragging);
+  const childMeasurements = childrenToMeasure.map(
+    (child) => {
+      const [rect, el] = measureComponentDomElement(child);
+      return [
+        {
+          ...rect,
+          top: rect.top - preY,
+          right: rect.right + posX,
+          bottom: rect.bottom + posY,
+          left: rect.left - preX
+        },
+        el,
+        child
+      ];
+    }
+  );
+  const expandedMeasurements = childMeasurements.map(
+    ([rect, el, child], i, all) => {
+      let localPreX;
+      let localPosX;
+      let localPreY;
+      let localPosY;
+      let gapPre;
+      let gapPos;
+      const n = all.length - 1;
+      if (isTerrace) {
+        gapPre = i === 0 ? 0 : rect.left - all[i - 1][0].right;
+        gapPos = i === n ? 0 : all[i + 1][0].left - rect.right;
+        localPreX = i === 0 ? 0 : gapPre === 0 ? 0 : gapPre;
+        localPosX = i === n ? 0 : gapPos === 0 ? 0 : gapPos - gapPos / 2;
+        rect.left -= localPreX;
+        rect.right += localPosX;
+        localPreY = preY;
+        localPosY = posY;
+      } else if (isTower) {
+        gapPre = i === 0 ? 0 : rect.top - all[i - 1][0].bottom;
+        gapPos = i === n ? 0 : all[i + 1][0].top - rect.bottom;
+        localPreY = i === 0 ? 0 : gapPre === 0 ? 0 : gapPre;
+        localPosY = i === n ? 0 : gapPos === 0 ? 0 : gapPos - gapPos / 2;
+        rect.top -= localPreY;
+        rect.bottom += localPosY;
+        localPreX = preX;
+        localPosX = posX;
+      }
+      const componentMeasurements = measureComponent(
+        child,
+        rect,
+        el,
+        measurements
+      );
+      const childType = typeOf(child);
+      if (isContainer(childType)) {
+        collectChildMeasurements(
+          child,
+          measurements,
+          dropTargets,
+          localPreX,
+          localPosX,
+          localPreY,
+          localPosY
+        );
+      }
+      return componentMeasurements;
+    }
+  );
+  if (childMeasurements.length) {
+    measurements[path].children = expandedMeasurements;
+  }
+}
+function omitDragging(component) {
+  const { id } = getProps(component);
+  const el = document.getElementById(id);
+  if (el) {
+    return el.dataset.dragging !== "true";
+  } else {
+    console.warn(`BoxModel: no element found with id #${id}`);
+    return false;
+  }
+}
+function measureComponentDomElement(component) {
+  const { id } = getProps(component);
+  if (id === void 0) {
+    throw Error("`BoxModel.measureComponentElement, component has no id");
+  }
+  const el = document.getElementById(id);
+  if (!el) {
+    throw Error(
+      "BoxModel.measureComponentElement,  no DOM element found for component"
+    );
+  }
+  const { top, left, right, bottom, height, width } = el.getBoundingClientRect();
+  let scrolling = void 0;
+  const type = typeOf(component);
+  if (isContainer(type)) {
+    const scrollHeight = el.scrollHeight;
+    if (scrollHeight > height) {
+      scrolling = { id, scrollHeight, scrollTop: el.scrollTop };
+    }
+  }
+  return [
+    {
+      top: Math.round(top),
+      left: Math.round(left),
+      right: Math.round(right),
+      bottom: Math.round(bottom),
+      height: Math.round(height),
+      width: Math.round(width),
+      scrolling
+    },
+    el,
+    component
+  ];
+}
+function allBoxesContainingPoint(component, measurements, x, y, dropTargets, boxes = []) {
+  const {
+    children,
+    "data-path": dataPath,
+    path = dataPath
+  } = getProps(component);
+  const type = typeOf(component);
+  const rect = measurements[path];
+  if (!boxContainsPoint(rect, x, y)) return boxes;
+  if (dropTargets && dropTargets.length) {
+    if (dropTargets.includes(path)) {
+      boxes.push(component);
+    } else if (dropTargets.some((dropTargetPath) => dropTargetPath.startsWith(path))) ; else {
+      return boxes;
+    }
+  } else {
+    boxes.push(component);
+  }
+  if (!isContainer(type)) {
+    return boxes;
+  }
+  if (rect.header && boxContainsPoint(rect.header, x, y)) {
+    return boxes;
+  }
+  if (rect.scrolling) {
+    scrollIntoViewIfNeccesary(rect, x, y);
+  }
+  for (let i = 0; i < children.length; i++) {
+    if (type === "Stack" && component.props.active !== i) {
+      continue;
+    }
+    const nestedBoxes = allBoxesContainingPoint(
+      children[i],
+      measurements,
+      x,
+      y,
+      dropTargets
+    );
+    if (nestedBoxes.length) {
+      return boxes.concat(nestedBoxes);
+    }
+  }
+  return boxes;
+}
+function scrollIntoViewIfNeccesary({ top, bottom, scrolling }, x, y) {
+  if (scrolling) {
+    const { id, scrollTop, scrollHeight } = scrolling;
+    const height = bottom - top;
+    if (scrollTop === 0 && bottom - y < 50) {
+      const scrollMax = scrollHeight - height;
+      const el = document.getElementById(id);
+      el.scrollTo({ left: 0, top: scrollMax, behavior: "smooth" });
+      scrolling.scrollTop = scrollMax;
+    } else if (scrollTop > 0 && y - top < 50) {
+      const el = document.getElementById(id);
+      el.scrollTo({ left: 0, top: 0, behavior: "smooth" });
+      scrolling.scrollTop = 0;
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}
+
+export { BoxModel, Position, RelativeDropPosition, getPosition, pointPositionWithinRect, positionValues };
+//# sourceMappingURL=BoxModel.js.map