@onesy/ui-react 1.0.59 → 1.0.63

package/build/TableCell/TableCell.js

@@ -0,0 +1,227 @@
+"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 IconMaterialArrowDownwardAltW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialArrowDownwardAltW100"));
+const Line_1 = __importDefault(require("../Line"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Type_1 = __importDefault(require("../Type"));
+const Divider_1 = __importDefault(require("../Divider"));
+const utils_2 = require("../utils");
+const Tooltip_1 = __importDefault(require("../Tooltip"));
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: Object.assign(Object.assign({ display: 'table-cell', position: 'relative', zIndex: '1', background: 'inherit' }, theme.typography.values.b2), { '&::before': {
+            content: "''",
+            position: 'absolute',
+            inset: '0',
+            background: 'currentColor',
+            opacity: '0',
+            transition: theme.methods.transitions.make('opacity', { duration: 'xxs' }),
+            zIndex: '-1'
+        } }),
+    value: {},
+    size_small: {
+        padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`
+    },
+    size_regular: {
+        padding: theme.methods.space.value(2, 'px')
+    },
+    size_large: {
+        padding: theme.methods.space.value(3, 'px')
+    },
+    head: {
+        fontWeight: 'bold'
+    },
+    body: {},
+    divider: {
+        '&.onesy-Divider-root': {
+            position: 'absolute',
+            left: '0px',
+            bottom: '0px',
+            margin: '0px'
+        }
+    },
+    noWeight: {
+        fontWeight: '400'
+    },
+    sticky: {
+        position: 'sticky',
+        zIndex: '14',
+        '&::after': {
+            content: "''",
+            position: 'absolute',
+            top: '0',
+            right: '-24px',
+            bottom: '0',
+            width: '24px',
+            transition: theme.methods.transitions.make('box-shadow'),
+            pointerEvents: 'none'
+        }
+    },
+    stickyActive: {
+        '&::after': {
+            boxShadow: `inset 11px 0 7px -7px ${theme.palette.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.14)'}`
+        }
+    },
+    sort: {
+        cursor: 'pointer',
+        borderRadius: 2,
+        '& > *:nth-child(1)': {
+        // '&:focus': {
+        //   outline: `1px solid ${theme.palette.text.default.primary}`,
+        //   outlineOffset: 2
+        // }
+        }
+    },
+    sortedBy: {
+        '& .onesy-Icon-root': {
+            transition: theme.methods.transitions.make('transform')
+        }
+    },
+    sortedBy_asc: {
+        '& .onesy-Icon-root': {
+            transform: 'rotate(180deg)'
+        }
+    }
+}), { name: 'onesy-TableCell' });
+const TableCell = react_1.default.forwardRef((props_, ref) => {
+    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.onesyTableCell) === 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 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 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 Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
+    const { tonal = true, color, size = 'regular', position = 'body', align = 'center', justify = 'flex-end', noWeight, sort, sortedBy: sortedBy_, sortedByDefault, onSort: onSort_, sticky, stickyPosition = 'left', stickyOffset, disabled, IconArrow = IconMaterialArrowDownwardAltW100_1.default, IconButtonSortProps, TypeProps, DividerProps, Component = props.position === 'head' ? 'th' : 'td', className, style, children } = props, other = __rest(props, ["tonal", "color", "size", "position", "align", "justify", "noWeight", "sort", "sortedBy", "sortedByDefault", "onSort", "sticky", "stickyPosition", "stickyOffset", "disabled", "IconArrow", "IconButtonSortProps", "TypeProps", "DividerProps", "Component", "className", "style", "children"]);
+    const { classes } = useStyle();
+    const [root, setRoot] = react_1.default.useState();
+    const [stickyActive, setStickyActive] = react_1.default.useState(false);
+    const [offset, setOffset] = react_1.default.useState(0);
+    const [sortedBy, setSortedBy] = react_1.default.useState(sortedByDefault);
+    const refs = {
+        root: react_1.default.useRef(undefined)
+    };
+    const init = react_1.default.useCallback(() => {
+        setTimeout(() => {
+            var _a;
+            if (sticky) {
+                const parent = (_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+                if (parent) {
+                    const elements = Array.from(parent.children);
+                    const index = elements.findIndex(item => item === refs.root.current);
+                    let elementsOffset = stickyPosition === 'left' ? elements.slice(0, index) : elements.slice(index + 1);
+                    elementsOffset = elementsOffset.filter(item => item.classList.contains('onesy-TableCell-sticky'));
+                    const offset_ = elementsOffset.reduce((result, item) => {
+                        result += item.clientWidth;
+                        return result;
+                    }, 0);
+                    setOffset((0, utils_1.clamp)(offset_, 0));
+                }
+            }
+        }, 140);
+    }, [sticky, stickyPosition]);
+    react_1.default.useEffect(() => {
+        // init
+        init();
+    }, []);
+    react_1.default.useEffect(() => {
+        if (sortedBy !== sortedBy_)
+            setSortedBy(sortedBy_);
+    }, [sortedBy_]);
+    react_1.default.useEffect(() => {
+        if (sticky) {
+            if (root) {
+                const parentOverflow = (0, utils_2.getOverflowParent)(root);
+                const offsetPrevious = stickyPosition === 'left' ? root.offsetLeft : (window.innerWidth - root.getBoundingClientRect().right);
+                const method = () => {
+                    const offsetNew = stickyPosition === 'left' ? root.offsetLeft : (window.innerWidth - root.getBoundingClientRect().right);
+                    setStickyActive(offsetPrevious !== offsetNew);
+                };
+                if (parentOverflow)
+                    parentOverflow.addEventListener('scroll', method, { passive: false });
+                return () => {
+                    parentOverflow.removeEventListener('scroll', method);
+                };
+            }
+        }
+    }, [sticky, stickyPosition, root]);
+    const onSort = react_1.default.useCallback(() => {
+        let valueNew;
+        setSortedBy(item => {
+            valueNew = item === 'asc' ? 'desc' : 'asc';
+            return valueNew;
+        });
+        if ((0, utils_1.is)('function', onSort_))
+            onSort_(valueNew);
+    }, [onSort_]);
+    const stylesOther = {};
+    if (sticky) {
+        stylesOther[stickyPosition === 'left' ? 'left' : 'right'] = offset + (stickyOffset !== undefined ? stickyOffset : 0);
+        if (position === 'head')
+            stylesOther.zIndex = '17';
+    }
+    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: (item) => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                ref.current = item;
+            }
+            refs.root.current = item;
+            setRoot(item);
+        }, role: 'cell', className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('TableCell', theme) && [
+                `onesy-TableCell-root`,
+                `onesy-TableCell-size-${size}`,
+                sticky && `onesy-TableCell-sticky`,
+                stickyPosition && `onesy-TableCell-sticky-position-${stickyPosition}`,
+                stickyActive && `onesy-TableHead-sticky-active`
+            ],
+            className,
+            classes.root,
+            position === 'head' ? classes.head : classes.body,
+            noWeight && classes.noWeight,
+            sticky && classes.sticky,
+            stickyActive && classes.stickyActive
+        ]), style: Object.assign(Object.assign({}, style), stylesOther) }, other, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: align, justify: justify, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('TableCell', theme) && [
+                        `onesy-TableCell-value`
+                    ],
+                    classes.value,
+                    classes[`size_${size}`],
+                    sort !== undefined && classes.sort
+                ]) }, { children: [(0, utils_1.is)('simple', children) ? ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'l2', tabIndex: sort !== undefined ? 0 : undefined }, TypeProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('TableCell', theme) && [
+                                `onesy-TableCell-value-type`
+                            ],
+                            TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className
+                        ]) }, { children: children }))) : (children && react_1.default.cloneElement(children, {
+                        tabIndex: sort !== undefined ? 0 : undefined
+                    })), sort && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ name: sortedBy === 'asc' ? l('Ascending') : l('Descending') }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', onClick: onSort, disabled: disabled, className: (0, style_react_1.classNames)([
+                                (0, utils_2.staticClassName)('TableCell', theme) && [
+                                    `onesy-TableCell-sort-icon-button`
+                                ],
+                                classes.sortedBy,
+                                classes[`sortedBy_${sortedBy}`]
+                            ]) }, { children: (0, jsx_runtime_1.jsx)(IconArrow, {}) })) })))] })), (0, jsx_runtime_1.jsx)(Divider, Object.assign({ color: 'inherit' }, DividerProps, { className: (0, style_react_1.classNames)([
+                    DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className,
+                    classes.divider
+                ]) }))] })));
+});
+TableCell.displayName = 'onesy-TableCell';
+exports.default = TableCell;

