iguazio.dashboard-react-controls 0.0.5 → 0.0.8

package/dist/components/Wizard/Wizard.js

@@ -0,0 +1,239 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _ConfirmDialog = _interopRequireDefault(require("../ConfirmDialog/ConfirmDialog"));
+
+var _Modal = _interopRequireDefault(require("../Modal/Modal"));
+
+var _WizardSteps = _interopRequireDefault(require("./WizardSteps/WizardSteps"));
+
+var _constants = require("../../constants");
+
+var _types = require("../../types");
+
+var _common = require("../../utils/common.util");
+
+require("./Wizard.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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 Wizard = function Wizard(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      confirmClose = _ref.confirmClose,
+      FormState = _ref.FormState,
+      isWizardOpen = _ref.isWizardOpen,
+      onWizardResolve = _ref.onWizardResolve,
+      onWizardSubmit = _ref.onWizardSubmit,
+      size = _ref.size,
+      title = _ref.title,
+      stepsConfig = _ref.stepsConfig,
+      submitButtonLabel = _ref.submitButtonLabel;
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activeStepNumber = _useState2[0],
+      setActiveStepNumber = _useState2[1];
+
+  var activeStepTemplate = (0, _react.useMemo)(function () {
+    return _react.default.Children.toArray(children)[activeStepNumber];
+  }, [children, activeStepNumber]);
+  var totalSteps = (0, _react.useMemo)(function () {
+    return _react.default.Children.count(children) - 1 || 0;
+  }, [children]);
+  var hasSteps = (0, _react.useMemo)(function () {
+    return stepsConfig.some(function (step) {
+      return step.id;
+    });
+  }, [stepsConfig]);
+  var isLastStep = (0, _react.useMemo)(function () {
+    return activeStepNumber === totalSteps;
+  }, [activeStepNumber, totalSteps]);
+  var stepsMenu = (0, _react.useMemo)(function () {
+    return (stepsConfig === null || stepsConfig === void 0 ? void 0 : stepsConfig.map(function (step) {
+      return {
+        id: step.id,
+        label: step.label
+      };
+    })) || [];
+  }, [stepsConfig]);
+  var wizardClasses = (0, _classnames.default)('wizard-form', className, hasSteps && 'wizard-form__with-steps');
+
+  var goToNextStep = function goToNextStep() {
+    setActiveStepNumber(function (prevStep) {
+      return Math.min(++prevStep, totalSteps);
+    });
+  };
+
+  var goToPreviousStep = function goToPreviousStep() {
+    return setActiveStepNumber(function (prevStep) {
+      return Math.max(--prevStep, 0);
+    });
+  };
+
+  var jumpToStep = function jumpToStep(idx) {
+    return setActiveStepNumber(idx);
+  };
+
+  var handleOnClose = function handleOnClose() {
+    if (confirmClose && FormState && FormState.dirty) {
+      (0, _common.openPopUp)(_ConfirmDialog.default, {
+        cancelButton: {
+          label: 'Cancel',
+          variant: _constants.TERTIARY_BUTTON
+        },
+        confirmButton: {
+          handler: onWizardResolve,
+          label: 'OK',
+          variant: _constants.SECONDARY_BUTTON
+        },
+        header: 'Are you sure?',
+        message: 'All changes will be lost'
+      });
+    } else {
+      onWizardResolve();
+    }
+  };
+
+  var handleSubmit = function handleSubmit() {
+    FormState.handleSubmit();
+
+    if (FormState.valid) {
+      if (isLastStep) {
+        onWizardSubmit(FormState.values);
+      } else {
+        goToNextStep();
+      }
+    }
+  };
+
+  var getDefaultActions = function getDefaultActions() {
+    if (hasSteps) {
+      return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: goToPreviousStep,
+        disabled: activeStepNumber === 0,
+        label: "Back",
+        type: "button"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: handleSubmit,
+        disabled: FormState.submitting || FormState.invalid && FormState.submitFailed,
+        label: isLastStep ? submitButtonLabel : 'Next',
+        type: "button",
+        variant: _constants.SECONDARY_BUTTON
+      })];
+    } else {
+      return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: handleOnClose,
+        label: "Cancel",
+        type: "button"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        onClick: handleSubmit,
+        disabled: FormState.submitting || FormState.invalid && FormState.submitFailed,
+        label: submitButtonLabel,
+        type: "button",
+        variant: _constants.SECONDARY_BUTTON
+      })];
+    }
+  };
+
+  var renderModalActions = function renderModalActions() {
+    var _stepsConfig$activeSt;
+
+    if ((_stepsConfig$activeSt = stepsConfig[activeStepNumber]) !== null && _stepsConfig$activeSt !== void 0 && _stepsConfig$activeSt.getActions) {
+      return stepsConfig[activeStepNumber].getActions({
+        FormState: FormState,
+        goToNextStep: goToNextStep,
+        goToPreviousStep: goToPreviousStep,
+        handleOnClose: handleOnClose,
+        handleSubmit: handleSubmit
+      }).map(function (action) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread({}, action));
+      });
+    } else {
+      return getDefaultActions();
+    }
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
+    actions: renderModalActions(),
+    className: wizardClasses,
+    onClose: handleOnClose,
+    show: isWizardOpen,
+    size: size,
+    title: title,
+    children: [hasSteps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_WizardSteps.default, {
+      activeStepNumber: activeStepNumber,
+      jumpToStep: jumpToStep,
+      steps: stepsMenu
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "wizard-form__content",
+      children: activeStepTemplate
+    })]
+  });
+};
+
+Wizard.defaultProps = {
+  className: '',
+  confirmClose: false,
+  size: _constants.MODAL_MD,
+  stepsConfig: [],
+  submitButtonLabel: 'Submit'
+};
+Wizard.propsTypes = {
+  className: _propTypes.default.string,
+  confirmClose: _propTypes.default.bool,
+  FormState: _propTypes.default.object.isRequired,
+  isOpen: _propTypes.default.bool.isRequired,
+  onResolve: _propTypes.default.func.isRequired,
+  onSubmit: _propTypes.default.func.isRequired,
+  size: _types.MODAL_SIZES,
+  title: _propTypes.default.string.isRequired,
+  stepsConfig: _types.WIZARD_STEPS_CONFIG,
+  submitButtonLabel: _propTypes.default.string
+};
+
+Wizard.Step = function (_ref2) {
+  var children = _ref2.children;
+  return children;
+};
+
+var _default = Wizard;
+exports.default = _default;

