@workday/canvas-kit-react 8.0.0 → 8.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0",
+  "version": "8.0.2",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -41,7 +41,7 @@
     "workday"
   ],
   "peerDependencies": {
-    "react": "^16.8 || ^17.0"
+    "react": "^17.0 || ^18.0"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.1.1",
@@ -49,14 +49,11 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^8.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.0.0",
-    "@workday/canvas-kit-preview-react": "^8.0.0",
+    "@workday/canvas-kit-popup-stack": "^8.0.2",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
-    "csstype": "^2.6.17",
-    "element-closest": "^3.0.2",
+    "csstype": "^3.0.2",
     "lodash": "^4.17.14",
     "polished": "^4.1.3",
     "react-innertext": "^1.1.5",
@@ -70,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "433a9d272804ceed26191ac1ef629d61fab4dcb4"
+  "gitHead": "0f1b4cb0314b4ff02e2c81fdcc7986fac582ae9e"
 }

package/pagination/lib/Pagination/AdditionalDetails.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import {type, typeColors, space} from '@workday/canvas-kit-react/tokens';
+import {type, space, typeColors} from '@workday/canvas-kit-react/tokens';
 import {accessibleHide, styled, StyledType} from '@workday/canvas-kit-react/common';
 
 import {PaginationModel} from './types';
 import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 import {useLiveRegion} from './common/useLiveRegion';
 
