@zendeskgarden/react-grid 8.69.2 → 8.69.3
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/index.cjs.js +7 -7
- package/dist/index.esm.js +7 -7
- package/dist/typings/elements/Col.d.ts +12 -12
- package/dist/typings/elements/Grid.d.ts +12 -12
- package/dist/typings/elements/Row.d.ts +12 -12
- package/dist/typings/elements/pane/Pane.d.ts +18 -18
- package/dist/typings/elements/pane/PaneProvider.d.ts +24 -24
- package/dist/typings/elements/pane/components/Content.d.ts +11 -11
- package/dist/typings/elements/pane/components/Splitter.d.ts +12 -12
- package/dist/typings/elements/pane/components/SplitterButton.d.ts +12 -12
- package/dist/typings/index.d.ts +13 -13
- package/dist/typings/styled/StyledCol.d.ts +16 -16
- package/dist/typings/styled/StyledGrid.d.ts +12 -12
- package/dist/typings/styled/StyledRow.d.ts +15 -15
- package/dist/typings/styled/index.d.ts +13 -13
- package/dist/typings/styled/pane/StyledPane.d.ts +10 -10
- package/dist/typings/styled/pane/StyledPaneContent.d.ts +10 -10
- package/dist/typings/styled/pane/StyledPaneSplitter.d.ts +23 -23
- package/dist/typings/styled/pane/StyledPaneSplitterButton.d.ts +20 -20
- package/dist/typings/types/index.d.ts +216 -216
- package/dist/typings/utils/useGridContext.d.ts +19 -19
- package/dist/typings/utils/usePaneContext.d.ts +18 -18
- package/dist/typings/utils/usePaneProviderContext.d.ts +29 -29
- package/dist/typings/utils/usePaneSplitterContext.d.ts +24 -24
- package/package.json +5 -5
|
@@ -1,216 +1,216 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
import { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
|
|
8
|
-
export declare const ALIGN_ITEMS: readonly ["start", "end", "center", "baseline", "stretch"];
|
|
9
|
-
export declare const ALIGN_SELF: readonly ["auto", "start", "end", "center", "baseline", "stretch"];
|
|
10
|
-
export declare const DIRECTION: readonly ["row", "row-reverse", "column", "column-reverse"];
|
|
11
|
-
export declare const JUSTIFY_CONTENT: readonly ["start", "end", "center", "between", "around"];
|
|
12
|
-
export declare const TEXT_ALIGN: readonly ["start", "end", "center", "justify"];
|
|
13
|
-
export declare const SPACE: readonly [false, "xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
|
|
14
|
-
export declare const WRAP: readonly ["nowrap", "wrap", "wrap-reverse"];
|
|
15
|
-
export declare const PLACEMENT: readonly ["end", "start", "center"];
|
|
16
|
-
export type AlignItems = (typeof ALIGN_ITEMS)[number];
|
|
17
|
-
export type AlignSelf = (typeof ALIGN_SELF)[number];
|
|
18
|
-
export type Direction = (typeof DIRECTION)[number];
|
|
19
|
-
export type JustifyContent = (typeof JUSTIFY_CONTENT)[number];
|
|
20
|
-
export type TextAlign = (typeof TEXT_ALIGN)[number];
|
|
21
|
-
export type GridNumber = number | string;
|
|
22
|
-
export type Breakpoint = number | string | boolean;
|
|
23
|
-
export type Space = (typeof SPACE)[number];
|
|
24
|
-
export type Wrap = (typeof WRAP)[number];
|
|
25
|
-
export interface IColProps extends HTMLAttributes<HTMLDivElement> {
|
|
26
|
-
/** Sets the total number of grid `columns` that the column spans on all screen sizes */
|
|
27
|
-
size?: number | string;
|
|
28
|
-
/** Defines the column size on extra-small screens.
|
|
29
|
-
* See [breakpoints](/components/theme-object#default_theme).
|
|
30
|
-
*/
|
|
31
|
-
xs?: number | string | boolean;
|
|
32
|
-
/** Defines the column size on small screens*/
|
|
33
|
-
sm?: number | string | boolean;
|
|
34
|
-
/** Defines the column size on medium screens */
|
|
35
|
-
md?: number | string | boolean;
|
|
36
|
-
/** Defines the column size on large screens */
|
|
37
|
-
lg?: number | string | boolean;
|
|
38
|
-
/** Defines the column size on extra-large screens */
|
|
39
|
-
xl?: number | string | boolean;
|
|
40
|
-
/**
|
|
41
|
-
* Applies the `align-self` flex item property, overriding `Row alignItems`
|
|
42
|
-
* vertical alignment on all screen sizes
|
|
43
|
-
*/
|
|
44
|
-
alignSelf?: AlignSelf;
|
|
45
|
-
/** Applies the `align-self` flex item property to the column on extra-small screens */
|
|
46
|
-
alignSelfXs?: AlignSelf;
|
|
47
|
-
/** Applies the `align-self` flex item property to the column on small screens */
|
|
48
|
-
alignSelfSm?: AlignSelf;
|
|
49
|
-
/** Applies the `align-self` flex item property to the column on medium screens */
|
|
50
|
-
alignSelfMd?: AlignSelf;
|
|
51
|
-
/** Applies the `align-self` flex item property to the column on large screens */
|
|
52
|
-
alignSelfLg?: AlignSelf;
|
|
53
|
-
/** Applies the `align-self` flex item property to the column on extra-large screens */
|
|
54
|
-
alignSelfXl?: AlignSelf;
|
|
55
|
-
/**
|
|
56
|
-
* Applies the RTL-aware `text-align` property to the column on all screen sizes
|
|
57
|
-
*/
|
|
58
|
-
textAlign?: TextAlign;
|
|
59
|
-
/** Applies the `text-align` property to the column on extra-small screens */
|
|
60
|
-
textAlignXs?: TextAlign;
|
|
61
|
-
/** Applies the `text-align` property to the column on small screens */
|
|
62
|
-
textAlignSm?: TextAlign;
|
|
63
|
-
/** Applies the `text-align` property to the column on medium screens */
|
|
64
|
-
textAlignMd?: TextAlign;
|
|
65
|
-
/** Applies the `text-align` property to the column on large screens */
|
|
66
|
-
textAlignLg?: TextAlign;
|
|
67
|
-
/** Applies the `text-align` property to the column on extra-large screens */
|
|
68
|
-
textAlignXl?: TextAlign;
|
|
69
|
-
/**
|
|
70
|
-
* Offsets the column relative to the total number of `columns` in the
|
|
71
|
-
* grid on all screen sizes
|
|
72
|
-
*/
|
|
73
|
-
offset?: number | string;
|
|
74
|
-
/** Applies offset to the column on extra-small screens */
|
|
75
|
-
offsetXs?: number | string;
|
|
76
|
-
/** Applies offset to the column on small screens */
|
|
77
|
-
offsetSm?: number | string;
|
|
78
|
-
/** Applies offset to the column on medium screens */
|
|
79
|
-
offsetMd?: number | string;
|
|
80
|
-
/** Applies offset to the column on large screens */
|
|
81
|
-
offsetLg?: number | string;
|
|
82
|
-
/** Applies offset to the column on extra-large screens */
|
|
83
|
-
offsetXl?: number | string;
|
|
84
|
-
/**
|
|
85
|
-
* Applies the `order` flex item property to the column on all screen sizes. Note that
|
|
86
|
-
* order modification can introduce accessibility problems by
|
|
87
|
-
* confusing tab ordering. Rely on semantic DOM ordering whenever possible.
|
|
88
|
-
*/
|
|
89
|
-
order?: number | string;
|
|
90
|
-
/** Sets the `order` flex item property of the column on extra-small screens */
|
|
91
|
-
orderXs?: number | string;
|
|
92
|
-
/** Sets the `order` flex item property of the column on small screens */
|
|
93
|
-
orderSm?: number | string;
|
|
94
|
-
/** Sets the `order` flex item property of the column on medium screens */
|
|
95
|
-
orderMd?: number | string;
|
|
96
|
-
/** Sets the `order` flex item property of the column on large screens */
|
|
97
|
-
orderLg?: number | string;
|
|
98
|
-
/** Sets the `order` flex item property of the column on extra-large screens */
|
|
99
|
-
orderXl?: number | string;
|
|
100
|
-
}
|
|
101
|
-
export interface IGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
102
|
-
/** Defines the number of individual columns that the grid contains */
|
|
103
|
-
columns?: number | string;
|
|
104
|
-
/** Specifies the grid column gutter width. The value `false` collapses the gutters */
|
|
105
|
-
gutters?: Space;
|
|
106
|
-
/** Highlights the columns for layout debugging */
|
|
107
|
-
debug?: boolean;
|
|
108
|
-
}
|
|
109
|
-
export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
|
|
110
|
-
/**
|
|
111
|
-
* Applies the `align-items` flex container property to the row.
|
|
112
|
-
* This affects vertical `Col` alignment on all screen sizes.
|
|
113
|
-
*/
|
|
114
|
-
alignItems?: AlignItems;
|
|
115
|
-
/** Applies the `align-items` flex container property to the row on extra-small screens */
|
|
116
|
-
alignItemsXs?: AlignItems;
|
|
117
|
-
/** Applies the `align-items` flex container property to the row on small screens */
|
|
118
|
-
alignItemsSm?: AlignItems;
|
|
119
|
-
/** Applies the `align-items` flex container property to the row on medium screens */
|
|
120
|
-
alignItemsMd?: AlignItems;
|
|
121
|
-
/** Applies the `align-items` flex container property to the row on large screens */
|
|
122
|
-
alignItemsLg?: AlignItems;
|
|
123
|
-
/** Applies the `align-items` flex container property to the row on extra-large screens */
|
|
124
|
-
alignItemsXl?: AlignItems;
|
|
125
|
-
/**
|
|
126
|
-
* Applies the `justify-content` flex container property to the row.
|
|
127
|
-
* This affects horizontal `Col` alignment on all screen sizes.
|
|
128
|
-
*/
|
|
129
|
-
justifyContent?: JustifyContent;
|
|
130
|
-
/** Applies the `justify-content` flex container property to the row on extra-small screens */
|
|
131
|
-
justifyContentXs?: JustifyContent;
|
|
132
|
-
/** Applies the `justify-content` flex container property to the row on small screens */
|
|
133
|
-
justifyContentSm?: JustifyContent;
|
|
134
|
-
/** Applies the `justify-content` flex container property to the row on medium screens */
|
|
135
|
-
justifyContentMd?: JustifyContent;
|
|
136
|
-
/** Applies the `justify-content` flex container property to the row on large screens */
|
|
137
|
-
justifyContentLg?: JustifyContent;
|
|
138
|
-
/** Applies the `justify-content` flex container property to the row on extra-large screens */
|
|
139
|
-
justifyContentXl?: JustifyContent;
|
|
140
|
-
/**
|
|
141
|
-
* Applies the `flex-wrap` container property to the row. This affects `Col` wrapping on
|
|
142
|
-
* all screen sizes.
|
|
143
|
-
*/
|
|
144
|
-
wrap?: Wrap;
|
|
145
|
-
/** Applies the `flex-wrap` container property to the row on extra-small screens */
|
|
146
|
-
wrapXs?: Wrap;
|
|
147
|
-
/** Applies the `flex-wrap` container property to the row on small screens */
|
|
148
|
-
wrapSm?: Wrap;
|
|
149
|
-
/** Applies the `flex-wrap` container property to the row on medium screens */
|
|
150
|
-
wrapMd?: Wrap;
|
|
151
|
-
/** Applies the `flex-wrap` container property to the row on large screens */
|
|
152
|
-
wrapLg?: Wrap;
|
|
153
|
-
/** Applies the `flex-wrap` container property to the row on extra-large screens */
|
|
154
|
-
wrapXl?: Wrap;
|
|
155
|
-
}
|
|
156
|
-
export declare const ORIENTATION: readonly ["top", "bottom", "start", "end"];
|
|
157
|
-
export type Orientation = (typeof ORIENTATION)[number];
|
|
158
|
-
export interface IPaneProviderProps {
|
|
159
|
-
/** Identifies the pane provider */
|
|
160
|
-
id?: string;
|
|
161
|
-
/** Provides the total width, in `px` units, of all panes in the layout */
|
|
162
|
-
totalPanesWidth: number;
|
|
163
|
-
/** Provides the total height, in `px` units, of all panes in the layout */
|
|
164
|
-
totalPanesHeight: number;
|
|
165
|
-
/** Defines default row values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter. */
|
|
166
|
-
defaultRowValues?: Record<string, number>;
|
|
167
|
-
/** Defines default column values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter. */
|
|
168
|
-
defaultColumnValues?: Record<string, number>;
|
|
169
|
-
/** Defines row values, in `fr` units, for a controlled layout. The values are keyed by splitter. */
|
|
170
|
-
rowValues?: Record<string, number>;
|
|
171
|
-
/** Defines column values, in `fr` units, for a controlled layout. The values are keyed by splitter. */
|
|
172
|
-
columnValues?: Record<string, number>;
|
|
173
|
-
/**
|
|
174
|
-
* Handles splitter position changes
|
|
175
|
-
*
|
|
176
|
-
* @param rowValues The updated row values
|
|
177
|
-
* @param columnValues The updated column values
|
|
178
|
-
*/
|
|
179
|
-
onChange?: (rowValues: Record<string, number>, columnValues: Record<string, number>) => void;
|
|
180
|
-
/**
|
|
181
|
-
* Surfaces render props for applying splitter state to the supporting layout
|
|
182
|
-
*
|
|
183
|
-
* @param id Provides the `id` prop, if specified; otherwise, a generated ID.
|
|
184
|
-
* @param getColumnValue Gets column value by key
|
|
185
|
-
* @param getRowValue Gets row value by key
|
|
186
|
-
* @param getGridTemplateRows Gets grid template rows track
|
|
187
|
-
* @param getGridTemplateColumns Gets grid template columns track
|
|
188
|
-
*/
|
|
189
|
-
children?: ({ id, getColumnValue, getRowValue, getGridTemplateRows, getGridTemplateColumns }: {
|
|
190
|
-
id: string;
|
|
191
|
-
getColumnValue: (splitterKey: string, isPixels?: boolean) => number;
|
|
192
|
-
getRowValue: (splitterKey: string, isPixels?: boolean) => number;
|
|
193
|
-
getGridTemplateRows: (isPixels?: boolean) => string;
|
|
194
|
-
getGridTemplateColumns: (isPixels?: boolean) => string;
|
|
195
|
-
}) => ReactNode;
|
|
196
|
-
}
|
|
197
|
-
export interface ISplitterProps extends HTMLAttributes<HTMLDivElement> {
|
|
198
|
-
/** Identifies the associated `PaneProvider`. Assumes the closest parent provider, by default. */
|
|
199
|
-
providerId?: string;
|
|
200
|
-
/** Specifies the splitter key */
|
|
201
|
-
layoutKey: string;
|
|
202
|
-
/** Sets a minimum, in `fr` units, for splitter position */
|
|
203
|
-
min: number;
|
|
204
|
-
/** Sets a maximum, in `fr` units, for splitter position */
|
|
205
|
-
max: number;
|
|
206
|
-
/** Determines splitter orientation within a pane */
|
|
207
|
-
orientation?: Orientation;
|
|
208
|
-
/** Determines if the splitter only toggles between `min` and `max` */
|
|
209
|
-
isFixed?: boolean;
|
|
210
|
-
}
|
|
211
|
-
export interface ISplitterButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
212
|
-
/** Adjusts the placement of the splitter button. Assumes start when vertical and center when horizontal, by default. */
|
|
213
|
-
placement?: (typeof PLACEMENT)[number];
|
|
214
|
-
/** Renders the provided label text inside a tooltip */
|
|
215
|
-
label: string;
|
|
216
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
import { ReactNode, HTMLAttributes, ButtonHTMLAttributes } from 'react';
|
|
8
|
+
export declare const ALIGN_ITEMS: readonly ["start", "end", "center", "baseline", "stretch"];
|
|
9
|
+
export declare const ALIGN_SELF: readonly ["auto", "start", "end", "center", "baseline", "stretch"];
|
|
10
|
+
export declare const DIRECTION: readonly ["row", "row-reverse", "column", "column-reverse"];
|
|
11
|
+
export declare const JUSTIFY_CONTENT: readonly ["start", "end", "center", "between", "around"];
|
|
12
|
+
export declare const TEXT_ALIGN: readonly ["start", "end", "center", "justify"];
|
|
13
|
+
export declare const SPACE: readonly [false, "xxs", "xs", "sm", "md", "lg", "xl", "xxl"];
|
|
14
|
+
export declare const WRAP: readonly ["nowrap", "wrap", "wrap-reverse"];
|
|
15
|
+
export declare const PLACEMENT: readonly ["end", "start", "center"];
|
|
16
|
+
export type AlignItems = (typeof ALIGN_ITEMS)[number];
|
|
17
|
+
export type AlignSelf = (typeof ALIGN_SELF)[number];
|
|
18
|
+
export type Direction = (typeof DIRECTION)[number];
|
|
19
|
+
export type JustifyContent = (typeof JUSTIFY_CONTENT)[number];
|
|
20
|
+
export type TextAlign = (typeof TEXT_ALIGN)[number];
|
|
21
|
+
export type GridNumber = number | string;
|
|
22
|
+
export type Breakpoint = number | string | boolean;
|
|
23
|
+
export type Space = (typeof SPACE)[number];
|
|
24
|
+
export type Wrap = (typeof WRAP)[number];
|
|
25
|
+
export interface IColProps extends HTMLAttributes<HTMLDivElement> {
|
|
26
|
+
/** Sets the total number of grid `columns` that the column spans on all screen sizes */
|
|
27
|
+
size?: number | string;
|
|
28
|
+
/** Defines the column size on extra-small screens.
|
|
29
|
+
* See [breakpoints](/components/theme-object#default_theme).
|
|
30
|
+
*/
|
|
31
|
+
xs?: number | string | boolean;
|
|
32
|
+
/** Defines the column size on small screens*/
|
|
33
|
+
sm?: number | string | boolean;
|
|
34
|
+
/** Defines the column size on medium screens */
|
|
35
|
+
md?: number | string | boolean;
|
|
36
|
+
/** Defines the column size on large screens */
|
|
37
|
+
lg?: number | string | boolean;
|
|
38
|
+
/** Defines the column size on extra-large screens */
|
|
39
|
+
xl?: number | string | boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Applies the `align-self` flex item property, overriding `Row alignItems`
|
|
42
|
+
* vertical alignment on all screen sizes
|
|
43
|
+
*/
|
|
44
|
+
alignSelf?: AlignSelf;
|
|
45
|
+
/** Applies the `align-self` flex item property to the column on extra-small screens */
|
|
46
|
+
alignSelfXs?: AlignSelf;
|
|
47
|
+
/** Applies the `align-self` flex item property to the column on small screens */
|
|
48
|
+
alignSelfSm?: AlignSelf;
|
|
49
|
+
/** Applies the `align-self` flex item property to the column on medium screens */
|
|
50
|
+
alignSelfMd?: AlignSelf;
|
|
51
|
+
/** Applies the `align-self` flex item property to the column on large screens */
|
|
52
|
+
alignSelfLg?: AlignSelf;
|
|
53
|
+
/** Applies the `align-self` flex item property to the column on extra-large screens */
|
|
54
|
+
alignSelfXl?: AlignSelf;
|
|
55
|
+
/**
|
|
56
|
+
* Applies the RTL-aware `text-align` property to the column on all screen sizes
|
|
57
|
+
*/
|
|
58
|
+
textAlign?: TextAlign;
|
|
59
|
+
/** Applies the `text-align` property to the column on extra-small screens */
|
|
60
|
+
textAlignXs?: TextAlign;
|
|
61
|
+
/** Applies the `text-align` property to the column on small screens */
|
|
62
|
+
textAlignSm?: TextAlign;
|
|
63
|
+
/** Applies the `text-align` property to the column on medium screens */
|
|
64
|
+
textAlignMd?: TextAlign;
|
|
65
|
+
/** Applies the `text-align` property to the column on large screens */
|
|
66
|
+
textAlignLg?: TextAlign;
|
|
67
|
+
/** Applies the `text-align` property to the column on extra-large screens */
|
|
68
|
+
textAlignXl?: TextAlign;
|
|
69
|
+
/**
|
|
70
|
+
* Offsets the column relative to the total number of `columns` in the
|
|
71
|
+
* grid on all screen sizes
|
|
72
|
+
*/
|
|
73
|
+
offset?: number | string;
|
|
74
|
+
/** Applies offset to the column on extra-small screens */
|
|
75
|
+
offsetXs?: number | string;
|
|
76
|
+
/** Applies offset to the column on small screens */
|
|
77
|
+
offsetSm?: number | string;
|
|
78
|
+
/** Applies offset to the column on medium screens */
|
|
79
|
+
offsetMd?: number | string;
|
|
80
|
+
/** Applies offset to the column on large screens */
|
|
81
|
+
offsetLg?: number | string;
|
|
82
|
+
/** Applies offset to the column on extra-large screens */
|
|
83
|
+
offsetXl?: number | string;
|
|
84
|
+
/**
|
|
85
|
+
* Applies the `order` flex item property to the column on all screen sizes. Note that
|
|
86
|
+
* order modification can introduce accessibility problems by
|
|
87
|
+
* confusing tab ordering. Rely on semantic DOM ordering whenever possible.
|
|
88
|
+
*/
|
|
89
|
+
order?: number | string;
|
|
90
|
+
/** Sets the `order` flex item property of the column on extra-small screens */
|
|
91
|
+
orderXs?: number | string;
|
|
92
|
+
/** Sets the `order` flex item property of the column on small screens */
|
|
93
|
+
orderSm?: number | string;
|
|
94
|
+
/** Sets the `order` flex item property of the column on medium screens */
|
|
95
|
+
orderMd?: number | string;
|
|
96
|
+
/** Sets the `order` flex item property of the column on large screens */
|
|
97
|
+
orderLg?: number | string;
|
|
98
|
+
/** Sets the `order` flex item property of the column on extra-large screens */
|
|
99
|
+
orderXl?: number | string;
|
|
100
|
+
}
|
|
101
|
+
export interface IGridProps extends HTMLAttributes<HTMLDivElement> {
|
|
102
|
+
/** Defines the number of individual columns that the grid contains */
|
|
103
|
+
columns?: number | string;
|
|
104
|
+
/** Specifies the grid column gutter width. The value `false` collapses the gutters */
|
|
105
|
+
gutters?: Space;
|
|
106
|
+
/** Highlights the columns for layout debugging */
|
|
107
|
+
debug?: boolean;
|
|
108
|
+
}
|
|
109
|
+
export interface IRowProps extends HTMLAttributes<HTMLDivElement> {
|
|
110
|
+
/**
|
|
111
|
+
* Applies the `align-items` flex container property to the row.
|
|
112
|
+
* This affects vertical `Col` alignment on all screen sizes.
|
|
113
|
+
*/
|
|
114
|
+
alignItems?: AlignItems;
|
|
115
|
+
/** Applies the `align-items` flex container property to the row on extra-small screens */
|
|
116
|
+
alignItemsXs?: AlignItems;
|
|
117
|
+
/** Applies the `align-items` flex container property to the row on small screens */
|
|
118
|
+
alignItemsSm?: AlignItems;
|
|
119
|
+
/** Applies the `align-items` flex container property to the row on medium screens */
|
|
120
|
+
alignItemsMd?: AlignItems;
|
|
121
|
+
/** Applies the `align-items` flex container property to the row on large screens */
|
|
122
|
+
alignItemsLg?: AlignItems;
|
|
123
|
+
/** Applies the `align-items` flex container property to the row on extra-large screens */
|
|
124
|
+
alignItemsXl?: AlignItems;
|
|
125
|
+
/**
|
|
126
|
+
* Applies the `justify-content` flex container property to the row.
|
|
127
|
+
* This affects horizontal `Col` alignment on all screen sizes.
|
|
128
|
+
*/
|
|
129
|
+
justifyContent?: JustifyContent;
|
|
130
|
+
/** Applies the `justify-content` flex container property to the row on extra-small screens */
|
|
131
|
+
justifyContentXs?: JustifyContent;
|
|
132
|
+
/** Applies the `justify-content` flex container property to the row on small screens */
|
|
133
|
+
justifyContentSm?: JustifyContent;
|
|
134
|
+
/** Applies the `justify-content` flex container property to the row on medium screens */
|
|
135
|
+
justifyContentMd?: JustifyContent;
|
|
136
|
+
/** Applies the `justify-content` flex container property to the row on large screens */
|
|
137
|
+
justifyContentLg?: JustifyContent;
|
|
138
|
+
/** Applies the `justify-content` flex container property to the row on extra-large screens */
|
|
139
|
+
justifyContentXl?: JustifyContent;
|
|
140
|
+
/**
|
|
141
|
+
* Applies the `flex-wrap` container property to the row. This affects `Col` wrapping on
|
|
142
|
+
* all screen sizes.
|
|
143
|
+
*/
|
|
144
|
+
wrap?: Wrap;
|
|
145
|
+
/** Applies the `flex-wrap` container property to the row on extra-small screens */
|
|
146
|
+
wrapXs?: Wrap;
|
|
147
|
+
/** Applies the `flex-wrap` container property to the row on small screens */
|
|
148
|
+
wrapSm?: Wrap;
|
|
149
|
+
/** Applies the `flex-wrap` container property to the row on medium screens */
|
|
150
|
+
wrapMd?: Wrap;
|
|
151
|
+
/** Applies the `flex-wrap` container property to the row on large screens */
|
|
152
|
+
wrapLg?: Wrap;
|
|
153
|
+
/** Applies the `flex-wrap` container property to the row on extra-large screens */
|
|
154
|
+
wrapXl?: Wrap;
|
|
155
|
+
}
|
|
156
|
+
export declare const ORIENTATION: readonly ["top", "bottom", "start", "end"];
|
|
157
|
+
export type Orientation = (typeof ORIENTATION)[number];
|
|
158
|
+
export interface IPaneProviderProps {
|
|
159
|
+
/** Identifies the pane provider */
|
|
160
|
+
id?: string;
|
|
161
|
+
/** Provides the total width, in `px` units, of all panes in the layout */
|
|
162
|
+
totalPanesWidth: number;
|
|
163
|
+
/** Provides the total height, in `px` units, of all panes in the layout */
|
|
164
|
+
totalPanesHeight: number;
|
|
165
|
+
/** Defines default row values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter. */
|
|
166
|
+
defaultRowValues?: Record<string, number>;
|
|
167
|
+
/** Defines default column values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter. */
|
|
168
|
+
defaultColumnValues?: Record<string, number>;
|
|
169
|
+
/** Defines row values, in `fr` units, for a controlled layout. The values are keyed by splitter. */
|
|
170
|
+
rowValues?: Record<string, number>;
|
|
171
|
+
/** Defines column values, in `fr` units, for a controlled layout. The values are keyed by splitter. */
|
|
172
|
+
columnValues?: Record<string, number>;
|
|
173
|
+
/**
|
|
174
|
+
* Handles splitter position changes
|
|
175
|
+
*
|
|
176
|
+
* @param rowValues The updated row values
|
|
177
|
+
* @param columnValues The updated column values
|
|
178
|
+
*/
|
|
179
|
+
onChange?: (rowValues: Record<string, number>, columnValues: Record<string, number>) => void;
|
|
180
|
+
/**
|
|
181
|
+
* Surfaces render props for applying splitter state to the supporting layout
|
|
182
|
+
*
|
|
183
|
+
* @param id Provides the `id` prop, if specified; otherwise, a generated ID.
|
|
184
|
+
* @param getColumnValue Gets column value by key
|
|
185
|
+
* @param getRowValue Gets row value by key
|
|
186
|
+
* @param getGridTemplateRows Gets grid template rows track
|
|
187
|
+
* @param getGridTemplateColumns Gets grid template columns track
|
|
188
|
+
*/
|
|
189
|
+
children?: ({ id, getColumnValue, getRowValue, getGridTemplateRows, getGridTemplateColumns }: {
|
|
190
|
+
id: string;
|
|
191
|
+
getColumnValue: (splitterKey: string, isPixels?: boolean) => number;
|
|
192
|
+
getRowValue: (splitterKey: string, isPixels?: boolean) => number;
|
|
193
|
+
getGridTemplateRows: (isPixels?: boolean) => string;
|
|
194
|
+
getGridTemplateColumns: (isPixels?: boolean) => string;
|
|
195
|
+
}) => ReactNode;
|
|
196
|
+
}
|
|
197
|
+
export interface ISplitterProps extends HTMLAttributes<HTMLDivElement> {
|
|
198
|
+
/** Identifies the associated `PaneProvider`. Assumes the closest parent provider, by default. */
|
|
199
|
+
providerId?: string;
|
|
200
|
+
/** Specifies the splitter key */
|
|
201
|
+
layoutKey: string;
|
|
202
|
+
/** Sets a minimum, in `fr` units, for splitter position */
|
|
203
|
+
min: number;
|
|
204
|
+
/** Sets a maximum, in `fr` units, for splitter position */
|
|
205
|
+
max: number;
|
|
206
|
+
/** Determines splitter orientation within a pane */
|
|
207
|
+
orientation?: Orientation;
|
|
208
|
+
/** Determines if the splitter only toggles between `min` and `max` */
|
|
209
|
+
isFixed?: boolean;
|
|
210
|
+
}
|
|
211
|
+
export interface ISplitterButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
212
|
+
/** Adjusts the placement of the splitter button. Assumes start when vertical and center when horizontal, by default. */
|
|
213
|
+
placement?: (typeof PLACEMENT)[number];
|
|
214
|
+
/** Renders the provided label text inside a tooltip */
|
|
215
|
+
label: string;
|
|
216
|
+
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
/// <reference types="react" />
|
|
8
|
-
import { GridNumber, Space } from '../types';
|
|
9
|
-
interface IGridContext {
|
|
10
|
-
columns?: GridNumber;
|
|
11
|
-
gutters?: Space;
|
|
12
|
-
debug?: boolean;
|
|
13
|
-
}
|
|
14
|
-
export declare const GridContext: import("react").Context<IGridContext>;
|
|
15
|
-
/**
|
|
16
|
-
* Retrieve Grid component context
|
|
17
|
-
*/
|
|
18
|
-
declare const useGridContext: () => IGridContext;
|
|
19
|
-
export default useGridContext;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
import { GridNumber, Space } from '../types';
|
|
9
|
+
interface IGridContext {
|
|
10
|
+
columns?: GridNumber;
|
|
11
|
+
gutters?: Space;
|
|
12
|
+
debug?: boolean;
|
|
13
|
+
}
|
|
14
|
+
export declare const GridContext: import("react").Context<IGridContext>;
|
|
15
|
+
/**
|
|
16
|
+
* Retrieve Grid component context
|
|
17
|
+
*/
|
|
18
|
+
declare const useGridContext: () => IGridContext;
|
|
19
|
+
export default useGridContext;
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
/// <reference types="react" />
|
|
8
|
-
interface IPaneContext {
|
|
9
|
-
id?: string;
|
|
10
|
-
isVisible?: boolean;
|
|
11
|
-
setId: (id: string) => void;
|
|
12
|
-
}
|
|
13
|
-
export declare const PaneContext: import("react").Context<IPaneContext>;
|
|
14
|
-
/**
|
|
15
|
-
* Retrieve Splitter component context
|
|
16
|
-
*/
|
|
17
|
-
declare const usePaneContext: () => IPaneContext;
|
|
18
|
-
export default usePaneContext;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
interface IPaneContext {
|
|
9
|
+
id?: string;
|
|
10
|
+
isVisible?: boolean;
|
|
11
|
+
setId: (id: string) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const PaneContext: import("react").Context<IPaneContext>;
|
|
14
|
+
/**
|
|
15
|
+
* Retrieve Splitter component context
|
|
16
|
+
*/
|
|
17
|
+
declare const usePaneContext: () => IPaneContext;
|
|
18
|
+
export default usePaneContext;
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
/// <reference types="react" />
|
|
8
|
-
interface IPaneProviderContextData {
|
|
9
|
-
rowState: Record<string, number>;
|
|
10
|
-
columnState: Record<string, number>;
|
|
11
|
-
setRowValue: (isTop: boolean, id: string, value: number) => void;
|
|
12
|
-
setColumnValue: (isStart: boolean, id: string, value: number) => void;
|
|
13
|
-
getColumnValue: (splitterKey: string, isPixels?: boolean) => number;
|
|
14
|
-
getRowValue: (splitterKey: string, isPixels?: boolean) => number;
|
|
15
|
-
totalPanesHeight: number;
|
|
16
|
-
totalPanesWidth: number;
|
|
17
|
-
pixelsPerFr: {
|
|
18
|
-
rows: number;
|
|
19
|
-
columns: number;
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
interface IPaneProviderContext {
|
|
23
|
-
providerId?: string;
|
|
24
|
-
contextData?: Record<string, IPaneProviderContextData>;
|
|
25
|
-
}
|
|
26
|
-
export declare const PaneProviderContext: import("react").Context<IPaneProviderContext>;
|
|
27
|
-
export declare const usePaneProviderContextData: (providerId?: string) => IPaneProviderContextData | undefined;
|
|
28
|
-
declare const usePaneProviderContext: () => IPaneProviderContext;
|
|
29
|
-
export default usePaneProviderContext;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
interface IPaneProviderContextData {
|
|
9
|
+
rowState: Record<string, number>;
|
|
10
|
+
columnState: Record<string, number>;
|
|
11
|
+
setRowValue: (isTop: boolean, id: string, value: number) => void;
|
|
12
|
+
setColumnValue: (isStart: boolean, id: string, value: number) => void;
|
|
13
|
+
getColumnValue: (splitterKey: string, isPixels?: boolean) => number;
|
|
14
|
+
getRowValue: (splitterKey: string, isPixels?: boolean) => number;
|
|
15
|
+
totalPanesHeight: number;
|
|
16
|
+
totalPanesWidth: number;
|
|
17
|
+
pixelsPerFr: {
|
|
18
|
+
rows: number;
|
|
19
|
+
columns: number;
|
|
20
|
+
};
|
|
21
|
+
}
|
|
22
|
+
interface IPaneProviderContext {
|
|
23
|
+
providerId?: string;
|
|
24
|
+
contextData?: Record<string, IPaneProviderContextData>;
|
|
25
|
+
}
|
|
26
|
+
export declare const PaneProviderContext: import("react").Context<IPaneProviderContext>;
|
|
27
|
+
export declare const usePaneProviderContextData: (providerId?: string) => IPaneProviderContextData | undefined;
|
|
28
|
+
declare const usePaneProviderContext: () => IPaneProviderContext;
|
|
29
|
+
export default usePaneProviderContext;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright Zendesk, Inc.
|
|
3
|
-
*
|
|
4
|
-
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
-
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
-
*/
|
|
7
|
-
/// <reference types="react" />
|
|
8
|
-
import { ISplitterProps, Orientation } from '../types';
|
|
9
|
-
interface IPaneSplitterContext {
|
|
10
|
-
orientation?: Orientation;
|
|
11
|
-
min: ISplitterProps['min'];
|
|
12
|
-
max: ISplitterProps['max'];
|
|
13
|
-
layoutKey: ISplitterProps['layoutKey'];
|
|
14
|
-
valueNow?: number;
|
|
15
|
-
size?: number;
|
|
16
|
-
isRow: boolean;
|
|
17
|
-
providerId?: ISplitterProps['providerId'];
|
|
18
|
-
}
|
|
19
|
-
export declare const PaneSplitterContext: import("react").Context<IPaneSplitterContext>;
|
|
20
|
-
/**
|
|
21
|
-
* Retrieve Pane Splitter component context
|
|
22
|
-
*/
|
|
23
|
-
declare const usePaneSplitterContext: () => IPaneSplitterContext;
|
|
24
|
-
export default usePaneSplitterContext;
|
|
1
|
+
/**
|
|
2
|
+
* Copyright Zendesk, Inc.
|
|
3
|
+
*
|
|
4
|
+
* Use of this source code is governed under the Apache License, Version 2.0
|
|
5
|
+
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
*/
|
|
7
|
+
/// <reference types="react" />
|
|
8
|
+
import { ISplitterProps, Orientation } from '../types';
|
|
9
|
+
interface IPaneSplitterContext {
|
|
10
|
+
orientation?: Orientation;
|
|
11
|
+
min: ISplitterProps['min'];
|
|
12
|
+
max: ISplitterProps['max'];
|
|
13
|
+
layoutKey: ISplitterProps['layoutKey'];
|
|
14
|
+
valueNow?: number;
|
|
15
|
+
size?: number;
|
|
16
|
+
isRow: boolean;
|
|
17
|
+
providerId?: ISplitterProps['providerId'];
|
|
18
|
+
}
|
|
19
|
+
export declare const PaneSplitterContext: import("react").Context<IPaneSplitterContext>;
|
|
20
|
+
/**
|
|
21
|
+
* Retrieve Pane Splitter component context
|
|
22
|
+
*/
|
|
23
|
+
declare const usePaneSplitterContext: () => IPaneSplitterContext;
|
|
24
|
+
export default usePaneSplitterContext;
|