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

package/dist/cjs/components/Menubar/Search.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+var index = require('../Input/index.js');
+var clsx = require('clsx');
+var menubar = require('../../styles/menubar.js');
+var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
+
+const Search = (props) => {
+  const [show] = MenubarProvider.useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    index.Input.Search,
+    {
+      ...props,
+      className: clsx("mr-tera flex-1", menubar.animate({ show }))
+    }
+  );
+};
+
+module.exports = Search;

package/dist/cjs/components/Menubar/SubItem.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var ItemLink = require('./ItemLink.js');
+
+const { container } = menubar.subItem();
+const SubItem = ({ children, href, className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement(ItemLink, { href }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ...rest,
+      "data-testid": "sub-item-menubar",
+      className: container({ className })
+    },
+    children
+  ));
+};
+
+module.exports = SubItem;

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

@@ -0,0 +1,33 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Left = require('./Left.js');
+var Search = require('./Search.js');
+var Right = require('./Right.js');
+var Dropdown = require('./Dropdown.js');
+var MostUsed = require('./MostUsed.js');
+var MostUsedItem = require('./MostUsedItem.js');
+var Header = require('./Header.js');
+var Category = require('./Category.js');
+var Item = require('./Item.js');
+var Categories = require('./Categories.js');
+var SubItem = require('./SubItem.js');
+var DropdownRoot = require('./DropdownRoot.js');
+
+const Menubar = {
+  Root,
+  Header,
+  HeaderLeft: Left,
+  Search,
+  HeaderRight: Right,
+  Dropdown,
+  MostUsed,
+  MostUsedItem,
+  Category,
+  Categories,
+  Item,
+  SubItem,
+  DropdownRoot
+};
+
+exports.Menubar = Menubar;

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

@@ -0,0 +1,31 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+var Context = require('./Context.js');
+
+const PopoverContent = ({
+  children,
+  className
+}) => {
+  const { isOpen, x, y, strategy, floatingStyles, refs } = Context.usePopoverContext();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: refs.setFloating,
+      className: clsx(
+        "border border-gray-200 bg-black p-[0px] rounded-md shadow-lg z-50",
+        className
+      ),
+      style: {
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        ...floatingStyles
+      }
+    },
+    children
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+};
+
+exports.PopoverContent = PopoverContent;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+
+const Context = React.createContext(void 0);
+const usePopoverContext = () => {
+  const context = React.useContext(Context);
+  if (!context) {
+    throw new Error("usePopoverContext must be used within a PopoverProvider");
+  }
+  return context;
+};
+
+exports.Context = Context;
+exports.usePopoverContext = usePopoverContext;

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+var useFloatingLogic = require('../../hooks/useFloatingLogic.js');
+var Context = require('./Context.js');
+
+const PopoverProvider = ({
+  children,
+  placement,
+  trigger
+}) => {
+  const floatingLogic = useFloatingLogic.useFloatingLogic({ placement, trigger });
+  return /* @__PURE__ */ React.createElement(Context.Context.Provider, { value: { ...floatingLogic } }, children);
+};
+
+exports.PopoverProvider = PopoverProvider;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index.js');
+
+const PopoverRoot = ({
+  children,
+  placement,
+  trigger
+}) => {
+  return /* @__PURE__ */ React.createElement(index.Popover.Provider, { placement, trigger }, children);
+};
+
+exports.PopoverRoot = PopoverRoot;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var Context = require('./Context.js');
+var utils = require('../utils.js');
+
+const PopoverTrigger = ({ children }) => {
+  const { triggerProps } = Context.usePopoverContext();
+  return utils.cloneWithProps(children, triggerProps);
+};
+
+exports.PopoverTrigger = PopoverTrigger;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+var Root = require('./Root.js');
+var Trigger = require('./Trigger.js');
+var Content = require('./Content.js');
+var Provider = require('./Provider.js');
+
+const Popover = {
+  Root: Root.PopoverRoot,
+  Trigger: Trigger.PopoverTrigger,
+  Content: Content.PopoverContent,
+  Provider: Provider.PopoverProvider
+};
+
+exports.Popover = Popover;

