@wallarm-org/design-system 1.19.0 → 1.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ScrollArea/ScrollArea.d.ts +5 -2
- package/dist/components/ScrollArea/ScrollArea.js +2 -3
- package/dist/components/ScrollArea/ScrollAreaContent.d.ts +5 -2
- package/dist/components/ScrollArea/ScrollAreaContent.js +3 -2
- package/dist/components/ScrollArea/ScrollAreaCorner.d.ts +5 -2
- package/dist/components/ScrollArea/ScrollAreaCorner.js +3 -2
- package/dist/components/ScrollArea/ScrollAreaScrollbar.d.ts +5 -2
- package/dist/components/ScrollArea/ScrollAreaScrollbar.js +3 -2
- package/dist/components/ScrollArea/ScrollAreaViewport.d.ts +2 -1
- package/dist/components/ScrollArea/ScrollAreaViewport.js +3 -2
- package/dist/components/ScrollArea/index.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/metadata/components.json +288 -2
- package/package.json +1 -1
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
import type { FC, Ref } from 'react';
|
|
1
2
|
import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
|
|
2
3
|
import { type TestableProps } from '../../utils/testId';
|
|
3
|
-
export type ScrollAreaProps = ArkUiScrollArea.RootProps & TestableProps
|
|
4
|
-
|
|
4
|
+
export type ScrollAreaProps = ArkUiScrollArea.RootProps & TestableProps & {
|
|
5
|
+
ref?: Ref<HTMLDivElement>;
|
|
6
|
+
};
|
|
7
|
+
export declare const ScrollArea: FC<ScrollAreaProps>;
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef } from "react";
|
|
3
2
|
import { ScrollArea } from "@ark-ui/react/scroll-area";
|
|
4
3
|
import { cn } from "../../utils/cn.js";
|
|
5
4
|
import { TestIdProvider } from "../../utils/testId.js";
|
|
6
|
-
const ScrollArea_ScrollArea =
|
|
5
|
+
const ScrollArea_ScrollArea = ({ className, ref, 'data-testid': testId, children, ...props })=>/*#__PURE__*/ jsx(ScrollArea.Root, {
|
|
7
6
|
...props,
|
|
8
7
|
ref: ref,
|
|
9
8
|
"data-testid": testId,
|
|
@@ -12,6 +11,6 @@ const ScrollArea_ScrollArea = /*#__PURE__*/ forwardRef(({ className, 'data-testi
|
|
|
12
11
|
value: testId,
|
|
13
12
|
children: children
|
|
14
13
|
})
|
|
15
|
-
})
|
|
14
|
+
});
|
|
16
15
|
ScrollArea_ScrollArea.displayName = 'ScrollArea';
|
|
17
16
|
export { ScrollArea_ScrollArea as ScrollArea };
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import type { FC } from 'react';
|
|
1
|
+
import type { FC, Ref } from 'react';
|
|
2
2
|
import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
|
|
3
|
-
|
|
3
|
+
import { type TestableProps } from '../../utils/testId';
|
|
4
|
+
export type ScrollAreaContentProps = ArkUiScrollArea.ContentProps & TestableProps & {
|
|
5
|
+
ref?: Ref<HTMLDivElement>;
|
|
6
|
+
};
|
|
4
7
|
export declare const ScrollAreaContent: FC<ScrollAreaContentProps>;
|
|
@@ -2,10 +2,11 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { ScrollArea } from "@ark-ui/react/scroll-area";
|
|
3
3
|
import { cn } from "../../utils/cn.js";
|
|
4
4
|
import { useTestId } from "../../utils/testId.js";
|
|
5
|
-
const ScrollAreaContent = ({ className, ...props })=>{
|
|
6
|
-
const testId = useTestId('content');
|
|
5
|
+
const ScrollAreaContent = ({ className, ref, 'data-testid': testIdProp, ...props })=>{
|
|
6
|
+
const testId = useTestId('content', testIdProp);
|
|
7
7
|
return /*#__PURE__*/ jsx(ScrollArea.Content, {
|
|
8
8
|
...props,
|
|
9
|
+
ref: ref,
|
|
9
10
|
"data-testid": testId,
|
|
10
11
|
className: cn('h-full outline-none', className)
|
|
11
12
|
});
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import type { FC } from 'react';
|
|
1
|
+
import type { FC, Ref } from 'react';
|
|
2
2
|
import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
|
|
3
|
-
|
|
3
|
+
import { type TestableProps } from '../../utils/testId';
|
|
4
|
+
export type ScrollAreaCornerProps = ArkUiScrollArea.CornerProps & TestableProps & {
|
|
5
|
+
ref?: Ref<HTMLDivElement>;
|
|
6
|
+
};
|
|
4
7
|
export declare const ScrollAreaCorner: FC<ScrollAreaCornerProps>;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { ScrollArea } from "@ark-ui/react/scroll-area";
|
|
3
3
|
import { useTestId } from "../../utils/testId.js";
|
|
4
|
-
const ScrollAreaCorner = (props)=>{
|
|
5
|
-
const testId = useTestId('corner');
|
|
4
|
+
const ScrollAreaCorner = ({ ref, 'data-testid': testIdProp, ...props })=>{
|
|
5
|
+
const testId = useTestId('corner', testIdProp);
|
|
6
6
|
return /*#__PURE__*/ jsx(ScrollArea.Corner, {
|
|
7
7
|
...props,
|
|
8
|
+
ref: ref,
|
|
8
9
|
"data-testid": testId
|
|
9
10
|
});
|
|
10
11
|
};
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import { type FC } from 'react';
|
|
1
|
+
import { type FC, type Ref } from 'react';
|
|
2
2
|
import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
|
|
3
|
-
|
|
3
|
+
import { type TestableProps } from '../../utils/testId';
|
|
4
|
+
export type ScrollAreaScrollbarProps = Omit<ArkUiScrollArea.ScrollbarProps, 'className' | 'style'> & TestableProps & {
|
|
5
|
+
ref?: Ref<HTMLDivElement>;
|
|
6
|
+
};
|
|
4
7
|
export declare const ScrollAreaScrollbar: FC<ScrollAreaScrollbarProps>;
|
|
@@ -20,8 +20,8 @@ const scrollAreaScrollbarThumbVariants = cva('bg-badge-slate-dark-alt opacity-0
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
});
|
|
23
|
-
const ScrollAreaScrollbar = ({ orientation = 'vertical', ...props })=>{
|
|
24
|
-
const testId = useTestId('scrollbar');
|
|
23
|
+
const ScrollAreaScrollbar = ({ orientation = 'vertical', ref, 'data-testid': testIdProp, ...props })=>{
|
|
24
|
+
const testId = useTestId('scrollbar', testIdProp);
|
|
25
25
|
const scrollbarStyle = useMemo(()=>{
|
|
26
26
|
if ('horizontal' === orientation) return {
|
|
27
27
|
left: 4,
|
|
@@ -37,6 +37,7 @@ const ScrollAreaScrollbar = ({ orientation = 'vertical', ...props })=>{
|
|
|
37
37
|
]);
|
|
38
38
|
return /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
|
|
39
39
|
...props,
|
|
40
|
+
ref: ref,
|
|
40
41
|
style: scrollbarStyle,
|
|
41
42
|
"data-testid": testId,
|
|
42
43
|
orientation: orientation,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { FC, Ref } from 'react';
|
|
2
2
|
import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
|
|
3
|
-
|
|
3
|
+
import { type TestableProps } from '../../utils/testId';
|
|
4
|
+
export type ScrollAreaViewportProps = Omit<ArkUiScrollArea.ViewportProps, 'className'> & TestableProps & {
|
|
4
5
|
ref?: Ref<HTMLDivElement>;
|
|
5
6
|
};
|
|
6
7
|
export declare const ScrollAreaViewport: FC<ScrollAreaViewportProps>;
|
|
@@ -2,10 +2,11 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { ScrollArea } from "@ark-ui/react/scroll-area";
|
|
3
3
|
import { cn } from "../../utils/cn.js";
|
|
4
4
|
import { useTestId } from "../../utils/testId.js";
|
|
5
|
-
const ScrollAreaViewport = (props)=>{
|
|
6
|
-
const testId = useTestId('viewport');
|
|
5
|
+
const ScrollAreaViewport = ({ ref, 'data-testid': testIdProp, ...props })=>{
|
|
6
|
+
const testId = useTestId('viewport', testIdProp);
|
|
7
7
|
return /*#__PURE__*/ jsx(ScrollArea.Viewport, {
|
|
8
8
|
...props,
|
|
9
|
+
ref: ref,
|
|
9
10
|
"data-testid": testId,
|
|
10
11
|
className: cn('h-full outline-none')
|
|
11
12
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { ScrollArea, type ScrollAreaProps } from './ScrollArea';
|
|
2
2
|
export { ScrollAreaContent, type ScrollAreaContentProps, } from './ScrollAreaContent';
|
|
3
|
-
export { ScrollAreaCorner } from './ScrollAreaCorner';
|
|
3
|
+
export { ScrollAreaCorner, type ScrollAreaCornerProps } from './ScrollAreaCorner';
|
|
4
4
|
export { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, } from './ScrollAreaScrollbar';
|
|
5
5
|
export { ScrollAreaViewport, type ScrollAreaViewportProps, } from './ScrollAreaViewport';
|
package/dist/index.d.ts
CHANGED
|
@@ -67,7 +67,7 @@ export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type R
|
|
|
67
67
|
export { type BreadcrumbSegment, findFirstLinkPath, type NavConfig, type NavConfigDrill, type NavConfigGroup, type NavConfigLink, type NavConfigNode, type NavStackEntry, pushPathname, RemoteShell, RemoteShellBreadcrumb, type RemoteShellBreadcrumbProps, RemoteShellContent, type RemoteShellContentProps, type RemoteShellContextValue, RemoteShellPanel, type RemoteShellPanelProps, type RemoteShellProps, useLocationPathname, useRemoteShellContext, } from './components/RemoteShell';
|
|
68
68
|
export { ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, } from './components/Resizable';
|
|
69
69
|
export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type ResponseCodeCategory, type ResponseCodeProps, } from './components/ResponseCode';
|
|
70
|
-
export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
|
|
70
|
+
export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
|
|
71
71
|
export { SearchModal, SearchModalBody, type SearchModalBodyProps, SearchModalContent, type SearchModalContentProps, SearchModalEmpty, type SearchModalEmptyProps, SearchModalFooter, type SearchModalFooterProps, SearchModalGroup, SearchModalGroupLabel, type SearchModalGroupLabelProps, type SearchModalGroupProps, SearchModalInput, type SearchModalInputProps, SearchModalItem, type SearchModalItemProps, type SearchModalProps, SearchModalTrigger, type SearchModalTriggerProps, useSearchModalContext, } from './components/SearchModal';
|
|
72
72
|
export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';
|
|
73
73
|
export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.
|
|
3
|
-
"generatedAt": "2026-09-
|
|
2
|
+
"version": "1.19.0",
|
|
3
|
+
"generatedAt": "2026-09-09T09:55:16.853Z",
|
|
4
4
|
"components": [
|
|
5
5
|
{
|
|
6
6
|
"name": "Accordion",
|
|
@@ -55757,6 +55757,287 @@
|
|
|
55757
55757
|
}
|
|
55758
55758
|
]
|
|
55759
55759
|
},
|
|
55760
|
+
{
|
|
55761
|
+
"name": "ScrollAreaCorner",
|
|
55762
|
+
"props": [
|
|
55763
|
+
{
|
|
55764
|
+
"name": "slot",
|
|
55765
|
+
"type": "string | undefined",
|
|
55766
|
+
"required": false
|
|
55767
|
+
},
|
|
55768
|
+
{
|
|
55769
|
+
"name": "title",
|
|
55770
|
+
"type": "string | undefined",
|
|
55771
|
+
"required": false
|
|
55772
|
+
},
|
|
55773
|
+
{
|
|
55774
|
+
"name": "defaultChecked",
|
|
55775
|
+
"type": "boolean | undefined",
|
|
55776
|
+
"required": false
|
|
55777
|
+
},
|
|
55778
|
+
{
|
|
55779
|
+
"name": "defaultValue",
|
|
55780
|
+
"type": "string | number | readonly string[] | undefined",
|
|
55781
|
+
"required": false
|
|
55782
|
+
},
|
|
55783
|
+
{
|
|
55784
|
+
"name": "suppressContentEditableWarning",
|
|
55785
|
+
"type": "boolean | undefined",
|
|
55786
|
+
"required": false
|
|
55787
|
+
},
|
|
55788
|
+
{
|
|
55789
|
+
"name": "suppressHydrationWarning",
|
|
55790
|
+
"type": "boolean | undefined",
|
|
55791
|
+
"required": false
|
|
55792
|
+
},
|
|
55793
|
+
{
|
|
55794
|
+
"name": "accessKey",
|
|
55795
|
+
"type": "string | undefined",
|
|
55796
|
+
"required": false
|
|
55797
|
+
},
|
|
55798
|
+
{
|
|
55799
|
+
"name": "autoCapitalize",
|
|
55800
|
+
"type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
|
|
55801
|
+
"required": false
|
|
55802
|
+
},
|
|
55803
|
+
{
|
|
55804
|
+
"name": "autoFocus",
|
|
55805
|
+
"type": "boolean | undefined",
|
|
55806
|
+
"required": false
|
|
55807
|
+
},
|
|
55808
|
+
{
|
|
55809
|
+
"name": "contentEditable",
|
|
55810
|
+
"type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
|
|
55811
|
+
"required": false
|
|
55812
|
+
},
|
|
55813
|
+
{
|
|
55814
|
+
"name": "contextMenu",
|
|
55815
|
+
"type": "string | undefined",
|
|
55816
|
+
"required": false
|
|
55817
|
+
},
|
|
55818
|
+
{
|
|
55819
|
+
"name": "dir",
|
|
55820
|
+
"type": "string | undefined",
|
|
55821
|
+
"required": false
|
|
55822
|
+
},
|
|
55823
|
+
{
|
|
55824
|
+
"name": "draggable",
|
|
55825
|
+
"type": "Booleanish | undefined",
|
|
55826
|
+
"required": false
|
|
55827
|
+
},
|
|
55828
|
+
{
|
|
55829
|
+
"name": "enterKeyHint",
|
|
55830
|
+
"type": "\"search\" | \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"send\" | undefined",
|
|
55831
|
+
"required": false
|
|
55832
|
+
},
|
|
55833
|
+
{
|
|
55834
|
+
"name": "hidden",
|
|
55835
|
+
"type": "boolean | undefined",
|
|
55836
|
+
"required": false
|
|
55837
|
+
},
|
|
55838
|
+
{
|
|
55839
|
+
"name": "id",
|
|
55840
|
+
"type": "string | undefined",
|
|
55841
|
+
"required": false
|
|
55842
|
+
},
|
|
55843
|
+
{
|
|
55844
|
+
"name": "lang",
|
|
55845
|
+
"type": "string | undefined",
|
|
55846
|
+
"required": false
|
|
55847
|
+
},
|
|
55848
|
+
{
|
|
55849
|
+
"name": "nonce",
|
|
55850
|
+
"type": "string | undefined",
|
|
55851
|
+
"required": false
|
|
55852
|
+
},
|
|
55853
|
+
{
|
|
55854
|
+
"name": "spellCheck",
|
|
55855
|
+
"type": "Booleanish | undefined",
|
|
55856
|
+
"required": false
|
|
55857
|
+
},
|
|
55858
|
+
{
|
|
55859
|
+
"name": "tabIndex",
|
|
55860
|
+
"type": "number | undefined",
|
|
55861
|
+
"required": false
|
|
55862
|
+
},
|
|
55863
|
+
{
|
|
55864
|
+
"name": "translate",
|
|
55865
|
+
"type": "\"yes\" | \"no\" | undefined",
|
|
55866
|
+
"required": false
|
|
55867
|
+
},
|
|
55868
|
+
{
|
|
55869
|
+
"name": "radioGroup",
|
|
55870
|
+
"type": "string | undefined",
|
|
55871
|
+
"required": false
|
|
55872
|
+
},
|
|
55873
|
+
{
|
|
55874
|
+
"name": "role",
|
|
55875
|
+
"type": "AriaRole | undefined",
|
|
55876
|
+
"required": false
|
|
55877
|
+
},
|
|
55878
|
+
{
|
|
55879
|
+
"name": "about",
|
|
55880
|
+
"type": "string | undefined",
|
|
55881
|
+
"required": false
|
|
55882
|
+
},
|
|
55883
|
+
{
|
|
55884
|
+
"name": "content",
|
|
55885
|
+
"type": "string | undefined",
|
|
55886
|
+
"required": false
|
|
55887
|
+
},
|
|
55888
|
+
{
|
|
55889
|
+
"name": "datatype",
|
|
55890
|
+
"type": "string | undefined",
|
|
55891
|
+
"required": false
|
|
55892
|
+
},
|
|
55893
|
+
{
|
|
55894
|
+
"name": "inlist",
|
|
55895
|
+
"type": "any",
|
|
55896
|
+
"required": false
|
|
55897
|
+
},
|
|
55898
|
+
{
|
|
55899
|
+
"name": "prefix",
|
|
55900
|
+
"type": "string | undefined",
|
|
55901
|
+
"required": false
|
|
55902
|
+
},
|
|
55903
|
+
{
|
|
55904
|
+
"name": "property",
|
|
55905
|
+
"type": "string | undefined",
|
|
55906
|
+
"required": false
|
|
55907
|
+
},
|
|
55908
|
+
{
|
|
55909
|
+
"name": "rel",
|
|
55910
|
+
"type": "string | undefined",
|
|
55911
|
+
"required": false
|
|
55912
|
+
},
|
|
55913
|
+
{
|
|
55914
|
+
"name": "resource",
|
|
55915
|
+
"type": "string | undefined",
|
|
55916
|
+
"required": false
|
|
55917
|
+
},
|
|
55918
|
+
{
|
|
55919
|
+
"name": "rev",
|
|
55920
|
+
"type": "string | undefined",
|
|
55921
|
+
"required": false
|
|
55922
|
+
},
|
|
55923
|
+
{
|
|
55924
|
+
"name": "typeof",
|
|
55925
|
+
"type": "string | undefined",
|
|
55926
|
+
"required": false
|
|
55927
|
+
},
|
|
55928
|
+
{
|
|
55929
|
+
"name": "vocab",
|
|
55930
|
+
"type": "string | undefined",
|
|
55931
|
+
"required": false
|
|
55932
|
+
},
|
|
55933
|
+
{
|
|
55934
|
+
"name": "autoCorrect",
|
|
55935
|
+
"type": "string | undefined",
|
|
55936
|
+
"required": false
|
|
55937
|
+
},
|
|
55938
|
+
{
|
|
55939
|
+
"name": "autoSave",
|
|
55940
|
+
"type": "string | undefined",
|
|
55941
|
+
"required": false
|
|
55942
|
+
},
|
|
55943
|
+
{
|
|
55944
|
+
"name": "color",
|
|
55945
|
+
"type": "string | undefined",
|
|
55946
|
+
"required": false
|
|
55947
|
+
},
|
|
55948
|
+
{
|
|
55949
|
+
"name": "itemProp",
|
|
55950
|
+
"type": "string | undefined",
|
|
55951
|
+
"required": false
|
|
55952
|
+
},
|
|
55953
|
+
{
|
|
55954
|
+
"name": "itemScope",
|
|
55955
|
+
"type": "boolean | undefined",
|
|
55956
|
+
"required": false
|
|
55957
|
+
},
|
|
55958
|
+
{
|
|
55959
|
+
"name": "itemType",
|
|
55960
|
+
"type": "string | undefined",
|
|
55961
|
+
"required": false
|
|
55962
|
+
},
|
|
55963
|
+
{
|
|
55964
|
+
"name": "itemID",
|
|
55965
|
+
"type": "string | undefined",
|
|
55966
|
+
"required": false
|
|
55967
|
+
},
|
|
55968
|
+
{
|
|
55969
|
+
"name": "itemRef",
|
|
55970
|
+
"type": "string | undefined",
|
|
55971
|
+
"required": false
|
|
55972
|
+
},
|
|
55973
|
+
{
|
|
55974
|
+
"name": "results",
|
|
55975
|
+
"type": "number | undefined",
|
|
55976
|
+
"required": false
|
|
55977
|
+
},
|
|
55978
|
+
{
|
|
55979
|
+
"name": "security",
|
|
55980
|
+
"type": "string | undefined",
|
|
55981
|
+
"required": false
|
|
55982
|
+
},
|
|
55983
|
+
{
|
|
55984
|
+
"name": "unselectable",
|
|
55985
|
+
"type": "\"off\" | \"on\" | undefined",
|
|
55986
|
+
"required": false
|
|
55987
|
+
},
|
|
55988
|
+
{
|
|
55989
|
+
"name": "popover",
|
|
55990
|
+
"type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
|
|
55991
|
+
"required": false
|
|
55992
|
+
},
|
|
55993
|
+
{
|
|
55994
|
+
"name": "popoverTargetAction",
|
|
55995
|
+
"type": "\"toggle\" | \"show\" | \"hide\" | undefined",
|
|
55996
|
+
"required": false
|
|
55997
|
+
},
|
|
55998
|
+
{
|
|
55999
|
+
"name": "popoverTarget",
|
|
56000
|
+
"type": "string | undefined",
|
|
56001
|
+
"required": false
|
|
56002
|
+
},
|
|
56003
|
+
{
|
|
56004
|
+
"name": "inert",
|
|
56005
|
+
"type": "boolean | undefined",
|
|
56006
|
+
"required": false,
|
|
56007
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert}"
|
|
56008
|
+
},
|
|
56009
|
+
{
|
|
56010
|
+
"name": "inputMode",
|
|
56011
|
+
"type": "\"search\" | \"text\" | \"none\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
|
|
56012
|
+
"required": false,
|
|
56013
|
+
"description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
|
|
56014
|
+
},
|
|
56015
|
+
{
|
|
56016
|
+
"name": "is",
|
|
56017
|
+
"type": "string | undefined",
|
|
56018
|
+
"required": false,
|
|
56019
|
+
"description": "Specify that a standard HTML element should behave like a defined custom built-in element"
|
|
56020
|
+
},
|
|
56021
|
+
{
|
|
56022
|
+
"name": "exportparts",
|
|
56023
|
+
"type": "string | undefined",
|
|
56024
|
+
"required": false,
|
|
56025
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
|
|
56026
|
+
},
|
|
56027
|
+
{
|
|
56028
|
+
"name": "part",
|
|
56029
|
+
"type": "string | undefined",
|
|
56030
|
+
"required": false,
|
|
56031
|
+
"description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
|
|
56032
|
+
},
|
|
56033
|
+
{
|
|
56034
|
+
"name": "asChild",
|
|
56035
|
+
"type": "boolean | undefined",
|
|
56036
|
+
"required": false,
|
|
56037
|
+
"description": "Use the provided child element as the default rendered element, combining their props and behavior."
|
|
56038
|
+
}
|
|
56039
|
+
]
|
|
56040
|
+
},
|
|
55760
56041
|
{
|
|
55761
56042
|
"name": "ScrollAreaScrollbar",
|
|
55762
56043
|
"props": [
|
|
@@ -56336,6 +56617,11 @@
|
|
|
56336
56617
|
"name": "Horizontal",
|
|
56337
56618
|
"code": "() => (\n <div className='w-320 h-320 overflow-hidden'>\n <ScrollArea>\n <ScrollAreaViewport>\n <ScrollAreaContent>\n <HStack>\n {new Array(50).fill(null).map((_, index) => {\n const value = `${index + 1}`;\n\n return (\n <Box key={value} className='h-320 w-40'>\n {value}\n </Box>\n );\n })}\n </HStack>\n </ScrollAreaContent>\n </ScrollAreaViewport>\n\n <ScrollAreaScrollbar orientation='horizontal' />\n\n <ScrollAreaCorner />\n </ScrollArea>\n </div>\n)",
|
|
56338
56619
|
"description": "`orientation='horizontal'` puts the bar along the bottom edge, for a row that runs past its container rather than a column that runs below it."
|
|
56620
|
+
},
|
|
56621
|
+
{
|
|
56622
|
+
"name": "Virtualized",
|
|
56623
|
+
"code": "() => {\n const scrollRef = useRef<HTMLDivElement>(null);\n const virtualizer = useVirtualizer({\n count: 10_000,\n getScrollElement: () => scrollRef.current,\n estimateSize: () => 44,\n overscan: 8,\n });\n\n return (\n <div className='w-320 h-320 overflow-hidden'>\n <ScrollArea>\n <ScrollAreaViewport ref={scrollRef}>\n <ScrollAreaContent className='h-auto min-h-full'>\n <div className='relative w-full' style={{ height: virtualizer.getTotalSize() }}>\n {virtualizer.getVirtualItems().map(item => (\n <div\n key={item.key}\n className='absolute top-0 left-0 w-full pb-4'\n style={{ height: item.size, transform: `translateY(${item.start}px)` }}\n >\n <Box className='h-full w-full'>{item.index + 1}</Box>\n </div>\n ))}\n </div>\n </ScrollAreaContent>\n </ScrollAreaViewport>\n\n <ScrollAreaScrollbar />\n\n <ScrollAreaCorner />\n </ScrollArea>\n </div>\n );\n}",
|
|
56624
|
+
"description": "`ScrollAreaViewport` forwards its `ref` to the scrolling element itself, so a row\nvirtualiser such as `@tanstack/react-virtual` can track scroll position inside the\nhouse scrollbar instead of falling back to a bare `overflow-y: auto` div. Ten thousand\nrows here, a few dozen in the DOM.\n\nTwo things this story is deliberately showing:\n\n- `useVirtualizer` is called in the same component that declares the ref. Called from a\n component rendered *inside* the viewport, `getScrollElement()` runs once — before React\n has attached the host element's ref — returns `null`, and nothing ever re-runs it, so the\n list stays permanently empty.\n- `ScrollAreaContent` gets `h-auto min-h-full` so it grows with the virtual sizer. The\n scrollbar is only rendered while the viewport reports `data-overflow-y`, and that flag is\n recomputed from a `ResizeObserver` watching the content box — which at its default `h-full`\n stays the height of the viewport. A list that grows *after* mount therefore keeps its\n scrollbar hidden until something else forces a remeasure."
|
|
56339
56625
|
}
|
|
56340
56626
|
]
|
|
56341
56627
|
},
|