@workday/canvas-kit-react 6.8.10 → 6.9.0-next.3

package/dist/es6/common/lib/utils/models.js

@@ -1,3 +1,25 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /* eslint-disable react-hooks/rules-of-hooks */
 import React from 'react';
 /**
@@ -99,19 +121,151 @@ export var useEventMap = function (eventMap, state, config, events) {
 export var createEvents = function (events) { return function (config) {
     return { events: events, eventMap: config };
 }; };
-// const disclosureEvents = createEvents({
-//   show(event: Event | React.SyntheticEvent) {
-//     return {event};
-//   },
-// })({
-//   callbacks: {
-//     onShow: 'show',
-//   },
-//   guards: {
-//     shouldShow: 'show',
-//   },
-// });
-// useDisclosureModel({
-//   onShow({data, prevState})
-// });
-// <Tabs calbacks={ show: () => {}}
+function capitalize(string) {
+    return string[0].toUpperCase() + string.substring(1);
+}
+function getGuardName(eventName) {
+    return "should" + capitalize(eventName);
+}
+function getCallbackName(eventName) {
+    return "on" + capitalize(eventName);
+}
+// Merges config together in a way that is type safe and works at runtime with correct rules and order applied
+// to guards and callbacks.
+function mergeConfig(sourceConfig, newConfig) {
+    var result = __assign({}, sourceConfig);
+    var _loop_1 = function (key) {
+        if (typeof newConfig[key] === "function" &&
+            /(on)[A-Z]/.test(key) &&
+            typeof sourceConfig[key] === "function") {
+            // merge callbacks and ignore Typescript's errors. We've already tested call signatures
+            //  @ts-ignore
+            result[key] = function (data, state) {
+                // @ts-ignore
+                sourceConfig[key](data, state);
+                // @ts-ignore
+                newConfig[key](data, state);
+            };
+        }
+        else if (newConfig[key] &&
+            /(should)[A-Z]/.test(key) &&
+            sourceConfig[key]) {
+            // merge guards and ignore Typescript's errors. We've already tested call signatures
+            // @ts-ignore
+            result[key] = function (data, state) {
+                // @ts-ignore
+                return sourceConfig[key](data, state) && newConfig[key](data, state);
+            };
+        }
+        else {
+            // @ts-ignore
+            result[key] = newConfig[key];
+        }
+    };
+    for (var key in newConfig) {
+        _loop_1(key);
+    }
+    return result;
+}
+/**
+ * Factory function to create typed models with minimal Typescript required. It is a function that
+ * takes `defaultConfig` and `requiredConfig` and returns a function that will become the definition
+ * of the model. The config objects will be used to generate a `getElemProps` function that is used
+ * to separate model config an element props.
+ *
+ * Typescript will infer all config from the returned `state`, `events`, and the `defaultConfig` and
+ * the `requiredConfig`. `defaultConfig` serves the additional purpose of being a default value if
+ * no config value was provided. `requiredConfig` is a little odd in that config values are ignored
+ * and only used to extract types.
+ *
+ * @example
+ * const useModel = createModelHook({
+ *   defaultConfig: {
+ *     optional: 'right' as 'left' | 'right', // optional type casting
+ *   },
+ *   requiredConfig: {
+ *     size: 1, // values are only used for types and are ignored at runtime
+ *   }
+ * })(config => {
+ *   // config is pre-typed for you based on `defaultConfig`
+ * })
+ */
+export var createModelHook = function (options) {
+    var _a = options.defaultConfig, defaultConfig = _a === void 0 ? {} : _a, _b = options.requiredConfig, requiredConfig = _b === void 0 ? {} : _b, defaultContext = options.defaultContext, contextOverride = options.contextOverride;
+    // create a bunch of refs so we can define the `wrappedModel` function once.
+    var fnRef = { current: null };
+    var callbacksRef = { current: [] };
+    var guardsRef = { current: [] };
+    var Context = contextOverride || React.createContext(defaultContext || { state: {}, events: {} });
+    var getElemProps = function (props) {
+        // if (eventsRef.current === null) {
+        //   throw Error(
+        //     `useModel.getElemProps() must be called after useModel(). getElemProps needs to determine the events returned by the model to function correctly.\nExample:\nconst model = useModel();\nconst elemProps = useModel.getElemProps(props);`
+        //   );
+        // }
+        var elemProps = {};
+        for (var key in props) {
+            if (!defaultConfig.hasOwnProperty(key) &&
+                !requiredConfig.hasOwnProperty(key) &&
+                !callbacksRef.current.includes(key) &&
+                !guardsRef.current.includes(key)) {
+                // @ts-ignore  Typescript complains about index signatures and this type is never exposed in definitions, so suppress the error
+                elemProps[key] = props[key];
+            }
+        }
+        return elemProps;
+    };
+    // we use `any` here because we don't know what the type is here and it is internal. No use
+    // slowing down Typescript to bother type checking
+    function wrappedModelHook(config) {
+        var stateRef = React.useRef({});
+        var configRef = React.useRef({});
+        var eventsRef = React.useRef({});
+        var _a = fnRef.current(__assign(__assign({}, defaultConfig), config)), state = _a.state, events = _a.events, rest = __rest(_a, ["state", "events"]);
+        // update all the refs with current values
+        stateRef.current = state;
+        configRef.current = config || {};
+        eventsRef.current = events;
+        if (!callbacksRef.current.length) {
+            callbacksRef.current = keys(events).map(getCallbackName);
+        }
+        if (!guardsRef.current.length) {
+            guardsRef.current = keys(events).map(getGuardName);
+        }
+        var wrappedEvents = React.useMemo(function () {
+            return keys(eventsRef.current).reduce(function (result, key) {
+                result[key] = function (data) {
+                    // Invoke the configured guard if there is one
+                    if (!eventsRef.current[key]._wrapped) {
+                        var guardFnName = getGuardName(key);
+                        if (configRef.current[guardFnName] &&
+                            !configRef.current[guardFnName](data, stateRef.current)) {
+                            return;
+                        }
+                    }
+                    // call the event (setter)
+                    eventsRef.current[key](data);
+                    var callbackFnName = getCallbackName(key);
+                    if (!eventsRef.current[key]._wrapped) {
+                        if (configRef.current[callbackFnName]) {
+                            configRef.current[callbackFnName](data, stateRef.current);
+                        }
+                    }
+                };
+                // Mark this function has been wrapped so we can detect wrapped events and not call guards and callbacks multiple times
+                result[key]._wrapped = true;
+                return result;
+            }, {});
+        }, []);
+        return __assign({ state: state, events: wrappedEvents }, rest);
+    }
+    wrappedModelHook.getElemProps = getElemProps;
+    wrappedModelHook.defaultConfig = defaultConfig;
+    wrappedModelHook.requiredConfig = requiredConfig;
+    wrappedModelHook.mergeConfig = mergeConfig;
+    wrappedModelHook.Context = Context;
+    return function (fn) {
+        fnRef.current = fn;
+        return wrappedModelHook; // Typescript complains about the `fn` not matching the signature. It's okay Typescript. It works at runtime
+    };
+};

