@splunk/react-ui 5.7.1 → 5.9.0

package/docs-llm/Typography.md

@@ -0,0 +1,125 @@
+# Typography
+
+## Examples
+
+
+### Styled
+
+```typescript
+import React from 'react';
+
+import styled from 'styled-components';
+
+import Link from '@splunk/react-ui/Link';
+import Typography from '@splunk/react-ui/Typography';
+import { mixins } from '@splunk/themes';
+
+const Styled = styled.div`
+    ${mixins.prose()}
+`;
+
+
+function Basic() {
+    return (
+        <Styled>
+            <Typography as="h4" variant="title3">
+                Using SPL
+            </Typography>
+            <Typography as="p" family="sansSerif" size={16} lineHeight="snug">
+                Search Processing Language, or{' '}
+                <Typography as="strong" weight="bold" color="active">
+                    SPL
+                </Typography>
+                , is designed by Splunk for use with Splunk software.{' '}
+            </Typography>{' '}
+            <Typography as="p" variant="body">
+                SPL encompasses all the search commands and their functions, arguments, and clauses.
+                Here is an example of SPL:{' '}
+                <Typography as="code" variant="monoBody" color="active">
+                    sourcetype=access_* status=200 action=purchase categoryId=simulation
+                </Typography>{' '}
+                .{' '}
+            </Typography>
+            <Typography as="p" family="sansSerif" size={14}>
+                You can learn more about SPL by reading the{' '}
+                <Link to="https://docs.splunk.com/Documentation/SplunkCloud/latest/Search/Aboutthesearchlanguage">
+                    SPL documentation
+                </Link>
+                .
+            </Typography>
+        </Styled>
+    );
+}
+
+export default Basic;
+```
+
+
+
+
+## API
+
+
+### Typography API
+
+Typography renders text content with styling based on the Splunk Design System.
+
+#### Props
+
+| Name | Type | Required | Default | Description |
+|------|------|------|------|------|
+| as | \| 'p' \| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'span' \| 'blockquote' \| 'dd' \| 'dl' \| 'dt' \| 'figcaption' \| 'figure' \| 'li' \| 'ol' \| 'ul' \| 'pre' \| 'abbr' \| 'cite' \| 'code' \| 'data' \| 'dfn' \| 'em' \| 'u' \| 'time' \| 'sup' \| 'sub' \| 'strong' \| 'small' \| 'samp' \| 's' \| 'var' \| 'ruby' \| 'rt' \| 'rp' | yes |  | Tag for the element to render children content into. Use the most semantically appropriate tag. Layout elements like `div` are not allowed; use the `typography` mixin from `@splunk/themes` instead. |
+| children | React.ReactNode | yes |  | Text and inline icons |
+| color | 'active' \| 'default' \| 'disabled' \| 'inverted' \| 'muted' \| 'inherit' | no |  | Set the color to a system-standard color: e.g. `active` for `@splunk/themes/variables.contentColorActive`. |
+| elementRef | React.Ref<HTMLElement> | no |  | A React ref which is set to the DOM element when the component mounts, and null when it unmounts. |
+| family | 'sansSerif' \| 'monospace' \| 'title' | no |  | Set the font-family to sans-serif or monospace based on current theme. |
+| lineHeight | 'single' \| 'tight' \| 'snug' \| 'comfortable' \| 'relaxed' \| 'spacious' \| 'normal' | no |  | Set the line-height to a system-standard size. |
+| size | 24 \| 20 \| 18 \| 16 \| 14 \| 12 | no |  | Set the size to a system-standard size. |
+| variant | TypographyVariant | no |  | A variant from the Splunk Design System's Type: 'body', 'title1', 'title2', 'title3', 'title4', 'title5', 'title6', 'largeBody', 'smallBody', 'monoBody', or 'monoSmallBody'. |
+| weight | 'light' \| 'normal' \| 'semiBold' \| 'bold' \| 'extraBold' \| 'heavy' | no |  | Set the font-weight to a system-standard value.  The following standard weight names are supported, using camelCase syntax. See: [font-weight \| MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping) |
+| withReset | boolean | no | true | Remove all browser-default styles and apply theme-specific defaults. |
+
+
+
+
+
+## Accessibility
+
+## Font size
+
+* Although WCAG do not set a minimum font-size, the Splunk Design System does not support a font-size smaller than 12px.
+Smaller font sizes **SHOULD** be avoided. They can render illegibly on some platforms and our inclusive design aims
+to reduce the need for users to have to override styling to make content readable.
+
+## Contrast
+
+* Color contrast ratio **MUST** be [SC 1.4.3][1]
+    * &gt= 4.5:1 for normal text: 14 pt (typically 18.66px) and bold or larger
+    * &gt= 3:1 for large text: 18 pt (typically 24px) or larger
+    * For high contrast mode, ratios **MUST** be &gt=7:1 for normal text and &gt=4.5:1 for large text [SC 1.4.6][2]
+
+> Check the [Color combinations](/Packages/themes/ColorCombinations) tool in `@splunk/themes` documentation to validate 
+which background colors can be used with the design system's text colors.
+
+## Interaction Model
+
+* **MUST NOT** lose content or functionality when the user adapts [SC 1.4.12][3]
+    * Line height (line spacing) to at least 1.5 times the font size;
+    * Spacing following paragraphs to at least 2 times the font size;
+    * Letter spacing (tracking) to at least 0.12 times the font size;
+    * Word spacing to at least 0.16 times the font size
+* Line spacing (leading) **MUST** be at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing [SC 1.4.8][4]
+
+## Implementation
+
+*   **SHOULD** use correct [phrasing elements][5] to describe the semantics of the content.
+
+    > Always choose the best semantic element to describe the content and apply styling based on visual design. Typography allows for the semantics and the visual style of elements to be set independently via the `as` and `variant` props respectively.  
+
+[1]: https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
+[2]: https://www.w3.org/TR/WCAG21/#contrast-enhanced
+[3]: https://www.w3.org/TR/WCAG21/#text-spacing
+[4]: https://www.w3.org/TR/WCAG21/#visual-presentation
+[5]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#phrasing_content
+
+

