@scaleflex/ui-tw 0.0.85 → 0.0.86

package/combobox/combobox.types.d.ts

@@ -47,6 +47,11 @@ export type ComboboxContentProps = {
     actions?: ReactNode[];
     fixedActions?: boolean;
 };
+export type CommandClearProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    size?: FormSizeType;
+    onCleared?: () => void;
+    cancelDebounce?: () => void;
+};
 export interface CommandInputProps extends Omit<ComponentProps<typeof CommandPrimitive.Input>, 'size'> {
     size?: FormSizeType;
     wrapperClassName?: string;

package/command/command.component.d.ts

@@ -1,4 +1,4 @@
-import type { CommandGroupProps, CommandInputProps, CommandItemProps } from '@scaleflex/ui-tw/combobox/combobox.types';
+import type { CommandClearProps, CommandGroupProps, CommandInputProps, CommandItemProps } from '@scaleflex/ui-tw/combobox/combobox.types';
 import { Dialog } from '@scaleflex/ui-tw/dialog';
 import { Command as CommandPrimitive } from 'cmdk';
 import React from 'react';
@@ -9,6 +9,7 @@ declare function CommandDialog({ title, description, children, ...props }: Compo
     description?: string;
 }): React.JSX.Element;
 declare function CommandInput({ className, size, wrapperClassName, ...props }: CommandInputProps): React.JSX.Element;
+declare function CommandClear({ className, onCleared, cancelDebounce, size, ...props }: CommandClearProps): React.JSX.Element | null;
 declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): React.JSX.Element;
 declare function CommandEmpty({ className, ...rest }: ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element;
 declare function CommandGroup({ className, size, ...props }: CommandGroupProps): React.JSX.Element;
@@ -16,4 +17,4 @@ declare function CommandSeparator({ className, ...props }: ComponentProps<typeof
 declare function CommandItem({ className, size, isGroup, icon, tooltip, children, selectedValue, multiple, value, shortcut, disabledTooltip, disabled, iconClassName, ...props }: CommandItemProps): React.JSX.Element;
 declare function CommandCheckboxItem({ className, size, isGroup, children, selectedValue, value, icon, disabled, tooltip, disabledTooltip, ...props }: CommandItemProps): React.JSX.Element;
 declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): React.JSX.Element;
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, };
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear, };

package/command/command.component.js

@@ -1,35 +1,43 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className"],
   _excluded2 = ["title", "description", "children"],
   _excluded3 = ["className", "size", "wrapperClassName"],
-  _excluded4 = ["className"],
+  _excluded4 = ["className", "onCleared", "cancelDebounce", "size"],
   _excluded5 = ["className"],
-  _excluded6 = ["className", "size"],
-  _excluded7 = ["className"],
-  _excluded8 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName"],
-  _excluded9 = ["className", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
-  _excluded10 = ["className"];
+  _excluded6 = ["className"],
+  _excluded7 = ["className", "size"],
+  _excluded8 = ["className"],
+  _excluded9 = ["className", "size", "isGroup", "icon", "tooltip", "children", "selectedValue", "multiple", "value", "shortcut", "disabledTooltip", "disabled", "iconClassName"],
+  _excluded10 = ["className", "size", "isGroup", "children", "selectedValue", "value", "icon", "disabled", "tooltip", "disabledTooltip"],
+  _excluded11 = ["className"];
+import { ButtonVariant, buttonVariants } from '@scaleflex/ui-tw/button';
+import { buttonBaseClassNames } from '@scaleflex/ui-tw/button/button.constants';
 import { Checkbox } from '@scaleflex/ui-tw/checkbox';
 import { Dialog, DialogFormDescription, DialogFormHeader, DialogFormTitle, DialogWideContent } from '@scaleflex/ui-tw/dialog';
 import { LabelIcon } from '@scaleflex/ui-tw/label/components/label-icon';
+import { crossSizeOptions } from '@scaleflex/ui-tw/search/search.constants';
 import { SelectIcon } from '@scaleflex/ui-tw/select/components/select-icon';
 import { selectItemVariants, selectTriggerVariants } from '@scaleflex/ui-tw/select/select.component';
 import { getOptionInGroupPaddingLeft } from '@scaleflex/ui-tw/select/select.utils';
+import { focusRingClassNames } from '@scaleflex/ui-tw/styles/shared-classes';
 import { switchThumbSizeOptions } from '@scaleflex/ui-tw/switch/switch.constants';
 import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { cva } from 'class-variance-authority';
 import { Command as CommandPrimitive } from 'cmdk';
-import { CheckIcon, SearchIcon } from 'lucide-react';
+import { useCommandState } from 'cmdk';
+import { CheckIcon, SearchIcon, XIcon } from 'lucide-react';
 import React from 'react';
+import { useCallback } from 'react';
 import { selectCommandHeadingOptions } from './command.utils';
 function Command(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(CommandPrimitive, _extends({
     "data-slot": "command",
-    className: cn('text-popover-foreground flex h-full w-full flex-col overflow-hidden', className)
+    className: cn('text-popover-foreground relative flex h-full w-full flex-col overflow-hidden', className)
   }, props));
 }
 function CommandDialog(_ref2) {
@@ -65,17 +73,73 @@ function CommandInput(_ref3) {
     className: cn('placeholder:text-muted-foreground flex w-full rounded-md bg-transparent py-3 outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className)
   }, props)));
 }
