@rubixstudios/payload-media 1.2.4 → 1.2.5

package/README.md

@@ -11,7 +11,7 @@ This project is an independent implementation derived [PayloadBites' Image Searc
 ## Installation
 
 ```sh
-pnpm add @rubixstudios/payload-media
+pnpm add @rubixstudios/payload-media@payload-v3
 ```
 
 ```typescript

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);
@@ -22,10 +22,11 @@ export const MediaSearch = ()=>{
         onClick: ()=>openModal(drawerSlug),
         size: "small"
     }, "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"}

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

@@ -1,5 +1,5 @@
 'use client';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { Pagination, SearchFilter, Select, toast } from '@payloadcms/ui';
 import { MediaOptions } from '../../types.js';
 import { fetchCache } from '../../utils/fetchCache.js';
@@ -12,16 +12,17 @@ import './style.css';
 const baseClass = 'search-media';
 export const SearchDrawer = (props)=>{
     const { serverURL, api, onSelect } = props;
-    const [selectedProvider, setSelectedProvider] = useState(null);
+    const [provider, setProvider] = useState(null);
     const [options, setOptions] = useState([]);
-    const [mediaType, setMediaType] = useState('image');
     const [media, setMedia] = useState(null);
+    const [mediaType, setMediaType] = useState('image');
     const [filters, setFilters] = useState(null);
     const [currentPage, setCurrentPage] = useState(null);
     const [totalPages, setTotalPages] = useState(null);
     const [loading, setLoading] = useState(true);
     const [value, setValue] = useState('');
-    const defaultError = useCallback(()=>{
+    const mediaOptions = MediaOptions.filter((option)=>filters?.provider === 'unsplash' ? option.value === 'image' : true);
+    const error = useCallback(()=>{
         toast.error('Something went wrong.');
     }, []);
     const resetMedia = useCallback(()=>{
@@ -51,17 +52,17 @@ export const SearchDrawer = (props)=>{
                 provider: initial.value,
                 options: {}
             });
-            setSelectedProvider(initial);
+            setProvider(initial);
         } catch  {
             setLoading(false);
-            defaultError();
+            error();
         }
     }, [
         serverURL,
         api,
-        defaultError
+        error
     ]);
-    const buildFeatured = useCallback(()=>{
+    const buildFeatures = useCallback(()=>{
         if (!filters || !mediaType) return '';
         const params = new URLSearchParams();
         switch(filters.provider){
@@ -99,11 +100,11 @@ export const SearchDrawer = (props)=>{
         filters,
         mediaType
     ]);
-    const getFeatured = useCallback(async ()=>{
-        if (!selectedProvider || !filters || !mediaType) return;
+    const getFeatures = useCallback(async ()=>{
+        if (!provider || !filters || !mediaType) return;
         try {
             setLoading(true);
-            const json = await fetchCache(`${serverURL}${api}/providers/${selectedProvider.value}/featured${buildFeatured()}`);
+            const json = await fetchCache(`${serverURL}${api}/providers/${provider.value}/featured${buildFeatures()}`);
             if (!json) return;
             if (json.error) {
                 toast.error(json.error);
@@ -111,18 +112,18 @@ export const SearchDrawer = (props)=>{
             }
             setMedia(json.data.images);
         } catch  {
-            defaultError();
+            error();
         } finally{
             setLoading(false);
         }
     }, [
         serverURL,
         api,
-        selectedProvider,
+        provider,
         filters,
-        buildFeatured,
+        buildFeatures,
         mediaType,
-        defaultError
+        error
     ]);
     const buildQuery = useCallback((page = 1)=>{
         if (!filters || !mediaType) return '';
@@ -167,38 +168,39 @@ export const SearchDrawer = (props)=>{
     const getMedia = useCallback(async (page = 1)=>{
         try {
             setLoading(true);
-            const json = await fetchCache(`${serverURL}${api}/providers/${selectedProvider?.value}/search?${buildQuery(page)}`);
+            const json = await fetchCache(`${serverURL}${api}/providers/${provider?.value}/search?${buildQuery(page)}`);
             if (json.error) return toast.error(json.error);
             setMedia(json.data.images);
             setTotalPages(json.data.totalPages);
             setCurrentPage(page);
         } catch  {
-            defaultError();
+            error();
         } finally{
             setLoading(false);
         }
     }, [
         serverURL,
         api,
-        selectedProvider?.value,
-        defaultError,
+        provider?.value,
+        error,
         buildQuery
     ]);
     const selectMedia = async (url, download)=>{
         onSelect(url);
         if (!download) return;
         try {
-            await fetch(`${serverURL}${api}/providers/${selectedProvider?.value}/track-download?url=${encodeURIComponent(download)}`);
+            await fetch(`${serverURL}${api}/providers/${provider?.value}/track-download?url=${encodeURIComponent(download)}`);
         } catch  {
             return null;
         }
     };
-    const selectFilter = useCallback((select)=>{
+    const selectFilter = useCallback((value)=>{
+        const select = value;
         setFilters({
             provider: select.value,
             options: {}
         });
-        setSelectedProvider(select);
+        setProvider(select);
         if (select.value === 'unsplash') {
             setMediaType('image');
         }
@@ -206,31 +208,49 @@ export const SearchDrawer = (props)=>{
     }, [
         resetMedia
     ]);
+    const selectType = useCallback((option)=>{
+        const value = option?.value;
+        setMediaType(value);
+        resetMedia();
+    }, [
+        resetMedia
+    ]);
     const changeFilters = useCallback((search)=>{
         setValue(search);
         resetMedia();
     }, [
         resetMedia
     ]);
+    const renderMedia = (data)=>/*#__PURE__*/ React.createElement(Fragment, {
+            key: data.id
+        }, mediaType === 'video' ? /*#__PURE__*/ React.createElement(VideoCard, {
+            baseClass: baseClass,
+            data: data,
+            onSelect: selectMedia
+        }) : /*#__PURE__*/ React.createElement(ImageCard, {
+            baseClass: baseClass,
+            data: data,
+            onSelect: selectMedia
+        }));
     useEffect(()=>{
         void getOptions();
     }, [
         getOptions
     ]);
     useEffect(()=>{
-        if (!selectedProvider?.value || !filters || !mediaType) return;
+        if (!provider?.value || !filters || !mediaType) return;
         if (value.trim().length > 0) {
             void getMedia(1);
         } else {
-            void getFeatured();
+            void getFeatures();
         }
     }, [
-        selectedProvider?.value,
+        provider?.value,
         filters,
         value,
         mediaType,
         getMedia,
-        getFeatured
+        getFeatures
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         className: baseClass
@@ -238,18 +258,14 @@ export const SearchDrawer = (props)=>{
         className: `${baseClass}__fields`
     }, /*#__PURE__*/ React.createElement(SearchFilter, {
         handleChange: changeFilters,
-        label: ""
+        label: "Search..."
     }), /*#__PURE__*/ React.createElement(Select, {
         className: `${baseClass}__mediaToggle`,
         isClearable: false,
         isCreatable: false,
         isSearchable: false,
-        onChange: (opt)=>{
-            const val = opt?.value;
-            setMediaType(val);
-            resetMedia();
-        },
-        options: MediaOptions.filter((option)=>filters?.provider === 'unsplash' ? option.value === 'image' : true),
+        onChange: selectType,
+        options: mediaOptions,
         value: {
             label: mediaType === 'image' ? 'Images' : 'Videos',
             value: mediaType
@@ -259,9 +275,9 @@ export const SearchDrawer = (props)=>{
         isClearable: false,
         isCreatable: false,
         isSearchable: false,
-        onChange: (value)=>selectFilter(value),
+        onChange: selectFilter,
         options: options,
-        value: selectedProvider
+        value: provider
     })), filters?.provider === 'pexels' && /*#__PURE__*/ React.createElement(PexelsFilters, {
         baseClass: baseClass,
         filters: filters,
@@ -282,24 +298,14 @@ export const SearchDrawer = (props)=>{
         className: `${baseClass}__noResults`
     }, "No media found"), !loading && media && media?.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__results`
-    }, media.map((data)=>/*#__PURE__*/ React.createElement(React.Fragment, {
-            key: data.id
-        }, mediaType === 'video' ? /*#__PURE__*/ React.createElement(VideoCard, {
-            baseClass: baseClass,
-            data: data,
-            onSelect: selectMedia
-        }) : /*#__PURE__*/ React.createElement(ImageCard, {
-            baseClass: baseClass,
-            data: data,
-            onSelect: selectMedia
-        })))), currentPage && totalPages && totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
+    }, media.map(renderMedia)), currentPage && totalPages && totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__pagination`
     }, /*#__PURE__*/ React.createElement(Pagination, {
         hasNextPage: currentPage < totalPages,
         hasPrevPage: currentPage > 1,
         nextPage: currentPage < totalPages ? currentPage + 1 : undefined,
         numberOfNeighbors: 3,
-        onChange: (page)=>getMedia(page),
+        onChange: getMedia,
         page: currentPage,
         prevPage: currentPage > 1 ? currentPage - 1 : undefined,
         totalPages: totalPages

package/dist/components/search-drawer/media/image.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { type ProviderResult } from '../../../types.js';
-type ImageCardProps = {
+type Props = {
     data: ProviderResult;
     baseClass: string;
     onSelect: (url: string, download?: string) => void;
 };
-export declare const ImageCard: ({ data, baseClass, onSelect }: ImageCardProps) => React.JSX.Element;
+export declare const ImageCard: ({ data, baseClass, onSelect }: Props) => React.JSX.Element;
 export {};
 //# sourceMappingURL=image.d.ts.map

package/dist/components/search-drawer/media/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGvD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBA+DtE,CAAA"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGvD,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,cAAc,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,kCAAmC,KAAK,sBAqE7D,CAAA"}

package/dist/components/search-drawer/media/image.js

@@ -4,8 +4,7 @@ import { HeartIcon } from './heart.js';
 export const ImageCard = ({ data, baseClass, onSelect })=>{
     const [show, setShow] = useState(false);
     return /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__card`,
