@firecms/ui 3.0.0-canary.167 → 3.0.0-canary.169

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/CircularProgress.d.ts +1 -1
  2. package/dist/components/Menu.d.ts +4 -1
  3. package/dist/components/Sheet.d.ts +2 -0
  4. package/dist/index.es.js +186 -158
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/index.umd.js +186 -158
  7. package/dist/index.umd.js.map +1 -1
  8. package/package.json +2 -2
  9. package/src/components/Button.tsx +1 -1
  10. package/src/components/Chip.tsx +1 -0
  11. package/src/components/CircularProgress.tsx +7 -3
  12. package/src/components/Menu.tsx +13 -4
  13. package/src/components/SearchBar.tsx +1 -1
  14. package/src/components/Sheet.tsx +9 -1
  15. package/src/components/Tabs.tsx +3 -1
  16. package/src/components/TextField.tsx +2 -2
  17. package/src/components/TextareaAutosize.tsx +2 -2
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@firecms/ui",
3
3
  "type": "module",
4
- "version": "3.0.0-canary.167",
4
+ "version": "3.0.0-canary.169",
5
5
  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
6
  "funding": {
7
7
  "url": "https://github.com/sponsors/firecmsco"
@@ -115,7 +115,7 @@
115
115
  "index.css",
116
116
  "tailwind.config.js"
117
117
  ],
118
- "gitHead": "86c9b7ff34991bf0424764845936b002e1071560",
118
+ "gitHead": "8c086883fc1cb08a74d4bd66ef2f952affa9fdb9",
119
119
  "publishConfig": {
120
120
  "access": "public"
121
121
  }
package/src/components/Button.tsx CHANGED
@@ -64,7 +64,7 @@ const ButtonInner = React.forwardRef<
64
64
  "text-text-disabled dark:text-text-disabled-dark": disabled,
65
65
  "border border-transparent opacity-50": variant === "text" && disabled,
66
66
  "border border-surface-500 opacity-50": variant === "outlined" && disabled,
67
- "border border-surface-500 bg-surface-500 opacity-50": (variant === "filled" || variant === "neutral") && disabled,
67
+ "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40": (variant === "filled" || variant === "neutral") && disabled,
68
68
  });
69
69
 
