@nocobase/client-v2 2.1.0-beta.35 → 2.1.0-beta.37

package/src/components/form/PasswordInput.tsx

@@ -0,0 +1,211 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Input, type InputProps } from 'antd';
+import type { PasswordProps as AntdPasswordProps } from 'antd/es/input';
+import React from 'react';
+
+// --- Strength scoring -------------------------------------------------------
+// Pure scoring function ported from the v1 client's password utils. Returns a
+// bucketed score in `[20, 40, 60, 80, 100]` based on character-class diversity,
+// length, repeated / sequential / consecutive character penalties, and a
+// "middle non-letter / non-symbol" bonus. No external dependencies — safe to
+// run on any string.
+//
+// Kept private to this module on purpose. Callers consume the visual strength
+// bar via `<PasswordInput checkStrength>`; they shouldn't need to compute the
+// raw score themselves.
+
+const isNum = (c: number) => c >= 48 && c <= 57;
+const isLower = (c: number) => c >= 97 && c <= 122;
+const isUpper = (c: number) => c >= 65 && c <= 90;
+const isSymbol = (c: number) => !(isLower(c) || isUpper(c) || isNum(c));
+const isLetter = (c: number) => isLower(c) || isUpper(c);
+
+function getStrength(val: string): number {
+  if (!val) return 0;
+  let num = 0;
+  let lower = 0;
+  let upper = 0;
+  let symbol = 0;
+  let MNS = 0;
+  let rep = 0;
+  let repC = 0;
+  let consecutive = 0;
+  let sequential = 0;
+  const len = () => num + lower + upper + symbol;
+  const callMe = () => {
+    let re = num > 0 ? 1 : 0;
+    re += lower > 0 ? 1 : 0;
+    re += upper > 0 ? 1 : 0;
+    re += symbol > 0 ? 1 : 0;
+    return re > 2 && len() >= 8 ? re + 1 : 0;
+  };
+  for (let i = 0; i < val.length; i++) {
+    const c = val.charCodeAt(i);
+    if (isNum(c)) {
+      num++;
+      if (i !== 0 && i !== val.length - 1) MNS++;
+      if (i > 0 && isNum(val.charCodeAt(i - 1))) consecutive++;
+    } else if (isLower(c)) {
+      lower++;
+      if (i > 0 && isLower(val.charCodeAt(i - 1))) consecutive++;
+    } else if (isUpper(c)) {
+      upper++;
+      if (i > 0 && isUpper(val.charCodeAt(i - 1))) consecutive++;
+    } else {
+      symbol++;
+      if (i !== 0 && i !== val.length - 1) MNS++;
+    }
+    let exists = false;
+    for (let j = 0; j < val.length; j++) {
+      if (val[i] === val[j] && i !== j) {
+        exists = true;
+        repC += Math.abs(val.length / (j - i));
+      }
+    }
+    if (exists) {
+      rep++;
+      const unique = val.length - rep;
+      repC = unique ? Math.ceil(repC / unique) : Math.ceil(repC);
+    }
+    if (i > 1) {
+      const last1 = val.charCodeAt(i - 1);
+      const last2 = val.charCodeAt(i - 2);
+      if (isLetter(c)) {
+        if (isLetter(last1) && isLetter(last2)) {
+          const v = val.toLowerCase();
+          const vi = v.charCodeAt(i);
+          const vi1 = v.charCodeAt(i - 1);
+          const vi2 = v.charCodeAt(i - 2);
+          if (vi - vi1 === vi1 - vi2 && Math.abs(vi - vi1) === 1) sequential++;
+        }
+      } else if (isNum(c)) {
+        if (isNum(last1) && isNum(last2)) {
+          if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) sequential++;
+        }
+      } else if (isSymbol(last1) && isSymbol(last2)) {
+        if (c - last1 === last1 - last2 && Math.abs(c - last1) === 1) sequential++;
+      }
+    }
+  }
+  let sum = 0;
+  const length = len();
+  sum += 4 * length;
+  if (lower > 0) sum += 2 * (length - lower);
+  if (upper > 0) sum += 2 * (length - upper);
+  if (num !== length) sum += 4 * num;
+  sum += 6 * symbol;
+  sum += 2 * MNS;
+  sum += 2 * callMe();
+  if (length === lower + upper) sum -= length;
+  if (length === num) sum -= num;
+  sum -= repC;
+  sum -= 2 * consecutive;
+  sum -= 3 * sequential;
+  sum = Math.max(0, Math.min(100, sum));
+
+  if (sum >= 80) return 100;
+  if (sum >= 60) return 80;
+  if (sum >= 40) return 60;
+  if (sum >= 20) return 40;
+  return 20;
+}
+
+// --- Strength bar UI --------------------------------------------------------
+// Colours and pixel sizes are intentionally kept identical to v1's
+// `PasswordStrength` so the visual remains unchanged across the v1 → v2
+// migration. When the design system formalises tokens for "strength signal"
+// colours, swap these literals for the matching token expressions.
+
+const segmentDividerStyle: React.CSSProperties = {
+  position: 'absolute',
+  zIndex: 1,
+  height: 8,
+  top: 0,
+  background: '#fff',
+  width: 1,
+  transform: 'translate(-50%, 0)',
+};
+
+function StrengthBar({ score }: { score: number }) {
+  return (
+    <div
+      style={{
+        background: '#e0e0e0',
+        marginBottom: 3,
+        position: 'relative',
+      }}
+    >
+      {/* Four white dividers split the bar into five strength brackets that
+          line up with the bucketed scoring in `getStrength`. */}
+      <div style={{ ...segmentDividerStyle, left: '20%' }} />
+      <div style={{ ...segmentDividerStyle, left: '40%' }} />
+      <div style={{ ...segmentDividerStyle, left: '60%' }} />
+      <div style={{ ...segmentDividerStyle, left: '80%' }} />
+      {/* The full gradient is always laid down, then `clip-path` trims it back
+          to the current score percentage — gives a smooth fill animation on
+          value change without re-painting the gradient on every render. */}
+      <div
+        style={{
+          position: 'relative',
+          backgroundImage: '-webkit-linear-gradient(left, #ff5500, #ff9300)',
+          transition: 'all 0.35s ease-in-out',
+          height: 8,
+          width: '100%',
+          marginTop: 5,
+          clipPath: `polygon(0 0,${score}% 0,${score}% 100%,0 100%)`,
+        }}
+      />
+    </div>
+  );
+}
+
+// --- Public component -------------------------------------------------------
+
+export interface PasswordInputProps extends AntdPasswordProps {
+  /**
+   * Render a visual strength bar beneath the input. Defaults to `false`. The
+   * score is computed locally — opting in does NOT add any form validation;
+   * use a separate `Form.Item.rules` entry for that (or wire the entry up to
+   * a cross-plugin password-validator extension point if your project
+   * provides one).
+   */
+  checkStrength?: boolean;
+}
+
+/**
+ * `Input.Password` plus an optional strength meter, ported from the v1
+ * `Password` component. The strength scoring and bar UI are identical to v1,
+ * so users who switch from a v1 page to a v2 page see the same visual signal.
+ *
+ * The component is value-shape compatible with antd `Input.Password` — drop
+ * it into any existing `Form.Item<password>` and toggle the meter with
+ * `checkStrength`.
+ *
+ * Caveats:
+ *
+ * - Strength scoring is purely a UX hint, not validation. Submitting a weak
+ *   password is still allowed unless the server (or a separately installed
+ *   password-policy plugin) rejects it.
+ * - The meter swallows the gap between `<Input.Password>` and the next form
+ *   element. If your `Form.Item` already adds vertical rhythm, the meter
+ *   inherits it; no extra spacing is added.
+ */
+export function PasswordInput(props: PasswordInputProps) {
+  const { value, checkStrength, ...rest } = props;
+  return (
+    <span>
+      <Input.Password {...(rest as InputProps)} value={value} />
+      {checkStrength ? <StrengthBar score={getStrength(String(value || ''))} /> : null}
+    </span>
+  );
+}
+
+export default PasswordInput;

