@bundle-stats/ui 4.3.3 → 4.3.5

package/lib/components/run-info/run-info.module.css

@@ -39,7 +39,28 @@
   width: 5em;
 }
 
-/* Size large */
+/* Hover state */
+.titleIcon span[aria-controls=""] {
+  opacity: 0;
+  visibility: none;
+  transition: var(--ui-transition-out);
+}
+
+.root:hover .titleIcon span {
+  opacity: 1;
+  visibility: visible;
+  transition: var(--ui-transition-in);
+}
+
+/* Size variation */
+.small .info {
+  margin-top: var(--space-xxxsmall);
+}
+
+.small .currentMetric {
+  font-size: var(--size-xlarge);
+}
+
 .large .info {
   margin-top: var(--space-xxsmall);
 }

package/lib/ui/hover-card/hover-card.js

@@ -28,12 +28,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HoverCard = void 0;
 const react_1 = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const classnames_1 = __importDefault(require("classnames"));
 const hovercard_1 = require("ariakit/hovercard");
 const hover_card_module_css_1 = __importDefault(require("./hover-card.module.css"));
 const HoverCard = (props) => {
-    const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
+    const { className = '', anchorClassName = '', hoverCardClassName = '', href = '', as = null, label, children, } = props;
     const state = (0, hovercard_1.useHovercardState)({ gutter: 8, timeout: 800 });
     const hovercardProps = (0, hovercard_1.useHovercard)({ state, portal: true });
     const Component = (0, react_1.useMemo)(() => {
@@ -46,27 +45,10 @@ const HoverCard = (props) => {
         return 'span';
     }, [as, href]);
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(hover_card_module_css_1.default.root, className) },
-        react_1.default.createElement(hovercard_1.HovercardAnchor, { state: state, href: href, className: (0, classnames_1.default)(hover_card_module_css_1.default.anchor, anchorClassName), as: Component }, label),
+        react_1.default.createElement(hovercard_1.HovercardAnchor, { state: state, href: href, className: (0, classnames_1.default)(hover_card_module_css_1.default.anchor, anchorClassName), as: Component, "aria-controls": state.open ? hovercardProps.id : '' }, label),
         react_1.default.createElement(hovercard_1.Hovercard, { ...hovercardProps, state: state, className: (0, classnames_1.default)(hover_card_module_css_1.default.hoverCard, hoverCardClassName), style: { zIndex: 10000 } },
             react_1.default.createElement(hovercard_1.HovercardArrow, { size: 24 }),
             typeof children === 'function' ? children({ close: state.hide }) : children)));
 };
 exports.HoverCard = HoverCard;
-exports.HoverCard.propTypes = {
-    className: prop_types_1.default.string,
-    hoverCardClassName: prop_types_1.default.string,
-    anchorClassName: prop_types_1.default.string,
-    label: prop_types_1.default.node,
-    href: prop_types_1.default.string,
-    as: prop_types_1.default.elementType,
-    children: prop_types_1.default.oneOfType([prop_types_1.default.node, prop_types_1.default.func]).isRequired,
-};
-exports.HoverCard.defaultProps = {
-    className: '',
-    hoverCardClassName: '',
-    anchorClassName: '',
-    label: '',
-    as: '',
-    href: '',
-};
 //# sourceMappingURL=hover-card.js.map

package/lib/ui/hover-card/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,4DAAmC;AACnC,4DAA4B;AAC5B,iDAM2B;AAE3B,oFAA0C;AAEnC,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5F,MAAM,KAAK,GAAG,IAAA,6BAAiB,EAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAC7D,MAAM,cAAc,GAAG,IAAA,wBAAY,EAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE;YACN,OAAO,EAAE,CAAC;SACX;QAED,IAAI,IAAI,EAAE;YACR,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,+BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,8BAAC,2BAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,oBAAE,EAAC,+BAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,IAEZ,KAAK,CACU;QAClB,8BAAC,qBAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,oBAAE,EAAC,+BAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,EAChD,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;YAExB,8BAAC,0BAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,SAAS,aAwCpB;AAEF,iBAAS,CAAC,SAAS,GAAG;IAEpB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAE3B,kBAAkB,EAAE,oBAAS,CAAC,MAAM;IAEpC,eAAe,EAAE,oBAAS,CAAC,MAAM;IAEjC,KAAK,EAAE,oBAAS,CAAC,IAAI;IAErB,IAAI,EAAE,oBAAS,CAAC,MAAM;IAEtB,EAAE,EAAE,oBAAS,CAAC,WAAW;IAEzB,QAAQ,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,IAAI,EAAE,oBAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;CAC3E,CAAC;AAEF,iBAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,EAAE;IACb,kBAAkB,EAAE,EAAE;IACtB,eAAe,EAAE,EAAE;IACnB,KAAK,EAAE,EAAE;IACT,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,4DAA4B;AAC5B,iDAM2B;AAE3B,oFAA0C;AAYnC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,IAAA,6BAAiB,EAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAC7D,MAAM,cAAc,GAAG,IAAA,wBAAY,EAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE;YACN,OAAO,EAAE,CAAC;SACX;QAED,IAAI,IAAI,EAAE;YACR,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAE,EAAC,+BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,8BAAC,2BAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,oBAAE,EAAC,+BAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,mBACE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAEjD,KAAK,CACU;QAClB,8BAAC,qBAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,oBAAE,EAAC,+BAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,EAChD,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;YAExB,8BAAC,0BAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AAjDW,QAAA,SAAS,aAiDpB"}

