@edvisor/product-language 0.4.2 → 0.4.3

package/index.js

@@ -5987,7 +5987,7 @@ const HelpText = /*#__PURE__*/styled(Body).withConfig({
 const ErrorMessage$1 = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "labeled-input__ErrorMessage",
   componentId: "a0ln2j-3"
-})(["margin-bottom:", ";& path{fill:", ";}"], Margin.xxs, Icons.Warning);
+})(["margin-bottom:", ";& path{fill:", ";}div{color:", ";}"], Margin.xxs, Icons.Critical, Text$1.Critical);
 const LabeledInput = props => {
   return jsxs(HTMLLabel, {
     children: [jsxs("label", {
@@ -6045,13 +6045,13 @@ const Stepper = props => {
 const FancyBorder = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "input-field__FancyBorder",
   componentId: "sc-1yq0rb7-0"
-})(["background:", ";border:1px solid ", ";border-radius:6px;box-sizing:border-box;margin-bottom:", ";padding-left:", ";user-select:none;:focus,:focus-within,:active{border:", ";}"], ({
+})(["background:", ";border:1px solid ", ";border-radius:6px;box-sizing:border-box;margin-bottom:", ";padding-left:", ";user-select:none;outline-offset:-2px;", "}"], ({
   invalid
 }) => is(invalid) ? Surface.Critical.Subdued : Surface.Default.Default, ({
   invalid
 }) => is(invalid) ? Borders.Critical.Default : Borders.Default.Default, Margin.xxs, Padding.s, ({
   invalid
-}) => is(invalid) ? `1px solid ${Borders.Critical.Default}` : `2px solid ${Focused.Default}`);
+}) => !is(invalid) && css([":focus,:focus-within,:active{outline:2px solid ", "}"], Focused.Default));
 const InputLayout = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "input-field__InputLayout",
   componentId: "sc-1yq0rb7-1"
@@ -7275,6 +7275,11 @@ $$3({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }
   }
 });
 
+const DEFAULT_ROW_HEIGHT = 44;
+const DEFAULT_MENU_HEIGHT = 190;
+const DEFAULT_EMPTY_TEXT = 'No results found';
+const DEFAULT_PLACEHOLDER = 'Select Something';
+
 var $$2 = _export;
 var call$2 = functionCall;
 
@@ -7553,18 +7558,22 @@ function toKey(value) {
   return JSON.stringify(value);
 }
 const topPosition = props => {
-  if (props.menuPosition === 'top' && isDefined(props.menuHeight) && typeof props.menuHeight === 'number') {
-    return `${-(props.menuHeight + (isDefined(props.label) && props.labelPosition !== 'side' ? 58 : 38))}px`;
+  if (props.menuPosition === "top"
+  /* menuPositionType.TOP */
+  && isDefined(props.menuHeight) && typeof props.menuHeight === 'number') {
+    return `${-(props.menuHeight + (isDefined(props.label) && !isEmpty(props.label) && props.labelPosition === "top"
+    /* labelPositionType.TOP */
+    ? 64 : 44))}px`;
   }
 
-  return '0';
+  return '4px';
 };
 
-const OptionItem = /*#__PURE__*/styled.div.withConfig({
+const OptionItem = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "option__OptionItem",
   componentId: "sc-1hb1qjt-0"
-})(["display:flex;align-items:center;justify-content:space-between;flex:1;height:", "px;padding:", " ", ";min-width:0;cursor:pointer;box-sizing:border-box;background-color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}"], props => defaultTo(props.height, 44), Padding.none, Padding.s, props => is(props.active) ? Surface.Selected.Default : is(props.selected) ? Surface.Default.Hover : Surface.Default.Default, props => is(props.active) ? Surface.Selected.Hover : Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed);
-const CheckedIcon = /*#__PURE__*/styled(IconMinor.Check).withConfig({
+})(["flex:1;height:", "px;min-width:0;cursor:pointer;box-sizing:border-box;margin:", ";border-radius:6px;background-clip:content-box;background-color:", ";& div{padding:", " ", ";}& i:last-child{right:8px;}&:hover{background-color:", ";}&:active{background-color:", ";}"], props => defaultTo(props.height, DEFAULT_ROW_HEIGHT), Margin.xxs, props => is(props.active) ? Surface.Selected.Default : is(props.selected) ? Surface.Default.Hover : Surface.Default.Default, Padding.none, Padding.xs, props => is(props.active) ? Surface.Selected.Hover : Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed);
+const CheckedIcon$1 = /*#__PURE__*/styled(IconMinor.Check).withConfig({
   displayName: "option__CheckedIcon",
   componentId: "sc-1hb1qjt-1"
 })(["svg{path{fill:", "}}"], Icons.Highlight);
@@ -7585,6 +7594,7 @@ const OptionComponent = /*#__PURE__*/memo(props => {
   return jsxs(OptionItem, Object.assign({
     className: className.join(' '),
     "data-role": "option",
+    center: true,
     selected: selected,
     active: active,
     height: height,
@@ -7595,18 +7605,20 @@ const OptionComponent = /*#__PURE__*/memo(props => {
       active: active
     }, option, {
       children: option.label
-    })), is(active) && jsx(CheckedIcon, {})]
+    })), is(active) && jsx(CheckedIcon$1, {})]
   }));
 }, areEqual);
 
 const MenuWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "menu-container__MenuWrapper",
   componentId: "dadn7s-0"
