@opengovsg/oui 0.0.20 → 0.0.22

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 (71) hide show
  1. package/dist/cjs/button/button.cjs +1 -1
  2. package/dist/cjs/calendar/calendar-month-day-selector.cjs +4 -3
  3. package/dist/cjs/checkbox/checkbox.cjs +1 -1
  4. package/dist/cjs/combo-box/combo-box.cjs +2 -2
  5. package/dist/cjs/date-field/date-field.cjs +13 -4
  6. package/dist/cjs/date-picker/date-picker.cjs +38 -14
  7. package/dist/cjs/date-range-picker/date-range-picker.cjs +4 -4
  8. package/dist/cjs/field/field.cjs +20 -6
  9. package/dist/cjs/field/index.cjs +1 -0
  10. package/dist/cjs/file-dropzone/contexts.cjs +18 -0
  11. package/dist/cjs/file-dropzone/file-dropzone.cjs +311 -0
  12. package/dist/cjs/file-dropzone/file-info.cjs +146 -0
  13. package/dist/cjs/file-dropzone/index.cjs +13 -0
  14. package/dist/cjs/file-dropzone/types.cjs +3 -0
  15. package/dist/cjs/file-dropzone/utils.cjs +31 -0
  16. package/dist/cjs/index.cjs +19 -11
  17. package/dist/cjs/menu/menu.cjs +1 -1
  18. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.cjs +25 -0
  19. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.cjs +23 -0
  20. package/dist/cjs/range-calendar/range-calendar.cjs +1 -1
  21. package/dist/cjs/select/select.cjs +2 -2
  22. package/dist/cjs/tag-field/tag-field.cjs +3 -3
  23. package/dist/cjs/text-area-field/text-area-field.cjs +1 -1
  24. package/dist/cjs/text-field/text-field.cjs +1 -1
  25. package/dist/esm/button/button.js +1 -1
  26. package/dist/esm/calendar/calendar-month-day-selector.js +4 -3
  27. package/dist/esm/checkbox/checkbox.js +1 -1
  28. package/dist/esm/combo-box/combo-box.js +2 -2
  29. package/dist/esm/date-field/date-field.js +13 -4
  30. package/dist/esm/date-picker/date-picker.js +38 -14
  31. package/dist/esm/date-range-picker/date-range-picker.js +4 -4
  32. package/dist/esm/field/field.js +20 -7
  33. package/dist/esm/field/index.js +1 -1
  34. package/dist/esm/file-dropzone/contexts.js +13 -0
  35. package/dist/esm/file-dropzone/file-dropzone.js +309 -0
  36. package/dist/esm/file-dropzone/file-info.js +144 -0
  37. package/dist/esm/file-dropzone/index.js +4 -0
  38. package/dist/esm/file-dropzone/types.js +1 -0
  39. package/dist/esm/file-dropzone/utils.js +28 -0
  40. package/dist/esm/index.js +8 -5
  41. package/dist/esm/menu/menu.js +1 -1
  42. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.js +20 -0
  43. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.js +18 -0
  44. package/dist/esm/range-calendar/range-calendar.js +1 -1
  45. package/dist/esm/select/select.js +2 -2
  46. package/dist/esm/tag-field/tag-field.js +3 -3
  47. package/dist/esm/text-area-field/text-area-field.js +1 -1
  48. package/dist/esm/text-field/text-field.js +1 -1
  49. package/dist/types/calendar/calendar-month-day-selector.d.ts.map +1 -1
  50. package/dist/types/date-field/date-field.d.ts +1 -0
  51. package/dist/types/date-field/date-field.d.ts.map +1 -1
  52. package/dist/types/date-picker/date-picker.d.ts +5 -2
  53. package/dist/types/date-picker/date-picker.d.ts.map +1 -1
  54. package/dist/types/field/field.d.ts +4 -1
  55. package/dist/types/field/field.d.ts.map +1 -1
  56. package/dist/types/file-dropzone/contexts.d.ts +4 -0
  57. package/dist/types/file-dropzone/contexts.d.ts.map +1 -0
  58. package/dist/types/file-dropzone/file-dropzone.d.ts +82 -0
  59. package/dist/types/file-dropzone/file-dropzone.d.ts.map +1 -0
  60. package/dist/types/file-dropzone/file-info.d.ts +9 -0
  61. package/dist/types/file-dropzone/file-info.d.ts.map +1 -0
  62. package/dist/types/file-dropzone/index.d.ts +7 -0
  63. package/dist/types/file-dropzone/index.d.ts.map +1 -0
  64. package/dist/types/file-dropzone/types.d.ts +24 -0
  65. package/dist/types/file-dropzone/types.d.ts.map +1 -0
  66. package/dist/types/file-dropzone/utils.d.ts +8 -0
  67. package/dist/types/file-dropzone/utils.d.ts.map +1 -0
  68. package/dist/types/index.d.mts +1 -0
  69. package/dist/types/index.d.ts +1 -0
  70. package/dist/types/index.d.ts.map +1 -1
  71. package/package.json +5 -4
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  "use client";
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
+ import { useMemo } from 'react';
4
5
  import { Label as Label$1, Text, FieldError as FieldError$1, Group } from 'react-aria-components';
