@onesy/ui-react 1.0.163 → 1.0.165

package/esm/Checkbox/Checkbox.js

@@ -5,6 +5,7 @@ const _excluded = ["noFontSizeDownScale", "Component", "className", "style", "ch
   _excluded2 = ["tonal", "color", "version", "size", "colorIndeterminate", "colorUnchecked", "valueDefault", "checkedDefault", "value", "checked", "onChange", "indeterminate", "disabled", "inputRef", "Component", "className", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -13,13 +14,30 @@ import { IconDoneAnimated } from '../Buttons/Buttons';
 import { staticClassName } from '../utils';
 import Icon from '../Icon';
 const IconMaterialIndeterminateCheckBox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    ref: ref,
-    name: "IndeterminateCheckBox",
-    short_name: "IndeterminateCheckBox"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M7 13H17V11H7V13Z"
-  }));
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /*#__PURE__*/React.createElement("path", {
+      d: "M7 13H17V11H7V13Z"
+    });
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  let t1;
+  if ($[1] !== props || $[2] !== ref) {
+    t1 = /*#__PURE__*/React.createElement(Icon, _extends({
+      ref: ref,
+      name: "IndeterminateCheckBox",
+      short_name: "IndeterminateCheckBox"
+    }, props), t0);
+    $[1] = props;
+    $[2] = ref;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
 });
 const useStyle = styleMethod(theme => ({
   root: {
@@ -158,31 +176,118 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Checkbox'
 });
 const IconItem = props => {
-  const {
+  const $ = _c(21);
+  let children;
+  let className;
+  let noFontSizeDownScale;
+  let other;
+  let style;
+  let t0;
+  if ($[0] !== props) {
+    var _props = props;
+    ({
       noFontSizeDownScale,
-      Component = 'span',
+      Component: t0,
       className,
       style,
       children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const styles = {
-    root: {}
-  };
-  const size = ['very small', 'small', 'regular', 'medium', 'large', 'very large'].includes(props.size) ? props.size : 'small';
-  let fontSize = '1.5rem';
-  if (size === 'very small') fontSize = '0.75rem';else if (size === 'small') fontSize = '1.125rem';else if (size === 'regular') fontSize = '1.5rem';else if (size === 'medium') fontSize = '2.25rem';else if (size === 'large') fontSize = '3rem';else if (size === 'very large') fontSize = '3.75rem';
-  styles.root.fontSize = `calc(${fontSize} * 0.75)`;
-  if (noFontSizeDownScale) styles.root.fontSize = fontSize;
-  return /*#__PURE__*/React.createElement(Component, {
-    className: className,
-    style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, children && /*#__PURE__*/React.cloneElement(children, _objectSpread({}, other)));
+    } = _props);
+    other = _objectWithoutProperties(_props, _excluded);
+    _props;
+    $[0] = props;
+    $[1] = children;
+    $[2] = className;
+    $[3] = noFontSizeDownScale;
+    $[4] = other;
+    $[5] = style;
+    $[6] = t0;
+  } else {
+    children = $[1];
+    className = $[2];
+    noFontSizeDownScale = $[3];
+    other = $[4];
+    style = $[5];
+    t0 = $[6];
+  }
+  const Component = t0 === undefined ? "span" : t0;
+  let styles;
+  if ($[7] !== noFontSizeDownScale || $[8] !== props.size) {
+    styles = {
+      root: {}
+    };
+    const size = ["very small", "small", "regular", "medium", "large", "very large"].includes(props.size) ? props.size : "small";
+    let fontSize = "1.5rem";
+    if (size === "very small") {
+      fontSize = "0.75rem";
+    } else {
+      if (size === "small") {
+        fontSize = "1.125rem";
+      } else {
+        if (size === "regular") {
+          fontSize = "1.5rem";
+        } else {
+          if (size === "medium") {
+            fontSize = "2.25rem";
+          } else {
+            if (size === "large") {
+              fontSize = "3rem";
+            } else {
+              if (size === "very large") {
+                fontSize = "3.75rem";
+              }
+            }
+          }
+        }
+      }
+    }
+    styles.root.fontSize = `calc(${fontSize} * 0.75)`;
+    if (noFontSizeDownScale) {
+      styles.root.fontSize = fontSize;
+    }
+    $[7] = noFontSizeDownScale;
+    $[8] = props.size;
+    $[9] = styles;
+  } else {
+    styles = $[9];
+  }
+  let t1;
+  if ($[10] !== style || $[11] !== styles.root) {
+    t1 = _objectSpread(_objectSpread({}, style), styles.root);
+    $[10] = style;
+    $[11] = styles.root;
+    $[12] = t1;
+  } else {
+    t1 = $[12];
+  }
+  let t2;
+  if ($[13] !== children || $[14] !== other) {
+    t2 = children && /*#__PURE__*/React.cloneElement(children, _objectSpread({}, other));
+    $[13] = children;
+    $[14] = other;
+    $[15] = t2;
+  } else {
+    t2 = $[15];
+  }
+  let t3;
+  if ($[16] !== Component || $[17] !== className || $[18] !== t1 || $[19] !== t2) {
+    t3 = /*#__PURE__*/React.createElement(Component, {
+      className: className,
+      style: t1
+    }, t2);
+    $[16] = Component;
+    $[17] = className;
+    $[18] = t1;
+    $[19] = t2;
+    $[20] = t3;
+  } else {
+    t3 = $[20];
+  }
+  return t3;
 };
 const Checkbox = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread({}, props_), theme?.ui?.elements?.onesyCheckbox?.props?.default), [props_]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread({}, props_), theme?.ui?.elements?.onesyCheckbox?.props?.default);
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       tonal = true,
       color = 'primary',
@@ -244,8 +349,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (is('function', onChange)) onChange(event.target.checked, event);
     }
   };
