bootstrap-rn 0.2.1 → 0.2.3

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.
@@ -5510,21 +5510,21 @@
5510
5510
  }, function (t) {
5511
5511
  return calculate(t['input-padding-y'], '*', 0.5);
5512
5512
  }), add(function (t) {
5513
- return calculate(t['input-line-height'], '*', 1);
5513
+ return calculate(t['input-line-height'], '*', t['input-font-size']);
5514
5514
  }, // 1em
5515
5515
  add(function (t) {
5516
5516
  return calculate(t['input-padding-y'], '*', 2);
5517
5517
  }, function (t) {
5518
5518
  return t['input-height-border'];
5519
5519
  })), add(function (t) {
5520
- return calculate(t['input-line-height'], '*', 1);
5520
+ return calculate(t['input-line-height'], '*', t['input-font-size-sm']);
5521
5521
  }, // 1em
5522
5522
  add(function (t) {
5523
5523
  return calculate(t['input-padding-y-sm'], '*', 2);
5524
5524
  }, function (t) {
5525
5525
  return t['input-height-border'];
5526
5526
  })), add(function (t) {
5527
- return calculate(t['input-line-height'], '*', 1);
5527
+ return calculate(t['input-line-height'], '*', t['input-font-size-lg']);
5528
5528
  }, // 1em
5529
5529
  add(function (t) {
5530
5530
  return calculate(t['input-padding-y-lg'], '*', 2);
@@ -7505,7 +7505,7 @@
7505
7505
 
7506
7506
  var _excluded$1l = ["children", "color", "size", "outline", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
7507
7507
 
7508
- var _templateObject$15, _templateObject2$P, _templateObject3$p, _templateObject4$m, _templateObject5$j, _templateObject6$g, _templateObject7$b, _templateObject8$b, _templateObject9$9, _templateObject10$9, _templateObject11$6, _templateObject12$5, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
7508
+ var _templateObject$15, _templateObject2$P, _templateObject3$p, _templateObject4$m, _templateObject5$j, _templateObject6$g, _templateObject7$b, _templateObject8$b, _templateObject9$a, _templateObject10$a, _templateObject11$7, _templateObject12$5, _templateObject13$5, _templateObject14$4, _templateObject15$3, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
7509
7509
  var propTypes$1p = {
7510
7510
  children: PropTypes.node.isRequired,
7511
7511
  color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
@@ -7545,7 +7545,7 @@
7545
7545
  return t['btn-active-bg-shade-amount'];
7546
7546
  }, value), shadeColor(function (t) {
7547
7547
  return t['btn-active-border-shade-amount'];
7548
- }, value))), _defineProperty(_ref, ".btn-".concat(color, ".active --text"), css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n color: ", ";\n "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, ".disabled"), css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n $disabled-background: ", ";\n $disabled-border: ", ";\n\n background-color: $disabled-background;\n // Remove CSS gradients if they're enabled\n // background-image: if($enable-gradients, none, null);\n border-color: $disabled-border;\n "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, ".disabled --text"), css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteral(["\n $disabled-color: ", ";\n\n color: $disabled-color;\n "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteral(["\n border-color: ", ";\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n\n &:focus {\n // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n\n &:active {\n background-color: ", ";\n border-color: ", ";\n\n /* &:focus {\n @if $enable-shadows {\n @include box-shadow(\n $btn-active-box-shadow,\n 0 0 0 $btn-focus-width rgba($color, 0.5)\n );\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n }\n } */\n }\n "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, " --text"), css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteral(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled"), css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n background-color: transparent;\n "])))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled --text"), css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n color: ", ";\n "])), value)), _ref;
7548
+ }, value))), _defineProperty(_ref, ".btn-".concat(color, ".active --text"), css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n color: ", ";\n "])), colorContrast(value))), _defineProperty(_ref, ".btn-".concat(color, ".disabled"), css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteral(["\n $disabled-background: ", ";\n $disabled-border: ", ";\n\n background-color: $disabled-background;\n // Remove CSS gradients if they're enabled\n // background-image: if($enable-gradients, none, null);\n border-color: $disabled-border;\n "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, ".disabled --text"), css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteral(["\n $disabled-color: ", ";\n\n color: $disabled-color;\n "])), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteral(["\n border-color: ", ";\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n\n &:focus {\n // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n\n &:active {\n background-color: ", ";\n border-color: ", ";\n\n /* &:focus {\n @if $enable-shadows {\n @include box-shadow(\n $btn-active-box-shadow,\n 0 0 0 $btn-focus-width rgba($color, 0.5)\n );\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n }\n } */\n }\n "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, " --text"), css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteral(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "])), value, colorContrast(value), colorContrast(value))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled"), css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteral(["\n background-color: transparent;\n "])))), _defineProperty(_ref, ".btn-outline-".concat(color, ".disabled --text"), css(_templateObject13$5 || (_templateObject13$5 = _taggedTemplateLiteral(["\n color: ", ";\n "])), value)), _ref;
7549
7549
  })), {}, {
7550
7550
  '.btn-link --text': css(_templateObject14$4 || (_templateObject14$4 = _taggedTemplateLiteral(["\n font-weight: $font-weight-normal;\n color: $btn-link-color;\n text-decoration-color: $btn-link-color; // added for bootstrap-rn\n text-decoration-line: $link-decoration;\n\n &:hover {\n color: $btn-link-hover-color;\n text-decoration-color: $btn-link-hover-color; // added for bootstrap-rn\n text-decoration-line: $link-hover-decoration;\n }\n\n &:focus {\n text-decoration-line: $link-hover-decoration;\n }\n\n // No need for an active state here\n "]))),
7551
7551
  '.btn-link.disabled --text': css(_templateObject15$3 || (_templateObject15$3 = _taggedTemplateLiteral(["\n color: $btn-link-disabled-color;\n "]))),
@@ -7664,7 +7664,7 @@
7664
7664
  styleName: PropTypes.any
7665
7665
  };
