@fibery/ui-kit 1.36.1 → 1.37.0

package/src/card-container.tsx

@@ -1,10 +1,10 @@
-import {preventDefault} from "@fibery/react/src/prevent-default";
 import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cx from "classnames";
 import {CSSProperties, ReactNode} from "react";
 import {getBg} from "./box";
+import {CardHiddenLink} from "./card-hidden-link";
 import {border, space, themeVars} from "./design-system";
 import {visuallyHidden} from "./styles-utils";
 
@@ -273,59 +273,6 @@ const ColorCoding = styled.div<{backgroundColors: string[]}>`
   background: ${({backgroundColors}) => getBg(backgroundColors)};
 `;
 
-type LinkWrapperProps = {
-  href?: string;
-  coverArea: boolean;
-  children: ReactNode;
-};
-
-const LinkWrapper = ({href, coverArea, children}: LinkWrapperProps) => {
-  if (href) {
-    return (
-      <a
-        href={href}
-        draggable="false"
-        onClick={preventDefault}
-        // To avoid tab on hidden link. but with this we can't open card via keyboard navigation.
-        tabIndex={-1}
-        data-is-card-hidden-link={true}
-        className={
-          coverArea
-            ? cx(
-                css`
-                  &::after {
-                    content: "";
-                    position: absolute;
-                    left: 0;
-                    top: 0;
-                    right: 0;
-                    bottom: 0;
-                  }
-                `
-              )
-            : cx(
-                css`
-                  color: inherit;
-
-                  &:hover {
-                    color: inherit;
-                  }
-
-                  &:visited {
-                    color: inherit;
-                  }
-                `
-              )
-        }
-      >
-        {children}
-      </a>
-    );
-  } else {
-    return <>{children}</>;
-  }
-};
-
 type Props = {
   before: ReactNode;
   title: ReactNode;
@@ -338,8 +285,13 @@ type Props = {
   input?: boolean;
   linkHref?: string;
   titleClassName?: string;
+  titleString?: string;
 };
 
+const cardContent = css`
+  position: relative;
+`;
+
 export const CardContainer = ({
   cover,
   before,
@@ -352,6 +304,7 @@ export const CardContainer = ({
   input,
   linkHref,
   titleClassName,
+  titleString,
 }: Props) => {
   const showCover = Boolean(cover && coverHeightBySize[size]);
   const hasContent = Boolean(before || title || after);
@@ -381,14 +334,12 @@ export const CardContainer = ({
           {cover}
         </div>
       )}
-      <div
-        className={css`
-          position: relative;
-        `}
-      >
-        <LinkWrapper href={linkHref} coverArea={true}>
-          <div className={visuallyHidden}>{title}</div>
-        </LinkWrapper>
+      <div className={cardContent}>
+        {linkHref ? (
+          <CardHiddenLink href={linkHref} coverArea={true}>
+            <div className={visuallyHidden}>{title}</div>
+          </CardHiddenLink>
+        ) : null}
 
         {backgroundColors && <ColorCoding className={colorCodingClassName} backgroundColors={backgroundColors} />}
 
@@ -406,12 +357,25 @@ export const CardContainer = ({
                   titleClassName
                 )}
               >
-                <LinkWrapper href={linkHref} coverArea={false}>
-                  {title}
-                </LinkWrapper>
+                {title}
               </div>
             )}
             {after && <div className={afterStyles[size]}>{after}</div>}
+            <div
+              data-entity-title={titleString || ""}
+              className={cx(
+                `extension-entity-card-spot`,
+                css`
+                  display: none;
+                  .${cardContent}:hover &:not(:empty) {
+                    display: block;
+                    position: absolute;
+                    top: ${space.s6}px;
+                    right: ${space.s6}px;
+                  }
+                `
+              )}
+            />
           </div>
         )}
       </div>

package/src/card-hidden-link.tsx

@@ -0,0 +1,52 @@
+import {preventDefault} from "@fibery/react/src/prevent-default";
+import {css, cx} from "@linaria/core";
+import {ReactNode} from "react";
+
+type CardHiddenLinkProps = {
+  href: string;
+  coverArea: boolean;
+  children: ReactNode;
+};
+
+export const CardHiddenLink = ({href, coverArea, children}: CardHiddenLinkProps) => {
+  return (
+    <a
+      href={href}
+      draggable="false"
+      onClick={preventDefault}
+      // To avoid tab on hidden link. but with this we can't open card via keyboard navigation.
+      tabIndex={-1}
+      data-is-card-hidden-link={true}
+      className={
+        coverArea
+          ? cx(
+              css`
+                &::after {
+                  content: "";
+                  position: absolute;
+                  left: 0;
+                  top: 0;
+                  right: 0;
+                  bottom: 0;
+                }
+              `
+            )
+          : cx(
+              css`
+                color: inherit;
+
+                &:hover {
+                  color: inherit;
+                }
+
+                &:visited {
+                  color: inherit;
+                }
+              `
+            )
+      }
+    >
+      {children}
+    </a>
+  );
+};