package/docs-llm/Wait Spinner.md

@@ -0,0 +1,121 @@
+# Wait Spinner
+
+## Overview
+
+
+> Image: Illustration of a Wait Spinner.
+
+
+## When to use this component
+A Wait Spinner component is a looped animation and an example of an indeterminate loading indicator, as it expresses an unspecified amount of time.
+- If you need to represent a loading element for less than a few seconds.
+
+## When to use another component
+- If the wait exceeds a few seconds and loading progression can be calculated, use a determinate loading indicator like `Progress`, which considers loading time.
+- If the wait will be less than 1 second, no loading indicator is needed.
+
+```mermaid
+graph TD
+    accDescr: Decision tree that guides on when to use the WaitSpinner component or something else
+    A(Is the loading time less than a few seconds?) -- Yes --- B(Is the loading time less than a second?)
+    B -- Yes --- C(No indicator)
+    B -- No --- D(Wait Spinner)
+    A -- No --- E(Progress)
+```
+
+### Check out
+- [Progress][1]
+
+## Usage
+
+### Loading messages
+Including a loading message with the Wait Spinner adds an additional affordance for communicating the content’s state. This is useful for users who disable animations, which results in a static Wait Spinner.
+
+> Image: Examples of Wait Spinners. In the first example with heart eyes emoji, the Wait Spinner is accompanied by a loading message saying, 
+
+
+### Use one Wait Spinner
+A group of Wait Spinners can create visual overload for users. Replace a series of adjacent Wait Spinners with a single one.
+
+> Image: Examples of using Wait Spinners for loading a list of items. The first example with heart eyes emoji shows the list title, 
+
+
+### Sizing
+Choose an appropriate size based on the context and visibility requirements.
+
+> Image: Examples of using a Wait Spinner component on a full page. In the first example with heart eyes emoji, the Wait Spinner and accompanied label can clearly be read. In the second example with a grimacing emoji, the Wait Spinner and accompanied label are much smaller and hardly legible, displaying a misuse of a smaller Wait Spinner size.
+
+
+### Incremental loading
+If loading a larger space, consider displaying each item as it loads.
+
+> Image: In this example, there is a full-page map visual with the label 
+
+
+## Content
+
+### Loading …
+For the loading message, use the format, [Loading …]. If the element loading can be summarized in 1-2 words, the format can be improved by replacing the [...] with [element].
+
+> Image: Examples of loading messages for Wait Spinner labels. The first example with heart eyes emoji has a Wait Spinner with a label uses the format; 
+
+
+### Concise labeling
+Avoiding the use of articles ("a," "an," "the") and end punctuation.
+
+> Image: Examples of loading messages for Wait Spinner labels. The first example with heart eyes emoji has a Wait Spinner with a label uses the format; 
+
+
+
+[1]: ./Progress
+
+## Examples
+
+
+### Basic
+
+```typescript
+import React from 'react';
+
+import P from '@splunk/react-ui/Paragraph';
+import WaitSpinner from '@splunk/react-ui/WaitSpinner';
+
+
+function Basic() {
+    return (
+        <>
+            <P>Default size:</P>
+            <WaitSpinner />
+            <br />
+            <P>Medium size:</P>
+            <WaitSpinner size="medium" />
+            <br />
+            <P>Large size:</P>
+            <WaitSpinner size="large" />
+        </>
+    );
+}
+
+export default Basic;
+```
+
+
+
+
+## API
+
+
+### WaitSpinner API
+
+#### Props
+
+| Name | Type | Required | Default | Description |
+|------|------|------|------|------|
+| elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
+| screenReaderText | string \| null | no | _('Waiting') | A string to display to screen readers. Set the prop to `null` or an empty string to hide the spinner from screen readers, such as when there is already a text label beside it. |
+| size | 'small' \| 'medium' \| 'large' | no | 'small' | Size of WaitSpinner. |
+
+
+
+
+

