baseui 0.0.0-next-2aecb6f → 0.0.0-next-aad2baf

package/layout-grid/cell.js.flow

@@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {StyledCell as DefaultStyledCell} from './styled-components.js';
-import {GridContext} from './grid.js';
-import type {CellPropsT} from './types.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledCell as DefaultStyledCell } from './styled-components.js';
+import { GridContext } from './grid.js';
+import type { CellPropsT } from './types.js';
 
 export default function Cell({
   align,
@@ -24,10 +24,7 @@ export default function Cell({
   span,
   overrides = {},
 }: CellPropsT) {
-  const [StyledCell, overrideProps] = getOverrides(
-    overrides.Cell,
-    DefaultStyledCell,
-  );
+  const [StyledCell, overrideProps] = getOverrides(overrides.Cell, DefaultStyledCell);
   const gridContext = React.useContext(GridContext);
   return (
     <StyledCell

package/layout-grid/grid.js.flow

@@ -6,18 +6,16 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {STYLE, STYLE_VALUES} from './constants.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { STYLE, STYLE_VALUES } from './constants.js';
 import {
   StyledGrid as DefaultStyledGrid,
   StyledGridWrapper as DefaultStyledGridWrapper,
 } from './styled-components.js';
 
-import type {GridPropsT, SharedGridPropsT} from './types.js';
+import type { GridPropsT, SharedGridPropsT } from './types.js';
 
-export const GridContext: React.Context<SharedGridPropsT> = React.createContext(
-  {},
-);
+export const GridContext: React.Context<SharedGridPropsT> = React.createContext({});
 
 export default function Grid({
   align,
@@ -32,13 +30,10 @@ export default function Grid({
   gridUnit,
   overrides = {},
 }: GridPropsT) {
-  const [StyledGrid, overrideProps] = getOverrides(
-    overrides.Grid,
-    DefaultStyledGrid,
-  );
+  const [StyledGrid, overrideProps] = getOverrides(overrides.Grid, DefaultStyledGrid);
   const [StyledGridWrapper, wrapperProps] = getOverrides(
     overrides.GridWrapper,
-    DefaultStyledGridWrapper,
+    DefaultStyledGridWrapper
   );
   const presetStyleValues = STYLE_VALUES[gridStyle];
   const gridStyleValues = presetStyleValues
@@ -59,27 +54,17 @@ export default function Grid({
   return (
     <StyledGridWrapper
       $behavior={behavior}
-      $gridMargins={
-        gridMargins != null ? gridMargins : gridStyleValues.$gridMargins
-      }
-      $gridMaxWidth={
-        gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth
-      }
+      $gridMargins={gridMargins != null ? gridMargins : gridStyleValues.$gridMargins}
+      $gridMaxWidth={gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth}
       $gridUnit={gridUnit != null ? gridUnit : gridStyleValues.$gridUnit}
       {...wrapperProps}
     >
       <StyledGrid
         $align={align}
         $behavior={behavior}
-        $gridGutters={
-          gridGutters != null ? gridGutters : gridStyleValues.$gridGutters
-        }
-        $gridMargins={
-          gridMargins != null ? gridMargins : gridStyleValues.$gridMargins
-        }
-        $gridMaxWidth={
-          gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth
-        }
+        $gridGutters={gridGutters != null ? gridGutters : gridStyleValues.$gridGutters}
+        $gridMargins={gridMargins != null ? gridMargins : gridStyleValues.$gridMargins}
+        $gridMaxWidth={gridMaxWidth != null ? gridMaxWidth : gridStyleValues.$gridMaxWidth}
         $gridUnit={gridUnit != null ? gridUnit : gridStyleValues.$gridUnit}
         {...overrideProps}
       >

package/layout-grid/index.js.flow

@@ -5,13 +5,13 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {StyledGrid, StyledCell} from './styled-components.js';
+import { StyledGrid, StyledCell } from './styled-components.js';
 import Grid from './grid.js';
 import Cell from './cell.js';
 
 import DeprecatedHOC from '../utils/deprecated-component.js';
 
-export {StyledGrid, StyledCell, Grid, Cell};
+export { StyledGrid, StyledCell, Grid, Cell };
 export * from './constants.js';
 
 const componentName = 'Layout Grid (baseui/layout-grid)';

package/layout-grid/styled-components.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled} from '../styles/index.js';
-import {getMediaQueries} from '../helpers/responsive-helpers.js';
-import {BEHAVIOR} from './constants.js';
+import { styled } from '../styles/index.js';
+import { getMediaQueries } from '../helpers/responsive-helpers.js';
+import { BEHAVIOR } from './constants.js';
 import type {
   ResponsiveT,
   StyledGridPropsT,
@@ -28,11 +28,9 @@ export const StyledGridWrapper = styled<StyledGridWrapperPropsT>(
     margin: 'auto',
     maxWidth:
       $behavior === BEHAVIOR.fixed
-        ? `${
-            $gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1
-          }${$gridUnit}`
+        ? `${$gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1}${$gridUnit}`
         : null,
-  }),
+  })
 );
 
 export const StyledGrid = styled<StyledGridPropsT>(
@@ -52,20 +50,10 @@ export const StyledGrid = styled<StyledGridPropsT>(
         return {
           ...acc,
           [cur]: {
-            paddingLeft: `${getResponsiveNumber(
-              $gridMargins,
-              idx,
-            )}${$gridUnit}`,
-            paddingRight: `${getResponsiveNumber(
-              $gridMargins,
-              idx,
-            )}${$gridUnit}`,
-            marginLeft: `-${
-              getResponsiveNumber($gridGutters, idx) / 2
-            }${$gridUnit}`,
-            marginRight: `-${
-              getResponsiveNumber($gridGutters, idx) / 2
-            }${$gridUnit}`,
+            paddingLeft: `${getResponsiveNumber($gridMargins, idx)}${$gridUnit}`,
+            paddingRight: `${getResponsiveNumber($gridMargins, idx)}${$gridUnit}`,
+            marginLeft: `-${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
+            marginRight: `-${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
             alignItems: getResponsiveValue($align, idx),
           },
         };
@@ -76,7 +64,7 @@ export const StyledGrid = styled<StyledGridPropsT>(
         marginLeft: `-${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
         marginRight: `-${getResponsiveNumber($gridGutters, 0) / 2}${$gridUnit}`,
         alignItems: getResponsiveValue($align, 0),
-      },
+      }
     );
     return {
       boxSizing: 'border-box',
@@ -84,15 +72,11 @@ export const StyledGrid = styled<StyledGridPropsT>(
       flexWrap: 'wrap',
       maxWidth:
         $behavior === BEHAVIOR.fixed
-          ? `${
-              $gridMaxWidth +
-              2 * getResponsiveNumber($gridMargins, Infinity) -
-              1
-            }${$gridUnit}`
+          ? `${$gridMaxWidth + 2 * getResponsiveNumber($gridMargins, Infinity) - 1}${$gridUnit}`
           : null,
       ...gridStyles,
     };
-  },
+  }
 );
 
 export const StyledCell = styled<StyledCellPropsT>(
@@ -130,21 +114,13 @@ export const StyledCell = styled<StyledCellPropsT>(
             display: 'block',
             width: `calc(${
               (100 / getResponsiveNumber($gridColumns, idx)) *
-              Math.min(
-                getResponsiveNumber($span, idx),
-                getResponsiveNumber($gridColumns, idx),
-              )
+              Math.min(getResponsiveNumber($span, idx), getResponsiveNumber($gridColumns, idx))
             }% - ${getResponsiveNumber($gridGutters, idx)}${$gridUnit})`,
             marginLeft: `calc(${
               (100 / getResponsiveNumber($gridColumns, idx)) *
-              Math.min(
-                getResponsiveNumber($skip, idx),
-                getResponsiveNumber($gridColumns, idx) - 1,
-              )
+              Math.min(getResponsiveNumber($skip, idx), getResponsiveNumber($gridColumns, idx) - 1)
             }% + ${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit})`,
-            marginRight: `${
-              getResponsiveNumber($gridGutters, idx) / 2
-            }${$gridUnit}`,
+            marginRight: `${getResponsiveNumber($gridGutters, idx) / 2}${$gridUnit}`,
             marginBottom: `${getResponsiveNumber($gridGaps, idx)}${$gridUnit}`,
             alignSelf: getResponsiveValue($align, idx),
             order: getResponsiveNumber($order, idx),
@@ -158,13 +134,13 @@ export const StyledCell = styled<StyledCellPropsT>(
         marginBottom: `${getResponsiveNumber($gridGaps, 0)}${$gridUnit}`,
         alignSelf: getResponsiveValue($align, 0),
         order: getResponsiveNumber($order, 0),
-      },
+      }
     );
     return {
       boxSizing: 'border-box',
       ...cellStyles,
     };
-  },
+  }
 );
 
 function getResponsiveNumber<T>(responsive: ResponsiveT<T>, i: number): number {

package/layout-grid/types.js.flow

@@ -7,16 +7,13 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {ALIGNMENT, BEHAVIOR, STYLE} from './constants.js';
+import { ALIGNMENT, BEHAVIOR, STYLE } from './constants.js';
 
-import type {OverrideT} from '../helpers/overrides.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type ResponsiveT<T> = T | Array<T>;
 
-export type AlignmentT =
-  | typeof ALIGNMENT.start
-  | typeof ALIGNMENT.center
-  | typeof ALIGNMENT.end;
+export type AlignmentT = typeof ALIGNMENT.start | typeof ALIGNMENT.center | typeof ALIGNMENT.end;
 
 export type BehaviorT = typeof BEHAVIOR.fixed | typeof BEHAVIOR.fluid;
 export type CSSLengthUnitT =

package/link/index.js.flow

@@ -7,9 +7,9 @@ LICENSE file in the root directory of this source tree.
 // @flow
 // Styled elements
 import * as React from 'react';
-import {Link} from './styled-components.js';
-import {withWrapper} from '../styles/index.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { Link } from './styled-components.js';
+import { withWrapper } from '../styles/index.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 function LinkFocus(props) {
   const [focusVisible, setFocusVisible] = React.useState(false);
@@ -23,13 +23,13 @@ function LinkFocus(props) {
       setFocusVisible(false);
     }
   };
-  return props.children({focusVisible, handleFocus, handleBlur});
+  return props.children({ focusVisible, handleFocus, handleBlur });
 }
 
 export const StyledLink = withWrapper(
   Link,
   (Styled) =>
-    function StyledLink({animateUnderline, ...restProps}) {
+    function StyledLink({ animateUnderline, ...restProps }) {
       return (
         <LinkFocus>
           {(focusProps) => (
@@ -44,7 +44,7 @@ export const StyledLink = withWrapper(
           )}
         </LinkFocus>
       );
-    },
+    }
 );
 
 declare var __DEV__: boolean;

package/link/styled-components.js.flow

@@ -6,13 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled} from '../styles/index.js';
+import { styled } from '../styles/index.js';
 
 export const Link = styled<{
   $isAnimateUnderline: boolean,
   $isFocusVisible: boolean,
-}>('a', ({$theme, $isAnimateUnderline, $isFocusVisible}) => {
-  const {colors, typography, animation, direction} = $theme;
+}>('a', ({ $theme, $isAnimateUnderline, $isFocusVisible }) => {
+  const { colors, typography, animation, direction } = $theme;
 
   const underlineLTR = `linear-gradient(transparent calc(100% - 1px), ${colors.linkHover} 1px), linear-gradient(transparent calc(100% - 1px), ${colors.linkText} 1px)`;
 
@@ -30,8 +30,7 @@ export const Link = styled<{
     textDecoration: $isAnimateUnderline ? 'none' : 'underline',
     textUnderlinePosition: 'under',
     willChange: 'background-size',
-    backgroundSize:
-      direction === 'rtl' ? '100% 100%, 100% 100%' : '0% 100%, 100% 100%',
+    backgroundSize: direction === 'rtl' ? '100% 100%, 100% 100%' : '0% 100%, 100% 100%',
     backgroundRepeat: 'no-repeat',
     backgroundImage: $isAnimateUnderline
       ? direction === 'rtl'
@@ -40,8 +39,7 @@ export const Link = styled<{
       : 'none',
     ':hover': {
       color: colors.linkHover,
-      backgroundSize:
-        direction === 'rtl' ? '0% 100%, 100% 100%' : '100% 100%, 100% 100%',
+      backgroundSize: direction === 'rtl' ? '0% 100%, 100% 100%' : '100% 100%, 100% 100%',
     },
     ':focus': {
       outline: $isFocusVisible ? `3px solid ${colors.accent}` : 'none',

package/list/index.js.flow

@@ -6,12 +6,12 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as ListItem} from './list-item.js';
-export {default as ListItemLabel} from './list-item-label.js';
-export {default as ListHeading} from './list-heading.js';
-export {default as MenuAdapter} from './menu-adapter.js';
+export { default as ListItem } from './list-item.js';
+export { default as ListItemLabel } from './list-item-label.js';
+export { default as ListHeading } from './list-heading.js';
+export { default as MenuAdapter } from './menu-adapter.js';
 
-export {ARTWORK_SIZES, SHAPE} from './constants.js';
+export { ARTWORK_SIZES, SHAPE } from './constants.js';
 export * from './styled-components.js';
 export type * from './types.js';
 

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
-        // flowlint-next-line unclear-type:off
-        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 ----------------------- */}
-          {(Boolean(SubHeading) || EndEnhancerDescription) && (
-            <StyledHeadingContentRow>
-              <SubHeadingContainer
-                $maxLines={isMaxLinesValid(maxLines) ? maxLines : 1}
-                {...subHeadingContainerProps}
-              >
-                <RenderNode component={SubHeading} />
-              </SubHeadingContainer>
-
-              {Boolean(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>
   );