@bundle-stats/ui 4.23.0-beta.1 → 4.23.0-beta.10

package/src/ui/dialog/dialog.tsx

@@ -9,6 +9,7 @@ import {
 } from 'ariakit/dialog';
 
 import { Stack } from '../../layout/stack';
+import { getCreatePortalElement } from '../../utils/portal';
 import { BUTTON_GLYPHS, Button } from '../button';
 import css from './dialog.module.css';
 
@@ -16,6 +17,11 @@ export const useDialogState = (options: DialogStateProps = {}) => {
   return useAriakitDialogState({ animated: true, ...options });
 };
 
+/**
+ * Raise the z-index of the overlays nested inside the dialog
+ */
+const createPortalElement = getCreatePortalElement(css.portal);
+
 type AriakitDialogProps = ComponentProps<typeof AriakitDialog>;
 
 type DialogProps = {
@@ -48,6 +54,7 @@ export const Dialog = (props: DialogProps) => {
         className: css.backdrop,
       }}
       portal
+      portalElement={createPortalElement}
       className={rootClassName}
     >
       {!modal && (

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

@@ -13,9 +13,12 @@
   border-radius: var(--radius-small);
   box-shadow: var(--shadow-layer);
   background: var(--color-background);
-  min-width: 12em;
-  z-index: var(--layer-high);
-  padding: calc(var(--space-xxxsmall) / 2);
+  min-width: 16em;
+  z-index: var(--layer-overlay);
+  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);
 }
@@ -40,14 +43,15 @@
   outline: none;
   border: 0;
   border-radius: var(--radius-small);
-  padding: calc(var(--space-xxxsmall) + var(--space-xxxsmall) / 2);
+  padding: var(--space-xxxsmall);
   background: none;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
   text-align: left;
-  color: var(--color-text-light);
-  font-size: var(--size-small);
-  line-height: var(--line-height);
   text-decoration: none;
   cursor: default;
+  transition: var(--transition-out);
 }
 
 .item[data-active-item],
@@ -56,6 +60,7 @@
 .item:active {
   background: var(--color-highlight);
   color: var(--color-text);
+  transition: var(--transition-in);
 }
 
 .itemActive {
@@ -69,3 +74,40 @@
   background: var(--color-highlight-info);
   color: var(--color-primary-dark);
 }
+
+.item + .item {
+  margin-top: calc(var(--space-xxxsmall) / 2);
+}
+
+.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.stories.tsx

@@ -15,6 +15,12 @@ const meta = {
       <>
         <DropdownItem>Option 1</DropdownItem>
         <DropdownItem>Option 2</DropdownItem>
+        <DropdownItem as="a" href="#">
+          Option 3
+        </DropdownItem>
+        <DropdownItem as="button" onClick={() => alert('Select option')}>
+          Option 4
+        </DropdownItem>
       </>
     ),
   },

package/src/ui/dropdown/dropdown.tsx

@@ -1,11 +1,20 @@
-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;
 }
@@ -37,7 +46,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
     label = null,
     ariaLabel = '',
     glyph = '',
-    showChevron = true,
+    showChevron: initialShowChevron,
     disabled = false,
     placement,
     gutter = 4,
@@ -47,6 +56,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
 
   const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
   const menuState = useMenuState({ animated: true, placement, gutter, shift });
+  const showChevron = isUndefined(initialShowChevron) ? !isNull(label) : initialShowChevron;
 
   return (
     <>
@@ -58,6 +68,7 @@ export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) =>
         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

@@ -45,9 +45,9 @@
   transition: var(--transition-out);
 }
 
-.filterSingle:hover,
+.filterSingle:focus,
 .filterSingle:active,
-.filterSingle:focus {
+.filterSingle:hover {
   border-color: var(--color-outline-dark);
   transition: var(--transition-in);
 }
@@ -72,8 +72,6 @@
   right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxxsmall);
-  font-size: var(--size-xsmall);
   line-height: 1.1;
 }
 
@@ -101,23 +99,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;
+  min-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
   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';
@@ -20,12 +20,7 @@ const Filter = (props: FilterBooleanProps) => {
   const { className = '', label, name, ...inputProps } = props;
 
   return (
-    <FlexStack
-      space="xxxsmall"
-      alignItems="center"
-      as="label"
-      className={cx(css.filter, className)}
-    >
+    <FlexStack gap="xxxsmall" alignItems="center" as="label" className={cx(css.filter, className)}>
       <input
         type="checkbox"
         id={`filter-${name}`}
@@ -40,12 +35,85 @@ 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
+        solid
+        size="xsmall"
+        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 +138,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,63 +172,57 @@ 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>
-            <div>
-              <Button
-                size="small"
-                kind="primary"
-                type="button"
-                onClick={() => setSearch('')}
-                className={css.filterGroupSearchNotFoundClear}
-              >
-                {I18N.GROUP_SEARCH_CLEAR}
-              </Button>
-            </div>
-          </Stack>
+          <FlexStack
+            alignItems="center"
+            justifyContent="center"
+            className={css.filterGroupSearchNotFound}
+          >
+            <Stack space="xxxsmall">
+              <p>{I18N.GROUP_NOT_FOUND}</p>
+              <div>
+                <Button
+                  solid
+                  size="xsmall"
+                  type="button"
+                  onClick={() => setSearch('')}
+                  className={css.filterGroupSearchNotFoundClear}
+                >
+                  {I18N.GROUP_SEARCH_CLEAR}
+                </Button>
+              </div>
+            </Stack>
+          </FlexStack>
         )}
         {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

@@ -10,17 +10,16 @@
   transition: var(--transition-out);
 }
 
