@scaleflex/ui-tw 0.0.59 → 0.0.61

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { DatePickerProps } from './date-picker.types';
-declare function DatePicker({ minDate, maxDate, readOnly, defaultDate, size, invalidDateText, disabled, onChange, popoverClassName, defaultOpen, popoverContentProps, onKeyDown, onBlur, ...rest }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ minDate, maxDate, readOnly, defaultDate, size, invalidDateText, disabled, onChange, popoverClassName, defaultOpen, popoverContentProps, onKeyDown, onBlur, placeholder, format: dateFormat, locale, calendarProps, ...rest }: DatePickerProps): React.JSX.Element;
 export { DatePicker };

package/date-picker/date-picker.component.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["minDate", "maxDate", "readOnly", "defaultDate", "size", "invalidDateText", "disabled", "onChange", "popoverClassName", "defaultOpen", "popoverContentProps", "onKeyDown", "onBlur"];
+var _excluded = ["minDate", "maxDate", "readOnly", "defaultDate", "size", "invalidDateText", "disabled", "onChange", "popoverClassName", "defaultOpen", "popoverContentProps", "onKeyDown", "onBlur", "placeholder", "format", "locale", "calendarProps"];
 import { Button } from '@scaleflex/ui-tw/button';
 import { Calendar } from '@scaleflex/ui-tw/calendar';
 import { Input } from '@scaleflex/ui-tw/input';
@@ -12,10 +12,11 @@ import { getBaseSelectClassNames, selectReadOnlyClassNames } from '@scaleflex/ui
 import { getBaseInputClasses } from '@scaleflex/ui-tw/styles/shared-classes';
 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 React, { useRef, useState } from 'react';
 import { buttonSizeInTriggerOptions, iconSizeInTriggerOptions } from './date-picker.constants';
-import { parseDateString, toHtmlDateString } from './date-picker.utils';
 function DatePicker(_ref) {
   var minDate = _ref.minDate,
     maxDate = _ref.maxDate,
@@ -33,6 +34,12 @@ function DatePicker(_ref) {
     popoverContentProps = _ref.popoverContentProps,
     onKeyDown = _ref.onKeyDown,
     onBlur = _ref.onBlur,
+    placeholder = _ref.placeholder,
+    _ref$format = _ref.format,
+    dateFormat = _ref$format === void 0 ? 'dd/MM/yyyy' : _ref$format,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? enGB : _ref$locale,
+    calendarProps = _ref.calendarProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var inputRef = useRef(null);
   var isEscapeBlur = useRef(false);
@@ -40,7 +47,9 @@ function DatePicker(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
-  var _useState3 = useState(toHtmlDateString(defaultDate)),
+  var _useState3 = useState(defaultDate ? format(defaultDate, dateFormat, {
+      locale: locale
+    }) : ''),
     _useState4 = _slicedToArray(_useState3, 2),
     inputValue = _useState4[0],
     setInputValue = _useState4[1];
@@ -52,13 +61,17 @@ function DatePicker(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     calendarMonth = _useState8[0],
     setCalendarMonth = _useState8[1];
-  var parsedDate = inputValue && parseDateString(inputValue);
-  var isInputValid = !inputValue || !!parsedDate;
+  var parsedDate = inputValue ? parse(inputValue, dateFormat, new Date(), {
+    locale: locale
+  }) : undefined;
+  var isInputValid = !inputValue || parsedDate && isValid(parsedDate);
   var handleInputChange = function handleInputChange(e) {
     var value = e.target.value;
     setInputValue(value);
-    var parsed = parseDateString(value);
-    if (parsed) {
+    var parsed = parse(value, dateFormat, new Date(), {
+      locale: locale
+    });
+    if (isValid(parsed)) {
       setSelectedDate(parsed);
       setCalendarMonth(parsed);
     }
@@ -67,7 +80,9 @@ function DatePicker(_ref) {
     if (date) {
       var _inputRef$current;
       setSelectedDate(date);
-      setInputValue(toHtmlDateString(date));
+      setInputValue(format(date, dateFormat, {
+        locale: locale
+      }));
       setCalendarMonth(date);
       setOpen(false);
       onChange === null || onChange === void 0 || onChange(date);
@@ -108,7 +123,7 @@ function DatePicker(_ref) {
     inputMode: "numeric",
     autoComplete: "off",
     pattern: "\\d{2}/\\d{2}/\\d{4}",
-    placeholder: "dd/mm/yyyy",
+    placeholder: placeholder || dateFormat,
     value: inputValue,
     disabled: disabled,
     className: cn.apply(void 0, _toConsumableArray(getBaseSelectClassNames()).concat(_toConsumableArray(getBaseInputClasses()), ['hover:border-secondary-foreground/50', selectTriggerVariants({
@@ -143,7 +158,7 @@ function DatePicker(_ref) {
     align: "end",
     alignOffset: -8,
     sideOffset: 10
-  }, popoverContentProps), /*#__PURE__*/React.createElement(Calendar, {
+  }, popoverContentProps), /*#__PURE__*/React.createElement(Calendar, _extends({
     mode: "single",
     selected: selectedDate,
     captionLayout: "dropdown",
@@ -154,9 +169,10 @@ function DatePicker(_ref) {
       before: minDate
     }, maxDate && {
       after: maxDate
-    }].filter(Boolean)
-  })))), !isInputValid && /*#__PURE__*/React.createElement("span", {
+    }].filter(Boolean),
+    locale: locale
+  }, calendarProps))))), !isInputValid && /*#__PURE__*/React.createElement("span", {
     className: "px-1 text-xs text-red-500"
-  }, invalidDateText !== null && invalidDateText !== void 0 ? invalidDateText : 'Invalid date. Use dd/mm/yyyy'));
+  }, invalidDateText !== null && invalidDateText !== void 0 ? invalidDateText : "Invalid date. Use ".concat(placeholder || dateFormat)));
 }
 export { DatePicker };

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