5
6
  import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
6
7
  import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
@@ -12,12 +13,19 @@ function Description({ size, className, ...props }) {
12
13
  return /* @__PURE__ */ jsx(
13
14
  Text,
14
15
  {
15
- ...props,
16
16
  slot: "description",
17
+ ...props,
17
18
  className: descriptionStyles({ className, size })
18
19
  }
19
20
  );
20
21
  }
22
+ function FieldErrorIcon({
23
+ size,
24
+ className
25
+ }) {
26
+ const styles = fieldErrorStyles({ size });
27
+ return /* @__PURE__ */ jsx(CircleAlert, { className: styles.icon({ className }) });
28
+ }
21
29
  function FieldError({
22
30
  children,
23
31
  className,
@@ -26,7 +34,15 @@ function FieldError({
26
34
  ...props
27
35
  }) {
28
36
  const styles = fieldErrorStyles({ size });
29
- if (!children) return null;
37
+ const childrenFromProps = useMemo(() => {
38
+ if (typeof children === "string") {
39
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
40
+ /* @__PURE__ */ jsx(FieldErrorIcon, { className: classNames?.icon, size }),
41
+ children
42
+ ] });
43
+ }
44
+ return children;
45
+ }, [children, classNames?.icon, size]);
30
46
  return /* @__PURE__ */ jsx(
31
47
  FieldError$1,
32
48
  {
@@ -35,10 +51,7 @@ function FieldError({
35
51
  className ?? classNames?.text,
36
52
  (className2, renderProps) => styles.text({ ...renderProps, className: className2 })
37
53
  ),
38
- children: /* @__PURE__ */ jsxs(Fragment, { children: [
39
- /* @__PURE__ */ jsx(CircleAlert, { className: styles.icon({ className: classNames?.icon }) }),
40
- children
41
- ] })
54
+ children: childrenFromProps
42
55
  }
43
56
  );
44
57
  }
@@ -55,4 +68,4 @@ function FieldGroup(props) {
55
68
  );
56
69
  }
57
70
 
58
- export { Description, FieldError, FieldGroup, Label };
71
+ export { Description, FieldError, FieldErrorIcon, FieldGroup, Label };
@@ -1,2 +1,2 @@
1
1
  "use strict";