package/docs-llm/llms.txt

@@ -0,0 +1,101 @@
+# React UI (@splunk/react-ui)
+
+A library of UI components, all independent of the Splunk Enterprise environment.
+
+## Base
+
+- **Anchor**
+- **Avatar**
+- **Badge**
+- **Button**
+- **Card**
+- **Card Layout**
+- **Chip**
+- **Code**
+- **Collapsible Panel**
+- **Drawer**
+- **JSON Tree**
+- **Link**
+- **Markdown**
+- **Modal**
+- **Paginator**
+- **Progress**
+- **Split Button**
+- **Step Bar**
+- **Switch**
+- **Tab Bar**
+- **Tab Layout**
+- **Table**
+- **Tooltip**
+- **Wait Spinner**
+
+## Content
+
+- **Definition List**
+- **Heading**
+- **List**
+- **Paragraph**
+- **Prose**
+- **Typography**
+
+## Data Entry
+
+- **Checkbox**
+- **Color**
+- **Combo Box**
+- **Control Group**
+- **Date**
+- **Dual Listbox**
+- **File**
+- **Form Rows**
+- **Image**
+- **Multiselect**
+- **Number**
+- **Phone Number**
+- **Radio Bar**
+- **Radio List**
+- **Select**
+- **Search**
+- **Slider**
+- **Static Content**
+- **Text**
+- **Text Area**
+
+## Navigation
+
+- **Anchor Menu**
+- **Breadcrumbs**
+
+## Notifications
+
+- **Notifications**
+- **Message**
+- **Message Bar**
+
+## Utilities
+
+- **AnimationToggle**
+- **Button Group**
+- **Clickable**
+- **Column Layout**
+- **Divider**
+- **Dropdown**
+- **Layer**
+- **Layout**
+- **Menu**
+- **Popover**
+- **Resize**
+- **Screen Reader Content**
+- **Scroll**
+- **Scroll Container Context**
+- **Side Panel**
+- **Sliding Panels**
+- **Transition Open**
+- **Tree**
+- **useKeyPress**
+
+## Deprecated
+
+- **Accordion**
+- **Monogram**
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/react-ui",
-  "version": "5.7.1",
+  "version": "5.9.0",
   "description": "Library of React components that implement the Splunk design language",
   "license": "Apache-2.0",
   "author": "Splunk Inc.",
