@stack-spot/portal-components 2.5.2 → 2.6.1

package/src/components/form/Select/CustomSelect.tsx

@@ -0,0 +1,232 @@
+import { IconBox } from '@citric/core'
+import { ChevronDown } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { listToClass } from '@stack-spot/portal-theme'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { delay } from '../../../utils/promise'
+import { SelectBox } from './styled'
+import { CustomSelectProps, GenericAccessibleLabel, KeyOfType } from './types'
+import { parseLabel } from './utils'
+
+function getOptionAsValue<Option, T extends KeyOfType<Option, string> | ((o: NonNullable<Option>) => string)>(
+  option: Option,
+  renderer: T | undefined,
+): string {
+  let result: string | undefined
+  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
+  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as string
+  return result ? result : `${option ?? ''}`
+}
+
+function getOptionAsLabel<
+  Option,
+  T extends KeyOfType<Option, GenericAccessibleLabel> | ((o: NonNullable<Option>) => GenericAccessibleLabel)
+>(
+  option: Option,
+  renderer: T | undefined,
+): GenericAccessibleLabel {
+  let result: GenericAccessibleLabel | undefined
+  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
+  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as GenericAccessibleLabel
+  return result ? result : parseLabel(`${option ?? ''}`)
+}
+
+const FakeOption = (
+  { value, label, onChange }: { value: string, label: React.ReactElement, onChange: (event: { target: { value: string } }) => void },
+) => (
+  <li className="option" onClick={() => onChange({ target: { value } })}>
+    {label}
+  </li>
+)
+
+/**
+ * Renders a Select component using the Citric Design System.
+ * 
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ * 
+ * The CustomSelect lets you customize how each option and the selected value are rendered. To do so, use the prop `renderLabel` and
+ * `emptyOption`.
+ * 
+ * If you don't need fully customized labels, check the more simple components: `DetailedSelect` and `Select`.
+ * 
+ * The CustomSelect expects a {@link GenericAccessibleLabel} to create labels.
+ * 
+ * Tips:
+ * - This is a controlled field. You can't use it any other way. If you're using it with react-hook-form, you need to wrap it under the
+ * component `<Controller>` from the same library.
+ * - `value` is required and must be of the same type of an item of the array of options. `value` is only optional if `emptyOption` is
+ * provided, in this case, an empty option is rendered and the value is undefined when it's selected.
+ * - A consequence of the previous rule is that you can't have an empty selection if you don't set a value for `emptyOption`. This
+ * component must work exactly like the browser's `select`, so this behavior is intended.
+ * - If `renderLabel` or `renderValue` are not provided, this will use the `toString` method of the object.
+ * 
+ * @example
+ * options as an object array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ * 
+ * function renderCustomLabel(option: string) {
+ *   return {
+ *     // this is how the option will be rendered in the list
+ *     option: (
+ *       <div style={{ display: flex, flexDirection: 'row', gap: '5px' }}>
+ *         <img src="/my-image.png" width="40px" height="40px" />
+ *         <p>An option called {option}</p>
+ *       </div>
+ *     ),
+ *     // this is how the option will be rendered inside the input, when it's the value currently selected.
+ *     selected: <p>{option}</p>,
+ *     // this a string representation of the option: used for accessibility. This should contain the same information as `option`.
+ *     text: `An option called ${option}`,
+ *   )
+ * }
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <CustomSelect options={options} value={value} onChange={setValue} renderLabel={renderCustomLabel} />
+ * }
+ * ```
+ * @example
+ * options as an object array
+ * ```
+ * const options = [{ id: 1, name: 'John', age: 34 }, { id: 2, name: 'Marcia', age: 28 }, { id: 3, name: 'Angeline', age: 58 }]
+ * 
+ * function renderCustomLabel(option: (typeof options)[number]) {
+ *   return {
+ *     // this is how the option will be rendered in the list
+ *     option: (
+ *       <div style={{ display: flex, flexDirection: 'row', gap: '5px' }}>
+ *         <img src="/my-image.png" width="40px" height="40px" />
+ *         <p>{option.name}, aged {option.age}</p>
+ *       </div>
+ *     ),
+ *     // this is how the option will be rendered inside the input, when it's the value currently selected.
+ *     selected: <p>{option}</p>,
+ *     // this a string representation of the option: used for accessibility. This should contain the same information as `option`.
+ *     text: `${option.name}, aged ${option.age}`,
+ *   )
+ * }
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id`
+ *   return <CustomSelect options={options} value={value} onChange={setValue} renderValue="id" renderLabel={renderCustomLabel} />
+ * }
+ * ```
+ * @param props the component props: {@link CustomSelectProps}.
+ */
+export function CustomSelect<T>({
+  onChange, options, value, emptyOption, renderLabel, renderValue, maxItems = 6, onFocus, onBlur, style, className, isLoading, disabled,
+  height = '42px', ...props
+}: CustomSelectProps<T>) {
+  const [open, setOpen] = useState(false)
+  const [focused, setFocused] = useState(false)
+  const fakeSelectRef = useRef<HTMLDivElement>(null)
+  const listHeight = useRef(0)
+  const isDisabled = disabled || isLoading
+  const isMeasuring = useRef(false)
+
+  const onChangeOption = useCallback((event: { target: { value: string } }) => {
+    const value = options?.find(o => getOptionAsValue(o, renderValue) === event.target.value)
+    onChange(value!)
+    setOpen(false)
+  }, [options])
+
+  const onClickOutside = useCallback((event: MouseEvent) => {
+    if (fakeSelectRef.current && !fakeSelectRef.current.contains(event.target as Node)) setOpen(false)
+  }, [])
+
+  const [htmlOptions, fakeOptions] = useMemo(
+    () => (options ?? []).reduce<[React.ReactElement[], React.ReactElement[]]>(([opts, fake], o) => {
+      const id = getOptionAsValue(o, renderValue)
+      const label = getOptionAsLabel(o, renderLabel)
+      return [
+        [...opts, <option key={id} value={id} selected={value === id}>{label.text}</option>],
+        [...fake, <FakeOption key={id} value={id} label={label.option} onChange={onChangeOption} />],
+      ]
+    }, [[], []]),
+    [options, value],
+  )
+
+  function getCurrentValue() {
+    return value === undefined ? '' : getOptionAsValue(value, renderValue)
+  }
+
+  function getCurrentLabel() {
+    return value === undefined ? emptyOption : getOptionAsLabel(value, renderLabel)
+  }
+
+  useEffect(() => {
+    const detach = () => document.removeEventListener('mousedown', onClickOutside)
+    if (open) document.addEventListener('mousedown', onClickOutside)
+    else detach()
+    return detach 
+  }, [open])
+
+  useEffect(() => {
+    async function measure() {
+      // semaphore for controlling concurrence
+      if (isMeasuring.current) return
+      isMeasuring.current = true
+      const list = fakeSelectRef.current?.querySelector('.options')
+      if (!list) return
+      list.setAttribute('inert', '')
+      list.setAttribute('style', 'height: auto')
+      await delay(0)
+      listHeight.current = list.clientHeight
+      await delay(0)
+      list.setAttribute('style', `height: ${open ? listHeight.current : 0}`)
+      list.removeAttribute('inert')
+      isMeasuring.current = false
+    }
+    measure()
+  }, [options, fakeSelectRef.current])
+
+  // replicates the original select effect of the browser to select the first option. This is necessary because we use the default
+  // select element for accessibility, the behavior must not differ.
+  useEffect(() => {
+    if (!value && !emptyOption && options?.length) {
+      onChange(options[0])
+    }
+  }, [options])
+
+  return (
+    <SelectBox style={style} className={className} $maxItems={maxItems} $inputHeight={height}>
+      { /* Screen readers can use the select component from the browser instead of the highly styled component we show. */ }
+      <select
+        {...props}
+        value={getCurrentValue()}
+        onChange={onChangeOption}
+        onFocus={(ev) => {
+          setFocused(true)
+          onFocus?.(ev)
+        }}
+        onBlur={(ev) => {
+          setFocused(false)
+          onBlur?.(ev)
+        }}
+        disabled={isDisabled}
+        aria-busy={isLoading}
+      >
+        {emptyOption === undefined ? null : <option value="" selected={!value}>{emptyOption.text}</option>}
+        {htmlOptions}
+      </select>
+      <div
+        ref={fakeSelectRef}
+        className={listToClass(['fake-select', open && 'open', focused && 'focused', isDisabled && 'disabled'])}
+        aria-hidden
+      >
+        <div className="current-value" onClick={isDisabled ? undefined : () => setOpen(!open)}>
+          {getCurrentLabel()?.selected || getCurrentLabel()?.option || <div></div>}
+          {isLoading ? <LoadingCircular size="sm" /> : <IconBox className="arrow"><ChevronDown /></IconBox>}
+        </div>
+        <ul className="options" style={{ height: open ? listHeight.current : 0 }}>
+          {emptyOption === undefined ? null : <FakeOption value="" label={emptyOption.option} onChange={onChangeOption} />}
+          {fakeOptions}
+        </ul>
+      </div>
+    </SelectBox>
+  )
+}

