@arco-design/mobile-react 2.20.0 → 2.21.0

package/umd/search-bar/highlight.js

@@ -0,0 +1,87 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "@babel/runtime/helpers/objectWithoutPropertiesLoose", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/objectWithoutPropertiesLoose"), require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.objectWithoutPropertiesLoose, global.react);
+    global.highlight = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _objectWithoutPropertiesLoose2, _react) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.highlightWithContainMode = highlightWithContainMode;
+  _exports.highlightWithPrefixMode = highlightWithPrefixMode;
+  _extends2 = _interopRequireDefault(_extends2);
+  _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
+  _react = _interopRequireDefault(_react);
+  var _excluded = ["content", "keyword"];
+
+  function createHighlightNode(config, index) {
+    var keyword = config.keyword,
+        highlightClassName = config.highlightClassName,
+        highlightStyle = config.highlightStyle;
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: highlightClassName,
+      style: highlightStyle,
+      key: index
+    }, keyword);
+  }
+  /**
+   * 高亮搜索候选项中，包含的关键字
+   *
+   */
+
+
+  function highlightWithContainMode(config) {
+    var _config$content = config.content,
+        content = _config$content === void 0 ? '' : _config$content,
+        _config$keyword = config.keyword,
+        keyword = _config$keyword === void 0 ? '' : _config$keyword; // 具体实现思路就是将keyword作为split的分隔符，切割content得到数组
+
+    var splitContent = content.split(keyword); // 再将高亮后的keyword节点，插空填入数组
+
+    var highlightResult = splitContent.reduce(function (prev, word, index) {
+      prev.push(word);
+
+      if (index !== splitContent.length - 1) {
+        prev.push(createHighlightNode(config, index));
+      }
+
+      return prev;
+    }, []);
+    return highlightResult;
+  }
+  /**
+   * 高亮搜索候选项和关键字的最长前缀公共字符串
+   *
+   */
+
+
+  function highlightWithPrefixMode(config) {
+    var _config$content2 = config.content,
+        content = _config$content2 === void 0 ? '' : _config$content2,
+        _config$keyword2 = config.keyword,
+        keyword = _config$keyword2 === void 0 ? '' : _config$keyword2,
+        otherConfig = (0, _objectWithoutPropertiesLoose2.default)(config, _excluded);
+    var splitIndex = -1;
+
+    for (var i = 0; i < keyword.length; i++) {
+      if (i >= content.length || content[i] !== keyword[i]) {
+        break;
+      }
+
+      splitIndex = i;
+    }
+
+    return splitIndex > -1 ? [createHighlightNode((0, _extends2.default)({}, otherConfig, {
+      keyword: content.substring(0, splitIndex + 1)
+    }), 0), content.substring(splitIndex + 1)] : content;
+  }
+});

package/umd/search-bar/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SearchAssociationBaseItem, SearchBarProps, SearchBarRef } from './type';
+export { SearchBarProps, SearchBarRef, SearchAssociationHighlightMode, SearchAssociationItem, SearchAssociationShowType, SearchBarShape, } from './type';
+/**
+ * 搜索栏组件
+ * @en SearchBar component
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 搜索栏
+ * @name_en SearchBar
+ */
+declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps<SearchAssociationBaseItem> & React.RefAttributes<SearchBarRef>>;
+export default SearchBar;

package/umd/search-bar/index.js

