@onesy/ui-react 1.0.164 → 1.0.167

package/esm/Buttons/Buttons.js

@@ -6,6 +6,7 @@ const _excluded = ["className"],
   _excluded3 = ["tonal", "color", "version", "colorSelected", "size", "value", "valueDefault", "onChange", "select", "unselect", "orientation", "noCheckIcon", "elevation", "border", "chip", "fullWidth", "disabled", "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, unique } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -15,19 +16,50 @@ import { staticClassName, valueBreakpoints } from '../utils';
 import useMediaQuery from '../useMediaQuery';
 import Icon from '../Icon';
 export const IconMaterialDone = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
+  const $ = _c(9);
+  let className;
+  let other;
+  if ($[0] !== props) {
+    var _props = props;
+    ({
       className
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement(Icon, _extends({
-    ref: ref,
-    name: "DoneSharp",
-    short_name: "Done"
-  }, other), /*#__PURE__*/React.createElement("path", {
-    className: className,
-    fill: "none",
-    d: "M4.5 11.5L9.5 16.5L19.5 6.5"
-  }));
+    } = _props);
+    other = _objectWithoutProperties(_props, _excluded);
+    _props;
+    $[0] = props;
+    $[1] = className;
+    $[2] = other;
+  } else {
+    className = $[1];
+    other = $[2];
+  }
+  let t0;
+  if ($[3] !== className) {
+    t0 = /*#__PURE__*/React.createElement("path", {
+      className: className,
+      fill: "none",
+      d: "M4.5 11.5L9.5 16.5L19.5 6.5"
+    });
+    $[3] = className;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  let t1;
+  if ($[5] !== other || $[6] !== ref || $[7] !== t0) {
+    t1 = /*#__PURE__*/React.createElement(Icon, _extends({
+      ref: ref,
+      name: "DoneSharp",
+      short_name: "Done"
+    }, other), t0);
+    $[5] = other;
+    $[6] = ref;
+    $[7] = t0;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  return t1;
 });
 const useStyle = styleMethod(theme => ({
   root: {
@@ -131,61 +163,146 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Buttons'
 });
 export const IconDoneAnimated = props => {
+  const $ = _c(31);
   const {
     classes
   } = useStyle();
   const theme = useOnesyTheme();
-  const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
-  const {
+  const Transition = theme?.elements?.Transition || TransitionElement;
+  let add;
+  let className;
+  let inProp;
+  let noExitAnimation;
+  let onExited;
+  let other;
+  let simple;
+  let style;
+  if ($[0] !== props) {
+    const {
+        in: t0,
+        simple: t1,
+        onExited: t2,
+        fullWidth,
+        noExitAnimation: t3,
+        add: t4,
+        className: t5,
+        style: t6
+      } = props,
+      t7 = _objectWithoutProperties(props, _excluded2);
+    inProp = t0;
+    simple = t1;
+    onExited = t2;
+    noExitAnimation = t3;
+    add = t4;
+    className = t5;
+    style = t6;
+    other = t7;
+    $[0] = props;
+    $[1] = add;
+    $[2] = className;
+    $[3] = inProp;
+    $[4] = noExitAnimation;
+    $[5] = onExited;
+    $[6] = other;
+    $[7] = simple;
+    $[8] = style;
+  } else {
+    add = $[1];
+    className = $[2];
+    inProp = $[3];
+    noExitAnimation = $[4];
+    onExited = $[5];
+    other = $[6];
+    simple = $[7];
+    style = $[8];
+  }
+  let t0;
+  if ($[9] !== props.simple || $[10] !== style?.fontSize) {
+    t0 = props.simple ? {} : {
+      adding: {
+        width: style?.fontSize
+      },
+      added: {
+        width: style?.fontSize
+      }
+    };
+    $[9] = props.simple;
+    $[10] = style?.fontSize;
+    $[11] = t0;
+  } else {
+    t0 = $[11];
+  }
+  const styles = t0;
+  let t1;
+  if ($[12] !== onExited || $[13] !== simple) {
+    t1 = () => {
+      if (is("function", onExited) && !simple) {
+        onExited();
+      }
+    };
+    $[12] = onExited;
+    $[13] = simple;
+    $[14] = t1;
+  } else {
+    t1 = $[14];
+  }
+  let t2;
+  if ($[15] !== className || $[16] !== classes.path || $[17] !== classes.pathIn || $[18] !== noExitAnimation || $[19] !== other || $[20] !== simple || $[21] !== style || $[22] !== styles || $[23] !== theme.methods.transitions) {
+    t2 = status => /*#__PURE__*/React.cloneElement(/*#__PURE__*/React.createElement("span", {
+      className: className,
+      style: style
+    }, /*#__PURE__*/React.createElement(IconMaterialDone, _extends({
+      className: classNames([classes.path, (["adding", "added", "enter", "entering", "entered"].includes(status) || noExitAnimation) && classes.pathIn]),
+      size: "inherit"
+    }, other))), {
+      style: _objectSpread(_objectSpread(_objectSpread({
+        display: "inline-flex",
+        overflow: "hidden"
+      }, !simple ? {
+        width: 0
+      } : {}), {}, {
+        transition: theme.methods.transitions.make("width", {
+          duration: "xs",
+          timing_function: "accelerated"
+        })
+      }, styles[status]), style)
+    });
+    $[15] = className;
+    $[16] = classes.path;
+    $[17] = classes.pathIn;
+    $[18] = noExitAnimation;
+    $[19] = other;
+    $[20] = simple;
+    $[21] = style;
+    $[22] = styles;
+    $[23] = theme.methods.transitions;
+    $[24] = t2;
+  } else {
+    t2 = $[24];
+  }
+  let t3;
+  if ($[25] !== Transition || $[26] !== add || $[27] !== inProp || $[28] !== t1 || $[29] !== t2) {
+    t3 = /*#__PURE__*/React.createElement(Transition, {
       in: inProp,
-      simple,
-      onExited,
-      fullWidth,
-      noExitAnimation,
-      add,
-      className,
-      style
-    } = props,
-    other = _objectWithoutProperties(props, _excluded2);
-  const styles = props.simple ? {} : {
-    adding: {
-      width: style?.fontSize
-    },
-    added: {
-      width: style?.fontSize
-    }
-  };
-  return /*#__PURE__*/React.createElement(Transition, {
-    in: inProp,
-    onExited: () => {
-      if (is('function', onExited) && !simple) onExited();
-    },
-    add: add,
-    enterOnAdd: false
-  }, status => /*#__PURE__*/React.cloneElement(/*#__PURE__*/React.createElement("span", {
-    className: className,
-    style: style
-  }, /*#__PURE__*/React.createElement(IconMaterialDone, _extends({
-    className: classNames([classes.path, (['adding', 'added', 'enter', 'entering', 'entered'].includes(status) || noExitAnimation) && classes.pathIn]),
-    size: "inherit"
-  }, other))), {
-    style: _objectSpread(_objectSpread(_objectSpread({
-      display: 'inline-flex',
-      overflow: 'hidden'
-    }, !simple ? {
-      width: 0
-    } : {}), {}, {
-      transition: theme.methods.transitions.make('width', {
-        duration: 'xs',
-        timing_function: 'accelerated'
-      })
-    }, styles[status]), style)
-  }));
+      onExited: t1,
+      add: add,
+      enterOnAdd: false
+    }, t2);
+    $[25] = Transition;
+    $[26] = add;
+    $[27] = inProp;
+    $[28] = t1;
+    $[29] = t2;
+    $[30] = t3;
+  } else {
+    t3 = $[30];
+  }
+  return t3;
 };
 const Buttons = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyButtons?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyButtons?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
   const {
       tonal = true,
       color = 'primary',
@@ -224,13 +341,13 @@ const Buttons = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const result = [];
     const items = [orientation_];
     items.forEach(item => {
-      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key_0 => result.push(key_0));
     });
     return unique(result);
   }, [orientation_]);
   const breakpoints = {};
-  keys.forEach(key => {
-    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+  keys.forEach(key_1 => {
+    breakpoints[key_1] = useMediaQuery(theme.breakpoints.media[key_1], {
       element: refs.root.current
     });
   });
@@ -243,66 +360,66 @@ const Buttons = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (init && value !== selected) setSelected(is('array', value) ? value : [value]);
   }, [value]);
   const onSelect = (itemProps, start = false) => {
-    let valueNew;
+    let valueNew_0;
     if (start) {
       if (selected.includes(itemProps.value)) {
-        valueNew = selected.filter(item => item !== itemProps.value);
+        valueNew_0 = selected.filter(item_0 => item_0 !== itemProps.value);
       } else {
-        if (select === 'single') valueNew = [itemProps.value];
-        if (select === 'multiple') valueNew = unique([...selected, itemProps.value]);
+        if (select === 'single') valueNew_0 = [itemProps.value];
+        if (select === 'multiple') valueNew_0 = unique([...selected, itemProps.value]);
       }
     } else {
       // Unselect
       if (selected.includes(itemProps.value) && (unselect || select === 'multiple' && selected.length > 1)) {
-        valueNew = selected.filter(item => item !== itemProps.value);
+        valueNew_0 = selected.filter(item_1 => item_1 !== itemProps.value);
       } else {
         if (select === 'single') {
-          valueNew = [itemProps.value];
+          valueNew_0 = [itemProps.value];
         }
         if (select === 'multiple') {
-          valueNew = unique([...selected, itemProps.value]);
+          valueNew_0 = unique([...selected, itemProps.value]);
         }
       }
     }
-    if (valueNew !== undefined) {
+    if (valueNew_0 !== undefined) {
       // Update inner or controlled
-      if (!props.hasOwnProperty('value')) setSelected(valueNew);
-      if (is('function', onChange)) onChange(valueNew);
+      if (!props.hasOwnProperty('value')) setSelected(valueNew_0);
+      if (is('function', onChange)) onChange(valueNew_0);
     }
   };
   const children = React.Children.toArray(children_)
   // Clamp array to max of 5 values
   // .slice(0, 5)
-  .map((item, index) => /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread({
+  .map((item_2, index) => /*#__PURE__*/React.cloneElement(item_2, _objectSpread(_objectSpread({
     key: index,
-    className: classNames([item.className, classes.item, classes[version], classes[`start_orientation_${orientation}`], classes[`end_orientation_${orientation}`], selected.includes(item.props.value) && classes.selected, border && classes.border]),
+    className: classNames([item_2.className, classes.item, classes[version], classes[`start_orientation_${orientation}`], classes[`end_orientation_${orientation}`], selected.includes(item_2.props.value) && classes.selected, border && classes.border]),
     onClick: () => {
-      onSelect(item.props, !!item.props.start);
+      onSelect(item_2.props, !!item_2.props.start);
 
       // Invoke items on click method
-      if (is('function', item.props.onClick)) item.props.onClick();
+      if (is('function', item_2.props.onClick)) item_2.props.onClick();
     }
-  }, !refs.noCheckIcon.current && selected.includes(item.props.value) ? {
+  }, !refs.noCheckIcon.current && selected.includes(item_2.props.value) ? {
     start: /*#__PURE__*/React.createElement(IconDoneAnimated, {
       in: true,
       add: true,
       simple: true
     })
   } : {}), {}, {
-    version: item.props?.version !== undefined ? item.props.version : version,
-    color: selected.includes(item.props.value) ? colorSelected || (item.props?.color !== undefined ? item.props.color : color) : item.props?.color !== undefined ? item.props.color : color,
-    size: item.props?.size !== undefined ? item.props.size : size,
-    tonal: item.props?.tonal !== undefined ? item.props.tonal : tonal,
+    version: item_2.props?.version !== undefined ? item_2.props.version : version,
+    color: selected.includes(item_2.props.value) ? colorSelected || (item_2.props?.color !== undefined ? item_2.props.color : color) : item_2.props?.color !== undefined ? item_2.props.color : color,
+    size: item_2.props?.size !== undefined ? item_2.props.size : size,
+    tonal: item_2.props?.tonal !== undefined ? item_2.props.tonal : tonal,
     elevation: false,
-    selected: item.props.selected !== undefined ? item.props.selected : selected.includes(item.props.value),
-    disabled: item.props?.disabled !== undefined ? item.props.disabled : disabled
+    selected: item_2.props.selected !== undefined ? item_2.props.selected : selected.includes(item_2.props.value),
+    disabled: item_2.props?.disabled !== undefined ? item_2.props.disabled : disabled
   })));
   return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_3 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_3);else ref.current = item_3;
       }
-      refs.root.current = item;
+      refs.root.current = item_3;
     },
     gap: 0,
     direction: "row",