@nulogy/components 15.2.1 → 15.2.3

package/dist/src/Tooltip/Tooltip.story.js

@@ -2,94 +2,99 @@ import React from "react";
 import { Box, Button, DescriptionDetails, DescriptionList, DescriptionTerm, Divider, Flex, Icon, Link, StatusIndicator, Text, Tooltip, } from "../index";
 export default {
     title: "Components/Tooltip",
+    component: Tooltip,
     parameters: {
         chromatic: { disable: true },
     },
 };
-export const _Tooltip = () => (React.createElement(Flex, { p: "x8" },
-    React.createElement(Tooltip, { tooltip: "I am a Tooltip!" },
-        React.createElement(Button, null, " Button "))));
-export const WithWrappedText = () => (React.createElement(Flex, { p: "x8" },
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, and my default max-width is 24em (based on 14px font-size), which is equal to 336px, or approximately 45 characters.", defaultOpen: true },
-        React.createElement(Button, null, " Button "))));
-WithWrappedText.story = {
+export const Default = {
+    render: () => (React.createElement(Flex, { p: "x8" },
+        React.createElement(Tooltip, { tooltip: "I am a Tooltip!" },
+            React.createElement(Button, { "data-testid": "tooltip-trigger" }, "Button")))),
+};
+export const WithWrappedText = {
+    render: () => (React.createElement(Flex, { p: "x8" },
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, and my default max-width is 24em (based on 14px font-size), which is equal to 336px, or approximately 45 characters.", defaultOpen: true },
+            React.createElement(Button, null, " Button ")))),
     name: "with wrapped text",
 };
-export const WithCustomMaxWidth = () => (React.createElement(Flex, { p: "x8" },
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, but I have a smaller maxWidth prop that causes me to wrap frequently.", maxWidth: "128px", defaultOpen: true },
-        React.createElement(Button, null, " Button "))));
-WithCustomMaxWidth.story = {
+export const WithCustomMaxWidth = {
+    render: (args) => (React.createElement(Flex, { p: "x8" },
+        React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: "I am a Tooltip! I have very long text, but I have a smaller maxWidth prop that causes me to wrap frequently.", maxWidth: "128px", defaultOpen: true },
+            React.createElement(Button, null, " Button ")))),
     name: "with custom maxWidth",
 };
-export const WithPlacement = () => (React.createElement(React.Fragment, null,
-    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-        React.createElement(Tooltip, { placement: "top-start", tooltip: "top-start", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "top", tooltip: "top", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "top-end", tooltip: "top-end", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger"))),
-    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-        React.createElement(Tooltip, { placement: "left-start", tooltip: "left-start", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "left", tooltip: "left", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "left-end", tooltip: "left-end", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger"))),
-    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-        React.createElement(Tooltip, { placement: "right-start", tooltip: "right-start", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "right", tooltip: "right", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "right-end", tooltip: "right-end", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger"))),
-    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-        React.createElement(Tooltip, { placement: "bottom-start", tooltip: "bottom-start", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "bottom", tooltip: "bottom", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "bottom-end", tooltip: "bottom-end", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")))));
-WithPlacement.story = {
+export const WithPlacement = {
+    render: () => (React.createElement(React.Fragment, null,
+        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+            React.createElement(Tooltip, { placement: "top-start", tooltip: "top-start", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "top", tooltip: "top", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "top-end", tooltip: "top-end", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger"))),
+        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+            React.createElement(Tooltip, { placement: "left-start", tooltip: "left-start", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "left", tooltip: "left", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "left-end", tooltip: "left-end", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger"))),
+        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+            React.createElement(Tooltip, { placement: "right-start", tooltip: "right-start", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "right", tooltip: "right", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "right-end", tooltip: "right-end", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger"))),
+        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+            React.createElement(Tooltip, { placement: "bottom-start", tooltip: "bottom-start", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "bottom", tooltip: "bottom", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "bottom-end", tooltip: "bottom-end", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger"))))),
     name: "with placement",
 };
-export const WithLinkPassedIn = () => (React.createElement(Tooltip, { placement: "bottom", tooltip: React.createElement(Link, { href: "/" }, " Link "), defaultOpen: true },
-    React.createElement(Button, null, " Button ")));
-WithLinkPassedIn.story = {
+export const WithLinkPassedIn = {
+    render: (args) => (React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: React.createElement(Link, { href: "/" }, " Link "), defaultOpen: true },
+        React.createElement(Button, null, " Button "))),
     name: "with Link passed in",
 };
-export const WithButtonPassedIn = () => (React.createElement(Tooltip, { placement: "bottom", tooltip: React.createElement(Button, { href: "/" }, " Button "), defaultOpen: true },
-    React.createElement(Button, null, " Button ")));
-WithButtonPassedIn.story = {
+export const WithButtonPassedIn = {
+    render: (args) => (React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: React.createElement(Button, { href: "/" }, " Button "), defaultOpen: true },
+        React.createElement(Button, null, " Button "))),
     name: "with Button passed in",
 };
-export const WithCustomShowDelay = () => (React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip", showDelay: "1000" },
-    React.createElement(Button, null, " Button ")));
-WithCustomShowDelay.story = {
+export const WithCustomShowDelay = {
+    render: (args) => (React.createElement(Tooltip, { ...args, placement: "bottom", tooltip: "Tooltip", showDelay: "1000" },
+        React.createElement(Button, null, " Button "))),
     name: "with custom showDelay",
 };
-export const WithOtherFocusableElements = () => (React.createElement(React.Fragment, null,
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Button, null, " Button ")),
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Link, { href: "/" }, " Link ")),
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Text, { mr: "x2", inline: true, bg: "blue" }, "Inline Text")),
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Box, { width: "200px", bg: "blue" }, "Box width 200px")),
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Box, { bg: "blue" }, "Box"))));
-WithOtherFocusableElements.story = {
+export const WithOtherFocusableElements = {
+    render: () => (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Button, null, " Button ")),
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Link, { href: "/" }, " Link ")),
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Text, { mr: "x2", inline: true, bg: "blue" }, "Inline Text")),
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Box, { width: "200px", bg: "blue" }, "Box width 200px")),
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Box, { bg: "blue" }, "Box")))),
     name: "with other focusable elements",
 };
