@scaleflex/ui-tw 0.0.83 → 0.0.85

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.85",
   "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.85",
     "@tanstack/react-table": "^8.21.3",
     "@types/lodash.merge": "^4.6.9",
     "class-variance-authority": "^0.7.1",