glints-aries 4.0.262 → 4.0.263

package/es/@next/Menu/MenuStyle.d.ts

@@ -2,4 +2,5 @@ import { MenuProps } from './Menu';
 export declare const StyledMenu: import("styled-components").StyledComponent<"ul", any, MenuProps, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const StyledSections: import("styled-components").StyledComponent<"ul", any, {}, never>;

package/es/@next/Menu/MenuStyle.js

@@ -5,7 +5,7 @@ import { space16, space4, space8 } from '../utilities/spacing';
 export var StyledMenu = styled.ul.withConfig({
   displayName: "MenuStyle__StyledMenu",
   componentId: "sc-zm0l1a-0"
-})(["list-style:none;padding:0;margin:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";svg{height:24px;width:24px;}&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}&[data-multiple='true']{background:", ";::before{content:none;}}}}"], space8, space4, Neutral.B99, borderRadius4, Blue.S54, space4, Neutral.B85, Blue.S08, borderRadius4, space8, Blue.S99, Neutral.B100);
+})(["list-style:none;padding:0;margin:0;li{display:flex;min-height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";svg{height:24px;width:24px;}&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}&[data-multiple='true']{background:", ";::before{content:none;}}}}"], space8, space4, Neutral.B99, borderRadius4, Blue.S54, space4, Neutral.B85, Blue.S08, borderRadius4, space8, Blue.S99, Neutral.B100);
 export var TitleContainer = styled.div.withConfig({
   displayName: "MenuStyle__TitleContainer",
   componentId: "sc-zm0l1a-1"
@@ -14,7 +14,11 @@ export var ListContainer = styled.div.withConfig({
   displayName: "MenuStyle__ListContainer",
   componentId: "sc-zm0l1a-2"
 })(["padding:0 ", ";"], space8);
+export var List = styled.li.withConfig({
+  displayName: "MenuStyle__List",
+  componentId: "sc-zm0l1a-3"
+})(["height:max-content;span{overflow:hidden;width:100%;}"]);
 export var StyledSections = styled.ul.withConfig({
   displayName: "MenuStyle__StyledSections",
-  componentId: "sc-zm0l1a-3"
+  componentId: "sc-zm0l1a-4"
 })(["list-style:none;padding:0;margin:", " 0;"], space8);

package/es/@next/Menu/components/MenuOption.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ListContainer } from '../MenuStyle';
+import { List, ListContainer } from '../MenuStyle';
 export var MenuOption = function MenuOption(_ref) {
   var children = _ref.children,
     disabled = _ref.disabled,
@@ -13,7 +13,7 @@ export var MenuOption = function MenuOption(_ref) {
       value: event.currentTarget.dataset.value
     });
   };
