@firecms/ui 3.0.0-canary.102 → 3.0.0-canary.103

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 (13) hide show
  1. package/dist/components/Popover.d.ts +2 -1
  2. package/dist/index.es.js +14 -11
  3. package/dist/index.es.js.map +1 -1
  4. package/dist/index.umd.js +13 -10
  5. package/dist/index.umd.js.map +1 -1
  6. package/dist/styles.d.ts +1 -1
  7. package/package.json +2 -2
  8. package/src/components/Button.tsx +4 -4
  9. package/src/components/IconButton.tsx +1 -1
  10. package/src/components/Popover.tsx +15 -13
  11. package/src/components/Sheet.tsx +9 -9
  12. package/src/components/Tabs.tsx +1 -1
  13. package/src/styles.ts +1 -1
package/dist/styles.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate
3
3
  export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
4
4
  export declare const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
5
5
  export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
6
- export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90";
6
+ export declare const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
7
7
  export declare const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-60";
8
8
  export declare const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
9
9
  export declare const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
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.102",
4
+ "version": "3.0.0-canary.103",
5
5
  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
6
6
  "funding": {
7
7
  "url": "https://github.com/sponsors/firecmsco"
@@ -102,7 +102,7 @@
102
102
  "src",
103
103
  "tailwind.config.js"
104
104
  ],
105
- "gitHead": "db22751d03517d639f4b23a26aa1fff81b11ee8d",
105
+ "gitHead": "c33fe736fee99aaf30789aed66e4385563011783",
106
106
  "publishConfig": {
107
107
  "access": "public"
108
108
  }
package/src/components/Button.tsx CHANGED
@@ -38,10 +38,10 @@ const ButtonInner = React.forwardRef<
38
38
  "w-full": fullWidth,
39
39
  "w-fit": !fullWidth,
40
40
  // Filled Variants
41
- "border border-transparent bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white": variant === "filled" && color === "primary" && !disabled,
42
- "border border-transparent bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white": variant === "filled" && color === "secondary" && !disabled,
43
- "border border-transparent bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white": variant === "filled" && color === "error" && !disabled,
44
- "border border-transparent bg-slate-200 hover:bg-slate-300 focus:ring-slate-400 shadow hover:ring-1 hover:ring-slate-400 text-text-primary dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
41
+ "border border-transparent bg-primary hover:bg-primary-dark focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
42
+ "border border-transparent bg-secondary hover:bg-secondary-dark focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
43
+ "border border-transparent bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
44
+ "border border-transparent bg-slate-200 hover:bg-slate-300 focus:ring-slate-400 shadow hover:ring-1 hover:ring-slate-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
45
45
  // Text Variants
46
46
  "border border-transparent text-primary hover:bg-slate-200 dark:hover:bg-gray-900": variant === "text" && color === "primary" && !disabled,
47
47
  "border border-transparent text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
package/src/components/IconButton.tsx CHANGED
@@ -15,7 +15,7 @@ export type IconButtonProps<C extends React.ElementType> =
15
15
  }
16
16
 
17
17
  const buttonClasses =
18
- "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-50";
18
+ "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800";
19
19
  const baseClasses =
20
20
  "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
21
21
  const colorClasses = "text-slate-600 visited:text-slate-600 dark:text-slate-300 dark:visited:text-gray-300";
package/src/components/Popover.tsx CHANGED
@@ -24,6 +24,7 @@ export interface PopoverProps {
24
24
  enabled?: boolean;
25
25
  modal?: boolean;
26
26
  className?: string;
27
+ portalContainer?: HTMLElement | null;
27
28
  }
28
29
 
