@public-ui/mcp 4.3.0-rc.7 → 4.3.0-rc.8
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/package.json +2 -2
- package/shared/sample-index.json +13 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/mcp",
|
|
3
|
-
"version": "4.3.0-rc.
|
|
3
|
+
"version": "4.3.0-rc.8",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"glob": "13.0.6",
|
|
49
49
|
"simple-git": "3.36.0",
|
|
50
50
|
"zod": "4.4.3",
|
|
51
|
-
"@public-ui/components": "4.3.0-rc.
|
|
51
|
+
"@public-ui/components": "4.3.0-rc.8"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@modelcontextprotocol/inspector": "2.0.0",
|
package/shared/sample-index.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"generatedAt": "2026-
|
|
3
|
+
"generatedAt": "2026-08-03T08:22:53.674Z",
|
|
4
4
|
"buildMode": "ci",
|
|
5
5
|
"counts": {
|
|
6
6
|
"total": 331,
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"totalScenarios": 19
|
|
11
11
|
},
|
|
12
12
|
"repo": {
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "76e607226eb00d2988528bc43bf039b59e3843d9",
|
|
14
14
|
"branch": "develop",
|
|
15
15
|
"repoUrl": "https://github.com/public-ui/kolibri"
|
|
16
16
|
}
|
|
@@ -685,7 +685,7 @@
|
|
|
685
685
|
"group": "button",
|
|
686
686
|
"name": "expert-slot",
|
|
687
687
|
"path": "packages/samples/react/src/components/button/expert-slot.tsx",
|
|
688
|
-
"code": "import { KolButton, KolHeading, KolIcon } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React
|
|
688
|
+
"code": "import { KolButton, KolHeading, KolIcon } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { SampleDescription } from '../SampleDescription';\n\nimport './expert-slot.tooltip.scss';\n\nconst KolTooltip = 'kol-tooltip-wc' as unknown as React.FC<{ _label: string }>;\n\nexport const ButtonExpertSlot: FC = () => {\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story demonstrates the expert slot feature of KolButton. The expert slot allows you to insert custom content into the button, providing advanced\n\t\t\t\t\tcustomization options beyond the standard label and icon properties.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Buttons with Expert Slot Content\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">I am more than just a button</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-kolibri\" _label=\"\" _variant=\"secondary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Custom content here</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _icons=\"kolicon-alert-warning\" _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Delete with custom text</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _label=\"\" _variant=\"danger\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<KolIcon _icons=\"kolicon-alert-warning\" _label=\"Delete with custom text\" slot=\"expert\" />\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolTooltip _label=\"Delete with custom text\" />\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Disabled Buttons with Expert Slot\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-house\" _label=\"\" _variant=\"primary\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Disabled expert slot</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t\t<KolButton _disabled _icons=\"kolicon-eye-closed\" _label=\"\" _variant=\"ghost\" _on={dummyEventHandler}>\n\t\t\t\t\t\t\t<span slot=\"expert\">Another disabled one</span>\n\t\t\t\t\t\t</KolButton>\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
689
689
|
"kind": "sample"
|
|
690
690
|
},
|
|
691
691
|
{
|
|
@@ -749,7 +749,7 @@
|
|
|
749
749
|
"group": "button",
|
|
750
750
|
"name": "variants",
|
|
751
751
|
"path": "packages/samples/react/src/components/button/variants.tsx",
|
|
752
|
-
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router
|
|
752
|
+
"code": "import { KolButton, KolHeading } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const ButtonVariants: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);\n\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis story showcases all available button variants for this theme. You can import <code>ButtonVariantsEnum</code> from your theme to always use the\n\t\t\t\t\tright variants.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"All theme exclusive button variants\" />\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn <KolButton _icons=\"kolicon-house\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn <KolButton _hideLabel _icons=\"kolicon-settings\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
753
753
|
"kind": "sample"
|
|
754
754
|
},
|
|
755
755
|
{
|
|
@@ -837,7 +837,7 @@
|
|
|
837
837
|
"group": "drawer",
|
|
838
838
|
"name": "basic",
|
|
839
839
|
"path": "packages/samples/react/src/components/drawer/basic.tsx",
|
|
840
|
-
"code": "import type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useSearchParams } from 'react-router
|
|
840
|
+
"code": "import type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport { DrawerRadioAlign } from './partials/align';\nexport const DrawerBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultAlign = searchParams.get('align') as AlignPropType;\n\tconst defaultCloser = searchParams.get('closer') === 'true';\n\tconst drawerElement = useRef<HTMLKolDrawerElement>(null);\n\n\tconst [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');\n\tconst [hasCloser, setHasCloser] = useState<boolean>(defaultCloser);\n\n\tuseEffect(() => {\n\t\tif (defaultAlign) {\n\t\t\tdrawerElement.current?.showModal();\n\t\t}\n\t}, [defaultAlign]);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />\n\n\t\t\t<KolInputCheckbox\n\t\t\t\t_label=\"Drawer has closer\"\n\t\t\t\tclassName=\"mb-4\"\n\t\t\t\t_checked={hasCloser}\n\t\t\t\t_on={{\n\t\t\t\t\tonInput: (_, value) => {\n\t\t\t\t\t\tsetHasCloser((value as null | boolean) === true);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolDrawer\n\t\t\t\t\tref={drawerElement}\n\t\t\t\t\t_label=\"I am a drawer\"\n\t\t\t\t\t_align={align}\n\t\t\t\t\t_hasCloser={hasCloser}\n\t\t\t\t\t_on={{ onClose: () => console.log('Drawer onClose triggered!'), onToggle: (open) => console.log('Drawer onToggle triggered!', open) }}\n\t\t\t\t>\n\t\t\t\t\t<div className={align === 'left' || align === 'right' ? 'drawer-content-vertical' : ''}>\n\t\t\t\t\t\t<p className=\"mt-0\">\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => drawerElement.current?.close() }} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolDrawer>\n\t\t\t\t<KolButton _label=\"Open drawer\" _on={{ onClick: () => drawerElement.current?.showModal() }} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
841
841
|
"kind": "sample"
|
|
842
842
|
},
|
|
843
843
|
{
|
|
@@ -853,7 +853,7 @@
|
|
|
853
853
|
"group": "drawer",
|
|
854
854
|
"name": "controlled",
|
|
855
855
|
"path": "packages/samples/react/src/components/drawer/controlled.tsx",
|
|
856
|
-
"code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { useSearchParams } from 'react-router
|
|
856
|
+
"code": "import type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolButton, KolDrawer } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport { DrawerRadioAlign } from './partials/align';\n\nexport const DrawerControlled: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultAlign = searchParams.get('align') as AlignPropType;\n\tconst [open, setOpen] = useState(false);\n\tconst [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');\n\treturn (\n\t\t<div>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows the KolDrawer controlled by the property <code>_open</code> instead of methods.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolDrawer _open={open} _align={align} _label=\"I'm a controlled drawer\" _on={{ onClose: () => setOpen(false) }}>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<p>Lorem ipsum dolor sit amet,</p>\n\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => setOpen(false) }} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolDrawer>\n\t\t\t\t<KolButton _label=\"Open drawer\" _on={{ onClick: () => setOpen(true) }} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n",
|
|
857
857
|
"kind": "sample"
|
|
858
858
|
},
|
|
859
859
|
{
|
|
@@ -941,7 +941,7 @@
|
|
|
941
941
|
"group": "icon",
|
|
942
942
|
"name": "font",
|
|
943
943
|
"path": "packages/samples/react/src/components/icon/font.tsx",
|
|
944
|
-
"code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router
|
|
944
|
+
"code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport { KolButton, KolIcon, KolInputText } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconFont: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst iconVariants = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariants') : []), [theme]);\n\tconst iconVariantsButton = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsButton') : []), [theme]);\n\tconst iconVariantsInput = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsInput') : []), [theme]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolIcon renders different icon fonts depending on your theme.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{!Array.isArray(iconVariants) || iconVariants.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for icons.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariants.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4\" key={element}>\n\t\t\t\t\t\t\t\t<KolIcon _label=\"\" _icons={element} />\n\t\t\t\t\t\t\t\t<span><KolIcon _icons='{element}' _label=\"\" /></span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{!Array.isArray(iconVariantsButton) || iconVariantsButton.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for icons in buttons.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariantsButton.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4 items-center\" key={element}>\n\t\t\t\t\t\t\t\t<KolButton _icons={element} _label=\"Button\" _variant=\"primary\" />\n\t\t\t\t\t\t\t\t<span><KolButton _icons='{element}' _label=\"Button\" _variant=\"primary\" /></span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-8 p-8\">\n\t\t\t\t{!Array.isArray(iconVariantsInput) || iconVariantsInput.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for icons in inputs.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariantsInput.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4 items-center\" key={element}>\n\t\t\t\t\t\t\t\t<KolInputText _icons={element} _label=\"Input with Icon\" />\n\t\t\t\t\t\t\t\t<span><KolInputText _icons='{element}' _label=\"Input with Icon\" /></span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
945
945
|
"kind": "sample"
|
|
946
946
|
},
|
|
947
947
|
{
|
|
@@ -1357,7 +1357,7 @@
|
|
|
1357
1357
|
"group": "link-button",
|
|
1358
1358
|
"name": "basic",
|
|
1359
1359
|
"path": "packages/samples/react/src/components/link-button/basic.tsx",
|
|
1360
|
-
"code": "import React, { useMemo } from 'react';\n\nimport { KolLinkButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useSearchParams } from 'react-router
|
|
1360
|
+
"code": "import React, { useMemo } from 'react';\n\nimport { KolLinkButton } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { useToasterService } from '../../hooks/useToasterService';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkButtonBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);\n\n\tconst { dummyClickEventHandler } = useToasterService();\n\n\tconst dummyEventHandler = {\n\t\tonClick: dummyClickEventHandler,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolLinkButton renders a link that looks like a button. The sample shows the different theme exclusive styling variants.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<KolLinkButton _href=\"#/back-page\" _icons=\"kolicon-house\" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"flex flex-wrap gap-4 items-center\">\n\t\t\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<KolLinkButton\n\t\t\t\t\t\t\t\t\t\t_href=\"#/back-page\"\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-settings\"\n\t\t\t\t\t\t\t\t\t\t_label={`${element}`}\n\t\t\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t\t\t\tkey={element}\n\t\t\t\t\t\t\t\t\t\t_on={dummyEventHandler}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1361
1361
|
"kind": "sample"
|
|
1362
1362
|
},
|
|
1363
1363
|
{
|
|
@@ -1405,7 +1405,7 @@
|
|
|
1405
1405
|
"group": "link",
|
|
1406
1406
|
"name": "link-variant",
|
|
1407
1407
|
"path": "packages/samples/react/src/components/link/variant.tsx",
|
|
1408
|
-
"code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router
|
|
1408
|
+
"code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const LinkVariant: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'linkVariants') : []), [theme]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the theme specific variants of KolLink.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Normal link without a variant\" />\n\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t) : (\n\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\treturn <KolLink _href=\"#/back-page\" _label={`Theme exclusive variant: ${element}`} _variant={element} key={element} />;\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1409
1409
|
"kind": "sample"
|
|
1410
1410
|
},
|
|
1411
1411
|
{
|
|
@@ -1421,7 +1421,7 @@
|
|
|
1421
1421
|
"group": "link",
|
|
1422
1422
|
"name": "react-router",
|
|
1423
1423
|
"path": "packages/samples/react/src/components/link/link-react-router.tsx",
|
|
1424
|
-
"code": "import { KolLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useNavigate } from 'react-router
|
|
1424
|
+
"code": "import { KolLink } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { useNavigate } from 'react-router';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const LinkReactRouter: FC = () => {\n\tconst navigate = useNavigate();\n\n\tconst on = {\n\t\tonClick: (event: Event) => {\n\t\t\tevent.preventDefault();\n\t\t\tnavigate('/back-page');\n\t\t},\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample shows how KolLink works with react-router. Primary click uses preventDefault() and navigate(...), while right click open in new tab still\n\t\t\t\t\tfollows _href. Make sure _href and navigate(...) point to the same path.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolLink _href=\"/back-page\" _inline={false} _label=\"Go to overview\" _on={on} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1425
1425
|
"kind": "sample"
|
|
1426
1426
|
},
|
|
1427
1427
|
{
|
|
@@ -2037,7 +2037,7 @@
|
|
|
2037
2037
|
"group": "toast",
|
|
2038
2038
|
"name": "basic",
|
|
2039
2039
|
"path": "packages/samples/react/src/components/toast/basic.tsx",
|
|
2040
|
-
"code": "import React, { useEffect } from 'react';\nimport { useSearchParams } from 'react-router
|
|
2040
|
+
"code": "import React, { useEffect } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolAlert, KolButton, KolLink } from '@public-ui/react-v19';\n\nimport { getRoot } from '../../shares/react-roots';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\n/**\n * @deprecated For more information, please refer to the documentation.\n */\nexport const ToastBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultType = searchParams.get('type') as AlertTypePropType;\n\tconst toaster = ToasterService.getInstance(document);\n\tconst handleButtonClickSimple = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t\tonClose: () => {\n\t\t\t\tconsole.log('Simple toast has been closed.');\n\t\t\t},\n\t\t});\n\t};\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${defaultType}'`,\n\t\t\t\ttype: defaultType,\n\t\t\t});\n\t\t}\n\t}, [defaultType, toaster]);\n\n\tconst handleButtonClickComplex = () => {\n\t\tvoid toaster.enqueue({\n\t\t\trender: (element: HTMLElement, { close }) => {\n\t\t\t\tgetRoot(element).render(\n\t\t\t\t\t<>\n\t\t\t\t\t\t<KolButton\n\t\t\t\t\t\t\t_label={'Hello World from Toast!'}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tconsole.log('Toast Button clicked!');\n\t\t\t\t\t\t\t\t\tclose();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</>,\n\t\t\t\t);\n\t\t\t},\n\t\t\tlabel: `Initial Toast`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleButtonClickOpenAndClose = async () => {\n\t\tconst close = await toaster.enqueue({\n\t\t\tdescription: 'I will disappear in two seconds...',\n\t\t\tlabel: `Good Bye`,\n\t\t\ttype: 'warning',\n\t\t});\n\n\t\tif (close) {\n\t\t\tsetTimeout(close, 2000);\n\t\t}\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<KolAlert _label=\"Component is DEPRECATED\" _type=\"error\" _variant=\"card\" className=\"header-alert\">\n\t\t\t\tFor more information, please refer \n\t\t\t\t<KolLink _href=\"https://public-ui.github.io/en/docs/components/toaster\" _target=\"_blank\" _label=\"to the documentation\" />.\n\t\t\t</KolAlert>\n\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample demonstrates the toast service with all its options.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label=\"Show simple toast\" _on={{ onClick: handleButtonClickSimple }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show complex toast\" _on={{ onClick: handleButtonClickComplex }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Show toast and close after 2 seconds\" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
|
|
2041
2041
|
"kind": "sample"
|
|
2042
2042
|
},
|
|
2043
2043
|
{
|
|
@@ -2045,7 +2045,7 @@
|
|
|
2045
2045
|
"group": "toast",
|
|
2046
2046
|
"name": "configurator",
|
|
2047
2047
|
"path": "packages/samples/react/src/components/toast/configurator.tsx",
|
|
2048
|
-
"code": "import React, { useEffect, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router
|
|
2048
|
+
"code": "import React, { useEffect, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router';\n\nimport type { AlertTypePropType } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { KolAlert, KolButton, KolInputRadio, KolLink } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nconst toastTypes = ['default', 'info', 'success', 'warning', 'error'] as const;\nconst toastTypeOptions = toastTypes.map((type) => ({\n\tlabel: type,\n\tvalue: type,\n}));\n\nconst isAlertType = (value: unknown): value is AlertTypePropType => {\n\treturn typeof value === 'string' && toastTypes.includes(value as AlertTypePropType);\n};\n\n/**\n * @deprecated For more information, please refer to the documentation.\n */\nexport const ToastConfigurator: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst queryType = searchParams.get('type');\n\tconst defaultType = isAlertType(queryType) ? queryType : undefined;\n\tconst [selectedType, setSelectedType] = useState<AlertTypePropType>(() => defaultType ?? 'default');\n\tconst toaster = useMemo<ToasterService>(() => ToasterService.getInstance(document), []);\n\n\tuseEffect(() => {\n\t\ttoastTypes.forEach((type) => {\n\t\t\tvoid toaster.enqueue({\n\t\t\t\tdescription: 'Toasty',\n\t\t\t\tlabel: `Toast with type '${type}'`,\n\t\t\t\ttype,\n\t\t\t});\n\t\t});\n\n\t\treturn () => {\n\t\t\ttoaster.closeAll();\n\t\t};\n\t}, [toaster]);\n\n\tuseEffect(() => {\n\t\tif (defaultType) {\n\t\t\tsetSelectedType(defaultType);\n\t\t}\n\t}, [defaultType]);\n\n\tconst handleTypeChange = (_: Event, value: unknown) => {\n\t\tif (isAlertType(value)) {\n\t\t\tsetSelectedType(value);\n\t\t}\n\t};\n\n\tconst handleConfiguredToast = () => {\n\t\tvoid toaster.enqueue({\n\t\t\tdescription: 'Toasty',\n\t\t\tlabel: `Toast with type '${selectedType}'`,\n\t\t\ttype: selectedType,\n\t\t});\n\t};\n\n\tconst closeAll = () => {\n\t\ttoaster.closeAll();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<KolAlert _label=\"Component is DEPRECATED\" _type=\"error\" _variant=\"card\" className=\"header-alert\">\n\t\t\t\tFor more information, please refer \n\t\t\t\t<KolLink _href=\"https://public-ui.github.io/en/docs/components/toaster\" _target=\"_blank\" _label=\"to the documentation\"></KolLink>.\n\t\t\t</KolAlert>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card\n\t\t\t\t\tvariant.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolInputRadio _orientation=\"horizontal\" _label=\"Toast type\" _value={selectedType} _options={toastTypeOptions} _on={{ onChange: handleTypeChange }} />\n\t\t\t\t<div className=\"flex flex-wrap gap-2\">\n\t\t\t\t\t<KolButton _label={`Open ${selectedType} toast`} _on={{ onClick: handleConfiguredToast }}></KolButton>\n\t\t\t\t\t<KolButton _label=\"Close all toasts\" _on={{ onClick: closeAll }}></KolButton>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
|
|
2049
2049
|
"kind": "sample"
|
|
2050
2050
|
},
|
|
2051
2051
|
{
|
|
@@ -2141,7 +2141,7 @@
|
|
|
2141
2141
|
"group": "scenarios",
|
|
2142
2142
|
"name": "focus-elements",
|
|
2143
2143
|
"path": "packages/samples/react/src/scenarios/focus-elements.tsx",
|
|
2144
|
-
"code": "import type { FocusableElement } from '@public-ui/components';\nimport {\n\tKolAccordion,\n\tKolAlert,\n\tKolBadge,\n\tKolButton,\n\tKolButtonLink,\n\tKolCombobox,\n\tKolDetails,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolPopoverButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolSkipNav,\n\tKolSplitButton,\n\tKolTabs,\n\tKolTextarea,\n\tKolToolbar,\n\tKolTree,\n\tKolTreeItem,\n} from '@public-ui/react-v19';\nimport type { FC, ForwardRefRenderFunction } from 'react';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useSearchParams } from 'react-router
|
|
2144
|
+
"code": "import type { FocusableElement } from '@public-ui/components';\nimport {\n\tKolAccordion,\n\tKolAlert,\n\tKolBadge,\n\tKolButton,\n\tKolButtonLink,\n\tKolCombobox,\n\tKolDetails,\n\tKolHeading,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolPopoverButton,\n\tKolSelect,\n\tKolSingleSelect,\n\tKolSkipNav,\n\tKolSplitButton,\n\tKolTabs,\n\tKolTextarea,\n\tKolToolbar,\n\tKolTree,\n\tKolTreeItem,\n} from '@public-ui/react-v19';\nimport type { FC, ForwardRefRenderFunction } from 'react';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useSearchParams } from 'react-router';\nimport { SampleDescription } from '../components/SampleDescription';\n\nconst getFocusElements = () => {\n\t// Blocklist: Components excluded from focus testing (breadcrumb, dialog, drawer, form, modal, nav, pagination)\n\t// These components have special behaviors (navigation, modals, forms, pagination) that conflict with automated focus tests.\n\t// Note: popover-based components (e.g. popoverButton, splitButton) are included since their primary button element is focusable.\n\tconst focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();\n\tfocusElements.set('accordion', (_, ref) => <KolAccordion className=\"w-full\" _label=\"Accordion here\" ref={ref} />);\n\tfocusElements.set('badge', (_, ref) => (\n\t\t<KolBadge\n\t\t\tclassName=\"w-full\"\n\t\t\t_label=\"Badge with button\"\n\t\t\t_smartButton={{ _label: 'Action', _icons: 'kolicon-house', _on: { onClick: () => {} } }}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('button', (_, ref) => <KolButton _label=\"Button here\" ref={ref} />);\n\tfocusElements.set('buttonLink', (_, ref) => <KolButtonLink _label=\"ButtonLink here\" ref={ref} />);\n\tfocusElements.set('combobox', (_, ref) => <KolCombobox className=\"w-full\" _label=\"KolCombobox here\" _suggestions={[]} ref={ref} />);\n\tfocusElements.set('details', (_, ref) => (\n\t\t<KolDetails className=\"w-full\" _label=\"Details here\" ref={ref}>\n\t\t\tdetailed details\n\t\t</KolDetails>\n\t));\n\tfocusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox className=\"w-full\" _name=\"checkbox\" _label=\"Checkbox\" ref={ref} />);\n\tfocusElements.set('inputColor', (_, ref) => <KolInputColor className=\"w-full\" _name=\"color\" _label=\"Color\" ref={ref} />);\n\tfocusElements.set('inputDate', (_, ref) => <KolInputDate className=\"w-full\" _name=\"date\" _label=\"Date\" ref={ref} />);\n\tfocusElements.set('inputEmail', (_, ref) => <KolInputEmail className=\"w-full\" _name=\"email\" _label=\"Email\" ref={ref} />);\n\tfocusElements.set('inputFile', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"File\" ref={ref} />);\n\tfocusElements.set('inputFileMultiple', (_, ref) => <KolInputFile className=\"w-full\" _name=\"file\" _label=\"Files (multiple)\" _multiple ref={ref} />);\n\tfocusElements.set('inputNumber', (_, ref) => <KolInputNumber className=\"w-full\" _name=\"number\" _label=\"Number\" ref={ref} />);\n\tfocusElements.set('inputPassword', (_, ref) => <KolInputPassword className=\"w-full\" _name=\"password\" _label=\"Password\" ref={ref} />);\n\tfocusElements.set('inputRadio', (_, ref) => (\n\t\t<KolInputRadio\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"radio\"\n\t\t\t_label=\"Radio\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_value=\"A\"\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('inputRange', (_, ref) => <KolInputRange className=\"w-full\" _name=\"range\" _label=\"Range\" ref={ref} />);\n\tfocusElements.set('inputText', (_, ref) => <KolInputText className=\"w-full\" _name=\"text\" _label=\"Text\" ref={ref} />);\n\tfocusElements.set('link', (_, ref) => <KolLink className=\"w-full\" _label=\"Link here\" _href=\"#\" ref={ref} />);\n\tfocusElements.set('linkButton', (_, ref) => (\n\t\t<div>\n\t\t\t<KolLinkButton _label=\"LinkButton here\" _href=\"#\" ref={ref} />\n\t\t</div>\n\t));\n\tfocusElements.set('popoverButton', (_, ref) => <KolPopoverButton _label=\"PopoverButton here\" ref={ref} />);\n\tfocusElements.set('select', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('selectMultiple', (_, ref) => (\n\t\t<KolSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"select\"\n\t\t\t_label=\"Select (multiple)\"\n\t\t\t_multiple\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\t_rows={2}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('singleSelect', (_, ref) => (\n\t\t<KolSingleSelect\n\t\t\tclassName=\"w-full\"\n\t\t\t_name=\"singleSelect\"\n\t\t\t_label=\"Single Select\"\n\t\t\t_options={[\n\t\t\t\t{ label: 'Option A', value: 'A' },\n\t\t\t\t{ label: 'Option B', value: 'B' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('skipNav', (_, ref) => (\n\t\t<KolSkipNav\n\t\t\t_label=\"SkipNav\"\n\t\t\t_links={[\n\t\t\t\t{\n\t\t\t\t\t_label: 'Skip to main content',\n\t\t\t\t\t_href: '#main',\n\t\t\t\t},\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('splitButton', (_, ref) => <KolSplitButton _label=\"SplitButton here\" ref={ref} />);\n\tfocusElements.set('tabs', (_, ref) => (\n\t\t<KolTabs className=\"w-full\" _label=\"Tabs here\" _tabs={[{ _label: 'Tab 1' }, { _label: 'Tab 2' }, { _label: 'Tab 3' }]} ref={ref}>\n\t\t\tTab content\n\t\t</KolTabs>\n\t));\n\tfocusElements.set('textarea', (_, ref) => <KolTextarea className=\"w-full\" _name=\"textarea\" _label=\"Textarea\" _rows={5} ref={ref} />);\n\tfocusElements.set('toolbar', (_, ref) => (\n\t\t<KolToolbar\n\t\t\tclassName=\"w-full\"\n\t\t\t_label=\"Toolbar here\"\n\t\t\t_items={[\n\t\t\t\t{ type: 'button', _label: 'Action 1' },\n\t\t\t\t{ type: 'button', _label: 'Action 2' },\n\t\t\t]}\n\t\t\tref={ref}\n\t\t/>\n\t));\n\tfocusElements.set('tree', (_, ref) => (\n\t\t<KolTree className=\"w-full\" _label=\"Tree here\" ref={ref}>\n\t\t\t<KolTreeItem _label=\"1 Home\" _href=\"#\" />\n\t\t\t<KolTreeItem _label=\"2 Products\" _href=\"#\" _open>\n\t\t\t\t<KolTreeItem _label=\"2.1 Electronics\" _href=\"#\" />\n\t\t\t\t<KolTreeItem _label=\"2.2 Furniture\" _href=\"#\" />\n\t\t\t</KolTreeItem>\n\t\t\t<KolTreeItem _label=\"3 Services\" _href=\"#\" />\n\t\t</KolTree>\n\t));\n\n\treturn focusElements;\n};\n\ntype FallbackProps = {\n\tinvalidComponent?: boolean;\n};\nconst Fallback = (props: FallbackProps) => {\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst componentNames = [...focusElements.keys()].map((key) => key);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis sample serves for automated tests of the focus state for input components. When loading one of the examples linked below, focus will be set on\n\t\t\t\t\tthe element initially. When testing manually, you may have to reload the page after opening an example.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t{props.invalidComponent && (\n\t\t\t\t<KolAlert _type=\"error\" _variant=\"card\">\n\t\t\t\t\tComponent not found.\n\t\t\t\t</KolAlert>\n\t\t\t)}\n\n\t\t\t<KolHeading _level={2} _label=\"Focus Test Cases\" />\n\t\t\t<ul>\n\t\t\t\t{componentNames.map((componentName) => (\n\t\t\t\t\t<li key={componentName}>\n\t\t\t\t\t\t<KolLink _label={componentName} _href={`#/scenarios/focus-elements?component=${componentName}`} />\n\t\t\t\t\t</li>\n\t\t\t\t))}\n\t\t\t</ul>\n\t\t</>\n\t);\n};\n\nexport const FocusElements: FC = () => {\n\tconst focusElements = useMemo(() => getFocusElements(), []);\n\tconst [searchParams] = useSearchParams();\n\tconst componentName = searchParams.get('component');\n\n\tconst Component = componentName ? focusElements.get(componentName) : undefined;\n\n\t// Memoize the Element component type to prevent unnecessary unmount/remount on re-renders.\n\tconst Element = useMemo(() => (Component ? forwardRef(Component) : null), [Component]);\n\n\t// Callback ref fires whenever a component instance mounts, ensuring focus is set on each mount.\n\tconst focusRef = useCallback(\n\t\t(instance: FocusableElement | null) => {\n\t\t\tif (instance) {\n\t\t\t\tvoid instance.focus();\n\t\t\t}\n\t\t},\n\t\t[componentName],\n\t);\n\n\tif (componentName) {\n\t\tif (!Element) {\n\t\t\treturn <Fallback invalidComponent />;\n\t\t}\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<Element ref={focusRef} />\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn <Fallback />;\n\t}\n};\n",
|
|
2145
2145
|
"kind": "scenario"
|
|
2146
2146
|
},
|
|
2147
2147
|
{
|