@@ -1,3 +1,4 @@
+import { Locale } from 'date-fns';
 export declare const iconSizeInTriggerOptions: {
     sm: string;
     md: string;
@@ -8,3 +9,8 @@ export declare const buttonSizeInTriggerOptions: {
     md: string;
     lg: string;
 };
+export declare const SUPPORTED_DATE_LOCALES: Record<string, {
+    label: string;
+    locale: Locale;
+    format: string;
+}>;

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

@@ -1,4 +1,72 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 buttonSizeInTriggerOptions = _defineProperty(_defineProperty(_defineProperty({}, FormSize.Sm, 'icon-xs'), FormSize.Md, 'icon-sm'), FormSize.Lg, 'icon-md');
+export var SUPPORTED_DATE_LOCALES = {
+  en: {
+    label: 'English (US)',
+    locale: enUS,
+    format: 'MM/dd/yyyy'
+  },
+  enGB: {
+    label: 'English (UK)',
+    locale: enGB,
+    format: 'dd/MM/yyyy'
+  },
+  de: {
+    label: 'German',
+    locale: de,
+    format: 'dd.MM.yyyy'
+  },
+  es: {
+    label: 'Spanish',
+    locale: es,
+    format: 'dd/MM/yyyy'
+  },
+  fr: {
+    label: 'French',
+    locale: fr,
+    format: 'dd/MM/yyyy'
+  },
+  id: {
+    label: 'Indonesian',
+    locale: id,
+    format: 'dd/MM/yyyy'
+  },
+  it: {
+    label: 'Italian',
+    locale: it,
+    format: 'dd/MM/yyyy'
+  },
+  ja: {
+    label: 'Japanese',
+    locale: ja,
+    format: 'yyyy/MM/dd'
+  },
+  nl: {
+    label: 'Dutch',
+    locale: nl,
+    format: 'dd-MM-yyyy'
+  },
+  pl: {
+    label: 'Polish',
+    locale: pl,
+    format: 'dd.MM.yyyy'
+  },
+  pt: {
+    label: 'Portuguese',
+    locale: pt,
+    format: 'dd/MM/yyyy'
+  },
+  ro: {
+    label: 'Romanian',
+    locale: ro,
+    format: 'dd.MM.yyyy'
+  },
+  zh: {
+    label: 'Chinese',
+    locale: zhCN,
+    format: 'yyyy/MM/dd'
+  }
+};

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

@@ -1,6 +1,8 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { FormSizeType } from '@scaleflex/ui-tw/types/form-size';
+import type { Locale } from 'date-fns';
 import type { ComponentProps, FocusEvent, KeyboardEvent } from 'react';
+import { DayPicker } from 'react-day-picker';
 export type DatePickerProps = {
     minDate?: Date;
     maxDate?: Date;
@@ -15,4 +17,9 @@ export type DatePickerProps = {
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     popoverContentProps?: ComponentProps<typeof PopoverPrimitive.Content>;
+    calendarProps?: Omit<ComponentProps<typeof DayPicker>, 'selected' | 'onSelect' | 'month' | 'mode' | 'captionLayout' | 'onMonthChange' | 'disabled'>;
+    pattern?: string;
+    placeholder?: string;
+    format?: string;
+    locale?: Locale;
 };

package/date-picker/index.d.ts

@@ -1 +1,2 @@
 export { DatePicker } from './date-picker.component';
+export { SUPPORTED_DATE_LOCALES } from './date-picker.constants';

package/date-picker/index.js

@@ -1 +1,2 @@
-export { DatePicker } from './date-picker.component';
+export { DatePicker } from './date-picker.component';
+export { SUPPORTED_DATE_LOCALES } from './date-picker.constants';

package/input-tags/input-tags.component.js

@@ -139,7 +139,7 @@ export function InputTags(_ref) {
       return !disabled && setOpen(true);
     }
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: cn('flex w-full flex-wrap gap-2', inputTagsVariants({
+    className: cn('flex w-full flex-wrap gap-2 overflow-y-auto', inputTagsVariants({
       size: size
     }), 'min-h-auto')
   }, value.length === 0 ? /*#__PURE__*/React.createElement("span", {

package/package.json

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