@tecsinapse/react-web-kit 3.5.0 → 3.5.1-beta.1

package/dist/cjs/components/molecules/Menubar/SearchResultItem/SearchResultItem.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var styled = require('./styled.js');
 var utils = require('./utils.js');
@@ -13,16 +13,19 @@ const SearchResultItem = ({
   const { title, category, Component, props } = data;
   const noTextDecoration = { textDecoration: "none" };
   const textProps = { fontColor: "orange", fontWeight: "bold" };
-  return /* @__PURE__ */ React.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React.createElement(styled.StyledSearchItemContainer, null, /* @__PURE__ */ React.createElement(reactCore.Text, { typography: "base", colorVariant: "secondary", colorTone: "dark" }, utils.highlight(searchTerm, title, styled.HighlightText, textProps)), /* @__PURE__ */ React.createElement(
-    reactCore.Text,
-    {
-      typography: "sub",
-      fontWeight: "bold",
-      colorVariant: "secondary",
-      colorTone: "medium"
-    },
-    category
-  )));
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, style: noTextDecoration, onClick: toggle, children: /* @__PURE__ */ jsxRuntime.jsxs(styled.StyledSearchItemContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { typography: "base", colorVariant: "secondary", colorTone: "dark", children: utils.highlight(searchTerm, title, styled.HighlightText, textProps) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactCore.Text,
+      {
+        typography: "sub",
+        fontWeight: "bold",
+        colorVariant: "secondary",
+        colorTone: "medium",
+        children: category
+      }
+    )
+  ] }) });
 };
 
 module.exports = SearchResultItem;

package/dist/cjs/components/molecules/Menubar/SearchResultItem/utils.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 const normalize = (str) => {
   return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[-[\]{}()*+?.,\\^$|#]/g, " ").toLowerCase();
@@ -31,7 +31,7 @@ const highlightReplacer = (searchTerm, textToReplace, Component, props) => {
   const indexes = matches.map((match) => match.index);
   const splited = matchSpliter(textToReplace, indexes, searchTerm.length);
   return splited.map((value, idx) => {
-    return normalize(value) === search ? /* @__PURE__ */ React.createElement(Component, { key: `highlight-${value}${idx}`, ...props }, value) : /* @__PURE__ */ React.createElement(React.Fragment, null, value);
+    return normalize(value) === search ? /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, children: value }, `highlight-${value}${idx}`) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value });
   });
 };
 const highlight = (searchTerm, textToReplace, Component, props) => {

package/dist/cjs/components/molecules/ScrollableMonthYearPicker/ScrollableMonthYearPicker.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var styled = require('./styled.js');
 var ScrollableDigit = require('../DateTimePickerSelector/components/ScrollableDigit.js');
@@ -54,30 +55,33 @@ const ScrollableMonthYearPicker = ({
     const selectedIndex = data.findIndex((item) => item === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
   };
-  return /* @__PURE__ */ React__namespace.createElement(styled.DivStyledColumn, null, /* @__PURE__ */ React__namespace.createElement(styled.DivStyledRow, null, /* @__PURE__ */ React__namespace.createElement(
-    ScrollableDigit,
-    {
-      data: months,
-      timeLabel: monthLabel ?? "Month",
-      handleTimeChange: handleMonthYearChange,
-      initialScrollIndex: getInitialScrollIndex(
-        months[date.getMonth()],
-        months
-      ),
-      updateType: "month",
-      currentTime: months[date.getMonth()]
-    }
-  ), /* @__PURE__ */ React__namespace.createElement(
-    ScrollableDigit,
-    {
-      data: years,
-      timeLabel: yearLabel ?? "Year",
-      handleTimeChange: handleMonthYearChange,
-      initialScrollIndex: getInitialScrollIndex(date.getFullYear(), years),
-      updateType: "year",
-      currentTime: date?.getFullYear().toString()
-    }
-  )));
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.DivStyledColumn, { children: /* @__PURE__ */ jsxRuntime.jsxs(styled.DivStyledRow, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollableDigit,
+      {
+        data: months,
+        timeLabel: monthLabel ?? "Month",
+        handleTimeChange: handleMonthYearChange,
+        initialScrollIndex: getInitialScrollIndex(
+          months[date.getMonth()],
+          months
+        ),
+        updateType: "month",
+        currentTime: months[date.getMonth()]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollableDigit,
+      {
+        data: years,
+        timeLabel: yearLabel ?? "Year",
+        handleTimeChange: handleMonthYearChange,
+        initialScrollIndex: getInitialScrollIndex(date.getFullYear(), years),
+        updateType: "year",
+        currentTime: date?.getFullYear().toString()
+      }
+    )
+  ] }) });
 };
 
 module.exports = ScrollableMonthYearPicker;