@@ -45,8 +45,8 @@
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@react-spring/web": "^9.7.5",
-    "@splunk/react-icons": "^5.7.0",
-    "@splunk/themes": "^1.4.1",
+    "@splunk/react-icons": "^5.9.0",
+    "@splunk/themes": "^1.6.0",
     "@splunk/ui-utils": "^1.12.0",
     "decimal.js-light": "^2.5.1",
     "intl-tel-input": "^25.3.2",
@@ -63,9 +63,10 @@
     "@babel/core": "^7.28.0",
     "@babel/plugin-transform-runtime": "^7.28.0",
     "@splunk/babel-preset": "^4.0.0",
-    "@splunk/docs-gen": "^1.3.0",
+    "@splunk/docs-gen": "^1.4.0",
     "@splunk/eslint-config": "^5.0.0",
-    "@splunk/react-docs": "^1.4.0",
+    "@splunk/eslint-plugin-splunk-ui": "^0.1.0",
+    "@splunk/react-docs": "^1.6.0",
     "@splunk/stylelint-config": "^5.0.0",
     "@splunk/test-runner-utils": "^0.4.1",
     "@splunk/webpack-configs": "^7.0.3",

package/types/src/Box/Box.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { ComponentProps } from '../utils/types';
 interface BoxPropsBase {
     children?: React.ReactNode;
@@ -15,13 +14,6 @@ type BoxProps = ComponentProps<BoxPropsBase, 'div'>;
 /**
  * Box is a utility component to normalize and abstract common layout styles.
  */
-declare function Box({ children, elementRef, flex, tag, inline, ...otherProps }: BoxProps): React.JSX.Element;
-declare namespace Box {
-    var propTypes: {
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        elementRef: PropTypes.Requireable<object>;
-        flex: PropTypes.Requireable<boolean>;
-        inline: PropTypes.Requireable<boolean>;
-    };
-}
+declare const Box: React.ForwardRefExoticComponent<BoxPropsBase & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref" | "css" | keyof BoxPropsBase> & React.RefAttributes<HTMLElement>>;
 export default Box;
+export type { BoxProps, BoxPropsBase };

package/types/src/Drawer/Body.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+interface BodyPropsBase {
+    children?: React.ReactNode;
+}
+type BodyProps = ComponentProps<BodyPropsBase, 'div'>;
+/**
+ * A styled container for `Drawer` body content.
+ */
+declare function Body({ children, ...otherProps }: BodyProps): React.JSX.Element;
+declare namespace Body {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+}
+export default Body;

package/types/src/Drawer/Drawer.d.ts

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Body from './Body';
+import Footer from './Footer';
+import Header from './Header';
+import { ComponentProps } from '../utils/types';
+/** @public */
+type DrawerRequestCloseHandler = (data: {
+    event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement> | MouseEvent | KeyboardEvent | TouchEvent;
+    reason: 'clickAway' | 'escapeKey' | 'clickCloseButton';
+}) => void;
+type DrawerInitialFocus = 'first' | 'container' | (React.Component & {
+    focus: () => void;
+}) | HTMLElement | null;
+interface DrawerPropsBase {
+    /**
+     * Any renderable children can be passed to the `Drawer`.
+     *
+     * To use the default `Drawer` styles, use the
+     * `Drawer.Header`, `Drawer.Body`, and `Drawer.Footer`.
+     */
+    children?: React.ReactNode;
+    /**
+     * Set to `true` to enable closing the Drawer by clicking the scrim (overlay).
+     *
+     * Only applies to `position="page"` because other position modes do not have a scrim.
+     *
+     * When `false` (default), the scrim is still displayed to block interaction with
+     * underlying content, but clicking it will not close the Drawer.
+     *
+     * Closing on click away should be avoided as it can lead to accidental dismissal
+     * of the drawer causing data loss or disruption of a user's workflow.
+     * Only enable click outside to dismiss when:
+     * - The drawer content is non-critical or purely informational
+     * - Accidental dismissal will not result in loss of progress, data, or important context
+     *
+     * When enabled, `onRequestClose` will receive an event with reason `clickAway`.
+     */
+    closeOnClickAway?: boolean;
+    /**
+     * Show dividers between header, body and footer.
+     */
+    divider?: 'header' | 'footer' | 'both' | 'none';
+    /**
+     * A React ref which is set to the DOM element when the component mounts and null when it unmounts.
+     */
+    elementRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Allows focus to be set to a component other than the default.
+     * Supports `first` (first focusable element in the drawer), `container` (focus the drawer itself), or a ref.
+     */
+    initialFocus?: DrawerInitialFocus;
+    /**
+     * Called when a close event occurs.
+     *
+     * The callback is passed the event and a reason, which is `escapeKey`, `clickAway`, or `clickCloseButton`.
+     *
+     * Generally, use this callback to toggle the `open` prop.
+     */
+    onRequestClose?: DrawerRequestCloseHandler;
+    /**
+     * Set `open` to `true` to open the drawer and `false` to close it.
+     */
+    open?: boolean;
+    /**
+     * The layout mode for the drawer.
+     * - `page`: Positions relative to the viewport (default)
+     * - `container`: Positions relative to nearest positioned ancestor
+     * - `inline`: Renders inline without portal, allowing content to reflow around the drawer
+     */
+    position?: 'page' | 'container' | 'inline';
+    /**
+     * Pass the ref of the invoking element (or other element that follows the logical flow of the application) to automatically move focus
+     * to the invoking element on `Drawer` close. If using a ref is not possible, you *must* pass a function that sets focus to the appropriate element.
+     * This function will be called after `onRequestClose`.
+     *
+     * Recommended when `position` is `page` to ensure proper focus management.
+     */
+    returnFocus?: React.MutableRefObject<(React.Component & {
+        focus: () => void;
+    }) | HTMLElement | null> | (() => void);
+    /**
+     * Width of the drawer.
+     */
+    width?: string;
+}
+interface DrawerPageProps extends DrawerPropsBase {
+    position?: 'page';
+}
+interface DrawerNonPageProps extends DrawerPropsBase {
+    position: 'container' | 'inline';
+    closeOnClickAway?: never;
+}
+type DrawerProps = ComponentProps<DrawerPageProps | DrawerNonPageProps, 'div', 'onAnimationStart' | 'onAnimationEnd'>;
+declare function Drawer({ children, closeOnClickAway, elementRef, divider, initialFocus, onRequestClose, open, position, returnFocus, width, className, ...otherProps }: DrawerProps): React.JSX.Element;
+declare namespace Drawer {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        closeOnClickAway: PropTypes.Requireable<boolean>;
+        divider: PropTypes.Requireable<string>;
+        elementRef: PropTypes.Requireable<object>;
+        initialFocus: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+        onRequestClose: PropTypes.Requireable<(...args: any[]) => any>;
+        open: PropTypes.Requireable<boolean>;
+        position: PropTypes.Requireable<string>;
+        returnFocus: PropTypes.Requireable<object>;
+        width: PropTypes.Requireable<string>;
+    };
+    var Header: typeof import("./Header").default;
+    var Footer: typeof import("./Footer").default;
+    var Body: typeof import("./Body").default;
+}
+export default Drawer;
+export { Body, Header, Footer, DrawerRequestCloseHandler };

