@hi-ui/query-filter 5.0.0-canary.0

package/lib/esm/FilterDrawer/index.js

@@ -0,0 +1,125 @@
+/** @LICENSE
+ * @hi-ui/query-filter
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/query-filter#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __rest } from 'tslib';
+import React, { useState, useRef, useEffect } from 'react';
+import { useLocaleContext } from '@hi-ui/core';
+import { getPrefixCls } from '@hi-ui/classname';
+import Drawer from '@hi-ui/drawer';
+import { Button } from '@hi-ui/button';
+import { FilterForm, updateSelectedCacheData } from '../FilterForm/index.js';
+import { useFilterContext } from '../context.js';
+var prefixCls = getPrefixCls('query-filter-drawer');
+var FilterDrawer = function FilterDrawer(_a) {
+  var propsFilterFields = _a.filterFields,
+    propsFormData = _a.formData,
+    onChange = _a.onChange,
+    onPinChange = _a.onPinChange,
+    onSelect = _a.onSelect,
+    title = _a.title,
+    sureText = _a.sureText,
+    cancelText = _a.cancelText,
+    visibleProp = _a.visible,
+    pinTexts = _a.pinTexts,
+    onClose = _a.onClose,
+    customFieldProps = _a.customFieldProps,
+    restProps = __rest(_a, ["filterFields", "formData", "onChange", "onPinChange", "onSelect", "title", "sureText", "cancelText", "visible", "pinTexts", "onClose", "customFieldProps"]);
+  var _useState = useState(propsFormData),
+    formData = _useState[0],
+    setFormData = _useState[1];
+  var _useState2 = useState(visibleProp),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(propsFilterFields),
+    filterFields = _useState3[0],
+    setFilterFields = _useState3[1];
+  var i18n = useLocaleContext();
+  var _useFilterContext = useFilterContext(),
+    selectedCacheData = _useFilterContext.selectedCacheData,
+    setSelectedCacheData = _useFilterContext.setSelectedCacheData;
+  var originSelectedCacheData = useRef(selectedCacheData);
+  var newSelectedCacheData = useRef(selectedCacheData);
+  useEffect(function () {
+    originSelectedCacheData.current = new Map(selectedCacheData);
+  }, [selectedCacheData]);
+  useEffect(function () {
+    setFormData(propsFormData);
+  }, [propsFormData]);
+  useEffect(function () {
+    setVisible(visibleProp);
+  }, [visibleProp]);
+  useEffect(function () {
+    setFilterFields(propsFilterFields);
+  }, [propsFilterFields]);
+  var handleChange = function handleChange(val, allVals) {
+    setFormData(allVals);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(val, allVals, filterFields.find(function (item) {
+      return item.field === Object.keys(val)[0];
+    }));
+  };
+  var handleConfirm = function handleConfirm() {
+    setVisible(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    onChange === null || onChange === void 0 ? void 0 : onChange(formData, filterFields);
+    setSelectedCacheData(new Map(newSelectedCacheData.current));
+  };
+  var handlePinChange = function handlePinChange(field, visible) {
+    var newFields = filterFields.map(function (item) {
+      if (item.field === field) {
+        return Object.assign(Object.assign({}, item), {
+          visible: visible
+        });
+      }
+      return item;
+    });
+    setFilterFields(newFields);
+    onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(field, visible);
+  };
+  var handleReset = function handleReset() {
+    setFormData(propsFormData);
+    setFilterFields(propsFilterFields);
+    setSelectedCacheData(new Map(originSelectedCacheData.current));
+  };
+  var handleClose = function handleClose() {
+    setVisible(false);
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+    handleReset();
+  };
+  return /*#__PURE__*/React.createElement(Drawer, Object.assign({
+    className: prefixCls,
+    title: title,
+    footer: /*#__PURE__*/React.createElement("div", {
+      className: prefixCls + "-footer",
+      style: {
+        textAlign: 'right'
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      appearance: "line",
+      onClick: handleClose
+    }, cancelText || i18n.get('modal.cancelText')), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      onClick: handleConfirm
+    }, sureText || i18n.get('modal.confirmText'))),
+    visible: visible,
+    onClose: handleClose
+  }, restProps), /*#__PURE__*/React.createElement(FilterForm, {
+    placement: "vertical",
+    appearance: "line",
+    filterFields: filterFields,
+    formData: formData,
+    onChange: handleChange,
+    onPinChange: handlePinChange,
+    pinTexts: pinTexts,
+    onDataChange: function onDataChange(field, value, item, items) {
+      newSelectedCacheData.current = updateSelectedCacheData(originSelectedCacheData.current, field, value, item, items);
+    },
+    customFieldProps: customFieldProps
+  }));
+};
+export { FilterDrawer };

