@vuu-ui/vuu-shell 0.13.16 → 0.13.18

package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var contextPanelCss = ".vuuContextPanel {\n  position: relative;\n  transition: width 0.3s ease-in-out;\n  width: var(--vuu-side-panel-width, 0px) !important;\n  z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n  --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n  --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n}\n\n.vuuContextPanel-overlay {\n  width: 0px !important;\n}\n\n.vuuContextPanel-inner {\n  background-color: var(--salt-container-primary-background);\n  box-shadow: var(--vuu-side-panel-shadow, none);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0 !important;\n  overflow: auto;\n  padding-bottom: 24px;\n  padding-top: 24px;\n  padding: var(--vuu-side-panel-padding);\n  position: absolute !important;\n  right: 0;\n  top: 0;\n  transition-property: padding-left, padding-right, width;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  width: var(--vuu-side-panel-width, 0px);\n}\n\n.vuuContextPanel-header {\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 0 0 27px !important;\n  height: var(--vuuContextPanel-header-height, 48px);\n  justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n  font-size: 20px;\n  font-weight: 700;\n  white-space: nowrap;\n}\n\n.vuuContextPanel-content {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  width: 100%;\n}\n";
+var contextPanelCss = ".vuuContextPanel {\n  position: relative;\n  transition: width 0.3s ease-in-out;\n  width: var(--vuu-side-panel-width, 0px) !important;\n  z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n  --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n  --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n}\n\n.vuuContextPanel-overlay {\n  width: 0px !important;\n}\n\n.vuuView.vuuContextPanel-inner {\n  background-color: var(--salt-container-primary-background);\n  box-shadow: var(--vuu-side-panel-shadow, none);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0 !important;\n  overflow: auto;\n  padding: 24px 8px 24px 24px;\n  position: absolute !important;\n  right: 0;\n  top: 0;\n  transition-property: padding-left, padding-right, width;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  width: var(--vuu-side-panel-width, 0px);\n}\n\n.vuuContextPanel-header {\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 0 0 27px !important;\n  height: var(--vuuContextPanel-header-height, 48px);\n  justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n  font-size: 20px;\n  font-weight: 700;\n  white-space: nowrap;\n}\n\n.vuuContextPanel-content {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding-right: 16px;\n  width: 100%;\n}\n";
 
 module.exports = contextPanelCss;
 //# sourceMappingURL=ContextPanel.css.js.map

package/cjs/shell-layout-templates/context-panel/ContextPanel.js

@@ -26,16 +26,21 @@ const ContextPanel = ({
     css: ContextPanel$1,
     window: targetWindow
   });
+  const hideContextPanel = vuuUiControls.useHideContextPanel();
   const closeButtonRef = React.useRef(null);
   const dispatchLayoutAction = vuuLayout.useLayoutProviderDispatch();
   const handleClose = React.useCallback(() => {
-    dispatchLayoutAction({
-      path: `#${vuuUtils.VuuShellLocation.ContextPanel}`,
-      propName: "expanded",
-      propValue: false,
-      type: "set-prop"
-    });
-  }, [dispatchLayoutAction]);
+    if (hideContextPanel) {
+      hideContextPanel();
+    } else {
+      dispatchLayoutAction({
+        path: `#${vuuUtils.VuuShellLocation.ContextPanel}`,
+        propName: "expanded",
+        propValue: false,
+        type: "set-prop"
+      });
+    }
+  }, [dispatchLayoutAction, hideContextPanel]);
   const handleKeyDown = React.useCallback(
     (e) => {
       if (e.key === "Escape") {
@@ -73,14 +78,15 @@ const ContextPanel = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             vuuUiControls.IconButton,
             {
+              appearance: "transparent",
               className: `${classBase}-close`,
               "data-embedded": true,
               icon: "close",
               onClick: handleClose,
               onKeyDown: handleKeyDown,
               ref: closeButtonRef,
-              size: 16,
-              variant: "secondary"
+              sentiment: "neutral",
+              size: 16
             }
           )
         ] }),