package/build/TablePagination/TablePagination.js

@@ -0,0 +1,101 @@
+"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 IconMaterialLastPageW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialLastPageW100"));
+const IconMaterialFirstPageW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFirstPageW100"));
+const IconMaterialNavigateNextW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateNextW100"));
+const IconMaterialNavigateBeforeW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialNavigateBeforeW100"));
+const Line_1 = __importDefault(require("../Line"));
+const Type_1 = __importDefault(require("../Type"));
+const Select_1 = __importDefault(require("../Select"));
+const ListItem_1 = __importDefault(require("../ListItem"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {},
+    select: {
+        minWidth: '140px'
+    },
+    text: {
+        flex: '0 0 auto'
+    }
+}), { name: 'onesy-TablePagination' });
+const TablePagination = react_1.default.forwardRef((props_, ref) => {
+    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.onesyTablePagination) === 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 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 Select = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Select) || Select_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 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 = false, color = 'default', version = 'text', elevation = false, size = 'regular', page: page_ = 0, pageDefault, onChange, rowsPerPage: rowsPerPage_ = props.total < 4 ? props.total : props.total * 0.05, rowsPerPageDefault, rowsPerPageOptions = props.total < 4 ? [props.total] : [props.total * 0.05, props.total * 0.1, props.total * 0.25, props.total * 0.5, props.total], rowsPerPageText = 'Rows per page', onRowsPerPageChange, total, first = false, before = true, next = true, last = false, IconFirst = IconMaterialFirstPageW100_1.default, IconBefore = IconMaterialNavigateBeforeW100_1.default, IconNext = IconMaterialNavigateNextW100_1.default, IconLast = IconMaterialLastPageW100_1.default, Component = 'div', className, children } = props, other = __rest(props, ["tonal", "color", "version", "elevation", "size", "page", "pageDefault", "onChange", "rowsPerPage", "rowsPerPageDefault", "rowsPerPageOptions", "rowsPerPageText", "onRowsPerPageChange", "total", "first", "before", "next", "last", "IconFirst", "IconBefore", "IconNext", "IconLast", "Component", "className", "children"]);
+    const { classes } = useStyle();
+    const [page, setPage] = react_1.default.useState(pageDefault !== undefined ? pageDefault : page_);
+    const [rowsPerPage, setRowsPerPage] = react_1.default.useState(rowsPerPageDefault !== undefined ? rowsPerPageDefault : rowsPerPage_);
+    react_1.default.useEffect(() => {
+        if (rowsPerPage_ !== rowsPerPage)
+            setRowsPerPage(rowsPerPage_);
+    }, [rowsPerPage_]);
+    const onUpdateRowsPerPage = (value) => {
+        // Update inner or controlled
+        if (!props.hasOwnProperty('rowsPerPage'))
+            setRowsPerPage(value);
+        if ((0, utils_1.is)('function', onRowsPerPageChange))
+            onRowsPerPageChange(value);
+        update(0);
+    };
+    const update = (value) => {
+        // Update inner or controlled
+        if (!props.hasOwnProperty('page'))
+            setPage(value);
+        if ((0, utils_1.is)('function', onChange))
+            onChange(value);
+    };
+    const maxPage = Math.ceil(total / rowsPerPage) - 1;
+    const IconButtonProps = {
+        tonal,
+        color,
+        version,
+        elevation,
+        size
+    };
+    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref, gap: 3, direction: 'row', justify: 'flex-start', align: 'center', Component: Component, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('TablePagination', theme) && [
+                `onesy-TablePagination-root`,
+                `onesy-TablePagination-version-${version}`,
+                `onesy-TablePagination-size-${size}`
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', justify: 'flex-start', align: 'center' }, { children: (0, jsx_runtime_1.jsx)(Select, Object.assign({ tonal: tonal, color: color, label: rowsPerPageText, size: 'small', value: rowsPerPage, onChange: onUpdateRowsPerPage, className: (0, style_react_1.classNames)([
+                        (0, utils_2.staticClassName)('TablePagination', theme) && [
+                            `onesy-TablePagination-select`
+                        ],
+                        classes.select
+                    ]) }, { children: rowsPerPageOptions.map(item => ((0, jsx_runtime_1.jsx)(ListItem, { primary: item, value: item, button: true }, item))) })) })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2', gap: 1, direction: 'row', justify: 'flex-start', align: 'center', Component: Line, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('TablePagination', theme) && [
+                        `onesy-TablePagination-text`
+                    ],
+                    classes.text
+                ]) }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [(page * rowsPerPage) + 1, " - ", ((page + 1) * rowsPerPage) || total] }), " ", (0, jsx_runtime_1.jsx)("span", { children: l('of') }), " ", (0, jsx_runtime_1.jsx)("span", { children: total })] })), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', justify: 'flex-start', align: 'center' }, { children: [first && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update(0), disabled: page === 0 }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconFirst, {}) }))), before && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update((0, utils_1.clamp)(page - 1, 0, maxPage)), disabled: page === 0 }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBefore, {}) }))), next && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update((0, utils_1.clamp)(page + 1, 0, maxPage)), disabled: page === maxPage }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconNext, {}) }))), last && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => update(maxPage), disabled: page === maxPage }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconLast, {}) })))] }))] })));
+});
+TablePagination.displayName = 'onesy-TablePagination';
+exports.default = TablePagination;

