@kazee-ds/react 0.11.0 → 0.12.0

package/dist/types/Combobox.d.ts

@@ -1,15 +1,18 @@
 import { ComboboxComposition, ComboboxInputGroup, ComboboxInput, ComboboxTrigger, ComboboxPopover, ComboboxClearButton, type ComboboxCompositionProps } from './combobox-composition.js';
 import { type StylingProps } from './styling.js';
+import { type PopoverPositionOptions, type PopoverWidth } from './popover-position.js';
 import { type ReactNode } from 'react';
 import type { SelectSize, SelectVariant } from './Select.js';
 import { type SelectOption } from './selection-options.js';
-export interface ComboboxProps extends StylingProps<'root' | 'label' | 'required' | 'control' | 'leading' | 'input' | 'clearButton' | 'clearIcon' | 'trigger' | 'indicator' | 'popover' | 'list' | 'empty' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator' | 'description' | 'error'> {
+export interface ComboboxProps extends PopoverPositionOptions, StylingProps<'root' | 'label' | 'required' | 'control' | 'leading' | 'input' | 'clearButton' | 'clearIcon' | 'trigger' | 'indicator' | 'popover' | 'list' | 'empty' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator' | 'description' | 'error'> {
     label: string;
     size?: SelectSize;
     variant?: SelectVariant;
     hideLabel?: boolean;
     fullWidth?: boolean;
     maxHeight?: number;
+    /** `trigger` (default) matches the input group; `content` grows with the options. */
+    popoverWidth?: PopoverWidth;
     menuTrigger?: 'input' | 'focus' | 'manual';
     selectOnFocus?: boolean;
     disallowEmptySelection?: boolean;

package/dist/types/DateRangePicker.d.ts

@@ -1,8 +1,9 @@
 import { DateRangeTrigger, DateRangeValue, DateRangeIndicator, DateRangePopover, DateRangeContent, DateRangeCalendar, DateRangeInput, DateRangeApplyButton, DateRangeClearButton, DateRangeCancelButton } from './date-range-composition.js';
 import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
+import { type PopoverPositionOptions } from './popover-position.js';
 import { type DateRange, type DateRangeOptions } from './date-range-model.js';