2
- export { Description, FieldError, FieldGroup, Label } from './field.js';
2
+ export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field.js';
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ import { createContext } from '../system/react-utils/context.js';
3
+
4
+ const [FileDropzoneStateContext, useFileDropzoneStateContext] = createContext({
5
+ strict: true,
6
+ name: "FileDropzoneStateContext"
7
+ });
8
+ const [FileDropzoneStyleContext, useFileDropzoneStyleContext] = createContext({
9
+ strict: true,
10
+ name: "FileDropzoneStyleContext"
11
+ });
12
+
13
+ export { FileDropzoneStateContext, FileDropzoneStyleContext, useFileDropzoneStateContext, useFileDropzoneStyleContext };
@@ -0,0 +1,309 @@
1
+ "use strict";
2
+ "use client";
3
+ import { jsx, jsxs } from 'react/jsx-runtime';
4
+ import { useCallback, useMemo, useEffect } from 'react';
5
+ import { useFormValidationState } from '@react-stately/form';
6
+ import { useField, useId } from 'react-aria';
7
+ import { Provider, LabelContext, GroupContext, TextContext, FieldErrorContext, Group } from 'react-aria-components';
8
+ import { useDropzone } from 'react-dropzone';
9
+ import { fileDropzoneStyles, dataAttr } from '@opengovsg/oui-theme';
10
+ import { mapPropsVariants } from '../system/utils.js';
11
+ import { FileDropzoneStyleContext, FileDropzoneStateContext, useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
12
+ import { FileInfo } from './file-info.js';
13
+ import { formatErrorMessage, formatBytes } from './utils.js';
14
+ import { useControllableState } from '../hooks/use-controllable-state.js';
15
+ import Upload from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/upload.js';
16
+ import { Label, Description, FieldError } from '../field/field.js';
17
+
18
+ const FileDropzone = (originalProps) => {
19
+ const [props, variantProps] = mapPropsVariants(
20
+ originalProps,
21
+ fileDropzoneStyles.variantKeys
22
+ );
23
+ const {
24
+ name,
25
+ allowedMimeTypes = [],
26
+ maxFileSize = Number.POSITIVE_INFINITY,
27
+ minFileSize = 0,
28
+ showFileSizeText = true,
29
+ maxFiles = 1,
30
+ isDisabled,
31
+ isReadOnly,
32
+ classNames,
33
+ itemClassNames,
34
+ validator,
35
+ showRejectedFiles,
36
+ onError,
37
+ errorMessage,
38
+ label,
39
+ description,
40
+ children,
41
+ hideDropzoneOnValue = maxFiles === 1,
42
+ imagePreview = "small"
43
+ } = props;
44
+ const [value, setValue] = useControllableState({
45
+ value: props.value,
46
+ defaultValue: props.defaultValue || [],
47
+ onChange: props.onChange
48
+ });
49
+ const [rejections, setRejections] = useControllableState({
50
+ value: props.rejections,
51
+ defaultValue: [],
52
+ onChange: props.onRejection
53
+ });
54
+ const validationState = useFormValidationState({
55
+ ...props,
56
+ value
57
+ });
58
+ const { isInvalid, validationErrors, validationDetails } = validationState.displayValidation;
59
+ const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
60
+ ...props,
61
+ isInvalid,
62
+ errorMessage: props.errorMessage || validationErrors
63
+ });
64
+ const slots = fileDropzoneStyles(variantProps);
65
+ const fileSizeTextId = useId();
66
+ const formatError = useCallback(
67
+ (error) => formatErrorMessage(error, {
68
+ maxFileSize,
69
+ minFileSize,
70
+ maxFiles
71
+ }),
72
+ [maxFileSize, maxFiles, minFileSize]
73
+ );
74
+ const onDrop = useCallback(
75
+ (acceptedFiles, fileRejections) => {
76
+ const files = acceptedFiles;
77
+ if (showRejectedFiles) {
78
+ const invalidFiles = fileRejections.map(({ file, errors }) => {
79
+ file.errors = errors;
80
+ return file;
81
+ });
82
+ setRejections(invalidFiles);
83
+ }
84
+ setValue(files);
85
+ if (onError && fileRejections.length > 0) {
86
+ const firstError = fileRejections[0].errors[0];
87
+ onError(formatError(firstError));
88
+ }
89
+ },
90
+ [formatError, onError, setRejections, setValue, showRejectedFiles]
91
+ );
92
+ const handleRemoveFile = useCallback(
93
+ (fileName) => {
94
+ setValue((files) => files.filter((file) => file.name !== fileName));
95
+ },
96
+ [setValue]
97
+ );
98
+ const handleRemoveRejection = useCallback(
99
+ (fileName) => {
100
+ setRejections(
101
+ (rejections2) => rejections2.filter((file) => file.name !== fileName)
102
+ );
103
+ },
104
+ [setRejections]
105
+ );
106
+ const { getInputProps, ...dropzoneState } = useDropzone({
107
+ validator,
108
+ accept: allowedMimeTypes.reduce(
109
+ (acc, type) => ({ ...acc, [type]: [] }),
110
+ {}
111
+ ),
112
+ onError: (e) => onError?.(e.message),
113
+ onDrop,
114
+ disabled: isDisabled,
115
+ noDrag: isReadOnly,
116
+ // Prevent ref hijack when there is a label
117
+ noClick: true,
118
+ noKeyboard: true,
119
+ maxSize: maxFileSize,
120
+ minSize: minFileSize,
121
+ maxFiles,
122
+ multiple: maxFiles !== 1
123
+ });
124
+ const fileSizeText = useMemo(() => {
125
+ const notDefaultMaxFileSize = maxFileSize !== Number.POSITIVE_INFINITY;
126
+ const notDefaultMinFileSize = minFileSize !== 0;
127
+ const shouldShow = showFileSizeText && (notDefaultMaxFileSize || notDefaultMinFileSize);
128
+ if (!shouldShow) return null;
129
+ if (notDefaultMaxFileSize && notDefaultMinFileSize) {
130
+ return `File size must be between ${formatBytes(minFileSize, 2)} and ${formatBytes(
131
+ maxFileSize,
132
+ 2
133
+ )}`;
134
+ }
135
+ if (notDefaultMaxFileSize) {
136
+ return `Maximum file size: ${formatBytes(maxFileSize, 2)}`;
137
+ }
138
+ if (notDefaultMinFileSize) {
139
+ return `Minimum file size: ${formatBytes(minFileSize, 2)}`;
140
+ }
141
+ return null;
142
+ }, [maxFileSize, minFileSize, showFileSizeText]);
143
+ const triggerFileSelector = useCallback(() => {
144
+ if (isDisabled || isReadOnly) return;
145
+ dropzoneState.inputRef.current?.click();
146
+ }, [dropzoneState, isDisabled, isReadOnly]);
147
+ useEffect(() => {
148
+ if (value.length <= maxFiles) {
149
+ let changed = false;
150
+ const newFiles = value.map((file) => {
151
+ if (file.errors?.some((e) => e.code === "too-many-files")) {
152
+ file.errors = file.errors.filter((e) => e.code !== "too-many-files");
153
+ changed = true;
154
+ }
155
+ return file;
156
+ });
157
+ if (changed) {
158
+ setValue(newFiles);
159
+ }
160
+ }
161
+ }, [maxFiles, setValue, value]);
162
+ const inputProps = useMemo(() => {
163
+ const inputProps2 = { ...fieldProps, name };
164
+ if (fileSizeText) {
165
+ inputProps2["aria-describedby"] = inputProps2["aria-describedby"] ? `${inputProps2["aria-describedby"]} ${fileSizeTextId}` : fileSizeTextId;
166
+ }
167
+ return getInputProps(inputProps2);
168
+ }, [fieldProps, getInputProps, fileSizeTextId, name, fileSizeText]);
169
+ const showDropzone = useMemo(() => {
170
+ if (hideDropzoneOnValue) {
171
+ return value.length < maxFiles;
172
+ }
173
+ return true;
174
+ }, [hideDropzoneOnValue, maxFiles, value.length]);
175
+ return /* @__PURE__ */ jsx(
176
+ Provider,
177
+ {
178
+ values: [
179
+ [
180
+ FileDropzoneStyleContext,
181
+ { slots, classNames, itemClassNames, ...variantProps }
182
+ ],
183
+ [
184
+ FileDropzoneStateContext,
185
+ {
186
+ isDisabled,
187
+ isReadOnly,
188
+ maxFiles,
189
+ maxFileSize,
190
+ showDropzone,
191
+ files: value,
192
+ handleRemoveFile,
193
+ handleRemoveRejection,
194
+ formatError,
195
+ inputProps,
196
+ triggerFileSelector,
197
+ ...dropzoneState
198
+ }
199
+ ],
200
+ [LabelContext, labelProps],
201
+ [
202
+ GroupContext,
203
+ {
204
+ role: "presentation",
205
+ isInvalid,
206
+ isDisabled: props.isDisabled || false
207
+ }
208
+ ],
209
+ [
210
+ TextContext,
211
+ {
212
+ slots: {
213
+ fileSize: {},
214
+ description: descriptionProps,
215
+ errorMessage: errorMessageProps
216
+ }
217
+ }
218
+ ],
219
+ [FieldErrorContext, { isInvalid, validationErrors, validationDetails }]
220
+ ],
221
+ children: /* @__PURE__ */ jsxs(Group, { className: slots.base({ className: classNames?.base }), children: [
222
+ label && /* @__PURE__ */ jsx(Label, { size: variantProps.size, children: label }),
223
+ showDropzone && /* @__PURE__ */ jsx(FileDropzoneDropzone, {}),
224
+ value.map((file) => {
225
+ if (typeof children === "function") {
226
+ return children({
227
+ file,
228
+ removeFile: () => handleRemoveFile(file.name)
229
+ });
230
+ }
231
+ return /* @__PURE__ */ jsx(FileInfo, { imagePreview, file }, file.name);
232
+ }),
233
+ rejections.length >= 1 && rejections.map((rj) => /* @__PURE__ */ jsx(FileInfo, { imagePreview, file: rj }, rj.name)),
234
+ fileSizeText && /* @__PURE__ */ jsx(
235
+ Description,
236
+ {
237
+ size: variantProps.size,
238
+ id: fileSizeTextId,
239
+ slot: "fileSize",
240
+ children: fileSizeText
241
+ }
242
+ ),
243
+ description && /* @__PURE__ */ jsx(Description, { size: variantProps.size, children: description }),
244
+ errorMessage && /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, children: errorMessage })
245
+ ] })
246
+ }
247
+ );
248
+ };
249
+ const FileDropzoneDropzone = () => {
250
+ const {
251
+ maxFiles,
252
+ getRootProps,
253
+ inputProps,
254
+ triggerFileSelector,
255
+ isDisabled,
256
+ isDragActive
257
+ } = useFileDropzoneStateContext();
258
+ const { slots, classNames } = useFileDropzoneStyleContext();
259
+ return /* @__PURE__ */ jsxs(
260
+ "div",
261
+ {
262
+ ...getRootProps({
263
+ "aria-disabled": isDisabled,
264
+ className: slots.group({
265
+ className: classNames?.group
266
+ })
267
+ }),
268
+ tabIndex: isDisabled ? void 0 : 0,
269
+ onClick: triggerFileSelector,
270
+ onKeyDown: (e) => {
271
+ if (e.key === "Enter" || e.key === " ") {
272
+ e.preventDefault();
273
+ triggerFileSelector();
274
+ }
275
+ },
276
+ children: [
277
+ /* @__PURE__ */ jsx("input", { ...inputProps }),
278
+ /* @__PURE__ */ jsxs(
279
+ "div",
280
+ {
281
+ "data-dragging": dataAttr(isDragActive),
282
+ className: slots.dropzone({ className: classNames?.dropzone }),
283
+ children: [
284
+ /* @__PURE__ */ jsx(Upload, { className: slots.icon({ className: classNames?.icon }) }),
285
+ /* @__PURE__ */ jsxs("div", { className: slots.text({ className: classNames?.text }), children: [
286
+ /* @__PURE__ */ jsxs(
287
+ "span",
288
+ {
289
+ className: slots.dropzoneHighlight({
290
+ className: classNames?.dropzoneHighlight
291
+ }),
292
+ children: [
293
+ "Choose ",
294
+ maxFiles === 1 ? `file` : `files`
295
+ ]
296
+ }
297
+ ),
298
+ " ",
299
+ "or drag and drop here"
300
+ ] })
301
+ ]
302
+ }
303
+ )
304
+ ]
305
+ }
306
+ );
307
+ };
308
+
309
+ export { FileDropzone };
@@ -0,0 +1,144 @@
1
+ "use strict";
2
+ "use client";
3
+ import { jsxs, jsx } from 'react/jsx-runtime';
4
+ import { useState, useEffect } from 'react';
5
+ import { fileInfoDropzoneStyles, cn } from '@opengovsg/oui-theme';
6
+ import { useFileDropzoneStateContext, useFileDropzoneStyleContext } from './contexts.js';
7
+ import { formatBytes } from './utils.js';
8
+ import Trash2 from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/trash-2.js';
9
+ import { Button } from '../button/button.js';
10
+
11
+ const FileInfo = ({ file, imagePreview, classNames }) => {
12
+ const {
13
+ handleRemoveFile,
14
+ handleRemoveRejection,
15
+ formatError,
16
+ isDisabled,
17
+ isReadOnly
18
+ } = useFileDropzoneStateContext();
19
+ const { size, variant, itemClassNames } = useFileDropzoneStyleContext();
20
+ const readableFileSize = formatBytes(file.size, 2);
21
+ const styles = fileInfoDropzoneStyles({
22
+ size,
23
+ variant,
24
+ imagePreview: imagePreview ?? void 0
25
+ });
26
+ const [previewSrc, setPreviewSrc] = useState("");
27
+ useEffect(() => {
28
+ let objectUrl = "";
29
+ if (file.type.startsWith("image/")) {
30
+ objectUrl = URL.createObjectURL(file);
31
+ setPreviewSrc(objectUrl);
32
+ }
33
+ return () => URL.revokeObjectURL(objectUrl);
34
+ }, [file]);
35
+ return /* @__PURE__ */ jsxs(
36
+ "div",
37
+ {
38
+ className: styles.base({
39
+ className: cn(itemClassNames?.base, classNames?.base)
40
+ }),
41
+ children: [
42
+ /* @__PURE__ */ jsxs("div", { className: "sr-only", children: [
43
+ "File attached: ",
44
+ file.name,
45
+ " with file size of ",
46
+ readableFileSize
47
+ ] }),
48
+ imagePreview && previewSrc && /* @__PURE__ */ jsx(
49
+ "div",
50
+ {
51
+ className: styles.imageContainer({
52
+ className: cn(
53
+ itemClassNames?.imageContainer,
54
+ classNames?.imageContainer
55
+ )
56
+ }),
57
+ children: /* @__PURE__ */ jsx(
58
+ "img",
59
+ {
60
+ src: previewSrc,
61
+ alt: `Image preview of uploaded file: ${file.name}`,
62
+ className: styles.image({
63
+ className: cn(itemClassNames?.image, classNames?.image)
64
+ })
65
+ }
66
+ )
67
+ }
68
+ ),
69
+ /* @__PURE__ */ jsxs(
70
+ "div",
71
+ {
72
+ className: styles.container({
73
+ className: cn(itemClassNames?.container, classNames?.container)
74
+ }),
75
+ children: [
76
+ /* @__PURE__ */ jsxs(
77
+ "div",
78
+ {
79
+ className: styles.textContainer({
80
+ className: cn(
81
+ itemClassNames?.textContainer,
82
+ classNames?.textContainer
83
+ )
84
+ }),
85
+ children: [
86
+ /* @__PURE__ */ jsx(
87
+ "p",
88
+ {
89
+ title: file.name,
90
+ className: styles.name({
91
+ className: cn(itemClassNames?.name, classNames?.name)
92
+ }),
93
+ children: file.name
94
+ }
95
+ ),
96
+ /* @__PURE__ */ jsx(
97
+ "p",
98
+ {
99
+ className: styles.size({
100
+ className: cn(itemClassNames?.size, classNames?.size)
101
+ }),
102
+ children: readableFileSize
103
+ }
104
+ ),
105
+ file.errors?.length && /* @__PURE__ */ jsx(
106
+ "p",
107
+ {
108
+ className: styles.error({
109
+ className: cn(itemClassNames?.error, classNames?.error)
110
+ }),
111
+ children: file.errors.map(formatError).join(", ")
112
+ }
113
+ )
114
+ ]
115
+ }
116
+ ),
117
+ /* @__PURE__ */ jsx(
118
+ Button,
119
+ {
120
+ isDisabled: isDisabled || isReadOnly,
121
+ isIconOnly: !file.errors?.length,
122
+ size: size === "md" ? "md" : "xs",
123
+ variant: "clear",
124
+ color: file.errors?.length ? "main" : "critical",
125
+ "aria-label": "Remove file",
126
+ className: styles.actionButton({
127
+ className: cn(
128
+ itemClassNames?.actionButton,
129
+ classNames?.actionButton
130
+ )
131
+ }),
132
+ onPress: () => file.errors?.length ? handleRemoveRejection(file.name) : handleRemoveFile(file.name),
133
+ children: file.errors?.length ? "Dismiss" : /* @__PURE__ */ jsx(Trash2, {})
134
+ }
135
+ )
136
+ ]
137
+ }
138
+ )
139
+ ]
140
+ }
141
+ );
142
+ };
143
+
144
+ export { FileInfo };
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ export { FileDropzone } from './file-dropzone.js';
3
+ export { FileInfo } from './file-info.js';
4
+ export { formatBytes, formatErrorMessage } from './utils.js';
@@ -0,0 +1 @@
1
+ "use strict";
@@ -0,0 +1,28 @@
1
+ "use strict";
2
+ import { ErrorCode } from 'react-dropzone';
3
+
4
+ const formatBytes = (bytes, decimals = 2, size) => {
5
+ const k = 1e3;
6
+ const dm = decimals < 0 ? 0 : decimals;
7
+ const sizes = ["bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
8
+ if (bytes === 0 || bytes === void 0)
9
+ return size !== void 0 ? `0 ${size}` : "0 bytes";
10
+ const i = size !== void 0 ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k));
11
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
12
+ };
13
+ const formatErrorMessage = (error, config) => {
14
+ const { maxFileSize, minFileSize, maxFiles } = config;
15
+ switch (error.code) {
16
+ case ErrorCode.FileTooLarge:
17
+ return `You have exceeded the size limit, please upload a file below ${formatBytes(maxFileSize, 2)}`;
18
+ case ErrorCode.FileTooSmall:
19
+ return `Please upload a file above ${formatBytes(minFileSize, 2)}`;
20
+ case ErrorCode.TooManyFiles:
21
+ return `Maximum number of files allowed is ${maxFiles}.`;
22
+ default: {
23
+ return error.message;
24
+ }
25
+ }
26
+ };
27
+
28
+ export { formatBytes, formatErrorMessage };
package/dist/esm/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  export { useControllableState } from './hooks/use-controllable-state.js';
3
+ export { Button } from './button/button.js';
3
4
  export { GovtBanner } from './govt-banner/govt-banner.js';