29
30
  export function Popover({
@@ -41,6 +42,7 @@ export function Popover({
41
42
  avoidCollisions,
42
43
  enabled = true,
43
44
  modal = false,
45
+ portalContainer,
44
46
  className
45
47
  }: PopoverProps) {
46
48
 
@@ -51,22 +53,22 @@ export function Popover({
51
53
 
52
54
  return <PopoverPrimitive.Root open={open}
53
55
  onOpenChange={onOpenChange}
54
- modal={modal}
55
- >
56
+ modal={modal}>
56
57
  <PopoverPrimitive.Trigger asChild>
57
58
  {trigger}
58
59
  </PopoverPrimitive.Trigger>
59
- <PopoverPrimitive.Portal>
60
- <PopoverPrimitive.Content className={cls(paperMixin,
61
- "PopoverContent shadow z-40", className)}
62
- side={side}
63
- sideOffset={sideOffset}
64
- align={align}
65
- alignOffset={alignOffset}
66
- arrowPadding={arrowPadding}
67
- sticky={sticky}
68
- hideWhenDetached={hideWhenDetached}
69
- avoidCollisions={avoidCollisions}>
60
+ <PopoverPrimitive.Portal container={portalContainer}>
61
+ <PopoverPrimitive.Content
62
+ className={cls(paperMixin,
63
+ "PopoverContent shadow z-40", className)}
64
+ side={side}
65
+ sideOffset={sideOffset}
66
+ align={align}
67
+ alignOffset={alignOffset}
68
+ arrowPadding={arrowPadding}
69
+ sticky={sticky}
70
+ hideWhenDetached={hideWhenDetached}
71
+ avoidCollisions={avoidCollisions}>
70
72
 
71
73
  {children}
72
74
  <PopoverPrimitive.Arrow className="fill-white dark:fill-slate-950"/>
package/src/components/Sheet.tsx CHANGED
@@ -1,7 +1,7 @@
1
- import React, { useEffect } from "react";
2
- import * as DialogPrimitive from "@radix-ui/react-dialog";
1
+ import React, { useEffect, useState } from "react";
3
2
  import { cls } from "../util";
4
3
  import { defaultBorderMixin } from "../styles";
4
+ import * as DialogPrimitive from "@radix-ui/react-dialog";
5
5
 
6
6
  interface SheetProps {
7
7
  children: React.ReactNode;
@@ -26,8 +26,7 @@ export const Sheet: React.FC<SheetProps> = ({
26
26
  overlayClassName,
27
27
  ...props
28
28
  }) => {
29
-
30
- const [displayed, setDisplayed] = React.useState(false);
29
+ const [displayed, setDisplayed] = useState(false);
31
30
 
32
31
  useEffect(() => {
33
32
  const timeout = setTimeout(() => {
@@ -43,15 +42,14 @@ export const Sheet: React.FC<SheetProps> = ({
43
42
  right: "translate-x-full"
44
43
  };
45
44
 
46
- const borderClass:Record<string, string> = {
45
+ const borderClass: Record<string, string> = {
47
46
  top: "border-b",
48
47
  bottom: "border-t",
49
48
  left: "border-r",
50
49
  right: "border-l"
51
- }
50
+ };
52
51
 
53
52
  return (
54
-
55
53
  <DialogPrimitive.Root open={displayed || open}
56
54
  onOpenChange={onOpenChange}>
57
55
  <DialogPrimitive.Portal>
@@ -60,18 +58,20 @@ export const Sheet: React.FC<SheetProps> = ({
60
58
  </DialogPrimitive.Title>
61
59
  <DialogPrimitive.Overlay
62
60
  className={cls(
63
- "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
61
+ "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm",
64
62
  "bg-black bg-opacity-50",
65
63
  "dark:bg-gray-900 dark:bg-opacity-60",
66
64
  displayed && open ? "opacity-100" : "opacity-0",
67
65
  overlayClassName
68
66
  )}
69
67
  style={{
70
- pointerEvents: displayed ? "auto" : "none",
68
+ pointerEvents: displayed ? "auto" : "none"
71
69
  }}
70
+ onClick={() => onOpenChange && onOpenChange(false)}
72
71
  />
73
72
  <DialogPrimitive.Content
74
73
  {...props}
74
+ onFocusCapture={(event) => event.preventDefault()}
75
75
  className={cls(
76
76
  borderClass[side],
77
77
  defaultBorderMixin,
package/src/components/Tabs.tsx CHANGED
@@ -54,7 +54,7 @@ export function Tab({
54
54
  // "data-[state=active]:bg-slate-50 data-[state=active]:dark:bg-slate-800",
55
55
  className)}>
56
56
  <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
57
- "hover:bg-slate-100 dark:hover:bg-slate-800")}>
57
+ "hover:bg-slate-200 hover:bg-opacity-75 dark:hover:bg-slate-800")}>
58
58
  {children}
59
59
  </div>
60
60
  </TabsPrimitive.Trigger>;
package/src/styles.ts CHANGED
@@ -3,7 +3,7 @@ export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 foc
3
3
  export const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
4
4
  export const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
5
5
  export const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
6
- export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-90";
6
+ export const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
7
7
  export const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-gray-700 dark:hover:bg-opacity-60";
8
8
  export const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
9
9
  export const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";