@pedidopago/ui 1.3.3 → 1.3.6

package/dist/components/Select/components/OptionsSelect/index.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionsSelect = void 0;
+
+var _react = require("react");
+
+var _useDisableBodyScroll = require("../../../../shared/hooks/useDisableBodyScroll");
+
+var _useWindowSize2 = require("../../../../shared/hooks/useWindowSize");
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var OptionsSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var open = _ref.open,
+      _ref$left = _ref.left,
+      left = _ref$left === void 0 ? '50vw' : _ref$left,
+      _ref$top = _ref.top,
+      top = _ref$top === void 0 ? '' : _ref$top,
+      _ref$offsetX = _ref.offsetX,
+      offsetX = _ref$offsetX === void 0 ? '0px' : _ref$offsetX,
+      _ref$disableScrollOnO = _ref.disableScrollOnOpen,
+      disableScrollOnOpen = _ref$disableScrollOnO === void 0 ? true : _ref$disableScrollOnO,
+      maxWidth = _ref.maxWidth,
+      children = _ref.children;
+
+  var _useWindowSize = (0, _useWindowSize2.useWindowSize)(),
+      windowHeight = _useWindowSize.height;
+
+  var optionsContainerRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return optionsContainerRef.current;
+  });
+
+  var _useState = (0, _react.useState)(function () {
+    var _optionsContainerRef$, _optionsContainerRef$2;
+
+    if (windowHeight - (((_optionsContainerRef$ = optionsContainerRef.current) === null || _optionsContainerRef$ === void 0 ? void 0 : (_optionsContainerRef$2 = _optionsContainerRef$.getBoundingClientRect()) === null || _optionsContainerRef$2 === void 0 ? void 0 : _optionsContainerRef$2.y) || 0) > 360) {
+      return '360px';
+    } else {
+      var _optionsContainerRef$3, _optionsContainerRef$4;
+
+      return "".concat(windowHeight - (((_optionsContainerRef$3 = optionsContainerRef.current) === null || _optionsContainerRef$3 === void 0 ? void 0 : (_optionsContainerRef$4 = _optionsContainerRef$3.getBoundingClientRect()) === null || _optionsContainerRef$4 === void 0 ? void 0 : _optionsContainerRef$4.y) || 0), "px");
+    }
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      positionElement = _useState2[0],
+      setPositionElement = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setPositionElement(function () {
+      var _optionsContainerRef$5, _optionsContainerRef$6;
+
+      if (windowHeight - (((_optionsContainerRef$5 = optionsContainerRef.current) === null || _optionsContainerRef$5 === void 0 ? void 0 : (_optionsContainerRef$6 = _optionsContainerRef$5.getBoundingClientRect()) === null || _optionsContainerRef$6 === void 0 ? void 0 : _optionsContainerRef$6.y) || 0) > 360) {
+        return '360px';
+      } else {
+        var _optionsContainerRef$7, _optionsContainerRef$8;
+
+        return "".concat(windowHeight - (((_optionsContainerRef$7 = optionsContainerRef.current) === null || _optionsContainerRef$7 === void 0 ? void 0 : (_optionsContainerRef$8 = _optionsContainerRef$7.getBoundingClientRect()) === null || _optionsContainerRef$8 === void 0 ? void 0 : _optionsContainerRef$8.y) || 0), "px");
+      }
+    });
+  });
+  (0, _useDisableBodyScroll.useDisableBodyScroll)(open && disableScrollOnOpen);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionsContainer, {
+    ref: optionsContainerRef,
+    open: open,
+    maxWidth: typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth,
+    maxHeight: positionElement,
+    left: "calc(".concat(left, " + ").concat(offsetX, ")"),
+    top: top,
+    children: children
+  });
+});
+exports.OptionsSelect = OptionsSelect;
+OptionsSelect.displayName = 'OptionsSelect';

package/dist/components/Select/components/OptionsSelect/styles.d.ts

@@ -0,0 +1,265 @@
+/// <reference types="react" />
+interface OptionsContainerProps {
+    open: boolean;
+    maxWidth?: string;
+    maxHeight?: string;
+    left: string;
+    top: string;
+}
+export declare const OptionsContainer: import("@emotion/styled").StyledComponent<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    color?: string | undefined;
+    translate?: "no" | "yes" | undefined;
+    id?: string | undefined;
+    hidden?: boolean | undefined;
+    className?: string | undefined;
+    lang?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    tabIndex?: number | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "false" | "true") | undefined;
+    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
+    "aria-busy"?: (boolean | "false" | "true") | undefined;
+    "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "false" | "true") | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "false" | "true") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "false" | "true") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "false" | "true" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "false" | "true") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "false" | "true") | undefined;
+    "aria-multiline"?: (boolean | "false" | "true") | undefined;
+    "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-readonly"?: (boolean | "false" | "true") | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "false" | "true") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "false" | "true") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    children?: import("react").ReactNode;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
+    onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onReset?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    contentEditable?: "inherit" | (boolean | "false" | "true") | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "false" | "true") | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "false" | "true") | undefined;
+    radioGroup?: string | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    resource?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "off" | "on" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & OptionsContainerProps, {}, {}>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Select/components/OptionsSelect/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/OptionsSelect/styles.ts"],"names":[],"mappings":";AAIA,UAAU,qBAAqB;IAC7B,IAAI,EAAE,OAAO,CAAC;IAEd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAoC3B,CAAC"}

