@stack-spot/portal-components 2.5.2 → 2.6.0

package/dist/components/form/Select.js

@@ -1,162 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconBox, Text } from '@citric/core';
-import { ChevronDown } from '@citric/icons';
-import { listToClass, theme } from '@stack-spot/portal-theme';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { styled } from 'styled-components';
-const OPTION_HEIGHT = 32;
-const LIST_BOTTOM_PADDING = 7;
-const SelectBox = styled.div `
-  position: relative;
-
-  select {
-    border: none;
-    height: 40px;
-    opacity: 0;
-    pointer-events: none;
-  }
-  
-  .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;
-    z-index: 1;
-    background-color: ${theme.color.light[300]};
-
-    .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 {
-      .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: 40px;
-      display: flex;
-      flex-direction: row;
-      padding: 0 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;
-      max-height: ${({ $maxItems }) => $maxItems * OPTION_HEIGHT + LIST_BOTTOM_PADDING}px;
-
-      li {
-        height: ${OPTION_HEIGHT}px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 0 8px;
-        border-top: 1px solid ${theme.color.light[600]};
-        cursor: pointer;
-        transition: background-color 0.2s;
-        &:hover {
-          background-color: ${theme.color.light[500]};
-        }
-      }
-    }
-  }
-`;
-function renderProperty(option, renderer) {
-    if (!renderer)
-        return `${option ?? ''}`;
-    return typeof renderer === 'function' ? renderer(option) : (option[renderer] ?? `${option ?? ''}`);
-}
-const FakeOption = ({ value, label, onChange }) => (_jsx("li", { className: "option", onClick: () => onChange({ target: { value } }), children: _jsx(Text, { className: "clipped-text", children: label }) }));
-/**
- * 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.
- * @param props the component props: {@link SelectProps}.
- */
-export function Select({ onChange, options, value, emptyOption, renderLabel, renderValue, maxItems = 6, onFocus, onBlur, style, className, ...props }) {
-    const [open, setOpen] = useState(false);
-    const [focused, setFocused] = useState(false);
-    const fakeSelectRef = useRef(null);
-    const onChangeOption = useCallback((event) => {
-        const value = options.find(o => renderProperty(o, renderValue) === event.target.value);
-        onChange(value);
-        setOpen(false);
-    }, []);
-    const onClickOutside = useCallback((event) => {
-        if (fakeSelectRef.current && !fakeSelectRef.current.contains(event.target))
-            setOpen(false);
-    }, []);
-    const [htmlOptions, fakeOptions] = useMemo(() => options.reduce(([opts, fake], o) => {
-        const id = renderProperty(o, renderValue);
-        const label = renderProperty(o, renderLabel);
-        return [
-            [...opts, _jsx("option", { value: id, selected: value === id, children: label }, id)],
-            [...fake, _jsx(FakeOption, { value: id, label: label, onChange: onChangeOption }, id)],
-        ];
-    }, [[], []]), [options, value]);
-    const height = open ? (LIST_BOTTOM_PADDING + (options.length + (emptyOption === undefined ? 0 : 1)) * OPTION_HEIGHT) : 0;
-    function getCurrentValue() {
-        return value === undefined ? '' : renderProperty(value, renderValue);
-    }
-    function getCurrentLabel() {
-        return value === undefined ? (emptyOption ?? '') : renderProperty(value, renderLabel);
-    }
-    useEffect(() => {
-        const detach = () => document.removeEventListener('mousedown', onClickOutside);
-        if (open)
-            document.addEventListener('mousedown', onClickOutside);
-        else
-            detach();
-        return detach;
-    }, [open]);
-    return (_jsxs(SelectBox, { style: style, className: className, "$maxItems": maxItems, children: [_jsxs("select", { ...props, value: getCurrentValue(), onChange: onChangeOption, onFocus: (ev) => {
-                    setFocused(true);
-                    onFocus?.(ev);
-                }, onBlur: (ev) => {
-                    setFocused(false);
-                    onBlur?.(ev);
-                }, children: [emptyOption === undefined ? null : _jsx("option", { value: "", selected: !value, children: emptyOption }), htmlOptions] }), _jsxs("div", { ref: fakeSelectRef, className: listToClass(['fake-select', open && 'open', focused && 'focused']), "aria-hidden": true, children: [_jsxs("div", { className: "current-value", onClick: () => setOpen(!open), children: [_jsx(Text, { className: "clipped-text", children: getCurrentLabel() }), _jsx(IconBox, { className: "arrow", children: _jsx(ChevronDown, {}) })] }), _jsxs("ul", { className: "options", style: { height: `${height}px` }, children: [emptyOption === undefined ? null : _jsx(FakeOption, { value: "", label: emptyOption, onChange: onChangeOption }), fakeOptions] })] })] }));
-}
-//# sourceMappingURL=Select.js.map

package/dist/components/form/Select.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/form/Select.tsx"],"names":[],"mappings":"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"}

package/src/components/form/Select.tsx

