@trilogy-ds/react 0.0.1-beta.33 → 0.0.1-beta.35

package/lib/components/select/SelectProps.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { IconName, IconNameValues } from '../icon';
 import { Accessibility } from '../../objects';
+import { IconName, IconNameValues } from '../icon';
 export interface ISelectOption {
     value: string | undefined;
     name: string | undefined;
@@ -11,36 +11,25 @@ export interface SelectChangeEvent {
     selectName?: string;
     selectId?: string;
     name?: string;
+    selectedOptions?: string[];
 }
-export type SelectChangeEventHandler<T = SelectChangeEvent | number | string> = (event: T) => void;
-interface ISelectCommunProps<T = SelectChangeEvent | number | string> {
+export type SelectChangeEventHandler<T = SelectChangeEvent> = (event: T) => void;
+export type SelectedValue = string | number | string[] | undefined;
+export type ParamEventSelectFocus = React.FocusEvent | React.BaseSyntheticEvent;
+export interface SelectProps<T = SelectChangeEvent> extends Accessibility {
     onChange?: SelectChangeEventHandler<T>;
-    onFocus?: (event: React.FocusEvent | React.BaseSyntheticEvent) => void;
-    onBlur?: (event: React.FocusEvent | React.BaseSyntheticEvent | MouseEvent) => void;
+    onFocus?: (event: ParamEventSelectFocus) => void;
+    onBlur?: (event: unknown) => void;
     label?: string;
     children?: React.ReactNode;
     disabled?: boolean;
     iconName?: IconName | IconNameValues;
-    selected?: string | number;
-    styled?: boolean;
+    selected?: SelectedValue;
     id?: string;
     name?: string;
-}
-export interface SelectProps extends Accessibility, ISelectCommunProps {
+    multiple?: boolean;
     className?: string;
-    classNameOptions?: string;
     nullable?: boolean;
-    onMouseEnter?: (event: React.MouseEvent) => void;
-    onMouseLeave?: (event: React.MouseEvent) => void;
     placeholder?: string;
     native?: boolean;
 }
-export interface IAccessibleSelect extends Accessibility, ISelectCommunProps {
-    selecteClasses?: string;
-}
-export interface ICustomSelect extends Accessibility, ISelectCommunProps {
-    selecteClasses?: string;
-    nullable?: boolean;
-    classNameOptions?: string;
-}
-export {};

package/lib/components/select/option/SelectOption.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { SelectOptionProps } from "./SelectOptionProps";
+import { SelectOptionProps } from './SelectOptionProps';
 /**
  * Select Option Component
  * @param value {string} Select option value
@@ -11,8 +11,7 @@ import { SelectOptionProps } from "./SelectOptionProps";
  * @param iconName {IconName | IconNameValues} icon
  * @param disabled {boolean} disable option
  * @param onClick {function} onclick function
- * @param selected {boolean} Selected option
  * @param id {string} Select option custom id
  */
-declare const SelectOption: ({ id, className, selected, value, disabled, children, onClick, label, iconName, testId, ...others }: SelectOptionProps) => JSX.Element;
+declare const SelectOption: ({ id, className, value, disabled, children, onClick, label, iconName, testId, ...others }: SelectOptionProps) => JSX.Element;
 export default SelectOption;

package/lib/components/select/option/SelectOption.js

@@ -1,8 +1,6 @@
-import * as React from "react";
-import clsx from "clsx";
-import { hashClass } from "../../../helpers";
-import { useTrilogyContext } from "../../../context";
-import { Icon } from "../../icon";
+import clsx from 'clsx';
+import { Radio } from '../../../components/radio';
+import * as React from 'react';
 /**
  * Select Option Component
  * @param value {string} Select option value
@@ -14,15 +12,15 @@ import { Icon } from "../../icon";
  * @param iconName {IconName | IconNameValues} icon
  * @param disabled {boolean} disable option
  * @param onClick {function} onclick function
- * @param selected {boolean} Selected option
  * @param id {string} Select option custom id
  */
-const SelectOption = ({ id, className, selected, value, disabled, children, onClick, label, iconName, testId, ...others }) => {
-    const { styled } = useTrilogyContext();
-    return (React.createElement("div", { role: 'option', tabIndex: 0, className: hashClass(styled, clsx("select-options-option", selected && !disabled && "select-options-option-activated", disabled && !selected && "select-options-option-disabled", iconName && "has-icon", className)), "data-testid": testId, id: id, "data-option-name": children || label, "data-option-value": value, onMouseUp: onClick, "aria-disabled": disabled, "aria-selected": selected ? "true" : "false", ...others },
-        React.createElement("div", { className: hashClass(styled, clsx(iconName && "has-icon")) },
-            iconName && React.createElement(Icon, { name: iconName, size: 'small' }),
-            children || label)));
+const SelectOption = ({ id, className, value, disabled, children, onClick, label, iconName, testId, ...others }) => {
+    const { checked, native, focused, ...props } = others;
+    const selectClasses = React.useMemo(() => clsx(focused && 'focus', className), [focused, className]);
+    if (native) {
+        return (React.createElement("option", { role: 'option', id: id, value: value, disabled: disabled, "aria-label": label, "data-testid": testId, onClick: onClick, ...props }, children || label));
+    }
+    return (React.createElement(Radio, { checked: checked, tile: true, horizontalTile: true, marginless: true, className: selectClasses, value: value, disabled: disabled, onClick: onClick, iconTile: iconName, description: label || children, ...others }));
 };
 export default SelectOption;
 //# sourceMappingURL=SelectOption.js.map

package/lib/components/select/option/SelectOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.js","sourceRoot":"","sources":["../../../../components/select/option/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC;;;;;;;;;;;;;GAaG;AACH,MAAM,YAAY,GAAG,CAAC,EACpB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,MAAM,EACS,EAAe,EAAE;IACnC,MAAM,EAAE,MAAM,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAEtC,OAAO,CACL,6BACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,SAAS,CAClB,MAAM,EACN,IAAI,CACF,uBAAuB,EACvB,QAAQ,IAAI,CAAC,QAAQ,IAAI,iCAAiC,EAC1D,QAAQ,IAAI,CAAC,QAAQ,IAAI,gCAAgC,EACzD,QAAQ,IAAI,UAAU,EACtB,SAAS,CACV,CACF,iBACY,MAAM,EACnB,EAAE,EAAE,EAAE,sBACY,QAAQ,IAAI,KAAK,uBAChB,KAAK,EACxB,SAAS,EAAE,OAAO,mBACH,QAAQ,mBACR,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,KACtC,MAAM;QAEV,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,UAAU,CAAC,CAAC;YAC5D,QAAQ,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG;YACjD,QAAQ,IAAI,KAAK,CACd,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}
+{"version":3,"file":"SelectOption.js","sourceRoot":"","sources":["../../../../components/select/option/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AACxC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B;;;;;;;;;;;;GAYG;AACH,MAAM,YAAY,GAAG,CAAC,EACpB,EAAE,EACF,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,GAAG,MAAM,EACS,EAAe,EAAE;IACnC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,GAAQ,MAAM,CAAA;IAC1D,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,EAAE,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAEpG,IAAI,MAAM,EAAE;QACV,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,gBACN,KAAK,iBACJ,MAAM,EACnB,OAAO,EAAE,OAAO,KACZ,KAAK,IAER,QAAQ,IAAI,KAAK,CACX,CACV,CAAA;KACF;IAED,OAAO,CACL,oBAAC,KAAK,IACJ,OAAO,EAAE,OAAO,EAChB,IAAI,QACJ,cAAc,QACd,UAAU,QACV,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,KAAK,IAAI,QAAQ,KAC1B,MAAM,GACV,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/lib/components/select/option/SelectOption.native.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { SelectOptionProps } from "./SelectOptionProps";
-import { ComponentName } from "../../enumsComponentsName";
+import { ComponentName } from '../../enumsComponentsName';
+import { SelectOptionProps } from './SelectOptionProps';
 /**
  * Select Option Component
  * @param value {string} Select option value
@@ -8,7 +8,7 @@ import { ComponentName } from "../../enumsComponentsName";
  * @param children {React.ReactNode}
  */
 declare const SelectOption: {
-    ({ value, label, children, ...others }: SelectOptionProps): JSX.Element;
+    ({ id, value, disabled, children, onClick, label, iconName, testId, ...others }: SelectOptionProps): JSX.Element;
     displayName: ComponentName;
 };
 export default SelectOption;

package/lib/components/select/option/SelectOption.native.js

@@ -1,14 +1,50 @@
-import * as React from "react";
-import { Picker } from "@react-native-picker/picker";
-import { ComponentName } from "../../enumsComponentsName";
+import * as React from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { TypographyBold } from '../../../objects/Typography';
+import { TrilogyColor, getColorStyle } from '../../../objects/facets/Color';
+import { Columns, ColumnsItem } from '../../columns';
+import { ComponentName } from '../../enumsComponentsName';
+import { Icon, IconSize } from '../../icon';
+import { Text } from '../../text';
 /**
  * Select Option Component
  * @param value {string} Select option value
  * @param label {string} Label value
  * @param children {React.ReactNode}
  */
-const SelectOption = ({ value, label, children, ...others }) => {
-    return (React.createElement(Picker.Item, { label: children || label, value: value || "", ...others }));
+const SelectOption = ({ id, value, disabled, children, onClick, label, iconName, testId, ...others }) => {
+    const { checked } = others;
+    const styles = React.useMemo(() => StyleSheet.create({
+        container: {
+            backgroundColor: (disabled && getColorStyle(TrilogyColor.DISABLED, 1)) || undefined,
+        },
+    }), [disabled]);
+    const textColor = React.useMemo(() => {
+        switch (true) {
+            case disabled === true:
+                return getColorStyle(TrilogyColor.DISABLED);
+            default:
+                return getColorStyle(TrilogyColor.MAIN);
+        }
+    }, [disabled]);
+    const iconColor = React.useMemo(() => {
+        switch (true) {
+            case disabled === true:
+                return TrilogyColor.DISABLED;
+            default:
+                return TrilogyColor.MAIN;
+        }
+    }, [disabled]);
+    return (React.createElement(TouchableOpacity, { style: [styles.container], ...others, onPress: onClick },
+        React.createElement(Columns, { ...{ style: { paddingVertical: 16, paddingHorizontal: 8 } } },
+            React.createElement(ColumnsItem, null,
+                React.createElement(Columns, null,
+                    iconName && (React.createElement(ColumnsItem, { size: 1, verticalCenter: true },
+                        React.createElement(Icon, { size: IconSize.SMALL, name: iconName, color: iconColor }))),
+                    React.createElement(ColumnsItem, { verticalCenter: true },
+                        React.createElement(Text, { typo: [checked && TypographyBold.TEXT_WEIGHT_SEMIBOLD], ...{ style: { paddingLeft: 8, color: textColor } } }, children || label)),
+                    checked && (React.createElement(ColumnsItem, { size: 1, verticalCenter: true },
+                        React.createElement(Icon, { size: IconSize.SMALL, name: 'tri-check', color: iconColor }))))))));
 };
 SelectOption.displayName = ComponentName.SelectOption;
 export default SelectOption;

package/lib/components/select/option/SelectOption.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.native.js","sourceRoot":"","sources":["../../../../components/select/option/SelectOption.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAA;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAEzD;;;;;GAKG;AACH,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,GAAG,MAAM,EACS,EAAe,EAAE;IACnC,OAAO,CACL,oBAAC,MAAM,CAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,KAAM,MAAM,GAAI,CAC1E,CAAA;AACH,CAAC,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,aAAa,CAAC,YAAY,CAAA;AAErD,eAAe,YAAY,CAAA"}
+{"version":3,"file":"SelectOption.native.js","sourceRoot":"","sources":["../../../../components/select/option/SelectOption.native.tsx"],"names":[],"mappings":"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"}

package/lib/components/select/web/SelectDynamic.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
-import { ICustomSelect } from "../SelectProps";
-declare const SelectDynamic: ({ styled, onChange, nullable, disabled, onFocus, onBlur, children, selected, name, id, testId, classNameOptions, selecteClasses, label, iconName, ...others }: PropsWithChildren<ICustomSelect>) => JSX.Element;
+import { PropsWithChildren } from 'react';
+import { SelectProps } from '../SelectProps';
+declare const SelectDynamic: ({ onChange, nullable, disabled, onFocus, onBlur, children, selected, name, id, testId, label, iconName, multiple, className, }: PropsWithChildren<SelectProps>) => JSX.Element;
 export default SelectDynamic;

package/lib/components/select/web/SelectDynamic.js

@@ -1,54 +1,191 @@
-import { hashClass } from "../../../helpers";
-import clsx from "clsx";
-import { useUtils } from "../hooks/utils";
-import { useAccessibility } from "../hooks/accessibility";
-import React from "react";
-import { Icon } from "../../icon";
-import SelectOption from "../option";
-import { has } from "../../../services";
-const SelectDynamic = ({ styled, onChange, nullable, disabled, onFocus, onBlur, children, selected, name, id, testId, classNameOptions, selecteClasses, label, iconName, ...others }) => {
-    const { handleChangeSelect, handleFocusCurrentOption, handleFocusSelect, handleOpenSelect, isOpenSelect, setIsOpenSelect, optionRefs, selectRef, selectedOption, } = useUtils({
-        onChange,
-        nullable,
-        disabled,
-        onFocus,
-        onBlur,
-        children,
-        selected,
-        name,
-        id,
-    });
-    const { handleKeyDown } = useAccessibility(isOpenSelect, handleChangeSelect, setIsOpenSelect, optionRefs, selectRef, handleFocusCurrentOption);
-    const optionsClasses = React.useMemo(() => hashClass(styled, clsx("select-options", classNameOptions)), [classNameOptions, styled]);
-    const selectedValueClasses = React.useMemo(() => hashClass(styled, clsx("select-value", !label && "no-label")), [styled]);
-    const controlClasses = React.useMemo(() => hashClass(styled, clsx("control", (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) && has("dynamic-placeholder"))), [styled, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value]);
-    return (React.createElement("div", { className: hashClass(styled, clsx("field")) },
-        React.createElement("div", { className: controlClasses },
-            React.createElement("div", { ...{ disabled: disabled }, ref: selectRef, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, id: id, "data-testid": testId, "data-select-name": name, className: selecteClasses, onClick: handleOpenSelect, onFocus: handleFocusSelect, "aria-haspopup": 'listbox', "aria-label": label, "aria-disabled": disabled, role: 'listbox', ...others },
-                iconName && React.createElement(Icon, { name: iconName, size: 'small' }),
-                label && React.createElement("label", null, label),
-                (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name) && (React.createElement("span", { className: selectedValueClasses }, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.name))),
-            React.createElement("div", { "data-is-open-options": isOpenSelect, className: optionsClasses, "aria-expanded": isOpenSelect, "aria-hidden": !isOpenSelect }, React.Children.map(children, (child, index) => {
-                if (React.isValidElement(child)) {
-                    const props = {
-                        ...child.props,
-                        selected: child.props.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value),
-                        onClick: () => {
-                            handleChangeSelect({
-                                selectValue: child.props.value,
-                                selectName: child.props.children || child.props.label,
-                                selectId: child.props.id,
-                                disabled: child.props.disabled,
-                            });
-                            if (child.props.onClick)
-                                child.props.onClick();
-                        },
-                    };
-                    return (React.createElement("div", { ...{ disabled: disabled }, "data-is-disabled": child.props.disabled, className: hashClass(styled, clsx("option-container")), "data-is-active": child.props.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value), "data-index": child.props.value, "data-id": child.props.id, "data-textcontent": child.props.children || child.props.label, onKeyDown: (e) => handleKeyDown(e, child), ref: (element) => (optionRefs.current[index] = element), tabIndex: child.props.value === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) ? 0 : -1, onMouseEnter: () => { var _a; return (_a = optionRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus(); }, onMouseLeave: () => { var _a; return (_a = optionRefs.current[index]) === null || _a === void 0 ? void 0 : _a.blur(); } },
-                        React.createElement(SelectOption, { ...props })));
+import clsx from 'clsx';
+import React, { useCallback, useMemo, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { hashClass } from '../../../helpers';
+import { Input } from '../../input';
+import SelectOption from '../option';
+import { useTrilogyContext } from './../../../context';
+const SelectDynamic = ({ onChange, nullable, disabled, onFocus, onBlur, children, selected, name, id, testId, label, iconName, multiple, className, }) => {
+    const { styled } = useTrilogyContext();
+    const [focused, setIsFocused] = React.useState(false);
+    const [selectedValues, setSelectedValues] = React.useState(selected);
+    const [selectedName, setSelectedName] = React.useState([]);
+    const reactId = React.useId();
+    const selectClasses = React.useMemo(() => hashClass(styled, clsx('select', className)), [styled, className]);
+    const [focusedIndex, setFocusedIndex] = useState(-1);
+    const onClickInput = React.useCallback(() => {
+        setIsFocused((prev) => !prev);
+    }, []);
+    const onKeyPressInput = React.useCallback((keyCode) => {
+        keyCode === 0 && setIsFocused((prev) => !prev);
+    }, []);
+    const isChecked = useCallback((value) => multiple && selectedValues && typeof selectedValues !== 'string' && typeof selectedValues !== 'number'
+        ? selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(value)
+        : selectedValues === value, [multiple, selectedValues]);
+    const setNewSelectedValues = useCallback(({ isChecked, children, label, value }) => {
+        const selectedOptions = [];
+        if (isChecked) {
+            setSelectedValues((prev) => {
+                switch (true) {
+                    case Array.isArray(prev) && nullable:
+                        setSelectedName((prev) => prev.filter((txt) => ![children, label].includes(txt)));
+                        const opts = prev.filter((item) => item !== value);
+                        selectedOptions.push(...opts);
+                        return opts;
+                    case Array.isArray(prev) && !nullable:
+                        selectedOptions.push(...prev);
+                        return prev;
+                    case !Array.isArray(prev) && !nullable:
+                        selectedOptions.push(value);
+                        setIsFocused(false);
+                        return prev;
+                    case !Array.isArray(prev) && nullable:
+                        setIsFocused(false);
+                        setSelectedName([]);
+                        return undefined;
+                    default:
+                        return value;
                 }
+            });
+        }
+        if (!isChecked) {
+            setSelectedValues((prev) => {
+                if (Array.isArray(prev)) {
+                    const opts = [...prev, value];
+                    selectedOptions.push(...opts);
+                    return opts;
+                }
+                selectedOptions.push(value);
+                return value;
+            });
+            setSelectedName((prev) => {
+                if (multiple)
+                    return [...prev, children || label];
+                setIsFocused(false);
+                return [children || label];
+            });
+        }
+        return selectedOptions;
+    }, [multiple, nullable]);
+    React.useEffect(() => {
+        var _a;
+        const labelSelected = (_a = React.Children.map(children, (child) => {
+            if (!React.isValidElement(child))
+                return false;
+            const label = child.props.children || child.props.label;
+            switch (true) {
+                case (Array.isArray(selected) && selected.includes(child.props.value)) ||
+                    (!Array.isArray(selected) && child.props.value === selected):
+                    return label;
+                default:
+                    return false;
+            }
+        })) === null || _a === void 0 ? void 0 : _a.filter((item) => item);
+        labelSelected && setSelectedName(labelSelected);
+        setSelectedValues(selected);
+    }, [selected]);
+    React.useEffect(() => {
+        const onKeyDown = (e) => {
+            const childs = children;
+            const child = childs[focusedIndex];
+            if (['ArrowDown', 'ArrowUp', 'Enter', 'Escape', ' '].includes(e.key))
+                e.preventDefault();
+            switch (true) {
+                case e.key === 'ArrowDown':
+                    options &&
+                        setFocusedIndex((prev) => {
+                            let nextIndex = (prev + 1) % options.length;
+                            if (childs[nextIndex].props.disabled)
+                                nextIndex++;
+                            return nextIndex % options.length;
+                        });
+                    break;
+                case e.key === 'ArrowUp' && focusedIndex !== -1:
+                    options &&
+                        setFocusedIndex((prev) => {
+                            let nextIndex = (prev - 1 + options.length) % options.length;
+                            if (childs[nextIndex].props.disabled)
+                                nextIndex--;
+                            if (nextIndex === -1)
+                                nextIndex = options.length - 1;
+                            return nextIndex % options.length;
+                        });
+                    break;
+                case e.key === 'ArrowUp' && focusedIndex === -1:
+                    options &&
+                        setFocusedIndex(() => {
+                            let nextIndex = options.length - 1;
+                            if (childs[nextIndex].props.disabled)
+                                nextIndex--;
+                            return nextIndex;
+                        });
+                    break;
+                case ['Enter', ' '].includes(e.key) && focusedIndex !== -1 && !child.props.disabled:
+                    const isCheckedOption = isChecked(child.props.value);
+                    setNewSelectedValues({
+                        children: child.props.children,
+                        label: child.props.label,
+                        value: child.props.value,
+                        isChecked: isCheckedOption,
+                    });
+                    break;
+                case e.key === 'Escape':
+                    setFocusedIndex(-1);
+                    setIsFocused(false);
+                    break;
+            }
+        };
+        focused && document.addEventListener('keydown', onKeyDown);
+        !focused && setFocusedIndex(-1);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [focused, focusedIndex, children, isChecked]);
+    const modal = useMemo(() => React.createElement("div", { role: 'presentation', className: 'select-trilogy_modal_open', onClick: () => setIsFocused(false) }), []);
+    const options = React.useMemo(() => {
+        return React.Children.map(children, (child, index) => {
+            if (!React.isValidElement(child))
                 return null;
-            })))));
+            const clickEventValue = (v) => {
+                switch (true) {
+                    case (nullable && multiple && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(child.props.value))) ||
+                        (nullable && !multiple && selectedValues === child.props.value):
+                        return undefined;
+                    default:
+                        return v;
+                }
+            };
+            const props = {
+                ...child.props,
+                checked: isChecked(child.props.value),
+                focused: focusedIndex === index ? 'true' : undefined,
+                onClick: () => {
+                    const opts = setNewSelectedValues({
+                        children: child.props.children,
+                        label: child.props.label,
+                        value: child.props.value,
+                        isChecked: isChecked(child.props.value),
+                    });
+                    onChange &&
+                        onChange({
+                            selectValue: clickEventValue(child.props.value),
+                            selectName: clickEventValue(child.props.children || child.props.label),
+                            selectId: clickEventValue(child.props.id),
+                            name: clickEventValue(child.props.children || child.props.label),
+                            selectedOptions: opts,
+                        });
+                    if (child.props.onClick)
+                        child.props.onClick();
+                },
+            };
+            return React.createElement(SelectOption, { ...props, key: `${reactId}_${index}` });
+        });
+    }, [multiple, nullable, selectedValues, focusedIndex, children]);
+    return (React.createElement("div", { className: selectClasses },
+        React.createElement(Input, { value: selectedName.join(', '), testId: testId, name: name, disabled: disabled, placeholder: label, onFocus: onFocus, customIconLeft: iconName, customIconRight: focused ? 'tri-arrow-up' : 'tri-arrow-down', onBlur: onBlur, onClick: onClickInput, className: hashClass(styled, clsx(focused && 'focus')), onKeyPress: (e) => {
+                e.preventDefault();
+                onKeyPressInput(e.inputKeyCode);
+            }, ...{ readOnly: true, id } }),
+        focused && React.createElement("div", { className: hashClass(styled, clsx('select-options')) }, options),
+        focused && ReactDOM.createPortal(modal, document.body)));
 };
 export default SelectDynamic;
 //# sourceMappingURL=SelectDynamic.js.map

package/lib/components/select/web/SelectDynamic.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectDynamic.js","sourceRoot":"","sources":["../../../../components/select/web/SelectDynamic.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,YAAY,MAAM,WAAW,CAAA;AAEpC,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAEvC,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,EAAE,EACF,MAAM,EACN,gBAAgB,EAChB,cAAc,EACd,KAAK,EACL,QAAQ,EACR,GAAG,MAAM,EACwB,EAAe,EAAE;IAClD,MAAM,EACJ,kBAAkB,EAClB,wBAAwB,EACxB,iBAAiB,EACjB,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,GACf,GAAG,QAAQ,CAAC;QACX,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,OAAO;QACP,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,IAAI;QACJ,EAAE;KACH,CAAC,CAAA;IAEF,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,CACxC,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,UAAU,EACV,SAAS,EACT,wBAAwB,CACzB,CAAA;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC,EACjE,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAC3B,CAAA;IAED,MAAM,oBAAoB,GAAG,KAAK,CAAC,OAAO,CACxC,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,KAAK,IAAI,UAAU,CAAC,CAAC,EACnE,CAAC,MAAM,CAAC,CACT,CAAA;IAED,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAClC,GAAG,EAAE,CACH,SAAS,CACP,MAAM,EACN,IAAI,CAAC,SAAS,EAAE,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,KAAI,GAAG,CAAC,qBAAqB,CAAC,CAAC,CACrE,EACH,CAAC,MAAM,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAC,CAChC,CAAA;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC9C,6BAAK,SAAS,EAAE,cAAc;YAC5B,gCACM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAC1B,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC3B,EAAE,EAAE,EAAE,iBACO,MAAM,sBACD,IAAI,EACtB,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,iBAAiB,mBACZ,SAAS,gBACX,KAAK,mBACF,QAAQ,EACvB,IAAI,EAAC,SAAS,KACV,MAAM;gBAET,QAAQ,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG;gBACjD,KAAK,IAAI,mCAAQ,KAAK,CAAS;gBAC/B,CAAA,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,KAAI,CACvB,8BAAM,SAAS,EAAE,oBAAoB,IAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,IAAI,CAAQ,CACrE,CACG;YACN,qDACwB,YAAY,EAClC,SAAS,EAAE,cAAc,mBACV,YAAY,iBACd,CAAC,YAAY,IAEzB,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;gBAC7C,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;oBAC/B,MAAM,KAAK,GAAG;wBACZ,GAAG,KAAK,CAAC,KAAK;wBACd,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,MAAK,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAA;wBACrD,OAAO,EAAE,GAAG,EAAE;4BACZ,kBAAkB,CAAC;gCACjB,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK;gCAC9B,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK;gCACrD,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,EAAE;gCACxB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ;6BAC/B,CAAC,CAAA;4BACF,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO;gCAAE,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;wBAChD,CAAC;qBACF,CAAA;oBACD,OAAO,CACL,gCACM,EAAE,QAAQ,EAAE,QAAQ,EAAE,sBACR,KAAK,CAAC,KAAK,CAAC,QAAQ,EACtC,SAAS,EAAE,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,oBACtC,KAAK,CAAC,KAAK,CAAC,KAAK,MAAK,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAA,gBAC/C,KAAK,CAAC,KAAK,CAAC,KAAK,aACpB,KAAK,CAAC,KAAK,CAAC,EAAE,sBACL,KAAK,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,EAC3D,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK,CAAC,EACzC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC,EACvD,QAAQ,EACN,KAAK,CAAC,KAAK,CAAC,KAAK,MAAK,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,CAAA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAEtD,YAAY,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,0CAAE,KAAK,EAAE,CAAA,EAAA,EACtD,YAAY,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,0CAAE,IAAI,EAAE,CAAA,EAAA;wBAErD,oBAAC,YAAY,OAAK,KAAK,GAAI,CACvB,CACP,CAAA;iBACF;gBACD,OAAO,IAAI,CAAA;YACb,CAAC,CAAC,CACE,CACF,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"SelectDynamic.js","sourceRoot":"","sources":["../../../../components/select/web/SelectDynamic.tsx"],"names":[],"mappings":"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"}

package/lib/components/select/web/SelectNative.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { IAccessibleSelect } from "../SelectProps";
-declare const SelectNative: ({ selecteClasses, onChange, onFocus, onBlur, id, name, disabled, children, label, iconName, styled, testId, accessibilityLabel, selected, ...others }: IAccessibleSelect) => JSX.Element;
+import { SelectProps } from '../SelectProps';
+declare const SelectNative: ({ onChange, nullable, disabled, onFocus, onBlur, children, selected, name, id, testId, label, iconName, multiple, className, accessibilityLabel, ...others }: SelectProps) => JSX.Element;
 export default SelectNative;

package/lib/components/select/web/SelectNative.js

@@ -1,25 +1,60 @@
-import * as React from "react";
-import { Icon } from "../../icon";
-import { hashClass } from "../../../helpers";
-import clsx from "clsx";
-import { has } from "../../../services";
-const SelectNative = ({ selecteClasses, onChange, onFocus, onBlur, id, name, disabled, children, label, iconName, styled, testId, accessibilityLabel, selected, ...others }) => {
-    const controlClasses = React.useMemo(() => hashClass(styled, clsx("control", has("dynamic-placeholder"))), [styled]);
-    return (React.createElement("div", { className: hashClass(styled, clsx("field")) },
-        React.createElement("div", { className: controlClasses },
-            React.createElement("div", { className: selecteClasses },
-                iconName && React.createElement(Icon, { name: iconName, size: 'small' }),
-                React.createElement("select", { className: hashClass(styled, clsx(!label && "no-label")), value: selected, "aria-label": accessibilityLabel, "data-testid": testId, role: 'listbox', onChange: (e) => {
-                        if (onChange) {
-                            onChange({
-                                selectValue: e.target.value,
-                                selectName: e.target.name,
-                                selectId: e.target.id,
-                                name: e.target.name,
-                            });
-                        }
-                    }, onFocus: onFocus, onBlur: onBlur, id: id ? String(id) : undefined, name: name, disabled: disabled, ...others }, children),
-                label && React.createElement("label", { htmlFor: id }, label)))));
+import clsx from 'clsx';
+import * as React from 'react';
+import { hashClass } from '../../../helpers';
+import { has, is } from '../../../services';
+import { Icon, IconSize } from '../../icon';
+import SelectOption from '../option';
+import { useTrilogyContext } from './../../../context';
+const SelectNative = ({ onChange, nullable, disabled, onFocus, onBlur, children, selected, name, id, testId, label, iconName, multiple, className, accessibilityLabel, ...others }) => {
+    const { styled } = useTrilogyContext();
+    const selectClasses = React.useMemo(() => hashClass(styled, clsx('select', className)), [styled, className, iconName]);
+    const [focused, setIsFocused] = React.useState(false);
+    const [selectedValues, setSelectedValues] = React.useState(selected);
+    React.useEffect(() => {
+        setSelectedValues(selected);
+    }, [selected]);
+    const classes = React.useMemo(() => ({
+        input: hashClass(styled, clsx('input', disabled && is('disabled'), 'select-native', multiple && 'multiple', className)),
+        control: hashClass(styled, clsx('control', has('dynamic-placeholder'), iconName && 'has-icons-left', iconName && 'has-icons-right')),
+    }), [styled, disabled, iconName, className, multiple]);
+    const handleFocus = React.useCallback((e) => {
+        setIsFocused(true);
+        onFocus && onFocus(e);
+    }, []);
+    const handleBlur = React.useCallback((e) => {
+        setIsFocused(false);
+        onBlur && onBlur(e);
+    }, []);
+    return (React.createElement("div", { className: selectClasses },
+        React.createElement("div", { className: hashClass(styled, clsx('field', focused && 'focus')) },
+            React.createElement("div", { className: classes.control },
+                React.createElement("div", { className: classes.input },
+                    React.createElement("select", { multiple: multiple, className: hashClass(styled, clsx(!label && 'no-label')), value: selectedValues, "aria-label": accessibilityLabel, "data-testid": testId, onChange: (e) => {
+                            const selectedV = Array.from(e.target.selectedOptions).map((select) => select.value);
+                            setSelectedValues(selectedV);
+                            if (onChange) {
+                                onChange({
+                                    selectValue: e.target.value,
+                                    selectName: e.target.name,
+                                    selectId: e.target.id,
+                                    name: e.target.name,
+                                    selectedOptions: selectedV,
+                                });
+                            }
+                        }, onFocus: handleFocus, onBlur: handleBlur, id: id ? String(id) : undefined, name: name, disabled: disabled, ...others }, React.Children.map(children, (child) => {
+                        if (!React.isValidElement(child))
+                            return null;
+                        const props = {
+                            ...child.props,
+                            native: 'true',
+                        };
+                        return React.createElement(SelectOption, { ...props });
+                    }))),
+                label && !multiple && React.createElement("label", { htmlFor: id }, label),
+                iconName && (React.createElement("div", null,
+                    React.createElement(Icon, { name: iconName, size: 'small' }))),
+                !multiple && (React.createElement("div", null,
+                    React.createElement(Icon, { className: 'icon-right', name: focused ? 'tri-arrow-up' : 'tri-arrow-down', size: IconSize.SMALL })))))));
 };
 export default SelectNative;
 //# sourceMappingURL=SelectNative.js.map