@onesy/ui-react 1.0.171 → 1.0.173

package/Grid/Grid.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -14,7 +13,8 @@ var _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
-const _excluded = ["auto", "wrap", "columns", "gap", "rowGap", "columnGap", "parentGap", "parentRowGap", "parentColumnGap", "direction", "offsets", "values", "responsive", "RootProps", "Component", "style", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "auto", "wrap", "columns", "gap", "rowGap", "columnGap", "parentGap", "parentRowGap", "parentColumnGap", "direction", "offsets", "values", "responsive", "RootProps", "Component", "style", "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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -114,12 +114,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Grid'
 });
-const Grid = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Grid = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyGrid) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
   const {
+      ref,
       auto,
       wrap,
       columns = 12,
@@ -207,7 +208,7 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }
   styles.root.width = width;
   if (offset > 0) styles.root.marginInlineStart = `${offset / columns * 100}%`;
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread(_objectSpread({
     ref: item_1 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_1);else ref.current = item_1;
@@ -217,14 +218,16 @@ const Grid = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Grid', theme) && ['onesy-Grid-root'], className, classes.root, auto && classes.auto, classes[`gap_${String(gap).replace('.', '')}`], classes[`rowGap_${String(rowGap).replace('.', '')}`], classes[`columnGap_${String(columnGap).replace('.', '')}`]]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other, RootProps), _react.default.Children.toArray(children).map(item_2 => {
-    var _item_2$type;
-    return /*#__PURE__*/_react.default.cloneElement(item_2, !((_item_2$type = item_2.type) !== null && _item_2$type !== void 0 && (_item_2$type = _item_2$type.displayName) !== null && _item_2$type !== void 0 && _item_2$type.includes('Grid')) ? {} : _objectSpread({}, other.direction === 'row' && {
-      parentGap: gap,
-      parentRowGap: rowGap,
-      parentColumnGap: columnGap
-    }));
+  }, other), RootProps), {}, {
+    children: _react.default.Children.toArray(children).map(item_2 => {
+      var _item_2$type;
+      return /*#__PURE__*/_react.default.cloneElement(item_2, !((_item_2$type = item_2.type) !== null && _item_2$type !== void 0 && (_item_2$type = _item_2$type.displayName) !== null && _item_2$type !== void 0 && _item_2$type.includes('Grid')) ? {} : _objectSpread({}, other.direction === 'row' && {
+        parentGap: gap,
+        parentRowGap: rowGap,
+        parentColumnGap: columnGap
+      }));
+    })
   }));
-});
+};
 Grid.displayName = 'onesy-Grid';
 var _default = exports.default = Grid;

package/Grow/Grow.js

@@ -12,12 +12,13 @@ var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
 var _ = require("..");
