orcs-design-system 3.2.4 → 3.2.6

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -1,4 +1,3 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useRef, useState, useImperativeHandle } from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
@@ -11,136 +10,145 @@ import Icon from "../Icon";
 import Box from "../Box";
 import Button from "../Button";
 import TextArea from "../TextArea";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default {
   title: "Components/ActionsMenu",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      pb: "150px"
-    }, storyFn());
-  }],
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    pb: "150px",
+    children: storyFn()
+  })],
   component: ActionsMenu
 };
-export var defaultActionsMenu = function defaultActionsMenu() {
-  return /*#__PURE__*/React.createElement(ActionsMenu, null, /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    href: "https://orchestrated.io/"
-  }, "Open details page"), /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    as: Link,
-    to: "/"
-  }, "Edit")), /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    onClick: action("clicked")
-  }, "Remove"));
-};
+export const defaultActionsMenu = () => /*#__PURE__*/_jsxs(ActionsMenu, {
+  children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+    href: "https://orchestrated.io/",
+    children: "Open details page"
+  }), /*#__PURE__*/_jsx(BrowserRouter, {
+    children: /*#__PURE__*/_jsx(ActionsMenuItem, {
+      as: Link,
+      to: "/",
+      children: "Edit"
+    })
+  }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+    onClick: action("clicked"),
+    children: "Remove"
+  })]
+});
 defaultActionsMenu.storyName = "Default";
-export var leftOffsetActionsMenu = function leftOffsetActionsMenu() {
-  return /*#__PURE__*/React.createElement(Flex, {
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React.createElement(ActionsMenu, {
+export const leftOffsetActionsMenu = () => /*#__PURE__*/_jsx(Flex, {
+  justifyContent: "flex-end",
+  children: /*#__PURE__*/_jsxs(ActionsMenu, {
     ariaLabel: "Options Menu",
-    direction: "left"
-  }, /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    href: "https://orchestrated.io/"
-  }, "Open details page"), /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    as: Link,
-    to: "/"
-  }, "Edit")), /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    onClick: action("clicked")
-  }, "Remove")));
-};
+    direction: "left",
+    children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+      href: "https://orchestrated.io/",
+      children: "Open details page"
+    }), /*#__PURE__*/_jsx(BrowserRouter, {
+      children: /*#__PURE__*/_jsx(ActionsMenuItem, {
+        as: Link,
+        to: "/",
+        children: "Edit"
+      })
+    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+      onClick: action("clicked"),
+      children: "Remove"
+    })]
+  })
+});
 leftOffsetActionsMenu.storyName = "Left offset";
-var MenuItems = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var closeMenu = _ref.closeMenu,
-    reasons = _ref.reasons;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showOther = _useState2[0],
-    setShowOther = _useState2[1];
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectedReason = _useState4[0],
-    setSelectedReason = _useState4[1];
-  var _useState5 = useState(""),
-    _useState6 = _slicedToArray(_useState5, 2),
-    otherReason = _useState6[0],
-    setOtherReason = _useState6[1];
-  var reset = function reset() {
+const MenuItems = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    closeMenu,
+    reasons
+  } = _ref;
+  const [showOther, setShowOther] = useState(false);
+  const [selectedReason, setSelectedReason] = useState(null);
+  const [otherReason, setOtherReason] = useState("");
+  const reset = () => {
     setShowOther(false);
   };
