@vuu-ui/vuu-shell 0.13.17 → 0.13.19

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.
@@ -1 +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 {\n IconButton,\n useContextPanel,\n useHideContextPanel,\n} 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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"}
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, 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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"}
@@ -1 +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 {\n IconButton,\n useContextPanel,\n useHideContextPanel,\n} 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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"}
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, 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 CHANGED
@@ -1,26 +1,26 @@
1
1
  {
2
- "version": "0.13.17",
2
+ "version": "0.13.19",
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.17",
8
- "@vuu-ui/vuu-protocol-types": "0.13.17",
9
- "@vuu-ui/vuu-table-types": "0.13.17"
7
+ "@vuu-ui/vuu-data-types": "0.13.19",
8
+ "@vuu-ui/vuu-protocol-types": "0.13.19",
9
+ "@vuu-ui/vuu-table-types": "0.13.19"
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.17",
16
- "@vuu-ui/vuu-data-react": "0.13.17",
17
- "@vuu-ui/vuu-data-remote": "0.13.17",
18
- "@vuu-ui/vuu-icons": "0.13.17",
19
- "@vuu-ui/vuu-layout": "0.13.17",
20
- "@vuu-ui/vuu-popups": "0.13.17",
21
- "@vuu-ui/vuu-table": "0.13.17",
22
- "@vuu-ui/vuu-ui-controls": "0.13.17",
23
- "@vuu-ui/vuu-utils": "0.13.17",
15
+ "@vuu-ui/vuu-context-menu": "0.13.19",
16
+ "@vuu-ui/vuu-data-react": "0.13.19",
17
+ "@vuu-ui/vuu-data-remote": "0.13.19",
18
+ "@vuu-ui/vuu-icons": "0.13.19",
19
+ "@vuu-ui/vuu-layout": "0.13.19",
20
+ "@vuu-ui/vuu-popups": "0.13.19",
21
+ "@vuu-ui/vuu-table": "0.13.19",
22
+ "@vuu-ui/vuu-ui-controls": "0.13.19",
23
+ "@vuu-ui/vuu-utils": "0.13.19",
24
24
  "html-to-image": "^1.11.11"
25
25
  },
26
26
  "peerDependencies": {