@workday/canvas-kit-labs-react
Version:
Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functi
208 lines (207 loc) • 15.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { generateUniqueId, accessibleHideStyles, } from '@workday/canvas-kit-react/common';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { searchIcon, xIcon } from '@workday/canvas-system-icons-web';
import { FormField } from '@workday/canvas-kit-react/form-field';
import { Combobox } from '@workday/canvas-kit-labs-react/combobox';
import { TextInput } from '@workday/canvas-kit-react/text-input';
import { searchThemes, SearchTheme } from './themes';
import chroma from 'chroma-js';
import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling';
import { brand, system } from '@workday/canvas-tokens-web';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
function getInputColors(theme, isFocused) {
return {
background: isFocused && theme.backgroundFocus ? theme.backgroundFocus : theme.background,
backgroundHover: theme.backgroundHover,
color: isFocused && theme.colorFocus ? theme.colorFocus : theme.color,
placeholderColor: isFocused && theme.placeholderColorFocus
? theme.placeholderColorFocus
: theme.placeholderColor,
boxShadow: isFocused && theme.boxShadowFocus ? theme.boxShadowFocus : theme.boxShadow,
};
}
const formCollapsedBackground = '#fff';
/**
* @deprecated ⚠️ `searchFormStencil` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage).
*/
export const searchFormStencil = createStencil({
vars: {
minWidth: '',
maxWidth: '',
height: '',
background: '',
backgroundFocus: '',
backgroundHover: '',
color: '',
colorFocus: '',
placeholderColor: '',
placeholderColorFocus: '',
boxShadow: '',
boxShadowFocus: '',
},
parts: {
searchContainer: 'search-form-container',
combobox: 'search-form-combobox',
closeButton: 'search-form-close-button',
searchField: 'search-form-field',
submitSearchIcon: 'search-form-submit-search-icon',
openSearchIcon: 'search-form-open-search-icon',
searchInput: 'search-form-input',
closeButtonPart: 'search-form-close-button',
},
base: { name: "b5mzu", styles: "box-sizing:border-box;position:relative;flex-grow:1;display:flex;align-items:center;margin-inline-start:var(--cnvs-sys-space-x6);min-width:var(--minWidth-search-form-bbb053, 7.5rem);max-width:var(--maxWidth-search-form-bbb053, 30rem);[data-part=\"search-form-container\"]{position:relative;display:flex;align-items:center;width:100%;text-align:left;min-height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));}[data-part=\"search-form-combobox\"]{width:100%;}[data-part=\"search-form-close-button\"]{position:absolute;top:0;bottom:0;right:0;margin:auto var(--cnvs-sys-space-x2);z-index:3;display:none;}[data-part=\"search-form-field\"]{width:100%;height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));max-width:var(--maxWidth-search-form-bbb053, 30rem);margin-bottom:0;display:inline-block;> div{display:block;}}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{position:absolute;margin:auto var(--cnvs-sys-space-x2);top:0;bottom:0;left:0;padding:0;z-index:3;:dir(rtl){right:0;left:auto;}}[data-part=\"search-form-input\"]{max-width:var(--maxWidth-search-form-bbb053);min-width:var(--minWidth-search-form-bbb053);padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));padding-inline-end:var(--cnvs-sys-space-x10);background-color:var(--background-search-form-bbb053, var(--cnvs-sys-color-bg-alt-soft));height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));font-size:var(--cnvs-sys-font-size-subtext-large);box-shadow:var(--boxShadow-search-form-bbb053);color:var(--color-search-form-bbb053, var(--cnvs-sys-color-text-default));border:none;-webkit-appearance:none;transition:background-color 120ms, color 120ms, box-shadow 200ms, border-color 200ms;z-index:2;width:100%;&::-webkit-search-cancel-button{display:none;}&::placeholder{color:var(--placeholderColor-search-form-bbb053, var(--cnvs-sys-color-text-hint));}&:placeholder-shown{text-overflow:ellipsis;}&:hover{background-color:var(--backgroundHover-search-form-bbb053, var(--background-search-form-bbb053, var(--cnvs-sys-color-bg-alt-default)));}&:is(:focus-visible, .focus):where(:not([disabled])){background:var(--backgroundFocus-search-form-bbb053, var(--cnvs-sys-color-bg-alt-soft));color:var(--colorFocus-search-form-bbb053);border-color:var(--cnvs-brand-common-focus-outline);outline:0.125rem solid transparent;box-shadow:var(--boxShadowFocus-search-form-bbb053, 0 0 0 0px var(--cnvs-sys-color-bg-default), 0 0 0 2px var(--cnvs-brand-common-focus-outline));::placeholder{color:var(--placeholderColorFocus-search-form-bbb053);}}}" },
modifiers: {
isHiddenSubmitSearchIcon: {
true: { name: "1m3urg", styles: "[data-part=\"search-form-submit-search-icon\"]{display:none;}" }
},
isHiddenOpenSeachIcon: {
true: { name: "1fn0ve", styles: "[data-part=\"search-form-open-search-icon\"]{display:none;}" }
},
isCollapsed: {
true: { name: "3jgrm1", styles: "top:0;right:0;left:0;bottom:0;margin:0;position:relative;background-color:var(--cnvs-sys-color-bg-transparent-default);transition:background-color 120ms;max-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));min-width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x3));overflow:hidden;z-index:1;[data-part=\"search-form-field\"]{display:none;max-width:100%;}[data-part=\"search-form-submit-search-icon\"], [data-part=\"search-form-open-search-icon\"]{margin:auto var(--cnvs-sys-space-x2);}[data-part=\"search-form-input\"]{font-size:20px;padding-inline-start:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));padding-inline-end:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x4));max-width:none;min-width:0;background-color:var(--cnvs-sys-color-bg-transparent-default);height:var(--height-search-form-bbb053, var(--cnvs-sys-space-x10));}" },
false: { name: "3f532a", styles: "[data-part=\"search-form-field\"]{display:inline-block;}" }
},
rightAlign: {
true: { name: "2vnc8r", styles: "text-align:right;" }
},
showForm: {
true: { name: "2pruap", styles: "" },
false: { name: "2nwtxg", styles: "" }
},
grow: {
true: { name: "1ojfjy", styles: "max-width:100%;[data-part=\"search-form-field\"], [data-part=\"search-form-input\"]{max-width:100%;}" }
},
searchTheme: {
// Light theme
light: { name: "2zp2u9", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-alt-soft);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover{background:var(--cnvs-sys-color-bg-alt-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-alt-soft);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 2px var(--cnvs-brand-common-focus-outline);}}" },
// Dark theme
dark: { name: "42qgd8", styles: "[data-part=\"search-form-input\"]{background-color:rgba(0, 0, 0, 0.2);color:var(--cnvs-sys-color-text-inverse);box-shadow:none;::placeholder{color:var(--cnvs-sys-color-text-inverse);}:hover{background:rgba(0, 0, 0, 0.2);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-default);color:var(--cnvs-sys-color-text-default);::placeholder{color:var(--cnvs-sys-color-text-hint);}box-shadow:none;}}" },
//Transparent theme
transparent: { name: "3dt08l", styles: "[data-part=\"search-form-input\"]{background:var(--cnvs-sys-color-bg-transparent-default);background-focus:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-sys-color-text-default);color-focus:var(--cnvs-sys-color-text-default);placeholder-color:var(--cnvs-sys-color-text-hint);placeholder-color-focus:var(--cnvs-sys-color-text-hint);box-shadow:none;box-shadow-focus:none;}" }
}
},
compound: [
{
modifiers: { showForm: 'true', isCollapsed: 'true' },
styles: { name: "39rf4a", styles: "position:absolute;background-color:var(--cnvs-sys-color-bg-default);max-width:none;overflow:visible;& [data-part=\"search-form-close-button\"]{display:inline-block;}& [data-part=\"search-form-field\"]{display:inline-block;}& [data-part=\"search-form-input\"]{box-shadow:none;background:var(--cnvs-sys-color-bg-transparent-default);:hover{background:var(--cnvs-sys-color-bg-transparent-default);}&:is(:focus-visible, &.focus):where(:not([disabled])){background:var(--cnvs-sys-color-bg-transparent-default);box-shadow:none;}}" }
},
{
modifiers: { isCollapsed: 'true', showForm: 'true' },
styles: { name: "19a83i", styles: "& [data-part=\"search-form-field\"]{display:inline-block;}" }
}
]
}, "search-form-bbb053");
/**
* @deprecated ⚠️ `SearchForm` is deprecated and will be removed in a future major version. Please reference our [Autocomplete example](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage).
*/
class SearchForm extends React.Component {
constructor() {
super(...arguments);
this.inputRef = React.createRef();
this.openRef = React.createRef();
this.defaultLabelId = generateUniqueId();
this.state = {
showForm: false,
searchQuery: '',
isFocused: false,
};
this.getTheme = () => {
let theme;
if (typeof this.props.searchTheme === 'string') {
theme = searchThemes[this.props.searchTheme];
}
else if (this.props.searchTheme) {
theme = this.props.searchTheme;
}
else {
theme = searchThemes[SearchTheme.Light];
}
return theme;
};
this.getThemeColors = () => {
const theme = this.props.isCollapsed && this.state.showForm
? searchThemes[SearchTheme.Transparent]
: this.getTheme();
return getInputColors(theme, this.state.isFocused);
};
this.getIconButtonType = () => {
let background = this.getThemeColors().background || `#fff`;
if (this.props.isCollapsed && this.state.showForm) {
background = formCollapsedBackground;
}
const isDarkBackground = chroma(background).get('lab.l') < 70;
return isDarkBackground ? 'inverse' : undefined;
};
this.handleSubmit = (event) => {
event.preventDefault();
if (this.props.allowEmptyStringSearch || this.state.searchQuery.trim()) {
this.props.onSubmit(event);
}
else {
this.focusInput();
}
};
this.openCollapsedSearch = () => {
if (this.props.isCollapsed && !this.state.showForm) {
this.setState({ showForm: true });
}
};
this.closeCollapsedSearch = () => {
if (this.props.isCollapsed && this.state.showForm) {
this.setState({ showForm: false });
}
};
this.focusInput = () => {
if (this.inputRef.current) {
this.inputRef.current.focus();
}
};
this.focusOpen = () => {
if (this.openRef.current) {
this.openRef.current.focus();
}
};
this.handleFocus = () => {
this.setState({ isFocused: true });
};
this.handleBlur = () => {
this.setState({ isFocused: false });
};
this.handleSearchInputChange = (event) => {
event.preventDefault();
this.setState({ searchQuery: event.target.value });
if (this.props.onInputChange) {
this.props.onInputChange(event);
}
};
}
componentDidUpdate(prevProps, prevState) {
const showFormToggled = this.state.showForm !== prevState.showForm;
if (showFormToggled) {
if (this.state.showForm) {
this.focusInput();
}
else {
this.focusOpen();
}
}
}
render() {
const { clearButtonAriaLabel = 'Reset Search Form', placeholder = 'Search', inputLabel = 'Search', submitAriaLabel = 'Search', openButtonAriaLabel = 'Open Search', closeButtonAriaLabel = 'Cancel', labelId = this.defaultLabelId, showClearButton = true, height = px2rem(40), grow, onSubmit, isCollapsed, onInputChange, autocompleteItems, initialValue, searchTheme, rightAlign, allowEmptyStringSearch = false, ...elemProps } = this.props;
return (_jsx("form", { role: "search", action: ".", "aria-labelledby": labelId, onSubmit: this.handleSubmit, ...mergeStyles(elemProps, searchFormStencil({
grow,
rightAlign,
isCollapsed: isCollapsed ? 'true' : 'false',
showForm: this.state.showForm ? 'true' : 'false',
height: typeof height === 'number' ? px2rem(height) : height,
isHiddenSubmitSearchIcon: !!isCollapsed && !this.state.showForm,
isHiddenOpenSeachIcon: !isCollapsed || (!!isCollapsed && this.state.showForm),
searchTheme: typeof searchTheme === 'string' ? searchTheme : undefined,
...(typeof searchTheme !== 'string' ? searchTheme : {}),
})), children: _jsxs("div", { ...searchFormStencil.parts.searchContainer, children: [_jsx(TertiaryButton, { "aria-label": submitAriaLabel, icon: searchIcon, variant: this.getIconButtonType(), type: "submit", size: "small", ...searchFormStencil.parts.submitSearchIcon }), _jsx(TertiaryButton, { "aria-label": openButtonAriaLabel, icon: searchIcon, variant: this.getIconButtonType(), onClick: this.openCollapsedSearch, ref: this.openRef, type: "button", ...searchFormStencil.parts.openSearchIcon }), _jsxs(FormField, { id: labelId, ...searchFormStencil.parts.searchField, children: [_jsx(FormField.Label, { cs: accessibleHideStyles, children: inputLabel }), _jsx(Combobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: labelId, ...searchFormStencil.parts.combobox, children: _jsx(FormField.Input, { as: TextInput, ref: this.inputRef, cs: this.state.isFocused ? 'focus' : undefined, onBlur: this.handleBlur, value: this.state.searchQuery, placeholder: placeholder, name: "search", autoComplete: "off", ...searchFormStencil.parts.searchInput }) })] }), _jsx(TertiaryButton, { icon: xIcon, "aria-label": closeButtonAriaLabel, onClick: this.closeCollapsedSearch, id: "foo", ...searchFormStencil.parts.closeButton })] }) }));
}
}
SearchForm.Theme = SearchTheme;
export { SearchForm };