@bitrise/bitkit-v2 0.3.412-beta.2661 → 0.3.412

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

@@ -1,8 +1,8 @@
 import { ComboboxRootProps } from '@chakra-ui/react/combobox';
 import { BitkitFieldProps } from '../BitkitField/BitkitField';
-import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
 import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';
-export type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
+export type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {
     children?: BitkitSelectMenuActionChild;
     comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;
     defaultValue?: string;
@@ -14,8 +14,8 @@ export type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> &
     size?: 'md' | 'lg';
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     value?: string;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
-declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "state"> & {
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
+declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "onChange" | "state"> & {
     children?: BitkitSelectMenuActionChild;
     comboboxProps?: Omit<ComboboxRootProps, "collection" | "defaultValue" | "onValueChange" | "value">;
     defaultValue?: string;
@@ -27,7 +27,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFie
     size?: "md" | "lg";
     state?: "disabled" | "error" | "readOnly" | "warning";
     value?: string;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
     Action: {
         (props: import('..').BitkitSelectMenuActionProps): import("react").JSX.Element;
         displayName: string;

package/dist/components/BitkitCombobox/BitkitCombobox.js

@@ -15,7 +15,7 @@ import { Combobox } from "@chakra-ui/react/combobox";
 import { useFilter } from "@chakra-ui/react/locale";
 //#region lib/components/BitkitCombobox/BitkitCombobox.tsx
 var BitkitCombobox = forwardRef((props, ref) => {
-	const { children, comboboxProps, defaultValue, disablePortal, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder = "Enter a value or select", searchValue, size = "lg", state, value, ...fieldProps } = props;
+	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 { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
 	const { contains } = useFilter({ sensitivity: "base" });
 	const [filterText, setFilterText] = useState("");
@@ -24,11 +24,14 @@ var BitkitCombobox = forwardRef((props, ref) => {
 		items: visibleItems,
 		isItemDisabled: (item) => !!item.disabled
 	});
-	const itemsKey = JSON.stringify(items.map((item) => item.value));
+	const itemValues = items.map((item) => item.value);
+	const itemsKey = JSON.stringify(itemValues);
 	const [prevItemsKey, setPrevItemsKey] = useState(itemsKey);
 	if (prevItemsKey !== itemsKey) {
+		const prevValues = JSON.parse(prevItemsKey);
+		const isAppend = itemValues.length > prevValues.length && prevValues.every((v, i) => v === itemValues[i]);
 		setPrevItemsKey(itemsKey);
-		setFilterText("");
+		if (!isAppend) setFilterText("");
 	}
 	const hasWarning = state === "warning" || !!fieldProps.warningText;
 	const isInvalid = state === "error" || !!fieldProps.errorText;
@@ -78,6 +81,7 @@ var BitkitCombobox = forwardRef((props, ref) => {
 					emptyHelperText,
 					emptyLabel,
 					isLoading,
+					onScrolledToBottom,
 					onSearchChange,
 					searchValue,
 					size,

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 BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | '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  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    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 itemsKey = JSON.stringify(items.map((item) => item.value));\n  const [prevItemsKey, setPrevItemsKey] = useState(itemsKey);\n  if (prevItemsKey !== itemsKey) {\n    setPrevItemsKey(itemsKey);\n    setFilterText('');\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              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":";;;;;;;;;;;;;;;;AAmCA,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,UACA,eACA,cACA,eACA,iBACA,YACA,WACA,OACA,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,WAAW,KAAK,UAAU,MAAM,KAAK,SAAS,KAAK,KAAK,CAAC;CAC/D,MAAM,CAAC,cAAc,mBAAmB,SAAS,QAAQ;CACzD,IAAI,iBAAiB,UAAU;EAC7B,gBAAgB,QAAQ;EACxB,cAAc,EAAE;CAClB;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;KACK;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 { 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"}

package/dist/components/BitkitControlButton/BitkitControlButton.js

@@ -62,7 +62,6 @@ var BitkitControlButton = forwardRef((props, ref) => {
 			ref,
 			"aria-label": label,
 			disabled: state === "disabled" || state === "skeleton",
-			type: "button",
 			...buttonRest,
 			css: recipe({
 				isDanger,

package/dist/components/BitkitControlButton/BitkitControlButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitControlButton.js","names":[],"sources":["../../../lib/components/BitkitControlButton/BitkitControlButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport opensPopup from '../../utilities/opensPopup';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype ControlButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';\n\ninterface BitkitControlButtonCommonProps {\n  icon: BitkitIconComponent;\n  isDanger?: boolean;\n  label: string;\n  size?: ControlButtonSize;\n  state?: 'disabled' | 'skeleton';\n  /**\n   * Overrides for the label tooltip. It is off by default when this control opens a popup — a menu,\n   * select or popover trigger — where the panel is the affordance and a tooltip would hover over it.\n   * Pass `{ disabled: false }` to bring it back. The accessible name comes from `label` either way.\n   */\n  tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\n// Exported so dependent declarations can name it: `BitkitTabs.AddButton`'s props derive from\n// `Extract<BitkitControlButtonProps, { href?: undefined }>` (this type), and the .d.ts emit\n// fails with TS4023 (\"cannot be named\") if it isn't exported.\nexport interface BitkitControlButtonAsButtonProps\n  extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n  href?: undefined;\n  isExternal?: undefined;\n}\n\nexport interface BitkitControlButtonAsAnchorProps\n  extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'a'>, 'children' | 'size'> {\n  href: string;\n  isExternal?: boolean;\n}\n\nexport type BitkitControlButtonProps = BitkitControlButtonAsButtonProps | BitkitControlButtonAsAnchorProps;\n\nconst BitkitControlButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitControlButtonProps>(\n  (props, ref) => {\n    const Icon = props.icon;\n    const size = props.size ?? 'sm';\n    const recipe = useRecipe({ key: 'controlButton' });\n    const iconSize = size === 'xxs' || size === 'xs' ? '16' : '24';\n    const isDisabled = props.state === 'disabled';\n    const isSkeleton = props.state === 'skeleton';\n    const isPopupTrigger = opensPopup(props);\n    const inertOnClick = isDisabled || isSkeleton;\n\n    // --- Anchor mode (href) ---\n    if (props.href !== undefined) {\n      const {\n        href,\n        icon: _icon,\n        isDanger,\n        isExternal,\n        label,\n        onClick,\n        onKeyDown,\n        rel,\n        size: _size,\n        state: _state,\n        target,\n        tooltipProps,\n        ...anchorRest\n      } = props;\n      const effectiveTarget = isExternal ? '_blank' : target;\n      const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n      const handleClick = inertOnClick\n        ? (e: MouseEvent<HTMLAnchorElement>) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        : onClick;\n      const handleKeyDown = inertOnClick\n        ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              e.stopPropagation();\n            }\n          }\n        : onKeyDown;\n      return (\n        <BitkitLabelTooltip text={label} disabled={isPopupTrigger} {...tooltipProps}>\n          <chakra.a\n            ref={ref as Ref<HTMLAnchorElement>}\n            aria-disabled={inertOnClick || undefined}\n            aria-label={label}\n            {...anchorRest}\n            css={recipe({ isDanger, size })}\n            href={inertOnClick ? undefined : href}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            rel={effectiveRel}\n            target={effectiveTarget}\n          >\n            <Skeleton loading={isSkeleton}>\n              <Icon size={iconSize} />\n            </Skeleton>\n          </chakra.a>\n        </BitkitLabelTooltip>\n      );\n    }\n\n    // --- Button mode (default) ---\n    const { icon: _icon, isDanger, label, size: _size, state, tooltipProps, ...buttonRest } = props;\n    return (\n      <BitkitLabelTooltip text={label} disabled={isPopupTrigger} {...tooltipProps}>\n        <chakra.button\n          ref={ref as Ref<HTMLButtonElement>}\n          aria-label={label}\n          disabled={state === 'disabled' || state === 'skeleton'}\n          // A control button is an action, not a form submit — without this it would submit any\n          // form it happens to sit inside. Before the spread, so a consumer can still opt into\n          // `type=\"submit\"`.\n          type=\"button\"\n          {...buttonRest}\n          css={recipe({ isDanger, size })}\n        >\n          <Skeleton loading={isSkeleton}>\n            <Icon size={iconSize} />\n          </Skeleton>\n        </chakra.button>\n      </BitkitLabelTooltip>\n    );\n  },\n);\n\nBitkitControlButton.displayName = 'BitkitControlButton';\n\nexport default BitkitControlButton;\n"],"mappings":";;;;;;;AAyCA,IAAM,sBAAsB,YACzB,OAAO,QAAQ;CACd,MAAM,OAAO,MAAM;CACnB,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,SAAS,UAAU,EAAE,KAAK,gBAAgB,CAAC;CACjD,MAAM,WAAW,SAAS,SAAS,SAAS,OAAO,OAAO;CAC1D,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,iBAAiB,WAAW,KAAK;CACvC,MAAM,eAAe,cAAc;CAGnC,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,MACA,MAAM,OACN,UACA,YACA,OACA,SACA,WACA,KACA,MAAM,OACN,OAAO,QACP,QACA,cACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,gBACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,gBACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,UAAU;GAAgB,GAAI;GAC7D,UAAA,oBAAC,OAAO,GAAR;IACO;IACL,iBAAe,gBAAgB,KAAA;IAC/B,cAAY;IACZ,GAAI;IACJ,KAAK,OAAO;KAAE;KAAU;IAAK,CAAC;IAC9B,MAAM,eAAe,KAAA,IAAY;IACjC,SAAS;IACT,WAAW;IACX,KAAK;IACL,QAAQ;IAER,UAAA,oBAAC,UAAD;KAAU,SAAS;KACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IACf,CAAA;GACF,CAAA;EACQ,CAAA;CAExB;CAGA,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,MAAM,OAAO,OAAO,cAAc,GAAG,eAAe;CAC1F,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,UAAU;EAAgB,GAAI;EAC7D,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,UAAU,UAAU,cAAc,UAAU;GAI5C,MAAK;GACL,GAAI;GACJ,KAAK,OAAO;IAAE;IAAU;GAAK,CAAC;GAE9B,UAAA,oBAAC,UAAD;IAAU,SAAS;IACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;GACf,CAAA;EACG,CAAA;CACG,CAAA;AAExB,CACF;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"BitkitControlButton.js","names":[],"sources":["../../../lib/components/BitkitControlButton/BitkitControlButton.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, type HTMLChakraProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, type MouseEvent, type Ref } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport opensPopup from '../../utilities/opensPopup';\nimport BitkitLabelTooltip, { type BitkitLabelTooltipProps } from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\ntype ControlButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';\n\ninterface BitkitControlButtonCommonProps {\n  icon: BitkitIconComponent;\n  isDanger?: boolean;\n  label: string;\n  size?: ControlButtonSize;\n  state?: 'disabled' | 'skeleton';\n  /**\n   * Overrides for the label tooltip. It is off by default when this control opens a popup — a menu,\n   * select or popover trigger — where the panel is the affordance and a tooltip would hover over it.\n   * Pass `{ disabled: false }` to bring it back. The accessible name comes from `label` either way.\n   */\n  tooltipProps?: Partial<Omit<BitkitLabelTooltipProps, 'children' | 'text'>>;\n}\n\n// Exported so dependent declarations can name it: `BitkitTabs.AddButton`'s props derive from\n// `Extract<BitkitControlButtonProps, { href?: undefined }>` (this type), and the .d.ts emit\n// fails with TS4023 (\"cannot be named\") if it isn't exported.\nexport interface BitkitControlButtonAsButtonProps\n  extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'button'>, 'children' | 'disabled' | 'size'> {\n  href?: undefined;\n  isExternal?: undefined;\n}\n\nexport interface BitkitControlButtonAsAnchorProps\n  extends BitkitControlButtonCommonProps, Omit<HTMLChakraProps<'a'>, 'children' | 'size'> {\n  href: string;\n  isExternal?: boolean;\n}\n\nexport type BitkitControlButtonProps = BitkitControlButtonAsButtonProps | BitkitControlButtonAsAnchorProps;\n\nconst BitkitControlButton = forwardRef<HTMLButtonElement | HTMLAnchorElement, BitkitControlButtonProps>(\n  (props, ref) => {\n    const Icon = props.icon;\n    const size = props.size ?? 'sm';\n    const recipe = useRecipe({ key: 'controlButton' });\n    const iconSize = size === 'xxs' || size === 'xs' ? '16' : '24';\n    const isDisabled = props.state === 'disabled';\n    const isSkeleton = props.state === 'skeleton';\n    const isPopupTrigger = opensPopup(props);\n    const inertOnClick = isDisabled || isSkeleton;\n\n    // --- Anchor mode (href) ---\n    if (props.href !== undefined) {\n      const {\n        href,\n        icon: _icon,\n        isDanger,\n        isExternal,\n        label,\n        onClick,\n        onKeyDown,\n        rel,\n        size: _size,\n        state: _state,\n        target,\n        tooltipProps,\n        ...anchorRest\n      } = props;\n      const effectiveTarget = isExternal ? '_blank' : target;\n      const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n      const handleClick = inertOnClick\n        ? (e: MouseEvent<HTMLAnchorElement>) => {\n            e.preventDefault();\n            e.stopPropagation();\n          }\n        : onClick;\n      const handleKeyDown = inertOnClick\n        ? (e: KeyboardEvent<HTMLAnchorElement>) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              e.stopPropagation();\n            }\n          }\n        : onKeyDown;\n      return (\n        <BitkitLabelTooltip text={label} disabled={isPopupTrigger} {...tooltipProps}>\n          <chakra.a\n            ref={ref as Ref<HTMLAnchorElement>}\n            aria-disabled={inertOnClick || undefined}\n            aria-label={label}\n            {...anchorRest}\n            css={recipe({ isDanger, size })}\n            href={inertOnClick ? undefined : href}\n            onClick={handleClick}\n            onKeyDown={handleKeyDown}\n            rel={effectiveRel}\n            target={effectiveTarget}\n          >\n            <Skeleton loading={isSkeleton}>\n              <Icon size={iconSize} />\n            </Skeleton>\n          </chakra.a>\n        </BitkitLabelTooltip>\n      );\n    }\n\n    // --- Button mode (default) ---\n    const { icon: _icon, isDanger, label, size: _size, state, tooltipProps, ...buttonRest } = props;\n    return (\n      <BitkitLabelTooltip text={label} disabled={isPopupTrigger} {...tooltipProps}>\n        <chakra.button\n          ref={ref as Ref<HTMLButtonElement>}\n          aria-label={label}\n          disabled={state === 'disabled' || state === 'skeleton'}\n          {...buttonRest}\n          css={recipe({ isDanger, size })}\n        >\n          <Skeleton loading={isSkeleton}>\n            <Icon size={iconSize} />\n          </Skeleton>\n        </chakra.button>\n      </BitkitLabelTooltip>\n    );\n  },\n);\n\nBitkitControlButton.displayName = 'BitkitControlButton';\n\nexport default BitkitControlButton;\n"],"mappings":";;;;;;;AAyCA,IAAM,sBAAsB,YACzB,OAAO,QAAQ;CACd,MAAM,OAAO,MAAM;CACnB,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,SAAS,UAAU,EAAE,KAAK,gBAAgB,CAAC;CACjD,MAAM,WAAW,SAAS,SAAS,SAAS,OAAO,OAAO;CAC1D,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,aAAa,MAAM,UAAU;CACnC,MAAM,iBAAiB,WAAW,KAAK;CACvC,MAAM,eAAe,cAAc;CAGnC,IAAI,MAAM,SAAS,KAAA,GAAW;EAC5B,MAAM,EACJ,MACA,MAAM,OACN,UACA,YACA,OACA,SACA,WACA,KACA,MAAM,OACN,OAAO,QACP,QACA,cACA,GAAG,eACD;EACJ,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EACjG,MAAM,cAAc,gBACf,MAAqC;GACpC,EAAE,eAAe;GACjB,EAAE,gBAAgB;EACpB,IACA;EACJ,MAAM,gBAAgB,gBACjB,MAAwC;GACvC,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;IACtC,EAAE,eAAe;IACjB,EAAE,gBAAgB;GACpB;EACF,IACA;EACJ,OACE,oBAAC,oBAAD;GAAoB,MAAM;GAAO,UAAU;GAAgB,GAAI;GAC7D,UAAA,oBAAC,OAAO,GAAR;IACO;IACL,iBAAe,gBAAgB,KAAA;IAC/B,cAAY;IACZ,GAAI;IACJ,KAAK,OAAO;KAAE;KAAU;IAAK,CAAC;IAC9B,MAAM,eAAe,KAAA,IAAY;IACjC,SAAS;IACT,WAAW;IACX,KAAK;IACL,QAAQ;IAER,UAAA,oBAAC,UAAD;KAAU,SAAS;KACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;IACf,CAAA;GACF,CAAA;EACQ,CAAA;CAExB;CAGA,MAAM,EAAE,MAAM,OAAO,UAAU,OAAO,MAAM,OAAO,OAAO,cAAc,GAAG,eAAe;CAC1F,OACE,oBAAC,oBAAD;EAAoB,MAAM;EAAO,UAAU;EAAgB,GAAI;EAC7D,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,UAAU,UAAU,cAAc,UAAU;GAC5C,GAAI;GACJ,KAAK,OAAO;IAAE;IAAU;GAAK,CAAC;GAE9B,UAAA,oBAAC,UAAD;IAAU,SAAS;IACjB,UAAA,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA;GACf,CAAA;EACG,CAAA;CACG,CAAA;AAExB,CACF;AAEA,oBAAoB,cAAc"}

package/dist/components/BitkitGroupHeading/BitkitGroupHeading.d.ts

@@ -1,8 +1,6 @@
 import { BoxProps } from '@chakra-ui/react/box';
-import { ReactNode } from 'react';
 import { BitkitIconComponent } from '../../icons';
 export interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {
-    badge?: ReactNode;
     icon?: BitkitIconComponent;
     label: string;
 }

package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js

@@ -5,26 +5,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Separator } from "@chakra-ui/react/separator";
 //#region lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx
 var BitkitGroupHeading = forwardRef((props, ref) => {
-	const { badge, icon: Icon, label, ...rest } = props;
+	const { icon: Icon, label, ...rest } = props;
 	const styles = useSlotRecipe({ key: "groupHeading" })();
 	return /* @__PURE__ */ jsxs(Box, {
 		css: styles.root,
 		ref,
 		...rest,
-		children: [
-			/* @__PURE__ */ jsxs(chakra.div, {
-				css: styles.titleBlock,
-				children: [Icon && /* @__PURE__ */ jsx(Icon, {
-					css: styles.icon,
-					size: "16"
-				}), /* @__PURE__ */ jsx(chakra.span, {
-					css: styles.label,
-					children: label
-				})]
-			}),
-			/* @__PURE__ */ jsx(Separator, { css: styles.separator }),
-			badge
-		]
+		children: [/* @__PURE__ */ jsxs(chakra.div, {
+			css: styles.titleBlock,
+			children: [Icon && /* @__PURE__ */ jsx(Icon, {
+				css: styles.icon,
+				size: "16"
+			}), /* @__PURE__ */ jsx(chakra.span, {
+				css: styles.label,
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx(Separator, { css: styles.separator })]
 	});
 });
 BitkitGroupHeading.displayName = "BitkitGroupHeading";

package/dist/components/BitkitGroupHeading/BitkitGroupHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n  badge?: ReactNode;\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n  const { badge, icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'groupHeading' });\n  const styles = recipe();\n\n  return (\n    <Box css={styles.root} ref={ref} {...rest}>\n      <chakra.div css={styles.titleBlock}>\n        {Icon && <Icon css={styles.icon} size=\"16\" />}\n        <chakra.span css={styles.label}>{label}</chakra.span>\n      </chakra.div>\n      <Separator css={styles.separator} />\n      {badge}\n    </Box>\n  );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;AAaA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,OAAO,MAAM,MAAM,OAAO,GAAG,SAAS;CAG9C,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;EAArC,UAAA;GACE,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;KAAM,KAAK,OAAO;KAAM,MAAK;IAAM,CAAA,GAC5C,oBAAC,OAAO,MAAR;KAAa,KAAK,OAAO;KAAQ,UAAA;IAAmB,CAAA,CAC1C;;GACZ,oBAAC,WAAD,EAAW,KAAK,OAAO,UAAY,CAAA;GAClC;EACE;;AAET,CAAC;AAED,mBAAmB,cAAc"}
+{"version":3,"file":"BitkitGroupHeading.js","names":[],"sources":["../../../lib/components/BitkitGroupHeading/BitkitGroupHeading.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\n\nexport interface BitkitGroupHeadingProps extends Omit<BoxProps, 'icon'> {\n  icon?: BitkitIconComponent;\n  label: string;\n}\n\nconst BitkitGroupHeading = forwardRef<HTMLDivElement, BitkitGroupHeadingProps>((props, ref) => {\n  const { icon: Icon, label, ...rest } = props;\n\n  const recipe = useSlotRecipe({ key: 'groupHeading' });\n  const styles = recipe();\n\n  return (\n    <Box css={styles.root} ref={ref} {...rest}>\n      <chakra.div css={styles.titleBlock}>\n        {Icon && <Icon css={styles.icon} size=\"16\" />}\n        <chakra.span css={styles.label}>{label}</chakra.span>\n      </chakra.div>\n      <Separator css={styles.separator} />\n    </Box>\n  );\n});\n\nBitkitGroupHeading.displayName = 'BitkitGroupHeading';\n\nexport default BitkitGroupHeading;\n"],"mappings":";;;;;;AAYA,IAAM,qBAAqB,YAAqD,OAAO,QAAQ;CAC7F,MAAM,EAAE,MAAM,MAAM,OAAO,GAAG,SAAS;CAGvC,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CACpC,CAAA,CAAO;CAEtB,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAW;EAAK,GAAI;EAArC,UAAA,CACE,qBAAC,OAAO,KAAR;GAAY,KAAK,OAAO;GAAxB,UAAA,CACG,QAAQ,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAM,MAAK;GAAM,CAAA,GAC5C,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAQ,UAAA;GAAmB,CAAA,CAC1C;EACZ,CAAA,GAAA,oBAAC,WAAD,EAAW,KAAK,OAAO,UAAY,CAAA,CAChC;;AAET,CAAC;AAED,mBAAmB,cAAc"}

package/dist/components/BitkitMultiselect/BitkitMultiselect.d.ts

@@ -1,14 +1,16 @@
 import { SelectRootProps, SelectTriggerProps } from '@chakra-ui/react/select';
 import { BitkitFieldProps } from '../BitkitField/BitkitField';
 import { BitkitMultiselectMenuItemProps } from '../BitkitMultiselectMenu/BitkitMultiselectMenu';
-import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
 import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';
 export type BitkitMultiselectTriggerProps = SelectTriggerProps;
-export type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
+export type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {
     children?: BitkitSelectMenuActionChild;
     constrained?: boolean;
     defaultValue?: Array<string>;
     isLoading?: boolean;
+    /** Reddens the offending tags and errors the field, like BitkitTagsInput. Pair with `errorText`. */
+    isValueInvalid?: (value: string) => boolean;
     items: Array<BitkitMultiselectMenuItemProps>;
     onValueChange?: (newVal: Array<string>) => void;
     placeholder?: string;
@@ -18,12 +20,14 @@ export type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     triggerProps?: BitkitMultiselectTriggerProps;
     value?: Array<string>;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
-declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "state"> & {
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
+declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "onChange" | "state"> & {
     children?: BitkitSelectMenuActionChild;
     constrained?: boolean;
     defaultValue?: Array<string>;
     isLoading?: boolean;
+    /** Reddens the offending tags and errors the field, like BitkitTagsInput. Pair with `errorText`. */
+    isValueInvalid?: (value: string) => boolean;
     items: Array<BitkitMultiselectMenuItemProps>;
     onValueChange?: (newVal: Array<string>) => void;
     placeholder?: string;
@@ -33,7 +37,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFie
     state?: "disabled" | "error" | "readOnly" | "warning";
     triggerProps?: BitkitMultiselectTriggerProps;
     value?: Array<string>;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
     Action: {
         (props: import('..').BitkitSelectMenuActionProps): import("react").JSX.Element;
         displayName: string;

package/dist/components/BitkitMultiselect/BitkitMultiselect.js

@@ -14,6 +14,7 @@ import { forwardRef, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
 import { Text } from "@chakra-ui/react/text";
+import { useControllableState } from "@chakra-ui/react/hooks";
 import { createListCollection } from "@chakra-ui/react/collection";
 import { Select, useSelectContext } from "@chakra-ui/react/select";
 //#region lib/components/BitkitMultiselect/BitkitMultiselect.tsx
@@ -25,7 +26,7 @@ var NON_INTERACTIVE_STATES = [
 ];
 /** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */
 var shouldShowClearButton = (constrained, selectionCount, state) => !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);
-var MultiselectOverlay = ({ constrained, placeholder, size, state }) => {
+var MultiselectOverlay = ({ constrained, isValueInvalid, placeholder, size, state }) => {
 	const select = useSelectContext();
 	const styles = useSlotRecipe({ key: "multiselect" })({
 		constrained,
@@ -43,7 +44,7 @@ var MultiselectOverlay = ({ constrained, placeholder, size, state }) => {
 	const renderTags = () => {
 		if (constrained) return /* @__PURE__ */ jsxs(Fragment$1, { children: [hasSelection && /* @__PURE__ */ jsx(TagSlot, { children: /* @__PURE__ */ jsx(BitkitTag, {
 			size: "sm",
-			colorVariant: "neutral",
+			colorVariant: selectedValues.some((v) => isValueInvalid?.(v)) ? "red" : "neutral",
 			labelText: String(selectedValues.length),
 			state: tagState,
 			onRemove: canRemove ? () => select.clearValue() : void 0
@@ -61,7 +62,7 @@ var MultiselectOverlay = ({ constrained, placeholder, size, state }) => {
 		});
 		return selectedItems.map((item) => /* @__PURE__ */ jsx(TagSlot, { children: /* @__PURE__ */ jsx(BitkitTag, {
 			size: "sm",
-			colorVariant: "neutral",
+			colorVariant: isValueInvalid?.(item.value) ? "red" : "neutral",
 			labelText: item.label,
 			state: tagState,
 			onRemove: canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : void 0
@@ -94,7 +95,7 @@ var ClearAllButton = ({ state }) => {
 	});
 };
 var BitkitMultiselect = forwardRef((props, ref) => {
-	const { children, constrained = false, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
+	const { children, constrained = false, defaultValue, emptyHelperText, emptyLabel, isLoading, isValueInvalid, items, onScrolledToBottom, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
 	const collection = createListCollection({
 		items,
 		groupBy: (item) => item.group || "",
@@ -106,20 +107,29 @@ var BitkitMultiselect = forwardRef((props, ref) => {
 	});
 	const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
 	const iconSize = size === "lg" ? "24" : "16";
-	const isInvalid = state === "error" || !!fieldProps.errorText;
+	const [currentValues, setCurrentValues] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? []
+	});
+	const hasInvalidValue = state !== "disabled" && state !== "readOnly" && !!isValueInvalid && currentValues.some(isValueInvalid);
+	const effectiveState = hasInvalidValue ? "error" : state;
+	const isInvalid = effectiveState === "error" || !!fieldProps.errorText;
 	return /* @__PURE__ */ jsx(BitkitField, {
 		ref,
-		state,
+		state: effectiveState,
 		...fieldProps,
 		children: /* @__PURE__ */ jsxs(Select.Root, {
 			collection,
 			multiple: true,
 			...selectProps,
 			defaultValue,
-			disabled: state === "disabled",
+			disabled: effectiveState === "disabled",
 			invalid: isInvalid,
-			onValueChange: (details) => onValueChange?.(details.value),
-			readOnly: state === "readOnly",
+			onValueChange: (details) => {
+				setCurrentValues(details.value);
+				onValueChange?.(details.value);
+			},
+			readOnly: effectiveState === "readOnly",
 			scrollToIndexFn: ({ getElement }) => getElement()?.scrollIntoView({ block: "nearest" }),
 			value,
 			children: [
@@ -134,22 +144,23 @@ var BitkitMultiselect = forwardRef((props, ref) => {
 						}),
 						/* @__PURE__ */ jsx(MultiselectOverlay, {
 							constrained,
+							isValueInvalid: hasInvalidValue ? isValueInvalid : void 0,
 							placeholder,
 							size,
-							state
+							state: effectiveState
 						}),
 						/* @__PURE__ */ jsxs(Select.IndicatorGroup, {
 							css: styles.indicatorGroup,
 							children: [
-								!constrained && /* @__PURE__ */ jsx(ClearAllButton, { state }),
-								state === "error" && /* @__PURE__ */ jsx(Select.Indicator, {
+								!constrained && /* @__PURE__ */ jsx(ClearAllButton, { state: effectiveState }),
+								effectiveState === "error" && /* @__PURE__ */ jsx(Select.Indicator, {
 									css: styles.indicator,
 									children: /* @__PURE__ */ jsx(IconErrorCircleFilled, {
 										size: iconSize,
 										color: "icon/negative"
 									})
 								}),
-								state === "warning" && /* @__PURE__ */ jsx(Select.Indicator, {
+								effectiveState === "warning" && /* @__PURE__ */ jsx(Select.Indicator, {
 									css: styles.indicator,
 									children: /* @__PURE__ */ jsx(IconWarningYellow, { size: iconSize })
 								}),
@@ -169,6 +180,7 @@ var BitkitMultiselect = forwardRef((props, ref) => {
 						emptyHelperText,
 						emptyLabel,
 						isLoading,
+						onScrolledToBottom,
 						onSearchChange,
 						searchValue,
 						size,

package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\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 BitkitMultiselectMenu, {\n  type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  constrained?: boolean;\n  defaultValue?: Array<string>;\n  isLoading?: boolean;\n  items: Array<BitkitMultiselectMenuItemProps>;\n  onValueChange?: (newVal: Array<string>) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitMultiselectTriggerProps;\n  value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n  !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n  constrained: boolean;\n  placeholder?: string;\n  size: 'md' | 'lg';\n  state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, placeholder, size, state }: MultiselectOverlayProps) => {\n  const select = useSelectContext();\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n  const selectedValues = select.value;\n  const isDisabled = state === 'disabled';\n  const isReadOnly = state === 'readOnly';\n  const tagState = isDisabled ? 'disabled' : undefined;\n  // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n  // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n  // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n  // the next one up.\n  const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n  const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n  const canRemove = !isDisabled && !isReadOnly;\n\n  const hasSelection = selectedValues.length > 0;\n\n  const renderTags = () => {\n    if (constrained) {\n      return (\n        <>\n          {hasSelection && (\n            <TagSlot>\n              <BitkitTag\n                size=\"sm\"\n                colorVariant=\"neutral\"\n                labelText={String(selectedValues.length)}\n                state={tagState}\n                onRemove={canRemove ? () => select.clearValue() : undefined}\n              />\n            </TagSlot>\n          )}\n          <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n            {resolvedPlaceholder}\n          </Text>\n        </>\n      );\n    }\n\n    if (selectedItems.length === 0) {\n      return (\n        <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n          {resolvedPlaceholder}\n        </Text>\n      );\n    }\n\n    return selectedItems.map((item) => (\n      <TagSlot key={item.value}>\n        <BitkitTag\n          size=\"sm\"\n          colorVariant=\"neutral\"\n          labelText={item.label}\n          state={tagState}\n          onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n        />\n      </TagSlot>\n    ));\n  };\n\n  return (\n    <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n      <Box css={styles.tagsBlock}>{renderTags()}</Box>\n    </Box>\n  );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n  <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n    {children}\n  </Box>\n);\n\ntype ClearAllButtonProps = {\n  state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n  const select = useSelectContext();\n\n  // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n  if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n  return (\n    <BitkitCloseButton size=\"sm\" colorVariant=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n  );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n  const {\n    children,\n    constrained = false,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    items,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchValue,\n    selectProps,\n    size = 'lg',\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const iconSize = size === 'lg' ? '24' : '16';\n  const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={state} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        multiple\n        {...selectProps}\n        defaultValue={defaultValue}\n        disabled={state === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(details) => onValueChange?.(details.value)}\n        readOnly={state === 'readOnly'}\n        // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n        // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n        // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n        // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n        // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value}\n      >\n        <Select.HiddenSelect />\n        <Select.Control css={styles.control} className=\"group\">\n          <Select.Trigger css={styles.trigger} {...triggerProps} />\n          <MultiselectOverlay constrained={constrained} placeholder={placeholder} size={size} state={state} />\n          <Select.IndicatorGroup css={styles.indicatorGroup}>\n            {!constrained && <ClearAllButton state={state} />}\n            {state === 'error' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {state === 'warning' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconWarningYellow size={iconSize} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator css={styles.indicator} asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitMultiselectMenu\n              collection={collection}\n              emptyHelperText={emptyHelperText}\n              emptyLabel={emptyLabel}\n              isLoading={isLoading}\n              onSearchChange={onSearchChange}\n              searchValue={searchValue}\n              size={size}\n            >\n              {children}\n            </BitkitMultiselectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
+{"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\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 BitkitMultiselectMenu, {\n  type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {\n  children?: BitkitSelectMenuActionChild;\n  constrained?: boolean;\n  defaultValue?: Array<string>;\n  isLoading?: boolean;\n  /** Reddens the offending tags and errors the field, like BitkitTagsInput. Pair with `errorText`. */\n  isValueInvalid?: (value: string) => boolean;\n  items: Array<BitkitMultiselectMenuItemProps>;\n  onValueChange?: (newVal: Array<string>) => void;\n  placeholder?: string;\n  disablePortal?: boolean;\n  selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;\n  size?: 'md' | 'lg';\n  state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n  triggerProps?: BitkitMultiselectTriggerProps;\n  value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/** Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n  !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n  constrained: boolean;\n  isValueInvalid?: (value: string) => boolean;\n  placeholder?: string;\n  size: 'md' | 'lg';\n  state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, isValueInvalid, placeholder, size, state }: MultiselectOverlayProps) => {\n  const select = useSelectContext();\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n  const selectedValues = select.value;\n  const isDisabled = state === 'disabled';\n  const isReadOnly = state === 'readOnly';\n  const tagState = isDisabled ? 'disabled' : undefined;\n  // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n  // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n  // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n  // the next one up.\n  const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n  const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n  const canRemove = !isDisabled && !isReadOnly;\n\n  const hasSelection = selectedValues.length > 0;\n\n  const renderTags = () => {\n    if (constrained) {\n      return (\n        <>\n          {hasSelection && (\n            <TagSlot>\n              <BitkitTag\n                size=\"sm\"\n                colorVariant={selectedValues.some((v) => isValueInvalid?.(v)) ? 'red' : 'neutral'}\n                labelText={String(selectedValues.length)}\n                state={tagState}\n                onRemove={canRemove ? () => select.clearValue() : undefined}\n              />\n            </TagSlot>\n          )}\n          <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n            {resolvedPlaceholder}\n          </Text>\n        </>\n      );\n    }\n\n    if (selectedItems.length === 0) {\n      return (\n        <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n          {resolvedPlaceholder}\n        </Text>\n      );\n    }\n\n    return selectedItems.map((item) => (\n      <TagSlot key={item.value}>\n        <BitkitTag\n          size=\"sm\"\n          colorVariant={isValueInvalid?.(item.value) ? 'red' : 'neutral'}\n          labelText={item.label}\n          state={tagState}\n          onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n        />\n      </TagSlot>\n    ));\n  };\n\n  return (\n    <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n      <Box css={styles.tagsBlock}>{renderTags()}</Box>\n    </Box>\n  );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n  <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n    {children}\n  </Box>\n);\n\ntype ClearAllButtonProps = {\n  state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n  const select = useSelectContext();\n\n  // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n  if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n  return (\n    <BitkitCloseButton size=\"sm\" colorVariant=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n  );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n  const {\n    children,\n    constrained = false,\n    defaultValue,\n    emptyHelperText,\n    emptyLabel,\n    isLoading,\n    isValueInvalid,\n    items,\n    onScrolledToBottom,\n    onSearchChange,\n    onValueChange,\n    placeholder,\n    disablePortal,\n    searchValue,\n    selectProps,\n    size = 'lg',\n    state,\n    triggerProps,\n    value,\n    ...fieldProps\n  } = props;\n\n  const collection = createListCollection({\n    items,\n    groupBy: (item) => item.group || '',\n    isItemDisabled: (item) => !!item.disabled,\n  });\n\n  const recipe = useSlotRecipe({ key: 'multiselect' });\n  const styles = recipe({ constrained, size });\n\n  const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n  const iconSize = size === 'lg' ? '24' : '16';\n\n  const [currentValues, setCurrentValues] = useControllableState<Array<string>>({\n    value,\n    defaultValue: defaultValue ?? [],\n  });\n  const isInteractive = state !== 'disabled' && state !== 'readOnly';\n  const hasInvalidValue = isInteractive && !!isValueInvalid && currentValues.some(isValueInvalid);\n  const effectiveState = hasInvalidValue ? 'error' : state;\n  const isInvalid = effectiveState === 'error' || !!fieldProps.errorText;\n\n  return (\n    <BitkitField ref={ref} state={effectiveState} {...fieldProps}>\n      <Select.Root\n        collection={collection}\n        multiple\n        {...selectProps}\n        defaultValue={defaultValue}\n        disabled={effectiveState === 'disabled'}\n        invalid={isInvalid}\n        onValueChange={(details) => {\n          setCurrentValues(details.value);\n          onValueChange?.(details.value);\n        }}\n        readOnly={effectiveState === 'readOnly'}\n        // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n        // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n        // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n        // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n        // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n        scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n        value={value}\n      >\n        <Select.HiddenSelect />\n        <Select.Control css={styles.control} className=\"group\">\n          <Select.Trigger css={styles.trigger} {...triggerProps} />\n          <MultiselectOverlay\n            constrained={constrained}\n            isValueInvalid={hasInvalidValue ? isValueInvalid : undefined}\n            placeholder={placeholder}\n            size={size}\n            state={effectiveState}\n          />\n          <Select.IndicatorGroup css={styles.indicatorGroup}>\n            {!constrained && <ClearAllButton state={effectiveState} />}\n            {effectiveState === 'error' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n              </Select.Indicator>\n            )}\n            {effectiveState === 'warning' && (\n              <Select.Indicator css={styles.indicator}>\n                <IconWarningYellow size={iconSize} />\n              </Select.Indicator>\n            )}\n            <Select.Indicator css={styles.indicator} asChild>\n              <AssetSelectChevron />\n            </Select.Indicator>\n          </Select.IndicatorGroup>\n        </Select.Control>\n        <Portal disabled={disablePortal || disablePortalFromContext}>\n          <Select.Positioner>\n            <BitkitMultiselectMenu\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            >\n              {children}\n            </BitkitMultiselectMenu>\n          </Select.Positioner>\n        </Portal>\n      </Select.Root>\n    </BitkitField>\n  );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}

package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.d.ts

@@ -1,6 +1,6 @@
 import { ListCollection } from '@chakra-ui/react/collection';
 import { ReactNode } from 'react';
-import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
 import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';
 export type BitkitMultiselectMenuItemProps = {
     value: string;
@@ -15,11 +15,11 @@ export type BitkitMultiselectMenuProps = {
     collection: ListCollection<BitkitMultiselectMenuItemProps>;
     isLoading?: boolean;
     size?: 'md' | 'lg';
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
 declare const BitkitMultiselectMenu: import('react').ForwardRefExoticComponent<{
     children?: BitkitSelectMenuActionChild;
     collection: ListCollection<BitkitMultiselectMenuItemProps>;
     isLoading?: boolean;
     size?: "md" | "lg";
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitMultiselectMenu;

package/dist/components/BitkitMultiselectMenu/BitkitMultiselectMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitMultiselectMenu.js","names":[],"sources":["../../../lib/components/BitkitMultiselectMenu/BitkitMultiselectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Select } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck } from '../../icons';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { SelectMenuShell, selectSizeMap, type SelectSizes } from '../BitkitSelectMenu/SelectMenuShell';\n\nexport type BitkitMultiselectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  helperText?: ReactNode;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitMultiselectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<BitkitMultiselectMenuItemProps>;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitMultiselectMenu = forwardRef<HTMLDivElement, BitkitMultiselectMenuProps>((props, ref) => {\n  const { children, collection, size, ...shellProps } = props;\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n  const { iconSize, spinnerSize } = selectSizeMap[size ?? 'lg'];\n\n  return (\n    <SelectMenuShell\n      NS={Select}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => (\n        <MultiselectMenuItem\n          key={item.value}\n          item={item}\n          iconSize={iconSize}\n          spinnerSize={spinnerSize}\n          styles={styles}\n        />\n      )}\n      spinnerSize={spinnerSize}\n      styles={styles}\n      {...shellProps}\n    >\n      {children}\n    </SelectMenuShell>\n  );\n});\n\nBitkitMultiselectMenu.displayName = 'BitkitMultiselectMenu';\n\ntype MultiselectMenuItemRenderProps = {\n  item: BitkitMultiselectMenuItemProps;\n  iconSize: SelectSizes['iconSize'];\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst MultiselectMenuItem = ({ item, iconSize, spinnerSize, styles }: MultiselectMenuItemRenderProps) => {\n  if (item.loading) {\n    // Rendered as a plain Box, not Select.Item — Zag's state machine won't track it\n    // as an option, so keyboard nav skips it and it can't be selected.\n    return (\n      <Box css={styles.item}>\n        <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n        <Text css={styles.itemLoadingLabel}>Loading...</Text>\n      </Box>\n    );\n  }\n\n  return (\n    <Select.Item css={styles.item} item={item}>\n      <Box css={styles.checkbox} data-slot=\"checkbox\">\n        <IconCheck size={iconSize} css={styles.checkmark} data-slot=\"checkmark\" />\n      </Box>\n      <Box css={styles.itemContent}>\n        <Text css={styles.itemLabel}>{item.label}</Text>\n        {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n      </Box>\n    </Select.Item>\n  );\n};\n\nexport default BitkitMultiselectMenu;\n"],"mappings":";;;;;;;;;;AAiCA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,YAAY,MAAM,GAAG,eAAe;CAEtD,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,EAAE,UAAU,gBAAgB,cAAc,QAAQ;CAExD,OACE,oBAAC,iBAAD;EACE,IAAI;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SACX,oBAAC,qBAAD;GAEQ;GACI;GACG;GACL;EACT,GALM,KAAK,KAKX;EAEU;EACL;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,sBAAsB,cAAc;AASpC,IAAM,uBAAuB,EAAE,MAAM,UAAU,aAAa,aAA6C;CACvG,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,MAAM;GAAa,KAAK,OAAO;EAAc,CAAA,GACvE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,OAAO,MAAR;EAAa,KAAK,OAAO;EAAY;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU,aAAU;GACnC,UAAA,oBAAC,WAAD;IAAW,MAAM;IAAU,KAAK,OAAO;IAAW,aAAU;GAAa,CAAA;EACtE,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAY,UAAA,KAAK;GAAY,CAAA,GAC9C,KAAK,cAAc,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAiB,UAAA,KAAK;GAAiB,CAAA,CAC1E;EACM,CAAA,CAAA;;AAEjB"}
+{"version":3,"file":"BitkitMultiselectMenu.js","names":[],"sources":["../../../lib/components/BitkitMultiselectMenu/BitkitMultiselectMenu.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { Select } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { IconCheck } from '../../icons';\nimport {\n  type BitkitSelectMenuEmptyStateProps,\n  type BitkitSelectMenuScrollProps,\n  type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport { SelectMenuShell, selectSizeMap, type SelectSizes } from '../BitkitSelectMenu/SelectMenuShell';\n\nexport type BitkitMultiselectMenuItemProps = {\n  value: string;\n  label: string;\n  group?: string;\n  helperText?: ReactNode;\n  disabled?: boolean;\n  loading?: boolean;\n};\n\nexport type BitkitMultiselectMenuProps = {\n  children?: BitkitSelectMenuActionChild;\n  collection: ListCollection<BitkitMultiselectMenuItemProps>;\n  isLoading?: boolean;\n  size?: 'md' | 'lg';\n} & BitkitSelectMenuSearchProps &\n  BitkitSelectMenuScrollProps &\n  BitkitSelectMenuEmptyStateProps;\n\nconst BitkitMultiselectMenu = forwardRef<HTMLDivElement, BitkitMultiselectMenuProps>((props, ref) => {\n  const { children, collection, size, ...shellProps } = props;\n  const recipe = useSlotRecipe({ key: 'select' });\n  const styles = recipe({ size });\n  const { iconSize, spinnerSize } = selectSizeMap[size ?? 'lg'];\n\n  return (\n    <SelectMenuShell\n      NS={Select}\n      collection={collection}\n      contentRef={ref}\n      iconSize={iconSize}\n      renderItem={(item) => (\n        <MultiselectMenuItem\n          key={item.value}\n          item={item}\n          iconSize={iconSize}\n          spinnerSize={spinnerSize}\n          styles={styles}\n        />\n      )}\n      spinnerSize={spinnerSize}\n      styles={styles}\n      {...shellProps}\n    >\n      {children}\n    </SelectMenuShell>\n  );\n});\n\nBitkitMultiselectMenu.displayName = 'BitkitMultiselectMenu';\n\ntype MultiselectMenuItemRenderProps = {\n  item: BitkitMultiselectMenuItemProps;\n  iconSize: SelectSizes['iconSize'];\n  spinnerSize: SelectSizes['spinnerSize'];\n  styles: Record<string, SystemStyleObject>;\n};\n\nconst MultiselectMenuItem = ({ item, iconSize, spinnerSize, styles }: MultiselectMenuItemRenderProps) => {\n  if (item.loading) {\n    // Rendered as a plain Box, not Select.Item — Zag's state machine won't track it\n    // as an option, so keyboard nav skips it and it can't be selected.\n    return (\n      <Box css={styles.item}>\n        <Spinner variant=\"purple\" size={spinnerSize} css={styles.itemLoading} />\n        <Text css={styles.itemLoadingLabel}>Loading...</Text>\n      </Box>\n    );\n  }\n\n  return (\n    <Select.Item css={styles.item} item={item}>\n      <Box css={styles.checkbox} data-slot=\"checkbox\">\n        <IconCheck size={iconSize} css={styles.checkmark} data-slot=\"checkmark\" />\n      </Box>\n      <Box css={styles.itemContent}>\n        <Text css={styles.itemLabel}>{item.label}</Text>\n        {item.helperText && <Text css={styles.itemHelperText}>{item.helperText}</Text>}\n      </Box>\n    </Select.Item>\n  );\n};\n\nexport default BitkitMultiselectMenu;\n"],"mappings":";;;;;;;;;;AAmCA,IAAM,wBAAwB,YAAwD,OAAO,QAAQ;CACnG,MAAM,EAAE,UAAU,YAAY,MAAM,GAAG,eAAe;CAEtD,MAAM,SADS,cAAc,EAAE,KAAK,SAAS,CAC9B,CAAA,CAAO,EAAE,KAAK,CAAC;CAC9B,MAAM,EAAE,UAAU,gBAAgB,cAAc,QAAQ;CAExD,OACE,oBAAC,iBAAD;EACE,IAAI;EACQ;EACZ,YAAY;EACF;EACV,aAAa,SACX,oBAAC,qBAAD;GAEQ;GACI;GACG;GACL;EACT,GALM,KAAK,KAKX;EAEU;EACL;EACR,GAAI;EAEH;CACc,CAAA;AAErB,CAAC;AAED,sBAAsB,cAAc;AASpC,IAAM,uBAAuB,EAAE,MAAM,UAAU,aAAa,aAA6C;CACvG,IAAI,KAAK,SAGP,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA,CACE,oBAAC,SAAD;GAAS,SAAQ;GAAS,MAAM;GAAa,KAAK,OAAO;EAAc,CAAA,GACvE,oBAAC,MAAD;GAAM,KAAK,OAAO;GAAkB,UAAA;EAAgB,CAAA,CACjD;;CAIT,OACE,qBAAC,OAAO,MAAR;EAAa,KAAK,OAAO;EAAY;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAU,aAAU;GACnC,UAAA,oBAAC,WAAD;IAAW,MAAM;IAAU,KAAK,OAAO;IAAW,aAAU;GAAa,CAAA;EACtE,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,OAAO;GAAjB,UAAA,CACE,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAY,UAAA,KAAK;GAAY,CAAA,GAC9C,KAAK,cAAc,oBAAC,MAAD;IAAM,KAAK,OAAO;IAAiB,UAAA,KAAK;GAAiB,CAAA,CAC1E;EACM,CAAA,CAAA;;AAEjB"}

package/dist/components/BitkitSelect/BitkitSelect.d.ts

@@ -1,9 +1,9 @@
 import { SelectRootProps, SelectTriggerProps } from '@chakra-ui/react/select';
 import { BitkitFieldProps } from '../BitkitField/BitkitField.tsx';
-import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
+import { BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuScrollProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
 import { BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction.tsx';
 export type BitkitSelectTriggerProps = SelectTriggerProps;
-export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
+export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'onChange' | 'state'> & {
     children?: BitkitSelectMenuActionChild;
     defaultValue?: string;
     isLoading?: boolean;
@@ -16,8 +16,8 @@ export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     triggerProps?: BitkitSelectTriggerProps;
     value?: string;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
-declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "state"> & {
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps;
+declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFieldProps, "children" | "onChange" | "state"> & {
     children?: BitkitSelectMenuActionChild;
     defaultValue?: string;
     isLoading?: boolean;
@@ -30,7 +30,7 @@ declare const _default: import('react').ForwardRefExoticComponent<Omit<BitkitFie
     state?: "disabled" | "error" | "readOnly" | "warning";
     triggerProps?: BitkitSelectTriggerProps;
     value?: string;
-} & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
+} & BitkitSelectMenuSearchProps & BitkitSelectMenuScrollProps & BitkitSelectMenuEmptyStateProps & import('react').RefAttributes<HTMLDivElement>> & {
     Action: {
         (props: import('../index.ts').BitkitSelectMenuActionProps): import("react").JSX.Element;
         displayName: string;

package/dist/components/BitkitSelect/BitkitSelect.js

@@ -56,7 +56,7 @@ var SelectValue = ({ placeholder, state, size }) => {
 	});
 };
 var BitkitSelect = forwardRef((props, ref) => {
-	const { children, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
+	const { children, defaultValue, emptyHelperText, emptyLabel, isLoading, items, onScrolledToBottom, onSearchChange, onValueChange, placeholder, disablePortal, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
 	const collection = createListCollection({
 		items,
 		groupBy: (item) => item.group || "",
@@ -110,6 +110,7 @@ var BitkitSelect = forwardRef((props, ref) => {
 						emptyHelperText,
 						emptyLabel,
 						isLoading,
+						onScrolledToBottom,
 						onSearchChange,
 						searchValue,
 						size,