package/dist/components/Select/components/OptionsSelect/styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionsContainer = void 0;
+
+var _react = require("@emotion/react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _framerMotion = require("framer-motion");
+
+var _templateObject;
+
+var _excluded = ["theme"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var OptionsContainer = (0, _styled.default)(_framerMotion.motion.div)(function (_ref) {
+  var theme = _ref.theme,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    max-width: ", ";\n    max-height: calc(", " - 20px);\n    position: fixed;\n    left: ", ";\n    top: ", ";\n    z-index: ", ";\n    opacity: ", ";\n    pointer-events: ", ";\n    transition: opacity ease ", ";\n    overflow-y: auto;\n    overflow-x: hidden;\n    background: ", ";\n    border: 2px solid ", ";\n    border-radius: ", ";\n\n    &::-webkit-scrollbar {\n      width: 6px;\n    }\n\n    &::-webkit-scrollbar-track {\n      background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n      border-radius: ", ";\n      background: ", ";\n    }\n    li {\n      list-style: none;\n    }\n  "])), props.maxWidth, props.maxHeight, props.left, props.top, theme.zIndex.level24, props.open ? 1 : 0, props.open ? 'auto' : 'none', theme.transition.speed, theme.colors.background.light, theme.colors.neutral.neutral1, theme.borderRadius.default, theme.borderRadius.default, theme.colors.primary.default);
+});
+exports.OptionsContainer = OptionsContainer;

package/dist/components/Select/components/OptionsSelect/types.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+export interface OptionsSelectProps extends HTMLAttributes<HTMLDivElement> {
+    /** If the modal is open or not. */
+    open: boolean;
+    /** Optional. Sets the left position where the modal will be shown. */
+    left?: string;
+    /** Optional. Sets the top position where the modal will be shown. */
+    top?: string;
+    /** Optional. Offsets the Modal horizontally. */
+    offsetX?: string;
+    /** The max width of the Modal. */
+    maxWidth?: string | number;
+    /** Optional. Will disable the scroll body scroll. */
+    disableScrollOnOpen?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Select/components/OptionsSelect/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/OptionsSelect/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE3B,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B"}

package/dist/components/Select/components/OptionsSelect/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAQtC,QAAA,MAAM,MAAM,kJAqIX,CAAC;AAGF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,mBAAmB,EAOpB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,QAAA,MAAM,MAAM,kJA4KX,CAAC;AAGF,eAAe,MAAM,CAAC"}

package/dist/components/Select/index.js

@@ -7,17 +7,19 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _styles = require("./styles");
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _ReactPortal = require("../ReactPortal");
 
 var _Typography = _interopRequireDefault(require("../Typography"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _OptionsSelect = require("./components/OptionsSelect");
 
-var _List = _interopRequireDefault(require("../List"));
+var _styles = require("./styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width"];
+var _excluded = ["label", "placeholder", "options", "alert", "helperText", "width", "sizeSelect"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -44,15 +46,17 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4;
+  var _containerRef$current, _optionsModalRef$curr, _containerRef$current3, _containerRef$current4, _containerRef$current5, _containerRef$current6;
 
-  var label = _ref.label,
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
       options = _ref.options,
       alert = _ref.alert,
       helperText = _ref.helperText,
       width = _ref.width,
+      sizeSelect = _ref.sizeSelect,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var containerRef = (0, _react.useRef)(null);
@@ -89,9 +93,9 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       inputRef.current.dispatchEvent(event);
     }
 
+    setOptionsMenuOpen(false);
     setSelectedOption(option);
     setFilled(option !== undefined);
-    setOptionsMenuOpen(false);
   } // Sets default value
 
 
@@ -116,21 +120,56 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       if (optionIndex >= 0) selectOption(optionIndex);
     }
   });
+
+  var _useState7 = (0, _react.useState)((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().top),
+      _useState8 = _slicedToArray(_useState7, 2),
+      positionContainer = _useState8[0],
+      setPositionContainer = _useState8[1];
+
+  var optionsModalRef = (0, _react.useRef)(null);
+
+  var _useState9 = (0, _react.useState)((_optionsModalRef$curr = optionsModalRef.current) === null || _optionsModalRef$curr === void 0 ? void 0 : _optionsModalRef$curr.getBoundingClientRect().height),
+      _useState10 = _slicedToArray(_useState9, 2),
+      heightModal = _useState10[0],
+      setHeightModal = _useState10[1];
+
+  function handleRepositionModal() {
+    var _containerRef$current2, _optionsModalRef$curr2;
+
+    setPositionContainer((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top);
+    setHeightModal((_optionsModalRef$curr2 = optionsModalRef.current) === null || _optionsModalRef$curr2 === void 0 ? void 0 : _optionsModalRef$curr2.getBoundingClientRect().height);
+  }
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('click', function () {
+      return setOptionsMenuOpen(false);
+    });
+    return function () {
+      return document.removeEventListener('click', function () {
+        return setOptionsMenuOpen(false);
+      });
+    };
+  }, []);
+  var toggleOptionsAreaView = (0, _react.useCallback)(function (event) {
+    event.stopPropagation();
+    handleRepositionModal();
+    if (!rest.disabled) setOptionsMenuOpen(!optionsMenuOpen);
+  }, [optionsMenuOpen, rest.disabled]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.SelectContainer, {
+      size: sizeSelect || 'md',
       filled: filled || !!placeholder,
       alert: alert,
       disabled: !!rest.disabled,
       width: width,
       tabIndex: rest.disabled ? -1 : 0,
-      onFocus: function onFocus() {
-        if (!rest.disabled) setOptionsMenuOpen(true);
-      },
+      onMouseOver: handleRepositionModal,
+      onClick: toggleOptionsAreaView,
       className: rest.className,
       style: rest.style,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         ref: containerRef,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
           children: label
         }), selectedOption === undefined ?
         /*#__PURE__*/
@@ -174,19 +213,14 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         ref: inputRef,
         tabIndex: -1
       }, rest))]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionsModal, {
-      open: optionsMenuOpen,
-      left: "".concat((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().left, "px"),
-      top: "".concat((((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect().top) || 0) + 10, "px"),
-      anchorX: "left",
-      anchorY: "top",
-      offsetY: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().height, "px"),
-      maxWidth: "".concat((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().width, "px"),
-      hideOverlay: true,
-      onClose: function onClose() {
-        return setOptionsMenuOpen(false);
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.OptionsModalList, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactPortal.ReactPortal, {
+      wrapperId: "portal-root",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OptionsSelect.OptionsSelect, {
+        open: optionsMenuOpen,
+        left: "".concat((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getBoundingClientRect().left, "px"),
+        top: Number(positionContainer) < 470 ? "calc(".concat(((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getBoundingClientRect().bottom) || 0, "px + 10px)") : "calc(".concat(((_containerRef$current5 = containerRef.current) === null || _containerRef$current5 === void 0 ? void 0 : _containerRef$current5.getBoundingClientRect().top) || 0, "px - ").concat(heightModal && heightModal + 10, "px)"),
+        ref: optionsModalRef,
+        maxWidth: "".concat((_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.getBoundingClientRect().width, "px"),
         children: [!!placeholder && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.OptionPlaceholder, {
           item: true,
           onClick: function onClick() {
@@ -194,10 +228,10 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           },
           children: placeholder
         }), options.map(function (option, i) {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
-            item: true,
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Option, {
+            sizeSelect: sizeSelect,
             onClick: function onClick() {
-              return selectOption(i);
+              selectOption(i);
             },
             children: option.label
           }, option.value);

package/dist/components/Select/select.test.js

@@ -50,4 +50,18 @@ describe('Select', function () {
 
     expect(input === null || input === void 0 ? void 0 : input.value).toBe('option-1');
   });
+  it('Should render a select with sm size', function () {
+    var container = setup({
+      sizeSelect: 'sm',
+      label: 'Select',
+      options: [{
+        label: 'Option 1',
+        value: 'option-1'
+      }]
+    });
+    expect(container.container.childNodes[0]).toHaveStyle({
+      height: '36px',
+      width: '78px'
+    });
+  });
 });

package/dist/components/Select/styles.d.ts

@@ -1,17 +1,15 @@
 /// <reference types="react" />
-import { SelectContainerProps } from './types';
+import { SelectContainerProps, sizeSelect } from './types';
 export declare const SelectContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & SelectContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const OptionsModal: import("@emotion/styled").StyledComponent<import("../Modal/types").ModalProps & {
+export declare const Option: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const OptionsModalList: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
-    children?: import("react").ReactNode;
+    as?: import("react").ElementType<any> | undefined;
 } & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
+    sizeSelect?: sizeSelect | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const OptionPlaceholder: import("@emotion/styled").StyledComponent<import("../List/types").ListProps & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/Select/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAKA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe;;;gIAyL1B,CAAC;AAEH,eAAO,MAAM,YAAY;;UAKvB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;UAI3B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Select/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,eAAO,MAAM,eAAe;;;gIAgK1B,CAAC;AAEH,eAAO,MAAM,MAAM;;;;;yGAwBjB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;UAI5B,CAAC"}