baseui 10.9.2 → 10.11.1

package/checkbox/stateful-checkbox.js.flow

@@ -7,16 +7,16 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 // eslint-disable-next-line import/no-named-default
-import {default as StatefulContainer} from './stateful-checkbox-container.js';
+import { default as StatefulContainer } from './stateful-checkbox-container.js';
 // eslint-disable-next-line import/no-named-default
-import {default as Checkbox} from './checkbox.js';
-import type {PropsT, StatefulCheckboxPropsT} from './types.js';
+import { default as Checkbox } from './checkbox.js';
+import type { StatefulContainerChildPropsT, StatefulCheckboxPropsT } from './types.js';
 // Styled elements
 
-const StatefulCheckbox = function(props: StatefulCheckboxPropsT) {
+const StatefulCheckbox = function (props: StatefulCheckboxPropsT) {
   return (
     <StatefulContainer {...props}>
-      {(childrenProps: PropsT) => (
+      {(childrenProps: StatefulContainerChildPropsT) => (
         <Checkbox {...childrenProps}>{props.children}</Checkbox>
       )}
     </StatefulContainer>

package/checkbox/styled-components.js.flow

@@ -6,22 +6,15 @@ LICENSE file in the root directory of this source tree.
 */
 
 // @flow
-import {styled, expandBorderStyles} from '../styles/index.js';
-import {STYLE_TYPE} from './constants.js';
+import { styled, expandBorderStyles } from '../styles/index.js';
+import { STYLE_TYPE } from './constants.js';
 
-import type {SharedStylePropsT} from './types.js';
+import type { SharedStylePropsT } from './types.js';
 
 function getBorderColor(props) {
-  const {
-    $disabled,
-    $checked,
-    $isError,
-    $error,
-    $isIndeterminate,
-    $theme,
-    $isFocusVisible,
-  } = props;
-  const {colors} = $theme;
+  const { $disabled, $checked, $isError, $error, $isIndeterminate, $theme, $isFocusVisible } =
+    props;
+  const { colors } = $theme;
   if ($disabled) {
     return colors.tickFillDisabled;
   } else if ($checked || $isIndeterminate) {
@@ -36,9 +29,9 @@ function getBorderColor(props) {
 }
 
 function getLabelPadding(props) {
-  const {$labelPlacement = '', $theme} = props;
-  const {sizing} = $theme;
-  const {scale300} = sizing;
+  const { $labelPlacement = '', $theme } = props;
+  const { sizing } = $theme;
+  const { scale300 } = sizing;
   let paddingDirection;
 
   switch ($labelPlacement) {
@@ -81,7 +74,7 @@ function getBackgroundColor(props) {
     $checkmarkType,
   } = props;
   const isToggle = $checkmarkType === STYLE_TYPE.toggle;
-  const {colors} = $theme;
+  const { colors } = $theme;
   if ($disabled) {
     if (isToggle) {
       return colors.toggleFillDisabled;
@@ -127,39 +120,26 @@ function getBackgroundColor(props) {
 }
 
 function getLabelColor(props) {
-  const {$disabled, $theme} = props;
-  const {colors} = $theme;
+  const { $disabled, $theme } = props;
+  const { colors } = $theme;
   return $disabled ? colors.contentSecondary : colors.contentPrimary;
 }
 
-export const Root = styled<SharedStylePropsT>('label', props => {
-  const {$disabled, $labelPlacement} = props;
+export const Root = styled<SharedStylePropsT>('label', (props) => {
+  const { $disabled, $labelPlacement } = props;
   return {
-    flexDirection:
-      $labelPlacement === 'top' || $labelPlacement === 'bottom'
-        ? 'column'
-        : 'row',
+    flexDirection: $labelPlacement === 'top' || $labelPlacement === 'bottom' ? 'column' : 'row',
     display: 'flex',
-    alignItems:
-      $labelPlacement === 'top' || $labelPlacement === 'bottom'
-        ? 'center'
-        : 'flex-start',
+    alignItems: $labelPlacement === 'top' || $labelPlacement === 'bottom' ? 'center' : 'flex-start',
     cursor: $disabled ? 'not-allowed' : 'pointer',
     userSelect: 'none',
   };
 });
 
-export const Checkmark = styled<SharedStylePropsT>('span', props => {
-  const {
-    $checked,
-    $disabled,
-    $isError,
-    $error,
-    $isIndeterminate,
-    $theme,
-    $isFocusVisible,
-  } = props;
-  const {sizing, animation} = $theme;
+export const Checkmark = styled<SharedStylePropsT>('span', (props) => {
+  const { $checked, $disabled, $isError, $error, $isIndeterminate, $theme, $isFocusVisible } =
+    props;
+  const { sizing, animation } = $theme;
 
   const tickColor = $disabled
     ? $theme.colors.tickMarkFillDisabled
@@ -208,10 +188,7 @@ export const Checkmark = styled<SharedStylePropsT>('span', props => {
     borderTopRightRadius: borderRadius,
     borderBottomRightRadius: borderRadius,
     borderBottomLeftRadius: borderRadius,
-    outline:
-      $isFocusVisible && $checked
-        ? `3px solid ${$theme.colors.accent}`
-        : 'none',
+    outline: $isFocusVisible && $checked ? `3px solid ${$theme.colors.accent}` : 'none',
     display: 'inline-block',
     verticalAlign: 'middle',
     backgroundImage: $isIndeterminate
@@ -230,9 +207,9 @@ export const Checkmark = styled<SharedStylePropsT>('span', props => {
   }: {});
 });
 
-export const Label = styled<SharedStylePropsT>('div', props => {
-  const {$theme, $checkmarkType} = props;
-  const {typography} = $theme;
+export const Label = styled<SharedStylePropsT>('div', (props) => {
+  const { $theme, $checkmarkType } = props;
+  const { typography } = $theme;
   return ({
     flex: $checkmarkType === STYLE_TYPE.toggle ? 'auto' : null,
     verticalAlign: 'middle',
@@ -254,7 +231,7 @@ export const Input = styled('input', {
   position: 'absolute',
 });
 
-export const Toggle = styled<SharedStylePropsT>('div', props => {
+export const Toggle = styled<SharedStylePropsT>('div', (props) => {
   if (props.$checkmarkType === STYLE_TYPE.toggle) {
     const borderRadius = props.$theme.borders.useRoundedCorners
       ? props.$theme.borders.radius200
@@ -311,7 +288,7 @@ export const Toggle = styled<SharedStylePropsT>('div', props => {
   return {};
 });
 
-export const ToggleInner = styled<SharedStylePropsT>('div', props => {
+export const ToggleInner = styled<SharedStylePropsT>('div', (props) => {
   if (props.$checkmarkType === STYLE_TYPE.toggle) {
     // eslint-disable-next-line no-inner-declarations
     const backgroundColor = () => {
@@ -347,7 +324,7 @@ export const ToggleInner = styled<SharedStylePropsT>('div', props => {
   return {};
 });
 
-export const ToggleTrack = styled<SharedStylePropsT>('div', props => {
+export const ToggleTrack = styled<SharedStylePropsT>('div', (props) => {
   if (props.$checkmarkType === STYLE_TYPE.toggle) {
     const borderRadius = props.$theme.borders.useRoundedCorners
       ? props.$theme.borders.radius200

package/checkbox/types.js.flow

@@ -6,11 +6,12 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {STYLE_TYPE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { STYLE_TYPE } from './constants.js';
 
 export type LabelPlacementT = 'top' | 'right' | 'bottom' | 'left';
 export type StyleTypeT = $Keys<typeof STYLE_TYPE>;
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type OverridesT = {
   Checkmark?: OverrideT,
@@ -30,7 +31,7 @@ export type DefaultPropsT = {
   error: boolean,
   autoFocus: boolean,
   isIndeterminate: boolean,
-  inputRef: {current: HTMLInputElement | null},
+  inputRef: ReactRefT<HTMLInputElement>,
   checkmarkType: StyleTypeT,
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
   onMouseEnter: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
@@ -48,6 +49,7 @@ export type PropsT = {
   'aria-errormessage'?: string,
   /** Passed to the input element aria-label attribute. */
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Component or String value for label of checkbox. */
   children?: React$Node,
   /** Indicates if this checkbox children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */
@@ -64,7 +66,7 @@ export type PropsT = {
   /** You should use error instead. */
   isError?: boolean,
   /** Used to get a ref to the input element. Useful for programmatically focusing the input */
-  inputRef: {current: HTMLInputElement | null},
+  inputRef: ReactRefT<HTMLInputElement>,
   /** Focus the checkbox on initial render. */
   autoFocus?: boolean,
   /** Passed to the input element type attribute */
@@ -113,12 +115,29 @@ export type StateReducerT = (
   stateType: string,
   nextState: StateT,
   currentState: StateT,
-  event: SyntheticInputEvent<HTMLInputElement>,
+  event: SyntheticInputEvent<HTMLInputElement>
 ) => StateT;
 
+export type StatefulContainerChildPropsT = {
+  ...StateT,
+  overrides?: OverridesT,
+  /** Handler for change events on trigger element. */
+  onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Handler for mouseenter events on trigger element. */
+  onMouseEnter?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Handler for mouseleave events on trigger element. */
+  onMouseLeave?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Handler for focus events on trigger element. */
+  onFocus?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Handler for blur events on trigger element. */
+  onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  /** Focus the checkbox on initial render. */
+  autoFocus?: boolean,
+};
+
 export type DefaultStatefulPropsT = {
   initialState: StateT,
-  children?: (*) => React$Node,
+  children?: (StatefulContainerChildPropsT) => React$Node,
   stateReducer: StateReducerT,
   onChange: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
   onMouseEnter: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
@@ -130,7 +149,7 @@ export type DefaultStatefulPropsT = {
 export type StatefulContainerPropsT = {
   overrides?: OverridesT,
   /** Component or String value for label of checkbox. */
-  children?: (*) => React$Node,
+  children?: (StatefulContainerChildPropsT) => React$Node,
   /** Defines the components initial state value */
   initialState?: StateT,
   /** A state change handler. Used to override default state transitions. */

package/combobox/combobox.js

@@ -212,7 +212,7 @@ function Combobox(props) {
     if (listboxRef.current && event.relatedTarget && // NOTE(chase): Contains method expects a Node type, but relatedTarget is
     // EventTarget which is a super type of Node. Passing an EventTarget seems
     // to work fine, assuming the flow type is too strict.
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     listboxRef.current.contains(event.relatedTarget)) {
       return;
     }
@@ -304,7 +304,7 @@ function Combobox(props) {
       popoverOverrides = _getOverrides12$$over === void 0 ? {} : _getOverrides12$$over,
       restPopoverProps = _objectWithoutProperties(_getOverrides12$, ["overrides"]);
 
-  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  return /*#__PURE__*/React.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: rootRef
   }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
@@ -319,7 +319,7 @@ function Combobox(props) {
     content: /*#__PURE__*/React.createElement(ListBox // TabIndex attribute exists to exclude option clicks from triggering onBlur event actions.
     , _extends({
       tabIndex: "-1",
-      id: listboxId // eslint-disable-next-line flowtype/no-weak-types
+      id: listboxId // flowlint-next-line unclear-type:off
       ,
       ref: listboxRef,
       role: "listbox",
@@ -339,7 +339,7 @@ function Combobox(props) {
           key: index,
           onClick: function onClick() {
             return handleOptionClick(index);
-          } // eslint-disable-next-line flowtype/no-weak-types
+          } // flowlint-next-line unclear-type:off
           ,
           ref: isSelected ? selectedOptionRef : null,
           role: "option",

package/combobox/combobox.js.flow

@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Input, SIZE} from '../input/index.js';
-import {scrollItemIntoView} from '../menu/utils.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {Popover, PLACEMENT} from '../popover/index.js';
-import {useUIDSeed} from 'react-uid';
+import { Input, SIZE } from '../input/index.js';
+import { scrollItemIntoView } from '../menu/utils.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Popover, PLACEMENT } from '../popover/index.js';
+import { useUIDSeed } from 'react-uid';
 
 import {
   StyledRoot,
@@ -20,7 +20,7 @@ import {
   StyledListBox,
   StyledListItem,
 } from './styled-components.js';
-import type {PropsT} from './types.js';
+import type { PropsT } from './types.js';
 
 const ENTER = 13;
 const ESCAPE = 27;
@@ -96,7 +96,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
         selectedOptionRef.current,
         listboxRef.current,
         selectionIndex === 0,
-        selectionIndex === options.length - 1,
+        selectionIndex === options.length - 1
       );
     }
   }, [isOpen, selectedOptionRef.current, listboxRef.current]);
@@ -118,7 +118,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
     if (event.keyCode === ARROW_DOWN) {
       event.preventDefault();
       handleOpen();
-      setSelectionIndex(prev => {
+      setSelectionIndex((prev) => {
         let next = prev + 1;
         if (next > options.length - 1) {
           next = -1;
@@ -128,7 +128,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
     }
     if (event.keyCode === ARROW_UP) {
       event.preventDefault();
-      setSelectionIndex(prev => {
+      setSelectionIndex((prev) => {
         let next = prev - 1;
         if (next < -1) {
           next = options.length - 1;
@@ -145,7 +145,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
         onChange(mapOptionToString(clickedOption), clickedOption);
       } else {
         if (onSubmit) {
-          onSubmit({closeListbox: () => setIsOpen(false), value});
+          onSubmit({ closeListbox: () => setIsOpen(false), value });
         }
       }
     }
@@ -174,7 +174,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
       // NOTE(chase): Contains method expects a Node type, but relatedTarget is
       // EventTarget which is a super type of Node. Passing an EventTarget seems
       // to work fine, assuming the flow type is too strict.
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       listboxRef.current.contains((event.relatedTarget: any))
     ) {
       return;
@@ -231,30 +231,20 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
   const [InputContainer, inputContainerProps] = getOverrides(
     overrides.InputContainer,
-    StyledInputContainer,
+    StyledInputContainer
   );
-  const [ListBox, listBoxProps] = getOverrides(
-    overrides.ListBox,
-    StyledListBox,
+  const [ListBox, listBoxProps] = getOverrides(overrides.ListBox, StyledListBox);
+  const [ListItem, listItemProps] = getOverrides(overrides.ListItem, StyledListItem);
+  const [OverriddenInput, { overrides: inputOverrides = {}, ...restInputProps }] = getOverrides(
+    overrides.Input,
+    Input
   );
-  const [ListItem, listItemProps] = getOverrides(
-    overrides.ListItem,
-    StyledListItem,
-  );
-  const [
-    OverriddenInput,
-    // $FlowFixMe
-    {overrides: inputOverrides = {}, ...restInputProps},
-  ] = getOverrides(overrides.Input, Input);
-  const [
-    OverriddenPopover,
-    // $FlowFixMe
-    {overrides: popoverOverrides = {}, ...restPopoverProps},
-  ] = getOverrides(overrides.Popover, Popover);
+  const [OverriddenPopover, { overrides: popoverOverrides = {}, ...restPopoverProps }] =
+    getOverrides(overrides.Popover, Popover);
 
   return (
     <Root
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
       ref={(rootRef: any)}
       {...rootProps}
     >
@@ -272,7 +262,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             // TabIndex attribute exists to exclude option clicks from triggering onBlur event actions.
             tabIndex="-1"
             id={listboxId}
-            // eslint-disable-next-line flowtype/no-weak-types
+            // flowlint-next-line unclear-type:off
             ref={(listboxRef: any)}
             role="listbox"
             aria-label={listBoxLabel}
@@ -291,7 +281,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
                   id={isSelected ? activeDescendantId : null}
                   key={index}
                   onClick={() => handleOptionClick(index)}
-                  // eslint-disable-next-line flowtype/no-weak-types
+                  // flowlint-next-line unclear-type:off
                   ref={isSelected ? (selectedOptionRef: any) : null}
                   role="option"
                   $isSelected={isSelected}
@@ -323,9 +313,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
         >
           <OverriddenInput
             inputRef={handleInputRef}
-            aria-activedescendant={
-              isOpen && selectionIndex >= 0 ? activeDescendantId : undefined
-            }
+            aria-activedescendant={isOpen && selectionIndex >= 0 ? activeDescendantId : undefined}
             aria-autocomplete="list"
             disabled={disabled}
             error={error}
@@ -339,7 +327,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             positive={positive}
             size={size}
             value={tempValue ? tempValue : value}
-            {...(isOpen ? {'aria-controls': listboxId} : {})}
+            {...(isOpen ? { 'aria-controls': listboxId } : {})}
             {...restInputProps}
           />
         </InputContainer>

package/combobox/index.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {SIZE} from '../input/constants.js';
+export { SIZE } from '../input/constants.js';
 
-export {default as Combobox} from './combobox.js';
+export { default as Combobox } from './combobox.js';
 export {
   StyledRoot,
   StyledInputContainer,

package/combobox/styled-components.js.flow

@@ -6,31 +6,34 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {SIZE} from '../input/index.js';
-import {styled} from '../styles/index.js';
+import { SIZE } from '../input/index.js';
+import { styled } from '../styles/index.js';
+import type { FontT } from '../themes/types.js';
 
 export const StyledRoot = styled('div', {});
 
 export const StyledInputContainer = styled('div', {});
 
-export const StyledListBox = styled<{|$width: string|}>(
-  'ul',
-  ({$theme, $width}) => {
-    return {
-      backgroundColor: $theme.colors.backgroundPrimary,
-      marginBlockStart: 'unset',
-      marginBlockEnd: 'unset',
-      maxHeight: '200px',
-      overflowY: 'auto',
-      outline: 'none',
-      paddingInlineStart: 'unset',
-      width: $width,
-    };
-  },
-);
+export const StyledListBox = styled<{| $width: string |}>('ul', ({ $theme, $width }) => {
+  return {
+    backgroundColor: $theme.colors.backgroundPrimary,
+    marginBlockStart: 'unset',
+    marginBlockEnd: 'unset',
+    maxHeight: '200px',
+    overflowY: 'auto',
+    outline: 'none',
+    paddingInlineStart: 'unset',
+    width: $width,
+  };
+});
 
-function buildStylesForSize(size, theme) {
-  const paddingDir = theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+function buildStylesForSize(
+  size,
+  theme
+):
+  | {| ...FontT, height: string, paddingLeft?: string |}
+  | {| ...FontT, height: string, paddingRight?: string |} {
+  const paddingDir: string = theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
   switch (size) {
     case SIZE.mini:
       return {
@@ -63,7 +66,7 @@ function buildStylesForSize(size, theme) {
 export const StyledListItem = styled<{|
   $isSelected: boolean,
   $size: $Keys<typeof SIZE>,
-|}>('li', ({$isSelected, $theme, $size}) => {
+|}>('li', ({ $isSelected, $theme, $size }) => {
   return {
     ...buildStylesForSize($size, $theme),
     alignItems: 'center',

package/combobox/types.js.flow

@@ -8,8 +8,10 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {SIZE} from '../input/index.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { SIZE } from '../input/index.js';
+
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type PropsT<OptionT = mixed> = {|
   // Controls if the input value will be updated while keyboard navigating. Defaults to true.
@@ -27,11 +29,11 @@ export type PropsT<OptionT = mixed> = {|
   |}>,
   // Options are often fetched from remote server, provides a simple way to
   // map whatever value the client gets into a visible string in the list item.
-  mapOptionToString: OptionT => string,
+  mapOptionToString: (OptionT) => string,
   id?: string,
   name?: string,
   // A ref to access the inner Input component.
-  inputRef?: React.ElementRef<*>,
+  inputRef?: ReactRefT<HTMLElement>,
   // Called when input loses focus.
   onBlur?: (SyntheticInputEvent<HTMLInputElement>) => mixed,
   // Called when input value changes or option is selected. If user selects a
@@ -43,7 +45,7 @@ export type PropsT<OptionT = mixed> = {|
   onFocus?: (SyntheticInputEvent<HTMLInputElement>) => mixed,
   // Called when no option is selected and the enter key is pressed. An argument to this
   // function is another function to close the listbox if needed.
-  onSubmit?: ({closeListbox: () => void, value: string}) => mixed,
+  onSubmit?: ({ closeListbox: () => void, value: string }) => mixed,
   // Data to populate list items in the dropdown menu.
   options: OptionT[],
   overrides?: {|

package/data-table/column-anchor.js.flow

@@ -8,14 +8,14 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {StyledLink} from '../link/index.js';
-import {useStyletron} from '../styles/index.js';
+import { StyledLink } from '../link/index.js';
+import { useStyletron } from '../styles/index.js';
 
 import Column from './column.js';
-import {COLUMNS} from './constants.js';
-import type {ColumnT, SharedColumnOptionsT} from './types.js';
+import { COLUMNS } from './constants.js';
+import type { ColumnT, SharedColumnOptionsT } from './types.js';
 
-type ValueT = {content: string, href: string};
+type ValueT = { content: string, href: string };
 
 type ReplacementElementAs = React.AbstractComponent<{|
   href: string,
@@ -56,8 +56,8 @@ function AnchorCell(props) {
 function AnchorColumn(options: OptionsT): AnchorColumnT {
   return Column({
     kind: COLUMNS.ANCHOR,
-    buildFilter: function(params) {
-      return function(data) {
+    buildFilter: function (params) {
+      return function (data) {
         return true;
       };
     },
@@ -72,7 +72,7 @@ function AnchorColumn(options: OptionsT): AnchorColumnT {
     },
     renderFilter: AnchorFilter,
     sortable: options.sortable === undefined ? true : options.sortable,
-    sortFn: function(a, b) {
+    sortFn: function (a, b) {
       return a.content.localeCompare(b.content);
     },
     title: options.title,