@bundle-stats/ui 4.22.3 → 4.23.0-beta.2

package/src/css/variables.css

@@ -32,22 +32,21 @@
   --line-height-number: 1.2em;
 
   /*
-   * Color scheme:
-   * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23ebc013&mcgpalette3=%232a2933&mcgpalette4=%23287acc&themename=bundle-stats
-   * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
+   * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
    */
-  --color-gray-25: #f9f9f9;
-  --color-gray-50: #e5e5e7;
-  --color-gray-100: #d2d2d4;
-  --color-gray-200: #959499;
-  --color-gray-300: #6a6970;
-  --color-gray-400: #4a4952;
-  --color-gray-500: #2a2933;
-  --color-gray-600: #25242e;
-  --color-gray-700: #1f1f27;
-  --color-gray-800: #191920;
-  --color-gray-900: #0f0f14;
+
+   --color-gray-25: #f9f9f9;
+   /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
+   --color-gray-50: #ececed;
+   --color-gray-100: #c9c9cc;
+   --color-gray-200: #a7a7aa;
+   --color-gray-300: #848489;
+   --color-gray-400: #626268;
+   --color-gray-500: #3f3f47;
+   --color-gray-600: #36363c;
+   --color-gray-700: #2c2c32;
+   --color-gray-800: #232327;
+   --color-gray-900: #19191c;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -56,16 +55,17 @@
   --color-gray-ultra-dark: var(--color-gray-900);
 
   --color-red-25: #fdf5f6;
-  --color-red-50: #fbe9ea;
-  --color-red-100: #f4c7ca;
-  --color-red-200: #eda2a7;
-  --color-red-300: #e57c83;
-  --color-red-400: #e06069;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/DA444E/218/68/78/white */
+  --color-red-50: #fbeced;
+  --color-red-100: #f5cbcd;
+  --color-red-200: #eea9ae;
+  --color-red-300: #e7878e;
+  --color-red-400: #e1666e;
   --color-red-500: #da444e;
-  --color-red-600: #d63e47;
-  --color-red-700: #d0353d;
-  --color-red-800: #cb2d35;
-  --color-red-900: #c21f25;
+  --color-red-600: #c92a35;
+  --color-red-700: #b31520;
+  --color-red-800: #8c0710;
+  --color-red-900: #660005;
   --color-red-ultra-light: var(--color-red-100);
   --color-red-light: var(--color-red-300);
   --color-red: var(--color-red-500);
@@ -73,16 +73,17 @@
   --color-red-ultra-dark: var(--color-red-900);
 
   --color-blue-25: #f3f8fd;
-  --color-blue-50: #e5eff9;
-  --color-blue-100: #bfd7f0;
-  --color-blue-200: #94bde6;
-  --color-blue-300: #69a2db;
-  --color-blue-400: #488ed4;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/287ACC/40/122/204/white */
+  --color-blue-50: #eaf2fa;
+  --color-blue-100: #c3daf1;
+  --color-blue-200: #9cc2e8;
+  --color-blue-300: #75aade;
+  --color-blue-400: #4f92d5;
   --color-blue-500: #287acc;
-  --color-blue-600: #2472c7;
-  --color-blue-700: #1e67c0;
-  --color-blue-800: #185db9;
-  --color-blue-900: #0f4aad;
+  --color-blue-600: #1168bf;
+  --color-blue-700: #0055ac;
+  --color-blue-800: #00438c;
+  --color-blue-900: #003166;
 
   --color-blue-ultra-light: var(--color-blue-100);
   --color-blue-light: var(--color-blue-300);
@@ -91,16 +92,17 @@
   --color-blue-ultra-dark: var(--color-blue-900);
 
   --color-green-25: #f6fbf6;
-  --color-green-50: #ebf7ea;
-  --color-green-100: #cceacb;
-  --color-green-200: #aadca8;
-  --color-green-300: #88ce85;
-  --color-green-400: #6fc46a;
-  --color-green-500: #55b950;
-  --color-green-600: #4eb249;
-  --color-green-700: #44aa40;
-  --color-green-800: #3ba237;
-  --color-green-900: #2a9327;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/55b950/85/185/80/white */
+  --color-green-50: #eef8ee;
+  --color-green-100: #cfebce;
+  --color-green-200: #b1dfaf;
+  --color-green-300: #92d28f;
+  --color-green-400: #74c670;
+  --color-green-500: #55B950;
+  --color-green-600: #3ea839;
+  --color-green-700: #2b9426;
+  --color-green-800: #1b7b16;
+  --color-green-900: #0f5f0b;
 
   --color-green-ultra-light: var(--color-green-100);
   --color-green-light: var(--color-green-300);
