@onesy/ui-react 1.0.164 → 1.0.167

package/esm/IFrame/IFrame.js

@@ -26,8 +26,8 @@ const useStyle = styleMethod(theme => ({
 });
 const IFrame = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyIFrame?.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?.onesyIFrame?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
   const {
       id,
       src,
@@ -48,7 +48,7 @@ const IFrame = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.root.current = root;
   const iframeDocument = refs.root.current?.contentWindow?.document;
   const iframeBody = refs.root.current?.contentWindow?.document.body;
-  const refresh = React.useCallback(() => {
+  const refresh = () => {
     if (iframeDocument) {
       const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
 
@@ -78,7 +78,7 @@ const IFrame = /*#__PURE__*/React.forwardRef((props_, ref) => {
       // Body
       if (iframeBody) iframeBody.dir = rootDocument.body.dir;
     }
-  }, [iframeDocument]);
+  };
   React.useEffect(() => {
     if (init && !show) setTimeout(() => {
       refresh();

package/esm/Icon/Icon.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["viewBox", "name", "short_name", "tonal", "tone", "color", "size", "noRtl", "disabled", "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 { iconSizeToFontSize, staticClassName } from '../utils';
@@ -37,68 +38,109 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-Icon'
 });
 const Icon = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(15);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyIcon?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyIcon?.props?.default), props_);
   const {
-      viewBox = '0 0 24 24',
+      viewBox: t0,
       name,
       short_name,
-      tonal = true,
-      tone = 60,
-      color: color_ = 'inherit',
-      size = 'regular',
+      tonal: t1,
+      tone: t2,
+      color: t3,
+      size: t4,
       noRtl,
       disabled,
-      Component = 'svg',
+      Component: t5,
       className,
       style,
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
-  const [rtl, setRtl] = React.useState(theme.direction === 'rtl');
+  const viewBox = t0 === undefined ? "0 0 24 24" : t0;
+  const tonal = t1 === undefined ? true : t1;
+  const tone = t2 === undefined ? 60 : t2;
+  const color_ = t3 === undefined ? "inherit" : t3;
+  const size = t4 === undefined ? "regular" : t4;
+  const Component = t5 === undefined ? "svg" : t5;
+  const [rtl, setRtl] = React.useState(theme.direction === "rtl");
   const {
     classes
   } = useStyle();
-  React.useEffect(() => {
-    // Update rtl based on theme value
-    const method = (update, themeNew) => setRtl(themeNew.direction === 'rtl');
-    theme.subscriptions.update.subscribe(method);
-    return () => {
-      theme.subscriptions.update.unsubscribe(method);
+  let t6;
+  if ($[0] !== theme.subscriptions) {
+    t6 = () => {
+      const method = (update, themeNew) => setRtl(themeNew.direction === "rtl");
+      theme.subscriptions.update.subscribe(method);
+      return () => {
+        theme.subscriptions.update.unsubscribe(method);
+      };
     };
-  }, []);
+    $[0] = theme.subscriptions;
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+  let t7;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = [];
+    $[2] = t7;
+  } else {
+    t7 = $[2];
+  }
+  React.useEffect(t6, t7);
   const fontSize = iconSizeToFontSize(size);
   const isRtlIcon = rtl_icons.includes(short_name);
   let color = color_;
-  if (!['unset'].includes(color)) {
+  if (!["unset"].includes(color)) {
     if (tonal) {
-      const palette = color === 'default' ? theme.palette.color.neutral : !theme.palette.color[color] ? theme.methods.color(color) : theme.palette.color[color];
+      const palette = color === "default" ? theme.palette.color.neutral : !theme.palette.color[color] ? theme.methods.color(color) : theme.palette.color[color];
       color = theme.methods.palette.color.value(color, tone, true, palette);
-    } else color = color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color]?.main || color;
+    } else {
+      color = color === "default" ? theme.palette.text.default.primary : theme.palette.color[color]?.main || color;
+    }
   } else {
-    color = '';
+    color = "";
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
-    className: classNames([staticClassName('Icon', theme) && ['onesy-Icon-root', `onesy-Icon-size-${size}`, !noRtl && rtl && isRtlIcon ? 'onesy-Icon-direction-rtl' : 'onesy-Icon-direction-ltr', disabled && `onesy-Icon-disabled`], className, classes.root, !noRtl && rtl && isRtlIcon && classes.rtl, disabled && classes.disabled])
-
-    // Default '0 0 24 24' for material icons
-    ,
-    viewBox: viewBox
-
-    // Prevents svg oversize on load
-    ,
-    width: "1em",
-    height: "1em",
-    focusable: "false",
-    "aria-hidden": true,
-    style: _objectSpread({
-      // Prevents svg fill update on load
-      fill: 'currentcolor',
+  const t8 = classNames([staticClassName("Icon", theme) && ["onesy-Icon-root", `onesy-Icon-size-${size}`, !noRtl && rtl && isRtlIcon ? "onesy-Icon-direction-rtl" : "onesy-Icon-direction-ltr", disabled && "onesy-Icon-disabled"], className, classes.root, !noRtl && rtl && isRtlIcon && classes.rtl, disabled && classes.disabled]);
+  let t9;
+  if ($[3] !== color || $[4] !== fontSize || $[5] !== style) {
+    t9 = _objectSpread({
+      fill: "currentcolor",
       color,
       fontSize
-    }, style)
-  }, other), children);
+    }, style);
+    $[3] = color;
+    $[4] = fontSize;
+    $[5] = style;
+    $[6] = t9;
+  } else {
+    t9 = $[6];
+  }
+  let t10;
+  if ($[7] !== Component || $[8] !== children || $[9] !== other || $[10] !== ref || $[11] !== t8 || $[12] !== t9 || $[13] !== viewBox) {
+    t10 = /*#__PURE__*/React.createElement(Component, _extends({
+      ref: ref,
+      className: t8,
+      viewBox: viewBox,
+      width: "1em",
+      height: "1em",
+      focusable: "false",
+      "aria-hidden": true,
+      style: t9
+    }, other), children);
+    $[7] = Component;
+    $[8] = children;
+    $[9] = other;
+    $[10] = ref;
+    $[11] = t8;
+    $[12] = t9;
+    $[13] = viewBox;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  return t10;
 });
 Icon.displayName = 'onesy-Icon';
 export default Icon;

package/esm/IconButton/IconButton.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["version", "size", "className"];
 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 ButtonElement from '../Button';
@@ -14,26 +15,43 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-IconButton'
 });
 const IconButton = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(7);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyIconButton?.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?.onesyIconButton?.props?.default), props_);
