@firecms/ui 3.0.0-canary.107 → 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.
- package/dist/components/Menu.d.ts +2 -1
- package/dist/components/Select.d.ts +3 -3
- package/dist/components/Tooltip.d.ts +3 -2
- package/dist/index.css +56 -0
- package/dist/index.es.js +96 -89
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +95 -88
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.d.ts +1 -1
- package/package.json +108 -106
- package/src/components/Chip.tsx +1 -1
- package/src/components/InputLabel.tsx +4 -2
- package/src/components/Menu.tsx +30 -24
- package/src/components/Select.tsx +79 -90
- package/src/components/TextField.tsx +1 -1
- package/src/components/Tooltip.tsx +17 -9
- package/src/components/Typography.tsx +14 -14
- package/src/index.css +56 -0
- package/src/styles.ts +1 -1
@@ -7,7 +7,8 @@ export type MenuProps = {
|
|
7
7
|
onOpenChange?(open: boolean): void;
|
8
8
|
portalContainer?: HTMLElement | null;
|
9
9
|
};
|
10
|
-
|
10
|
+
declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLButtonElement>>;
|
11
|
+
export { Menu };
|
11
12
|
export type MenuItemProps = {
|
12
13
|
children: React.ReactNode;
|
13
14
|
dense?: boolean;
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React from "react";
|
1
|
+
import React, { ChangeEvent } from "react";
|
2
2
|
export type SelectProps = {
|
3
3
|
open?: boolean;
|
4
4
|
name?: string;
|
@@ -7,7 +7,7 @@ export type SelectProps = {
|
|
7
7
|
value?: string | string[];
|
8
8
|
className?: string;
|
9
9
|
inputClassName?: string;
|
10
|
-
onChange?: React.EventHandler<
|
10
|
+
onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
|
11
11
|
onValueChange?: (updatedValue: string) => void;
|
12
12
|
onMultiValueChange?: (updatedValue: string[]) => void;
|
13
13
|
placeholder?: React.ReactNode;
|
@@ -26,7 +26,7 @@ export type SelectProps = {
|
|
26
26
|
invisible?: boolean;
|
27
27
|
children?: React.ReactNode;
|
28
28
|
};
|
29
|
-
export declare
|
29
|
+
export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
|
30
30
|
export type SelectItemProps = {
|
31
31
|
value: string;
|
32
32
|
children?: React.ReactNode;
|
@@ -8,10 +8,11 @@ export type TooltipProps = {
|
|
8
8
|
sideOffset?: number;
|
9
9
|
title?: string | React.ReactNode;
|
10
10
|
delayDuration?: number;
|
11
|
-
|
11
|
+
asChild?: boolean;
|
12
12
|
tooltipClassName?: string;
|
13
13
|
tooltipStyle?: React.CSSProperties;
|
14
14
|
children: React.ReactNode;
|
15
|
+
className?: string;
|
15
16
|
style?: React.CSSProperties;
|
16
17
|
};
|
17
|
-
export declare const Tooltip: ({ open, defaultOpen, side, delayDuration, sideOffset, align, onOpenChange, title,
|
18
|
+
export declare const Tooltip: ({ open, defaultOpen, side, delayDuration, sideOffset, align, onOpenChange, title, tooltipClassName, tooltipStyle, children, asChild, className, style }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/index.css
ADDED
@@ -0,0 +1,56 @@
|
|
1
|
+
|
2
|
+
@layer utilities {
|
3
|
+
/* Chrome, Safari and Opera */
|
4
|
+
.no-scrollbar::-webkit-scrollbar {
|
5
|
+
display: none;
|
6
|
+
}
|
7
|
+
.no-scrollbar {
|
8
|
+
-ms-overflow-style: none; /* IE and Edge */
|
9
|
+
scrollbar-width: none; /* Firefox */
|
10
|
+
}
|
11
|
+
|
12
|
+
.typography-h1 {
|
13
|
+
@apply text-6xl font-headers font-light;
|
14
|
+
}
|
15
|
+
.typography-h2 {
|
16
|
+
@apply text-5xl font-headers font-light;
|
17
|
+
}
|
18
|
+
.typography-h3 {
|
19
|
+
@apply text-4xl font-headers font-normal;
|
20
|
+
}
|
21
|
+
.typography-h4 {
|
22
|
+
@apply text-3xl font-headers font-normal;
|
23
|
+
}
|
24
|
+
.typography-h5 {
|
25
|
+
@apply text-2xl font-headers font-normal;
|
26
|
+
}
|
27
|
+
.typography-h6 {
|
28
|
+
@apply text-xl font-headers font-medium;
|
29
|
+
}
|
30
|
+
.typography-body1 {
|
31
|
+
/*@apply text-base;*/
|
32
|
+
}
|
33
|
+
.typography-body2 {
|
34
|
+
@apply text-sm;
|
35
|
+
}
|
36
|
+
.typography-caption {
|
37
|
+
@apply text-xs;
|
38
|
+
}
|
39
|
+
.typography-label {
|
40
|
+
@apply text-sm font-medium;
|
41
|
+
}
|
42
|
+
.typography-inherit {
|
43
|
+
@apply text-inherit;
|
44
|
+
}
|
45
|
+
.typography-button {
|
46
|
+
@apply text-sm font-medium;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
|
50
|
+
a {
|
51
|
+
@apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
|
52
|
+
}
|
53
|
+
|
54
|
+
body {
|
55
|
+
@apply w-full min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center;
|
56
|
+
}
|
package/dist/index.es.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
2
2
|
import * as React from "react";
|
3
|
-
import React__default, { useEffect, useState, useCallback, useRef, useMemo, useLayoutEffect, useDeferredValue } from "react";
|
3
|
+
import React__default, { useEffect, useState, useCallback, useRef, useMemo, forwardRef, useLayoutEffect, useDeferredValue } from "react";
|
4
4
|
import * as Collapsible from "@radix-ui/react-collapsible";
|
5
5
|
import { clsx } from "clsx";
|
6
6
|
import { twMerge } from "tailwind-merge";
|
@@ -8,9 +8,9 @@ import * as locales from "date-fns/locale";
|
|
8
8
|
import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
|
9
9
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
10
10
|
import "material-icons/iconfont/filled.css";
|
11
|
-
import * as LabelPrimitive from "@radix-ui/react-label";
|
12
11
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
13
12
|
import { useDropzone } from "react-dropzone";
|
13
|
+
import * as LabelPrimitive from "@radix-ui/react-label";
|
14
14
|
import equal from "react-fast-compare";
|
15
15
|
import MarkdownIt from "markdown-it";
|
16
16
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
@@ -29,7 +29,7 @@ const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ri
|
|
29
29
|
const fieldBackgroundMixin = "bg-opacity-50 bg-slate-200 dark:bg-gray-800 dark:bg-opacity-60";
|
30
30
|
const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-slate-100 dark:bg-gray-800 dark:bg-opacity-0";
|
31
31
|
const fieldBackgroundDisabledMixin = "dark:bg-gray-800 bg-opacity-50 dark:bg-opacity-90";
|
32
|
-
const fieldBackgroundHoverMixin = "hover:bg-opacity-
|
32
|
+
const fieldBackgroundHoverMixin = "hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-40";
|
33
33
|
const defaultBorderMixin = "border-gray-100 dark:border-gray-800 dark:border-opacity-80";
|
34
34
|
const paperMixin = "bg-white rounded-md dark:bg-gray-950 border dark:border-gray-800 dark:border-opacity-80 border-gray-100";
|
35
35
|
const cardMixin = "bg-white border border-gray-100 dark:border-transparent rounded-md dark:bg-gray-950 dark:border-gray-800 dark:border-opacity-50 m-1 -p-1";
|
@@ -13641,7 +13641,7 @@ function Chip({
|
|
13641
13641
|
"div",
|
13642
13642
|
{
|
13643
13643
|
className: cls(
|
13644
|
-
"rounded-lg w-
|
13644
|
+
"rounded-lg w-max h-fit font-regular inline-flex gap-1",
|
13645
13645
|
"text-ellipsis",
|
13646
13646
|
onClick ? "cursor-pointer hover:bg-slate-300 hover:dark:bg-slate-700" : "",
|
13647
13647
|
sizeClassNames[size],
|
@@ -13715,27 +13715,6 @@ const IconButtonInner = ({
|
|
13715
13715
|
);
|
13716
13716
|
};
|
13717
13717
|
const IconButton = React__default.forwardRef(IconButtonInner);
|
13718
|
-
const Label = React.forwardRef(({
|
13719
|
-
className,
|
13720
|
-
border,
|
13721
|
-
onClick,
|
13722
|
-
...props
|
13723
|
-
}, ref) => /* @__PURE__ */ jsx(
|
13724
|
-
LabelPrimitive.Root,
|
13725
|
-
{
|
13726
|
-
ref,
|
13727
|
-
onClick,
|
13728
|
-
className: cls(
|
13729
|
-
"text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
13730
|
-
border && "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
|
13731
|
-
onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
|
13732
|
-
defaultBorderMixin,
|
13733
|
-
className
|
13734
|
-
),
|
13735
|
-
...props
|
13736
|
-
}
|
13737
|
-
));
|
13738
|
-
Label.displayName = LabelPrimitive.Root.displayName;
|
13739
13718
|
const defaultClasses = {
|
13740
13719
|
root: "origin-left transition-transform block whitespace-nowrap overflow-hidden text-overflow-ellipsis max-w-full",
|
13741
13720
|
shrink: "transform translate-y-[2px] scale-75 translate-x-[12px]",
|
@@ -13756,11 +13735,15 @@ const InputLabel = React.forwardRef(function InputLabel2(inProps, ref) {
|
|
13756
13735
|
className
|
13757
13736
|
);
|
13758
13737
|
return /* @__PURE__ */ jsx(
|
13759
|
-
|
13738
|
+
"label",
|
13760
13739
|
{
|
13740
|
+
className: cls(
|
13741
|
+
"text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
13742
|
+
defaultBorderMixin,
|
13743
|
+
computedClassName
|
13744
|
+
),
|
13761
13745
|
"data-shrink": shrink,
|
13762
13746
|
ref,
|
13763
|
-
className: computedClassName,
|
13764
13747
|
...other
|
13765
13748
|
}
|
13766
13749
|
);
|
@@ -13806,20 +13789,20 @@ const gutterBottomClasses = {
|
|
13806
13789
|
label: "mb-2"
|
13807
13790
|
};
|
13808
13791
|
const variantToClasses = {
|
13809
|
-
h1: "
|
13810
|
-
h2: "
|
13811
|
-
h3: "
|
13812
|
-
h4: "
|
13813
|
-
h5: "
|
13814
|
-
h6: "
|
13815
|
-
subtitle1: "
|
13816
|
-
subtitle2: "
|
13817
|
-
body1: "
|
13818
|
-
body2: "
|
13819
|
-
label: "
|
13820
|
-
inherit: "
|
13821
|
-
caption: "
|
13822
|
-
button: "
|
13792
|
+
h1: "typography-h1",
|
13793
|
+
h2: "typography-h2",
|
13794
|
+
h3: "typography-h3",
|
13795
|
+
h4: "typography-h4",
|
13796
|
+
h5: "typography-h5",
|
13797
|
+
h6: "typography-h6",
|
13798
|
+
subtitle1: "typography-subtitle1",
|
13799
|
+
subtitle2: "typography-subtitle2",
|
13800
|
+
body1: "typography-body1",
|
13801
|
+
body2: "typography-body2",
|
13802
|
+
label: "typography-label",
|
13803
|
+
inherit: "typography-inherit",
|
13804
|
+
caption: "typography-caption",
|
13805
|
+
button: "typography-button"
|
13823
13806
|
};
|
13824
13807
|
function Typography({
|
13825
13808
|
align = "inherit",
|
@@ -15139,6 +15122,27 @@ function InfoLabel({
|
|
15139
15122
|
}
|
15140
15123
|
);
|
15141
15124
|
}
|
15125
|
+
const Label = React.forwardRef(({
|
15126
|
+
className,
|
15127
|
+
border,
|
15128
|
+
onClick,
|
15129
|
+
...props
|
15130
|
+
}, ref) => /* @__PURE__ */ jsx(
|
15131
|
+
LabelPrimitive.Root,
|
15132
|
+
{
|
15133
|
+
ref,
|
15134
|
+
onClick,
|
15135
|
+
className: cls(
|
15136
|
+
"text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
|
15137
|
+
border && "border border-gray-300 dark:border-gray-700 rounded-md px-3 py-1.5",
|
15138
|
+
onClick && "hover:cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-800",
|
15139
|
+
defaultBorderMixin,
|
15140
|
+
className
|
15141
|
+
),
|
15142
|
+
...props
|
15143
|
+
}
|
15144
|
+
));
|
15145
|
+
Label.displayName = LabelPrimitive.Root.displayName;
|
15142
15146
|
function LoadingButton({
|
15143
15147
|
children,
|
15144
15148
|
loading,
|
@@ -15189,27 +15193,33 @@ const Markdown = React__default.memo(
|
|
15189
15193
|
},
|
15190
15194
|
equal
|
15191
15195
|
);
|
15192
|
-
|
15196
|
+
const Menu = React__default.forwardRef(({
|
15193
15197
|
children,
|
15194
15198
|
trigger,
|
15195
15199
|
open,
|
15196
15200
|
defaultOpen,
|
15197
15201
|
onOpenChange,
|
15198
15202
|
portalContainer
|
15199
|
-
})
|
15200
|
-
|
15201
|
-
|
15202
|
-
|
15203
|
-
|
15204
|
-
|
15205
|
-
|
15206
|
-
|
15207
|
-
|
15208
|
-
|
15209
|
-
|
15210
|
-
|
15211
|
-
|
15212
|
-
}
|
15203
|
+
}, ref) => /* @__PURE__ */ jsxs(
|
15204
|
+
DropdownMenu.Root,
|
15205
|
+
{
|
15206
|
+
open,
|
15207
|
+
defaultOpen,
|
15208
|
+
onOpenChange,
|
15209
|
+
children: [
|
15210
|
+
/* @__PURE__ */ jsx(
|
15211
|
+
DropdownMenu.Trigger,
|
15212
|
+
{
|
15213
|
+
ref,
|
15214
|
+
asChild: true,
|
15215
|
+
children: trigger
|
15216
|
+
}
|
15217
|
+
),
|
15218
|
+
/* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(DropdownMenu.Content, { className: cls(paperMixin, "shadow py-2 z-30"), children }) })
|
15219
|
+
]
|
15220
|
+
}
|
15221
|
+
));
|
15222
|
+
Menu.displayName = "Menu";
|
15213
15223
|
function MenuItem({
|
15214
15224
|
children,
|
15215
15225
|
dense = false,
|
@@ -15795,7 +15805,7 @@ function SearchBar({
|
|
15795
15805
|
}
|
15796
15806
|
);
|
15797
15807
|
}
|
15798
|
-
|
15808
|
+
const Select = forwardRef(({
|
15799
15809
|
inputRef,
|
15800
15810
|
open,
|
15801
15811
|
name,
|
@@ -15822,12 +15832,12 @@ function Select({
|
|
15822
15832
|
invisible,
|
15823
15833
|
children,
|
15824
15834
|
...props
|
15825
|
-
}) {
|
15826
|
-
const [openInternal, setOpenInternal] =
|
15835
|
+
}, ref) => {
|
15836
|
+
const [openInternal, setOpenInternal] = useState(false);
|
15827
15837
|
useEffect(() => {
|
15828
15838
|
setOpenInternal(open ?? false);
|
15829
15839
|
}, [open]);
|
15830
|
-
const onValueChangeInternal =
|
15840
|
+
const onValueChangeInternal = useCallback((newValue) => {
|
15831
15841
|
if (multiple) {
|
15832
15842
|
if (Array.isArray(value) && value.includes(newValue)) {
|
15833
15843
|
onMultiValueChange?.(value.filter((v) => v !== newValue));
|
@@ -15895,34 +15905,30 @@ function Select({
|
|
15895
15905
|
inputClassName
|
15896
15906
|
),
|
15897
15907
|
children: [
|
15898
|
-
/* @__PURE__ */ jsx(
|
15899
|
-
"
|
15900
|
-
"overflow-visible",
|
15901
|
-
size === "small" ? "h-[42px]" : "h-[64px]"
|
15902
|
-
), children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { placeholder, className: "w-full", children: [
|
15903
|
-
renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 max-w-full", children: renderValue ? renderValue(v, i) : v }, v)) : typeof value === "string" ? renderValue ? renderValue(value, 0) : value : placeholder),
|
15904
|
-
renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value ?? []) : null,
|
15905
|
-
!renderValue && !renderValues && hasValue
|
15906
|
-
] }) }),
|
15907
|
-
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { className: cls(
|
15908
|
-
"px-2 h-full flex items-center"
|
15909
|
-
), children: /* @__PURE__ */ jsx(
|
15910
|
-
ExpandMoreIcon,
|
15908
|
+
/* @__PURE__ */ jsx(
|
15909
|
+
"div",
|
15911
15910
|
{
|
15912
|
-
|
15913
|
-
className: cls(
|
15911
|
+
ref,
|
15912
|
+
className: cls(
|
15913
|
+
"flex-grow w-full max-w-full flex flex-row gap-2 items-center",
|
15914
|
+
"overflow-visible",
|
15915
|
+
size === "small" ? "h-[42px]" : "h-[64px]"
|
15916
|
+
),
|
15917
|
+
children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { placeholder, className: "w-full", children: [
|
15918
|
+
renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 max-w-full", children: renderValue ? renderValue(v, i) : v }, v)) : typeof value === "string" ? renderValue ? renderValue(value, 0) : value : placeholder),
|
15919
|
+
renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value ?? []) : null,
|
15920
|
+
!renderValue && !renderValues && hasValue
|
15921
|
+
] })
|
15914
15922
|
}
|
15915
|
-
)
|
15923
|
+
),
|
15924
|
+
/* @__PURE__ */ jsx(SelectPrimitive.Icon, { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(ExpandMoreIcon, { size: "small", className: cls("transition", open ? "rotate-180" : "") }) })
|
15916
15925
|
]
|
15917
15926
|
}
|
15918
15927
|
),
|
15919
15928
|
endAdornment && /* @__PURE__ */ jsx(
|
15920
15929
|
"div",
|
15921
15930
|
{
|
15922
|
-
className: cls(
|
15923
|
-
"absolute h-full flex items-center",
|
15924
|
-
size === "small" ? "right-10" : "right-14"
|
15925
|
-
),
|
15931
|
+
className: cls("absolute h-full flex items-center", size === "small" ? "right-10" : "right-14"),
|
15926
15932
|
onClick: (e) => e.stopPropagation(),
|
15927
15933
|
children: endAdornment
|
15928
15934
|
}
|
@@ -15939,9 +15945,7 @@ function Select({
|
|
15939
15945
|
SelectPrimitive.Viewport,
|
15940
15946
|
{
|
15941
15947
|
className: "p-1",
|
15942
|
-
style: {
|
15943
|
-
maxHeight: "var(--radix-select-content-available-height)"
|
15944
|
-
},
|
15948
|
+
style: { maxHeight: "var(--radix-select-content-available-height)" },
|
15945
15949
|
children
|
15946
15950
|
}
|
15947
15951
|
)
|
@@ -15950,7 +15954,8 @@ function Select({
|
|
15950
15954
|
]
|
15951
15955
|
}
|
15952
15956
|
);
|
15953
|
-
}
|
15957
|
+
});
|
15958
|
+
Select.displayName = "Select";
|
15954
15959
|
function SelectItem({
|
15955
15960
|
value,
|
15956
15961
|
children,
|
@@ -16451,7 +16456,7 @@ function TextField({
|
|
16451
16456
|
InputLabel,
|
16452
16457
|
{
|
16453
16458
|
className: cls(
|
16454
|
-
"
|
16459
|
+
"absolute",
|
16455
16460
|
size === "medium" ? "top-1" : "-top-1",
|
16456
16461
|
!error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600",
|
16457
16462
|
disabled ? "opacity-50" : ""
|
@@ -16481,17 +16486,19 @@ const Tooltip = ({
|
|
16481
16486
|
align,
|
16482
16487
|
onOpenChange,
|
16483
16488
|
title,
|
16484
|
-
className,
|
16485
|
-
style,
|
16486
16489
|
tooltipClassName,
|
16487
16490
|
tooltipStyle,
|
16488
|
-
children
|
16491
|
+
children,
|
16492
|
+
asChild = false,
|
16493
|
+
className,
|
16494
|
+
style
|
16489
16495
|
}) => {
|
16490
16496
|
useInjectStyles("Tooltip", styles);
|
16491
16497
|
if (!title)
|
16492
16498
|
return /* @__PURE__ */ jsx(Fragment, { children });
|
16499
|
+
const trigger = asChild ? /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children }) : /* @__PURE__ */ jsx(TooltipPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { style, className, children }) });
|
16493
16500
|
return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, onOpenChange, defaultOpen, children: [
|
16494
|
-
|
16501
|
+
trigger,
|
16495
16502
|
/* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
|
16496
16503
|
TooltipPrimitive.Content,
|
16497
16504
|
{
|