glints-aries 4.0.264 → 4.0.266

package/es/@next/Carousel/Carousel.d.ts

@@ -18,5 +18,7 @@ export interface CarouselProps {
     indicatorType?: 'dot' | 'line' | 'slider';
     /** When to show arrows*/
     showArrow?: 'always' | 'hover' | 'never';
+    /** When `autoRotate` is `true`, specify milliseconds until next slide shows */
+    duration?: number;
 }
-export declare const Carousel: ({ autoRotate, children, aspectRatio, height, width, indicatorPosition, indicatorType, }: CarouselProps) => JSX.Element;
+export declare const Carousel: ({ autoRotate, children, aspectRatio, height, width, indicatorPosition, indicatorType, duration, }: CarouselProps) => JSX.Element;

package/es/@next/Carousel/Carousel.js

@@ -12,7 +12,9 @@ export var Carousel = function Carousel(_ref) {
     _ref$indicatorPositio = _ref.indicatorPosition,
     indicatorPosition = _ref$indicatorPositio === void 0 ? 'outer' : _ref$indicatorPositio,
     _ref$indicatorType = _ref.indicatorType,
-    indicatorType = _ref$indicatorType === void 0 ? 'line' : _ref$indicatorType;
+    indicatorType = _ref$indicatorType === void 0 ? 'line' : _ref$indicatorType,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 3000 : _ref$duration;
   var slideRef = useRef(null);
   var _useState = useState(0),
     activeIndex = _useState[0],
@@ -57,7 +59,7 @@ export var Carousel = function Carousel(_ref) {
     if (autoRotate) {
       setTimeout(function () {
         updateActiveIndex(activeIndex + 1);
-      }, 3000);
+      }, duration);
     }
   }, [activeIndex, autoRotate, updateActiveIndex]);
   return /*#__PURE__*/React.createElement(CarouselContainer, {

package/es/@next/Select/Select.stories.d.ts

@@ -8,6 +8,7 @@ export declare const NonSearchableDisabled: any;
 export declare const SearchableMultiSelect: any;
 export declare const SearchableSingleSelect: any;
 export declare const SearchableSingleSelectWithOverflowingInputState: any;
+export declare const SearchableSingleSelectWithInitialValue: any;
 export declare const SearchableSingleWithInputState: any;
 export declare const AsyncSearchableSingleWithInputState: any;
 export declare const MultiSelectScrollable: any;

package/es/@next/Select/components/SearchableSelectInput/ClearSelected.js

@@ -17,6 +17,7 @@ export var ClearSelected = function ClearSelected(_ref) {
     style: {
       cursor: 'pointer'
     },
-    onClick: onClearIconClick
+    onClick: onClearIconClick,
+    className: "clear-icon"
   }));
 };

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

@@ -93,13 +93,24 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
     }
     return;
   }, [isSelectedClicked, showInput]);
+  var handleUpdateSearchableSelectState = React.useRef(updateSearchableSelectState);
   useEffect(function () {
     if (selectedValue) {
       setShowClear(true);
+      handleUpdateSearchableSelectState.current({
+        showSelected: true,
+        showInput: false,
+        showPlaceholder: false
+      });
       return;
     }
     setShowClear(false);
-  }, [selectedValue]);
+    handleUpdateSearchableSelectState.current({
+      showSelected: false,
+      showInput: true,
+      showPlaceholder: true
+    });
+  }, [selectedValue, handleUpdateSearchableSelectState]);
   return /*#__PURE__*/React.createElement(StyledContainer, {
     className: "select-input-container",
     ref: ref,

package/es/@next/Select/selectStoryHelper/SearchableSingleSelect.d.ts

@@ -5,5 +5,6 @@ interface SearchableSingleSelectProps {
 }
 export declare const SearchableSingle: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export declare const SearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
+export declare const SearchableSingleWithInitialValue: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export declare const AsyncSearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export {};

package/es/@next/Select/selectStoryHelper/SearchableSingleSelect.js

@@ -3,7 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["data"],
   _excluded2 = ["data"],
-  _excluded3 = ["data"];
+  _excluded3 = ["data"],
+  _excluded4 = ["data"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useState } from 'react';
 import { debounce } from '../../../helpers/debounce';
@@ -57,6 +58,25 @@ export var SearchableSingleWithInputState = function SearchableSingleWithInputSt
     label: "Label"
   }));
 };
+export var SearchableSingleWithInitialValue = function SearchableSingleWithInitialValue(_ref5) {
+  var data = _ref5.data,
+    args = _objectWithoutPropertiesLoose(_ref5, _excluded3);
+  var _useState4 = useState('Singapore'),
+    selected = _useState4[0],
+    setSelected = _useState4[1];
+  var handleSelect = function handleSelect(_ref6) {
+    var value = _ref6.value;
+    setSelected(value);
+  };
+  return /*#__PURE__*/React.createElement(Select, _extends({}, args, {
+    onSelect: handleSelect,
+    options: data,
+    selectedValues: [selected],
+    width: "600px",
+    searchable: true,
+    label: "Label"
+  }));
+};
 var filterOptions = function filterOptions(str, data) {
   if (str === '') {
     return data;
@@ -75,23 +95,23 @@ var mockAsyncOptions = function mockAsyncOptions(str, data) {
     }, 1000);
   });
 };