-function CommandList(_ref4) {
+function CommandClear(_ref4) {
   var className = _ref4.className,
+    onCleared = _ref4.onCleared,
+    cancelDebounce = _ref4.cancelDebounce,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? FormSize.Md : _ref4$size,
     props = _objectWithoutProperties(_ref4, _excluded4);
+  var search = useCommandState(function (s) {
+    return s.search;
+  });
+  var crossSize = crossSizeOptions[size];
+  var onClickClear = useCallback(function (e) {
+    e.preventDefault();
+    var root = e.currentTarget.closest('[cmdk-root]');
+    var input = root === null || root === void 0 ? void 0 : root.querySelector('[cmdk-input]');
+    if (input) {
+      var _Object$getOwnPropert;
+      var setter = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
+      setter === null || setter === void 0 || setter.call(input, '');
+      input.dispatchEvent(new Event('input', {
+        bubbles: true
+      }));
+      input.focus();
+    }
+    var list = root === null || root === void 0 ? void 0 : root.querySelector('[cmdk-list]');
+    if (list) {
+      requestAnimationFrame(function () {
+        list.scrollTop = 0;
+        input === null || input === void 0 || input.dispatchEvent(new KeyboardEvent('keydown', {
+          key: 'Home',
+          bubbles: true
+        }));
+      });
+    }
+    cancelDebounce === null || cancelDebounce === void 0 || cancelDebounce();
+    onCleared === null || onCleared === void 0 || onCleared();
+  }, [cancelDebounce, onCleared]);
+  if (!search) return null;
+  return /*#__PURE__*/React.createElement("button", _extends({
+    role: "button",
+    tabIndex: 0,
+    onPointerDown: function onPointerDown(e) {
+      return e.preventDefault();
+    },
+    onClick: onClickClear,
+    "data-clear-icon": "true",
+    "aria-label": "Clear search",
+    className: cn.apply(void 0, _toConsumableArray(buttonBaseClassNames).concat([focusRingClassNames, buttonVariants({
+      size: crossSize,
+      variant: ButtonVariant.GhostSecondary
+    }), 'absolute top-1/2 right-2 -translate-y-1/2', className]))
+  }, props), /*#__PURE__*/React.createElement(XIcon, {
+    "data-clear-icon": true,
+    className: cn('text-muted-foreground/70 hover:text-muted-foreground shrink-0')
+  }));
+}
+function CommandList(_ref5) {
+  var className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded5);
   return /*#__PURE__*/React.createElement(CommandPrimitive.List, _extends({
     "data-slot": "command-list",
     className: cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)
   }, props));
 }
