npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.200 → 0.3.202 - Mend

@bitrise/bitkit-v2 0.3.200 → 0.3.202

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js CHANGED Viewed

@@ -81,16 +81,23 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
 				tabIndex: -1,
 				children
 			}),
-			/* @__PURE__ */ jsx(BitkitTooltip, {
-				text: COPY_TOOLTIP,
-				children: copyButton
+			/* @__PURE__ */ jsx(chakra.div, {
+				css: styles.copyButtonWrapper,
+				children: /* @__PURE__ */ jsx(BitkitTooltip, {
+					text: COPY_TOOLTIP,
+					children: copyButton
+				})
 			}),
 			hasShowMore && /* @__PURE__ */ jsxs(chakra.div, {
 				css: styles.showMoreContainer,
 				children: [!isExpanded && /* @__PURE__ */ jsx(chakra.div, { css: styles.showMoreGradient }), /* @__PURE__ */ jsxs(chakra.button, {
 					onClick: handleToggleExpand,
 					css: styles.showMoreButton,
-					children: [isExpanded ? "Show less" : "Show more", /* @__PURE__ */ jsx(AssetSelectChevron, { "data-state": isExpanded ? "open" : "closed" })]
+					children: [isExpanded ? "Show less" : "Show more", /* @__PURE__ */ jsx(AssetSelectChevron, {
+						"data-state": isExpanded ? "open" : "closed",
+						height: "16",
+						width: "16"
+					})]
 				})]
 			})
 		]

package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface BaseProps {\n children: string;\n size?: 'md' \| 'lg';\n textToCopy?: string;\n}\n\ninterface InlineProps extends BaseProps {\n interactive?: boolean;\n startingHeight?: never;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n interactive?: never;\n startingHeight?: number;\n variant: 'multi' \| 'single';\n}\n\nexport type BitkitCodeSnippetProps = InlineProps \| BlockProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n const { children, interactive, size = 'lg', startingHeight, textToCopy, variant } = props;\n\n const hasShowMore = startingHeight !== undefined;\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { copied, copy } = useClipboard({ timeout: 2000, value: textToCopy ?? children });\n\n const recipe = useSlotRecipe({ key: 'codeSnippet' });\n const styles = recipe({ size, variant, hasShowMore, isExpanded, interactive });\n\n const handleToggleExpand = () => {\n setIsExpanded((prev) => !prev);\n };\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n copy();\n }\n };\n\n const copyButton = (\n <chakra.button aria-label={COPY_TOOLTIP} css={styles.copyButton} onClick={copy} type=\"button\">\n {copied ? <IconCheck size=\"16\" /> : <IconCopy size=\"16\" />}\n </chakra.button>\n );\n\n if (variant === 'inline') {\n if (!interactive) {\n return (\n <chakra.code ref={ref} css={styles.root}>\n {children}\n </chakra.code>\n );\n }\n\n return (\n <BitkitTooltip text={COPY_TOOLTIP}>\n <chakra.code ref={ref} css={styles.root} onClick={copy} onKeyDown={handleKeyDown} role=\"button\" tabIndex={0}>\n {children}\n </chakra.code>\n </BitkitTooltip>\n );\n }\n\n if (variant === 'single') {\n return (\n <chakra.div ref={ref} css={styles.root}>\n <chakra.code css={styles.content} tabIndex={-1}>\n {children}\n </chakra.code>\n <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n </chakra.div>\n );\n }\n\n const contentMaxHeight = hasShowMore && !isExpanded ? startingHeight : undefined;\n\n return (\n <chakra.div ref={ref} css={styles.root}>\n <chakra.code css={styles.content} maxHeight={contentMaxHeight} tabIndex={-1}>\n {children}\n </chakra.code>\n <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n {hasShowMore && (\n <chakra.div css={styles.showMoreContainer}>\n {!isExpanded && <chakra.div css={styles.showMoreGradient} />}\n <chakra.button onClick={handleToggleExpand} css={styles.showMoreButton}>\n {isExpanded ? 'Show less' : 'Show more'}\n <AssetSelectChevron data-state={isExpanded ? 'open' : 'closed'} />\n </chakra.button>\n </chakra.div>\n )}\n </chakra.div>\n );\n});\n\nBitkitCodeSnippet.displayName = 'BitkitCodeSnippet';\n\nexport default BitkitCodeSnippet;\n"],"mappings":";;;;;;;;;AAQA,IAAM,eAAe;AAsBrB,IAAM,oBAAoB,YAAiD,OAAO,QAAQ;CACxF,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM,gBAAgB,YAAY,YAAY;CAEpF,MAAM,cAAc,mBAAmB,KAAA;CACvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,EAAE,QAAQ,SAAS,aAAa;EAAE,SAAS;EAAM,OAAO,cAAc;EAAU,CAAC;CAGvF,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CAAC,CAC9B;EAAE;EAAM;EAAS;EAAa;EAAY;EAAa,CAAC;CAE9E,MAAM,2BAA2B;AAC/B,iBAAe,SAAS,CAAC,KAAK;;CAGhC,MAAM,iBAAiB,MAAqB;AAC1C,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,SAAM;;;CAIV,MAAM,aACJ,oBAAC,OAAO,QAAR;EAAe,cAAY;EAAc,KAAK,OAAO;EAAY,SAAS;EAAM,MAAK;YAClF,SAAS,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA,GAAG,oBAAC,UAAD,EAAU,MAAK,MAAO,CAAA;EAC5C,CAAA;AAGlB,KAAI,YAAY,UAAU;AACxB,MAAI,CAAC,YACH,QACE,oBAAC,OAAO,MAAR;GAAkB;GAAK,KAAK,OAAO;GAChC;GACW,CAAA;AAIlB,SACE,oBAAC,eAAD;GAAe,MAAM;aACnB,oBAAC,OAAO,MAAR;IAAkB;IAAK,KAAK,OAAO;IAAM,SAAS;IAAM,WAAW;IAAe,MAAK;IAAS,UAAU;IACvG;IACW,CAAA;GACA,CAAA;;AAIpB,KAAI,YAAY,SACd,QACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,KAAK,OAAO;YAAlC,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;GAAS,UAAU;GACzC;GACW,CAAA,EACd,oBAAC,eAAD;GAAe,MAAM;aAAe;GAA2B,CAAA,CACpD;;CAIjB,MAAM,mBAAmB,eAAe,CAAC,aAAa,iBAAiB,KAAA;AAEvE,QACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,KAAK,OAAO;YAAlC;GACE,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAS,WAAW;IAAkB,UAAU;IACtE;IACW,CAAA;GACd,oBAAC,eAAD;~~IAAe~~,MAAM;~~cAAe~~;~~IAA2B~~,CAAA;~~GAC9D~~,eACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cAAxB,CACG,CAAC,cAAc,oBAAC,OAAO,KAAR,EAAY,KAAK,OAAO,kBAAoB,CAAA,EAC5D,qBAAC,OAAO,QAAR;KAAe,SAAS;KAAoB,KAAK,OAAO;eAAxD,CACG,aAAa,cAAc,aAC5B,oBAAC,oBAAD,~~EAAoB,~~cAAY,aAAa,SAAS,~~UAAY~~,CAAA,~~CACpD~~;OACL;;GAEJ;;EAEf;AAEF,kBAAkB,cAAc"}
1	+ {"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface BaseProps {\n children: string;\n size?: 'md' \| 'lg';\n textToCopy?: string;\n}\n\ninterface InlineProps extends BaseProps {\n interactive?: boolean;\n startingHeight?: never;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n interactive?: never;\n startingHeight?: number;\n variant: 'multi' \| 'single';\n}\n\nexport type BitkitCodeSnippetProps = InlineProps \| BlockProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n const { children, interactive, size = 'lg', startingHeight, textToCopy, variant } = props;\n\n const hasShowMore = startingHeight !== undefined;\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { copied, copy } = useClipboard({ timeout: 2000, value: textToCopy ?? children });\n\n const recipe = useSlotRecipe({ key: 'codeSnippet' });\n const styles = recipe({ size, variant, hasShowMore, isExpanded, interactive });\n\n const handleToggleExpand = () => {\n setIsExpanded((prev) => !prev);\n };\n\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n copy();\n }\n };\n\n const copyButton = (\n <chakra.button aria-label={COPY_TOOLTIP} css={styles.copyButton} onClick={copy} type=\"button\">\n {copied ? <IconCheck size=\"16\" /> : <IconCopy size=\"16\" />}\n </chakra.button>\n );\n\n if (variant === 'inline') {\n if (!interactive) {\n return (\n <chakra.code ref={ref} css={styles.root}>\n {children}\n </chakra.code>\n );\n }\n\n return (\n <BitkitTooltip text={COPY_TOOLTIP}>\n <chakra.code ref={ref} css={styles.root} onClick={copy} onKeyDown={handleKeyDown} role=\"button\" tabIndex={0}>\n {children}\n </chakra.code>\n </BitkitTooltip>\n );\n }\n\n if (variant === 'single') {\n return (\n <chakra.div ref={ref} css={styles.root}>\n <chakra.code css={styles.content} tabIndex={-1}>\n {children}\n </chakra.code>\n <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n </chakra.div>\n );\n }\n\n const contentMaxHeight = hasShowMore && !isExpanded ? startingHeight : undefined;\n\n return (\n <chakra.div ref={ref} css={styles.root}>\n <chakra.code css={styles.content} maxHeight={contentMaxHeight} tabIndex={-1}>\n {children}\n </chakra.code>\n <chakra.div css={styles.copyButtonWrapper}>\n <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n </chakra.div>\n {hasShowMore && (\n <chakra.div css={styles.showMoreContainer}>\n {!isExpanded && <chakra.div css={styles.showMoreGradient} />}\n <chakra.button onClick={handleToggleExpand} css={styles.showMoreButton}>\n {isExpanded ? 'Show less' : 'Show more'}\n <AssetSelectChevron data-state={isExpanded ? 'open' : 'closed'} height=\"16\" width=\"16\" />\n </chakra.button>\n </chakra.div>\n )}\n </chakra.div>\n );\n});\n\nBitkitCodeSnippet.displayName = 'BitkitCodeSnippet';\n\nexport default BitkitCodeSnippet;\n"],"mappings":";;;;;;;;;AAQA,IAAM,eAAe;AAsBrB,IAAM,oBAAoB,YAAiD,OAAO,QAAQ;CACxF,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM,gBAAgB,YAAY,YAAY;CAEpF,MAAM,cAAc,mBAAmB,KAAA;CACvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,EAAE,QAAQ,SAAS,aAAa;EAAE,SAAS;EAAM,OAAO,cAAc;EAAU,CAAC;CAGvF,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CAAC,CAC9B;EAAE;EAAM;EAAS;EAAa;EAAY;EAAa,CAAC;CAE9E,MAAM,2BAA2B;AAC/B,iBAAe,SAAS,CAAC,KAAK;;CAGhC,MAAM,iBAAiB,MAAqB;AAC1C,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,SAAM;;;CAIV,MAAM,aACJ,oBAAC,OAAO,QAAR;EAAe,cAAY;EAAc,KAAK,OAAO;EAAY,SAAS;EAAM,MAAK;YAClF,SAAS,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA,GAAG,oBAAC,UAAD,EAAU,MAAK,MAAO,CAAA;EAC5C,CAAA;AAGlB,KAAI,YAAY,UAAU;AACxB,MAAI,CAAC,YACH,QACE,oBAAC,OAAO,MAAR;GAAkB;GAAK,KAAK,OAAO;GAChC;GACW,CAAA;AAIlB,SACE,oBAAC,eAAD;GAAe,MAAM;aACnB,oBAAC,OAAO,MAAR;IAAkB;IAAK,KAAK,OAAO;IAAM,SAAS;IAAM,WAAW;IAAe,MAAK;IAAS,UAAU;IACvG;IACW,CAAA;GACA,CAAA;;AAIpB,KAAI,YAAY,SACd,QACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,KAAK,OAAO;YAAlC,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;GAAS,UAAU;GACzC;GACW,CAAA,EACd,oBAAC,eAAD;GAAe,MAAM;aAAe;GAA2B,CAAA,CACpD;;CAIjB,MAAM,mBAAmB,eAAe,CAAC,aAAa,iBAAiB,KAAA;AAEvE,QACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,KAAK,OAAO;YAAlC;GACE,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAS,WAAW;IAAkB,UAAU;IACtE;IACW,CAAA;GACd,oBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cACtB,oBAAC,eAAD;KAAe,MAAM;eAAe;KAA2B,CAAA;IACpD,CAAA;GACZ,eACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cAAxB,CACG,CAAC,cAAc,oBAAC,OAAO,KAAR,EAAY,KAAK,OAAO,kBAAoB,CAAA,EAC5D,qBAAC,OAAO,QAAR;KAAe,SAAS;KAAoB,KAAK,OAAO;eAAxD,CACG,aAAa,cAAc,aAC5B,oBAAC,oBAAD;MAAoB,cAAY,aAAa,SAAS;MAAU,QAAO;MAAK,OAAM;MAAO,CAAA,CAC3E;OACL;;GAEJ;;EAEf;AAEF,kBAAkB,cAAc"}

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

