@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

package/common/lib/utils/dispatchInputEvent.ts

@@ -0,0 +1,16 @@
+export function dispatchInputEvent<T extends HTMLElement>(input: T | null, value: string): void {
+  // Changing value prop programmatically doesn't fire a synthetic event or trigger a native
+  // onChange event. We can not just update .value= in setState because React library overrides
+  // input value setter but we can call the function directly on the input as context. This will
+  // cause onChange events to fire no matter how value is updated.
+  if (input) {
+    const nativeInputValue = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
+    if (nativeInputValue && nativeInputValue.set) {
+      nativeInputValue.set.call(input, value);
+    }
+
+    const event = new Event('input', {bubbles: true});
+
+    input.dispatchEvent(event);
+  }
+}

package/common/lib/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './colorUtils';
 export * from './getTranslateFromOrigin';
+export * from './dispatchInputEvent';
 export * from './changeFocus';
 export * from './makeMq';
 export * from './mergeCallback';
@@ -9,6 +10,7 @@ export * from './assert';
 export * from './useMount';
 export * from './components';
 export * from './models';
+export * from './slugify';
 export * from './elements';
 export * from './useConstant';
 export * from './useIsFullscreen';

package/common/lib/utils/memoize.ts

@@ -0,0 +1,23 @@
+/**
+ * Simple memoize function. It takes a function and a resolver function to generate a
+ * cache key
+ */
+export function memoize<T extends (...args: any[]) => any>(
+  func: T,
+  resolver: (...args: Parameters<T>) => string
+): T {
+  const cache = new Map<string, ReturnType<T>>();
+
+  return function(...args: Parameters<T>): ReturnType<T> {
+    const key = resolver(...args);
+
+    if (cache.has(key)) {
+      return cache.get(key)!;
+    }
+
+    const result = func(...args);
+    cache.set(key, result);
+
+    return result;
+  } as T;
+}

package/common/lib/utils/models.ts