-export const OpenByDefault = () => (React.createElement(Tooltip, { tooltip: "I am an open Tooltip!", defaultOpen: true },
-    React.createElement(Button, null, "Hover me")));
-OpenByDefault.story = {
+export const OpenByDefault = {
+    render: (args) => (React.createElement(Tooltip, { ...args, tooltip: "I am an open Tooltip!", defaultOpen: true },
+        React.createElement(Button, null, "Hover me"))),
     name: "open by default",
 };
-export const WithCustomComponent = () => (React.createElement(Tooltip, { tooltip: "See me on hover!", defaultOpen: true },
-    React.createElement(CustomComponent, null)));
-const CustomComponent = React.forwardRef((props, forwardedRef) => (React.createElement("span", Object.assign({ ref: forwardedRef }, props),
+export const WithCustomComponent = {
+    render: (args) => (React.createElement(Tooltip, { ...args, tooltip: "See me on hover!", defaultOpen: true },
+        React.createElement(CustomComponent, null))),
+};
+const CustomComponent = React.forwardRef((props, forwardedRef) => (React.createElement("span", { ref: forwardedRef, ...props },
     React.createElement(Text, { inline: true }, "This component uses the forwardedRef from the Tooltip wrapping it"))));
 const CustomTooltip = () => (React.createElement(Flex, { flexDirection: "column", width: "320px", p: "x1_5" },
     React.createElement(Text, { fontSize: "smaller", fontWeight: "medium", textTransform: "uppercase", color: "midGrey" }, "Purchase Order"),
@@ -115,7 +120,10 @@ const CustomTooltip = () => (React.createElement(Flex, { flexDirection: "column"
                 "US $202.12 ",
                 React.createElement(Icon, { icon: "arrowForward", color: "midGrey" }),
                 " CA $287.43")))));
-export const WithCustomTooltip = () => (React.createElement(Flex, { alignItems: "center", gap: "half" },
-    React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "You can embed custom components in the tooltip"),
-    React.createElement(Tooltip, { maxWidth: "340px", tooltip: React.createElement(CustomTooltip, null), defaultOpen: true },
-        React.createElement(Icon, { icon: "info", size: "x3", color: "darkGrey" }))));
+export const WithCustomTooltip = {
+    render: () => (React.createElement(Flex, { alignItems: "center", gap: "half" },
+        React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "You can embed custom components in the tooltip"),
+        React.createElement(Tooltip, { maxWidth: "340px", tooltip: React.createElement(CustomTooltip, null), defaultOpen: true },
+            React.createElement(Icon, { icon: "info", size: "x3", color: "darkGrey" })))),
+    name: "with custom tooltip",
+};

package/dist/src/Tooltip/TooltipContainer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PositionProps } from "styled-system";
 import { DefaultNDSThemeType } from "../theme";
 type TooltipContainerProps = PositionProps & {

package/dist/src/Tooltip/TooltipContainer.js

@@ -27,5 +27,20 @@ const getTooltipMargin = (placement) => {
             };
     }
 };
