@cimpress/react-components/dist/esm/src/SelectWrapper.js

React components to support the MCP styleguide

import React, { useState, useEffect } from 'react';
import { css, cx } from '@emotion/css';
import { isBrowser, useMemoizedId } from './utils';
import cvar from './theme/cvar';
import { controlLabelCss, formGroupActiveCss, formGroupCss } from './TextInput';
import { useFeatureFlags } from './FeatureFlags';
const isSelectionTruthy = (value) => !((Array.isArray(value) && !value.length) || value === null || value === undefined || value === '');
const noop = () => { };
const selectLabel = css `
  pointer-events: none;
  word-wrap: break-word;
  width: 80%;
  line-height: 20px;
`;
const textColorMap = {
    success: 'color-text-success',
    warning: 'color-text-warning',
    error: 'color-text-error',
};
const helpTextClass = (status) => css `
  ${textColorMap[status] ? `color: ${cvar(textColorMap[status])}` : ''}
`;
const noOuterMarginCss = css `
  margin-bottom: 0;
`;
export const SelectWrapper = (props) => {
    const { value, containerClassName, placeholder, label, selectedSelect, required, helpText, onBlurResetsInput, status, onBlur = noop, onFocus = noop, id, onInputChange, 'data-testid': dataTestid, } = props;
    const { v17_noOuterSpacing } = useFeatureFlags();
    const [shouldFloat, setShouldFloat] = useState(value);
    const labelId = useMemoizedId({ label: 'react-select', id });
    const handleFocus = (event) => {
        setShouldFloat(true);
        onFocus(event);
    };
    const handleBlur = (event) => {
        const target = event && event.target;
        if ((onBlurResetsInput === false && target && target.value) || isSelectionTruthy(value)) {
            setShouldFloat(true);
        }
        else {
            setShouldFloat(false);
        }
        onBlur(event);
    };
    function handleInputKeyDown(searchString, ...args) {
        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(searchString, ...args);
        if (searchString !== '') {
            setShouldFloat(true);
        }
    }
    useEffect(() => {
        setShouldFloat(isSelectionTruthy(value));
    }, [value]);
    const className = cx('crc-selectwrapper', formGroupCss, v17_noOuterSpacing && noOuterMarginCss, containerClassName, {
        [formGroupActiveCss]: shouldFloat,
    });
    return (React.createElement("div", { className: className, "data-testid": dataTestid },
        React.createElement("label", { htmlFor: labelId, className: cx(controlLabelCss, selectLabel), title: `${placeholder || label}` },
            placeholder || label,
            required ? React.createElement("span", { className: css({ color: cvar('color-required-asterisk') }) }, " *") : ''),
        React.createElement(selectedSelect, Object.assign(Object.assign({ menuPortalTarget: isBrowser() ? document.body : undefined }, props), { inputId: labelId, onFocus: handleFocus, onBlur: handleBlur, onInputChange: handleInputKeyDown, placeholder: '' })),
        helpText ? React.createElement("small", { className: helpTextClass(status) }, helpText) : null));
};
//# sourceMappingURL=SelectWrapper.js.map