@stack-spot/portal-components 2.5.2 → 2.6.0

package/dist/components/form/Select/styled.js

@@ -0,0 +1,165 @@
+import { theme } from '@stack-spot/portal-theme';
+import { styled } from 'styled-components';
+export const SelectBox = styled.div `
+  position: relative;
+  // controls the height of component when it's closed
+  height: ${({ $inputHeight }) => $inputHeight};
+
+  select {
+    border: none;
+    opacity: 0;
+    pointer-events: none;
+    // prevents visual overflow
+    max-width: 10px;
+  }
+  
+  .fake-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 0.25rem;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${theme.color.light[600]};
+    transition: border-color 0.3s, box-shadow 0.3s;
+    background-color: ${theme.color.light[300]};
+
+    /* lets the z-index unset until the animation on the height ends. */
+    &:not(.open) {
+      z-index: unset;
+      animation: 0.3s z-index-animation;
+      @keyframes z-index-animation {
+        0% {
+          z-index: 1;
+        }
+        99% {
+          z-index: 1;
+        }
+        100% {
+          z-index: unset;
+        }
+      }
+    }
+
+    &.disabled {
+      background-color: ${theme.color.light[500]};
+      color: ${theme.color.light[700]};
+      .current-value {
+        cursor: not-allowed;
+      }
+    }
+
+    .arrow {
+      transition: transform ease-in-out 0.3s;
+    }
+
+    &.focused, &.open {
+      border: 1px solid ${theme.color.primary[500]};
+      box-shadow: 0 0 0 1px ${theme.color.primary[500]};
+    }
+
+    &.open {
+      z-index: 1;
+      .arrow {
+        transform: rotate(180deg);
+      }
+      .options {
+        /* lets the overflow be hidden until the animation on the height ends. */
+        overflow-y: auto;
+        animation: 0.3s overflow-animation;
+        @keyframes overflow-animation {
+          0% {
+            overflow-y: hidden;
+          }
+          99% {
+            overflow-y: hidden;
+          }
+          100% {
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+
+    .current-value {
+      height: calc(100% - 2px);
+      display: flex;
+      flex-direction: row;
+      padding: 8px;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    .clipped-text {
+      text-overflow: ellipsis;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .options {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      overflow-y: hidden;
+      transition: height ease-in-out 0.3s;
+      scrollbar-gutter: stable;
+
+      li {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 9px;
+        border-top: 1px solid ${theme.color.light[600]};
+        cursor: pointer;
+        transition: background-color 0.2s;
+        &:hover, &:focus {
+          background-color: ${theme.color.light[500]};
+        }
+        outline: none;
+      }
+
+      .detailed {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        align-items: center;
+        .image {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+          overflow: hidden;
+          & > * {
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+        .text-content {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+          .description {
+            color: ${theme.color.light[700]};
+          }
+        }
+      }
+
+      /* the list is inert when, and only when, its having its height measured */
+      &[inert] {
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        /* we don't want to have the height measured over the height of $maxItems */
+        li:nth-child(n+${({ $maxItems }) => $maxItems + 1}) {
+          display: none;
+        }
+      }
+    }
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/dist/components/form/Select/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sourceRoot":"","sources":["../../../../src/components/form/Select/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAA6C;;;YAGpE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY;;;;;;;;;;;;;;;;;;wBAkBtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;wBAEtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;0BAoBpB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;eACjC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;0BAWX,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;8BACpB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAwDtB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;8BAIxB,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA4B/B,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;;;;;;;;;;;yBAWlB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,SAAS,GAAG,CAAC;;;;;;CAMxD,CAAA"}

package/dist/components/form/Select/types.d.ts

@@ -0,0 +1,103 @@
+import { InputHTMLAttributes } from 'react';
+export interface GenericAccessibleLabel {
+    /**
+     * This is how the option's label will be rendered inside the input. This can be any React element.
+     *
+     * Attention: be careful, this should not have any important information that can't be represented through text (accessibility).
+     */
+    option: React.ReactElement;
+    /**
+     * This is a required text representation of the option. This is used for accessibility.
+     */
+    text: string;
+    /**
+     * This is how the option's label will be rendered as the select current value.
+     *
+     * If not provided, will be rendered using `element`.
+     */
+    selected?: React.ReactElement;
+}
+export interface DetailedLabel {
+    title: string;
+    description?: string;
+    image?: React.ReactElement;
+}
+export type AccessibleLabel = string | DetailedLabel | GenericAccessibleLabel;
+type FilterObjectByValueType<T, Type> = {
+    [K in keyof T as T[K] extends Type ? K : never]: T[K];
+};
+export type KeyOfType<Data, Type> = Data extends Record<string, any> ? keyof FilterObjectByValueType<Data, Type> : never;
+interface BaseSelectProps<Option, Label extends AccessibleLabel> extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'value' | 'onChange'> {
+    /**
+     * The current value.
+     */
+    value: Option | undefined;
+    /**
+     * The label for the empty option. This sets the value to undefined.
+     *
+     * If this is not set, there won't be an empty option for this select.
+     */
+    emptyOption?: Label;
+    /**
+     * The options to render in this selection menu.
+     */
+    options: Option[] | undefined;
+    /**
+     * Provides the value of each option. This can be either a key of the option object or a function that receives the option and returns
+     * the value.
+     *
+     * This is required if the options are not strings or numbers.
+     *
+     * @example
+     * - `'id'`
+     * - `(option) => option.id`
+     */
+    renderValue?: KeyOfType<Option, string> | ((item: NonNullable<Option>) => string);
+    /**
+     * Provides the label of each option. This can be either a key of the option object or a function that receives the option and returns
+     * the label.
+     *
+     * This is required if the options are not strings or numbers.
+     *
+     * @example
+     * - `'name'`
+     * - `(option) => option.name`
+     */
+    renderLabel?: KeyOfType<Option, Label> | ((item: NonNullable<Option>) => Label);
+    /**
+     * Called when the value changes.
+     * @param value the new value.
+     */
+    onChange: (value: Option | undefined) => void;
+    /**
+     * The maximum number of items before showing a vertical scroll bar.
+     * @default 6
+     */
+    maxItems?: number;
+    /**
+     * Whether or not the options are being loaded. The field will become disabled while loading is true.
+     */
+    isLoading?: boolean;
+}
+interface OptionalSelectProps<Option, Label extends AccessibleLabel> extends BaseSelectProps<Option, Label> {
+    emptyOption: Label;
+}
+interface RequiredSelectProps<Option, Label extends AccessibleLabel> extends Omit<BaseSelectProps<Option, Label>, 'onChange'> {
+    emptyOption?: undefined;
+    value: Option | undefined;
+    onChange: (value: Option) => void;
+}
+export type SelectProps<Option> = OptionalSelectProps<Option, string> | RequiredSelectProps<Option, string>;
+export type DetailedSelectProps<Option> = OptionalSelectProps<Option, DetailedLabel> | RequiredSelectProps<Option, DetailedLabel>;
+export type CustomSelectProps<Option> = (OptionalSelectProps<Option, GenericAccessibleLabel> | RequiredSelectProps<Option, GenericAccessibleLabel>) & {
+    /**
+     * Controls the height of component when it's closed.
+     *
+     * Developer note: it would be nice to automatically calculate this instead of expecting a prop.
+     *
+     * @default '42px'
+     */
+    height?: string;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/form/Select/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/types.ts"],"names":[],"mappings":"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"}

package/dist/components/form/Select/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/components/form/Select/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/form/Select/types.ts"],"names":[],"mappings":""}

package/dist/components/form/Select/utils.d.ts

@@ -0,0 +1,3 @@
+import { AccessibleLabel, GenericAccessibleLabel } from './types.js';
+export declare function parseLabel(label: AccessibleLabel): GenericAccessibleLabel;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/form/Select/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/utils.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEjE,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,sBAAsB,CAwBzE"}

package/dist/components/form/Select/utils.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@citric/core';
+export function parseLabel(label) {
+    if (typeof label === 'string') {
+        return {
+            option: _jsx(Text, { children: label }),
+            text: label,
+            selected: _jsx(Text, { className: "clipped-text", children: label }),
+        };
+    }
+    if ('title' in label) {
+        return {
+            option: (_jsxs("div", { className: "detailed", children: [label.image && _jsx("div", { className: "image", children: label.image }), _jsxs("div", { className: "text-content", children: [_jsx(Text, { className: "title", children: label.title }), label.description && _jsx(Text, { className: "description", appearance: "microtext1", children: label.description })] })] })),
+            text: `${label.title}: ${label.description}`,
+            selected: _jsx(Text, { className: "clipped-text", children: label.title }),
+        };
+    }
+    return label;
+}
+//# sourceMappingURL=utils.js.map

package/dist/components/form/Select/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/form/Select/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAGnC,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO;YACL,MAAM,EAAE,KAAC,IAAI,cAAE,KAAK,GAAQ;YAC5B,IAAI,EAAE,KAAK;YACX,QAAQ,EAAE,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,YAAE,KAAK,GAAQ;SACxD,CAAA;IACH,CAAC;IACD,IAAI,OAAO,IAAI,KAAK,EAAE,CAAC;QACrB,OAAO;YACL,MAAM,EAAE,CACN,eAAK,SAAS,EAAC,UAAU,aACtB,KAAK,CAAC,KAAK,IAAI,cAAK,SAAS,EAAC,OAAO,YAAE,KAAK,CAAC,KAAK,GAAO,EAC1D,eAAK,SAAS,EAAC,cAAc,aAC3B,KAAC,IAAI,IAAC,SAAS,EAAC,OAAO,YAAE,KAAK,CAAC,KAAK,GAAQ,EAC3C,KAAK,CAAC,WAAW,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,aAAa,EAAC,UAAU,EAAC,YAAY,YAAE,KAAK,CAAC,WAAW,GAAQ,IAClG,IACF,CACP;YACD,IAAI,EAAE,GAAG,KAAK,CAAC,KAAK,KAAK,KAAK,CAAC,WAAW,EAAE;YAC5C,QAAQ,EAAE,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,YAAE,KAAK,CAAC,KAAK,GAAQ;SAC9D,CAAA;IACH,CAAC;IACD,OAAO,KAAK,CAAA;AACd,CAAC"}

package/dist/containers/NotificationsPage.js

@@ -5,7 +5,7 @@ import { styled } from 'styled-components';
 import { AsyncContent } from '../components/AsyncContent.js';
 import { ErrorFeedback } from '../components/error/index.js';
 import { SearchInput } from '../components/form/SearchInput.js';
-import { Select } from '../components/form/Select.js';
+import { Select } from '../components/form/Select/index.js';
 import { NotificationList } from '../components/notification/NotificationList.js';
 import { useNotificationList } from '../context/notification/hooks.js';
 import { useNotificationController } from '../notifications.js';

package/dist/hooks/keyboard.d.ts

@@ -16,16 +16,16 @@ interface Props {
 }
 /**
  * Creates listeners for controlling a Menu UI through the keyboard.
- * - Arrow down: next element in the iterator returned by the query selectors. First element, it the current element is the last.
- * - Arrow up: previous element in the iterator returned by the query selectors. Last element, it the current element is the first.
+ * - Arrow down: next element in the iterator returned by the query selectors. First element, if the current element is the last.
+ * - Arrow up: previous element in the iterator returned by the query selectors. Last element, if the current element is the first.
  * - Tab: same as Arrow down, but has a different behavior if the element is the last (see onPressLastTab).
  * - Esc: determined by onPressEscape.
  * @param props {@link Props}.
  * @returns an object with the element controlled by the keyboard (useRef); a function to attach the keyboard events and a function to
  * detach the keyboard events.
  */
-export declare function useKeyboardControls({ querySelectors, onPressEscape, onPressLastTab }: Props): {
-    keyboardControlledElement: import("react").RefObject<HTMLDivElement>;
+export declare function useKeyboardControls<T extends HTMLElement = HTMLDivElement>({ querySelectors, onPressEscape, onPressLastTab }: Props): {
+    keyboardControlledElement: import("react").RefObject<T>;
     attachKeyboardListeners: () => void;
     detachKeyboardListeners: () => void;
 };

package/dist/hooks/keyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/hooks/keyboard.tsx"],"names":[],"mappings":";AAEA,UAAU,KAAK;IACb;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,cAA8B,EAAE,EAAE,KAAK;;;;EAmD3G"}
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/hooks/keyboard.tsx"],"names":[],"mappings":";AAEA,UAAU,KAAK;IACb;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,cAAc,EACxE,EAAE,cAAc,EAAE,aAAa,EAAE,cAA8B,EAAE,EAAE,KAAK;;;;EAoDzE"}

package/dist/hooks/keyboard.js

@@ -1,8 +1,8 @@
 import { useCallback, useRef } from 'react';
 /**
  * Creates listeners for controlling a Menu UI through the keyboard.
- * - Arrow down: next element in the iterator returned by the query selectors. First element, it the current element is the last.
- * - Arrow up: previous element in the iterator returned by the query selectors. Last element, it the current element is the first.
+ * - Arrow down: next element in the iterator returned by the query selectors. First element, if the current element is the last.
+ * - Arrow up: previous element in the iterator returned by the query selectors. Last element, if the current element is the first.
  * - Tab: same as Arrow down, but has a different behavior if the element is the last (see onPressLastTab).
  * - Esc: determined by onPressEscape.
  * @param props {@link Props}.

package/dist/hooks/keyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../src/hooks/keyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAkB3C;;;;;;;;;GASG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,GAAG,aAAa,EAAS;IAC1G,MAAM,yBAAyB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC9D,MAAM,SAAS,GAAG,MAAM,CAAkD,EAAE,CAAC,CAAA;IAC7E,SAAS,CAAC,OAAO,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,CAAA;IAErD,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,KAAoB,EAAE,EAAE;QAC5D,MAAM,MAAM,GAAG,KAAK,EAAE,MAA4B,CAAA;QAElD,SAAS,oBAAoB;YAC3B,OAAO,yBAAyB,CAAC,OAAO,EAAE,gBAAgB,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;QAClF,CAAC;QAED,SAAS,YAAY,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG;YACnC,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAA;YACtC,IAAI,CAAC,GAAG,CAAC,CAAA;YACT,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC;gBAAE,CAAC,EAAE,CAAA;YACvE,MAAM,IAAI,GAAQ,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;YACxH,IAAI,EAAE,KAAK,EAAE,EAAE,CAAA;QACjB,CAAC;QAED,MAAM,QAAQ,GAA6C;YACzD,MAAM,EAAE,GAAG,EAAE;gBACX,SAAS,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAA;gBACnC,KAAK,CAAC,eAAe,EAAE,CAAA;gBACvB,KAAK,CAAC,cAAc,EAAE,CAAA;YACxB,CAAC;YACD,KAAK,EAAE,GAAG,EAAE;gBACV,MAAM,EAAE,KAAK,EAAE,CAAA;YACjB,CAAC;YACD,GAAG,EAAE,GAAG,EAAE;gBACR,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAA;gBACtC,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;oBAAE,SAAS,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAA;;oBAC1F,YAAY,CAAC,WAAW,CAAC,CAAA;gBAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;YACxB,CAAC;YACD,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE,YAAY;SACxB,CAAA;QAED,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,CAAA;IACzB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;IACxD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,CAAA;AACxF,CAAC"}
+{"version":3,"file":"keyboard.js","sourceRoot":"","sources":["../../src/hooks/keyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAkB3C;;;;;;;;;GASG;AACH,MAAM,UAAU,mBAAmB,CACjC,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,GAAG,aAAa,EAAS;IAExE,MAAM,yBAAyB,GAAG,MAAM,CAAI,IAAI,CAAC,CAAA;IACjD,MAAM,SAAS,GAAG,MAAM,CAAkD,EAAE,CAAC,CAAA;IAC7E,SAAS,CAAC,OAAO,GAAG,EAAE,aAAa,EAAE,cAAc,EAAE,CAAA;IAErD,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,KAAoB,EAAE,EAAE;QAC5D,MAAM,MAAM,GAAG,KAAK,EAAE,MAA4B,CAAA;QAElD,SAAS,oBAAoB;YAC3B,OAAO,yBAAyB,CAAC,OAAO,EAAE,gBAAgB,CAAC,cAAc,CAAC,IAAI,EAAE,CAAA;QAClF,CAAC;QAED,SAAS,YAAY,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG;YACnC,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAA;YACtC,IAAI,CAAC,GAAG,CAAC,CAAA;YACT,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC;gBAAE,CAAC,EAAE,CAAA;YACvE,MAAM,IAAI,GAAQ,GAAG,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;YACxH,IAAI,EAAE,KAAK,EAAE,EAAE,CAAA;QACjB,CAAC;QAED,MAAM,QAAQ,GAA6C;YACzD,MAAM,EAAE,GAAG,EAAE;gBACX,SAAS,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAA;gBACnC,KAAK,CAAC,eAAe,EAAE,CAAA;gBACvB,KAAK,CAAC,cAAc,EAAE,CAAA;YACxB,CAAC;YACD,KAAK,EAAE,GAAG,EAAE;gBACV,MAAM,EAAE,KAAK,EAAE,CAAA;YACjB,CAAC;YACD,GAAG,EAAE,GAAG,EAAE;gBACR,MAAM,OAAO,GAAG,oBAAoB,EAAE,CAAA;gBACtC,IAAI,QAAQ,CAAC,aAAa,KAAK,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC;oBAAE,SAAS,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAA;;oBAC1F,YAAY,CAAC,WAAW,CAAC,CAAA;gBAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;YACxB,CAAC;YACD,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE,YAAY;SACxB,CAAA;QAED,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,CAAA;IACzB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;IACxD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,uBAAuB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC/C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAAA;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,EAAE,yBAAyB,EAAE,uBAAuB,EAAE,uBAAuB,EAAE,CAAA;AACxF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -21,7 +21,7 @@
     "./error": "./dist/components/error/index.js",
     "./AnimatedHeight": "./dist/components/AnimatedHeight.js",
     "./SearchInput": "./dist/components/form/SearchInput.js",
-    "./Select": "./dist/components/form/Select.js",
+    "./Select": "./dist/components/form/Select/index.js",
     "./Stepper": "./dist/components/Stepper/index.js"
   },
   "scripts": {

package/src/components/form/Select/CustomSelect.tsx

@@ -0,0 +1,232 @@
+import { IconBox } from '@citric/core'
+import { ChevronDown } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { listToClass } from '@stack-spot/portal-theme'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { delay } from '../../../utils/promise'
+import { SelectBox } from './styled'
+import { CustomSelectProps, GenericAccessibleLabel, KeyOfType } from './types'
+import { parseLabel } from './utils'
+
+function getOptionAsValue<Option, T extends KeyOfType<Option, string> | ((o: NonNullable<Option>) => string)>(
+  option: Option,
+  renderer: T | undefined,
+): string {
+  let result: string | undefined
+  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
+  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as string
+  return result ? result : `${option ?? ''}`
+}
+
+function getOptionAsLabel<
+  Option,
+  T extends KeyOfType<Option, GenericAccessibleLabel> | ((o: NonNullable<Option>) => GenericAccessibleLabel)
+>(
+  option: Option,
+  renderer: T | undefined,
+): GenericAccessibleLabel {
+  let result: GenericAccessibleLabel | undefined
+  if (typeof renderer === 'function') result = option ? renderer(option) : undefined
+  else if (typeof renderer === 'string') result = option[renderer as keyof Option] as GenericAccessibleLabel
+  return result ? result : parseLabel(`${option ?? ''}`)
+}
+
+const FakeOption = (
+  { value, label, onChange }: { value: string, label: React.ReactElement, onChange: (event: { target: { value: string } }) => void },
+) => (
+  <li className="option" onClick={() => onChange({ target: { value } })}>
+    {label}
+  </li>
+)
+
+/**
+ * Renders a Select component using the Citric Design System.
+ * 
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ * 
+ * The CustomSelect lets you customize how each option and the selected value are rendered. To do so, use the prop `renderLabel` and
+ * `emptyOption`.
+ * 
+ * If you don't need fully customized labels, check the more simple components: `DetailedSelect` and `Select`.
+ * 
+ * The CustomSelect expects a {@link GenericAccessibleLabel} to create labels.
+ * 
+ * Tips:
+ * - This is a controlled field. You can't use it any other way. If you're using it with react-hook-form, you need to wrap it under the
+ * component `<Controller>` from the same library.
+ * - `value` is required and must be of the same type of an item of the array of options. `value` is only optional if `emptyOption` is
+ * provided, in this case, an empty option is rendered and the value is undefined when it's selected.
+ * - A consequence of the previous rule is that you can't have an empty selection if you don't set a value for `emptyOption`. This
+ * component must work exactly like the browser's `select`, so this behavior is intended.
+ * - If `renderLabel` or `renderValue` are not provided, this will use the `toString` method of the object.
+ * 
+ * @example
+ * options as an object array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ * 
+ * function renderCustomLabel(option: string) {
+ *   return {
+ *     // this is how the option will be rendered in the list
+ *     option: (
+ *       <div style={{ display: flex, flexDirection: 'row', gap: '5px' }}>
+ *         <img src="/my-image.png" width="40px" height="40px" />
+ *         <p>An option called {option}</p>
+ *       </div>
+ *     ),
+ *     // this is how the option will be rendered inside the input, when it's the value currently selected.
+ *     selected: <p>{option}</p>,
+ *     // this a string representation of the option: used for accessibility. This should contain the same information as `option`.
+ *     text: `An option called ${option}`,
+ *   )
+ * }
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <CustomSelect options={options} value={value} onChange={setValue} renderLabel={renderCustomLabel} />
+ * }
+ * ```
+ * @example
+ * options as an object array
+ * ```
+ * const options = [{ id: 1, name: 'John', age: 34 }, { id: 2, name: 'Marcia', age: 28 }, { id: 3, name: 'Angeline', age: 58 }]
+ * 
+ * function renderCustomLabel(option: (typeof options)[number]) {
+ *   return {
+ *     // this is how the option will be rendered in the list
+ *     option: (
+ *       <div style={{ display: flex, flexDirection: 'row', gap: '5px' }}>
+ *         <img src="/my-image.png" width="40px" height="40px" />
+ *         <p>{option.name}, aged {option.age}</p>
+ *       </div>
+ *     ),
+ *     // this is how the option will be rendered inside the input, when it's the value currently selected.
+ *     selected: <p>{option}</p>,
+ *     // this a string representation of the option: used for accessibility. This should contain the same information as `option`.
+ *     text: `${option.name}, aged ${option.age}`,
+ *   )
+ * }
+ * 
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id`
+ *   return <CustomSelect options={options} value={value} onChange={setValue} renderValue="id" renderLabel={renderCustomLabel} />
+ * }
+ * ```
+ * @param props the component props: {@link CustomSelectProps}.
+ */
+export function CustomSelect<T>({
+  onChange, options, value, emptyOption, renderLabel, renderValue, maxItems = 6, onFocus, onBlur, style, className, isLoading, disabled,
+  height = '42px', ...props
+}: CustomSelectProps<T>) {
+  const [open, setOpen] = useState(false)
+  const [focused, setFocused] = useState(false)
+  const fakeSelectRef = useRef<HTMLDivElement>(null)
+  const listHeight = useRef(0)
+  const isDisabled = disabled || isLoading
+  const isMeasuring = useRef(false)
+
+  const onChangeOption = useCallback((event: { target: { value: string } }) => {
+    const value = options?.find(o => getOptionAsValue(o, renderValue) === event.target.value)
+    onChange(value!)
+    setOpen(false)
+  }, [options])
+
+  const onClickOutside = useCallback((event: MouseEvent) => {
+    if (fakeSelectRef.current && !fakeSelectRef.current.contains(event.target as Node)) setOpen(false)
+  }, [])
+
+  const [htmlOptions, fakeOptions] = useMemo(
+    () => (options ?? []).reduce<[React.ReactElement[], React.ReactElement[]]>(([opts, fake], o) => {
+      const id = getOptionAsValue(o, renderValue)
+      const label = getOptionAsLabel(o, renderLabel)
+      return [
+        [...opts, <option key={id} value={id} selected={value === id}>{label.text}</option>],
+        [...fake, <FakeOption key={id} value={id} label={label.option} onChange={onChangeOption} />],
+      ]
+    }, [[], []]),
+    [options, value],
+  )
+
+  function getCurrentValue() {
+    return value === undefined ? '' : getOptionAsValue(value, renderValue)
+  }
+
+  function getCurrentLabel() {
+    return value === undefined ? emptyOption : getOptionAsLabel(value, renderLabel)
+  }
+
+  useEffect(() => {
+    const detach = () => document.removeEventListener('mousedown', onClickOutside)
+    if (open) document.addEventListener('mousedown', onClickOutside)
+    else detach()
+    return detach 
+  }, [open])
+
+  useEffect(() => {
+    async function measure() {
+      // semaphore for controlling concurrence
+      if (isMeasuring.current) return
+      isMeasuring.current = true
+      const list = fakeSelectRef.current?.querySelector('.options')
+      if (!list) return
+      list.setAttribute('inert', '')
+      list.setAttribute('style', 'height: auto')
+      await delay(0)
+      listHeight.current = list.clientHeight
+      await delay(0)
+      list.setAttribute('style', `height: ${open ? listHeight.current : 0}`)
+      list.removeAttribute('inert')
+      isMeasuring.current = false
+    }
+    measure()
+  }, [options, fakeSelectRef.current])
+
+  // replicates the original select effect of the browser to select the first option. This is necessary because we use the default
+  // select element for accessibility, the behavior must not differ.
+  useEffect(() => {
+    if (!value && !emptyOption && options?.length) {
+      onChange(options[0])
+    }
+  }, [options])
+
+  return (
+    <SelectBox style={style} className={className} $maxItems={maxItems} $inputHeight={height}>
+      { /* Screen readers can use the select component from the browser instead of the highly styled component we show. */ }
+      <select
+        {...props}
+        value={getCurrentValue()}
+        onChange={onChangeOption}
+        onFocus={(ev) => {
+          setFocused(true)
+          onFocus?.(ev)
+        }}
+        onBlur={(ev) => {
+          setFocused(false)
+          onBlur?.(ev)
+        }}
+        disabled={isDisabled}
+        aria-busy={isLoading}
+      >
+        {emptyOption === undefined ? null : <option value="" selected={!value}>{emptyOption.text}</option>}
+        {htmlOptions}
+      </select>
+      <div
+        ref={fakeSelectRef}
+        className={listToClass(['fake-select', open && 'open', focused && 'focused', isDisabled && 'disabled'])}
+        aria-hidden
+      >
+        <div className="current-value" onClick={isDisabled ? undefined : () => setOpen(!open)}>
+          {getCurrentLabel()?.selected || getCurrentLabel()?.option || <div></div>}
+          {isLoading ? <LoadingCircular size="sm" /> : <IconBox className="arrow"><ChevronDown /></IconBox>}
+        </div>
+        <ul className="options" style={{ height: open ? listHeight.current : 0 }}>
+          {emptyOption === undefined ? null : <FakeOption value="" label={emptyOption.option} onChange={onChangeOption} />}
+          {fakeOptions}
+        </ul>
+      </div>
+    </SelectBox>
+  )
+}