4
5
  export { Ripple } from './ripple/ripple.js';
5
6
  export { useRipple } from './ripple/use-ripple.js';
@@ -9,23 +10,24 @@ export { Toggle } from './toggle/toggle.js';
9
10
  export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
10
11
  export { Input } from './input/input.js';
11
12
  export { TextField } from './text-field/text-field.js';
12
- export { Description, FieldError, FieldGroup, Label } from './field/field.js';
13
+ export { Description, FieldError, FieldErrorIcon, FieldGroup, Label } from './field/field.js';
13
14
  export { TextArea } from './text-area/text-area.js';
14
15
  export { TextAreaField } from './text-area-field/text-area-field.js';
15
16
  export { ComboBox, ComboBoxEmptyState } from './combo-box/combo-box.js';
16
17
  export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
17
18
  export { ComboBoxItem } from './combo-box/combo-box-item.js';
18
19
  export { ComboBoxVariantContext, useComboBoxVariantContext } from './combo-box/combo-box-variant-context.js';
20
+ export { Banner } from './banner/banner.js';
19
21
  export { TagField } from './tag-field/tag-field.js';
20
22
  export { TagFieldItem } from './tag-field/tag-field-item.js';
21
23
  export { Select } from './select/select.js';
22
24
  export { SelectItem } from './select/select-item.js';