-export var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleWithInputState(_ref5) {
-  var data = _ref5.data,
-    args = _objectWithoutPropertiesLoose(_ref5, _excluded3);
-  var _useState4 = useState(false),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useState5 = useState([]),
-    mockData = _useState5[0],
-    setMockData = _useState5[1];
-  var _useState6 = useState(''),
-    inputValue = _useState6[0],
-    setInputValue = _useState6[1];
+export var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleWithInputState(_ref7) {
+  var data = _ref7.data,
+    args = _objectWithoutPropertiesLoose(_ref7, _excluded4);
+  var _useState5 = useState(false),
+    loading = _useState5[0],
+    setLoading = _useState5[1];
+  var _useState6 = useState([]),
+    mockData = _useState6[0],
+    setMockData = _useState6[1];
   var _useState7 = useState(''),
-    selected = _useState7[0],
-    setSelected = _useState7[1];
+    inputValue = _useState7[0],
+    setInputValue = _useState7[1];
+  var _useState8 = useState(''),
+    selected = _useState8[0],
+    setSelected = _useState8[1];
   var handleInputChange = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
+    var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(value) {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -103,17 +123,17 @@ export var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleW
       }, _callee);
     }));
     return function handleInputChange(_x) {
-      return _ref6.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
   var debounceHandleInputChange = debounce(handleInputChange);
-  var handleSelect = function handleSelect(_ref7) {
-    var value = _ref7.value;
+  var handleSelect = function handleSelect(_ref9) {
+    var value = _ref9.value;
     setSelected(value);
   };
   useEffect(function () {
     var fetchMockData = /*#__PURE__*/function () {
-      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _ref10 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
         var response;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -139,7 +159,7 @@ export var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleW
         }, _callee2, null, [[0, 9]]);
       }));
       return function fetchMockData() {
-        return _ref8.apply(this, arguments);
+        return _ref10.apply(this, arguments);
       };
     }();
     if (inputValue === '') {

package/lib/@next/Carousel/Carousel.d.ts

@@ -18,5 +18,7 @@ export interface CarouselProps {
     indicatorType?: 'dot' | 'line' | 'slider';
     /** When to show arrows*/
     showArrow?: 'always' | 'hover' | 'never';
+    /** When `autoRotate` is `true`, specify milliseconds until next slide shows */
+    duration?: number;
 }
-export declare const Carousel: ({ autoRotate, children, aspectRatio, height, width, indicatorPosition, indicatorType, }: CarouselProps) => JSX.Element;
+export declare const Carousel: ({ autoRotate, children, aspectRatio, height, width, indicatorPosition, indicatorType, duration, }: CarouselProps) => JSX.Element;

package/lib/@next/Carousel/Carousel.js

@@ -18,7 +18,9 @@ var Carousel = function Carousel(_ref) {
     _ref$indicatorPositio = _ref.indicatorPosition,
     indicatorPosition = _ref$indicatorPositio === void 0 ? 'outer' : _ref$indicatorPositio,
     _ref$indicatorType = _ref.indicatorType,
-    indicatorType = _ref$indicatorType === void 0 ? 'line' : _ref$indicatorType;
+    indicatorType = _ref$indicatorType === void 0 ? 'line' : _ref$indicatorType,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 3000 : _ref$duration;
   var slideRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(0),
     activeIndex = _useState[0],
@@ -63,7 +65,7 @@ var Carousel = function Carousel(_ref) {
     if (autoRotate) {
       setTimeout(function () {
         updateActiveIndex(activeIndex + 1);
-      }, 3000);
+      }, duration);
     }
   }, [activeIndex, autoRotate, updateActiveIndex]);
   return /*#__PURE__*/_react["default"].createElement(_CarouselStyle.CarouselContainer, {

package/lib/@next/Select/Select.stories.d.ts

@@ -8,6 +8,7 @@ export declare const NonSearchableDisabled: any;
 export declare const SearchableMultiSelect: any;
 export declare const SearchableSingleSelect: any;
 export declare const SearchableSingleSelectWithOverflowingInputState: any;
+export declare const SearchableSingleSelectWithInitialValue: any;
 export declare const SearchableSingleWithInputState: any;
 export declare const AsyncSearchableSingleWithInputState: any;
 export declare const MultiSelectScrollable: any;

package/lib/@next/Select/components/SearchableSelectInput/ClearSelected.js

@@ -22,7 +22,8 @@ var ClearSelected = function ClearSelected(_ref) {
     style: {
       cursor: 'pointer'
     },
-    onClick: onClearIconClick
+    onClick: onClearIconClick,
+    className: "clear-icon"
   }));
 };
 exports.ClearSelected = ClearSelected;

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

@@ -100,13 +100,24 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
     }
     return;
   }, [isSelectedClicked, showInput]);
