@kanso-labs/react-native-kanso-ui 0.3.1 → 0.5.0

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

@@ -0,0 +1,137 @@
+import { ModalOpenProps } from "../../modal/index.js";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { HostInstance, ScrollView, ScrollViewProps, StyleProp, TextProps, View, ViewProps, ViewStyle } from "react-native";
+//#region src/components/sheet/index.d.ts
+type SheetBodyProps = ScrollViewProps & {
+  readonly ref?: Ref<ComponentRef<typeof ScrollView>>;
+};
+type SheetContentProps = Omit<ViewProps, 'children' | 'style'> & SheetOpenProps & {
+  readonly children?: ReactNode;
+  /**
+   * Whether a press on the scrim, outside the sheet, and a swipe down past
+   * its lowest height close it. Android's back gesture is
+   * `isKeyboardDismissDisabled`'s, and this says nothing about it.
+   * @default true
+   */
+  readonly isDismissable?: boolean;
+  /**
+   * Keeps Android's back gesture, VoiceOver's escape gesture, and Escape on
+   * web, from closing the sheet.
+   * @default false
+   */
+  readonly isKeyboardDismissDisabled?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+};
+type SheetHandleProps = Omit<ViewProps, 'children'> & {
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+};
+type SheetOpenProps = ModalOpenProps & {
+  /** Whether the sheet starts open, when it keeps its own state. */
+  readonly defaultOpen?: boolean;
+  /** Whether the sheet is open, when the call site holds the state. */
+  readonly isOpen?: boolean;
+  /** Called with the new state as the sheet opens or closes. */
+  readonly onOpenChange?: (isOpen: boolean) => void;
+};
+type SheetPartProps = ViewProps & {
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+};
+type SheetProps = SheetOpenProps & {
+  /** The button that opens the sheet, and `Sheet.Content`. */
+  readonly children?: ReactNode;
+};
+type SheetTitleProps = Omit<TextProps, 'role'> & {
+  readonly ref?: Ref<HostInstance>;
+};
+/**
+ * A modal sheet along an edge of the screen, the bottom sheets and side sheets
+ * spec pages' modal sheets, paired by window size as kanso-ui's are: a bottom
+ * sheet in a compact window, dragged between heights and swiped down to go,
+ * and a side sheet along the end edge from the medium window up. Pass
+ * `isOpen` with `onOpenChange` to hold the open state, or `defaultOpen` to let
+ * it keep its own.
+ *
+ * ```tsx
+ * <Sheet>
+ *   <Button>Open</Button>
+ *   <Sheet.Content>
+ *     <Sheet.Handle />
+ *     <Sheet.Header>
+ *       <Sheet.Title>Headline</Sheet.Title>
+ *     </Sheet.Header>
+ *     <Sheet.Body>Supporting text</Sheet.Body>
+ *     <Sheet.Footer>
+ *       <Button slot="close">Done</Button>
+ *     </Sheet.Footer>
+ *   </Sheet.Content>
+ * </Sheet>
+ * ```
+ *
+ * Composed rather than configured by props, as web's is. A `Button` or
+ * `IconButton` inside `Sheet` and outside its content opens it, and one given
+ * `slot="close"` anywhere inside the content closes it. A sheet nothing on the
+ * screen opens leaves `Sheet` out and passes `isOpen` and `onOpenChange` to
+ * `Sheet.Content` instead.
+ */
+declare function Sheet({ children, defaultOpen, isOpen, onOpenChange }: SheetProps): import("react").JSX.Element;
+declare namespace Sheet {
+  var Body: typeof SheetBody;
+  var Content: typeof SheetContent;
+  var Footer: typeof SheetFooter;
+  var Handle: typeof SheetHandle;
+  var Header: typeof SheetHeader;
+  var Title: typeof SheetTitle;
+}
+/**
+ * What the sheet shows, as a body that scrolls when its content runs past the
+ * room it has. A string is drawn in 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. A bottom sheet's body scrolls only once the
+ * sheet is at its whole height, and holds the sheet's drag off while it does.
+ */
+declare function SheetBody({ children, contentContainerStyle, onContentSizeChange, onLayout, scrollEnabled, ...props }: SheetBodyProps): import("react").JSX.Element;
+/**
+ * The sheet itself, and the scrim behind it. Everything the sheet shows goes
+ * in here; the button that opens it stays outside it.
+ *
+ * Inside `Sheet`, 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, the swipe and the back gesture all report through
+ * `onOpenChange`. `style`, `ref` and `testID` land on the container, and
+ * `testID` names the drag `<testID>-drag` for Gesture Handler's test helpers.
+ */
+declare function SheetContent({ defaultOpen, isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange, ...props }: SheetContentProps): import("react").JSX.Element | null;
+/**
+ * The sheet's actions, leading and wrapping onto another row when they do not
+ * fit on one, over a divider. On a bottom sheet at half height they are below
+ * the fold until the sheet is raised. `style`, `ref` and `testID` land on its
+ * view.
+ */
+declare function SheetFooter({ style, ...props }: SheetPartProps): import("react").JSX.Element;
+/**
+ * The bottom sheet's drag handle, a 32 by 4dp bar centred along its top edge.
+ * Where the sheet has two heights it is a button moving it to the other one,
+ * named "Drag handle" in the device's locale unless `aria-label` says
+ * otherwise; elsewhere it is a mark a screen reader skips. A side sheet draws
+ * none. `style`, `ref` and `testID` land on its view.
+ */
+declare function SheetHandle({ 'aria-label': label, style, ...props }: SheetHandleProps): import("react").JSX.Element | null;
+/**
+ * The sheet's header: its `Sheet.Title`, and anything beside it, such as a
+ * close button, over a divider. `style`, `ref` and `testID` land on its view.
+ */
+declare function SheetHeader({ style, ...props }: SheetPartProps): import("react").JSX.Element;
+/**
+ * Names the sheet: the container is labelled by it, and a screen reader is
+ * sent to it once the sheet shows. In title large on on-surface variant.
+ * `style`, `ref` and `testID` land on React Native's own Text.
+ */
+declare function SheetTitle({ ref, style, ...props }: SheetTitleProps): import("react").JSX.Element;
+//#endregion
+export { Sheet, SheetBody, type SheetBodyProps, SheetContent, type SheetContentProps, SheetFooter, SheetHandle, type SheetHandleProps, SheetHeader, type SheetPartProps, type SheetProps, SheetTitle, type SheetTitleProps };
+//# sourceMappingURL=index.d.ts.map