@stack-spot/citric-react 0.26.0 → 0.27.0

package/dist/components/Select/hooks.d.ts

@@ -0,0 +1,23 @@
+interface OpenPanelEffectParams {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setSearch: React.Dispatch<React.SetStateAction<string | undefined>>;
+    element: React.MutableRefObject<HTMLDivElement | null>;
+    searchable?: boolean;
+}
+interface FocusEffectParams {
+    element: React.MutableRefObject<HTMLDivElement | null>;
+    focused: boolean;
+    setFocused: React.Dispatch<React.SetStateAction<boolean>>;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+interface DisabledEffectParams {
+    disabled?: boolean;
+    setFocused: React.Dispatch<React.SetStateAction<boolean>>;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare function useOpenPanelEffect({ open, setOpen, setSearch, element, searchable }: OpenPanelEffectParams): void;
+export declare function useFocusEffect({ element, focused, setFocused, setOpen }: FocusEffectParams): void;
+export declare function useDisabledEffect({ disabled, setOpen, setFocused }: DisabledEffectParams): void;
+export {};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/components/Select/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/Select/hooks.ts"],"names":[],"mappings":"AAEA,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACvD,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IACpE,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,iBAAiB;IACzB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACxD;AAED,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC1D,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACxD;AAGD,wBAAgB,kBAAkB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,qBAAqB,QAsE1G;AAGD,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,EAAE,iBAAiB,QA0B1F;AAED,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,oBAAoB,QAOxF"}

package/dist/components/Select/hooks.js

@@ -0,0 +1,114 @@
+import { useEffect } from 'react';
+/* this runs whenever the selection panel is opened */
+export function useOpenPanelEffect({ open, setOpen, setSearch, element, searchable }) {
+    useEffect(() => {
+        if (open) {
+            setSearch('');
+            const selectionPanel = element.current?.querySelector('.selection-panel');
+            selectionPanel?.querySelector('.options')?.scrollTo({ top: 0 });
+            const getCurrent = () => selectionPanel?.querySelector('.option.focused');
+            const scrollTo = (item) => {
+                const list = item.closest('.options');
+                if (!list)
+                    return;
+                const { top: listTop, height: listHeight } = list.getBoundingClientRect();
+                const { height: itemHeight, top: itemTop } = item.getBoundingClientRect();
+                const offset = itemTop + list.scrollTop - listTop;
+                if ((list.scrollTop + listHeight < offset + itemHeight) || list.scrollTop > offset) {
+                    list.scrollTo({ top: offset });
+                }
+            };
+            /* keyboard and mouse controls */
+            const listenToMouse = (event) => {
+                if (!selectionPanel?.contains(event.target)) {
+                    setOpen(false);
+                }
+            };
+            const listenToKeyboard = (event) => {
+                const isCharacter = event.key.length === 1;
+                if (['Escape', 'ArrowUp', 'ArrowDown', 'Enter'].includes(event.key) ||
+                    (searchable && (isCharacter || event.key === 'Backspace'))) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+                if (event.key === 'Escape')
+                    setOpen(false);
+                if (searchable) {
+                    if (isCharacter)
+                        setSearch(v => `${v}${event.key}`);
+                    if (event.key === 'Backspace')
+                        setSearch(v => v?.substring(0, v.length - 1));
+                }
+                if (event.key === 'ArrowDown') {
+                    const current = getCurrent();
+                    const next = (current?.nextElementSibling ?? selectionPanel?.querySelector('.option'));
+                    if (next) {
+                        current?.classList.remove('focused');
+                        next.classList.add('focused');
+                        scrollTo(next);
+                    }
+                }
+                if (event.key === 'ArrowUp') {
+                    const current = getCurrent();
+                    const prev = (current?.previousElementSibling ?? selectionPanel?.querySelector('.option:last-child'));
+                    if (prev) {
+                        current?.classList.remove('focused');
+                        prev.classList.add('focused');
+                        scrollTo(prev);
+                    }
+                }
+                if (event.key === 'Enter') {
+                    setTimeout(() => getCurrent()?.click(), 0);
+                }
+            };
+            // below, we wait 20ms so the same click that opened the select doesn't close it. Removing it will cause problems with selects under
+            // labels.
+            setTimeout(() => document.addEventListener('click', listenToMouse), 20);
+            document.addEventListener('keydown', listenToKeyboard);
+            return () => {
+                document.removeEventListener('click', listenToMouse);
+                document.removeEventListener('keydown', listenToKeyboard);
+                getCurrent()?.classList.remove('focused');
+            };
+        }
+    }, [open]);
+}
+/* this runs whenever the select is focused */
+export function useFocusEffect({ element, focused, setFocused, setOpen }) {
+    useEffect(() => {
+        if (focused) {
+            const listenToMouse = (event) => {
+                if (!element.current?.contains(event.target)) {
+                    setFocused(false);
+                }
+            };
+            const listenToKeyboard = (event) => {
+                if (['Enter', 'ArrowDown', 'ArrowUp'].includes(event.key)) {
+                    event.preventDefault();
+                    if (!element.current?.classList.contains('open'))
+                        setOpen(true);
+                }
+                if (event.key === 'Tab') {
+                    setFocused(false);
+                    if (element.current?.classList.contains('open'))
+                        setOpen(false);
+                }
+            };
+            document.addEventListener('click', listenToMouse);
+            document.addEventListener('keydown', listenToKeyboard);
+            return () => {
+                document.removeEventListener('click', listenToMouse);
+                document.removeEventListener('keydown', listenToKeyboard);
+            };
+        }
+    }, [focused]);
+}
+export function useDisabledEffect({ disabled, setOpen, setFocused }) {
+    useEffect(() => {
+        if (disabled) {
+            setOpen(false);
+            setFocused(false);
+        }
+    }, [disabled]);
+}
+//# sourceMappingURL=hooks.js.map

package/dist/components/Select/hooks.js.map

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

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

@@ -31,7 +31,7 @@ export interface CommonSelectProps<T> extends WithColorScheme {
      * @param option the item to compute a key for.
      * @returns a string key.
      */
-    renderKey?: (value: T) => string | number | undefined;
+    renderKey?: (option: T) => string | number | undefined;
     /**
      * Whether or not this input is required. This is also used to figure out if an empty option should be rendered or not.
      *
@@ -72,6 +72,10 @@ export interface CommonSelectProps<T> extends WithColorScheme {
      * @default 'rich'
      */
     type?: 'simple' | 'rich';
+    /**
+     * A text to show when no option is selected.
+     */
+    placeholder?: string;
 }
 export interface SimpleSelectProps<T> extends CommonSelectProps<T> {
     type: 'simple';
@@ -89,18 +93,18 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
      * A function to render the option in the selectable list.
      *
      * The `renderLabel` function is used if this is not provided.
-     * @param value the option.
+     * @param option the option.
      * @returns the React Node.
      */
-    renderOption?: (value: T | undefined) => React.ReactNode;
+    renderOption?: (option: T | undefined) => React.ReactNode;
     /**
      * A function to render the selected option in the header.
      *
      * The `renderOption` function is used if this is not provided.
-     * @param value the option.
+     * @param option the option.
      * @returns the React Node.
      */
-    renderHeader?: (value: T | undefined) => React.ReactNode;
+    renderHeader?: (option: T | undefined) => React.ReactNode;
     /**
      * The maximum height of the options list in pixels.
      *
@@ -113,6 +117,10 @@ export interface RichSelectProps<T> extends CommonSelectProps<T> {
      */
     showArrow?: boolean;
     ref?: React.MutableRefObject<HTMLDivElement>;
+    /**
+     * Text to show in the header when no option is selected.
+     */
+    placeholder?: string;
 }
 export type BaseSelectProps<T> = SimpleSelectProps<T> | RichSelectProps<T>;
 export type SelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange'> & BaseSelectProps<T>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC3D;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IAC/C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACtD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IACnF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IAClF;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC;CAClE;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IACzD;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;CAC9C;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAE1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,eAAe;IAC3D;;OAEG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC;IACV;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,SAAS,KAAK,MAAM,CAAC;IAC/C;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACvD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IACnF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC,CAAC;IAClF;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,iBAAiB,CAAC,CAAC;CAClE;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,CAAE,SAAQ,iBAAiB,CAAC,CAAC,CAAC;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC7C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA;AAE1E,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA"}

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export * from './components/ProgressCircular.js';
 export * from './components/RadioGroup.js';
 export * from './components/Rating.js';
 export * from './components/Select/index.js';
+export * from './components/Select/MultiSelect.js';
 export * from './components/SelectBox.js';
 export * from './components/Skeleton.js';
 export * from './components/Slider.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/index.js

@@ -37,6 +37,7 @@ export * from './components/ProgressCircular.js';
 export * from './components/RadioGroup.js';
 export * from './components/Rating.js';
 export * from './components/Select/index.js';
+export * from './components/Select/MultiSelect.js';
 export * from './components/SelectBox.js';
 export * from './components/Skeleton.js';
 export * from './components/Slider.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,2BAA2B,CAAA;AACzC,cAAc,qBAAqB,CAAA;AACnC,cAAc,0BAA0B,CAAA;AACxC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,qBAAqB,CAAA;AACnC,cAAc,8BAA8B,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,uBAAuB,CAAA;AACrC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,wBAAwB,CAAA;AACtC,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oBAAoB,CAAA;AAClC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,0BAA0B,CAAA;AACxC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,sBAAsB,CAAA;AACpC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,qBAAqB,CAAA;AACnC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,wBAAwB,CAAA;AACtC,cAAc,uBAAuB,CAAA;AACrC,cAAc,qBAAqB,CAAA;AACnC,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,0BAA0B,CAAA;AAExC,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA"}

package/dist/utils/checkbox.js

@@ -54,7 +54,7 @@ export function useCheckboxGroupControls(params) {
         /**
          * Apply a new filter.
          */
-        setFilter: setFilter,
+        setFilter,
         /**
          * The options that should be passed to the checkbox group.
          */

package/dist/utils/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/utils/checkbox.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/citric-react",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "author": "StackSpot",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CheckboxGroup.tsx

@@ -68,6 +68,18 @@ export interface BaseCheckboxGroupProps<T = any> extends WithColorScheme {
    * @returns true if the item should be disabled, false otherwise.
    */
   isDisabled?: (option: T) => boolean,
+  /**
+   * The space between options.
+   * 
+   * @default "8px"
+   */
+  gap?: string,
+  /**
+   * If set to false, the checkboxes will have tabIndex = -1.
+   * 
+   * @default true
+   */
+  focusable?: boolean,
 }
 
 export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseCheckboxGroupProps<T>
@@ -79,6 +91,8 @@ export type CheckboxGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'on
  * 
  * Tip: if you need to implement features like "search" and "select all", use the hook `useCheckboxGroupControls`.
  * 
+ * Tip: If you need a checkbox group that doesn't occupy much height, consider using a MultiSelect.
+ * 
  * @example
  * 
  * ```
@@ -106,6 +120,8 @@ export const CheckboxGroup = withRef(
     isDisabled,
     colorScheme,
     style,
+    gap = '8px',
+    focusable = true,
     ...props
   }: CheckboxGroupProps<T>) {
     const items = useMemo(() => {
@@ -121,6 +137,7 @@ export const CheckboxGroup = withRef(
           checked={value.includes(o) || (!isNil(key) && valueKeys.includes(key))}
           onChange={(e) => onChange?.(e.target.checked ? [...(value ?? []), o] : (value?.filter(item => item != o) ?? []))}
           disabled={isDisabled?.(o)}
+          tabIndex={focusable ? undefined : -1}
         />
         return renderItem ? renderItem(checkbox, o) : (
           <CitricComponent tag="label" component={`${appearance}-row`} key={key} colorScheme={colorScheme}>
@@ -130,6 +147,6 @@ export const CheckboxGroup = withRef(
         )
       })
     }, [options, value, name, colorScheme, appearance])
-    return <Column {...props} style={{ gap: '8px', ...style }}>{items}</Column>
+    return <Column {...props} style={{ gap, ...style }}>{items}</Column>
   },
 )

package/src/components/CitricComponent.ts

@@ -5,7 +5,7 @@ export type CitricComponentName = 'alert' | 'avatar' | 'badge' | 'blockquote' |
   'checkbox-row' | 'divider' | 'field-group' | 'form-group' | 'form' | 'icon-box' | 'input' | 'link' | 'pagination' | 'progress-bar' |
   'progress-circular' | 'radio' | 'radio-row' | 'rating' | 'select' | 'select-box' | 'skeleton' | 'slider' | 'switch' | 'switch-row' |
   'table' | 'tabs' | 'accordion' | 'favorite' | 'textarea' | 'avatar-group' | 'labeled-slider' | 'rich-select' | 'tooltip' | 'menu' |
-  'circle'
+  'circle' | 'multi-select'
 
 interface BaseCitricProps extends WithColorScheme, WithColorPalette {
   component: CitricComponentName,

package/src/components/RadioGroup.tsx

@@ -63,6 +63,18 @@ export interface BaseRadioGroupProps<T> extends WithColorScheme {
    * @returns true if the item should be disabled, false otherwise.
    */
   isDisabled?: (option: T) => boolean,
+  /**
+   * The space between options.
+   * 
+   * @default "8px"
+   */
+  gap?: string,
+  /**
+   * If set to false, the checkboxes will have tabIndex = -1.
+   * 
+   * @default true
+   */
+  focusable?: boolean,
 }
 
 export type RadioGroupProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'onChange' | 'children'> & BaseRadioGroupProps<T>
@@ -101,6 +113,8 @@ export const RadioGroup = withRef(
     renderItem,
     isDisabled,
     colorScheme,
+    gap = '8px',
+    focusable = true,
     style,
     ...props
   }: RadioGroupProps<T>) {
@@ -117,6 +131,7 @@ export const RadioGroup = withRef(
           checked={value === o || (!isNil(key) && valueKey === key)}
           onChange={() => onChange?.(o)}
           disabled={isDisabled?.(o)}
+          tabIndex={focusable ? undefined : -1}
         />
         return renderItem ? renderItem(radio, o) : (
           <CitricComponent tag="label" component="radio-row" key={key} colorScheme={colorScheme}>
@@ -126,6 +141,6 @@ export const RadioGroup = withRef(
         )
       })
     }, [options, value, name, colorScheme])
-    return <Column {...props} style={{ gap: '8px', ...style }}>{items}</Column>
+    return <Column {...props} style={{ gap, ...style }}>{items}</Column>
   },
 )

package/src/components/Select/MultiSelect.tsx

@@ -0,0 +1,207 @@
+import { listToClass } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { useMemo, useRef, useState } from 'react'
+import { useCheckboxGroupControls } from '../../utils/checkbox'
+import { applyCSSVariable } from '../../utils/css'
+import { defaultRenderKey, defaultRenderLabel } from '../../utils/options'
+import { withRef } from '../../utils/react'
+import { Checkbox } from '../Checkbox'
+import { CheckboxGroup } from '../CheckboxGroup'
+import { CitricComponent } from '../CitricComponent'
+import { Input } from '../Input'
+import { Row } from '../layout'
+import { ProgressCircular } from '../ProgressCircular'
+import { useDisabledEffect, useFocusEffect, useOpenPanelEffect } from './hooks'
+import { RichSelectProps } from './types'
+
+/**
+ * A component that looks like a Select and behaves like a CheckboxGroup. This is a component that lets the user select multiple options
+ * in a list.
+ * 
+ * Differently than then the component Select, this does not render the native select of the browser. Instead, it renders a series of
+ * checkboxes.
+ * 
+ * @example
+ * 
+ * ```
+ * const options = useMemo(() => [
+ *   { id: 1, name: 'Option 1' },
+ *   { id: 2, name: 'Option 2' },
+ *   { id: 3, name: 'Option 3' },
+ * ], [])
+ * 
+ * const [value, setValue] = useState<typeof options>([])
+ * 
+ * return <MultiSelect options={options} renderLabel={o => o.name} renderKey={o => o.id} value={value} setValue={setValue} />
+ * ```
+ */
+interface BaseMultiSelectProps<T> extends
+  Omit<RichSelectProps<T>, 'value' | 'onChange' | 'renderHeader' | 'renderLabel' | 'renderOption' | 'required' | 'onFocus' | 'onBlur'> {
+  value: T[],
+  onChange: (value: T[]) => void,
+  onFocus: (event: React.FocusEvent<HTMLElement, Element>) => void,
+  /**
+   * A function to render the option in the selectable list.
+   * 
+   * The `renderLabel` function is used if this is not provided.
+   * @param value the option.
+   * @returns the React Node.
+   */
+  renderOption?: (option: T) => React.ReactNode,
+  /**
+   * A function to render the selected options in the header.
+   * 
+   * The `renderOption` function is used if this is not provided.
+   * @param value the option.
+   * @returns the React Node.
+   */
+  renderHeader?: (value: T[]) => React.ReactNode,
+  /**
+   * A function to render the item label.
+   * @example
+   * `(option) => option.name`
+   * @default "the item's toString() result."
+   * @param option the item to render.
+   * @returns a React Node to render.
+   */
+  renderLabel?: (option: T) => string,
+  /**
+   * Whether or not to show a checkbox to select all or remove the selection.
+   * 
+   * @default false
+   */
+  showSelectAll?: boolean,
+}
+
+
+export type MultiSelectProps<T> = Omit<React.JSX.IntrinsicElements['div'], 'ref' | 'onChange' | 'onFocus' | 'onBlur'> &
+  BaseMultiSelectProps<T>
+
+export const MultiSelect = withRef(
+  function MultiSelect<T>({
+    ref,
+    options,
+    value = [],
+    onChange,
+    renderLabel = defaultRenderLabel,
+    renderKey = defaultRenderKey,
+    disabled,
+    loading,
+    renderOption,
+    renderHeader,
+    searchable,
+    maxHeight,
+    style,
+    className,
+    showArrow,
+    placeholder,
+    showSelectAll,
+    ...props
+  }: MultiSelectProps<T>,
+  ) {
+    const t = useTranslate(dictionary)
+    const _element = useRef<HTMLDivElement | null>(null)
+    const element = ref ?? _element
+    const [open, setOpen] = useState(false)
+    const [focused, setFocused] = useState(false)
+    const controls = useCheckboxGroupControls({
+      options,
+      renderKey,
+      initialValue: value,
+      onChange,
+      applyFilter: (filter, option) => renderLabel(option).toLocaleLowerCase().includes(filter.toLocaleLowerCase()),
+    })
+
+    useOpenPanelEffect({ open, setOpen, setSearch: controls.setFilter, element, searchable })
+    useFocusEffect({ element, focused, setFocused, setOpen })
+    useDisabledEffect({ disabled, setOpen, setFocused })
+
+    const header = useMemo(() => {
+      if (value.length === 0) return <span className="placeholder">{placeholder}</span>
+      const reverse = value.reverse()
+      return (
+        (renderHeader?.(reverse)
+          ?? (renderOption ? <Row gap="4px">{reverse.map(renderOption)}</Row> : <span>{reverse.map(renderLabel).join(', ')}</span>))
+          || <span></span>
+      )}, [value, placeholder])
+
+    return (
+      <CitricComponent
+        tag="div"
+        component="multi-select"
+        style={maxHeight ? applyCSSVariable(style, 'max-height', `${maxHeight}px`) : style}
+        className={listToClass([className, showArrow === false && 'hide-arrow', open && 'open', focused && 'focused'])}
+        ref={element}
+        aria-busy={loading}
+        {...props}
+      >
+        <header
+          onClick={(e) => {
+            if (disabled) return
+            if (!open) e.stopPropagation()
+            setFocused(true)
+            setOpen(true)
+          }}
+          onFocus={() => setFocused(true)}
+          aria-label={t.accessibilityHelp}
+          tabIndex={0}
+          className={renderHeader ? 'custom' : undefined}
+        >
+          {header}
+          {loading && <ProgressCircular size="xs" className="loader" />}
+        </header>
+        <div className="selection-panel" aria-hidden={!open} {...(open ? {} : { inert: 'true' })}>
+          {searchable && <div className="search-bar">
+            <div data-citric="field-group" className="auto">
+              <i data-citric="icon-box" className="citric-icon outline Search"></i>
+              <Input type="search" value={controls.filter} onChange={controls.setFilter} aria-label={t.searchAccessibility} />
+            </div>
+          </div>}
+          {showSelectAll && (
+            <Checkbox
+              className="select-all"
+              onChange={checked => checked ? controls.selectAll() : controls.removeSelection()}
+              value={controls.isAllSelected}
+            >
+              {controls.isAllSelected ? t.removeSelection : t.selectAll}
+            </Checkbox>
+          )}
+          <CheckboxGroup
+            className="options"
+            gap="0"
+            options={controls.options}
+            onChange={controls.setValue}
+            value={controls.value}
+            renderKey={controls.renderKey}
+            focusable={false}
+            renderItem={(checkbox, option) => (
+              <CitricComponent
+                component="checkbox-row"
+                tag="label"
+                className={listToClass(['option', controls.isUnfilteredButChecked(option) && 'unfiltered'])}
+              >
+                {checkbox}
+                {renderOption?.(option) ?? renderLabel(option)}
+              </CitricComponent>
+            )}
+          />
+        </div>
+      </CitricComponent>
+    )
+  },
+)
+
+const dictionary = {
+  en: {
+    accessibilityHelp: 'Press the arrow down to select multiple options',
+    searchAccessibility: 'Filter the options',
+    removeSelection: 'Remove selection',
+    selectAll: 'Select all',
+  },
+  pt: {
+    accessibilityHelp: 'Pressione a seta para baixo para selecionar múltiplas opções',
+    searchAccessibility: 'Filtre as opções',
+    removeSelection: 'Remover seleção',
+    selectAll: 'Selecionar todos',
+  },
+}