@fibery/ui-kit 1.36.2 → 1.37.0

package/src/unit/primitive.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import cx from "classnames";
 import {ComponentProps} from "react";
 import {inputOverrides} from "../antd/styles";
-import {border, themeVars} from "../design-system";
+import {border, space, themeVars} from "../design-system";
 import {
   basicUnitClassName,
   bigSizeUnitClassName,
@@ -13,18 +13,18 @@ import {
   invalidUnitClassName,
   positionUnitClass,
   regularSizeUnitClassName,
-  unitMinHeightClassName,
   regularSizeUnitMinWidthClassName,
-  textEllipsisClassName,
   unitDescriptionClassName,
+  unitMinHeightClassName,
   unitTitleClassName,
-  unitTooltipTitleClassName,
   unitWithTitleClassName,
 } from "./styles";
 import {UnitPrimitiveProps} from "./types";
 import {UnitButtonGroup} from "./unit-button-group";
 import {UnitContent} from "./unit-content";
 import {UnitWithTooltip} from "./unit-with-tooltip";
+import {FieldIcon} from "../field-icon";
+import {useTruncated} from "../tooltip-if-overflown";
 
 const resetButtonStylesClassName = css`
   all: unset;
@@ -63,6 +63,7 @@ export const UnitPrimitive = ({
   // Content
   children,
   title,
+  fieldIcon,
   description = null,
   hint = null,
   icons,
@@ -72,7 +73,9 @@ export const UnitPrimitive = ({
   tooltip = true,
   header = false,
   border = true,
+  color = themeVars.textColor,
   bgColor = themeVars.transparent,
+  fontWeight,
   shrinkable = true,
   clickable = border,
   setMinWidth = true,
@@ -81,11 +84,14 @@ export const UnitPrimitive = ({
   onClick,
   onKeyDown,
   invalid,
-  tooltipContent: tooltipChildren,
 }: UnitPrimitiveProps) => {
-  const cutTextInUnit = !multiline && overflow;
+  const {truncated, setNode} = useTruncated();
+
+  const truncate = !multiline && overflow;
   const unitWrapperStyle = {
+    color,
     backgroundColor: bgColor || themeVars.inputDisabledBgColor,
+    fontWeight,
   };
 
   const unitWrapperClassName = cx(
@@ -106,22 +112,18 @@ export const UnitPrimitive = ({
       inline={inline}
       style={unitWrapperStyle}
       className={unitWrapperClassName}
-      unitButton={
+      unit={
         <UnitContentComponent onKeyDown={onKeyDown} onClick={onClick}>
-          <UnitContent
-            big={big}
-            icons={icons}
-            children={children}
-            contentClassName={cx({[textEllipsisClassName]: cutTextInUnit})}
-            shrinkable={shrinkable}
-          />
+          <UnitContent big={big} icons={icons} shrinkable={shrinkable} truncate={truncate} setNode={setNode}>
+            {children}
+          </UnitContent>
         </UnitContentComponent>
       }
       navButton={navButton}
     />
   );
 
-  const contentWithTitle = header ? (
+  const contentWithHeader = header ? (
     <div className={unitWithTitleClassName}>
       <div className={unitTitleClassName}>{title}</div>
       {content}
@@ -130,41 +132,55 @@ export const UnitPrimitive = ({
     content
   );
 
-  if (tooltip) {
-    const tooltipContent = (
+  if (!tooltip) {
+    return <div className={positionUnitClass}>{contentWithHeader}</div>;
+  }
+
+  const tooltipTitle = (
+    <div
+      className={css`
+        display: flex;
+        align-items: center;
+        gap: ${space.s4}px;
+      `}
+    >
+      {fieldIcon && <FieldIcon iconName={fieldIcon} iconSize={14} color={themeVars.whiteColor} />}
+      {title}
+    </div>
+  );
+
+  const tooltipContent = truncated && (
+    <div className={fullUnitWrapperClassName}>
       <UnitButtonGroup
         big={big}
         inline={inline}
         style={unitWrapperStyle}
         className={unitWrapperClassName}
-        unitButton={
-          <UnitContentComponent onClick={onClick}>
+        unit={
+          <UnitContentComponent>
             <UnitContent big={big} icons={icons}>
-              {tooltipChildren || children}
+              {children}
             </UnitContent>
           </UnitContentComponent>
         }
       />
-    );
-    const renderedDescription = (
-      <div>
-        {description && <div className={unitDescriptionClassName}>{description}</div>}
-        <div className={fullUnitWrapperClassName}>{tooltipContent}</div>
-        {hint}
-      </div>
-    );
-
-    return (
-      <div className={positionUnitClass}>
-        <UnitWithTooltip
-          title={<div className={unitTooltipTitleClassName}>{title}</div>}
-          description={renderedDescription}
-        >
-          {contentWithTitle}
-        </UnitWithTooltip>
-      </div>
-    );
-  } else {
-    return <div className={positionUnitClass}>{contentWithTitle}</div>;
-  }
+    </div>
+  );
+
+  const hasDescription = description || tooltipContent || hint;
+  const tooltipDescription = hasDescription && (
+    <div>
+      {description && <div className={unitDescriptionClassName}>{description}</div>}
+      {tooltipContent}
+      {hint}
+    </div>
+  );
+
+  return (
+    <div className={positionUnitClass}>
+      <UnitWithTooltip title={tooltipTitle} description={tooltipDescription}>
+        {contentWithHeader}
+      </UnitWithTooltip>
+    </div>
+  );
 };

package/src/unit/styles.ts

@@ -52,10 +52,6 @@ export const unitTitleClassName = css`
   padding-top: ${space.s6}px;
 `;
 
-export const unitTooltipTitleClassName = css`
-  margin-bottom: ${space.s4}px;
-`;
-
 export const unitWithTitleClassName = css`
   display: flex;
   flex-direction: column;
@@ -68,6 +64,10 @@ export const unitWithTitleClassName = css`
 export const invalidUnitClassName = css``;
 export const invalidUnitClassNameInForm = css``;
 
+export const clickableClassName = css`
+  cursor: pointer;
+`;
+
 export const borderClassName = css`
   position: relative;
 
@@ -88,11 +88,11 @@ export const borderClassName = css`
     pointer-events: none;
   }
 
-  &:hover::before {
+  &.${clickableClassName}:hover::before {
     box-shadow: ${themeVars.inputBorderHoverColor} inset;
   }
 
-  &:focus::before {
+  &.${clickableClassName}:focus::before {
     box-shadow: ${themeVars.inputBorderFocusColor} inset;
   }
 
@@ -110,12 +110,12 @@ export const borderClassName = css`
       border: 1px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
     }
 