-const _excluded = ["in", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "className", "style", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "in", "prefix", "run", "append", "add", "enter", "exit", "enterOnAdd", "exitOnAdd", "noAbruption", "removeOnExited", "delay", "duration", "timing_function", "addTransition", "onTransition", "onAppended", "onAdd", "onAdding", "onAdded", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "onRemoved", "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) { (0, _defineProperty2.default)(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; }
-const Grow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Grow = props_ => {
   var _theme$ui, _theme$ui2;
-  const $ = (0, _compilerRuntime.c)(32);
+  const $ = (0, _compilerRuntime.c)(33);
   const theme = (0, _styleReact.useOnesyTheme)();
   const t0 = theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default;
   const t1 = theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyGrow) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default;
@@ -48,11 +49,13 @@ const Grow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   let className;
   let inProp;
   let other;
+  let ref;
   let style;
   let timing_function;
   if ($[5] !== props) {
     const {
-        in: t5,
+        ref: t5,
+        in: t6,
         prefix,
         run,
         append,
@@ -65,8 +68,8 @@ const Grow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         removeOnExited,
         delay,
         duration: duration_,
-        timing_function: t6,
-        addTransition: t7,
+        timing_function: t7,
+        addTransition: t8,
         onTransition,
         onAppended,
         onAdd,
@@ -79,37 +82,40 @@ const Grow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         onExiting,
         onExited,
         onRemoved,
-        className: t8,
-        style: t9,
-        children: t10
+        className: t9,
+        style: t10,
+        children: t11
       } = props,
-      t11 = (0, _objectWithoutProperties2.default)(props, _excluded);
-    inProp = t5;
-    timing_function = t6;
-    addTransition = t7;
-    className = t8;
-    style = t9;
-    children = t10;
-    other = t11;
+      t12 = (0, _objectWithoutProperties2.default)(props, _excluded);
+    ref = t5;
+    inProp = t6;
+    timing_function = t7;
+    addTransition = t8;
+    className = t9;
+    style = t10;
+    children = t11;
+    other = t12;
     $[5] = props;
     $[6] = addTransition;
     $[7] = children;
     $[8] = className;
     $[9] = inProp;
     $[10] = other;
-    $[11] = style;
-    $[12] = timing_function;
+    $[11] = ref;
+    $[12] = style;
+    $[13] = timing_function;
   } else {
     addTransition = $[6];
     children = $[7];
     className = $[8];
     inProp = $[9];
     other = $[10];
-    style = $[11];
-    timing_function = $[12];
+    ref = $[11];
+    style = $[12];
+    timing_function = $[13];
   }
   let t5;
-  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
     t5 = status => {
       var _refs$root;
       const {
@@ -163,13 +169,13 @@ const Grow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       };
       return allStyles[status];
     };
-    $[13] = t5;
+    $[14] = t5;
   } else {
-    t5 = $[13];
+    t5 = $[14];
   }
   const styles = t5;
   let duration;
-  if ($[14] !== theme) {
+  if ($[15] !== theme) {
     duration = (status_0, t6) => {
       const property = t6 === undefined ? "opacity" : t6;
       const properties = {
@@ -178,23 +184,23 @@ const Grow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       };
       return `${((0, _utils.is)("simple", duration) ? duration : duration[status_0]) || properties[property]}ms`;
     };
-    $[14] = theme;
-    $[15] = duration;
+    $[15] = theme;
+    $[16] = duration;
   } else {
-    duration = $[15];
+    duration = $[16];
   }
   let t6;
-  if ($[16] !== theme || $[17] !== timing_function) {
+  if ($[17] !== theme || $[18] !== timing_function) {
     t6 = status_1 => ((0, _utils.is)("simple", timing_function) ? timing_function : timing_function[status_1]) || theme.transitions.timing_function.standard;
-    $[16] = theme;
-    $[17] = timing_function;
-    $[18] = t6;
+    $[17] = theme;
+    $[18] = timing_function;
+    $[19] = t6;
   } else {
-    t6 = $[18];
+    t6 = $[19];
   }
   const timingFunction = t6;
   let t7;
-  if ($[19] !== addTransition || $[20] !== children || $[21] !== className || $[22] !== duration || $[23] !== inProp || $[24] !== other || $[25] !== ref || $[26] !== style || $[27] !== timingFunction) {
+  if ($[20] !== addTransition || $[21] !== children || $[22] !== className || $[23] !== duration || $[24] !== inProp || $[25] !== other || $[26] !== ref || $[27] !== style || $[28] !== timingFunction) {
     t7 = (status_2, ref_) => {
       var _children, _children2;
       return /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, other), {}, {
@@ -229,29 +235,31 @@ const Grow = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }, styles(status_2)), (_children2 = children) === null || _children2 === void 0 || (_children2 = _children2.props) === null || _children2 === void 0 ? void 0 : _children2.style), style)
       }));
     };
