@workday/canvas-kit-react 7.1.5 → 7.2.0-427-next.2

package/dist/es6/popup/lib/Popup.d.ts

@@ -5,7 +5,24 @@ export interface PopupProps {
      */
     children: React.ReactNode;
 }
-export declare const Popup: import("../../common").ComponentM<PopupProps & Partial<{
+/**
+ * This component is a container component that has no semantic element. It provides a React Context
+ * model for all Popup subcomponents. A `model` can be manually passed to subcomponents to override
+ * the model context.
+ *
+ * ```tsx
+ * // using Popup
+ * <Popup model={model}>
+ *   <Popup.Target /> // no model here
+ * </Popup>
+ *
+ * // using models on subcomponents
+ * <>
+ *   <Popup.Target model={model} />
+ * </>
+ * ```
+ */
+export declare const Popup: import("@workday/canvas-kit-react/common").ComponentM<PopupProps & Partial<{
     returnFocusRef: React.RefObject<any> | undefined;
     initialFocusRef: React.RefObject<any> | undefined;
     id: string;
@@ -20,7 +37,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -29,7 +46,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
     onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -38,7 +55,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => void) | undefined;
 } & {
     shouldUpdatePlacement?: ((data: {
@@ -50,7 +67,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -59,7 +76,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
     shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
         stackRef: React.RefObject<HTMLDivElement>;
@@ -68,7 +85,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     }) => boolean) | undefined;
 }, {
     state: {
@@ -78,7 +95,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -88,7 +105,36 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
-    Heading: import("../../common").ElementComponentM<"h2", import("./PopupHeading").PopupHeadingProps, {
+    /**
+     * A `Popup.Target` is any element that is meant to show the Popup. 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 = usePopupModel();
+     *
+     * // using this component
+     * <Popup.Target>Show Popup</Popup.Target>
+     *
+     * // using props instead
+     * const popupTargetButtonProps = usePopupTarget(model);
+     * <SecondaryButton {...popupTargetButtonProps}>Show Popup</SecondaryButton>
+     * ```
+     *
+     * `Popup.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
+     * <Popup.Target as="button">Open</Popup.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: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -96,7 +142,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -106,7 +152,17 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             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>, {
+    /**
+     * A `Popup.Popper` is a {@link Popper} component that is hooked up to the {@link PopupModel}
+     * automatically. The behavior hook used is called {@link usePopupPopper}.
+     *
+     * > **Note:** `Popup.Popper` renders any children to a `div` element created by the
+     * > {@link PopupStack}. This element is not controlled by React, so any extra element props
+     * > will _not_ be forwarded. The `ref` will point to the `div` element created by the
+     * > `PopupStack`, however. If you wish to add extra props to an element, add them to the
+     * > {@link PopupCard Popup.Card} instead.
+     */
+    Popper: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PopupPopper").PopupPopperProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -114,7 +170,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -124,7 +180,12 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Card: import("../../common").ElementComponentM<"div", import("./PopupCard").PopupCardProps, {
+    /**
+     * A `Popup.Card` is a wrapper around the {@link Card} component, but hooked up to a
+     * {@link PopupModel}. By default, this element has a `role=dialog` and an `aria-labelledby`.
+     * The behavior hook used is called {@link usePopupCard}.
+     */
+    Card: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./PopupCard").PopupCardProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -132,7 +193,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -142,7 +203,11 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    CloseIcon: import("../../common").ElementComponentM<"button", import("./PopupCloseIcon").PopupCloseIconProps, {
+    /**
+     * A `Popup.CloseIcon` is an icon button that is the `X` in the top of a popup. It will hide a
+     * popup when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+     */
+    CloseIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PopupCloseIcon").PopupCloseIconProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -150,7 +215,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -160,7 +225,13 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Target: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, {}, {
+    /**
+     * A `Popup.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+     * heading to a {@link PopupModel}. It will add an `id` to the element that match the
+     * `aria-labelledby` that is applied to the `Popup.Card` element for accessibility. The behavior
+     * hook used is called {@link usePopupHeading}.
+     */
+    Heading: import("@workday/canvas-kit-react/common").ElementComponentM<"h2", import("./PopupHeading").PopupHeadingProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -168,7 +239,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -178,7 +249,11 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    Popper: import("../../common").ElementComponentM<"div", import("./PopupPopper").PopupPopperProps, {
+    /**
+     * A `Popup.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: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../..").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").GridItemStyleProps & import("../..").LayoutStyleProps & import("../..").OtherStyleProps & import("../..").PositionStyleProps & import("../..").SpaceStyleProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -186,7 +261,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {
@@ -196,7 +271,13 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         };
     }>;
-    CloseButton: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("./PopupCloseButton").PopupCloseButtonProps, {
+    /**
+     * A `Popup.CloseButton` is a button that will hide a popup. 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: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("./PopupCloseButton").PopupCloseButtonProps, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;
@@ -204,7 +285,7 @@ export declare const Popup: import("../../common").ComponentM<PopupProps & Parti
             returnFocusRef: React.RefObject<any> | undefined;
             placement: import("@popperjs/core").Placement;
             id: string;
-            visibility: import("../..").Visibility;
+            visibility: "hidden" | "visible";
         };
         events: {
             updatePlacement(data: {

package/dist/es6/popup/lib/Popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAchB,CAAC"}
+{"version":3,"file":"Popup.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAId;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;;;;;;;;;;;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;;;;;;;;;;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;IAEH;;;;;OAKG;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

package/dist/es6/popup/lib/Popup.js

@@ -8,19 +8,99 @@ import { PopupHeading } from './PopupHeading';
 import { PopupCloseIcon } from './PopupCloseIcon';
 import { PopupCloseButton } from './PopupCloseButton';
 import { PopupBody } from './PopupBody';
-export var Popup = createContainer()({
+/**
+ * This component is a container component that has no semantic element. It provides a React Context
+ * model for all Popup subcomponents. A `model` can be manually passed to subcomponents to override
+ * the model context.
+ *
+ * ```tsx
+ * // using Popup
+ * <Popup model={model}>
+ *   <Popup.Target /> // no model here
+ * </Popup>
+ *
+ * // using models on subcomponents
+ * <>
+ *   <Popup.Target model={model} />
+ * </>
+ * ```
+ */
+export const Popup = createContainer()({
     displayName: 'Popup',
     modelHook: usePopupModel,
     subComponents: {
-        Heading: PopupHeading,
-        Body: PopupBody,
-        Card: PopupCard,
-        CloseIcon: PopupCloseIcon,
+        /**
+         * A `Popup.Target` is any element that is meant to show the Popup. 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 = usePopupModel();
+         *
+         * // using this component
+         * <Popup.Target>Show Popup</Popup.Target>
+         *
+         * // using props instead
+         * const popupTargetButtonProps = usePopupTarget(model);
+         * <SecondaryButton {...popupTargetButtonProps}>Show Popup</SecondaryButton>
+         * ```
+         *
+         * `Popup.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
+         * <Popup.Target as="button">Open</Popup.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: PopupTarget,
+        /**
+         * A `Popup.Popper` is a {@link Popper} component that is hooked up to the {@link PopupModel}
+         * automatically. The behavior hook used is called {@link usePopupPopper}.
+         *
+         * > **Note:** `Popup.Popper` renders any children to a `div` element created by the
+         * > {@link PopupStack}. This element is not controlled by React, so any extra element props
+         * > will _not_ be forwarded. The `ref` will point to the `div` element created by the
+         * > `PopupStack`, however. If you wish to add extra props to an element, add them to the
+         * > {@link PopupCard Popup.Card} instead.
+         */
         Popper: PopupPopper,
+        /**
+         * A `Popup.Card` is a wrapper around the {@link Card} component, but hooked up to a
+         * {@link PopupModel}. By default, this element has a `role=dialog` and an `aria-labelledby`.
+         * The behavior hook used is called {@link usePopupCard}.
+         */
+        Card: PopupCard,
+        /**
+         * A `Popup.CloseIcon` is an icon button that is the `X` in the top of a popup. It will hide a
+         * popup when clicked. The behavior hook used is called {@link usePopupCloseButton}.
+         */
+        CloseIcon: PopupCloseIcon,
+        /**
+         * A `Popup.Heading` is a wrapper around {@link CardHeading Card.Heading} that connect the
+         * heading to a {@link PopupModel}. It will add an `id` to the element that match the
+         * `aria-labelledby` that is applied to the `Popup.Card` element for accessibility. The behavior
+         * hook used is called {@link usePopupHeading}.
+         */
+        Heading: PopupHeading,
+        /**
+         * A `Popup.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: PopupBody,
+        /**
+         * A `Popup.CloseButton` is a button that will hide a popup. 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: PopupCloseButton,
     },
-})(function (_a) {
-    var children = _a.children;
+})(({ children }) => {
     return React.createElement(React.Fragment, null, children);
 });

package/dist/es6/popup/lib/PopupBody.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export declare const PopupBody: 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>, {
+export declare const PopupBody: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../..").BackgroundStyleProps & import("../../layout/lib/utils/border/color").BorderColorStyleProps & import("../../layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("../../layout/lib/utils/border/radius").BorderRadiusStyleProps & import("../../layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("../../layout/lib/utils/border/width").BorderWidthStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").GridItemStyleProps & import("../..").LayoutStyleProps & import("../..").OtherStyleProps & import("../..").PositionStyleProps & import("../..").SpaceStyleProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -7,7 +7,7 @@ export declare const PopupBody: import("../../common").ElementComponentM<"div",
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {

package/dist/es6/popup/lib/PopupBody.js

@@ -1,21 +1,10 @@
-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);
-};
 import * as React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { Card } from '@workday/canvas-kit-react/card';
 import { usePopupModel } from './hooks';
-export var PopupBody = createSubcomponent('div')({
+export const PopupBody = createSubcomponent('div')({
     displayName: 'Popup.Body',
     modelHook: usePopupModel,
-})(function (elemProps) {
-    return React.createElement(Card.Body, __assign({ overflowY: "auto" }, elemProps));
+})(elemProps => {
+    return React.createElement(Card.Body, Object.assign({ overflowY: "auto", padding: "xxs" }, elemProps));
 });

package/dist/es6/popup/lib/PopupCard.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Card } from '@workday/canvas-kit-react/card';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { StackStyleProps } from '@workday/canvas-kit-react/layout';
-export interface PopupCardProps extends ExtractProps<typeof Card, never>, Partial<StackStyleProps> {
+import { FlexStyleProps } from '@workday/canvas-kit-react/layout';
+export declare type FlexAndBoxProps = ExtractProps<typeof Card, never> & FlexStyleProps;
+export interface PopupCardProps extends FlexAndBoxProps {
     children?: React.ReactNode;
 }
-export declare const PopupCard: import("../../common").ElementComponentM<"div", PopupCardProps, {
+export declare const PopupCard: import("@workday/canvas-kit-react/common").ElementComponentM<"div", PopupCardProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -13,7 +14,7 @@ export declare const PopupCard: import("../../common").ElementComponentM<"div",
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {

package/dist/es6/popup/lib/PopupCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAQ,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAKxE,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC;IAChG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAmCD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAgCpB,CAAC"}
+{"version":3,"file":"PopupCard.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,IAAI,EAAC,MAAM,gCAAgC,CAAC;AAEpD,OAAO,EAKL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAO,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAKtE,oBAAY,eAAe,GAAG,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,GAAG,cAAc,CAAC;AAChF,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAuED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EA6BpB,CAAC"}

package/dist/es6/popup/lib/PopupCard.js

@@ -1,43 +1,25 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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;
-};
 import * as React from 'react';
 import { keyframes } from '@emotion/react';
 import { Card } from '@workday/canvas-kit-react/card';
 import { space, type } from '@workday/canvas-kit-react/tokens';
 import { styled, getTranslateFromOrigin, useConstant, createSubcomponent, } from '@workday/canvas-kit-react/common';
-import { Stack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { getTransformFromPlacement } from './getTransformFromPlacement';
 import { usePopupCard, usePopupModel } from './hooks';
-var popupAnimation = function (transformOrigin) {
-    var translate = getTranslateFromOrigin(transformOrigin, space.xxs);
-    return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
+const popupAnimation = (transformOrigin) => {
+    const translate = getTranslateFromOrigin(transformOrigin, space.xxs);
+    return keyframes `
+    0% {
+      opacity: 0;
+      transform: translate(${translate.x}px, ${translate.y}px);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0);
+    }
+  `;
 };
-var StyledPopupCard = styled(Card)(type.levels.subtext.large, function (_a) {
-    var transformOrigin = _a.transformOrigin;
+const StyledPopupCard = styled(Card)(({ transformOrigin, theme }) => {
     if (transformOrigin == null) {
         return {};
     }
@@ -45,25 +27,55 @@ var StyledPopupCard = styled(Card)(type.levels.subtext.large, function (_a) {
         animation: popupAnimation(transformOrigin),
         animationDuration: '150ms',
         animationTimingFunction: 'ease-out',
-        transformOrigin: transformOrigin.vertical + " " + transformOrigin.horizontal,
+        transformOrigin: `${transformOrigin.vertical} ${transformOrigin.horizontal}`,
+        [theme.canvas.breakpoints.down('s')]: {
+            animation: popupAnimation({ vertical: 'bottom', horizontal: 'center' }),
+            animationDuration: '150ms',
+            animationTimingFunction: 'ease-out',
+            transformOrigin: 'bottom center',
+        },
         // Allow overriding of animation in special cases
         '.wd-no-animation &': {
             animation: 'none',
         },
     };
 });
-export var PopupCard = createSubcomponent('div')({
+function getSpace(value) {
+    if (value && value in space) {
+        return space[value];
+    }
+    else {
+        return value;
+    }
+}
+function getMaxHeight(margin) {
+    // set the default margin offset to space.xl
+    let marginOffset = space.xl;
+    if (margin) {
+        // parse the margin prop
+        if (typeof margin === 'string') {
+            const marginValues = margin.split(' ');
+            const marginTop = getSpace(marginValues[0]);
+            // If provided, use the specific margin-bottom in the shorthand, otherwise use the margin-top value
+            const marginBottom = getSpace(marginValues[2]) || marginTop;
+            marginOffset = `(${marginTop} + ${marginBottom})`;
+        }
+        else {
+            // if margin is a number, double it to get the offset
+            marginOffset = `${margin * 2}px`;
+        }
+    }
+    return `calc(100vh - ${marginOffset})`;
+}
+export const PopupCard = createSubcomponent('div')({
     displayName: 'Popup.Card',
     modelHook: usePopupModel,
     elemPropsHook: usePopupCard,
-})(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    var transformOrigin = React.useMemo(function () {
+})(({ children, ...elemProps }, Element, model) => {
+    const transformOrigin = React.useMemo(() => {
         return getTransformFromPlacement(model.state.placement || 'bottom');
     }, [model.state.placement]);
-    // As is a Stack that will render an element of `Element`
-    var As = useConstant(function () { return Stack.as(Element); });
-    return (React.createElement(StyledPopupCard, __assign({ as: As, transformOrigin: transformOrigin, position: "relative", padding: "l", depth: 5, maxWidth: "calc(100vw - " + space.l + ")", spacing: 0, flexDirection: "column", minHeight: 0, maxHeight: "calc(100vh - " + (elemProps.margin ? space[elemProps.margin] || elemProps.margin : space.xl) + " * 2)", overflowY: "auto" // force IE11 to limit the flex size of the card. Without this, the body isn't allowed to overflow properly: https://github.com/philipwalton/flexbugs/issues/216#issuecomment-453053557
-     }, elemProps), children));
+    // As is a Flex that will render an element of `Element`
+    const As = useConstant(() => Flex.as(Element));
+    return (React.createElement(StyledPopupCard, Object.assign({ as: As, transformOrigin: transformOrigin, position: "relative", depth: 5, maxWidth: `calc(100vw - ${space.l})`, flexDirection: "column", minHeight: 0, padding: "m", maxHeight: getMaxHeight(elemProps.margin), overflowY: "auto" }, type.levels.subtext.large, elemProps), children));
 });
-var templateObject_1;

package/dist/es6/popup/lib/PopupCloseButton.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export interface PopupCloseButtonProps {
     children?: React.ReactNode;
 }
-export declare const PopupCloseButton: import("../../common").ElementComponentM<import("../../common").ElementComponent<"button", import("../../button").SecondaryButtonProps>, PopupCloseButtonProps, {
+export declare const PopupCloseButton: import("@workday/canvas-kit-react/common").ElementComponentM<import("@workday/canvas-kit-react/common").ElementComponent<"button", import("@workday/canvas-kit-react/button").SecondaryButtonProps>, PopupCloseButtonProps, {
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -10,7 +10,7 @@ export declare const PopupCloseButton: import("../../common").ElementComponentM<
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {

package/dist/es6/popup/lib/PopupCloseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupCloseButton.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;EAM3B,CAAC"}
+{"version":3,"file":"PopupCloseButton.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupCloseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;EAU3B,CAAC"}