@@ -109,18 +111,18 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #fffdf2;
-  --color-yellow-50: #fdf7e3;
-  --color-yellow-100: #f9ecb8;
-  --color-yellow-200: #f5e089;
-  --color-yellow-300: #f1d35a;
-  --color-yellow-400: #eec936;
-  --color-yellow-500: #ebc013;
-  --color-yellow-600: #e9ba11;
-  --color-yellow-700: #e5b20e;
-  --color-yellow-800: #e2aa0b;
-  --color-yellow-900: #dd9c06;
-
-  --color-yellow-light-background: var(--color-yellow-25);
+  /* https://hihayk.github.io/scale/#4/5/40/80/0/-0/0/0/E5C110/229/193/16/white */
+  --color-yellow-50:  #faf3cf;
+  --color-yellow-100: #f6e9a9;
+  --color-yellow-200: #f2df83;
+  --color-yellow-300: #edd55d;
+  --color-yellow-400: #e9cb36;
+  --color-yellow-500: #e5c110;
+  --color-yellow-600: #ceae0e;
+  --color-yellow-700: #b79a0d;
+  --color-yellow-800: #a0870b;
+  --color-yellow-900: #89740a;
+
   --color-yellow-ultra-light: var(--color-yellow-100);
   --color-yellow-light: var(--color-yellow-300);
   --color-yellow: var(--color-yellow-500);
@@ -130,11 +132,13 @@
   --color-dark: #111;
   --color-light: #fff;
 
-  /* Functional color variables */
   --color-branding-light: #2b76d4;
   --color-branding: #1a477f;
   --color-branding-dark: #09182a;
+}
 
+body {
+  /* Functional color variables */
   --color-text-ultra-light: var(--color-gray-ultra-light);
   --color-text-light: var(--color-gray-light);
   --color-text: var(--color-gray);
@@ -183,8 +187,8 @@
   --color-backdrop: rgba(0, 0, 0, 0.05);
   --color-shadow: rgba(0, 0, 0, 0.25);
 
-  --transition-duration-in: 0.2s;
-  --transition-duration-out: 0.17s;
+  --transition-duration-in: 0.16s;
+  --transition-duration-out: 0.10s;
   --transition-in: all var(--transition-duration-in) ease-in;
   --transition-out: all var(--transition-duration-out) ease-out;
 
@@ -219,3 +223,12 @@
   --entry-info-width: 64rem;
   --entry-info-top: var(--header-height);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}

package/src/ui/button/button.tsx