7666
7666
  var styles$15 = StyleSheet.create({
7667
- body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n background-color: $body-bg;\n flex-grow: 1; // added for bootstrap-rn\n "]))),
7667
+ body: css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n background-color: $body-bg;\n height: 100%; // added for bootstrap-rn\n "]))),
7668
7668
  'body --text': css(_templateObject2$N || (_templateObject2$N = _taggedTemplateLiteral(["\n color: $body-color;\n text-align: $body-text-align;\n "])))
7669
7669
  });
7670
7670
  var Body = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -8257,26 +8257,28 @@
8257
8257
  }
8258
8258
 
8259
8259
  function useControlledState(defaultValue, controlledValue) {
8260
- var onChange = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
8260
+ var handleChange = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {};
8261
8261
 
8262
8262
  var _useState = React.useState(defaultValue),
8263
8263
  _useState2 = _slicedToArray(_useState, 2),
8264
8264
  stateValue = _useState2[0],
8265
8265
  setStateValue = _useState2[1];
8266
8266
 
8267
- var isControlled = typeof controlledValue === 'boolean';
8267
+ var isControlled = controlledValue !== undefined && controlledValue !== null;
8268
8268
  var value = isControlled ? controlledValue : stateValue;
8269
8269
 
8270
- var setValue = function setValue(nextValue) {
8270
+ var setValue = function setValue(next) {
8271
+ var nextValue = typeof next === 'function' ? next(value) : next;
8272
+
8271
8273
  if (value === nextValue) {
8272
8274
  return;
8273
8275
  }
8274
8276
 
8275
8277
  if (!isControlled) {
8276
- setStateValue(nextValue);
8278
+ setStateValue(next);
8277
8279
  }
8278
8280
 
8279
- onChange(nextValue);
8281
+ handleChange(nextValue);
8280
8282
  };
8281
8283
 
8282
8284
  return [value, setValue];
@@ -8565,7 +8567,7 @@
8565
8567
 
8566
8568
  var _excluded$19 = ["type", "value", "onFocus", "onBlur", "disabled", "valid", "invalid", "useNativeComponent", "style"];
8567
8569
 
8568
- var _templateObject$Y, _templateObject2$H, _templateObject3$m, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$9, _templateObject8$9, _templateObject9$8, _templateObject10$8, _templateObject11$5, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
8570
+ var _templateObject$Y, _templateObject2$H, _templateObject3$m, _templateObject4$j, _templateObject5$g, _templateObject6$e, _templateObject7$9, _templateObject8$9, _templateObject9$9, _templateObject10$9, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
8569
8571
  /* eslint-disable react/no-unused-prop-types */
8570
8572
 
8571
8573
  var propTypes$1c = {
@@ -8596,17 +8598,17 @@
8596
8598
  '.form-check-input[type="radio"]:checked': css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n // @if $enable-gradients {\n // background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);\n // } @else {\n background-image: ", ";\n // }\n "])), function (t) {
8597
8599
  return escapeSvg(t['form-check-radio-checked-bg-image']);
8598
8600
  }),
8599
- '.form-check-input:disabled': css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n @include platform(web) {\n pointer-events: none;\n filter: none;\n }\n opacity: $form-check-label-disabled-opacity;\n "])))
8601
+ '.form-check-input:disabled': css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteral(["\n @include platform(web) {\n pointer-events: none;\n filter: none;\n }\n opacity: $form-check-label-disabled-opacity;\n "])))
8600
8602
  }, each(FORM_VALIDATION_STATES, function (state, data) {
8601
8603
  var _ref;
8602
8604
 
8603
- return _ref = {}, _defineProperty(_ref, ".form-check-input:".concat(state), css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteral(["\n border-color: ", ";\n\n &:focus {\n border-color: ", "; // added for bootstrap-rn\n @include platform(web) {\n box-shadow: 0 0 $input-btn-focus-blur $input-focus-width\n rgba(", ", $input-btn-focus-color-opacity);\n }\n }\n "])), function (t) {
8605
+ return _ref = {}, _defineProperty(_ref, ".form-check-input:".concat(state), css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteral(["\n border-color: ", ";\n\n &:focus {\n border-color: ", "; // added for bootstrap-rn\n @include platform(web) {\n box-shadow: 0 0 $input-btn-focus-blur $input-focus-width\n rgba(", ", $input-btn-focus-color-opacity);\n }\n }\n "])), function (t) {
8604
8606
  return data(t).color;
8605
8607
  }, function (t) {
8606
8608
  return data(t).color;
8607
8609
  }, function (t) {
8608
8610
  return data(t).color;
8609
- })), _defineProperty(_ref, ".form-check-input:".concat(state, ":checked"), css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), function (t) {
8611
+ })), _defineProperty(_ref, ".form-check-input:".concat(state, ":checked"), css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), function (t) {
8610
8612
  return data(t).color;
8611
8613
  })), _ref;
