@bundle-stats/ui 4.0.3 → 4.0.4

package/src/ui/filters/filters.module.css

@@ -1,5 +1,9 @@
 /* Checkbox + label + button */
 .filter {
+  /* Update MenuItem padding */
+  padding-top: calc(var(--space-xxxsmall) / 2);
+  padding-bottom: calc(var(--space-xxxsmall) / 2);
+
   position: relative;
   width: 100%;
   max-width: 240px;
@@ -11,7 +15,6 @@
 }
 
 .filterInput {
-  border-radius: var(--radius-small) 0 0 var(--radius-small);
   flex: 0 0 auto;
   height: 1em;
   cursor: pointer;
@@ -26,17 +29,17 @@
 }
 
 .filterOnlyButton {
-  padding: var(--space-xxsmall);
+  padding: var(--space-xxxsmall) var(--space-xsmall);
   display: none;
   appearance: none;
   border: none;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255) 30%);
   cursor: pointer;
-  line-height: 1;
   position: absolute;
   right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 0;
+  bottom: 0;
+  line-height: var(--space-xsmall);
 }
 
 /** filter disabled state */
@@ -63,6 +66,7 @@
 
 /** Filter standard variation */
 .filterStandalone {
+  padding: 0;
   width: auto;
   color: var(--color-text-light);
   z-index: var(--layout-xlow); /* show collapsed border */
@@ -95,16 +99,11 @@
   overflow: auto;
 }
 
-.filterGroupItem {
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
 .filterGroupActions {
-  margin-top: var(--space-xxsmall);
+  margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
   padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xsmall));
+  margin-bottom: calc(0px - var(--space-xxsmall));
   border-top: 1px solid var(--color-outline);
 }
 

package/src/ui/hover-card/hover-card.jsx

@@ -25,7 +25,7 @@ const resolveComponent = (as, href) => {
 
 export const HoverCard = (props) => {
   const { className, anchorClassName, hoverCardClassName, href, as, label, children } = props;
-  const state = useHovercardState({ gutter: 8 });
+  const state = useHovercardState({ gutter: 8, timeout: 700 });
   const hoverCardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href

package/src/ui/sort-dropdown/sort-dropdown.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
@@ -6,6 +6,65 @@ import { Dropdown } from '../dropdown';
 import { Icon } from '../icon';
 import css from './sort-dropdown.module.css';
 
+const Item = ({
+  className,
+  as: Component,
+  id,
+  label,
+  active,
+  direction,
+  defaultDirection,
+  getButtonOnClick,
+  ...restProps }) => {
+
+  const buttonProps = useMemo(() => {
+    let resolveNextDirection = defaultDirection;
+
+    if (active) {
+      resolveNextDirection = direction === 'asc' ? 'desc' : 'asc';
+    }
+
+    if (resolveNextDirection === 'desc') {
+      return {
+        className: css.itemAsc,
+        onClick: getButtonOnClick(id, 'desc'),
+        title: `Order data by ${label} descending`,
+      };
+    }
+
+    return {
+      onClick: getButtonOnClick(id, 'asc'),
+      title: `Order data by ${label} ascending`,
+    };
+  }, [active, direction, defaultDirection, id, label]);
+
+  return (
+    <Component
+      {...restProps}
+      {...buttonProps}
+      className={cx(className, css.item, active && css.itemActive, buttonProps.className)}
+    >
+      <Icon className={css.itemIcon} glyph="arrow" />
+      <span className={css.itemLabel}>{label}</span>
+    </Component>
+  );
+};
+
+Item.propTypes = {
+  className: PropTypes.string,
+  as: PropTypes.element.isRequired,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  active: PropTypes.bool.isRequired,
+  direction: PropTypes.string.isRequired,
+  defaultDirection: PropTypes.string.isRequired,
+  getButtonOnClick: PropTypes.func.isRequired,
+};
+
+Item.defaultProps = {
+  className: '',
+};
+
 export const SortDropdown = (props) => {
   const { className, label, fields, field, direction, onChange } = props;
   const rootClassName = cx(css.root, className);
@@ -23,36 +82,20 @@ export const SortDropdown = (props) => {
         return (
           <div className={css.items}>
             {Object.entries(fields).map(([key, item]) => {
-              const buttonProps =
-                direction === 'asc'
-                  ? {
-                    className: css.itemAsc,
-                    onClick: getButtonOnClick(key, 'desc'),
-                    title: `Order data by ${item.label} descending`,
-                  }
-                  : {
-                    onClick: getButtonOnClick(key, 'asc'),
-                    title: `Order data by ${item.label} ascending`,
-                  };
-
               const isActive = field === key;
 
               return (
-                <MenuItem
+                <Item
                   key={key}
-                  {...menu}
-                  {...buttonProps}
-                  className={cx(
-                    buttonProps.className,
-                    menuItemClassName,
-                    css.item,
-                    isActive && menuItemActiveClassName,
-                    isActive && css.active,
-                  )}
-                >
-                  <span className={css.itemLabel}>{item.label}</span>
-                  <Icon className={css.itemIcon} glyph="arrow" />
-                </MenuItem>
+                  as={MenuItem}
+                  className={cx(menuItemClassName, isActive && menuItemActiveClassName)}
+                  id={key}
+                  label={item.label}
+                  direction={direction}
+                  defaultDirection={item.defaultDirection}
+                  active={isActive}
+                  getButtonOnClick={getButtonOnClick}
+                />
               );
             })}
           </div>

package/src/ui/sort-dropdown/sort-dropdown.module.css

@@ -4,7 +4,9 @@
 }
 
 .itemIcon {
-  display: none;
+  flex: 0 0 auto;
+  visibility: hidden;
+  margin-right: var(--space-xxxsmall);
 }
 
 .itemLabel {
@@ -15,6 +17,6 @@
   transform: rotate(180deg);
 }
 
-.item.active .itemIcon {
-  display: block;
+.itemActive .itemIcon {
+  visibility: visible;
 }