@studiocms/ui 0.4.11 → 0.4.13

package/dist/components/Badge/Badge.astro

@@ -14,6 +14,10 @@ interface Props extends Omit<HTMLAttributes<'span'>, 'color'> {
 	 * The icon to display in the badge.
 	 */
 	icon?: HeroIconName;
+	/**
+	 * The icon position. Defaults to `left`.
+	 */
+	iconPosition?: 'left' | 'right';
 	/**
 	 * The size of the badge. Defaults to `md`.
 	 */
@@ -38,12 +42,22 @@ const {
 	size = 'md',
 	variant = 'default',
 	rounding = 'full',
+	iconPosition = 'left',
 	label,
+	class: className,
 	...props
 } = Astro.props;
+
+let iconSize = 16;
+if (size === 'sm') {
+	iconSize = 8;
+} else if (size === 'lg') {
+	iconSize = 24;
+}
 ---
 
-<span class="sui-badge" class:list={[color, size, variant, rounding]} {...props}>
-  {icon && <Icon name={icon} width={16} height={16} />}
+<span class="sui-badge" class:list={[color, size, variant, rounding, className]} {...props}>
+	{icon && iconPosition === 'left' && <Icon name={icon} width={iconSize} height={iconSize} />}
   {label}
+	{icon && iconPosition === 'right' && <Icon name={icon} width={iconSize} height={iconSize} />}
 </span>

package/dist/components/SearchSelect/SearchSelect.astro

@@ -1,5 +1,6 @@
 ---
 import { generateID } from '../../utils/generateID.js';
+import Badge from '../Badge/Badge.astro';
 import Icon from '../Icon/Icon.astro';
 import Input from '../Input/Input.astro';
 import './searchselect.css';
@@ -25,45 +26,71 @@ interface Option {
 /**
  * The props for the search select component.
  */
-interface Props {
+type NonMultipleProps = {
 	/**
-	 * The label of the search select.
+	 * Whether the select accepts multiple options. Defaults to `false`.
 	 */
-	label?: string;
+	multiple: false;
+	/**
+	 * The default value of the select.
+	 */
+	defaultValue: string;
+};
+
+type MultipleProps = {
+	/**
+	 * Whether the select accepts multiple options. Defaults to `false`.
+	 */
+	multiple: true;
 	/**
-	 * The default value of the search select. Needs to be one of the values in the options.
+	 * The default value of the select.
 	 */
-	defaultValue?: string;
+	defaultValue: string[];
+};
+
+/**
+ * The props for the select component.
+ */
+type BaseProps = {
 	/**
-	 * Additional classes to apply to the search select.
+	 * The label of the select.
+	 */
+	label?: string;
+	/**
+	 * Additional classes to apply to the select.
 	 */
 	class?: string;
 	/**
-	 * The name of the search select.
+	 * The name of the select. Required because of the helper.
 	 */
 	name?: string;
 	/**
-	 * Whether the search select is required. Defaults to `false`.
+	 * Whether the select is required. Defaults to `false`.
 	 */
 	isRequired?: boolean;
 	/**
-	 * The options to display in the search select.
+	 * The options to display in the select.
 	 */
 	options: Option[];
 	/**
-	 * Whether the search select is disabled. Defaults to `false`.
+	 * Whether the select is disabled. Defaults to `false`.
 	 */
 	disabled?: boolean;
 	/**
-	 * Whether the search select should take up the full width of its container.
+	 * Whether the select is full width. Defaults to `false`.
 	 */
 	fullWidth?: boolean;
 	/**
-	 * The placeholder of the search select.
+	 * The placeholder of the select. Defaults to `Select`.
 	 */
 	placeholder?: string;
-}
+	/**
+	 * The maximum number of options that can be selected. Defaults to `undefined`.
+	 */
+	max?: number;
+};
 
+type Props = BaseProps & (MultipleProps | NonMultipleProps);
 const {
 	label,
 	defaultValue,
@@ -73,62 +100,108 @@ const {
 	options = [],
 	disabled,
 	fullWidth,
-	placeholder,
+	placeholder = 'Select',
+	multiple = false,
+	max = undefined,
 } = Astro.props;
+
+let selected: Option | (Option | undefined)[] | undefined;
+
+if (multiple && Array.isArray(defaultValue)) {
+	selected = defaultValue.map((x) => options.find((y) => y.value === x));
+} else {
+	selected = options.find((x) => x.value === defaultValue);
+}
+
+const defaultLabel = selected
+	? Array.isArray(selected)
+		? placeholder
+		: selected.label
+	: placeholder;
 ---
 
 <div
-    id={`${name}-container`}
-    class="sui-search-select-label"
-    class:list={[disabled && "disabled", className, fullWidth && "full"]}
-    data-options={JSON.stringify(options)}
-    data-id={name}
+	id={`${name}-container`}
+	class="sui-search-select-label"
+	class:list={[disabled && "disabled", className, fullWidth && "full"]}
+	data-options={JSON.stringify(options)}
+	data-multiple={multiple ? "true" : undefined}
+	data-multiple-max={multiple && max !== undefined ? max : undefined}
+	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 class="sui-search-select-dropdown-container">
+		<div class="sui-search-input-wrapper" id={`${name}-search-input-wrapper`}>
+			<Input
+				placeholder={defaultLabel}
+				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) => {
+					const isSelected = Array.isArray(selected)
+						? selected.map((y) => y && y.value).includes(x.value)
+						: selected?.value === x.value;
+					return (
+						<li
+							class="sui-search-select-option"
+							role="option"
+							value={x.value}
+							class:list={[
+								isSelected && `selected`,
+								x.disabled && "disabled"
+							]}
+							id={isSelected ? `${name}-selected` : ""}
+							data-option-index={i}
+							data-value={x.value}
+						>
+							{x.label}
+						</li>
+					)
+				})
+			}
+		</ul>
+	</div>
+	<select class="sui-hidden-search-select" id={name} name={name} required={isRequired} multiple={multiple ? "" : undefined} hidden tabindex="-1">
+		<option value={""}> Select </option>
+		{
+			options.map((x) => {
+				const isSelected = Array.isArray(selected)
+					? selected.map((y) => y && y.value).includes(x.value)
+					: selected?.value === x.value;
+				(
+					<option
+						value={x.value}
+						selected={isSelected}
+						disabled={x.disabled}
+					>
+						{x.label}
+					</option>
+				)
+			})
+		}
+	</select>
+	{multiple && max !== undefined && (
+		<span class="sui-search-select-max-span">
+			<span class="sui-search-select-select-count">0</span> / {max} selected
+		</span>
+	)}
+	{
+		multiple && Array.isArray(selected ?? []) && (		
+			<div class="sui-search-select-badge-container">
+				{
+					((selected ?? []) as Option[]).map((s) => s && 
+						<Badge class="sui-search-select-badge" data-value={s.value} size="sm" label={s.label} iconPosition="right" icon="x-mark" />
+					)
+				}
+			</div>
+		)
+	}
 </div>
 <script>
 import "studiocms:ui/scripts/searchselect"

