infinity-ui-elements 1.9.28 → 1.13.0
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/FileInput/FileInput.d.ts +38 -0
- package/dist/components/FileInput/FileInput.d.ts.map +1 -0
- package/dist/components/FileInput/FileInput.stories.d.ts +27 -0
- package/dist/components/FileInput/FileInput.stories.d.ts.map +1 -0
- package/dist/components/FileInput/index.d.ts +3 -0
- package/dist/components/FileInput/index.d.ts.map +1 -0
- package/dist/components/SearchableDropdown/SearchableDropdown.stories.d.ts +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +183 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +184 -0
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
declare const fileInputVariants: (props?: ({
|
|
3
|
+
size?: "medium" | "large" | "small" | null | undefined;
|
|
4
|
+
validationState?: "none" | "positive" | "negative" | null | undefined;
|
|
5
|
+
isDisabled?: boolean | null | undefined;
|
|
6
|
+
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
7
|
+
export interface FileInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
8
|
+
label?: string;
|
|
9
|
+
helperText?: string;
|
|
10
|
+
errorText?: string;
|
|
11
|
+
successText?: string;
|
|
12
|
+
size?: "small" | "medium" | "large";
|
|
13
|
+
validationState?: "none" | "positive" | "negative";
|
|
14
|
+
isDisabled?: boolean;
|
|
15
|
+
isRequired?: boolean;
|
|
16
|
+
isOptional?: boolean;
|
|
17
|
+
accept?: string;
|
|
18
|
+
multiple?: boolean;
|
|
19
|
+
maxSize?: number;
|
|
20
|
+
value?: File | File[] | null;
|
|
21
|
+
onChange?: (files: File | File[] | null) => void;
|
|
22
|
+
containerClassName?: string;
|
|
23
|
+
labelClassName?: string;
|
|
24
|
+
inputClassName?: string;
|
|
25
|
+
infoHeading?: string;
|
|
26
|
+
infoDescription?: string;
|
|
27
|
+
LinkComponent?: React.ReactNode;
|
|
28
|
+
linkText?: string;
|
|
29
|
+
linkHref?: string;
|
|
30
|
+
onLinkClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
31
|
+
buttonText?: string;
|
|
32
|
+
placeholderText?: string;
|
|
33
|
+
showClearButton?: boolean;
|
|
34
|
+
onClear?: () => void;
|
|
35
|
+
}
|
|
36
|
+
declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLDivElement>>;
|
|
37
|
+
export { FileInput, fileInputVariants };
|
|
38
|
+
//# sourceMappingURL=FileInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/FileInput/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,QAAA,MAAM,iBAAiB;;;;mFA2CtB,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,eAAe,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAUD,QAAA,MAAM,SAAS,uFAiRd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { FileInput } from "./FileInput";
|
|
3
|
+
declare const meta: Meta<typeof FileInput>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof FileInput>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithLabel: Story;
|
|
8
|
+
export declare const MultipleFiles: Story;
|
|
9
|
+
export declare const WithFileTypeRestrictions: Story;
|
|
10
|
+
export declare const WithMaxSize: Story;
|
|
11
|
+
export declare const Success: Story;
|
|
12
|
+
export declare const Error: Story;
|
|
13
|
+
export declare const Disabled: Story;
|
|
14
|
+
export declare const Small: Story;
|
|
15
|
+
export declare const Medium: Story;
|
|
16
|
+
export declare const Large: Story;
|
|
17
|
+
export declare const Interactive: Story;
|
|
18
|
+
export declare const AllStates: Story;
|
|
19
|
+
export declare const SizeComparison: Story;
|
|
20
|
+
export declare const MinimalWithoutLabel: Story;
|
|
21
|
+
export declare const WithCustomButtonText: Story;
|
|
22
|
+
export declare const ImageOnly: Story;
|
|
23
|
+
export declare const PdfOnly: Story;
|
|
24
|
+
export declare const ProofOfBankAccount: Story;
|
|
25
|
+
export declare const ValidationStates: Story;
|
|
26
|
+
export declare const CompleteMatrix: Story;
|
|
27
|
+
//# sourceMappingURL=FileInput.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/components/FileInput/FileInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA0BhC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAGxC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAOtC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAmCzB,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAgEvB,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAiC5B,CAAC;AAGF,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAMvB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAGF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAGF,eAAO,MAAM,gBAAgB,EAAE,KAiC9B,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAwF5B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FileInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAC3D,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}
|
|
@@ -351,8 +351,8 @@ declare const meta: {
|
|
|
351
351
|
successText?: string | undefined;
|
|
352
352
|
showClearButton?: boolean | undefined;
|
|
353
353
|
onClear?: (() => void) | undefined;
|
|
354
|
-
suffix?: React.ReactNode;
|
|
355
354
|
inputClassName?: string | undefined;
|
|
355
|
+
suffix?: React.ReactNode;
|
|
356
356
|
ref?: React.LegacyRef<HTMLInputElement> | undefined;
|
|
357
357
|
key?: React.Key | null | undefined;
|
|
358
358
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
package/dist/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export * from "./components/DatePicker";
|
|
|
11
11
|
export * from "./components/DateRangePicker";
|
|
12
12
|
export * from "./components/Divider";
|
|
13
13
|
export * from "./components/Dropdown";
|
|
14
|
+
export * from "./components/FileInput";
|
|
14
15
|
export * from "./components/FormFooter";
|
|
15
16
|
export * from "./components/FormHeader";
|
|
16
17
|
export * from "./components/IconButton";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -3313,6 +3313,188 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
|
|
|
3313
3313
|
});
|
|
3314
3314
|
Dropdown.displayName = "Dropdown";
|
|
3315
3315
|
|
|
3316
|
+
const fileInputVariants = cva("relative flex items-center gap-3 border rounded-large transition-all font-functional font-size-100 leading-100", {
|
|
3317
|
+
variants: {
|
|
3318
|
+
size: {
|
|
3319
|
+
small: "h-[28px] px-3 text-xs gap-2",
|
|
3320
|
+
medium: "h-[36px] px-4 text-sm gap-2",
|
|
3321
|
+
large: "h-[44px] px-5 text-base gap-3",
|
|
3322
|
+
},
|
|
3323
|
+
validationState: {
|
|
3324
|
+
none: `
|
|
3325
|
+
border-action-outline-neutral-faded
|
|
3326
|
+
focus-within:border-action-outline-primary-default
|
|
3327
|
+
focus-within:bg-white!
|
|
3328
|
+
focus-within:ring-2
|
|
3329
|
+
ring-surface-outline-primary-muted`,
|
|
3330
|
+
positive: `
|
|
3331
|
+
border-action-outline-positive-default
|
|
3332
|
+
focus-within:border-action-outline-positive-hover
|
|
3333
|
+
focus-within:ring-2
|
|
3334
|
+
ring-action-outline-positive-faded-hover`,
|
|
3335
|
+
negative: `border-action-outline-negative-default
|
|
3336
|
+
focus-within:border-action-outline-negative-hover
|
|
3337
|
+
focus-within:ring-2
|
|
3338
|
+
ring-action-outline-negative-faded-hover`,
|
|
3339
|
+
},
|
|
3340
|
+
isDisabled: {
|
|
3341
|
+
true: `
|
|
3342
|
+
border
|
|
3343
|
+
border-action-outline-neutral-disabled
|
|
3344
|
+
hover:border-action-outline-neutral-disabled
|
|
3345
|
+
bg-surface-fill-neutral-intense
|
|
3346
|
+
hover:bg-surface-fill-neutral-intense
|
|
3347
|
+
cursor-not-allowed`,
|
|
3348
|
+
false: "",
|
|
3349
|
+
},
|
|
3350
|
+
},
|
|
3351
|
+
defaultVariants: {
|
|
3352
|
+
size: "medium",
|
|
3353
|
+
validationState: "none",
|
|
3354
|
+
isDisabled: false,
|
|
3355
|
+
},
|
|
3356
|
+
});
|
|
3357
|
+
const formatFileSize$1 = (bytes) => {
|
|
3358
|
+
if (bytes === 0)
|
|
3359
|
+
return "0 Bytes";
|
|
3360
|
+
const k = 1024;
|
|
3361
|
+
const sizes = ["Bytes", "KB", "MB", "GB"];
|
|
3362
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
3363
|
+
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
|
|
3364
|
+
};
|
|
3365
|
+
const FileInput = React.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, accept, multiple = false, maxSize, value, onChange, containerClassName, labelClassName, inputClassName, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, buttonText = "Choose File", placeholderText = "No file chosen", showClearButton = true, onClear, className, ...props }, ref) => {
|
|
3366
|
+
const fileInputRef = React.useRef(null);
|
|
3367
|
+
const [selectedFiles, setSelectedFiles] = React.useState([]);
|
|
3368
|
+
const [error, setError] = React.useState(null);
|
|
3369
|
+
// Initialize from value prop
|
|
3370
|
+
React.useEffect(() => {
|
|
3371
|
+
if (value) {
|
|
3372
|
+
const filesArray = Array.isArray(value) ? value : [value];
|
|
3373
|
+
setSelectedFiles(filesArray);
|
|
3374
|
+
}
|
|
3375
|
+
else {
|
|
3376
|
+
setSelectedFiles([]);
|
|
3377
|
+
}
|
|
3378
|
+
}, [value]);
|
|
3379
|
+
const processFiles = (files) => {
|
|
3380
|
+
const fileArray = Array.from(files);
|
|
3381
|
+
const validFiles = [];
|
|
3382
|
+
let currentError = null;
|
|
3383
|
+
fileArray.forEach((file) => {
|
|
3384
|
+
// Check file size
|
|
3385
|
+
if (maxSize && file.size > maxSize) {
|
|
3386
|
+
currentError = `File "${file.name}" exceeds maximum size of ${formatFileSize$1(maxSize)}`;
|
|
3387
|
+
setError(currentError);
|
|
3388
|
+
return;
|
|
3389
|
+
}
|
|
3390
|
+
// Check if file type is accepted
|
|
3391
|
+
if (accept) {
|
|
3392
|
+
const acceptedTypes = accept.split(",").map((type) => type.trim());
|
|
3393
|
+
const isAccepted = acceptedTypes.some((type) => {
|
|
3394
|
+
if (type.startsWith(".")) {
|
|
3395
|
+
return file.name.toLowerCase().endsWith(type.toLowerCase());
|
|
3396
|
+
}
|
|
3397
|
+
if (type.includes("/*")) {
|
|
3398
|
+
const baseType = type.split("/")[0];
|
|
3399
|
+
return file.type.startsWith(baseType + "/");
|
|
3400
|
+
}
|
|
3401
|
+
return file.type === type;
|
|
3402
|
+
});
|
|
3403
|
+
if (!isAccepted) {
|
|
3404
|
+
currentError = `File type "${file.type}" is not accepted`;
|
|
3405
|
+
setError(currentError);
|
|
3406
|
+
return;
|
|
3407
|
+
}
|
|
3408
|
+
}
|
|
3409
|
+
validFiles.push(file);
|
|
3410
|
+
});
|
|
3411
|
+
if (currentError) {
|
|
3412
|
+
setError(currentError);
|
|
3413
|
+
}
|
|
3414
|
+
else {
|
|
3415
|
+
setError(null);
|
|
3416
|
+
}
|
|
3417
|
+
return validFiles;
|
|
3418
|
+
};
|
|
3419
|
+
const handleFileInputChange = (e) => {
|
|
3420
|
+
if (e.target.files && e.target.files.length > 0) {
|
|
3421
|
+
const validFiles = processFiles(e.target.files);
|
|
3422
|
+
if (validFiles.length > 0) {
|
|
3423
|
+
const newFiles = multiple
|
|
3424
|
+
? [...selectedFiles, ...validFiles]
|
|
3425
|
+
: validFiles;
|
|
3426
|
+
setSelectedFiles(newFiles);
|
|
3427
|
+
if (onChange) {
|
|
3428
|
+
onChange(multiple ? newFiles : newFiles[0] || null);
|
|
3429
|
+
}
|
|
3430
|
+
}
|
|
3431
|
+
// Reset input value to allow selecting the same file again
|
|
3432
|
+
e.target.value = "";
|
|
3433
|
+
}
|
|
3434
|
+
};
|
|
3435
|
+
const handleButtonClick = () => {
|
|
3436
|
+
if (!isDisabled && fileInputRef.current) {
|
|
3437
|
+
fileInputRef.current.click();
|
|
3438
|
+
}
|
|
3439
|
+
};
|
|
3440
|
+
const handleClear = () => {
|
|
3441
|
+
if (isDisabled)
|
|
3442
|
+
return;
|
|
3443
|
+
setSelectedFiles([]);
|
|
3444
|
+
setError(null);
|
|
3445
|
+
// Clear the file input
|
|
3446
|
+
if (fileInputRef.current) {
|
|
3447
|
+
fileInputRef.current.value = "";
|
|
3448
|
+
}
|
|
3449
|
+
if (onClear) {
|
|
3450
|
+
onClear();
|
|
3451
|
+
}
|
|
3452
|
+
if (onChange) {
|
|
3453
|
+
onChange(null);
|
|
3454
|
+
}
|
|
3455
|
+
};
|
|
3456
|
+
// Determine which helper text to show
|
|
3457
|
+
const displayHelperText = errorText || successText || helperText || error;
|
|
3458
|
+
const currentValidationState = errorText
|
|
3459
|
+
? "negative"
|
|
3460
|
+
: successText
|
|
3461
|
+
? "positive"
|
|
3462
|
+
: validationState;
|
|
3463
|
+
const sizeConfig = {
|
|
3464
|
+
small: {
|
|
3465
|
+
gap: "gap-2",
|
|
3466
|
+
buttonSize: "xsmall",
|
|
3467
|
+
},
|
|
3468
|
+
medium: {
|
|
3469
|
+
gap: "gap-2",
|
|
3470
|
+
buttonSize: "small",
|
|
3471
|
+
},
|
|
3472
|
+
large: {
|
|
3473
|
+
gap: "gap-3",
|
|
3474
|
+
buttonSize: "small",
|
|
3475
|
+
},
|
|
3476
|
+
};
|
|
3477
|
+
const config = sizeConfig[size];
|
|
3478
|
+
const getDisplayText = () => {
|
|
3479
|
+
if (selectedFiles.length === 0) {
|
|
3480
|
+
return placeholderText;
|
|
3481
|
+
}
|
|
3482
|
+
if (selectedFiles.length === 1) {
|
|
3483
|
+
return selectedFiles[0].name;
|
|
3484
|
+
}
|
|
3485
|
+
return `${selectedFiles.length} file(s) selected`;
|
|
3486
|
+
};
|
|
3487
|
+
const hasFiles = selectedFiles.length > 0;
|
|
3488
|
+
return (jsxs("div", { ref: ref, className: cn("w-full flex flex-col", config.gap, containerClassName), ...props, children: [label && (jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, className: "mb-2", labelClassName: labelClassName })), jsxs("div", { className: cn(fileInputVariants({
|
|
3489
|
+
size,
|
|
3490
|
+
validationState: currentValidationState,
|
|
3491
|
+
isDisabled,
|
|
3492
|
+
}), className), children: [jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, disabled: isDisabled, onChange: handleFileInputChange, className: "hidden", "aria-label": label || "File upload" }), jsx(Link, { type: "action", color: "primary", size: config.buttonSize, onClick: handleButtonClick, isDisabled: isDisabled, className: "shrink-0", children: buttonText }), jsx("div", { className: "flex-1 min-w-0", children: jsx(Text, { variant: "body", size: "small", color: isDisabled ? "disabled" : "muted", className: "truncate", title: getDisplayText(), children: getDisplayText() }) }), showClearButton && hasFiles && !isDisabled && (jsx(IconButton, { icon: "close", size: "xsmall", onClick: handleClear, "aria-label": "Clear selected files", className: "shrink-0" }))] }), jsx(FormFooter, { helperText: displayHelperText || undefined, validationState: currentValidationState === "none"
|
|
3493
|
+
? "default"
|
|
3494
|
+
: currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
|
|
3495
|
+
});
|
|
3496
|
+
FileInput.displayName = "FileInput";
|
|
3497
|
+
|
|
3316
3498
|
const Modal = React.forwardRef(({ isOpen, onClose, title, description, footer, children, variant = "default", size = "medium", showCloseButton = true, closeOnOverlayClick = true, closeOnEscape = true, className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
|
|
3317
3499
|
const modalRef = React.useRef(null);
|
|
3318
3500
|
const contentRef = ref || modalRef;
|
|
@@ -6154,5 +6336,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
|
|
|
6154
6336
|
});
|
|
6155
6337
|
UploadBox.displayName = "UploadBox";
|
|
6156
6338
|
|
|
6157
|
-
export { Alert, Amount, Avatar, AvatarCell, Badge, BottomSheet, Button, ButtonGroup, Checkbox, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
|
|
6339
|
+
export { Alert, Amount, Avatar, AvatarCell, Badge, BottomSheet, Button, ButtonGroup, Checkbox, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FileInput, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, fileInputVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
|
|
6158
6340
|
//# sourceMappingURL=index.esm.js.map
|