package/lib/esm/FilterForm/index.js

@@ -0,0 +1,173 @@
+/** @LICENSE
+ * @hi-ui/query-filter
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/query-filter#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useRef, useEffect } from 'react';
+import { useLocaleContext } from '@hi-ui/core';
+import { getPrefixCls } from '@hi-ui/classname';
+import Form from '@hi-ui/form';
+import Tooltip from '@hi-ui/tooltip';
+import Button from '@hi-ui/button';
+import { PinOutlined } from '@hi-ui/icons';
+import { useFilterContext } from '../context.js';
+var prefixCls = getPrefixCls('query-filter-form');
+var FilterForm = function FilterForm(_ref) {
+  var filterFields = _ref.filterFields,
+    formData = _ref.formData,
+    onChange = _ref.onChange,
+    onPinChange = _ref.onPinChange,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'horizontal' : _ref$placement,
+    _ref$showLabel = _ref.showLabel,
+    showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
+    _ref$showPin = _ref.showPin,
+    showPin = _ref$showPin === void 0 ? true : _ref$showPin,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'line' : _ref$appearance,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 8 : _ref$gap,
+    prepend = _ref.prepend,
+    append = _ref.append,
+    _ref$pinTexts = _ref.pinTexts,
+    pinTexts = _ref$pinTexts === void 0 ? {
+      pin: '',
+      unpin: ''
+    } : _ref$pinTexts,
+    onDataChange = _ref.onDataChange,
+    customFieldProps = _ref.customFieldProps;
+  var formRef = useRef(null);
+  useEffect(function () {
+    var _a;
+    (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.setFieldsValue(formData);
+  }, [formData]);
+  var prependList = prepend ? Array.isArray(prepend) ? prepend : [prepend] : [];
+  var appendList = append ? Array.isArray(append) ? append : [append] : [];
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefixCls + "-wrapper"
+  }, /*#__PURE__*/React.createElement(Form, {
+    className: "" + prefixCls,
+    innerRef: formRef,
+    initialValues: formData,
+    onValuesChange: onChange,
+    labelPlacement: "top",
+    placement: placement,
+    showValidateMessage: placement === 'vertical',
+    style: {
+      '--filter-form-gap': gap + "px"
+    }
+  }, prependList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      key: index
+    }, item);
+  }), filterFields.map(function (item) {
+    return /*#__PURE__*/React.createElement(FilterField, {
+      key: item.field,
+      item: item,
+      showLabel: showLabel,
+      showPin: showPin,
+      pinTexts: pinTexts,
+      appearance: appearance,
+      onPinChange: onPinChange,
+      onDataChange: onDataChange,
+      customFieldProps: customFieldProps
+    });
+  }), appendList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      key: index
+    }, item);
+  })));
+};
+var updateSelectedCacheData = function updateSelectedCacheData(selectedCacheData, field, value, item, items) {
+  var newSelectedCacheData = new Map(selectedCacheData);
+  if (!value || Array.isArray(value) && value.length === 0) {
+    newSelectedCacheData.set(field, []);
+  } else {
+    if (Array.isArray(value) && items) {
+      newSelectedCacheData.set(field, [].concat(items));
+    } else {
+      newSelectedCacheData.set(field, [item]);
+    }
+  }
+  return newSelectedCacheData;
+};
+var useCacheSelectedData = function useCacheSelectedData() {
+  var _useFilterContext = useFilterContext(),
+    selectedCacheData = _useFilterContext.selectedCacheData,
+    setSelectedCacheData = _useFilterContext.setSelectedCacheData;
+  var cacheSelectedData = function cacheSelectedData(field, value, item, items) {
+    var newSelectedCacheData = updateSelectedCacheData(selectedCacheData, field, value, item, items);
+    setSelectedCacheData(newSelectedCacheData);
+  };
+  return {
+    cacheSelectedData: cacheSelectedData
+  };
+};
+function FilterField(_ref2) {
+  var item = _ref2.item,
+    showLabel = _ref2.showLabel,
+    showPin = _ref2.showPin,
+    pinTexts = _ref2.pinTexts,
+    onPinChange = _ref2.onPinChange,
+    appearance = _ref2.appearance,
+    onDataChange = _ref2.onDataChange,
+    customFieldProps = _ref2.customFieldProps;
+  var field = item.field,
+    label = item.label,
+    component = item.component,
+    visible = item.visible;
+  var _useFilterContext2 = useFilterContext(),
+    selectedCacheData = _useFilterContext2.selectedCacheData;
+  var i18n = useLocaleContext();
+  var dataMemo = React.useMemo(function () {
+    var _a, _b;
+    var dataProp = (_a = component === null || component === void 0 ? void 0 : component.props) === null || _a === void 0 ? void 0 : _a.data;
+    // 去重后的数据
+    var data = dataProp === null || dataProp === void 0 ? void 0 : dataProp.filter(function (item) {
+      var _a;
+      return !((_a = selectedCacheData.get(field)) === null || _a === void 0 ? void 0 : _a.includes(item));
+    });
+    return ((_b = component === null || component === void 0 ? void 0 : component.props) === null || _b === void 0 ? void 0 : _b.dataSource) ? (selectedCacheData.get(field) || []).concat(data || []) : dataProp;
+  }, [selectedCacheData, field, component]);
+  return /*#__PURE__*/React.createElement("div", {
+    key: field,
+    className: prefixCls + "-item"
+  }, /*#__PURE__*/React.createElement(Form.Item, {
+    key: field,
+    field: field,
+    label: showLabel ? label : '',
+    className: prefixCls + "-item-form"
+  }, /*#__PURE__*/React.cloneElement(component, Object.assign(Object.assign(Object.assign({
+    // Todo：因为 Input 组件目前 appearance 没有 'contained' 类型，所以这里先特殊处理
+    appearance: appearance === 'contained' ? component.props.appearance || 'contained' : 'line'
+  }, appearance === 'contained' ? {
+    label: label
+  } : {}), {
+    data: dataMemo,
+    onChange: function onChange(value, item, items) {
+      var _a, _b;
+      (_b = (_a = component === null || component === void 0 ? void 0 : component.props) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value, item, items);
+      onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(field, value, item, items);
+    }
+  }), customFieldProps === null || customFieldProps === void 0 ? void 0 : customFieldProps(item)))), showPin && ( /*#__PURE__*/React.createElement(Tooltip, {
+    title: visible ? (pinTexts === null || pinTexts === void 0 ? void 0 : pinTexts.unpin) || i18n.get('queryFilter.unpin') : (pinTexts === null || pinTexts === void 0 ? void 0 : pinTexts.pin) || i18n.get('queryFilter.pin'),
+    placement: "left",
+    gutterGap: 9
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: prefixCls + "-item-pin-btn",
+    size: "sm",
+    type: visible ? 'primary' : 'default',
+    appearance: "text",
+    icon: /*#__PURE__*/React.createElement(PinOutlined, {
+      size: 16
+    }),
+    onClick: function onClick() {
+      return onPinChange === null || onPinChange === void 0 ? void 0 : onPinChange(field, !visible);
+    }
+  }))));
+}
+export { FilterForm, updateSelectedCacheData, useCacheSelectedData };

