@gympass/yoga 7.87.0 → 7.88.0

package/cjs/Dropdown/native/Dropdown.js

@@ -1 +1,240 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _reactNative=require("react-native");var _yogaIcons=require("@gympass/yoga-icons");var _Options=_interopRequireDefault(require("./Options"));var _Backdrop=_interopRequireDefault(require("./Backdrop"));var _Text=_interopRequireDefault(require("../../Text"));var _Helper=_interopRequireDefault(require("../../Input/native/Helper"));var _excluded=["error","label","disabled","full","options","cancelActionLabel","confirmActionLabel","onChange","theme"];var _templateObject,_templateObject2;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var Selector=_styledComponents["default"].View(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref){var disabled=_ref.disabled,selected=_ref.selected,error=_ref.error,full=_ref.full,_ref$theme$yoga=_ref.theme.yoga,colors=_ref$theme$yoga.colors,dropdown=_ref$theme$yoga.components.dropdown;return"\n    position: relative;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n\n    width: "+(full?'100%':dropdown.width+"px")+";\n    padding: "+dropdown.selector.padding.top+"px\n      "+dropdown.selector.padding.right+"px\n      "+dropdown.selector.padding.bottom+"px\n      "+dropdown.selector.padding.left+"px;\n\n    background-color: "+dropdown.selector.background+";\n    border-radius: "+dropdown.selector.border.radius+"px;\n    border-width: "+dropdown.selector.border.width+"px;\n    border-style: solid;\n    border-color: "+(error?colors.feedback.attention[1]:dropdown.selector.border.color)+";\n\n    "+(disabled?"border-color: "+dropdown.disabled.selector.border.color+";":'')+";\n    "+(selected?"border-color: "+dropdown.selected.selector.border.color+";":'')+";\n  ";});var Label=(0,_styledComponents["default"])(_Text["default"])(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref2){var disabled=_ref2.disabled,selected=_ref2.selected,dropdown=_ref2.theme.yoga.components.dropdown;return"\n    color: "+dropdown.input.font.color+";\n    "+(disabled?"color: "+dropdown.disabled.input.font.color+";":'')+"\n    "+(selected?"color: "+dropdown.selected.input.font.color+";":'')+"\n  ";});var getSelectedOption=function getSelectedOption(options){return options.find(function(item){return item.selected===true;});};var Dropdown=_react["default"].forwardRef(function(_ref3,ref){var error=_ref3.error,label=_ref3.label,disabled=_ref3.disabled,full=_ref3.full,options=_ref3.options,cancelActionLabel=_ref3.cancelActionLabel,confirmActionLabel=_ref3.confirmActionLabel,onChange=_ref3.onChange,dropdown=_ref3.theme.yoga.components.dropdown,rest=(0,_objectWithoutProperties2["default"])(_ref3,_excluded);var _useState=(0,_react.useState)(getSelectedOption(options)),_useState2=(0,_slicedToArray2["default"])(_useState,2),selected=_useState2[0],toggleIsSelected=_useState2[1];var _useState3=(0,_react.useState)(false),_useState4=(0,_slicedToArray2["default"])(_useState3,2),isOpen=_useState4[0],toggleIsOpen=_useState4[1];var iconColor=function iconColor(){if(disabled)return dropdown.disabled.arrow.fill;if(selected)return dropdown.selected.arrow.fill;return dropdown.arrow.fill;};return _react["default"].createElement(_react["default"].Fragment,null,_react["default"].createElement(_reactNative.TouchableWithoutFeedback,{accessibilityRole:"button",onPress:function onPress(){return!disabled&&toggleIsOpen(true);}},_react["default"].createElement(_reactNative.View,null,_react["default"].createElement(Selector,(0,_extends2["default"])({full:full,disabled:disabled,selected:selected,error:error},rest,{ref:ref}),_react["default"].createElement(Label,{disabled:disabled,selected:selected},selected&&selected.label||label),_react["default"].createElement(_yogaIcons.ChevronDown,{width:20,height:20,fill:iconColor()})),error&&!selected&&_react["default"].createElement(_Helper["default"],{error:error}))),_react["default"].createElement(_Backdrop["default"],{visible:isOpen,title:label,onClose:function onClose(){return toggleIsOpen(false);}},_react["default"].createElement(_Options["default"],{options:options,selectedOption:selected,cancelActionLabel:cancelActionLabel,confirmActionLabel:confirmActionLabel,onClose:function onClose(){return toggleIsOpen(false);},onSelect:function onSelect(item){toggleIsSelected(item);onChange(item);toggleIsOpen(false);}})));});Dropdown.propTypes={label:_propTypes.string,disabled:_propTypes.bool,error:_propTypes.string,full:_propTypes.bool,options:(0,_propTypes.arrayOf)((0,_propTypes.shape)({label:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number]),selected:_propTypes.bool})).isRequired,cancelActionLabel:_propTypes.string,confirmActionLabel:_propTypes.string,onChange:_propTypes.func};Dropdown.defaultProps={label:'',error:undefined,full:false,cancelActionLabel:'Cancel',confirmActionLabel:'Confirm',disabled:false,onChange:function onChange(){}};var _default=(0,_styledComponents.withTheme)(Dropdown);exports["default"]=_default;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
+});
+module.exports = __toCommonJS(Dropdown_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_prop_types = require("prop-types");
+var import_react_native = require("react-native");
+var import_yoga_icons = require("@gympass/yoga-icons");
+var import_Options = __toESM(require("./Options"));
+var import_Backdrop = __toESM(require("./Backdrop"));
+var import_Text = __toESM(require("../../Text"));
+var import_Helper = __toESM(require("../../Input/native/Helper"));
+const Selector = import_styled_components.default.View`
+  ${({
+  disabled,
+  selected,
+  error,
+  full,
+  theme: {
+    yoga: {
+      colors,
+      components: { dropdown }
+    }
+  }
+}) => `
+    position: relative;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    width: ${full ? "100%" : `${dropdown.width}px`};
+    padding: ${dropdown.selector.padding.top}px
+      ${dropdown.selector.padding.right}px
+      ${dropdown.selector.padding.bottom}px
+      ${dropdown.selector.padding.left}px;
+
+    background-color: ${dropdown.selector.background};
+    border-radius: ${dropdown.selector.border.radius}px;
+    border-width: ${dropdown.selector.border.width}px;
+    border-style: solid;
+    border-color: ${error ? colors.feedback.attention[1] : dropdown.selector.border.color};
+
+    ${disabled ? `border-color: ${dropdown.disabled.selector.border.color};` : ""};
+    ${selected ? `border-color: ${dropdown.selected.selector.border.color};` : ""};
+  `}
+`;
+const Label = (0, import_styled_components.default)(import_Text.default)`
+  ${({
+  disabled,
+  selected,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    color: ${dropdown.input.font.color};
+    ${disabled ? `color: ${dropdown.disabled.input.font.color};` : ""}
+    ${selected ? `color: ${dropdown.selected.input.font.color};` : ""}
+  `}
+`;
+const getSelectedOption = (options) => options.find((item) => item.selected === true);
+const Dropdown = import_react.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      error,
+      label,
+      disabled,
+      full,
+      options,
+      cancelActionLabel,
+      confirmActionLabel,
+      onChange,
+      theme: {
+        yoga: {
+          components: { dropdown }
+        }
+      }
+    } = _b, rest = __objRest(_b, [
+      "error",
+      "label",
+      "disabled",
+      "full",
+      "options",
+      "cancelActionLabel",
+      "confirmActionLabel",
+      "onChange",
+      "theme"
+    ]);
+    const [selected, toggleIsSelected] = (0, import_react.useState)(getSelectedOption(options));
+    const [isOpen, toggleIsOpen] = (0, import_react.useState)(false);
+    const iconColor = () => {
+      if (disabled)
+        return dropdown.disabled.arrow.fill;
+      if (selected)
+        return dropdown.selected.arrow.fill;
+      return dropdown.arrow.fill;
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_native.TouchableWithoutFeedback,
+        {
+          accessibilityRole: "button",
+          onPress: () => !disabled && toggleIsOpen(true),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              Selector,
+              __spreadProps(__spreadValues({
+                full,
+                disabled,
+                selected,
+                error
+              }, rest), {
+                ref,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { disabled, selected, children: selected && selected.label || label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.ChevronDown, { width: 20, height: 20, fill: iconColor() })
+                ]
+              })
+            ),
+            error && !selected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Helper.default, { error })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_Backdrop.default,
+        {
+          visible: isOpen,
+          title: label,
+          onClose: () => toggleIsOpen(false),
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Options.default,
+            {
+              options,
+              selectedOption: selected,
+              cancelActionLabel,
+              confirmActionLabel,
+              onClose: () => toggleIsOpen(false),
+              onSelect: (item) => {
+                toggleIsSelected(item);
+                onChange(item);
+                toggleIsOpen(false);
+              }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+Dropdown.propTypes = {
+  label: import_prop_types.string,
+  disabled: import_prop_types.bool,
+  error: import_prop_types.string,
+  full: import_prop_types.bool,
+  /** { label (string), value (string or number), selected: (boolean) } */
+  options: (0, import_prop_types.arrayOf)(
+    (0, import_prop_types.shape)({
+      label: import_prop_types.string,
+      value: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.number]),
+      selected: import_prop_types.bool
+    })
+  ).isRequired,
+  /** Cancel label that will be shown in iOS option chooser */
+  cancelActionLabel: import_prop_types.string,
+  /** Confirm label that will be shown in iOS option chooser */
+  confirmActionLabel: import_prop_types.string,
+  onChange: import_prop_types.func
+};
+Dropdown.defaultProps = {
+  label: "",
+  error: void 0,
+  full: false,
+  cancelActionLabel: "Cancel",
+  confirmActionLabel: "Confirm",
+  disabled: false,
+  onChange: () => {
+  }
+};
+var Dropdown_default = (0, import_styled_components.withTheme)(Dropdown);

package/cjs/Dropdown/native/Dropdown.test.js

@@ -0,0 +1,97 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_native = require("@testing-library/react-native");
+var import__ = require("../..");
+jest.useFakeTimers();
+const dropdownProps = {
+  label: "Find an activity to love",
+  options: [
+    { label: "Yoga", value: "yoga" },
+    { label: "Crossfit", value: "crossfit" },
+    { label: "Tenis", value: "tenis" },
+    { label: "Soccer", value: "soccer" },
+    { label: "Pilates", value: "pilates" },
+    { label: "Run", value: "running" }
+  ]
+};
+describe("<Dropdown />", () => {
+  describe("Snapshots", () => {
+    it("should match snapshot", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Dropdown, __spreadValues({}, dropdownProps)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot when disabled", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Dropdown, __spreadValues({ disabled: true }, dropdownProps)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot when full", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Dropdown, __spreadValues({ full: true }, dropdownProps)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot when has a selected value", () => {
+      const selectedOption = {
+        label: "Swimming",
+        value: "swimming",
+        selected: true
+      };
+      const props = dropdownProps;
+      props.options.push(selectedOption);
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Dropdown, __spreadValues({ disabled: true }, props)) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it("should match snapshot with error", () => {
+      const { toJSON } = (0, import_react_native.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Dropdown, __spreadProps(__spreadValues({}, dropdownProps), { error: "Please, select one activity" })) })
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/cjs/Dropdown/native/Options.android.js

@@ -1 +1,111 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireDefault(require("react"));var _styledComponents=_interopRequireDefault(require("styled-components"));var _propTypes=require("prop-types");var _reactNative=require("react-native");var _Text=_interopRequireDefault(require("../../Text"));var _List=_interopRequireDefault(require("../../List"));var _templateObject,_templateObject2;var Option=(0,_styledComponents["default"])(_List["default"].Item)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref){var isSelected=_ref.isSelected,dropdown=_ref.theme.yoga.components.dropdown;return"\n    padding:\n      "+dropdown.backdrop.content.option.padding.top+"px\n      "+dropdown.backdrop.content.option.padding.right+"px\n      "+dropdown.backdrop.content.option.padding.bottom+"px\n      "+dropdown.backdrop.content.option.padding.left+"px;\n\n    border-bottom-width: "+dropdown.option.border.width+"px;\n    background-color: "+(isSelected?""+dropdown.hover.option.backgroundColor:'transparent')+";\n  ";});var OptionText=_styledComponents["default"].Text(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref2){var isSelected=_ref2.isSelected,dropdown=_ref2.theme.yoga.components.dropdown;return"\n    font-size: "+dropdown.option.font.size+"px;\n    line-height: "+dropdown.option.font.lineHeight+"px;\n    color: "+(isSelected?""+dropdown.selected.option.font.color:""+dropdown.option.font.color)+";\n  ";});var Options=function Options(_ref3){var options=_ref3.options,selectedOption=_ref3.selectedOption,onSelect=_ref3.onSelect;return _react["default"].createElement(_List["default"],{style:{height:60*3.6},data:options.map(function(item){return item;}),keyExtractor:function keyExtractor(_,index){return index.toString();},renderItem:function renderItem(_ref4){var item=_ref4.item;return _react["default"].createElement(_reactNative.TouchableWithoutFeedback,{onPress:function onPress(){return onSelect(item);}},_react["default"].createElement(Option,{key:item.value,isSelected:selectedOption&&selectedOption.value===item.value},_react["default"].createElement(OptionText,{isSelected:selectedOption&&selectedOption.value===item.value,as:selectedOption&&selectedOption.value===item.value?_Text["default"].Bold:_Text["default"].Regular},item.label)));}});};var optionShape={label:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])};Options.propTypes={options:(0,_propTypes.arrayOf)((0,_propTypes.shape)(optionShape)).isRequired,selectedOption:(0,_propTypes.shape)(optionShape),onSelect:_propTypes.func};Options.defaultProps={selectedOption:null,onSelect:function onSelect(){}};var _default=Options;exports["default"]=_default;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Options_android_exports = {};
+__export(Options_android_exports, {
+  default: () => Options_android_default
+});
+module.exports = __toCommonJS(Options_android_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_prop_types = require("prop-types");
+var import_react_native = require("react-native");
+var import_Text = __toESM(require("../../Text"));
+var import_List = __toESM(require("../../List"));
+const Option = (0, import_styled_components.default)(import_List.default.Item)`
+  ${({
+  isSelected,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    padding:
+      ${dropdown.backdrop.content.option.padding.top}px
+      ${dropdown.backdrop.content.option.padding.right}px
+      ${dropdown.backdrop.content.option.padding.bottom}px
+      ${dropdown.backdrop.content.option.padding.left}px;
+
+    border-bottom-width: ${dropdown.option.border.width}px;
+    background-color: ${isSelected ? `${dropdown.hover.option.backgroundColor}` : "transparent"};
+  `}
+`;
+const OptionText = import_styled_components.default.Text`
+  ${({
+  isSelected,
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    font-size: ${dropdown.option.font.size}px;
+    line-height: ${dropdown.option.font.lineHeight}px;
+    color: ${isSelected ? `${dropdown.selected.option.font.color}` : `${dropdown.option.font.color}`};
+  `}
+`;
+const Options = ({ options, selectedOption, onSelect }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_List.default,
+  {
+    style: { height: 60 * 3.6 },
+    data: options.map((item) => item),
+    keyExtractor: (_, index) => index.toString(),
+    renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.TouchableWithoutFeedback, { onPress: () => onSelect(item), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Option,
+      {
+        isSelected: selectedOption && selectedOption.value === item.value,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          OptionText,
+          {
+            isSelected: selectedOption && selectedOption.value === item.value,
+            as: selectedOption && selectedOption.value === item.value ? import_Text.default.Bold : import_Text.default.Regular,
+            children: item.label
+          }
+        )
+      },
+      item.value
+    ) })
+  }
+);
+const optionShape = {
+  label: import_prop_types.string,
+  value: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.number])
+};
+Options.propTypes = {
+  options: (0, import_prop_types.arrayOf)((0, import_prop_types.shape)(optionShape)).isRequired,
+  selectedOption: (0, import_prop_types.shape)(optionShape),
+  onSelect: import_prop_types.func
+};
+Options.defaultProps = {
+  selectedOption: null,
+  onSelect: () => {
+  }
+};
+var Options_android_default = Options;

package/cjs/Dropdown/native/Options.ios.js

@@ -1 +1,125 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _taggedTemplateLiteralLoose2=_interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react=_interopRequireWildcard(require("react"));var _styledComponents=_interopRequireWildcard(require("styled-components"));var _propTypes=require("prop-types");var _picker=require("@react-native-picker/picker");var _Button=_interopRequireDefault(require("../../Button"));var _templateObject,_templateObject2;function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{"default":obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj["default"]=obj;if(cache){cache.set(obj,newObj);}return newObj;}var PickerStyled=(0,_styledComponents["default"])(_picker.Picker)(_templateObject||(_templateObject=(0,_taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  height: 190px;\n"])));var PickerActions=_styledComponents["default"].View(_templateObject2||(_templateObject2=(0,_taggedTemplateLiteralLoose2["default"])(["\n  ","\n"])),function(_ref){var dropdown=_ref.theme.yoga.components.dropdown;return"\n    flex-direction: row;\n    justify-content: space-between;\n\n    padding:\n      "+dropdown.backdrop.content.actions.padding.top+"px\n      "+dropdown.backdrop.content.actions.padding.right+"px\n      "+dropdown.backdrop.content.actions.padding.bottom+"px\n      "+dropdown.backdrop.content.actions.padding.left+"px;\n  ";});var Options=function Options(_ref2){var options=_ref2.options,selectedOption=_ref2.selectedOption,cancelActionLabel=_ref2.cancelActionLabel,confirmActionLabel=_ref2.confirmActionLabel,onSelect=_ref2.onSelect,onClose=_ref2.onClose,baseFont=_ref2.theme.yoga.baseFont;var _useState=(0,_react.useState)(selectedOption),_useState2=(0,_slicedToArray2["default"])(_useState,2),selected=_useState2[0],setSelected=_useState2[1];return _react["default"].createElement(_react["default"].Fragment,null,_react["default"].createElement(PickerStyled,{selectedValue:selected&&selected.value,onValueChange:function onValueChange(itemValue){return setSelected(options.find(function(option){return option.value===itemValue;}));},itemStyle:{fontFamily:baseFont.family}},options.map(function(item){return _react["default"].createElement(_picker.Picker.Item,(0,_extends2["default"])({key:item},item));})),_react["default"].createElement(PickerActions,null,_react["default"].createElement(_Button["default"].Link,{onPress:onClose},cancelActionLabel),_react["default"].createElement(_Button["default"].Link,{onPress:function onPress(){return onSelect(selected);}},confirmActionLabel)));};var optionShape={label:_propTypes.string,value:(0,_propTypes.oneOfType)([_propTypes.string,_propTypes.number])};Options.propTypes={options:(0,_propTypes.arrayOf)((0,_propTypes.shape)(optionShape)).isRequired,selectedOption:(0,_propTypes.shape)(optionShape),cancelActionLabel:_propTypes.string.isRequired,confirmActionLabel:_propTypes.string.isRequired,onSelect:_propTypes.func,onClose:_propTypes.func};Options.defaultProps={selectedOption:null,onSelect:function onSelect(){},onClose:function onClose(){}};var _default=(0,_styledComponents.withTheme)(Options);exports["default"]=_default;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Options_ios_exports = {};
+__export(Options_ios_exports, {
+  default: () => Options_ios_default
+});
+module.exports = __toCommonJS(Options_ios_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_prop_types = require("prop-types");
+var import_picker = require("@react-native-picker/picker");
+var import_Button = __toESM(require("../../Button"));
+const PickerStyled = (0, import_styled_components.default)(import_picker.Picker)`
+  width: 100%;
+  height: 190px;
+`;
+const PickerActions = import_styled_components.default.View`
+  ${({
+  theme: {
+    yoga: {
+      components: { dropdown }
+    }
+  }
+}) => `
+    flex-direction: row;
+    justify-content: space-between;
+
+    padding:
+      ${dropdown.backdrop.content.actions.padding.top}px
+      ${dropdown.backdrop.content.actions.padding.right}px
+      ${dropdown.backdrop.content.actions.padding.bottom}px
+      ${dropdown.backdrop.content.actions.padding.left}px;
+  `}
+`;
+const Options = ({
+  options,
+  selectedOption,
+  cancelActionLabel,
+  confirmActionLabel,
+  onSelect,
+  onClose,
+  theme: {
+    yoga: { baseFont }
+  }
+}) => {
+  const [selected, setSelected] = (0, import_react.useState)(selectedOption);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PickerStyled,
+      {
+        selectedValue: selected && selected.value,
+        onValueChange: (itemValue) => setSelected(options.find((option) => option.value === itemValue)),
+        itemStyle: {
+          fontFamily: baseFont.family
+        },
+        children: options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_picker.Picker.Item, __spreadValues({}, item), item))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PickerActions, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default.Link, { onPress: onClose, children: cancelActionLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default.Link, { onPress: () => onSelect(selected), children: confirmActionLabel })
+    ] })
+  ] });
+};
+const optionShape = {
+  label: import_prop_types.string,
+  value: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.number])
+};
+Options.propTypes = {
+  options: (0, import_prop_types.arrayOf)((0, import_prop_types.shape)(optionShape)).isRequired,
+  selectedOption: (0, import_prop_types.shape)(optionShape),
+  cancelActionLabel: import_prop_types.string.isRequired,
+  confirmActionLabel: import_prop_types.string.isRequired,
+  onSelect: import_prop_types.func,
+  onClose: import_prop_types.func
+};
+Options.defaultProps = {
+  selectedOption: null,
+  onSelect: () => {
+  },
+  onClose: () => {
+  }
+};
+var Options_ios_default = (0, import_styled_components.withTheme)(Options);

package/cjs/Dropdown/native/index.js

@@ -1 +1,35 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _Dropdown=_interopRequireDefault(require("./Dropdown"));var _default=_Dropdown["default"];exports["default"]=_default;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var native_exports = {};
+__export(native_exports, {
+  default: () => native_default
+});
+module.exports = __toCommonJS(native_exports);
+var import_Dropdown = __toESM(require("./Dropdown"));
+var native_default = import_Dropdown.default;