-  return /*#__PURE__*/React.createElement(ListContainer, null, /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React.createElement(ListContainer, null, /*#__PURE__*/React.createElement(List, {
     "aria-disabled": disabled,
     "data-active": isSelected,
     "data-multiple": allowMultiple,

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

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

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

@@ -4,7 +4,7 @@ var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder"
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { StyledInput, StyledPrefixContainer } from '../../../Input/InputStyle';
 import { ClearSelected } from './ClearSelected';
-import { InputContainer, StyledContainer, StyledSelectedValue } from './SearchableSelectInputStyle';
+import { InputContainer, StyledContainer, StyledSelected, StyledSelectedValue } from './SearchableSelectInputStyle';
 export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSelectInput(_ref, ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -111,7 +111,7 @@ export var SearchableSelectInput = /*#__PURE__*/forwardRef(function SearchableSe
   }, /*#__PURE__*/React.createElement(StyledPrefixContainer, null, prefix), showSelected && /*#__PURE__*/React.createElement(StyledSelectedValue, {
     className: "searchable-select",
     onClick: handleSelectedClick
-  }, selectedValue), showInput && /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(StyledInput, _extends({
+  }, /*#__PURE__*/React.createElement(StyledSelected, null, selectedValue)), showInput && /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(StyledInput, _extends({
     ref: inputRef,
     onChange: handleInputChange,
     placeholder: showPlaceholder ? placeholder : null,

package/es/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.d.ts

@@ -1,4 +1,5 @@
 export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, import("../../../Input/Input").InputProps & import("../../../Input/InputStyle").PreffixSuffixWidthProps, never>;
+export declare const StyledSelected: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledSelectedValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ClearSelectedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -16,15 +16,19 @@ export var StyledContainer = styled(StyledInputContainer).withConfig({
 }, function (props) {
   return props.suffixWidth;
 }, Red.B93, Neutral.B85, Neutral.B95, Neutral.B85);
+export var StyledSelected = styled.span.withConfig({
+  displayName: "SearchableSelectInputStyle__StyledSelected",
+  componentId: "sc-1oj168h-1"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 export var StyledSelectedValue = styled.div.withConfig({
   displayName: "SearchableSelectInputStyle__StyledSelectedValue",
-  componentId: "sc-1oj168h-1"
+  componentId: "sc-1oj168h-2"
 })(["border:1px solid ", ";border-radius:", ";background:transparent;box-sizing:border-box;padding:0 12px;height:36px;display:flex;align-items:center;grid-column:1 / 1;grid-row:1 / 1;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";@media (max-width:", "){font-size:14px;}"], Neutral.B68, borderRadius4, NotoSans, Neutral.B18, Breakpoints.large);
 export var InputContainer = styled.div.withConfig({
   displayName: "SearchableSelectInputStyle__InputContainer",
-  componentId: "sc-1oj168h-2"
+  componentId: "sc-1oj168h-3"
 })(["grid-column:1 / 1;grid-row:1 / 1;"]);
 export var ClearSelectedContainer = styled(StyledSuffixContainer).withConfig({
   displayName: "SearchableSelectInputStyle__ClearSelectedContainer",
-  componentId: "sc-1oj168h-3"
+  componentId: "sc-1oj168h-4"
 })(["z-index:2;"]);

package/lib/@next/Menu/MenuStyle.d.ts

@@ -2,4 +2,5 @@ import { MenuProps } from './Menu';
 export declare const StyledMenu: import("styled-components").StyledComponent<"ul", any, MenuProps, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"li", any, {}, never>;
 export declare const StyledSections: import("styled-components").StyledComponent<"ul", any, {}, never>;

package/lib/@next/Menu/MenuStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.TitleContainer = exports.StyledSections = exports.StyledMenu = exports.ListContainer = void 0;
+exports.TitleContainer = exports.StyledSections = exports.StyledMenu = exports.ListContainer = exports.List = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
@@ -10,7 +10,7 @@ var _spacing = require("../utilities/spacing");
 var StyledMenu = _styledComponents["default"].ul.withConfig({
   displayName: "MenuStyle__StyledMenu",
   componentId: "sc-zm0l1a-0"
-})(["list-style:none;padding:0;margin:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";svg{height:24px;width:24px;}&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}&[data-multiple='true']{background:", ";::before{content:none;}}}}"], _spacing.space8, _spacing.space4, _colors.Neutral.B99, _borderRadius.borderRadius4, _colors.Blue.S54, _spacing.space4, _colors.Neutral.B85, _colors.Blue.S08, _borderRadius.borderRadius4, _spacing.space8, _colors.Blue.S99, _colors.Neutral.B100);
+})(["list-style:none;padding:0;margin:0;li{display:flex;min-height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";svg{height:24px;width:24px;}&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}&[data-multiple='true']{background:", ";::before{content:none;}}}}"], _spacing.space8, _spacing.space4, _colors.Neutral.B99, _borderRadius.borderRadius4, _colors.Blue.S54, _spacing.space4, _colors.Neutral.B85, _colors.Blue.S08, _borderRadius.borderRadius4, _spacing.space8, _colors.Blue.S99, _colors.Neutral.B100);
 exports.StyledMenu = StyledMenu;
 var TitleContainer = _styledComponents["default"].div.withConfig({
   displayName: "MenuStyle__TitleContainer",
@@ -22,8 +22,13 @@ var ListContainer = _styledComponents["default"].div.withConfig({
   componentId: "sc-zm0l1a-2"
 })(["padding:0 ", ";"], _spacing.space8);
 exports.ListContainer = ListContainer;
+var List = _styledComponents["default"].li.withConfig({
+  displayName: "MenuStyle__List",
+  componentId: "sc-zm0l1a-3"
+})(["height:max-content;span{overflow:hidden;width:100%;}"]);
+exports.List = List;
 var StyledSections = _styledComponents["default"].ul.withConfig({
   displayName: "MenuStyle__StyledSections",
-  componentId: "sc-zm0l1a-3"
+  componentId: "sc-zm0l1a-4"
 })(["list-style:none;padding:0;margin:", " 0;"], _spacing.space8);
 exports.StyledSections = StyledSections;

package/lib/@next/Menu/components/MenuOption.js

@@ -18,7 +18,7 @@ var MenuOption = function MenuOption(_ref) {
       value: event.currentTarget.dataset.value
     });
   };
-  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.ListContainer, null, /*#__PURE__*/_react["default"].createElement("li", {
+  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.ListContainer, null, /*#__PURE__*/_react["default"].createElement(_MenuStyle.List, {
     "aria-disabled": disabled,
     "data-active": isSelected,
     "data-multiple": allowMultiple,

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

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

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

@@ -118,7 +118,7 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
   }, /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledPrefixContainer, null, prefix), showSelected && /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledSelectedValue, {
     className: "searchable-select",
     onClick: handleSelectedClick
-  }, selectedValue), showInput && /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.InputContainer, null, /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledInput, (0, _extends2["default"])({
+  }, /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledSelected, null, selectedValue)), showInput && /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.InputContainer, null, /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledInput, (0, _extends2["default"])({
     ref: inputRef,
     onChange: handleInputChange,
     placeholder: showPlaceholder ? placeholder : null,

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInputStyle.d.ts

@@ -1,4 +1,5 @@
 export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, import("../../../Input/Input").InputProps & import("../../../Input/InputStyle").PreffixSuffixWidthProps, never>;
+export declare const StyledSelected: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const StyledSelectedValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ClearSelectedContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.StyledSelectedValue = exports.StyledContainer = exports.InputContainer = exports.ClearSelectedContainer = void 0;
+exports.StyledSelectedValue = exports.StyledSelected = exports.StyledContainer = exports.InputContainer = exports.ClearSelectedContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var Breakpoints = _interopRequireWildcard(require("../../../utilities/breakpoints"));
 var _colors = require("../../../utilities/colors");
@@ -24,18 +24,23 @@ var StyledContainer = (0, _styledComponents["default"])(_InputStyle.StyledContai
   return props.suffixWidth;
 }, _colors.Red.B93, _colors.Neutral.B85, _colors.Neutral.B95, _colors.Neutral.B85);
 exports.StyledContainer = StyledContainer;
+var StyledSelected = _styledComponents["default"].span.withConfig({
+  displayName: "SearchableSelectInputStyle__StyledSelected",
+  componentId: "sc-1oj168h-1"
+})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+exports.StyledSelected = StyledSelected;
 var StyledSelectedValue = _styledComponents["default"].div.withConfig({
   displayName: "SearchableSelectInputStyle__StyledSelectedValue",
-  componentId: "sc-1oj168h-1"
+  componentId: "sc-1oj168h-2"
 })(["border:1px solid ", ";border-radius:", ";background:transparent;box-sizing:border-box;padding:0 12px;height:36px;display:flex;align-items:center;grid-column:1 / 1;grid-row:1 / 1;font-family:", ",sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;color:", ";@media (max-width:", "){font-size:14px;}"], _colors.Neutral.B68, _borderRadius.borderRadius4, _fonts.NotoSans, _colors.Neutral.B18, Breakpoints.large);
 exports.StyledSelectedValue = StyledSelectedValue;
 var InputContainer = _styledComponents["default"].div.withConfig({
   displayName: "SearchableSelectInputStyle__InputContainer",
-  componentId: "sc-1oj168h-2"
+  componentId: "sc-1oj168h-3"
 })(["grid-column:1 / 1;grid-row:1 / 1;"]);
 exports.InputContainer = InputContainer;
 var ClearSelectedContainer = (0, _styledComponents["default"])(_InputStyle.StyledSuffixContainer).withConfig({
   displayName: "SearchableSelectInputStyle__ClearSelectedContainer",
-  componentId: "sc-1oj168h-3"
+  componentId: "sc-1oj168h-4"
 })(["z-index:2;"]);
 exports.ClearSelectedContainer = ClearSelectedContainer;

package/package.json

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