@instructure/ui-drawer-layout 8.14.1-snapshot.7 → 8.15.1-snapshot.2

package/types/DrawerLayout/index.d.ts

@@ -1,59 +1,152 @@
 /** @jsx jsx */
-import { Component } from 'react';
+import React, { Component } from 'react';
+import type { PlacementPropValues } from '@instructure/ui-position';
 import { DrawerContent } from './DrawerContent';
+import type { DrawerLayoutContentProps, DrawerContentSize } from './DrawerContent/props';
 import { DrawerTray } from './DrawerTray';
+import type { DrawerLayoutTrayProps } from './DrawerTray/props';
 import { jsx } from '@instructure/emotion';
-import type { DrawerLayoutProps } from './props';
+import type { DrawerLayoutProps, DrawerLayoutState } from './props';
+declare type TrayChild = React.ComponentElement<DrawerLayoutTrayProps & React.Attributes, DrawerTray>;
+declare type ContentChild = React.ComponentElement<DrawerLayoutContentProps & React.Attributes, DrawerContent>;
 /**
 ---
 category: components
 ---
+@tsProps
 **/
-declare class DrawerLayout extends Component<DrawerLayoutProps> {
+declare class DrawerLayout extends Component<DrawerLayoutProps, DrawerLayoutState> {
     static readonly componentId = "DrawerLayout";
     static locatorAttribute: string;
     static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<"children" | "dir" | "minWidth" | "onOverlayTrayChange">;
     static allowedProps: readonly ("children" | "dir" | "minWidth" | "onOverlayTrayChange")[];
     static defaultProps: {
-        children: null;
         minWidth: string;
-        onOverlayTrayChange: (shouldOverlayTray: any) => void;
     };
     static Content: typeof DrawerContent;
     static Tray: typeof DrawerTray;
-    constructor(props: any);
-    _content: null;
+    constructor(props: DrawerLayoutProps);
+    private readonly _id;
+    private _content;
+    private _tray;
     ref: Element | null;
     handleRef: (el: Element | null) => void;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
-    get trayProps(): any;
-    get trayPlacement(): any;
-    get contentMargin(): any;
+    componentDidUpdate(): void;
+    get trayProps(): {
+        label: string;
+        children?: React.ReactNode | (() => React.ReactNode);
+        render?: (() => React.ReactNode) | undefined;
+        placement?: import("./DrawerTray/props").DrawerTrayPlacement | undefined;
+        open?: boolean | undefined;
+        onOpen?: ((transitionType?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+        onClose?: ((transitionType?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+        border?: boolean | undefined;
+        shadow?: boolean | undefined;
+        contentRef?: ((element: HTMLDivElement | null) => void) | undefined;
+        mountNode?: import("@instructure/ui-position").PositionMountNode | undefined;
+    } & {
+        defaultFocusElement?: import("@instructure/shared-types").UIElement | undefined;
+        liveRegion?: import("@instructure/shared-types").LiveRegion | undefined;
+        onDismiss?: ((event: React.UIEvent<Element, UIEvent> | React.FocusEvent<Element, Element>, documentClick?: boolean | undefined) => void) | undefined;
+        shouldContainFocus?: boolean | undefined;
+        shouldReturnFocus?: boolean | undefined;
+        shouldCloseOnDocumentClick?: boolean | undefined;
+        shouldCloseOnEscape?: boolean | undefined;
+    } & {
+        onTransition?: ((toState: import("@instructure/ui-motion/src/Transition/BaseTransition/props").BaseTransitionStatesType, fromState: import("@instructure/ui-motion/src/Transition/BaseTransition/props").BaseTransitionStatesType) => void) | undefined;
+        onEnter?: (() => void) | undefined;
+        onEntering?: (() => void) | undefined;
+        onEntered?: ((type?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+        onExit?: (() => void) | undefined;
+        onExiting?: (() => void) | undefined;
+        onExited?: ((type?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+    } & import("@instructure/ui-i18n").BidirectionalProps & {
+        styles?: import("./DrawerTray/props").DrawerLayoutTrayStyle | undefined;
+        makeStyles?: ((extraArgs?: Record<string, unknown> | undefined) => void) | undefined;
+    } & {
+        themeOverride?: Partial<import("@instructure/shared-types").DrawerLayoutTrayTheme> | undefined;
+    } & import("@instructure/shared-types/types/UtilityTypes").OtherHTMLAttributes<{
+        label: string;
+        children?: React.ReactNode | (() => React.ReactNode);
+        render?: (() => React.ReactNode) | undefined;
+        placement?: import("./DrawerTray/props").DrawerTrayPlacement | undefined;
+        open?: boolean | undefined;
+        onOpen?: ((transitionType?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+        onClose?: ((transitionType?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+        border?: boolean | undefined;
+        shadow?: boolean | undefined;
+        contentRef?: ((element: HTMLDivElement | null) => void) | undefined;
+        mountNode?: import("@instructure/ui-position").PositionMountNode | undefined;
+    } & {
+        defaultFocusElement?: import("@instructure/shared-types").UIElement | undefined;
+        liveRegion?: import("@instructure/shared-types").LiveRegion | undefined;
+        onDismiss?: ((event: React.UIEvent<Element, UIEvent> | React.FocusEvent<Element, Element>, documentClick?: boolean | undefined) => void) | undefined;
+        shouldContainFocus?: boolean | undefined;
+        shouldReturnFocus?: boolean | undefined;
+        shouldCloseOnDocumentClick?: boolean | undefined;
+        shouldCloseOnEscape?: boolean | undefined;
+    } & {
+        onTransition?: ((toState: import("@instructure/ui-motion/src/Transition/BaseTransition/props").BaseTransitionStatesType, fromState: import("@instructure/ui-motion/src/Transition/BaseTransition/props").BaseTransitionStatesType) => void) | undefined;
+        onEnter?: (() => void) | undefined;
+        onEntering?: (() => void) | undefined;
+        onEntered?: ((type?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+        onExit?: (() => void) | undefined;
+        onExiting?: (() => void) | undefined;
+        onExited?: ((type?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+    } & import("@instructure/ui-i18n").BidirectionalProps, React.AllHTMLAttributes<{
+        label: string;
+        children?: React.ReactNode | (() => React.ReactNode);
+        render?: (() => React.ReactNode) | undefined;
+        placement?: import("./DrawerTray/props").DrawerTrayPlacement | undefined;
+        open?: boolean | undefined;
+        onOpen?: ((transitionType?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+        onClose?: ((transitionType?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+        border?: boolean | undefined;
+        shadow?: boolean | undefined;
+        contentRef?: ((element: HTMLDivElement | null) => void) | undefined;
+        mountNode?: import("@instructure/ui-position").PositionMountNode | undefined;
+    } & {
+        defaultFocusElement?: import("@instructure/shared-types").UIElement | undefined;
+        liveRegion?: import("@instructure/shared-types").LiveRegion | undefined;
+        onDismiss?: ((event: React.UIEvent<Element, UIEvent> | React.FocusEvent<Element, Element>, documentClick?: boolean | undefined) => void) | undefined;
+        shouldContainFocus?: boolean | undefined;
+        shouldReturnFocus?: boolean | undefined;
+        shouldCloseOnDocumentClick?: boolean | undefined;
+        shouldCloseOnEscape?: boolean | undefined;
+    } & {
+        onTransition?: ((toState: import("@instructure/ui-motion/src/Transition/BaseTransition/props").BaseTransitionStatesType, fromState: import("@instructure/ui-motion/src/Transition/BaseTransition/props").BaseTransitionStatesType) => void) | undefined;
+        onEnter?: (() => void) | undefined;
+        onEntering?: (() => void) | undefined;
+        onEntered?: ((type?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+        onExit?: (() => void) | undefined;
+        onExiting?: (() => void) | undefined;
+        onExited?: ((type?: import("@instructure/ui-motion/src/Transition/BaseTransition/props").TransitionType | undefined) => void) | undefined;
+    } & import("@instructure/ui-i18n").BidirectionalProps>> & React.Attributes;
+    get trayPlacement(): PlacementPropValues;
+    get contentMargin(): number;
     get contentStyle(): {
         marginLeft: string;
         marginRight: string;
     };
-    handleTrayContentRef: (el: any) => void;
-    shouldOverlayTray(minWidth: any, trayWidth: any, contentWidth: any, trayIsOverlayed: any): boolean;
-    getNextState(minWidth: any, trayWidth: any, contentWidth: any, trayIsOverlayed: any): {
-        trayWidth: any;
-        contentWidth: any;
+    handleTrayContentRef: (el: HTMLDivElement | null) => void;
+    shouldOverlayTray(minWidth: string, trayWidth: number, contentWidth: number, trayIsOverlayed: boolean): boolean;
+    getNextState(minWidth: string, trayWidth: number, contentWidth: number, trayIsOverlayed: boolean): {
+        trayWidth: number;
+        contentWidth: number;
         shouldOverlayTray: boolean;
     };
-    notifyOverlayTrayChange(shouldOverlayTray: any): void;
-    handleContentSizeChange: ({ width }: {
-        width: any;
-    }) => void;
+    notifyOverlayTrayChange(shouldOverlayTray: boolean): void;
+    handleContentSizeChange: ({ width }: DrawerContentSize) => void;
     handleTraySizeChange: ({ width }: {
-        width: any;
+        width: number;
     }) => void;
     handleTrayTransitionEnter: () => void;
     handleTrayTransitionExit: () => void;
-    renderChildren(): any;
+    renderChildren(): (TrayChild | ContentChild)[];
     render(): jsx.JSX.Element;
 }
 export default DrawerLayout;
 export { DrawerLayout, DrawerContent, DrawerTray };
-export declare const DrawerLayoutContext: import("react").Context<boolean>;
+export declare const DrawerLayoutContext: React.Context<boolean>;
 //# sourceMappingURL=index.d.ts.map

package/types/DrawerLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DrawerLayout/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAY,SAAS,EAAiB,MAAM,OAAO,CAAA;AAc1D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEhD;;;;GAIG;AACH,cAGM,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACrD,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,gBAAgB,SAAuB;IAC9C,MAAM,CAAC,SAAS,iIAAY;IAC5B,MAAM,CAAC,YAAY,uEAAe;IAClC,MAAM,CAAC,YAAY;;;;MAKlB;IAED,MAAM,CAAC,OAAO,uBAAgB;IAC9B,MAAM,CAAC,IAAI,oBAAa;gBAGZ,KAAK,KAAA;IAajB,QAAQ,OAAO;IAEf,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,IAAI,SAAS,QAMZ;IAED,IAAI,aAAa,QAIhB;IAED,IAAI,aAAa,QAKhB;IAED,IAAI,YAAY;;;MA2Bf;IAGD,oBAAoB,oBAGnB;IAGD,iBAAiB,CAAC,QAAQ,KAAA,EAAE,SAAS,KAAA,EAAE,YAAY,KAAA,EAAE,eAAe,KAAA;IAapE,YAAY,CAAC,QAAQ,KAAA,EAAE,SAAS,KAAA,EAAE,YAAY,KAAA,EAAE,eAAe,KAAA;;;;;IAgB/D,uBAAuB,CAAC,iBAAiB,KAAA;IAQzC,uBAAuB;;eAiBtB;IAGD,oBAAoB;;eAiBnB;IAED,yBAAyB,aAUxB;IAED,wBAAwB,aAEvB;IAED,cAAc;IAyEd,MAAM;CAkBP;AACD,eAAe,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,CAAA;AAClD,eAAO,MAAM,mBAAmB,kCAAuB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DrawerLayout/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAY,SAAS,EAAiB,MAAM,OAAO,CAAA;AAcjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,KAAK,EACV,wBAAwB,EACxB,iBAAiB,EAClB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE/D,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAIrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAEnE,aAAK,SAAS,GAAG,KAAK,CAAC,gBAAgB,CACrC,qBAAqB,GAAG,KAAK,CAAC,UAAU,EACxC,UAAU,CACX,CAAA;AACD,aAAK,YAAY,GAAG,KAAK,CAAC,gBAAgB,CACxC,wBAAwB,GAAG,KAAK,CAAC,UAAU,EAC3C,aAAa,CACd,CAAA;AAGD;;;;;GAKG;AACH,cAGM,YAAa,SAAQ,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IACxE,MAAM,CAAC,QAAQ,CAAC,WAAW,kBAAiB;IAE5C,MAAM,CAAC,gBAAgB,SAAuB;IAC9C,MAAM,CAAC,SAAS,iIAAY;IAC5B,MAAM,CAAC,YAAY,uEAAe;IAClC,MAAM,CAAC,YAAY;;MAElB;IAED,MAAM,CAAC,OAAO,uBAAgB;IAC9B,MAAM,CAAC,IAAI,oBAAa;gBAEZ,KAAK,EAAE,iBAAiB;IAYpC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAQ;IAC5B,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,KAAK,CAA8B;IAE3C,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,IAAI,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+EAOZ;IAED,IAAI,aAAa,IAAI,mBAAmB,CAIvC;IAED,IAAI,aAAa,WAGhB;IAED,IAAI,YAAY;;;MAwBf;IAED,oBAAoB,OAAQ,cAAc,GAAG,IAAI,UAEhD;IAED,iBAAiB,CACf,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,eAAe,EAAE,OAAO;IAa1B,YAAY,CACV,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,eAAe,EAAE,OAAO;;;;;IAgB1B,uBAAuB,CAAC,iBAAiB,EAAE,OAAO;IAQlD,uBAAuB,cAAe,iBAAiB,UActD;IAED,oBAAoB;eAAwB,MAAM;eAejD;IAED,yBAAyB,aAQxB;IAED,wBAAwB,aAEvB;IAED,cAAc;IA4Dd,MAAM;CAcP;AACD,eAAe,YAAY,CAAA;AAC3B,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,CAAA;AAClD,eAAO,MAAM,mBAAmB,wBAAuB,CAAA"}

package/types/DrawerLayout/props.d.ts

@@ -1,18 +1,34 @@
-/// <reference types="react" />
+import React from 'react';
 import type { BidirectionalProps } from '@instructure/ui-i18n';
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 import type { PropValidators } from '@instructure/shared-types';
 declare type DrawerLayoutOwnProps = {
+    /**
+     * Exactly one of each of the following child types: `DrawerLayout.Content`, `DrawerLayout.Tray`
+     */
     children?: React.ReactNode;
+    /**
+     * Min width for the `<DrawerLayout.Content />`
+     */
     minWidth?: string;
-    onOverlayTrayChange?: (...args: any[]) => any;
+    /**
+     * Function called when the `<DrawerLayout.Content />` is resized and hits the `minWidth` breakpoint
+     * Called with a boolean value, `true` if the tray is now overlaying the content or `false` if
+     * it is side by side
+     */
+    onOverlayTrayChange?: (shouldOverlayTray: boolean) => void;
 } & BidirectionalProps;
 declare type PropKeys = keyof DrawerLayoutOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
 declare type DrawerLayoutProps = DrawerLayoutOwnProps & WithStyleProps<null, DrawerLayoutStyle>;
 declare type DrawerLayoutStyle = ComponentStyle<'drawerLayout'>;
+declare type DrawerLayoutState = {
+    shouldOverlayTray: boolean;
+    trayWidth: number;
+    contentWidth: number;
+};
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { DrawerLayoutProps, DrawerLayoutStyle };
+export type { DrawerLayoutProps, DrawerLayoutState, DrawerLayoutStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/DrawerLayout/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/DrawerLayout/props.ts"],"names":[],"mappings":";AAgCA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mBAAmB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;CAC9C,GAAG,kBAAkB,CAAA;AAEtB,aAAK,QAAQ,GAAG,MAAM,oBAAoB,CAAA;AAE1C,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,iBAAiB,GAAG,oBAAoB,GAC3C,cAAc,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAA;AAEzC,aAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAEvD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAgBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAKnB,CAAA;AAED,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAA;AACpD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/DrawerLayout/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,oBAAoB,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI,CAAA;CAC3D,GAAG,kBAAkB,CAAA;AAEtB,aAAK,QAAQ,GAAG,MAAM,oBAAoB,CAAA;AAE1C,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,iBAAiB,GAAG,oBAAoB,GAC3C,cAAc,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAA;AAEzC,aAAK,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAA;AAEvD,aAAK,iBAAiB,GAAG;IACvB,iBAAiB,EAAE,OAAO,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAKvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAKnB,CAAA;AAED,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAA;AACvE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}