-const TooltipContainer = styled(Box)(({ theme, dataPlacement, open, position }) => (Object.assign(Object.assign({ color: tooltipStyles(theme).textColor, display: "flex", flexDirection: "column", fontSize: theme.fontSizes.small, backgroundColor: tooltipStyles(theme).backgroundColor, borderRadius: theme.radii.medium, border: `1px solid ${tooltipStyles(theme).borderColor}`, boxShadow: theme.shadows.medium, padding: theme.space.x1, transition: "opacity 0.3s", zIndex: theme.zIndices.content }, getTooltipMargin(dataPlacement)), { position, top: open ? 0 : "-9999px" })));
+const TooltipContainer = styled(Box)(({ theme, dataPlacement, open, position }) => ({
+    color: tooltipStyles(theme).textColor,
+    display: "flex",
+    flexDirection: "column",
+    fontSize: theme.fontSizes.small,
+    backgroundColor: tooltipStyles(theme).backgroundColor,
+    borderRadius: theme.radii.medium,
+    border: `1px solid ${tooltipStyles(theme).borderColor}`,
+    boxShadow: theme.shadows.medium,
+    padding: theme.space.x1,
+    transition: "opacity 0.3s",
+    zIndex: theme.zIndices.content,
+    ...getTooltipMargin(dataPlacement),
+    position,
+    top: open ? 0 : "-9999px",
+}));
 export default TooltipContainer;

