@fibery/ui-kit 1.36.0 → 1.36.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @fibery/ui-kit
 
+## 1.36.1
+
+### Patch Changes
+
+- Updated dependencies [ec46f77]
+  - @fibery/helpers@1.3.2
+  - @fibery/react@1.4.3
+
 ## 1.36.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.36.0",
+  "version": "1.36.1",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -44,8 +44,8 @@
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
     "@fibery/emoji-data": "2.6.1",
-    "@fibery/helpers": "1.3.1",
-    "@fibery/react": "1.4.2"
+    "@fibery/helpers": "1.3.2",
+    "@fibery/react": "1.4.3"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/avatar.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import _ from "lodash";
-import {CSSProperties, FC, memo, useCallback, useState} from "react";
+import {CSSProperties, FC, memo, useCallback, useMemo, useState} from "react";
 import {getDarkenColor, getObjectColorMemoized, textStyles, themeVars} from "./design-system";
 import {FibermojiPlaceholder} from "./fibermoji-placeholder";
 import {getShiftStyle} from "./icons/get-shift-style";
@@ -82,6 +82,7 @@ const EMOJI_BY_BADGE = {
   vacation: "🌴",
   dayon: "💻",
 };
+
 function getAvatarUrl(url: string, size: number) {
   if (!url) {
     return url;
@@ -92,7 +93,17 @@ function getAvatarUrl(url: string, size: number) {
   return urlObject.toString();
 }
 
-interface AvatarImageProps {
+/**
+ * This triggers a network request if the image is not cached.
+ * Avoid using in render or performance-critical code.
+ */
+const isImageCached = (src: string): boolean => {
+  const image = new Image();
+  image.src = src;
+  return image.complete && image.naturalWidth !== 0;
+};
+
+type AvatarImageProps = {
   size: number;
   containerSize?: number;
   title?: string;
@@ -102,11 +113,8 @@ interface AvatarImageProps {
   backgroundColor?: string;
   disableNativeTitle?: boolean;
   placeholder?: React.ReactNode;
-}
-/**
- *
- * @type {React.NamedExoticComponent<{readonly badges?: *, readonly backgroundColor?: *, readonly size?: *, readonly avatarUrl?: *, readonly disableNativeTitle?: *, readonly title?: *, readonly radius?: *, readonly containerSize?: *}>}
- */
+};
+
 export const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
   size,
   containerSize,
@@ -118,7 +126,13 @@ export const AvatarImage: FC<AvatarImageProps> = memo(function AvatarImage({
   disableNativeTitle = false,
   placeholder,
 }) {
-  const [fetchState, setFetchState] = useState(":fetch-state/start");
+  const initialFetchState = useMemo(() => {
+    if (avatarUrl && isImageCached(avatarUrl)) {
+      return ":fetch-state/success";
+    }
+    return ":fetch-state/start";
+  }, [avatarUrl]);
+  const [fetchState, setFetchState] = useState(initialFetchState);
   const onError = useCallback(() => {
     setFetchState(":fetch-state/error");
   }, []);
@@ -193,12 +207,12 @@ const getAvatarPlaceholderStyle = ({
   borderRadius: radius ?? "50%",
 });
 
-interface AvatarPlaceholderProps {
+type AvatarPlaceholderProps = {
   size: number;
   title?: string;
   radius?: number;
   backgroundColor?: string;
-}
+};
 
 export const AvatarPlaceholder: FC<AvatarPlaceholderProps> = memo(function AvatarPlaceholder(props) {
   const features = useFeatures<{enableFibermojiAvatars: boolean}>();
@@ -237,10 +251,10 @@ const getNullUserAvatarStyle = ({size, containerSize}: {size: number; containerS
 
 const magicCoefficient = 4.5;
 
-interface NullUserAvatarProps {
+type NullUserAvatarProps = {
   size: number;
   containerSize: number;
-}
+};
 
 export const NullUserAvatar: FC<NullUserAvatarProps> = memo(function NullUserAvatar({size, containerSize}) {
   const dashSize = (Math.PI * size) / magicCoefficient / 12;

package/src/command-menu/index.tsx

@@ -113,7 +113,7 @@ export const CommandMenuSeparator = styled(CommandSeparator)`
   margin: ${space.s4}px 0;
 `;
 
-const commandItemCss = css`
+export const commandItemCss = css`
   display: flex;
   align-items: center;
   gap: ${space.s6}px;
@@ -135,17 +135,6 @@ const commandItemTitleCss = css`
   overflow: hidden;
 `;
 
-export const CommandExpressionSelectItem = forwardRef<
-  React.ElementRef<typeof CommandItem>,
-  React.ComponentPropsWithoutRef<typeof CommandItem>
->(function CommandMenuItem({className, children, ...props}, ref) {
-  return (
-    <CommandItem ref={ref} className={cx(commandItemCss, className)} {...props}>
-      {children}
-    </CommandItem>
-  );
-});
-
 export const CommandMenuItem = forwardRef<
   React.ElementRef<typeof CommandItem>,
   React.ComponentPropsWithoutRef<typeof CommandItem> & {

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

@@ -0,0 +1,349 @@
+import {CommandItem} from "cmdk";
+import React, {forwardRef, ReactNode, useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {css, cx} from "@linaria/core";
+import {border, space, themeVars} from "../design-system";
+import Back from "../icons/react/Back";
+import {
+  commandItemCss,
+  CommandMenuEmpty,
+  CommandMenuGroup,
+  CommandMenuInput,
+  CommandMenuItem,
+  CommandMenuList,
+  CommandMenuRoot,
+  CommandMenuSeparator,
+} from "./index";
+import cn from "classnames";
+import {Tooltip} from "../tooltip";
+import {IconButton} from "../button/icon-button";
+import ArrowRight from "../icons/react/ArrowRight";
+
+const selectedItemClassName = css`
+  background-color: ${themeVars.colorBgListItemGeneralSelected};
+
+  &[data-selected="true"] {
+    background-color: ${themeVars.colorBgListItemGeneralSelectedHover};
+  }
+`;
+
+const arrowWrapperClassName = css`
+  flex-grow: 0;
+`;
+
+export type NestedMenuItem<T> = {
+  key: string;
+  title?: string;
+  icon?: ReactNode;
+  value: T;
+  groupItems?: Array<NestedMenuItem<T>>;
+  filterPlaceholder?: string;
+  emptyMessage?: string;
+  calculateNestedItems?: () => Array<NestedMenuItem<T>>;
+  kind?: "separator" | "group";
+};
+
+export type NestedMenuStack<T> = Array<{
+  item: NestedMenuItem<T>;
+  nestedItems: NestedMenuItem<T>[];
+}>;
+
+type Props<T> = {
+  defaultStack?: NestedMenuStack<T>;
+  defaultValue?: string;
+  rootItems: Array<NestedMenuItem<T>>;
+  onChange: (item: NestedMenuItem<T>) => void;
+  filterPlaceholder: string;
+  emptyMessage: string;
+  getArrowTooltipMessage: (item: NestedMenuItem<T>) => string;
+  maxDepthLevel?: number;
+};
+
+const NestedCommandMenuItem = forwardRef<
+  React.ElementRef<typeof CommandItem>,
+  React.ComponentPropsWithoutRef<typeof CommandItem>
+>(function CommandMenuItem({className, children, ...props}, ref) {
+  return (
+    <CommandItem ref={ref} className={cx(commandItemCss, className)} {...props}>
+      {children}
+    </CommandItem>
+  );
+});
+
+function isItemMatchFilter<T>(item: NestedMenuItem<T>, lowerCaseFilterValue: string) {
+  return item.title?.toLowerCase()?.includes(lowerCaseFilterValue);
+}
+
+export function NestedCommandMenu<T>({
+  defaultStack,
+  defaultValue,
+  rootItems,
+  onChange,
+  filterPlaceholder,
+  emptyMessage,
+  getArrowTooltipMessage,
+  maxDepthLevel = Number.MAX_VALUE,
+}: Props<T>) {
+  const [stack, setStack] = React.useState<NestedMenuStack<T>>(defaultStack || []);
+  const currentStackItem = stack[stack.length - 1];
+
+  const currentItems = currentStackItem?.nestedItems || rootItems;
+
+  const onGoToRelation = useCallback(
+    (key: string) => {
+      const item = currentItems.find((item) => item.key === key)!;
+      setStack((items) => [...items, {item, nestedItems: item.calculateNestedItems?.() || []}]);
+      setFilter("");
+    },
+    [currentItems]
+  );
+
+  const onCmdkItemSelect = useCallback(
+    (item: NestedMenuItem<T>) => {
+      onChange(item);
+    },
+    [onChange]
+  );
+
+  const [filter, setFilter] = useState("");
+
+  const filteredOptions = useMemo(() => {
+    const lowerCaseFilterValue = filter.toLowerCase();
+    if (!filter) {
+      return currentItems;
+    }
+
+    return currentItems
+      .map((item) => {
+        if (item.kind === "group") {
+          const groupItems = (item.groupItems || []).filter((groupItem) =>
+            isItemMatchFilter(groupItem, lowerCaseFilterValue)
+          );
+
+          return groupItems.length > 0 ? {...item, groupItems} : null;
+        }
+
+        return isItemMatchFilter(item, lowerCaseFilterValue) ? item : null;
+      })
+      .filter(Boolean) as Array<NestedMenuItem<T>>;
+  }, [filter, currentItems]);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+  }, [stack]);
+
+  const menuListRef = useRef<HTMLDivElement>(null);
+  const scrollToTop = useCallback(() => {
+    menuListRef.current?.scrollTo({top: 0, behavior: "instant"});
+  }, []);
+  useEffect(() => {
+    scrollToTop();
+  }, [stack, scrollToTop]);
+
+  const [value, setValue] = React.useState(defaultValue);
+
+  return (
+    <>
+      {stack.length > 0 && (
+        <>
+          <div
+            className={css`
+              cursor: pointer;
+
+              &:hover {
+                background-color: ${themeVars.colorBgActionsMenuItemHover};
+              }
+
+              display: flex;
+              padding: ${space.s6}px ${space.s8}px;
+              border-radius: ${border.radius6}px;
+              margin: 0 ${space.s4}px;
+              align-items: center;
+              gap: ${space.s8}px;
+            `}
+            onClick={() => {
+              setStack((relations) => relations.slice(0, -1));
+              setFilter("");
+            }}
+          >
+            <div>
+              <Back iconSize={16} aria-hidden />
+            </div>
+            <div>
+              Back
+              {stack.length > 1 ? ` to ${stack[stack.length - 2].item.title}` : ""}
+            </div>
+          </div>
+          <div
+            className={css`
+              background-color: ${themeVars.separatorColor};
+              height: 1px;
+              margin-top: ${space.s4}px;
+            `}
+          />
+        </>
+      )}
+
+      <CommandMenuRoot
+        shouldFilter={false}
+        value={value}
+        onValueChange={setValue}
+        onKeyDown={(e) => {
+          if (e.key === "Escape" || (e.key === "Backspace" && !filter && stack.length > 0)) {
+            e.preventDefault();
+            setStack((relations) => relations.slice(0, -1));
+          } else if (e.key === "ArrowRight") {
+            const currentItem = currentItems.find((item) => item.key === value);
+            if (currentItem && currentItem.calculateNestedItems) {
+              e.preventDefault();
+              onGoToRelation(currentItem.key);
+            }
+          } else if (e.key === "ArrowLeft" && stack.length > 0) {
+            e.preventDefault();
+            setStack((relations) => relations.slice(0, -1));
+          }
+        }}
+      >
+        <CommandMenuInput
+          ref={inputRef}
+          value={filter}
+          onValueChange={setFilter}
+          placeholder={currentStackItem?.item?.filterPlaceholder || filterPlaceholder}
+        />
+        <CommandMenuList
+          ref={menuListRef}
+          className={css`
+            && {
+              transition: none;
+              max-height: 300px;
+            }
+          `}
+        >
+          <CommandMenuEmpty>{currentStackItem?.item?.emptyMessage || emptyMessage}</CommandMenuEmpty>
+          {renderLevel({
+            options: filteredOptions,
+            stack,
+            maxDepthLevel,
+            onCmdkItemSelect,
+            onGoToRelation,
+            getArrowTooltipMessage,
+            defaultValue,
+          })}
+        </CommandMenuList>
+      </CommandMenuRoot>
+    </>
+  );
+}
+
+function renderLevel<T>({
+  options,
+  defaultValue,
+  stack,
+  maxDepthLevel,
+  onCmdkItemSelect,
+  onGoToRelation,
+  getArrowTooltipMessage,
+}: {
+  options: Array<NestedMenuItem<T>>;
+  defaultValue?: string;
+  stack: NestedMenuStack<T>;
+  maxDepthLevel: number;
+  onCmdkItemSelect: (item: NestedMenuItem<T>) => void;
+  onGoToRelation: (key: string) => void;
+  getArrowTooltipMessage: (item: NestedMenuItem<T>) => string;
+}) {
+  return options.map((item) => {
+    if (item.kind === "separator") {
+      return <CommandMenuSeparator key={item.key} />;
+    }
+
+    if (item.kind === "group") {
+      const nestedItems = item.groupItems || [];
+      if (nestedItems.length > 0) {
+        return (
+          <CommandMenuGroup heading={item.title} key={item.key}>
+            {renderLevel({
+              options: nestedItems,
+              defaultValue,
+              stack,
+              maxDepthLevel,
+              onCmdkItemSelect,
+              onGoToRelation,
+              getArrowTooltipMessage,
+            })}
+          </CommandMenuGroup>
+        );
+      }
+
+      return null;
+    }
+
+    const isSelected = item.key === defaultValue;
+    if (item.calculateNestedItems && stack.length < maxDepthLevel) {
+      return (
+        <NestedCommandMenuItem
+          key={item.key}
+          value={item.key}
+          onSelect={() => onCmdkItemSelect(item)}
+          asChild
+          className={cn(
+            css`
+              padding-right: 0;
+            `,
+            isSelected ? selectedItemClassName : undefined
+          )}
+        >
+          <div
+            className={css`
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              gap: ${space.s6}px;
+
+              &[data-selected="true"]:has(.${arrowWrapperClassName}:hover) {
+                background-color: transparent;
+              }
+            `}
+          >
+            {item.icon}
+            <div
+              className={css`
+                flex: 1;
+              `}
+            >
+              {item.title}
+            </div>
+            <div className={arrowWrapperClassName}>
+              <Tooltip title={getArrowTooltipMessage(item)}>
+                <IconButton
+                  size={"medium"}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onGoToRelation(item.key);
+                  }}
+                >
+                  <ArrowRight color={themeVars.iconColor} containerSize={10} aria-hidden />
+                </IconButton>
+              </Tooltip>
+            </div>
+          </div>
+        </NestedCommandMenuItem>
+      );
+    } else {
+      return (
+        <CommandMenuItem
+          key={item.key}
+          value={item.key}
+          onSelect={() => onCmdkItemSelect(item)}
+          icon={item.icon}
+          className={isSelected ? selectedItemClassName : undefined}
+        >
+          {item.title}
+        </CommandMenuItem>
+      );
+    }
+  });
+}

package/src/date-picker/relative-date-picker.tsx

@@ -17,6 +17,7 @@ const unitOptions = [
   {value: "day", label: "days"},
   {value: "week", label: "weeks"},
   {value: "month", label: "months"},
+  {value: "quarter", label: "quarters"},
   {value: "year", label: "years"},
 ];
 
@@ -25,12 +26,6 @@ const isBeforeNowOptions = [
   {value: "from now", label: "from now"},
 ];
 
-const blurOnEnter = (e: $TSFixMe) => {
-  if (e.key === "Enter") {
-    e.target.blur();
-  }
-};
-
 export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
   const {value, onChange, relativeDateToExactDate} = props;
 
@@ -45,14 +40,30 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
 
   const [amount, setAmount] = useState(valueWithDefault.amount);
   const onAmountChange = useCallback((newAmount: $TSFixMe) => {
-    if (newAmount === null || newAmount < 0) {
+    if (newAmount === null) {
+      return;
+    }
+    if (newAmount < 0) {
       setAmount(0);
     } else {
       setAmount(Math.floor(newAmount));
     }
   }, []);
+
+  const onKeyDown = useCallback(
+    (e: $TSFixMe) => {
+      if (e.key === "Enter") {
+        onChange({...valueWithDefault, amount});
+        e.target.blur();
+      }
+    },
+    [amount, onChange, valueWithDefault]
+  );
+
   const handleBlur = useCallback(() => {
-    onChange({...valueWithDefault, amount});
+    if (amount !== valueWithDefault.amount) {
+      onChange({...valueWithDefault, amount});
+    }
   }, [onChange, amount, valueWithDefault]);
 
   const onIsBeforeNowChange = useCallback(
@@ -85,7 +96,7 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
             style={{width: "56px"}}
             onBlur={handleBlur}
             onChange={onAmountChange}
-            onKeyDown={blurOnEnter}
+            onKeyDown={onKeyDown}
           />
         </div>
         <div

package/src/icons/ast/DateRange.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const DateRange: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M14 3.6h1.6A2.4 2.4 0 0 1 18 6v9.6a2.4 2.4 0 0 1-2.4 2.4H4.4A2.4 2.4 0 0 1 2 15.6V6a2.4 2.4 0 0 1 2.4-2.4H6v-.8a.8.8 0 0 1 1.6 0v.8h4.8v-.8a.8.8 0 0 1 1.6 0v.8Zm2.166 12.566a.8.8 0 0 0 .234-.566V6a.8.8 0 0 0-.8-.8H14V6a.8.8 0 0 1-1.6 0v-.8H7.6V6A.8.8 0 0 1 6 6v-.8H4.4a.8.8 0 0 0-.8.8v9.6a.8.8 0 0 0 .8.8h11.2a.8.8 0 0 0 .566-.234ZM8.78 8.22a.75.75 0 0 1 0 1.06L7.56 10.5h4.88l-1.22-1.22a.75.75 0 0 1 1.06-1.06l2.5 2.5a.75.75 0 0 1 0 1.06l-2.5 2.5a.75.75 0 1 1-1.06-1.06L12.44 12H7.56l1.22 1.22a.75.75 0 1 1-1.06 1.06l-2.5-2.5a.75.75 0 0 1 0-1.06l2.5-2.5a.75.75 0 0 1 1.06 0Z"},"children":[]}],"metadata":""}]},"name":"date-range"};
+
+export default DateRange;

package/src/icons/ast/ReadOnly.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ReadOnly: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M2.22 2.22a.75.75 0 0 1 1.06 0l4.845 4.844 3.47-3.47a3.402 3.402 0 1 1 4.81 4.811l-3.47 3.47 4.845 4.845a.75.75 0 1 1-1.06 1.06L2.22 3.28a.75.75 0 0 1 0-1.06Zm11.683 6.567-2.028 2.027-2.69-2.689 2.028-2.028 2.69 2.69Zm1.442-4.132a1.902 1.902 0 0 0-2.69 0l-.558.558 2.69 2.69.558-.558a1.902 1.902 0 0 0 0-2.69ZM6.534 10.777a.75.75 0 0 0-1.06-1.061L2.72 12.47a.75.75 0 0 0-.22.53v3.5a1 1 0 0 0 1 1H7a.75.75 0 0 0 .53-.22l2.754-2.753a.75.75 0 0 0-1.06-1.061L6.688 16H4v-2.69l2.534-2.533Z"},"children":[]}],"metadata":""}]},"name":"read-only"};
+
+export default ReadOnly;

package/src/icons/ast/index.tsx

@@ -84,6 +84,7 @@ export { default as CrossCircle } from './CrossCircle';
 export { default as DatabaseOff } from './DatabaseOff';
 export { default as DatabaseStroke } from './DatabaseStroke';
 export { default as Database } from './Database';
+export { default as DateRange } from './DateRange';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
 export { default as Dependency } from './Dependency';
@@ -212,6 +213,7 @@ export { default as PresentPlay } from './PresentPlay';
 export { default as PresentStop } from './PresentStop';
 export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
+export { default as ReadOnly } from './ReadOnly';
 export { default as Refresh } from './Refresh';
 export { default as RemovePeople } from './RemovePeople';
 export { default as Remove } from './Remove';

package/src/icons/react/DateRange.tsx

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

package/src/icons/react/ReadOnly.tsx

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

package/src/icons/react/index.tsx

@@ -84,6 +84,7 @@ export { default as CrossCircle } from './CrossCircle';
 export { default as DatabaseOff } from './DatabaseOff';
 export { default as DatabaseStroke } from './DatabaseStroke';
 export { default as Database } from './Database';
+export { default as DateRange } from './DateRange';
 export { default as Delete } from './Delete';
 export { default as Demo } from './Demo';
 export { default as Dependency } from './Dependency';
@@ -212,6 +213,7 @@ export { default as PresentPlay } from './PresentPlay';
 export { default as PresentStop } from './PresentStop';
 export { default as PrivateItems } from './PrivateItems';
 export { default as Question } from './Question';
+export { default as ReadOnly } from './ReadOnly';
 export { default as Refresh } from './Refresh';
 export { default as RemovePeople } from './RemovePeople';
 export { default as Remove } from './Remove';

package/src/icons/svg/date-range.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M14 3.6H15.6C16.2365 3.6 16.847 3.85286 17.2971 4.30294C17.7471 4.75303 18 5.36348 18 6V15.6C18 16.2365 17.7471 16.847 17.2971 17.2971C16.847 17.7471 16.2365 18 15.6 18H4.4C3.76348 18 3.15303 17.7471 2.70294 17.2971C2.25286 16.847 2 16.2365 2 15.6V6C2 5.36348 2.25286 4.75303 2.70294 4.30294C3.15303 3.85286 3.76348 3.6 4.4 3.6H6V2.8C6 2.58783 6.08429 2.38434 6.23431 2.23431C6.38434 2.08429 6.58783 2 6.8 2C7.01217 2 7.21566 2.08429 7.36569 2.23431C7.51571 2.38434 7.6 2.58783 7.6 2.8V3.6H12.4V2.8C12.4 2.58783 12.4843 2.38434 12.6343 2.23431C12.7843 2.08429 12.9878 2 13.2 2C13.4122 2 13.6157 2.08429 13.7657 2.23431C13.9157 2.38434 14 2.58783 14 2.8V3.6ZM16.1657 16.1657C16.3157 16.0157 16.4 15.8122 16.4 15.6V6C16.4 5.78783 16.3157 5.58434 16.1657 5.43431C16.0157 5.28429 15.8122 5.2 15.6 5.2H14V6C14 6.21217 13.9157 6.41566 13.7657 6.56569C13.6157 6.71571 13.4122 6.8 13.2 6.8C12.9878 6.8 12.7843 6.71571 12.6343 6.56569C12.4843 6.41566 12.4 6.21217 12.4 6V5.2H7.6V6C7.6 6.21217 7.51571 6.41566 7.36569 6.56569C7.21566 6.71571 7.01217 6.8 6.8 6.8C6.58783 6.8 6.38434 6.71571 6.23431 6.56569C6.08429 6.41566 6 6.21217 6 6V5.2H4.4C4.18783 5.2 3.98434 5.28429 3.83431 5.43431C3.68429 5.58434 3.6 5.78783 3.6 6V15.6C3.6 15.8122 3.68429 16.0157 3.83431 16.1657C3.98434 16.3157 4.18783 16.4 4.4 16.4H15.6C15.8122 16.4 16.0157 16.3157 16.1657 16.1657ZM8.78033 8.21967C9.07322 8.51256 9.07322 8.98744 8.78033 9.28033L7.56066 10.5H12.4393L11.2197 9.28033C10.9268 8.98744 10.9268 8.51256 11.2197 8.21967C11.5126 7.92678 11.9874 7.92678 12.2803 8.21967L14.7803 10.7197C15.0732 11.0126 15.0732 11.4874 14.7803 11.7803L12.2803 14.2803C11.9874 14.5732 11.5126 14.5732 11.2197 14.2803C10.9268 13.9874 10.9268 13.5126 11.2197 13.2197L12.4393 12H7.56066L8.78033 13.2197C9.07322 13.5126 9.07322 13.9874 8.78033 14.2803C8.48744 14.5732 8.01256 14.5732 7.71967 14.2803L5.21967 11.7803C4.92678 11.4874 4.92678 11.0126 5.21967 10.7197L7.71967 8.21967C8.01256 7.92678 8.48744 7.92678 8.78033 8.21967Z" />
+</svg>

package/src/icons/svg/read-only.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M2.21967 2.21967C2.51256 1.92678 2.98744 1.92678 3.28033 2.21967L8.125 7.06434L11.5947 3.59468C12.9231 2.26625 15.0769 2.26625 16.4053 3.59468C17.7338 4.92311 17.7338 7.07691 16.4053 8.40534L12.9357 11.875L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L2.21967 3.28033C1.92678 2.98744 1.92678 2.51256 2.21967 2.21967ZM13.9027 8.78662L11.875 10.8143L9.18566 8.125L11.2134 6.09728L13.9027 8.78662ZM15.3447 4.65534C14.602 3.9127 13.398 3.9127 12.6553 4.65534L12.0973 5.21339L14.7866 7.90273L15.3447 7.34468C16.0873 6.60204 16.0873 5.39798 15.3447 4.65534Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M6.53401 10.7767C6.82691 10.4838 6.82691 10.0089 6.53401 9.71599C6.24112 9.4231 5.76625 9.4231 5.47335 9.71599L2.71967 12.4697C2.57902 12.6103 2.5 12.8011 2.5 13V16.5C2.5 17.0523 2.94772 17.5 3.5 17.5H7C7.19891 17.5 7.38968 17.421 7.53033 17.2803L10.284 14.5267C10.5769 14.2338 10.5769 13.7589 10.284 13.466C9.99112 13.1731 9.51625 13.1731 9.22335 13.466L6.68934 16H4V13.3107L6.53401 10.7767Z" />
+</svg>

package/src/loaders.tsx

@@ -1,6 +1,6 @@
 import {css, cx} from "@linaria/core";
 import {styled} from "@linaria/react";
-import {ReactNode, memo} from "react";
+import {ReactNode, memo, useMemo} from "react";
 import {IconBaseProps} from "./icons/types";
 import {border, layout, space, textStyles, themeVars} from "./design-system";
 import {getShiftStyle} from "./icons/get-shift-style";
@@ -104,35 +104,40 @@ const ContainerSpinner = styled.div<{containerSize: number}>`
   line-height: ${(props) => props.containerSize}px;
 `;
 
-type SpinnerProps = {
+type Props = {
   size?: number;
   containerSize?: number;
   width?: number;
   color?: string;
   backgroundColor?: string;
 };
-export const Spinner = memo<SpinnerProps>(function Spinner({
-  size = 20,
-  containerSize = 15,
-  width = 2,
-  color = "#000000",
-  backgroundColor = "#FFFFFF",
-}) {
-  const spinnerStyle = {
-    width: size,
-    height: size,
-    ...getShiftStyle({elementSize: size, containerSize}),
-    borderWidth: width,
-    borderColor: backgroundColor,
-    borderTopColor: color,
-  };
 
-  return (
-    <ContainerSpinner containerSize={containerSize}>
-      <div style={spinnerStyle} className={spinner} />
-    </ContainerSpinner>
-  );
-});
+export const Spinner = memo<Props>(
+  ({
+    size = 20,
+    containerSize = 15,
+    width = 2,
+    color = themeVars.iconColor,
+    backgroundColor = themeVars.badgeBgColor,
+  }) => {
+    const style = useMemo(() => {
+      return {
+        width: size,
+        height: size,
+        ...getShiftStyle({elementSize: size, containerSize}),
+        borderWidth: width,
+        borderColor: backgroundColor,
+        borderTopColor: color,
+      };
+    }, [backgroundColor, color, containerSize, size, width]);
+
+    return (
+      <ContainerSpinner containerSize={containerSize}>
+        <div style={style} className={spinner} />
+      </ContainerSpinner>
+    );
+  }
+);
 
 export const LoadingTreeMenuItem = ({
   color,

package/src/number-input/number-input.tsx

@@ -1,6 +1,6 @@
 import {textStyles, themeVars} from "../../src/design-system";
 import {css} from "@linaria/core";
-import {useCallback, useMemo, useRef, useState, useImperativeHandle, forwardRef} from "react";
+import {ComponentProps, forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState} from "react";
 import {formatValue, getStep, parseValue} from "./index";
 import _ from "lodash";
 import {add, sub} from "./decimal";
@@ -10,9 +10,9 @@ import {stopPropagation} from "@fibery/react/src/stop-propagation";
 import cx from "classnames";
 import {invalidInputStyle} from "./edit-unit-styles";
 
-const invalidClassName = css``;
+const invalidCss = css``;
 
-export const inputContainerClassName = css`
+const inputContainerCss = css`
   position: relative;
   input {
     background-color: ${themeVars.transparent};
@@ -26,31 +26,30 @@ export const inputContainerClassName = css`
     }
   }
 
-  &.${invalidClassName} {
+  &.${invalidCss} {
     ${invalidInputStyle}
   }
 `;
 
-export const NumberInlineInput = forwardRef<
-  HTMLInputElement,
-  {
-    value: string | number | null;
-    numberFormat: "Number" | "Money" | "Percent";
-    format?: (value: string | number) => string;
-    numberPrecision: number;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onChange: (value: string | number) => void;
-    placeholder: string;
-    autoFocus: boolean;
-    style: object;
-    width?: number;
-    valueWrapperClassName?: string;
-    decimalSeparator?: string;
-    invalid?: boolean;
-  }
->(
+type NumberFormat = "Number" | "Money" | "Percent";
+
+type Props = ComponentProps<typeof InputNumber> & {
+  value: string | number | null;
+  numberFormat: NumberFormat;
+  format?: (value: string | number) => string;
+  numberPrecision: number;
+  placeholder: string;
+  autoFocus: boolean;
+  valueWrapperClassName?: string;
+  decimalSeparator?: string;
+  invalid?: boolean;
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onChange: (value: string | number | null) => void;
+};
+
+export const NumberInlineInput = forwardRef<HTMLInputElement, Props>(
   (
     {
       value,
@@ -69,23 +68,15 @@ export const NumberInlineInput = forwardRef<
     },
     ref
   ) => {
-    const isEditing = true;
-    const handleFocus: React.FocusEventHandler<HTMLInputElement> = useCallback(
-      (e) => {
-        if (onFocus) {
-          onFocus(e);
-        }
-      },
-      [onFocus]
-    );
-
     const inputRef = useRef<HTMLInputElement | null>(null);
     const [inputContainerRef, setInputContainerRef] = useState<HTMLDivElement | null>(null);
 
-    const handleBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
-      (e) => {
-        if (onBlur && e.relatedTarget && inputContainerRef && !inputContainerRef.contains(e.relatedTarget)) {
-          onBlur(e);
+    useImperativeHandle(ref, () => inputRef.current!, []);
+
+    const handleBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        if (e.relatedTarget && inputContainerRef && !inputContainerRef.contains(e.relatedTarget)) {
+          onBlur?.(e);
         }
       },
       [inputContainerRef, onBlur]
@@ -101,14 +92,7 @@ export const NumberInlineInput = forwardRef<
     );
 
     const handleStep = useCallback(
-      (
-        newValue: string | number,
-        {
-          type,
-        }: {
-          type: "up" | "down";
-        }
-      ) => {
+      (newValue: string | number, {type}: {type: "up" | "down"}) => {
         inputRef.current?.focus();
         const step = getStep(numberFormat);
         if (type === "up") {
@@ -119,29 +103,26 @@ export const NumberInlineInput = forwardRef<
       },
       [numberFormat, onChange, value]
     );
-    useImperativeHandle(ref, () => inputRef.current!, []);
 
     const formattedValue = useMemo(() => {
+      const isEditing = true;
       return formatValue(value, isEditing, numberFormat, format);
-    }, [value, isEditing, numberFormat, format]);
+    }, [value, numberFormat, format]);
 
     return (
-      <div
-        ref={setInputContainerRef}
-        className={cx(valueWrapperClassName, inputContainerClassName, invalid && invalidClassName)}
-      >
+      <div ref={setInputContainerRef} className={cx(valueWrapperClassName, inputContainerCss, invalid && invalidCss)}>
         <InputNumber
           autoFocus={autoFocus}
           ref={inputRef}
           value={formattedValue}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onKeyDown={onKeyDown}
           type="text"
           placeholder={placeholder}
           upHandler={<StepButton type={"up"} />}
           downHandler={<StepButton type={"down"} />}
+          onFocus={onFocus}
+          onBlur={handleBlur}
+          onChange={handleChange}
+          onKeyDown={onKeyDown}
           onStep={handleStep}
           onClick={stopPropagation}
           {...rest}

package/src/select/custom-select-partials/group-heading.tsx

@@ -1,5 +1,5 @@
 import {css} from "@linaria/core";
-import {GroupHeadingProps, components} from "react-select";
+import {components, GroupHeadingProps} from "react-select";
 import {layout, space, textStyles, themeVars} from "../../design-system";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
 import {GroupBase} from "../index";
@@ -47,6 +47,7 @@ const GroupDivider = () => (
     <div className={groupDividerStyle}></div>
   </div>
 );
+
 export function GroupHeading<
   Option,
   IsMulti extends boolean = false,
@@ -77,3 +78,25 @@ export function GroupHeading<
     </components.GroupHeading>
   );
 }
+
+// probably can be united with "GroupHeading" above.
+export function GroupSeparator<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({...props}: GroupHeadingProps<Option, IsMulti, Group>) {
+  // Hide separators when searching
+  if (!props.data.separator || props.selectProps.inputValue) {
+    return null;
+  }
+
+  return (
+    <hr
+      style={{margin: `${((props.data.separatorMargin || space.s8) - 1) / 2}px 0`}}
+      className={css`
+        border: none;
+        border-bottom: 1px solid ${themeVars.separatorColor};
+      `}
+    />
+  );
+}

package/src/select/custom-select-partials/option.tsx

@@ -1,11 +1,11 @@
-import {OptionProps, components} from "react-select";
-import {GroupBase} from "../index";
 import {css} from "@linaria/core";
-import {layout, space} from "../../design-system";
-import {ListRowContent, ListRowSurface} from "../../lists/list-row-surface";
 import cn from "classnames";
 import {ComponentProps, useMemo} from "react";
+import {components, OptionProps} from "react-select";
+import {layout, space} from "../../design-system";
+import {ListRowContent, ListRowSurface} from "../../lists/list-row-surface";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
+import {GroupBase} from "../index";
 import {isPureTextChildren} from "../util";
 
 export const OptionNulledVitualizedStyles = {
@@ -22,16 +22,22 @@ export const OptionNulledStyles = {
   lineHeight: "",
   color: "",
 };
+
 const OptionRootClass = css`
-  padding: 0 ${space.s6}px;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  cursor: pointer;
-  max-width: 100%;
+  :where(&) {
+    padding: 0 ${space.s6}px;
+    display: flex;
+    align-items: stretch;
+    justify-content: stretch;
+    cursor: pointer;
+    max-width: 100%;
+  }
 `;
 const OptionWithTextContent = css`
-  padding-left: ${space.s6}px;
+  :where(&) {
+    padding-left: ${space.s6}px;
+    padding-right: ${space.s6}px;
+  }
 `;
 
 /**

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

@@ -50,7 +50,7 @@ const popupContainerClassName = css`
     align-items: flex-end;
   }
 `;
-const popupClassName = css`
+export const popupClassName = css`
   min-width: 320px;
   max-width: 440px;
 `;

package/src/select/util.ts

@@ -1,11 +1,12 @@
 import {GroupBase as ReactSelectGroupBase, OptionsOrGroups, SelectInstance} from "react-select";
 import {isObject} from "lodash";
 import {Children, createContext, ReactNode, RefObject} from "react";
+
 /**
  * API used by ReactSelect internal partials (at least VirtualizedMenuList).
  */
 export const ReactSelectRefContext = createContext<RefObject<SelectInstance>>({current: null});
-export type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean};
+export type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean; separatorMargin?: number};
 export function isGroup<Option, Group extends GroupBase<Option>>(
   optionOrGroup: Option | Group
 ): optionOrGroup is Group {