@@ -41,6 +41,7 @@ interface ButtonProps<T extends React.ElementType> {
 
 const ButtonComponent = <T extends React.ElementType = 'button'>(
   props: ButtonProps<T> & Omit<React.ComponentPropsWithoutRef<T>, keyof ButtonProps<T>>,
+  ref: React.Ref<HTMLButtonElement>,
 ) => {
   const {
     className = '',
@@ -86,7 +87,7 @@ const ButtonComponent = <T extends React.ElementType = 'button'>(
   );
 
   return (
-    <Component {...restProps} className={rootClassName}>
+    <Component {...restProps} ref={ref} className={rootClassName}>
       {glyph && <Icon glyph={glyph} className={css.glyph} />}
       {children && <span className={css.content}>{children}</span>}
       {rightGlyph && <Icon glyph={rightGlyph} className={css.glyph} />}

package/src/ui/dialog/dialog.module.css

@@ -3,6 +3,17 @@
   align-items: center;
   justify-content: center;
   z-index: var(--layer-xxhigh);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.backdrop[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.backdrop[data-leave] {
+  pointer-events: none;
 }
 
 .backdrop::before {
@@ -27,6 +38,17 @@
   background: var(--color-background);
   box-shadow: 0 0 var(--space-medium) var(--color-shadow);
   z-index: var(--layer-xxhigh);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dialog[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.digalog[data-leave] {
+  pointer-events: none;
 }
 
 .header {

package/src/ui/dialog/dialog.tsx

@@ -1,13 +1,20 @@
 import type { ComponentProps, ReactNode } from 'react';
 import React from 'react';
 import cx from 'classnames';
-import { Dialog as AriakitDialog, DialogDismiss as AriakitDialogDismiss } from 'ariakit/dialog';
+import {
+  Dialog as AriakitDialog,
+  DialogDismiss as AriakitDialogDismiss,
+  useDialogState as useAriakitDialogState,
+  type DialogStateProps,
+} from 'ariakit/dialog';
 
 import { Stack } from '../../layout/stack';
 import { BUTTON_GLYPHS, Button } from '../button';
 import css from './dialog.module.css';
 
-export { useDialogState } from 'ariakit/dialog';
+export const useDialogState = (options: DialogStateProps = {}) => {
+  return useAriakitDialogState({ animated: true, ...options });
+};
 
 type AriakitDialogProps = ComponentProps<typeof AriakitDialog>;
 

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

@@ -13,9 +13,23 @@
   border-radius: var(--radius-small);
   box-shadow: var(--shadow-layer);
   background: var(--color-background);
-  min-width: 12em;
+  min-width: 16em;
   z-index: var(--layer-high);
-  padding: calc(var(--space-xxxsmall) / 2);
+  padding: var(--space-xxxsmall);
+  color: var(--color-text-light);
+  font-size: var(--size-small);
+  line-height: var(--line-height);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.dropdown[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.dropdown[data-leave] {
+  pointer-events: none;
 }
 
 .dropdown:focus {
@@ -29,12 +43,9 @@
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
+  padding: var(--space-xxxsmall);
   background: none;
   text-align: left;
-  color: var(--color-text-light);
-  font-size: var(--size-small);
-  line-height: var(--line-height);
   text-decoration: none;
   cursor: default;
 }
@@ -58,3 +69,37 @@
   background: var(--color-highlight-info);
   color: var(--color-primary-dark);
 }
+
+
+.group {
+  position: relative;
+  padding: calc(var(--space-xxxsmall) / 2 + 1px) 0 calc(var(--space-xxxsmall) / 2);
+}
+
+.group::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: var(--space-xxxsmall);
+  right: var(--space-xxxsmall);
+  top: 0px;
+  height: 1px;
+  border: none;
+  background: var(--color-outline);
+}
+
+.group:first-child {
+  padding-top: 0;
+}
+
+.group:first-child::before {
+  display: none;
+}
+
+.group:last-child {
+  padding-bottom: 0;
+}
+
+.group:empty {
+  display: none;
+}

package/src/ui/dropdown/dropdown.tsx

@@ -1,9 +1,19 @@
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import cx from 'classnames';
 import { Menu, MenuButton, MenuItem, MenuStateProps, useMenuState } from 'ariakit/menu';
+import isNull from 'lodash/isNull';
+import isUndefined from 'lodash/isUndefined';
 
 import { Button, BUTTON_SIZE } from '../button';
 import css from './dropdown.module.css';
+import { Icon } from '../icon';
+
+export type DropdownGroupProps = ComponentProps<'div'>;
+
+export const DropdownGroup = (props: DropdownGroupProps) => {
+  const { className, ...restProps } = props;
+  return <div className={cx(css.group, className)} {...restProps} />;
+};
 
 interface DropdownItemProps {
   isActive?: boolean;
@@ -26,6 +36,7 @@ interface DropdownProps {
   placement?: MenuStateProps['placement'];
   gutter?: MenuStateProps['gutter'];
   shift?: MenuStateProps['shift'];
+  showChevron?: boolean;
 }
 
 export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
@@ -35,6 +46,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
     label = null,
     ariaLabel = '',
     glyph = '',
+    showChevron: initialShowChevron,
     disabled = false,
     placement,
     gutter = 4,
@@ -43,7 +55,8 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
   } = props;
 
   const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
-  const menuState = useMenuState({ placement, gutter, shift });
+  const menuState = useMenuState({ animated: true, placement, gutter, shift });
+  const showChevron = isUndefined(initialShowChevron) ? !isNull(label) : initialShowChevron;
 
   return (
     <>
@@ -52,8 +65,10 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
         outline
         size={BUTTON_SIZE.SMALL}
         glyph={glyph}
+        rightGlyph={showChevron ? Icon.ICONS.CHEVRON_DOWN : undefined}
         disabled={disabled}
         state={menuState}
+        toggleOnClick
         tabIndex={null}
         className={cx(css.button, className)}
       >

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

@@ -101,23 +101,9 @@
   text-transform: lowercase;
 }
 
-.filterGroupSearchWrapper {
-  padding-bottom: var(--space-xxxsmall);
-  margin-bottom: var(--space-xxxsmall);
-  border-bottom: 1px solid var(--color-outline);
-}
-
 .filterGroupSearchNotFound {
   padding: var(--space-xxsmall) 0;
   text-align: center;
   font-size: var(--size-small);
   color: var(--color-text-light);
 }
-
-.filterGroupActions {
-  margin-top: var(--space-xxxsmall);
-  padding-top: var(--space-xxxsmall);
-  padding-bottom: var(--space-xxxsmall);
-  margin-bottom: calc(0px - var(--space-xxxsmall));
-  border-top: 1px solid var(--color-outline);
-}

package/src/ui/filters/filters.tsx

@@ -6,7 +6,7 @@ import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Button } from '../button';
 import { ControlGroup } from '../control-group';
-import { Dropdown, DropdownItem } from '../dropdown';
+import { Dropdown, DropdownGroup, DropdownItem } from '../dropdown';
 import { InputSearch } from '../input-search';
 import * as I18N from './filters.i18n';
 import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
@@ -40,12 +40,86 @@ const Filter = (props: FilterBooleanProps) => {
   );
 };
 
+const getGroupItemKey = (groupKey: string, itemKey: string): string => `${groupKey}.${itemKey}`;
+
+type ToggleFilters = (newFilters: Record<string, boolean>) => void;
+
+type GetOnGroupCheck = (value: boolean, overrides?: Record<string, boolean>) => () => void;
+
+interface FilterDropdownItemProps {
+  className?: string;
+  id: string;
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: FilterBooleanProps['onChange'];
+  toggleFilters: ToggleFilters;
+  getOnGroupCheck: GetOnGroupCheck;
+}
+
+const FilterDropdownItem = (props: FilterDropdownItemProps) => {
+  const { className, id, label, checked, disabled, onChange, toggleFilters, getOnGroupCheck } =
+    props;
+
+  /**
+   * Toggle the filter when the menu item itself is activated: ariakit fires a click on the menu
+   * item when pressing Enter/Space, and clicking the item padding targets it directly. Clicks on
+   * the nested label/checkbox and on the only button are handled by their own handlers.
+   */
+  const onItemClick = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      if (disabled || event.target !== event.currentTarget) {
+        return;
+      }
+
+      toggleFilters({ [id]: !checked });
+    },
+    [disabled, toggleFilters, id, checked],
+  );
+
+  /**
+   * Check only the current filter of the group
+   */
+  const onOnlyClick = useCallback(
+    () => getOnGroupCheck(false, { [id]: true })(),
+    [getOnGroupCheck, id],
+  );
+
+  return (
+    <DropdownItem
+      onClick={onItemClick}
+      hideOnClick={false}
+      className={cx(css.filterGroupItem, className)}
+    >
+      <Filter
+        label={label}
+        name={id}
+        onChange={onChange}
+        checked={checked}
+        disabled={disabled}
+        className={css.filterGroupItemFilter}
+      />
+      <Button
+        kind="info"
+        solid
+        size="small"
+        type="button"
+        onClick={onOnlyClick}
+        disabled={disabled}
+        className={css.filterGroupOnlyButton}
+      >
+        {I18N.ONLY}
+      </Button>
+    </DropdownItem>
+  );
+};
+
 interface FilterGroupProps extends React.ComponentProps<'div'> {
   groupKey: string;
   data: FilterGroupFieldData;
   values: Record<string, boolean>;
   onCheckboxChange: FilterBooleanProps['onChange'];
-  toggleFilters: (newFilters: Record<string, boolean>) => void;
+  toggleFilters: ToggleFilters;
 }
 
 const FilterGroup = (props: FilterGroupProps) => {
@@ -70,22 +144,24 @@ const FilterGroup = (props: FilterGroupProps) => {
     </>
   );
 
-  const getOnGroupCheck =
-    (value: boolean, overrides = {}) =>
-    () => {
-      const newFilters = groupItems.reduce(
-        (agg, { key: itemKey }) => ({
-          ...agg,
-          [`${groupKey}.${itemKey}`]: value,
-        }),
-        {},
-      );
-
-      toggleFilters({
-        ...newFilters,
-        ...overrides,
-      });
-    };
+  const getOnGroupCheck: GetOnGroupCheck = useCallback(
+    (value, overrides = {}) =>
+      () => {
+        const newFilters = groupItems.reduce(
+          (agg, { key: itemKey }) => ({
+            ...agg,
+            [getGroupItemKey(groupKey, itemKey)]: value,
+          }),
+          {},
+        );
+
+        toggleFilters({
+          ...newFilters,
+          ...overrides,
+        });
+      },
+    [groupItems, groupKey, toggleFilters],
+  );
 
   const filteredGroupItems = useMemo(() => {
     if (!search) {
@@ -102,16 +178,16 @@ const FilterGroup = (props: FilterGroupProps) => {
       ariaLabel={`${groupLabel}: ${filterSuffix}`}
     >
       {groupItems.length > 10 && (
-        <div className={css.filterGroupSearchWrapper}>
+        <DropdownGroup>
           <InputSearch
             defaultValue={search}
             onChange={setSearch}
             placeholder={I18N.GROUP_SEARCH}
             debounceWait={0}
           />
-        </div>
+        </DropdownGroup>
       )}
-      <div className={css.filterGroupItems}>
+      <DropdownGroup className={css.filterGroupItems}>
         {filteredGroupItems.length === 0 && (
           <Stack className={css.filterGroupSearchNotFound}>
             <p>{I18N.GROUP_NOT_FOUND}</p>
@@ -129,36 +205,24 @@ const FilterGroup = (props: FilterGroupProps) => {
           </Stack>
         )}
         {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
-          const id = [groupKey, itemKey].join('.');
-          const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
+          const id = getGroupItemKey(groupKey, itemKey);
 
           return (
-            <DropdownItem key={id} className={css.filterGroupItem}>
-              <Filter
-                label={itemData.label}
-                name={id}
-                onChange={onCheckboxChange}
-                checked={values[id]}
-                disabled={itemData.disabled}
-                className={css.filterGroupItemFilter}
-              />
-              <Button
-                kind="info"
-                solid
-                size="small"
-                type="button"
-                onClick={getOnOnlyClick()}
-                disabled={itemData.disabled}
-                className={css.filterGroupOnlyButton}
-              >
-                {I18N.ONLY}
-              </Button>
-            </DropdownItem>
+            <FilterDropdownItem
+              key={id}
+              id={id}
+              label={itemData.label}
+              checked={values[id]}
+              disabled={itemData.disabled}
+              onChange={onCheckboxChange}
+              toggleFilters={toggleFilters}
+              getOnGroupCheck={getOnGroupCheck}
+            />
           );
         })}
-      </div>
+      </DropdownGroup>
       {filteredGroupItems.length !== 0 && (
-        <div className={css.filterGroupActions}>
+        <DropdownGroup className={css.filterGroupActions}>
           {areAllGroupItemsChecked ? (
             <DropdownItem id="clear-all" onClick={getOnGroupCheck(false)} role="button">
               {I18N.CLEAR}
@@ -168,7 +232,7 @@ const FilterGroup = (props: FilterGroupProps) => {
               {I18N.CHECK}
             </DropdownItem>
           )}
-        </div>
+        </DropdownGroup>
       )}
     </Dropdown>
   );

package/src/ui/hover-card/hover-card.module.css

@@ -5,11 +5,14 @@
 .anchor {
   display: inline-block;
   color: inherit;
+  cursor: default;
   text-decoration: none;
+  transition: var(--transition-out);
 }
 
 .anchor:hover {
   color: var(--color-primary);
+  transition: var(--transition-in);
 }
 
 .anchor:focus {
@@ -27,4 +30,15 @@
   will-change: filter;
   background: var(--color-light);
   font-size: var(--size-small);
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.hoverCard[data-enter] {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.hoverCard[data-leave] {
+  pointer-events: none;
 }

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

@@ -31,7 +31,13 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ gutter: 8, timeout: 300, placement: 'top' });
+  const state = useHovercardState({
+    animated: true,
+    gutter: 8,
+    timeout: 300,
+    overflowPadding: 48,
+    placement: 'top',
+  });
   const hovercardProps = useHovercard({ state, portal: true });
 
   // Fallback to span if no href