@alma-oss/spirit-web-react 4.6.1 → 4.8.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.8.0](https://github.com/alma-oss/spirit-design-system/compare/@alma-oss/spirit-web-react@4.7.0...@alma-oss/spirit-web-react@4.8.0) (2026-06-02)
+
+### Features
+
+- **web, web-react:** add popoverProps and labelProps to Picker #DS-2568, closes [#DS-2568](https://github.com/alma-oss/spirit-design-system/issues/DS-2568)
+
+### Code Refactoring
+
+- **web-react:** use Grid and Stack in `UNSTABLE_FileUpload` demos
+
+## [4.7.0](https://github.com/alma-oss/spirit-design-system/compare/@alma-oss/spirit-web-react@4.6.1...@alma-oss/spirit-web-react@4.7.0) (2026-05-21)
+
+### Features
+
+- **web-react:** deprecate FileUploader component and subcomponents #DS-2444, closes [#DS-2444](https://github.com/alma-oss/spirit-design-system/issues/DS-2444)
+
+### Documentation
+
+- **web-react:** update missing prop on PickerItem
+
+### Chores
+
+- **web-react:** fix subpath type declarations not resolving, closes [#DS-2561](https://github.com/alma-oss/spirit-design-system/issues/DS-2561)
+
 ## [4.6.1](https://github.com/alma-oss/spirit-design-system/compare/@alma-oss/spirit-web-react@4.6.0...@alma-oss/spirit-web-react@4.6.1) (2026-05-18)
 
 ### Bug Fixes

package/DEPRECATIONS.md

@@ -34,6 +34,48 @@ We are providing a [codemod][codemod-flex] to assist with this change.
 
 The `Header` component is deprecated, please use the `UNSTABLE_Header` component instead.
 
+### FileUploader
+
+The `FileUploader` component and its subcomponents are deprecated. Use `UNSTABLE_FileUpload` and `UNSTABLE_File` instead. `UNSTABLE_FileUpload` is visual-first; you own queue handling, validation, and form integration.
+
+For details, see [UNSTABLE_FileUpload][unstable-file-upload] and [UNSTABLE_File][unstable-file] documentation.
+
+#### Migration Guide
+
+1. Replace `FileUploader` composition (`FileUploader`, `FileUploaderInput`, `FileUploaderList`, `FileUploaderAttachment`) with `UNSTABLE_FileUpload` + `UNSTABLE_File`.
+2. Move queue handling (`addToQueue`, `onDismiss`, duplicate checks, limits) from component internals to your application state.
+3. Keep validation in your app and pass only visual validation props to `UNSTABLE_FileUpload`.
+
+```tsx
+// before
+<FileUploader id="file-uploader" fileQueue={fileQueue} addToQueue={addToQueue} onDismiss={onDismiss} clearQueue={clearQueue}>
+  <FileUploaderInput id="file-uploader-input" name="attachments" label="Label" linkText="Upload your file(s)" />
+  <FileUploaderList
+    id="file-uploader-list"
+    inputName="attachments"
+    label="Attachments"
+    attachmentComponent={(props) => <FileUploaderAttachment key={props.id} {...props} />}
+  />
+</FileUploader>
+
+// after
+<Stack hasSpacing>
+  <UNSTABLE_FileUpload
+    id="file-upload"
+    name="attachments"
+    label="Label"
+    linkText="Upload your file(s)"
+    labelText="or drag and drop here"
+    onFilesSelected={onFilesSelected}
+  />
+  <Stack elementType="ul" aria-label="Uploaded files" hasSpacing>
+    {items.map((item) => (
+      <UNSTABLE_File key={item.id} id={item.id} label={item.label} onDismiss={() => onDismiss(item.id)} />
+    ))}
+  </Stack>
+</Stack>
+```
+
 ### Stack
 
 If you are using the `Stack` component with dividers, you must wrap each item inside the `Stack` component with a `StackItem` component.
@@ -67,3 +109,5 @@ For more information, see documentation for [Button][button] and [ButtonLink][bu
 [codemod-collapse]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/codemods/src/transforms/v4/web-react/README.md#v4web-reactcollapse-isdisposable-prop--uncontrolledcollapse-hideoncollapse-to-isdisposable-prop-change
 [codemod-flex]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/codemods/src/transforms/v4/web-react/README.md#v4web-reactflex-direction-values---flex-direction-prop-values-row-to-horizontal-and-column-to-vertical
 [readme-deprecations]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/README.md#deprecations
+[unstable-file]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/UNSTABLE_File/README.md
+[unstable-file-upload]: https://github.com/alma-oss/spirit-design-system/blob/main/packages/web-react/src/components/UNSTABLE_FileUpload/README.md

package/dist/bundles/web-react.umd.js

@@ -7812,6 +7812,12 @@
     } = props;
     const { classProps } = useFileUploaderStyleProps({ isFluid });
     const { styleProps, props: transferProps } = useStyleProps(restProps);
+    useDeprecationMessage({
+      method: "custom",
+      trigger: true,
+      componentName: "FileUploader",
+      customText: "See the UNSTABLE_FileUpload and UNSTABLE_File component documentation."
+    });
     const contextValue = {
       addToQueue,
       clearQueue,
@@ -16366,6 +16372,9 @@
   UNSTABLE_HeaderLogo.spiritComponent = "UNSTABLE_HeaderLogo";
   UNSTABLE_HeaderLogo.displayName = "UNSTABLE_HeaderLogo";
   const DEFAULT_SIZE = Sizes.MEDIUM;
+  const DEFAULT_POPOVER_PROPS = {
+    theme: "theme-light-default"
+  };
   const PICKER_NESTED_SIZE_MAP = {
     [Sizes.SMALL]: SizesExtended.XSMALL,
     [Sizes.MEDIUM]: SizesExtended.SMALL,
@@ -16731,9 +16740,12 @@
       isLabelHidden = false,
       isOpen,
       isRequired = false,
+      dropdownProps,
       label,
+      labelProps,
       onSelectionChange,
       onToggle,
+      popoverProps = DEFAULT_POPOVER_PROPS,
       removeAllLabel = t("picker.removeAll"),
       renderTags,
       selectedKeys,
@@ -16856,8 +16868,17 @@
       [close, selectedKeys]
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(PickerContextProvider, { value: { size: size2, tagDescriptionId }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ...styleProps, className: classNames(classProps.root, styleProps.className), ...transferProps, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { id: labelId, UNSAFE_className: classProps.label, elementType: "span", children: label }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { id: popoverId, isOpen, onToggle, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Label,
+        {
+          ...labelProps,
+          id: labelId,
+          elementType: "span",
+          UNSAFE_className: classNames(classProps.label, labelProps?.UNSAFE_className),
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Dropdown, { ...dropdownProps, id: popoverId, isOpen, onToggle, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { role: "group", "aria-label": label, className: classProps.inputContainer, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "div",
@@ -16895,6 +16916,7 @@
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           DropdownPopover,
           {
+            ...popoverProps,
             "aria-labelledby": labelId,
             role: "dialog",
             "aria-modal": "true",