package/dist/cjs/components/RadioButton.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+
+const { container, input, label: labelStyle } = cortexCore.radioButtonStyles();
+const RadioButton = React.forwardRef(
+  ({ label, reversed, id, ...rest }, ref) => {
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: container({ reversed }),
+        ref,
+        "data-testid": "radio-button-container"
+      },
+      /* @__PURE__ */ React.createElement("input", { id, type: "radio", className: input(), ...rest }),
+      label ? /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: labelStyle() }, label) : /* @__PURE__ */ React.createElement(React.Fragment, null)
+    );
+  }
+);
+
+exports.RadioButton = RadioButton;

package/dist/cjs/components/RangeCalendar.js

@@ -5,6 +5,7 @@ require('@internationalized/date');
 require('react-aria');
 require('react-stately');
 var useRangeCalendar = require('../hooks/useRangeCalendar.js');
+require('@floating-ui/react');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

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

@@ -0,0 +1,21 @@
+'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 Context = require('../Popover/Context.js');
+
+const Content = ({ children }) => {
+  const { setIsOpen } = Context.usePopoverContext();
+  const ref = React.useRef(null);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children);
+};
+
+exports.Content = Content;

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

@@ -3,25 +3,28 @@
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var index = require('./index.js');
+var Context = require('../Popover/Context.js');
 var context = require('./context.js');
 
-const { groupedTitle, containerGrouped } = cortexCore.selectVariants();
+const { groupedTitle, list } = cortexCore.selectVariants();
 const SelectGroupedOptions = ({
   onSelect,
   groupedLabelExtractor,
   options
 }) => {
-  const { setOpen, keyExtractor } = React.useContext(context.SelectContext);
+  const { keyExtractor } = React.useContext(context.SelectContext);
+  const { setIsOpen } = Context.usePopoverContext();
   const handleSelect = React.useCallback(
     (option) => {
       onSelect(option);
-      setOpen?.(false);
+      setIsOpen?.(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(
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, [...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,
     {
+      grouped: true,
       option,
       key: keyExtractor(option),
       onSelectOption: handleSelect

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const SelectMultiCheckAllOptions = ({
+  checkAllLabel = "Select all"
+}) => {
+  const { keyExtractor, value: currentValue = [] } = React.useContext(context.SelectContext);
+  const { options, onSelect } = React.useContext(context.SelectMultiOptionsContext);
+  const isChecked = React.useMemo(
+    () => (options ?? []).filter(
+      (it) => currentValue.find((value) => keyExtractor(value) === keyExtractor(it))
+    ).length == (options ?? []).length,
+    [keyExtractor, currentValue, options]
+  );
+  const checkAll = React.useCallback(() => {
+    {
+      let updateSelected = [...currentValue];
+      if (!isChecked) {
+        updateSelected = [
+          .../* @__PURE__ */ new Set([...updateSelected, ...options ?? []])
+        ];
+      } else {
+        const optionKeys = new Set(
+          options?.map((option2) => keyExtractor(option2))
+        );
+        updateSelected = updateSelected.filter(
+          (item) => !optionKeys.has(keyExtractor(item))
+        );
+      }
+      onSelect(updateSelected);
+    }
+  }, [options, onSelect]);
+  return options?.length ? /* @__PURE__ */ React.createElement("div", { className: cortexCore.option(), onClick: checkAll }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      type: "checkbox",
+      className: cortexCore.checkbox(),
+      onChange: checkAll,
+      checked: isChecked
+    }
+  ), /* @__PURE__ */ React.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+};
+
+exports.SelectMultiCheckAllOptions = SelectMultiCheckAllOptions;

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

@@ -0,0 +1,44 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+var utils = require('./utils.js');
+
+const { groupedTitle, list } = cortexCore.selectVariants();
+const SelectMultiGroupedOptions = ({
+  onSelect,
+  groupedLabelExtractor,
+  options,
+  children
+}) => {
+  const { value: currentValue = [], keyExtractor } = React.useContext(context.SelectContext);
+  const flattenMap = React.useMemo(
+    () => options ? Array.from(options?.values()).flatMap((value) => value) : [],
+    [options]
+  );
+  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, /* @__PURE__ */ React.createElement(
+    context.SelectMultiOptionsContext.Provider,
+    {
+      value: { onSelect, options: flattenMap }
+    },
+    children,
+    [...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.MultiOption,
+      {
+        grouped: true,
+        option,
+        key: keyExtractor(option),
+        onSelectOption: (option2) => utils.handleSelectMulti(
+          option2,
+          currentValue,
+          onSelect,
+          keyExtractor
+        )
+      }
+    ))))
+  ));
+};
+
+exports.SelectMultiGroupedOptions = SelectMultiGroupedOptions;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var context = require('./context.js');
+
+const SelectMultiOption = ({
+  onSelectOption,
+  option,
+  grouped = false
+}) => {
+  const { keyExtractor, labelExtractor, value } = React.useContext(context.SelectContext);
+  const inputRef = React.useRef(null);
+  const isChecked = React.useMemo(
+    () => value?.length > 0 && value.find((it) => keyExtractor(it) === keyExtractor(option)) !== void 0,
+    [value, option]
+  );
+  const onClickOption = React.useCallback(() => {
+    onSelectOption(option);
+    inputRef.current?.click();
+  }, [onSelectOption, inputRef]);
+  return /* @__PURE__ */ React.createElement(
+    "li",
+    {
+      onClick: onClickOption,
+      className: cortexCore.option({ grouped }),
+      role: "option"
+    },
+    /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: isChecked,
+        className: cortexCore.checkbox({ className: "pointer-events-none" }),
+        onChange: () => false,
+        ref: inputRef
+      }
+    ),
+    labelExtractor(option)
+  );
+};
+
+exports.SelectMultiOption = SelectMultiOption;

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

