@studiocms/ui 0.0.1 → 0.3.0

package/src/components/Select.astro

@@ -2,22 +2,65 @@
 import Icon from '../utils/Icon.astro';
 import { generateID } from '../utils/generateID';
 
+/**
+ * The props for the select component.
+ */
 interface Option {
+	/**
+	 * The label of the option.
+	 */
 	label: string;
+	/**
+	 * The value of the option.
+	 */
 	value: string;
+	/**
+	 * Whether the option is disabled. Defaults to `false`.
+	 */
 	disabled?: boolean;
-};
+}
 
+/**
+ * The props for the select component.
+ */
 interface Props {
+	/**
+	 * The label of the select.
+	 */
 	label?: string;
+	/**
+	 * The default value of the select.
+	 */
 	defaultValue?: string;
+	/**
+	 * Additional classes to apply to the select.
+	 */
 	class?: string;
+	/**
+	 * The name of the select. Required because of the helper.
+	 */
 	name?: string;
+	/**
+	 * Whether the select is required. Defaults to `false`.
+	 */
 	isRequired?: boolean;
+	/**
+	 * The options to display in the select.
+	 */
 	options: Option[];
+	/**
+	 * Whether the select is disabled. Defaults to `false`.
+	 */
 	disabled?: boolean;
+	/**
+	 * Whether the select is full width. Defaults to `false`.
+	 */
 	fullWidth?: boolean;
-};
+	/**
+	 * The placeholder of the select. Defaults to `Select`.
+	 */
+	placeholder?: string;
+}
 
 const {
 	label,
@@ -28,38 +71,47 @@ const {
 	options = [],
 	disabled,
 	fullWidth,
+	placeholder = 'Select',
 } = Astro.props;
 ---
 
 <div
     id={`${name}-container`}
-    class="select-label"
+    class="sui-select-label"
     class:list={[disabled && "disabled", className, fullWidth && "full"]}
+    data-options={JSON.stringify(options)}
+    data-id={name}
 >
-    <label class="label" for={`${name}-select-btn`}>
-        {label}
-        <span class="req-star">{isRequired && "*"}</span>
-    </label>
+    {label && (
+        <label class="label" for={`${name}-select-btn`}>
+            {label}
+            <span class="req-star">{isRequired && "*"}</span>
+        </label>
+    )}
     <button
-        class="select-button"
+        class="sui-select-button"
         role="combobox"
+        aria-controls={`${name}-dropdown`}
+        aria-expanded="false"
         id={`${name}-select-btn`}
         type="button"
+        aria-label={placeholder}
+        title={placeholder}
     >
-        <span id={`${name}-value-span`}>
+        <span class="sui-select-value-span" id={`${name}-value-span`}>
             {
                 defaultValue
                     ? options.find((x) => x.value === defaultValue)?.label
-                    : "Select"
+                    : placeholder
             }
         </span>
         <Icon name="chevron-up-down" width={24} height={24} />
     </button>
-    <ul class="select-dropdown" role="listbox" id={`${name}-dropdown`}>
+    <ul class="sui-select-dropdown" role="listbox" id={`${name}-dropdown`}>
         {
             options.map((x, i) => (
                 <li
-                    class="select-option"
+                    class="sui-select-option"
                     role="option"
                     value={x.value}
                     class:list={[
@@ -68,14 +120,13 @@ const {
                     ]}
                     id={defaultValue === x.value ? `${name}-selected` : ""}
                     data-option-index={i}
-                    tabindex={x.disabled ? -1 : 0}
                 >
                     {x.label}
                 </li>
             ))
         }
     </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) => (
@@ -90,143 +141,221 @@ const {
         }
     </select>
 </div>
-<script is:inline define:vars={{ id: name, options }}>
-    const container = document.getElementById(`${id}-container`);
-    const hiddenSelect = document.getElementById(id);
-    const button = document.getElementById(`${id}-select-btn`);
-    const valueSpan = document.getElementById(`${id}-value-span`);
-    const dropdown = document.getElementById(`${id}-dropdown`);
-    const optionElements = container.querySelectorAll("li");
-
-    let active = false;
-
-    button.addEventListener("click", () => {
-        const { bottom, left, right, width, x, y, height } =
-            button.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) {
+<script>
+    const allSelects = document.querySelectorAll<HTMLDivElement>(".sui-select-label");
+    // id, options
+
+    for (const container of allSelects) {
+        const hiddenSelect = container.querySelector('select')!;
+        const button = container.querySelector('button')!;
+        const valueSpan = container.querySelector('.sui-select-value-span')!;
+        const dropdown = container.querySelector('.sui-select-dropdown')!;
+        const optionElements = container.querySelectorAll<HTMLLIElement>('.sui-select-option');
+
+        const options = JSON.parse(container.dataset.options!);
+        const id = container.dataset.id!;
+        let active = false;
+
+        const closeDropdown = () => {
             dropdown.classList.remove("active", "above");
             active = false;
-            return;
+            button.ariaExpanded = 'false';
+            focusIndex = -1;
+
+            for (const entry of optionElements) {
+                entry.classList.remove('focused');
+            }
+        };
+
+        const openDropdown = (toggle: boolean) => {
+            const { bottom, left, right, width, x, y, height } =
+                button.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 && toggle) {
+                closeDropdown();
+                return;
+            }
+
+            active = true;
+            button.ariaExpanded = 'true';
+
+            // Set focusIndex to currently selected option
+            focusIndex = Array.from(optionElements).findIndex((x) =>
+                x.classList.contains("selected")
+            );
+
+            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;
-
-        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");
+        button.addEventListener("click", () => openDropdown(true));
+
+        let focusIndex = -1;
+
+        const recomputeOptions = () => {
+            for (const entry of optionElements) {
+                if (Number.parseInt(entry.dataset.optionIndex!) == focusIndex) {
+                    entry.classList.add('focused');
+                } else {
+                    entry.classList.remove('focused');
+                }
+            }
         }
-    });
 
-    optionElements.forEach((option) => {
-        const handleSelection = (e) => {
+        button.addEventListener('keydown', (e) => {
+            if (e.key === 'Tab' || e.key === 'Escape') {
+                closeDropdown();
+                return;
+            }
+
+            if (e.key === ' ' && !active) openDropdown(false);
+
+            if (e.key === 'Enter') {
+                let currentlyFocused = container.querySelector<HTMLElement>('.focused');
+                if (currentlyFocused) {
+                    currentlyFocused.classList.remove('focused');
+                    currentlyFocused.click();
+
+                    // Stop dropdown from immediately reopening
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                }
+
+                return;
+            }
+
+            e.preventDefault();
             e.stopImmediatePropagation();
-            if (option.id === `${id}-selected` || !id) return;
 
-            const currentlySelected = document.getElementById(`${id}-selected`);
+            const neighbor = (offset: number) => {
+                return optionElements.item((Array.from(optionElements).findIndex((x) => x.classList.contains("selected")) ?? -1) + offset)
+            }
+
+            if (e.key === "ArrowUp" && (focusIndex > 0 || !active)) {
+                if (!active) return neighbor(-1)?.click();
+                focusIndex--;
+                recomputeOptions();
+            }
 
+            if (e.key === "ArrowDown" && focusIndex + 1 < optionElements.length) {
+                if (!active) return neighbor(1)?.click();
+                focusIndex++;
+                recomputeOptions();
+            }
+
+            if (e.key === 'PageUp') {
+                focusIndex = 0;
+                if (!active) return optionElements.item(focusIndex)?.click();
+                recomputeOptions();
+            }
+            if (e.key === 'PageDown') {
+                focusIndex = optionElements.length - 1;
+                if (!active) return optionElements.item(focusIndex)?.click();
+                recomputeOptions();
+            }
+        });
+
+        const handleSelection = (e: MouseEvent, option: HTMLElement) => {
+            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 opt = options[parseInt(option.dataset.optionIndex)];
+            const opt = options[parseInt(option.dataset.optionIndex!)];
             hiddenSelect.value = opt.value;
-
             valueSpan.textContent = opt.label;
-            dropdown.classList.remove("active", "above");
-
-            active = false;
+            closeDropdown();
         }
 
-        option.addEventListener("click", handleSelection);
-        option.addEventListener("keydown", (e) => {
-            if (e.key === 'Enter') {
-                handleSelection(e);
-            }
-        });
-    });
+        optionElements.forEach((option) => {
+            const handleSelectionForOption = (e: MouseEvent) => handleSelection(e, option)
 
-    window.addEventListener("scroll", () => {
-        dropdown.classList.remove("active", "above");
-        active = false;
-    });
+            option.addEventListener("click", handleSelectionForOption);
+        });
 
-    hideOnClickOutside(container);
+        window.addEventListener("scroll", closeDropdown);
 
-    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("keydown", (e) => {
+            if (e.key === "Escape" && dropdown.classList.contains("active")) {
+                closeDropdown();
             }
-        };
+        });
 
-        const removeClickListener = () => {
-            document.removeEventListener("click", outsideClickListener);
-        };
+        hideOnClickOutside(container);
+
+        function hideOnClickOutside(element: HTMLElement) {
+            const outsideClickListener = (event: MouseEvent) => {
+                if (
+                    !element.contains(event.target as HTMLElement) &&
+                    isVisible(element) &&
+                    active === true
+                ) {
+                    // or use: event.target.closest(selector) === null
+                    closeDropdown();
+                }
+            };
+
+            document.addEventListener("click", outsideClickListener);
+        }
 
-        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
+            );
     }
-
-    // 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
-        );
 </script>
 <style>