@@ -0,0 +1,235 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@babel/runtime/helpers/extends", "@babel/runtime/helpers/objectWithoutPropertiesLoose", "@arco-design/mobile-utils", "react", "../context-provider", "../icon", "../input/hooks", "./association", "./cancel-button", "./type"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/objectWithoutPropertiesLoose"), require("@arco-design/mobile-utils"), require("react"), require("../context-provider"), require("../icon"), require("../input/hooks"), require("./association"), require("./cancel-button"), require("./type"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._extends, global.objectWithoutPropertiesLoose, global.mobileUtils, global.react, global.contextProvider, global.icon, global.hooks, global.association, global.cancelButton, global.type);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _objectWithoutPropertiesLoose2, _mobileUtils, _react, _contextProvider, _icon, _hooks, _association, _cancelButton, _type) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  _exports.default = _exports.SearchBarShape = _exports.SearchBarRef = _exports.SearchBarProps = _exports.SearchAssociationShowType = _exports.SearchAssociationItem = _exports.SearchAssociationHighlightMode = void 0;
+  _extends2 = _interopRequireDefault(_extends2);
+  _objectWithoutPropertiesLoose2 = _interopRequireDefault(_objectWithoutPropertiesLoose2);
+  _react = _interopRequireWildcard(_react);
+  _exports.SearchBarProps = _type.SearchBarProps;
+  _exports.SearchBarRef = _type.SearchBarRef;
+  _exports.SearchAssociationHighlightMode = _type.SearchAssociationHighlightMode;
+  _exports.SearchAssociationItem = _type.SearchAssociationItem;
+  _exports.SearchAssociationShowType = _type.SearchAssociationShowType;
+  _exports.SearchBarShape = _type.SearchBarShape;
+  var _excluded = ["inputClass", "inputStyle", "type", "nativeProps", "id", "name", "maxLength", "placeholder", "readOnly", "onKeyUp", "onKeyPress", "disabled", "pattern", "prefix", "append", "textAlign", "actionButton", "clearable", "clearShowType", "shape", "className", "enableAssociation", "associationVisible", "associationShowType", "associationItems", "highlightClassName", "highlightMode", "highlightStyle", "onCancel", "onAssociationClick", "onAssociationItemClick", "renderAssociation", "renderAssociationItem"];
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  /**
+   * 搜索栏组件
+   * @en SearchBar component
+   * @type 数据录入
+   * @type_en Data Entry
+   * @name 搜索栏
+   * @name_en SearchBar
+   */
+  var SearchBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _useContext = (0, _react.useContext)(_contextProvider.GlobalContext),
+        prefixCls = _useContext.prefixCls,
+        locale = _useContext.locale;
+
+    var searchBarPrefixCls = prefixCls + "-search-bar";
+    var inputClass = props.inputClass,
+        inputStyle = props.inputStyle,
+        _props$type = props.type,
+        type = _props$type === void 0 ? 'search' : _props$type,
+        nativeProps = props.nativeProps,
+        id = props.id,
+        name = props.name,
+        maxLength = props.maxLength,
+        _props$placeholder = props.placeholder,
+        placeholder = _props$placeholder === void 0 ? locale == null ? void 0 : locale.SearchBar.placeholder : _props$placeholder,
+        readOnly = props.readOnly,
+        onKeyUp = props.onKeyUp,
+        onKeyPress = props.onKeyPress,
+        disabled = props.disabled,
+        pattern = props.pattern,
+        _props$prefix = props.prefix,
+        prefix = _props$prefix === void 0 ? /*#__PURE__*/_react.default.createElement(_icon.IconSearch, {
+      className: searchBarPrefixCls + "-search-icon"
+    }) : _props$prefix,
+        append = props.append,
+        _props$textAlign = props.textAlign,
+        textAlign = _props$textAlign === void 0 ? 'left' : _props$textAlign,
+        actionButton = props.actionButton,
+        _props$clearable = props.clearable,
+        clearable = _props$clearable === void 0 ? true : _props$clearable,
+        _props$clearShowType = props.clearShowType,
+        clearShowType = _props$clearShowType === void 0 ? 'value' : _props$clearShowType,
+        _props$shape = props.shape,
+        shape = _props$shape === void 0 ? 'square' : _props$shape,
+        className = props.className,
+        _props$enableAssociat = props.enableAssociation,
+        enableAssociation = _props$enableAssociat === void 0 ? false : _props$enableAssociat,
+        associationVisible = props.associationVisible,
+        _props$associationSho = props.associationShowType,
+        associationShowType = _props$associationSho === void 0 ? 'default' : _props$associationSho,
+        associationItems = props.associationItems,
+        highlightClassName = props.highlightClassName,
+        highlightMode = props.highlightMode,
+        highlightStyle = props.highlightStyle,
+        onCancel = props.onCancel,
+        onAssociationClick = props.onAssociationClick,
+        onAssociationItemClick = props.onAssociationItemClick,
+        renderAssociation = props.renderAssociation,
+        renderAssociationItem = props.renderAssociationItem,
+        inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    var inputRef = (0, _react.useRef)(null);
+    /**
+     * 格式化搜索输入框尾部要插入的内容
+     * @en Format the content to be inserted at the end of the search input box
+     */
+
+    var formatAppendProp = function formatAppendProp(focusing, currentInputValue) {
+      var appendNode = null;
+
+      if (typeof append === 'function') {
+        appendNode = append(focusing, currentInputValue);
+      } else {
+        appendNode = append;
+      } // 默认情况下，在激活时或有内容时插入一个cancelBtn
+      // @en By default inserts a cancelBtn on activation or when there is content
+
+
+      var formatActionButton = typeof actionButton === 'undefined' ? /*#__PURE__*/_react.default.createElement(_cancelButton.CancelButton, {
+        focusing: focusing,
+        currentInputValue: currentInputValue,
+        className: searchBarPrefixCls + "-cancel-btn",
+        onCancel: onCancel,
+        text: locale == null ? void 0 : locale.SearchBar.cancelBtn
+      }) : actionButton;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, appendNode, formatActionButton, enableAssociation ? /*#__PURE__*/_react.default.createElement(_association.SearchBarAssociation, {
+        prefixCls: searchBarPrefixCls,
+        keyword: currentInputValue // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        ,
+        visible: actualVisible,
+        associationItems: associationItems,
+        highlightClassName: highlightClassName,
+        highlightMode: highlightMode,
+        highlightStyle: highlightStyle,
+        onAssociationClick: onAssociationClick,
+        onAssociationItemClick: onAssociationItemClick,
+        renderAssociation: renderAssociation,
+        renderAssociationItem: renderAssociationItem
+      }) : null);
+    };
+
+    var _useInputLogic = (0, _hooks.useInputLogic)((0, _extends2.default)({
+      className: (0, _mobileUtils.cls)(className, searchBarPrefixCls + "-" + shape),
+      prefix: prefix,
+      clearable: clearable,
+      append: formatAppendProp,
+      clearShowType: clearShowType
+    }, inputProps), inputRef),
+        inputValue = _useInputLogic.inputValue,
+        handleChange = _useInputLogic.handleChange,
+        handleInput = _useInputLogic.handleInput,
+        handleKeyDown = _useInputLogic.handleKeyDown,
+        handleFocus = _useInputLogic.handleFocus,
+        handleBlur = _useInputLogic.handleBlur,
+        handleClick = _useInputLogic.handleClick,
+        renderWrapper = _useInputLogic.renderWrapper,
+        wrapRef = _useInputLogic.wrapRef;
+
+    var _useState = (0, _react.useState)(associationShowType === 'always' || (associationShowType === 'value' || associationShowType === 'default') && Boolean(inputValue)),
+        visible = _useState[0],
+        setVisible = _useState[1]; // 真实的控制搜索联想框显隐，受控模式优先生效
+    // @en Control the display and hide of the search association box, and the controlled mode takes effect first
+
+
+    var actualVisible = associationVisible != null ? associationVisible : visible;
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: wrapRef.current,
+        input: inputRef.current,
+        toggleAssociation: function toggleAssociation(newVisible) {
+          setVisible(newVisible != null ? newVisible : !visible);
+        }
+      };
+    });
+    /**
+     * 处理非受控逻辑下，搜索联想框的显隐状态
+     * @en Handle the display state of the search association box under uncontrolled logic
+     *
+     * @param {boolean} newVisible 新的visible
+     * @param {string} newValue 新的输入框值
+     */
+
+    var formatSetAssociationVisible = function formatSetAssociationVisible(newVisible, newValue) {
+      if (associationShowType === 'always') {
+        setVisible(true); // 聚焦模式下，直接把visible和newVisible对齐即可
+        // @en In focus mode, just align visible and newVisible directly
+      } else if (associationShowType === 'focus') {
+        setVisible(newVisible); // 聚焦 + 有值模式下，需要newVisible为true和newValue.length > 0同时满足
+        // @en In focus + valued mode, newVisible is required to be true and newValue.length > 0 to be satisfied at the same time
+      } else if (associationShowType === 'default') {
+        setVisible(newVisible && Boolean(newValue)); // 仅有值模式下，visible需要newValue.length > 0
+        // @en In value-only mode, visible requires newValue.length > 0
+      } else if (associationShowType === 'value') {
+        setVisible(Boolean(newValue));
+      }
+    };
+
+    var handleInputFocus = function handleInputFocus(e) {
+      formatSetAssociationVisible(true, e.target.value);
+      handleFocus(e);
+    };
+
+    var handleInputBlur = function handleInputBlur(e) {
+      formatSetAssociationVisible(false, e.target.value);
+      handleBlur(e);
+    };
+
+    var handleInputChange = function handleInputChange(e) {
+      var newValue = e.target.value;
+      formatSetAssociationVisible(Boolean(newValue), newValue);
+      handleChange(e);
+    };
+
+    var renderSearchBar = function renderSearchBar() {
+      return renderWrapper(searchBarPrefixCls, type, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, nativeProps, {
+        id: id,
+        name: name,
+        maxLength: maxLength,
+        placeholder: placeholder,
+        readOnly: readOnly,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
+        onKeyUp: onKeyUp,
+        onKeyPress: onKeyPress,
+        ref: inputRef,
+        className: (0, _mobileUtils.cls)(searchBarPrefixCls + "-input", inputClass, searchBarPrefixCls + "-input-" + textAlign),
+        style: inputStyle,
+        value: inputValue,
+        type: type,
+        disabled: disabled,
+        pattern: pattern,
+        onChange: handleInputChange,
+        onInput: handleInput,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick
+      })));
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, renderSearchBar);
+  });
+  var _default = SearchBar;
+  _exports.default = _default;
+});

