@fibery/ui-kit 1.25.1 → 1.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.25.1",
+  "version": "1.26.1",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -68,7 +68,7 @@
     "react-virtuoso": "4.6.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/emoji-data": "2.3.0",
+    "@fibery/emoji-data": "2.4.0",
     "@fibery/react": "1.3.0",
     "@fibery/helpers": "1.2.0"
   },
@@ -77,8 +77,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.20.5",
-    "@babel/runtime": "7.20.6",
+    "@babel/core": "7.23.9",
+    "@babel/runtime": "7.23.9",
     "@linaria/babel-preset": "5.0.3",
     "@testing-library/dom": "8.19.1",
     "@testing-library/jest-dom": "5.16.5",
@@ -103,8 +103,8 @@
     "svgo": "2.8.0",
     "typescript": "5.1.6",
     "unist-util-reduce": "0.2.2",
-    "@fibery/eslint-config": "8.5.0",
-    "@fibery/babel-preset": "7.3.0"
+    "@fibery/babel-preset": "7.4.0",
+    "@fibery/eslint-config": "8.5.1"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/icons/ast/AppDetails.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const AppDetails: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M11.75 2a.75.75 0 0 1 .75.75v1h4.75a.75.75 0 0 1 0 1.5H12.5v1a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75ZM2 4.5a.75.75 0 0 1 .75-.75H8.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.5Zm4.75 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-1H2.75a.75.75 0 0 1 0-1.5H6v-1a.75.75 0 0 1 .75-.75Zm2.5 2.5a.75.75 0 0 1 .75-.75h7.25a.75.75 0 0 1 0 1.5H10a.75.75 0 0 1-.75-.75Zm4 3a.75.75 0 0 1 .75.75v1l3.25-.003a.75.75 0 1 1 0 1.5l-3.25.002v1.001a.75.75 0 0 1-1.5 0v-3.5a.75.75 0 0 1 .75-.75ZM2 15.497a.75.75 0 0 1 .75-.75H10a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"app-details"};
+const AppDetails: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M11.5 3.75c-1.12 0-2.067.736-2.386 1.75H2.75a.75.75 0 0 0 0 1.5h6.364A2.501 2.501 0 1 0 11.5 3.75Zm-.864 2.5a.864.864 0 1 0 1.728 0 .864.864 0 0 0-1.728 0Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M15.5 6.25a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2 13.75a.75.75 0 0 1 .75-.75h1.364a2.501 2.501 0 1 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Zm4.5.864a.864.864 0 1 1 0-1.728.864.864 0 0 1 0 1.728Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M10.5 13.75a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"app-details"};
 
 export default AppDetails;

package/src/icons/ast/ArrowForward.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ArrowForward: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10.461 16.018a.75.75 0 0 1 .024-1.06l4.146-3.96H4a.75.75 0 0 1 0-1.5h10.63l-4.145-3.955a.75.75 0 1 1 1.036-1.086l5.498 5.249a.75.75 0 0 1 0 1.085l-5.498 5.251a.75.75 0 0 1-1.06-.024Z"},"children":[]}],"metadata":""}]},"name":"arrow-forward"};
+
+export default ArrowForward;

package/src/icons/ast/Highlights.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Highlights: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5.25 2.75A.75.75 0 0 1 6 2h4a.75.75 0 0 1 0 1.5H8.75v13H10a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1 0-1.5h1.25v-13H6a.75.75 0 0 1-.75-.75ZM3.75 6.5a.25.25 0 0 0-.25.25v6.5c0 .138.112.25.25.25H5A.75.75 0 0 1 5 15H3.75A1.75 1.75 0 0 1 2 13.25v-6.5C2 5.784 2.784 5 3.75 5H5a.75.75 0 0 1 0 1.5H3.75Zm6.5-.75A.75.75 0 0 1 11 5h5.25c.966 0 1.75.784 1.75 1.75v6.5A1.75 1.75 0 0 1 16.25 15H11a.75.75 0 0 1 0-1.5h5.25a.25.25 0 0 0 .25-.25v-6.5a.25.25 0 0 0-.25-.25H11a.75.75 0 0 1-.75-.75Zm.5 4.25a.75.75 0 0 1 .75-.75H14a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"highlights"};
+
+export default Highlights;

package/src/icons/ast/index.tsx

@@ -26,6 +26,7 @@ export { default as ArrowBarRight } from './ArrowBarRight';
 export { default as ArrowBottom } from './ArrowBottom';
 export { default as ArrowCollapseVertical } from './ArrowCollapseVertical';
 export { default as ArrowCollapse } from './ArrowCollapse';
+export { default as ArrowForward } from './ArrowForward';
 export { default as ArrowLeft } from './ArrowLeft';
 export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTop } from './ArrowTop';
@@ -102,6 +103,7 @@ export { default as GoogleMap } from './GoogleMap';
 export { default as HeadphonesAi } from './HeadphonesAi';
 export { default as Headphones } from './Headphones';
 export { default as Hide } from './Hide';