package/dist/cjs/components/molecules/ScrollableTimePicker/ScrollableTimePicker.js

@@ -1,29 +1,10 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var ScrollableDigit = require('../DateTimePickerSelector/components/ScrollableDigit.js');
 require('../DateTimePickerSelector/components/MemoizedTimeCard.js');
 var styled = require('./styled.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 const ScrollableTimePicker = ({
   date,
   setDate,
@@ -45,33 +26,36 @@ const ScrollableTimePicker = ({
     const selectedIndex = data.findIndex((item) => item === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
   };
-  return /* @__PURE__ */ React__namespace.createElement(styled.DivStyledColumn, null, /* @__PURE__ */ React__namespace.createElement(styled.DivStyledRow, null, /* @__PURE__ */ React__namespace.createElement(
-    ScrollableDigit,
-    {
-      data: hours,
-      timeLabel: hourLabel ?? "Hour",
-      handleTimeChange,
-      currentTime: date?.getHours().toString(),
-      updateType: "hour",
-      initialScrollIndex: getInitialScrollIndex(
-        date.getHours().toString(),
-        hours
-      )
-    }
-  ), /* @__PURE__ */ React__namespace.createElement(
-    ScrollableDigit,
-    {
-      data: minutes,
-      timeLabel: minuteLabel ?? "Minute",
-      updateType: "minute",
-      currentTime: date?.getMinutes().toString(),
-      handleTimeChange,
-      initialScrollIndex: getInitialScrollIndex(
-        date.getMinutes().toString(),
-        minutes
-      )
-    }
-  )));
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.DivStyledColumn, { children: /* @__PURE__ */ jsxRuntime.jsxs(styled.DivStyledRow, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollableDigit,
+      {
+        data: hours,
+        timeLabel: hourLabel ?? "Hour",
+        handleTimeChange,
+        currentTime: date?.getHours().toString(),
+        updateType: "hour",
+        initialScrollIndex: getInitialScrollIndex(
+          date.getHours().toString(),
+          hours
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollableDigit,
+      {
+        data: minutes,
+        timeLabel: minuteLabel ?? "Minute",
+        updateType: "minute",
+        currentTime: date?.getMinutes().toString(),
+        handleTimeChange,
+        initialScrollIndex: getInitialScrollIndex(
+          date.getMinutes().toString(),
+          minutes
+        )
+      }
+    )
+  ] }) });
 };
 
 module.exports = ScrollableTimePicker;

package/dist/cjs/components/molecules/Select/Dropdown/Dropdown.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactCore = require('@tecsinapse/react-core');
 var SelectItem = require('../SelectItem/SelectItem.js');
@@ -46,56 +47,60 @@ const Component = ({
     (text) => setSearchArg(text),
     [setSearchArg]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     styled.StyledContainerDropdown,
     {
       lengthOptions,
       style,
       anchor,
-      ref
-    },
-    type === "multi" && /* @__PURE__ */ React.createElement(
-      styled.StyledContainerCheckAll,
-      {
-        onClick: hideSearchBar ? onClickCheckAll : void 0
-      },
-      /* @__PURE__ */ React.createElement(reactCore.Checkbox, { checked: checkedAll, onChange: onClickCheckAll }),
-      !hideSearchBar ? /* @__PURE__ */ React.createElement(styled.SearchBarContainer, null, /* @__PURE__ */ React.createElement(
-        SearchInput,
-        {
-          searchArg,
-          onChange,
-          fullWidth,
-          placeholder: searchBarPlaceholder
-        }
-      )) : /* @__PURE__ */ React.createElement(styled.StyledContainerTextLabel, null, /* @__PURE__ */ React.createElement(reactCore.Text, { fontWeight: "bold" }, /* @__PURE__ */ React.createElement(styled.StyledSpan, null, selectAllLabel)))
-    ),
-    type === "single" && !hideSearchBar && /* @__PURE__ */ React.createElement(styled.PaddedContainer, null, /* @__PURE__ */ React.createElement(
-      SearchInput,
-      {
-        searchArg,
-        onChange,
-        fullWidth,
-        placeholder: searchBarPlaceholder
-      }
-    )),
-    /* @__PURE__ */ React.createElement(styled.OptionsContainer, { lengthOptions: options.length }, options.map((item, index) => /* @__PURE__ */ React.createElement(
-      SelectItem,
-      {
-        type,
-        key: keyExtractor(item),
-        item,
-        onSelect,
-        value,
-        keyExtractor,
-        index,
-        labelExtractor,
-        setDropDownVisible,
-        checkedAll,
-        setCheckedAll,
-        lenghtOptions: lengthOptions
-      }
-    )))
+      ref,
+      children: [
+        type === "multi" && /* @__PURE__ */ jsxRuntime.jsxs(
+          styled.StyledContainerCheckAll,
+          {
+            onClick: hideSearchBar ? onClickCheckAll : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactCore.Checkbox, { checked: checkedAll, onChange: onClickCheckAll }),
+              !hideSearchBar ? /* @__PURE__ */ jsxRuntime.jsx(styled.SearchBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                SearchInput,
+                {
+                  searchArg,
+                  onChange,
+                  fullWidth,
+                  placeholder: searchBarPlaceholder
+                }
+              ) }) : /* @__PURE__ */ jsxRuntime.jsx(styled.StyledContainerTextLabel, { children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { fontWeight: "bold", children: /* @__PURE__ */ jsxRuntime.jsx(styled.StyledSpan, { children: selectAllLabel }) }) })
+            ]
+          }
+        ),
+        type === "single" && !hideSearchBar && /* @__PURE__ */ jsxRuntime.jsx(styled.PaddedContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          SearchInput,
+          {
+            searchArg,
+            onChange,
+            fullWidth,
+            placeholder: searchBarPlaceholder
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.OptionsContainer, { lengthOptions: options.length, children: options.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          SelectItem,
+          {
+            type,
+            item,
+            onSelect,
+            value,
+            keyExtractor,
+            index,
+            labelExtractor,
+            setDropDownVisible,
+            checkedAll,
+            setCheckedAll,
+            lenghtOptions: lengthOptions
+          },
+          keyExtractor(item)
+        )) })
+      ]
+    }
   );
 };
 const Dropdown = React.forwardRef(Component);

