@rubixstudios/payload-media 1.2.3 → 2.0.0

package/README.md

@@ -1,75 +1,112 @@
-# PayloadCMS Media Search Plugin
+# Payload CMS Media Plugin
 
-PayloadCMS plugin for stock image and video search across Unsplash, Pexels, and Pixabay, with filterable results and instant import.
+Payload CMS Media Plugin adds stock image and video search to the Payload Admin interface. Search Unsplash, Pexels, and Pixabay, apply provider-specific filters, preview results, and import selected media into upload collections.
 
-<img width="1912" height="914" alt="Image stock selection" src="https://github.com/user-attachments/assets/80ecb11f-65eb-4f58-a422-df9b170ac5d2" />
+![Stock image selection](https://github.com/user-attachments/assets/f5e62ede-11d9-4d93-9510-9d9dda73dae7)
 
-<img width="1912" height="914" alt="Video stock selection" src="https://github.com/user-attachments/assets/28044aaa-7144-4b66-9d5f-afc58d7939d5" />
+![Stock video selection](https://github.com/user-attachments/assets/4a1e0a7a-f593-45c4-a4c3-4b9325569a52)
 
-This project is an independent implementation derived [PayloadBites' Image Search](https://github.com/rilrom/payload-bites/tree/main/packages/image-search) extended with provider-specific image filtering and improved Windows OS compatibility.
+## Compatibility
+
+The plugin maintains two release lines, with Payload CMS v4 as the primary release and Payload CMS v3 maintained separately.
+
+| Payload CMS | Plugin version | Release branch | npm dist-tag |
+| --- | --- | --- | --- |
+| v4 | 2.x | `main` | `latest` |
+| v3 | 1.x | `payload-v3` | `payload-v3` |
+
+Install the release matching your Payload version. The `latest` tag targets Payload v4 after the v4 release is published.
 
 ## Installation
 
+### Payload CMS v4
+
+Install the latest release.
+
 ```sh
 pnpm add @rubixstudios/payload-media
 ```
 
+### Payload CMS v3
+
+Install from the dedicated v3 release channel.
+
+```sh
+pnpm add @rubixstudios/payload-media@payload-v3
+```
+
+## Configuration
+
+Register `mediaPlugin` in `payload.config.ts`. The plugin uses the same configuration options across both supported Payload versions.
+
 ```typescript
-// payload.config.ts
-import { buildConfig } from 'payload/config'
+import { buildConfig } from 'payload'
 import { mediaPlugin } from '@rubixstudios/payload-media'
 
 export default buildConfig({
   plugins: [
     mediaPlugin({
-      disabled: false, // Optional, defaults to false
-      access: ({ req: { user } }) => Boolean(user), // Media search access control
-      pexels: process.env.API_KEY_PEXELS!,
-      pixabay: process.env.API_KEY_PIXABAY!,
-      unsplash: process.env.API_KEY_UNSPLASH!,
+      pexels: process.env.API_KEY_PEXELS,
+      pixabay: process.env.API_KEY_PIXABAY,
+      unsplash: process.env.API_KEY_UNSPLASH,
+      access: ({ req: { user } }) => Boolean(user),
+      disabled: false,
     }),
   ],
 })
 ```
 
-## Notes
+Provide an API key only for the providers you want to enable. Configured providers appear in the search interface. The plugin adds a **Search media** control to collections with uploads enabled.
+
+### Options
+
+| Option | Type | Default | Description |
+| --- | --- | --- | --- |
+| `pexels` | `string` | `''` | Pexels API key |
+| `pixabay` | `string` | `''` | Pixabay API key |
+| `unsplash` | `string` | `''` | Unsplash access key |
+| `access` | Payload `Access` | Authenticated users | Controls who may use the media search endpoints |
+| `disabled` | `boolean` | `false` | Disables plugin registration |
 
-API key can be obtained from the respective provider's website.
+## Provider API keys
 
-- [Unsplash](https://unsplash.com/developers)
-- [Pexels](https://www.pexels.com/api/)
-- [Pixabay](https://pixabay.com/api/docs/)
+Obtain API credentials from the relevant provider.
 
-When using Unplash, utilise your Access Key for the API Token.
+- [Unsplash Developers](https://unsplash.com/developers)
+- [Pexels API](https://www.pexels.com/api/)
+- [Pixabay API](https://pixabay.com/api/docs/)
+
+For Unsplash, use the application's **Access Key**, not its Secret Key. Keep credentials in server-side environment variables.
 
 ## Features
 
-- Stock image and video search inside Payload Admin
-- Providers: Unsplash, Pexels, Pixabay
-- Provider-specific filters (color, orientation, size, type)
-- Featured and keyword search modes
-- One-click image import
-- Permission-based access control
+- Search stock images and videos inside Payload Admin upload collections.
+- Search images from Unsplash, Pexels, and Pixabay, and videos from Pexels and Pixabay.
+- Browse featured results or search by keyword.
+- Refine searches with provider-specific controls, including colour, orientation, size, image type, category, and ordering where supported.
+- Preview images and videos before selection.
+- Import a selected asset using Payload's upload controls.
+- Restrict access using a configurable Payload access function.
+- Cache successful search responses in browser storage for 24 hours.
+
+## Usage and liability
 
-## Liability
+Media availability, licensing, attribution, and permitted uses depend on the source provider. Review the applicable provider terms and licence conditions before using imported assets.
 
-Rubix Studios, its developers, and contributors bear no responsibility for how images are used.
-Before using any provider, ensure you have reviewed and agreed to their terms and usage policies.
+Rubix Studios, its developers, and contributors bear no responsibility for how imported media is used.
 
 ## Support
 
-For support or inquiries:
+For support or enquiries, contact [Rubix Studios](https://rubixstudios.com.au) or [rubixvi on LinkedIn](https://www.linkedin.com/in/rubixvi/). You can also [open an issue on GitHub](https://github.com/rubix-studios-pty-ltd/payload-media/issues).
 
-- LinkedIn: [rubixvi](https://www.linkedin.com/in/rubixvi/)
-- Website: [Rubix Studios](https://rubixstudios.com.au)
+## License
+
+Distributed under the [MIT License](LICENSE).
 
 ## Author
 
-Rubix Studios  
-[https://rubixstudios.com.au](https://rubixstudios.com.au)
+[Rubix Studios](https://rubixstudios.com.au)
 
 ## Acknowledgments
 
-This project is based on the Image Search by Riley Langbein:
-
-- [Riley Langbein](https://github.com/rilrom)
+This project is an independent implementation derived from [PayloadBites' Image Search](https://github.com/rilrom/payload-bites/tree/main/packages/image-search) by [Riley Langbein](https://github.com/rilrom), extended with provider-specific filters, video support, and Windows compatibility improvements.

package/dist/components/media-search/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-search/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAK1C,eAAO,MAAM,UAAU,yBAAyB,CAAA;AAEhD,eAAO,MAAM,WAAW,yBA8BvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-search/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAK1C,eAAO,MAAM,UAAU,yBAAyB,CAAA;AAEhD,eAAO,MAAM,WAAW,yBAgCvB,CAAA"}

package/dist/components/media-search/index.js

@@ -7,7 +7,7 @@ export const MediaSearch = ()=>{
     const { config } = useConfig();
     const { setUploadControlFileUrl } = useUploadControls();
     const { openModal, closeModal } = useModal();
-    const handleSearchSubmit = useCallback((url)=>{
+    const handleSubmit = useCallback((url)=>{
         if (!url) return;
         setUploadControlFileUrl(url);
         closeModal(drawerSlug);
@@ -18,14 +18,15 @@ export const MediaSearch = ()=>{
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
         className: "file-field__orText"
     }, "Or"), /*#__PURE__*/ React.createElement(Button, {
-        buttonStyle: "pill",
+        buttonStyle: "secondary",
         onClick: ()=>openModal(drawerSlug),
-        size: "small"
+        size: "medium"
     }, "Search media"), /*#__PURE__*/ React.createElement(Drawer, {
-        slug: drawerSlug
+        slug: drawerSlug,
+        title: "Media"
     }, /*#__PURE__*/ React.createElement(SearchDrawer, {
         api: config.routes.api,
-        onSelect: handleSearchSubmit,
+        onSelect: handleSubmit,
         serverURL: config.serverURL
     })));
 };

package/dist/components/search-drawer/filters/pexels.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { type Dispatch, type SetStateAction } from 'react';
 import { type ProviderFilters } from '../../../types.js';
-type PexelsFiltersProps = {
+type Props = {
     filters: ProviderFilters;
     mediaType: 'image' | 'video';
-    setFilters: React.Dispatch<React.SetStateAction<ProviderFilters | null>>;
+    setFilters: Dispatch<SetStateAction<ProviderFilters | null>>;
     baseClass: string;
 };
-export declare const PexelsFilters: ({ filters, mediaType, setFilters, baseClass, }: PexelsFiltersProps) => React.JSX.Element | null;
+export declare const PexelsFilters: ({ filters, mediaType, setFilters, baseClass }: Props) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=pexels.d.ts.map

package/dist/components/search-drawer/filters/pexels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pexels.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/filters/pexels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,mBAAmB,CAAA;AAE1B,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,eAAe,CAAA;IACxB,SAAS,EAAE,OAAO,GAAG,OAAO,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAA;IACxE,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,aAAa,mDAKvB,kBAAkB,6BAyEpB,CAAA"}
+{"version":3,"file":"pexels.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/filters/pexels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAGjE,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,mBAAmB,CAAA;AAE1B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,eAAe,CAAA;IACxB,SAAS,EAAE,OAAO,GAAG,OAAO,CAAA;IAC5B,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAA;IAC5D,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,aAAa,kDAAmD,KAAK,6BAyEjF,CAAA"}

package/dist/components/search-drawer/filters/pexels.js

@@ -2,14 +2,15 @@ import React from 'react';
 import { Select } from '@payloadcms/ui';
 import { PexelsColours, PexelsOrientation, PexelsSize, PexelsVideoSize } from '../../../types.js';
 export const PexelsFilters = ({ filters, mediaType, setFilters, baseClass })=>{
-    if (filters?.provider !== 'pexels') return null;
+    if (filters.provider !== 'pexels') return null;
+    const sizeOptions = mediaType === 'video' ? PexelsVideoSize : PexelsSize;
     return /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__filters`
     }, mediaType !== 'video' && /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pexels' ? {
-                    provider: 'pexels',
+                    ...prev,
                     options: {
                         ...prev.options,
                         color: opt?.value
@@ -17,25 +18,25 @@ export const PexelsFilters = ({ filters, mediaType, setFilters, baseClass })=>{
                 } : prev),
         options: PexelsColours,
         placeholder: "Colour",
-        value: PexelsColours.find((o)=>o.value === filters.options.color)
+        value: PexelsColours.find((option)=>option.value === filters.options.color)
     }), /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pexels' ? {
-                    provider: 'pexels',
+                    ...prev,
                     options: {
                         ...prev.options,
                         size: opt?.value
                     }
                 } : prev),
-        options: mediaType === 'video' ? PexelsVideoSize : PexelsSize,
+        options: sizeOptions,
         placeholder: "Size",
-        value: (mediaType === 'video' ? PexelsVideoSize : PexelsSize).find((o)=>o.value === filters.options.size)
+        value: sizeOptions.find((option)=>option.value === filters.options.size)
     }), /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pexels' ? {
-                    provider: 'pexels',
+                    ...prev,
                     options: {
                         ...prev.options,
                         orientation: opt?.value
@@ -43,6 +44,6 @@ export const PexelsFilters = ({ filters, mediaType, setFilters, baseClass })=>{
                 } : prev),
         options: PexelsOrientation,
         placeholder: "Orientation",
-        value: PexelsOrientation.find((o)=>o.value === filters.options.orientation)
+        value: PexelsOrientation.find((option)=>option.value === filters.options.orientation)
     }));
 };

package/dist/components/search-drawer/filters/pixabay.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { type Dispatch, type SetStateAction } from 'react';
 import { type ProviderFilters } from '../../../types.js';
-type PixabayFiltersProps = {
+type Props = {
     filters: ProviderFilters;
     mediaType: 'image' | 'video';
-    setFilters: React.Dispatch<React.SetStateAction<ProviderFilters | null>>;
+    setFilters: Dispatch<SetStateAction<ProviderFilters | null>>;
     baseClass: string;
 };
-export declare const PixabayFilters: ({ filters, mediaType, setFilters, baseClass, }: PixabayFiltersProps) => React.JSX.Element | null;
+export declare const PixabayFilters: ({ filters, mediaType, setFilters, baseClass }: Props) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=pixabay.d.ts.map

package/dist/components/search-drawer/filters/pixabay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pixabay.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/filters/pixabay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAML,KAAK,eAAe,EAErB,MAAM,mBAAmB,CAAA;AAE1B,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,eAAe,CAAA;IACxB,SAAS,EAAE,OAAO,GAAG,OAAO,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAA;IACxE,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,cAAc,mDAKxB,mBAAmB,6BAmHrB,CAAA"}
+{"version":3,"file":"pixabay.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/filters/pixabay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAGjE,OAAO,EAML,KAAK,eAAe,EAErB,MAAM,mBAAmB,CAAA;AAE1B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,eAAe,CAAA;IACxB,SAAS,EAAE,OAAO,GAAG,OAAO,CAAA;IAC5B,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAA;IAC5D,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,cAAc,kDAAmD,KAAK,6BAqHlF,CAAA"}

package/dist/components/search-drawer/filters/pixabay.js

@@ -2,14 +2,14 @@ import React from 'react';
 import { Select } from '@payloadcms/ui';
 import { PixabayCategories, PixabayColours, PixabayImageType, PixabayOrder, PixabayOrientation } from '../../../types.js';
 export const PixabayFilters = ({ filters, mediaType, setFilters, baseClass })=>{
-    if (filters?.provider !== 'pixabay') return null;
+    if (filters.provider !== 'pixabay') return null;
     return /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__filters`
     }, /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
-                    provider: 'pixabay',
+                    ...prev,
                     options: {
                         ...prev.options,
                         category: opt?.value
@@ -17,12 +17,12 @@ export const PixabayFilters = ({ filters, mediaType, setFilters, baseClass })=>{
                 } : prev),
         options: PixabayCategories,
         placeholder: "Category",
-        value: PixabayCategories.find((o)=>o.value === filters.options.category)
+        value: PixabayCategories.find((option)=>option.value === filters.options.category)
     }), mediaType !== 'video' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
-                    provider: 'pixabay',
+                    ...prev,
                     options: {
                         ...prev.options,
                         image_type: opt?.value
@@ -30,12 +30,12 @@ export const PixabayFilters = ({ filters, mediaType, setFilters, baseClass })=>{
                 } : prev),
         options: PixabayImageType,
         placeholder: "Type",
-        value: PixabayImageType.find((o)=>o.value === filters.options.image_type)
+        value: PixabayImageType.find((option)=>option.value === filters.options.image_type)
     }), /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
-                    provider: 'pixabay',
+                    ...prev,
                     options: {
                         ...prev.options,
                         colors: opt?.value
@@ -43,12 +43,12 @@ export const PixabayFilters = ({ filters, mediaType, setFilters, baseClass })=>{
                 } : prev),
         options: PixabayColours,
         placeholder: "Colour",
-        value: PixabayColours.find((o)=>o.value === filters.options.colors)
+        value: PixabayColours.find((option)=>option.value === filters.options.colors)
     }), /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
-                    provider: 'pixabay',
+                    ...prev,
                     options: {
                         ...prev.options,
                         orientation: opt?.value
@@ -56,12 +56,12 @@ export const PixabayFilters = ({ filters, mediaType, setFilters, baseClass })=>{
                 } : prev),
         options: PixabayOrientation,
         placeholder: "Orientation",
-        value: PixabayOrientation.find((o)=>o.value === filters.options.orientation)
+        value: PixabayOrientation.find((option)=>option.value === filters.options.orientation)
     })), /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
-                    provider: 'pixabay',
+                    ...prev,
                     options: {
                         ...prev.options,
                         order: opt?.value
@@ -69,6 +69,6 @@ export const PixabayFilters = ({ filters, mediaType, setFilters, baseClass })=>{
                 } : prev),
         options: PixabayOrder,
         placeholder: "Order",
-        value: PixabayOrder.find((o)=>o.value === filters.options.order)
+        value: PixabayOrder.find((option)=>option.value === filters.options.order)
     }));
 };

package/dist/components/search-drawer/filters/unsplash.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { type Dispatch, type SetStateAction } from 'react';
 import { type ProviderFilters } from '../../../types.js';
-type UnsplashFiltersProps = {
+type Props = {
     filters: ProviderFilters;
-    setFilters: React.Dispatch<React.SetStateAction<ProviderFilters | null>>;
+    setFilters: Dispatch<SetStateAction<ProviderFilters | null>>;
     baseClass: string;
 };
-export declare const UnsplashFilters: ({ filters, setFilters, baseClass }: UnsplashFiltersProps) => React.JSX.Element | null;
+export declare const UnsplashFilters: ({ filters, setFilters, baseClass }: Props) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=unsplash.d.ts.map

package/dist/components/search-drawer/filters/unsplash.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"unsplash.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/filters/unsplash.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EACL,KAAK,eAAe,EAIrB,MAAM,mBAAmB,CAAA;AAE1B,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,eAAe,CAAA;IACxB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAA;IACxE,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,eAAe,uCAAwC,oBAAoB,6BAgDvF,CAAA"}
+{"version":3,"file":"unsplash.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/filters/unsplash.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAA;AAGjE,OAAO,EACL,KAAK,eAAe,EAIrB,MAAM,mBAAmB,CAAA;AAE1B,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,eAAe,CAAA;IACxB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAA;IAC5D,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,eAAe,uCAAwC,KAAK,6BAgDxE,CAAA"}

package/dist/components/search-drawer/filters/unsplash.js

@@ -2,14 +2,14 @@ import React from 'react';
 import { Select } from '@payloadcms/ui';
 import { UnsplashColours, UnsplashOrientation } from '../../../types.js';
 export const UnsplashFilters = ({ filters, setFilters, baseClass })=>{
-    if (filters?.provider !== 'unsplash') return null;
+    if (filters.provider !== 'unsplash') return null;
     return /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__filters`
     }, /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'unsplash' ? {
-                    provider: 'unsplash',
+                    ...prev,
                     options: {
                         ...prev.options,
                         color: opt?.value
@@ -17,12 +17,12 @@ export const UnsplashFilters = ({ filters, setFilters, baseClass })=>{
                 } : prev),
         options: UnsplashColours,
         placeholder: "Colour",
-        value: UnsplashColours.find((o)=>o.value === filters.options.color)
+        value: UnsplashColours.find((option)=>option.value === filters.options.color)
     }), /*#__PURE__*/ React.createElement(Select, {
         isClearable: true,
         isSearchable: false,
         onChange: (opt)=>setFilters((prev)=>prev?.provider === 'unsplash' ? {
-                    provider: 'unsplash',
+                    ...prev,
                     options: {
                         ...prev.options,
                         orientation: opt?.value
@@ -30,6 +30,6 @@ export const UnsplashFilters = ({ filters, setFilters, baseClass })=>{
                 } : prev),
         options: UnsplashOrientation,
         placeholder: "Orientation",
-        value: UnsplashOrientation.find((o)=>o.value === filters.options.orientation)
+        value: UnsplashOrientation.find((option)=>option.value === filters.options.orientation)
     }));
 };

package/dist/components/search-drawer/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import './style.css';
-export type SearchDrawerProps = {
+export type Props = {
     serverURL: string;
     api: string;
     onSelect: (value: string) => void;
 };
-export declare const SearchDrawer: (props: SearchDrawerProps) => React.JSX.Element;
+export declare const SearchDrawer: (props: Props) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/search-drawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAgB/D,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,sBA8TpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAgBzE,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY,UAAW,KAAK,sBA6UxC,CAAA"}