package/dist/components/Wizard/Wizard.scss

@@ -0,0 +1,17 @@
+.wizard-form {
+  &__with-steps {
+    .modal__body {
+      display: flex;
+      flex-flow: row nowrap;
+      overflow: hidden;
+      padding-right: 0;
+    }
+
+    .wizard-form__content {
+      overflow-y: auto;
+      height: 100%;
+      width: 100%;
+      padding-right: 2rem;
+    }
+  }
+}

package/dist/components/Wizard/WizardSteps/WizardSteps.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Button = _interopRequireDefault(require("../../Button/Button"));
+
+var _types = require("../../../types");
+
+require("./WizardSteps.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var WizardSteps = function WizardSteps(_ref) {
+  var activeStepNumber = _ref.activeStepNumber,
+      jumpToStep = _ref.jumpToStep,
+      steps = _ref.steps;
+
+  var getStepClassNames = function getStepClassNames(idx) {
+    return (0, _classnames.default)('wizard-steps__item', idx === activeStepNumber && 'active', idx < activeStepNumber && 'valid');
+  };
+
+  var handleJumpToStep = function handleJumpToStep(event, idx) {
+    event.preventDefault();
+    jumpToStep(idx);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "wizard-steps",
+    children: steps.map(function (_ref2, idx) {
+      var id = _ref2.id,
+          label = _ref2.label;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        className: getStepClassNames(idx),
+        disabled: idx > activeStepNumber,
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "wizard-steps__indicator",
+          children: idx + 1
+        }),
+        label: label,
+        onClick: function onClick(e) {
+          return handleJumpToStep(e, idx);
+        }
+      }, id);
+    })
+  });
+};
+
+WizardSteps.propTypes = {
+  activeStepNumber: _propTypes.default.number.isRequired,
+  jumpToStep: _propTypes.default.func.isRequired,
+  steps: _types.WIZARD_STEPS_CONFIG
+};
+var _default = WizardSteps;
+exports.default = _default;

package/dist/components/Wizard/WizardSteps/WizardSteps.scss

