@graphty/compact-mantine 0.9.14 → 0.9.16

package/dist/index.d.cts

@@ -9,6 +9,7 @@ import { JSX } from 'react';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { MantineColorShade } from '@mantine/core';
 import { MantineColorsTuple } from '@mantine/core';
+import { MantineComponent } from '@mantine/core';
 import { MantineRadius } from '@mantine/core';
 import { MantineTheme } from '@mantine/core';
 import { MantineThemeOverride } from '@mantine/core';
@@ -22,6 +23,10 @@ import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
+import { ScrollAreaAutosizeProps } from '@mantine/core';
+import { ScrollAreaCssVariables } from '@mantine/core';
+import { ScrollAreaProps as ScrollAreaProps_2 } from '@mantine/core';
+import { ScrollAreaStylesNames } from '@mantine/core';
 import { SegmentedControl as SegmentedControl_2 } from '@mantine/core';
 import { SyntheticEvent } from 'react';
 import { TextInputProps } from '@mantine/core';
@@ -1146,6 +1151,23 @@ export declare interface CompactMantineLabels {
     ordinal: (value: string, rule: Intl.LDMLPluralRule) => string;
 }
 
+/**
+ * Mantine's ScrollArea with an opt-in keyboard stop on its viewport (`focusableViewport`). Without
+ * that prop it is exactly Mantine's component, themed by this package. `ScrollArea.Autosize` is
+ * Mantine's.
+ * @param props - Mantine's ScrollArea props, plus `focusableViewport`
+ * @param props.focusableViewport - make the viewport a Tab stop (default false)
+ * @param props.viewportProps - Mantine's viewport props; a `tabIndex` here wins
+ * @returns The scroll area
+ * @example
+ * ```tsx
+ * <ScrollArea h={240} focusableViewport>
+ *     {rows}
+ * </ScrollArea>
+ * ```
+ */
+declare function CompactScrollArea({ focusableViewport, viewportProps, ...props }: Readonly<ScrollAreaProps>): default_2.JSX.Element;
+
 /**
  * The full Mantine theme at Figma defaults, merged with DEFAULT_THEME.
  * @example
@@ -5457,6 +5479,27 @@ export declare interface ResultRowProps extends Omit<default_2.HTMLAttributes<HT
 /** The rows and columns of the matrix, top to bottom and left to right. */
 declare const ROWS: readonly ["top", "middle", "bottom"];
 
+export declare const ScrollArea: typeof CompactScrollArea & {
+    Autosize: MantineComponent<    {
+    props: ScrollAreaAutosizeProps;
+    ref: HTMLDivElement;
+    stylesNames: ScrollAreaStylesNames;
+    vars: ScrollAreaCssVariables;
+    }>;
+};
+
+/** Mantine's ScrollArea props, plus `focusableViewport`. */
+export declare interface ScrollAreaProps extends ScrollAreaProps_2 {
+    /**
+     * Make the viewport a Tab stop (`tabIndex={0}`), so a reader can scroll it with the arrow and
+     * page keys. Turn it on when nothing inside the scroller can take focus: otherwise a keyboard
+     * reader cannot reach the content below the fold (WCAG 2.1.1). Keyboard focus draws a 1px ring
+     * inside the viewport and shows the thumb. Off by default, so the viewport stays out of the
+     * Tab order exactly as in Mantine. A `tabIndex` passed in `viewportProps` wins.
+     */
+    focusableViewport?: boolean;
+}
+
 /**
  * A search field (design/figma-spec.md 6.2): a filled 24px field with a leading magnifier, a clear
  * button once there is text, and a focus ring drawn flush with the field that lingers 100ms after

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import { JSX } from 'react';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { MantineColorShade } from '@mantine/core';
 import { MantineColorsTuple } from '@mantine/core';
+import { MantineComponent } from '@mantine/core';
 import { MantineRadius } from '@mantine/core';
 import { MantineTheme } from '@mantine/core';
 import { MantineThemeOverride } from '@mantine/core';
@@ -22,6 +23,10 @@ import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
 import { RefAttributes } from 'react';
 import { RefObject } from 'react';
+import { ScrollAreaAutosizeProps } from '@mantine/core';
+import { ScrollAreaCssVariables } from '@mantine/core';
+import { ScrollAreaProps as ScrollAreaProps_2 } from '@mantine/core';
+import { ScrollAreaStylesNames } from '@mantine/core';
 import { SegmentedControl as SegmentedControl_2 } from '@mantine/core';
 import { SyntheticEvent } from 'react';
 import { TextInputProps } from '@mantine/core';
@@ -1146,6 +1151,23 @@ export declare interface CompactMantineLabels {
     ordinal: (value: string, rule: Intl.LDMLPluralRule) => string;
 }
 
+/**
+ * Mantine's ScrollArea with an opt-in keyboard stop on its viewport (`focusableViewport`). Without
+ * that prop it is exactly Mantine's component, themed by this package. `ScrollArea.Autosize` is
+ * Mantine's.
+ * @param props - Mantine's ScrollArea props, plus `focusableViewport`
+ * @param props.focusableViewport - make the viewport a Tab stop (default false)
+ * @param props.viewportProps - Mantine's viewport props; a `tabIndex` here wins
+ * @returns The scroll area
+ * @example
+ * ```tsx
+ * <ScrollArea h={240} focusableViewport>
+ *     {rows}
+ * </ScrollArea>
+ * ```
+ */
+declare function CompactScrollArea({ focusableViewport, viewportProps, ...props }: Readonly<ScrollAreaProps>): default_2.JSX.Element;
+
 /**
  * The full Mantine theme at Figma defaults, merged with DEFAULT_THEME.
  * @example
@@ -5457,6 +5479,27 @@ export declare interface ResultRowProps extends Omit<default_2.HTMLAttributes<HT
 /** The rows and columns of the matrix, top to bottom and left to right. */
 declare const ROWS: readonly ["top", "middle", "bottom"];
 
+export declare const ScrollArea: typeof CompactScrollArea & {
+    Autosize: MantineComponent<    {
+    props: ScrollAreaAutosizeProps;
+    ref: HTMLDivElement;
+    stylesNames: ScrollAreaStylesNames;
+    vars: ScrollAreaCssVariables;
+    }>;
+};
+
+/** Mantine's ScrollArea props, plus `focusableViewport`. */
+export declare interface ScrollAreaProps extends ScrollAreaProps_2 {
+    /**
+     * Make the viewport a Tab stop (`tabIndex={0}`), so a reader can scroll it with the arrow and
+     * page keys. Turn it on when nothing inside the scroller can take focus: otherwise a keyboard
+     * reader cannot reach the content below the fold (WCAG 2.1.1). Keyboard focus draws a 1px ring
+     * inside the viewport and shows the thumb. Off by default, so the viewport stays out of the
+     * Tab order exactly as in Mantine. A `tabIndex` passed in `viewportProps` wins.
+     */
+    focusableViewport?: boolean;
+}
+
 /**
  * A search field (design/figma-spec.md 6.2): a filled 24px field with a leading magnifier, a clear
  * button once there is text, and a focus ring drawn flush with the field that lingers 100ms after