@onesy/ui-react 1.0.59 → 1.0.63

package/build/SectionTextMedia/SectionTextMedia.js

@@ -0,0 +1,147 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const Text_1 = __importDefault(require("../Text"));
+const Image_1 = __importDefault(require("../Image"));
+const Section_1 = __importDefault(require("../Section/Section"));
+const AudioPlayer_1 = __importDefault(require("../AudioPlayer"));
+const VideoPlayer_1 = __importDefault(require("../VideoPlayer"));
+const Line_1 = __importDefault(require("../Line"));
+const Type_1 = __importDefault(require("../Type"));
+const Button_1 = __importDefault(require("../Button"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {},
+    main: {
+        '&.onesy-Line-direction-row': {
+            '& > *': {
+                width: '50%'
+            }
+        }
+    }
+}), { name: 'onesy-SectionTextMedia' });
+const SectionTextMedia = react_1.default.forwardRef((props_, ref) => {
+    var _a;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySectionTextMedia) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const Text = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Text) || Text_1.default; }, [theme]);
+    const Image = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Image) || Image_1.default; }, [theme]);
+    const Section = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Section) || Section_1.default; }, [theme]);
+    const AudioPlayer = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.AudioPlayer) || AudioPlayer_1.default; }, [theme]);
+    const VideoPlayer = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.VideoPlayer) || VideoPlayer_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
+    const { classes } = useStyle();
+    const { size, title, description, button, mediaPosition = 'top', media, MainProps, TitleProps, WrapperProps, WrapperMainProps, WrapperTextProps, DescriptionProps, MediaProps, ImageProps, AudioProps, VideoProps, OtherProps, className } = props, other = __rest(props, ["size", "title", "description", "button", "mediaPosition", "media", "MainProps", "TitleProps", "WrapperProps", "WrapperMainProps", "WrapperTextProps", "DescriptionProps", "MediaProps", "ImageProps", "AudioProps", "VideoProps", "OtherProps", "className"]);
+    const refs = {
+        root: react_1.default.useRef(undefined)
+    };
+    let mediaElement;
+    const mediaProps = Object.assign({ size, themed: true, color: 'primary' }, MediaProps);
+    const mime = (media === null || media === void 0 ? void 0 : media.mime) || '';
+    if (mime.includes('image')) {
+        mediaElement = ((0, jsx_runtime_1.jsx)(Image, Object.assign({ src: (media === null || media === void 0 ? void 0 : media.url) || (media === null || media === void 0 ? void 0 : media.urlSmall) || ((0, utils_1.is)('string', media) ? media : '') }, mediaProps, MediaProps, ImageProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                    'onesy-SectionTextMedia-item',
+                    'onesy-SectionTextMedia-item-image'
+                ],
+                MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
+                ImageProps === null || ImageProps === void 0 ? void 0 : ImageProps.className
+            ]) })));
+    }
+    if (mime.includes('audio')) {
+        mediaElement = ((0, jsx_runtime_1.jsx)(AudioPlayer, Object.assign({}, media, mediaProps, MediaProps, AudioProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                    'onesy-SectionTextMedia-item',
+                    'onesy-SectionTextMedia-item-audio'
+                ],
+                MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
+                AudioProps === null || AudioProps === void 0 ? void 0 : AudioProps.className
+            ]) })));
+    }
+    if (mime.includes('video')) {
+        mediaElement = ((0, jsx_runtime_1.jsx)(VideoPlayer, Object.assign({}, media, mediaProps, MediaProps, VideoProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                    'onesy-SectionTextMedia-item',
+                    'onesy-SectionTextMedia-item-video'
+                ],
+                MediaProps === null || MediaProps === void 0 ? void 0 : MediaProps.className,
+                VideoProps === null || VideoProps === void 0 ? void 0 : VideoProps.className
+            ]) })));
+    }
+    const main = ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 3, direction: 'column', align: ['left', 'top', 'bottom'].includes(mediaPosition) ? 'flex-start' : 'flex-end', fullWidth: true }, WrapperMainProps, { className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                'onesy-SectionTextMedia-wrapper-main'
+            ],
+            WrapperMainProps === null || WrapperMainProps === void 0 ? void 0 : WrapperMainProps.className
+        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'column', align: ['left', 'top', 'bottom'].includes(mediaPosition) ? 'flex-start' : 'flex-end', fullWidth: true }, WrapperTextProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                        'onesy-SectionTextMedia-wrapper-text'
+                    ],
+                    WrapperTextProps === null || WrapperTextProps === void 0 ? void 0 : WrapperTextProps.className
+                ]) }, { children: [(0, utils_1.is)('string', title) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: size === 'large' ? 'h1' : size === 'regular' ? 'h2' : 'h3', align: ['left', 'top', 'bottom'].includes(mediaPosition) ? 'start' : 'end', dangerouslySetInnerHTML: {
+                            __html: (0, utils_1.textToInnerHTML)(title)
+                        } }, TitleProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                                'onesy-SectionTextMedia-title'
+                            ],
+                            TitleProps === null || TitleProps === void 0 ? void 0 : TitleProps.className
+                        ]) }))), (0, utils_1.is)('string', description) && ((0, jsx_runtime_1.jsx)(Text, Object.assign({ align: ['left', 'top', 'bottom'].includes(mediaPosition) ? 'start' : 'end', columns: 1, TypeProps: Object.assign(Object.assign({}, DescriptionProps === null || DescriptionProps === void 0 ? void 0 : DescriptionProps.TypeProps), { version: size === 'large' ? 'b1' : [undefined, 'regular'].includes(size) ? 'b2' : 'b3' }), value: description }, DescriptionProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                                'onesy-SectionTextMedia-description'
+                            ],
+                            DescriptionProps === null || DescriptionProps === void 0 ? void 0 : DescriptionProps.className
+                        ]) })))] })), button && ((0, jsx_runtime_1.jsx)(Button, Object.assign({ tonal: true, version: 'filled', color: 'primary', size: size, onClick: (button.to || button.link) && window.open(button.to || button.link, 'blank') }, button.props, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('SectionAction', theme) && [
+                        'onesy-SectionTextMedia-button'
+                    ],
+                    (_a = button.props) === null || _a === void 0 ? void 0 : _a.className,
+                    classes.button
+                ]) }, { children: button.text || l('Click here') })))] })));
+    return ((0, jsx_runtime_1.jsx)(Section, Object.assign({ ref: (item) => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, size: size, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                'onesy-SectionTextMedia-root',
+                `onesy-SectionTextMedia-size-${size}`
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 5, direction: {
+                default: ['left', 'right'].includes(mediaPosition) ? 'row' : 'column',
+                1100: 'column'
+            }, align: ['left', 'right'].includes(mediaPosition) ? 'flex-start' : 'center', justify: ['left', 'right'].includes(mediaPosition) ? 'flex-start' : 'center', fullWidth: true }, MainProps, { className: (0, style_react_1.classNames)([
+                (0, utils_2.staticClassName)('SectionTextMedia', theme) && [
+                    'onesy-SectionTextMedia-main'
+                ],
+                MainProps === null || MainProps === void 0 ? void 0 : MainProps.className,
+                classes.main
+            ]) }, { children: [['top', 'left'].includes(mediaPosition) && mediaElement, main, ['bottom', 'right'].includes(mediaPosition) && mediaElement] })) })));
+});
+SectionTextMedia.displayName = 'onesy-SectionTextMedia';
+exports.default = SectionTextMedia;