-export interface DateRangePickerProps extends DateRangeOptions, StylingProps<'root' | 'content' | 'intro' | 'summary' | 'body' | 'presets' | 'preset' | 'main' | 'inputs' | 'field' | 'input' | 'inputLabel' | 'monthSelect' | 'yearInput' | 'title' | 'draftError' | 'jump' | 'calendar' | 'navigation' | 'navigationButton' | 'months' | 'month' | 'heading' | 'grid' | 'weekday' | 'day' | 'validation' | 'footer' | 'clearButton' | 'cancelButton' | 'applyButton' | 'label' | 'panel' | 'trigger' | 'icon' | 'value' | 'chevron' | 'dialog' | 'description' | 'error'> {
+export interface DateRangePickerProps extends DateRangeOptions, PopoverPositionOptions, StylingProps<'root' | 'content' | 'intro' | 'summary' | 'body' | 'presets' | 'preset' | 'main' | 'inputs' | 'field' | 'input' | 'inputLabel' | 'monthSelect' | 'yearInput' | 'title' | 'draftError' | 'jump' | 'calendar' | 'navigation' | 'navigationButton' | 'months' | 'month' | 'heading' | 'grid' | 'weekday' | 'day' | 'validation' | 'footer' | 'clearButton' | 'cancelButton' | 'applyButton' | 'label' | 'panel' | 'trigger' | 'icon' | 'value' | 'chevron' | 'dialog' | 'description' | 'error'> {
     value?: DateRange | null;
     onChange?: (value: DateRange | null) => void;
     children?: ReactNode;

package/dist/types/Select.d.ts

@@ -1,3 +1,4 @@
+import { type PopoverPositionOptions, type PopoverWidth } from './popover-position.js';
 import { SelectComposition, SelectControl, SelectTrigger, SelectValuePart, SelectIndicator, SelectClearButton, SelectPopover, type SelectCompositionProps } from './control-composition.js';
 import { type StylingProps } from './styling.js';
 import { type ReactNode } from 'react';
@@ -5,12 +6,14 @@ import { type SelectOption } from './selection-options.js';
 export type { SelectOption } from './selection-options.js';
 export type SelectSize = 'xs' | 'sm' | 'dense' | 'md' | 'lg' | 'xl';
 export type SelectVariant = 'primary' | 'secondary' | 'outline' | 'flat';
-interface SelectCommonProps extends StylingProps<'root' | 'label' | 'required' | 'control' | 'trigger' | 'leading' | 'value' | 'indicator' | 'clearButton' | 'clearIcon' | 'popover' | 'list' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator' | 'description' | 'error'> {
+interface SelectCommonProps extends PopoverPositionOptions, StylingProps<'root' | 'label' | 'required' | 'control' | 'trigger' | 'leading' | 'value' | 'indicator' | 'clearButton' | 'clearIcon' | 'popover' | 'list' | 'item' | 'itemLabel' | 'itemDescription' | 'itemIndicator' | 'description' | 'error'> {
     /** Activates an option even when it is already selected (for linked editors). */
     onAction?: (value: string) => void;
     label: string;
     options: SelectOption[];
     maxHeight?: number;
+    /** `content` (default) grows with the options; `trigger` matches the trigger and wraps them. */
+    popoverWidth?: PopoverWidth;
     size?: SelectSize;
     variant?: SelectVariant;
     /** Hide visually while retaining the accessible label. */

package/dist/types/TemporalPicker.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode, type HTMLAttributes, type ButtonHTMLAttributes } from 'react';
+import { type PopoverPositionOptions, type PopoverPositionProps } from './popover-position.js';
 import { type ButtonProps } from 'react-aria-components/Button';
 import { MonthPicker, YearPicker } from './Calendar.js';
 import { type TemporalFieldProps } from './TemporalField.js';
@@ -10,7 +11,7 @@ export interface TemporalPreset<T> {
     label: string;
     value: T | null;
 }
-export interface TemporalPickerOptions extends Omit<TemporalConstraints, 'kind'>, StylingProps<'label' | 'trigger' | 'value' | 'panel' | 'content' | 'field' | 'calendar' | 'time' | 'footer' | 'applyButton' | 'cancelButton' | 'clearButton' | 'preset' | 'description' | 'error'> {
+export interface TemporalPickerOptions extends Omit<TemporalConstraints, 'kind'>, PopoverPositionOptions, StylingProps<'label' | 'trigger' | 'value' | 'panel' | 'content' | 'field' | 'calendar' | 'time' | 'footer' | 'applyButton' | 'cancelButton' | 'clearButton' | 'preset' | 'description' | 'error'> {
     label: string;
     locale?: string;
     dir?: 'ltr' | 'rtl';
@@ -58,7 +59,8 @@ export declare function TemporalPickerTrigger({ children, className, ...props }:
     className?: string;
 }): import("react").JSX.Element;
 export declare function TemporalPickerContent({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function TemporalPickerPopover({ children, className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+/** Position props set on this part win over the picker's `popoverAlign` / `popoverProps`. */
+export declare function TemporalPickerPopover({ children, className, placement, offset, crossOffset, shouldFlip, containerPadding, ...props }: HTMLAttributes<HTMLDivElement> & PopoverPositionProps): import("react").JSX.Element;
 export declare const TemporalPickerApplyButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element, TemporalPickerCancelButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element, TemporalPickerClearButton: ({ children, className, onClick, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => import("react").JSX.Element;
 export declare const DatePicker: ((props: TemporalPickerProps<string>) => import("react").JSX.Element) & {
     Root: (props: TemporalPickerProps<string>) => import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -8,6 +8,7 @@ export type { ToggleButtonGroupProps } from './ToggleButtonGroup.js';
 export type { ButtonPressEvent, ButtonProps, ButtonRenderProps, ButtonSize, ButtonVariant, } from './Button.js';
 export { Select } from './Select.js';
 export type { SelectOption, SelectProps, SelectSize, SelectVariant } from './Select.js';
+export type { PopoverAlign, PopoverWidth, PopoverPositionProps, PopoverPositionOptions, } from './popover-position.js';
 export { SelectGroup } from './SelectGroup.js';
 export type { SelectGroupProps } from './SelectGroup.js';
 export { Input } from './Input.js';

package/dist/types/popover-position.d.ts

@@ -0,0 +1,16 @@
+import type { PopoverProps } from 'react-aria-components/Popover';
+/** Logical trigger edge the popover aligns to; `end` is the left edge in RTL. */
+export type PopoverAlign = 'start' | 'center' | 'end';
+/** `trigger` matches the trigger width and wraps long options; `content` grows with its options. */
+export type PopoverWidth = 'trigger' | 'content';
+/** React Aria positioning options forwarded to the popover. */
+export type PopoverPositionProps = Pick<PopoverProps, 'placement' | 'offset' | 'crossOffset' | 'shouldFlip' | 'containerPadding'>;
+export interface PopoverPositionOptions {
+    /** Trigger edge the popover aligns to. Defaults to `start`. */
+    popoverAlign?: PopoverAlign;
+    /** Positioning passthrough; `placement` here wins over `popoverAlign`. */
+    popoverProps?: PopoverPositionProps;
+}
+/** Merge defaults, the alignment shortcut and the passthrough, ignoring undefined passthrough keys. */
+export declare function popoverPosition({ popoverAlign, popoverProps }: PopoverPositionOptions, defaults?: PopoverPositionProps): PopoverPositionProps;
+export declare function popoverWidthClass(width: PopoverWidth): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kazee-ds/react",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "exports": {
     ".": {