@fibery/ui-kit 4.0.0 → 4.2.0

package/src/select/components/menu-list-virtualized.tsx

@@ -1,6 +1,4 @@
-import compact from "lodash/compact";
-import isFunction from "lodash/isFunction";
-import isObject from "lodash/isObject";
+import {isRecord, truthy} from "@fibery/helpers/src/_";
 import type {ComponentType, CSSProperties, ReactNode} from "react";
 import {Children, useContext, useEffect, useMemo, useRef, useState} from "react";
 import type {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
@@ -20,12 +18,12 @@ function isGroupChild<Option, isMulty extends boolean, Group extends GroupBase<O
   props: unknown
 ): props is GroupProps<Option, isMulty, Group> {
   return (
-    isObject(props) &&
+    isRecord(props) &&
     "options" in props &&
     "Heading" in props &&
-    isFunction(props.Heading) &&
+    typeof props.Heading === "function" &&
     "headingProps" in props &&
-    isObject(props.headingProps)
+    isRecord(props.headingProps)
   );
 }
 
@@ -33,27 +31,26 @@ const flattenGroupChildren: (
   children: ReactNode,
   renderGroup: (Component: ComponentType<GroupHeadingProps>, props: GroupProps["headingProps"]) => ReactNode
 ) => ReactNode[] = (children, renderGroup) => {
-  return compact(
-    Children.toArray(children)
-      .map((child) => {
-        if (isObject(child) && "props" in child && isObject(child.props)) {
-          const {props} = child;
-          if (isGroupChild(props)) {
-            //well, it's a group
-            const children = compact(Children.toArray(props.children));
-            if (!children.length) {
-              // do not render empty groups
-              return [];
-            }
-            const heading = renderGroup(props.Heading, props.headingProps);
-            return [heading, ...children];
+  return Children.toArray(children)
+    .map((child) => {
+      if (isRecord(child) && "props" in child && isRecord(child.props)) {
+        const {props} = child;
+        if (isGroupChild(props)) {
+          //well, it's a group
+          const children = Children.toArray(props.children).filter(truthy);
+          if (!children.length) {
+            // do not render empty groups
+            return [];
           }
+          const heading = renderGroup(props.Heading, props.headingProps);
+          return [heading, ...children];
         }
-        //if not a group, just keep child as is
-        return child;
-      })
-      .flat()
-  );
+      }
+      //if not a group, just keep child as is
+      return child;
+    })
+    .flat()
+    .filter(truthy);
 };
 
 const drawListElement: ItemContent<ReactNode, never> = (index, child) => child;
@@ -111,7 +108,7 @@ export function MenuListVirtualized<
       return -1;
     }
     return flattenChildren.findIndex((child) => {
-      if (isObject(child) && "props" in child && isObject(child.props) && "data" in child.props) {
+      if (isRecord(child) && "props" in child && isRecord(child.props) && "data" in child.props) {
         return child.props.data === focusedOption;
       }
       return false;
@@ -128,14 +125,14 @@ export function MenuListVirtualized<
       for (let i = 0; i < flattenChildren.length; i++) {
         const child = flattenChildren[i];
         if (
-          isObject(child) &&
+          isRecord(child) &&
           "props" in child &&
-          isObject(child.props) &&
+          isRecord(child.props) &&
           "type" in child.props &&
           child.props.type === "option" &&
           "isSelected" in child.props
         ) {
-          if ("data" in child.props && isObject(child.props.data)) {
+          if ("data" in child.props && isRecord(child.props.data)) {
             if ("isSelected" in child.props && child.props.isSelected) {
               selectedOption = child.props.data;
               break;

package/src/select/components/menu.tsx

@@ -13,12 +13,12 @@ export const MenuListNulledStyles: CSSObjectWithLabel = {
 };
 export const MenuNulledStyles: CSSObjectWithLabel = {
   backgroundColor: "",
-  borderRadius: "",
   boxShadow: "",
   marginTop: 0,
   marginBottom: 0,
-  paddingTop: space.s8,
-  paddingBottom: space.s8,
+  paddingTop: space.s6,
+  paddingBottom: space.s6,
+  borderRadius: border.radius8,
 };
 
 const menuCss = css`

package/src/select/components/option.tsx

@@ -99,7 +99,6 @@ export function Option<Option, IsMulti extends boolean = false, Group extends Gr
    * This makes this option component fast.
    * Excluding onMouseOver, onMouseMove makes ReactSelect not rerender the whole list on option hover
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {onMouseOver, onMouseMove, ...truncatedInnerProps} = rest.innerProps;
   const props = Object.assign(rest, {innerProps: truncatedInnerProps});
   return <OptionSlow {...props}>{children}</OptionSlow>;

package/src/select/index.tsx

@@ -1,5 +1,5 @@
 import {css, cx} from "@linaria/core";
-import type {ForwardedRef} from "react";
+import {type ForwardedRef} from "react";
 import React, {forwardRef} from "react";
 
 import type {$TSFixMe} from "../tsfixme";
@@ -17,6 +17,7 @@ export type {
   ControlProps,
   MultiValue,
   MultiValueProps,
+  MultiValueRemoveProps,
   OnChangeValue,
   OptionProps,
   OptionsOrGroups,

package/src/select/reflection.ts

@@ -1,5 +1,4 @@
-import isFunction from "lodash/isFunction";
-import isObject from "lodash/isObject";
+import {isRecord} from "@fibery/helpers/src/_";
 import type {GroupProps} from "react-select/dist/declarations/src";
 
 import type {GroupBase} from "./util";
@@ -7,7 +6,7 @@ import type {GroupBase} from "./util";
 type ReactElementWithProps<P = object> = {props: P};
 
 export function isReactElementWithProps(node: unknown): node is ReactElementWithProps {
-  return isObject(node) && "props" in node && isObject(node.props);
+  return isRecord(node) && "props" in node && isRecord(node.props);
 }
 
 export function isGroupChild<Option, IsMulti extends boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
@@ -16,8 +15,8 @@ export function isGroupChild<Option, IsMulti extends boolean, Group extends Grou
   return (
     "options" in node.props &&
     "Heading" in node.props &&
-    isFunction(node.props.Heading) &&
+    typeof node.props.Heading === "function" &&
     "headingProps" in node.props &&
-    isObject(node.props.headingProps)
+    isRecord(node.props.headingProps)
   );
 }

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

@@ -71,7 +71,6 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   selectStyles?: StylesConfig<T, U, V>;
   onMenuOpen?: () => void;
   onMenuClose?: () => void | boolean;
-  getPopupContainer?: () => HTMLElement;
   onSelectKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
   otherSelectProps?: Record<string, unknown>;
   popoverPlacement?: Placement;
@@ -117,7 +116,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     onChange,
     onMenuOpen,
     onMenuClose,
-    getPopupContainer,
     onSelectKeyDown,
     otherSelectProps,
     popoverPlacement = "bottom-start",
@@ -199,7 +197,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
       <Popover.Trigger ref={setTriggerElement} asChild triggerEvent="click">
         {trigger}
       </Popover.Trigger>
-      <Wrap with={Popover.Portal} if={renderInPortal} getPopupContainer={getPopupContainer}>
+      <Wrap with={Popover.Portal} if={renderInPortal}>
         <Popover.Content
           supportMobile
           title={title}

package/src/select/select.tsx

@@ -1,6 +1,6 @@
+import {truthy} from "@fibery/helpers/src/_";
 import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
-import compact from "lodash/compact";
 import type {ForwardedRef, RefObject} from "react";
 import {forwardRef, useCallback, useMemo, useRef, useState} from "react";
 import type {
@@ -10,6 +10,7 @@ import type {
   MenuProps,
   MultiValue,
   MultiValueProps,
+  MultiValueRemoveProps,
   OnChangeValue,
   OptionProps,
   OptionsOrGroups,
@@ -44,6 +45,7 @@ export type {
   ControlProps,
   MultiValue,
   MultiValueProps,
+  MultiValueRemoveProps,
   OnChangeValue,
   OptionProps,
   OptionsOrGroups,
@@ -128,12 +130,12 @@ function useSelectStyles<T, U extends boolean, V extends GroupBase<T>>({
 }) {
   return useMemo(() => {
     return composeStyles<T, U, V>(
-      compact([
+      [
         makeComponentsStyles<T, U, V>(),
         virtualized ? makeVirtualizedStyles<T, U, V>() : makeNonVirtualizedStyles<T, U, V>(),
         zIndex ? makeZIndexStyles<T, U, V>(zIndex) : null,
         styles,
-      ])
+      ].filter(truthy)
     );
   }, [styles, virtualized, zIndex]);
 }

package/src/select/styles.ts

@@ -53,13 +53,7 @@ export const makeVirtualizedStyles = <T, U extends boolean, V extends GroupBase<
   }),
 });
 
-export const makeNonVirtualizedStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({
-  menuList: (provided) => ({
-    ...provided,
-    paddingTop: 6,
-    paddingBottom: 6,
-  }),
-});
+export const makeNonVirtualizedStyles = <T, U extends boolean, V extends GroupBase<T>>(): StylesConfig<T, U, V> => ({});
 
 export const makeZIndexStyles = <T, U extends boolean, V extends GroupBase<T>>(
   zIndex: number

package/src/select/util.ts

@@ -1,4 +1,4 @@
-import isObject from "lodash/isObject";
+import {isRecord} from "@fibery/helpers/src/_";
 import type {ReactNode, RefObject} from "react";
 import {Children, createContext} from "react";
 import type {GroupBase as ReactSelectGroupBase, OptionsOrGroups, SelectInstance} from "react-select";
@@ -11,7 +11,7 @@ export type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean; separ
 export function isGroup<Option, Group extends GroupBase<Option>>(
   optionOrGroup: Option | Group
 ): optionOrGroup is Group {
-  return isObject(optionOrGroup) && "options" in optionOrGroup;
+  return isRecord(optionOrGroup) && "options" in optionOrGroup;
 }
 
 export function countOptions<Option, Group extends GroupBase<Option>>(

package/src/thematic.tsx

@@ -1,4 +1,3 @@
-// oxlint-disable max-lines
 import {css} from "@linaria/core";
 import {useState} from "react";
 import {createPortal} from "react-dom";

package/src/theme-provider.test.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable max-lines, no-console */
+/* eslint-disable no-console */
 import {render, screen} from "@testing-library/react";
 
 import {stylesFromTheme, themeFromPalette, themeVars} from "./design-system";