@bacon-pos/ui 0.5.1 → 0.7.0

package/lib/commonjs/components/Select/Select.js

@@ -0,0 +1,246 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Select = Select;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _Dropdown = require("../Dropdown/Dropdown.js");
+var _Icon = require("../Icon/Icon.js");
+var _Menu = require("../Menu/Menu.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Width of the focus ring, in px (Figma "Focus" effect: spread 6). */const FOCUS_RING_SPREAD = 6;
+const FOCUS_RING_ALPHA = 0.15;
+
+/** Convert a `#RRGGBB` (or `#RGB`) token to an `rgba()` string at the given alpha. */
+function hexToRgba(hex, alpha) {
+  const h = hex.replace('#', '');
+  const full = h.length === 3 ? h.replace(/./g, c => c + c) : h;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+const SIZES = {
+  md: {
+    height: 48,
+    gap: 8,
+    iconSize: 20,
+    textVariant: 'bodyMedium'
+  },
+  lg: {
+    height: 58,
+    gap: 10,
+    iconSize: 24,
+    textVariant: 'bodyLarge'
+  }
+};
+
+/** An option in a `Select`. */
+
+/**
+ * Select — a form field that opens a `Dropdown` of options. The field mirrors
+ * `Input` (pill, label, helper/error, lime focus ring, red error ring); it is
+ * not editable — pressing it opens the menu, which matches the field width. The
+ * current option is marked with a check. With `multiple`, rows become checkboxes,
+ * the value is an array, and the menu stays open while picking.
+ */
+function Select({
+  options,
+  multiple = false,
+  value,
+  defaultValue,
+  onChange,
+  label,
+  helperText,
+  error,
+  placeholder = 'Select option',
+  leftIcon,
+  size = 'lg',
+  width,
+  fullWidth = true,
+  disabled = false,
+  renderValue,
+  matchTriggerWidth = true,
+  menuWidth,
+  maxHeight,
+  anchorOrigin = {
+    vertical: 'bottom',
+    horizontal: 'left'
+  },
+  menuOrigin = {
+    vertical: 'top',
+    horizontal: 'left'
+  },
+  offset = 8,
+  autoFit = true,
+  insets,
+  closeOnSelect,
+  style
+}) {
+  const theme = (0, _index.useTheme)();
+  const sizeConfig = SIZES[size];
+  const isControlled = value !== undefined;
+  const [internal, setInternal] = (0, _react.useState)(defaultValue ?? (multiple ? [] : undefined));
+  const current = isControlled ? value : internal;
+  const selectedKeys = multiple ? current ?? [] : current != null ? [current] : [];
+  const commit = next => {
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  };
+  const selectSingle = key => commit(key);
+  const toggleMulti = key => {
+    const set = new Set(selectedKeys);
+    if (set.has(key)) set.delete(key);else set.add(key);
+    commit([...set]);
+  };
+  const selectedOptions = options.filter(o => selectedKeys.includes(o.key));
+  const isEmpty = selectedOptions.length === 0;
+  const displayText = renderValue ? renderValue(selectedOptions) : isEmpty ? placeholder : selectedOptions.map(o => o.label).join(', ');
+  const hasError = Boolean(error);
+  const message = typeof error === 'string' ? error : helperText;
+  const rows = options.map(o => ({
+    key: o.key,
+    label: o.label,
+    disabled: o.disabled,
+    leading: o.icon ? {
+      kind: 'icon',
+      name: o.icon
+    } : undefined,
+    trailing: multiple ? {
+      kind: 'checkbox',
+      checked: selectedKeys.includes(o.key),
+      onChange: () => toggleMulti(o.key)
+    } : selectedKeys.includes(o.key) ? {
+      kind: 'icon',
+      name: 'check',
+      color: theme.colors.feedback.success
+    } : undefined
+  }));
+  const shouldClose = closeOnSelect ?? !multiple;
+  const iconBox = {
+    width: sizeConfig.iconSize,
+    height: sizeConfig.iconSize,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+  const containerWidth = width != null ? {
+    width,
+    alignSelf: 'flex-start'
+  } : fullWidth ? {
+    alignSelf: 'stretch'
+  } : {
+    alignSelf: 'flex-start'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerWidth, style],
+    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      variant: "bodySmall",
+      color: "secondary",
+      style: {
+        marginBottom: 4,
+        marginLeft: 8
+      },
+      children: label
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.Menu, {
+      anchorOrigin: anchorOrigin,
+      menuOrigin: menuOrigin,
+      offset: offset,
+      autoFit: autoFit,
+      insets: insets,
+      triggerStyle: {
+        alignSelf: 'stretch'
+      },
+      renderTrigger: ({
+        open,
+        toggle
+      }) => {
+        const showRing = open && !disabled;
+        const borderColor = disabled ? theme.colors.disabled.border : hasError ? theme.colors.feedback.error : open ? theme.colors.border.focus : theme.colors.border.default;
+        const ringColor = hasError ? theme.colors.feedback.error : theme.colors.border.focus;
+        const boxShadow = showRing ? [{
+          offsetX: 0,
+          offsetY: 0,
+          blurRadius: 0,
+          spreadDistance: FOCUS_RING_SPREAD,
+          color: hexToRgba(ringColor, FOCUS_RING_ALPHA)
+        }] : undefined;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+          onPress: toggle,
+          disabled: disabled,
+          accessibilityRole: "button",
+          accessibilityState: {
+            expanded: open,
+            disabled
+          },
+          accessibilityLabel: label ?? placeholder,
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: sizeConfig.gap,
+            height: sizeConfig.height,
+            paddingHorizontal: 16,
+            borderWidth: 1,
+            borderColor,
+            borderRadius: theme.radii.pill,
+            backgroundColor: disabled ? theme.colors.disabled.background : theme.colors.background.default,
+            boxShadow
+          },
+          children: [leftIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: iconBox,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              name: leftIcon,
+              size: sizeConfig.iconSize,
+              color: disabled ? theme.colors.disabled.foreground : 'secondary'
+            })
+          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+            variant: sizeConfig.textVariant,
+            color: disabled ? 'tertiary' : isEmpty ? 'tertiary' : 'primary',
+            numberOfLines: 1,
+            style: {
+              flex: 1,
+              minWidth: 0
+            },
+            children: displayText
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [iconBox, {
+              transform: [{
+                rotate: open ? '180deg' : '0deg'
+              }]
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              name: "chevron-down",
+              size: sizeConfig.iconSize,
+              color: disabled ? theme.colors.disabled.foreground : 'secondary'
+            })
+          })]
+        });
+      },
+      children: ({
+        close,
+        triggerWidth,
+        maxHeight: autoMaxHeight
+      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
+        options: rows,
+        width: matchTriggerWidth ? triggerWidth : menuWidth,
+        maxHeight: maxHeight ?? autoMaxHeight,
+        onSelect: multiple ? undefined : key => {
+          selectSingle(key);
+          if (shouldClose) close();
+        }
+      })
+    }), message ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      variant: "bodySmall",
+      color: hasError ? theme.colors.feedback.error : 'tertiary',
+      style: {
+        marginTop: 8,
+        marginLeft: 8
+      },
+      children: message
+    }) : null]
+  });
+}
+//# sourceMappingURL=Select.js.map

package/lib/commonjs/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_index","_Dropdown","_Icon","_Menu","_Text","_jsxRuntime","FOCUS_RING_SPREAD","FOCUS_RING_ALPHA","hexToRgba","hex","alpha","h","replace","full","length","c","r","parseInt","slice","g","b","SIZES","md","height","gap","iconSize","textVariant","lg","Select","options","multiple","value","defaultValue","onChange","label","helperText","error","placeholder","leftIcon","size","width","fullWidth","disabled","renderValue","matchTriggerWidth","menuWidth","maxHeight","anchorOrigin","vertical","horizontal","menuOrigin","offset","autoFit","insets","closeOnSelect","style","theme","useTheme","sizeConfig","isControlled","undefined","internal","setInternal","useState","current","selectedKeys","commit","next","selectSingle","key","toggleMulti","set","Set","has","delete","add","selectedOptions","filter","o","includes","isEmpty","displayText","map","join","hasError","Boolean","message","rows","leading","icon","kind","name","trailing","checked","color","colors","feedback","success","shouldClose","iconBox","alignItems","justifyContent","containerWidth","alignSelf","jsxs","View","children","jsx","Text","variant","marginBottom","marginLeft","Menu","triggerStyle","renderTrigger","open","toggle","showRing","borderColor","border","focus","default","ringColor","boxShadow","offsetX","offsetY","blurRadius","spreadDistance","Pressable","onPress","accessibilityRole","accessibilityState","expanded","accessibilityLabel","flexDirection","paddingHorizontal","borderWidth","borderRadius","radii","pill","backgroundColor","background","Icon","foreground","numberOfLines","flex","minWidth","transform","rotate","close","triggerWidth","autoMaxHeight","Dropdown","onSelect","marginTop"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Select/Select.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Select/Select.stories.js

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SingleSelect = exports.Scrollable = exports.MultiSelect = exports.InsideDialog = exports.FixedMenuWidth = exports.Error = exports.Disabled = exports.Default = exports.CustomWidth = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _Select = require("./Select.js");
+var _Button = require("../Button/Button.js");
+var _Dialog = require("../Dialog/Dialog.js");
+var _Text = require("../Text/Text.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const meta = {
+  title: 'Components/Select',
+  component: _Select.Select
+};
+var _default = exports.default = meta;
+const OPTIONS = [{
+  key: 'dine-in',
+  label: 'Dine in',
+  icon: 'dish'
+}, {
+  key: 'take-out',
+  label: 'Take out',
+  icon: 'shopping-bag'
+}, {
+  key: 'delivery',
+  label: 'Delivery',
+  icon: 'truck-delivery'
+}, {
+  key: 'pickup',
+  label: 'Pickup',
+  icon: 'shopping-bag'
+}];
+function Frame({
+  children
+}) {
+  // Height gives the open menu room in the Storybook canvas.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      padding: 24,
+      width: 360,
+      height: 420
+    },
+    children: children
+  });
+}
+
+/** Default field (matches Figma "Default"). */
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      label: "Label",
+      helperText: "Helper text",
+      leftIcon: "shopping-bag",
+      onChange: () => {}
+    })
+  })
+};
+
+/** Single select — the current option is marked with a check. */
+const SingleSelect = exports.SingleSelect = {
+  render: () => {
+    const [value, setValue] = (0, _react.useState)('dine-in');
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Frame, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+        options: OPTIONS,
+        label: "Order type",
+        helperText: "Helper text",
+        leftIcon: "shopping-bag",
+        value: value,
+        onChange: setValue
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.Text, {
+        variant: "caption",
+        color: "secondary",
+        style: {
+          marginTop: 12
+        },
+        children: ["value: ", String(value)]
+      })]
+    });
+  }
+};
+
+/** Multi select — rows become checkboxes; the menu stays open while picking. */
+const MultiSelect = exports.MultiSelect = {
+  render: () => {
+    const [value, setValue] = (0, _react.useState)(['dine-in', 'delivery']);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Frame, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+        options: OPTIONS,
+        multiple: true,
+        label: "Order types",
+        helperText: "Choose one or more",
+        value: value,
+        onChange: setValue
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.Text, {
+        variant: "caption",
+        color: "secondary",
+        style: {
+          marginTop: 12
+        },
+        children: ["value: ", Array.isArray(value) ? value.join(', ') : value]
+      })]
+    });
+  }
+};
+
+/** Error state — red border, red ring on open, red helper text. */
+const Error = exports.Error = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      label: "Order type",
+      error: "Please choose an option",
+      leftIcon: "shopping-bag",
+      onChange: () => {}
+    })
+  })
+};
+
+/** Disabled. */
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      label: "Label",
+      helperText: "Helper text",
+      leftIcon: "shopping-bag",
+      disabled: true,
+      defaultValue: "dine-in"
+    })
+  })
+};
+
+/** Long list — the menu scrolls past maxHeight. */
+const Scrollable = exports.Scrollable = {
+  render: () => {
+    const many = Array.from({
+      length: 20
+    }).map((_, i) => ({
+      key: String(i),
+      label: `Option ${i + 1}`
+    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+        options: many,
+        label: "Pick one",
+        maxHeight: 260,
+        onChange: () => {}
+      })
+    });
+  }
+};
+
+/** Fixed menu width instead of matching the field. */
+const FixedMenuWidth = exports.FixedMenuWidth = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      label: "Order type",
+      matchTriggerWidth: false,
+      menuWidth: 300,
+      onChange: () => {}
+    })
+  })
+};
+
+/** Fixed field width (default is full width, the Figma behavior). */
+const CustomWidth = exports.CustomWidth = {
+  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(Frame, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      label: "Order type",
+      width: 260,
+      leftIcon: "shopping-bag",
+      onChange: () => {}
+    })
+  })
+};
+
+/**
+ * Inside a Dialog — the two modals coexist: the menu positions over the dialog,
+ * tapping outside the menu closes only the menu (not the dialog), and back closes
+ * the menu first.
+ */
+const InsideDialog = exports.InsideDialog = {
+  render: () => {
+    const [open, setOpen] = (0, _react.useState)(false);
+    const [value, setValue] = (0, _react.useState)('dine-in');
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        padding: 24
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        label: "Open dialog",
+        onPress: () => setOpen(true)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.Dialog, {
+        visible: open,
+        onClose: () => setOpen(false),
+        title: "Order details",
+        subtitle: "Pick the order type",
+        cancel: {},
+        actions: [{
+          label: 'Save',
+          onPress: () => setOpen(false)
+        }],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+          options: OPTIONS,
+          label: "Order type",
+          leftIcon: "shopping-bag",
+          value: value,
+          onChange: setValue
+        })
+      })]
+    });
+  }
+};
+//# sourceMappingURL=Select.stories.js.map