+  const Button = theme?.elements?.Button || ButtonElement;
   const {
-      version = 'text',
-      size = 'regular',
+      version: t0,
+      size: t1,
       className
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const version = t0 === undefined ? "text" : t0;
+  const size = t1 === undefined ? "regular" : t1;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    ref: ref,
-    size: size
-  }, other, {
-    className: classNames([staticClassName('IconButton', theme) && ['onesy-IconButton-root'], className, classes.root]),
-    version: version,
-    icon: true
-  }));
+  const t2 = classNames([staticClassName("IconButton", theme) && ["onesy-IconButton-root"], className, classes.root]);
+  let t3;
+  if ($[0] !== Button || $[1] !== other || $[2] !== ref || $[3] !== size || $[4] !== t2 || $[5] !== version) {
+    t3 = /*#__PURE__*/React.createElement(Button, _extends({
+      ref: ref,
+      size: size
+    }, other, {
+      className: t2,
+      version: version,
+      icon: true
+    }));
+    $[0] = Button;
+    $[1] = other;
+    $[2] = ref;
+    $[3] = size;
+    $[4] = t2;
+    $[5] = version;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 });
 IconButton.displayName = 'onesy-IconButton';
 export default IconButton;

package/esm/Image/Image.js

@@ -116,10 +116,10 @@ const useStyle = styleMethod(theme => ({
 });
 const Image = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImage?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImage?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
       tonal = true,
       color = 'primary',
@@ -165,7 +165,7 @@ const Image = /*#__PURE__*/React.forwardRef((props_, ref) => {
     loaded: React.useRef(loaded)
   };
   refs.loaded.current = loaded;
-  const imageLoad = React.useCallback(value => new Promise((resolve, reject) => {
+  const imageLoad = value => new Promise((resolve, reject) => {
     const image = window.document.createElement('img');
     let imageLoaded = false;
     const check = () => {
@@ -183,13 +183,13 @@ const Image = /*#__PURE__*/React.forwardRef((props_, ref) => {
     image.onerror = onError;
     image.src = value;
     if (image.complete) return resolve(true);
-  }), []);
-  const init = React.useCallback(async () => {
+  });
+  const init = async () => {
     const URL = src || url || urlSmall;
     const isLoaded = await imageLoad(URL);
     setSource(isLoaded ? URL : '');
     setLoaded(true);
-  }, [src, url, urlSmall, loaded]);
+  };
   React.useEffect(() => {
     if (visiblity?.visible && !refs.loaded.current) {
       init();
@@ -259,12 +259,12 @@ const Image = /*#__PURE__*/React.forwardRef((props_, ref) => {
     delete other.Component;
   }
   return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      setRoot(item);
-      refs.root.current = item;
+      setRoot(item_0);
+      refs.root.current = item_0;
     }
   }, RootProps, {
     className: classNames([staticClassName('Image', theme) && ['onesy-Image-root', noImage && 'onesy-Image-no-image', picture && !description && `onesy-Image-picture`], RootProps?.className, className, classes.root, classes[`align_${align}`], noImage && classes.noImage, responsive && classes.responsive, maxWidth && classes[`maxWidth_${maxWidth}`], fullWidth && classes.fullWidth, rootIsImage && classes.root_img, picture && !description && classes.root_picture, description && classes.root_figure])