@bundle-stats/ui 4.13.0-beta.8 → 4.13.0-beta.9

package/src/ui/dropdown/dropdown.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import cx from 'classnames';
+import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
+
+import { Button, BUTTON_SIZE } from '../button';
+import css from './dropdown.module.css';
+
+interface DropdownItemProps {
+  isActive?: boolean;
+}
+
+export const DropdownItem = (props: DropdownItemProps & React.ComponentProps<typeof MenuItem>) => {
+  const { className = '', isActive = false, ...restProps } = props;
+
+  return (
+    <MenuItem className={cx(css.item, className, isActive && css.itemActive)} {...restProps} />
+  );
+};
+
+interface DropdownProps {
+  buttonClassName?: string;
+  dropdownClassName?: string;
+  label?: React.ReactNode;
+  ariaLabel?: string;
+  glyph?: string;
+  disabled?: boolean;
+}
+
+export const Dropdown = (props: DropdownProps & React.ComponentProps<'div'>) => {
+  const {
+    buttonClassName = '',
+    dropdownClassName = '',
+    label = null,
+    ariaLabel = '',
+    glyph = '',
+    disabled = false,
+    children,
+  } = props;
+
+  const dropdownAriaLabel = ariaLabel || (typeof label === 'string' ? label : '');
+  const menuState = useMenuState();
+
+  return (
+    <>
+      <MenuButton
+        as={Button}
+        outline
+        size={BUTTON_SIZE.SMALL}
+        glyph={glyph}
+        disabled={disabled}
+        state={menuState}
+        tabIndex={null}
+        className={cx(css.button, buttonClassName)}
+      >
+        {label}
+      </MenuButton>
+      <Menu
+        portal
+        state={menuState}
+        aria-label={dropdownAriaLabel}
+        className={cx(css.dropdown, dropdownClassName)}
+      >
+        {children}
+      </Menu>
+    </>
+  );
+};

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

