@tecsinapse/cortex-react 1.9.25 → 1.9.27

package/dist/cjs/components/DatePicker/DateField.js

@@ -6,6 +6,9 @@ var reactAria = require('react-aria');
 var reactStately = require('react-stately');
 var DateSegment = require('./DateSegment.js');
 
+const formatLiteralSegment = (text) => {
+  return text.includes(",") ? text.replace(/,/g, " ") : text;
+};
 const DateField = ({
   onClickDate,
   onClickTime,
@@ -23,11 +26,18 @@ const DateField = ({
     state,
     ref
   );
-  const handleOnClickSegment = React.useCallback((segment) => {
-    if (!segment.isEditable || state.isDisabled) return;
-    if (["hour", "minute", "second"].includes(segment.type)) onClickTime?.();
-    if (["year", "month", "day"].includes(segment.type)) onClickDate?.();
-  }, []);
+  const handleOnClickSegment = React.useCallback(
+    (segment) => {
+      if (!segment.isEditable || state.isDisabled) return;
+      if (["hour", "minute", "second"].includes(segment.type)) {
+        onClickTime?.();
+      }
+      if (["year", "month", "day"].includes(segment.type)) {
+        onClickDate?.();
+      }
+    },
+    [onClickDate, onClickTime, state.isDisabled]
+  );
   return /* @__PURE__ */ React.createElement(
     "div",
     {
@@ -36,16 +46,13 @@ const DateField = ({
       className: "flex flex-row",
       "data-testid": "date-field-div"
     },
-    state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: i,
-        onClick: () => {
-          handleOnClickSegment(segment);
-        }
-      },
-      /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { segment, state })
-    ))
+    state.segments.map((segment, i) => {
+      if (segment.type === "literal") {
+        const text = formatLiteralSegment(segment.text);
+        return /* @__PURE__ */ React.createElement("span", { key: i, style: { whiteSpace: "pre" } }, text);
+      }
+      return /* @__PURE__ */ React.createElement("div", { key: i, onClick: () => handleOnClickSegment(segment) }, /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { segment, state }));
+    })
   );
 };
 

package/dist/cjs/components/Select/Trigger.js

@@ -5,6 +5,7 @@ var React = require('react');
 var io5 = require('react-icons/io5');
 var index = require('../Popover/index.js');
 var context = require('./context.js');
+var clsx = require('clsx');
 
 const { button } = cortexCore.selectVariants();
 const SelectTrigger = ({
@@ -23,7 +24,8 @@ const SelectTrigger = ({
     return labelExtractor(value);
   }, [label, value]);
   const { className } = rest;
-  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled }, /* @__PURE__ */ React.createElement(
+  const hasValue = Array.isArray(value) ? value.length > 0 : !!value;
+  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled }, /* @__PURE__ */ React.createElement("div", { className: "w-full gap-mili" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: button({ className }),
@@ -31,9 +33,27 @@ const SelectTrigger = ({
       role: "button",
       ...rest
     },
-    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, _placeholder),
+    /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: clsx({ "mt-mili": hasValue && label }),
+        "data-testid": "select-placeholder"
+      },
+      _placeholder
+    ),
     /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
-  ));
+  ), hasValue && label ? /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      htmlFor: "select-trigger",
+      className: clsx(
+        "ml-centi",
+        cortexCore.labelStyle({ intent: "default", placeholder })
+      ),
+      "data-testid": "input-label"
+    },
+    label
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
 };
 
 exports.SelectTrigger = SelectTrigger;

package/dist/cjs/hooks/useFileUpload.js

@@ -9,7 +9,8 @@ const useFileUpload = ({
   accept = {},
   onAccept,
   maxSize,
-  allowMultiple = true
+  allowMultiple = true,
+  onFileRejected
 }) => {
   const [files, setFiles] = React.useState([]);
   const [isOpen, setIsOpen] = React.useState(false);
@@ -63,11 +64,15 @@ const useFileUpload = ({
     onDrop,
     accept: mappedAccept,
     multiple: allowMultiple,
-    maxSize
+    maxSize,
+    onDropRejected: onFileRejected
   });
   const handleRemoveFile = React.useCallback((index) => {
     setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
   }, []);
+  const handleClearFiles = React.useCallback(() => {
+    setFiles([]);
+  }, []);
   const isFileLimitReached = !allowMultiple && files.length > 0;
   return {
     onOpen,
@@ -80,7 +85,8 @@ const useFileUpload = ({
       isFileLimitReached
     },
     open: isOpen,
-    files
+    files,
+    handleClearFiles
   };
 };
 

package/dist/esm/components/DatePicker/DateField.js

@@ -4,6 +4,9 @@ import { useLocale, useDateField } from 'react-aria';
 import { useDateFieldState } from 'react-stately';
 import { DateSegment } from './DateSegment.js';
 
+const formatLiteralSegment = (text) => {
+  return text.includes(",") ? text.replace(/,/g, " ") : text;
+};
 const DateField = ({
   onClickDate,
   onClickTime,
@@ -21,11 +24,18 @@ const DateField = ({
     state,
     ref
   );
-  const handleOnClickSegment = useCallback((segment) => {
-    if (!segment.isEditable || state.isDisabled) return;
-    if (["hour", "minute", "second"].includes(segment.type)) onClickTime?.();
-    if (["year", "month", "day"].includes(segment.type)) onClickDate?.();
-  }, []);
+  const handleOnClickSegment = useCallback(
+    (segment) => {
+      if (!segment.isEditable || state.isDisabled) return;
+      if (["hour", "minute", "second"].includes(segment.type)) {
+        onClickTime?.();
+      }
+      if (["year", "month", "day"].includes(segment.type)) {
+        onClickDate?.();
+      }
+    },
+    [onClickDate, onClickTime, state.isDisabled]
+  );
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
@@ -34,16 +44,13 @@ const DateField = ({
       className: "flex flex-row",
       "data-testid": "date-field-div"
     },
-    state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        key: i,
-        onClick: () => {
-          handleOnClickSegment(segment);
-        }
-      },
-      /* @__PURE__ */ React__default.createElement(DateSegment, { segment, state })
-    ))
+    state.segments.map((segment, i) => {
+      if (segment.type === "literal") {
+        const text = formatLiteralSegment(segment.text);
+        return /* @__PURE__ */ React__default.createElement("span", { key: i, style: { whiteSpace: "pre" } }, text);
+      }
+      return /* @__PURE__ */ React__default.createElement("div", { key: i, onClick: () => handleOnClickSegment(segment) }, /* @__PURE__ */ React__default.createElement(DateSegment, { segment, state }));
+    })
   );
 };
 