@@ -1,14 +1,16 @@
 import { ComboboxRootProps } from '@chakra-ui/react/combobox';
 import { BitkitFieldProps } from '../BitkitField/BitkitField';
-import { BitkitSelectContentProps, BitkitSelectMenuCreateItemProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+import { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
 export type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
-    comboboxProps?: ComboboxRootProps;
-    contentProps?: BitkitSelectContentProps;
+    comboboxProps?: Omit<ComboboxRootProps, 'collection' | 'defaultValue' | 'onValueChange' | 'value'>;
+    defaultValue?: string;
     isLoading?: boolean;
     items: Array<BitkitSelectMenuItemProps>;
+    onValueChange?: (newVal: string | undefined) => void;
     placeholder?: string;
     size?: 'md' | 'lg';
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps;
+    value?: string;
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
 declare const BitkitCombobox: import('react').ForwardRefExoticComponent<BitkitComboboxProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitCombobox;

package/dist/components/BitkitCombobox/BitkitCombobox.js CHANGED Viewed

@@ -4,8 +4,6 @@ import IconWarningYellow from "../../icons/IconWarningYellow.js";
 import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
 import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
 import BitkitField from "../BitkitField/BitkitField.js";
-import { useSlotRecipe } from "@chakra-ui/react/styled-system";
-import { Text } from "@chakra-ui/react/text";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@chakra-ui/react/portal";
@@ -14,13 +12,13 @@ import { useListCollection } from "@chakra-ui/react/hooks";
 import { useFilter } from "@chakra-ui/react/locale";
 //#region lib/components/BitkitCombobox/BitkitCombobox.tsx
 var BitkitCombobox = forwardRef((props, ref) => {
-	const { comboboxProps, contentProps, createItemHref, createItemLabel, createItemProps, hasSearch, isLoading, items, onCreateItem, onSearchChange, placeholder = "Enter a value or select", size, state, ...fieldProps } = props;
+	const { comboboxProps, createItemLabel, defaultValue, emptyHelperText, emptyLabel, hasSearch, isLoading, items, onCreateItem, onSearchChange, onValueChange, placeholder = "Enter a value or select", searchValue, size, state, value, ...fieldProps } = props;
 	const { contains } = useFilter({ sensitivity: "base" });
 	const { collection, filter } = useListCollection({
 		initialItems: items,
-		filter: (_itemText, filterText, item) => contains(item.label, filterText)
+		filter: (_itemText, filterText, item) => contains(item.label, filterText),
+		isItemDisabled: (item) => !!item.disabled
 	});
-	const styles = useSlotRecipe({ key: "combobox" })({ size });
 	const hasWarning = state === "warning" || !!fieldProps.warningText;
 	const isInvalid = state === "error" || !!fieldProps.errorText;
 	const iconSize = size === "md" ? "16" : "24";
@@ -37,13 +35,17 @@ var BitkitCombobox = forwardRef((props, ref) => {
 		children: /* @__PURE__ */ jsxs(Combobox.Root, {
 			...comboboxProps,
 			collection,
+			defaultValue: defaultValue ? [defaultValue] : void 0,
 			disabled: state === "disabled",
 			invalid: isInvalid,
 			onInputValueChange: (e) => {
 				filter(e.inputValue);
 			},
+			onValueChange: (details) => onValueChange?.(details.value[0]),
 			readOnly: state === "readOnly",
+			scrollToIndexFn: ({ getElement }) => getElement()?.scrollIntoView({ block: "nearest" }),
 			size,
+			value: value ? [value] : void 0,
 			children: [/* @__PURE__ */ jsxs(Combobox.Control, {
 				className: "group",
 				children: [/* @__PURE__ */ jsx(Combobox.Input, { placeholder }), /* @__PURE__ */ jsxs(Combobox.IndicatorGroup, { children: [
@@ -57,24 +59,21 @@ var BitkitCombobox = forwardRef((props, ref) => {
 						children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
 					})
 				] })]
-			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsxs(Combobox.Empty, { children: ["No items found ", /* @__PURE__ */ jsx(Text, {
-				css: styles.emptyHelperText,
-				children: "Enter custom value"
-			})] }), /* @__PURE__ */ jsx(BitkitSelectMenu, {
+			}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
 				collection,
-				createItemHref,
 				createItemLabel,
-				createItemProps,
-				contentProps,
+				emptyHelperText,
+				emptyLabel,
 				isLoading,
 				onCreateItem,
 				size,
 				variant: "combobox",
 				...hasSearch ? {
 					hasSearch: true,
-					onSearchChange
+					onSearchChange,
+					searchValue
 				} : { hasSearch: false }
-			})] }) }) })]
+			}) }) })]
 		})
 	});
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useListCollection } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { ~~useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport {~~ forwardRef } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n type ~~BitkitSelectContentProps~~,\n type ~~BitkitSelectMenuCreateItemProps~~,\n type BitkitSelectMenuItemProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' \| 'state'> & {\n comboboxProps?: ComboboxRootProps;\n ~~contentProps~~?: ~~BitkitSelectContentProps~~;\n isLoading?: boolean;\n items: Array<BitkitSelectMenuItemProps>;\n placeholder?: string;\n size?: 'md' \| 'lg';\n state?: 'disabled' \| 'error' \| 'readOnly' \| 'warning';\n} & BitkitSelectMenuCreateItemProps &\n BitkitSelectMenuSearchProps;\n\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n const {\n comboboxProps,\n ~~contentProps~~,\n ~~createItemHref~~,\n ~~createItemLabel~~,\n ~~createItemProps~~,\n hasSearch,\n isLoading,\n items,\n onCreateItem,\n onSearchChange,\n placeholder = 'Enter a value or select',\n size,\n state,\n ...fieldProps\n } = props;\n\n const { contains } = useFilter({ sensitivity: 'base' });\n const { collection, filter } = useListCollection<BitkitSelectMenuItemProps>({\n initialItems: items,\n filter: (_itemText, filterText, item) => contains(item.label, filterText),\n ~~});\n\n const~~ ~~comboboxRecipe = useSlotRecipe~~({ ~~key:~~ ~~'combobox' });\~~n ~~const styles = comboboxRecipe({ size~~ });\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 disabled={state === 'disabled'}\n invalid={isInvalid}\n onInputValueChange={(e) => {\n filter(e.inputValue);\n }}\n readOnly={state === 'readOnly'}\n size={size}\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>\n <Combobox.Positioner>\n <~~Combobox.Content>\n <Combobox.Empty>\n No items found <Text css={styles.emptyHelperText}>Enter custom value</Text>\n </Combobox.Empty>\n <~~BitkitSelectMenu\n collection={collection}\n ~~createItemHref={createItemHref}\n~~ createItemLabel={createItemLabel}\n ~~createItemProps~~={~~createItemProps~~}\n ~~contentProps~~={~~contentProps~~}\n isLoading={isLoading}\n onCreateItem={onCreateItem}\n size={size}\n variant=\"combobox\"\n {...(hasSearch ? { hasSearch: true, onSearchChange } : { hasSearch: false as const })}\n />\n ~~</Combobox.Content>\n~~ </Combobox.Positioner>\n </Portal>\n </Combobox.Root>\n </BitkitField>\n );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\nexport default BitkitCombobox;\n"],"mappings":"~~;;;;;;;;;;;;;;;AA+BA~~,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,eACA,cACA,~~gBACA,~~iBACA,~~iBACA~~,WACA,WACA,OACA,cACA,gBACA,cAAc,2BACd,MACA,OACA,GAAG,eACD;CAEJ,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,QAAQ,CAAC;CACvD,MAAM,EAAE,YAAY,WAAW,kBAA6C;EAC1E,cAAc;EACd,SAAS,WAAW,YAAY,SAAS,SAAS,KAAK,OAAO,WAAW;~~EAC1E~~,~~CAAC;CAGF~~,~~MAAM~~,~~SADiB~~,~~cAAc~~,~~EAAE,~~KAAK,~~YAAY,~~CAAC~~,CAC3B,EAAE,MAAM,CAAC~~;~~CAEvC~~,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,IAAI;AACJ,KAAI,UACF,cAAa,oBAAC,uBAAD;EAAuB,MAAM;EAAU,OAAM;EAAkB,CAAA;UACnE,WACT,cAAa,oBAAC,mBAAD,EAAmB,MAAM,UAAY,CAAA;AAGpD,QACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,SAAS,MAAV;GACE,GAAI;GACQ;GACZ,UAAU,UAAU;GACpB,SAAS;GACT,qBAAqB,MAAM;AACzB,WAAO,EAAE,WAAW;;GAEtB,UAAU,UAAU;~~GACd~~;~~aATR~~,~~CAWE~~,qBAAC,SAAS,SAAV;IAAkB,WAAU;cAA5B,CACE,oBAAC,SAAS,OAAV,EAA6B,aAAe,CAAA,EAC5C,qBAAC,SAAS,gBAAV,EAAA,UAAA;KACE,oBAAC,SAAS,cAAV;MAAuB,SAAA;gBACrB,oBAAC,mBAAD,EAAmB,MAAK,MAAO,CAAA;MACT,CAAA;KACvB;KACD,oBAAC,SAAS,SAAV;MAAkB,SAAA;gBAChB,oBAAC,oBAAD,EAAsB,CAAA;MACL,CAAA;KACK,EAAA,CAAA,CACT;OACnB,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAS,YAAV,EAAA,UACE,~~qBAAC,SAAS,SAAV,EAAA,UAAA,CACE,qBAAC,SAAS,OAAV,EAAA,UAAA,CAAgB,mBACC,~~oBAAC,~~MAAD;IAAM,KAAK,OAAO;cAAiB;IAAyB,CAAA,CAC5D,EAAA,CAAA,EACjB,oBAAC,~~kBAAD;IACc;~~IACI~~;~~IACC;~~IACA;~~IACH~~;~~IACH~~;IACG;IACR;IACN,SAAQ;IACR,GAAK,~~YAAY~~;KAAE,WAAW;~~KAAM~~;KAAgB,~~GAAG~~,EAAE,WAAW,OAAgB;~~IACpF~~,CAAA,~~CACe~~,~~EAAA,~~CAAA,~~EACC,CAAA,~~EACf,CAAA,CACK;;EACJ,CAAA;EAEhB;AAEF,eAAe,cAAc"}
1	+ {"version":3,"file":"BitkitCombobox.js","names":[],"sources":["../../../lib/components/BitkitCombobox/BitkitCombobox.tsx"],"sourcesContent":["import { Combobox, type ComboboxRootProps } from '@chakra-ui/react/combobox';\nimport { useListCollection } from '@chakra-ui/react/hooks';\nimport { useFilter } from '@chakra-ui/react/locale';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { forwardRef } from 'react';\n\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n type BitkitSelectMenuCreateItemProps,\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuItemProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\n\nexport type BitkitComboboxProps = Omit<BitkitFieldProps, 'children' \| 'state'> & {\n comboboxProps?: Omit<ComboboxRootProps, 'collection' \| 'defaultValue' \| 'onValueChange' \| 'value'>;\n defaultValue?: string;\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} & BitkitSelectMenuCreateItemProps &\n BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\nconst BitkitCombobox = forwardRef<HTMLDivElement, BitkitComboboxProps>((props: BitkitComboboxProps, ref) => {\n const {\n comboboxProps,\n createItemLabel,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n hasSearch,\n isLoading,\n items,\n onCreateItem,\n onSearchChange,\n onValueChange,\n placeholder = 'Enter a value or select',\n searchValue,\n size,\n state,\n value,\n ...fieldProps\n } = props;\n\n const { contains } = useFilter({ sensitivity: 'base' });\n const { collection, filter } = useListCollection<BitkitSelectMenuItemProps>({\n initialItems: items,\n filter: (_itemText, filterText, item) => contains(item.label, filterText),\n isItemDisabled: (item) => !!item.disabled,\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 invalid={isInvalid}\n onInputValueChange={(e) => {\n filter(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 value={value ? [value] : undefined}\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>\n <Combobox.Positioner>\n <BitkitSelectMenu\n collection={collection}\n createItemLabel={createItemLabel}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onCreateItem={onCreateItem}\n size={size}\n variant=\"combobox\"\n {...(hasSearch\n ? { hasSearch: true as const, onSearchChange, searchValue }\n : { hasSearch: false as const })}\n />\n </Combobox.Positioner>\n </Portal>\n </Combobox.Root>\n </BitkitField>\n );\n});\n\nBitkitCombobox.displayName = 'BitkitCombobox';\n\nexport default BitkitCombobox;\n"],"mappings":";;;;;;;;;;;;;AAgCA,IAAM,iBAAiB,YAAiD,OAA4B,QAAQ;CAC1G,MAAM,EACJ,eACA,iBACA,cACA,iBACA,YACA,WACA,WACA,OACA,cACA,gBACA,eACA,cAAc,2BACd,aACA,MACA,OACA,OACA,GAAG,eACD;CAEJ,MAAM,EAAE,aAAa,UAAU,EAAE,aAAa,QAAQ,CAAC;CACvD,MAAM,EAAE,YAAY,WAAW,kBAA6C;EAC1E,cAAc;EACd,SAAS,WAAW,YAAY,SAAS,SAAS,KAAK,OAAO,WAAW;EACzE,iBAAiB,SAAS,CAAC,CAAC,KAAK;EAClC,CAAC;CAEF,MAAM,aAAa,UAAU,aAAa,CAAC,CAAC,WAAW;CACvD,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;CACpD,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,IAAI;AACJ,KAAI,UACF,cAAa,oBAAC,uBAAD;EAAuB,MAAM;EAAU,OAAM;EAAkB,CAAA;UACnE,WACT,cAAa,oBAAC,mBAAD,EAAmB,MAAM,UAAY,CAAA;AAGpD,QACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,SAAS,MAAV;GACE,GAAI;GACQ;GACZ,cAAc,eAAe,CAAC,aAAa,GAAG,KAAA;GAC9C,UAAU,UAAU;GACpB,SAAS;GACT,qBAAqB,MAAM;AACzB,WAAO,EAAE,WAAW;;GAEtB,gBAAgB,YAAY,gBAAgB,QAAQ,MAAM,GAAG;GAC7D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,YAAY,EAAE,eAAe,EAAE,OAAO,WAAW,CAAC;GACjF;GACN,OAAO,QAAQ,CAAC,MAAM,GAAG,KAAA;aAf3B,CAiBE,qBAAC,SAAS,SAAV;IAAkB,WAAU;cAA5B,CACE,oBAAC,SAAS,OAAV,EAA6B,aAAe,CAAA,EAC5C,qBAAC,SAAS,gBAAV,EAAA,UAAA;KACE,oBAAC,SAAS,cAAV;MAAuB,SAAA;gBACrB,oBAAC,mBAAD,EAAmB,MAAK,MAAO,CAAA;MACT,CAAA;KACvB;KACD,oBAAC,SAAS,SAAV;MAAkB,SAAA;gBAChB,oBAAC,oBAAD,EAAsB,CAAA;MACL,CAAA;KACK,EAAA,CAAA,CACT;OACnB,oBAAC,QAAD,EAAA,UACE,oBAAC,SAAS,YAAV,EAAA,UACE,oBAAC,kBAAD;IACc;IACK;IACA;IACL;IACD;IACG;IACR;IACN,SAAQ;IACR,GAAK,YACD;KAAE,WAAW;KAAe;KAAgB;KAAa,GACzD,EAAE,WAAW,OAAgB;IACjC,CAAA,EACkB,CAAA,EACf,CAAA,CACK;;EACJ,CAAA;EAEhB;AAEF,eAAe,cAAc"}

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

@@ -0,0 +1,19 @@
+import { SelectRootProps, SelectTriggerProps } from '@chakra-ui/react/select';
+import { BitkitFieldProps } from '../BitkitField/BitkitField';
+import { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu';
+export type BitkitMultiselectTriggerProps = SelectTriggerProps;
+export type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
+    constrained?: boolean;
+    defaultValue?: Array<string>;
+    isLoading?: boolean;
+    items: Array<BitkitSelectMenuItemProps>;
+    onValueChange?: (newVal: Array<string>) => void;
+    placeholder?: string;
+    selectProps?: Omit<SelectRootProps, 'collection' | 'defaultValue' | 'multiple' | 'onValueChange' | 'value'>;
+    size?: 'md' | 'lg';
+    state?: 'disabled' | 'error' | 'readOnly' | 'warning';
+    triggerProps?: BitkitMultiselectTriggerProps;
+    value?: Array<string>;
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
+declare const BitkitMultiselect: import('react').ForwardRefExoticComponent<BitkitMultiselectProps & import('react').RefAttributes<HTMLDivElement>>;
+export default BitkitMultiselect;

package/dist/components/BitkitMultiselect/BitkitMultiselect.js ADDED Viewed

@@ -0,0 +1,184 @@
+import AssetSelectChevron from "../../utilities/AssetSelectChevron.js";
+import IconErrorCircleFilled from "../../icons/IconErrorCircleFilled.js";
+import IconWarningYellow from "../../icons/IconWarningYellow.js";
+import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
+import BitkitSelectMenu from "../BitkitSelectMenu/BitkitSelectMenu.js";
+import BitkitField from "../BitkitField/BitkitField.js";
+import BitkitTag from "../BitkitTag/BitkitTag.js";
+import { Box } from "@chakra-ui/react/box";
+import { useSlotRecipe } from "@chakra-ui/react/styled-system";
+import { Text } from "@chakra-ui/react/text";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Portal } from "@chakra-ui/react/portal";
+import { createListCollection } from "@chakra-ui/react/collection";
+import { Select, useSelectContext } from "@chakra-ui/react/select";
+//#region lib/components/BitkitMultiselect/BitkitMultiselect.tsx
+var NON_INTERACTIVE_STATES = [
+	"disabled",
+	"readOnly",
+	"error",
+	"warning"
+];
+/** 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 }) => {
+	const select = useSelectContext();
+	const styles = useSlotRecipe({ key: "multiselect" })({
+		constrained,
+		size
+	});
+	const selectedItems = select.selectedItems;
+	const selectedValues = select.value;
+	const isDisabled = state === "disabled";
+	const isReadOnly = state === "readOnly";
+	const tagState = isDisabled ? "disabled" : void 0;
+	const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? "96" : "48";
+	const resolvedPlaceholder = placeholder ?? (isReadOnly ? "(not selected)" : "Select options");
+	const canRemove = !isDisabled && !isReadOnly;
+	const hasSelection = selectedValues.length > 0;
+	const renderTags = () => {
+		if (constrained) return /* @__PURE__ */ jsxs(Fragment$1, { children: [hasSelection && /* @__PURE__ */ jsx(TagSlot, { children: /* @__PURE__ */ jsx(BitkitTag, {
+			size: "sm",
+			colorPalette: "neutral",
+			labelText: String(selectedValues.length),
+			state: tagState,
+			onRemove: canRemove ? () => select.clearValue() : void 0
+		}) }), /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			css: styles.placeholderText,
+			"data-placeholder": hasSelection ? void 0 : "",
+			children: resolvedPlaceholder
+		})] });
+		if (selectedItems.length === 0) return /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			css: styles.placeholderText,
+			"data-placeholder": "",
+			children: resolvedPlaceholder
+		});
+		return selectedItems.map((item) => /* @__PURE__ */ jsx(TagSlot, { children: /* @__PURE__ */ jsx(BitkitTag, {
+			size: "sm",
+			colorPalette: "neutral",
+			labelText: item.label,
+			state: tagState,
+			onRemove: canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : void 0
+		}) }, item.value));
+	};
+	return /* @__PURE__ */ jsx(Box, {
+		css: styles.overlay,
+		pointerEvents: "none",
+		paddingInlineEnd: overlayPaddingEnd,
+		children: /* @__PURE__ */ jsx(Box, {
+			css: styles.tagsBlock,
+			children: renderTags()
+		})
+	});
+};
+var TagSlot = ({ children }) => /* @__PURE__ */ jsx(Box, {
+	"data-slot": "tag",
+	display: "inline-flex",
+	pointerEvents: "auto",
+	children
+});
+var ClearAllButton = ({ state }) => {
+	const select = useSelectContext();
+	if (!shouldShowClearButton(false, select.value.length, state)) return null;
+	return /* @__PURE__ */ jsx(BitkitCloseButton, {
+		size: "sm",
+		colorPalette: "neutral",
+		"aria-label": "Clear all",
+		onClick: () => select.clearValue()
+	});
+};
+var BitkitMultiselect = forwardRef((props, ref) => {
+	const { constrained = false, createItemLabel, defaultValue, emptyHelperText, emptyLabel, hasSearch, isLoading, items, onCreateItem, onSearchChange, onValueChange, placeholder, searchValue, selectProps, size = "lg", state, triggerProps, value, ...fieldProps } = props;
+	const collection = createListCollection({
+		items,
+		groupBy: (item) => item.group || "",
+		isItemDisabled: (item) => !!item.disabled
+	});
+	const styles = useSlotRecipe({ key: "multiselect" })({
+		constrained,
+		size
+	});
+	const iconSize = size === "lg" ? "24" : "16";
+	const isInvalid = state === "error" || !!fieldProps.errorText;
+	return /* @__PURE__ */ jsx(BitkitField, {
+		ref,
+		state,
+		...fieldProps,
+		children: /* @__PURE__ */ jsxs(Select.Root, {
+			collection,
+			multiple: true,
+			...selectProps,
+			defaultValue,
+			disabled: state === "disabled",
+			invalid: isInvalid,
+			onValueChange: (details) => onValueChange?.(details.value),
+			readOnly: state === "readOnly",
+			scrollToIndexFn: ({ getElement }) => getElement()?.scrollIntoView({ block: "nearest" }),
+			value,
+			children: [
+				/* @__PURE__ */ jsx(Select.HiddenSelect, {}),
+				/* @__PURE__ */ jsxs(Select.Control, {
+					css: styles.control,
+					className: "group",
+					children: [
+						/* @__PURE__ */ jsx(Select.Trigger, {
+							css: styles.trigger,
+							...triggerProps
+						}),
+						/* @__PURE__ */ jsx(MultiselectOverlay, {
+							constrained,
+							placeholder,
+							size,
+							state
+						}),
+						/* @__PURE__ */ jsxs(Select.IndicatorGroup, {
+							css: styles.indicatorGroup,
+							children: [
+								!constrained && /* @__PURE__ */ jsx(ClearAllButton, { state }),
+								state === "error" && /* @__PURE__ */ jsx(Select.Indicator, {
+									css: styles.indicator,
+									children: /* @__PURE__ */ jsx(IconErrorCircleFilled, {
+										size: iconSize,
+										color: "icon/negative"
+									})
+								}),
+								state === "warning" && /* @__PURE__ */ jsx(Select.Indicator, {
+									css: styles.indicator,
+									children: /* @__PURE__ */ jsx(IconWarningYellow, { size: iconSize })
+								}),
+								/* @__PURE__ */ jsx(Select.Indicator, {
+									css: styles.indicator,
+									asChild: true,
+									children: /* @__PURE__ */ jsx(AssetSelectChevron, {})
+								})
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
+					collection,
+					createItemLabel,
+					emptyHelperText,
+					emptyLabel,
+					isLoading,
+					multiple: true,
+					onCreateItem,
+					...hasSearch ? {
+						hasSearch: true,
+						onSearchChange,
+						searchValue
+					} : { hasSearch: false },
+					size
+				}) }) })
+			]
+		})
+	});
+});
+BitkitMultiselect.displayName = "BitkitMultiselect";
+//#endregion
+export { BitkitMultiselect as default };
+//# sourceMappingURL=BitkitMultiselect.js.map

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

