wini-web-components 2.8.2 → 2.8.4

package/src/component/input-multi-select/input-multi-select.tsx

@@ -0,0 +1,263 @@
+import React, { createRef, CSSProperties } from 'react'
+import styles from './input-multi-select.module.css'
+import { OptionsItem } from '../select1/select1'
+import { Checkbox } from '../checkbox/checkbox'
+import { Text } from '../text/text'
+import { Winicon } from '../wini-icon/winicon'
+import { WithTranslation, withTranslation } from 'react-i18next';
+import { PopupOverlay } from '../popup/popup'
+
+interface SelectMultipleProps extends WithTranslation {
+    id?: string,
+    value?: Array<string | number>,
+    options: Required<Array<OptionsItem>>,
+    onChange?: (value?: Array<string | number>) => void,
+    placeholder?: string,
+    disabled?: boolean,
+    className?: string,
+    helperText?: string,
+    helperTextColor?: string,
+    style?: CSSProperties,
+    handleSearch?: (e: string) => Promise<Array<OptionsItem>>,
+    handleLoadmore?: (onLoadMore: boolean, ev: React.UIEvent<HTMLDivElement, UIEvent>) => void,
+    showClearValueButton?: boolean,
+    popupClassName?: string
+}
+
+interface SelectMultipleState {
+    value: Array<string | number>,
+    options: Required<Array<OptionsItem>>,
+    offset: DOMRect,
+    isOpen: boolean,
+    onSelect: any,
+    search?: Array<OptionsItem>,
+    style?: Object
+};
+
+class TSelectMultiple extends React.Component<SelectMultipleProps, SelectMultipleState> {
+    private containerRef = createRef<HTMLDivElement>()
+    private inputRef = createRef<HTMLInputElement>()
+    constructor(props: SelectMultipleProps) {
+        super(props)
+        this.state = {
+            value: props.value ?? [],
+            options: props.options,
+            offset: {
+                x: 0,
+                y: 0,
+                height: 0,
+                width: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
+                top: 0,
+                toJSON: function () {
+                    throw new Error('Function not implemented.')
+                }
+            },
+            isOpen: false,
+            onSelect: null,
+        }
+        this.onCheck = this.onCheck.bind(this)
+        this.search = this.search.bind(this)
+        this.onClickItem = this.onClickItem.bind(this)
+    }
+
+    private onCheck(value: boolean, list: Array<OptionsItem>) {
+        let newValue: Array<string | number> = []
+        if (value) {
+            newValue = [...this.state.value, ...list.map(e => e.id)]
+        } else {
+            newValue = this.state.value.filter(vl => list.every(e => vl !== e.id))
+        }
+        this.setState({ ...this.state, value: newValue })
+        if (this.props.onChange) this.props.onChange(newValue)
+    }
+
+    private async search(ev: React.ChangeEvent<HTMLInputElement>) {
+        if (ev.target.value.trim().length) {
+            if (this.props?.handleSearch) {
+                const res = await this.props.handleSearch(ev.target.value.trim())
+                this.setState({ ...this.state, search: res })
+            } else {
+                this.setState({
+                    ...this.state,
+                    search: this.props.options.filter(e => typeof e.name === "string" && e.name.toLowerCase().includes(ev.target.value.trim().toLowerCase()))
+                })
+            }
+        } else {
+            this.setState({ ...this.state, search: undefined })
+        }
+    }
+
+    private onClickItem(ev: React.MouseEvent<HTMLDivElement>, item: string | number) {
+        ev.stopPropagation()
+        let newValue = this.state.value.filter(vl => vl !== item)
+        this.setState({
+            ...this.state,
+            value: newValue,
+            ...(this.state.isOpen ? {} : {
+                isOpen: true,
+                style: undefined,
+                offset: this.containerRef?.current?.getBoundingClientRect() as any,
+            })
+        })
+        if (this.props.onChange) this.props.onChange(newValue)
+    }
+
+    private renderOptions(item: OptionsItem) {
+        let children: Array<OptionsItem> = []
+        if (!item.parentId) children = (this.state.search ?? this.state.options).filter(e => e.parentId === item.id)
+        // 
+        return <div key={item.id} className='col' style={{ width: '100%' }}>
+            <div className={`${styles['select-tile']} row ${item.disabled ? styles["disabled"] : ""}`} style={{ paddingLeft: item.parentId ? '4.4rem' : undefined }} onClick={children.length ? () => {
+                if (this.state.search) {
+                    this.setState({
+                        ...this.state, search: this.state.search.map(e => {
+                            if (e.id === item.id) return { ...e, isOpen: !(item as any).isOpen } as any
+                            else return e
+                        })
+                    })
+                } else {
+                    this.setState({
+                        ...this.state, options: this.state.options.map(e => {
+                            if (e.id === item.id) return { ...e, isOpen: !(item as any).isOpen } as any
+                            else return e
+                        })
+                    })
+                }
+            } : undefined}>
+                {(this.state.search ?? this.state.options).some(e => e.parentId) && <div className='row' style={{ width: '1.4rem', height: '1.4rem' }}>
+                    {children.length ? <Winicon src={(item as any).isOpen ? 'fill/arrows/triangle-down' : 'fill/arrows/triangle-right'} size={'1.2rem'} /> : null}
+                </div>}
+                <Checkbox disabled={item.disabled} value={children.length ? (children.every((e) => this.state.value.includes(e.id)) ? true : children.some((e) => this.state.value.includes(e.id)) ? undefined : false) : this.state.value.includes(item.id)} onChange={(v) => { this.onCheck(v, [item, ...children]) }} size={'2rem'} />
+                <Text className='body-3'>{item.name}</Text>
+            </div>
+            <div className='col' style={{ display: (item as any).isOpen ? "flex" : "none", width: '100%' }}>{children.map(e => this.renderOptions(e))}</div>
+        </div>
+    }
+
+    componentDidUpdate(prevProps: SelectMultipleProps, prevState: SelectMultipleState) {
+        if (prevProps.options !== this.props.options) this.setState({ ...this.state, options: this.props.options })
+        if (prevProps.value !== this.props.value) this.setState({ ...this.state, value: this.props.value ?? [] })
+        //
+        if (this.state.isOpen && (prevState.isOpen !== this.state.isOpen || prevState.value.length !== this.state.value.length)) {
+            const thisPopupRect = this.containerRef.current!.querySelector(`.select-multi-popup`)?.getBoundingClientRect()
+            if (thisPopupRect) {
+                let style: { top?: string, left?: string, right?: string, bottom?: string, width?: string, height?: string } | undefined;
+                if (prevState.isOpen !== this.state.isOpen && thisPopupRect.right > document.body.offsetWidth) {
+                    style = {
+                        top: this.state.offset.y + this.state.offset.height + 2 + 'px',
+                        right: document.body.offsetWidth - this.state.offset.right + 'px'
+                    }
+                }
+                let _bottom = thisPopupRect.bottom - 8
+                const thisContainerRect = this.containerRef.current?.getBoundingClientRect()
+                if (thisContainerRect) {
+                    if (prevState.value.length !== this.state.value.length) {
+                        _bottom = thisContainerRect.bottom + 2 + thisPopupRect.height
+                        style = { ...(style ?? {}), top: `${thisContainerRect.bottom + 2}px` }
+                    }
+                    if (_bottom > document.body.offsetHeight) {
+                        style = { ...(style ?? {}), top: `${thisContainerRect.y - 2 - thisPopupRect.height}px` }
+                    }
+                }
+                if (style) {
+                    style.left ??= (style.right ? undefined : `${this.state.offset.x}px`)
+                    style.width ??= `${this.state.offset.width}px`
+                    this.setState({ ...this.state, style: style })
+                }
+            }
+        }
+    }
+
+    render() {
+        const { t } = this.props;
+        return <div
+            id={this.props.id}
+            ref={this.containerRef}
+            className={`${styles['select-multi-container']} row ${this.props.disabled ? styles['disabled'] : ''} ${this.props.helperText?.length && styles['helper-text']} ${this.props.className ?? 'body-3'}`}
+            helper-text={this.props.helperText}
+            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
+            onClick={() => {
+                if (!this.state.isOpen) this.setState({
+                    ...this.state,
+                    isOpen: true,
+                    style: undefined,
+                    offset: this.containerRef?.current?.getBoundingClientRect() as any,
+                })
+            }}
+        >
+            <div className='row' style={{ flexWrap: 'wrap', flex: 1, width: '100%', gap: '0.6rem 0.4rem' }}>
+                {this.state.value.map(item => {
+                    const optionItem = this.props.options.find(e => e.id === item)
+                    return <div key={item} className={`row ${styles['selected-item-value']}`} onClick={optionItem?.disabled ? undefined : (ev) => this.onClickItem(ev, item)}>
+                        <Text style={{ color: "var(--neutral-text-title-color)", fontSize: '1.2rem', lineHeight: '1.4rem' }} >{optionItem?.name}</Text>
+                        <Winicon src={"outline/user interface/e-remove"} size={'1.2rem'} />
+                    </div>
+                })}
+                {(!this.state.value.length || this.state.isOpen) && <input ref={this.inputRef} autoFocus={this.state.value.length > 0} onChange={this.search} placeholder={this.state.value.length ? undefined : this.props.placeholder}
+                    onBlur={ev => {
+                        if (this.state.isOpen) ev.target.focus()
+                    }}
+                />}
+            </div>
+            {this.props.showClearValueButton && this.state.value.length ? <button type='button' className='row' style={{ padding: '0.4rem' }} onClick={(ev) => {
+                ev.stopPropagation()
+                if (this.state.value.length) this.setState({ ...this.state, isOpen: true, value: [] })
+            }}>
+                <Winicon src={"outline/user interface/c-remove"} size={'1.6rem'} />
+            </button> : <div ref={iconRef => {
+                if (iconRef?.parentElement && iconRef.parentElement.getBoundingClientRect().width < 100) iconRef.style.display = "none"
+            }} className='row' >
+                <Winicon src={this.state.isOpen ? "fill/arrows/up-arrow" : "fill/arrows/down-arrow"} size={'1.2rem'} />
+            </div>}
+            {this.state.isOpen && <PopupOverlay
+                className={`hidden-overlay`}
+                onClose={(ev) => {
+                    if (ev.target !== this.inputRef.current) this.setState({ ...this.state, isOpen: false })
+                }}
+            >
+                <div className={`${styles['select-multi-popup']} select-multi-popup col ${this.props.popupClassName ?? ""}`}
+                    style={this.state.style ?? {
+                        top: this.state.offset.y + this.state.offset.height + 2 + 'px',
+                        left: this.state.offset.x + 'px',
+                        width: this.state.offset.width,
+                    }}>
+                    <div style={{ padding: '1.2rem 1.6rem', width: '100%', borderBottom: "var(--neutral-main-border)" }}>
+                        {(() => {
+                            const _list = (this.state.search ?? this.props.options ?? [])
+                            const isSelectedAll = _list.every(item => this.state.value.some(vl => vl === item.id))
+                            return <Text onClick={() => {
+                                let newValue: Array<string | number> = []
+                                if (_list.length) {
+                                    if (isSelectedAll) {
+                                        newValue = this.state.value.filter(vl => _list.every(item => vl !== item.id || item.disabled))
+                                    } else {
+                                        newValue = [...this.state.value, ..._list.filter(item => this.state.value.every(vl => vl !== item.id) && !item.disabled).map(e => e.id)]
+                                    }
+                                }
+                                this.setState({ ...this.state, value: newValue })
+                                if (this.props.onChange) this.props.onChange(newValue)
+                            }} className='button-text-3' style={{ color: _list.length ? undefined : 'var(--neutral-text-title-color)' }}>{_list.length && isSelectedAll ? `${t("remove")} ${t("all").toLowerCase()}` : `${t("select")} ${t("all").toLowerCase()}`}</Text>
+                        })()}
+                    </div>
+                    <div className={`col ${styles['select-body']}`} onScroll={this.props.handleLoadmore ? (ev) => {
+                        if (this.props.handleLoadmore) {
+                            let scrollElement = ev.target as HTMLDivElement
+                            this.props.handleLoadmore(Math.round(scrollElement.offsetHeight + scrollElement.scrollTop) >= (scrollElement.scrollHeight - 1), ev)
+                        }
+                    } : undefined}>
+                        {(this.state.search ?? this.state.options).filter(e => !e.parentId).map(item => this.renderOptions(item))}
+                        {(!this.state.search?.length && !this.props.options?.length) && (
+                            <div className={styles['no-results-found']}>{t("noResultFound")}</div>
+                        )}
+                    </div>
+                </div>
+            </PopupOverlay>}
+        </div>
+    }
+}
+
+export const SelectMultiple = withTranslation()(TSelectMultiple)
+

