@fibery/ui-kit 1.36.2 → 1.38.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;
@@ -150,14 +146,14 @@ export const unitContentContainerClassName = css`
 `;
 
 export const unitDescriptionClassName = css`
-  margin-bottom: ${space.s4}px;
+  margin-bottom: ${space.s1}px;
 `;
 
 export const fullUnitWrapperClassName = css`
   display: flex;
   align-items: center;
   padding: ${space.s6}px;
-  border-radius: ${space.s4 + space.s1}px;
+  border-radius: ${space.s5}px;
   background-color: ${themeVars.cardBg};
   margin-bottom: ${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,37 @@
+import {ReactNode} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
+import {getMediaQueryList} from "./media-query-utils";
+
+const [Provider, useIsPhone] = createContext<boolean>("PhoneContext", false);
+
+export {useIsPhone};
+
+declare global {
+  const __DISABLE_VERTICAL_MOBILE_BREAKPOINT__: boolean | undefined;
+}
+
+function isVerticalMobileBreakpointDisabled() {
+  // noinspection PointlessBooleanExpressionJS
+  if (
+    typeof __DISABLE_VERTICAL_MOBILE_BREAKPOINT__ !== "undefined" &&
+    __DISABLE_VERTICAL_MOBILE_BREAKPOINT__ === true
+  ) {
+    return true;
+  }
+  const urlParams = new URLSearchParams(window.location.search);
+  return urlParams.has("no-vertical-mobile-breakpoint");
+}
+
+const phoneMediaQuery = isVerticalMobileBreakpointDisabled()
+  ? "(max-width: 440px)"
+  : "(max-width: 440px), (max-height: 440px)";
+
+export function isPhoneMode() {
+  return getMediaQueryList(phoneMediaQuery).matches;
+}
+
+export function IsPhoneProvider({children}: {children: ReactNode}) {
+  const isPhone = useIsMediaQueryMatched(phoneMediaQuery);
+  return <Provider value={isPhone}>{children}</Provider>;
+}

package/src/use-is-support-hover.ts

@@ -1,5 +1,5 @@
 import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
 
 export function useIsSupportHover() {
-  return !useIsMediaQueryMatched("(any-hover: none)");
+  return useIsMediaQueryMatched("(any-hover: hover)");
 }

package/src/use-on-screen-keyboard-data.tsx

@@ -0,0 +1,66 @@
+import {ReactNode, useEffect, useState} from "react";
+import {createContext} from "@fibery/react/src/create-context";
+import _ from "lodash";
+import {useIsPhone} from "./use-is-phone";
+import {keyboardHeightVar, mobileKeyboardOpenClassName} from "./mobile-styles";
+
+const defaultKeyboardHeight = 350;
+
+const [OnScreenKeyboardHeightValueProvider, useOnScreenKeyboardHeight] = createContext<number>(
+  "OnScreenKeyboardHeightProvider",
+  defaultKeyboardHeight
+);
+
+const [IsOnScreenKeyboardOpenedValueProvider, useIsOnScreenKeyboardOpened] = createContext<boolean>(
+  "IsOnScreenKeyboardOpenedValueProvider",
+  false
+);
+
+export function OnScreenKeyboardContextProvider({children}: {children: ReactNode}) {
+  const isPhone = useIsPhone();
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(defaultKeyboardHeight);
+  const [keyboardVisible, setKeyboardVisible] = useState<boolean>(false);
+  const [initialViewPortHeight] = useState(() => window.visualViewport?.height || 0);
+  useEffect(() => {
+    const viewport = window.visualViewport;
+    if (!viewport || !isPhone) {
+      return _.noop;
+    }
+
+    function viewportHandler() {
+      if (viewport) {
+        // console.log({height: viewport.height, initialViewPortHeight, windowHeight: window.innerHeight});
+        // Calculate keyboard height as difference between window height and viewport height
+        const calculatedHeight = Math.max(0, initialViewPortHeight - viewport.height);
+        if (calculatedHeight && keyboardHeight !== calculatedHeight && calculatedHeight > 200) {
+          setKeyboardHeight(calculatedHeight);
+          document.body.style.setProperty(keyboardHeightVar, `${calculatedHeight}px`);
+        }
+        if (viewport.height !== initialViewPortHeight && !keyboardVisible) {
+          const htmlElement = document.querySelector("html");
+          htmlElement?.classList.add(mobileKeyboardOpenClassName);
+          setKeyboardVisible(true);
+        } else if (viewport.height === initialViewPortHeight && keyboardVisible) {
+          setKeyboardVisible(false);
+          const htmlElement = document.querySelector("html");
+          htmlElement?.classList.remove(mobileKeyboardOpenClassName);
+        }
+      }
+    }
+
+    viewport.addEventListener("resize", viewportHandler);
+    // Initial calculation
+    viewportHandler();
+
+    return () => {
+      viewport.removeEventListener("resize", viewportHandler);
+    };
+  }, [initialViewPortHeight, isPhone, keyboardHeight, keyboardVisible]);
+  return (
+    <OnScreenKeyboardHeightValueProvider value={keyboardHeight}>
+      <IsOnScreenKeyboardOpenedValueProvider value={keyboardVisible}>{children}</IsOnScreenKeyboardOpenedValueProvider>
+    </OnScreenKeyboardHeightValueProvider>
+  );
+}
+
+export {useOnScreenKeyboardHeight, useIsOnScreenKeyboardOpened};

package/src/workflow-progress-icon.tsx

@@ -22,38 +22,32 @@ export const WorkflowProgressIcon: FC<WorkflowProgressIcon> = ({
   fillProgress = themeVars.progressIconFill,
   fillBackground = themeVars.progressIconBg,
   isDone,
-  doneStrokeColor = themeVars.whiteColor,
+  doneStrokeColor = themeVars.pageContentBg,
   doneFillColor = themeVars.progressIconFill,
 }) => {
   return (
     <svg
       width={size}
       height={size}
-      viewBox={`0 0 ${size} ${size}`}
+      viewBox={`0 0 16 16`}
       className={css`
         display: block;
       `}
     >
-      <g transform={`translate(${size / 2}, ${size / 2})`}>
-        {isDone ? (
-          <>
-            <circle r={size / 2} fill={doneFillColor} />
-            <polyline
-              points={`${-size / 4},0 ${-size / 10},${size / 4.5} ${size / 4.5},${-size / 6}`}
-              stroke={doneStrokeColor}
-              strokeWidth={size / 8}
-              strokeLinecap={"round"}
-              strokeLinejoin={"round"}
-              fill={"none"}
-            />
-          </>
-        ) : (
-          <>
-            <path d={getPath(total, total, size)} fill={fillBackground} />
-            <path d={getPath(index, total, size)} fill={fillProgress} />
-          </>
-        )}
-      </g>
+      {isDone ? (
+        <>
+          <circle cx="8" cy="8" r="8" fill={doneFillColor} fillOpacity="0.8" />
+          <path
+            d="M6.93229 11.98C7.25645 11.98 7.5091 11.8562 7.68071 11.5941L12.1236 4.80535C12.2476 4.61478 12.3 4.43852 12.3 4.27178C12.3 3.82395 11.9663 3.5 11.5086 3.5C11.1941 3.5 10.9986 3.61434 10.8079 3.91447L6.90845 10.0601L4.93012 7.60661C4.75374 7.39699 4.56306 7.30171 4.2961 7.30171C3.8337 7.30171 3.5 7.63042 3.5 8.07824C3.5 8.27832 3.56197 8.45464 3.73358 8.64992L6.19339 11.6274C6.39838 11.8704 6.62719 11.98 6.93229 11.98Z"
+            fill={doneStrokeColor}
+          />
+        </>
+      ) : (
+        <g transform={`translate(8, 8)`}>
+          <path d={getPath(total, total, 16)} fill={fillBackground} />
+          <path d={getPath(index, total, 16)} fill={fillProgress} />
+        </g>
+      )}
     </svg>
   );
 };
@@ -63,7 +57,7 @@ const getPath = _.memoize(
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore bad d3-shape typings
     return arc()
-      .innerRadius(size / 3)
+      .innerRadius(size / 2.75)
       .outerRadius(size / 2)
       .startAngle(0)
       .endAngle(2 * (index / total) * Math.PI)

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)}
-        />
-      }
-    />
-  );
-};