package/dist/components/SearchSelect/searchselect.css

@@ -21,6 +21,14 @@
   color: hsl(var(--danger-base));
   font-weight: 700;
 }
+.sui-search-select-dropdown-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  position: relative;
+  height: fit-content;
+}
 .sui-search-select-dropdown {
   position: absolute;
   width: 100%;
@@ -40,7 +48,7 @@
 }
 .sui-search-select-dropdown.above {
   top: auto;
-  bottom: calc(100% - 18px + 0.25rem);
+  bottom: calc(100% - 1.5rem);
 }
 .sui-search-select-option,
 .empty-search-results {
@@ -49,6 +57,10 @@
   font-size: 0.975em;
   transition: all 0.15s ease;
 }
+.empty-search-results:hover {
+  background-color: hsl(var(--background-step-2));
+  cursor: default;
+}
 .sui-search-select-option.disabled {
   pointer-events: none;
   color: hsl(var(--text-muted));
@@ -57,11 +69,19 @@
 .sui-search-select-option.focused {
   background-color: hsl(var(--background-step-3));
 }
+.sui-search-select-label[data-multiple=true] .sui-search-select-option.selected:hover,
+.sui-search-select-label[data-multiple=true] .sui-search-select-option.selected:focus,
+.sui-search-select-label[data-multiple=true] .sui-search-select-option.selected.focused {
+  background-color: hsl(var(--primary-hover));
+}
 .sui-search-select-option.selected {
   background-color: hsl(var(--primary-base));
   color: hsl(var(--text-inverted));
   cursor: default;
 }
+.sui-search-select-label[data-multiple=true] .sui-search-select-option.selected {
+  cursor: pointer;
+}
 .sui-hidden-select {
   height: 0;
   width: 0;
@@ -85,6 +105,7 @@
   position: absolute;
   bottom: .675rem;
   right: .675rem;
+  pointer-events: none;
 }
 .sui-search-input-wrapper:has(input:focus) + .sui-search-select-dropdown {
   display: flex;
@@ -93,3 +114,45 @@
 .sui-search-select-dropdown:has(> li:active) {
   display: flex;
 }
+.sui-search-select-badge-container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.sui-search-select-label:has(.sui-search-select-max-span) .sui-search-select-badge-container {
+  margin-top: 0rem;
+}
+.sui-search-select-badge-container .sui-search-select-badge.sui-badge {
+  white-space: nowrap;
+  cursor: default;
+  position: relative;
+  padding-right: 2rem;
+  border-block: 1.5px solid rgba(0, 0, 0, 0);
+}
+.sui-search-select-badge-container .sui-search-select-badge.sui-badge svg {
+  position: absolute;
+  right: 0.25rem;
+  padding: 4px;
+  height: 20px;
+  width: 20px;
+  aspect-ratio: 1 / 1;
+  border-radius: 999px;
+  cursor: pointer;
+  outline: 1px solid hsla(var(--border), 0);
+  transition: background-color 0.15s ease, outline 0.15s ease;
+}
+.sui-search-select-badge-container .sui-search-select-badge.sui-badge svg:hover {
+  background-color: hsla(100, 100%, 95%, 0.2);
+}
+.sui-search-select-badge-container .sui-search-select-badge.sui-badge svg:active,
+.sui-search-select-badge-container .sui-search-select-badge.sui-badge svg:focus {
+  background-color: hsla(100, 100%, 95%, 0.2);
+  outline: 1px solid hsl(var(--border));
+}
+.sui-search-select-max-span {
+  font-size: 0.875em;
+  color: hsl(var(--text-muted));
+}

package/dist/components/SearchSelect/searchselect.d.ts

@@ -1,6 +1,19 @@
-interface Option {
+type SearchSelectOption = {
     label: string;
     value: string;
     disabled?: boolean;
-}
+};
+type SearchSelectContainer = HTMLDivElement & {
+    input: HTMLInputElement | null;
+    dropdown: Element | null;
+    select: HTMLSelectElement | null;
+};
+type SearchSelectState = {
+    optionsMap: Record<string, SelectOption[]>;
+    isMultipleMap: Record<string, boolean>;
+    selectedOptionsMap: Record<string, string[]>;
+    placeholderMap: Record<string, string>;
+    focusIndex: number;
+    isSelectingOption: boolean;
+};
 declare function loadSearchSelects(): void;