@navinc/base-react-components
Version:
Nav's Pattern Library
121 lines • 9.2 kB
JavaScript
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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import Select, { components, defaultTheme, } from 'react-select';
import { styled, useTheme } from 'styled-components';
import { Icon } from '../icon/icon.js';
import { InputWrapper, getError } from '../input-components/index.js';
import { typographyStyles } from '../copy/index.js';
import { useFormField } from '../use-form-field.js';
import { styledBackwardsCompatibility } from '../../styled-backwards-compatibility.js';
export const BaseControl = (_a) => {
var { children, innerProps } = _a, props = __rest(_a, ["children", "innerProps"]);
return (_jsx(components.Control, Object.assign({ innerProps: Object.assign({ 'data-testid': 'select-combo-box:control' }, innerProps) }, props, { theme: defaultTheme, children: children })));
};
export const BaseMenuList = (_a) => {
var { children, innerProps } = _a, props = __rest(_a, ["children", "innerProps"]);
return (_jsx(components.MenuList, Object.assign({ innerProps: Object.assign({ 'data-testid': 'select-combo-box:menu-list' }, innerProps) }, props, { theme: defaultTheme, children: children })));
};
export const BaseOption = (_a) => {
var { children, innerProps } = _a, props = __rest(_a, ["children", "innerProps"]);
return (_jsx(components.Option, Object.assign({ innerProps: Object.assign({ 'data-testid': 'select-combo-box:option' }, innerProps) }, props, { theme: defaultTheme, children: children })));
};
export const BaseSingleValue = (_a) => {
var { children, innerProps } = _a, props = __rest(_a, ["children", "innerProps"]);
return (_jsx(components.SingleValue, Object.assign({ innerProps: Object.assign({ 'data-testid': 'select-combo-box:single-value' }, innerProps) }, props, { theme: defaultTheme, children: children })));
};
const BaseDropdownIndicator = (_a) => {
var { innerProps } = _a, props = __rest(_a, ["innerProps"]);
return (_jsx(components.DropdownIndicator, Object.assign({ innerProps: Object.assign({ 'data-testid': 'select-combo-box:dropdown-indicator' }, innerProps) }, props, { theme: defaultTheme, children: _jsx(Icon, { name: "arrow_drop_down", size: "large" }) })));
};
const BaseClearIndicator = (_a) => {
var { children, innerProps } = _a, props = __rest(_a, ["children", "innerProps"]);
return (_jsxs(components.ClearIndicator, Object.assign({ innerProps: Object.assign({ 'data-testid': 'select-combo-box:clear-indicator' }, innerProps) }, props, { theme: defaultTheme, children: [_jsx(Icon, { name: "close", size: "large" }), children] })));
};
const BaseMultiValue = (_a) => {
var { children, innerProps } = _a, props = __rest(_a, ["children", "innerProps"]);
return (_jsx(components.MultiValue, Object.assign({ innerProps: Object.assign({ 'data-testid': 'select-combo-box:multi-value' }, innerProps) }, props, { theme: defaultTheme, children: children })));
};
const BaseMultiValueRemove = (_a) => {
var { innerProps } = _a, props = __rest(_a, ["innerProps"]);
return (_jsx(components.MultiValueRemove, Object.assign({ innerProps: Object.assign({ 'data-testid': 'select-combo-box:multi-value-remove' }, innerProps) }, props, { children: _jsx(Icon, { name: "close_small", size: "large" }) })));
};
const getDefaultStyles = (styles) => styles;
const getTypography = (size = 'body1') => typographyStyles({ size });
const getBorderColor = (state, error, theme) => {
if (state.isFocused)
return theme.primary;
return error ? theme.error : theme.outlineVariant;
};
/**
* BaseSelectComboBox component is just the select.
* It handles styling and internal component overrides.
*
* @description the react-select Select input at the base level
* with some default Nav styling. This component accepts all react-select
* props from their API. The exception is the `styles` prop.
*/
export const BaseSelectComboBox = styled(forwardRef((_a, forwardedRef) => {
var { className, components = {}, styles = getDefaultStyles, error } = _a, props = __rest(_a, ["className", "components", "styles", "error"]);
const navTheme = useTheme();
// https://react-select.com/components
const mergedComponents = Object.assign({ ClearIndicator: BaseClearIndicator, Control: BaseControl, DropdownIndicator: BaseDropdownIndicator, MenuList: BaseMenuList, MultiValue: BaseMultiValue, MultiValueRemove: BaseMultiValueRemove, Option: BaseOption, SingleValue: BaseSingleValue }, components);
// https://react-select.com/styles
const baseStyles = {
control: (baseStyles, state) => (Object.assign(Object.assign(Object.assign(Object.assign({}, baseStyles), { borderSizing: 'border-box', borderRadius: '8px',
// not sure where the extra 2px height comes from
padding: '11px 12px', border: `1px solid ${navTheme.outlineVariant}`, borderColor: getBorderColor(state, getError(error), navTheme), background: state.isDisabled ? navTheme.surfaceDim : navTheme.surface }), getTypography()), { '&:hover, &:focus': {
borderColor: navTheme.outline,
}, color: state.isDisabled ? navTheme.onSurfaceVariant : navTheme.onSurface })),
dropdownIndicator: (baseStyles, state) => (Object.assign(Object.assign({}, baseStyles), { color: state.isDisabled ? navTheme.onSurfaceDim : navTheme.onSurfaceVariant, display: 'flex' })),
menu: (baseStyles) => (Object.assign(Object.assign({}, baseStyles), { background: navTheme.surface, borderRadius: navTheme.radius.radius300, padding: navTheme.spacing.space100, marginTop: navTheme.spacing.space100, boxShadow: '0 0 0 1px rgb(0 0 0 / 10%), 0 4px 4px -2px rgb(0 0 0 / 5%), 0 8px 8px -4px rgb(0 0 0 / 5%), 0 16px 16px -8px rgb(0 0 0 / 5%)' })),
multiValue: (baseStyles) => (Object.assign(Object.assign({}, baseStyles), { marginRight: '12px', alignItems: 'center' })),
option: (baseStyles, state) => {
const isActive = state.isSelected || state.isFocused;
return Object.assign(Object.assign({}, baseStyles), { padding: '13px 12px', borderRadius: '4px', background: isActive ? navTheme.surfaceDim : 'transparent', '&:hover, &:focus': {
background: navTheme.surfaceDim,
}, color: navTheme.onSurface });
},
placeholder: (baseStyles) => (Object.assign(Object.assign({}, baseStyles), { color: navTheme.onSurfaceDim })),
};
return (_jsx(Select, Object.assign({ unstyled: true, ref: forwardedRef, className: className, components: mergedComponents, styles: styles(baseStyles) }, props)));
})).withConfig({ displayName: "brc-sc-BaseSelectComboBox", componentId: "brc-sc-vu9835" }) ``;
export const BaseSelectComboBoxInternal = Object.assign(Object.assign({}, components), { ClearIndicator: BaseClearIndicator, Control: BaseControl, DropdownIndicator: BaseDropdownIndicator, MenuList: BaseMenuList, MultiValue: BaseMultiValue, MultiValueRemove: BaseMultiValueRemove, Option: BaseOption, SingleValue: BaseSingleValue });
/**
* SelectComboBox component comes with label and helper text
* Only a few react-select props are exposed.
* @description Uses BaseSelectCombo box with form controls.
* This component works out of the box. And returns the value
* as an [] (isMulti), or {} (single select)
*/
export const SelectComboBox = styledBackwardsCompatibility(forwardRef((_a, forwardedRef) => {
var { className, name, helperText, label, optional, isClearable, isDisabled, isMulti, options, placeholder, components, styles } = _a, props = __rest(_a, ["className", "name", "helperText", "label", "optional", "isClearable", "isDisabled", "isMulti", "options", "placeholder", "components", "styles"]);
const { value, error, helpers } = useFormField(name);
const { setValue, setTouched, setError } = helpers;
const onBlur = () => setTouched(true);
// sends the entire selected object, ie: { value: 'strawberry', label: 'Strawberry' }
// send entire array if `isMulti`
const onChange = (selectedOption) => {
setTouched(true);
setValue(selectedOption);
setError(undefined);
};
const getValue = () => {
if (options) {
return value;
}
return undefined;
};
return (_jsx(InputWrapper, Object.assign({ label: label, optional: optional, errorText: error, helperText: helperText, className: className }, props, { children: _jsx(BaseSelectComboBox, { name: name, error: error, onChange: onChange, onBlur: onBlur, value: getValue(), isClearable: isClearable, isDisabled: isDisabled, isMulti: isMulti, options: options, placeholder: placeholder, components: components, styles: styles, ref: forwardedRef }) })));
}));
//# sourceMappingURL=select-combo-box.js.map