70
70
  const sizeClasses = cls(
package/src/components/Chip.tsx CHANGED
@@ -46,6 +46,7 @@ export function Chip({
46
46
  <div
47
47
  className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
48
48
  "text-ellipsis",
49
+ "items-center",
49
50
  onClick ? "cursor-pointer hover:bg-surface-accent-300 hover:dark:bg-surface-accent-700" : "",
50
51
  sizeClassNames[size],
51
52
  error || !usedColorScheme ? "bg-surface-accent-200 dark:bg-surface-accent-800 text-surface-accent-800 dark:text-white" : "",
package/src/components/CircularProgress.tsx CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { cls } from "../util";
3
3
 
4
4
  export type CircularProgressProps = {
5
- size?: "small" | "medium" | "large",
5
+ size?: "smallest" | "small" | "medium" | "large",
6
6
  className?: string
7
7
  }
8
8
 
@@ -12,8 +12,10 @@ export function CircularProgress({
12
12
  }: CircularProgressProps) {
13
13
 
14
14
  let sizeClasses = "";
15
- if (size === "small") {
15
+ if (size === "smallest") {
16
16
  sizeClasses = "w-4 h-4";
17
+ } else if (size === "small") {
18
+ sizeClasses = "w-6 h-6";
17
19
  } else if (size === "medium") {
18
20
  sizeClasses = "w-8 h-8 m-1";
19
21
  } else {
@@ -21,8 +23,10 @@ export function CircularProgress({
21
23
  }
22
24
 
23
25
  let borderClasses = "";
24
- if (size === "small") {
26
+ if (size === "smallest") {
25
27
  borderClasses = "border-[3px]";
28
+ } else if (size === "small") {
29
+ borderClasses = "border-[4px]";
26
30
  } else if (size === "medium") {
27
31
  borderClasses = "border-4";
28
32
  } else {
package/src/components/Menu.tsx CHANGED
@@ -15,6 +15,9 @@ export type MenuProps = {
15
15
  portalContainer?: HTMLElement | null;
16
16
  side?: "top" | "right" | "bottom" | "left";
17
17
  align?: "start" | "center" | "end";
18
+
19
+ sideOffset?: number;
20
+ className?: string;
18
21
  }
19
22
 
20
23
  const Menu = React.forwardRef<
@@ -28,7 +31,9 @@ const Menu = React.forwardRef<
28
31
  side,
29
32
  align,
30
33
  onOpenChange,
31
- portalContainer
34
+ portalContainer,
35
+ sideOffset = 4,
36
+ className
32
37
  }, ref) => (
33
38
  <DropdownMenu.Root
34
39
  open={open}
@@ -42,8 +47,9 @@ const Menu = React.forwardRef<
42
47
  <DropdownMenu.Portal container={portalContainer}>
43
48
  <DropdownMenu.Content
44
49
  side={side}
50
+ sideOffset={sideOffset}
45
51
  align={align}
46
- className={cls(paperMixin, focusedDisabled, "shadow py-2 z-30")}>
52
+ className={cls(paperMixin, focusedDisabled, "shadow py-2 z-30", className)}>
47
53
  {children}
48
54
  </DropdownMenu.Content>
49
55
  </DropdownMenu.Portal>
@@ -57,18 +63,21 @@ export type MenuItemProps = {
57
63
  children: React.ReactNode;
58
64
  dense?: boolean;
59
65
  onClick?: (event: React.MouseEvent) => void;
66
+ className?: string;
60
67
  };
61
68
 
62
69
  export function MenuItem({
63
70
  children,
64
71
  dense = false, // Default value is false if not provided
65
- onClick
72
+ onClick,
73
+ className
66
74
  }: MenuItemProps) {
67
75
  // Dynamically adjusting the class based on the "dense" prop
68
76
  const classNames = cls(
69
77
  onClick && "cursor-pointer",
70
78
  "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4",
71
- dense ? "px-3 py-1.5" : "px-4 py-2"
79
+ dense ? "px-3 py-1.5" : "px-4 py-2",
80
+ className
72
81
  );
73
82
 
74
83
  return (
package/src/components/SearchBar.tsx CHANGED
@@ -69,7 +69,7 @@ export function SearchBar({
69
69
  className)}>
70
70
  <div
71
71
  className="absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0">
72
- {loading ? <CircularProgress size={"small"}/> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"}/>}
72
+ {loading ? <CircularProgress size={"smallest"}/> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"}/>}
73
73
  </div>
74
74
  <input
75
75
  value={searchText ?? ""}
package/src/components/Sheet.tsx CHANGED
@@ -15,7 +15,9 @@ interface SheetProps {
15
15
  transparent?: boolean;
16
16
  onOpenChange?: (open: boolean) => void;
17
17
  className?: string;
18
+ style?: React.CSSProperties;
18
19
  overlayClassName?: string;
20
+ overlayStyle?: React.CSSProperties;
19
21
  }
20
22
 
21
23
  export const Sheet: React.FC<SheetProps> = ({
@@ -28,7 +30,9 @@ export const Sheet: React.FC<SheetProps> = ({
28
30
  onOpenChange,
29
31
  transparent,
30
32
  className,
33
+ style,
31
34
  overlayClassName,
35
+ overlayStyle,
32
36
  ...props
33
37
  }) => {
34
38
  const [displayed, setDisplayed] = useState(false);
@@ -64,6 +68,7 @@ export const Sheet: React.FC<SheetProps> = ({
64
68
  </DialogPrimitive.Title>
65
69
  {includeBackgroundOverlay && <DialogPrimitive.Overlay
66
70
  className={cls(
71
+ "outline-none",
67
72
  "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
68
73
  "bg-black bg-opacity-50",
69
74
  "dark:bg-surface-900 dark:bg-opacity-60",
@@ -71,13 +76,15 @@ export const Sheet: React.FC<SheetProps> = ({
71
76
  overlayClassName
72
77
  )}
73
78
  style={{
74
- pointerEvents: displayed ? "auto" : "none"
79
+ pointerEvents: displayed ? "auto" : "none",
80
+ ...overlayStyle
75
81
  }}
76
82
  />}
77
83
  <DialogPrimitive.Content
78
84
  {...props}
79
85
  onFocusCapture={(event) => event.preventDefault()}
80
86
  className={cls(
87
+ "outline-none",
81
88
  borderClass[side],
82
89
  defaultBorderMixin,
83
90
  "transform-gpu",
@@ -93,6 +100,7 @@ export const Sheet: React.FC<SheetProps> = ({
93
100
  !displayed || !open ? transformValue[side] : "",
94
101
  className
95
102
  )}
103
+ style={style}
96
104
  >
97
105
  {children}
98
106
  </DialogPrimitive.Content>
package/src/components/Tabs.tsx CHANGED
@@ -20,6 +20,7 @@ export function Tabs({
20
20
 
21
21
  return <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={className}>
22
22
  <TabsPrimitive.List className={cls(
23
+ "w-max",
23
24
  "flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar items-end",
24
25
  innerClassName)
25
26
  }>
@@ -54,7 +55,8 @@ export function Tab({
54
55
  "data-[state=active]:text-surface-accent-900 data-[state=active]:dark:text-white",
55
56
  "hover:text-surface-accent-800 dark:hover:text-surface-accent-200"),
56
57
  className)}>
57
- <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
58
+ <div className={cls("line-clamp-1",
59
+ "uppercase inline-block p-2 px-4 rounded",
58
60
  "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",
59
61
  innerClassName)}>
60
62
  {children}
package/src/components/TextField.tsx CHANGED
@@ -111,7 +111,7 @@ export function TextField<T extends string | number>({
111
111
  className={cls(
112
112
  invisible ? focusedInvisibleMixin : "",
113
113
  "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8",
114
- disabled && "border border-transparent outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
114
+ disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500"
115
115
  )}
116
116
  />
117
117
  : <input
@@ -129,7 +129,7 @@ export function TextField<T extends string | number>({
129
129
  size === "small" ? "min-h-[32px]" : (size === "medium" ? "min-h-[48px]" : "min-h-[64px]"),
130
130
  label ? (size === "large" ? "pt-8 pb-2" : "pt-4 pb-2") : "py-2",
131
131
  endAdornment ? "pr-10" : "pr-3",
132
- disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
132
+ disabled && "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white",
133
133
  inputClassName
134
134
  )}
135
135
  placeholder={focused || hasValue || !label ? placeholder : undefined}
package/src/components/TextareaAutosize.tsx CHANGED
@@ -270,7 +270,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
270
270
  // Need a large enough difference to allow scrolling.
271
271
  // This prevents infinite rendering loop.
272
272
  overflow: state.overflow ? "hidden" : undefined,
273
- ...style
273
+ ...style,
274
274
  }}
275
275
  onScroll={onScroll}
276
276
  {...other}
@@ -282,9 +282,9 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
282
282
  ref={shadowRef}
283
283
  tabIndex={-1}
284
284
  style={{
285
+ padding: 0,
285
286
  ...styles.shadow,
286
287
  ...style,
287
- padding: 0
288
288
  }}
289
289
  />
290
290
  </React.Fragment>