package/lib/ui/hover-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/hover-card/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/hover-card/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B"}

package/lib/ui/tooltip/tooltip.js

@@ -12,7 +12,7 @@ const Tooltip = (props) => {
     const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, darkMode = true, ...restProps } = props;
     const tooltip = (0, tooltip_1.useTooltipState)({ placement: 'top', timeout: 300 });
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(tooltip_1.TooltipAnchor, { as: Component, className: (0, classnames_1.default)(tooltip_module_css_1.default.root, className), state: tooltip, ...(ref ? { ref } : {}), ...restProps }),
+        react_1.default.createElement(tooltip_1.TooltipAnchor, { as: Component, className: (0, classnames_1.default)(tooltip_module_css_1.default.root, className), state: tooltip, "aria-controls": tooltip.open ? tooltip.contentElement?.id : '', ...(ref ? { ref } : {}), ...restProps }),
         title && (react_1.default.createElement(tooltip_1.Tooltip, { state: tooltip, className: (0, classnames_1.default)(tooltip_module_css_1.default.tooltip, tooltipClassName, darkMode && tooltip_module_css_1.default.tooltipDarkMode) },
             react_1.default.createElement(tooltip_1.TooltipArrow, { state: tooltip, className: tooltip_module_css_1.default.arrow, size: 12 }),
             title))));

package/lib/ui/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,6CAKyB;AAEzB,8EAAuC;AAWhC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,IAAA,yBAAe,EAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,8BAAC,uBAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,KACV,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,8BAAC,iBAAS,IACR,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,4BAAG,CAAC,eAAe,CAAC;YAE7E,8BAAC,sBAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,4BAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,OAAO,WAmClB"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,6CAKyB;AAEzB,8EAAuC;AAWhC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,IAAA,yBAAe,EAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,8BAAC,uBAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,8BAAC,iBAAS,IACR,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,4BAAG,CAAC,eAAe,CAAC;YAE7E,8BAAC,sBAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,4BAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC;AApCW,QAAA,OAAO,WAoClB"}

package/lib-esm/components/run-info/run-info.module.css

@@ -39,7 +39,28 @@
   width: 5em;
 }
 
-/* Size large */
+/* Hover state */
+.titleIcon span[aria-controls=""] {
+  opacity: 0;
+  visibility: none;
+  transition: var(--ui-transition-out);
+}
+
+.root:hover .titleIcon span {
+  opacity: 1;
+  visibility: visible;
+  transition: var(--ui-transition-in);
+}
+
+/* Size variation */
+.small .info {
+  margin-top: var(--space-xxxsmall);
+}
+
+.small .currentMetric {
+  font-size: var(--size-xlarge);
+}
+
 .large .info {
   margin-top: var(--space-xxsmall);
 }

package/lib-esm/ui/hover-card/hover-card.js