package/cjs/shell-layout-templates/context-panel/ContextPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextPanel.js","sources":["../../../../../packages/vuu-shell/src/shell-layout-templates/context-panel/ContextPanel.tsx"],"sourcesContent":["import {\n  View,\n  layoutFromJson,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutJSON, VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport contextPanelCss from \"./ContextPanel.css\";\n\nconst classBase = \"vuuContextPanel\";\n\nexport interface ContextPanelProps {\n  [key: string]: unknown;\n  className?: string;\n  content?: LayoutJSON;\n  expanded?: boolean;\n  id?: string;\n  onClose?: () => void;\n  overlay?: boolean;\n  title?: ReactNode;\n}\n\nexport const ContextPanel = ({\n  className: classNameProp,\n  expanded = false,\n  content: contentProp,\n  id,\n  onClose,\n  overlay = false,\n  title,\n}: ContextPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-context-panel\",\n    css: contextPanelCss,\n    window: targetWindow,\n  });\n\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  const handleClose = useCallback(() => {\n    dispatchLayoutAction({\n      path: `#${VuuShellLocation.ContextPanel}`,\n      propName: \"expanded\",\n      propValue: false,\n      type: \"set-prop\",\n    });\n  }, [dispatchLayoutAction]);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"Escape\") {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-expanded`]: expanded,\n    [`${classBase}-inline`]: overlay !== true,\n    [`${classBase}-overlay`]: overlay,\n  });\n\n  const content = useMemo(\n    () =>\n      contentProp && expanded ? layoutFromJson(contentProp, \"context-0\") : null,\n    [contentProp, expanded],\n  );\n\n  useLayoutEffect(() => {\n    if (expanded) {\n      // Components loaded into the ContextPanel will often assume focus themselves,\n      //but if not, default to close button\n      closeButtonRef.current?.focus();\n    } else {\n      onClose?.();\n    }\n  }, [expanded, onClose]);\n\n  return (\n    <div\n      className={cx(classBase, className, \"vuuScrollable\", {\n        [`${classBase}-expanded`]: expanded,\n      })}\n      id={id}\n    >\n      <View className={`${classBase}-inner`} header={false} id={id}>\n        <div className={`${classBase}-header`}>\n          <h2 className={`${classBase}-title`}>{title}</h2>\n          <IconButton\n            className={`${classBase}-close`}\n            data-embedded\n            icon=\"close\"\n            onClick={handleClose}\n            onKeyDown={handleKeyDown}\n            ref={closeButtonRef}\n            size={16}\n            variant=\"secondary\"\n          />\n        </div>\n        <div className={`${classBase}-content`}>{content}</div>\n      </View>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","contextPanelCss","useRef","useLayoutProviderDispatch","useCallback","VuuShellLocation","useMemo","layoutFromJson","useLayoutEffect","jsx","jsxs","View","IconButton"],"mappings":"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"}
+{"version":3,"file":"ContextPanel.js","sources":["../../../../../packages/vuu-shell/src/shell-layout-templates/context-panel/ContextPanel.tsx"],"sourcesContent":["import {\n  View,\n  layoutFromJson,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { IconButton, useHideContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutJSON, VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport contextPanelCss from \"./ContextPanel.css\";\n\nconst classBase = \"vuuContextPanel\";\n\nexport interface ContextPanelProps {\n  [key: string]: unknown;\n  className?: string;\n  content?: LayoutJSON;\n  expanded?: boolean;\n  id?: string;\n  onClose?: () => void;\n  overlay?: boolean;\n  title?: ReactNode;\n}\n\nexport const ContextPanel = ({\n  className: classNameProp,\n  expanded = false,\n  content: contentProp,\n  id,\n  onClose,\n  overlay = false,\n  title,\n}: ContextPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-context-panel\",\n    css: contextPanelCss,\n    window: targetWindow,\n  });\n\n  const hideContextPanel = useHideContextPanel();\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  const handleClose = useCallback(() => {\n    if (hideContextPanel) {\n      hideContextPanel();\n    } else {\n      dispatchLayoutAction({\n        path: `#${VuuShellLocation.ContextPanel}`,\n        propName: \"expanded\",\n        propValue: false,\n        type: \"set-prop\",\n      });\n    }\n  }, [dispatchLayoutAction, hideContextPanel]);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"Escape\") {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-expanded`]: expanded,\n    [`${classBase}-inline`]: overlay !== true,\n    [`${classBase}-overlay`]: overlay,\n  });\n\n  const content = useMemo(\n    () =>\n      contentProp && expanded ? layoutFromJson(contentProp, \"context-0\") : null,\n    [contentProp, expanded],\n  );\n\n  useLayoutEffect(() => {\n    if (expanded) {\n      // Components loaded into the ContextPanel will often assume focus themselves,\n      //but if not, default to close button\n      closeButtonRef.current?.focus();\n    } else {\n      onClose?.();\n    }\n  }, [expanded, onClose]);\n\n  return (\n    <div\n      className={cx(classBase, className, \"vuuScrollable\", {\n        [`${classBase}-expanded`]: expanded,\n      })}\n      id={id}\n    >\n      <View className={`${classBase}-inner`} header={false} id={id}>\n        <div className={`${classBase}-header`}>\n          <h2 className={`${classBase}-title`}>{title}</h2>\n          <IconButton\n            appearance=\"transparent\"\n            className={`${classBase}-close`}\n            data-embedded\n            icon=\"close\"\n            onClick={handleClose}\n            onKeyDown={handleKeyDown}\n            ref={closeButtonRef}\n            sentiment=\"neutral\"\n            size={16}\n          />\n        </div>\n        <div className={`${classBase}-content`}>{content}</div>\n      </View>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","contextPanelCss","useHideContextPanel","useRef","useLayoutProviderDispatch","useCallback","VuuShellLocation","useMemo","layoutFromJson","useLayoutEffect","jsx","jsxs","View","IconButton"],"mappings":"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"}