-export interface AdditionalDetailsProps extends FlexProps {
+export interface AdditionalDetailsProps extends Omit<FlexProps, 'children'> {
   children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
   model: PaginationModel;
   shouldAnnounceToScreenReader?: boolean;
@@ -16,19 +16,13 @@ export interface AdditionalDetailsProps extends FlexProps {
 const StyledAdditionalDetails = styled(Flex)<
   StyledType & Pick<AdditionalDetailsProps, 'shouldHideDetails'>
 >(({shouldHideDetails}) => {
-  const styles = {
-    ...type.levels.subtext.medium,
-    color: typeColors.hint,
-  };
   if (shouldHideDetails) {
     return {
-      ...styles,
       ...accessibleHide,
       marginTop: space.zero,
     };
   } else {
     return {
-      ...styles,
       marginTop: space.xs,
     };
   }
@@ -43,7 +37,12 @@ export const AdditionalDetails = ({
   const liveRegionProps = useLiveRegion({shouldAnnounceToScreenReader});
 
   return (
-    <StyledAdditionalDetails {...liveRegionProps} {...elemProps}>
+    <StyledAdditionalDetails
+      {...type.levels.subtext.medium}
+      color={typeColors.hint}
+      {...liveRegionProps}
+      {...elemProps}
+    >
       {typeof children === 'function' ? children(model) : children}
     </StyledAdditionalDetails>
   );

package/pagination/lib/Pagination/GoTo/Label.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import {type, typeColors} from '@workday/canvas-kit-react/tokens';
-
 import {PaginationModel} from '../types';
-import {StyledType, styled} from '@workday/canvas-kit-react/common';
+import {LabelText} from '@workday/canvas-kit-react/text';
 
-export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+export interface GoToLabelProps
+  extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> {
   model: PaginationModel;
   /**
    * Accepts child elements or a render prop.
@@ -12,16 +11,10 @@ export interface GoToLabelProps extends React.LabelHTMLAttributes<HTMLLabelEleme
   children?: (model: PaginationModel) => React.ReactNode | React.ReactNode;
 }
 
-const StyledLabel = styled('label')<StyledType>({
-  ...type.levels.subtext.medium,
-  color: typeColors.hint,
-  whiteSpace: 'nowrap',
-});
-
 export const GoToLabel = ({model, children, ...elemProps}: GoToLabelProps) => {
   return (
-    <StyledLabel {...elemProps}>
+    <LabelText typeLevel="subtext.medium" variant="hint" whiteSpace="nowrap" {...elemProps}>
       {typeof children === 'function' ? children(model) : children}
-    </StyledLabel>
+    </LabelText>
   );
 };

package/pagination/lib/Pagination/PageList.tsx

@@ -4,7 +4,7 @@ import {PaginationModel} from './types';
 import {ListItem, ListItemProps} from './common/List';
 import {HStack, HStackProps} from '@workday/canvas-kit-react/layout';
 
-export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing'> {
+export interface PageListProps extends Omit<HStackProps, 'as' | 'spacing' | 'children'> {
   model: PaginationModel;
   children?: (model: PaginationModel) => React.ReactNode[] | React.ReactNode;
 }

package/pagination/lib/Pagination/usePaginationModel.ts

@@ -41,8 +41,11 @@ export const usePaginationModel = ({
   const [currentPage, setCurrentPage] = React.useState(initialCurrentPage);
 
   const changePage = (page: number) => {
-    onPageChange?.(page);
-
+    // Don't fire an `onPageChange` event if the page number is the same as the current page.
+    // `setCurrentPage` doesn't need this check, because React won't update the state if the values are the same.
+    if (currentPage !== page) {
+      onPageChange?.(page);
+    }
     setCurrentPage(page);
   };
 

package/popup/lib/PopupBody.tsx

@@ -8,5 +8,5 @@ export const PopupBody = createSubcomponent('div')({
   displayName: 'Popup.Body',
   modelHook: usePopupModel,
 })<ExtractProps<typeof Card.Body>>(elemProps => {
-  return <Card.Body overflowY="auto" {...elemProps} />;
+  return <Card.Body overflowY="auto" padding="xxs" {...elemProps} />;
 });

package/popup/lib/PopupCard.tsx

@@ -12,12 +12,13 @@ import {
   useConstant,
   createSubcomponent,
 } from '@workday/canvas-kit-react/common';
-import {Stack, StackStyleProps} from '@workday/canvas-kit-react/layout';
+import {Flex, FlexStyleProps} from '@workday/canvas-kit-react/layout';
 
 import {getTransformFromPlacement} from './getTransformFromPlacement';
 import {usePopupCard, usePopupModel} from './hooks';
 
-export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
+export type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
+export interface PopupCardProps extends FlexAndBoxProps {
   children?: React.ReactNode;
 }
 
@@ -38,15 +39,22 @@ const popupAnimation = (transformOrigin: TransformOrigin) => {
 
 const StyledPopupCard = styled(Card)<
   StyledType & {width?: number | string; transformOrigin?: TransformOrigin}
->(type.levels.subtext.large, ({transformOrigin}) => {
+>(({transformOrigin, theme}) => {
   if (transformOrigin == null) {
     return {};
   }
+
   return {
     animation: popupAnimation(transformOrigin),
     animationDuration: '150ms',
     animationTimingFunction: 'ease-out',
     transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
+    [theme.canvas.breakpoints.down('s')]: {
+      animation: popupAnimation({vertical: 'bottom', horizontal: 'center'}),
+      animationDuration: '150ms',
+      animationTimingFunction: 'ease-out',
+      transformOrigin: 'bottom center',
+    },
     // Allow overriding of animation in special cases
     '.wd-no-animation &': {
       animation: 'none',
@@ -63,24 +71,24 @@ export const PopupCard = createSubcomponent('div')({
     return getTransformFromPlacement(model.state.placement || 'bottom');
   }, [model.state.placement]);
 
-  // As is a Stack that will render an element of `Element`
-  const As = useConstant(() => Stack.as(Element));
+  // As is a Flex that will render an element of `Element`
+  const As = useConstant(() => Flex.as(Element));
 
   return (
     <StyledPopupCard
       as={As}
       transformOrigin={transformOrigin}
       position="relative"
-      padding="l"
       depth={5}
       maxWidth={`calc(100vw - ${space.l})`}
-      spacing={0}
       flexDirection="column"
       minHeight={0}
+      padding="m"
       maxHeight={`calc(100vh - ${
         elemProps.margin ? space[elemProps.margin as CanvasSpaceKeys] || elemProps.margin : space.xl
       } * 2)`}
-      overflowY="auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
+      overflowY="auto"
+      {...type.levels.subtext.large}
       {...elemProps}
     >
       {children}

package/popup/lib/PopupCloseButton.tsx

@@ -14,5 +14,9 @@ export const PopupCloseButton = createSubcomponent(SecondaryButton)({
   modelHook: usePopupModel,
   elemPropsHook: usePopupCloseButton,
 })<PopupCloseButtonProps>(({children, ...elemProps}: PopupCloseButtonProps, Element) => {
-  return <Element {...elemProps}>{children}</Element>;
+  return (
+    <Element type="button" {...elemProps}>
+      {children}
+    </Element>
+  );
 });

package/popup/lib/PopupCloseIcon.tsx

@@ -26,5 +26,5 @@ export const PopupCloseIcon = createSubcomponent('button')({
   modelHook: usePopupModel,
   elemPropsHook: usePopupCloseButton,
 })<PopupCloseIconProps>(({children, ...elemProps}, Element) => {
-  return <StyledCloseIcon as={Element} size="medium" icon={xIcon} {...elemProps} />;
+  return <StyledCloseIcon as={Element} size="medium" icon={xIcon} type="button" {...elemProps} />;
 });

package/popup/lib/PopupHeading.tsx

@@ -15,7 +15,7 @@ export const PopupHeading = createSubcomponent('h2')({
   elemPropsHook: usePopupHeading,
 })<PopupHeadingProps>(({children, ...elemProps}, Element) => {
   return (
-    <Card.Heading as={Element} marginBottom="s" {...elemProps}>
+    <Card.Heading as={Element} marginBottom="xxs" padding="xxs" {...elemProps}>
       {children}
     </Card.Heading>
   );

package/popup/lib/PopupPopper.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 import {createSubcomponent} from '@workday/canvas-kit-react/common';
 
 import {usePopupModel, usePopupPopper} from './hooks';
-import {Placement, PopperOptions, Popper} from './Popper';
+import {Placement, PopperOptions, Popper, PopperProps} from './Popper';
 
-export interface PopupPopperProps {
+export interface PopupPopperProps extends PopperProps {
   /**
    * The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,
    * `right`, `bottom`, or `left`. Each placement can also be modified using any of the following
@@ -17,7 +17,6 @@ export interface PopupPopperProps {
    * The additional options passed to the Popper's `popper.js` instance.
    */
   popperOptions?: Partial<PopperOptions>;
-  children?: React.ReactNode;
 }
 
 export const PopupPopper = createSubcomponent('div')({

package/popup/lib/hooks/index.ts

@@ -4,6 +4,7 @@ export * from './useBringToTopOnClick';
 export * from './useCloseOnEscape';
 export * from './useCloseOnFullscreenExit';
 export * from './useCloseOnOutsideClick';
+export * from './useCloseOnTargetHidden';
 export * from './useDisableBodyScroll';
 export * from './useFocusRedirect';
 export * from './useFocusTrap';

package/popup/lib/hooks/useCloseOnFullscreenExit.ts

@@ -12,7 +12,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useCloseOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    event => {
+    (event: any) => {
       if (!screenfull.isFullscreen) {
         model.events.hide(event);
       }

package/popup/lib/hooks/useCloseOnTargetHidden.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupModel} from '@workday/canvas-kit-react/popup';
+
+function getScrollParent(element: HTMLElement): HTMLElement {
+  if (element === document.body || !element.parentElement) {
+    return element;
+  }
+  const styles = getComputedStyle(element);
+
+  if (
+    styles.overflowY === 'scroll' ||
+    styles.overflowY === 'auto' ||
+    styles.overflowX === 'scroll' ||
+    styles.overflowX === 'auto'
+  ) {
+    return element;
+  }
+
+  return getScrollParent(element.parentElement);
+}
+
+/**
+ * Sets up an
+ * [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * for the target element. When the target is detected as being less than 50% visible, the popup
+ * will close. Most likely, this will happen if the user scrolls an overflowed content area of the
+ * page and the target is no longer visible.
+ *
+ * This should be used with popup elements that are transitory like Tooltips and dropdown menus.
+ */
+export const useCloseOnTargetHidden = createElemPropsHook(usePopupModel)(model => {
+  const visible = model.state.visibility !== 'hidden';
+
+  const callback: IntersectionObserverCallback = React.useCallback(
+    entries => {
+      if (entries[0].intersectionRatio < 0.5) {
+        model.events.hide();
+      }
+    },
+    [model.events]
+  );
+
+  React.useLayoutEffect(() => {
+    if (!visible || !model.state.targetRef.current) {
+      return;
+    }
+
+    const target = model.state.targetRef.current;
+    const scrollParent = getScrollParent(target);
+
+    // eslint-disable-next-line compat/compat
+    const observer = new IntersectionObserver(callback, {
+      root: scrollParent,
+      threshold: 0.5,
+    });
+
+    observer.observe(model.state.targetRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, model.state.targetRef, visible]);
+
+  return {};
+});

package/popup/lib/hooks/useReturnFocus.tsx

@@ -1,8 +1,35 @@
 import React from 'react';
 
-import {changeFocus, createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {changeFocus, createElemPropsHook, isFocusable} from '@workday/canvas-kit-react/common';
 
 import {usePopupModel} from './usePopupModel';
+import {PopupStack} from '@workday/canvas-kit-popup-stack';
+
+function getScrollParent(element: HTMLElement): HTMLElement {
+  if (element === document.body || !element.parentElement) {
+    return element;
+  }
+  const styles = getComputedStyle(element);
+
+  if (styles.overflowY === 'scroll' || styles.overflowY === 'auto') {
+    return element;
+  }
+
+  return getScrollParent(element.parentElement);
+}
+
+/**
+ * Get a focusable element in an element's tree
+ */
+function getFocusableElement(element: Element | null): Element | null {
+  if (element === null || element === document.body || !element.parentElement) {
+    return null;
+  } else if (isFocusable(element)) {
+    return element;
+  }
+
+  return getFocusableElement(element.parentElement);
+}
 
 /**
  * Returns focus to the target element when the popup is hidden. This works well with
@@ -13,17 +40,98 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
   const visible = model.state.visibility !== 'hidden';
+  const elementRef = React.useRef<Element | null>(null);
+
+  // This boolean tracks keyboard-driven focus changes. This is required for `useFocusRedirect` as
+  // focus redirection needs synchronous focus management and everything else needs asynchronous
+  // focus management.
+  const requiresFocusChangeRef = React.useRef(false);
 
+  const onKeyDown = React.useCallback((event: KeyboardEvent) => {
+    // The tab key changes focus
+    if (event.key === 'Tab') {
+      requiresFocusChangeRef.current = true;
+    }
+  }, []);
+
+  // track mousedown events to determine if the mouse target is a focusable element. If it is, we
+  // should not return focus
+  const onMouseDown = React.useCallback(
+    (event: MouseEvent) => {
+      if (model.state.stackRef.current && event.target instanceof HTMLElement) {
+        if (!PopupStack.contains(model.state.stackRef.current, event.target)) {
+          elementRef.current = event.target;
+        }
+      }
+    },
+    [model.state.stackRef]
+  );
+
+  // We use `useLayoutEffect` because the callback will be called _before_ the browser changes
+  // focus. This allows the browser to change focus as normal. For example, if the popup closes
+  // because the user hits the tab key when focused on the last focusable element,
+  // `useFocusRedirect` will cause the popup to close before the browser is finished processing the
+  // `keydown`. The browser's default action of a keydown of a tab key is to advance focus to the
+  // next focusable element. This means that the `useFocusRedirect` will change focus back to the
+  // target, then the tab key is processed by the browser to focus on the next item after the target
+  // without us having to use a focus manager to guess what the next focusable element is.
+  //
+  // But because we're using `useLayoutEffect` instead of `useEffect`, we cannot use
+  // `document.activeElement` (because the focus hasn't changed yet because the browser hasn't
+  // triggered a default action yet) to determine if a user clicked on something that can accept
+  // focus itself. If we don't short-circuit return focus, the user will intend to click on an
+  // `input` element only to get focus changed back. This is annoying to users and unintuitive. Instead,
+  // we'll use `mousedown` and `mouseup` to determine if we're closing because of a mouse click.
   React.useLayoutEffect(() => {
     if (!visible) {
       return;
     }
     // capture the element here. The refs will be null by the time the cleanup function is called
-    const element = (model.state.returnFocusRef || model.state.targetRef).current;
+    const element = (model.state.returnFocusRef || model.state.targetRef)
+      .current as HTMLElement | null;
+    document.addEventListener('mousedown', onMouseDown, true);
+    document.addEventListener('keydown', onKeyDown, true);
+
     return () => {
-      changeFocus(element);
+      document.removeEventListener('mousedown', onMouseDown, true);
+      document.removeEventListener('keydown', onKeyDown, true);
+      if (!element) {
+        return;
+      }
+      const scrollParent = getScrollParent(element);
+      const scrollParentRect = scrollParent.getBoundingClientRect();
+      const elementRect = element.getBoundingClientRect();
+
+      // Don't change focus if user focused on a different element like a `input` or the target
+      // element isn't on at least halfway rendered on the screen.
+      if (
+        (elementRef.current && getFocusableElement(elementRef.current)) || // did the user click on a focusable element?
+        elementRect.top + elementRect.height / 2 < scrollParentRect.top || // is the top half of the target element visible?
+        elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom || // is the bottom half of the target element visible?
+        elementRect.left + elementRect.width / 2 < scrollParentRect.left || // is the left half of the target element visible?
+        elementRect.right - elementRect.width / 2 > scrollParentRect.right // is the right half of the target element visible?
+      ) {
+        // reset the focus element and bail early
+        elementRef.current = null;
+        return;
+      }
+
+      if (requiresFocusChangeRef.current) {
+        // We need to change focus _before_ the browser process the default action of picking a new
+        // focus target. Doing this immediately prevents the `focus` event from firing on `element`,
+        // but that's okay because the browser will change focus anyways.
+        changeFocus(element);
+      } else {
+        // We wait a frame for the current event to process, allowing the browser to fire default
+        // actions. This delay allows the focus change to trigger a `focus` event on `element`.
+        requestAnimationFrame(() => {
+          changeFocus(element);
+        });
+      }
+
+      elementRef.current = null;
     };
-  }, [model.state.returnFocusRef, model.state.targetRef, visible]);
+  }, [model.state.returnFocusRef, model.state.targetRef, visible, onMouseDown, onKeyDown]);
 
   return {};
 });

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

@@ -16,7 +16,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    event => {
+    (event: any) => {
       if (screenfull.isFullscreen && model.state.stackRef.current) {
         PopupStack.transferToCurrentContext({
           element: model.state.stackRef.current,

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

@@ -15,7 +15,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
-    event => {
+    (event: any) => {
       if (!screenfull.isFullscreen && model.state.stackRef.current) {
         PopupStack.transferToCurrentContext({
           element: model.state.stackRef.current,

package/radio/index.ts

@@ -1,7 +1,2 @@
-import Radio from './lib/Radio';
-
-export default Radio;
-export {Radio};
-export {default as RadioGroup} from './lib/RadioGroup';
 export * from './lib/Radio';
 export * from './lib/RadioGroup';

package/radio/lib/Radio.tsx

@@ -8,12 +8,8 @@ import {
   Themeable,
   useUniqueId,
 } from '@workday/canvas-kit-react/common';
-import canvas, {
-  borderRadius,
-  colors,
-  inputColors,
-  spaceNumbers,
-} from '@workday/canvas-kit-react/tokens';
+import {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
+import {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface RadioProps extends Themeable {
   /**
@@ -276,21 +272,6 @@ const RadioCheck = styled('div')<Pick<RadioProps, 'checked' | 'variant'>>(
   })
 );
 
-const RadioLabel = styled('label')<{disabled?: boolean; variant?: 'inverse' | undefined}>(
-  {
-    ...canvas.type.levels.subtext.large,
-    paddingLeft: radioLabelDistance,
-  },
-  ({variant}) => (variant === 'inverse' ? {color: colors.frenchVanilla100} : undefined),
-  ({disabled, variant}) =>
-    disabled
-      ? {
-          color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
-          opacity: variant === 'inverse' ? '.4' : '1',
-        }
-      : {cursor: 'pointer'}
-);
-
 export const Radio = createComponent('input')({
   displayName: 'Radio',
   Component: (
@@ -332,13 +313,16 @@ export const Radio = createComponent('input')({
           </RadioBackground>
         </RadioInputWrapper>
         {label && (
-          <RadioLabel htmlFor={inputId} disabled={disabled} variant={variant}>
+          <LabelText
+            paddingLeft={radioLabelDistance}
+            htmlFor={inputId}
+            disabled={disabled}
+            variant={variant}
+          >
             {label}
-          </RadioLabel>
+          </LabelText>
         )}
       </RadioContainer>
     );
   },
 });
-
-export default Radio;

package/radio/lib/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Radio, {RadioProps} from './Radio';
+import {Radio, RadioProps} from './Radio';
 import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
 import {
   ErrorType,
@@ -121,4 +121,4 @@ class RadioGroup extends React.Component<RadioGroupProps> {
 
 RadioGroup.ErrorType = ErrorType;
 
-export default RadioGroup;
+export {RadioGroup};

package/segmented-control/index.ts

@@ -1,5 +1 @@
-import SegmentedControl from './lib/SegmentedControl';
-
-export default SegmentedControl;
-export {SegmentedControl};
 export * from './lib/SegmentedControl';

package/segmented-control/lib/SegmentedControl.tsx

@@ -78,5 +78,3 @@ export const SegmentedControl = createComponent('div')({
     Button: SegmentedControlButton,
   },
 });
-
-export default SegmentedControl;