@opengovsg/oui 0.0.0-snapshot-20251103063040 → 0.0.0-snapshot-20251201075851

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 (150) hide show
  1. package/dist/cjs/badge/badge.cjs +4 -4
  2. package/dist/cjs/badge/use-badge.cjs +6 -6
  3. package/dist/cjs/banner/banner.cjs +3 -3
  4. package/dist/cjs/button/button.cjs +4 -4
  5. package/dist/cjs/calendar/calendar-bottom-content.cjs +3 -3
  6. package/dist/cjs/calendar/calendar-header.cjs +2 -2
  7. package/dist/cjs/calendar/calendar-month-day-selector.cjs +6 -5
  8. package/dist/cjs/calendar/calendar.cjs +4 -4
  9. package/dist/cjs/calendar/hooks/use-calendar-selectors.cjs +4 -4
  10. package/dist/cjs/calendar/utils.cjs +3 -3
  11. package/dist/cjs/checkbox/checkbox.cjs +1 -1
  12. package/dist/cjs/combo-box/combo-box-fuzzy.cjs +6 -6
  13. package/dist/cjs/combo-box/combo-box-item.cjs +2 -2
  14. package/dist/cjs/combo-box/combo-box.cjs +5 -5
  15. package/dist/cjs/date-field/date-field.cjs +16 -7
  16. package/dist/cjs/date-picker/date-picker.cjs +39 -14
  17. package/dist/cjs/date-range-picker/date-range-picker.cjs +7 -7
  18. package/dist/cjs/field/field.cjs +20 -6
  19. package/dist/cjs/field/index.cjs +1 -0
  20. package/dist/cjs/file-dropzone/contexts.cjs +18 -0
  21. package/dist/cjs/file-dropzone/file-dropzone.cjs +311 -0
  22. package/dist/cjs/file-dropzone/file-info.cjs +146 -0
  23. package/dist/cjs/file-dropzone/index.cjs +13 -0
  24. package/dist/cjs/file-dropzone/types.cjs +3 -0
  25. package/dist/cjs/file-dropzone/utils.cjs +31 -0
  26. package/dist/cjs/govt-banner/govt-banner.cjs +3 -3
  27. package/dist/cjs/hooks/use-callback-ref.cjs +4 -4
  28. package/dist/cjs/hooks/use-controllable-state.cjs +2 -2
  29. package/dist/cjs/index.cjs +34 -24
  30. package/dist/cjs/input/input.cjs +2 -2
  31. package/dist/cjs/menu/menu.cjs +7 -7
  32. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/Icon.cjs +4 -4
  33. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/createLucideIcon.cjs +3 -3
  34. package/dist/cjs/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.cjs +22 -0
  35. 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
  36. 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
  37. package/dist/cjs/number-field/index.cjs +8 -0
  38. package/dist/cjs/number-field/number-field.cjs +136 -0
  39. package/dist/cjs/pagination/hooks/use-pagination.cjs +7 -7
  40. package/dist/cjs/pagination/pagination.cjs +6 -6
  41. package/dist/cjs/pagination/use-pagination-item.cjs +7 -8
  42. package/dist/cjs/pagination/use-pagination.cjs +8 -8
  43. package/dist/cjs/range-calendar/range-calendar.cjs +6 -6
  44. package/dist/cjs/ripple/use-ripple.cjs +4 -4
  45. package/dist/cjs/select/select.cjs +4 -4
  46. package/dist/cjs/spinner/use-spinner.cjs +3 -3
  47. package/dist/cjs/system/react-utils/context.cjs +3 -3
  48. package/dist/cjs/system/react-utils/refs.cjs +3 -3
  49. package/dist/cjs/system/utils.cjs +3 -3
  50. package/dist/cjs/tabs/tabs.cjs +2 -2
  51. package/dist/cjs/tag-field/tag-field-item.cjs +2 -2
  52. package/dist/cjs/tag-field/tag-field-list.cjs +4 -4
  53. package/dist/cjs/tag-field/tag-field-root.cjs +14 -14
  54. package/dist/cjs/tag-field/tag-field-state-context.cjs +2 -2
  55. package/dist/cjs/tag-field/tag-field-tag-list.cjs +3 -3
  56. package/dist/cjs/tag-field/tag-field-trigger.cjs +2 -2
  57. package/dist/cjs/tag-field/tag-field.cjs +5 -5
  58. package/dist/cjs/tag-field/use-tag-field-state.cjs +6 -6
  59. package/dist/cjs/tag-field/use-tag-field.cjs +4 -4
  60. package/dist/cjs/text-area/text-area.cjs +2 -2
  61. package/dist/cjs/text-area-field/text-area-field.cjs +1 -1
  62. package/dist/cjs/text-field/text-field.cjs +1 -1
  63. package/dist/cjs/toggle/toggle.cjs +3 -3
  64. package/dist/esm/button/button.js +1 -1
  65. package/dist/esm/calendar/calendar-month-day-selector.js +4 -3
  66. package/dist/esm/checkbox/checkbox.js +1 -1
  67. package/dist/esm/combo-box/combo-box.js +2 -2
  68. package/dist/esm/date-field/date-field.js +13 -4
  69. package/dist/esm/date-picker/date-picker.js +37 -12
  70. package/dist/esm/date-range-picker/date-range-picker.js +4 -4
  71. package/dist/esm/field/field.js +20 -7
  72. package/dist/esm/field/index.js +1 -1
  73. package/dist/esm/file-dropzone/contexts.js +13 -0
  74. package/dist/esm/file-dropzone/file-dropzone.js +309 -0
  75. package/dist/esm/file-dropzone/file-info.js +144 -0
  76. package/dist/esm/file-dropzone/index.js +4 -0
  77. package/dist/esm/file-dropzone/types.js +1 -0
  78. package/dist/esm/file-dropzone/utils.js +28 -0
  79. package/dist/esm/index.js +13 -9
  80. package/dist/esm/menu/menu.js +1 -1
  81. package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/plus.js +17 -0
  82. 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
  83. 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
  84. package/dist/esm/number-field/index.js +2 -0
  85. package/dist/esm/number-field/number-field.js +134 -0
  86. package/dist/esm/pagination/use-pagination-item.js +5 -6
  87. package/dist/esm/select/select.js +2 -2
  88. package/dist/esm/tag-field/tag-field.js +3 -3
  89. package/dist/esm/text-area-field/text-area-field.js +1 -1
  90. package/dist/esm/text-field/text-field.js +1 -1
  91. package/dist/types/calendar/calendar-month-day-selector.d.ts.map +1 -1
  92. package/dist/types/date-field/date-field.d.ts +1 -0
  93. package/dist/types/date-field/date-field.d.ts.map +1 -1
  94. package/dist/types/date-picker/date-picker.d.ts +5 -2
  95. package/dist/types/date-picker/date-picker.d.ts.map +1 -1
  96. package/dist/types/field/field.d.ts +4 -1
  97. package/dist/types/field/field.d.ts.map +1 -1
  98. package/dist/types/file-dropzone/contexts.d.ts +4 -0
  99. package/dist/types/file-dropzone/contexts.d.ts.map +1 -0
  100. package/dist/types/file-dropzone/file-dropzone.d.ts +82 -0
  101. package/dist/types/file-dropzone/file-dropzone.d.ts.map +1 -0
  102. package/dist/types/file-dropzone/file-info.d.ts +9 -0
  103. package/dist/types/file-dropzone/file-info.d.ts.map +1 -0
  104. package/dist/types/file-dropzone/index.d.ts +7 -0
  105. package/dist/types/file-dropzone/index.d.ts.map +1 -0
  106. package/dist/types/file-dropzone/types.d.ts +24 -0
  107. package/dist/types/file-dropzone/types.d.ts.map +1 -0
  108. package/dist/types/file-dropzone/utils.d.ts +8 -0
  109. package/dist/types/file-dropzone/utils.d.ts.map +1 -0
  110. package/dist/types/index.d.mts +2 -0
  111. package/dist/types/index.d.ts +2 -0
  112. package/dist/types/index.d.ts.map +1 -1
  113. package/dist/types/menu/menu.d.ts.map +1 -1
  114. package/dist/types/number-field/index.d.ts +3 -0
  115. package/dist/types/number-field/index.d.ts.map +1 -0
  116. package/dist/types/number-field/number-field.d.ts +24 -0
  117. package/dist/types/number-field/number-field.d.ts.map +1 -0
  118. package/package.json +12 -8
  119. package/dist/cjs/node_modules/.pnpm/@react-aria_focus@3.20.5_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/focus/dist/useFocusRing.cjs +0 -45
  120. package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/context.cjs +0 -21
  121. package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/textSelection.cjs +0 -72
  122. package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocus.cjs +0 -60
  123. package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusVisible.cjs +0 -210
  124. package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusWithin.cjs +0 -100
  125. package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useHover.cjs +0 -152
  126. package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/usePress.cjs +0 -676
  127. package/dist/cjs/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/utils.cjs +0 -160
  128. package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_check_private_redeclaration.cjs +0 -9
  129. package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_apply_descriptor_get.cjs +0 -9
  130. package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_apply_descriptor_set.cjs +0 -16
  131. package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_extract_field_descriptor.cjs +0 -9
  132. package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_get.cjs +0 -11
  133. package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_init.cjs +0 -10
  134. package/dist/cjs/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_set.cjs +0 -12
  135. package/dist/esm/node_modules/.pnpm/@react-aria_focus@3.20.5_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/focus/dist/useFocusRing.js +0 -43
  136. package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/context.js +0 -19
  137. package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/textSelection.js +0 -69
  138. package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocus.js +0 -58
  139. package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusVisible.js +0 -205
  140. package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useFocusWithin.js +0 -98
  141. package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/useHover.js +0 -150
  142. package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/usePress.js +0 -674
  143. package/dist/esm/node_modules/.pnpm/@react-aria_interactions@3.25.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@react-aria/interactions/dist/utils.js +0 -155
  144. package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_check_private_redeclaration.js +0 -7
  145. package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_apply_descriptor_get.js +0 -7
  146. package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_apply_descriptor_set.js +0 -14
  147. package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_extract_field_descriptor.js +0 -7
  148. package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_get.js +0 -9
  149. package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_init.js +0 -8
  150. package/dist/esm/node_modules/.pnpm/@swc_helpers@0.5.17/node_modules/@swc/helpers/esm/_class_private_field_set.js +0 -10