-function CommandEmpty(_ref5) {
-  var className = _ref5.className,
-    rest = _objectWithoutProperties(_ref5, _excluded5);
+function CommandEmpty(_ref6) {
+  var className = _ref6.className,
+    rest = _objectWithoutProperties(_ref6, _excluded6);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Empty, _extends({
     "data-slot": "command-empty",
     className: cn('text-muted-foreground py-6 text-center text-sm', className)
@@ -89,10 +153,10 @@ var selectCommandHeadingVariants = cva('', {
     size: FormSize.Md
   }
 });
-function CommandGroup(_ref6) {
-  var className = _ref6.className,
-    size = _ref6.size,
-    props = _objectWithoutProperties(_ref6, _excluded6);
+function CommandGroup(_ref7) {
+  var className = _ref7.className,
+    size = _ref7.size,
+    props = _objectWithoutProperties(_ref7, _excluded7);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Group, _extends({
     "data-slot": "command-group",
     className: cn('[&_[cmdk-group-heading]]:text-secondary-foreground [&_[cmdk-group-heading]]:pointer-events-none', 'text-foreground overflow-hidden', selectCommandHeadingVariants({
@@ -100,29 +164,29 @@ function CommandGroup(_ref6) {
     }), className)
   }, props));
 }
-function CommandSeparator(_ref7) {
-  var className = _ref7.className,
-    props = _objectWithoutProperties(_ref7, _excluded7);
+function CommandSeparator(_ref8) {
+  var className = _ref8.className,
+    props = _objectWithoutProperties(_ref8, _excluded8);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Separator, _extends({
     "data-slot": "command-separator",
     className: cn('bg-border -mx-1 h-px', className)
   }, props));
 }
-function CommandItem(_ref8) {
-  var className = _ref8.className,
-    size = _ref8.size,
-    isGroup = _ref8.isGroup,
-    icon = _ref8.icon,
-    tooltip = _ref8.tooltip,
-    children = _ref8.children,
-    selectedValue = _ref8.selectedValue,
-    multiple = _ref8.multiple,
-    value = _ref8.value,
-    shortcut = _ref8.shortcut,
-    disabledTooltip = _ref8.disabledTooltip,
-    disabled = _ref8.disabled,
-    iconClassName = _ref8.iconClassName,
-    props = _objectWithoutProperties(_ref8, _excluded8);
+function CommandItem(_ref9) {
+  var className = _ref9.className,
+    size = _ref9.size,
+    isGroup = _ref9.isGroup,
+    icon = _ref9.icon,
+    tooltip = _ref9.tooltip,
+    children = _ref9.children,
+    selectedValue = _ref9.selectedValue,
+    multiple = _ref9.multiple,
+    value = _ref9.value,
+    shortcut = _ref9.shortcut,
+    disabledTooltip = _ref9.disabledTooltip,
+    disabled = _ref9.disabled,
+    iconClassName = _ref9.iconClassName,
+    props = _objectWithoutProperties(_ref9, _excluded9);
   var selected = value && (multiple ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : value === selectedValue);
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-item",
@@ -154,18 +218,18 @@ function CommandItem(_ref8) {
     className: cn('text-primary ml-auto h-4 w-4', selected ? 'opacity-100' : 'opacity-0')
   })));
 }
-function CommandCheckboxItem(_ref9) {
-  var className = _ref9.className,
-    size = _ref9.size,
-    isGroup = _ref9.isGroup,
-    children = _ref9.children,
-    selectedValue = _ref9.selectedValue,
-    value = _ref9.value,
-    icon = _ref9.icon,
-    disabled = _ref9.disabled,
-    tooltip = _ref9.tooltip,
-    disabledTooltip = _ref9.disabledTooltip,
-    props = _objectWithoutProperties(_ref9, _excluded9);
+function CommandCheckboxItem(_ref10) {
+  var className = _ref10.className,
+    size = _ref10.size,
+    isGroup = _ref10.isGroup,
+    children = _ref10.children,
+    selectedValue = _ref10.selectedValue,
+    value = _ref10.value,
+    icon = _ref10.icon,
+    disabled = _ref10.disabled,
+    tooltip = _ref10.tooltip,
+    disabledTooltip = _ref10.disabledTooltip,
+    props = _objectWithoutProperties(_ref10, _excluded10);
   var selected = value && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value));
   return /*#__PURE__*/React.createElement(CommandPrimitive.Item, _extends({
     "data-slot": "command-checkbox-item",
@@ -194,12 +258,12 @@ function CommandCheckboxItem(_ref9) {
     tooltip: disabled ? disabledTooltip : tooltip
   }))));
 }
-function CommandShortcut(_ref10) {
-  var className = _ref10.className,
-    props = _objectWithoutProperties(_ref10, _excluded10);
+function CommandShortcut(_ref11) {
+  var className = _ref11.className,
+    props = _objectWithoutProperties(_ref11, _excluded11);
   return /*#__PURE__*/React.createElement("span", _extends({
     "data-slot": "command-shortcut",
     className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className)
   }, props));
 }
-export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator };
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandCheckboxItem, CommandShortcut, CommandSeparator, CommandClear };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.85",
+  "version": "0.0.86",
   "author": "scaleflex",
   "repository": "github:scaleflex/ui",
   "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
@@ -23,7 +23,7 @@
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-tooltip": "^1.2.6",
-    "@scaleflex/icons-tw": "^0.0.85",
+    "@scaleflex/icons-tw": "^0.0.86",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",