-    $[19] = addTransition;
-    $[20] = children;
-    $[21] = className;
-    $[22] = duration;
-    $[23] = inProp;
-    $[24] = other;
-    $[25] = ref;
-    $[26] = style;
-    $[27] = timingFunction;
-    $[28] = t7;
+    $[20] = addTransition;
+    $[21] = children;
+    $[22] = className;
+    $[23] = duration;
+    $[24] = inProp;
+    $[25] = other;
+    $[26] = ref;
+    $[27] = style;
+    $[28] = timingFunction;
+    $[29] = t7;
   } else {
-    t7 = $[28];
+    t7 = $[29];
   }
   let t8;
-  if ($[29] !== props || $[30] !== t7) {
-    t8 = /*#__PURE__*/_react.default.createElement(_.Transition, props, t7);
-    $[29] = props;
-    $[30] = t7;
-    $[31] = t8;
+  if ($[30] !== props || $[31] !== t7) {
+    t8 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Transition, _objectSpread(_objectSpread({}, props), {}, {
+      children: t7
+    }));
+    $[30] = props;
+    $[31] = t7;
+    $[32] = t8;
   } else {
-    t8 = $[31];
+    t8 = $[32];
   }
   return t8;
-});
+};
 Grow.displayName = 'onesy-Grow';
 var _default = exports.default = Grow;

package/HTMLCanvas/HTMLCanvas.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -22,7 +21,8 @@ var _ListItem = _interopRequireDefault(require("../ListItem"));
 var _Label = _interopRequireDefault(require("../Label"));
 var _Switch = _interopRequireDefault(require("../Switch"));
 var _utils2 = require("../utils");
-const _excluded = ["size", "width", "height", "minZoom", "maxZoom", "showGuidelinesDefault", "guidelines", "pre", "post", "miniMap", "methods", "onChange", "onWheel", "onMouseDown", "onTouchStart", "noActions", "noGuideLines", "noFitCenter", "noZoomMenu", "disabled", "IconCenter", "ContainerProps", "IconButtonProps", "Component", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "size", "width", "height", "minZoom", "maxZoom", "showGuidelinesDefault", "guidelines", "pre", "post", "miniMap", "methods", "onChange", "onWheel", "onMouseDown", "onTouchStart", "noActions", "noGuideLines", "noFitCenter", "noZoomMenu", "disabled", "IconCenter", "ContainerProps", "IconButtonProps", "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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -100,7 +100,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-HTMLCanvas'
 });
-const HTMLCanvas = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const HTMLCanvas = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyHTMLCanvas) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -114,6 +114,7 @@ const HTMLCanvas = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Label = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Label) || _Label.default;
   const Switch = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.Switch) || _Switch.default;
   const {
+      ref,
       size = 'regular',
       width = 240000,
       height = 240000,
@@ -567,7 +568,7 @@ const HTMLCanvas = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     };
     viewportStyles.left = Math.abs(positions.left) / zoomPerSize * zoomAdjusted_0;
     viewportStyles.top = Math.abs(positions.top) / zoomPerSize * zoomAdjusted_0;
