@workday/canvas-kit-react 7.1.5 → 7.2.0-427-next.2

package/popup/lib/hooks/useReturnFocus.tsx

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

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

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

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

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

package/radio/index.ts

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

package/radio/lib/Radio.tsx

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

package/radio/lib/RadioGroup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Radio, {RadioProps} from './Radio';
+import {Radio, RadioProps} from './Radio';
 import {borderRadius, space} from '@workday/canvas-kit-react/tokens';
 import {
   ErrorType,
@@ -67,7 +67,7 @@ const Container = styled('div')<Pick<RadioGroupProps, 'error' | 'grow' | 'theme'
   }
 );
 
-class RadioGroup extends React.Component<RadioGroupProps> {
+export class RadioGroup extends React.Component<RadioGroupProps> {
   static ErrorType = ErrorType;
 
   render(): React.ReactNode {
@@ -120,5 +120,3 @@ class RadioGroup extends React.Component<RadioGroupProps> {
 }
 
 RadioGroup.ErrorType = ErrorType;
-
-export default RadioGroup;

package/segmented-control/index.ts

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

package/segmented-control/lib/SegmentedControl.tsx

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

package/segmented-control/lib/SegmentedControlButton.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import {BaseButton, ButtonColors} from '@workday/canvas-kit-react/button';
+import {
+  BaseButton,
+  ButtonColors,
+  ButtonSizes,
+  ButtonContainerProps,
+} from '@workday/canvas-kit-react/button';
 import {
   createComponent,
   mouseFocusBehavior,
@@ -35,12 +40,22 @@ const getIconButtonColors = (toggled?: boolean): ButtonColors => {
   };
 };
 
-const StyledButton = styled(BaseButton)<StyledType>(
+const getSizeStyles = (size?: ButtonSizes) => {
+  const sizeValue =
+    size === 'large' ? `calc(${space.xl} + ${space.xxs})` : size === 'small' ? space.l : space.xl;
+
+  return {
+    width: sizeValue,
+    height: sizeValue,
+  };
+};
+
+const StyledButton = styled(BaseButton)<ButtonContainerProps & StyledType>(
   {
     borderRadius: borderRadius.zero,
     border: `1px solid ${colors.soap500}`,
     borderLeft: 'none',
-    minWidth: space.xl,
+
     '&:first-of-type': {
       borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
       borderLeft: `1px solid ${colors.soap500}`,
@@ -79,13 +94,17 @@ const StyledButton = styled(BaseButton)<StyledType>(
         background: theme.canvas.palette.primary.main,
       },
     },
+  }),
+  ({size}: ButtonContainerProps) => ({
+    ...getSizeStyles(size),
   })
 );
 
-export interface SegmentedControlButtonProps {
+export interface SegmentedControlButtonProps extends ButtonContainerProps {
   toggled?: boolean;
   icon: CanvasSystemIcon;
   value?: string | number;
+  size?: 'small' | 'medium' | 'large';
 }
 
 export const SegmentedControlButton = createComponent('button')({
@@ -101,7 +120,7 @@ export const SegmentedControlButton = createComponent('button')({
         ref={ref}
         {...props}
       >
-        <BaseButton.Icon size="large" icon={icon} />
+        <BaseButton.Icon size={props.size || 'large'} icon={icon} />
       </StyledButton>
     );
   },

package/select/index.ts

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

package/select/lib/Select.tsx

@@ -18,7 +18,7 @@ import {
 } from '@workday/canvas-kit-react/tokens';
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import SelectOption from './SelectOption';
+import {SelectOption} from './SelectOption';
 
 export interface SelectProps extends Themeable, GrowthBehavior {
   /**
@@ -55,7 +55,7 @@ const StyledSelect = styled('select')<SelectProps & StyledType>(
     height: space.xl,
     minWidth: 280,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: spaceNumbers.xxs, // IE11 bugfix: add padding so text is displayed properly
+    padding: spaceNumbers.xxs,
     margin: 0, // Fix Safari
     MozAppearance: 'none', // FF bugfix: hide arrow so it doesn't show under ours
     WebkitAppearance: 'none',
@@ -118,22 +118,9 @@ const SelectWrapper = styled('div')<Pick<SelectProps, 'grow' | 'disabled'>>(
 
 export const Select = createComponent('select')({
   displayName: 'Select',
-  Component: (
-    {disabled = false, error, grow, children, value, onChange, ...elemProps}: SelectProps,
-    ref,
-    Element
-  ) => (
+  Component: ({disabled = false, grow, children, ...elemProps}: SelectProps, ref, Element) => (
     <SelectWrapper grow={grow} disabled={disabled}>
-      <StyledSelect
-        as={Element}
-        disabled={disabled}
-        grow={grow}
-        error={error}
-        ref={ref}
-        value={value}
-        onChange={onChange}
-        {...elemProps}
-      >
+      <StyledSelect as={Element} disabled={disabled} grow={grow} ref={ref} {...elemProps}>
         {children}
       </StyledSelect>
       <SelectDropdownIcon
@@ -147,5 +134,3 @@ export const Select = createComponent('select')({
     ErrorType,
   },
 });
-
-export default Select;

package/select/lib/SelectOption.tsx

@@ -20,7 +20,7 @@ export interface SelectOptionProps extends React.OptionHTMLAttributes<HTMLOption
   disabled?: boolean;
 }
 
-export default class SelectOption extends React.Component<SelectOptionProps> {
+export class SelectOption extends React.Component<SelectOptionProps> {
   public render() {
     const {disabled = false, value, label, ...elemProps} = this.props;
 

package/side-panel/README.md

@@ -16,7 +16,7 @@ yarn add @workday/canvas-kit-react
 ```tsx
 import * as React from 'react';
 import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
-import SidePanel from '@workday/canvas-kit-react/side-panel';
+import {SidePanel} from '@workday/canvas-kit-react/side-panel';
 
 interface SidePanelState {
   open: boolean;

package/side-panel/index.ts

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

package/side-panel/lib/SidePanel.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import throttle from 'lodash/throttle';
 
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {colors, space, type, CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
+import {colors, space, CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
 import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {chevronLeftIcon, chevronRightIcon} from '@workday/canvas-system-icons-web';
+import {Heading} from '@workday/canvas-kit-react/text';
 
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -78,11 +78,6 @@ export enum SidePanelBackgroundColor {
 
 const closedWidth = space.xxl;
 
-const Header = styled('h2')({
-  ...type.levels.heading.small,
-  marginTop: space.zero,
-});
-
 const SidePanelContainer = styled('div')<
   Pick<SidePanelProps, 'open' | 'backgroundColor' | 'padding' | 'openWidth' | 'openDirection'>
 >(
@@ -167,13 +162,13 @@ const SidePanelFooter = styled('div')<Pick<SidePanelProps, 'open' | 'openWidth'>
   })
 );
 
-export default class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
+export class SidePanel extends React.Component<SidePanelProps, SidePanelState> {
   static OpenDirection = SidePanelOpenDirection;
   static BackgroundColor = SidePanelBackgroundColor;
 
   constructor(props: SidePanelProps) {
     super(props);
-    this.handleResize = throttle(this.handleResize.bind(this), 150);
+    this.handleResize = this.handleResize.bind(this);
   }
 
   state = {
@@ -214,7 +209,11 @@ export default class SidePanel extends React.Component<SidePanelProps, SidePanel
         {...elemProps}
       >
         <ChildrenContainer open={open} openWidth={openWidth}>
-          {header && open ? <Header>{header}</Header> : null}
+          {header && open ? (
+            <Heading as="h2" size="small" marginTop="zero">
+              {header}
+            </Heading>
+          ) : null}
           {this.props.children}
         </ChildrenContainer>
         <SidePanelFooter openWidth={openWidth} open={open}>

package/skeleton/lib/skeleton.tsx

@@ -39,6 +39,19 @@ const SkeletonAnimator = styled('div')<SkeletonProps & StyledType>({
   position: 'relative',
 });
 
+/**
+ * Skeleton subcomponents **must** be wrapped by the `Skeleton` container component.
+ *
+ * ```tsx
+ * <Skeleton>
+ *   <Skeleton.Header />
+ *   <Skeleton.Text />
+ * </Skeleton>
+ * ```
+ *
+ * `Skeleton` places its children in a container element with `aria-hidden` set to `true` and
+ * announces itself using a visually hidden element.
+ */
 export const Skeleton = createComponent('div')({
   displayName: 'Skeleton',
   Component: (
@@ -53,8 +66,21 @@ export const Skeleton = createComponent('div')({
     </SkeletonAnimator>
   ),
   subComponents: {
+    /**
+     * `Skeleton.Header` renders a placeholder for header content such as headings.
+     */
     Header: SkeletonHeader,
-    Shape: SkeletonShape,
+    /**
+     * `Skeleton.Text` renders a placeholder for text content such as paragraphs. Each placeholder
+     * line has a width of `100%` and a fixed height of `21px`, with the last line having a width of
+     * `60%` if there are multiple lines.
+     */
     Text: SkeletonText,
+    /**
+     * `Skeleton.Shape` renders a placeholder for graphic elements such as icons, avatars and small
+     * images. Set the `height`, `width`, and `borderRadius` props of the `Skeleton.Shape` to create
+     * various rectangular and circular shapes.
+     */
+    Shape: SkeletonShape,
   },
 });

package/status-indicator/index.ts

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

package/status-indicator/lib/StatusIndicator.tsx

@@ -146,7 +146,7 @@ const StatusLabel = styled('span')({
   textOverflow: 'ellipsis',
 });
 
-export default class StatusIndicator extends React.Component<StatusIndicatorProps> {
+export class StatusIndicator extends React.Component<StatusIndicatorProps> {
   public static Type = StatusIndicatorType;
   public static Emphasis = StatusIndicatorEmphasis;
 

package/switch/index.ts

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

package/switch/lib/Switch.tsx

@@ -193,5 +193,3 @@ export const Switch = createComponent('input')({
     ErrorType,
   },
 });
-
-export default Switch;

package/table/index.ts

@@ -1,7 +1,2 @@
-import Table from './lib/Table';
-import TableRow from './lib/TableRow';
-
-export default Table;
-export {Table, TableRow};
 export * from './lib/Table';
 export * from './lib/TableRow';

package/table/lib/Table.tsx

@@ -16,7 +16,7 @@ const TableComponent = styled('table')(type.levels.subtext.large, {
   },
 });
 
-export default class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
+export class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
   public render() {
     const {children, ...elemProps} = this.props;
 

package/table/lib/TableRow.tsx

@@ -192,7 +192,7 @@ const StyledTableRow = styled('tr')<TableRowProps>(
   }
 );
 
-const TableRow = createComponent('tr')({
+export const TableRow = createComponent('tr')({
   displayName: 'TableRow',
   Component: (
     {state, header, children, ...elemProps}: TableRowProps & StyledType,
@@ -209,5 +209,3 @@ const TableRow = createComponent('tr')({
     State: TableRowState,
   },
 });
-
-export default TableRow;