sanity-plugin-media 4.3.5 → 5.0.0

package/src/styled/react-select/creatable.tsx

@@ -1,184 +0,0 @@
-import {AddIcon, ChevronDownIcon, CloseIcon} from '@sanity/icons'
-import {Box, Card, Flex, rem, studioTheme, Text, type ThemeColorSchemeKey} from '@sanity/ui'
-import {components, type StylesConfig} from 'react-select'
-import {Virtuoso} from 'react-virtuoso'
-
-import {getSchemeColor} from '../../utils/getSchemeColor'
-
-const {radius: themeRadius, space: themeSpace} = studioTheme
-
-export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig => {
-  return {
-    control: (styles, {isFocused}) => {
-      let boxShadow = `inset 0 0 0 1px var(--card-border-color)`
-      if (isFocused) {
-        boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputEnabledBorder')},
-        0 0 0 1px var(--card-bg-color),
-        0 0 0 3px var(--card-focus-ring-color) !important`
-      }
-
-      return {
-        ...styles,
-        'backgroundColor': 'var(--card-bg-color)',
-        'color': 'inherit',
-        'border': 'none',
-        'borderRadius': themeRadius[1],
-        boxShadow,
-        'margin': 0,
-        'minHeight': '35px',
-        'outline': 'none',
-        'padding': rem(themeSpace[1]),
-        'transition': 'none',
-        '&:hover': {
-          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`,
-        },
-      }
-    },
-    indicatorsContainer: (styles, {isDisabled}) => ({
-      ...styles,
-      opacity: isDisabled ? 0.25 : 1,
-    }),
-    input: (styles) => ({
-      ...styles,
-      color: 'var(--card-fg-color)',
-      fontFamily: studioTheme.fonts.text.family,
-      marginLeft: rem(themeSpace[2]),
-    }),
-    menuList: (styles) => ({
-      ...styles,
-    }),
-    multiValue: (styles, {isDisabled}) => ({
-      ...styles,
-      backgroundColor: getSchemeColor(scheme, 'mutedHoveredBg'),
-      borderRadius: themeRadius[2],
-      opacity: isDisabled ? 0.5 : 1,
-    }),
-    multiValueLabel: () => ({
-      color: getSchemeColor(scheme, 'mutedHoveredFg'),
-      fontSize: 'inherit',
-      padding: 0,
-    }),
-    multiValueRemove: (styles) => ({
-      ...styles,
-      'borderTopLeftRadius': 0,
-      'borderBottomLeftRadius': 0,
-      'svg': {color: getSchemeColor(scheme, 'mutedHoveredFg')},
-      '&:hover': {
-        backgroundColor: getSchemeColor(scheme, 'mutedSelectedBg'),
-      },
-    }),
-    noOptionsMessage: (styles) => ({
-      ...styles,
-      fontFamily: studioTheme.fonts.text.family,
-      lineHeight: '1em',
-    }),
-    option: (styles, {isFocused}) => ({
-      ...styles,
-      'backgroundColor': isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
-      'borderRadius': themeRadius[2],
-      'color': isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
-      'padding': `${rem(themeSpace[1])} ${rem(themeSpace[2])}`,
-      '&:hover': {
-        backgroundColor: getSchemeColor(scheme, 'spotBlue'),
-        color: getSchemeColor(scheme, 'bg'),
-      },
-    }),
-    placeholder: (styles) => ({
-      ...styles,
-      marginLeft: rem(themeSpace[2]),
-    }),
-    valueContainer: (styles) => ({
-      ...styles,
-      margin: 0,
-      padding: 0,
-    }),
-  }
-}
-
-const DropdownIndicator = (props: any) => {
-  return (
-    <components.DropdownIndicator {...props}>
-      <Box paddingX={2}>
-        <Text size={1}>
-          <ChevronDownIcon />
-        </Text>
-      </Box>
-    </components.DropdownIndicator>
-  )
-}
-
-const Menu = (props: any) => {
-  return (
-    <components.Menu {...props}>
-      <Card radius={1} shadow={2}>
-        {props.children}
-      </Card>
-    </components.Menu>
-  )
-}
-
-const MenuList = (props: any) => {
-  const {children} = props
-
-  const MAX_ROWS = 5
-  const OPTION_HEIGHT = 37
-
-  if (Array.isArray(children)) {
-    const height =
-      children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT
-
-    return (
-      <Virtuoso
-        className="media__custom-scrollbar"
-        itemContent={(index) => {
-          const item = children[index]
-          return <Option {...item.props} />
-        }}
-        style={{height}}
-        totalCount={children.length}
-      />
-    )
-  }
-  return <components.MenuList {...props}>{children}</components.MenuList>
-}
-
-const MultiValueLabel = (props: any) => {
-  return (
-    <Box padding={2} paddingRight={1}>
-      <Text size={1} weight="medium">
-        <components.MultiValueLabel {...props} />
-      </Text>
-    </Box>
-  )
-}
-
-const MultiValueRemove = (props: any) => {
-  return (
-    <components.MultiValueRemove {...props}>
-      <CloseIcon color="#1f2123" />
-    </components.MultiValueRemove>
-  )
-}
-
-const Option = (props: any) => {
-  return (
-    <Box paddingX={1} paddingY={1}>
-      <components.Option {...props}>
-        <Flex align="center">
-          {props.data.__isNew__ && <AddIcon style={{marginRight: '3px'}} />}
-          {props.children}
-        </Flex>
-      </components.Option>
-    </Box>
-  )
-}
-
-export const reactSelectComponents = {
-  DropdownIndicator,
-  IndicatorSeparator: null,
-  Menu,
-  MenuList,
-  MultiValueLabel,
-  MultiValueRemove,
-  Option,
-}

