@fibery/ui-kit 3.0.0 → 4.1.0

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

@@ -1,4 +1,4 @@
-import compact from "lodash/compact";
+import {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";
@@ -15,22 +15,21 @@ function flattenGroupChildren(
   children: ReactNode,
   renderGroup: (Component: ComponentType<GroupHeadingProps>, props: GroupProps["headingProps"]) => ReactNode
 ): ReactNode[] {
-  return compact(
-    Children.toArray(children)
-      .map((child) => {
-        if (isReactElementWithProps(child) && isGroupChild(child)) {
-          const {props} = child;
-          const groupChildren = compact(Children.toArray(props.children));
-          if (!groupChildren.length) {
-            return [];
-          }
-          const heading = renderGroup(props.Heading, props.headingProps);
-          return [heading, ...groupChildren];
+  return Children.toArray(children)
+    .map((child) => {
+      if (isReactElementWithProps(child) && isGroupChild(child)) {
+        const {props} = child;
+        const groupChildren = Children.toArray(props.children).filter(truthy);
+        if (!groupChildren.length) {
+          return [];
         }
-        return child;
-      })
-      .flat()
-  );
+        const heading = renderGroup(props.Heading, props.headingProps);
+        return [heading, ...groupChildren];
+      }
+      return child;
+    })
+    .flat()
+    .filter(truthy);
 }
 
 /**

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/index.tsx

@@ -1,11 +1,11 @@
 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";
 import {useIsPhone} from "../use-is-phone";
 import type {GroupBase, SelectInstance, SelectProps} from "./select";
-import {combineStyles, SelectComponent} from "./select";
+import {composeStyles, SelectComponent} from "./select";
 import {SelectInPopover} from "./select-in-popover";
 import {makeSingleLineStyles} from "./styles";
 
@@ -31,7 +31,7 @@ export type {
 
 export {components, MenuListVirtualized, MenuListVirtua, createFilter} from "./select";
 
-export {combineStyles} from "./select";
+export {composeStyles} from "./select";
 
 const emptyComponents = {
   Menu: () => null,
@@ -134,7 +134,7 @@ export function SingleRowSelect<T = unknown, U extends boolean = boolean, V exte
   styles = {},
   ...rest
 }: SelectProps<T, U, V>) {
-  return <Select {...rest} styles={combineStyles([makeSingleLineStyles<T, U, V>(), styles])} />;
+  return <Select {...rest} styles={composeStyles([makeSingleLineStyles<T, U, V>(), styles])} />;
 }
 
 export {CreatableSelect} from "./select";

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

@@ -11,16 +11,8 @@ import {Popover} from "../popover";
 import {useIsPhone} from "../use-is-phone";
 import {MenuTransparent} from "./components/menu";
 import {SELECT_IN_POPOVER_VALUE_MAX_HEIGHT} from "./constants";
-import type {
-  ActionMeta,
-  GroupBase,
-  OnChangeValue,
-  OptionsOrGroups,
-  PropsValue,
-  SelectProps,
-  StylesConfig,
-} from "./select";
-import {combineStyles, SelectComponent as ReactSelect} from "./select";
+import type {ActionMeta, GroupBase, OnChangeValue, SelectProps, StylesConfig} from "./select";
+import {composeStyles, SelectComponent as ReactSelect} from "./select";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 import {makeSelectInPopoverStyles} from "./styles";
 
@@ -66,16 +58,12 @@ export type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
 };
 
 type Props<T, U extends boolean, V extends GroupBase<T>> = {
-  value?: PropsValue<T>;
-  isSearchable?: boolean;
   menuIsOpen?: boolean;
-  options: OptionsOrGroups<T, V>;
   disabled?: boolean;
   isCollectionMode?: U;
   isClearable?: boolean;
   trigger?: ReactNode;
   title?: string;
-  maxMenuHeight?: number;
   hideOnChange?: boolean | ((newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => boolean);
   renderInPortal?: boolean;
   popupContainerClassName?: string;
@@ -89,6 +77,8 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   popoverPlacement?: Placement;
 } & Pick<
   SelectProps<T, U, V>,
+  | "value"
+  | "options"
   | "placeholder"
   | "autoFocus"
   | "inputValue"
@@ -104,16 +94,15 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   | "onChange"
   | "onFocus"
   | "components"
+  | "isSearchable"
 >;
 
 function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
-  props: Omit<Props<T, U, V>, "maxMenuHeight">,
+  props: Props<T, U, V>,
   forwardedRef: ForwardedRef<SelectInPopoverRef<T, U, V>>
 ) {
   const {
-    value,
     menuIsOpen,
-    options,
     disabled,
     isCollectionMode,
     isClearable = true,
@@ -131,7 +120,6 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     getPopupContainer,
     onSelectKeyDown,
     otherSelectProps,
-    isSearchable = true,
     popoverPlacement = "bottom-start",
     ...rest
   } = props;
@@ -151,41 +139,42 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     selectRef,
   }));
 
-  const onHide = useCallback(() => {
-    const wasClosed = onMenuClose?.();
-    if (wasClosed === false) {
-      return;
-    }
-    setVisible(false);
-  }, [onMenuClose, setVisible]);
-
-  const onShow = useCallback(() => {
-    if (disabled) {
-      return;
-    }
-
-    setVisible(true);
-    if (onMenuOpen) {
-      onMenuOpen();
-    }
-  }, [disabled, onMenuOpen, setVisible]);
+  const onOpenChange = useCallback(
+    (value: boolean) => {
+      if (value) {
+        if (disabled) {
+          return;
+        }
+        setVisible(true);
+        onMenuOpen?.();
+      } else {
+        const wasClosed = onMenuClose?.();
+        if (wasClosed === false) {
+          return;
+        }
+        setVisible(false);
+      }
+    },
+    [disabled, onMenuOpen, setVisible, onMenuClose]
+  );
 
-  const styles = useMemo(() => {
-    return combineStyles<T, U, V>([makeSelectInPopoverStyles(isPhone), selectStyles]);
-  }, [selectStyles, isPhone]);
+  const composedStyles = useMemo(
+    () => composeStyles<T, U, V>([makeSelectInPopoverStyles(isPhone), selectStyles]),
+    [selectStyles, isPhone]
+  );
 
   const handleChange = useCallback(
     (newValue: OnChangeValue<T, U>, actionMeta: ActionMeta<T>) => {
       if (typeof hideOnChange === "function") {
         if (hideOnChange(newValue, actionMeta)) {
-          onHide();
+          onOpenChange(false);
         }
       } else if (hideOnChange) {
-        onHide();
+        onOpenChange(false);
       }
       onChange?.(newValue, actionMeta);
     },
-    [hideOnChange, onChange, onHide]
+    [hideOnChange, onChange, onOpenChange]
   );
 
   const paddingPopup = popupPaddingTop + popupPaddingBottom;
@@ -206,7 +195,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
   };
 
   return (
-    <Popover.Root open={visible} onOpen={() => onShow()} onClose={() => onHide()}>
+    <Popover.Root open={visible} onOpenChange={onOpenChange}>
       <Popover.Trigger ref={setTriggerElement} asChild triggerEvent="click">
         {trigger}
       </Popover.Trigger>
@@ -228,21 +217,15 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
             <ReactSelect<T, U, V>
               {...rest}
               ref={selectRef}
-              styles={styles}
-              isSearchable={isSearchable}
+              styles={composedStyles}
               onKeyDown={onSelectKeyDown}
-              value={value}
-              controlShouldRenderValue
-              closeMenuOnScroll={false}
               closeMenuOnSelect={false}
               onChange={handleChange}
-              options={options || []}
               menuIsOpen
               maxMenuHeight={maxMenuHeight}
               disabled={disabled}
               isCollectionMode={isCollectionMode}
               isClearable={!isCollectionMode && isClearable}
-              menuShouldBlockScroll={false}
               {...otherSelectProps}
               components={selectComponents}
               inline
@@ -255,7 +238,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
 }
 
 type SelectInPopoverType = <T, U extends boolean, V extends GroupBase<T>>(
-  props: Omit<Props<T, U, V>, "maxMenuHeight"> & {ref?: ForwardedRef<SelectInPopoverRef<T, U, V>>}
+  props: Props<T, U, V> & {ref?: ForwardedRef<SelectInPopoverRef<T, U, V>>}
 ) => ReturnType<typeof SelectInPopoverInner>;
 
 export const SelectInPopover = forwardRef(SelectInPopoverInner) as SelectInPopoverType;

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 {
@@ -62,7 +62,7 @@ function GroupVirtualized() {
   return null;
 }
 
-export function combineStyles<T, U extends boolean, V extends GroupBase<T>>(styles: StylesConfig<T, U, V>[]) {
+export function composeStyles<T, U extends boolean, V extends GroupBase<T>>(styles: StylesConfig<T, U, V>[]) {
   return styles.reduce(mergeStyles, {});
 }
 
@@ -127,13 +127,13 @@ function useSelectStyles<T, U extends boolean, V extends GroupBase<T>>({
   styles?: SelectProps<T, U, V>["styles"];
 }) {
   return useMemo(() => {
-    return combineStyles<T, U, V>(
-      compact([
+    return composeStyles<T, U, V>(
+      [
         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/theme-provider.test.tsx

@@ -11,7 +11,7 @@ import {
   useThemeStyles,
 } from "./theme-provider";
 import {locateThemeBundle} from "./theme-styles";
-import {neutralStyles, prefix as themePrefix} from "./theming";
+import {neutralStyles, prefix as themePrefix} from "./theming.generated";
 
 const {
   palette,

package/src/theme-provider.tsx

@@ -3,6 +3,7 @@ import invariant from "invariant";
 import type {PropsWithChildren, ReactNode} from "react";
 import {createContext, forwardRef, useContext, useEffect, useLayoutEffect, useMemo, useState} from "react";
 
+import {globalOverrides} from "./antd/global-overrides";
 import type {Styles, Theme} from "./design-system/theme";
 import {stylesFromTheme, themeFromPalette} from "./design-system/theme";
 import type {ThemePalette} from "./design-system/types";
@@ -11,7 +12,7 @@ import {selectPalette} from "./palette-generator";
 import type {ThemeMode, ThemePreference} from "./theme-settings";
 import {subscribeOnThemeModeChange, subscribeOnThemePreferenceChange, useWarmPreference} from "./theme-settings";
 import {locateThemeBundle} from "./theme-styles";
-import {neutralStyles, prefix as themePrefix, warmStyles} from "./theming";
+import {neutralStyles, prefix as themePrefix, warmStyles} from "./theming.generated";
 
 const darkClassName = "dark-theme";
 const warmClassName = "warm-palette";
@@ -50,6 +51,7 @@ function chooseGlobalStyles(themeMode: ThemeMode, warm: boolean) {
   colorSchemeMeta?.setAttribute("content", colorScheme);
 
   htmlElement.classList.add(globals);
+  htmlElement.classList.add(globalOverrides);
 }
 
 const ThemePreferenceContext = createContext<ThemePreference | null>(null);
@@ -76,14 +78,6 @@ export function useThemeMode(): ThemeMode {
   return theme.mode;
 }
 
-/** @deprecated Use `useThemedColor` instead */
-export const useNeutralColor = useThemedColor;
-
-export function useThemedColor(color: string) {
-  const theme = useTheme();
-  return theme.fns.deneutralize(color);
-}
-
 const RootThemeStylesContext = createContext<Styles>(coolLightThemeStyles);
 const ThemeStylesContext = createContext<Styles>(coolLightThemeStyles);
 

package/src/theme-snapshots.test.ts

@@ -1,9 +1,7 @@
 import {format, type FormatConfig} from "oxfmt";
 
 import oxfmtConfig from "../../../.oxfmtrc.json" with {type: "json"};
-import {buildThemingSnapshot} from "./theming/build";
-
-const PREFIXES = ["fibery", "vzdbery"] as const;
+import {buildThemingSnapshot} from "./theming.build";
 
 async function renderTs(prefix: string): Promise<string> {
   const s = buildThemingSnapshot(prefix);
@@ -49,14 +47,12 @@ async function renderCss(prefix: string): Promise<string> {
   return code;
 }
 
-for (const prefix of PREFIXES) {
-  test(`theming-${prefix}.snapshot.ts`, async () => {
-    const source = await renderTs(prefix);
-    await expect(source).toMatchFileSnapshot(`./theming/theming-${prefix}.snapshot.ts`);
-  });
+test(`theming-fibery.generated.ts`, async () => {
+  const source = await renderTs("fibery");
+  await expect(source).toMatchFileSnapshot(`./theming.generated.ts`);
+});
 
-  test(`theming-${prefix}.snapshot.css`, async () => {
-    const source = await renderCss(prefix);
-    await expect(source).toMatchFileSnapshot(`./theming/theming-${prefix}.snapshot.css`);
-  });
-}
+test(`theming-fibery.generated.css`, async () => {
+  const source = await renderCss("fibery");
+  await expect(source).toMatchFileSnapshot(`./theming.generated.css`);
+});

package/src/{theming/build.ts → theming.build.ts}

@@ -1,13 +1,10 @@
-// Builder for prefix-baked theming snapshots. Internal to ui-kit;
-// not re-exported through ./theming/index.ts. The snapshot test in
-// theme-snapshots.test.ts is the only intended caller — it freezes
-// the output into theming-<prefix>.snapshot.{ts,css} files.
+// Builder for prefix-baked theming snapshots. Internal to ui-kit.
 
-import type {Theme} from "../design-system/theme";
-import {stylesFromTheme} from "../design-system/theme";
-import type {LayoutVarNames, LayoutVars, ThemeVars} from "../design-system/vars";
-import {layoutVarNamesFromPrefix, layoutVarsFromPrefix, varsFromTheme} from "../design-system/vars";
-import {locateThemeBundle} from "../theme-styles";
+import type {Theme} from "./design-system/theme";
+import {stylesFromTheme} from "./design-system/theme";
+import type {LayoutVarNames, LayoutVars, ThemeVars} from "./design-system/vars";
+import {layoutVarNamesFromPrefix, layoutVarsFromPrefix, varsFromTheme} from "./design-system/vars";
+import {locateThemeBundle} from "./theme-styles";
 
 export type ThemingSnapshot = LayoutVarNames & {
   prefix: string;