@@ -1,10 +1,9 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Hovercard, HovercardAnchor, HovercardArrow, useHovercard, useHovercardState, } from 'ariakit/hovercard';
 import css from './hover-card.module.css';
 export const HoverCard = (props) => {
-    const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
+    const { className = '', anchorClassName = '', hoverCardClassName = '', href = '', as = null, label, children, } = props;
     const state = useHovercardState({ gutter: 8, timeout: 800 });
     const hovercardProps = useHovercard({ state, portal: true });
     const Component = useMemo(() => {
@@ -17,26 +16,9 @@ export const HoverCard = (props) => {
         return 'span';
     }, [as, href]);
     return (React.createElement("div", { className: cx(css.root, className) },
-        React.createElement(HovercardAnchor, { state: state, href: href, className: cx(css.anchor, anchorClassName), as: Component }, label),
+        React.createElement(HovercardAnchor, { state: state, href: href, className: cx(css.anchor, anchorClassName), as: Component, "aria-controls": state.open ? hovercardProps.id : '' }, label),
         React.createElement(Hovercard, { ...hovercardProps, state: state, className: cx(css.hoverCard, hoverCardClassName), style: { zIndex: 10000 } },
             React.createElement(HovercardArrow, { size: 24 }),
             typeof children === 'function' ? children({ close: state.hide }) : children)));
 };
-HoverCard.propTypes = {
-    className: PropTypes.string,
-    hoverCardClassName: PropTypes.string,
-    anchorClassName: PropTypes.string,
-    label: PropTypes.node,
-    href: PropTypes.string,
-    as: PropTypes.elementType,
-    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-};
-HoverCard.defaultProps = {
-    className: '',
-    hoverCardClassName: '',
-    anchorClassName: '',
-    label: '',
-    as: '',
-    href: '',
-};
 //# sourceMappingURL=hover-card.js.map

package/lib-esm/ui/hover-card/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5F,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAC7D,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE;YACN,OAAO,EAAE,CAAC;SACX;QAED,IAAI,IAAI,EAAE;YACR,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,IAEZ,KAAK,CACU;QAClB,oBAAC,SAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,EAChD,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;YAExB,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,SAAS,GAAG;IAEpB,SAAS,EAAE,SAAS,CAAC,MAAM;IAE3B,kBAAkB,EAAE,SAAS,CAAC,MAAM;IAEpC,eAAe,EAAE,SAAS,CAAC,MAAM;IAEjC,KAAK,EAAE,SAAS,CAAC,IAAI;IAErB,IAAI,EAAE,SAAS,CAAC,MAAM;IAEtB,EAAE,EAAE,SAAS,CAAC,WAAW;IAEzB,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU;CAC3E,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,EAAE;IACb,kBAAkB,EAAE,EAAE;IACtB,eAAe,EAAE,EAAE;IACnB,KAAK,EAAE,EAAE;IACT,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"hover-card.js","sourceRoot":"","sources":["../../../src/ui/hover-card/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,SAAS,EACT,eAAe,EACf,cAAc,EACd,YAAY,EACZ,iBAAiB,GAClB,MAAM,mBAAmB,CAAC;AAE3B,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAY1C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,eAAe,GAAG,EAAE,EACpB,kBAAkB,GAAG,EAAE,EACvB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,IAAI,EACT,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,KAAK,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAC7D,MAAM,cAAc,GAAG,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAG7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,EAAE,EAAE;YACN,OAAO,EAAE,CAAC;SACX;QAED,IAAI,IAAI,EAAE;YACR,OAAO,GAAG,CAAC;SACZ;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,6BAAK,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC;QACrC,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,eAAe,CAAC,EAC1C,EAAE,EAAE,SAAS,mBACE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,IAEjD,KAAK,CACU;QAClB,oBAAC,SAAS,OACJ,cAAc,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,EAAE,kBAAkB,CAAC,EAChD,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE;YAExB,oBAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI;YAC3B,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAClE,CACR,CACP,CAAC;AACJ,CAAC,CAAC"}

package/lib-esm/ui/hover-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/hover-card/index.js"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/hover-card/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib-esm/ui/tooltip/tooltip.js

@@ -3,10 +3,11 @@ import cx from 'classnames';
 import { Tooltip as UITooltip, TooltipAnchor as UITooltipAnchor, TooltipArrow as UITooltipArrow, useTooltipState, } from 'ariakit/tooltip';
 import css from './tooltip.module.css';
 export const Tooltip = (props) => {
+    var _a;
     const { className = '', tooltipClassName = '', title = '', as: Component = 'span', containerRef: ref, darkMode = true, ...restProps } = props;
     const tooltip = useTooltipState({ placement: 'top', timeout: 300 });
     return (React.createElement(React.Fragment, null,
-        React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, ...(ref ? { ref } : {}), ...restProps }),
+        React.createElement(UITooltipAnchor, { as: Component, className: cx(css.root, className), state: tooltip, "aria-controls": tooltip.open ? (_a = tooltip.contentElement) === null || _a === void 0 ? void 0 : _a.id : '', ...(ref ? { ref } : {}), ...restProps }),
         title && (React.createElement(UITooltip, { state: tooltip, className: cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode) },
             React.createElement(UITooltipArrow, { state: tooltip, className: css.arrow, size: 12 }),
             title))));