package/esm/shell-layout-templates/context-panel/ContextPanel.css.js

@@ -1,4 +1,4 @@
-var contextPanelCss = ".vuuContextPanel {\n  position: relative;\n  transition: width 0.3s ease-in-out;\n  width: var(--vuu-side-panel-width, 0px) !important;\n  z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n  --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n  --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n}\n\n.vuuContextPanel-overlay {\n  width: 0px !important;\n}\n\n.vuuContextPanel-inner {\n  background-color: var(--salt-container-primary-background);\n  box-shadow: var(--vuu-side-panel-shadow, none);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0 !important;\n  overflow: auto;\n  padding-bottom: 24px;\n  padding-top: 24px;\n  padding: var(--vuu-side-panel-padding);\n  position: absolute !important;\n  right: 0;\n  top: 0;\n  transition-property: padding-left, padding-right, width;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  width: var(--vuu-side-panel-width, 0px);\n}\n\n.vuuContextPanel-header {\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 0 0 27px !important;\n  height: var(--vuuContextPanel-header-height, 48px);\n  justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n  font-size: 20px;\n  font-weight: 700;\n  white-space: nowrap;\n}\n\n.vuuContextPanel-content {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  width: 100%;\n}\n";
+var contextPanelCss = ".vuuContextPanel {\n  position: relative;\n  transition: width 0.3s ease-in-out;\n  width: var(--vuu-side-panel-width, 0px) !important;\n  z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n  --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n  --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n  --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n}\n\n.vuuContextPanel-overlay {\n  width: 0px !important;\n}\n\n.vuuView.vuuContextPanel-inner {\n  background-color: var(--salt-container-primary-background);\n  box-shadow: var(--vuu-side-panel-shadow, none);\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-width: 0 !important;\n  overflow: auto;\n  padding: 24px 8px 24px 24px;\n  position: absolute !important;\n  right: 0;\n  top: 0;\n  transition-property: padding-left, padding-right, width;\n  transition-duration: 0.3s;\n  transition-timing-function: ease-in-out;\n  width: var(--vuu-side-panel-width, 0px);\n}\n\n.vuuContextPanel-header {\n  align-items: center;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 0 0 27px !important;\n  height: var(--vuuContextPanel-header-height, 48px);\n  justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n  font-size: 20px;\n  font-weight: 700;\n  white-space: nowrap;\n}\n\n.vuuContextPanel-content {\n  flex: 1 1 auto;\n  overflow-y: auto;\n  padding-right: 16px;\n  width: 100%;\n}\n";
 
 export { contextPanelCss as default };
 //# sourceMappingURL=ContextPanel.css.js.map