package/dist/src/Tooltip/components/TooltipComponents.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import styled, { keyframes, useTheme } from "styled-components";
@@ -18,7 +7,7 @@ function useHasHover() {
     try {
         return matchMedia("(hover: hover)").matches;
     }
-    catch (_a) {
+    catch {
         // Assume that if the browser is too old to support matchMedia, it's likely not a touch device
         return true;
     }
@@ -29,21 +18,18 @@ const TooltipTriggerContext = React.createContext({
     setOpen: () => { },
 });
 const TooltipProvider = TooltipPrimitive.Provider;
-function Tooltip(_a) {
-    var _b, _c;
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const [open, setOpen] = React.useState((_b = props.defaultOpen) !== null && _b !== void 0 ? _b : false);
+function Tooltip({ children, ...props }) {
+    const [open, setOpen] = React.useState(props.defaultOpen ?? false);
     const hasHover = useHasHover();
     return (React.createElement(TooltipPrimitive.Root, { delayDuration: !hasHover && props.supportMobileTap ? 0 : props.delayDuration, onOpenChange: setOpen, open: open },
         React.createElement(TooltipTriggerContext.Provider, { value: {
                 open,
                 setOpen,
-                supportMobileTap: (_c = props.supportMobileTap) !== null && _c !== void 0 ? _c : false,
+                supportMobileTap: props.supportMobileTap ?? false,
             } }, children)));
 }
 Tooltip.displayName = TooltipPrimitive.Root.displayName;
-const TooltipTrigger = React.forwardRef((_a, ref) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+const TooltipTrigger = React.forwardRef(({ children, ...props }, ref) => {
     const hasHover = useHasHover();
     const { setOpen, supportMobileTap } = React.useContext(TooltipTriggerContext);
     const { onClick: onClickProp } = props;
@@ -53,10 +39,10 @@ const TooltipTrigger = React.forwardRef((_a, ref) => {
             setOpen(true);
         }
         else {
-            onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+            onClickProp?.(e);
         }
     }, [setOpen, hasHover, supportMobileTap, onClickProp]);
-    return (React.createElement(TooltipPrimitive.Trigger, Object.assign({ ref: ref }, props, { onClick: onClick }), children));
+    return (React.createElement(TooltipPrimitive.Trigger, { ref: ref, ...props, onClick: onClick }, children));
 });
 TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
 const slideUpAndFade = keyframes `
@@ -132,10 +118,9 @@ const StyledArrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({
     fill: theme.colors.white,
     filter: `drop-shadow(0px 1px 0px ${theme.colors.grey})`,
 }));
-const TooltipContent = React.forwardRef((_a, ref) => {
-    var { sideOffset = 4, children } = _a, props = __rest(_a, ["sideOffset", "children"]);
+const TooltipContent = React.forwardRef(({ sideOffset = 4, children, ...props }, ref) => {
     const theme = useTheme();
-    return (React.createElement(StyledContent, Object.assign({ ref: ref, sideOffset: sideOffset }, props),
+    return (React.createElement(StyledContent, { ref: ref, sideOffset: sideOffset, ...props },
         children,
         React.createElement(StyledArrow, { width: theme.space.x1_5, height: theme.space.x0_75 })));
 });

package/dist/src/TopBar/TopBar.styled.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { StyledProps } from "../StyledProps";
 declare const MenuItemList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
@@ -12,11 +11,11 @@ declare const StyledBackLink: import("styled-components/dist/types").IStyledComp
 declare const StyledPageTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 declare const Overlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog/dist/declarations/src").DialogOverlayProps> & import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
+}, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
     as?: "div";
 } & import("framer-motion").MotionProps, "ref"> & import("react").RefAttributes<HTMLElement | SVGElement>, never>> & string & Omit<import("framer-motion").CustomDomComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: import("react").Ref<HTMLDivElement>;
-}, "as" | keyof import("@reach/dialog/dist/declarations/src").DialogOverlayProps> & import("@reach/dialog/dist/declarations/src").DialogOverlayProps & {
+}, "as" | keyof import("@reach/dialog").DialogOverlayProps> & import("@reach/dialog").DialogOverlayProps & {
     as?: "div";
 }>, keyof import("react").Component<any, {}, any>>;
 declare const TileLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
@@ -35,12 +34,14 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     suppressContentEditableWarning?: boolean;
     suppressHydrationWarning?: boolean;
     accessKey?: string;
+    autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus?: boolean;
     className?: string;
     contentEditable?: "inherit" | (boolean | "true" | "false");
     contextMenu?: string;
     dir?: string;
     draggable?: boolean | "true" | "false";
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send";
     id?: string;
     lang?: string;
     nonce?: string;
@@ -58,7 +59,6 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     rev?: string;
     typeof?: string;
     vocab?: string;
-    autoCapitalize?: string;
     autoCorrect?: string;
     autoSave?: string;
     itemProp?: string;
@@ -68,20 +68,26 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     itemRef?: string;
     results?: number;
     security?: string;
-    unselectable?: "on" | "off";
+    unselectable?: "off" | "on";
     inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
     is?: string;
+    exportparts?: string;
+    part?: string;
     "aria-activedescendant"?: string;
     "aria-atomic"?: boolean | "true" | "false";
     "aria-autocomplete"?: "none" | "list" | "inline" | "both";
+    "aria-braillelabel"?: string;
+    "aria-brailleroledescription"?: string;
     "aria-busy"?: boolean | "true" | "false";
     "aria-checked"?: boolean | "true" | "false" | "mixed";
     "aria-colcount"?: number;
     "aria-colindex"?: number;
+    "aria-colindextext"?: string;
     "aria-colspan"?: number;
     "aria-controls"?: string;
-    "aria-current"?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date";
+    "aria-current"?: boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date";
     "aria-describedby"?: string;
+    "aria-description"?: string;
     "aria-details"?: string;
     "aria-disabled"?: boolean | "true" | "false";
     "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup";
@@ -111,6 +117,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     "aria-roledescription"?: string;
     "aria-rowcount"?: number;
     "aria-rowindex"?: number;
+    "aria-rowindextext"?: string;
     "aria-rowspan"?: number;
     "aria-selected"?: boolean | "true" | "false";
     "aria-setsize"?: number;
@@ -140,7 +147,7 @@ declare const StyledMenuItem: import("styled-components/dist/types").IStyledComp
     onBlurCapture?: import("react").FocusEventHandler<HTMLLIElement>;
     onChange?: import("react").FormEventHandler<HTMLLIElement>;
     onChangeCapture?: import("react").FormEventHandler<HTMLLIElement>;
-    onBeforeInput?: import("react").FormEventHandler<HTMLLIElement>;
+    onBeforeInput?: import("react").InputEventHandler<HTMLLIElement>;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLLIElement>;
     onInput?: import("react").FormEventHandler<HTMLLIElement>;
     onInputCapture?: import("react").FormEventHandler<HTMLLIElement>;

package/dist/src/TopBar/components/BackLink.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { Box } from "../../Box";
 import useMediaQuery from "../../hooks/useMediaQuery";
@@ -21,11 +10,10 @@ const BACK_LINK_MAX_WIDTH = {
     tabletLandscape: "20ch",
     laptop: "24ch",
 };
-export function BackLink(_a) {
-    var { children, maxWidth = BACK_LINK_MAX_WIDTH } = _a, props = __rest(_a, ["children", "maxWidth"]);
+export function BackLink({ children, maxWidth = BACK_LINK_MAX_WIDTH, ...props }) {
     const md = useMediaQuery("phoneLandscape");
     return (React.createElement(Box, { as: "li", flex: "1 1" },
-        React.createElement(StyledBackLink, Object.assign({}, props, { "data-testid": "topbar-back-link" }),
+        React.createElement(StyledBackLink, { ...props, "data-testid": "topbar-back-link" },
             React.createElement(Icon, { icon: "arrowBack" }),
             md && (React.createElement(Text, { maxWidth: maxWidth, textOverflow: "ellipsis", overflow: "hidden", fontSize: "small" }, children)))));
 }

package/dist/src/TopBar/components/Menu.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { DialogContent } from "@reach/dialog";
 import { AnimatePresence } from "framer-motion";
 import React from "react";
@@ -38,9 +27,7 @@ const blurVariants = {
         },
     },
 };
-export function Menu(_a) {
-    var _b;
-    var { children, defaultOpened = false } = _a, props = __rest(_a, ["children", "defaultOpened"]);
+export function Menu({ children, defaultOpened = false, ...props }) {
     const [showMenu, setShowMenu] = React.useState(defaultOpened);
     const [animationComplete, setAnimationComplete] = React.useState(false);
     const { t } = useTranslation();
@@ -62,6 +49,6 @@ export function Menu(_a) {
                     setAnimationComplete(true);
                 }
             }, onDismiss: close },
-            React.createElement(DialogContent, { "data-testid": "topbar-menu", "data-visible": animationComplete ? true : undefined, "aria-label": (_b = props["aria-label"]) !== null && _b !== void 0 ? _b : t("menu options") },
+            React.createElement(DialogContent, { "data-testid": "topbar-menu", "data-visible": animationComplete ? true : undefined, "aria-label": props["aria-label"] ?? t("menu options") },
                 React.createElement(MenuItemList, null, children)))))));
 }

package/dist/src/TopBar/components/MenuItemLink.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { motion } from "framer-motion";
 import React from "react";
 import { Flex } from "../../Flex";
@@ -16,9 +5,8 @@ import { Icon } from "../../Icon";
 import { Text } from "../../Type";
 import { TileLink } from "../TopBar.styled";
 const MotionText = motion(Text);
-export function MenuItemLink(_a) {
-    var { description, title, icon } = _a, props = __rest(_a, ["description", "title", "icon"]);
-    return (React.createElement(TileLink, Object.assign({}, props),
+export function MenuItemLink({ description, title, icon, ...props }) {
+    return (React.createElement(TileLink, { ...props },
         React.createElement(Icon, { icon: icon, size: "x3" }),
         React.createElement(Flex, { flexDirection: "column", justifyContent: "center" },
             React.createElement(MotionText, { fontWeight: "medium", fontSize: "md", lineHeight: "base" }, title),

package/dist/src/TopBar/components/PageTitle.js

@@ -1,17 +1,5 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { StyledPageTitle } from "../TopBar.styled";
-export function PageTitle(_a) {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement(StyledPageTitle, Object.assign({ "data-testid": "topbar-page-title" }, props), children));
+export function PageTitle({ children, ...props }) {
+    return (React.createElement(StyledPageTitle, { "data-testid": "topbar-page-title", ...props }, children));
 }

package/dist/src/TopBar/stories/TopBar.backButton.story.js

@@ -21,7 +21,7 @@ export default {
 export const WithNoLabel = () => (React.createElement(TopBar.Root, null,
     React.createElement(TopBar.BackLink, { href: "/cycle-counts" }),
     React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
-    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, Object.assign({ key: props.title }, props)))))));
+    React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title, ...props }))))));
 export const WithACustomMaxWidth = () => (React.createElement(TopBar.Root, null,
     React.createElement(TopBar.BackLink, { href: "/cycle-counts", maxWidth: {
             small: "10ch",
@@ -31,10 +31,10 @@ export const WithACustomMaxWidth = () => (React.createElement(TopBar.Root, null,
         } }, "Cycle counts"),
     React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
     React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+        React.createElement(TopBar.MenuItemLink, { ...props })))))));
 export const WithARouterLink = () => (React.createElement(BrowserRouter, null,
     React.createElement(TopBar.Root, null,
         React.createElement(Link, { component: TopBar.BackLink, to: "/cycle-counts" }, "Cycle counts"),
         React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
         React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-            React.createElement(TopBar.MenuItemLink, Object.assign({}, props)))))))));
+            React.createElement(TopBar.MenuItemLink, { ...props }))))))));

package/dist/src/TopBar/stories/TopBar.menu.story.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from "react";
 import { Link, BrowserRouter } from "react-router-dom";
 import { TopBar } from "../TopBar";
@@ -34,31 +23,31 @@ export const withDefaultOpenMenu = () => (React.createElement(TopBar.Root, null,
     React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
     React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
     React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+        React.createElement(TopBar.MenuItemLink, { ...props })))))));
 export const WithOneMenuItem = () => (React.createElement(TopBar.Root, null,
     React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
     React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
     React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.slice(0, 1).map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+        React.createElement(TopBar.MenuItemLink, { ...props })))))));
 export const WithTwoItems = () => (React.createElement(TopBar.Root, null,
     React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
     React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
     React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.slice(0, 2).map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+        React.createElement(TopBar.MenuItemLink, { ...props })))))));
 export const WithThreeItems = () => (React.createElement(TopBar.Root, null,
     React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
     React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
     React.createElement(TopBar.Menu, { defaultOpened: true }, menuItems.slice(0, 3).map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+        React.createElement(TopBar.MenuItemLink, { ...props })))))));
 export const WithRouterLinks = () => {
-    const routerMenuItems = menuItems.map((_a) => {
-        var { href } = _a, item = __rest(_a, ["href"]);
-        return (Object.assign(Object.assign({}, item), { to: href }));
-    });
+    const routerMenuItems = menuItems.map(({ href, ...item }) => ({
+        ...item,
+        to: href,
+    }));
     return (React.createElement(TopBar.Root, null,
         React.createElement(TopBar.BackLink, { href: "#" }, "Cycle counts"),
         React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
         React.createElement(TopBar.Menu, { defaultOpened: true },
             React.createElement(BrowserRouter, { basename: "/" }, routerMenuItems.map((item) => (React.createElement(TopBar.MenuItem, { key: item.title },
-                React.createElement(Link, Object.assign({ component: TopBar.MenuItemLink }, item)))))))));
+                React.createElement(Link, { component: TopBar.MenuItemLink, ...item }))))))));
 };

package/dist/src/TopBar/stories/TopBar.story.js

@@ -24,17 +24,17 @@ export const Default = () => (React.createElement(TopBar.Root, null,
     React.createElement(TopBar.BackLink, { href: "/cycle-counts" }, "Cycle counts"),
     React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
     React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+        React.createElement(TopBar.MenuItemLink, { ...props })))))));
 export const WithALongTitle = () => (React.createElement(TopBar.Root, null,
     React.createElement(TopBar.BackLink, { href: "/cycle-counts" }, "Previous page title"),
     React.createElement(TopBar.PageTitle, null, "A long title that can not fit on smaller screens"),
     React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-        React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))));
+        React.createElement(TopBar.MenuItemLink, { ...props })))))));
 export const WithAnApplicationFrame = () => (React.createElement(ApplicationFrame, { navBar: React.createElement(TopBar.Root, null,
         React.createElement(TopBar.BackLink, { href: "/cycle-counts" }, "Cycle counts"),
         React.createElement(TopBar.PageTitle, null, "Cycle count #3992"),
         React.createElement(TopBar.Menu, null, menuItems.map((props) => (React.createElement(TopBar.MenuItem, { key: props.title },
-            React.createElement(TopBar.MenuItemLink, Object.assign({}, props))))))) },
+            React.createElement(TopBar.MenuItemLink, { ...props })))))) },
     React.createElement(Page, { fullHeight: true },
         React.createElement(FormSection, { title: "Personal Information" },
             React.createElement(Input, { id: "name", labelText: "Name" }),