-        key: data.id
+        className: `${baseClass}__card`
     }, /*#__PURE__*/ React.createElement("button", {
         className: `${baseClass}__button`,
         onClick: ()=>onSelect(data.urls.original, data.urls?.downloadLocation),
@@ -21,6 +20,7 @@ export const ImageCard = ({ data, baseClass, onSelect })=>{
     })), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__topOverlay`
     }, data.likes !== undefined && /*#__PURE__*/ React.createElement("button", {
+        "aria-label": `${data.likes} likes`,
         className: `${baseClass}__likes`,
         onBlur: ()=>setShow(false),
         onFocus: ()=>setShow(true),

package/dist/components/search-drawer/media/video.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { type ProviderResult } from '../../../types.js';
-type VideoCardProps = {
+type Props = {
     data: ProviderResult;
     baseClass: string;
     onSelect: (url: string, download?: string) => void;
 };
-export declare const VideoCard: ({ data, baseClass, onSelect }: VideoCardProps) => React.JSX.Element;
+export declare const VideoCard: ({ data, baseClass, onSelect }: Props) => React.JSX.Element;
 export {};
 //# sourceMappingURL=video.d.ts.map

package/dist/components/search-drawer/media/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAIvD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBA0EtE,CAAA"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAIvD,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,cAAc,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,kCAAmC,KAAK,sBAkF7D,CAAA"}

package/dist/components/search-drawer/media/video.js

@@ -5,8 +5,7 @@ import { PlusIcon } from './plus.js';
 export const VideoCard = ({ data, baseClass, onSelect })=>{
     const [show, setShow] = useState(false);
     return /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__video`,
