@vuu-ui/vuu-shell 0.8.97 → 0.8.99
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.
- package/cjs/app-header/AppHeader.js +4 -1
- package/cjs/app-header/AppHeader.js.map +1 -1
- package/cjs/shell-layout-templates/context-panel/ContextPanel.js +19 -0
- package/cjs/shell-layout-templates/context-panel/ContextPanel.js.map +1 -1
- package/cjs/user-settings/UserSettingsPanel.js +1 -1
- package/cjs/user-settings/UserSettingsPanel.js.map +1 -1
- package/esm/app-header/AppHeader.js +5 -2
- package/esm/app-header/AppHeader.js.map +1 -1
- package/esm/shell-layout-templates/context-panel/ContextPanel.js +20 -1
- package/esm/shell-layout-templates/context-panel/ContextPanel.js.map +1 -1
- package/esm/user-settings/UserSettingsPanel.js +1 -1
- package/esm/user-settings/UserSettingsPanel.js.map +1 -1
- package/package.json +12 -12
- package/types/shell-layout-templates/context-panel/ContextPanel.d.ts +2 -1
|
@@ -24,6 +24,7 @@ const AppHeader = ({
|
|
|
24
24
|
css: AppHeader$1,
|
|
25
25
|
window: targetWindow
|
|
26
26
|
});
|
|
27
|
+
const settingsButtonRef = React.useRef(null);
|
|
27
28
|
const className = cx(classBase, classNameProp);
|
|
28
29
|
const loginUrl = ApplicationProvider.useLoginUrl();
|
|
29
30
|
const { showComponentInContextPanel } = vuuLayout.useLayoutOperation();
|
|
@@ -35,7 +36,8 @@ const AppHeader = ({
|
|
|
35
36
|
{
|
|
36
37
|
type: "ApplicationSettings"
|
|
37
38
|
},
|
|
38
|
-
"Settings"
|
|
39
|
+
"Settings",
|
|
40
|
+
() => settingsButtonRef.current?.focus()
|
|
39
41
|
);
|
|
40
42
|
}, [showComponentInContextPanel]);
|
|
41
43
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -57,6 +59,7 @@ const AppHeader = ({
|
|
|
57
59
|
{
|
|
58
60
|
className: `${classBase}-menuItem`,
|
|
59
61
|
onClick: handleShowSettings,
|
|
62
|
+
ref: settingsButtonRef,
|
|
60
63
|
variant: "secondary",
|
|
61
64
|
children: [
|
|
62
65
|
"Settings ",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sources":["../../src/app-header/AppHeader.tsx"],"sourcesContent":["import { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { logout } from \"../login\";\nimport { useLoginUrl } from \"../application-provider\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n className: classNameProp,\n themeMode: _,\n ...htmlAttributes\n}: AppHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-app-header\",\n css: appHeaderCss,\n window: targetWindow,\n });\n\n const className = cx(classBase, classNameProp);\n const loginUrl = useLoginUrl();\n\n const { showComponentInContextPanel } = useLayoutOperation();\n\n const handleLogout = useCallback(() => {\n logout(loginUrl);\n }, [loginUrl]);\n\n const handleShowSettings = useCallback(() => {\n showComponentInContextPanel(\n {\n type: \"ApplicationSettings\",\n },\n \"Settings\",\n );\n }, [showComponentInContextPanel]);\n\n return (\n <Toolbar\n alignItems=\"end\"\n className={className}\n role=\"banner\"\n showSeparators\n {...htmlAttributes}\n >\n <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n Help\n </Button>\n <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n History <span data-icon=\"history\" />\n </Button>\n <Button\n className={`${classBase}-menuItem`}\n onClick={handleShowSettings}\n variant=\"secondary\"\n >\n Settings <span data-icon=\"settings\" />\n </Button>\n <Button\n className={`${classBase}-menuItem`}\n onClick={handleLogout}\n variant=\"secondary\"\n >\n Log out\n </Button>\n </Toolbar>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","appHeaderCss","useLoginUrl","useLayoutOperation","useCallback","logout","jsxs","Toolbar","jsx","Button"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAKX,MAAM,YAAY,CAAC;AAAA,EACxB,SAAW,EAAA,aAAA;AAAA,EACX,SAAW,EAAA,CAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EAAA,MAAM,WAAWC,+BAAY,EAAA,CAAA;AAE7B,EAAM,MAAA,EAAE,2BAA4B,EAAA,GAAIC,4BAAmB,EAAA,CAAA;AAE3D,EAAM,MAAA,YAAA,GAAeC,kBAAY,MAAM;AACrC,IAAAC,iBAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,kBAAA,GAAqBD,kBAAY,MAAM;AAC3C,IAAA,2BAAA;AAAA,MACE;AAAA,QACE,IAAM,EAAA,qBAAA;AAAA,OACR;AAAA,MACA,UAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sources":["../../src/app-header/AppHeader.tsx"],"sourcesContent":["import { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { logout } from \"../login\";\nimport { useLoginUrl } from \"../application-provider\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n className: classNameProp,\n themeMode: _,\n ...htmlAttributes\n}: AppHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-app-header\",\n css: appHeaderCss,\n window: targetWindow,\n });\n\n const settingsButtonRef = useRef<HTMLButtonElement>(null);\n\n const className = cx(classBase, classNameProp);\n const loginUrl = useLoginUrl();\n\n const { showComponentInContextPanel } = useLayoutOperation();\n\n const handleLogout = useCallback(() => {\n logout(loginUrl);\n }, [loginUrl]);\n\n const handleShowSettings = useCallback(() => {\n showComponentInContextPanel(\n {\n type: \"ApplicationSettings\",\n },\n \"Settings\",\n () => settingsButtonRef.current?.focus(),\n );\n }, [showComponentInContextPanel]);\n\n return (\n <Toolbar\n alignItems=\"end\"\n className={className}\n role=\"banner\"\n showSeparators\n {...htmlAttributes}\n >\n <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n Help\n </Button>\n <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n History <span data-icon=\"history\" />\n </Button>\n <Button\n className={`${classBase}-menuItem`}\n onClick={handleShowSettings}\n ref={settingsButtonRef}\n variant=\"secondary\"\n >\n Settings <span data-icon=\"settings\" />\n </Button>\n <Button\n className={`${classBase}-menuItem`}\n onClick={handleLogout}\n variant=\"secondary\"\n >\n Log out\n </Button>\n </Toolbar>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","appHeaderCss","useRef","useLoginUrl","useLayoutOperation","useCallback","logout","jsxs","Toolbar","jsx","Button"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAKX,MAAM,YAAY,CAAC;AAAA,EACxB,SAAW,EAAA,aAAA;AAAA,EACX,SAAW,EAAA,CAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,WAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,iBAAA,GAAoBC,aAA0B,IAAI,CAAA,CAAA;AAExD,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EAAA,MAAM,WAAWC,+BAAY,EAAA,CAAA;AAE7B,EAAM,MAAA,EAAE,2BAA4B,EAAA,GAAIC,4BAAmB,EAAA,CAAA;AAE3D,EAAM,MAAA,YAAA,GAAeC,kBAAY,MAAM;AACrC,IAAAC,iBAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,kBAAA,GAAqBD,kBAAY,MAAM;AAC3C,IAAA,2BAAA;AAAA,MACE;AAAA,QACE,IAAM,EAAA,qBAAA;AAAA,OACR;AAAA,MACA,UAAA;AAAA,MACA,MAAM,iBAAkB,CAAA,OAAA,EAAS,KAAM,EAAA;AAAA,KACzC,CAAA;AAAA,GACF,EAAG,CAAC,2BAA2B,CAAC,CAAA,CAAA;AAEhC,EACE,uBAAAE,eAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,KAAA;AAAA,MACX,SAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,cAAc,EAAA,IAAA;AAAA,MACb,GAAG,cAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,eAAO,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,SAAA,CAAA,EAAA,OAAA,EAAQ,aAAY,QAEhE,EAAA,MAAA,EAAA,CAAA;AAAA,wCACCA,WAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,0BACtDD,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,SAAU,EAAA,CAAA;AAAA,SACpC,EAAA,CAAA;AAAA,wBACAF,eAAA;AAAA,UAACG,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,kBAAA;AAAA,YACT,GAAK,EAAA,iBAAA;AAAA,YACL,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA;AAAA,cAAA,WAAA;AAAA,8BACUD,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,UAAW,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACtC;AAAA,wBACAA,cAAA;AAAA,UAACC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,YAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA,SAAA;AAAA,WAAA;AAAA,SAED;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
|
|
@@ -16,6 +16,7 @@ const ContextPanel = ({
|
|
|
16
16
|
expanded = false,
|
|
17
17
|
content: contentProp,
|
|
18
18
|
id = vuuUtils.VuuShellLocation.ContextPanel,
|
|
19
|
+
onClose,
|
|
19
20
|
overlay = false,
|
|
20
21
|
title
|
|
21
22
|
}) => {
|
|
@@ -25,6 +26,7 @@ const ContextPanel = ({
|
|
|
25
26
|
css: ContextPanel$1,
|
|
26
27
|
window: targetWindow
|
|
27
28
|
});
|
|
29
|
+
const closeButtonRef = React.useRef(null);
|
|
28
30
|
const dispatchLayoutAction = vuuLayout.useLayoutProviderDispatch();
|
|
29
31
|
const handleClose = React.useCallback(() => {
|
|
30
32
|
dispatchLayoutAction({
|
|
@@ -34,6 +36,14 @@ const ContextPanel = ({
|
|
|
34
36
|
type: "set-prop"
|
|
35
37
|
});
|
|
36
38
|
}, [dispatchLayoutAction]);
|
|
39
|
+
const handleKeyDown = React.useCallback(
|
|
40
|
+
(e) => {
|
|
41
|
+
if (e.key === "Escape") {
|
|
42
|
+
handleClose();
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
[handleClose]
|
|
46
|
+
);
|
|
37
47
|
const className = cx(classBase, classNameProp, {
|
|
38
48
|
[`${classBase}-expanded`]: expanded,
|
|
39
49
|
[`${classBase}-inline`]: overlay !== true,
|
|
@@ -43,6 +53,13 @@ const ContextPanel = ({
|
|
|
43
53
|
() => contentProp && expanded ? vuuLayout.layoutFromJson(contentProp, "context-0") : null,
|
|
44
54
|
[contentProp, expanded]
|
|
45
55
|
);
|
|
56
|
+
React.useLayoutEffect(() => {
|
|
57
|
+
if (expanded) {
|
|
58
|
+
closeButtonRef.current?.focus();
|
|
59
|
+
} else {
|
|
60
|
+
onClose?.();
|
|
61
|
+
}
|
|
62
|
+
}, [expanded, onClose]);
|
|
46
63
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
47
64
|
"div",
|
|
48
65
|
{
|
|
@@ -59,6 +76,8 @@ const ContextPanel = ({
|
|
|
59
76
|
"data-embedded": true,
|
|
60
77
|
icon: "close",
|
|
61
78
|
onClick: handleClose,
|
|
79
|
+
onKeyDown: handleKeyDown,
|
|
80
|
+
ref: closeButtonRef,
|
|
62
81
|
size: 16,
|
|
63
82
|
variant: "secondary"
|
|
64
83
|
}
|
|
@@ -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 {
|
|
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 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}\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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserSettingsPanel.js","sources":["../../src/user-settings/UserSettingsPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { useApplicationSettings } from \"../application-provider\";\nimport { SettingsForm } from \"./SettingsForm\";\nimport cx from \"clsx\";\n\nimport userSettingsPanelCss from \"./UserSettingsPanel.css\";\n\nexport type UserSettingsPanelProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuUserSettingsPanel\";\n\nexport const UserSettingsPanel = ({\n ...htmlAttributes\n}: UserSettingsPanelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-user-settings-panel\",\n css: userSettingsPanelCss,\n window: targetWindow,\n });\n\n const {\n onUserSettingChanged,\n userSettings = {},\n userSettingsSchema,\n } = useApplicationSettings();\n\n // Without a schema, we can't render a form\n // We could render a list of input boxes but lets require a schema for now.\n if (userSettingsSchema) {\n return (\n <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n <SettingsForm\n settings={userSettings}\n settingsSchema={userSettingsSchema}\n onSettingChanged={onUserSettingChanged}\n />\n </div>\n );\n } else {\n console.
|
|
1
|
+
{"version":3,"file":"UserSettingsPanel.js","sources":["../../src/user-settings/UserSettingsPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { useApplicationSettings } from \"../application-provider\";\nimport { SettingsForm } from \"./SettingsForm\";\nimport cx from \"clsx\";\n\nimport userSettingsPanelCss from \"./UserSettingsPanel.css\";\n\nexport type UserSettingsPanelProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuUserSettingsPanel\";\n\nexport const UserSettingsPanel = ({\n ...htmlAttributes\n}: UserSettingsPanelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-user-settings-panel\",\n css: userSettingsPanelCss,\n window: targetWindow,\n });\n\n const {\n onUserSettingChanged,\n userSettings = {},\n userSettingsSchema,\n } = useApplicationSettings();\n\n // Without a schema, we can't render a form\n // We could render a list of input boxes but lets require a schema for now.\n if (userSettingsSchema) {\n return (\n <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n <SettingsForm\n settings={userSettings}\n settingsSchema={userSettingsSchema}\n onSettingChanged={onUserSettingChanged}\n />\n </div>\n );\n } else {\n console.log(\"no settingsSchema provided to UserSettingsPanel\");\n return null;\n }\n};\n"],"names":["useWindow","useComponentCssInjection","userSettingsPanelCss","useApplicationSettings","jsx","SettingsForm"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAEX,MAAM,oBAAoB,CAAC;AAAA,EAChC,GAAG,cAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,kBAAA;AAAA,MACEC,0CAAuB,EAAA,CAAA;AAI3B,EAAA,IAAI,kBAAoB,EAAA;AACtB,IACE,uBAAAC,cAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,eAAe,CAC/D,EAAA,QAAA,kBAAAA,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,YAAA;AAAA,QACV,cAAgB,EAAA,kBAAA;AAAA,QAChB,gBAAkB,EAAA,oBAAA;AAAA,OAAA;AAAA,KAEtB,EAAA,CAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,CAAQ,IAAI,iDAAiD,CAAA,CAAA;AAC7D,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}
|
|
@@ -5,7 +5,7 @@ import { Button } from '@salt-ds/core';
|
|
|
5
5
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
6
|
import { useWindow } from '@salt-ds/window';
|
|
7
7
|
import cx from 'clsx';
|
|
8
|
-
import { useCallback } from 'react';
|
|
8
|
+
import { useRef, useCallback } from 'react';
|
|
9
9
|
import { logout } from '../login/login-utils.js';
|
|
10
10
|
import { useLoginUrl } from '../application-provider/ApplicationProvider.js';
|
|
11
11
|
import appHeaderCss from './AppHeader.css.js';
|
|
@@ -22,6 +22,7 @@ const AppHeader = ({
|
|
|
22
22
|
css: appHeaderCss,
|
|
23
23
|
window: targetWindow
|
|
24
24
|
});
|
|
25
|
+
const settingsButtonRef = useRef(null);
|
|
25
26
|
const className = cx(classBase, classNameProp);
|
|
26
27
|
const loginUrl = useLoginUrl();
|
|
27
28
|
const { showComponentInContextPanel } = useLayoutOperation();
|
|
@@ -33,7 +34,8 @@ const AppHeader = ({
|
|
|
33
34
|
{
|
|
34
35
|
type: "ApplicationSettings"
|
|
35
36
|
},
|
|
36
|
-
"Settings"
|
|
37
|
+
"Settings",
|
|
38
|
+
() => settingsButtonRef.current?.focus()
|
|
37
39
|
);
|
|
38
40
|
}, [showComponentInContextPanel]);
|
|
39
41
|
return /* @__PURE__ */ jsxs(
|
|
@@ -55,6 +57,7 @@ const AppHeader = ({
|
|
|
55
57
|
{
|
|
56
58
|
className: `${classBase}-menuItem`,
|
|
57
59
|
onClick: handleShowSettings,
|
|
60
|
+
ref: settingsButtonRef,
|
|
58
61
|
variant: "secondary",
|
|
59
62
|
children: [
|
|
60
63
|
"Settings ",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sources":["../../src/app-header/AppHeader.tsx"],"sourcesContent":["import { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback } from \"react\";\nimport { logout } from \"../login\";\nimport { useLoginUrl } from \"../application-provider\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n className: classNameProp,\n themeMode: _,\n ...htmlAttributes\n}: AppHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-app-header\",\n css: appHeaderCss,\n window: targetWindow,\n });\n\n const className = cx(classBase, classNameProp);\n const loginUrl = useLoginUrl();\n\n const { showComponentInContextPanel } = useLayoutOperation();\n\n const handleLogout = useCallback(() => {\n logout(loginUrl);\n }, [loginUrl]);\n\n const handleShowSettings = useCallback(() => {\n showComponentInContextPanel(\n {\n type: \"ApplicationSettings\",\n },\n \"Settings\",\n );\n }, [showComponentInContextPanel]);\n\n return (\n <Toolbar\n alignItems=\"end\"\n className={className}\n role=\"banner\"\n showSeparators\n {...htmlAttributes}\n >\n <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n Help\n </Button>\n <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n History <span data-icon=\"history\" />\n </Button>\n <Button\n className={`${classBase}-menuItem`}\n onClick={handleShowSettings}\n variant=\"secondary\"\n >\n Settings <span data-icon=\"settings\" />\n </Button>\n <Button\n className={`${classBase}-menuItem`}\n onClick={handleLogout}\n variant=\"secondary\"\n >\n Log out\n </Button>\n </Toolbar>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAKX,MAAM,YAAY,CAAC;AAAA,EACxB,SAAW,EAAA,aAAA;AAAA,EACX,SAAW,EAAA,CAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAM,MAAA,EAAE,2BAA4B,EAAA,GAAI,kBAAmB,EAAA,CAAA;AAE3D,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,MAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,kBAAA,GAAqB,YAAY,MAAM;AAC3C,IAAA,2BAAA;AAAA,MACE;AAAA,QACE,IAAM,EAAA,qBAAA;AAAA,OACR;AAAA,MACA,UAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sources":["../../src/app-header/AppHeader.tsx"],"sourcesContent":["import { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { logout } from \"../login\";\nimport { useLoginUrl } from \"../application-provider\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n className: classNameProp,\n themeMode: _,\n ...htmlAttributes\n}: AppHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-app-header\",\n css: appHeaderCss,\n window: targetWindow,\n });\n\n const settingsButtonRef = useRef<HTMLButtonElement>(null);\n\n const className = cx(classBase, classNameProp);\n const loginUrl = useLoginUrl();\n\n const { showComponentInContextPanel } = useLayoutOperation();\n\n const handleLogout = useCallback(() => {\n logout(loginUrl);\n }, [loginUrl]);\n\n const handleShowSettings = useCallback(() => {\n showComponentInContextPanel(\n {\n type: \"ApplicationSettings\",\n },\n \"Settings\",\n () => settingsButtonRef.current?.focus(),\n );\n }, [showComponentInContextPanel]);\n\n return (\n <Toolbar\n alignItems=\"end\"\n className={className}\n role=\"banner\"\n showSeparators\n {...htmlAttributes}\n >\n <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n Help\n </Button>\n <Button className={`${classBase}-menuItem`} variant=\"secondary\">\n History <span data-icon=\"history\" />\n </Button>\n <Button\n className={`${classBase}-menuItem`}\n onClick={handleShowSettings}\n ref={settingsButtonRef}\n variant=\"secondary\"\n >\n Settings <span data-icon=\"settings\" />\n </Button>\n <Button\n className={`${classBase}-menuItem`}\n onClick={handleLogout}\n variant=\"secondary\"\n >\n Log out\n </Button>\n </Toolbar>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAaA,MAAM,SAAY,GAAA,cAAA,CAAA;AAKX,MAAM,YAAY,CAAC;AAAA,EACxB,SAAW,EAAA,aAAA;AAAA,EACX,SAAW,EAAA,CAAA;AAAA,EACX,GAAG,cAAA;AACL,CAAsB,KAAA;AACpB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,YAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,iBAAA,GAAoB,OAA0B,IAAI,CAAA,CAAA;AAExD,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAC7C,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAE7B,EAAM,MAAA,EAAE,2BAA4B,EAAA,GAAI,kBAAmB,EAAA,CAAA;AAE3D,EAAM,MAAA,YAAA,GAAe,YAAY,MAAM;AACrC,IAAA,MAAA,CAAO,QAAQ,CAAA,CAAA;AAAA,GACjB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAM,MAAA,kBAAA,GAAqB,YAAY,MAAM;AAC3C,IAAA,2BAAA;AAAA,MACE;AAAA,QACE,IAAM,EAAA,qBAAA;AAAA,OACR;AAAA,MACA,UAAA;AAAA,MACA,MAAM,iBAAkB,CAAA,OAAA,EAAS,KAAM,EAAA;AAAA,KACzC,CAAA;AAAA,GACF,EAAG,CAAC,2BAA2B,CAAC,CAAA,CAAA;AAEhC,EACE,uBAAA,IAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,UAAW,EAAA,KAAA;AAAA,MACX,SAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACL,cAAc,EAAA,IAAA;AAAA,MACb,GAAG,cAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,UAAO,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,SAAA,CAAA,EAAA,OAAA,EAAQ,aAAY,QAEhE,EAAA,MAAA,EAAA,CAAA;AAAA,6BACC,MAAO,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA,EAAa,SAAQ,WAAY,EAAA,QAAA,EAAA;AAAA,UAAA,UAAA;AAAA,0BACtD,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,SAAU,EAAA,CAAA;AAAA,SACpC,EAAA,CAAA;AAAA,wBACA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,kBAAA;AAAA,YACT,GAAK,EAAA,iBAAA;AAAA,YACL,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA;AAAA,cAAA,WAAA;AAAA,8BACU,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,UAAW,EAAA,CAAA;AAAA,aAAA;AAAA,WAAA;AAAA,SACtC;AAAA,wBACA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,GAAG,SAAS,CAAA,SAAA,CAAA;AAAA,YACvB,OAAS,EAAA,YAAA;AAAA,YACT,OAAQ,EAAA,WAAA;AAAA,YACT,QAAA,EAAA,SAAA;AAAA,WAAA;AAAA,SAED;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
|
|
@@ -5,7 +5,7 @@ import { VuuShellLocation } from '@vuu-ui/vuu-utils';
|
|
|
5
5
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
6
6
|
import { useWindow } from '@salt-ds/window';
|
|
7
7
|
import cx from 'clsx';
|
|
8
|
-
import { useCallback, useMemo } from 'react';
|
|
8
|
+
import { useRef, useCallback, useMemo, useLayoutEffect } from 'react';
|
|
9
9
|
import contextPanelCss from './ContextPanel.css.js';
|
|
10
10
|
|
|
11
11
|
const classBase = "vuuContextPanel";
|
|
@@ -14,6 +14,7 @@ const ContextPanel = ({
|
|
|
14
14
|
expanded = false,
|
|
15
15
|
content: contentProp,
|
|
16
16
|
id = VuuShellLocation.ContextPanel,
|
|
17
|
+
onClose,
|
|
17
18
|
overlay = false,
|
|
18
19
|
title
|
|
19
20
|
}) => {
|
|
@@ -23,6 +24,7 @@ const ContextPanel = ({
|
|
|
23
24
|
css: contextPanelCss,
|
|
24
25
|
window: targetWindow
|
|
25
26
|
});
|
|
27
|
+
const closeButtonRef = useRef(null);
|
|
26
28
|
const dispatchLayoutAction = useLayoutProviderDispatch();
|
|
27
29
|
const handleClose = useCallback(() => {
|
|
28
30
|
dispatchLayoutAction({
|
|
@@ -32,6 +34,14 @@ const ContextPanel = ({
|
|
|
32
34
|
type: "set-prop"
|
|
33
35
|
});
|
|
34
36
|
}, [dispatchLayoutAction]);
|
|
37
|
+
const handleKeyDown = useCallback(
|
|
38
|
+
(e) => {
|
|
39
|
+
if (e.key === "Escape") {
|
|
40
|
+
handleClose();
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
[handleClose]
|
|
44
|
+
);
|
|
35
45
|
const className = cx(classBase, classNameProp, {
|
|
36
46
|
[`${classBase}-expanded`]: expanded,
|
|
37
47
|
[`${classBase}-inline`]: overlay !== true,
|
|
@@ -41,6 +51,13 @@ const ContextPanel = ({
|
|
|
41
51
|
() => contentProp && expanded ? layoutFromJson(contentProp, "context-0") : null,
|
|
42
52
|
[contentProp, expanded]
|
|
43
53
|
);
|
|
54
|
+
useLayoutEffect(() => {
|
|
55
|
+
if (expanded) {
|
|
56
|
+
closeButtonRef.current?.focus();
|
|
57
|
+
} else {
|
|
58
|
+
onClose?.();
|
|
59
|
+
}
|
|
60
|
+
}, [expanded, onClose]);
|
|
44
61
|
return /* @__PURE__ */ jsx(
|
|
45
62
|
"div",
|
|
46
63
|
{
|
|
@@ -57,6 +74,8 @@ const ContextPanel = ({
|
|
|
57
74
|
"data-embedded": true,
|
|
58
75
|
icon: "close",
|
|
59
76
|
onClick: handleClose,
|
|
77
|
+
onKeyDown: handleKeyDown,
|
|
78
|
+
ref: closeButtonRef,
|
|
60
79
|
size: 16,
|
|
61
80
|
variant: "secondary"
|
|
62
81
|
}
|
|
@@ -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 {
|
|
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 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}\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":";;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAYX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAW,EAAA,aAAA;AAAA,EACX,QAAW,GAAA,KAAA;AAAA,EACX,OAAS,EAAA,WAAA;AAAA,EACT,KAAK,gBAAiB,CAAA,YAAA;AAAA,EACtB,OAAA;AAAA,EACA,OAAU,GAAA,KAAA;AAAA,EACV,KAAA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,OAA0B,IAAI,CAAA,CAAA;AACrD,EAAA,MAAM,uBAAuB,yBAA0B,EAAA,CAAA;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,UAAA;AAAA,KACP,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,oBAAoB,CAAC,CAAA,CAAA;AAEzB,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,QAAU,EAAA;AACtB,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAAA,KACF;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;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,OAAA;AAAA,GAC3B,CAAA,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,CAAA;AAAA,GACxB,CAAA;AAEA,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,QAAU,EAAA;AAGZ,MAAA,cAAA,CAAe,SAAS,KAAM,EAAA,CAAA;AAAA,KACzB,MAAA;AACL,MAAU,OAAA,IAAA,CAAA;AAAA,KACZ;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,OAAO,CAAC,CAAA,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,QAAA;AAAA,OAC5B,CAAA;AAAA,MAED,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,WAAA;AAAA,aAAA;AAAA,WACV;AAAA,SACF,EAAA,CAAA;AAAA,4BACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,OACnD,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserSettingsPanel.js","sources":["../../src/user-settings/UserSettingsPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { useApplicationSettings } from \"../application-provider\";\nimport { SettingsForm } from \"./SettingsForm\";\nimport cx from \"clsx\";\n\nimport userSettingsPanelCss from \"./UserSettingsPanel.css\";\n\nexport type UserSettingsPanelProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuUserSettingsPanel\";\n\nexport const UserSettingsPanel = ({\n ...htmlAttributes\n}: UserSettingsPanelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-user-settings-panel\",\n css: userSettingsPanelCss,\n window: targetWindow,\n });\n\n const {\n onUserSettingChanged,\n userSettings = {},\n userSettingsSchema,\n } = useApplicationSettings();\n\n // Without a schema, we can't render a form\n // We could render a list of input boxes but lets require a schema for now.\n if (userSettingsSchema) {\n return (\n <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n <SettingsForm\n settings={userSettings}\n settingsSchema={userSettingsSchema}\n onSettingChanged={onUserSettingChanged}\n />\n </div>\n );\n } else {\n console.
|
|
1
|
+
{"version":3,"file":"UserSettingsPanel.js","sources":["../../src/user-settings/UserSettingsPanel.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport { useApplicationSettings } from \"../application-provider\";\nimport { SettingsForm } from \"./SettingsForm\";\nimport cx from \"clsx\";\n\nimport userSettingsPanelCss from \"./UserSettingsPanel.css\";\n\nexport type UserSettingsPanelProps = HTMLAttributes<HTMLDivElement>;\n\nconst classBase = \"vuuUserSettingsPanel\";\n\nexport const UserSettingsPanel = ({\n ...htmlAttributes\n}: UserSettingsPanelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-user-settings-panel\",\n css: userSettingsPanelCss,\n window: targetWindow,\n });\n\n const {\n onUserSettingChanged,\n userSettings = {},\n userSettingsSchema,\n } = useApplicationSettings();\n\n // Without a schema, we can't render a form\n // We could render a list of input boxes but lets require a schema for now.\n if (userSettingsSchema) {\n return (\n <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n <SettingsForm\n settings={userSettings}\n settingsSchema={userSettingsSchema}\n onSettingChanged={onUserSettingChanged}\n />\n </div>\n );\n } else {\n console.log(\"no settingsSchema provided to UserSettingsPanel\");\n return null;\n }\n};\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAEX,MAAM,oBAAoB,CAAC;AAAA,EAChC,GAAG,cAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,eAAe,EAAC;AAAA,IAChB,kBAAA;AAAA,MACE,sBAAuB,EAAA,CAAA;AAI3B,EAAA,IAAI,kBAAoB,EAAA;AACtB,IACE,uBAAA,GAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,eAAe,CAC/D,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,YAAA;AAAA,QACV,cAAgB,EAAA,kBAAA;AAAA,QAChB,gBAAkB,EAAA,oBAAA;AAAA,OAAA;AAAA,KAEtB,EAAA,CAAA,CAAA;AAAA,GAEG,MAAA;AACL,IAAA,OAAA,CAAQ,IAAI,iDAAiD,CAAA,CAAA;AAC7D,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}
|
package/package.json
CHANGED
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.99",
|
|
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.8.
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "0.8.
|
|
9
|
-
"@vuu-ui/vuu-table-types": "0.8.
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.8.99",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "0.8.99",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "0.8.99"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@salt-ds/core": "1.34.0",
|
|
13
13
|
"@salt-ds/styles": "0.2.1",
|
|
14
14
|
"@salt-ds/window": "0.1.1",
|
|
15
|
-
"@vuu-ui/vuu-data-react": "0.8.
|
|
16
|
-
"@vuu-ui/vuu-data-remote": "0.8.
|
|
17
|
-
"@vuu-ui/vuu-icons": "0.8.
|
|
18
|
-
"@vuu-ui/vuu-layout": "0.8.
|
|
19
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
20
|
-
"@vuu-ui/vuu-table": "0.8.
|
|
21
|
-
"@vuu-ui/vuu-ui-controls": "0.8.
|
|
22
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
15
|
+
"@vuu-ui/vuu-data-react": "0.8.99",
|
|
16
|
+
"@vuu-ui/vuu-data-remote": "0.8.99",
|
|
17
|
+
"@vuu-ui/vuu-icons": "0.8.99",
|
|
18
|
+
"@vuu-ui/vuu-layout": "0.8.99",
|
|
19
|
+
"@vuu-ui/vuu-popups": "0.8.99",
|
|
20
|
+
"@vuu-ui/vuu-table": "0.8.99",
|
|
21
|
+
"@vuu-ui/vuu-ui-controls": "0.8.99",
|
|
22
|
+
"@vuu-ui/vuu-utils": "0.8.99",
|
|
23
23
|
"html-to-image": "^1.11.11"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
@@ -6,6 +6,7 @@ export interface ContextPanelProps {
|
|
|
6
6
|
content?: LayoutJSON;
|
|
7
7
|
expanded?: boolean;
|
|
8
8
|
id?: string;
|
|
9
|
+
onClose?: () => void;
|
|
9
10
|
overlay?: boolean;
|
|
10
11
|
}
|
|
11
|
-
export declare const ContextPanel: ({ className: classNameProp, expanded, content: contentProp, id, overlay, title, }: ContextPanelProps) => JSX.Element;
|
|
12
|
+
export declare const ContextPanel: ({ className: classNameProp, expanded, content: contentProp, id, onClose, overlay, title, }: ContextPanelProps) => JSX.Element;
|