package/src/styled/react-select/single.tsx

@@ -1,184 +0,0 @@
-import {CloseIcon} from '@sanity/icons'
-import {Box, Card, rem, studioTheme, Text, type ThemeColorSchemeKey} from '@sanity/ui'
-import {components, type StylesConfig} from 'react-select'
-import {Virtuoso} from 'react-virtuoso'
-
-import {getSchemeColor} from '../../utils/getSchemeColor'
-
-const {
-  fonts: {
-    text: {sizes: themeTextSizes},
-  },
-  radius: themeRadius,
-  space: themeSpace,
-} = studioTheme
-
-export const reactSelectStyles = (scheme: ThemeColorSchemeKey): StylesConfig => {
-  return {
-    control: (styles, {isDisabled, isFocused}) => {
-      let boxShadow = `inset 0 0 0 1px var(--card-border-color)`
-      if (isFocused) {
-        boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputEnabledBorder')},
-        0 0 0 1px ${getSchemeColor(scheme, 'bg2')},
-        0 0 0 3px var(--card-focus-ring-color) !important`
-      }
-
-      return {
-        ...styles,
-        'backgroundColor': 'var(--card-bg-color)',
-        'color': 'inherit',
-        'border': 'none',
-        'borderRadius': themeRadius[2],
-        boxShadow,
-        'fontSize': themeTextSizes[1].fontSize,
-        'minHeight': '25px',
-        'opacity': isDisabled ? 0.5 : 'inherit',
-        'outline': 'none',
-        'transition': 'none',
-        '&:hover': {
-          boxShadow: `inset 0 0 0 1px ${getSchemeColor(scheme, 'inputHoveredBorder')}`,
-        },
-      }
-    },
-    input: (styles) => ({
-      ...styles,
-      color: 'var(--card-fg-color)',
-      fontFamily: studioTheme.fonts.text.family,
-      fontSize: themeTextSizes[1].fontSize,
-      marginLeft: rem(themeSpace[2]),
-    }),
-    menuList: (styles) => ({
-      ...styles,
-      padding: 0,
-    }),
-    noOptionsMessage: (styles) => ({
-      ...styles,
-      fontFamily: studioTheme.fonts.text.family,
-      fontSize: themeTextSizes[1].fontSize,
-      lineHeight: '1em',
-    }),
-    option: (styles, {isFocused}) => ({
-      ...styles,
-      'backgroundColor': isFocused ? getSchemeColor(scheme, 'spotBlue') : 'transparent',
-      'borderRadius': themeRadius[2],
-      'color': isFocused ? getSchemeColor(scheme, 'bg') : 'inherit',
-      'fontSize': themeTextSizes[1].fontSize,
-      'lineHeight': '1em',
-      'margin': 0,
-      'padding': rem(themeSpace[1]),
-      '&:hover': {
-        backgroundColor: getSchemeColor(scheme, 'spotBlue'),
-        color: getSchemeColor(scheme, 'bg'),
-      },
-    }),
-    placeholder: (styles) => ({
-      ...styles,
-      fontSize: themeTextSizes[1].fontSize,
-      marginLeft: rem(themeSpace[2]),
-      paddingLeft: 0,
-    }),
-    singleValue: (styles) => ({
-      ...styles,
-      alignItems: 'center',
-      display: 'inline-flex',
-      height: '100%',
-      marginLeft: rem(themeSpace[2]),
-    }),
-    valueContainer: (styles) => ({
-      ...styles,
-      margin: 0,
-      padding: 0,
-    }),
-  }
-}
-
-const ClearIndicator = (props: any) => {
-  return (
-    <components.ClearIndicator {...props}>
-      <Box
-        paddingRight={1}
-        style={{
-          transform: 'scale(0.85)',
-        }}
-      >
-        <Text muted size={0}>
-          <CloseIcon />
-        </Text>
-      </Box>
-    </components.ClearIndicator>
-  )
-}
-
-const Menu = (props: any) => {
-  return (
-    <components.Menu {...props}>
-      <Card radius={1} shadow={2}>
-        {props.children}
-      </Card>
-    </components.Menu>
-  )
-}
-
-const MenuList = (props: any) => {
-  const {children} = props
-
-  const MAX_ROWS = 5
-  const OPTION_HEIGHT = 33
-
-  if (Array.isArray(children)) {
-    const height =
-      children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT
-
-    return (
-      <Virtuoso
-        className="media__custom-scrollbar"
-        itemContent={(index) => {
-          const item = children[index]
-          return <Option {...item.props} />
-        }}
-        style={{height}}
-        totalCount={children.length}
-      />
-    )
-  }
-  return <components.MenuList {...props}>{children}</components.MenuList>
-}
-
-const NoOptionsMessage = (props: any) => {
-  return <components.NoOptionsMessage {...props}>{props.children}</components.NoOptionsMessage>
-}
-
-const Option = (props: any) => {
-  return (
-    <Box padding={1}>
-      <components.Option {...props}>
-        <Box paddingY={1}>
-          <Text size={1} style={{color: 'inherit'}} textOverflow="ellipsis">
-            {props.children}
-          </Text>
-        </Box>
-      </components.Option>
-    </Box>
-  )
-}
-
-const SingleValue = (props: any) => {
-  return (
-    <components.SingleValue {...props}>
-      <Text size={1} textOverflow="ellipsis">
-        {props.children}
-      </Text>
-    </components.SingleValue>
-  )
-}
-
-export const reactSelectComponents = {
-  ClearIndicator,
-  DropdownIndicator: null,
-  IndicatorSeparator: null,
-  Menu,
-  MenuList,
-  NoOptionsMessage,
-  Option,
-  SingleValue,
-}