package/dist/es6/common/lib/utils/useModalityType.d.ts

@@ -0,0 +1,17 @@
+declare type Modality = 'mouse' | 'touch' | 'pen';
+/**
+ * Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook
+ * is useful if you have styles or behaviors that depend on the user's interaction type. For
+ * example, touch users can scroll horizontally easier than mouse users, so horizontal overflow
+ * might be more desired than overflow menus on touch devices. For devices that support multiple
+ * input types, the last used input type is saved. For these devices, consider the possibility this
+ * value could change after your component is rendered, so make sure you component rerenders
+ * properly in this case.
+ *
+ * Uses `PointerEvent.pointerType` to determine last used input.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
+ */
+export declare const useModalityType: () => Modality;
+export {};
+//# sourceMappingURL=useModalityType.d.ts.map

package/dist/es6/common/lib/utils/useModalityType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalityType.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useModalityType.ts"],"names":[],"mappings":"AAEA,aAAK,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;AA+B1C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,QAAO,QAkBlC,CAAC"}

package/dist/es6/common/lib/utils/useModalityType.js

@@ -0,0 +1,56 @@
+import React from 'react';
+// 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
+// you plan to manually test.
+//
+// 1. Initialize modality to localStorage
+//   a. if localStorage isn't primed, use clientWidth of the browsers
+//   b. if < 768, default to 'touch'
+//   c. else default to 'mouse'
+var localStorageValue = 'mouse'; //((typeof localStorage !== 'undefined'
+//   ? localStorage.getItem('modality')
+//   : '') ||
+//   (typeof document !== 'undefined'
+//     ? document.documentElement.clientWidth < 768
+//       ? 'touch'
+//       : ''
+//     : '') ||
+//   'mouse') as Modality;
+// Update the `localStorageValue`, but conditionally update localStorage only if the value has
+// changed. This prevents too many calls to `localStorage` which can be costly on spinning disk
+// drives
+var updateLocalStorage = function (value) {
+    // if (localStorageValue !== value) {
+    //   localStorage.setItem('modality', value);
+    // }
+    // localStorageValue = value;
+};
+/**
+ * Uses heuristics to determine if the user is on a touch device, uses a pen, or a mouse. This hook
+ * is useful if you have styles or behaviors that depend on the user's interaction type. For
+ * example, touch users can scroll horizontally easier than mouse users, so horizontal overflow
+ * might be more desired than overflow menus on touch devices. For devices that support multiple
+ * input types, the last used input type is saved. For these devices, consider the possibility this
+ * value could change after your component is rendered, so make sure you component rerenders
+ * properly in this case.
+ *
+ * Uses `PointerEvent.pointerType` to determine last used input.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/pointerType
+ */
+export var useModalityType = function () {
+    var _a = React.useState(localStorageValue), modality = _a[0], setModality = _a[1];
+    React.useEffect(function () {
+        var handlePointerDown = function (event) {
+            var value = event.pointerType;
+            setModality(value);
+            updateLocalStorage(value);
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        return function () {
+            document.removeEventListener('pointerdown', handlePointerDown);
+        };
+    }, []);
+    return modality;
+};

package/dist/es6/common/lib/utils/useMount.d.ts

@@ -2,10 +2,10 @@
  * Alias to `useEffect` with the intention to only run on mount/unmount.
  * Avoids the React lint errors and encodes intent.
  */
-export declare const useMount: (callback: () => void | (() => void)) => void;
+export declare const useMount: (callback: () => (() => void) | void) => void;
 /**
  * Alias to `useLayoutEffect` with the intention to only run on mount/unmount
  * Avoids the React lint errors and encodes intent.
  */
-export declare const useMountLayout: (callback: () => void | (() => void)) => void;
+export declare const useMountLayout: (callback: () => (() => void) | void) => void;
 //# sourceMappingURL=useMount.d.ts.map

package/dist/es6/common/lib/utils/useMount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMount.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useMount.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,QAAQ,+CAEpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,+CAE1B,CAAC"}
+{"version":3,"file":"useMount.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useMount.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,QAAQ,aAAc,MAAM,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,SAI3D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,aAAc,MAAM,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,SAIjE,CAAC"}

package/dist/es6/common/lib/utils/useMount.js

@@ -4,6 +4,8 @@ import React from 'react';
  * Avoids the React lint errors and encodes intent.
  */
 export var useMount = function (callback) {
+    // we only want this to be called once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     React.useEffect(callback, []);
 };
 /**
@@ -11,5 +13,7 @@ export var useMount = function (callback) {
  * Avoids the React lint errors and encodes intent.
  */
 export var useMountLayout = function (callback) {
+    // we only want this to be called once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     React.useLayoutEffect(callback, []);
 };

package/dist/es6/common/lib/utils/useUniqueId.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useUniqueId.ts"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,cAAkC,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,WAAW,qCAIvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qCAAc,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,qBAEzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}
+{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useUniqueId.ts"],"names":[],"mappings":"AAWA;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,cAAkC,CAAC;AAEhE;;;GAGG;AACH,eAAO,MAAM,WAAW,qCAIvB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,QAAQ,qCAAc,CAAC;AAEpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,MAAO,MAAM,SAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,YAE9B,CAAC"}

package/dist/es6/common/lib/utils/useWindowSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useWindowSize.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa;;;CAiBzB,CAAC"}
+{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/useWindowSize.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,aAAa;WAAe,MAAM;YAAU,MAAM;CAiB9D,CAAC"}

package/dist/es6/dialog/lib/Dialog.d.ts

@@ -1,26 +1,252 @@
 import React from 'react';
-import { PopupModel, PopupModelConfig } from '@workday/canvas-kit-react/popup';
-export interface DialogProps extends PopupModelConfig {
+export interface DialogProps {
     /**
      * The contents of the Dialog. Can be `Dialog` children or any valid elements.
      */
     children: React.ReactNode;
-    /**
-     * A PopupModel. The following behaviors will be automatically applied to this model:
-     * - useInitialFocus
-     * - useReturnFocus
-     * - useCloseOnOutsideClick
-     * - useCloseOnEscape
-     */
-    model?: PopupModel;
 }
-export declare const Dialog: import("../../common").Component<DialogProps> & {
-    Body: import("../../common").ElementComponent<"div", import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react/common").ColorStyleProps & import("@workday/canvas-kit-labs-react/common").DepthStyleProps & import("@workday/canvas-kit-labs-react/common").FlexItemStyleProps & import("@workday/canvas-kit-labs-react/common").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps>;
-    Card: import("../../common").ElementComponent<"div", import("./DialogCard").DialogCardProps>;
-    CloseIcon: import("../../common").ElementComponent<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps>;
-    Target: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupTarget").PopupTargetProps>;
-    Heading: import("../../common").ElementComponent<"h2", import("../../popup/lib/PopupHeading").PopupHeadingProps>;
-    Popper: import("../../common").ElementComponent<"div", import("./DialogPopper").DialogPopperProps>;
-    CloseButton: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupCloseButton").PopupCloseButtonProps>;
+export declare const Dialog: import("../../common").ComponentM<DialogProps & Partial<{
+    returnFocusRef: React.RefObject<any> | undefined;
+    initialFocusRef: React.RefObject<any> | undefined;
+    id: string;
+    initialVisibility: import("../..").Visibility;
+}> & {
+    onUpdatePlacement?: ((data: {
+        placement: import("@popperjs/core").Placement;
+    }, prevState: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => void) | undefined;
+    onShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => void) | undefined;
+    onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => void) | undefined;
+} & {
+    shouldUpdatePlacement?: ((data: {
+        placement: import("@popperjs/core").Placement;
+    }, state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => boolean) | undefined;
+    shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => boolean) | undefined;
+    shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    }) => boolean) | undefined;
+}, {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}> & {
+    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    Card: import("../../common").ElementComponentM<"div", import("../../popup/lib/PopupCard").PopupCardProps & import("../../common").PropsWithModel<{
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    CloseIcon: import("../../common").ElementComponentM<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    Target: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    Heading: import("../../common").ElementComponentM<"h2", import("../../popup/lib/PopupHeading").PopupHeadingProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    Popper: import("../../common").ElementComponentM<"div", import("../../popup/lib/PopupPopper").PopupPopperProps & import("../../common").PropsWithModel<{
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
+    CloseButton: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupCloseButton").PopupCloseButtonProps, {
+        state: {
+            stackRef: React.RefObject<HTMLDivElement>;
+            targetRef: React.RefObject<HTMLButtonElement>;
+            initialFocusRef: React.RefObject<any> | undefined;
+            returnFocusRef: React.RefObject<any> | undefined;
+            placement: import("@popperjs/core").Placement;
+            id: string;
+            visibility: import("../..").Visibility;
+        };
+        events: {
+            updatePlacement(data: {
+                placement: import("@popperjs/core").Placement;
+            }): void;
+            show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+            hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+        };
+    }>;
 };
 //# sourceMappingURL=Dialog.d.ts.map

package/dist/es6/dialog/lib/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAGL,UAAU,EACV,gBAAgB,EACjB,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACnD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED,eAAO,MAAM,MAAM;;;;;;;;CAgBjB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../dialog/lib/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAcjB,CAAC"}

package/dist/es6/dialog/lib/Dialog.js

@@ -1,27 +1,12 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import React from 'react';
-import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
-import { Popup, PopupModelContext, } from '@workday/canvas-kit-react/popup';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { Popup } from '@workday/canvas-kit-react/popup';
 import { DialogPopper } from './DialogPopper';
 import { DialogCard } from './DialogCard';
 import { useDialogModel } from './hooks';
-export var Dialog = createComponent()({
+export var Dialog = createContainer()({
     displayName: 'Dialog',
-    Component: function (_a) {
-        var children = _a.children, model = _a.model, config = __rest(_a, ["children", "model"]);
-        var value = useDefaultModel(model, config, useDialogModel);
-        return React.createElement(PopupModelContext.Provider, { value: value }, children);
-    },
+    modelHook: useDialogModel,
     subComponents: {
         Body: Popup.Body,
         Card: DialogCard,
@@ -31,4 +16,7 @@ export var Dialog = createComponent()({
         Popper: DialogPopper,
         CloseButton: Popup.CloseButton,
     },
+})(function (_a) {
+    var children = _a.children;
+    return React.createElement(React.Fragment, null, children);
 });