package/dist/esm/components/Select/Trigger.js

@@ -1,8 +1,9 @@
-import { selectVariants } from '@tecsinapse/cortex-core';
+import { selectVariants, labelStyle } from '@tecsinapse/cortex-core';
 import React__default, { useContext, useMemo } from 'react';
 import { IoChevronDownOutline } from 'react-icons/io5';
 import { Popover } from '../Popover/index.js';
 import { SelectContext } from './context.js';
+import clsx from 'clsx';
 
 const { button } = selectVariants();
 const SelectTrigger = ({
@@ -21,7 +22,8 @@ const SelectTrigger = ({
     return labelExtractor(value);
   }, [label, value]);
   const { className } = rest;
-  return /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled }, /* @__PURE__ */ React__default.createElement(
+  const hasValue = Array.isArray(value) ? value.length > 0 : !!value;
+  return /* @__PURE__ */ React__default.createElement(Popover.Trigger, { disabled }, /* @__PURE__ */ React__default.createElement("div", { className: "w-full gap-mili" }, /* @__PURE__ */ React__default.createElement(
     "button",
     {
       className: button({ className }),
@@ -29,9 +31,27 @@ const SelectTrigger = ({
       role: "button",
       ...rest
     },
-    /* @__PURE__ */ React__default.createElement("span", { "data-testid": "select-placeholder" }, _placeholder),
+    /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: clsx({ "mt-mili": hasValue && label }),
+        "data-testid": "select-placeholder"
+      },
+      _placeholder
+    ),
     /* @__PURE__ */ React__default.createElement(IoChevronDownOutline, null)
-  ));
+  ), hasValue && label ? /* @__PURE__ */ React__default.createElement(
+    "label",
+    {
+      htmlFor: "select-trigger",
+      className: clsx(
+        "ml-centi",
+        labelStyle({ intent: "default", placeholder })
+      ),
+      "data-testid": "input-label"
+    },
+    label
+  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)));
 };
 
 export { SelectTrigger };

package/dist/esm/hooks/useFileUpload.js

@@ -7,7 +7,8 @@ const useFileUpload = ({
   accept = {},
   onAccept,
   maxSize,
-  allowMultiple = true
+  allowMultiple = true,
+  onFileRejected
 }) => {
   const [files, setFiles] = useState([]);
   const [isOpen, setIsOpen] = useState(false);
@@ -61,11 +62,15 @@ const useFileUpload = ({
     onDrop,
     accept: mappedAccept,
     multiple: allowMultiple,
-    maxSize
+    maxSize,
+    onDropRejected: onFileRejected
   });
   const handleRemoveFile = useCallback((index) => {
     setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
   }, []);
+  const handleClearFiles = useCallback(() => {
+    setFiles([]);
+  }, []);
   const isFileLimitReached = !allowMultiple && files.length > 0;
   return {
     onOpen,
@@ -78,7 +83,8 @@ const useFileUpload = ({
       isFileLimitReached
     },
     open: isOpen,
-    files
+    files,
+    handleClearFiles
   };
 };
 

package/dist/types/hooks/useFileUpload.d.ts

@@ -1,3 +1,4 @@
+import { FileRejection } from 'react-dropzone';
 import { UseDropzoneProps, AcceptSpecificMap, type FileUpload } from '../components/Uploader/types';
 interface UseFileUploadOptions<T> {
     accept?: {
@@ -11,13 +12,15 @@ interface UseFileUploadOptions<T> {
     maxSize?: number;
     allowMultiple?: boolean;
     onDelete?: (file: FileUpload<T>) => Promise<void>;
+    onFileRejected?: (fileRejections: FileRejection[]) => void;
 }
-export declare const useFileUpload: <T>({ accept, onAccept, maxSize, allowMultiple, }: UseFileUploadOptions<T>) => {
+export declare const useFileUpload: <T>({ accept, onAccept, maxSize, allowMultiple, onFileRejected, }: UseFileUploadOptions<T>) => {
     onOpen: () => void;
     onClose: () => void;
     onDelete: (index: number) => void;
     dropzoneProps: UseDropzoneProps;
     open: boolean;
     files: FileUpload<T>[];
+    handleClearFiles: () => void;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.9.25",
+  "version": "1.9.27",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -48,5 +48,5 @@
     "react-dom": ">=18.0.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "dcd989c842a92cb2cf22e222c78c5fcdce5e7264"
+  "gitHead": "0f6c0f3b759038765195962fa203ceae7bc9576d"
 }