-  const onKeyDown = event => {
-    switch (event.key) {
+  const onKeyDown = event_0 => {
+    switch (event_0.key) {
       case 'Enter':
         if (refs.input.current) refs.input.current.click();
         break;
@@ -311,19 +416,23 @@ const Checkbox = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Component: Component,
     className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-root', `onesy-Checkbox-version-${version}`, `onesy-Checkbox-size-${size}`, value && `onesy-Checkbox-checked`, disabled && `onesy-Checkbox-disabled`], className, classes.root, disabled && classes.disabled])
   }, other), /*#__PURE__*/React.createElement(IconItem, {
+    size: size,
     className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon-item'], classes.iconItem, value && classes.iconItem_checked, indeterminate && classes.iconItem_indeterminate, value && disabled && classes.iconItem_checked_disabled]),
     style: styles.iconItem
   }), /*#__PURE__*/React.createElement(IconItem, {
     Component: "div",
+    size: size,
     className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon-box'], classes.icon, classes.iconBox, value && [classes.iconBox_checked, classes[`iconBox_checked_version_${version}`]], indeterminate && [classes.iconBox_indeterminate, classes[`iconBox_indeterminate_version_${version}`]], disabled && [value && classes.iconBox_checked_disabled, indeterminate && classes.iconBox_indeterminate_disabled]]),
     style: styles.iconBox
   }), indeterminate && /*#__PURE__*/React.createElement(IconItem, {
+    size: size,
     className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-indeterminate'], classes.icon, classes.iconDone, indeterminate && classes.indeterminate]),
     style: styles.iconDone,
     noFontSizeDownScale: true
   }, /*#__PURE__*/React.createElement(IconMaterialIndeterminateCheckBox, {
     size: "inherit"
   })), value && /*#__PURE__*/React.createElement(IconDoneAnimated, {
+    size: size,
     className: classNames([staticClassName('Checkbox', theme) && ['onesy-Checkbox-icon', 'onesy-Checkbox-icon-done'], classes.icon, classes.iconDone]),
     style: styles.iconDone,
     in: value,

package/esm/Chip/Chip.js

@@ -25,8 +25,8 @@ const useStyle = styleMethod(theme => ({
 });
 const Chip = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChip?.props?.default), props_), [props_]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChip?.props?.default), props_);
+  const Button = theme?.elements?.Button || ButtonElement;
   const {
       tonal = false,
       color = props.version === 'filled' ? 'inverted' : 'default',
@@ -95,11 +95,11 @@ const Chip = /*#__PURE__*/React.forwardRef((props_, ref) => {
     tonal: tonal,
     version: version,
     color: color || (tonal ? 'neutral' : 'default'),
-    onClick: event => {
+    onClick: event_0 => {
       onSelect();
 
       // Invoke items on click method
-      if (is('function', onClick)) onClick(event);
+      if (is('function', onClick)) onClick(event_0);
     },
     start: start
   }, !noCheckIcon && start && selected ? {

package/esm/Chips/Chips.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["size", "gap", "align", "justify", "direction", "wrap", "total", "max", "showAllDefault", "moreShowAll", "AdditionalChip", "AdditionalChipProps", "Component", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
@@ -51,44 +52,66 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Chips'
 });
 const Chips = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(13);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChips?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Chip = React.useMemo(() => theme?.elements?.Chip || ChipElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyChips?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Chip = theme?.elements?.Chip || ChipElement;
   const {
-      size = 'regular',
-      gap = 1,
-      align = 'flex-start',
-      justify = 'flex-start',
-      direction = 'row',
+      size: t0,
+      gap: t1,
+      align: t2,
+      justify: t3,
+      direction: t4,
       wrap,
       total,
       max,
       showAllDefault,
-      moreShowAll = true,
+      moreShowAll: t5,
       AdditionalChip,
-      AdditionalChipProps = {},
-      Component = 'div',
+      AdditionalChipProps: t6,
+      Component: t7,
       className,
       style,
       children: children_
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const size = t0 === undefined ? "regular" : t0;
+  const gap = t1 === undefined ? 1 : t1;
+  const align = t2 === undefined ? "flex-start" : t2;
+  const justify = t3 === undefined ? "flex-start" : t3;
+  const direction = t4 === undefined ? "row" : t4;
+  const moreShowAll = t5 === undefined ? true : t5;
+  const AdditionalChipProps = t6 === undefined ? {} : t6;
+  const Component = t7 === undefined ? "div" : t7;
   const {
     classes
   } = useStyle();
   const [showAll, setShowAll] = React.useState(showAllDefault !== undefined ? showAllDefault : false);
-  const onClickMore = React.useCallback(() => {
-    setShowAll(true);
-  }, []);
+  let t8;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = () => {
+      setShowAll(true);
+    };
+    $[0] = t8;
+  } else {
+    t8 = $[0];
+  }
+  const onClickMore = t8;
   let children = React.Children.toArray(children_);
   if (!showAll) {
     children = children.slice(0, max || children.length);
     if (total !== undefined && total - children.length >= 1 || max < children.length) {
       let value;
-      if (total !== undefined && total - children.length >= 1) value = `+${total - children.length}`;else value = `+${Math.abs(children.length - max)}`;
-      if (!AdditionalChipProps.TypeProps) AdditionalChipProps.TypeProps = {};
-      AdditionalChipProps.TypeProps.size = '0.44em';
+      if (total !== undefined && total - children.length >= 1) {
+        value = `+${total - children.length}`;
+      } else {
+        value = `+${Math.abs(children.length - max)}`;
+      }
+      if (!AdditionalChipProps.TypeProps) {
+        AdditionalChipProps.TypeProps = {};
+      }
+      AdditionalChipProps.TypeProps.size = "0.44em";
       children.push(AdditionalChip || /*#__PURE__*/React.createElement(Chip, _extends({
         color: "default"
       }, other, AdditionalChipProps, {
@@ -96,20 +119,40 @@ const Chips = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }), value));
     }
   }
-  return /*#__PURE__*/React.createElement(Line, {
-    ref: ref,
-    gap: gap,
-    justify: justify,
-    align: align,
-    direction: direction,
-    wrap: wrap,
-    Component: Component,
-    className: classNames([staticClassName('Chips', theme) && ['onesy-Chips-root', `onesy-Chips-size-${size}`], className, classes.root, classes[`size_${size}`], wrap === 'wrap' && [classes.wrap, classes[`wrap_${size}`]]]),
-    style: style
-  }, React.Children.toArray(children).map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
+  const t9 = classNames([staticClassName("Chips", theme) && ["onesy-Chips-root", `onesy-Chips-size-${size}`], className, classes.root, classes[`size_${size}`], wrap === "wrap" && [classes.wrap, classes[`wrap_${size}`]]]);
+  const t10 = React.Children.toArray(children).map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
     key: index,
     size
-  }, other), item.props))));
+  }, other), item.props)));
+  let t11;
+  if ($[1] !== Component || $[2] !== Line || $[3] !== align || $[4] !== direction || $[5] !== gap || $[6] !== justify || $[7] !== ref || $[8] !== style || $[9] !== t10 || $[10] !== t9 || $[11] !== wrap) {
+    t11 = /*#__PURE__*/React.createElement(Line, {
+      ref: ref,
+      gap: gap,
+      justify: justify,
+      align: align,
+      direction: direction,
+      wrap: wrap,
+      Component: Component,
+      className: t9,
+      style: style
+    }, t10);
+    $[1] = Component;
+    $[2] = Line;
+    $[3] = align;
+    $[4] = direction;
+    $[5] = gap;
+    $[6] = justify;
+    $[7] = ref;
+    $[8] = style;
+    $[9] = t10;
+    $[10] = t9;
+    $[11] = wrap;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  return t11;
 });
 Chips.displayName = 'onesy-Chips';
 export default Chips;