package/src/components/form/Select/DetailedSelect.tsx

@@ -0,0 +1,85 @@
+import { useCallback } from 'react'
+import { CustomSelect } from './CustomSelect'
+import { DetailedLabel, DetailedSelectProps, GenericAccessibleLabel, KeyOfType } from './types'
+import { parseLabel } from './utils'
+
+function getOptionAsLabel<
+  Option,
+  T extends KeyOfType<Option, string> | ((o: NonNullable<Option>) => DetailedLabel)
+>(
+  option: Option,
+  renderer: T | undefined,
+): GenericAccessibleLabel {
+  let result: DetailedLabel | undefined
+  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
+  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as DetailedLabel
+  return parseLabel(result ?? `${option ?? ''}`)
+}
+
+/**
+ * Renders a Select component using the Citric Design System.
+ * 
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ * 
+ * The DetailedSelect lets you set an image, a title and a description for each option. To do so, use the prop `renderLabel` and
+ * `emptyOption`. The accessible string for each option will always be `option.title: option.description`.
+ * 
+ * To use more customizable labels, check the `CustomSelect`. To use more simple labels (just strings) use `Select`.
+ * 
+ * The DetailedSelect expects a {@link DetailedLabel} to create labels.
+ * 
+ * Tips:
+ * - This is a controlled field. You can't use it any other way. If you're using it with react-hook-form, you need to wrap it under the
+ * component `<Controller>` from the same library.
+ * - `value` is required and must be of the same type of an item of the array of options. `value` is only optional if `emptyOption` is
+ * provided, in this case, an empty option is rendered and the value is undefined when it's selected.
+ * - A consequence of the previous rule is that you can't have an empty selection if you don't set a value for `emptyOption`. This
+ * component must work exactly like the browser's `select`, so this behavior is intended.
+ * - If `renderLabel` or `renderValue` are not provided, this will use the `toString` method of the object to set the option's title.
+ * 
+ * @example
+ * options as a string array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ * 
+ * function renderDetailedLabel(option: string) {
+ *   return {
+ *     title: option,
+ *     description: 'my description',
+ *     image: <img src="/my-image.png" />,
+ *  }
+ * }
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <DetailedSelect options={options} value={value} onChange={setValue} renderLabel={renderDetailedLabel} />
+ * }
+ * ```
+ * @example
+ * options as an object array
+ * ```
+ * const options = [{ id: 1, name: 'John', age: 34 }, { id: 2, name: 'Marcia', age: 28 }, { id: 3, name: 'Angeline', age: 58 }]
+ * 
+ * function renderDetailedLabel(option: (typeof options)[number]) {
+ *   return {
+ *     title: option.name,
+ *     description: `${option.age} years old`,
+ *     image: <img src="/my-image.png" />,
+ *   }
+ * }
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id`
+ *   return <DetailedSelect options={options} value={value} onChange={setValue} renderValue="id" renderLabel={renderDetailedLabel} />
+ * }
+ * ```
+ * @param props the component props: {@link DetailedSelectProps}.
+ */
+export function DetailedSelect<T>({ renderLabel, emptyOption, ...props }: DetailedSelectProps<T>) {
+  const renderLabelRef = useCallback((option: T) => getOptionAsLabel(option, renderLabel), [])
+  // @ts-ignore the following usage is correct, Typescript is getting confused because it doesn't know if `emptyOption` is undefined or not.
+  return <CustomSelect renderLabel={renderLabelRef} emptyOption={emptyOption ? parseLabel(emptyOption) : undefined} {...props} />
+}

