{"version":3,"file":"index.esm.mjs","sources":["../src/color-select.tsx","../src/schemas/type.ts","../src/index.ts"],"sourcesContent":["import {ChevronDownIcon} from '@sanity/icons'\nimport {Box, Button, Card, Container, Flex, Inline, Popover, Stack, Text} from '@sanity/ui'\nimport React, {useCallback, useEffect, useRef, useState} from 'react'\nimport {ObjectOptions, set, StringInputProps} from 'sanity'\n\nexport interface ColorSelectType {\n  title: string\n  hex?: string\n  value: string\n}\n\nexport interface ColorOptions extends Omit<ObjectOptions, 'columns'> {\n  list?: Array<ColorSelectType>\n  layout?: 'dropdown' | 'buttons'\n  labels?: boolean\n}\n\ninterface DropdownItemProps {\n  listItem: ColorSelectType\n  onSelect: (color: ColorSelectType) => void\n}\n\nconst DropdownItem = ({listItem, onSelect}: DropdownItemProps): React.JSX.Element => {\n  const handleClick = useCallback(() => onSelect(listItem), [listItem, onSelect])\n  return (\n    <Button radius={0} mode=\"bleed\" onClick={handleClick}>\n      <Box>\n        <Inline space={3}>\n          <Card\n            style={{\n              backgroundColor: listItem.hex ?? listItem.value,\n              width: '16px',\n              height: '16px',\n            }}\n            radius={2}\n            shadow={1}\n          />\n          <Text>{listItem.title}</Text>\n        </Inline>\n      </Box>\n    </Button>\n  )\n}\n\ninterface ButtonItemProps {\n  listItem: ColorSelectType\n  onSelect: (color: ColorSelectType) => void\n  selected: boolean\n  hasLabels: boolean\n}\n\nconst ButtonItem = ({\n  listItem,\n  onSelect,\n  selected,\n  hasLabels,\n}: ButtonItemProps): React.JSX.Element => {\n  const handleClick = useCallback(() => onSelect(listItem), [listItem, onSelect])\n  return (\n    <Button radius={0} mode=\"bleed\" onClick={handleClick} selected={selected}>\n      <Box>\n        <Inline space={3}>\n          <Card\n            style={{\n              backgroundColor: listItem.hex ?? listItem.value,\n              width: hasLabels ? '16px' : '32px',\n              height: hasLabels ? '16px' : '32px',\n            }}\n            radius={2}\n            shadow={1}\n            title={!hasLabels && listItem?.title ? listItem.title : undefined}\n          />\n          {hasLabels && <Text>{listItem.title}</Text>}\n        </Inline>\n      </Box>\n    </Button>\n  )\n}\n\n/** Colour select component */\nexport const ColorSelectInput = (props: StringInputProps): React.JSX.Element => {\n  const [isOpen, setIsOpen] = useState(false)\n  const [pickerIsOpen, setPickerIsOpen] = useState(false)\n  const {onChange} = props\n  const value = props.value\n  const options = props.schemaType.options as ColorOptions\n  const list = options?.list\n  const hasLabels = options.labels ?? true\n\n  const [selectedColor, setSelectedColor] = useState<ColorSelectType | undefined>(\n    list?.filter((item: ColorSelectType) => item?.value === value)[0],\n  )\n\n  /** Handle the color change */\n  const handleSelectChange = useCallback(\n    (color: ColorSelectType) => {\n      setSelectedColor(color)\n      setIsOpen(false)\n      onChange(set(color?.value))\n    },\n    [onChange],\n  )\n\n  const handleToggle = useCallback(() => {\n    if (list) {\n      setIsOpen((prev) => !prev)\n    } else {\n      setPickerIsOpen((prev) => !prev)\n    }\n  }, [list])\n\n  const ref: React.RefObject<HTMLDivElement> = useRef(null)\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        setPickerIsOpen(false)\n        setIsOpen(false)\n      }\n    }\n    document.addEventListener('click', handleClickOutside, true)\n    return () => {\n      document.removeEventListener('click', handleClickOutside, true)\n    }\n  }, [isOpen, pickerIsOpen, ref])\n\n  // Render\n  return (\n    <Container>\n      {/** Dropdown layout */}\n      {options?.layout === 'dropdown' && (\n        <Popover ref={ref} portal open={pickerIsOpen}>\n          <Flex>\n            <Button\n              style={{\n                width: '100%',\n                textAlign: 'center',\n                borderTopRightRadius: '0',\n                borderBottomRightRadius: '0',\n              }}\n              mode=\"ghost\"\n              padding={2}\n              onClick={handleToggle}\n            >\n              <Inline space={4}>\n                <Inline space={1}>\n                  <Box>\n                    <Card\n                      style={{\n                        backgroundColor: (selectedColor?.hex ?? selectedColor?.value) || '#ffffff',\n                      }}\n                      radius={2}\n                      shadow={1}\n                      padding={2}\n                      margin={1}\n                    />\n                  </Box>\n                  <Text weight=\"semibold\">{selectedColor?.title || 'Select a colour...'} </Text>\n                </Inline>\n                <ChevronDownIcon width={32} height={32} />\n              </Inline>\n            </Button>\n          </Flex>\n        </Popover>\n      )}\n\n      {isOpen && options?.layout === 'dropdown' && list && (\n        <Card radius={2} shadow={3} marginTop={1} overflow=\"hidden\">\n          <Stack>\n            {list?.map((listItem: ColorSelectType) => (\n              <DropdownItem\n                key={listItem.title}\n                listItem={listItem}\n                onSelect={handleSelectChange}\n              />\n            ))}\n          </Stack>\n        </Card>\n      )}\n\n      {/** Buttons layout */}\n      {list && options?.layout !== 'dropdown' && (\n        <Card radius={2} shadow={3} marginTop={1} overflow=\"hidden\">\n          <Flex wrap=\"wrap\">\n            {list?.map((listItem: ColorSelectType) => (\n              <ButtonItem\n                key={listItem.title}\n                listItem={listItem}\n                onSelect={handleSelectChange}\n                selected={selectedColor?.value === listItem.value}\n                hasLabels={hasLabels}\n              />\n            ))}\n          </Flex>\n        </Card>\n      )}\n    </Container>\n  )\n}\n","import {defineType} from 'sanity'\n\nimport {ColorSelectInput} from '../color-select'\n\nexport const colorSelectSchemaType = defineType({\n  title: 'Color Select',\n  type: 'string',\n  name: 'colorSelect',\n  components: {input: ColorSelectInput},\n})\n","import {definePlugin} from 'sanity'\n\nimport {colorSelectSchemaType} from './schemas/type'\n\n/**\n * Usage in `sanity.config.ts` (or .js)\n *\n * ```ts\n * import {defineConfig} from 'sanity'\n * import {ColorSelect} from 'sanity-plugin-color-select'\n *\n * export default defineConfig({\n *   // ...\n *   plugins: [ColorSelect()],\n * })\n * ```\n */\nexport const ColorSelect = definePlugin(() => {\n  return {\n    name: 'sanity-plugin-color-select',\n    schema: {\n      types: [colorSelectSchemaType],\n    },\n  }\n})\n"],"names":[],"mappings":"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"}