@@ -1,18 +1,18 @@
-/* Checkbox + label + button */
-.filter {
-  /* Update MenuItem padding */
-  padding-top: calc(var(--space-xxxsmall) / 2);
-  padding-bottom: calc(var(--space-xxxsmall) / 2);
+/* explicit ControlGroup last item styles to override ariakit injected sibling nodes */
+.itemLast {
+  border-top-right-radius: var(--radius-small) !important;
+  border-bottom-right-radius: var(--radius-small) !important;
+}
 
+/* Filter (label with input + text) */
+.filter {
   position: relative;
   width: 100%;
   max-width: 240px;
+  color: var(--color-text);
 }
 
-.filterCheckbox {
-}
-
-.filterInput {
+.filterControl {
   flex: 0 0 auto;
   height: 1em;
 }
@@ -25,7 +25,42 @@
   text-overflow: ellipsis;
 }
 
-.filterOnlyButton {
+.filterControl[disabled] + .filterLabel {
+  color: var(--color-text-light);
+}
+
+.filter:hover {
+  color: var(--color-dark);
+}
+
+/** Filter single */
+.filterSingle {
+  padding: calc(var(--space-xxsmall) - 1px);
+  border: 1px solid var(--color-outline);
+  border-radius: var(--radius-small);
+  font-size: var(--size-small);
+  line-height: var(--space-small);
+  color: var(--color-text-ultra-light);
+}
+
+.filterSingle:hover,
+.filterSingle:active,
+.filterSingle:focus {
+  border-color: var(--color-outline-dark);
+}
+
+/** Filter group */
+.filterGroupItems {
+  max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
+  overflow: auto;
+}
+
+.filterGroupItem {
+  position: relative;
+  padding-right: 10em;
+}
+
+.filterGroupOnlyButton {
   display: none;
   position: absolute;
   right: 2px;
@@ -37,7 +72,7 @@
 }
 
 /** cover item text */
-.filterOnlyButton::before {
+.filterGroupOnlyButton::before {
   content: ' ';
   display: block;
   position: absolute;
@@ -48,53 +83,13 @@
   background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--color-highlight) 75%);
 }
 
-/** filter disabled state */
-.filterInput[disabled] + .filterLabel {
-  color: var(--color-text-light);
-}
-
-.filterInput[disabled] + .filterOnlyButton {
-  display: none;
-}
-
 /** filter hover state */
-.filter {
-  color: var(--color-text);
-}
-
-.filter:hover {
-  color: var(--color-dark);
-}
-
-.filter:hover .filterOnlyButton {
+.filterGroupItem:hover .filterGroupOnlyButton {
   display: block;
 }
 
-/** Filter standard variation */
-.filterStandalone {
-  padding: 0;
-  width: auto;
-  color: var(--color-text-light);
-  z-index: var(--layout-xlow); /* show collapsed border */
-  font-size: var(--size-small);
-  line-height: var(--space-small);
-}
-
-.filterStandalone .filterCheckbox {
-  padding: calc(var(--space-xxsmall) - 1px) calc(var(--space-xxsmall) - 1px);
-  border: 1px solid var(--color-outline);
-}
-
-.filterStandalone:hover .filterCheckbox,
-.filterStandalone:active .filterCheckbox,
-.filterStandalone:focus .filterCheckbox {
-  z-index: var(--layout-xlow); /* show collapsed border */
-  box-shadow: var(--outline-hover);
-  color: var(--color-text);
-}
-
 /** Filter group variation */
-.labelSuffixCustom {
+.filterGroupLabelSuffixCustom {
   color: var(--color-text);
   text-transform: lowercase;
 }
@@ -112,11 +107,6 @@
   color: var(--color-text-light);
 }
 
-.filterGroupItems {
-  max-height: calc(10 * (var(--space-small) + 2 * var(--space-xxxsmall)));
-  overflow: auto;
-}
-
 .filterGroupActions {
   margin-top: var(--space-xxxsmall);
   padding-top: var(--space-xxxsmall);
@@ -124,12 +114,3 @@
   margin-bottom: calc(0px - var(--space-xxxsmall));
   border-top: 1px solid var(--color-outline);
 }
-
-.item {
-  position: relative;
-  flex: 0 0 auto;
-}
-
-.itemButton {
-  border-radius: var(--radius-small);
-}

package/src/ui/filters/filters.stories.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions'; // eslint-disable-line
+
+import { getWrapperDecorator } from '../../stories';
+import { Filters } from '.';
+
+export default {
+  title: 'UI/Filters',
+  component: Filters,
+  decorators: [getWrapperDecorator({ paddingLeft: '200px' })],
+} as Meta;
+
+export const Default = () => (
+  <Filters
+    onChange={action('CHANGE')}
+    filters={{
+      changed: {
+        label: 'Changed',
+        defaultValue: true,
+      },
+      fileTypes: {
+        label: 'File types',
+        children: [
+          {
+            key: 'CSS',
+            label: 'CSS',
+            defaultValue: true,
+          },
+          {
+            key: 'JS',
+            label: 'JS',
+            defaultValue: true,
+          },
+          {
+            key: 'HTML',
+            label: 'HTML',
+            defaultValue: true,
+          },
+          {
+            key: 'OTHER',
+            label: 'Asset that is not CSS, JS or HTML',
+            defaultValue: true,
+          },
+        ],
+      },
+    }}
+  />
+);
+
+export const Overflow = () => (
+  <Filters
+    onChange={action('CHANGE')}
+    filters={{
+      changed: {
+        label: 'Changed',
+        defaultValue: true,
+      },
+      chunks: {
+        label: 'Chunks',
+        children: Array(22)
+          .fill('')
+          .map((_, currentIndex) => ({
+            key: `chunk-${currentIndex}`,
+            label: `Chunk ${currentIndex + 1}`,
+            defaultValue: true,
+          })),
+      },
+    }}
+  />
+);
+
+export const DisableOptions = () => (
+  <Filters
+    onChange={action('CHANGE')}
+    filters={{
+      changed: {
+        label: 'Changed',
+        defaultValue: false,
+        disabled: true,
+      },
+      entrypoint: {
+        label: 'Entrypoint',
+        defaultValue: false,
+      },
+      fileTypes: {
+        label: 'File types',
+        children: [
+          {
+            key: 'CSS',
+            label: 'CSS',
+            defaultValue: true,
+          },
+          {
+            key: 'JS',
+            label: 'JS',
+            defaultValue: true,
+            disabled: true,
+          },
+          {
+            key: 'HTML',
+            label: 'HTML',
+            defaultValue: true,
+          },
+        ],
+      },
+    }}
+  />
+);

package/src/ui/filters/filters.tsx

@@ -5,85 +5,51 @@ import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
 import { FlexStack } from '../../layout/flex-stack';
 import { Stack } from '../../layout/stack';
 import { Button } from '../button';
-import { Dropdown } from '../dropdown';
+import { ControlGroup } from '../control-group';
+import { Dropdown, DropdownItem } from '../dropdown';
 import { InputSearch } from '../input-search';
 import * as I18N from './filters.i18n';
 import { getGroupFiltersLabelSuffix, LABELS } from './filters.utils';
 import css from './filters.module.css';
 
-interface FilterProps extends React.ComponentProps<'input'> {
-  as?: React.ElementType;
-  buttonClassName?: string;
+interface FilterBooleanProps extends React.ComponentProps<'input'> {
   label: string;
-  name: string;
-  getOnOnlyClick?: (name: string) => () => void;
 }
 
-const Filter = (props: FilterProps) => {
-  const {
-    className = '',
-    as: Component = 'div',
-    buttonClassName = '',
-    label,
-    name,
-    getOnOnlyClick,
-    ...inputProps
-  } = props;
-
-  const id = `filter-${name}`;
-  const rootClassName = cx(css.filter, className);
+const Filter = (props: FilterBooleanProps) => {
+  const { className = '', label, name, ...inputProps } = props;
 
   return (
-    <Component className={rootClassName}>
-      {/* eslint-disable */}
-      <FlexStack
-        space="xxxsmall"
-        alignItems="center"
-        as="label"
-        className={cx(css.filterCheckbox, buttonClassName)}
-      >
-        {/* eslint-enabled */}
-        <input type="checkbox" id={id} name={name} {...inputProps} className={css.filterInput} />
-        <span title={label} className={css.filterLabel}>
-          {label}
-        </span>
-      </FlexStack>
-
-      {getOnOnlyClick && (
-        <Button
-          kind="info"
-          solid
-          size="small"
-          type="button"
-          onClick={getOnOnlyClick(name)}
-          className={css.filterOnlyButton}
-        >
-          {I18N.ONLY}
-        </Button>
-      )}
-    </Component>
+    <FlexStack
+      space="xxxsmall"
+      alignItems="center"
+      as="label"
+      className={cx(css.filter, className)}
+    >
+      <input
+        type="checkbox"
+        id={`filter-${name}`}
+        name={name}
+        {...inputProps}
+        className={css.filterControl}
+      />
+      <span title={label} className={css.filterLabel}>
+        {label}
+      </span>
+    </FlexStack>
   );
 };
 
 interface FilterGroupProps extends React.ComponentProps<'div'> {
-  buttonClassName?: string;
   groupKey: string;
   data: FilterGroupFieldData;
   values: Record<string, boolean>;
-  onCheckboxChange: FilterProps['onChange'];
+  onCheckboxChange: FilterBooleanProps['onChange'];
   toggleFilters: (newFilters: Record<string, boolean>) => void;
 }
 
 const FilterGroup = (props: FilterGroupProps) => {
-  const {
-    className = '',
-    buttonClassName = '',
-    groupKey,
-    data,
-    values,
-    onCheckboxChange,
-    toggleFilters,
-  } = props;
+  const { className = '', groupKey, data, values, onCheckboxChange, toggleFilters } = props;
 
   const [search, setSearch] = useState('');
 
@@ -99,7 +65,9 @@ const FilterGroup = (props: FilterGroupProps) => {
     <>
       {`${groupLabel}:`}
       &nbsp;
-      <span className={cx(hasCustomFilterSuffix && css.labelSuffixCustom)}>{filterSuffix}</span>
+      <span className={cx(hasCustomFilterSuffix && css.filterGroupLabelSuffixCustom)}>
+        {filterSuffix}
+      </span>
     </>
   );
 
@@ -130,88 +98,79 @@ const FilterGroup = (props: FilterGroupProps) => {
 
   return (
     <Dropdown
-      className={className}
-      buttonClassName={buttonClassName}
+      buttonClassName={className}
       label={dropdownLabel}
       ariaLabel={`${groupLabel}: ${filterSuffix}`}
     >
-      {({ MenuItem, menuItemClassName }) => {
-        return (
-          <>
-            {groupItems.length > 10 && (
-              <div className={css.filterGroupSearchWrapper}>
-                <InputSearch
-                  defaultValue={search}
-                  onChange={setSearch}
-                  placeholder={I18N.GROUP_SEARCH}
-                  debounceWait={0}
-                />
-              </div>
-            )}
-            <div 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>
-              )}
-              {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
-                const id = [groupKey, itemKey].join('.');
-                const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
-
-                return (
-                  <Filter
-                    key={id}
-                    className={menuItemClassName}
-                    as={MenuItem}
-                    name={id}
-                    label={itemData.label}
-                    onChange={onCheckboxChange}
-                    checked={values[id]}
-                    disabled={itemData.disabled}
-                    getOnOnlyClick={getOnOnlyClick}
-                  />
-                );
-              })}
+      {groupItems.length > 10 && (
+        <div className={css.filterGroupSearchWrapper}>
+          <InputSearch
+            defaultValue={search}
+            onChange={setSearch}
+            placeholder={I18N.GROUP_SEARCH}
+            debounceWait={0}
+          />
+        </div>
+      )}
+      <div 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>
-            {filteredGroupItems.length !== 0 && (
-              <div className={css.filterGroupActions}>
-                {areAllGroupItemsChecked ? (
-                  <MenuItem
-                    id="clear-all"
-                    as="button"
-                    className={menuItemClassName}
-                    type="button"
-                    onClick={getOnGroupCheck(false)}
-                  >
-                    {I18N.CLEAR}
-                  </MenuItem>
-                ) : (
-                  <MenuItem
-                    id="clear-all"
-                    as="button"
-                    className={menuItemClassName}
-                    type="button"
-                    onClick={getOnGroupCheck(true)}
-                  >
-                    {I18N.CHECK}
-                  </MenuItem>
-                )}
-              </div>
-            )}
-          </>
-        );
-      }}
+          </Stack>
+        )}
+        {filteredGroupItems.map(({ key: itemKey, ...itemData }) => {
+          const id = [groupKey, itemKey].join('.');
+          const getOnOnlyClick = () => getOnGroupCheck(false, { [id]: true });
+
+          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>
+          );
+        })}
+      </div>
+      {filteredGroupItems.length !== 0 && (
+        <div className={css.filterGroupActions}>
+          {areAllGroupItemsChecked ? (
+            <DropdownItem id="clear-all" onClick={getOnGroupCheck(false)} role="button">
+              {I18N.CLEAR}
+            </DropdownItem>
+          ) : (
+            <DropdownItem id="clear-all" onClick={getOnGroupCheck(true)} role="button">
+              {I18N.CHECK}
+            </DropdownItem>
+          )}
+        </div>
+      )}
     </Dropdown>
   );
 };
