@fibery/ui-kit 1.29.4 → 1.30.0

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

@@ -51,6 +51,7 @@ export { default as CheckCircleFilled } from './CheckCircleFilled';
 export { default as CheckCircle } from './CheckCircle';
 export { default as Checked } from './Checked';
 export { default as ClearValue } from './ClearValue';
+export { default as Clear } from './Clear';
 export { default as ClockAlarm } from './ClockAlarm';
 export { default as ClockForward } from './ClockForward';
 export { default as Clock } from './Clock';
@@ -159,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/select-in-popover.tsx

@@ -110,7 +110,7 @@ export const selectInPopupStyles = {
     position: "static",
     marginTop: space.s6,
     marginBottom: 0,
-    boxShadow: "none",
+    boxShadow: "none !important",
     borderRadius: border.radius4,
   }),
 };

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,
       };
 };