glints-aries 4.0.394 → 4.1.0

package/es/@next/Select/components/OptionList/OptionList.js

@@ -36,7 +36,7 @@ export var OptionList = function OptionList(_ref2) {
     updateSearchableSelectState = _ref2.updateSearchableSelectState,
     width = _ref2.width,
     menuOptions = _ref2.menuOptions;
-  var _useState = useState(false),
+  var _useState = useState((menuOptions == null ? void 0 : menuOptions.length) > 0),
     hasMenuOptions = _useState[0],
     setHasMenuOptions = _useState[1];
   useEffect(function () {

package/es/Display/Gallery/Gallery.d.ts

@@ -1,10 +1,18 @@
 import * as React from 'react';
-declare const Gallery: ({ initialVisibility, children, imagesDisplayed, }: Props) => JSX.Element;
-export interface Props {
+declare const imageGallerySize: readonly ["small", "regular", "large"];
+export declare type Size = (typeof imageGallerySize)[number];
+export declare const imageSizeMapping: {
+    small: string;
+    regular: string;
+    large: string;
+};
+declare const Gallery: ({ initialVisibility, children, imagesDisplayed, imageSize, }: GalleryProps) => JSX.Element;
+export interface GalleryProps {
     children?: React.ReactNode;
     /** How many thumbnails the (unopened) gallery should show */
     imagesDisplayed?: number;
     /** If true, the Gallery will open itself on mount */
     initialVisibility?: boolean;
+    imageSize?: Size;
 }
 export default Gallery;

package/es/Display/Gallery/Gallery.js

@@ -1,15 +1,23 @@
+var _imageSizeMapping;
 /* eslint-disable react/no-array-index-key */
 
 import * as React from 'react';
 import Modal from '../../Display/Modal';
 import Slider from '../../Display/Slider';
 import { GalleryContainer, GalleryItemWrapper, GalleryItem, GalleryImageWrapper, GalleryThumbnailWrapper } from './GalleryStyle';
+var imageGallerySize = ['small', 'regular', 'large'];
+export var imageSizeMapping = (_imageSizeMapping = {}, _imageSizeMapping['small'] = '5em', _imageSizeMapping['regular'] = '10em', _imageSizeMapping['large'] = '15em', _imageSizeMapping);
+var isValidSize = function isValidSize(str) {
+  return imageGallerySize.includes(str);
+};
 var Gallery = function Gallery(_ref) {
   var _ref$initialVisibilit = _ref.initialVisibility,
     initialVisibility = _ref$initialVisibilit === void 0 ? false : _ref$initialVisibilit,
     children = _ref.children,
     _ref$imagesDisplayed = _ref.imagesDisplayed,
-    imagesDisplayed = _ref$imagesDisplayed === void 0 ? 8 : _ref$imagesDisplayed;
+    imagesDisplayed = _ref$imagesDisplayed === void 0 ? 8 : _ref$imagesDisplayed,
+    _ref$imageSize = _ref.imageSize,
+    imageSize = _ref$imageSize === void 0 ? imageGallerySize[0] : _ref$imageSize;
   var sliderRef = React.useRef();
   var _React$useState = React.useState(initialVisibility),
     visible = _React$useState[0],
@@ -42,10 +50,14 @@ var Gallery = function Gallery(_ref) {
   React.useEffect(function autoFocus() {
     if (visible && sliderRef.current) sliderRef.current.focus();
   }, [visible]);
+  if (!isValidSize(imageSize)) {
+    console.warn("Size: " + imageSize + " is not of type ImageSize | undefined. \ntype size " + imageGallerySize);
+  }
   return /*#__PURE__*/React.createElement(GalleryContainer, {
     className: "aries-gallery"
   }, /*#__PURE__*/React.createElement(GalleryItemWrapper, {
-    className: "gallery-wrapper"
+    className: "gallery-wrapper",
+    size: imageSize
   }, React.Children.toArray(children).slice(0, imagesDisplayed).map(function (data, index) {
     return /*#__PURE__*/React.createElement(GalleryItem, {
       className: "gallery-item",

package/es/Display/Gallery/GalleryStyle.d.ts

@@ -1,5 +1,8 @@
+import { Size } from './Gallery';
 export declare const GalleryContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const GalleryItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GalleryItemWrapper: import("styled-components").StyledComponent<"div", any, {
+    size?: Size;
+}, never>;
 export declare const GalleryItem: import("styled-components").StyledComponent<"div", any, GalleryItemProps, never>;
 interface GalleryItemProps {
     imageLeft: number;

package/es/Display/Gallery/GalleryStyle.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { Greyscale } from '../../Utils/Colors';
+import { imageSizeMapping } from './Gallery';
 export var GalleryContainer = styled.div.withConfig({
   displayName: "GalleryStyle__GalleryContainer",
   componentId: "sc-mrr504-0"
@@ -7,12 +8,20 @@ export var GalleryContainer = styled.div.withConfig({
 export var GalleryItemWrapper = styled.div.withConfig({
   displayName: "GalleryStyle__GalleryItemWrapper",
   componentId: "sc-mrr504-1"
-})(["display:flex;flex-wrap:wrap;img{height:5em;width:5em;object-fit:cover;cursor:pointer;}"]);
+})(["display:flex;flex-wrap:wrap;img{height:", ";width:", ";object-fit:cover;cursor:pointer;}"], function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size;
+  return imageSizeMapping[size];
+}, function (_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'small' : _ref2$size;
+  return imageSizeMapping[size];
+});
 export var GalleryItem = styled.div.withConfig({
   displayName: "GalleryStyle__GalleryItem",
   componentId: "sc-mrr504-2"
-})(["position:relative;margin:5px;", ""], function (_ref) {
-  var imageLeft = _ref.imageLeft;
+})(["position:relative;margin:5px;", ""], function (_ref3) {
+  var imageLeft = _ref3.imageLeft;
   if (imageLeft !== 0) {
     return "\n        &:last-child:after {\n          content: '+" + imageLeft + "';\n          position: absolute;\n          top: 0;\n          left: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          color: #0869C2;\n          height: 100%;\n          width: 100%;\n          font-size: 18px;\n          background: rgba(255, 255, 255, 0.75);\n          cursor: pointer;\n        }\n      ";
   }

package/lib/@next/Select/components/OptionList/OptionList.js

@@ -44,7 +44,7 @@ var OptionList = function OptionList(_ref2) {
     updateSearchableSelectState = _ref2.updateSearchableSelectState,
     width = _ref2.width,
     menuOptions = _ref2.menuOptions;
-  var _useState = (0, _react.useState)(false),
+  var _useState = (0, _react.useState)((menuOptions == null ? void 0 : menuOptions.length) > 0),
     hasMenuOptions = _useState[0],
     setHasMenuOptions = _useState[1];
   (0, _react.useEffect)(function () {

package/lib/Display/Gallery/Gallery.d.ts

@@ -1,10 +1,18 @@
 import * as React from 'react';
-declare const Gallery: ({ initialVisibility, children, imagesDisplayed, }: Props) => JSX.Element;
-export interface Props {
+declare const imageGallerySize: readonly ["small", "regular", "large"];
+export declare type Size = (typeof imageGallerySize)[number];
+export declare const imageSizeMapping: {
+    small: string;
+    regular: string;
+    large: string;
+};
+declare const Gallery: ({ initialVisibility, children, imagesDisplayed, imageSize, }: GalleryProps) => JSX.Element;
+export interface GalleryProps {
     children?: React.ReactNode;
     /** How many thumbnails the (unopened) gallery should show */
     imagesDisplayed?: number;
     /** If true, the Gallery will open itself on mount */
     initialVisibility?: boolean;
+    imageSize?: Size;
 }
 export default Gallery;

package/lib/Display/Gallery/Gallery.js

@@ -2,21 +2,28 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports["default"] = void 0;
+exports.imageSizeMapping = exports["default"] = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Modal = _interopRequireDefault(require("../../Display/Modal"));
 var _Slider = _interopRequireDefault(require("../../Display/Slider"));
 var _GalleryStyle = require("./GalleryStyle");
+var _imageSizeMapping;
 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; }
-/* eslint-disable react/no-array-index-key */
-
+var imageGallerySize = ['small', 'regular', 'large'];
+var imageSizeMapping = (_imageSizeMapping = {}, _imageSizeMapping['small'] = '5em', _imageSizeMapping['regular'] = '10em', _imageSizeMapping['large'] = '15em', _imageSizeMapping);
+exports.imageSizeMapping = imageSizeMapping;
+var isValidSize = function isValidSize(str) {
+  return imageGallerySize.includes(str);
+};
 var Gallery = function Gallery(_ref) {
   var _ref$initialVisibilit = _ref.initialVisibility,
     initialVisibility = _ref$initialVisibilit === void 0 ? false : _ref$initialVisibilit,
     children = _ref.children,
     _ref$imagesDisplayed = _ref.imagesDisplayed,
-    imagesDisplayed = _ref$imagesDisplayed === void 0 ? 8 : _ref$imagesDisplayed;
+    imagesDisplayed = _ref$imagesDisplayed === void 0 ? 8 : _ref$imagesDisplayed,
+    _ref$imageSize = _ref.imageSize,
+    imageSize = _ref$imageSize === void 0 ? imageGallerySize[0] : _ref$imageSize;
   var sliderRef = React.useRef();
   var _React$useState = React.useState(initialVisibility),
     visible = _React$useState[0],
@@ -49,10 +56,14 @@ var Gallery = function Gallery(_ref) {
   React.useEffect(function autoFocus() {
     if (visible && sliderRef.current) sliderRef.current.focus();
   }, [visible]);
+  if (!isValidSize(imageSize)) {
+    console.warn("Size: " + imageSize + " is not of type ImageSize | undefined. \ntype size " + imageGallerySize);
+  }
   return /*#__PURE__*/React.createElement(_GalleryStyle.GalleryContainer, {
     className: "aries-gallery"
   }, /*#__PURE__*/React.createElement(_GalleryStyle.GalleryItemWrapper, {
-    className: "gallery-wrapper"
+    className: "gallery-wrapper",
+    size: imageSize
   }, React.Children.toArray(children).slice(0, imagesDisplayed).map(function (data, index) {
     return /*#__PURE__*/React.createElement(_GalleryStyle.GalleryItem, {
       className: "gallery-item",

package/lib/Display/Gallery/GalleryStyle.d.ts

@@ -1,5 +1,8 @@
+import { Size } from './Gallery';
 export declare const GalleryContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const GalleryItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GalleryItemWrapper: import("styled-components").StyledComponent<"div", any, {
+    size?: Size;
+}, never>;
 export declare const GalleryItem: import("styled-components").StyledComponent<"div", any, GalleryItemProps, never>;
 interface GalleryItemProps {
     imageLeft: number;

package/lib/Display/Gallery/GalleryStyle.js

@@ -5,6 +5,7 @@ exports.__esModule = true;
 exports.GalleryThumbnailWrapper = exports.GalleryItemWrapper = exports.GalleryItem = exports.GalleryImageWrapper = exports.GalleryContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _Colors = require("../../Utils/Colors");
+var _Gallery = require("./Gallery");
 var GalleryContainer = _styledComponents["default"].div.withConfig({
   displayName: "GalleryStyle__GalleryContainer",
   componentId: "sc-mrr504-0"
@@ -13,13 +14,21 @@ exports.GalleryContainer = GalleryContainer;
 var GalleryItemWrapper = _styledComponents["default"].div.withConfig({
   displayName: "GalleryStyle__GalleryItemWrapper",
   componentId: "sc-mrr504-1"
-})(["display:flex;flex-wrap:wrap;img{height:5em;width:5em;object-fit:cover;cursor:pointer;}"]);
+})(["display:flex;flex-wrap:wrap;img{height:", ";width:", ";object-fit:cover;cursor:pointer;}"], function (_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size;
+  return _Gallery.imageSizeMapping[size];
+}, function (_ref2) {
+  var _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'small' : _ref2$size;
+  return _Gallery.imageSizeMapping[size];
+});
 exports.GalleryItemWrapper = GalleryItemWrapper;
 var GalleryItem = _styledComponents["default"].div.withConfig({
   displayName: "GalleryStyle__GalleryItem",
   componentId: "sc-mrr504-2"
-})(["position:relative;margin:5px;", ""], function (_ref) {
-  var imageLeft = _ref.imageLeft;
+})(["position:relative;margin:5px;", ""], function (_ref3) {
+  var imageLeft = _ref3.imageLeft;
   if (imageLeft !== 0) {
     return "\n        &:last-child:after {\n          content: '+" + imageLeft + "';\n          position: absolute;\n          top: 0;\n          left: 0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          color: #0869C2;\n          height: 100%;\n          width: 100%;\n          font-size: 18px;\n          background: rgba(255, 255, 255, 0.75);\n          cursor: pointer;\n        }\n      ";
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.394",
+  "version": "4.1.0",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",