@tecsinapse/cortex-react 1.3.0-beta.0 → 1.3.0-beta.2

package/dist/cjs/components/Calendar.js

@@ -4,6 +4,7 @@ var React = require('react');
 var useCalendar = require('../hooks/useCalendar.js');
 require('@internationalized/date');
 require('react-aria');
+require('react-stately');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

package/dist/cjs/components/DateField.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var date = require('@internationalized/date');
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var DateSegment = require('./DateSegment.js');
+
+const DateField = (props) => {
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useDateFieldState({
+    ...props,
+    createCalendar: date.createCalendar,
+    locale
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useDateField(
+    { "aria-label": "date-field" },
+    state,
+    ref
+  );
+  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { key: i, segment, state })));
+};
+
+exports.DateField = DateField;

package/dist/cjs/components/DatePickerInput.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var utils = require('./utils.js');
+var useDatePickerInput = require('../hooks/useDatePickerInput.js');
+var Calendar = require('./Calendar.js');
+var DateField = require('./DateField.js');
+var DatePickerInputBase = require('./DatePickerInputBase.js');
+
+const DatePickerInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  const { fieldProps, state, ref } = useDatePickerInput.useDatePickerInput({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-picker-input" }, /* @__PURE__ */ React.createElement(
+    DatePickerInputBase.DatePickerInputBase,
+    {
+      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React.createElement("div", { ref }, /* @__PURE__ */ React.createElement(
+      DateField.DateField,
+      {
+        ...fieldProps,
+        onChange: (value2) => {
+          state.setDateValue(value2);
+          state.close();
+        }
+      }
+    ))
+  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+    Calendar.Calendar,
+    {
+      value,
+      onChange: (value2) => {
+        state.setDateValue(utils.dateToCalendarDate(value2));
+        state.close();
+      }
+    }
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+exports.DatePickerInput = DatePickerInput;

package/dist/cjs/components/DatePickerInputBase.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var lia = require('react-icons/lia');
+var Input = require('./Input.js');
+
+const DatePickerInputBase = ({
+  children,
+  variants,
+  label,
+  onClickCalendar
+}) => {
+  return /* @__PURE__ */ React.createElement(Input.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, children), /* @__PURE__ */ React.createElement(Input.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
+    lia.LiaCalendar,
+    {
+      className: "cursor-pointer mt-centi",
+      onClick: onClickCalendar,
+      "data-testid": "date-picker-input-base-calendar"
+    }
+  )));
+};
+
+exports.DatePickerInputBase = DatePickerInputBase;

package/dist/cjs/components/DateRangePickerInput.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var utils = require('./utils.js');
+var useDateRangePickerInput = require('../hooks/useDateRangePickerInput.js');
+var DateField = require('./DateField.js');
+var DatePickerInputBase = require('./DatePickerInputBase.js');
+var RangeCalendar = require('./RangeCalendar.js');
+
+const DateRangePickerInput = (props) => {
+  const { onChange, value, label, variants } = props;
+  const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput.useDateRangePickerInput({ value, onChange });
+  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(
+    DatePickerInputBase.DatePickerInputBase,
+    {
+      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React.createElement("div", { ref, className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
+      DateField.DateField,
+      {
+        ...startFieldProps,
+        value: utils.dateToCalendarDate(value?.start),
+        onChange: (value2) => {
+          state.setDate("start", value2);
+          state.close();
+        }
+      }
+    ), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(
+      DateField.DateField,
+      {
+        ...endFieldProps,
+        value: utils.dateToCalendarDate(value?.end),
+        onChange: (value2) => {
+          state.setDate("end", value2);
+          state.close();
+        }
+      }
+    ))
+  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+    RangeCalendar.RangeCalendar,
+    {
+      value,
+      onChange: (value2) => {
+        state.setDateRange({
+          start: utils.dateToCalendarDate(value2.start),
+          end: utils.dateToCalendarDate(value2.end)
+        });
+        state.close();
+      }
+    }
+  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+exports.DateRangePickerInput = DateRangePickerInput;

package/dist/cjs/components/DateSegment.js

@@ -6,7 +6,15 @@ var reactAria = require('react-aria');
 const DateSegment = ({ segment, state }) => {
   const ref = React.useRef(null);
   const { segmentProps } = reactAria.useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ React.createElement("div", { ...segmentProps, ref, className: "text-sub accent-transparent" }, segment.text);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...segmentProps,
+      ref,
+      className: "focus:outline-none focus:bg-secondary-light"
+    },
+    segment.text
+  );
 };
 
 exports.DateSegment = DateSegment;

package/dist/cjs/components/Input.js

@@ -9,7 +9,7 @@ const getValidChildren = (children) => {
     (el) => React.isValidElement(el)
   );
 };
-const Box = React.forwardRef(
+const InputBox = React.forwardRef(
   ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
       "input",
@@ -33,7 +33,7 @@ const Box = React.forwardRef(
     ));
   }
 );