package/build/TextField/TextField.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import OnesySubscription from '@onesy/subscription';
+import { IBaseElement, IVersion, IRef, IElement, IValueBreakpoints, IPropsAny, IElementReference } from '../types';
+export type ITextField = Omit<IBaseElement, 'onChange'> & {
+    version?: IVersion;
+    rootRef?: IRef;
+    valueDefault?: string | number;
+    value?: string | number;
+    onChange?: (value: any, event?: React.ChangeEvent<HTMLInputElement>) => any;
+    name?: any;
+    label?: any;
+    align?: 'start' | 'center' | 'end';
+    start?: IElement;
+    startVerticalAlign?: 'start' | 'center' | 'end';
+    end?: IElement;
+    endVerticalAlign?: 'start' | 'center' | 'end';
+    placeholder?: string;
+    fullWidth?: boolean | Partial<Record<IValueBreakpoints, boolean>>;
+    helperText?: string;
+    counter?: number;
+    prefix?: string;
+    sufix?: string;
+    noPrefixMargin?: boolean;
+    noSufixMargin?: boolean;
+    enabled?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: boolean;
+    type?: React.HTMLInputTypeAttribute;
+    required?: boolean;
+    optional?: boolean;
+    optionalText?: string;
+    error?: boolean;
+    multiline?: boolean;
+    clear?: boolean;
+    rows?: number;
+    minRows?: number;
+    maxRows?: number;
+    focus?: boolean;
+    footer?: IElement;
+    controlled?: boolean;
+    restoreSelection?: boolean;
+    maxLength?: number;
+    minWidth?: number;
+    subscription?: OnesySubscription;
+    minimal?: boolean;
+    onInput?: (event: InputEvent) => any;
+    onFocus?: (event: React.FocusEvent<any>) => any;
+    onBlur?: (event: React.FocusEvent<any>) => any;
+    onMouseEnter?: (event: React.MouseEvent<any>) => any;
+    onMouseLeave?: (event: React.MouseEvent<any>) => any;
+    inputProps?: IPropsAny;
+    InputWrapperProps?: IPropsAny;
+    HelperTextProps?: IPropsAny;
+    IconClear?: IElementReference;
+    InputComponent?: IElementReference;
+    WrapperComponent?: IElementReference;
+    IconProps?: IPropsAny;
+    colorUnchecked?: any;
+};
+declare const TextField: React.FC<ITextField>;
+export default TextField;

