@tecsinapse/cortex-react 1.9.24 → 1.9.25-beta.1

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/Popover/Provider.js

@@ -14,9 +14,15 @@ const PopoverProvider = ({
   children,
   placement,
   trigger,
+  fallbackPlacements,
   ...props
 }) => {
-  const floatingLogic = useFloatingElement.useFloatingElement({ placement, trigger, ...props });
+  const floatingLogic = useFloatingElement.useFloatingElement({
+    placement,
+    trigger,
+    fallbackPlacements,
+    ...props
+  });
   return /* @__PURE__ */ React.createElement(Context.Context.Provider, { value: { ...floatingLogic } }, children);
 };
 

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

@@ -12,7 +12,15 @@ const SelectRoot = ({
   labelExtractor,
   className
 }) => {
-  return /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content.Content, { className }, children)));
+  return /* @__PURE__ */ React.createElement(
+    index.Popover.Root,
+    {
+      fallbackPlacements: ["bottom", "top"],
+      placement: "bottom",
+      trigger: "click"
+    },
+    /* @__PURE__ */ React.createElement(context.SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React.createElement(Content.Content, { className }, children))
+  );
 };
 
 exports.SelectRoot = SelectRoot;

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/useFloatingElement.js

@@ -10,7 +10,8 @@ const useFloatingElement = ({
   arrowRef,
   controlled,
   isOpen,
-  setIsOpen
+  setIsOpen,
+  fallbackPlacements = ["right", "bottom", "left", "top"]
 }) => {
   const [openUncontrolled, onOpenChangeUncontrolled] = React.useState(false);
   const { x, y, strategy, refs, update, context, floatingStyles } = react.useFloating(
@@ -23,7 +24,7 @@ const useFloatingElement = ({
         react.offset(10),
         react.flip({
           flipAlignment: true,
-          fallbackPlacements: ["right", "bottom", "left", "top"]
+          fallbackPlacements
         }),
         react.shift(),
         ...arrowRef ? [react.arrow({ element: arrowRef })] : []

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/Popover/Provider.js

@@ -12,9 +12,15 @@ const PopoverProvider = ({
   children,
   placement,
   trigger,
+  fallbackPlacements,
   ...props
 }) => {
-  const floatingLogic = useFloatingElement({ placement, trigger, ...props });
+  const floatingLogic = useFloatingElement({
+    placement,
+    trigger,
+    fallbackPlacements,
+    ...props
+  });
   return /* @__PURE__ */ React__default.createElement(Context.Provider, { value: { ...floatingLogic } }, children);
 };
 

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

@@ -10,7 +10,15 @@ const SelectRoot = ({
   labelExtractor,
   className
 }) => {
-  return /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom", trigger: "click" }, /* @__PURE__ */ React__default.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React__default.createElement(Content, { className }, children)));
+  return /* @__PURE__ */ React__default.createElement(
+    Popover.Root,
+    {
+      fallbackPlacements: ["bottom", "top"],
+      placement: "bottom",
+      trigger: "click"
+    },
+    /* @__PURE__ */ React__default.createElement(SelectContext.Provider, { value: { value, keyExtractor, labelExtractor } }, /* @__PURE__ */ React__default.createElement(Content, { className }, children))
+  );
 };
 
 export { SelectRoot };

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/useFloatingElement.js

@@ -8,7 +8,8 @@ const useFloatingElement = ({
   arrowRef,
   controlled,
   isOpen,
-  setIsOpen
+  setIsOpen,
+  fallbackPlacements = ["right", "bottom", "left", "top"]
 }) => {
   const [openUncontrolled, onOpenChangeUncontrolled] = useState(false);
   const { x, y, strategy, refs, update, context, floatingStyles } = useFloating(
@@ -21,7 +22,7 @@ const useFloatingElement = ({
         offset(10),
         flip({
           flipAlignment: true,
-          fallbackPlacements: ["right", "bottom", "left", "top"]
+          fallbackPlacements
         }),
         shift(),
         ...arrowRef ? [arrow({ element: arrowRef })] : []

package/dist/types/components/Popover/Provider.d.ts

@@ -4,14 +4,16 @@ export interface ControlledProps {
     controlled: true;
     isOpen: boolean;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
+    fallbackPlacements?: Array<Placement>;
 }
 export interface UncontrolledProviderProps {
     children: ReactNode;
     placement?: Placement;
+    fallbackPlacements?: Array<Placement>;
     trigger?: 'hover' | 'click';
     controlled?: false;
 }
 export interface ControlledPopoverProviderProps extends Omit<UncontrolledProviderProps, 'controlled'>, ControlledProps {
 }
 export type PopoverProviderProps = UncontrolledProviderProps | ControlledPopoverProviderProps;
-export declare const PopoverProvider: ({ children, placement, trigger, ...props }: PopoverProviderProps) => React.JSX.Element;
+export declare const PopoverProvider: ({ children, placement, trigger, fallbackPlacements, ...props }: PopoverProviderProps) => React.JSX.Element;

package/dist/types/components/Popover/index.d.ts

@@ -2,5 +2,5 @@ export declare const Popover: {
     Root: ({ children, placement, trigger, ...props }: import("./Root").PopoverRootProps) => import("react").JSX.Element;
     Trigger: ({ children, disabled }: import("./Trigger").PopoverTriggerProps) => import("react").FunctionComponentElement<any>;
     Content: ({ children, className, modal, ...rest }: import("./Content").PopoverContentProps) => import("react").JSX.Element;
-    Provider: ({ children, placement, trigger, ...props }: import("./Provider").PopoverProviderProps) => import("react").JSX.Element;
+    Provider: ({ children, placement, trigger, fallbackPlacements, ...props }: import("./Provider").PopoverProviderProps) => import("react").JSX.Element;
 };

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

@@ -12,8 +12,9 @@ export interface FloatingElementProps {
     controlled?: boolean;
     isOpen?: boolean;
     setIsOpen?: Dispatch<SetStateAction<boolean>> | undefined;
+    fallbackPlacements?: Array<Placement>;
 }
-export declare const useFloatingElement: ({ placement, trigger, delay, arrowRef, controlled, isOpen, setIsOpen, }: FloatingElementProps) => {
+export declare const useFloatingElement: ({ placement, trigger, delay, arrowRef, controlled, isOpen, setIsOpen, fallbackPlacements, }: FloatingElementProps) => {
     isOpen: boolean;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
     x: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.9.24",
+  "version": "1.9.25-beta.1",
   "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": "9ab1bee67dfccf8804ef04d4c1ba50bfe0959a78"
+  "gitHead": "8ad668edb728e76faf94ce2ec5d8feee5a51f912"
 }