-const Face = React.forwardRef(
+const InputFace = React.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = getValidChildren(children).map((el) => {
       return React.cloneElement(el, { ...el.props, variants });
@@ -50,32 +50,32 @@ const Face = React.forwardRef(
     );
   }
 );
-const Root = React.forwardRef(
+const InputRoot = React.forwardRef(
   ({ variants, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(Face, { variants, className }, /* @__PURE__ */ React.createElement(Box, { ...rest, ref }));
+    return /* @__PURE__ */ React.createElement(InputFace, { variants, className }, /* @__PURE__ */ React.createElement(InputBox, { ...rest, ref }));
   }
 );
-const Left = React.forwardRef(
+const InputLeft = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "mr-2.5"), ...rest, ref }, children);
   }
 );
-const Right = React.forwardRef(
+const InputRight = React.forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ React.createElement("div", { className: clsx.clsx(className, "ml-2.5"), ...rest, ref }, children);
   }
 );
 const Input = {
-  Root,
-  Face,
-  Box,
-  Left,
-  Right
+  Root: InputRoot,
+  Face: InputFace,
+  Box: InputBox,
+  Left: InputLeft,
+  Right: InputRight
 };
 
-exports.Box = Box;
-exports.Face = Face;
 exports.Input = Input;
-exports.Left = Left;
-exports.Right = Right;
-exports.Root = Root;
+exports.InputBox = InputBox;
+exports.InputFace = InputFace;
+exports.InputLeft = InputLeft;
+exports.InputRight = InputRight;
+exports.InputRoot = InputRoot;

package/dist/cjs/components/RangeCalendar.js

@@ -1,44 +1,36 @@
 'use strict';
 
-var date = require('@internationalized/date');
 var React = require('react');