package/lib/esm/QueryFilter.js

@@ -0,0 +1,57 @@
+/** @LICENSE
+ * @hi-ui/query-filter
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/query-filter#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __rest } from 'tslib';
+import React, { forwardRef } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { useCacheSelectedData, FilterForm } from './FilterForm/index.js';
+var QUERY_FILTER_PREFIX = getPrefixCls('query-filter');
+/**
+ * 筛选表单
+ */
+var QueryFilter = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? QUERY_FILTER_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'query-filter' : _a$role,
+    className = _a.className,
+    filterFields = _a.filterFields,
+    formData = _a.formData,
+    onChange = _a.onChange,
+    rest = __rest(_a, ["prefixCls", "role", "className", "children", "filterFields", "formData", "onChange"]);
+  var cls = cx(prefixCls, className);
+  var _useCacheSelectedData = useCacheSelectedData(),
+    cacheSelectedData = _useCacheSelectedData.cacheSelectedData;
+  var handleChange = function handleChange(formData) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(formData);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    role: role,
+    className: cls
+  }, /*#__PURE__*/React.createElement(FilterForm, Object.assign({
+    placement: "horizontal",
+    showLabel: false,
+    showPin: false,
+    appearance: "contained",
+    filterFields: filterFields,
+    formData: formData,
+    onChange: function onChange(value, allValues) {
+      handleChange(allValues);
+    },
+    onDataChange: function onDataChange(field, value, item, items) {
+      cacheSelectedData(field, value, item, items);
+    }
+  }, rest)));
+});
+if (__DEV__) {
+  QueryFilter.displayName = 'QueryFilter';
+}
+export { QueryFilter };