package/src/component/input-otp/input-otp.module.css

@@ -0,0 +1,41 @@
+.input-opt-container {
+    height: 4.8rem;
+    gap: 0.8rem;
+}
+
+.input-opt-container>input {
+    border: var(--neutral-bolder-border);
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    border-radius: 0.8rem;
+    text-align: center;
+    min-width: 3.2rem;
+    font: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    font-style: inherit;
+}
+
+.input-opt-container:focus-within>input {
+    border-color: var(--primary-main-color);
+}
+
+.input-opt-container.helper-text {
+    overflow: visible !important;
+    border-color: var(--helper-text-color) !important;
+}
+
+.input-opt-container.helper-text::after {
+    content: attr(helper-text);
+    color: var(--helper-text-color);
+    position: absolute;
+    left: 0;
+    bottom: -0.4rem;
+    width: max-content;
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+    font-family: inherit;
+    transform: translateY(100%);
+}

package/src/component/input-otp/input-otp.tsx

@@ -0,0 +1,110 @@
+import React, { createRef, CSSProperties, ReactNode } from "react";
+import styles from './input-otp.module.css'
+
+interface Props {
+    id?: string,
+    onChange?: (value: string, target: HTMLDivElement) => void
+    disabled?: boolean,
+    value?: string,
+    length?: number,
+    inputStyle?: CSSProperties,
+    style?: CSSProperties,
+    className?: string,
+    helperText?: string,
+    helperTextColor?: string,
+    autoFocus?: boolean
+}
+
+export class InputOtp extends React.Component<Props> {
+    private containerRef = createRef<HTMLDivElement>()
+    constructor(props: Props | Readonly<Props>) {
+        super(props);
+        this.getValue = this.getValue.bind(this)
+    }
+
+    getValue = () => {
+        if (this.containerRef.current)
+            return [...(this.containerRef.current.querySelectorAll("input") as any)].map(v => v.value).join("")
+        else return this.props.value ?? ""
+    }
+
+    componentDidUpdate(prevProps: Readonly<Props>): void {
+        if (prevProps.value !== this.props.value && this.containerRef.current) {
+            const inputList = [...(this.containerRef.current.querySelectorAll("input") as any)]
+            if (this.props.value?.length) {
+                for (let i = 0; i < inputList.length; i++)   inputList[i].value = this.props.value[i]
+            } else {
+                for (let i = 0; i < inputList.length; i++)   inputList[i].value = ""
+            }
+        }
+    }
+
+    render(): ReactNode {
+        return <div
+            id={this.props.id}
+            ref={this.containerRef}
+            helper-text={this.props.helperText}
+            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
+            className={`row body-1 ${styles['input-opt-container']} ${this.props.helperText?.length && 'helper-text'} ${this.props.className ?? ''}`}
+            onMouseDown={(ev: any) => {
+                ev.stopPropagation()
+                ev.preventDefault()
+                const inputList: any = [...ev.target.closest("div").childNodes]
+                for (const [index, input] of inputList.entries()) {
+                    if (!input.value.length || index === (inputList.length - 1)) {
+                        input.focus()
+                        break;
+                    }
+                    continue;
+                }
+            }}
+        >
+            {Array.from({ length: this.props.length ?? 6 }).map((_, i) => <input
+                key={"opt-" + i}
+                autoFocus={i === 0 && this.props.autoFocus}
+                disabled={this.props.disabled}
+                style={this.props.inputStyle}
+                onKeyDown={(ev: any) => {
+                    const key = ev.key.toLowerCase()
+                    switch (key) {
+                        case "backspace":
+                            if (ev.target.value.length) ev.target.value = ""
+                            else if (ev.target.previousSibling?.localName === "input") ev.target.previousSibling.focus()
+                            else ev.target.blur()
+                            break;
+                        case "delete":
+                            ev.target.value = ""
+                            break;
+                        default:
+                            ev.preventDefault()
+                            ev.stopPropagation()
+                            if (key === "v" && ev.ctrlKey) {
+                                return navigator.clipboard.readText().then(text => {
+                                    const otpRegex = /^\d{6}$/g
+                                    if (otpRegex.test(text)) {
+                                        const inputList: any = [...ev.target.closest("div").childNodes]
+                                        inputList.forEach((input: any, i: number) => {
+                                            input.value = text[i]
+                                            input.focus()
+                                        })
+                                    }
+                                })
+                            } else {
+                                const numberCheck = /[0-9]/g
+                                if (numberCheck.test(key) && !key.startsWith("f")) {
+                                    if (!ev.target.value.length) ev.target.value = key
+                                    if (ev.target.nextSibling?.localName === "input" && !ev.target.nextSibling.value.length) ev.target.nextSibling.focus()
+                                    else ev.target.blur()
+                                }
+                            }
+                            break;
+                    }
+                }}
+                onBlur={() => {
+                    if (this.props.onChange) this.props.onChange(this.getValue(), this.containerRef.current!)
+                }}
+            />)}
+        </div>
+    }
+}
+