package/build/TextToSpeech/TextToSpeech.js

@@ -0,0 +1,158 @@
+"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 IconMaterialPauseW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialPauseW100"));
+const IconMaterialTextToSpeechW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialTextToSpeechW100"));
+const Line_1 = __importDefault(require("../Line"));
+const Tooltip_1 = __importDefault(require("../Tooltip"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {},
+    iconButton: {
+        '&.onesy-IconButton-root': {
+            transition: theme.methods.transitions.make('transform'),
+            '&:active': {
+                transform: 'scale(0.94)'
+            }
+        }
+    }
+}), { name: 'onesy-TextToSpeech' });
+const TextToSpeech = react_1.default.forwardRef((props_, ref) => {
+    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.onesyTextToSpeech) === 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 Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_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 { size = 'regular', read, speechSynthesisUtterance, language, pitch, rate, text, voice, volume, loading, disabled, Icon: Icon_ = IconMaterialTextToSpeechW100_1.default, IconPause = IconMaterialPauseW100_1.default, onStart: onStart_, onPause: onPause_, onResume: onResume_, onEnd: onEnd_, onError: onError_, TooltipProps, IconButtonProps, IconProps, className } = props, other = __rest(props, ["size", "read", "speechSynthesisUtterance", "language", "pitch", "rate", "text", "voice", "volume", "loading", "disabled", "Icon", "IconPause", "onStart", "onPause", "onResume", "onEnd", "onError", "TooltipProps", "IconButtonProps", "IconProps", "className"]);
+    const [status, setStatus] = react_1.default.useState('initial');
+    const { classes } = useStyle();
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        recognition: react_1.default.useRef(undefined),
+        status: react_1.default.useRef(status)
+    };
+    refs.status.current = status;
+    const supported = (0, utils_1.isEnvironment)('browser') && ('speechSynthesis' in window && 'SpeechSynthesisUtterance' in window);
+    const onPause = react_1.default.useCallback(async (event) => {
+        setStatus('paused');
+        if ((0, utils_1.is)('function', onPause_))
+            onPause_(event);
+    }, [onPause_]);
+    const onResume = react_1.default.useCallback(async (event) => {
+        setStatus('resumed');
+        if ((0, utils_1.is)('function', onResume_))
+            onResume_(event);
+    }, [onResume_]);
+    const onEnd = react_1.default.useCallback((event) => {
+        setStatus('initial');
+        if ((0, utils_1.is)('function', onEnd_))
+            onEnd_(event);
+    }, [onEnd_]);
+    const onError = react_1.default.useCallback((event) => {
+        setStatus('initial');
+        if ((0, utils_1.is)('function', onError_))
+            onError_(event);
+    }, [onError_]);
+    react_1.default.useEffect(() => {
+        // Clean up previous utterance
+        // if there was any
+        if (supported) {
+            window.speechSynthesis.cancel();
+            setStatus('initial');
+        }
+    }, [read, speechSynthesisUtterance, supported, language, pitch, rate, text, voice, volume]);
+    const onStart = react_1.default.useCallback(async (event) => {
+        if (supported && (0, utils_1.is)('string', read)) {
+            setStatus('started');
+            window.speechSynthesis.cancel();
+            await (0, utils_1.wait)(140);
+            const utterance = speechSynthesisUtterance || new SpeechSynthesisUtterance(read);
+            // properties
+            if (language !== undefined)
+                utterance.lang = language;
+            if (pitch !== undefined)
+                utterance.pitch = pitch;
+            if (rate !== undefined)
+                utterance.rate = rate;
+            if (text !== undefined)
+                utterance.text = text;
+            if (voice !== undefined)
+                utterance.voice = voice;
+            if (volume !== undefined)
+                utterance.volume = volume;
+            // events
+            utterance.addEventListener('pause', onPause);
+            utterance.addEventListener('resume', onResume);
+            utterance.addEventListener('end', onEnd);
+            utterance.addEventListener('error', onError);
+            window.speechSynthesis.speak(utterance);
+            if ((0, utils_1.is)('function', onStart_))
+                onStart_(event);
+        }
+    }, [read, speechSynthesisUtterance, supported, onStart_, onPause, onResume, onEnd, language, pitch, rate, text, voice, volume]);
+    const onClick = react_1.default.useCallback(async () => {
+        const status_ = refs.status.current;
+        if (['started', 'resumed'].includes(status_))
+            window.speechSynthesis.pause();
+        else if (status_ === 'paused')
+            window.speechSynthesis.resume();
+        else if (status_ === 'initial')
+            onStart();
+    }, [onStart]);
+    const iconProps = Object.assign({ size }, IconProps);
+    const iconButtonProps = Object.assign({ size,
+        loading,
+        disabled }, IconButtonProps);
+    if (!supported)
+        return null;
+    let IconToUse = Icon_;
+    let name = l('Text to speech');
+    if (['started', 'resumed'].includes(status)) {
+        IconToUse = IconPause;
+        name = l('Pause');
+    }
+    if (status === 'paused')
+        name = l('Resume');
+    return ((0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: (item) => {
+            if (ref) {
+                if ((0, utils_1.is)('function', ref))
+                    ref(item);
+                else
+                    ref.current = item;
+            }
+            refs.root.current = item;
+        }, gap: 1, direction: 'row', align: 'center', className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('TextToSpeech', theme) && [
+                `onesy-TextToSpeech-root`,
+                `onesy-TextToSpeech-size-${size}`
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: (0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: name }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onClick }, iconButtonProps, { selected: status === 'started', disabled: disabled !== undefined ? disabled : !supported, className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('TextToSpeech', theme) && [
+                        `onesy-TextToSpeech-iconButton`
+                    ],
+                    classes.iconButton
+                ]) }, { children: (0, jsx_runtime_1.jsx)(IconToUse, Object.assign({}, iconProps)) })) })) })));
+});
+TextToSpeech.displayName = 'onesy-TextToSpeech';
+exports.default = TextToSpeech;