@trilogy-ds/react 0.0.9-beta-v4 → 0.0.9-calendar

package/lib/components/select/SelectNativePropsDefaults.js

@@ -0,0 +1,204 @@
+export default {
+  "onChange": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "SelectNativeChangeEventHandler<T>"
+    ]
+  },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "onFocus": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "ParamEventSelectFocus) => void"
+    ]
+  },
+  "onBlur": {
+    "type": "function",
+    "values": [
+      "undefined",
+      "FocusEventHandler<HTMLSelectElement>",
+      "(event: unknown) => void"
+    ]
+  },
+  "label": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "children": {
+    "type": "react",
+    "values": [
+      "undefined",
+      "null",
+      "string",
+      "number",
+      "false",
+      "true",
+      "JSXElementConstructor<any>>",
+      "ReactNode>",
+      "ReactPortal"
+    ]
+  },
+  "disabled": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "iconName": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa",
+      "tri-alert",
+      "tri-arrow-down",
+      "tri-arrow-left",
+      "tri-arrow-right",
+      "tri-arrow-up",
+      "tri-bell",
+      "tri-check-circle",
+      "tri-check",
+      "tri-exclamation-circle",
+      "tri-eye-slash",
+      "tri-eye",
+      "tri-infos-circle",
+      "tri-search",
+      "tri-times",
+      "tri-trash",
+      "tri-picto-faciliti",
+      "tri-picto-handicapzero",
+      "tri-picto-la-fibre",
+      "tri-picto-payment-americanexpress",
+      "tri-picto-payment-cb",
+      "tri-picto-payment-mastercard",
+      "tri-picto-payment-paypal",
+      "tri-picto-payment-visa"
+    ]
+  },
+  "selected": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string",
+      "number",
+      "string[]"
+    ]
+  },
+  "name": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "multiple": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "placeholder": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "custom": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "status": {
+    "type": "enum",
+    "values": [
+      "undefined",
+      "success",
+      "error",
+      "success",
+      "error"
+    ]
+  },
+  "required": {
+    "type": "boolean",
+    "values": [
+      "undefined",
+      "false",
+      "true"
+    ]
+  },
+  "sample": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "help": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  }
+};

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

@@ -1,26 +1,33 @@
 /// <reference types="react" />
+import { TextInput } from 'react-native';
 import { Accessibility, Dev } from '../../objects';
-import { IconName, IconNameValues } from '../icon';
 import { CommonProps } from '../../objects/facets/CommonProps';
+import { IconName, IconNameValues } from '../icon';
+import { SelectStatus, SelectStatusValues } from './SelectEnum';
 export interface ISelectOption {
     value: string | undefined;
     name: string | undefined;
     id: string | undefined;
 }