@@ -0,0 +1,67 @@
+@import '../../../scss/variables';
+@import '../../../scss/colors';
+@import '../../../scss/borders';
+
+.wizard-steps {
+  background-color: $white;
+  min-width: 260px;
+  margin-right: 1rem;
+
+  &__indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    padding: 10px;
+    width: 36px;
+    height: 36px;
+  }
+
+  &__item:not(:last-child) {
+    margin-bottom: 10px;
+  }
+
+  &__item {
+    justify-content: flex-start;
+    background-color: inherit;
+    border: 0;
+    border-radius: 8px;
+    font-size: 1em;
+    padding: 8px;
+    min-height: 52px;
+    width: 100%;
+
+    &.active {
+      background-color: $malibuTwo;
+      color: $cornflowerBlue;
+
+      .wizard-steps__indicator {
+        border-color: transparent;
+        color: $white;
+        background-color: $malibu;
+      }
+    }
+
+    &.valid {
+      color: $primary;
+
+      .wizard-steps__indicator {
+        border-color: $malibu;
+        color: $malibu;
+        background-color: inherit;
+      }
+    }
+
+    &:disabled {
+      border: 0;
+      color: $spunPearl;
+
+      .wizard-steps__indicator {
+        border-color: $spunPearl;
+        color: $spunPearl;
+        background-color: inherit;
+      }
+    }
+  }
+}

package/dist/components/index.js

@@ -9,6 +9,36 @@ Object.defineProperty(exports, "Button", {
     return _Button.default;
   }
 });