package/src/collapsible-section.tsx

@@ -3,11 +3,17 @@ import ArrowBottom from "./icons/react/ArrowBottom";
 import ArrowTop from "./icons/react/ArrowTop";
 import {ReactNode, useCallback} from "react";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {space} from "./design-system";
 
 const headerCss = css`
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: ${space.s8}px;
+`;
+
+const arrowCss = css`
+  margin-left: auto;
+  margin-right: 0;
 `;
 
 type Props = {
@@ -17,6 +23,8 @@ type Props = {
   collapsedDefault?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
   children: ReactNode;
+  badge?: ReactNode;
+  keepChildren?: boolean;
 };
 
 export const CollapsibleSection = ({
@@ -26,6 +34,7 @@ export const CollapsibleSection = ({
   collapsedDefault = false,
   onCollapsedChange,
   children,
+  badge,
 }: Props) => {
   const [isCollapsed, setIsCollapsed] = useControllableState({
     value: collapsed,
@@ -33,7 +42,7 @@ export const CollapsibleSection = ({
     onChange: onCollapsedChange,
   });
 
-  const arrow = isCollapsed ? <ArrowBottom /> : <ArrowTop />;
+  const arrow = isCollapsed ? <ArrowBottom className={arrowCss} /> : <ArrowTop className={arrowCss} />;
 
   const onToggle = useCallback(() => setIsCollapsed(!isCollapsed), [isCollapsed, setIsCollapsed]);
 
@@ -54,6 +63,7 @@ export const CollapsibleSection = ({
       }}
     >
       {label}
+      {badge}
       {arrow}
     </div>
   );
@@ -63,7 +73,7 @@ export const CollapsibleSection = ({
   return (
     <div>
       {collapsible ? collapsibleHeader : regularHeader}
-      {collapsible && isCollapsed ? null : children}
+      <div style={{display: collapsible && isCollapsed ? "none" : "block"}}>{children}</div>
     </div>
   );
 };

package/src/color-picker/index.js

@@ -29,76 +29,80 @@ const hexInpuWrapperCss = css`
   margin-top: ${space.s12}px;
 `;
 
-const SliderPicker = ColorWrap(({containerClassName, colors, getSwatchHoverColor, ...rest}) => {
-  const hasSelectedColor = Boolean(rest.color);
+const SliderPicker = ColorWrap(
+  ({containerClassName, colors, getSwatchHoverColor, getColorOverrideFn = undefined, ...rest}) => {
+    const hasSelectedColor = Boolean(rest.color);
 
-  const idxSelectedColor = colors?.findIndex((color) => color.toLowerCase() === rest.hex.toLowerCase());
+    const idxSelectedColor = colors?.findIndex((color) => color.toLowerCase() === rest.hex.toLowerCase());
 
-  const [isExpanded, setIsExpanded] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
 
-  const isCustomSwatchSelected = (idxSelectedColor === -1 && hasSelectedColor) || isExpanded;
+    const isCustomSwatchSelected = (idxSelectedColor === -1 && hasSelectedColor) || isExpanded;
+    const getColorOverride = getColorOverrideFn || ((color) => color);
 
-  return (
-    <CollapsibleRoot open={isCustomSwatchSelected} onOpenChange={setIsExpanded} className={pickerWrapperCss}>
-      {colors && (
-        <div className={containerClassName}>
-          {colors.map((color, idx) => (
-            <Swatch
-              key={color}
-              getHoverColor={getSwatchHoverColor}
-              onClick={() => {
-                setIsExpanded(false);
-                rest.onChange(color);
+    return (
+      <CollapsibleRoot open={isCustomSwatchSelected} onOpenChange={setIsExpanded} className={pickerWrapperCss}>
+        {colors && (
+          <div className={containerClassName}>
+            {colors.map((color, idx) => (
+              <Swatch
+                key={color}
+                getHoverColor={getSwatchHoverColor}
+                onClick={() => {
+                  setIsExpanded(false);
+                  rest.onChange(color);
+                }}
+                color={getColorOverride(color)}
+                selected={!isCustomSwatchSelected && idxSelectedColor === idx}
+              />
+            ))}
+            <CollapsibleTrigger asChild>
+              <Swatch
+                custom
+                getHoverColor={getSwatchHoverColor}
+                onClick={() => setIsExpanded(!isExpanded)}
+                selected={isCustomSwatchSelected}
+                color={isCustomSwatchSelected ? rest.hex : undefined}
+              />
+            </CollapsibleTrigger>
+          </div>
+        )}
+
+        <CollapsibleContent>
+          <div className={saturationWrapperCss}>
+            <Saturation {...rest} pointer={SliderPointer} />
+          </div>
+          <div className={hueWrapperCss}>
+            <Hue {...rest} pointer={SliderPointer} />
+          </div>
+          <div className={hexInpuWrapperCss}>
+            <EditableInput
+              style={{
+                input: {
+                  padding: `${space.s6}px ${space.s12}px`,
+                  width: "100%",
+                  border: "none",
+                  borderRadius: border.radius6,
+                  backgroundColor: themeVars.actionMenuBg,
+                  boxShadow: themeVars.inputBorderColor,
+                  outline: "none",
+                  ...textStyles.regular,
+                },
               }}
-              color={color}
-              selected={!isCustomSwatchSelected && idxSelectedColor === idx}
-            />
-          ))}
-          <CollapsibleTrigger asChild>
-            <Swatch
-              custom
-              getHoverColor={getSwatchHoverColor}
-              onClick={() => setIsExpanded(!isExpanded)}
-              selected={isCustomSwatchSelected}
-              color={isCustomSwatchSelected ? rest.hex : undefined}
+              value={rest.hex}
+              onChange={rest.onChange}
             />
-          </CollapsibleTrigger>
-        </div>
-      )}
-
-      <CollapsibleContent>
-        <div className={saturationWrapperCss}>
-          <Saturation {...rest} pointer={SliderPointer} />
-        </div>
-        <div className={hueWrapperCss}>
-          <Hue {...rest} pointer={SliderPointer} />
-        </div>
-        <div className={hexInpuWrapperCss}>
-          <EditableInput
-            style={{
-              input: {
-                padding: `${space.s6}px ${space.s12}px`,
-                width: "100%",
-                border: "none",
-                borderRadius: border.radius6,
-                backgroundColor: themeVars.actionMenuBg,
-                boxShadow: themeVars.inputBorderColor,
-                outline: "none",
-                ...textStyles.regular,
-              },
-            }}
-            value={rest.hex}
-            onChange={rest.onChange}
-          />
-        </div>
-      </CollapsibleContent>
-    </CollapsibleRoot>
-  );
-});
+          </div>
+        </CollapsibleContent>
+      </CollapsibleRoot>
+    );
+  }
+);
 
 export const ColorPicker = ({
   color,
   getSwatchHoverColor,
+  getColorOverrideFn = undefined,
   colors,
   onChangeComplete,
   containerClassName = colorSwatchContainerCss,
@@ -110,6 +114,7 @@ export const ColorPicker = ({
       containerClassName={containerClassName}
       color={optimisticColor}
       getSwatchHoverColor={getSwatchHoverColor}
+      getColorOverrideFn={getColorOverrideFn}
       colors={colors}
       onChange={setOptimisticColor}
       onChangeComplete={onChangeComplete}

package/src/color-picker/swatch.tsx

@@ -1,22 +1,26 @@
-import {CSSProperties, css, cx} from "@linaria/core";
+import {css, CSSProperties, cx} from "@linaria/core";
 import {forwardRef} from "react";
 import {IconButton, IconButtonProps} from "../button/icon-button";
 import {themeVars} from "../design-system";
 
+const swatchColorVar = "--fibery-swatch-color";
+const swatchHoverColorVar = "--fibery-swatch-hover-color";
+const swatchIconSizeVar = "--fibery-swatch-icon-size";
+
 const swatchContainerCss = css`
   &:hover:not(:disabled),
   &:focus-visible {
-    background-color: var(--fibery-swatch-hover-color, ${themeVars.badgeBgColor});
+    background-color: var(${swatchHoverColorVar}, ${themeVars.badgeBgColor});
   }
 `;
 
 const swatchCss = css`
   position: relative;
   border-radius: 100%;
-  width: 20px;
-  height: 20px;
+  width: var(${swatchIconSizeVar});
+  height: var(${swatchIconSizeVar});
   border: 1px solid ${themeVars.colorPickerSwatchBorder};
-  background-color: var(--swatch-color);
+  background-color: var(${swatchColorVar});
 `;
 
 const selectedCss = css`
@@ -24,8 +28,8 @@ const selectedCss = css`
     content: "";
     position: absolute;
     display: block;
-    width: 16px;
-    height: 16px;
+    width: calc(var(${swatchIconSizeVar}) - 4px);
+    height: calc(var(${swatchIconSizeVar}) - 4px);
     border-radius: 100%;
     top: 1px;
     left: 1px;
@@ -51,28 +55,38 @@ const customCss = css`
 
   &.${selectedCss} {
     &::after {
-      background-color: var(--swatch-color);
+      background-color: var(${swatchColorVar});
     }
   }
 `;
 
+const iconSizes = {
+  tiny: 16,
+  small: 16,
+  medium: 18,
+  large: 20,
+  huge: 22,
+};
+
 type SwatchProps = {
   color: string;
   getHoverColor?: (color: string) => string | undefined;
-  selected: boolean;
+  selected?: boolean;
   custom?: boolean;
-} & Omit<IconButtonProps, "size">;
+} & Omit<IconButtonProps, "color">;
+
 export const Swatch = forwardRef<HTMLButtonElement, SwatchProps>(
-  ({color, getHoverColor, selected, custom, className, ...rest}, ref) => {
+  ({size = "large", color, getHoverColor, selected, custom, className, ...rest}, ref) => {
     return (
       <IconButton
         ref={ref}
-        size="large"
+        size={size}
         title={color}
         style={
           {
-            "--swatch-color": color,
-            "--fibery-swatch-hover-color": color ? getHoverColor?.(color) : undefined,
+            [swatchColorVar]: color,
+            [swatchHoverColorVar]: color ? getHoverColor?.(color) : undefined,
+            [swatchIconSizeVar]: `${iconSizes[size]}px`,
           } as CSSProperties
         }
         className={cx(swatchContainerCss, className)}

package/src/command-menu/index.tsx

@@ -1,12 +1,12 @@
-import {CommandInput, CommandItem, CommandList, CommandGroup, CommandRoot, CommandEmpty, CommandSeparator} from "cmdk";
-import {border, layout, space, textStyles, themeVars} from "../design-system";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
+import {CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandRoot, CommandSeparator} from "cmdk";
 import {forwardRef, useRef, useState} from "react";
-import Search from "../icons/react/Search";
-import {css, cx} from "@linaria/core";
+import {border, layout, space, textStyles, themeVars} from "../design-system";
 import ClearInputFilled from "../icons/react/ClearInputFilled";
-import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
-import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import Search from "../icons/react/Search";
 
 export const CommandMenuRoot = styled(CommandRoot)`
   display: flex;
@@ -20,9 +20,10 @@ export const CommandMenuRoot = styled(CommandRoot)`
 
 const inputContainerCss = css`
   display: flex;
-  padding: ${space.s8}px ${space.s12}px;
+  padding: ${space.s4}px ${space.s12}px ${space.s8}px;
   align-items: center;
   border-bottom: 1px solid ${themeVars.separatorColor};
+  margin-bottom: ${space.s4}px;
 
   & input {
     min-width: 120px;
@@ -84,7 +85,6 @@ export const CommandMenuList = styled(CommandList)`
   height: var(--cmdk-list-height);
   max-height: 450px;
   transition: height 100ms ease;
-  margin-top: ${space.s4}px;
 `;
 
 export const CommandMenuEmpty = styled(CommandEmpty)`
@@ -101,7 +101,7 @@ export const CommandMenuGroup = styled(CommandGroup)`
     ${textStyles.small}
     display: flex;
     align-items: center;
-    padding: 0 ${space.s8}px;
+    padding: 0 ${space.s12}px;
     min-height: ${layout.groupTitleHeight}px;
     color: ${themeVars.accentTextColor};
   }
@@ -117,7 +117,7 @@ export const commandItemCss = css`
   display: flex;
   align-items: center;
   gap: ${space.s6}px;
-  padding: 0 ${space.s12}px;
+  padding: 0 ${space.s8}px;
   cursor: pointer;
   min-height: ${layout.menuItemHeight}px;
   margin: 0 ${space.s4}px;
@@ -128,6 +128,11 @@ export const commandItemCss = css`
     background-color: ${themeVars.colorBgActionsMenuItemHover};
   }
 `;
+
+const disabledItemCss = css`
+  cursor: not-allowed;
+`;
+
 const commandItemTitleCss = css`
   flex: 1 1 0;
   white-space: nowrap;
@@ -145,7 +150,7 @@ export const CommandMenuItem = forwardRef<
   const [showTitle, setShowTitle] = useState(false);
 
   return (
-    <CommandItem ref={ref} className={cx(commandItemCss, className)} {...props}>
+    <CommandItem ref={ref} className={cx(commandItemCss, className, props.disabled && disabledItemCss)} {...props}>
       {icon}
       <span
         title={showTitle ? (children as string) : ""}

package/src/command-menu/nested-command-menu.tsx

@@ -40,6 +40,7 @@ export type NestedMenuItem<T> = {
   emptyMessage?: string;
   calculateNestedItems?: () => Array<NestedMenuItem<T>>;
   kind?: "separator" | "group";
+  showNestedItemsOnClick?: boolean;
 };
 
 export type NestedMenuStack<T> = Array<{
@@ -287,7 +288,13 @@ function renderLevel<T>({
         <NestedCommandMenuItem
           key={item.key}
           value={item.key}
-          onSelect={() => onCmdkItemSelect(item)}
+          onSelect={() => {
+            if (item.showNestedItemsOnClick) {
+              onGoToRelation(item.key);
+            } else {
+              onCmdkItemSelect(item);
+            }
+          }}
           asChild
           className={cn(
             css`

package/src/context-menu/index.tsx

@@ -18,7 +18,7 @@ export const rowItemStyles = {
   minHeight: layout.menuItemHeight,
   outline: "none",
   borderRadius: border.radius0,
-  padding: `0px ${space.s12}px`,
+  padding: `0px ${space.s8}px`,
   margin: `0px ${space.s4}px`,
   cursor: "pointer",
 
@@ -101,8 +101,8 @@ export const Item = styled(ContextMenuPrimitive.Item)`
 
 export const Separator = styled(ContextMenuPrimitive.Separator)`
   ${{
-    backgroundColor: themeVars.separatorColor,
-    height: 1,
+    backgroundColor: themeVars.actionMenuSeparatorColor,
+    height: 0.5,
     margin: `${space.s4}px 0`,
   }}
 `;

package/src/count-badge.tsx

@@ -0,0 +1,57 @@
+import {fontWeight, space, themeVars} from "./design-system";
+import {css} from "@linaria/core";
+import cx from "classnames";
+import {ReactNode} from "react";
+
+type Props = {
+  className?: string;
+  count: number;
+};
+
+const countStyle = css`
+  display: inline-block;
+  padding: 0 ${space.s6}px 0 ${space.s6}px;
+  border-radius: ${space.s8}px;
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: ${fontWeight.regular};
+`;
+
+const countMinWidth = css`
+  min-width: 1.5ch;
+  text-align: center;
+  box-sizing: content-box;
+`;
+
+const countBadgeStyle = css`
+  background: ${themeVars.badgeBgColor};
+  color: ${themeVars.textColor};
+`;
+
+const warningStyle = css`
+  background: ${themeVars.warning};
+  color: ${themeVars.textColor};
+`;
+
+export function CountBadge({className, count}: Props) {
+  return <span className={cx(countStyle, countBadgeStyle, className)}>{count <= 99 ? count : "99+"}</span>;
+}
+
+export function CountBadgeWithNoLimits({count, warning}: {count: number | string; warning?: boolean}) {
+  return <span className={cx(countStyle, countBadgeStyle, countMinWidth, warning && warningStyle)}>{count}</span>;
+}
+
+export const ContentWithBadge = ({badge, children}: {badge: ReactNode; children: ReactNode}) => {
+  return (
+    <div
+      className={css`
+        display: flex;
+        align-items: center;
+        gap: ${space.s6}px;
+      `}
+    >
+      {children}
+      {badge}
+    </div>
+  );
+};

package/src/date-picker/date-range-input.tsx

@@ -219,7 +219,7 @@ export const DateRangeInput = forwardRef<
           }
         }
 
-        const [result] = getLocaleSpecificChrono().parse(inputValue.replace(datesSeparator, " - "));
+        const [result] = getLocaleSpecificChrono(dateFormat).parse(inputValue.replace(datesSeparator, " - "));
         let start;
         let end;
         if (result && result.start && result.end) {

package/src/date-picker/fake-date-input.tsx

@@ -33,7 +33,7 @@ export const FakeDateInputWrapper = forwardRef<HTMLDivElement, Props>(function F
     >
       <div>{children}</div>
       <div className={cn(expanderStyle, isPickerOpen && expanderExpandedStyle)}>
-        <ArrowCollapseVertical color={themeVars.disabledTextColor} />
+        {disabled ? null : <ArrowCollapseVertical color={themeVars.disabledTextColor} />}
       </div>
     </div>
   );