-    .select-label {
+    .sui-select-label {
         width: fit-content;
         display: flex;
         flex-direction: column;
         gap: 0.25rem;
         min-width: 200px;
         position: relative;
+        height: fit-content;
     }
 
-    .select-label.full {
+    .sui-select-label.full, .sui-select-label.full .sui-select-button {
         width: 100%;
     }
 
-    .select-label.disabled {
+    .sui-select-label.disabled {
         opacity: 0.5;
         pointer-events: none;
         color: hsl(var(--text-muted));
@@ -241,13 +370,13 @@ const {
         font-weight: 700;
     }
 
-    .select-button {
+    .sui-select-button {
         padding: 0.5rem 0.75rem 0.5rem 1rem;
         border-radius: 8px;
         border: 1px solid hsl(var(--border));
         background: hsl(var(--background-step-2));
         color: hsl(var(--text-normal));
-        transition: all 0.15s ease;
+        transition: background border 0.15s ease;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -256,18 +385,22 @@ const {
         gap: 1rem;
     }
 
-    .select-button:hover {
+    .sui-select-button:focus {
+        border: 1px solid hsl(var(--primary-base));
+    }       
+
+    .sui-select-button:hover, .sui-select-button:focus {
         background: hsl(var(--background-step-3));
     }
 
-    .select-button.active,
-    .select-button:active,
-    .select-button:has(+ .select-dropdown.active) {
+    .sui-select-button.active,
+    .sui-select-button:active,
+    .sui-select-button:has(+ .sui-select-dropdown.active) {
         border: 1px solid hsl(var(--primary-base));
         background: hsl(var(--background-step-2));
     }
 
-    .select-dropdown {
+    .sui-select-dropdown {
         position: absolute;
         width: 100%;
         border: 1px solid hsl(var(--border));
@@ -285,43 +418,43 @@ const {
         box-shadow: 0px 4px 8px hsl(var(--shadow), 0.5);
     }
 
-    .select-dropdown.active {
+    .sui-select-dropdown.active {
         display: flex;
     }
 
-    .select-dropdown.above {
+    .sui-select-dropdown.above {
         top: auto;
         bottom: calc(100% - 18px + 0.25rem);
     }
 
-    .select-option {
+    .sui-select-option {
         padding: 0.5rem;
         cursor: pointer;
         font-size: 0.975em;
         transition: all 0.15s ease;
     }
 
-    .select-option.disabled {
+    .sui-select-option.disabled {
         pointer-events: none;
         color: hsl(var(--text-muted));
     }
 
-    .select-option:hover, .select-option:focus {
+    .sui-select-option:hover, .sui-select-option:focus, .sui-select-option.focused {
         background-color: hsl(var(--background-step-3));
     }
 
-    .select-option:focus {
+    .sui-select-option:focus {
         outline: none;
         border: none;
     }
 
-    .select-option.selected {
+    .sui-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;

package/src/components/Sidebar/Double.astro

@@ -1,13 +1,13 @@
-<div id="sidebars" class="active inner">
-  <div id="sidebar-outer">
+<div id="sui-sidebars" class="active inner">
+  <div id="sui-sidebar-outer">
     <slot name="outer" />
   </div>
-  <div id="sidebar-inner">
+  <div id="sui-sidebar-inner">
     <slot name="inner" />
   </div>
 </div>
 <style>
-  #sidebars {
+  #sui-sidebars {
     --sidebars-container-width: calc((280px + 1px) * 2);
     display: flex;
     align-items: center;
@@ -19,11 +19,11 @@
     height: 100%;
   }
 
-  #sidebars.active {
+  #sui-sidebars.active {
     transform: translateX(0%);
   }
 
-  #sidebar-outer {
+  #sui-sidebar-outer {
     height: 100%;
     min-width: 280px;
     width: 280px;
@@ -39,7 +39,7 @@
     padding: 1.5rem;
   }
 
-  #sidebar-inner {
+  #sui-sidebar-inner {
     min-width: 280px;
     width: 280px;
     height: 100%;
@@ -56,7 +56,7 @@
   }
 
   @media screen and (max-width: 1200px) {
-    #sidebars {
+    #sui-sidebars {
       --sidebars-container-width: calc(280px + 1px);
     }
 
@@ -64,7 +64,7 @@
       display: block;
     }
 
-    #sidebars.inner {
+    #sui-sidebars.inner {
       #sidebar-outer,
       #sidebar-inner {
         transform: translateX(-100%);
@@ -73,7 +73,7 @@
   }
 
   @media screen and (max-width: 840px) {
-    #sidebars {
+    #sui-sidebars {
       transform: translateX(-100%);
       position: absolute;
       top: 0;
@@ -82,8 +82,8 @@
       width: 100%;
     }
 
-    #sidebar-outer,
-    #sidebar-inner {
+    #sui-sidebar-outer,
+    #sui-sidebar-inner {
       width: 100%;
       flex: 0 0 100%;
     }

package/src/components/Sidebar/Single.astro

@@ -1,15 +1,15 @@
 ---
-import type { HTMLAttributes } from 'astro/types'
+import type { HTMLAttributes } from 'astro/types';
 
-interface Props extends Exclude<HTMLAttributes<'aside'>, 'id'> {};
+interface Props extends Exclude<HTMLAttributes<'aside'>, 'id'> {}
 
 const props = Astro.props;
 ---
-<aside id="sidebar" {...props}>
+<aside id="sui-sidebar" {...props}>
   <slot />
 </aside>
 <style>
-  #sidebar {
+  #sui-sidebar {
     height: 100%;
     min-width: 280px;
     width: 280px;
@@ -24,12 +24,12 @@ const props = Astro.props;
     transition: all .3s ease;
   }
 
-  #sidebar.active {
+  #sui-sidebar.active {
     transform: translateX(0%);
   }
 
   @media screen and (max-width: 840px) {
-    #sidebar {
+    #sui-sidebar {
       transform: translateX(-100%);
       position: absolute;
       top: 0;