sanity-plugin-media 4.3.0 → 4.3.2

package/package.json

@@ -1,28 +1,38 @@
 {
   "name": "sanity-plugin-media",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
-    "sanity",
+    "asset",
+    "browser",
     "cms",
+    "content",
     "headless",
     "realtime",
-    "content",
-    "sanity-plugin",
-    "asset",
-    "browser"
+    "sanity",
+    "sanity-plugin"
   ],
-  "homepage": "https://github.com/sanity-io/sanity-plugin-media#readme",
+  "homepage": "https://github.com/sanity-io/plugins/tree/main/plugins/sanity-plugin-media#readme",
   "bugs": {
-    "url": "https://github.com/sanity-io/sanity-plugin-media/issues"
+    "url": "https://github.com/sanity-io/plugins/issues"
   },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
   "repository": {
     "type": "git",
-    "url": "git@github.com:sanity-io/sanity-plugin-media.git"
+    "url": "git+ssh://git@github.com/sanity-io/plugins.git",
+    "directory": "plugins/sanity-plugin-media"
   },
-  "license": "MIT",
-  "author": "Sanity.io <hello@sanity.io>",
+  "files": [
+    "dist",
+    "sanity.json",
+    "src",
+    "v2-incompatible.js"
+  ],
   "type": "commonjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -32,32 +42,10 @@
     },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "sanity.json",
-    "src",
-    "v2-incompatible.js"
-  ],
-  "scripts": {
-    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
-    "clean": "rimraf dist",
-    "dev": "sanity dev",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "link-watch": "plugin-kit link-watch",
-    "lint": "eslint .",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "prepare": "husky install",
-    "prepublishOnly": "npm run build",
-    "watch": "pkg-utils watch --strict"
-  },
   "dependencies": {
     "@hookform/resolvers": "^3.1.1",
     "@reduxjs/toolkit": "^2.6.0",
-    "@sanity/client": "^7.13.2",
+    "@sanity/client": "^7.23.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
     "@sanity/incompatible-plugin": "^1.0.5",
@@ -83,52 +71,42 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.8.1",
-    "@commitlint/config-conventional": "^17.8.1",
     "@sanity/pkg-utils": "^7.1.1",
     "@sanity/plugin-kit": "^4.0.19",
-    "@sanity/semantic-release-preset": "^2.0.5",
-    "@sanity/vision": "^3.80.1",
+    "@sanity/vision": "^6.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/is-hotkey": "^0.1.10",
     "@types/pluralize": "^0.0.33",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@types/react-file-icon": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "conventional-changelog-conventionalcommits": "^5.0.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-config-sanity": "^6.0.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "husky": "^8.0.2",
     "jsdom": "^25.0.1",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.8.8",
-    "prettier-plugin-packagejson": "^2.5.10",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-is": "^19.0.0",
-    "rimraf": "^3.0.2",
-    "sanity": "^3.80.1",
-    "standard-version": "^9.5.0",
-    "styled-components": "^6.1.16",
-    "typescript": "5.8.2",
-    "vitest": "^3.0.5"
+    "sanity": "^6.1.0",
+    "styled-components": "^6.4.2",
+    "typescript": "5.8.2"
   },
   "peerDependencies": {
     "react": "^18.3 || ^19",
     "react-dom": "^18.3 || ^19",
     "react-is": "^18.3 || ^19",
-    "sanity": "^3.78 || ^4.0.0-0 || ^5",
+    "sanity": "^3.78 || ^4.0.0-0 || ^5 || ^6.0.0-0",
     "styled-components": "^6.1"
   },
   "engines": {
     "node": ">=18"
+  },
+  "sanityPlugin": {
+    "verifyPackage": {
+      "eslintImports": false,
+      "scripts": false
+    }
+  },
+  "scripts": {
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
+    "watch": "pkg-utils watch --strict"
   }
-}
+}

package/src/__tests__/fixtures/createEpicTestStore.ts

