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

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

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

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

@@ -18,26 +18,31 @@ var context = require('./context.js');
 const { list } = cortexCore.selectVariants();
 const SelectOptions = ({
   onSelect,
-  options
+  options,
+  children
 }) => {
   const { keyExtractor } = React.useContext(context.SelectContext);
   const { setIsOpen } = Context.usePopoverContext();
   const { options: _options, isLoading } = useSelectOptions.useSelectOptions({ options });
   const handleSelect = React.useCallback(
     (option) => {
-      onSelect(option);
+      onSelect?.(option);
       setIsOpen?.(false);
     },
     [onSelect]
   );
-  return isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, _options?.map((option) => /* @__PURE__ */ React.createElement(
-    Option.SelectOption,
-    {
-      option,
-      key: keyExtractor(option),
-      onSelectOption: handleSelect
-    }
-  )));
+  const defaultOptions = React.useMemo(
+    () => _options?.map((option) => /* @__PURE__ */ React.createElement(
+      Option.SelectOption,
+      {
+        option,
+        key: keyExtractor(option),
+        onSelectOption: handleSelect
+      }
+    )) ?? [],
+    [_options, keyExtractor, handleSelect]
+  );
+  return isLoading ? /* @__PURE__ */ React.createElement(SkeletonOptions.SkeletonOptions, null) : /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children ?? defaultOptions);
 };
 
 exports.SelectOptions = SelectOptions;

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

@@ -10,6 +10,7 @@ var Options = require('./Options.js');
 var Popover = require('./Popover.js');
 var Root = require('./Root.js');
 var Trigger = require('./Trigger.js');
+var CustomOption = require('./CustomOption.js');
 
 const Select = {
   Root: Root.SelectRoot,
@@ -21,7 +22,8 @@ const Select = {
   MultiOptions: MultiOptions.SelectMultiOptions,
   MultiGroupedOptions: MultiGroupedOptions.SelectMultiGroupedOptions,
   MultiOption: MultiOption.SelectMultiOption,
-  MultiCheckAllOptions: MultiCheckAllOptions.SelectMultiCheckAllOptions
+  MultiCheckAllOptions: MultiCheckAllOptions.SelectMultiCheckAllOptions,
+  CustomOption: CustomOption.SelectCustomOption
 };
 
 exports.Select = Select;

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

@@ -0,0 +1,29 @@
+import React__default, { useContext } from 'react';
+import { SelectContext } from './context.js';
+import { option } from '@tecsinapse/cortex-core';
+
+const SelectCustomOption = ({
+  option: option$1,
+  onSelectOption,
+  grouped = false,
+  children
+}) => {
+  const { keyExtractor, value } = useContext(SelectContext);
+  return /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      onClick: (e) => {
+        e.preventDefault();
+        onSelectOption(option$1);
+      },
+      className: option({
+        selected: value && keyExtractor(value) === keyExtractor(option$1),
+        grouped
+      }),
+      role: "option"
+    },
+    children
+  );
+};
+
+export { SelectCustomOption };

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

@@ -1,5 +1,5 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React__default, { useContext, useCallback } from 'react';
+import React__default, { useContext, useCallback, useMemo } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
@@ -16,26 +16,31 @@ import { SelectContext } from './context.js';
 const { list } = selectVariants();
 const SelectOptions = ({
   onSelect,
-  options
+  options,
+  children
 }) => {
   const { keyExtractor } = useContext(SelectContext);
   const { setIsOpen } = usePopoverContext();
   const { options: _options, isLoading } = useSelectOptions({ options });
   const handleSelect = useCallback(
     (option) => {
-      onSelect(option);
+      onSelect?.(option);
       setIsOpen?.(false);
     },
     [onSelect]
   );
-  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, _options?.map((option) => /* @__PURE__ */ React__default.createElement(
-    SelectOption,
-    {
-      option,
-      key: keyExtractor(option),
-      onSelectOption: handleSelect
-    }
-  )));
+  const defaultOptions = useMemo(
+    () => _options?.map((option) => /* @__PURE__ */ React__default.createElement(
+      SelectOption,
+      {
+        option,
+        key: keyExtractor(option),
+        onSelectOption: handleSelect
+      }
+    )) ?? [],
+    [_options, keyExtractor, handleSelect]
+  );
+  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, children ?? defaultOptions);
 };
 
 export { SelectOptions };

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

@@ -8,6 +8,7 @@ import { SelectOptions } from './Options.js';
 import { SelectPopover } from './Popover.js';
 import { SelectRoot } from './Root.js';
 import { SelectTrigger } from './Trigger.js';
+import { SelectCustomOption } from './CustomOption.js';
 
 const Select = {
   Root: SelectRoot,
@@ -19,7 +20,8 @@ const Select = {
   MultiOptions: SelectMultiOptions,
   MultiGroupedOptions: SelectMultiGroupedOptions,
   MultiOption: SelectMultiOption,
-  MultiCheckAllOptions: SelectMultiCheckAllOptions
+  MultiCheckAllOptions: SelectMultiCheckAllOptions,
+  CustomOption: SelectCustomOption
 };
 
 export { Select };

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

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

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { SelectOptionsProps } from './types';
-export declare const SelectOptions: <T>({ onSelect, options, }: SelectOptionsProps<T>) => React.JSX.Element;
+export declare const SelectOptions: <T>({ onSelect, options, children, }: SelectOptionsProps<T>) => React.JSX.Element;

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

@@ -2,12 +2,13 @@ export declare const Select: {
     Root: <T>({ children, value, keyExtractor, labelExtractor, className, }: import("./types").SelectRootProps<T>) => import("react").JSX.Element;
     Trigger: ({ label, placeholder, disabled, multiLabelSelected, ...rest }: import("./types").SelectTriggerProps) => import("react").JSX.Element;
     Popover: ({ children }: import("./types").SelectPopoverProps) => import("react").JSX.Element;
-    Options: <T>({ onSelect, options, }: import("./types").SelectOptionsProps<T>) => import("react").JSX.Element;
+    Options: <T>({ onSelect, options, children, }: import("./types").SelectOptionsProps<T>) => import("react").JSX.Element;
     GroupedOptions: <T>({ onSelect, groupedLabelExtractor, options, }: import("./types").SelectGroupedOptionsProps<T>) => import("react").JSX.Element;
     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;
     MultiCheckAllOptions: <T>({ checkAllLabel, }: import("./types").SelectMultiCheckAllOptionsProps) => import("react").JSX.Element;
+    CustomOption: <T>({ option, onSelectOption, grouped, children, }: import("./types").CustomOptionProps<T>) => import("react").JSX.Element;
 };
 export * from './types';

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

@@ -32,9 +32,13 @@ export interface SelectOptionProps<T> {
     onSelectOption: (option: T) => void;
     grouped?: boolean;
 }
+export interface CustomOptionProps<T> extends SelectOptionProps<T> {
+    children?: ReactNode;
+}
 export interface SelectOptionsProps<T> {
     options?: T[] | (() => Promise<T[]>);
-    onSelect: (value: T) => void;
+    onSelect?: (value: T) => void;
+    children?: ReactNode;
 }
 export interface SelectPopoverProps {
     children: ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.13.0-beta.1",
+  "version": "1.13.0-beta.3",
   "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": "63a5eb0b70ad18f30ecd015e420aa8b4f4fdc2bd"
+  "gitHead": "75b36ad4ff1d3db75ca3bde576583870440b53ea"
 }