package/lib-esm/ui/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAWvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,KACV,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IACR,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC;YAE7E,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/ui/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,aAAa,IAAI,eAAe,EAChC,YAAY,IAAI,cAAc,EAC9B,eAAe,GAChB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAWvC,MAAM,CAAC,MAAM,OAAO,GAAG,CACrB,KAA6E,EAC7E,EAAE;;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,gBAAgB,GAAG,EAAE,EACrB,KAAK,GAAG,EAAE,EACV,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,YAAY,EAAE,GAAG,EACjB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL;QACE,oBAAC,eAAe,IACd,EAAE,EAAE,SAA8B,EAClC,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAE,OAAO,mBACC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,MAAA,OAAO,CAAC,cAAc,0CAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KACzD,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KACpB,SAAS,GACb;QACD,KAAK,IAAI,CACR,oBAAC,SAAS,IACR,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAI,GAAG,CAAC,eAAe,CAAC;YAE7E,oBAAC,cAAc,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI;YACjE,KAAK,CACI,CACb,CACA,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bundle-stats/ui",
-  "version": "4.3.3",
+  "version": "4.3.5",
   "description": "UI components for BundleStats projects.",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -36,7 +36,7 @@
   },
   "homepage": "https://github.com/relative-ci/bundle-stats/blob/master/packages/ui#readme",
   "devDependencies": {
-    "@babel/preset-env": "7.21.4",
+    "@babel/preset-env": "7.21.5",
     "@babel/preset-react": "7.18.6",
     "@storybook/addon-essentials": "6.5.16",
     "@storybook/addon-knobs": "6.4.0",
@@ -63,7 +63,7 @@
     "react-dom": "17.0.2",
     "react-router-dom": "5.3.4",
     "react-test-renderer": "18.2.0",
-    "rimraf": "5.0.0",
+    "rimraf": "5.0.1",
     "typescript": "5.0.4",
     "typescript-plugin-css-modules": "5.0.1"
   },
@@ -76,11 +76,11 @@
     "react-router-dom": "^5.0.0"
   },
   "dependencies": {
-    "@bundle-stats/utils": "^4.3.3",
+    "@bundle-stats/utils": "^4.3.5",
     "ariakit": "2.0.0-next.44",
     "modern-css-reset": "1.4.0",
     "query-string": "7.1.3",
     "use-query-params": "2.2.1"
   },
-  "gitHead": "572057f29bb9cbbbdbdeb7b91002170105c16ac6"
+  "gitHead": "b055f5b56eb0f1bc0b7229b39e64ae35f51eb986"
 }

package/src/components/run-info/run-info.module.css

@@ -39,7 +39,28 @@
   width: 5em;
 }
 
-/* Size large */
+/* Hover state */
+.titleIcon span[aria-controls=""] {
+  opacity: 0;
+  visibility: none;
+  transition: var(--ui-transition-out);
+}
+
+.root:hover .titleIcon span {
+  opacity: 1;
+  visibility: visible;
+  transition: var(--ui-transition-in);
+}
+
+/* Size variation */
+.small .info {
+  margin-top: var(--space-xxxsmall);
+}
+
+.small .currentMetric {
+  font-size: var(--size-xlarge);
+}
+
 .large .info {
   margin-top: var(--space-xxsmall);
 }

package/src/components/run-info/run-info.stories.tsx

@@ -6,6 +6,15 @@ import { RunInfo } from './run-info';
 export default {
   title: 'Components/RunInfo',
   component: RunInfo,
+  args: {
+    size: 'medium',
+  },
+  argTypes: {
+    size: {
+      options: ['small', 'medium', 'large'],
+      control: { type: 'select' },
+    },
+  },
 } as Meta;
 
 const Template: Story = (args) => <RunInfo id="webpack.totalSizeByTypeALL" {...args} />;

package/src/components/run-info/run-info.tsx

