@wavv/ui 2.4.6-alpha.2 → 2.4.7
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.
|
@@ -11,7 +11,7 @@ type Props = {
|
|
|
11
11
|
/** The function to be called when the input text does not match any options */
|
|
12
12
|
onCreate?: (text: string) => void;
|
|
13
13
|
/** Customize the create option label. Receives raw inputText and returns the label to display. */
|
|
14
|
-
formatCreateOption?: (inputText: string) =>
|
|
14
|
+
formatCreateOption?: (inputText: string) => ReactNode;
|
|
15
15
|
ref?: React.Ref<HTMLInputElement>;
|
|
16
16
|
} & SelectInputProps & OpenStateProps & ComboBoxProps;
|
|
17
17
|
declare const _default: (({ backgroundColor, menuBackground, children, fontSize, disabled, invalid, required, readOnly, loading, loadingResults, label, options, placeholder, placeholderColor, description, errorMessage, textOnly, value, defaultValue, width, height, maxHeight, iconLeft, leftElement, rightElement, allowRepeatSelection, allowsEmptyCollection, emptyFallback, position, fixedPosition, open, onOpenChange, before, after, onChange, onCreate, formatCreateOption, afterShow, afterHide, onTextChange, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element) & {
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import type { TagItem } from './typeDefs/tagTypes';
|
|
3
|
-
import type { MarginPadding } from './types';
|
|
3
|
+
import type { MarginPadding, WidthHeight } from './types';
|
|
4
4
|
type WithRemove = {
|
|
5
|
+
/** The function to call when the remove icon is clicked */
|
|
5
6
|
onRemove: (key: string) => void;
|
|
7
|
+
/** The unique identifier for the tag. Required if `onRemove` is provided */
|
|
6
8
|
id: string;
|
|
7
9
|
};
|
|
8
10
|
type WithoutRemove = {
|
|
@@ -16,7 +18,11 @@ type Props = {
|
|
|
16
18
|
type?: 'error' | 'success' | 'warning';
|
|
17
19
|
/** Sets the size of the Tag (top/bottom padding) */
|
|
18
20
|
size?: 'small' | 'medium';
|
|
21
|
+
/** Sets the text color of the Tag */
|
|
22
|
+
textColor?: string;
|
|
23
|
+
/** Sets the gap between Tag children */
|
|
24
|
+
gap?: number;
|
|
19
25
|
className?: string;
|
|
20
|
-
} & RemoveProps & MarginPadding & Partial<TagItem>;
|
|
21
|
-
declare const Tag: ({ children, id, value, iconLeft, iconRight, tooltip, removable, disabled, size, onRemove, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
} & RemoveProps & MarginPadding & WidthHeight & Partial<TagItem>;
|
|
27
|
+
declare const Tag: ({ children, id, value, iconLeft, iconRight, tooltip, removable, disabled, size, textColor, gap, onRemove, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
22
28
|
export default Tag;
|
package/build/components/Tag.js
CHANGED
|
@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useTheme } from "@emotion/react";
|
|
3
3
|
import styled from "@emotion/styled";
|
|
4
4
|
import getIcon from "./helpers/getIcon.js";
|
|
5
|
-
import { marginProps, paddingProps } from "./helpers/styledProps.js";
|
|
5
|
+
import { marginProps, paddingProps, widthHeightProps } from "./helpers/styledProps.js";
|
|
6
6
|
import Icon from "./Icon/index.js";
|
|
7
7
|
import Tooltip from "./Tooltip.js";
|
|
8
|
-
const Tag = ({ children, id, value, iconLeft, iconRight, tooltip, removable, disabled, size = 'small', onRemove, ...props })=>{
|
|
8
|
+
const Tag = ({ children, id, value, iconLeft, iconRight, tooltip, removable, disabled, size = 'small', textColor, gap = 4, onRemove, ...props })=>{
|
|
9
9
|
const { scale10 } = useTheme();
|
|
10
10
|
const handleRemove = (key)=>{
|
|
11
11
|
if (onRemove) onRemove(key);
|
|
@@ -17,10 +17,11 @@ const Tag = ({ children, id, value, iconLeft, iconRight, tooltip, removable, dis
|
|
|
17
17
|
rightIcon: !!(iconRight || removable && !disabled),
|
|
18
18
|
removable: removable,
|
|
19
19
|
size: size,
|
|
20
|
+
textColor: textColor,
|
|
21
|
+
gap: gap,
|
|
20
22
|
...props,
|
|
21
23
|
children: [
|
|
22
24
|
iconLeft && getIcon(iconLeft, {
|
|
23
|
-
marginRight: 4,
|
|
24
25
|
size: 'small'
|
|
25
26
|
}),
|
|
26
27
|
tooltip ? /*#__PURE__*/ jsx(Tooltip, {
|
|
@@ -37,19 +38,19 @@ const Tag = ({ children, id, value, iconLeft, iconRight, tooltip, removable, dis
|
|
|
37
38
|
color: disabled ? void 0 : scale10
|
|
38
39
|
}),
|
|
39
40
|
iconRight && getIcon(iconRight, {
|
|
40
|
-
marginLeft: 4,
|
|
41
41
|
size: 'small'
|
|
42
42
|
})
|
|
43
43
|
]
|
|
44
44
|
});
|
|
45
45
|
};
|
|
46
|
-
const Item = styled.div(({ theme, disabled, invalid, rightIcon, type, removable, size })=>{
|
|
46
|
+
const Item = styled.div(({ theme, disabled, invalid, rightIcon, type, removable, size, textColor, gap })=>{
|
|
47
47
|
const tag = theme.tag[type || 'default'];
|
|
48
48
|
return {
|
|
49
49
|
display: 'flex',
|
|
50
50
|
alignItems: 'center',
|
|
51
51
|
width: 'max-content',
|
|
52
|
-
|
|
52
|
+
gap,
|
|
53
|
+
color: disabled || invalid ? theme.scale4 : textColor || theme.scale10,
|
|
53
54
|
cursor: 'default',
|
|
54
55
|
fontSize: theme.font.size.sm,
|
|
55
56
|
fontWeight: theme.font.weight.medium,
|
|
@@ -66,6 +67,6 @@ const Item = styled.div(({ theme, disabled, invalid, rightIcon, type, removable,
|
|
|
66
67
|
outlineOffset: -1
|
|
67
68
|
}
|
|
68
69
|
};
|
|
69
|
-
}, marginProps, paddingProps);
|
|
70
|
+
}, marginProps, paddingProps, widthHeightProps);
|
|
70
71
|
const components_Tag = Tag;
|
|
71
72
|
export { components_Tag as default };
|
|
@@ -2,14 +2,19 @@ import type { IconType } from '../helpers/getIcon';
|
|
|
2
2
|
import type { Placement } from '../types';
|
|
3
3
|
export type TagItem = {
|
|
4
4
|
id: string;
|
|
5
|
+
/** The content of the tag if no children are provided */
|
|
5
6
|
value: string;
|
|
7
|
+
/** Adds disabled styles and disables removal */
|
|
6
8
|
disabled?: boolean;
|
|
9
|
+
/** Adds disabled styles but allows removal */
|
|
7
10
|
invalid?: boolean;
|
|
11
|
+
/** Determines if the input can be removed */
|
|
8
12
|
removable?: boolean;
|
|
9
13
|
/** The name of the icon that should appear on the left side of the input */
|
|
10
14
|
iconLeft?: IconType;
|
|
11
15
|
/** The name of the icon that should appear on the right side of the input */
|
|
12
16
|
iconRight?: IconType;
|
|
17
|
+
/** Tooltip configuration for the input */
|
|
13
18
|
tooltip?: {
|
|
14
19
|
content: string;
|
|
15
20
|
position?: Placement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wavv/ui",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.7",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -31,22 +31,22 @@
|
|
|
31
31
|
"@emotion/styled": "11.14.1",
|
|
32
32
|
"@internationalized/date": "3.11.0",
|
|
33
33
|
"@react-hook/resize-observer": "2.0.2",
|
|
34
|
-
"@tiptap/core": "3.
|
|
35
|
-
"@tiptap/extension-character-count": "3.
|
|
36
|
-
"@tiptap/extension-highlight": "3.
|
|
37
|
-
"@tiptap/extension-placeholder": "3.
|
|
38
|
-
"@tiptap/extension-task-item": "3.
|
|
39
|
-
"@tiptap/extension-task-list": "3.
|
|
40
|
-
"@tiptap/markdown": "3.
|
|
41
|
-
"@tiptap/pm": "3.
|
|
42
|
-
"@tiptap/react": "3.
|
|
43
|
-
"@tiptap/starter-kit": "3.
|
|
34
|
+
"@tiptap/core": "3.20.0",
|
|
35
|
+
"@tiptap/extension-character-count": "3.20.0",
|
|
36
|
+
"@tiptap/extension-highlight": "3.20.0",
|
|
37
|
+
"@tiptap/extension-placeholder": "3.20.0",
|
|
38
|
+
"@tiptap/extension-task-item": "3.20.0",
|
|
39
|
+
"@tiptap/extension-task-list": "3.20.0",
|
|
40
|
+
"@tiptap/markdown": "3.20.0",
|
|
41
|
+
"@tiptap/pm": "3.20.0",
|
|
42
|
+
"@tiptap/react": "3.20.0",
|
|
43
|
+
"@tiptap/starter-kit": "3.20.0",
|
|
44
44
|
"cmdk": "1.1.1",
|
|
45
45
|
"date-fns": "4.1.0",
|
|
46
46
|
"draft-js": "0.11.7",
|
|
47
47
|
"es-toolkit": "1.44.0",
|
|
48
|
-
"libphonenumber-js": "1.12.
|
|
49
|
-
"lucide-react": "0.
|
|
48
|
+
"libphonenumber-js": "1.12.37",
|
|
49
|
+
"lucide-react": "0.575.0",
|
|
50
50
|
"polished": "4.3.1",
|
|
51
51
|
"prism-react-renderer": "2.4.1",
|
|
52
52
|
"react-aria": "3.46.0",
|
|
@@ -61,17 +61,17 @@
|
|
|
61
61
|
"@babel/core": "^7.29.0",
|
|
62
62
|
"@babel/preset-env": "^7.29.0",
|
|
63
63
|
"@babel/preset-typescript": "^7.28.5",
|
|
64
|
-
"@biomejs/biome": "2.
|
|
64
|
+
"@biomejs/biome": "2.4.2",
|
|
65
65
|
"@chromatic-com/storybook": "^4.1.3",
|
|
66
66
|
"@emotion/babel-plugin": "^11.13.5",
|
|
67
67
|
"@emotion/react": "^11.14.0",
|
|
68
68
|
"@rsbuild/core": "1.7.3",
|
|
69
69
|
"@rsbuild/plugin-react": "^1.4.5",
|
|
70
70
|
"@rsbuild/plugin-svgr": "^1.3.0",
|
|
71
|
-
"@rslib/core": "^0.19.
|
|
72
|
-
"@storybook/addon-docs": "^10.2.
|
|
73
|
-
"@storybook/addon-links": "^10.2.
|
|
74
|
-
"@storybook/addon-themes": "^10.2.
|
|
71
|
+
"@rslib/core": "^0.19.6",
|
|
72
|
+
"@storybook/addon-docs": "^10.2.10",
|
|
73
|
+
"@storybook/addon-links": "^10.2.10",
|
|
74
|
+
"@storybook/addon-themes": "^10.2.10",
|
|
75
75
|
"@storybook/test-runner": "^0.24.2",
|
|
76
76
|
"@svgr/core": "^8.1.0",
|
|
77
77
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
@@ -80,10 +80,10 @@
|
|
|
80
80
|
"@types/draft-js": "^0.11.20",
|
|
81
81
|
"@types/jest": "^30.0.0",
|
|
82
82
|
"@types/ncp": "^2.0.8",
|
|
83
|
-
"@types/node": "^25.2.
|
|
83
|
+
"@types/node": "^25.2.3",
|
|
84
84
|
"@types/prompts": "^2.4.9",
|
|
85
85
|
"@types/randomcolor": "^0.5.9",
|
|
86
|
-
"@types/react": "^19.2.
|
|
86
|
+
"@types/react": "^19.2.14",
|
|
87
87
|
"@types/react-dom": "^19.2.3",
|
|
88
88
|
"@types/signale": "^1.4.7",
|
|
89
89
|
"@types/webfontloader": "^1.6.38",
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
"change-case": "^5.4.4",
|
|
92
92
|
"chromatic": "^13.3.5",
|
|
93
93
|
"jest": "^30.2.0",
|
|
94
|
-
"lefthook": "^2.1.
|
|
94
|
+
"lefthook": "^2.1.1",
|
|
95
95
|
"ncp": "^2.0.0",
|
|
96
96
|
"path": "^0.12.7",
|
|
97
97
|
"phone": "^3.1.70",
|
|
@@ -104,8 +104,8 @@
|
|
|
104
104
|
"react-dom": "^19.2.4",
|
|
105
105
|
"replace": "^1.2.2",
|
|
106
106
|
"signale": "^1.4.0",
|
|
107
|
-
"storybook": "^10.2.
|
|
108
|
-
"storybook-react-rsbuild": "^3.2.
|
|
107
|
+
"storybook": "^10.2.10",
|
|
108
|
+
"storybook-react-rsbuild": "^3.2.3",
|
|
109
109
|
"tsc-files": "^1.1.4",
|
|
110
110
|
"tslib": "^2.8.1",
|
|
111
111
|
"tsx": "^4.21.0",
|