-var reactAria = require('react-aria');
-var reactStately = require('react-stately');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useRangeCalendar = require('../hooks/useRangeCalendar.js');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 
 const RangeCalendar = ({ value, onChange }) => {
-  const { locale } = reactAria.useLocale();
-  const state = reactStately.useRangeCalendarState({
-    locale,
-    createCalendar: date.createCalendar,
-    defaultValue: {
-      start: new date.CalendarDate(
-        value.start.getFullYear(),
-        value.start.getMonth(),
-        value.start.getDate()
-      ),
-      end: new date.CalendarDate(
-        value.end.getFullYear(),
-        value.end.getMonth(),
-        value.end.getDate()
-      )
-    },
-    onChange: (value2) => onChange({
-      start: value2.start.toDate(date.getLocalTimeZone()),
-      end: value2.end.toDate(date.getLocalTimeZone())
-    })
+  const { calendarProps, state, title, ref } = useRangeCalendar.useRangeCalendar({
+    value,
+    onChange
   });
-  const ref = React.useRef(null);
-  const { calendarProps, title } = reactAria.useRangeCalendar({}, state, ref);
-  return /* @__PURE__ */ React.createElement("div", { ...calendarProps, className: "calendar", ref }, /* @__PURE__ */ React.createElement(
-    CalendarHeader.CalendarHeader,
+  return /* @__PURE__ */ React.createElement(
+    "div",
     {
-      onClickPrevButton: () => state.focusPreviousPage(),
-      onClickNextButton: () => state.focusNextPage(),
-      title
-    }
-  ), /* @__PURE__ */ React.createElement(CalendarGrid.CalendarGrid, { state }));
+      ...calendarProps,
+      className: "calendar",
+      ref,
+      "data-testid": "calendar-range-div"
+    },
+    /* @__PURE__ */ React.createElement(
+      CalendarHeader.CalendarHeader,
+      {
+        onClickPrevButton: () => state.focusPreviousPage(),
+        onClickNextButton: () => state.focusNextPage(),
+        title
+      }
+    ),
+    /* @__PURE__ */ React.createElement(CalendarGrid.CalendarGrid, { state })
+  );
 };
 
 exports.RangeCalendar = RangeCalendar;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+
+const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
+const SelectGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options
+}) => {
+  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const handleSelect = React.useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: containerGrouped() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+    index.Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )))));
+};
+
+exports.SelectGroupedOptions = SelectGroupedOptions;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const SelectOption = ({
+  onSelectOption,
+  option
+}) => {
+  const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      onClick: () => onSelectOption(option),
+      className: cortexCore.option({
+        selected: value && keyExtractor(value) === keyExtractor(option)
+      }),
+      role: "option"
+    },
+    labelExtractor(option)
+  );
+};
+
+exports.SelectOption = SelectOption;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+
+const SelectOptions = ({
+  onSelect,
+  options
+}) => {
+  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const handleSelect = React.useCallback(
+    (option) => {
+      onSelect(option);
+      setOpen?.(false);
+    },
+    [onSelect]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    index.Select.Option,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: handleSelect
+    }
+  )));
+};
+
+exports.SelectOptions = SelectOptions;

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

@@ -0,0 +1,13 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const { dropdown } = cortexCore.selectVariants();
+const SelectPopover = ({ children }) => {
+  const { open } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement("div", { className: dropdown({ open }), "data-testid": "select-popover" }, children);
+};
+
+exports.SelectPopover = SelectPopover;

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+var context = require('./context.js');
+
+const SelectRoot = ({
+  children,
+  value,
+  keyExtractor,
+  labelExtractor
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef(null);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside: () => setOpen?.(false)
+  });
+  return /* @__PURE__ */ React.createElement(
+    context.SelectContext.Provider,
+    {
+      value: { value, open, setOpen, keyExtractor, labelExtractor }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children)
+  );
+};
+
+exports.SelectRoot = SelectRoot;

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

@@ -0,0 +1,28 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var io5 = require('react-icons/io5');
+var context = require('./context.js');
+
+const { button } = cortexCore.selectVariants();
+const SelectTrigger = ({ label, disabled }) => {
+  const { value, setOpen, labelExtractor, open } = React.useContext(context.SelectContext);
+  const placeholder = React.useMemo(
+    () => value ? labelExtractor(value) : label,
+    [label, value]
+  );
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: button({ disabled }),
+      onClick: () => setOpen?.(!open),
+      disabled,
+      role: "button"
+    },
+    /* @__PURE__ */ React.createElement("span", { "data-testid": "select-placeholder" }, placeholder),
+    /* @__PURE__ */ React.createElement(io5.IoChevronDownOutline, null)
+  );
+};
+
+exports.SelectTrigger = SelectTrigger;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+
+const SelectContext = React.createContext({
+  keyExtractor: () => "",
+  labelExtractor: () => ""
+});
+
+exports.SelectContext = SelectContext;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var GroupedOptions = require('./GroupedOptions.js');
+var Option = require('./Option.js');
+var Options = require('./Options.js');
+var Popover = require('./Popover.js');
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+
+const Select = {
+  Root: Root.SelectRoot,
+  Trigger: Trigger.SelectTrigger,
+  Popover: Popover.SelectPopover,
+  Options: Options.SelectOptions,
+  GroupedOptions: GroupedOptions.SelectGroupedOptions,
+  Option: Option.SelectOption
+};
+
+exports.Select = Select;