@@ -34,7 +34,7 @@ export interface RunInfoProps {
   deltaType?: string;
 
   as?: React.ElementType;
-  size?: 'medium' | 'large';
+  size?: 'small' | 'medium' | 'large';
 
   showBaseline?: boolean;
   loading?: boolean;

package/src/ui/hover-card/hover-card.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+import { HoverCard, HoverCardProps } from '.';
+
+export default {
+  title: 'UI/HoverCard',
+  component: HoverCard,
+} as Meta;
+
+const Template: Story<HoverCardProps> = (props) => (
+  <>
+    <HoverCard {...props} />
+    <p style={{ position: 'relative', zIndex: 1, maxWidth: 360 }}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in neque ante. Curabitur
+      vehicula, lorem sit amet fringilla dapibus, justo mauris varius elit, ut fermentum leo velit
+      eget risus
+    </p>
+  </>
+);
+
+export const Default = () => (
+  <Template label="main.js">
+    <h1>main.js</h1>
+    <p>info</p>
+  </Template>
+);
+
+export const WithRenderFn = () => (
+  <Template label="main.js">
+    {({ close }) => (
+      <div>
+        <h1>main.js</h1>
+        <p>info</p>
+        <button type="button" onClick={close}>
+          close
+        </button>
+      </div>
+    )}
+  </Template>
+);

package/src/ui/hover-card/{hover-card.jsx → hover-card.tsx}

@@ -1,5 +1,4 @@
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import cx from 'classnames';
 import {
   Hovercard,
@@ -11,8 +10,26 @@ import {
 
 import css from './hover-card.module.css';
 
-export const HoverCard = (props) => {
-  const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
+export interface HoverCardProps {
+  className?: string;
+  anchorClassName?: string;
+  hoverCardClassName?: string;
+  href?: string;
+  as?: React.ElementType;
+  label: React.ReactNode;
+  children?: React.ReactNode | (({ close }: { close: () => void }) => React.ReactNode);
+}
+
+export const HoverCard = (props: HoverCardProps) => {
+  const {
+    className = '',
+    anchorClassName = '',
+    hoverCardClassName = '',
+    href = '',
+    as = null,
+    label,
+    children,
+  } = props;
 
   const state = useHovercardState({ gutter: 8, timeout: 800 });
   const hovercardProps = useHovercard({ state, portal: true });
@@ -37,6 +54,7 @@ export const HoverCard = (props) => {
         href={href}
         className={cx(css.anchor, anchorClassName)}
         as={Component}
+        aria-controls={state.open ? hovercardProps.id : ''}
       >
         {label}
       </HovercardAnchor>
@@ -52,29 +70,3 @@ export const HoverCard = (props) => {
     </div>
   );
 };
-
-HoverCard.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-  /** Adopted child class name for hover card */
-  hoverCardClassName: PropTypes.string,
-  /** Adopted child class name for anchor */
-  anchorClassName: PropTypes.string,
-  /** Anchor label */
-  label: PropTypes.node,
-  /** Anchor href */
-  href: PropTypes.string,
-  /** Anchor component */
-  as: PropTypes.elementType,
-  /** Hover card component */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-};
-
-HoverCard.defaultProps = {
-  className: '',
-  hoverCardClassName: '',
-  anchorClassName: '',
-  label: '',
-  as: '',
-  href: '',
-};

package/src/ui/tooltip/tooltip.tsx

@@ -39,6 +39,7 @@ export const Tooltip = <T extends React.ElementType = 'span'>(
         as={Component as React.ElementType}
         className={cx(css.root, className)}
         state={tooltip}
+        aria-controls={tooltip.open ? tooltip.contentElement?.id : ''}
         {...(ref ? { ref } : {})}
         {...restProps}
       />

package/types/components/run-info/run-info.d.ts

@@ -8,7 +8,7 @@ export interface RunInfoProps {
     delta?: string;
     deltaType?: string;
     as?: React.ElementType;
-    size?: 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
     showBaseline?: boolean;
     loading?: boolean;
     enhance?: boolean;

package/types/ui/hover-card/hover-card.d.ts

@@ -1,27 +1,13 @@
-export function HoverCard(props: any): JSX.Element;
-export namespace HoverCard {
-    namespace propTypes {
-        const className: PropTypes.Requireable<string>;
-        const hoverCardClassName: PropTypes.Requireable<string>;
-        const anchorClassName: PropTypes.Requireable<string>;
-        const label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const href: PropTypes.Requireable<string>;
-        const as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        const children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>>;
-    }
-    namespace defaultProps {
-        const className_1: string;
-        export { className_1 as className };
-        const hoverCardClassName_1: string;
-        export { hoverCardClassName_1 as hoverCardClassName };
-        const anchorClassName_1: string;
-        export { anchorClassName_1 as anchorClassName };
-        const label_1: string;
-        export { label_1 as label };
-        const as_1: string;
-        export { as_1 as as };
-        const href_1: string;
-        export { href_1 as href };
-    }
+import React from 'react';
+export interface HoverCardProps {
+    className?: string;
+    anchorClassName?: string;
+    hoverCardClassName?: string;
+    href?: string;
+    as?: React.ElementType;
+    label: React.ReactNode;
+    children?: React.ReactNode | (({ close }: {
+        close: () => void;
+    }) => React.ReactNode);
 }
-import PropTypes from 'prop-types';
+export declare const HoverCard: (props: HoverCardProps) => JSX.Element;

package/types/ui/hover-card/index.d.ts

@@ -1 +1 @@
-export * from "./hover-card";
+export * from './hover-card';