@workday/canvas-kit-react 7.0.0-alpha.0-next.6 → 7.0.0-alpha.101-next.26

package/popup/lib/hooks/usePopupCard.ts

@@ -1,10 +1,11 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Adds the necessary props to a `Card` component. Used by the `Popup.Card` subcomponent.
  */
-export const usePopupCard = createHook(({state}: PopupModel) => {
+export const usePopupCard = createElemPropsHook(usePopupModel)(({state}) => {
   return {
     role: 'dialog',
     'aria-labelledby': state.id,

package/popup/lib/hooks/usePopupCloseButton.ts

@@ -1,14 +1,12 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Adds the necessary props to a close button component. Used by the `Popup.CloseButton`
  * subcomponent and `Popup.CloseIcon` subcomponent.
  */
-export const usePopupCloseButton = createHook(({events}: PopupModel) => {
+export const usePopupCloseButton = createElemPropsHook(usePopupModel)(({events}) => {
   return {
-    onClick: (event: React.MouseEvent) => {
-      events.hide({event});
-    },
+    onClick: events.hide,
   };
 });

package/popup/lib/hooks/usePopupHeading.ts

@@ -1,10 +1,10 @@
-import {createHook} from '@workday/canvas-kit-react/common';
-import {PopupModel} from './usePopupModel';
+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.
  */
-export const usePopupHeading = createHook(({state}: PopupModel) => {
+export const usePopupHeading = createElemPropsHook(usePopupModel)(({state}) => {
   return {
     id: state.id,
   };

package/popup/lib/hooks/usePopupModel.ts

@@ -1,126 +1,81 @@
 import * as React from 'react';
-import {createEventMap, Model, ToModelConfig, useEventMap} from '@workday/canvas-kit-react/common';
+import {createModelHook} from '@workday/canvas-kit-react/common';
 
-import {
-  DisclosureEvents,
-  DisclosureState,
-  useDisclosureModel,
-  disclosureEventMap,
-  BaseDisclosureModelConfig,
-  DisclosureModelConfig,
-} from '@workday/canvas-kit-react/disclosure';
-import type {Placement} from '@workday/canvas-kit-react/popup';
+import {useDisclosureModel} from '@workday/canvas-kit-react/disclosure';
+import {Placement} from '@workday/canvas-kit-react/popup';
 
-export type PopupState = DisclosureState & {
-  /**
-   * Reference of the stack item used in the PopupStack. This value will be used in all
-   * Popup-related behaviors.
-   */
-  stackRef: React.RefObject<HTMLDivElement>;
-  /**
-   * Reference of the target element. This will point to the element that triggered the showing of a
-   * Popup and is used in Popup-related behaviors.
-   */
-  targetRef: React.RefObject<HTMLButtonElement>;
-  /**
-   * Optional reference to an element that should receive focus when a popup is shown. If left blank,
-   * focus will be moved to the first focusable element inside the popup.
-   */
-  initialFocusRef?: React.RefObject<any>;
-  /**
-   * Optional reference to an element that should receive focus when a popup is hidden. If left
-   * blank, focus will return to the `targetRef`
-   */
-  returnFocusRef?: React.RefObject<any>;
-  /**
-   * The placement chosen by the positioning Popper. This should get set prior to showing the popup
-   * content.
-   * @default 'bottom'
-   */
-  placement: Placement;
-};
-
-export type PopupEvents = DisclosureEvents & {
-  /**
-   * Called whenever a popup placement changes around a target. This is useful for animations that
-   * depend on the placement chosen.
-   */
-  updatePlacement(data: {placement: Placement}): void;
-};
-
-export type PopupModel = Model<PopupState, PopupEvents>;
+// eslint-disable-next-line no-empty-function
+const noop = () => {};
 
-export const popupEventMap = createEventMap<PopupEvents>()({
-  guards: {
-    ...disclosureEventMap.guards,
+export const usePopupModel = createModelHook({
+  // create enough of a model to use `Popup.Card` without a `Popup` container component.
+  defaultContext: {state: {}, events: {show: noop, hide: noop}},
+  defaultConfig: {
+    ...useDisclosureModel.defaultConfig,
     /**
-     * Determines if the `placement` state should be updated. This might be useful to keep the
-     * animation going a certain direction regardless of placement chosen by PopperJS.
+     * Optional reference to an element that should receive focus when a popup is hidden. If left
+     * blank, focus will return to the `targetRef`
      */
-    shouldUpdatePlacement: 'updatePlacement',
-  },
-  callbacks: {
-    ...disclosureEventMap.callbacks,
+    returnFocusRef: undefined as undefined | React.RefObject<any>,
     /**
-     * Called whenever the placement changes. This callback only fires when placement changes. For
-     * example, if the preferred placement of a Popper is 'bottom' and there's enough room to place
-     * a Popup on the bottom, the Popup will render below a target element without firing this
-     * callback. If there is not enough room and PopperJS chooses to update, this callback will be
-     * called to inform of the change in placement.
+     * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+     * focus will be moved to the first focusable element inside the popup.
      */
-    onUpdatePlacement: 'updatePlacement',
+    initialFocusRef: undefined as undefined | React.RefObject<any>,
   },
-});
-
-export type BasePopupModelConfig = BaseDisclosureModelConfig & {
-  /**
-   * Optional reference to an element that should receive focus when a popup is hidden. If left
-   * blank, focus will return to the `targetRef`
-   */
-  returnFocusRef?: React.RefObject<any>;
-  /**
-   * Optional reference to an element that should receive focus when a popup is shown. If left blank,
-   * focus will be moved to the first focusable element inside the popup.
-   */
-   initialFocusRef?: React.RefObject<any>;
-};
-
-export type PopupModelConfig = BasePopupModelConfig &
-  Partial<ToModelConfig<PopupState, PopupEvents, typeof popupEventMap>>;
-
-export const usePopupModel = (config: PopupModelConfig = {}): PopupModel => {
+  requiredConfig: useDisclosureModel.requiredConfig,
+})(config => {
   const stackRef = React.useRef<HTMLDivElement>(null);
   const targetRef = React.useRef<HTMLButtonElement>(null);
   const [placement, setPlacement] = React.useState<Placement>('bottom');
-  const disclosure = useDisclosureModel(config as DisclosureModelConfig);
+  const disclosure = useDisclosureModel(config);
 
   const state = {
     ...disclosure.state,
+    /**
+     * Reference of the stack item used in the PopupStack. This value will be used in all
+     * Popup-related behaviors.
+     */
     stackRef,
+    /**
+     * Reference of the target element. This will point to the element that triggered the showing of a
+     * Popup and is used in Popup-related behaviors.
+     */
     targetRef,
+    /**
+     * Optional reference to an element that should receive focus when a popup is shown. If left blank,
+     * focus will be moved to the first focusable element inside the popup.
+     */
     initialFocusRef: config.initialFocusRef,
+    /**
+     * Optional reference to an element that should receive focus when a popup is hidden. If left
+     * blank, focus will return to the `targetRef`
+     */
     returnFocusRef: config.returnFocusRef,
+    /**
+     * The placement chosen by the positioning Popper. This should get set prior to showing the popup
+     * content.
+     * @default 'bottom'
+     */
     placement,
   };
 
-  const events = useEventMap(popupEventMap, state, config, {
+  const events = {
     ...disclosure.events,
-    updatePlacement({placement}) {
-      setPlacement(placement);
+    /**
+     * Called whenever a popup placement changes around a target. This is useful for animations that
+     * depend on the placement chosen.
+     */
+    updatePlacement(data: {placement: Placement}) {
+      setPlacement(data.placement);
     },
-  });
+  };
 
   return {
     state,
     events,
   };
-};
-
-// eslint-disable-next-line no-empty-function
-const noop = () => {};
+});
 
 // create enough of a model to use `Popup.Card` without a `Popup` container component.
-export const PopupModelContext = React.createContext<PopupModel>({
-  state: {},
-  events: {show: noop, hide: noop},
-} as any);
+export const PopupModelContext = usePopupModel.Context;

package/popup/lib/hooks/usePopupPopper.ts

@@ -1,12 +1,12 @@
-import {createHook, useForkRef} from '@workday/canvas-kit-react/common';
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook, useForkRef} from '@workday/canvas-kit-react/common';
+import {usePopupModel} from './usePopupModel';
 import React from 'react';
 import {Placement} from '../Popper';
 
 /**
  * Hooks a Popper up to a PopupModel
  */
-export const usePopupPopper = createHook(({state, events}: PopupModel, ref) => {
+export const usePopupPopper = createElemPropsHook(usePopupModel)(({state, events}, ref) => {
   const elementRef = useForkRef(ref, state.stackRef);
   const onPlacementChange = React.useCallback(
     (placement: Placement) => {

package/popup/lib/hooks/usePopupTarget.ts

@@ -1,10 +1,10 @@
-import {createHook, useForkRef} from '@workday/canvas-kit-react/common';
-import {PopupModel} from './usePopupModel';
+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.
  */
-export const usePopupTarget = createHook(({events, state}: PopupModel, ref) => {
+export const usePopupTarget = createElemPropsHook(usePopupModel)(({events, state}, ref) => {
   const elementRef = useForkRef(ref, state.targetRef);
   return {
     ref: elementRef,
@@ -18,9 +18,9 @@ export const usePopupTarget = createHook(({events, state}: PopupModel, ref) => {
       }
 
       if (state.visibility !== 'hidden') {
-        events.hide({event});
+        events.hide(event);
       } else {
-        events.show({event});
+        events.show(event);
       }
     },
   };

package/popup/lib/hooks/usePopupTargetContext.ts

@@ -0,0 +1,30 @@
+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.
+ */
+export const usePopupTargetContext = createElemPropsHook(usePopupModel)(({events, state}, ref) => {
+  const elementRef = useForkRef(ref, state.targetRef);
+  return {
+    ref: elementRef,
+    onContextMenu: (event: React.MouseEvent) => {
+      // If we're wrapping a target component that doesn't handle ref forwarding, update the
+      // `state.targetRef` manually. This ensures that custom target components don't need to handle
+      // ref forwarding since ref forwarding is only really needed to programmatically open popups
+      // around a target _before_ a user clicks. In that rare case, ref forwarding is required.
+      if (!state.targetRef.current) {
+        (state.targetRef as React.MutableRefObject<any>).current = event.currentTarget;
+      }
+
+      if (state.visibility !== 'hidden') {
+        events.hide(event);
+      } else {
+        events.show(event);
+      }
+
+      // Prevent the default context menu from showing to avoid double menus
+      event.preventDefault();
+    },
+  };
+});

package/popup/lib/hooks/useReturnFocus.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import {PopupModel} from './usePopupModel';
-import {changeFocus} from '@workday/canvas-kit-react/common';
+import {changeFocus, createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Returns focus to the target element when the popup is hidden. This works well with
@@ -10,7 +11,7 @@ import {changeFocus} from '@workday/canvas-kit-react/common';
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-export const useReturnFocus = (model: PopupModel, elemProps = {}) => {
+export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
   const visible = model.state.visibility !== 'hidden';
 
   React.useLayoutEffect(() => {
@@ -24,5 +25,5 @@ export const useReturnFocus = (model: PopupModel, elemProps = {}) => {
     };
   }, [model.state.returnFocusRef, model.state.targetRef, visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useTransferOnFullscreenEnter.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import screenfull from 'screenfull';
 
-import {PopupModel} from './usePopupModel';
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
@@ -12,7 +14,7 @@ import {PopupStack} from '@workday/canvas-kit-popup-stack';
  * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export const useTransferOnFullscreenEnter = (model: PopupModel, elemProps = {}) => {
+export const useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
     event => {
       if (screenfull.isFullscreen && model.state.stackRef.current) {
@@ -40,5 +42,5 @@ export const useTransferOnFullscreenEnter = (model: PopupModel, elemProps = {})
     return;
   }, [handler, visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useTransferOnFullscreenExit.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import screenfull from 'screenfull';
 
-import {PopupModel} from './usePopupModel';
 import {PopupStack} from '@workday/canvas-kit-popup-stack';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
@@ -11,7 +13,7 @@ import {PopupStack} from '@workday/canvas-kit-popup-stack';
  * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export const useTransferOnFullscreenExit = (model: PopupModel, elemProps = {}) => {
+export const useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(model => {
   const handler = React.useCallback(
     event => {
       if (!screenfull.isFullscreen && model.state.stackRef.current) {
@@ -39,5 +41,5 @@ export const useTransferOnFullscreenExit = (model: PopupModel, elemProps = {}) =
     return;
   }, [handler, visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/segmented-control/README.md

@@ -14,17 +14,16 @@ yarn add @workday/canvas-kit-react
 ```tsx
 import * as React from 'react';
 import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';
-import {IconButton} from '@workday/canvas-kit-react/button';
 import {listViewIcon, worksheetsIcon} from '@workday/canvas-system-icons-web';
 
 <SegmentedControl>
-  <IconButton icon={listViewIcon} aria-label="List View" value="list-view" />
-  <IconButton icon={worksheetsIcon} aria-label="Table view" value="table-view" />
+  <SegmentedControl.Button icon={listViewIcon} aria-label="List View" value="list-view" />
+  <SegmentedControl.Button icon={worksheetsIcon} aria-label="Table view" value="table-view" />
 </SegmentedControl>;
 ```
 
-**Note:** while managing state using a unique `value` for each `IconButton` child is encouraged, you
-can also use indexes and omit the `value` field. It is strongly recommended to not mix these two
+**Note:** while managing state using a unique `value` for each `Button` child is encouraged, you can
+also use indexes and omit the `value` field. It is strongly recommended to not mix these two
 methods.
 
 ## Static Properties
@@ -35,9 +34,9 @@ methods.
 
 ### Required
 
-#### `children: React.ReactElement<IconButton>[]`
+#### `children:React.ReactElement<SegmentedControlButtonProps>[]`
 
-> Icon buttons to toggle between.
+> Buttons to toggle between.
 
 ---
 
@@ -45,8 +44,8 @@ methods.
 
 #### `value: string | number`
 
-> Identify which item is selected (toggled=true). If a string is passed, the IconButton with the
-> corresponding value will be selected. If a number is passed, the IconButton with the corresponding
+> Identify which item is selected (toggled=true). If a string is passed, the Button with the
+> corresponding value will be selected. If a number is passed, the Button with the corresponding
 > index will be selected.
 
 ---

package/segmented-control/lib/SegmentedControl.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import {borderRadius, colors} from '@workday/canvas-kit-react/tokens';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
-import {mouseFocusBehavior, styled} from '@workday/canvas-kit-react/common';
+
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {SegmentedControlButton, SegmentedControlButtonProps} from './SegmentedControlButton';
 
 export interface SegmentedControlProps {
   /**
-   * The IconButton children of the SegmentedControl (must be at least two).
+   * The Button children of the SegmentedControl (must be at least two).
    * TODO: Add support for text children
    */
-  children: React.ReactElement<IconButtonProps>[];
+  children: React.ReactElement<SegmentedControlButtonProps>[];
 
   /**
-   * The value or index of the IconButton that the SegmentedControl should be toggled on to.
-   * If a string is provided, the IconButton with the corresponding value will be selected.
-   * If a number is provided, the IconButton with the corresponding index will be selected.
+   * The value or index of the Button that the SegmentedControl should be toggled on to.
+   * If a string is provided, the Button with the corresponding value will be selected.
+   * If a number is provided, the Button with the corresponding index will be selected.
    * @default 0
    */
   value?: string | number;
@@ -26,54 +26,6 @@ export interface SegmentedControlProps {
   onChange?: (value: string | number) => void;
 }
 
-const SegmentedControlContainer = styled('div')(
-  {
-    '& button': {
-      borderRadius: borderRadius.zero,
-      border: `1px solid ${colors.soap500}`,
-      borderLeft: 'none',
-      '&[aria-pressed="true"]': {
-        borderColor: colors.blueberry400,
-        '&:hover, &:focus:hover': {
-          background: colors.blueberry400,
-        },
-      },
-      '&:first-of-type': {
-        borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-        borderLeft: `1px solid ${colors.soap500}`,
-      },
-      '&:last-of-type': {
-        borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-      },
-      '&:focus': {
-        borderRadius: borderRadius.m,
-        zIndex: 1,
-        animation: 'none', // reset focusRing animation
-        transition: 'all 120ms, border-radius 1ms',
-        ...mouseFocusBehavior({
-          '&': {
-            borderRadius: borderRadius.zero,
-            '&:first-of-type': {
-              borderRadius: `${borderRadius.m} 0 0 ${borderRadius.m}`,
-            },
-            '&:last-of-type': {
-              borderRadius: `0 ${borderRadius.m} ${borderRadius.m} 0`,
-            },
-          },
-        }),
-      },
-    },
-  },
-  ({theme}) => ({
-    '& button[aria-pressed="true"]': {
-      borderColor: theme.canvas.palette.primary.main,
-      '&:hover, &:focus:hover': {
-        background: theme.canvas.palette.primary.main,
-      },
-    },
-  })
-);
-
 const onButtonClick = (
   existingOnClick: ((e: React.MouseEvent<HTMLButtonElement>) => void) | undefined,
   onChange: ((value: string | number) => void) | undefined,
@@ -94,28 +46,37 @@ const onButtonClick = (
   }
 };
 
-const SegmentedControl = ({value = 0, children, onChange, ...elemProps}: SegmentedControlProps) => (
-  <SegmentedControlContainer {...elemProps}>
-    {React.Children.map(
-      children,
-      (
-        child: React.ReactElement<
-          IconButtonProps & {onClick?: React.MouseEventHandler<HTMLButtonElement>} // IconButton will have correct props
-        >,
-        index: number
-      ) => {
-        if (typeof child.type === typeof IconButton) {
-          return React.cloneElement(child, {
-            toggled: typeof value === 'number' ? index === value : child.props.value === value,
-            variant: 'squareFilled',
-            onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-          });
-        }
+export const SegmentedControl = createComponent('div')({
+  displayName: 'SegmentedControl',
+  Component: ({value = 0, children, onChange, ...elemProps}: SegmentedControlProps, ref) => {
+    return (
+      <div {...elemProps}>
+        {React.Children.map(
+          children,
+          (
+            child: React.ReactElement<
+              SegmentedControlButtonProps & {
+                onClick?: React.MouseEventHandler<HTMLButtonElement>;
+              } & React.HTMLAttributes<HTMLButtonElement> // segmented control button will have correct props
+            >,
+            index: number
+          ) => {
+            if (typeof child.type === typeof SegmentedControlButton) {
+              return React.cloneElement(child, {
+                toggled: typeof value === 'number' ? index === value : child.props.value === value,
+                onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
+              });
+            }
 
-        return child;
-      }
-    )}
-  </SegmentedControlContainer>
-);
+            return child;
+          }
+        )}
+      </div>
+    );
+  },
+  subComponents: {
+    Button: SegmentedControlButton,
+  },
+});
 
 export default SegmentedControl;