@edvisor/product-language 0.10.0 → 0.10.3

package/index.js

@@ -8548,50 +8548,10 @@ const topPosition = props => {
   return '4px';
 };
 
-const OptionItem = /*#__PURE__*/styled(SpaceBetween).withConfig({
-  displayName: "option__OptionItem",
-  componentId: "sc-1hb1qjt-0"
-})(["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);
-const OptionComponent = /*#__PURE__*/memo(props => {
-  const onClick = () => {
-    props.onSelect(props.option.value, props.option);
-  };
-
-  const {
-    active,
-    selected,
-    labelComponent,
-    option,
-    height
-  } = props;
-  const SelectLabel = isDefined(labelComponent) ? labelComponent : Label$1;
-  const className = ['option', props.className, is(selected) ? 'selected' : '', is(active) ? 'active' : ''].filter(v => Boolean(v));
-  return jsxs(OptionItem, Object.assign({
-    className: className.join(' '),
-    "data-role": "option",
-    center: true,
-    selected: selected,
-    active: active,
-    height: height,
-    onClick: onClick
-  }, {
-    children: [jsx(SelectLabel, Object.assign({
-      type: "option",
-      active: active
-    }, option, {
-      children: option.label
-    })), 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;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"
+})(["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:10px;height:0;}::-webkit-scrollbar-thumb{min-height:50px;border:2px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:1em;background-color:", ";}::-webkit-scrollbar-corner{background-color:transparent;}}"], Surface.Default.Default, props => topPosition(props), props => 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 => {
@@ -8655,6 +8615,55 @@ fixRegExpWellKnownSymbolLogic('search', function (SEARCH, nativeSearch, maybeCal
   ];
 });
 
+const OptionItem = /*#__PURE__*/styled(SpaceBetween).withConfig({
+  displayName: "helpers__OptionItem",
+  componentId: "sc-15t2iwx-0"
+})(["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 EmptyOptionItem = /*#__PURE__*/styled(OptionItem).withConfig({
+  displayName: "helpers__EmptyOptionItem",
+  componentId: "sc-15t2iwx-1"
+})(["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
+}) => 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 CheckedIcon$1 = /*#__PURE__*/styled(IconMinor.Check).withConfig({
+  displayName: "option__CheckedIcon",
+  componentId: "sc-1hb1qjt-0"
+})(["svg{path{fill:", "}}"], Icons.Highlight);
+const OptionComponent = /*#__PURE__*/memo(props => {
+  const onClick = () => {
+    props.onSelect(props.option.value, props.option);
+  };
+
+  const {
+    active,
+    selected,
+    labelComponent,
+    option,
+    height
+  } = props;
+  const SelectLabel = isDefined(labelComponent) ? labelComponent : Label$1;
+  const className = ['option', props.className, is(selected) ? 'selected' : '', is(active) ? 'active' : ''].filter(v => Boolean(v));
+  return jsxs(OptionItem, Object.assign({
+    className: className.join(' '),
+    "data-role": "option",
+    center: true,
+    selected: selected,
+    active: active,
+    height: height,
+    onClick: onClick
+  }, {
+    children: [jsx(SelectLabel, Object.assign({
+      type: "option",
+      active: active
+    }, option, {
+      children: option.label
+    })), is(active) && jsx(CheckedIcon$1, {})]
+  }));
+}, areEqual);
+
 const MenuRow$1 = /*#__PURE__*/memo(({
   index,
   style,
@@ -8691,14 +8700,6 @@ const SelectLabel = /*#__PURE__*/styled(Label$1).withConfig({
   componentId: "j60pki-0"
 })(["overflow:hidden;white-space:nowrap;text-overflow:ellipsis;user-select:none;box-sizing:border-box;"]);
 
-const EmptyOptionItem = /*#__PURE__*/styled(OptionItem).withConfig({
-  displayName: "menu__EmptyOptionItem",
-  componentId: "sc-1086ljy-0"
-})(["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
-}) => 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 = DEFAULT_ROW_HEIGHT,
@@ -8913,7 +8914,7 @@ const ValueWrapper$1 = /*#__PURE__*/styled(Flex).withConfig({
 const ValueLabel = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "value__ValueLabel",
   componentId: "sc-1aps7dx-2"
-})(["padding-left:", ";margin-bottom:", ";display:flex;align-self:", ";width:fit-content;white-space:pre;", ""], Padding.xs, ({
+})(["padding-left:", ";margin-bottom:", ";display:flex;align-self:", ";width:fit-content;white-space:pre;", ""], Padding.s, ({
   labelPosition
 }) => labelPosition === "top"
 /* labelPositionType.TOP */
@@ -8929,7 +8930,7 @@ const ValueLabel = /*#__PURE__*/styled(Label$1).withConfig({
 const ValueLeft = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "value__ValueLeft",
   componentId: "sc-1aps7dx-3"
-})(["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);
+})(["padding-left:", ";width:100%;flex-wrap:", ";user-select:none;min-width:0;min-height:20px;box-sizing:border-box;gap:", ";"], Padding.s, 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"
@@ -9458,11 +9459,11 @@ 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);
+})(["border:1px solid ", ";background-color:", ";position:absolute;height:", "px;max-height:", "px;width:100%;width:-moz-available;width:-webkit-fill-available;overflow-y:auto;overflow-x:hidden;::-webkit-scrollbar{width:10px;height:0;}::-webkit-scrollbar-thumb{min-height:50px;border:2px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:1em;background-color:", ";}::-webkit-scrollbar-corner{background-color:transparent;}", ";"], Borders.Default.Subdued, Surface.Default.Default, props => props.height, props => props.height, 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);
+})(["  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.s, 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$1).withConfig({
   displayName: "menu-list__OptionLabel",
   componentId: "sxh4rn-2"
@@ -9478,7 +9479,7 @@ const ValueWrapper = /*#__PURE__*/styled.div.withConfig({
 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);
+})(["height:44px;margin:", " ", ";border-bottom:1px solid ", ";display:flex;align-items:center;padding-left:", ";"], Margin.none, Margin.xxs, Borders.Default.Subdued, Padding.s);
 
 const Row = props => {
   const {
@@ -9511,7 +9512,15 @@ const Row = props => {
 };
 
 const MenuList = props => {
-  // eslint-disable-next-line no-null/no-null
+  const {
+    menuHeight = 184
+  } = props;
+  const options = safeArray(props.options);
+  const optionsHeight = options.reduce(function (acc, obj) {
+    return acc + (isDefined(obj['helperText']) ? 72 : 52);
+  }, 0);
+  const height = Math.min(Math.max(optionsHeight, 40), menuHeight); // eslint-disable-next-line no-null/no-null
+
   const list = useRef(null); // const { open, selectedIndex, rowHeight } = props
 
   const handleClick = option => {
@@ -9529,10 +9538,26 @@ const MenuList = props => {
   */
 
 
+  if (options.length === 0) {
+    const {
+      emptyText
+    } = props;
+    return jsx(EmptyOptionItem, Object.assign({
+      props: props
+    }, {
+      children: jsx(SelectLabel, {
+        children: jsx("span", {
+          children: defaultTo(emptyText, DEFAULT_EMPTY_TEXT)
+        })
+      })
+    }));
+  }
+
   return jsxs(MenuListFrame, Object.assign({
+    height: height,
     ref: list
   }, {
-    children: [maybeRender(props.menuTitle, jsx(TitleRow, {
+    children: [maybeRender(isDefined(props.menuTitle) && (isNil(props.search) || isEmpty(props.search)), jsx(TitleRow, {
       children: props.menuTitle
     })), safeArray(props.options).map((_, index) => jsx(Row, Object.assign({
       index: index,

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

@@ -0,0 +1,17 @@
+import { IMenuComponentProps, IOptionComponentProps } from '../types';
+interface IOptionItemProps {
+    active?: IOptionComponentProps['active'];
+    selected?: IOptionComponentProps['selected'];
+    height?: IOptionComponentProps['height'];
+}
+export declare const OptionItem: import("styled-components").StyledComponent<"div", any, {
+    column?: boolean | undefined;
+    center?: boolean | undefined;
+} & IOptionItemProps, never>;
+export declare const EmptyOptionItem: import("styled-components").StyledComponent<"div", any, {
+    column?: boolean | undefined;
+    center?: boolean | undefined;
+} & IOptionItemProps & {
+    props: IMenuComponentProps;
+}, never>;
+export {};

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

@@ -1,13 +1,3 @@
 /// <reference types="react" />
 import { IOptionComponentProps } from '../types';
-interface IOptionItemProps {
-    active?: IOptionComponentProps['active'];
-    selected?: IOptionComponentProps['selected'];
-    height?: IOptionComponentProps['height'];
-}
-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/package.json

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