23
25
  export { SelectVariantContext, useSelectVariantContext } from './select/select-variant-context.js';
24
26
  export { Badge } from './badge/badge.js';
27
+ export { CalendarDate } from '@internationalized/date';
25
28
  export { Calendar, CalendarStateWrapper } from './calendar/calendar.js';
26
29
  export { CalendarStyleContext, useCalendarStyleContext } from './calendar/calendar-style-context.js';
27
30
  export { getEraFormat, useGenerateLocalizedMonths, useGenerateLocalizedYears, useLocalizedMonthYear } from './calendar/utils.js';
28
- export { CalendarDate } from '@internationalized/date';
29
31
  export { RangeCalendar, RangeCalendarCell, RangeCalendarStateWrapper } from './range-calendar/range-calendar.js';
30
32
  export { Menu, MenuItem, MenuSection, MenuSeparator, MenuTrigger, MenuVariantContext, SubmenuTrigger, useMenuVariantContext } from './menu/menu.js';
31
33
  export { Popover } from './popover/popover.js';
@@ -35,10 +37,11 @@ export { DatePicker } from './date-picker/date-picker.js';
35
37
  export { DateRangePicker } from './date-range-picker/date-range-picker.js';
36
38
  export { Checkbox, CheckboxGroup } from './checkbox/checkbox.js';
