@tecsinapse/cortex-react 1.13.0-beta.3 → 1.13.0-beta.4

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

@@ -0,0 +1,38 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var useMultiSelectOption = require('./useMultiSelectOption.js');
+
+const SelectCustomMultiOption = ({
+  onSelect,
+  option,
+  grouped = false,
+  children
+}) => {
+  const { onClickOption, isChecked, inputRef } = useMultiSelectOption.useMultiSelectOption(
+    option,
+    onSelect
+  );
+  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
+      }
+    ),
+    children
+  );
+};
+
+exports.SelectCustomMultiOption = SelectCustomMultiOption;

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

@@ -33,7 +33,7 @@ const SelectMultiCheckAllOptions = ({
           updateSelected.splice(updateSelected.indexOf(it), 1);
         });
       }
-      onSelect(updateSelected);
+      onSelect?.(updateSelected);
     }
   }, [options, onSelect]);
   return options?.length ? /* @__PURE__ */ React.createElement("div", { className: cortexCore.option(), onClick: checkAll }, /* @__PURE__ */ React.createElement(

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

@@ -14,7 +14,6 @@ var useSelectGroupedOptions = require('../../hooks/useSelectGroupedOptions.js');
 var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');
-var utils = require('./utils.js');
 
 const { groupedTitle, list } = cortexCore.selectVariants();
 const SelectMultiGroupedOptions = ({
@@ -23,7 +22,7 @@ const SelectMultiGroupedOptions = ({
   options,
   children
 }) => {
-  const { value: currentValue = [], keyExtractor } = React.useContext(context.SelectContext);
+  const { keyExtractor } = React.useContext(context.SelectContext);
   const { options: _options, isLoading } = useSelectGroupedOptions.useSelectGroupedOptions({ options });
   const flattenMap = React.useMemo(
     () => _options ? Array.from(_options?.values()).flatMap((value) => value) : [],
@@ -41,12 +40,7 @@ const SelectMultiGroupedOptions = ({
         grouped: true,
         option,
         key: keyExtractor(option),
-        onSelectOption: (option2) => utils.handleSelectMulti(
-          option2,
-          currentValue,
-          onSelect,
-          keyExtractor
-        )
+        onSelect
       }
     )))))
   );

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

@@ -2,23 +2,14 @@
 
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
-var context = require('./context.js');
+var useMultiSelectOption = require('./useMultiSelectOption.js');
 
 const SelectMultiOption = ({
-  onSelectOption,
+  onSelect,
   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]);
+  const { onClickOption, isChecked, inputRef, labelExtractor } = useMultiSelectOption.useMultiSelectOption(option, onSelect);
   return /* @__PURE__ */ React.createElement(
     "li",
     {

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

@@ -14,7 +14,6 @@ var useSelectOptions = require('../../hooks/useSelectOptions.js');
 var MultiOption = require('./MultiOption.js');
 var SkeletonOptions = require('./SkeletonOptions.js');
 var context = require('./context.js');
-var utils = require('./utils.js');
 
 const { list } = cortexCore.selectVariants();
 const SelectMultiOptions = ({
@@ -22,14 +21,14 @@ const SelectMultiOptions = ({
   options,
   children
 }) => {
-  const { keyExtractor, value: currentValue = [] } = React.useContext(context.SelectContext);
+  const { keyExtractor } = React.useContext(context.SelectContext);
   const { options: _options, isLoading } = useSelectOptions.useSelectOptions({ options });
   return /* @__PURE__ */ React.createElement(context.SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options } }, isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children, _options?.map((option) => /* @__PURE__ */ React.createElement(
     MultiOption.SelectMultiOption,
     {
       option,
       key: keyExtractor(option),
-      onSelectOption: (option2) => utils.handleSelectMulti(option2, currentValue, onSelect, keyExtractor)
+      onSelect
     }
   ))));
 };

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

@@ -11,6 +11,7 @@ var Popover = require('./Popover.js');
 var Root = require('./Root.js');
 var Trigger = require('./Trigger.js');
 var CustomOption = require('./CustomOption.js');
+var CustomMultiOption = require('./CustomMultiOption.js');
 
 const Select = {
   Root: Root.SelectRoot,
@@ -23,7 +24,8 @@ const Select = {
   MultiGroupedOptions: MultiGroupedOptions.SelectMultiGroupedOptions,
   MultiOption: MultiOption.SelectMultiOption,
   MultiCheckAllOptions: MultiCheckAllOptions.SelectMultiCheckAllOptions,
-  CustomOption: CustomOption.SelectCustomOption
+  CustomOption: CustomOption.SelectCustomOption,
+  CustomMultiOption: CustomMultiOption.SelectCustomMultiOption
 };
 
 exports.Select = Select;

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var context = require('./context.js');
+var utils = require('./utils.js');
+
+const useMultiSelectOption = (option, onSelect) => {
+  const { keyExtractor, value, labelExtractor } = React.useContext(context.SelectContext);
+  const inputRef = React.useRef(null);
+  const onSelectOption = (option2) => utils.handleSelectMulti(option2, value, keyExtractor, onSelect);
+  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 {
+    keyExtractor,
+    value,
+    isChecked,
+    onClickOption,
+    inputRef,
+    labelExtractor
+  };
+};
+
+exports.useMultiSelectOption = useMultiSelectOption;

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

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

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

@@ -0,0 +1,36 @@
+import { option, checkbox } from '@tecsinapse/cortex-core';
+import React__default from 'react';
+import { useMultiSelectOption } from './useMultiSelectOption.js';
+
+const SelectCustomMultiOption = ({
+  onSelect,
+  option: option$1,
+  grouped = false,
+  children
+}) => {
+  const { onClickOption, isChecked, inputRef } = useMultiSelectOption(
+    option$1,
+    onSelect
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      onClick: onClickOption,
+      className: option({ grouped }),
+      role: "option"
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: isChecked,
+        className: checkbox({ className: "pointer-events-none" }),
+        onChange: () => false,
+        ref: inputRef
+      }
+    ),
+    children
+  );
+};
+
+export { SelectCustomMultiOption };

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

@@ -31,7 +31,7 @@ const SelectMultiCheckAllOptions = ({
           updateSelected.splice(updateSelected.indexOf(it), 1);
         });
       }