package/src/components/form/RemoteSelect.tsx

@@ -0,0 +1,137 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { useRequest } from 'ahooks';
+import { Select, type SelectProps } from 'antd';
+import React, { useMemo } from 'react';
+
+export interface RemoteSelectFieldNames {
+  label?: string;
+  value?: string;
+}
+
+export interface RemoteSelectProps<RawItem = any, Resp = RawItem[], V = any>
+  extends Omit<SelectProps<V>, 'options' | 'loading'> {
+  /**
+   * Fetch the option source. Receives no arguments; caller closes over the
+   * `ctx.api.resource(...)` (or any other source) it needs. May resolve
+   * with either an array of raw items (the common case) or an arbitrary
+   * envelope object — in the latter case, supply `selectItems` to pluck
+   * the array out.
+   */
+  request: () => Promise<Resp | undefined>;
+  /**
+   * When `request` returns an envelope (object with metadata around the
+   * list), use this to extract the array of items that drives the
+   * dropdown. Defaults to identity, i.e. `request` itself returns the
+   * array.
+   */
+  selectItems?: (response: Resp) => RawItem[] | undefined;
+  /**
+   * Names of the raw item properties that hold the display label and the
+   * persisted value. Defaults to `{ label: 'label', value: 'value' }`.
+   * Ignored when `mapOptions` is supplied.
+   */
+  fieldNames?: RemoteSelectFieldNames;
+  /**
+   * Full custom mapping from a raw item to an antd `OptionType`. When
+   * provided, overrides `fieldNames`.
+   */
+  mapOptions?: (item: RawItem, index: number) => { label: React.ReactNode; value: any };
+  /**
+   * Stable cache key for ahooks `useRequest` so the dropdown doesn't re-fetch
+   * on every re-mount. Pass a value tied to the request's effective inputs.
+   */
+  cacheKey?: string;
+  /**
+   * Re-run the request when any of these values changes. Forwarded to
+   * `useRequest`'s `refreshDeps`.
+   */
+  refreshDeps?: unknown[];
+  /**
+   * Skip the auto-fetch on mount when `false`. Defaults to `true`.
+   */
+  ready?: boolean;
+  /**
+   * Notified once the request resolves. Receives both the mapped item
+   * array and the raw response envelope — useful when callers need to
+   * read sibling metadata (counts, availability hints, etc.) without
+   * issuing a second request.
+   */
+  onLoaded?: (items: RawItem[], response: Resp) => void;
+}
+
+/**
+ * Generic settings-page Select bound to an async option source. The
+ * component itself stays framework-agnostic — it knows nothing about
+ * NocoBase resources, data sources, or Formily. Pass any async `request`
+ * that resolves with an array, and supply `fieldNames` (or `mapOptions`)
+ * to map raw items to antd option shape.
+ *
+ * Search is local-only (antd's default `optionFilterProp="label"`). For
+ * server-side search, drive `request` from external state and pass the
+ * search input via `refreshDeps`.
+ */
+export function RemoteSelect<RawItem = any, Resp = RawItem[], V = any>(props: RemoteSelectProps<RawItem, Resp, V>) {
+  const {
+    request,
+    selectItems,
+    fieldNames,
+    mapOptions,
+    cacheKey,
+    refreshDeps,
+    ready = true,
+    onLoaded,
+    showSearch = true,
+    allowClear = true,
+    ...selectProps
+  } = props;
+
+  const { data: response, loading } = useRequest<Resp | undefined, []>(request, {
+    cacheKey,
+    refreshDeps,
+    ready,
+    onSuccess: (resp) => {
+      if (resp === undefined) return;
+      const items = (selectItems ? selectItems(resp) : (resp as unknown as RawItem[])) || [];
+      onLoaded?.(items, resp);
+    },
+  });
+
+  const items = useMemo<RawItem[]>(() => {
+    if (response === undefined) return [];
+    return (selectItems ? selectItems(response) : (response as unknown as RawItem[])) || [];
+  }, [response, selectItems]);
+
+  const labelKey = fieldNames?.label ?? 'label';
+  const valueKey = fieldNames?.value ?? 'value';
+
+  const options = useMemo(() => {
+    if (mapOptions) {
+      return items.map((item, index) => mapOptions(item, index));
+    }
+    return items.map((item: any) => ({
+      label: item?.[labelKey],
+      value: item?.[valueKey],
+    }));
+  }, [items, mapOptions, labelKey, valueKey]);
+
+  return (
+    <Select
+      {...selectProps}
+      showSearch={showSearch}
+      allowClear={allowClear}
+      optionFilterProp="label"
+      loading={loading}
+      options={options}
+    />
+  );
+}
+
+export default RemoteSelect;