37
39
  export { CheckboxGroupStyleContext, useCheckboxGroupStyleContext } from './checkbox/checkbox-group-style-context.js';
40
+ export { PaginationItemType } from './pagination/hooks/use-pagination.js';
38
41
  export { Pagination } from './pagination/pagination.js';
39
42
  export { PaginationCursor } from './pagination/pagination-cursor.js';
40
43
  export { PaginationItem } from './pagination/pagination-item.js';
41
- export { PaginationItemType } from './pagination/hooks/use-pagination.js';
42
44
  export { CURSOR_TRANSITION_TIMEOUT, usePagination } from './pagination/use-pagination.js';
43
- export { Button } from './button/button.js';
44
- export { Banner } from './banner/banner.js';
45
+ export { FileDropzone } from './file-dropzone/file-dropzone.js';
46
+ export { FileInfo } from './file-dropzone/file-info.js';
47
+ export { formatBytes, formatErrorMessage } from './file-dropzone/utils.js';
@@ -4,11 +4,11 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import { forwardRef, useMemo, useCallback } from 'react';
5
5
  import { useContextProps, MenuItem as MenuItem$1, composeRenderProps, Provider, Menu as Menu$1, MenuSection as MenuSection$1, Header, Collection, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Separator } from 'react-aria-components';
