@ostack.tech/ui 0.5.0 → 0.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/locales/en-GB.js +4 -4
- package/dist/locales/en-GB.js.map +1 -1
- package/dist/locales/en-US.js +4 -4
- package/dist/locales/en-US.js.map +1 -1
- package/dist/locales/{fr.js → fr-FR.js} +6 -6
- package/dist/locales/fr-FR.js.map +1 -0
- package/dist/locales/{pt.js → pt-PT.js} +5 -5
- package/dist/locales/pt-PT.js.map +1 -0
- package/dist/ostack-ui.css +64 -40
- package/dist/ostack-ui.css.map +1 -1
- package/dist/ostack-ui.js +325 -273
- package/dist/ostack-ui.js.map +1 -1
- package/dist/types/components/Field/FieldContext.d.ts +2 -0
- package/dist/types/components/Field/index.d.ts +1 -1
- package/dist/types/components/IconButton/IconButton.d.ts +25 -6
- package/dist/types/components/Printer/Printer.d.ts +3 -1
- package/dist/types/components/Printer/PrinterContext.d.ts +4 -1
- package/dist/types/components/Printer/index.d.ts +1 -1
- package/dist/types/components/Table/Table.d.ts +49 -3
- package/dist/types/components/Table/TableContext.d.ts +4 -6
- package/dist/types/locales/en-GB.d.ts +1 -1
- package/dist/types/locales/en-US.d.ts +1 -1
- package/dist/types/locales/{fr.d.ts → fr-FR.d.ts} +2 -2
- package/dist/types/locales/index.d.ts +4 -4
- package/dist/types/locales/{pt.d.ts → pt-PT.d.ts} +2 -2
- package/package.json +1 -1
- package/scss/components/DataTable/_DataTable.scss +34 -38
- package/scss/components/Field/_Field.scss +11 -8
- package/scss/components/Input/_Input.scss +4 -0
- package/scss/components/Table/_Table-variables.scss +10 -0
- package/scss/components/Table/_Table.scss +21 -1
- package/dist/locales/fr.js.map +0 -1
- package/dist/locales/pt.js.map +0 -1
|
@@ -51,6 +51,8 @@ export declare function useFieldControlTagName(): string | undefined;
|
|
|
51
51
|
export declare function useFieldControlFocused(): boolean | undefined;
|
|
52
52
|
/** Hook exposing whether the field's control is required. */
|
|
53
53
|
export declare function useFieldControlRequired(): boolean | undefined;
|
|
54
|
+
/** Hook exposing the `children` of the field's label. */
|
|
55
|
+
export declare function useFieldLabel(): ReactNode;
|
|
54
56
|
/** Hook exposing the field label's id. */
|
|
55
57
|
export declare function useFieldLabelId(): string | undefined;
|
|
56
58
|
/** Hook exposing the field's description ids. */
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export * from './Field.tsx';
|
|
2
|
-
export { type FieldActions, useFieldControlFocused, useFieldControlId, useFieldControlRequired, useFieldControlTagName, useFieldDescriptionIds, useFieldErrorMessageIds, useFieldLabelId, useOnFieldLabelChange, useSetFieldControl, useSetFieldControlFocused, useSetFieldFeedback, useSetFieldHelperText, useSetFieldLabel, } from './FieldContext.ts';
|
|
2
|
+
export { type FieldActions, useFieldControlFocused, useFieldControlId, useFieldControlRequired, useFieldControlTagName, useFieldDescriptionIds, useFieldErrorMessageIds, useFieldLabel, useFieldLabelId, useOnFieldLabelChange, useSetFieldControl, useSetFieldControlFocused, useSetFieldFeedback, useSetFieldHelperText, useSetFieldLabel, } from './FieldContext.ts';
|
|
@@ -38,9 +38,15 @@ export interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">
|
|
|
38
38
|
size?: IconButtonSize;
|
|
39
39
|
/** Whether to display the icon button as a circle. */
|
|
40
40
|
circle?: boolean;
|
|
41
|
-
/**
|
|
41
|
+
/** Icon to show within the button. */
|
|
42
42
|
icon: IconProp | ReactElement;
|
|
43
|
-
/**
|
|
43
|
+
/**
|
|
44
|
+
* Label of the icon button. This label is rendered as a visually hidden
|
|
45
|
+
* element inside the button.
|
|
46
|
+
*
|
|
47
|
+
* By default, and for sighted users, it is also displayed as a tooltip
|
|
48
|
+
* (unless `disableTooltip` is set).
|
|
49
|
+
*/
|
|
44
50
|
label: ReactNode;
|
|
45
51
|
/**
|
|
46
52
|
* Whether to display the button in "active" state.
|
|
@@ -55,7 +61,8 @@ export interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">
|
|
|
55
61
|
*/
|
|
56
62
|
disabled?: boolean;
|
|
57
63
|
/**
|
|
58
|
-
* Whether to display the button in "loading" state.
|
|
64
|
+
* Whether to display the button in "loading" state. This makes it so the icon
|
|
65
|
+
* button displays a spinner instead of its icon.
|
|
59
66
|
*
|
|
60
67
|
* @default false
|
|
61
68
|
*/
|
|
@@ -66,6 +73,18 @@ export interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">
|
|
|
66
73
|
* @default false
|
|
67
74
|
*/
|
|
68
75
|
enabledWhenLoading?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Label of the icon button when it is in "loading" state. If not provided,
|
|
78
|
+
* the label will remain unchanged.
|
|
79
|
+
*/
|
|
80
|
+
loadingLabel?: ReactNode;
|
|
81
|
+
/**
|
|
82
|
+
* Whether to disable showing the icon button's label in a tooltip. Disabling
|
|
83
|
+
* the tooltip does **not** affect the button's accessibility.
|
|
84
|
+
*
|
|
85
|
+
* @default false
|
|
86
|
+
*/
|
|
87
|
+
disableTooltip?: boolean;
|
|
69
88
|
/** Properties to pass to the `Icon` component. */
|
|
70
89
|
iconProps?: Omit<ComponentPropsWithRef<typeof Icon>, "icon" | "label">;
|
|
71
90
|
/** Properties to pass to the `Spinner` component. */
|
|
@@ -76,10 +95,10 @@ export interface IconButtonProps extends Omit<ComponentPropsWithoutRef<"button">
|
|
|
76
95
|
/**
|
|
77
96
|
* The icon button component renders a button containing a single icon. Use it
|
|
78
97
|
* as appropriate, as an alternative to the `Button` component, to trigger
|
|
79
|
-
* actions or events, such as opening a dialog or submitting a form
|
|
98
|
+
* actions or events, such as opening a dialog or submitting a form.
|
|
80
99
|
*
|
|
81
|
-
* A `label` property
|
|
82
|
-
*
|
|
100
|
+
* A `label` property is required for screen-readers to give meaning to the
|
|
101
|
+
* button. This label is also, by default, displayed as a tooltip.
|
|
83
102
|
*
|
|
84
103
|
* Example usage:
|
|
85
104
|
*
|
|
@@ -5,8 +5,10 @@ export interface PrintOptions {
|
|
|
5
5
|
/**
|
|
6
6
|
* Title of the `<iframe>` document, used by some browsers when saving as a
|
|
7
7
|
* file.
|
|
8
|
+
*
|
|
9
|
+
* A function may be provided which will be called before each print.
|
|
8
10
|
*/
|
|
9
|
-
documentTitle?: string;
|
|
11
|
+
documentTitle?: string | (() => string | undefined);
|
|
10
12
|
/**
|
|
11
13
|
* [`size`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@page/size)
|
|
12
14
|
* to apply to print pages. This property can be used to specify custom page
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
|
-
import { PrintOptions } from './Printer.tsx';
|
|
2
|
+
import { PrinterProps, PrintOptions } from './Printer.tsx';
|
|
3
3
|
/** Value of the printer context. */
|
|
4
4
|
interface PrinterContextValue {
|
|
5
5
|
preview?: boolean;
|
|
6
6
|
printInForeground?: boolean;
|
|
7
|
+
documentTitle?: PrinterProps["documentTitle"];
|
|
7
8
|
printInProgress: boolean;
|
|
8
9
|
triggerRef: RefObject<HTMLButtonElement | null>;
|
|
9
10
|
contentRef: RefObject<Element | Text | null>;
|
|
@@ -15,6 +16,8 @@ interface PrinterContextValue {
|
|
|
15
16
|
export declare const PrinterContext: import('react').Context<PrinterContextValue | null>;
|
|
16
17
|
/** Hook providing access to the printer context. */
|
|
17
18
|
export declare function usePrinterContext(): PrinterContextValue;
|
|
19
|
+
/** Returns the `documentTitle` passed to the `Printer` component. */
|
|
20
|
+
export declare function usePrinterDocumentTitle(): PrinterProps["documentTitle"];
|
|
18
21
|
/**
|
|
19
22
|
* Returns whether printing is currently in progress.
|
|
20
23
|
*
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * from './Printer.tsx';
|
|
2
2
|
export * from './PrinterContent.tsx';
|
|
3
3
|
export { usePrinting, useStartPrintingTask } from './PrinterContentContext.tsx';
|
|
4
|
-
export { usePrint, usePrintInProgress } from './PrinterContext.ts';
|
|
4
|
+
export { usePrint, usePrinterDocumentTitle, usePrintInProgress, } from './PrinterContext.ts';
|
|
5
5
|
export * from './PrinterTrigger.tsx';
|
|
6
6
|
export * from './usePrintClassNames.ts';
|
|
@@ -1,13 +1,53 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties } from 'react';
|
|
1
|
+
import { ComponentPropsWithoutRef, ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
|
|
2
2
|
import { ControlStatus } from '../../utils/control.ts';
|
|
3
3
|
/** Default column width in `"fixed"` mode. */
|
|
4
4
|
export declare const DEFAULT_TABLE_COLUMN_WIDTH = 150;
|
|
5
|
+
/** Possible table caption sides. */
|
|
6
|
+
export type TableCaptionSide = "top" | "bottom";
|
|
5
7
|
/** Table variant. */
|
|
6
8
|
export type TableVariant = "default" | "control";
|
|
7
9
|
/** Possible table layouts. */
|
|
8
10
|
export type TableLayout = "auto" | "fixed";
|
|
9
11
|
/** Properties of the table component. */
|
|
10
12
|
export interface TableProps extends ComponentPropsWithoutRef<"table"> {
|
|
13
|
+
/**
|
|
14
|
+
* Caption of the table. This caption is displayed outside the table, above or
|
|
15
|
+
* below it (depending on the value of `captionSide`), in a `<div>` element.
|
|
16
|
+
*
|
|
17
|
+
* This value is also used as the default value of the `visuallyHiddenCaption`
|
|
18
|
+
* property, which renders a visually hidden `<caption>` element within the
|
|
19
|
+
* table for accessibility purposes.
|
|
20
|
+
*
|
|
21
|
+
* It is not necessary to specify this property (or `visuallyHiddenCaption`)
|
|
22
|
+
* when rendering the `Table` within a `Field` component containing a `Label`,
|
|
23
|
+
* as the `visuallyHiddenCaption` property is automatically set with the value
|
|
24
|
+
* of the `Label`'s `children`.
|
|
25
|
+
*
|
|
26
|
+
* **NOTE**: The visible caption is rendered as a `<div>` because of the
|
|
27
|
+
* difficulty in styling a `<caption>` element.
|
|
28
|
+
*/
|
|
29
|
+
caption?: ReactNode;
|
|
30
|
+
/**
|
|
31
|
+
* Side in which to place the caption, when the `caption` property is
|
|
32
|
+
* provided.
|
|
33
|
+
*
|
|
34
|
+
* @default "bottom"
|
|
35
|
+
*/
|
|
36
|
+
captionSide?: TableCaptionSide;
|
|
37
|
+
/**
|
|
38
|
+
* Content of the visually hidden `<caption>` element.
|
|
39
|
+
*
|
|
40
|
+
* By default, this is set to the value of the `caption` property when
|
|
41
|
+
* provided. If a `caption` is not provided and the `Table` is rendered within
|
|
42
|
+
* a `Field` component containing a `Label`, the value of the `Label`'s
|
|
43
|
+
* `children` is used instead.
|
|
44
|
+
*
|
|
45
|
+
* Prefer using either the `caption` property or wrapping the table in a
|
|
46
|
+
* labelled field. Manually set this property either to specify an accessible
|
|
47
|
+
* caption that differs from the visible one, or when wanting to provide an
|
|
48
|
+
* accessible caption without displaying the default caption or a `Label`.
|
|
49
|
+
*/
|
|
50
|
+
visuallyHiddenCaption?: ReactNode;
|
|
11
51
|
/**
|
|
12
52
|
* Marks the table as being meant for editable content (cells containing form
|
|
13
53
|
* controls).
|
|
@@ -52,6 +92,12 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
|
|
|
52
92
|
maxHeight?: CSSProperties["maxHeight"];
|
|
53
93
|
/** Properties to pass to the container element. */
|
|
54
94
|
containerProps?: ComponentPropsWithRef<"div">;
|
|
95
|
+
/** Properties to pass to the scrollable element. */
|
|
96
|
+
scrollableProps?: ComponentPropsWithRef<"div">;
|
|
97
|
+
/** Properties to pass to the visual `<div>` caption element. */
|
|
98
|
+
captionProps?: ComponentPropsWithRef<"div">;
|
|
99
|
+
/** Properties to pass to the visually hidden `<caption>` element. */
|
|
100
|
+
visuallyHiddenCaptionProps?: ComponentPropsWithRef<"caption">;
|
|
55
101
|
}
|
|
56
102
|
/**
|
|
57
103
|
* Use the table component to display structured data in a tabular format.
|
|
@@ -91,9 +137,9 @@ export interface TableProps extends ComponentPropsWithoutRef<"table"> {
|
|
|
91
137
|
* TableRow,
|
|
92
138
|
* } from "@ostack.tech/ui";
|
|
93
139
|
*
|
|
94
|
-
* function
|
|
140
|
+
* function PriceList() {
|
|
95
141
|
* return (
|
|
96
|
-
* <Table>
|
|
142
|
+
* <Table caption="Price list">
|
|
97
143
|
* <TableHead>
|
|
98
144
|
* <TableColumn label="Item" />
|
|
99
145
|
* <TableColumn label="Price" />
|
|
@@ -7,6 +7,8 @@ export interface TableContextValue {
|
|
|
7
7
|
status?: ControlStatus;
|
|
8
8
|
layout: TableLayout;
|
|
9
9
|
defaultColumnWidth: number;
|
|
10
|
+
onTableMinWidthChange: (minWidth: string | undefined) => void;
|
|
11
|
+
onTableMaxWidthChange: (maxWidth: string | undefined) => void;
|
|
10
12
|
store: TableStore;
|
|
11
13
|
}
|
|
12
14
|
/** State of the table. */
|
|
@@ -14,12 +16,6 @@ export interface TableState {
|
|
|
14
16
|
scrollPosition?: ScrollPosition;
|
|
15
17
|
numberOfColumns?: number;
|
|
16
18
|
columnWidths?: (string | undefined)[];
|
|
17
|
-
actions: TableActions;
|
|
18
|
-
}
|
|
19
|
-
/** Actions of the table. */
|
|
20
|
-
export interface TableActions {
|
|
21
|
-
setTableMinWidth: (minWidth: string | undefined) => void;
|
|
22
|
-
setTableMaxWidth: (maxWidth: string | undefined) => void;
|
|
23
19
|
}
|
|
24
20
|
/** Table store. */
|
|
25
21
|
export type TableStore = ReturnType<typeof useCreateTableContext>["store"];
|
|
@@ -31,6 +27,8 @@ export declare function useCreateTableContext(editable: boolean, status: Control
|
|
|
31
27
|
status: ControlStatus | undefined;
|
|
32
28
|
layout: TableLayout;
|
|
33
29
|
defaultColumnWidth: number;
|
|
30
|
+
onTableMinWidthChange: (minWidth: string | undefined) => void;
|
|
31
|
+
onTableMaxWidthChange: (maxWidth: string | undefined) => void;
|
|
34
32
|
store: Omit<import('zustand').StoreApi<TableState>, "subscribe"> & {
|
|
35
33
|
subscribe: {
|
|
36
34
|
(listener: (selectedState: TableState, previousSelectedState: TableState) => void): () => void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { LocalizationObject } from '../providers/LocalizationProvider';
|
|
2
|
-
/** `fr` locale. */
|
|
3
|
-
export declare const
|
|
2
|
+
/** `fr-FR` locale. */
|
|
3
|
+
export declare const locale: LocalizationObject;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export
|
|
4
|
-
export
|
|
1
|
+
export { locale as enGB } from './en-GB.tsx';
|
|
2
|
+
export { locale as enUS } from './en-US.tsx';
|
|
3
|
+
export { locale as fr, locale as frFR } from './fr-FR.tsx';
|
|
4
|
+
export { locale as pt, locale as ptPT } from './pt-PT.tsx';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { LocalizationObject } from '../providers/LocalizationProvider';
|
|
2
|
-
/** `pt` locale. */
|
|
3
|
-
export declare const
|
|
2
|
+
/** `pt-PT` locale. */
|
|
3
|
+
export declare const locale: LocalizationObject;
|
package/package.json
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@use "../ControlCode/ControlCode-variables" as *;
|
|
1
2
|
@use "../../scss/base-variables" as *;
|
|
2
3
|
@use "../../scss/utils/breakpoints" as *;
|
|
3
4
|
@use "../../scss/utils/spacing" as *;
|
|
@@ -5,6 +6,10 @@
|
|
|
5
6
|
|
|
6
7
|
.#{$prefix}data-table {
|
|
7
8
|
$data-table: &;
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: row;
|
|
11
|
+
flex-wrap: wrap;
|
|
12
|
+
align-items: center;
|
|
8
13
|
|
|
9
14
|
// Clearfix due to usage of floats for the default positioning
|
|
10
15
|
&::after {
|
|
@@ -70,37 +75,43 @@
|
|
|
70
75
|
}
|
|
71
76
|
}
|
|
72
77
|
|
|
73
|
-
//
|
|
74
|
-
//
|
|
75
|
-
& > &__content-container:not(:first-child) {
|
|
76
|
-
margin-top: spacing(2);
|
|
77
|
-
}
|
|
78
|
+
// Auto-layout of data table components (when they're direct children of the
|
|
79
|
+
// data table):
|
|
78
80
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
+
// Add margins to elements
|
|
82
|
+
& > *:not(:last-child) {
|
|
83
|
+
margin-bottom: spacing(1);
|
|
81
84
|
}
|
|
82
85
|
|
|
83
|
-
//
|
|
84
|
-
& > &
|
|
85
|
-
& > &__pagination,
|
|
86
|
-
& > &__selection-trigger {
|
|
87
|
-
float: right;
|
|
88
|
-
margin-bottom: spacing(2);
|
|
86
|
+
// Separate elements
|
|
87
|
+
& > *:not(&__content-container):not(:first-child) {
|
|
89
88
|
margin-left: spacing(2);
|
|
90
89
|
}
|
|
90
|
+
& > &__content-container + * {
|
|
91
|
+
margin-left: 0 !important;
|
|
92
|
+
}
|
|
91
93
|
|
|
92
|
-
|
|
93
|
-
& > &__pagination
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
94
|
+
// The filter, pagination, and selection default to being on the right
|
|
95
|
+
& > :is(&__filter-root, &__pagination, &__selection-trigger):first-child,
|
|
96
|
+
&
|
|
97
|
+
> &__content-container
|
|
98
|
+
+ :is(&__filter-root, &__pagination, &__selection-trigger) {
|
|
99
|
+
margin-left: auto;
|
|
97
100
|
}
|
|
98
101
|
|
|
99
|
-
& > &
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
& > :is(.#{$prefix}label__container, &__rows-per-page) {
|
|
103
|
+
flex: 1;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
// Label styles
|
|
107
|
+
& > .#{$prefix}label__container:first-child {
|
|
108
|
+
align-self: flex-end;
|
|
109
|
+
}
|
|
110
|
+
& > &__content-container + .#{$prefix}label__container {
|
|
111
|
+
align-self: flex-start;
|
|
112
|
+
}
|
|
113
|
+
& > .#{$prefix}control-code + .#{$prefix}label__container {
|
|
114
|
+
margin-left: $control-code-label-margin-x;
|
|
104
115
|
}
|
|
105
116
|
|
|
106
117
|
// Selection column
|
|
@@ -120,20 +131,5 @@
|
|
|
120
131
|
&__pagination-select-root {
|
|
121
132
|
width: auto !important;
|
|
122
133
|
}
|
|
123
|
-
|
|
124
|
-
& > &__content-container:not(:first-child),
|
|
125
|
-
& > &__content-container:not(:last-child) {
|
|
126
|
-
margin-top: 0;
|
|
127
|
-
margin-bottom: 0;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
& > &__filter-root,
|
|
131
|
-
& > &__content-container,
|
|
132
|
-
& > &__rows-per-page,
|
|
133
|
-
& > &__pagination {
|
|
134
|
-
&:not(:last-child) {
|
|
135
|
-
margin-bottom: spacing(2);
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
134
|
}
|
|
139
135
|
}
|
|
@@ -7,19 +7,22 @@
|
|
|
7
7
|
width: 100%;
|
|
8
8
|
break-inside: avoid;
|
|
9
9
|
|
|
10
|
-
& > .#{$prefix}control-code,
|
|
11
|
-
& > .#{$prefix}label__container {
|
|
10
|
+
& > :is(.#{$prefix}control-code, .#{$prefix}label__container) {
|
|
12
11
|
margin-bottom: spacing(1);
|
|
13
12
|
}
|
|
14
13
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
:is(
|
|
15
|
+
.#{$prefix}helper-text,
|
|
16
|
+
.#{$prefix}feedback-list:not(:empty),
|
|
17
|
+
.#{$prefix}feedback
|
|
18
|
+
) {
|
|
18
19
|
margin-top: spacing(1);
|
|
19
20
|
|
|
20
|
-
~
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
~ :is(
|
|
22
|
+
.#{$prefix}helper-text,
|
|
23
|
+
.#{$prefix}feedback-list:not(:empty),
|
|
24
|
+
.#{$prefix}feedback
|
|
25
|
+
) {
|
|
23
26
|
margin-top: spacing(0.5);
|
|
24
27
|
}
|
|
25
28
|
}
|
|
@@ -6,6 +6,16 @@
|
|
|
6
6
|
$table-font-size: var(--#{$prefix}font-size-sm) !default;
|
|
7
7
|
$table-line-height: var(--#{$prefix}line-height-sm) !default;
|
|
8
8
|
|
|
9
|
+
// Container
|
|
10
|
+
$table-container-align-items: center !default;
|
|
11
|
+
|
|
12
|
+
// Caption
|
|
13
|
+
$table-caption-margin-y: spacing(1) !default;
|
|
14
|
+
$table-caption-font-size: $label-font-size !default;
|
|
15
|
+
$table-caption-line-height: $label-line-height !default;
|
|
16
|
+
$table-caption-font-weight: $label-font-weight !default;
|
|
17
|
+
$table-caption-color: $label-color !default;
|
|
18
|
+
|
|
9
19
|
// Default variant
|
|
10
20
|
$table-default-border-radius: null !default;
|
|
11
21
|
$table-default-border-width: 0 0 1px !default;
|
|
@@ -18,8 +18,28 @@
|
|
|
18
18
|
table-layout: fixed;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
// Scrollable container
|
|
22
21
|
&__container {
|
|
22
|
+
width: 100%;
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
align-items: $table-container-align-items;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&__caption {
|
|
29
|
+
font-size: $table-caption-font-size;
|
|
30
|
+
line-height: $table-caption-line-height;
|
|
31
|
+
font-weight: $table-caption-font-weight;
|
|
32
|
+
color: $table-caption-color;
|
|
33
|
+
|
|
34
|
+
&--top {
|
|
35
|
+
margin-bottom: $table-caption-margin-y;
|
|
36
|
+
}
|
|
37
|
+
&--bottom {
|
|
38
|
+
margin-top: $table-caption-margin-y;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&__scrollable {
|
|
23
43
|
display: flex;
|
|
24
44
|
position: relative;
|
|
25
45
|
width: 100%;
|
package/dist/locales/fr.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"fr.js","sources":["../../src/locales/fr.tsx"],"sourcesContent":["import { fr as dateFnsFr } from \"date-fns/locale/fr\";\n\nimport type { LocalizationObject } from \"../providers/LocalizationProvider\";\n\n/** `fr` locale. */\nexport const fr: LocalizationObject = {\n languageTag: \"fr\",\n dateFnsLocale: dateFnsFr,\n AlertDialog: {\n okText: \"OK\",\n },\n Calendar: {\n previousMonthLabel: \"Mois précédent\",\n nextMonthLabel: \"Mois suivant\",\n },\n CloseButton: {\n \"aria-label\": \"Fermer\",\n },\n CommandMenu: {\n searchPlaceholder: \"Rechercher…\",\n listLabel: \"Suggestions\",\n loadingLabel: \"Chargement…\",\n emptyMessage: \"Aucun résultat trouvé.\",\n },\n CommandMenuDialog: {\n title: \"Palette de commandes\",\n description: \"Rechercher une commande…\",\n },\n ConfirmDialog: {\n cancelText: \"Annuler\",\n },\n ControlCode: {\n visuallyHiddenPrefix: \"Champ\",\n },\n DataTable: {\n emptyMessage: \"Rien à afficher.\",\n },\n DataTableFilter: {\n \"aria-label\": \"Tableau filtre\",\n placeholder: \"Filtre\",\n },\n DataTablePagination: {\n rowsRange: (range, total) => (\n <>\n Lignes {range} sur {total}\n </>\n ),\n previousPageButtonLabel: \"Page précédente\",\n nextPageButtonLabel: \"Page suivante\",\n },\n DataTableRowsPerPage: {\n label: \"Lignes par page\",\n },\n DateInput: {\n placeholder: \"jour/mois/année\",\n formatDescription: \"Saisir la date au format JJ/MM/AAAA\",\n calendarButtonLabel: (selectedDate, editable) =>\n editable\n ? selectedDate\n ? `Ouvrir le calendrier pour modifier la date sélectionnée\\u202F: ${selectedDate}`\n : \"Ouvrir le calendrier pour sélectionner la date\"\n : selectedDate\n ? `Ouvrir le calendrier avec la date sélectionnée\\u202F: ${selectedDate}`\n : \"Ouvrir le calendrier sans la date sélectionnée\",\n },\n DateRangeInput: {\n startInputLabel: \"Date de début\",\n endInputLabel: \"Date de fin\",\n calendarButtonLabel: (selectedDateRange, editable) =>\n editable\n ? selectedDateRange\n ? `Ouvrir le calendrier pour modifier la plage de dates sélectionnée\\u202F: ${selectedDateRange}`\n : \"Ouvrir le calendrier pour sélectionner la plage de dates\"\n : selectedDateRange\n ? `Ouvrir le calendrier avec la plage de dates sélectionnée\\u202F: ${selectedDateRange}`\n : \"Ouvrir le calendrier sans plage de dates sélectionnée\",\n },\n ErrorBoundary: {\n fallbackMessage: (\n <>\n Une erreur s'est produite.\n <br />\n Appuyez sur le bouton à droite pour réessayer. Si le problème persiste,\n réessayez plus tard.\n </>\n ),\n resetButtonLabel: \"Réessayer\",\n },\n Feedback: {\n visuallyHiddenPrefix: (type) =>\n type === \"error\"\n ? \"Erreur\\u202F:\"\n : type === \"warning\"\n ? \"Alerte\\u202F:\"\n : null,\n },\n FeedbackPopover: {\n label: \"Afficher les observations\",\n },\n FieldGroupHeader: {\n visuallyHiddenCodePrefix: \"Groupe\",\n },\n Input: {\n clearButtonLabel: \"Effacer\",\n },\n Label: {\n requiredIconLabel: \"Obligatoire\",\n helperButtonLabel: \"Afficher l’aide\",\n },\n NumericInput: {\n decimalSeparator: \",\",\n groupingStyle: \"thousand\",\n groupSeparator: \"\\u00A0\",\n },\n Select: {\n optionsLabel: \"Options\",\n },\n TableColumn: {\n helperButtonLabel: \"Afficher l’aide\",\n },\n TableHead: {\n sortByColumnDescription: (columnName, sortDirection) =>\n sortDirection === null\n ? `Arrêter le tri du tableau par colonne «\\u202F${columnName}\\u202F»`\n : `Trier le tableau par colonne «\\u202F${columnName}\\u202F» par ordre ${\n sortDirection === \"asc\" ? \"croissant\" : \"décroissant\"\n }`,\n },\n ToastProvider: {\n label: \"Notification\",\n },\n ToastViewport: {\n label: \"Notifications ({hotkey})\",\n },\n};\n"],"names":["dateFnsFr"],"mappings":";;AAKO,MAAM,KAAyB;AAAA,EACpC,aAAa;AAAA,EACb,eAAeA;AAAAA,EACf,aAAa;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,EAAA;AAAA,EAElB,aAAa;AAAA,IACX,cAAc;AAAA,EAAA;AAAA,EAEhB,aAAa;AAAA,IACX,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,cAAc;AAAA,EAAA;AAAA,EAEhB,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf,eAAe;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,aAAa;AAAA,IACX,sBAAsB;AAAA,EAAA;AAAA,EAExB,WAAW;AAAA,IACT,cAAc;AAAA,EAAA;AAAA,EAEhB,iBAAiB;AAAA,IACf,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAAA,EAEf,qBAAqB;AAAA,IACnB,WAAW,CAAC,OAAO,UACjB,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACa;AAAA,MAAM;AAAA,MAAW;AAAA,IAAA,GAChC;AAAA,IAEF,yBAAyB;AAAA,IACzB,qBAAqB;AAAA,EAAA;AAAA,EAEvB,sBAAsB;AAAA,IACpB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,qBAAqB,CAAC,cAAc,aAClC,WACI,eACE,6DAAkE,YAAY,KAC9E,mDACF,eACE,oDAAyD,YAAY,KACrE;AAAA,EAAA;AAAA,EAEV,gBAAgB;AAAA,IACd,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,qBAAqB,CAAC,mBAAmB,aACvC,WACI,oBACE,uEAA4E,iBAAiB,KAC7F,6DACF,oBACE,8DAAmE,iBAAiB,KACpF;AAAA,EAAA;AAAA,EAEV,eAAe;AAAA,IACb,iBACE,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,MAAE;AAAA,IAAA,GAGR;AAAA,IAEF,kBAAkB;AAAA,EAAA;AAAA,EAEpB,UAAU;AAAA,IACR,sBAAsB,CAAC,SACrB,SAAS,UACL,aACA,SAAS,YACP,aACA;AAAA,EAAA;AAAA,EAEV,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAAA,EAET,kBAAkB;AAAA,IAChB,0BAA0B;AAAA,EAAA;AAAA,EAE5B,OAAO;AAAA,IACL,kBAAkB;AAAA,EAAA;AAAA,EAEpB,OAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,EAAA;AAAA,EAErB,cAAc;AAAA,IACZ,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,gBAAgB;AAAA,EAAA;AAAA,EAElB,QAAQ;AAAA,IACN,cAAc;AAAA,EAAA;AAAA,EAEhB,aAAa;AAAA,IACX,mBAAmB;AAAA,EAAA;AAAA,EAErB,WAAW;AAAA,IACT,yBAAyB,CAAC,YAAY,kBACpC,kBAAkB,OACd,2CAAgD,UAAU,OAC1D,kCAAuC,UAAU,gBAC/C,kBAAkB,QAAQ,cAAc,aAC1C;AAAA,EAAA;AAAA,EAER,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAET,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAEX;"}
|
package/dist/locales/pt.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"pt.js","sources":["../../src/locales/pt.tsx"],"sourcesContent":["import { pt as dateFnsPt } from \"date-fns/locale/pt\";\n\nimport type { LocalizationObject } from \"../providers/LocalizationProvider\";\n\n/** `pt` locale. */\nexport const pt: LocalizationObject = {\n languageTag: \"pt-PT\",\n dateFnsLocale: dateFnsPt,\n AlertDialog: {\n okText: \"OK\",\n },\n Calendar: {\n previousMonthLabel: \"Mês anterior\",\n nextMonthLabel: \"Próximo mês\",\n },\n CloseButton: {\n \"aria-label\": \"Fechar\",\n },\n CommandMenu: {\n searchPlaceholder: \"Pesquisar…\",\n listLabel: \"Sugestões\",\n loadingLabel: \"A carregar…\",\n emptyMessage: \"Nenhum resultado encontrado.\",\n },\n CommandMenuDialog: {\n title: \"Paleta de comandos\",\n description: \"Pesquise por um comando…\",\n },\n ConfirmDialog: {\n cancelText: \"Cancelar\",\n },\n ControlCode: {\n visuallyHiddenPrefix: \"Campo\",\n },\n DataTable: {\n emptyMessage: \"Nada a mostrar.\",\n },\n DataTableFilter: {\n \"aria-label\": \"Filtro da tabela\",\n placeholder: \"Filtrar\",\n },\n DataTablePagination: {\n rowsRange: (range, total) => (\n <>\n Linhas {range} de {total}\n </>\n ),\n previousPageButtonLabel: \"Página anterior\",\n nextPageButtonLabel: \"Próxima página\",\n },\n DataTableRowsPerPage: {\n label: \"Linhas por página\",\n },\n DateInput: {\n placeholder: \"dia/mês/ano\",\n formatDescription: \"Introduza a data no formato DD/MM/AAAA\",\n calendarButtonLabel: (selectedDate, editable) =>\n editable\n ? selectedDate\n ? `Abrir calendário para alterar data selecionada: ${selectedDate}`\n : \"Abrir calendário para selecionar data\"\n : selectedDate\n ? `Abrir calendário com data selecionada: ${selectedDate}`\n : \"Abrir calendário sem data selecionada\",\n },\n DateRangeInput: {\n startInputLabel: \"Data de início\",\n endInputLabel: \"Data de fim\",\n calendarButtonLabel: (selectedDateRange, editable) =>\n editable\n ? selectedDateRange\n ? `Abrir calendário para alterar intervalo de datas selecionado: ${selectedDateRange}`\n : \"Abrir calendário para selecionar intervalo de datas\"\n : selectedDateRange\n ? `Abrir calendário com intervalo de datas selecionado: ${selectedDateRange}`\n : \"Abrir calendário sem intervalo de datas selecionado\",\n },\n ErrorBoundary: {\n fallbackMessage: (\n <>\n Algo correu mal.\n <br />\n Pressione o botão à direita para tentar novamente. Se o problema\n persistir, volte a tentar mais tarde.\n </>\n ),\n resetButtonLabel: \"Tentar novamente\",\n },\n Feedback: {\n visuallyHiddenPrefix: (type) =>\n type === \"error\" ? \"Erro:\" : type === \"warning\" ? \"Alerta:\" : null,\n },\n FeedbackPopover: {\n label: \"Mostrar observações\",\n },\n FieldGroupHeader: {\n visuallyHiddenCodePrefix: \"Grupo\",\n },\n Input: {\n clearButtonLabel: \"Limpar\",\n },\n Label: {\n requiredIconLabel: \"Requerido\",\n helperButtonLabel: \"Mostrar ajuda\",\n },\n NumericInput: {\n decimalSeparator: \",\",\n groupingStyle: \"thousand\",\n groupSeparator: \"\\u00A0\",\n },\n Select: {\n optionsLabel: \"Opções\",\n },\n TableColumn: {\n helperButtonLabel: \"Mostrar ajuda\",\n },\n TableHead: {\n sortByColumnDescription: (columnName, sortDirection) =>\n sortDirection === null\n ? `Deixar de ordenar tabela pela coluna “${columnName}”`\n : `Ordenar tabela pela coluna “${columnName}” em ordem ${\n sortDirection === \"asc\" ? \"ascendente\" : \"descendente\"\n }`,\n },\n ToastProvider: {\n label: \"Notificação\",\n },\n ToastViewport: {\n label: \"Notificações ({hotkey})\",\n },\n};\n"],"names":["dateFnsPt"],"mappings":";;AAKO,MAAM,KAAyB;AAAA,EACpC,aAAa;AAAA,EACb,eAAeA;AAAAA,EACf,aAAa;AAAA,IACX,QAAQ;AAAA,EAAA;AAAA,EAEV,UAAU;AAAA,IACR,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,EAAA;AAAA,EAElB,aAAa;AAAA,IACX,cAAc;AAAA,EAAA;AAAA,EAEhB,aAAa;AAAA,IACX,mBAAmB;AAAA,IACnB,WAAW;AAAA,IACX,cAAc;AAAA,IACd,cAAc;AAAA,EAAA;AAAA,EAEhB,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,aAAa;AAAA,EAAA;AAAA,EAEf,eAAe;AAAA,IACb,YAAY;AAAA,EAAA;AAAA,EAEd,aAAa;AAAA,IACX,sBAAsB;AAAA,EAAA;AAAA,EAExB,WAAW;AAAA,IACT,cAAc;AAAA,EAAA;AAAA,EAEhB,iBAAiB;AAAA,IACf,cAAc;AAAA,IACd,aAAa;AAAA,EAAA;AAAA,EAEf,qBAAqB;AAAA,IACnB,WAAW,CAAC,OAAO,UACjB,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACa;AAAA,MAAM;AAAA,MAAU;AAAA,IAAA,GAC/B;AAAA,IAEF,yBAAyB;AAAA,IACzB,qBAAqB;AAAA,EAAA;AAAA,EAEvB,sBAAsB;AAAA,IACpB,OAAO;AAAA,EAAA;AAAA,EAET,WAAW;AAAA,IACT,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,qBAAqB,CAAC,cAAc,aAClC,WACI,eACE,mDAAmD,YAAY,KAC/D,0CACF,eACE,0CAA0C,YAAY,KACtD;AAAA,EAAA;AAAA,EAEV,gBAAgB;AAAA,IACd,iBAAiB;AAAA,IACjB,eAAe;AAAA,IACf,qBAAqB,CAAC,mBAAmB,aACvC,WACI,oBACE,iEAAiE,iBAAiB,KAClF,wDACF,oBACE,wDAAwD,iBAAiB,KACzE;AAAA,EAAA;AAAA,EAEV,eAAe;AAAA,IACb,iBACE,qBAAA,UAAA,EAAE,UAAA;AAAA,MAAA;AAAA,0BAEC,MAAA,EAAG;AAAA,MAAE;AAAA,IAAA,GAGR;AAAA,IAEF,kBAAkB;AAAA,EAAA;AAAA,EAEpB,UAAU;AAAA,IACR,sBAAsB,CAAC,SACrB,SAAS,UAAU,UAAU,SAAS,YAAY,YAAY;AAAA,EAAA;AAAA,EAElE,iBAAiB;AAAA,IACf,OAAO;AAAA,EAAA;AAAA,EAET,kBAAkB;AAAA,IAChB,0BAA0B;AAAA,EAAA;AAAA,EAE5B,OAAO;AAAA,IACL,kBAAkB;AAAA,EAAA;AAAA,EAEpB,OAAO;AAAA,IACL,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,EAAA;AAAA,EAErB,cAAc;AAAA,IACZ,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf,gBAAgB;AAAA,EAAA;AAAA,EAElB,QAAQ;AAAA,IACN,cAAc;AAAA,EAAA;AAAA,EAEhB,aAAa;AAAA,IACX,mBAAmB;AAAA,EAAA;AAAA,EAErB,WAAW;AAAA,IACT,yBAAyB,CAAC,YAAY,kBACpC,kBAAkB,OACd,yCAAyC,UAAU,MACnD,+BAA+B,UAAU,cACvC,kBAAkB,QAAQ,eAAe,aAC3C;AAAA,EAAA;AAAA,EAER,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAAA,EAET,eAAe;AAAA,IACb,OAAO;AAAA,EAAA;AAEX;"}
|