baseui 10.10.0 → 10.11.0

package/list/list-heading.js.flow

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import React from 'react';
 import * as ReactIs from 'react-is';
 
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 
 import {
   StyledHeadingRoot,
@@ -20,10 +20,10 @@ import {
   StyledHeadingMainHeading,
   StyledHeadingSubHeading,
 } from './styled-components.js';
-import type {HeadingPropsT} from './types.js';
+import type { HeadingPropsT } from './types.js';
 
 function RenderNode(props) {
-  const {component, ...restProps} = props;
+  const { component, ...restProps } = props;
   const Component = component;
   if (!Component) {
     return null;
@@ -43,101 +43,86 @@ function isMaxLinesValid(maxLines) {
   return maxLines === 1 || maxLines === 2;
 }
 
-const ListHeading = React.forwardRef<HeadingPropsT, HTMLLIElement>(
-  (props: HeadingPropsT, ref) => {
-    const {overrides = {}, maxLines} = props;
-    const EndEnhancer = props.endEnhancer;
-    const EndEnhancerDescription = props.endEnhancerDescription;
-    const SubHeading = props.subHeading;
-
-    const [Root, rootProps] = getOverrides(overrides.Root, StyledHeadingRoot);
-    const [Content, contentProps] = getOverrides(
-      overrides.Content,
-      StyledHeadingContent,
-    );
-    const [HeadingContainer, headingContainerProps] = getOverrides(
-      overrides.HeadingContainer,
-      StyledHeadingMainHeading,
-    );
-    const [SubHeadingContainer, subHeadingContainerProps] = getOverrides(
-      overrides.SubHeadingContainer,
-      StyledHeadingSubHeading,
-    );
-    const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
-      overrides.EndEnhancerContainer,
-      StyledHeadingEndEnhancerContainer,
-    );
-    const [
-      EndEnhancerDescriptionContainer,
-      endEnhancerDescriptionContainerProps,
-    ] = getOverrides(
-      overrides.EndEnhancerDescriptionContainer,
-      StyledHeadingEndEnhancerDescriptionContainer,
-    );
-
-    const isEndEnhancerString = typeof EndEnhancer === 'string';
-
-    if (__DEV__) {
-      if (isEndEnhancerString && EndEnhancerDescription) {
-        console.warn(
-          'endEnhancerDescription will not be rendered if endEnhancer is not a string',
-        );
-      }
-      if (maxLines && !isMaxLinesValid(maxLines)) {
-        console.warn('maxLines must be 1 or 2.');
-      }
+const ListHeading = React.forwardRef<HeadingPropsT, HTMLLIElement>((props: HeadingPropsT, ref) => {
+  const { overrides = {}, maxLines } = props;
+  const EndEnhancer = props.endEnhancer;
+  const EndEnhancerDescription = props.endEnhancerDescription;
+  const SubHeading = props.subHeading;
+
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledHeadingRoot);
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledHeadingContent);
+  const [HeadingContainer, headingContainerProps] = getOverrides(
+    overrides.HeadingContainer,
+    StyledHeadingMainHeading
+  );
+  const [SubHeadingContainer, subHeadingContainerProps] = getOverrides(
+    overrides.SubHeadingContainer,
+    StyledHeadingSubHeading
+  );
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
+    overrides.EndEnhancerContainer,
+    StyledHeadingEndEnhancerContainer
+  );
+  const [EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps] = getOverrides(
+    overrides.EndEnhancerDescriptionContainer,
+    StyledHeadingEndEnhancerDescriptionContainer
+  );
+
+  const isEndEnhancerString = typeof EndEnhancer === 'string';
+
+  if (__DEV__) {
+    if (isEndEnhancerString && EndEnhancerDescription) {
+      console.warn('endEnhancerDescription will not be rendered if endEnhancer is not a string');
     }
+    if (maxLines && !isMaxLinesValid(maxLines)) {
+      console.warn('maxLines must be 1 or 2.');
+    }
+  }
+
+  return (
+    <Root
+      // flowlint-next-line unclear-type:off
+      ref={(ref: any)}
+      {...rootProps}
+    >
+      <Content {...contentProps}>
+        {/* ----- Top Row -------------------------- */}
+        <StyledHeadingContentRow>
+          <HeadingContainer
+            $maxLines={isMaxLinesValid(maxLines) ? maxLines : 1}
+            {...headingContainerProps}
+          >
+            <RenderNode component={props.heading} />
+          </HeadingContainer>
+
+          {EndEnhancer && (
+            <EndEnhancerContainer $isText={isEndEnhancerString} {...endEnhancerContainerProps}>
+              <RenderNode component={EndEnhancer} />
+            </EndEnhancerContainer>
+          )}
+        </StyledHeadingContentRow>
 
-    return (
-      <Root
-        // eslint-disable-next-line flowtype/no-weak-types
-        ref={(ref: any)}
-        {...rootProps}
-      >
-        <Content {...contentProps}>
-          {/* ----- Top Row -------------------------- */}
+        {/* ----- Bottom Row ----------------------- */}
+        {(Boolean(SubHeading) || EndEnhancerDescription) && (
           <StyledHeadingContentRow>
-            <HeadingContainer
+            <SubHeadingContainer
               $maxLines={isMaxLinesValid(maxLines) ? maxLines : 1}
-              {...headingContainerProps}
+              {...subHeadingContainerProps}
             >
-              <RenderNode component={props.heading} />
-            </HeadingContainer>
-
-            {EndEnhancer && (
-              <EndEnhancerContainer
-                $isText={isEndEnhancerString}
-                {...endEnhancerContainerProps}
-              >
-                <RenderNode component={EndEnhancer} />
-              </EndEnhancerContainer>
+              <RenderNode component={SubHeading} />
+            </SubHeadingContainer>
+
+            {Boolean(EndEnhancerDescription) && isEndEnhancerString && (
+              <EndEnhancerDescriptionContainer {...endEnhancerDescriptionContainerProps}>
+                <RenderNode component={EndEnhancerDescription} />
+              </EndEnhancerDescriptionContainer>
             )}
           </StyledHeadingContentRow>
-
-          {/* ----- Bottom Row ----------------------- */}
-          {(SubHeading || EndEnhancerDescription) && (
-            <StyledHeadingContentRow>
-              <SubHeadingContainer
-                $maxLines={isMaxLinesValid(maxLines) ? maxLines : 1}
-                {...subHeadingContainerProps}
-              >
-                <RenderNode component={SubHeading} />
-              </SubHeadingContainer>
-
-              {EndEnhancerDescription && isEndEnhancerString && (
-                <EndEnhancerDescriptionContainer
-                  {...endEnhancerDescriptionContainerProps}
-                >
-                  <RenderNode component={EndEnhancerDescription} />
-                </EndEnhancerDescriptionContainer>
-              )}
-            </StyledHeadingContentRow>
-          )}
-        </Content>
-      </Root>
-    );
-  },
-);
+        )}
+      </Content>
+    </Root>
+  );
+});
 ListHeading.displayName = 'ListHeading';
 
 export default ListHeading;

package/list/list-item-label.js.flow

@@ -8,36 +8,34 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 
 import {
   StyledLabelContent,
   StyledLabelDescription,
   StyledLabelSublistContent,
 } from './styled-components.js';
-import type {LabelPropsT} from './types.js';
+import type { LabelPropsT } from './types.js';
 
 function ListItemLabel(props: LabelPropsT) {
-  const {overrides = {}} = props;
+  const { overrides = {} } = props;
 
   const [LabelSublistContent, labelSublistContentProps] = getOverrides(
     overrides.LabelSublistContent,
-    StyledLabelSublistContent,
+    StyledLabelSublistContent
   );
   const [LabelContent, labelContentProps] = getOverrides(
     overrides.LabelContent,
-    StyledLabelContent,
+    StyledLabelContent
   );
   const [LabelDescription, labelDescriptionProps] = getOverrides(
     overrides.LabelDescription,
-    StyledLabelDescription,
+    StyledLabelDescription
   );
 
   if (props.sublist) {
     return (
-      <LabelSublistContent {...labelSublistContentProps}>
-        {props.children}
-      </LabelSublistContent>
+      <LabelSublistContent {...labelSublistContentProps}>{props.children}</LabelSublistContent>
     );
   }
 
@@ -45,9 +43,7 @@ function ListItemLabel(props: LabelPropsT) {
     <div>
       <LabelContent {...labelContentProps}>{props.children}</LabelContent>
       {props.description && (
-        <LabelDescription {...labelDescriptionProps}>
-          {props.description}
-        </LabelDescription>
+        <LabelDescription {...labelDescriptionProps}>{props.description}</LabelDescription>
       )}
     </div>
   );

package/list/list-item.js

@@ -75,7 +75,7 @@ var ListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   }, [props.artworkSize, props.sublist]);
 
-  return /*#__PURE__*/_react.default.createElement(Root // eslint-disable-next-line flowtype/no-weak-types
+  return /*#__PURE__*/_react.default.createElement(Root // flowlint-next-line unclear-type:off
   , _extends({
     ref: ref,
     $shape: props.shape || _constants.SHAPE.DEFAULT

package/list/list-item.js.flow

@@ -8,89 +8,84 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 
-import {ARTWORK_SIZES, SHAPE} from './constants.js';
+import { ARTWORK_SIZES, SHAPE } from './constants.js';
 import {
   StyledRoot,
   StyledContent,
   StyledEndEnhancerContainer,
   StyledArtworkContainer,
 } from './styled-components.js';
-import type {PropsT} from './types.js';
-import {artworkSizeToValue} from './utils.js';
+import type { PropsT } from './types.js';
+import { artworkSizeToValue } from './utils.js';
 
-const ListItem = React.forwardRef<PropsT, HTMLLIElement>(
-  (props: PropsT, ref) => {
-    const {overrides = {}} = props;
-    const Artwork = props.artwork;
-    const EndEnhancer = props.endEnhancer;
+const ListItem = React.forwardRef<PropsT, HTMLLIElement>((props: PropsT, ref) => {
+  const { overrides = {} } = props;
+  const Artwork = props.artwork;
+  const EndEnhancer = props.endEnhancer;
 
-    const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
-    const [ArtworkContainer, artworkContainerProps] = getOverrides(
-      overrides.ArtworkContainer,
-      StyledArtworkContainer,
-    );
-    const [Content, contentProps] = getOverrides(
-      overrides.Content,
-      StyledContent,
-    );
-    const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
-      overrides.EndEnhancerContainer,
-      StyledEndEnhancerContainer,
-    );
+  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [ArtworkContainer, artworkContainerProps] = getOverrides(
+    overrides.ArtworkContainer,
+    StyledArtworkContainer
+  );
+  const [Content, contentProps] = getOverrides(overrides.Content, StyledContent);
+  const [EndEnhancerContainer, endEnhancerContainerProps] = getOverrides(
+    overrides.EndEnhancerContainer,
+    StyledEndEnhancerContainer
+  );
 
-    const artworkSize = React.useMemo(() => {
-      if (props.sublist) {
-        let size = props.artworkSize || ARTWORK_SIZES.SMALL;
-        if (props.artworkSize === ARTWORK_SIZES.MEDIUM) {
-          size = ARTWORK_SIZES.SMALL;
-          if (__DEV__) {
-            console.warn(
-              'When ListItem sublist prop is true, artworkSize MEDIUM is aliased to SMALL',
-            );
-          }
+  const artworkSize = React.useMemo(() => {
+    if (props.sublist) {
+      let size = props.artworkSize || ARTWORK_SIZES.SMALL;
+      if (props.artworkSize === ARTWORK_SIZES.MEDIUM) {
+        size = ARTWORK_SIZES.SMALL;
+        if (__DEV__) {
+          console.warn(
+            'When ListItem sublist prop is true, artworkSize MEDIUM is aliased to SMALL'
+          );
         }
-        return size;
-      } else {
-        return props.artworkSize || ARTWORK_SIZES.MEDIUM;
       }
-    }, [props.artworkSize, props.sublist]);
+      return size;
+    } else {
+      return props.artworkSize || ARTWORK_SIZES.MEDIUM;
+    }
+  }, [props.artworkSize, props.sublist]);
 
-    return (
-      <Root
-        // eslint-disable-next-line flowtype/no-weak-types
-        ref={(ref: any)}
-        $shape={props.shape || SHAPE.DEFAULT}
-        {...rootProps}
-      >
-        {Artwork && (
-          <ArtworkContainer
-            $artworkSize={artworkSize}
-            $sublist={Boolean(props.sublist)}
-            {...artworkContainerProps}
-          >
-            <Artwork
-              size={
-                typeof artworkSize === 'number'
-                  ? artworkSize
-                  : artworkSizeToValue(artworkSize, Boolean(props.sublist))
-              }
-            />
-          </ArtworkContainer>
+  return (
+    <Root
+      // flowlint-next-line unclear-type:off
+      ref={(ref: any)}
+      $shape={props.shape || SHAPE.DEFAULT}
+      {...rootProps}
+    >
+      {Artwork && (
+        <ArtworkContainer
+          $artworkSize={artworkSize}
+          $sublist={Boolean(props.sublist)}
+          {...artworkContainerProps}
+        >
+          <Artwork
+            size={
+              typeof artworkSize === 'number'
+                ? artworkSize
+                : artworkSizeToValue(artworkSize, Boolean(props.sublist))
+            }
+          />
+        </ArtworkContainer>
+      )}
+      <Content $mLeft={!Artwork} $sublist={!!props.sublist} {...contentProps}>
+        {props.children}
+        {EndEnhancer && EndEnhancer !== 0 && (
+          <EndEnhancerContainer {...endEnhancerContainerProps}>
+            <EndEnhancer />
+          </EndEnhancerContainer>
         )}
-        <Content $mLeft={!Artwork} $sublist={!!props.sublist} {...contentProps}>
-          {props.children}
-          {EndEnhancer && EndEnhancer !== 0 && (
-            <EndEnhancerContainer {...endEnhancerContainerProps}>
-              <EndEnhancer />
-            </EndEnhancerContainer>
-          )}
-        </Content>
-      </Root>
-    );
-  },
-);
+      </Content>
+    </Root>
+  );
+});
 ListItem.displayName = 'ListItem';
 
 export default ListItem;

package/list/menu-adapter.js

@@ -32,8 +32,7 @@ var MenuAdapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
     artwork: props.artwork,
     artworkSize: props.artworkSize,
     endEnhancer: props.endEnhancer,
-    overrides: // $FlowFixMe
-    (0, _overrides.mergeOverrides)({
+    overrides: (0, _overrides.mergeOverrides)({
       Root: {
         props: {
           onMouseEnter: props.onMouseEnter,

package/list/menu-adapter.js.flow

@@ -9,44 +9,37 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 
 import ListItem from './list-item.js';
-import type {MenuAdapterPropsT} from './types.js';
-import {mergeOverrides} from '../helpers/overrides.js';
+import type { MenuAdapterPropsT } from './types.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 
-const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>(
-  (props, ref) => {
-    return (
-      <ListItem
-        ref={ref}
-        sublist={props.sublist || props.$size === 'compact'}
-        artwork={props.artwork}
-        artworkSize={props.artworkSize}
-        endEnhancer={props.endEnhancer}
-        overrides={
-          // $FlowFixMe
-          mergeOverrides(
-            {
-              Root: {
-                props: {
-                  onMouseEnter: props.onMouseEnter,
-                  onClick: props.onClick,
-                },
-                style: ({$theme}) => ({
-                  backgroundColor: props.$isHighlighted
-                    ? $theme.colors.menuFillHover
-                    : null,
-                  cursor: props.$disabled ? 'not-allowed' : 'pointer',
-                }),
-              },
+const MenuAdapter = React.forwardRef<MenuAdapterPropsT, HTMLLIElement>((props, ref) => {
+  return (
+    <ListItem
+      ref={ref}
+      sublist={props.sublist || props.$size === 'compact'}
+      artwork={props.artwork}
+      artworkSize={props.artworkSize}
+      endEnhancer={props.endEnhancer}
+      overrides={mergeOverrides(
+        {
+          Root: {
+            props: {
+              onMouseEnter: props.onMouseEnter,
+              onClick: props.onClick,
             },
-            props.overrides,
-          )
-        }
-      >
-        {props.children}
-      </ListItem>
-    );
-  },
-);
+            style: ({ $theme }) => ({
+              backgroundColor: props.$isHighlighted ? $theme.colors.menuFillHover : null,
+              cursor: props.$disabled ? 'not-allowed' : 'pointer',
+            }),
+          },
+        },
+        props.overrides
+      )}
+    >
+      {props.children}
+    </ListItem>
+  );
+});
 MenuAdapter.displayName = 'MenuAdapter';
 
 export default MenuAdapter;