@wallarm-org/design-system 2.1.3 → 2.2.0-rc-fix-overflow-list-api.2
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/components/OverflowList/OverflowList.d.ts +18 -9
- package/dist/components/OverflowList/OverflowList.js +193 -204
- package/dist/components/OverflowList/OverflowListContext.d.ts +25 -0
- package/dist/components/OverflowList/OverflowListContext.js +12 -0
- package/dist/components/OverflowList/OverflowListMore.d.ts +17 -0
- package/dist/components/OverflowList/OverflowListMore.js +85 -0
- package/dist/components/OverflowList/OverflowListMoreContent.d.ts +7 -0
- package/dist/components/OverflowList/OverflowListMoreContent.js +60 -0
- package/dist/components/OverflowList/OverflowListMoreCount.d.ts +8 -0
- package/dist/components/OverflowList/OverflowListMoreCount.js +41 -0
- package/dist/components/OverflowList/OverflowListMoreHeader.d.ts +7 -0
- package/dist/components/OverflowList/OverflowListMoreHeader.js +36 -0
- package/dist/components/OverflowList/OverflowListMoreItems.d.ts +18 -0
- package/dist/components/OverflowList/OverflowListMoreItems.js +105 -0
- package/dist/components/OverflowList/OverflowListMoreTrigger.d.ts +10 -0
- package/dist/components/OverflowList/OverflowListMoreTrigger.js +143 -0
- package/dist/components/OverflowList/classes.d.ts +3 -0
- package/dist/components/OverflowList/classes.js +13 -0
- package/dist/components/OverflowList/index.d.ts +8 -1
- package/dist/components/OverflowList/index.js +7 -0
- package/dist/components/OverflowList/useOverflowListMore.d.ts +12 -0
- package/dist/components/OverflowList/useOverflowListMore.js +22 -0
- package/dist/components/Popover/index.d.ts +1 -1
- package/dist/components/Select/SelectInput/SelectInputOverflowRenderer.d.ts +1 -3
- package/dist/components/Select/SelectInput/SelectInputOverflowRenderer.js +16 -26
- package/dist/metadata/components.json +2049 -506
- package/package.json +1 -1
- package/dist/components/OverflowList/DefaultOverflowRenderer.d.ts +0 -17
- package/dist/components/OverflowList/DefaultOverflowRenderer.js +0 -179
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.1.
|
|
3
|
-
"generatedAt": "2026-10-
|
|
2
|
+
"version": "2.1.3",
|
|
3
|
+
"generatedAt": "2026-10-08T09:30:41.343Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -7978,12 +7978,12 @@
|
|
|
7978
7978
|
},
|
|
7979
7979
|
{
|
|
7980
7980
|
"name": "Composition",
|
|
7981
|
-
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n
|
|
7981
|
+
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Sessions</AttributeLabel>\n <AttributeValue>\n <Text size='sm'>3 sessions</Text>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={[\n 'artem@acme.com',\n 'uxd@acme.com',\n 'ops@acme.com',\n 'security@acme.com',\n 'admin@acme.com',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <IpList>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>AWS</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='DE' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>GCP</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='NL' />\n <IpAddress>10.0.0.1</IpAddress>\n </Ip>\n <Ip>\n <IpCountry code='JP' />\n <IpAddress>192.168.1.1</IpAddress>\n </Ip>\n </IpList>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Source IP</AttributeLabel>\n <AttributeValue>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Created at</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Documentation</AttributeLabel>\n <AttributeValue>\n <Link href='#' size='md'>\n View full report\n </Link>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Payload (inline)</AttributeLabel>\n <AttributeValue>\n <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Payload (code)</AttributeLabel>\n <AttributeValue>\n <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n </AttributeValue>\n </Attribute>\n </div>\n)",
|
|
7982
7982
|
"description": "The display components sanctioned inside a value — `Badge`, `FormatDateTime`,\n`OverflowList` of `Tag`s, `Ip` and `IpList`, `Link`, `InlineCodeSnippet`, `Code` —\neach formatting the data itself rather than receiving a pre-built string."
|
|
7983
7983
|
},
|
|
7984
7984
|
{
|
|
7985
7985
|
"name": "WithActions",
|
|
7986
|
-
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <AttributeActions data-testid='attribute-with-actions'>\n <AttributeActionsTarget>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <OverflowList\n className='gap-4'\n items={[\n 'XSS',\n 'BOLA',\n 'SQL Injection',\n 'Scanner',\n 'CSRF',\n 'XXE',\n 'RCE',\n 'LFI',\n 'IDOR',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n
|
|
7986
|
+
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-16 w-[874px]'>\n <Attribute>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <AttributeActions data-testid='attribute-with-actions'>\n <AttributeActionsTarget>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <OverflowList\n className='gap-4'\n items={[\n 'XSS',\n 'BOLA',\n 'SQL Injection',\n 'Scanner',\n 'CSRF',\n 'XXE',\n 'RCE',\n 'LFI',\n 'IDOR',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Sessions</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Text size='sm'>3 sessions</Text>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <OverflowList\n className='gap-4'\n items={[\n 'artem@acme.com',\n 'uxd@acme.com',\n 'ops@acme.com',\n 'security@acme.com',\n 'admin@acme.com',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <IpList>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>AWS</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='DE' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>GCP</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='NL' />\n <IpAddress>10.0.0.1</IpAddress>\n </Ip>\n <Ip>\n <IpCountry code='JP' />\n <IpAddress>192.168.1.1</IpAddress>\n </Ip>\n </IpList>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Source IP</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Created at</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <FormatDateTime value='2026-04-02T14:03:00Z' format='datetime' />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Documentation</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Link href='#' size='md'>\n View full report\n </Link>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Payload (inline)</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <InlineCodeSnippet code='{ \"action\": \"login\", \"user_id\": 42 }' size='sm' />\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n\n <Attribute>\n <AttributeLabel>Payload (code)</AttributeLabel>\n <AttributeValue>\n <AttributeActions>\n <AttributeActionsTarget>\n <Code size='s'>{'{ \"action\": \"login\", \"user_id\": 42 }'}</Code>\n </AttributeActionsTarget>\n {renderActionsItems()}\n </AttributeActions>\n </AttributeValue>\n </Attribute>\n </div>\n)",
|
|
7987
7987
|
"description": "`AttributeActions` turns the value into a `DropdownMenu` trigger: the row picks up\na hover surface and the menu carries the actions that belong to that one value."
|
|
7988
7988
|
},
|
|
7989
7989
|
{
|
|
@@ -7998,7 +7998,7 @@
|
|
|
7998
7998
|
},
|
|
7999
7999
|
{
|
|
8000
8000
|
"name": "HorizontalComposition",
|
|
8001
|
-
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-6 w-[874px]'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n
|
|
8001
|
+
"code": "() => (\n <div className='grid grid-cols-2 gap-x-8 gap-y-6 w-[874px]'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>Status</AttributeLabel>\n <AttributeValue>\n <Badge color='red' variant='dotted'>\n Blocked\n </Badge>\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>First seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2026-04-03T10:15:00Z' format='relative' />\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Attack type</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={['XSS', 'BOLA', 'SQL Injection', 'Scanner', 'CSRF', 'XXE', 'RCE', 'LFI', 'IDOR']}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Last seen</AttributeLabel>\n <AttributeValue>\n <FormatDateTime value='2025-04-02T14:03:00Z' format='date' />\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Sessions</AttributeLabel>\n <AttributeValue>\n <Text size='sm'>3 sessions</Text>\n </AttributeValue>\n </Attribute>\n\n <Attribute orientation='horizontal'>\n <AttributeLabel>Users</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={[\n 'artem@acme.com',\n 'uxd@acme.com',\n 'ops@acme.com',\n 'security@acme.com',\n 'admin@acme.com',\n ]}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </AttributeValue>\n </Attribute>\n\n <div className='col-span-2'>\n <Attribute orientation='horizontal'>\n <AttributeLabel>IPs</AttributeLabel>\n <AttributeValue>\n <IpList type='horizontal'>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>142.198.167.52</IpAddress>\n <IpProvider>Azure</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='US' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>AWS</IpProvider>\n </Ip>\n <Ip>\n <IpCountry code='DE' />\n <IpAddress>34.74.73.20</IpAddress>\n <IpProvider>GCP</IpProvider>\n </Ip>\n </IpList>\n </AttributeValue>\n </Attribute>\n </div>\n </div>\n)",
|
|
8002
8002
|
"description": "The same value components in the horizontal layout, where a wide one such as\n`IpList type='horizontal'` needs its row to span both columns."
|
|
8003
8003
|
},
|
|
8004
8004
|
{
|
|
@@ -29510,7 +29510,7 @@
|
|
|
29510
29510
|
},
|
|
29511
29511
|
{
|
|
29512
29512
|
"name": "ResizableWithOverflowList",
|
|
29513
|
-
"code": "() => {\n const [open, setOpen] = useState(false);\n\n return (\n <Drawer width={480} open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant='outline' color='neutral'>\n Open Resizable Drawer with OverflowList\n </Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerResizeHandle />\n <DrawerHeader>\n <DrawerTitle>Resizable Drawer with OverflowList</DrawerTitle>\n </DrawerHeader>\n <DrawerBody>\n <p className='mb-16'>Drag the left edge — the tag list reflows live.</p>\n <Attribute>\n <AttributeLabel>Attack types</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={DRAWER_TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n
|
|
29513
|
+
"code": "() => {\n const [open, setOpen] = useState(false);\n\n return (\n <Drawer width={480} open={open} onOpenChange={setOpen}>\n <DrawerTrigger asChild>\n <Button variant='outline' color='neutral'>\n Open Resizable Drawer with OverflowList\n </Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerResizeHandle />\n <DrawerHeader>\n <DrawerTitle>Resizable Drawer with OverflowList</DrawerTitle>\n </DrawerHeader>\n <DrawerBody>\n <p className='mb-16'>Drag the left edge — the tag list reflows live.</p>\n <Attribute>\n <AttributeLabel>Attack types</AttributeLabel>\n <AttributeValue>\n <OverflowList\n className='gap-4'\n items={DRAWER_TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </AttributeValue>\n </Attribute>\n </DrawerBody>\n </DrawerContent>\n </Drawer>\n );\n}",
|
|
29514
29514
|
"description": "Resizing with content that reflows, which is the case worth testing: the panel is only useful\nat its new width if what is inside adapts."
|
|
29515
29515
|
},
|
|
29516
29516
|
{
|
|
@@ -50438,7 +50438,7 @@
|
|
|
50438
50438
|
},
|
|
50439
50439
|
{
|
|
50440
50440
|
"name": "TagsEditor",
|
|
50441
|
-
"code": "args => {\n const [tags, setTags] = useState<string[]>(['production', 'critical']);\n return (\n <div className='w-[320px]'>\n <Attribute>\n <AttributeLabel>Tags</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n value={tags}\n onValueCommit={v => setTags(v as string[])}\n data-testid='tags'\n >\n <InlineEditPreview>\n <InlineEditPreviewValue>\n <OverflowList\n className='gap-4'\n items={tags}\n itemRenderer={tag => <Tag key={tag}>{tag}</Tag>}\n
|
|
50441
|
+
"code": "args => {\n const [tags, setTags] = useState<string[]>(['production', 'critical']);\n return (\n <div className='w-[320px]'>\n <Attribute>\n <AttributeLabel>Tags</AttributeLabel>\n <AttributeValue>\n <InlineEdit\n {...args}\n value={tags}\n onValueCommit={v => setTags(v as string[])}\n data-testid='tags'\n >\n <InlineEditPreview>\n <InlineEditPreviewValue>\n <OverflowList\n className='gap-4'\n items={tags}\n itemRenderer={tag => <Tag key={tag}>{tag}</Tag>}\n />\n </InlineEditPreviewValue>\n <InlineEditPreviewIcon>\n <ChevronDown size='md' />\n </InlineEditPreviewIcon>\n </InlineEditPreview>\n <InlineEditControl>\n <InlineEditSelect items={tagItems} multiple>\n <SelectInputTrigger />\n <SelectPositioner>\n <SelectContent>{renderSelectOptions(tagItems)}</SelectContent>\n </SelectPositioner>\n </InlineEditSelect>\n </InlineEditControl>\n </InlineEdit>\n </AttributeValue>\n </Attribute>\n </div>\n );\n}",
|
|
50442
50442
|
"description": "A multi-select whose committed value reads as `Tag` chips, which suits a list the reader\nscans rather than one they read as a sentence."
|
|
50443
50443
|
},
|
|
50444
50444
|
{
|
|
@@ -61026,7 +61026,8 @@
|
|
|
61026
61026
|
{
|
|
61027
61027
|
"name": "items",
|
|
61028
61028
|
"type": "T[]",
|
|
61029
|
-
"required": true
|
|
61029
|
+
"required": true,
|
|
61030
|
+
"description": "Measurements are cached by array identity — keep it referentially stable."
|
|
61030
61031
|
},
|
|
61031
61032
|
{
|
|
61032
61033
|
"name": "itemRenderer",
|
|
@@ -61035,33 +61036,15 @@
|
|
|
61035
61036
|
},
|
|
61036
61037
|
{
|
|
61037
61038
|
"name": "overflowRenderer",
|
|
61038
|
-
"type": "
|
|
61039
|
-
"required": false
|
|
61040
|
-
|
|
61041
|
-
{
|
|
61042
|
-
"name": "overflowHeaderLabel",
|
|
61043
|
-
"type": "string | undefined",
|
|
61044
|
-
"required": false
|
|
61045
|
-
},
|
|
61046
|
-
{
|
|
61047
|
-
"name": "showAll",
|
|
61048
|
-
"type": "boolean | undefined",
|
|
61049
|
-
"required": false
|
|
61050
|
-
},
|
|
61051
|
-
{
|
|
61052
|
-
"name": "overlayOrigin",
|
|
61053
|
-
"type": "boolean | undefined",
|
|
61054
|
-
"required": false
|
|
61055
|
-
},
|
|
61056
|
-
{
|
|
61057
|
-
"name": "dimVisibleItems",
|
|
61058
|
-
"type": "boolean | undefined",
|
|
61059
|
-
"required": false
|
|
61039
|
+
"type": "OverflowListRenderer<T> | undefined",
|
|
61040
|
+
"required": false,
|
|
61041
|
+
"description": "Renders the overflow indicator. Also called once in the hidden measurement\nlayer with every item hidden, so it must be pure. Compose it from the\n`OverflowListMore` parts; defaults to `<OverflowListMore />`."
|
|
61060
61042
|
},
|
|
61061
61043
|
{
|
|
61062
61044
|
"name": "minVisibleItems",
|
|
61063
61045
|
"type": "number | undefined",
|
|
61064
|
-
"required": false
|
|
61046
|
+
"required": false,
|
|
61047
|
+
"description": "Keep at least this many items visible however narrow the row gets."
|
|
61065
61048
|
},
|
|
61066
61049
|
{
|
|
61067
61050
|
"name": "collapseFrom",
|
|
@@ -61071,7 +61054,8 @@
|
|
|
61071
61054
|
{
|
|
61072
61055
|
"name": "alwaysRenderOverflow",
|
|
61073
61056
|
"type": "boolean | undefined",
|
|
61074
|
-
"required": false
|
|
61057
|
+
"required": false,
|
|
61058
|
+
"description": "Call `overflowRenderer` even when nothing is hidden. `OverflowListMore`\nitself renders nothing at zero hidden items."
|
|
61075
61059
|
},
|
|
61076
61060
|
{
|
|
61077
61061
|
"name": "defaultChecked",
|
|
@@ -61344,453 +61328,36 @@
|
|
|
61344
61328
|
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
61345
61329
|
}
|
|
61346
61330
|
],
|
|
61347
|
-
"variants": [
|
|
61348
|
-
"subComponents": [],
|
|
61349
|
-
"examples": [
|
|
61350
|
-
{
|
|
61351
|
-
"name": "Basic",
|
|
61352
|
-
"code": "() => (\n <div className='w-640'>\n <OverflowList\n className='gap-4'\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowHeaderLabel='tags'\n />\n </div>\n)",
|
|
61353
|
-
"description": "All nine tags fit in 640px, so the overflow renderer is never called at all."
|
|
61354
|
-
},
|
|
61355
|
-
{
|
|
61356
|
-
"name": "Collapsed",
|
|
61357
|
-
"code": "() => (\n <div className='w-200'>\n <OverflowList\n className='gap-4'\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowHeaderLabel='tags'\n />\n </div>\n)",
|
|
61358
|
-
"description": "The same nine in 200px: two survive and the `+N` takes the rest, which is the whole job."
|
|
61359
|
-
},
|
|
61360
|
-
{
|
|
61361
|
-
"name": "CollapseFromStart",
|
|
61362
|
-
"code": "() => (\n <div className='w-240'>\n <OverflowList\n className='gap-4'\n collapseFrom='start'\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowHeaderLabel='tags'\n />\n </div>\n)",
|
|
61363
|
-
"description": "`collapseFrom='start'` hides the beginning and keeps the end in view — for a path or a\nhistory where the most recent items are the ones that matter."
|
|
61364
|
-
},
|
|
61365
|
-
{
|
|
61366
|
-
"name": "MinVisibleItems",
|
|
61367
|
-
"code": "() => (\n <div className='w-160 overflow-hidden rounded-2 border border-border-primary p-12'>\n <OverflowList\n className='gap-4'\n minVisibleItems={1}\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowHeaderLabel='tags'\n />\n </div>\n)",
|
|
61368
|
-
"description": "`minVisibleItems` puts a floor under the measurement: however tight the column gets,\nthat many items stay and the rest go to the `+N` rather than the row emptying out."
|
|
61369
|
-
},
|
|
61370
|
-
{
|
|
61371
|
-
"name": "ResizableContainer",
|
|
61372
|
-
"code": "() => (\n <div\n data-testid='resizable-wrapper'\n className='overflow-hidden rounded-2 border border-border-primary p-12'\n style={{ width: 500, minWidth: 80, maxWidth: 800, resize: 'horizontal' }}\n >\n <OverflowList\n className='gap-4'\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowHeaderLabel='tags'\n />\n </div>\n)",
|
|
61373
|
-
"description": "Drag the box's right edge: the split is re-measured as the width changes rather than at\nbreakpoints, which is what makes it safe inside a resizable panel."
|
|
61374
|
-
},
|
|
61375
|
-
{
|
|
61376
|
-
"name": "ShowAllInPopover",
|
|
61377
|
-
"code": "() => (\n <div className='w-120'>\n <OverflowList\n className='gap-4'\n items={ATTACK_TYPES}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowHeaderLabel='attack types'\n showAll\n />\n </div>\n)",
|
|
61378
|
-
"description": "Shows all items (visible + hidden) in the popover with a total count header.\nThis is the recommended pattern for read-only contexts."
|
|
61379
|
-
},
|
|
61380
|
-
{
|
|
61381
|
-
"name": "HiddenOnlyInPopover",
|
|
61382
|
-
"code": "() => (\n <div className='w-120'>\n <OverflowList\n className='gap-4'\n items={ATTACK_TYPES}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n showAll={false}\n />\n </div>\n)",
|
|
61383
|
-
"description": "Shows only hidden items in the popover (legacy pattern).\nUse only for editable contexts like multi-select inputs."
|
|
61384
|
-
},
|
|
61385
|
-
{
|
|
61386
|
-
"name": "OverlayOrigin",
|
|
61387
|
-
"code": "() => (\n <div className='w-120'>\n <OverflowList\n className='gap-4'\n items={ATTACK_TYPES}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowHeaderLabel='attack types'\n showAll\n overlayOrigin\n />\n </div>\n)",
|
|
61388
|
-
"description": "Popover overlays the origin (visible items + trigger).\nUse when the popover should cover the entire row."
|
|
61389
|
-
}
|
|
61390
|
-
]
|
|
61391
|
-
},
|
|
61392
|
-
{
|
|
61393
|
-
"name": "OverflowTooltip",
|
|
61394
|
-
"description": "Root component for OverflowTooltip.\nAutomatically detects overflow in child elements.",
|
|
61395
|
-
"importPath": "@wallarm-org/design-system/OverflowTooltip",
|
|
61396
|
-
"props": [
|
|
61331
|
+
"variants": [
|
|
61397
61332
|
{
|
|
61398
|
-
"name": "
|
|
61399
|
-
"
|
|
61400
|
-
|
|
61333
|
+
"name": "dimmed",
|
|
61334
|
+
"options": [
|
|
61335
|
+
"true",
|
|
61336
|
+
"false"
|
|
61337
|
+
],
|
|
61401
61338
|
"defaultValue": "false"
|
|
61402
|
-
},
|
|
61403
|
-
{
|
|
61404
|
-
"name": "positioning",
|
|
61405
|
-
"type": "PositioningOptions | undefined",
|
|
61406
|
-
"required": false
|
|
61407
61339
|
}
|
|
61408
61340
|
],
|
|
61409
|
-
"variants": [],
|
|
61410
61341
|
"subComponents": [
|
|
61411
61342
|
{
|
|
61412
|
-
"name": "
|
|
61343
|
+
"name": "OverflowListMore",
|
|
61413
61344
|
"props": [
|
|
61414
61345
|
{
|
|
61415
|
-
"name": "
|
|
61416
|
-
"type": "
|
|
61346
|
+
"name": "placement",
|
|
61347
|
+
"type": "\"trigger\" | \"cover\" | undefined",
|
|
61417
61348
|
"required": false,
|
|
61418
|
-
"
|
|
61419
|
-
|
|
61420
|
-
|
|
61421
|
-
},
|
|
61422
|
-
{
|
|
61423
|
-
"name": "OverflowTooltipTrigger",
|
|
61424
|
-
"props": [
|
|
61349
|
+
"description": "`trigger` — the popover opens below the \"+N\" chip.\n`cover` — the popover opens over the row, from the list's left edge.",
|
|
61350
|
+
"defaultValue": "trigger"
|
|
61351
|
+
},
|
|
61425
61352
|
{
|
|
61426
|
-
"name": "
|
|
61353
|
+
"name": "open",
|
|
61427
61354
|
"type": "boolean | undefined",
|
|
61428
|
-
"required": false
|
|
61429
|
-
"defaultValue": "true"
|
|
61355
|
+
"required": false
|
|
61430
61356
|
}
|
|
61431
61357
|
]
|
|
61432
|
-
}
|
|
61433
|
-
],
|
|
61434
|
-
"examples": [
|
|
61435
|
-
{
|
|
61436
|
-
"name": "AutoDetection",
|
|
61437
|
-
"code": "() => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>short — no tooltip</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>Short text</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n This won't show because text isn't overflowing\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>long — tooltip</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n This is a very long text that will be truncated and automatically show a tooltip when\n hovered\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n This is a very long text that will be truncated and automatically show a tooltip when\n hovered\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
61438
|
-
"description": "A single truncated line. The tooltip appears only when the text is cut — resize the frame and\nit stops offering one."
|
|
61439
|
-
},
|
|
61440
|
-
{
|
|
61441
|
-
"name": "MultiLineAutoDetection",
|
|
61442
|
-
"code": "() => {\n const longText =\n 'This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes.';\n\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>line-clamp-2</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='line-clamp-2'>{longText}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>line-clamp-3</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='line-clamp-3'>{longText}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>line-clamp-4</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='line-clamp-4'>{longText}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
61443
|
-
"description": "The same with `line-clamp`, where truncation happens at the block rather than the line."
|
|
61444
|
-
},
|
|
61445
|
-
{
|
|
61446
|
-
"name": "NestedElements",
|
|
61447
|
-
"code": "() => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>one level deep</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='border p-4'>\n <h3 className='font-bold mb-2'>Card Title</h3>\n <p className='truncate'>\n This is a nested element with truncate that will be automatically detected for\n overflow\n </p>\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n This is a nested element with truncate that will be automatically detected for overflow\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>several, each truncating</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='border p-4'>\n <h3 className='font-bold mb-2 truncate'>\n This is a very long title that might be truncated\n </h3>\n <p className='line-clamp-2'>\n And this is a description that can span multiple lines but will be clamped to just\n two lines. The component will detect if either of these elements overflow.\n </p>\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div>\n <strong>Title:</strong> This is a very long title that might be truncated\n <br />\n <strong>Description:</strong> And this is a description that can span multiple lines\n but will be clamped to just two lines. The component will detect if either of these\n elements overflow.\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
61448
|
-
"description": "The truncating element is somewhere inside the children, which is the usual case — it is\nfound rather than declared."
|
|
61449
|
-
},
|
|
61450
|
-
{
|
|
61451
|
-
"name": "CustomTooltipContent",
|
|
61452
|
-
"code": "() => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>rich content</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='flex flex-col gap-2'>\n <div className='font-medium text-sm'>API Endpoint</div>\n <code className='rounded-6 bg-component-kbi-tooltip-bg px-4 py-2 font-mono text-text-primary-alt text-xs'>\n /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n </code>\n <div className='text-xs text-text-secondary'>\n Method: POST\n <br />\n Auth: Bearer Token\n </div>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>table-like content</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n user@example.com - Administrator - Last login: 2024-01-15\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='grid grid-cols-2 gap-2 text-sm'>\n <span className='font-medium'>Email:</span>\n <span>user@example.com</span>\n <span className='font-medium'>Role:</span>\n <span>Administrator</span>\n <span className='font-medium'>Last Login:</span>\n <span>2024-01-15</span>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
61453
|
-
"description": "Overriding the content, for when the full value needs formatting the truncated one does not\nhave."
|
|
61454
|
-
},
|
|
61455
|
-
{
|
|
61456
|
-
"name": "ForceTooltip",
|
|
61457
|
-
"code": "() => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>forced, nothing truncated</p>\n <OverflowTooltip forceTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate w-fit'>Short text</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n This tooltip is forced to show even though the text isn't truncated\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>forced, with extra detail</p>\n <OverflowTooltip forceTooltip>\n <OverflowTooltipTrigger>\n <Button variant='outline' color='neutral'>\n Click for info\n </Button>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='flex flex-col gap-2'>\n <strong>Additional Information</strong>\n <span className='text-sm'>\n This tooltip provides extra context even when the trigger element doesn't have\n overflow.\n </span>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
61458
|
-
"description": "Forcing it on regardless of truncation. Reach for a plain `Tooltip` instead if the answer is\nalways yes — this prop exists for the case that switches."
|
|
61459
|
-
},
|
|
61460
|
-
{
|
|
61461
|
-
"name": "DifferentSides",
|
|
61462
|
-
"code": "() => {\n const text = 'This is a text that will be truncated and show tooltips on different sides';\n\n return (\n <div className='font-sans flex flex-col gap-32 w-300 py-32'>\n <div>\n <p className='sb-annotation mb-8'>top — the default</p>\n <OverflowTooltip positioning={{ placement: 'top' }}>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>bottom</p>\n <OverflowTooltip positioning={{ placement: 'bottom' }}>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>left</p>\n <OverflowTooltip positioning={{ placement: 'left' }}>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>right</p>\n <OverflowTooltip positioning={{ placement: 'right' }}>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
61463
|
-
"description": "Placement around the trigger. In a table, keep it off the side the reader is scanning."
|
|
61464
|
-
},
|
|
61465
|
-
{
|
|
61466
|
-
"name": "DynamicContent",
|
|
61467
|
-
"code": "() => {\n const [text, setText] = useState('Click the button to change this text');\n\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <Button\n variant='outline'\n color='neutral'\n onClick={() => {\n const texts = [\n 'Short text',\n 'This is a medium length text that might overflow',\n 'This is a very long text that will definitely overflow and show a tooltip when you hover over it',\n 'Another short one',\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',\n ];\n setText(texts[Math.floor(Math.random() * texts.length)] ?? 'Short text');\n }}\n >\n Change Text\n </Button>\n </div>\n );\n}",
|
|
61468
|
-
"description": "Content that changes after mount. The measurement is re-taken rather than cached from first\nrender, so text that grows past its box gains a tooltip without being remounted."
|
|
61469
|
-
}
|
|
61470
|
-
]
|
|
61471
|
-
},
|
|
61472
|
-
{
|
|
61473
|
-
"name": "Overlay",
|
|
61474
|
-
"importPath": "@wallarm-org/design-system/Overlay",
|
|
61475
|
-
"props": [],
|
|
61476
|
-
"variants": [],
|
|
61477
|
-
"subComponents": [],
|
|
61478
|
-
"examples": [
|
|
61479
|
-
{
|
|
61480
|
-
"name": "Basic",
|
|
61481
|
-
"code": "() => <Overlay />",
|
|
61482
|
-
"description": "The scrim over a page of text, which is the whole of what it does. Its fade keys off a `data-state` the parent sets, so on its own it just sits there — the behaviour comes from the headless backdrop you wrap it in."
|
|
61483
|
-
}
|
|
61484
|
-
]
|
|
61485
|
-
},
|
|
61486
|
-
{
|
|
61487
|
-
"name": "Page",
|
|
61488
|
-
"importPath": "@wallarm-org/design-system/Page",
|
|
61489
|
-
"props": [
|
|
61490
|
-
{
|
|
61491
|
-
"name": "name",
|
|
61492
|
-
"type": "string | undefined",
|
|
61493
|
-
"required": false
|
|
61494
|
-
},
|
|
61495
|
-
{
|
|
61496
|
-
"name": "title",
|
|
61497
|
-
"type": "string | undefined",
|
|
61498
|
-
"required": false
|
|
61499
61358
|
},
|
|
61500
61359
|
{
|
|
61501
|
-
"name": "
|
|
61502
|
-
"type": "boolean | undefined",
|
|
61503
|
-
"required": false
|
|
61504
|
-
},
|
|
61505
|
-
{
|
|
61506
|
-
"name": "fixedHeight",
|
|
61507
|
-
"type": "boolean | undefined",
|
|
61508
|
-
"required": false
|
|
61509
|
-
},
|
|
61510
|
-
{
|
|
61511
|
-
"name": "contained",
|
|
61512
|
-
"type": "boolean | undefined",
|
|
61513
|
-
"required": false
|
|
61514
|
-
},
|
|
61515
|
-
{
|
|
61516
|
-
"name": "defaultChecked",
|
|
61517
|
-
"type": "boolean | undefined",
|
|
61518
|
-
"required": false
|
|
61519
|
-
},
|
|
61520
|
-
{
|
|
61521
|
-
"name": "defaultValue",
|
|
61522
|
-
"type": "string | number | readonly string[] | undefined",
|
|
61523
|
-
"required": false
|
|
61524
|
-
},
|
|
61525
|
-
{
|
|
61526
|
-
"name": "suppressContentEditableWarning",
|
|
61527
|
-
"type": "boolean | undefined",
|
|
61528
|
-
"required": false
|
|
61529
|
-
},
|
|
61530
|
-
{
|
|
61531
|
-
"name": "suppressHydrationWarning",
|
|
61532
|
-
"type": "boolean | undefined",
|
|
61533
|
-
"required": false
|
|
61534
|
-
},
|
|
61535
|
-
{
|
|
61536
|
-
"name": "accessKey",
|
|
61537
|
-
"type": "string | undefined",
|
|
61538
|
-
"required": false
|
|
61539
|
-
},
|
|
61540
|
-
{
|
|
61541
|
-
"name": "autoCapitalize",
|
|
61542
|
-
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
61543
|
-
"required": false
|
|
61544
|
-
},
|
|
61545
|
-
{
|
|
61546
|
-
"name": "autoFocus",
|
|
61547
|
-
"type": "boolean | undefined",
|
|
61548
|
-
"required": false
|
|
61549
|
-
},
|
|
61550
|
-
{
|
|
61551
|
-
"name": "contentEditable",
|
|
61552
|
-
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
61553
|
-
"required": false
|
|
61554
|
-
},
|
|
61555
|
-
{
|
|
61556
|
-
"name": "contextMenu",
|
|
61557
|
-
"type": "string | undefined",
|
|
61558
|
-
"required": false
|
|
61559
|
-
},
|
|
61560
|
-
{
|
|
61561
|
-
"name": "dir",
|
|
61562
|
-
"type": "string | undefined",
|
|
61563
|
-
"required": false
|
|
61564
|
-
},
|
|
61565
|
-
{
|
|
61566
|
-
"name": "draggable",
|
|
61567
|
-
"type": "Booleanish | undefined",
|
|
61568
|
-
"required": false
|
|
61569
|
-
},
|
|
61570
|
-
{
|
|
61571
|
-
"name": "enterKeyHint",
|
|
61572
|
-
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
61573
|
-
"required": false
|
|
61574
|
-
},
|
|
61575
|
-
{
|
|
61576
|
-
"name": "hidden",
|
|
61577
|
-
"type": "boolean | undefined",
|
|
61578
|
-
"required": false
|
|
61579
|
-
},
|
|
61580
|
-
{
|
|
61581
|
-
"name": "id",
|
|
61582
|
-
"type": "string | undefined",
|
|
61583
|
-
"required": false
|
|
61584
|
-
},
|
|
61585
|
-
{
|
|
61586
|
-
"name": "lang",
|
|
61587
|
-
"type": "string | undefined",
|
|
61588
|
-
"required": false
|
|
61589
|
-
},
|
|
61590
|
-
{
|
|
61591
|
-
"name": "nonce",
|
|
61592
|
-
"type": "string | undefined",
|
|
61593
|
-
"required": false
|
|
61594
|
-
},
|
|
61595
|
-
{
|
|
61596
|
-
"name": "slot",
|
|
61597
|
-
"type": "string | undefined",
|
|
61598
|
-
"required": false
|
|
61599
|
-
},
|
|
61600
|
-
{
|
|
61601
|
-
"name": "spellCheck",
|
|
61602
|
-
"type": "Booleanish | undefined",
|
|
61603
|
-
"required": false
|
|
61604
|
-
},
|
|
61605
|
-
{
|
|
61606
|
-
"name": "tabIndex",
|
|
61607
|
-
"type": "number | undefined",
|
|
61608
|
-
"required": false
|
|
61609
|
-
},
|
|
61610
|
-
{
|
|
61611
|
-
"name": "translate",
|
|
61612
|
-
"type": "\"yes\" | \"no\" | undefined",
|
|
61613
|
-
"required": false
|
|
61614
|
-
},
|
|
61615
|
-
{
|
|
61616
|
-
"name": "radioGroup",
|
|
61617
|
-
"type": "string | undefined",
|
|
61618
|
-
"required": false
|
|
61619
|
-
},
|
|
61620
|
-
{
|
|
61621
|
-
"name": "role",
|
|
61622
|
-
"type": "AriaRole | undefined",
|
|
61623
|
-
"required": false
|
|
61624
|
-
},
|
|
61625
|
-
{
|
|
61626
|
-
"name": "about",
|
|
61627
|
-
"type": "string | undefined",
|
|
61628
|
-
"required": false
|
|
61629
|
-
},
|
|
61630
|
-
{
|
|
61631
|
-
"name": "content",
|
|
61632
|
-
"type": "string | undefined",
|
|
61633
|
-
"required": false
|
|
61634
|
-
},
|
|
61635
|
-
{
|
|
61636
|
-
"name": "datatype",
|
|
61637
|
-
"type": "string | undefined",
|
|
61638
|
-
"required": false
|
|
61639
|
-
},
|
|
61640
|
-
{
|
|
61641
|
-
"name": "inlist",
|
|
61642
|
-
"type": "any",
|
|
61643
|
-
"required": false
|
|
61644
|
-
},
|
|
61645
|
-
{
|
|
61646
|
-
"name": "prefix",
|
|
61647
|
-
"type": "string | undefined",
|
|
61648
|
-
"required": false
|
|
61649
|
-
},
|
|
61650
|
-
{
|
|
61651
|
-
"name": "property",
|
|
61652
|
-
"type": "string | undefined",
|
|
61653
|
-
"required": false
|
|
61654
|
-
},
|
|
61655
|
-
{
|
|
61656
|
-
"name": "rel",
|
|
61657
|
-
"type": "string | undefined",
|
|
61658
|
-
"required": false
|
|
61659
|
-
},
|
|
61660
|
-
{
|
|
61661
|
-
"name": "resource",
|
|
61662
|
-
"type": "string | undefined",
|
|
61663
|
-
"required": false
|
|
61664
|
-
},
|
|
61665
|
-
{
|
|
61666
|
-
"name": "rev",
|
|
61667
|
-
"type": "string | undefined",
|
|
61668
|
-
"required": false
|
|
61669
|
-
},
|
|
61670
|
-
{
|
|
61671
|
-
"name": "typeof",
|
|
61672
|
-
"type": "string | undefined",
|
|
61673
|
-
"required": false
|
|
61674
|
-
},
|
|
61675
|
-
{
|
|
61676
|
-
"name": "vocab",
|
|
61677
|
-
"type": "string | undefined",
|
|
61678
|
-
"required": false
|
|
61679
|
-
},
|
|
61680
|
-
{
|
|
61681
|
-
"name": "autoCorrect",
|
|
61682
|
-
"type": "string | undefined",
|
|
61683
|
-
"required": false
|
|
61684
|
-
},
|
|
61685
|
-
{
|
|
61686
|
-
"name": "autoSave",
|
|
61687
|
-
"type": "string | undefined",
|
|
61688
|
-
"required": false
|
|
61689
|
-
},
|
|
61690
|
-
{
|
|
61691
|
-
"name": "color",
|
|
61692
|
-
"type": "string | undefined",
|
|
61693
|
-
"required": false
|
|
61694
|
-
},
|
|
61695
|
-
{
|
|
61696
|
-
"name": "itemProp",
|
|
61697
|
-
"type": "string | undefined",
|
|
61698
|
-
"required": false
|
|
61699
|
-
},
|
|
61700
|
-
{
|
|
61701
|
-
"name": "itemScope",
|
|
61702
|
-
"type": "boolean | undefined",
|
|
61703
|
-
"required": false
|
|
61704
|
-
},
|
|
61705
|
-
{
|
|
61706
|
-
"name": "itemType",
|
|
61707
|
-
"type": "string | undefined",
|
|
61708
|
-
"required": false
|
|
61709
|
-
},
|
|
61710
|
-
{
|
|
61711
|
-
"name": "itemID",
|
|
61712
|
-
"type": "string | undefined",
|
|
61713
|
-
"required": false
|
|
61714
|
-
},
|
|
61715
|
-
{
|
|
61716
|
-
"name": "itemRef",
|
|
61717
|
-
"type": "string | undefined",
|
|
61718
|
-
"required": false
|
|
61719
|
-
},
|
|
61720
|
-
{
|
|
61721
|
-
"name": "results",
|
|
61722
|
-
"type": "number | undefined",
|
|
61723
|
-
"required": false
|
|
61724
|
-
},
|
|
61725
|
-
{
|
|
61726
|
-
"name": "security",
|
|
61727
|
-
"type": "string | undefined",
|
|
61728
|
-
"required": false
|
|
61729
|
-
},
|
|
61730
|
-
{
|
|
61731
|
-
"name": "unselectable",
|
|
61732
|
-
"type": "\"off\" | \"on\" | undefined",
|
|
61733
|
-
"required": false
|
|
61734
|
-
},
|
|
61735
|
-
{
|
|
61736
|
-
"name": "popover",
|
|
61737
|
-
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
61738
|
-
"required": false
|
|
61739
|
-
},
|
|
61740
|
-
{
|
|
61741
|
-
"name": "popoverTargetAction",
|
|
61742
|
-
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
61743
|
-
"required": false
|
|
61744
|
-
},
|
|
61745
|
-
{
|
|
61746
|
-
"name": "popoverTarget",
|
|
61747
|
-
"type": "string | undefined",
|
|
61748
|
-
"required": false
|
|
61749
|
-
},
|
|
61750
|
-
{
|
|
61751
|
-
"name": "inert",
|
|
61752
|
-
"type": "boolean | undefined",
|
|
61753
|
-
"required": false,
|
|
61754
|
-
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
61755
|
-
},
|
|
61756
|
-
{
|
|
61757
|
-
"name": "inputMode",
|
|
61758
|
-
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
61759
|
-
"required": false,
|
|
61760
|
-
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
61761
|
-
},
|
|
61762
|
-
{
|
|
61763
|
-
"name": "is",
|
|
61764
|
-
"type": "string | undefined",
|
|
61765
|
-
"required": false,
|
|
61766
|
-
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
61767
|
-
},
|
|
61768
|
-
{
|
|
61769
|
-
"name": "exportparts",
|
|
61770
|
-
"type": "string | undefined",
|
|
61771
|
-
"required": false,
|
|
61772
|
-
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
61773
|
-
},
|
|
61774
|
-
{
|
|
61775
|
-
"name": "part",
|
|
61776
|
-
"type": "string | undefined",
|
|
61777
|
-
"required": false,
|
|
61778
|
-
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
61779
|
-
}
|
|
61780
|
-
],
|
|
61781
|
-
"variants": [
|
|
61782
|
-
{
|
|
61783
|
-
"name": "active",
|
|
61784
|
-
"options": [
|
|
61785
|
-
"true",
|
|
61786
|
-
"false"
|
|
61787
|
-
],
|
|
61788
|
-
"defaultValue": "false"
|
|
61789
|
-
}
|
|
61790
|
-
],
|
|
61791
|
-
"subComponents": [
|
|
61792
|
-
{
|
|
61793
|
-
"name": "PageActions",
|
|
61360
|
+
"name": "OverflowListMoreContent",
|
|
61794
61361
|
"props": [
|
|
61795
61362
|
{
|
|
61796
61363
|
"name": "defaultChecked",
|
|
@@ -61857,11 +61424,6 @@
|
|
|
61857
61424
|
"type": "boolean | undefined",
|
|
61858
61425
|
"required": false
|
|
61859
61426
|
},
|
|
61860
|
-
{
|
|
61861
|
-
"name": "id",
|
|
61862
|
-
"type": "string | undefined",
|
|
61863
|
-
"required": false
|
|
61864
|
-
},
|
|
61865
61427
|
{
|
|
61866
61428
|
"name": "lang",
|
|
61867
61429
|
"type": "string | undefined",
|
|
@@ -62061,12 +61623,46 @@
|
|
|
62061
61623
|
"type": "string | undefined",
|
|
62062
61624
|
"required": false,
|
|
62063
61625
|
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
61626
|
+
},
|
|
61627
|
+
{
|
|
61628
|
+
"name": "minHeight",
|
|
61629
|
+
"type": "PopoverSizeDimension | undefined",
|
|
61630
|
+
"required": false,
|
|
61631
|
+
"defaultValue": "auto"
|
|
61632
|
+
},
|
|
61633
|
+
{
|
|
61634
|
+
"name": "maxHeight",
|
|
61635
|
+
"type": "PopoverSizeDimension | undefined",
|
|
61636
|
+
"required": false
|
|
61637
|
+
},
|
|
61638
|
+
{
|
|
61639
|
+
"name": "minWidth",
|
|
61640
|
+
"type": "PopoverSizeDimension | undefined",
|
|
61641
|
+
"required": false
|
|
61642
|
+
},
|
|
61643
|
+
{
|
|
61644
|
+
"name": "maxWidth",
|
|
61645
|
+
"type": "PopoverSizeDimension | undefined",
|
|
61646
|
+
"required": false,
|
|
61647
|
+
"defaultValue": "360px"
|
|
62064
61648
|
}
|
|
62065
61649
|
]
|
|
62066
61650
|
},
|
|
62067
61651
|
{
|
|
62068
|
-
"name": "
|
|
61652
|
+
"name": "OverflowListMoreCount",
|
|
62069
61653
|
"props": [
|
|
61654
|
+
{
|
|
61655
|
+
"name": "of",
|
|
61656
|
+
"type": "\"hidden\" | \"total\" | undefined",
|
|
61657
|
+
"required": false,
|
|
61658
|
+
"description": "`hidden` — items folded into the overflow; `total` — every item.",
|
|
61659
|
+
"defaultValue": "hidden"
|
|
61660
|
+
},
|
|
61661
|
+
{
|
|
61662
|
+
"name": "id",
|
|
61663
|
+
"type": "string | undefined",
|
|
61664
|
+
"required": false
|
|
61665
|
+
},
|
|
62070
61666
|
{
|
|
62071
61667
|
"name": "defaultChecked",
|
|
62072
61668
|
"type": "boolean | undefined",
|
|
@@ -62132,11 +61728,6 @@
|
|
|
62132
61728
|
"type": "boolean | undefined",
|
|
62133
61729
|
"required": false
|
|
62134
61730
|
},
|
|
62135
|
-
{
|
|
62136
|
-
"name": "id",
|
|
62137
|
-
"type": "string | undefined",
|
|
62138
|
-
"required": false
|
|
62139
|
-
},
|
|
62140
61731
|
{
|
|
62141
61732
|
"name": "lang",
|
|
62142
61733
|
"type": "string | undefined",
|
|
@@ -62340,11 +61931,11 @@
|
|
|
62340
61931
|
]
|
|
62341
61932
|
},
|
|
62342
61933
|
{
|
|
62343
|
-
"name": "
|
|
61934
|
+
"name": "OverflowListMoreHeader",
|
|
62344
61935
|
"props": [
|
|
62345
61936
|
{
|
|
62346
|
-
"name": "
|
|
62347
|
-
"type": "
|
|
61937
|
+
"name": "id",
|
|
61938
|
+
"type": "string | undefined",
|
|
62348
61939
|
"required": false
|
|
62349
61940
|
},
|
|
62350
61941
|
{
|
|
@@ -62412,11 +62003,1945 @@
|
|
|
62412
62003
|
"type": "boolean | undefined",
|
|
62413
62004
|
"required": false
|
|
62414
62005
|
},
|
|
62415
|
-
{
|
|
62416
|
-
"name": "
|
|
62417
|
-
"type": "string | undefined",
|
|
62418
|
-
"required": false
|
|
62419
|
-
},
|
|
62006
|
+
{
|
|
62007
|
+
"name": "lang",
|
|
62008
|
+
"type": "string | undefined",
|
|
62009
|
+
"required": false
|
|
62010
|
+
},
|
|
62011
|
+
{
|
|
62012
|
+
"name": "nonce",
|
|
62013
|
+
"type": "string | undefined",
|
|
62014
|
+
"required": false
|
|
62015
|
+
},
|
|
62016
|
+
{
|
|
62017
|
+
"name": "slot",
|
|
62018
|
+
"type": "string | undefined",
|
|
62019
|
+
"required": false
|
|
62020
|
+
},
|
|
62021
|
+
{
|
|
62022
|
+
"name": "spellCheck",
|
|
62023
|
+
"type": "Booleanish | undefined",
|
|
62024
|
+
"required": false
|
|
62025
|
+
},
|
|
62026
|
+
{
|
|
62027
|
+
"name": "tabIndex",
|
|
62028
|
+
"type": "number | undefined",
|
|
62029
|
+
"required": false
|
|
62030
|
+
},
|
|
62031
|
+
{
|
|
62032
|
+
"name": "title",
|
|
62033
|
+
"type": "string | undefined",
|
|
62034
|
+
"required": false
|
|
62035
|
+
},
|
|
62036
|
+
{
|
|
62037
|
+
"name": "translate",
|
|
62038
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
62039
|
+
"required": false
|
|
62040
|
+
},
|
|
62041
|
+
{
|
|
62042
|
+
"name": "radioGroup",
|
|
62043
|
+
"type": "string | undefined",
|
|
62044
|
+
"required": false
|
|
62045
|
+
},
|
|
62046
|
+
{
|
|
62047
|
+
"name": "role",
|
|
62048
|
+
"type": "AriaRole | undefined",
|
|
62049
|
+
"required": false
|
|
62050
|
+
},
|
|
62051
|
+
{
|
|
62052
|
+
"name": "about",
|
|
62053
|
+
"type": "string | undefined",
|
|
62054
|
+
"required": false
|
|
62055
|
+
},
|
|
62056
|
+
{
|
|
62057
|
+
"name": "content",
|
|
62058
|
+
"type": "string | undefined",
|
|
62059
|
+
"required": false
|
|
62060
|
+
},
|
|
62061
|
+
{
|
|
62062
|
+
"name": "datatype",
|
|
62063
|
+
"type": "string | undefined",
|
|
62064
|
+
"required": false
|
|
62065
|
+
},
|
|
62066
|
+
{
|
|
62067
|
+
"name": "inlist",
|
|
62068
|
+
"type": "any",
|
|
62069
|
+
"required": false
|
|
62070
|
+
},
|
|
62071
|
+
{
|
|
62072
|
+
"name": "prefix",
|
|
62073
|
+
"type": "string | undefined",
|
|
62074
|
+
"required": false
|
|
62075
|
+
},
|
|
62076
|
+
{
|
|
62077
|
+
"name": "property",
|
|
62078
|
+
"type": "string | undefined",
|
|
62079
|
+
"required": false
|
|
62080
|
+
},
|
|
62081
|
+
{
|
|
62082
|
+
"name": "rel",
|
|
62083
|
+
"type": "string | undefined",
|
|
62084
|
+
"required": false
|
|
62085
|
+
},
|
|
62086
|
+
{
|
|
62087
|
+
"name": "resource",
|
|
62088
|
+
"type": "string | undefined",
|
|
62089
|
+
"required": false
|
|
62090
|
+
},
|
|
62091
|
+
{
|
|
62092
|
+
"name": "rev",
|
|
62093
|
+
"type": "string | undefined",
|
|
62094
|
+
"required": false
|
|
62095
|
+
},
|
|
62096
|
+
{
|
|
62097
|
+
"name": "typeof",
|
|
62098
|
+
"type": "string | undefined",
|
|
62099
|
+
"required": false
|
|
62100
|
+
},
|
|
62101
|
+
{
|
|
62102
|
+
"name": "vocab",
|
|
62103
|
+
"type": "string | undefined",
|
|
62104
|
+
"required": false
|
|
62105
|
+
},
|
|
62106
|
+
{
|
|
62107
|
+
"name": "autoCorrect",
|
|
62108
|
+
"type": "string | undefined",
|
|
62109
|
+
"required": false
|
|
62110
|
+
},
|
|
62111
|
+
{
|
|
62112
|
+
"name": "autoSave",
|
|
62113
|
+
"type": "string | undefined",
|
|
62114
|
+
"required": false
|
|
62115
|
+
},
|
|
62116
|
+
{
|
|
62117
|
+
"name": "itemProp",
|
|
62118
|
+
"type": "string | undefined",
|
|
62119
|
+
"required": false
|
|
62120
|
+
},
|
|
62121
|
+
{
|
|
62122
|
+
"name": "itemScope",
|
|
62123
|
+
"type": "boolean | undefined",
|
|
62124
|
+
"required": false
|
|
62125
|
+
},
|
|
62126
|
+
{
|
|
62127
|
+
"name": "itemType",
|
|
62128
|
+
"type": "string | undefined",
|
|
62129
|
+
"required": false
|
|
62130
|
+
},
|
|
62131
|
+
{
|
|
62132
|
+
"name": "itemID",
|
|
62133
|
+
"type": "string | undefined",
|
|
62134
|
+
"required": false
|
|
62135
|
+
},
|
|
62136
|
+
{
|
|
62137
|
+
"name": "itemRef",
|
|
62138
|
+
"type": "string | undefined",
|
|
62139
|
+
"required": false
|
|
62140
|
+
},
|
|
62141
|
+
{
|
|
62142
|
+
"name": "results",
|
|
62143
|
+
"type": "number | undefined",
|
|
62144
|
+
"required": false
|
|
62145
|
+
},
|
|
62146
|
+
{
|
|
62147
|
+
"name": "security",
|
|
62148
|
+
"type": "string | undefined",
|
|
62149
|
+
"required": false
|
|
62150
|
+
},
|
|
62151
|
+
{
|
|
62152
|
+
"name": "unselectable",
|
|
62153
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
62154
|
+
"required": false
|
|
62155
|
+
},
|
|
62156
|
+
{
|
|
62157
|
+
"name": "popover",
|
|
62158
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
62159
|
+
"required": false
|
|
62160
|
+
},
|
|
62161
|
+
{
|
|
62162
|
+
"name": "popoverTargetAction",
|
|
62163
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
62164
|
+
"required": false
|
|
62165
|
+
},
|
|
62166
|
+
{
|
|
62167
|
+
"name": "popoverTarget",
|
|
62168
|
+
"type": "string | undefined",
|
|
62169
|
+
"required": false
|
|
62170
|
+
},
|
|
62171
|
+
{
|
|
62172
|
+
"name": "inert",
|
|
62173
|
+
"type": "boolean | undefined",
|
|
62174
|
+
"required": false,
|
|
62175
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
62176
|
+
},
|
|
62177
|
+
{
|
|
62178
|
+
"name": "inputMode",
|
|
62179
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
62180
|
+
"required": false,
|
|
62181
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
62182
|
+
},
|
|
62183
|
+
{
|
|
62184
|
+
"name": "is",
|
|
62185
|
+
"type": "string | undefined",
|
|
62186
|
+
"required": false,
|
|
62187
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
62188
|
+
},
|
|
62189
|
+
{
|
|
62190
|
+
"name": "exportparts",
|
|
62191
|
+
"type": "string | undefined",
|
|
62192
|
+
"required": false,
|
|
62193
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
62194
|
+
},
|
|
62195
|
+
{
|
|
62196
|
+
"name": "part",
|
|
62197
|
+
"type": "string | undefined",
|
|
62198
|
+
"required": false,
|
|
62199
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
62200
|
+
},
|
|
62201
|
+
{
|
|
62202
|
+
"name": "align",
|
|
62203
|
+
"type": "{ left: string; center: string; right: string; }",
|
|
62204
|
+
"required": false
|
|
62205
|
+
},
|
|
62206
|
+
{
|
|
62207
|
+
"name": "inline",
|
|
62208
|
+
"type": "{ true: string; }",
|
|
62209
|
+
"required": false
|
|
62210
|
+
},
|
|
62211
|
+
{
|
|
62212
|
+
"name": "grow",
|
|
62213
|
+
"type": "{ true: string; }",
|
|
62214
|
+
"required": false
|
|
62215
|
+
},
|
|
62216
|
+
{
|
|
62217
|
+
"name": "truncate",
|
|
62218
|
+
"type": "{ true: string; false: string; }",
|
|
62219
|
+
"required": false
|
|
62220
|
+
},
|
|
62221
|
+
{
|
|
62222
|
+
"name": "decoration",
|
|
62223
|
+
"type": "{ dashed: string; }",
|
|
62224
|
+
"required": false
|
|
62225
|
+
},
|
|
62226
|
+
{
|
|
62227
|
+
"name": "lineHeight",
|
|
62228
|
+
"type": "{ none: string; tight: string; snug: string; normal: string; relaxed: string; }",
|
|
62229
|
+
"required": false
|
|
62230
|
+
},
|
|
62231
|
+
{
|
|
62232
|
+
"name": "textTransform",
|
|
62233
|
+
"type": "{ uppercase: string; lowercase: string; capitalize: string; none: string; }",
|
|
62234
|
+
"required": false
|
|
62235
|
+
},
|
|
62236
|
+
{
|
|
62237
|
+
"name": "asChild",
|
|
62238
|
+
"type": "boolean | undefined",
|
|
62239
|
+
"required": false
|
|
62240
|
+
},
|
|
62241
|
+
{
|
|
62242
|
+
"name": "lineClamp",
|
|
62243
|
+
"type": "number | undefined",
|
|
62244
|
+
"required": false
|
|
62245
|
+
}
|
|
62246
|
+
]
|
|
62247
|
+
},
|
|
62248
|
+
{
|
|
62249
|
+
"name": "OverflowListMoreItems",
|
|
62250
|
+
"props": [
|
|
62251
|
+
{
|
|
62252
|
+
"name": "show",
|
|
62253
|
+
"type": "\"hidden\" | \"all\" | undefined",
|
|
62254
|
+
"required": false,
|
|
62255
|
+
"description": "`all` lists every item (visible ones first); `hidden` only the folded ones.",
|
|
62256
|
+
"defaultValue": "all"
|
|
62257
|
+
},
|
|
62258
|
+
{
|
|
62259
|
+
"name": "dimVisible",
|
|
62260
|
+
"type": "boolean | undefined",
|
|
62261
|
+
"required": false,
|
|
62262
|
+
"description": "Fade the items that are already visible in the row. Only with `show='all'`.",
|
|
62263
|
+
"defaultValue": "true"
|
|
62264
|
+
},
|
|
62265
|
+
{
|
|
62266
|
+
"name": "renderItem",
|
|
62267
|
+
"type": "((item: T, index: number) => ReactNode) | undefined",
|
|
62268
|
+
"required": false,
|
|
62269
|
+
"description": "Item renderer for the popover. Defaults to the list's `itemRenderer`.\n`T` is not linked to the list's item type — annotate the parameter."
|
|
62270
|
+
},
|
|
62271
|
+
{
|
|
62272
|
+
"name": "id",
|
|
62273
|
+
"type": "string | undefined",
|
|
62274
|
+
"required": false
|
|
62275
|
+
},
|
|
62276
|
+
{
|
|
62277
|
+
"name": "defaultChecked",
|
|
62278
|
+
"type": "boolean | undefined",
|
|
62279
|
+
"required": false
|
|
62280
|
+
},
|
|
62281
|
+
{
|
|
62282
|
+
"name": "defaultValue",
|
|
62283
|
+
"type": "string | number | readonly string[] | undefined",
|
|
62284
|
+
"required": false
|
|
62285
|
+
},
|
|
62286
|
+
{
|
|
62287
|
+
"name": "suppressContentEditableWarning",
|
|
62288
|
+
"type": "boolean | undefined",
|
|
62289
|
+
"required": false
|
|
62290
|
+
},
|
|
62291
|
+
{
|
|
62292
|
+
"name": "suppressHydrationWarning",
|
|
62293
|
+
"type": "boolean | undefined",
|
|
62294
|
+
"required": false
|
|
62295
|
+
},
|
|
62296
|
+
{
|
|
62297
|
+
"name": "accessKey",
|
|
62298
|
+
"type": "string | undefined",
|
|
62299
|
+
"required": false
|
|
62300
|
+
},
|
|
62301
|
+
{
|
|
62302
|
+
"name": "autoCapitalize",
|
|
62303
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
62304
|
+
"required": false
|
|
62305
|
+
},
|
|
62306
|
+
{
|
|
62307
|
+
"name": "autoFocus",
|
|
62308
|
+
"type": "boolean | undefined",
|
|
62309
|
+
"required": false
|
|
62310
|
+
},
|
|
62311
|
+
{
|
|
62312
|
+
"name": "contentEditable",
|
|
62313
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
62314
|
+
"required": false
|
|
62315
|
+
},
|
|
62316
|
+
{
|
|
62317
|
+
"name": "contextMenu",
|
|
62318
|
+
"type": "string | undefined",
|
|
62319
|
+
"required": false
|
|
62320
|
+
},
|
|
62321
|
+
{
|
|
62322
|
+
"name": "dir",
|
|
62323
|
+
"type": "string | undefined",
|
|
62324
|
+
"required": false
|
|
62325
|
+
},
|
|
62326
|
+
{
|
|
62327
|
+
"name": "draggable",
|
|
62328
|
+
"type": "Booleanish | undefined",
|
|
62329
|
+
"required": false
|
|
62330
|
+
},
|
|
62331
|
+
{
|
|
62332
|
+
"name": "enterKeyHint",
|
|
62333
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
62334
|
+
"required": false
|
|
62335
|
+
},
|
|
62336
|
+
{
|
|
62337
|
+
"name": "hidden",
|
|
62338
|
+
"type": "boolean | undefined",
|
|
62339
|
+
"required": false
|
|
62340
|
+
},
|
|
62341
|
+
{
|
|
62342
|
+
"name": "lang",
|
|
62343
|
+
"type": "string | undefined",
|
|
62344
|
+
"required": false
|
|
62345
|
+
},
|
|
62346
|
+
{
|
|
62347
|
+
"name": "nonce",
|
|
62348
|
+
"type": "string | undefined",
|
|
62349
|
+
"required": false
|
|
62350
|
+
},
|
|
62351
|
+
{
|
|
62352
|
+
"name": "slot",
|
|
62353
|
+
"type": "string | undefined",
|
|
62354
|
+
"required": false
|
|
62355
|
+
},
|
|
62356
|
+
{
|
|
62357
|
+
"name": "spellCheck",
|
|
62358
|
+
"type": "Booleanish | undefined",
|
|
62359
|
+
"required": false
|
|
62360
|
+
},
|
|
62361
|
+
{
|
|
62362
|
+
"name": "tabIndex",
|
|
62363
|
+
"type": "number | undefined",
|
|
62364
|
+
"required": false
|
|
62365
|
+
},
|
|
62366
|
+
{
|
|
62367
|
+
"name": "title",
|
|
62368
|
+
"type": "string | undefined",
|
|
62369
|
+
"required": false
|
|
62370
|
+
},
|
|
62371
|
+
{
|
|
62372
|
+
"name": "translate",
|
|
62373
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
62374
|
+
"required": false
|
|
62375
|
+
},
|
|
62376
|
+
{
|
|
62377
|
+
"name": "radioGroup",
|
|
62378
|
+
"type": "string | undefined",
|
|
62379
|
+
"required": false
|
|
62380
|
+
},
|
|
62381
|
+
{
|
|
62382
|
+
"name": "role",
|
|
62383
|
+
"type": "AriaRole | undefined",
|
|
62384
|
+
"required": false
|
|
62385
|
+
},
|
|
62386
|
+
{
|
|
62387
|
+
"name": "about",
|
|
62388
|
+
"type": "string | undefined",
|
|
62389
|
+
"required": false
|
|
62390
|
+
},
|
|
62391
|
+
{
|
|
62392
|
+
"name": "content",
|
|
62393
|
+
"type": "string | undefined",
|
|
62394
|
+
"required": false
|
|
62395
|
+
},
|
|
62396
|
+
{
|
|
62397
|
+
"name": "datatype",
|
|
62398
|
+
"type": "string | undefined",
|
|
62399
|
+
"required": false
|
|
62400
|
+
},
|
|
62401
|
+
{
|
|
62402
|
+
"name": "inlist",
|
|
62403
|
+
"type": "any",
|
|
62404
|
+
"required": false
|
|
62405
|
+
},
|
|
62406
|
+
{
|
|
62407
|
+
"name": "prefix",
|
|
62408
|
+
"type": "string | undefined",
|
|
62409
|
+
"required": false
|
|
62410
|
+
},
|
|
62411
|
+
{
|
|
62412
|
+
"name": "property",
|
|
62413
|
+
"type": "string | undefined",
|
|
62414
|
+
"required": false
|
|
62415
|
+
},
|
|
62416
|
+
{
|
|
62417
|
+
"name": "rel",
|
|
62418
|
+
"type": "string | undefined",
|
|
62419
|
+
"required": false
|
|
62420
|
+
},
|
|
62421
|
+
{
|
|
62422
|
+
"name": "resource",
|
|
62423
|
+
"type": "string | undefined",
|
|
62424
|
+
"required": false
|
|
62425
|
+
},
|
|
62426
|
+
{
|
|
62427
|
+
"name": "rev",
|
|
62428
|
+
"type": "string | undefined",
|
|
62429
|
+
"required": false
|
|
62430
|
+
},
|
|
62431
|
+
{
|
|
62432
|
+
"name": "typeof",
|
|
62433
|
+
"type": "string | undefined",
|
|
62434
|
+
"required": false
|
|
62435
|
+
},
|
|
62436
|
+
{
|
|
62437
|
+
"name": "vocab",
|
|
62438
|
+
"type": "string | undefined",
|
|
62439
|
+
"required": false
|
|
62440
|
+
},
|
|
62441
|
+
{
|
|
62442
|
+
"name": "autoCorrect",
|
|
62443
|
+
"type": "string | undefined",
|
|
62444
|
+
"required": false
|
|
62445
|
+
},
|
|
62446
|
+
{
|
|
62447
|
+
"name": "autoSave",
|
|
62448
|
+
"type": "string | undefined",
|
|
62449
|
+
"required": false
|
|
62450
|
+
},
|
|
62451
|
+
{
|
|
62452
|
+
"name": "color",
|
|
62453
|
+
"type": "string | undefined",
|
|
62454
|
+
"required": false
|
|
62455
|
+
},
|
|
62456
|
+
{
|
|
62457
|
+
"name": "itemProp",
|
|
62458
|
+
"type": "string | undefined",
|
|
62459
|
+
"required": false
|
|
62460
|
+
},
|
|
62461
|
+
{
|
|
62462
|
+
"name": "itemScope",
|
|
62463
|
+
"type": "boolean | undefined",
|
|
62464
|
+
"required": false
|
|
62465
|
+
},
|
|
62466
|
+
{
|
|
62467
|
+
"name": "itemType",
|
|
62468
|
+
"type": "string | undefined",
|
|
62469
|
+
"required": false
|
|
62470
|
+
},
|
|
62471
|
+
{
|
|
62472
|
+
"name": "itemID",
|
|
62473
|
+
"type": "string | undefined",
|
|
62474
|
+
"required": false
|
|
62475
|
+
},
|
|
62476
|
+
{
|
|
62477
|
+
"name": "itemRef",
|
|
62478
|
+
"type": "string | undefined",
|
|
62479
|
+
"required": false
|
|
62480
|
+
},
|
|
62481
|
+
{
|
|
62482
|
+
"name": "results",
|
|
62483
|
+
"type": "number | undefined",
|
|
62484
|
+
"required": false
|
|
62485
|
+
},
|
|
62486
|
+
{
|
|
62487
|
+
"name": "security",
|
|
62488
|
+
"type": "string | undefined",
|
|
62489
|
+
"required": false
|
|
62490
|
+
},
|
|
62491
|
+
{
|
|
62492
|
+
"name": "unselectable",
|
|
62493
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
62494
|
+
"required": false
|
|
62495
|
+
},
|
|
62496
|
+
{
|
|
62497
|
+
"name": "popover",
|
|
62498
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
62499
|
+
"required": false
|
|
62500
|
+
},
|
|
62501
|
+
{
|
|
62502
|
+
"name": "popoverTargetAction",
|
|
62503
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
62504
|
+
"required": false
|
|
62505
|
+
},
|
|
62506
|
+
{
|
|
62507
|
+
"name": "popoverTarget",
|
|
62508
|
+
"type": "string | undefined",
|
|
62509
|
+
"required": false
|
|
62510
|
+
},
|
|
62511
|
+
{
|
|
62512
|
+
"name": "inert",
|
|
62513
|
+
"type": "boolean | undefined",
|
|
62514
|
+
"required": false,
|
|
62515
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
62516
|
+
},
|
|
62517
|
+
{
|
|
62518
|
+
"name": "inputMode",
|
|
62519
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
62520
|
+
"required": false,
|
|
62521
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
62522
|
+
},
|
|
62523
|
+
{
|
|
62524
|
+
"name": "is",
|
|
62525
|
+
"type": "string | undefined",
|
|
62526
|
+
"required": false,
|
|
62527
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
62528
|
+
},
|
|
62529
|
+
{
|
|
62530
|
+
"name": "exportparts",
|
|
62531
|
+
"type": "string | undefined",
|
|
62532
|
+
"required": false,
|
|
62533
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
62534
|
+
},
|
|
62535
|
+
{
|
|
62536
|
+
"name": "part",
|
|
62537
|
+
"type": "string | undefined",
|
|
62538
|
+
"required": false,
|
|
62539
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
62540
|
+
}
|
|
62541
|
+
]
|
|
62542
|
+
},
|
|
62543
|
+
{
|
|
62544
|
+
"name": "OverflowListMoreTrigger",
|
|
62545
|
+
"props": [
|
|
62546
|
+
{
|
|
62547
|
+
"name": "size",
|
|
62548
|
+
"type": "\"medium\" | \"small\" | \"large\" | null | undefined",
|
|
62549
|
+
"required": false
|
|
62550
|
+
},
|
|
62551
|
+
{
|
|
62552
|
+
"name": "form",
|
|
62553
|
+
"type": "string | undefined",
|
|
62554
|
+
"required": false
|
|
62555
|
+
},
|
|
62556
|
+
{
|
|
62557
|
+
"name": "id",
|
|
62558
|
+
"type": "string | undefined",
|
|
62559
|
+
"required": false
|
|
62560
|
+
},
|
|
62561
|
+
{
|
|
62562
|
+
"name": "defaultChecked",
|
|
62563
|
+
"type": "boolean | undefined",
|
|
62564
|
+
"required": false
|
|
62565
|
+
},
|
|
62566
|
+
{
|
|
62567
|
+
"name": "defaultValue",
|
|
62568
|
+
"type": "string | number | readonly string[] | undefined",
|
|
62569
|
+
"required": false
|
|
62570
|
+
},
|
|
62571
|
+
{
|
|
62572
|
+
"name": "suppressContentEditableWarning",
|
|
62573
|
+
"type": "boolean | undefined",
|
|
62574
|
+
"required": false
|
|
62575
|
+
},
|
|
62576
|
+
{
|
|
62577
|
+
"name": "suppressHydrationWarning",
|
|
62578
|
+
"type": "boolean | undefined",
|
|
62579
|
+
"required": false
|
|
62580
|
+
},
|
|
62581
|
+
{
|
|
62582
|
+
"name": "accessKey",
|
|
62583
|
+
"type": "string | undefined",
|
|
62584
|
+
"required": false
|
|
62585
|
+
},
|
|
62586
|
+
{
|
|
62587
|
+
"name": "autoCapitalize",
|
|
62588
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
62589
|
+
"required": false
|
|
62590
|
+
},
|
|
62591
|
+
{
|
|
62592
|
+
"name": "autoFocus",
|
|
62593
|
+
"type": "boolean | undefined",
|
|
62594
|
+
"required": false
|
|
62595
|
+
},
|
|
62596
|
+
{
|
|
62597
|
+
"name": "contentEditable",
|
|
62598
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
62599
|
+
"required": false
|
|
62600
|
+
},
|
|
62601
|
+
{
|
|
62602
|
+
"name": "contextMenu",
|
|
62603
|
+
"type": "string | undefined",
|
|
62604
|
+
"required": false
|
|
62605
|
+
},
|
|
62606
|
+
{
|
|
62607
|
+
"name": "dir",
|
|
62608
|
+
"type": "string | undefined",
|
|
62609
|
+
"required": false
|
|
62610
|
+
},
|
|
62611
|
+
{
|
|
62612
|
+
"name": "draggable",
|
|
62613
|
+
"type": "Booleanish | undefined",
|
|
62614
|
+
"required": false
|
|
62615
|
+
},
|
|
62616
|
+
{
|
|
62617
|
+
"name": "enterKeyHint",
|
|
62618
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
62619
|
+
"required": false
|
|
62620
|
+
},
|
|
62621
|
+
{
|
|
62622
|
+
"name": "hidden",
|
|
62623
|
+
"type": "boolean | undefined",
|
|
62624
|
+
"required": false
|
|
62625
|
+
},
|
|
62626
|
+
{
|
|
62627
|
+
"name": "lang",
|
|
62628
|
+
"type": "string | undefined",
|
|
62629
|
+
"required": false
|
|
62630
|
+
},
|
|
62631
|
+
{
|
|
62632
|
+
"name": "nonce",
|
|
62633
|
+
"type": "string | undefined",
|
|
62634
|
+
"required": false
|
|
62635
|
+
},
|
|
62636
|
+
{
|
|
62637
|
+
"name": "slot",
|
|
62638
|
+
"type": "string | undefined",
|
|
62639
|
+
"required": false
|
|
62640
|
+
},
|
|
62641
|
+
{
|
|
62642
|
+
"name": "spellCheck",
|
|
62643
|
+
"type": "Booleanish | undefined",
|
|
62644
|
+
"required": false
|
|
62645
|
+
},
|
|
62646
|
+
{
|
|
62647
|
+
"name": "tabIndex",
|
|
62648
|
+
"type": "number | undefined",
|
|
62649
|
+
"required": false
|
|
62650
|
+
},
|
|
62651
|
+
{
|
|
62652
|
+
"name": "title",
|
|
62653
|
+
"type": "string | undefined",
|
|
62654
|
+
"required": false
|
|
62655
|
+
},
|
|
62656
|
+
{
|
|
62657
|
+
"name": "translate",
|
|
62658
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
62659
|
+
"required": false
|
|
62660
|
+
},
|
|
62661
|
+
{
|
|
62662
|
+
"name": "radioGroup",
|
|
62663
|
+
"type": "string | undefined",
|
|
62664
|
+
"required": false
|
|
62665
|
+
},
|
|
62666
|
+
{
|
|
62667
|
+
"name": "role",
|
|
62668
|
+
"type": "AriaRole | undefined",
|
|
62669
|
+
"required": false
|
|
62670
|
+
},
|
|
62671
|
+
{
|
|
62672
|
+
"name": "about",
|
|
62673
|
+
"type": "string | undefined",
|
|
62674
|
+
"required": false
|
|
62675
|
+
},
|
|
62676
|
+
{
|
|
62677
|
+
"name": "content",
|
|
62678
|
+
"type": "string | undefined",
|
|
62679
|
+
"required": false
|
|
62680
|
+
},
|
|
62681
|
+
{
|
|
62682
|
+
"name": "datatype",
|
|
62683
|
+
"type": "string | undefined",
|
|
62684
|
+
"required": false
|
|
62685
|
+
},
|
|
62686
|
+
{
|
|
62687
|
+
"name": "inlist",
|
|
62688
|
+
"type": "any",
|
|
62689
|
+
"required": false
|
|
62690
|
+
},
|
|
62691
|
+
{
|
|
62692
|
+
"name": "prefix",
|
|
62693
|
+
"type": "string | undefined",
|
|
62694
|
+
"required": false
|
|
62695
|
+
},
|
|
62696
|
+
{
|
|
62697
|
+
"name": "property",
|
|
62698
|
+
"type": "string | undefined",
|
|
62699
|
+
"required": false
|
|
62700
|
+
},
|
|
62701
|
+
{
|
|
62702
|
+
"name": "rel",
|
|
62703
|
+
"type": "string | undefined",
|
|
62704
|
+
"required": false
|
|
62705
|
+
},
|
|
62706
|
+
{
|
|
62707
|
+
"name": "resource",
|
|
62708
|
+
"type": "string | undefined",
|
|
62709
|
+
"required": false
|
|
62710
|
+
},
|
|
62711
|
+
{
|
|
62712
|
+
"name": "rev",
|
|
62713
|
+
"type": "string | undefined",
|
|
62714
|
+
"required": false
|
|
62715
|
+
},
|
|
62716
|
+
{
|
|
62717
|
+
"name": "typeof",
|
|
62718
|
+
"type": "string | undefined",
|
|
62719
|
+
"required": false
|
|
62720
|
+
},
|
|
62721
|
+
{
|
|
62722
|
+
"name": "vocab",
|
|
62723
|
+
"type": "string | undefined",
|
|
62724
|
+
"required": false
|
|
62725
|
+
},
|
|
62726
|
+
{
|
|
62727
|
+
"name": "autoCorrect",
|
|
62728
|
+
"type": "string | undefined",
|
|
62729
|
+
"required": false
|
|
62730
|
+
},
|
|
62731
|
+
{
|
|
62732
|
+
"name": "autoSave",
|
|
62733
|
+
"type": "string | undefined",
|
|
62734
|
+
"required": false
|
|
62735
|
+
},
|
|
62736
|
+
{
|
|
62737
|
+
"name": "itemProp",
|
|
62738
|
+
"type": "string | undefined",
|
|
62739
|
+
"required": false
|
|
62740
|
+
},
|
|
62741
|
+
{
|
|
62742
|
+
"name": "itemScope",
|
|
62743
|
+
"type": "boolean | undefined",
|
|
62744
|
+
"required": false
|
|
62745
|
+
},
|
|
62746
|
+
{
|
|
62747
|
+
"name": "itemType",
|
|
62748
|
+
"type": "string | undefined",
|
|
62749
|
+
"required": false
|
|
62750
|
+
},
|
|
62751
|
+
{
|
|
62752
|
+
"name": "itemID",
|
|
62753
|
+
"type": "string | undefined",
|
|
62754
|
+
"required": false
|
|
62755
|
+
},
|
|
62756
|
+
{
|
|
62757
|
+
"name": "itemRef",
|
|
62758
|
+
"type": "string | undefined",
|
|
62759
|
+
"required": false
|
|
62760
|
+
},
|
|
62761
|
+
{
|
|
62762
|
+
"name": "results",
|
|
62763
|
+
"type": "number | undefined",
|
|
62764
|
+
"required": false
|
|
62765
|
+
},
|
|
62766
|
+
{
|
|
62767
|
+
"name": "security",
|
|
62768
|
+
"type": "string | undefined",
|
|
62769
|
+
"required": false
|
|
62770
|
+
},
|
|
62771
|
+
{
|
|
62772
|
+
"name": "unselectable",
|
|
62773
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
62774
|
+
"required": false
|
|
62775
|
+
},
|
|
62776
|
+
{
|
|
62777
|
+
"name": "popover",
|
|
62778
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
62779
|
+
"required": false
|
|
62780
|
+
},
|
|
62781
|
+
{
|
|
62782
|
+
"name": "popoverTargetAction",
|
|
62783
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
62784
|
+
"required": false
|
|
62785
|
+
},
|
|
62786
|
+
{
|
|
62787
|
+
"name": "popoverTarget",
|
|
62788
|
+
"type": "string | undefined",
|
|
62789
|
+
"required": false
|
|
62790
|
+
},
|
|
62791
|
+
{
|
|
62792
|
+
"name": "inert",
|
|
62793
|
+
"type": "boolean | undefined",
|
|
62794
|
+
"required": false,
|
|
62795
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
62796
|
+
},
|
|
62797
|
+
{
|
|
62798
|
+
"name": "inputMode",
|
|
62799
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
62800
|
+
"required": false,
|
|
62801
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
62802
|
+
},
|
|
62803
|
+
{
|
|
62804
|
+
"name": "is",
|
|
62805
|
+
"type": "string | undefined",
|
|
62806
|
+
"required": false,
|
|
62807
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
62808
|
+
},
|
|
62809
|
+
{
|
|
62810
|
+
"name": "exportparts",
|
|
62811
|
+
"type": "string | undefined",
|
|
62812
|
+
"required": false,
|
|
62813
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
62814
|
+
},
|
|
62815
|
+
{
|
|
62816
|
+
"name": "part",
|
|
62817
|
+
"type": "string | undefined",
|
|
62818
|
+
"required": false,
|
|
62819
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
62820
|
+
},
|
|
62821
|
+
{
|
|
62822
|
+
"name": "disabled",
|
|
62823
|
+
"type": "boolean | undefined",
|
|
62824
|
+
"required": false
|
|
62825
|
+
},
|
|
62826
|
+
{
|
|
62827
|
+
"name": "formAction",
|
|
62828
|
+
"type": "string | ((formData: FormData) => void | Promise<void>) | undefined",
|
|
62829
|
+
"required": false
|
|
62830
|
+
},
|
|
62831
|
+
{
|
|
62832
|
+
"name": "formEncType",
|
|
62833
|
+
"type": "string | undefined",
|
|
62834
|
+
"required": false
|
|
62835
|
+
},
|
|
62836
|
+
{
|
|
62837
|
+
"name": "formMethod",
|
|
62838
|
+
"type": "string | undefined",
|
|
62839
|
+
"required": false
|
|
62840
|
+
},
|
|
62841
|
+
{
|
|
62842
|
+
"name": "formNoValidate",
|
|
62843
|
+
"type": "boolean | undefined",
|
|
62844
|
+
"required": false
|
|
62845
|
+
},
|
|
62846
|
+
{
|
|
62847
|
+
"name": "formTarget",
|
|
62848
|
+
"type": "string | undefined",
|
|
62849
|
+
"required": false
|
|
62850
|
+
},
|
|
62851
|
+
{
|
|
62852
|
+
"name": "name",
|
|
62853
|
+
"type": "string | undefined",
|
|
62854
|
+
"required": false
|
|
62855
|
+
},
|
|
62856
|
+
{
|
|
62857
|
+
"name": "type",
|
|
62858
|
+
"type": "\"button\" | \"submit\" | \"reset\" | undefined",
|
|
62859
|
+
"required": false
|
|
62860
|
+
}
|
|
62861
|
+
]
|
|
62862
|
+
}
|
|
62863
|
+
],
|
|
62864
|
+
"examples": [
|
|
62865
|
+
{
|
|
62866
|
+
"name": "Basic",
|
|
62867
|
+
"code": "() => (\n <div className='w-640'>\n <OverflowList\n className='gap-4'\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </div>\n)",
|
|
62868
|
+
"description": "All nine tags fit in 640px, so the overflow chip never appears."
|
|
62869
|
+
},
|
|
62870
|
+
{
|
|
62871
|
+
"name": "Collapsed",
|
|
62872
|
+
"code": "() => (\n <div className='w-200'>\n <OverflowList\n className='gap-4'\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </div>\n)",
|
|
62873
|
+
"description": "The same nine in 200px: two survive and the `+N` takes the rest, which is the whole job."
|
|
62874
|
+
},
|
|
62875
|
+
{
|
|
62876
|
+
"name": "CollapseFromStart",
|
|
62877
|
+
"code": "() => (\n <div className='w-240'>\n <OverflowList\n className='gap-4'\n collapseFrom='start'\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </div>\n)",
|
|
62878
|
+
"description": "`collapseFrom='start'` hides the beginning and keeps the end in view — for a path or a\nhistory where the most recent items are the ones that matter."
|
|
62879
|
+
},
|
|
62880
|
+
{
|
|
62881
|
+
"name": "MinVisibleItems",
|
|
62882
|
+
"code": "() => (\n <div className='w-160 overflow-hidden rounded-2 border border-border-primary p-12'>\n <OverflowList\n className='gap-4'\n minVisibleItems={1}\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </div>\n)",
|
|
62883
|
+
"description": "`minVisibleItems` puts a floor under the measurement: however tight the column gets,\nthat many items stay and the rest go to the `+N` rather than the row emptying out."
|
|
62884
|
+
},
|
|
62885
|
+
{
|
|
62886
|
+
"name": "ResizableContainer",
|
|
62887
|
+
"code": "() => (\n <div\n data-testid='resizable-wrapper'\n className='overflow-hidden rounded-2 border border-border-primary p-12'\n style={{ width: 500, minWidth: 80, maxWidth: 800, resize: 'horizontal' }}\n >\n <OverflowList\n className='gap-4'\n data-testid='tags'\n items={TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </div>\n)",
|
|
62888
|
+
"description": "Drag the box's right edge: the split is re-measured as the width changes rather than at\nbreakpoints, which is what makes it safe inside a resizable panel."
|
|
62889
|
+
},
|
|
62890
|
+
{
|
|
62891
|
+
"name": "WithHeader",
|
|
62892
|
+
"code": "() => (\n <div className='w-120'>\n <OverflowList\n className='gap-4'\n data-testid='attacks'\n items={ATTACK_TYPES}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={() => (\n <OverflowListMore>\n <OverflowListMoreTrigger />\n <OverflowListMoreContent>\n <OverflowListMoreHeader>\n <OverflowListMoreCount of='total' /> attack types\n </OverflowListMoreHeader>\n <OverflowListMoreItems />\n </OverflowListMoreContent>\n </OverflowListMore>\n )}\n />\n </div>\n)",
|
|
62893
|
+
"description": "The full composition: a header counting every item over the popover list, built from\n`OverflowListMoreHeader` and `OverflowListMoreCount` in plain JSX. Items already in the\nrow are listed first and faded."
|
|
62894
|
+
},
|
|
62895
|
+
{
|
|
62896
|
+
"name": "HiddenOnly",
|
|
62897
|
+
"code": "() => (\n <div className='w-120'>\n <OverflowList\n className='gap-4'\n data-testid='attacks'\n items={ATTACK_TYPES}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={() => (\n <OverflowListMore>\n <OverflowListMoreTrigger>\n +<OverflowListMoreCount />\n </OverflowListMoreTrigger>\n <OverflowListMoreContent>\n <OverflowListMoreItems show='hidden' />\n </OverflowListMoreContent>\n </OverflowListMore>\n )}\n />\n </div>\n)",
|
|
62898
|
+
"description": "`show='hidden'` lists only what the row folded away — the pattern for editable\ncontexts such as a multi-select input, where the visible chips are right there."
|
|
62899
|
+
},
|
|
62900
|
+
{
|
|
62901
|
+
"name": "CoverPlacement",
|
|
62902
|
+
"code": "() => (\n <div className='w-120'>\n <OverflowList\n className='gap-4'\n data-testid='attacks'\n items={ATTACK_TYPES}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={() => <OverflowListMore placement='cover' />}\n />\n </div>\n)",
|
|
62903
|
+
"description": "`placement='cover'` opens the popover over the row itself, from its left edge."
|
|
62904
|
+
},
|
|
62905
|
+
{
|
|
62906
|
+
"name": "PluralizedHeader",
|
|
62907
|
+
"code": "() => (\n <div className='w-120'>\n <OverflowList\n className='gap-4'\n items={ATTACK_TYPES}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={() => (\n <OverflowListMore>\n <OverflowListMoreTrigger />\n <OverflowListMoreContent>\n <PluralHeader />\n <OverflowListMoreItems />\n </OverflowListMoreContent>\n </OverflowListMore>\n )}\n />\n </div>\n)",
|
|
62908
|
+
"description": "When the header needs the number as a value — pluralization, i18n — read it with\n`useOverflowListMore()` inside your own component instead of `OverflowListMoreCount`."
|
|
62909
|
+
},
|
|
62910
|
+
{
|
|
62911
|
+
"name": "CustomRenderer",
|
|
62912
|
+
"code": "() => (\n <div className='w-120'>\n <OverflowList\n className='gap-4'\n items={ATTACK_TYPES}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n overflowRenderer={hidden => <Tag>and {hidden.length} others</Tag>}\n />\n </div>\n)",
|
|
62913
|
+
"description": "`overflowRenderer` is just a function of the hidden items — anything goes, no popover\nrequired."
|
|
62914
|
+
}
|
|
62915
|
+
]
|
|
62916
|
+
},
|
|
62917
|
+
{
|
|
62918
|
+
"name": "OverflowTooltip",
|
|
62919
|
+
"description": "Root component for OverflowTooltip.\nAutomatically detects overflow in child elements.",
|
|
62920
|
+
"importPath": "@wallarm-org/design-system/OverflowTooltip",
|
|
62921
|
+
"props": [
|
|
62922
|
+
{
|
|
62923
|
+
"name": "forceTooltip",
|
|
62924
|
+
"type": "boolean | undefined",
|
|
62925
|
+
"required": false,
|
|
62926
|
+
"defaultValue": "false"
|
|
62927
|
+
},
|
|
62928
|
+
{
|
|
62929
|
+
"name": "positioning",
|
|
62930
|
+
"type": "PositioningOptions | undefined",
|
|
62931
|
+
"required": false
|
|
62932
|
+
}
|
|
62933
|
+
],
|
|
62934
|
+
"variants": [],
|
|
62935
|
+
"subComponents": [
|
|
62936
|
+
{
|
|
62937
|
+
"name": "OverflowTooltipContent",
|
|
62938
|
+
"props": [
|
|
62939
|
+
{
|
|
62940
|
+
"name": "maxWidth",
|
|
62941
|
+
"type": "number | undefined",
|
|
62942
|
+
"required": false,
|
|
62943
|
+
"defaultValue": "400"
|
|
62944
|
+
}
|
|
62945
|
+
]
|
|
62946
|
+
},
|
|
62947
|
+
{
|
|
62948
|
+
"name": "OverflowTooltipTrigger",
|
|
62949
|
+
"props": [
|
|
62950
|
+
{
|
|
62951
|
+
"name": "asChild",
|
|
62952
|
+
"type": "boolean | undefined",
|
|
62953
|
+
"required": false,
|
|
62954
|
+
"defaultValue": "true"
|
|
62955
|
+
}
|
|
62956
|
+
]
|
|
62957
|
+
}
|
|
62958
|
+
],
|
|
62959
|
+
"examples": [
|
|
62960
|
+
{
|
|
62961
|
+
"name": "AutoDetection",
|
|
62962
|
+
"code": "() => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>short — no tooltip</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>Short text</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n This won't show because text isn't overflowing\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>long — tooltip</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n This is a very long text that will be truncated and automatically show a tooltip when\n hovered\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n This is a very long text that will be truncated and automatically show a tooltip when\n hovered\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
62963
|
+
"description": "A single truncated line. The tooltip appears only when the text is cut — resize the frame and\nit stops offering one."
|
|
62964
|
+
},
|
|
62965
|
+
{
|
|
62966
|
+
"name": "MultiLineAutoDetection",
|
|
62967
|
+
"code": "() => {\n const longText =\n 'This is a very long text that demonstrates multi-line truncation. It keeps going and going to show how the component handles text that exceeds multiple lines. The tooltip will appear when you hover over the truncated content. And it continues even more to ensure we have enough content for demonstration purposes.';\n\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>line-clamp-2</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='line-clamp-2'>{longText}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>line-clamp-3</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='line-clamp-3'>{longText}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>line-clamp-4</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='line-clamp-4'>{longText}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{longText}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
62968
|
+
"description": "The same with `line-clamp`, where truncation happens at the block rather than the line."
|
|
62969
|
+
},
|
|
62970
|
+
{
|
|
62971
|
+
"name": "NestedElements",
|
|
62972
|
+
"code": "() => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>one level deep</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='border p-4'>\n <h3 className='font-bold mb-2'>Card Title</h3>\n <p className='truncate'>\n This is a nested element with truncate that will be automatically detected for\n overflow\n </p>\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n This is a nested element with truncate that will be automatically detected for overflow\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>several, each truncating</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='border p-4'>\n <h3 className='font-bold mb-2 truncate'>\n This is a very long title that might be truncated\n </h3>\n <p className='line-clamp-2'>\n And this is a description that can span multiple lines but will be clamped to just\n two lines. The component will detect if either of these elements overflow.\n </p>\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div>\n <strong>Title:</strong> This is a very long title that might be truncated\n <br />\n <strong>Description:</strong> And this is a description that can span multiple lines\n but will be clamped to just two lines. The component will detect if either of these\n elements overflow.\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
62973
|
+
"description": "The truncating element is somewhere inside the children, which is the usual case — it is\nfound rather than declared."
|
|
62974
|
+
},
|
|
62975
|
+
{
|
|
62976
|
+
"name": "CustomTooltipContent",
|
|
62977
|
+
"code": "() => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>rich content</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='flex flex-col gap-2'>\n <div className='font-medium text-sm'>API Endpoint</div>\n <code className='rounded-6 bg-component-kbi-tooltip-bg px-4 py-2 font-mono text-text-primary-alt text-xs'>\n /api/v1/users/1234567890/sessions/abc-def-ghi-jkl-mno/tokens/refresh\n </code>\n <div className='text-xs text-text-secondary'>\n Method: POST\n <br />\n Auth: Bearer Token\n </div>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>table-like content</p>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>\n user@example.com - Administrator - Last login: 2024-01-15\n </div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='grid grid-cols-2 gap-2 text-sm'>\n <span className='font-medium'>Email:</span>\n <span>user@example.com</span>\n <span className='font-medium'>Role:</span>\n <span>Administrator</span>\n <span className='font-medium'>Last Login:</span>\n <span>2024-01-15</span>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
62978
|
+
"description": "Overriding the content, for when the full value needs formatting the truncated one does not\nhave."
|
|
62979
|
+
},
|
|
62980
|
+
{
|
|
62981
|
+
"name": "ForceTooltip",
|
|
62982
|
+
"code": "() => {\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <p className='sb-annotation mb-8'>forced, nothing truncated</p>\n <OverflowTooltip forceTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate w-fit'>Short text</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n This tooltip is forced to show even though the text isn't truncated\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>forced, with extra detail</p>\n <OverflowTooltip forceTooltip>\n <OverflowTooltipTrigger>\n <Button variant='outline' color='neutral'>\n Click for info\n </Button>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>\n <div className='flex flex-col gap-2'>\n <strong>Additional Information</strong>\n <span className='text-sm'>\n This tooltip provides extra context even when the trigger element doesn't have\n overflow.\n </span>\n </div>\n </OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
62983
|
+
"description": "Forcing it on regardless of truncation. Reach for a plain `Tooltip` instead if the answer is\nalways yes — this prop exists for the case that switches."
|
|
62984
|
+
},
|
|
62985
|
+
{
|
|
62986
|
+
"name": "DifferentSides",
|
|
62987
|
+
"code": "() => {\n const text = 'This is a text that will be truncated and show tooltips on different sides';\n\n return (\n <div className='font-sans flex flex-col gap-32 w-300 py-32'>\n <div>\n <p className='sb-annotation mb-8'>top — the default</p>\n <OverflowTooltip positioning={{ placement: 'top' }}>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>bottom</p>\n <OverflowTooltip positioning={{ placement: 'bottom' }}>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>left</p>\n <OverflowTooltip positioning={{ placement: 'left' }}>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <div>\n <p className='sb-annotation mb-8'>right</p>\n <OverflowTooltip positioning={{ placement: 'right' }}>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n </div>\n );\n}",
|
|
62988
|
+
"description": "Placement around the trigger. In a table, keep it off the side the reader is scanning."
|
|
62989
|
+
},
|
|
62990
|
+
{
|
|
62991
|
+
"name": "DynamicContent",
|
|
62992
|
+
"code": "() => {\n const [text, setText] = useState('Click the button to change this text');\n\n return (\n <div className='font-sans flex flex-col gap-16 w-300'>\n <div>\n <OverflowTooltip>\n <OverflowTooltipTrigger>\n <div className='truncate'>{text}</div>\n </OverflowTooltipTrigger>\n <OverflowTooltipContent>{text}</OverflowTooltipContent>\n </OverflowTooltip>\n </div>\n\n <Button\n variant='outline'\n color='neutral'\n onClick={() => {\n const texts = [\n 'Short text',\n 'This is a medium length text that might overflow',\n 'This is a very long text that will definitely overflow and show a tooltip when you hover over it',\n 'Another short one',\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',\n ];\n setText(texts[Math.floor(Math.random() * texts.length)] ?? 'Short text');\n }}\n >\n Change Text\n </Button>\n </div>\n );\n}",
|
|
62993
|
+
"description": "Content that changes after mount. The measurement is re-taken rather than cached from first\nrender, so text that grows past its box gains a tooltip without being remounted."
|
|
62994
|
+
}
|
|
62995
|
+
]
|
|
62996
|
+
},
|
|
62997
|
+
{
|
|
62998
|
+
"name": "Overlay",
|
|
62999
|
+
"importPath": "@wallarm-org/design-system/Overlay",
|
|
63000
|
+
"props": [],
|
|
63001
|
+
"variants": [],
|
|
63002
|
+
"subComponents": [],
|
|
63003
|
+
"examples": [
|
|
63004
|
+
{
|
|
63005
|
+
"name": "Basic",
|
|
63006
|
+
"code": "() => <Overlay />",
|
|
63007
|
+
"description": "The scrim over a page of text, which is the whole of what it does. Its fade keys off a `data-state` the parent sets, so on its own it just sits there — the behaviour comes from the headless backdrop you wrap it in."
|
|
63008
|
+
}
|
|
63009
|
+
]
|
|
63010
|
+
},
|
|
63011
|
+
{
|
|
63012
|
+
"name": "Page",
|
|
63013
|
+
"importPath": "@wallarm-org/design-system/Page",
|
|
63014
|
+
"props": [
|
|
63015
|
+
{
|
|
63016
|
+
"name": "name",
|
|
63017
|
+
"type": "string | undefined",
|
|
63018
|
+
"required": false
|
|
63019
|
+
},
|
|
63020
|
+
{
|
|
63021
|
+
"name": "title",
|
|
63022
|
+
"type": "string | undefined",
|
|
63023
|
+
"required": false
|
|
63024
|
+
},
|
|
63025
|
+
{
|
|
63026
|
+
"name": "fullSize",
|
|
63027
|
+
"type": "boolean | undefined",
|
|
63028
|
+
"required": false
|
|
63029
|
+
},
|
|
63030
|
+
{
|
|
63031
|
+
"name": "fixedHeight",
|
|
63032
|
+
"type": "boolean | undefined",
|
|
63033
|
+
"required": false
|
|
63034
|
+
},
|
|
63035
|
+
{
|
|
63036
|
+
"name": "contained",
|
|
63037
|
+
"type": "boolean | undefined",
|
|
63038
|
+
"required": false
|
|
63039
|
+
},
|
|
63040
|
+
{
|
|
63041
|
+
"name": "defaultChecked",
|
|
63042
|
+
"type": "boolean | undefined",
|
|
63043
|
+
"required": false
|
|
63044
|
+
},
|
|
63045
|
+
{
|
|
63046
|
+
"name": "defaultValue",
|
|
63047
|
+
"type": "string | number | readonly string[] | undefined",
|
|
63048
|
+
"required": false
|
|
63049
|
+
},
|
|
63050
|
+
{
|
|
63051
|
+
"name": "suppressContentEditableWarning",
|
|
63052
|
+
"type": "boolean | undefined",
|
|
63053
|
+
"required": false
|
|
63054
|
+
},
|
|
63055
|
+
{
|
|
63056
|
+
"name": "suppressHydrationWarning",
|
|
63057
|
+
"type": "boolean | undefined",
|
|
63058
|
+
"required": false
|
|
63059
|
+
},
|
|
63060
|
+
{
|
|
63061
|
+
"name": "accessKey",
|
|
63062
|
+
"type": "string | undefined",
|
|
63063
|
+
"required": false
|
|
63064
|
+
},
|
|
63065
|
+
{
|
|
63066
|
+
"name": "autoCapitalize",
|
|
63067
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
63068
|
+
"required": false
|
|
63069
|
+
},
|
|
63070
|
+
{
|
|
63071
|
+
"name": "autoFocus",
|
|
63072
|
+
"type": "boolean | undefined",
|
|
63073
|
+
"required": false
|
|
63074
|
+
},
|
|
63075
|
+
{
|
|
63076
|
+
"name": "contentEditable",
|
|
63077
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
63078
|
+
"required": false
|
|
63079
|
+
},
|
|
63080
|
+
{
|
|
63081
|
+
"name": "contextMenu",
|
|
63082
|
+
"type": "string | undefined",
|
|
63083
|
+
"required": false
|
|
63084
|
+
},
|
|
63085
|
+
{
|
|
63086
|
+
"name": "dir",
|
|
63087
|
+
"type": "string | undefined",
|
|
63088
|
+
"required": false
|
|
63089
|
+
},
|
|
63090
|
+
{
|
|
63091
|
+
"name": "draggable",
|
|
63092
|
+
"type": "Booleanish | undefined",
|
|
63093
|
+
"required": false
|
|
63094
|
+
},
|
|
63095
|
+
{
|
|
63096
|
+
"name": "enterKeyHint",
|
|
63097
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
63098
|
+
"required": false
|
|
63099
|
+
},
|
|
63100
|
+
{
|
|
63101
|
+
"name": "hidden",
|
|
63102
|
+
"type": "boolean | undefined",
|
|
63103
|
+
"required": false
|
|
63104
|
+
},
|
|
63105
|
+
{
|
|
63106
|
+
"name": "id",
|
|
63107
|
+
"type": "string | undefined",
|
|
63108
|
+
"required": false
|
|
63109
|
+
},
|
|
63110
|
+
{
|
|
63111
|
+
"name": "lang",
|
|
63112
|
+
"type": "string | undefined",
|
|
63113
|
+
"required": false
|
|
63114
|
+
},
|
|
63115
|
+
{
|
|
63116
|
+
"name": "nonce",
|
|
63117
|
+
"type": "string | undefined",
|
|
63118
|
+
"required": false
|
|
63119
|
+
},
|
|
63120
|
+
{
|
|
63121
|
+
"name": "slot",
|
|
63122
|
+
"type": "string | undefined",
|
|
63123
|
+
"required": false
|
|
63124
|
+
},
|
|
63125
|
+
{
|
|
63126
|
+
"name": "spellCheck",
|
|
63127
|
+
"type": "Booleanish | undefined",
|
|
63128
|
+
"required": false
|
|
63129
|
+
},
|
|
63130
|
+
{
|
|
63131
|
+
"name": "tabIndex",
|
|
63132
|
+
"type": "number | undefined",
|
|
63133
|
+
"required": false
|
|
63134
|
+
},
|
|
63135
|
+
{
|
|
63136
|
+
"name": "translate",
|
|
63137
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
63138
|
+
"required": false
|
|
63139
|
+
},
|
|
63140
|
+
{
|
|
63141
|
+
"name": "radioGroup",
|
|
63142
|
+
"type": "string | undefined",
|
|
63143
|
+
"required": false
|
|
63144
|
+
},
|
|
63145
|
+
{
|
|
63146
|
+
"name": "role",
|
|
63147
|
+
"type": "AriaRole | undefined",
|
|
63148
|
+
"required": false
|
|
63149
|
+
},
|
|
63150
|
+
{
|
|
63151
|
+
"name": "about",
|
|
63152
|
+
"type": "string | undefined",
|
|
63153
|
+
"required": false
|
|
63154
|
+
},
|
|
63155
|
+
{
|
|
63156
|
+
"name": "content",
|
|
63157
|
+
"type": "string | undefined",
|
|
63158
|
+
"required": false
|
|
63159
|
+
},
|
|
63160
|
+
{
|
|
63161
|
+
"name": "datatype",
|
|
63162
|
+
"type": "string | undefined",
|
|
63163
|
+
"required": false
|
|
63164
|
+
},
|
|
63165
|
+
{
|
|
63166
|
+
"name": "inlist",
|
|
63167
|
+
"type": "any",
|
|
63168
|
+
"required": false
|
|
63169
|
+
},
|
|
63170
|
+
{
|
|
63171
|
+
"name": "prefix",
|
|
63172
|
+
"type": "string | undefined",
|
|
63173
|
+
"required": false
|
|
63174
|
+
},
|
|
63175
|
+
{
|
|
63176
|
+
"name": "property",
|
|
63177
|
+
"type": "string | undefined",
|
|
63178
|
+
"required": false
|
|
63179
|
+
},
|
|
63180
|
+
{
|
|
63181
|
+
"name": "rel",
|
|
63182
|
+
"type": "string | undefined",
|
|
63183
|
+
"required": false
|
|
63184
|
+
},
|
|
63185
|
+
{
|
|
63186
|
+
"name": "resource",
|
|
63187
|
+
"type": "string | undefined",
|
|
63188
|
+
"required": false
|
|
63189
|
+
},
|
|
63190
|
+
{
|
|
63191
|
+
"name": "rev",
|
|
63192
|
+
"type": "string | undefined",
|
|
63193
|
+
"required": false
|
|
63194
|
+
},
|
|
63195
|
+
{
|
|
63196
|
+
"name": "typeof",
|
|
63197
|
+
"type": "string | undefined",
|
|
63198
|
+
"required": false
|
|
63199
|
+
},
|
|
63200
|
+
{
|
|
63201
|
+
"name": "vocab",
|
|
63202
|
+
"type": "string | undefined",
|
|
63203
|
+
"required": false
|
|
63204
|
+
},
|
|
63205
|
+
{
|
|
63206
|
+
"name": "autoCorrect",
|
|
63207
|
+
"type": "string | undefined",
|
|
63208
|
+
"required": false
|
|
63209
|
+
},
|
|
63210
|
+
{
|
|
63211
|
+
"name": "autoSave",
|
|
63212
|
+
"type": "string | undefined",
|
|
63213
|
+
"required": false
|
|
63214
|
+
},
|
|
63215
|
+
{
|
|
63216
|
+
"name": "color",
|
|
63217
|
+
"type": "string | undefined",
|
|
63218
|
+
"required": false
|
|
63219
|
+
},
|
|
63220
|
+
{
|
|
63221
|
+
"name": "itemProp",
|
|
63222
|
+
"type": "string | undefined",
|
|
63223
|
+
"required": false
|
|
63224
|
+
},
|
|
63225
|
+
{
|
|
63226
|
+
"name": "itemScope",
|
|
63227
|
+
"type": "boolean | undefined",
|
|
63228
|
+
"required": false
|
|
63229
|
+
},
|
|
63230
|
+
{
|
|
63231
|
+
"name": "itemType",
|
|
63232
|
+
"type": "string | undefined",
|
|
63233
|
+
"required": false
|
|
63234
|
+
},
|
|
63235
|
+
{
|
|
63236
|
+
"name": "itemID",
|
|
63237
|
+
"type": "string | undefined",
|
|
63238
|
+
"required": false
|
|
63239
|
+
},
|
|
63240
|
+
{
|
|
63241
|
+
"name": "itemRef",
|
|
63242
|
+
"type": "string | undefined",
|
|
63243
|
+
"required": false
|
|
63244
|
+
},
|
|
63245
|
+
{
|
|
63246
|
+
"name": "results",
|
|
63247
|
+
"type": "number | undefined",
|
|
63248
|
+
"required": false
|
|
63249
|
+
},
|
|
63250
|
+
{
|
|
63251
|
+
"name": "security",
|
|
63252
|
+
"type": "string | undefined",
|
|
63253
|
+
"required": false
|
|
63254
|
+
},
|
|
63255
|
+
{
|
|
63256
|
+
"name": "unselectable",
|
|
63257
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
63258
|
+
"required": false
|
|
63259
|
+
},
|
|
63260
|
+
{
|
|
63261
|
+
"name": "popover",
|
|
63262
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
63263
|
+
"required": false
|
|
63264
|
+
},
|
|
63265
|
+
{
|
|
63266
|
+
"name": "popoverTargetAction",
|
|
63267
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
63268
|
+
"required": false
|
|
63269
|
+
},
|
|
63270
|
+
{
|
|
63271
|
+
"name": "popoverTarget",
|
|
63272
|
+
"type": "string | undefined",
|
|
63273
|
+
"required": false
|
|
63274
|
+
},
|
|
63275
|
+
{
|
|
63276
|
+
"name": "inert",
|
|
63277
|
+
"type": "boolean | undefined",
|
|
63278
|
+
"required": false,
|
|
63279
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
63280
|
+
},
|
|
63281
|
+
{
|
|
63282
|
+
"name": "inputMode",
|
|
63283
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
63284
|
+
"required": false,
|
|
63285
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
63286
|
+
},
|
|
63287
|
+
{
|
|
63288
|
+
"name": "is",
|
|
63289
|
+
"type": "string | undefined",
|
|
63290
|
+
"required": false,
|
|
63291
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
63292
|
+
},
|
|
63293
|
+
{
|
|
63294
|
+
"name": "exportparts",
|
|
63295
|
+
"type": "string | undefined",
|
|
63296
|
+
"required": false,
|
|
63297
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
63298
|
+
},
|
|
63299
|
+
{
|
|
63300
|
+
"name": "part",
|
|
63301
|
+
"type": "string | undefined",
|
|
63302
|
+
"required": false,
|
|
63303
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
63304
|
+
}
|
|
63305
|
+
],
|
|
63306
|
+
"variants": [
|
|
63307
|
+
{
|
|
63308
|
+
"name": "active",
|
|
63309
|
+
"options": [
|
|
63310
|
+
"true",
|
|
63311
|
+
"false"
|
|
63312
|
+
],
|
|
63313
|
+
"defaultValue": "false"
|
|
63314
|
+
}
|
|
63315
|
+
],
|
|
63316
|
+
"subComponents": [
|
|
63317
|
+
{
|
|
63318
|
+
"name": "PageActions",
|
|
63319
|
+
"props": [
|
|
63320
|
+
{
|
|
63321
|
+
"name": "defaultChecked",
|
|
63322
|
+
"type": "boolean | undefined",
|
|
63323
|
+
"required": false
|
|
63324
|
+
},
|
|
63325
|
+
{
|
|
63326
|
+
"name": "defaultValue",
|
|
63327
|
+
"type": "string | number | readonly string[] | undefined",
|
|
63328
|
+
"required": false
|
|
63329
|
+
},
|
|
63330
|
+
{
|
|
63331
|
+
"name": "suppressContentEditableWarning",
|
|
63332
|
+
"type": "boolean | undefined",
|
|
63333
|
+
"required": false
|
|
63334
|
+
},
|
|
63335
|
+
{
|
|
63336
|
+
"name": "suppressHydrationWarning",
|
|
63337
|
+
"type": "boolean | undefined",
|
|
63338
|
+
"required": false
|
|
63339
|
+
},
|
|
63340
|
+
{
|
|
63341
|
+
"name": "accessKey",
|
|
63342
|
+
"type": "string | undefined",
|
|
63343
|
+
"required": false
|
|
63344
|
+
},
|
|
63345
|
+
{
|
|
63346
|
+
"name": "autoCapitalize",
|
|
63347
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
63348
|
+
"required": false
|
|
63349
|
+
},
|
|
63350
|
+
{
|
|
63351
|
+
"name": "autoFocus",
|
|
63352
|
+
"type": "boolean | undefined",
|
|
63353
|
+
"required": false
|
|
63354
|
+
},
|
|
63355
|
+
{
|
|
63356
|
+
"name": "contentEditable",
|
|
63357
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
63358
|
+
"required": false
|
|
63359
|
+
},
|
|
63360
|
+
{
|
|
63361
|
+
"name": "contextMenu",
|
|
63362
|
+
"type": "string | undefined",
|
|
63363
|
+
"required": false
|
|
63364
|
+
},
|
|
63365
|
+
{
|
|
63366
|
+
"name": "dir",
|
|
63367
|
+
"type": "string | undefined",
|
|
63368
|
+
"required": false
|
|
63369
|
+
},
|
|
63370
|
+
{
|
|
63371
|
+
"name": "draggable",
|
|
63372
|
+
"type": "Booleanish | undefined",
|
|
63373
|
+
"required": false
|
|
63374
|
+
},
|
|
63375
|
+
{
|
|
63376
|
+
"name": "enterKeyHint",
|
|
63377
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
63378
|
+
"required": false
|
|
63379
|
+
},
|
|
63380
|
+
{
|
|
63381
|
+
"name": "hidden",
|
|
63382
|
+
"type": "boolean | undefined",
|
|
63383
|
+
"required": false
|
|
63384
|
+
},
|
|
63385
|
+
{
|
|
63386
|
+
"name": "id",
|
|
63387
|
+
"type": "string | undefined",
|
|
63388
|
+
"required": false
|
|
63389
|
+
},
|
|
63390
|
+
{
|
|
63391
|
+
"name": "lang",
|
|
63392
|
+
"type": "string | undefined",
|
|
63393
|
+
"required": false
|
|
63394
|
+
},
|
|
63395
|
+
{
|
|
63396
|
+
"name": "nonce",
|
|
63397
|
+
"type": "string | undefined",
|
|
63398
|
+
"required": false
|
|
63399
|
+
},
|
|
63400
|
+
{
|
|
63401
|
+
"name": "slot",
|
|
63402
|
+
"type": "string | undefined",
|
|
63403
|
+
"required": false
|
|
63404
|
+
},
|
|
63405
|
+
{
|
|
63406
|
+
"name": "spellCheck",
|
|
63407
|
+
"type": "Booleanish | undefined",
|
|
63408
|
+
"required": false
|
|
63409
|
+
},
|
|
63410
|
+
{
|
|
63411
|
+
"name": "tabIndex",
|
|
63412
|
+
"type": "number | undefined",
|
|
63413
|
+
"required": false
|
|
63414
|
+
},
|
|
63415
|
+
{
|
|
63416
|
+
"name": "title",
|
|
63417
|
+
"type": "string | undefined",
|
|
63418
|
+
"required": false
|
|
63419
|
+
},
|
|
63420
|
+
{
|
|
63421
|
+
"name": "translate",
|
|
63422
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
63423
|
+
"required": false
|
|
63424
|
+
},
|
|
63425
|
+
{
|
|
63426
|
+
"name": "radioGroup",
|
|
63427
|
+
"type": "string | undefined",
|
|
63428
|
+
"required": false
|
|
63429
|
+
},
|
|
63430
|
+
{
|
|
63431
|
+
"name": "role",
|
|
63432
|
+
"type": "AriaRole | undefined",
|
|
63433
|
+
"required": false
|
|
63434
|
+
},
|
|
63435
|
+
{
|
|
63436
|
+
"name": "about",
|
|
63437
|
+
"type": "string | undefined",
|
|
63438
|
+
"required": false
|
|
63439
|
+
},
|
|
63440
|
+
{
|
|
63441
|
+
"name": "content",
|
|
63442
|
+
"type": "string | undefined",
|
|
63443
|
+
"required": false
|
|
63444
|
+
},
|
|
63445
|
+
{
|
|
63446
|
+
"name": "datatype",
|
|
63447
|
+
"type": "string | undefined",
|
|
63448
|
+
"required": false
|
|
63449
|
+
},
|
|
63450
|
+
{
|
|
63451
|
+
"name": "inlist",
|
|
63452
|
+
"type": "any",
|
|
63453
|
+
"required": false
|
|
63454
|
+
},
|
|
63455
|
+
{
|
|
63456
|
+
"name": "prefix",
|
|
63457
|
+
"type": "string | undefined",
|
|
63458
|
+
"required": false
|
|
63459
|
+
},
|
|
63460
|
+
{
|
|
63461
|
+
"name": "property",
|
|
63462
|
+
"type": "string | undefined",
|
|
63463
|
+
"required": false
|
|
63464
|
+
},
|
|
63465
|
+
{
|
|
63466
|
+
"name": "rel",
|
|
63467
|
+
"type": "string | undefined",
|
|
63468
|
+
"required": false
|
|
63469
|
+
},
|
|
63470
|
+
{
|
|
63471
|
+
"name": "resource",
|
|
63472
|
+
"type": "string | undefined",
|
|
63473
|
+
"required": false
|
|
63474
|
+
},
|
|
63475
|
+
{
|
|
63476
|
+
"name": "rev",
|
|
63477
|
+
"type": "string | undefined",
|
|
63478
|
+
"required": false
|
|
63479
|
+
},
|
|
63480
|
+
{
|
|
63481
|
+
"name": "typeof",
|
|
63482
|
+
"type": "string | undefined",
|
|
63483
|
+
"required": false
|
|
63484
|
+
},
|
|
63485
|
+
{
|
|
63486
|
+
"name": "vocab",
|
|
63487
|
+
"type": "string | undefined",
|
|
63488
|
+
"required": false
|
|
63489
|
+
},
|
|
63490
|
+
{
|
|
63491
|
+
"name": "autoCorrect",
|
|
63492
|
+
"type": "string | undefined",
|
|
63493
|
+
"required": false
|
|
63494
|
+
},
|
|
63495
|
+
{
|
|
63496
|
+
"name": "autoSave",
|
|
63497
|
+
"type": "string | undefined",
|
|
63498
|
+
"required": false
|
|
63499
|
+
},
|
|
63500
|
+
{
|
|
63501
|
+
"name": "color",
|
|
63502
|
+
"type": "string | undefined",
|
|
63503
|
+
"required": false
|
|
63504
|
+
},
|
|
63505
|
+
{
|
|
63506
|
+
"name": "itemProp",
|
|
63507
|
+
"type": "string | undefined",
|
|
63508
|
+
"required": false
|
|
63509
|
+
},
|
|
63510
|
+
{
|
|
63511
|
+
"name": "itemScope",
|
|
63512
|
+
"type": "boolean | undefined",
|
|
63513
|
+
"required": false
|
|
63514
|
+
},
|
|
63515
|
+
{
|
|
63516
|
+
"name": "itemType",
|
|
63517
|
+
"type": "string | undefined",
|
|
63518
|
+
"required": false
|
|
63519
|
+
},
|
|
63520
|
+
{
|
|
63521
|
+
"name": "itemID",
|
|
63522
|
+
"type": "string | undefined",
|
|
63523
|
+
"required": false
|
|
63524
|
+
},
|
|
63525
|
+
{
|
|
63526
|
+
"name": "itemRef",
|
|
63527
|
+
"type": "string | undefined",
|
|
63528
|
+
"required": false
|
|
63529
|
+
},
|
|
63530
|
+
{
|
|
63531
|
+
"name": "results",
|
|
63532
|
+
"type": "number | undefined",
|
|
63533
|
+
"required": false
|
|
63534
|
+
},
|
|
63535
|
+
{
|
|
63536
|
+
"name": "security",
|
|
63537
|
+
"type": "string | undefined",
|
|
63538
|
+
"required": false
|
|
63539
|
+
},
|
|
63540
|
+
{
|
|
63541
|
+
"name": "unselectable",
|
|
63542
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
63543
|
+
"required": false
|
|
63544
|
+
},
|
|
63545
|
+
{
|
|
63546
|
+
"name": "popover",
|
|
63547
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
63548
|
+
"required": false
|
|
63549
|
+
},
|
|
63550
|
+
{
|
|
63551
|
+
"name": "popoverTargetAction",
|
|
63552
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
63553
|
+
"required": false
|
|
63554
|
+
},
|
|
63555
|
+
{
|
|
63556
|
+
"name": "popoverTarget",
|
|
63557
|
+
"type": "string | undefined",
|
|
63558
|
+
"required": false
|
|
63559
|
+
},
|
|
63560
|
+
{
|
|
63561
|
+
"name": "inert",
|
|
63562
|
+
"type": "boolean | undefined",
|
|
63563
|
+
"required": false,
|
|
63564
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
63565
|
+
},
|
|
63566
|
+
{
|
|
63567
|
+
"name": "inputMode",
|
|
63568
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
63569
|
+
"required": false,
|
|
63570
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
63571
|
+
},
|
|
63572
|
+
{
|
|
63573
|
+
"name": "is",
|
|
63574
|
+
"type": "string | undefined",
|
|
63575
|
+
"required": false,
|
|
63576
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
63577
|
+
},
|
|
63578
|
+
{
|
|
63579
|
+
"name": "exportparts",
|
|
63580
|
+
"type": "string | undefined",
|
|
63581
|
+
"required": false,
|
|
63582
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
63583
|
+
},
|
|
63584
|
+
{
|
|
63585
|
+
"name": "part",
|
|
63586
|
+
"type": "string | undefined",
|
|
63587
|
+
"required": false,
|
|
63588
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
63589
|
+
}
|
|
63590
|
+
]
|
|
63591
|
+
},
|
|
63592
|
+
{
|
|
63593
|
+
"name": "PageContent",
|
|
63594
|
+
"props": [
|
|
63595
|
+
{
|
|
63596
|
+
"name": "defaultChecked",
|
|
63597
|
+
"type": "boolean | undefined",
|
|
63598
|
+
"required": false
|
|
63599
|
+
},
|
|
63600
|
+
{
|
|
63601
|
+
"name": "defaultValue",
|
|
63602
|
+
"type": "string | number | readonly string[] | undefined",
|
|
63603
|
+
"required": false
|
|
63604
|
+
},
|
|
63605
|
+
{
|
|
63606
|
+
"name": "suppressContentEditableWarning",
|
|
63607
|
+
"type": "boolean | undefined",
|
|
63608
|
+
"required": false
|
|
63609
|
+
},
|
|
63610
|
+
{
|
|
63611
|
+
"name": "suppressHydrationWarning",
|
|
63612
|
+
"type": "boolean | undefined",
|
|
63613
|
+
"required": false
|
|
63614
|
+
},
|
|
63615
|
+
{
|
|
63616
|
+
"name": "accessKey",
|
|
63617
|
+
"type": "string | undefined",
|
|
63618
|
+
"required": false
|
|
63619
|
+
},
|
|
63620
|
+
{
|
|
63621
|
+
"name": "autoCapitalize",
|
|
63622
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
63623
|
+
"required": false
|
|
63624
|
+
},
|
|
63625
|
+
{
|
|
63626
|
+
"name": "autoFocus",
|
|
63627
|
+
"type": "boolean | undefined",
|
|
63628
|
+
"required": false
|
|
63629
|
+
},
|
|
63630
|
+
{
|
|
63631
|
+
"name": "contentEditable",
|
|
63632
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
63633
|
+
"required": false
|
|
63634
|
+
},
|
|
63635
|
+
{
|
|
63636
|
+
"name": "contextMenu",
|
|
63637
|
+
"type": "string | undefined",
|
|
63638
|
+
"required": false
|
|
63639
|
+
},
|
|
63640
|
+
{
|
|
63641
|
+
"name": "dir",
|
|
63642
|
+
"type": "string | undefined",
|
|
63643
|
+
"required": false
|
|
63644
|
+
},
|
|
63645
|
+
{
|
|
63646
|
+
"name": "draggable",
|
|
63647
|
+
"type": "Booleanish | undefined",
|
|
63648
|
+
"required": false
|
|
63649
|
+
},
|
|
63650
|
+
{
|
|
63651
|
+
"name": "enterKeyHint",
|
|
63652
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
63653
|
+
"required": false
|
|
63654
|
+
},
|
|
63655
|
+
{
|
|
63656
|
+
"name": "hidden",
|
|
63657
|
+
"type": "boolean | undefined",
|
|
63658
|
+
"required": false
|
|
63659
|
+
},
|
|
63660
|
+
{
|
|
63661
|
+
"name": "id",
|
|
63662
|
+
"type": "string | undefined",
|
|
63663
|
+
"required": false
|
|
63664
|
+
},
|
|
63665
|
+
{
|
|
63666
|
+
"name": "lang",
|
|
63667
|
+
"type": "string | undefined",
|
|
63668
|
+
"required": false
|
|
63669
|
+
},
|
|
63670
|
+
{
|
|
63671
|
+
"name": "nonce",
|
|
63672
|
+
"type": "string | undefined",
|
|
63673
|
+
"required": false
|
|
63674
|
+
},
|
|
63675
|
+
{
|
|
63676
|
+
"name": "slot",
|
|
63677
|
+
"type": "string | undefined",
|
|
63678
|
+
"required": false
|
|
63679
|
+
},
|
|
63680
|
+
{
|
|
63681
|
+
"name": "spellCheck",
|
|
63682
|
+
"type": "Booleanish | undefined",
|
|
63683
|
+
"required": false
|
|
63684
|
+
},
|
|
63685
|
+
{
|
|
63686
|
+
"name": "tabIndex",
|
|
63687
|
+
"type": "number | undefined",
|
|
63688
|
+
"required": false
|
|
63689
|
+
},
|
|
63690
|
+
{
|
|
63691
|
+
"name": "title",
|
|
63692
|
+
"type": "string | undefined",
|
|
63693
|
+
"required": false
|
|
63694
|
+
},
|
|
63695
|
+
{
|
|
63696
|
+
"name": "translate",
|
|
63697
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
63698
|
+
"required": false
|
|
63699
|
+
},
|
|
63700
|
+
{
|
|
63701
|
+
"name": "radioGroup",
|
|
63702
|
+
"type": "string | undefined",
|
|
63703
|
+
"required": false
|
|
63704
|
+
},
|
|
63705
|
+
{
|
|
63706
|
+
"name": "role",
|
|
63707
|
+
"type": "AriaRole | undefined",
|
|
63708
|
+
"required": false
|
|
63709
|
+
},
|
|
63710
|
+
{
|
|
63711
|
+
"name": "about",
|
|
63712
|
+
"type": "string | undefined",
|
|
63713
|
+
"required": false
|
|
63714
|
+
},
|
|
63715
|
+
{
|
|
63716
|
+
"name": "content",
|
|
63717
|
+
"type": "string | undefined",
|
|
63718
|
+
"required": false
|
|
63719
|
+
},
|
|
63720
|
+
{
|
|
63721
|
+
"name": "datatype",
|
|
63722
|
+
"type": "string | undefined",
|
|
63723
|
+
"required": false
|
|
63724
|
+
},
|
|
63725
|
+
{
|
|
63726
|
+
"name": "inlist",
|
|
63727
|
+
"type": "any",
|
|
63728
|
+
"required": false
|
|
63729
|
+
},
|
|
63730
|
+
{
|
|
63731
|
+
"name": "prefix",
|
|
63732
|
+
"type": "string | undefined",
|
|
63733
|
+
"required": false
|
|
63734
|
+
},
|
|
63735
|
+
{
|
|
63736
|
+
"name": "property",
|
|
63737
|
+
"type": "string | undefined",
|
|
63738
|
+
"required": false
|
|
63739
|
+
},
|
|
63740
|
+
{
|
|
63741
|
+
"name": "rel",
|
|
63742
|
+
"type": "string | undefined",
|
|
63743
|
+
"required": false
|
|
63744
|
+
},
|
|
63745
|
+
{
|
|
63746
|
+
"name": "resource",
|
|
63747
|
+
"type": "string | undefined",
|
|
63748
|
+
"required": false
|
|
63749
|
+
},
|
|
63750
|
+
{
|
|
63751
|
+
"name": "rev",
|
|
63752
|
+
"type": "string | undefined",
|
|
63753
|
+
"required": false
|
|
63754
|
+
},
|
|
63755
|
+
{
|
|
63756
|
+
"name": "typeof",
|
|
63757
|
+
"type": "string | undefined",
|
|
63758
|
+
"required": false
|
|
63759
|
+
},
|
|
63760
|
+
{
|
|
63761
|
+
"name": "vocab",
|
|
63762
|
+
"type": "string | undefined",
|
|
63763
|
+
"required": false
|
|
63764
|
+
},
|
|
63765
|
+
{
|
|
63766
|
+
"name": "autoCorrect",
|
|
63767
|
+
"type": "string | undefined",
|
|
63768
|
+
"required": false
|
|
63769
|
+
},
|
|
63770
|
+
{
|
|
63771
|
+
"name": "autoSave",
|
|
63772
|
+
"type": "string | undefined",
|
|
63773
|
+
"required": false
|
|
63774
|
+
},
|
|
63775
|
+
{
|
|
63776
|
+
"name": "color",
|
|
63777
|
+
"type": "string | undefined",
|
|
63778
|
+
"required": false
|
|
63779
|
+
},
|
|
63780
|
+
{
|
|
63781
|
+
"name": "itemProp",
|
|
63782
|
+
"type": "string | undefined",
|
|
63783
|
+
"required": false
|
|
63784
|
+
},
|
|
63785
|
+
{
|
|
63786
|
+
"name": "itemScope",
|
|
63787
|
+
"type": "boolean | undefined",
|
|
63788
|
+
"required": false
|
|
63789
|
+
},
|
|
63790
|
+
{
|
|
63791
|
+
"name": "itemType",
|
|
63792
|
+
"type": "string | undefined",
|
|
63793
|
+
"required": false
|
|
63794
|
+
},
|
|
63795
|
+
{
|
|
63796
|
+
"name": "itemID",
|
|
63797
|
+
"type": "string | undefined",
|
|
63798
|
+
"required": false
|
|
63799
|
+
},
|
|
63800
|
+
{
|
|
63801
|
+
"name": "itemRef",
|
|
63802
|
+
"type": "string | undefined",
|
|
63803
|
+
"required": false
|
|
63804
|
+
},
|
|
63805
|
+
{
|
|
63806
|
+
"name": "results",
|
|
63807
|
+
"type": "number | undefined",
|
|
63808
|
+
"required": false
|
|
63809
|
+
},
|
|
63810
|
+
{
|
|
63811
|
+
"name": "security",
|
|
63812
|
+
"type": "string | undefined",
|
|
63813
|
+
"required": false
|
|
63814
|
+
},
|
|
63815
|
+
{
|
|
63816
|
+
"name": "unselectable",
|
|
63817
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
63818
|
+
"required": false
|
|
63819
|
+
},
|
|
63820
|
+
{
|
|
63821
|
+
"name": "popover",
|
|
63822
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
63823
|
+
"required": false
|
|
63824
|
+
},
|
|
63825
|
+
{
|
|
63826
|
+
"name": "popoverTargetAction",
|
|
63827
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
63828
|
+
"required": false
|
|
63829
|
+
},
|
|
63830
|
+
{
|
|
63831
|
+
"name": "popoverTarget",
|
|
63832
|
+
"type": "string | undefined",
|
|
63833
|
+
"required": false
|
|
63834
|
+
},
|
|
63835
|
+
{
|
|
63836
|
+
"name": "inert",
|
|
63837
|
+
"type": "boolean | undefined",
|
|
63838
|
+
"required": false,
|
|
63839
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
63840
|
+
},
|
|
63841
|
+
{
|
|
63842
|
+
"name": "inputMode",
|
|
63843
|
+
"type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
63844
|
+
"required": false,
|
|
63845
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
63846
|
+
},
|
|
63847
|
+
{
|
|
63848
|
+
"name": "is",
|
|
63849
|
+
"type": "string | undefined",
|
|
63850
|
+
"required": false,
|
|
63851
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
63852
|
+
},
|
|
63853
|
+
{
|
|
63854
|
+
"name": "exportparts",
|
|
63855
|
+
"type": "string | undefined",
|
|
63856
|
+
"required": false,
|
|
63857
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
63858
|
+
},
|
|
63859
|
+
{
|
|
63860
|
+
"name": "part",
|
|
63861
|
+
"type": "string | undefined",
|
|
63862
|
+
"required": false,
|
|
63863
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
63864
|
+
}
|
|
63865
|
+
]
|
|
63866
|
+
},
|
|
63867
|
+
{
|
|
63868
|
+
"name": "PageHeader",
|
|
63869
|
+
"props": [
|
|
63870
|
+
{
|
|
63871
|
+
"name": "sticky",
|
|
63872
|
+
"type": "boolean | undefined",
|
|
63873
|
+
"required": false
|
|
63874
|
+
},
|
|
63875
|
+
{
|
|
63876
|
+
"name": "defaultChecked",
|
|
63877
|
+
"type": "boolean | undefined",
|
|
63878
|
+
"required": false
|
|
63879
|
+
},
|
|
63880
|
+
{
|
|
63881
|
+
"name": "defaultValue",
|
|
63882
|
+
"type": "string | number | readonly string[] | undefined",
|
|
63883
|
+
"required": false
|
|
63884
|
+
},
|
|
63885
|
+
{
|
|
63886
|
+
"name": "suppressContentEditableWarning",
|
|
63887
|
+
"type": "boolean | undefined",
|
|
63888
|
+
"required": false
|
|
63889
|
+
},
|
|
63890
|
+
{
|
|
63891
|
+
"name": "suppressHydrationWarning",
|
|
63892
|
+
"type": "boolean | undefined",
|
|
63893
|
+
"required": false
|
|
63894
|
+
},
|
|
63895
|
+
{
|
|
63896
|
+
"name": "accessKey",
|
|
63897
|
+
"type": "string | undefined",
|
|
63898
|
+
"required": false
|
|
63899
|
+
},
|
|
63900
|
+
{
|
|
63901
|
+
"name": "autoCapitalize",
|
|
63902
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
63903
|
+
"required": false
|
|
63904
|
+
},
|
|
63905
|
+
{
|
|
63906
|
+
"name": "autoFocus",
|
|
63907
|
+
"type": "boolean | undefined",
|
|
63908
|
+
"required": false
|
|
63909
|
+
},
|
|
63910
|
+
{
|
|
63911
|
+
"name": "contentEditable",
|
|
63912
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
63913
|
+
"required": false
|
|
63914
|
+
},
|
|
63915
|
+
{
|
|
63916
|
+
"name": "contextMenu",
|
|
63917
|
+
"type": "string | undefined",
|
|
63918
|
+
"required": false
|
|
63919
|
+
},
|
|
63920
|
+
{
|
|
63921
|
+
"name": "dir",
|
|
63922
|
+
"type": "string | undefined",
|
|
63923
|
+
"required": false
|
|
63924
|
+
},
|
|
63925
|
+
{
|
|
63926
|
+
"name": "draggable",
|
|
63927
|
+
"type": "Booleanish | undefined",
|
|
63928
|
+
"required": false
|
|
63929
|
+
},
|
|
63930
|
+
{
|
|
63931
|
+
"name": "enterKeyHint",
|
|
63932
|
+
"type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
|
|
63933
|
+
"required": false
|
|
63934
|
+
},
|
|
63935
|
+
{
|
|
63936
|
+
"name": "hidden",
|
|
63937
|
+
"type": "boolean | undefined",
|
|
63938
|
+
"required": false
|
|
63939
|
+
},
|
|
63940
|
+
{
|
|
63941
|
+
"name": "id",
|
|
63942
|
+
"type": "string | undefined",
|
|
63943
|
+
"required": false
|
|
63944
|
+
},
|
|
62420
63945
|
{
|
|
62421
63946
|
"name": "lang",
|
|
62422
63947
|
"type": "string | undefined",
|
|
@@ -65531,7 +67056,25 @@
|
|
|
65531
67056
|
{
|
|
65532
67057
|
"name": "Popover",
|
|
65533
67058
|
"importPath": "@wallarm-org/design-system/Popover",
|
|
65534
|
-
"props": [
|
|
67059
|
+
"props": [
|
|
67060
|
+
{
|
|
67061
|
+
"name": "open",
|
|
67062
|
+
"type": "boolean | undefined",
|
|
67063
|
+
"required": false
|
|
67064
|
+
},
|
|
67065
|
+
{
|
|
67066
|
+
"name": "ids",
|
|
67067
|
+
"type": "ElementIds | undefined",
|
|
67068
|
+
"required": false,
|
|
67069
|
+
"description": "Override the trigger element's id. Pass the same id to another\ncompound component's `ids.trigger` (e.g. `Tooltip`, `DropdownMenu`) to\ncompose their triggers on one element via nested `asChild` without an\nextra wrapper node — otherwise the outer trigger's id wins and the\nother component can't find its own anchor."
|
|
67070
|
+
},
|
|
67071
|
+
{
|
|
67072
|
+
"name": "positioning",
|
|
67073
|
+
"type": "PositioningOptions | undefined",
|
|
67074
|
+
"required": false,
|
|
67075
|
+
"description": "Custom positioning configuration. When provided, overrides the default positioning."
|
|
67076
|
+
}
|
|
67077
|
+
],
|
|
65535
67078
|
"variants": [],
|
|
65536
67079
|
"subComponents": [
|
|
65537
67080
|
{
|
|
@@ -65570,6 +67113,16 @@
|
|
|
65570
67113
|
"type": "string | undefined",
|
|
65571
67114
|
"required": false
|
|
65572
67115
|
},
|
|
67116
|
+
{
|
|
67117
|
+
"name": "dir",
|
|
67118
|
+
"type": "string | undefined",
|
|
67119
|
+
"required": false
|
|
67120
|
+
},
|
|
67121
|
+
{
|
|
67122
|
+
"name": "autoFocus",
|
|
67123
|
+
"type": "boolean | undefined",
|
|
67124
|
+
"required": false
|
|
67125
|
+
},
|
|
65573
67126
|
{
|
|
65574
67127
|
"name": "defaultChecked",
|
|
65575
67128
|
"type": "boolean | undefined",
|
|
@@ -65600,11 +67153,6 @@
|
|
|
65600
67153
|
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
65601
67154
|
"required": false
|
|
65602
67155
|
},
|
|
65603
|
-
{
|
|
65604
|
-
"name": "autoFocus",
|
|
65605
|
-
"type": "boolean | undefined",
|
|
65606
|
-
"required": false
|
|
65607
|
-
},
|
|
65608
67156
|
{
|
|
65609
67157
|
"name": "contentEditable",
|
|
65610
67158
|
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
@@ -65615,11 +67163,6 @@
|
|
|
65615
67163
|
"type": "string | undefined",
|
|
65616
67164
|
"required": false
|
|
65617
67165
|
},
|
|
65618
|
-
{
|
|
65619
|
-
"name": "dir",
|
|
65620
|
-
"type": "string | undefined",
|
|
65621
|
-
"required": false
|
|
65622
|
-
},
|
|
65623
67166
|
{
|
|
65624
67167
|
"name": "draggable",
|
|
65625
67168
|
"type": "Booleanish | undefined",
|
|
@@ -65857,6 +67400,16 @@
|
|
|
65857
67400
|
"type": "string | undefined",
|
|
65858
67401
|
"required": false
|
|
65859
67402
|
},
|
|
67403
|
+
{
|
|
67404
|
+
"name": "dir",
|
|
67405
|
+
"type": "string | undefined",
|
|
67406
|
+
"required": false
|
|
67407
|
+
},
|
|
67408
|
+
{
|
|
67409
|
+
"name": "autoFocus",
|
|
67410
|
+
"type": "boolean | undefined",
|
|
67411
|
+
"required": false
|
|
67412
|
+
},
|
|
65860
67413
|
{
|
|
65861
67414
|
"name": "id",
|
|
65862
67415
|
"type": "string | undefined",
|
|
@@ -65892,11 +67445,6 @@
|
|
|
65892
67445
|
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
65893
67446
|
"required": false
|
|
65894
67447
|
},
|
|
65895
|
-
{
|
|
65896
|
-
"name": "autoFocus",
|
|
65897
|
-
"type": "boolean | undefined",
|
|
65898
|
-
"required": false
|
|
65899
|
-
},
|
|
65900
67448
|
{
|
|
65901
67449
|
"name": "contentEditable",
|
|
65902
67450
|
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
@@ -65907,11 +67455,6 @@
|
|
|
65907
67455
|
"type": "string | undefined",
|
|
65908
67456
|
"required": false
|
|
65909
67457
|
},
|
|
65910
|
-
{
|
|
65911
|
-
"name": "dir",
|
|
65912
|
-
"type": "string | undefined",
|
|
65913
|
-
"required": false
|
|
65914
|
-
},
|
|
65915
67458
|
{
|
|
65916
67459
|
"name": "draggable",
|
|
65917
67460
|
"type": "Booleanish | undefined",
|
|
@@ -69593,7 +71136,7 @@
|
|
|
69593
71136
|
},
|
|
69594
71137
|
{
|
|
69595
71138
|
"name": "WithOverflowList",
|
|
69596
|
-
"code": "() => (\n <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n <ResizablePanelGroup orientation='horizontal'>\n <ResizablePanel id='tags' defaultSize='50%' minSize='20%'>\n <div className='flex h-full items-center p-16'>\n <OverflowList\n className='gap-4'\n items={OVERFLOW_TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n
|
|
71139
|
+
"code": "() => (\n <div className='h-[320px] w-[600px] rounded-8 border border-border-primary'>\n <ResizablePanelGroup orientation='horizontal'>\n <ResizablePanel id='tags' defaultSize='50%' minSize='20%'>\n <div className='flex h-full items-center p-16'>\n <OverflowList\n className='gap-4'\n items={OVERFLOW_TAGS}\n itemRenderer={item => <Tag key={item}>{item}</Tag>}\n />\n </div>\n </ResizablePanel>\n <ResizableHandle />\n <ResizablePanel id='content' defaultSize='50%'>\n <div className='flex h-full items-center justify-center p-24'>\n <span className='text-text-secondary'>Content</span>\n </div>\n </ResizablePanel>\n </ResizablePanelGroup>\n </div>\n)",
|
|
69597
71140
|
"description": "Resizing with content that reflows — the tag list adapts live as the panel width changes. Overflow items appear in a popover."
|
|
69598
71141
|
}
|
|
69599
71142
|
]
|
|
@@ -107203,7 +108746,7 @@
|
|
|
107203
108746
|
},
|
|
107204
108747
|
{
|
|
107205
108748
|
"name": "ColumnResizingWithOverflowList",
|
|
107206
|
-
"code": "() => {\n const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n () => [\n ...securityColumns.slice(0, 1),\n securityColumnHelper.display({\n id: 'tags',\n header: 'Tags',\n size: 240,\n cell: ({ row }) => (\n <OverflowList\n className='gap-4'\n items={row.original.tags}\n itemRenderer={(item: string) => <Tag key={item}>{item}</Tag>}\n
|
|
108749
|
+
"code": "() => {\n const [columnSizing, setColumnSizing] = useState<TableColumnSizingState>({});\n\n const columns = useMemo<TableColumnDef<SecurityEvent>[]>(\n () => [\n ...securityColumns.slice(0, 1),\n securityColumnHelper.display({\n id: 'tags',\n header: 'Tags',\n size: 240,\n cell: ({ row }) => (\n <OverflowList\n className='gap-4'\n items={row.original.tags}\n itemRenderer={(item: string) => <Tag key={item}>{item}</Tag>}\n />\n ),\n }),\n ...securityColumns.slice(1),\n ],\n [],\n );\n\n return (\n <Table\n data={securityEvents}\n columns={columns}\n getRowId={row => row.id}\n columnSizing={columnSizing}\n onColumnSizingChange={setColumnSizing}\n />\n );\n}",
|
|
107207
108750
|
"description": "A resizable column whose cell holds an `OverflowList`: the tags re-measure as the column\nnarrows instead of being clipped by it."
|
|
107208
108751
|
},
|
|
107209
108752
|
{
|