draft-components 3.2.1 → 3.3.0

package/css/draft-components.css

@@ -2056,6 +2056,168 @@
   color-scheme: dark;
 }
 
+.dc-search-select {
+  --dc-search-select-font-size: 14px;
+  --dc-search-select-text-color: var(--dc-control-primary-text-color);
+  --dc-search-select-height: 36px;
+  --dc-search-select-padding-x: 12px;
+  --dc-search-select-radius: 7px;
+  --dc-search-select-border-color: var(--dc-control-border-color);
+  --dc-search-select-border-color-error: var(--dc-control-error-color);
+  --dc-search-select-bg: var(--dc-control-bg);
+  --dc-search-select-focus-ring-color: var(--dc-control-primary-color);
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: var(--dc-search-select-height);
+  padding: 0 var(--dc-search-select-padding-x);
+  padding-right: calc(var(--dc-search-select-height) + 0.15em);
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-search-select-font-size);
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--dc-search-select-text-color);
+  vertical-align: middle;
+  color-scheme: light;
+  background: var(--dc-search-select-bg);
+  border: 1px solid var(--dc-search-select-border-color);
+  border-radius: var(--dc-search-select-radius);
+}
+
+.dc-search-select:focus {
+  border-color: var(--dc-search-select-focus-ring-color);
+  box-shadow: 0 0 0 1px var(--dc-search-select-focus-ring-color);
+}
+
+.dc-search-select_loading,
+.dc-search-select_disabled {
+  pointer-events: none;
+}
+
+.dc-search-select_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-search-select_invalid {
+  border-color: var(--dc-search-select-border-color-error);
+}
+
+.dc-search-select_full-width {
+  display: flex;
+  width: 100%;
+}
+
+.dc-search-select_size_sm {
+  --dc-search-select-font-size: 13px;
+  --dc-search-select-height: 32px;
+  --dc-search-select-padding-x: 8px;
+  --dc-search-select-radius: 6px;
+}
+
+.dc-search-select_size_lg {
+  --dc-search-select-font-size: 15px;
+  --dc-search-select-height: 40px;
+  --dc-search-select-padding-x: 16px;
+  --dc-search-select-radius: 8px;
+}
+
+.dc-search-select__slot-left {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-search-select-height);
+  height: var(--dc-search-select-height);
+  pointer-events: none;
+}
+
+.dc-search-select__arrow {
+  transform: translateY(5%);
+}
+
+.dc-search-select__popover {
+  padding: 0;
+  padding-bottom: 8px;
+  border-radius: 8px;
+}
+
+.dc-search-select__textbox {
+  padding: 8px;
+}
+
+.dc-search-select__listbox {
+  max-height: 352px;
+  padding: 0 8px;
+  margin: 0;
+  overflow-y: auto;
+  list-style: none;
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.dc-search-select__option {
+  padding: 4px;
+  font-size: 14px;
+  color: inherit;
+  cursor: default;
+  border-radius: 4px;
+}
+
+.dc-search-select__option_highlighted {
+  color: var(--dc-control-primary-text-color);
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select__option_selected {
+  color: var(--dc-control-on-primary-color);
+  background: var(--dc-control-primary-color);
+}
+
+.dc-search-select__listbox > .dc-search-select__option + .dc-search-select__option {
+  margin-top: 2px;
+}
+
+.dc-search-select__separator {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.dc-search-select__separator::before,
+.dc-search-select__separator::after {
+  display: block;
+  height: 1px;
+  content: '';
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select__separator::before {
+  flex-shrink: 0;
+  width: 12px;
+}
+
+.dc-search-select__separator::after {
+  flex-grow: 1;
+}
+
+.dc-search-select__separator-label {
+  padding: 0 8px;
+  font-size: 12px;
+  color: var(--dc-control-secondary-text-color);
+}
+
+.dark .dc-search-select,
+.dark.dc-search-select {
+  color-scheme: dark;
+}
+
 .dc-switch {
   --dc-switch-width: 38px;
   --dc-switch-height: 24px;

package/dist/components/index.d.ts

@@ -24,6 +24,7 @@ export * from './popover/index.js';
 export * from './portal/index.js';
 export * from './positioner/index.js';
 export * from './radio/index.js';
+export * from './search-select/index.js';
 export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './selection-control/index.js';

package/dist/components/index.js

@@ -24,6 +24,7 @@ export * from './popover/index.js';
 export * from './portal/index.js';
 export * from './positioner/index.js';
 export * from './radio/index.js';
+export * from './search-select/index.js';
 export * from './segmented-control/index.js';
 export * from './select/index.js';
 export * from './selection-control/index.js';

package/dist/components/search-select/context.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export declare class OptionStore<T> {
+    private _map;
+    readonly idPrefix: string;
+    constructor(idPrefix?: string);
+    private _generateId;
+    get ids(): string[];
+    get values(): T[];
+    idOf(value: T): string | undefined;
+    append(value: T): string;
+    clear(): void;
+}
+export type SearchSelectContext<T> = {
+    options: OptionStore<T>;
+    selectedValue: T;
+    highlightedValue: T;
+    setSelectedValue: (value: T) => void;
+    setHighlightedValue: (value: T) => void;
+};
+export declare function useSearchSelectContext(): SearchSelectContext<any>;
+export declare function SearchSelectContextProvider<T>({ value, children, }: {
+    value: SearchSelectContext<T>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/search-select/context.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+export class OptionStore {
+    _map;
+    idPrefix;
+    constructor(idPrefix = '') {
+        this._map = new Map();
+        this.idPrefix = idPrefix;
+    }
+    _generateId() {
+        const count = this._map.size;
+        return `${this.idPrefix}${count + 1}`;
+    }
+    get ids() {
+        return Array.from(this._map.values());
+    }
+    get values() {
+        return Array.from(this._map.keys());
+    }
+    idOf(value) {
+        return this._map.get(value);
+    }
+    append(value) {
+        let id = this._map.get(value);
+        if (id) {
+            return id;
+        }
+        id = this._generateId();
+        this._map.set(value, id);
+        return id;
+    }
+    clear() {
+        this._map.clear();
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const searchSelectContext = createContext(null);
+export function useSearchSelectContext() {
+    const ctx = useContext(searchSelectContext);
+    if (ctx === null) {
+        throw new Error('useSearchSelectContext must be used within SearchSelectContextProvider');
+    }
+    return ctx;
+}
+export function SearchSelectContextProvider({ value, children, }) {
+    return (_jsx(searchSelectContext.Provider, { value: value, children: children }));
+}

package/dist/components/search-select/icons.d.ts

@@ -0,0 +1,3 @@
+import { ComponentPropsWithoutRef } from 'react';
+export declare function MagnifyingGlass({ width, height, ...props }: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
+export declare function ChevronDown({ width, height, ...props }: ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/search-select/icons.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function MagnifyingGlass({ width = 24, height = 24, ...props }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: width, height: height, strokeWidth: 1.5, stroke: "currentColor", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" }) }));
+}
+export function ChevronDown({ width = 24, height = 24, ...props }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: width, height: height, strokeWidth: 1.5, stroke: "currentColor", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m19.5 8.25-7.5 7.5-7.5-7.5" }) }));
+}

package/dist/components/search-select/index.d.ts

@@ -0,0 +1 @@
+export * from './search-select.js';

package/dist/components/search-select/index.js

@@ -0,0 +1 @@
+export * from './search-select.js';

package/dist/components/search-select/search-select.css

@@ -0,0 +1,161 @@
+.dc-search-select {
+  --dc-search-select-font-size: 14px;
+  --dc-search-select-text-color: var(--dc-control-primary-text-color);
+  --dc-search-select-height: 36px;
+  --dc-search-select-padding-x: 12px;
+  --dc-search-select-radius: 7px;
+  --dc-search-select-border-color: var(--dc-control-border-color);
+  --dc-search-select-border-color-error: var(--dc-control-error-color);
+  --dc-search-select-bg: var(--dc-control-bg);
+  --dc-search-select-focus-ring-color: var(--dc-control-primary-color);
+
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: var(--dc-search-select-height);
+  padding: 0 var(--dc-search-select-padding-x);
+  padding-right: calc(var(--dc-search-select-height) + 0.15em);
+  font-family: var(--dc-primary-font);
+  font-size: var(--dc-search-select-font-size);
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--dc-search-select-text-color);
+  vertical-align: middle;
+  color-scheme: light;
+  background: var(--dc-search-select-bg);
+  border: 1px solid var(--dc-search-select-border-color);
+  border-radius: var(--dc-search-select-radius);
+}
+
+.dc-search-select:focus {
+  border-color: var(--dc-search-select-focus-ring-color);
+  box-shadow: 0 0 0 1px var(--dc-search-select-focus-ring-color);
+}
+
+.dc-search-select_loading,
+.dc-search-select_disabled {
+  pointer-events: none;
+}
+
+.dc-search-select_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-search-select_invalid {
+  border-color: var(--dc-search-select-border-color-error);
+}
+
+.dc-search-select_full-width {
+  display: flex;
+  width: 100%;
+}
+
+.dc-search-select_size_sm {
+  --dc-search-select-font-size: 13px;
+  --dc-search-select-height: 32px;
+  --dc-search-select-padding-x: 8px;
+  --dc-search-select-radius: 6px;
+}
+
+.dc-search-select_size_lg {
+  --dc-search-select-font-size: 15px;
+  --dc-search-select-height: 40px;
+  --dc-search-select-padding-x: 16px;
+  --dc-search-select-radius: 8px;
+}
+
+.dc-search-select__slot-left {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-search-select-height);
+  height: var(--dc-search-select-height);
+  pointer-events: none;
+}
+
+.dc-search-select__arrow {
+  transform: translateY(5%);
+}
+
+.dc-search-select__popover {
+  padding: 0;
+  padding-bottom: 8px;
+  border-radius: 8px;
+}
+
+.dc-search-select__textbox {
+  padding: 8px;
+}
+
+.dc-search-select__listbox {
+  max-height: 352px;
+  padding: 0 8px;
+  margin: 0;
+  overflow-y: auto;
+  list-style: none;
+  border-bottom-right-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+
+.dc-search-select__option {
+  padding: 4px;
+  font-size: 14px;
+  color: inherit;
+  cursor: default;
+  border-radius: 4px;
+}
+
+.dc-search-select__option_highlighted {
+  color: var(--dc-control-primary-text-color);
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select__option_selected {
+  color: var(--dc-control-on-primary-color);
+  background: var(--dc-control-primary-color);
+}
+
+.dc-search-select__listbox > .dc-search-select__option + .dc-search-select__option {
+  margin-top: 2px;
+}
+
+.dc-search-select__separator {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 8px 0;
+}
+
+.dc-search-select__separator::before,
+.dc-search-select__separator::after {
+  display: block;
+  height: 1px;
+  content: '';
+  background: var(--dc-control-bg-inset);
+}
+
+.dc-search-select__separator::before {
+  flex-shrink: 0;
+  width: 12px;
+}
+
+.dc-search-select__separator::after {
+  flex-grow: 1;
+}
+
+.dc-search-select__separator-label {
+  padding: 0 8px;
+  font-size: 12px;
+  color: var(--dc-control-secondary-text-color);
+}
+
+.dark .dc-search-select,
+.dark.dc-search-select {
+  color-scheme: dark;
+}

package/dist/components/search-select/search-select.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+type RenderLabelFn<Value> = (value: Value) => ReactNode;
+type RenderOptionsFn = (props: {
+    searchQuery: string;
+    searchQueryLowercased: string;
+}) => ReactNode;
+export type SearchSelectSize = 'sm' | 'md' | 'lg';
+export type SearchSelectProps<Value> = {
+    className?: string;
+    size?: SearchSelectSize;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    textboxIcon?: ReactNode;
+    textboxAriaLabel?: string;
+    textboxPlaceholder?: string;
+    labelledBy?: string;
+    displayedValue?: ReactNode | RenderLabelFn<Value>;
+    children?: ReactNode | RenderOptionsFn;
+    value: Value;
+    onChange: (value: Value) => void;
+};
+export declare function SearchSelect<Value>({ className, size, fullWidth, invalid, loading, disabled, textboxIcon, textboxAriaLabel, textboxPlaceholder, labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }: SearchSelectProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SearchSelect {
+    var Option: <T>({ className, value, children, }: {
+        className?: string | undefined;
+        value: T;
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Separator: ({ className, children, }: {
+        className?: string | undefined;
+        children?: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/search-select/search-select.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState, useEffect, } from 'react';
+import { useSearchSelectContext, SearchSelectContextProvider, OptionStore, } from './context.js';
+import { classNames } from '../../lib/react-helpers.js';
+import { Popover } from '../popover/popover.js';
+import { TextInput } from '../text-input/text-input.js';
+import { Spinner } from '../spinner/spinner.js';
+import { ChevronDown, MagnifyingGlass } from './icons.js';
+export function SearchSelect({ className, size = 'md', fullWidth, invalid, loading, disabled, textboxIcon, textboxAriaLabel, textboxPlaceholder = '', labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }) {
+    const id = useId();
+    const buttonId = `${id}button`;
+    const textboxId = `${id}textbox`;
+    const listboxId = `${id}listbox`;
+    const [options] = useState(() => new OptionStore(`${id}option-`));
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [highlightedValue, setHighlightedValue] = useState(selectedValue);
+    const openPopover = () => {
+        if (disabled || loading) {
+            return;
+        }
+        options.clear();
+        setSearchQuery('');
+        setHighlightedValue(selectedValue);
+        setIsOpen(true);
+        window.setTimeout(() => {
+            const textbox = window.document.getElementById(textboxId);
+            if (textbox) {
+                textbox.focus();
+            }
+        });
+    };
+    const closePopover = () => {
+        setIsOpen(false);
+        window.setTimeout(() => {
+            const button = window.document.getElementById(buttonId);
+            if (button) {
+                button.focus();
+            }
+        });
+    };
+    const setSelectedValue = (value) => {
+        onSelectedValueChange(value);
+        closePopover();
+    };
+    const handleButtonClick = () => {
+        if (isOpen) {
+            closePopover();
+        }
+        else {
+            openPopover();
+        }
+    };
+    const handleButtonKeyDown = (event) => {
+        let handled = false;
+        if (event.key === 'ArrowUp') {
+            handled = true;
+            openPopover();
+        }
+        else if (event.key === 'ArrowDown') {
+            handled = true;
+            openPopover();
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    const handleTextboxChange = (event) => {
+        options.clear();
+        setSearchQuery(event.target.value);
+    };
+    const handleTextboxKeyDown = (event) => {
+        let handled = false;
+        if (event.key === 'ArrowUp') {
+            handled = true;
+            const values = options.values;
+            const index = values.indexOf(highlightedValue) - 1;
+            setHighlightedValue(index >= 0
+                ? values[index]
+                : values[values.length - 1]);
+        }
+        if (event.key === 'ArrowDown') {
+            handled = true;
+            const values = options.values;
+            const index = values.indexOf(highlightedValue) + 1;
+            setHighlightedValue(index < values.length
+                ? values[index]
+                : values[0]);
+        }
+        if (event.key === 'Home') {
+            handled = true;
+            const values = options.values;
+            setHighlightedValue(values[0]);
+        }
+        if (event.key === 'End') {
+            handled = true;
+            const values = options.values;
+            setHighlightedValue(values[values.length - 1]);
+        }
+        if (event.key === 'Enter') {
+            handled = true;
+            setSelectedValue(highlightedValue);
+        }
+        if (handled) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    useEffect(() => {
+        const optionId = options.idOf(highlightedValue);
+        if (!optionId) {
+            return;
+        }
+        const listbox = window.document.getElementById(listboxId);
+        const option = window.document.getElementById(optionId);
+        if (!listbox || !option) {
+            return;
+        }
+        const listboxRect = listbox.getBoundingClientRect();
+        const optionRect = option.getBoundingClientRect();
+        if (optionRect.top < listboxRect.top) {
+            listbox.scrollTo({
+                top: optionRect.top - listboxRect.top + listbox.scrollTop,
+            });
+        }
+        else if (optionRect.bottom > listboxRect.bottom) {
+            listbox.scrollTo({
+                top: optionRect.bottom - listboxRect.bottom + listbox.scrollTop,
+            });
+        }
+    }, [listboxId, options, highlightedValue]);
+    const ctx = {
+        options: options,
+        selectedValue,
+        highlightedValue,
+        setSelectedValue: setSelectedValue,
+        setHighlightedValue: setHighlightedValue,
+    };
+    return (_jsx(Popover, { className: "dc-search-select__popover", isOpen: isOpen, onClose: closePopover, anchor: (_jsxs("button", { className: classNames(className, {
+                'dc-search-select': true,
+                'dc-search-select_full-width': fullWidth,
+                'dc-search-select_invalid': invalid,
+                'dc-search-select_loading': loading,
+                'dc-search-select_disabled': disabled,
+                [`dc-search-select_size_${size}`]: size,
+            }), id: buttonId, "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": labelledBy, tabIndex: disabled || loading ? -1 : undefined, type: "button", onClick: handleButtonClick, onKeyDown: handleButtonKeyDown, children: [typeof displayedValue === 'function'
+                    ? displayedValue(selectedValue)
+                    : displayedValue, _jsx("span", { className: "dc-search-select__slot-left", children: loading
+                        ? (_jsx(Spinner, { className: "dc-search-select__spinner", width: "1.05em", height: "1.05em" }))
+                        : (_jsx(ChevronDown, { className: "dc-search-select__arrow", width: "1.05em", height: "1.05em", strokeWidth: 2 })) })] })), alignment: "start", placement: "bottom", children: _jsxs(_Fragment, { children: [_jsx("div", { className: "dc-search-select__textbox", children: _jsx(TextInput, { id: textboxId, fullWidth: true, slotLeft: textboxIcon || _jsx(MagnifyingGlass, { width: 16, height: 16 }), placeholder: textboxPlaceholder, size: "sm", type: "text", role: "combobox", "aria-controls": listboxId, "aria-expanded": "true", "aria-autocomplete": "list", "aria-activedescendant": options.idOf(highlightedValue), "aria-label": textboxAriaLabel, value: searchQuery, onChange: handleTextboxChange, onKeyDown: handleTextboxKeyDown }) }), _jsx(SearchSelectContextProvider, { value: ctx, children: _jsx("ul", { className: "dc-search-select__listbox", id: listboxId, role: "listbox", children: typeof children === 'function'
+                            ? children({
+                                searchQuery,
+                                searchQueryLowercased: searchQuery.toLowerCase(),
+                            })
+                            : children }) })] }) }));
+}
+SearchSelect.Option = function SearchSelectOption({ className, value, children, }) {
+    const { options, selectedValue, highlightedValue, setSelectedValue, setHighlightedValue, } = useSearchSelectContext();
+    const id = options.append(value);
+    const selected = value === selectedValue;
+    const highlighted = value === highlightedValue;
+    return (
+    /* eslint-disable jsx-a11y/click-events-have-key-events */
+    _jsx("li", { className: classNames(className, {
+            'dc-search-select__option': true,
+            'dc-search-select__option_selected': selected,
+            'dc-search-select__option_highlighted': highlighted,
+        }), id: id, role: "option", "aria-selected": highlighted, onClick: () => setSelectedValue(value), onMouseEnter: () => setHighlightedValue(value), children: children }));
+};
+SearchSelect.Separator = function SearchSelectSeparator({ className, children, }) {
+    return (_jsx("li", { className: classNames('dc-search-select__separator', className), role: "separator", children: children
+            ? _jsx("div", { className: "dc-search-select__separator-label", children: children })
+            : null }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {