@bitrise/bitkit-v2 0.3.470 → 0.3.472

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 (7) hide show
  1. package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.d.ts +10 -0
  2. package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.js +23 -6
  3. package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.js.map +1 -1
  4. package/dist/components/BitkitSelectMenu/SelectMenuShell.js +81 -71
  5. package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map +1 -1
  6. package/dist/components/BitkitTour/BitkitTour.js +1 -1
  7. package/package.json +1 -1
package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { ListCollection } from '@chakra-ui/react/collection';
1
2
  import { SystemStyleObject } from '@chakra-ui/react/styled-system';
2
3
  import { ReactElement } from 'react';
3
4
  import { BitkitIconComponent } from '../../icons';
@@ -31,7 +32,16 @@ export type BitkitSelectMenuActionAsAnchorProps = BitkitSelectMenuActionCommonPr
31
32
  };
32
33
  export type BitkitSelectMenuActionProps = BitkitSelectMenuActionAsButtonProps | BitkitSelectMenuActionAsAnchorProps;
33
34
  export type BitkitSelectMenuActionChild = ReactElement<BitkitSelectMenuActionProps> | false | null;
35
+ export type SelectMenuApi = {
36
+ clearHighlightValue: () => void;
37
+ collection: Pick<ListCollection<{
38
+ value: string;
39
+ }>, 'firstValue' | 'lastValue'>;
40
+ setHighlightValue: (value: string) => void;
41
+ setOpen: (open: boolean) => void;
42
+ };
34
43
  type SelectMenuShellContext = {
44
+ api: SelectMenuApi;
35
45
  iconSize: '16' | '24';
36
46
  styles: Record<string, SystemStyleObject>;
37
47
  };
package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.js CHANGED
@@ -9,12 +9,29 @@ var [SelectMenuShellContextProvider, useSelectMenuShellContext] = createContext(
9
9
  hookName: "useSelectMenuShellContext",
10
10
  providerName: "<BitkitSelectMenu />, <BitkitMultiselectMenu />, <BitkitSelect />, <BitkitMultiselect />, or <BitkitCombobox />"
11
11
  });
12
- var stopMenuSelectionKeys = (event) => {
13
- if (event.key === "Enter" || event.key === " ") event.stopPropagation();
12
+ var listEdgeKeys = {
13
+ ArrowDown: "firstValue",
14
+ ArrowUp: "lastValue",
15
+ End: "lastValue",
16
+ Home: "firstValue"
14
17
  };
15
18
  var BitkitSelectMenuAction = (props) => {
16
19
  const { href, icon: Icon, label, onClick, state, tooltip } = props;
17
- const { iconSize, styles } = useSelectMenuShellContext();
20
+ const { api, iconSize, styles } = useSelectMenuShellContext();
21
+ const rowProps = {
22
+ onFocus: api.clearHighlightValue,
23
+ onKeyDown: (event) => {
24
+ if (event.key === "Tab" || event.key === "Escape") return;
25
+ event.stopPropagation();
26
+ const edge = listEdgeKeys[event.key];
27
+ const value = edge && api.collection[edge];
28
+ if (!value) return;
29
+ event.preventDefault();
30
+ const content = event.currentTarget.closest("[data-part=\"content\"]");
31
+ (content?.querySelector("input") ?? content)?.focus();
32
+ api.setHighlightValue(value);
33
+ }
34
+ };
18
35
  const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, { size: iconSize }), label] });
19
36
  const asRow = (row) => /* @__PURE__ */ jsx(Box, {
20
37
  css: styles.actionContainer,
@@ -28,7 +45,7 @@ var BitkitSelectMenuAction = (props) => {
28
45
  "aria-disabled": "true",
29
46
  css: styles.action,
30
47
  "data-disabled": "",
31
- onKeyDown: stopMenuSelectionKeys,
48
+ ...rowProps,
32
49
  children: content
33
50
  }));
34
51
  if (href !== void 0) {
@@ -41,7 +58,7 @@ var BitkitSelectMenuAction = (props) => {
41
58
  rel: effectiveRel,
42
59
  css: styles.action,
43
60
  onClick,
44
- onKeyDown: stopMenuSelectionKeys,
61
+ ...rowProps,
45
62
  children: content
46
63
  }));
47
64
  }
@@ -49,7 +66,7 @@ var BitkitSelectMenuAction = (props) => {
49
66
  type: "button",
50
67
  css: styles.action,
51
68
  onClick,
52
- onKeyDown: stopMenuSelectionKeys,
69
+ ...rowProps,
53
70
  children: content
54
71
  }));
55
72
  };