package/lib/esm/QueryFilterProvider.js

@@ -0,0 +1,25 @@
+/** @LICENSE
+ * @hi-ui/query-filter
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/query-filter#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { FilterProvider } from './context.js';
+var QueryFilterProvider = function QueryFilterProvider(_ref) {
+  var children = _ref.children;
+  // 缓存选中的数据，方便在多个组件中共享数据，解决组件 dataSource 模式下选中数据回显问题
+  var _React$useState = React.useState(new Map()),
+    selectedCacheData = _React$useState[0],
+    setSelectedCacheData = _React$useState[1];
+  return /*#__PURE__*/React.createElement(FilterProvider, {
+    value: {
+      selectedCacheData: selectedCacheData,
+      setSelectedCacheData: setSelectedCacheData
+    }
+  }, children);
+};
+export { QueryFilterProvider };

package/lib/esm/SearchInput/index.js

@@ -0,0 +1,28 @@
+/** @LICENSE
+ * @hi-ui/query-filter
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/query-filter#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __rest } from 'tslib';
+import React from 'react';
+import { getPrefixCls } from '@hi-ui/classname';
+import { SearchOutlined } from '@hi-ui/icons';
+import Input from '@hi-ui/input';
+var prefixCls = getPrefixCls('query-filter-search-input');
+var SearchInput = function SearchInput(_a) {
+  var restProps = __rest(_a, []);
+  return /*#__PURE__*/React.createElement(Input, Object.assign({
+    className: prefixCls,
+    style: {
+      width: 200
+    },
+    clearable: true,
+    appearance: "filled",
+    prefix: /*#__PURE__*/React.createElement(SearchOutlined, null)
+  }, restProps));
+};
+export { SearchInput };

package/lib/esm/context.js

@@ -0,0 +1,21 @@
+/** @LICENSE
+ * @hi-ui/query-filter
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/query-filter#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useContext, createContext } from 'react';
+var FilterContext = /*#__PURE__*/createContext({
+  selectedCacheData: new Map(),
+  setSelectedCacheData: function setSelectedCacheData() {
+    console.log('setSelectedCacheData');
+  }
+});
+var FilterProvider = FilterContext.Provider;
+var useFilterContext = function useFilterContext() {
+  return useContext(FilterContext);
+};
+export { FilterContext, FilterProvider, useFilterContext };

package/lib/esm/index.js