package/dist/cjs/components/molecules/Select/Dropdown/components/SearchInput.js

@@ -1,10 +1,11 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactCore = require('@tecsinapse/react-core');
 var Input = require('../../../../atoms/Input/Input.js');
 
-const InputIcon = /* @__PURE__ */ React.createElement(
+const InputIcon = /* @__PURE__ */ jsxRuntime.jsx(
   reactCore.Icon,
   {
     name: "magnify",
@@ -14,7 +15,7 @@ const InputIcon = /* @__PURE__ */ React.createElement(
   }
 );
 const SearchInput = ({ fullWidth, searchArg, onChange, placeholder }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Input,
     {
       style: fullWidth,

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
@@ -36,7 +37,7 @@ const Select = ({
   const refDropDown = React.useRef(null);
   const transitionRef = React.useRef(null);
   useClickAwayListener.useClickAwayListener(refDropDown, setDropDownVisible);
-  const _hint = hintComponent || /* @__PURE__ */ React.createElement(reactCore.Hint, { text: hint, variant });
+  const _hint = hintComponent || /* @__PURE__ */ jsxRuntime.jsx(reactCore.Hint, { text: hint, variant });
   const instanceid = React.useId();
   React.useEffect(() => {
     if (typeof options !== "function") {
@@ -108,7 +109,7 @@ const Select = ({
     [setDropDownVisible]
   );
   const RightComponent = React.useMemo(
-    () => /* @__PURE__ */ React.createElement(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
       styled.StyledIconComponent,
       {
         name: "chevron-down",
@@ -119,52 +120,56 @@ const Select = ({
     ),
     [disabled]
   );
-  return /* @__PURE__ */ React.createElement(styled.StyledContainer, { ref: refDropDown, ...rest }, /* @__PURE__ */ React.createElement(styled.StyledInputContainer, { onFocus: handlePressInput }, /* @__PURE__ */ React.createElement(
-    reactCore.PressableInputContainer,
-    {
-      label: _label,
-      onPress,
-      disabled,
-      rightComponent: RightComponent
-    },
-    /* @__PURE__ */ React.createElement(
-      reactCore.Text,
-      {
-        ...displayTextProps,
-        colorTone: _valueColorTone,
-        colorVariant: _valueColorVariant,
-        fontWeight: "bold"
-      },
-      displayValue
-    )
-  )), /* @__PURE__ */ React.createElement(styled.StyledHintContainer, null, _hint), /* @__PURE__ */ React.createElement(
-    reactTransitionGroup.Transition,
-    {
-      in: dropDownVisible,
-      timeout: 300,
-      nodeRef: transitionRef,
-      key: instanceid
-    },
-    (state) => /* @__PURE__ */ React.createElement(
-      Dropdown,
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.StyledContainer, { ref: refDropDown, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(styled.StyledInputContainer, { onFocus: handlePressInput, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactCore.PressableInputContainer,
       {
-        ref: transitionRef,
-        options: selectOptions ?? [],
-        onSelect,
-        value,
-        type,
-        keyExtractor,
-        labelExtractor,
-        hideSearchBar,
-        searchBarPlaceholder,
-        onSearch: handleOnSearch,
-        style: { ...animations.defaultStyles, ...animations.transition[anchor][state] },
-        setDropDownVisible,
-        anchor,
-        selectAllLabel
+        label: _label,
+        onPress,
+        disabled,
+        rightComponent: RightComponent,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactCore.Text,
+          {
+            ...displayTextProps,
+            colorTone: _valueColorTone,
+            colorVariant: _valueColorVariant,
+            fontWeight: "bold",
+            children: displayValue
+          }
+        )
       }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(styled.StyledHintContainer, { children: _hint }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactTransitionGroup.Transition,
+      {
+        in: dropDownVisible,
+        timeout: 300,
+        nodeRef: transitionRef,
+        children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+          Dropdown,
+          {
+            ref: transitionRef,
+            options: selectOptions ?? [],
+            onSelect,
+            value,
+            type,
+            keyExtractor,
+            labelExtractor,
+            hideSearchBar,
+            searchBarPlaceholder,
+            onSearch: handleOnSearch,
+            style: { ...animations.defaultStyles, ...animations.transition[anchor][state] },
+            setDropDownVisible,
+            anchor,
+            selectAllLabel
+          }
+        )
+      },
+      instanceid
     )
-  ));
+  ] });
 };
 
 module.exports = Select;

package/dist/cjs/components/molecules/Select/SelectItem/SelectItem.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactCore = require('@tecsinapse/react-core');
 var styled = require('./styled.js');
@@ -62,7 +63,10 @@ const SelectItem = ({
     },
     [onSelect, setDropDownVisible, setCheckedAll, setChecked, checked]
   );
-  return /* @__PURE__ */ React.createElement(styled.ContainerItemSelect, { onClick: () => clickItem(item, value) }, isMulti && /* @__PURE__ */ React.createElement(reactCore.Checkbox, { checked, onChange: () => clickItem(item, value) }), /* @__PURE__ */ React.createElement(styled.StyledContainerTextLabel, null, /* @__PURE__ */ React.createElement(reactCore.Text, { fontWeight: "bold", ellipsizeMode: "tail", numberOfLines: 1 }, /* @__PURE__ */ React.createElement(styled.StyledSpan, { singleHighligh: type === "single" && value === item }, labelExtractor(item)))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.ContainerItemSelect, { onClick: () => clickItem(item, value), children: [
+    isMulti && /* @__PURE__ */ jsxRuntime.jsx(reactCore.Checkbox, { checked, onChange: () => clickItem(item, value) }),
+    /* @__PURE__ */ jsxRuntime.jsx(styled.StyledContainerTextLabel, { children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { fontWeight: "bold", ellipsizeMode: "tail", numberOfLines: 1, children: /* @__PURE__ */ jsxRuntime.jsx(styled.StyledSpan, { singleHighligh: type === "single" && value === item, children: labelExtractor(item) }) }) })
+  ] });
 };
 var ItemSelect = React.memo(SelectItem);
 

package/dist/cjs/components/molecules/Snackbar/Snackbar.js

@@ -1,7 +1,7 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
-var React = require('react');
 var styled = require('./styled.js');
 
 const Snackbar = ({
@@ -9,7 +9,7 @@ const Snackbar = ({
   textProps = { colorVariant: "primary", colorTone: "medium" },
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(styled.SnackbarStyled, { ...rest, showProgressBar: false }, /* @__PURE__ */ React.createElement(reactCore.Text, { fontWeight: "bold", typography: "base", ...textProps }, value));
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.SnackbarStyled, { ...rest, showProgressBar: false, children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { fontWeight: "bold", typography: "base", ...textProps, children: value }) });
 };
 
 module.exports = Snackbar;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var styled = require('./styled.js');
 
@@ -35,7 +35,7 @@ const TextArea = ({
     onBlur,
     !disabled
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     reactCore.TextArea,
     {
       label,
@@ -59,23 +59,23 @@ const TextArea = ({
       hint,
       style,
       TextComponent: reactCore.Text,
-      maxLength
-    },
-    /* @__PURE__ */ React.createElement(
-      styled.StyledWebInput,
-      {
-        ...rest,
-        fontStack: inputFontStack,
-        fontWeight: inputFontWeight,
-        disabled,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        textAlignVertical: "top",
-        multiline: true,
-        value,
-        maxLength
-      }
-    )
+      maxLength,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        styled.StyledWebInput,
+        {
+          ...rest,
+          fontStack: inputFontStack,
+          fontWeight: inputFontWeight,
+          disabled,
+          onFocus: handleFocus,
+          onBlur: handleBlur,
+          textAlignVertical: "top",
+          multiline: true,
+          value,
+          maxLength
+        }
+      )
+    }
   );
 };