package/esm/ClickListener/ClickListener.js

@@ -10,7 +10,7 @@ import { matches } from '../utils';
 const resolve = value => value.replace(/^on/, '').toLowerCase();
 const ClickListener = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyClickListener?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyClickListener?.props?.default), props_);
   const {
       mouseEvent = 'onClick',
       touchEvent = 'onTouchEnd',
@@ -41,7 +41,7 @@ const ClickListener = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (refs.root.current) {
         const elementParents = element(event.target).parents();
         const exists = Try(() => rootDocument.body.contains(event.target));
-        if (refs.root.current.contains(event.target) || refs.include.current.map(item => item?.current || item).filter(Boolean).some(item => item.contains?.(event.target)) || refs.includeParentQueries.current.some(query => elementParents.some(item => matches(item)(query))) || refs.includeQueries.current.some(query => matches(event.target)(query)) || !exists && refs.ignoreNonExisting.current) {
+        if (refs.root.current.contains(event.target) || refs.include.current.map(item_0 => item_0?.current || item_0).filter(Boolean).some(item_1 => item_1.contains?.(event.target)) || refs.includeParentQueries.current.some(query_0 => elementParents.some(item => matches(item)(query_0))) || refs.includeQueries.current.some(query => matches(event.target)(query)) || !exists && refs.ignoreNonExisting.current) {
           if (is('function', onClickInside)) onClickInside();
         } else {
           if (is('function', onClickOutside)) onClickOutside();
@@ -60,14 +60,14 @@ const ClickListener = /*#__PURE__*/React.forwardRef((props_, ref) => {
     };
   }, [mouseEvent, touchEvent, contextMenu]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, children && (/*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({
-    ref: item => {
+    ref: item_2 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_2);else ref.current = item_2;
       }
       if (children.ref) {
-        if (is('function', children.ref)) children.ref(item);else children.ref.current = item;
+        if (is('function', children.ref)) children.ref(item_2);else children.ref.current = item_2;
       }
-      refs.root.current = item;
+      refs.root.current = item_2;
     }
   }, other), {}, {
     className: classNames([other.className, children.props.className])