package/src/components/form/filter/CollectionFilter.tsx

@@ -0,0 +1,101 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { FilterOutlined } from '@ant-design/icons';
+import type { Collection } from '@nocobase/flow-engine';
+import { Button, type ButtonProps, Popover, type PopoverProps } from 'antd';
+import React, { FC, useState } from 'react';
+import { FilterContent } from '../../../flow/components/filter';
+import { CompiledFilter, FilterApplyAction, useFilterActionProps } from './useFilterActionProps';
+
+const identity = (s: string) => s;
+
+export interface CollectionFilterProps {
+  /** Collection whose fields drive the filter row's field picker. */
+  collection: Collection | undefined;
+  /** Called on Submit or Reset with the compiled NocoBase filter param (`undefined` when cleared). */
+  onChange: (filter: CompiledFilter) => void;
+  /** Translator. Defaults to identity. */
+  t?: (key: string, options?: Record<string, any>) => string;
+  /** Whitelist of root-level field names to expose. */
+  filterableFieldNames?: string[];
+  /** Bypass the `filterableFieldNames` whitelist. */
+  noIgnore?: boolean;
+  /** Override the trigger button's label. Defaults to `t('Filter')`, or the v1-style `t('{{count}} filter items', { count })` when conditions are present. */
+  buttonText?: React.ReactNode;
+  /** Swap the default `t('Filter')` label for v1's `t('{{count}} filter items', { count })` when conditions are present. Defaults to `true`. */
+  showCount?: boolean;
+  /** Pass-through props for the antd `<Popover>`. */
+  popoverProps?: Omit<PopoverProps, 'open' | 'onOpenChange' | 'content' | 'children'>;
+  /** Pass-through props for the trigger `<Button>`. */
+  buttonProps?: Omit<ButtonProps, 'icon' | 'type' | 'children' | 'onClick'>;
+  /** Min-width applied to the popover body. Defaults to `520`. */
+  popoverMinWidth?: number;
+}
+
+/**
+ * Filter button bound to a collection. Renders an antd `<Popover>` over a `<Button>`; the popover hosts a multi-condition filter form (field picker, operator, value). Submit dismisses the popover and emits the compiled filter via `onChange`; Reset keeps the popover open and emits `undefined`.
+ *
+ * Pair with `<ExtendCollectionsProvider>` when the target collection is client-only (e.g. a `schema-only` server collection that isn't auto-published to the v2 data source).
+ */
+export const CollectionFilter: FC<CollectionFilterProps> = (props) => {
+  const {
+    collection,
+    onChange,
+    t = identity,
+    filterableFieldNames,
+    noIgnore,
+    buttonText,
+    showCount = true,
+    popoverProps,
+    buttonProps,
+    popoverMinWidth = 520,
+  } = props;
+
+  const [open, setOpen] = useState(false);
+
+  const filterAction = useFilterActionProps({
+    collection,
+    filterableFieldNames,
+    noIgnore,
+    t,
+    onApply: (filter: CompiledFilter, action: FilterApplyAction) => {
+      onChange(filter);
+      if (action === 'submit') setOpen(false);
+    },
+  });
+
+  // Matches v1's `Filter.Action`: when at least one condition is set, the button label switches to the count-aware string (`"N 个筛选项"` in zh-CN). The button itself stays in the default (white) style — v1 never flipped it to `type='primary'`.
+  const label =
+    buttonText ??
+    (showCount && filterAction.conditionCount > 0
+      ? t('{{count}} filter items', { count: filterAction.conditionCount })
+      : t('Filter'));
+
+  return (
+    <Popover
+      trigger="click"
+      placement="bottomLeft"
+      {...popoverProps}
+      open={open}
+      onOpenChange={setOpen}
+      content={
+        <div style={{ minWidth: popoverMinWidth }}>
+          <FilterContent value={filterAction.value} ctx={filterAction.ctx} FilterItem={filterAction.FilterItem} />
+        </div>
+      }
+    >
+      <Button icon={<FilterOutlined />} disabled={!collection} {...buttonProps}>
+        {label}
+      </Button>
+    </Popover>
+  );
+};
+
+export default CollectionFilter;