package/dist/cjs/components/Table.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
 const THead = ({
   children,
@@ -39,7 +39,7 @@ const Table = ({
 const Td = ({
   children,
   ...rest
-}) => /* @__PURE__ */ React.createElement("td", { ...rest, "data-testid": "td" }, children);
+}) => /* @__PURE__ */ React.createElement("td", { "data-testid": "td", ...rest }, children);
 
 exports.TCell = TCell;
 exports.TFoot = TFoot;

package/dist/cjs/components/utils.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var date = require('@internationalized/date');
+
 const getNameInitials = (name) => {
   const nameSplit = name.split(" ");
   const length = nameSplit.length;
@@ -8,5 +10,17 @@ const getNameInitials = (name) => {
   }
   return name[0];
 };
+const dateToCalendarDate = (value) => {
+  return new date.CalendarDate(
+    value?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear(),
+    value?.getMonth() ? value.getMonth() + 1 : (/* @__PURE__ */ new Date()).getMonth() + 1,
+    value?.getDate() ?? (/* @__PURE__ */ new Date()).getDate()
+  );
+};
+const calendarDateToDate = (value) => {
+  return value.toDate(date.getLocalTimeZone());
+};
 
+exports.calendarDateToDate = calendarDateToDate;
+exports.dateToCalendarDate = dateToCalendarDate;
 exports.getNameInitials = getNameInitials;

package/dist/cjs/hooks/useCalendar.js

@@ -3,18 +3,15 @@
 var date = require('@internationalized/date');
 var reactAria = require('react-aria');
 var reactStately = require('react-stately');
+var utils = require('../components/utils.js');
 
 const useCalendar = ({ value, onChange }) => {
   const { locale } = reactAria.useLocale();
   const state = reactStately.useCalendarState({
     locale,
     createCalendar: date.createCalendar,
-    defaultValue: new date.CalendarDate(
-      value.getFullYear(),
-      value.getMonth(),
-      value.getDate()
-    ),
-    onChange: (value2) => onChange(value2.toDate(date.getLocalTimeZone()))
+    defaultValue: utils.dateToCalendarDate(value),
+    onChange: (value2) => onChange(utils.calendarDateToDate(value2))
   });
   const { calendarProps, title } = reactAria.useCalendar({}, state);
   return {

package/dist/cjs/hooks/useDatePickerInput.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var utils = require('../components/utils.js');
+
+const useDatePickerInput = ({
+  value,
+  onChange
+}) => {
+  const state = reactStately.useDatePickerState({
+    defaultValue: utils.dateToCalendarDate(value),
+    onChange: (value2) => {
+      onChange(utils.calendarDateToDate(value2));
+    }
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useDatePicker(
+    { "aria-label": "date-picker-field" },
+    state,
+    ref
+  );
+  return {
+    fieldProps,
+    state,
+    ref
+  };
+};
+
+exports.useDatePickerInput = useDatePickerInput;

package/dist/cjs/hooks/useDateRangePickerInput.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var utils = require('../components/utils.js');
+
+const useDateRangePickerInput = ({
+  value,
+  onChange
+}) => {
+  const state = reactStately.useDateRangePickerState({
+    defaultValue: {
+      start: utils.dateToCalendarDate(value?.start),
+      end: utils.dateToCalendarDate(value?.end)
+    },
+    onChange: (value2) => {
+      onChange({
+        start: utils.calendarDateToDate(value2.start),
+        end: utils.calendarDateToDate(value2.end)
+      });
+    }
+  });
+  const ref = React.useRef(null);
+  const { startFieldProps, endFieldProps } = reactAria.useDateRangePicker(
+    { "aria-label": "date-range-picker-field" },
+    state,
+    ref
+  );
+  return { startFieldProps, endFieldProps, state, ref };
+};
+
+exports.useDateRangePickerInput = useDateRangePickerInput;