@workday/canvas-kit-preview-react 15.0.0-alpha.0075-next.0 → 15.0.0-alpha.0077-next.0

package/select/lib/SelectMenu.tsx

@@ -1,304 +0,0 @@
-import React, {useState, useEffect, useLayoutEffect, useCallback} from 'react';
-
-import {CSSObject} from '@emotion/styled';
-import {EmotionCanvasTheme, ErrorType, Themeable, styled} from '@workday/canvas-kit-react/common';
-import {
-  Placement,
-  Popper,
-  useCloseOnEscape,
-  useCloseOnOutsideClick,
-  usePopupModel,
-  useReturnFocus,
-  useTransferOnFullscreenExit,
-} from '@workday/canvas-kit-react/popup';
-import {colors, borderRadius, inputColors} from '@workday/canvas-kit-react/tokens';
-
-import {SelectProps} from './Select';
-import {MenuPlacement, MenuVisibility} from './types';
-
-interface SelectMenuProps
-  extends Themeable,
-    React.HTMLAttributes<HTMLUListElement>,
-    Pick<SelectProps, 'error'> {
-  /**
-   * The ref to the anchor button element. Required to anchor the menu.
-   */
-  buttonRef?: React.RefObject<HTMLButtonElement>;
-  /**
-   * The ref to the underlying menu/listbox element. Use this to imperatively manipulate the menu.
-   */
-  menuRef?: React.RefObject<HTMLUListElement>;
-  /**
-   * The function called when the menu is closed.
-   */
-  onClose?: () => void;
-  /**
-   * The placement of the SelectMenu relative to its corresponding button.
-   * @default 'bottom'
-   */
-  placement?: MenuPlacement;
-  /**
-   * If true, automatically flip the SelectMenu to keep it visible if necessary (e.g., if the the SelectMenu would otherwise display below the visible area of the viewport).
-   * @default true
-   */
-  shouldAutoFlip?: boolean;
-  /**
-   * If true, focus the SelectMenu when it's shown. Set to false if you don't want to focus the SelectMenu automatically (for visual testing purposes, for example).
-   * @default true
-   */
-  shouldAutoFocus?: boolean;
-  /**
-   * The visibility state of the SelectMenu.
-   * @default 'closed'
-   */
-  visibility?: MenuVisibility;
-}
-
-export const menuAnimationDuration = 200;
-
-const menuBorderStyles = (theme: EmotionCanvasTheme, error?: ErrorType): CSSObject => {
-  let borderColor = theme.canvas.palette.common.focusOutline;
-  let dividerBorderColor = borderColor;
-  let dividerBorderWidth = 1;
-
-  if (error === ErrorType.Error) {
-    borderColor = theme.canvas.palette.error.main;
-    dividerBorderColor = borderColor;
-  } else if (error === ErrorType.Caution) {
-    borderColor = theme.canvas.palette.alert.darkest;
-    dividerBorderColor = theme.canvas.palette.alert.main;
-    dividerBorderWidth = 2;
-  }
-
-  const dividerBorder = `${dividerBorderWidth}px solid ${dividerBorderColor}`;
-
-  return {
-    borderColor: borderColor,
-
-    // Render the divider using a pseudo-element
-    '&:before': {
-      backgroundColor: colors.soap400,
-      borderLeft: dividerBorder,
-      borderRight: dividerBorder,
-      boxSizing: 'border-box',
-      content: '""',
-      display: 'block',
-      height: 1,
-      position: 'absolute',
-      width: '100%',
-
-      '[data-popper-placement="bottom"] &': {
-        top: 0,
-      },
-      '[data-popper-placement="top"] &': {
-        bottom: 0,
-      },
-    },
-  };
-};
-
-const menuListBorderStyles = (theme: EmotionCanvasTheme, error?: ErrorType): CSSObject => {
-  let borderColor = theme.canvas.palette.common.focusOutline;
-  let borderWidth = 1;
-
-  if (error === ErrorType.Error) {
-    borderColor = theme.canvas.palette.error.main;
-  } else if (error === ErrorType.Caution) {
-    borderColor = theme.canvas.palette.alert.main;
-    borderWidth = 2;
-  }
-
-  const border = `${borderWidth}px solid ${borderColor}`;
-
-  return {
-    borderLeft: border,
-    borderRight: border,
-
-    '[data-popper-placement="bottom"] &': {
-      borderBottom: border,
-    },
-    '[data-popper-placement="top"] &': {
-      borderTop: border,
-    },
-  };
-};
-
-const Menu = styled('div')<
-  Pick<SelectMenuProps, 'error' | 'theme' | 'visibility'> & {width: number}
->(
-  {
-    backgroundColor: colors.frenchVanilla100,
-    border: `1px solid ${inputColors.border}`,
-    boxSizing: 'border-box',
-    position: 'relative',
-    transition: `opacity ${menuAnimationDuration}ms`,
-
-    '[data-popper-placement="bottom"] &': {
-      borderRadius: `0 0 ${borderRadius.m} ${borderRadius.m}`,
-      borderTop: 0,
-    },
-    '[data-popper-placement="top"] &': {
-      borderRadius: `${borderRadius.m} ${borderRadius.m} 0 0`,
-      borderBottom: 0,
-    },
-  },
-  ({error, theme}) => ({
-    ...menuBorderStyles(theme, error),
-  }),
-  ({visibility}) => ({
-    opacity: visibility === 'opening' || visibility === 'opened' || visibility === 'close' ? 1 : 0,
-  }),
-  ({width}) => ({
-    width: width,
-  })
-);
-
-const MenuList = styled('ul')<Pick<SelectProps, 'error' | 'theme'>>(
-  {
-    listStyle: 'none',
-    margin: 0,
-    maxHeight: 200,
-    outline: 'none',
-    overflowY: 'auto',
-    padding: 0,
-  },
-  ({error, theme}) => ({
-    ...menuListBorderStyles(theme, error),
-  })
-);
-
-const generatePopperOptions = (
-  props: Pick<SelectMenuProps, 'menuRef' | 'placement' | 'shouldAutoFlip' | 'shouldAutoFocus'>
-) => {
-  const {menuRef, placement, shouldAutoFlip, shouldAutoFocus} = props;
-
-  let fallbackPlacements: Placement[] = [];
-  if (shouldAutoFlip) {
-    fallbackPlacements = placement === 'top' ? ['bottom'] : ['top'];
-  }
-
-  const modifiers = [
-    {
-      name: 'flip',
-      options: {
-        fallbackPlacements,
-      },
-    },
-    {
-      name: 'offset',
-      options: {
-        offset: () => {
-          const skidding = 0;
-
-          // Displace menu towards the button to obscure the bottom
-          // edge of the button and to create a smooth visual
-          // connection between the button and the menu
-          const distance = -parseInt(borderRadius.m, 10);
-
-          return [skidding, distance];
-        },
-      },
-    },
-    {
-      name: 'preventOverflow',
-      options: {
-        // Ensure the menu stays aligned with its reference (button),
-        // even if that means the menu is pushed out of view
-        mainAxis: false,
-      },
-    },
-    {
-      // Disable the fallbackModifier as SelectMenu is properly handled by the
-      // flip modifier through shouldAutoFlip prop
-      name: 'fallbackModifier',
-      enabled: false,
-    },
-  ];
-
-  return {
-    modifiers,
-    // TODO: Consider using a more general-purpose focus function here rather
-    // than relying on Popper's onFirstUpdate for better control over how
-    // focus is managed
-    onFirstUpdate: () => {
-      if (shouldAutoFocus && menuRef && menuRef.current) {
-        menuRef.current.focus();
-      }
-    },
-  };
-};
-
-/**
- * @deprecated ⚠️ `SelectMenu` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export const SelectMenu = ({
-  buttonRef,
-  children,
-  error,
-  menuRef,
-  onClose,
-  placement = 'bottom',
-  shouldAutoFlip = true,
-  shouldAutoFocus = true,
-  visibility = 'closed',
-  ...elemProps
-}: SelectMenuProps) => {
-  const model = usePopupModel({
-    initialVisibility: 'visible',
-    returnFocusRef: buttonRef,
-    onHide: onClose,
-  });
-
-  const [width, setWidth] = useState(0);
-
-  const handleWidthChange = useCallback(() => {
-    if (buttonRef && buttonRef.current && visibility !== 'closed') {
-      const newMenuWidth = buttonRef.current.clientWidth + 2;
-      setWidth(newMenuWidth);
-    }
-  }, [buttonRef, visibility]);
-
-  useLayoutEffect(() => {
-    handleWidthChange();
-  }, [handleWidthChange]);
-
-  // TODO: Figure out a better way to handle width changes in the reference button.
-  // Seems like we should resize the menu when the reference button width changes, not
-  // necessarily when the window resizes. Resizing the menu on window resize addresses
-  // the case when `grow = true` and the user resizes the browser window while the
-  // menu is opened, but doesn't address cases where the reference button size changes
-  // through other means.
-  useEffect(() => {
-    // Update menu width state on resize to ensure menu resizes as window resizes
-    window.addEventListener('resize', handleWidthChange);
-
-    return () => {
-      window.removeEventListener('resize', handleWidthChange);
-    };
-  }, [handleWidthChange]);
-
-  useCloseOnEscape(model);
-  useCloseOnOutsideClick(model);
-  useReturnFocus(model);
-  useTransferOnFullscreenExit(model);
-
-  return (
-    <Popper
-      placement={placement}
-      anchorElement={buttonRef}
-      popperOptions={generatePopperOptions({
-        menuRef,
-        placement,
-        shouldAutoFlip,
-        shouldAutoFocus,
-      })}
-      ref={model.state.stackRef}
-    >
-      <Menu error={error} visibility={visibility} width={width}>
-        <MenuList error={error} ref={menuRef} role="listbox" tabIndex={-1} {...elemProps}>
-          {children}
-        </MenuList>
-      </Menu>
-    </Popper>
-  );
-};

package/select/lib/SelectOption.tsx

@@ -1,133 +0,0 @@
-import * as React from 'react';
-import {CSSObject} from '@emotion/styled';
-import {
-  EmotionCanvasTheme,
-  ErrorType,
-  Themeable,
-  pickForegroundColor,
-  styled,
-} from '@workday/canvas-kit-react/common';
-import {colors, commonColors, type} from '@workday/canvas-kit-react/tokens';
-/**
- * @deprecated ⚠️ `SelectOptionProps` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export interface SelectOptionProps extends Themeable, React.LiHTMLAttributes<HTMLLIElement> {
-  /**
-   * The type of error associated with the SelectOption (if applicable).
-   */
-  error?: ErrorType;
-  /**
-   * If true, set the SelectOption to the focused state.
-   * @default false
-   */
-  focused?: boolean;
-  /**
-   * The HTML `id` of the SelectOption.
-   */
-  id?: string;
-  /**
-   * If true, set the SelectOption to the interactive state. Non-interactive SelectOptions should not give any visual cues that they are interactive (e.g., remove hover styling).
-   * @default true
-   */
-  interactive?: boolean;
-  /**
-   * The ref to the list item that the styled component renders. Use this to imperatively manipulate the SelectOption (e.g., to scroll to it if it's out of view in the Select menu).
-   */
-  optionRef?: React.Ref<HTMLLIElement>;
-  /**
-   * The value of the SelectOption.
-   */
-  value?: string;
-}
-
-const optionPadding = 6;
-
-const activeStyles = (theme: EmotionCanvasTheme): CSSObject => {
-  const activeBgColor = theme.canvas.palette.primary.main;
-  return {
-    backgroundColor: activeBgColor,
-    color: pickForegroundColor(activeBgColor),
-  };
-};
-
-const Option = styled('li')<SelectOptionProps>(
-  {
-    ...type.levels.subtext.large,
-    cursor: 'default',
-    // Apply listStyle at the list item style to ensure it's styled properly
-    // in Visual Testing States
-    listStyle: 'none',
-    // In case the content of the option is empty/undefined for some reason
-    minHeight: type.levels.subtext.large.lineHeight,
-    textAlign: 'left',
-  },
-  ({'aria-disabled': disabled, focused, interactive, theme}) => {
-    if (disabled) {
-      // If the option is disabled, return disabled styles...
-      return {
-        color: colors.licorice100,
-      };
-    } else if (focused) {
-      // ...else if the option is focused, return focused styles...
-      return {
-        ...activeStyles(theme),
-      };
-    } else {
-      // ...else return hover and selected (via aria-selected) styles
-      const selectedBgColor = theme.canvas.palette.primary.lightest;
-      const selectedStyles = {
-        '&[aria-selected="true"]': {
-          backgroundColor: selectedBgColor,
-          color: pickForegroundColor(selectedBgColor),
-        },
-      };
-      // Only display interactive (hover/active) styles if the option is interactive
-      const interactiveStyles = interactive
-        ? {
-            '&:hover': {
-              backgroundColor: commonColors.hoverBackground,
-            },
-            '&:active, &:active[aria-selected="true"]': {
-              ...activeStyles(theme),
-            },
-          }
-        : {};
-      return {
-        // Place selected styles after interactive styles to have selected styles
-        // override interactive styles (subject to CSS specificity rules)
-        ...interactiveStyles,
-        ...selectedStyles,
-      };
-    }
-  },
-  ({error}) => ({
-    padding: `${optionPadding}px ${
-      error === ErrorType.Caution ? optionPadding - 1 : optionPadding
-    }px`,
-  })
-);
-
-/**
- * @deprecated ⚠️ `SelectOption` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export const SelectOption = ({
-  children,
-  focused = false,
-  interactive = true,
-  optionRef,
-  value,
-  ...elemProps
-}: SelectOptionProps) => {
-  return (
-    <Option
-      data-value={value}
-      focused={focused}
-      interactive={interactive}
-      ref={optionRef}
-      role="option"
-      {...elemProps}
-    >
-      {children}
-    </Option>
-  );
-};

package/select/lib/scrolling.ts

@@ -1,42 +0,0 @@
-// Modified from https://gist.github.com/hsablonniere/2581101
-/**
- * @deprecated ⚠️ `scrollIntoViewIfNeeded` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export const scrollIntoViewIfNeeded = (elem: HTMLElement, centerIfNeeded = true): void => {
-  const parent = elem.parentElement;
-
-  if (elem && parent) {
-    const parentComputedStyle = window.getComputedStyle(parent, null);
-    const parentBorderTopWidth = parseInt(
-      parentComputedStyle.getPropertyValue('border-top-width'),
-      10
-    );
-
-    // Check if elem is out of view at the top edge of the parent's viewport
-    const overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
-
-    // Check if elem is out of view at the bottom edge of the parent's viewport
-    const overBottom =
-      elem.offsetTop + elem.offsetHeight >
-      parent.scrollTop + parentBorderTopWidth + parent.clientHeight;
-
-    if ((overTop || overBottom) && centerIfNeeded) {
-      parent.scrollTop = Math.floor(
-        elem.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2
-      );
-    }
-
-    if ((overTop || overBottom) && !centerIfNeeded) {
-      if (overBottom) {
-        // elem is out of view at the bottom edge of the parent's viewport;
-        // scroll down just far enough for elem to be visible
-        parent.scrollTop =
-          elem.clientHeight - (parent.clientHeight + parentBorderTopWidth - elem.offsetTop);
-      } else {
-        // elem is out of view at the top edge of the parent's viewport;
-        // scroll up just far enough for elem to be visible
-        parent.scrollTop = elem.offsetTop - parentBorderTopWidth;
-      }
-    }
-  }
-};

package/select/lib/types.ts

@@ -1,37 +0,0 @@
-/**
- * The placement of the menu relative to its corresponding button. This type is a
- * subset of the PopperJS.Placement type limited to the `bottom` and `top` values.
- *
- * We need to use `top` and `bottom` instead of `top-start` and `bottom-start` for
- * placements because PopperJS incorrectly rounds the `start` and `end` modifiers:
- * https://github.com/popperjs/popper-core/blob/38914aae7a2e91715c6eb2b563517082a40cfa64/src/utils/computeOffsets.js#L68-L81
- * This rounding causes problems with browsers that allow subpixel values for elements
- * like Firefox and Edge.
- *
- * @deprecated ⚠️ `MenuPlacement` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export type MenuPlacement = 'bottom' | 'top';
-
-/**
- * The visibility state of the menu.
- *
- * `closed`: The menu is completely closed (not present in the DOM).
- * `open`: The menu was previously `closed` and has just been instructed to open.
- *   The menu has been added to the DOM, but it's not yet visible. This state is
- *   necessary in order to apply an opacity of 0 to the menu before transitioning it
- *   to an opacity of 1.0 in the opening state.
- * `opening`: The menu is in the process of opening.
- * `opened`: The menu is completely open.
- * `close`: The menu was previously `open` and has just been instructed to close.
- * `closing`: The menu is in the process of closing.
- *
- * Typically, a menu will transition through states in the following order:
- * `closed` > `open` > `opening` > `opened` > `close` > `closing` > `closed`
- *
- * However, it's possible for a user to open a menu while it's in the process of
- * closing in which case the menu can transition from `closing` > `opening` (and
- * vice-versa).
- *
- * @deprecated ⚠️ `MenuVisibility` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export type MenuVisibility = 'closed' | 'open' | 'opening' | 'opened' | 'close' | 'closing';

package/select/lib/utils.ts

@@ -1,30 +0,0 @@
-import {NormalizedOption} from './SelectBase';
-/**
- * @deprecated ⚠️ `getIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--basic) instead.
- */
-export const getIndexByValue = (options: NormalizedOption[], value: string | undefined): number => {
-  if (!options || value === undefined) {
-    return -1;
-  }
-
-  for (let i = 0; i < options.length; i++) {
-    if (options[i].value === value) {
-      return i;
-    }
-  }
-
-  return -1;
-};
-
-// If the value doesn't exist in the options, return index 0
-/**
- * @deprecated ⚠️ `getCorrectedIndexByValue` in Preview has been deprecated and will be removed in a future major version. Please use [`Select` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs) instead.
- */
-export const getCorrectedIndexByValue = (
-  options: NormalizedOption[],
-  value: string | undefined
-): number => {
-  const indexByValue = getIndexByValue(options, value);
-
-  return indexByValue === -1 ? 0 : indexByValue;
-};

package/select/package.json

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