@firecms/ui 3.0.0-canary.108 → 3.0.0-canary.109

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.
Files changed (17) hide show
  1. package/dist/components/Menu.d.ts +2 -1
  2. package/dist/components/Select.d.ts +3 -3
  3. package/dist/components/Tooltip.d.ts +3 -2
  4. package/dist/index.css +56 -0
  5. package/dist/index.es.js +95 -88
  6. package/dist/index.es.js.map +1 -1
  7. package/dist/index.umd.js +94 -87
  8. package/dist/index.umd.js.map +1 -1
  9. package/package.json +108 -106
  10. package/src/components/Chip.tsx +1 -1
  11. package/src/components/InputLabel.tsx +4 -2
  12. package/src/components/Menu.tsx +30 -24
  13. package/src/components/Select.tsx +79 -90
  14. package/src/components/TextField.tsx +1 -1
  15. package/src/components/Tooltip.tsx +17 -9
  16. package/src/components/Typography.tsx +14 -14
  17. package/src/index.css +56 -0
package/package.json CHANGED
@@ -1,109 +1,111 @@
1
1
  {
2
- "name": "@firecms/ui",
3
- "type": "module",
4
- "version": "3.0.0-canary.108",
5
- "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
- "funding": {
7
- "url": "https://github.com/sponsors/firecmsco"
2
+ "name": "@firecms/ui",
3
+ "type": "module",
4
+ "version": "3.0.0-canary.109",
5
+ "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
+ "funding": {
7
+ "url": "https://github.com/sponsors/firecmsco"
8
+ },
9
+ "author": "FireCMS",
10
+ "license": "MIT",
11
+ "repository": "git@github.com:FireCMSco/firecms.git",
12
+ "main": "./dist/index.umd.js",
13
+ "module": "./dist/index.es.js",
14
+ "types": "./dist/index.d.ts",
15
+ "source": "src/index.ts",
16
+ "engines": {
17
+ "node": ">=14"
18
+ },
19
+ "keywords": [
20
+ "firebase",
21
+ "cms",
22
+ "admin",
23
+ "admin panel",
24
+ "firebase panel",
25
+ "firestore",
26
+ "headless",
27
+ "headless cms",
28
+ "content manager"
29
+ ],
30
+ "exports": {
31
+ ".": {
32
+ "import": "./dist/index.es.js",
33
+ "require": "./dist/index.umd.js",
34
+ "types": "./dist/index.d.ts"
8
35
  },
9
- "author": "FireCMS",
10
- "license": "MIT",
11
- "repository": "git@github.com:FireCMSco/firecms.git",
12
- "main": "./dist/index.umd.js",
13
- "module": "./dist/index.es.js",
14
- "types": "./dist/index.d.ts",
15
- "source": "src/index.ts",
16
- "engines": {
17
- "node": ">=14"
18
- },
19
- "keywords": [
20
- "firebase",
21
- "cms",
22
- "admin",
23
- "admin panel",
24
- "firebase panel",
25
- "firestore",
26
- "headless",
27
- "headless cms",
28
- "content manager"
29
- ],
30
- "exports": {
31
- ".": {
32
- "import": "./dist/index.es.js",
33
- "require": "./dist/index.umd.js",
34
- "types": "./dist/index.d.ts"
35
- },
36
- "./package.json": "./package.json",
37
- "./tailwind.config.js": "./tailwind.config.js"
38
- },
39
- "scripts": {
40
- "watch": "vite build --watch",
41
- "build": "vite build && tsc --emitDeclarationOnly",
42
- "prepublishOnly": "run-s build",
43
- "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
44
- "test:lint": "eslint \"src/**\" --quiet",
45
- "test": "jest",
46
- "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
47
- "generateIcons": "ts-node --esm src/scripts/generateIcons.ts"
48
- },
49
- "dependencies": {
50
- "@radix-ui/react-checkbox": "^1.1.1",
51
- "@radix-ui/react-collapsible": "^1.1.0",
52
- "@radix-ui/react-dialog": "^1.1.1",
53
- "@radix-ui/react-dropdown-menu": "^2.1.1",
54
- "@radix-ui/react-label": "^2.1.0",
55
- "@radix-ui/react-menubar": "^1.1.1",
56
- "@radix-ui/react-popover": "^1.1.1",
57
- "@radix-ui/react-portal": "^1.1.1",
58
- "@radix-ui/react-radio-group": "^1.2.0",
59
- "@radix-ui/react-scroll-area": "^1.1.0",
60
- "@radix-ui/react-select": "^2.1.1",
61
- "@radix-ui/react-separator": "^1.1.0",
62
- "@radix-ui/react-switch": "^1.1.0",
63
- "@radix-ui/react-tabs": "^1.1.0",
64
- "@radix-ui/react-tooltip": "^1.1.2",
65
- "clsx": "^2.1.1",
66
- "cmdk": "^0.2.1",
67
- "date-fns": "^3.6.0",
68
- "material-icons": "latest",
69
- "react-datepicker": "^7.3.0",
70
- "react-dropzone": "^14.2.3",
71
- "react-fast-compare": "^3.2.2",
72
- "tailwind-merge": "^2.4.0"
73
- },
74
- "peerDependencies": {
75
- "react": "^18.3.1",
76
- "react-dom": "^18.3.1"
77
- },
78
- "devDependencies": {
79
- "@jest/globals": "^29.7.0",
80
- "@testing-library/jest-dom": "^6.4.6",
81
- "@testing-library/react": "^15.0.7",
82
- "@testing-library/user-event": "^14.5.2",
83
- "@types/jest": "^29.5.12",
84
- "@types/node": "^20.14.12",
85
- "@types/object-hash": "^3.0.6",
86
- "@types/react": "^18.3.3",
87
- "@types/react-dom": "^18.3.0",
88
- "@types/react-measure": "^2.0.12",
89
- "@vitejs/plugin-react": "^4.3.1",
90
- "cross-env": "^7.0.3",
91
- "firebase": "^10.12.4",
92
- "jest": "^29.7.0",
93
- "npm-run-all": "^4.1.5",
94
- "ts-jest": "^29.2.3",
95
- "ts-node": "^10.9.2",
96
- "tsd": "^0.31.1",
97
- "typescript": "^5.5.4",
98
- "vite": "^5.3.4"
99
- },
100
- "files": [
101
- "dist",
102
- "src",
103
- "tailwind.config.js"
104
- ],
105
- "gitHead": "1e73e3d81ee4168288b90bf29ad8822ce5f20dd1",
106
- "publishConfig": {
107
- "access": "public"
108
- }
36
+ "./package.json": "./package.json",
37
+ "./tailwind.config.js": "./tailwind.config.js",
38
+ "./index.css": "./dist/index.css"
39
+ },
40
+ "scripts": {
41
+ "watch": "vite build --watch",
42
+ "build": "vite build && tsc --emitDeclarationOnly",
43
+ "prepublishOnly": "run-s build",
44
+ "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
45
+ "test:lint": "eslint \"src/**\" --quiet",
46
+ "test": "jest",
47
+ "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
48
+ "generateIcons": "ts-node --esm src/scripts/generateIcons.ts"
49
+ },
50
+ "dependencies": {
51
+ "@radix-ui/react-checkbox": "^1.1.1",
52
+ "@radix-ui/react-collapsible": "^1.1.0",
53
+ "@radix-ui/react-dialog": "^1.1.1",
54
+ "@radix-ui/react-dropdown-menu": "^2.1.1",
55
+ "@radix-ui/react-label": "^2.1.0",
56
+ "@radix-ui/react-menubar": "^1.1.1",
57
+ "@radix-ui/react-popover": "^1.1.1",
58
+ "@radix-ui/react-portal": "^1.1.1",
59
+ "@radix-ui/react-radio-group": "^1.2.0",
60
+ "@radix-ui/react-scroll-area": "^1.1.0",
61
+ "@radix-ui/react-select": "^2.1.1",
62
+ "@radix-ui/react-separator": "^1.1.0",
63
+ "@radix-ui/react-switch": "^1.1.0",
64
+ "@radix-ui/react-tabs": "^1.1.0",
65
+ "@radix-ui/react-tooltip": "^1.1.2",
66
+ "clsx": "^2.1.1",
67
+ "cmdk": "^0.2.1",
68
+ "date-fns": "^3.6.0",
69
+ "material-icons": "latest",
70
+ "react-datepicker": "^7.3.0",
71
+ "react-dropzone": "^14.2.3",
72
+ "react-fast-compare": "^3.2.2",
73
+ "tailwind-merge": "^2.4.0"
74
+ },
75
+ "peerDependencies": {
76
+ "react": "^18.3.1",
77
+ "react-dom": "^18.3.1"
78
+ },
79
+ "devDependencies": {
80
+ "@jest/globals": "^29.7.0",
81
+ "@testing-library/jest-dom": "^6.4.6",
82
+ "@testing-library/react": "^15.0.7",
83
+ "@testing-library/user-event": "^14.5.2",
84
+ "@types/jest": "^29.5.12",
85
+ "@types/node": "^20.14.12",
86
+ "@types/object-hash": "^3.0.6",
87
+ "@types/react": "^18.3.3",
88
+ "@types/react-dom": "^18.3.0",
89
+ "@types/react-measure": "^2.0.12",
90
+ "@vitejs/plugin-react": "^4.3.1",
91
+ "cross-env": "^7.0.3",
92
+ "firebase": "^10.12.4",
93
+ "jest": "^29.7.0",
94
+ "npm-run-all": "^4.1.5",
95
+ "ts-jest": "^29.2.3",
96
+ "ts-node": "^10.9.2",
97
+ "tsd": "^0.31.1",
98
+ "typescript": "^5.5.4",
99
+ "vite": "^5.3.4",
100
+ "vite-plugin-static-copy": "^1.0.6"
101
+ },
102
+ "files": [
103
+ "dist",
104
+ "src",
105
+ "tailwind.config.js"
106
+ ],
107
+ "gitHead": "ad45014069302bfff4dfc61065f1d193742ac0ca",
108
+ "publishConfig": {
109
+ "access": "public"
110
+ }
109
111
  }
package/src/components/Chip.tsx CHANGED
@@ -44,7 +44,7 @@ export function Chip({
44
44
  const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
45
45
  return (
46
46
  <div
47
- className={cls("rounded-lg w-fit h-fit font-regular inline-flex gap-1",
47
+ className={cls("rounded-lg w-max h-fit font-regular inline-flex gap-1",
48
48
  "text-ellipsis",
49
49
  onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
50
50
  sizeClassNames[size],
package/src/components/InputLabel.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as React from "react";
2
2
  import { cls } from "../util";
3
3
  import { Label } from "./Label";
4
+ import { defaultBorderMixin } from "../styles";
4
5
 
5
6
  export type InputLabelProps = {
6
7
  children?: React.ReactNode;
@@ -28,10 +29,11 @@ export const InputLabel = React.forwardRef<HTMLLabelElement, InputLabelProps>(fu
28
29
  }, className);
29
30
 
30
31
  return (
31
- <Label
32
+ <label
33
+ className={cls("text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
34
+ defaultBorderMixin, computedClassName)}
32
35
  data-shrink={shrink}
33
36
  ref={ref}
34
- className={computedClassName}
35
37
  {...other}
36
38
  />
37
39
  );
package/src/components/Menu.tsx CHANGED
@@ -14,30 +14,36 @@ export type MenuProps = {
14
14
  portalContainer?: HTMLElement | null;
15
15
  }
16
16
 
17
- export function Menu({
18
- children,
19
- trigger,
20
- open,
21
- defaultOpen,
22
- onOpenChange,
23
- portalContainer
24
- }: MenuProps) {
25
- return (
26
- <DropdownMenu.Root
27
- open={open}
28
- defaultOpen={defaultOpen}
29
- onOpenChange={onOpenChange}>
30
- <DropdownMenu.Trigger asChild>
31
- {trigger}
32
- </DropdownMenu.Trigger>
33
- <DropdownMenu.Portal container={portalContainer}>
34
- <DropdownMenu.Content className={cls(paperMixin, "shadow py-2 z-30")}>
35
- {children}
36
- </DropdownMenu.Content>
37
- </DropdownMenu.Portal>
38
- </DropdownMenu.Root>
39
- );
40
- }
17
+ const Menu = React.forwardRef<
18
+ React.ElementRef<typeof DropdownMenu.Trigger>,
19
+ MenuProps
20
+ >(({
21
+ children,
22
+ trigger,
23
+ open,
24
+ defaultOpen,
25
+ onOpenChange,
26
+ portalContainer
27
+ }, ref) => (
28
+ <DropdownMenu.Root
29
+ open={open}
30
+ defaultOpen={defaultOpen}
31
+ onOpenChange={onOpenChange}>
32
+ <DropdownMenu.Trigger
33
+ ref={ref}
34
+ asChild>
35
+ {trigger}
36
+ </DropdownMenu.Trigger>
37
+ <DropdownMenu.Portal container={portalContainer}>
38
+ <DropdownMenu.Content className={cls(paperMixin, "shadow py-2 z-30")}>
39
+ {children}
40
+ </DropdownMenu.Content>
41
+ </DropdownMenu.Portal>
42
+ </DropdownMenu.Root>
43
+ ))
44
+ Menu.displayName = "Menu"
45
+
46
+ export { Menu }
41
47
 
42
48
  export type MenuItemProps = {
43
49
  children: React.ReactNode;
package/src/components/Select.tsx CHANGED
@@ -1,5 +1,4 @@
1
- import React, { useEffect } from "react";
2
-
1
+ import React, { ChangeEvent, forwardRef, useCallback, useEffect, useState } from "react";
3
2
  import * as SelectPrimitive from "@radix-ui/react-select";
4
3
  import {
5
4
  fieldBackgroundDisabledMixin,
@@ -20,7 +19,7 @@ export type SelectProps = {
20
19
  value?: string | string[],
21
20
  className?: string,
22
21
  inputClassName?: string,
23
- onChange?: React.EventHandler<React.ChangeEvent<HTMLSelectElement>>,
22
+ onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
24
23
  onValueChange?: (updatedValue: string) => void,
25
24
  onMultiValueChange?: (updatedValue: string[]) => void,
26
25
  placeholder?: React.ReactNode,
@@ -40,41 +39,42 @@ export type SelectProps = {
40
39
  children?: React.ReactNode
41
40
  };
42
41
 
43
- export function Select({
44
- inputRef,
45
- open,
46
- name,
47
- id,
48
- onOpenChange,
49
- value,
50
- onChange,
51
- onValueChange,
52
- onMultiValueChange,
53
- className,
54
- inputClassName,
55
- placeholder,
56
- renderValue,
57
- renderValues,
58
- label,
59
- size = "medium",
60
- includeFocusOutline = true,
61
- error,
62
- disabled,
63
- padding = true,
64
- position = "item-aligned",
65
- endAdornment,
66
- multiple,
67
- invisible,
68
- children,
69
- ...props
70
- }: SelectProps) {
42
+ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
43
+ inputRef,
44
+ open,
45
+ name,
46
+ id,
47
+ onOpenChange,
48
+ value,
49
+ onChange,
50
+ onValueChange,
51
+ onMultiValueChange,
52
+ className,
53
+ inputClassName,
54
+ placeholder,
55
+ renderValue,
56
+ renderValues,
57
+ label,
58
+ size = "medium",
59
+ includeFocusOutline = true,
60
+ error,
61
+ disabled,
62
+ padding = true,
63
+ position = "item-aligned",
64
+ endAdornment,
65
+ multiple,
66
+ invisible,
67
+ children,
68
+ ...props
69
+ }, ref) => {
70
+
71
+ const [openInternal, setOpenInternal] = useState(false);
71
72
 
72
- const [openInternal, setOpenInternal] = React.useState(false);
73
73
  useEffect(() => {
74
74
  setOpenInternal(open ?? false);
75
75
  }, [open]);
76
76
 
77
- const onValueChangeInternal = React.useCallback((newValue: string) => {
77
+ const onValueChangeInternal = useCallback((newValue: string) => {
78
78
  if (multiple) {
79
79
  if (Array.isArray(value) && value.includes(newValue)) {
80
80
  onMultiValueChange?.(value.filter(v => v !== newValue));
@@ -90,12 +90,13 @@ export function Select({
90
90
  name,
91
91
  value: newValue
92
92
  }
93
- } as React.ChangeEvent<HTMLSelectElement>;
93
+ } as ChangeEvent<HTMLSelectElement>;
94
94
  onChange(event);
95
95
  }
96
96
  }, [multiple, onChange, value, onMultiValueChange, onValueChange]);
97
97
 
98
98
  const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
99
+
99
100
  return (
100
101
  <SelectPrimitive.Root
101
102
  name={name}
@@ -108,19 +109,18 @@ export function Select({
108
109
  onOpenChange?.(open);
109
110
  setOpenInternal(open);
110
111
  }}
111
- {...props}>
112
-
112
+ {...props}
113
+ >
113
114
  {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
114
-
115
- <div
116
- className={cls(
117
- size === "small" ? "min-h-[42px]" : "min-h-[64px]",
118
- "select-none rounded-md text-sm",
119
- invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
120
- disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
121
- "relative flex items-center",
122
- className)}>
123
-
115
+ <div className={cls(
116
+ size === "small" ? "min-h-[42px]" : "min-h-[64px]",
117
+ "select-none rounded-md text-sm",
118
+ invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
119
+ disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
120
+ "relative flex items-center",
121
+ className
122
+ )}
123
+ >
124
124
  <SelectPrimitive.Trigger
125
125
  ref={inputRef}
126
126
  id={id}
@@ -136,63 +136,52 @@ export function Select({
136
136
  "relative flex items-center",
137
137
  includeFocusOutline ? focusedMixin : "",
138
138
  inputClassName
139
- )}>
140
-
141
- <div className={cls(
142
- "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
143
- "overflow-visible",
144
- size === "small" ? "h-[42px]" : "h-[64px]"
145
- )}>
139
+ )}
140
+ >
141
+ <div
142
+ ref={ref}
143
+ className={cls(
144
+ "flex-grow w-full max-w-full flex flex-row gap-2 items-center",
145
+ "overflow-visible",
146
+ size === "small" ? "h-[42px]" : "h-[64px]"
147
+ )}
148
+ >
146
149
  <SelectPrimitive.Value placeholder={placeholder} className={"w-full"}>
147
- {renderValue &&
148
- (hasValue && Array.isArray(value)
149
- ? value.map((v, i) => (
150
- <div key={v} className={"flex items-center gap-1 max-w-full"}>
151
- {renderValue ? renderValue(v, i) : v}
152
- </div>))
153
- : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
154
-
155
- {renderValues && (!hasValue || Array.isArray(value))
156
- ? renderValues(value as string[] ?? [])
157
- : null}
158
-
159
- {!renderValue && !renderValues && hasValue}
160
-
150
+ {renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => (
151
+ <div key={v} className={"flex items-center gap-1 max-w-full"}>
152
+ {renderValue ? renderValue(v, i) : v}
153
+ </div>
154
+ )) : (typeof value === "string" ? (renderValue ? renderValue(value, 0) : value) : placeholder))}
155
+ {renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value as string[] ?? []) : null}
156
+ {!renderValue && !renderValues && hasValue}
161
157
  </SelectPrimitive.Value>
162
158
  </div>
163
-
164
- <SelectPrimitive.Icon className={cls(
165
- "px-2 h-full flex items-center",
166
- )}>
167
- <ExpandMoreIcon size={"small"}
168
- className={cls("transition", open ? "rotate-180" : "")}/>
159
+ <SelectPrimitive.Icon className={cls("px-2 h-full flex items-center")}>
160
+ <ExpandMoreIcon size={"small"} className={cls("transition", open ? "rotate-180" : "")}/>
169
161
  </SelectPrimitive.Icon>
170
-
171
162
  </SelectPrimitive.Trigger>
172
-
173
- {endAdornment && <div className={cls("absolute h-full flex items-center",
174
- size === "small" ? "right-10" : "right-14")}
175
- onClick={(e) => e.stopPropagation()}>
176
- {endAdornment}
177
- </div>}
178
-
163
+ {endAdornment && (
164
+ <div
165
+ className={cls("absolute h-full flex items-center", size === "small" ? "right-10" : "right-14")}
166
+ onClick={(e) => e.stopPropagation()}>
167
+ {endAdornment}
168
+ </div>
169
+ )}
179
170
  </div>
180
171
  <SelectPrimitive.Portal>
181
- <SelectPrimitive.Content
182
- position={position}
183
- className="z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg">
184
- <SelectPrimitive.Viewport
185
- className={"p-1"}
186
- style={{
187
- maxHeight: "var(--radix-select-content-available-height)"
188
- }}>
172
+ <SelectPrimitive.Content position={position}
173
+ className="z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg">
174
+ <SelectPrimitive.Viewport className={"p-1"}
175
+ style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
189
176
  {children}
190
177
  </SelectPrimitive.Viewport>
191
178
  </SelectPrimitive.Content>
192
179
  </SelectPrimitive.Portal>
193
180
  </SelectPrimitive.Root>
194
181
  );
195
- }
182
+ });
183
+
184
+ Select.displayName = "Select";
196
185
 
197
186
  export type SelectItemProps = {
198
187
  value: string,
package/src/components/TextField.tsx CHANGED
@@ -159,7 +159,7 @@ export function TextField<T extends string | number>({
159
159
  {label && (
160
160
  <InputLabel
161
161
  className={cls(
162
- "pointer-events-none absolute",
162
+ "absolute",
163
163
  size === "medium" ? "top-1" : "-top-1",
164
164
  !error ? (focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark") : "text-red-500 dark:text-red-600",
165
165
  disabled ? "opacity-50" : "")}
package/src/components/Tooltip.tsx CHANGED
@@ -13,10 +13,11 @@ export type TooltipProps = {
13
13
  sideOffset?: number,
14
14
  title?: string | React.ReactNode,
15
15
  delayDuration?: number;
16
- className?: string,
16
+ asChild?: boolean;
17
17
  tooltipClassName?: string,
18
18
  tooltipStyle?: React.CSSProperties;
19
19
  children: React.ReactNode,
20
+ className?: string,
20
21
  style?: React.CSSProperties;
21
22
  };
22
23
 
@@ -29,11 +30,12 @@ export const Tooltip = ({
29
30
  align,
30
31
  onOpenChange,
31
32
  title,
32
- className,
33
- style,
34
33
  tooltipClassName,
35
34
  tooltipStyle,
36
- children
35
+ children,
36
+ asChild = false,
37
+ className,
38
+ style
37
39
  }: TooltipProps) => {
38
40
 
39
41
  useInjectStyles("Tooltip", styles);
@@ -41,14 +43,20 @@ export const Tooltip = ({
41
43
  if (!title)
42
44
  return <>{children}</>;
43
45
 
46
+ const trigger = asChild
47
+ ? <TooltipPrimitive.Trigger asChild={true}>
48
+ {children}
49
+ </TooltipPrimitive.Trigger>
50
+ : <TooltipPrimitive.Trigger asChild={true}>
51
+ <div style={style} className={className}>
52
+ {children}
53
+ </div>
54
+ </TooltipPrimitive.Trigger>;
55
+
44
56
  return (
45
57
  <TooltipPrimitive.Provider delayDuration={delayDuration}>
46
58
  <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen}>
47
- <TooltipPrimitive.Trigger asChild>
48
- <div className={className} style={style}>
49
- {children}
50
- </div>
51
- </TooltipPrimitive.Trigger>
59
+ {trigger}
52
60
  <TooltipPrimitive.Portal>
53
61
  <TooltipPrimitive.Content
54
62
  className={cls("TooltipContent",