@@ -4,12 +4,20 @@ import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { useMemo } from 'react';
5
5
  import { DateField as DateField$1, DateInput as DateInput$1, DateSegment } from 'react-aria-components';
6
6
  import { dateFieldStyles, composeTailwindRenderProps, dateInputStyles, composeRenderProps } from '@opengovsg/oui-theme';
7
- import { Label, Description, FieldError } from '../field/field.js';
8
7
  import { mapPropsVariants } from '../system/utils.js';
8
+ import { Label, Description, FieldError } from '../field/field.js';
9
9
 
10
10
  function DateField(originalProps) {
11
11
  const [
12
- { label, description, errorMessage, className, classNames, ...props },
12
+ {
13
+ inputProps,
14
+ label,
15
+ description,
16
+ errorMessage,
17
+ className,
18
+ classNames,
19
+ ...props
20
+ },
13
21
  variantProps
14
22
  ] = useMemo(
15
23
  () => mapPropsVariants(originalProps, dateFieldStyles.variantKeys),
@@ -26,11 +34,11 @@ function DateField(originalProps) {
26
34
  isDisabled: variantProps.isDisabled,
27
35
  className: composeTailwindRenderProps(
28
36
  className ?? classNames?.base,
29
- "flex flex-col gap-2"
37
+ "flex w-full flex-col gap-2"
30
38
  ),
31
39
  children: [
32
40
  label && /* @__PURE__ */ jsx(Label, { size: variantProps.size, className: classNames?.label, children: label }),
33
- /* @__PURE__ */ jsx(DateInput, { size: variantProps.size, className: styles }),
41
+ /* @__PURE__ */ jsx(DateInput, { size: variantProps.size, className: styles, ...inputProps }),
34
42
  description && /* @__PURE__ */ jsx(
35
43
  Description,
36
44
  {
@@ -65,6 +73,7 @@ function DateInput(originalProps) {
65
73
  className: composeRenderProps(
66
74
  classNames?.segment,
67
75
  (className2, renderProps) => styles.segment({
76
+ isEditable: segment.isEditable,
68
77
  ...renderProps,
69
78
  className: className2
70
79
  })
@@ -4,13 +4,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
4
4
  import { useMemo } from 'react';
5
5
  import { DatePicker as DatePicker$1, Dialog } from 'react-aria-components';
6
6
  import { datePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
7
- import { DateInput } from '../date-field/date-field.js';
8
- import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
9
- import { Popover } from '../popover/popover.js';
10
7
  import { mapPropsVariants } from '../system/utils.js';
8
+ import { DateInput } from '../date-field/date-field.js';
11
9
  import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
12
10
  import { Calendar as Calendar$1 } from '../calendar/calendar.js';
11
+ import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
13
12
  import { Button } from '../button/button.js';
13
+ import { Popover } from '../popover/popover.js';
14
14
 
15
15
  function DatePicker(originalProps) {
16
16
  const [
@@ -23,6 +23,7 @@ function DatePicker(originalProps) {
23
23
  calendarProps,
24
24
  popoverProps,
25
25
  calendarButtonProps,
26
+ selectorIcon,
26
27
  ...props
27
28
  },
28
29
  variantProps
@@ -61,20 +62,44 @@ function DatePicker(originalProps) {
61
62
  className: classNames?.calendarButton
62
63
  }),
63
64
  ...calendarButtonProps,
64
- children: /* @__PURE__ */ jsx(Calendar, { "aria-hidden": true })
65
+ children: selectorIcon ?? /* @__PURE__ */ jsx(
66
+ Calendar,
67
+ {
68
+ className: styles.selectorIcon({
69
+ className: classNames?.selectorIcon
70
+ }),
71
+ "aria-hidden": true
72
+ }
73
+ )
65
74
  }
66
75
  )
67
76
  ] }),
68
- /* @__PURE__ */ jsx(Popover, { placement: "bottom end", ...popoverProps, children: /* @__PURE__ */ jsx(Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsx(
69
- Calendar$1,
77
+ /* @__PURE__ */ jsx(
78
+ Popover,
79
+ {
80
+ placement: "bottom end",
81
+ classNames: classNames?.popover,
82
+ ...popoverProps,
83
+ children: /* @__PURE__ */ jsx(Dialog, { className: styles.dialog({ className: classNames?.dialog }), children: /* @__PURE__ */ jsx(
84
+ Calendar$1,
85
+ {
86
+ size: variantProps.size === "xs" ? "sm" : variantProps.size,
87
+ classNames: classNames?.calendar,
88
+ pageBehavior: props.pageBehavior,
89
+ ...calendarProps
90
+ }
91
+ ) })
92
+ }
93
+ ),
94
+ description && /* @__PURE__ */ jsx(
95
+ Description,
70
96
  {
71
- size: variantProps.size === "xs" ? "sm" : variantProps.size,
72
- classNames: classNames?.calendar,
73
- ...calendarProps
97
+ className: classNames?.description,
98
+ size: variantProps.size,
99
+ children: description
74
100
  }
75
- ) }) }),
76
- description && /* @__PURE__ */ jsx(Description, { size: variantProps.size, children: description }),
77
- /* @__PURE__ */ jsx(FieldError, { size: variantProps.size, children: errorMessage })
101
+ ),
102
+ /* @__PURE__ */ jsx(FieldError, { classNames: classNames?.error, size: variantProps.size, children: errorMessage })
78
103
  ]
79
104
  }
80
105
  );
@@ -5,13 +5,13 @@ import { useMemo } from 'react';
5
5
  import { CalendarDate } from '@internationalized/date';
6
6
  import { DateRangePicker as DateRangePicker$1, Dialog } from 'react-aria-components';
7
7
  import { dateRangePickerStyles, composeTailwindRenderProps } from '@opengovsg/oui-theme';
8
- import { DateInput } from '../date-field/date-field.js';
9
- import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
10
- import { Popover } from '../popover/popover.js';
11
- import { RangeCalendar } from '../range-calendar/range-calendar.js';
12
8
  import { mapPropsVariants } from '../system/utils.js';
13
9
  import Calendar from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/calendar.js';
10
+ import { RangeCalendar } from '../range-calendar/range-calendar.js';
11
+ import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
12
+ import { DateInput } from '../date-field/date-field.js';
14
13
  import { Button } from '../button/button.js';
14
+ import { Popover } from '../popover/popover.js';
15
15
 
16
16
  function DateRangePicker(originalProps) {
17
17
  const [
@@ -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";