@matthiaskrijgsman/mat-ui 0.0.28 → 0.0.29

package/dist/components/inputs/InputIconButtonTray.d.ts

@@ -3,4 +3,4 @@ export type InputIconButtonTrayProps = {
     children?: React.ReactNode;
     className?: string;
 };
-export declare const InputIconButtonTray: (props: InputIconButtonTrayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputIconButtonTray: React.ForwardRefExoticComponent<InputIconButtonTrayProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/InputSelect.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type SelectItem } from "@/components/inputs/select-item.ts";
 export type Size = 'sm' | 'md' | 'lg';
 export type InputSelectProps<T> = {
     name?: string;
@@ -6,7 +7,7 @@ export type InputSelectProps<T> = {
     className?: string;
     label?: string | React.ReactNode;
     description?: string | React.ReactNode;
-    options: Option<T>[];
+    options: SelectItem<T>[];
     value: T | null;
     onChange: (value: T | null) => void;
     placeholder?: string;
@@ -14,9 +15,5 @@ export type InputSelectProps<T> = {
     error?: string | React.ReactNode;
     size?: Size;
 };
-export type Option<T> = {
-    label: string | React.ReactNode;
-    value: T;
-    disabled?: boolean;
-};
+export type { Option, SelectGroupHeader, SelectDivider, SelectItem } from "@/components/inputs/select-item.ts";
 export declare const InputSelect: <T>(props: InputSelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/InputSelectDivider.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export type InputSelectDividerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const InputSelectDivider: React.ForwardRefExoticComponent<InputSelectDividerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/InputSelectGroupHeader.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export interface InputSelectGroupHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const InputSelectGroupHeader: React.ForwardRefExoticComponent<InputSelectGroupHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/InputSelectMultiple.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { type BadgeColorKey } from "@/components/BadgeColors.tsx";
+import { type SelectItem } from "@/components/inputs/select-item.ts";
+export type Size = 'sm' | 'md' | 'lg';
+export type InputSelectMultipleProps<T> = {
+    name?: string;
+    id?: string;
+    className?: string;
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    options: SelectItem<T>[];
+    onSearch?: (search: string) => SelectItem<T>[];
+    value: T[];
+    onChange: (value: T[]) => void;
+    placeholder?: string;
+    maxHeight?: number;
+    error?: string | React.ReactNode;
+    size?: Size;
+    singleLine?: boolean;
+    color?: BadgeColorKey;
+};
+export declare const InputSelectMultiple: <T>(props: InputSelectMultipleProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/InputSelectOption.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
-export interface InputSelectOptionProps {
+export interface InputSelectOptionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
     children: React.ReactNode;
     selected: boolean;
     disabled?: boolean;
+    active?: boolean;
     onClick?: () => void;
 }
-export declare const InputSelectOption: (props: InputSelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputSelectOption: React.ForwardRefExoticComponent<InputSelectOptionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/inputs/InputSelectSearchable.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { type SelectItem } from "@/components/inputs/select-item.ts";
+export type { Option } from "@/components/inputs/select-item.ts";
 export type Size = 'sm' | 'md' | 'lg';
 export type InputSelectSearchableProps<T> = {
     name?: string;
@@ -6,8 +8,8 @@ export type InputSelectSearchableProps<T> = {
     className?: string;
     label?: string | React.ReactNode;
     description?: string | React.ReactNode;
-    options: Option<T>[];
-    onSearch: (search: string) => Option<T>[];
+    options: SelectItem<T>[];
+    onSearch: (search: string) => SelectItem<T>[];
     value: T | null;
     onChange: (value: T | null) => void;
     placeholder?: string;
@@ -15,9 +17,4 @@ export type InputSelectSearchableProps<T> = {
     error?: string | React.ReactNode;
     size?: Size;
 };
-export type Option<T> = {
-    label: string | React.ReactNode;
-    value: T;
-    disabled?: boolean;
-};
 export declare const InputSelectSearchable: <T>(props: InputSelectSearchableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/InputSelectSearchableAsync.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { type Option, type SelectItem } from "@/components/inputs/select-item.ts";
+export type { Option } from "@/components/inputs/select-item.ts";
 export type Size = 'sm' | 'md' | 'lg';
 export type InputSelectSearchableAsyncProps<T> = {
     name?: string;
@@ -6,7 +8,7 @@ export type InputSelectSearchableAsyncProps<T> = {
     className?: string;
     label?: string | React.ReactNode;
     description?: string | React.ReactNode;
-    fetchOptionsByQuery: (search: string) => Promise<Option<T>[]>;
+    fetchOptionsByQuery: (search: string) => Promise<SelectItem<T>[]>;
     fetchOptionByValue: (value: T) => Promise<Option<T>>;
     onSearchDebounceMs?: number;
     value: T | null;
@@ -16,9 +18,4 @@ export type InputSelectSearchableAsyncProps<T> = {
     error?: string | React.ReactNode;
     size?: Size;
 };
-export type Option<T> = {
-    label: string | React.ReactNode;
-    value: T;
-    disabled?: boolean;
-};
 export declare const InputSelectSearchableAsync: <T>(props: InputSelectSearchableAsyncProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/select-item.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type Option<T> = {
+    label: string | React.ReactNode;
+    value: T;
+    disabled?: boolean;
+};
+export type SelectGroupHeader = {
+    kind: 'header';
+    label: string | React.ReactNode;
+};
+export type SelectDivider = {
+    kind: 'divider';
+};
+export type SelectItem<T> = Option<T> | SelectGroupHeader | SelectDivider;
+export declare const isSelectOption: <T>(item: SelectItem<T>) => item is Option<T>;

package/dist/control-size/control-size.util.d.ts

@@ -7,6 +7,7 @@ export declare const sizePaddingXClasses: Record<ControlSize, string>;
 export declare const sizePaddingLeftClasses: Record<ControlSize, string>;
 export declare const sizePaddingRightClasses: Record<ControlSize, string>;
 export declare const sizePaddingRightWithTrayClasses: Record<ControlSize, string>;
+export declare const sizePaddingRightWithTrayTwoClasses: Record<ControlSize, string>;
 export declare const sizePaddingLeftWithIconClasses: Record<ControlSize, string>;
 export declare const sizeIconLeftPositionClasses: Record<ControlSize, string>;
 export declare const sizeTrayRightPositionClasses: Record<ControlSize, string>;

package/dist/hooks/use-overflow-fit.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from "react";
+type UseOverflowFitOptions = {
+    enabled: boolean;
+    triggerRef: RefObject<HTMLElement | null>;
+    measureRef: RefObject<HTMLElement | null>;
+    trayRef?: RefObject<HTMLElement | null>;
+    itemCount: number;
+    deps?: ReadonlyArray<unknown>;
+    gap?: number;
+};
+export declare function useOverflowFit(options: UseOverflowFitOptions): number;
+export {};

package/dist/index.d.ts

@@ -22,7 +22,11 @@ export { InputSelectNative } from "./components/inputs/InputSelectNative.tsx";
 export { InputSelect } from "./components/inputs/InputSelect.tsx";
 export { InputSelectSearchable } from "./components/inputs/InputSelectSearchable.tsx";
 export { InputSelectSearchableAsync } from "./components/inputs/InputSelectSearchableAsync.tsx";
+export { InputSelectMultiple } from "./components/inputs/InputSelectMultiple.tsx";
 export { InputSelectOption } from "./components/inputs/InputSelectOption.tsx";
+export { InputSelectGroupHeader } from "./components/inputs/InputSelectGroupHeader.tsx";
+export { InputSelectDivider } from "./components/inputs/InputSelectDivider.tsx";
+export { isSelectOption } from "./components/inputs/select-item.ts";
 export { Panel } from "./components/panel/Panel.tsx";
 export { PanelStack } from "./components/panel/PanelStack.tsx";
 export { PanelField } from "./components/panel/PanelField.tsx";
@@ -43,6 +47,7 @@ export { DropdownButtonGroup } from "./components/dropdown-menu/DropdownButtonGr
 export { DropdownPanel } from "./components/dropdown-menu/DropdownPanel.tsx";
 export { DropdownMenu } from "./components/dropdown-menu/DropdownMenu.tsx";
 export { usePopover } from "./popover/use-popover.tsx";
+export { useSelectPopover } from "./popover/use-select-popover.tsx";
 export { PopoverBase } from "./popover/PopoverBase.tsx";
 export { Test } from "./components/Test.tsx";
 export * from "./types.ts";