@@ -1,265 +0,0 @@
-import { IconBox, Text } from '@citric/core'
-import { ChevronDown } from '@citric/icons'
-import { listToClass, theme } from '@stack-spot/portal-theme'
-import { InputHTMLAttributes, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { styled } from 'styled-components'
-
-interface BaseSelectProps<T> extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
-  /**
-   * The current value.
-   */
-  value: T | undefined,
-  /**
-   * The label for the empty option. This sets the value to undefined.
-   * 
-   * If this is not set, there won't be an empty option for this select.
-   */
-  emptyOption?: string,
-  /**
-   * The options to render in this selection menu.
-   */
-  options: T[],
-  /**
-   * 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 are not strings or numbers.
-   * 
-   * @example
-   * - `'id'`
-   * - `(option) => option.id`
-   */
-  renderValue?: keyof T | ((item: Exclude<T, undefined>) => 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 are not strings or numbers.
-   * 
-   * @example
-   * - `'name'`
-   * - `(option) => option.name`
-   */
-  renderLabel?: keyof T | ((item: Exclude<T, undefined>) => string),
-  /**
-   * Called when the value changes.
-   * @param value the new value.
-   */
-  onChange: (value: T | undefined) => void,
-  /**
-   * The maximum number of items before showing a vertical scroll bar.
-   * @default 6
-   */
-  maxItems?: number,
-}
-
-interface OptionalSelectProps<T> extends BaseSelectProps<T> {
-  emptyOption: string,
-}
-
-interface RequiredSelectProps<T> extends Omit<BaseSelectProps<T>, 'onChange'> {
-  emptyOption?: undefined,
-  value: T,
-  onChange: (value: T) => void,
-}
-
-type SelectProps<T> = OptionalSelectProps<T> | RequiredSelectProps<T>
-
-const OPTION_HEIGHT = 32
-const LIST_BOTTOM_PADDING = 7
-
-const SelectBox = styled.div<{ $maxItems: number }>`
-  position: relative;
-
-  select {
-    border: none;
-    height: 40px;
-    opacity: 0;
-    pointer-events: none;
-  }
-  
-  .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;
-    z-index: 1;
-    background-color: ${theme.color.light[300]};
-
-    .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 {
-      .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: 40px;
-      display: flex;
-      flex-direction: row;
-      padding: 0 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;
-      max-height: ${({ $maxItems }) => $maxItems * OPTION_HEIGHT + LIST_BOTTOM_PADDING}px;
-
-      li {
-        height: ${OPTION_HEIGHT}px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        padding: 0 8px;
-        border-top: 1px solid ${theme.color.light[600]};
-        cursor: pointer;
-        transition: background-color 0.2s;
-        &:hover {
-          background-color: ${theme.color.light[500]};
-        }
-      }
-    }
-  }
-`
-
-function renderProperty(option: any, renderer: any): string {
-  if (!renderer) return `${option ?? ''}`
-  return typeof renderer === 'function' ? renderer(option) : (option[renderer] ?? `${option ?? ''}`)
-}
-
-const FakeOption = (
-  { value, label, onChange }: { value: string, label: string, onChange: (event: { target: { value: string } }) => void },
-) => (
-  <li className="option" onClick={() => onChange({ target: { value } })}>
-    <Text className="clipped-text">{label}</Text>
-  </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.
- * @param props the component props: {@link SelectProps}.
- */
-export function Select<T>({
-  onChange, options, value, emptyOption, renderLabel, renderValue, maxItems = 6, onFocus, onBlur, style, className, ...props
-}: SelectProps<T>) {
-  const [open, setOpen] = useState(false)
-  const [focused, setFocused] = useState(false)
-  const fakeSelectRef = useRef<HTMLDivElement>(null)
-
-  const onChangeOption = useCallback((event: { target: { value: string } }) => {
-    const value = options.find(o => renderProperty(o, renderValue) === event.target.value)
-    onChange(value!)
-    setOpen(false)
-  }, [])
-
-  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 = renderProperty(o, renderValue)
-      const label = renderProperty(o, renderLabel)
-      return [
-        [...opts, <option key={id} value={id} selected={value === id}>{label}</option>],
-        [...fake, <FakeOption key={id} value={id} label={label} onChange={onChangeOption} />],
-      ]
-    }, [[], []]),
-    [options, value],
-  )
-
-  const height = open ? (LIST_BOTTOM_PADDING + (options.length + (emptyOption === undefined ? 0 : 1)) * OPTION_HEIGHT) : 0
-
-  function getCurrentValue() {
-    return value === undefined ? '' : renderProperty(value, renderValue)
-  }
-
-  function getCurrentLabel() {
-    return value === undefined ? (emptyOption ?? '') : renderProperty(value, renderLabel)
-  }
-
-  useEffect(() => {
-    const detach = () => document.removeEventListener('mousedown', onClickOutside)
-    if (open) document.addEventListener('mousedown', onClickOutside)
-    else detach()
-    return detach 
-  }, [open])
-
-  return (
-    <SelectBox style={style} className={className} $maxItems={maxItems}>
-      { /* 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)
-        }}
-      >
-        {emptyOption === undefined ? null : <option value="" selected={!value}>{emptyOption}</option>}
-        {htmlOptions}
-      </select>
-      <div ref={fakeSelectRef} className={listToClass(['fake-select', open && 'open', focused && 'focused'])} aria-hidden>
-        <div className="current-value" onClick={() => setOpen(!open)}>
-          <Text className="clipped-text">{getCurrentLabel()}</Text>
-          <IconBox className="arrow"><ChevronDown /></IconBox>
-        </div>
-        <ul className="options" style={{ height: `${height}px` }}>
-          {emptyOption === undefined ? null : <FakeOption value="" label={emptyOption} onChange={onChangeOption} />}
-          {fakeOptions}
-        </ul>
-      </div>
-    </SelectBox>
-  )
-}