@k2b/ui 0.9.1 → 0.10.0
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/dist/browser/actions/Button.js +15 -7
- package/dist/browser/actions/Button.js.map +1 -1
- package/dist/browser/actions/ContextMenu.js +55 -15
- package/dist/browser/actions/ContextMenu.js.map +1 -1
- package/dist/browser/actions/Dropdown.js +39 -15
- package/dist/browser/actions/Dropdown.js.map +1 -1
- package/dist/browser/actions/FilterChip.js +1 -7
- package/dist/browser/actions/FilterChip.js.map +1 -1
- package/dist/browser/actions/SplitButton.js +0 -3
- package/dist/browser/actions/SplitButton.js.map +1 -1
- package/dist/browser/chat/ChatComposer.js +78 -91
- package/dist/browser/chat/ChatComposer.js.map +1 -1
- package/dist/browser/chat/ChatContextPopup.js +47 -21
- package/dist/browser/chat/ChatContextPopup.js.map +1 -1
- package/dist/browser/chat/ChatPrimitives.js +221 -232
- package/dist/browser/chat/ChatPrimitives.js.map +1 -1
- package/dist/browser/chat/index.js +3 -2
- package/dist/browser/chat/index.js.map +1 -1
- package/dist/browser/content/Chart.js +99 -106
- package/dist/browser/content/Chart.js.map +1 -1
- package/dist/browser/content/ChartExplorer.js +3 -6
- package/dist/browser/content/ChartExplorer.js.map +1 -1
- package/dist/browser/content/FileBrowser.js +1 -1
- package/dist/browser/content/FileBrowser.js.map +1 -1
- package/dist/browser/content/FileTree.js +1 -1
- package/dist/browser/content/FileTree.js.map +1 -1
- package/dist/browser/content/FileView.js +304 -287
- package/dist/browser/content/FileView.js.map +1 -1
- package/dist/browser/content/Lightbox.js +18 -0
- package/dist/browser/content/Lightbox.js.map +1 -1
- package/dist/browser/content/PdfPreview.js +68 -43
- package/dist/browser/content/PdfPreview.js.map +1 -1
- package/dist/browser/content/ZoomPanViewport.js +51 -52
- package/dist/browser/content/ZoomPanViewport.js.map +1 -1
- package/dist/browser/feedback/HoverPreview.js +391 -0
- package/dist/browser/feedback/HoverPreview.js.map +1 -0
- package/dist/browser/feedback/Tooltip.js +50 -8
- package/dist/browser/feedback/Tooltip.js.map +1 -1
- package/dist/browser/feedback/dialog-core.js +21 -3
- package/dist/browser/feedback/dialog-core.js.map +1 -1
- package/dist/browser/feedback/index.js +1 -0
- package/dist/browser/feedback/index.js.map +1 -1
- package/dist/browser/inputs/AutocompleteEditor.js +5 -4
- package/dist/browser/inputs/AutocompleteEditor.js.map +1 -1
- package/dist/browser/inputs/DatePicker.js +10 -0
- package/dist/browser/inputs/DatePicker.js.map +1 -1
- package/dist/browser/inputs/FileInputs.js +46 -36
- package/dist/browser/inputs/FileInputs.js.map +1 -1
- package/dist/browser/inputs/SelectChip.js +2 -1
- package/dist/browser/inputs/SelectChip.js.map +1 -1
- package/dist/browser/inputs/choice.js +5 -1
- package/dist/browser/inputs/choice.js.map +1 -1
- package/dist/browser/inputs/markdown/MarkdownEditor.js +173 -173
- package/dist/browser/inputs/markdown/MarkdownEditor.js.map +1 -1
- package/dist/browser/inputs/markdown/Toolbar.js +31 -34
- package/dist/browser/inputs/markdown/Toolbar.js.map +1 -1
- package/dist/browser/internal/focus-return.js +61 -0
- package/dist/browser/internal/focus-return.js.map +1 -0
- package/dist/browser/layout/AppOverview.js +1 -1
- package/dist/browser/layout/AppOverview.js.map +1 -1
- package/dist/browser/layout/DetailPanel.js +16 -15
- package/dist/browser/layout/DetailPanel.js.map +1 -1
- package/dist/browser/layout/FloatingWindow.js +3 -1
- package/dist/browser/layout/FloatingWindow.js.map +1 -1
- package/dist/browser/layout/PanelDialog.js +10 -9
- package/dist/browser/layout/PanelDialog.js.map +1 -1
- package/dist/browser/layout/Panes.js +82 -81
- package/dist/browser/layout/Panes.js.map +1 -1
- package/dist/browser/layout/SidebarItemPreview.js +48 -136
- package/dist/browser/layout/SidebarItemPreview.js.map +1 -1
- package/dist/browser/layout/app-workspace-controller.js +5 -2
- package/dist/browser/layout/app-workspace-controller.js.map +1 -1
- package/dist/browser/surfaces/ProgressBar.js.map +1 -1
- package/dist/browser/surfaces/ProgressRing.js +72 -0
- package/dist/browser/surfaces/ProgressRing.js.map +1 -0
- package/dist/browser/surfaces/index.js +1 -0
- package/dist/browser/surfaces/index.js.map +1 -1
- package/dist/ssr/actions/Button.js +15 -7
- package/dist/ssr/actions/Button.js.map +1 -1
- package/dist/ssr/actions/ContextMenu.js +55 -15
- package/dist/ssr/actions/ContextMenu.js.map +1 -1
- package/dist/ssr/actions/Dropdown.js +31 -12
- package/dist/ssr/actions/Dropdown.js.map +1 -1
- package/dist/ssr/actions/FilterChip.js +1 -7
- package/dist/ssr/actions/FilterChip.js.map +1 -1
- package/dist/ssr/actions/SplitButton.js +0 -3
- package/dist/ssr/actions/SplitButton.js.map +1 -1
- package/dist/ssr/chat/ChatComposer.js +61 -10
- package/dist/ssr/chat/ChatComposer.js.map +1 -1
- package/dist/ssr/chat/ChatContextPopup.js +19 -5
- package/dist/ssr/chat/ChatContextPopup.js.map +1 -1
- package/dist/ssr/chat/ChatPrimitives.js +104 -74
- package/dist/ssr/chat/ChatPrimitives.js.map +1 -1
- package/dist/ssr/chat/index.js +3 -2
- package/dist/ssr/chat/index.js.map +1 -1
- package/dist/ssr/content/Chart.js +22 -11
- package/dist/ssr/content/Chart.js.map +1 -1
- package/dist/ssr/content/ChartExplorer.js +3 -6
- package/dist/ssr/content/ChartExplorer.js.map +1 -1
- package/dist/ssr/content/FileBrowser.js +1 -1
- package/dist/ssr/content/FileBrowser.js.map +1 -1
- package/dist/ssr/content/FileTree.js +1 -1
- package/dist/ssr/content/FileTree.js.map +1 -1
- package/dist/ssr/content/FileView.js +105 -33
- package/dist/ssr/content/FileView.js.map +1 -1
- package/dist/ssr/content/Lightbox.js +17 -0
- package/dist/ssr/content/Lightbox.js.map +1 -1
- package/dist/ssr/content/PdfPreview.js +44 -14
- package/dist/ssr/content/PdfPreview.js.map +1 -1
- package/dist/ssr/content/ZoomPanViewport.js +11 -3
- package/dist/ssr/content/ZoomPanViewport.js.map +1 -1
- package/dist/ssr/feedback/HoverPreview.js +360 -0
- package/dist/ssr/feedback/HoverPreview.js.map +1 -0
- package/dist/ssr/feedback/Tooltip.js +50 -8
- package/dist/ssr/feedback/Tooltip.js.map +1 -1
- package/dist/ssr/feedback/dialog-core.js +21 -3
- package/dist/ssr/feedback/dialog-core.js.map +1 -1
- package/dist/ssr/feedback/index.js +1 -0
- package/dist/ssr/feedback/index.js.map +1 -1
- package/dist/ssr/inputs/AutocompleteEditor.js +5 -4
- package/dist/ssr/inputs/AutocompleteEditor.js.map +1 -1
- package/dist/ssr/inputs/DatePicker.js +5 -0
- package/dist/ssr/inputs/DatePicker.js.map +1 -1
- package/dist/ssr/inputs/FileInputs.js +29 -11
- package/dist/ssr/inputs/FileInputs.js.map +1 -1
- package/dist/ssr/inputs/SelectChip.js +2 -1
- package/dist/ssr/inputs/SelectChip.js.map +1 -1
- package/dist/ssr/inputs/choice.js +5 -1
- package/dist/ssr/inputs/choice.js.map +1 -1
- package/dist/ssr/inputs/markdown/MarkdownEditor.js +46 -10
- package/dist/ssr/inputs/markdown/MarkdownEditor.js.map +1 -1
- package/dist/ssr/inputs/markdown/Toolbar.js +30 -2
- package/dist/ssr/inputs/markdown/Toolbar.js.map +1 -1
- package/dist/ssr/internal/focus-return.js +61 -0
- package/dist/ssr/internal/focus-return.js.map +1 -0
- package/dist/ssr/layout/AppOverview.js +1 -1
- package/dist/ssr/layout/AppOverview.js.map +1 -1
- package/dist/ssr/layout/DetailPanel.js +16 -15
- package/dist/ssr/layout/DetailPanel.js.map +1 -1
- package/dist/ssr/layout/FloatingWindow.js +3 -1
- package/dist/ssr/layout/FloatingWindow.js.map +1 -1
- package/dist/ssr/layout/PanelDialog.js +10 -9
- package/dist/ssr/layout/PanelDialog.js.map +1 -1
- package/dist/ssr/layout/Panes.js +39 -8
- package/dist/ssr/layout/Panes.js.map +1 -1
- package/dist/ssr/layout/SidebarItemPreview.js +36 -108
- package/dist/ssr/layout/SidebarItemPreview.js.map +1 -1
- package/dist/ssr/layout/app-workspace-controller.js +5 -2
- package/dist/ssr/layout/app-workspace-controller.js.map +1 -1
- package/dist/ssr/surfaces/ProgressBar.js.map +1 -1
- package/dist/ssr/surfaces/ProgressRing.js +31 -0
- package/dist/ssr/surfaces/ProgressRing.js.map +1 -0
- package/dist/ssr/surfaces/index.js +1 -0
- package/dist/ssr/surfaces/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/actions/Button.d.ts +5 -0
- package/dist/types/actions/Dropdown.d.ts +5 -1
- package/dist/types/actions/SplitButton.d.ts +1 -0
- package/dist/types/chat/ChatContextPopup.d.ts +8 -0
- package/dist/types/chat/index.d.ts +3 -2
- package/dist/types/feedback/HoverPreview.d.ts +83 -0
- package/dist/types/feedback/Tooltip.d.ts +6 -0
- package/dist/types/feedback/index.d.ts +2 -0
- package/dist/types/feedback/prompts.d.ts +9 -6
- package/dist/types/inputs/SelectChip.d.ts +1 -0
- package/dist/types/inputs/completion/overlay.d.ts +3 -1
- package/dist/types/internal/focus-return.d.ts +20 -0
- package/dist/types/intl/Format.d.ts +16 -8
- package/dist/types/layout/BottomSheet.d.ts +6 -1
- package/dist/types/layout/SidebarItemPreview.d.ts +1 -1
- package/dist/types/surfaces/ProgressBar.d.ts +1 -1
- package/dist/types/surfaces/ProgressRing.d.ts +13 -0
- package/dist/types/surfaces/index.d.ts +2 -0
- package/package.json +3 -2
|
@@ -3,7 +3,7 @@ import { memo as _$memo } from "solid-js/web";
|
|
|
3
3
|
import { createComponent as _$createComponent } from "solid-js/web";
|
|
4
4
|
import { ssr as _$ssr } from "solid-js/web";
|
|
5
5
|
import { escape as _$escape } from "solid-js/web";
|
|
6
|
-
var _tmpl$ = ["<p>", "</p>"],
|
|
6
|
+
var _tmpl$ = ["<p class=\"k2b-app-overview__panel-description\">", "</p>"],
|
|
7
7
|
_tmpl$2 = ["<div class=\"k2b-app-overview__toolbar\">", "</div>"],
|
|
8
8
|
_tmpl$3 = ["<div class=\"k2b-app-overview__panel-header\"><div><h2>", "</h2>", "</div>", "</div>"],
|
|
9
9
|
_tmpl$4 = ["<section class=\"", "\">", "", "</section>"],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["layout/AppOverview.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Placeholder from \"../surfaces/Placeholder\";\nimport { PanelHeader } from \"./PanelHeader\";\n\nexport type AppOverviewProps = {\n title: string;\n subtitle?: string;\n icon: string;\n /** The page's single primary action, such as a create button or menu. */\n actions?: JSX.Element;\n class?: string;\n children: JSX.Element;\n};\n\nexport type AppOverviewPanelProps = {\n title: string;\n description?: JSX.Element;\n toolbar?: JSX.Element;\n class?: string;\n children: JSX.Element;\n};\n\nexport type AppOverviewEmptyStateProps = {\n title: string;\n description?: JSX.Element;\n icon?: string;\n class?: string;\n children?: JSX.Element;\n};\n\nexport type AppOverviewCardsProps = {\n class?: string;\n children: JSX.Element;\n};\n\ntype AppOverviewComponent = ((props: AppOverviewProps) => JSX.Element) & {\n Main: (props: AppOverviewPanelProps) => JSX.Element;\n Aside: (props: AppOverviewPanelProps) => JSX.Element;\n Cards: (props: AppOverviewCardsProps) => JSX.Element;\n EmptyState: (props: AppOverviewEmptyStateProps) => JSX.Element;\n};\n\nconst tablerIconClass = (icon: string | null | undefined, fallback: string): string => {\n const value = icon?.trim() || fallback;\n return value.startsWith(\"ti \") ? value : `ti ${value}`;\n};\n\nconst AppOverviewPanelHeader = (props: Pick<AppOverviewPanelProps, \"title\" | \"description\" | \"toolbar\">): JSX.Element => (\n <div class=\"k2b-app-overview__panel-header\">\n <div>\n <h2>{props.title}</h2>\n <Show when={props.description}>\n <p>{props.description}</p>\n </Show>\n </div>\n <Show when={props.toolbar}>\n <div class=\"k2b-app-overview__toolbar\">{props.toolbar}</div>\n </Show>\n </div>\n);\n\nconst AppOverviewMain = (props: AppOverviewPanelProps): JSX.Element => (\n <section class={`k2b-app-overview__main ${props.class ?? \"\"}`}>\n <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n {props.children}\n </section>\n);\n\nconst AppOverviewAside = (props: AppOverviewPanelProps): JSX.Element => (\n <aside class={`k2b-app-overview__aside ${props.class ?? \"\"}`}>\n <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n {props.children}\n </aside>\n);\n\nconst AppOverviewCards = (props: AppOverviewCardsProps): JSX.Element => (\n <div class={`k2b-app-overview__cards ${props.class ?? \"\"}`}>{props.children}</div>\n);\n\nconst AppOverviewEmptyState = (props: AppOverviewEmptyStateProps): JSX.Element => (\n <Placeholder\n surface=\"paper\"\n variant=\"panel\"\n title={props.title}\n description={props.description}\n icon={props.icon ? tablerIconClass(props.icon, \"ti-inbox\") : undefined}\n action={props.children}\n class={props.class}\n />\n);\n\nconst AppOverview = ((props: AppOverviewProps): JSX.Element => (\n <div class={`k2b-app-overview ${props.class ?? \"\"}`}>\n <header class=\"k2b-app-overview__header\">\n <span class=\"k2b-app-overview__icon\" aria-hidden=\"true\">\n <i class={tablerIconClass(props.icon, \"ti-apps\")} />\n </span>\n <PanelHeader as=\"h1\" size=\"lg\" title={props.title} subtitle={props.subtitle} actions={props.actions} />\n </header>\n <div class=\"k2b-app-overview__columns\">{props.children}</div>\n </div>\n)) as AppOverviewComponent;\n\nAppOverview.Main = AppOverviewMain;\nAppOverview.Aside = AppOverviewAside;\nAppOverview.Cards = AppOverviewCards;\nAppOverview.EmptyState = AppOverviewEmptyState;\n\nexport default AppOverview;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,OAAO,WAAW,MAAM,yBAAyB;AACjD,SAAS,WAAW,QAAQ,eAAe;AAwC3C,MAAM,eAAe,GAAG,CAAC,IAA+B,EAAE,QAAgB,KAAa;EACrF,MAAM,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,QAAQ;EACtC,OAAO,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,MAAM,KAAK,EAAE;AACxD,CAAC;AAED,MAAM,sBAAsB,GAAI,KAAuE,4BAG5F,KAAK,CAAC,KAAK,8BACf,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA;IAAA,
|
|
1
|
+
{"version":3,"names":[],"sources":["layout/AppOverview.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Placeholder from \"../surfaces/Placeholder\";\nimport { PanelHeader } from \"./PanelHeader\";\n\nexport type AppOverviewProps = {\n title: string;\n subtitle?: string;\n icon: string;\n /** The page's single primary action, such as a create button or menu. */\n actions?: JSX.Element;\n class?: string;\n children: JSX.Element;\n};\n\nexport type AppOverviewPanelProps = {\n title: string;\n description?: JSX.Element;\n toolbar?: JSX.Element;\n class?: string;\n children: JSX.Element;\n};\n\nexport type AppOverviewEmptyStateProps = {\n title: string;\n description?: JSX.Element;\n icon?: string;\n class?: string;\n children?: JSX.Element;\n};\n\nexport type AppOverviewCardsProps = {\n class?: string;\n children: JSX.Element;\n};\n\ntype AppOverviewComponent = ((props: AppOverviewProps) => JSX.Element) & {\n Main: (props: AppOverviewPanelProps) => JSX.Element;\n Aside: (props: AppOverviewPanelProps) => JSX.Element;\n Cards: (props: AppOverviewCardsProps) => JSX.Element;\n EmptyState: (props: AppOverviewEmptyStateProps) => JSX.Element;\n};\n\nconst tablerIconClass = (icon: string | null | undefined, fallback: string): string => {\n const value = icon?.trim() || fallback;\n return value.startsWith(\"ti \") ? value : `ti ${value}`;\n};\n\nconst AppOverviewPanelHeader = (props: Pick<AppOverviewPanelProps, \"title\" | \"description\" | \"toolbar\">): JSX.Element => (\n <div class=\"k2b-app-overview__panel-header\">\n <div>\n <h2>{props.title}</h2>\n <Show when={props.description}>\n <p class=\"k2b-app-overview__panel-description\">{props.description}</p>\n </Show>\n </div>\n <Show when={props.toolbar}>\n <div class=\"k2b-app-overview__toolbar\">{props.toolbar}</div>\n </Show>\n </div>\n);\n\nconst AppOverviewMain = (props: AppOverviewPanelProps): JSX.Element => (\n <section class={`k2b-app-overview__main ${props.class ?? \"\"}`}>\n <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n {props.children}\n </section>\n);\n\nconst AppOverviewAside = (props: AppOverviewPanelProps): JSX.Element => (\n <aside class={`k2b-app-overview__aside ${props.class ?? \"\"}`}>\n <AppOverviewPanelHeader title={props.title} description={props.description} toolbar={props.toolbar} />\n {props.children}\n </aside>\n);\n\nconst AppOverviewCards = (props: AppOverviewCardsProps): JSX.Element => (\n <div class={`k2b-app-overview__cards ${props.class ?? \"\"}`}>{props.children}</div>\n);\n\nconst AppOverviewEmptyState = (props: AppOverviewEmptyStateProps): JSX.Element => (\n <Placeholder\n surface=\"paper\"\n variant=\"panel\"\n title={props.title}\n description={props.description}\n icon={props.icon ? tablerIconClass(props.icon, \"ti-inbox\") : undefined}\n action={props.children}\n class={props.class}\n />\n);\n\nconst AppOverview = ((props: AppOverviewProps): JSX.Element => (\n <div class={`k2b-app-overview ${props.class ?? \"\"}`}>\n <header class=\"k2b-app-overview__header\">\n <span class=\"k2b-app-overview__icon\" aria-hidden=\"true\">\n <i class={tablerIconClass(props.icon, \"ti-apps\")} />\n </span>\n <PanelHeader as=\"h1\" size=\"lg\" title={props.title} subtitle={props.subtitle} actions={props.actions} />\n </header>\n <div class=\"k2b-app-overview__columns\">{props.children}</div>\n </div>\n)) as AppOverviewComponent;\n\nAppOverview.Main = AppOverviewMain;\nAppOverview.Aside = AppOverviewAside;\nAppOverview.Cards = AppOverviewCards;\nAppOverview.EmptyState = AppOverviewEmptyState;\n\nexport default AppOverview;\n"],"mappings":";;;;;;;;;;;;AAAA,SAAmB,IAAI,QAAQ,UAAU;AACzC,OAAO,WAAW,MAAM,yBAAyB;AACjD,SAAS,WAAW,QAAQ,eAAe;AAwC3C,MAAM,eAAe,GAAG,CAAC,IAA+B,EAAE,QAAgB,KAAa;EACrF,MAAM,KAAK,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,QAAQ;EACtC,OAAO,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,MAAM,KAAK,EAAE;AACxD,CAAC;AAED,MAAM,sBAAsB,GAAI,KAAuE,4BAG5F,KAAK,CAAC,KAAK,8BACf,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA;IAAA,8BACqB,KAAK,CAAC,WAAW;EAAA;AAAA,gCAGpE,IAAI;EAAA,IAAC,IAAI;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;EAAA;IAAA,+BACiB,KAAK,CAAC,OAAO;EAAA;AAAA,IAG1D;AAED,MAAM,eAAe,GAAI,KAA4B,mBACnC,mCAA0B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BAC1D,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACtC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BACzD,sBAAsB;EAAA,IAAC,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cACjG,KAAK,CAAC,QAAQ,EAElB;AAED,MAAM,gBAAgB,GAAI,KAA4B,mBACxC,oCAA2B,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,WAAG,KAAK,CAAC,QAAQ,EAC5E;AAED,MAAM,qBAAqB,GAAI,KAAiC,sBAC7D,WAAW;EACV,OAAO;EACP,OAAO;EAAA,IACP,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAClB,WAAW;IAAA,OAAE,KAAK,CAAC,WAAW;EAAA;EAAA,IAC9B,IAAI;IAAA,OAAE,oBAAK,CAAC,IAAI,MAAG,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,CAAC,GAAG,SAAS;EAAA;EAAA,IACtE,MAAM;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA;IAAA,OACf,KAAK,CAAC,KAAK;EAAA;AAAA,EAErB;AAED,MAAM,WAAW,GAAK,KAAuB,mBAC/B,6BAAoB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,mCAGnC,eAAe,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,4CAEjD,WAAW;EAAC,EAAE;EAAM,IAAI;EAAA,IAAM,KAAK;IAAA,OAAE,KAAK,CAAC,KAAK;EAAA;EAAA,IAAE,QAAQ;IAAA,OAAE,KAAK,CAAC,QAAQ;EAAA;EAAA,IAAE,OAAO;IAAA,OAAE,KAAK,CAAC,OAAO;EAAA;AAAA,cAE7D,KAAK,CAAC,QAAQ,EAEhC;AAE1B,WAAW,CAAC,IAAI,GAAG,eAAe;AAClC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,KAAK,GAAG,gBAAgB;AACpC,WAAW,CAAC,UAAU,GAAG,qBAAqB;AAE9C,eAAe,WAAW","ignoreList":[]}
|
|
@@ -28,12 +28,13 @@ var _tmpl$ = ["<div class=\"k2b-detail-panel__header-leading\">", "</div>"],
|
|
|
28
28
|
_tmpl$20 = ["<span class=\"k2b-detail-panel__section-copy\"><span id=\"", "\" class=\"k2b-detail-panel__section-title\">", "</span>", "</span>"],
|
|
29
29
|
_tmpl$21 = ["<span class=\"k2b-detail-panel__section-meta\">", "</span>"],
|
|
30
30
|
_tmpl$22 = "<i class=\"ti ti-chevron-down\" aria-hidden=\"true\"></i>",
|
|
31
|
-
_tmpl$23 = ["<
|
|
32
|
-
_tmpl$24 = "<
|
|
33
|
-
_tmpl$25 =
|
|
34
|
-
_tmpl$26 = ["<div class=\"k2b-detail-panel__section-
|
|
35
|
-
_tmpl$27 = ["<div class=\"k2b-detail-panel__section-
|
|
36
|
-
_tmpl$28 = ["<
|
|
31
|
+
_tmpl$23 = ["<p class=\"k2b-detail-panel__section-description\">", "</p>"],
|
|
32
|
+
_tmpl$24 = ["<div class=\"k2b-detail-panel__section-meta\">", "</div>"],
|
|
33
|
+
_tmpl$25 = "<i class=\"ti ti-chevron-up\" aria-hidden=\"true\"></i>",
|
|
34
|
+
_tmpl$26 = ["<section", "><div", ">", "</div><div", "><header class=\"k2b-detail-panel__section-header\">", "<div class=\"k2b-detail-panel__section-copy\"><h3", ">", "</h3>", "</div>", "", "</header></div><div", "", " class=\"k2b-detail-panel__section-body\">", "</div></section>"],
|
|
35
|
+
_tmpl$27 = ["<div class=\"k2b-detail-panel__section-actions\">", "</div>"],
|
|
36
|
+
_tmpl$28 = ["<div class=\"k2b-detail-panel__section-body\">", "</div>"],
|
|
37
|
+
_tmpl$29 = ["<section", "><header class=\"k2b-detail-panel__section-header\">", "<div class=\"k2b-detail-panel__section-copy\"><h3", ">", "</h3>", "</div>", "", "</header>", "</section>"];
|
|
37
38
|
import { children, createEffect, createSignal, createUniqueId, Show, splitProps } from "solid-js";
|
|
38
39
|
import { Button, ButtonLink, IconButton } from "../actions/Button";
|
|
39
40
|
import { Dropdown } from "../actions/Dropdown";
|
|
@@ -273,7 +274,7 @@ const DetailPanelSection = props => {
|
|
|
273
274
|
return props.collapsible;
|
|
274
275
|
},
|
|
275
276
|
get fallback() {
|
|
276
|
-
return _$ssr(_tmpl$
|
|
277
|
+
return _$ssr(_tmpl$29, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("aria-labelledby", _$escape(headingId, true), false), _$escape(_$createComponent(DetailPanelSectionIcon, {
|
|
277
278
|
get icon() {
|
|
278
279
|
return props.icon;
|
|
279
280
|
},
|
|
@@ -285,33 +286,33 @@ const DetailPanelSection = props => {
|
|
|
285
286
|
return props.description;
|
|
286
287
|
},
|
|
287
288
|
get children() {
|
|
288
|
-
return _$ssr(_tmpl$
|
|
289
|
+
return _$ssr(_tmpl$23, _$escape(props.description));
|
|
289
290
|
}
|
|
290
291
|
})), _$escape(_$createComponent(Show, {
|
|
291
292
|
get when() {
|
|
292
293
|
return props.meta;
|
|
293
294
|
},
|
|
294
295
|
get children() {
|
|
295
|
-
return _$ssr(_tmpl$
|
|
296
|
+
return _$ssr(_tmpl$24, _$escape(props.meta));
|
|
296
297
|
}
|
|
297
298
|
})), _$escape(_$createComponent(Show, {
|
|
298
299
|
get when() {
|
|
299
300
|
return props.actions;
|
|
300
301
|
},
|
|
301
302
|
get children() {
|
|
302
|
-
return _$ssr(_tmpl$
|
|
303
|
+
return _$ssr(_tmpl$27, _$escape(props.actions));
|
|
303
304
|
}
|
|
304
305
|
})), _$escape(_$createComponent(Show, {
|
|
305
306
|
get when() {
|
|
306
307
|
return resolved();
|
|
307
308
|
},
|
|
308
309
|
get children() {
|
|
309
|
-
return _$ssr(_tmpl$
|
|
310
|
+
return _$ssr(_tmpl$28, _$escape(resolved()));
|
|
310
311
|
}
|
|
311
312
|
})));
|
|
312
313
|
},
|
|
313
314
|
get children() {
|
|
314
|
-
return _$ssr(_tmpl$
|
|
315
|
+
return _$ssr(_tmpl$26, _$ssrAttribute("class", _$escape(className(), true), false) + _$ssrAttribute("aria-labelledby", open() ? _$escape(headingId, true) : `${_$escape(headingId, true)}-closed`, false) + _$ssrAttribute("data-open", _$escape(open(), true), false), _$ssrAttribute("hidden", open(), true), _$escape(_$createComponent(Button, {
|
|
315
316
|
variant: "ghost",
|
|
316
317
|
"class": "k2b-detail-panel__section-summary",
|
|
317
318
|
get disabled() {
|
|
@@ -356,14 +357,14 @@ const DetailPanelSection = props => {
|
|
|
356
357
|
return props.description;
|
|
357
358
|
},
|
|
358
359
|
get children() {
|
|
359
|
-
return _$ssr(_tmpl$
|
|
360
|
+
return _$ssr(_tmpl$23, _$escape(props.description));
|
|
360
361
|
}
|
|
361
362
|
})), _$escape(_$createComponent(Show, {
|
|
362
363
|
get when() {
|
|
363
364
|
return props.meta;
|
|
364
365
|
},
|
|
365
366
|
get children() {
|
|
366
|
-
return _$ssr(_tmpl$
|
|
367
|
+
return _$ssr(_tmpl$24, _$escape(props.meta));
|
|
367
368
|
}
|
|
368
369
|
})), _$escape(_$createComponent(Button, {
|
|
369
370
|
variant: "ghost",
|
|
@@ -376,7 +377,7 @@ const DetailPanelSection = props => {
|
|
|
376
377
|
"aria-controls": bodyId,
|
|
377
378
|
onClick: () => toggle(false),
|
|
378
379
|
get children() {
|
|
379
|
-
return _$ssr(_tmpl$
|
|
380
|
+
return _$ssr(_tmpl$25);
|
|
380
381
|
}
|
|
381
382
|
})), _$ssrAttribute("id", _$escape(bodyId, true), false), _$ssrAttribute("hidden", !open(), true), _$escape(props.children));
|
|
382
383
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["layout/DetailPanel.tsx"],"sourcesContent":["import { children, createEffect, createSignal, createUniqueId, type JSX, Show, splitProps } from \"solid-js\";\nimport { Button, ButtonLink, type ButtonLinkProps, type ButtonProps, IconButton } from \"../actions/Button\";\nimport { Dropdown, type DropdownItem } from \"../actions/Dropdown\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type DetailPanelProps = {\n children: JSX.Element;\n class?: string;\n};\n\ntype DetailPanelHeaderBaseProps = {\n title: JSX.Element;\n subtitle?: JSX.Element;\n meta?: JSX.Element;\n actions?: JSX.Element;\n primaryActions?: JSX.Element;\n class?: string;\n};\n\nexport type DetailPanelHeaderProps = DetailPanelHeaderBaseProps &\n (\n | {\n leading?: JSX.Element;\n icon?: never;\n }\n | {\n leading?: never;\n icon?: string;\n }\n );\n\nexport type DetailPanelBodyProps = {\n scrollFade?: boolean;\n children: JSX.Element;\n scrollPreserveKey?: string;\n class?: string;\n};\n\nexport type DetailPanelSummaryProps = {\n title: JSX.Element;\n children: JSX.Element;\n actions?: JSX.Element;\n class?: string;\n};\n\nexport type DetailPanelGroupProps = {\n children: JSX.Element;\n label?: string;\n class?: string;\n};\n\nexport type DetailPanelTone = \"accent\" | \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\ntype DetailPanelSectionBaseProps = {\n title: JSX.Element;\n icon?: string;\n tone?: DetailPanelTone;\n description?: JSX.Element;\n meta?: JSX.Element;\n class?: string;\n};\n\n/** One direct secondary command, rendered as a sibling icon button at the end of the row. */\nexport type DetailPanelActionSecondary = {\n /** Icon class, for example `ti ti-trash`. */\n icon: string;\n /** Accessible name and tooltip of the icon button. */\n label: string;\n onClick: () => void;\n variant?: \"danger\";\n};\n\ntype DetailPanelActionBaseProps = {\n title: JSX.Element;\n description?: JSX.Element;\n leading?: JSX.Element;\n trailing?: JSX.Element;\n secondaryAction?: DetailPanelActionSecondary;\n class?: string;\n};\n\ntype DetailPanelActionMenuProps =\n | {\n menuItems?: never;\n menuLabel?: never;\n }\n | {\n menuItems: readonly DropdownItem[];\n menuLabel: string;\n };\n\nexport type DetailPanelActionLinkProps = DetailPanelActionBaseProps &\n DetailPanelActionMenuProps &\n Omit<ButtonLinkProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n href: string;\n };\n\nexport type DetailPanelActionButtonProps = DetailPanelActionBaseProps &\n DetailPanelActionMenuProps &\n Omit<ButtonProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n href?: never;\n };\n\nexport type DetailPanelActionProps = DetailPanelActionLinkProps | DetailPanelActionButtonProps;\n\nexport type DetailPanelSectionProps = DetailPanelSectionBaseProps &\n (\n | {\n children?: JSX.Element;\n actions?: JSX.Element;\n collapsible?: false;\n defaultOpen?: never;\n open?: never;\n onOpenChange?: never;\n disabled?: never;\n }\n | {\n children: JSX.Element;\n actions?: never;\n collapsible: true;\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n }\n );\n\ntype DetailPanelComponent = ((props: DetailPanelProps) => JSX.Element) & {\n Header: (props: DetailPanelHeaderProps) => JSX.Element;\n Body: (props: DetailPanelBodyProps) => JSX.Element;\n Summary: (props: DetailPanelSummaryProps) => JSX.Element;\n Group: (props: DetailPanelGroupProps) => JSX.Element;\n Section: (props: DetailPanelSectionProps) => JSX.Element;\n Action: (props: DetailPanelActionProps) => JSX.Element;\n};\n\nconst classNames = (base: string, extra?: string): string => (extra ? `${base} ${extra}` : base);\n\nconst DetailPanelHeader = (props: DetailPanelHeaderProps): JSX.Element => (\n <header class={classNames(\"k2b-detail-panel__header\", props.class)}>\n <div class=\"k2b-detail-panel__header-main\">\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-detail-panel__header-icon\" aria-hidden=\"true\">\n <i class={icon()} />\n </span>\n )}\n </Show>\n <Show when={props.leading}>\n <div class=\"k2b-detail-panel__header-leading\">{props.leading}</div>\n </Show>\n <div class=\"k2b-detail-panel__heading\">\n <h2>{props.title}</h2>\n <Show when={props.subtitle || props.meta}>\n <div class=\"k2b-detail-panel__supporting\">\n <Show when={props.subtitle}>\n <p>{props.subtitle}</p>\n </Show>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__meta\">{props.meta}</div>\n </Show>\n </div>\n </Show>\n </div>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__actions\">{props.actions}</div>\n </Show>\n </div>\n <Show when={props.primaryActions}>\n <div class=\"k2b-detail-panel__primary-actions\">{props.primaryActions}</div>\n </Show>\n </header>\n);\n\nconst DetailPanelBody = (props: DetailPanelBodyProps): JSX.Element => {\n let body!: HTMLDivElement;\n createScrollFade(\n () => body,\n () => props.scrollFade !== false,\n );\n return (\n <div\n ref={body}\n class={classNames(\"k2b-detail-panel__body\", props.class)}\n data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n data-scroll-preserve={props.scrollPreserveKey}\n >\n {props.children}\n </div>\n );\n};\n\nconst DetailPanelSummary = (props: DetailPanelSummaryProps): JSX.Element => {\n const headingId = `k2b-detail-panel-summary-${createUniqueId()}`;\n\n return (\n <section class={classNames(\"k2b-detail-panel__summary\", props.class)} aria-labelledby={headingId}>\n <header class=\"k2b-detail-panel__summary-header\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__summary-actions\">{props.actions}</div>\n </Show>\n </header>\n <div class=\"k2b-detail-panel__summary-body\">{props.children}</div>\n </section>\n );\n};\n\nconst DetailPanelGroup = (props: DetailPanelGroupProps): JSX.Element => (\n <div class={classNames(\"k2b-detail-panel__group\", props.class)} role=\"group\" aria-label={props.label}>\n {props.children}\n </div>\n);\n\nconst DetailPanelSectionIcon = (props: Pick<DetailPanelSectionBaseProps, \"icon\" | \"tone\">): JSX.Element => (\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-detail-panel__section-icon\" data-tone={props.tone ?? \"neutral\"} aria-hidden=\"true\">\n <i class={icon()} />\n </span>\n )}\n </Show>\n);\n\nconst DetailPanelActionContent = (props: DetailPanelActionBaseProps): JSX.Element => (\n <>\n <Show when={props.leading}>\n <span class=\"k2b-detail-panel__action-leading\">{props.leading}</span>\n </Show>\n <span class=\"k2b-detail-panel__action-copy\">\n <span class=\"k2b-detail-panel__action-title\">{props.title}</span>\n <Show when={props.description}>\n <span class=\"k2b-detail-panel__action-description\">{props.description}</span>\n </Show>\n </span>\n <Show when={props.trailing}>\n <span class=\"k2b-detail-panel__action-trailing\">{props.trailing}</span>\n </Show>\n </>\n);\n\nconst DetailPanelAction = (props: DetailPanelActionProps): JSX.Element => {\n const [local, rest] = splitProps(props, [\n \"class\",\n \"description\",\n \"href\",\n \"leading\",\n \"menuItems\",\n \"menuLabel\",\n \"secondaryAction\",\n \"title\",\n \"trailing\",\n ]);\n const className = classNames(\"k2b-detail-panel__action\", local.class);\n const content = () => (\n <DetailPanelActionContent title={local.title} description={local.description} leading={local.leading} trailing={local.trailing} />\n );\n\n const action = () => (\n <Show\n when={local.href !== undefined}\n fallback={\n <Button\n {...(rest as Omit<DetailPanelActionButtonProps, keyof DetailPanelActionBaseProps>)}\n class={className}\n variant=\"ghost\"\n size=\"sm\"\n >\n {content()}\n </Button>\n }\n >\n <ButtonLink\n {...(rest as Omit<DetailPanelActionLinkProps, keyof DetailPanelActionBaseProps | \"href\">)}\n href={local.href as string}\n class={className}\n variant=\"ghost\"\n size=\"sm\"\n >\n {content()}\n </ButtonLink>\n </Show>\n );\n\n return (\n <Show when={local.secondaryAction || local.menuItems?.length} fallback={action()}>\n <div class=\"k2b-detail-panel__action-row\">\n {action()}\n <Show when={local.secondaryAction}>\n {(secondary) => (\n <IconButton\n size=\"sm\"\n variant=\"ghost\"\n label={secondary().label}\n class=\"k2b-detail-panel__action-secondary\"\n data-tone={secondary().variant}\n onClick={() => secondary().onClick()}\n >\n <i class={secondary().icon} aria-hidden=\"true\" />\n </IconButton>\n )}\n </Show>\n <Show when={local.menuItems?.length}>\n <Dropdown.Root items={local.menuItems ?? []} align=\"end\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu\">\n <Dropdown.Trigger iconOnly size=\"sm\" variant=\"ghost\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu-trigger\">\n <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n </Dropdown.Trigger>\n </Dropdown.Root>\n </Show>\n </div>\n </Show>\n );\n};\n\nconst DetailPanelSection = (props: DetailPanelSectionProps): JSX.Element => {\n const headingId = `k2b-detail-panel-section-${createUniqueId()}`;\n const bodyId = `${headingId}-body`;\n const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n const open = () => props.open ?? internalOpen();\n let expand: HTMLButtonElement | undefined;\n let collapse: HTMLButtonElement | undefined;\n let body: HTMLDivElement | undefined;\n const toggle = (next: boolean) => {\n if (props.disabled) return;\n if (props.open === undefined) setInternalOpen(next);\n props.onOpenChange?.(next);\n };\n createEffect(() => {\n const expanded = open();\n // Restore focus only when its current control becomes hidden, including\n // a parent-controlled collapse while focus is inside an editor.\n queueMicrotask(() => {\n if (expanded !== open()) return;\n const active = expand?.ownerDocument.activeElement;\n if (expanded && active === expand) collapse?.focus();\n if (!expanded && (active === collapse || (active && body?.contains(active)))) expand?.focus();\n });\n });\n const className = () => classNames(\"k2b-detail-panel__section\", props.class);\n // Resolve once: reading `props.children` twice would instantiate the section body twice.\n const resolved = children(() => props.children);\n\n return (\n <Show\n when={props.collapsible}\n fallback={\n <section class={className()} aria-labelledby={headingId}>\n <header class=\"k2b-detail-panel__section-header\">\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <div class=\"k2b-detail-panel__section-copy\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.description}>\n <p>{props.description}</p>\n </Show>\n </div>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__section-meta\">{props.meta}</div>\n </Show>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__section-actions\">{props.actions}</div>\n </Show>\n </header>\n <Show when={resolved()}>\n <div class=\"k2b-detail-panel__section-body\">{resolved()}</div>\n </Show>\n </section>\n }\n >\n <section class={className()} aria-labelledby={open() ? headingId : `${headingId}-closed`} data-open={open()}>\n <div hidden={open()}>\n <Button\n ref={expand}\n variant=\"ghost\"\n class=\"k2b-detail-panel__section-summary\"\n disabled={props.disabled}\n aria-expanded={false}\n aria-controls={bodyId}\n onClick={() => toggle(true)}\n >\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <span class=\"k2b-detail-panel__section-copy\">\n <span id={`${headingId}-closed`} class=\"k2b-detail-panel__section-title\">\n {props.title}\n </span>\n <Show when={props.description}>\n <span class=\"k2b-detail-panel__section-description\">{props.description}</span>\n </Show>\n </span>\n <Show when={props.meta}>\n <span class=\"k2b-detail-panel__section-meta\">{props.meta}</span>\n </Show>\n <i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />\n </Button>\n </div>\n <div hidden={!open()}>\n <header class=\"k2b-detail-panel__section-header\">\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <div class=\"k2b-detail-panel__section-copy\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.description}>\n <p>{props.description}</p>\n </Show>\n </div>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__section-meta\">{props.meta}</div>\n </Show>\n <Button\n ref={collapse}\n variant=\"ghost\"\n size=\"sm\"\n disabled={props.disabled}\n aria-labelledby={headingId}\n aria-expanded={true}\n aria-controls={bodyId}\n onClick={() => toggle(false)}\n >\n <i class=\"ti ti-chevron-up\" aria-hidden=\"true\" />\n </Button>\n </header>\n </div>\n <div ref={body} id={bodyId} hidden={!open()} class=\"k2b-detail-panel__section-body\">\n {props.children}\n </div>\n </section>\n </Show>\n );\n};\n\nconst DetailPanel = ((props: DetailPanelProps): JSX.Element => (\n <div class={classNames(\"k2b-detail-panel\", props.class)}>{props.children}</div>\n)) as DetailPanelComponent;\n\nDetailPanel.Header = DetailPanelHeader;\nDetailPanel.Body = DetailPanelBody;\nDetailPanel.Summary = DetailPanelSummary;\nDetailPanel.Group = DetailPanelGroup;\nDetailPanel.Section = DetailPanelSection;\nDetailPanel.Action = DetailPanelAction;\n\nexport default DetailPanel;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["layout/DetailPanel.tsx"],"sourcesContent":["import { children, createEffect, createSignal, createUniqueId, type JSX, Show, splitProps } from \"solid-js\";\nimport { Button, ButtonLink, type ButtonLinkProps, type ButtonProps, IconButton } from \"../actions/Button\";\nimport { Dropdown, type DropdownItem } from \"../actions/Dropdown\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type DetailPanelProps = {\n children: JSX.Element;\n class?: string;\n};\n\ntype DetailPanelHeaderBaseProps = {\n title: JSX.Element;\n subtitle?: JSX.Element;\n meta?: JSX.Element;\n actions?: JSX.Element;\n primaryActions?: JSX.Element;\n class?: string;\n};\n\nexport type DetailPanelHeaderProps = DetailPanelHeaderBaseProps &\n (\n | {\n leading?: JSX.Element;\n icon?: never;\n }\n | {\n leading?: never;\n icon?: string;\n }\n );\n\nexport type DetailPanelBodyProps = {\n scrollFade?: boolean;\n children: JSX.Element;\n scrollPreserveKey?: string;\n class?: string;\n};\n\nexport type DetailPanelSummaryProps = {\n title: JSX.Element;\n children: JSX.Element;\n actions?: JSX.Element;\n class?: string;\n};\n\nexport type DetailPanelGroupProps = {\n children: JSX.Element;\n label?: string;\n class?: string;\n};\n\nexport type DetailPanelTone = \"accent\" | \"neutral\" | \"success\" | \"warning\" | \"danger\";\n\ntype DetailPanelSectionBaseProps = {\n title: JSX.Element;\n icon?: string;\n tone?: DetailPanelTone;\n description?: JSX.Element;\n meta?: JSX.Element;\n class?: string;\n};\n\n/** One direct secondary command, rendered as a sibling icon button at the end of the row. */\nexport type DetailPanelActionSecondary = {\n /** Icon class, for example `ti ti-trash`. */\n icon: string;\n /** Accessible name and tooltip of the icon button. */\n label: string;\n onClick: () => void;\n variant?: \"danger\";\n};\n\ntype DetailPanelActionBaseProps = {\n title: JSX.Element;\n description?: JSX.Element;\n leading?: JSX.Element;\n trailing?: JSX.Element;\n secondaryAction?: DetailPanelActionSecondary;\n class?: string;\n};\n\ntype DetailPanelActionMenuProps =\n | {\n menuItems?: never;\n menuLabel?: never;\n }\n | {\n menuItems: readonly DropdownItem[];\n menuLabel: string;\n };\n\nexport type DetailPanelActionLinkProps = DetailPanelActionBaseProps &\n DetailPanelActionMenuProps &\n Omit<ButtonLinkProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n href: string;\n };\n\nexport type DetailPanelActionButtonProps = DetailPanelActionBaseProps &\n DetailPanelActionMenuProps &\n Omit<ButtonProps, \"children\" | \"class\" | \"size\" | \"title\" | \"variant\"> & {\n href?: never;\n };\n\nexport type DetailPanelActionProps = DetailPanelActionLinkProps | DetailPanelActionButtonProps;\n\nexport type DetailPanelSectionProps = DetailPanelSectionBaseProps &\n (\n | {\n children?: JSX.Element;\n actions?: JSX.Element;\n collapsible?: false;\n defaultOpen?: never;\n open?: never;\n onOpenChange?: never;\n disabled?: never;\n }\n | {\n children: JSX.Element;\n actions?: never;\n collapsible: true;\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n disabled?: boolean;\n }\n );\n\ntype DetailPanelComponent = ((props: DetailPanelProps) => JSX.Element) & {\n Header: (props: DetailPanelHeaderProps) => JSX.Element;\n Body: (props: DetailPanelBodyProps) => JSX.Element;\n Summary: (props: DetailPanelSummaryProps) => JSX.Element;\n Group: (props: DetailPanelGroupProps) => JSX.Element;\n Section: (props: DetailPanelSectionProps) => JSX.Element;\n Action: (props: DetailPanelActionProps) => JSX.Element;\n};\n\nconst classNames = (base: string, extra?: string): string => (extra ? `${base} ${extra}` : base);\n\nconst DetailPanelHeader = (props: DetailPanelHeaderProps): JSX.Element => (\n <header class={classNames(\"k2b-detail-panel__header\", props.class)}>\n <div class=\"k2b-detail-panel__header-main\">\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-detail-panel__header-icon\" aria-hidden=\"true\">\n <i class={icon()} />\n </span>\n )}\n </Show>\n <Show when={props.leading}>\n <div class=\"k2b-detail-panel__header-leading\">{props.leading}</div>\n </Show>\n <div class=\"k2b-detail-panel__heading\">\n <h2>{props.title}</h2>\n <Show when={props.subtitle || props.meta}>\n <div class=\"k2b-detail-panel__supporting\">\n <Show when={props.subtitle}>\n <p>{props.subtitle}</p>\n </Show>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__meta\">{props.meta}</div>\n </Show>\n </div>\n </Show>\n </div>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__actions\">{props.actions}</div>\n </Show>\n </div>\n <Show when={props.primaryActions}>\n <div class=\"k2b-detail-panel__primary-actions\">{props.primaryActions}</div>\n </Show>\n </header>\n);\n\nconst DetailPanelBody = (props: DetailPanelBodyProps): JSX.Element => {\n let body!: HTMLDivElement;\n createScrollFade(\n () => body,\n () => props.scrollFade !== false,\n );\n return (\n <div\n ref={body}\n class={classNames(\"k2b-detail-panel__body\", props.class)}\n data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n data-scroll-preserve={props.scrollPreserveKey}\n >\n {props.children}\n </div>\n );\n};\n\nconst DetailPanelSummary = (props: DetailPanelSummaryProps): JSX.Element => {\n const headingId = `k2b-detail-panel-summary-${createUniqueId()}`;\n\n return (\n <section class={classNames(\"k2b-detail-panel__summary\", props.class)} aria-labelledby={headingId}>\n <header class=\"k2b-detail-panel__summary-header\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__summary-actions\">{props.actions}</div>\n </Show>\n </header>\n <div class=\"k2b-detail-panel__summary-body\">{props.children}</div>\n </section>\n );\n};\n\nconst DetailPanelGroup = (props: DetailPanelGroupProps): JSX.Element => (\n <div class={classNames(\"k2b-detail-panel__group\", props.class)} role=\"group\" aria-label={props.label}>\n {props.children}\n </div>\n);\n\nconst DetailPanelSectionIcon = (props: Pick<DetailPanelSectionBaseProps, \"icon\" | \"tone\">): JSX.Element => (\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-detail-panel__section-icon\" data-tone={props.tone ?? \"neutral\"} aria-hidden=\"true\">\n <i class={icon()} />\n </span>\n )}\n </Show>\n);\n\nconst DetailPanelActionContent = (props: DetailPanelActionBaseProps): JSX.Element => (\n <>\n <Show when={props.leading}>\n <span class=\"k2b-detail-panel__action-leading\">{props.leading}</span>\n </Show>\n <span class=\"k2b-detail-panel__action-copy\">\n <span class=\"k2b-detail-panel__action-title\">{props.title}</span>\n <Show when={props.description}>\n <span class=\"k2b-detail-panel__action-description\">{props.description}</span>\n </Show>\n </span>\n <Show when={props.trailing}>\n <span class=\"k2b-detail-panel__action-trailing\">{props.trailing}</span>\n </Show>\n </>\n);\n\nconst DetailPanelAction = (props: DetailPanelActionProps): JSX.Element => {\n const [local, rest] = splitProps(props, [\n \"class\",\n \"description\",\n \"href\",\n \"leading\",\n \"menuItems\",\n \"menuLabel\",\n \"secondaryAction\",\n \"title\",\n \"trailing\",\n ]);\n const className = classNames(\"k2b-detail-panel__action\", local.class);\n const content = () => (\n <DetailPanelActionContent title={local.title} description={local.description} leading={local.leading} trailing={local.trailing} />\n );\n\n const action = () => (\n <Show\n when={local.href !== undefined}\n fallback={\n <Button\n {...(rest as Omit<DetailPanelActionButtonProps, keyof DetailPanelActionBaseProps>)}\n class={className}\n variant=\"ghost\"\n size=\"sm\"\n >\n {content()}\n </Button>\n }\n >\n <ButtonLink\n {...(rest as Omit<DetailPanelActionLinkProps, keyof DetailPanelActionBaseProps | \"href\">)}\n href={local.href as string}\n class={className}\n variant=\"ghost\"\n size=\"sm\"\n >\n {content()}\n </ButtonLink>\n </Show>\n );\n\n return (\n <Show when={local.secondaryAction || local.menuItems?.length} fallback={action()}>\n <div class=\"k2b-detail-panel__action-row\">\n {action()}\n <Show when={local.secondaryAction}>\n {(secondary) => (\n <IconButton\n size=\"sm\"\n variant=\"ghost\"\n label={secondary().label}\n class=\"k2b-detail-panel__action-secondary\"\n data-tone={secondary().variant}\n onClick={() => secondary().onClick()}\n >\n <i class={secondary().icon} aria-hidden=\"true\" />\n </IconButton>\n )}\n </Show>\n <Show when={local.menuItems?.length}>\n <Dropdown.Root items={local.menuItems ?? []} align=\"end\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu\">\n <Dropdown.Trigger iconOnly size=\"sm\" variant=\"ghost\" label={local.menuLabel} class=\"k2b-detail-panel__action-menu-trigger\">\n <i class=\"ti ti-dots\" aria-hidden=\"true\" />\n </Dropdown.Trigger>\n </Dropdown.Root>\n </Show>\n </div>\n </Show>\n );\n};\n\nconst DetailPanelSection = (props: DetailPanelSectionProps): JSX.Element => {\n const headingId = `k2b-detail-panel-section-${createUniqueId()}`;\n const bodyId = `${headingId}-body`;\n const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n const open = () => props.open ?? internalOpen();\n let expand: HTMLButtonElement | undefined;\n let collapse: HTMLButtonElement | undefined;\n let body: HTMLDivElement | undefined;\n const toggle = (next: boolean) => {\n if (props.disabled) return;\n if (props.open === undefined) setInternalOpen(next);\n props.onOpenChange?.(next);\n };\n createEffect(() => {\n const expanded = open();\n // Restore focus only when its current control becomes hidden, including\n // a parent-controlled collapse while focus is inside an editor.\n queueMicrotask(() => {\n if (expanded !== open()) return;\n const active = expand?.ownerDocument.activeElement;\n if (expanded && active === expand) collapse?.focus();\n if (!expanded && (active === collapse || (active && body?.contains(active)))) expand?.focus();\n });\n });\n const className = () => classNames(\"k2b-detail-panel__section\", props.class);\n // Resolve once: reading `props.children` twice would instantiate the section body twice.\n const resolved = children(() => props.children);\n\n return (\n <Show\n when={props.collapsible}\n fallback={\n <section class={className()} aria-labelledby={headingId}>\n <header class=\"k2b-detail-panel__section-header\">\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <div class=\"k2b-detail-panel__section-copy\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.description}>\n <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n </Show>\n </div>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__section-meta\">{props.meta}</div>\n </Show>\n <Show when={props.actions}>\n <div class=\"k2b-detail-panel__section-actions\">{props.actions}</div>\n </Show>\n </header>\n <Show when={resolved()}>\n <div class=\"k2b-detail-panel__section-body\">{resolved()}</div>\n </Show>\n </section>\n }\n >\n <section class={className()} aria-labelledby={open() ? headingId : `${headingId}-closed`} data-open={open()}>\n <div hidden={open()}>\n <Button\n ref={expand}\n variant=\"ghost\"\n class=\"k2b-detail-panel__section-summary\"\n disabled={props.disabled}\n aria-expanded={false}\n aria-controls={bodyId}\n onClick={() => toggle(true)}\n >\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <span class=\"k2b-detail-panel__section-copy\">\n <span id={`${headingId}-closed`} class=\"k2b-detail-panel__section-title\">\n {props.title}\n </span>\n <Show when={props.description}>\n <span class=\"k2b-detail-panel__section-description\">{props.description}</span>\n </Show>\n </span>\n <Show when={props.meta}>\n <span class=\"k2b-detail-panel__section-meta\">{props.meta}</span>\n </Show>\n <i class=\"ti ti-chevron-down\" aria-hidden=\"true\" />\n </Button>\n </div>\n <div hidden={!open()}>\n <header class=\"k2b-detail-panel__section-header\">\n <DetailPanelSectionIcon icon={props.icon} tone={props.tone} />\n <div class=\"k2b-detail-panel__section-copy\">\n <h3 id={headingId}>{props.title}</h3>\n <Show when={props.description}>\n <p class=\"k2b-detail-panel__section-description\">{props.description}</p>\n </Show>\n </div>\n <Show when={props.meta}>\n <div class=\"k2b-detail-panel__section-meta\">{props.meta}</div>\n </Show>\n <Button\n ref={collapse}\n variant=\"ghost\"\n size=\"sm\"\n disabled={props.disabled}\n aria-labelledby={headingId}\n aria-expanded={true}\n aria-controls={bodyId}\n onClick={() => toggle(false)}\n >\n <i class=\"ti ti-chevron-up\" aria-hidden=\"true\" />\n </Button>\n </header>\n </div>\n <div ref={body} id={bodyId} hidden={!open()} class=\"k2b-detail-panel__section-body\">\n {props.children}\n </div>\n </section>\n </Show>\n );\n};\n\nconst DetailPanel = ((props: DetailPanelProps): JSX.Element => (\n <div class={classNames(\"k2b-detail-panel\", props.class)}>{props.children}</div>\n)) as DetailPanelComponent;\n\nDetailPanel.Header = DetailPanelHeader;\nDetailPanel.Body = DetailPanelBody;\nDetailPanel.Summary = DetailPanelSummary;\nDetailPanel.Group = DetailPanelGroup;\nDetailPanel.Section = DetailPanelSection;\nDetailPanel.Action = DetailPanelAction;\n\nexport default DetailPanel;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,6 +12,7 @@ var _tmpl$ = ["<section class=\"", "\"", " style=\"", "\" role=\"dialog\" aria-m
|
|
|
12
12
|
_tmpl$4 = ["<div class=\"k2b-floating-window__resize\"", " style=\"", "\" aria-hidden=\"true\"></div>"];
|
|
13
13
|
import { createSignal, createUniqueId, onCleanup, onMount, Show } from "solid-js";
|
|
14
14
|
import { Portal, render } from "solid-js/web";
|
|
15
|
+
import { returnFocus, ringOnReturn } from "../internal/focus-return";
|
|
15
16
|
import { getK2bPortalRoot } from "../internal/portal";
|
|
16
17
|
import { useUiMessages } from "../intl/messages";
|
|
17
18
|
import { FLOATING_WINDOW_VIEWPORT_GAP, fitFloatingWindowRect } from "./floating-window-geometry";
|
|
@@ -234,6 +235,7 @@ export default function FloatingWindow(props) {
|
|
|
234
235
|
export const openFloatingWindow = (view, options) => {
|
|
235
236
|
if (typeof document === "undefined") throw new Error("Floating windows are browser-only");
|
|
236
237
|
const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
238
|
+
const previousRing = ringOnReturn(previousFocus);
|
|
237
239
|
const owner = document.createElement("div");
|
|
238
240
|
owner.className = "k2b-ui";
|
|
239
241
|
document.body.appendChild(owner);
|
|
@@ -244,7 +246,7 @@ export const openFloatingWindow = (view, options) => {
|
|
|
244
246
|
closed = true;
|
|
245
247
|
dispose?.();
|
|
246
248
|
owner.remove();
|
|
247
|
-
previousFocus
|
|
249
|
+
returnFocus(previousFocus, previousRing);
|
|
248
250
|
};
|
|
249
251
|
dispose = render(() => _$createComponent(FloatingWindow, _$mergeProps(options, {
|
|
250
252
|
get resolveScope() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["layout/FloatingWindow.tsx"],"sourcesContent":["import { createSignal, createUniqueId, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { Portal, render } from \"solid-js/web\";\nimport { getK2bPortalRoot } from \"../internal/portal\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { FLOATING_WINDOW_VIEWPORT_GAP, type FloatingWindowRect, fitFloatingWindowRect } from \"./floating-window-geometry\";\n\nexport { type FloatingWindowRect, fitFloatingWindowRect } from \"./floating-window-geometry\";\n\ntype ResizeEdge = \"left\" | \"right\" | \"top\" | \"bottom\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n\nexport type FloatingWindowProps = {\n title: string;\n icon?: string;\n children: JSX.Element;\n onClose: () => void;\n initialWidth?: number;\n initialHeight?: number;\n minWidth?: number;\n minHeight?: number;\n accent?: string;\n class?: string;\n resolveScope?: () => HTMLElement | null | undefined;\n};\nexport type OpenFloatingWindowOptions = Omit<FloatingWindowProps, \"children\" | \"onClose\">;\nexport type FloatingWindowClose = () => void;\n\nconst MOBILE_BREAKPOINT = 640;\nconst FLOATING_WINDOW_LAYER_BASE = 80;\ntype LayerOwner = { setLayer: (layer: number) => void };\nconst activeLayers: LayerOwner[] = [];\nconst syncLayers = () => {\n activeLayers.forEach((owner, index) => owner.setLayer(FLOATING_WINDOW_LAYER_BASE + index));\n};\nconst registerLayer = (owner: LayerOwner) => {\n activeLayers.push(owner);\n syncLayers();\n};\nconst releaseLayer = (owner: LayerOwner) => {\n const index = activeLayers.indexOf(owner);\n if (index < 0) return;\n activeLayers.splice(index, 1);\n syncLayers();\n};\nconst bringLayerToFront = (owner: LayerOwner) => {\n const index = activeLayers.indexOf(owner);\n if (index < 0 || index === activeLayers.length - 1) return;\n activeLayers.splice(index, 1);\n activeLayers.push(owner);\n syncLayers();\n};\nconst isTopLayer = (owner: LayerOwner) => activeLayers.at(-1) === owner;\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), Math.max(min, max));\n\nexport default function FloatingWindow(props: FloatingWindowProps): JSX.Element {\n const messages = useUiMessages();\n const minWidth = () => props.minWidth ?? 360;\n const minHeight = () => props.minHeight ?? 320;\n const [mobile, setMobile] = createSignal(false);\n const [layer, setLayer] = createSignal(FLOATING_WINDOW_LAYER_BASE);\n const layerOwner: LayerOwner = { setLayer };\n const [rect, setRect] = createSignal<FloatingWindowRect>({\n x: FLOATING_WINDOW_VIEWPORT_GAP,\n y: FLOATING_WINDOW_VIEWPORT_GAP,\n width: props.initialWidth ?? 720,\n height: props.initialHeight ?? 640,\n });\n const titleId = `k2b-floating-window-${createUniqueId()}`;\n let frame: HTMLElement | undefined;\n let stopPointerInteraction: (() => void) | undefined;\n const fit = (value: FloatingWindowRect) =>\n fitFloatingWindowRect(value, minWidth(), minHeight(), { width: window.innerWidth, height: window.innerHeight });\n const front = () => bringLayerToFront(layerOwner);\n const stopActivePointerInteraction = () => stopPointerInteraction?.();\n const close = () => {\n stopActivePointerInteraction();\n props.onClose();\n };\n const trackPointerInteraction = (start: PointerEvent, move: (event: PointerEvent) => void) => {\n stopActivePointerInteraction();\n const pointerId = start.pointerId;\n const captureTarget = start.currentTarget as HTMLElement;\n captureTarget.setPointerCapture?.(pointerId);\n const stop = () => {\n window.removeEventListener(\"pointermove\", onMove);\n window.removeEventListener(\"pointerup\", onEnd);\n window.removeEventListener(\"pointercancel\", onEnd);\n if (captureTarget.hasPointerCapture?.(pointerId)) captureTarget.releasePointerCapture(pointerId);\n if (stopPointerInteraction === stop) stopPointerInteraction = undefined;\n };\n const onMove = (event: PointerEvent) => {\n if (event.pointerId === pointerId) move(event);\n };\n const onEnd = (event: PointerEvent) => {\n if (event.pointerId === pointerId) stop();\n };\n stopPointerInteraction = stop;\n window.addEventListener(\"pointermove\", onMove);\n window.addEventListener(\"pointerup\", onEnd);\n window.addEventListener(\"pointercancel\", onEnd);\n };\n\n onMount(() => {\n registerLayer(layerOwner);\n const viewport = () => {\n const compact = window.innerWidth < MOBILE_BREAKPOINT;\n setMobile(compact);\n if (!compact) setRect((current) => fit(current));\n };\n setRect((current) => fit({ ...current, x: (window.innerWidth - current.width) / 2, y: (window.innerHeight - current.height) / 2 }));\n viewport();\n const escape = (event: KeyboardEvent) => {\n if (event.defaultPrevented || event.key !== \"Escape\" || !isTopLayer(layerOwner)) return;\n event.preventDefault();\n close();\n };\n window.addEventListener(\"resize\", viewport);\n window.addEventListener(\"keydown\", escape);\n const focus = requestAnimationFrame(() => frame?.focus());\n onCleanup(() => {\n stopActivePointerInteraction();\n releaseLayer(layerOwner);\n cancelAnimationFrame(focus);\n window.removeEventListener(\"resize\", viewport);\n window.removeEventListener(\"keydown\", escape);\n });\n });\n\n const moveBy = (deltaX: number, deltaY: number) =>\n setRect((current) => fit({ ...current, x: current.x + deltaX, y: current.y + deltaY }));\n const beginMove = (event: PointerEvent) => {\n if (mobile() || event.button !== 0 || (event.target as Element).closest(\"button:not([data-window-move])\")) return;\n const origin = rect();\n const start = { x: event.clientX, y: event.clientY };\n front();\n const move = (next: PointerEvent) =>\n setRect(fit({ ...origin, x: origin.x + next.clientX - start.x, y: origin.y + next.clientY - start.y }));\n trackPointerInteraction(event, move);\n event.preventDefault();\n };\n const resizeBy = (edge: ResizeEdge, deltaX: number, deltaY: number) => {\n const current = rect();\n let { x, y, width, height } = current;\n if (edge.includes(\"left\")) {\n const next = clamp(width - deltaX, minWidth(), window.innerWidth - FLOATING_WINDOW_VIEWPORT_GAP - x);\n x += width - next;\n width = next;\n }\n if (edge.includes(\"right\")) width += deltaX;\n if (edge.includes(\"top\")) {\n const next = clamp(height - deltaY, minHeight(), window.innerHeight - FLOATING_WINDOW_VIEWPORT_GAP - y);\n y += height - next;\n height = next;\n }\n if (edge.includes(\"bottom\")) height += deltaY;\n setRect(fit({ x, y, width, height }));\n };\n const beginResize = (edge: ResizeEdge, event: PointerEvent) => {\n if (mobile() || event.button !== 0) return;\n let previous = { x: event.clientX, y: event.clientY };\n front();\n const move = (next: PointerEvent) => {\n resizeBy(edge, next.clientX - previous.x, next.clientY - previous.y);\n previous = { x: next.clientX, y: next.clientY };\n };\n trackPointerInteraction(event, move);\n event.preventDefault();\n };\n const arrows = (event: KeyboardEvent, action: (x: number, y: number) => void) => {\n const step = event.shiftKey ? 24 : 8;\n const delta =\n event.key === \"ArrowLeft\"\n ? [-step, 0]\n : event.key === \"ArrowRight\"\n ? [step, 0]\n : event.key === \"ArrowUp\"\n ? [0, -step]\n : event.key === \"ArrowDown\"\n ? [0, step]\n : undefined;\n if (!delta) return;\n action(delta[0]!, delta[1]!);\n event.preventDefault();\n };\n const handles: readonly [ResizeEdge, string][] = [\n [\"left\", \"ew-resize\"],\n [\"right\", \"ew-resize\"],\n [\"top\", \"ns-resize\"],\n [\"bottom\", \"ns-resize\"],\n [\"top-left\", \"nwse-resize\"],\n [\"top-right\", \"nesw-resize\"],\n [\"bottom-left\", \"nesw-resize\"],\n [\"bottom-right\", \"nwse-resize\"],\n ];\n\n const view = (\n <section\n ref={frame}\n class={`k2b-floating-window ${props.class ?? \"\"}`}\n data-mobile={mobile() ? \"true\" : undefined}\n style={\n mobile()\n ? {\n \"--k2b-window-accent\": props.accent,\n inset: \"0.5rem\",\n width: \"auto\",\n height: \"auto\",\n \"z-index\": layer(),\n }\n : {\n \"--k2b-window-accent\": props.accent,\n left: `${rect().x}px`,\n top: `${rect().y}px`,\n width: `${rect().width}px`,\n height: `${rect().height}px`,\n \"z-index\": layer(),\n }\n }\n role=\"dialog\"\n aria-modal=\"false\"\n aria-labelledby={titleId}\n tabIndex={-1}\n onPointerDown={front}\n >\n <header onPointerDown={beginMove}>\n <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n <button\n type=\"button\"\n data-window-move\n class=\"k2b-floating-window__title\"\n aria-label={messages().moveWindow({ title: props.title })}\n onKeyDown={(event) => arrows(event, moveBy)}\n >\n <span id={titleId}>{props.title}</span>\n </button>\n <button type=\"button\" class=\"k2b-icon-button\" aria-label={messages().closeWindow} onClick={close}>\n <i class=\"ti ti-x\" aria-hidden=\"true\" />\n </button>\n </header>\n <div class=\"k2b-floating-window__body\">{props.children}</div>\n <Show when={!mobile()}>\n {handles.map(([edge, cursor]) =>\n edge === \"bottom-right\" ? (\n <button\n type=\"button\"\n class=\"k2b-floating-window__resize\"\n data-edge={edge}\n style={{ cursor }}\n aria-label={messages().resizeWindow}\n onPointerDown={(event) => beginResize(edge, event)}\n onKeyDown={(event) => arrows(event, (x, y) => resizeBy(edge, x, y))}\n />\n ) : (\n // Cloud exposes a single keyboard-resizable corner; the remaining\n // edges stay pointer-only so the window adds one tab stop, not eight.\n <div\n class=\"k2b-floating-window__resize\"\n data-edge={edge}\n style={{ cursor }}\n aria-hidden=\"true\"\n onPointerDown={(event) => beginResize(edge, event)}\n />\n ),\n )}\n </Show>\n </section>\n );\n return <Portal mount={typeof document === \"undefined\" ? undefined : getK2bPortalRoot(props.resolveScope?.())}>{view}</Portal>;\n}\n\nexport const openFloatingWindow = (\n view: (close: FloatingWindowClose) => JSX.Element,\n options: OpenFloatingWindowOptions,\n): FloatingWindowClose => {\n if (typeof document === \"undefined\") throw new Error(\"Floating windows are browser-only\");\n const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n const owner = document.createElement(\"div\");\n owner.className = \"k2b-ui\";\n document.body.appendChild(owner);\n let dispose: (() => void) | undefined;\n let closed = false;\n const close = () => {\n if (closed) return;\n closed = true;\n dispose?.();\n owner.remove();\n previousFocus?.focus();\n };\n dispose = render(\n () => (\n <FloatingWindow {...options} resolveScope={options.resolveScope ?? (() => owner)} onClose={close}>\n {view(close)}\n </FloatingWindow>\n ),\n owner,\n );\n return close;\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,EAAE,cAAc,EAAY,SAAS,EAAE,OAAO,EAAE,IAAI,QAAQ,UAAU;AAC3F,SAAS,MAAM,EAAE,MAAM,QAAQ,cAAc;AAC7C,SAAS,gBAAgB,QAAQ,oBAAoB;AACrD,SAAS,aAAa,QAAQ,kBAAkB;AAChD,SAAS,4BAA4B,EAA2B,qBAAqB,QAAQ,4BAA4B;AAEzH,SAAkC,qBAAqB,QAAQ,4BAA4B;AAoB3F,MAAM,iBAAiB,GAAG,GAAG;AAC7B,MAAM,0BAA0B,GAAG,EAAE;AAErC,MAAM,YAA0B,GAAG,EAAE;AACrC,MAAM,UAAU,GAAG,MAAM;EACvB,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC,0BAA0B,GAAG,KAAK,CAAC,CAAC;AAC5F,CAAC;AACD,MAAM,aAAa,GAAI,KAAiB,IAAK;EAC3C,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;EACxB,UAAU,CAAC,CAAC;AACd,CAAC;AACD,MAAM,YAAY,GAAI,KAAiB,IAAK;EAC1C,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC;EACzC,IAAI,KAAK,GAAG,CAAC,EAAE;EACf,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;EAC7B,UAAU,CAAC,CAAC;AACd,CAAC;AACD,MAAM,iBAAiB,GAAI,KAAiB,IAAK;EAC/C,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC;EACzC,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;EACpD,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;EAC7B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;EACxB,UAAU,CAAC,CAAC;AACd,CAAC;AACD,MAAM,UAAU,GAAI,KAAiB,IAAK,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK;AACvE,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,KAAK,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAE7G,eAAe,SAAS,cAAc,CAAC,KAA0B,EAAe;EAC9E,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,IAAI,GAAG;EAC5C,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,SAAS,IAAI,GAAG;EAC9C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC;EAC/C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,CAAC,0BAA0B,CAAC;EAClE,MAAM,UAAsB,GAAG;IAAE;EAAS,CAAC;EAC3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAqB;IACvD,CAAC,EAAE,4BAA4B;IAC/B,CAAC,EAAE,4BAA4B;IAC/B,KAAK,EAAE,KAAK,CAAC,YAAY,IAAI,GAAG;IAChC,MAAM,EAAE,KAAK,CAAC,aAAa,IAAI;EACjC,CAAC,CAAC;EACF,MAAM,OAAO,GAAG,uBAAuB,cAAc,CAAC,CAAC,EAAE;EACzD,IAAI,KAA8B;EAClC,IAAI,sBAAgD;EACpD,MAAM,GAAG,GAAI,KAAyB,IACpC,qBAAqB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC,UAAU;IAAE,MAAM,EAAE,MAAM,CAAC;EAAY,CAAC,CAAC;EACjH,MAAM,KAAK,GAAG,MAAM,iBAAiB,CAAC,UAAU,CAAC;EACjD,MAAM,4BAA4B,GAAG,MAAM,sBAAsB,GAAG,CAAC;EACrE,MAAM,KAAK,GAAG,MAAM;IAClB,4BAA4B,CAAC,CAAC;IAC9B,KAAK,CAAC,OAAO,CAAC,CAAC;EACjB,CAAC;EACD,MAAM,uBAAuB,GAAG,CAAC,KAAmB,EAAE,IAAmC,KAAK;IAC5F,4BAA4B,CAAC,CAAC;IAC9B,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS;IACjC,MAAM,aAAa,GAAG,KAAK,CAAC,aAA4B;IACxD,aAAa,CAAC,iBAAiB,GAAG,SAAS,CAAC;IAC5C,MAAM,IAAI,GAAG,MAAM;MACjB,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,CAAC;MACjD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC;MAC9C,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,KAAK,CAAC;MAClD,IAAI,aAAa,CAAC,iBAAiB,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,SAAS,CAAC;MAChG,IAAI,sBAAsB,KAAK,IAAI,EAAE,sBAAsB,GAAG,SAAS;IACzE,CAAC;IACD,MAAM,MAAM,GAAI,KAAmB,IAAK;MACtC,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;IAChD,CAAC;IACD,MAAM,KAAK,GAAI,KAAmB,IAAK;MACrC,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;IACD,sBAAsB,GAAG,IAAI;IAC7B,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC;IAC9C,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC;IAC3C,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,KAAK,CAAC;EACjD,CAAC;EAED,OAAO,CAAC,MAAM;IACZ,aAAa,CAAC,UAAU,CAAC;IACzB,MAAM,QAAQ,GAAG,MAAM;MACrB,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,GAAG,iBAAiB;MACrD,SAAS,CAAC,OAAO,CAAC;MAClB,IAAI,CAAC,OAAO,EAAE,OAAO,CAAE,OAAO,IAAK,GAAG,CAAC,OAAO,CAAC,CAAC;IAClD,CAAC;IACD,OAAO,CAAE,OAAO,IAAK,GAAG,CAAC;MAAE,GAAG,OAAO;MAAE,CAAC,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;MAAE,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,GAAG,OAAO,CAAC,MAAM,IAAI;IAAE,CAAC,CAAC,CAAC;IACnI,QAAQ,CAAC,CAAC;IACV,MAAM,MAAM,GAAI,KAAoB,IAAK;MACvC,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE;MACjF,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,KAAK,CAAC,CAAC;IACT,CAAC;IACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC3C,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC;IAC1C,MAAM,KAAK,GAAG,qBAAqB,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACzD,SAAS,CAAC,MAAM;MACd,4BAA4B,CAAC,CAAC;MAC9B,YAAY,CAAC,UAAU,CAAC;MACxB,oBAAoB,CAAC,KAAK,CAAC;MAC3B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC9C,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,CAAC;IAC/C,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,MAAM,MAAM,GAAG,CAAC,MAAc,EAAE,MAAc,KAC5C,OAAO,CAAE,OAAO,IAAK,GAAG,CAAC;IAAE,GAAG,OAAO;IAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,MAAM;IAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG;EAAO,CAAC,CAAC,CAAC;EACzF,MAAM,SAAS,GAAI,KAAmB,IAAK;IACzC,IAAI,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAK,KAAK,CAAC,MAAM,CAAa,OAAO,CAAC,gCAAgC,CAAC,EAAE;IAC3G,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC;IACrB,MAAM,KAAK,GAAG;MAAE,CAAC,EAAE,KAAK,CAAC,OAAO;MAAE,CAAC,EAAE,KAAK,CAAC;IAAQ,CAAC;IACpD,KAAK,CAAC,CAAC;IACP,MAAM,IAAI,GAAI,IAAkB,IAC9B,OAAO,CAAC,GAAG,CAAC;MAAE,GAAG,MAAM;MAAE,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC;MAAE,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IAAE,CAAC,CAAC,CAAC;IACzG,uBAAuB,CAAC,KAAK,EAAE,IAAI,CAAC;IACpC,KAAK,CAAC,cAAc,CAAC,CAAC;EACxB,CAAC;EACD,MAAM,QAAQ,GAAG,CAAC,IAAgB,EAAE,MAAc,EAAE,MAAc,KAAK;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC;IACtB,IAAI;MAAE,CAAC;MAAE,CAAC;MAAE,KAAK;MAAE;IAAO,CAAC,GAAG,OAAO;IACrC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;MACzB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,UAAU,GAAG,4BAA4B,GAAG,CAAC,CAAC;MACpG,CAAC,IAAI,KAAK,GAAG,IAAI;MACjB,KAAK,GAAG,IAAI;IACd;IACA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,MAAM;IAC3C,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACxB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,WAAW,GAAG,4BAA4B,GAAG,CAAC,CAAC;MACvG,CAAC,IAAI,MAAM,GAAG,IAAI;MAClB,MAAM,GAAG,IAAI;IACf;IACA,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,MAAM;IAC7C,OAAO,CAAC,GAAG,CAAC;MAAE,CAAC;MAAE,CAAC;MAAE,KAAK;MAAE;IAAO,CAAC,CAAC,CAAC;EACvC,CAAC;EACD,MAAM,WAAW,GAAG,CAAC,IAAgB,EAAE,KAAmB,KAAK;IAC7D,IAAI,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;IACpC,IAAI,QAAQ,GAAG;MAAE,CAAC,EAAE,KAAK,CAAC,OAAO;MAAE,CAAC,EAAE,KAAK,CAAC;IAAQ,CAAC;IACrD,KAAK,CAAC,CAAC;IACP,MAAM,IAAI,GAAI,IAAkB,IAAK;MACnC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC;MACpE,QAAQ,GAAG;QAAE,CAAC,EAAE,IAAI,CAAC,OAAO;QAAE,CAAC,EAAE,IAAI,CAAC;MAAQ,CAAC;IACjD,CAAC;IACD,uBAAuB,CAAC,KAAK,EAAE,IAAI,CAAC;IACpC,KAAK,CAAC,cAAc,CAAC,CAAC;EACxB,CAAC;EACD,MAAM,MAAM,GAAG,CAAC,KAAoB,EAAE,MAAsC,KAAK;IAC/E,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC;IACpC,MAAM,KAAK,GACT,KAAK,CAAC,GAAG,KAAK,WAAW,GACrB,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GACV,KAAK,CAAC,GAAG,KAAK,YAAY,GACxB,CAAC,IAAI,EAAE,CAAC,CAAC,GACT,KAAK,CAAC,GAAG,KAAK,SAAS,GACrB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GACV,KAAK,CAAC,GAAG,KAAK,WAAW,GACvB,CAAC,CAAC,EAAE,IAAI,CAAC,GACT,SAAS;IACrB,IAAI,CAAC,KAAK,EAAE;IACZ,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAG,KAAK,CAAC,CAAC,CAAE,CAAC;IAC5B,KAAK,CAAC,cAAc,CAAC,CAAC;EACxB,CAAC;EACD,MAAM,OAAwC,GAAG,CAC/C,CAAC,MAAM,EAAE,WAAW,CAAC,EACrB,CAAC,OAAO,EAAE,WAAW,CAAC,EACtB,CAAC,KAAK,EAAE,WAAW,CAAC,EACpB,CAAC,QAAQ,EAAE,WAAW,CAAC,EACvB,CAAC,UAAU,EAAE,aAAa,CAAC,EAC3B,CAAC,WAAW,EAAE,aAAa,CAAC,EAC5B,CAAC,aAAa,EAAE,aAAa,CAAC,EAC9B,CAAC,cAAc,EAAE,aAAa,CAAC,CAChC;EAED,MAAM,IAAI,iBAGC,gCAAuB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,gCACpC,MAAM,CAAC,CAAC,GAAG,MAAM,YAAG,SAAS,4BAExC,MAAM,CAAC,CAAC,GACJ;IACE,qBAAqB,EAAE,KAAK,CAAC,MAAM;IACnC,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,KAAK,CAAC;EACnB,CAAC,GACD;IACE,qBAAqB,EAAE,KAAK,CAAC,MAAM;IACnC,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;IACrB,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;IACpB,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI;IAC1B,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI;IAC5B,SAAS,EAAE,KAAK,CAAC;EACnB,CAAC,8CAIU,OAAO,4CAKrB,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA,UAAI,IAAI,oDAAe,IAAI,CAAC,CAAC;EAAuB,2CAK5D,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;EAAM,CAAC,CAAC,+CAG/C,OAAO,0BAAG,KAAK,CAAC,KAAK,yCAEyB,QAAQ,CAAC,CAAC,CAAC,WAAW,0BAI1C,KAAK,CAAC,QAAQ,8BACrD,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,CAAC,MAAM,CAAC,CAAC;IAAA;IAAA;MAAA,OAClB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,KAC1B,IAAI,KAAK,cAAc,uDAIR,IAAI,wDACN,MAAM,gDACH,QAAQ,CAAC,CAAC,CAAC,YAAY,mBAKrC;MACA;MAAA,oDAGa,IAAI,wDACN,MAAM,SAKrB,CAAC;IAAA;EAAA,IAGN;EACD,yBAAQ,MAAM;IAAA,IAAC,KAAK;MAAA,OAAE,OAAO,QAAQ,KAAK,WAAW,GAAG,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC;IAAA;IAAA,UAAG;EAAI;AACrH;AAEA,OAAO,MAAM,kBAAkB,GAAG,CAChC,IAAiD,EACjD,OAAkC,KACV;EACxB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC;EACzF,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,YAAY,WAAW,GAAG,QAAQ,CAAC,aAAa,GAAG,IAAI;EACnG,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;EAC3C,KAAK,CAAC,SAAS,GAAG,QAAQ;EAC1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;EAChC,IAAI,OAAiC;EACrC,IAAI,MAAM,GAAG,KAAK;EAClB,MAAM,KAAK,GAAG,MAAM;IAClB,IAAI,MAAM,EAAE;IACZ,MAAM,GAAG,IAAI;IACb,OAAO,GAAG,CAAC;IACX,KAAK,CAAC,MAAM,CAAC,CAAC;IACd,aAAa,EAAE,KAAK,CAAC,CAAC;EACxB,CAAC;EACD,OAAO,GAAG,MAAM,CACd,wBACG,cAAc,eAAK,OAAO;IAAA,IAAE,YAAY;MAAA,OAAE,OAAO,CAAC,YAAY,KAAK,MAAM,KAAK,CAAC;IAAA;IAAE,OAAO,EAAE,KAAK;IAAA;MAAA,OAC7F,IAAI,CAAC,KAAK,CAAC;IAAA;EAAA,GAEf,EACD,KACF,CAAC;EACD,OAAO,KAAK;AACd,CAAC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["layout/FloatingWindow.tsx"],"sourcesContent":["import { createSignal, createUniqueId, type JSX, onCleanup, onMount, Show } from \"solid-js\";\nimport { Portal, render } from \"solid-js/web\";\nimport { returnFocus, ringOnReturn } from \"../internal/focus-return\";\nimport { getK2bPortalRoot } from \"../internal/portal\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { FLOATING_WINDOW_VIEWPORT_GAP, type FloatingWindowRect, fitFloatingWindowRect } from \"./floating-window-geometry\";\n\nexport { type FloatingWindowRect, fitFloatingWindowRect } from \"./floating-window-geometry\";\n\ntype ResizeEdge = \"left\" | \"right\" | \"top\" | \"bottom\" | \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\";\n\nexport type FloatingWindowProps = {\n title: string;\n icon?: string;\n children: JSX.Element;\n onClose: () => void;\n initialWidth?: number;\n initialHeight?: number;\n minWidth?: number;\n minHeight?: number;\n accent?: string;\n class?: string;\n resolveScope?: () => HTMLElement | null | undefined;\n};\nexport type OpenFloatingWindowOptions = Omit<FloatingWindowProps, \"children\" | \"onClose\">;\nexport type FloatingWindowClose = () => void;\n\nconst MOBILE_BREAKPOINT = 640;\nconst FLOATING_WINDOW_LAYER_BASE = 80;\ntype LayerOwner = { setLayer: (layer: number) => void };\nconst activeLayers: LayerOwner[] = [];\nconst syncLayers = () => {\n activeLayers.forEach((owner, index) => owner.setLayer(FLOATING_WINDOW_LAYER_BASE + index));\n};\nconst registerLayer = (owner: LayerOwner) => {\n activeLayers.push(owner);\n syncLayers();\n};\nconst releaseLayer = (owner: LayerOwner) => {\n const index = activeLayers.indexOf(owner);\n if (index < 0) return;\n activeLayers.splice(index, 1);\n syncLayers();\n};\nconst bringLayerToFront = (owner: LayerOwner) => {\n const index = activeLayers.indexOf(owner);\n if (index < 0 || index === activeLayers.length - 1) return;\n activeLayers.splice(index, 1);\n activeLayers.push(owner);\n syncLayers();\n};\nconst isTopLayer = (owner: LayerOwner) => activeLayers.at(-1) === owner;\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), Math.max(min, max));\n\nexport default function FloatingWindow(props: FloatingWindowProps): JSX.Element {\n const messages = useUiMessages();\n const minWidth = () => props.minWidth ?? 360;\n const minHeight = () => props.minHeight ?? 320;\n const [mobile, setMobile] = createSignal(false);\n const [layer, setLayer] = createSignal(FLOATING_WINDOW_LAYER_BASE);\n const layerOwner: LayerOwner = { setLayer };\n const [rect, setRect] = createSignal<FloatingWindowRect>({\n x: FLOATING_WINDOW_VIEWPORT_GAP,\n y: FLOATING_WINDOW_VIEWPORT_GAP,\n width: props.initialWidth ?? 720,\n height: props.initialHeight ?? 640,\n });\n const titleId = `k2b-floating-window-${createUniqueId()}`;\n let frame: HTMLElement | undefined;\n let stopPointerInteraction: (() => void) | undefined;\n const fit = (value: FloatingWindowRect) =>\n fitFloatingWindowRect(value, minWidth(), minHeight(), { width: window.innerWidth, height: window.innerHeight });\n const front = () => bringLayerToFront(layerOwner);\n const stopActivePointerInteraction = () => stopPointerInteraction?.();\n const close = () => {\n stopActivePointerInteraction();\n props.onClose();\n };\n const trackPointerInteraction = (start: PointerEvent, move: (event: PointerEvent) => void) => {\n stopActivePointerInteraction();\n const pointerId = start.pointerId;\n const captureTarget = start.currentTarget as HTMLElement;\n captureTarget.setPointerCapture?.(pointerId);\n const stop = () => {\n window.removeEventListener(\"pointermove\", onMove);\n window.removeEventListener(\"pointerup\", onEnd);\n window.removeEventListener(\"pointercancel\", onEnd);\n if (captureTarget.hasPointerCapture?.(pointerId)) captureTarget.releasePointerCapture(pointerId);\n if (stopPointerInteraction === stop) stopPointerInteraction = undefined;\n };\n const onMove = (event: PointerEvent) => {\n if (event.pointerId === pointerId) move(event);\n };\n const onEnd = (event: PointerEvent) => {\n if (event.pointerId === pointerId) stop();\n };\n stopPointerInteraction = stop;\n window.addEventListener(\"pointermove\", onMove);\n window.addEventListener(\"pointerup\", onEnd);\n window.addEventListener(\"pointercancel\", onEnd);\n };\n\n onMount(() => {\n registerLayer(layerOwner);\n const viewport = () => {\n const compact = window.innerWidth < MOBILE_BREAKPOINT;\n setMobile(compact);\n if (!compact) setRect((current) => fit(current));\n };\n setRect((current) => fit({ ...current, x: (window.innerWidth - current.width) / 2, y: (window.innerHeight - current.height) / 2 }));\n viewport();\n const escape = (event: KeyboardEvent) => {\n if (event.defaultPrevented || event.key !== \"Escape\" || !isTopLayer(layerOwner)) return;\n event.preventDefault();\n close();\n };\n window.addEventListener(\"resize\", viewport);\n window.addEventListener(\"keydown\", escape);\n const focus = requestAnimationFrame(() => frame?.focus());\n onCleanup(() => {\n stopActivePointerInteraction();\n releaseLayer(layerOwner);\n cancelAnimationFrame(focus);\n window.removeEventListener(\"resize\", viewport);\n window.removeEventListener(\"keydown\", escape);\n });\n });\n\n const moveBy = (deltaX: number, deltaY: number) =>\n setRect((current) => fit({ ...current, x: current.x + deltaX, y: current.y + deltaY }));\n const beginMove = (event: PointerEvent) => {\n if (mobile() || event.button !== 0 || (event.target as Element).closest(\"button:not([data-window-move])\")) return;\n const origin = rect();\n const start = { x: event.clientX, y: event.clientY };\n front();\n const move = (next: PointerEvent) =>\n setRect(fit({ ...origin, x: origin.x + next.clientX - start.x, y: origin.y + next.clientY - start.y }));\n trackPointerInteraction(event, move);\n event.preventDefault();\n };\n const resizeBy = (edge: ResizeEdge, deltaX: number, deltaY: number) => {\n const current = rect();\n let { x, y, width, height } = current;\n if (edge.includes(\"left\")) {\n const next = clamp(width - deltaX, minWidth(), window.innerWidth - FLOATING_WINDOW_VIEWPORT_GAP - x);\n x += width - next;\n width = next;\n }\n if (edge.includes(\"right\")) width += deltaX;\n if (edge.includes(\"top\")) {\n const next = clamp(height - deltaY, minHeight(), window.innerHeight - FLOATING_WINDOW_VIEWPORT_GAP - y);\n y += height - next;\n height = next;\n }\n if (edge.includes(\"bottom\")) height += deltaY;\n setRect(fit({ x, y, width, height }));\n };\n const beginResize = (edge: ResizeEdge, event: PointerEvent) => {\n if (mobile() || event.button !== 0) return;\n let previous = { x: event.clientX, y: event.clientY };\n front();\n const move = (next: PointerEvent) => {\n resizeBy(edge, next.clientX - previous.x, next.clientY - previous.y);\n previous = { x: next.clientX, y: next.clientY };\n };\n trackPointerInteraction(event, move);\n event.preventDefault();\n };\n const arrows = (event: KeyboardEvent, action: (x: number, y: number) => void) => {\n const step = event.shiftKey ? 24 : 8;\n const delta =\n event.key === \"ArrowLeft\"\n ? [-step, 0]\n : event.key === \"ArrowRight\"\n ? [step, 0]\n : event.key === \"ArrowUp\"\n ? [0, -step]\n : event.key === \"ArrowDown\"\n ? [0, step]\n : undefined;\n if (!delta) return;\n action(delta[0]!, delta[1]!);\n event.preventDefault();\n };\n const handles: readonly [ResizeEdge, string][] = [\n [\"left\", \"ew-resize\"],\n [\"right\", \"ew-resize\"],\n [\"top\", \"ns-resize\"],\n [\"bottom\", \"ns-resize\"],\n [\"top-left\", \"nwse-resize\"],\n [\"top-right\", \"nesw-resize\"],\n [\"bottom-left\", \"nesw-resize\"],\n [\"bottom-right\", \"nwse-resize\"],\n ];\n\n const view = (\n <section\n ref={frame}\n class={`k2b-floating-window ${props.class ?? \"\"}`}\n data-mobile={mobile() ? \"true\" : undefined}\n style={\n mobile()\n ? {\n \"--k2b-window-accent\": props.accent,\n inset: \"0.5rem\",\n width: \"auto\",\n height: \"auto\",\n \"z-index\": layer(),\n }\n : {\n \"--k2b-window-accent\": props.accent,\n left: `${rect().x}px`,\n top: `${rect().y}px`,\n width: `${rect().width}px`,\n height: `${rect().height}px`,\n \"z-index\": layer(),\n }\n }\n role=\"dialog\"\n aria-modal=\"false\"\n aria-labelledby={titleId}\n tabIndex={-1}\n onPointerDown={front}\n >\n <header onPointerDown={beginMove}>\n <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n <button\n type=\"button\"\n data-window-move\n class=\"k2b-floating-window__title\"\n aria-label={messages().moveWindow({ title: props.title })}\n onKeyDown={(event) => arrows(event, moveBy)}\n >\n <span id={titleId}>{props.title}</span>\n </button>\n <button type=\"button\" class=\"k2b-icon-button\" aria-label={messages().closeWindow} onClick={close}>\n <i class=\"ti ti-x\" aria-hidden=\"true\" />\n </button>\n </header>\n <div class=\"k2b-floating-window__body\">{props.children}</div>\n <Show when={!mobile()}>\n {handles.map(([edge, cursor]) =>\n edge === \"bottom-right\" ? (\n <button\n type=\"button\"\n class=\"k2b-floating-window__resize\"\n data-edge={edge}\n style={{ cursor }}\n aria-label={messages().resizeWindow}\n onPointerDown={(event) => beginResize(edge, event)}\n onKeyDown={(event) => arrows(event, (x, y) => resizeBy(edge, x, y))}\n />\n ) : (\n // Cloud exposes a single keyboard-resizable corner; the remaining\n // edges stay pointer-only so the window adds one tab stop, not eight.\n <div\n class=\"k2b-floating-window__resize\"\n data-edge={edge}\n style={{ cursor }}\n aria-hidden=\"true\"\n onPointerDown={(event) => beginResize(edge, event)}\n />\n ),\n )}\n </Show>\n </section>\n );\n return <Portal mount={typeof document === \"undefined\" ? undefined : getK2bPortalRoot(props.resolveScope?.())}>{view}</Portal>;\n}\n\nexport const openFloatingWindow = (\n view: (close: FloatingWindowClose) => JSX.Element,\n options: OpenFloatingWindowOptions,\n): FloatingWindowClose => {\n if (typeof document === \"undefined\") throw new Error(\"Floating windows are browser-only\");\n const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;\n const previousRing = ringOnReturn(previousFocus);\n const owner = document.createElement(\"div\");\n owner.className = \"k2b-ui\";\n document.body.appendChild(owner);\n let dispose: (() => void) | undefined;\n let closed = false;\n const close = () => {\n if (closed) return;\n closed = true;\n dispose?.();\n owner.remove();\n returnFocus(previousFocus, previousRing);\n };\n dispose = render(\n () => (\n <FloatingWindow {...options} resolveScope={options.resolveScope ?? (() => owner)} onClose={close}>\n {view(close)}\n </FloatingWindow>\n ),\n owner,\n );\n return close;\n};\n"],"mappings":";;;;;;;;;;;;AAAA,SAAS,YAAY,EAAE,cAAc,EAAY,SAAS,EAAE,OAAO,EAAE,IAAI,QAAQ,UAAU;AAC3F,SAAS,MAAM,EAAE,MAAM,QAAQ,cAAc;AAC7C,SAAS,WAAW,EAAE,YAAY,QAAQ,0BAA0B;AACpE,SAAS,gBAAgB,QAAQ,oBAAoB;AACrD,SAAS,aAAa,QAAQ,kBAAkB;AAChD,SAAS,4BAA4B,EAA2B,qBAAqB,QAAQ,4BAA4B;AAEzH,SAAkC,qBAAqB,QAAQ,4BAA4B;AAoB3F,MAAM,iBAAiB,GAAG,GAAG;AAC7B,MAAM,0BAA0B,GAAG,EAAE;AAErC,MAAM,YAA0B,GAAG,EAAE;AACrC,MAAM,UAAU,GAAG,MAAM;EACvB,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,QAAQ,CAAC,0BAA0B,GAAG,KAAK,CAAC,CAAC;AAC5F,CAAC;AACD,MAAM,aAAa,GAAI,KAAiB,IAAK;EAC3C,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;EACxB,UAAU,CAAC,CAAC;AACd,CAAC;AACD,MAAM,YAAY,GAAI,KAAiB,IAAK;EAC1C,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC;EACzC,IAAI,KAAK,GAAG,CAAC,EAAE;EACf,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;EAC7B,UAAU,CAAC,CAAC;AACd,CAAC;AACD,MAAM,iBAAiB,GAAI,KAAiB,IAAK;EAC/C,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC;EACzC,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;EACpD,YAAY,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;EAC7B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;EACxB,UAAU,CAAC,CAAC;AACd,CAAC;AACD,MAAM,UAAU,GAAI,KAAiB,IAAK,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK;AACvE,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,KAAK,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAE7G,eAAe,SAAS,cAAc,CAAC,KAA0B,EAAe;EAC9E,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,IAAI,GAAG;EAC5C,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,SAAS,IAAI,GAAG;EAC9C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC;EAC/C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,CAAC,0BAA0B,CAAC;EAClE,MAAM,UAAsB,GAAG;IAAE;EAAS,CAAC;EAC3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAqB;IACvD,CAAC,EAAE,4BAA4B;IAC/B,CAAC,EAAE,4BAA4B;IAC/B,KAAK,EAAE,KAAK,CAAC,YAAY,IAAI,GAAG;IAChC,MAAM,EAAE,KAAK,CAAC,aAAa,IAAI;EACjC,CAAC,CAAC;EACF,MAAM,OAAO,GAAG,uBAAuB,cAAc,CAAC,CAAC,EAAE;EACzD,IAAI,KAA8B;EAClC,IAAI,sBAAgD;EACpD,MAAM,GAAG,GAAI,KAAyB,IACpC,qBAAqB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC,UAAU;IAAE,MAAM,EAAE,MAAM,CAAC;EAAY,CAAC,CAAC;EACjH,MAAM,KAAK,GAAG,MAAM,iBAAiB,CAAC,UAAU,CAAC;EACjD,MAAM,4BAA4B,GAAG,MAAM,sBAAsB,GAAG,CAAC;EACrE,MAAM,KAAK,GAAG,MAAM;IAClB,4BAA4B,CAAC,CAAC;IAC9B,KAAK,CAAC,OAAO,CAAC,CAAC;EACjB,CAAC;EACD,MAAM,uBAAuB,GAAG,CAAC,KAAmB,EAAE,IAAmC,KAAK;IAC5F,4BAA4B,CAAC,CAAC;IAC9B,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS;IACjC,MAAM,aAAa,GAAG,KAAK,CAAC,aAA4B;IACxD,aAAa,CAAC,iBAAiB,GAAG,SAAS,CAAC;IAC5C,MAAM,IAAI,GAAG,MAAM;MACjB,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,MAAM,CAAC;MACjD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC;MAC9C,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,KAAK,CAAC;MAClD,IAAI,aAAa,CAAC,iBAAiB,GAAG,SAAS,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,SAAS,CAAC;MAChG,IAAI,sBAAsB,KAAK,IAAI,EAAE,sBAAsB,GAAG,SAAS;IACzE,CAAC;IACD,MAAM,MAAM,GAAI,KAAmB,IAAK;MACtC,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC;IAChD,CAAC;IACD,MAAM,KAAK,GAAI,KAAmB,IAAK;MACrC,IAAI,KAAK,CAAC,SAAS,KAAK,SAAS,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;IACD,sBAAsB,GAAG,IAAI;IAC7B,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,MAAM,CAAC;IAC9C,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,KAAK,CAAC;IAC3C,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,KAAK,CAAC;EACjD,CAAC;EAED,OAAO,CAAC,MAAM;IACZ,aAAa,CAAC,UAAU,CAAC;IACzB,MAAM,QAAQ,GAAG,MAAM;MACrB,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,GAAG,iBAAiB;MACrD,SAAS,CAAC,OAAO,CAAC;MAClB,IAAI,CAAC,OAAO,EAAE,OAAO,CAAE,OAAO,IAAK,GAAG,CAAC,OAAO,CAAC,CAAC;IAClD,CAAC;IACD,OAAO,CAAE,OAAO,IAAK,GAAG,CAAC;MAAE,GAAG,OAAO;MAAE,CAAC,EAAE,CAAC,MAAM,CAAC,UAAU,GAAG,OAAO,CAAC,KAAK,IAAI,CAAC;MAAE,CAAC,EAAE,CAAC,MAAM,CAAC,WAAW,GAAG,OAAO,CAAC,MAAM,IAAI;IAAE,CAAC,CAAC,CAAC;IACnI,QAAQ,CAAC,CAAC;IACV,MAAM,MAAM,GAAI,KAAoB,IAAK;MACvC,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,EAAE;MACjF,KAAK,CAAC,cAAc,CAAC,CAAC;MACtB,KAAK,CAAC,CAAC;IACT,CAAC;IACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC3C,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC;IAC1C,MAAM,KAAK,GAAG,qBAAqB,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACzD,SAAS,CAAC,MAAM;MACd,4BAA4B,CAAC,CAAC;MAC9B,YAAY,CAAC,UAAU,CAAC;MACxB,oBAAoB,CAAC,KAAK,CAAC;MAC3B,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC;MAC9C,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,MAAM,CAAC;IAC/C,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,MAAM,MAAM,GAAG,CAAC,MAAc,EAAE,MAAc,KAC5C,OAAO,CAAE,OAAO,IAAK,GAAG,CAAC;IAAE,GAAG,OAAO;IAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,MAAM;IAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG;EAAO,CAAC,CAAC,CAAC;EACzF,MAAM,SAAS,GAAI,KAAmB,IAAK;IACzC,IAAI,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAK,KAAK,CAAC,MAAM,CAAa,OAAO,CAAC,gCAAgC,CAAC,EAAE;IAC3G,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC;IACrB,MAAM,KAAK,GAAG;MAAE,CAAC,EAAE,KAAK,CAAC,OAAO;MAAE,CAAC,EAAE,KAAK,CAAC;IAAQ,CAAC;IACpD,KAAK,CAAC,CAAC;IACP,MAAM,IAAI,GAAI,IAAkB,IAC9B,OAAO,CAAC,GAAG,CAAC;MAAE,GAAG,MAAM;MAAE,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC;MAAE,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IAAE,CAAC,CAAC,CAAC;IACzG,uBAAuB,CAAC,KAAK,EAAE,IAAI,CAAC;IACpC,KAAK,CAAC,cAAc,CAAC,CAAC;EACxB,CAAC;EACD,MAAM,QAAQ,GAAG,CAAC,IAAgB,EAAE,MAAc,EAAE,MAAc,KAAK;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC;IACtB,IAAI;MAAE,CAAC;MAAE,CAAC;MAAE,KAAK;MAAE;IAAO,CAAC,GAAG,OAAO;IACrC,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;MACzB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC,UAAU,GAAG,4BAA4B,GAAG,CAAC,CAAC;MACpG,CAAC,IAAI,KAAK,GAAG,IAAI;MACjB,KAAK,GAAG,IAAI;IACd;IACA,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,IAAI,MAAM;IAC3C,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;MACxB,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,WAAW,GAAG,4BAA4B,GAAG,CAAC,CAAC;MACvG,CAAC,IAAI,MAAM,GAAG,IAAI;MAClB,MAAM,GAAG,IAAI;IACf;IACA,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,MAAM;IAC7C,OAAO,CAAC,GAAG,CAAC;MAAE,CAAC;MAAE,CAAC;MAAE,KAAK;MAAE;IAAO,CAAC,CAAC,CAAC;EACvC,CAAC;EACD,MAAM,WAAW,GAAG,CAAC,IAAgB,EAAE,KAAmB,KAAK;IAC7D,IAAI,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;IACpC,IAAI,QAAQ,GAAG;MAAE,CAAC,EAAE,KAAK,CAAC,OAAO;MAAE,CAAC,EAAE,KAAK,CAAC;IAAQ,CAAC;IACrD,KAAK,CAAC,CAAC;IACP,MAAM,IAAI,GAAI,IAAkB,IAAK;MACnC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC;MACpE,QAAQ,GAAG;QAAE,CAAC,EAAE,IAAI,CAAC,OAAO;QAAE,CAAC,EAAE,IAAI,CAAC;MAAQ,CAAC;IACjD,CAAC;IACD,uBAAuB,CAAC,KAAK,EAAE,IAAI,CAAC;IACpC,KAAK,CAAC,cAAc,CAAC,CAAC;EACxB,CAAC;EACD,MAAM,MAAM,GAAG,CAAC,KAAoB,EAAE,MAAsC,KAAK;IAC/E,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC;IACpC,MAAM,KAAK,GACT,KAAK,CAAC,GAAG,KAAK,WAAW,GACrB,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GACV,KAAK,CAAC,GAAG,KAAK,YAAY,GACxB,CAAC,IAAI,EAAE,CAAC,CAAC,GACT,KAAK,CAAC,GAAG,KAAK,SAAS,GACrB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GACV,KAAK,CAAC,GAAG,KAAK,WAAW,GACvB,CAAC,CAAC,EAAE,IAAI,CAAC,GACT,SAAS;IACrB,IAAI,CAAC,KAAK,EAAE;IACZ,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAG,KAAK,CAAC,CAAC,CAAE,CAAC;IAC5B,KAAK,CAAC,cAAc,CAAC,CAAC;EACxB,CAAC;EACD,MAAM,OAAwC,GAAG,CAC/C,CAAC,MAAM,EAAE,WAAW,CAAC,EACrB,CAAC,OAAO,EAAE,WAAW,CAAC,EACtB,CAAC,KAAK,EAAE,WAAW,CAAC,EACpB,CAAC,QAAQ,EAAE,WAAW,CAAC,EACvB,CAAC,UAAU,EAAE,aAAa,CAAC,EAC3B,CAAC,WAAW,EAAE,aAAa,CAAC,EAC5B,CAAC,aAAa,EAAE,aAAa,CAAC,EAC9B,CAAC,cAAc,EAAE,aAAa,CAAC,CAChC;EAED,MAAM,IAAI,iBAGC,gCAAuB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,gCACpC,MAAM,CAAC,CAAC,GAAG,MAAM,YAAG,SAAS,4BAExC,MAAM,CAAC,CAAC,GACJ;IACE,qBAAqB,EAAE,KAAK,CAAC,MAAM;IACnC,KAAK,EAAE,QAAQ;IACf,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,KAAK,CAAC;EACnB,CAAC,GACD;IACE,qBAAqB,EAAE,KAAK,CAAC,MAAM;IACnC,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;IACrB,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI;IACpB,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI;IAC1B,MAAM,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,MAAM,IAAI;IAC5B,SAAS,EAAE,KAAK,CAAC;EACnB,CAAC,8CAIU,OAAO,4CAKrB,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,KAAK,CAAC,IAAI;IAAA;IAAA,UAAI,IAAI,oDAAe,IAAI,CAAC,CAAC;EAAuB,2CAK5D,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;EAAM,CAAC,CAAC,+CAG/C,OAAO,0BAAG,KAAK,CAAC,KAAK,yCAEyB,QAAQ,CAAC,CAAC,CAAC,WAAW,0BAI1C,KAAK,CAAC,QAAQ,8BACrD,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,CAAC,MAAM,CAAC,CAAC;IAAA;IAAA;MAAA,OAClB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,KAC1B,IAAI,KAAK,cAAc,uDAIR,IAAI,wDACN,MAAM,gDACH,QAAQ,CAAC,CAAC,CAAC,YAAY,mBAKrC;MACA;MAAA,oDAGa,IAAI,wDACN,MAAM,SAKrB,CAAC;IAAA;EAAA,IAGN;EACD,yBAAQ,MAAM;IAAA,IAAC,KAAK;MAAA,OAAE,OAAO,QAAQ,KAAK,WAAW,GAAG,SAAS,GAAG,gBAAgB,CAAC,KAAK,CAAC,YAAY,GAAG,CAAC,CAAC;IAAA;IAAA,UAAG;EAAI;AACrH;AAEA,OAAO,MAAM,kBAAkB,GAAG,CAChC,IAAiD,EACjD,OAAkC,KACV;EACxB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC;EACzF,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,YAAY,WAAW,GAAG,QAAQ,CAAC,aAAa,GAAG,IAAI;EACnG,MAAM,YAAY,GAAG,YAAY,CAAC,aAAa,CAAC;EAChD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;EAC3C,KAAK,CAAC,SAAS,GAAG,QAAQ;EAC1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;EAChC,IAAI,OAAiC;EACrC,IAAI,MAAM,GAAG,KAAK;EAClB,MAAM,KAAK,GAAG,MAAM;IAClB,IAAI,MAAM,EAAE;IACZ,MAAM,GAAG,IAAI;IACb,OAAO,GAAG,CAAC;IACX,KAAK,CAAC,MAAM,CAAC,CAAC;IACd,WAAW,CAAC,aAAa,EAAE,YAAY,CAAC;EAC1C,CAAC;EACD,OAAO,GAAG,MAAM,CACd,wBACG,cAAc,eAAK,OAAO;IAAA,IAAE,YAAY;MAAA,OAAE,OAAO,CAAC,YAAY,KAAK,MAAM,KAAK,CAAC;IAAA;IAAE,OAAO,EAAE,KAAK;IAAA;MAAA,OAC7F,IAAI,CAAC,KAAK,CAAC;IAAA;EAAA,GAEf,EACD,KACF,CAAC;EACD,OAAO,KAAK;AACd,CAAC","ignoreList":[]}
|
|
@@ -14,10 +14,11 @@ var _tmpl$ = ["<p>", "</p>"],
|
|
|
14
14
|
_tmpl$9 = ["<span class=\"k2b-panel-dialog__section-copy\"><span id=\"", "\" class=\"k2b-panel-dialog__section-title\">", "</span>", "</span>"],
|
|
15
15
|
_tmpl$0 = "<i class=\"ti ti-eye\" aria-hidden=\"true\"></i>",
|
|
16
16
|
_tmpl$1 = ["<div", ">", "</div>"],
|
|
17
|
-
_tmpl$10 = "<
|
|
18
|
-
_tmpl$11 =
|
|
19
|
-
_tmpl$12 = ["<
|
|
20
|
-
_tmpl$13 = ["<
|
|
17
|
+
_tmpl$10 = ["<p class=\"k2b-panel-dialog__section-subtitle\">", "</p>"],
|
|
18
|
+
_tmpl$11 = "<i class=\"ti ti-eye-off\" aria-hidden=\"true\"></i>",
|
|
19
|
+
_tmpl$12 = ["<section class=\"k2b-panel-dialog__section\"", ">", "<header", ">", "<div><h3", ">", "</h3>", "</div>", "", "</header><div id=\"", "\" class=\"k2b-panel-dialog__section-body\"", ">", "</div></section>"],
|
|
20
|
+
_tmpl$13 = ["<span class=\"k2b-panel-dialog__section-icon\"><i", " aria-hidden=\"true\"></i></span>"],
|
|
21
|
+
_tmpl$14 = ["<div class=\"k2b-panel-dialog\"", ">", "</div>"];
|
|
21
22
|
import { createContext, createEffect, createSignal, createUniqueId, Show, useContext } from "solid-js";
|
|
22
23
|
import { Button } from "../actions/Button";
|
|
23
24
|
import { Tabs } from "../actions/Tabs";
|
|
@@ -114,7 +115,7 @@ const PanelDialogSection = props => {
|
|
|
114
115
|
if (!expanded && active && active !== expand && section?.contains(active)) expand?.focus();
|
|
115
116
|
});
|
|
116
117
|
});
|
|
117
|
-
return _$ssr(_tmpl$
|
|
118
|
+
return _$ssr(_tmpl$12, _$ssrAttribute("data-surface", _$escape(usePanelDialogSurface(), true), false) + _$ssrAttribute("data-hideable", _$escape(props.hideable || undefined, true), false) + _$ssrAttribute("data-open", props.hideable ? _$escape(open(), true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-labelledby", open() ? _$escape(id, true) : `${_$escape(id, true)}-closed`, false), _$escape(_$createComponent(Show, {
|
|
118
119
|
get when() {
|
|
119
120
|
return props.hideable;
|
|
120
121
|
},
|
|
@@ -149,13 +150,13 @@ const PanelDialogSection = props => {
|
|
|
149
150
|
get when() {
|
|
150
151
|
return props.icon;
|
|
151
152
|
},
|
|
152
|
-
children: icon => _$ssr(_tmpl$
|
|
153
|
+
children: icon => _$ssr(_tmpl$13, _$ssrAttribute("class", _$escape(icon(), true), false))
|
|
153
154
|
})), _$ssrAttribute("id", _$escape(id, true), false), _$escape(props.title), _$escape(_$createComponent(Show, {
|
|
154
155
|
get when() {
|
|
155
156
|
return props.subtitle;
|
|
156
157
|
},
|
|
157
158
|
get children() {
|
|
158
|
-
return _$ssr(_tmpl
|
|
159
|
+
return _$ssr(_tmpl$10, _$escape(props.subtitle));
|
|
159
160
|
}
|
|
160
161
|
})), _$escape(_$createComponent(Show, {
|
|
161
162
|
get when() {
|
|
@@ -180,7 +181,7 @@ const PanelDialogSection = props => {
|
|
|
180
181
|
"aria-controls": `${id}-body`,
|
|
181
182
|
onClick: () => toggle(false),
|
|
182
183
|
get children() {
|
|
183
|
-
return _$ssr(_tmpl$
|
|
184
|
+
return _$ssr(_tmpl$11);
|
|
184
185
|
}
|
|
185
186
|
});
|
|
186
187
|
}
|
|
@@ -209,7 +210,7 @@ const PanelDialog = props => {
|
|
|
209
210
|
return _$createComponent(PanelDialogSurfaceContext.Provider, {
|
|
210
211
|
value: surface,
|
|
211
212
|
get children() {
|
|
212
|
-
return _$ssr(_tmpl$
|
|
213
|
+
return _$ssr(_tmpl$14, _$ssrAttribute("data-surface", _$escape(surface, true), false), _$escape(props.children));
|
|
213
214
|
}
|
|
214
215
|
});
|
|
215
216
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["layout/PanelDialog.tsx"],"sourcesContent":["import { createContext, createEffect, createSignal, createUniqueId, type JSX, Show, useContext } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { Tabs } from \"../actions/Tabs\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { prompts } from \"../feedback/prompts\";\nimport { resolveUiMessages, useUiMessages } from \"../intl/messages\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type PanelDialogSurface = \"contained\" | \"floating\";\n\nexport type PanelDialogProps = {\n children: JSX.Element;\n surface?: PanelDialogSurface;\n};\n\nexport type PanelDialogHeaderProps = {\n title: JSX.Element;\n subtitle?: JSX.Element;\n icon?: string;\n actions?: JSX.Element;\n close?: () => void;\n closeDisabled?: boolean;\n closeLabel?: string;\n};\n\nexport type PanelDialogBodyProps = {\n children: JSX.Element;\n scrollPreserveKey?: string;\n scrollFade?: boolean;\n};\n\nexport type PanelDialogFooterProps = {\n children: JSX.Element;\n};\n\nexport type PanelDialogSectionProps = {\n title: JSX.Element;\n subtitle?: JSX.Element;\n icon?: string;\n actions?: JSX.Element;\n children: JSX.Element;\n} & (\n | { hideable?: false; open?: never; defaultOpen?: never; onOpenChange?: never; disabled?: never }\n | { hideable: true; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; disabled?: boolean }\n);\n\nexport type PanelDialogTabOption<T extends string = string> = {\n value: T;\n label: JSX.Element;\n icon?: string;\n disabled?: boolean;\n};\n\nexport type PanelDialogTabsProps<T extends string = string> = {\n options: readonly PanelDialogTabOption<T>[];\n value: T | (() => T);\n onValueChange: (value: T) => void;\n ariaLabel?: string;\n label?: string;\n};\n\ntype PanelDialogComponent = ((props: PanelDialogProps) => JSX.Element) & {\n Header: (props: PanelDialogHeaderProps) => JSX.Element;\n Body: (props: PanelDialogBodyProps) => JSX.Element;\n Footer: (props: PanelDialogFooterProps) => JSX.Element;\n Section: (props: PanelDialogSectionProps) => JSX.Element;\n Tabs: <T extends string>(props: PanelDialogTabsProps<T>) => JSX.Element;\n};\n\nconst PanelDialogSurfaceContext = createContext<PanelDialogSurface>(\"contained\");\nconst usePanelDialogSurface = () => useContext(PanelDialogSurfaceContext);\n\nconst panelDialogBasePanelClass = \"k2b-dialog k2b-panel-dialog-frame\";\n\nexport const panelDialogPanelClass = `${panelDialogBasePanelClass} is-standard`;\nexport const panelDialogOptions = {\n panelClassName: panelDialogPanelClass,\n contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWidePanelClass = `${panelDialogBasePanelClass} is-wide`;\nexport const panelDialogWideOptions = {\n panelClassName: panelDialogWidePanelClass,\n contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogFixedPanelClass = `${panelDialogBasePanelClass} is-fixed`;\nexport const panelDialogFixedOptions = {\n panelClassName: panelDialogFixedPanelClass,\n contentClassName: \"k2b-panel-dialog-viewport is-fixed\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWorkspacePanelClass = `${panelDialogBasePanelClass} is-workspace`;\nexport const panelDialogWorkspaceOptions = {\n panelClassName: panelDialogWorkspacePanelClass,\n contentClassName: \"k2b-panel-dialog-viewport is-workspace\",\n} satisfies OpenDialogOptions;\n\nexport const confirmDiscardIfDirty = async (dirty: boolean | (() => boolean)): Promise<boolean> => {\n const hasChanges = typeof dirty === \"function\" ? dirty() : dirty;\n if (!hasChanges) return true;\n return Boolean(\n await prompts.confirm(resolveUiMessages().discardUnsavedChanges, {\n title: resolveUiMessages().unsavedChangesTitle,\n variant: \"danger\",\n confirmText: resolveUiMessages().discard,\n }),\n );\n};\n\nconst PanelDialogHeader = (props: PanelDialogHeaderProps): JSX.Element => {\n const messages = useUiMessages();\n return (\n <header class=\"k2b-panel-dialog__header\" data-surface={usePanelDialogSurface()} data-has-subtitle={Boolean(props.subtitle)}>\n <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n <div class=\"k2b-panel-dialog__heading\">\n <h2>{props.title}</h2>\n <Show when={props.subtitle}>\n <p>{props.subtitle}</p>\n </Show>\n </div>\n <Show when={props.actions}>\n <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n </Show>\n <Show when={props.close}>\n <button\n type=\"button\"\n class=\"k2b-dialog__close\"\n aria-label={props.closeLabel ?? messages().closeDialog}\n disabled={props.closeDisabled}\n onClick={props.close}\n >\n <i class=\"ti ti-x\" aria-hidden=\"true\" />\n </button>\n </Show>\n </header>\n );\n};\n\nconst PanelDialogBody = (props: PanelDialogBodyProps): JSX.Element => {\n let body: HTMLDivElement | undefined;\n createScrollFade(\n () => body,\n () => props.scrollFade !== false,\n );\n return (\n <div\n ref={body}\n class=\"k2b-panel-dialog__body\"\n data-scroll-preserve={props.scrollPreserveKey}\n data-surface={usePanelDialogSurface()}\n data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n >\n {props.children}\n </div>\n );\n};\n\nconst PanelDialogFooter = (props: PanelDialogFooterProps): JSX.Element => (\n <footer class=\"k2b-panel-dialog__footer\" data-surface={usePanelDialogSurface()}>\n {props.children}\n </footer>\n);\n\nconst PanelDialogSection = (props: PanelDialogSectionProps): JSX.Element => {\n const id = `k2b-panel-dialog-section-${createUniqueId()}`;\n const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n const open = () => !props.hideable || (props.open ?? internalOpen());\n let section: HTMLElement | undefined;\n let expand: HTMLButtonElement | undefined;\n let collapse: HTMLButtonElement | undefined;\n const toggle = (next: boolean) => {\n if (props.disabled) return;\n if (props.open === undefined) setInternalOpen(next);\n props.onOpenChange?.(next);\n };\n createEffect(() => {\n if (!props.hideable) return;\n const expanded = open();\n queueMicrotask(() => {\n if (expanded !== open()) return;\n const active = section?.ownerDocument.activeElement;\n if (expanded && active === expand) collapse?.focus();\n if (!expanded && active && active !== expand && section?.contains(active)) expand?.focus();\n });\n });\n\n return (\n <section\n ref={section}\n class=\"k2b-panel-dialog__section\"\n data-surface={usePanelDialogSurface()}\n data-hideable={props.hideable || undefined}\n data-open={props.hideable ? open() : undefined}\n aria-labelledby={open() ? id : `${id}-closed`}\n >\n <Show when={props.hideable}>\n <div hidden={open()}>\n <Button\n ref={expand}\n variant=\"ghost\"\n class=\"k2b-panel-dialog__section-summary\"\n disabled={props.disabled}\n aria-expanded={false}\n aria-controls={`${id}-body`}\n onClick={() => toggle(true)}\n >\n <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n <span class=\"k2b-panel-dialog__section-copy\">\n <span id={`${id}-closed`} class=\"k2b-panel-dialog__section-title\">\n {props.title}\n </span>\n <Show when={props.subtitle}>\n <span class=\"k2b-panel-dialog__section-subtitle\">{props.subtitle}</span>\n </Show>\n </span>\n <i class=\"ti ti-eye\" aria-hidden=\"true\" />\n </Button>\n </div>\n </Show>\n <header hidden={!open()}>\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-panel-dialog__section-icon\">\n <i class={icon()} aria-hidden=\"true\" />\n </span>\n )}\n </Show>\n <div>\n <h3 id={id}>{props.title}</h3>\n <Show when={props.subtitle}>\n <p>{props.subtitle}</p>\n </Show>\n </div>\n <Show when={props.actions}>\n <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n </Show>\n <Show when={props.hideable}>\n <Button\n ref={collapse}\n variant=\"ghost\"\n size=\"sm\"\n disabled={props.disabled}\n aria-labelledby={id}\n aria-expanded={true}\n aria-controls={`${id}-body`}\n onClick={() => toggle(false)}\n >\n <i class=\"ti ti-eye-off\" aria-hidden=\"true\" />\n </Button>\n </Show>\n </header>\n <div id={`${id}-body`} class=\"k2b-panel-dialog__section-body\" hidden={!open()}>\n {props.children}\n </div>\n </section>\n );\n};\n\nconst PanelDialogTabs = <T extends string>(props: PanelDialogTabsProps<T>): JSX.Element => {\n const messages = useUiMessages();\n return (\n <Tabs\n class=\"k2b-panel-dialog__tabs\"\n value={props.value}\n onValueChange={props.onValueChange}\n ariaLabel={props.ariaLabel ?? props.label ?? messages().dialogTabs}\n options={props.options}\n />\n );\n};\n\nconst PanelDialog = ((props: PanelDialogProps): JSX.Element => {\n const surface = props.surface ?? \"contained\";\n return (\n <PanelDialogSurfaceContext.Provider value={surface}>\n <div class=\"k2b-panel-dialog\" data-surface={surface}>\n {props.children}\n </div>\n </PanelDialogSurfaceContext.Provider>\n );\n}) as PanelDialogComponent;\n\nPanelDialog.Header = PanelDialogHeader;\nPanelDialog.Body = PanelDialogBody;\nPanelDialog.Footer = PanelDialogFooter;\nPanelDialog.Section = PanelDialogSection;\nPanelDialog.Tabs = PanelDialogTabs;\n\nexport default PanelDialog;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["layout/PanelDialog.tsx"],"sourcesContent":["import { createContext, createEffect, createSignal, createUniqueId, type JSX, Show, useContext } from \"solid-js\";\nimport { Button } from \"../actions/Button\";\nimport { Tabs } from \"../actions/Tabs\";\nimport type { OpenDialogOptions } from \"../feedback/dialog-core\";\nimport { prompts } from \"../feedback/prompts\";\nimport { resolveUiMessages, useUiMessages } from \"../intl/messages\";\nimport { createScrollFade } from \"./scroll-fade\";\n\nexport type PanelDialogSurface = \"contained\" | \"floating\";\n\nexport type PanelDialogProps = {\n children: JSX.Element;\n surface?: PanelDialogSurface;\n};\n\nexport type PanelDialogHeaderProps = {\n title: JSX.Element;\n subtitle?: JSX.Element;\n icon?: string;\n actions?: JSX.Element;\n close?: () => void;\n closeDisabled?: boolean;\n closeLabel?: string;\n};\n\nexport type PanelDialogBodyProps = {\n children: JSX.Element;\n scrollPreserveKey?: string;\n scrollFade?: boolean;\n};\n\nexport type PanelDialogFooterProps = {\n children: JSX.Element;\n};\n\nexport type PanelDialogSectionProps = {\n title: JSX.Element;\n subtitle?: JSX.Element;\n icon?: string;\n actions?: JSX.Element;\n children: JSX.Element;\n} & (\n | { hideable?: false; open?: never; defaultOpen?: never; onOpenChange?: never; disabled?: never }\n | { hideable: true; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; disabled?: boolean }\n);\n\nexport type PanelDialogTabOption<T extends string = string> = {\n value: T;\n label: JSX.Element;\n icon?: string;\n disabled?: boolean;\n};\n\nexport type PanelDialogTabsProps<T extends string = string> = {\n options: readonly PanelDialogTabOption<T>[];\n value: T | (() => T);\n onValueChange: (value: T) => void;\n ariaLabel?: string;\n label?: string;\n};\n\ntype PanelDialogComponent = ((props: PanelDialogProps) => JSX.Element) & {\n Header: (props: PanelDialogHeaderProps) => JSX.Element;\n Body: (props: PanelDialogBodyProps) => JSX.Element;\n Footer: (props: PanelDialogFooterProps) => JSX.Element;\n Section: (props: PanelDialogSectionProps) => JSX.Element;\n Tabs: <T extends string>(props: PanelDialogTabsProps<T>) => JSX.Element;\n};\n\nconst PanelDialogSurfaceContext = createContext<PanelDialogSurface>(\"contained\");\nconst usePanelDialogSurface = () => useContext(PanelDialogSurfaceContext);\n\nconst panelDialogBasePanelClass = \"k2b-dialog k2b-panel-dialog-frame\";\n\nexport const panelDialogPanelClass = `${panelDialogBasePanelClass} is-standard`;\nexport const panelDialogOptions = {\n panelClassName: panelDialogPanelClass,\n contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWidePanelClass = `${panelDialogBasePanelClass} is-wide`;\nexport const panelDialogWideOptions = {\n panelClassName: panelDialogWidePanelClass,\n contentClassName: \"k2b-panel-dialog-viewport\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogFixedPanelClass = `${panelDialogBasePanelClass} is-fixed`;\nexport const panelDialogFixedOptions = {\n panelClassName: panelDialogFixedPanelClass,\n contentClassName: \"k2b-panel-dialog-viewport is-fixed\",\n} satisfies OpenDialogOptions;\n\nexport const panelDialogWorkspacePanelClass = `${panelDialogBasePanelClass} is-workspace`;\nexport const panelDialogWorkspaceOptions = {\n panelClassName: panelDialogWorkspacePanelClass,\n contentClassName: \"k2b-panel-dialog-viewport is-workspace\",\n} satisfies OpenDialogOptions;\n\nexport const confirmDiscardIfDirty = async (dirty: boolean | (() => boolean)): Promise<boolean> => {\n const hasChanges = typeof dirty === \"function\" ? dirty() : dirty;\n if (!hasChanges) return true;\n return Boolean(\n await prompts.confirm(resolveUiMessages().discardUnsavedChanges, {\n title: resolveUiMessages().unsavedChangesTitle,\n variant: \"danger\",\n confirmText: resolveUiMessages().discard,\n }),\n );\n};\n\nconst PanelDialogHeader = (props: PanelDialogHeaderProps): JSX.Element => {\n const messages = useUiMessages();\n return (\n <header class=\"k2b-panel-dialog__header\" data-surface={usePanelDialogSurface()} data-has-subtitle={Boolean(props.subtitle)}>\n <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n <div class=\"k2b-panel-dialog__heading\">\n <h2>{props.title}</h2>\n <Show when={props.subtitle}>\n <p>{props.subtitle}</p>\n </Show>\n </div>\n <Show when={props.actions}>\n <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n </Show>\n <Show when={props.close}>\n <button\n type=\"button\"\n class=\"k2b-dialog__close\"\n aria-label={props.closeLabel ?? messages().closeDialog}\n disabled={props.closeDisabled}\n onClick={props.close}\n >\n <i class=\"ti ti-x\" aria-hidden=\"true\" />\n </button>\n </Show>\n </header>\n );\n};\n\nconst PanelDialogBody = (props: PanelDialogBodyProps): JSX.Element => {\n let body: HTMLDivElement | undefined;\n createScrollFade(\n () => body,\n () => props.scrollFade !== false,\n );\n return (\n <div\n ref={body}\n class=\"k2b-panel-dialog__body\"\n data-scroll-preserve={props.scrollPreserveKey}\n data-surface={usePanelDialogSurface()}\n data-scroll-fade-mode={props.scrollFade !== false ? \"both\" : undefined}\n >\n {props.children}\n </div>\n );\n};\n\nconst PanelDialogFooter = (props: PanelDialogFooterProps): JSX.Element => (\n <footer class=\"k2b-panel-dialog__footer\" data-surface={usePanelDialogSurface()}>\n {props.children}\n </footer>\n);\n\nconst PanelDialogSection = (props: PanelDialogSectionProps): JSX.Element => {\n const id = `k2b-panel-dialog-section-${createUniqueId()}`;\n const [internalOpen, setInternalOpen] = createSignal(props.defaultOpen ?? false);\n const open = () => !props.hideable || (props.open ?? internalOpen());\n let section: HTMLElement | undefined;\n let expand: HTMLButtonElement | undefined;\n let collapse: HTMLButtonElement | undefined;\n const toggle = (next: boolean) => {\n if (props.disabled) return;\n if (props.open === undefined) setInternalOpen(next);\n props.onOpenChange?.(next);\n };\n createEffect(() => {\n if (!props.hideable) return;\n const expanded = open();\n queueMicrotask(() => {\n if (expanded !== open()) return;\n const active = section?.ownerDocument.activeElement;\n if (expanded && active === expand) collapse?.focus();\n if (!expanded && active && active !== expand && section?.contains(active)) expand?.focus();\n });\n });\n\n return (\n <section\n ref={section}\n class=\"k2b-panel-dialog__section\"\n data-surface={usePanelDialogSurface()}\n data-hideable={props.hideable || undefined}\n data-open={props.hideable ? open() : undefined}\n aria-labelledby={open() ? id : `${id}-closed`}\n >\n <Show when={props.hideable}>\n <div hidden={open()}>\n <Button\n ref={expand}\n variant=\"ghost\"\n class=\"k2b-panel-dialog__section-summary\"\n disabled={props.disabled}\n aria-expanded={false}\n aria-controls={`${id}-body`}\n onClick={() => toggle(true)}\n >\n <Show when={props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>\n <span class=\"k2b-panel-dialog__section-copy\">\n <span id={`${id}-closed`} class=\"k2b-panel-dialog__section-title\">\n {props.title}\n </span>\n <Show when={props.subtitle}>\n <span class=\"k2b-panel-dialog__section-subtitle\">{props.subtitle}</span>\n </Show>\n </span>\n <i class=\"ti ti-eye\" aria-hidden=\"true\" />\n </Button>\n </div>\n </Show>\n <header hidden={!open()}>\n <Show when={props.icon}>\n {(icon) => (\n <span class=\"k2b-panel-dialog__section-icon\">\n <i class={icon()} aria-hidden=\"true\" />\n </span>\n )}\n </Show>\n <div>\n <h3 id={id}>{props.title}</h3>\n <Show when={props.subtitle}>\n <p class=\"k2b-panel-dialog__section-subtitle\">{props.subtitle}</p>\n </Show>\n </div>\n <Show when={props.actions}>\n <div class=\"k2b-panel-dialog__actions\">{props.actions}</div>\n </Show>\n <Show when={props.hideable}>\n <Button\n ref={collapse}\n variant=\"ghost\"\n size=\"sm\"\n disabled={props.disabled}\n aria-labelledby={id}\n aria-expanded={true}\n aria-controls={`${id}-body`}\n onClick={() => toggle(false)}\n >\n <i class=\"ti ti-eye-off\" aria-hidden=\"true\" />\n </Button>\n </Show>\n </header>\n <div id={`${id}-body`} class=\"k2b-panel-dialog__section-body\" hidden={!open()}>\n {props.children}\n </div>\n </section>\n );\n};\n\nconst PanelDialogTabs = <T extends string>(props: PanelDialogTabsProps<T>): JSX.Element => {\n const messages = useUiMessages();\n return (\n <Tabs\n class=\"k2b-panel-dialog__tabs\"\n value={props.value}\n onValueChange={props.onValueChange}\n ariaLabel={props.ariaLabel ?? props.label ?? messages().dialogTabs}\n options={props.options}\n />\n );\n};\n\nconst PanelDialog = ((props: PanelDialogProps): JSX.Element => {\n const surface = props.surface ?? \"contained\";\n return (\n <PanelDialogSurfaceContext.Provider value={surface}>\n <div class=\"k2b-panel-dialog\" data-surface={surface}>\n {props.children}\n </div>\n </PanelDialogSurfaceContext.Provider>\n );\n}) as PanelDialogComponent;\n\nPanelDialog.Header = PanelDialogHeader;\nPanelDialog.Body = PanelDialogBody;\nPanelDialog.Footer = PanelDialogFooter;\nPanelDialog.Section = PanelDialogSection;\nPanelDialog.Tabs = PanelDialogTabs;\n\nexport default PanelDialog;\n"],"mappings":"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","ignoreList":[]}
|