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

package/popup/lib/hooks/usePopupHeading.ts

@@ -2,7 +2,7 @@ import {createElemPropsHook} from '@workday/canvas-kit-react/common';
 import {usePopupModel} from './usePopupModel';
 
 /**
- * Adds the necessary props to the `Heading` component. Used by the `Popup.Heading` subcomponent.
+ * Adds the necessary props to the {@link PopupHeading Popup.Heading} subcomponent.
  */
 export const usePopupHeading = createElemPropsHook(usePopupModel)(({state}) => {
   return {

package/popup/lib/hooks/usePopupPopper.ts

@@ -4,7 +4,8 @@ import React from 'react';
 import {Placement} from '../Popper';
 
 /**
- * Hooks a Popper up to a PopupModel
+ * Adds the necessary props to a {@link Popper} component. Used by the
+ * {@link PopupPopper Popup.Popper} subcomponent.
  */
 export const usePopupPopper = createElemPropsHook(usePopupModel)(({state, events}, ref) => {
   const elementRef = useForkRef(ref, state.stackRef);

package/popup/lib/hooks/usePopupStack.ts

@@ -4,38 +4,46 @@ import {PopupStack} from '@workday/canvas-kit-popup-stack';
 import {useLocalRef, useIsRTL} from '@workday/canvas-kit-react/common';
 
 /**
- * This hook should not be used directly. Use the `Popper` component instead.
+ * **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
  *
- * This hook will add the `stackRef` element to the Popup stack on mount and remove on unmount. If
- * you use `Popper`, the popper `stackRef` is automatically added/removed from the Popup stack. The
- * Popup stack is required for proper z-index values to ensure Popups are rendered correct. It is
+ * This hook will add the `stackRef` element to the {@link PopupStack} on mount and remove on unmount. If
+ * you use `Popper`, the popper `stackRef` is automatically added/removed from the `PopupStack`. The
+ * `PopupStack` is required for proper z-index values to ensure Popups are rendered correct. It is
  * also required for global listeners like click outside or escape key closing a popup. Without the
- * Popup stack, all popups will close rather than only the topmost one.
+ * `PopupStack`, all popups will close rather than only the topmost one.
  *
- * If `forwardRef` is provided, it will be the same as `stackRef`. If `forwardRef` is not provided`,
+ * If `ref` is provided, it will be the same as `stackRef`. If `ref` is not provided`,
  * this hook will create one and return it.
  *
  * This hook should be used by all stacked UIs unless using the `Popper` component.
  *
- * @param forwardRef This ref will be managed by the PopupStack and should not be managed by React. Do
+ * ```tsx
+ * const model = usePopupModel();
+ * usePopupStack(model.state.stackRef, model.state.targetRef);
+ *
+ * // add some popup functionality
+ * useCloseOnOutsideClick(model);
+ * useCloseOnEscape(model);
+ *
+ * return (
+ *   <>
+ *     <button ref={model.state.targetRef}>Open Popup</button>
+ *     {model.state.visibility !== 'hidden'
+ *       ? ReactDOM.createPortal(<div>Popup Contents</div>, model.state.stackRef.current)
+ *       : null}
+ *   </>
+ * );
+ * ```
+ *
+ * @param ref This ref will be managed by the PopupStack and should not be managed by React. Do
  * not apply this stackRef to a React element. Doing so will result in an error. Instead, use this
  * `stackRef` directly with `ReactDOM.createPortal(<YourComponent>, stackRef.current!)`. This is
  * definitely strange for React code, but is necessary for the PopupStack to remain framework
- * agnostic and flexible to integrate with existing popup stack systems. If not provided, this hook
+ * agnostic and flexible to integrate with existing `PopupStack` systems. If not provided, this hook
  * will create one and return that `stackRef` instead.
- *
  * @param target Usually the trigger of a popup. This will fix `bringToTop` and should be provided
  * by all ephemeral-type popups (like Tooltips, Select menus, etc). It will also add in clickOutside
  * detection.
- *
- * @example
- * // must be part of a component life-cycle. Use `Popup.Popper` otherwise.
- * const model = usePopupModel({visibility: 'visible'})
- * usePopupStack(model.state.stackRef)
- *
- * // add some popup functionality
- * useCloseOnOutsideClick(model)
- * useCloseOnEscape(model)
  */
 export const usePopupStack = <E extends HTMLElement>(
   ref?: React.Ref<E>,

package/popup/lib/hooks/usePopupTarget.ts

@@ -2,7 +2,7 @@ import {createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common'
 import {usePopupModel} from './usePopupModel';
 
 /**
- * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
+ * Adds the necessary props to a {@link PopupTarget Popup.Target} subcomponent.
  */
 export const usePopupTarget = createElemPropsHook(usePopupModel)(({events, state}, ref) => {
   const elementRef = useForkRef(ref, state.targetRef);

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/popup/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/popup",
   "module": "../dist/es6/popup",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/popup"
 }

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/radio/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/radio",
   "module": "../dist/es6/radio",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/radio"
 }

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/segmented-control/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/segmented-control",
   "module": "../dist/es6/segmented-control",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/segmented-control"
 }

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/select/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/select",
   "module": "../dist/es6/select",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/select"
 }

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/side-panel/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/side-panel",
   "module": "../dist/es6/side-panel",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/side-panel"
 }