wjec-one 3.10.24 → 4.0.0-alpha.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/auth/index.d.ts +65 -2
- package/auth/index.js +1 -1
- package/index.d.ts +1567 -56
- package/index.js +1 -9
- package/localization/index.d.ts +31 -18
- package/localization/index.js +1 -1
- package/package.json +65 -58
- package/services/index.d.ts +57 -23
- package/services/index.js +1 -1
- package/store/index.d.ts +19 -17
- package/store/index.js +1 -1
- package/store/utils/index.d.ts +28 -4
- package/store/utils/index.js +1 -1
- package/theme/index.d.ts +80 -14
- package/theme/index.js +1 -1
- package/umd/auth/index.js +1 -0
- package/umd/index.js +1 -0
- package/umd/localization/index.js +1 -0
- package/umd/services/index.js +1 -0
- package/umd/store/index.js +1 -0
- package/umd/store/utils/index.js +1 -0
- package/umd/theme/index.js +1 -0
- package/umd/utils/index.js +1 -0
- package/utils/index.d.ts +166 -9
- package/utils/index.js +1 -1
- package/auth/useAuthorization.d.ts +0 -57
- package/auth/utils.d.ts +0 -6
- package/legacy/auth/index.js +0 -1
- package/legacy/index.js +0 -9
- package/legacy/localization/index.js +0 -1
- package/legacy/services/index.js +0 -1
- package/legacy/store/index.js +0 -1
- package/legacy/store/utils/index.js +0 -1
- package/legacy/theme/index.js +0 -1
- package/legacy/utils/index.js +0 -1
- package/localization/localization-actions.d.ts +0 -3
- package/localization/localization-reducer.d.ts +0 -4
- package/services/WheelhouseService.d.ts +0 -31
- package/services/useServiceCall.d.ts +0 -19
- package/src/ColorPalette.d.ts +0 -30
- package/src/ColorPaletteEduqas.d.ts +0 -30
- package/src/StylePalette.d.ts +0 -8
- package/src/components/Accordion.d.ts +0 -11
- package/src/components/AccordionContent.d.ts +0 -10
- package/src/components/Breadcrumb.d.ts +0 -13
- package/src/components/Card.d.ts +0 -7
- package/src/components/Carousel.d.ts +0 -13
- package/src/components/CheckBox.d.ts +0 -15
- package/src/components/CircularProgress.d.ts +0 -8
- package/src/components/ContextHelp.d.ts +0 -13
- package/src/components/ContextMenu.d.ts +0 -30
- package/src/components/DateTimePicker.d.ts +0 -32
- package/src/components/DragAndDropList.d.ts +0 -25
- package/src/components/Email.d.ts +0 -6
- package/src/components/Emphasis.d.ts +0 -7
- package/src/components/FileInput.d.ts +0 -22
- package/src/components/FilterList.d.ts +0 -41
- package/src/components/Form.d.ts +0 -17
- package/src/components/Input.d.ts +0 -29
- package/src/components/LinearProgress.d.ts +0 -8
- package/src/components/Link.d.ts +0 -7
- package/src/components/LocalizationMenu.d.ts +0 -20
- package/src/components/Modal.d.ts +0 -40
- package/src/components/PageTitle.d.ts +0 -7
- package/src/components/Pagination.d.ts +0 -9
- package/src/components/Paragraph.d.ts +0 -7
- package/src/components/Password.d.ts +0 -18
- package/src/components/Popup.d.ts +0 -35
- package/src/components/PopupWindow.d.ts +0 -15
- package/src/components/PrintLayout.d.ts +0 -13
- package/src/components/PrintWindow.d.ts +0 -12
- package/src/components/RadioGroup.d.ts +0 -19
- package/src/components/ScrollableContainer.d.ts +0 -11
- package/src/components/SectionHeading.d.ts +0 -7
- package/src/components/SectionTitle.d.ts +0 -7
- package/src/components/Select.d.ts +0 -29
- package/src/components/SigninForm.d.ts +0 -68
- package/src/components/SigninMenu.d.ts +0 -11
- package/src/components/SubParagraph.d.ts +0 -7
- package/src/components/SubTitle.d.ts +0 -2
- package/src/components/SvgWithMask.d.ts +0 -8
- package/src/components/Table.d.ts +0 -57
- package/src/components/Tabs.d.ts +0 -22
- package/src/components/TextArea.d.ts +0 -21
- package/src/components/Toggle.d.ts +0 -12
- package/src/components/buttons/Button.d.ts +0 -27
- package/src/components/buttons/DestructiveButton.d.ts +0 -21
- package/src/components/buttons/IconButton.d.ts +0 -8
- package/src/components/buttons/LinkButton.d.ts +0 -6
- package/src/components/buttons/PrimaryButton.d.ts +0 -21
- package/src/components/layout/Footer.d.ts +0 -11
- package/src/components/layout/Header.d.ts +0 -24
- package/src/components/layout/Page.d.ts +0 -12
- package/src/components/notifications/ErrorNotification.d.ts +0 -27
- package/src/components/notifications/InfoNotification.d.ts +0 -27
- package/src/components/notifications/Notification.d.ts +0 -32
- package/src/components/notifications/SuccessNotification.d.ts +0 -27
- package/src/styles/common-colors.d.ts +0 -27
- package/src/styles/common-styles.d.ts +0 -3
- package/src/types/index.d.ts +0 -4
- package/test/TestUtils.d.ts +0 -10
- package/test/assetsTransformer.d.ts +0 -0
- package/test/auth/useAuthorization.test.d.ts +0 -1
- package/test/auth/utils.test.d.ts +0 -1
- package/test/localization/index.test.d.ts +0 -1
- package/test/localization/localization-actions.test.d.ts +0 -1
- package/test/localization/localization-reducer.test.d.ts +0 -1
- package/test/services/WheelhouseService.test.d.ts +0 -1
- package/test/services/index.test.d.ts +0 -1
- package/test/services/useServiceCall.test.d.ts +0 -1
- package/test/setupTests.d.ts +0 -1
- package/test/src/components/Accordion.test.d.ts +0 -1
- package/test/src/components/AccordionContent.test.d.ts +0 -1
- package/test/src/components/Breadcrumb.test.d.ts +0 -1
- package/test/src/components/Card.test.d.ts +0 -1
- package/test/src/components/Carousel.test.d.ts +0 -1
- package/test/src/components/CheckBox.test.d.ts +0 -1
- package/test/src/components/CircularProgress.test.d.ts +0 -1
- package/test/src/components/ContextHelp.test.d.ts +0 -1
- package/test/src/components/ContextMenu.test.d.ts +0 -1
- package/test/src/components/DateTimePicker.test.d.ts +0 -1
- package/test/src/components/DragAndDropList.test.d.ts +0 -1
- package/test/src/components/Email.test.d.ts +0 -1
- package/test/src/components/Emphasis.test.d.ts +0 -1
- package/test/src/components/FileInput.test.d.ts +0 -1
- package/test/src/components/FilterList.test.d.ts +0 -1
- package/test/src/components/Form.test.d.ts +0 -1
- package/test/src/components/Input.test.d.ts +0 -1
- package/test/src/components/LinearProgress.test.d.ts +0 -1
- package/test/src/components/Link.test.d.ts +0 -1
- package/test/src/components/LocalizationMenu.test.d.ts +0 -1
- package/test/src/components/Modal.test.d.ts +0 -1
- package/test/src/components/PageTitle.test.d.ts +0 -1
- package/test/src/components/Pagination.test.d.ts +0 -1
- package/test/src/components/Paragraph.test.d.ts +0 -1
- package/test/src/components/Password.test.d.ts +0 -1
- package/test/src/components/Popup.test.d.ts +0 -1
- package/test/src/components/PopupWindow.test.d.ts +0 -1
- package/test/src/components/PrintLayout.test.d.ts +0 -1
- package/test/src/components/PrintWindow.test.d.ts +0 -1
- package/test/src/components/RadioGroup.test.d.ts +0 -1
- package/test/src/components/ScrollableContainer.test.d.ts +0 -1
- package/test/src/components/SectionHeading.test.d.ts +0 -1
- package/test/src/components/SectionTitle.test.d.ts +0 -1
- package/test/src/components/Select.test.d.ts +0 -1
- package/test/src/components/SigninForm.test.d.ts +0 -1
- package/test/src/components/SigninMenu.test.d.ts +0 -1
- package/test/src/components/SubParagraph.test.d.ts +0 -1
- package/test/src/components/SubTitle.test.d.ts +0 -1
- package/test/src/components/SvgWithMask.test.d.ts +0 -1
- package/test/src/components/Table.test.d.ts +0 -1
- package/test/src/components/Tabs.test.d.ts +0 -1
- package/test/src/components/TextArea.test.d.ts +0 -1
- package/test/src/components/Toggle.test.d.ts +0 -1
- package/test/src/components/buttons/Button.test.d.ts +0 -1
- package/test/src/components/buttons/DestructiveButton.test.d.ts +0 -1
- package/test/src/components/buttons/IconButton.test.d.ts +0 -1
- package/test/src/components/buttons/LinkButton.test.d.ts +0 -1
- package/test/src/components/buttons/PrimaryButton.test.d.ts +0 -1
- package/test/src/components/layout/Footer.test.d.ts +0 -1
- package/test/src/components/layout/Header.test.d.ts +0 -1
- package/test/src/components/layout/Page.test.d.ts +0 -1
- package/test/src/components/notifications/ErrorNotification.test.d.ts +0 -1
- package/test/src/components/notifications/InfoNotification.test.d.ts +0 -1
- package/test/src/components/notifications/Notification.test.d.ts +0 -1
- package/test/src/components/notifications/SuccessNotification.test.d.ts +0 -1
- package/test/store/index.test.d.ts +0 -1
- package/test/store/utils/index.test.d.ts +0 -1
- package/test/svgTransformer.d.ts +0 -1
- package/test/theme/ThemeActions.test.d.ts +0 -1
- package/test/theme/ThemeReducer.test.d.ts +0 -1
- package/test/utils/BrowserUtils.test.d.ts +0 -1
- package/test/utils/ComponentUtils.test.d.ts +0 -1
- package/test/utils/DateTimeUtils.test.d.ts +0 -1
- package/test/utils/DeveloperUtils.test.d.ts +0 -1
- package/test/utils/ServiceUtils.test.d.ts +0 -1
- package/test/utils/StoreUtils.test.d.ts +0 -1
- package/test/utils/StyleUtils.test.d.ts +0 -1
- package/test/utils/TypeUtils.test.d.ts +0 -1
- package/test/utils/WebWorkerUtils.test.d.ts +0 -1
- package/theme/ThemeActions.d.ts +0 -1
- package/theme/ThemeReducer.d.ts +0 -5
- package/theme/ThemeState.d.ts +0 -7
- package/utils/BrowserUtils.d.ts +0 -8
- package/utils/ComponentUtils.d.ts +0 -39
- package/utils/DateTimeUtils.d.ts +0 -40
- package/utils/DeveloperUtils.d.ts +0 -5
- package/utils/ServiceUtils.d.ts +0 -2
- package/utils/StoreUtils.d.ts +0 -4
- package/utils/StyleUtils.d.ts +0 -1
- package/utils/TypeUtils.d.ts +0 -8
- package/utils/WebWorkerUtils.d.ts +0 -21
package/index.d.ts
CHANGED
|
@@ -1,56 +1,1567 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Interpolation, ArrayInterpolation } from '@emotion/core';
|
|
3
|
+
import * as _emotion_utils from '@emotion/utils';
|
|
4
|
+
import * as React$1 from 'react';
|
|
5
|
+
import React__default, { Dispatch, SVGProps, ButtonHTMLAttributes, CSSProperties, FC, InputHTMLAttributes, MouseEvent, Context } from 'react';
|
|
6
|
+
import { AriaButtonProps } from 'react-aria';
|
|
7
|
+
import { GapProperty, BottomProperty, LeftProperty, RightProperty, TopProperty, ColorProperty, WidthProperty, HeightProperty, PositionProperty, MarginProperty, PaddingProperty } from 'csstype';
|
|
8
|
+
import { Record } from 'immutable';
|
|
9
|
+
|
|
10
|
+
declare type ColorPalette = {
|
|
11
|
+
border: string;
|
|
12
|
+
entryLevel: string;
|
|
13
|
+
errorBackground: string;
|
|
14
|
+
error: string;
|
|
15
|
+
errorDark: string;
|
|
16
|
+
errorDarker: string;
|
|
17
|
+
font: string;
|
|
18
|
+
fontLight: string;
|
|
19
|
+
gceALevel: string;
|
|
20
|
+
gceASLevel: string;
|
|
21
|
+
gcse: string;
|
|
22
|
+
highlight: string;
|
|
23
|
+
neutral: string;
|
|
24
|
+
neutralDark: string;
|
|
25
|
+
neutralLight: string;
|
|
26
|
+
offBlack: string;
|
|
27
|
+
offWhite: string;
|
|
28
|
+
otherQualifications: string;
|
|
29
|
+
primary: string;
|
|
30
|
+
primaryDark: string;
|
|
31
|
+
primaryDarkActive: string;
|
|
32
|
+
primaryLight: string;
|
|
33
|
+
primaryLightActive: string;
|
|
34
|
+
secondary: string;
|
|
35
|
+
secondaryDark: string;
|
|
36
|
+
secondaryDarkActive: string;
|
|
37
|
+
secondaryLight: string;
|
|
38
|
+
secondaryLightActive: string;
|
|
39
|
+
success: string;
|
|
40
|
+
successBackground: string;
|
|
41
|
+
successDark: string;
|
|
42
|
+
successDarker: string;
|
|
43
|
+
tertiary: string;
|
|
44
|
+
vQAward: string;
|
|
45
|
+
warningBackground: string;
|
|
46
|
+
warning: string;
|
|
47
|
+
warningDark: string;
|
|
48
|
+
welshBaccAdvanced: string;
|
|
49
|
+
welshBaccFoundation: string;
|
|
50
|
+
welshBaccNational: string;
|
|
51
|
+
welshBaccKS4: string;
|
|
52
|
+
};
|
|
53
|
+
declare type Styles = Interpolation | ArrayInterpolation<any>;
|
|
54
|
+
|
|
55
|
+
declare const _default$2: ColorPalette;
|
|
56
|
+
|
|
57
|
+
declare const _default$1: ColorPalette;
|
|
58
|
+
|
|
59
|
+
declare const _default: Readonly<{
|
|
60
|
+
borderRadius: "4px";
|
|
61
|
+
dropShadow: `0px 2px 10px ${string}`;
|
|
62
|
+
scrollbar: _emotion_utils.SerializedStyles;
|
|
63
|
+
visiblyHidden: _emotion_utils.SerializedStyles;
|
|
64
|
+
}>;
|
|
65
|
+
|
|
66
|
+
declare type WjecOneComponentProps<P = {}> = React$1.PropsWithChildren<P & {
|
|
67
|
+
/** The identifier that will be passed through to the underlying HTML element */
|
|
68
|
+
id?: string;
|
|
69
|
+
}>;
|
|
70
|
+
declare type WjecOneComponent<P = {}> = React$1.FunctionComponent<WjecOneComponentProps<P>>;
|
|
71
|
+
|
|
72
|
+
/** @jsx jsx */
|
|
73
|
+
|
|
74
|
+
declare type Props$I = {
|
|
75
|
+
expanded?: boolean;
|
|
76
|
+
onClick?: (isExpanded: boolean) => void;
|
|
77
|
+
spacing?: 'normal' | 'small';
|
|
78
|
+
title: string | React__default.ReactElement;
|
|
79
|
+
};
|
|
80
|
+
declare const AccordionContent: WjecOneComponent<Props$I>;
|
|
81
|
+
|
|
82
|
+
declare type Props$H = {
|
|
83
|
+
exclusive?: boolean;
|
|
84
|
+
spacing?: 'normal' | 'small';
|
|
85
|
+
};
|
|
86
|
+
interface AccordionComponent extends WjecOneComponent<Props$H> {
|
|
87
|
+
Content: typeof AccordionContent;
|
|
88
|
+
}
|
|
89
|
+
declare const Accordion: AccordionComponent;
|
|
90
|
+
|
|
91
|
+
declare type Action = AsyncAction | SimpleAction;
|
|
92
|
+
declare type AsyncAction = (dispatch: Dispatch<Action>, state: DestructurableRecord<any>) => void | Promise<void>;
|
|
93
|
+
declare type DestructurableRecord<T extends {}> = Record<T> & {
|
|
94
|
+
[K in keyof T]: T[K];
|
|
95
|
+
};
|
|
96
|
+
declare type SimpleAction = {
|
|
97
|
+
payload?: any;
|
|
98
|
+
type: string;
|
|
99
|
+
};
|
|
100
|
+
|
|
101
|
+
declare type GenericStrings = {
|
|
102
|
+
[key: string]: string;
|
|
103
|
+
};
|
|
104
|
+
declare type LocalizationState<L extends number | string | symbol = any, S extends GenericStrings = any> = {
|
|
105
|
+
availableLocales: L[];
|
|
106
|
+
locale: L;
|
|
107
|
+
strings: S;
|
|
108
|
+
};
|
|
109
|
+
declare type FormattedPart = React__default.ReactElement<{
|
|
110
|
+
children?: Array<string | number | FormattedPart>;
|
|
111
|
+
}, any>;
|
|
112
|
+
declare type FormattedString = string | number | FormattedPart;
|
|
113
|
+
|
|
114
|
+
declare type SVGComponent = React__default.ReactElement<SVGProps<SVGSVGElement>>;
|
|
115
|
+
declare type ContentExtractor<T> = keyof T | ((obj: T, index?: number) => string | JSX.Element | T[keyof T]);
|
|
116
|
+
declare type KeyExtractor<T> = keyof T | ((obj: T, index?: number) => number | string);
|
|
117
|
+
|
|
118
|
+
declare type AriaProperties = {
|
|
119
|
+
ariaCurrent?: 'page' | 'step';
|
|
120
|
+
ariaDescription?: string;
|
|
121
|
+
ariaExpanded?: boolean;
|
|
122
|
+
ariaHidden?: boolean;
|
|
123
|
+
ariaLabel?: string;
|
|
124
|
+
ariaMultiselectable?: boolean;
|
|
125
|
+
ariaPosInSet?: number;
|
|
126
|
+
ariaRole?: string;
|
|
127
|
+
ariaSetSize?: number;
|
|
128
|
+
ariaSort?: 'ascending' | 'descending';
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
declare type Props$G<T> = {
|
|
132
|
+
breadcrumbs: T[];
|
|
133
|
+
keyExtractor?: KeyExtractor<T>;
|
|
134
|
+
labelExtractor?: ContentExtractor<T>;
|
|
135
|
+
onClick: (crumb: string) => void;
|
|
136
|
+
showCurrent?: boolean;
|
|
137
|
+
} & Pick<AriaProperties, 'ariaCurrent'>;
|
|
138
|
+
declare const Breadcrumb: <T extends {}>({ breadcrumbs, id, keyExtractor, labelExtractor, onClick, showCurrent }: WjecOneComponentProps<Props$G<T>>) => JSX.Element;
|
|
139
|
+
|
|
140
|
+
declare type ButtonAccessibilityProps = {
|
|
141
|
+
/** An id that identifies the element (or elements) whose contents or presence are controlled by the Button */
|
|
142
|
+
controls?: AriaButtonProps['aria-controls'];
|
|
143
|
+
/** Indicates whether the Button, or another component it controls, is currently expanded or collapsed */
|
|
144
|
+
expanded?: AriaButtonProps['aria-expanded'];
|
|
145
|
+
/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the Button */
|
|
146
|
+
hasPopup?: AriaButtonProps['aria-haspopup'];
|
|
147
|
+
};
|
|
148
|
+
declare type ButtonBehaviorProps = {
|
|
149
|
+
/**
|
|
150
|
+
* Determines whether the browser's onClick event is propagated beyond the component
|
|
151
|
+
* @default false
|
|
152
|
+
*/
|
|
153
|
+
allowEventPropagation?: boolean;
|
|
154
|
+
/**
|
|
155
|
+
* Determines the behavior of the Button when used in an HTML form
|
|
156
|
+
* @default "button"
|
|
157
|
+
*/
|
|
158
|
+
buttonType?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
|
|
159
|
+
/**
|
|
160
|
+
* Determines whether the Button is subject to user interaction
|
|
161
|
+
* @default false
|
|
162
|
+
*/
|
|
163
|
+
disabled?: boolean;
|
|
164
|
+
/**
|
|
165
|
+
* An SVG component that will be rendered as the Button's icon. An icon must be provided if no label is provided
|
|
166
|
+
*/
|
|
167
|
+
icon?: (props: SVGProps<SVGSVGElement>) => SVGComponent;
|
|
168
|
+
/**
|
|
169
|
+
* Determines which side of the Button the SVG icon component is positioned in relation to the Button's label text
|
|
170
|
+
* @default "left"
|
|
171
|
+
*/
|
|
172
|
+
iconPosition?: 'left' | 'right';
|
|
173
|
+
/** Determines whether the Button should render a loading animation to indicate activity */
|
|
174
|
+
loading?: boolean;
|
|
175
|
+
/** Determines the progress % to be represented by the loading animation. If no value is provided, the loading animation will loop in an infinite, indeterminate state */
|
|
176
|
+
loadingProgress?: number;
|
|
177
|
+
/** A handler that will be called when the Button is pressed */
|
|
178
|
+
onPress?: () => void;
|
|
179
|
+
};
|
|
180
|
+
declare type ButtonElementProps = {
|
|
181
|
+
/** Text that will be displayed as the Button's label (Note: a more complex label can be achieved by instead providing the label as the Button's children). A label must be provided if no icon is provided */
|
|
182
|
+
label?: FormattedString;
|
|
183
|
+
};
|
|
184
|
+
declare type ButtonStyleProps = {
|
|
185
|
+
/** Determines the color of the Button's background when active */
|
|
186
|
+
activeColor?: CSSProperties['color'];
|
|
187
|
+
/**
|
|
188
|
+
* Determines the color of the Button's border
|
|
189
|
+
* @default "transparent"
|
|
190
|
+
*/
|
|
191
|
+
borderColor?: CSSProperties['color'];
|
|
192
|
+
/**
|
|
193
|
+
* Determines the color of the Button's background
|
|
194
|
+
* @default ColorPalette.neutral
|
|
195
|
+
* */
|
|
196
|
+
color?: CSSProperties['color'];
|
|
197
|
+
/**
|
|
198
|
+
* Determines the color of the Button's background when focused. If undefined, this will default to the value of color
|
|
199
|
+
*/
|
|
200
|
+
focusColor?: CSSProperties['color'];
|
|
201
|
+
/**
|
|
202
|
+
* Determines the color of the Button's background when hovered
|
|
203
|
+
* @default ColorPalette.border
|
|
204
|
+
*/
|
|
205
|
+
hoverColor?: CSSProperties['color'];
|
|
206
|
+
/**
|
|
207
|
+
* Determines the color of the provided SVG icon component. If undefined, this will default to the value of labelColor
|
|
208
|
+
*/
|
|
209
|
+
iconColor?: CSSProperties['color'];
|
|
210
|
+
/**
|
|
211
|
+
* Determines the color of the provided SVG icon component when the Button is active. The specified color should have sufficient contrast with the active background color for accessibility purposes. If undefined, this will default to the value of labelColorActive
|
|
212
|
+
*/
|
|
213
|
+
iconColorActive?: CSSProperties['color'];
|
|
214
|
+
/**
|
|
215
|
+
* Determines the color of the Button's label text (and icon, unless otherwise specified)
|
|
216
|
+
* @default ColorPalette.neutralDark
|
|
217
|
+
*/
|
|
218
|
+
labelColor?: CSSProperties['color'];
|
|
219
|
+
/**
|
|
220
|
+
* Determines the colour of the Button's label text when active. The specified color should have sufficient contrast with the active background color for accessibility purposes
|
|
221
|
+
* @default #FFFFFF
|
|
222
|
+
*/
|
|
223
|
+
labelColorActive?: CSSProperties['color'];
|
|
224
|
+
/**
|
|
225
|
+
* Determines the color of the Button's outline when focused. The specified color should have sufficient contrast with the background color for accessibility purposes
|
|
226
|
+
* @default ColorPalette.primary
|
|
227
|
+
*/
|
|
228
|
+
outlineColor?: CSSProperties['color'];
|
|
229
|
+
/**
|
|
230
|
+
* Determines the rendered size of the Button but adjusting the amount of padding
|
|
231
|
+
* @default "normal"
|
|
232
|
+
*/
|
|
233
|
+
size?: 'small' | 'normal' | 'large';
|
|
234
|
+
};
|
|
235
|
+
declare type DeprecatedButtonProps = {
|
|
236
|
+
/**
|
|
237
|
+
* Determines whether the Button is rendered in a "filled" style (solid background color) or a "transparent" style (colored border)
|
|
238
|
+
* @default "filled"
|
|
239
|
+
* @deprecated buttonStyle has been deprecated for design reasons; Button components will now always behave as though `buttonStyle='filled'`
|
|
240
|
+
* */
|
|
241
|
+
buttonStyle?: 'filled' | 'transparent';
|
|
242
|
+
/**
|
|
243
|
+
* Determines the rendered size of the provided SVG icon component
|
|
244
|
+
* @default "normal"
|
|
245
|
+
* @deprecated iconSize has been deprecated for design reasons. Button components will now always behave as though `iconSize='normal'`
|
|
246
|
+
*/
|
|
247
|
+
iconSize?: 'small' | 'normal' | 'large';
|
|
248
|
+
/**
|
|
249
|
+
* Determines the color of the loading indicator when displayed
|
|
250
|
+
* @deprecated loadingColor has been deprecated for design reasons. The labelColor will now be used for the loading animation
|
|
251
|
+
*/
|
|
252
|
+
loadingColor?: CSSProperties['color'];
|
|
253
|
+
/**
|
|
254
|
+
* A handler that is called when the underlying HTML element's onClick event is triggered
|
|
255
|
+
* @deprecated onClick has been deprecated in favor of the new onPress prop, which behaves similarly but with better accessibility support
|
|
256
|
+
*/
|
|
257
|
+
onClick?: () => void;
|
|
258
|
+
/**
|
|
259
|
+
* Determines whether to show an outline around the Button when it receives focus
|
|
260
|
+
* @default true
|
|
261
|
+
* @deprecated This prop is no longer supported for accessibility reasons. The Button component will now behave as though showOutline={true} in all cases
|
|
262
|
+
*/
|
|
263
|
+
showOutline?: boolean;
|
|
264
|
+
};
|
|
265
|
+
declare type ButtonProps$6 = {
|
|
266
|
+
accessibility?: ButtonAccessibilityProps;
|
|
267
|
+
} & ButtonBehaviorProps & ButtonElementProps & ButtonStyleProps & Pick<AriaProperties, 'ariaLabel'> & DeprecatedButtonProps;
|
|
268
|
+
|
|
269
|
+
declare const Button: WjecOneComponent<ButtonProps$6>;
|
|
270
|
+
|
|
271
|
+
declare type ButtonProps$5 = React__default.ComponentProps<typeof Button>;
|
|
272
|
+
declare type Props$F = Omit<ButtonProps$5, 'activeColor' | 'borderColor' | 'color' | 'focusColor' | 'hoverColor' | 'iconColor' | 'iconColorActive' | 'labelColor' | 'labelColorActive' | 'outlineColor'>;
|
|
273
|
+
declare const DestructiveButton: FC<Props$F>;
|
|
274
|
+
|
|
275
|
+
declare type ButtonProps$4 = React__default.ComponentProps<typeof Button>;
|
|
276
|
+
interface Props$E extends Omit<ButtonProps$4, 'activeColor' | 'children' | 'color' | 'hoverColor' | 'iconPosition' | 'label'> {
|
|
277
|
+
icon: ButtonProps$4['icon'];
|
|
278
|
+
}
|
|
279
|
+
declare const IconButton: FC<Props$E>;
|
|
280
|
+
|
|
281
|
+
declare type ButtonProps$3 = React__default.ComponentProps<typeof Button>;
|
|
282
|
+
declare type Props$D = Omit<ButtonProps$3, 'activeColor' | 'buttonType' | 'color' | 'hoverColor' | 'iconPosition'>;
|
|
283
|
+
declare const LinkButton: FC<Props$D>;
|
|
284
|
+
|
|
285
|
+
declare type ButtonProps$2 = React__default.ComponentProps<typeof Button>;
|
|
286
|
+
declare type Props$C = Omit<ButtonProps$2, 'activeColor' | 'borderColor' | 'color' | 'focusColor' | 'hoverColor' | 'iconColor' | 'iconColorActive' | 'labelColor' | 'labelColorActive' | 'outlineColor'>;
|
|
287
|
+
declare const PrimaryButton: FC<Props$C>;
|
|
288
|
+
|
|
289
|
+
declare type ButtonProps$1 = React__default.ComponentProps<typeof Button>;
|
|
290
|
+
declare type Props$B = Omit<ButtonProps$1, 'activeColor' | 'borderColor' | 'color' | 'focusColor' | 'hoverColor' | 'iconColor' | 'iconColorActive' | 'labelColor' | 'labelColorActive' | 'outlineColor'>;
|
|
291
|
+
declare const SecondaryButton: FC<Props$B>;
|
|
292
|
+
|
|
293
|
+
declare type Props$A = {
|
|
294
|
+
padding?: CSSProperties['padding'];
|
|
295
|
+
} & Pick<AriaProperties, 'ariaDescription'>;
|
|
296
|
+
declare const Card: WjecOneComponent<Props$A>;
|
|
297
|
+
|
|
298
|
+
declare type CarouselControls = {
|
|
299
|
+
goToNextSlide: () => void;
|
|
300
|
+
goToPreviousSlide: () => void;
|
|
301
|
+
goToSlide: (index: number) => void;
|
|
302
|
+
};
|
|
303
|
+
declare type CarouselProps = {
|
|
304
|
+
/**
|
|
305
|
+
* The number of extra slides to render at either end of the Carousel when using infinite rotation
|
|
306
|
+
* @default 2
|
|
307
|
+
*/
|
|
308
|
+
buffer?: number;
|
|
309
|
+
/** Determines whether the Carousel should loop around to the start/end when navigating beyond the first/last slides */
|
|
310
|
+
infinite?: boolean;
|
|
311
|
+
/** A handler that is called when the active slide index is changed */
|
|
312
|
+
onChange?: (slideIndex: number) => void;
|
|
313
|
+
/**
|
|
314
|
+
* Determines whether to display the built-in next/previous slide navigation button controls
|
|
315
|
+
* @default true
|
|
316
|
+
*/
|
|
317
|
+
showNavigationButtons?: boolean;
|
|
318
|
+
/**
|
|
319
|
+
* Determines whether to display the built-in controls to indicate/select the active slide
|
|
320
|
+
* @default true
|
|
321
|
+
*/
|
|
322
|
+
showNavigationDots?: boolean;
|
|
323
|
+
/** Determines whether a point-and-click device can be used to simulate the touch swipe gesture to navigate between slides */
|
|
324
|
+
simulateMouseSwipe?: boolean;
|
|
325
|
+
/**
|
|
326
|
+
* The index of the active slide
|
|
327
|
+
* @default 0
|
|
328
|
+
*/
|
|
329
|
+
slideIndex?: number;
|
|
330
|
+
/**
|
|
331
|
+
* The duration (in milliseconds) of the transition between slides
|
|
332
|
+
* @default 200
|
|
333
|
+
*/
|
|
334
|
+
slideTransitionDuration?: number;
|
|
335
|
+
};
|
|
336
|
+
|
|
337
|
+
declare const Carousel: React__default.ForwardRefExoticComponent<CarouselProps & {
|
|
338
|
+
id?: string;
|
|
339
|
+
} & {
|
|
340
|
+
children?: React__default.ReactNode;
|
|
341
|
+
} & React__default.RefAttributes<CarouselControls>>;
|
|
342
|
+
|
|
343
|
+
declare type Props$z = {
|
|
344
|
+
color?: CSSProperties['color'];
|
|
345
|
+
progress?: number;
|
|
346
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
347
|
+
declare const CircularProgress: WjecOneComponent<Props$z>;
|
|
348
|
+
|
|
349
|
+
declare type Attachment = 'floating' | 'sibling';
|
|
350
|
+
declare type Placement = 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start';
|
|
351
|
+
declare type Trigger = 'click' | 'hover' | 'press' | 'none';
|
|
352
|
+
declare type PopupProps$2 = {
|
|
353
|
+
/**
|
|
354
|
+
* Determines whether the Popup is a sibling of the toggle, or "floating" above the entire document
|
|
355
|
+
* @default "sibling"
|
|
356
|
+
*/
|
|
357
|
+
attachment?: Attachment;
|
|
358
|
+
/**
|
|
359
|
+
* Determines the background color of the Popup
|
|
360
|
+
* @default "#fff"
|
|
361
|
+
* */
|
|
362
|
+
backgroundColor?: CSSProperties['backgroundColor'];
|
|
363
|
+
/** The delay, in milliseconds, before the Popup closes in response to a "close" trigger from the toggle */
|
|
364
|
+
closeDelay?: number;
|
|
365
|
+
/** Determines whether the Popup should close if a click is detected outside of the toggle/Popup */
|
|
366
|
+
closeOnClickOutside?: boolean;
|
|
367
|
+
/** Determines whether the Popup should close if it is scrolled completely out of view */
|
|
368
|
+
closeOnOutOfView?: boolean;
|
|
369
|
+
/**
|
|
370
|
+
* The gap between the toggle and the Popup
|
|
371
|
+
* @deprecated gapSize has been deprecated in favor of the more standard margin prop
|
|
372
|
+
*/
|
|
373
|
+
gapSize?: CSSProperties['margin'];
|
|
374
|
+
/**
|
|
375
|
+
* Determines the CSS margin property for the Popup's container element; primarily used to control the distance from the toggle
|
|
376
|
+
* @default "10px"
|
|
377
|
+
* */
|
|
378
|
+
margin?: CSSProperties['margin'];
|
|
379
|
+
/**
|
|
380
|
+
* Determines the maximum permitted height of the Popup
|
|
381
|
+
* @default "300px"
|
|
382
|
+
* */
|
|
383
|
+
maxHeight?: CSSProperties['maxHeight'];
|
|
384
|
+
/**
|
|
385
|
+
* Determines the maximum permitted width of the Popup
|
|
386
|
+
* @default "300px"
|
|
387
|
+
* */
|
|
388
|
+
maxWidth?: CSSProperties['maxWidth'];
|
|
389
|
+
/** A handler that is called whenever the Popup is hidden from view */
|
|
390
|
+
onHide?: () => void;
|
|
391
|
+
/** A handler that is called whenever the Popup becomes visible */
|
|
392
|
+
onShow?: () => void;
|
|
393
|
+
/** Determines whether the Popup should be visible */
|
|
394
|
+
open?: boolean;
|
|
395
|
+
/** A delay, in milliseconds, before the Popup opens in response to an "open" trigger from the toggle */
|
|
396
|
+
openDelay?: number;
|
|
397
|
+
/**
|
|
398
|
+
* Determines the CSS padding property for the Popup's container element
|
|
399
|
+
* @default "10px"
|
|
400
|
+
* */
|
|
401
|
+
padding?: CSSProperties['padding'];
|
|
402
|
+
/** Determines the position of the Popup in relation to the toggle */
|
|
403
|
+
placement?: Placement;
|
|
404
|
+
/**
|
|
405
|
+
* Determines the CSS position for the componment's container (including toggle)
|
|
406
|
+
* @default { left: 'auto', top: 'auto' }
|
|
407
|
+
* @deprecated position has been deprecated because WJEC One components are intended to be layout agnostic
|
|
408
|
+
* */
|
|
409
|
+
position?: Position;
|
|
410
|
+
/**
|
|
411
|
+
* Determines the horizontal alignment of the Popup in relation to the toggle
|
|
412
|
+
* @default "right"
|
|
413
|
+
* @deprecated popupPositionX and popupPositionY have been deprecated in favor of the new placement prop, which encompasses both
|
|
414
|
+
*/
|
|
415
|
+
popupPositionX?: 'after' | 'before' | 'left' | 'right';
|
|
416
|
+
/**
|
|
417
|
+
* Determines the vertical alignment of the Popup in relation to the toggle
|
|
418
|
+
* @default "below"
|
|
419
|
+
* @deprecated popupPositionX and popupPositionY have been deprecated in favor of the new placement prop, which encompasses both
|
|
420
|
+
*/
|
|
421
|
+
popupPositionY?: 'above' | 'below' | 'bottom' | 'top';
|
|
422
|
+
/**
|
|
423
|
+
* Determines the CSS position property for the component's container element (including toggle)
|
|
424
|
+
* @default "relative"
|
|
425
|
+
* @deprecated positionType has been deprecated because WJEC One components are intended to be layout agnostic
|
|
426
|
+
*/
|
|
427
|
+
positionType?: 'absolute' | 'relative' | 'fixed';
|
|
428
|
+
/**
|
|
429
|
+
* Determines whether the Popup's content should be scrollable if it overflows on the vertical axis
|
|
430
|
+
* @default true
|
|
431
|
+
*/
|
|
432
|
+
scrollable?: boolean;
|
|
433
|
+
/**
|
|
434
|
+
* A callback used to obtain the Popup container element's ref from the parent context
|
|
435
|
+
* @deprecated setRef has been deprecated as it is no longer required internally
|
|
436
|
+
*/
|
|
437
|
+
setRef?: (ref: HTMLDivElement) => void;
|
|
438
|
+
/**
|
|
439
|
+
* Determines the color of the Popup's content
|
|
440
|
+
* @default ColorPalette.font
|
|
441
|
+
*/
|
|
442
|
+
textColor?: CSSProperties['color'];
|
|
443
|
+
/** The string or component to use as the Popup's toggle */
|
|
444
|
+
toggle: string | React__default.ReactElement;
|
|
445
|
+
/**
|
|
446
|
+
* Determines the CSS cursor property to be applied to the toggle
|
|
447
|
+
* @default "pointer"
|
|
448
|
+
*/
|
|
449
|
+
toggleCursor?: CSSProperties['cursor'];
|
|
450
|
+
/**
|
|
451
|
+
* Determines the type of user interaction that will cause the Popup to show/hide (note: the "click" option has been deprecated in favor of "press", which maintains the same behavior)
|
|
452
|
+
* @default "press"
|
|
453
|
+
*/
|
|
454
|
+
trigger?: Trigger;
|
|
455
|
+
/**
|
|
456
|
+
* Determines the CSS width property to be applied to the Popup
|
|
457
|
+
* @default "auto"
|
|
458
|
+
* @deprecated width has been deprecated because WJEC One components are intended to be layout agnostic
|
|
459
|
+
*/
|
|
460
|
+
width?: CSSProperties['width'];
|
|
461
|
+
} & Pick<AriaProperties, 'ariaDescription' | 'ariaLabel'>;
|
|
462
|
+
declare type Position = {
|
|
463
|
+
bottom?: CSSProperties['bottom'];
|
|
464
|
+
left?: CSSProperties['left'];
|
|
465
|
+
right?: CSSProperties['right'];
|
|
466
|
+
top?: CSSProperties['top'];
|
|
467
|
+
};
|
|
468
|
+
|
|
469
|
+
declare const Popup: WjecOneComponent<PopupProps$2>;
|
|
470
|
+
|
|
471
|
+
/** @jsx jsx */
|
|
472
|
+
|
|
473
|
+
declare type PopupProps$1 = React__default.ComponentProps<typeof Popup>;
|
|
474
|
+
declare type Props$y = {
|
|
475
|
+
open?: PopupProps$1['open'];
|
|
476
|
+
position?: PopupProps$1['position'];
|
|
477
|
+
positionType?: PopupProps$1['positionType'];
|
|
478
|
+
toggle?: PopupProps$1['toggle'];
|
|
479
|
+
} & Pick<AriaProperties, 'ariaDescription' | 'ariaLabel'>;
|
|
480
|
+
declare const ContextHelp: WjecOneComponent<Props$y>;
|
|
481
|
+
|
|
482
|
+
/** @jsx jsx */
|
|
483
|
+
|
|
484
|
+
declare type PopupProps = React__default.ComponentProps<typeof Popup>;
|
|
485
|
+
declare type ContextMenuOption = {
|
|
486
|
+
additionalInfo?: string | React__default.ReactElement;
|
|
487
|
+
icon?: (props: SVGProps<SVGSVGElement>) => SVGComponent;
|
|
488
|
+
label: FormattedString | React__default.ReactElement;
|
|
489
|
+
onClick?: () => void;
|
|
490
|
+
};
|
|
491
|
+
declare type ContextMenuSection = {
|
|
492
|
+
sectionTitle?: string;
|
|
493
|
+
sectionOptions: ContextMenuOption[];
|
|
494
|
+
};
|
|
495
|
+
declare type Props$x = {
|
|
496
|
+
description?: string;
|
|
497
|
+
onHide?: PopupProps['onHide'];
|
|
498
|
+
onShow?: PopupProps['onShow'];
|
|
499
|
+
open?: PopupProps['open'];
|
|
500
|
+
options: ContextMenuOption[] | ContextMenuSection[];
|
|
501
|
+
position?: PopupProps['position'];
|
|
502
|
+
positionType?: PopupProps['positionType'];
|
|
503
|
+
title?: string;
|
|
504
|
+
toggle?: PopupProps['toggle'];
|
|
505
|
+
};
|
|
506
|
+
declare const ContextMenu: WjecOneComponent<Props$x>;
|
|
507
|
+
|
|
508
|
+
/** @jsx jsx */
|
|
509
|
+
|
|
510
|
+
declare type Props$w<T> = {
|
|
511
|
+
gap?: GapProperty<any>;
|
|
512
|
+
items: T[];
|
|
513
|
+
onDrop?: (items: T[]) => void;
|
|
514
|
+
template?: FC<{
|
|
515
|
+
item: T;
|
|
516
|
+
Handle: FC<{
|
|
517
|
+
position?: {
|
|
518
|
+
bottom?: BottomProperty<any>;
|
|
519
|
+
left?: LeftProperty<any>;
|
|
520
|
+
right?: RightProperty<any>;
|
|
521
|
+
top?: TopProperty<any>;
|
|
522
|
+
};
|
|
523
|
+
positionType?: 'absolute' | 'relative';
|
|
524
|
+
}>;
|
|
525
|
+
index: number;
|
|
526
|
+
sortedItems: T[];
|
|
527
|
+
}>;
|
|
528
|
+
};
|
|
529
|
+
declare const DragAndDropList: <T extends unknown>({ gap, id, items, onDrop, template }: WjecOneComponentProps<Props$w<T>>) => JSX.Element;
|
|
530
|
+
|
|
531
|
+
declare type Props$v = {
|
|
532
|
+
color?: ColorProperty;
|
|
533
|
+
};
|
|
534
|
+
declare const Emphasis: WjecOneComponent<Props$v>;
|
|
535
|
+
|
|
536
|
+
declare type InputProps$1 = {
|
|
537
|
+
/**
|
|
538
|
+
* Determines whether the browser should provide autocomplete suggestions for this field
|
|
539
|
+
*/
|
|
540
|
+
autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
|
|
541
|
+
/**
|
|
542
|
+
* The text that will be displayed beneath the Input as a description/hint
|
|
543
|
+
*/
|
|
544
|
+
description?: FormattedString;
|
|
545
|
+
/**
|
|
546
|
+
* Determines whether the Input field is subject to user interaction
|
|
547
|
+
*/
|
|
548
|
+
disabled?: InputHTMLAttributes<HTMLInputElement>['disabled'];
|
|
549
|
+
/**
|
|
550
|
+
* Determines which area of the relevant CSS grid template the components are assigned to
|
|
551
|
+
* @deprecated gridArea has been deprecated because WJEC One components are intended to be layout agnostic
|
|
552
|
+
*/
|
|
553
|
+
gridArea?: string;
|
|
554
|
+
/**
|
|
555
|
+
* An SVG component that will be rendered to the left of the Input's content. Usually used to denote the purpose of the input field (for example, an envelope icon for "email address")
|
|
556
|
+
*/
|
|
557
|
+
icon?: (props: SVGProps<SVGSVGElement>) => SVGComponent;
|
|
558
|
+
/**
|
|
559
|
+
* A hint at the type of data expected, so that certain browsers/devices can display the relevant virtual keyboard
|
|
560
|
+
*/
|
|
561
|
+
inputMode?: InputHTMLAttributes<HTMLInputElement>['inputMode'];
|
|
562
|
+
/**
|
|
563
|
+
* Determines whether the Input should be rendered in an error state
|
|
564
|
+
* @deprecated This prop has been deprecated due to the introduction of the new `status` prop, and is equivalent to `status='error'`
|
|
565
|
+
*/
|
|
566
|
+
invalid?: boolean;
|
|
567
|
+
/**
|
|
568
|
+
* The text that will be displayed as the Input's label
|
|
569
|
+
*/
|
|
570
|
+
label?: FormattedString;
|
|
571
|
+
/**
|
|
572
|
+
* Determines the maximum number of characters permitted for the Input's value
|
|
573
|
+
*/
|
|
574
|
+
maxCharacters?: InputHTMLAttributes<HTMLInputElement>['maxLength'];
|
|
575
|
+
/**
|
|
576
|
+
* The string that will be assigned to the underlying HTML input element's "name" attribute
|
|
577
|
+
*/
|
|
578
|
+
name?: InputHTMLAttributes<HTMLInputElement>['name'];
|
|
579
|
+
/**
|
|
580
|
+
* A handler that will be invoked if the Input loses focus. Provides a reference to the new focus target as the only argument
|
|
581
|
+
* @param focusTarget The HTML element to which focused has moved
|
|
582
|
+
* @returns void
|
|
583
|
+
*/
|
|
584
|
+
onBlur?: (focusTarget: HTMLElement) => void;
|
|
585
|
+
/**
|
|
586
|
+
* A handler that will be invoked each time the content of the Input is changed. Provides the latest value as the only argument
|
|
587
|
+
* @param value The updated value of the Input
|
|
588
|
+
* @returns void
|
|
589
|
+
*/
|
|
590
|
+
onChange?: (value: string) => void;
|
|
591
|
+
/**
|
|
592
|
+
* A handler that will be invoked if the Input receives focus
|
|
593
|
+
* @returns void
|
|
594
|
+
*/
|
|
595
|
+
onFocus?: () => void;
|
|
596
|
+
/**
|
|
597
|
+
* A handler that will be invoked when a selection is chosen from the provided `suggestions` list. Provides the select value as the only argument
|
|
598
|
+
* @param value A string equal to the value that was selected
|
|
599
|
+
* @returns void
|
|
600
|
+
* @deprecated This prop has been deprecated because its functionality relies on non-standard implementation and will no longer be invoked. The previous behavior can be replicated by manually matching the `onChange()` value against the provided `suggestions` in the parent component
|
|
601
|
+
*/
|
|
602
|
+
onPickSuggestion?: (value: string) => void;
|
|
603
|
+
/**
|
|
604
|
+
* The text that will be displayed as the Input's placeholder when no value is present
|
|
605
|
+
*/
|
|
606
|
+
placeholder?: InputHTMLAttributes<HTMLInputElement>['placeholder'];
|
|
607
|
+
/**
|
|
608
|
+
* Determines whether the Input should be rendered in a readonly state
|
|
609
|
+
*/
|
|
610
|
+
readonly?: InputHTMLAttributes<HTMLInputElement>['readOnly'];
|
|
611
|
+
/**
|
|
612
|
+
* Determines whether the Input is a required field
|
|
613
|
+
*/
|
|
614
|
+
required?: InputHTMLAttributes<HTMLInputElement>['required'];
|
|
615
|
+
/**
|
|
616
|
+
* Determines the state in which the Input should be rendered
|
|
617
|
+
*/
|
|
618
|
+
status?: 'error' | 'success' | 'warning';
|
|
619
|
+
/**
|
|
620
|
+
* An icon that will be rendered to the right of the Input's content. Usually used to denote the status of the input field (will default to the matching icon as determined by `status`, but can be overridden)
|
|
621
|
+
* @default status='error': ErrorIcon | status='success': SuccessIcon | status='warning': WarningIcon
|
|
622
|
+
*/
|
|
623
|
+
statusIcon?: (props: SVGProps<SVGSVGElement>) => SVGComponent;
|
|
624
|
+
/**
|
|
625
|
+
* Determines whether the `statusIcon` is a further representation of the `status`, or whether it's being used for another purpose
|
|
626
|
+
* @default "status"
|
|
627
|
+
*/
|
|
628
|
+
statusIconBehavior?: 'custom' | 'status';
|
|
629
|
+
/**
|
|
630
|
+
* The text that, if provided, will be displayed beneath the Input, relating to the `status`
|
|
631
|
+
*/
|
|
632
|
+
statusMessage?: FormattedString;
|
|
633
|
+
/**
|
|
634
|
+
* A list of autocomplete suggestions that will be provided when the user interacts with the Input
|
|
635
|
+
*/
|
|
636
|
+
suggestions?: string[];
|
|
637
|
+
/**
|
|
638
|
+
* The text that will be displayed if the Input does not satisfy the requirements determined by `required` and/or `validationPattern`
|
|
639
|
+
* @deprecated This prop has been deprecated due to the introduction of the new `statusMessage` prop, which functions similarly but is more semantically related to the associated `status` prop
|
|
640
|
+
*/
|
|
641
|
+
validationMessage?: string;
|
|
642
|
+
/**
|
|
643
|
+
* A string containing a regular expression pattern that will be used to determine the validity of the Input
|
|
644
|
+
* @deprecated This prop has been deprecated due to the introduction of the new `status` prop. Validation should now be performed by the parent component, and the appropriate `status` and `statusMessage` values should be explicitly provided
|
|
645
|
+
*/
|
|
646
|
+
validationPattern?: string;
|
|
647
|
+
/**
|
|
648
|
+
* A string that will be used as the value of the Input
|
|
649
|
+
* @default ""
|
|
650
|
+
*/
|
|
651
|
+
value?: string;
|
|
652
|
+
/**
|
|
653
|
+
* A CSS width property that will be used to determine the horizontal dimensions of the Input
|
|
654
|
+
*/
|
|
655
|
+
width?: CSSProperties['width'];
|
|
656
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
657
|
+
|
|
658
|
+
declare const Input: WjecOneComponent<InputProps$1>;
|
|
659
|
+
|
|
660
|
+
/** @jsx jsx */
|
|
661
|
+
|
|
662
|
+
/**
|
|
663
|
+
* TODO list
|
|
664
|
+
* > Keyboard navigation (incl. close on tab out of expanded list)
|
|
665
|
+
*/
|
|
666
|
+
declare type InputProps = React__default.ComponentProps<typeof Input>;
|
|
667
|
+
declare type Props$u<T> = {
|
|
668
|
+
clearButtonBehaviour?: 'clear' | 'clearAndClose' | 'close';
|
|
669
|
+
expanded?: boolean;
|
|
670
|
+
filter?: boolean;
|
|
671
|
+
floatingList?: boolean;
|
|
672
|
+
floatingListPosition?: {
|
|
673
|
+
bottom?: number;
|
|
674
|
+
left?: number;
|
|
675
|
+
right?: number;
|
|
676
|
+
top?: number;
|
|
677
|
+
};
|
|
678
|
+
icon?: InputProps['icon'];
|
|
679
|
+
label?: InputProps['label'];
|
|
680
|
+
loading?: boolean;
|
|
681
|
+
maxHeight?: number;
|
|
682
|
+
noMatchesMessage?: FormattedString;
|
|
683
|
+
onChange?: InputProps['onChange'];
|
|
684
|
+
onFilter?: (filteredOptions: T[]) => void;
|
|
685
|
+
optionKeyExtractor?: KeyExtractor<T>;
|
|
686
|
+
optionTemplate?: FC<{
|
|
687
|
+
option: T;
|
|
688
|
+
index: number;
|
|
689
|
+
filteredOptions: T[];
|
|
690
|
+
}>;
|
|
691
|
+
options: T[];
|
|
692
|
+
placeholder?: InputProps['placeholder'];
|
|
693
|
+
value?: InputProps['value'];
|
|
694
|
+
} & Pick<AriaProperties, 'ariaExpanded' | 'ariaLabel' | 'ariaMultiselectable' | 'ariaPosInSet' | 'ariaSetSize'>;
|
|
695
|
+
declare const FilterList: <T extends unknown>({ ariaLabel, ariaMultiselectable, ariaPosInSet, ariaSetSize, clearButtonBehaviour, expanded, filter, floatingList, floatingListPosition, icon, id, label, loading, maxHeight, noMatchesMessage, onChange, onFilter, optionKeyExtractor, optionTemplate, options, placeholder, value }: WjecOneComponentProps<Props$u<T>>) => JSX.Element;
|
|
696
|
+
|
|
697
|
+
/** @jsx jsx */
|
|
698
|
+
|
|
699
|
+
declare type ContextMenuProps$1 = React__default.ComponentProps<typeof ContextMenu>;
|
|
700
|
+
declare type Props$t = {
|
|
701
|
+
clearButton?: false | string;
|
|
702
|
+
clearId?: string;
|
|
703
|
+
onClear?: () => void;
|
|
704
|
+
onSubmit?: () => void;
|
|
705
|
+
otherActions?: ContextMenuProps$1['options'];
|
|
706
|
+
submitButton?: false | string;
|
|
707
|
+
submitId?: string;
|
|
708
|
+
width?: WidthProperty<any>;
|
|
709
|
+
} & Pick<AriaProperties, 'ariaDescription' | 'ariaLabel'>;
|
|
710
|
+
declare const Form: WjecOneComponent<Props$t>;
|
|
711
|
+
|
|
712
|
+
/** @jsx jsx */
|
|
713
|
+
|
|
714
|
+
declare type Props$s = {
|
|
715
|
+
ariaLabel?: AriaProperties;
|
|
716
|
+
/**
|
|
717
|
+
* Determines whether the CheckBox is rendered in a checked state
|
|
718
|
+
* @default false
|
|
719
|
+
*/
|
|
720
|
+
checked?: boolean;
|
|
721
|
+
/** Description for the checkbox */
|
|
722
|
+
description?: FormattedString;
|
|
723
|
+
/** Determines whether the CheckBox is subject to user interaction */
|
|
724
|
+
disabled?: boolean;
|
|
725
|
+
/**
|
|
726
|
+
* Determines which area of the relevant CSS grid template the CheckBox is assigned to
|
|
727
|
+
* @deprecated gridArea has been deprecated because WJEC One components are intended to be layout agnostic
|
|
728
|
+
*/
|
|
729
|
+
gridArea?: string;
|
|
730
|
+
/** Determines whether the CheckBox should be visually highlighted
|
|
731
|
+
* @deprecated highlighted This prop has been deprecated because highlighting an checkbox component with a border color does not fit with the latest WJEC One design. Please use an alternative approach or CSS override
|
|
732
|
+
*/
|
|
733
|
+
highlighted?: boolean;
|
|
734
|
+
/**
|
|
735
|
+
* An SVG component that will be rendered to the left of the Checkbox's content. Usually used to denote the purpose of the input field (for example, an envelope icon for "email address")
|
|
736
|
+
*/
|
|
737
|
+
icon?: (props: SVGProps<SVGSVGElement>) => SVGComponent;
|
|
738
|
+
/** The identifier that will be pass through to the underlying HTML element */
|
|
739
|
+
id?: string;
|
|
740
|
+
/** Text that will be displayed as the CheckBox's label (Note: a more complex label can be achieved by instead providing the label as the CheckBox's children) */
|
|
741
|
+
label?: FormattedString;
|
|
742
|
+
/**
|
|
743
|
+
* Determines whether the label is allowed to wrap, or if it will be truncated instead
|
|
744
|
+
* @default "wrap"
|
|
745
|
+
*/
|
|
746
|
+
labelOverflow?: 'ellipsis' | 'wrap';
|
|
747
|
+
/** Determines whether the CheckBox should render a loading animation to indicate activity */
|
|
748
|
+
loading?: boolean;
|
|
749
|
+
/** A handler that will be called when the checked state of the CheckBox is changed */
|
|
750
|
+
onChange?: (checked: boolean) => void;
|
|
751
|
+
/**
|
|
752
|
+
* Determines whether the Checkbox component is rendered as a visual representation instead of a form component
|
|
753
|
+
* @default false
|
|
754
|
+
* @deprecated This prop has been deprecated because the underlying HTML element does not support a "readonly" attribute, and therefore behavior cannot be guaranteed. An alternative such as `<Input readonly value='...' />` can be used
|
|
755
|
+
*/
|
|
756
|
+
readonly?: boolean;
|
|
757
|
+
/**
|
|
758
|
+
* Determines the state in which the Input should be rendered
|
|
759
|
+
*/
|
|
760
|
+
status?: 'error' | 'success' | 'warning';
|
|
761
|
+
/**
|
|
762
|
+
* The text that, if provided, will be displayed beneath the Checkbox, relating to the `status`
|
|
763
|
+
*/
|
|
764
|
+
statusMessage?: string;
|
|
765
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
766
|
+
declare const CheckBox: WjecOneComponent<Props$s>;
|
|
767
|
+
|
|
768
|
+
interface BaseProps {
|
|
769
|
+
date?: Date;
|
|
770
|
+
disabled?: boolean;
|
|
771
|
+
label?: FormattedString;
|
|
772
|
+
maxDate?: Date;
|
|
773
|
+
maxTime?: string;
|
|
774
|
+
minDate?: Date;
|
|
775
|
+
minTime?: string;
|
|
776
|
+
onChangeDate?: (date: Date) => void;
|
|
777
|
+
onChangeTime?: (time: string) => void;
|
|
778
|
+
placeholder?: string;
|
|
779
|
+
readonly?: boolean;
|
|
780
|
+
required?: boolean;
|
|
781
|
+
time?: string;
|
|
782
|
+
type?: 'date' | 'dateTime' | 'time';
|
|
783
|
+
validationMessage?: string;
|
|
784
|
+
width?: CSSProperties['width'];
|
|
785
|
+
}
|
|
786
|
+
interface DateProps extends Omit<BaseProps, 'maxTime' | 'minTime' | 'onChangeTime' | 'time'> {
|
|
787
|
+
type?: 'date';
|
|
788
|
+
}
|
|
789
|
+
interface DateTimeProps extends BaseProps {
|
|
790
|
+
type?: 'dateTime';
|
|
791
|
+
}
|
|
792
|
+
interface TimeProps extends Omit<BaseProps, 'date' | 'maxDate' | 'minDate' | 'onChangeDate'> {
|
|
793
|
+
type?: 'time';
|
|
794
|
+
}
|
|
795
|
+
declare type Props$r = DateProps | DateTimeProps | TimeProps;
|
|
796
|
+
declare const DateTimePicker: WjecOneComponent<Props$r>;
|
|
797
|
+
|
|
798
|
+
/** @jsx jsx */
|
|
799
|
+
|
|
800
|
+
declare type Props$q = React__default.ComponentProps<typeof Input>;
|
|
801
|
+
declare const Email: WjecOneComponent<Props$q>;
|
|
802
|
+
|
|
803
|
+
declare type Props$p = {
|
|
804
|
+
files?: File[];
|
|
805
|
+
height?: HeightProperty<any>;
|
|
806
|
+
max?: number;
|
|
807
|
+
multiple?: boolean;
|
|
808
|
+
onError?: (errors: Array<{
|
|
809
|
+
code: string;
|
|
810
|
+
details?: {
|
|
811
|
+
[key: string]: any;
|
|
812
|
+
};
|
|
813
|
+
}>) => void;
|
|
814
|
+
onSelect?: (files: File[]) => void;
|
|
815
|
+
placeholderDescription?: string;
|
|
816
|
+
placeholderTitle?: string;
|
|
817
|
+
validExtensions?: string[];
|
|
818
|
+
validTypes?: string[];
|
|
819
|
+
width?: WidthProperty<any>;
|
|
820
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
821
|
+
declare const FileInput: WjecOneComponent<Props$p>;
|
|
822
|
+
|
|
823
|
+
declare type PasswordProps = {
|
|
824
|
+
/**
|
|
825
|
+
* The text that will be displayed beneath the Password field as a description/hint
|
|
826
|
+
*/
|
|
827
|
+
description?: FormattedString;
|
|
828
|
+
/**
|
|
829
|
+
* Determines whether the password field is subject to user input
|
|
830
|
+
*/
|
|
831
|
+
disabled?: boolean;
|
|
832
|
+
/**
|
|
833
|
+
* Determines which area of the relevant CSS grid template the Password is assigned to
|
|
834
|
+
* @deprecated gridArea has been deprecated because WJEC One components are intended to be layout agnostic
|
|
835
|
+
*/
|
|
836
|
+
gridArea?: string;
|
|
837
|
+
/**
|
|
838
|
+
* Determines the border color of the Password field when `highlighted={true}`
|
|
839
|
+
* @deprecated This prop has been deprecated due to its association with the deprecated `highlighted` prop
|
|
840
|
+
*/
|
|
841
|
+
highlightColor?: CSSProperties['color'];
|
|
842
|
+
/**
|
|
843
|
+
* Determines whether the Password component should be rendered with a different border color in order to draw attention to the field
|
|
844
|
+
* @deprecated This prop has been deprecated because highlighting an input component with a border color does not fit with the latest WJEC One design. Please use an alternative approach or CSS override
|
|
845
|
+
*/
|
|
846
|
+
highlighted?: boolean;
|
|
847
|
+
/**
|
|
848
|
+
* The text that will be displayed as the Password field's label
|
|
849
|
+
*/
|
|
850
|
+
label?: FormattedString;
|
|
851
|
+
/**
|
|
852
|
+
* The string that will be assigned to the underlying HTML input element's "name" attribute
|
|
853
|
+
*/
|
|
854
|
+
name?: string;
|
|
855
|
+
/**
|
|
856
|
+
* A handler that will be invoked each time the content of the Password field is changed. Provides the latest value as the only argument
|
|
857
|
+
* @param password The updated value of the Password field
|
|
858
|
+
* @returns void
|
|
859
|
+
*/
|
|
860
|
+
onChange?: (password: string) => void;
|
|
861
|
+
/**
|
|
862
|
+
* A handler that will be invoked each time the revealed state of the password is toggled. Provides a boolean value to indicate whether the password is currently revealed as the only argument
|
|
863
|
+
* @param isRevealed A boolean value indicating whether the password is currently revealed
|
|
864
|
+
* @returns void
|
|
865
|
+
*/
|
|
866
|
+
onToggleRevealPassword?: (isRevealed: boolean) => void;
|
|
867
|
+
/**
|
|
868
|
+
* The text that will be displayed as the Password field's placeholder when no value is present
|
|
869
|
+
*/
|
|
870
|
+
placeholder?: string;
|
|
871
|
+
/**
|
|
872
|
+
* Determines whether the value of the Password field should be visible
|
|
873
|
+
* @default false
|
|
874
|
+
*/
|
|
875
|
+
revealPassword?: boolean;
|
|
876
|
+
/**
|
|
877
|
+
* Determines whether the value of the Password field should be visible
|
|
878
|
+
* @default false
|
|
879
|
+
* @deprecated This prop has been replaced with the new `revealPassword` prop, which has identical functionality but more clearly represents its intent
|
|
880
|
+
*/
|
|
881
|
+
show?: boolean;
|
|
882
|
+
/**
|
|
883
|
+
* Determines whether the lock icon located on the left-hand side of the Password field should be visible
|
|
884
|
+
* @default true
|
|
885
|
+
*/
|
|
886
|
+
showIcon?: boolean;
|
|
887
|
+
/**
|
|
888
|
+
* Determines the state in which the Password field should be rendered
|
|
889
|
+
*/
|
|
890
|
+
status?: 'error' | 'success' | 'warning';
|
|
891
|
+
/**
|
|
892
|
+
* The text that, if provided, will be displayed beneath the Password field, relating to the `status`
|
|
893
|
+
*/
|
|
894
|
+
statusMessage?: FormattedString;
|
|
895
|
+
/**
|
|
896
|
+
* A string that will be used as the value of the Password field
|
|
897
|
+
*/
|
|
898
|
+
value?: string;
|
|
899
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
900
|
+
|
|
901
|
+
declare const Password: WjecOneComponent<PasswordProps>;
|
|
902
|
+
|
|
903
|
+
declare type Props$o<T> = {
|
|
904
|
+
/**
|
|
905
|
+
* The text that will be displayed beneath the Radiogroup as a description/hint
|
|
906
|
+
*/
|
|
907
|
+
description?: string;
|
|
908
|
+
/** Determines whether the RadioGroup is subject to user interaction */
|
|
909
|
+
disabled?: boolean;
|
|
910
|
+
/**
|
|
911
|
+
* Determines which area of the relevant CSS grid template the RadioGroup is assigned to
|
|
912
|
+
* @deprecated gridArea has been deprecated because WJEC One components are intended to be layout agnostic
|
|
913
|
+
*/
|
|
914
|
+
gridArea?: string;
|
|
915
|
+
/** A function that will be used to return a unique key for each item; required if data contains non-primitive entries */
|
|
916
|
+
keyExtractor?: KeyExtractor<T>;
|
|
917
|
+
/** Determines whether the RadioGroup option should be visually highlighted
|
|
918
|
+
* @deprecated highlightedOption This prop has been deprecated because highlighting an option within a RadioGroup component with a border color does not fit with the latest WJEC One design. Please use an alternative approach or CSS override
|
|
919
|
+
*/
|
|
920
|
+
highlightedOption?: T;
|
|
921
|
+
/** Text that will be displayed as the RadioGroup's label */
|
|
922
|
+
label?: FormattedString;
|
|
923
|
+
/** A function that should be used to return a display value for each option if the options prop contains non-primitive entries */
|
|
924
|
+
labelExtractor?: ContentExtractor<T>;
|
|
925
|
+
/**
|
|
926
|
+
* The string that will be assigned to the underlying HTML input element's "name" attribute
|
|
927
|
+
*/
|
|
928
|
+
name?: string;
|
|
929
|
+
/**
|
|
930
|
+
* A handler that will be called when the RadioGroup component's selection is changed. Provides a reference to the selected item as the only argument
|
|
931
|
+
* @param option A reference to the selected item from the "options" list
|
|
932
|
+
* @returns void
|
|
933
|
+
*/
|
|
934
|
+
onSelect?: (option: T) => void;
|
|
935
|
+
/** The array of options that will be used to populate the RadioGroup component. */
|
|
936
|
+
options: T[];
|
|
937
|
+
/** Defines the layout of the RadioGroup's options */
|
|
938
|
+
orientation?: 'horizontal' | 'vertical';
|
|
939
|
+
/** The entry from the options prop that should be the RadioGroup component's selected option */
|
|
940
|
+
selectedOption?: T;
|
|
941
|
+
/**
|
|
942
|
+
* Determines the state in which the Input should be rendered
|
|
943
|
+
*/
|
|
944
|
+
status?: 'error' | 'success' | 'warning';
|
|
945
|
+
/**
|
|
946
|
+
* The text that, if provided, will be displayed beneath the RadioGroup, relating to the `status`
|
|
947
|
+
*/
|
|
948
|
+
statusMessage?: string;
|
|
949
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
950
|
+
declare const RadioGroup: <T extends {}>({ ariaLabel, description, disabled, gridArea, keyExtractor, highlightedOption, id: idProp, label, labelExtractor, name, onSelect, options, orientation, selectedOption, status, statusMessage }: WjecOneComponentProps<Props$o<T>>) => JSX.Element;
|
|
951
|
+
|
|
952
|
+
declare type OptionsComparator<T> = (optionA: T, optionB: T) => number;
|
|
953
|
+
declare type OptionsGroup<T> = {
|
|
954
|
+
label: string;
|
|
955
|
+
options: T[];
|
|
956
|
+
};
|
|
957
|
+
declare type SelectProps<T> = {
|
|
958
|
+
/**
|
|
959
|
+
* Determines whether to display an empty option at the top of the options list
|
|
960
|
+
* @default false
|
|
961
|
+
*/
|
|
962
|
+
blankOption?: boolean;
|
|
963
|
+
/**
|
|
964
|
+
* The text that will be displayed beneath the Password field as a description/hint
|
|
965
|
+
*/
|
|
966
|
+
description?: FormattedString;
|
|
967
|
+
/**
|
|
968
|
+
* Determines whether the Select component is subject to user interaction
|
|
969
|
+
* @default false
|
|
970
|
+
*/
|
|
971
|
+
disabled?: boolean;
|
|
972
|
+
/**
|
|
973
|
+
* Determines which area of the relevant CSS grid template the Select component is assigned to
|
|
974
|
+
* @deprecated gridArea has been deprecated because WJEC One components are intended to be layout agnostic
|
|
975
|
+
*/
|
|
976
|
+
gridArea?: string;
|
|
977
|
+
/**
|
|
978
|
+
* Determines the color used to highlight the Select component if `highlighted="true"`
|
|
979
|
+
* @default ColorPalette.highlight
|
|
980
|
+
* @deprecated This prop has been deprecated due to its association with the deprecated `highlighted` prop
|
|
981
|
+
*/
|
|
982
|
+
highlightColor?: ColorProperty;
|
|
983
|
+
/**
|
|
984
|
+
* Determines whether the Select component should be visually highlighted with a colored border
|
|
985
|
+
* @default false
|
|
986
|
+
* @deprecated This prop has been deprecated because highlighting an input component with a border color does not fit with the latest WJEC One design. Please use an alternative approach or CSS override
|
|
987
|
+
*/
|
|
988
|
+
highlighted?: boolean;
|
|
989
|
+
/** Text that will be displayed as the Select component's label */
|
|
990
|
+
label?: FormattedString;
|
|
991
|
+
/**
|
|
992
|
+
* The string that will be assigned to the underlying HTML input element's "name" attribute
|
|
993
|
+
*/
|
|
994
|
+
name?: string;
|
|
995
|
+
/**
|
|
996
|
+
* A handler that will be called when the Select component's selection is changed. Provides a reference to the selected item as the only argument
|
|
997
|
+
* @param option A reference to the selected item from the "options" list
|
|
998
|
+
* @returns void
|
|
999
|
+
*/
|
|
1000
|
+
onSelect?: (option: T) => void;
|
|
1001
|
+
/** The array of options that will be used to populate the Select component. Optionally, groups can be specified by providing an object with strictly two properties: `label` for the group name, `options` for the list of options inside the group */
|
|
1002
|
+
options: Array<T | OptionsGroup<T>>;
|
|
1003
|
+
/**
|
|
1004
|
+
* A comparator function to determine the sort order if `sortOptions="true"`
|
|
1005
|
+
* @deprecated This prop has been deprecated because the component no longer provides sorting functionality. Sorting should be performed in the parent component, and the sorted list provided via the `options` prop
|
|
1006
|
+
*/
|
|
1007
|
+
optionComparator?: OptionsComparator<T>;
|
|
1008
|
+
/** A function that should be used to return a unique key for each option if the options prop contains non-primitive or duplicate entries */
|
|
1009
|
+
optionKeyExtractor?: KeyExtractor<T>;
|
|
1010
|
+
/** A function that should be used to return a display value for each option if the options prop contains non-primitive entries */
|
|
1011
|
+
optionLabelExtractor?: ContentExtractor<T>;
|
|
1012
|
+
/** A string that will be displayed by the Select component if no option is currently selected */
|
|
1013
|
+
placeholder?: string;
|
|
1014
|
+
/**
|
|
1015
|
+
* Determines whether the Select component is rendered as a readonly string instead of a form component
|
|
1016
|
+
* @default false
|
|
1017
|
+
* @deprecated This prop has been deprecated because the underlying HTML element does not support a "readonly" attribute, and therefore behavior cannot be guaranteed. An alternative such as `<Input readonly value='...' />` can be used
|
|
1018
|
+
*/
|
|
1019
|
+
readonly?: boolean;
|
|
1020
|
+
/** The entry from the options prop that should be the Select component's selected option */
|
|
1021
|
+
selectedOption?: T;
|
|
1022
|
+
/**
|
|
1023
|
+
* Determines whether the Select component should sort the list of options as determined by the optionComparator prop
|
|
1024
|
+
* @deprecated This prop has been deprecated because the component no longer provides sorting functionality. Sorting should be performed in the parent component, and the sorted list provided via the `options` prop
|
|
1025
|
+
*/
|
|
1026
|
+
sortOptions?: boolean;
|
|
1027
|
+
/**
|
|
1028
|
+
* Determines the state in which the Select should be rendered
|
|
1029
|
+
*/
|
|
1030
|
+
status?: 'error' | 'success' | 'warning';
|
|
1031
|
+
/**
|
|
1032
|
+
* The text that, if provided, will be displayed beneath the Select relating to the `status`
|
|
1033
|
+
*/
|
|
1034
|
+
statusMessage?: FormattedString;
|
|
1035
|
+
};
|
|
1036
|
+
|
|
1037
|
+
declare const Select: <T extends unknown>(props: WjecOneComponentProps<SelectProps<T>>) => JSX.Element;
|
|
1038
|
+
|
|
1039
|
+
/** @jsx jsx */
|
|
1040
|
+
|
|
1041
|
+
declare type Props$n = {
|
|
1042
|
+
disabled?: boolean;
|
|
1043
|
+
/**
|
|
1044
|
+
* Determines which area of the relevant CSS grid template the TextArea is assigned to
|
|
1045
|
+
* @deprecated gridArea has been deprecated because WJEC One components are intended to be layout agnostic
|
|
1046
|
+
*/
|
|
1047
|
+
gridArea?: string;
|
|
1048
|
+
height?: HeightProperty<any>;
|
|
1049
|
+
label?: FormattedString;
|
|
1050
|
+
maxCharacters?: number;
|
|
1051
|
+
maxHeight?: HeightProperty<any>;
|
|
1052
|
+
maxWidth?: WidthProperty<any>;
|
|
1053
|
+
onChange?: (inputValue: string) => void;
|
|
1054
|
+
placeholder?: string;
|
|
1055
|
+
readonly?: boolean;
|
|
1056
|
+
resizable?: boolean;
|
|
1057
|
+
showCount?: boolean;
|
|
1058
|
+
value?: string;
|
|
1059
|
+
width?: WidthProperty<any>;
|
|
1060
|
+
} & Pick<AriaProperties, 'ariaDescription' | 'ariaLabel'>;
|
|
1061
|
+
declare const TextArea: WjecOneComponent<Props$n>;
|
|
1062
|
+
|
|
1063
|
+
declare type Props$m = {
|
|
1064
|
+
/**
|
|
1065
|
+
* Determines whether the Toggle is subject to user input
|
|
1066
|
+
*/
|
|
1067
|
+
disabled?: boolean;
|
|
1068
|
+
/**
|
|
1069
|
+
* Determines which area of the relevant CSS grid template the Toggle is assigned to
|
|
1070
|
+
* @deprecated gridArea has been deprecated because WJEC One components are intended to be layout agnostic
|
|
1071
|
+
*/
|
|
1072
|
+
gridArea?: string;
|
|
1073
|
+
/**
|
|
1074
|
+
* The string that will be displayed as the Toggle's label
|
|
1075
|
+
*/
|
|
1076
|
+
label?: FormattedString;
|
|
1077
|
+
/**
|
|
1078
|
+
* Indicates the value for the off state of the label
|
|
1079
|
+
* @deprecated offLabel has been deprecated because it is not required by the latest design
|
|
1080
|
+
*/
|
|
1081
|
+
offLabel?: string;
|
|
1082
|
+
/**
|
|
1083
|
+
* Determines whether the Toggle is rendered in an "on" state
|
|
1084
|
+
*/
|
|
1085
|
+
on?: boolean;
|
|
1086
|
+
/**
|
|
1087
|
+
* A handler that is called whenever the Toggle's "on" state is changed. Provides a single argument representing the updated "on" state
|
|
1088
|
+
* @param isOn boolean
|
|
1089
|
+
* @returns void
|
|
1090
|
+
*/
|
|
1091
|
+
onChange?: (isOn: boolean) => void;
|
|
1092
|
+
/**
|
|
1093
|
+
* Indicates the value for the on state of the label
|
|
1094
|
+
* @deprecated onLabel has been deprecated in favor of the new "value" prop, because the latest design does not support the concept of on/off values
|
|
1095
|
+
*/
|
|
1096
|
+
onLabel?: string;
|
|
1097
|
+
/**
|
|
1098
|
+
* The string that will be displayed to indicate the value of the Toggle's "on" state
|
|
1099
|
+
*/
|
|
1100
|
+
value?: FormattedString;
|
|
1101
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
1102
|
+
declare const Toggle: WjecOneComponent<Props$m>;
|
|
1103
|
+
|
|
1104
|
+
/** @jsx jsx */
|
|
1105
|
+
|
|
1106
|
+
declare type SVGFC$1 = (props: SVGProps<SVGSVGElement>) => SVGComponent;
|
|
1107
|
+
declare type Props$l = {
|
|
1108
|
+
copyrightMessage?: FormattedString;
|
|
1109
|
+
logos?: SVGFC$1[];
|
|
1110
|
+
maxWidth?: number;
|
|
1111
|
+
};
|
|
1112
|
+
declare const Footer: FC<Props$l>;
|
|
1113
|
+
|
|
1114
|
+
/** @jsx jsx */
|
|
1115
|
+
|
|
1116
|
+
declare type SVGFC = (props: SVGProps<SVGSVGElement>) => SVGComponent;
|
|
1117
|
+
declare type Props$k = {
|
|
1118
|
+
logo?: SVGFC | {
|
|
1119
|
+
eduqas: SVGFC;
|
|
1120
|
+
wjec: SVGFC;
|
|
1121
|
+
};
|
|
1122
|
+
logoId?: string;
|
|
1123
|
+
logoStyles?: {
|
|
1124
|
+
height: string;
|
|
1125
|
+
padding: string;
|
|
1126
|
+
};
|
|
1127
|
+
maxWidth?: number;
|
|
1128
|
+
menus?: JSX.Element;
|
|
1129
|
+
onClickPageIcon?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
1130
|
+
pageIcon?: SVGFC;
|
|
1131
|
+
pageIconHref?: string;
|
|
1132
|
+
pageTitle?: FormattedString;
|
|
1133
|
+
showPageTitle?: boolean;
|
|
1134
|
+
};
|
|
1135
|
+
declare const Header: FC<Props$k>;
|
|
1136
|
+
|
|
1137
|
+
/** @jsx jsx */
|
|
1138
|
+
|
|
1139
|
+
declare type FooterProps = React__default.ComponentProps<typeof Footer>;
|
|
1140
|
+
declare type HeaderProps = React__default.ComponentProps<typeof Header>;
|
|
1141
|
+
declare type Props$j = {
|
|
1142
|
+
footerProps?: Partial<FooterProps>;
|
|
1143
|
+
headerProps?: Partial<HeaderProps>;
|
|
1144
|
+
maxWidth?: number;
|
|
1145
|
+
};
|
|
1146
|
+
declare const Page: FC<Props$j>;
|
|
1147
|
+
|
|
1148
|
+
declare type Props$i = {
|
|
1149
|
+
color?: ColorProperty;
|
|
1150
|
+
progress?: number;
|
|
1151
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
1152
|
+
declare const LinearProgress: WjecOneComponent<Props$i>;
|
|
1153
|
+
|
|
1154
|
+
declare type Props$h = {
|
|
1155
|
+
breadcrumb?: boolean;
|
|
1156
|
+
href: string;
|
|
1157
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
1158
|
+
declare const Link: WjecOneComponent<Props$h>;
|
|
1159
|
+
|
|
1160
|
+
declare type IconsMap<L extends number | string | symbol> = {
|
|
1161
|
+
[key in L]: ((props: SVGProps<SVGSVGElement>) => SVGComponent);
|
|
1162
|
+
};
|
|
1163
|
+
declare type Props$g<L extends number | string | symbol> = {
|
|
1164
|
+
context: Context<[DestructurableRecord<LocalizationState<L>>, Dispatch<Action>]>;
|
|
1165
|
+
icons?: IconsMap<L>;
|
|
1166
|
+
keySuffix?: string;
|
|
1167
|
+
open?: boolean;
|
|
1168
|
+
selectLocaleAction: (locale: L) => AsyncAction;
|
|
1169
|
+
showLocaleNameInList?: boolean;
|
|
1170
|
+
showSelectedLocaleName?: boolean;
|
|
1171
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
1172
|
+
declare const LocalizationMenu: <L extends string | number | symbol>({ ariaLabel, context, icons, id, keySuffix, open, selectLocaleAction, showLocaleNameInList, showSelectedLocaleName }: WjecOneComponentProps<Props$g<L>>) => JSX.Element;
|
|
1173
|
+
|
|
1174
|
+
declare type ButtonProps = React.ComponentProps<typeof Button>;
|
|
1175
|
+
declare type ContextMenuProps = React.ComponentProps<typeof ContextMenu>;
|
|
1176
|
+
declare type ModalProps = {
|
|
1177
|
+
/**
|
|
1178
|
+
* The label that will be displayed for the Modal's action button; providing a value of `false` will result in the action button being omitted
|
|
1179
|
+
* @default "Confirm"
|
|
1180
|
+
*/
|
|
1181
|
+
actionButton?: ButtonProps['label'] | false;
|
|
1182
|
+
/** The identifier that will be passed through to the underlying HTML element of the action button */
|
|
1183
|
+
actionButtonId?: ButtonProps['id'];
|
|
1184
|
+
/** Determines whether the action button is subject to user interaction */
|
|
1185
|
+
actionDisabled?: ButtonProps['disabled'];
|
|
1186
|
+
/** Determines whether the action button should display a loading animation to indicate activity */
|
|
1187
|
+
actionLoading?: ButtonProps['loading'];
|
|
1188
|
+
/** Determines the progress % to be represented by the loading animation. If no value is provided, the loading animation will loop in an infinite, indeterminate state */
|
|
1189
|
+
actionLoadingProgress?: ButtonProps['loadingProgress'];
|
|
1190
|
+
/**
|
|
1191
|
+
* Determines which button component is used to render the action button; `"negative"` will result in a DestructiveButton being used and `"positive"` will use a PrimaryButton
|
|
1192
|
+
* @default "positive"
|
|
1193
|
+
*/
|
|
1194
|
+
actionType?: 'negative' | 'positive';
|
|
1195
|
+
/**
|
|
1196
|
+
* Determines whether background scrolling should be disabled when the Modal is open
|
|
1197
|
+
* @default true
|
|
1198
|
+
*/
|
|
1199
|
+
blockScroll?: boolean;
|
|
1200
|
+
/**
|
|
1201
|
+
* The label that will be displayed for the Modal's cancel button; providing a value of `false` will result in the cancel button being omitted
|
|
1202
|
+
* @default "Cancel"
|
|
1203
|
+
*/
|
|
1204
|
+
cancelButton?: ButtonProps['label'] | false;
|
|
1205
|
+
/** The identifier that will be passed through to the underlying HTML element of the cancel button */
|
|
1206
|
+
cancelButtonId?: ButtonProps['id'];
|
|
1207
|
+
/**
|
|
1208
|
+
* Determines whether the Modal should close when the cancel button is pressed
|
|
1209
|
+
* @default true
|
|
1210
|
+
*/
|
|
1211
|
+
closeOnCancel?: boolean;
|
|
1212
|
+
/**
|
|
1213
|
+
* Determines whether the Modal should close when a click/touch is detected on the background overlay
|
|
1214
|
+
* @default true
|
|
1215
|
+
*/
|
|
1216
|
+
closeOnClickOutside?: boolean;
|
|
1217
|
+
/** Description text that will be displayed between the Modal's header and content */
|
|
1218
|
+
description?: FormattedString;
|
|
1219
|
+
/**
|
|
1220
|
+
* Determines whether the Modal should be rendered at a larger size that covers more of the display area
|
|
1221
|
+
* @deprecated The fullscreen prop is no longer necessary since the Modal can be sized situationally using the maxHeight, maxWidth, minHeight and minWidth props
|
|
1222
|
+
*/
|
|
1223
|
+
fullscreen?: boolean;
|
|
1224
|
+
/**
|
|
1225
|
+
* Determines the maximum permitted height of the Modal
|
|
1226
|
+
* @default "90vh"
|
|
1227
|
+
*/
|
|
1228
|
+
maxHeight?: CSSProperties['maxHeight'];
|
|
1229
|
+
/**
|
|
1230
|
+
* Determines the maximum permitted width of the Modal
|
|
1231
|
+
* @default "60vw"
|
|
1232
|
+
*/
|
|
1233
|
+
maxWidth?: CSSProperties['maxWidth'];
|
|
1234
|
+
/**
|
|
1235
|
+
* Determines the minimum permitted height of the Modal
|
|
1236
|
+
* @default "200px"
|
|
1237
|
+
*/
|
|
1238
|
+
minHeight?: CSSProperties['minHeight'];
|
|
1239
|
+
/**
|
|
1240
|
+
* Determines the minimum permitted width of the Modal
|
|
1241
|
+
* @default "200px"
|
|
1242
|
+
*/
|
|
1243
|
+
minWidth?: CSSProperties['minWidth'];
|
|
1244
|
+
/**
|
|
1245
|
+
* A callback that will be invoked when the Modal's action button is pressed
|
|
1246
|
+
*/
|
|
1247
|
+
onAction?: () => void;
|
|
1248
|
+
/**
|
|
1249
|
+
* A callback that will be invoked when the Modal's cancel button is pressed
|
|
1250
|
+
*/
|
|
1251
|
+
onCancel?: () => void;
|
|
1252
|
+
/**
|
|
1253
|
+
* A callback that will be invoked when the Modal is closed
|
|
1254
|
+
*/
|
|
1255
|
+
onClose?: () => void;
|
|
1256
|
+
/**
|
|
1257
|
+
* A callback that will be invoked when the Modal is opened
|
|
1258
|
+
*/
|
|
1259
|
+
onOpen?: () => void;
|
|
1260
|
+
/** Determines whether the Modal should be displayed */
|
|
1261
|
+
open?: boolean;
|
|
1262
|
+
/**
|
|
1263
|
+
* A set of custom controls that will be rendered in the Modal's footer. Can be either a React element or a configuration object for a ContextMenu
|
|
1264
|
+
*/
|
|
1265
|
+
otherActions?: React.ReactElement | ContextMenuProps['options'];
|
|
1266
|
+
/**
|
|
1267
|
+
* The amount of padding around the edge of the Modal
|
|
1268
|
+
* @default "30px"
|
|
1269
|
+
*/
|
|
1270
|
+
padding?: CSSProperties['padding'];
|
|
1271
|
+
/**
|
|
1272
|
+
* Determines whether a close icon should be displayed in the top right corner of the Modal
|
|
1273
|
+
* @default true
|
|
1274
|
+
*/
|
|
1275
|
+
showCloseIcon?: boolean;
|
|
1276
|
+
/**
|
|
1277
|
+
* Determines whether the Modal will attempt to prevent changes to the content area's dimensions if dynamic content causes the scrollbar to show/hide
|
|
1278
|
+
* @default true
|
|
1279
|
+
*/
|
|
1280
|
+
stableScrollbar?: boolean;
|
|
1281
|
+
/** The title that will be displayed in the Modal's header */
|
|
1282
|
+
title?: FormattedString;
|
|
1283
|
+
} & Pick<AriaProperties, 'ariaDescription' | 'ariaLabel'>;
|
|
1284
|
+
|
|
1285
|
+
declare const Modal: WjecOneComponent<ModalProps>;
|
|
1286
|
+
|
|
1287
|
+
/** @jsx jsx */
|
|
1288
|
+
|
|
1289
|
+
declare type NotificationProps$3 = {
|
|
1290
|
+
actionColor?: ColorProperty;
|
|
1291
|
+
actionIcon?: (props: SVGProps<SVGSVGElement>) => React__default.ReactElement;
|
|
1292
|
+
actionLoading?: boolean;
|
|
1293
|
+
actionLoadingProgress?: number;
|
|
1294
|
+
actionText?: string;
|
|
1295
|
+
actionTextColor?: ColorProperty;
|
|
1296
|
+
autoClose?: number;
|
|
1297
|
+
borderColor?: CSSProperties['color'];
|
|
1298
|
+
icon?: 'none' | ((props: SVGProps<SVGSVGElement>) => React__default.ReactElement);
|
|
1299
|
+
iconColor?: CSSProperties['color'];
|
|
1300
|
+
maxWidth?: WidthProperty<any>;
|
|
1301
|
+
message: FormattedString;
|
|
1302
|
+
onActionClick?: () => void;
|
|
1303
|
+
onClose?: () => void;
|
|
1304
|
+
onOpen?: () => void;
|
|
1305
|
+
open?: boolean;
|
|
1306
|
+
position?: {
|
|
1307
|
+
bottom?: BottomProperty<any>;
|
|
1308
|
+
left?: LeftProperty<any>;
|
|
1309
|
+
right?: RightProperty<any>;
|
|
1310
|
+
top?: TopProperty<any>;
|
|
1311
|
+
};
|
|
1312
|
+
positionType?: PositionProperty;
|
|
1313
|
+
showImmediately?: boolean;
|
|
1314
|
+
title?: FormattedString;
|
|
1315
|
+
titleColor?: CSSProperties['color'];
|
|
1316
|
+
};
|
|
1317
|
+
declare const Notification: WjecOneComponent<NotificationProps$3>;
|
|
1318
|
+
|
|
1319
|
+
declare type NotificationProps$2 = React__default.ComponentProps<typeof Notification>;
|
|
1320
|
+
declare type Props$f = Omit<NotificationProps$2, 'actionColor' | 'actionTextColor' | 'borderColor' | 'icon' | 'titleColor'>;
|
|
1321
|
+
declare const ErrorNotification: FC<Props$f>;
|
|
1322
|
+
|
|
1323
|
+
declare type NotificationProps$1 = React__default.ComponentProps<typeof Notification>;
|
|
1324
|
+
declare type Props$e = Omit<NotificationProps$1, 'actionColor' | 'actionTextColor' | 'borderColor' | 'icon' | 'iconColor' | 'titleColor'>;
|
|
1325
|
+
declare const InfoNotification: FC<Props$e>;
|
|
1326
|
+
|
|
1327
|
+
declare type NotificationProps = React__default.ComponentProps<typeof Notification>;
|
|
1328
|
+
declare type Props$d = Omit<NotificationProps, 'actionColor' | 'actionTextColor' | 'borderColor' | 'icon' | 'iconColor' | 'titleColor'>;
|
|
1329
|
+
declare const SuccessNotification: FC<Props$d>;
|
|
1330
|
+
|
|
1331
|
+
declare type Props$c = {
|
|
1332
|
+
color?: ColorProperty;
|
|
1333
|
+
};
|
|
1334
|
+
declare const PageTitle: WjecOneComponent<Props$c>;
|
|
1335
|
+
|
|
1336
|
+
declare type Props$b = {
|
|
1337
|
+
compact?: boolean;
|
|
1338
|
+
current?: number;
|
|
1339
|
+
onSelect?: (page: number) => void;
|
|
1340
|
+
total: number;
|
|
1341
|
+
} & Pick<AriaProperties, 'ariaCurrent' | 'ariaLabel'>;
|
|
1342
|
+
declare const Pagination: WjecOneComponent<Props$b>;
|
|
1343
|
+
|
|
1344
|
+
declare type Props$a = {
|
|
1345
|
+
color?: ColorProperty;
|
|
1346
|
+
};
|
|
1347
|
+
declare const Paragraph: WjecOneComponent<Props$a>;
|
|
1348
|
+
|
|
1349
|
+
declare type Props$9 = {
|
|
1350
|
+
height?: number;
|
|
1351
|
+
onClose?: () => void;
|
|
1352
|
+
onOpen?: (window: Window) => void;
|
|
1353
|
+
open?: boolean;
|
|
1354
|
+
position?: {
|
|
1355
|
+
x?: number;
|
|
1356
|
+
y?: number;
|
|
1357
|
+
};
|
|
1358
|
+
title?: string;
|
|
1359
|
+
width?: number;
|
|
1360
|
+
};
|
|
1361
|
+
declare const PopupWindow: WjecOneComponent<Props$9>;
|
|
1362
|
+
|
|
1363
|
+
/** @jsx jsx */
|
|
1364
|
+
|
|
1365
|
+
declare type Props$8 = {
|
|
1366
|
+
footer?: FC;
|
|
1367
|
+
header?: FC;
|
|
1368
|
+
margin?: MarginProperty<number>;
|
|
1369
|
+
onLayout?: () => void;
|
|
1370
|
+
orientation?: 'landscape' | 'portrait';
|
|
1371
|
+
verticalAlign?: 'baseline' | 'bottom' | 'middle' | 'sub' | 'super' | 'text-bottom' | 'text-top' | 'top';
|
|
1372
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
1373
|
+
declare const PrintLayout: WjecOneComponent<Props$8>;
|
|
1374
|
+
|
|
1375
|
+
declare type PopupWindowProps = React__default.ComponentProps<typeof PopupWindow>;
|
|
1376
|
+
declare type PrintLayoutProps = React__default.ComponentProps<typeof PrintLayout>;
|
|
1377
|
+
declare type Props$7 = PopupWindowProps & PrintLayoutProps & {
|
|
1378
|
+
autoPrint?: boolean;
|
|
1379
|
+
closeOnPrint?: boolean;
|
|
1380
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
1381
|
+
declare const PrintWindow: WjecOneComponent<Props$7>;
|
|
1382
|
+
|
|
1383
|
+
/** @jsx jsx */
|
|
1384
|
+
|
|
1385
|
+
declare type Props$6 = {
|
|
1386
|
+
element?: keyof HTMLElementTagNameMap;
|
|
1387
|
+
horizontal?: boolean;
|
|
1388
|
+
styles?: Interpolation | ArrayInterpolation<any>;
|
|
1389
|
+
vertical?: boolean;
|
|
1390
|
+
};
|
|
1391
|
+
declare const ScrollableContainer: FC<Props$6>;
|
|
1392
|
+
|
|
1393
|
+
declare type Props$5 = {
|
|
1394
|
+
color?: ColorProperty;
|
|
1395
|
+
};
|
|
1396
|
+
declare const SectionHeading: WjecOneComponent<Props$5>;
|
|
1397
|
+
|
|
1398
|
+
declare type Props$4 = {
|
|
1399
|
+
color?: ColorProperty;
|
|
1400
|
+
};
|
|
1401
|
+
declare const SectionTitle: WjecOneComponent<Props$4>;
|
|
1402
|
+
|
|
1403
|
+
/** @jsx jsx */
|
|
1404
|
+
|
|
1405
|
+
declare type ProfileAction = {
|
|
1406
|
+
label: FormattedString;
|
|
1407
|
+
icon?: (props: SVGProps<SVGSVGElement>) => SVGComponent;
|
|
1408
|
+
onClick: () => void;
|
|
1409
|
+
};
|
|
1410
|
+
declare type Props$3 = {
|
|
1411
|
+
allowForgotPassword?: boolean;
|
|
1412
|
+
allowSignup?: boolean;
|
|
1413
|
+
autocomplete?: boolean;
|
|
1414
|
+
enforceFormCompletion?: boolean;
|
|
1415
|
+
padding?: PaddingProperty<any>;
|
|
1416
|
+
passwordValidator?: (passwordA: string, passwordB: string) => boolean;
|
|
1417
|
+
profileActions?: ProfileAction[];
|
|
1418
|
+
repeatNewPassword?: boolean;
|
|
1419
|
+
type?: 'changePassword' | 'confirmResetPassword' | 'external' | 'forceChangePassword' | 'internal' | 'mfa' | 'requestResetPassword';
|
|
1420
|
+
onCancel?: () => void;
|
|
1421
|
+
onChangePassword?: (oldPassword: string, newPassword: string) => void;
|
|
1422
|
+
onConfirmResetPassword?: (username: string, newPassword: string, code: string) => void;
|
|
1423
|
+
onForceChangePassword?: (newPassword: string) => void;
|
|
1424
|
+
onForgotPassword?: () => void;
|
|
1425
|
+
onHaveResetCode?: () => void;
|
|
1426
|
+
onRequestResetPassword?: (username: string) => void;
|
|
1427
|
+
onSignin?: (username?: string, password?: string) => void;
|
|
1428
|
+
onSignout?: () => void;
|
|
1429
|
+
onSignup?: () => void;
|
|
1430
|
+
onSubmitMfa?: (code: string) => void;
|
|
1431
|
+
isSignedIn?: boolean;
|
|
1432
|
+
loading?: boolean;
|
|
1433
|
+
username?: string;
|
|
1434
|
+
i18n?: {
|
|
1435
|
+
cancel?: FormattedString;
|
|
1436
|
+
code?: FormattedString;
|
|
1437
|
+
forgotPassword?: FormattedString;
|
|
1438
|
+
newPassword?: FormattedString;
|
|
1439
|
+
password?: FormattedString;
|
|
1440
|
+
repeatNewPassword?: FormattedString;
|
|
1441
|
+
username?: FormattedString;
|
|
1442
|
+
changePasswordPrompt?: FormattedString;
|
|
1443
|
+
changePasswordSubmit?: FormattedString;
|
|
1444
|
+
changePasswordTitle?: FormattedString;
|
|
1445
|
+
changePasswordWarning?: FormattedString;
|
|
1446
|
+
forceChangePasswordPrompt?: FormattedString;
|
|
1447
|
+
forceChangePasswordTitle?: FormattedString;
|
|
1448
|
+
mfaPrompt?: FormattedString;
|
|
1449
|
+
mfaSubmit?: FormattedString;
|
|
1450
|
+
mfaTitle?: FormattedString;
|
|
1451
|
+
confirmResetPasswordPrompt?: FormattedString;
|
|
1452
|
+
requestResetPasswordPrompt?: FormattedString;
|
|
1453
|
+
resetPasswordHaveCode?: FormattedString;
|
|
1454
|
+
resetPasswordSubmit?: FormattedString;
|
|
1455
|
+
resetPasswordTitle?: FormattedString;
|
|
1456
|
+
signin?: FormattedString;
|
|
1457
|
+
signinPrompt?: FormattedString;
|
|
1458
|
+
signout?: FormattedString;
|
|
1459
|
+
signup?: FormattedString;
|
|
1460
|
+
signupPrompt?: FormattedString;
|
|
1461
|
+
welcomeMessage?: FormattedString;
|
|
1462
|
+
welcomeMessageNotSignedIn?: FormattedString;
|
|
1463
|
+
welcomeMessagePunctuation?: '' | '.' | ',' | '!' | '?' | ':';
|
|
1464
|
+
};
|
|
1465
|
+
} & Pick<AriaProperties, 'ariaDescription' | 'ariaLabel'>;
|
|
1466
|
+
declare const SigninForm: WjecOneComponent<Props$3>;
|
|
1467
|
+
|
|
1468
|
+
declare type SigninFormProps = React__default.ComponentProps<typeof SigninForm>;
|
|
1469
|
+
declare type Props$2 = SigninFormProps & {
|
|
1470
|
+
onClose?: () => void;
|
|
1471
|
+
onOpen?: () => void;
|
|
1472
|
+
open?: boolean;
|
|
1473
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
1474
|
+
declare const SigninMenu: WjecOneComponent<Props$2>;
|
|
1475
|
+
|
|
1476
|
+
declare type Props$1 = {
|
|
1477
|
+
color?: ColorProperty;
|
|
1478
|
+
};
|
|
1479
|
+
declare const SubParagraph: WjecOneComponent<Props$1>;
|
|
1480
|
+
|
|
1481
|
+
declare const SubTitle: WjecOneComponent;
|
|
1482
|
+
|
|
1483
|
+
declare type CellAlignment = 'center' | 'left' | 'right';
|
|
1484
|
+
declare type CellStyleExtractor<T> = (row: T, cellValue: string | number | JSX.Element, index: number) => Styles;
|
|
1485
|
+
declare type ColumnOptions = {
|
|
1486
|
+
align?: 'center' | 'left' | 'right';
|
|
1487
|
+
};
|
|
1488
|
+
declare type ColumnWidth = 'max' | 'min' | CSSProperties['width'];
|
|
1489
|
+
declare type RowOptions<T> = {
|
|
1490
|
+
group?: (row: T) => string;
|
|
1491
|
+
};
|
|
1492
|
+
declare type RowStyleExtractor<T> = (row: T, index: number) => Styles;
|
|
1493
|
+
declare type SortDirection = 'ascending' | 'descending';
|
|
1494
|
+
declare type TableColumnCellRenderer<T> = (row?: T) => JSX.Element;
|
|
1495
|
+
declare type TableColumnExtractor<T> = (row: T) => Array<TableColumnEntry<T>>;
|
|
1496
|
+
declare type TableColumnValueExtractor<T> = (row?: T) => FormattedString | number;
|
|
1497
|
+
interface TableColumnEntryTemplate<T> {
|
|
1498
|
+
align?: CellAlignment;
|
|
1499
|
+
headingStyle?: Styles;
|
|
1500
|
+
onSort?: (direction: SortDirection) => void;
|
|
1501
|
+
sortable?: boolean;
|
|
1502
|
+
sortableValue?: KeyExtractor<T>;
|
|
1503
|
+
sorted?: SortDirection | false;
|
|
1504
|
+
style?: Styles | CellStyleExtractor<T>;
|
|
1505
|
+
title: FormattedString;
|
|
1506
|
+
width?: ColumnWidth;
|
|
1507
|
+
}
|
|
1508
|
+
interface TableColumnEntryWithComponent<T> extends TableColumnEntryTemplate<T> {
|
|
1509
|
+
render: JSX.Element | TableColumnCellRenderer<T>;
|
|
1510
|
+
}
|
|
1511
|
+
interface TableColumnEntryWithKey<T> extends TableColumnEntryTemplate<T> {
|
|
1512
|
+
key: keyof T;
|
|
1513
|
+
}
|
|
1514
|
+
interface TableColumnEntryWithValue<T> extends TableColumnEntryTemplate<T> {
|
|
1515
|
+
value: FormattedString | number | TableColumnValueExtractor<T>;
|
|
1516
|
+
}
|
|
1517
|
+
declare type TableColumnEntry<T> = TableColumnEntryWithComponent<T> | TableColumnEntryWithKey<T> | TableColumnEntryWithValue<T>;
|
|
1518
|
+
declare type TableProps<T> = {
|
|
1519
|
+
/** A React styles object or a serialized Emotion styles object (or a function that returns either of these) used to style each cell */
|
|
1520
|
+
cellStyle?: Styles | CellStyleExtractor<T>;
|
|
1521
|
+
/** A list of column configuration objects (or a function that returns the same) used to determine what is displayed by the Table */
|
|
1522
|
+
columns: Array<TableColumnEntry<T>> | TableColumnExtractor<T>;
|
|
1523
|
+
/** Options that will be applied to all columns in the Table (some options may be overridden on a per-column basis) */
|
|
1524
|
+
columnOptions?: ColumnOptions;
|
|
1525
|
+
/** The array of data that will be used to populate the table */
|
|
1526
|
+
data: T[];
|
|
1527
|
+
/** A function that will be used to return a unique key for each row; required if data contains non-primitive entries */
|
|
1528
|
+
keyExtractor?: KeyExtractor<T>;
|
|
1529
|
+
/**
|
|
1530
|
+
* A handler that will be called when a row in the table is clicked
|
|
1531
|
+
* @deprecated onClickRow has been deprecated in favor of the new onPressRow prop, which behaves similarly but with better accessibility support
|
|
1532
|
+
*/
|
|
1533
|
+
onClickRow?: (row: T, index: number) => void;
|
|
1534
|
+
/** A handler that will be called when a row in the table is pressed */
|
|
1535
|
+
onPressRow?: (row: T, index: number) => void;
|
|
1536
|
+
/** Determines whether the data arrives pre-sorted; if true, the Table will not attempt to sort the data itself even if sortable controls are presented */
|
|
1537
|
+
preSorted?: boolean;
|
|
1538
|
+
/** Options that will be applied to all rows in the Table */
|
|
1539
|
+
rowOptions?: RowOptions<T>;
|
|
1540
|
+
/** A React styles object or a serialized Emotion styles object (or a function that returns either of these) used to style each row */
|
|
1541
|
+
rowStyle?: Styles | RowStyleExtractor<T>;
|
|
1542
|
+
/** Determines whether the row for a particular data entry should be visually highlighted */
|
|
1543
|
+
selectedRow?: T;
|
|
1544
|
+
/** Determines whether the Table should present sortable controls (may be overridden on a per-column basis, and behavior may differ depending on the value of the preSorted prop) */
|
|
1545
|
+
sortable?: boolean;
|
|
1546
|
+
};
|
|
1547
|
+
|
|
1548
|
+
declare const Table: <T extends {}>({ cellStyle, columns, columnOptions, data, keyExtractor, id, onClickRow, onPressRow, preSorted, rowOptions, rowStyle, selectedRow, sortable }: WjecOneComponentProps<TableProps<T>>) => JSX.Element;
|
|
1549
|
+
|
|
1550
|
+
declare type Props<T> = {
|
|
1551
|
+
backgroundStyle?: 'filled' | 'transparent';
|
|
1552
|
+
disabledTabs?: T[];
|
|
1553
|
+
keyExtractor?: KeyExtractor<T>;
|
|
1554
|
+
labelExtractor?: ContentExtractor<T>;
|
|
1555
|
+
onSelect?: (tab: T) => void;
|
|
1556
|
+
/**
|
|
1557
|
+
* @deprecated The "scrollable" prop is now redundant, and the component
|
|
1558
|
+
* will behave as though scrollable={true} in all cases
|
|
1559
|
+
*/
|
|
1560
|
+
scrollable?: boolean;
|
|
1561
|
+
selectedTab?: T;
|
|
1562
|
+
selectedTabColor?: ColorProperty;
|
|
1563
|
+
tabs: T[];
|
|
1564
|
+
} & Pick<AriaProperties, 'ariaLabel'>;
|
|
1565
|
+
declare const Tabs: <T extends unknown>({ ariaLabel, backgroundStyle, disabledTabs, id, keyExtractor, labelExtractor, onSelect, scrollable, selectedTab, selectedTabColor, tabs }: WjecOneComponentProps<Props<T>>) => JSX.Element;
|
|
1566
|
+
|
|
1567
|
+
export { Accordion, Breadcrumb, Button, Card, Carousel, CheckBox, CircularProgress, _default$2 as ColorPalette, _default$1 as ColorPaletteEduqas, ContextHelp, ContextMenu, DateTimePicker, DestructiveButton, DragAndDropList, Email, Emphasis, ErrorNotification, FileInput, FilterList, Footer, Form, Header, IconButton, InfoNotification, Input, LinearProgress, Link, LinkButton, LocalizationMenu, Modal, Notification, Page, PageTitle, Pagination, Paragraph, Password, Popup, PopupWindow, PrimaryButton, PrintLayout, PrintWindow, RadioGroup, ScrollableContainer, SecondaryButton, SectionHeading, SectionTitle, Select, SigninForm, SigninMenu, _default as StylePalette, SubParagraph, SubTitle, SuccessNotification, Table, Tabs, TextArea, Toggle };
|