@stakefish/ui/components/Select.js

<div align="center"> <a href="https://www.npmjs.com/package/@stakefish/ui"><img src="https://gateway.pinata.cloud/ipfs/QmbZL1ceA8Yiz2pKALTg919jYx141DPUGegC9L4XpyayW5" width="300" /></a> </div>

import { a as __rest, _ as __assign } from '../tslib.es6-35932c2c.js';
import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { styled } from '@mui/material/styles';
import MuiSelect from '@mui/material/Select';

var StyledMuiSelect = styled(MuiSelect)(function (_a) {
    var theme = _a.theme;
    return ({
        padding: 0,
        lineHeight: theme.spacing(3),
        color: theme.palette.icon.secondary,
        backgroundColor: "".concat(theme.palette.gray.white, " !important"),
        border: 0,
        ".MuiSelect-icon": {
            display: "none"
        },
        ".MuiOutlinedInput-notchedOutline": {
            border: 0,
            outline: "none"
        },
        ".MuiInputBase-input": {
            padding: theme.spacing(2)
        },
        ".MuiSelect-nativeInput": {
            border: 0,
            clip: "rect(0 0 0 0)",
            height: 1,
            margin: -1,
            overflow: "hidden",
            padding: 0,
            position: "absolute",
            top: "20",
            width: 1
        }
    });
});
var Select = forwardRef(function (_a, ref) {
    var id = _a.id, value = _a.value, placeholder = _a.placeholder, _b = _a.color, color = _b === void 0 ? "primary" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, onBlur = _a.onBlur, inputProps = _a.inputProps, props = __rest(_a, ["id", "value", "placeholder", "color", "disabled", "onChange", "onBlur", "inputProps"]);
    return (
    // TODO: use TextField component (input prop https://mui.com/components/selects/#customization)
    jsx(StyledMuiSelect, __assign({ value: value, color: color, placeholder: placeholder, inputProps: __assign({ id: id }, inputProps), disabled: disabled, onChange: onChange, onBlur: onBlur, inputRef: ref, MenuProps: {
            id: "menu-".concat(id !== null && id !== void 0 ? id : ""),
            anchorOrigin: {
                vertical: "bottom",
                horizontal: "left"
            },
            transformOrigin: {
                vertical: "top",
                horizontal: "left"
            }
        } }, props), void 0));
});

export { Select as default };