package/types/src/Drawer/DrawerContext.d.ts

@@ -0,0 +1,11 @@
+import type { DrawerRequestCloseHandler } from '@splunk/react-ui/Drawer';
+export interface DrawerContext {
+    divider?: 'header' | 'footer' | 'both' | 'none';
+    titleId?: string;
+    subtitleId?: string;
+    onRequestClose?: DrawerRequestCloseHandler;
+    onSubtitleRender?: (hasSubtitle: boolean) => void;
+    onTitleRender?: (hasTitle: boolean) => void;
+}
+export declare const DrawerContext: import("react").Context<DrawerContext>;
+export default DrawerContext;

package/types/src/Drawer/Footer.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+interface FooterPropsBase {
+    children?: React.ReactNode;
+    /**
+     * Controls the layout and styling for children.
+     *
+     * `auto` will style children for common use cases, such as: buttons; controls; documentation links; or a combination.
+     * Set `none` when custom styling is needed.
+     */
+    layout?: 'auto' | 'none';
+}
+type FooterProps = ComponentProps<FooterPropsBase, 'div'>;
+/**
+ * A styled container for `Drawer` footer content.
+ */
+declare function Footer({ children, layout, ...otherProps }: FooterProps): React.JSX.Element;
+declare namespace Footer {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        layout: PropTypes.Requireable<string>;
+    };
+}
+export default Footer;

