@fibery/ui-kit 1.29.5 → 1.31.0

package/src/icons/react/ViewList.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ViewListSvg from '../ast/ViewList';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ViewList = (
+const ViewList = forwardRef<SVGSVGElement, IconBaseProps>(function ViewList(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ViewListSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ViewListSvg} />});
 
-ViewList.displayName = 'ViewList';
 export default ViewList;

package/src/icons/react/ViewMap.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ViewMapSvg from '../ast/ViewMap';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ViewMap = (
+const ViewMap = forwardRef<SVGSVGElement, IconBaseProps>(function ViewMap(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ViewMapSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ViewMapSvg} />});
 
-ViewMap.displayName = 'ViewMap';
 export default ViewMap;

package/src/icons/react/ViewPage.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ViewPageSvg from '../ast/ViewPage';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ViewPage = (
+const ViewPage = forwardRef<SVGSVGElement, IconBaseProps>(function ViewPage(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ViewPageSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ViewPageSvg} />});
 
-ViewPage.displayName = 'ViewPage';
 export default ViewPage;

package/src/icons/react/ViewTable.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ViewTableSvg from '../ast/ViewTable';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ViewTable = (
+const ViewTable = forwardRef<SVGSVGElement, IconBaseProps>(function ViewTable(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ViewTableSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ViewTableSvg} />});
 
-ViewTable.displayName = 'ViewTable';
 export default ViewTable;

package/src/icons/react/ViewTimeline.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ViewTimelineSvg from '../ast/ViewTimeline';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const ViewTimeline = (
+const ViewTimeline = forwardRef<SVGSVGElement, IconBaseProps>(function ViewTimeline(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ViewTimelineSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ViewTimelineSvg} />});
 
-ViewTimeline.displayName = 'ViewTimeline';
 export default ViewTimeline;

