@puredesktop/puredesktop-ui-bridge 1.0.0-beta.1 → 2.1.0

package/src/components/common/inputs/PaletteDropdown.tsx

@@ -1,413 +1,418 @@
-import { useCallback, useMemo, useState, type FormEvent } from 'react'
-import { ChevronDown, Plus } from 'lucide-react'
-import { styled } from 'styled-components'
-import { PlatformIcon } from '../../chrome/PlatformIcon.js'
-import { SelectMenuControl } from '../dropdown/SelectMenuControl.js'
-import { useSelectMenuAnchor } from '../dropdown/useSelectMenuAnchor.js'
-
-export interface PaletteDropdownPalette {
-  id: string
-  label: string
-  colors: readonly string[]
-  custom?: boolean
-}
-
-export interface PaletteDropdownCreatePayload {
-  label: string
-  colors: string[]
-}
-
-export interface PaletteDropdownProps {
-  label?: string
-  value: string
-  palettes: readonly PaletteDropdownPalette[]
-  variant?: 'field' | 'circle'
-  disabled?: boolean
-  sectionId?: string
-  allowCustom?: boolean
-  menuPlacement?: 'below' | 'above' | 'auto'
-  onChange: (id: string) => void
-  onCreatePalette?: (palette: PaletteDropdownCreatePayload) => string | void
-}
-
-const DEFAULT_CUSTOM_COLORS = [
-  '#4f74a8',
-  '#b47b3f',
-  '#6f9278',
-  '#8a738d',
-  '#626b76',
-]
-
-//#region styled-components
-
-const StyledWrap = styled.div<{ $variant: 'field' | 'circle' }>`
-  position: relative;
-  display: ${({ $variant }) =>
-    $variant === 'circle' ? 'inline-flex' : 'block'};
-  width: ${({ $variant }) => ($variant === 'circle' ? '28px' : 'auto')};
-  height: ${({ $variant }) => ($variant === 'circle' ? '28px' : 'auto')};
-  flex: 0 0 auto;
-`
-
-const StyledTrigger = styled.button<{ $variant: 'field' | 'circle' }>`
-  display: grid;
-  grid-template-columns: ${({ $variant }) =>
-    $variant === 'circle' ? '1fr' : 'minmax(0, 1fr) auto auto'};
-  align-items: center;
-  justify-items: center;
-  gap: ${({ $variant }) => ($variant === 'circle' ? '0' : '10px')};
-  width: ${({ $variant }) => ($variant === 'circle' ? '28px' : '100%')};
-  height: ${({ $variant }) => ($variant === 'circle' ? '28px' : '34px')};
-  padding: ${({ $variant }) => ($variant === 'circle' ? '0' : '0 10px')};
-  border: 1px solid var(--platform-colors-border);
-  border-radius: ${({ $variant }) =>
-    $variant === 'circle' ? '999px' : '10px'};
-  background: var(--platform-colors-surface);
-  color: var(--platform-colors-text);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 650;
-  cursor: pointer;
-
-  &:hover:not(:disabled),
-  &[aria-expanded='true'] {
-    border-color: var(--platform-colors-text-secondary);
-    background: var(--platform-colors-surface-hover);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-`
-
-const StyledLabel = styled.span`
-  min-width: 0;
-  overflow: hidden;
-  color: inherit;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const StyledSwatches = styled.span`
-  display: inline-flex;
-  flex: 0 0 auto;
-  align-items: center;
-`
-
-const StyledSwatch = styled.span<{ $color: string; $large?: boolean }>`
-  width: ${({ $large }) => ($large ? '13px' : '10px')};
-  height: ${({ $large }) => ($large ? '13px' : '10px')};
-  margin-left: ${({ $large }) => ($large ? '-1px' : '-2px')};
-  border: 1px solid rgba(255, 255, 255, 0.76);
-  border-radius: 999px;
-  background: ${({ $color }) => $color};
-  box-shadow: 0 0 0 1px rgba(46, 51, 56, 0.08);
-
-  &:first-child {
-    margin-left: 0;
-  }
-`
-
-const StyledPrimarySwatch = styled.span<{ $color: string }>`
-  display: block;
-  width: 16px;
-  height: 16px;
-  border: 1px solid rgb(255 255 255 / 78%);
-  border-radius: 999px;
-  background: ${({ $color }) => $color};
-  box-shadow: 0 0 0 1px rgb(46 51 56 / 16%), inset 0 0 0 1px rgb(0 0 0 / 4%);
-`
-
-const StyledCaret = styled.span`
-  display: inline-flex;
-  color: var(--platform-colors-text-secondary);
-`
-
-const StyledOption = styled.button<{ $selected?: boolean }>`
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  min-height: 34px;
-  padding: 7px 8px;
-  border: 0;
-  border-radius: 8px;
-  background: ${({ $selected }) =>
-    $selected ? 'var(--platform-colors-surface-hover)' : 'transparent'};
-  color: var(--platform-colors-text);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 650;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--platform-colors-surface-hover);
-  }
-`
-
-const StyledOptionText = styled.span`
-  min-width: 0;
-  overflow: hidden;
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`
-
-const StyledDivider = styled.div`
-  height: 1px;
-  margin: 6px 2px;
-  background: var(--platform-colors-border);
-`
-
-const StyledCustomToggle = styled.button`
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  height: 32px;
-  padding: 0 8px;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--platform-colors-text-secondary);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 650;
-  cursor: pointer;
-
-  &:hover {
-    background: var(--platform-colors-surface-hover);
-    color: var(--platform-colors-text);
-  }
-`
-
-const StyledCustomForm = styled.form`
-  display: grid;
-  gap: 8px;
-  padding: 4px 2px 2px;
-`
-
-const StyledNameInput = styled.input`
-  box-sizing: border-box;
-  width: 100%;
-  height: 32px;
-  min-width: 0;
-  padding: 0 9px;
-  border: 1px solid var(--platform-colors-border);
-  border-radius: 8px;
-  background: var(--platform-colors-surface);
-  color: var(--platform-colors-text);
-  font: inherit;
-  font-size: 12px;
-  outline: none;
-
-  &:focus {
-    border-color: var(--platform-colors-text-secondary);
-  }
-`
-
-const StyledColorRow = styled.div`
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 6px;
-`
-
-const StyledColorInput = styled.input`
-  width: 100%;
-  height: 28px;
-  min-width: 0;
-  padding: 2px;
-  border: 1px solid var(--platform-colors-border);
-  border-radius: 8px;
-  background: var(--platform-colors-surface);
-  cursor: pointer;
-`
-
-const StyledSubmit = styled.button`
-  justify-self: end;
-  height: 30px;
-  padding: 0 10px;
-  border: 1px solid var(--platform-colors-border);
-  border-radius: 8px;
-  background: var(--platform-colors-surface);
-  color: var(--platform-colors-text);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 650;
-  cursor: pointer;
-
-  &:hover:not(:disabled) {
-    background: var(--platform-colors-surface-hover);
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-`
-
-//#endregion
-
-function validColor(value: string): string {
-  return /^#[0-9a-f]{6}$/i.test(value) ? value : '#626b76'
-}
-
-export function PaletteDropdown({
-  label = 'Palette',
-  value,
-  palettes,
-  variant = 'field',
-  disabled = false,
-  sectionId = 'palette-dropdown',
-  allowCustom = false,
-  menuPlacement = 'below',
-  onChange,
-  onCreatePalette,
-}: PaletteDropdownProps): React.ReactElement {
-  const {
-    anchorRef,
-    open,
-    close: closeMenu,
-    toggle,
-  } = useSelectMenuAnchor<HTMLButtonElement>({
-    disabled,
-  })
-  const [customOpen, setCustomOpen] = useState(false)
-  const [customLabel, setCustomLabel] = useState('Custom palette')
-  const [customColors, setCustomColors] = useState(DEFAULT_CUSTOM_COLORS)
-
-  const selected = useMemo(
-    () => palettes.find(palette => palette.id === value) ?? palettes[0],
-    [palettes, value],
-  )
-  const primaryColor = selected?.colors[1] ?? selected?.colors[0] ?? '#2e3338'
-
-  const close = useCallback(() => {
-    closeMenu()
-    setCustomOpen(false)
-  }, [closeMenu])
-
-  const saveCustom = useCallback(
-    (event: FormEvent<HTMLFormElement>) => {
-      event.preventDefault()
-      if (!onCreatePalette) return
-      const createdId = onCreatePalette({
-        label: customLabel.trim() || 'Custom palette',
-        colors: customColors.map(validColor),
-      })
-      if (typeof createdId === 'string') onChange(createdId)
-      close()
-    },
-    [close, customColors, customLabel, onChange, onCreatePalette],
-  )
-
-  return (
-    <StyledWrap $variant={variant}>
-      <StyledTrigger
-        ref={anchorRef}
-        type="button"
-        title={selected ? `${label}: ${selected.label}` : label}
-        disabled={disabled}
-        $variant={variant}
-        data-platform-menu-trigger
-        aria-label={label}
-        aria-haspopup="menu"
-        aria-expanded={open}
-        onClick={toggle}
-      >
-        {variant === 'circle' ? (
-          <StyledPrimarySwatch aria-hidden="true" $color={primaryColor} />
-        ) : (
-          <>
-            <StyledLabel>{selected?.label ?? label}</StyledLabel>
-            <StyledSwatches aria-hidden="true">
-              {(selected?.colors ?? []).slice(0, 5).map(color => (
-                <StyledSwatch key={color} $color={color} />
-              ))}
-            </StyledSwatches>
-            <StyledCaret aria-hidden="true">
-              <PlatformIcon icon={ChevronDown} size={14} strokeWidth={1.75} />
-            </StyledCaret>
-          </>
-        )}
-      </StyledTrigger>
-      <SelectMenuControl
-        anchorRef={anchorRef}
-        open={open}
-        placement={menuPlacement}
-        minWidth={310}
-        panelVariant="palette"
-        wrapChildren={false}
-        aria-label={label}
-        onClose={close}
-      >
-        <div role="menu" data-section-id={sectionId}>
-          {palettes.map(palette => (
-            <StyledOption
-              key={palette.id}
-              type="button"
-              role="menuitemradio"
-              aria-checked={palette.id === value}
-              $selected={palette.id === value}
-              onClick={() => {
-                onChange(palette.id)
-                close()
-              }}
-            >
-              <StyledOptionText>{palette.label}</StyledOptionText>
-              <StyledSwatches aria-hidden="true">
-                {palette.colors.slice(0, 5).map(color => (
-                  <StyledSwatch key={color} $color={color} $large />
-                ))}
-              </StyledSwatches>
-            </StyledOption>
-          ))}
-          {allowCustom && onCreatePalette ? (
-            <>
-              <StyledDivider />
-              {customOpen ? (
-                <StyledCustomForm onSubmit={saveCustom}>
-                  <StyledNameInput
-                    value={customLabel}
-                    aria-label="Custom palette name"
-                    onChange={event => setCustomLabel(event.target.value)}
-                  />
-                  <StyledColorRow>
-                    {customColors.map((color, index) => (
-                      <StyledColorInput
-                        // eslint-disable-next-line react/no-array-index-key
-                        key={index}
-                        type="color"
-                        aria-label={`Custom colour ${index + 1}`}
-                        value={color}
-                        onChange={event =>
-                          setCustomColors(current =>
-                            current.map((item, itemIndex) =>
-                              itemIndex === index ? event.target.value : item,
-                            ),
-                          )
-                        }
-                      />
-                    ))}
-                  </StyledColorRow>
-                  <StyledSubmit type="submit">Save palette</StyledSubmit>
-                </StyledCustomForm>
-              ) : (
-                <StyledCustomToggle
-                  type="button"
-                  onClick={() => setCustomOpen(true)}
-                >
-                  <PlatformIcon icon={Plus} size={14} strokeWidth={1.8} />
-                  Custom palette
-                </StyledCustomToggle>
-              )}
-            </>
-          ) : null}
-        </div>
-      </SelectMenuControl>
-    </StyledWrap>
-  )
-}
+import { useCallback, useMemo, useState, type FormEvent } from 'react'
+import { ChevronDown, Plus } from 'lucide-react'
+import { styled } from 'styled-components'
+import { PlatformIcon } from '../../chrome/PlatformIcon.js'
+import { SelectMenuControl } from '../dropdown/SelectMenuControl.js'
+import { useSelectMenuAnchor } from '../dropdown/useSelectMenuAnchor.js'
+
+export interface PaletteDropdownPalette {
+  id: string
+  label: string
+  colors: readonly string[]
+  custom?: boolean
+}
+
+export interface PaletteDropdownCreatePayload {
+  label: string
+  colors: string[]
+}
+
+export interface PaletteDropdownProps {
+  label?: string
+  value: string
+  palettes: readonly PaletteDropdownPalette[]
+  variant?: 'field' | 'circle'
+  disabled?: boolean
+  sectionId?: string
+  allowCustom?: boolean
+  menuPlacement?: 'below' | 'above' | 'auto'
+  onChange: (id: string) => void
+  onCreatePalette?: (palette: PaletteDropdownCreatePayload) => string | void
+}
+
+const DEFAULT_CUSTOM_COLORS = [
+  '#4f74a8',
+  '#b47b3f',
+  '#6f9278',
+  '#8a738d',
+  '#626b76',
+]
+
+//#region styled-components
+
+const StyledWrap = styled.div<{ $variant: 'field' | 'circle' }>`
+  position: relative;
+  display: ${({ $variant }) =>
+    $variant === 'circle' ? 'inline-flex' : 'block'};
+  width: ${({ $variant }) => ($variant === 'circle' ? '28px' : 'auto')};
+  height: ${({ $variant }) => ($variant === 'circle' ? '28px' : 'auto')};
+  flex: 0 0 auto;
+`
+
+const StyledTrigger = styled.button<{ $variant: 'field' | 'circle' }>`
+  display: grid;
+  grid-template-columns: ${({ $variant }) =>
+    $variant === 'circle' ? '1fr' : 'minmax(0, 1fr) auto auto'};
+  align-items: center;
+  justify-items: center;
+  gap: ${({ $variant }) => ($variant === 'circle' ? '0' : '10px')};
+  width: ${({ $variant }) => ($variant === 'circle' ? '28px' : '100%')};
+  height: ${({ $variant }) =>
+    $variant === 'circle'
+      ? '28px'
+      : 'var(--platform-palette-dropdown-height, 34px)'};
+  padding: ${({ $variant }) => ($variant === 'circle' ? '0' : '0 10px')};
+  border: 1px solid var(--platform-colors-border);
+  border-radius: ${({ $variant }) =>
+    $variant === 'circle'
+      ? '999px'
+      : 'var(--platform-palette-dropdown-radius, 10px)'};
+  background: var(--platform-colors-surface, #ffffff);
+  color: var(--platform-colors-text, #25292f);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+
+  &:hover:not(:disabled),
+  &[aria-expanded='true'] {
+    border-color: var(--platform-colors-text-secondary, #68707a);
+    background: var(--platform-colors-surface-hover, #f4f6f8);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`
+
+const StyledLabel = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  color: inherit;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledSwatches = styled.span`
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+`
+
+const StyledSwatch = styled.span<{ $color: string; $large?: boolean }>`
+  width: ${({ $large }) => ($large ? '13px' : '10px')};
+  height: ${({ $large }) => ($large ? '13px' : '10px')};
+  margin-left: ${({ $large }) => ($large ? '-1px' : '-2px')};
+  border: 1px solid rgba(255, 255, 255, 0.76);
+  border-radius: 999px;
+  background: ${({ $color }) => $color};
+  box-shadow: 0 0 0 1px rgba(46, 51, 56, 0.08);
+
+  &:first-child {
+    margin-left: 0;
+  }
+`
+
+const StyledPrimarySwatch = styled.span<{ $color: string }>`
+  display: block;
+  width: 16px;
+  height: 16px;
+  border: 1px solid rgb(255 255 255 / 78%);
+  border-radius: 999px;
+  background: ${({ $color }) => $color};
+  box-shadow: 0 0 0 1px rgb(46 51 56 / 16%), inset 0 0 0 1px rgb(0 0 0 / 4%);
+`
+
+const StyledCaret = styled.span`
+  display: inline-flex;
+  color: var(--platform-colors-text-secondary, #68707a);
+`
+
+const StyledOption = styled.button<{ $selected?: boolean }>`
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-height: 34px;
+  padding: 7px 8px;
+  border: 0;
+  border-radius: 8px;
+  background: ${({ $selected }) =>
+    $selected ? 'var(--platform-colors-surface-hover, #f4f6f8)' : 'transparent'};
+  color: var(--platform-colors-text, #25292f);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover, #f4f6f8);
+  }
+`
+
+const StyledOptionText = styled.span`
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`
+
+const StyledDivider = styled.div`
+  height: 1px;
+  margin: 6px 2px;
+  background: var(--platform-colors-border, #d8dde5);
+`
+
+const StyledCustomToggle = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--platform-colors-text-secondary, #68707a);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+
+  &:hover {
+    background: var(--platform-colors-surface-hover, #f4f6f8);
+    color: var(--platform-colors-text, #25292f);
+  }
+`
+
+const StyledCustomForm = styled.form`
+  display: grid;
+  gap: 8px;
+  padding: 4px 2px 2px;
+`
+
+const StyledNameInput = styled.input`
+  box-sizing: border-box;
+  width: 100%;
+  height: 32px;
+  min-width: 0;
+  padding: 0 9px;
+  border: 1px solid var(--platform-colors-border, #d8dde5);
+  border-radius: 8px;
+  background: var(--platform-colors-surface, #ffffff);
+  color: var(--platform-colors-text, #25292f);
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+
+  &:focus {
+    border-color: var(--platform-colors-text-secondary, #68707a);
+  }
+`
+
+const StyledColorRow = styled.div`
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 6px;
+`
+
+const StyledColorInput = styled.input`
+  width: 100%;
+  height: 28px;
+  min-width: 0;
+  padding: 2px;
+  border: 1px solid var(--platform-colors-border, #d8dde5);
+  border-radius: 8px;
+  background: var(--platform-colors-surface, #ffffff);
+  cursor: pointer;
+`
+
+const StyledSubmit = styled.button`
+  justify-self: end;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--platform-colors-border, #d8dde5);
+  border-radius: 8px;
+  background: var(--platform-colors-surface, #ffffff);
+  color: var(--platform-colors-text, #25292f);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 650;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: var(--platform-colors-surface-hover, #f4f6f8);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+`
+
+//#endregion
+
+function validColor(value: string): string {
+  return /^#[0-9a-f]{6}$/i.test(value) ? value : '#626b76'
+}
+
+export function PaletteDropdown({
+  label = 'Palette',
+  value,
+  palettes,
+  variant = 'field',
+  disabled = false,
+  sectionId = 'palette-dropdown',
+  allowCustom = false,
+  menuPlacement = 'below',
+  onChange,
+  onCreatePalette,
+}: PaletteDropdownProps): React.ReactElement {
+  const {
+    anchorRef,
+    open,
+    close: closeMenu,
+    toggle,
+  } = useSelectMenuAnchor<HTMLButtonElement>({
+    disabled,
+  })
+  const [customOpen, setCustomOpen] = useState(false)
+  const [customLabel, setCustomLabel] = useState('Custom palette')
+  const [customColors, setCustomColors] = useState(DEFAULT_CUSTOM_COLORS)
+
+  const selected = useMemo(
+    () => palettes.find(palette => palette.id === value) ?? palettes[0],
+    [palettes, value],
+  )
+  const primaryColor = selected?.colors[1] ?? selected?.colors[0] ?? '#2e3338'
+
+  const close = useCallback(() => {
+    closeMenu()
+    setCustomOpen(false)
+  }, [closeMenu])
+
+  const saveCustom = useCallback(
+    (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault()
+      if (!onCreatePalette) return
+      const createdId = onCreatePalette({
+        label: customLabel.trim() || 'Custom palette',
+        colors: customColors.map(validColor),
+      })
+      if (typeof createdId === 'string') onChange(createdId)
+      close()
+    },
+    [close, customColors, customLabel, onChange, onCreatePalette],
+  )
+
+  return (
+    <StyledWrap $variant={variant}>
+      <StyledTrigger
+        ref={anchorRef}
+        type="button"
+        title={selected ? `${label}: ${selected.label}` : label}
+        disabled={disabled}
+        $variant={variant}
+        data-platform-menu-trigger
+        aria-label={label}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={toggle}
+      >
+        {variant === 'circle' ? (
+          <StyledPrimarySwatch aria-hidden="true" $color={primaryColor} />
+        ) : (
+          <>
+            <StyledLabel>{selected?.label ?? label}</StyledLabel>
+            <StyledSwatches aria-hidden="true">
+              {(selected?.colors ?? []).slice(0, 5).map(color => (
+                <StyledSwatch key={color} $color={color} />
+              ))}
+            </StyledSwatches>
+            <StyledCaret aria-hidden="true">
+              <PlatformIcon icon={ChevronDown} size={14} strokeWidth={1.75} />
+            </StyledCaret>
+          </>
+        )}
+      </StyledTrigger>
+      <SelectMenuControl
+        anchorRef={anchorRef}
+        open={open}
+        placement={menuPlacement}
+        minWidth={310}
+        panelVariant="palette"
+        wrapChildren={false}
+        aria-label={label}
+        onClose={close}
+      >
+        <div role="menu" data-section-id={sectionId}>
+          {palettes.map(palette => (
+            <StyledOption
+              key={palette.id}
+              type="button"
+              role="menuitemradio"
+              aria-checked={palette.id === value}
+              $selected={palette.id === value}
+              onClick={() => {
+                onChange(palette.id)
+                close()
+              }}
+            >
+              <StyledOptionText>{palette.label}</StyledOptionText>
+              <StyledSwatches aria-hidden="true">
+                {palette.colors.slice(0, 5).map(color => (
+                  <StyledSwatch key={color} $color={color} $large />
+                ))}
+              </StyledSwatches>
+            </StyledOption>
+          ))}
+          {allowCustom && onCreatePalette ? (
+            <>
+              <StyledDivider />
+              {customOpen ? (
+                <StyledCustomForm onSubmit={saveCustom}>
+                  <StyledNameInput
+                    value={customLabel}
+                    aria-label="Custom palette name"
+                    onChange={event => setCustomLabel(event.target.value)}
+                  />
+                  <StyledColorRow>
+                    {customColors.map((color, index) => (
+                      <StyledColorInput
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={index}
+                        type="color"
+                        aria-label={`Custom colour ${index + 1}`}
+                        value={color}
+                        onChange={event =>
+                          setCustomColors(current =>
+                            current.map((item, itemIndex) =>
+                              itemIndex === index ? event.target.value : item,
+                            ),
+                          )
+                        }
+                      />
+                    ))}
+                  </StyledColorRow>
+                  <StyledSubmit type="submit">Save palette</StyledSubmit>
+                </StyledCustomForm>
+              ) : (
+                <StyledCustomToggle
+                  type="button"
+                  onClick={() => setCustomOpen(true)}
+                >
+                  <PlatformIcon icon={Plus} size={14} strokeWidth={1.8} />
+                  Custom palette
+                </StyledCustomToggle>
+              )}
+            </>
+          ) : null}
+        </div>
+      </SelectMenuControl>
+    </StyledWrap>
+  )
+}