package/src/components/form/Select/Select.tsx

@@ -0,0 +1,67 @@
+import { useCallback } from 'react'
+import { CustomSelect } from './CustomSelect'
+import { GenericAccessibleLabel, KeyOfType, SelectProps } from './types'
+import { parseLabel } from './utils'
+
+function getOptionAsLabel<
+  Option,
+  T extends KeyOfType<Option, string> | ((o: NonNullable<Option>) => string)
+>(
+  option: Option,
+  renderer: T | undefined,
+): GenericAccessibleLabel {
+  let result: string | undefined
+  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
+  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as string
+  return parseLabel(result ?? `${option ?? ''}`)
+}
+
+/**
+ * Renders a Select component using the Citric Design System.
+ * 
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ * 
+ * The Select component renders each option as a string. To use more customizable labels, check the `DetailedSelect` and `CustomSelect`
+ * components.
+ * 
+ * The Select component expects plain strings to create labels.
+ * 
+ * Tips:
+ * - This is a controlled field. You can't use it any other way. If you're using it with react-hook-form, you need to wrap it under the
+ * component `<Controller>` from the same library.
+ * - `value` is required and must be of the same type of an item of the array of options. `value` is only optional if `emptyOption` is
+ * provided, in this case, an empty option is rendered and the value is undefined when it's selected.
+ * - A consequence of the previous rule is that you can't have an empty selection if you don't set a value for `emptyOption`. This
+ * component must work exactly like the browser's `select`, so this behavior is intended.
+ * - If `renderLabel` or `renderValue` are not provided, this will use the `toString` method of the object.
+ * 
+ * @example
+ * options as a string array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <Select options={options} value={value} onChange={setValue} />
+ * }
+ * ```
+ * @example
+ * options as an object array
+ * ```
+ * const options = [{ id: 1, name: 'John', age: 34 }, { id: 2, name: 'Marcia', age: 28 }, { id: 3, name: 'Angeline', age: 58 }]
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id` and renderLabel `o => o.name`.
+ *   return <Select options={options} value={value} onChange={setValue} renderValue="id" renderLabel="name" />
+ * }
+ * ```
+ * @param props the component props: {@link CustomSelectProps}.
+ */
+export function Select<T>({ renderLabel, emptyOption, ...props }: SelectProps<T>) {
+  const renderLabelRef = useCallback((option: T) => getOptionAsLabel(option, renderLabel), [])
+  // @ts-ignore the following usage is correct, Typescript is getting confused because it doesn't know if `emptyOption` is undefined or not.
+  return <CustomSelect renderLabel={renderLabelRef} emptyOption={emptyOption ? parseLabel(emptyOption) : undefined} {...props} />
+}

