orcs-design-system 3.2.36 → 3.2.39

package/es/components/Modal/Modal.stories.js

@@ -47,7 +47,43 @@ export const basicModal = () => /*#__PURE__*/_jsx(Basic, {});
 basicModal.parameters = {
   docs: {
     source: {
-      code: "\nconst Basic = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  return (\n    <>\n      <Button onClick={handleOnButtonClick}>\n        Open basic modal\n      </Button>\n      <Modal\n        ariaLabel=\"Modal Title\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n      >\n        <Spacer mb=\"r\">\n          <H3>Modal Title</H3>\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: `
+const Basic = () => {
+  const [visible, setVisible] = useState(false);
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  return (
+    <>
+      <Button onClick={handleOnButtonClick}>
+        Open basic modal
+      </Button>
+      <Modal
+        ariaLabel="Modal Title"
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+      >
+        <Spacer mb="r">
+          <H3>Modal Title</H3>
+          <P>
+            Content of the modal. Modal accepts any child components or content.
+          </P>
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
     }
   }
 };
@@ -100,7 +136,80 @@ export const advancedModal = () => /*#__PURE__*/_jsx(Advanced, {});
 advancedModal.parameters = {
   docs: {
     source: {
-      code: "\nconst Advanced = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modal Title</H3>;\n\n  const modalFooter = (\n    <Button onClick={handleOnConfirm}>Go to full article</Button>\n  );\n\n  return (\n    <>\n      <Button onClick={handleOnButtonClick}>\n        Open advanced modal\n      </Button>\n      <Modal\n        maxWidth=\"500px\"\n        maxHeight=\"400px\"\n        height=\"90vh\"\n        width=\"90vw\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n      >\n        <Spacer my=\"r\">\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n            This content will be scrollable if it exeeds the height of the\n            modal.\n          </P>\n          <P>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n            culpa qui officia deserunt mollit anim id est laborum.\n          </P>\n          <P>\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n            quae ab illo inventore veritatis et quasi architecto beatae vitae\n            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores\n            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,\n            sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis\n            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut\n            aliquid ex ea commodi consequatur? Quis autem vel eum iure\n            reprehenderit qui in ea voluptate velit esse quam nihil molestiae\n            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n            pariatur?\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: `
+const Advanced = () => {
+  const [visible, setVisible] = useState(false);
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  const modalHeader = <H3>Modal Title</H3>;
+
+  const modalFooter = (
+    <Button onClick={handleOnConfirm}>Go to full article</Button>
+  );
+
+  return (
+    <>
+      <Button onClick={handleOnButtonClick}>
+        Open advanced modal
+      </Button>
+      <Modal
+        maxWidth="500px"
+        maxHeight="400px"
+        height="90vh"
+        width="90vw"
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        headerContent={modalHeader}
+        footerContent={modalFooter}
+      >
+        <Spacer my="r">
+          <P>
+            Content of the modal. Modal accepts any child components or content.
+            This content will be scrollable if it exeeds the height of the
+            modal.
+          </P>
+          <P>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </P>
+          <P>
+            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
+            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
+            quae ab illo inventore veritatis et quasi architecto beatae vitae
+            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
+            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,
+            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
+            sed quia non numquam eius modi tempora incidunt ut labore et dolore
+            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
+            aliquid ex ea commodi consequatur? Quis autem vel eum iure
+            reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla
+            pariatur?
+          </P>
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
     }
   }
 };
@@ -159,7 +268,61 @@ export const basicDialogueModal = () => /*#__PURE__*/_jsx(BasicDialogue, {});
 basicDialogueModal.parameters = {
   docs: {
     source: {
-      code: "\nconst BasicDialogue = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} px=\"l\">\n          OK\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)}>\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n\n  return (\n    <>\n      <Button\n        onClick={handleOnButtonClick}\n        variant=\"danger\"\n        iconLeft\n      >\n        <Icon icon={[\"fas\", \"trash\"]} />\n        Delete data\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        footerContent={modalFooter}\n      >\n        <Spacer mb=\"r\">\n          <P weight=\"bold\" marginBottom=\"sm\">\n            This will remove all data from the application.\n          </P>\n          <P>Do you wish to continue?</P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: `
+const BasicDialogue = () => {
+  const [visible, setVisible] = useState(false);
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  const modalFooter = (
+    <Flex>
+      <Spacer mr="s">
+        <Button onClick={handleOnConfirm} px="l">
+          OK
+        </Button>
+        <Button variant="ghost" onClick={onToggleModal(false)}>
+          Cancel
+        </Button>
+      </Spacer>
+    </Flex>
+  );
+
+  return (
+    <>
+      <Button
+        onClick={handleOnButtonClick}
+        variant="danger"
+        iconLeft
+      >
+        <Icon icon={["fas", "trash"]} />
+        Delete data
+      </Button>
+      <Modal
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        footerContent={modalFooter}
+      >
+        <Spacer mb="r">
+          <P weight="bold" marginBottom="sm">
+            This will remove all data from the application.
+          </P>
+          <P>Do you wish to continue?</P>
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
     }
   }
 };
@@ -231,7 +394,66 @@ export const editDialogueModal = () => /*#__PURE__*/_jsx(EditDialogue, {});
 editDialogueModal.parameters = {
   docs: {
     source: {
-      code: "\nconst EditDialogue = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modify Details</H3>;\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} variant=\"success\" iconLeft>\n          <Icon icon={[\"fas\", \"save\"]} />\n          Save\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)} iconLeft>\n          <Icon icon={[\"fas\", \"times\"]} />\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n  return (\n    <>\n      <Button onClick={handleOnButtonClick} iconLeft>\n        <Icon icon={[\"fas\", \"edit\"]} />\n        Modify Details\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n      >\n        <Spacer my=\"r\">\n          <TextInput\n            id=\"textInput1\"\n            key=\"textInput1\"\n            type=\"text\"\n            fullWidth\n            label=\"Name\"\n            placeholder=\"E.g. Awesome Project\"\n          />\n          <TextArea id=\"TextArea01\" label=\"Description\" fullWidth />\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: `
+const EditDialogue = () => {
+  const [visible, setVisible] = useState(false);
+
+  const handleOnButtonClick = () => {
+    setVisible(true);
+  };
+
+  const handleOnConfirm = () => {
+    setVisible(false);
+  };
+
+  const onToggleModal = (visible) => () => {
+    setVisible(visible);
+  };
+
+  const modalHeader = <H3>Modify Details</H3>;
+
+  const modalFooter = (
+    <Flex>
+      <Spacer mr="s">
+        <Button onClick={handleOnConfirm} variant="success" iconLeft>
+          <Icon icon={["fas", "save"]} />
+          Save
+        </Button>
+        <Button variant="ghost" onClick={onToggleModal(false)} iconLeft>
+          <Icon icon={["fas", "times"]} />
+          Cancel
+        </Button>
+      </Spacer>
+    </Flex>
+  );
+  return (
+    <>
+      <Button onClick={handleOnButtonClick} iconLeft>
+        <Icon icon={["fas", "edit"]} />
+        Modify Details
+      </Button>
+      <Modal
+        visible={visible}
+        handleOnConfirm={handleOnConfirm}
+        onClose={onToggleModal(false)}
+        headerContent={modalHeader}
+        footerContent={modalFooter}
+      >
+        <Spacer my="r">
+          <TextInput
+            id="textInput1"
+            key="textInput1"
+            type="text"
+            fullWidth
+            label="Name"
+            placeholder="E.g. Awesome Project"
+          />
+          <TextArea id="TextArea01" label="Description" fullWidth />
+        </Spacer>
+      </Modal>
+    </>
+  );
+};`
     }
   }
 };

package/es/components/Modal/index.js

@@ -81,7 +81,7 @@ const Modal = _ref => {
   }, [restProps.ariaLabel, headerContent]);
   const focusLastActiveElement = useCallback(() => {
     if (!lastActiveElement) return;
-    if (lastActiveElement !== null && lastActiveElement !== void 0 && lastActiveElement.dataset.actionMenuId && isHidden(lastActiveElement === null || lastActiveElement === void 0 ? void 0 : lastActiveElement.parentNode)) {
+    if (lastActiveElement?.dataset.actionMenuId && isHidden(lastActiveElement?.parentNode)) {
       const actionMenu = document.getElementById(lastActiveElement.dataset.actionMenuId);
       actionMenu.focus();
     } else {

package/es/components/Popover/index.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal, safePolygon, FloatingFocusManager } from "@floating-ui/react";
 import themeGet from "@styled-system/theme-get";
 import styled from "styled-components";
@@ -28,9 +28,8 @@ const TooltipControl = styled.div.withConfig({
 const StyledPopover = styled.div.withConfig({
   displayName: "Popover__StyledPopover",
   componentId: "sc-1bwoak-2"
-})(["font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;color:", ";outline:0;padding:", ";border-radius:", ";width:", ";background:", ";border:1px solid ", ";box-shadow:", ";user-select:", ";pointer-events:none;opacity:0;visibility:hidden;&.visible{opacity:1;pointer-events:auto;visibility:visible;}& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}&.top{&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}}&.topRight,&.top-end{&:before{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:1px;top:auto;margin-top:0;bottom:-6px;margin-left:-7px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&:before{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:1px;bottom:auto;margin-top:0;top:-6px;margin-left:-7px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}}&.bottomLeft,&.bottom-start{&:before{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-7px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&:before{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-7px;transform:rotate(225deg);border-width:5px 10px 5px 0;}}"], themeGet("fontSizes.0"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props => props.textAlign ? props.textAlign : "left", themeGet("colors.greyDarkest"), themeGet("space.3"), themeGet("radii.1"), props => props.width ? props.width : "200px", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => props.enableSelectAll ? "all" : "auto", themeGet("fontSizes.0"), themeGet("colors.white"), themeGet("colors.greyMid"));
+})(["font-size:", ";line-height:", ";font-weight:", ";text-align:", ";word-break:break-word;color:", ";outline:0;padding:", ";border-radius:", ";width:", ";background:", ";border:1px solid ", ";box-shadow:", ";user-select:", ";&.hack-for-legacy-tests{position:absolute;pointer-events:none;opacity:0;visibility:hidden;height:0;width:0;padding:0;overflow:hidden;}&.visible{opacity:1;pointer-events:auto;visibility:visible;}& a{font-size:", ";}&:before{content:\"\";z-index:2;height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;border-color:transparent;border-right-color:", ";left:-6px;top:50%;margin-top:-6px;position:absolute;}&:after{content:\"\";z-index:1;position:absolute;border-color:transparent;border-right-color:", ";height:0;width:0;border-style:solid;border-width:6px 6px 6px 0;left:-7px;top:50%;margin-top:-6px;}&.top{&:before{left:50%;top:auto;margin-top:0;bottom:-9px;margin-left:-3px;transform:rotate(-90deg);}&:after{left:50%;top:auto;margin-top:0;bottom:-10px;margin-left:-3px;transform:rotate(-90deg);}}&.topRight,&.top-end{&:before{left:1px;top:auto;margin-top:0;bottom:-5px;margin-left:-6px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}&:after{left:1px;top:auto;margin-top:0;bottom:-6px;margin-left:-7px;transform:rotate(-45deg);border-width:5px 10px 5px 0;}}&.bottomRight,&.bottom-end{&:before{left:1px;bottom:auto;margin-top:0;top:-5px;margin-left:-6px;transform:rotate(45deg);border-width:5px 10px 5px 0;}&:after{left:1px;bottom:auto;margin-top:0;top:-6px;margin-left:-7px;transform:rotate(45deg);border-width:5px 10px 5px 0;}}&.bottom{&:before{left:50%;top:-9px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}&:after{left:50%;top:-10px;margin-top:0;margin-left:-3px;transform:rotate(90deg);}}&.bottomLeft,&.bottom-start{&:before{right:1px;left:auto;bottom:auto;margin-top:0;top:-5px;margin-right:-6px;transform:rotate(135deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;bottom:auto;margin-top:0;top:-6px;margin-right:-7px;transform:rotate(135deg);border-width:5px 10px 5px 0;}}&.left{&:before{left:auto;right:-6px;transform:rotate(180deg);}&:after{left:auto;right:-7px;transform:rotate(180deg);top:50%;margin-top:-6px;}}&.topLeft,&.top-start{&:before{right:1px;left:auto;top:auto;margin-top:0;bottom:-5px;margin-right:-6px;transform:rotate(225deg);border-width:5px 10px 5px 0;}&:after{right:1px;left:auto;top:auto;margin-top:0;bottom:-6px;margin-right:-7px;transform:rotate(225deg);border-width:5px 10px 5px 0;}}"], themeGet("fontSizes.0"), themeGet("fontSizes.1"), themeGet("fontWeights.1"), props => props.textAlign ? props.textAlign : "left", themeGet("colors.greyDarkest"), themeGet("space.3"), themeGet("radii.1"), props => props.width ? props.width : "200px", themeGet("colors.white"), themeGet("colors.greyLight"), themeGet("shadows.boxDefault"), props => props.enableSelectAll ? "all" : "auto", themeGet("fontSizes.0"), themeGet("colors.white"), themeGet("colors.greyMid"));
 export default function Popover(_ref) {
-  var _refs$floating;
   let {
     children,
     direction = "right",
@@ -82,28 +81,23 @@ export default function Popover(_ref) {
     getReferenceProps,
     getFloatingProps
   } = useInteractions([hover, focus, dismiss, role]);
-  const triggerProps = {
+  const triggerProps = useMemo(() => ({
     ...getReferenceProps({
       ref: refs.setReference
     }),
     tabIndex: "0"
-  };
-  const directionClass = context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement;
-  const Popover = /*#__PURE__*/_jsx(StyledPopover, {
-    textAlign: textAlign,
-    width: width,
-    enableSelectAll: enableSelectAll,
-    className: "Tooltip popover ".concat(visible ? "visible" : "", " ").concat(directionClass),
-    ref: refs.setFloating,
-    style: {
-      ...floatingStyles,
-      zIndex: getFloatingUiZIndex(context.refs.reference)
-    },
-    ...getFloatingProps(),
-    ariaLabel: ariaLabel,
-    children: text
-  });
-  const containsLinks = (_refs$floating = refs.floating) === null || _refs$floating === void 0 || (_refs$floating = _refs$floating.current) === null || _refs$floating === void 0 ? void 0 : _refs$floating.querySelectorAll("a").length;
+  }), [getReferenceProps, refs.setReference]);
+  const directionClass = useMemo(() => context.placement === DIRECTIONS_MAP[direction] ? direction : context.placement, [context.placement, direction]);
+  const style = useMemo(() => ({
+    ...floatingStyles,
+    zIndex: getFloatingUiZIndex(context.refs.reference)
+  }), [floatingStyles, context.refs.reference]);
+  const containsLinks = refs.floating?.current?.querySelectorAll("a").length;
+  const visiblePopoverClassName = useMemo(() => `Tooltip popover visible ${directionClass}`, [directionClass]);
+  const floatingProps = useMemo(() => getFloatingProps({
+    ...props,
+    className: `${props.className} ${visiblePopoverClassName}`
+  }), [getFloatingProps, props, visiblePopoverClassName]);
   return /*#__PURE__*/_jsxs(Container, {
     inlineBlock: inlineBlock,
     ...props,
@@ -124,16 +118,42 @@ export default function Popover(_ref) {
         context: context,
         modal: false,
         initialFocus: isRenderedInReactSelectMenu(context.refs.reference) && -1,
-        children: Popover
-      }) : Popover
-    }) : Popover
+        children: /*#__PURE__*/_jsx(StyledPopover, {
+          className: visiblePopoverClassName,
+          ref: refs.setFloating,
+          textAlign: textAlign,
+          width: width,
+          enableSelectAll: enableSelectAll,
+          ariaLabel: ariaLabel,
+          style: style,
+          ...floatingProps,
+          children: text
+        })
+      }) : /*#__PURE__*/_jsx(StyledPopover, {
+        className: visiblePopoverClassName,
+        ref: refs.setFloating,
+        textAlign: textAlign,
+        width: width,
+        enableSelectAll: enableSelectAll,
+        ariaLabel: ariaLabel,
+        style: style,
+        ...floatingProps,
+        children: text
+      })
+    }) :
+    /*#__PURE__*/
     /*
      * HACK: Fixing all the broken tests in teamform-app-ui is too time consuming
      * right this moment with a lot of the tests asserting against Popover items.
      * Rendering the markup even when closed but in a hidden state ensures that tests pass.
      * Ideally, we would update all the tests in teamform-app-ui to open the Popover
      * before assertion.
-     **/), children]
+     **/
+    _jsx(StyledPopover, {
+      ariaLabel: ariaLabel,
+      className: "Tooltip popover hack-for-legacy-tests",
+      children: text
+    })), children]
   });
 }
 Popover.propTypes = {

package/es/components/ProgressBar/index.js

@@ -17,8 +17,8 @@ const Fill = styled.div.withConfig({
     const sixPxInPercentage = 6 / props.containerWidthPx * 100;
     const minPixelValue = 1; // Minimum pixel value for visibility
     const minPercentageValue = minPixelValue / props.containerWidthPx * 100;
-    const calculatedWidth = "calc(".concat(props.fillWidth, "% - ").concat(sixPxInPercentage, "%)");
-    return "max(".concat(calculatedWidth, ", ").concat(minPercentageValue, "%)");
+    const calculatedWidth = `calc(${props.fillWidth}% - ${sixPxInPercentage}%)`;
+    return `max(${calculatedWidth}, ${minPercentageValue}%)`;
   }
   return "0";
 }, expandWidth, props => themeGet("transition.transitionDefault")(props), props => props.gradient ? css(["background:linear-gradient( to right,", " 0%,", " 50%,", " 100% );"], themeGet("colors.danger")(props), themeGet("colors.warning")(props), themeGet("colors.success")(props)) : css(["background:", ";"], themeGet("colors.primary")(props)));

package/es/components/RadioButton/index.js

@@ -208,10 +208,10 @@ RadioButton.propTypes = {
   // ariaLabel prop must be specified if label is not provided
   ariaLabel: (props, propName) => {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for Radio component. When `label` is not provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for Radio component. When \`label\` is not provided, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Radio component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to Radio component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },

package/es/components/Range/index.js

@@ -8,8 +8,23 @@ const vars = {
   trackHeight: "4px",
   thumbDiameter: "20px"
 };
-const thumb = props => "\n    margin-top: -8px;\n    box-sizing: border-box;\n    border: none;\n    width: ".concat(vars.thumbDiameter, ";\n    height: ").concat(vars.thumbDiameter, ";\n    border-radius: ").concat(vars.thumbDiameter, ";\n    background: ").concat(themeGet("colors.primary")(props), ";\n");
-const track = props => "\n    box-sizing: border-box;\n    border: none;\n    width: 100%;\n    height: ".concat(vars.trackHeight, ";\n\t  background: ").concat(themeGet("colors.greyLight")(props), ";\n    border-radius: 4px;\n");
+const thumb = props => `
+    margin-top: -8px;
+    box-sizing: border-box;
+    border: none;
+    width: ${vars.thumbDiameter};
+    height: ${vars.thumbDiameter};
+    border-radius: ${vars.thumbDiameter};
+    background: ${themeGet("colors.primary")(props)};
+`;
+const track = props => `
+    box-sizing: border-box;
+    border: none;
+    width: 100%;
+    height: ${vars.trackHeight};
+	  background: ${themeGet("colors.greyLight")(props)};
+    border-radius: 4px;
+`;
 const Wrapper = styled.div.withConfig({
   displayName: "Range__Wrapper",
   componentId: "sc-zb0zps-0"

package/es/components/Select/index.js

@@ -44,7 +44,7 @@ const MultiValueRemove = props => {
     ...props,
     innerProps: {
       ...innerProps,
-      "aria-label": "Remove ".concat(data.label)
+      "aria-label": `Remove ${data.label}`
     }
   });
 };
@@ -75,7 +75,6 @@ const SELECT_TYPES = {
  *
  */
 const Select = /*#__PURE__*/forwardRef((props, ref) => {
-  var _SELECT_TYPES$props$s;
   const theme = useTheme();
   const inputRef = useInputFocus(ref, props.focus);
   const {
@@ -180,11 +179,11 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
         theme
       }),
       overflow: "hidden",
-      border: "1px solid ".concat(props.invalid ? themeGet("colors.danger")({
+      border: `1px solid ${props.invalid ? themeGet("colors.danger")({
         theme
       }) : themeGet("colors.black30")({
         theme
-      }))
+      })}`
     }),
     container: (provided, state) => ({
       ...provided,
@@ -301,9 +300,9 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
         color: themeGet("colors.white")({
           theme
         }),
-        borderLeft: "solid 1px ".concat(themeGet("colors.primaryDark")({
+        borderLeft: `solid 1px ${themeGet("colors.primaryDark")({
           theme
-        })),
+        })}`,
         padding: "6.5px 6px 6.5px 5px",
         display: state.data.isFixed ? "none" : provided.display,
         cursor: "pointer",
@@ -353,9 +352,9 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const components = {
     MultiValueRemove,
-    ...((props === null || props === void 0 ? void 0 : props.components) || {})
+    ...(props?.components || {})
   };
-  const SelectComponent = (_SELECT_TYPES$props$s = SELECT_TYPES[props === null || props === void 0 ? void 0 : props.selectType]) !== null && _SELECT_TYPES$props$s !== void 0 ? _SELECT_TYPES$props$s : SELECT_TYPES.default;
+  const SelectComponent = SELECT_TYPES[props?.selectType] ?? SELECT_TYPES.default;
   const component = /*#__PURE__*/_jsxs(Wrapper, {
     inverted: props.inverted,
     "data-testid": props["data-testid"],
@@ -397,10 +396,10 @@ Select.propTypes = {
   // ariaLabel prop must be specified if label is not provided
   ariaLabel: (props, propName) => {
     if (!props.label && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for Select component. When `label` is not provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for Select component. When \`label\` is not provided, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Select component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to Select component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },
@@ -411,10 +410,10 @@ Select.propTypes = {
   /** Specifies the ID for the rendered Select box. If you use the label prop label will automatically point to this ID, so this is required. */
   inputId: (props, propName) => {
     if (props.label && (props[propName] == null || props[propName] === "")) {
-      return new Error("Missing prop `".concat(propName, "` not specified for Select component. When `label` is provided, `").concat(propName, "` is required."));
+      return new Error(`Missing prop \`${propName}\` not specified for Select component. When \`label\` is provided, \`${propName}\` is required.`);
     }
     if (props[propName] && typeof props[propName] !== "string") {
-      return new Error("Invalid propType `".concat(propName, "` supplied to Select component. Expected `string`, received `").concat(typeof props[propName], "`."));
+      return new Error(`Invalid propType \`${propName}\` supplied to Select component. Expected \`string\`, received \`${typeof props[propName]}\`.`);
     }
     return null;
   },

