@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
237 lines (236 loc) • 17.4 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchForm = exports.searchFormStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const common_1 = require("@workday/canvas-kit-react/common");
const button_1 = require("@workday/canvas-kit-react/button");
const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
const form_field_1 = require("@workday/canvas-kit-react/form-field");
const combobox_1 = require("@workday/canvas-kit-labs-react/combobox");
const text_input_1 = require("@workday/canvas-kit-react/text-input");
const themes_1 = require("./themes");
const chroma_js_1 = __importDefault(require("chroma-js"));
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const layout_1 = require("@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).
*/
exports.searchFormStencil = (0, canvas_kit_styling_1.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 = (0, common_1.generateUniqueId)();
this.state = {
showForm: false,
searchQuery: '',
isFocused: false,
};
this.getTheme = () => {
let theme;
if (typeof this.props.searchTheme === 'string') {
theme = themes_1.searchThemes[this.props.searchTheme];
}
else if (this.props.searchTheme) {
theme = this.props.searchTheme;
}
else {
theme = themes_1.searchThemes[themes_1.SearchTheme.Light];
}
return theme;
};
this.getThemeColors = () => {
const theme = this.props.isCollapsed && this.state.showForm
? themes_1.searchThemes[themes_1.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 = (0, chroma_js_1.default)(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 = (0, canvas_kit_styling_1.px2rem)(40), grow, onSubmit, isCollapsed, onInputChange, autocompleteItems, initialValue, searchTheme, rightAlign, allowEmptyStringSearch = false, ...elemProps } = this.props;
return ((0, jsx_runtime_1.jsx)("form", { role: "search", action: ".", "aria-labelledby": labelId, onSubmit: this.handleSubmit, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.searchFormStencil)({
grow,
rightAlign,
isCollapsed: isCollapsed ? 'true' : 'false',
showForm: this.state.showForm ? 'true' : 'false',
height: typeof height === 'number' ? (0, canvas_kit_styling_1.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: (0, jsx_runtime_1.jsxs)("div", { ...exports.searchFormStencil.parts.searchContainer, children: [(0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { "aria-label": submitAriaLabel, icon: canvas_system_icons_web_1.searchIcon, variant: this.getIconButtonType(), type: "submit", size: "small", ...exports.searchFormStencil.parts.submitSearchIcon }), (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { "aria-label": openButtonAriaLabel, icon: canvas_system_icons_web_1.searchIcon, variant: this.getIconButtonType(), onClick: this.openCollapsedSearch, ref: this.openRef, type: "button", ...exports.searchFormStencil.parts.openSearchIcon }), (0, jsx_runtime_1.jsxs)(form_field_1.FormField, { id: labelId, ...exports.searchFormStencil.parts.searchField, children: [(0, jsx_runtime_1.jsx)(form_field_1.FormField.Label, { cs: common_1.accessibleHideStyles, children: inputLabel }), (0, jsx_runtime_1.jsx)(combobox_1.Combobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: labelId, ...exports.searchFormStencil.parts.combobox, children: (0, jsx_runtime_1.jsx)(form_field_1.FormField.Input, { as: text_input_1.TextInput, ref: this.inputRef, cs: this.state.isFocused ? 'focus' : undefined, onBlur: this.handleBlur, value: this.state.searchQuery, placeholder: placeholder, name: "search", autoComplete: "off", ...exports.searchFormStencil.parts.searchInput }) })] }), (0, jsx_runtime_1.jsx)(button_1.TertiaryButton, { icon: canvas_system_icons_web_1.xIcon, "aria-label": closeButtonAriaLabel, onClick: this.closeCollapsedSearch, id: "foo", ...exports.searchFormStencil.parts.closeButton })] }) }));
}
}
SearchForm.Theme = themes_1.SearchTheme;
exports.SearchForm = SearchForm;