@bitrise/bitkit-v2 0.3.416 → 0.3.418

package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js

@@ -57,7 +57,7 @@ var BitkitBreadcrumbRoot = forwardRef(({ children, ...rest }, ref) => {
 		ref,
 		...rest,
 		children: /* @__PURE__ */ jsx(Breadcrumb.List, { children: childArray.map((child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [child, /* @__PURE__ */ jsx(Show, {
-			when: index < childArray.length - 1,
+			when: index < childArray.length - 1 || child.type === BreadcrumbItem,
 			children: /* @__PURE__ */ jsx(Breadcrumb.Separator, { children: /* @__PURE__ */ jsx(IconChevronRight, {}) })
 		})] }, child.key)) })
 	});

package/dist/components/BitkitBreadcrumb/BitkitBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitBreadcrumb.js","names":[],"sources":["../../../lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx"],"sourcesContent":["import { Breadcrumb, type BreadcrumbRootProps } from '@chakra-ui/react/breadcrumb';\nimport { useBreakpointValue } from '@chakra-ui/react/hooks';\nimport { Show } from '@chakra-ui/react/show';\nimport { forwardRef, Fragment, type ReactElement } from 'react';\n\nimport { IconChevronRight, IconMoreHorizontal } from '../../icons';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton.tsx';\nimport BreadcrumbCurrentItem, { type CurrentItemProps } from './components/BreadcrumbCurrentItem.tsx';\nimport BreadcrumbItem from './components/BreadcrumbItem.tsx';\nimport OverflowMenu, { type OverflowMenuProps } from './components/OverflowMenu.tsx';\nimport OverflowMenuItem from './components/OverflowMenuItem.tsx';\nimport OverflowMenuTrigger from './components/OverflowMenuTrigger.tsx';\nimport { type ItemProps } from './types.ts';\n\ntype BitkitBreadcrumbChild = ReactElement<ItemProps> | ReactElement<CurrentItemProps> | ReactElement<OverflowMenuProps>;\n\nexport type BitkitBreadcrumbProps = Omit<BreadcrumbRootProps, 'children'> & {\n  children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];\n};\n\n// The whole prop bag travels, not just `href`/`children`: the mobile layout rebuilds its items\n// from these, so picking two keys here would drop everything else a consumer put on a crumb — a\n// `data-*` hook, an `aria-*`, an `onClick` — on mobile only, and silently.\nconst flattenItemProps = (elements: ReactElement[]): ItemProps[] => {\n  const props: ItemProps[] = [];\n\n  for (const child of elements) {\n    if (child.type === BreadcrumbItem) {\n      props.push(child.props as ItemProps);\n    } else if (child.type === OverflowMenu) {\n      const { children: menuChildren } = child.props as OverflowMenuProps;\n      const menuChildArray = flattenChildren(menuChildren);\n      for (const menuChild of menuChildArray) {\n        if (menuChild.type === OverflowMenuItem) {\n          props.push(menuChild.props as ItemProps);\n        }\n      }\n    }\n  }\n\n  return props;\n};\n\nconst BitkitBreadcrumbRoot = forwardRef<HTMLElement, BitkitBreadcrumbProps>(({ children, ...rest }, ref) => {\n  const isMobile = useBreakpointValue({ base: true, tablet: false }, { fallback: 'tablet' });\n  const childArray = flattenChildren(children);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  if (isMobile) {\n    const links = flattenItemProps(childArray);\n    if (links.length === 0) {\n      return null;\n    }\n\n    const lastLink = links[links.length - 1];\n    const overflowLinks = links.slice(0, -1).reverse();\n\n    return (\n      <Breadcrumb.Root ref={ref} {...rest}>\n        <Breadcrumb.List>\n          <Show when={overflowLinks.length > 0}>\n            <OverflowMenu>\n              <OverflowMenuTrigger>\n                <BitkitControlButton icon={IconMoreHorizontal} label=\"Open breadcrumbs\" size=\"xs\" />\n              </OverflowMenuTrigger>\n              {overflowLinks.map((link) => (\n                <OverflowMenuItem key={link.href} {...link} />\n              ))}\n            </OverflowMenu>\n            <Breadcrumb.Separator>\n              <IconChevronRight />\n            </Breadcrumb.Separator>\n          </Show>\n          <BreadcrumbItem {...lastLink} />\n          <Breadcrumb.Separator>\n            <IconChevronRight />\n          </Breadcrumb.Separator>\n        </Breadcrumb.List>\n      </Breadcrumb.Root>\n    );\n  }\n\n  return (\n    <Breadcrumb.Root ref={ref} {...rest}>\n      <Breadcrumb.List>\n        {childArray.map((child, index) => (\n          <Fragment key={child.key}>\n            {child}\n            <Show when={index < childArray.length - 1}>\n              <Breadcrumb.Separator>\n                <IconChevronRight />\n              </Breadcrumb.Separator>\n            </Show>\n          </Fragment>\n        ))}\n      </Breadcrumb.List>\n    </Breadcrumb.Root>\n  );\n});\n\nBitkitBreadcrumbRoot.displayName = 'BitkitBreadcrumb';\n\nconst BitkitBreadcrumb = withSubComponents(BitkitBreadcrumbRoot, {\n  CurrentItem: BreadcrumbCurrentItem,\n  Item: BreadcrumbItem,\n  OverflowMenu,\n  OverflowMenuItem,\n});\n\nexport default BitkitBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,oBAAoB,aAA0C;CAClE,MAAM,QAAqB,CAAC;CAE5B,KAAK,MAAM,SAAS,UAClB,IAAI,MAAM,SAAS,gBACjB,MAAM,KAAK,MAAM,KAAkB;MAC9B,IAAI,MAAM,SAAS,cAAc;EACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM;EACzC,MAAM,iBAAiB,gBAAgB,YAAY;EACnD,KAAK,MAAM,aAAa,gBACtB,IAAI,UAAU,SAAS,kBACrB,MAAM,KAAK,UAAU,KAAkB;CAG7C;CAGF,OAAO;AACT;AAEA,IAAM,uBAAuB,YAAgD,EAAE,UAAU,GAAG,QAAQ,QAAQ;CAC1G,MAAM,WAAW,mBAAmB;EAAE,MAAM;EAAM,QAAQ;CAAM,GAAG,EAAE,UAAU,SAAS,CAAC;CACzF,MAAM,aAAa,gBAAgB,QAAQ;CAE3C,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,IAAI,UAAU;EACZ,MAAM,QAAQ,iBAAiB,UAAU;EACzC,IAAI,MAAM,WAAW,GACnB,OAAO;EAGT,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,gBAAgB,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,QAAQ;EAEjD,OACE,oBAAC,WAAW,MAAZ;GAAsB;GAAK,GAAI;GAC7B,UAAA,qBAAC,WAAW,MAAZ,EAAA,UAAA;IACE,qBAAC,MAAD;KAAM,MAAM,cAAc,SAAS;KAAnC,UAAA,CACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,qBAAD;MAAqB,MAAM;MAAoB,OAAM;MAAmB,MAAK;KAAM,CAAA,EAChE,CAAA,GACpB,cAAc,KAAK,SAClB,oBAAC,kBAAD,EAAkC,GAAI,KAAO,GAAtB,KAAK,IAAiB,CAC9C,CACW,EAAA,CAAA,GACd,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA,CAClB;;IACN,oBAAC,gBAAD,EAAgB,GAAI,SAAW,CAAA;IAC/B,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;GACP,EAAA,CAAA;EACF,CAAA;CAErB;CAEA,OACE,oBAAC,WAAW,MAAZ;EAAsB;EAAK,GAAI;EAC7B,UAAA,oBAAC,WAAW,MAAZ,EAAA,UACG,WAAW,KAAK,OAAO,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,OACD,oBAAC,MAAD;GAAM,MAAM,QAAQ,WAAW,SAAS;GACtC,UAAA,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;EAClB,CAAA,CACE,EAAA,GAPK,MAAM,GAOX,CACX,EACc,CAAA;CACF,CAAA;AAErB,CAAC;AAED,qBAAqB,cAAc;AAEnC,IAAM,mBAAmB,kBAAkB,sBAAsB;CAC/D,aAAa;CACb,MAAM;CACN;CACA;AACF,CAAC"}
+{"version":3,"file":"BitkitBreadcrumb.js","names":[],"sources":["../../../lib/components/BitkitBreadcrumb/BitkitBreadcrumb.tsx"],"sourcesContent":["import { Breadcrumb, type BreadcrumbRootProps } from '@chakra-ui/react/breadcrumb';\nimport { useBreakpointValue } from '@chakra-ui/react/hooks';\nimport { Show } from '@chakra-ui/react/show';\nimport { forwardRef, Fragment, type ReactElement } from 'react';\n\nimport { IconChevronRight, IconMoreHorizontal } from '../../icons';\nimport { flattenChildren } from '../../utilities/flattenChildren';\nimport { withSubComponents } from '../../utilities/withSubComponents.ts';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton.tsx';\nimport BreadcrumbCurrentItem, { type CurrentItemProps } from './components/BreadcrumbCurrentItem.tsx';\nimport BreadcrumbItem from './components/BreadcrumbItem.tsx';\nimport OverflowMenu, { type OverflowMenuProps } from './components/OverflowMenu.tsx';\nimport OverflowMenuItem from './components/OverflowMenuItem.tsx';\nimport OverflowMenuTrigger from './components/OverflowMenuTrigger.tsx';\nimport { type ItemProps } from './types.ts';\n\ntype BitkitBreadcrumbChild = ReactElement<ItemProps> | ReactElement<CurrentItemProps> | ReactElement<OverflowMenuProps>;\n\nexport type BitkitBreadcrumbProps = Omit<BreadcrumbRootProps, 'children'> & {\n  children: BitkitBreadcrumbChild | BitkitBreadcrumbChild[];\n};\n\n// The whole prop bag travels, not just `href`/`children`: the mobile layout rebuilds its items\n// from these, so picking two keys here would drop everything else a consumer put on a crumb — a\n// `data-*` hook, an `aria-*`, an `onClick` — on mobile only, and silently.\nconst flattenItemProps = (elements: ReactElement[]): ItemProps[] => {\n  const props: ItemProps[] = [];\n\n  for (const child of elements) {\n    if (child.type === BreadcrumbItem) {\n      props.push(child.props as ItemProps);\n    } else if (child.type === OverflowMenu) {\n      const { children: menuChildren } = child.props as OverflowMenuProps;\n      const menuChildArray = flattenChildren(menuChildren);\n      for (const menuChild of menuChildArray) {\n        if (menuChild.type === OverflowMenuItem) {\n          props.push(menuChild.props as ItemProps);\n        }\n      }\n    }\n  }\n\n  return props;\n};\n\nconst BitkitBreadcrumbRoot = forwardRef<HTMLElement, BitkitBreadcrumbProps>(({ children, ...rest }, ref) => {\n  const isMobile = useBreakpointValue({ base: true, tablet: false }, { fallback: 'tablet' });\n  const childArray = flattenChildren(children);\n\n  if (childArray.length === 0) {\n    return null;\n  }\n\n  if (isMobile) {\n    const links = flattenItemProps(childArray);\n    if (links.length === 0) {\n      return null;\n    }\n\n    const lastLink = links[links.length - 1];\n    const overflowLinks = links.slice(0, -1).reverse();\n\n    return (\n      <Breadcrumb.Root ref={ref} {...rest}>\n        <Breadcrumb.List>\n          <Show when={overflowLinks.length > 0}>\n            <OverflowMenu>\n              <OverflowMenuTrigger>\n                <BitkitControlButton icon={IconMoreHorizontal} label=\"Open breadcrumbs\" size=\"xs\" />\n              </OverflowMenuTrigger>\n              {overflowLinks.map((link) => (\n                <OverflowMenuItem key={link.href} {...link} />\n              ))}\n            </OverflowMenu>\n            <Breadcrumb.Separator>\n              <IconChevronRight />\n            </Breadcrumb.Separator>\n          </Show>\n          <BreadcrumbItem {...lastLink} />\n          <Breadcrumb.Separator>\n            <IconChevronRight />\n          </Breadcrumb.Separator>\n        </Breadcrumb.List>\n      </Breadcrumb.Root>\n    );\n  }\n\n  return (\n    <Breadcrumb.Root ref={ref} {...rest}>\n      <Breadcrumb.List>\n        {childArray.map((child, index) => (\n          <Fragment key={child.key}>\n            {child}\n            {/* The trail ends with a chevron when the last crumb is a link -- it points at the page\n                you are on, which is not in the trail. A `CurrentItem` IS that page, so nothing\n                follows it. Mobile already ends this way: its last crumb is always a link. */}\n            <Show when={index < childArray.length - 1 || child.type === BreadcrumbItem}>\n              <Breadcrumb.Separator>\n                <IconChevronRight />\n              </Breadcrumb.Separator>\n            </Show>\n          </Fragment>\n        ))}\n      </Breadcrumb.List>\n    </Breadcrumb.Root>\n  );\n});\n\nBitkitBreadcrumbRoot.displayName = 'BitkitBreadcrumb';\n\nconst BitkitBreadcrumb = withSubComponents(BitkitBreadcrumbRoot, {\n  CurrentItem: BreadcrumbCurrentItem,\n  Item: BreadcrumbItem,\n  OverflowMenu,\n  OverflowMenuItem,\n});\n\nexport default BitkitBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;;AAyBA,IAAM,oBAAoB,aAA0C;CAClE,MAAM,QAAqB,CAAC;CAE5B,KAAK,MAAM,SAAS,UAClB,IAAI,MAAM,SAAS,gBACjB,MAAM,KAAK,MAAM,KAAkB;MAC9B,IAAI,MAAM,SAAS,cAAc;EACtC,MAAM,EAAE,UAAU,iBAAiB,MAAM;EACzC,MAAM,iBAAiB,gBAAgB,YAAY;EACnD,KAAK,MAAM,aAAa,gBACtB,IAAI,UAAU,SAAS,kBACrB,MAAM,KAAK,UAAU,KAAkB;CAG7C;CAGF,OAAO;AACT;AAEA,IAAM,uBAAuB,YAAgD,EAAE,UAAU,GAAG,QAAQ,QAAQ;CAC1G,MAAM,WAAW,mBAAmB;EAAE,MAAM;EAAM,QAAQ;CAAM,GAAG,EAAE,UAAU,SAAS,CAAC;CACzF,MAAM,aAAa,gBAAgB,QAAQ;CAE3C,IAAI,WAAW,WAAW,GACxB,OAAO;CAGT,IAAI,UAAU;EACZ,MAAM,QAAQ,iBAAiB,UAAU;EACzC,IAAI,MAAM,WAAW,GACnB,OAAO;EAGT,MAAM,WAAW,MAAM,MAAM,SAAS;EACtC,MAAM,gBAAgB,MAAM,MAAM,GAAG,EAAE,CAAC,CAAC,QAAQ;EAEjD,OACE,oBAAC,WAAW,MAAZ;GAAsB;GAAK,GAAI;GAC7B,UAAA,qBAAC,WAAW,MAAZ,EAAA,UAAA;IACE,qBAAC,MAAD;KAAM,MAAM,cAAc,SAAS;KAAnC,UAAA,CACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,qBAAD,EAAA,UACE,oBAAC,qBAAD;MAAqB,MAAM;MAAoB,OAAM;MAAmB,MAAK;KAAM,CAAA,EAChE,CAAA,GACpB,cAAc,KAAK,SAClB,oBAAC,kBAAD,EAAkC,GAAI,KAAO,GAAtB,KAAK,IAAiB,CAC9C,CACW,EAAA,CAAA,GACd,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA,CAClB;;IACN,oBAAC,gBAAD,EAAgB,GAAI,SAAW,CAAA;IAC/B,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;GACP,EAAA,CAAA;EACF,CAAA;CAErB;CAEA,OACE,oBAAC,WAAW,MAAZ;EAAsB;EAAK,GAAI;EAC7B,UAAA,oBAAC,WAAW,MAAZ,EAAA,UACG,WAAW,KAAK,OAAO,UACtB,qBAAC,UAAD,EAAA,UAAA,CACG,OAID,oBAAC,MAAD;GAAM,MAAM,QAAQ,WAAW,SAAS,KAAK,MAAM,SAAS;GAC1D,UAAA,oBAAC,WAAW,WAAZ,EAAA,UACE,oBAAC,kBAAD,CAAmB,CAAA,EACC,CAAA;EAClB,CAAA,CACE,EAAA,GAVK,MAAM,GAUX,CACX,EACc,CAAA;CACF,CAAA;AAErB,CAAC;AAED,qBAAqB,cAAc;AAEnC,IAAM,mBAAmB,kBAAkB,sBAAsB;CAC/D,aAAa;CACb,MAAM;CACN;CACA;AACF,CAAC"}

package/dist/components/BitkitCombobox/BitkitCombobox.d.ts

@@ -1,10 +1,16 @@
 import { ComboboxRootProps } from '@chakra-ui/react/combobox';
 import { BitkitFieldProps } from '../BitkitField/BitkitField';
-import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuScrollProps } from '../BitkitSelectMenu/BitkitSelectMenu';
 import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';
 export type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {
+    /**
+     * Accept text that matches no option. `onValueChange` then fires with the typed text when the
+     * user commits it (closing the menu or leaving the field), and with the option's `value` when
+     * they pick one from the list.
+     */
+    allowCustomValue?: boolean;
     children?: BitkitSelectMenuActionChild;
-    comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;
+    comboboxProps?: Omit<ComboboxRootProps, 'allowCustomValue' | 'collection' | 'defaultInputValue' | 'defaultValue' | 'ids' | 'inputValue' | 'onInputValueChange' | 'onOpenChange' | 'onValueChange' | 'open' | 'openOnClick' | 'value'>;
     defaultValue?: string;
     disablePortal?: boolean;
     isLoading?: boolean;
@@ -14,10 +20,16 @@ export type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'onChange'
     size?: 'md' | 'lg';
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     value?: string;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
+} & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
 declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "onChange" | "state"> & {
+    /**
+     * Accept text that matches no option. `onValueChange` then fires with the typed text when the
+     * user commits it (closing the menu or leaving the field), and with the option's `value` when
+     * they pick one from the list.
+     */
+    allowCustomValue?: boolean;
     children?: BitkitSelectMenuActionChild;
-    comboboxProps?: Omit<ComboboxRootProps, "collection" | "defaultValue" | "onValueChange" | "value">;
+    comboboxProps?: Omit<ComboboxRootProps, "allowCustomValue" | "collection" | "defaultInputValue" | "defaultValue" | "ids" | "inputValue" | "onInputValueChange" | "onOpenChange" | "onValueChange" | "open" | "openOnClick" | "value">;
     defaultValue?: string;
     disablePortal?: boolean;
     isLoading?: boolean;
@@ -27,7 +39,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFie
     size?: "md" | "lg";
     state?: "disabled" | "error" | "readOnly" | "warning";
     value?: string;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
+} & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
     Action: {
         (props: import('..').BitkitSelectMenuActionProps): import("react").JSX.Element;
         displayName: string;

package/dist/components/BitkitCombobox/BitkitCombobox.js

@@ -7,21 +7,57 @@ import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
 import BitkitSelectMenuAction from "../BitkitSelectMenu/BitkitSelectMenuAction.js";
 import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
 import BitkitField from "../BitkitField/BitkitField.js";
-import { forwardRef, useContext, useState } from "react";
+import { forwardRef, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 import { createListCollection } from "@chakra-ui/react/collection";
 import { Combobox } from "@chakra-ui/react/combobox";
+import { useFieldContext } from "@chakra-ui/react/field";
 import { useFilter } from "@chakra-ui/react/locale";
 //#region lib/components/BitkitCombobox/BitkitCombobox.tsx
+/**
+* A text input that filters a list of options as you type. The menu opens on focus with every
+* option, narrows to the ones matching the input, and shows an empty state when nothing matches.
+* Unlike BitkitSelect's menu it has no separate search field — the input itself is the filter.
+*/
 var BitkitCombobox = forwardRef((props, ref) => {
-	const { children, comboboxProps, defaultValue, disablePortal, emptyHelperText, emptyLabel, isLoading, items, onScrolledToBottom, onSearchChange, onValueChange, placeholder = "Enter a value or select", searchValue, size = "lg", state, value, ...fieldProps } = props;
+	const { allowCustomValue, children, comboboxProps, defaultValue, disablePortal, emptyHelperText, emptyLabel, isLoading, items, onScrolledToBottom, onValueChange, placeholder = "Enter value or select", size = "lg", state, value, ...fieldProps } = props;
+	return /* @__PURE__ */ jsx(BitkitField, {
+		ref,
+		state,
+		...fieldProps,
+		children: /* @__PURE__ */ jsx(ComboboxControl, {
+			allowCustomValue,
+			comboboxProps,
+			defaultValue,
+			disablePortal,
+			emptyHelperText: emptyHelperText ?? (allowCustomValue ? "Enter custom value." : void 0),
+			emptyLabel,
+			hasWarning: state === "warning" || !!fieldProps.warningText,
+			isInvalid: state === "error" || !!fieldProps.errorText,
+			isLoading,
+			items,
+			onScrolledToBottom,
+			onValueChange,
+			placeholder,
+			size,
+			state,
+			value,
+			children
+		})
+	});
+});
+BitkitCombobox.displayName = "BitkitCombobox";
+/** Rendered inside BitkitField so it can read the field's ids and wire them to the input. */
+var ComboboxControl = ({ allowCustomValue, children, comboboxProps, defaultValue, disablePortal, emptyHelperText, emptyLabel, hasWarning, isInvalid, isLoading, items, onScrolledToBottom, onValueChange, placeholder, size, state, value }) => {
 	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
+	const field = useFieldContext();
 	const { contains } = useFilter({ sensitivity: "base" });
 	const [filterText, setFilterText] = useState("");
 	const visibleItems = filterText ? items.filter((item) => contains(item.label, filterText)) : items;
 	const collection = createListCollection({
 		items: visibleItems,
+		groupBy: (item) => item.group || "",
 		isItemDisabled: (item) => !!item.disabled
 	});
 	const itemValues = items.map((item) => item.value);
@@ -33,8 +69,30 @@ var BitkitCombobox = forwardRef((props, ref) => {
 		setPrevItemsKey(itemsKey);
 		if (!isAppend) setFilterText("");
 	}
-	const hasWarning = state === "warning" || !!fieldProps.warningText;
-	const isInvalid = state === "error" || !!fieldProps.errorText;
+	const [initialInputValue] = useState(() => {
+		const initialValue = value ?? defaultValue;
+		if (!initialValue) return "";
+		return items.find((item) => item.value === initialValue)?.label ?? (allowCustomValue ? initialValue : "");
+	});
+	const [inputValue, setInputValue] = useState(initialInputValue);
+	const [isOpen, setIsOpen] = useState(false);
+	const [prevValue, setPrevValue] = useState(value);
+	if (value !== prevValue) {
+		setPrevValue(value);
+		if (allowCustomValue) setInputValue(value ? items.find((item) => item.value === value)?.label ?? value : "");
+	}
+	const lastEmittedValue = useRef(null);
+	const skipFocusOpen = useRef(false);
+	const isInteractive = state !== "disabled" && state !== "readOnly";
+	const commitCustomValue = () => {
+		const text = inputValue.trim();
+		if (!allowCustomValue || !text) return;
+		const match = items.find((item) => item.label.toLowerCase() === text.toLowerCase());
+		const committed = match ? match.value : text;
+		if (lastEmittedValue.current === committed) return;
+		lastEmittedValue.current = committed;
+		onValueChange?.(committed);
+	};
 	const iconSize = size === "md" ? "16" : "24";
 	let statusIcon;
 	if (isInvalid) statusIcon = /* @__PURE__ */ jsx(IconErrorCircleFilled, {
@@ -42,57 +100,94 @@ var BitkitCombobox = forwardRef((props, ref) => {
 		color: "icon/negative"
 	});
 	else if (hasWarning) statusIcon = /* @__PURE__ */ jsx(IconWarningYellow, { size: iconSize });
-	return /* @__PURE__ */ jsx(BitkitField, {
-		ref,
-		state,
-		...fieldProps,
-		children: /* @__PURE__ */ jsxs(Combobox.Root, {
-			...comboboxProps,
-			collection,
-			defaultValue: defaultValue ? [defaultValue] : void 0,
-			disabled: state === "disabled",
-			hasStatusIcon: !!statusIcon,
-			invalid: isInvalid,
-			onInputValueChange: (e) => {
-				setFilterText(e.inputValue);
-			},
-			onValueChange: (details) => onValueChange?.(details.value[0]),
-			readOnly: state === "readOnly",
-			scrollToIndexFn: ({ getElement }) => getElement()?.scrollIntoView({ block: "nearest" }),
-			size,
-			value: value === void 0 ? void 0 : value ? [value] : [],
-			children: [/* @__PURE__ */ jsxs(Combobox.Control, {
-				className: "group",
-				children: [/* @__PURE__ */ jsx(Combobox.Input, { placeholder }), /* @__PURE__ */ jsxs(Combobox.IndicatorGroup, { children: [
-					/* @__PURE__ */ jsx(Combobox.ClearTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(BitkitCloseButton, { size: "sm" })
-					}),
-					statusIcon,
-					/* @__PURE__ */ jsx(Combobox.Trigger, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
-					})
-				] })]
-			}), /* @__PURE__ */ jsx(Portal, {
-				disabled: disablePortal || disablePortalFromContext,
-				children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
-					collection,
-					emptyHelperText,
-					emptyLabel,
-					isLoading,
-					onScrolledToBottom,
-					onSearchChange,
-					searchValue,
-					size,
-					variant: "combobox",
-					children
-				}) })
-			})]
-		})
+	return /* @__PURE__ */ jsxs(Combobox.Root, {
+		...comboboxProps,
+		allowCustomValue,
+		collection,
+		defaultInputValue: initialInputValue,
+		defaultValue: defaultValue ? [defaultValue] : void 0,
+		disabled: state === "disabled",
+		hasStatusIcon: !!statusIcon,
+		ids: field ? {
+			input: field.ids.control,
+			label: field.ids.label
+		} : void 0,
+		invalid: isInvalid,
+		inputValue: allowCustomValue ? inputValue : void 0,
+		onInputValueChange: ({ inputValue: nextInputValue, reason }) => {
+			setInputValue(nextInputValue);
+			if (reason === "clear-trigger" && lastEmittedValue.current !== null) {
+				lastEmittedValue.current = null;
+				onValueChange?.(void 0);
+			}
+			setFilterText(reason === "input-change" ? nextInputValue : "");
+		},
+		onOpenChange: ({ open }) => {
+			setIsOpen(open);
+			if (!open) commitCustomValue();
+		},
+		onValueChange: (details) => {
+			const next = details.value[0];
+			if (allowCustomValue) setInputValue(next ? items.find((item) => item.value === next)?.label ?? next : "");
+			if (next === void 0 && lastEmittedValue.current === null) return;
+			lastEmittedValue.current = next ?? null;
+			onValueChange?.(next);
+		},
+		open: isOpen,
+		openOnClick: true,
+		readOnly: state === "readOnly",
+		scrollToIndexFn: ({ getElement }) => getElement()?.scrollIntoView({ block: "nearest" }),
+		selectionBehavior: allowCustomValue ? "preserve" : void 0,
+		size,
+		value: value === void 0 ? void 0 : value ? [value] : [],
+		children: [/* @__PURE__ */ jsxs(Combobox.Control, {
+			className: "group",
+			children: [/* @__PURE__ */ jsx(Combobox.Input, {
+				onBlur: commitCustomValue,
+				onKeyDown: (event) => {
+					if (!allowCustomValue || event.key !== "Enter") return;
+					if (event.currentTarget.getAttribute("aria-activedescendant")) return;
+					commitCustomValue();
+					setIsOpen(false);
+				},
+				onFocus: () => {
+					if (skipFocusOpen.current || !isInteractive) return;
+					setIsOpen(true);
+				},
+				placeholder
+			}), /* @__PURE__ */ jsxs(Combobox.IndicatorGroup, { children: [
+				/* @__PURE__ */ jsx(Combobox.ClearTrigger, {
+					asChild: true,
+					hidden: !isInteractive || !inputValue && !value,
+					children: /* @__PURE__ */ jsx(BitkitCloseButton, { size: "sm" })
+				}),
+				statusIcon,
+				/* @__PURE__ */ jsx(Combobox.Trigger, {
+					asChild: true,
+					onPointerDown: () => {
+						skipFocusOpen.current = true;
+						requestAnimationFrame(() => {
+							skipFocusOpen.current = false;
+						});
+					},
+					children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
+				})
+			] })]
+		}), /* @__PURE__ */ jsx(Portal, {
+			disabled: disablePortal || disablePortalFromContext,
+			children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
+				collection,
+				emptyHelperText,
+				emptyLabel,
+				isLoading,
+				onScrolledToBottom,
+				size,
+				variant: "combobox",
+				children
+			}) })
+		})]
 	});
