@commercetools-uikit/search-select-input
Version:
A search select input component built on top of `@commercetools-uikit/async-select-input` to asynchronously load results (options) using the keyword that the user has entered.
132 lines (126 loc) • 8.73 kB
JavaScript
import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
import { useMemo } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import AsyncSelectInput from '@commercetools-uikit/async-select-input';
import { warning } from '@commercetools-uikit/utils';
import { warnIfMenuPortalPropsAreMissing, CustomSelectInputOption, optionStyleCheckboxComponents, optionsStyleCheckboxSelectProps, SearchIconDropdownIndicator } from '@commercetools-uikit/select-utils';
import _styled from '@emotion/styled/base';
import { designTokens } from '@commercetools-uikit/design-system';
import { jsx } from '@emotion/react/jsx-runtime';
var messages = defineMessages({
noOptionsMessage: {
id: 'UIKit.SearchSelectInput.noOptionsMessage',
description: 'Text of search select dropdown when no options match search text',
defaultMessage: 'No matches found for your search term'
},
loadingOptionsMessage: {
id: 'UIKit.SearchSelectInput.loadingOptionsMessage',
description: 'Text showed while the options are being loaded',
defaultMessage: 'Loading exact matches'
},
placeholderMessage: {
id: 'UIKit.SearchSelectInput.placeholderMessage',
description: 'Placeholder text for the input',
defaultMessage: 'Search by…'
},
searchSelectInputAsFilterPlaceholder: {
id: 'UIKit.SearchSelectInput.searchSelectInputAsFilterPlaceholder',
description: 'Placeholder text for the input',
defaultMessage: 'Search'
}
});
const SearchSelectInputWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
target: "e6cl9390"
} : {
target: "e6cl9390",
label: "SearchSelectInputWrapper"
})(props => !props.isDisabled && !props.isReadOnly ? `div[class$='control'] {
&:hover {
cursor: text;
}
div[class$='indicatorContainer' i] {
cursor: pointer;
svg * {
fill: ${designTokens.colorNeutral60};
}
:hover svg * {
fill: ${designTokens.colorPrimary};
}
}
}` : '', ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNlYXJjaC1zZWxlY3QtaW5wdXQuc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9DIiwiZmlsZSI6InNlYXJjaC1zZWxlY3QtaW5wdXQuc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyogZXNsaW50LWRpc2FibGUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydCAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgdHlwZSB7IFRTZWFyY2hTZWxlY3RJbnB1dFByb3BzIH0gZnJvbSAnLi9zZWFyY2gtc2VsZWN0LWlucHV0JztcblxuY29uc3QgU2VhcmNoU2VsZWN0SW5wdXRXcmFwcGVyID0gc3R5bGVkLmRpdjxcbiAgUGljazxUU2VhcmNoU2VsZWN0SW5wdXRQcm9wcywgJ2lzRGlzYWJsZWQnIHwgJ2lzUmVhZE9ubHknIHwgJ2lzQ29uZGVuc2VkJz5cbj5gXG4gICR7KHByb3BzKSA9PlxuICAgICFwcm9wcy5pc0Rpc2FibGVkICYmICFwcm9wcy5pc1JlYWRPbmx5XG4gICAgICA/IGBkaXZbY2xhc3MkPSdjb250cm9sJ10ge1xuICAgICAgICAmOmhvdmVyIHtcbiAgICAgICAgICBjdXJzb3I6IHRleHQ7XG4gICAgICAgIH1cbiAgICAgICAgZGl2W2NsYXNzJD0naW5kaWNhdG9yQ29udGFpbmVyJyBpXSB7XG4gICAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgICAgIHN2ZyAqIHtcbiAgICAgICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDYwfTtcbiAgICAgICAgICB9XG4gICAgICAgICAgOmhvdmVyIHN2ZyAqIHtcbiAgICAgICAgICAgIGZpbGw6ICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeX07XG4gICAgICAgICAgfVxuICAgICAgICB9XG4gICAgICB9YFxuICAgICAgOiAnJ31cbmA7XG5cbmV4cG9ydCB7IFNlYXJjaFNlbGVjdElucHV0V3JhcHBlciB9O1xuIl19 */"));
const _excluded = ["value", "menuPortalZIndex", "maxMenuHeight", "controlShouldRenderValue", "appearance", "optionStyle"];
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
const SearchSelectInput = _ref => {
let _ref$value = _ref.value,
value = _ref$value === void 0 ? null : _ref$value,
_ref$menuPortalZIndex = _ref.menuPortalZIndex,
menuPortalZIndex = _ref$menuPortalZIndex === void 0 ? 1 : _ref$menuPortalZIndex,
_ref$maxMenuHeight = _ref.maxMenuHeight,
maxMenuHeight = _ref$maxMenuHeight === void 0 ? 220 : _ref$maxMenuHeight,
_ref$controlShouldRen = _ref.controlShouldRenderValue,
controlShouldRenderValue = _ref$controlShouldRen === void 0 ? true : _ref$controlShouldRen,
_ref$appearance = _ref.appearance,
appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
_ref$optionStyle = _ref.optionStyle,
optionStyle = _ref$optionStyle === void 0 ? 'list' : _ref$optionStyle,
props = _objectWithoutProperties(_ref, _excluded);
const intl = useIntl();
if (!props.isReadOnly) {
process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'SearchSelectInput: `onChange` is required when input is not read only.') : void 0;
}
warnIfMenuPortalPropsAreMissing({
menuPortalZIndex: menuPortalZIndex,
menuPortalTarget: props.menuPortalTarget,
componentName: 'SearchSelectInput'
});
const noOptionsMessage = props.noOptionsMessage || (() => intl.formatMessage(messages.noOptionsMessage));
const loadingMessage = props.loadingMessage || intl.formatMessage(messages.loadingOptionsMessage);
const placeholder = appearance === 'filter' && !props.placeholder ? intl.formatMessage(messages.searchSelectInputAsFilterPlaceholder) : props.placeholder || intl.formatMessage(messages.placeholderMessage);
const optionType = props.optionType;
const components = useMemo(() => _objectSpread(_objectSpread(_objectSpread({
Option: optionInnerProps => jsx(CustomSelectInputOption, _objectSpread(_objectSpread({}, optionInnerProps), {}, {
optionType: optionType,
optionInnerProps: optionInnerProps
}))
}, optionStyle === 'checkbox' ? optionStyleCheckboxComponents(appearance) : {}), props.components), {}, {
DropdownIndicator: SearchIconDropdownIndicator
}), [optionStyle, appearance, props.components, optionType]);
return jsx(SearchSelectInputWrapper, {
isDisabled: props.isDisabled,
isReadOnly: props.isReadOnly,
isCondensed: appearance === 'filter' ? true : props.isCondensed,
children: jsx(AsyncSelectInput, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
value: value,
menuPortalZIndex: menuPortalZIndex,
maxMenuHeight: maxMenuHeight,
appearance: appearance,
optionStyle: optionStyle,
components: components,
placeholder: placeholder,
iconLeft: props.iconLeft,
loadingMessage: loadingMessage,
noOptionsMessage: noOptionsMessage,
isSearchable: true
// @ts-expect-error
,
closeMenuOnSelect: props.closeMenuOnSelect
}, optionStyle === 'checkbox' ? optionsStyleCheckboxSelectProps() : {}), {}, {
controlShouldRenderValue: appearance === 'filter' ? false : controlShouldRenderValue
}))
});
};
SearchSelectInput.displayName = 'SearchSelectInput';
var SearchSelectInput$1 = SearchSelectInput;
// NOTE: This string will be replaced on build time with the package version.
var version = "20.2.3";
export { SearchSelectInput$1 as default, version };