package/src/component/number-picker/number-picker.module.css

@@ -0,0 +1,137 @@
+.number-picker-container {
+    position: relative;
+    align-items: stretch;
+    gap: 0.4rem;
+}
+
+.number-picker-container[number-picker-type="outline"] {
+    border-radius: 0.8rem;
+    padding: 0 0.6rem;
+    border: var(--neutral-bolder-border);
+}
+
+.number-picker-container>div:has(>svg) {
+    padding: 0.7rem;
+    border: var(--neutral-bolder-border);
+    border-radius: 50%;
+    aspect-ratio: 1 / 1;
+    height: 100%;
+    cursor: pointer;
+}
+
+.number-picker-container[number-picker-type="outline"]>div:has(>svg) {
+    padding: 0.6rem;
+}
+
+.number-picker-container[class~="size40"]>div>svg {
+    width: 1.6rem;
+    height: 1.6rem;
+}
+
+.number-picker-container[class~="size40"]>div:has(>svg) {
+    padding: 1.1rem;
+}
+
+.number-picker-container[class~="size40"][number-picker-type="outline"]>div:has(>svg) {
+    padding: 1rem;
+}
+
+.number-picker-container[class~="size24"]>div:has(>svg) {
+    padding: 0.5rem;
+}
+
+.number-picker-container[class~="size24"][number-picker-type="outline"]>div:has(>svg) {
+    padding: 0.4rem;
+}
+
+.number-picker-container[class~="size24"]>div>svg {
+    width: 1.2rem;
+    height: 1.2rem;
+}
+
+.number-picker-container[number-picker-type="outline"]>div:has(>svg) {
+    border-color: transparent;
+    border-radius: 0;
+}
+
+.number-picker-container>div>svg {
+    height: 100%;
+    flex: 1;
+    aspect-ratio: 1 / 1;
+}
+
+.number-picker-container>div>svg * {
+    fill: var(--neutral-text-subtitle-color);
+}
+
+.number-picker-container>input {
+    flex: 1;
+    width: 100%;
+    min-width: 5.6rem;
+    border: var(--neutral-bolder-border);
+    border-color: transparent;
+    outline: none;
+    padding: 0 0.4rem;
+    background-color: transparent !important;
+    font: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-align: center;
+    text-overflow: inherit;
+}
+
+.number-picker-container>input:focus {
+    border-color: var(--primary-main-color);
+    border-radius: 0.8rem;
+}
+
+.number-picker-container[number-picker-type="outline"] input {
+    border: none;
+}
+
+.number-picker-container[number-picker-type="outline"]:focus-within {
+    border-color: var(--primary-main-color);
+}
+
+.number-picker-container:has(>input:disabled) {
+    pointer-events: none !important;
+    color: var(--neutral-text-disabled-color);
+}
+
+.number-picker-container[number-picker-type="outline"]:has(>input:disabled) {
+    background-color: var(--neutral-disable-background-color);
+}
+
+.number-picker-container:has(>input:disabled)>div:has(>svg) {
+    background-color: var(--neutral-disable-background-color);
+}
+
+.number-picker-container:has(>input:disabled) svg * {
+    fill: var(--neutral-text-disabled-color);
+}
+
+.number-picker-container.helper-text {
+    overflow: visible !important;
+    border-color: var(--helper-text-color) !important;
+}
+
+.number-picker-container.helper-text {
+    overflow: visible !important;
+    border-color: var(--helper-text-color) !important;
+}
+
+.number-picker-container.helper-text::after {
+    content: attr(helper-text);
+    color: var(--helper-text-color);
+    position: absolute;
+    left: 0;
+    bottom: -0.4rem;
+    width: max-content;
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+    font-family: inherit;
+    transform: translateY(100%);
+}