package/src/components/form/Select/index.ts

@@ -0,0 +1,4 @@
+export { CustomSelect } from './CustomSelect'
+export { DetailedSelect } from './DetailedSelect'
+export { Select } from './Select'
+export * from './types'

package/src/components/form/Select/styled.ts

@@ -0,0 +1,165 @@
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+export const SelectBox = styled.div<{ $maxItems: number, $inputHeight: string }>`
+  position: relative;
+  // controls the height of component when it's closed
+  height: ${({ $inputHeight }) => $inputHeight};
+
+  select {
+    border: none;
+    opacity: 0;
+    pointer-events: none;
+    // prevents visual overflow
+    max-width: 10px;
+  }
+  
+  .fake-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${theme.color.light[600]};
+    transition: border-color 0.3s, box-shadow 0.3s;
+    background-color: ${theme.color.light[300]};
+
+    /* lets the z-index unset until the animation on the height ends. */
+    &:not(.open) {
+      z-index: unset;
+      animation: 0.3s z-index-animation;
+      @keyframes z-index-animation {
+        0% {
+          z-index: 1;
+        }
+        99% {
+          z-index: 1;
+        }
+        100% {
+          z-index: unset;
+        }
+      }
+    }
+
+    &.disabled {
+      background-color: ${theme.color.light[500]};
+      color: ${theme.color.light[700]};
+      .current-value {
+        cursor: not-allowed;
+      }
+    }
+
+    .arrow {
+      transition: transform ease-in-out 0.3s;
+    }
+
+    &.focused, &.open {
+      border: 1px solid ${theme.color.primary[500]};
+      box-shadow: 0 0 0 1px ${theme.color.primary[500]};
+    }
+
+    &.open {
+      z-index: 1;
+      .arrow {
+        transform: rotate(180deg);
+      }
+      .options {
+        /* lets the overflow be hidden until the animation on the height ends. */
+        overflow-y: auto;
+        animation: 0.3s overflow-animation;
+        @keyframes overflow-animation {
+          0% {
+            overflow-y: hidden;
+          }
+          99% {
+            overflow-y: hidden;
+          }
+          100% {
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+
+    .current-value {
+      height: calc(100% - 2px);
+      display: flex;
+      flex-direction: row;
+      padding: 8px;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .clipped-text {
+      text-overflow: ellipsis;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .options {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      overflow-y: hidden;
+      transition: height ease-in-out 0.3s;
+      scrollbar-gutter: stable;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 9px;
+        border-top: 1px solid ${theme.color.light[600]};
+        cursor: pointer;
+        transition: background-color 0.2s;
+        &:hover, &:focus {
+          background-color: ${theme.color.light[500]};
+        }
+        outline: none;
+      }
+
+      .detailed {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: center;
+        .image {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          overflow: hidden;
+          & > * {
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+        .text-content {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+          .description {
+            color: ${theme.color.light[700]};
+          }
+        }
+      }
+
+      /* the list is inert when, and only when, its having its height measured */
+      &[inert] {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        /* we don't want to have the height measured over the height of $maxItems */
+        li:nth-child(n+${({ $maxItems }) => $maxItems + 1}) {
+          display: none;
+        }
+      }
+    }
+  }
+`