6
6
  import { listBoxItemStyles, menuItemStyles, menuStyles, menuSectionStyles, menuDividerStyles } from '@opengovsg/oui-theme';
7
- import { Popover } from '../popover/popover.js';
8
7
  import { forwardRefGeneric, mapPropsVariants } from '../system/utils.js';
9
8
  import Check from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/check.js';
10
9
  import ChevronRight from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-right.js';
11
10
  import { createContext } from '../system/react-utils/context.js';
11
+ import { Popover } from '../popover/popover.js';
12
12
 
13
13
  const [MenuVariantContext, useMenuVariantContext] = createContext({
14
14
  name: "MenuVariantContext",
@@ -0,0 +1,20 @@
1
+ import createLucideIcon from '../createLucideIcon.js';
2
+
3
+ /**
4
+ * @license lucide-react v0.475.0 - ISC
5
+ *
6
+ * This source code is licensed under the ISC license.
7
+ * See the LICENSE file in the root directory of this source tree.
8
+ */
9
+
10
+
11
+ const __iconNode = [
12
+ ["path", { d: "M3 6h18", key: "d0wm0j" }],
13
+ ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
14
+ ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
15
+ ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
16
+ ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
17
+ ];
18
+ const Trash2 = createLucideIcon("Trash2", __iconNode);
19
+
20
+ export { __iconNode, Trash2 as default };
@@ -0,0 +1,18 @@
1
+ import createLucideIcon from '../createLucideIcon.js';
2
+
3
+ /**
4
+ * @license lucide-react v0.475.0 - ISC
5
+ *
6
+ * This source code is licensed under the ISC license.
7
+ * See the LICENSE file in the root directory of this source tree.
8
+ */
9
+
10
+
11
+ const __iconNode = [
12
+ ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
13
+ ["polyline", { points: "17 8 12 3 7 8", key: "t8dd8p" }],
14
+ ["line", { x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" }]
15
+ ];
16
+ const Upload = createLucideIcon("Upload", __iconNode);
17
+
18
+ export { __iconNode, Upload as default };