+.anchor:focus,
+.anchor:active,
 .anchor:hover {
-  color: var(--color-primary);
-  transition: var(--transition-in);
-}
-
-.anchor:focus {
+  color: var(--color-accent-dark);
   outline: 0;
+  transition: var(--transition-in);
 }
 
 .hoverCard {
-  z-index: var(--layer-high);
+  z-index: var(--layer-overlay);
   padding: var(--space-small);
   border-radius: var(--radius-medium);
   width: calc(100vw - 2 * var(--space-small));

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

@@ -31,7 +31,13 @@ export const HoverCard = (props: HoverCardProps) => {
     children,
   } = props;
 
-  const state = useHovercardState({ animated: true, 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

package/src/ui/input/input.module.css

@@ -3,7 +3,7 @@
   border-radius: var(--radius-small);
   color: var(--color-text-light);
   width: 100%;
-  transition: var(--transition-in);
+  transition: var(--transition-out);
   appearance: none;
   outline: none;
 }
@@ -27,7 +27,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition: var(--transition-in);
 }
 
 /** Size modifier */

package/src/ui/table/table.module.css

@@ -33,21 +33,28 @@
   border-top: 0;
 }
 
-.root tbody td a {
+.root tbody a {
   color: inherit;
   text-decoration: none;
 }
 
-.root tbody td a:hover,
-.root tbody td a:focus,
-.root tbody td a:active {
-  color: var(--color-primary);
+.root tbody a:focus,
+.root tbody a:active,
+.root tbody a:hover {
+  color: var(--color-accent);
   text-decoration: underline;
 }
 
+/* hover current row */
+.root tbody tr th,
+.root tbody tr td {
+  transition: var(--transition-out);
+}
+
 .root tbody tr:hover th,
 .root tbody tr:hover td {
   background-color: var(--color-highlight-warning);
+  transition: var(--transition-in);
 }
 
 .empty {

package/src/ui/tabs/tabs.module.css

@@ -13,7 +13,7 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
 }
 
 .item::after {
@@ -24,27 +24,31 @@
   right: 0;
   bottom: -1px;
   height: 2px;
-  background: transparent;
+  background: currentColor;
+  opacity: 0;
+  transition: var(--transition-out);
 }
 
-.item:hover,
+.item:focus,
 .item:active,
-.item:focus {
-  color: var(--color-primary);
+.item:hover {
+  color: var(--color-accent);
   outline: none;
-  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
 .item:active::after,
 .item:focus::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }
 
 .itemActive {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-in);
 }
 
 .itemActive::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }

package/src/ui/tag/tag.module.css

@@ -10,7 +10,6 @@
 
 a.root {
   text-decoration: none;
-  transition: var(--transition-out);
 }
 
 a.root:hover,
@@ -19,7 +18,6 @@ a.root:active {
   opacity: 0.8;
   color: var(--color-light);
   text-decoration: none;
-  transition: var(--transition-in);
 }
 
 /** Kind variation */

package/src/ui/textarea/textarea.module.css

@@ -4,7 +4,7 @@
   color: var(--color-text-light);
   width: 100%;
   resize: vertical;
-  transition: var(--transition-in);
+  transition: var(--transition-out);
   appearance: none;
   outline: none;
 }
@@ -28,7 +28,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition: var(--transition-in);
 }
 
 .root[readonly=''] {

package/src/ui/toolbar/toolbar.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 
+import { FlexStack } from '../../layout/flex-stack';
 import css from './toolbar.module.css';
 
 export const Toolbar = (props) => {
@@ -12,7 +13,9 @@ export const Toolbar = (props) => {
     <div className={rootClassName}>
       <div className={css.content}>{children}</div>
       {renderActions && (
-        <div className={css.actions}>{renderActions({ actionClassName: css.action })}</div>
+        <FlexStack gap="xsmall" alignItems="center" className={css.actions}>
+          {renderActions({ actionClassName: css.action })}
+        </FlexStack>
       )}
     </div>
   );

package/src/ui/toolbar/toolbar.module.css

@@ -6,18 +6,12 @@
 
 .actions {
   margin-top: var(--space-xsmall);
-  display: flex;
-  align-items: center;
 }
 
 .action {
   flex: 0 0 auto;
 }
 
-.action + .action {
-  margin-left: var(--space-xsmall);
-}
-
 @media (min-width: 768px) {
   .root {
     display: flex;