@kanso-labs/react-native-kanso-ui 0.1.1 → 0.3.0

package/dist/components/dialog/index.d.ts

@@ -0,0 +1,131 @@
+import { HostInstance, ScrollView, ScrollViewProps, StyleProp, TextProps, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/dialog/index.d.ts
+type DialogBodyProps = ScrollViewProps & {
+  readonly ref?: Ref<ComponentRef<typeof ScrollView>>;
+};
+type DialogContentProps = DialogOpenProps & Omit<ViewProps, 'children' | 'role' | 'style'> & {
+  readonly children?: ReactNode;
+  /**
+   * Whether a press on the scrim, outside the container, closes the
+   * dialog. Android's back gesture is `isKeyboardDismissDisabled`'s, and
+   * this says nothing about it, so a dialog that has to be answered from
+   * one of its actions turns off both.
+   * @default true
+   */
+  readonly isDismissable?: boolean;
+  /**
+   * Keeps Android's back gesture, VoiceOver's escape gesture, and Escape on
+   * web, from closing the dialog.
+   * @default false
+   */
+  readonly isKeyboardDismissDisabled?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * `alertdialog` for a dialog interrupting with something that has to be
+   * answered before the app carries on. It also keeps the dialog the basic
+   * one in a compact window, centred and sized to its content, where a
+   * dialog of the default role fills the window.
+   * @default 'dialog'
+   */
+  readonly role?: 'alertdialog' | 'dialog';
+  readonly style?: StyleProp<ViewStyle>;
+};
+type DialogOpenProps = {
+  /** Whether the dialog starts open, when it keeps its own state. */
+  readonly defaultOpen?: boolean;
+  /** Whether the dialog is open, when the call site holds the state. */
+  readonly isOpen?: boolean;
+  /** Called with the new state as the dialog opens or closes. */
+  readonly onOpenChange?: (isOpen: boolean) => void;
+};
+type DialogPartProps = ViewProps & {
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+};
+type DialogProps = DialogOpenProps & {
+  /** The button that opens the dialog, and `Dialog.Content`. */
+  readonly children?: ReactNode;
+};
+type DialogTitleProps = Omit<TextProps, 'role'> & {
+  readonly ref?: Ref<HostInstance>;
+};
+/**
+ * A modal dialog centred over the screen, and the same dialog filling the
+ * window in a compact window, the dialogs spec page's basic and full-screen
+ * dialogs, paired by window size as the page pairs them. An alert dialog
+ * stays the basic one at every width. Pass `isOpen` with `onOpenChange` to
+ * hold the open state, or `defaultOpen` to let it keep its own.
+ *
+ * ```tsx
+ * <Dialog>
+ *   <Button>Open</Button>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Headline</Dialog.Title>
+ *     </Dialog.Header>
+ *     <Dialog.Body>Supporting text</Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Button slot="close" variant="text">Cancel</Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog>
+ * ```
+ *
+ * Composed rather than configured by props, as web's is, since a dialog's
+ * header, body and actions all take arbitrary content. A `Button` or
+ * `IconButton` inside `Dialog` and outside its content opens it, and one
+ * given `slot="close"` anywhere inside the content closes it. A dialog nothing on
+ * the screen opens leaves `Dialog` out and passes `isOpen` and
+ * `onOpenChange` to `Dialog.Content` instead.
+ */
+declare function Dialog({ children, defaultOpen, isOpen, onOpenChange }: DialogProps): import("react").JSX.Element;
+declare namespace Dialog {
+  var Body: typeof DialogBody;
+  var Content: typeof DialogContent;
+  var Footer: typeof DialogFooter;
+  var Header: typeof DialogHeader;
+  var Title: typeof DialogTitle;
+}
+/**
+ * What the dialog shows, as a body that scrolls when its content runs past
+ * the room it has. A string is drawn in the page's body medium on on-surface
+ * variant; anything else draws itself. `style`, `ref` and `testID` land on
+ * the `ScrollView`.
+ *
+ * A body its content runs past takes focus, as web's is a tab stop, so a
+ * keyboard can scroll it when nothing inside it takes focus; a call site's
+ * own `focusable` still wins.
+ */
+declare function DialogBody({ children, contentContainerStyle, onContentSizeChange, onLayout, ...props }: DialogBodyProps): import("react").JSX.Element;
+/**
+ * The dialog itself, and the scrim behind it. Everything the dialog shows
+ * goes in here; the button that opens it stays outside it.
+ *
+ * Inside `Dialog`, the open state is the trigger's. On its own it is this
+ * part's: `isOpen` with `onOpenChange` holds it, and a `slot="close"`
+ * button, the scrim and the back gesture all report through `onOpenChange`.
+ * `style`, `ref` and `testID` land on the container.
+ */
+declare function DialogContent({ children, defaultOpen, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, role, style, ...props }: DialogContentProps): import("react").JSX.Element | null;
+/**
+ * The dialog's actions, at the trailing edge and wrapping onto another row
+ * when they do not fit on one. Full screen they are the page's bottom action
+ * bar. `style`, `ref` and `testID` land on its view.
+ */
+declare function DialogFooter({ style, ...props }: DialogPartProps): import("react").JSX.Element;
+/**
+ * The dialog's header: its `Dialog.Title`, and anything beside it, such as a
+ * close button. Full screen it is the page's header bar. `style`, `ref` and
+ * `testID` land on its view.
+ */
+declare function DialogHeader({ style, ...props }: DialogPartProps): import("react").JSX.Element;
+/**
+ * Names the dialog: the container is labelled by it, and a screen reader is
+ * sent to it once the dialog shows. In headline small as the basic dialog,
+ * and title large as the full-screen one, where it shares a 56dp bar.
+ * `style`, `ref` and `testID` land on React Native's own Text.
+ */
+declare function DialogTitle({ ref, style, ...props }: DialogTitleProps): import("react").JSX.Element;
+//#endregion
+export { Dialog, DialogBody, type DialogBodyProps, DialogContent, type DialogContentProps, DialogFooter, DialogHeader, type DialogPartProps, type DialogProps, DialogTitle, type DialogTitleProps };
+//# sourceMappingURL=index.d.ts.map