@hanwenbo/x-taro-ui 0.0.1

package/es/components/command/command.js

@@ -0,0 +1,657 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(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 t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Input, ScrollView, Text, View } from '@tarojs/components';
+import { designSystemLineHeights, designSystemSpacing, designSystemTypography, getFormControlTokens, useTokens } from "../../theme";
+import { usePressable } from "../../patterns";
+import { classNames } from "../../utils";
+import { useConfigProvider } from "../configProvider";
+import { useWindowDimensions } from "../dimensions";
+import { Icon } from "../icon";
+import "./style.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MOBILE_ROOT_REM_SCALE = 0.875;
+var scaleMobileMetric = function scaleMobileMetric(value) {
+  return value * MOBILE_ROOT_REM_SCALE;
+};
+var commandInputMetrics = {
+  mini: {
+    paddingY: scaleMobileMetric(designSystemSpacing['2']),
+    paddingX: scaleMobileMetric(designSystemSpacing['3']),
+    gap: scaleMobileMetric(designSystemSpacing['2'])
+  },
+  small: {
+    paddingY: scaleMobileMetric(designSystemSpacing['2.5']),
+    paddingX: scaleMobileMetric(designSystemSpacing['3.5']),
+    gap: scaleMobileMetric(designSystemSpacing['2'])
+  },
+  middle: {
+    paddingY: scaleMobileMetric(designSystemSpacing['3']),
+    paddingX: scaleMobileMetric(designSystemSpacing['4']),
+    gap: scaleMobileMetric(designSystemSpacing['3'])
+  },
+  large: {
+    paddingY: scaleMobileMetric(designSystemSpacing['4']),
+    paddingX: scaleMobileMetric(designSystemSpacing['5']),
+    gap: scaleMobileMetric(designSystemSpacing['3'])
+  }
+};
+var commandItemLineHeights = {
+  mini: designSystemLineHeights.caption,
+  small: designSystemLineHeights.label,
+  middle: designSystemLineHeights.label,
+  large: designSystemLineHeights.body
+};
+var commandPanelMetrics = {
+  mini: {
+    width: 360,
+    maxWidth: '90vw'
+  },
+  small: {
+    width: 400,
+    maxWidth: '92vw'
+  },
+  middle: {
+    width: 480,
+    maxWidth: '95vw'
+  },
+  large: {
+    width: 560,
+    maxWidth: '96vw'
+  }
+};
+var listPadding = scaleMobileMetric(designSystemSpacing['2']);
+var itemStackGap = scaleMobileMetric(designSystemSpacing['0.5']);
+var groupLabelPaddingY = scaleMobileMetric(designSystemSpacing['1.5']);
+var groupLabelPaddingX = scaleMobileMetric(designSystemSpacing['2']);
+var shortcutPaddingY = scaleMobileMetric(designSystemSpacing['0.5']);
+var shortcutPaddingX = scaleMobileMetric(designSystemSpacing['1.5']);
+var shortcutRadius = scaleMobileMetric(4);
+var emptyPaddingY = scaleMobileMetric(designSystemSpacing['8']);
+var emptyIconSize = scaleMobileMetric(designSystemSpacing['8']);
+var emptyIconGap = scaleMobileMetric(designSystemSpacing['2']);
+var emptyHintGap = scaleMobileMetric(designSystemSpacing['1']);
+var inputTextSize = designSystemTypography.sizes.sm;
+var inputLineHeight = 22;
+var supportingTextSize = designSystemTypography.sizes.xs;
+var supportingLineHeight = designSystemLineHeights.caption;
+function getCommandControlTokens(size) {
+  var control = getFormControlTokens(size);
+  return _objectSpread(_objectSpread({}, control), {}, {
+    height: scaleMobileMetric(control.height),
+    inlinePadding: scaleMobileMetric(control.inlinePadding),
+    gap: scaleMobileMetric(control.gap),
+    iconSize: scaleMobileMetric(control.iconSize),
+    lineHeight: commandItemLineHeights[size]
+  });
+}
+function nodeText(node) {
+  if (typeof node === 'string' || typeof node === 'number') return String(node);
+  if (Array.isArray(node)) return node.map(nodeText).join('');
+  if ( /*#__PURE__*/React.isValidElement(node)) {
+    return nodeText(node.props.children);
+  }
+  return '';
+}
+function renderNode(node, style) {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: style,
+      children: node
+    });
+  }
+  return node;
+}
+function itemId(item) {
+  var _item$id;
+  return (_item$id = item.id) !== null && _item$id !== void 0 ? _item$id : item.key;
+}
+function defaultMatch(item, query) {
+  var _item$keywords;
+  var needle = query.trim().toLowerCase();
+  if (!needle) return true;
+  return [nodeText(item.label), nodeText(item.description)].concat(_toConsumableArray((_item$keywords = item.keywords) !== null && _item$keywords !== void 0 ? _item$keywords : [])).filter(Boolean).some(function (value) {
+    return value.toLowerCase().includes(needle);
+  });
+}
+function applyFilter(filter, item, query) {
+  try {
+    var modernResult = filter(item, query);
+    if (typeof modernResult === 'boolean') return modernResult;
+    var legacyResult = filter(nodeText(item.label), query);
+    return legacyResult > 0;
+  } catch (_unused) {
+    return filter(nodeText(item.label), query) > 0;
+  }
+}
+var CommandItemRow = function CommandItemRow(_ref) {
+  var entry = _ref.entry,
+    active = _ref.active,
+    disabled = _ref.disabled,
+    size = _ref.size,
+    prefixCls = _ref.prefixCls,
+    showShortcuts = _ref.showShortcuts,
+    disablePointerSelection = _ref.disablePointerSelection,
+    onActivate = _ref.onActivate,
+    onSelect = _ref.onSelect;
+  var _useTokens = useTokens(),
+    colors = _useTokens.colors,
+    radius = _useTokens.radius;
+  var control = getCommandControlTokens(size);
+  var item = entry.item,
+    index = entry.index;
+  var label = nodeText(item.label) || itemId(item);
+  var pressable = usePressable({
+    disabled: disabled,
+    onPress: function onPress() {
+      return onSelect(entry);
+    },
+    scale: 1
+  });
+  var shortcutParts = Array.isArray(item.shortcut) ? item.shortcut.filter(function (part) {
+    return typeof part === 'string' || typeof part === 'number';
+  }) : null;
+  var hasShortcut = shortcutParts ? shortcutParts.length > 0 : Boolean(item.shortcut);
+  return /*#__PURE__*/_jsxs(View, _objectSpread(_objectSpread({
+    "data-slot": "command-item",
+    "data-selected": active ? 'true' : 'false',
+    "data-disabled": disabled ? 'true' : 'false',
+    role: "option",
+    ariaLabel: "".concat(label).concat(active ? '，已选中' : '').concat(disabled ? '，已禁用' : ''),
+    className: classNames("".concat(prefixCls, "-command__item"), "".concat(prefixCls, "-command__item--").concat(size), active && "".concat(prefixCls, "-command__item--selected"), disabled && "".concat(prefixCls, "-command__item--disabled")),
+    style: _objectSpread(_objectSpread({
+      boxSizing: 'border-box',
+      width: '100%',
+      height: control.height,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: control.gap,
+      paddingLeft: control.inlinePadding,
+      paddingRight: control.inlinePadding,
+      borderRadius: radius.lg,
+      backgroundColor: active || pressable.pressed ? colors.accent : 'transparent',
+      color: active ? colors['accent-foreground'] : colors.foreground,
+      opacity: disabled ? 0.5 : 1
+    }, pressable.style), {}, {
+      transition: "".concat(pressable.style.transition, ", background-color var(--x-duration-standard) var(--x-easing-standard), color var(--x-duration-standard) var(--x-easing-standard), opacity var(--x-duration-fast) var(--x-easing-standard)")
+    }),
+    onMouseEnter: function onMouseEnter() {
+      if (!disablePointerSelection && !disabled) onActivate(index);
+    }
+  }, pressable.handlers), {}, {
+    children: [item.icon ? /*#__PURE__*/_jsx(View, {
+      className: "".concat(prefixCls, "-command__item-icon"),
+      style: {
+        flexShrink: 0,
+        display: 'flex',
+        color: colors['muted-foreground']
+      },
+      children: item.icon
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: [renderNode(item.label, {
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        fontSize: control.textSize,
+        lineHeight: "".concat(control.lineHeight, "px"),
+        color: active ? colors['accent-foreground'] : colors.foreground
+      }), item.description !== undefined ? /*#__PURE__*/_jsx(View, {
+        children: renderNode(item.description, {
+          display: 'block',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          fontSize: supportingTextSize,
+          lineHeight: "".concat(supportingLineHeight, "px"),
+          color: colors['muted-foreground']
+        })
+      }) : null]
+    }), item.suffix ? /*#__PURE__*/_jsx(View, {
+      style: {
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center'
+      },
+      children: item.suffix
+    }) : null, showShortcuts && hasShortcut ? /*#__PURE__*/_jsx(View, {
+      className: "".concat(prefixCls, "-command__shortcut"),
+      style: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 2
+      },
+      children: shortcutParts ? shortcutParts.map(function (part, partIndex) {
+        return /*#__PURE__*/_jsx(Text, {
+          style: {
+            minWidth: 18,
+            padding: "".concat(shortcutPaddingY, "px ").concat(shortcutPaddingX, "px"),
+            boxSizing: 'border-box',
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: colors.border,
+            borderRadius: shortcutRadius,
+            backgroundColor: colors.background,
+            color: colors['muted-foreground'],
+            fontSize: 10,
+            lineHeight: "".concat(control.lineHeight, "px"),
+            textAlign: 'center'
+          },
+          children: part
+        }, "".concat(String(part), "-").concat(partIndex));
+      }) : renderNode(item.shortcut, {
+        padding: "".concat(shortcutPaddingY, "px ").concat(shortcutPaddingX, "px"),
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: colors.border,
+        borderRadius: shortcutRadius,
+        backgroundColor: colors.background,
+        color: colors['muted-foreground'],
+        fontSize: 10,
+        lineHeight: "".concat(control.lineHeight, "px")
+      })
+    }) : active && !hasShortcut ? /*#__PURE__*/_jsx(Icon, {
+      name: "CornerDownLeft",
+      size: scaleMobileMetric(getFormControlTokens('mini').iconSize),
+      color: colors['accent-foreground'],
+      block: true
+    }) : null]
+  }));
+};
+var Command = /*#__PURE__*/forwardRef(function (props, ref) {
+  var hasValueProp = Object.prototype.hasOwnProperty.call(props, 'value');
+  var hasQueryProp = Object.prototype.hasOwnProperty.call(props, 'query');
+  var hasSelectedKeyProp = Object.prototype.hasOwnProperty.call(props, 'selectedKey');
+  var _props$items = props.items,
+    items = _props$items === void 0 ? [] : _props$items,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? 'Search commands...' : _props$placeholder,
+    onSelect = props.onSelect,
+    onSearch = props.onSearch,
+    filter = props.filter,
+    _props$showShortcuts = props.showShortcuts,
+    showShortcuts = _props$showShortcuts === void 0 ? true : _props$showShortcuts,
+    _props$emptyText = props.emptyText,
+    emptyText = _props$emptyText === void 0 ? 'No results found' : _props$emptyText,
+    propSize = props.size,
+    _props$disabled = props.disabled,
+    propDisabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+    query = props.query,
+    value = props.value,
+    _props$defaultQuery = props.defaultQuery,
+    defaultQuery = _props$defaultQuery === void 0 ? '' : _props$defaultQuery,
+    defaultValue = props.defaultValue,
+    onQueryChange = props.onQueryChange,
+    onValueChange = props.onValueChange,
+    selectedKey = props.selectedKey,
+    defaultSelectedKey = props.defaultSelectedKey,
+    _props$maxResults = props.maxResults,
+    maxResults = _props$maxResults === void 0 ? Number.POSITIVE_INFINITY : _props$maxResults,
+    _props$showSearch = props.showSearch,
+    showSearch = _props$showSearch === void 0 ? true : _props$showSearch,
+    title = props.title,
+    description = props.description,
+    label = props.label,
+    _props$shouldFilter = props.shouldFilter,
+    shouldFilter = _props$shouldFilter === void 0 ? true : _props$shouldFilter,
+    _props$loop = props.loop,
+    loop = _props$loop === void 0 ? true : _props$loop,
+    _props$disablePointer = props.disablePointerSelection,
+    disablePointerSelection = _props$disablePointer === void 0 ? false : _props$disablePointer,
+    _props$vimBindings = props.vimBindings,
+    vimBindings = _props$vimBindings === void 0 ? false : _props$vimBindings,
+    children = props.children,
+    className = props.className,
+    style = props.style;
+  var config = useConfigProvider();
+  var _useTokens2 = useTokens(),
+    colors = _useTokens2.colors,
+    radius = _useTokens2.radius;
+  var _useWindowDimensions = useWindowDimensions(),
+    windowWidth = _useWindowDimensions.width;
+  var size = propSize !== null && propSize !== void 0 ? propSize : config.size;
+  var disabled = Boolean(propDisabled || config.disabled);
+  var control = getCommandControlTokens(size);
+  var inputMetrics = commandInputMetrics[size];
+  var _useState = useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : defaultQuery),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalQuery = _useState2[0],
+    setInternalQuery = _useState2[1];
+  var _useState3 = useState(defaultSelectedKey),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalSelectedKey = _useState4[0],
+    setInternalSelectedKey = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeIndex = _useState6[0],
+    setActiveIndex = _useState6[1];
+  var _useState7 = useState(autoFocus),
+    _useState8 = _slicedToArray(_useState7, 2),
+    focusRequested = _useState8[0],
+    setFocusRequested = _useState8[1];
+  var inputRef = useRef(null);
+  var isQueryControlled = hasValueProp || hasQueryProp;
+  var currentQuery = hasValueProp ? value !== null && value !== void 0 ? value : '' : hasQueryProp ? query !== null && query !== void 0 ? query : '' : internalQuery;
+  var updateQuery = useCallback(function (nextQuery) {
+    if (!isQueryControlled) setInternalQuery(nextQuery);
+    onQueryChange === null || onQueryChange === void 0 || onQueryChange(nextQuery);
+    onValueChange === null || onValueChange === void 0 || onValueChange(nextQuery);
+    onSearch === null || onSearch === void 0 || onSearch(nextQuery);
+  }, [isQueryControlled, onQueryChange, onSearch, onValueChange]);
+  var filteredItems = useMemo(function () {
+    var filtered = shouldFilter ? items.filter(function (item) {
+      return filter ? applyFilter(filter, item, currentQuery) : defaultMatch(item, currentQuery);
+    }) : items;
+    return filtered.slice(0, Math.max(0, maxResults));
+  }, [currentQuery, filter, items, maxResults, shouldFilter]);
+  var indexedGroups = useMemo(function () {
+    return filteredItems.reduce(function (groups, item, index) {
+      var _groups$group;
+      var group = item.group || 'General';
+      groups[group] = [].concat(_toConsumableArray((_groups$group = groups[group]) !== null && _groups$group !== void 0 ? _groups$group : []), [{
+        item: item,
+        index: index
+      }]);
+      return groups;
+    }, {});
+  }, [filteredItems]);
+  var currentSelectedKey = hasSelectedKeyProp ? selectedKey : internalSelectedKey;
+  var keyedIndex = currentSelectedKey ? filteredItems.findIndex(function (item) {
+    return itemId(item) === currentSelectedKey;
+  }) : -1;
+  var resolvedActiveIndex = keyedIndex >= 0 ? keyedIndex : filteredItems.length > 0 ? Math.min(activeIndex, filteredItems.length - 1) : -1;
+  useEffect(function () {
+    setActiveIndex(0);
+  }, [currentQuery]);
+  var commitSelection = useCallback(function (entry) {
+    var _entry$item$onSelect, _entry$item;
+    if (disabled || entry.item.disabled) return;
+    var id = itemId(entry.item);
+    setActiveIndex(entry.index);
+    if (!hasSelectedKeyProp) setInternalSelectedKey(id);
+    (_entry$item$onSelect = (_entry$item = entry.item).onSelect) === null || _entry$item$onSelect === void 0 || _entry$item$onSelect.call(_entry$item);
+    if (entry.item.id !== undefined) {
+      onSelect === null || onSelect === void 0 || onSelect(entry.item);
+    } else {
+      onSelect === null || onSelect === void 0 || onSelect(id, entry.item);
+    }
+  }, [disabled, hasSelectedKeyProp, onSelect]);
+  var moveActive = useCallback(function (direction) {
+    if (filteredItems.length === 0) return;
+    var start = resolvedActiveIndex < 0 ? 0 : resolvedActiveIndex;
+    var next = loop ? (start + direction + filteredItems.length) % filteredItems.length : Math.max(0, Math.min(filteredItems.length - 1, start + direction));
+    if (!hasSelectedKeyProp) setInternalSelectedKey(undefined);
+    setActiveIndex(next);
+  }, [filteredItems.length, hasSelectedKeyProp, loop, resolvedActiveIndex]);
+  var handleKeyDown = useCallback(function (event) {
+    var key = event.key;
+    if (key === 'ArrowDown' || vimBindings && key === 'j') {
+      var _event$preventDefault;
+      (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 || _event$preventDefault.call(event);
+      moveActive(1);
+    } else if (key === 'ArrowUp' || vimBindings && key === 'k') {
+      var _event$preventDefault2;
+      (_event$preventDefault2 = event.preventDefault) === null || _event$preventDefault2 === void 0 || _event$preventDefault2.call(event);
+      moveActive(-1);
+    } else if (key === 'Enter') {
+      var _event$preventDefault3;
+      (_event$preventDefault3 = event.preventDefault) === null || _event$preventDefault3 === void 0 || _event$preventDefault3.call(event);
+      var _item = filteredItems[resolvedActiveIndex];
+      if (_item) commitSelection({
+        item: _item,
+        index: resolvedActiveIndex
+      });
+    } else if (key === 'Escape') {
+      var _event$preventDefault4;
+      (_event$preventDefault4 = event.preventDefault) === null || _event$preventDefault4 === void 0 || _event$preventDefault4.call(event);
+      updateQuery('');
+    }
+  }, [commitSelection, filteredItems, moveActive, resolvedActiveIndex, updateQuery, vimBindings]);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var _inputRef$current, _inputRef$current$foc;
+        if (disabled) return;
+        setFocusRequested(true);
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current$foc = _inputRef$current.focus) === null || _inputRef$current$foc === void 0 || _inputRef$current$foc.call(_inputRef$current);
+      },
+      clear: function clear() {
+        return updateQuery('');
+      },
+      setQuery: updateQuery
+    };
+  }, [disabled, updateQuery]);
+  var panelMetrics = commandPanelMetrics[size];
+  var heading = label !== null && label !== void 0 ? label : title;
+  return /*#__PURE__*/_jsxs(View, {
+    "data-slot": "command",
+    "data-size": size,
+    role: "dialog",
+    ariaLabel: nodeText(heading) || 'Command',
+    className: classNames("".concat(config.prefixCls, "-command"), "".concat(config.prefixCls, "-command--").concat(size), disabled && "".concat(config.prefixCls, "-command--disabled"), className),
+    style: _objectSpread({
+      boxSizing: 'border-box',
+      width: panelMetrics.width,
+      maxWidth: panelMetrics.maxWidth,
+      display: 'flex',
+      flexDirection: 'column',
+      overflow: 'hidden',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: colors.border,
+      borderRadius: radius.xxl,
+      backgroundColor: colors.popover,
+      color: colors['popover-foreground'],
+      boxShadow: 'var(--x-shadow-xl)',
+      opacity: disabled ? 0.65 : 1
+    }, style),
+    onKeyDown: handleKeyDown,
+    children: [heading !== undefined || description !== undefined ? /*#__PURE__*/_jsxs(View, {
+      className: "".concat(config.prefixCls, "-command__heading"),
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+        padding: control.inlinePadding,
+        borderBottomWidth: showSearch ? 0 : 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: colors.border
+      },
+      children: [heading !== undefined ? renderNode(heading, {
+        color: colors.foreground,
+        fontSize: control.textSize,
+        fontWeight: 600
+      }) : null, description !== undefined ? renderNode(description, {
+        color: colors['muted-foreground'],
+        fontSize: Math.max(10, control.textSize - 2)
+      }) : null]
+    }) : null, showSearch ? /*#__PURE__*/_jsxs(View, {
+      "data-slot": "command-input",
+      className: "".concat(config.prefixCls, "-command__input"),
+      style: {
+        boxSizing: 'border-box',
+        padding: "".concat(inputMetrics.paddingY, "px ").concat(inputMetrics.paddingX, "px"),
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: inputMetrics.gap,
+        borderBottomWidth: 1,
+        borderBottomStyle: 'solid',
+        borderBottomColor: colors.border,
+        backgroundColor: 'transparent'
+      },
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "Search",
+        size: scaleMobileMetric(getFormControlTokens(size).iconSize),
+        color: colors['muted-foreground'],
+        block: true
+      }), /*#__PURE__*/_jsx(Input, {
+        ref: inputRef,
+        role: "searchbox",
+        ariaLabel: placeholder,
+        value: currentQuery,
+        placeholder: placeholder,
+        disabled: disabled,
+        focus: focusRequested,
+        confirmType: "search",
+        className: classNames("".concat(config.prefixCls, "-command__native-input"), 'x-command-native-input'),
+        style: {
+          flex: 1,
+          minWidth: 0,
+          height: inputLineHeight,
+          padding: 0,
+          margin: 0,
+          borderWidth: 0,
+          outline: 'none',
+          backgroundColor: 'transparent',
+          color: colors.foreground,
+          fontSize: inputTextSize,
+          lineHeight: "".concat(inputLineHeight, "px")
+        },
+        onInput: function onInput(event) {
+          return updateQuery(event.detail.value);
+        },
+        onFocus: function onFocus() {
+          return setFocusRequested(true);
+        },
+        onBlur: function onBlur() {
+          return setFocusRequested(false);
+        }
+      }), currentQuery ? /*#__PURE__*/_jsx(Text, {
+        className: "".concat(config.prefixCls, "-command__escape"),
+        style: {
+          display: windowWidth >= 640 ? 'block' : 'none',
+          padding: "".concat(shortcutPaddingY, "px ").concat(scaleMobileMetric(designSystemSpacing['1.5']), "px"),
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: colors.border,
+          borderRadius: shortcutRadius,
+          backgroundColor: colors.background,
+          color: colors['muted-foreground'],
+          fontSize: supportingTextSize,
+          lineHeight: "".concat(supportingLineHeight, "px")
+        },
+        children: "ESC"
+      }) : null]
+    }) : null, /*#__PURE__*/_jsx(ScrollView, {
+      scrollY: true,
+      role: "listbox",
+      className: "".concat(config.prefixCls, "-command__list"),
+      style: {
+        maxHeight: 300
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          padding: listPadding
+        },
+        children: filteredItems.length > 0 ? Object.entries(indexedGroups).map(function (_ref2) {
+          var _ref3 = _slicedToArray(_ref2, 2),
+            group = _ref3[0],
+            entries = _ref3[1];
+          return /*#__PURE__*/_jsxs(View, {
+            "data-slot": "command-group",
+            className: "".concat(config.prefixCls, "-command__group"),
+            children: [/*#__PURE__*/_jsx(Text, {
+              "data-slot": "command-group-label",
+              className: "".concat(config.prefixCls, "-command__group-label"),
+              style: {
+                display: 'block',
+                padding: "".concat(groupLabelPaddingY, "px ").concat(groupLabelPaddingX, "px"),
+                color: colors['muted-foreground'],
+                fontSize: 12,
+                lineHeight: "".concat(supportingLineHeight, "px"),
+                fontWeight: 500,
+                textTransform: 'uppercase',
+                letterSpacing: 0.6
+              },
+              children: group
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: itemStackGap
+              },
+              children: entries.map(function (entry) {
+                return /*#__PURE__*/_jsx(CommandItemRow, {
+                  entry: entry,
+                  active: entry.index === resolvedActiveIndex,
+                  disabled: disabled || Boolean(entry.item.disabled),
+                  size: size,
+                  prefixCls: config.prefixCls,
+                  showShortcuts: showShortcuts,
+                  disablePointerSelection: disablePointerSelection,
+                  onActivate: function onActivate(index) {
+                    if (!hasSelectedKeyProp) setInternalSelectedKey(undefined);
+                    setActiveIndex(index);
+                  },
+                  onSelect: commitSelection
+                }, "".concat(itemId(entry.item), "-").concat(entry.index));
+              })
+            })]
+          }, group);
+        }) : children ? children : /*#__PURE__*/_jsxs(View, {
+          "data-slot": "command-empty",
+          className: "".concat(config.prefixCls, "-command__empty"),
+          style: {
+            paddingTop: emptyPaddingY,
+            paddingBottom: emptyPaddingY,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            color: colors['muted-foreground']
+          },
+          children: [/*#__PURE__*/_jsx(Icon, {
+            name: "Search",
+            size: emptyIconSize,
+            color: colors['muted-foreground'],
+            block: true,
+            style: {
+              marginBottom: emptyIconGap,
+              opacity: 0.5
+            }
+          }), renderNode(emptyText, {
+            color: colors['muted-foreground'],
+            fontSize: inputTextSize,
+            lineHeight: "".concat(inputLineHeight, "px")
+          }), /*#__PURE__*/_jsx(Text, {
+            style: {
+              marginTop: emptyHintGap,
+              color: colors['muted-foreground'],
+              fontSize: supportingTextSize,
+              lineHeight: "".concat(supportingLineHeight, "px")
+            },
+            children: "Try a different search term"
+          })]
+        })
+      })
+    })]
+  });
+});
+Command.displayName = 'Command';
+export { Command };
+export default Command;

package/es/components/command/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { default as Command } from './command';
+export { default } from './command';
+//# sourceMappingURL=index.d.ts.map

package/es/components/command/index.js

@@ -0,0 +1,3 @@
+export * from "./types";
+export { default as Command } from "./command";
+export { default } from "./command";

package/es/components/command/style.css

@@ -0,0 +1,5 @@
+/* prettier-ignore */
+.x-command-native-input .weui-input {
+  height: 22PX;
+  line-height: 22PX;
+}