@studiocms/ui 0.3.2 → 0.4.1

package/src/components/SearchSelect.astro

@@ -1,486 +0,0 @@
----
-import Icon from '../utils/Icon.astro';
-import { generateID } from '../utils/generateID';
-import Input from './Input.astro';
-
-/**
- * An option in the select dropdown
- */
-interface Option {
-	/**
-	 * The label of the option.
-	 */
-	label: string;
-	/**
-	 * The value of the option.
-	 */
-	value: string;
-	/**
-	 * Whether the option is disabled.
-	 */
-	disabled?: boolean;
-}
-
-/**
- * The props for the search select component.
- */
-interface Props {
-	/**
-	 * The label of the search select.
-	 */
-	label?: string;
-	/**
-	 * The default value of the search select. Needs to be one of the values in the options.
-	 */
-	defaultValue?: string;
-	/**
-	 * Additional classes to apply to the search select.
-	 */
-	class?: string;
-	/**
-	 * The name of the search select.
-	 */
-	name?: string;
-	/**
-	 * Whether the search select is required. Defaults to `false`.
-	 */
-	isRequired?: boolean;
-	/**
-	 * The options to display in the search select.
-	 */
-	options: Option[];
-	/**
-	 * Whether the search select is disabled. Defaults to `false`.
-	 */
-	disabled?: boolean;
-	/**
-	 * Whether the search select should take up the full width of its container.
-	 */
-	fullWidth?: boolean;
-	/**
-	 * The placeholder of the search select.
-	 */
-	placeholder?: string;
-}
-
-const {
-	label,
-	defaultValue,
-	class: className,
-	name = generateID('search-select'),
-	isRequired,
-	options = [],
-	disabled,
-	fullWidth,
-	placeholder,
-} = Astro.props;
----
-
-<div
-    id={`${name}-container`}
-    class="sui-search-select-label"
-    class:list={[disabled && "disabled", className, fullWidth && "full"]}
-    data-options={JSON.stringify(options)}
-    data-id={name}
->
-    <div class="sui-search-input-wrapper" id={`${name}-search-input-wrapper`}>
-        <Input
-            placeholder={options.find((x) => x.value === defaultValue)?.label || (placeholder || "Select")}
-            role='combobox'
-            aria-controls={`${name}-dropdown`}
-            aria-expanded="false"
-            label={label || ''}
-            isRequired={isRequired || false}
-        />
-        <Icon name="chevron-up-down" class="sui-search-select-indicator" width={24} height={24} />
-    </div>
-    <ul class="sui-search-select-dropdown" role="listbox" id={`${name}-dropdown`}>
-        {
-            options.map((x, i) => (
-                <li
-                    class="sui-search-select-option"
-                    role="option"
-                    value={x.value}
-                    class:list={[
-                        x.disabled && "disabled",
-                        i === 0 && 'focused',
-                    ]}
-                    id={defaultValue === x.value ? `${name}-selected` : ""}
-                    data-option-index={i}
-                    data-value={x.value}
-                >
-                    {x.label}
-                </li>
-            ))
-        }
-    </ul>
-    <select class="sui-hidden-select" id={name} name={name} required={isRequired} hidden tabindex="-1">
-        <option value={""}> Select </option>
-        {
-            options.map((x) => (
-                <option
-                    value={x.value}
-                    selected={defaultValue === x.value}
-                    disabled={x.disabled}
-                >
-                    {x.label}
-                </option>
-            ))
-        }
-    </select>
-</div>
-<script>
-    interface Option {
-       label: string;
-       value: string;
-       disabled?: boolean;
-   }
-    // id: name, options, defaultValue
-    const searchSelects = document.querySelectorAll<HTMLDivElement>('.sui-search-select-label');
-
-    for (const container of searchSelects) {
-        const hiddenSelect = container.querySelector<HTMLSelectElement>('select')!;
-        const searchWrapper = container.querySelector<HTMLDivElement>(`.sui-search-input-wrapper`)!;
-        const searchInput = searchWrapper.querySelector('input')!;
-        const dropdown = container.querySelector(`.sui-search-select-dropdown`)!;
-        let optionElements = container.querySelectorAll("li");
-
-        let active = false;
-
-        const options = JSON.parse(container.dataset.options!) as Option[];
-        const id = container.dataset.id!;
-        let filteredOptions = options;
-
-        searchWrapper.addEventListener("click", () => {
-            const { bottom, left, right, width, x, y, height } = searchWrapper.getBoundingClientRect();
-
-            const optionHeight = 36;
-            const totalBorderSize = 2;
-            const margin = 4;
-
-            const dropdownHeight = options.length * optionHeight + totalBorderSize + margin;
-
-            const CustomRect = {
-                top: bottom + margin,
-                left,
-                right,
-                bottom: bottom + margin + dropdownHeight,
-                width,
-                height: dropdownHeight,
-                x,
-                y: y + height + margin,
-            };
-
-            if (active) {
-                searchInput.ariaExpanded = 'false';
-                dropdown.classList.remove("active", "above");
-                active = false;
-                return;
-            }
-
-            active = true;
-            searchInput.ariaExpanded = 'true';
-
-            if (
-                CustomRect.top >= 0 &&
-                CustomRect.left >= 0 &&
-                CustomRect.bottom <=
-                    (window.innerHeight || document.documentElement.clientHeight) &&
-                CustomRect.right <=
-                    (window.innerWidth || document.documentElement.clientWidth)
-            ) {
-                dropdown.classList.add("active");
-            } else {
-                dropdown.classList.add("active", "above");
-            }
-        });
-
-        const handleSelection = (e: MouseEvent, option: HTMLLIElement) => {
-            e.stopImmediatePropagation();
-            
-            if (option.id === `${id}-selected` || !id) return;
-
-            const currentlySelected = document.getElementById(`${id}-selected`);
-
-            if (currentlySelected) {
-                currentlySelected.classList.remove("selected");
-                currentlySelected.id = "";
-            }
-
-            option.id = `${id}-selected`;
-            option.classList.add("selected");
-
-            const index = options.findIndex((x) => x.value === option.dataset.value);
-            focusIndex = index;
-
-            const opt = options[index]!;
-            hiddenSelect.value = opt.value;
-
-            searchInput.placeholder = opt.label;
-            dropdown.classList.remove("active", "above");
-            // searchInput.blur();
-
-            searchInput.value = "";
-            filteredOptions = options;
-            constructOptionsBasedOnOptions(options);
-
-            active = false;
-        }
-
-        optionElements.forEach((option) => {
-            option.addEventListener("click", (e) => handleSelection(e, option));
-        });
-
-        window.addEventListener("scroll", () => {
-            dropdown.classList.remove("active", "above");
-            active = false;
-        });
-
-        hideOnClickOutside(container);
-
-        function hideOnClickOutside(element: HTMLElement) {
-            const outsideClickListener = (event: MouseEvent) => {
-                if (
-                    !element.contains(event.target! as Element) &&
-                    isVisible(element) &&
-                    active === true
-                ) {
-                    // or use: event.target.closest(selector) === null
-                    dropdown.classList.remove("active", "above");
-                    active = false;
-                }
-            };
-
-            document.addEventListener("click", outsideClickListener);
-        }
-
-        // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
-        const isVisible = (elem: HTMLElement) =>
-            !!elem &&
-            !!(
-                elem.offsetWidth ||
-                elem.offsetHeight ||
-                elem.getClientRects().length
-            );
-
-        let focusIndex = 0;
-
-        const recomputeOptions = () => {
-            for (const entry of optionElements) {
-                if (Number.parseInt(entry.dataset.optionIndex!) == focusIndex) {
-                    entry.classList.add('focused');
-                } else {
-                    entry.classList.remove('focused');
-                }
-            }
-        }
-
-        searchInput.addEventListener('keydown', (e) => {
-            if (e.key === "Escape") {
-                e.preventDefault();
-                e.stopImmediatePropagation();
-
-                active = false;
-                dropdown.classList.remove("active", "above");
-                searchInput.blur();
-                
-                return;
-            }
-
-            if (e.key === "ArrowUp" && focusIndex > 0) {
-                e.preventDefault();
-                e.stopImmediatePropagation();
-
-                focusIndex--;
-                recomputeOptions();
-
-                return;
-            }
-
-            if (e.key === "ArrowDown" && focusIndex + 1 < filteredOptions.filter(x => !x.disabled).length) {
-                e.preventDefault();
-                e.stopImmediatePropagation();
-
-                focusIndex++;
-                recomputeOptions();
-
-                return;
-            }
-
-            if (e.key === "Enter") {
-                e.preventDefault();
-                e.stopImmediatePropagation();
-
-                for (const entry of optionElements) {
-                    if (Number.parseInt(entry.dataset.optionIndex!) === focusIndex) {
-                        entry.click();
-                    }
-                }
-
-                return;
-            }
-        });
-
-        searchInput.addEventListener('keyup', (e) => {
-            if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
-
-            if (searchInput.value.trim().length === 0) {
-                constructOptionsBasedOnOptions(options);
-                filteredOptions = options;
-                return;
-            };
-
-            filteredOptions = options.filter(x => x.label.includes(searchInput.value));
-            focusIndex = 0;
-
-            constructOptionsBasedOnOptions(filteredOptions);
-        });
-
-        function constructOptionsBasedOnOptions(options: Option[]) {
-            dropdown.innerHTML = '';
-
-            if (options.length === 0) {
-                const element = document.createElement('li');
-                element.classList.add('empty-search-results');
-                element.textContent = "No results found.";
-
-                dropdown.appendChild(element);
-            }
-
-            let i = 0;
-
-            for (const option of options) {
-                const element = document.createElement('li');
-                element.classList.add(...[
-                    'sui-search-select-option', 
-                    option.disabled && "disabled",
-                    focusIndex === i && 'focused',
-                ].filter((x) => typeof x === 'string'));
-                element.role = "option";
-                element.value = Number.parseInt(option.value);
-                element.id = "";
-                element.dataset.optionIndex = i.toString();
-                element.dataset.value = option.value;
-                element.textContent = option.label;
-
-                element.addEventListener("click", (e) => handleSelection(e, element));
-
-                dropdown.appendChild(element);
-
-                i++;
-            }
-
-            optionElements = container.querySelectorAll("li");
-        }
-    }
-</script>
-<style is:global>
-    .sui-search-select-label {
-        width: fit-content;
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-        min-width: 200px;
-        position: relative;
-    }
-
-    .sui-search-select-label.full {
-        width: 100%;
-    }
-
-    .sui-search-select-label.disabled {
-        opacity: 0.5;
-        pointer-events: none;
-        color: hsl(var(--text-muted));
-    }
-
-    .label {
-        font-size: 14px;
-    }
-
-    .req-star {
-        color: hsl(var(--danger-base));
-        font-weight: 700;
-    }
-
-    .sui-search-select-dropdown {
-        position: absolute;
-        width: 100%;
-        border: 1px solid hsl(var(--border));
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        flex-direction: column;
-        border-radius: 0.5rem;
-        background-color: hsl(var(--background-step-2));
-        overflow: hidden;
-        top: calc(100% + 0.25rem);
-        left: 0;
-        display: none;
-        z-index: 90;
-        box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
-    }
-
-    .sui-search-select-dropdown.above {
-        top: auto;
-        bottom: calc(100% - 18px + 0.25rem);
-    }
-
-    .sui-search-select-option, .empty-search-results {
-        padding: 0.5rem;
-        cursor: pointer;
-        font-size: 0.975em;
-        transition: all 0.15s ease;
-    }
-
-    .sui-search-select-option.disabled {
-        pointer-events: none;
-        color: hsl(var(--text-muted));
-    }
-
-    .sui-search-select-option:hover, .sui-search-select-option.focused {
-        background-color: hsl(var(--background-step-3));
-    }
-
-    .sui-search-select-option.selected {
-        background-color: hsl(var(--primary-base));
-        color: hsl(var(--text-inverted));
-        cursor: default;
-    }
-
-    .sui-hidden-select {
-        height: 0;
-        width: 0;
-        border: none;
-        outline: none;
-        position: absolute;
-        background-color: transparent;
-        pointer-events: none;
-        opacity: 0;
-    }
-
-    .sui-search-input-wrapper {
-        width: 100%;
-        position: relative;
-        height: fit-content;
-        cursor: pointer;
-    }
-
-    .sui-search-input-wrapper input {
-        padding-right: 2.5rem;
-    }
-
-    .sui-search-select-indicator {
-        position: absolute;
-        bottom: .675rem;
-        right: .675rem;
-    }
-
-    .sui-search-input-wrapper:has(input:focus) + .sui-search-select-dropdown {
-        display: flex;
-    }
-
-    .sui-search-select-dropdown.active, .sui-search-select-dropdown:has(> li:active) {
-        display: flex;
-    }
-</style>