@@ -0,0 +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 } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitSelectMenu, {\n type BitkitSelectMenuCreateItemProps,\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuItemProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {\n constrained?: boolean;\n defaultValue?: Array<string>;\n isLoading?: boolean;\n items: Array<BitkitSelectMenuItemProps>;\n onValueChange?: (newVal: Array<string>) => void;\n placeholder?: string;\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} & BitkitSelectMenuCreateItemProps &\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<BitkitSelectMenuItemProps>;\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 colorPalette=\"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 colorPalette=\"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\" colorPalette=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n const {\n constrained = false,\n createItemLabel,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n hasSearch,\n isLoading,\n items,\n onCreateItem,\n onSearchChange,\n onValueChange,\n placeholder,\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 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>\n <Select.Positioner>\n <BitkitSelectMenu\n collection={collection}\n createItemLabel={createItemLabel}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n multiple\n onCreateItem={onCreateItem}\n {...(hasSearch\n ? { hasSearch: true as const, onSearchChange, searchValue }\n : { hasSearch: false as const })}\n size={size}\n />\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default BitkitMultiselect;\n"],"mappings":"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"}

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

@@ -1,9 +1,8 @@
 import { SelectRootProps, SelectTriggerProps } from '@chakra-ui/react/select';
 import { BitkitFieldProps } from '../BitkitField/BitkitField.tsx';
