@studiocms/ui 0.1.0 → 0.3.1

package/src/components/Select.astro

@@ -2,21 +2,63 @@
 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;
 }
 
@@ -29,7 +71,7 @@ const {
 	options = [],
 	disabled,
 	fullWidth,
-	placeholder,
+	placeholder = 'Select',
 } = Astro.props;
 ---
 
@@ -37,6 +79,8 @@ const {
     id={`${name}-container`}
     class="sui-select-label"
     class:list={[disabled && "disabled", className, fullWidth && "full"]}
+    data-options={JSON.stringify(options)}
+    data-id={name}
 >
     {label && (
         <label class="label" for={`${name}-select-btn`}>
@@ -51,12 +95,14 @@ const {
         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
-                    : placeholder || "Select"
+                    : placeholder
             }
         </span>
         <Icon name="chevron-up-down" width={24} height={24} />
@@ -74,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="sui-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) => (
@@ -96,129 +141,204 @@ 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) {
-            button.ariaExpanded = false;
+<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;
-        button.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");
+        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>
     .sui-select-label {
@@ -256,7 +376,7 @@ const {
         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;
@@ -265,7 +385,11 @@ const {
         gap: 1rem;
     }
 
-    .sui-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));
     }
 
@@ -315,7 +439,7 @@ const {
         color: hsl(var(--text-muted));
     }
 
-    .sui-select-option:hover, .sui-select-option:focus {
+    .sui-select-option:hover, .sui-select-option:focus, .sui-select-option.focused {
         background-color: hsl(var(--background-step-3));
     }
 

package/src/components/Sidebar/helpers.ts

@@ -2,6 +2,10 @@ class SingleSidebarHelper {
 	private sidebar: HTMLElement;
 	private sidebarToggle?: HTMLElement | undefined;
 
+	/**
+	 * A helper to manage the sidebar with.
+	 * @param toggleID The ID of the element that should toggle the sidebar.
+	 */
 	constructor(toggleID?: string) {
 		const sidebarContainer = document.getElementById('sui-sidebar');
 
@@ -28,6 +32,10 @@ class SingleSidebarHelper {
 		}
 	}
 
+	/**
+	 * A helper function register an element which should toggle the sidebar.
+	 * @param elementID The ID of the element that should toggle the sidebar.
+	 */
 	public toggleSidebarOnClick = (elementID: string) => {
 		const navToggle = document.getElementById(elementID);
 
@@ -42,6 +50,10 @@ class SingleSidebarHelper {
 		});
 	};
 
+	/**
+	 * A helper function to hide the sidebar when an element is clicked.
+	 * @param elementID The ID of the element that should hide the sidebar.
+	 */
 	public hideSidebarOnClick = (elementID: string) => {
 		const element = document.getElementById(elementID);
 
@@ -52,6 +64,10 @@ class SingleSidebarHelper {
 		element.addEventListener('click', this.hideSidebar);
 	};
 
+	/**
+	 * A helper function to show the sidebar when an element is clicked.
+	 * @param elementID The ID of the element that should show the sidebar.
+	 */
 	public showSidebarOnClick = (elementID: string) => {
 		const element = document.getElementById(elementID);
 
@@ -62,10 +78,16 @@ class SingleSidebarHelper {
 		element.addEventListener('click', this.showSidebar);
 	};
 
+	/**
+	 * A function to hide the sidebar.
+	 */
 	public hideSidebar = () => {
 		this.sidebar.classList.remove('active');
 	};
 
+	/**
+	 * A function to show the sidebar.
+	 */
 	public showSidebar = () => {
 		this.sidebar.classList.add('active');
 	};
@@ -74,6 +96,9 @@ class SingleSidebarHelper {
 class DoubleSidebarHelper {
 	private sidebarsContainer: HTMLElement;
 
+	/**
+	 * A helper to manage the double sidebar with.
+	 */
 	constructor() {
 		const sidebarsContainer = document.getElementById('sui-sidebars');
 
@@ -86,6 +111,10 @@ class DoubleSidebarHelper {
 		this.sidebarsContainer = sidebarsContainer;
 	}
 
+	/**
+	 * A helper function to hide the sidebar when an element is clicked.
+	 * @param elementID The ID of the element that should hide the sidebar.
+	 */
 	public hideSidebarOnClick = (elementID: string) => {
 		const element = document.getElementById(elementID);
 
@@ -96,6 +125,10 @@ class DoubleSidebarHelper {
 		element.addEventListener('click', this.hideSidebar);
 	};
 
+	/**
+	 * A helper function to show the outer sidebar when an element is clicked.
+	 * @param elementID The ID of the element that should show the outer sidebar.
+	 */
 	public showOuterOnClick = (elementID: string) => {
 		const element = document.getElementById(elementID);
 
@@ -106,6 +139,10 @@ class DoubleSidebarHelper {
 		element.addEventListener('click', this.showOuterSidebar);
 	};
 
+	/**
+	 * A helper function to show the inner sidebar when an element is clicked.
+	 * @param elementID The ID of the element that should show the inner sidebar.
+	 */
 	public showInnerOnClick = (elementID: string) => {
 		const element = document.getElementById(elementID);
 
@@ -116,15 +153,24 @@ class DoubleSidebarHelper {
 		element.addEventListener('click', this.showInnerSidebar);
 	};
 
+	/**
+	 * A function to show the inner sidebar.
+	 */
 	public showInnerSidebar = () => {
 		this.sidebarsContainer.classList.add('inner', 'active');
 	};
 
+	/**
+	 * A function to show the outer sidebar.
+	 */
 	public showOuterSidebar = () => {
 		this.sidebarsContainer.classList.add('active');
 		this.sidebarsContainer.classList.remove('inner');
 	};
 
+	/**
+	 * A function to hide the sidebar altogether.
+	 */
 	public hideSidebar = () => {
 		this.sidebarsContainer.classList.remove('inner', 'active');
 	};

package/src/components/Tabs/TabItem.astro

@@ -0,0 +1,47 @@
+---
+import type { StudioCMSColorway } from '../../utils/colors';
+import { generateID } from '../../utils/generateID';
+import type { HeroIconName } from '../../utils/iconType';
+
+/**
+ * The props for the TabItem component.
+ */
+interface Props {
+	/**
+	 * The icon to display next to the tab.
+	 */
+	icon?: HeroIconName;
+	/**
+	 * The label of the tab.
+	 */
+	label: string;
+	/**
+	 * The color of the tab. Defaults to `primary`.
+	 */
+	color?: Exclude<StudioCMSColorway, 'default'>;
+}
+
+const id = generateID('tab');
+
+const { icon, label, color = 'primary' } = Astro.props;
+---
+<sui-tab-item 
+  data-icon={icon}
+  data-label={label}
+  data-color={color}
+  data-tab-id={id}
+  class=""
+>
+  <slot />
+</sui-tab-item>
+<style>
+  sui-tab-item {
+    display: none;
+    width: 100%;
+    height: auto;
+  }
+
+  sui-tab-item.active {
+    display: block;
+  }
+</style>