baseui 10.9.1 → 10.11.0

package/data-table/filter-menu.js.flow

@@ -7,21 +7,21 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import React from 'react';
-import {Button, SHAPE, SIZE} from '../button/index.js';
-import {Filter as FilterIcon} from '../icon/index.js';
-import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
-import {Popover, PLACEMENT} from '../popover/index.js';
-import {useStyletron} from '../styles/index.js';
-import {useUIDSeed} from 'react-uid';
+import { Button, SHAPE, SIZE } from '../button/index.js';
+import { Filter as FilterIcon } from '../icon/index.js';
+import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
+import { Popover, PLACEMENT } from '../popover/index.js';
+import { useStyletron } from '../styles/index.js';
+import { useUIDSeed } from 'react-uid';
 
-import {COLUMNS} from './constants.js';
-import {matchesQuery} from './text-search.js';
-import type {ColumnT} from './types.js';
-import {LocaleContext} from '../locale/index.js';
+import { COLUMNS } from './constants.js';
+import { matchesQuery } from './text-search.js';
+import type { ColumnT } from './types.js';
+import { LocaleContext } from '../locale/index.js';
 
-import {isFocusVisible} from '../utils/focusVisible.js';
+import { isFocusVisible } from '../utils/focusVisible.js';
 
-function ColumnIcon(props: {column: ColumnT<>}) {
+function ColumnIcon(props: { column: ColumnT<> }) {
   if (props.column.kind === COLUMNS.BOOLEAN) {
     return '01';
   }
@@ -45,9 +45,9 @@ type OptionsPropsT = {
   columns: ColumnT<>[],
   highlightIndex: number,
   onClick: (ColumnT<>) => void,
-  onKeyDown: KeyboardEvent => void,
-  onMouseEnter: number => void,
-  onQueryChange: string => void,
+  onKeyDown: (KeyboardEvent) => void,
+  onMouseEnter: (number) => void,
+  onQueryChange: (string) => void,
   query: string,
   searchable: boolean,
 };
@@ -64,7 +64,7 @@ function Options(props: OptionsPropsT) {
 
   const [focusVisible, setFocusVisible] = React.useState(false);
   const seed = useUIDSeed();
-  const buiRef = React.useRef(props.columns.map(col => seed(col)));
+  const buiRef = React.useRef(props.columns.map((col) => seed(col)));
 
   const handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
@@ -110,7 +110,7 @@ function Options(props: OptionsPropsT) {
           <Input
             inputRef={inputRef}
             value={props.query}
-            onChange={event => props.onQueryChange(event.target.value)}
+            onChange={(event) => props.onQueryChange(event.target.value)}
             placeholder={locale.datatable.optionsSearch}
             size={INPUT_SIZE.compact}
             clearable
@@ -163,9 +163,7 @@ function Options(props: OptionsPropsT) {
               className={css({
                 ...theme.typography.font100,
                 alignItems: 'center',
-                backgroundColor: isHighlighted
-                  ? theme.colors.menuFillHover
-                  : null,
+                backgroundColor: isHighlighted ? theme.colors.menuFillHover : null,
                 cursor: 'pointer',
                 display: 'flex',
                 paddingTop: theme.sizing.scale100,
@@ -201,14 +199,11 @@ function Options(props: OptionsPropsT) {
 
 type PropsT = {
   columns: ColumnT<>[],
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   filters: Map<string, any>,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   rows: any[],
-  onSetFilter: (
-    columnTitle: string,
-    filterParams: {description: string},
-  ) => void,
+  onSetFilter: (columnTitle: string, filterParams: { description: string }) => void,
 };
 
 function FilterMenu(props: PropsT) {
@@ -228,15 +223,13 @@ function FilterMenu(props: PropsT) {
   }, []);
 
   const filterableColumns = React.useMemo(() => {
-    return props.columns.filter(column => {
+    return props.columns.filter((column) => {
       return column.filterable && !props.filters.has(column.title);
     });
   }, [props.columns, props.filters]);
 
   const columns = React.useMemo(() => {
-    return filterableColumns.filter(column =>
-      matchesQuery(column.title, query),
-    );
+    return filterableColumns.filter((column) => matchesQuery(column.title, query));
   }, [filterableColumns, query]);
 
   const Filter = React.useMemo(() => {
@@ -245,11 +238,9 @@ function FilterMenu(props: PropsT) {
   }, [activeColumn]);
 
   const activeColumnData = React.useMemo(() => {
-    const columnIndex = props.columns.findIndex(c => c === activeColumn);
+    const columnIndex = props.columns.findIndex((c) => c === activeColumn);
     if (columnIndex < 0) return [];
-    return props.rows.map(row =>
-      props.columns[columnIndex].mapDataToValue(row.data),
-    );
+    return props.rows.map((row) => props.columns[columnIndex].mapDataToValue(row.data));
   }, [props.columns, props.rows, activeColumn]);
 
   function handleKeyDown(event) {
@@ -282,9 +273,7 @@ function FilterMenu(props: PropsT) {
             <Filter
               data={activeColumnData}
               close={handleClose}
-              setFilter={filterParams =>
-                props.onSetFilter(activeColumn.title, filterParams)
-              }
+              setFilter={(filterParams) => props.onSetFilter(activeColumn.title, filterParams)}
             />
           );
         }

package/data-table/filter-shell.js

@@ -17,6 +17,8 @@ var _index3 = require("../styles/index.js");
 
 var _index4 = require("../locale/index.js");
 
+var _constants = require("./constants.js");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -40,6 +42,21 @@ function FilterShell(props) {
       theme = _useStyletron2[1];
 
   var locale = React.useContext(_index4.LocaleContext);
+  var excludeText;
+
+  switch (props.excludeKind) {
+    case 'value':
+      excludeText = locale.datatable.filterExcludeValue;
+      break;
+
+    case 'range':
+      excludeText = locale.datatable.filterExcludeRange;
+      break;
+
+    default:
+      excludeText = locale.datatable.filterExclude;
+  }
+
   return /*#__PURE__*/React.createElement("form", {
     className: css({
       backgroundColor: theme.colors.backgroundPrimary,
@@ -47,7 +64,7 @@ function FilterShell(props) {
       paddingRight: theme.sizing.scale600,
       paddingBottom: theme.sizing.scale600,
       paddingLeft: theme.sizing.scale600,
-      width: '320px'
+      width: _constants.FILTER_SHELL_WIDTH
     }),
     onSubmit: function onSubmit(event) {
       event.preventDefault();
@@ -55,17 +72,23 @@ function FilterShell(props) {
     }
   }, props.children, /*#__PURE__*/React.createElement("div", {
     className: css({
-      alignItems: 'center',
       display: 'flex',
+      flexDirection: 'column',
       justifyContent: 'space-between',
-      marginTop: theme.sizing.scale600
+      alignItems: 'flex-end',
+      marginTop: theme.sizing.scale600,
+      gap: theme.sizing.scale200
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: css({
+      alignSelf: 'flex-start'
     })
   }, /*#__PURE__*/React.createElement(_index2.Checkbox, {
     checked: props.exclude,
     onChange: props.onExcludeChange,
     checkmarkType: _index2.STYLE_TYPE.toggle_round,
     labelPlacement: "right"
-  }, locale.datatable.filterExclude), /*#__PURE__*/React.createElement(_index.Button, {
+  }, excludeText)), /*#__PURE__*/React.createElement(_index.Button, {
     size: _index.SIZE.compact,
     type: "submit"
   }, locale.datatable.filterApply)));

package/data-table/filter-shell.js.flow

@@ -8,14 +8,18 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Button, SIZE as BUTTON_SIZE} from '../button/index.js';
-import {Checkbox, STYLE_TYPE} from '../checkbox/index.js';
-import {useStyletron} from '../styles/index.js';
-import {LocaleContext} from '../locale/index.js';
+import { Button, SIZE as BUTTON_SIZE } from '../button/index.js';
+import { Checkbox, STYLE_TYPE } from '../checkbox/index.js';
+import { useStyletron } from '../styles/index.js';
+import { LocaleContext } from '../locale/index.js';
+import { FILTER_SHELL_WIDTH } from './constants.js';
+
+export type ExcludeKind = 'value' | 'range';
 
 type PropsT = {
   children: React.Node,
   exclude: boolean,
+  excludeKind?: ExcludeKind,
   onExcludeChange: () => void,
   onApply: () => void,
 };
@@ -23,6 +27,17 @@ type PropsT = {
 function FilterShell(props: PropsT) {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
+  let excludeText;
+  switch (props.excludeKind) {
+    case 'value':
+      excludeText = locale.datatable.filterExcludeValue;
+      break;
+    case 'range':
+      excludeText = locale.datatable.filterExcludeRange;
+      break;
+    default:
+      excludeText = locale.datatable.filterExclude;
+  }
   return (
     <form
       className={css({
@@ -31,9 +46,9 @@ function FilterShell(props: PropsT) {
         paddingRight: theme.sizing.scale600,
         paddingBottom: theme.sizing.scale600,
         paddingLeft: theme.sizing.scale600,
-        width: '320px',
+        width: FILTER_SHELL_WIDTH,
       })}
-      onSubmit={event => {
+      onSubmit={(event) => {
         event.preventDefault();
         props.onApply();
       }}
@@ -41,20 +56,29 @@ function FilterShell(props: PropsT) {
       {props.children}
       <div
         className={css({
-          alignItems: 'center',
           display: 'flex',
+          flexDirection: 'column',
           justifyContent: 'space-between',
+          alignItems: 'flex-end',
           marginTop: theme.sizing.scale600,
+          gap: theme.sizing.scale200,
         })}
       >
-        <Checkbox
-          checked={props.exclude}
-          onChange={props.onExcludeChange}
-          checkmarkType={STYLE_TYPE.toggle_round}
-          labelPlacement="right"
+        <div
+          className={css({
+            alignSelf: 'flex-start',
+          })}
         >
-          {locale.datatable.filterExclude}
-        </Checkbox>
+          <Checkbox
+            checked={props.exclude}
+            onChange={props.onExcludeChange}
+            checkmarkType={STYLE_TYPE.toggle_round}
+            labelPlacement="right"
+          >
+            {excludeText}
+          </Checkbox>
+        </div>
+
         <Button size={BUTTON_SIZE.compact} type="submit">
           {locale.datatable.filterApply}
         </Button>

package/data-table/header-cell.js.flow

@@ -8,14 +8,14 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Checkbox} from '../checkbox/index.js';
-import {useStyletron} from '../styles/index.js';
+import { Checkbox } from '../checkbox/index.js';
+import { useStyletron } from '../styles/index.js';
 import ChevronDown from '../icon/chevron-down.js';
 import ChevronUp from '../icon/chevron-up.js';
 
-import {SORT_DIRECTIONS} from './constants.js';
-import type {SortDirectionsT} from './types.js';
-import {isFocusVisible} from '../utils/focusVisible.js';
+import { SORT_DIRECTIONS } from './constants.js';
+import type { SortDirectionsT } from './types.js';
+import { isFocusVisible } from '../utils/focusVisible.js';
 
 type HeaderCellPropsT = {|
   index: number,
@@ -24,142 +24,132 @@ type HeaderCellPropsT = {|
   isSelectable: boolean,
   isSelectedAll: boolean,
   isSelectedIndeterminate: boolean,
-  onMouseEnter: number => void,
-  onMouseLeave: number => void,
+  onMouseEnter: (number) => void,
+  onMouseLeave: (number) => void,
   onSelectAll: () => void,
   onSelectNone: () => void,
-  onSort: number => void,
+  onSort: (number) => void,
   sortable: boolean,
   sortDirection: SortDirectionsT,
   title: string,
 |};
 
-const HeaderCell = React.forwardRef<HeaderCellPropsT, HTMLDivElement>(
-  (props, ref) => {
-    const [css, theme] = useStyletron();
-    const [focusVisible, setFocusVisible] = React.useState(false);
-    const checkboxRef = React.useRef(null);
+const HeaderCell = React.forwardRef<HeaderCellPropsT, HTMLDivElement>((props, ref) => {
+  const [css, theme] = useStyletron();
+  const [focusVisible, setFocusVisible] = React.useState(false);
+  const checkboxRef = React.useRef(null);
 
-    const handleFocus = (event: SyntheticEvent<>) => {
-      if (isFocusVisible(event)) {
-        setFocusVisible(true);
-      }
-    };
+  const handleFocus = (event: SyntheticEvent<>) => {
+    if (isFocusVisible(event)) {
+      setFocusVisible(true);
+    }
+  };
 
-    const handleBlur = (event: SyntheticEvent<>) => {
-      if (focusVisible !== false) {
-        setFocusVisible(false);
-      }
-    };
+  const handleBlur = (event: SyntheticEvent<>) => {
+    if (focusVisible !== false) {
+      setFocusVisible(false);
+    }
+  };
 
-    const backgroundColor = props.isHovered
-      ? theme.colors.backgroundSecondary
-      : theme.colors.backgroundPrimary;
+  const backgroundColor = props.isHovered
+    ? theme.colors.backgroundSecondary
+    : theme.colors.backgroundPrimary;
 
-    return (
+  return (
+    <div
+      ref={ref}
+      role="button"
+      tabIndex="0"
+      className={css({
+        ...theme.typography.font350,
+        alignItems: 'center',
+        backgroundColor,
+        boxSizing: 'border-box',
+        color: theme.colors.contentPrimary,
+        cursor: props.sortable ? 'pointer' : null,
+        display: props.isMeasured ? 'inline-flex' : 'flex',
+        flexGrow: 1,
+        height: '100%',
+        paddingLeft: theme.sizing.scale500,
+        paddingRight: theme.sizing.scale500,
+        flexWrap: 'nowrap',
+        whiteSpace: 'nowrap',
+        outline: focusVisible ? `3px solid ${theme.colors.accent}` : 'none',
+        outlineOffset: '-3px',
+      })}
+      onMouseEnter={props.onMouseEnter}
+      onMouseLeave={props.onMouseLeave}
+      onKeyUp={(event) => {
+        if (event.key === 'Enter') {
+          props.onSort(props.index);
+        }
+      }}
+      onClick={(event) => {
+        // Avoid column sort if select-all checkbox click.
+        if (checkboxRef.current && checkboxRef.current.contains(event.target)) {
+          return;
+        }
+        if (props.sortable) {
+          props.onSort(props.index);
+        }
+      }}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {props.isSelectable && (
+        <span ref={checkboxRef}>
+          <Checkbox
+            onChange={(e) => {
+              if (props.isSelectedAll || props.isSelectedIndeterminate) {
+                props.onSelectNone();
+              } else {
+                props.onSelectAll();
+              }
+            }}
+            checked={props.isSelectedAll || props.isSelectedIndeterminate}
+            isIndeterminate={props.isSelectedIndeterminate}
+          />
+        </span>
+      )}
+      {props.title}
       <div
-        ref={ref}
-        role="button"
-        tabIndex="0"
         className={css({
-          ...theme.typography.font350,
+          position: 'relative',
+          width: '100%',
+          display: 'flex',
           alignItems: 'center',
-          backgroundColor,
-          boxSizing: 'border-box',
-          color: theme.colors.contentPrimary,
-          cursor: props.sortable ? 'pointer' : null,
-          display: props.isMeasured ? 'inline-flex' : 'flex',
-          flexGrow: 1,
-          height: '100%',
-          paddingLeft: theme.sizing.scale500,
-          paddingRight: theme.sizing.scale500,
-          flexWrap: 'nowrap',
-          whiteSpace: 'nowrap',
-          outline: focusVisible ? `3px solid ${theme.colors.accent}` : 'none',
-          outlineOffset: '-3px',
         })}
-        onMouseEnter={props.onMouseEnter}
-        onMouseLeave={props.onMouseLeave}
-        onKeyUp={event => {
-          if (event.key === 'Enter') {
-            props.onSort(props.index);
-          }
-        }}
-        onClick={event => {
-          // Avoid column sort if select-all checkbox click.
-          if (
-            checkboxRef.current &&
-            checkboxRef.current.contains(event.target)
-          ) {
-            return;
-          }
-          if (props.sortable) {
-            props.onSort(props.index);
-          }
-        }}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
       >
-        {props.isSelectable && (
-          <span ref={checkboxRef}>
-            <Checkbox
-              onChange={e => {
-                if (props.isSelectedAll || props.isSelectedIndeterminate) {
-                  props.onSelectNone();
-                } else {
-                  props.onSelectAll();
+        {(props.isHovered || props.sortDirection) && props.sortable && (
+          <div
+            style={{
+              backgroundColor,
+              display: 'flex',
+              alignItems: 'center',
+              position: 'absolute',
+              right: -4,
+            }}
+          >
+            {props.sortDirection === SORT_DIRECTIONS.DESC && (
+              <ChevronDown
+                color={
+                  props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
                 }
-              }}
-              checked={props.isSelectedAll || props.isSelectedIndeterminate}
-              isIndeterminate={props.isSelectedIndeterminate}
-            />
-          </span>
+              />
+            )}
+            {(props.sortDirection === SORT_DIRECTIONS.ASC || !props.sortDirection) && (
+              <ChevronUp
+                color={
+                  props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
+                }
+              />
+            )}
+          </div>
         )}
-        {props.title}
-        <div
-          className={css({
-            position: 'relative',
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-          })}
-        >
-          {(props.isHovered || props.sortDirection) && props.sortable && (
-            <div
-              style={{
-                backgroundColor,
-                display: 'flex',
-                alignItems: 'center',
-                position: 'absolute',
-                right: -4,
-              }}
-            >
-              {props.sortDirection === SORT_DIRECTIONS.DESC && (
-                <ChevronDown
-                  color={
-                    props.sortDirection
-                      ? theme.colors.contentPrimary
-                      : theme.colors.contentSecondary
-                  }
-                />
-              )}
-              {(props.sortDirection === SORT_DIRECTIONS.ASC ||
-                !props.sortDirection) && (
-                <ChevronUp
-                  color={
-                    props.sortDirection
-                      ? theme.colors.contentPrimary
-                      : theme.colors.contentSecondary
-                  }
-                />
-              )}
-            </div>
-          )}
-        </div>
       </div>
-    );
-  },
-);
+    </div>
+  );
+});
 HeaderCell.displayName = 'HeaderCell';
 
 export default HeaderCell;

package/data-table/index.js.flow

@@ -6,31 +6,22 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {DataTable} from './data-table.js';
-export {StatefulContainer} from './stateful-container.js';
-export {StatefulDataTable} from './stateful-data-table.js';
-export {DataTable as Unstable_DataTable} from './data-table.js';
-export {
-  StatefulContainer as Unstable_StatefulContainer,
-} from './stateful-container.js';
-export {
-  StatefulDataTable as Unstable_StatefulDataTable,
-} from './stateful-data-table.js';
-export {default as AnchorColumn} from './column-anchor.js';
-export {default as BooleanColumn} from './column-boolean.js';
-export {default as CategoricalColumn} from './column-categorical.js';
-export {default as CustomColumn} from './column-custom.js';
-export {default as DatetimeColumn} from './column-datetime.js';
-export {default as NumericalColumn} from './column-numerical.js';
-export {default as RowIndexColumn} from './column-row-index.js';
-export {default as StringColumn} from './column-string.js';
+export { DataTable } from './data-table.js';
+export { StatefulContainer } from './stateful-container.js';
+export { StatefulDataTable } from './stateful-data-table.js';
+export { DataTable as Unstable_DataTable } from './data-table.js';
+export { StatefulContainer as Unstable_StatefulContainer } from './stateful-container.js';
+export { StatefulDataTable as Unstable_StatefulDataTable } from './stateful-data-table.js';
+export { default as AnchorColumn } from './column-anchor.js';
+export { default as BooleanColumn } from './column-boolean.js';
+export { default as CategoricalColumn } from './column-categorical.js';
+export { default as CustomColumn } from './column-custom.js';
+export { default as DatetimeColumn } from './column-datetime.js';
+export { default as NumericalColumn } from './column-numerical.js';
+export { default as RowIndexColumn } from './column-row-index.js';
+export { default as StringColumn } from './column-string.js';
 
-export {
-  COLUMNS,
-  DATETIME_OPERATIONS,
-  NUMERICAL_FORMATS,
-  SORT_DIRECTIONS,
-} from './constants.js';
+export { COLUMNS, DATETIME_OPERATIONS, NUMERICAL_FORMATS, SORT_DIRECTIONS } from './constants.js';
 
 export type * from './types.js';
 

package/data-table/locale.js

@@ -13,18 +13,20 @@ LICENSE file in the root directory of this source tree.
 */
 var locale = {
   emptyState: 'No rows match the filter criteria defined. Please remove one or more filters to view more data.',
-  loadingState: 'Loading Rows.',
+  loadingState: 'Loading rows.',
   searchAriaLabel: 'Search by text',
   filterAdd: 'Add Filter',
   filterExclude: 'Exclude',
   filterApply: 'Apply',
+  filterExcludeRange: 'Exclude range',
+  filterExcludeValue: 'Exclude value',
   filterAppliedTo: 'filter applied to',
   optionsLabel: 'Select column to filter by',
   optionsSearch: 'Search for a column to filter by...',
   optionsEmpty: 'No columns available.',
   categoricalFilterSelectAll: 'Select All',
   categoricalFilterSelectClear: 'Clear',
-  categoricalFilterEmpty: 'No Categories Found',
+  categoricalFilterEmpty: 'No categories found',
   datetimeFilterRange: 'Range',
   datetimeFilterRangeDatetime: 'Date, Time',
   datetimeFilterRangeDate: 'Date',

package/data-table/locale.js.flow

@@ -12,6 +12,8 @@ export type DataTableLocaleT = {|
   searchAriaLabel: string,
   filterAdd: string,
   filterExclude: string,
+  filterExcludeRange: string,
+  filterExcludeValue: string,
   filterApply: string,
   filterAppliedTo: string,
   optionsLabel: string,
@@ -43,18 +45,20 @@ export type DataTableLocaleT = {|
 const locale = {
   emptyState:
     'No rows match the filter criteria defined. Please remove one or more filters to view more data.',
-  loadingState: 'Loading Rows.',
+  loadingState: 'Loading rows.',
   searchAriaLabel: 'Search by text',
   filterAdd: 'Add Filter',
   filterExclude: 'Exclude',
   filterApply: 'Apply',
+  filterExcludeRange: 'Exclude range',
+  filterExcludeValue: 'Exclude value',
   filterAppliedTo: 'filter applied to',
   optionsLabel: 'Select column to filter by',
   optionsSearch: 'Search for a column to filter by...',
   optionsEmpty: 'No columns available.',
   categoricalFilterSelectAll: 'Select All',
   categoricalFilterSelectClear: 'Clear',
-  categoricalFilterEmpty: 'No Categories Found',
+  categoricalFilterEmpty: 'No categories found',
   datetimeFilterRange: 'Range',
   datetimeFilterRangeDatetime: 'Date, Time',
   datetimeFilterRangeDate: 'Date',