-import { BitkitSelectContentProps, BitkitSelectMenuCreateItemProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
+import { BitkitSelectMenuCreateItemProps, BitkitSelectMenuEmptyStateProps, BitkitSelectMenuItemProps, BitkitSelectMenuSearchProps } from '../BitkitSelectMenu/BitkitSelectMenu.tsx';
 export type BitkitSelectTriggerProps = SelectTriggerProps;
 export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
-    contentProps?: BitkitSelectContentProps;
     defaultValue?: string;
     isLoading?: boolean;
     items: Array<BitkitSelectMenuItemProps>;
@@ -14,6 +13,6 @@ export type BitkitSelectProps = Omit<BitkitFieldProps, 'children' | 'state'> & {
     state?: 'disabled' | 'error' | 'readOnly' | 'warning';
     triggerProps?: BitkitSelectTriggerProps;
     value?: string;
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps;
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
 declare const BitkitSelect: import('react').ForwardRefExoticComponent<BitkitSelectProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitSelect;

package/dist/components/BitkitSelect/BitkitSelect.js CHANGED Viewed

@@ -26,11 +26,13 @@ var SelectValue = ({ placeholder, state, size }) => {
 	}) : /* @__PURE__ */ jsx(Select.ValueText, { placeholder: placeholder ?? (state === "readOnly" ? "(not selected)" : "Select an option") });
 };
 var BitkitSelect = forwardRef((props, ref) => {
-	const { contentProps, createItemHref, createItemLabel, createItemProps, defaultValue, hasSearch, isLoading, items, onCreateItem, onSearchChange, onValueChange, placeholder, selectProps, size = "md", state, triggerProps, value, ...fieldProps } = props;
+	const { createItemLabel, defaultValue, emptyHelperText, emptyLabel, hasSearch, isLoading, items, onCreateItem, onSearchChange, onValueChange, searchValue, placeholder, selectProps, size = "md", state, triggerProps, value, ...fieldProps } = props;
 	const collection = createListCollection({
 		items,
-		groupBy: (item) => item.group || ""
+		groupBy: (item) => item.group || "",
+		isItemDisabled: (item) => !!item.disabled
 	});
+	const isInvalid = state === "error" || !!fieldProps.errorText;
 	return /* @__PURE__ */ jsx(BitkitField, {
 		ref,
 		state,
@@ -40,7 +42,11 @@ var BitkitSelect = forwardRef((props, ref) => {
 			size,
 			...selectProps,
 			defaultValue: defaultValue ? [defaultValue] : void 0,
+			disabled: state === "disabled",
+			invalid: isInvalid,
 			onValueChange: (newVal) => onValueChange?.(newVal.value[0]),
+			readOnly: state === "readOnly",
+			scrollToIndexFn: ({ getElement }) => getElement()?.scrollIntoView({ block: "nearest" }),
 			value: value ? [value] : void 0,
 			children: [
 				/* @__PURE__ */ jsx(Select.HiddenSelect, {}),
@@ -67,15 +73,15 @@ var BitkitSelect = forwardRef((props, ref) => {
 				}),
 				/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(BitkitSelectMenu, {
 					collection,
-					createItemHref,
 					createItemLabel,
-					createItemProps,
-					contentProps,
+					emptyHelperText,
+					emptyLabel,
 					isLoading,
 					onCreateItem,
 					...hasSearch ? {
 						hasSearch: true,
-						onSearchChange
+						onSearchChange,
+						searchValue
 					} : { hasSearch: false },
 					size
 				}) }) })

package/dist/components/BitkitSelect/BitkitSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.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 { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n type ~~BitkitSelectContentProps~~,\n type ~~BitkitSelectMenuCreateItemProps~~,\n type BitkitSelectMenuItemProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' \| 'state'> & {\n ~~contentProps?: BitkitSelectContentProps;\n~~ defaultValue?: string;\n isLoading?: boolean;\n items: Array<BitkitSelectMenuItemProps>;\n onValueChange?: (newVal: string) => void;\n placeholder?: string;\n selectProps?: Omit<SelectRootProps, 'collection' \| 'defaultValue' \| 'onValueChange' \| 'value'>;\n size?: 'md' \| 'lg';\n state?: 'disabled' \| 'error' \| 'readOnly' \| 'warning';\n triggerProps?: BitkitSelectTriggerProps;\n value?: string;\n} & BitkitSelectMenuCreateItemProps &\n BitkitSelectMenuSearchProps;\n\ntype SelectValueProps = {\n placeholder?: string;\n size: BitkitSelectProps['size'];\n state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n const select = useSelectContext();\n const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n const Icon = items[0]?.icon;\n const label = items[0]?.label;\n\n const iconSize = size === 'md' ? '16' : '24';\n\n return items[0] ? (\n <Select.ValueText placeholder={placeholder \|\| state === 'readOnly' ? '(not selected)' : 'Select an option'}>\n <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n {Icon && <Icon size={iconSize} />}\n {label}\n </Box>\n </Select.ValueText>\n ) : (\n <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')} />\n );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n const {\n ~~contentProps~~,\n ~~createItemHref~~,\n ~~createItemLabel~~,\n ~~createItemProps~~,\n ~~defaultValue,\n~~ hasSearch,\n isLoading,\n items,\n onCreateItem,\n onSearchChange,\n onValueChange,\n placeholder,\n selectProps,\n size = 'md',\n state,\n triggerProps,\n value,\n ...fieldProps\n } = props;\n\n const collection = createListCollection({\n items,\n groupBy: (item) => item.group \|\| '',\n });\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <Select.Root\n collection={collection}\n size={size}\n {...selectProps}\n defaultValue={defaultValue ? [defaultValue] : undefined}\n onValueChange={(newVal) => onValueChange?.(newVal.value[0])}\n value={value ? [value] : undefined}\n >\n <Select.HiddenSelect />\n <Select.Control className=\"group\">\n <Select.Trigger {...triggerProps}>\n <SelectValue placeholder={placeholder} size={size} state={state} />\n </Select.Trigger>\n <Select.IndicatorGroup>\n {state === 'error' && (\n <Select.Indicator>\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {state === 'warning' && (\n <Select.Indicator>\n <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n </Select.Indicator>\n )}\n <Select.Indicator asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal>\n <Select.Positioner>\n <BitkitSelectMenu\n collection={collection}\n ~~createItemHref={createItemHref}\n~~ createItemLabel={createItemLabel}\n ~~createItemProps~~={~~createItemProps~~}\n ~~contentProps~~={~~contentProps~~}\n isLoading={isLoading}\n onCreateItem={onCreateItem}\n {...(hasSearch ? { hasSearch: true, onSearchChange } : { hasSearch: false as const })}\n size={size}\n />\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default BitkitSelect;\n"],"mappings":";;;;;;;;;;;;AAuCA,IAAM,eAAe,EAAE,aAAa,OAAO,WAA6B;CAEtE,MAAM,QADS,kBAAkB,CACZ;CAErB,MAAM,OAAO,MAAM,IAAI;CACvB,MAAM,QAAQ,MAAM,IAAI;CAExB,MAAM,WAAW,SAAS,OAAO,OAAO;AAExC,QAAO,MAAM,KACX,oBAAC,OAAO,WAAR;EAAkB,aAAa,eAAe,UAAU,aAAa,mBAAmB;YACtF,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;aAA5C,CACG,QAAQ,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA,EAChC,MACG;;EACW,CAAA,GAEnB,oBAAC,OAAO,WAAR,EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB,qBAAuB,CAAA;;AAIpH,IAAM,eAAe,YAA+C,OAA0B,QAAQ;CACpG,MAAM,EACJ,cACA,~~gBACA,~~iBACA,~~iBACA~~,~~cACA,~~WACA,WACA,OACA,cACA,gBACA,eACA,aACA,aACA,OAAO,MACP,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EAClC,CAAC;~~AAEF~~,QACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,OAAO,MAAR;GACc;GACN;GACN,GAAI;GACJ,cAAc,eAAe,CAAC,aAAa,GAAG,KAAA;GAC9C,gBAAgB,WAAW,gBAAgB,OAAO,MAAM,GAAG;GAC3D,OAAO,QAAQ,CAAC,MAAM,GAAG,KAAA;~~aAN3B~~;~~IAQE~~,oBAAC,OAAO,cAAR,EAAuB,CAAA;IACvB,qBAAC,OAAO,SAAR;KAAgB,WAAU;eAA1B,CACE,oBAAC,OAAO,SAAR;MAAgB,GAAI;gBAClB,oBAAC,aAAD;OAA0B;OAAmB;OAAa;OAAS,CAAA;MACpD,CAAA,EACjB,qBAAC,OAAO,gBAAR,EAAA,UAAA;MACG,UAAU,WACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,uBAAD;OAAuB,MAAM,SAAS,OAAO,OAAO;OAAM,OAAM;OAAkB,CAAA,EACjE,CAAA;MAEpB,UAAU,aACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,MAAQ,CAAA,EACvC,CAAA;MAErB,oBAAC,OAAO,WAAR;OAAkB,SAAA;iBAChB,oBAAC,oBAAD,EAAsB,CAAA;OACL,CAAA;MACG,EAAA,CAAA,CACT;;IACjB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;KACc;~~KACI~~;~~KACC;~~KACA;~~KACH~~;~~KACH~~;KACG;KACd,GAAK,~~YAAY~~;MAAE,WAAW;~~MAAM~~;MAAgB,~~GAAG~~,EAAE,WAAW,OAAgB;~~KAC9E~~;KACN,CAAA,EACgB,CAAA,EACb,CAAA;IACG;;EACF,CAAA;EAEhB;AAEF,aAAa,cAAc"}
1	+ {"version":3,"file":"BitkitSelect.js","names":[],"sources":["../../../lib/components/BitkitSelect/BitkitSelect.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 { forwardRef } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron.tsx';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField.tsx';\nimport BitkitSelectMenu, {\n type BitkitSelectMenuCreateItemProps,\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuItemProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu.tsx';\n\nexport type BitkitSelectTriggerProps = SelectTriggerProps;\n\nexport type BitkitSelectProps = Omit<BitkitFieldProps, 'children' \| 'state'> & {\n defaultValue?: string;\n isLoading?: boolean;\n items: Array<BitkitSelectMenuItemProps>;\n onValueChange?: (newVal: string) => void;\n placeholder?: string;\n selectProps?: Omit<SelectRootProps, 'collection' \| 'defaultValue' \| 'onValueChange' \| 'value'>;\n size?: 'md' \| 'lg';\n state?: 'disabled' \| 'error' \| 'readOnly' \| 'warning';\n triggerProps?: BitkitSelectTriggerProps;\n value?: string;\n} & BitkitSelectMenuCreateItemProps &\n BitkitSelectMenuSearchProps &\n BitkitSelectMenuEmptyStateProps;\n\ntype SelectValueProps = {\n placeholder?: string;\n size: BitkitSelectProps['size'];\n state?: BitkitSelectProps['state'];\n};\n\nconst SelectValue = ({ placeholder, state, size }: SelectValueProps) => {\n const select = useSelectContext();\n const items = select.selectedItems as Array<BitkitSelectMenuItemProps>;\n\n const Icon = items[0]?.icon;\n const label = items[0]?.label;\n\n const iconSize = size === 'md' ? '16' : '24';\n\n return items[0] ? (\n <Select.ValueText placeholder={placeholder \|\| state === 'readOnly' ? '(not selected)' : 'Select an option'}>\n <Box display=\"flex\" alignItems=\"center\" gap=\"8\">\n {Icon && <Icon size={iconSize} />}\n {label}\n </Box>\n </Select.ValueText>\n ) : (\n <Select.ValueText placeholder={placeholder ?? (state === 'readOnly' ? '(not selected)' : 'Select an option')} />\n );\n};\n\nconst BitkitSelect = forwardRef<HTMLDivElement, BitkitSelectProps>((props: BitkitSelectProps, ref) => {\n const {\n createItemLabel,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n hasSearch,\n isLoading,\n items,\n onCreateItem,\n onSearchChange,\n onValueChange,\n searchValue,\n placeholder,\n selectProps,\n size = 'md',\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 isInvalid = state === 'error' \|\| !!fieldProps.errorText;\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <Select.Root\n collection={collection}\n size={size}\n {...selectProps}\n defaultValue={defaultValue ? [defaultValue] : undefined}\n disabled={state === 'disabled'}\n invalid={isInvalid}\n onValueChange={(newVal) => onValueChange?.(newVal.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 value={value ? [value] : undefined}\n >\n <Select.HiddenSelect />\n <Select.Control className=\"group\">\n <Select.Trigger {...triggerProps}>\n <SelectValue placeholder={placeholder} size={size} state={state} />\n </Select.Trigger>\n <Select.IndicatorGroup>\n {state === 'error' && (\n <Select.Indicator>\n <IconErrorCircleFilled size={size === 'lg' ? '24' : '16'} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {state === 'warning' && (\n <Select.Indicator>\n <IconWarningYellow size={size === 'lg' ? '24' : '16'} />\n </Select.Indicator>\n )}\n <Select.Indicator asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal>\n <Select.Positioner>\n <BitkitSelectMenu\n collection={collection}\n createItemLabel={createItemLabel}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onCreateItem={onCreateItem}\n {...(hasSearch\n ? { hasSearch: true as const, onSearchChange, searchValue }\n : { hasSearch: false as const })}\n size={size}\n />\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitSelect.displayName = 'BitkitSelect';\n\nexport default BitkitSelect;\n"],"mappings":";;;;;;;;;;;;AAuCA,IAAM,eAAe,EAAE,aAAa,OAAO,WAA6B;CAEtE,MAAM,QADS,kBAAkB,CACZ;CAErB,MAAM,OAAO,MAAM,IAAI;CACvB,MAAM,QAAQ,MAAM,IAAI;CAExB,MAAM,WAAW,SAAS,OAAO,OAAO;AAExC,QAAO,MAAM,KACX,oBAAC,OAAO,WAAR;EAAkB,aAAa,eAAe,UAAU,aAAa,mBAAmB;YACtF,qBAAC,KAAD;GAAK,SAAQ;GAAO,YAAW;GAAS,KAAI;aAA5C,CACG,QAAQ,oBAAC,MAAD,EAAM,MAAM,UAAY,CAAA,EAChC,MACG;;EACW,CAAA,GAEnB,oBAAC,OAAO,WAAR,EAAkB,aAAa,gBAAgB,UAAU,aAAa,mBAAmB,qBAAuB,CAAA;;AAIpH,IAAM,eAAe,YAA+C,OAA0B,QAAQ;CACpG,MAAM,EACJ,iBACA,cACA,iBACA,YACA,WACA,WACA,OACA,cACA,gBACA,eACA,aACA,aACA,aACA,OAAO,MACP,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EACjC,iBAAiB,SAAS,CAAC,CAAC,KAAK;EAClC,CAAC;CAEF,MAAM,YAAY,UAAU,WAAW,CAAC,CAAC,WAAW;AAEpD,QACE,oBAAC,aAAD;EAAkB;EAAY;EAAO,GAAI;YACvC,qBAAC,OAAO,MAAR;GACc;GACN;GACN,GAAI;GACJ,cAAc,eAAe,CAAC,aAAa,GAAG,KAAA;GAC9C,UAAU,UAAU;GACpB,SAAS;GACT,gBAAgB,WAAW,gBAAgB,OAAO,MAAM,GAAG;GAC3D,UAAU,UAAU;GAGpB,kBAAkB,EAAE,iBAAiB,YAAY,EAAE,eAAe,EAAE,OAAO,WAAW,CAAC;GACvF,OAAO,QAAQ,CAAC,MAAM,GAAG,KAAA;aAZ3B;IAcE,oBAAC,OAAO,cAAR,EAAuB,CAAA;IACvB,qBAAC,OAAO,SAAR;KAAgB,WAAU;eAA1B,CACE,oBAAC,OAAO,SAAR;MAAgB,GAAI;gBAClB,oBAAC,aAAD;OAA0B;OAAmB;OAAa;OAAS,CAAA;MACpD,CAAA,EACjB,qBAAC,OAAO,gBAAR,EAAA,UAAA;MACG,UAAU,WACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,uBAAD;OAAuB,MAAM,SAAS,OAAO,OAAO;OAAM,OAAM;OAAkB,CAAA,EACjE,CAAA;MAEpB,UAAU,aACT,oBAAC,OAAO,WAAR,EAAA,UACE,oBAAC,mBAAD,EAAmB,MAAM,SAAS,OAAO,OAAO,MAAQ,CAAA,EACvC,CAAA;MAErB,oBAAC,OAAO,WAAR;OAAkB,SAAA;iBAChB,oBAAC,oBAAD,EAAsB,CAAA;OACL,CAAA;MACG,EAAA,CAAA,CACT;;IACjB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,kBAAD;KACc;KACK;KACA;KACL;KACD;KACG;KACd,GAAK,YACD;MAAE,WAAW;MAAe;MAAgB;MAAa,GACzD,EAAE,WAAW,OAAgB;KAC3B;KACN,CAAA,EACgB,CAAA,EACb,CAAA;IACG;;EACF,CAAA;EAEhB;AAEF,aAAa,cAAc"}

