@veracity/vui/dist/select/selectButton.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs, ellipsisOverflow } from "../utils/styles.js";
import { inputColors } from "../input/consts.js";
import { useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import { Button } from "../button/button.js";
import { LineButton } from "../button/buttons.js";
import { PopoverTrigger } from "../popover/popoverTrigger.js";
import { useSelectContext } from "./context.js";
import { jsx } from "react/jsx-runtime";

//#region src/select/selectButton.tsx
/**
* Displays a custom button component, which opens a popover on click.
* Text within the button is either selected value or placeholder.
* Includes special styling for disabled, readOnly and invalid states.
*/
const SelectButton = vui((props, ref) => {
	const { className, ...rest } = props;
	const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {};
	const styles = useStyleConfig("Select", useSelectContext());
	const text = valueText || placeholder;
	const stateProps = disabled ? {
		cursor: "not-allowed",
		opacity: .5,
		disabledBg: "var(--vui-color-sandstone-79)",
		disabledBorderColor: "var(--vui-color-sandstone-79)",
		disabledColor: "white"
	} : readOnly ? {
		cursor: "auto",
		bg: "var(--vui-color-sandstone-97)",
		borderColor: "var(--vui-color-sandstone-55)",
		color: "var(--vui-foreground-default)",
		hoverBg: "var(--vui-color-sandstone-97)",
		hoverBorderColor: "var(--vui-color-sandstone-55)"
	} : void 0;
	const isInvalidProps = isInvalid ? {
		borderColor: "energyRed.45",
		hoverBorderColor: "energyRed.45"
	} : void 0;
	const textColor = inputColors.inputText;
	const iconColor = disabled || readOnly ? inputColors.inputText : "seaBlue.main";
	return /* @__PURE__ */ jsx(PopoverTrigger, {
		as: LineButton,
		className: cs("vui-selectButton", className),
		"aria-readonly": readOnly,
		disabled,
		focusRing: 2,
		fontWeight: "regular",
		endIcon: /* @__PURE__ */ jsx(Button.Icon, {
			color: iconColor,
			ml: "auto",
			name: "uiAngleDown"
		}),
		isFullWidth: true,
		px: 1,
		ref,
		text: /* @__PURE__ */ jsx(Button.Text, {
			color: textColor,
			...ellipsisOverflow,
			children: text
		}),
		userSelect: "text",
		...styles.button,
		...stateProps,
		...isInvalidProps,
		...rest
	});
});
SelectButton.displayName = "SelectButton";

//#endregion
export { SelectButton, SelectButton as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=selectButton.js.map