@@ -2,6 +2,7 @@ import {configureStore, type AnyAction, type EnhancedStore} from '@reduxjs/toolk
 import type {SanityClient} from '@sanity/client'
 import type {Epic} from 'redux-observable'
 import {createEpicMiddleware} from 'redux-observable'
+
 import {rootReducer} from '../../modules'
 import type {RootReducerState} from '../../modules/types'
 import {createTestRootState} from './rootState'
@@ -9,17 +10,17 @@ import {createTestRootState} from './rootState'
 export function createEpicTestStore(
   epic: Epic<AnyAction, AnyAction, RootReducerState, {client: SanityClient}>,
   mockClient: SanityClient,
-  preloaded?: Partial<RootReducerState>
+  preloaded?: Partial<RootReducerState>,
 ): EnhancedStore<RootReducerState, AnyAction> {
   const epicMiddleware = createEpicMiddleware<AnyAction, AnyAction, RootReducerState>({
-    dependencies: {client: mockClient}
+    dependencies: {client: mockClient},
   })
 
   const store = configureStore({
     reducer: rootReducer,
-    middleware: getDefaultMiddleware =>
+    middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({serializableCheck: false, thunk: false}).concat(epicMiddleware),
-    preloadedState: createTestRootState(preloaded)
+    preloadedState: createTestRootState(preloaded),
   })
 
   epicMiddleware.run(epic)

package/src/__tests__/fixtures/mockSanityClient.ts

@@ -20,7 +20,7 @@ export function createMockSanityClient(
     observable?: Partial<MockSanityClient['observable']> & {
       assets?: Partial<MockSanityClient['observable']['assets']>
     }
-  } = {}
+  } = {},
 ): SanityClient {
   const {observable: observableOverrides, ...restOverrides} = overrides
 
@@ -29,8 +29,8 @@ export function createMockSanityClient(
     delete: vi.fn(() => of({})),
     create: vi.fn(() => of({_id: 'new'})),
     assets: {
-      upload: vi.fn(() => of({type: 'complete', body: {document: {_id: 'up'}}}))
-    }
+      upload: vi.fn(() => of({type: 'complete', body: {document: {_id: 'up'}}})),
+    },
   }
 
   const observable: MockSanityClient['observable'] = {
@@ -38,8 +38,8 @@ export function createMockSanityClient(
     ...(observableOverrides ?? {}),
     assets: {
       ...observableBase.assets,
-      ...(observableOverrides?.assets ?? {})
-    }
+      ...(observableOverrides?.assets ?? {}),
+    },
   }
 
   const client: MockSanityClient = {
@@ -48,7 +48,7 @@ export function createMockSanityClient(
     listen: vi.fn(() => new Subject()),
     patch: vi.fn(),
     transaction: vi.fn(),
-    ...restOverrides
+    ...restOverrides,
   }
 
   return client as unknown as SanityClient
@@ -63,7 +63,7 @@ export function mockPatchChain(result: unknown): {
   const chain = {
     set: vi.fn(),
     setIfMissing: vi.fn(),
-    commit
+    commit,
   }
   chain.set.mockImplementation(() => chain)
   chain.setIfMissing.mockImplementation(() => chain)
@@ -78,7 +78,7 @@ export function mockTransactionCommit(resolved: unknown = undefined): {
   const tx = {
     patch: vi.fn().mockReturnThis(),
     delete: vi.fn().mockReturnThis(),
-    commit: vi.fn().mockResolvedValue(resolved)
+    commit: vi.fn().mockResolvedValue(resolved),
   }
   return tx
 }

package/src/__tests__/fixtures/renderWithProviders.tsx

@@ -1,16 +1,17 @@
-import type {ReactElement, ReactNode} from 'react'
 import {configureStore} from '@reduxjs/toolkit'
 import {studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
-import {ColorSchemeProvider} from 'sanity'
-import {Provider} from 'react-redux'
 import {render} from '@testing-library/react'
+import type {ReactElement, ReactNode} from 'react'
+import {Provider} from 'react-redux'
+import {ColorSchemeProvider} from 'sanity'
+import type {AssetSourceComponentProps} from 'sanity'
+
 import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
 import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
 import {rootReducer} from '../../modules'
 import type {RootReducerState} from '../../modules/types'
 import type {MediaToolOptions} from '../../types'
 import {createTestRootState} from './rootState'
-import type {AssetSourceComponentProps} from 'sanity'
 
 type Opts = {
   onSelect?: AssetSourceComponentProps['onSelect']
@@ -23,15 +24,15 @@ export function renderWithProviders(ui: ReactElement, opts: Opts = {}) {
 
   const store = configureStore({
     reducer: rootReducer,
-    middleware: getDefaultMiddleware =>
+    middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({thunk: false, serializableCheck: false}),
-    preloadedState: createTestRootState(preloaded)
+    preloadedState: createTestRootState(preloaded),
   })
 
   const options: MediaToolOptions = {
     creditLine: {enabled: false},
     directUploads: true,
-    ...toolOptions
+    ...toolOptions,
   }
 
   const wrap = (node: ReactNode) => (

package/src/__tests__/fixtures/rootState.ts

@@ -1,11 +1,11 @@
-import type {RootReducerState} from '../../modules/types'
 import {initialState as assetsInitialState} from '../../modules/assets'
+import type {RootReducerState} from '../../modules/types'
 
 export function createTestRootState(overrides: Partial<RootReducerState> = {}): RootReducerState {
   const base: RootReducerState = {
     assets: {
       ...assetsInitialState,
-      assetTypes: ['file', 'image']
+      assetTypes: ['file', 'image'],
     },
     debug: {badConnection: false, enabled: false},
     dialog: {items: []},
@@ -18,9 +18,9 @@ export function createTestRootState(overrides: Partial<RootReducerState> = {}):
       creating: false,
       fetchCount: -1,
       fetching: false,
-      panelVisible: true
+      panelVisible: true,
     },
-    uploads: {allIds: [], byIds: {}}
+    uploads: {allIds: [], byIds: {}},
   }
 
   return {...base, ...overrides} as RootReducerState

package/src/components/AssetGridVirtualized/index.tsx

@@ -1,8 +1,9 @@
-import type {CardAssetData, CardUploadData} from '../../types'
 import {memo, forwardRef} from 'react'
 import {VirtuosoGrid} from 'react-virtuoso'
 import {styled} from 'styled-components'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
+import type {CardAssetData, CardUploadData} from '../../types'
 import CardAsset from '../CardAsset'
 import CardUpload from '../CardUpload'
 
@@ -25,7 +26,7 @@ const VirtualCell = memo(
     }
 
     return null
-  }
+  },
 )
 
 const StyledItemContainer = styled.div`
@@ -57,9 +58,9 @@ const AssetGridVirtualized = (props: Props) => {
   const {items, onLoadMore} = props
 
   // Redux
-  const selectedAssets = useTypedSelector(state => state.selected.assets)
+  const selectedAssets = useTypedSelector((state) => state.selected.assets)
 
-  const selectedIds = (selectedAssets && selectedAssets.map(asset => asset._id)) || []
+  const selectedIds = (selectedAssets && selectedAssets.map((asset) => asset._id)) || []
   const totalCount = items?.length
 
   if (totalCount === 0) {
@@ -69,16 +70,16 @@ const AssetGridVirtualized = (props: Props) => {
   return (
     <VirtuosoGrid
       className="media__custom-scrollbar"
-      computeItemKey={index => {
+      computeItemKey={(index) => {
         const item = items[index]
         return item?.id
       }}
       components={{
         Item: ItemContainer,
-        List: ListContainer
+        List: ListContainer,
       }}
       endReached={onLoadMore}
-      itemContent={index => {
+      itemContent={(index) => {
         const item = items[index]
         const selected = selectedIds.includes(item?.id)
         return <VirtualCell item={item} selected={selected} />

package/src/components/AssetMetadata/index.tsx

@@ -1,9 +1,10 @@
 import {DownloadIcon} from '@sanity/icons'
 import {Box, Button, Flex, Inline, Stack, Text} from '@sanity/ui'
-import type {Asset, AssetItem} from '../../types'
-import { format } from 'date-fns'
+import {format} from 'date-fns'
 import filesize from 'filesize'
 import {type ReactNode} from 'react'
+
+import type {Asset, AssetItem} from '../../types'
 import getAssetResolution from '../../utils/getAssetResolution'
 import {isImageAsset} from '../../utils/typeGuards'
 import ButtonAssetCopy from '../ButtonAssetCopy'
@@ -20,7 +21,7 @@ const Row = ({label, value}: {label: string; value: ReactNode}) => {
         size={1}
         style={{
           opacity: 0.8,
-          width: '40%'
+          width: '40%',
         }}
         textOverflow="ellipsis"
       >
@@ -31,7 +32,7 @@ const Row = ({label, value}: {label: string; value: ReactNode}) => {
         style={{
           opacity: 0.4,
           textAlign: 'right',
-          width: '60%'
+          width: '60%',
         }}
         textOverflow="ellipsis"
       >
@@ -76,7 +77,7 @@ const AssetMetadata = (props: Props) => {
               style={{
                 background: 'var(--card-border-color)',
                 height: '1px',
-                width: '100%'
+                width: '100%',
               }}
             />
             <Box>

package/src/components/AssetTableVirtualized/index.tsx

@@ -1,8 +1,9 @@
-import type {CardAssetData, CardUploadData} from '../../types'
 import {Box} from '@sanity/ui'
 import {memo} from 'react'
 import {GroupedVirtuoso} from 'react-virtuoso'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
+import type {CardAssetData, CardUploadData} from '../../types'
 import TableHeader from '../TableHeader'
 import TableRowAsset from '../TableRowAsset'
 import TableRowUpload from '../TableRowUpload'
@@ -31,16 +32,16 @@ const VirtualRow = memo(
     }
 
     return null
-  }
+  },
 )
 
 const AssetTableVirtualized = (props: Props) => {
   const {items, onLoadMore} = props
 
   // Redux
-  const selectedAssets = useTypedSelector(state => state.selected.assets)
+  const selectedAssets = useTypedSelector((state) => state.selected.assets)
 
-  const selectedIds = (selectedAssets && selectedAssets.map(asset => asset._id)) || []
+  const selectedIds = (selectedAssets && selectedAssets.map((asset) => asset._id)) || []
   const totalCount = items?.length
 
   if (totalCount === 0) {
@@ -50,7 +51,7 @@ const AssetTableVirtualized = (props: Props) => {
   return (
     <GroupedVirtuoso
       className="media__custom-scrollbar"
-      computeItemKey={index => {
+      computeItemKey={(index) => {
         const item = items[index]
         return item?.id || index
       }}
@@ -59,7 +60,7 @@ const AssetTableVirtualized = (props: Props) => {
       groupContent={() => {
         return <TableHeader />
       }}
-      itemContent={index => {
+      itemContent={(index) => {
         const item = items[index]
         const selected = selectedIds.includes(item?.id)
         return <VirtualRow item={item} selected={selected} />

package/src/components/AutoTagInputWrapper/index.tsx

@@ -1,9 +1,10 @@
 import {useToast} from '@sanity/ui'
 import {useEffect, useRef} from 'react'
 import {type InputProps} from 'sanity'
-import {applyMediaTags} from '../../utils/applyMediaTags'
+
 import {useToolOptions} from '../../contexts/ToolOptionsContext'
 import useVersionedClient from '../../hooks/useVersionedClient'
+import {applyMediaTags} from '../../utils/applyMediaTags'
 
 type AssetValue = {
   _type: 'image' | 'file'
@@ -68,11 +69,15 @@ export function AutoTagInput(props: AutoTagInputProps) {
       client,
       assetId: currentAssetRef,
       mediaTags,
-      createTagsOnUpload
-    }).catch(err => {
+      createTagsOnUpload,
+    }).catch((err) => {
       console.error('[sanity-plugin-media] Failed to apply auto-tags:', err)
       const label = mediaTags.length === 1 ? 'tag' : 'tags'
-      toast.push({closable: true, status: 'error', title: `Failed to apply the media ${label} ${mediaTags.join(', ')}`})
+      toast.push({
+        closable: true,
+        status: 'error',
+        title: `Failed to apply the media ${label} ${mediaTags.join(', ')}`,
+      })
     })
   }, [currentAssetRef, mediaTags, client, createTagsOnUpload])
 

package/src/components/Browser/Browser.test.tsx

@@ -1,16 +1,17 @@
-import {describe, expect, it, vi, beforeEach} from 'vitest'
-import {render, screen, waitFor} from '@testing-library/react'
 import {studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
-import {ColorSchemeProvider} from 'sanity'
+import {render, screen, waitFor} from '@testing-library/react'
 import {of} from 'rxjs'
-import Browser from './index'
+import {ColorSchemeProvider} from 'sanity'
+import {describe, expect, it, vi, beforeEach} from 'vitest'
+
 import {createListenMock} from '../../__tests__/fixtures/listenMock'
 import {createMockSanityClient} from '../../__tests__/fixtures/mockSanityClient'
 import {ToolOptionsProvider} from '../../contexts/ToolOptionsContext'
 import useVersionedClient from '../../hooks/useVersionedClient'
+import Browser from './index'
 
 vi.mock('../../hooks/useVersionedClient', () => ({
-  default: vi.fn()
+  default: vi.fn(),
 }))
 
 describe('Browser', () => {
@@ -19,8 +20,8 @@ describe('Browser', () => {
     vi.mocked(useVersionedClient).mockReturnValue(
       createMockSanityClient({
         listen: createListenMock(),
-        observable: {fetch}
-      })
+        observable: {fetch},
+      }),
     )
   })
 
@@ -34,7 +35,7 @@ describe('Browser', () => {
             </ToolOptionsProvider>
           </ToastProvider>
         </ThemeProvider>
-      </ColorSchemeProvider>
+      </ColorSchemeProvider>,
     )
 
     await waitFor(() => {

package/src/components/Browser/index.tsx

@@ -1,6 +1,7 @@
 import {Card, Flex, PortalProvider} from '@sanity/ui'
 import {useState} from 'react'
 import {type AssetSourceComponentProps, type SanityDocument} from 'sanity'
+
 import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
 import useVersionedClient from '../../hooks/useVersionedClient'
 import GlobalStyle from '../../styled/GlobalStyles'
@@ -27,7 +28,7 @@ type Props = {
 
 const BrowserContent = ({
   onClose,
-  schemaType
+  schemaType,
 }: {
   onClose?: AssetSourceComponentProps['onClose']
   schemaType?: AssetSourceComponentProps['schemaType']

package/src/components/Browser/useBrowserInit.ts

@@ -2,22 +2,22 @@ import type {MutationEvent, SanityClient} from '@sanity/client'
 import groq from 'groq'
 import {useEffect} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
-import type {AssetSourceComponentProps} from 'sanity'
 import type {Dispatch} from 'redux'
+import type {AssetSourceComponentProps} from 'sanity'
 
 import {inputs} from '../../config/searchFacets'
 import {TAG_DOCUMENT_NAME} from '../../constants'
+import {assetsActions} from '../../modules/assets'
 import {searchActions} from '../../modules/search'
 import {tagsActions} from '../../modules/tags'
 import type {RootReducerState} from '../../modules/types'
 import type {Asset, Tag} from '../../types'
-import {assetsActions} from '../../modules/assets'
 
 function getMediaTagNames(schemaType?: AssetSourceComponentProps['schemaType']): string[] {
   const mediaTags = (schemaType?.options as {mediaTags?: string[]} | undefined)?.mediaTags
   if (!mediaTags?.length) return []
   const unique = new Set(
-    mediaTags.map(t => t?.trim()).filter((t): t is string => Boolean(t?.length))
+    mediaTags.map((t) => t?.trim()).filter((t): t is string => Boolean(t?.length)),
   )
   return Array.from(unique)
 }
@@ -64,7 +64,7 @@ function createTagHandler(dispatch: Dispatch) {
 
 export function useBrowserInit(
   client: SanityClient,
-  schemaType?: AssetSourceComponentProps['schemaType']
+  schemaType?: AssetSourceComponentProps['schemaType'],
 ): void {
   const dispatch = useDispatch()
   const tagsByIds = useSelector((state: RootReducerState) => state.tags.byIds)
@@ -82,7 +82,7 @@ export function useBrowserInit(
 
     const assetSubscription = client
       .listen(
-        groq`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
+        groq`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`,
       )
       .subscribe(createAssetHandler(dispatch))
 
@@ -106,7 +106,7 @@ export function useBrowserInit(
     if (tagFacetInput.type !== 'searchable') return
 
     const resolvedTags = tagNames
-      .map(name => Object.values(tagsByIds).find(item => item.tag.name.current === name))
+      .map((name) => Object.values(tagsByIds).find((item) => item.tag.name.current === name))
       .filter((item): item is NonNullable<typeof item> => Boolean(item))
 
     dispatch(searchActions.facetsClear())
@@ -117,9 +117,9 @@ export function useBrowserInit(
           facet: {
             ...tagFacetInput,
             operatorType: 'references',
-            value: {label: tagItem.tag.name.current, value: tagItem.tag._id}
-          }
-        })
+            value: {label: tagItem.tag.name.current, value: tagItem.tag._id},
+          },
+        }),
       )
     }
   }, [tagsFetchCount, hasMediaTags]) // eslint-disable-line react-hooks/exhaustive-deps