-    return /*#__PURE__*/_react.default.createElement(Line, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
       ref: refs.miniMap,
       onMouseDown: onMouseDownMiniMap,
       onTouchStart: onTouchStartMiniMap,
@@ -575,13 +576,14 @@ const HTMLCanvas = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       style: {
         width: width_,
         height: height_
-      }
-    }, /*#__PURE__*/_react.default.createElement(Line, {
-      className: classes.miniMapMain
-    }), /*#__PURE__*/_react.default.createElement(Line, {
-      className: classes.miniMapViewport,
-      style: _objectSpread({}, viewportStyles)
-    }));
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        className: classes.miniMapMain
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        className: classes.miniMapViewport,
+        style: _objectSpread({}, viewportStyles)
+      })]
+    });
   }, [positions, onMouseDownMiniMap, onTouchStartMiniMap]);
   const updateMiniMap = (0, _utils.debounce)(() => {
     const root_6 = refs.root.current;
@@ -646,7 +648,7 @@ const HTMLCanvas = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     // mini map
     if (useMiniMap) updateMiniMap();
   }, [children, useMiniMap]);
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     ref: item_4 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_4);
@@ -664,67 +666,79 @@ const HTMLCanvas = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onTouchStart: onTouchStart,
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('HTMLCanvas', theme) && ['onesy-HTMLCanvas-root'], className, classes.root, keyDown === ' ' && classes.move, disabled && classes.disabled])
-  }, other), pre, !noActions && /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0.5,
-    direction: "row",
-    align: "center",
-    justify: "flex-start",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('HTMLCanvas', theme) && ['onesy-HTMLCanvas-actions'], classes.actions])
-  }, !noGuideLines && /*#__PURE__*/_react.default.createElement(Label, {
-    value: showGuidelines,
-    onChange: onShowGuidelines,
-    size: "small"
-  }, /*#__PURE__*/_react.default.createElement(Switch, null), "Guidelines"), !noFitCenter && /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "flex-end"
-  }, /*#__PURE__*/_react.default.createElement(Tooltip, {
-    name: "Fit"
-  }, /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    size: size,
-    onClick: onCenter
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconCenter, null)))), !noZoomMenu && /*#__PURE__*/_react.default.createElement(Menu, {
-    menuItems: zoomOptions.map((item_5, index) => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-      key: item_5.name,
-      primary: /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, item_5.name),
-      value: item_5.name,
-      selected: +positions.zoom.toFixed(2) === +(item_5.value || 0).toFixed(2)
-    }, item_5.props, {
-      size: "small",
-      button: true
-    }))),
-    className: classes.menu
-  }, /*#__PURE__*/_react.default.createElement(Line, {
-    align: "center",
-    justify: "center",
-    className: classes.zoom
-  }, /*#__PURE__*/_react.default.createElement(Type, {
-    version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3',
-    align: "center",
-    whiteSpace: "nowrap",
-    fullWidth: true
-  }, (positions.zoom * 100).toFixed(0), "%")))), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({}, ContainerProps, {
-    ref: item_6 => {
-      if (ContainerProps !== null && ContainerProps !== void 0 && ContainerProps.ref) {
-        if ((0, _utils.is)('function', ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.ref)) ContainerProps.ref(item_6);
-        ContainerProps.ref.current = item_6;
-      }
-      refs.container.current = item_6;
-    },
-    gap: 0,
-    align: "unset",
-    justify: "unset",
-    flex: true,
-    fullWidth: true,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('HTMLCanvas', theme) && ['onesy-HTMLCanvas-container'], ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.className, classes.container, showGuidelines && guidelines && classes[`guidelines_${[true, 'dots'].includes(guidelines) ? 'dots' : 'lines'}`]]),
-    style: _objectSpread({
-      width,
-      height
-    }, ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.style)
-  }), children), useMiniMap && miniMap, post);
-});
+  }, other), {}, {
+    children: [pre, !noActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+      gap: 0.5,
+      direction: "row",
+      align: "center",
+      justify: "flex-start",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('HTMLCanvas', theme) && ['onesy-HTMLCanvas-actions'], classes.actions]),
+      children: [!noGuideLines && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, {
+        value: showGuidelines,
+        onChange: onShowGuidelines,
+        size: "small",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Switch, {}), "Guidelines"]
+      }), !noFitCenter && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        justify: "flex-end",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
+          name: "Fit",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+            size: size,
+            onClick: onCenter
+          }, IconButtonProps), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconCenter, {})
+          }))
+        })
+      }), !noZoomMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(Menu, {
+        menuItems: zoomOptions.map((item_5, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, _objectSpread(_objectSpread({
+          primary: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+            version: "b3",
+            children: item_5.name
+          }),
+          value: item_5.name,
+          selected: +positions.zoom.toFixed(2) === +(item_5.value || 0).toFixed(2)
+        }, item_5.props), {}, {
+          size: "small",
+          button: true
+        }), item_5.name)),
+        className: classes.menu,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          align: "center",
+          justify: "center",
+          className: classes.zoom,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, {
+            version: size === 'large' ? 'b2' : size === 'regular' ? 'b3' : 'b3',
+            align: "center",
+            whiteSpace: "nowrap",
+            fullWidth: true,
+            children: [(positions.zoom * 100).toFixed(0), "%"]
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({}, ContainerProps), {}, {
+      ref: item_6 => {
+        if (ContainerProps !== null && ContainerProps !== void 0 && ContainerProps.ref) {
+          if ((0, _utils.is)('function', ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.ref)) ContainerProps.ref(item_6);
+          ContainerProps.ref.current = item_6;
+        }
+        refs.container.current = item_6;
+      },
+      gap: 0,
+      align: "unset",
+      justify: "unset",
+      flex: true,
+      fullWidth: true,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('HTMLCanvas', theme) && ['onesy-HTMLCanvas-container'], ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.className, classes.container, showGuidelines && guidelines && classes[`guidelines_${[true, 'dots'].includes(guidelines) ? 'dots' : 'lines'}`]]),
+      style: _objectSpread({
+        width,
+        height
+      }, ContainerProps === null || ContainerProps === void 0 ? void 0 : ContainerProps.style),
+      children: children
+    })), useMiniMap && miniMap, post]
+  }));
+};
 HTMLCanvas.displayName = 'onesy-HTMLCanvas';
 var _default = exports.default = HTMLCanvas;

