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

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>
   );
 };

package/types/components/metrics-display-selector/metrics-display-selector.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { MetricsDisplayType } from '../../constants';
-import { FlexStack } from '../../layout/flex-stack';
+import { ControlGroup } from '../../ui/control-group';
 interface MetricsDisplaySelectorProps {
     value: MetricsDisplayType;
     onSelect: (newValue: MetricsDisplayType) => void;
 }
-export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof FlexStack>, 'onSelect' | 'value'>) => React.JSX.Element;
+export declare const MetricsDisplaySelector: (props: MetricsDisplaySelectorProps & Omit<React.ComponentProps<typeof ControlGroup>, 'onSelect' | 'value'>) => React.JSX.Element;
 export {};

package/types/ui/dropdown/dropdown.d.ts

@@ -1,50 +1,16 @@
-export function Dropdown(props: any): React.JSX.Element;
-export namespace Dropdown {
-    export namespace defaultProps {
-        let className: string;
-        let buttonClassName: string;
-        let label: null;
-        let ariaLabel: string;
-        let glyph: null;
-        let disabled: boolean;
-    }
-    export namespace propTypes {
-        let className_1: PropTypes.Requireable<string>;
-        export { className_1 as className };
-        let buttonClassName_1: PropTypes.Requireable<string>;
-        export { buttonClassName_1 as buttonClassName };
-        let label_1: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        export { label_1 as label };
-        let ariaLabel_1: PropTypes.Requireable<string>;
-        export { ariaLabel_1 as ariaLabel };
-        let glyph_1: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        export { glyph_1 as glyph };
-        let disabled_1: PropTypes.Requireable<boolean>;
-        export { disabled_1 as disabled };
-        export let children: PropTypes.Validator<NonNullable<NonNullable<string | PropTypes.ReactElementLike | ((...args: any[]) => any) | null | undefined>>>;
-    }
-    export { Item };
-}
 import React from 'react';
-import PropTypes from 'prop-types';
-declare function Item({ className, isActive, ...restProps }: {
-    [x: string]: any;
-    className?: string | undefined;
-    isActive?: boolean | undefined;
-}): React.JSX.Element;
-declare namespace Item {
-    export namespace propTypes_1 {
-        let className_2: PropTypes.Requireable<string>;
-        export { className_2 as className };
-        export let isActive: PropTypes.Requireable<boolean>;
-    }
-    export { propTypes_1 as propTypes };
-    export namespace defaultProps_1 {
-        let className_3: string;
-        export { className_3 as className };
-        let isActive_1: boolean;
-        export { isActive_1 as isActive };
-    }
-    export { defaultProps_1 as defaultProps };
+import { MenuItem } from 'ariakit/menu';
+interface DropdownItemProps {
+    isActive?: boolean;
+}
+export declare const DropdownItem: (props: DropdownItemProps & React.ComponentProps<typeof MenuItem>) => React.JSX.Element;
+interface DropdownProps {
+    buttonClassName?: string;
+    dropdownClassName?: string;
+    label?: React.ReactNode;
+    ariaLabel?: string;
+    glyph?: string;
+    disabled?: boolean;
 }
+export declare const Dropdown: (props: DropdownProps & React.ComponentProps<'div'>) => React.JSX.Element;
 export {};

package/types/ui/dropdown/index.d.ts

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

package/types/ui/filters/filters.d.ts

@@ -1,18 +1,13 @@
 import React from 'react';
 import type { FilterFieldsData, FilterGroupFieldData } from '../../types';
-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;
 }
 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;
 }
 interface FiltersProps extends React.ComponentProps<'div'> {

package/src/ui/dropdown/dropdown.jsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { Menu, MenuButton, MenuItem, useMenuState } from 'ariakit/menu';
-
-import { Button, BUTTON_SIZE } from '../button';
-import css from './dropdown.module.css';
-
-const Item = ({ className = '', isActive = false, ...restProps }) => (
-  <MenuItem className={cx(css.item, className, isActive && css.itemActive)} {...restProps} />
-);
-
-Item.propTypes = {
-  className: PropTypes.string,
-  isActive: PropTypes.bool,
-};
-
-Item.defaultProps = {
-  className: '',
-  isActive: false,
-};
-
-export const Dropdown = (props) => {
-  const { className, buttonClassName, label, ariaLabel, glyph, disabled, children } = props;
-  const rootClassName = cx(css.root, className);
-  const menuState = useMenuState();
-
-  return (
-    <div className={rootClassName}>
-      <MenuButton
-        as={Button}
-        outline
-        size={BUTTON_SIZE.SMALL}
-        glyph={glyph}
-        disabled={disabled}
-        state={menuState}
-        tabIndex={null}
-        className={cx(css.button, buttonClassName)}
-      >
-        {label}
-      </MenuButton>
-      <Menu state={menuState} aria-label={ariaLabel || label} className={css.dropdown}>
-        {typeof children === 'function'
-          ? children({
-              MenuItem: Item,
-              menu: menuState,
-              menuItemClassName: css.item,
-              menuItemActiveClassName: css.itemActive,
-            })
-          : children}
-      </Menu>
-    </div>
-  );
-};
-
-Dropdown.defaultProps = {
-  className: '',
-  buttonClassName: '',
-  label: null,
-  ariaLabel: '',
-  glyph: null,
-  disabled: false,
-};
-
-Dropdown.propTypes = {
-  /** Adopted child class name */
-  className: PropTypes.string,
-
-  /** Button adopted child class name */
-  buttonClassName: PropTypes.string,
-
-  /** Button label */
-  label: PropTypes.node,
-
-  /** Aria label */
-  ariaLabel: PropTypes.string,
-
-  /** Icon glyph */
-  glyph: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
-  /** Dropdown button disabled attribute */
-  disabled: PropTypes.bool,
-
-  /** Content */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]).isRequired,
-};
-
-Dropdown.Item = Item;