@@ -0,0 +1,26 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('./index.js');
+var context = require('./context.js');
+var utils = require('./utils.js');
+
+const { list } = cortexCore.selectVariants();
+const SelectMultiOptions = ({
+  onSelect,
+  options,
+  children
+}) => {
+  const { keyExtractor, value: currentValue = [] } = React.useContext(context.SelectContext);
+  return /* @__PURE__ */ React.createElement(context.SelectMultiOptionsContext.Provider, { value: { onSelect, options } }, /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+    index.Select.MultiOption,
+    {
+      option,
+      key: keyExtractor(option),
+      onSelectOption: (option2) => utils.handleSelectMulti(option2, currentValue, onSelect, keyExtractor)
+    }
+  ))));
+};
+
+exports.SelectMultiOptions = SelectMultiOptions;

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,26 @@
 'use strict';
 
+var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var index = require('./index.js');
+var Context = require('../Popover/Context.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 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 /* @__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,10 +1,8 @@
 'use strict';
 
 var React = require('react');
-require('@internationalized/date');
-require('react-aria');
-require('react-stately');
-var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+var index = require('../Popover/index.js');
+var Content = require('./Content.js');
 var context = require('./context.js');
 
 const SelectRoot = ({
@@ -13,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.Provider, null, /* @__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/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/TimeFieldInput.js

@@ -1,14 +1,14 @@
 'use strict';
 
 var React = require('react');
-var Input = require('./Input.js');
+var index = require('./Input/index.js');
 var cortexCore = require('@tecsinapse/cortex-core');
 var TimeField = require('./TimeField.js');
 
 const TimeFieldInput = (props) => {
   const { onChange, value, label, variants } = props;
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    Input.Input.Face,
+    index.Input.Face,
     {
       variants,
       className: "flex flex-row",