package/types/src/Drawer/Header.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ComponentProps } from '../utils/types';
+interface HeaderPropsBase {
+    /**
+     * `children` might be passed instead of a title. Note that `children` aren't
+     * rendered if a title is provided.
+     */
+    children?: React.ReactNode;
+    /**
+     * Hide the closeButton in the Header if `onRequestClose` is provided to `Drawer`.
+     */
+    hideCloseButton?: boolean;
+    /**
+     * The icon to show before the title.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Used as the main heading.
+     */
+    title?: string;
+    /**
+     * Used as the subheading. Only shown if `title` is also present.
+     */
+    subtitle?: React.ReactNode;
+}
+type HeaderProps = ComponentProps<HeaderPropsBase, 'div'>;
+/**
+ * A styled container for `Drawer` header content.
+ */
+declare function Header({ children, icon, hideCloseButton, title, subtitle, ...otherProps }: HeaderProps): React.JSX.Element;
+declare namespace Header {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        hideCloseButton: PropTypes.Requireable<boolean>;
+        title: PropTypes.Requireable<string>;
+        subtitle: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+}
+export default Header;

package/types/src/Drawer/docs/examples/Basic.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * @name Basic
+ */
+declare function Basic(): React.JSX.Element;
+export default Basic;

package/types/src/Drawer/docs/examples/ContainerPosition.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name ContainerPosition
+ * @description The `container` position renders the drawer relative to its nearest positioned ancestor.
+ */
+declare function ContainerPosition(): React.JSX.Element;
+export default ContainerPosition;

package/types/src/Drawer/docs/examples/InitialFocus.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * @name Initial focus
+ * @description Initial focus can be set to a different element using the `initialFocus` prop.
+ * Use `'first'` to focus the first focusable element, `'container'` to focus the drawer itself,
+ * or pass a ref to a specific element.
+ */
+declare function InitialFocus(): React.JSX.Element;
+export default InitialFocus;

package/types/src/Drawer/docs/examples/InlinePosition.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name InlinePosition
+ * @description The `inline` position renders the drawer inline. Content reflows around the drawer.
+ */
+declare function InlinePosition(): React.JSX.Element;
+export default InlinePosition;

package/types/src/Drawer/docs/examples/PagePosition.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * @name PagePosition
+ * @description The `page` position (default) renders the drawer relative to the viewport using a portal.
+ */
+declare function PagePosition(): React.JSX.Element;
+export default PagePosition;

package/types/src/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Drawer';
+export * from './Drawer';