@tecsinapse/cortex-react 1.3.0-beta.3 → 1.3.0-beta.30

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

@@ -6,7 +6,8 @@ var context = require('./context.js');
 
 const SelectOption = ({
   onSelectOption,
-  option
+  option,
+  grouped = false
 }) => {
   const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
   return /* @__PURE__ */ React.createElement(
@@ -14,7 +15,8 @@ const SelectOption = ({
     {
       onClick: () => onSelectOption(option),
       className: cortexCore.option({
-        selected: value && keyExtractor(value) === keyExtractor(option)
+        selected: value && keyExtractor(value) === keyExtractor(option),
+        grouped
       }),
       role: "option"
     },

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

@@ -1,22 +1,33 @@
 'use strict';
 
+var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var index = require('./index.js');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+var useSelectOptions = require('../../hooks/useSelectOptions.js');
+var Context = require('../Popover/Context.js');
+var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');
 
+const { list } = cortexCore.selectVariants();
 const SelectOptions = ({
   onSelect,
   options
 }) => {
-  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const { keyExtractor } = React.useContext(context.SelectContext);
+  const { setIsOpen } = Context.usePopoverContext();
+  const { options: _options, isLoading } = useSelectOptions.useSelectOptions({ options });
   const handleSelect = React.useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(false);
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select" }, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+  return isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, _options?.map((option) => /* @__PURE__ */ React.createElement(
     index.Select.Option,
     {
       option,

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

@@ -1,13 +1,10 @@
 'use strict';
 
-var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var context = require('./context.js');
+var index = require('../Popover/index.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);
+  return /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-white max-h-[30vh] w-full overflow-y-scroll gap-y-mili flex flex-col p-0" }, children);
 };
 
 exports.SelectPopover = SelectPopover;

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

@@ -1,11 +1,8 @@
 'use strict';
 
 var React = require('react');
-require('@internationalized/date');
-require('react-aria');
-require('react-stately');
-var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
-require('@floating-ui/react');
+var index = require('../Popover/index.js');
+var Content = require('./Content.js');
 var context = require('./context.js');
 
 const SelectRoot = ({
@@ -14,19 +11,7 @@ const SelectRoot = ({
   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)
-  );
+  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, null, children)));
 };
 
 exports.SelectRoot = SelectRoot;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var Skeleton = require('../Skeleton.js');
+
+const optionSkeletonStyle = "w-full px-deca my-nano h-[30px]";
+const SkeletonOptions = () => {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-y-nano" }, Array.from(Array(10).keys()).map((value) => /* @__PURE__ */ React.createElement(Skeleton.Skeleton, { key: value }, /* @__PURE__ */ React.createElement("div", { className: optionSkeletonStyle }))));
+};
+
+exports.SkeletonOptions = SkeletonOptions;

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

@@ -3,26 +3,28 @@
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var io5 = require('react-icons/io5');
+var index = require('../Popover/index.js');
 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(
+  const { value, labelExtractor } = React.useContext(context.SelectContext);
+  const placeholder = React.useMemo(() => {
+    if (value?.length === 0 || !value) return label;
+    if (value?.length === 1) return labelExtractor(value[0]);
+    if (value?.length > 1) return `${value.length} items selected`;
+    return labelExtractor(value);
+  }, [label, value]);
+  return /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__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

@@ -6,5 +6,9 @@ const SelectContext = React.createContext({
   keyExtractor: () => "",
   labelExtractor: () => ""
 });
+const SelectMultiOptionsContext = React.createContext({
+  onSelect: () => ""
+});
 
 exports.SelectContext = SelectContext;
+exports.SelectMultiOptionsContext = SelectMultiOptionsContext;

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

@@ -1,6 +1,10 @@
 'use strict';
 
 var GroupedOptions = require('./GroupedOptions.js');
+var MultiCheckAllOptions = require('./MultiCheckAllOptions.js');
+var MultiGroupedOptions = require('./MultiGroupedOptions.js');
+var MultiOption = require('./MultiOption.js');
+var MultiOptions = require('./MultiOptions.js');
 var Option = require('./Option.js');
 var Options = require('./Options.js');
 var Popover = require('./Popover.js');
@@ -13,7 +17,11 @@ const Select = {
   Popover: Popover.SelectPopover,
   Options: Options.SelectOptions,
   GroupedOptions: GroupedOptions.SelectGroupedOptions,
-  Option: Option.SelectOption
+  Option: Option.SelectOption,
+  MultiOptions: MultiOptions.SelectMultiOptions,
+  MultiGroupedOptions: MultiGroupedOptions.SelectMultiGroupedOptions,
+  MultiOption: MultiOption.SelectMultiOption,
+  MultiCheckAllOptions: MultiCheckAllOptions.SelectMultiCheckAllOptions
 };
 
 exports.Select = Select;

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

@@ -0,0 +1,16 @@
+'use strict';
+
+const handleSelectMulti = (option, value, onSelect, keyExtractor) => {
+  const current = Array.from(value ?? []);
+  const indexOf = current.findIndex(
+    (it) => keyExtractor(it) === keyExtractor(option)
+  );
+  if (indexOf === -1) {
+    current.push(option);
+  } else {
+    current.splice(indexOf, 1);
+  }
+  onSelect(current);
+};
+
+exports.handleSelectMulti = handleSelectMulti;

package/dist/cjs/components/Skeleton.js

@@ -3,11 +3,7 @@
 var clsx = require('clsx');
 var React = require('react');
 
-const Skeleton = ({
-  className,
-  children,
-  ...rest
-}) => {
+const Skeleton = ({ className, children, ...rest }) => {
   return /* @__PURE__ */ React.createElement(
     "div",
     {

package/dist/cjs/components/Tag.js

@@ -1,18 +1,11 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
 const Tag = React.forwardRef((props, ref) => {
   const { label, variants } = props;
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cortexCore.tag(variants),
-      ref
-    },
-    /* @__PURE__ */ React.createElement("p", null, label)
-  );
+  return /* @__PURE__ */ React.createElement("div", { className: cortexCore.tag(variants), ref }, /* @__PURE__ */ React.createElement("p", null, label));
 });
 
 exports.Tag = Tag;

package/dist/cjs/components/TextArea/Box.js

@@ -0,0 +1,47 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+var React = require('react');
+
+const TextAreaBox = React.forwardRef(
+  ({
+    id,
+    name,
+    variants,
+    label,
+    placeholder,
+    rows,
+    className,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
+      "textarea",
+      {
+        "data-testid": "textarea-box",
+        ref,
+        id: id ?? name,
+        name,
+        placeholder: placeholder ?? " ",
+        className: clsx(
+          cortexCore.inputBox(placeholder, label, className),
+          "resize-none mt-mili"
+        ),
+        rows,
+        ...rest
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        htmlFor: id ?? name,
+        className: cortexCore.labelStyle({
+          intent: variants?.intent,
+          placeholder
+        })
+      },
+      label
+    ));
+  }
+);
+
+exports.TextAreaBox = TextAreaBox;

package/dist/cjs/components/TextArea/Face.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var clsx = require('clsx');
+var React = require('react');
+var utils = require('./utils.js');
+
+const TextAreaFace = React.forwardRef(
+  ({ children, variants, className, ...rest }, ref) => {
+    const clones = utils.getValidChildren(children).map((el) => {
+      return React.cloneElement(el, { ...el.props, variants });
+    });
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: clsx(cortexCore.input(variants), className),
+        "data-testid": "textarea-face",
+        id: "textarea-face",
+        ...rest
+      },
+      clones
+    );
+  }
+);
+
+exports.TextAreaFace = TextAreaFace;

package/dist/cjs/components/TextArea/Left.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const TextAreaLeft = React.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
+});
+
+exports.TextAreaLeft = TextAreaLeft;

package/dist/cjs/components/TextArea/Right.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const TextAreaRight = React.forwardRef(({ children, className, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
+});
+
+exports.TextAreaRight = TextAreaRight;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var Box = require('./Box.js');
+var Face = require('./Face.js');
+
+const TextAreaRoot = React.forwardRef(({ variants, className, ...rest }, ref) => {
+  return /* @__PURE__ */ React.createElement(Face.TextAreaFace, { variants, className }, /* @__PURE__ */ React.createElement(Box.TextAreaBox, { ref, ...rest }));
+});
+
+exports.TextAreaRoot = TextAreaRoot;

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

@@ -0,0 +1,17 @@
+'use strict';
+
+var Box = require('./Box.js');
+var Face = require('./Face.js');
+var Left = require('./Left.js');
+var Right = require('./Right.js');
+var Root = require('./Root.js');
+
+const TextArea = {
+  Root: Root.TextAreaRoot,
+  Face: Face.TextAreaFace,
+  Box: Box.TextAreaBox,
+  Left: Left.TextAreaLeft,
+  Right: Right.TextAreaRight
+};
+
+exports.TextArea = TextArea;

package/dist/cjs/components/TextArea/utils.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+
+const getValidChildren = (children) => {
+  return React.Children.toArray(children).filter(
+    (el) => React.isValidElement(el)
+  );
+};
+
+exports.getValidChildren = getValidChildren;

package/dist/cjs/components/{TimeField.js → TimeField/TimeField.js}

@@ -1,12 +1,12 @@
 'use strict';
 
 var React = require('react');
-var DateSegment = require('./DateSegment.js');
-var useTimeField = require('../hooks/useTimeField.js');
+var useTimeField = require('../../hooks/useTimeField.js');
+var DateSegment = require('../DatePicker/DateSegment.js');
 
 const TimeField = (props) => {
   const { fieldProps, ref, state } = useTimeField.useTimeField(props);
   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 })));
 };
 
