@vuu-ui/vuu-shell 0.13.5 → 0.13.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -15,7 +15,7 @@ const ContextPanel = ({
15
15
  className: classNameProp,
16
16
  expanded = false,
17
17
  content: contentProp,
18
- id = vuuUtils.VuuShellLocation.ContextPanel,
18
+ id,
19
19
  onClose,
20
20
  overlay = false,
21
21
  title
@@ -66,6 +66,7 @@ const ContextPanel = ({
66
66
  className: cx(classBase, className, "vuuScrollable", {
67
67
  [`${classBase}-expanded`]: expanded
68
68
  }),
69
+ id,
69
70
  children: /* @__PURE__ */ jsxRuntime.jsxs(vuuLayout.View, { className: `${classBase}-inner`, header: false, id, children: [
70
71
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-header`, children: [
71
72
  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: `${classBase}-title`, children: title }),
@@ -1 +1 @@
1
- {"version":3,"file":"ContextPanel.js","sources":["../../../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 = VuuShellLocation.ContextPanel,\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 >\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":["VuuShellLocation","useWindow","useComponentCssInjection","contextPanelCss","useRef","useLayoutProviderDispatch","useCallback","useMemo","layoutFromJson","useLayoutEffect","jsx","jsxs","View","IconButton"],"mappings":"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"}
1
+ {"version":3,"file":"ContextPanel.js","sources":["../../../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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"}
@@ -13,7 +13,7 @@ const ContextPanel = ({
13
13
  className: classNameProp,
14
14
  expanded = false,
15
15
  content: contentProp,
16
- id = VuuShellLocation.ContextPanel,
16
+ id,
17
17
  onClose,
18
18
  overlay = false,
19
19
  title
@@ -64,6 +64,7 @@ const ContextPanel = ({
64
64
  className: cx(classBase, className, "vuuScrollable", {
65
65
  [`${classBase}-expanded`]: expanded
66
66
  }),
67
+ id,
67
68
  children: /* @__PURE__ */ jsxs(View, { className: `${classBase}-inner`, header: false, id, children: [
68
69
  /* @__PURE__ */ jsxs("div", { className: `${classBase}-header`, children: [
69
70
  /* @__PURE__ */ jsx("h2", { className: `${classBase}-title`, children: title }),
@@ -1 +1 @@
1
- {"version":3,"file":"ContextPanel.js","sources":["../../../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 = VuuShellLocation.ContextPanel,\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 >\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":"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"}
1
+ {"version":3,"file":"ContextPanel.js","sources":["../../../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;;;;"}
package/package.json CHANGED
@@ -1,26 +1,26 @@
1
1
  {
2
- "version": "0.13.5",
2
+ "version": "0.13.7",
3
3
  "description": "VUU UI Shell",
4
4
  "author": "heswell",
5
5
  "license": "Apache-2.0",
6
6
  "devDependencies": {
7
- "@vuu-ui/vuu-data-types": "0.13.5",
8
- "@vuu-ui/vuu-protocol-types": "0.13.5",
9
- "@vuu-ui/vuu-table-types": "0.13.5"
7
+ "@vuu-ui/vuu-data-types": "0.13.7",
8
+ "@vuu-ui/vuu-protocol-types": "0.13.7",
9
+ "@vuu-ui/vuu-table-types": "0.13.7"
10
10
  },
11
11
  "dependencies": {
12
12
  "@salt-ds/core": "1.43.0",
13
13
  "@salt-ds/styles": "0.2.1",
14
14
  "@salt-ds/window": "0.1.1",
15
- "@vuu-ui/vuu-context-menu": "0.13.5",
16
- "@vuu-ui/vuu-data-react": "0.13.5",
17
- "@vuu-ui/vuu-data-remote": "0.13.5",
18
- "@vuu-ui/vuu-icons": "0.13.5",
19
- "@vuu-ui/vuu-layout": "0.13.5",
20
- "@vuu-ui/vuu-popups": "0.13.5",
21
- "@vuu-ui/vuu-table": "0.13.5",
22
- "@vuu-ui/vuu-ui-controls": "0.13.5",
23
- "@vuu-ui/vuu-utils": "0.13.5",
15
+ "@vuu-ui/vuu-context-menu": "0.13.7",
16
+ "@vuu-ui/vuu-data-react": "0.13.7",
17
+ "@vuu-ui/vuu-data-remote": "0.13.7",
18
+ "@vuu-ui/vuu-icons": "0.13.7",
19
+ "@vuu-ui/vuu-layout": "0.13.7",
20
+ "@vuu-ui/vuu-popups": "0.13.7",
21
+ "@vuu-ui/vuu-table": "0.13.7",
22
+ "@vuu-ui/vuu-ui-controls": "0.13.7",
23
+ "@vuu-ui/vuu-utils": "0.13.7",
24
24
  "html-to-image": "^1.11.11"
25
25
  },
26
26
  "peerDependencies": {