-  var resetAndCloseMenu = function resetAndCloseMenu() {
+  const resetAndCloseMenu = () => {
     reset();
     closeMenu();
   };
-  useImperativeHandle(ref, function () {
-    return {
-      reset: reset
-    };
-  });
-  var clickOther = function clickOther() {
+  useImperativeHandle(ref, () => ({
+    reset
+  }));
+  const clickOther = () => {
     setSelectedReason("other");
     setShowOther(true);
   };
-  var setReason = function setReason(id) {
-    return function () {
-      // TODO: Make the call to back end
-      setSelectedReason(id);
-      setOtherReason("");
-      resetAndCloseMenu();
-    };
+  const setReason = id => () => {
+    // TODO: Make the call to back end
+    setSelectedReason(id);
+    setOtherReason("");
+    resetAndCloseMenu();
   };
-  var onOtherReasonChange = function onOtherReasonChange(e) {
+  const onOtherReasonChange = e => {
     setOtherReason(e.target.value);
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsMenuHeading, {
-    onClick: reset,
-    canClick: showOther
-  }, showOther && /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "angle-left"],
-    mr: "xs"
-  }), " Select reason"), !showOther && /*#__PURE__*/React.createElement(React.Fragment, null, reasons.map(function (_ref2) {
-    var id = _ref2.id,
-      label = _ref2.label;
-    if (id === "other") {
-      return /*#__PURE__*/React.createElement(ActionsMenuItem, {
-        key: id,
-        type: "button",
-        selected: selectedReason === id,
-        onClick: clickOther
-      }, /*#__PURE__*/React.createElement(Flex, {
-        alignItems: "center",
-        justifyContent: "space-between"
-      }, label, /*#__PURE__*/React.createElement(Icon, {
-        icon: ["fas", "pen"],
-        size: "sm"
-      })));
-    }
-    return /*#__PURE__*/React.createElement(ActionsMenuItem, {
-      key: id,
-      type: "button",
-      selected: selectedReason === id,
-      onClick: setReason(id)
-    }, label);
-  })), showOther && /*#__PURE__*/React.createElement(Box, {
-    id: "editableContent",
-    p: "s"
-  }, /*#__PURE__*/React.createElement(TextArea, {
-    inverted: true,
-    id: "TextArea01",
-    label: "Reason for rejection",
-    cols: "35",
-    rows: "3",
-    defaultValue: otherReason,
-    onChange: onOtherReasonChange
-  }), /*#__PURE__*/React.createElement(Button, {
-    onClick: resetAndCloseMenu,
-    small: true,
-    variant: "danger",
-    mt: "s"
-  }, "Reject request")));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ActionsMenuHeading, {
+      onClick: reset,
+      canClick: showOther,
+      children: [showOther && /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "angle-left"],
+        mr: "xs"
+      }), " Select reason"]
+    }), !showOther && /*#__PURE__*/_jsx(_Fragment, {
+      children: reasons.map(_ref2 => {
+        let {
+          id,
+          label
+        } = _ref2;
+        if (id === "other") {
+          return /*#__PURE__*/_jsx(ActionsMenuItem, {
+            type: "button",
+            selected: selectedReason === id,
+            onClick: clickOther,
+            children: /*#__PURE__*/_jsxs(Flex, {
+              alignItems: "center",
+              justifyContent: "space-between",
+              children: [label, /*#__PURE__*/_jsx(Icon, {
+                icon: ["fas", "pen"],
+                size: "sm"
+              })]
+            })
+          }, id);
+        }
+        return /*#__PURE__*/_jsx(ActionsMenuItem, {
+          type: "button",
+          selected: selectedReason === id,
+          onClick: setReason(id),
+          children: label
+        }, id);
+      })
+    }), showOther && /*#__PURE__*/_jsxs(Box, {
+      id: "editableContent",
+      p: "s",
+      children: [/*#__PURE__*/_jsx(TextArea, {
+        inverted: true,
+        id: "TextArea01",
+        label: "Reason for rejection",
+        cols: "35",
+        rows: "3",
+        defaultValue: otherReason,
+        onChange: onOtherReasonChange
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: resetAndCloseMenu,
+        small: true,
+        variant: "danger",
+        mt: "s",
+        children: "Reject request"
+      })]
+    })]
+  });
 });
 MenuItems.propTypes = {
   closeMenu: PropTypes.bool,
   reasons: PropTypes.array
 };
