@vuu-ui/vuu-layout 0.8.34 → 0.8.35

package/package.json

@@ -1,18 +1,18 @@
 {
-  "version": "0.8.34",
+  "version": "0.8.35",
   "description": "VUU Layout Components",
   "author": "heswell",
   "license": "Apache-2.0",
   "types": "types/index.d.ts",
   "dependencies": {
     "@salt-ds/core": "1.17.0",
-    "@vuu-ui/vuu-data-types": "0.8.34",
-    "@vuu-ui/vuu-filters": "0.8.34",
-    "@vuu-ui/vuu-popups": "0.8.34",
-    "@vuu-ui/vuu-table": "0.8.34",
-    "@vuu-ui/vuu-table-extras": "0.8.34",
-    "@vuu-ui/vuu-ui-controls": "0.8.34",
-    "@vuu-ui/vuu-utils": "0.8.34"
+    "@vuu-ui/vuu-data-types": "0.8.35",
+    "@vuu-ui/vuu-filters": "0.8.35",
+    "@vuu-ui/vuu-popups": "0.8.35",
+    "@vuu-ui/vuu-table": "0.8.35",
+    "@vuu-ui/vuu-table-extras": "0.8.35",
+    "@vuu-ui/vuu-ui-controls": "0.8.35",
+    "@vuu-ui/vuu-utils": "0.8.35"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -21,8 +21,6 @@
   },
   "sideEffects": false,
   "files": [
-    "esm",
-    "cjs",
     "README.md",
     "/types"
   ],

package/cjs/Component.js

@@ -1,14 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ComponentRegistry = require('./registry/ComponentRegistry.js');
-
-const Component = React.forwardRef(function Component2({ resizeable, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: "Component", ref });
-});
-Component.displayName = "Component";
-ComponentRegistry.registerComponent("Component", Component);
-
-module.exports = Component;
-//# sourceMappingURL=Component.js.map

package/cjs/Component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from 'react';\nimport { registerComponent } from './registry/ComponentRegistry';\n\nimport './Component.css';\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);\n"],"names":["forwardRef","Component","registerComponent"],"mappings":";;;;;;AASM,MAAA,SAAA,GAAYA,iBAAW,SAASC,UAAAA,CACpC,EAAE,UAAY,EAAA,GAAG,KAAM,EAAA,EACvB,GACA,EAAA;AACA,EAAA,sCAAQ,KAAK,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAU,aAAY,GAAU,EAAA,CAAA,CAAA;AACzD,CAAC,EAAA;AACD,SAAA,CAAU,WAAc,GAAA,WAAA,CAAA;AAIxBC,mCAAA,CAAkB,aAAa,SAAS,CAAA;;;;"}

package/cjs/DraggableLayout.css

@@ -1,18 +0,0 @@
-.DraggableLayout {
-  display: inline-block;
-  outline: none;
-}
-
-[data-dragging='true'] {
-  position: absolute !important;
-  z-index: 100;
-}
-
-.vuuSimpleDraggableWrapper {
-  background-color: white;
-  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.2);
-}
-.vuuSimpleDraggableWrapper > * {
-  height: 100%;
-  width: 100%;
-}

package/cjs/DraggableLayout.js

@@ -1,24 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var cx = require('clsx');
-var React = require('react');
-var ComponentRegistry = require('./registry/ComponentRegistry.js');
-
-const DraggableLayout = React.forwardRef(function DraggableLayout2({
-  children,
-  className: classNameProp,
-  dropTarget,
-  resizeable: _,
-  // ignore, its just a marker used by the layout system
-  ...htmlAttributes
-}, forwardedRef) {
-  const className = cx("DraggableLayout", classNameProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, ref: forwardedRef, ...htmlAttributes, children });
-});
-const componentName = "DraggableLayout";
-DraggableLayout.displayName = componentName;
-ComponentRegistry.registerComponent(componentName, DraggableLayout, "container");
-
-exports.DraggableLayout = DraggableLayout;
-//# sourceMappingURL=DraggableLayout.js.map

package/cjs/DraggableLayout.js.map

@@ -1 +0,0 @@
-{"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;;;;"}

package/cjs/dock-layout/DockLayout.css

@@ -1,36 +0,0 @@
-.vuuDockLayout {
-  --chest-bg: var(--hw-chest-bg, inherit);
-  --drawer-bg: var(--hw-drawer-bg, inherit);
-  --drawer-size: var(--hw-drawer-size, 200px);
-  --drawer-peek-size: var(--hw-drawer-peek-size, 32px);
-  --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);
-  background-color: var(--chest-bg);
-  display: flex;
-}
-
-.vuuDockLayout-horizontal {
-  flex-direction: row;
-}
-
-.vuuDockLayout-vertical {
-  flex-direction: column;
-}
-
-.vuuDockLayout-content {
-  background-color: var(--chest-bg);
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: hidden;
-  /* position: relative; */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.vuuDockLayout-horizontal .vuuDockLayout-content {
-  flex-basis: 100%;
-}
-
-.vuuDockLayout-vertical .vuuDockLayout-content {
-  flex-basis: 100%;
-}

package/cjs/dock-layout/DockLayout.js

@@ -1,27 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var cx = require('clsx');
-var ComponentRegistry = require('../registry/ComponentRegistry.js');
-var Drawer = require('./Drawer.js');
-
-const isDrawer = (component) => component.type === Drawer;
-const isVertical = ({ props: { position = "left" } }) => position.match(/top|bottom/);
-const DockLayout = (props) => {
-  const { children, className: classNameProp, id, style } = props;
-  const classBase = "vuuDockLayout";
-  const [drawers, content] = vuuUtils.partition(children, isDrawer);
-  const [verticalDrawers, horizontalDrawers] = vuuUtils.partition(drawers, isVertical);
-  const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
-  const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, id, style, children: [
-    drawers,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: content })
-  ] });
-};
-DockLayout.displayName = "DockLayout";
-ComponentRegistry.registerComponent("DockLayout", DockLayout, "container");
-
-module.exports = DockLayout;
-//# sourceMappingURL=DockLayout.js.map

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

