@enact/limestone 1.3.0

package/PopupTabLayout/PopupTabLayout.d.ts

@@ -0,0 +1,196 @@
+// Type definitions for limestone/PopupTabLayout
+
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { TabProps as limestone_TabLayout_TabProps } from "limestone/TabLayout";
+import * as React from "react";
+import { PanelsProps as limestone_Panels_PanelsProps } from "limestone/Panels";
+import { PanelProps as limestone_Panels_PanelProps } from "limestone/Panels";
+import { PopupProps as limestone_Popup_PopupProps } from "limestone/Popup";
+import { TabLayoutProps as limestone_TabLayout_TabLayoutProps } from "limestone/TabLayout";
+
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
+
+export interface PopupTabLayoutBaseProps
+  extends Merge<
+    limestone_Popup_PopupProps,
+    limestone_TabLayout_TabLayoutProps
+  > {
+  /**
+   * Collection of    to render.
+   */
+  children?: React.ReactNode;
+  /**
+ * Collapses the vertical tab list into icons only.
+ * 
+ * Only applies to  `orientation="vertical"` .  If the tabs do not include icons, a single
+collapsed icon will be shown.
+ */
+  collapsed?: boolean;
+  /**
+   * The currently selected tab.
+   */
+  index?: number;
+  /**
+   * Disables transition animation.
+   */
+  noAnimation?: boolean;
+  /**
+   * Called when the tabs are collapsed.
+   */
+  onCollapse?: Function;
+  /**
+   * Called when the tabs are expanded.
+   */
+  onExpand?: Function;
+  /**
+   * Called after the popup's "hide" transition finishes.
+   */
+  onHide?: Function;
+  /**
+   * Called when a tab is selected
+   */
+  onSelect?: Function;
+  /**
+   * Called after the popup's "show" transition finishes.
+   */
+  onShow?: Function;
+  /**
+   * Called when the tab collapse or expand animation completes.
+   *
+   * Event payload includes:
+   * *  `type`  - Always set to "onTabAnimationEnd"
+   * *  `collapsed`  -  `true`  when the tabs are collapsed
+   */
+  onTabAnimationEnd?: Function;
+  /**
+   * Controls the visibility of the Popup.
+   *
+   * By default, the Popup and its contents are not rendered until  `open` .
+   */
+  open?: boolean;
+  /**
+ * Scrim type.
+ * *  Values:  `'transparent'` ,  `'translucent'` , or  `'none'` .
+ * 
+ * `'none'`  is not compatible with  `spotlightRestrict`  of  `'self-only'` , use a transparent scrim
+to prevent mouse focus when using popup.
+ */
+  scrimType?: "transparent" | "translucent" | "none";
+  /**
+   * The container id for   .
+   */
+  spotlightId?: string;
+  /**
+ * Restricts or prioritizes navigation when focus attempts to leave the popup.
+ * 
+ * It can be either  `'none'` ,  `'self-first'` , or  `'self-only'` .
+ * 
+ * Note: The ready-to-use    component only supports
+ `'self-first'`  and  `'self-only'` .
+ */
+  spotlightRestrict?: "none" | "self-first" | "self-only";
+}
+/**
+ * Tabbed Layout component in a floating Popup.
+ */
+
+export class PopupTabLayoutBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, PopupTabLayoutBaseProps>
+> {}
+
+export interface PopupTabLayoutDecoratorProps
+  extends limestone_Skinnable_SkinnableProps {}
+export function PopupTabLayoutDecorator<P>(
+  Component: React.ComponentType<P> | string,
+): React.ComponentType<P & PopupTabLayoutDecoratorProps>;
+
+export interface PopupTabLayoutProps {}
+/**
+ * An instance of    which restricts the  `TabLayout`  content to
+the left side of the screen. The content of  `TabLayout`  can flex vertically, but not horizontally
+(fixed width). This is typically used to switch between several collections of managed views
+( `TabPanels`  and  `TabPanel` , also exported from this module).
+ * 
+ * Example:
+ * ```
+	<PopupTabLayout>
+		<Tab title="Tab One">
+			<TabPanels>
+				<TabPanel>
+					<Header title="First Panel" type="compact" />
+					<Item>Item 1 in Panel 1</Item>
+					<Item>Item 2 in Panel 1</Item>
+				</TabPanel>
+				<TabPanel>
+					<Header title="Second Panel" type="compact" />
+					<Item>Item 1 in Panel 2</Item>
+					<Item>Item 2 in Panel 2</Item>
+				</TabPanel>
+			</TabPanels>
+		</Tab>
+		<Tab title="Tab Two">
+			<Item>Goodbye</Item>
+		</Tab>
+	</PopupTabLayout>
+```
+ */
+
+export class PopupTabLayout extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, PopupTabLayoutProps>
+> {
+  /**
+   * A shortcut to access
+   */
+  Tab: Tab;
+}
+
+export interface TabProps extends limestone_TabLayout_TabProps {}
+/**
+ * A Tab for use inside this component.
+ */
+
+export class Tab extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, TabProps>
+> {}
+
+export interface TabPanelsBaseProps extends limestone_Panels_PanelsProps {}
+/**
+ * A base component for    which has
+left key handler to navigate panels.
+ */
+
+export class TabPanelsBase extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, TabPanelsBaseProps>
+> {}
+
+export interface TabPanelsProps extends TabPanelsBaseProps {
+  /**
+ * Omits the close button.
+ * 
+ * Unlike most components, this prop defaults to  `true` . To show the close button, the prop must
+explicitly set it to  `false` :
+ * ```
+<TabPanels noCloseButton={false} />
+```
+ */
+  noCloseButton?: boolean;
+}
+/**
+ * A customized version of Panels for use inside this component.
+ */
+
+export class TabPanels extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, TabPanelsProps>
+> {}
+
+export interface TabPanelProps extends limestone_Panels_PanelProps {}
+/**
+ * A customized version of Panel for use inside this component.
+ */
+
+export class TabPanel extends React.Component<
+  Merge<React.HTMLProps<HTMLElement>, TabPanelProps>
+> {}
+
+export default PopupTabLayout;