@scaleflex/ui-tw 0.0.159 → 0.0.161

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/dialog/dialog.component.d.ts

@@ -1,6 +1,6 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import React, { type ComponentProps } from 'react';
-import type { DialogContentProps, DialogHeaderProps, DialogTitleProps } from './dialog.types';
+import type { DialogContentProps, DialogDescriptionProps, DialogHeaderProps, DialogTitleProps } from './dialog.types';
 declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
 declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
@@ -9,7 +9,7 @@ declare function DialogOverlay({ className, ...props }: ComponentProps<typeof Di
 declare function DialogContent({ className, children, overlayClassName, variant, headerSize, maxWidth, hideCloseButton, ...props }: DialogContentProps): React.JSX.Element;
 declare function DialogHeader({ className, size, ...props }: DialogHeaderProps): React.JSX.Element;
 declare function DialogTitle({ className, size, align, ...props }: DialogTitleProps): React.JSX.Element;
-declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element;
+declare function DialogDescription({ className, visuallyHidden, ...props }: DialogDescriptionProps): React.JSX.Element;
 declare function DialogBody({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
 declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;
 declare function DialogIcon({ className, ...props }: ComponentProps<'div'>): React.JSX.Element;

package/dialog/dialog.component.js

@@ -5,13 +5,14 @@ var _excluded = ["className"],
   _excluded2 = ["className", "children", "overlayClassName", "variant", "headerSize", "maxWidth", "hideCloseButton"],
   _excluded3 = ["className", "size"],
   _excluded4 = ["className", "size", "align"],
-  _excluded5 = ["className"],
+  _excluded5 = ["className", "visuallyHidden"],
   _excluded6 = ["className"],
   _excluded7 = ["className"],
   _excluded8 = ["className"],
   _excluded9 = ["className"],
   _excluded10 = ["className"];
 import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
 import { Button } from '@scaleflex/ui-tw/button';
 import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
@@ -160,9 +161,22 @@ function DialogTitle(_ref8) {
     }), className)
   }, props));
 }
+
+// Radix warns ("Missing `Description`...") when a Dialog has no description in the a11y tree.
+// `visuallyHidden` keeps the description for screen readers (silencing the warning) but hides it visually.
 function DialogDescription(_ref9) {
   var className = _ref9.className,
+    visuallyHidden = _ref9.visuallyHidden,
     props = _objectWithoutProperties(_ref9, _excluded5);
+  if (visuallyHidden) {
+    // `asChild` applies the hidden styles to the Description itself, so it stays the `aria-describedby` target without an extra wrapper.
+    return /*#__PURE__*/React.createElement(VisuallyHidden, {
+      asChild: true
+    }, /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
+      "data-slot": "dialog-description",
+      className: className
+    }, props)));
+  }
   return /*#__PURE__*/React.createElement(DialogPrimitive.Description, _extends({
     "data-slot": "dialog-description",
     className: cn('text-muted-foreground text-sm', className)

package/dialog/dialog.types.d.ts

@@ -20,6 +20,10 @@ export interface DialogTitleProps extends ComponentProps<typeof DialogPrimitive.
     size?: DialogHeaderSize;
     align?: DialogTitleAlign;
 }
+export interface DialogDescriptionProps extends ComponentProps<typeof DialogPrimitive.Description> {
+    /** Render the description in the a11y tree but hide it visually. Satisfies Radix's `aria-describedby` requirement without showing description text. */
+    visuallyHidden?: boolean;
+}
 /** @deprecated Use `DialogHeaderSize` instead */
 export type DialogSize = DialogHeaderSize;
 /** @deprecated Use `DialogTitleAlign` instead */

package/dialog/index.d.ts

@@ -1,3 +1,3 @@
 export { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogErrorIcon, DialogFooter, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DialogWarningIcon, DialogFormBody, DialogFormContent, DialogFormDescription, DialogFormErrorIcon, DialogFormFooter, DialogFormHeader, DialogFormIcon, DialogFormTitle, DialogFormWarningIcon, DialogWideBody, DialogWideContent, DialogWideFooter, DialogWideHeader, DialogWideTitle, } from './dialog.component';
 export { dialogCloseButtonPositionVariants, dialogContentWidthVariants, dialogHeaderDefaultVariants, dialogTitleDefaultVariants, dialogWideHeaderVariants, dialogWideTitleVariants, } from './dialog.constants';
-export type { DialogAlign, DialogContentProps, DialogContentWidth, DialogFormContentProps, DialogHeaderProps, DialogHeaderSize, DialogSize, DialogTitleAlign, DialogTitleProps, DialogVariant, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, } from './dialog.types';
+export type { DialogAlign, DialogContentProps, DialogContentWidth, DialogDescriptionProps, DialogFormContentProps, DialogHeaderProps, DialogHeaderSize, DialogSize, DialogTitleAlign, DialogTitleProps, DialogVariant, DialogWideContentProps, DialogWideHeaderProps, DialogWideTitleProps, } from './dialog.types';

package/package.json

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