@matthiaskrijgsman/mat-ui 0.0.51 → 0.0.52

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import type { ControlSize } from "@/control-size/control-size.util.ts";
+export type SelectDrilldownApi = {
+    /** Dismisses the popover — call after committing a leaf selection. */
+    close: () => void;
+};
+export type InputSelectDrilldownProps = {
+    id?: string;
+    className?: string;
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+    size?: ControlSize;
+    disabled?: boolean;
+    clearable?: boolean;
+    placeholder?: string | React.ReactNode;
+    /** Whether a value is selected — drives the clear button + trigger padding. */
+    hasValue?: boolean;
+    /** Rendered inside the trigger for the current selection. */
+    valueLabel?: React.ReactNode;
+    onClear?: () => void;
+    minWidth?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    /**
+     * Root-level menu content. Rendered inside the drilldown navigator, so it (and
+     * anything it drills into via {@link DropdownDrilldown}) slides between levels.
+     * Pass a function to receive `{ close }` for dismissing after a leaf pick.
+     */
+    children: React.ReactNode | ((api: SelectDrilldownApi) => React.ReactNode);
+};
+/**
+ * A single-select control whose menu is a sliding drilldown rather than a flat
+ * option list — for hierarchies too large or too lazy to flatten up front. It
+ * owns the (shared) {@link SelectTrigger}, popover, and {@link DropdownNavigator};
+ * the consumer supplies the level content and uses {@link DropdownDrilldown} for
+ * rows that descend a level. The current value is opaque to this component — pass
+ * `valueLabel` for the trigger and `hasValue`/`onClear` for clearing.
+ */
+export declare const InputSelectDrilldown: (props: InputSelectDrilldownProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+import * as React from "react";
+import type { ControlSize } from "@/control-size/control-size.util.ts";
+export type SelectTriggerProps = {
+    /** Overrides the size from `ControlSizeContext` when set. */
+    size?: ControlSize;
+    open?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    clearable?: boolean;
+    /** Whether a value is selected — drives the clear button and right padding. */
+    hasValue?: boolean;
+    /** Rendered when a value is selected. */
+    selectedLabel?: React.ReactNode;
+    placeholder?: React.ReactNode;
+    onClear?: () => void;
+    showChevron?: boolean;
+    className?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>;
+/**
+ * The shared trigger surface for the select family (`InputSelect`,
+ * `InputSelectSearchable`, `InputSelectDrilldown`): the bordered control box that
+ * shows the current selection (or placeholder) plus the icon-button tray (error
+ * icon, optional clear, chevron). Extracted so every select-like control shares
+ * exactly the same sizing and styling. Interaction props (role, tabIndex,
+ * onClick, onKeyDown, floating-ui reference props) are spread onto the box, and
+ * the forwarded ref lands on it.
+ */
+export declare const SelectTrigger: React.ForwardRefExoticComponent<{
+    /** Overrides the size from `ControlSizeContext` when set. */
+    size?: ControlSize;
+    open?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    clearable?: boolean;
+    /** Whether a value is selected — drives the clear button and right padding. */
+    hasValue?: boolean;
+    /** Rendered when a value is selected. */
+    selectedLabel?: React.ReactNode;
+    placeholder?: React.ReactNode;
+    onClear?: () => void;
+    showChevron?: boolean;
+    className?: string;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & React.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -34,6 +34,8 @@ export { lexicalTheme, LEXICAL_NODES } from "./components/inputs/input-lexical/l
 export { InputSelectNative } from "./components/inputs/InputSelectNative.tsx";
 export { InputSelect } from "./components/inputs/InputSelect.tsx";
 export { InputSelectSearchable } from "./components/inputs/InputSelectSearchable.tsx";
+export { InputSelectDrilldown } from "./components/inputs/InputSelectDrilldown.tsx";
+export { SelectTrigger } from "./components/inputs/SelectTrigger.tsx";
 export { InputSelectSearchableAsync } from "./components/inputs/InputSelectSearchableAsync.tsx";
 export { InputSelectMultiple } from "./components/inputs/InputSelectMultiple.tsx";
 export { InputSelectOption } from "./components/inputs/InputSelectOption.tsx";

package/dist/index.js

@@ -2342,6 +2342,53 @@ const useSelectPopover = (props) => {
     getItemProps
   };
 };
+const SelectTrigger = React.forwardRef((props, ref) => {
+  const {
+    size: sizeProp,
+    open = false,
+    disabled = false,
+    error = false,
+    clearable = false,
+    hasValue = false,
+    selectedLabel,
+    placeholder,
+    onClear,
+    showChevron = true,
+    className,
+    ...rest
+  } = props;
+  const contextSize = useControlSize();
+  const size2 = sizeProp ?? contextSize;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: classNames(
+          "flex flex-row items-center border-[length:var(--border-width-input)] select-trigger transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none select-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
+          sizeHeightClasses[size2],
+          sizeFontClasses[size2],
+          sizePaddingLeftClasses[size2],
+          clearable && hasValue ? sizePaddingRightWithTrayTwoClasses[size2] : sizePaddingRightWithTrayClasses[size2],
+          disabled ? "select-trigger-disabled" : error && "select-trigger-error",
+          !disabled && open && "ring-[length:var(--control-ring-width)]",
+          className
+        ),
+        ...rest,
+        children: [
+          selectedLabel && /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left", children: selectedLabel }),
+          !selectedLabel && placeholder && /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left select-placeholder", children: placeholder })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(InputIconButtonTray, { children: [
+      !disabled && error && /* @__PURE__ */ jsx(InputErrorIcon, {}),
+      clearable && hasValue && !disabled && /* @__PURE__ */ jsx(InputIconButton, { Icon: IconX, onClick: onClear }),
+      showChevron && /* @__PURE__ */ jsx(InputIconButton, { Icon: IconChevronDown })
+    ] })
+  ] });
+});
+SelectTrigger.displayName = "SelectTrigger";
 const InputSelect = (props) => {
   const {
     className,
@@ -2409,8 +2456,8 @@ const InputSelect = (props) => {
       children: [
         /* @__PURE__ */ jsx(InputLabel, { children: label }),
         /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col", ref: anchorRef, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
             {
               ...getReferenceProps({
                 ref,
@@ -2435,26 +2482,17 @@ const InputSelect = (props) => {
                   }
                 }
               }),
-              className: classNames(
-                "flex flex-row items-center border-[length:var(--border-width-input)] select-trigger transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none select-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
-                sizeHeightClasses[size2],
-                sizeFontClasses[size2],
-                sizePaddingLeftClasses[size2],
-                clearable && value ? sizePaddingRightWithTrayTwoClasses[size2] : sizePaddingRightWithTrayClasses[size2],
-                disabled ? "select-trigger-disabled" : error && "select-trigger-error",
-                !disabled && open && "ring-[length:var(--control-ring-width)]"
-              ),
-              children: [
-                selectedOption && /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left", children: selectedOption.label }),
-                !selectedOption && placeholder && /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left select-placeholder", children: placeholder })
-              ]
+              size: size2,
+              open,
+              disabled,
+              error: !!error,
+              clearable,
+              hasValue: !!value,
+              selectedLabel: selectedOption?.label,
+              placeholder,
+              onClear: () => onChange(null)
             }
           ),
-          /* @__PURE__ */ jsxs(InputIconButtonTray, { children: [
-            !disabled && error && /* @__PURE__ */ jsx(InputErrorIcon, {}),
-            clearable && !!value && !disabled && /* @__PURE__ */ jsx(InputIconButton, { Icon: IconX, onClick: () => onChange(null) }),
-            /* @__PURE__ */ jsx(InputIconButton, { Icon: IconChevronDown })
-          ] }),
           /* @__PURE__ */ jsx(Popover, { open, children: /* @__PURE__ */ jsx(DropdownPanel, { className: "!p-0", style: { maxHeight }, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col p-2 gap-1", children: options.map((item, i) => {
             if (!isSelectOption(item)) {
               if (item.kind === "header") {
@@ -2586,8 +2624,8 @@ const InputSelectSearchable = (props) => {
       children: [
         /* @__PURE__ */ jsx(InputLabel, { children: label }),
         /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col", ref: anchorRef, children: [
-          /* @__PURE__ */ jsxs(
-            "div",
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
             {
               ...getReferenceProps({
                 ref,
@@ -2608,26 +2646,17 @@ const InputSelectSearchable = (props) => {
                   }
                 }
               }),
-              className: classNames(
-                "flex flex-row items-center border-[length:var(--border-width-input)] select-trigger transition-all duration-[var(--control-transition-duration)] rounded-[var(--border-radius-input)] shadow-[var(--shadow-control)] ring-0 focus:ring-[length:var(--control-ring-width)] focus:outline-none select-none font-[number:var(--font-weight-input-text)] font-[family-name:var(--font-family-base)]",
-                sizeHeightClasses[size2],
-                sizeFontClasses[size2],
-                sizePaddingLeftClasses[size2],
-                clearable && value ? sizePaddingRightWithTrayTwoClasses[size2] : sizePaddingRightWithTrayClasses[size2],
-                disabled ? "select-trigger-disabled" : error && "select-trigger-error",
-                !disabled && open && "ring-[length:var(--control-ring-width)]"
-              ),
-              children: [
-                selectedOption && /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left", children: selectedOption.label }),
-                !selectedOption && placeholder && /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 break-all line-clamp-1 text-left select-placeholder", children: placeholder })
-              ]
+              size: size2,
+              open,
+              disabled,
+              error: !!error,
+              clearable,
+              hasValue: !!value,
+              selectedLabel: selectedOption?.label,
+              placeholder,
+              onClear: () => onChange(null)
             }
           ),
-          /* @__PURE__ */ jsxs(InputIconButtonTray, { children: [
-            !disabled && error && /* @__PURE__ */ jsx(InputErrorIcon, {}),
-            clearable && !!value && !disabled && /* @__PURE__ */ jsx(InputIconButton, { Icon: IconX, onClick: () => onChange(null) }),
-            /* @__PURE__ */ jsx(InputIconButton, { Icon: IconChevronDown })
-          ] }),
           /* @__PURE__ */ jsx(Popover, { open, children: /* @__PURE__ */ jsxs(DropdownPanel, { className: "gap-0 !p-0", style: { maxHeight }, children: [
             /* @__PURE__ */ jsxs("div", { className: "sticky top-0 border-b select-search-bar py-1 backdrop-blur-sm", children: [
               /* @__PURE__ */ jsx(
@@ -2702,6 +2731,75 @@ const InputSelectSearchable = (props) => {
     }
   ) });
 };
+const InputSelectDrilldown = (props) => {
+  const {
+    id,
+    className,
+    label,
+    description,
+    error,
+    size: size2 = "md",
+    disabled = false,
+    clearable = false,
+    placeholder,
+    hasValue = false,
+    valueLabel,
+    onClear,
+    minWidth = 200,
+    maxWidth,
+    maxHeight = 300,
+    children
+  } = props;
+  const [open, setOpen] = useState(false);
+  const { anchorRef, Popover } = usePopover({
+    placement: "bottom-start",
+    fullWidth: true,
+    minWidth,
+    maxWidth,
+    open,
+    onOpenChange: setOpen
+  });
+  const content = typeof children === "function" ? children({ close: () => setOpen(false) }) : children;
+  return /* @__PURE__ */ jsx(ControlSizeContext.Provider, { value: size2, children: /* @__PURE__ */ jsxs("div", { className: classNames("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx(InputLabel, { children: label }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex w-full flex-col", ref: anchorRef, children: [
+      /* @__PURE__ */ jsx(
+        SelectTrigger,
+        {
+          id,
+          role: "button",
+          tabIndex: disabled ? -1 : 0,
+          "aria-disabled": disabled,
+          size: size2,
+          open,
+          disabled,
+          error: !!error,
+          clearable,
+          hasValue,
+          selectedLabel: valueLabel,
+          placeholder,
+          onClear,
+          onClick: () => {
+            if (!disabled) setOpen(!open);
+          },
+          onKeyDown: (e) => {
+            if (disabled) return;
+            if (e.key === " ") {
+              e.preventDefault();
+              setOpen((o) => !o);
+            } else if (e.key === "Enter" && !open) {
+              e.preventDefault();
+              setOpen(true);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Popover, { open, children: /* @__PURE__ */ jsx(DropdownPanel, { padding: "sm", style: { maxHeight }, children: /* @__PURE__ */ jsx(DropdownNavigator, { open, children: content }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(InputDescription, { children: description }),
+    /* @__PURE__ */ jsx(InputError, { children: error })
+  ] }) });
+};
 const useDebounce = (value, delay) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
@@ -4357,6 +4455,7 @@ export {
   InputRadio,
   InputSelect,
   InputSelectDivider,
+  InputSelectDrilldown,
   InputSelectGroupHeader,
   InputSelectMultiple,
   InputSelectNative,
@@ -4383,6 +4482,7 @@ export {
   PanelLink,
   PanelStack,
   PopoverBase,
+  SelectTrigger,
   SidebarModal,
   Spinner,
   TabButtons,