package/IFrame/IFrame.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -14,7 +13,8 @@ var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils2 = require("../utils");
-const _excluded = ["id", "src", "WrapperProps", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "id", "src", "WrapperProps", "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) { (0, _defineProperty2.default)(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; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -31,12 +31,13 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-IFrame'
 });
-const IFrame = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const IFrame = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _refs$root$current, _refs$root$current2;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyIFrame) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
   const {
+      ref,
       id,
       src,
       WrapperProps,
@@ -98,32 +99,37 @@ const IFrame = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     refresh();
     if (!init) setInit(true);
   }, [id, refs.root.current, children, theme]);
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     gap: 0,
     flex: true,
     fullWidth: true
-  }, WrapperProps), /*#__PURE__*/_react.default.createElement(Line, {
-    className: classes.hidden
-  }, children), src && /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({
-    ref: item => {
-      if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
-      }
-      setRoot(item);
-    },
-    title: id,
-    src: src,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('IFrame', theme) && ['onesy-IFrame-root'], className, classes.root])
-  }, other), init && iframeBody && /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/_react.default.cloneElement(children, {
-    iframeRef: refs.root.current,
-    style: _objectSpread(_objectSpread({}, children === null || children === void 0 ? void 0 : children.props.style), {}, {
-      transition: theme.methods.transitions.make('opacity')
-    }, show ? {
-      opacity: 1
-    } : {
-      opacity: 0
-    })
-  }), iframeBody)));
-});
+  }, WrapperProps), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      className: classes.hidden,
+      children: children
+    }), src && /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", _objectSpread(_objectSpread({
+      ref: item => {
+        if (ref) {
+          if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        }
+        setRoot(item);
+      },
+      title: id,
+      src: src,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('IFrame', theme) && ['onesy-IFrame-root'], className, classes.root])
+    }, other), {}, {
+      children: init && iframeBody && /*#__PURE__*/_reactDom.default.createPortal(/*#__PURE__*/_react.default.cloneElement(children, {
+        iframeRef: refs.root.current,
+        style: _objectSpread(_objectSpread({}, children === null || children === void 0 ? void 0 : children.props.style), {}, {
+          transition: theme.methods.transitions.make('opacity')
+        }, show ? {
+          opacity: 1
+        } : {
+          opacity: 0
+        })
+      }), iframeBody)
+    }))]
+  }));
+};
 IFrame.displayName = 'onesy-IFrame';
 var _default = exports.default = IFrame;