@@ -1 +0,0 @@
-{"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;;;;"}

package/cjs/dock-layout/Drawer.css

@@ -1,159 +0,0 @@
-.vuuDrawer {
-  --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);
-  --vuu-close-icon-svg: var(--svg-chevron-double-right);
-
-  transition: flex-basis;
-  transition-duration: var(--drawer-transition-duration);
-  position: relative;
-  z-index: 1;
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  min-width: 0;
-  min-height: 0;
-  display: flex;
-}
-
-.vuuDrawer-peekaboo {
-  flex-basis: var(--drawer-peek-size);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.vuuDrawer-inline.vuuDrawer-open {
-  flex-basis: var(--drawer-size);
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.vuuDrawer-liner {
-  background-color: var(--drawer-bg);
-  overflow: hidden;
-  position: relative;
-}
-
-.vuuDrawer-content {
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  right: var(--drawer-peek-size);
-  transition: right;
-  transition-duration: var(--drawer-transition-duration);
-  width: 100%;
-  flex: 1 1 100%;
-}
-
-.vuuDrawer-open .vuuDrawer-content {
-  right: 0;
-}
-
-/* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {
-  display: none;
-} */
-
-.vuuDrawer-left {
-  border-right: var(--drawer-leading-edge-border);
-}
-.vuuDrawer-right {
-  border-left: var(--drawer-leading-edge-border);
-}
-.vuuDrawer-top {
-  border-bottom: var(--drawer-leading-edge-border);
-}
-.vuuDrawer-bottom {
-  border-top: var(--drawer-leading-edge-border);
-}
-
-.vuuDrawer-left .vuuDrawer-liner,
-.vuuDrawer-right .vuuDrawer-liner {
-  height: 100%;
-  transition: width;
-}
-
-.vuuDrawer-top .vuuDrawer-liner,
-.vuuDrawer-bottom .vuuDrawer-liner {
-  width: 100%;
-  transition: height;
-}
-
-.vuuDrawer-inline .vuuDrawer-liner {
-  width: 100%;
-  height: 100%;
-}
-
-.vuuDrawer-over .vuuDrawer-liner {
-  position: absolute;
-  transition-duration: 0.4s;
-}
-
-.vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {
-  top: 0;
-  left: 0;
-  width: 0;
-}
-
-.vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {
-  top: 0;
-  right: 0;
-  width: 0;
-}
-
-.vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {
-  height: 0;
-  top: 0;
-  left: 0;
-}
-
-.vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {
-  bottom: 0;
-  height: 0;
-  left: 0;
-}
-
-.vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
-.vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
-  width: var(--drawer-peek-size);
-}
-
-.vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
-.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
-  height: var(--drawer-peek-size);
-}
-
-.vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
-.vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
-  width: var(--drawer-size);
-}
-
-.vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
-.vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
-  height: var(--drawer-size);
-}
-
-.vuuDrawer-top,
-.vuuDrawer-left {
-  order: 0;
-}
-
-.vuuDrawer-bottom,
-.vuuDrawer-right {
-  order: 99;
-}
-
-.vuuDrawer-left,
-.vuuDrawer-right {
-  flex-direction: column;
-}
-
-.vuuToggleButton-container {
-  --saltButton-height: 28px;
-  --saltButton-width: 28px;
-  --vuu-icon-size: 12px;
-  flex: 0 0 28px;
-}
-
-.vuuDrawer-open {
-  --vuu-close-icon-svg: var(--svg-chevron-double-left);
-
-}

package/cjs/dock-layout/Drawer.js

@@ -1,87 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@salt-ds/core');
-var cx = require('clsx');
-var React = require('react');
-
-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 [open, setOpen] = core.useControlled({
-    controlled: openProp,
-    default: defaultOpen ?? false,
-    name: "Drawer",
-    state: "open"
-  });
-  console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);
-  const className = cx(classBase, classNameProp, `${classBase}-${position}`, {
-    [`${classBase}-open`]: open,
-    [`${classBase}-inline`]: inline,
-    [`${classBase}-over`]: !inline,
-    [`${classBase}-peekaboo`]: peekaboo
-  });
-  const toggleDrawer = React.useCallback(() => {
-    setOpen(!open);
-  }, [open, setOpen]);
-  const style = getStyle(styleProp, sizeOpen, sizeClosed);
-  const handleClick = clickToOpen ? toggleDrawer : onClick;
-  const renderToggleButton = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("vuuToggleButton-container"), children: open ? /* @__PURE__ */ jsxRuntime.jsx(
-    core.Button,
-    {
-      "aria-label": "close",
-      onClick: toggleDrawer,
-      "data-icon": "close",
-      variant: "secondary"
-    }
-  ) : /* @__PURE__ */ jsxRuntime.jsx(
-    core.Button,
-    {
-      "aria-label": "open",
-      onClick: toggleDrawer,
-      "data-icon": "close",
-      variant: "secondary"
-    }
-  ) });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, className, onClick: handleClick, style, children: [
-    toggleButton == "start" ? renderToggleButton() : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-liner`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children }) }),
-    toggleButton == "end" ? renderToggleButton() : null
-  ] });
-};
-Drawer.displayName = "Drawer";
-
-module.exports = Drawer;
-//# sourceMappingURL=Drawer.js.map

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

@@ -1 +0,0 @@
-{"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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"}