@infonomic/uikit 1.0.0 → 1.0.2

package/dist/widgets/datepicker/datepicker.js

@@ -3,26 +3,32 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
 import { format } from "date-fns";
 import { Popover } from "radix-ui";
-import { useRef, useState } from "react";
-import { Button, IconButton } from "../../components/button/index.js";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../../components/button/button.js";
+import { IconButton } from "../../components/button/icon-button.js";
 import { Calendar } from "../../components/calendar/calendar.js";
 import { Input, InputAdornment } from "../../components/input/index.js";
 import { ScrollArea } from "../../components/scroll-area/scroll-area.js";
 import { CalendarIcon } from "../../icons/calendar-icon.js";
 import { CloseIcon } from "../../icons/close-icon.js";
 import datepicker_module from "./datepicker.module.js";
-function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, onClear = ()=>{}, onDateChange = ()=>{}, validatorFn, helpText, errorText, placeHolderText = 'Date', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
+function DatePicker({ id, name, label, required, initialValue, mode = 'datetime', yearsInFuture = 1, yearsInPast = 10, variant, intent, inputSize, inputClassName, inputWrapperClassName, containerClassName, onClear = ()=>{}, onDateChange = ()=>{}, validatorFn, helpText, errorText, placeHolderText = '', ariaLabelForSearch = 'date', ariaLabelForClear = 'clear', ...rest }) {
     const [isOpen, setIsOpen] = useState(false);
     const [time, setTime] = useState('08:00');
-    const [date, setDate] = useState(initialValue ?? new Date());
+    const [date, setDate] = useState(()=>{
+        if (initialValue) return initialValue;
+        if (null == initialValue && true === required) return new Date();
+        return null;
+    });
     const [month, setMonth] = useState(date);
     const calendarRef = useRef(null);
     const inputRef = useRef(null);
+    const hasInitialized = useRef(false);
     const handleClear = ()=>{
-        setDate(void 0);
         if ((null == inputRef ? void 0 : inputRef.current) != null) inputRef.current.value = '';
+        setDate(null);
+        onDateChange(null);
         onClear();
-        onDateChange(void 0);
     };
     const handleOnDateChange = (value)=>{
         if (null != onDateChange && 'function' == typeof onDateChange) onDateChange(value);
@@ -33,6 +39,12 @@ function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture =
             setIsOpen(true);
         }
     };
+    useEffect(()=>{
+        if (null == initialValue && null != date && true === required && false === hasInitialized.current) {
+            hasInitialized.current = true;
+            onDateChange(date);
+        }
+    });
     return /*#__PURE__*/ jsxs("div", {
         className: classnames(datepicker_module.container, containerClassName),
         children: [
@@ -44,7 +56,9 @@ function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture =
                 },
                 children: /*#__PURE__*/ jsx(Input, {
                     id: id,
+                    label: label,
                     readOnly: true,
+                    required: required,
                     name: name,
                     variant: variant,
                     intent: intent,
@@ -58,7 +72,7 @@ function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture =
                         e.stopPropagation();
                         setIsOpen(true);
                     },
-                    value: date ? `${format(date, 'PP HH:mm')}` : 'Pick a date',
+                    value: date ? `${format(date, 'PP HH:mm')}` : '',
                     placeHolder: placeHolderText,
                     helpText: helpText,
                     disabled: false,
@@ -130,8 +144,8 @@ function DatePicker({ id, name, initialValue, mode = 'datetime', yearsInFuture =
                                                 mode: "single",
                                                 required: true,
                                                 captionLayout: "dropdown",
-                                                selected: date,
-                                                month: month,
+                                                selected: date ?? void 0,
+                                                month: month ?? void 0,
                                                 onMonthChange: setMonth,
                                                 onSelect: (selectedDate)=>{
                                                     if (selectedDate) {

package/package.json

@@ -2,7 +2,8 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [
     "uikit",
@@ -22,7 +23,7 @@
   "module": "./dist/react.js",
   "main": "./dist/react.js",
   "files": [
-    "dist/",
+    "dist",
     "src/astro.js"
   ],
   "exports": {
@@ -30,6 +31,7 @@
     "./react": {
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js",
+      "main": "./dist/react.js",
       "default": "./dist/react.js"
     },
     "./styles.css": {
@@ -86,7 +88,11 @@
     "vitest": "^3.2.4"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "files": [
+      "dist/",
+      "src/astro.js"
+    ]
   },
   "scripts": {
     "dev": "run-p dev:*",