package/src/component/number-picker/number-picker.tsx

@@ -0,0 +1,107 @@
+import { CSSProperties, useEffect, useRef, useState } from "react";
+import styles from './number-picker.module.css'
+
+interface Props {
+    id?: string,
+    value?: number,
+    onChange?: (ev: number) => void,
+    disabled?: boolean,
+    readOnly?: boolean,
+    /**
+     * default: size32: body-3 \
+     * recommend: size40: body-2 | size24: body-3
+     * */
+    className?: string,
+    helperText?: string,
+    helperTextColor?: string,
+    /** default: 1 */
+    volume?: number,
+    style?: CSSProperties,
+    min?: number,
+    max?: number,
+    type?: "outline" | "icon-button",
+}
+
+export const NumberPicker = ({ id, value, onChange, disabled, readOnly, className, helperText, helperTextColor, max, min, style, type = "icon-button", volume = 1 }: Props) => {
+    const [val, setValue] = useState<number>(0);
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        if (inputRef.current) {
+            setValue(value ?? 0)
+            inputRef.current.value = `${value ?? 0}`
+        }
+    }, [value, inputRef])
+
+    return <div id={id}
+        className={`row ${styles["number-picker-container"]} ${className ?? "body-2"} ${helperText?.length && styles['helper-text']}`}
+        number-picker-type={type ?? "icon-button"}
+        helper-text={helperText}
+        style={style ? { ...({ '--helper-text-color': helperTextColor ?? '#e14337' } as CSSProperties), ...style } : ({ '--helper-text-color': helperTextColor ?? '#e14337' } as CSSProperties)}
+    >
+        <div className="row" onClick={() => {
+            let newValue = val - volume
+            if (min === undefined || newValue >= min) {
+                if (volume % 1 === 0) newValue = Math.round(newValue)
+                else newValue = parseFloat(newValue.toFixed(1))
+                setValue(newValue)
+                if (inputRef.current) inputRef.current.value = `${newValue}`
+                if (onChange) onChange(newValue)
+            }
+        }}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="evenodd" clipRule="evenodd" d="M1.3335 7.93907C1.3335 7.60435 1.60484 7.33301 1.93956 7.33301H14.0608C14.3955 7.33301 14.6668 7.60435 14.6668 7.93907C14.6668 8.27379 14.3955 8.54513 14.0608 8.54513H1.93956C1.60484 8.54513 1.3335 8.27379 1.3335 7.93907Z" />
+            </svg>
+        </div>
+        <input
+            ref={inputRef}
+            readOnly={readOnly}
+            disabled={disabled}
+            onKeyDown={(ev) => {
+                switch (ev.key.toLowerCase()) {
+                    case "enter":
+                        (ev.target as HTMLInputElement).blur()
+                        break;
+                    default:
+                        break;
+                }
+            }}
+            onFocus={(ev) => { (ev.target as HTMLInputElement).select() }}
+            onBlur={(ev) => {
+                let newValue = volume % 1 === 0 ? parseInt(ev.target.value.trim()) : parseFloat(ev.target.value.trim())
+                if (isNaN(newValue)) ev.target.value = `${val}`
+                else {
+                    if (volume % 1 === 0) newValue = Math.round(newValue)
+                    else newValue = parseFloat(newValue.toFixed(1))
+                    if (min !== undefined && newValue < min) {
+                        setValue(min)
+                        if (inputRef.current) inputRef.current.value = `${min}`
+                        if (onChange) onChange(min)
+                    } else if (max !== undefined && newValue > max) {
+                        setValue(max)
+                        if (inputRef.current) inputRef.current.value = `${max}`
+                        if (onChange) onChange(max)
+                    } else {
+                        setValue(newValue)
+                        if (inputRef.current) inputRef.current.value = `${newValue}`
+                        if (onChange) onChange(newValue)
+                    }
+                }
+            }}
+        />
+        <div className="row" onClick={() => {
+            let newValue = val + volume
+            if (max === undefined || newValue <= max) {
+                if (volume % 1 === 0) newValue = Math.round(newValue)
+                else newValue = parseFloat(newValue.toFixed(1))
+                setValue(newValue)
+                if (inputRef.current) inputRef.current.value = `${newValue}`
+                if (onChange) onChange(newValue)
+            }
+        }}>
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M8.60622 1.93907C8.60622 1.60435 8.33488 1.33301 8.00016 1.33301C7.66544 1.33301 7.3941 1.60435 7.3941 1.93907V7.39361H1.93956C1.60484 7.39361 1.3335 7.66496 1.3335 7.99967C1.3335 8.33439 1.60484 8.60574 1.93956 8.60574H7.3941V14.0603C7.3941 14.395 7.66544 14.6663 8.00016 14.6663C8.33488 14.6663 8.60622 14.395 8.60622 14.0603V8.60574H14.0608C14.3955 8.60574 14.6668 8.33439 14.6668 7.99967C14.6668 7.66496 14.3955 7.39361 14.0608 7.39361H8.60622V1.93907Z" />
+            </svg>
+        </div>
+    </div>
+}