-        key: data.id
+        className: `${baseClass}__video`
     }, /*#__PURE__*/ React.createElement("video", {
         controls: true,
         poster: data.urls.view,
@@ -37,6 +36,7 @@ export const VideoCard = ({ data, baseClass, onSelect })=>{
     }), data.attribution.name), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__actions`
     }, data.likes !== undefined && /*#__PURE__*/ React.createElement("button", {
+        "aria-label": `${data.likes} likes`,
         className: `${baseClass}__likes`,
         onBlur: ()=>setShow(false),
         onFocus: ()=>setShow(true),
@@ -48,10 +48,12 @@ export const VideoCard = ({ data, baseClass, onSelect })=>{
         position: "bottom",
         show: show
     }, data.likes, " likes")), /*#__PURE__*/ React.createElement("button", {
+        "aria-label": "Select video",
         className: `${baseClass}__add`,
-        onClick: ()=>onSelect?.(data.urls.original, data.urls.download),
+        onClick: ()=>onSelect(data.urls.original, data.urls.download),
         type: "button"
     }, /*#__PURE__*/ React.createElement(PlusIcon, null)), /*#__PURE__*/ React.createElement("a", {
+        "aria-label": "Open video download",
         className: `${baseClass}__download`,
         href: data.urls.download,
         rel: "noopener noreferrer",