@@ -0,0 +1,16 @@
+/** @LICENSE
+ * @hi-ui/query-filter
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/query-filter#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './styles/index.scss.js';
+export { QueryFilter, QueryFilter as default } from './QueryFilter.js';
+export { QueryFilterProvider } from './QueryFilterProvider.js';
+export { FilterForm, updateSelectedCacheData, useCacheSelectedData } from './FilterForm/index.js';
+export { FilterDrawer } from './FilterDrawer/index.js';
+export { SearchInput } from './SearchInput/index.js';
+export { FilterButton } from './FilterButton/index.js';

package/lib/esm/styles/index.scss.js

@@ -0,0 +1,13 @@
+/** @LICENSE
+ * @hi-ui/query-filter
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/query-filter#readme
+ *
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import __styleInject__ from '@hi-ui/style-inject';
+var css_248z = ".hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form {gap: var(--query-filter-form-gap, var(--hi-v5-spacing-4, 8px));}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-form {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;overflow: hidden;}.hi-v5-query-filter-form-wrapper .hi-v5-query-filter-form-item-pin-btn {-ms-flex-negative: 0;flex-shrink: 0;width: var(--hi-v5-height-8, 32px) !important;height: var(--hi-v5-height-8, 32px) !important;margin: var(--hi-v5-spacing-1, 2px) 0 0 var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-button-icon {font-size: var(--hi-v5-text-size-lg, 1rem);}.hi-v5-query-filter-button-text {-webkit-margin-start: var(--hi-v5-spacing-4, 8px);margin-inline-start: var(--hi-v5-spacing-4, 8px);}.hi-v5-query-filter-button.has-count .hi-v5-query-filter-button-text {color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count-wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 14px;height: 14px;border-radius: 9999px;color: #fff;background-color: var(--hi-v5-color-primary-600, var(--hi-v5-color-brandblue-600, #1843d2));}.hi-v5-query-filter-button-count {font-size: 20px;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transform-origin: center;transform-origin: center;}.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner],.hi-v5-query-filter-search-input[class*=\"--appearance-filled\"] [class*=__inner--focused] {background-color: var(--hi-v5-color-gray-50, #f2f4f7) !important;}";
+__styleInject__(css_248z);
+export { css_248z as default };

package/lib/types/FilterButton/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ButtonProps } from '@hi-ui/button';
+export declare const FilterButton: React.FC<FilterButtonProps>;
+export interface FilterButtonProps extends ButtonProps {
+    /**
+     * 筛选数量，当数量大于 9 时，宽度会自动调整为自适应
+     */
+    count?: number;
+    /**
+     * 按钮文本
+     */
+    children?: React.ReactNode;
+}

package/lib/types/FilterDrawer/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DrawerProps } from '@hi-ui/drawer';
+import { FilterFieldProps, FilterFormProps } from '../FilterForm';
+export declare const FilterDrawer: React.FC<Omit<FilterFormProps, 'onChange' | 'placement'> & {
+    onChange?: (formData: Record<string, unknown>, fields: FilterFieldProps[]) => void;
+    sureText?: React.ReactNode;
+    cancelText?: React.ReactNode;
+} & DrawerProps & {
+    onSelect?: (val: Record<string, unknown>, allVals: Record<string, unknown>, filterField?: FilterFieldProps) => void;
+}>;

package/lib/types/FilterForm/index.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactText } from 'react';
+import { FormProps } from '@hi-ui/form';
+export declare const FilterForm: React.FC<FilterFormProps>;
+export interface FilterFieldProps {
+    field: string;
+    label: React.ReactNode;
+    component: React.ReactElement;
+    options?: {
+        id: ReactText;
+        title: string;
+    }[];
+    visible?: boolean;
+}
+export interface FilterFormProps {
+    filterFields: FilterFieldProps[];
+    formData: Record<string, unknown>;
+    onChange?: FormProps['onValuesChange'];
+    onPinChange?: (field: string, visible: boolean) => void;
+    placement?: FormProps['placement'];
+    showLabel?: boolean;
+    showPin?: boolean;
+    appearance?: 'line' | 'contained';
+    gap?: number;
+    prepend?: React.ReactNode | React.ReactNode[];
+    append?: React.ReactNode | React.ReactNode[];
+    pinTexts?: {
+        pin: string;
+        unpin: string;
+    };
+    onDataChange?: (field: string, value: React.ReactText | React.ReactText[], item: unknown, items: unknown[]) => void;
+    customFieldProps?: (filterField: FilterFieldProps) => Record<string, unknown> | undefined;
+}
+export declare const updateSelectedCacheData: (selectedCacheData: Map<string, unknown[]>, field: string, value: React.ReactText | React.ReactText[], item: unknown, items: unknown[]) => Map<string, unknown[]>;
+export declare const useCacheSelectedData: () => {
+    cacheSelectedData: (field: string, value: React.ReactText | React.ReactText[], item: unknown, items: unknown[]) => void;
+};

