@studiocms/ui 0.0.1 → 0.3.0

package/src/components/SearchSelect.astro

@@ -3,22 +3,65 @@ 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,
@@ -29,29 +72,33 @@ const {
 	options = [],
 	disabled,
 	fullWidth,
+	placeholder,
 } = Astro.props;
 ---
 
 <div
     id={`${name}-container`}
-    class="search-select-label"
+    class="sui-search-select-label"
     class:list={[disabled && "disabled", className, fullWidth && "full"]}
+    data-options={JSON.stringify(options)}
+    data-id={name}
 >
-    <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`}>
+    <div class="sui-search-input-wrapper" id={`${name}-search-input-wrapper`}>
         <Input
-            placeholder={options.find((x) => x.value === defaultValue)?.label || "Select"}
+            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="search-select-indicator" width={24} height={24} />
+        <Icon name="chevron-up-down" class="sui-search-select-indicator" width={24} height={24} />
     </div>
-    <ul class="search-select-dropdown" role="listbox" id={`${name}-dropdown`}>
+    <ul class="sui-search-select-dropdown" role="listbox" id={`${name}-dropdown`}>
         {
             options.map((x, i) => (
                 <li
-                    class="search-select-option"
+                    class="sui-search-select-option"
                     role="option"
                     value={x.value}
                     class:list={[
@@ -67,7 +114,7 @@ const {
             ))
         }
     </ul>
-    <select class="hidden-select" id={name} name={name} required={isRequired}>
+    <select class="sui-hidden-select" id={name} name={name} required={isRequired} hidden tabindex="-1">
         <option value={""}> Select </option>
         {
             options.map((x) => (
@@ -82,247 +129,253 @@ const {
         }
     </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;
-        }
+<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;
-
-        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");
-        }
-    });
+            active = true;
+            searchInput.ariaExpanded = 'true';
 
-    const handleSelection = (e, option) => {
-        e.stopImmediatePropagation();
-        
-        if (option.id === `${id}-selected` || !id) return;
+            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 currentlySelected = document.getElementById(`${id}-selected`);
+        const handleSelection = (e: MouseEvent, option: HTMLLIElement) => {
+            e.stopImmediatePropagation();
+            
+            if (option.id === `${id}-selected` || !id) return;
 
-        if (currentlySelected) {
-            currentlySelected.classList.remove("selected");
-            currentlySelected.id = "";
-        }
+            const currentlySelected = document.getElementById(`${id}-selected`);
 
-        option.id = `${id}-selected`;
-        option.classList.add("selected");
+            if (currentlySelected) {
+                currentlySelected.classList.remove("selected");
+                currentlySelected.id = "";
+            }
 
-        const index = options.findIndex((x) => x.value === option.dataset.value);
-        focusIndex = index;
+            option.id = `${id}-selected`;
+            option.classList.add("selected");
 
-        const opt = options[index];
-        hiddenSelect.value = opt.value;
+            const index = options.findIndex((x) => x.value === option.dataset.value);
+            focusIndex = index;
 
-        searchInput.placeholder = opt.label;
-        dropdown.classList.remove("active", "above");
-        searchInput.blur();
+            const opt = options[index]!;
+            hiddenSelect.value = opt.value;
 
-        searchInput.value = "";
-        filteredOptions = options;
-        constructOptionsBasedOnOptions(options);
+            searchInput.placeholder = opt.label;
+            dropdown.classList.remove("active", "above");
+            // searchInput.blur();
 
-        active = false;
-    }
+            searchInput.value = "";
+            filteredOptions = options;
+            constructOptionsBasedOnOptions(options);
 
-    optionElements.forEach((option) => {
-        option.addEventListener("click", (e) => handleSelection(e, option));
-    });
+            active = false;
+        }
 
-    window.addEventListener("scroll", () => {
-        dropdown.classList.remove("active", "above");
-        active = false;
-    });
+        optionElements.forEach((option) => {
+            option.addEventListener("click", (e) => handleSelection(e, option));
+        });
 
-    hideOnClickOutside(container);
+        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;
+                }
+            };
 
-    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;
-            }
-        };
+            document.addEventListener("click", outsideClickListener);
+        }
 
-        const removeClickListener = () => {
-            document.removeEventListener("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
+            );
 
-        document.addEventListener("click", outsideClickListener);
-    }
+        let focusIndex = 0;
 
-    // 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');
+        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;
-        }
+        searchInput.addEventListener('keydown', (e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                e.stopImmediatePropagation();
 
-        if (e.key === "ArrowUp" && focusIndex > 0) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
+                active = false;
+                dropdown.classList.remove("active", "above");
+                searchInput.blur();
+                
+                return;
+            }
 
-            focusIndex--;
-            recomputeOptions();
+            if (e.key === "ArrowUp" && focusIndex > 0) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
 
-            return;
-        }
+                focusIndex--;
+                recomputeOptions();
 
-        if (e.key === "ArrowDown" && focusIndex + 1 < filteredOptions.filter(x => !x.disabled).length) {
-            e.preventDefault();
-            e.stopImmediatePropagation();
+                return;
+            }
 
-            focusIndex++;
-            recomputeOptions();
+            if (e.key === "ArrowDown" && focusIndex + 1 < filteredOptions.filter(x => !x.disabled).length) {
+                e.preventDefault();
+                e.stopImmediatePropagation();
 
-            return;
-        }
+                focusIndex++;
+                recomputeOptions();
 
-        if (e.key === "Enter") {
-            e.preventDefault();
-            e.stopImmediatePropagation();
+                return;
+            }
 
-            console.log(optionElements, focusIndex);
+            if (e.key === "Enter") {
+                e.preventDefault();
+                e.stopImmediatePropagation();
 
-            for (const entry of optionElements) {
-                if (entry.dataset.optionIndex == focusIndex) {
-                    entry.click();
+                for (const entry of optionElements) {
+                    if (Number.parseInt(entry.dataset.optionIndex!) === focusIndex) {
+                        entry.click();
+                    }
                 }
+
+                return;
             }
+        });
 
-            return;
-        }
-    });
+        searchInput.addEventListener('keyup', (e) => {
+            if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
 
-    searchInput.addEventListener('keyup', (e) => {
-        if (["Enter", "ArrowUp", "ArrowDown"].includes(e.key)) return;
+            if (searchInput.value.trim().length === 0) {
+                constructOptionsBasedOnOptions(options);
+                filteredOptions = options;
+                return;
+            };
 
-        if (searchInput.value.trim().length === 0) {
-            constructOptionsBasedOnOptions(options);
-            filteredOptions = options;
-            return;
-        };
+            filteredOptions = options.filter(x => x.label.includes(searchInput.value));
+            focusIndex = 0;
 
-        filteredOptions = options.filter(x => x.label.includes(searchInput.value));
-        focusIndex = 0;
+            constructOptionsBasedOnOptions(filteredOptions);
+        });
 
-        constructOptionsBasedOnOptions(filteredOptions);
-    });
+        function constructOptionsBasedOnOptions(options: Option[]) {
+            dropdown.innerHTML = '';
 
-    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.";
 
-        if (options.length === 0) {
-            const element = document.createElement('li');
-            element.classList.add('empty-search-results');
-            element.textContent = "No results found.";
+                dropdown.appendChild(element);
+            }
 
-            dropdown.appendChild(element);
-        }
+            let i = 0;
 
-        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;
 
-        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));
 
-            element.addEventListener("click", (e) => handleSelection(e, element));
+                dropdown.appendChild(element);
 
-            dropdown.appendChild(element);
+                i++;
+            }
 
-            i++;
+            optionElements = container.querySelectorAll("li");
         }
-
-        optionElements = container.querySelectorAll("li");
     }
 </script>
 <style is:global>
-    .search-select-label {
+    .sui-search-select-label {
         width: fit-content;
         display: flex;
         flex-direction: column;
@@ -331,11 +384,11 @@ const {
         position: relative;
     }
 
-    .search-select-label.full {
+    .sui-search-select-label.full {
         width: 100%;
     }
 
-    .search-select-label.disabled {
+    .sui-search-select-label.disabled {
         opacity: 0.5;
         pointer-events: none;
         color: hsl(var(--text-muted));
@@ -350,7 +403,7 @@ const {
         font-weight: 700;
     }
 
-    .search-select-dropdown {
+    .sui-search-select-dropdown {
         position: absolute;
         width: 100%;
         border: 1px solid hsl(var(--border));
@@ -368,34 +421,34 @@ const {
         box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
     }
 
-    .search-select-dropdown.above {
+    .sui-search-select-dropdown.above {
         top: auto;
         bottom: calc(100% - 18px + 0.25rem);
     }
 
-    .search-select-option, .empty-search-results {
+    .sui-search-select-option, .empty-search-results {
         padding: 0.5rem;
         cursor: pointer;
         font-size: 0.975em;
         transition: all 0.15s ease;
     }
 
-    .search-select-option.disabled {
+    .sui-search-select-option.disabled {
         pointer-events: none;
         color: hsl(var(--text-muted));
     }
 
-    .search-select-option:hover, .search-select-option.focused {
+    .sui-search-select-option:hover, .sui-search-select-option.focused {
         background-color: hsl(var(--background-step-3));
     }
 
-    .search-select-option.selected {
+    .sui-search-select-option.selected {
         background-color: hsl(var(--primary-base));
         color: hsl(var(--text-inverted));
         cursor: default;
     }
 
-    .hidden-select {
+    .sui-hidden-select {
         height: 0;
         width: 0;
         border: none;
@@ -406,25 +459,28 @@ const {
         opacity: 0;
     }
 
-    .search-input-wrapper {
+    .sui-search-input-wrapper {
         width: 100%;
         position: relative;
         height: fit-content;
         cursor: pointer;
     }
 
-    .search-select-indicator {
+    .sui-search-input-wrapper input {
+        padding-right: 2.5rem;
+    }
+
+    .sui-search-select-indicator {
         position: absolute;
-        top: calc(65% + 1px);
-        transform: translateY(-65%);
-        right: .5rem;
+        bottom: .675rem;
+        right: .675rem;
     }
 
-    .search-input-wrapper:has(input:focus) + .search-select-dropdown {
+    .sui-search-input-wrapper:has(input:focus) + .sui-search-select-dropdown {
         display: flex;
     }
 
-    .search-select-dropdown.active, .search-select-dropdown:has(> li:active) {
+    .sui-search-select-dropdown.active, .sui-search-select-dropdown:has(> li:active) {
         display: flex;
     }
 </style>