@reapit/elements 5.0.0-beta.60 → 5.0.0-beta.62

package/dist/types/core/combobox/popup-dialog/popup-dialog.stories.d.ts

@@ -0,0 +1,83 @@
+import { ComboboxPopupDialog } from './popup-dialog';
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: typeof ComboboxPopupDialog;
+    argTypes: {
+        'aria-labelledby': {
+            control: false;
+        };
+        children: {
+            control: "select";
+            options: string[];
+            mapping: {
+                Simple: import("react/jsx-runtime").JSX.Element;
+                Detailed: import("react/jsx-runtime").JSX.Element;
+                Filterable: import("react/jsx-runtime").JSX.Element[];
+                'Multi-select': import("react/jsx-runtime").JSX.Element[];
+            };
+        };
+        id: {
+            control: false;
+        };
+        maxWidth: {
+            control: "text";
+        };
+        search: {
+            control: "boolean";
+            mapping: {
+                true: import("react/jsx-runtime").JSX.Element;
+                false: null;
+            };
+        };
+        variant: {
+            control: "radio";
+            options: string[];
+        };
+    };
+    render: (args: ComboboxPopupDialog.Props, { parameters }: import("storybook/internal/csf").StoryContext<import("@storybook/react-vite").ReactRenderer, ComboboxPopupDialog.Props>) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Many popups will function as simple popovers that present the available options to the user.
+ * The popup automatically anchors to the element specified by `aria-labelledby`. By default,
+ * popovers are slightly wider than their anchor element to accommodate padding.
+ */
+export declare const Example: Story;
+/**
+ * By default, popover-style popups are slightly wider than their anchor element to accommodate
+ * padding. This width can be overridden by setting `maxWidth` to a valid CSS length. Any `--size-*`
+ * CSS variable or intrinsic size keywords (e.g., `fit-content`, `min-content`, `max-content`) will
+ * typically be preferred.
+ */
+export declare const MaxWidth: Story;
+/**
+ * In some cases, such as on devices with small viewports, it can be preferrable to have the popup
+ * function as a drawer. This can be achieved using the `drawer` variant.
+ */
+export declare const Drawer: Story;
+/**
+ * The `auto` variant displays as a drawer on XS breakpoint (< 768px) and as a popover on SM
+ * and above. This provides a responsive experience that adapts to the viewport size.
+ */
+export declare const Auto: Story;
+/**
+ * A search input can be included in the popup to allow the options to be filtered/searched.
+ */
+export declare const Filterable: Story;
+/**
+ * For single-select comboboxes, the popup will close when a selection is made. For multi-select
+ * comboboxes, it won't. This behaviour can be customised using `closeOnSelection`.
+ *
+ * - `auto` (default): Closes on selection for single-select comboboxes; remains open for multi-select.
+ * - `always`: Always closes when the user selects an option.
+ * - `never`: Never closes on selection; the user must explicitly close the popup.
+ */
+export declare const Closing: Story;
+/**
+ * By default, the search input, if present, will be cleared when the popup is closed. This can be
+ * prevented using `preserveSearchOnClose`.
+ */
+export declare const PreserveSearch: Story;
+//# sourceMappingURL=popup-dialog.stories.d.ts.map

package/dist/types/core/combobox/popup-dialog/popup-dialog.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup-dialog.stories.d.ts","sourceRoot":"/","sources":["core/combobox/popup-dialog/popup-dialog.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAIpD,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqIkC,CAAA;AAE5C,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,EAAE,KAKlB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KASxB,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAQ5B,CAAA"}

package/dist/types/core/combobox/popup-dialog/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const elComboboxPopupDialog: import("@linaria/core").LinariaClassName;
+export declare const ElComboboxPopupDialogHeader: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+export declare const ElComboboxPopupDialogListboxContainer: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Record<never, unknown>>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/types/core/combobox/popup-dialog/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"/","sources":["core/combobox/popup-dialog/styles.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,qBAAqB,0CA2JjC,CAAA;AAED,eAAO,MAAM,2BAA2B,qKAYvC,CAAA;AAED,eAAO,MAAM,qCAAqC,qKAYjD,CAAA"}

package/dist/types/core/combobox/popup-dialog/use-popup-observer.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Observes a popup element's open state by subscribing to its `toggle` event.
+ * @param popupId - ID of the popup element to observe.
+ * @param callback - Callback function to be called when the popup's open state changes.
+ */
+export declare function useComboboxPopupObserver(popupId: string, callback: (event: ToggleEvent) => void): void;
+//# sourceMappingURL=use-popup-observer.d.ts.map

package/dist/types/core/combobox/popup-dialog/use-popup-observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-popup-observer.d.ts","sourceRoot":"/","sources":["core/combobox/popup-dialog/use-popup-observer.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI,CA4BtG"}

package/dist/types/core/combobox/popup-dialog/use-popup-state.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tracks the open state of a popup element by subscribing to its `toggle` event.
+ * @param popupId - ID of the popup element to observe.
+ * @returns `true` when the popup is open, `false` when closed.
+ */
+export declare function useComboboxPopupState(popupId: string): boolean;
+//# sourceMappingURL=use-popup-state.d.ts.map

package/dist/types/core/combobox/popup-dialog/use-popup-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-popup-state.d.ts","sourceRoot":"/","sources":["core/combobox/popup-dialog/use-popup-state.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAQ9D"}

package/dist/types/core/combobox/search-input/__tests__/determine-search-input-variant.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=determine-search-input-variant.test.d.ts.map

