@studiocms/ui 0.0.1

package/src/components/SearchSelect.astro

@@ -0,0 +1,430 @@
+---
+import Icon from '../utils/Icon.astro';
+import { generateID } from '../utils/generateID';
+import Input from './Input.astro';
+
+interface Option {
+	label: string;
+	value: string;
+	disabled?: boolean;
+};
+
+interface Props {
+	label?: string;
+	defaultValue?: string;
+	class?: string;
+	name?: string;
+	isRequired?: boolean;
+	options: Option[];
+	disabled?: boolean;
+	fullWidth?: boolean;
+};
+
+const {
+	label,
+	defaultValue,
+	class: className,
+	name = generateID('search-select'),
+	isRequired,
+	options = [],
+	disabled,
+	fullWidth,
+} = Astro.props;
+---
+
+<div
+    id={`${name}-container`}
+    class="search-select-label"
+    class:list={[disabled && "disabled", className, fullWidth && "full"]}
+>
+    <label class="label" for={`${name}-search-select-btn`}>
+        {label}
+        <span class="req-star">{isRequired && "*"}</span>
+    </label>
+    <div class="search-input-wrapper" id={`${name}-search-input-wrapper`}>
+        <Input
+            placeholder={options.find((x) => x.value === defaultValue)?.label || "Select"}
+        />
+        <Icon name="chevron-up-down" class="search-select-indicator" width={24} height={24} />
+    </div>
+    <ul class="search-select-dropdown" role="listbox" id={`${name}-dropdown`}>
+        {
+            options.map((x, i) => (
+                <li
+                    class="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="hidden-select" id={name} name={name} required={isRequired}>
+        <option value={""}> Select </option>
+        {
+            options.map((x) => (
+                <option
+                    value={x.value}
+                    selected={defaultValue === x.value}
+                    disabled={x.disabled}
+                >
+                    {x.label}
+                </option>
+            ))
+        }
+    </select>
+</div>
+<script is:inline define:vars={{ id: name, options, defaultValue }}>
+    const container = document.getElementById(`${id}-container`);
+    const hiddenSelect = document.getElementById(id);
+    const searchWrapper = document.getElementById(`${id}-search-input-wrapper`);
+    const searchInput = searchWrapper.querySelector('input');
+    const valueSpan = document.getElementById(`${id}-value-span`);
+    const dropdown = document.getElementById(`${id}-dropdown`);
+    let optionElements = container.querySelectorAll("li");
+
+    let active = false;
+
+    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) {
+            dropdown.classList.remove("active", "above");
+            active = false;
+            return;
+        }
+
+        active = 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, option) => {
+        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) {
+        const outsideClickListener = (event) => {
+            if (
+                !element.contains(event.target) &&
+                isVisible(element) &&
+                active === true
+            ) {
+                // or use: event.target.closest(selector) === null
+                dropdown.classList.remove("active", "above");
+                active = false;
+            }
+        };
+
+        const removeClickListener = () => {
+            document.removeEventListener("click", outsideClickListener);
+        };
+
+        document.addEventListener("click", outsideClickListener);
+    }
+
+    // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
+    const isVisible = (elem) =>
+        !!elem &&
+        !!(
+            elem.offsetWidth ||
+            elem.offsetHeight ||
+            elem.getClientRects().length
+        );
+
+    let focusIndex = 0;
+
+    const recomputeOptions = () => {
+        for (const entry of optionElements) {
+            if (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();
+
+            console.log(optionElements, focusIndex);
+
+            for (const entry of optionElements) {
+                if (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) {
+        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(...[
+                'search-select-option', 
+                option.disabled && "disabled",
+                focusIndex === i && 'focused',
+            ].filter(Boolean));
+            element.role = "option";
+            element.value = option.value;
+            element.id = "";
+            element.dataset.optionIndex = i;
+            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>
+    .search-select-label {
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+        min-width: 200px;
+        position: relative;
+    }
+
+    .search-select-label.full {
+        width: 100%;
+    }
+
+    .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;
+    }
+
+    .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);
+    }
+
+    .search-select-dropdown.above {
+        top: auto;
+        bottom: calc(100% - 18px + 0.25rem);
+    }
+
+    .search-select-option, .empty-search-results {
+        padding: 0.5rem;
+        cursor: pointer;
+        font-size: 0.975em;
+        transition: all 0.15s ease;
+    }
+
+    .search-select-option.disabled {
+        pointer-events: none;
+        color: hsl(var(--text-muted));
+    }
+
+    .search-select-option:hover, .search-select-option.focused {
+        background-color: hsl(var(--background-step-3));
+    }
+
+    .search-select-option.selected {
+        background-color: hsl(var(--primary-base));
+        color: hsl(var(--text-inverted));
+        cursor: default;
+    }
+
+    .hidden-select {
+        height: 0;
+        width: 0;
+        border: none;
+        outline: none;
+        position: absolute;
+        background-color: transparent;
+        pointer-events: none;
+        opacity: 0;
+    }
+
+    .search-input-wrapper {
+        width: 100%;
+        position: relative;
+        height: fit-content;
+        cursor: pointer;
+    }
+
+    .search-select-indicator {
+        position: absolute;
+        top: calc(65% + 1px);
+        transform: translateY(-65%);
+        right: .5rem;
+    }
+
+    .search-input-wrapper:has(input:focus) + .search-select-dropdown {
+        display: flex;
+    }
+
+    .search-select-dropdown.active, .search-select-dropdown:has(> li:active) {
+        display: flex;
+    }
+</style>