+export { default as Highlights } from './Highlights';
 export { default as Hint } from './Hint';
 export { default as Home } from './Home';
 export { default as ImageXmark } from './ImageXmark';

package/src/icons/react/ArrowForward.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import ArrowForwardSvg from '../ast/ArrowForward';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ArrowForward = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={ArrowForwardSvg} />;
+
+ArrowForward.displayName = 'ArrowForward';
+export default ArrowForward;

package/src/icons/react/Highlights.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import HighlightsSvg from '../ast/Highlights';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Highlights = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={HighlightsSvg} />;
+
+Highlights.displayName = 'Highlights';
+export default Highlights;

package/src/icons/react/index.tsx

@@ -26,6 +26,7 @@ export { default as ArrowBarRight } from './ArrowBarRight';
 export { default as ArrowBottom } from './ArrowBottom';
 export { default as ArrowCollapseVertical } from './ArrowCollapseVertical';
 export { default as ArrowCollapse } from './ArrowCollapse';
+export { default as ArrowForward } from './ArrowForward';
 export { default as ArrowLeft } from './ArrowLeft';
 export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTop } from './ArrowTop';
@@ -102,6 +103,7 @@ export { default as GoogleMap } from './GoogleMap';
 export { default as HeadphonesAi } from './HeadphonesAi';
 export { default as Headphones } from './Headphones';
 export { default as Hide } from './Hide';
+export { default as Highlights } from './Highlights';
 export { default as Hint } from './Hint';
 export { default as Home } from './Home';
 export { default as ImageXmark } from './ImageXmark';

package/src/lists/list-row-surface.tsx

@@ -30,7 +30,7 @@ export const listRowSurfaceStylesBase = css`
   max-width: 100%;
   flex-basis: 100%;
   display: flex;
-  cursor: default;
+  cursor: pointer;
   align-items: center;
   align-content: center;
   padding: 0 ${space.s4}px;
@@ -39,7 +39,6 @@ export const listRowSurfaceStylesBase = css`
   color: ${themeVars.textColor};
   border-radius: ${border.radius6}px;
   transition: background-color;
-
   &:focus {
     outline: none;
   }

package/src/select/custom-select-partials/menu-list-virtualized.tsx