@@ -226,6 +185,9 @@ interface FiltersProps extends React.ComponentProps<'div'> {
 export const Filters = (props: FiltersProps) => {
   const { className = '', values, filters, toggleFilter, toggleFilters } = props;
 
+  /**
+   * Toggle filter value on checkbox change
+   */
   const onCheckboxChange = useCallback(
     (event: any) => {
       const { name } = event.target;
@@ -233,41 +195,41 @@ export const Filters = (props: FiltersProps) => {
     },
     [toggleFilter, values],
   );
-  const rootClassName = cx(css.root, className);
+
+  const filterList = Object.entries(filters);
+  const filterCount = filterList.length;
 
   return (
-    <form className={rootClassName}>
-      <FlexStack space="xxsmall" alignItems="top" className={css.items}>
-        {Object.entries(filters).map(([name, data]) => {
-          if ('defaultValue' in data) {
-            return (
-              <Filter
-                key={name}
-                className={cx(css.item, css.filterStandalone)}
-                buttonClassName={css.itemButton}
-                name={name}
-                label={data.label}
-                onChange={onCheckboxChange}
-                checked={values[name]}
-                disabled={data.disabled as boolean}
-              />
-            );
-          }
+    <ControlGroup className={cx(css.root, className)}>
+      {filterList.map(([name, data], index) => {
+        const lastItem = index === filterCount - 1;
 
+        if ('defaultValue' in data) {
           return (
-            <FilterGroup
-              className={css.item}
-              buttonClassName={css.itemButton}
+            <Filter
+              name={name}
+              label={data.label}
+              onChange={onCheckboxChange}
+              checked={values[name]}
+              disabled={data.disabled as boolean}
               key={name}
-              groupKey={name}
-              data={data}
-              values={values}
-              onCheckboxChange={onCheckboxChange}
-              toggleFilters={toggleFilters}
+              className={cx(css.filterSingle, lastItem && css.itemLast)}
             />
           );
-        })}
-      </FlexStack>
-    </form>
+        }
+
+        return (
+          <FilterGroup
+            groupKey={name}
+            data={data}
+            values={values}
+            onCheckboxChange={onCheckboxChange}
+            toggleFilters={toggleFilters}
+            className={cx(lastItem && css.itemLast)}
+            key={name}
+          />
+        );
+      })}
+    </ControlGroup>
   );
 };