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

package/dist/cjs/components/DatePicker/DatePickerInput.js

@@ -11,9 +11,10 @@ require('react-dropzone');
 require('uuid');
 require('@floating-ui/react');
 require('currency.js');
+require('../Popover/Context.js');
 var Calendar = require('../Calendar/Calendar.js');
 var index = require('../Popover/index.js');
-var Content = require('../Select/Content.js');
+var Content = require('../Content.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
 
@@ -66,7 +67,7 @@ const DatePickerInputWithPopover = (props) => {
   )), /* @__PURE__ */ React.createElement(
     index.Popover.Content,
     {
-      className: "bg-inherit shadow-none border-none",
+      className: "bg-inherit shadow-lg border-none",
       initialFocus: -1
     },
     /* @__PURE__ */ React.createElement(Calendar.Calendar, { value, onChange: handleChangeCalendar })

package/dist/cjs/components/DatePicker/DateRangePickerInput.js

@@ -11,9 +11,10 @@ require('react-dropzone');
 require('uuid');
 require('@floating-ui/react');
 require('currency.js');
+require('../Popover/Context.js');
 var RangeCalendar = require('../Calendar/RangeCalendar.js');
 var index = require('../Popover/index.js');
-var Content = require('./Content.js');
+var Content = require('../Content.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
 
@@ -79,7 +80,7 @@ const DateRangePickerInputWithPopover = (props) => {
   )), /* @__PURE__ */ React.createElement(
     index.Popover.Content,
     {
-      className: "bg-inherit shadow-none border-none",
+      className: "bg-inherit shadow-lg border-none",
       initialFocus: -1
     },
     /* @__PURE__ */ React.createElement(RangeCalendar.RangeCalendar, { value, onChange: handleChangeCalendar })

package/dist/cjs/components/ScrollableDigitSelector.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+
+const formatValue = (val) => {
+  return val.toString().padStart(2, "0");
+};
+const ScrollableDigitSelector = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1
+}) => {
+  const containerRef = React.useRef(null);
+  const values = React.useMemo(() => {
+    const vals = [];
+    for (let i = min; i <= max; i += step) {
+      vals.push(i);
+    }
+    return vals;
+  }, [min, max, step]);
+  const scrollToValue = (targetValue) => {
+    if (containerRef.current) {
+      const index = values.indexOf(targetValue);
+      if (index !== -1) {
+        const itemHeight = 27;
+        const scrollTop = index * itemHeight;
+        containerRef.current.scrollTop = scrollTop;
+        containerRef.current.scrollTo({ top: scrollTop, behavior: "smooth" });
+      }
+    }
+  };
+  React.useEffect(() => {
+    scrollToValue(value);
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "flex flex-col items-center gap-y-micro p-micro overflow-auto",
+      ref: containerRef
+    },
+    values.map((val) => /* @__PURE__ */ React.createElement("div", { key: val }, /* @__PURE__ */ React.createElement("div", { onClick: () => onChange(val), className: "flex justify-center" }, /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: clsx(
+          "p-micro rounded-micro border-1 border-transparent hover:bg-primary-light hover:border-primary cursor-pointer",
+          value === val && "bg-primary-medium text-white"
+        )
+      },
+      formatValue(val)
+    ))))
+  );
+};
+
+exports.ScrollableDigitSelector = ScrollableDigitSelector;

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/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/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/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,8 @@ 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');
+var CustomMultiOption = require('./CustomMultiOption.js');
 
 const Select = {
   Root: Root.SelectRoot,
@@ -21,7 +23,9 @@ const Select = {
   MultiOptions: MultiOptions.SelectMultiOptions,
   MultiGroupedOptions: MultiGroupedOptions.SelectMultiGroupedOptions,
   MultiOption: MultiOption.SelectMultiOption,
-  MultiCheckAllOptions: MultiCheckAllOptions.SelectMultiCheckAllOptions
+  MultiCheckAllOptions: MultiCheckAllOptions.SelectMultiCheckAllOptions,
+  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/cjs/components/TimePicker/TimeField.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var React = require('react');
+var reactAria = require('react-aria');
+var reactStately = require('react-stately');
+var DateSegment = require('../DatePicker/DateSegment.js');
+
+const formatLiteralSegment = (text) => {
+  return text.includes(",") ? text.replace(/,/g, " ") : text;
+};
+const TimeField = ({ onClickTime, ...props }) => {
+  const { value } = props;
+  const { locale } = reactAria.useLocale();
+  const state = reactStately.useTimeFieldState({
+    ...props,
+    locale,
+    shouldForceLeadingZeros: true
+  });
+  const ref = React.useRef(null);
+  const { fieldProps } = reactAria.useTimeField(
+    { "aria-label": "time-field" },
+    state,
+    ref
+  );
+  const handleOnClickSegment = React.useCallback(
+    (segment) => {
+      if (!segment.isEditable || state.isDisabled) return;
+      if (["hour", "minute", "second", "dayPeriod"].includes(segment.type)) {
+        onClickTime?.();
+      }
+    },
+    [onClickTime, state.isDisabled]
+  );
+  React.useEffect(() => {
+    if (!value) {
+      state.setValue(null);
+    }
+  }, [value]);
+  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => {
+    if (segment.type === "literal") {
+      const text = formatLiteralSegment(segment.text);
+      return /* @__PURE__ */ React.createElement("span", { key: i, style: { whiteSpace: "pre" } }, text);
+    }
+    return /* @__PURE__ */ React.createElement("div", { key: i, onClick: () => handleOnClickSegment(segment) }, /* @__PURE__ */ React.createElement(DateSegment.DateSegment, { segment, state }));
+  }));
+};
+
+exports.TimeField = TimeField;