package/lib/commonjs/components/Select/Select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_Select","_Button","_Dialog","_Text","_jsxRuntime","meta","title","component","Select","_default","exports","default","OPTIONS","key","label","icon","Frame","children","jsx","View","style","padding","width","height","Default","render","options","helperText","leftIcon","onChange","SingleSelect","value","setValue","useState","jsxs","Text","variant","color","marginTop","String","MultiSelect","multiple","Array","isArray","join","Error","error","Disabled","disabled","defaultValue","Scrollable","many","from","length","map","_","i","maxHeight","FixedMenuWidth","matchTriggerWidth","menuWidth","CustomWidth","InsideDialog","open","setOpen","Button","onPress","Dialog","visible","onClose","subtitle","cancel","actions"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/Select/Select.stories.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/components/Select/Select.test.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _react = require("react");
+var _reactNative = require("@testing-library/react-native");
+var _index = require("../../theme/index.js");
+var _Select = require("./Select.js");
+var _Dialog = require("../Dialog/Dialog.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function wrap(ui) {
+  return (0, _reactNative.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ThemeProvider, {
+    children: ui
+  }));
+}
+const OPTIONS = [{
+  key: 'dine-in',
+  label: 'Dine in'
+}, {
+  key: 'take-out',
+  label: 'Take out'
+}, {
+  key: 'delivery',
+  label: 'Delivery'
+}];
+describe('Select (single)', () => {
+  it('shows the placeholder when empty', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      placeholder: "Select option"
+    }));
+    expect(_reactNative.screen.getByText('Select option')).toBeTruthy();
+  });
+  it('shows the selected label', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      value: "take-out"
+    }));
+    expect(_reactNative.screen.getByText('Take out')).toBeTruthy();
+  });
+  it('opens, selects an option, calls onChange and closes', () => {
+    const onChange = jest.fn();
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      placeholder: "Select option",
+      onChange: onChange
+    }));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Select option'));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Delivery'));
+    expect(onChange).toHaveBeenCalledWith('delivery');
+    // Menu closed → the other option is gone.
+    expect(_reactNative.screen.queryByText('Take out')).toBeNull();
+  });
+  it('renders the error message', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      error: "Required"
+    }));
+    expect(_reactNative.screen.getByText('Required')).toBeTruthy();
+  });
+  it('does not open when disabled', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      placeholder: "Select option",
+      disabled: true
+    }));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Select option'));
+    expect(_reactNative.screen.queryByText('Delivery')).toBeNull();
+  });
+});
+describe('Select (multiple)', () => {
+  function MultiControlled() {
+    const [value, setValue] = (0, _react.useState)([]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      multiple: true,
+      value: value,
+      onChange: setValue,
+      placeholder: "Pick"
+    });
+  }
+  it('adds keys to the array and stays open', () => {
+    const onChange = jest.fn();
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      multiple: true,
+      value: [],
+      onChange: onChange,
+      placeholder: "Pick"
+    }));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Pick'));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Dine in'));
+    expect(onChange).toHaveBeenCalledWith(['dine-in']);
+    // Still open — other rows remain visible.
+    expect(_reactNative.screen.getByText('Delivery')).toBeTruthy();
+  });
+  it('toggles selected keys off', () => {
+    const onChange = jest.fn();
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      multiple: true,
+      value: ['dine-in'],
+      onChange: onChange,
+      placeholder: "Pick"
+    }));
+    // Before opening, only the trigger shows "Dine in".
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Dine in')); // opens the menu
+    // Now there are two: trigger + row. Press the row (last).
+    const matches = _reactNative.screen.getAllByText('Dine in');
+    _reactNative.fireEvent.press(matches[matches.length - 1]);
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+  it('joins multiple labels in the trigger', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+      options: OPTIONS,
+      multiple: true,
+      value: ['dine-in', 'delivery']
+    }));
+    expect(_reactNative.screen.getByText('Dine in, Delivery')).toBeTruthy();
+  });
+  it('reflects new picks (controlled loop)', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(MultiControlled, {}));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Pick'));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Take out'));
+    // Menu stays open, so the label now appears on both the trigger and the row.
+    expect(_reactNative.screen.getAllByText('Take out').length).toBe(2);
+  });
+});
+describe('Select inside Dialog', () => {
+  function DialogWithSelect() {
+    const [value, setValue] = (0, _react.useState)('dine-in');
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dialog.Dialog, {
+      visible: true,
+      onClose: () => {},
+      title: "Order",
+      actions: [{
+        label: 'Save'
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.Select, {
+        options: OPTIONS,
+        label: "Order type",
+        value: value,
+        onChange: setValue
+      })
+    });
+  }
+  it('opens the select menu over the dialog without closing it', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(DialogWithSelect, {}));
+    // Dialog is visible.
+    expect(_reactNative.screen.getByText('Order')).toBeTruthy();
+    // Open the select (trigger shows "Dine in").
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Dine in'));
+    // Menu rows appear...
+    expect(_reactNative.screen.getByText('Delivery')).toBeTruthy();
+    // ...and the dialog is still there.
+    expect(_reactNative.screen.getByText('Order')).toBeTruthy();
+  });
+  it('selecting in the menu updates the field and keeps the dialog open', () => {
+    wrap(/*#__PURE__*/(0, _jsxRuntime.jsx)(DialogWithSelect, {}));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Dine in'));
+    _reactNative.fireEvent.press(_reactNative.screen.getByText('Delivery'));
+    // Field now shows Delivery; dialog title still present.
+    expect(_reactNative.screen.getByText('Delivery')).toBeTruthy();
+    expect(_reactNative.screen.getByText('Order')).toBeTruthy();
+  });
+});
+//# sourceMappingURL=Select.test.js.map