@workday/canvas-kit-react 7.0.0-alpha.89-next.16 → 7.0.0-alpha.92-next.19

package/popup/lib/hooks/useDisableBodyScroll.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Disables body scroll by adding `overflow: hidden` to the body element. This effectively prevents
@@ -9,7 +11,7 @@ import {PopupModel} from './usePopupModel';
  * This should be used with popup elements that hide all other content and force the user to accept
  * or dismiss the popup before continuing (i.e. Modals).
  */
-export const useDisableBodyScroll = (model: PopupModel, elemProps = {}) => {
+export const useDisableBodyScroll = createElemPropsHook(usePopupModel)(model => {
   const visible = model.state.visibility !== 'hidden';
 
   React.useLayoutEffect(() => {
@@ -30,5 +32,5 @@ export const useDisableBodyScroll = (model: PopupModel, elemProps = {}) => {
     };
   }, [visible]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useFocusRedirect.ts

@@ -1,7 +1,12 @@
 import React from 'react';
 
-import {PopupModel} from './usePopupModel';
-import {getFirstFocusableElement, getLastFocusableElement} from '@workday/canvas-kit-react/common';
+import {
+  createElemPropsHook,
+  getFirstFocusableElement,
+  getLastFocusableElement,
+} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Manages focus around a popup, treating the popup as if it was part of the DOM where it appears.
@@ -15,7 +20,7 @@ import {getFirstFocusableElement, getLastFocusableElement} from '@workday/canvas
  *
  * This should be used with non-modal dialogs.
  */
-export const useFocusRedirect = (model: PopupModel, elemProps = {}) => {
+export const useFocusRedirect = createElemPropsHook(usePopupModel)(model => {
   const onKeyDown = React.useCallback(
     (event: KeyboardEvent): void => {
       if (model.state.stackRef.current && event.key === 'Tab') {
@@ -50,5 +55,5 @@ export const useFocusRedirect = (model: PopupModel, elemProps = {}) => {
     };
   }, [visible, onKeyDown]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useFocusTrap.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import {tabTrappingKey} from './focus-trap-js';
 
-import {PopupModel} from './usePopupModel';
+import {createElemPropsHook} from '@workday/canvas-kit-react/common';
+
+import {usePopupModel} from './usePopupModel';
 
 /**
  * "Trap" or "loop" focus within a provided `stackRef` element. This is required for accessibility
@@ -12,7 +14,7 @@ import {PopupModel} from './usePopupModel';
  *
  * This should be used on popup elements that need to hide content (i.e. Modals).
  */
-export const useFocusTrap = (model: PopupModel, elemProps = {}) => {
+export const useFocusTrap = createElemPropsHook(usePopupModel)(model => {
   const onKeyDown = React.useCallback(
     (event: KeyboardEvent) => {
       if (model.state.stackRef.current) {
@@ -35,5 +37,5 @@ export const useFocusTrap = (model: PopupModel, elemProps = {}) => {
     };
   }, [visible, onKeyDown]);
 
-  return elemProps;
-};
+  return {};
+});

package/popup/lib/hooks/useInitialFocus.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 
-import {changeFocus, assert, getFirstFocusableElement} from '@workday/canvas-kit-react/common';
+import {
+  changeFocus,
+  assert,
+  getFirstFocusableElement,
+  createElemPropsHook,
+} from '@workday/canvas-kit-react/common';
 
-import {PopupModel} from './usePopupModel';
+import {usePopupModel} from './usePopupModel';
 
 /**
  * Moves focus within the popup when the popup becomes visible. This is useful for keyboard and
@@ -12,7 +17,7 @@ import {PopupModel} from './usePopupModel';
  * This should be used for popups that have focusable elements inside, like Modals, non-modal
  * dialogs, menus, etc.
  */
-export const useInitialFocus = (model: PopupModel, elemProps = {}) => {
+export const useInitialFocus = createElemPropsHook(usePopupModel)(model => {
   const visible = model.state.visibility !== 'hidden';
 
   // Using `useEffect` instead of `useLayoutEffect` so that focus doesn't change _before_ PopperJS
@@ -35,5 +40,5 @@ export const useInitialFocus = (model: PopupModel, elemProps = {}) => {
     }
   }, [model.state.initialFocusRef, model.state.stackRef, visible]);
 
-  return elemProps;
-};
+  return {};
+});

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,11 +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 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});

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,

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/lib/SegmentedControlButton.tsx

@@ -91,7 +91,6 @@ export interface SegmentedControlButtonProps {
 export const SegmentedControlButton = createComponent('button')({
   displayName: 'Button',
   Component: ({value, icon, toggled, ...props}: SegmentedControlButtonProps, ref, Element) => {
-    console.warn(props);
     return (
       <StyledButton
         as={Element}

package/tabs/lib/Tabs.tsx

@@ -1,43 +1,27 @@
 import React from 'react';
 
-import {createComponent, useDefaultModel} from '@workday/canvas-kit-react/common';
-import {Menu} from './menu';
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {Menu} from '@workday/canvas-kit-react/menu';
 
 import {TabsItem} from './TabsItem';
 import {TabsList} from './TabsList';
 import {TabsPanel} from './TabsPanel';
-import {useTabsModel, TabsModel, TabsModelConfig} from './useTabsModel';
+import {useTabsModel} from './useTabsModel';
 import {TabsOverflowButton} from './TabsOverflowButton';
 import {TabsMenuPopper} from './TabsMenuPopper';
 import {TabsPanels} from './TabsPanels';
 
-export const TabsModelContext = React.createContext<TabsModel>({} as any);
-
 // use `T = any` here because there's no way to pass generics to a compound component...
-export interface TabsProps<T = any> extends TabsModelConfig<T> {
+export interface TabsProps {
   /**
    * The contents of the Tabs. Can be `Tabs` children or any valid elements.
    */
   children: React.ReactNode;
-  /**
-   * Optionally pass a model directly to this component. Default is to create a model out of model
-   * config passed to this component.
-   * @default useTabsModel(config)
-   */
-  model?: TabsModel<T>;
 }
 
-export const Tabs = createComponent()({
+export const Tabs = createContainer()({
   displayName: 'Tabs',
-  Component: ({children, model, ...config}: TabsProps) => {
-    const value = useDefaultModel(model, config, useTabsModel);
-
-    return (
-      <TabsModelContext.Provider value={value}>
-        <Menu model={value.menu}>{children}</Menu>
-      </TabsModelContext.Provider>
-    );
-  },
+  modelHook: useTabsModel,
   subComponents: {
     List: TabsList,
     Item: TabsItem,
@@ -59,4 +43,10 @@ export const Tabs = createComponent()({
      */
     Menu,
   },
+})<TabsProps>(({children}, _, model) => {
+  return (
+    <>
+      <Menu model={model.menu}>{children}</Menu>
+    </>
+  );
 });