1 | import * as React from 'react';
|
2 | import { IComponentStyles, IHTMLSlot, ISlotProp, IComponent, IStyleableComponentProps, ISlottableProps } from '../../Foundation';
|
3 | /**
|
4 | * Defines a type made by the union of the different values that the align-items and justify-content flexbox
|
5 | * properties can take.
|
6 | * {@docCategory Stack}
|
7 | */
|
8 | export declare type Alignment = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'baseline' | 'stretch';
|
9 | /**
|
10 | * {@docCategory Stack}
|
11 | */
|
12 | export declare type IStackComponent = IComponent<IStackProps, IStackTokens, IStackStyles>;
|
13 | /**
|
14 | * {@docCategory Stack}
|
15 | */
|
16 | export declare type IStackTokenReturnType = ReturnType<Extract<IStackComponent['tokens'], Function>>;
|
17 | /**
|
18 | * {@docCategory Stack}
|
19 | */
|
20 | export declare type IStackStylesReturnType = ReturnType<Extract<IStackComponent['styles'], Function>>;
|
21 | /**
|
22 | * {@docCategory Stack}
|
23 | */
|
24 | export declare type IStackSlot = ISlotProp<IStackProps>;
|
25 | /**
|
26 | * {@docCategory Stack}
|
27 | */
|
28 | export interface IStackSlots {
|
29 | /**
|
30 | * Defines root slot of the component.
|
31 | */
|
32 | root?: IHTMLSlot;
|
33 | /**
|
34 | * Defines a slot that is placed inside the root slot in order to achieve wrapping. Only used when the wrap
|
35 | * property is set to true.
|
36 | */
|
37 | inner?: IHTMLSlot;
|
38 | }
|
39 | /**
|
40 | * {@docCategory Stack}
|
41 | */
|
42 | export interface IStackProps extends ISlottableProps<IStackSlots>, IStyleableComponentProps<IStackProps, IStackTokens, IStackStyles>, React.HTMLAttributes<HTMLElement> {
|
43 | /**
|
44 | * Defines how to render the Stack.
|
45 | */
|
46 | as?: React.ElementType<React.HTMLAttributes<HTMLElement>>;
|
47 | /**
|
48 | * Defines whether to render Stack children horizontally.
|
49 | * @defaultvalue false
|
50 | */
|
51 | horizontal?: boolean;
|
52 | /**
|
53 | * Defines whether to render Stack children in the opposite direction (bottom-to-top if it's a vertical Stack and
|
54 | * right-to-left if it's a horizontal Stack).
|
55 | * @defaultvalue false
|
56 | */
|
57 | reversed?: boolean;
|
58 | /**
|
59 | * Defines how to align Stack children horizontally (along the x-axis).
|
60 | */
|
61 | horizontalAlign?: Alignment;
|
62 | /**
|
63 | * Defines how to align Stack children vertically (along the y-axis).
|
64 | */
|
65 | verticalAlign?: Alignment;
|
66 | /**
|
67 | * Defines whether the Stack should take up 100% of the height of its parent.
|
68 | * This property is required to be set to true when using the `grow` flag on children in vertical oriented Stacks.
|
69 | * Stacks are rendered as block elements and grow horizontally to the container already.
|
70 | * @defaultvalue false
|
71 | */
|
72 | verticalFill?: boolean;
|
73 | /**
|
74 | * Defines whether Stack children should not shrink to fit the available space.
|
75 | * @defaultvalue false
|
76 | */
|
77 | disableShrink?: boolean;
|
78 | /**
|
79 | * Defines how much to grow the Stack in proportion to its siblings.
|
80 | */
|
81 | grow?: boolean | number | 'inherit' | 'initial' | 'unset';
|
82 | /**
|
83 | * Defines the spacing between Stack children.
|
84 | * The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
|
85 | * If 'column gap' is omitted, it's set to the same value as 'row gap'.
|
86 | * @deprecated Use `childrenGap` token in `IStackTokens` instead.
|
87 | */
|
88 | gap?: number | string;
|
89 | /**
|
90 | * Defines the maximum width that the Stack can take.
|
91 | * @deprecated Use `maxWidth` token in `IStackTokens` instead.
|
92 | */
|
93 | maxWidth?: number | string;
|
94 | /**
|
95 | * Defines the maximum height that the Stack can take.
|
96 | * @deprecated Use `maxHeight` token in `IStackTokens` instead.
|
97 | */
|
98 | maxHeight?: number | string;
|
99 | /**
|
100 | * Defines the inner padding of the Stack.
|
101 | * @deprecated Use `padding` token in `IStackTokens` instead.
|
102 | */
|
103 | padding?: number | string;
|
104 | /**
|
105 | * Defines whether Stack children should wrap onto multiple rows or columns when they are about to overflow
|
106 | * the size of the Stack.
|
107 | * @defaultvalue false
|
108 | */
|
109 | wrap?: boolean;
|
110 | }
|
111 | /**
|
112 | * {@docCategory Stack}
|
113 | */
|
114 | export interface IStackTokens {
|
115 | /**
|
116 | * Defines the spacing between Stack children.
|
117 | * The property is specified as a value for 'row gap', followed optionally by a value for 'column gap'.
|
118 | * If 'column gap' is omitted, it's set to the same value as 'row gap'.
|
119 | */
|
120 | childrenGap?: number | string;
|
121 | /**
|
122 | * Defines a maximum height for the Stack.
|
123 | */
|
124 | maxHeight?: number | string;
|
125 | /**
|
126 | * Defines a maximum width for the Stack.
|
127 | */
|
128 | maxWidth?: number | string;
|
129 | /**
|
130 | * Defines the padding to be applied to the Stack contents relative to its border.
|
131 | */
|
132 | padding?: number | string;
|
133 | }
|
134 | /**
|
135 | * {@docCategory Stack}
|
136 | */
|
137 | export declare type IStackStyles = IComponentStyles<IStackSlots>;
|