package/es/components/SideNav/SideNav.stories.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import SideNav from "./index";
-import { BrowserRouter as Router, Route, Link, useLocation, matchPath, Switch, Redirect, useParams } from "react-router-dom";
+import { BrowserRouter as Router, Route, Link, Routes, useParams, useMatch, Navigate } from "react-router-dom";
 import { H5, P } from "../Typography";
 import Box from "../Box";
 import { far } from "@fortawesome/free-regular-svg-icons";
@@ -59,59 +59,46 @@ const PageCard = _ref2 => {
   });
 };
 const SideBarWithConfig = () => {
-  const location = useLocation();
+  const isHome = useMatch("/");
+  const isProfile = useMatch("/profile");
+  const isSearch = useMatch("/search");
   const items = [{
     iconName: "building",
     name: "Home",
     component: makeLinkComponent("/"),
     actionType: "link",
-    isActive: matchPath(location.pathname, {
-      path: "/",
-      exact: true
-    })
+    isActive: !!isHome
   }, {
     iconName: "user",
     name: "My profile",
     component: makeLinkComponent("/profile"),
     actionType: "link",
-    isActive: matchPath(location.pathname, {
-      path: "/profile"
-    })
+    isActive: !!isProfile
   }, {
     iconName: "id-card",
     name: "Search Page",
     component: makeLinkComponent("/search"),
     actionType: "link",
-    isActive: matchPath(location.pathname, {
-      path: "/search"
-    })
+    isActive: isSearch
   }, {
     iconName: "snowflake",
     name: "Filter",
-    hide: !matchPath(location.pathname, {
-      path: "/search"
-    }),
+    hide: !isSearch,
     // Specify hide if you want to hide this item
     component: makePanelComponent("Filter"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: matchPath(location.pathname, {
-      path: "/search"
-    }),
+    pageSpecific: isSearch,
     isExpandedByDefault: true
   }, {
     iconName: "sun",
     name: "People",
-    hide: !matchPath(location.pathname, {
-      path: "/profile"
-    }),
+    hide: !isProfile,
     // Specify hide if you want to hide this item
     component: makePanelComponent("People"),
     actionType: "component",
     // Use 'component' for a component
-    pageSpecific: matchPath(location.pathname, {
-      path: "/profile"
-    }),
+    pageSpecific: isProfile,
     isExpandedByDefault: true
   }, {
     iconName: "bell",
@@ -128,7 +115,7 @@ const SideBarWithConfig = () => {
     component: makePanelComponent("BrowseTeams", /*#__PURE__*/_jsx(Flex, {
       flexDirection: "column",
       children: ["Team 1", "Team 2", "Team 3"].map(team => /*#__PURE__*/_jsx(Link, {
-        to: "/teams/".concat(team),
+        to: `/teams/${team}`,
         children: team
       }, team))
     })),
@@ -172,30 +159,32 @@ const SideBarWithConfig = () => {
     children: [/*#__PURE__*/_jsx(SideNav, {
       items: items,
       sideNavHeight: "500px"
-    }), /*#__PURE__*/_jsxs(Switch, {
+    }), /*#__PURE__*/_jsxs(Routes, {
       children: [/*#__PURE__*/_jsx(Route, {
-        exact: true,
         path: "/",
-        children: /*#__PURE__*/_jsx(PageCard, {
+        element: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx("div", {
             children: "Home"
           })
         })
       }), /*#__PURE__*/_jsx(Route, {
         path: "/profile",
-        children: /*#__PURE__*/_jsx(PageCard, {
+        element: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx("div", {
             children: "Profile route"
           })
         })
       }), /*#__PURE__*/_jsx(Route, {
         path: "/teams/:teamId",
-        children: /*#__PURE__*/_jsx(PageCard, {
+        element: /*#__PURE__*/_jsx(PageCard, {
           children: /*#__PURE__*/_jsx(Teams, {})
         })
-      }), /*#__PURE__*/_jsx(Redirect, {
-        from: "/iframe.html",
-        to: "/"
+      }), /*#__PURE__*/_jsx(Route, {
+        path: "/iframe.html",
+        element: /*#__PURE__*/_jsx(Navigate, {
+          to: "/",
+          replace: true
+        })
       })]
     })]
   });