-module.exports = TimeField;
+exports.TimeField = TimeField;

package/dist/cjs/components/{TimeFieldInput.js → TimeField/TimeFieldInput.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var React = require('react');
-var index = require('./Input/index.js');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('../Input/index.js');
 var TimeField = require('./TimeField.js');
 
 const TimeFieldInput = (props) => {
@@ -15,7 +15,7 @@ const TimeFieldInput = (props) => {
       "data-testid": "time-field-input"
     },
     /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label),
-    /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, /* @__PURE__ */ React.createElement(TimeField, { onChange, value }))
+    /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, /* @__PURE__ */ React.createElement(TimeField.TimeField, { onChange, value }))
   ));
 };
 

package/dist/cjs/components/Tooltip.js

@@ -1,47 +1,55 @@
 'use strict';
 
-var React = require('react');
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var react = require('@floating-ui/react');
+var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
+var utils = require('./utils.js');
 var useFloatingLogic = require('../hooks/useFloatingLogic.js');
 
-React.forwardRef((props, ref) => {
-  const {
-    children,
-    text,
-    trigger = "hover",
-    placement = "top",
-    width,
-    height
-  } = props;
-  const arrowRef = React.useRef(null);
-  const {
-    isOpen,
-    triggerProps,
-    x,
-    y,
-    strategy,
-    refs,
-    context,
-    floatingStyles
-  } = useFloatingLogic.useFloatingLogic({ placement, arrowRef, trigger });
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, React.cloneElement(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref: ref || refs.setFloating,
-      className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
-      style: {
-        position: strategy,
-        top: y ?? 0,
-        left: x ?? 0,
-        width,
-        height,
-        ...floatingStyles
-      }
-    },
-    text,
-    /* @__PURE__ */ React.createElement(react.FloatingArrow, { ref: arrowRef, context, fill: "black" })
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
-});
+const Tooltip = React.forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      text,
+      trigger = "hover",
+      placement = "top",
+      width,
+      height
+    } = props;
+    const arrowRef = React.useRef(null);
+    const {
+      isOpen,
+      triggerProps,
+      x,
+      y,
+      strategy,
+      refs,
+      context,
+      floatingStyles
+    } = useFloatingLogic.useFloatingLogic({ placement, arrowRef, trigger });
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, utils.cloneWithProps(children, triggerProps), isOpen ? /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: ref || refs.setFloating,
+        className: "bg-black text-white p-2 rounded z-50 shadow-md text-justify",
+        style: {
+          position: strategy,
+          top: y ?? 0,
+          left: x ?? 0,
+          width,
+          height,
+          ...floatingStyles
+        }
+      },
+      text,
+      /* @__PURE__ */ React.createElement(react.FloatingArrow, { ref: arrowRef, context, fill: "black" })
+    ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  }
+);
+
+exports.Tooltip = Tooltip;
+exports.default = Tooltip;