-var Reasons = [{
+const Reasons = [{
   id: "tooMany",
   label: "Too many people"
 }, {
@@ -153,173 +161,192 @@ var Reasons = [{
   id: "other",
   label: "Other"
 }];
-export var advancedActionsMenu = function advancedActionsMenu() {
-  var ref = /*#__PURE__*/React.createRef(null);
-  var closeMenu = function closeMenu() {
+export const advancedActionsMenu = () => {
+  const ref = /*#__PURE__*/React.createRef(null);
+  const closeMenu = () => {
     if (ref.current) {
       ref.current.closeMenu();
     }
   };
-  return /*#__PURE__*/React.createElement(Flex, {
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React.createElement(ActionsMenu, {
-    ref: ref,
-    direction: "left",
-    className: "ignore-onclickoutside",
-    customTriggerComponent: /*#__PURE__*/React.createElement(Button, {
-      variant: "default",
-      iconOnly: true,
-      type: "button",
-      width: "30px",
-      height: "30px"
-    }, /*#__PURE__*/React.createElement(Icon, {
-      icon: ["fas", "pen"],
-      size: "sm"
-    })),
-    closeOnClick: false
-  }, /*#__PURE__*/React.createElement(MenuItems, {
-    closeMenu: closeMenu,
-    reasons: Reasons
-  })));
+  return /*#__PURE__*/_jsx(Flex, {
+    justifyContent: "flex-end",
+    children: /*#__PURE__*/_jsx(ActionsMenu, {
+      ref: ref,
+      direction: "left",
+      className: "ignore-onclickoutside",
+      customTriggerComponent: /*#__PURE__*/_jsx(Button, {
+        variant: "default",
+        iconOnly: true,
+        type: "button",
+        width: "30px",
+        height: "30px",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "pen"],
+          size: "sm"
+        })
+      }),
+      closeOnClick: false,
+      children: /*#__PURE__*/_jsx(MenuItems, {
+        closeMenu: closeMenu,
+        reasons: Reasons
+      })
+    })
+  });
 };
 advancedActionsMenu.storyName = "Advanced Actions Menu";
-export var customActionsMenu = function customActionsMenu() {
-  var AdvancedActionsMenu = function AdvancedActionsMenu() {
-    var _useState7 = useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      toggleState = _useState8[0],
-      setToggle = _useState8[1];
-    var menuItemsRef = useRef(null);
-    var closeMenu = function closeMenu() {
+export const customActionsMenu = () => {
+  const AdvancedActionsMenu = () => {
+    const [toggleState, setToggle] = useState(false);
+    const menuItemsRef = useRef(null);
+    const closeMenu = () => {
       setToggle(false);
     };
-    var resetAndCloseMenu = function resetAndCloseMenu() {
+    const resetAndCloseMenu = () => {
       if (menuItemsRef.current) {
         menuItemsRef.current.reset();
       }
       closeMenu();
     };
-    var menuRef = useOnclickOutside(resetAndCloseMenu, {
+    const menuRef = useOnclickOutside(resetAndCloseMenu, {
       disabled: !toggleState
     });
-    var onToggle = function onToggle(e) {
+    const onToggle = e => {
       e.stopPropagation();
       setToggle(!toggleState);
     };
-    return /*#__PURE__*/React.createElement("div", {
-      ref: menuRef
-    }, /*#__PURE__*/React.createElement(Flex, {
-      justifyContent: "flex-end"
-    }, /*#__PURE__*/React.createElement(ActionsMenuBody, {
-      toggleState: toggleState,
-      onToggle: onToggle,
-      direction: "left",
-      customTriggerComponent: /*#__PURE__*/React.createElement(Button, {
-        variant: "danger",
-        iconOnly: true,
-        type: "button",
-        width: "30px",
-        height: "30px"
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: ["fas", "times"]
-      }))
-    }, /*#__PURE__*/React.createElement(MenuItems, {
-      ref: menuItemsRef,
-      closeMenu: closeMenu,
-      reasons: Reasons
-    }))));
+    return /*#__PURE__*/_jsx("div", {
+      ref: menuRef,
+      children: /*#__PURE__*/_jsx(Flex, {
+        justifyContent: "flex-end",
+        children: /*#__PURE__*/_jsx(ActionsMenuBody, {
+          toggleState: toggleState,
+          onToggle: onToggle,
+          direction: "left",
+          customTriggerComponent: /*#__PURE__*/_jsx(Button, {
+            variant: "danger",
+            iconOnly: true,
+            type: "button",
+            width: "30px",
+            height: "30px",
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: ["fas", "times"]
+            })
+          }),
+          children: /*#__PURE__*/_jsx(MenuItems, {
+            ref: menuItemsRef,
+            closeMenu: closeMenu,
+            reasons: Reasons
+          })
+        })
+      })
+    });
   };
-  return /*#__PURE__*/React.createElement(AdvancedActionsMenu, null);
+  return /*#__PURE__*/_jsx(AdvancedActionsMenu, {});
 };
 customActionsMenu.storyName = "Custom Actions Menu";
-export var textButtonActionsMenu = function textButtonActionsMenu() {
-  var TextButtonActionsMenu = function TextButtonActionsMenu() {
-    var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      toggleState = _useState10[0],
-      setToggle = _useState10[1];
-    var menuItemsRef = useRef(null);
-    var closeMenu = function closeMenu() {
+export const textButtonActionsMenu = () => {
+  const TextButtonActionsMenu = () => {
+    const [toggleState, setToggle] = useState(false);
+    const menuItemsRef = useRef(null);
+    const closeMenu = () => {
       setToggle(false);
     };
-    var resetAndCloseMenu = function resetAndCloseMenu() {
+    const resetAndCloseMenu = () => {
       if (menuItemsRef.current) {
         menuItemsRef.current.reset();
       }
       closeMenu();
     };
-    var menuRef = useOnclickOutside(resetAndCloseMenu, {
+    const menuRef = useOnclickOutside(resetAndCloseMenu, {
       disabled: !toggleState
     });
-    var onToggle = function onToggle(e) {
+    const onToggle = e => {
       e.stopPropagation();
       setToggle(!toggleState);
     };
-    return /*#__PURE__*/React.createElement("div", {
-      ref: menuRef
-    }, /*#__PURE__*/React.createElement(ActionsMenuBody, {
-      toggleState: toggleState,
-      onToggle: onToggle,
-      menuTopPosition: "30px",
-      menuLeftPosition: "0",
-      menuWidth: "120px",
-      customTriggerComponent: /*#__PURE__*/React.createElement(Button, {
-        variant: "ghost",
-        type: "button",
-        iconRight: true,
-        small: true
-      }, "Contact via...", /*#__PURE__*/React.createElement(Icon, {
-        icon: ["fas", "chevron-down"]
-      }))
-    }, /*#__PURE__*/React.createElement(ActionsMenuItem, {
-      href: "#"
-    }, "Email"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
-      href: "#"
-    }, "Phone"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
-      href: "#"
-    }, "MS Teams"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
-      href: "#"
-    }, "Slack")));
+    return /*#__PURE__*/_jsx("div", {
+      ref: menuRef,
+      children: /*#__PURE__*/_jsxs(ActionsMenuBody, {
+        toggleState: toggleState,
+        onToggle: onToggle,
+        menuTopPosition: "30px",
+        menuLeftPosition: "0",
+        menuWidth: "120px",
+        customTriggerComponent: /*#__PURE__*/_jsxs(Button, {
+          variant: "ghost",
+          type: "button",
+          iconRight: true,
+          small: true,
+          children: ["Contact via...", /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "chevron-down"]
+          })]
+        }),
+        children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+          href: "#",
+          children: "Email"
+        }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+          href: "#",
+          children: "Phone"
+        }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+          href: "#",
+          children: "MS Teams"
+        }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+          href: "#",
+          children: "Slack"
+        })]
+      })
+    });
   };
-  return /*#__PURE__*/React.createElement(TextButtonActionsMenu, null);
+  return /*#__PURE__*/_jsx(TextButtonActionsMenu, {});
 };
 textButtonActionsMenu.storyName = "Text Button Actions Menu";
-export var keepInViewExample = function keepInViewExample() {
-  return /*#__PURE__*/React.createElement(Flex, {
-    alignItems: "flex-end",
-    width: "100%",
-    flexDirection: "column"
-  }, /*#__PURE__*/React.createElement(ActionsMenu, {
-    mb: "r"
-  }, /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    href: "https://orchestrated.io/"
-  }, "Open details page"), /*#__PURE__*/React.createElement(BrowserRouter, null, /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    as: Link,
-    to: "/"
-  }, "Edit")), /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    onClick: action("clicked")
-  }, "Remove")), /*#__PURE__*/React.createElement(ActionsMenu, {
+export const keepInViewExample = () => /*#__PURE__*/_jsxs(Flex, {
+  alignItems: "flex-end",
+  width: "100%",
+  flexDirection: "column",
+  children: [/*#__PURE__*/_jsxs(ActionsMenu, {
+    mb: "r",
+    children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+      href: "https://orchestrated.io/",
+      children: "Open details page"
+    }), /*#__PURE__*/_jsx(BrowserRouter, {
+      children: /*#__PURE__*/_jsx(ActionsMenuItem, {
+        as: Link,
+        to: "/",
+        children: "Edit"
+      })
+    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+      onClick: action("clicked"),
+      children: "Remove"
+    })]
+  }), /*#__PURE__*/_jsxs(ActionsMenu, {
     menuTopPosition: "30px",
     menuLeftPosition: "0",
     menuWidth: "200px",
-    customTriggerComponent: /*#__PURE__*/React.createElement(Button, {
+    customTriggerComponent: /*#__PURE__*/_jsxs(Button, {
       variant: "ghost",
       type: "button",
       iconRight: true,
-      small: true
-    }, "Contact via...", /*#__PURE__*/React.createElement(Icon, {
-      icon: ["fas", "chevron-down"]
-    }))
-  }, /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    href: "#"
-  }, "Email"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    href: "#"
-  }, "Phone"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    href: "#"
-  }, "MS Teams"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
-    href: "#"
-  }, "Slack")));
-};
+      small: true,
+      children: ["Contact via...", /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "chevron-down"]
+      })]
+    }),
+    children: [/*#__PURE__*/_jsx(ActionsMenuItem, {
+      href: "#",
+      children: "Email"
+    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+      href: "#",
+      children: "Phone"
+    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+      href: "#",
+      children: "MS Teams"
+    }), /*#__PURE__*/_jsx(ActionsMenuItem, {
+      href: "#",
+      children: "Slack"
+    })]
+  })]
+});
 keepInViewExample.storyName = "Keep In View Example";
 defaultActionsMenu.__docgenInfo = {
   "description": "",