package/umd/search-bar/style/css/index.css

@@ -0,0 +1,148 @@
+.arco-search-bar-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  position: relative;
+  padding:  0.32rem ;
+  background-color:  #FFFFFF ;
+}
+.arco-search-bar-square .arco-search-bar-wrap {
+  border-radius:  0.04rem ;
+}
+.arco-search-bar-round .arco-search-bar-wrap {
+  border-radius:  199.98rem ;
+}
+.arco-search-bar-wrap {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  height:  0.72rem ;
+  font-size:  0.28rem ;
+  padding:  0.16rem 0.28rem ;
+  background-color:  #F2F3F5 ;
+}
+.arco-search-bar-input {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+          flex: 1;
+  background-color: transparent;
+  height:  0.4rem ;
+  caret-color:  #165dff ;
+}
+.arco-search-bar-input-left {
+  text-align: left;
+}
+.arco-search-bar-input-right {
+  text-align: right;
+}
+.arco-search-bar-input-center {
+  text-align: center;
+}
+.arco-search-bar-input::-webkit-input-placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-search-bar-input::placeholder {
+  color:  #c9cdd4 ;
+}
+.arco-search-bar-input::-webkit-search-cancel-button {
+  display: none;
+}
+.arco-search-bar-prefix,
+.arco-search-bar-suffix,
+.arco-search-bar-clear {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+.arco-search-bar-prefix {
+  margin-right:  0.18rem ;
+}
+.arco-search-bar-clear {
+  color:  #C9CDD4 ;
+}
+.arco-search-bar-search-icon {
+  color:  #86909C ;
+  font-size:  0.32rem ;
+}
+.arco-search-bar-cancel-btn {
+  margin-left:  0.32rem ;
+  color:  #165dff ;
+  font-size:  0.3rem ;
+}
+.arco-search-bar-association {
+  position: absolute;
+  left: 0;
+  right: 0;
+  background-color:  #FFFFFF ;
+  top: 100%;
+  display: none;
+}
+.arco-search-bar-association-visible {
+  display: block;
+}
+.arco-search-bar-association-item {
+  height:  1.04rem ;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  position: relative;
+  color:  #1d2129 ;
+  padding:  0.32rem ;
+  font-size:  0.3rem ;
+}
+.arco-search-bar-association-item:not(:last-child) {
+  position: relative;
+  border-width: 0;
+}
+.arco-search-bar-association-item:not(:last-child)::after {
+  content: '';
+  width: 100%;
+  height: 1PX;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+  border-bottom-style: solid;
+  border-bottom-width: 1PX;
+  border-bottom-color: #e5e6eb;
+  box-sizing: border-box;
+  transform-origin: left bottom;
+  -webkit-transform-origin: left bottom;
+  pointer-events: none;
+  border-radius: 0;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
+  .arco-search-bar-association-item:not(:last-child)::after {
+    transform: scaleY(0.5);
+    -webkit-transform: scaleY(0.5);
+    border-radius: 0;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
+  .arco-search-bar-association-item:not(:last-child)::after {
+    transform: scaleY(0.33333333);
+    -webkit-transform: scaleY(0.33333333);
+    border-radius: 0;
+  }
+}
+.arco-search-bar-association-item-highlight {
+  color:  #165dff ;
+}

package/umd/search-bar/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/umd/search-bar/style/css/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../../style/css/public.css", "./index.css"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../../style/css/public.css"), require("./index.css"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/search-bar/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/umd/search-bar/style/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("./index.less"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/search-bar/style/index.less

@@ -0,0 +1,111 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-search-bar {
+  &-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    .use-var(padding, search-bar-padding);
+    .use-var(background-color, search-bar-background-color);
+  }
+  &-square {
+    .@{prefix}-search-bar-wrap {
+      .use-var(border-radius, search-bar-square-shape-border-radius);
+    }
+  }
+  &-round {
+    .@{prefix}-search-bar-wrap {
+      .use-var(border-radius, search-bar-round-shape-border-radius);
+    }
+  }
+  &-wrap {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    .use-var(height, search-bar-input-wrapper-height);
+    .use-var(font-size, search-bar-input-wrapper-font-size);
+    .use-var(padding, search-bar-input-wrapper-padding);
+    .use-var(background-color, search-bar-input-wrapper-background-color);
+  }
+  &-input {
+    flex: 1;
+    background-color: transparent;
+    .use-var(height, search-bar-input-height);
+    .use-var(caret-color, search-bar-input-caret-color);
+    &-left {
+      text-align: left;
+    }
+    &-right {
+      text-align: right;
+    }
+    &-center {
+      text-align: center;
+    }
+
+    &::placeholder {
+      .use-var(color, search-bar-input-placeholder-color);
+    }
+
+    &::-webkit-search-cancel-button {
+      display: none;
+    }
+  }
+
+  &-prefix,
+  &-suffix,
+  &-clear {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+  }
+
+  &-prefix {
+    .use-var(margin-right, search-bar-prefix-margin-right);
+  }
+
+  &-clear {
+    .use-var(color, search-bar-clear-icon-color);
+  }
+
+  &-search-icon {
+    .use-var(color, search-bar-search-icon-color);
+    .use-var(font-size, search-bar-search-icon-font-size);
+  }
+
+  &-cancel-btn {
+    .use-var(margin-left, search-bar-cancel-btn-margin-left);
+    .use-var(color, search-bar-cancel-btn-color);
+    .use-var(font-size, search-bar-cancel-btn-font-size);
+  }
+
+  &-association {
+    position: absolute;
+    left: 0;
+    right: 0;
+    .use-var(background-color, search-bar-association-background-color);
+    top: 100%;
+    display: none;
+
+    &-visible {
+      display: block;
+    }
+
+    &-item {
+      .use-var(height, search-bar-association-item-height);
+      display: flex;
+      align-items: center;
+      position: relative;
+      .use-var(color, search-bar-association-item-color);
+      .use-var(padding, search-bar-association-item-padding);
+      .use-var(font-size, search-bar-association-item-font-size);
+      
+      &:not(:last-child) {
+        .onepx-border-var(bottom, line-color);
+      }
+
+      &-highlight {
+        .use-var(color, search-bar-association-item-highlight-color)
+      }
+    }
+  }
+}