package/src/icons/react/Views.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import ViewsSvg from '../ast/Views';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Views = (
+const Views = forwardRef<SVGSVGElement, IconBaseProps>(function Views(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={ViewsSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ViewsSvg} />});
 
-Views.displayName = 'Views';
 export default Views;

package/src/icons/react/Warning.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import WarningSvg from '../ast/Warning';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Warning = (
+const Warning = forwardRef<SVGSVGElement, IconBaseProps>(function Warning(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={WarningSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={WarningSvg} />});
 
-Warning.displayName = 'Warning';
 export default Warning;

package/src/icons/react/WarningTriangle.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import WarningTriangleSvg from '../ast/WarningTriangle';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const WarningTriangle = (
+const WarningTriangle = forwardRef<SVGSVGElement, IconBaseProps>(function WarningTriangle(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={WarningTriangleSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={WarningTriangleSvg} />});
 
-WarningTriangle.displayName = 'WarningTriangle';
 export default WarningTriangle;

package/src/icons/react/Youtube.tsx

@@ -1,12 +1,13 @@
 // This icon file is generated automatically.
 
+import {forwardRef} from 'react';
 import YoutubeSvg from '../ast/Youtube';
 import { Icon } from '../Icon';
 import { IconBaseProps } from '../types';
 
-const Youtube = (
+const Youtube = forwardRef<SVGSVGElement, IconBaseProps>(function Youtube(
   props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={YoutubeSvg} />;
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={YoutubeSvg} />});
 
-Youtube.displayName = 'Youtube';
 export default Youtube;

package/src/icons/react/index.tsx

@@ -160,6 +160,7 @@ export { default as PageWideMode } from './PageWideMode';
 export { default as Pencil } from './Pencil';
 export { default as People } from './People';
 export { default as Photo } from './Photo';
+export { default as PinFilled } from './PinFilled';
 export { default as Pin } from './Pin';
 export { default as Popup } from './Popup';
 export { default as Posts } from './Posts';

package/src/icons/types.ts

@@ -1,3 +1,5 @@
+import {SVGProps} from "react";
+
 export interface AbstractNode {
   type: string;
   tagName?: string;
@@ -13,17 +15,19 @@ export interface IconDefinition {
   icon: AbstractNode;
 }
 
-export type IconBaseProps = {
-  color?: string | null;
+export type IconBaseProps = Omit<SVGProps<SVGSVGElement>, "ref" | "color"> & {
+  /**
+   * Use when you need icon container to occupy more or less space (e.g. for visual alignment).
+   *
+   * NOTE: containerSize uses margins to shift the icon.
+   * If you need to add background color to icon consider using regular padding instead or wrap the icon in a colored div
+   */
   containerSize?: number;
-  viewBox?: string;
   iconSize?: number;
-  onMouseDown?: () => void;
-  onMouseEnter?: () => void;
-  onMouseLeave?: () => void;
+  /** Pass null to inherit parent's color */
+  color?: string | null | undefined;
 };
 
 export type IconProps = IconBaseProps & {
-  icon: IconDefinition;
-  children?: JSX.Element;
+  icon?: IconDefinition;
 };

package/src/loaders.tsx

@@ -141,7 +141,7 @@ export const LoadingTreeMenuItem = ({
   children,
 }: {
   color?: string;
-  Icon: (props: IconBaseProps) => JSX.Element;
+  Icon: React.FC<IconBaseProps>;
   level: number;
   children?: ReactNode;
 }) => {

package/src/select/custom-select-partials/clear-indicator.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import RemoveIcon from "../../icons/react/Remove";
 import {ClearIndicatorProps, GroupBase, MultiValueRemoveProps} from "react-select";
-import {Button} from "../../button/button";
+import {IconButton} from "../../button-v2/icon-button";
+import RemoveIcon from "../../icons/react/Remove";
 
 export function ClearIndicator<
   TOption,
@@ -16,7 +15,9 @@ export function ClearIndicator<
   }
   return (
     <div {...innerProps}>
-      <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />
+      <IconButton disabled={selectProps.isDisabled} size={"small"}>
+        <RemoveIcon />
+      </IconButton>
     </div>
   );
 }

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

@@ -28,6 +28,7 @@ import {
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 import {Menu} from "./custom-select-partials/menu";
+import {useIsPhone} from "../use-is-phone";
 
 const offset = [0, space.s4] as [number, number];
 const popupHeightVH = 45;
@@ -56,6 +57,11 @@ const popupClassName = css`
   padding-left: ${space.s8}px;
   padding-right: ${space.s8}px;
 `;
+const mobileClassName = css`
+  padding-top: ${space.s12}px;
+  padding-left: ${space.s12}px;
+  padding-right: ${space.s12}px;
+`;
 
 const valueClassName = css`
   border-radius: ${border.radius4}px;
@@ -110,7 +116,7 @@ export const selectInPopupStyles = {
     position: "static",
     marginTop: space.s6,
     marginBottom: 0,
-    boxShadow: "none",
+    boxShadow: "none !important",
     borderRadius: border.radius4,
   }),
 };
@@ -301,11 +307,13 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
   );
   const paddingPopup = popupPaddingTop + popupPaddingBottom;
   const paddingMenu = 6 + 6 + 6;
-  const maxMenuHeight =
-    Math.max((document.body.clientHeight / 100) * popupHeightVH, popupMinHeightPx) -
-    valueMaxHeight -
-    paddingPopup -
-    paddingMenu;
+  const isPhone = useIsPhone();
+  const maxMenuHeight = isPhone
+    ? document.body.clientHeight - 45 - valueMaxHeight
+    : Math.max((document.body.clientHeight / 100) * popupHeightVH, popupMinHeightPx) -
+      valueMaxHeight -
+      paddingPopup -
+      paddingMenu;
   const mergedComponents = {...defaultComponents, ...components};
 
   return (
@@ -320,9 +328,12 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
       </mergedComponents.Trigger>
       {Boolean(triggerElement) && (
         <Popup
+          supportMobile
+          title={title}
           offset={offset}
           popupContainerClassName={popupContainerClassName}
           popupClassName={cx(popupClassName, popupStyles)}
+          mobilePopupContentClassName={mobileClassName}
           placement="bottom-start"
           renderInPortal={renderInPortal}
           open={visible}
@@ -332,7 +343,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
           triggerDomElement={triggerElement}
           getPopupContainer={getPopupContainer}
         >
-          {title && <div className={titleClassName}>{title}</div>}
+          {title && !isPhone && <div className={titleClassName}>{title}</div>}
           {/*Usually we set popupContainerElement for react-select via context (SelectControlSettingsProvider). But here we render react-select in popover.*/}
           {/*Render target in controlled by Popover here. So we just override SelectControlContext here and set popupContainerElement to undefined. */}
           {/*So in dom react-select will be a child of popover. */}
@@ -350,6 +361,9 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
               }}
               autoFocus={autoFocus}
               onBlur={() => {
+                if (isPhone) {
+                  return;
+                }
                 blurTimeoutRef.current = setTimeout(() => {
                   onHide(false);
                 }, 250);

package/src/toast/primitives.tsx

@@ -2,7 +2,7 @@ import {preventDefault} from "@fibery/react/src/prevent-default";
 import {css, cx} from "@linaria/core";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import {ElementRef, forwardRef} from "react";
-import {IconButton} from "../button/icon-button";
+import {IconButton} from "../button-v2/icon-button";
 import {border, space, textStyles, themeVars} from "../design-system";
 import CloseIcon from "../icons/react/Close";
 
@@ -150,8 +150,8 @@ export const ToastSubtitle = forwardRef<
 export const ToastClose = () => {
   return (
     <ToastPrimitives.Close aria-label="Dismiss" asChild>
-      <IconButton>
-        <CloseIcon iconSize={16} />
+      <IconButton size="small">
+        <CloseIcon />
       </IconButton>
     </ToastPrimitives.Close>
   );

package/src/toggle-on-off.tsx

@@ -1,6 +1,6 @@
 import chroma from "chroma-js";
 import {FC, ComponentProps, useMemo} from "react";
-import {opacity, ThemeColors} from "./design-system";
+import {ThemeColors} from "./design-system";
 import {useTheme} from "./theme-provider";
 import {Toggle} from "./toggle";
 
@@ -8,11 +8,11 @@ const getBackgroundColors = (accentColor: string | undefined, theme: ThemeColors
   return accentColor && chroma.valid(accentColor)
     ? {
         enabledColor: accentColor,
-        disabledColor: chroma(accentColor).alpha(opacity.opacity35).css(),
+        disabledColor: theme.colorBgButtonSoftNeutralHover,
       }
     : {
-        enabledColor: theme.primaryBlue,
-        disabledColor: theme.disabledTextColor,
+        enabledColor: theme.colorBgButtonSolidAccentDefault,
+        disabledColor: theme.colorBgButtonSoftNeutralHover,
       };
 };
 

package/src/button/icon-button.tsx

@@ -1,49 +0,0 @@
-import {styled} from "@linaria/react";
-import {css} from "@linaria/core";
-import {Children, cloneElement, forwardRef} from "react";
-import {ButtonBase, ButtonBaseProps} from "./button-base";
-import {IconProps} from "../icons/types";
-import cx from "classnames";
-
-export type IconButtonSize = "super-small" | "small" | "normal" | "big";
-
-export type IconButtonProps = ButtonBaseProps & {
-  size?: IconButtonSize;
-  classNameOverride?: string;
-};
-
-const Paddings = {
-  "super-small": 0,
-  small: 2,
-  normal: 4,
-  big: 6,
-};
-
-type StyledProps = {
-  /** The size of the component. `super-small` is equivalent to the dense button styling */
-  size: IconButtonSize;
-};
-
-const getPadding = ({size}: StyledProps) => Paddings[size];
-
-const weight = css``;
-
-const StyledIconButton = styled(ButtonBase)<StyledProps>`
-  &.${weight} {
-    padding: ${getPadding}px;
-  }
-`;
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-  {size = "normal", children, className, ...rest},
-  ref
-) {
-  const iconNode = Children.only(children) as React.ReactElement<IconProps>;
-
-  return (
-    <StyledIconButton ref={ref} size={size} className={cx(className, weight)} borderless {...rest}>
-      {/* maybe better to use css variables? */}
-      {cloneElement(iconNode, {color: iconNode.props.color || "inherit"})}
-    </StyledIconButton>
-  );
-});