-      onSelect(updateSelected);
+      onSelect?.(updateSelected);
     }
   }, [options, onSelect]);
   return options?.length ? /* @__PURE__ */ React__default.createElement("div", { className: option(), onClick: checkAll }, /* @__PURE__ */ React__default.createElement(

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

@@ -12,7 +12,6 @@ import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js'
 import { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
-import { handleSelectMulti } from './utils.js';
 
 const { groupedTitle, list } = selectVariants();
 const SelectMultiGroupedOptions = ({
@@ -21,7 +20,7 @@ const SelectMultiGroupedOptions = ({
   options,
   children
 }) => {
-  const { value: currentValue = [], keyExtractor } = useContext(SelectContext);
+  const { keyExtractor } = useContext(SelectContext);
   const { options: _options, isLoading } = useSelectGroupedOptions({ options });
   const flattenMap = useMemo(
     () => _options ? Array.from(_options?.values()).flatMap((value) => value) : [],
@@ -39,12 +38,7 @@ const SelectMultiGroupedOptions = ({
         grouped: true,
         option,
         key: keyExtractor(option),
-        onSelectOption: (option2) => handleSelectMulti(
-          option2,
-          currentValue,
-          onSelect,
-          keyExtractor
-        )
+        onSelect
       }
     )))))
   );

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

@@ -1,22 +1,13 @@
 import { option, checkbox } from '@tecsinapse/cortex-core';
-import React__default, { useContext, useRef, useMemo, useCallback } from 'react';
-import { SelectContext } from './context.js';
+import React__default from 'react';
+import { useMultiSelectOption } from './useMultiSelectOption.js';
 
 const SelectMultiOption = ({
-  onSelectOption,
+  onSelect,
   option: option$1,
   grouped = false
 }) => {
-  const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
-  const inputRef = useRef(null);
-  const isChecked = useMemo(
-    () => value?.length > 0 && value.find((it) => keyExtractor(it) === keyExtractor(option$1)) !== void 0,
-    [value, option$1]
-  );
-  const onClickOption = useCallback(() => {
-    onSelectOption(option$1);
-    inputRef.current?.click();
-  }, [onSelectOption, inputRef]);
+  const { onClickOption, isChecked, inputRef, labelExtractor } = useMultiSelectOption(option$1, onSelect);
   return /* @__PURE__ */ React__default.createElement(
     "li",
     {

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

@@ -12,7 +12,6 @@ import { useSelectOptions } from '../../hooks/useSelectOptions.js';
 import { SelectMultiOption } from './MultiOption.js';
 import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
-import { handleSelectMulti } from './utils.js';
 
 const { list } = selectVariants();
 const SelectMultiOptions = ({
@@ -20,14 +19,14 @@ const SelectMultiOptions = ({
   options,
   children
 }) => {
-  const { keyExtractor, value: currentValue = [] } = useContext(SelectContext);
+  const { keyExtractor } = useContext(SelectContext);
   const { options: _options, isLoading } = useSelectOptions({ options });
   return /* @__PURE__ */ React__default.createElement(SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options } }, isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, children, _options?.map((option) => /* @__PURE__ */ React__default.createElement(
     SelectMultiOption,
     {
       option,
       key: keyExtractor(option),
-      onSelectOption: (option2) => handleSelectMulti(option2, currentValue, onSelect, keyExtractor)
+      onSelect
     }
   ))));
 };

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

@@ -9,6 +9,7 @@ import { SelectPopover } from './Popover.js';
 import { SelectRoot } from './Root.js';
 import { SelectTrigger } from './Trigger.js';
 import { SelectCustomOption } from './CustomOption.js';
+import { SelectCustomMultiOption } from './CustomMultiOption.js';
 
 const Select = {
   Root: SelectRoot,
@@ -21,7 +22,8 @@ const Select = {
   MultiGroupedOptions: SelectMultiGroupedOptions,
   MultiOption: SelectMultiOption,
   MultiCheckAllOptions: SelectMultiCheckAllOptions,
-  CustomOption: SelectCustomOption
+  CustomOption: SelectCustomOption,
+  CustomMultiOption: SelectCustomMultiOption
 };
 
 export { Select };

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

@@ -0,0 +1,27 @@
+import { useContext, useRef, useMemo, useCallback } from 'react';
+import { SelectContext } from './context.js';
+import { handleSelectMulti } from './utils.js';
+
+const useMultiSelectOption = (option, onSelect) => {
+  const { keyExtractor, value, labelExtractor } = useContext(SelectContext);
+  const inputRef = useRef(null);
+  const onSelectOption = (option2) => handleSelectMulti(option2, value, keyExtractor, onSelect);
+  const isChecked = useMemo(
+    () => value?.length > 0 && value.find((it) => keyExtractor(it) === keyExtractor(option)) !== void 0,
+    [value, option]
+  );
+  const onClickOption = useCallback(() => {
+    onSelectOption(option);
+    inputRef.current?.click();
+  }, [onSelectOption, inputRef]);
+  return {
+    keyExtractor,
+    value,
+    isChecked,
+    onClickOption,
+    inputRef,
+    labelExtractor
+  };
+};
+
+export { useMultiSelectOption };

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

@@ -1,4 +1,4 @@
-const handleSelectMulti = (option, value, onSelect, keyExtractor) => {
+const handleSelectMulti = (option, value, keyExtractor, onSelect) => {
   const current = Array.from(value ?? []);
   const indexOf = current.findIndex(
     (it) => keyExtractor(it) === keyExtractor(option)
@@ -8,7 +8,7 @@ const handleSelectMulti = (option, value, onSelect, keyExtractor) => {
   } else {
     current.splice(indexOf, 1);
   }
-  onSelect(current);
+  onSelect?.(current);
 };
 
 export { handleSelectMulti };

package/dist/types/components/Select/CustomMultiOption.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CustomMultiOptionProps } from './types';
+export declare const SelectCustomMultiOption: <T>({ onSelect, option, grouped, children, }: CustomMultiOptionProps<T>) => React.JSX.Element;

package/dist/types/components/Select/MultiOption.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { SelectMultiOptionProps } from './types';
-export declare const SelectMultiOption: <T>({ onSelectOption, option, grouped, }: SelectMultiOptionProps<T>) => React.JSX.Element;
+export declare const SelectMultiOption: <T>({ onSelect, option, grouped, }: SelectMultiOptionProps<T>) => React.JSX.Element;

package/dist/types/components/Select/context.d.ts

@@ -8,7 +8,7 @@ interface SelectContextProps<T> {
 export declare const SelectContext: import("react").Context<SelectContextProps<any>>;
 interface SelectMultiOptionsContextProps<T> {
     options?: T[];
-    onSelect: (value: T[]) => void;
+    onSelect?: (value: T[]) => void;
 }
 export declare const SelectMultiOptionsContext: import("react").Context<SelectMultiOptionsContextProps<any>>;
 export {};

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

@@ -7,8 +7,9 @@ export declare const Select: {
     Option: <T>({ onSelectOption, option, grouped, }: import("./types").SelectOptionProps<T>) => import("react").JSX.Element;
     MultiOptions: <T>({ onSelect, options, children, }: import("./types").SelectMultiOptionsProps<T>) => import("react").JSX.Element;
     MultiGroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, children, }: import("./types").SelectMultiGroupedOptionsProps<T>) => import("react").JSX.Element;
-    MultiOption: <T>({ onSelectOption, option, grouped, }: import("./types").SelectMultiOptionProps<T>) => import("react").JSX.Element;
+    MultiOption: <T>({ onSelect, option, grouped, }: import("./types").SelectMultiOptionProps<T>) => import("react").JSX.Element;
     MultiCheckAllOptions: <T>({ checkAllLabel, }: import("./types").SelectMultiCheckAllOptionsProps) => import("react").JSX.Element;
     CustomOption: <T>({ option, onSelectOption, grouped, children, }: import("./types").CustomOptionProps<T>) => import("react").JSX.Element;
+    CustomMultiOption: <T>({ onSelect, option, grouped, children, }: import("./types").CustomMultiOptionProps<T>) => import("react").JSX.Element;
 };
 export * from './types';

package/dist/types/components/Select/types.d.ts

@@ -19,12 +19,15 @@ export interface SelectMultiGroupedOptionsProps<T> {
 }
 export interface SelectMultiOptionProps<T> {
     option: T;
-    onSelectOption: (option: T) => void;
+    onSelect?: (option: T[]) => void;
     grouped?: boolean;
 }
+export interface CustomMultiOptionProps<T> extends SelectMultiOptionProps<T> {
+    children?: ReactNode;
+}
 export interface SelectMultiOptionsProps<T> {
     options?: T[] | (() => Promise<T[]>);
-    onSelect: (value: T[]) => void;
+    onSelect?: (value: T[]) => void;
     children?: React.ReactNode;
 }
 export interface SelectOptionProps<T> {

package/dist/types/components/Select/useMultiSelectOption.d.ts

@@ -0,0 +1,8 @@
+export declare const useMultiSelectOption: <T>(option: T, onSelect?: (option: T[]) => void) => {
+    keyExtractor: (value: any) => string;
+    value: any;
+    isChecked: boolean;
+    onClickOption: () => void;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    labelExtractor: (value: any) => string;
+};

package/dist/types/components/Select/utils.d.ts

@@ -1 +1 @@
-export declare const handleSelectMulti: <T>(option: T, value: T[], onSelect: (value: T[]) => void, keyExtractor: (value: T) => string) => void;
+export declare const handleSelectMulti: <T>(option: T, value: T[], keyExtractor: (value: T) => string, onSelect?: (value: T[]) => void) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.13.0-beta.3",
+  "version": "1.13.0-beta.4",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -47,5 +47,5 @@
     "react-icons": ">=5.2.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "75b36ad4ff1d3db75ca3bde576583870440b53ea"
+  "gitHead": "de7f5e6b13c54069be4e5f2cb18bd7aa2f4af1c8"
 }