8612
8614
  })), {}, {
@@ -8976,7 +8978,7 @@
8976
8978
 
8977
8979
  var _excluded$15 = ["children", "start", "right", "end", "style", "textStyle"];
8978
8980
 
8979
- var _templateObject$U, _templateObject2$F, _templateObject3$k, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$8, _templateObject8$8, _templateObject9$7, _templateObject10$7;
8981
+ var _templateObject$U, _templateObject2$F, _templateObject3$k, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$8, _templateObject8$8, _templateObject9$8, _templateObject10$8;
8980
8982
  var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
8981
8983
  var propTypes$16 = {
8982
8984
  children: PropTypes.node.isRequired,
@@ -9001,9 +9003,9 @@
9001
9003
  '.dropstart .dropdown-menu[data-bs-popper]': css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n top: 0;\n right: 100%;\n left: auto;\n margin-top: 0;\n margin-right: $dropdown-spacer;\n "]))),
9002
9004
  '.navbar-nav .dropdown-menu': css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n position: relative; // static;\n "])))
9003
9005
  }, each(GRID_BREAKPOINTS, function (breakpoint) {
9004
- return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .dropdown-menu"), css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n position: absolute;\n }\n "])), next(breakpoint)));
9006
+ return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .dropdown-menu"), css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n position: absolute;\n }\n "])), next(breakpoint)));
9005
9007
  })), {}, {
9006
- '.dropdown-menu --text': css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n font-size: $dropdown-font-size;\n color: $dropdown-color;\n text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n "])))
9008
+ '.dropdown-menu --text': css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteral(["\n font-size: $dropdown-font-size;\n color: $dropdown-color;\n text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n "])))
9007
9009
  }));
9008
9010
 
9009
9011
  var getAlignment = function getAlignment(media, start, end) {
@@ -9669,7 +9671,7 @@
9669
9671
 
9670
9672
  var _excluded$R = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "editable", "selectTextOnFocus", "style"];
9671
9673
 