-});
-BitkitCombobox.displayName = "BitkitCombobox";
+};
 var BitkitCombobox_default = withSubComponents(BitkitCombobox, { Action: BitkitSelectMenuAction });
 //#endregion
 export { BitkitCombobox_default as default };

package/dist/components/BitkitCombobox/BitkitCombobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef, useContext, useState } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;\n  defaultValue?: string;\n  disablePortal?: boolean;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string | undefined) => void;\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  value?: string;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n  const {\n    children,\n    comboboxProps,\n    defaultValue,\n    disablePortal,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onScrolledToBottom,\n    onSearchChange,\n    onValueChange,\n    placeholder = 'Enter a value or select',\n    searchValue,\n    size = 'lg',\n    state,\n    value,\n    ...fieldProps\n  } = props;\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  // Derive the collection on every render rather than using useListCollection, which snapshots\n  // `items` into state as `initialItems` and never syncs it again, so changing `items` actually reaches the menu.\n  // Deriving also keeps callers that pass an inline array literal safe, since nothing here is keyed on items identity.\n  const [filterText, setFilterText] = useState('');\n  const visibleItems = filterText ? items.filter((item) => contains(item.label, filterText)) : items;\n  const collection = createListCollection<BitkitSelectMenuItemProps>({\n    items: visibleItems,\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  // A new set of items invalidates whatever the old ones were filtered by — otherwise leftover\n  // filter text (which Zag also sets from the selected item's label) can hide every new item and\n  // leave the menu empty. Keyed on item values, not array identity, so an inline `items={[…]}`\n  // literal doesn't wipe the filter on every keystroke. Matches what useListCollection's `set()`\n  // used to do for us.\n  const itemValues = items.map((item) => item.value);\n  const itemsKey = JSON.stringify(itemValues);\n  const [prevItemsKey, setPrevItemsKey] = useState(itemsKey);\n  if (prevItemsKey !== itemsKey) {\n    const prevValues = JSON.parse(prevItemsKey) as Array<string>;\n    const isAppend = itemValues.length > prevValues.length && prevValues.every((v, i) => v === itemValues[i]);\n    setPrevItemsKey(itemsKey);\n    if (!isAppend) {\n      setFilterText('');\n    }\n  }\n\n  const hasWarning = state === 'warning' || !!fieldProps.warningText;\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n  const iconSize = size === 'md' ? '16' : '24';\n\n  let statusIcon;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={iconSize} />;\n  }\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Combobox.Root\n        {...comboboxProps}\n        collection={collection}\n        defaultValue={defaultValue ? [defaultValue] : undefined}\n        disabled={state === 'disabled'}\n        hasStatusIcon={!!statusIcon}\n        invalid={isInvalid}\n        onInputValueChange={(e) => {\n          setFilterText(e.inputValue);\n        }}\n        onValueChange={(details) => onValueChange?.(details.value[0])}\n        readOnly={state === 'readOnly'}\n        // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n        // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        size={size}\n        // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n        // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n        // Combobox.Root to uncontrolled: it then ignores `value`, so resets don't take and\n        // onValueChange stops firing when the same option is re-selected.\n        value={value === undefined ? undefined : value ? [value] : []}\n      >\n        <Combobox.Control className=\"group\">\n          <Combobox.Input placeholder={placeholder} />\n          <Combobox.IndicatorGroup>\n            <Combobox.ClearTrigger asChild>\n              <BitkitCloseButton size=\"sm\" />\n            </Combobox.ClearTrigger>\n            {statusIcon}\n            <Combobox.Trigger asChild>\n              <AssetSelectChevron />\n            </Combobox.Trigger>\n          </Combobox.IndicatorGroup>\n        </Combobox.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Combobox.Positioner>\n            <BitkitSelectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onScrolledToBottom={onScrolledToBottom}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n              variant=\"combobox\"\n            >\n              {children}\n            </BitkitSelectMenu>\n          </Combobox.Positioner>\n        </Portal>\n      </Combobox.Root>\n    </BitkitField>\n  );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\nexport default withSubComponents(BitkitCombobox, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;;;AAqCA,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,UACA,eACA,cACA,eACA,iBACA,YACA,WACA,OACA,oBACA,gBACA,eACA,cAAc,2BACd,aACA,OAAO,MACP,OACA,OACA,GAAG,eACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAElF,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,OAAO,CAAC;CAKtD,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,eAAe,aAAa,MAAM,QAAQ,SAAS,SAAS,KAAK,OAAO,UAAU,CAAC,IAAI;CAC7F,MAAM,aAAa,qBAAgD;EACjE,OAAO;EACP,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAOD,MAAM,aAAa,MAAM,KAAK,SAAS,KAAK,KAAK;CACjD,MAAM,WAAW,KAAK,UAAU,UAAU;CAC1C,MAAM,CAAC,cAAc,mBAAmB,SAAS,QAAQ;CACzD,IAAI,iBAAiB,UAAU;EAC7B,MAAM,aAAa,KAAK,MAAM,YAAY;EAC1C,MAAM,WAAW,WAAW,SAAS,WAAW,UAAU,WAAW,OAAO,GAAG,MAAM,MAAM,WAAW,EAAE;EACxG,gBAAgB,QAAQ;EACxB,IAAI,CAAC,UACH,cAAc,EAAE;CAEpB;CAEA,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,IAAI;CACJ,IAAI,WACF,aAAa,oBAAC,uBAAD;EAAuB,MAAM;EAAU,OAAM;CAAiB,CAAA;MACtE,IAAI,YACT,aAAa,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;CAGnD,OACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;EACvC,UAAA,qBAAC,SAAS,MAAV;GACE,GAAI;GACQ;GACZ,cAAc,eAAe,CAAC,YAAY,IAAI,KAAA;GAC9C,UAAU,UAAU;GACpB,eAAe,CAAC,CAAC;GACjB,SAAS;GACT,qBAAqB,MAAM;IACzB,cAAc,EAAE,UAAU;GAC5B;GACA,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,EAAE;GAC5D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,WAAW,CAAC,EAAE,eAAe,EAAE,OAAO,UAAU,CAAC;GAChF;GAKN,OAAO,UAAU,KAAA,IAAY,KAAA,IAAY,QAAQ,CAAC,KAAK,IAAI,CAAC;GApB9D,UAAA,CAsBE,qBAAC,SAAS,SAAV;IAAkB,WAAU;IAA5B,UAAA,CACE,oBAAC,SAAS,OAAV,EAA6B,YAAc,CAAA,GAC3C,qBAAC,SAAS,gBAAV,EAAA,UAAA;KACE,oBAAC,SAAS,cAAV;MAAuB,SAAA;MACrB,UAAA,oBAAC,mBAAD,EAAmB,MAAK,KAAM,CAAA;KACT,CAAA;KACtB;KACD,oBAAC,SAAS,SAAV;MAAkB,SAAA;MAChB,UAAA,oBAAC,oBAAD,CAAqB,CAAA;KACL,CAAA;IACK,EAAA,CAAA,CACT;GAClB,CAAA,GAAA,oBAAC,QAAD;IAAQ,UAAU,iBAAiB;IACjC,UAAA,oBAAC,SAAS,YAAV,EAAA,UACE,oBAAC,kBAAD;KACc;KACK;KACL;KACD;KACS;KACJ;KACH;KACP;KACN,SAAQ;KAEP;IACe,CAAA,EACC,CAAA;GACf,CAAA,CACK;;CACJ,CAAA;AAEjB,CAAC;AAED,eAAe,cAAc;AAE7B,IAAA,yBAAe,kBAAkB,gBAAgB,EAAE,QAAQ,uBAAuB,CAAC"}
+{"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { createListCollection } from '@chakra-ui/react/collection';\nimport { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef, useContext, useRef, useState } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuItemProps,\n  type BitkitSelectMenuScrollProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {\n  /**\n   * Accept text that matches no option. `onValueChange` then fires with the typed text when the\n   * user commits it (closing the menu or leaving the field), and with the option's `value` when\n   * they pick one from the list.\n   */\n  allowCustomValue?: boolean;\n  children?: BitkitSelectMenuActionChild;\n  comboboxProps?: Omit<\n    ComboboxRootProps,\n    | 'allowCustomValue'\n    | 'collection'\n    | 'defaultInputValue'\n    | 'defaultValue'\n    | 'ids'\n    | 'inputValue'\n    | 'onInputValueChange'\n    | 'onOpenChange'\n    | 'onValueChange'\n    | 'open'\n    | 'openOnClick'\n    | 'value'\n  >;\n  defaultValue?: string;\n  disablePortal?: boolean;\n  isLoading?: boolean;\n  items: Array<BitkitSelectMenuItemProps>;\n  onValueChange?: (newVal: string | undefined) => void;\n  placeholder?: string;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  value?: string;\n} & BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\n/**\n * A text input that filters a list of options as you type. The menu opens on focus with every\n * option, narrows to the ones matching the input, and shows an empty state when nothing matches.\n * Unlike BitkitSelect's menu it has no separate search field — the input itself is the filter.\n */\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n  const {\n    allowCustomValue,\n    children,\n    comboboxProps,\n    defaultValue,\n    disablePortal,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onScrolledToBottom,\n    onValueChange,\n    placeholder = 'Enter value or select',\n    size = 'lg',\n    state,\n    value,\n    ...fieldProps\n  } = props;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <ComboboxControl\n        allowCustomValue={allowCustomValue}\n        comboboxProps={comboboxProps}\n        defaultValue={defaultValue}\n        disablePortal={disablePortal}\n        emptyHelperText={emptyHelperText ?? (allowCustomValue ? 'Enter custom value.' : undefined)}\n        emptyLabel={emptyLabel}\n        hasWarning={state === 'warning' || !!fieldProps.warningText}\n        isInvalid={state === 'error' || !!fieldProps.errorText}\n        isLoading={isLoading}\n        items={items}\n        onScrolledToBottom={onScrolledToBottom}\n        onValueChange={onValueChange}\n        placeholder={placeholder}\n        size={size}\n        state={state}\n        value={value}\n      >\n        {children}\n      </ComboboxControl>\n    </BitkitField>\n  );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\ntype ComboboxControlProps = Pick<\n  BitkitComboboxProps,\n  | 'allowCustomValue'\n  | 'children'\n  | 'comboboxProps'\n  | 'defaultValue'\n  | 'disablePortal'\n  | 'emptyHelperText'\n  | 'emptyLabel'\n  | 'isLoading'\n  | 'items'\n  | 'onScrolledToBottom'\n  | 'onValueChange'\n  | 'state'\n  | 'value'\n> &\n  Required<Pick<BitkitComboboxProps, 'placeholder' | 'size'>> & {\n    hasWarning: boolean;\n    isInvalid: boolean;\n  };\n\n/** Rendered inside BitkitField so it can read the field's ids and wire them to the input. */\nconst ComboboxControl = ({\n  allowCustomValue,\n  children,\n  comboboxProps,\n  defaultValue,\n  disablePortal,\n  emptyHelperText,\n  emptyLabel,\n  hasWarning,\n  isInvalid,\n  isLoading,\n  items,\n  onScrolledToBottom,\n  onValueChange,\n  placeholder,\n  size,\n  state,\n  value,\n}: ComboboxControlProps) => {\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const field = useFieldContext();\n\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  // Derive the collection on every render rather than using useListCollection, which snapshots\n  // `items` into state as `initialItems` and never syncs it again, so changing `items` actually reaches the menu.\n  // Deriving also keeps callers that pass an inline array literal safe, since nothing here is keyed on items identity.\n  const [filterText, setFilterText] = useState('');\n  const visibleItems = filterText ? items.filter((item) => contains(item.label, filterText)) : items;\n  const collection = createListCollection<BitkitSelectMenuItemProps>({\n    items: visibleItems,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  // A new set of items invalidates whatever the old ones were filtered by — otherwise leftover\n  // filter text can hide every new item and leave the menu empty. Keyed on item values, not array\n  // identity, so an inline `items={[…]}` literal doesn't wipe the filter on every keystroke; an\n  // append (the next page of results) keeps it, so paging doesn't drop what the user typed.\n  const itemValues = items.map((item) => item.value);\n  const itemsKey = JSON.stringify(itemValues);\n  const [prevItemsKey, setPrevItemsKey] = useState(itemsKey);\n  if (prevItemsKey !== itemsKey) {\n    const prevValues = JSON.parse(prevItemsKey) as Array<string>;\n    const isAppend = itemValues.length > prevValues.length && prevValues.every((v, i) => v === itemValues[i]);\n    setPrevItemsKey(itemsKey);\n    if (!isAppend) {\n      setFilterText('');\n    }\n  }\n\n  // Zag only reports the input text once it changes, so mirror what it starts with — otherwise the\n  // clear button stays hidden next to a pre-selected value.\n  const [initialInputValue] = useState(() => {\n    const initialValue = value ?? defaultValue;\n    if (!initialValue) return '';\n    return items.find((item) => item.value === initialValue)?.label ?? (allowCustomValue ? initialValue : '');\n  });\n  const [inputValue, setInputValue] = useState(initialInputValue);\n  const [isOpen, setIsOpen] = useState(false);\n  // A controlled `value` that no option carries can only live in the input, so follow it there.\n  const [prevValue, setPrevValue] = useState(value);\n  if (value !== prevValue) {\n    setPrevValue(value);\n    if (allowCustomValue) {\n      setInputValue(value ? (items.find((item) => item.value === value)?.label ?? value) : '');\n    }\n  }\n  const lastEmittedValue = useRef<string | null>(null);\n  // Clicking the chevron focuses the input first, so without this the focus handler would open the\n  // menu just before the trigger's own click closes it again.\n  const skipFocusOpen = useRef(false);\n\n  const isInteractive = state !== 'disabled' && state !== 'readOnly';\n\n  const commitCustomValue = () => {\n    const text = inputValue.trim();\n    if (!allowCustomValue || !text) return;\n    // Match the filter's case-insensitivity: typing \"react\" means the React option, not a custom\n    // value that happens to read the same.\n    const match = items.find((item) => item.label.toLowerCase() === text.toLowerCase());\n    const committed = match ? match.value : text;\n    if (lastEmittedValue.current === committed) return;\n    lastEmittedValue.current = committed;\n    onValueChange?.(committed);\n  };\n\n  const iconSize = size === 'md' ? '16' : '24';\n\n  let statusIcon;\n  if (isInvalid) {\n    statusIcon = <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />;\n  } else if (hasWarning) {\n    statusIcon = <IconWarningYellow size={iconSize} />;\n  }\n\n  return (\n    <Combobox.Root\n      {...comboboxProps}\n      allowCustomValue={allowCustomValue}\n      collection={collection}\n      defaultInputValue={initialInputValue}\n      defaultValue={defaultValue ? [defaultValue] : undefined}\n      disabled={state === 'disabled'}\n      hasStatusIcon={!!statusIcon}\n      // Chakra's Combobox doesn't take its input id from the surrounding Field, so the field\n      // label's `htmlFor` would point at an element that doesn't exist. Hand it the field's ids\n      // instead, and the label both labels and focuses the input.\n      ids={field ? { input: field.ids.control, label: field.ids.label } : undefined}\n      invalid={isInvalid}\n      // Custom values live only in the input: Zag rewrites it from the collection on every value\n      // change, which would blank text no option carries, so we own it and keep Zag off it.\n      inputValue={allowCustomValue ? inputValue : undefined}\n      onInputValueChange={({ inputValue: nextInputValue, reason }) => {\n        setInputValue(nextInputValue);\n        // The clear button empties `value` too, but a custom value never reached it, so Zag has\n        // nothing to report — tell the consumer the field is empty now.\n        if (reason === 'clear-trigger' && lastEmittedValue.current !== null) {\n          lastEmittedValue.current = null;\n          onValueChange?.(undefined);\n        }\n        // Only what the user types filters the list. Zag also writes the selected item's label\n        // into the input, which would otherwise narrow the menu to that one item.\n        setFilterText(reason === 'input-change' ? nextInputValue : '');\n      }}\n      onOpenChange={({ open }) => {\n        setIsOpen(open);\n        if (!open) commitCustomValue();\n      }}\n      onValueChange={(details) => {\n        const next = details.value[0];\n        // `selectionBehavior=\"preserve\"` leaves the input alone, so put the option's label there.\n        if (allowCustomValue) setInputValue(next ? (items.find((item) => item.value === next)?.label ?? next) : '');\n        // The clear path above already reported the empty field.\n        if (next === undefined && lastEmittedValue.current === null) return;\n        lastEmittedValue.current = next ?? null;\n        onValueChange?.(next);\n      }}\n      open={isOpen}\n      openOnClick\n      readOnly={state === 'readOnly'}\n      // Bypass Zag's isScrollable(contentEl) gate — our Content is overflow:hidden flex\n      // column, so the real scroll container is itemList. See BitkitMultiselect for why.\n      scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n      selectionBehavior={allowCustomValue ? 'preserve' : undefined}\n      size={size}\n      // Stay controlled whenever `value` is provided — including `''` (\"nothing selected\"). A\n      // truthiness check (`value ? … : undefined`) passes `undefined` for `''`, which flips\n      // Combobox.Root to uncontrolled: it then ignores `value`, so resets don't take and\n      // onValueChange stops firing when the same option is re-selected.\n      value={value === undefined ? undefined : value ? [value] : []}\n    >\n      <Combobox.Control className=\"group\">\n        <Combobox.Input\n          onBlur={commitCustomValue}\n          onKeyDown={(event) => {\n            // Zag's Enter selects the highlighted item and does nothing when there is none, so\n            // free text would just sit in an open menu. Commit it and close.\n            if (!allowCustomValue || event.key !== 'Enter') return;\n            if (event.currentTarget.getAttribute('aria-activedescendant')) return;\n            commitCustomValue();\n            setIsOpen(false);\n          }}\n          onFocus={() => {\n            if (skipFocusOpen.current || !isInteractive) return;\n            setIsOpen(true);\n          }}\n          placeholder={placeholder}\n        />\n        <Combobox.IndicatorGroup>\n          {/* Zag hides the clear button until an option is selected; the design shows it for\n              anything the field holds, including text that matches nothing yet. */}\n          <Combobox.ClearTrigger asChild hidden={!isInteractive || (!inputValue && !value)}>\n            <BitkitCloseButton size=\"sm\" />\n          </Combobox.ClearTrigger>\n          {statusIcon}\n          <Combobox.Trigger\n            asChild\n            onPointerDown={() => {\n              skipFocusOpen.current = true;\n              requestAnimationFrame(() => {\n                skipFocusOpen.current = false;\n              });\n            }}\n          >\n            <AssetSelectChevron />\n          </Combobox.Trigger>\n        </Combobox.IndicatorGroup>\n      </Combobox.Control>\n      <Portal disabled={disablePortal || disablePortalFromContext}>\n        <Combobox.Positioner>\n          <BitkitSelectMenu\n            collection={collection}\n            emptyHelperText={emptyHelperText}\n            emptyLabel={emptyLabel}\n            isLoading={isLoading}\n            onScrolledToBottom={onScrolledToBottom}\n            size={size}\n            variant=\"combobox\"\n          >\n            {children}\n          </BitkitSelectMenu>\n        </Combobox.Positioner>\n      </Portal>\n    </Combobox.Root>\n  );\n};\n\nexport default withSubComponents(BitkitCombobox, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}

package/dist/theme/slot-recipes/Combobox.recipe.d.ts

@@ -1,4 +1,4 @@
-declare const comboboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "itemGroup" | "itemGroupLabel" | "itemText" | "clearTrigger" | "control" | "emptyHelperText" | "indicatorGroup" | "empty", {
+declare const comboboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "itemGroup" | "itemGroupLabel" | "itemText" | "clearTrigger" | "control" | "indicatorGroup" | "empty", {
     size: {
         md: {
             item: {

package/dist/theme/slot-recipes/Combobox.recipe.js

@@ -5,7 +5,7 @@ import { comboboxAnatomy } from "@chakra-ui/react/anatomy";
 //#region lib/theme/slot-recipes/Combobox.recipe.ts
 var comboboxSlotRecipe = defineSlotRecipe({
 	className: "combobox",
-	slots: [...comboboxAnatomy.keys(), "emptyHelperText"],
+	slots: comboboxAnatomy.keys(),
 	base: {
 		control: {
 			display: "flex",
@@ -18,15 +18,6 @@ var comboboxSlotRecipe = defineSlotRecipe({
 			height: "var(--input-height)",
 			textOverflow: "ellipsis"
 		},
-		empty: {
-			paddingInline: "16",
-			paddingBlock: "8",
-			textStyle: "body/lg/regular"
-		},
-		emptyHelperText: {
-			color: "text/helper",
-			textStyle: "body/sm/regular"
-		},
 		...base$1,
 		indicatorGroup: {
 			display: "flex",

package/dist/theme/slot-recipes/Combobox.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Combobox.recipe.ts"],"sourcesContent":["import { comboboxAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport * as inputStyle from '../common/InputAndTextarea.common';\n\nconst comboboxSlotRecipe = defineSlotRecipe({\n  className: 'combobox',\n  slots: [...comboboxAnatomy.keys(), 'emptyHelperText'],\n  base: {\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      position: 'relative',\n    },\n    input: {\n      ...inputStyle.base,\n      ...inputStyle.singleLineInputOverrides,\n      height: 'var(--input-height)',\n      textOverflow: 'ellipsis',\n    },\n    empty: {\n      paddingInline: '16',\n      paddingBlock: '8',\n      textStyle: 'body/lg/regular',\n    },\n    emptyHelperText: {\n      color: 'text/helper',\n      textStyle: 'body/sm/regular',\n    },\n    ...base,\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      right: '16',\n      top: '50%',\n      transform: 'translateY(-50%)',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        input: {\n          ...inputStyle.variants.size.md,\n          ...inputStyle.singleLineInputOverrides,\n          paddingInlineEnd: '96',\n        },\n        ...variants.size.md,\n      },\n      lg: {\n        input: {\n          ...inputStyle.variants.size.lg,\n          ...inputStyle.singleLineInputOverrides,\n          paddingInlineEnd: '96',\n        },\n        ...variants.size.lg,\n      },\n    },\n    hasStatusIcon: {\n      true: {\n        input: {\n          paddingInlineEnd: '128',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default comboboxSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,CAAC,GAAG,gBAAgB,KAAK,GAAG,iBAAiB;CACpD,MAAM;EACJ,SAAS;GACP,SAAS;GACT,YAAY;GACZ,UAAU;EACZ;EACA,OAAO;GACL,GAAG;GACH,GAAG;GACH,QAAQ;GACR,cAAc;EAChB;EACA,OAAO;GACL,eAAe;GACf,cAAc;GACd,WAAW;EACb;EACA,iBAAiB;GACf,OAAO;GACP,WAAW;EACb;EACA,GAAG;EACH,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,WAAW;EACb;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF,OAAO;KACL,GAAA,SAAuB,KAAK;KAC5B,GAAG;KACH,kBAAkB;IACpB;IACA,GAAG,WAAS,KAAK;GACnB;GACA,IAAI;IACF,OAAO;KACL,GAAA,SAAuB,KAAK;KAC5B,GAAG;KACH,kBAAkB;IACpB;IACA,GAAG,WAAS,KAAK;GACnB;EACF;EACA,eAAe;GACb,MAAM,EACJ,OAAO,EACL,kBAAkB,MACpB,EACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}
+{"version":3,"file":"Combobox.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Combobox.recipe.ts"],"sourcesContent":["import { comboboxAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { base, variants } from '../common/ComboboxAndSelect.common';\nimport * as inputStyle from '../common/InputAndTextarea.common';\n\nconst comboboxSlotRecipe = defineSlotRecipe({\n  className: 'combobox',\n  slots: comboboxAnatomy.keys(),\n  base: {\n    control: {\n      display: 'flex',\n      alignItems: 'center',\n      position: 'relative',\n    },\n    input: {\n      ...inputStyle.base,\n      ...inputStyle.singleLineInputOverrides,\n      height: 'var(--input-height)',\n      textOverflow: 'ellipsis',\n    },\n    ...base,\n    indicatorGroup: {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8',\n      position: 'absolute',\n      right: '16',\n      top: '50%',\n      transform: 'translateY(-50%)',\n    },\n  },\n  variants: {\n    size: {\n      md: {\n        input: {\n          ...inputStyle.variants.size.md,\n          ...inputStyle.singleLineInputOverrides,\n          paddingInlineEnd: '96',\n        },\n        ...variants.size.md,\n      },\n      lg: {\n        input: {\n          ...inputStyle.variants.size.lg,\n          ...inputStyle.singleLineInputOverrides,\n          paddingInlineEnd: '96',\n        },\n        ...variants.size.lg,\n      },\n    },\n    hasStatusIcon: {\n      true: {\n        input: {\n          paddingInlineEnd: '128',\n        },\n      },\n      false: {},\n    },\n  },\n  defaultVariants: {\n    size: 'lg',\n  },\n});\n\nexport default comboboxSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO,gBAAgB,KAAK;CAC5B,MAAM;EACJ,SAAS;GACP,SAAS;GACT,YAAY;GACZ,UAAU;EACZ;EACA,OAAO;GACL,GAAG;GACH,GAAG;GACH,QAAQ;GACR,cAAc;EAChB;EACA,GAAG;EACH,gBAAgB;GACd,SAAS;GACT,YAAY;GACZ,KAAK;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,WAAW;EACb;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF,OAAO;KACL,GAAA,SAAuB,KAAK;KAC5B,GAAG;KACH,kBAAkB;IACpB;IACA,GAAG,WAAS,KAAK;GACnB;GACA,IAAI;IACF,OAAO;KACL,GAAA,SAAuB,KAAK;KAC5B,GAAG;KACH,kBAAkB;IACpB;IACA,GAAG,WAAS,KAAK;GACnB;EACF;EACA,eAAe;GACb,MAAM,EACJ,OAAO,EACL,kBAAkB,MACpB,EACF;GACA,OAAO,CAAC;EACV;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC"}

package/dist/theme/slot-recipes/index.d.ts

@@ -509,7 +509,7 @@ declare const slotRecipes: {
         };
     }>;
     collapsible: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "trigger" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"content" | "root" | "trigger" | "indicator">>;
-    combobox: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "itemGroup" | "itemGroupLabel" | "itemText" | "clearTrigger" | "control" | "emptyHelperText" | "indicatorGroup" | "empty", {
+    combobox: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "input" | "label" | "list" | "root" | "item" | "itemIndicator" | "trigger" | "positioner" | "itemGroup" | "itemGroupLabel" | "itemText" | "clearTrigger" | "control" | "indicatorGroup" | "empty", {
         size: {
             md: {
                 item: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.416",
+  "version": "0.3.418",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",