package/lib/types/QueryFilter.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HiBaseHTMLProps } from '@hi-ui/core';
+import { FilterFormProps } from './FilterForm';
+/**
+ * 筛选表单
+ */
+export declare const QueryFilter: React.ForwardRefExoticComponent<QueryFilterProps & React.RefAttributes<HTMLDivElement | null>>;
+export interface QueryFilterProps extends HiBaseHTMLProps<'div'>, FilterFormProps {
+    onChange?: (formData: Record<string, unknown>) => void;
+}

package/lib/types/QueryFilterProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const QueryFilterProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/lib/types/SearchInput/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { InputProps } from '@hi-ui/input';
+export declare const SearchInput: React.FC<SearchInputProps>;
+export declare type SearchInputProps = InputProps;

package/lib/types/context.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const FilterContext: import("react").Context<{
+    selectedCacheData: Map<string, unknown[]>;
+    setSelectedCacheData: (data: Map<string, unknown[]>) => void;
+}>;
+export declare const FilterProvider: import("react").Provider<{
+    selectedCacheData: Map<string, unknown[]>;
+    setSelectedCacheData: (data: Map<string, unknown[]>) => void;
+}>;
+export declare const useFilterContext: () => {
+    selectedCacheData: Map<string, unknown[]>;
+    setSelectedCacheData: (data: Map<string, unknown[]>) => void;
+};

package/lib/types/index.d.ts

@@ -0,0 +1,8 @@
+import './styles/index.scss';
+export * from './QueryFilter';
+export { QueryFilter as default } from './QueryFilter';
+export * from './QueryFilterProvider';
+export * from './FilterForm';
+export * from './FilterDrawer';
+export * from './SearchInput';
+export * from './FilterButton';

package/lib/types/types.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface QueryFilterDataItem {
+    /**
+     * 节点唯一 id
+     */
+    id: React.ReactText;
+    /**
+     * 节点标题
+     */
+    title: React.ReactNode;
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@hi-ui/query-filter",
+  "version": "5.0.0-canary.0",
+  "description": "A sub-package for @hi-ui/hiui.",
+  "keywords": [],
+  "author": "HiUI <mi-hiui@xiaomi.com>",
+  "homepage": "https://github.com/XiaoMi/hiui/tree/master/packages/ui/query-filter#readme",
+  "license": "MIT",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "types": "lib/types/index.d.ts",
+  "typings": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./lib/cjs/index.js",
+      "default": "./lib/esm/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XiaoMi/hiui.git"
+  },
+  "scripts": {
+    "test": "jest",
+    "clean": "rimraf lib",
+    "prebuild": "yarn clean",
+    "build:esm": "hi-build ./src/index.ts --format esm -d ./lib/esm",
+    "build:cjs": "hi-build ./src/index.ts --format cjs -d ./lib/cjs",
+    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir lib/types",
+    "build": "concurrently yarn:build:*"
+  },
+  "bugs": {
+    "url": "https://github.com/XiaoMi/hiui/issues"
+  },
+  "dependencies": {
+    "@hi-ui/classname": "^4.0.0",
+    "@hi-ui/button": "^4.0.0",
+    "@hi-ui/drawer": "^4.0.0",
+    "@hi-ui/env": "^4.0.0",
+    "@hi-ui/form": "^4.0.0",
+    "@hi-ui/tooltip": "^4.0.0",
+    "@hi-ui/icons": "^5.0.0-canary.4",
+    "@hi-ui/input": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@hi-ui/core": ">=5.0.0-canary.4",
+    "react": ">=16.8.6",
+    "react-dom": ">=16.8.6"
+  },
+  "devDependencies": {
+    "@hi-ui/core": "^5.0.0-canary.4",
+    "@hi-ui/core-css": "^4.0.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  }
+}