-    &:hover::before {
+    &.${clickableClassName}:hover::before {
       box-shadow: none;
       border: 1px solid ${themeVars.colorBorderReactionsSelectedHover};
     }
 
-    &:focus::before {
+    &.${clickableClassName}:focus::before {
       box-shadow: ${themeVars.inputBorderFocusColor} inset;
       border: none;
     }
@@ -136,10 +136,6 @@ export const borderClassName = css`
   }
 `;
 
-export const clickableClassName = css`
-  cursor: pointer;
-`;
-
 export const basicUnitContentClassName = css`
   padding-left: ${space.s4}px;
   padding-right: ${space.s4}px;

package/src/unit/types.ts

@@ -10,6 +10,7 @@ export type UnitPrimitiveProps = {
   // Content
   children?: ReactNode;
   title?: string;
+  fieldIcon?: string;
   description?: ReactNode;
   icons?: React.ReactNodeArray;
   hint?: ReactNode;
@@ -19,7 +20,9 @@ export type UnitPrimitiveProps = {
   tooltip?: boolean;
   header?: boolean;
   border?: boolean;
-  bgColor?: string | null | undefined;
+  color?: string;
+  bgColor?: string | null;
+  fontWeight?: number;
   shrinkable?: boolean;
   clickable?: boolean;
   setMinWidth?: boolean;
@@ -28,5 +31,4 @@ export type UnitPrimitiveProps = {
   onKeyDown?: (e: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void;
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
   invalid?: boolean;
-  tooltipContent?: ReactNode;
 };

package/src/unit/unit-button-group.tsx

@@ -3,21 +3,16 @@ import {space} from "../design-system";
 import {IconButtonProps} from "../button/icon-button";
 import {getHeight} from "./unit-content-layout";
 
-export const UnitButtonGroup = ({
-  big,
-  inline,
-  style,
-  className,
-  unitButton,
-  navButton,
-}: {
+type Props = {
   big: boolean;
   inline: boolean;
   style: React.CSSProperties;
   className: string;
-  unitButton?: ReactNode;
+  unit?: ReactNode;
   navButton?: ReactNode;
-}) => {
+};
+
+export const UnitButtonGroup = ({big, inline, style, className, unit, navButton}: Props) => {
   const navButtonNode = navButton && (Children.only(navButton) as React.ReactElement<IconButtonProps>);
   const navButtonSize = getHeight(big) + 2 * space.s2;
   return (
@@ -28,7 +23,7 @@ export const UnitButtonGroup = ({
       }}
       className={className}
     >
-      {unitButton}
+      {unit}
       {navButtonNode &&
         cloneElement(navButtonNode, {
           style: {...navButtonNode.props.style, width: navButtonSize, height: navButtonSize},

package/src/unit/unit-content.tsx

@@ -1,4 +1,9 @@
-import {alignCenterClassName, basicUnitContentClassName, unitContentContainerClassName} from "./styles";
+import {
+  alignCenterClassName,
+  basicUnitContentClassName,
+  textEllipsisClassName,
+  unitContentContainerClassName,
+} from "./styles";
 import {ReactNode} from "react";
 import {cx} from "@linaria/core";
 import {UnitContentLayout} from "./unit-content-layout";
@@ -6,12 +11,13 @@ import {UnitContentLayout} from "./unit-content-layout";
 type Props = {
   big: boolean;
   icons?: React.ReactNodeArray;
-  children?: ReactNode;
-  contentClassName?: string;
   shrinkable?: boolean;
+  truncate?: boolean;
+  setNode?: (element: HTMLElement | null) => void;
+  children?: ReactNode;
 };
 
-export const UnitContent = ({big, icons, children, contentClassName, shrinkable}: Props) => {
+export const UnitContent = ({big, icons, shrinkable, truncate, setNode, children}: Props) => {
   return (
     <UnitContentLayout
       big={big}
@@ -29,7 +35,9 @@ export const UnitContent = ({big, icons, children, contentClassName, shrinkable}
 
       {children && (
         <div className={unitContentContainerClassName}>
-          <div className={cx(basicUnitContentClassName, contentClassName)}>{children}</div>
+          <div ref={setNode} className={cx(basicUnitContentClassName, truncate && textEllipsisClassName)}>
+            {children}
+          </div>
         </div>
       )}
     </UnitContentLayout>

package/src/unit/unit-with-title.tsx

@@ -1,6 +1,11 @@
 import {unitTitleClassName, unitWithTitleClassName} from "./styles";
 
-export const UnitWithTitle = ({children, title}: {title: React.ReactNode; children: React.ReactElement}) => (
+type Props = {
+  title: React.ReactNode;
+  children: React.ReactElement;
+};
+
+export const UnitWithTitle = ({children, title}: Props) => (
   <div className={unitWithTitleClassName}>
     <div className={unitTitleClassName}>{title}</div>
     {children}

package/src/unit/unit-with-tooltip.tsx

@@ -1,16 +1,21 @@
-import {tooltipDelay} from "../../src/design-system";
-import {Tooltip} from "../tooltip";
+import {space, tooltipDelay} from "../../src/design-system";
+import {Tooltip, TooltipDescription, TooltipTitle} from "../tooltip";
 import {useRef, useState} from "react";
+import {css} from "@linaria/core";
 
-export const UnitWithTooltip = ({
-  children,
-  title,
-  description,
-}: {
+const contentCss = css`
+  display: flex;
+  flex-direction: column;
+  gap: ${space.s4}px;
+`;
+
+type Props = {
   children: React.ReactElement;
   title: React.ReactNode;
   description: React.ReactNode;
-}) => {
+};
+
+export const UnitWithTooltip = ({children, title, description}: Props) => {
   const [shouldDisplayTooltip, setShouldDisplayTooltip] = useState(false);
   const unitElementRef = useRef<HTMLDivElement>(null);
   const isHoveredRef = useRef(false);
@@ -51,7 +56,17 @@ export const UnitWithTooltip = ({
   };
 
   return (
-    <Tooltip visible={shouldDisplayTooltip} title={title} description={description} side="bottom" align="start">
+    <Tooltip
+      visible={shouldDisplayTooltip}
+      content={
+        <div className={contentCss}>
+          <TooltipTitle>{title}</TooltipTitle>
+          {description && <TooltipDescription>{description}</TooltipDescription>}
+        </div>
+      }
+      side="bottom"
+      align="start"
+    >
       <div ref={unitElementRef} onMouseDown={onMouseLeave} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         {children}
       </div>

package/src/use-is-phone.tsx

@@ -0,0 +1,12 @@
+import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
+import {createContext} from "@fibery/react/src/create-context";
+import {ReactNode} from "react";
+
+const [Provider, useIsPhone] = createContext<boolean>("PhoneContext", false);
+
+export {useIsPhone};
+
+export function IsPhoneProvider({children}: {children: ReactNode}) {
+  const isPhone = useIsMediaQueryMatched("(max-width: 440px), (max-height: 440px)");
+  return <Provider value={isPhone}>{children}</Provider>;
+}

package/src/workflow-progress-icon.tsx

@@ -22,7 +22,7 @@ export const WorkflowProgressIcon: FC<WorkflowProgressIcon> = ({
   fillProgress = themeVars.progressIconFill,
   fillBackground = themeVars.progressIconBg,
   isDone,
-  doneStrokeColor = themeVars.whiteColor,
+  doneStrokeColor = themeVars.pageContentBg,
   doneFillColor = themeVars.progressIconFill,
 }) => {
   return (

package/src/number-input/text-area-with-autosize.tsx

@@ -1,91 +0,0 @@
-import {CSSProperties, useCallback, useRef} from "react";
-import {stopPropagation} from "@fibery/react/src/stop-propagation";
-import {hiddenCss, inputCss, textAreaCss} from "./styles";
-import {css, cx} from "@linaria/core";
-import {Stack} from "./stack";
-import {invalidInputClass} from "./edit-unit-styles";
-
-export const TextAreaWithAutosize = ({
-  value,
-  onFocus,
-  onBlur,
-  onChange,
-  onKeyDown,
-  autoFocus,
-  placeholder,
-  invalid,
-  ...rest
-}: {
-  value: string | null;
-  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-  onChange: (value: string | number) => void;
-  placeholder: string;
-  autoFocus: boolean;
-  style?: CSSProperties;
-  width?: number;
-  invalid?: boolean;
-}) => {
-  const handleFocus: React.FocusEventHandler<HTMLTextAreaElement> = useCallback(
-    (e) => {
-      if (onFocus) {
-        onFocus(e);
-      }
-    },
-    [onFocus]
-  );
-
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const initialValue = useRef(value);
-
-  const handleBlur: React.FocusEventHandler<HTMLTextAreaElement> = useCallback(
-    (e) => {
-      if (onBlur) {
-        onBlur(e);
-      }
-    },
-    [onBlur]
-  );
-
-  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
-    (e) => {
-      if (onChange) {
-        onChange(e.target.value);
-      }
-    },
-    [onChange]
-  );
-
-  return (
-    <Stack
-      className={css`
-        width: 100%;
-      `}
-      bottom={
-        <div className={cx(inputCss, textAreaCss, hiddenCss)}>
-          {value === null || value === "" || initialValue.current === null || initialValue.current === ""
-            ? placeholder
-            : value}
-        </div>
-      }
-      top={
-        <textarea
-          // Allow textarea to shrink to 1 row if there is only 1 row (otherwise it has min 2 by default)
-          rows={1}
-          autoFocus={autoFocus}
-          ref={inputRef}
-          value={value || ""}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={onKeyDown}
-          placeholder={placeholder}
-          onClick={stopPropagation}
-          {...rest}
-          className={cx(inputCss, textAreaCss, invalid && invalidInputClass)}
-        />
-      }
-    />
-  );
-};

package/src/number-input/text-inline-input-with-autosize.tsx

@@ -1,60 +0,0 @@
-import {CSSProperties, useRef} from "react";
-import {stopPropagation} from "@fibery/react/src/stop-propagation";
-import {Stack} from "./stack";
-import {cx} from "@linaria/core";
-import {hiddenCss, inputCss, textInlineCss} from "./styles";
-import {invalidInputClass} from "./edit-unit-styles";
-
-export const TextInlineInputWithAutosize = ({
-  value,
-  onFocus,
-  onBlur,
-  onChange,
-  onKeyDown,
-  autoFocus,
-  placeholder,
-  invalid,
-  ...rest
-}: {
-  value: string | null;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-  onChange: (value: string | number) => void;
-  placeholder: string;
-  autoFocus: boolean;
-  style?: CSSProperties;
-  width?: number;
-  invalid?: boolean;
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  let hiddenValue = placeholder || "";
-  if (value && value.length > hiddenValue.length - 1) {
-    hiddenValue = value;
-  }
-
-  return (
-    <Stack
-      bottom={<div className={cx(inputCss, textInlineCss, hiddenCss)}>{hiddenValue}</div>}
-      top={
-        <input
-          // Allow input to shrink (otherwise it has size 20 by default)
-          size={1}
-          autoFocus={autoFocus}
-          ref={inputRef}
-          value={value || ""}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          onChange={(e) => onChange?.(e.target.value)}
-          onKeyDown={onKeyDown}
-          type="text"
-          placeholder={placeholder}
-          onClick={stopPropagation}
-          {...rest}
-          className={cx(inputCss, invalid && invalidInputClass)}
-        />
-      }
-    />
-  );
-};

package/src/use-is-phone.ts

@@ -1,5 +0,0 @@
-import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
-
-export function useIsPhone() {
-  return useIsMediaQueryMatched("(max-width: 420px), (max-height: 420px)");
-}