@@ -316,16 +316,19 @@ export type ModelFn<
  * }
  * ```
  */
+// We use the bivariance hack so models can be considered compatible even if the guard and callbacks
+// contain `state` that are incompatible. More info:
+// https://github.com/damianc/dev-notes/blob/master/typescript/bivariance-hack.md
 export type ToEventConfig<TState, TEvents extends Record<string, any>> = {
-  [K in keyof TEvents as `on${Capitalize<string & K>}`]?: (
+  [K in keyof TEvents as `on${Capitalize<string & K>}`]?: {bivarianceHack(
     data: Parameters<TEvents[K]>[0],
     prevState: TState
-  ) => void;
+  ): void}['bivarianceHack'];
 } & {
-  [K in keyof TEvents as `should${Capitalize<string & K>}`]?: (
+  [K in keyof TEvents as `should${Capitalize<string & K>}`]?: {bivarianceHack(
     data: Parameters<TEvents[K]>[0],
     state: TState
-  ) => boolean;
+  ): boolean}['bivarianceHack'];
 };
 
 function capitalize(string: string) {
@@ -510,10 +513,10 @@ export const createModelHook = <TDefaultConfig extends {}, TRequiredConfig exten
     const elemProps = {};
     for (const key in props) {
       if (
-        !defaultConfig.hasOwnProperty(key) &&
+        (!defaultConfig.hasOwnProperty(key) &&
         !requiredConfig.hasOwnProperty(key) &&
         !callbacksRef.current.includes(key) &&
-        !guardsRef.current.includes(key)
+        !guardsRef.current.includes(key)) || key === 'id'
       ) {
         // @ts-ignore  Typescript complains about index signatures and this type is never exposed in definitions, so suppress the error
         elemProps[key] = props[key];
@@ -585,7 +588,8 @@ export const createModelHook = <TDefaultConfig extends {}, TRequiredConfig exten
       }, {} as Record<string, any>);
     }, []);
 
-    return { state, events: wrappedEvents, ...rest };
+  // The model context is private and should never be used
+    return { state, events: wrappedEvents, __UNSTABLE_modelContext: Context, ...rest };
   }
 
   wrappedModelHook.getElemProps = getElemProps;

package/common/lib/utils/slugify.ts

@@ -0,0 +1,11 @@
+/**
+ * Function that takes a string and returns a "slug" which can be used in HTML
+ */
+export function slugify(input: string): string {
+  return input
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase();
+}

package/common/lib/utils/useModalityType.ts

@@ -2,6 +2,22 @@ import React from 'react';
 
 type Modality = 'mouse' | 'touch' | 'pen';
 
+function safeLocalStorageGet(key: string): string | null {
+  try {
+    return localStorage.get(key);
+  } catch (_) {
+    return null;
+  }
+}
+
+function safeLocalStorageSet(key: string, value: string): void {
+  try {
+    localStorage.set(key, value);
+  } catch (_) {
+    // Do nothing
+  }
+}
+
 // Use this shared global value to reduce calls to localStorage which is a synchronous API to a
 // drive which could be slow (spinning disks could be hundreds of ms). We read only once this way.
 // The following initialization is very difficult to test via automation. Don't mess with it unless
@@ -11,9 +27,7 @@ type Modality = 'mouse' | 'touch' | 'pen';
 //   a. if localStorage isn't primed, use clientWidth of the browsers
 //   b. if < 768, default to 'touch'
 //   c. else default to 'mouse'
-let localStorageValue = ((typeof localStorage !== 'undefined'
-  ? localStorage.getItem('modality')
-  : '') ||
+let localStorageValue = (safeLocalStorageGet('modality') ||
   (typeof document !== 'undefined'
     ? document.documentElement.clientWidth < 768
       ? 'touch'
@@ -26,7 +40,7 @@ let localStorageValue = ((typeof localStorage !== 'undefined'
 // drives
 const updateLocalStorage = (value: Modality) => {
   if (localStorageValue !== value) {
-    localStorage.setItem('modality', value);
+    safeLocalStorageSet('modality', value);
   }
   localStorageValue = value;
 };

package/dialog/lib/Dialog.tsx

@@ -14,16 +14,82 @@ export interface DialogProps {
   children: React.ReactNode;
 }
 
+/**
+ * This component is the container component and does not render any semantic elements. It provides
+ * a React Context model for the `Dialog` subcomponents. If you manually pass a `model` to all
+ * subcomponents, this container component isn't needed. If you do not pass a `model`, the `Dialog`
+ * container component will build a default one using `useDialogModel`. `Dialog` is a composition of a
+ * {@link Popup} component and has a similar structure to `Popup`.
+ */
 export const Dialog = createContainer()({
   displayName: 'Dialog',
   modelHook: useDialogModel,
   subComponents: {
+    /**
+     * A `Dialog.Body` is a thin wrapper around {@link CardBody Card.Body} and doesn't actually take
+     * a model. It adds `body` styling and nothing else.
+     */
     Body: Popup.Body,
+    /**
+     * A `Dialog.Card` is a wrapper around the {@link Card} component, but hooked up to a
+     * {@link DialogModel}. By default, this element has a `role=dialog`, `aria-labelledby` and an `id`.
+     * The behavior hook used is called {@link useDialogCard}.
+     */
     Card: DialogCard,
+    /**
+     * A `Dialog.CloseIcon` is an icon button that is the `X` at the top of a dialog. It will hide a
+     * dialog when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+     */
     CloseIcon: Popup.CloseIcon,
+    /**
+     * A `Dialog.Target` is any element that is meant to show the Dialog. The default component
+     * rendered by this component is a {@link SecondaryButton} element. You can override this by
+     * passing the desired component via `as`. Many examples above use `as={DeleteButton}`. If you
+     * want to render a {@link TertiaryButton} instead, use `as={TertiaryButton}`. The behavior hook
+     * used is called {@link usePopupTarget}.
+     *
+     * ```tsx
+     * const model = useDialogModel();
+     *
+     * // using this component
+     * <Dialog.Target>Show Dialog</Dialog.Target>
+     *
+     * // using props instead
+     * const dialogTargetButtonProps = useDialogTarget(model);
+     * <SecondaryButton {...dialogTargetButtonProps}>Show Dialog</SecondaryButton>
+     * ```
+     *
+     * `Dialog.Target` doesn't provide any styling by default. All styling comes from the default
+     * component used, which is {@link SecondaryButton}. If you don't want any styling, you can do
+     * the following:
+     *
+     * ```tsx
+     * <Dialog.Target as="button">Open</Dialog.Target>
+     * ```
+     *
+     * To add your own styling, you could either add a `css` prop, or make a styled button and pass
+     * that styled component via the `as` prop.
+     */
     Target: Popup.Target,
+    /**
+     * A `Dialog.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+     * heading to a {@link DialogModel}. It will add an `id` to the element that match the
+     * `aria-labelledby` that is applied to the `Dialog.Card` element for accessibility. The behavior
+     * hook used is called {@link usePopupHeading}.
+     */
     Heading: Popup.Heading,
+    /**
+     * A `Dialog.Popper` is a wrapper around {@link PopupPopper Popup.Popper}. The behavior
+     * hook used is called {@link useDialogPopper}.
+     */
+
     Popper: DialogPopper,
+    /**
+     * A `Dialog.CloseButton` is a button that will hide a dialog. By default, this is a
+     * {@link SecondaryButton} component, but `as` can be used to render any button element (i.e
+     * {@link DeleteButton} or {@link PrimaryButton}). The behavior hook used is called
+     * {@link usePopupCloseButton}.
+     */
     CloseButton: Popup.CloseButton,
   },
 })(({children}: DialogProps) => {

package/dialog/lib/DialogPopper.tsx

@@ -14,6 +14,9 @@ export const DialogPopper = createSubcomponent('div')({
   ({children, placement, popperOptions, ref, ...props}, Element, model) => {
     const popperProps = usePopupPopper(model, {placement, popperOptions}, ref);
     const elemProps = useDialogPopper(model, props);
+    if (model.state.visibility === 'hidden') {
+      return null;
+    }
     return (
       <Element {...elemProps}>
         <Popper {...popperProps}>{children}</Popper>

package/disclosure/lib/useDisclosureModel.tsx

@@ -22,8 +22,8 @@ export const useDisclosureModel = createModelHook({
     id,
     /**
      * Visibility state of the disclosed content. Models are allowed to extend the states to fit
-     * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-     * 'hidden'` rather than `visibility === 'visible'`
+     * their needs, so if you need to consistently determine "not hidden", use
+     * `visibility !== 'hidden'` rather than `visibility === 'visible'`
      */
     visibility,
   };