package/src/components/form/Select/types.ts

@@ -0,0 +1,112 @@
+import { InputHTMLAttributes } from 'react'
+
+export interface GenericAccessibleLabel {
+  /**
+   * This is how the option's label will be rendered inside the dropdown list. This can be any React element.
+   * 
+   * Attention: be careful, this should not have any important information that can't be represented through text (accessibility).
+   */
+  option: React.ReactElement,
+  /**
+   * This is a required text representation of the option. This is used for accessibility.
+   */
+  text: string,
+  /**
+   * This is how the option's label will be rendered as the select current value.
+   * 
+   * If not provided, will be rendered using `option`.
+   */
+  selected?: React.ReactElement,
+}
+
+export interface DetailedLabel {
+  title: string,
+  description?: string,
+  image?: React.ReactElement,
+}
+
+export type AccessibleLabel = string | DetailedLabel | GenericAccessibleLabel
+
+type FilterObjectByValueType<T, Type> = { [K in keyof T as T[K] extends Type ? K : never]: T[K] }
+export type KeyOfType<Data, Type> = Data extends Record<string, any> ? keyof FilterObjectByValueType<Data, Type> : never
+
+interface BaseSelectProps<
+  Option, Label extends AccessibleLabel
+> extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
+  /**
+   * The current value.
+   */
+  value: Option | undefined,
+  /**
+   * The label for the empty option. The empty option sets the value to undefined.
+   * 
+   * If this is not set, there won't be an empty option for this select.
+   */
+  emptyOption?: Label,
+  /**
+   * The options to render in this selection menu.
+   */
+  options: Option[] | undefined, // this may be undefined if isLoading is true
+  /**
+   * Provides the value of each option. This can be either a key of the option object or a function that receives the option and returns
+   * the value.
+   * 
+   * This is required if the options don't have a relevant value returned by `toString()`.
+   * 
+   * @example
+   * - `'id'`
+   * - `(option) => option.id`
+   */
+  renderValue?: KeyOfType<Option, string> | ((item: NonNullable<Option>) => string),
+  /**
+   * Provides the label of each option. This can be either a key of the option object or a function that receives the option and returns
+   * the label.
+   * 
+   * This is required if the options don't have a relevant value returned by `toString()`.
+   * 
+   * @example
+   * - `'name'`
+   * - `(option) => option.name`
+   */
+  renderLabel?: KeyOfType<Option, Label> | ((item: NonNullable<Option>) => Label),
+  /**
+   * Called when the value changes.
+   * @param value the new value.
+   */
+  onChange: (value: Option | undefined) => void,
+  /**
+   * The maximum number of items before showing a vertical scroll bar.
+   * @default 6
+   */
+  maxItems?: number,
+  /**
+   * Whether or not the options are being loaded. The field will become disabled while isLoading is true.
+   */
+  isLoading?: boolean,
+}
+
+interface OptionalSelectProps<Option, Label extends AccessibleLabel> extends BaseSelectProps<Option, Label> {
+  emptyOption: Label,
+}
+
+interface RequiredSelectProps<Option, Label extends AccessibleLabel> extends Omit<BaseSelectProps<Option, Label>, 'onChange'> {
+  emptyOption?: undefined,
+  value: Option | undefined, // this may be undefined if isLoading is true
+  onChange: (value: Option) => void,
+}
+
+export type SelectProps<Option> = OptionalSelectProps<Option, string> | RequiredSelectProps<Option, string>
+export type DetailedSelectProps<Option> = OptionalSelectProps<Option, DetailedLabel> | RequiredSelectProps<Option, DetailedLabel>
+export type CustomSelectProps<Option> = (
+  OptionalSelectProps<Option, GenericAccessibleLabel>
+  | RequiredSelectProps<Option, GenericAccessibleLabel>
+) & {
+  /**
+   * Controls the height of component when it's closed.
+   * 
+   * Developer note: it would be nice to automatically calculate this instead of expecting a prop.
+   * 
+   * @default '42px'
+   */
+  height?: string,
+}