package/dist/cjs/components/TimePicker/TimeFieldInput.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+var index = require('../Input/index.js');
+var lia = require('react-icons/lia');
+var timeFieldInput = require('../../styles/time-field-input.js');
+var io = require('react-icons/io');
+var TimeField = require('./TimeField.js');
+
+const { icon } = timeFieldInput.timePickerInputBase();
+const TimeFieldInput = ({
+  variants,
+  label,
+  disabled = false,
+  value,
+  onChange,
+  onToggle,
+  onClean,
+  hourCycle,
+  granularity
+}) => {
+  const showCloseIcon = React.useMemo(() => {
+    const hasTime = value != void 0;
+    return hasTime;
+  }, [value]);
+  return /* @__PURE__ */ React.createElement(
+    index.Input.Face,
+    {
+      variants,
+      className: "flex flex-row justify-between",
+      "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.TimeField,
+      {
+        onClickTime: onToggle,
+        disabled,
+        value,
+        onChange,
+        hourCycle,
+        granularity
+      }
+    )),
+    /* @__PURE__ */ React.createElement(index.Input.Right, { className: "h-full justify-center" }, showCloseIcon ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "flex bg-transparent items-center",
+        onClick: onClean,
+        disabled,
+        "data-testid": "time-picker-input-base-clean-button",
+        type: "button"
+      },
+      /* @__PURE__ */ React.createElement(
+        io.IoMdClose,
+        {
+          className: icon({ disabled }),
+          "data-testid": "time-picker-input-base-clean-icon"
+        }
+      )
+    ) : /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "flex bg-transparent items-center",
+        onClick: onToggle,
+        disabled,
+        "data-testid": "time-picker-input-base-calendar-button",
+        type: "button"
+      },
+      /* @__PURE__ */ React.createElement(
+        lia.LiaClock,
+        {
+          className: icon({ disabled }),
+          "data-testid": "time-picker-input-base-calendar-icon"
+        }
+      )
+    ))
+  );
+};
+
+exports.TimeFieldInput = TimeFieldInput;

package/dist/cjs/components/TimePicker/TimePickerInput.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('../Popover/Context.js');
+require('react-dropzone');
+require('uuid');
+require('@floating-ui/react');
+require('currency.js');
+var useTimePickerInput = require('../../hooks/useTimePickerInput.js');
+var index = require('../Popover/index.js');
+var Content = require('../Content.js');
+var TimeFieldInput = require('./TimeFieldInput.js');
+var TimePickerSelector = require('./TimePickerSelector.js');
+
+const TimePickerInputWithPopover = (props) => {
+  const {
+    onChange,
+    value,
+    label,
+    variants,
+    hourCycle = 24,
+    disabled = false,
+    granularity = "minute",
+    minuteInterval = 1,
+    hourLabel,
+    minuteLabel,
+    dayPeriodLabel
+  } = props;
+  const {
+    handleTogglePopover,
+    handleTimeFieldChange,
+    handleChangeTimeOnSelector,
+    popoverTime
+  } = useTimePickerInput.useTimePickerInput({
+    value,
+    onChange,
+    minuteInterval
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(index.Popover.Trigger, { disabled: true }, /* @__PURE__ */ React.createElement(
+    TimeFieldInput.TimeFieldInput,
+    {
+      variants,
+      label,
+      disabled,
+      value,
+      onChange: handleTimeFieldChange,
+      onClean: () => handleTimeFieldChange(null),
+      onToggle: handleTogglePopover,
+      hourCycle,
+      granularity
+    }
+  )), /* @__PURE__ */ React.createElement(
+    index.Popover.Content,
+    {
+      className: "bg-white shadow-lg border-none p-deca flex flex-col",
+      initialFocus: -1
+    },
+    /* @__PURE__ */ React.createElement(
+      TimePickerSelector.TimePickerSelector,
+      {
+        onChangeTime: handleChangeTimeOnSelector,
+        value: popoverTime,
+        hourCycle,
+        minuteInterval,
+        onPressOkButton: handleTogglePopover,
+        hourLabel,
+        minuteLabel,
+        dayPeriodLabel
+      }
+    )
+  ));
+};
+const TimePickerInput = (props) => /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React.createElement(Content.Content, null, /* @__PURE__ */ React.createElement(TimePickerInputWithPopover, { ...props })));
+
+exports.TimePickerInput = TimePickerInput;