package/src/components/ButtonAssetCopy/index.tsx

@@ -2,6 +2,7 @@ import {ClipboardIcon} from '@sanity/icons'
 import {Button, Popover, Text} from '@sanity/ui'
 import copy from 'copy-to-clipboard'
 import {useEffect, useRef, useState} from 'react'
+
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 
 type Props = {

package/src/components/ButtonViewGroup/index.tsx

@@ -1,13 +1,14 @@
 import {ThLargeIcon, ThListIcon} from '@sanity/icons'
 import {Button, Inline} from '@sanity/ui'
 import {useDispatch} from 'react-redux'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions} from '../../modules/assets'
 
 const ButtonViewGroup = () => {
   // Redux
   const dispatch = useDispatch()
-  const view = useTypedSelector(state => state.assets.view)
+  const view = useTypedSelector((state) => state.assets.view)
 
   return (
     <Inline space={0} style={{whiteSpace: 'nowrap'}}>
@@ -18,7 +19,7 @@ const ButtonViewGroup = () => {
         onClick={() => dispatch(assetsActions.viewSet({view: 'grid'}))}
         style={{
           borderBottomRightRadius: 0,
-          borderTopRightRadius: 0
+          borderTopRightRadius: 0,
         }}
       />
       <Button
@@ -28,7 +29,7 @@ const ButtonViewGroup = () => {
         onClick={() => dispatch(assetsActions.viewSet({view: 'table'}))}
         style={{
           borderBottomLeftRadius: 0,
-          borderTopLeftRadius: 0
+          borderTopLeftRadius: 0,
         }}
       />
     </Inline>