diff --git a/src/a11y/a11y.js.flow b/src/a11y/a11y.js.flow
deleted file mode 100644
index d434330073..0000000000
--- a/src/a11y/a11y.js.flow
+++ /dev/null
@@ -1,142 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-/* global document cancelIdleCallback requestIdleCallback */
-
-import * as React from 'react';
-import axe from 'axe-core';
-
-import { Layer, TetherBehavior, TETHER_PLACEMENT } from '../layer/index.js';
-import { ParagraphSmall, ParagraphXSmall } from '../typography/index.js';
-import { styled } from '../styles/index.js';
-import { ThemeContext } from '../styles/theme-provider.js';
-
-import type { ViolationPropsT } from './types.js';
-
-function validateNode(node) {
- return new Promise((resolve, reject) => {
- axe.run(node, { reporter: 'v2' }, (error, results) => {
- if (error) reject(error);
- resolve(results.violations);
- });
- });
-}
-
-function segmentViolationsByNode(violations) {
- const nodes = violations.reduce((map, violation) => {
- violation.nodes.forEach((node) => {
- if (!map[node.target]) {
- map[node.target] = [violation];
- } else {
- map[node.target] = map[node.target].push(violation);
- }
- });
- return map;
- }, {});
- return Object.entries(nodes);
-}
-
-const ViolationContainer = styled<{ $top: string, $left: string }>(
- 'div',
- ({ $theme, $top, $left }) => {
- return {
- backgroundColor: $theme.colors.backgroundPrimary,
- boxShadow: $theme.lighting.shadow600,
- position: 'absolute',
- padding: $theme.sizing.scale400,
- top: $top,
- left: $left,
- };
- }
-);
-
-function Violation(props: ViolationPropsT) {
- const [offset, setOffset] = React.useState({ top: 0, left: 0 });
- const [anchor, setAnchor] = React.useState(null);
- const [popper, setPopper] = React.useState(null);
- const [isHovered, setIsHovered] = React.useState(false);
- const theme = React.useContext(ThemeContext);
-
- const handleMouseEnter = () => setIsHovered(true);
- const handleMouseLeave = () => setIsHovered(false);
-
- React.useEffect(() => {
- const node = document.querySelector(props.target);
- if (node) {
- setAnchor(node);
-
- node.setAttribute('style', `border: solid 1px ${theme.colors.borderNegative};`);
-
- node.addEventListener('mouseenter', handleMouseEnter);
- node.addEventListener('mouseleave', handleMouseLeave);
- }
-
- return () => {
- if (node) {
- node.removeEventListener('mouseenter', handleMouseEnter);
- node.removeEventListener('mouseleave', handleMouseLeave);
- }
- };
- }, [props.target]);
-
- if (!isHovered) return null;
-
- return (
-
- setOffset(update.popper)}
- placement={TETHER_PLACEMENT.bottom}
- >
-
- {props.target}
- {props.violations.map((violation, index) => (
- {violation.description}
- ))}
-
-
-
- );
-}
-
-export default function A11y(props: { children: React.Node }) {
- const [violations, setViolations] = React.useState([]);
- const [idleID, setIdleID] = React.useState(null);
- const child = React.useRef(null);
- React.useEffect(() => {
- if (child.current) {
- if (idleID) {
- cancelIdleCallback(idleID);
- setIdleID(null);
- }
-
- const id = requestIdleCallback(() => {
- validateNode(child.current).then(setViolations);
- });
- setIdleID(id);
- }
- }, [props.children]);
-
- const violationsByNode = segmentViolationsByNode(violations);
-
- return (
- <>
- {props.children}
-
- {violationsByNode.map(([node, violations], index) => (
- // flowlint-next-line unclear-type:off
-
- ))}
-
-
- );
-}
diff --git a/src/a11y/index.js.flow b/src/a11y/index.js.flow
deleted file mode 100644
index bc20ff34e1..0000000000
--- a/src/a11y/index.js.flow
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-export { default as Unstable_A11y } from './a11y.js';
diff --git a/src/a11y/types.js.flow b/src/a11y/types.js.flow
deleted file mode 100644
index cbfb1d92de..0000000000
--- a/src/a11y/types.js.flow
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-type NodeT = { target: string };
-type ViolationT = { description: string, nodes: NodeT };
-
-export type ViolationPropsT = {
- target: string,
- violations: Array,
-};
diff --git a/src/accordion/accordion.js.flow b/src/accordion/accordion.js.flow
deleted file mode 100644
index 39c47f1f61..0000000000
--- a/src/accordion/accordion.js.flow
+++ /dev/null
@@ -1,154 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-import * as React from 'react';
-import { getOverrides } from '../helpers/overrides.js';
-import { Root as StyledRoot } from './styled-components.js';
-import { STATE_CHANGE_TYPE } from './constants.js';
-import type { AccordionPropsT, AccordionStateT, StateChangeTypeT } from './types.js';
-
-export default class Accordion extends React.Component {
- static defaultProps: $Shape = {
- accordion: true,
- disabled: false,
- initialState: {
- expanded: [],
- },
- onChange: () => {},
- overrides: {},
- renderAll: false,
- stateReducer: (type, newState) => newState,
- };
-
- state = {
- expanded: [],
- ...this.props.initialState,
- };
-
- itemRefs = [];
-
- //flowlint-next-line unclear-type:off
- onPanelChange(key: React.Key, onChange: () => {}, ...args: Array) {
- let activeKeys = this.state.expanded;
- const { accordion } = this.props;
- if (accordion) {
- activeKeys = activeKeys[0] === key ? [] : [key];
- } else {
- activeKeys = [...activeKeys];
- const index = activeKeys.indexOf(key);
- const wasExpanded = index > -1;
- if (wasExpanded) {
- // remove active state
- activeKeys.splice(index, 1);
- } else {
- activeKeys.push(key);
- }
- }
- const newState = { expanded: activeKeys };
- this.internalSetState(STATE_CHANGE_TYPE.expand, newState);
- // Call individual panel's onChange handler
- if (typeof onChange === 'function') onChange(...args);
- }
-
- internalSetState(type: StateChangeTypeT, changes: AccordionStateT) {
- const { stateReducer, onChange } = this.props;
- const newState = stateReducer(type, changes, this.state);
- this.setState(newState);
- typeof onChange === 'function' && onChange(newState);
- }
-
- handleKeyDown(e: KeyboardEvent) {
- if (this.props.disabled) {
- return;
- }
-
- const itemRefs = this.itemRefs;
-
- const HOME = 36;
- const END = 35;
- const ARROW_UP = 38;
- const ARROW_DOWN = 40;
-
- if (e.keyCode === HOME) {
- e.preventDefault();
- const firstItem = itemRefs[0];
- firstItem.current && firstItem.current.focus();
- }
- if (e.keyCode === END) {
- e.preventDefault();
- const lastItem = itemRefs[itemRefs.length - 1];
- lastItem.current && lastItem.current.focus();
- }
- if (e.keyCode === ARROW_UP) {
- e.preventDefault();
- const activeItemIdx = itemRefs.findIndex((item) => item.current === document.activeElement);
- if (activeItemIdx > 0) {
- const prevItem = itemRefs[activeItemIdx - 1];
- prevItem.current && prevItem.current.focus();
- }
- }
- if (e.keyCode === ARROW_DOWN) {
- e.preventDefault();
- const activeItemIdx = itemRefs.findIndex((item) => item.current === document.activeElement);
- if (activeItemIdx < itemRefs.length - 1) {
- const nextItem = itemRefs[activeItemIdx + 1];
- nextItem.current && nextItem.current.focus();
- }
- }
- }
-
- getItems() {
- const { expanded } = this.state;
- const { accordion, disabled, children, renderAll, overrides } = this.props;
- // flowlint-next-line unclear-type:off
- return React.Children.map(children, (child: any, index) => {
- if (!child) return;
-
- const itemRef = React.createRef();
- this.itemRefs.push(itemRef);
-
- // If there is no key provided use the panel order as a default key
- const key = child.key || String(index);
- let isExpanded = false;
- if (accordion) {
- isExpanded = expanded[0] === key;
- } else {
- isExpanded = expanded.includes(key);
- }
-
- const props = {
- key,
- ref: itemRef,
- expanded: isExpanded || child.props.expanded,
- accordion,
- renderAll,
- overrides: child.props.overrides || overrides,
- disabled: child.props.disabled || disabled,
- onChange: (...args) => this.onPanelChange(key, child.props.onChange, ...args),
- };
- return React.cloneElement(child, props);
- });
- }
-
- render() {
- const { overrides = {} } = this.props;
- const { Root: RootOverride } = overrides;
- const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
- return (
-
- {this.getItems()}
-
- );
- }
-}
diff --git a/src/accordion/constants.js.flow b/src/accordion/constants.js.flow
deleted file mode 100644
index d9c49a49f9..0000000000
--- a/src/accordion/constants.js.flow
+++ /dev/null
@@ -1,11 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-export const STATE_CHANGE_TYPE = {
- expand: 'expand',
-};
diff --git a/src/accordion/index.js.flow b/src/accordion/index.js.flow
deleted file mode 100644
index 9857ca1320..0000000000
--- a/src/accordion/index.js.flow
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-export { default as Accordion } from './accordion.js';
-export { default as Panel } from './panel.js';
-export { default as StatefulPanel } from './stateful-panel.js';
-export { default as StatefulPanelContainer } from './stateful-panel-container.js';
-export { default as StatelessAccordion } from './stateless-accordion.js';
-// Constants
-export { STATE_CHANGE_TYPE } from './constants.js';
-// Styled elements
-export {
- Root as StyledRoot,
- PanelContainer as StyledPanelContainer,
- Header as StyledHeader,
- Content as StyledContent,
- ContentAnimationContainer as StyledContentAnimationContainer,
- ToggleIcon as StyledToggleIcon,
- ToggleIconGroup as StyledToggleIconGroup,
-} from './styled-components.js';
-// Flow
-export type * from './types.js';
diff --git a/src/accordion/locale.js.flow b/src/accordion/locale.js.flow
deleted file mode 100644
index 60458bcec7..0000000000
--- a/src/accordion/locale.js.flow
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-export type AccordionLocaleT = {|
- collapse: string,
- expand: string,
-|};
-
-const locale = {
- collapse: 'Collapse',
- expand: 'Expand',
-};
-
-export default locale;
diff --git a/src/accordion/panel.js.flow b/src/accordion/panel.js.flow
deleted file mode 100644
index 397e0892e6..0000000000
--- a/src/accordion/panel.js.flow
+++ /dev/null
@@ -1,232 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import { LocaleContext } from '../locale/index.js';
-import { getOverrides } from '../helpers/overrides.js';
-import {
- PanelContainer as StyledPanelContainer,
- Header as StyledHeader,
- Content as StyledContent,
- ToggleIcon as StyledToggleIcon,
- ToggleIconGroup as StyledToggleIconGroup,
- ContentAnimationContainer as StyledContentAnimationContainer,
-} from './styled-components.js';
-import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
-
-import type { PanelPropsT } from './types.js';
-
-const Panel = (
- {
- 'aria-controls': ariaControls,
- children,
- disabled = false,
- expanded = false,
- onChange = () => {},
- onClick = () => {},
- onKeyDown = () => {},
- overrides = {},
- title = '',
- renderAll = false,
- }: PanelPropsT,
- ref
-) => {
- const [localState, setLocalState] = React.useState({
- expanded,
- isFocusVisible: false,
- elementHeight: 0,
- animationInProgress: false,
- });
- const handleFocus = React.useCallback(
- (event: SyntheticEvent<>) => {
- if (isFocusVisible(event)) {
- setLocalState({ ...localState, isFocusVisible: true });
- }
- },
- [localState]
- );
- const handleBlur = React.useCallback(
- (event: SyntheticEvent<>) => {
- if (localState.isFocusVisible) {
- setLocalState({ ...localState, isFocusVisible: false });
- }
- },
- [localState]
- );
- const handleClick = React.useCallback(
- (e: Event) => {
- if (disabled) {
- return;
- }
- typeof onChange === 'function' && onChange({ expanded: !expanded });
- typeof onClick === 'function' && onClick(e);
- },
- [expanded, disabled, onChange, onClick]
- );
- const handleKeyDown = React.useCallback(
- (e: KeyboardEvent) => {
- if (disabled) {
- return;
- }
-
- const ENTER = 13;
- const SPACE = 32;
-
- if (e.keyCode === ENTER || e.keyCode === SPACE) {
- typeof onChange === 'function' && onChange({ expanded: !expanded });
- if (e.keyCode === SPACE) {
- e.preventDefault(); // prevent jumping scroll when using Space
- }
- }
- typeof onKeyDown === 'function' && onKeyDown(e);
- },
- [expanded, disabled, onChange, onKeyDown]
- );
- // flowlint-next-line unclear-type:off
- const _animateRef = React.useRef(null);
-
- React.useEffect(() => {
- if (_animateRef.current) {
- const height = _animateRef.current.getBoundingClientRect().height;
- // After the first render, when everything is in the DOM, update the local
- //state to indicate an animation is in progress.
- if (expanded !== localState.expanded) {
- setLocalState({
- ...localState,
- expanded,
- animationInProgress: true,
- });
- } else if (parseInt(localState.elementHeight) !== height) {
- // After the second render (where child elements were added to the Content)
- //the Content height now reflects the true height. This kicks off the actual
- //animation.
- setLocalState({
- ...localState,
- elementHeight: height ? `${height}px` : 0,
- });
- }
- }
- }, [_animateRef.current, expanded, localState.elementHeight, localState.expanded, setLocalState]);
-
- const contentHeight = React.useMemo(() => {
- // When closing, the first render will re-query the content element for the new
- //height and set the height of the animation container from auto to a px value.
- if (!expanded && localState.expanded) {
- const height = _animateRef.current.getBoundingClientRect().height;
- setLocalState({
- ...localState,
- elementHeight: height ? `${height}px` : 0,
- });
- return localState.elementHeight;
- }
- if (!localState.expanded) {
- return 0;
- }
- // When no longer animating, set the height to auto to accommodate dynamic nested components.
- return localState.animationInProgress ? localState.elementHeight : 'auto';
- }, [expanded, localState.expanded, localState.animationInProgress, localState.elementHeight]);
-
- const sharedProps = {
- $disabled: disabled,
- $expanded: expanded,
- $isFocusVisible: localState.isFocusVisible,
- };
-
- const {
- PanelContainer: PanelContainerOverride,
- Header: HeaderOverride,
- Content: ContentOverride,
- ContentAnimationContainer: ContentAnimationContainerOverride,
- ToggleIcon: ToggleIconOverride,
- ToggleIconGroup: ToggleIconGroupOverride,
- } = overrides;
-
- const [PanelContainer, panelContainerProps] = getOverrides(
- PanelContainerOverride,
- StyledPanelContainer
- );
- const [Header, headerProps] = getOverrides(HeaderOverride, StyledHeader);
- const [Content, contentProps] = getOverrides(ContentOverride, StyledContent);
- const [ContentAnimationContainer, contentAnimationProps] = getOverrides(
- ContentAnimationContainerOverride,
- StyledContentAnimationContainer
- );
- const [ToggleIconGroup, toggleIconGroupProps] = getOverrides(
- ToggleIconGroupOverride,
- StyledToggleIconGroup
- );
-
- const [ToggleIcon, toggleIconProps] = getOverrides(ToggleIconOverride, StyledToggleIcon);
-
- return (
-
- {(locale) => (
-
-
- {
- if (localState.animationInProgress) {
- setLocalState({ ...localState, animationInProgress: false });
- }
- }}
- >
-
- {localState.expanded || renderAll || localState.animationInProgress ? children : null}
-
-
-
- )}
-
- );
-};
-
-const ForwardedPanel = React.forwardRef(Panel);
-ForwardedPanel.displayName = 'Panel';
-export default ForwardedPanel;
diff --git a/src/accordion/stateful-panel-container.js.flow b/src/accordion/stateful-panel-container.js.flow
deleted file mode 100644
index ab62a22548..0000000000
--- a/src/accordion/stateful-panel-container.js.flow
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import { STATE_CHANGE_TYPE } from './constants.js';
-import type {
- PanelStateT,
- StatefulPanelContainerPropsT,
- PanelStateReducerT,
- StateChangeTypeT,
- OnChangeHandlerT,
-} from './types.js';
-
-const defaultStateReducer: PanelStateReducerT = (type, nextState) => nextState;
-
-class StatefulPanelContainer extends React.Component {
- static defaultProps = {
- initialState: { expanded: false },
- stateReducer: defaultStateReducer,
- onChange: () => {},
- };
-
- state = {
- expanded: false,
- ...this.props.initialState,
- };
-
- onChange: OnChangeHandlerT = () => {
- if (typeof this.props.onChange === 'function') {
- this.props.onChange({ expanded: !this.state.expanded });
- }
- this.internalSetState(STATE_CHANGE_TYPE.expand, {
- expanded: !this.state.expanded,
- });
- };
-
- internalSetState(type: StateChangeTypeT, changes: PanelStateT) {
- const { stateReducer } = this.props;
- this.setState((prevState) => (stateReducer ? stateReducer(type, changes, prevState) : changes));
- }
-
- render() {
- const { children, initialState, stateReducer, ...restProps } = this.props;
-
- return this.props.children({
- ...restProps,
- ...this.state,
- onChange: this.onChange,
- });
- }
-}
-
-export default StatefulPanelContainer;
diff --git a/src/accordion/stateful-panel.js.flow b/src/accordion/stateful-panel.js.flow
deleted file mode 100644
index 721e968cda..0000000000
--- a/src/accordion/stateful-panel.js.flow
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import StatefulContainer from './stateful-panel-container.js';
-import Panel from './panel.js';
-import type { StatefulPanelPropsT } from './types.js';
-
-export default function StatefulPanel(props: StatefulPanelPropsT) {
- const { children, ...restProps } = props;
- return (
-
- {(componentProps) => {children}}
-
- );
-}
diff --git a/src/accordion/stateless-accordion.js.flow b/src/accordion/stateless-accordion.js.flow
deleted file mode 100644
index 41a69fac13..0000000000
--- a/src/accordion/stateless-accordion.js.flow
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import { getOverrides } from '../helpers/overrides.js';
-import { Root as StyledRoot } from './styled-components.js';
-import type { StatelessAccordionPropsT } from './types.js';
-
-function StatelessAccordion({
- accordion = true,
- children,
- disabled,
- expanded,
- onChange,
- overrides = {},
- renderAll,
-}: StatelessAccordionPropsT) {
- const { Root: RootOverrides, ...PanelOverrides } = overrides;
- const [Root, rootProps] = getOverrides(RootOverrides, StyledRoot);
- return (
-
- {React.Children.map(children, (child, index) => {
- const key = child.key || String(index);
- return React.cloneElement(child, {
- disabled: child.props.disabled || disabled,
- expanded: expanded.includes(key),
- key,
- onChange:
- // Don't bother constructing the wrapper function if no one is listening
- onChange && typeof onChange === 'function'
- ? () => {
- let next;
- if (accordion) {
- if (expanded.includes(key)) {
- next = [];
- } else {
- next = [key];
- }
- } else {
- if (expanded.includes(key)) {
- next = expanded.filter((k) => k !== key);
- } else {
- next = [...expanded, key];
- }
- }
- onChange({ key, expanded: next });
- }
- : onChange,
- overrides: child.props.overrides || PanelOverrides,
- renderAll,
- });
- })}
-
- );
-}
-
-export default StatelessAccordion;
diff --git a/src/accordion/styled-components.js.flow b/src/accordion/styled-components.js.flow
deleted file mode 100644
index 59b998ddcc..0000000000
--- a/src/accordion/styled-components.js.flow
+++ /dev/null
@@ -1,131 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import { styled } from '../styles/index.js';
-import { getSvgStyles } from '../icon/styled-components.js';
-import type { SharedStylePropsArgT } from './types.js';
-
-/**
- * Main component container element
- */
-export const Root = styled('ul', {
- listStyleType: 'none',
- marginBottom: 0,
- marginTop: 0,
- paddingLeft: 0,
- paddingRight: 0,
- width: '100%',
-});
-
-export const PanelContainer = styled('li', (props) => {
- const {
- $expanded,
- $theme: { colors },
- } = props;
- return {
- listStyleType: 'none',
- width: '100%',
- borderBottomWidth: '1px',
- borderBottomStyle: 'solid',
- borderBottomColor: $expanded ? colors.borderOpaque : colors.borderOpaque,
- };
-});
-
-export const Header = styled('div', (props) => {
- const {
- $disabled,
- $isFocusVisible,
- $theme: { colors, sizing, typography },
- } = props;
- return {
- ...typography.font350,
- color: colors.contentPrimary,
- cursor: $disabled ? 'not-allowed' : 'pointer',
- backgroundColor: colors.listHeaderFill,
- paddingTop: sizing.scale600,
- paddingBottom: sizing.scale600,
- paddingLeft: sizing.scale700,
- paddingRight: sizing.scale700,
- marginTop: 0,
- marginBottom: 0,
- marginLeft: 0,
- marginRight: 0,
- display: 'flex',
- alignItems: 'center',
- outline: $isFocusVisible ? `3px solid ${colors.borderAccent}` : 'none',
- outlineOffset: '-3px',
- justifyContent: 'space-between',
- ':hover': {
- color: colors.contentPrimary,
- },
- };
-});
-
-export const ToggleIcon = styled('svg', (props) => {
- const { $theme, $disabled, $color } = props;
- return {
- ...getSvgStyles(props),
- flexShrink: 0,
- color: $color || $theme.colors.contentPrimary,
- cursor: $disabled ? 'not-allowed' : 'pointer',
- };
-});
-
-export const ToggleIconGroup = styled('g', (props) => {
- const { $theme, $expanded } = props;
- return {
- transform: $expanded ? 'rotate(0)' : 'rotate(-90deg)',
- transformOrigin: 'center',
- transitionProperty: 'transform',
- transitionDuration: $theme.animation.timing500,
- transitionTimingFunction: $theme.animation.easeOutQuinticCurve,
- };
-});
-
-export const Content = styled('div', (props) => {
- const {
- $theme: { animation, colors, sizing, typography },
- $expanded,
- } = props;
- return {
- ...typography.font200,
- backgroundColor: colors.listBodyFill,
- color: colors.contentPrimary,
- paddingTop: sizing.scale800,
- paddingBottom: sizing.scale1000,
- paddingLeft: sizing.scale800,
- paddingRight: sizing.scale800,
- marginTop: 0,
- marginBottom: 0,
- marginLeft: 0,
- marginRight: 0,
- boxSizing: 'border-box',
- overflow: 'hidden',
- opacity: $expanded ? 1 : 0,
- visibility: $expanded ? 'visible' : 'hidden',
- transitionProperty: 'opacity,visibility',
- transitionDuration: animation.timing500,
- transitionDelay: animation.timing200,
- transitionTimingFunction: animation.easeOutQuinticCurve,
- };
-});
-
-export const ContentAnimationContainer = styled<
- { $height: string | number } & SharedStylePropsArgT
->('div', (props) => {
- const {
- $height,
- $theme: { animation },
- } = props;
- return {
- height: `${$height}`,
- overflow: 'hidden',
- transitionProperty: 'height',
- transitionDuration: animation.timing500,
- transitionTimingFunction: animation.easeOutQuinticCurve,
- };
-});
diff --git a/src/accordion/types.js.flow b/src/accordion/types.js.flow
deleted file mode 100644
index 21fdb65a0b..0000000000
--- a/src/accordion/types.js.flow
+++ /dev/null
@@ -1,178 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-/* eslint-disable flowtype/generic-spacing */
-import * as React from 'react';
-import type { OverrideT } from '../helpers/overrides.js';
-import { STATE_CHANGE_TYPE } from './constants.js';
-
-export type AccordionStateT = {
- expanded: Array,
-};
-
-export type PanelStateT = {
- expanded: boolean,
-};
-
-export type StateChangeTypeT = $Keys;
-
-export type StateReducerT = (
- stateChangeType: StateChangeTypeT,
- nextState: AccordionStateT,
- currentState: AccordionStateT
-) => AccordionStateT;
-
-export type PanelStateReducerT = (
- stateChangeType: StateChangeTypeT,
- nextState: PanelStateT,
- currentState: PanelStateT
-) => PanelStateT;
-
-export type AccordionOverridesT = {
- Content?: OverrideT,
- ContentAnimationContainer?: OverrideT,
- Header?: OverrideT,
- PanelContainer?: OverrideT,
- Root?: OverrideT,
- ToggleIcon?: OverrideT,
- ToggleIconGroup?: OverrideT,
-};
-
-export type PanelOverridesT = {
- PanelContainer?: OverrideT,
- Header?: OverrideT,
- ToggleIcon?: OverrideT,
- ToggleIconGroup?: OverrideT,
- Content?: OverrideT,
- ContentAnimationContainer?: OverrideT,
-};
-
-export type OnChangeHandlerT = ({ expanded: boolean }) => mixed;
-
-export type AccordionOnChangeHandlerT = ({
- expanded: Array,
-}) => mixed;
-
-//flowlint-next-line unclear-type:off
-type ChildrenT = React.ChildrenArray>;
-
-export type AccordionPropsT = {
- /** Determines how many panels may be expanded at a time. If set to
- * true it will collapse a current panel when a new panel is expanded.
- * If set to false more than one panel may be expanded at a time. */
- accordion?: boolean,
- /** Accordion expandable items. See Panel API below for reference. */
- children: ChildrenT,
- /** If set to true all its children panels will be disabled from toggling. */
- disabled?: boolean,
- initialState?: AccordionStateT,
- /** Handler called each time a panel is toggled. expanded prop is an array
- * of Panel keys that are currently expanded. */
- onChange?: AccordionOnChangeHandlerT,
- overrides?: AccordionOverridesT,
- /** Handler called each time the component state changes.
- * Used to override default state-change functionality. */
- stateReducer: StateReducerT,
- /**
- * Allows users to render all child content whether a panel is expanded or not
- * for SEO purposed
- */
- renderAll?: boolean,
-};
-
-export type StatelessAccordionOnChangeHandlerT = ({
- expanded: Array,
- key: React.Key,
-}) => mixed;
-
-export type StatelessAccordionPropsT = {
- /** Determines how many panels may be expanded at a time. If set to
- * true it will collapse a current panel when a new panel is expanded.
- * If set to false more than one panel may be expanded at a time. */
- accordion?: boolean,
- /** Accordion expandable items. See Panel API below for reference. */
- children: ChildrenT,
- /** If set to true all its children panels will be disabled from toggling. */
- disabled?: boolean,
- /** List of Panel keys which are expanded. */
- expanded: Array,
- /** Handler called each time a panel is toggled. */
- onChange?: StatelessAccordionOnChangeHandlerT,
- overrides?: AccordionOverridesT & PanelOverridesT,
- /**
- * Allows users to render all child content whether a panel is expanded or not
- * for SEO purposed
- */
- renderPanelContent?: boolean,
- /**
- * Allows users to render all child content whether a panel is expanded or not
- * for SEO purposed
- */
- renderAll?: boolean,
-};
-
-type SharedPanelPropsT = {
- /** The content visible when Panel is expanded. */
- children: React.Node,
- /** Defaults to the disabled value provided by the parent Accordion component. */
- disabled?: boolean,
- /** Id for a panel, when provided populates aria-controls
- * attribute for panel button and content
- * */
- 'aria-controls'?: string,
- /** The key of a Panel. Used to maintain list of expanded panels.
- * Must be unique across children of the Accordion. */
- key?: React.Key,
- /** Handler for individual Panel change events. */
- onChange?: OnChangeHandlerT,
- /** Handler for the Header's click events. */
- onClick?: (e: Event) => mixed,
- /** Handler for the Header's keyDown events. */
- onKeyDown?: (e: KeyboardEvent) => mixed,
- overrides?: PanelOverridesT,
- /** The title of an accordion panel. */
- title?: React.Node,
- /**
- * Allows users to render all child content whether a panel is expanded or not
- * for SEO purposed
- */
- renderPanelContent?: boolean,
- /**
- * Allows users to render all child content whether a panel is expanded or not
- * for SEO purposed
- */
- renderAll?: boolean,
-};
-
-export type PanelPropsT = SharedPanelPropsT & {
- /** Defines if the panel is expanded. If set to true the panel is rendered expanded. */
- expanded?: boolean,
-};
-
-// Props for panel stateful container
-type SharedStatefulPanelContainerPropsT = {
- /** Initial state of a stateful panel component.
- * The expanded prop indicates if the panel is initially expanded.
- * If set to true the panel will be expanded initially */
- initialState?: PanelStateT,
- onChange?: OnChangeHandlerT,
- stateReducer?: PanelStateReducerT,
-};
-export type StatefulPanelContainerPropsT = SharedStatefulPanelContainerPropsT & {
- children: (props: $Diff) => React.Node,
-};
-
-// Props for stateful panel
-export type StatefulPanelPropsT = SharedStatefulPanelContainerPropsT & SharedPanelPropsT;
-
-export type SharedStylePropsArgT = {
- $color?: string,
- $disabled: ?boolean,
- $expanded?: ?boolean,
- $size?: string | number,
- $isFocusVisible: boolean,
-};
diff --git a/src/app-nav-bar/app-nav-bar.js.flow b/src/app-nav-bar/app-nav-bar.js.flow
deleted file mode 100644
index 1046ee63d8..0000000000
--- a/src/app-nav-bar/app-nav-bar.js.flow
+++ /dev/null
@@ -1,238 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-import * as React from 'react';
-
-import { getOverrides } from '../helpers/overrides.js';
-import { useStyletron } from '../styles/index.js';
-import { isFocusVisible } from '../utils/focusVisible.js';
-
-import { KIND, POSITION } from './constants.js';
-import MobileNav from './mobile-menu.js';
-import UserMenu from './user-menu.js';
-import {
- StyledRoot,
- StyledSpacing,
- StyledPrimaryMenuContainer,
- StyledSecondaryMenuContainer,
- StyledAppName,
- StyledMainMenuItem,
- StyledDesktopMenuContainer,
- StyledDesktopMenu,
-} from './styled-components.js';
-import type { AppNavBarPropsT } from './types.js';
-import { defaultMapItemToNode, mapItemsActive } from './utils.js';
-
-function MainMenuItem(props) {
- const { item, kind = KIND.primary, mapItemToNode, onSelect, overrides = {} } = props;
- const [focusVisible, setFocusVisible] = React.useState(false);
-
- function handleFocus(event) {
- if (isFocusVisible(event)) {
- setFocusVisible(true);
- }
- }
-
- function handleBlur(event) {
- if (focusVisible) {
- setFocusVisible(false);
- }
- }
-
- function handleClick(event) {
- if (onSelect) {
- onSelect(item);
- }
- }
-
- function handleKeyDown(event) {
- if (event.key === 'Enter' && onSelect) {
- onSelect(item);
- }
- }
-
- const [MainMenuItemElement, mainMenuItemElementProps] = getOverrides(
- overrides.MainMenuItem,
- StyledMainMenuItem
- );
-
- return (
-
- {mapItemToNode(item)}
-
- );
-}
-
-function SecondaryMenu(props) {
- const { items = [], mapItemToNode, onSelect, overrides = {} } = props;
-
- const [SecondaryMenuContainer, secondaryMenuContainerProps] = getOverrides(
- overrides.SecondaryMenuContainer,
- StyledSecondaryMenuContainer
- );
-
- return (
-
- {items.map((item, index) => (
- // Replace with a menu item renderer
-
- ))}
-
- );
-}
-
-export default function AppNavBar(props: AppNavBarPropsT) {
- const [css, theme] = useStyletron();
- const {
- title,
- mapItemToNode = defaultMapItemToNode,
- onMainItemSelect = (item) => {},
- onUserItemSelect = (item) => {},
- overrides = {},
- userItems = [],
- username,
- usernameSubtitle,
- userImgUrl,
- } = props;
-
- const mainItems = React.useMemo(() => {
- if (props.isMainItemActive) {
- return mapItemsActive(props.mainItems || [], props.isMainItemActive);
- }
- return props.mainItems || [];
- }, [props.mainItems, props.isMainItemActive]);
-
- const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
- const [Spacing, spacingProps] = getOverrides(overrides.Spacing, StyledSpacing);
- const [AppName, appNameProps] = getOverrides(overrides.AppName, StyledAppName);
- const [PrimaryMenuContainer, primaryMenuContainerProps] = getOverrides(
- overrides.PrimaryMenuContainer,
- StyledPrimaryMenuContainer
- );
- const [DesktopMenuContainer, desktopMenuContainerProps] = getOverrides(
- overrides.DesktopMenuContainer,
- StyledDesktopMenuContainer
- );
- const [DesktopMenu, desktopMenuProps] = getOverrides(overrides.DesktopMenu, StyledDesktopMenu);
-
- let secondaryMenu;
- let desktopSubNavPosition = POSITION.horizontal;
- let mobileSubNavPosition = POSITION.vertical;
-
- return (
-
- {/* Mobile Nav Experience */}
-
-
- {mainItems.length || userItems.length ? : null}
- {title}
-
-
- {secondaryMenu && mobileSubNavPosition === POSITION.horizontal && (
-
- )}
-
-
-
- {/* Replace with a Logo renderer */}
- {title}
-
-
- {mainItems.map((item, index) => {
- // For an active top level menu get the secondary navigation and its positioning
- if (item.active && item.children && item.children.length) {
- secondaryMenu = item.children;
- if (item.navPosition) {
- desktopSubNavPosition = item.navPosition.desktop || desktopSubNavPosition;
- mobileSubNavPosition = item.navPosition.mobile || mobileSubNavPosition;
- }
- }
- return (
-
- );
- })}
-
-
- {userItems.length ? (
-
- ) : null}
-
-
-
- {secondaryMenu && desktopSubNavPosition === POSITION.horizontal && (
-
- )}
-
{childrenWithSeparators}
-
- )}
-
- );
-}
-
-Breadcrumbs.defaultProps = {
- overrides: {},
- showTrailingSeparator: false,
-};
-
-export default Breadcrumbs;
diff --git a/src/breadcrumbs/index.js.flow b/src/breadcrumbs/index.js.flow
deleted file mode 100644
index e7e397312c..0000000000
--- a/src/breadcrumbs/index.js.flow
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-
-// @flow
-
-export { default as Breadcrumbs } from './breadcrumbs.js';
-export * from './styled-components.js';
-export type * from './types.js';
diff --git a/src/breadcrumbs/locale.js.flow b/src/breadcrumbs/locale.js.flow
deleted file mode 100644
index 4282470b03..0000000000
--- a/src/breadcrumbs/locale.js.flow
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-export type BreadcrumbLocaleT = {|
- ariaLabel: string,
-|};
-
-const locale = {
- ariaLabel: 'Breadcrumbs navigation',
-};
-
-export default locale;
diff --git a/src/breadcrumbs/styled-components.js.flow b/src/breadcrumbs/styled-components.js.flow
deleted file mode 100644
index 46671681f5..0000000000
--- a/src/breadcrumbs/styled-components.js.flow
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-
-// @flow
-
-import { styled } from '../styles/index.js';
-
-export const StyledRoot = styled<{}>('nav', ({ $theme }) => {
- return {
- color: $theme.colors.breadcrumbsText,
- ...$theme.typography.font350,
- };
-});
-
-export const StyledList = styled<{}>('ol', ({ $theme }) => {
- return {
- listStyleType: 'none',
- margin: 0,
- padding: 0,
- ...$theme.typography.font350,
- };
-});
-
-export const StyledListItem = styled<{}>('li', ({ $theme }) => {
- return {
- display: 'inline-block',
- ...$theme.typography.font350,
- };
-});
-
-export const StyledSeparator = styled<{}>('div', ({ $theme }) => {
- return {
- display: 'inline-block',
- color: $theme.colors.breadcrumbsSeparatorFill,
- marginLeft: $theme.sizing.scale300,
- marginRight: $theme.sizing.scale300,
- verticalAlign: 'middle',
- };
-});
diff --git a/src/breadcrumbs/types.js.flow b/src/breadcrumbs/types.js.flow
deleted file mode 100644
index aa1e1e0abb..0000000000
--- a/src/breadcrumbs/types.js.flow
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-
-// @flow
-
-import type { Node } from 'react';
-
-import type { OverrideT } from '../helpers/overrides.js';
-
-export type OverridesT = {
- Root?: OverrideT,
- Separator?: OverrideT,
- List?: OverrideT,
- ListItem?: OverrideT,
- Icon?: OverrideT,
-};
-
-export type BreadcrumbsPropsT = {|
- children?: Node,
- overrides?: OverridesT,
- ariaLabel?: string,
- 'aria-label'?: string,
- /** Whether to show a trailing separator after the last breadcrumb. */
- showTrailingSeparator?: boolean,
-|};
diff --git a/src/button-dock/index.js.flow b/src/button-dock/index.js.flow
deleted file mode 100644
index c53ae3f776..0000000000
--- a/src/button-dock/index.js.flow
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import type { OverrideT } from '../helpers/overrides.js';
-import { type StyletronComponent } from 'styletron-react';
-
-export type ButtonDockOverridesT = {
- Root?: OverrideT,
- ActionContainer?: OverrideT,
- ActionSubContainer?: OverrideT,
-};
-
-export type ButtonDockPropsT = {
- primaryAction: React.Node,
- secondaryActions?: [React.Node] | [React.Node, React.Node],
- dismissiveAction?: React.Node,
- topAccessory?: React.Node,
- overrides?: ButtonDockOverridesT,
-};
-
-declare export var StyledRoot: StyletronComponent<'div', {}>;
-declare export var StyledActionContainer: StyletronComponent<'div', {}>;
-declare export var StyledActionSubContainer: StyletronComponent<
- 'div',
- { $reverseWhenWide: boolean }
->;
-
-declare export var ButtonDock: React.ComponentType;
diff --git a/src/button-docked/index.js.flow b/src/button-docked/index.js.flow
deleted file mode 100644
index 89c5a2deb8..0000000000
--- a/src/button-docked/index.js.flow
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import type { OverrideT } from '../helpers/overrides.js';
-import { type StyletronComponent } from 'styletron-react';
-
-export type ButtonDockedOverridesT = {
- Root?: OverrideT,
- ActionContainer?: OverrideT,
- ActionSubContainer?: OverrideT,
-};
-
-export type ButtonDockedPropsT = {
- primaryAction: React.Node,
- secondaryActions?: [React.Node] | [React.Node, React.Node],
- dismissiveAction?: React.Node,
- topAccessory?: React.Node,
- overrides?: ButtonDockedOverridesT,
-};
-
-declare export var StyledRoot: StyletronComponent<'div', {}>;
-declare export var StyledActionContainer: StyletronComponent<'div', {}>;
-declare export var StyledActionSubContainer: StyletronComponent<
- 'div',
- { $reverseWhenWide: boolean }
->;
-
-declare export var ButtonDocked: React.ComponentType;
diff --git a/src/button-group/button-group.js.flow b/src/button-group/button-group.js.flow
deleted file mode 100644
index 5a1f4ba6fa..0000000000
--- a/src/button-group/button-group.js.flow
+++ /dev/null
@@ -1,161 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-import * as React from 'react';
-
-import { KIND, SIZE, SHAPE } from '../button/index.js';
-import { MODE } from './constants.js';
-import { getOverrides } from '../helpers/overrides.js';
-import { LocaleContext } from '../locale/index.js';
-
-import { StyledRoot } from './styled-components.js';
-import type { PropsT } from './types.js';
-
-function isIndexSelected(selected, index) {
- if (!Array.isArray(selected) && typeof selected !== 'number') {
- return false;
- }
-
- if (Array.isArray(selected)) {
- return selected.includes(index);
- }
-
- return selected === index;
-}
-
-export default class ButtonGroup extends React.Component {
- childRefs: // flowlint-next-line unclear-type:off
- { [key: number]: React.ElementRef } = {};
- static defaultProps = {
- disabled: false,
- onClick: () => {},
- shape: SHAPE.default,
- size: SIZE.default,
- kind: KIND.secondary,
- };
- render() {
- const {
- overrides = {},
- mode = MODE.checkbox,
- children,
- selected,
- disabled,
- onClick,
- kind,
- shape,
- size,
- } = this.props;
- const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
- const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
- const isRadio = mode === MODE.radio;
-
- const numItems = React.Children.count(children);
-
- return (
-
- {(locale) => (
-
- {React.Children.map(children, (child, index) => {
- if (!React.isValidElement(child)) {
- return null;
- }
-
- const isSelected = child.props.isSelected
- ? child.props.isSelected
- : isIndexSelected(selected, index);
-
- if (isRadio) {
- this.childRefs[index] = React.createRef();
- }
- return React.cloneElement(child, {
- disabled: disabled || child.props.disabled,
- isSelected,
- ref: isRadio ? this.childRefs[index] : undefined,
- tabIndex:
- !isRadio ||
- isSelected ||
- (isRadio && (!selected || selected === -1) && index === 0)
- ? 0
- : -1,
- onKeyDown: (e) => {
- if (!isRadio) return;
- const value = Number(selected) ? Number(selected) : 0;
- if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
- e.preventDefault && e.preventDefault();
- const prevIndex = value - 1 < 0 ? numItems - 1 : value - 1;
- onClick && onClick(e, prevIndex);
- this.childRefs[prevIndex].current && this.childRefs[prevIndex].current.focus();
- }
- if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
- e.preventDefault && e.preventDefault();
- const nextIndex = value + 1 > numItems - 1 ? 0 : value + 1;
- onClick && onClick(e, nextIndex);
- this.childRefs[nextIndex].current && this.childRefs[nextIndex].current.focus();
- }
- },
- kind,
- onClick: (event) => {
- if (disabled) {
- return;
- }
-
- if (child.props.onClick) {
- child.props.onClick(event);
- }
-
- if (onClick) {
- onClick(event, index);
- }
- },
- shape,
- size,
- overrides: {
- BaseButton: {
- style: ({ $theme }) => {
- // Even though baseui's buttons have square corners, some applications override to
- // rounded. Maintaining corner radius in this circumstance is ideal to avoid further
- // customization.
- if (children.length === 1) {
- return {};
- }
-
- if (shape !== SHAPE.default) {
- return {
- marginLeft: $theme.sizing.scale100,
- marginRight: $theme.sizing.scale100,
- };
- }
-
- return {
- marginLeft: '0.5px',
- marginRight: '0.5px',
- };
- },
- props: {
- 'aria-checked': isSelected,
- role: isRadio ? 'radio' : 'checkbox',
- },
- },
-
- ...child.props.overrides,
- },
- });
- })}
-
- )}
-
- );
- }
-}
diff --git a/src/button-group/constants.js.flow b/src/button-group/constants.js.flow
deleted file mode 100644
index 25b2e557d7..0000000000
--- a/src/button-group/constants.js.flow
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-export const MODE = Object.freeze({
- radio: 'radio',
- checkbox: 'checkbox',
-});
-
-export const STATE_CHANGE_TYPE = Object.freeze({
- change: 'change',
-});
diff --git a/src/button-group/index.js.flow b/src/button-group/index.js.flow
deleted file mode 100644
index 2599349c8e..0000000000
--- a/src/button-group/index.js.flow
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-export { default as ButtonGroup } from './button-group.js';
-export { default as StatefulButtonGroup } from './stateful-button-group.js';
-export { default as StatefulContainer } from './stateful-container.js';
-
-// Constants
-export { SIZE, SHAPE } from '../button/constants.js';
-export { MODE, STATE_CHANGE_TYPE } from './constants.js';
-
-// Styled elements
-export { StyledRoot } from './styled-components.js';
-
-// Types
-export type * from './types.js';
diff --git a/src/button-group/locale.js.flow b/src/button-group/locale.js.flow
deleted file mode 100644
index 00e3f3a5f3..0000000000
--- a/src/button-group/locale.js.flow
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-export type ButtonGroupLocaleT = {|
- ariaLabel: string,
-|};
-
-const locale = {
- ariaLabel: 'button group',
-};
-
-export default locale;
diff --git a/src/button-group/stateful-button-group.js.flow b/src/button-group/stateful-button-group.js.flow
deleted file mode 100644
index bbbb309e58..0000000000
--- a/src/button-group/stateful-button-group.js.flow
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-import * as React from 'react';
-
-import ButtonGroup from './button-group.js';
-import StatefulContainer from './stateful-container.js';
-import type { StatefulPropsT } from './types.js';
-
-export default function StatefulButtonGroup(props: StatefulPropsT) {
- const { children, initialState, ...restProps } = props;
- return (
-
- {({ ...containerProps }) => (
- //$FlowFixMe
- {props.children}
- )}
-
- );
-}
diff --git a/src/button-group/stateful-container.js.flow b/src/button-group/stateful-container.js.flow
deleted file mode 100644
index a43dc17f57..0000000000
--- a/src/button-group/stateful-container.js.flow
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-import * as React from 'react';
-
-import { MODE, STATE_CHANGE_TYPE } from './constants.js';
-
-import type { StatefulContainerPropsT, StateT } from './types.js';
-
-// handles the case where selected = 0
-function isSelectedDefined(selected) {
- return Array.isArray(selected) || typeof selected === 'number';
-}
-
-function defaultStateReducer(
- type: $Values,
- nextState: StateT,
- currentState: StateT
-) {
- return nextState;
-}
-
-export default class StatefulContainer extends React.Component {
- static defaultProps = {
- initialState: { selected: [] },
- stateReducer: defaultStateReducer,
- };
-
- constructor(props: StatefulContainerPropsT) {
- super(props);
-
- const { initialState = {} } = props;
- const { selected = [] } = initialState;
-
- this.state = {
- selected: isSelectedDefined(selected) ? [].concat(selected) : [],
- };
- }
-
- changeState = (nextState: StateT) => {
- if (this.props.stateReducer) {
- this.setState(this.props.stateReducer(STATE_CHANGE_TYPE.change, nextState, this.state));
- } else {
- this.setState(nextState);
- }
- };
-
- onClick = (event: SyntheticEvent, index: number) => {
- if (this.props.mode === MODE.radio) {
- if (this.state.selected.length === 0 || this.state.selected[0] !== index) {
- this.changeState({ selected: [index] });
- } else {
- this.changeState({ selected: [] });
- }
- }
-
- if (this.props.mode === MODE.checkbox) {
- if (!this.state.selected.includes(index)) {
- this.changeState({ selected: [...this.state.selected, index] });
- } else {
- this.changeState({
- selected: this.state.selected.filter((value) => value !== index),
- });
- }
- }
-
- if (this.props.onClick) {
- this.props.onClick(event, index);
- }
- };
-
- render() {
- const { initialState, stateReducer, ...props } = this.props;
- return this.props.children({
- ...props,
- onClick: this.onClick,
- selected: this.state.selected,
- });
- }
-}
diff --git a/src/button-group/styled-components.js.flow b/src/button-group/styled-components.js.flow
deleted file mode 100644
index 8ab93ac8ae..0000000000
--- a/src/button-group/styled-components.js.flow
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-import { styled } from '../styles/index.js';
-import { SHAPE } from '../button/index.js';
-
-export const StyledRoot = styled<{ $shape: string, $length: number }>(
- 'div',
- ({ $shape, $length, $theme }) => {
- const margin =
- $length === 1
- ? undefined
- : $shape !== SHAPE.default
- ? `-${$theme.sizing.scale100}`
- : '-0.5px';
- return {
- display: 'flex',
- marginLeft: margin,
- marginRight: margin,
- };
- }
-);
diff --git a/src/button-group/types.js.flow b/src/button-group/types.js.flow
deleted file mode 100644
index 5d090a02b4..0000000000
--- a/src/button-group/types.js.flow
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-import * as React from 'react';
-
-import { SIZE, SHAPE, KIND } from '../button/index.js';
-import type { OverrideT } from '../helpers/overrides.js';
-import { MODE, STATE_CHANGE_TYPE } from './constants.js';
-
-// button-group
-export type PropsT = {|
- /** Accessible label. */
- ariaLabel?: string,
- 'aria-label'?: string,
- /** Set of more than one `Button` components */
- children: Array,
- /** Defines if the button group is disabled. */
- disabled?: boolean,
- /**
- * Use the `mode` prop to render toggleable Buttons:
- * the value `radio` will cause Buttons to behave like radio buttons,
- * the value `checkbox` will cause Buttons to behave like checkboxes.
- */
- mode?: $Values,
- /**
- * Called with click events from children. If a child button has its
- * own click handler, the local handler will be called first, then
- * this handler will trigger.
- */
- onClick?: ClickHandlerT,
- overrides?: OverridesT,
- /**
- * Index or array of indices of the selected Button(s).
- * Primarily for use with controlled components with a `mode` prop defined.
- */
- selected?: number | Array,
- /** Defines the shape of the buttons in the button group. */
- shape?: $Values,
- /** Defines the size of the buttons in the button group. */
- size?: $Values,
- /** Defines the `kind` of the buttons in the group */
- kind?: $Values,
-|};
-
-type OverridesT = {
- Root?: OverrideT,
-};
-
-// stateful-group
-// eslint-disable-next-line flowtype/generic-spacing
-export type StatefulPropsT = $Diff<
- {|
- ...PropsT,
- initialState?: { selected: number | Array },
- stateReducer?: StateReducerT,
- |},
- { selected: mixed } // excluded from type definition
->;
-
-// stateful-container
-export type StatefulContainerPropsT = {|
- ...StatefulPropsT,
- children: (props: {
- ...$Diff,
- onClick: ClickHandlerT,
- selected: number | Array,
- }) => React.Node,
-|};
-
-export type StateT = {
- selected: Array,
-};
-
-export type StateReducerT = (
- stateType: $Values,
- nextState: StateT,
- currentState: StateT
-) => StateT;
-
-// general
-type ClickHandlerT = (event: SyntheticEvent, index: number) => mixed;
diff --git a/src/button-timed/index.js.flow b/src/button-timed/index.js.flow
deleted file mode 100644
index 5433f84b0b..0000000000
--- a/src/button-timed/index.js.flow
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import type { OverrideT } from '../helpers/overrides.js';
-import { type StyletronComponent } from 'styletron-react';
-import type { CustomColorsT } from '../button';
-
-export type OverridesT = {
- BaseButtonTimed?: OverrideT,
- TimerContainer?: OverrideT,
- Root?: OverrideT,
- StartEnhancer?: OverrideT,
- EndEnhancer?: OverrideT,
- LoadingSpinnerContainer?: OverrideT,
- LoadingSpinner?: OverrideT,
-};
-
-export type ButtonTimedPropsT = {
- initialTime: number,
- onClick: (a?: SyntheticEvent) => mixed,
- overrides?: OverridesT,
- paused?: boolean,
- children?: React$Node,
- colors?: CustomColorsT,
- disabled?: boolean,
- /** A helper rendered at the end of the button. */
- // flowlint-next-line unclear-type:off
- endEnhancer?: React.Node | React.AbstractComponent,
- /** Show loading button style and spinner. */
- isLoading?: boolean,
- /** Indicates that the button is selected */
- isSelected?: boolean,
- /** A helper rendered at the start of the button. */
- // flowlint-next-line unclear-type:off
- startEnhancer?: React.Node | React.AbstractComponent,
- type?: 'submit' | 'reset' | 'button',
-};
-
-export {
- StyledStartEnhancer,
- StyledEndEnhancer,
- StyledLoadingSpinner,
- StyledLoadingSpinnerContainer,
-} from '../button';
-declare export var StyledBaseButtonTimed: StyletronComponent<'div', {}>;
-declare export var StyledTimerContainer: StyletronComponent<'div', {}>;
-
-declare export var ButtonTimed: React.ComponentType;
diff --git a/src/button/button-internals.js.flow b/src/button/button-internals.js.flow
deleted file mode 100644
index 66ed0129f2..0000000000
--- a/src/button/button-internals.js.flow
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import * as ReactIs from 'react-is';
-import {
- StartEnhancer as StyledStartEnhancer,
- EndEnhancer as StyledEndEnhancer,
-} from './styled-components.js';
-import { getSharedProps } from './utils.js';
-import { getOverrides } from '../helpers/overrides.js';
-
-import type { ButtonPropsT } from './types.js';
-
-function RenderEnhancer(props) {
- const { Enhancer, ...restProps } = props;
- if (typeof Enhancer === 'string') {
- return Enhancer;
- }
- if (ReactIs.isValidElementType(Enhancer)) {
- // $FlowFixMe
- return ;
- }
- // $FlowFixMe
- return Enhancer;
-}
-
-export default function ButtonInternals(props: ButtonPropsT) {
- const { children, overrides = {}, startEnhancer, endEnhancer } = props;
- const [StartEnhancer, startEnhancerProps] = getOverrides(
- overrides.StartEnhancer,
- StyledStartEnhancer
- );
- const [EndEnhancer, endEnhancerProps] = getOverrides(overrides.EndEnhancer, StyledEndEnhancer);
- const sharedProps = getSharedProps(props);
- return (
-
- {startEnhancer !== null && startEnhancer !== undefined && (
-
-
-
- )}
- {children}
- {endEnhancer !== null && endEnhancer !== undefined && (
-
-
-
- )}
-
- );
-}
diff --git a/src/button/button.js.flow b/src/button/button.js.flow
deleted file mode 100644
index 05fd705bd1..0000000000
--- a/src/button/button.js.flow
+++ /dev/null
@@ -1,131 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import {
- BaseButton as StyledBaseButton,
- LoadingSpinner as StyledLoadingSpinner,
- LoadingSpinnerContainer as StyledLoadingSpinnerContainer,
-} from './styled-components.js';
-import { getSharedProps } from './utils.js';
-import ButtonInternals from './button-internals.js';
-import { defaultProps } from './default-props.js';
-import { getOverrides } from '../helpers/overrides.js';
-import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
-
-import type { ButtonPropsT, SharedStylePropsT, ReactRefT } from './types.js';
-
-class Button extends React.Component<
- ButtonPropsT & { forwardedRef: ReactRefT },
- { isFocusVisible: boolean }
-> {
- static defaultProps = defaultProps;
- state = { isFocusVisible: false };
-
- internalOnClick = (...args) => {
- const { isLoading, onClick } = this.props;
- if (isLoading) {
- args[0].preventDefault();
- return;
- }
- onClick && onClick(...args);
- };
-
- handleFocus = (event: SyntheticEvent<>) => {
- if (isFocusVisible(event)) {
- this.setState({ isFocusVisible: true });
- }
- };
-
- handleBlur = (event: SyntheticEvent<>) => {
- if (this.state.isFocusVisible !== false) {
- this.setState({ isFocusVisible: false });
- }
- };
-
- render() {
- const {
- overrides = {},
- size,
- kind,
- shape,
- isLoading,
- isSelected,
- // Removing from restProps
- startEnhancer,
- endEnhancer,
- children,
- forwardedRef,
- colors,
- ...restProps
- } = this.props;
- // Get overrides
- const [BaseButton, baseButtonProps] = getOverrides(
- // adding both (1) BaseButton and (2) Root
- // (1) because it's a Button under the hood
- // (2) because we want consistency with the rest of the components
- overrides.BaseButton || overrides.Root,
- StyledBaseButton
- );
- const [LoadingSpinner, loadingSpinnerProps] = getOverrides(
- overrides.LoadingSpinner,
- StyledLoadingSpinner
- );
- const [LoadingSpinnerContainer, loadingSpinnerContainerProps] = getOverrides(
- overrides.LoadingSpinnerContainer,
- StyledLoadingSpinnerContainer
- );
- const sharedProps: SharedStylePropsT = {
- ...getSharedProps(this.props),
- $isFocusVisible: this.state.isFocusVisible,
- };
- return (
-
- {isLoading ? (
-
- {/* This is not meant to be overridable by users */}
-
-
-
-
-
-
-
- ) : (
-
- )}
-
- );
- }
-}
-
-const ForwardedButton = React.forwardRef(
- //$FlowFixMe
- (props: ButtonPropsT, ref) =>
-);
-ForwardedButton.displayName = 'Button';
-export default ForwardedButton;
diff --git a/src/button/constants.js.flow b/src/button/constants.js.flow
deleted file mode 100644
index d1c680f532..0000000000
--- a/src/button/constants.js.flow
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-export const KIND = {
- primary: 'primary',
- secondary: 'secondary',
- tertiary: 'tertiary',
-};
-
-export const SHAPE = {
- default: 'default',
- pill: 'pill',
- round: 'round',
- circle: 'circle',
- square: 'square',
-};
-
-export const SIZE = {
- mini: 'mini',
- default: 'default',
- compact: 'compact',
- large: 'large',
-};
diff --git a/src/button/default-props.js.flow b/src/button/default-props.js.flow
deleted file mode 100644
index 8abbb132a8..0000000000
--- a/src/button/default-props.js.flow
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-import { KIND, SHAPE, SIZE } from './constants.js';
-
-export const defaultProps = {
- disabled: false,
- isLoading: false,
- isSelected: false,
- kind: KIND.primary,
- overrides: {},
- shape: SHAPE.default,
- size: SIZE.default,
-};
diff --git a/src/button/index.js.flow b/src/button/index.js.flow
deleted file mode 100644
index a3562a42ab..0000000000
--- a/src/button/index.js.flow
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-export { default as Button } from './button.js';
-// Constants
-export { KIND, SIZE, SHAPE } from './constants.js';
-// Styled elements
-export {
- BaseButton as StyledBaseButton,
- StartEnhancer as StyledStartEnhancer,
- EndEnhancer as StyledEndEnhancer,
- LoadingSpinner as StyledLoadingSpinner,
- LoadingSpinnerContainer as StyledLoadingSpinnerContainer,
-} from './styled-components.js';
-// Types
-export type * from './types.js';
diff --git a/src/button/styled-components.js.flow b/src/button/styled-components.js.flow
deleted file mode 100644
index 67c307ff4f..0000000000
--- a/src/button/styled-components.js.flow
+++ /dev/null
@@ -1,424 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import { styled } from '../styles/index.js';
-import { KIND, SIZE, SHAPE } from './constants.js';
-import type { SharedStylePropsT } from './types.js';
-import type { FontT } from '../themes/types.js';
-
-export const BaseButton = styled(
- 'button',
- ({
- $theme,
- $size,
- $colors,
- $kind,
- $shape,
- $isLoading,
- $isSelected,
- $disabled,
- $isFocusVisible,
- //$FlowFixMe
- }) => ({
- display: 'inline-flex',
- // need to maintain button width while showing loading spinner
- flexDirection: $isLoading ? 'column' : 'row',
- alignItems: 'center',
- justifyContent: 'center',
- borderLeftWidth: 0,
- borderTopWidth: 0,
- borderRightWidth: 0,
- borderBottomWidth: 0,
- borderLeftStyle: 'none',
- borderTopStyle: 'none',
- borderRightStyle: 'none',
- borderBottomStyle: 'none',
- outline: 'none',
- boxShadow: $isFocusVisible ? `inset 0 0 0 3px ${$theme.colors.borderAccent}` : 'none',
- textDecoration: 'none',
- WebkitAppearance: 'none',
- transitionProperty: 'background',
- transitionDuration: $theme.animation.timing200,
- transitionTimingFunction: $theme.animation.linearCurve,
- cursor: 'pointer',
- ':disabled': {
- cursor: 'not-allowed',
- ...getDisabledStyles({ $theme, $kind, $disabled, $isSelected }),
- },
- marginLeft: 0,
- marginTop: 0,
- marginRight: 0,
- marginBottom: 0,
- ...getFontStyles({ $theme, $size }),
- ...getBorderRadiiStyles({ $theme, $size, $shape }),
- ...getPaddingStyles({ $theme, $size, $shape }),
- ...getColorStyles({
- $theme,
- $colors,
- $kind,
- $isLoading,
- $isSelected,
- $disabled,
- }),
- ...getShapeStyles({ $shape, $size }),
- })
-);
-
-export const EndEnhancer = styled('div', ({ $theme }) => {
- const marginDirection: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
- return {
- display: 'flex',
- [marginDirection]: $theme.sizing.scale300,
- };
-});
-
-export const StartEnhancer = styled('div', ({ $theme }) => {
- const marginDirection: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
- return {
- display: 'flex',
- [marginDirection]: $theme.sizing.scale300,
- };
-});
-
-export const LoadingSpinnerContainer = styled('div', ({ $theme, $size }) => {
- // we don't have a theming value for this
- let margins = '3px';
- if ($size === SIZE.mini || $size === SIZE.compact) {
- margins = $theme.sizing.scale0;
- }
- if ($size === SIZE.large) {
- margins = $theme.sizing.scale100;
- }
-
- return {
- lineHeight: 0,
- position: 'static',
- marginBottom: margins,
- marginTop: margins,
- };
-});
-
-export const LoadingSpinner = styled(
- 'span',
- ({ $theme, $kind, $disabled, $size }) => {
- const { foreground, background } = getLoadingSpinnerColors({
- $theme,
- $kind,
- $disabled,
- });
-
- let dimension = $theme.sizing.scale550;
- if ($size === SIZE.mini || $size === SIZE.compact) {
- dimension = $theme.sizing.scale500;
- }
- if ($size === SIZE.large) {
- dimension = $theme.sizing.scale600;
- }
-
- return {
- height: dimension,
- width: dimension,
- borderTopLeftRadius: '50%',
- borderTopRightRadius: '50%',
- borderBottomRightRadius: '50%',
- borderBottomLeftRadius: '50%',
- borderLeftStyle: 'solid',
- borderTopStyle: 'solid',
- borderRightStyle: 'solid',
- borderBottomStyle: 'solid',
- borderLeftWidth: $theme.sizing.scale0,
- borderTopWidth: $theme.sizing.scale0,
- borderRightWidth: $theme.sizing.scale0,
- borderBottomWidth: $theme.sizing.scale0,
- borderTopColor: foreground,
- borderLeftColor: background,
- borderBottomColor: background,
- borderRightColor: background,
- boxSizing: 'border-box',
- display: 'inline-block',
- animationDuration: $theme.animation.timing700,
- animationTimingFunction: 'linear',
- animationIterationCount: 'infinite',
- animationName: {
- to: {
- transform: 'rotate(360deg)',
- },
- from: {
- transform: 'rotate(0deg)',
- },
- },
- };
- }
-);
-
-function getLoadingSpinnerColors({ $theme, $kind, $disabled }) {
- if ($disabled) {
- return {
- foreground: $theme.colors.buttonDisabledSpinnerForeground,
- background: $theme.colors.buttonDisabledSpinnerBackground,
- };
- }
- switch ($kind) {
- case KIND.secondary: {
- return {
- foreground: $theme.colors.buttonSecondarySpinnerForeground,
- background: $theme.colors.buttonSecondarySpinnerBackground,
- };
- }
- case KIND.tertiary: {
- return {
- foreground: $theme.colors.buttonTertiarySpinnerForeground,
- background: $theme.colors.buttonTertiarySpinnerBackground,
- };
- }
- case KIND.primary:
- default: {
- return {
- foreground: $theme.colors.buttonPrimarySpinnerForeground,
- background: $theme.colors.buttonPrimarySpinnerBackground,
- };
- }
- }
-}
-
-function getBorderRadiiStyles({ $theme, $size, $shape }) {
- let value = $theme.borders.buttonBorderRadius;
-
- if ($shape === SHAPE.pill) {
- if ($size === SIZE.compact) {
- value = '30px';
- } else if ($size === SIZE.large) {
- value = '42px';
- } else {
- value = '38px';
- }
- } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
- value = '50%';
- } else if ($size === SIZE.mini) {
- value = $theme.borders.buttonBorderRadiusMini;
- }
-
- return {
- borderTopRightRadius: value,
- borderBottomRightRadius: value,
- borderTopLeftRadius: value,
- borderBottomLeftRadius: value,
- };
-}
-
-function getFontStyles({ $theme, $size }): FontT {
- switch ($size) {
- case SIZE.mini:
- return $theme.typography.font150;
- case SIZE.compact:
- return $theme.typography.font250;
- case SIZE.large:
- return $theme.typography.font450;
- default:
- return $theme.typography.font350;
- }
-}
-
-function getDisabledStyles({ $theme, $kind, $isSelected, $disabled }) {
- if ($disabled && $isSelected) {
- if ($kind === KIND.primary || $kind === KIND.secondary) {
- return {
- color: $theme.colors.buttonDisabledActiveText,
- backgroundColor: $theme.colors.buttonDisabledActiveFill,
- };
- } else if ($kind === KIND.tertiary) {
- return {
- backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
- color: $theme.colors.buttonTertiaryDisabledActiveText,
- };
- }
- }
-
- return {
- backgroundColor: $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
- color: $theme.colors.buttonDisabledText,
- };
-}
-
-function getPaddingStyles({ $theme, $size, $shape }) {
- const iconShape = $shape === SHAPE.square || $shape === SHAPE.circle || $shape === SHAPE.round;
- switch ($size) {
- case SIZE.mini:
- return {
- paddingTop: $theme.sizing.scale200,
- paddingBottom: $theme.sizing.scale200,
- paddingLeft: iconShape ? $theme.sizing.scale200 : $theme.sizing.scale300,
- paddingRight: iconShape ? $theme.sizing.scale200 : $theme.sizing.scale300,
- };
- case SIZE.compact:
- return {
- paddingTop: $theme.sizing.scale400,
- paddingBottom: $theme.sizing.scale400,
- paddingLeft: iconShape ? $theme.sizing.scale400 : $theme.sizing.scale500,
- paddingRight: iconShape ? $theme.sizing.scale400 : $theme.sizing.scale500,
- };
- case SIZE.large:
- return {
- paddingTop: $theme.sizing.scale600,
- paddingBottom: $theme.sizing.scale600,
- paddingLeft: iconShape ? $theme.sizing.scale600 : $theme.sizing.scale700,
- paddingRight: iconShape ? $theme.sizing.scale600 : $theme.sizing.scale700,
- };
- default:
- return {
- paddingTop: $theme.sizing.scale550,
- paddingBottom: $theme.sizing.scale550,
- paddingLeft: iconShape ? $theme.sizing.scale550 : $theme.sizing.scale600,
- paddingRight: iconShape ? $theme.sizing.scale550 : $theme.sizing.scale600,
- };
- }
-}
-
-type ColorStylesT = {|
- color?: string,
- backgroundColor?: string,
- ':hover'?: {
- boxShadow?: string,
- backgroundColor?: string,
- },
- ':focus'?: {
- boxShadow?: string,
- backgroundColor?: string,
- },
- ':active'?: {
- boxShadow?: string,
- backgroundColor?: string,
- },
-|};
-function getColorStyles({
- $theme,
- $colors,
- $isLoading,
- $isSelected,
- $kind,
- $disabled,
-}): ColorStylesT {
- if ($colors) {
- return {
- color: $colors.color,
- backgroundColor: $colors.backgroundColor,
- ':hover': {
- boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)',
- },
- ':active': {
- boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)',
- },
- };
- }
-
- if ($disabled) {
- return Object.freeze({});
- }
- switch ($kind) {
- case KIND.primary:
- if ($isSelected) {
- return {
- color: $theme.colors.buttonPrimarySelectedText,
- backgroundColor: $theme.colors.buttonPrimarySelectedFill,
- };
- }
- return {
- color: $theme.colors.buttonPrimaryText,
- backgroundColor: $theme.colors.buttonPrimaryFill,
- ':hover': {
- backgroundColor: $isLoading
- ? $theme.colors.buttonPrimaryActive
- : $theme.colors.buttonPrimaryHover,
- },
- ':active': {
- backgroundColor: $theme.colors.buttonPrimaryActive,
- },
- };
- case KIND.secondary:
- if ($isSelected) {
- return {
- color: $theme.colors.buttonPrimaryText,
- backgroundColor: $theme.colors.buttonPrimaryFill,
- };
- }
- return {
- color: $theme.colors.buttonSecondaryText,
- backgroundColor: $theme.colors.buttonSecondaryFill,
- ':hover': {
- backgroundColor: $isLoading
- ? $theme.colors.buttonSecondaryActive
- : $theme.colors.buttonSecondaryHover,
- },
- ':active': {
- backgroundColor: $theme.colors.buttonSecondaryActive,
- },
- };
- case KIND.tertiary:
- if ($isSelected) {
- return {
- color: $theme.colors.buttonTertiarySelectedText,
- backgroundColor: $theme.colors.buttonTertiarySelectedFill,
- };
- }
- return {
- color: $theme.colors.buttonTertiaryText,
- backgroundColor: $theme.colors.buttonTertiaryFill,
- ':hover': {
- backgroundColor: $isLoading
- ? $theme.colors.buttonTertiaryActive
- : $theme.colors.buttonTertiaryHover,
- },
- ':active': {
- backgroundColor: $theme.colors.buttonTertiaryActive,
- },
- };
- default:
- return Object.freeze({});
- }
-}
-
-function getShapeStyles({ $shape, $size }): {
- height?: string,
- width?: string,
- paddingTop?: number,
- paddingBottom?: number,
- paddingLeft?: number,
- paddingRight?: number,
-} {
- if ($shape === SHAPE.circle || $shape === SHAPE.square) {
- let height, width;
- switch ($size) {
- case SIZE.mini:
- height = '28px';
- width = '28px';
- break;
- case SIZE.compact:
- height = '36px';
- width = '36px';
- break;
- case SIZE.large:
- height = '56px';
- width = '56px';
- break;
- case SIZE.default:
- default:
- height = '48px';
- width = '48px';
- break;
- }
- return {
- height,
- width,
- paddingTop: 0,
- paddingBottom: 0,
- paddingLeft: 0,
- paddingRight: 0,
- };
- } else {
- return {};
- }
-}
diff --git a/src/button/types.js.flow b/src/button/types.js.flow
deleted file mode 100644
index c1e0dfe2dd..0000000000
--- a/src/button/types.js.flow
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-
-import { KIND, SIZE, SHAPE } from './constants.js';
-import type { OverrideT } from '../helpers/overrides.js';
-
-export type ReactRefT = { current: null | T } | {| current: null | T |};
-
-export type OverridesT = {
- Root?: OverrideT,
- BaseButton?: OverrideT,
- StartEnhancer?: OverrideT,
- EndEnhancer?: OverrideT,
- LoadingSpinnerContainer?: OverrideT,
- LoadingSpinner?: OverrideT,
-};
-
-export type CustomColorsT = {|
- backgroundColor: string,
- color: string,
-|};
-
-export type ButtonPropsT = {
- children?: React$Node,
- colors?: CustomColorsT,
- disabled?: boolean,
- /** A helper rendered at the end of the button. */
- // flowlint-next-line unclear-type:off
- endEnhancer?: React.Node | React.AbstractComponent,
- /** Show loading button style and spinner. */
- isLoading?: boolean,
- /** Indicates that the button is selected */
- isSelected?: boolean,
- /** Defines the kind (purpose) of a button */
- kind?: $Keys,
- onClick?: (SyntheticEvent) => mixed,
- overrides?: OverridesT,
- /** Defines the shape of the button */
- shape?: $Keys,
- /** Defines the size of the button */
- size?: $Keys,
- /** A helper rendered at the start of the button. */
- // flowlint-next-line unclear-type:off
- startEnhancer?: React.Node | React.AbstractComponent,
- type?: 'submit' | 'reset' | 'button',
-};
-
-export type SharedStylePropsT = {
- $colors?: CustomColorsT,
- $kind?: $Keys,
- $isSelected?: boolean,
- $shape?: $Keys,
- $size?: $Keys,
- $isLoading?: boolean,
- $disabled?: boolean,
- $isFocusVisible: boolean,
-};
diff --git a/src/button/utils.js.flow b/src/button/utils.js.flow
deleted file mode 100644
index 1bff2b0b49..0000000000
--- a/src/button/utils.js.flow
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import type { ButtonPropsT, SharedStylePropsT } from './types.js';
-
-export function getSharedProps({
- colors,
- disabled,
- isLoading,
- isSelected,
- kind,
- shape,
- size,
-}: ButtonPropsT): $Shape {
- return {
- $colors: colors,
- $disabled: disabled,
- $isLoading: isLoading,
- $isSelected: isSelected,
- $kind: kind,
- $shape: shape,
- $size: size,
- };
-}
diff --git a/src/card/card.js.flow b/src/card/card.js.flow
deleted file mode 100644
index 0a90519cd3..0000000000
--- a/src/card/card.js.flow
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-
-/* @flow */
-
-import * as React from 'react';
-import { getOverride, getOverrideProps } from '../helpers/overrides.js';
-import { LevelContext } from '../heading/index.js';
-import {
- Action as StyledAction,
- Body as StyledBody,
- Contents as StyledContents,
- HeaderImage as StyledHeaderImage,
- Root as StyledRoot,
- Thumbnail as StyledThumbnail,
- Title as StyledTitle,
-} from './styled-components.js';
-
-import type { CardsPropsT } from './types.js';
-
-export function hasThumbnail(props: { +thumbnail?: string }) {
- return !!props.thumbnail;
-}
-
-const SemanticTitle = ({ children, ...restProps }) => {
- const levels = ['', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-
- return (
-
- {(level) => (
-
- {children}
-
- )}
-
- );
-};
-
-function Card(props: CardsPropsT) {
- const {
- action,
- children,
- hasThumbnail: hasThumbnailProp = hasThumbnail,
- headerImage,
- thumbnail: thumbnailSrc,
- title,
- overrides,
- ...restProps
- } = props;
-
- const {
- Action: ActionOverride,
- Body: BodyOverride,
- Contents: ContentsOverride,
- HeaderImage: HeaderImageOverride,
- Root: RootOverride,
- Thumbnail: ThumbnailOverride,
- Title: TitleOverride,
- } = overrides;
-
- const Action = getOverride(ActionOverride) || StyledAction;
- const Body = getOverride(BodyOverride) || StyledBody;
- const Contents = getOverride(ContentsOverride) || StyledContents;
- const HeaderImage = getOverride(HeaderImageOverride) || StyledHeaderImage;
- const Root = getOverride(RootOverride) || StyledRoot;
- const Thumbnail = getOverride(ThumbnailOverride) || StyledThumbnail;
- const Title = getOverride(TitleOverride) || SemanticTitle;
-
- const headerImageProps = typeof headerImage === 'string' ? { src: headerImage } : headerImage;
-
- const $hasThumbnail = hasThumbnail(props);
- return (
-
- {headerImage && (
-
- )}
-
- {thumbnailSrc && }
- {title && (
-
- {title}
-
- )}
- {children}
- {action && {action}}
-
-
- );
-}
-
-Card.defaultProps = {
- action: null,
- children: null,
- hasThumbnail,
- overrides: {},
-};
-
-export default Card;
diff --git a/src/card/index.js.flow b/src/card/index.js.flow
deleted file mode 100644
index 6f26c21cdb..0000000000
--- a/src/card/index.js.flow
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-
-/* @flow */
-
-export { default as Card, hasThumbnail } from './card.js';
-export {
- Action as StyledAction,
- Body as StyledBody,
- Contents as StyledContents,
- HeaderImage as StyledHeaderImage,
- Thumbnail as StyledThumbnail,
- Title as StyledTitle,
- Root as StyledRoot,
- Root as StyledWrapper,
-} from './styled-components.js';
-export type * from './types.js';
diff --git a/src/card/styled-components.js.flow b/src/card/styled-components.js.flow
deleted file mode 100644
index 0662043a9d..0000000000
--- a/src/card/styled-components.js.flow
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-
-/* @flow */
-
-import { styled, expandBorderStyles } from '../styles/index.js';
-
-export const Action = styled<{}>('div', ({ $theme }) => ({
- ...$theme.typography.LabelMedium,
-}));
-
-export const Body = styled<{}>('div', ({ $theme }) => ({
- marginBottom: $theme.sizing.scale600,
- color: $theme.colors.contentPrimary,
- ...$theme.typography.ParagraphMedium,
-}));
-
-export const Contents = styled<{}>('div', ({ $theme }) => ({
- marginLeft: $theme.sizing.scale600,
- marginTop: $theme.sizing.scale600,
- marginRight: $theme.sizing.scale600,
- marginBottom: $theme.sizing.scale600,
-}));
-
-export const HeaderImage = styled<{}>('img', ({ $theme }) => ({
- borderTopLeftRadius: $theme.borders.surfaceBorderRadius,
- borderTopRightRadius: $theme.borders.surfaceBorderRadius,
- objectFit: 'contain',
- maxWidth: '100%',
-}));
-
-// by using the section tag, we can keep the h1 for the title
-// https://html.spec.whatwg.org/multipage/sections.html#headings-and-sections
-export const Root = styled<{}>('section', ({ $theme }) => ({
- borderLeftWidth: '2px',
- borderTopWidth: '2px',
- borderRightWidth: '2px',
- borderBottomWidth: '2px',
- borderLeftStyle: 'solid',
- borderTopStyle: 'solid',
- borderRightStyle: 'solid',
- borderBottomStyle: 'solid',
- borderLeftColor: $theme.colors.borderOpaque,
- borderRightColor: $theme.colors.borderOpaque,
- borderTopColor: $theme.colors.borderOpaque,
- borderBottomColor: $theme.colors.borderOpaque,
- borderTopLeftRadius: $theme.borders.radius400,
- borderTopRightRadius: $theme.borders.radius400,
- borderBottomLeftRadius: $theme.borders.radius400,
- borderBottomRightRadius: $theme.borders.radius400,
- backgroundColor: $theme.colors.backgroundPrimary,
- overflow: 'hidden',
-}));
-
-export const Thumbnail = styled<{}>('img', ({ $theme }) => ({
- float: 'right',
- height: $theme.sizing.scale2400,
- width: $theme.sizing.scale2400,
- objectFit: 'cover',
- borderTopLeftRadius: $theme.borders.surfaceBorderRadius,
- borderTopRightRadius: $theme.borders.surfaceBorderRadius,
- borderBottomLeftRadius: $theme.borders.surfaceBorderRadius,
- borderBottomRightRadius: $theme.borders.surfaceBorderRadius,
- ...expandBorderStyles($theme.borders.border200),
- margin: `0 0 ${$theme.sizing.scale500} ${$theme.sizing.scale500}`,
-}));
-
-export const Title = styled<{}>('h1', ({ $theme }) => ({
- ...$theme.typography.HeadingSmall,
- color: $theme.colors.contentPrimary,
- marginLeft: 0,
- marginTop: 0,
- marginRight: 0,
- marginBottom: $theme.sizing.scale500,
- paddingLeft: 0,
- paddingTop: 0,
- paddingRight: 0,
- paddingBottom: 0,
-}));
diff --git a/src/card/types.js.flow b/src/card/types.js.flow
deleted file mode 100644
index 48f7b8356b..0000000000
--- a/src/card/types.js.flow
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import type { Node } from 'react';
-import type { OverrideT } from '../helpers/overrides.js';
-
-export type CardComponentsT = {
- Action?: OverrideT,
- Body?: OverrideT,
- Contents?: OverrideT,
- HeaderImage?: OverrideT,
- Root?: OverrideT,
- Thumbnail?: OverrideT,
- Title?: OverrideT,
-};
-
-export type ImagePropsT = {
- alt?: string,
- complete?: boolean,
- crossOrigin?: string,
- currentSrc?: string,
- height?: number,
- decode?: Promise,
- isMap?: boolean,
- naturalHeight?: number,
- naturalWidth?: number,
- sizes?: string,
- src?: string,
- srcset?: string,
- useMap?: string,
- width?: number,
-};
-
-export type CardsPropsT = {
- /** Contents to be rendered at the bottom of the Card. Used to organize UI which enables user action. */
- +action?: Node,
- /** Content to be rendered within the Card body. */
- +children?: Node,
- /** Function that takes Card props and returns a boolean that represents if a thumbnail will be rendered. */
- +hasThumbnail?: ({ +thumbnail?: string }) => boolean,
- /** Image to be positioned at the top of the Card. Can be a string representing the img src or an object with img attrs */
- +headerImage?: string | ImagePropsT,
- +overrides: CardComponentsT,
- /** Image src that by default is rendered to the side of children content. */
- +thumbnail?: string,
- /** Content to render above the body content. */
- +title?: Node,
-};
diff --git a/src/checkbox/checkbox.js.flow b/src/checkbox/checkbox.js.flow
deleted file mode 100644
index 03ce5d1a74..0000000000
--- a/src/checkbox/checkbox.js.flow
+++ /dev/null
@@ -1,206 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import { getOverride, getOverrideProps } from '../helpers/overrides.js';
-import type { PropsT, DefaultPropsT, StatelessStateT } from './types.js';
-import {
- Checkmark as StyledCheckmark,
- Input as StyledInput,
- Label as StyledLabel,
- Root as StyledRoot,
- Toggle as StyledToggle,
- ToggleTrack as StyledToggleTrack,
-} from './styled-components.js';
-import { STYLE_TYPE } from './constants.js';
-import { isFocusVisible } from '../utils/focusVisible.js';
-
-const stopPropagation = (e) => e.stopPropagation();
-
-class StatelessCheckbox extends React.Component {
- static defaultProps: DefaultPropsT = {
- overrides: {},
- checked: false,
- containsInteractiveElement: false,
- disabled: false,
- autoFocus: false,
- isIndeterminate: false,
- inputRef: React.createRef(),
- error: false,
- checkmarkType: STYLE_TYPE.default,
- onChange: () => {},
- onMouseEnter: () => {},
- onMouseLeave: () => {},
- onMouseDown: () => {},
- onMouseUp: () => {},
- onFocus: () => {},
- onBlur: () => {},
- };
-
- state = {
- isFocused: this.props.autoFocus || false,
- isFocusVisible: false,
- isHovered: false,
- isActive: false,
- };
-
- componentDidMount() {
- const { autoFocus, inputRef } = this.props;
- if (autoFocus && inputRef.current) {
- inputRef.current.focus();
- }
- }
-
- onMouseEnter = (e: SyntheticInputEvent) => {
- this.setState({ isHovered: true });
- this.props.onMouseEnter(e);
- };
-
- onMouseLeave = (e: SyntheticInputEvent) => {
- this.setState({ isHovered: false, isActive: false });
- this.props.onMouseLeave(e);
- };
-
- onMouseDown = (e: SyntheticInputEvent) => {
- this.setState({ isActive: true });
- this.props.onMouseDown(e);
- };
-
- onMouseUp = (e: SyntheticInputEvent) => {
- this.setState({ isActive: false });
- this.props.onMouseUp(e);
- };
-
- onFocus = (e: SyntheticInputEvent) => {
- this.setState({ isFocused: true });
- this.props.onFocus(e);
- if (isFocusVisible(e)) {
- this.setState({ isFocusVisible: true });
- }
- };
-
- onBlur = (e: SyntheticInputEvent) => {
- this.setState({ isFocused: false });
- this.props.onBlur(e);
- if (this.state.isFocusVisible !== false) {
- this.setState({ isFocusVisible: false });
- }
- };
-
- render() {
- const {
- overrides = {},
- onChange,
- labelPlacement = this.props.checkmarkType === STYLE_TYPE.toggle ? 'left' : 'right',
- inputRef,
- isIndeterminate,
- error,
- disabled,
- value,
- name,
- checked,
- children,
- required,
- title,
- } = this.props;
-
- const {
- Root: RootOverride,
- Checkmark: CheckmarkOverride,
- Label: LabelOverride,
- Input: InputOverride,
- Toggle: ToggleOverride,
- ToggleTrack: ToggleTrackOverride,
- } = overrides;
-
- const Root = getOverride(RootOverride) || StyledRoot;
- const Checkmark = getOverride(CheckmarkOverride) || StyledCheckmark;
- const Label = getOverride(LabelOverride) || StyledLabel;
- const Input = getOverride(InputOverride) || StyledInput;
- const Toggle = getOverride(ToggleOverride) || StyledToggle;
- const ToggleTrack = getOverride(ToggleTrackOverride) || StyledToggleTrack;
-
- const inputEvents = {
- onChange,
- onFocus: this.onFocus,
- onBlur: this.onBlur,
- };
- const mouseEvents = {
- onMouseEnter: this.onMouseEnter,
- onMouseLeave: this.onMouseLeave,
- onMouseDown: this.onMouseDown,
- onMouseUp: this.onMouseUp,
- };
- const sharedProps = {
- $isFocused: this.state.isFocused,
- $isFocusVisible: this.state.isFocusVisible,
- $isHovered: this.state.isHovered,
- $isActive: this.state.isActive,
- $error: error,
- $checked: checked,
- $isIndeterminate: isIndeterminate,
- $required: required,
- $disabled: disabled,
- $value: value,
- };
-
- const labelComp = children && (
-
- );
-
- return (
-
- {(labelPlacement === 'top' || labelPlacement === 'left') && labelComp}
- {this.props.checkmarkType === STYLE_TYPE.toggle ? (
-
-
-
- ) : (
-
- )}
-
- {(labelPlacement === 'bottom' || labelPlacement === 'right') && labelComp}
-
- );
- }
-}
-
-export default StatelessCheckbox;
diff --git a/src/checkbox/constants.js.flow b/src/checkbox/constants.js.flow
deleted file mode 100644
index 708809949d..0000000000
--- a/src/checkbox/constants.js.flow
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-/* eslint-disable import/prefer-default-export */
-
-export const STATE_TYPE = {
- change: 'CHANGE',
-};
-
-export const STYLE_TYPE = Object.freeze({
- default: 'default',
- toggle: 'toggle',
- // maintaining key with aliased value to assist in transition to v11 but will be removed soon after release
- toggle_round: 'toggle',
-});
-
-export const LABEL_PLACEMENT = Object.freeze({
- top: 'top',
- right: 'right',
- bottom: 'bottom',
- left: 'left',
-});
-
-/* eslint-enable import/prefer-default-export */
diff --git a/src/checkbox/index.js.flow b/src/checkbox/index.js.flow
deleted file mode 100644
index 0361c9e795..0000000000
--- a/src/checkbox/index.js.flow
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-export { default as StatefulCheckbox } from './stateful-checkbox.js';
-export { default as StatefulContainer } from './stateful-checkbox-container.js';
-export { default as Checkbox } from './checkbox.js';
-// Styled elements
-export {
- Root as StyledRoot,
- Checkmark as StyledCheckmark,
- Label as StyledLabel,
- Input as StyledInput,
- Toggle as StyledToggle,
- ToggleTrack as StyledToggleTrack,
-} from './styled-components.js';
-
-export { STATE_TYPE, STYLE_TYPE, LABEL_PLACEMENT } from './constants.js';
-
-// Flow
-export type * from './types.js';
diff --git a/src/checkbox/stateful-checkbox-container.js.flow b/src/checkbox/stateful-checkbox-container.js.flow
deleted file mode 100644
index 8457ce3679..0000000000
--- a/src/checkbox/stateful-checkbox-container.js.flow
+++ /dev/null
@@ -1,100 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-import * as React from 'react';
-import { STATE_TYPE } from './constants.js';
-import type {
- StatefulContainerPropsT,
- StateReducerT,
- DefaultStatefulPropsT,
- StateT,
-} from './types.js';
-
-const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
-
-class StatefulCheckboxContainer extends React.Component {
- static defaultProps: DefaultStatefulPropsT = {
- initialState: {
- checked: false,
- isIndeterminate: false,
- },
- stateReducer: defaultStateReducer,
- onChange: () => {},
- onMouseEnter: () => {},
- onMouseLeave: () => {},
- onFocus: () => {},
- onBlur: () => {},
- };
-
- constructor(props: StatefulContainerPropsT) {
- super(props);
- const { initialState } = this.props;
- this.state = {
- ...initialState,
- };
- }
-
- onChange = (e: SyntheticInputEvent) => {
- this.stateReducer(STATE_TYPE.change, e);
- const { onChange } = this.props;
- onChange && onChange(e);
- };
-
- onMouseEnter = (e: SyntheticInputEvent) => {
- const { onMouseEnter } = this.props;
- onMouseEnter && onMouseEnter(e);
- };
-
- onMouseLeave = (e: SyntheticInputEvent) => {
- const { onMouseLeave } = this.props;
- onMouseLeave && onMouseLeave(e);
- };
-
- onFocus = (e: SyntheticInputEvent) => {
- const { onFocus } = this.props;
- onFocus && onFocus(e);
- };
-
- onBlur = (e: SyntheticInputEvent) => {
- const { onBlur } = this.props;
- onBlur && onBlur(e);
- };
-
- stateReducer = (type: string, e: SyntheticInputEvent) => {
- let nextState = {};
- const { stateReducer } = this.props;
- switch (type) {
- case STATE_TYPE.change:
- nextState = { checked: e.target.checked };
- break;
- }
- const newState = stateReducer(type, nextState, this.state, e);
- this.setState(newState);
- };
-
- render() {
- const {
- children = (childProps: {}) => null,
- initialState,
- stateReducer,
- ...restProps
- } = this.props;
- const { onChange, onMouseEnter, onMouseLeave, onFocus, onBlur } = this;
- return children({
- ...restProps,
- checked: this.state.checked,
- isIndeterminate: this.state.isIndeterminate,
- onChange,
- onMouseEnter,
- onMouseLeave,
- onFocus,
- onBlur,
- });
- }
-}
-
-export default StatefulCheckboxContainer;
diff --git a/src/checkbox/stateful-checkbox.js.flow b/src/checkbox/stateful-checkbox.js.flow
deleted file mode 100644
index fe99b37abd..0000000000
--- a/src/checkbox/stateful-checkbox.js.flow
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-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';
-// eslint-disable-next-line import/no-named-default
-import { default as Checkbox } from './checkbox.js';
-import type { StatefulContainerChildPropsT, StatefulCheckboxPropsT } from './types.js';
-// Styled elements
-
-const StatefulCheckbox = function (props: StatefulCheckboxPropsT) {
- return (
-
- {(childrenProps: StatefulContainerChildPropsT) => (
- {props.children}
- )}
-
- );
-};
-StatefulCheckbox.displayName = 'StatefulCheckbox';
-export default StatefulCheckbox;
diff --git a/src/checkbox/styled-components.js.flow b/src/checkbox/styled-components.js.flow
deleted file mode 100644
index 17c4ee92e4..0000000000
--- a/src/checkbox/styled-components.js.flow
+++ /dev/null
@@ -1,269 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-
-// @flow
-import { styled } from '../styles/index.js';
-
-import type { SharedStylePropsT } from './types.js';
-
-function getBorderColor(props) {
- const { $disabled, $checked, $error, $isIndeterminate, $theme, $isFocusVisible } = props;
- const { colors } = $theme;
- if ($disabled) {
- return colors.tickFillDisabled;
- } else if ($checked || $isIndeterminate) {
- return 'transparent';
- } else if ($error) {
- return colors.borderNegative;
- } else if ($isFocusVisible) {
- return colors.borderSelected;
- } else {
- return colors.tickBorder;
- }
-}
-
-function getLabelPadding(props) {
- const { $labelPlacement = '', $theme } = props;
- const { sizing } = $theme;
- const { scale300 } = sizing;
- let paddingDirection;
-
- switch ($labelPlacement) {
- case 'top':
- paddingDirection = 'Bottom';
- break;
- case 'bottom':
- paddingDirection = 'Top';
- break;
- case 'left':
- paddingDirection = 'Right';
- break;
- default:
- case 'right':
- paddingDirection = 'Left';
- break;
- }
-
- if ($theme.direction === 'rtl' && paddingDirection === 'Left') {
- paddingDirection = 'Right';
- } else if ($theme.direction === 'rtl' && paddingDirection === 'Right') {
- paddingDirection = 'Left';
- }
-
- return {
- [`padding${paddingDirection}`]: scale300,
- };
-}
-
-function getBackgroundColor(props) {
- const { $disabled, $checked, $isIndeterminate, $error, $isHovered, $isActive, $theme } = props;
- const { colors } = $theme;
- if ($disabled) {
- if ($checked || $isIndeterminate) {
- return colors.tickFillDisabled;
- } else {
- return colors.tickFill;
- }
- } else if ($error && ($isIndeterminate || $checked)) {
- if ($isActive) {
- return colors.tickFillErrorSelectedHoverActive;
- } else if ($isHovered) {
- return colors.tickFillErrorSelectedHover;
- } else {
- return colors.tickFillErrorSelected;
- }
- } else if ($error) {
- if ($isActive) {
- return colors.tickFillErrorHoverActive;
- } else if ($isHovered) {
- return colors.tickFillErrorHover;
- } else {
- return colors.tickFillError;
- }
- } else if ($isIndeterminate || $checked) {
- if ($isActive) {
- return colors.tickFillSelectedHoverActive;
- } else if ($isHovered) {
- return colors.tickFillSelectedHover;
- } else {
- return colors.tickFillSelected;
- }
- } else {
- if ($isActive) {
- return colors.tickFillActive;
- } else if ($isHovered) {
- return colors.tickFillHover;
- } else {
- return colors.tickFill;
- }
- }
-}
-
-function getLabelColor(props) {
- const { $disabled, $theme } = props;
- const { colors } = $theme;
- return $disabled ? colors.contentSecondary : colors.contentPrimary;
-}
-
-export const Root = styled('label', (props) => {
- const { $disabled, $labelPlacement } = props;
- return {
- flexDirection: $labelPlacement === 'top' || $labelPlacement === 'bottom' ? 'column' : 'row',
- display: 'flex',
- alignItems: $labelPlacement === 'top' || $labelPlacement === 'bottom' ? 'center' : 'flex-start',
- cursor: $disabled ? 'not-allowed' : 'pointer',
- userSelect: 'none',
- };
-});
-
-export const Checkmark = styled('span', (props) => {
- const { $checked, $disabled, $error, $isIndeterminate, $theme, $isFocusVisible } = props;
- const { sizing, animation } = $theme;
-
- const tickColor = $disabled
- ? $theme.colors.tickMarkFillDisabled
- : $error
- ? $theme.colors.tickMarkFillError
- : $theme.colors.tickMarkFill;
-
- const indeterminate = encodeURIComponent(`
-
- `);
-
- const check = encodeURIComponent(`
-
- `);
-
- const borderRadius = $theme.borders.checkboxBorderRadius;
- const borderColor = getBorderColor(props);
-
- return ({
- flex: '0 0 auto',
- transitionDuration: animation.timing200,
- transitionTimingFunction: animation.easeOutCurve,
- transitionProperty: 'background-image, border-color, background-color',
- width: sizing.scale700,
- height: sizing.scale700,
- left: '4px',
- top: '4px',
- boxSizing: 'border-box',
- borderLeftStyle: 'solid',
- borderRightStyle: 'solid',
- borderTopStyle: 'solid',
- borderBottomStyle: 'solid',
- borderLeftWidth: '3px',
- borderRightWidth: '3px',
- borderTopWidth: '3px',
- borderBottomWidth: '3px',
- borderLeftColor: borderColor,
- borderRightColor: borderColor,
- borderTopColor: borderColor,
- borderBottomColor: borderColor,
- borderTopLeftRadius: borderRadius,
- borderTopRightRadius: borderRadius,
- borderBottomRightRadius: borderRadius,
- borderBottomLeftRadius: borderRadius,
- outline: $isFocusVisible && $checked ? `3px solid ${$theme.colors.borderAccent}` : 'none',
- display: 'inline-block',
- verticalAlign: 'middle',
- backgroundImage: $isIndeterminate
- ? `url('data:image/svg+xml,${indeterminate}');`
- : $checked
- ? `url('data:image/svg+xml,${check}');`
- : null,
- backgroundColor: getBackgroundColor(props),
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center',
- backgroundSize: 'contain',
- marginTop: $theme.sizing.scale0,
- marginBottom: $theme.sizing.scale0,
- marginLeft: $theme.sizing.scale0,
- marginRight: $theme.sizing.scale0,
- }: {});
-});
-
-export const Label = styled('div', (props) => {
- const { $theme } = props;
- const { typography } = $theme;
- return ({
- verticalAlign: 'middle',
- ...getLabelPadding(props),
- color: getLabelColor(props),
- ...typography.LabelMedium,
- lineHeight: '24px',
- }: {});
-});
-
-// tricky style for focus event cause display: none doesn't work
-export const Input = styled('input', {
- opacity: 0,
- width: 0,
- height: 0,
- overflow: 'hidden',
- margin: 0,
- padding: 0,
- position: 'absolute',
-});
-
-export const Toggle = styled('div', (props) => {
- let backgroundColor = props.$theme.colors.toggleFill;
- if (props.$disabled) {
- backgroundColor = props.$theme.colors.toggleFillDisabled;
- } else if (props.$checked && props.$error) {
- backgroundColor = props.$theme.colors.tickFillErrorSelected;
- } else if (props.$checked) {
- backgroundColor = props.$theme.colors.toggleFillChecked;
- }
-
- return {
- backgroundColor,
- borderTopLeftRadius: '50%',
- borderTopRightRadius: '50%',
- borderBottomRightRadius: '50%',
- borderBottomLeftRadius: '50%',
- boxShadow: props.$isFocusVisible
- ? `0 0 0 3px ${props.$theme.colors.borderAccent}`
- : props.$isHovered && !props.$disabled
- ? props.$theme.lighting.shadow500
- : props.$theme.lighting.shadow400,
- outline: 'none',
- height: props.$theme.sizing.scale700,
- width: props.$theme.sizing.scale700,
- transform: props.$checked
- ? `translateX(${props.$theme.direction === 'rtl' ? '-100%' : '100%'})`
- : null,
- transition: `transform ${props.$theme.animation.timing200}`,
- };
-});
-
-export const ToggleTrack = styled('div', (props) => {
- let backgroundColor = props.$theme.colors.toggleTrackFill;
- if (props.$disabled) {
- backgroundColor = props.$theme.colors.toggleTrackFillDisabled;
- } else if (props.$error && props.$checked) {
- backgroundColor = props.$theme.colors.tickFillError;
- }
- return {
- alignItems: 'center',
- backgroundColor,
- borderTopLeftRadius: '7px',
- borderTopRightRadius: '7px',
- borderBottomRightRadius: '7px',
- borderBottomLeftRadius: '7px',
- display: 'flex',
- height: props.$theme.sizing.scale550,
- marginTop: props.$theme.sizing.scale200,
- marginBottom: props.$theme.sizing.scale100,
- marginLeft: props.$theme.sizing.scale200,
- marginRight: props.$theme.sizing.scale100,
- width: props.$theme.sizing.scale1000,
- };
-});
diff --git a/src/checkbox/types.js.flow b/src/checkbox/types.js.flow
deleted file mode 100644
index da3dab8d2e..0000000000
--- a/src/checkbox/types.js.flow
+++ /dev/null
@@ -1,202 +0,0 @@
-/*
-Copyright (c) Uber Technologies, Inc.
-
-This source code is licensed under the MIT license found in the
-LICENSE file in the root directory of this source tree.
-*/
-// @flow
-
-import type { OverrideT } from '../helpers/overrides.js';
-import { STYLE_TYPE } from './constants.js';
-
-export type LabelPlacementT = 'top' | 'right' | 'bottom' | 'left';
-export type StyleTypeT = $Keys;
-export type ReactRefT = { current: null | T } | {| current: null | T |};
-
-export type OverridesT = {
- Checkmark?: OverrideT,
- Label?: OverrideT,
- Root?: OverrideT,
- Input?: OverrideT,
- Toggle?: OverrideT,
- ToggleInner?: OverrideT,
- ToggleTrack?: OverrideT,
-};
-
-export type DefaultPropsT = {
- children?: React$Node,
- checked: boolean,
- disabled: boolean,
- error: boolean,
- autoFocus: boolean,
- isIndeterminate: boolean,
- inputRef: ReactRefT,
- checkmarkType: StyleTypeT,
- onChange: (e: SyntheticInputEvent) => mixed,
- onMouseEnter: (e: SyntheticInputEvent) => mixed,
- onMouseLeave: (e: SyntheticInputEvent) => mixed,
- onMouseDown: (e: SyntheticInputEvent) => mixed,
- onMouseUp: (e: SyntheticInputEvent) => mixed,
- onFocus: (e: SyntheticInputEvent