package/esm/shell-layout-templates/context-panel/ContextPanel.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useLayoutProviderDispatch, layoutFromJson, View } from '@vuu-ui/vuu-layout';
-import { IconButton } from '@vuu-ui/vuu-ui-controls';
+import { useHideContextPanel, IconButton } from '@vuu-ui/vuu-ui-controls';
 import { VuuShellLocation } from '@vuu-ui/vuu-utils';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
@@ -24,16 +24,21 @@ const ContextPanel = ({
     css: contextPanelCss,
     window: targetWindow
   });
+  const hideContextPanel = useHideContextPanel();
   const closeButtonRef = useRef(null);
   const dispatchLayoutAction = useLayoutProviderDispatch();
   const handleClose = useCallback(() => {
-    dispatchLayoutAction({
-      path: `#${VuuShellLocation.ContextPanel}`,
-      propName: "expanded",
-      propValue: false,
-      type: "set-prop"
-    });
-  }, [dispatchLayoutAction]);
+    if (hideContextPanel) {
+      hideContextPanel();
+    } else {
+      dispatchLayoutAction({
+        path: `#${VuuShellLocation.ContextPanel}`,
+        propName: "expanded",
+        propValue: false,
+        type: "set-prop"
+      });
+    }
+  }, [dispatchLayoutAction, hideContextPanel]);
   const handleKeyDown = useCallback(
     (e) => {
       if (e.key === "Escape") {
@@ -71,14 +76,15 @@ const ContextPanel = ({
           /* @__PURE__ */ jsx(
             IconButton,
             {
+              appearance: "transparent",
               className: `${classBase}-close`,
               "data-embedded": true,
               icon: "close",
               onClick: handleClose,
               onKeyDown: handleKeyDown,
               ref: closeButtonRef,
-              size: 16,
-              variant: "secondary"
+              sentiment: "neutral",
+              size: 16
             }
           )
         ] }),

package/esm/shell-layout-templates/context-panel/ContextPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextPanel.js","sources":["../../../../../packages/vuu-shell/src/shell-layout-templates/context-panel/ContextPanel.tsx"],"sourcesContent":["import {\n  View,\n  layoutFromJson,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutJSON, VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport contextPanelCss from \"./ContextPanel.css\";\n\nconst classBase = \"vuuContextPanel\";\n\nexport interface ContextPanelProps {\n  [key: string]: unknown;\n  className?: string;\n  content?: LayoutJSON;\n  expanded?: boolean;\n  id?: string;\n  onClose?: () => void;\n  overlay?: boolean;\n  title?: ReactNode;\n}\n\nexport const ContextPanel = ({\n  className: classNameProp,\n  expanded = false,\n  content: contentProp,\n  id,\n  onClose,\n  overlay = false,\n  title,\n}: ContextPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-context-panel\",\n    css: contextPanelCss,\n    window: targetWindow,\n  });\n\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  const handleClose = useCallback(() => {\n    dispatchLayoutAction({\n      path: `#${VuuShellLocation.ContextPanel}`,\n      propName: \"expanded\",\n      propValue: false,\n      type: \"set-prop\",\n    });\n  }, [dispatchLayoutAction]);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"Escape\") {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-expanded`]: expanded,\n    [`${classBase}-inline`]: overlay !== true,\n    [`${classBase}-overlay`]: overlay,\n  });\n\n  const content = useMemo(\n    () =>\n      contentProp && expanded ? layoutFromJson(contentProp, \"context-0\") : null,\n    [contentProp, expanded],\n  );\n\n  useLayoutEffect(() => {\n    if (expanded) {\n      // Components loaded into the ContextPanel will often assume focus themselves,\n      //but if not, default to close button\n      closeButtonRef.current?.focus();\n    } else {\n      onClose?.();\n    }\n  }, [expanded, onClose]);\n\n  return (\n    <div\n      className={cx(classBase, className, \"vuuScrollable\", {\n        [`${classBase}-expanded`]: expanded,\n      })}\n      id={id}\n    >\n      <View className={`${classBase}-inner`} header={false} id={id}>\n        <div className={`${classBase}-header`}>\n          <h2 className={`${classBase}-title`}>{title}</h2>\n          <IconButton\n            className={`${classBase}-close`}\n            data-embedded\n            icon=\"close\"\n            onClick={handleClose}\n            onKeyDown={handleKeyDown}\n            ref={closeButtonRef}\n            size={16}\n            variant=\"secondary\"\n          />\n        </div>\n        <div className={`${classBase}-content`}>{content}</div>\n      </View>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,iBAAA;AAaX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAW,EAAA,aAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACX,OAAS,EAAA,WAAA;AAAA,EACT,EAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAU,GAAA,KAAA;AAAA,EACV;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,OAA0B,IAAI,CAAA;AACrD,EAAA,MAAM,uBAAuB,yBAA0B,EAAA;AACvD,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAqB,oBAAA,CAAA;AAAA,MACnB,IAAA,EAAM,CAAI,CAAA,EAAA,gBAAA,CAAiB,YAAY,CAAA,CAAA;AAAA,MACvC,QAAU,EAAA,UAAA;AAAA,MACV,SAAW,EAAA,KAAA;AAAA,MACX,IAAM,EAAA;AAAA,KACP,CAAA;AAAA,GACH,EAAG,CAAC,oBAAoB,CAAC,CAAA;AAEzB,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,QAAY,WAAA,EAAA;AAAA;AACd,KACF;AAAA,IACA,CAAC,WAAW;AAAA,GACd;AAEA,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,IAC7C,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,IAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,OAAA,CAAS,GAAG,OAAY,KAAA,IAAA;AAAA,IACrC,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG;AAAA,GAC3B,CAAA;AAED,EAAA,MAAM,OAAU,GAAA,OAAA;AAAA,IACd,MACE,WAAe,IAAA,QAAA,GAAW,cAAe,CAAA,WAAA,EAAa,WAAW,CAAI,GAAA,IAAA;AAAA,IACvE,CAAC,aAAa,QAAQ;AAAA,GACxB;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,QAAU,EAAA;AAGZ,MAAA,cAAA,CAAe,SAAS,KAAM,EAAA;AAAA,KACzB,MAAA;AACL,MAAU,OAAA,IAAA;AAAA;AACZ,GACC,EAAA,CAAC,QAAU,EAAA,OAAO,CAAC,CAAA;AAEtB,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,SAAA,EAAW,eAAiB,EAAA;AAAA,QACnD,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,EAAA;AAAA,MAEA,QAAA,kBAAA,IAAA,CAAC,QAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAU,MAAA,CAAA,EAAA,MAAA,EAAQ,OAAO,EACpD,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,OAAA,CAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAG,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,0BAC5C,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,IAAK,EAAA,OAAA;AAAA,cACL,OAAS,EAAA,WAAA;AAAA,cACT,SAAW,EAAA,aAAA;AAAA,cACX,GAAK,EAAA,cAAA;AAAA,cACL,IAAM,EAAA,EAAA;AAAA,cACN,OAAQ,EAAA;AAAA;AAAA;AACV,SACF,EAAA,CAAA;AAAA,4BACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA;AAAA,OACnD,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"ContextPanel.js","sources":["../../../../../packages/vuu-shell/src/shell-layout-templates/context-panel/ContextPanel.tsx"],"sourcesContent":["import {\n  View,\n  layoutFromJson,\n  useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { IconButton, useHideContextPanel } from \"@vuu-ui/vuu-ui-controls\";\nimport { LayoutJSON, VuuShellLocation } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n  KeyboardEventHandler,\n  ReactNode,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport contextPanelCss from \"./ContextPanel.css\";\n\nconst classBase = \"vuuContextPanel\";\n\nexport interface ContextPanelProps {\n  [key: string]: unknown;\n  className?: string;\n  content?: LayoutJSON;\n  expanded?: boolean;\n  id?: string;\n  onClose?: () => void;\n  overlay?: boolean;\n  title?: ReactNode;\n}\n\nexport const ContextPanel = ({\n  className: classNameProp,\n  expanded = false,\n  content: contentProp,\n  id,\n  onClose,\n  overlay = false,\n  title,\n}: ContextPanelProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-context-panel\",\n    css: contextPanelCss,\n    window: targetWindow,\n  });\n\n  const hideContextPanel = useHideContextPanel();\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n  const dispatchLayoutAction = useLayoutProviderDispatch();\n  const handleClose = useCallback(() => {\n    if (hideContextPanel) {\n      hideContextPanel();\n    } else {\n      dispatchLayoutAction({\n        path: `#${VuuShellLocation.ContextPanel}`,\n        propName: \"expanded\",\n        propValue: false,\n        type: \"set-prop\",\n      });\n    }\n  }, [dispatchLayoutAction, hideContextPanel]);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"Escape\") {\n        handleClose();\n      }\n    },\n    [handleClose],\n  );\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-expanded`]: expanded,\n    [`${classBase}-inline`]: overlay !== true,\n    [`${classBase}-overlay`]: overlay,\n  });\n\n  const content = useMemo(\n    () =>\n      contentProp && expanded ? layoutFromJson(contentProp, \"context-0\") : null,\n    [contentProp, expanded],\n  );\n\n  useLayoutEffect(() => {\n    if (expanded) {\n      // Components loaded into the ContextPanel will often assume focus themselves,\n      //but if not, default to close button\n      closeButtonRef.current?.focus();\n    } else {\n      onClose?.();\n    }\n  }, [expanded, onClose]);\n\n  return (\n    <div\n      className={cx(classBase, className, \"vuuScrollable\", {\n        [`${classBase}-expanded`]: expanded,\n      })}\n      id={id}\n    >\n      <View className={`${classBase}-inner`} header={false} id={id}>\n        <div className={`${classBase}-header`}>\n          <h2 className={`${classBase}-title`}>{title}</h2>\n          <IconButton\n            appearance=\"transparent\"\n            className={`${classBase}-close`}\n            data-embedded\n            icon=\"close\"\n            onClick={handleClose}\n            onKeyDown={handleKeyDown}\n            ref={closeButtonRef}\n            sentiment=\"neutral\"\n            size={16}\n          />\n        </div>\n        <div className={`${classBase}-content`}>{content}</div>\n      </View>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,26 +1,26 @@
 {
-  "version": "0.13.16",
+  "version": "0.13.18",
   "description": "VUU UI Shell",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.13.16",
-    "@vuu-ui/vuu-protocol-types": "0.13.16",
-    "@vuu-ui/vuu-table-types": "0.13.16"
+    "@vuu-ui/vuu-data-types": "0.13.18",
+    "@vuu-ui/vuu-protocol-types": "0.13.18",
+    "@vuu-ui/vuu-table-types": "0.13.18"
   },
   "dependencies": {
     "@salt-ds/core": "1.43.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-context-menu": "0.13.16",
-    "@vuu-ui/vuu-data-react": "0.13.16",
-    "@vuu-ui/vuu-data-remote": "0.13.16",
-    "@vuu-ui/vuu-icons": "0.13.16",
-    "@vuu-ui/vuu-layout": "0.13.16",
-    "@vuu-ui/vuu-popups": "0.13.16",
-    "@vuu-ui/vuu-table": "0.13.16",
-    "@vuu-ui/vuu-ui-controls": "0.13.16",
-    "@vuu-ui/vuu-utils": "0.13.16",
+    "@vuu-ui/vuu-context-menu": "0.13.18",
+    "@vuu-ui/vuu-data-react": "0.13.18",
+    "@vuu-ui/vuu-data-remote": "0.13.18",
+    "@vuu-ui/vuu-icons": "0.13.18",
+    "@vuu-ui/vuu-layout": "0.13.18",
+    "@vuu-ui/vuu-popups": "0.13.18",
+    "@vuu-ui/vuu-table": "0.13.18",
+    "@vuu-ui/vuu-ui-controls": "0.13.18",
+    "@vuu-ui/vuu-utils": "0.13.18",
     "html-to-image": "^1.11.11"
   },
   "peerDependencies": {