@@ -1,6 +1,6 @@
 import {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
 import {ItemContent, Virtuoso, VirtuosoHandle} from "react-virtuoso";
-import {Children, ComponentType, ReactNode, useContext, useEffect, useRef, useState} from "react";
+import {Children, ComponentType, CSSProperties, ReactNode, useContext, useEffect, useRef, useState} from "react";
 import {GroupBase, ReactSelectRefContext} from "../util";
 import {layout} from "../../../src/design-system";
 import _, {isFunction, isObject} from "lodash";
@@ -54,19 +54,12 @@ export function MenuListVirtualized<
   Option,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<Option> = GroupBase<Option>
->({
-  children,
-  focusedOption,
-  innerRef,
-  maxHeight,
-  theme,
-  getStyles,
-  cx,
-  selectProps,
-}: MenuListProps<Option, IsMulti, Group>) {
+>(props: MenuListProps<Option, IsMulti, Group>) {
+  const {children, focusedOption, innerRef, maxHeight, theme, getStyles, cx, selectProps} = props;
   const virtuoso = useRef<VirtuosoHandle>(null);
-  // options props come non-filtered and we have insufficient info (props) to render groups and options from here.
-  // Also you never know what contents also possible as list content.
+
+  // options props come non-filtered, and we have insufficient info (props) to render groups and options from here.
+  // Also, you never know what contents also possible as list content.
   // that's why it is better working with children and find options and groups among them (hope internal API does not change)
   // The best strategy to scroll to index and to evade height calculations is to
   // deconstruct group into it's header and children (options) and render then side by side without group-wrapping div
@@ -98,41 +91,43 @@ export function MenuListVirtualized<
   //to define initially focused option react select uses whole Option object reference equality which is not always the case
   //if select value is not exactly same object as option, we end up having initially focusedOption being just first option.
   //fix below ensures that initial focusedOption is always selectedOption in cost of one more rerender
-  if (select.current && flattenChildren.length && !initialFocusedOption) {
-    let firstExistingOption: unknown;
-    let selectedOption: unknown;
-    //if an options exists, but there is no focused option, looking for first selected / existing option
-    for (let i = 0; i < flattenChildren.length; i++) {
-      const child = flattenChildren[i];
-      if (
-        isObject(child) &&
-        "props" in child &&
-        isObject(child.props) &&
-        "type" in child.props &&
-        child.props.type === "option" &&
-        "isSelected" in child.props
-      ) {
-        //well it is an option, check if it has data (just for ts and be sure)
-        if ("data" in child.props && isObject(child.props.data)) {
-          if ("isSelected" in child.props && child.props.isSelected) {
-            //setting selected option data as focused option, wrapping up
-            selectedOption = child.props.data;
-            break;
-          }
-          if (!firstExistingOption) {
-            firstExistingOption = child.props.data;
+  useEffect(() => {
+    if (select.current && flattenChildren.length && !initialFocusedOption) {
+      let firstExistingOption: unknown;
+      let selectedOption: unknown;
+      //if an options exists, but there is no focused option, looking for first selected / existing option
+      for (let i = 0; i < flattenChildren.length; i++) {
+        const child = flattenChildren[i];
+        if (
+          isObject(child) &&
+          "props" in child &&
+          isObject(child.props) &&
+          "type" in child.props &&
+          child.props.type === "option" &&
+          "isSelected" in child.props
+        ) {
+          //well it is an option, check if it has data (just for ts and be sure)
+          if ("data" in child.props && isObject(child.props.data)) {
+            if ("isSelected" in child.props && child.props.isSelected) {
+              //setting selected option data as focused option, wrapping up
+              selectedOption = child.props.data;
+              break;
+            }
+            if (!firstExistingOption) {
+              firstExistingOption = child.props.data;
+            }
           }
         }
       }
+      if (selectedOption) {
+        setInitialFocusedOption(selectedOption as Option);
+        select.current.setState({focusedOption: selectedOption});
+      } else if (firstExistingOption) {
+        setInitialFocusedOption(firstExistingOption as Option);
+        select.current.setState({focusedOption: firstExistingOption});
+      }
     }
-    if (selectedOption) {
-      setInitialFocusedOption(selectedOption as Option);
-      select.current.setState({focusedOption: selectedOption});
-    } else if (firstExistingOption) {
-      setInitialFocusedOption(firstExistingOption as Option);
-      select.current.setState({focusedOption: firstExistingOption});
-    }
-  }
+  }, [flattenChildren, initialFocusedOption, select]);
   const menuHeight = Math.min(flattenChildren.length * layout.menuItemHeight, maxHeight);
   //scrolling to focused option
   useEffect(() => {
@@ -178,7 +173,7 @@ export function MenuListVirtualized<
   }, [focusedOption, flattenChildren, menuHeight, initialFocusedOption, virtuoso]);
   return (
     // Needed for correct display inside portals and etc.
-    <div>
+    <div style={getStyles("menuList", props) as CSSProperties}>
       <Virtuoso
         ref={virtuoso}
         // in reality only HTMLDiveElement | null will appear here. We do not use Virtuoso's useWindowScroll prop

package/src/select/custom-select-partials/no-option-message.tsx

@@ -1,26 +1,37 @@
-import React, {ReactNode} from "react";
+import React, {CSSProperties} from "react";
 import {ListRowContent} from "../../lists/list-row-surface";
 import {css} from "@linaria/core";
-import {space, layout, textStyles} from "../../design-system";
+import {space, textStyles} from "../../design-system";
+import {NoticeProps} from "react-select";
+import {GroupBase} from "../util";
 
 const noOptionMessageClass = css`
   padding: 0 ${space.s6}px;
   cursor: default;
   user-select: none;
+  max-width: 100%;
 `;
 const noOptionMessageContentClass = css`
-  padding: 0 ${space.s6}px;
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: normal;
+  max-width: 100%;
   ${{...textStyles.regular}}
-  line-height: ${layout.menuItemHeight}px;
+  padding: ${space.s4}px ${space.s6}px;
 `;
 
-export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
+export const NoOptionsMessage = <Option, isMulty extends boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: NoticeProps<Option, isMulty, Group>
+) => {
+  const {children, getStyles} = props;
   return (
     <div className={noOptionMessageClass}>
-      <ListRowContent contentClassName={noOptionMessageContentClass}>{children}</ListRowContent>
+      <ListRowContent
+        contentClassName={noOptionMessageContentClass}
+        style={getStyles("noOptionsMessage", props) as CSSProperties}
+      >
+        {children}
+      </ListRowContent>
     </div>
   );
 };

package/src/select/select-in-popover.tsx

@@ -115,6 +115,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   value?: PropsValue<Option>;
   menuIsOpen?: boolean;
   autoFocus?: boolean;
+  virtualized?: boolean;
   defaultMenuIsOpen?: boolean;
   placeholder?: string;
   noOptionsMessage: () => string | JSX.Element | null;
@@ -147,6 +148,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
 ) {
   const {
     value,
+    virtualized,
     menuIsOpen = false,
     autoFocus,
     defaultMenuIsOpen,
@@ -321,6 +323,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               filterOption={filterOption}
               inputValue={inputValue}
               menuIsOpen
+              virtualized={virtualized}
               maxMenuHeight={maxMenuHeight}
               disabled={disabled}
               onFocus={onFocus}

package/src/select/styles.ts

@@ -63,6 +63,12 @@ export const zIndexStyles = (zIndex: number): StylesConfig => ({
 
 export const componentsStyles: StylesConfig = {
   option: () => OptionNulledStyles,
+  noOptionsMessage: (provided) => ({
+    ...provided,
+    paddingLeft: "",
+    paddingTop: "",
+    paddingBottom: "",
+  }),
   placeholder: (provided) => ({
     ...provided,
     color: themeVars.disabledTextColor,