@stack-spot/portal-components 2.5.2 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [2.6.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.6.0...portal-components@v2.6.1) (2024-09-26)
+
+
+### Bug Fixes
+
+* Accessibility 517 visualize notification button ([e919b44](https://github.com/stack-spot/portal-commons/commit/e919b446130c15d11c73b2d3336f92fee3f4c8b7))
+* docs ([f488e48](https://github.com/stack-spot/portal-commons/commit/f488e48bdf0156265ddb6fcd279938c8a46c0bf1))
+
+## [2.6.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.5.2...portal-components@v2.6.0) (2024-09-20)
+
+
+### Features
+
+* enhance select ([#377](https://github.com/stack-spot/portal-commons/issues/377)) ([af5d011](https://github.com/stack-spot/portal-commons/commit/af5d011ed0c69f973160d9d7d2e3bb2992653dd0))
+
 ## [2.5.2](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.5.1...portal-components@v2.5.2) (2024-09-16)
 
 

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

@@ -0,0 +1,81 @@
+import { CustomSelectProps } from './types.js';
+/**
+ * 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 declare function CustomSelect<T>({ onChange, options, value, emptyOption, renderLabel, renderValue, maxItems, onFocus, onBlur, style, className, isLoading, disabled, height, ...props }: CustomSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CustomSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/CustomSelect.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,SAAS,CAAA;AAkC9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,QAAY,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EACrI,MAAe,EAAE,GAAG,KAAK,EAC1B,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA6GtB"}

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

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.js';
+import { SelectBox } from './styled.js';
+import { parseLabel } from './utils.js';
+function getOptionAsValue(option, renderer) {
+    let result;
+    if (typeof renderer === 'function')
+        result = option ? renderer(option) : undefined;
+    else if (typeof renderer === 'string')
+        result = option[renderer];
+    return result ? result : `${option ?? ''}`;
+}
+function getOptionAsLabel(option, renderer) {
+    let result;
+    if (typeof renderer === 'function')
+        result = option ? renderer(option) : undefined;
+    else if (typeof renderer === 'string')
+        result = option[renderer];
+    return result ? result : parseLabel(`${option ?? ''}`);
+}
+const FakeOption = ({ value, label, onChange }) => (_jsx("li", { className: "option", onClick: () => onChange({ target: { value } }), children: label }));
+/**
+ * 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({ onChange, options, value, emptyOption, renderLabel, renderValue, maxItems = 6, onFocus, onBlur, style, className, isLoading, disabled, height = '42px', ...props }) {
+    const [open, setOpen] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const fakeSelectRef = useRef(null);
+    const listHeight = useRef(0);
+    const isDisabled = disabled || isLoading;
+    const isMeasuring = useRef(false);
+    const onChangeOption = useCallback((event) => {
+        const value = options?.find(o => getOptionAsValue(o, renderValue) === event.target.value);
+        onChange(value);
+        setOpen(false);
+    }, [options]);
+    const onClickOutside = useCallback((event) => {
+        if (fakeSelectRef.current && !fakeSelectRef.current.contains(event.target))
+            setOpen(false);
+    }, []);
+    const [htmlOptions, fakeOptions] = useMemo(() => (options ?? []).reduce(([opts, fake], o) => {
+        const id = getOptionAsValue(o, renderValue);
+        const label = getOptionAsLabel(o, renderLabel);
+        return [
+            [...opts, _jsx("option", { value: id, selected: value === id, children: label.text }, id)],
+            [...fake, _jsx(FakeOption, { value: id, label: label.option, onChange: onChangeOption }, id)],
+        ];
+    }, [[], []]), [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 (_jsxs(SelectBox, { style: style, className: className, "$maxItems": maxItems, "$inputHeight": height, children: [_jsxs("select", { ...props, value: getCurrentValue(), onChange: onChangeOption, onFocus: (ev) => {
+                    setFocused(true);
+                    onFocus?.(ev);
+                }, onBlur: (ev) => {
+                    setFocused(false);
+                    onBlur?.(ev);
+                }, disabled: isDisabled, "aria-busy": isLoading, children: [emptyOption === undefined ? null : _jsx("option", { value: "", selected: !value, children: emptyOption.text }), htmlOptions] }), _jsxs("div", { ref: fakeSelectRef, className: listToClass(['fake-select', open && 'open', focused && 'focused', isDisabled && 'disabled']), "aria-hidden": true, children: [_jsxs("div", { className: "current-value", onClick: isDisabled ? undefined : () => setOpen(!open), children: [getCurrentLabel()?.selected || getCurrentLabel()?.option || _jsx("div", {}), isLoading ? _jsx(LoadingCircular, { size: "sm" }) : _jsx(IconBox, { className: "arrow", children: _jsx(ChevronDown, {}) })] }), _jsxs("ul", { className: "options", style: { height: open ? listHeight.current : 0 }, children: [emptyOption === undefined ? null : _jsx(FakeOption, { value: "", label: emptyOption.option, onChange: onChangeOption }), fakeOptions] })] })] }));
+}
+//# sourceMappingURL=CustomSelect.js.map

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

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

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

@@ -0,0 +1,65 @@
+import { DetailedSelectProps } from './types.js';
+/**
+ * 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 DetailedSelect lets you set an image, a title and a description for each option. To do so, use the prop `renderLabel` and
+ * `emptyOption`. The accessible string for each option will always be `option.title: option.description`.
+ *
+ * To use more customizable labels, check the `CustomSelect`. To use more simple labels (just strings) use `Select`.
+ *
+ * The DetailedSelect expects a {@link DetailedLabel} 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 to set the option's title.
+ *
+ * @example
+ * options as a string array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ *
+ * function renderDetailedLabel(option: string) {
+ *   return {
+ *     title: option,
+ *     description: 'my description',
+ *     image: <img src="/my-image.png" />,
+ *  }
+ * }
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <DetailedSelect options={options} value={value} onChange={setValue} renderLabel={renderDetailedLabel} />
+ * }
+ * ```
+ * @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 renderDetailedLabel(option: (typeof options)[number]) {
+ *   return {
+ *     title: option.name,
+ *     description: `${option.age} years old`,
+ *     image: <img src="/my-image.png" />,
+ *   }
+ * }
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id`
+ *   return <DetailedSelect options={options} value={value} onChange={setValue} renderValue="id" renderLabel={renderDetailedLabel} />
+ * }
+ * ```
+ * @param props the component props: {@link DetailedSelectProps}.
+ */
+export declare function DetailedSelect<T>({ renderLabel, emptyOption, ...props }: DetailedSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DetailedSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/DetailedSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,mBAAmB,EAAqC,MAAM,SAAS,CAAA;AAgB/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAI/F"}

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

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { CustomSelect } from './CustomSelect.js';
+import { parseLabel } from './utils.js';
+function getOptionAsLabel(option, renderer) {
+    let result;
+    if (typeof renderer === 'function')
+        result = option ? renderer(option) : undefined;
+    else if (typeof renderer === 'string')
+        result = option[renderer];
+    return parseLabel(result ?? `${option ?? ''}`);
+}
+/**
+ * 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 DetailedSelect lets you set an image, a title and a description for each option. To do so, use the prop `renderLabel` and
+ * `emptyOption`. The accessible string for each option will always be `option.title: option.description`.
+ *
+ * To use more customizable labels, check the `CustomSelect`. To use more simple labels (just strings) use `Select`.
+ *
+ * The DetailedSelect expects a {@link DetailedLabel} 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 to set the option's title.
+ *
+ * @example
+ * options as a string array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ *
+ * function renderDetailedLabel(option: string) {
+ *   return {
+ *     title: option,
+ *     description: 'my description',
+ *     image: <img src="/my-image.png" />,
+ *  }
+ * }
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <DetailedSelect options={options} value={value} onChange={setValue} renderLabel={renderDetailedLabel} />
+ * }
+ * ```
+ * @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 renderDetailedLabel(option: (typeof options)[number]) {
+ *   return {
+ *     title: option.name,
+ *     description: `${option.age} years old`,
+ *     image: <img src="/my-image.png" />,
+ *   }
+ * }
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id`
+ *   return <DetailedSelect options={options} value={value} onChange={setValue} renderValue="id" renderLabel={renderDetailedLabel} />
+ * }
+ * ```
+ * @param props the component props: {@link DetailedSelectProps}.
+ */
+export function DetailedSelect({ renderLabel, emptyOption, ...props }) {
+    const renderLabelRef = useCallback((option) => getOptionAsLabel(option, renderLabel), []);
+    // @ts-ignore the following usage is correct, Typescript is getting confused because it doesn't know if `emptyOption` is undefined or not.
+    return _jsx(CustomSelect, { renderLabel: renderLabelRef, emptyOption: emptyOption ? parseLabel(emptyOption) : undefined, ...props });
+}
+//# sourceMappingURL=DetailedSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DetailedSelect.js","sourceRoot":"","sources":["../../../../src/components/form/Select/DetailedSelect.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpC,SAAS,gBAAgB,CAIvB,MAAc,EACd,QAAuB;IAEvB,IAAI,MAAiC,CAAA;IACrC,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;SAC7E,IAAI,OAAO,QAAQ,KAAK,QAAQ;QAAE,MAAM,GAAG,MAAM,CAAC,QAAwB,CAAkB,CAAA;IACjG,OAAO,UAAU,CAAC,MAAM,IAAI,GAAG,MAAM,IAAI,EAAE,EAAE,CAAC,CAAA;AAChD,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,MAAM,UAAU,cAAc,CAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,EAA0B;IAC9F,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,MAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC,CAAA;IAC5F,0IAA0I;IAC1I,OAAO,KAAC,YAAY,IAAC,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,KAAM,KAAK,GAAI,CAAA;AACjI,CAAC"}

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

@@ -0,0 +1,47 @@
+import { SelectProps } from './types.js';
+/**
+ * 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 Select component renders each option as a string. To use more customizable labels, check the `DetailedSelect` and `CustomSelect`
+ * components.
+ *
+ * The Select component expects plain strings 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 a string array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <Select options={options} value={value} onChange={setValue} />
+ * }
+ * ```
+ * @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 }]
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id` and renderLabel `o => o.name`.
+ *   return <Select options={options} value={value} onChange={setValue} renderValue="id" renderLabel="name" />
+ * }
+ * ```
+ * @param props the component props: {@link CustomSelectProps}.
+ */
+export declare function Select<T>({ renderLabel, emptyOption, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqC,WAAW,EAAE,MAAM,SAAS,CAAA;AAgBxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,wBAAgB,MAAM,CAAC,CAAC,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC,2CAI/E"}

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { CustomSelect } from './CustomSelect.js';
+import { parseLabel } from './utils.js';
+function getOptionAsLabel(option, renderer) {
+    let result;
+    if (typeof renderer === 'function')
+        result = option ? renderer(option) : undefined;
+    else if (typeof renderer === 'string')
+        result = option[renderer];
+    return parseLabel(result ?? `${option ?? ''}`);
+}
+/**
+ * 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 Select component renders each option as a string. To use more customizable labels, check the `DetailedSelect` and `CustomSelect`
+ * components.
+ *
+ * The Select component expects plain strings 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 a string array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <Select options={options} value={value} onChange={setValue} />
+ * }
+ * ```
+ * @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 }]
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id` and renderLabel `o => o.name`.
+ *   return <Select options={options} value={value} onChange={setValue} renderValue="id" renderLabel="name" />
+ * }
+ * ```
+ * @param props the component props: {@link CustomSelectProps}.
+ */
+export function Select({ renderLabel, emptyOption, ...props }) {
+    const renderLabelRef = useCallback((option) => getOptionAsLabel(option, renderLabel), []);
+    // @ts-ignore the following usage is correct, Typescript is getting confused because it doesn't know if `emptyOption` is undefined or not.
+    return _jsx(CustomSelect, { renderLabel: renderLabelRef, emptyOption: emptyOption ? parseLabel(emptyOption) : undefined, ...props });
+}
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../src/components/form/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEpC,SAAS,gBAAgB,CAIvB,MAAc,EACd,QAAuB;IAEvB,IAAI,MAA0B,CAAA;IAC9B,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;SAC7E,IAAI,OAAO,QAAQ,KAAK,QAAQ;QAAE,MAAM,GAAG,MAAM,CAAC,QAAwB,CAAW,CAAA;IAC1F,OAAO,UAAU,CAAC,MAAM,IAAI,GAAG,MAAM,IAAI,EAAE,EAAE,CAAC,CAAA;AAChD,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,UAAU,MAAM,CAAI,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,KAAK,EAAkB;IAC9E,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,MAAS,EAAE,EAAE,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,EAAE,CAAC,CAAA;IAC5F,0IAA0I;IAC1I,OAAO,KAAC,YAAY,IAAC,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,KAAM,KAAK,GAAI,CAAA;AACjI,CAAC"}

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

@@ -0,0 +1,5 @@
+export { CustomSelect } from './CustomSelect.js';
+export { DetailedSelect } from './DetailedSelect.js';
+export { Select } from './Select.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,cAAc,SAAS,CAAA"}

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

@@ -0,0 +1,5 @@
+export { CustomSelect } from './CustomSelect.js';
+export { DetailedSelect } from './DetailedSelect.js';
+export { Select } from './Select.js';
+export * from './types.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,cAAc,SAAS,CAAA"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxItems: number;
+    $inputHeight: string;
+}>> & string;
+//# sourceMappingURL=styled.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/styled.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,SAAS;eAA2B,MAAM;kBAAgB,MAAM;YAiK5E,CAAA"}