+  var handleUpdateSearchableSelectState = _react["default"].useRef(updateSearchableSelectState);
   (0, _react.useEffect)(function () {
     if (selectedValue) {
       setShowClear(true);
+      handleUpdateSearchableSelectState.current({
+        showSelected: true,
+        showInput: false,
+        showPlaceholder: false
+      });
       return;
     }
     setShowClear(false);
-  }, [selectedValue]);
+    handleUpdateSearchableSelectState.current({
+      showSelected: false,
+      showInput: true,
+      showPlaceholder: true
+    });
+  }, [selectedValue, handleUpdateSearchableSelectState]);
   return /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledContainer, {
     className: "select-input-container",
     ref: ref,

package/lib/@next/Select/selectStoryHelper/SearchableSingleSelect.d.ts

@@ -5,5 +5,6 @@ interface SearchableSingleSelectProps {
 }
 export declare const SearchableSingle: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export declare const SearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
+export declare const SearchableSingleWithInitialValue: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export declare const AsyncSearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export {};

package/lib/@next/Select/selectStoryHelper/SearchableSingleSelect.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.SearchableSingleWithInputState = exports.SearchableSingle = exports.AsyncSearchableSingleWithInputState = void 0;
+exports.SearchableSingleWithInputState = exports.SearchableSingleWithInitialValue = exports.SearchableSingle = exports.AsyncSearchableSingleWithInputState = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -12,7 +12,8 @@ var _debounce = require("../../../helpers/debounce");
 var _Select = require("../Select");
 var _excluded = ["data"],
   _excluded2 = ["data"],
-  _excluded3 = ["data"];
+  _excluded3 = ["data"],
+  _excluded4 = ["data"];
 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 SearchableSingle = function SearchableSingle(_ref) {
@@ -66,6 +67,26 @@ var SearchableSingleWithInputState = function SearchableSingleWithInputState(_re
   }));
 };
 exports.SearchableSingleWithInputState = SearchableSingleWithInputState;
+var SearchableSingleWithInitialValue = function SearchableSingleWithInitialValue(_ref5) {
+  var data = _ref5.data,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded3);
+  var _useState4 = (0, _react.useState)('Singapore'),
+    selected = _useState4[0],
+    setSelected = _useState4[1];
+  var handleSelect = function handleSelect(_ref6) {
+    var value = _ref6.value;
+    setSelected(value);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
+    onSelect: handleSelect,
+    options: data,
+    selectedValues: [selected],
+    width: "600px",
+    searchable: true,
+    label: "Label"
+  }));
+};
+exports.SearchableSingleWithInitialValue = SearchableSingleWithInitialValue;
 var filterOptions = function filterOptions(str, data) {
   if (str === '') {
     return data;
@@ -84,23 +105,23 @@ var mockAsyncOptions = function mockAsyncOptions(str, data) {
     }, 1000);
   });
 };
-var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleWithInputState(_ref5) {
-  var data = _ref5.data,
-    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded3);
-  var _useState4 = (0, _react.useState)(false),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
-    mockData = _useState5[0],
-    setMockData = _useState5[1];
-  var _useState6 = (0, _react.useState)(''),
-    inputValue = _useState6[0],
-    setInputValue = _useState6[1];
+var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleWithInputState(_ref7) {
+  var data = _ref7.data,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref7, _excluded4);
+  var _useState5 = (0, _react.useState)(false),
+    loading = _useState5[0],
+    setLoading = _useState5[1];
+  var _useState6 = (0, _react.useState)([]),
+    mockData = _useState6[0],
+    setMockData = _useState6[1];
   var _useState7 = (0, _react.useState)(''),
-    selected = _useState7[0],
-    setSelected = _useState7[1];
+    inputValue = _useState7[0],
+    setInputValue = _useState7[1];
+  var _useState8 = (0, _react.useState)(''),
+    selected = _useState8[0],
+    setSelected = _useState8[1];
   var handleInputChange = /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(value) {
+    var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(value) {
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -112,17 +133,17 @@ var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleWithInpu
       }, _callee);
     }));
     return function handleInputChange(_x) {
-      return _ref6.apply(this, arguments);
+      return _ref8.apply(this, arguments);
     };
   }();
   var debounceHandleInputChange = (0, _debounce.debounce)(handleInputChange);
-  var handleSelect = function handleSelect(_ref7) {
-    var value = _ref7.value;
+  var handleSelect = function handleSelect(_ref9) {
+    var value = _ref9.value;
     setSelected(value);
   };
   (0, _react.useEffect)(function () {
     var fetchMockData = /*#__PURE__*/function () {
-      var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      var _ref10 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
         var response;
         return _regenerator["default"].wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -148,7 +169,7 @@ var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleWithInpu
         }, _callee2, null, [[0, 9]]);
       }));
       return function fetchMockData() {
-        return _ref8.apply(this, arguments);
+        return _ref10.apply(this, arguments);
       };
     }();
     if (inputValue === '') {

package/package.json

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