package/dist/components/BitkitSelectMenu/BitkitSelectMenu.d.ts CHANGED Viewed

@@ -1,35 +1,46 @@
 import { ListCollection } from '@chakra-ui/react/collection';
 import { SelectContentProps } from '@chakra-ui/react/select';
-import { AnchorHTMLAttributes } from 'react';
 import { BitkitIconComponent } from '../../icons';
 export type BitkitSelectMenuCreateItemProps = {
-    createItemHref?: string;
     createItemLabel?: string;
-    createItemProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
     onCreateItem?: () => void;
 };
 export type BitkitSelectMenuSearchProps = {
     hasSearch?: boolean;
 } & ({
     hasSearch: true;
-    onSearchChange?: (searchText: string) => void;
+    onSearchChange: (searchText: string) => void;
+    searchValue: string;
 } | {
     hasSearch?: false;
     onSearchChange?: never;
+    searchValue?: never;
 });
 export type BitkitSelectMenuItemProps = {
     value: string;
     label: string;
     group?: string;
     icon?: BitkitIconComponent;
+    avatar?: string;
+    helperText?: string;
+    disabled?: boolean;
+    loading?: boolean;
+};
+export type BitkitSelectMenuEmptyStateProps = {
+    emptyLabel?: string;
+    emptyHelperText?: string;
 };
 export type BitkitSelectMenuProps = {
     collection: ListCollection<BitkitSelectMenuItemProps>;
-    contentProps?: BitkitSelectContentProps;
+    /** Forwarded to the underlying Select/Combobox.Content. Kept for internal callers
+     *  (e.g. BitkitCalendar's in-grid selects that need to tweak max-height / width). The
+     *  three public components (BitkitSelect, BitkitCombobox, BitkitMultiselect) intentionally
+     *  do not expose this escape hatch. */
+    contentProps?: SelectContentProps;
     isLoading?: boolean;
+    multiple?: boolean;
     size?: 'md' | 'lg';
     variant?: 'select' | 'combobox';
-} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps;
-export type BitkitSelectContentProps = SelectContentProps;
+} & BitkitSelectMenuCreateItemProps & BitkitSelectMenuSearchProps & BitkitSelectMenuEmptyStateProps;
 declare const BitkitSelectMenu: import('react').ForwardRefExoticComponent<BitkitSelectMenuProps & import('react').RefAttributes<HTMLDivElement>>;
 export default BitkitSelectMenu;