package/build/Select/Select.js

@@ -0,0 +1,408 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const IconMaterialCloseW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
+const IconMaterialArrowDropDownW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowDropDownW100"));
+const ListItem_1 = __importDefault(require("../ListItem"));
+const Type_1 = __importDefault(require("../Type"));
+const Menu_1 = __importDefault(require("../Menu"));
+const Chip_1 = __importDefault(require("../Chip"));
+const Chips_1 = __importDefault(require("../Chips"));
+const TextField_1 = __importDefault(require("../TextField"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Line_1 = __importDefault(require("../Line"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => {
+    const overflow = {
+        width: '100%',
+        overflow: 'hidden',
+        whiteSpace: 'pre',
+        textOverflow: 'ellipsis'
+    };
+    return {
+        root: {
+            flex: 'unset',
+            minWidth: '184px',
+            '& .onesy-TextField-input': {
+                position: 'absolute',
+                left: '0',
+                bottom: '0',
+                pointerEvents: 'none',
+                opacity: '0'
+            },
+            '& .onesy-TextField-input-wrapper': {
+                cursor: 'pointer'
+            }
+        },
+        wrapper: {
+            position: 'relative'
+        },
+        inputWrapper: {
+            cursor: 'pointer',
+            '&.onesy-TextField-input-wrapper': {
+                cursor: 'pointer'
+            }
+        },
+        inputWrapper_chip_size_small: {
+            minHeight: '48px'
+        },
+        inputWrapper_chip_size_regular: {
+            minHeight: '56px'
+        },
+        inputWrapper_chip_size_large: {
+            minHeight: '64px'
+        },
+        input: Object.assign(Object.assign({ display: 'flex', alignItems: 'center', width: '100%', minHeight: 20, margin: '0', border: '0', color: theme.palette.text.default.primary, background: 'transparent', '-webkit-tap-highlight-color': 'transparent', textAlign: 'start', borderRadius: `${theme.shape.radius.unit / 2}px ${theme.shape.radius.unit / 2}px 0 0`, cursor: 'pointer', pointerEvents: 'none' }, theme.typography.values.b2), overflow),
+        chip: {
+            '&.onesy-TextField-input-wrapper': {
+                height: 'unset'
+            }
+        },
+        chipGroup: {
+            pointerEvents: 'auto'
+        },
+        chipGroup_padding: {
+            paddingTop: theme.methods.space.value(0.5, 'px')
+        },
+        arrow: {
+            transition: theme.methods.transitions.make('transform')
+        },
+        arrow_open: {
+            transform: 'rotate(-180deg)'
+        },
+        open: {
+            '&.onesy-TextField-root': {
+                cursor: 'default'
+            }
+        },
+        fullWidth: {
+            width: '100%'
+        },
+        readOnly: {
+            '&.onesy-TextField-root': {
+                cursor: 'default'
+            }
+        },
+        disabled: {
+            '&.onesy-TextField-root': {
+                cursor: 'default'
+            }
+        }
+    };
+}, { name: 'onesy-Select' });
+const getValue = (value) => (value === null || value === void 0 ? void 0 : value.value) !== undefined ? value.value : value;
+const Select = react_1.default.forwardRef((props_, ref) => {
+    var _a;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesySelect) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const ListItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ListItem) || ListItem_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const Menu = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Menu) || Menu_1.default; }, [theme]);
+    const Chip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Chip) || Chip_1.default; }, [theme]);
+    const Chips = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Chips) || Chips_1.default; }, [theme]);
+    const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
+    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
+    const { tonal = true, color = 'primary', size = 'regular', version = 'filled', value: value_, valueDefault, onChange: onChange_, options, name, multiple, prefix, sufix, start, end, autoWidth = true, getLabel: getLabel_, fullWidth, chip, clear, readOnly, noSelectText, disabled, renderValues: renderValues_, renderChip, IconClear = IconMaterialCloseW100_1.default, IconDropdown = IconMaterialArrowDropDownW100_1.default, inputProps, InputWrapperProps, WrapperProps, ChipProps, ChiProps, ListProps = {
+        style: {
+            maxHeight: 250,
+            overflowY: 'auto',
+            overflowX: 'hidden'
+        }
+    }, MenuProps = {
+        portal: true
+    }, IconButtonProps, IconProps, className, style, children: children_ } = props, other = __rest(props, ["tonal", "color", "size", "version", "value", "valueDefault", "onChange", "options", "name", "multiple", "prefix", "sufix", "start", "end", "autoWidth", "getLabel", "fullWidth", "chip", "clear", "readOnly", "noSelectText", "disabled", "renderValues", "renderChip", "IconClear", "IconDropdown", "inputProps", "InputWrapperProps", "WrapperProps", "ChipProps", "ChiProps", "ListProps", "MenuProps", "IconButtonProps", "IconProps", "className", "style", "children"]);
+    const children = react_1.default.Children.toArray(children_);
+    const [value, setValue] = react_1.default.useState(() => {
+        const values = valueDefault !== undefined ? valueDefault : value_;
+        return multiple ? ((0, utils_1.is)('array', values) ? values : [values]).filter(Boolean) : values;
+    });
+    const [open, setOpen] = react_1.default.useState(false);
+    const [mouseDown, setMouseDown] = react_1.default.useState(false);
+    const [focus, setFocus] = react_1.default.useState(false);
+    const { classes } = useStyle();
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        wrapper: react_1.default.useRef(undefined),
+        menu: react_1.default.useRef(undefined),
+        input: react_1.default.useRef(undefined),
+        ids: {
+            list: react_1.default.useId()
+        }
+    };
+    const styles = {
+        root: {},
+        menu: {}
+    };
+    if ((MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.portal) && autoWidth) {
+        styles.menu.width = (_a = refs.wrapper.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+    }
+    react_1.default.useEffect(() => {
+        var _a;
+        const method = (event) => {
+            if (event.key === 'Escape')
+                onClose();
+        };
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        rootDocument.addEventListener('keydown', method);
+        return () => {
+            // Clean up
+            rootDocument.removeEventListener('keydown', method);
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        if (value_ !== undefined && value_ !== value)
+            setValue(value_);
+    }, [value_]);
+    const onMouseDown = react_1.default.useCallback((event) => {
+        if (!disabled && !readOnly)
+            setMouseDown(true);
+    }, []);
+    const onMouseUp = react_1.default.useCallback((event) => {
+        if (!disabled && !readOnly)
+            setMouseDown(false);
+    }, []);
+    const onFocus = react_1.default.useCallback((event) => {
+        if (!disabled && !readOnly)
+            setFocus(true);
+    }, []);
+    const onBlur = react_1.default.useCallback((event) => {
+        if (!disabled && !readOnly)
+            setFocus(false);
+    }, []);
+    const onClick = react_1.default.useCallback((event) => {
+        if (!disabled && !readOnly)
+            setOpen(open_ => {
+                if (open_)
+                    setFocus(false);
+                return !open_;
+            });
+    }, []);
+    const onClickArrowDown = react_1.default.useCallback((event) => {
+        if (!disabled && !readOnly)
+            setOpen(open_ => !open_);
+    }, []);
+    const onEnterKeyDown = react_1.default.useCallback((event) => {
+        if (event.key === 'Enter' && !disabled && !readOnly)
+            setOpen(open_ => {
+                if (open_)
+                    refs.input.current.focus();
+                return !open_;
+            });
+    }, []);
+    const onClose = react_1.default.useCallback((refocus = true) => {
+        if (!disabled && !readOnly) {
+            setOpen(open_ => {
+                if (open_ && refocus)
+                    refs.input.current.focus();
+                return false;
+            });
+        }
+    }, []);
+    const onChange = (valueNew) => {
+        // Inner controlled value
+        if (!props.hasOwnProperty('value'))
+            setValue(valueNew);
+        if ((0, utils_1.is)('function', onChange_))
+            onChange_(valueNew);
+    };
+    const onSelect = (newValue) => {
+        let values = multiple ? (0, utils_1.is)('array', value) ? value : [value] : value;
+        values = multiple ? (0, utils_1.unique)([...values, newValue]) : newValue;
+        onChange(values);
+    };
+    const onUnselect = (itemValue) => {
+        if (multiple) {
+            let values = (0, utils_1.is)('array', value) ? value : [value];
+            values = values.filter(item => item !== itemValue);
+            onChange(values);
+        }
+    };
+    const onClear = react_1.default.useCallback((refocus = false) => {
+        if (!disabled && !readOnly) {
+            onChange(multiple ? [] : null);
+            if (refocus)
+                refs.input.current.focus();
+        }
+    }, [multiple, readOnly, disabled]);
+    const items = react_1.default.useMemo(() => {
+        return (options || []).map((item) => (Object.assign(Object.assign({}, item), { name: String((item === null || item === void 0 ? void 0 : item.name) !== undefined ? item === null || item === void 0 ? void 0 : item.name : (item === null || item === void 0 ? void 0 : item.value) !== undefined ? item.value : item), value: (item === null || item === void 0 ? void 0 : item.value) !== undefined ? item === null || item === void 0 ? void 0 : item.value : item })));
+    }, [options]);
+    const getLabel = (item, propsOther) => {
+        if ((0, utils_1.is)('function', getLabel_))
+            return getLabel_(item, propsOther);
+        const properties = ['name', 'label', 'primary', 'secondary', 'tertiary', 'value', 'children'];
+        const objects = [item, item === null || item === void 0 ? void 0 : item.props].filter(Boolean);
+        for (const itemObject of objects) {
+            if ((0, utils_1.is)('simple', itemObject))
+                return itemObject;
+            const valueItem = (0, utils_1.getObjectValue)(itemObject, ...properties);
+            if (valueItem !== undefined)
+                return valueItem;
+        }
+        return noSelectText || 'Select an option';
+    };
+    const renderValue = (itemValue = value) => {
+        const item = !!(items === null || items === void 0 ? void 0 : items.length) ? items.find((item_) => getValue(item_) === getValue(itemValue)) : children.find((item_) => { var _a; return getValue((_a = item_.props) === null || _a === void 0 ? void 0 : _a.value) === getValue(itemValue); });
+        return item ? getLabel(item, props) : getLabel(itemValue, props) || '';
+    };
+    const renderValues = renderValues_ || ((value__ = value) => {
+        if (multiple) {
+            if (chip) {
+                return ((0, jsx_runtime_1.jsx)(Chips, Object.assign({ wrap: 'wrap', size: size, className: (0, style_react_1.classNames)([
+                        classes.chipGroup,
+                        version !== 'outlined' && classes.chipGroup_padding
+                    ]) }, ChiProps, { children: value__.map(item => {
+                        const other_ = {
+                            onClick: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            },
+                            onRemove: (event) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                onUnselect(item);
+                            },
+                            input: true
+                        };
+                        if ((0, utils_1.is)('function', renderChip))
+                            return renderChip(item, renderValue(item), other_);
+                        return ((0, jsx_runtime_1.jsx)(Chip, Object.assign({ size: 'small' }, other_, ChipProps, { children: renderValue(item) }), item));
+                    }) })));
+            }
+            const valuesAll = value.map(item => renderValue(item));
+            if (valuesAll.every(item => (0, utils_1.is)('simple', item)))
+                return valuesAll.join(', ');
+            return (value === null || value === void 0 ? void 0 : value.length) ? valuesAll : noSelectText || name;
+        }
+        return renderValue(value);
+    });
+    const endIcons = [
+        end,
+        clear && !!(multiple ? value.length : ![undefined, null].includes(value)) && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClear, size: 'small', "aria-label": l('Input clear') }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClear, Object.assign({}, IconProps)) }))),
+        ...(!readOnly ? [
+            (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'regular', onClick: onClickArrowDown, "aria-expanded": open, "aria-controls": refs.ids.list }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconDropdown, Object.assign({ size: 'large' }, IconProps, { className: (0, style_react_1.classNames)([
+                        IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
+                        classes.arrow,
+                        open && classes.arrow_open
+                    ]) })) }), 1)
+        ] : [])
+    ];
+    const sizeListItem = (MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.size) || size;
+    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'column', fullWidth: fullWidth }, WrapperProps, { ref: item => {
+            if (WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.ref) {
+                if ((0, utils_1.is)('function', WrapperProps.ref))
+                    WrapperProps.ref(item);
+                else
+                    WrapperProps.ref.current = item;
+            }
+            refs.wrapper.current = item;
+        }, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Select', theme) && [
+                'onesy-Select-wrapper',
+                fullWidth && 'onesy-full-width'
+            ],
+            WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className,
+            classes.wrapper
+        ]) }, { children: [(0, jsx_runtime_1.jsx)(TextField, Object.assign({ ref: refs.input, rootRef: (item => {
+                    if (ref) {
+                        if ((0, utils_1.is)('function', ref))
+                            ref(item);
+                        else
+                            ref.current = item;
+                    }
+                    refs.root.current = item;
+                }), onBlur: onBlur, onFocus: onFocus, enabled: open || focus || mouseDown || !!((0, utils_1.is)('array', value) ? value.length : ![undefined, null].includes(value)), focus: open || focus || mouseDown, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Select', theme) && [
+                        'onesy-Select-root',
+                        `onesy-Select-version-${version}`,
+                        `onesy-Select-size-${size}`,
+                        open && `onesy-Select-open`,
+                        mouseDown && `onesy-Select-mouse-down`,
+                        focus && `onesy-Select-focus`
+                    ],
+                    className,
+                    classes.root,
+                    open && classes.open,
+                    disabled && classes.disabled
+                ]), tonal: tonal, color: color, size: size, version: version, name: name, prefix: prefix, sufix: sufix, start: start, end: endIcons, readOnly: readOnly, endVerticalAlign: 'center', role: 'combobox', "aria-multiselectable": multiple, "aria-controls": refs.ids.list, "aria-expanded": open, "aria-haspopup": 'listbox', "aria-labelledby": name, "aria-disabled": disabled, fullWidth: fullWidth, disabled: disabled, InputWrapperProps: Object.assign(Object.assign({ onMouseDown,
+                    onMouseUp,
+                    onClick, onKeyDown: onEnterKeyDown }, InputWrapperProps), { className: (0, style_react_1.classNames)([
+                        (0, utils_2.staticClassName)('Select', theme) && [
+                            'onesy-Select-input-wrapper'
+                        ],
+                        InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.className,
+                        classes.inputWrapper,
+                        chip && [
+                            classes.chip,
+                            classes[`inputWrapper_chip_size_${size}`]
+                        ],
+                        open && classes.open,
+                        readOnly && classes.readOnly
+                    ]) }), inputProps: Object.assign({ disabled: true, readOnly: true }, inputProps), style: Object.assign(Object.assign({}, style), styles.root) }, other, { children: (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'row', className: (0, style_react_1.classNames)([
+                        (0, utils_2.staticClassName)('Select', theme) && [
+                            'onesy-Select-input'
+                        ],
+                        classes.input,
+                        chip && classes.chip,
+                        open && classes.open,
+                        readOnly && classes.readOnly
+                    ]), justify: other.align }, { children: renderValues(value) })) })), (!!items.length || children) && ((0, jsx_runtime_1.jsx)(Menu, Object.assign({ ref: refs.menu, open: open, portal: false, onClose: () => onClose(false), anchorElement: refs.root.current, transformOrigin: 'center top', transformOriginSwitch: 'center bottom', maxWidth: 'unset', size: size, menuItems: !!items.length ? (items.map((item, index) => ((0, jsx_runtime_1.jsx)(ListItem, Object.assign({ role: 'option', selected: item.selected !== undefined ? item.selected : multiple ? value.includes(item === null || item === void 0 ? void 0 : item.value) : value === (item === null || item === void 0 ? void 0 : item.value), preselected: item.preselected !== undefined ? item.preselected : !(multiple ? value.includes(item === null || item === void 0 ? void 0 : item.value) : value === (item === null || item === void 0 ? void 0 : item.value)), onMouseUp: onMouseUp, onMouseDown: onMouseDown, primary: ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: sizeListItem === 'large' ? 'b1' : sizeListItem === 'regular' ? 'b2' : 'b3' }, { children: item.name }))), value: item.value, size: (MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.size) || size, button: true }, item.props, { onClick: (event) => {
+                        var _a, _b;
+                        if (multiple && value.includes(item === null || item === void 0 ? void 0 : item.value))
+                            onUnselect(item === null || item === void 0 ? void 0 : item.value);
+                        else
+                            onSelect(item === null || item === void 0 ? void 0 : item.value);
+                        if ((0, utils_1.is)('function', (_a = item.props) === null || _a === void 0 ? void 0 : _a.onClick))
+                            (_b = item.props) === null || _b === void 0 ? void 0 : _b.onClick(event);
+                        if (!multiple)
+                            setOpen(false);
+                    } }), index)))) : children.map((item, index) => {
+                    var _a, _b, _c, _d;
+                    return (react_1.default.cloneElement(item, {
+                        key: index,
+                        role: 'option',
+                        selected: item.props.selected !== undefined ? item.props.selected : multiple ? value.includes((_a = item.props) === null || _a === void 0 ? void 0 : _a.value) : value === ((_b = item.props) === null || _b === void 0 ? void 0 : _b.value),
+                        preselected: item.props.preselected !== undefined ? item.props.preselected : !(multiple ? value.includes((_c = item.props) === null || _c === void 0 ? void 0 : _c.value) : value === ((_d = item.props) === null || _d === void 0 ? void 0 : _d.value)),
+                        onMouseUp,
+                        onMouseDown,
+                        onClick: (event) => {
+                            var _a, _b, _c, _d, _e;
+                            if (multiple && value.includes((_a = item.props) === null || _a === void 0 ? void 0 : _a.value))
+                                onUnselect((_b = item.props) === null || _b === void 0 ? void 0 : _b.value);
+                            else
+                                onSelect((_c = item.props) === null || _c === void 0 ? void 0 : _c.value);
+                            if ((0, utils_1.is)('function', (_d = item.props) === null || _d === void 0 ? void 0 : _d.onClick))
+                                (_e = item.props) === null || _e === void 0 ? void 0 : _e.onClick(event);
+                            if (!multiple)
+                                setOpen(false);
+                        }
+                    }));
+                }), AppendProps: {
+                    alignment: 'start'
+                }, ModalProps: {
+                // focus: !MenuProps.portal
+                }, ListProps: Object.assign({ menu: true, size: (ListProps === null || ListProps === void 0 ? void 0 : ListProps.size) || (MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.size) || size, role: 'listbox', id: refs.ids.list, 'aria-label': name }, ListProps) }, MenuProps, { style: Object.assign(Object.assign({}, styles.menu), MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.style), className: (0, style_react_1.classNames)([
+                    MenuProps === null || MenuProps === void 0 ? void 0 : MenuProps.className
+                ]) })))] })));
+});
+Select.displayName = 'onesy-Select';
+exports.default = Select;