@scaleflex/ui-tw 0.0.160 → 0.0.162

package/combobox/combobox-users/combobox-users.component.js

@@ -173,7 +173,7 @@ export function ComboboxUsers(_ref) {
     align: "start"
   }, popoverContentProps), /*#__PURE__*/React.createElement(Command, {
     filter: function filter(value, search) {
-      return value.includes(search.trim().toLowerCase()) ? 1 : 0;
+      return value.toLowerCase().includes(search.trim().toLowerCase()) ? 1 : 0;
     }
   }, /*#__PURE__*/React.createElement(AutoScrollToSelected, null), /*#__PURE__*/React.createElement(CommandInput, {
     size: size,

package/command/command.component.d.ts

@@ -3,7 +3,7 @@ import { Dialog } from '@scaleflex/ui-tw/dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import React from 'react';
 import type { ComponentProps } from 'react';
-declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
+declare function Command({ className, filter, ...props }: ComponentProps<typeof CommandPrimitive>): React.JSX.Element;
 declare function CommandDialog({ title, description, children, ...props }: ComponentProps<typeof Dialog> & {
     title?: string;
     description?: string;

package/command/command.component.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className"],
+var _excluded = ["className", "filter"],
   _excluded2 = ["title", "description", "children"],
   _excluded3 = ["className", "size", "wrapperClassName"],
   _excluded4 = ["className", "onCleared", "cancelDebounce", "size"],
@@ -30,12 +30,14 @@ import { Command as CommandPrimitive, useCommandState } from 'cmdk';
 import { CheckIcon, SearchIcon, UserCircle2Icon, XIcon } from 'lucide-react';
 import React from 'react';
 import { useCallback } from 'react';
-import { selectCommandHeadingOptions } from './command.utils';
+import { commandPrefixFilter, selectCommandHeadingOptions } from './command.utils';
 function Command(_ref) {
   var className = _ref.className,
+    filter = _ref.filter,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(CommandPrimitive, _extends({
     "data-slot": "command",
+    filter: filter !== null && filter !== void 0 ? filter : commandPrefixFilter,
     className: cn('text-popover-foreground relative flex h-full w-full flex-col overflow-hidden', className)
   }, props));
 }

package/command/command.utils.d.ts

@@ -1,3 +1,4 @@
+export declare function commandPrefixFilter(value: string, search: string, keywords?: string[]): number;
 export declare const selectCommandHeadingOptions: {
     readonly sm: "[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:min-h-8 [&_[cmdk-group-heading]]:text-xs";
     readonly md: "[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-10 [&_[cmdk-group-heading]]:text-sm";

package/command/command.utils.js

@@ -1,3 +1,49 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
+
+/**
+ * Word-prefix filter for cmdk's `Command`.
+ *
+ * cmdk's default filter (`command-score`) is a fuzzy matcher: it keeps any item
+ * whose characters appear in the search order as a subsequence (e.g. typing
+ * "ride" also matches "rideaux", "gridded", ...). A plain substring match is
+ * still too loose — typing "me" would keep "Recent Documents" via "docuMEnts".
+ *
+ * Autocomplete should match the *beginning of a word*, so an item is kept when
+ * the whole value starts with the search term (ranked highest) or any word
+ * within it does (e.g. "ride" -> "rideaux", "doc" -> "Recent Documents").
+ */
+var WORD_BOUNDARY = /[\s\-_/.,]+/;
+export function commandPrefixFilter(value, search, keywords) {
+  var normalizedSearch = search.trim().toLowerCase();
+  if (!normalizedSearch) return 1;
+  var haystacks = [value].concat(_toConsumableArray(keywords !== null && keywords !== void 0 ? keywords : [])).map(function (item) {
+    return item.toLowerCase();
+  });
+  var score = 0;
+  var _iterator = _createForOfIteratorHelper(haystacks),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var haystack = _step.value;
+      // Whole value starts with the search term — best match.
+      if (haystack.startsWith(normalizedSearch)) return 1;
+      // A word within the value starts with the search term.
+      if (haystack.split(WORD_BOUNDARY).some(function (word) {
+        return word.startsWith(normalizedSearch);
+      })) {
+        score = 0.5;
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return score;
+}
 export var selectCommandHeadingOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, '[&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:min-h-8 [&_[cmdk-group-heading]]:text-xs'), FormSize.Md, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-10 [&_[cmdk-group-heading]]:text-sm'), FormSize.Lg, '[&_[cmdk-group-heading]]:py-3 [&_[cmdk-group-heading]]:px-4 [&_[cmdk-group-heading]]:min-h-12 [&_[cmdk-group-heading]]:text-base');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.160",
+  "version": "0.0.162",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -30,7 +30,7 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.6",
     "@radix-ui/react-visually-hidden": "^1.2.4",
-    "@scaleflex/icons-tw": "^0.0.160",
+    "@scaleflex/icons-tw": "^0.0.162",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",