@uidu/fab - npm Package Compare versions

Comparing version 0.3.9 to 0.3.10

CHANGELOG.md

 # @uidu/fab
 
+## 0.3.10
+
+### Patch Changes
+
+- 4583416: Styling fixes
+
 ## 0.3.9
@@ -4,0 +10,0 @@

dist/declarations/src/components/Fab.d.ts

@@ -1,21 +0,11 @@
-import { PureComponent } from 'react';
-export default class Fab extends PureComponent<any> {
-    static defaultProps: {
-        position: {
-            bottom: number;
-            right: number;
-        };
-        event: string;
+/// <reference types="react" />
+export default function Fab({ event, children, position, icon, mainButtonStyles, }: {
+    event?: string;
+    children: any;
+    position?: {
+        bottom: number;
+        right: number;
     };
-    state: {
-        open: boolean;
-    };
-    enter: () => void;
-    leave: () => void;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-    actionOnClick: (userFunc: any) => void;
-    rc(): JSX.Element[];
-    render(): JSX.Element;
-}
+    icon: any;
+    mainButtonStyles: any;
+}): JSX.Element;

dist/fab.cjs.dev.js

@@ -8,7 +8,3 @@ 'use strict';
 var styled = require('styled-components');
-var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
-var _createClass = require('@babel/runtime/helpers/createClass');
-var _assertThisInitialized$1 = require('@babel/runtime/helpers/assertThisInitialized');
-var _inherits = require('@babel/runtime/helpers/inherits');
-var _defineProperty$1 = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 
@@ -20,7 +16,3 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 var styled__default = /*#__PURE__*/_interopDefault(styled);
-var _classCallCheck__default = /*#__PURE__*/_interopDefault(_classCallCheck);
-var _createClass__default = /*#__PURE__*/_interopDefault(_createClass);
-var _assertThisInitialized__default = /*#__PURE__*/_interopDefault(_assertThisInitialized$1);
-var _inherits__default = /*#__PURE__*/_interopDefault(_inherits);
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty$1);
+var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 
@@ -30,3 +22,3 @@ var StyledMainButton = styled__default['default'].button.withConfig({
   componentId: "ps9aer-0"
-})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;> *{transition:ease-in-out transform 0.2s;}"]);
+})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;&:focus{outline:none;}> *{transition:ease-in-out transform 0.2s;}"]);
 var StyledActionWrapper = styled__default['default'].li.withConfig({
@@ -43,3 +35,3 @@ displayName: "styled__StyledActionWrapper",
   componentId: "ps9aer-3"
-})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;"]);
+})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;&:focus{outline:none;}"]);
 var StyledFab = styled__default['default'].ul.withConfig({
@@ -114,55 +106,2 @@ displayName: "styled__StyledFab",
 
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
 var MainButton = (function (_ref) {
@@ -175,121 +114,82 @@ var children = _ref.children,
 
-var Fab = /*#__PURE__*/function (_PureComponent) {
-  _inherits__default['default'](Fab, _PureComponent);
+function Fab(_ref) {
+  var _ref$event = _ref.event,
+      event = _ref$event === void 0 ? 'hover' : _ref$event,
+      children = _ref.children,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? {
+    bottom: 0,
+    right: 0
+  } : _ref$position,
+      icon = _ref.icon,
+      mainButtonStyles = _ref.mainButtonStyles;
 
-  var _super = _createSuper(Fab);
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
 
-  function Fab() {
-    var _this;
+  var enter = function enter() {
+    return event === 'hover' && open();
+  };
 
-    _classCallCheck__default['default'](this, Fab);
+  var leave = function leave() {
+    return event === 'hover' && close();
+  };
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var open = function open() {
+    return setIsOpen(true);
+  };
 
-    _this = _super.call.apply(_super, [this].concat(args));
+  var close = function close() {
+    return setIsOpen(false);
+  };
 
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "state", {
-      open: false
-    });
+  var toggle = function toggle() {
+    return event === 'click' ? setIsOpen(!isOpen) : null;
+  };
 
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "enter", function () {
-      return _this.props.event === 'hover' && _this.open();
-    });
+  var actionOnClick = function actionOnClick(userFunc) {
+    setIsOpen(false);
+    setTimeout(function () {
+      // Hack to allow the FAB to close before the user event fires
+      userFunc();
+    }, 1);
+  };
 
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "leave", function () {
-      return _this.props.event === 'hover' && _this.close();
+  var rc = function rc() {
+    if (React__default['default'].Children.count(children) > 6) console.warn('@uidu/fab only supports up to 6 action buttons');
+    return React__default['default'].Children.map(children, function (ch, i) {
+      return /*#__PURE__*/React__default['default'].createElement(StyledActionWrapper, {
+        className: "".concat('top' in position ? 'top' : '')
+      }, /*#__PURE__*/React__default['default'].cloneElement(ch, _objectSpread2(_objectSpread2({
+        'data-testid': "action-button-".concat(i),
+        'aria-label': ch.props.text || "Menu button ".concat(i + 1),
+        'aria-hidden': !isOpen
+      }, ch.props), {}, {
+        onClick: function onClick() {
+          return actionOnClick(ch.props.onClick);
+        }
+      })), ch.props.text && /*#__PURE__*/React__default['default'].createElement("span", {
+        className: 'right' in position ? 'right' : '',
+        "aria-hidden": !isOpen
+      }, ch.props.text));
     });
+  };
 
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "open", function () {
-      return _this.setState({
-        open: true
-      });
-    });
+  return /*#__PURE__*/React__default['default'].createElement(StyledFab, {
+    onMouseEnter: enter,
+    onMouseLeave: leave,
+    isOpen: isOpen,
+    style: position
+  }, /*#__PURE__*/React__default['default'].createElement(StyledActions, null, /*#__PURE__*/React__default['default'].createElement(MainButton, {
+    onClick: toggle,
+    style: mainButtonStyles,
+    role: "button",
+    "aria-label": "Floating menu",
+    tabIndex: "0"
+  }, icon), /*#__PURE__*/React__default['default'].createElement("ul", null, rc())));
+}
 
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "close", function () {
-      return _this.setState({
-        open: false
-      });
-    });
-
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "toggle", function () {
-      return _this.props.event === 'click' ? _this.state.open ? _this.close() : _this.open() : null;
-    });
-
-    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "actionOnClick", function (userFunc) {
-      _this.setState({
-        open: false
-      }, function () {
-        // Hack to allow the FAB to close before the user event fires
-        setTimeout(function () {
-          userFunc();
-        }, 1);
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass__default['default'](Fab, [{
-    key: "rc",
-    value: function rc() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          c = _this$props.children,
-          p = _this$props.position;
-      var open = this.state.open;
-      if (React__default['default'].Children.count(c) > 6) console.warn('@uidu/fab only supports up to 6 action buttons');
-      return React__default['default'].Children.map(c, function (ch, i) {
-        return /*#__PURE__*/React__default['default'].createElement(StyledActionWrapper, {
-          className: "".concat('top' in p ? 'top' : '')
-        }, /*#__PURE__*/React__default['default'].cloneElement(ch, _objectSpread2(_objectSpread2({
-          'data-testid': "action-button-".concat(i),
-          'aria-label': ch.props.text || "Menu button ".concat(i + 1),
-          'aria-hidden': !open
-        }, ch.props), {}, {
-          onClick: function onClick() {
-            return _this2.actionOnClick(ch.props.onClick);
-          }
-        })), ch.props.text && /*#__PURE__*/React__default['default'].createElement("span", {
-          className: 'right' in p ? 'right' : '',
-          "aria-hidden": !open
-        }, ch.props.text));
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          position = _this$props2.position,
-          icon = _this$props2.icon,
-          mainButtonStyles = _this$props2.mainButtonStyles;
-      return /*#__PURE__*/React__default['default'].createElement(StyledFab, {
-        onMouseEnter: this.enter,
-        onMouseLeave: this.leave,
-        isOpen: this.state.open,
-        style: position
-      }, /*#__PURE__*/React__default['default'].createElement(StyledActions, null, /*#__PURE__*/React__default['default'].createElement(MainButton, {
-        onClick: this.toggle,
-        style: mainButtonStyles,
-        role: "button",
-        "aria-label": "Floating menu",
-        tabIndex: "0"
-      }, icon), /*#__PURE__*/React__default['default'].createElement("ul", null, this.rc())));
-    }
-  }]);
-
-  return Fab;
-}(React.PureComponent);
-
-_defineProperty__default['default'](Fab, "defaultProps", {
-  position: {
-    bottom: 0,
-    right: 0
-  },
-  event: 'hover'
-});
-
 exports.Action = Action;
 exports.Fab = Fab;

dist/fab.cjs.prod.js

@@ -7,3 +7,3 @@ "use strict";
 
-var _objectWithoutProperties = require("@babel/runtime/helpers/objectWithoutProperties"), React = require("react"), styled = require("styled-components"), _classCallCheck = require("@babel/runtime/helpers/classCallCheck"), _createClass = require("@babel/runtime/helpers/createClass"), _assertThisInitialized$1 = require("@babel/runtime/helpers/assertThisInitialized"), _inherits = require("@babel/runtime/helpers/inherits"), _defineProperty$1 = require("@babel/runtime/helpers/defineProperty");
+var _objectWithoutProperties = require("@babel/runtime/helpers/objectWithoutProperties"), React = require("react"), styled = require("styled-components"), _slicedToArray = require("@babel/runtime/helpers/slicedToArray");
 
@@ -16,6 +16,6 @@ function _interopDefault(e) {
 
-var _objectWithoutProperties__default = _interopDefault(_objectWithoutProperties), React__default = _interopDefault(React), styled__default = _interopDefault(styled), _classCallCheck__default = _interopDefault(_classCallCheck), _createClass__default = _interopDefault(_createClass), _assertThisInitialized__default = _interopDefault(_assertThisInitialized$1), _inherits__default = _interopDefault(_inherits), _defineProperty__default = _interopDefault(_defineProperty$1), StyledMainButton = styled__default.default.button.withConfig({
+var _objectWithoutProperties__default = _interopDefault(_objectWithoutProperties), React__default = _interopDefault(React), styled__default = _interopDefault(styled), _slicedToArray__default = _interopDefault(_slicedToArray), StyledMainButton = styled__default.default.button.withConfig({
   displayName: "styled__StyledMainButton",
   componentId: "ps9aer-0"
-})([ "height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;> *{transition:ease-in-out transform 0.2s;}" ]), StyledActionWrapper = styled__default.default.li.withConfig({
+})([ "height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;&:focus{outline:none;}> *{transition:ease-in-out transform 0.2s;}" ]), StyledActionWrapper = styled__default.default.li.withConfig({
   displayName: "styled__StyledActionWrapper",
@@ -29,3 +29,3 @@ componentId: "ps9aer-1"
   componentId: "ps9aer-3"
-})([ "height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;" ]), StyledFab = styled__default.default.ul.withConfig({
+})([ "height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;&:focus{outline:none;}" ]), StyledFab = styled__default.default.ul.withConfig({
   displayName: "styled__StyledFab",
@@ -72,125 +72,55 @@ componentId: "ps9aer-4"
 
-function _getPrototypeOf(o) {
-  return (_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  })(o);
-}
-
-function _isNativeReflectConstruct() {
-  if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
-  if (Reflect.construct.sham) return !1;
-  if ("function" == typeof Proxy) return !0;
-  try {
-    return Date.prototype.toString.call(Reflect.construct(Date, [], (function() {}))), 
-    !0;
-  } catch (e) {
-    return !1;
-  }
-}
-
-function _assertThisInitialized(self) {
-  if (void 0 === self) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  return !call || "object" != typeof call && "function" != typeof call ? _assertThisInitialized(self) : call;
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-  return function() {
-    var result, Super = _getPrototypeOf(Derived);
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else result = Super.apply(this, arguments);
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
 var MainButton = function(_ref) {
   var children = _ref.children, rest = _objectWithoutProperties__default.default(_ref, [ "children" ]);
   return React__default.default.createElement(StyledMainButton, rest, children);
-}, Fab = function(_PureComponent) {
-  _inherits__default.default(Fab, _PureComponent);
-  var _super = _createSuper(Fab);
-  function Fab() {
-    var _this;
-    _classCallCheck__default.default(this, Fab);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
-    return _this = _super.call.apply(_super, [ this ].concat(args)), _defineProperty__default.default(_assertThisInitialized__default.default(_this), "state", {
-      open: !1
-    }), _defineProperty__default.default(_assertThisInitialized__default.default(_this), "enter", (function() {
-      return "hover" === _this.props.event && _this.open();
-    })), _defineProperty__default.default(_assertThisInitialized__default.default(_this), "leave", (function() {
-      return "hover" === _this.props.event && _this.close();
-    })), _defineProperty__default.default(_assertThisInitialized__default.default(_this), "open", (function() {
-      return _this.setState({
-        open: !0
-      });
-    })), _defineProperty__default.default(_assertThisInitialized__default.default(_this), "close", (function() {
-      return _this.setState({
-        open: !1
-      });
-    })), _defineProperty__default.default(_assertThisInitialized__default.default(_this), "toggle", (function() {
-      return "click" === _this.props.event ? _this.state.open ? _this.close() : _this.open() : null;
-    })), _defineProperty__default.default(_assertThisInitialized__default.default(_this), "actionOnClick", (function(userFunc) {
-      _this.setState({
-        open: !1
-      }, (function() {
-        setTimeout((function() {
+};
+
+function Fab(_ref) {
+  var _ref$event = _ref.event, event = void 0 === _ref$event ? "hover" : _ref$event, children = _ref.children, _ref$position = _ref.position, position = void 0 === _ref$position ? {
+    bottom: 0,
+    right: 0
+  } : _ref$position, icon = _ref.icon, mainButtonStyles = _ref.mainButtonStyles, _useState = React.useState(!1), _useState2 = _slicedToArray__default.default(_useState, 2), isOpen = _useState2[0], setIsOpen = _useState2[1], open = function() {
+    return setIsOpen(!0);
+  }, close = function() {
+    return setIsOpen(!1);
+  };
+  return React__default.default.createElement(StyledFab, {
+    onMouseEnter: function() {
+      return "hover" === event && open();
+    },
+    onMouseLeave: function() {
+      return "hover" === event && close();
+    },
+    isOpen: isOpen,
+    style: position
+  }, React__default.default.createElement(StyledActions, null, React__default.default.createElement(MainButton, {
+    onClick: function() {
+      return "click" === event ? setIsOpen(!isOpen) : null;
+    },
+    style: mainButtonStyles,
+    role: "button",
+    "aria-label": "Floating menu",
+    tabIndex: "0"
+  }, icon), React__default.default.createElement("ul", null, (React__default.default.Children.count(children) > 6 && console.warn("@uidu/fab only supports up to 6 action buttons"), 
+  React__default.default.Children.map(children, (function(ch, i) {
+    return React__default.default.createElement(StyledActionWrapper, {
+      className: "".concat("top" in position ? "top" : "")
+    }, React__default.default.cloneElement(ch, _objectSpread2(_objectSpread2({
+      "data-testid": "action-button-".concat(i),
+      "aria-label": ch.props.text || "Menu button ".concat(i + 1),
+      "aria-hidden": !isOpen
+    }, ch.props), {}, {
+      onClick: function() {
+        return userFunc = ch.props.onClick, setIsOpen(!1), void setTimeout((function() {
           userFunc();
         }), 1);
-      }));
-    })), _this;
-  }
-  return _createClass__default.default(Fab, [ {
-    key: "rc",
-    value: function() {
-      var _this2 = this, _this$props = this.props, c = _this$props.children, p = _this$props.position, open = this.state.open;
-      return React__default.default.Children.count(c) > 6 && console.warn("@uidu/fab only supports up to 6 action buttons"), 
-      React__default.default.Children.map(c, (function(ch, i) {
-        return React__default.default.createElement(StyledActionWrapper, {
-          className: "".concat("top" in p ? "top" : "")
-        }, React__default.default.cloneElement(ch, _objectSpread2(_objectSpread2({
-          "data-testid": "action-button-".concat(i),
-          "aria-label": ch.props.text || "Menu button ".concat(i + 1),
-          "aria-hidden": !open
-        }, ch.props), {}, {
-          onClick: function() {
-            return _this2.actionOnClick(ch.props.onClick);
-          }
-        })), ch.props.text && React__default.default.createElement("span", {
-          className: "right" in p ? "right" : "",
-          "aria-hidden": !open
-        }, ch.props.text));
-      }));
-    }
-  }, {
-    key: "render",
-    value: function() {
-      var _this$props2 = this.props, position = _this$props2.position, icon = _this$props2.icon, mainButtonStyles = _this$props2.mainButtonStyles;
-      return React__default.default.createElement(StyledFab, {
-        onMouseEnter: this.enter,
-        onMouseLeave: this.leave,
-        isOpen: this.state.open,
-        style: position
-      }, React__default.default.createElement(StyledActions, null, React__default.default.createElement(MainButton, {
-        onClick: this.toggle,
-        style: mainButtonStyles,
-        role: "button",
-        "aria-label": "Floating menu",
-        tabIndex: "0"
-      }, icon), React__default.default.createElement("ul", null, this.rc())));
-    }
-  } ]), Fab;
-}(React.PureComponent);
+        var userFunc;
+      }
+    })), ch.props.text && React__default.default.createElement("span", {
+      className: "right" in position ? "right" : "",
+      "aria-hidden": !isOpen
+    }, ch.props.text));
+  }))))));
+}
 
-_defineProperty__default.default(Fab, "defaultProps", {
-  position: {
-    bottom: 0,
-    right: 0
-  },
-  event: "hover"
-}), exports.Action = Action, exports.Fab = Fab;
+exports.Action = Action, exports.Fab = Fab;

dist/fab.esm.js

 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import React, { PureComponent } from 'react';
+import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
-import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
-import _createClass from '@babel/runtime/helpers/esm/createClass';
-import _assertThisInitialized$1 from '@babel/runtime/helpers/esm/assertThisInitialized';
-import _inherits from '@babel/runtime/helpers/esm/inherits';
-import _defineProperty$1 from '@babel/runtime/helpers/esm/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 
@@ -13,3 +9,3 @@ var StyledMainButton = styled.button.withConfig({
   componentId: "ps9aer-0"
-})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;> *{transition:ease-in-out transform 0.2s;}"]);
+})(["height:48px;width:48px;z-index:9999;background-color:#666666;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;font-size:18px;&:focus{outline:none;}> *{transition:ease-in-out transform 0.2s;}"]);
 var StyledActionWrapper = styled.li.withConfig({
@@ -26,3 +22,3 @@ displayName: "styled__StyledActionWrapper",
   componentId: "ps9aer-3"
-})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;"]);
+})(["height:40px;width:40px;background-color:#aaaaaa;display:inline-flex;justify-content:center;align-items:center;position:relative;border:none;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,0.14),0 4px 8px rgba(0,0,0,0.28);cursor:pointer;outline:none;padding:0;-webkit-user-drag:none;font-weight:bold;color:#f1f1f1;margin-right:2px;font-size:1rem;z-index:10000;&:focus{outline:none;}"]);
 var StyledFab = styled.ul.withConfig({
@@ -97,55 +93,2 @@ displayName: "styled__StyledFab",
 
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
-}
-
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  }
-
-  return _assertThisInitialized(self);
-}
-
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
-}
-
 var MainButton = (function (_ref) {
@@ -158,120 +101,81 @@ var children = _ref.children,
 
-var Fab = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Fab, _PureComponent);
+function Fab(_ref) {
+  var _ref$event = _ref.event,
+      event = _ref$event === void 0 ? 'hover' : _ref$event,
+      children = _ref.children,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? {
+    bottom: 0,
+    right: 0
+  } : _ref$position,
+      icon = _ref.icon,
+      mainButtonStyles = _ref.mainButtonStyles;
 
-  var _super = _createSuper(Fab);
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
 
-  function Fab() {
-    var _this;
+  var enter = function enter() {
+    return event === 'hover' && open();
+  };
 
-    _classCallCheck(this, Fab);
+  var leave = function leave() {
+    return event === 'hover' && close();
+  };
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var open = function open() {
+    return setIsOpen(true);
+  };
 
-    _this = _super.call.apply(_super, [this].concat(args));
+  var close = function close() {
+    return setIsOpen(false);
+  };
 
-    _defineProperty$1(_assertThisInitialized$1(_this), "state", {
-      open: false
-    });
+  var toggle = function toggle() {
+    return event === 'click' ? setIsOpen(!isOpen) : null;
+  };
 
-    _defineProperty$1(_assertThisInitialized$1(_this), "enter", function () {
-      return _this.props.event === 'hover' && _this.open();
-    });
+  var actionOnClick = function actionOnClick(userFunc) {
+    setIsOpen(false);
+    setTimeout(function () {
+      // Hack to allow the FAB to close before the user event fires
+      userFunc();
+    }, 1);
+  };
 
-    _defineProperty$1(_assertThisInitialized$1(_this), "leave", function () {
-      return _this.props.event === 'hover' && _this.close();
+  var rc = function rc() {
+    if (React.Children.count(children) > 6) console.warn('@uidu/fab only supports up to 6 action buttons');
+    return React.Children.map(children, function (ch, i) {
+      return /*#__PURE__*/React.createElement(StyledActionWrapper, {
+        className: "".concat('top' in position ? 'top' : '')
+      }, /*#__PURE__*/React.cloneElement(ch, _objectSpread2(_objectSpread2({
+        'data-testid': "action-button-".concat(i),
+        'aria-label': ch.props.text || "Menu button ".concat(i + 1),
+        'aria-hidden': !isOpen
+      }, ch.props), {}, {
+        onClick: function onClick() {
+          return actionOnClick(ch.props.onClick);
+        }
+      })), ch.props.text && /*#__PURE__*/React.createElement("span", {
+        className: 'right' in position ? 'right' : '',
+        "aria-hidden": !isOpen
+      }, ch.props.text));
     });
+  };
 
-    _defineProperty$1(_assertThisInitialized$1(_this), "open", function () {
-      return _this.setState({
-        open: true
-      });
-    });
+  return /*#__PURE__*/React.createElement(StyledFab, {
+    onMouseEnter: enter,
+    onMouseLeave: leave,
+    isOpen: isOpen,
+    style: position
+  }, /*#__PURE__*/React.createElement(StyledActions, null, /*#__PURE__*/React.createElement(MainButton, {
+    onClick: toggle,
+    style: mainButtonStyles,
+    role: "button",
+    "aria-label": "Floating menu",
+    tabIndex: "0"
+  }, icon), /*#__PURE__*/React.createElement("ul", null, rc())));
+}
 
-    _defineProperty$1(_assertThisInitialized$1(_this), "close", function () {
-      return _this.setState({
-        open: false
-      });
-    });
-
-    _defineProperty$1(_assertThisInitialized$1(_this), "toggle", function () {
-      return _this.props.event === 'click' ? _this.state.open ? _this.close() : _this.open() : null;
-    });
-
-    _defineProperty$1(_assertThisInitialized$1(_this), "actionOnClick", function (userFunc) {
-      _this.setState({
-        open: false
-      }, function () {
-        // Hack to allow the FAB to close before the user event fires
-        setTimeout(function () {
-          userFunc();
-        }, 1);
-      });
-    });
-
-    return _this;
-  }
-
-  _createClass(Fab, [{
-    key: "rc",
-    value: function rc() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          c = _this$props.children,
-          p = _this$props.position;
-      var open = this.state.open;
-      if (React.Children.count(c) > 6) console.warn('@uidu/fab only supports up to 6 action buttons');
-      return React.Children.map(c, function (ch, i) {
-        return /*#__PURE__*/React.createElement(StyledActionWrapper, {
-          className: "".concat('top' in p ? 'top' : '')
-        }, /*#__PURE__*/React.cloneElement(ch, _objectSpread2(_objectSpread2({
-          'data-testid': "action-button-".concat(i),
-          'aria-label': ch.props.text || "Menu button ".concat(i + 1),
-          'aria-hidden': !open
-        }, ch.props), {}, {
-          onClick: function onClick() {
-            return _this2.actionOnClick(ch.props.onClick);
-          }
-        })), ch.props.text && /*#__PURE__*/React.createElement("span", {
-          className: 'right' in p ? 'right' : '',
-          "aria-hidden": !open
-        }, ch.props.text));
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          position = _this$props2.position,
-          icon = _this$props2.icon,
-          mainButtonStyles = _this$props2.mainButtonStyles;
-      return /*#__PURE__*/React.createElement(StyledFab, {
-        onMouseEnter: this.enter,
-        onMouseLeave: this.leave,
-        isOpen: this.state.open,
-        style: position
-      }, /*#__PURE__*/React.createElement(StyledActions, null, /*#__PURE__*/React.createElement(MainButton, {
-        onClick: this.toggle,
-        style: mainButtonStyles,
-        role: "button",
-        "aria-label": "Floating menu",
-        tabIndex: "0"
-      }, icon), /*#__PURE__*/React.createElement("ul", null, this.rc())));
-    }
-  }]);
-
-  return Fab;
-}(PureComponent);
-
-_defineProperty$1(Fab, "defaultProps", {
-  position: {
-    bottom: 0,
-    right: 0
-  },
-  event: 'hover'
-});
-
 export { Action, Fab };

dist/package.json

 {
 	"name": "@uidu/fab",
-	"version": "0.3.9"
+	"version": "0.3.10"
 }

package.json

 {
   "name": "@uidu/fab",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Floating action buttons",

No alert changes

Worsened metrics

Total package byte prevSize

30347

decreased by-24.77%

Lines of code

489

decreased by-32.64%

No dependency changes