@wavv/ui 1.6.0 → 1.6.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/build/cjs/index.js +7 -7
- package/build/cjs/types/components/Audio.d.ts +1 -1
- package/build/cjs/types/components/Form.d.ts +4 -11
- package/build/cjs/types/components/Input.d.ts +3 -3
- package/build/cjs/types/components/Notification.d.ts +5 -7
- package/build/cjs/types/components/Spinner.d.ts +3 -3
- package/build/cjs/types/components/Table/Body.d.ts +4 -3
- package/build/cjs/types/components/Table/Table.d.ts +2 -2
- package/build/cjs/types/components/helpers/styledProps.d.ts +26 -0
- package/build/cjs/types/components/types.d.ts +7 -0
- package/build/cjs/types/index.d.ts +2 -1
- package/build/esm/index.js +8 -8
- package/build/esm/types/components/Audio.d.ts +1 -1
- package/build/esm/types/components/Form.d.ts +4 -11
- package/build/esm/types/components/Input.d.ts +3 -3
- package/build/esm/types/components/Notification.d.ts +5 -7
- package/build/esm/types/components/Spinner.d.ts +3 -3
- package/build/esm/types/components/Table/Body.d.ts +4 -3
- package/build/esm/types/components/Table/Table.d.ts +2 -2
- package/build/esm/types/components/helpers/styledProps.d.ts +26 -0
- package/build/esm/types/components/types.d.ts +7 -0
- package/build/esm/types/index.d.ts +2 -1
- package/build/index.d.ts +57 -26
- package/package.json +25 -25
|
@@ -25,5 +25,5 @@ type AudioProps = {
|
|
|
25
25
|
onPause?: (event: ChangeEvent<HTMLAudioElement>) => void;
|
|
26
26
|
onStop?: (event: ChangeEvent<HTMLAudioElement>) => void;
|
|
27
27
|
} & Margin & Width & As & HTMLProps<HTMLDivElement>;
|
|
28
|
-
declare const Audio: import("react").ForwardRefExoticComponent<
|
|
28
|
+
declare const Audio: import("react").ForwardRefExoticComponent<Omit<AudioProps, "ref"> & import("react").RefAttributes<AudioRef>>;
|
|
29
29
|
export default Audio;
|
|
@@ -11,7 +11,7 @@ declare const Form: {
|
|
|
11
11
|
Field({ children, inline, align, disabled }: FieldProps & {
|
|
12
12
|
children?: ReactNode;
|
|
13
13
|
}): JSX.Element;
|
|
14
|
-
Input: import("react").ForwardRefExoticComponent<(
|
|
14
|
+
Input: import("react").ForwardRefExoticComponent<(Omit<{
|
|
15
15
|
id?: string | undefined;
|
|
16
16
|
label?: string | undefined;
|
|
17
17
|
placeholder?: string | undefined;
|
|
@@ -43,10 +43,7 @@ declare const Form: {
|
|
|
43
43
|
} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").As & {
|
|
44
44
|
phone?: undefined;
|
|
45
45
|
onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
46
|
-
} & import("./types").Margin, "
|
|
47
|
-
phone?: undefined;
|
|
48
|
-
onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
49
|
-
}> | Pick<{
|
|
46
|
+
} & import("./types").Margin, "ref"> | Omit<{
|
|
50
47
|
id?: string | undefined;
|
|
51
48
|
label?: string | undefined;
|
|
52
49
|
placeholder?: string | undefined;
|
|
@@ -78,15 +75,11 @@ declare const Form: {
|
|
|
78
75
|
} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & import("./types").As & {
|
|
79
76
|
phone: true;
|
|
80
77
|
onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
|
|
81
|
-
} & import("./types").Margin, "
|
|
82
|
-
phone: true;
|
|
83
|
-
onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, formatted: string, raw: string) => void) | undefined;
|
|
84
|
-
}>) & import("react").RefAttributes<import("./types").InputRef>>;
|
|
78
|
+
} & import("./types").Margin, "ref">) & import("react").RefAttributes<import("./types").InputRef>>;
|
|
85
79
|
Dropdown: {
|
|
86
80
|
<OptionType extends import("./Dropdown").DropdownOption>({ onChange, onTextChange, afterShow, afterHide, onFocus, onBlur, onError, placeholder, placeholderColor, value, options, children, borderless, borderColor, backgroundColor, hideIcon, clearOnSelect, textOnly, width, height, isLoading, margin, marginTop, marginBottom, marginRight, marginLeft, label, id, name, trigger, centerY, centerX, offsetY, offsetX, direction, fontSize, description, disabled, invalid, search, filter, restrictInput, inputRef, optionsParent, ...props }: {
|
|
87
81
|
children?: ReactNode;
|
|
88
82
|
onChange?: ((item: OptionType | null) => void) | undefined;
|
|
89
|
-
/** Disables pointer events and reduces the opacity of the Group's contents */
|
|
90
83
|
onTextChange?: ((text: string) => void) | undefined;
|
|
91
84
|
value?: string | number | undefined;
|
|
92
85
|
afterShow?: (() => void) | undefined;
|
|
@@ -151,7 +144,7 @@ declare const Form: {
|
|
|
151
144
|
} & import("./types").Margin & import("./types").As & import("./FormControl").CheckboxAttributes) => JSX.Element;
|
|
152
145
|
Label: ({ children, iconLeft, iconRight, disabled, pill, ...rest }: {
|
|
153
146
|
children?: ReactNode;
|
|
154
|
-
iconLeft?: import("./helpers/getIcon").IconType | undefined;
|
|
147
|
+
iconLeft?: import("./helpers/getIcon").IconType | undefined; /** The function to be run after the form is submitted */
|
|
155
148
|
iconRight?: import("./helpers/getIcon").IconType | undefined;
|
|
156
149
|
pill?: boolean | undefined;
|
|
157
150
|
disabled?: boolean | undefined;
|
|
@@ -74,7 +74,7 @@ export type InputProps = {
|
|
|
74
74
|
/** A callback function that is run upon clicking the clear icon */
|
|
75
75
|
onClear?: OnClear;
|
|
76
76
|
} & DefaultInputProps & InputTypes & Margin;
|
|
77
|
-
declare const Input: import("react").ForwardRefExoticComponent<(
|
|
77
|
+
declare const Input: import("react").ForwardRefExoticComponent<(Omit<{
|
|
78
78
|
/** The id of the input element */
|
|
79
79
|
id?: string | undefined;
|
|
80
80
|
/** Places a label element above the input. The value will set the text of the label */
|
|
@@ -131,7 +131,7 @@ declare const Input: import("react").ForwardRefExoticComponent<(Pick<{
|
|
|
131
131
|
onClick?: ((event?: MouseEvent) => void) | undefined;
|
|
132
132
|
/** A callback function that is run upon clicking the clear icon */
|
|
133
133
|
onClear?: OnClear | undefined;
|
|
134
|
-
} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Default & Margin, "
|
|
134
|
+
} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Default & Margin, "ref"> | Omit<{
|
|
135
135
|
/** The id of the input element */
|
|
136
136
|
id?: string | undefined;
|
|
137
137
|
/** Places a label element above the input. The value will set the text of the label */
|
|
@@ -188,5 +188,5 @@ declare const Input: import("react").ForwardRefExoticComponent<(Pick<{
|
|
|
188
188
|
onClick?: ((event?: MouseEvent) => void) | undefined;
|
|
189
189
|
/** A callback function that is run upon clicking the clear icon */
|
|
190
190
|
onClear?: OnClear | undefined;
|
|
191
|
-
} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Phone & Margin, "
|
|
191
|
+
} & Omit<HTMLProps<HTMLInputElement>, "as" | "onChange"> & As & Phone & Margin, "ref">) & import("react").RefAttributes<InputRef>>;
|
|
192
192
|
export default Input;
|
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { Margin, ThemeProp } from './types';
|
|
2
|
+
import { Margin, Position, ThemeProp } from './types';
|
|
3
3
|
declare const Notification: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
5
|
as?: import("react").ElementType<any> | undefined;
|
|
6
6
|
} & {
|
|
7
|
+
/** The color of the dot */
|
|
7
8
|
color?: string | undefined;
|
|
9
|
+
/** The width/height of the dot */
|
|
8
10
|
size?: string | number | undefined;
|
|
9
|
-
|
|
11
|
+
/** Styles the dot to accommodate containing a number */
|
|
10
12
|
number?: boolean | undefined;
|
|
11
|
-
|
|
12
|
-
bottom?: string | number | undefined;
|
|
13
|
-
right?: string | number | undefined;
|
|
14
|
-
left?: string | number | undefined;
|
|
15
|
-
} & ThemeProp & Margin, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
13
|
+
} & ThemeProp & Margin & Position, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
16
14
|
export default Notification;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Sizes } from './Icon/Icon';
|
|
3
|
-
import { Margin } from './types';
|
|
3
|
+
import { Margin, Position } from './types';
|
|
4
4
|
type SpinnerProps = {
|
|
5
5
|
/** The size of the loading icon */
|
|
6
6
|
size?: Sizes;
|
|
7
7
|
/** The color of the loading icon */
|
|
8
8
|
color?: string;
|
|
9
|
-
} & Margin;
|
|
10
|
-
declare const Spinner: ({ size, color, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: SpinnerProps) => JSX.Element;
|
|
9
|
+
} & Margin & Position;
|
|
10
|
+
declare const Spinner: ({ size, color, margin, marginTop, marginBottom, marginRight, marginLeft, position, top, bottom, right, left, ...props }: SpinnerProps) => JSX.Element;
|
|
11
11
|
export default Spinner;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { HTMLProps, ReactNode } from 'react';
|
|
2
|
-
import { Height } from '../types';
|
|
2
|
+
import { As, Height, MaxHeight } from '../types';
|
|
3
|
+
type DefaultBodyProps = Omit<HTMLProps<HTMLTableSectionElement>, 'as'> & As;
|
|
3
4
|
type BodyProps = {
|
|
4
5
|
children: ReactNode;
|
|
5
|
-
} & Height &
|
|
6
|
-
declare const Body: ({ children, height }: BodyProps) => JSX.Element;
|
|
6
|
+
} & Height & MaxHeight & DefaultBodyProps;
|
|
7
|
+
declare const Body: ({ children, height, maxHeight, ...rest }: BodyProps) => JSX.Element;
|
|
7
8
|
export default Body;
|
|
@@ -10,9 +10,9 @@ declare const Table: {
|
|
|
10
10
|
sorted?: import("./types").SortDir | undefined;
|
|
11
11
|
sortKey?: string | undefined;
|
|
12
12
|
}) => JSX.Element;
|
|
13
|
-
Body: ({ children, height }: {
|
|
13
|
+
Body: ({ children, height, maxHeight, ...rest }: {
|
|
14
14
|
children: ReactNode;
|
|
15
|
-
} & import("../types").Height & import("react").HTMLProps<HTMLTableSectionElement>) => JSX.Element;
|
|
15
|
+
} & import("../types").Height & import("../types").MaxHeight & Omit<import("react").HTMLProps<HTMLTableSectionElement>, "as"> & import("../types").As) => JSX.Element;
|
|
16
16
|
Row: ({ children, columns, onClick, ...rest }: import("./types").TableHeaderRow) => JSX.Element;
|
|
17
17
|
Column: ({ children, contentPosition, defaultValue, padding, paddingTop, paddingBottom, paddingRight, paddingLeft, }: {
|
|
18
18
|
children?: ReactNode;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { Position, Margin, Padding, WidthHeight } from '../types';
|
|
2
|
+
export declare const widthHeightProps: ({ width, height }: WidthHeight) => {
|
|
3
|
+
width: string | number | undefined;
|
|
4
|
+
height: string | number | undefined;
|
|
5
|
+
};
|
|
6
|
+
export declare const paddingProps: ({ padding, paddingTop, paddingBottom, paddingRight, paddingLeft }: Padding) => {
|
|
7
|
+
padding: string | number | undefined;
|
|
8
|
+
paddingTop: string | number | undefined;
|
|
9
|
+
paddingBottom: string | number | undefined;
|
|
10
|
+
paddingRight: string | number | undefined;
|
|
11
|
+
paddingLeft: string | number | undefined;
|
|
12
|
+
};
|
|
13
|
+
export declare const marginProps: ({ margin, marginTop, marginBottom, marginRight, marginLeft }: Margin) => {
|
|
14
|
+
margin: string | number | undefined;
|
|
15
|
+
marginTop: string | number | undefined;
|
|
16
|
+
marginBottom: string | number | undefined;
|
|
17
|
+
marginRight: string | number | undefined;
|
|
18
|
+
marginLeft: string | number | undefined;
|
|
19
|
+
};
|
|
20
|
+
export declare const positionProps: ({ position, top, bottom, right, left }: Position) => {
|
|
21
|
+
position: "static" | "relative" | "absolute" | "sticky" | "fixed" | undefined;
|
|
22
|
+
top: string | number | undefined;
|
|
23
|
+
bottom: string | number | undefined;
|
|
24
|
+
right: string | number | undefined;
|
|
25
|
+
left: string | number | undefined;
|
|
26
|
+
};
|
|
@@ -14,6 +14,13 @@ export type Padding = {
|
|
|
14
14
|
paddingRight?: number | string;
|
|
15
15
|
paddingLeft?: number | string;
|
|
16
16
|
};
|
|
17
|
+
export type Position = {
|
|
18
|
+
position?: 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed';
|
|
19
|
+
top?: number | string;
|
|
20
|
+
bottom?: number | string;
|
|
21
|
+
right?: number | string;
|
|
22
|
+
left?: number | string;
|
|
23
|
+
};
|
|
17
24
|
export type MaxWidth = {
|
|
18
25
|
maxWidth?: number | string;
|
|
19
26
|
};
|
|
@@ -43,7 +43,7 @@ export type { ITheme, ThemeProp } from './theme/ThemeTypes';
|
|
|
43
43
|
export type { IconNames } from './components/Icon/icons';
|
|
44
44
|
export type { DropdownOption } from './components/Dropdown';
|
|
45
45
|
export type { Item as TransferItem, Action as TransferAction, Next as TransferNext } from './components/TransferList';
|
|
46
|
-
export type { AudioRef, DraftEditorRef, InputRef } from './components/types';
|
|
46
|
+
export type { AudioRef, DraftEditorRef, InputRef, Margin, Padding, Position, MaxWidth, MaxHeight, MaxWidthHeight, Width, Height, WidthHeight, MarginPadding, FlexPosition, As, } from './components/types';
|
|
47
47
|
export { default as useEventListener } from './hooks/useEventListener';
|
|
48
48
|
export { default as useOnClickOutside } from './hooks/useOnClickOutside';
|
|
49
49
|
export { default as useSelect } from './hooks/useSelect';
|
|
@@ -53,3 +53,4 @@ export { default as useConfirm } from './hooks/useConfirm';
|
|
|
53
53
|
export { default as useElementObserver } from './hooks/useElementObserver';
|
|
54
54
|
export { default as formatDate } from './utils/formatDate';
|
|
55
55
|
export { default as copyToClipboard } from './utils/copyToClipboard';
|
|
56
|
+
export { widthHeightProps, paddingProps, marginProps, positionProps } from './components/helpers/styledProps';
|