+Object.defineProperty(exports, "ConfirmDialog", {
+  enumerable: true,
+  get: function get() {
+    return _ConfirmDialog.default;
+  }
+});
+Object.defineProperty(exports, "FormCheckBox", {
+  enumerable: true,
+  get: function get() {
+    return _FormCheckBox.default;
+  }
+});
+Object.defineProperty(exports, "FormInput", {
+  enumerable: true,
+  get: function get() {
+    return _FormInput.default;
+  }
+});
+Object.defineProperty(exports, "FormSelect", {
+  enumerable: true,
+  get: function get() {
+    return _FormSelect.default;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function get() {
+    return _Modal.default;
+  }
+});
 Object.defineProperty(exports, "PopUpDialog", {
   enumerable: true,
   get: function get() {
@@ -27,21 +57,47 @@ Object.defineProperty(exports, "TextTooltipTemplate", {
     return _TextTooltipTemplate.default;
   }
 });
+Object.defineProperty(exports, "Tip", {
+  enumerable: true,
+  get: function get() {
+    return _Tip.default;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function get() {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "Wizard", {
+  enumerable: true,
+  get: function get() {
+    return _Wizard.default;
+  }
+});
 
 var _Button = _interopRequireDefault(require("./Button/Button"));
 
+var _ConfirmDialog = _interopRequireDefault(require("./ConfirmDialog/ConfirmDialog"));
+
+var _FormCheckBox = _interopRequireDefault(require("./FormCheckBox/FormCheckBox"));
+
+var _FormInput = _interopRequireDefault(require("./FormInput/FormInput"));
+
+var _FormSelect = _interopRequireDefault(require("./FormSelect/FormSelect"));
+
+var _Modal = _interopRequireDefault(require("./Modal/Modal"));
+
 var _PopUpDialog = _interopRequireDefault(require("./PopUpDialog/PopUpDialog"));
 
 var _RoundedIcon = _interopRequireDefault(require("./RoundedIcon/RoundedIcon"));
 
 var _TextTooltipTemplate = _interopRequireDefault(require("./TooltipTemplate/TextTooltipTemplate"));
 
+var _Tip = _interopRequireDefault(require("./Tip/Tip"));
+
 var _Tooltip = _interopRequireDefault(require("./Tooltip/Tooltip"));
 
+var _Wizard = _interopRequireDefault(require("./Wizard/Wizard"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = void 0;
+exports.validation = exports.TERTIARY_BUTTON = exports.SECONDARY_BUTTON = exports.PRIMARY_BUTTON = exports.MODAL_SM = exports.MODAL_MD = exports.MODAL_LG = exports.LABEL_BUTTON = exports.INTERNAL_SERVER_ERROR_STATUS_CODE = exports.FORBIDDEN_ERROR_STATUS_CODE = exports.DANGER_BUTTON = exports.CONFLICT_ERROR_STATUS_CODE = void 0;
 
 /*=========== BUTTONS =============*/
 var PRIMARY_BUTTON = 'primary';
@@ -15,12 +15,38 @@ exports.TERTIARY_BUTTON = TERTIARY_BUTTON;
 var DANGER_BUTTON = 'danger';
 exports.DANGER_BUTTON = DANGER_BUTTON;
 var LABEL_BUTTON = 'label';
-/*=========== STATUS CODES =============*/
+/*=========== VALITATION =============*/
 
 exports.LABEL_BUTTON = LABEL_BUTTON;
+var validation = {
+  BEGIN_END_NOT_WITH: 'Must not begin and end with',
+  BEGIN_END_WITH: 'Must begin and end with',
+  BEGIN_NOT_WITH: 'Must not begin with',
+  BEGIN_WITH: 'Must begin with',
+  END_NOT_WITH: 'Must not end with',
+  END_WITH: 'Must end with',
+  MUST_CONTAIN_EXACTLY_ONE: 'Must contain exactly one',
+  MUST_HAVE_DOT_AFTER_AT: 'Must have at least one . after @',
+  MUST_NOT_BE: 'Must not be',
+  NO_CONSECUTIVE_CHARACTER: 'No consecutive characters',
+  ONLY_AT_THE_BEGINNING: 'Only at the beginning',
+  REQUIRED: 'This field is required',
+  VALID_CHARACTERS: 'Valid characters'
+};
+/*=========== STATUS CODES =============*/
+
+exports.validation = validation;
 var INTERNAL_SERVER_ERROR_STATUS_CODE = 500;
 exports.INTERNAL_SERVER_ERROR_STATUS_CODE = INTERNAL_SERVER_ERROR_STATUS_CODE;
 var CONFLICT_ERROR_STATUS_CODE = 409;
 exports.CONFLICT_ERROR_STATUS_CODE = CONFLICT_ERROR_STATUS_CODE;
 var FORBIDDEN_ERROR_STATUS_CODE = 403;
-exports.FORBIDDEN_ERROR_STATUS_CODE = FORBIDDEN_ERROR_STATUS_CODE;
+/*=========== MODAL =============*/
+
+exports.FORBIDDEN_ERROR_STATUS_CODE = FORBIDDEN_ERROR_STATUS_CODE;
+var MODAL_SM = 'sm';
+exports.MODAL_SM = MODAL_SM;
+var MODAL_MD = 'md';
+exports.MODAL_MD = MODAL_MD;
+var MODAL_LG = 'lg';
+exports.MODAL_LG = MODAL_LG;

package/dist/elements/OptionsMenu/OptionsMenu.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _components = require("../../components");
+
+require("./optionsMenu.scss");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var OptionsMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      show = _ref.show,
+      timeout = _ref.timeout;
+
+  var _ref2 = ref.current ? ref.current.getBoundingClientRect() : {},
+      dropdownWidth = _ref2.width;
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.CSSTransition, {
+    in: show,
+    timeout: timeout,
+    classNames: "options-menu-transition",
+    unmountOnExit: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.PopUpDialog, {
+      className: "options-menu",
+      customPosition: {
+        element: ref,
+        position: 'bottom-right'
+      },
+      style: {
+        width: "".concat(dropdownWidth, "px")
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: "options-menu__body",
+        children: children
+      })
+    })
+  });
+});
+
+OptionsMenu.defaultProps = {
+  children: [],
+  show: false,
+  timeout: 300
+};
+OptionsMenu.propTypes = {
+  children: _propTypes.default.arrayOf(_propTypes.default.element),
+  show: _propTypes.default.bool.isRequired,
+  timout: _propTypes.default.number
+};
+var _default = OptionsMenu;
+exports.default = _default;

package/dist/elements/OptionsMenu/optionsMenu.scss

@@ -0,0 +1,49 @@
+@import '../../scss/colors';
+@import '../../scss/shadows';
+@import '../../scss/borders';
+
+.options-menu {
+  &__body {
+    width: 100%;
+    max-height: 250px;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    color: $mulledWineTwo;
+    font-size: 1rem;
+    list-style-type: none;
+    background-color: $white;
+    border: $primaryBorder;
+    border-radius: 4px;
+    box-shadow: $previewBoxShadow;
+  }
+
+  .pop-up-dialog {
+    width: 100%;
+    padding: 0;
+
+    &__header {
+      display: none;
+    }
+  }
+
+  &-transition {
+    &-enter {
+      opacity: 0;
+    }
+
+    &-enter-active {
+      opacity: 1;
+      transition: opacity 300ms ease-in-out;
+    }
+
+    &-exit {
+      opacity: 1;
+    }
+
+    &-exit-active {
+      opacity: 0;
+      transition: opacity 300ms ease-in-out;
+    }
+  }
+}