package/dist/types/core/combobox/search-input/__tests__/determine-search-input-variant.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"determine-search-input-variant.test.d.ts","sourceRoot":"/","sources":["core/combobox/search-input/__tests__/determine-search-input-variant.test.ts"],"names":[],"mappings":""}

package/dist/types/core/combobox/search-input/__tests__/search-input.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=search-input.test.d.ts.map

package/dist/types/core/combobox/search-input/__tests__/search-input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.test.d.ts","sourceRoot":"/","sources":["core/combobox/search-input/__tests__/search-input.test.tsx"],"names":[],"mappings":""}

package/dist/types/core/combobox/search-input/determine-search-input-variant.d.ts

@@ -0,0 +1,49 @@
+import type { ComboboxPopupDialogContext } from '../popup-dialog';
+import type { SearchInput } from '#src/core/search-input';
+export declare namespace determineSearchInputVariant {
+    /**
+     * Input parameters for determining the search input variant.
+     */
+    interface Input {
+        /** Whether the viewport is at the XS breakpoint (below SM). */
+        isXSBreakpoint: boolean;
+        /** The popup variant from the ComboboxPopupDialog context. */
+        popupVariant: ComboboxPopupDialogContext.Value['variant'];
+    }
+    /** The computed variant for the SearchInput component. */
+    type Output = NonNullable<SearchInput.Props['variant']>;
+}
+/**
+ * Determines the appropriate SearchInput variant based on the popup variant and viewport width.
+ *
+ * The variant logic:
+ * - **drawer popup**: Returns 'borderless' for a seamless drawer experience
+ * - **popover popup**: Returns 'default' for a distinct input within the popover
+ * - **auto popup**: Returns 'borderless' on XS breakpoint (drawer), 'default' otherwise (popover)
+ *
+ * @param input - The popup variant and breakpoint information
+ * @returns The SearchInput variant that matches the popup's visual style
+ *
+ * @example
+ * ```tsx
+ * // Drawer popup always uses borderless
+ * determineSearchInputVariant({
+ *   isXSBreakpoint: false,
+ *   popupVariant: 'drawer'
+ * }) // Returns 'borderless'
+ *
+ * // Popover popup always uses default
+ * determineSearchInputVariant({
+ *   isXSBreakpoint: true,
+ *   popupVariant: 'popover'
+ * }) // Returns 'default'
+ *
+ * // Auto popup adapts to breakpoint
+ * determineSearchInputVariant({
+ *   isXSBreakpoint: true,
+ *   popupVariant: 'auto'
+ * }) // Returns 'borderless' (becomes drawer on XS)
+ * ```
+ */
+export declare function determineSearchInputVariant({ isXSBreakpoint, popupVariant, }: determineSearchInputVariant.Input): determineSearchInputVariant.Output;
+//# sourceMappingURL=determine-search-input-variant.d.ts.map

package/dist/types/core/combobox/search-input/determine-search-input-variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"determine-search-input-variant.d.ts","sourceRoot":"/","sources":["core/combobox/search-input/determine-search-input-variant.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAA;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAEzD,yBAAiB,2BAA2B,CAAC;IAC3C;;OAEG;IACH,UAAiB,KAAK;QACpB,+DAA+D;QAC/D,cAAc,EAAE,OAAO,CAAA;QACvB,8DAA8D;QAC9D,YAAY,EAAE,0BAA0B,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;KAC1D;IAED,0DAA0D;IAC1D,KAAY,MAAM,GAAG,WAAW,CAAC,WAAW,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAA;CAC/D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,cAAc,EACd,YAAY,GACb,EAAE,2BAA2B,CAAC,KAAK,GAAG,2BAA2B,CAAC,MAAM,CAUxE"}

package/dist/types/core/combobox/search-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './search-input';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/core/combobox/search-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"/","sources":["core/combobox/search-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/types/core/combobox/search-input/search-input.d.ts

@@ -0,0 +1,37 @@
+import { SearchInput } from '#src/core/search-input';
+type AttributesToOmit = Extract<keyof SearchInput.Props, 'type' | 'variant'>;
+export declare namespace ComboboxSearchInput {
+    interface Props extends Omit<SearchInput.Props, AttributesToOmit> {
+        /** The accessible label for the search input. */
+        'aria-label': string;
+    }
+}
+/**
+ * A search input for use within a Combobox.Popup component.
+ *
+ * This component automatically adapts its visual style based on the parent popup's variant:
+ * - When the popup is a drawer, the input uses a borderless style
+ * - When the popup is a popover, the input uses the default bordered style
+ * - When the popup is set to auto, the style changes based on the viewport width
+ *
+ * @example
+ * ```tsx
+ * <Combobox>
+ *   <Combobox.AutocompleteButton />
+ *   <Combobox.Popup
+ *     search={<Combobox.SearchInput placeholder="Search options..." />}
+ *     variant="popover"
+ *   >
+ *     <Combobox.Listbox>
+ *       <Combobox.Option value="1">Option 1</Combobox.Option>
+ *     </Combobox.Listbox>
+ *   </Combobox.Popup>
+ * </Combobox>
+ * ```
+ */
+export declare function ComboboxSearchInput(props: ComboboxSearchInput.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ComboboxSearchInput {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=search-input.d.ts.map

package/dist/types/core/combobox/search-input/search-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.d.ts","sourceRoot":"/","sources":["core/combobox/search-input/search-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAOpD,KAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;AAE5E,yBAAiB,mBAAmB,CAAC;IACnC,UAAiB,KAAM,SAAQ,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,gBAAgB,CAAC;QACtE,iDAAiD;QACjD,YAAY,EAAE,MAAM,CAAA;KACrB;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,mBAAmB,CAAC,KAAK,2CASnE;yBATe,mBAAmB"}