@scaleflex/ui-tw 0.0.83 → 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/date-picker/date-picker.component.js

@@ -14,9 +14,9 @@ import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { cn } from '@scaleflex/ui-tw/utils/cn';
 import { format, isValid, parse } from 'date-fns';
 import { enGB } from 'date-fns/locale';
-import { CalendarIcon } from 'lucide-react';
+import { CalendarIcon, X as XIcon } from 'lucide-react';
 import React, { useRef, useState } from 'react';
-import { buttonSizeInTriggerOptions, iconSizeInTriggerOptions } from './date-picker.constants';
+import { buttonSizeInTriggerOptions, iconSizeInTriggerOptions, inputRightPaddingBySize } from './date-picker.constants';
 function DatePicker(_ref) {
   var minDate = _ref.minDate,
     maxDate = _ref.maxDate,
@@ -34,7 +34,8 @@ function DatePicker(_ref) {
     popoverContentProps = _ref.popoverContentProps,
     onKeyDown = _ref.onKeyDown,
     onBlur = _ref.onBlur,
-    placeholder = _ref.placeholder,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'DD/MM/YYYY' : _ref$placeholder,
     _ref$format = _ref.format,
     dateFormat = _ref$format === void 0 ? 'dd/MM/yyyy' : _ref$format,
     _ref$locale = _ref.locale,
@@ -73,7 +74,6 @@ function DatePicker(_ref) {
       locale: locale
     });
     if (isValid(parsed)) {
-      setSelectedDate(parsed);
       setCalendarMonth(parsed);
     }
   };
@@ -90,27 +90,63 @@ function DatePicker(_ref) {
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
     }
   };
+  var handleClear = function handleClear() {
+    setInputValue('');
+    setSelectedDate(undefined);
+    onChange === null || onChange === void 0 || onChange(undefined);
+    requestAnimationFrame(function () {
+      var _inputRef$current2;
+      return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
+    });
+  };
+  var commitTypedDate = function commitTypedDate() {
+    var raw = inputValue.trim();
+    if (!raw) {
+      if (selectedDate) {
+        setSelectedDate(undefined);
+        onChange === null || onChange === void 0 || onChange(undefined);
+      }
+      return;
+    }
+    var parsed = parse(raw, dateFormat, new Date(), {
+      locale: locale
+    });
+    if (!isValid(parsed)) return;
+    if (minDate && parsed < minDate) return;
+    if (maxDate && parsed > maxDate) return;
+    setSelectedDate(parsed);
+    setCalendarMonth(parsed);
+    setInputValue(format(parsed, dateFormat, {
+      locale: locale
+    }));
+    onChange === null || onChange === void 0 || onChange(parsed);
+  };
   var handleKeyDown = function handleKeyDown(event) {
     var allowed = '0123456789/';
     if (event.key.length === 1 && !allowed.includes(event.key)) {
       event.preventDefault();
     }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      commitTypedDate();
+    }
     if (event.key === 'Escape') {
-      var _inputRef$current2;
+      var _inputRef$current3;
       event.preventDefault();
       isEscapeBlur.current = true;
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
+      (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.blur();
     }
     onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
   };
   var handleBlur = function handleBlur(event) {
-    if (event.relatedTarget instanceof HTMLButtonElement && event.relatedTarget.id === 'date-picker') {
+    if (event.relatedTarget instanceof HTMLButtonElement && ['date-picker', 'clear-date'].includes(event.relatedTarget.id)) {
       return;
     }
     if (isEscapeBlur.current) {
       isEscapeBlur.current = false;
       return;
     }
+    commitTypedDate();
     onBlur === null || onBlur === void 0 || onBlur(event);
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -129,11 +165,26 @@ function DatePicker(_ref) {
     disabled: disabled,
     className: cn.apply(void 0, _toConsumableArray(getBaseSelectClassNames()).concat(_toConsumableArray(getBaseInputClasses()), ['hover:border-secondary-foreground/50', selectTriggerVariants({
       size: size
-    }), readOnly && selectReadOnlyClassNames, !isInputValid && 'border-destructive', className])),
+    }), inputRightPaddingBySize[size], readOnly && selectReadOnlyClassNames, !isInputValid && 'border-destructive', className])),
     onChange: handleInputChange,
     onKeyDown: handleKeyDown,
     onBlur: handleBlur
-  }, rest)), /*#__PURE__*/React.createElement(Popover, {
+  }, rest)), /*#__PURE__*/React.createElement("div", {
+    className: "pointer-events-none absolute top-1/2 right-2 flex -translate-y-1/2 items-center gap-1"
+  }, inputValue && !readOnly && !disabled && /*#__PURE__*/React.createElement(Button, {
+    id: "clear-date",
+    type: "button",
+    size: buttonSizeInTriggerOptions[size],
+    variant: "ghost-secondary",
+    className: "pointer-events-auto",
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    onClick: handleClear,
+    "aria-label": "Clear date"
+  }, /*#__PURE__*/React.createElement(XIcon, {
+    className: iconSizeInTriggerOptions[size]
+  })), /*#__PURE__*/React.createElement(Popover, {
     open: open,
     defaultOpen: defaultOpen,
     onOpenChange: setOpen
@@ -143,7 +194,7 @@ function DatePicker(_ref) {
     id: "date-picker",
     size: buttonSizeInTriggerOptions[size],
     variant: "ghost-secondary",
-    className: "absolute top-1/2 right-2 -translate-y-1/2",
+    className: "pointer-events-auto",
     onClick: function onClick() {
       return setOpen(function (prev) {
         return !prev;
@@ -172,7 +223,7 @@ function DatePicker(_ref) {
       after: maxDate
     }].filter(Boolean),
     locale: locale
-  }, calendarProps))))), !isInputValid && /*#__PURE__*/React.createElement("span", {
+  }, calendarProps)))))), !isInputValid && /*#__PURE__*/React.createElement("span", {
     className: "px-1 text-xs text-red-500"
   }, invalidDateText !== null && invalidDateText !== void 0 ? invalidDateText : "Invalid date. Use ".concat(placeholder || dateFormat)));
 }

package/date-picker/date-picker.constants.d.ts

@@ -9,6 +9,11 @@ export declare const buttonSizeInTriggerOptions: {
     md: string;
     lg: string;
 };
+export declare const inputRightPaddingBySize: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 export declare const SUPPORTED_DATE_LOCALES: Record<string, {
     label: string;
     locale: Locale;

package/date-picker/date-picker.constants.js

@@ -3,6 +3,7 @@ import { FormSize } from '@scaleflex/ui-tw/types/form-size';
 import { de, enGB, enUS, es, fr, id, it, ja, nl, pl, pt, ro, zhCN } from 'date-fns/locale';
 export var iconSizeInTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'size-3'), FormSize.Md, 'size-4'), FormSize.Lg, 'size-5');
 export var buttonSizeInTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'icon-xs'), FormSize.Md, 'icon-sm'), FormSize.Lg, 'icon-md');
+export var inputRightPaddingBySize = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'pr-16'), FormSize.Md, 'pr-16'), FormSize.Lg, 'pr-20');
 export var SUPPORTED_DATE_LOCALES = {
   en: {
     label: 'English (US)',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scaleflex/ui-tw",
-  "version": "0.0.83",
+  "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.83",
+    "@scaleflex/icons-tw": "^0.0.86",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",