package/src/components/form/filter/CollectionFilterItem.tsx

@@ -0,0 +1,176 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { css } from '@emotion/css';
+import { Collection, observer } from '@nocobase/flow-engine';
+import { Cascader, Select, Space } from 'antd';
+import React, { FC, useMemo } from 'react';
+import { FilterOption, useFilterOptions } from '../../../flow/components/filter/useFilterOptions';
+import { FilterValueInput } from './FilterValueInput';
+
+/**
+ * Lift the Cascader sub-menu height so a target collection with many fields (e.g. `users` → id / nickname / username / email / phone / password / createdAt / updatedAt / roles / createdBy / updatedBy) doesn't get truncated below the default antd menu viewport.
+ */
+const cascaderPopupClass = css`
+  .ant-cascader-menu {
+    height: fit-content;
+    max-height: 50vh;
+  }
+`;
+
+export interface CollectionFilterItemValue {
+  path: string;
+  operator: string;
+  /** Operator-dependent — string for default ops, descriptor for $date*, etc. */
+  value: any;
+}
+
+type CascaderOption = {
+  value: string;
+  label: string;
+  children?: CascaderOption[];
+};
+
+export interface CollectionFilterItemProps {
+  /** Reactive filter row managed by the parent `FilterContainer`. */
+  value: CollectionFilterItemValue;
+  /** Target collection whose fields populate the field selector. */
+  collection: Collection;
+  /** Whitelist of field names to expose; empty/undefined means all filterable fields. */
+  filterableFieldNames?: string[];
+  /** Bypass the `filterableFieldNames` whitelist (matches the legacy FilterItem `noIgnore`). */
+  noIgnore?: boolean;
+  /** Translator; defaults to identity so callers can omit it. */
+  t?: (key: string) => string;
+}
+
+const identity = (s: string) => s;
+
+/**
+ * Walk a tree of field options by name path, returning the leaf option (or undefined when the path doesn't resolve). Used to look up operators for the currently selected field.
+ */
+const findOptionByPath = (options: FilterOption[], path: string[]): FilterOption | undefined => {
+  if (!path.length) return undefined;
+  const [head, ...rest] = path;
+  const match = options.find((option) => option.name === head);
+  if (!match) return undefined;
+  if (!rest.length) return match;
+  return findOptionByPath(match.children || [], rest);
+};
+
+/**
+ * Convert the field-option tree (as produced by `useFilterOptions`) into antd `Cascader`'s expected `{ value, label, children }` shape. With `changeOnSelect={false}` (see the render below), antd already requires selection at a leaf — we don't need to mark association parents as `disabled`, and doing so would also block `expandTrigger="hover"` from descending into them.
+ */
+const toCascaderOptions = (options: FilterOption[]): CascaderOption[] =>
+  options.map((option) => {
+    const children = option.children?.length ? toCascaderOptions(option.children) : undefined;
+    return {
+      value: option.name,
+      label: option.title,
+      children,
+    };
+  });
+
+/**
+ * Filter row bound directly to a `Collection`, with no `FlowModel` dependency. Use this from settings pages or other surfaces that need a filter UI but don't have (and shouldn't synthesise) a block model just to satisfy `FilterItem`. Pair with `FilterContainer` via either an inline wrapper or `createCollectionFilterItem(collection)`.
+ *
+ * The field selector is an antd `Cascader`, mirroring v1's `Filter.Action` so association fields (belongsTo / m2o / etc.) can be drilled into — picking `user.username` is a first-class action. The value renderer is delegated to `FilterValueInput`, which dispatches to interface-specific controls (the smart date picker for `$date*` operators, tag-mode Select for array/enum, etc.) the same way v1's `DynamicComponent` did.
+ */
+export const CollectionFilterItem: FC<CollectionFilterItemProps> = observer(
+  (props) => {
+    const { collection, filterableFieldNames, noIgnore = false, t = identity } = props;
+    const { path: leftValue, operator, value: rightValue } = props.value;
+
+    const options = useFilterOptions(collection, { filterableFieldNames, noIgnore, t });
+
+    const cascaderOptions = useMemo(() => toCascaderOptions(options), [options]);
+
+    const fieldPath = useMemo(() => (leftValue ? leftValue.split('.') : []), [leftValue]);
+
+    const selectedField = useMemo(() => findOptionByPath(options, fieldPath), [options, fieldPath]);
+
+    const operatorOptions = useMemo(() => selectedField?.operators || [], [selectedField]);
+
+    const selectedOperator = useMemo(
+      () => operatorOptions.find((op) => op.value === operator),
+      [operatorOptions, operator],
+    );
+
+    const handleFieldChange = (next: (string | number)[]) => {
+      const path = next.map(String);
+      props.value.path = path.join('.');
+      const leaf = findOptionByPath(options, path);
+      props.value.operator = leaf?.operators?.[0]?.value || '';
+      // The value's shape is operator-dependent (e.g. string for `$eq`, `{ type, number, unit }` for `$dateInPast`); reset on every field change so stale shapes don't leak across interfaces.
+      props.value.value = undefined;
+    };
+    const handleOperatorChange = (next: string) => {
+      props.value.operator = next;
+      // Same rationale as above — switching from `$eq` (string) to `$dateOn` (date descriptor) makes the previous value structurally incompatible. v1 handled this by remounting the DynamicComponent on operator change; we explicitly clear.
+      props.value.value = undefined;
+    };
+    const handleValueChange = (next: any) => {
+      props.value.value = next;
+    };
+
+    // Widths mirror the long-standing `FilterItem` row (200 / 120) so a settings page mixing CollectionFilterItem and FilterContainer doesn't visually drift from existing block-bound filter rows.
+    return (
+      <Space wrap>
+        <Cascader
+          style={{ width: 200 }}
+          placeholder={t('Select field')}
+          options={cascaderOptions}
+          value={fieldPath}
+          onChange={handleFieldChange}
+          changeOnSelect={false}
+          expandTrigger="click"
+          popupClassName={cascaderPopupClass}
+        />
+        <Select
+          style={{ width: 120 }}
+          placeholder={t('Comparision')}
+          value={operator || undefined}
+          onChange={handleOperatorChange}
+          disabled={!leftValue || operatorOptions.length === 0}
+        >
+          {operatorOptions.map((op) => (
+            <Select.Option key={op.value} value={op.value}>
+              {op.label}
+            </Select.Option>
+          ))}
+        </Select>
+        <FilterValueInput
+          field={selectedField}
+          operator={selectedOperator}
+          value={rightValue}
+          onChange={handleValueChange}
+          placeholder={t('Enter value')}
+          t={t}
+        />
+      </Space>
+    );
+  },
+  { displayName: 'CollectionFilterItem' },
+);
+
+/**
+ * Convenience factory returning a `FilterContainer`-compatible `FilterItem` component bound to a specific collection. Avoids creating an inline closure on every parent render, which would otherwise reset any focused inner antd control.
+ */
+export function createCollectionFilterItem(
+  collection: Collection,
+  bound?: Pick<CollectionFilterItemProps, 'filterableFieldNames' | 'noIgnore' | 't'>,
+) {
+  const Component: FC<{ value: CollectionFilterItemValue }> = (props) => (
+    <CollectionFilterItem {...bound} value={props.value} collection={collection} />
+  );
+  Component.displayName = 'BoundCollectionFilterItem';
+  return Component;
+}
+
+export default CollectionFilterItem;