-})(["z-index:1;position:relative;background:", ";top:", ";box-sizing:border-box;.menu-list{box-sizing:border-box;box-shadow:", ";border:1px solid ", ";background-color:", ";border-radius:6px;opacity:0;transition:opacity 0.1s ease;&:focus{outline:none;}::-webkit-scrollbar{width:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}}"], Surface.Default.Default, ({
+})(["z-index:1;position:relative;background:", ";top:", ";box-sizing:border-box;.menu-list{box-sizing:border-box;box-shadow:", ";border:1px solid ", ";background-color:", ";border-radius:6px;opacity:0;transition:opacity 0.1s ease;padding:", ";&:focus{outline:none;}::-webkit-scrollbar{width:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}}"], Surface.Default.Default, ({
   props
 }) => topPosition(props), ({
   props
-}) => props.menuPosition === 'bottom' ? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)' : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)', Borders.Default.Subdued, Surface.Default.Default, Surface.Neutral.Default);
+}) => props.menuPosition === "bottom"
+/* menuPositionType.BOTTOM */
+? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)' : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)', Borders.Default.Subdued, Surface.Default.Default, Padding.xxs, Surface.Neutral.Default);
 const MenuContainer = props => {
   const {
     onClick,
@@ -7668,7 +7680,7 @@ fixRegExpWellKnownSymbolLogic$1('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-const MenuRow = /*#__PURE__*/memo(({
+const MenuRow$1 = /*#__PURE__*/memo(({
   index,
   style,
   data
@@ -7707,18 +7719,24 @@ const SelectLabel = /*#__PURE__*/styled(Label).withConfig({
 const EmptyOptionItem = /*#__PURE__*/styled(OptionItem).withConfig({
   displayName: "menu__EmptyOptionItem",
   componentId: "sc-1086ljy-0"
-})(["border:1px solid ", ";background-color:", ";border-radius:6px;position:absolute;top:", ";width:100%;", ""], Borders.Default.Subdued, Surface.Default.Default, ({
+})(["border:1px solid ", ";background-color:", ";position:absolute;margin:", ";width:100%;height:54px;box-shadow:", ";&:hover{background-color:", ";}"], Borders.Default.Subdued, Surface.Default.Default, Margin.none, ({
   props
-}) => topPosition(props), shadowSm);
+}) => props.menuPosition === "bottom"
+/* menuPositionType.BOTTOM */
+? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)' : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)', Surface.Default.Default);
 const Menu = props => {
   const {
-    rowHeight = 44,
+    rowHeight = DEFAULT_ROW_HEIGHT,
     selectedIndex,
     open,
     invalid,
-    menuHeight,
-    menuPosition,
-    labelPosition,
+    menuHeight = DEFAULT_MENU_HEIGHT,
+    menuPosition = "bottom"
+    /* menuPositionType.BOTTOM */
+    ,
+    labelPosition = "top"
+    /* labelPositionType.TOP */
+    ,
     label
   } = props;
   const options = safeArray(props.options); // eslint-disable-next-line no-null/no-null
@@ -7726,7 +7744,7 @@ const Menu = props => {
   const list = useRef(null); // eslint-disable-next-line no-null/no-null
 
   const outerRef = useRef(null);
-  const height = Math.min(Math.max(options.length * rowHeight, rowHeight) + 2, defaultTo(menuHeight, 185));
+  const height = Math.min(Math.max(options.length * rowHeight, rowHeight) + 10, menuHeight);
   useEffect(() => {
     if (is(open) && isDefined(list.current) && selectedIndex !== undefined && selectedIndex !== -1) {
       list.current.scrollToItem(selectedIndex, 'center');
@@ -7769,7 +7787,7 @@ const Menu = props => {
       }, {
         children: jsx(SelectLabel, {
           children: jsx("span", {
-            children: defaultTo(emptyText, 'No results found')
+            children: defaultTo(emptyText, DEFAULT_EMPTY_TEXT)
           })
         })
       }));
@@ -7788,7 +7806,7 @@ const Menu = props => {
       itemCount: itemCount,
       itemData: itemData
     }, {
-      children: MenuRow
+      children: MenuRow$1
     }));
   };
 
@@ -7834,7 +7852,7 @@ $({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {
 const TagContainer = /*#__PURE__*/styled(Tag).withConfig({
   displayName: "value-component-multi__TagContainer",
   componentId: "sc-1fc9cnm-0"
-})(["&:last-of-type{margin-right:", ";}div:first-child{min-height:auto;padding:", " ", " ", " ", ";}div:last-child{padding:", ";}"], Margin.xs, Padding.none, Padding.none, Padding.none, Padding.xxs, Padding.none);
+})(["div:first-child{min-height:auto;padding:", " ", " ", " ", ";}div:last-child{padding:", ";}"], Padding.none, Padding.none, Padding.none, Padding.xxs, Padding.none);
 
 const ValueComponentMulti = props => {
   const {
@@ -8414,33 +8432,7 @@ function getButtonType(props) {
 const ButtonFrame = /*#__PURE__*/styled.button.withConfig({
   displayName: "button__ButtonFrame",
   componentId: "v4884z-0"
-})(["padding:", ";border:", ";border-radius:6px;background:", ";cursor:", ";display:flex;flex-direction:row;justify-content:center;gap:8px;align-items:center;position:relative;svg[role='icon']{path{fill:", ";}}", ""], props => props.buttonSize, props => props.buttonBorder, props => props.backgroundColor, props => props.cursor, props => props.iconColor, props => !props.isDisabled ? `
-    &:hover {
-      background: ${props.backgroundHover};
-      text-decoration:  ${props.textDecorationHover};
-      div {
-        color: ${props.textColorHover};
-      }
-      svg[role='icon'] {
-        path {
-          fill: ${props.iconColorHover};
-        }
-      }
-    }
-
-    &:focus  {
-      outline: 2px solid ${Focused.Default}
-    }
-
-    &:focus-visible  {
-      border: 2px solid ${Focused.Default}
-    }
-
-    &:active {
-      text-decoration: 'none'
-      background: ${props.backgroundPressed}
-    }
-  ` : '');
+})(["padding:", ";border:", ";border-radius:6px;background:", ";cursor:", ";display:flex;flex-direction:row;justify-content:center;gap:8px;align-items:center;position:relative;svg[role='icon']{path{fill:", ";}}", ""], props => props.buttonSize, props => props.buttonBorder, props => props.backgroundColor, props => props.cursor, props => props.iconColor, props => !props.isDisabled && css(["&:hover{background:", ";text-decoration:", ";div{color:", ";}svg[role='icon']{path{fill:", ";}}}outline-offset:-2px;&:focus,focus-visible{outline:2px solid ", "}&:active{text-decoration:'none' background:", "}"], props.backgroundHover, props.textDecorationHover, props.textColorHover, props.iconColorHover, Focused.Default, props.backgroundPressed));
 const ButtonText = /*#__PURE__*/styled(Label).withConfig({
   displayName: "button__ButtonText",
   componentId: "v4884z-1"
@@ -8539,10 +8531,10 @@ const Button = props => {
   }));
 };
 
-const ValueContainer = /*#__PURE__*/styled.div.withConfig({
+const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "value__ValueContainer",
   componentId: "sc-1aps7dx-0"
-})(["display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:1;pointer-events:", ";padding:", " ", " ", " ", ";background:", ";cursor:default;border:1px solid ", ";z-index:0;box-sizing:border-box;max-width:100%;border-radius:6px;outline-offset:-2px;", " ", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.xs, Padding.xs, Padding.s, Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.hasLabel) && css(["& div:first-of-type{align-self:flex-start;}"]), props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
+})(["pointer-events:", ";padding:", " ", ";background:", ";cursor:default;border:1px solid ", ";z-index:0;border-radius:6px;outline-offset:-2px;", " ", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.none, props => is(props.invalid) ? Surface.Critical.Subdued : Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.hasLabel) && css(["& div:first-of-type{align-self:flex-start;}"]), props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
 
     &:focus  {
       outline: 2px solid ${Focused.Default}
@@ -8552,39 +8544,50 @@ const ValueContainer = /*#__PURE__*/styled.div.withConfig({
       outline: 2px solid ${Focused.Default}
     }
   `);
+const ValueWrapper$1 = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "value__ValueWrapper",
+  componentId: "sc-1aps7dx-1"
+})(["width:100%;display:", ";"], ({
+  label,
+  labelPosition
+}) => isDefined(label) && !isEmpty(label) && labelPosition === "top"
+/* labelPositionType.TOP */
+? 'block' : 'flex');
 const ValueLabel = /*#__PURE__*/styled(Label).withConfig({
   displayName: "value__ValueLabel",
-  componentId: "sc-1aps7dx-1"
-})(["margin-right:", ";", ""], Margin.xs, ({
+  componentId: "sc-1aps7dx-2"
+})(["padding-left:", ";width:fit-content;white-space:pre;", ""], Padding.xs, ({
   labelPosition
-}) => labelPosition !== 'side' && css(["flex-basis:100%;}"]));
-const ValueLeft = /*#__PURE__*/styled.div.withConfig({
+}) => labelPosition === "top"
+/* labelPositionType.TOP */
+&& css(["flex-basis:100%;"]));
+const ValueLeft = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "value__ValueLeft",
-  componentId: "sc-1aps7dx-2"
-})(["display:flex;flex:1;align-items:center;flex-wrap:", ";user-select:none;min-width:0;min-height:20px;box-sizing:border-box;gap:", ";"], props => is(props.multi) && is(props.hasValue) ? 'wrap' : 'nowrap', props => is(props.multi) ? '4px' : 0);
-const ValueRight = /*#__PURE__*/styled.div.withConfig({
-  displayName: "value__ValueRight",
   componentId: "sc-1aps7dx-3"
-})(["display:flex;position:absolute;right:8px;align-items:center;margin-left:", ";box-sizing:border-box;"], Margin.xxs);
+})(["padding-left:", ";width:100%;flex-wrap:", ";user-select:none;min-width:0;min-height:20px;box-sizing:border-box;gap:", ";"], Padding.xs, props => is(props.multi) && is(props.hasValue) ? 'wrap' : 'nowrap', props => is(props.multi) ? '4px' : 0);
+const ValueRight = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "value__ValueRight",
+  componentId: "sc-1aps7dx-4"
+})(["padding-right:", ";pointer-events:none;"], Padding.xxs);
 const Placeholder = /*#__PURE__*/styled(Label).withConfig({
   displayName: "value__Placeholder",
-  componentId: "sc-1aps7dx-4"
-})(["pointer-events:none;color:", ";"], Text$1.Default);
+  componentId: "sc-1aps7dx-5"
+})(["pointer-events:none;color:", ";"], Text$1.Light);
 const ClearButton = /*#__PURE__*/styled(Button).attrs({
   plain: true,
   subtle: true
 }).withConfig({
   displayName: "value__ClearButton",
-  componentId: "sc-1aps7dx-5"
+  componentId: "sc-1aps7dx-6"
 })(["padding:", ";margin-right:", ";gap:0;&:focus{outline:none;}&:active{background-color:transparent;}"], Padding.none, Margin.none);
 const Search = /*#__PURE__*/styled.span.withConfig({
   displayName: "value__Search",
-  componentId: "sc-1aps7dx-6"
+  componentId: "sc-1aps7dx-7"
 })(["min-width:1px;margin-left:-1px;user-select:text;", " &:focus{outline:none;}"], props => is(props.canSearch) ? css(["opacity:1;position:relative;left:1px;"]) : css(["position:absolute;opacity:0;"]));
 const ErrorMessage = /*#__PURE__*/styled.div.withConfig({
   displayName: "value__ErrorMessage",
-  componentId: "sc-1aps7dx-7"
-})(["display:", ";flex-direction:'row';margin-bottom:", ";width:100%;& path{fill:", ";}"], props => is(props.visible) ? 'flex' : 'none', Margin.xxs, Icons.Warning);
+  componentId: "sc-1aps7dx-8"
+})(["display:", ";flex-direction:'row';width:100%;padding:", " ", ";& path{fill:", ";}div{color:", ";margin:", " ", "}"], props => is(props.visible) ? 'flex' : 'none', Padding.xxs, Padding.none, Icons.Critical, Text$1.Critical, Margin.none, Margin.xxs);
 
 const Value = props => {
   const search = /*#__PURE__*/createRef();
@@ -8605,7 +8608,9 @@ const Value = props => {
     errors,
     label,
     searchable,
-    labelPosition
+    labelPosition = "top"
+    /* labelPositionType.TOP */
+
   } = props;
   const valueOptions = getValueOptions(options, value, multi);
   const showClearer = is(clearable) && valueOptions.length > 0;
@@ -8656,7 +8661,7 @@ const Value = props => {
 
     if (valueOptions.length === 0 && isNil(search === null || search === void 0 ? void 0 : search.current)) {
       return jsx(Placeholder, {
-        children: placeholder
+        children: defaultTo(placeholder, DEFAULT_PLACEHOLDER)
       });
     }
 
@@ -8716,16 +8721,24 @@ const Value = props => {
       multi: true,
       menuIsOpen: open,
       tabIndex: 0,
-      onClick: onClick
+      onClick: onClick,
+      center: true
     }, {
-      children: [renderLabel(), jsxs(ValueLeft, Object.assign({
-        className: "value-left",
-        multi: multi,
-        hasValue: !(valueOptions.length === 0)
+      children: [jsxs(ValueWrapper$1, Object.assign({
+        label: label,
+        labelPosition: labelPosition
       }, {
-        children: [searchAtStart && renderSearch(), renderValues(), searchAtEnd && renderSearch()]
+        children: [renderLabel(), jsxs(ValueLeft, Object.assign({
+          className: "value-left",
+          multi: multi,
+          showClearer: showClearer,
+          hasValue: !(valueOptions.length === 0)
+        }, {
+          children: [searchAtStart && renderSearch(), renderValues(), searchAtEnd && renderSearch()]
+        }))]
       })), jsxs(ValueRight, Object.assign({
-        className: "value-right"
+        className: "value-right",
+        center: true
       }, {
         children: [showClearer && jsx(ClearButton, {
           tabIndex: -1,
@@ -8746,14 +8759,38 @@ const Value = props => {
 
 var Value$1 = /*#__PURE__*/memo(Value);
 
-const Container$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "select__Container",
-  componentId: "iypjy6-0"
-})(["position:relative;cursor:default;width:100%;box-sizing:border-box;pointer-events:", ";opacity:", ";user-select:none;"], props => is(props.disabled) ? 'none' : 'auto', props => is(props.disabled) ? 0.75 : 1);
-const SelectImpl = (props, ref) => {
-  if (isNil(ref)) {
+/**
+ * @TODO Use this container and remove the ContainerStyles
+ * when we have a solution for  RWC styled components, or move away from it.
+ */
+
+/*const Container = styled.div`
+  position: relative;
+  cursor: default;
+  width: 100%;
+  box-sizing: border-box;
+  pointer-events: ${(props: { disabled?: boolean }) =>
+    is(props.disabled) ? 'none' : 'auto'};
+  opacity: ${(props: { disabled?: boolean }) => (is(props.disabled) ? 0.75 : 1)};
+  user-select: none;
+`*/
+
+const ContainerStyles = ({
+  disabled
+}) => ({
+  position: 'relative',
+  cursor: 'default',
+  width: '100%',
+  boxSizing: 'border-box',
+  pointerEvents: is(disabled) ? 'none' : 'auto',
+  opacity: is(disabled) ? 0.75 : 1,
+  userSelect: 'none'
+});
+
+const SelectImpl = (props, selectRef) => {
+  if (isNil(selectRef)) {
     // eslint-disable-next-line no-null/no-null, react-hooks/rules-of-hooks
-    ref = useRef(null);
+    selectRef = useRef(null);
   }
 
   const [open, setOpen] = useState(false);
@@ -8774,6 +8811,7 @@ const SelectImpl = (props, ref) => {
     emptyText,
     rowHeight,
     menuHeight,
+    menuTitle,
     menuPosition,
     label,
     labelPosition
@@ -8788,18 +8826,16 @@ const SelectImpl = (props, ref) => {
       return;
     }
 
-    if (isDefined(ref) && typeof ref === 'object' && 'current' in ref) {
+    if (isDefined(selectRef) && typeof selectRef === 'object') {
       const {
         current
-      } = ref;
+      } = selectRef;
 
-      if (isDefined(current) && 'contains' in current && current.contains(target)) {
-        return;
+      if (isDefined(current) && !current.contains(target)) {
+        closeMenu(props.value);
       }
-
-      closeMenu(props.value);
     }
-  }, []);
+  }, [props.value]);
 
   function getOptions() {
     if (isDefined(search)) {
@@ -8977,10 +9013,21 @@ const SelectImpl = (props, ref) => {
   }
 
   const classNames = ['select', className, open && 'open', is(invalid) && 'has-error'].filter(c => Boolean(c));
-  return jsxs(Container$1, Object.assign({
+  /**
+  * @TODO this is a hack to be able to use the ref in react-web-client
+  * RWC uses styled-components < v4 and expects the ref to be passes as
+  * "innerRef" not just "ref", but product-language uses > v4 and wants
+  * to use ref. So for some components that need a ref, like this one
+  * we will have to use a div and style it the old fashioned way until
+  * we upgrade rwc's styled-components or drop rwc
+  */
+
+  return jsxs("div", Object.assign({
+    style: ContainerStyles({
+      disabled
+    }),
+    ref: selectRef,
     className: classNames.join(' '),
-    disabled: disabled,
-    ref: ref,
     onKeyUp: onKeyUp,
     onKeyDown: onKeyDown
   }, {
@@ -9020,14 +9067,102 @@ const SelectImpl = (props, ref) => {
       menuComponent: menuComponent,
       emptyText: emptyText,
       rowHeight: rowHeight,
+      menuTitle: menuTitle,
       menuHeight: menuHeight,
       menuPosition: menuPosition,
       onSelect: onOptionSelect
     })]
   }));
 };
+
 const Select = forwardRef(SelectImpl);
 
+const MenuListFrame = /*#__PURE__*/styled.div.withConfig({
+  displayName: "menu-list__MenuListFrame",
+  componentId: "sxh4rn-0"
+})(["border:1px solid ", ";background-color:", ";position:absolute;width:100%;width:-moz-available;width:-webkit-fill-available;max-height:184px;overflow-y:auto;overflow-x:hidden;::-webkit-scrollbar{width:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}", ";"], Borders.Default.Subdued, Surface.Default.Default, Surface.Neutral.Default, shadowMd);
+const MenuRow = /*#__PURE__*/styled(SpaceBetween).withConfig({
+  displayName: "menu-list__MenuRow",
+  componentId: "sxh4rn-1"
+})(["  border:none;text-align:left;padding:", ";margin:", " ", ";background-color:", ";border-radius:6px;i:first-child{align-self:start;margin-right:", ";}i:last-child{align-self:center;}&:first-of-type{margin-top:", ";}&:last-of-type{margin-bottom:", ";}&:hover{background-color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}"], Padding.s, Margin.none, Margin.xxs, props => is(props.active) ? Surface.Selected.Default : Surface.Default.Default, Margin.xs, Margin.xxs, Margin.xxs, Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Hover : Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed);
+const OptionLabel = /*#__PURE__*/styled(Label).withConfig({
+  displayName: "menu-list__OptionLabel",
+  componentId: "sxh4rn-2"
+})(["cursor:pointer;"]);
+const CheckedIcon = /*#__PURE__*/styled(IconMinor.Check).withConfig({
+  displayName: "menu-list__CheckedIcon",
+  componentId: "sxh4rn-3"
+})(["svg{path{fill:", "}}"], Icons.Highlight);
+const ValueWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "menu-list__ValueWrapper",
+  componentId: "sxh4rn-4"
+})(["width:100%;"]);
+const TitleRow = /*#__PURE__*/styled(Heading4).withConfig({
+  displayName: "menu-list__TitleRow",
+  componentId: "sxh4rn-5"
+})(["height:30px;margin:", " ", ";border-bottom:1px solid ", ";padding:", " ", " ", " ", ";"], Margin.none, Margin.xxs, Borders.Default.Subdued, Padding.s, Padding.none, Padding.none, Padding.s);
+
+const Row = props => {
+  const {
+    index,
+    options = [],
+    handleClick
+  } = props;
+  const hasIcon = safeArray(options).some(option => isDefined(option['icon']));
+  const currentValue = Array.isArray(props.value) && is(props.multi) ? props.value : [props.value];
+  const option = options[index];
+  return jsxs(MenuRow, Object.assign({
+    className: "row",
+    center: true,
+    active: currentValue.some(val => equal(val, option.value)),
+    onClick: () => handleClick(option)
+  }, {
+    children: [maybeRender(hasIcon, option['icon']), jsxs(ValueWrapper, {
+      children: [jsx(OptionLabel, Object.assign({
+        hasIcon: hasIcon
+      }, {
+        children: option.label
+      })), maybeRender(option['helperText'], jsx(OptionLabel, Object.assign({
+        subdued: true,
+        hasIcon: hasIcon
+      }, {
+        children: option['helperText']
+      })))]
+    }), maybeRender(currentValue.some(val => equal(val, option.value)), jsx(CheckedIcon, {}))]
+  }));
+};
+
+const MenuList = props => {
+  // eslint-disable-next-line no-null/no-null
+  const list = useRef(null); // const { open, selectedIndex, rowHeight } = props
+
+  const handleClick = option => {
+    const newValue = Array.isArray(props.value) && is(props.multi) ? [...props.value, option.value] : option.value;
+    props.onSelect(newValue);
+  };
+  /**
+  * @TODO
+  * This doesnt work with the styled components that RWC uses, so I'll leave comented for now
+  *useEffect(() => {
+  *  if(is(open) && isDefined(list.current) && isDefined(selectedIndex)) {
+  *    list.current.scrollTo(0, selectedIndex * (defaultTo(rowHeight, DEFAULT_ROW_HEIGHT)+4))
+  *  }
+  *}, [open, list, selectedIndex, rowHeight])
+  */
+
+
+  return jsxs(MenuListFrame, Object.assign({
+    ref: list
+  }, {
+    children: [maybeRender(props.menuTitle, jsx(TitleRow, {
+      children: props.menuTitle
+    })), safeArray(props.options).map((_, index) => jsx(Row, Object.assign({
+      index: index,
+      handleClick: handleClick
+    }, props), index))]
+  }));
+};
+
 var apply = functionApply;
 var call = functionCall;
 var uncurryThis = functionUncurryThis;
@@ -9373,4 +9508,4 @@ const MultiChoiceList = props => {
   }));
 };
 
-export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, Center, Checkbox, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label, LeftRightCard, Link, Margin, MultiChoiceList, Padding, Select, SelectImpl, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };
+export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, Center, Checkbox, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label, LeftRightCard, Link, Margin, MenuList, MultiChoiceList, Padding, Select, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };

package/lib/components/select/components/menu-list.d.ts

@@ -0,0 +1,3 @@
+import { FC } from '@helpers';
+import { IMenuComponentProps } from '../types';
+export declare const MenuList: FC<IMenuComponentProps>;

package/lib/components/select/components/option.d.ts

@@ -5,6 +5,9 @@ interface IOptionItemProps {
     selected?: IOptionComponentProps['selected'];
     height?: IOptionComponentProps['height'];
 }
-export declare const OptionItem: import("styled-components").StyledComponent<"div", any, IOptionItemProps, never>;
+export declare const OptionItem: import("styled-components").StyledComponent<"div", any, {
+    column?: boolean | undefined;
+    center?: boolean | undefined;
+} & IOptionItemProps, never>;
 export declare const OptionComponent: import("react").MemoExoticComponent<(props: IOptionComponentProps) => JSX.Element>;
 export {};

package/lib/components/select/index.d.ts

@@ -1 +1,2 @@
 export * from './select';
+export * from './components/menu-list';

package/lib/components/select/select.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { PropsWithChildren } from '@helpers';
 import { ISelectProps } from './types';
-export declare const SelectImpl: <T>(props: ISelectProps<T>, ref: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
+declare const SelectImpl: <T>(props: ISelectProps<T>, selectRef: React.ForwardedRef<HTMLDivElement>) => JSX.Element;
 export declare const Select: <T>(props: ISelectProps<T> & {
     children?: import("react").ReactNode;
 } & {
     ref?: import("react").ForwardedRef<HTMLDivElement> | undefined;
 }) => ReturnType<typeof SelectImpl>;
+export {};

package/lib/components/select/types.d.ts

@@ -17,6 +17,7 @@ export interface ISelectProps<T = any> {
     rowHeight?: number;
     menuHeight?: number;
     menuPosition?: 'top' | 'bottom';
+    menuTitle?: string;
     label?: string;
     labelPosition?: 'top' | 'side';
     labelComponent?: FC<LabelComponentProps<T>>;
@@ -62,12 +63,6 @@ export interface IMenuContainerProps {
     onClick?(el: React.MouseEvent<HTMLDivElement>): void;
 }
 declare type RectSize = number | 'auto';
-export interface IRect {
-    left: number;
-    top: number;
-    width: RectSize;
-    height: RectSize;
-}
 export interface IValueComponentMultiProps<T = any> extends IValueComponentSingleProps<T> {
     options: IOption<T>[];
     onRemove(value: T): void;
@@ -113,6 +108,7 @@ export interface IMenuComponentProps<T = any> {
     search?: string;
     labelPosition?: string;
     label?: string;
+    menuTitle?: string;
     onSelect(value: T extends any[] ? T[] : T, option?: T): void;
 }
 export interface IPosition {
@@ -121,4 +117,16 @@ export interface IPosition {
     label?: string;
     labelPosition?: string;
 }
+export declare const DEFAULT_ROW_HEIGHT = 44;
+export declare const DEFAULT_MENU_HEIGHT = 190;
+export declare const DEFAULT_EMPTY_TEXT = "No results found";
+export declare const DEFAULT_PLACEHOLDER = "Select Something";
+export declare const enum menuPositionType {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export declare const enum labelPositionType {
+    TOP = "top",
+    SIDE = "side"
+}
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edvisor/product-language",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "license": "MIT",
   "description": "Edvisor.io product-language components",
   "repository": "https://github.com/edvisor-io/front-end/",