@veeqo/ui 6.0.0-beta.8 → 6.0.0
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/README.md +4 -3
- package/dist/components/Accordion/Accordion.d.ts +2 -11
- package/dist/components/Accordion/styled.d.ts +12 -1
- package/dist/components/Accordion/types.d.ts +15 -0
- package/dist/components/ActionMenu/ActionMenu.d.ts +16 -0
- package/dist/components/ActionMenu/index.d.ts +1 -0
- package/dist/components/ActionMenu/styled.d.ts +3 -0
- package/dist/components/Alert/Alert.d.ts +3 -0
- package/dist/components/Alert/constants.d.ts +6 -0
- package/dist/components/Alert/index.d.ts +1 -0
- package/dist/components/Alert/styled.d.ts +4 -0
- package/dist/components/Alert/types.d.ts +20 -0
- package/dist/components/Anchor/Anchor.d.ts +6 -7
- package/dist/components/AnimatedDropdown/AnimatedDropdown.d.ts +1 -1
- package/dist/components/AnimatedDropdown/components/BasicDropdown.d.ts +6 -0
- package/dist/components/AnimatedDropdown/components/styled.d.ts +1 -14
- package/dist/components/AnimatedDropdown/styled.d.ts +9 -1
- package/dist/components/AnimatedDropdown/types.d.ts +6 -8
- package/dist/components/Choice/Choice.d.ts +5 -1
- package/dist/components/Choice/components/styled.d.ts +0 -1
- package/dist/components/DataTable/DataTable.d.ts +1 -1
- package/dist/components/DataTable/components/ColumnDivider.d.ts +11 -0
- package/dist/components/DataTable/hooks/useColumnWidths.d.ts +10 -0
- package/dist/components/DataTable/hooks/useColumns.d.ts +54 -4
- package/dist/components/DataTable/renderers/renderHeader.d.ts +6 -2
- package/dist/components/DataTable/types.d.ts +12 -0
- package/dist/components/DataTable/utils/customEventEmitter.d.ts +1 -0
- package/dist/components/DateRangeInput/DateRangeInput.d.ts +21 -0
- package/dist/components/DateRangeInput/index.d.ts +2 -0
- package/dist/components/DateRangeInput/styled.d.ts +4 -0
- package/dist/components/DateRangePicker/DateRangePicker.d.ts +3 -0
- package/dist/components/DateRangePicker/DateRangePicker.test.d.ts +1 -0
- package/dist/components/DateRangePicker/components/ComparePreviousPeriod.d.ts +8 -0
- package/dist/components/DateRangePicker/components/ComparePreviousPeriod.test.d.ts +1 -0
- package/dist/components/DateRangePicker/components/Divider.d.ts +1 -0
- package/dist/components/DateRangePicker/components/constants.d.ts +4 -0
- package/dist/components/DateRangePicker/constants.d.ts +25 -0
- package/dist/components/DateRangePicker/index.d.ts +3 -0
- package/dist/components/DateRangePicker/types.d.ts +37 -0
- package/dist/components/DateRangePicker/utils.d.ts +6 -0
- package/dist/components/DateRangePicker/utils.test.d.ts +1 -0
- package/dist/components/DimensionsInput/styled.d.ts +1 -1
- package/dist/components/Dropdown/Dropdown.d.ts +3 -0
- package/dist/components/Dropdown/Dropdown.test.d.ts +1 -0
- package/dist/components/Dropdown/DropdownPopover.d.ts +3 -0
- package/dist/components/Dropdown/index.d.ts +1 -0
- package/dist/components/Dropdown/styled.d.ts +11 -0
- package/dist/components/Dropdown/types.d.ts +16 -0
- package/dist/components/FilterTag/FilterTag.d.ts +1 -1
- package/dist/components/FilterTag/styled.d.ts +4 -2
- package/dist/components/FilterTag/types.d.ts +3 -0
- package/dist/components/Modal/types.d.ts +3 -3
- package/dist/components/Pagination/styled.d.ts +1 -1
- package/dist/components/Popover/Popover.d.ts +1 -1
- package/dist/components/Popover/hooks/useHandleFocus.d.ts +3 -4
- package/dist/components/Popover/hooks/useUpdateAriaAnchor.d.ts +1 -2
- package/dist/components/Popover/types.d.ts +6 -7
- package/dist/components/PriceInput/styled.d.ts +1 -1
- package/dist/components/Radio/Radio.d.ts +3 -1
- package/dist/components/RangeCalendar/RangeCalendar.d.ts +10 -0
- package/dist/components/RangeCalendar/RangeCalendar.test.d.ts +1 -0
- package/dist/components/RangeCalendar/components/CalendarGrid.d.ts +3 -0
- package/dist/components/RangeCalendar/components/StyledRangeCalendar/StyledRangeCalendar.d.ts +2 -0
- package/dist/components/RangeCalendar/components/StyledRangeCalendar/buttonStyles.d.ts +1 -0
- package/dist/components/RangeCalendar/components/StyledRangeCalendar/calendarCellStyles.d.ts +1 -0
- package/dist/components/RangeCalendar/components/StyledRangeCalendar/headerStyles.d.ts +1 -0
- package/dist/components/RangeCalendar/components/StyledRangeCalendar/index.d.ts +1 -0
- package/dist/components/RangeCalendar/components/utils.d.ts +2 -0
- package/dist/components/RangeCalendar/index.d.ts +1 -0
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.d.ts +20 -0
- package/dist/components/ScreenReaderOnly/ScreenReaderOnly.test.d.ts +2 -0
- package/dist/components/ScreenReaderOnly/index.d.ts +1 -0
- package/dist/components/Search/Search.d.ts +2 -27
- package/dist/components/Search/styled.d.ts +1 -1
- package/dist/components/Select/Select.d.ts +3 -3
- package/dist/components/Skeleton/Skeleton.d.ts +7 -0
- package/dist/components/Skeleton/Skeleton.test.d.ts +1 -0
- package/dist/components/Skeleton/index.d.ts +1 -0
- package/dist/components/TextField/TextField.d.ts +1 -1
- package/dist/components/TextField/index.d.ts +1 -1
- package/dist/components/TextField/types.d.ts +1 -1
- package/dist/components/Toggle/Toggle.d.ts +1 -1
- package/dist/components/Toggle/styled.d.ts +1 -1
- package/dist/components/Toggle/types.d.ts +2 -1
- package/dist/components/UploadFile/components/UploadedFile/UploadedFile.d.ts +2 -1
- package/dist/components/ViewTab/ViewTab.d.ts +13 -2
- package/dist/components/ViewTab/types.d.ts +3 -5
- package/dist/components/WeightInput/styled.d.ts +1 -1
- package/dist/components/index.d.ts +8 -3
- package/dist/hoc/withLabels/withLabels.d.ts +1 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/useDropdown.d.ts +5 -1
- package/dist/hooks/useId.d.ts +4 -0
- package/dist/hooks/useId.test.d.ts +1 -0
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/tempIcons/RecommendIcon.d.ts +2 -0
- package/dist/tempIcons/WarningIcon.d.ts +2 -0
- package/dist/theme/index.d.ts +1 -312
- package/dist/theme/modules/text.d.ts +10 -311
- package/dist/utils/blockInvalidCharacters.d.ts +1 -0
- package/dist/utils/generateId.d.ts +1 -1
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/invalidCharactersNumeric.d.ts +1 -0
- package/dist/utils/isExternalLink.d.ts +9 -0
- package/dist/utils/isExternalLink.test.d.ts +1 -0
- package/package.json +16 -14
- package/dist/components/ActionList/ActionList.d.ts +0 -3
- package/dist/components/ActionList/index.d.ts +0 -1
- package/dist/components/ActionList/styled.d.ts +0 -36
- package/dist/components/ActionList/types.d.ts +0 -19
- package/dist/components/AnimatedDropdown/components/Dropdown.d.ts +0 -3
- package/dist/components/PageHeader/PageHeader.d.ts +0 -29
- package/dist/components/PageHeader/index.d.ts +0 -1
- package/dist/components/PageHeader/styled.d.ts +0 -23
- package/dist/components/PaginationRange/Items/Item/Item.d.ts +0 -3
- package/dist/components/PaginationRange/Items/Item/index.d.ts +0 -1
- package/dist/components/PaginationRange/Items/Item/styled.d.ts +0 -5
- package/dist/components/PaginationRange/Items/Item/types.d.ts +0 -5
- package/dist/components/PaginationRange/Items/Items.d.ts +0 -7
- package/dist/components/PaginationRange/Items/index.d.ts +0 -1
- package/dist/components/PaginationRange/PaginationRange.d.ts +0 -3
- package/dist/components/PaginationRange/index.d.ts +0 -1
- package/dist/components/PaginationRange/styled.d.ts +0 -2
- package/dist/components/PaginationRange/types.d.ts +0 -15
- /package/dist/components/{ActionList/ActionList.test.d.ts → ActionMenu/ActionMenu.test.d.ts} +0 -0
- /package/dist/components/{AnimatedDropdown/components/Dropdown.test.d.ts → Alert/Alert.test.d.ts} +0 -0
- /package/dist/components/{PageHeader/PageHeader.test.d.ts → AnimatedDropdown/components/BasicDropdown.test.d.ts} +0 -0
- /package/dist/components/{PaginationRange/PaginationRange.test.d.ts → DateRangeInput/DateRangeInput.test.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -10,15 +10,16 @@ In the longer term Icons and Integrations **WILL** be moved to their own library
|
|
|
10
10
|
|
|
11
11
|
### Links ⚓️
|
|
12
12
|
|
|
13
|
-
**This Library**: [Storybook 📋](https
|
|
13
|
+
**This Library**: [Storybook 📋](https://ui.veeqo.amazon.dev/?path=/docs/get-started-how-to-install--docs) | Playroom 🛝 (not deployed)
|
|
14
14
|
|
|
15
15
|
**Old Library**: [Storybook 📋](https://master.d1cz47hw90nvy2.amplifyapp.com/) | [Playroom 🛝](https://master.d1cz47hw90nvy2.amplifyapp.com/playroom)
|
|
16
16
|
|
|
17
17
|
## Getting Started
|
|
18
18
|
|
|
19
|
-
Setup should be simple, clone the repo and use npm to install all dependencies.
|
|
19
|
+
Setup should be simple, clone the repo and use `npm i` to install all dependencies.
|
|
20
20
|
|
|
21
|
-
Start storybook with `npm run storybook`,
|
|
21
|
+
- Start storybook with `npm run storybook`, which starts on `localhost:3000`
|
|
22
|
+
- Start Playroom with `npm run playroom:start`, which starts on `localhost:9000`
|
|
22
23
|
|
|
23
24
|
### Testing
|
|
24
25
|
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
import { FC
|
|
2
|
-
|
|
3
|
-
children: ReactNode;
|
|
4
|
-
label: string;
|
|
5
|
-
iconSlot?: ReactElement;
|
|
6
|
-
glyphColor?: string;
|
|
7
|
-
className?: string;
|
|
8
|
-
timeout?: number;
|
|
9
|
-
description?: string;
|
|
10
|
-
shouldOpenOnMount?: boolean;
|
|
11
|
-
}
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { AccordionProps } from './types';
|
|
12
3
|
export declare const Accordion: FC<AccordionProps>;
|
|
@@ -22,4 +22,15 @@ declare const AccordionContent: import("styled-components").StyledComponent<impo
|
|
|
22
22
|
forwardedAs?: string | import("react").ComponentType<any> | undefined;
|
|
23
23
|
}>, any, {}, never>;
|
|
24
24
|
declare const AccordionDetails: import("styled-components").StyledComponent<"details", any, {}, never>;
|
|
25
|
-
|
|
25
|
+
declare const UnstyledAccordionContent: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<{
|
|
26
|
+
[x: string]: any;
|
|
27
|
+
[x: number]: any;
|
|
28
|
+
[x: symbol]: any;
|
|
29
|
+
} & {
|
|
30
|
+
theme?: any;
|
|
31
|
+
} & {
|
|
32
|
+
as?: string | import("react").ComponentType<any> | undefined;
|
|
33
|
+
forwardedAs?: string | import("react").ComponentType<any> | undefined;
|
|
34
|
+
}>, any, {}, never>;
|
|
35
|
+
declare const UnstyledAccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
|
|
36
|
+
export { AccordionSummary, Top, Text, Left, Right, Description, AccordionDetails, AccordionContent, UnstyledAccordionContent, UnstyledAccordionSummary, };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { TextVariant } from '../Text/types';
|
|
3
|
+
export type AccordionProps = {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
label: string;
|
|
6
|
+
iconSlot?: ReactElement;
|
|
7
|
+
glyphColor?: string;
|
|
8
|
+
className?: string;
|
|
9
|
+
timeout?: number;
|
|
10
|
+
description?: string;
|
|
11
|
+
shouldOpenOnMount?: boolean;
|
|
12
|
+
variant?: AccordianVariants;
|
|
13
|
+
summaryTextVariant?: TextVariant;
|
|
14
|
+
};
|
|
15
|
+
export type AccordianVariants = 'default' | 'unstyled';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { MenuItemProps } from 'react-aria-components';
|
|
3
|
+
import { ButtonProps } from '../Button/types';
|
|
4
|
+
export type ActionMenuProps = {
|
|
5
|
+
id?: string;
|
|
6
|
+
menuLabel?: string;
|
|
7
|
+
actions?: MenuItemProps[];
|
|
8
|
+
ctaProps: ButtonProps;
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
};
|
|
11
|
+
export declare const ActionMenu: {
|
|
12
|
+
({ id, menuLabel, ctaProps, actions, children }: ActionMenuProps): React.JSX.Element;
|
|
13
|
+
Item: import("styled-components").StyledComponent<(<T extends object>(props: MenuItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>), any, {}, never>;
|
|
14
|
+
Section: import("styled-components").StyledComponent<(<T_1 extends object>(props: import("react-aria-components").SectionProps<T_1> & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>), any, {}, never>;
|
|
15
|
+
Text: React.ForwardRefExoticComponent<import("react-aria-components").TextProps & React.RefAttributes<HTMLElement>>;
|
|
16
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ActionMenu } from './ActionMenu';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const MenuItem: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").MenuItemProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;
|
|
3
|
+
export declare const Section: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").SectionProps<T> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { AlertColours, AlertSizes, AlertVariants } from './types';
|
|
3
|
+
export declare const SpacingMap: Record<AlertSizes, string>;
|
|
4
|
+
export declare const IconSizeMap: Record<AlertSizes, string>;
|
|
5
|
+
export declare const IconMap: Record<AlertVariants, (props: any) => React.JSX.Element>;
|
|
6
|
+
export declare const ColourMap: Record<AlertVariants, AlertColours>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Alert } from './Alert';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { Action } from '../Modal/types';
|
|
3
|
+
export type AlertProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
4
|
+
size?: AlertSizes;
|
|
5
|
+
variant?: AlertVariants;
|
|
6
|
+
colours?: AlertColours;
|
|
7
|
+
rightActions?: Action[];
|
|
8
|
+
title?: string;
|
|
9
|
+
titleSlot?: ReactNode;
|
|
10
|
+
message?: string;
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
iconSlot?: (props: any) => React.JSX.Element;
|
|
13
|
+
onClickClose?: () => void;
|
|
14
|
+
};
|
|
15
|
+
export type AlertVariants = 'default' | 'error' | 'success' | 'info' | 'warning' | 'recommend';
|
|
16
|
+
export type AlertSizes = 'base' | 'sm' | 'xs';
|
|
17
|
+
export type AlertColours = {
|
|
18
|
+
primary: string;
|
|
19
|
+
background: string;
|
|
20
|
+
};
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
2
|
-
export
|
|
1
|
+
import React, { ReactNode, AnchorHTMLAttributes } from 'react';
|
|
2
|
+
export type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
3
3
|
children?: ReactNode;
|
|
4
4
|
href: string;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
export declare const Anchor: ({ children, className, text, href, target }: AnchorProps) => React.JSX.Element;
|
|
5
|
+
rel?: string;
|
|
6
|
+
allowedHostnames?: string[];
|
|
7
|
+
};
|
|
8
|
+
export declare const Anchor: ({ children, href, rel, allowedHostnames, ...props }: AnchorProps) => React.JSX.Element;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { AnimatedDropdownProps } from './types';
|
|
3
|
-
export declare const AnimatedDropdown: ({
|
|
3
|
+
export declare const AnimatedDropdown: ({ cta, shouldShowDropdown, children, className, reversed, onClickAway, timeout, transitionClassnames, onClick, onMouseEnter, onMouseLeave, }: AnimatedDropdownProps) => React.JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const BasicDropdown: React.ForwardRefExoticComponent<import("../../types").EventHandlerProps & {
|
|
3
|
+
className?: string | undefined;
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
role?: React.AriaRole | undefined;
|
|
6
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -1,14 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export declare const DropdownContainer: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<{
|
|
3
|
-
[x: string]: any;
|
|
4
|
-
[x: number]: any;
|
|
5
|
-
[x: symbol]: any;
|
|
6
|
-
} & {
|
|
7
|
-
theme?: any;
|
|
8
|
-
} & {
|
|
9
|
-
as?: string | import("react").ComponentType<any> | undefined;
|
|
10
|
-
forwardedAs?: string | import("react").ComponentType<any> | undefined;
|
|
11
|
-
}>, any, {
|
|
12
|
-
reversed?: boolean | undefined;
|
|
13
|
-
useAnchorWidth?: boolean | undefined;
|
|
14
|
-
}, never>;
|
|
1
|
+
export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
3
|
declare const Wrap: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
-
|
|
4
|
+
declare const Dropdown: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../types").EventHandlerProps & {
|
|
5
|
+
className?: string | undefined;
|
|
6
|
+
children: import("react").ReactNode;
|
|
7
|
+
role?: import("react").AriaRole | undefined;
|
|
8
|
+
} & import("react").RefAttributes<HTMLDivElement>>, any, {
|
|
9
|
+
reversed?: boolean | undefined;
|
|
10
|
+
}, never>;
|
|
11
|
+
export { Wrap, Dropdown, Container };
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { EventHandlerProps } from '../types';
|
|
3
|
-
|
|
4
|
-
export type BasicDropdownProps = {
|
|
3
|
+
export type BasicDropdownProps = EventHandlerProps & {
|
|
5
4
|
className?: string;
|
|
6
5
|
children: ReactNode;
|
|
7
|
-
|
|
8
|
-
}
|
|
9
|
-
export type AnimatedDropdownProps =
|
|
10
|
-
id?: string;
|
|
6
|
+
role?: HTMLAttributes<HTMLDivElement>['role'];
|
|
7
|
+
};
|
|
8
|
+
export type AnimatedDropdownProps = BasicDropdownProps & {
|
|
11
9
|
cta?: ReactNode;
|
|
12
10
|
shouldShowDropdown: boolean;
|
|
13
11
|
timeout?: number;
|
|
14
12
|
transitionClassnames?: string;
|
|
13
|
+
onClickAway?: (event: Event) => void;
|
|
15
14
|
reversed?: boolean;
|
|
16
|
-
onShouldClose: () => void;
|
|
17
15
|
};
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React, { ReactNode } from 'react';
|
|
2
|
+
import { TextVariant } from '../Text/types';
|
|
2
3
|
export interface ForwardedChoiceProps {
|
|
4
|
+
className?: string;
|
|
3
5
|
disabled?: boolean;
|
|
4
6
|
label?: string;
|
|
5
7
|
hint?: string;
|
|
@@ -9,9 +11,11 @@ export interface ForwardedChoiceProps {
|
|
|
9
11
|
Badge?: ReactNode;
|
|
10
12
|
Accessory?: ReactNode;
|
|
11
13
|
Footer?: ReactNode;
|
|
14
|
+
inputPosition?: 'left' | 'right';
|
|
15
|
+
labelVariant?: TextVariant;
|
|
12
16
|
}
|
|
13
17
|
export interface ChoiceProps extends ForwardedChoiceProps {
|
|
14
18
|
id: string;
|
|
15
19
|
children: ReactNode;
|
|
16
20
|
}
|
|
17
|
-
export declare const Choice: ({ id, label, hint, tooltip, error, bordered, Badge, Accessory, Footer, children, disabled, }: ChoiceProps) => React.JSX.Element;
|
|
21
|
+
export declare const Choice: ({ id, className, label, hint, tooltip, error, bordered, Badge, Accessory, Footer, children, disabled, labelVariant, inputPosition, }: ChoiceProps) => React.JSX.Element;
|
|
@@ -5,7 +5,6 @@ export interface InputLayoutProps {
|
|
|
5
5
|
export declare const InputLayout: import("styled-components").StyledComponent<"div", any, InputLayoutProps, never>;
|
|
6
6
|
export declare const AccessoryLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
7
|
export declare const TextLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
-
export declare const LabelText: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
9
8
|
export declare const HintText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
9
|
export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
10
|
export declare const Wrapper: import("styled-components").StyledComponent<"label", any, {
|
|
@@ -4,7 +4,7 @@ import { ColumnMenu } from './components/ColumnMenu';
|
|
|
4
4
|
import { SelectionCell } from './components/SelectionCell';
|
|
5
5
|
import { SelectionHeader } from './components/SelectionHeader';
|
|
6
6
|
export declare const DataTable: {
|
|
7
|
-
({ ActionBarSlot, borderMode, columns, emptyState, expandedRowIds, loading, loadingRowCount, onChangeSort, rows, disabledRowIds, selectionMode, selectionState, setExpanded, sortState, stripingMode, enableStickyHeader, }: DataTableProps): React.JSX.Element;
|
|
7
|
+
({ ActionBarSlot, borderMode, columns: initialColumns, emptyState, expandedRowIds, loading, loadingRowCount, onChangeSort, rows, disabledRowIds, selectionMode, selectionState, setExpanded, sortState, stripingMode, enableStickyHeader, resizeableColumns, }: DataTableProps): React.JSX.Element;
|
|
8
8
|
defaultProps: {
|
|
9
9
|
loading: boolean;
|
|
10
10
|
loadingRowCount: number;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ColumnId, ColumnWidthHandler } from '../types';
|
|
3
|
+
export type ColumnDividerProps = {
|
|
4
|
+
columnId: ColumnId;
|
|
5
|
+
setColumnWidth?: ColumnWidthHandler;
|
|
6
|
+
};
|
|
7
|
+
export type CalculateWidthProps = {
|
|
8
|
+
event: MouseEvent;
|
|
9
|
+
};
|
|
10
|
+
export declare const ResizerBar: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
|
+
export declare const ColumnDivider: ({ columnId, setColumnWidth }: ColumnDividerProps) => React.JSX.Element;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
import { ColumnConfigs, ColumnWidthsType, ColumnWidthHandler, ColumnId } from '../types';
|
|
3
|
+
export declare const useColumnWidths: ({ tableRef, columns, columnIds, }: {
|
|
4
|
+
tableRef: RefObject<HTMLElement>;
|
|
5
|
+
columns: ColumnConfigs;
|
|
6
|
+
columnIds: ColumnId[];
|
|
7
|
+
}) => {
|
|
8
|
+
setColumnWidth: ColumnWidthHandler;
|
|
9
|
+
columnWidths: ColumnWidthsType;
|
|
10
|
+
};
|
|
@@ -1,6 +1,56 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
1
2
|
import { ColumnConfigs } from '../types';
|
|
2
|
-
export declare function useColumns(columns: ColumnConfigs): {
|
|
3
|
-
visible:
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
export declare function useColumns(columns: ColumnConfigs, tableRef: RefObject<HTMLElement>): {
|
|
4
|
+
visible: {
|
|
5
|
+
width: import("../types").ColumnWidth | import("../types").ColumnWidthBounded | undefined;
|
|
6
|
+
id: import("../types").ColumnId;
|
|
7
|
+
align?: import("../types").ColumnAlignment | undefined;
|
|
8
|
+
hidden?: boolean | undefined;
|
|
9
|
+
icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
10
|
+
pinned?: import("../types").ColumnPinned | undefined;
|
|
11
|
+
sortable?: boolean | undefined;
|
|
12
|
+
spacing?: keyof import("../../Stack/types").SizeScale | undefined;
|
|
13
|
+
span?: number | undefined;
|
|
14
|
+
title?: string | undefined;
|
|
15
|
+
tooltip?: string | undefined;
|
|
16
|
+
renderCell: import("../types").CellRenderer;
|
|
17
|
+
renderFooter?: import("../types").FooterRenderer | undefined;
|
|
18
|
+
renderHeader?: import("../types").HeaderRenderer | undefined;
|
|
19
|
+
renderNestedCell?: import("../types").NestedCellRenderer | undefined;
|
|
20
|
+
}[];
|
|
21
|
+
pinnedLeft: {
|
|
22
|
+
width: import("../types").ColumnWidth | import("../types").ColumnWidthBounded | undefined;
|
|
23
|
+
id: import("../types").ColumnId;
|
|
24
|
+
align?: import("../types").ColumnAlignment | undefined;
|
|
25
|
+
hidden?: boolean | undefined;
|
|
26
|
+
icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
27
|
+
pinned?: import("../types").ColumnPinned | undefined;
|
|
28
|
+
sortable?: boolean | undefined;
|
|
29
|
+
spacing?: keyof import("../../Stack/types").SizeScale | undefined;
|
|
30
|
+
span?: number | undefined;
|
|
31
|
+
title?: string | undefined;
|
|
32
|
+
tooltip?: string | undefined;
|
|
33
|
+
renderCell: import("../types").CellRenderer;
|
|
34
|
+
renderFooter?: import("../types").FooterRenderer | undefined;
|
|
35
|
+
renderHeader?: import("../types").HeaderRenderer | undefined;
|
|
36
|
+
renderNestedCell?: import("../types").NestedCellRenderer | undefined;
|
|
37
|
+
}[];
|
|
38
|
+
pinnedRight: {
|
|
39
|
+
width: import("../types").ColumnWidth | import("../types").ColumnWidthBounded | undefined;
|
|
40
|
+
id: import("../types").ColumnId;
|
|
41
|
+
align?: import("../types").ColumnAlignment | undefined;
|
|
42
|
+
hidden?: boolean | undefined;
|
|
43
|
+
icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
|
|
44
|
+
pinned?: import("../types").ColumnPinned | undefined;
|
|
45
|
+
sortable?: boolean | undefined;
|
|
46
|
+
spacing?: keyof import("../../Stack/types").SizeScale | undefined;
|
|
47
|
+
span?: number | undefined;
|
|
48
|
+
title?: string | undefined;
|
|
49
|
+
tooltip?: string | undefined;
|
|
50
|
+
renderCell: import("../types").CellRenderer;
|
|
51
|
+
renderFooter?: import("../types").FooterRenderer | undefined;
|
|
52
|
+
renderHeader?: import("../types").HeaderRenderer | undefined;
|
|
53
|
+
renderNestedCell?: import("../types").NestedCellRenderer | undefined;
|
|
54
|
+
}[];
|
|
55
|
+
setColumnWidth: import("../types").ColumnWidthHandler;
|
|
6
56
|
};
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { ColumnConfig, SortState, SortChangeHandler } from '../types';
|
|
2
|
+
import { ColumnConfig, SortState, SortChangeHandler, ColumnWidthHandler } from '../types';
|
|
3
3
|
type RenderHeaderParameters = {
|
|
4
4
|
column: ColumnConfig;
|
|
5
5
|
sortState?: SortState;
|
|
6
6
|
onChangeSort?: SortChangeHandler;
|
|
7
|
+
resizeableColumns?: boolean;
|
|
8
|
+
setColumnWidth?: ColumnWidthHandler;
|
|
9
|
+
columnCount?: number;
|
|
10
|
+
columnI?: number;
|
|
7
11
|
};
|
|
8
12
|
/**
|
|
9
13
|
* Default renderer for table header cells
|
|
@@ -11,5 +15,5 @@ type RenderHeaderParameters = {
|
|
|
11
15
|
* @param column Column configuration object
|
|
12
16
|
* @returns Header cell instance
|
|
13
17
|
*/
|
|
14
|
-
export declare function renderHeader({ column, sortState, onChangeSort, }: RenderHeaderParameters): ReactNode;
|
|
18
|
+
export declare function renderHeader({ column, sortState, onChangeSort, resizeableColumns, setColumnWidth, columnCount, columnI, }: RenderHeaderParameters): ReactNode;
|
|
15
19
|
export {};
|
|
@@ -46,6 +46,11 @@ export type SortState = {
|
|
|
46
46
|
direction: SortDirection;
|
|
47
47
|
};
|
|
48
48
|
export type SortChangeHandler = (sortState: SortState) => void;
|
|
49
|
+
export type ColumnWidthState = {
|
|
50
|
+
columnId: ColumnId;
|
|
51
|
+
width: number | string;
|
|
52
|
+
};
|
|
53
|
+
export type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => void;
|
|
49
54
|
export type RowId = number | string;
|
|
50
55
|
export interface NestedTableRow {
|
|
51
56
|
id: RowId;
|
|
@@ -65,9 +70,11 @@ export interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellEleme
|
|
|
65
70
|
align?: ColumnAlignment;
|
|
66
71
|
spacing?: ColumnSpacing;
|
|
67
72
|
span?: number;
|
|
73
|
+
zIndex?: number;
|
|
68
74
|
}
|
|
69
75
|
export interface RendererHeaderProps extends HeaderProps {
|
|
70
76
|
key: string;
|
|
77
|
+
'data-columnid'?: string;
|
|
71
78
|
}
|
|
72
79
|
export interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {
|
|
73
80
|
selected: boolean;
|
|
@@ -112,5 +119,10 @@ export interface DataTableProps {
|
|
|
112
119
|
setExpanded?: SetExpandedAction;
|
|
113
120
|
sortState?: SortState;
|
|
114
121
|
stripingMode?: StripingMode;
|
|
122
|
+
resizeableColumns?: boolean;
|
|
115
123
|
}
|
|
124
|
+
export type ColumnWidthsType = {
|
|
125
|
+
[key: ColumnId]: ColumnWidthType;
|
|
126
|
+
};
|
|
127
|
+
export type ColumnWidthType = ColumnWidthFixed | ColumnWidthBounded | undefined;
|
|
116
128
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const customEventEmitter: (eventType: string, data: any) => void;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import React, { CSSProperties } from 'react';
|
|
2
|
+
import { DateValue } from 'react-aria-components';
|
|
3
|
+
export type DateRangeInputProps = {
|
|
4
|
+
id?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
style?: CSSProperties;
|
|
7
|
+
shouldForceLeadingZeros?: boolean;
|
|
8
|
+
hasError?: boolean;
|
|
9
|
+
startValue?: DateValue | null;
|
|
10
|
+
endValue?: DateValue | null;
|
|
11
|
+
minValue?: DateValue;
|
|
12
|
+
maxvalue?: DateValue;
|
|
13
|
+
isDisabled?: boolean;
|
|
14
|
+
isReadOnly?: boolean;
|
|
15
|
+
'aria-label'?: string;
|
|
16
|
+
'aria-labelledby'?: string;
|
|
17
|
+
'aria-describedby'?: string;
|
|
18
|
+
onChangeStartDate: (value: DateValue) => void;
|
|
19
|
+
onChangeEndDate: (value: DateValue) => void;
|
|
20
|
+
};
|
|
21
|
+
export declare const DateRangeInput: ({ id, className, style, shouldForceLeadingZeros, hasError, minValue, maxvalue, startValue, endValue, isDisabled, isReadOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, onChangeStartDate, onChangeEndDate, }: DateRangeInputProps) => React.JSX.Element;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const DateRangeGroup: import("styled-components").StyledComponent<(props: import("react-aria-components").GroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, any, {
|
|
3
|
+
$hasError?: boolean | undefined;
|
|
4
|
+
}, never>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DateRangePickerProps } from './types';
|
|
3
|
+
export declare const DateRangePicker: ({ className, style, isDisabled, isMultiMonth, showDatePresets, onReset, disabledRanges, selectedPreset, setSelectedPreset, selectedRange, setSelectedRange, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, ...previousPeriodProps }: DateRangePickerProps) => React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SelectOption } from '../../Select/Select';
|
|
3
|
+
export type ComparePreviousPeriodProps = {
|
|
4
|
+
options?: SelectOption[];
|
|
5
|
+
selectedPreviousPeriod: SelectOption | null;
|
|
6
|
+
setSelectedPreviousPeriod: (selected: SelectOption | null) => void;
|
|
7
|
+
};
|
|
8
|
+
export declare const ComparePreviousPeriod: ({ options, selectedPreviousPeriod, setSelectedPreviousPeriod, }: ComparePreviousPeriodProps) => React.JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { CalendarDate } from '@internationalized/date';
|
|
2
|
+
import { DateRange } from 'react-aria-components';
|
|
3
|
+
import { SelectOption } from '../Select/Select';
|
|
4
|
+
export declare enum DateRanges {
|
|
5
|
+
TODAY = "TODAY",
|
|
6
|
+
YESTERDAY = "YESTERDAY",
|
|
7
|
+
LAST_7_DAYS = "LAST_7_DAYS",
|
|
8
|
+
LAST_30_DAYS = "LAST_30_DAYS",
|
|
9
|
+
LAST_90_DAYS = "LAST_90_DAYS",
|
|
10
|
+
LAST_MONTH = "LAST_MONTH",
|
|
11
|
+
LAST_12_MONTHS = "LAST_12_MONTHS",
|
|
12
|
+
WEEK_TO_DATE = "WEEK_TO_DATE",
|
|
13
|
+
MONTH_TO_DATE = "MONTH_TO_DATE",
|
|
14
|
+
YEAR_TO_DATE = "YEAR_TO_DATE"
|
|
15
|
+
}
|
|
16
|
+
export declare const timeRangeToDateRange: (range: DateRange) => {
|
|
17
|
+
start: CalendarDate;
|
|
18
|
+
end: CalendarDate;
|
|
19
|
+
};
|
|
20
|
+
export declare const getDateRange: (option: DateRanges) => DateRange | null;
|
|
21
|
+
export declare const DATE_RANGE_OPTIONS: SelectOption[];
|
|
22
|
+
export declare const checkForMatchingPreset: (selectedRange: DateRange) => SelectOption | undefined;
|
|
23
|
+
export declare const DEFAULT_SELECTION = DateRanges.LAST_30_DAYS;
|
|
24
|
+
export declare const DEFAULT_RANGE: DateRange | null;
|
|
25
|
+
export declare const DEFAULT_PRESET: SelectOption;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
import type { DateRange } from 'react-aria-components';
|
|
3
|
+
import { CalendarDate } from '@internationalized/date';
|
|
4
|
+
import { ComparePreviousPeriodProps } from './components/ComparePreviousPeriod';
|
|
5
|
+
import { SelectOption } from '../Select/Select';
|
|
6
|
+
export type DateRangePickerProps = {
|
|
7
|
+
style?: CSSProperties;
|
|
8
|
+
className?: string;
|
|
9
|
+
isDisabled?: boolean;
|
|
10
|
+
isMultiMonth?: boolean;
|
|
11
|
+
showDatePresets?: boolean;
|
|
12
|
+
onReset?: () => void;
|
|
13
|
+
disabledRanges?: CalendarDate[][];
|
|
14
|
+
selectedPreset: SelectOption;
|
|
15
|
+
setSelectedPreset: (selected: SelectOption) => void;
|
|
16
|
+
selectedRange: DateRange | null;
|
|
17
|
+
setSelectedRange: (selected: DateRange | null) => void;
|
|
18
|
+
} & PreviousPeriodProps & RequiredLabel;
|
|
19
|
+
type RequiredLabel = {
|
|
20
|
+
'aria-describedby': string;
|
|
21
|
+
'aria-label'?: string;
|
|
22
|
+
} | {
|
|
23
|
+
'aria-describedby'?: string;
|
|
24
|
+
'aria-label': string;
|
|
25
|
+
};
|
|
26
|
+
type PreviousPeriodProps = {
|
|
27
|
+
showPreviousPeriod: true;
|
|
28
|
+
previousPeriodOptions?: ComparePreviousPeriodProps['options'];
|
|
29
|
+
selectedPreviousPeriod: ComparePreviousPeriodProps['selectedPreviousPeriod'];
|
|
30
|
+
setSelectedPreviousPeriod: ComparePreviousPeriodProps['setSelectedPreviousPeriod'];
|
|
31
|
+
} | {
|
|
32
|
+
showPreviousPeriod?: false;
|
|
33
|
+
previousPeriodOptions?: ComparePreviousPeriodProps['options'];
|
|
34
|
+
selectedPreviousPeriod?: ComparePreviousPeriodProps['selectedPreviousPeriod'];
|
|
35
|
+
setSelectedPreviousPeriod?: ComparePreviousPeriodProps['setSelectedPreviousPeriod'];
|
|
36
|
+
};
|
|
37
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { CalendarDate } from '@internationalized/date';
|
|
2
|
+
import { DateRange } from 'react-aria-components';
|
|
3
|
+
export declare const checkIfDateRangeInvalid: ({ disabledRanges, selectedRange, }: {
|
|
4
|
+
disabledRanges?: CalendarDate[][] | undefined;
|
|
5
|
+
selectedRange: DateRange | null;
|
|
6
|
+
}) => boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
declare const Row: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
declare const StyledTextField: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "
|
|
4
|
+
declare const StyledTextField: import("styled-components").StyledComponent<import("react").FC<Omit<import("../types").EventHandlerProps, "onChange" | "onKeyDown"> & Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onKeyDown" | "autoComplete"> & {
|
|
5
5
|
className?: string | undefined;
|
|
6
6
|
type?: import("../TextField/types").TextFieldType | undefined;
|
|
7
7
|
value?: string | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Dropdown } from './Dropdown';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const DropdownContainer: import("styled-components").StyledComponent<import("framer-motion").CustomDomComponent<{
|
|
3
|
+
[x: string]: any;
|
|
4
|
+
[x: number]: any;
|
|
5
|
+
[x: symbol]: any;
|
|
6
|
+
} & {
|
|
7
|
+
theme?: any;
|
|
8
|
+
} & {
|
|
9
|
+
as?: string | import("react").ComponentType<any> | undefined;
|
|
10
|
+
forwardedAs?: string | import("react").ComponentType<any> | undefined;
|
|
11
|
+
}>, any, {}, never>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { PopoverProps } from '../Popover/types';
|
|
3
|
+
import { ButtonProps } from '../Button/types';
|
|
4
|
+
export type BasicDropdownProps = {
|
|
5
|
+
className?: string;
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
reversed?: boolean;
|
|
8
|
+
} & PopoverProps;
|
|
9
|
+
export type DropdownProps = Omit<BasicDropdownProps, 'anchorElement' | 'onShouldClose'> & {
|
|
10
|
+
id: string;
|
|
11
|
+
shouldShow?: boolean;
|
|
12
|
+
setShouldShow?: (newValue: boolean) => void;
|
|
13
|
+
ctaIconSlot?: ReactElement;
|
|
14
|
+
ctaProps?: ButtonProps;
|
|
15
|
+
children?: ReactNode;
|
|
16
|
+
};
|