@ansible/ansible-ui-framework 2.4.9 → 2.4.11

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.
@@ -2,7 +2,9 @@ import { CSSProperties, ReactNode } from 'react';
2
2
  export type PageDashboardCardWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
3
3
  export type PageDashboardCardHeight = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
4
4
  export declare function PageDashboardCard(props: {
5
+ supertitle?: string;
5
6
  title?: string;
7
+ subtitle?: string;
6
8
  description?: string;
7
9
  linkText?: string;
8
10
  to?: string;
@@ -13,4 +15,5 @@ export declare function PageDashboardCard(props: {
13
15
  help?: string[];
14
16
  helpTitle?: string;
15
17
  helpDocLink?: string;
18
+ headerControls?: ReactNode;
16
19
  }): JSX.Element;
@@ -3,6 +3,7 @@ import { ChartDonutProps } from '@patternfly/react-charts';
3
3
  export declare function PageDonutChart(props: Omit<ChartDonutProps, 'width' | 'height'>): JSX.Element;
4
4
  export declare function PageDashboardDonutCard(props: {
5
5
  title: string;
6
+ linkText?: string;
6
7
  to: string;
7
8
  items: {
8
9
  count: number;
@@ -1,5 +1,6 @@
1
1
  import { Dispatch, ReactNode, SetStateAction } from 'react';
2
2
  import { IPageAction } from '../PageActions/PageAction';
3
+ import './PageTable.css';
3
4
  import { ITableColumn } from './PageTableColumn';
4
5
  import { PageTableViewType } from './PageTableViewType';
5
6
  import { IToolbarFilter } from './PageToolbar';
@@ -78,4 +78,212 @@ export declare function useVisibleColumns<T extends object>(columns: ITableColum
78
78
  export declare function useDescriptionColumns<T extends object>(columns: ITableColumn<T>[]): ITableColumn<T>[];
79
79
  export declare function useExpandedColumns<T extends object>(columns: ITableColumn<T>[]): ITableColumn<T>[];
80
80
  type CellFn<T extends object, R> = (item: T) => R;
81
+ export declare function useColumnsWithoutSort<T extends object>(columns: ITableColumn<T>[]): ({
82
+ sort: undefined;
83
+ type?: undefined;
84
+ value?: CellFn<T, string | number | boolean | string[] | null | undefined> | undefined;
85
+ cell: CellFn<T, ReactNode>;
86
+ id?: string | undefined;
87
+ header: string;
88
+ minWidth?: number | undefined;
89
+ maxWidth?: number | undefined;
90
+ enabled?: boolean | undefined;
91
+ isIdColumn?: boolean | undefined;
92
+ defaultSortDirection?: "desc" | "asc" | undefined;
93
+ defaultSort?: boolean | undefined;
94
+ icon?: ((item: T) => ReactNode) | undefined;
95
+ table?: ColumnTableOption | undefined;
96
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
97
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
98
+ modal?: ColumnModalOption | undefined;
99
+ } | {
100
+ sort: undefined;
101
+ type: "text";
102
+ value: CellFn<T, string | null | undefined>;
103
+ id?: string | undefined;
104
+ header: string;
105
+ minWidth?: number | undefined;
106
+ maxWidth?: number | undefined;
107
+ enabled?: boolean | undefined;
108
+ isIdColumn?: boolean | undefined;
109
+ defaultSortDirection?: "desc" | "asc" | undefined;
110
+ defaultSort?: boolean | undefined;
111
+ icon?: ((item: T) => ReactNode) | undefined;
112
+ table?: ColumnTableOption | undefined;
113
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
114
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
115
+ modal?: ColumnModalOption | undefined;
116
+ } | {
117
+ sort: undefined;
118
+ type: "description";
119
+ value: CellFn<T, string | null | undefined>;
120
+ id?: string | undefined;
121
+ header: string;
122
+ minWidth?: number | undefined;
123
+ maxWidth?: number | undefined;
124
+ enabled?: boolean | undefined;
125
+ isIdColumn?: boolean | undefined;
126
+ defaultSortDirection?: "desc" | "asc" | undefined;
127
+ defaultSort?: boolean | undefined;
128
+ icon?: ((item: T) => ReactNode) | undefined;
129
+ table?: ColumnTableOption | undefined;
130
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
131
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
132
+ modal?: ColumnModalOption | undefined;
133
+ } | {
134
+ sort: undefined;
135
+ type: "datetime";
136
+ value: CellFn<T, string | number | undefined>;
137
+ id?: string | undefined;
138
+ header: string;
139
+ minWidth?: number | undefined;
140
+ maxWidth?: number | undefined;
141
+ enabled?: boolean | undefined;
142
+ isIdColumn?: boolean | undefined;
143
+ defaultSortDirection?: "desc" | "asc" | undefined;
144
+ defaultSort?: boolean | undefined;
145
+ icon?: ((item: T) => ReactNode) | undefined;
146
+ table?: ColumnTableOption | undefined;
147
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
148
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
149
+ modal?: ColumnModalOption | undefined;
150
+ } | {
151
+ sort: undefined;
152
+ type: "labels";
153
+ value: CellFn<T, string[] | undefined>;
154
+ id?: string | undefined;
155
+ header: string;
156
+ minWidth?: number | undefined;
157
+ maxWidth?: number | undefined;
158
+ enabled?: boolean | undefined;
159
+ isIdColumn?: boolean | undefined;
160
+ defaultSortDirection?: "desc" | "asc" | undefined;
161
+ defaultSort?: boolean | undefined;
162
+ icon?: ((item: T) => ReactNode) | undefined;
163
+ table?: ColumnTableOption | undefined;
164
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
165
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
166
+ modal?: ColumnModalOption | undefined;
167
+ } | {
168
+ sort: undefined;
169
+ type: "count";
170
+ value: CellFn<T, number | undefined>;
171
+ id?: string | undefined;
172
+ header: string;
173
+ minWidth?: number | undefined;
174
+ maxWidth?: number | undefined;
175
+ enabled?: boolean | undefined;
176
+ isIdColumn?: boolean | undefined;
177
+ defaultSortDirection?: "desc" | "asc" | undefined;
178
+ defaultSort?: boolean | undefined;
179
+ icon?: ((item: T) => ReactNode) | undefined;
180
+ table?: ColumnTableOption | undefined;
181
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
182
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
183
+ modal?: ColumnModalOption | undefined;
184
+ })[];
185
+ export declare function useColumnsWithoutExpandedRow<T extends object>(columns: ITableColumn<T>[]): ({
186
+ table: ColumnTableOption.Key | ColumnTableOption.Description | ColumnTableOption.Hidden | ColumnTableOption.Id | undefined;
187
+ type?: undefined;
188
+ value?: CellFn<T, string | number | boolean | string[] | null | undefined> | undefined;
189
+ cell: CellFn<T, ReactNode>;
190
+ id?: string | undefined;
191
+ header: string;
192
+ minWidth?: number | undefined;
193
+ maxWidth?: number | undefined;
194
+ enabled?: boolean | undefined;
195
+ isIdColumn?: boolean | undefined;
196
+ sort?: string | undefined;
197
+ defaultSortDirection?: "desc" | "asc" | undefined;
198
+ defaultSort?: boolean | undefined;
199
+ icon?: ((item: T) => ReactNode) | undefined;
200
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
201
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
202
+ modal?: ColumnModalOption | undefined;
203
+ } | {
204
+ table: ColumnTableOption.Key | ColumnTableOption.Description | ColumnTableOption.Hidden | ColumnTableOption.Id | undefined;
205
+ type: "text";
206
+ value: CellFn<T, string | null | undefined>;
207
+ id?: string | undefined;
208
+ header: string;
209
+ minWidth?: number | undefined;
210
+ maxWidth?: number | undefined;
211
+ enabled?: boolean | undefined;
212
+ isIdColumn?: boolean | undefined;
213
+ sort?: string | undefined;
214
+ defaultSortDirection?: "desc" | "asc" | undefined;
215
+ defaultSort?: boolean | undefined;
216
+ icon?: ((item: T) => ReactNode) | undefined;
217
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
218
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
219
+ modal?: ColumnModalOption | undefined;
220
+ } | {
221
+ table: ColumnTableOption.Key | ColumnTableOption.Description | ColumnTableOption.Hidden | ColumnTableOption.Id | undefined;
222
+ type: "description";
223
+ value: CellFn<T, string | null | undefined>;
224
+ id?: string | undefined;
225
+ header: string;
226
+ minWidth?: number | undefined;
227
+ maxWidth?: number | undefined;
228
+ enabled?: boolean | undefined;
229
+ isIdColumn?: boolean | undefined;
230
+ sort?: string | undefined;
231
+ defaultSortDirection?: "desc" | "asc" | undefined;
232
+ defaultSort?: boolean | undefined;
233
+ icon?: ((item: T) => ReactNode) | undefined;
234
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
235
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
236
+ modal?: ColumnModalOption | undefined;
237
+ } | {
238
+ table: ColumnTableOption.Key | ColumnTableOption.Description | ColumnTableOption.Hidden | ColumnTableOption.Id | undefined;
239
+ type: "datetime";
240
+ value: CellFn<T, string | number | undefined>;
241
+ id?: string | undefined;
242
+ header: string;
243
+ minWidth?: number | undefined;
244
+ maxWidth?: number | undefined;
245
+ enabled?: boolean | undefined;
246
+ isIdColumn?: boolean | undefined;
247
+ sort?: string | undefined;
248
+ defaultSortDirection?: "desc" | "asc" | undefined;
249
+ defaultSort?: boolean | undefined;
250
+ icon?: ((item: T) => ReactNode) | undefined;
251
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
252
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
253
+ modal?: ColumnModalOption | undefined;
254
+ } | {
255
+ table: ColumnTableOption.Key | ColumnTableOption.Description | ColumnTableOption.Hidden | ColumnTableOption.Id | undefined;
256
+ type: "labels";
257
+ value: CellFn<T, string[] | undefined>;
258
+ id?: string | undefined;
259
+ header: string;
260
+ minWidth?: number | undefined;
261
+ maxWidth?: number | undefined;
262
+ enabled?: boolean | undefined;
263
+ isIdColumn?: boolean | undefined;
264
+ sort?: string | undefined;
265
+ defaultSortDirection?: "desc" | "asc" | undefined;
266
+ defaultSort?: boolean | undefined;
267
+ icon?: ((item: T) => ReactNode) | undefined;
268
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
269
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
270
+ modal?: ColumnModalOption | undefined;
271
+ } | {
272
+ table: ColumnTableOption.Key | ColumnTableOption.Description | ColumnTableOption.Hidden | ColumnTableOption.Id | undefined;
273
+ type: "count";
274
+ value: CellFn<T, number | undefined>;
275
+ id?: string | undefined;
276
+ header: string;
277
+ minWidth?: number | undefined;
278
+ maxWidth?: number | undefined;
279
+ enabled?: boolean | undefined;
280
+ isIdColumn?: boolean | undefined;
281
+ sort?: string | undefined;
282
+ defaultSortDirection?: "desc" | "asc" | undefined;
283
+ defaultSort?: boolean | undefined;
284
+ icon?: ((item: T) => ReactNode) | undefined;
285
+ list?: "name" | "hidden" | "secondary" | "primary" | "description" | "subtitle" | undefined;
286
+ card?: "name" | "hidden" | "description" | "subtitle" | undefined;
287
+ modal?: ColumnModalOption | undefined;
288
+ })[];
81
289
  export {};
@@ -12,17 +12,12 @@ export declare enum PFColorE {
12
12
  Disabled = "disabled"
13
13
  }
14
14
  export type PFColor = 'default' | 'green' | 'success' | 'blue' | 'info' | 'red' | 'danger' | 'yellow' | 'warning' | 'grey' | 'disabled';
15
- export declare function getPatternflyColor(color: PFColor): "var(--pf-global--danger-color--100)" | "var(--pf-global--success-color--200)" | "var(--pf-global--success-color--100)" | "var(--pf-global--danger-color--200)" | "var(--pf-global--warning-color--200)" | "var(--pf-global--warning-color--100)" | "var(--pf-global--info-color-200)" | "var(--pf-global--info-color--100)" | "var(--pf-global--disabled-color--200)" | "var(--pf-global--disabled-color--100)" | undefined;
15
+ export declare function getPatternflyColor(color: PFColor): "var(--pf-global--danger-color--100)" | "var(--pf-global--success-color--100)" | "var(--pf-global--warning-color--100)" | "var(--pf-global--info-color--100)" | "var(--pf-global--disabled-color--100)" | undefined;
16
16
  export declare const pfSuccess = "var(--pf-global--success-color--100)";
17
- export declare const pfSuccess200 = "var(--pf-global--success-color--200)";
18
17
  export declare const pfDanger = "var(--pf-global--danger-color--100)";
19
- export declare const pfDanger200 = "var(--pf-global--danger-color--200)";
20
18
  export declare const pfWarning = "var(--pf-global--warning-color--100)";
21
- export declare const pfWarning200 = "var(--pf-global--warning-color--200)";
22
19
  export declare const pfInfo = "var(--pf-global--info-color--100)";
23
- export declare const pfInfo200 = "var(--pf-global--info-color-200)";
24
20
  export declare const pfDisabled = "var(--pf-global--disabled-color--100)";
25
- export declare const pfDisabled200 = "var(--pf-global--disabled-color--200)";
26
21
  export declare const pfLink = "var(--pf-global--link--Color)";
27
22
  export declare enum LabelColorE {
28
23
  blue = "blue",