package/dist/cjs/components/utils.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var date = require('@internationalized/date');
+var React = require('react');
 
 const getNameInitials = (name) => {
   const nameSplit = name.split(" ");
@@ -20,7 +21,11 @@ const dateToCalendarDate = (value) => {
 const calendarDateToDate = (value) => {
   return value.toDate(date.getLocalTimeZone());
 };
+function cloneWithProps(children, triggerProps) {
+  return React.cloneElement(/* @__PURE__ */ React.createElement("div", null, children), triggerProps);
+}
 
 exports.calendarDateToDate = calendarDateToDate;
+exports.cloneWithProps = cloneWithProps;
 exports.dateToCalendarDate = dateToCalendarDate;
 exports.getNameInitials = getNameInitials;

package/dist/cjs/hooks/useSelectGroupedOptions.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+
+const useSelectGroupedOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = React.useState();
+  const [isLoading, setIsLoading] = React.useState();
+  const [error, setError] = React.useState();
+  const initData = async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  React.useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+exports.useSelectGroupedOptions = useSelectGroupedOptions;

package/dist/cjs/hooks/useSelectOptions.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var React = require('react');
+
+const useSelectOptions = ({
+  options: _options
+}) => {
+  const [options, setOptions] = React.useState();
+  const [isLoading, setIsLoading] = React.useState();
+  const [error, setError] = React.useState();
+  const initData = React.useCallback(async (fetch) => {
+    setIsLoading(true);
+    try {
+      const result = await fetch();
+      if (result) {
+        setOptions(result ?? []);
+      }
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  React.useEffect(() => {
+    if (typeof _options === "function") initData(_options);
+    else setOptions(_options);
+  }, [_options]);
+  return {
+    isLoading,
+    options,
+    error
+  };
+};
+
+exports.useSelectOptions = useSelectOptions;