@ceed/cds 1.3.0-next.3 → 1.3.0-next.4
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/Tabs/Tabs.d.ts +7 -4
- package/dist/index.cjs +45 -33
- package/dist/index.js +47 -28
- package/framer/index.js +34 -34
- package/package.json +1 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare const Tabs: import("
|
|
2
|
+
declare const Tabs: import("@emotion/styled").StyledComponent<Omit<Omit<import("@mui/base").TabsOwnProps, "slots" | "slotProps"> & {
|
|
3
3
|
color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").TabsPropsColorOverrides> | undefined;
|
|
4
4
|
size?: import("@mui/types").OverridableStringUnion<"sm" | "md" | "lg", import("@mui/joy").TabsPropsSizeOverrides> | undefined;
|
|
5
5
|
sx?: import("@mui/joy/styles/types").SxProps | undefined;
|
|
6
6
|
variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").TabsPropsVariantOverrides> | undefined;
|
|
7
7
|
} & import("@mui/joy").TabsSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
8
8
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
|
9
|
-
}, "children" | "color" | "direction" | "defaultValue" | "className" | "onChange" | "variant" | "sx" | "size" | "orientation" | "value" | "selectionFollowsFocus" | keyof import("@mui/joy").TabsSlotsAndSlotProps
|
|
9
|
+
}, "children" | "color" | "direction" | "defaultValue" | "className" | "onChange" | "variant" | "sx" | "size" | "orientation" | "value" | "selectionFollowsFocus" | keyof import("@mui/joy").TabsSlotsAndSlotProps> & import("framer-motion").MotionProps, "ref"> & React.RefAttributes<HTMLElement | SVGElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme>, {}, {}>;
|
|
10
10
|
export { Tabs };
|
|
11
|
-
declare const Tab:
|
|
11
|
+
declare const Tab: React.ForwardRefExoticComponent<Omit<Omit<{
|
|
12
12
|
action?: React.Ref<{
|
|
13
13
|
focusVisible(): void;
|
|
14
14
|
}> | undefined;
|
|
@@ -24,7 +24,10 @@ declare const Tab: import("framer-motion").CustomDomComponent<{
|
|
|
24
24
|
variant?: import("@mui/types").OverridableStringUnion<import("@mui/joy").VariantProp, import("@mui/joy").TabPropsVariantOverrides> | undefined;
|
|
25
25
|
} & import("@mui/joy").TabSlotsAndSlotProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
26
26
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
27
|
-
}, "color" | "onChange" | "variant" | "sx" | "disabled" | "orientation" | "action" | "value" | "disableIndicator" | "indicatorPlacement" | "indicatorInset" | keyof import("@mui/joy").TabSlotsAndSlotProps
|
|
27
|
+
}, "color" | "onChange" | "variant" | "sx" | "disabled" | "orientation" | "action" | "value" | "disableIndicator" | "indicatorPlacement" | "indicatorInset" | keyof import("@mui/joy").TabSlotsAndSlotProps> & import("framer-motion").MotionProps, "ref"> & React.RefAttributes<HTMLElement | SVGElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/joy").Theme> & {
|
|
28
|
+
startDecorator?: React.ReactNode;
|
|
29
|
+
endDecorator?: React.ReactNode;
|
|
30
|
+
}, "ref"> & React.RefAttributes<HTMLElement | SVGElement>>;
|
|
28
31
|
export { Tab };
|
|
29
32
|
declare const TabList: import("framer-motion").CustomDomComponent<{
|
|
30
33
|
color?: import("@mui/types").OverridableStringUnion<import("@mui/joy").ColorPaletteProp, import("@mui/joy").TabListPropsColorOverrides> | undefined;
|
package/dist/index.cjs
CHANGED
|
@@ -5300,13 +5300,25 @@ var Switch = (props) => {
|
|
|
5300
5300
|
Switch.displayName = "Switch";
|
|
5301
5301
|
|
|
5302
5302
|
// src/components/Tabs/Tabs.tsx
|
|
5303
|
+
var import_react41 = __toESM(require("react"));
|
|
5303
5304
|
var import_joy53 = require("@mui/joy");
|
|
5304
5305
|
var import_framer_motion29 = require("framer-motion");
|
|
5305
|
-
var MotionTabs = (0, import_framer_motion29.motion)(import_joy53.Tabs)
|
|
5306
|
+
var MotionTabs = (0, import_joy53.styled)((0, import_framer_motion29.motion)(import_joy53.Tabs))(({ theme }) => ({
|
|
5307
|
+
backgroundColor: theme.palette.background.body
|
|
5308
|
+
}));
|
|
5306
5309
|
var Tabs = MotionTabs;
|
|
5307
5310
|
Tabs.displayName = "Tabs";
|
|
5308
|
-
var MotionTab = (0, import_framer_motion29.motion)(import_joy53.Tab)
|
|
5309
|
-
|
|
5311
|
+
var MotionTab = (0, import_joy53.styled)((0, import_framer_motion29.motion)(import_joy53.Tab))(({ theme }) => ({
|
|
5312
|
+
[`&:not(.${import_joy53.tabClasses.selected})`]: {
|
|
5313
|
+
color: theme.palette.neutral[700]
|
|
5314
|
+
},
|
|
5315
|
+
[`&.${import_joy53.tabClasses.variantPlain}`]: {
|
|
5316
|
+
backgroundColor: theme.palette.background.body
|
|
5317
|
+
}
|
|
5318
|
+
}));
|
|
5319
|
+
var Tab = (0, import_react41.forwardRef)(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
|
|
5320
|
+
return /* @__PURE__ */ import_react41.default.createElement(MotionTab, { ...props, ref }, startDecorator, children, endDecorator);
|
|
5321
|
+
});
|
|
5310
5322
|
Tab.displayName = "Tab";
|
|
5311
5323
|
var MotionTabList = (0, import_framer_motion29.motion)(import_joy53.TabList);
|
|
5312
5324
|
var TabList = MotionTabList;
|
|
@@ -5316,7 +5328,7 @@ var TabPanel = MotionTabPanel;
|
|
|
5316
5328
|
TabPanel.displayName = "TabPanel";
|
|
5317
5329
|
|
|
5318
5330
|
// src/components/ThemeProvider/ThemeProvider.tsx
|
|
5319
|
-
var
|
|
5331
|
+
var import_react42 = __toESM(require("react"));
|
|
5320
5332
|
var import_joy54 = require("@mui/joy");
|
|
5321
5333
|
var colorScheme = {
|
|
5322
5334
|
palette: {
|
|
@@ -5566,12 +5578,12 @@ var defaultTheme = (0, import_joy54.extendTheme)({
|
|
|
5566
5578
|
});
|
|
5567
5579
|
function ThemeProvider(props) {
|
|
5568
5580
|
const theme = props.theme || defaultTheme;
|
|
5569
|
-
return /* @__PURE__ */
|
|
5581
|
+
return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(import_joy54.CssVarsProvider, { theme }, /* @__PURE__ */ import_react42.default.createElement(import_joy54.CssBaseline, null), props.children));
|
|
5570
5582
|
}
|
|
5571
5583
|
ThemeProvider.displayName = "ThemeProvider";
|
|
5572
5584
|
|
|
5573
5585
|
// src/components/Uploader/Uploader.tsx
|
|
5574
|
-
var
|
|
5586
|
+
var import_react43 = __toESM(require("react"));
|
|
5575
5587
|
var import_joy55 = require("@mui/joy");
|
|
5576
5588
|
var import_CloudUploadRounded = __toESM(require("@mui/icons-material/CloudUploadRounded"));
|
|
5577
5589
|
var import_UploadFileRounded = __toESM(require("@mui/icons-material/UploadFileRounded"));
|
|
@@ -5689,7 +5701,7 @@ var getFileSize = (n) => {
|
|
|
5689
5701
|
};
|
|
5690
5702
|
var Preview = (props) => {
|
|
5691
5703
|
const { files, uploaded, onDelete } = props;
|
|
5692
|
-
return /* @__PURE__ */
|
|
5704
|
+
return /* @__PURE__ */ import_react43.default.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ import_react43.default.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ import_react43.default.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ import_react43.default.createElement(UploadFileIcon, null), /* @__PURE__ */ import_react43.default.createElement(Stack_default, { flex: "1" }, /* @__PURE__ */ import_react43.default.createElement(Typography_default, { level: "body-sm", textColor: "common.black" }, file.name), !!file.size && /* @__PURE__ */ import_react43.default.createElement(
|
|
5693
5705
|
Typography_default,
|
|
5694
5706
|
{
|
|
5695
5707
|
level: "body-xs",
|
|
@@ -5698,7 +5710,7 @@ var Preview = (props) => {
|
|
|
5698
5710
|
textColor: "text.tertiary"
|
|
5699
5711
|
},
|
|
5700
5712
|
getFileSize(file.size)
|
|
5701
|
-
)), /* @__PURE__ */
|
|
5713
|
+
)), /* @__PURE__ */ import_react43.default.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ import_react43.default.createElement(ClearIcon2, null))))));
|
|
5702
5714
|
};
|
|
5703
5715
|
var UploaderRoot = (0, import_joy55.styled)(Stack_default, {
|
|
5704
5716
|
name: "Uploader",
|
|
@@ -5735,7 +5747,7 @@ var UploaderIcon = (0, import_joy55.styled)(import_CloudUploadRounded.default, {
|
|
|
5735
5747
|
height: "32px"
|
|
5736
5748
|
})
|
|
5737
5749
|
);
|
|
5738
|
-
var Uploader =
|
|
5750
|
+
var Uploader = import_react43.default.memo(
|
|
5739
5751
|
(props) => {
|
|
5740
5752
|
const {
|
|
5741
5753
|
accept,
|
|
@@ -5750,19 +5762,19 @@ var Uploader = import_react42.default.memo(
|
|
|
5750
5762
|
disabled,
|
|
5751
5763
|
onDelete
|
|
5752
5764
|
} = props;
|
|
5753
|
-
const dropZoneRef = (0,
|
|
5754
|
-
const inputRef = (0,
|
|
5755
|
-
const [errorText, setErrorText] = (0,
|
|
5756
|
-
const [files, setFiles] = (0,
|
|
5757
|
-
const [uploaded, setUploaded] = (0,
|
|
5765
|
+
const dropZoneRef = (0, import_react43.useRef)(null);
|
|
5766
|
+
const inputRef = (0, import_react43.useRef)(null);
|
|
5767
|
+
const [errorText, setErrorText] = (0, import_react43.useState)();
|
|
5768
|
+
const [files, setFiles] = (0, import_react43.useState)([]);
|
|
5769
|
+
const [uploaded, setUploaded] = (0, import_react43.useState)(
|
|
5758
5770
|
props.uploaded || []
|
|
5759
5771
|
);
|
|
5760
|
-
const [previewState, setPreviewState] = (0,
|
|
5761
|
-
const accepts = (0,
|
|
5772
|
+
const [previewState, setPreviewState] = (0, import_react43.useState)("idle");
|
|
5773
|
+
const accepts = (0, import_react43.useMemo)(
|
|
5762
5774
|
() => accept.split(",").map((accept2) => accept2.trim()),
|
|
5763
5775
|
[accept]
|
|
5764
5776
|
);
|
|
5765
|
-
const parsedAccepts = (0,
|
|
5777
|
+
const parsedAccepts = (0, import_react43.useMemo)(
|
|
5766
5778
|
() => accepts.flatMap((type) => {
|
|
5767
5779
|
if (["image/*", "video/*", "audio/*"].includes(type)) {
|
|
5768
5780
|
return ALL_EXTENSIONS_BY_TYPE[type];
|
|
@@ -5771,7 +5783,7 @@ var Uploader = import_react42.default.memo(
|
|
|
5771
5783
|
}),
|
|
5772
5784
|
[accepts]
|
|
5773
5785
|
);
|
|
5774
|
-
const helperText = (0,
|
|
5786
|
+
const helperText = (0, import_react43.useMemo)(() => {
|
|
5775
5787
|
const [allAcceptedTypes, acceptedTypes] = [
|
|
5776
5788
|
accepts.filter(
|
|
5777
5789
|
(accept2) => ["image/*", "video/*", "audio/*"].includes(accept2)
|
|
@@ -5804,15 +5816,15 @@ var Uploader = import_react42.default.memo(
|
|
|
5804
5816
|
}
|
|
5805
5817
|
return helperTexts.join(", ");
|
|
5806
5818
|
}, [accepts, maxFileTotalSize, maxCount]);
|
|
5807
|
-
const error = (0,
|
|
5819
|
+
const error = (0, import_react43.useMemo)(
|
|
5808
5820
|
() => !!errorText || props.error,
|
|
5809
5821
|
[props.error, errorText]
|
|
5810
5822
|
);
|
|
5811
|
-
const showDropZone = (0,
|
|
5823
|
+
const showDropZone = (0, import_react43.useMemo)(
|
|
5812
5824
|
() => !maxCount || maxCount && [...uploaded, ...files].length !== maxCount,
|
|
5813
5825
|
[files, maxCount, uploaded]
|
|
5814
5826
|
);
|
|
5815
|
-
const addFiles = (0,
|
|
5827
|
+
const addFiles = (0, import_react43.useCallback)(
|
|
5816
5828
|
(uploads) => {
|
|
5817
5829
|
try {
|
|
5818
5830
|
const types = parsedAccepts.map((type) => type.replace(".", "")) || [];
|
|
@@ -5869,7 +5881,7 @@ var Uploader = import_react42.default.memo(
|
|
|
5869
5881
|
onChange
|
|
5870
5882
|
]
|
|
5871
5883
|
);
|
|
5872
|
-
(0,
|
|
5884
|
+
(0, import_react43.useEffect)(() => {
|
|
5873
5885
|
if (!dropZoneRef.current || disabled) {
|
|
5874
5886
|
return;
|
|
5875
5887
|
}
|
|
@@ -5917,7 +5929,7 @@ var Uploader = import_react42.default.memo(
|
|
|
5917
5929
|
);
|
|
5918
5930
|
return () => cleanup?.();
|
|
5919
5931
|
}, [disabled, addFiles]);
|
|
5920
|
-
(0,
|
|
5932
|
+
(0, import_react43.useEffect)(() => {
|
|
5921
5933
|
if (inputRef.current && minCount) {
|
|
5922
5934
|
if (files.length < minCount) {
|
|
5923
5935
|
inputRef.current.setCustomValidity(
|
|
@@ -5928,14 +5940,14 @@ var Uploader = import_react42.default.memo(
|
|
|
5928
5940
|
}
|
|
5929
5941
|
}
|
|
5930
5942
|
}, [inputRef, files, minCount]);
|
|
5931
|
-
const handleFileChanged = (0,
|
|
5943
|
+
const handleFileChanged = (0, import_react43.useCallback)(
|
|
5932
5944
|
(event) => {
|
|
5933
5945
|
const files2 = Array.from(event.target.files || []);
|
|
5934
5946
|
addFiles(files2);
|
|
5935
5947
|
},
|
|
5936
5948
|
[addFiles]
|
|
5937
5949
|
);
|
|
5938
|
-
const handleDeleteFile = (0,
|
|
5950
|
+
const handleDeleteFile = (0, import_react43.useCallback)(
|
|
5939
5951
|
(deletedFile) => {
|
|
5940
5952
|
if (deletedFile instanceof File) {
|
|
5941
5953
|
setFiles((current) => {
|
|
@@ -5957,10 +5969,10 @@ var Uploader = import_react42.default.memo(
|
|
|
5957
5969
|
},
|
|
5958
5970
|
[name, onChange, onDelete]
|
|
5959
5971
|
);
|
|
5960
|
-
const handleUploaderButtonClick = (0,
|
|
5972
|
+
const handleUploaderButtonClick = (0, import_react43.useCallback)(() => {
|
|
5961
5973
|
inputRef.current?.click();
|
|
5962
5974
|
}, []);
|
|
5963
|
-
const uploader = /* @__PURE__ */
|
|
5975
|
+
const uploader = /* @__PURE__ */ import_react43.default.createElement(
|
|
5964
5976
|
FileDropZone,
|
|
5965
5977
|
{
|
|
5966
5978
|
state: previewState,
|
|
@@ -5968,8 +5980,8 @@ var Uploader = import_react42.default.memo(
|
|
|
5968
5980
|
ref: dropZoneRef,
|
|
5969
5981
|
onClick: handleUploaderButtonClick
|
|
5970
5982
|
},
|
|
5971
|
-
/* @__PURE__ */
|
|
5972
|
-
/* @__PURE__ */
|
|
5983
|
+
/* @__PURE__ */ import_react43.default.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ import_react43.default.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText) })),
|
|
5984
|
+
/* @__PURE__ */ import_react43.default.createElement(
|
|
5973
5985
|
VisuallyHiddenInput,
|
|
5974
5986
|
{
|
|
5975
5987
|
disabled,
|
|
@@ -5994,7 +6006,7 @@ var Uploader = import_react42.default.memo(
|
|
|
5994
6006
|
}
|
|
5995
6007
|
)
|
|
5996
6008
|
);
|
|
5997
|
-
return /* @__PURE__ */
|
|
6009
|
+
return /* @__PURE__ */ import_react43.default.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ import_react43.default.createElement(
|
|
5998
6010
|
FormControl_default,
|
|
5999
6011
|
{
|
|
6000
6012
|
size,
|
|
@@ -6002,10 +6014,10 @@ var Uploader = import_react42.default.memo(
|
|
|
6002
6014
|
disabled,
|
|
6003
6015
|
required: !!minCount
|
|
6004
6016
|
},
|
|
6005
|
-
label && /* @__PURE__ */
|
|
6017
|
+
label && /* @__PURE__ */ import_react43.default.createElement(FormLabel_default, null, label),
|
|
6006
6018
|
uploader,
|
|
6007
|
-
/* @__PURE__ */
|
|
6008
|
-
), [...uploaded, ...files].length > 0 && /* @__PURE__ */
|
|
6019
|
+
/* @__PURE__ */ import_react43.default.createElement(FormHelperText_default, null, /* @__PURE__ */ import_react43.default.createElement(Stack_default, null, errorText && /* @__PURE__ */ import_react43.default.createElement("div", null, errorText), /* @__PURE__ */ import_react43.default.createElement("div", null, helperText)))
|
|
6020
|
+
), [...uploaded, ...files].length > 0 && /* @__PURE__ */ import_react43.default.createElement(
|
|
6009
6021
|
Preview,
|
|
6010
6022
|
{
|
|
6011
6023
|
files,
|
package/dist/index.js
CHANGED
|
@@ -151,7 +151,7 @@ import {
|
|
|
151
151
|
stepperClasses,
|
|
152
152
|
Skeleton as Skeleton2,
|
|
153
153
|
skeletonClasses,
|
|
154
|
-
styled as
|
|
154
|
+
styled as styled28
|
|
155
155
|
} from "@mui/joy";
|
|
156
156
|
|
|
157
157
|
// src/components/Accordions/Accordions.tsx
|
|
@@ -5322,13 +5322,32 @@ var Switch = (props) => {
|
|
|
5322
5322
|
Switch.displayName = "Switch";
|
|
5323
5323
|
|
|
5324
5324
|
// src/components/Tabs/Tabs.tsx
|
|
5325
|
-
import
|
|
5325
|
+
import React39, { forwardRef as forwardRef11 } from "react";
|
|
5326
|
+
import {
|
|
5327
|
+
Tabs as JoyTabs,
|
|
5328
|
+
Tab as JoyTab,
|
|
5329
|
+
TabList as JoyTabList,
|
|
5330
|
+
TabPanel as JoyTabPanel,
|
|
5331
|
+
styled as styled26,
|
|
5332
|
+
tabClasses
|
|
5333
|
+
} from "@mui/joy";
|
|
5326
5334
|
import { motion as motion29 } from "framer-motion";
|
|
5327
|
-
var MotionTabs = motion29(JoyTabs)
|
|
5335
|
+
var MotionTabs = styled26(motion29(JoyTabs))(({ theme }) => ({
|
|
5336
|
+
backgroundColor: theme.palette.background.body
|
|
5337
|
+
}));
|
|
5328
5338
|
var Tabs = MotionTabs;
|
|
5329
5339
|
Tabs.displayName = "Tabs";
|
|
5330
|
-
var MotionTab = motion29(JoyTab)
|
|
5331
|
-
|
|
5340
|
+
var MotionTab = styled26(motion29(JoyTab))(({ theme }) => ({
|
|
5341
|
+
[`&:not(.${tabClasses.selected})`]: {
|
|
5342
|
+
color: theme.palette.neutral[700]
|
|
5343
|
+
},
|
|
5344
|
+
[`&.${tabClasses.variantPlain}`]: {
|
|
5345
|
+
backgroundColor: theme.palette.background.body
|
|
5346
|
+
}
|
|
5347
|
+
}));
|
|
5348
|
+
var Tab = forwardRef11(function Tab2({ startDecorator, endDecorator, children, ...props }, ref) {
|
|
5349
|
+
return /* @__PURE__ */ React39.createElement(MotionTab, { ...props, ref }, startDecorator, children, endDecorator);
|
|
5350
|
+
});
|
|
5332
5351
|
Tab.displayName = "Tab";
|
|
5333
5352
|
var MotionTabList = motion29(JoyTabList);
|
|
5334
5353
|
var TabList = MotionTabList;
|
|
@@ -5338,7 +5357,7 @@ var TabPanel = MotionTabPanel;
|
|
|
5338
5357
|
TabPanel.displayName = "TabPanel";
|
|
5339
5358
|
|
|
5340
5359
|
// src/components/ThemeProvider/ThemeProvider.tsx
|
|
5341
|
-
import
|
|
5360
|
+
import React40 from "react";
|
|
5342
5361
|
import {
|
|
5343
5362
|
CssBaseline,
|
|
5344
5363
|
CssVarsProvider,
|
|
@@ -5594,19 +5613,19 @@ var defaultTheme = extendTheme({
|
|
|
5594
5613
|
});
|
|
5595
5614
|
function ThemeProvider(props) {
|
|
5596
5615
|
const theme = props.theme || defaultTheme;
|
|
5597
|
-
return /* @__PURE__ */
|
|
5616
|
+
return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(CssVarsProvider, { theme }, /* @__PURE__ */ React40.createElement(CssBaseline, null), props.children));
|
|
5598
5617
|
}
|
|
5599
5618
|
ThemeProvider.displayName = "ThemeProvider";
|
|
5600
5619
|
|
|
5601
5620
|
// src/components/Uploader/Uploader.tsx
|
|
5602
|
-
import
|
|
5621
|
+
import React41, {
|
|
5603
5622
|
useCallback as useCallback14,
|
|
5604
5623
|
useEffect as useEffect10,
|
|
5605
5624
|
useMemo as useMemo12,
|
|
5606
5625
|
useRef as useRef8,
|
|
5607
5626
|
useState as useState12
|
|
5608
5627
|
} from "react";
|
|
5609
|
-
import { styled as
|
|
5628
|
+
import { styled as styled27, Input as Input2 } from "@mui/joy";
|
|
5610
5629
|
import MuiFileUploadIcon from "@mui/icons-material/CloudUploadRounded";
|
|
5611
5630
|
import MuiUploadFileIcon from "@mui/icons-material/UploadFileRounded";
|
|
5612
5631
|
import MuiClearIcon from "@mui/icons-material/ClearRounded";
|
|
@@ -5628,7 +5647,7 @@ var esmFiles = {
|
|
|
5628
5647
|
"@atlaskit/pragmatic-drag-and-drop/dist/esm/entry-point/prevent-unhandled.js"
|
|
5629
5648
|
)
|
|
5630
5649
|
};
|
|
5631
|
-
var VisuallyHiddenInput =
|
|
5650
|
+
var VisuallyHiddenInput = styled27(Input2)({
|
|
5632
5651
|
width: "1px",
|
|
5633
5652
|
height: "1px",
|
|
5634
5653
|
overflow: "hidden",
|
|
@@ -5637,18 +5656,18 @@ var VisuallyHiddenInput = styled26(Input2)({
|
|
|
5637
5656
|
clipPath: "inset(50%)",
|
|
5638
5657
|
position: "absolute"
|
|
5639
5658
|
});
|
|
5640
|
-
var PreviewRoot =
|
|
5659
|
+
var PreviewRoot = styled27(Stack_default, {
|
|
5641
5660
|
name: "Uploader",
|
|
5642
5661
|
slot: "PreviewRoot"
|
|
5643
5662
|
})({});
|
|
5644
|
-
var UploadCard =
|
|
5663
|
+
var UploadCard = styled27(Card, {
|
|
5645
5664
|
name: "Uploader",
|
|
5646
5665
|
slot: "UploadCard"
|
|
5647
5666
|
})(({ theme }) => ({
|
|
5648
5667
|
padding: theme.spacing(2.5),
|
|
5649
5668
|
border: `1px solid ${theme.palette.neutral.outlinedBorder}`
|
|
5650
5669
|
}));
|
|
5651
|
-
var UploadFileIcon =
|
|
5670
|
+
var UploadFileIcon = styled27(MuiUploadFileIcon, {
|
|
5652
5671
|
name: "Uploader",
|
|
5653
5672
|
slot: "UploadFileIcon"
|
|
5654
5673
|
})(({ theme }) => ({
|
|
@@ -5656,7 +5675,7 @@ var UploadFileIcon = styled26(MuiUploadFileIcon, {
|
|
|
5656
5675
|
width: "32px",
|
|
5657
5676
|
height: "32px"
|
|
5658
5677
|
}));
|
|
5659
|
-
var ClearIcon2 =
|
|
5678
|
+
var ClearIcon2 = styled27(MuiClearIcon, {
|
|
5660
5679
|
name: "Uploader",
|
|
5661
5680
|
slot: "ClearIcon"
|
|
5662
5681
|
})(({ theme }) => ({
|
|
@@ -5723,7 +5742,7 @@ var getFileSize = (n) => {
|
|
|
5723
5742
|
};
|
|
5724
5743
|
var Preview = (props) => {
|
|
5725
5744
|
const { files, uploaded, onDelete } = props;
|
|
5726
|
-
return /* @__PURE__ */
|
|
5745
|
+
return /* @__PURE__ */ React41.createElement(PreviewRoot, { gap: 1 }, [...uploaded, ...files].map((file) => /* @__PURE__ */ React41.createElement(UploadCard, { key: file.name, size: "sm", color: "neutral" }, /* @__PURE__ */ React41.createElement(Stack_default, { direction: "row", alignItems: "center", gap: 2 }, /* @__PURE__ */ React41.createElement(UploadFileIcon, null), /* @__PURE__ */ React41.createElement(Stack_default, { flex: "1" }, /* @__PURE__ */ React41.createElement(Typography_default, { level: "body-sm", textColor: "common.black" }, file.name), !!file.size && /* @__PURE__ */ React41.createElement(
|
|
5727
5746
|
Typography_default,
|
|
5728
5747
|
{
|
|
5729
5748
|
level: "body-xs",
|
|
@@ -5732,15 +5751,15 @@ var Preview = (props) => {
|
|
|
5732
5751
|
textColor: "text.tertiary"
|
|
5733
5752
|
},
|
|
5734
5753
|
getFileSize(file.size)
|
|
5735
|
-
)), /* @__PURE__ */
|
|
5754
|
+
)), /* @__PURE__ */ React41.createElement(IconButton_default, { onClick: () => onDelete?.(file) }, /* @__PURE__ */ React41.createElement(ClearIcon2, null))))));
|
|
5736
5755
|
};
|
|
5737
|
-
var UploaderRoot =
|
|
5756
|
+
var UploaderRoot = styled27(Stack_default, {
|
|
5738
5757
|
name: "Uploader",
|
|
5739
5758
|
slot: "root"
|
|
5740
5759
|
})(({ theme }) => ({
|
|
5741
5760
|
gap: theme.spacing(2)
|
|
5742
5761
|
}));
|
|
5743
|
-
var FileDropZone =
|
|
5762
|
+
var FileDropZone = styled27(Sheet_default, {
|
|
5744
5763
|
name: "Uploader",
|
|
5745
5764
|
slot: "dropZone",
|
|
5746
5765
|
shouldForwardProp: (prop) => prop !== "error"
|
|
@@ -5758,7 +5777,7 @@ var FileDropZone = styled26(Sheet_default, {
|
|
|
5758
5777
|
border: error ? `1px solid ${theme.palette.danger.outlinedBorder}` : state === "idle" ? `1px solid ${theme.palette.neutral.outlinedBorder}` : `1px solid ${theme.palette.primary.outlinedBorder}`
|
|
5759
5778
|
})
|
|
5760
5779
|
);
|
|
5761
|
-
var UploaderIcon =
|
|
5780
|
+
var UploaderIcon = styled27(MuiFileUploadIcon, {
|
|
5762
5781
|
name: "Uploader",
|
|
5763
5782
|
slot: "iconContainer",
|
|
5764
5783
|
shouldForwardProp: (prop) => prop !== "error"
|
|
@@ -5769,7 +5788,7 @@ var UploaderIcon = styled26(MuiFileUploadIcon, {
|
|
|
5769
5788
|
height: "32px"
|
|
5770
5789
|
})
|
|
5771
5790
|
);
|
|
5772
|
-
var Uploader =
|
|
5791
|
+
var Uploader = React41.memo(
|
|
5773
5792
|
(props) => {
|
|
5774
5793
|
const {
|
|
5775
5794
|
accept,
|
|
@@ -5994,7 +6013,7 @@ var Uploader = React40.memo(
|
|
|
5994
6013
|
const handleUploaderButtonClick = useCallback14(() => {
|
|
5995
6014
|
inputRef.current?.click();
|
|
5996
6015
|
}, []);
|
|
5997
|
-
const uploader = /* @__PURE__ */
|
|
6016
|
+
const uploader = /* @__PURE__ */ React41.createElement(
|
|
5998
6017
|
FileDropZone,
|
|
5999
6018
|
{
|
|
6000
6019
|
state: previewState,
|
|
@@ -6002,8 +6021,8 @@ var Uploader = React40.memo(
|
|
|
6002
6021
|
ref: dropZoneRef,
|
|
6003
6022
|
onClick: handleUploaderButtonClick
|
|
6004
6023
|
},
|
|
6005
|
-
/* @__PURE__ */
|
|
6006
|
-
/* @__PURE__ */
|
|
6024
|
+
/* @__PURE__ */ React41.createElement(Stack_default, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React41.createElement(UploaderIcon, { state: previewState, error: !!(error || errorText) })),
|
|
6025
|
+
/* @__PURE__ */ React41.createElement(
|
|
6007
6026
|
VisuallyHiddenInput,
|
|
6008
6027
|
{
|
|
6009
6028
|
disabled,
|
|
@@ -6028,7 +6047,7 @@ var Uploader = React40.memo(
|
|
|
6028
6047
|
}
|
|
6029
6048
|
)
|
|
6030
6049
|
);
|
|
6031
|
-
return /* @__PURE__ */
|
|
6050
|
+
return /* @__PURE__ */ React41.createElement(UploaderRoot, null, showDropZone && /* @__PURE__ */ React41.createElement(
|
|
6032
6051
|
FormControl_default,
|
|
6033
6052
|
{
|
|
6034
6053
|
size,
|
|
@@ -6036,10 +6055,10 @@ var Uploader = React40.memo(
|
|
|
6036
6055
|
disabled,
|
|
6037
6056
|
required: !!minCount
|
|
6038
6057
|
},
|
|
6039
|
-
label && /* @__PURE__ */
|
|
6058
|
+
label && /* @__PURE__ */ React41.createElement(FormLabel_default, null, label),
|
|
6040
6059
|
uploader,
|
|
6041
|
-
/* @__PURE__ */
|
|
6042
|
-
), [...uploaded, ...files].length > 0 && /* @__PURE__ */
|
|
6060
|
+
/* @__PURE__ */ React41.createElement(FormHelperText_default, null, /* @__PURE__ */ React41.createElement(Stack_default, null, errorText && /* @__PURE__ */ React41.createElement("div", null, errorText), /* @__PURE__ */ React41.createElement("div", null, helperText)))
|
|
6061
|
+
), [...uploaded, ...files].length > 0 && /* @__PURE__ */ React41.createElement(
|
|
6043
6062
|
Preview,
|
|
6044
6063
|
{
|
|
6045
6064
|
files,
|
|
@@ -6207,7 +6226,7 @@ export {
|
|
|
6207
6226
|
stepButtonClasses,
|
|
6208
6227
|
stepClasses2 as stepClasses,
|
|
6209
6228
|
stepperClasses,
|
|
6210
|
-
|
|
6229
|
+
styled28 as styled,
|
|
6211
6230
|
switchClasses2 as switchClasses,
|
|
6212
6231
|
tabListClasses,
|
|
6213
6232
|
tabPanelClasses,
|