package/dist/components/BitkitSelectMenu/BitkitSelectMenuAction.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitSelectMenuAction.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenuAction.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { type KeyboardEvent as ReactKeyboardEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\ntype BitkitSelectMenuActionCommonProps = {\n icon: BitkitIconComponent;\n label: string;\n /**\n * A disabled action stays focusable and keeps taking pointer events (`aria-disabled`, not the\n * native attribute), so the `tooltip` saying why it is unavailable is still reachable. Natively\n * disabled it would be neither hoverable nor tabbable, hiding the explanation in the one state\n * that needs it.\n *\n * This is the only disabled affordance in the menus: an option a user cannot pick is left out\n * of the collection instead, never dimmed.\n */\n state?: 'disabled';\n /** Hover and focus tooltip on the row. On a disabled action, say why it is unavailable. */\n tooltip?: string;\n};\n\nexport type BitkitSelectMenuActionAsButtonProps = BitkitSelectMenuActionCommonProps & {\n href?: undefined;\n isExternal?: undefined;\n onClick: () => void;\n};\n\nexport type BitkitSelectMenuActionAsAnchorProps = BitkitSelectMenuActionCommonProps & {\n href: string;\n isExternal?: boolean;\n onClick?: () => void;\n rel?: string;\n target?: string;\n};\n\nexport type BitkitSelectMenuActionProps = BitkitSelectMenuActionAsButtonProps | BitkitSelectMenuActionAsAnchorProps;\n\nexport type BitkitSelectMenuActionChild = ReactElement<BitkitSelectMenuActionProps> | false | null;\n\ntype SelectMenuShellContext = {\n iconSize: '16' | '24';\n styles: Record<string, SystemStyleObject>;\n};\n\nconst [SelectMenuShellContextProvider, useSelectMenuShellContext] = createContext<SelectMenuShellContext>({\n name: 'SelectMenuShellContext',\n hookName: 'useSelectMenuShellContext',\n providerName:\n '<BitkitSelectMenu />, <BitkitMultiselectMenu />, <BitkitSelect />, <BitkitMultiselect />, or <BitkitCombobox />',\n});\n\nexport { SelectMenuShellContextProvider };\n\nconst stopMenuSelectionKeys = (event: ReactKeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.stopPropagation();\n }\n};\n\nconst BitkitSelectMenuAction = (props: BitkitSelectMenuActionProps) => {\n const { href, icon: Icon, label, onClick, state, tooltip } = props;\n const { iconSize, styles } = useSelectMenuShellContext();\n\n const content = (\n <>\n <Icon size={iconSize} />\n {label}\n </>\n );\n\n const asRow = (row: ReactNode) => (\n <Box css={styles.actionContainer}>{tooltip ? <BitkitTooltip text={tooltip}>{row}</BitkitTooltip> : row}</Box>\n );\n\n if (state === 'disabled') {\n return asRow(\n // A button even for an `href` action: dropping the attribute is the only thing that stops a\n // middle click or \"open link in new tab\" from navigating anyway, and an anchor without one\n // leaves the tab order, taking the tooltip with it.\n <chakra.button\n type=\"button\"\n aria-disabled=\"true\"\n css={styles.action}\n // `_disabled` matches `[aria-disabled=true]` by itself, but `_hover`/`_active` only\n // exclude `:disabled` and `[data-disabled]`, so without this the row still lights up.\n data-disabled=\"\"\n onKeyDown={stopMenuSelectionKeys}\n >\n {content}\n </chakra.button>,\n );\n }\n\n if (href !== undefined) {\n const { isExternal, rel, target } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n\n return asRow(\n <chakra.a\n href={href}\n target={effectiveTarget}\n rel={effectiveRel}\n css={styles.action}\n onClick={onClick}\n onKeyDown={stopMenuSelectionKeys}\n >\n {content}\n </chakra.a>,\n );\n }\n\n return asRow(\n <chakra.button type=\"button\" css={styles.action} onClick={onClick} onKeyDown={stopMenuSelectionKeys}>\n {content}\n </chakra.button>,\n );\n};\n\nBitkitSelectMenuAction.displayName = 'BitkitSelectMenu.Action';\n\nexport default BitkitSelectMenuAction;\n"],"mappings":";;;;;;AAiDA,IAAM,CAAC,gCAAgC,6BAA6B,cAAsC;CACxG,MAAM;CACN,UAAU;CACV,cACE;AACJ,CAAC;AAID,IAAM,yBAAyB,UAA8B;CAC3D,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KACzC,MAAM,gBAAgB;AAE1B;AAEA,IAAM,0BAA0B,UAAuC;CACrE,MAAM,EAAE,MAAM,MAAM,MAAM,OAAO,SAAS,OAAO,YAAY;CAC7D,MAAM,EAAE,UAAU,WAAW,0BAA0B;CAEvD,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,GACtB,KACD,EAAA,CAAA;CAGJ,MAAM,SAAS,QACb,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAkB,UAAA,UAAU,oBAAC,eAAD;GAAe,MAAM;GAAU,UAAA;EAAmB,CAAA,IAAI;CAAS,CAAA;CAG9G,IAAI,UAAU,YACZ,OAAO,MAIL,oBAAC,OAAO,QAAR;EACE,MAAK;EACL,iBAAc;EACd,KAAK,OAAO;EAGZ,iBAAc;EACd,WAAW;EAEV,UAAA;CACY,CAAA,CACjB;CAGF,IAAI,SAAS,KAAA,GAAW;EACtB,MAAM,EAAE,YAAY,KAAK,WAAW;EACpC,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EAEjG,OAAO,MACL,oBAAC,OAAO,GAAR;GACQ;GACN,QAAQ;GACR,KAAK;GACL,KAAK,OAAO;GACH;GACT,WAAW;GAEV,UAAA;EACO,CAAA,CACZ;CACF;CAEA,OAAO,MACL,oBAAC,OAAO,QAAR;EAAe,MAAK;EAAS,KAAK,OAAO;EAAiB;EAAS,WAAW;EAC3E,UAAA;CACY,CAAA,CACjB;AACF;AAEA,uBAAuB,cAAc"}
1
+ {"version":3,"file":"BitkitSelectMenuAction.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/BitkitSelectMenuAction.tsx"],"sourcesContent":["// eslint-disable-next-line no-restricted-imports\nimport { createContext } from '@chakra-ui/react';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { type KeyboardEvent as ReactKeyboardEvent, type ReactElement, type ReactNode } from 'react';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\ntype BitkitSelectMenuActionCommonProps = {\n icon: BitkitIconComponent;\n label: string;\n /**\n * A disabled action stays focusable and keeps taking pointer events (`aria-disabled`, not the\n * native attribute), so the `tooltip` saying why it is unavailable is still reachable. Natively\n * disabled it would be neither hoverable nor tabbable, hiding the explanation in the one state\n * that needs it.\n *\n * This is the only disabled affordance in the menus: an option a user cannot pick is left out\n * of the collection instead, never dimmed.\n */\n state?: 'disabled';\n /** Hover and focus tooltip on the row. On a disabled action, say why it is unavailable. */\n tooltip?: string;\n};\n\nexport type BitkitSelectMenuActionAsButtonProps = BitkitSelectMenuActionCommonProps & {\n href?: undefined;\n isExternal?: undefined;\n onClick: () => void;\n};\n\nexport type BitkitSelectMenuActionAsAnchorProps = BitkitSelectMenuActionCommonProps & {\n href: string;\n isExternal?: boolean;\n onClick?: () => void;\n rel?: string;\n target?: string;\n};\n\nexport type BitkitSelectMenuActionProps = BitkitSelectMenuActionAsButtonProps | BitkitSelectMenuActionAsAnchorProps;\n\nexport type BitkitSelectMenuActionChild = ReactElement<BitkitSelectMenuActionProps> | false | null;\n\nexport type SelectMenuApi = {\n clearHighlightValue: () => void;\n collection: Pick<ListCollection<{ value: string }>, 'firstValue' | 'lastValue'>;\n setHighlightValue: (value: string) => void;\n setOpen: (open: boolean) => void;\n};\n\ntype SelectMenuShellContext = {\n api: SelectMenuApi;\n iconSize: '16' | '24';\n styles: Record<string, SystemStyleObject>;\n};\n\nconst [SelectMenuShellContextProvider, useSelectMenuShellContext] = createContext<SelectMenuShellContext>({\n name: 'SelectMenuShellContext',\n hookName: 'useSelectMenuShellContext',\n providerName:\n '<BitkitSelectMenu />, <BitkitMultiselectMenu />, <BitkitSelect />, <BitkitMultiselect />, or <BitkitCombobox />',\n});\n\nexport { SelectMenuShellContextProvider };\n\nconst listEdgeKeys: Record<string, 'firstValue' | 'lastValue' | undefined> = {\n ArrowDown: 'firstValue',\n ArrowUp: 'lastValue',\n End: 'lastValue',\n Home: 'firstValue',\n};\n\nconst BitkitSelectMenuAction = (props: BitkitSelectMenuActionProps) => {\n const { href, icon: Icon, label, onClick, state, tooltip } = props;\n const { api, iconSize, styles } = useSelectMenuShellContext();\n\n const rowProps = {\n onFocus: api.clearHighlightValue,\n onKeyDown: (event: ReactKeyboardEvent) => {\n if (event.key === 'Tab' || event.key === 'Escape') return;\n event.stopPropagation();\n\n const edge = listEdgeKeys[event.key];\n const value = edge && api.collection[edge];\n if (!value) return;\n\n event.preventDefault();\n const content = event.currentTarget.closest<HTMLElement>('[data-part=\"content\"]');\n (content?.querySelector<HTMLElement>('input') ?? content)?.focus();\n api.setHighlightValue(value);\n },\n };\n\n const content = (\n <>\n <Icon size={iconSize} />\n {label}\n </>\n );\n\n const asRow = (row: ReactNode) => (\n <Box css={styles.actionContainer}>{tooltip ? <BitkitTooltip text={tooltip}>{row}</BitkitTooltip> : row}</Box>\n );\n\n if (state === 'disabled') {\n return asRow(\n // A button even for an `href` action: dropping the attribute is the only thing that stops a\n // middle click or \"open link in new tab\" from navigating anyway, and an anchor without one\n // leaves the tab order, taking the tooltip with it.\n <chakra.button\n type=\"button\"\n aria-disabled=\"true\"\n css={styles.action}\n // `_disabled` matches `[aria-disabled=true]` by itself, but `_hover`/`_active` only\n // exclude `:disabled` and `[data-disabled]`, so without this the row still lights up.\n data-disabled=\"\"\n {...rowProps}\n >\n {content}\n </chakra.button>,\n );\n }\n\n if (href !== undefined) {\n const { isExternal, rel, target } = props;\n const effectiveTarget = isExternal ? '_blank' : target;\n const effectiveRel = isExternal ? (rel ? `${rel} noreferrer noopener` : 'noreferrer noopener') : rel;\n\n return asRow(\n <chakra.a\n href={href}\n target={effectiveTarget}\n rel={effectiveRel}\n css={styles.action}\n onClick={onClick}\n {...rowProps}\n >\n {content}\n </chakra.a>,\n );\n }\n\n return asRow(\n <chakra.button type=\"button\" css={styles.action} onClick={onClick} {...rowProps}>\n {content}\n </chakra.button>,\n );\n};\n\nBitkitSelectMenuAction.displayName = 'BitkitSelectMenu.Action';\n\nexport default BitkitSelectMenuAction;\n"],"mappings":";;;;;;AA0DA,IAAM,CAAC,gCAAgC,6BAA6B,cAAsC;CACxG,MAAM;CACN,UAAU;CACV,cACE;AACJ,CAAC;AAID,IAAM,eAAuE;CAC3E,WAAW;CACX,SAAS;CACT,KAAK;CACL,MAAM;AACR;AAEA,IAAM,0BAA0B,UAAuC;CACrE,MAAM,EAAE,MAAM,MAAM,MAAM,OAAO,SAAS,OAAO,YAAY;CAC7D,MAAM,EAAE,KAAK,UAAU,WAAW,0BAA0B;CAE5D,MAAM,WAAW;EACf,SAAS,IAAI;EACb,YAAY,UAA8B;GACxC,IAAI,MAAM,QAAQ,SAAS,MAAM,QAAQ,UAAU;GACnD,MAAM,gBAAgB;GAEtB,MAAM,OAAO,aAAa,MAAM;GAChC,MAAM,QAAQ,QAAQ,IAAI,WAAW;GACrC,IAAI,CAAC,OAAO;GAEZ,MAAM,eAAe;GACrB,MAAM,UAAU,MAAM,cAAc,QAAqB,yBAAuB;GAChF,CAAC,SAAS,cAA2B,OAAO,KAAK,QAAA,EAAU,MAAM;GACjE,IAAI,kBAAkB,KAAK;EAC7B;CACF;CAEA,MAAM,UACJ,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAM,MAAM,SAAW,CAAA,GACtB,KACD,EAAA,CAAA;CAGJ,MAAM,SAAS,QACb,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAkB,UAAA,UAAU,oBAAC,eAAD;GAAe,MAAM;GAAU,UAAA;EAAmB,CAAA,IAAI;CAAS,CAAA;CAG9G,IAAI,UAAU,YACZ,OAAO,MAIL,oBAAC,OAAO,QAAR;EACE,MAAK;EACL,iBAAc;EACd,KAAK,OAAO;EAGZ,iBAAc;EACd,GAAI;EAEH,UAAA;CACY,CAAA,CACjB;CAGF,IAAI,SAAS,KAAA,GAAW;EACtB,MAAM,EAAE,YAAY,KAAK,WAAW;EACpC,MAAM,kBAAkB,aAAa,WAAW;EAChD,MAAM,eAAe,aAAc,MAAM,GAAG,IAAI,wBAAwB,wBAAyB;EAEjG,OAAO,MACL,oBAAC,OAAO,GAAR;GACQ;GACN,QAAQ;GACR,KAAK;GACL,KAAK,OAAO;GACH;GACT,GAAI;GAEH,UAAA;EACO,CAAA,CACZ;CACF;CAEA,OAAO,MACL,oBAAC,OAAO,QAAR;EAAe,MAAK;EAAS,KAAK,OAAO;EAAiB;EAAS,GAAI;EACpE,UAAA;CACY,CAAA,CACjB;AACF;AAEA,uBAAuB,cAAc"}
package/dist/components/BitkitSelectMenu/SelectMenuShell.js CHANGED
@@ -9,6 +9,7 @@ import { isValidElement, useEffect, useRef } from "react";
9
9
  import { jsx, jsxs } from "react/jsx-runtime";
10
10
  import { Text } from "@chakra-ui/react/text";
11
11
  import { Spinner } from "@chakra-ui/react/spinner";
12
+ import { isValidTabEvent } from "@zag-js/dom-query";
12
13
  //#region lib/components/BitkitSelectMenu/SelectMenuShell.tsx
13
14
  var selectSizeMap = {
14
15
  lg: {
@@ -22,6 +23,7 @@ var selectSizeMap = {
22
23
  spinnerSize: "md"
23
24
  }
24
25
  };
26
+ var MenuApiProvider = ({ NS, children }) => /* @__PURE__ */ jsx(NS.Context, { children });
25
27
  var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emptyHelperText, emptyLabel = "No matching options", errorHelperText, errorLabel, iconSize, isLoading = false, onScrolledToBottom, onSearchChange, renderItem, searchPlaceholder, searchValue, spinnerSize, styles }) => {
26
28
  const { css: contentCss, ...restContentProps } = contentProps ?? {};
27
29
  const isEmpty = collection.size === 0;
@@ -34,80 +36,88 @@ var SelectMenuShell = ({ NS, children, collection, contentProps, contentRef, emp
34
36
  if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();
35
37
  wasAtBottom.current = atBottom;
36
38
  };
37
- return /* @__PURE__ */ jsx(SelectMenuShellContextProvider, {
38
- value: {
39
- iconSize,
40
- styles
41
- },
42
- children: /* @__PURE__ */ jsxs(NS.Content, {
43
- css: [styles.content, contentCss],
44
- ref: contentRef,
45
- ...restContentProps,
46
- children: [
47
- !onSearchChange && hasAction && /* @__PURE__ */ jsx("span", {
48
- "data-autofocus": "",
49
- tabIndex: -1,
50
- "aria-hidden": "true"
51
- }),
52
- onSearchChange && /* @__PURE__ */ jsx(SelectMenuSearch, {
53
- iconSize,
54
- placeholder: searchPlaceholder,
55
- styles,
56
- value: searchValue ?? "",
57
- onSearchChange
58
- }),
59
- hasError ? /* @__PURE__ */ jsxs(Box, {
60
- css: styles.errorState,
61
- children: [/* @__PURE__ */ jsx(IconCrossCircle, {
62
- css: styles.errorIcon,
63
- size: iconSize
64
- }), /* @__PURE__ */ jsxs(Box, {
65
- css: styles.errorTextBlock,
66
- children: [/* @__PURE__ */ jsx(Text, {
67
- css: styles.errorLabel,
68
- children: errorLabel
69
- }), errorHelperText && /* @__PURE__ */ jsx(Text, {
70
- css: styles.itemHelperText,
71
- children: errorHelperText
72
- })]
73
- })]
74
- }) : /* @__PURE__ */ jsxs(Box, {
75
- css: styles.itemList,
76
- onScroll: handleItemListScroll,
77
- children: [
78
- isLoading && /* @__PURE__ */ jsxs(Box, {
79
- css: styles.item,
80
- children: [/* @__PURE__ */ jsx(Spinner, {
81
- variant: "purple",
82
- size: spinnerSize,
83
- css: styles.itemLoading
84
- }), /* @__PURE__ */ jsx(Text, {
85
- css: styles.itemLoadingLabel,
86
- children: "Loading..."
87
- })]
88
- }),
89
- !isLoading && isEmpty && /* @__PURE__ */ jsxs(Box, {
90
- css: styles.emptyState,
39
+ return /* @__PURE__ */ jsx(MenuApiProvider, {
40
+ NS,
41
+ children: (api) => /* @__PURE__ */ jsx(SelectMenuShellContextProvider, {
42
+ value: {
43
+ api,
44
+ iconSize,
45
+ styles
46
+ },
47
+ children: /* @__PURE__ */ jsxs(NS.Content, {
48
+ css: [styles.content, contentCss],
49
+ ref: contentRef,
50
+ onKeyDown: (event) => {
51
+ if (event.key === "Tab" && !isValidTabEvent(event)) api.setOpen(false);
52
+ },
53
+ ...restContentProps,
54
+ children: [
55
+ !onSearchChange && hasAction && /* @__PURE__ */ jsx("span", {
56
+ "data-autofocus": "",
57
+ tabIndex: -1,
58
+ "aria-hidden": "true"
59
+ }),
60
+ onSearchChange && /* @__PURE__ */ jsx(SelectMenuSearch, {
61
+ iconSize,
62
+ placeholder: searchPlaceholder,
63
+ styles,
64
+ value: searchValue ?? "",
65
+ onSearchChange
66
+ }),
67
+ hasError ? /* @__PURE__ */ jsxs(Box, {
68
+ css: styles.errorState,
69
+ children: [/* @__PURE__ */ jsx(IconCrossCircle, {
70
+ css: styles.errorIcon,
71
+ size: iconSize
72
+ }), /* @__PURE__ */ jsxs(Box, {
73
+ css: styles.errorTextBlock,
91
74
  children: [/* @__PURE__ */ jsx(Text, {
92
- css: styles.itemLabel,
93
- children: emptyLabel
94
- }), emptyHelperText && /* @__PURE__ */ jsx(Text, {
75
+ css: styles.errorLabel,
76
+ children: errorLabel
77
+ }), errorHelperText && /* @__PURE__ */ jsx(Text, {
95
78
  css: styles.itemHelperText,
96
- children: emptyHelperText
79
+ children: errorHelperText
97
80
  })]
98
- }),
99
- !isLoading && !isEmpty && collection.group().map(([type, group]) => /* @__PURE__ */ jsxs(NS.ItemGroup, { children: [type && /* @__PURE__ */ jsx(NS.ItemGroupLabel, {
100
- asChild: true,
101
- children: /* @__PURE__ */ jsx(BitkitGroupHeading, {
102
- label: type,
103
- paddingBlock: "12",
104
- paddingInline: "16"
105
- })
106
- }), group.map(renderItem)] }, type))
107
- ]
108
- }),
109
- children
110
- ]
81
+ })]
82
+ }) : /* @__PURE__ */ jsxs(Box, {
83
+ css: styles.itemList,
84
+ onScroll: handleItemListScroll,
85
+ tabIndex: -1,
86
+ children: [
87
+ isLoading && /* @__PURE__ */ jsxs(Box, {
88
+ css: styles.item,
89
+ children: [/* @__PURE__ */ jsx(Spinner, {
90
+ variant: "purple",
91
+ size: spinnerSize,
92
+ css: styles.itemLoading
93
+ }), /* @__PURE__ */ jsx(Text, {
94
+ css: styles.itemLoadingLabel,
95
+ children: "Loading..."
96
+ })]
97
+ }),
98
+ !isLoading && isEmpty && /* @__PURE__ */ jsxs(Box, {
99
+ css: styles.emptyState,
100
+ children: [/* @__PURE__ */ jsx(Text, {
101
+ css: styles.itemLabel,
102
+ children: emptyLabel
103
+ }), emptyHelperText && /* @__PURE__ */ jsx(Text, {
104
+ css: styles.itemHelperText,
105
+ children: emptyHelperText
106
+ })]
107
+ }),
108
+ !isLoading && !isEmpty && collection.group().map(([type, group]) => /* @__PURE__ */ jsxs(NS.ItemGroup, { children: [type && /* @__PURE__ */ jsx(NS.ItemGroupLabel, {
109
+ asChild: true,
110
+ children: /* @__PURE__ */ jsx(BitkitGroupHeading, {
111
+ label: type,
112
+ paddingBlock: "12",
113
+ paddingInline: "16"
114
+ })
115
+ }), group.map(renderItem)] }, type))
116
+ ]
117
+ }),
118
+ children
119
+ ]
120
+ })
111
121
  })
112
122
  });
113
123
  };
package/dist/components/BitkitSelectMenu/SelectMenuShell.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ChangeEvent, isValidElement, type ReactNode, type Ref, type UIEvent, useEffect, useRef } from 'react';\n\nimport { IconCross, IconCrossCircle, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuErrorStateProps,\n type BitkitSelectMenuScrollProps,\n type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport { type BitkitSelectMenuActionChild, SelectMenuShellContextProvider } from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n NS: typeof Select | typeof Combobox;\n children?: BitkitSelectMenuActionChild;\n collection: ListCollection<T>;\n contentProps?: SelectContentProps;\n contentRef?: Ref<HTMLDivElement>;\n iconSize: SelectSizes['iconSize'];\n isLoading?: boolean;\n renderItem: (item: T) => ReactNode;\n spinnerSize: SelectSizes['spinnerSize'];\n styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuScrollProps &\n BitkitSelectMenuEmptyStateProps &\n BitkitSelectMenuErrorStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n NS,\n children,\n collection,\n contentProps,\n contentRef,\n emptyHelperText,\n emptyLabel = 'No matching options',\n errorHelperText,\n errorLabel,\n iconSize,\n isLoading = false,\n onScrolledToBottom,\n onSearchChange,\n renderItem,\n searchPlaceholder,\n searchValue,\n spinnerSize,\n styles,\n}: SelectMenuShellProps<T>) => {\n const { css: contentCss, ...restContentProps } = contentProps ?? {};\n const isEmpty = collection.size === 0;\n const hasError = !isLoading && !!errorLabel;\n const hasAction = isValidElement(children);\n\n const wasAtBottom = useRef(false);\n const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n const list = event.currentTarget;\n const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n wasAtBottom.current = atBottom;\n };\n\n return (\n <SelectMenuShellContextProvider value={{ iconSize, styles }}>\n <NS.Content css={[styles.content, contentCss]} ref={contentRef} {...restContentProps}>\n {/*\n Without a search input, Zag's getInitialFocus (see @zag-js/dom-query) picks the first\n tabbable descendant as the menu's initial focus target — which would be the action\n slot, visually confusing. A hidden [data-autofocus] span wins over tabbables in\n getInitialFocus's querySelector, so we focus an invisible element instead and Zag's\n aria-activedescendant drives the highlight like a normal Select would. Zag picks that\n target once, when the menu opens, so a search input that arrives later takes the focus\n over from the span itself — see SelectMenuSearch below.\n */}\n {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n {onSearchChange && (\n <SelectMenuSearch\n iconSize={iconSize}\n placeholder={searchPlaceholder}\n styles={styles}\n value={searchValue ?? ''}\n onSearchChange={onSearchChange}\n />\n )}\n {hasError ? (\n <Box css={styles.errorState}>\n <IconCrossCircle css={styles.errorIcon} size={iconSize} />\n <Box css={styles.errorTextBlock}>\n <Text css={styles.errorLabel}>{errorLabel}</Text>\n {errorHelperText && <Text css={styles.itemHelperText}>{errorHelperText}</Text>}\n </Box>\n </Box>\n ) : (\n <Box css={styles.itemList} onScroll={handleItemListScroll}>\n {isLoading && (\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 {!isLoading && isEmpty && (\n <Box css={styles.emptyState}>\n <Text css={styles.itemLabel}>{emptyLabel}</Text>\n {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n </Box>\n )}\n {!isLoading &&\n !isEmpty &&\n collection.group().map(([type, group]) => (\n <NS.ItemGroup key={type}>\n {type && (\n <NS.ItemGroupLabel asChild>\n <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n </NS.ItemGroupLabel>\n )}\n {group.map(renderItem)}\n </NS.ItemGroup>\n ))}\n </Box>\n )}\n {children}\n </NS.Content>\n </SelectMenuShellContextProvider>\n );\n};\n\ntype SelectMenuSearchProps = {\n iconSize: '16' | '24';\n onSearchChange: (searchText: string) => void;\n placeholder?: string;\n styles: Record<string, SystemStyleObject>;\n value: string;\n};\n\nconst SelectMenuSearch = ({\n iconSize,\n onSearchChange,\n placeholder = 'Search...',\n styles,\n value,\n}: SelectMenuSearchProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n const input = inputRef.current;\n const content = input?.closest('[data-part=\"content\"]');\n if (!input || content?.getAttribute('data-state') !== 'open') return;\n const focused = document.activeElement;\n if (focused && focused !== content && content.contains(focused)) return;\n input.focus();\n }, []);\n\n return (\n <Box css={styles.searchInputGroup}>\n <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n <chakra.input\n aria-label=\"Search\"\n css={styles.searchInput}\n placeholder={placeholder}\n ref={inputRef}\n value={value}\n onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n onKeyDown={(event) => {\n // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n // regardless of which descendant is focused. That would eat the space before the\n // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n if (event.key === ' ') event.stopPropagation();\n }}\n />\n {value && (\n <chakra.button\n type=\"button\"\n css={styles.searchClear}\n aria-label=\"Clear search\"\n onClick={() => onSearchChange('')}\n >\n <IconCross size={iconSize} />\n </chakra.button>\n )}\n </Box>\n );\n};\n"],"mappings":";;;;;;;;;;;;AAmBA,IAAa,gBAAgB;CAC3B,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;CAC1D,IAAI;EAAE,YAAY;EAAM,UAAU;EAAM,aAAa;CAAK;AAC5D;AA0BA,IAAa,mBAAgE,EAC3E,IACA,UACA,YACA,cACA,YACA,iBACA,aAAa,uBACb,iBACA,YACA,UACA,YAAY,OACZ,oBACA,gBACA,YACA,mBACA,aACA,aACA,aAC6B;CAC7B,MAAM,EAAE,KAAK,YAAY,GAAG,qBAAqB,gBAAgB,CAAC;CAClE,MAAM,UAAU,WAAW,SAAS;CACpC,MAAM,WAAW,CAAC,aAAa,CAAC,CAAC;CACjC,MAAM,YAAY,eAAe,QAAQ;CAEzC,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,wBAAwB,UAAmC;EAC/D,MAAM,OAAO,MAAM;EACnB,MAAM,WAAW,KAAK,aAAa,KAAK,eAAe,KAAK,eAAe;EAE3E,IAAI,YAAY,CAAC,YAAY,SAAS,qBAAqB;EAC3D,YAAY,UAAU;CACxB;CAEA,OACE,oBAAC,gCAAD;EAAgC,OAAO;GAAE;GAAU;EAAO;EACxD,UAAA,qBAAC,GAAG,SAAJ;GAAY,KAAK,CAAC,OAAO,SAAS,UAAU;GAAG,KAAK;GAAY,GAAI;GAApE,UAAA;IAUG,CAAC,kBAAkB,aAAa,oBAAC,QAAD;KAAM,kBAAe;KAAG,UAAU;KAAI,eAAY;IAAQ,CAAA;IAC1F,kBACC,oBAAC,kBAAD;KACY;KACV,aAAa;KACL;KACR,OAAO,eAAe;KACN;IACjB,CAAA;IAEF,WACC,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAjB,UAAA,CACE,oBAAC,iBAAD;MAAiB,KAAK,OAAO;MAAW,MAAM;KAAW,CAAA,GACzD,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA,CACE,oBAAC,MAAD;OAAM,KAAK,OAAO;OAAa,UAAA;MAAiB,CAAA,GAC/C,mBAAmB,oBAAC,MAAD;OAAM,KAAK,OAAO;OAAiB,UAAA;MAAsB,CAAA,CAC1E;KACF,CAAA,CAAA;IAEL,CAAA,IAAA,qBAAC,KAAD;KAAK,KAAK,OAAO;KAAU,UAAU;KAArC,UAAA;MACG,aACC,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,SAAD;QAAS,SAAQ;QAAS,MAAM;QAAa,KAAK,OAAO;OAAc,CAAA,GACvE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAkB,UAAA;OAAgB,CAAA,CACjD;;MAEN,CAAC,aAAa,WACb,qBAAC,KAAD;OAAK,KAAK,OAAO;OAAjB,UAAA,CACE,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA;OAAiB,CAAA,GAC9C,mBAAmB,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAiB,UAAA;OAAsB,CAAA,CAC1E;;MAEN,CAAC,aACA,CAAC,WACD,WAAW,MAAM,CAAC,CAAC,KAAK,CAAC,MAAM,WAC7B,qBAAC,GAAG,WAAJ,EAAA,UAAA,CACG,QACC,oBAAC,GAAG,gBAAJ;OAAmB,SAAA;OACjB,UAAA,oBAAC,oBAAD;QAAoB,OAAO;QAAM,cAAa;QAAK,eAAc;OAAM,CAAA;MACtD,CAAA,GAEpB,MAAM,IAAI,UAAU,CACT,EAAA,GAPK,IAOL,CACf;KACA;;IAEN;GACS;;CACkB,CAAA;AAEpC;AAUA,IAAM,oBAAoB,EACxB,UACA,gBACA,cAAc,aACd,QACA,YAC2B;CAC3B,MAAM,WAAW,OAAyB,IAAI;CAE9C,gBAAgB;EACd,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,OAAO,QAAQ,yBAAuB;EACtD,IAAI,CAAC,SAAS,SAAS,aAAa,YAAY,MAAM,QAAQ;EAC9D,MAAM,UAAU,SAAS;EACzB,IAAI,WAAW,YAAY,WAAW,QAAQ,SAAS,OAAO,GAAG;EACjE,MAAM,MAAM;CACd,GAAG,CAAC,CAAC;CAEL,OACE,qBAAC,KAAD;EAAK,KAAK,OAAO;EAAjB,UAAA;GACE,oBAAC,eAAD;IAAe,MAAM;IAAU,OAAM;GAAiB,CAAA;GACtD,oBAAC,OAAO,OAAR;IACE,cAAW;IACX,KAAK,OAAO;IACC;IACb,KAAK;IACE;IACP,WAAW,UAAyC,eAAe,MAAM,OAAO,KAAK;IACrF,YAAY,UAAU;KAIpB,IAAI,MAAM,QAAQ,KAAK,MAAM,gBAAgB;IAC/C;GACD,CAAA;GACA,SACC,oBAAC,OAAO,QAAR;IACE,MAAK;IACL,KAAK,OAAO;IACZ,cAAW;IACX,eAAe,eAAe,EAAE;IAEhC,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAW,CAAA;GACf,CAAA;EAEd;;AAET"}
1
+ {"version":3,"file":"SelectMenuShell.js","names":[],"sources":["../../../lib/components/BitkitSelectMenu/SelectMenuShell.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { type ListCollection } from '@chakra-ui/react/collection';\nimport { type Combobox } from '@chakra-ui/react/combobox';\nimport { type Select, type SelectContentProps } from '@chakra-ui/react/select';\nimport { Spinner } from '@chakra-ui/react/spinner';\nimport { chakra, type SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { isValidTabEvent } from '@zag-js/dom-query';\nimport {\n type ChangeEvent,\n isValidElement,\n type KeyboardEvent as ReactKeyboardEvent,\n type ReactNode,\n type Ref,\n type UIEvent,\n useEffect,\n useRef,\n} from 'react';\n\nimport { IconCross, IconCrossCircle, IconMagnifier } from '../../icons';\nimport BitkitGroupHeading from '../BitkitGroupHeading/BitkitGroupHeading';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuErrorStateProps,\n type BitkitSelectMenuScrollProps,\n type BitkitSelectMenuSearchProps,\n} from './BitkitSelectMenu';\nimport {\n type BitkitSelectMenuActionChild,\n type SelectMenuApi,\n SelectMenuShellContextProvider,\n} from './BitkitSelectMenuAction';\n\nexport const selectSizeMap = {\n lg: { avatarSize: '32', iconSize: '24', spinnerSize: 'lg' },\n md: { avatarSize: '24', iconSize: '16', spinnerSize: 'md' },\n} as const;\n\nexport type SelectSizes = (typeof selectSizeMap)[keyof typeof selectSizeMap];\n\ntype MenuApiProviderProps = {\n NS: typeof Select | typeof Combobox;\n children: (api: SelectMenuApi) => ReactNode;\n};\n\n// The namespace's own Context, not one picked by comparing `NS` against `Combobox`: a bundler can duplicate the\n// namespace object, and a failed comparison put `Select.Context` under a Combobox root, which throws.\nconst MenuApiProvider = ({ NS, children }: MenuApiProviderProps) => <NS.Context>{children}</NS.Context>;\n\n/**\n * Internal shared shell for BitkitSelectMenu and BitkitMultiselectMenu.\n * Handles Content wrapper, search, loading, empty state, groups, and the action slot —\n * the caller only provides per-item rendering via renderItem and any sub-components\n * (e.g. <BitkitSelectMenu.Action />) via children.\n */\nexport type SelectMenuShellProps<T extends { value: string; group?: string }> = {\n NS: typeof Select | typeof Combobox;\n children?: BitkitSelectMenuActionChild;\n collection: ListCollection<T>;\n contentProps?: SelectContentProps;\n contentRef?: Ref<HTMLDivElement>;\n iconSize: SelectSizes['iconSize'];\n isLoading?: boolean;\n renderItem: (item: T) => ReactNode;\n spinnerSize: SelectSizes['spinnerSize'];\n styles: Record<string, SystemStyleObject>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuScrollProps &\n BitkitSelectMenuEmptyStateProps &\n BitkitSelectMenuErrorStateProps;\n\nexport const SelectMenuShell = <T extends { value: string; group?: string }>({\n NS,\n children,\n collection,\n contentProps,\n contentRef,\n emptyHelperText,\n emptyLabel = 'No matching options',\n errorHelperText,\n errorLabel,\n iconSize,\n isLoading = false,\n onScrolledToBottom,\n onSearchChange,\n renderItem,\n searchPlaceholder,\n searchValue,\n spinnerSize,\n styles,\n}: SelectMenuShellProps<T>) => {\n const { css: contentCss, ...restContentProps } = contentProps ?? {};\n const isEmpty = collection.size === 0;\n const hasError = !isLoading && !!errorLabel;\n const hasAction = isValidElement(children);\n\n const wasAtBottom = useRef(false);\n const handleItemListScroll = (event: UIEvent<HTMLDivElement>) => {\n const list = event.currentTarget;\n const atBottom = list.scrollTop >= list.scrollHeight - list.offsetHeight - 1;\n // Only the transition into \"at the end\", so resting at the bottom doesn't keep asking.\n if (atBottom && !wasAtBottom.current) onScrolledToBottom?.();\n wasAtBottom.current = atBottom;\n };\n\n return (\n <MenuApiProvider NS={NS}>\n {(api) => (\n <SelectMenuShellContextProvider value={{ api, iconSize, styles }}>\n <NS.Content\n css={[styles.content, contentCss]}\n ref={contentRef}\n onKeyDown={(event: ReactKeyboardEvent<HTMLDivElement>) => {\n if (event.key === 'Tab' && !isValidTabEvent(event)) api.setOpen(false);\n }}\n {...restContentProps}\n >\n {!onSearchChange && hasAction && <span data-autofocus=\"\" tabIndex={-1} aria-hidden=\"true\" />}\n {onSearchChange && (\n <SelectMenuSearch\n iconSize={iconSize}\n placeholder={searchPlaceholder}\n styles={styles}\n value={searchValue ?? ''}\n onSearchChange={onSearchChange}\n />\n )}\n {hasError ? (\n <Box css={styles.errorState}>\n <IconCrossCircle css={styles.errorIcon} size={iconSize} />\n <Box css={styles.errorTextBlock}>\n <Text css={styles.errorLabel}>{errorLabel}</Text>\n {errorHelperText && <Text css={styles.itemHelperText}>{errorHelperText}</Text>}\n </Box>\n </Box>\n ) : (\n <Box css={styles.itemList} onScroll={handleItemListScroll} tabIndex={-1}>\n {isLoading && (\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 {!isLoading && isEmpty && (\n <Box css={styles.emptyState}>\n <Text css={styles.itemLabel}>{emptyLabel}</Text>\n {emptyHelperText && <Text css={styles.itemHelperText}>{emptyHelperText}</Text>}\n </Box>\n )}\n {!isLoading &&\n !isEmpty &&\n collection.group().map(([type, group]) => (\n <NS.ItemGroup key={type}>\n {type && (\n <NS.ItemGroupLabel asChild>\n <BitkitGroupHeading label={type} paddingBlock=\"12\" paddingInline=\"16\" />\n </NS.ItemGroupLabel>\n )}\n {group.map(renderItem)}\n </NS.ItemGroup>\n ))}\n </Box>\n )}\n {children}\n </NS.Content>\n </SelectMenuShellContextProvider>\n )}\n </MenuApiProvider>\n );\n};\n\ntype SelectMenuSearchProps = {\n iconSize: '16' | '24';\n onSearchChange: (searchText: string) => void;\n placeholder?: string;\n styles: Record<string, SystemStyleObject>;\n value: string;\n};\n\nconst SelectMenuSearch = ({\n iconSize,\n onSearchChange,\n placeholder = 'Search...',\n styles,\n value,\n}: SelectMenuSearchProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n const input = inputRef.current;\n const content = input?.closest('[data-part=\"content\"]');\n if (!input || content?.getAttribute('data-state') !== 'open') return;\n const focused = document.activeElement;\n if (focused && focused !== content && content.contains(focused)) return;\n input.focus();\n }, []);\n\n return (\n <Box css={styles.searchInputGroup}>\n <IconMagnifier size={iconSize} color=\"icon/tertiary\" />\n <chakra.input\n aria-label=\"Search\"\n css={styles.searchInput}\n placeholder={placeholder}\n ref={inputRef}\n value={value}\n onChange={(event: ChangeEvent<HTMLInputElement>) => onSearchChange(event.target.value)}\n onKeyDown={(event) => {\n // Zag's Select.Content keyDown listener fires ITEM.CLICK + preventDefault on Space\n // regardless of which descendant is focused. That would eat the space before the\n // input can type it. Enter is left alone so \"type-then-Enter-to-select\" still works.\n if (event.key === ' ') event.stopPropagation();\n }}\n />\n {value && (\n <chakra.button\n type=\"button\"\n css={styles.searchClear}\n aria-label=\"Clear search\"\n onClick={() => onSearchChange('')}\n >\n <IconCross size={iconSize} />\n </chakra.button>\n )}\n </Box>\n );\n};\n"],"mappings":"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"}
package/dist/components/BitkitTour/BitkitTour.js CHANGED
@@ -5,9 +5,9 @@ import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
5
5
  import { useCallback, useEffect, useRef } from "react";
6
6
  import { jsx, jsxs } from "react/jsx-runtime";
7
7
  import { Portal } from "@chakra-ui/react/portal";
8
+ import { isIos } from "@zag-js/dom-query";
8
9
  import { Tour, useTour } from "@ark-ui/react/tour";
9
10
  import { useEnvironmentContext } from "@chakra-ui/react/environment";
10
- import { isIos } from "@zag-js/dom-query";
11
11
  import { preventBodyScroll } from "@zag-js/remove-scroll";
12
12
  //#region lib/components/BitkitTour/BitkitTour.tsx
13
13
  /**
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.470",
4
+ "version": "0.3.472",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",