9672
- var _templateObject$H, _templateObject2$w, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$7;
9674
+ var _templateObject$H, _templateObject2$w, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$7, _templateObject8$7, _templateObject9$7, _templateObject10$7, _templateObject11$5;
9673
9675
  var propTypes$T = {
9674
9676
  size: PropTypes.oneOf(['sm', 'lg']),
9675
9677
  placeholderTextColor: PropTypes.string,
@@ -9681,17 +9683,36 @@
9681
9683
  selectTextOnFocus: PropTypes.bool,
9682
9684
  // eslint-disable-next-line react/forbid-prop-types
9683
9685
  style: PropTypes.any
9684
- };
9686
+ }; // Known issues:
9687
+ //
9688
+ // line-height (iOS)
9689
+ // If a line height is defined on iOS the text will be displayed on the bottom
9690
+ // of the line. As a workaround the line height is only defined for multi line
9691
+ // inputs.
9692
+ //
9693
+ // multi line height (iOS)
9694
+ // A multi line input on iOS has only the height of a single line input. As a
9695
+ // workaround we added a height of $input-height-sm + 8rem for multi line
9696
+ // inputs on iOS.
9697
+ //
9698
+ // single line height (Android)
9699
+ // If no height is defined, Android sets a text line height of 28px auto-
9700
+ // matically, which leads to a larger height than min height for the default
9701
+ // and sm size. As a workaround we set a height for single line inputs.
9702
+
9685
9703
  var styles$G = StyleSheet.create(_objectSpread2({
9686
- '.form-control': css(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n // display: block;\n width: 100%;\n padding: $input-padding-y $input-padding-x;\n font-family: $input-font-family;\n font-size: $input-font-size;\n font-weight: $input-font-weight;\n line-height: $input-font-size * $input-line-height;\n color: $input-color;\n background-color: $input-bg;\n // background-clip: padding-box;\n border: $input-border-width solid $input-border-color;\n @include platform(web) {\n appearance: none; // Fix appearance for date inputs in Safari\n }\n\n // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n border-radius: $input-border-radius;\n\n // @include box-shadow($input-box-shadow);\n // @include transition($input-transition);\n\n // Customize the \":focus\" state to imitate native WebKit styles.\n &:focus {\n color: $input-focus-color;\n background-color: $input-focus-bg;\n border-color: $input-focus-border-color;\n @include platform(web) {\n outline-width: 0; // outline: 0;\n // @if $enable-shadows {\n // @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n // } @else {\n // // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: $input-focus-box-shadow;\n // }\n }\n }\n "]))),
9704
+ '.form-control': css(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n // display: block;\n width: 100%;\n min-height: $input-height; // added for bootstrap-rn\n padding: $input-padding-y $input-padding-x;\n font-family: $input-font-family;\n font-size: $input-font-size;\n font-weight: $input-font-weight;\n @include platform(web) {\n line-height: $input-font-size * $input-line-height;\n }\n color: $input-color;\n background-color: $input-bg;\n // background-clip: padding-box;\n border: $input-border-width solid $input-border-color;\n @include platform(web) {\n appearance: none; // Fix appearance for date inputs in Safari\n }\n\n // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n border-radius: $input-border-radius;\n\n // @include box-shadow($input-box-shadow);\n // @include transition($input-transition);\n\n // Customize the \":focus\" state to imitate native WebKit styles.\n &:focus {\n color: $input-focus-color;\n background-color: $input-focus-bg;\n border-color: $input-focus-border-color;\n @include platform(web) {\n outline-width: 0; // outline: 0;\n // @if $enable-shadows {\n // @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n // } @else {\n // // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: $input-focus-box-shadow;\n // }\n }\n }\n "]))),
9687
9705
  '.form-control.disabled': css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n background-color: $input-disabled-bg;\n border-color: $input-disabled-border-color;\n // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n opacity: 1;\n "]))),
9688
- '.form-control-sm': css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n padding: $input-padding-y-sm $input-padding-x-sm;\n font-size: $input-font-size-sm;\n line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n border-radius: $input-border-radius-sm;\n "]))),
9689
- '.form-control-lg': css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n padding: $input-padding-y-lg $input-padding-x-lg;\n font-size: $input-font-size-lg;\n line-height: $input-font-size-lg * $line-height-base; // added for bootstrap-rn\n border-radius: $input-border-radius-lg;\n "]))),
9690
- '.form-control-multiline': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n text-align-vertical: top; // added for bootstrap-rn\n min-height: $input-height;\n\n @include platform(ios) {\n min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n }\n "]))),
9691
- '.form-control-multiline-sm': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n\n @include platform(ios) {\n // TODO: Adjust ios height to sm size\n min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n }\n "]))),
9692
- '.form-control-multiline-lg': css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n\n @include platform(ios) {\n // TODO: Adjust ios height to lg size\n min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n }\n "])))
9706
+ '.form-control-sm': css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n padding: $input-padding-y-sm $input-padding-x-sm;\n font-size: $input-font-size-sm;\n @include platform(web) {\n line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n }\n border-radius: $input-border-radius-sm;\n "]))),
9707
+ '.form-control-lg': css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n padding: $input-padding-y-lg $input-padding-x-lg;\n font-size: $input-font-size-lg;\n @include platform(web) {\n line-height: $input-font-size-lg * $line-height-base; // added for bootstrap-rn\n }\n border-radius: $input-border-radius-lg;\n "]))),
9708
+ '.form-control:not(textarea)': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n @include platform(android) {\n height: $input-height; // added for bootstrap-rn\n }\n "]))),
9709
+ '.form-control-sm:not(textarea)': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n @include platform(android) {\n height: $input-height-sm; // added for bootstrap-rn\n }\n "]))),
9710
+ '.form-control-lg:not(textarea)': css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n @include platform(android) {\n height: $input-height-lg; // added for bootstrap-rn\n }\n "]))),
9711
+ 'textarea.form-control': css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n text-align-vertical: top; // added for bootstrap-rn\n min-height: $input-height;\n\n @include platform(ios) {\n min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n }\n @include platform(native) {\n line-height: $input-font-size * $input-line-height; // added for bootstrap-rn\n }\n "]))),
9712
+ 'textarea.form-control-sm': css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n\n @include platform(ios) {\n // TODO: Adjust ios height to sm size\n min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n }\n @include platform(native) {\n line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n }\n "]))),
9713
+ 'textarea.form-control-lg': css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n\n @include platform(ios) {\n // TODO: Adjust ios height to lg size\n min-height: $input-height-sm + 8rem; // added for bootstrap-rn\n }\n @include platform(native) {\n line-height: $input-font-size-sm * $line-height-base; // added for bootstrap-rn\n }\n "])))
9693
9714
  }, each(FORM_VALIDATION_STATES, function (state, data) {
9694
- return _defineProperty({}, ".form-control:".concat(state), css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n border-color: ", ";\n\n &:focus {\n border-color: ", ";\n @include platform(web) {\n box-shadow: 0 0 $input-btn-focus-blur $input-focus-width\n rgba(", ", $input-btn-focus-color-opacity);\n }\n }\n "])), function (t) {
9715
+ return _defineProperty({}, ".form-control:".concat(state), css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteral(["\n border-color: ", ";\n\n &:focus {\n border-color: ", ";\n @include platform(web) {\n box-shadow: 0 0 $input-btn-focus-blur $input-focus-width\n rgba(", ", $input-btn-focus-color-opacity);\n }\n }\n "])), function (t) {
9695
9716
  return data(t).color;
9696
9717
  }, function (t) {
9697
9718
  return data(t).color;
@@ -9723,7 +9744,7 @@
9723
9744
  style = modifierProps.style,
9724
9745
  elementProps = _objectWithoutProperties(modifierProps, _excluded$R);
9725
9746
 
9726
- var classes = getStyles(styles$G, ['.form-control', disabled && '.form-control.disabled', size === 'sm' && '.form-control-sm', size === 'lg' && '.form-control-lg', multiline && '.form-control-multiline', multiline && size === 'sm' && '.form-control-multiline-sm', multiline && size === 'lg' && '.form-control-multiline-lg', valid && '.form-control:valid', invalid && '.form-control:invalid']);
9747
+ var classes = getStyles(styles$G, ['.form-control', disabled && '.form-control.disabled', size === 'sm' && '.form-control-sm', size === 'lg' && '.form-control-lg', !multiline && '.form-control:not(textarea)', !multiline && size === 'sm' && '.form-control-sm:not(textarea)', !multiline && size === 'lg' && '.form-control-lg:not(textarea)', multiline && 'textarea.form-control', multiline && size === 'sm' && 'textarea.form-control-sm', multiline && size === 'lg' && 'textarea.form-control-lg', valid && '.form-control:valid', invalid && '.form-control:invalid']);
9727
9748
  return /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, elementProps, {
9728
9749
  ref: modifierRef,
9729
9750
  placeholderTextColor: placeholderTextColor,
@@ -10828,7 +10849,7 @@
10828
10849
  ModalTitle.displayName = 'ModalTitle';
10829
10850
  ModalTitle.propTypes = propTypes$B;
10830
10851
 
10831
- var _excluded$y = ["children", "style", "contentContainerStyle"];
10852
+ var _excluded$y = ["children", "style", "innerStyle"];
10832
10853
 
10833
10854
  var _templateObject$t;
10834
10855
  var propTypes$A = {
@@ -10836,7 +10857,7 @@
10836
10857
  // eslint-disable-next-line react/forbid-prop-types
10837
10858
  style: PropTypes.any,
10838
10859
  // eslint-disable-next-line react/forbid-prop-types
10839
- contentContainerStyle: PropTypes.any
10860
+ innerStyle: PropTypes.any
10840
10861
  };
10841
10862
  var styles$t = StyleSheet.create({
10842
10863
  '.modal-body': css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n position: relative;\n // Enable \"flex-grow: 1\" so that the body take up as much space as possible\n // when there should be a fixed height on \".modal-dialog\".\n // Note from bootstrap-rn: Centered modals do not work with this style, but\n // everything just works fine without this style.\n // flex: 1 1 auto;\n padding: $modal-inner-padding;\n "])))
@@ -10844,7 +10865,7 @@
10844
10865
  var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
10845
10866
  var children = props.children,
10846
10867
  style = props.style,
10847
- contentContainerStyle = props.contentContainerStyle,
10868
+ innerStyle = props.innerStyle,
10848
10869
  elementProps = _objectWithoutProperties(props, _excluded$y);
10849
10870
 
10850
10871
  var _useForcedContext = useForcedContext(ModalContext),
@@ -10855,7 +10876,7 @@
10855
10876
  return /*#__PURE__*/React__default["default"].createElement(FlexView, _extends$1({}, elementProps, {
10856
10877
  ref: ref,
10857
10878
  style: scrollable ? style : [classes, style],
10858
- contentContainerStyle: scrollable ? [classes, contentContainerStyle] : undefined
10879
+ contentContainerStyle: scrollable ? [classes, innerStyle] : undefined
10859
10880
  }), children);
10860
10881
  });
10861
10882
  ModalBody.displayName = 'ModalBody';
@@ -10886,7 +10907,7 @@
10886
10907
  ModalFooter.displayName = 'ModalFooter';
10887
10908
  ModalFooter.propTypes = propTypes$z;
10888
10909
 
10889
- var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "textStyle"];
10910
+ var _excluded$w = ["children", "visible", "size", "backdrop", "scrollable", "centered", "onToggle", "style", "innerStyle", "dialogStyle", "contentStyle", "textStyle", "dialogTextStyle", "contentTextStyle"];
10890
10911
 
10891
10912
  var _templateObject$r, _templateObject2$l, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$5, _templateObject7$3, _templateObject8$3, _templateObject9$3, _templateObject10$3, _templateObject11$2;
10892
10913
  var MODAL_SIZES = ['sm', 'lg', 'xl'];
@@ -10901,7 +10922,17 @@
10901
10922
  // eslint-disable-next-line react/forbid-prop-types
10902
10923
  style: PropTypes.any,
10903
10924
  // eslint-disable-next-line react/forbid-prop-types
10904
- textStyle: PropTypes.any
10925
+ innerStyle: PropTypes.any,
10926
+ // eslint-disable-next-line react/forbid-prop-types
10927
+ dialogStyle: PropTypes.any,
10928
+ // eslint-disable-next-line react/forbid-prop-types
10929
+ contentStyle: PropTypes.any,
10930
+ // eslint-disable-next-line react/forbid-prop-types
10931
+ textStyle: PropTypes.any,
10932
+ // eslint-disable-next-line react/forbid-prop-types
10933
+ dialogTextStyle: PropTypes.any,
10934
+ // eslint-disable-next-line react/forbid-prop-types
10935
+ contentTextStyle: PropTypes.any
10905
10936
  };
10906
10937
  var styles$r = StyleSheet.create({
10907
10938
  '.modal': css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n position: absolute; // fixed;\n top: 0;\n left: 0;\n z-index: $zindex-modal;\n // display: none;\n width: 100%;\n height: 100%;\n // overflow-x: hidden;\n // overflow-y: auto;\n // Prevent Chrome on Windows from adding a focus outline. For details, see\n // https://github.com/twbs/bootstrap/pull/10951.\n @include platform(web) {\n outline-width: 0; // outline: 0;\n }\n // We deliberately don't use \"-webkit-overflow-scrolling: touch;\" due to a\n // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n // See also https://github.com/twbs/bootstrap/issues/17695\n "]))),
@@ -10913,8 +10944,8 @@
10913
10944
  '.modal-content --text': css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n color: $modal-content-color;\n "]))),
10914
10945
  '.modal-backdrop': css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n z-index: $zindex-modal-backdrop;\n width: 100%;\n height: 100%;\n background-color: $modal-backdrop-bg;\n opacity: $modal-backdrop-opacity;\n "]))),
10915
10946
  '.modal-sm': css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(sm) {\n max-width: $modal-sm;\n }\n "]))),
10916
- '.modal-lg': css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(lg) {\n max-width: $modal-lg;\n }\n @include media-breakpoint-up(xl) {\n max-width: $modal-xl;\n }\n "]))),
10917
- '.modal-xl': css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(xl) {\n max-width: $modal-xl;\n }\n "])))
10947
+ '.modal-lg': css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(lg) {\n max-width: $modal-lg;\n }\n "]))),
10948
+ '.modal-xl': css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(lg) {\n max-width: $modal-lg;\n }\n @include media-breakpoint-up(xl) {\n max-width: $modal-xl;\n }\n "])))
10918
10949
  });
10919
10950
  var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
10920
10951
  var children = props.children,
@@ -10928,7 +10959,12 @@
10928
10959
  centered = _props$centered === void 0 ? false : _props$centered,
10929
10960
  handleToggle = props.onToggle,
10930
10961
  style = props.style,
10962
+ innerStyle = props.innerStyle,
10963
+ dialogStyle = props.dialogStyle,
10964
+ contentStyle = props.contentStyle,
10931
10965
  textStyle = props.textStyle,
10966
+ dialogTextStyle = props.dialogTextStyle,
10967
+ contentTextStyle = props.contentTextStyle,
10932
10968
  elementProps = _objectWithoutProperties(props, _excluded$w);
10933
10969
 
10934
10970
  var dialogRef = React.useRef();
@@ -10951,10 +10987,11 @@
10951
10987
  }, backdrop && /*#__PURE__*/React__default["default"].createElement(View, {
10952
10988
  style: backdropClasses
10953
10989
  }), /*#__PURE__*/React__default["default"].createElement(FlexView, {
10954
- style: classes,
10955
- contentContainerStyle: scrollable ? undefined : {
10990
+ style: [classes, style],
10991
+ textStyle: textStyle,
10992
+ contentContainerStyle: [scrollable ? undefined : {
10956
10993
  flexGrow: 1
10957
- }
10994
+ }, innerStyle]
10958
10995
  }, /*#__PURE__*/React__default["default"].createElement(BackdropHandler, {
10959
10996
  dialogRef: dialogRef,
10960
10997
  onClose: handleToggle,
@@ -10965,11 +11002,12 @@
10965
11002
  }
10966
11003
  }, /*#__PURE__*/React__default["default"].createElement(View, {
10967
11004
  ref: dialogRef,
10968
- style: dialogClasses
11005
+ style: [dialogClasses, dialogStyle],
11006
+ textStyle: dialogTextStyle
10969
11007
  }, /*#__PURE__*/React__default["default"].createElement(View, _extends$1({}, elementProps, {
10970
11008
  ref: ref,
10971
- style: [contentClasses, style],
10972
- textStyle: [contentTextClasses, textStyle]
11009
+ style: [contentClasses, contentStyle],
11010
+ textStyle: [contentTextClasses, contentTextStyle]
10973
11011
  }), /*#__PURE__*/React__default["default"].createElement(ModalContext.Provider, {
10974
11012
  value: modal
10975
11013
  }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children)))))));
@@ -11492,7 +11530,7 @@
11492
11530
  OffcanvasBody.displayName = 'OffcanvasBody';
11493
11531
  OffcanvasBody.propTypes = propTypes$o;
11494
11532
 
11495
- var _excluded$j = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "textStyle"];
11533
+ var _excluded$j = ["children", "visible", "placement", "backdrop", "scroll", "onToggle", "style", "dialogStyle", "textStyle", "dialogTextStyle"];
11496
11534
 
11497
11535
  var _templateObject$g, _templateObject2$b, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
11498
11536
  var PLACEMENTS = ['top', 'bottom', 'start', 'end']; // , 'auto'
@@ -11508,7 +11546,11 @@
11508
11546
  // eslint-disable-next-line react/forbid-prop-types
11509
11547
  style: PropTypes.any,
11510
11548
  // eslint-disable-next-line react/forbid-prop-types
11511
- textStyle: PropTypes.any
11549
+ dialogStyle: PropTypes.any,
11550
+ // eslint-disable-next-line react/forbid-prop-types
11551
+ textStyle: PropTypes.any,
11552
+ // eslint-disable-next-line react/forbid-prop-types
11553
+ dialogTextStyle: PropTypes.any
11512
11554
  };
11513
11555
  var styles$g = StyleSheet.create(_objectSpread2({
11514
11556
  '.offcanvas': css(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n position: absolute; // fixed;\n // bottom: 0;\n z-index: $zindex-offcanvas;\n display: flex;\n flex-direction: column;\n max-width: 100%;\n // visibility: hidden;\n background-color: $offcanvas-bg-color;\n // background-clip: padding-box;\n @include platform(web) {\n outline-width: 0; // outline: 0;\n }\n // @include box-shadow($offcanvas-box-shadow);\n // @include transition(transform $offcanvas-transition-duration ease-in-out);\n "]))),
@@ -11540,7 +11582,9 @@
11540
11582
  scroll = _props$scroll === void 0 ? false : _props$scroll,
11541
11583
  handleToggle = props.onToggle,
11542
11584
  style = props.style,
11585
+ dialogStyle = props.dialogStyle,
11543
11586
  textStyle = props.textStyle,
11587
+ dialogTextStyle = props.dialogTextStyle,
11544
11588
  elementProps = _objectWithoutProperties(props, _excluded$j);
11545
11589
 
11546
11590
  var media = useMedia();
@@ -11583,7 +11627,8 @@
11583
11627
  flexShrink: 1
11584
11628
  }
11585
11629
  }, /*#__PURE__*/React__default["default"].createElement(View, {
11586
- style: dialogClasses
11630
+ style: [dialogClasses, dialogStyle],
11631
+ textStyle: dialogTextStyle
11587
11632
  }, /*#__PURE__*/React__default["default"].createElement(OffcanvasContext.Provider, {
11588
11633
  value: offcanvas
11589
11634
  }, /*#__PURE__*/React__default["default"].createElement(OverlayProvider, null, children))))));
@@ -11664,7 +11709,7 @@
11664
11709
  var PickerNativeContext = /*#__PURE__*/React__default["default"].createContext();
11665
11710
  PickerNativeContext.displayName = 'PickerNativeContext';
11666
11711
 
11667
- var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "style"];
11712
+ var _excluded$h = ["children", "selectedValue", "onValueChange", "onFocus", "onBlur", "placeholder", "placeholderTextColor", "disabled", "MenuComponent", "style"];
11668
11713
 
11669
11714
  var _templateObject$f;
11670
11715
  var propTypes$l = {
@@ -11676,6 +11721,7 @@
11676
11721
  placeholder: PropTypes.string,
11677
11722
  placeholderTextColor: PropTypes.string,
11678
11723
  disabled: PropTypes.bool,
11724
+ MenuComponent: PropTypes.elementType,
11679
11725
  // eslint-disable-next-line react/forbid-prop-types
11680
11726
  style: PropTypes.any
11681
11727
  };
@@ -11699,20 +11745,59 @@
11699
11745
  return textStyles;
11700
11746
  };
11701
11747
 
11748
+ var getText = function getText(_ref3) {
11749
+ var children = _ref3.children,
11750
+ selectedValue = _ref3.selectedValue;
11751
+ var items = React__default["default"].Children.map(children, function (child) {
11752
+ return {
11753
+ label: child.props.label,
11754
+ value: child.props.value
11755
+ };
11756
+ });
11757
+ var selectedItem = items.find(function (item) {
11758
+ return item.value === selectedValue;
11759
+ });
11760
+ return selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label;
11761
+ };
11762
+ /* eslint-disable react/prop-types */
11763
+
11764
+
11765
+ var DefaultMenuComponent = function DefaultMenuComponent(_ref4) {
11766
+ var children = _ref4.children,
11767
+ selectedValue = _ref4.selectedValue,
11768
+ handleValueChange = _ref4.onValueChange,
11769
+ handleClose = _ref4.onClose;
11770
+ return /*#__PURE__*/React__default["default"].createElement(Offcanvas, {
11771
+ placement: "bottom",
11772
+ visible: true,
11773
+ onToggle: handleClose
11774
+ }, /*#__PURE__*/React__default["default"].createElement(Offcanvas.Body, {
11775
+ contentContainerStyle: styles$f.menu
11776
+ }, /*#__PURE__*/React__default["default"].createElement(PickerNativeContext.Provider, {
11777
+ value: {
11778
+ selectedValue: selectedValue,
11779
+ handleValueChange: handleValueChange
11780
+ }
11781
+ }, children)));
11782
+ };
11783
+ /* eslint-enable */
11784
+
11785
+
11702
11786
  var PickerNative = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
11703
11787
  var children = props.children,
11704
11788
  selectedValue = props.selectedValue,
11705
11789
  _props$onValueChange = props.onValueChange,
11706
- _onValueChange = _props$onValueChange === void 0 ? function () {} : _props$onValueChange,
11790
+ onValueChange = _props$onValueChange === void 0 ? function () {} : _props$onValueChange,
11707
11791
  _props$onFocus = props.onFocus,
11708
11792
  onFocus = _props$onFocus === void 0 ? function () {} : _props$onFocus,
11709
11793
  _props$onBlur = props.onBlur,
11710
11794
  onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
11711
11795
  placeholder = props.placeholder,
11712
- _props$placeholderTex = props.placeholderTextColor,
11713
- placeholderTextColor = _props$placeholderTex === void 0 ? StyleSheet.value('input-placeholder-color') : _props$placeholderTex,
11796
+ placeholderTextColor = props.placeholderTextColor,
11714
11797
  _props$disabled = props.disabled,
11715
11798
  disabled = _props$disabled === void 0 ? false : _props$disabled,
11799
+ _props$MenuComponent = props.MenuComponent,
11800
+ MenuComponent = _props$MenuComponent === void 0 ? DefaultMenuComponent : _props$MenuComponent,
11716
11801
  style = props.style,
11717
11802
  elementProps = _objectWithoutProperties(props, _excluded$h);
11718
11803
 
@@ -11720,29 +11805,26 @@
11720
11805
 
11721
11806
  var _useState = React.useState(false),
11722
11807
  _useState2 = _slicedToArray(_useState, 2),
11723
- open = _useState2[0],
11724
- setOpen = _useState2[1];
11808
+ visible = _useState2[0],
11809
+ setVisible = _useState2[1];
11725
11810
 
11726
- var items = React__default["default"].Children.map(children, function (child) {
11727
- return {
11728
- label: child.props.label,
11729
- value: child.props.value
11730
- };
11731
- });
11732
- var selectedItem = items.find(function (item) {
11733
- return item.value === selectedValue;
11734
- });
11735
11811
  var textStyle = extractTextStyles(background.style);
11736
11812
  var showPlaceholder = placeholder && (selectedValue === undefined || selectedValue === null);
11813
+
11814
+ var handleValueChange = function handleValueChange(nextValue) {
11815
+ onValueChange(nextValue);
11816
+ setVisible(false);
11817
+ };
11818
+
11819
+ var handleClose = function handleClose() {
11820
+ setVisible(false);
11821
+ };
11822
+
11737
11823
  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Pressable, _extends$1({}, elementProps, {
11738
11824
  ref: ref,
11739
11825
  accessibilityRole: "combobox",
11740
- accessibilityDisabled: disabled,
11741
- accessible: true,
11742
- focusable: !disabled,
11743
- selectable: false,
11744
11826
  onPress: function onPress() {
11745
- setOpen(true);
11827
+ setVisible(true);
11746
11828
  },
11747
11829
  onFocus: onFocus,
11748
11830
  onBlur: onBlur,
@@ -11753,24 +11835,14 @@
11753
11835
  style: [textStyle, showPlaceholder && {
11754
11836
  color: placeholderTextColor
11755
11837
  }]
11756
- }, selectedItem ? selectedItem.label : placeholder)), /*#__PURE__*/React__default["default"].createElement(Offcanvas, {
11757
- placement: "bottom",
11758
- visible: open,
11759
- onToggle: function onToggle() {
11760
- setOpen(false);
11761
- }
11762
- }, /*#__PURE__*/React__default["default"].createElement(Offcanvas.Body, {
11763
- contentContainerStyle: styles$f.menu
11764
- }, /*#__PURE__*/React__default["default"].createElement(PickerNativeContext.Provider, {
11765
- value: {
11766
- selectedValue: selectedValue,
11767
- onValueChange: function onValueChange(nextValue) {
11768
- _onValueChange(nextValue);
11769
-
11770
- setOpen(false);
11771
- }
11772
- }
11773
- }, children))));
11838
+ }, showPlaceholder ? placeholder : getText({
11839
+ children: children,
11840
+ selectedValue: selectedValue
11841
+ }))), visible && /*#__PURE__*/React__default["default"].createElement(MenuComponent, {
11842
+ selectedValue: selectedValue,
11843
+ onValueChange: handleValueChange,
11844
+ onClose: handleClose
11845
+ }, children));
11774
11846
  });
11775
11847
  PickerNative.propTypes = propTypes$l;
11776
11848
 
@@ -11820,7 +11892,7 @@
11820
11892
 
11821
11893
  var _useForcedContext = useForcedContext(PickerNativeContext),
11822
11894
  selectedValue = _useForcedContext.selectedValue,
11823
- onValueChange = _useForcedContext.onValueChange;
11895
+ handleValueChange = _useForcedContext.handleValueChange;
11824
11896
 
11825
11897
  var media = useMedia();
11826
11898
  var classes = getStyles(styles$e, ['item', disabled && 'itemDisabled']);
@@ -11829,7 +11901,7 @@
11829
11901
  return /*#__PURE__*/React__default["default"].createElement(Pressable, {
11830
11902
  ref: ref,
11831
11903
  onPress: function onPress() {
11832
- onValueChange(value);
11904
+ handleValueChange(value);
11833
11905
  },
11834
11906
  accessibilitySelected: selected,
11835
11907
  disabled: disabled,