-export interface SelectChangeEvent {
+export interface SelectChangeEventNative {
     selectValue?: string;
     selectName?: string;
     selectId?: string;
     name?: string;
     selectedOptions?: string[];
 }
+export interface SelectChangeEvent extends SelectChangeEventNative {
+    target: EventTarget & HTMLSelectElement;
+}
 export type SelectChangeEventHandler<T = SelectChangeEvent> = (event: T) => void;
+export type SelectNativeChangeEventHandler<T = SelectChangeEventNative> = (event: T) => void;
 export type SelectedValue = string | number | string[] | undefined;
 export type ParamEventSelectFocus = React.FocusEvent | React.BaseSyntheticEvent;
-export interface SelectProps<T = SelectChangeEvent> extends Accessibility, Dev, CommonProps {
-    onChange?: SelectChangeEventHandler<T>;
+export type SelectRef = HTMLSelectElement | HTMLInputElement;
+export type SelectNativeRef = TextInput;
+interface Props {
     onFocus?: (event: ParamEventSelectFocus) => void;
-    onBlur?: (event: unknown) => void;
+    onBlur?: React.FocusEventHandler<HTMLSelectElement> | ((event: unknown) => void);
     label?: string;
     children?: React.ReactNode;
     disabled?: boolean;
@@ -30,4 +37,15 @@ export interface SelectProps<T = SelectChangeEvent> extends Accessibility, Dev,
     multiple?: boolean;
     placeholder?: string;
     custom?: boolean;
+    status?: SelectStatus | SelectStatusValues;
+    required?: boolean;
+    sample?: string;
+    help?: string;
+}
+export interface SelectProps<T = SelectChangeEvent> extends Accessibility, Dev, CommonProps, Props {
+    onChange?: SelectChangeEventHandler<T>;
+}
+export interface SelectNativeProps<T = SelectChangeEventNative> extends Accessibility, Dev, CommonProps, Props {
+    onChange?: SelectNativeChangeEventHandler<T>;
 }
+export {};

package/lib/components/select/SelectPropsDefaults.js

@@ -6,6 +6,34 @@ export default {
       "SelectChangeEventHandler<T>"
     ]
   },
+  "accessibilityLabel": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "testId": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "id": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
+  "className": {
+    "type": "string",
+    "values": [
+      "undefined",
+      "string"
+    ]
+  },
   "onFocus": {
     "type": "function",
     "values": [
@@ -17,6 +45,7 @@ export default {
     "type": "function",
     "values": [
       "undefined",
+      "FocusEventHandler<HTMLSelectElement>",
       "(event: unknown) => void"
     ]
   },
@@ -140,28 +169,32 @@ export default {
       "true"
     ]
   },
-  "accessibilityLabel": {
-    "type": "string",
+  "status": {
+    "type": "enum",
     "values": [
       "undefined",
-      "string"
+      "success",
+      "error",
+      "success",
+      "error"
     ]
   },
-  "testId": {
-    "type": "string",
+  "required": {
+    "type": "boolean",
     "values": [
       "undefined",
-      "string"
+      "false",
+      "true"
     ]
   },
-  "id": {
+  "sample": {
     "type": "string",
     "values": [
       "undefined",
       "string"
     ]
   },
-  "className": {
+  "help": {
     "type": "string",
     "values": [
       "undefined",

package/lib/components/select/context/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SelectChangeEventHandler, SelectedValue } from '../SelectProps';
+interface IContext {
+    selectedOptionValues: SelectedValue[];
+    isVisibleOptions: boolean;
+    multiple: boolean;
+    custom: boolean;
+    setSelectedOptionValues: React.Dispatch<React.SetStateAction<SelectedValue[] | []>>;
+    setIsVisibleOptions: React.Dispatch<React.SetStateAction<boolean>>;
+    onChange?: SelectChangeEventHandler;
+}
+export declare const SelectContext: React.Context<IContext>;
+export {};

package/lib/components/select/context/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+export var SelectContext = React.createContext({
+    selectedOptionValues: [],
+    multiple: false,
+    custom: false,
+    isVisibleOptions: false,
+    setIsVisibleOptions: function () { return false; },
+    setSelectedOptionValues: function () { return []; },
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9jb21wb25lbnRzL3NlbGVjdC9jb250ZXh0L2luZGV4LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFhekIsTUFBTSxDQUFDLElBQU0sYUFBYSxHQUFHLEtBQUssQ0FBQyxhQUFhLENBQVc7SUFDekQsb0JBQW9CLEVBQUUsRUFBRTtJQUN4QixRQUFRLEVBQUUsS0FBSztJQUNmLE1BQU0sRUFBRSxLQUFLO0lBQ2IsZ0JBQWdCLEVBQUUsS0FBSztJQUN2QixtQkFBbUIsRUFBRSxjQUFNLE9BQUEsS0FBSyxFQUFMLENBQUs7SUFDaEMsdUJBQXVCLEVBQUUsY0FBTSxPQUFBLEVBQUUsRUFBRixDQUFFO0NBQ2xDLENBQUMsQ0FBQSJ9

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { SelectOptionProps } from './SelectOptionProps';
+import { SelectOptionProps, SelectOptionRef } from './SelectOptionProps';
 /**
  * Select Option Component
  * @param value {string} Select option value
  * @param children {React.ReactNode}
  * @param label {string} option name
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param testId {string} id for testing
  * @param iconName {IconName | IconNameValues} icon
  * @param disabled {boolean} disable option
@@ -14,5 +14,5 @@ import { SelectOptionProps } from './SelectOptionProps';
  * @param id {string} Select option custom id
  * @param others
  */
-declare const SelectOption: ({ id, className, value, disabled, children, onClick, label, iconName, testId, ...others }: SelectOptionProps) => React.JSX.Element;
+declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps<string> & React.RefAttributes<SelectOptionRef>>;
 export default SelectOption;

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

@@ -1,17 +1,19 @@
-import { __assign, __rest } from "tslib";
-import clsx from 'clsx';
-import * as React from 'react';
-import { hashClass } from '../../../helpers';
-import { useTrilogyContext } from '../../../context';
+import { __assign, __read, __rest, __spreadArray } from "tslib";
+import { ComponentName } from '../../../components/enumsComponentsName';
 import { Icon } from '../../../components/icon';
+import { useTrilogyContext } from '../../../context';
+import { hashClass } from '../../../helpers';
 import { is } from '../../../services/classify';
+import clsx from 'clsx';
+import * as React from 'react';
+import { SelectContext } from '../context';
 /**
  * Select Option Component
  * @param value {string} Select option value
  * @param children {React.ReactNode}
  * @param label {string} option name
  * - -------------------------- WEB PROPERTIES -------------------------------
- * @param className {string} Additionnal CSS Classes
+ * @param className {string} Additional CSS Classes
  * @param testId {string} id for testing
  * @param iconName {IconName | IconNameValues} icon
  * @param disabled {boolean} disable option
@@ -19,30 +21,44 @@ import { is } from '../../../services/classify';
  * @param id {string} Select option custom id
  * @param others
  */
-var SelectOption = function (_a) {
-    var id = _a.id, className = _a.className, value = _a.value, disabled = _a.disabled, children = _a.children, onClick = _a.onClick, label = _a.label, iconName = _a.iconName, testId = _a.testId, others = __rest(_a, ["id", "className", "value", "disabled", "children", "onClick", "label", "iconName", "testId"]);
+var SelectOption = React.forwardRef(function (_a, ref) {
+    var id = _a.id, className = _a.className, _b = _a.value, value = _b === void 0 ? '' : _b, disabled = _a.disabled, children = _a.children, onClick = _a.onClick, label = _a.label, iconName = _a.iconName, testId = _a.testId, others = __rest(_a, ["id", "className", "value", "disabled", "children", "onClick", "label", "iconName", "testId"]);
     var styled = useTrilogyContext().styled;
-    var _b = others, checked = _b.checked, native = _b.native, focused = _b.focused, props = __rest(_b, ["checked", "native", "focused"]);
-    var selectClasses = React.useMemo(function () { return hashClass(styled, clsx('option', focused && 'focus', disabled && is('disabled'), className)); }, [focused, className]);
-    if (native) {
-        return (React.createElement("option", __assign({ role: "option", id: id, value: value, disabled: disabled, "aria-label": label, "data-testid": testId, onClick: onClick }, props), children || label));
+    var _c = React.useContext(SelectContext), custom = _c.custom, selectedOptionValues = _c.selectedOptionValues, setSelectedOptionValues = _c.setSelectedOptionValues, multiple = _c.multiple, setIsVisibleOptions = _c.setIsVisibleOptions, onChange = _c.onChange;
+    var isChecked = selectedOptionValues.includes(value);
+    var selectClasses = hashClass(styled, clsx('option', isChecked && 'focus', disabled && is('disabled'), className));
+    var handleClickOption = function () {
+        setSelectedOptionValues(function (prev) {
+            var isInclude = prev.includes(value);
+            var newOptionsSelected = !multiple && isInclude
+                ? []
+                : !multiple && !isInclude
+                    ? [value]
+                    : isInclude
+                        ? prev.filter(function (opt) { return opt !== value; })
+                        : __spreadArray(__spreadArray([], __read(prev), false), [value], false);
+            if (onChange) {
+                onChange({
+                    selectValue: isInclude ? undefined : value,
+                    selectName: isInclude ? undefined : children || label,
+                    selectId: isInclude ? undefined : id,
+                    name: isInclude ? undefined : children || label,
+                    selectedOptions: newOptionsSelected,
+                    target: undefined,
+                });
+            }
+            return newOptionsSelected;
+        });
+        if (!multiple)
+            setIsVisibleOptions(false);
+    };
+    if (custom || multiple) {
+        return (React.createElement("li", __assign({ ref: ref, id: id, className: selectClasses, "data-selected": isChecked, role: 'option', "aria-selected": isChecked, "data-value": value, onClick: !disabled ? handleClickOption : undefined }, others),
+            iconName && React.createElement(Icon, { name: iconName }),
+            label || children));
     }
-    // return (
-    //   <RadioTile
-    //     checked={checked}
-    //     horizontal
-    //     className={selectClasses}
-    //     value={value}
-    //     disabled={disabled}
-    //     onChange={onClick}
-    //     icon={iconName}
-    //     description={label || children}
-    //     {...others}
-    //   />
-    // )
-    return (React.createElement("li", __assign({ id: id, className: selectClasses, "data-selected": checked, role: "option", "aria-selected": checked, "data-value": value, onClick: (!disabled && onClick) ? onClick : undefined }, others),
-        iconName && React.createElement(Icon, { name: iconName }),
-        label || children));
-};
+    return (React.createElement("option", __assign({ ref: ref, role: 'option', id: id, value: value, disabled: disabled, "aria-label": label, "data-testid": testId, onClick: onClick }, others), children || label));
+});
+SelectOption.displayName = ComponentName.SelectOption;
 export default SelectOption;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0T3B0aW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWxlY3Qvb3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUU5QixPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQ3JDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUM3QyxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBRXhDOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLFlBQVksR0FBRyxVQUFDLEVBV29CO0lBVmxCLElBQUEsRUFBRSxRQUFBLEVBQ0YsU0FBUyxlQUFBLEVBQ1QsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsUUFBUSxjQUFBLEVBQ1IsT0FBTyxhQUFBLEVBQ1AsS0FBSyxXQUFBLEVBQ0wsUUFBUSxjQUFBLEVBQ1IsTUFBTSxZQUFBLEVBQ0gsTUFBTSxjQVZYLDhGQVdDLENBRFU7SUFHdkIsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFDdEMsSUFBTSxLQUF5QyxNQUFpRSxFQUF4RyxPQUFPLGFBQUEsRUFBRSxNQUFNLFlBQUEsRUFBRSxPQUFPLGFBQUEsRUFBSyxLQUFLLGNBQXBDLGdDQUFzQyxDQUFvRSxDQUFBO0lBQ2hILElBQU0sYUFBYSxHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsY0FBTSxPQUFBLFNBQVMsQ0FBQyxNQUFNLEVBQUUsSUFBSSxDQUFDLFFBQVEsRUFBRSxPQUFPLElBQUksT0FBTyxFQUFFLFFBQVEsSUFBSSxFQUFFLENBQUMsVUFBVSxDQUFDLEVBQUUsU0FBUyxDQUFDLENBQUMsRUFBNUYsQ0FBNEYsRUFBRSxDQUFDLE9BQU8sRUFBRSxTQUFTLENBQUMsQ0FBQyxDQUFBO0lBRTdKLElBQUksTUFBTSxFQUFFO1FBQ1YsT0FBTyxDQUNMLHlDQUNFLElBQUksRUFBQyxRQUFRLEVBQ2IsRUFBRSxFQUFFLEVBQUUsRUFDTixLQUFLLEVBQUUsS0FBSyxFQUNaLFFBQVEsRUFBRSxRQUFRLGdCQUNOLEtBQUssaUJBQ0osTUFBTSxFQUNuQixPQUFPLEVBQUUsT0FBTyxJQUNaLEtBQUssR0FFUixRQUFRLElBQUksS0FBSyxDQUNYLENBQ1YsQ0FBQTtLQUNGO0lBRUQsV0FBVztJQUNYLGVBQWU7SUFDZix3QkFBd0I7SUFDeEIsaUJBQWlCO0lBQ2pCLGdDQUFnQztJQUNoQyxvQkFBb0I7SUFDcEIsMEJBQTBCO0lBQzFCLHlCQUF5QjtJQUN6QixzQkFBc0I7SUFDdEIsc0NBQXNDO0lBQ3RDLGtCQUFrQjtJQUNsQixPQUFPO0lBQ1AsSUFBSTtJQUVKLE9BQU8sQ0FDTCxxQ0FDRSxFQUFFLEVBQUUsRUFBRSxFQUNOLFNBQVMsRUFBRSxhQUFhLG1CQUNULE9BQU8sRUFDdEIsSUFBSSxFQUFDLFFBQVEsbUJBQ0UsT0FBTyxnQkFDVixLQUFLLEVBQ2pCLE9BQU8sRUFBRSxDQUFDLENBQUMsUUFBUSxJQUFJLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFNBQVMsSUFDakQsTUFBTTtRQUVULFFBQVEsSUFBSSxvQkFBQyxJQUFJLElBQUMsSUFBSSxFQUFFLFFBQVEsR0FBSTtRQUNwQyxLQUFLLElBQUksUUFBUSxDQUNmLENBQ04sQ0FBQTtBQUNILENBQUMsQ0FBQTtBQUVELGVBQWUsWUFBWSxDQUFBIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0T3B0aW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vY29tcG9uZW50cy9zZWxlY3Qvb3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQTtBQUNoRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sV0FBVyxDQUFBO0FBQzdDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDckMsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLHFCQUFxQixDQUFBO0FBQ3hDLE9BQU8sSUFBSSxNQUFNLE1BQU0sQ0FBQTtBQUN2QixPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sWUFBWSxDQUFBO0FBSTFDOzs7Ozs7Ozs7Ozs7O0dBYUc7QUFDSCxJQUFNLFlBQVksR0FBRyxLQUFLLENBQUMsVUFBVSxDQUNuQyxVQUFDLEVBQThGLEVBQUUsR0FBRztJQUFqRyxJQUFBLEVBQUUsUUFBQSxFQUFFLFNBQVMsZUFBQSxFQUFFLGFBQVUsRUFBVixLQUFLLG1CQUFHLEVBQUUsS0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE9BQU8sYUFBQSxFQUFFLEtBQUssV0FBQSxFQUFFLFFBQVEsY0FBQSxFQUFFLE1BQU0sWUFBQSxFQUFLLE1BQU0sY0FBNUYsOEZBQThGLENBQUY7SUFDbkYsSUFBQSxNQUFNLEdBQUssaUJBQWlCLEVBQUUsT0FBeEIsQ0FBd0I7SUFFaEMsSUFBQSxLQUNKLEtBQUssQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEVBRHpCLE1BQU0sWUFBQSxFQUFFLG9CQUFvQiwwQkFBQSxFQUFFLHVCQUF1Qiw2QkFBQSxFQUFFLFFBQVEsY0FBQSxF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

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

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { ComponentName } from '../../../components/enumsComponentsName';
+import * as React from 'react';
+import { TouchableOpacity } from 'react-native';
 import { SelectOptionProps } from './SelectOptionProps';
 /**
  * Select Option Component
@@ -7,8 +7,5 @@ import { SelectOptionProps } from './SelectOptionProps';
  * @param label {string} Label value
  * @param children {React.ReactNode}
  */
-declare const SelectOption: {
-    ({ disabled, children, onClick, label, iconName, ...others }: SelectOptionProps): JSX.Element;
-    displayName: ComponentName;
-};
+declare const SelectOption: React.ForwardRefExoticComponent<SelectOptionProps<string> & React.RefAttributes<TouchableOpacity>>;
 export default SelectOption;

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

@@ -1,37 +1,35 @@
 import { __assign, __rest } from "tslib";
-import { Columns, Column } from '../../../components/columns';
+import { Column, Columns } from '../../../components/columns';
 import { ComponentName } from '../../../components/enumsComponentsName';
 import { Icon, IconSize } from '../../../components/icon';
 import { Text } from '../../../components/text';
+import { Alignable } from '../../../objects';
 import { TypographyBold } from '../../../objects/Typography';
 import { TrilogyColor, getColorStyle } from '../../../objects/facets/Color';
 import * as React from 'react';
-import { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 /**
  * Select Option Component
  * @param value {string} Select option value
  * @param label {string} Label value
  * @param children {React.ReactNode}
  */
-var SelectOption = function (_a) {
+var SelectOption = React.forwardRef(function (_a, ref) {
     var disabled = _a.disabled, children = _a.children, onClick = _a.onClick, label = _a.label, iconName = _a.iconName, others = __rest(_a, ["disabled", "children", "onClick", "label", "iconName"]);
     var checked = others.checked;
-    var styles = React.useMemo(function () {
-        return StyleSheet.create({
-            container: {
-                backgroundColor: (disabled && getColorStyle(TrilogyColor.DISABLED_FADE)) || undefined,
-                width: Dimensions.get('screen').width - 40,
-                paddingHorizontal: 16,
-                paddingVertical: 8
-            },
-        });
-    }, [disabled]);
+    var styles = StyleSheet.create({
+        container: {
+            backgroundColor: getColorStyle(disabled ? TrilogyColor.DISABLED_FADE : 'transparent'),
+            width: '100%',
+            paddingVertical: checked && !iconName ? 8.5 : 10,
+        },
+    });
     var textColor = React.useMemo(function () {
         switch (true) {
             case disabled === true:
-                return getColorStyle(TrilogyColor.DISABLED);
+                return TrilogyColor.DISABLED;
             default:
-                return getColorStyle(TrilogyColor.MAIN);
+                return TrilogyColor.MAIN;
         }
     }, [disabled]);
     var iconColor = React.useMemo(function () {
@@ -43,17 +41,17 @@ var SelectOption = function (_a) {
         }
     }, [disabled]);
     var columnLabelSize = React.useMemo(function () {
-        return iconName ? checked && 10 || 11 : checked && 11 || 12;
+        return iconName ? (checked && 10) || 11 : (checked && 11) || 12;
     }, [iconName, checked]);
-    return (React.createElement(TouchableOpacity, __assign({ style: [styles.container] }, others, { onPress: onClick }),
-        React.createElement(Columns, { gap: 0 },
+    return (React.createElement(TouchableOpacity, __assign({ ref: ref, style: [styles.container] }, others, { onPress: onClick }),
+        React.createElement(Columns, { verticalAlign: Alignable.ALIGNED_CENTER },
             iconName && (React.createElement(Column, { size: 1 },
                 React.createElement(Icon, { size: IconSize.SMALL, name: iconName, color: iconColor }))),
             React.createElement(Column, { size: columnLabelSize },
-                React.createElement(Text, __assign({ typo: [checked && TypographyBold.TEXT_WEIGHT_SEMIBOLD] }, { style: { paddingLeft: 8, color: textColor, } }), children || label)),
+                React.createElement(Text, __assign({ typo: [checked && TypographyBold.TEXT_WEIGHT_SEMIBOLD] }, { style: { paddingLeft: 8, color: getColorStyle(textColor) } }), children || label)),
             checked && (React.createElement(Column, { size: 1 },
                 React.createElement(Icon, { size: IconSize.SMALL, name: 'tri-check', color: iconColor }))))));
-};
+});
 SelectOption.displayName = ComponentName.SelectOption;
 export default SelectOption;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0T3B0aW9uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L29wdGlvbi9TZWxlY3RPcHRpb24ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHNCQUFzQixDQUFBO0FBQ3JELE9BQU8sRUFBRSxZQUFZLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUE7QUFDcEUsT0FBTyxLQUFLLEtBQUssTUFBTSxPQUFPLENBQUE7QUFDOUIsT0FBTyxFQUFFLFVBQVUsRUFBRSxVQUFVLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxjQUFjLENBQUE7QUFHdkU7Ozs7O0dBS0c7QUFDSCxJQUFNLFlBQVksR0FBRyxVQUFDLEVBQThFO0lBQTVFLElBQUEsUUFBUSxjQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUUsT0FBTyxhQUFBLEVBQUUsS0FBSyxXQUFBLEVBQUUsUUFBUSxjQUFBLEVBQUssTUFBTSxjQUF6RCx3REFBMkQsQ0FBRjtJQUNyRSxJQUFBLE9BQU8sR0FBSyxNQUE2QixRQUFsQyxDQUFrQztJQUVqRCxJQUFNLE1BQU0sR0FBRyxLQUFLLENBQUMsT0FBTyxDQUMxQjtRQUNFLE9BQUEsVUFBVSxDQUFDLE1BQU0sQ0FBQztZQUNoQixTQUFTLEVBQUU7Z0JBQ1QsZUFBZSxFQUFFLENBQUMsUUFBUSxJQUFJLGFBQWEsQ0FBQyxZQUFZLENBQUMsYUFBYSxDQUFDLENBQUMsSUFBSSxT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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VsZWN0T3B0aW9uLm5hdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvbXBvbmVudHMvc2VsZWN0L29wdGlvbi9TZWxlY3RPcHRpb24ubmF0aXZlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN0RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUE7QUFDaEUsT0FBTyxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQTtBQUNsRCxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sbUJBQW1CLENBQUE7QUFDeEMsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLFdBQVcsQ0FBQTtBQUNyQyxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sc0JBQXNCLENBQUE7QUFDckQsT0FBTyxFQUFFLFlBQVksRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQTtBQUNwRSxPQUFPLEtBQUssS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUM5QixPQUFPLEVBQUUsVUFBVSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sY0FBYyxDQUFBO0FBRzNEOzs7OztHQUtHO0FBQ0gsSUFBTSxZQUFZLEdBQUcsS0FBSyxDQUFDLFVBQVUsQ0FBMkMsVUFBQyxFQUEyRCxFQUFFLEdBQUc7SUFBOUQsSUFBQSxRQUFRLGNBQUEsRUFBRSxRQUFRLGNBQUEsRUFBRSxPQUFPLGFBQUEsRUFBRSxLQUFLLFdBQUEsRUFBRSxRQUFRLGNBQUEsRUFBSyxNQUFNLGNBQXpELHdEQUEyRCxDQUFGO0lBQ2hJLElBQUEsT0FBTyxHQUFLLE1BQTZCLFFBQWxDLENBQWtDO0lBRWpELElBQU0sTUFBTSxHQUFHLFVBQVUsQ0FBQyxNQUFNLENBQUM7UUFDM0IsU0FBUyxFQUFFO1lBQ1QsZUFBZSxFQUFFLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQyxD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

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

@@ -2,6 +2,7 @@ import { ClickEvent } from '../../../events/OnClickEvent';
 import { IconName, IconNameValues } from '../../../components/icon';
 import { Accessibility, Dev } from '../../../objects';
 import { CommonProps } from '../../../objects/facets/CommonProps';
+import { TouchableOpacity } from 'react-native';
 /**
  * Select Option Interface
  */
@@ -13,3 +14,5 @@ export interface SelectOptionProps<T extends string | number = string> extends A
     onClick?: ClickEvent;
     iconName?: IconName | IconNameValues;
 }
+export type SelectOptionRef = HTMLOptionElement | HTMLLIElement;
+export type SelectOptionNativeRef = TouchableOpacity;

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

@@ -1,4 +1,6 @@
-import { PropsWithChildren } from 'react';
-import { SelectProps } from '../../../components/select/SelectProps';
-declare const SelectDynamic: ({ onChange, disabled, onFocus, onBlur, children, selected, name, id, label, iconName, multiple, className, }: PropsWithChildren<SelectProps>) => JSX.Element;
+import React from 'react';
+import { SelectProps, SelectRef } from '../../../components/select/SelectProps';
+declare const SelectDynamic: React.ForwardRefExoticComponent<SelectProps<import("../../../components/select/SelectProps").SelectChangeEvent> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<SelectRef>>;
 export default SelectDynamic;